@charset "utf-8";
/* CSS Document */


body { background: #222222; margin: 0; padding:0; font-family: 'poppins';}
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth;}}

::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px;}
::-webkit-scrollbar { width: 8px; height: 8px;}
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.05); background-image: linear-gradient(160deg, #0eb36a, rgb(14, 179, 107,0.5)); border-radius: 3px;}

textarea:focus, input:focus{ outline: none;}

.loadingoverlay { background: #333 !important;}
.loadingoverlay::after { content: ''; width: 150px; height: 150px; border: dashed 2px rgba(255,255,255,0.2); position: absolute; border-radius: 100px; animation-name: loadingoverlay_animation__rotate_right; animation-duration: 6000ms; animation-timing-function: linear; animation-iteration-count: infinite;}
.loadingoverlay_element { animation-duration:0ms !important;}
.logo {width: 200px; margin: 0 auto;}

#wrapper { width: 100%; height: 100vh; overflow: hidden;}
#wrapper::before { width: 2400px; height: 320px; display: block; content: ''; z-index: -1; position: relative; top: calc(50% - 80px); left: calc(50% - 1200px);  background: radial-gradient(50% 50.01% at 50% 50.01%, rgba(77, 232, 247, 0.52) 0%, rgba(77, 232, 247, 0.29) 22.4%, rgba(77, 232, 247, 0.109375) 46.35%, rgba(77, 232, 247, 0.0234375) 75.52%, rgba(77, 232, 247, 0) 90.1%); 
    animation-name: gardient2; animation-duration: 3s; animation-delay:2s; animation-fill-mode: forwards; opacity: 0; }
    @keyframes gardient2 {
        from { opacity: 0; }
        to { opacity: 1;}} 
#wrapper::after { width: 2000px; height: 2000px; content: ''; display: block; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(77, 232, 247, 0.46) 0%, rgba(77, 232, 247, 0) 80.21%); opacity: 0.6; position: fixed; left: calc(50% - 1000px); top: calc(50% - 1000px);
animation-name: gardient1; animation-duration: 2s; animation-delay:1s; animation-fill-mode: forwards; opacity: 0; }
@keyframes gardient1 {
    from { opacity: 0; }
    to { opacity: 1;}} 
#wrapper header { overflow: hidden; text-align: center; position: absolute; top: calc(50vh - 230px); width: 100%; transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; animation-name: opening; animation-duration: 2s; animation-delay:.2s; animation-fill-mode: forwards; opacity: 0; }
@keyframes opening {
    from { opacity: 0; }
    to { opacity: 1;}} 

#wrapper header h1 { color: #fff; font-family: 'poppins'; font-weight: 600; font-size: 50px; letter-spacing: 2px; margin: 0 0 10px; text-transform: uppercase; padding: 0 40px; }
#wrapper header h2 { max-width: 900px; margin: 0 auto; color: rgba(255,255,255,0.5); font-weight: 300; font-size: 18px;  line-height: 25px; padding: 0 40px;}
#wrapper header h2::after { content: ''; display: block; width: 100%; max-width: 600px; height: 20px; margin: 0 auto; position: relative; top: 18px; background: radial-gradient(50% 50.01% at 50% 50.01%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 90.1%);}

#wrapper header nav { margin: 45px 0;}
#wrapper header nav ul { margin: 0; padding: 0;}
#wrapper header nav ul li a { border: solid 1px rgba(255,255,255,0.7); padding: 15px 40px; margin: 5px 10px 5px 0; font-size: 20px; border-radius: 7px; cursor: pointer; color: rgba(255,255,255,0.8); text-decoration: none; transition: all linear 0.3s; }
#wrapper header nav ul li a:hover { border: solid 1px rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); }

#main article.active { transform: translateY(0); opacity: 1;
animation-name: popup1; animation-duration: 2s; animation-delay:0.3s; animation-fill-mode: forwards; opacity: 0; }
@keyframes popup1 {
    from { opacity: 0; }
    to { opacity: 1;}} 
