@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --primary-color: #fcc408;
    --secondary-color: #121212;
    --text-primary-color: #777;

    --white:#fff;

    --Font-family :"Poppins", sans-serif ;
    --Font-weight: 400;
    --line-height: 1.5;

    --Font-size: 16px;
    --Font-size-12: 12px;
    --Font-size-14: 14px;
    --Font-size-18: 18px;
    --Font-size-20: 20px;
    --Font-size-28: 28px;
}

* { margin: 0; padding: 0; white-space: 0;}

body { font-size: var(--Font-size); font-family: var(--Font-family); color: var(--text-primary-color); font-weight: 400;}

a { color: var(--secondary-color); text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
a:hover { color: var(--primary-color); }
ul, li { list-style: none; margin: 0; padding: 0; box-sizing: border-box;}

h1, h2, h3 { color: var(--secondary-color);}

h2.site-title { font-size: clamp(24px, 0px + 0.0583333333 * 100vw, 38px); margin-bottom: 25px;}
label.site-label { color: var(--primary-color); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-bottom: 8px;}

.btn-primary { border-radius:0; background-color: var(--primary-color); border: 0 none; color: var(--secondary-color); font-weight: 500;}
.btn-primary:hover {background-color: var(--secondary-color); color:var(--white);}
.btn-primary:focus, .btn-primary:focus-visible, .btn-primary:active, :not(.btn-check) + .btn:active {background-color: var(--secondary-color); color:var(--primary-color);}

.btn-secondary { border-radius:0; background-color: var(--secondary-color); border: 0 none; color: var(--white); font-weight: 500;}
.btn-secondary:hover {background-color: var(--primary-color); color:var(--white);}
.btn-secondary:focus, .btn-secondary:focus-visible, .btn-secondary:active, :not(.btn-check) + .btn:active {background-color: var(--secondary-color); color:var(--primary-color);}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"], select, textarea
{ width:100%; padding:8px 10px; color:var(--secondary-color); background:var(--white); border:1px solid #5f2c7625; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; transition-duration:0.5s; font-size:var(--Font-size); outline:0 none;}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="file"]:hover, select:hover, textarea:hover { background:var(--white); border:1px solid var(--primary-color); color:var(--secondary-color);}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="file"]:focus, select:focus, textarea:focus { background:var(--white); border:1px solid var(--primary-color); color:var(--secondary-color); font-style:normal;}



.fullwidth { width:100%; display: flex; justify-content: center;}
.wrap-inner { margin:0 auto; width:100%; max-width:1340px; padding:0 15px;}
.wrap-inner-full { margin:0 auto; width:100%; padding:0 40px;}
.wrap-inner-mid {  margin:0 auto; width:100%; max-width:1024px; padding:0 15px;}
.wrap-inner-small {  margin:0 auto; width:100%; max-width:640px; padding:0 15px;}
.wrap-inner-from { margin:0 auto; width:100%; max-width:840px; padding:0 15px;}

.twoColBox { width: 100%; display: flex; gap: 50px; justify-content: space-between; align-items: center;}
.twoColBox .cntBox { width: 50%;}
.twoColBox .imgBox { width: 50%;}
.twoColBox .imgBox img { width: 100%;}
.twoColBox .imgBox.borderTlBr img { border-top-left-radius: 50px; border-bottom-right-radius: 50px;}


.header { padding: 15px 0; position: fixed; z-index: 999; transition: top 0.3s ease;}
.header .wrap-inner { display: flex; justify-content: space-between; align-items: center;}

.header .logo { color: var(--white); font-size: 26px; font-weight: 700;}
.header .navMenu { display: flex; gap: 40px;}
.header .navMenu li:last-child { display: none;}
.header .navMenu a { color: var(--white); font-weight: 500;}
.header .navMenu a:hover,
.header .navMenu a.active { color: var(--primary-color);}
.header .navMenu .contact a { background-color: var(--primary-color); padding: 12px 22px; color: var(--secondary-color);}
.header .navMenu .menu-item-21 a { background-color: var(--primary-color); padding: 12px 22px; color: var(--secondary-color);}
.header .navMenu li:last-child i { font-size: var(--Font-size-28); color: var(--primary-color);}

.menuRight { width: 320px !important; overflow: hidden; background-color: var(--secondary-color);}
.menuRight .offcanvas-body { overflow: hidden;}
.menuRight .logo { background-color: var(--primary-color); color: var(--secondary-color); font-size: 26px; font-weight: 700; margin: -20px -20px 20px -20px; padding:10px 20px;}
.menuRight a { color: var(--white);}
.menuRight a:hover { color: var(--primary-color);}
.menuRight .navMenu { display: flex; flex-direction: column; margin-bottom: 30px; }
.menuRight .navMenu li { display: flex; position: relative; }
.menuRight .navMenu li::before { content: ""; width: 5px; height: 5px; background-color: var(--primary-color); position: absolute; left: 0px; top: 16px;}
.menuRight .navMenu a { width: 100%; display: block; color: var(--white); font-weight: 500; padding: 6px 20px;}
.menuRight .navMenu a:hover, .menuRight .navMenu a.active { color: var(--primary-color);}

.footer { background-color: var(--secondary-color); padding: 100px 0  20px 0;}
.footer .linkBox { display: flex; margin-bottom: 20px;}
.footer ul { display: flex; gap: 20px;}
.footer ul li { border-right: 1px solid #323232; padding-right: 20px;}
.footer ul li:last-child { border-right:0 none; padding-right:0;}
.footer ul a { font-size: var(--Font-size-14); text-transform: uppercase; color: var(--text-primary-color); font-weight: 500; letter-spacing: 1px;}
.footer ul a:hover, .footer ul a:active, .footer ul a.active { color: var(--primary-color); }
.footer .copyBox { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #323232; padding-top: 20px;}
.footer .copyBox address { margin: 0; font-size: var(--Font-size-14);}

.footerForm h3 { margin-bottom: 16px;}
.footerForm .twoColBox { padding:50px 80px; background-color: #f4f4f4; margin-bottom: -50px; align-items: flex-start;}
.footerForm .cForm { display: flex; flex-wrap: wrap;}
.footerForm .cForm li { width: 100%; margin-bottom: 10px;}
.footerForm .cForm li:last-child { margin-bottom: 0;}
.footerForm .cForm li .btn { padding: 12px 24px;}
ul.contact { display: flex; flex-wrap: wrap; gap: 20px;}
ul.contact li { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column;}
ul.contact li label { font-size: var(--Font-size-14);}
ul.contact li a { font-weight: 500;}

ul.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px;}

.mainBanner { width: 100vw; /*height: 100vh;*/ position: relative; background-color: #121212; overflow: hidden; padding: 30vh 0; }
.mainBanner .custom-hero-bg { position: absolute; width: 100%; height: 100vh; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 300ms;}
.custom-hero-bg svg { width: 100vw; height: 100vh;}
.mainBanner .custom-hero-bg:after { content: ""; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; position: absolute; opacity: 0.75; background-color: #121212;}
.mainBanner .custom-stop-color-1 { stop-color: #FBc105;}

.mainBanner .wrap-inner { position: relative; z-index: 1;}

.mainBanner .custom-hero-heading { position: absolute; width: 100%; bottom: 0; text-align: center; -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0) 100%); }
.mainBanner .custom-hero-heading strong {text-transform: uppercase; font-size: 13cqw; line-height: 13cqw;}

.mainBanner h1 { font-size: clamp(28px, 0px + 0.0583333333 * 100vw, 62px); font-weight: 700; color: var(--white);}
.mainBanner label { font-size: 1.3em; font-weight: 600; color: #969696; text-transform: uppercase;}
.mainBanner p { font-size: 1.3em;  color: #969696; }

.innerBanner { padding: 16vh 0; }
.innerBanner h1 { font-size: clamp(28px, 0px + 0.0583333333 * 100vw, 52px); text-align: center; margin: 0;}
.innerBanner .rightBoxArrowMove { top: 50px;}
.innerBanner .rightBoxArrowMove img { width: 80px; height: auto; margin-top: -50px;  opacity: 0.3;}

.leftBoxArrowMove { position: absolute !important; left: -60px; top: 200px;}
.leftBoxArrowMove img { width: 140px; height: auto; margin-top: -90px;  opacity: 0.3;}
.rightBoxArrowMove { position: absolute !important; right: -20px; top: 600px;}
.rightBoxArrowMove img { width: 100px; height: auto; margin-top: -60px;  opacity: 0.3;}

.arrowMove { align-items: center; display: flex; justify-content: center; flex-direction: column; animation: arrowMove 3000ms linear; animation-iteration-count: 1; animation-iteration-count: infinite;}

@keyframes arrowMove {
    0% {
        margin-top: 0;
    }
    50% {
        margin-top: -30px;
    }
    100% {
        margin-top: 0;
    }
}

.homeBannerKey { margin-top: -50px;}
.homeBannerKeyGrid { display: flex; flex-wrap: wrap;}
.homeBannerKeyGrid .custom-grid { width: 25%; min-height: 200px; overflow: hidden; position: relative; background-color: var(--white);}
.homeBannerKeyGrid .custom-grid:nth-child(2n) { background-color: #f4f4f4;}
.homeBannerKeyGrid .custom-grid .custom-grid-img { opacity: 0; position: absolute; z-index: 1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.homeBannerKeyGrid .custom-grid .custom-grid-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s; will-change: transform; transform: scale(1);}

.homeBannerKeyGrid .custom-grid .custom-grid-text { display: flex; flex-direction: column; margin-top: 80px;  padding: 30px; position: relative; z-index: 2; }
.homeBannerKeyGrid .custom-grid .custom-grid-text h3 { font-weight: 600; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.homeBannerKeyGrid .custom-grid .custom-grid-text .line {  width: 60px; height: 5px; background-color: #eaeaea; border:0 none; opacity: 1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.homeBannerKeyGrid .custom-grid:hover .custom-grid-img { opacity: 1;}
.homeBannerKeyGrid .custom-grid:hover .custom-grid-img img {transform: scale(1.5);}
.homeBannerKeyGrid .custom-grid:hover .custom-grid-text h3 { color: var(--white);}
.homeBannerKeyGrid .custom-grid:hover .custom-grid-text .line { background-color: #eaeaea50;}


.homeAbout { padding: 40px 0 90px 0; }

.homeVideo { padding: 90px 0 70px 0; background-color: var(--secondary-color); background-image: url(/assets/images/background-1.jpg); background-size: cover; text-align: center;}
.homeVideo .wrap-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}
.homeVideo label { font-size: var(--Font-size-28); font-weight: 600; margin: 0;}
.homeVideo h2 { color: #eaeaea; margin: 0;}
.homeVideo p { font-size: var(--Font-size-20); margin: 0; font-weight: 300;}
.homeVideo .line {  width: 60px; height: 1px; background-color: var(--primary-color); border:0 none; opacity: 1; }
.homeVideo a { width: 90px; height: 90px; background-color: var(--primary-color); font-size: 42px;  color: var(--secondary-color); border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.homeVideo a:hover {  font-size: 52px;}
.videoModal .btn-close { position: absolute; right: -15px; top: -15px; opacity: 1; background-color: var(--primary-color); z-index: 99; padding: 10px; border-radius: 100%;}
.videoModal iframe { width: 100%;}

.homeMaterials { padding: 90px 0 90px 0;  text-align: center;}

.aboutMain { padding: 90px 0 90px 0;}
.aboutMain .imgBox img { max-height: 600px; object-fit: cover;}

/* .aboutStatistics { padding: 0 0 90px 0;} */
.statistics { display: flex; gap: 30px;}
.statistics .cntBox { width: 33.33%; background-color: var(--secondary-color); padding: 30px; display: flex; flex-wrap: wrap; gap: 20px;  -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.statistics .cntBox span { width:100%; font-size: clamp(28px, 0px + 0.0583333333 * 100vw, 72px); font-weight: 600; color: var(--white);}
.statistics .cntBox label { font-size: var(--Font-size-18); text-transform: uppercase;  -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.statistics .cntBox:hover { background-color: var(--primary-color);}
.statistics .cntBox:hover label { color: var(--secondary-color);}

.aboutOne { padding:90px 0; text-align: center;}
.aboutOne p { font-size: var(--Font-size-20);}

.materialsOne { padding:90px 0 30px 0;}
.materialsOne p { font-size: var(--Font-size);}

.materialBox { padding:0 0 50px 0;}
.materialBox .site-label { width: 100%; text-align: center; margin-bottom: 20px;}
.materialBox .materialCnt { display: flex; gap: 30px; margin-bottom: 50px;}
.materialBox .materialCnt .cntBox { width: 33.33%; min-height: 200px; padding: 30px; border: 4px solid #f4f4f4; display: flex; flex-direction: column; justify-content: space-between; background-color: transparent; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.materialBox .materialCnt .cntBox p { margin: 0;}
.materialBox .materialCnt .cntBox label { font-size: var(--Font-size-20); font-weight: 600; color: var(--secondary-color); }

.materialBox .materialCnt .cntBox:hover { border: 4px solid #f4f4f4; background-color: var(--secondary-color); border-color: #000;}
.materialBox .materialCnt .cntBox:hover label { color: var(--primary-color); }