#main article h2 { margin: 0; padding: 35px 30px; color: #fff; font-weight: 400;}
#main article .fields { background: rgba(255,255,255,0.1); padding: 20px 30px 40px;}
#main article .fields .field label { display: block; padding: 15px 0 15px 15px; color: #fff;}
#main article .fields .field textarea, 
#main article .fields .field input { width: calc(100% - 40px); transition: all linear 0.3s; padding: 10px 15px; font-size: 16px; font-family: 'maven pro'; border-radius: 7px; background: none; border: solid 1px rgba(255,255,255,0.3); color: rgba(255,255,255,0.8);}
#main article .fields .field textarea:focus, 
#main article .fields .field input:focus { border: solid 1px rgba(255,255,255,0.7);}
#main article .fields .field.half { display: inline-block; width: 49.5%;}
#main article { transform: translateY(0.25rem); transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; position: absolute; top: calc(50% - 300px); left: calc(50% - 300px); width: 600px; margin: 0 auto; max-width: 100%; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; opacity: 0;     animation-name: popup1;     animation-duration: 2s; animation-delay: 0.3s; animation-fill-mode: forwards;}
#main article .actions { display: flex; margin:0; padding: 20px 30px 35px;}
#main article .actions li { list-style: none;}

#main article .actions button { background: none; border: solid 1px rgba(255,255,255,0.7); padding: 15px 40px; margin: 5px 10px 5px 0; font-size: 20px; border-radius: 7px; cursor: pointer; color: rgba(255,255,255,0.8); text-decoration: none; transition: all linear 0.3s; }
#main article .actions button:hover { border: solid 1px rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); }
#main article .actions button[type*="submit"] { background:#fff; color: #444;}
#main article .actions button[type*="submit"]:hover { border: solid 1px rgba(255,255,255,0.6); background: rgba(255,255,255,0.6); }

.close { position: absolute; top: 20px; right: 15px; width: 50px; height: 50px; overflow: hidden; cursor: pointer;}
.close::before { content: 'X'; display: inline-block; color: rgba(255,255,255,0.2); padding: 11px 18px 20px; font-size: 26px; transition: all linear 0.2s;} 
.close:hover::before{ color: rgba(255,255,255,0.7);}

/*Arief*/
.spinner {display: inline-block;width: 20px;height: 20px;}
.spinner:after {content: " ";display: block;width: 16px;height: 16px;border-radius: 50%;border: 6px solid #40afbb;border-color: #40afbb transparent #40afbb transparent;animation: spinner 1.2s linear infinite;}
#contact #refreshCaptcha { width: 32px; height: 36px; display: inline-block; background: url(../images/refresh.png) no-repeat; margin: 0 15px;}


@keyframes spinner {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}


/*================== RESPONSIVE =====================*/

@media only screen and (max-width: 720px) {
    #main article { width: 100%; top: 0px; left: 0px;}
    #wrapper header h1 { line-height: 45px; margin: 10px 0 20px 0;}
}

@media only screen and (max-width: 600px) {
    #wrapper header { top: calc(50vh - 220px);}
  }
@media only screen and (max-width: 480px) {
    #wrapper header { top: calc(50vh - 250px);}
#wrapper header h1 { font-size: 42px; line-height: 42px;}
}  

@media only screen and (max-width: 390px) {
    #wrapper header h1 { font-size: 37px; line-height: 37px;}
    }  

.company {margin-top: 90px;}
.company h3{ font-weight: 900; font-size: 32px; color: #ffffff;}
.owl-carousel .owl-stage {display: flex; align-items: center;}
.company-item img {width: 130px !important; height: 130px !important; object-fit: contain; filter: brightness(0) invert(1);}
.company-item.square img{height: 80px !important;}
.company-item.bamboo img{height: 55px !important;}