html{
        overflow-x: hidden;
}
body{
    margin: auto;
    overflow-x: hidden;
      font-family: "Geist", sans-serif !important;

    
}


.geist-<uniquifier> {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

p{
    margin-bottom: 0;
}


/*shrinks*/
body.modal-open {
    padding-right: 0 !important;
}

a{
     -o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;

    text-decoration: none;
}
@media (min-width: 1400px) {
    .container {
        max-width: 1208px;
    }

  
}


a:hover{
 -o-transition: all ease-in-out 0.5s;-ms-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;

}


.header {
    width: 100%;
    float: left;
    position: relative;
    z-index: 11;
    padding: 28px 0px;
    display: flex;
    align-items: center;
}
.red img{
    width: 33px;
    margin-top: -3px;
}
.main-hdr{
    width: auto;
    float: right;
    /* padding-top: 43px; */
    padding-left: 0px;
    position: relative;
}
.logo{
    width: auto;
    float: left;
    /* padding-top: 21px; */
    /* padding-bottom: 17px; */
}
.logo img{
    width: 100%;
    float: left;
    max-width: 186px;
}
.head-menu{
    
    width: 100%;
    float: left;
}

.drop{
    /* margin-top: 1px; */
    float: right;
    width: 17px;
    margin-left: 3px;
    }
.banner {
    width: 100%;
    float: left;
    position: relative;

}
.banner img{
    width: 100%;
    float: left;
    position: relative;
/*    height: 734px;*/
    object-fit: cover;
}
.banner, 
.slider-ban,

.slider-ban .item, 
.banner-img {
    height: 100vh !important; /* This creates the extra scrollable space */
    width: 100%;
    position: relative;
    float: left;
}
.bnt-tex{
    width: 100%;
    float: left;
    /* position: absolute;
    top: 44.6%;*/
    position: fixed; /* Keeps it relative to the screen, not the long image */
    bottom: 110px;    /* Distance from the very bottom of the screen */
    top: auto;
}
.bnt-tex h2 {
    margin-left: -5px;
    width: 100%;
    text-align: left;
    color: #FFFFFF;
    float: left; /* Matching the image background */
    
    /* Typography */
    font-size: 130px;
    font-weight: 500;
    line-height: 87%;
    letter-spacing: -6px;
    text-transform: none;
    width: 100%;
  }

.tm {
    font-size: 40px;
    vertical-align: super;
    font-weight: 400;
    letter-spacing: -1px;
    margin-left: -9px;
    position: relative;
    top: -20px;
}

.sub-h2 {
    display: block;         
  
}
.bnt-tex h6{
    float: left;
    text-align: left;
    color: #fff;
    letter-spacing: 0px;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;

    margin-bottom: 14px;
    /* margin-left: 02px; */
}

.slider-ban .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
    display: none !important;
}



.m-buy{
    position:absolute !important;
    bottom: 148px;
    right: 124px;
    height: 80px !important;
    z-index: 9;
    width:80px!important;
    animation:scrollFloat 3s ease-in-out infinite;
}

@keyframes scrollFloat{
    0%{transform:translateY(0)}
    50%{transform:translateY(-15px)}
    100%{transform:translateY(0)}
}
.banner-img-wrap{
    overflow:hidden;
}
.banner-img{
    width:100%;
    transform:scale(1.05) translateX(-40px);
    filter:blur(6px);
    opacity:.6;
    transition:all 1.8s cubic-bezier(.25,.46,.45,.94);
}

.owl-item.active .banner-img{
    transform:scale(1) translateX(0);
    filter:blur(0);
    opacity:1;
}
.slide-text h6,
.slide-text .word{
    display:inline-block;
    opacity:0;
    transform:translateY(80px);
}

/* subtitle */
.owl-item.active .slide-text h6{
    animation:textReveal 1s cubic-bezier(.2,.65,.3,.9) forwards;
}

/* main title first word */
.owl-item.active .slide-text .word:nth-child(1){
    animation:textReveal 1s .3s cubic-bezier(.2,.65,.3,.9) forwards;
}

/* second line */
.owl-item.active .slide-text .sub-h2{
    animation:textReveal 1s .6s cubic-bezier(.2,.65,.3,.9) forwards;
}

.owl-item.active .slide-text .tm{
    animation:textReveal 1s .6s cubic-bezier(.2,.65,.3,.9) forwards;
}

@keyframes textReveal{
    0%{
        opacity:0;
        transform:translateY(80px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

.banner-img,
.slide-text{
    will-change:transform, opacity;
    backface-visibility:hidden;
}




/*section2*/

.about-section{width:100%;float:left;padding: 120px 0 80px 0px;position:relative;overflow:hidden;}
.logo-side{
    left: 0;
    position: absolute;
    width: 408px;
    bottom: 0;
}
.left-side{width: 29%;float:left;}

.right-side{width: 71%;float:left;padding-left: 9px;position: relative;}

.small-title{color: #5B914F;font-weight: 700;letter-spacing: 0px;font-size: 16px;padding-bottom: 115px;float: left;}



/*odometer*/
 .counterup-section {
   
      float: left;
      width: 100%;
      
      align-items: start;
    }


.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    font-family: 'Geist' !important;
}
    .counterup-container {
     display: flex;
     float: left;
    }
.odometer-wrapper {
  display: inline-flex;
  align-items: baseline;
  justify-content: start;
  font-size: 45px;
  font-weight: bold;
  float: left;
  width: 100%;
}



.plus {
  margin-left: 5px;
  position: relative;
  top: 0px;
  font-weight: 600;
  font-size: 72px;
}
    .counter-box {
      float: left;
      padding-left: 85px;
    }

    .odometer {
      font-size: 72px;
      font-weight: 600;
      margin-bottom: -2px;
      line-height: 130% !important;
      letter-spacing: 0px;
      margin-left: -8px;
    }

 .abt-p{
    float: left;
    width: 80%;
    color: #8d8d8d;
    font-size: 16px;
    line-height: 180%;
    /* letter-spacing: -1px; */
    font-weight: 400;
    padding-top: 6px;
 }

.about-img{object-fit: cover;float: left;width: 519px;margin-right: 40px;background-size: cover;border-radius: 20px;height: 476px;margin-bottom: 20px;}

.right-side h2 {
  margin-top: -11px;
  font-size: 44px;
  font-weight: 500;
  line-height: 128%;
  color: #8d8d8d;
  letter-spacing: -2px;
  text-align: left;
}


span.fill-text .char {
  color: #8d8d8d; /* Initial grey */
  transition: color 0.3s ease;
}

span.fill-text .char.visible {
  color: #000; /* Highlight color */
}

.light .char {
  color: #8A499C;
}

.light .char.visible {
  color: #8A499C;
}


.btn1{
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    margin-top: 23px;
    padding: 17px 25px;
    background:#000;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
      transform:translateY(0);
    will-change:transform;
    font-weight: 500;
    }


.btn1:before{
    content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.btn1:hover:before{
    transform:translateX(0);
}
.btn1 img{
    width: 8px;
}
.btn1:hover{color:#fff;z-index: 99;position: relative;}





.btn-test{
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    margin-top: 23px;
    padding: 17px 25px;
    background: #ffffff;
    color: #171717;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    font-weight: 500;
    }

.btn-test:before{z-index: 1;content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background: #5b914f;transition:.4s;}

.btn-test:hover:before{left:0;z-index: -1;}
.btn-test img{
    width: 8px;
    filter: invert(1);
}

.btn-test:hover img {
filter: invert(0);
}
.btn-test:hover{color:#fff;z-index: 99;position: relative;}

/* MAT IMAGES */

.mat{position:absolute;width: 152px;border-radius: 12px;}

.mat1{/* width: 152px; */top:50px;left: -17%;animation:float1 5s ease-in-out infinite;/* height: 105px; */border-radius: 12px;}

.mat2{top: 168px;right: 43px;animation:float2 6s ease-in-out infinite;}
@keyframes float1{

0%{transform:translateY(0px) rotate(-10deg);}
50%{transform:translateY(-20px) rotate(-6deg);}
100%{transform:translateY(0px) rotate(-10deg);}

}

@keyframes float2{

0%{transform:translateY(0px) rotate(10deg);}
50%{transform:translateY(15px) rotate(6deg);}
100%{transform:translateY(0px) rotate(10deg);}

}
/* Mission Vision Section */

.mv-wrapper{
    float:left;
    width:100%;
    display:flex;
    gap: 59px;
    margin-top: 45px;
    align-items:flex-start;
}

.mission-box,
.vision-box{
    width:48%;
}

.mv-wrapper h4{
    font-size: 16px;
    font-weight: 500;
    margin-bottom:12px;
    color: #232323;
    /* letter-spacing: -1px; */
}

.mv-wrapper p{
    font-size: 16px;
    line-height:180%;
    color:#8d8d8d;
    margin-bottom: 0;
    letter-spacing: 0px;
}


.read-btn{
    display:inline-flex;
    gap:9px;
    align-items:center;
    justify-content:center;
    margin-top:14px;
    padding:7px 17px;
    border:1px solid #8D8D8D;
    color:#181818;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
    font-size:13px;
    font-weight:400;
    transform:translateY(0);
    will-change:transform;
}

.read-btn:before{
    content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.read-btn:hover:before{
    transform:translateX(0);
}

.read-btn img{
    width:5px;
    filter:invert(1);
}

.read-btn:hover img{
    filter:invert(0);
}

.read-btn:hover{
    color:#fff;
}/* vertical divider */

.divider{
    width:1px;
    background:#e5e5e5;
    height:120px;
}



.enq-btn{
    display:inline-flex;
    gap:9px;
    align-items:center;
    justify-content:center;
    margin-top:14px;
    padding:7px 17px;
    border:1px solid #8D8D8D;
    color:#181818;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
    font-size:13px;
    font-weight:400;
    transform:translateY(0);
    will-change:transform;
}

.enq-btn:before{
    content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.enq-btn:hover:before{
    transform:translateX(0);
}

.enq-btn img{
    width:5px;
    filter:invert(1);
}

.enq-btn:hover img{
    filter:invert(0);
}

.enq-btn:hover{
    color:#fff;
    border-color:transparent; /* 🔥 FIX HERE */
}


.products-range{background:#003358;background-size: cover;float: left;width: 100%;padding: 87px 0;background-image: url("../images/dots.webp");}

.title-wrap{text-align: left;color:#fff;/* margin-bottom:60px; */}
.sub{
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0px;
    text-align: center;
}
.title-wrap h2{
    float: left;
    width: 100%;
    padding: 20px 0px;
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    letter-spacing: -3px;
    line-height: 55px;
    text-align: center;
}

.products-range .owl-carousel {
    float: left;
    width: 100%;
    margin-top: 30px;
    /* height: auto; */
}
.products-range .owl-carousel .item{
display:flex;
align-items:center;
justify-content:center;
float: left;
width: 100%;
}

.product-card{    

    overflow:hidden;

    will-change:transform;
position: relative; padding: 44px 10px;border-radius:80px;border:1px solid rgba(255,255,255,.3);color:#fff;min-height:110px;display:flex;flex-direction:column;justify-content:center;text-align:center;width: 448px;}

.product-card:before{
    content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.product-card:hover:before{
    transform:translateX(0);
}
.icon-card{
width:158px;
height:158px;
border-radius:50%;
border:1px solid #4C708A;
background-color:#002C4B;
display:flex;
align-items:center;
justify-content:center;
}

.product-card h3{font-size: 40px;font-weight: 500;margin-bottom:6px;}

.product-card p{
font-size:14px;
opacity:.7;
}


    .icon-card i{
           border-radius:50%;

         width:74px;
         height:74px;
         font-size:28px;
         background-color: #fff;
           display:flex;align-items:center;justify-content:center;
    }


/* Container & Header Styling */
.featured-products {padding: 100px 0;float: left;width: 100%;}
.header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.subtitle {font-size: 16px;font-weight: 700;margin-bottom: 21px;letter-spacing: -1px;}
.title {font-size: 60px;margin: 0;font-weight: 500;letter-spacing: -3px;}



.subtitle-2 {color:#fff; font-size: 16px;font-weight: 700;margin-bottom: 21px;letter-spacing: -1px;}
.title-2 {color:#fff; font-size: 60px;margin: 0;font-weight: 500;letter-spacing: -3px;}
    /* Product Item Container */
.product-item {
    background: #f4f4f4; /* Light grey top section */
    border-radius: 29px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    cursor: pointer;
    border: 1px solid #cccccc54;
}

.img-box {
    /* padding: 40px 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 100%;
}

.img-box img {
    max-width: 100%;
    height: 282px;
    object-fit: cover;
}

/* White Bottom Section */
.product-info {
    background: #ffffff;
    padding: 23px 0px;
    transition: background 0.4s ease; /* Smooth color transition */
    float: left;
    width: 100%;
    border-top: 1px solid #cccccc8f;
    min-height: 100px;
}

.product-info h3 {
    margin: 0;
    font-size: 26px;
    color: #000;
    font-weight: 600;
    letter-spacing: -1px;
}

.product-info p {
    line-height: 139%;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -1px;
}

/* --- Hover Effect: The Green Transition --- */
.product-item:hover .product-info {
    background: #5d8e54; /* Forest Green */
}

.product-item:hover h3, 
.product-item:hover p {
    color: #ffffff; /* Contrast text */
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.featured-products .owl-carousel .owl-stage-outer {

    padding-top: 17px !important;
}
.product-slider{
    padding-left: 118px;
}


.hero-section {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 93px 0 31px 0;
    background: linear-gradient(180deg,rgba(244, 244, 244, 1) 0%, rgba(255, 255, 255, 1) 50%);
    }
.hero-row{
    display: flex;
    align-items: flex-start;
    gap: 94px;
}
        .logo-container img {
            max-width: 512px;
            height: auto;


        }
        .zoom-360{
                animation: floatItem 8s ease-out forwards;

        }

    
        .hero-content h5 {
            color: #5B914F;
            margin: 0;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: -1px;
            font-weight: 600;
        }

        .hero-content h1 {
            font-size: 60px;
            font-weight: 500;
            letter-spacing: -3px;
            margin: 22px 0 20px 0px;
            line-height: 1.1;
        }

        .hero-content p {
            color: #8D8D8D;
            font-size: 16px;
            line-height: 1.8;
        }

        .know-more-btn{
    display: inline-flex;
    gap: 17px;
    align-items: center;
    justify-content: center;
    margin-top: 27px;
    padding: 20px 37px;
    background:#000;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    font-weight: 500;
     transform:translateY(0);
    will-change:transform;
    }

.know-more-btn:before{ content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.know-more-btn:hover:before{
    transform:translateX(0);
}
.know-more-btn img{
    width: 8px;
}
.know-more-btn:hover{color:#fff;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); */transform:translateY(-3px);z-index: 99;position: relative;}


 
 .scroll-container {
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    display: flex; 
    justify-content: center;
    width: 100%;
    height: 300px; /* Ensure height for visibility */
    align-items: center;
}

.scrolling-text {
    font-size: 180px;
    font-weight: 800;
    display: inline-block;
    text-transform: lowercase;
    background: linear-gradient(90deg, #5c945f 0%, #3d7a44 40%, #1c4d63 70%, #002855 100%);
    letter-spacing: -12px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: transform;
    transform: translate3d(0, 0, 0);
        padding-bottom: 10px;
}
    .spacer {
        height: 100vh;
        background-color: #f9f9f9;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;
    }


    .facts-section {
    padding: 93px 0%;
    background: #fff;
    float: left;
    width: 100%;
}


.facts-section .container {
    display: flex;
    /* align-items: center; */
    gap: 71px;
}

/* Left Image Component */
.facts-image {
    position: relative;
    flex: 0 0 178px;
}

.facts-image img {
    width: 100%;
    border-radius: 30px;
    display: block;
    height: 305px;
    object-fit: cover;
}

.image-overlay-text {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
}
.image-overlay-text .odometer-wrapper {  
    align-items: center;
    justify-content: center;
}
.image-overlay-text .odometer {font-size: 48px;color: #fff;font-weight: 500;text-align: center;}
.image-overlay-text .plus { font-size: 40px; color: #fff; }
.image-overlay-text p {font-size: 16px;margin-top: 5px;font-weight: 500;padding:  0 20px;line-height: 1.2;}

/* Center Content Text */
.facts-content {
    flex: 1.4;
    max-width: 457px;
}

.sub-heading {
    color: #5B914F;
    font-size: 16px;
    /* letter-spacing: -1px; */
    margin-bottom: 19px;
    font-weight: 700;
}

.main-heading {
    font-size: 60px;
    font-weight: 500;
    color: #232323;
    margin-bottom: 22px;
    letter-spacing: -3px;
}

.description {
    color: #8d8d8d;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0px;
    word-spacing: -2px;
    padding-right: 25px;
}

.corporate-btn {
    display: inline-flex;
    gap: 17px;
    align-items: center;
    justify-content: center;
    margin-top: 27px;
    padding: 20px 25px;
    background:#000;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    font-weight: 500;
 transform:translateY(0);
    will-change:transform;
    }

.corporate-btn:before{ content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.corporate-btn:hover:before{
    transform:translateX(0);
}
.corporate-btn img{
    width: 8px;
}
.corporate-btn:hover{color:#fff;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); */transform:translateY(-3px);z-index: 99;position: relative;}


 

/* Right Side Counters */
.facts-counters {
    flex: 1.4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 17px;
    align-items: center;
}

.counter-item {
    display: flex;
    flex-direction: column;
}

/* Scoped Overrides for your Odometer classes */
.facts-style .odometer {
    font-size: 48px !important; /* Slightly smaller than your default 72px to match design */
    font-weight: 500;
    color: #1a1a1a;
}

.facts-style .plus {
    font-size: 48px !important;
    color: #1a1a1a;
    margin-left: 2px;
}

.counter-label {
    color: #8D8D8D;
    font-size: 16px;
    margin-left: -7px;
    /* margin-top: -5px; */
}



.eazy-sec{
    float: left;
    width: 100%;
    background:#5B914F;
    padding: 88px 0 90px 0px;
    position:relative;
    overflow:hidden;
    background-image: url("../images/eazy.webp");
    background-position: bottom right;
    background-repeat: no-repeat;
}


.hero-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.eazy-left{
    width: 75%;
}

.eazy-left h2{
    font-size: 50px;
    line-height: 1.2;
    color:#fff;
    font-weight:400;
    letter-spacing: -2px;
    /* word-spacing: -1px; */
}

.eazy-left p{
    font-size:40px;
    color:#8d8d8d;
    margin-top:20px;
}

.inline-img{
    height: 52px;
    margin: -7px 0px 0px 0px;
    vertical-align:middle;
    object-fit: cover;
}

.hero-btns{
    margin-top: 32px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-main{
    padding: 12px 28px;
    border-radius:30px;
    text-decoration:none;
    font-size:16px;
    color:#fff;
    border:1px solid #fff;
    color:#fff;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-weight: 500;
    margin-bottom: 20px;
    transform:translateY(0);
    will-change:transform;
    }

.btn-main:before{ content:'';
    position:absolute;
    inset:0;
    background:#fff;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.btn-main:hover:before{
    transform:translateX(0);
}

.btn-main:hover{color:#000;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); */transform:translateY(-3px);z-index: 99;position: relative;}


 
.eazy-right{
    width:30%;
    text-align:center;
}

.eazy-logo{
    width: 206px;
}


span.fill-text2 .char2 {
  color: #8d8d8d; /* Initial grey */
  transition: color 0.3s ease;
}

span.fill-text2 .char2.visible {
  color: #fff; /* Highlight color */
}

.light2 .char2 {
  color: #8d8d8d;
}

.light2 .char2.visible {
  color: #8d8d8d;
}
.eazy-wrap{
    display: flex;
    justify-content: space-between;
}



.features-sec{padding: 79px 0;background:#f5f5f5;float: left;width: 100%;}



.title-area span{color:#5B914F;font-weight: 700;letter-spacing:px;font-size: 16px;}

.title-area h2{font-size:60px;margin-top: 19px;margin-bottom: 47px;color:#232323;font-weight: 500;letter-spacing: -3px;}

.feature-slider{
    padding-left: 118px;
}
.feature-box{
text-align:left;
padding-right:60px;

border-right:1px dashed #ccc;
}

.feature-box img{width:80px !important;margin-bottom: 37px;opacity:.4;}

.feature-box h4{font-size:34px;font-weight: 500;color: #000;letter-spacing: -2px;margin-bottom: 7px;}

.feature-box p{
color:#8D8D8D;
font-weight: 400;
font-size: 16px;
line-height:1.8;
}

.feature-box:hover img{
opacity:1;
filter:invert(44%) sepia(13%) saturate(853%) hue-rotate(64deg);
}

.feature-box:hover h4{
color:#5b8d4d;
}

.feature-slider .owl-carousel .owl-stage{
display:flex;
align-items:stretch;
}

.feature-slider .owl-carousel .owl-item{
display:flex;
}

.feature-slider .owl-carousel .owl-item:last-child .feature-box{
border-right:none;
}



.intro-hero{
    position:relative;
    background:url("../images/cta-bg.webp") right center/cover no-repeat;
    display:flex;
    background-attachment: fixed;
    align-items:center;
    color:#fff;
    padding: 85px 0px;
    float: left;
    width: 100%;
}




.intro-content{
float: left;
width: 100%;
}


.intro-subtitle{
    font-size:16px;
    color:#dcdcdc;
    font-weight: 700;
    display:block;
    margin-bottom:20px;
}

.intro-title{
    font-size:60px;
    font-weight:500;
    margin-bottom: 28px;
    letter-spacing: -3px;
}

.intro-text{
    width: 48%;
    font-size:16px;
    color:#cfcfcf;
    line-height:1.8;
    word-spacing: -2px;
    margin-bottom: 16px;
}

.intro-btn{
   display: inline-flex;
   gap: 14px;
   align-items: center;
   justify-content: center;
   margin-top: 23px;
   padding: 17px 36px;
   background:#181818;
   color:#fff;
   border-radius:40px;
   text-decoration:none;
   position:relative;
   overflow:hidden;
   transition:.4s;
   font-size: 16px;
   font-weight: 500;
   transform:translateY(0);
    will-change:transform;
    }

.intro-btn:before{ content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.intro-btn:hover:before{
    transform:translateX(0);
}
.intro-btn img{
    width: 8px;
}
.intro-btn:hover{color:#fff;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); */transform:translateY(-3px);z-index: 99;position: relative;}




.fajr-footer{position:relative;background:#000;color:#fff;padding: 80px 0px 45px 0px;float: left;width: 100%;overflow:hidden;}

/* big background FAJR */
.footer-overlay{
position:absolute;
background:url("../images/ftr-overlay.webp") center no-repeat;
background-size:contain;
width:100%;
height:100%;
top:80px;
left:0;
pointer-events:none;

opacity:0.15;              /* controls grey strength */
mix-blend-mode:screen;     /* makes black image appear grey */

pointer-events:none;
z-index:0;
}


/* top row */

.footer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom: 46px;/* gap: 100px; */}

.footer-logo img{width: 294px;}

.footer-title h2{font-size:40px;font-weight:500;line-height: 1.2;letter-spacing: -2px;}
.footer-title {
    display: flex;
    gap: 47px;
}

.footer-btn{
   display: inline-flex;
   gap: 14px;
   align-items: center;
   justify-content: center;
   margin-top: 23px;
width: 187px;
height: 54px;
   background:#181818;
   color:#fff;
   border-radius:40px;
   text-decoration:none;
   position:relative;
   overflow:hidden;
   transition:.4s;
   font-size: 16px;
   font-weight: 500;
 transform:translateY(0);
    will-change:transform;
    }

.footer-btn:before{ content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.footer-btn:hover:before{
    transform:translateX(0);
}
.footer-btn img{
    width: 8px;
}
.footer-btn:hover{color:#fff !important;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); */;z-index: 99;position: relative;}



/* grid */

.footer-grid{  float: left;
    width: 100%;margin-top:40px;}

.footer-col h4{font-size: 16px;font-weight: 500;margin-bottom: 24px;color:#bbb;}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{/* margin-bottom:10px; */}

.footer-col ul li a{color:#ddd;font-size: 16px;text-decoration:none;line-height: 200%;}

.footer-col p a{
color:#ccc;
line-height:1.8;
}
.footer-col p {
color:#ccc;
line-height:1.8;

}
/* social */

.social-icons{
display:flex;
gap:12px;
margin-top:10px;
}

.social-icons a{
width:36px;
height:36px;
border:1px solid #8d8b8b;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
color:#fff;
font-size:12px;
}
.social-icons img{
width: 18px;
}
/* bottom */

.footer-bottom{border-top:1px solid #222;margin-top: 61px;padding-top: 45px;display:flex;justify-content:space-between;color: #ccc;font-size: 16px;}
.footer-bottom a{
       color: #ccc;
}
.col-1{
    float: left;
    width: 26%;
}
.col-1 ul{
    width: 50%;
    float: left;
}

.col-2{
    float: left;
    width: 24%;
    padding-left: 2%;
}

.col-3{
    float: left;
    width: 32%;
    padding-left: 11%;
}

.col-4{
    float: left;
    width: 18%;
}




/* Sidebar Content Styling */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 37px;
    padding-bottom: 10px;
    position: relative;
}

.sidebar-title {
    font-size: 37px;
    font-weight: 500;
    color: #fff;
    /* text-decoration: underline; */
    letter-spacing: -2px;
    /* margin-bottom: 30px; */
    /* text-underline-offset: 9px; */
    /* text-decoration-thickness: 1px; */
}
.sidebar-title img{
    width: 11px;
    margin-left: 29px;
}
.sidebar-title:hover{
        color: #969595;

}
.close-btn {
    color: #969595;
    font-size: 59px;
    text-decoration: none;
    line-height: 0.5;
    transition: color 0.3s;
    margin-top: -17px;
    float: left;
    text-align: left;
    position: absolute;
    top: 0;
    font-weight: 300;
}

.close-btn:hover {
    color: #858585;
    text-decoration: none;
}

/* Section Styling */
.social-links-side{
    
}
 .social-links-side h4 {
    margin-top: 30;
    color: #fff; /* Highlight color for headers */
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -1px;
    margin-bottom: 20px;
    /* text-decoration: underline; */
    /* text-underline-offset: 5px; */
    /* text-decoration-thickness: 1px; */
}

.side-social{
    display: flex;
    gap: 19px;
}
/* Social Icon Styling */
.social-icon-side {
    display: inline-block;
    /* display: flex; */
    /* gap: 28px; */
}

.social-icon-side img{
    width: 23px;
    transition: transform 0.6s; /* Smooths the transition */
}
.social-icon-side:hover {
 transform: scaleX(-1);
}
.quick-enquiry {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.sidebar-content::-webkit-scrollbar {
    width: 1px;
    background-color: transparent; 
}

.sidebar-content::-webkit-scrollbar-track {
    background: #000; 
}

.sidebar-content::-webkit-scrollbar-thumb {
    background-color: #000; 
    border-radius: 1px; 
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color: #000;
}
/* Stylish Two-Column Modal for Join Now Form */

/* Stylish Two-Column Modal for Join Now Form */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background: rgb(41 41 41);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Existing Styles */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    width: 95%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
    color: #000; /* Ensures text remains readable */
}

.join-form input {
    /* background: rgba(255, 255, 255, 0.5) !important; */
    border: 1px solid rgb(229 229 229 / 20%) !important;
}
.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
}

.close-button:hover {
    color: #333;
    /* transform: rotate(90deg); */
}

.modal-header-form {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #7e7e7e;
}

.modal-header-form h2 {
   font-size: 26px; /* Adjust font size as needed */
   font-weight: 500;
   line-height: 125%;
   margin-bottom: 16px;
   color: #fff; /* Dark text color */
   letter-spacing: 0;
   /* font-family: 'GeneralSans-Medium'; */
}

.modal-header-form p {
    color: #f6f6f6;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

.join-form {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 20px; /* Spacing between columns and rows */
}

.join-form .form-group {
    /* flex: 1 1 calc(50% - 10px); */ /* Two columns: 50% width minus half the gap */
    margin-bottom: 0;
    float: left;
    width: 100%;
}

@media (max-width: 600px) {
    .join-form .form-group {
        flex: 1 1 100%; /* Stack columns on very small screens */
    }
    .modal-content {
        padding: 40px 20px;
    }
}

.join-form label {
    display: block;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
    font-size: 16px;
    /* font-family: 'GeneralSans-Regular'; */
    /* letter-spacing: -0.5px; */
}

.join-form label i {
    margin-right: 8px;
    color: #ffffff; /* Accent color for icons */
}

.join-form input[type="text"],
.join-form input[type="email"],
.join-form input[type="password"],
.join-form input[type="tel"] {
    width: 100%;
    padding: 14px 15px;
    border: none;
    border-radius: 11px;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    /* font-family: 'GeneralSans-Regular'; */
    font-weight: 400;
    color: #fff;
    background: transparent;
}

.iti { width: 100%; }
.iti__country-list { z-index: 2001; }

.join-form input:focus {
    /* border-color: #34db72; */
    box-shadow: 0 0 8px rgb(0 128 0 / 10%);
    /* background-color: #fff; */
    outline: none;
}

.subscribe-form {
    display: flex;
    justify-content: flex-end;
    width: 93%;
    position: relative;
    /* align-items: center; */
    gap: 20px;
    flex-direction: column;
}

.subscribe-form input[type="email"] {
    background: transparent; /* Darker background for the input field */
    border: 1px solid #2b2b2b;
    color: #fff;
    padding: 20px 24px;
    font-size: 16px;
    border-radius: 100px;
    width: 100%;
    outline: none;
    transition: border-color 0.3s;
    position: relative;
    height: 64px;
    font-weight: 400;
    float: left;
}

.subscribe-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}



.subscribe-form button{
    width: 100%;
    /* height: 47px; */
    border: none;
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    /* margin-top: 23px; */
    padding: 17px 25px;
    background: #fff;
    color: #000;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    transform:translateY(0);
    will-change:transform;
    font-weight: 500;
    }


.subscribe-form button:before{
    content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.subscribe-form button:hover:before{
    transform:translateX(0);
}
.subscribe-form button img{
    width: 7px;


 filter: brightness(0);
}
.subscribe-form button:hover
{

    color: #fff;
}
.subscribe-form button:hover img{
    filter: brightness(100);

}

/* Sidebar Container */
/* 1. The Overlay (Dimmed background) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    z-index: 3000; /* Lower than sidebar */
}

/* 2. The Sidebar */
#sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100%;
    background: #1a1a1a;
    z-index: 3001; /* HIGHER than overlay so you can click links */
    padding: 60px 40px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto; /* Allow scrolling if content is long */
    scroll-padding: 0;
    scrollbar-width: none;
}

/* 3. When Sidebar is Active */
body.sidebar-open {
    overflow: hidden; /* Prevent background scroll */
}

body.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

body.sidebar-open #sidebar {
    transform: translateX(0);
}

/* 4. Classy Content Animation */
.sidebar-content > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

body.sidebar-open .sidebar-content > * {
    opacity: 1;
    transform: translateY(0);
}

/* Staggering the entrance of items */
body.sidebar-open .quick-enquiry { transition-delay: 0.2s; }
body.sidebar-open .footer-col-subscribe { transition-delay: 0.3s; }
body.sidebar-open .social-links-side { transition-delay: 0.4s; }







.inner-hero-section  {
    float: left;
    width: 100%;
    position: relative;
    padding-top: 37px;
    overflow: hidden;
}

/* Background Zoom Animation */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    background-image: url("../images/inner-fajr.webp"); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    transform: scale(1.1); /* Start slightly zoomed in */
    animation: zoomOutEffect 8s ease-out forwards;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    z-index: 2;
}

/* Content Container */
.hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
  
    text-align: center;
}

.editorial-layout {
    float: left;
    width: 100%;
    height: 370px;
    position: relative;
}

.editorial-box {
    float: left; /* Change to float: right; to flip position */
    width: 100%;
    margin-top: 150px;
    text-align: left;
    padding-left: 30px;
    position: relative;
}

.vertical-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: #ffffff;
    animation: growDown 1s ease forwards;
}

.hero-desc {
    float: left;
    width: 100%;
    color: #ffffff;
    font-size: 16px;
    margin-top: 20px;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.8s;
}

@keyframes growDown {
    to { height: 100%; }
}

.hero-subtitle {
    display: block;
    color: #fcfcfc; /* Trendy Accent Cyan */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.hero-title {
    color: #ffffff;
    font-size: 70px;
    font-weight: 500;
    margin: 0;
    line-height: 1;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    letter-spacing: -3px;
}

.hero-animated-bar {
    width: 80px;
    height: 4px;
    background: #00d4ff;
    margin: 25px auto 0;
    border-radius: 10px;
    transform: scaleX(0);
    animation: growLine 1s ease forwards 1.2s;
}

/* Keyframe Animations */
@keyframes zoomOutEffect {
    from { transform: scale(1.2); }
    to { transform: scale(1); }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes growLine {
    to { transform: scaleX(1); }
}


.abt-wrapper {
    float: left;
    width: 100%;
}
.about {
    padding-bottom: 90px;
}

.abt-wrapper h5{
    color: rgb(91, 145, 79);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 9px;
}
.section-padding2 {
    padding: 100px 0px;
    position: relative;
    float: left;
    width: 100%;
}
.section-title3 {
   font-size: 50px;
   font-weight: 500;
   margin-bottom: 22px;
   line-height: 123%;
   color: #232323;
   letter-spacing: -3px;
}



.sec-p {
    font-size: 16px;
    font-weight: 400;
    line-height: 180%;
    color: #8d8d8d;
    margin-bottom: 20px;
}

.eazymats-section {
    padding: 80px 0px;
    float: left;
    /* background-color: #f8f9fa; */
    width: 100%;
    text-align: center;
}



.eazymats-section h2 {
    font-size: 50px;
    color: #232323;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: -3px;
}

.eazymats-section p {
    max-width: 800px;
    margin: 0 auto 50px;
    color: #8d8d8d;
    line-height: 1.8;
}
.reveal-container {
    display: flex;
    width: 100%;
    height: 500px;
    gap: 2px;
}

.reveal-card {
    flex: 1;
    background: #1a1a1a;
    position: relative;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
}

/* Background Image Layer */
.reveal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    opacity: 0.3; /* Dimmed by default */
    filter: grayscale(100%); /* B&W by default */
    transition: opacity 0.6s ease, transform 0.8s ease, filter 0.6s ease;
    z-index: 1;
}

/* Dark Overlay for better text readability */
.reveal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
    z-index: 2;
}
.pad-hero{
    padding-bottom: 93px !important;
}

.card-content {
    line-height: 1.8;
    position: relative;
    z-index: 3;
    color: #f5f5f5;
    text-align: center;
}

/* Hover States */
.reveal-card:hover {
    flex: 4; /* Expands wider */
}

.reveal-card:hover::before {
    opacity: 0.8;
    filter: grayscale(0%); /* Brings back color */
    transform: scale(1.1); /* Subtle zoom effect */
}
.reveal-card:hover::after {

    background: unset;
}

.reveal-card h3 {
    font-size: 26px;
    text-transform: uppercase;
    margin: 10px 0;
    white-space: nowrap;
    letter-spacing: -1px;
}

.reveal-icon {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease 0.2s; /* Added delay for smoother feel */
}

.reveal-card:hover .reveal-icon {
    opacity: 1;
    transform: translateY(0);
}


/* Outer Wrapper with Specific Class Names */
    .kn-carousel-section {
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #5b914f;
        overflow: hidden;
        float: left;
        width: 100%;
           background-image: url("../images/eazy.webp");
    background-position: bottom right;
    background-repeat: no-repeat;
    }

    .kn-viewport {
        width: 100%;
        /* max-width: 946px; */
        height: 400px;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scrollbar-width: none; /* Hide scrollbar Firefox */
        scroll-behavior: smooth;
    }

    .kn-viewport::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

    .kn-slide {
        height: 400px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        scroll-snap-align: center;
        position: relative;
        text-align: center;
        /* padding: 0 40px; */
        box-sizing: border-box;
    }

    /* Motion 1: Slide Down (Vision) */
    .kn-slide[data-type="vision"] .kn-content {
        transform: translateY(-30px);
        opacity: 0;
        transition: all 0.8s ease-out;
    }

    /* Motion 2: Slide Up (Mission) */
    .kn-slide[data-type="mission"] .kn-content {
        transform: translateY(30px);
        opacity: 0;
        transition: all 0.8s ease-out;
    }

    /* Motion 3: Scale Up (Values) */
    .kn-slide[data-type="values"] .kn-content {
        transform: scale(0.9);
        opacity: 0;
        transition: all 0.8s ease-out;
    }

    /* Active State Class (Triggered by JS) */
    .kn-slide.is-active .kn-content {
        transform: translate(0) scale(1);
        opacity: 1;
    }


    .kn-title {
        font-size: 50px;
        margin: 0 0 20px 0;
        color: #fff;
        line-height: 1;
        letter-spacing: -3px;
    }

    .kn-desc {
        font-size: 18px;
        color: #f5f5f5;
        max-width: 800px;
        line-height: 1.8;
    }

    /* Scroll Indicator */
    .kn-indicator {
        position: absolute;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .kn-dot {
        width: 8px;
        height: 8px;
        background: #dfe6e9;
        border-radius: 50%;
        transition: 0.3s;
    }

    .kn-dot.active {
        background: #fff;
        height: 25px;
        border-radius: 10px;
    }



/* testimonails */
.testimon{
    padding: 70px 0px;
    float: left;
    width: 100%;
}
  .testi-card{
    background-color: #f5f5f5;

    padding: 28px;
    border-radius: 16px;
    border: 1px solid #E1E4EB;
  }


  .testi-card .cont p{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 180%;
    margin-bottom: 0px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E1E4EB;
  }
  .testi-card .cardimg{
        display: flex;
        gap: 8px;
        flex-direction: column;
        width: 100%;
  }
  .testi-card .cardimg .profile{
    width: 55px;
    height: 55px;
    border-radius: 12px;
  }
   .testi-card .cardimg .crdname{
        display: flex;
        flex-direction: column;
    width: calc(100% - 63px);
   }
    .testi-card .cardimg .crdname p{color: #232323;font-size: 17px;font-weight: 500;margin: 8px 0px;}
    .testi-card .cardimg .crdname .designatin{
      font-size: 15px;
      font-weight: 500;
      line-height: 1.5;
    }
    .cardimg-full{
          display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 24px;

    }
    .testi-card .cardimg .crdname img{
      width: 108px;
    }
.testimonial-carousel .owl-nav {
      position: relative;
    bottom: 0;
    top: 35px;
    width: 100%;
    /* transform: translateY(100%); */
    display: none;
    justify-content: flex-end;
    gap: 10px;
        padding-right: 8%;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 1px solid none !important;
  width: 47px !important;
  height: 47px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-carousel .owl-nav .owl-prev{
  background: #919191!important;
}
.testimonial-carousel .owl-nav .owl-next{
  background: #00BAA6!important;
}

.testimonial-carousel .owl-nav img {
  opacity: 60%;
  width: 20px;
  filter: brightness(0.2);
}

.testimonial-carousel .owl-nav button:hover img {
  opacity: 100%;
}  
.test{
    float: left;
    width: 100%;
    padding: 100px 0px 90px 0px;
    background-color: #003358;
    background-image: url("../images/dots.webp");
}

.subhed{

    color: #5B914F;
    font-weight: 700;
    font-size: 16px;
}
.mainhed{
    font-size: 60px;
    margin-top: 19px;
    margin-bottom: 47px !important;
    color: #232323;
    font-weight: 500;
    letter-spacing: -3px;
}


/* whyschoose */

.whycard img {
    width: 62px;
    margin: auto;
    filter: brightness(100);
}
.whycard h3{
  font-size: 22px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 8px;
  letter-spacing: -1px;
}
.whycard p{
     font-size: 16px;
     color: #ffffffc2;
     font-weight: 400;
     line-height: 1.8;
}
.why-choose{
    /* padding-bottom: 105px; */
}
.whycard {
    float: left;
    width: 100%;
    padding: 51px 20px;
backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(82, 183, 136, 0.15);    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;

        border: 1px solid rgba(82, 183, 136, 0.15);

    transition: all 0.4s ease;
}

.whycard:hover {

    background: rgba(82, 183, 136, 0.05);
    border-color: #ffffff;

    transform: translateY(-8px) !important;
    }

.product-sec{
    float: left;
    width: 100%;
    padding-top: 60PX;
}
.product-container {
   display: flex;
    flex-wrap: wrap; 
    gap:40px  20px;
    justify-content: center; /* This centers the last "odd" item in its row */
    background-color: #fff;
    width: 100%;
}

.product-box {
    /* (100% / 2) - half of the gap = 50% - 10px */
    width: calc(50% - 10px);
    border-radius: 10px;
    background-color: #f5f5f5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto;
}

/* Updated section styles for better alignment */
.product-tag {
    background-color: #5b914f;
    color: white;
    padding: 20px;
    font-weight: 500;
    font-size: 25px;
    letter-spacing: -1px;
}

.product-cont {
    display: flex;
    flex-direction: row; /* Stacks image and text vertically */
    padding: 20px;
    flex-grow: 1;
    gap: 23px;
    align-items: center;
}

.image-section {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 15px; */
}

.image-section img {
    max-height: 180px;
    width: auto;
    max-width: 100%;
    border-radius: 10px;
}

.content-section {
    color: #2c3e50;
}

.content-section h3 {
    margin: 0 0 10px 0;
    font-size: 21px;
    letter-spacing: -1px;
    font-weight: 600;
}

.specs {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
}

/* Responsive adjustment for mobile: 1 box per row */
@media (max-width: 768px) {
    .product-box {
        width: 100%;
    }
}



.quality-ban{
  float: left;
  width: 100%;
  padding: 70px 0px;
  /* margin-bottom: 75px; */
  background-color: #f9f9f9;
}
.q-box{
  height: 300px;
  float: left;
  width: 100%;
  padding: 30px 30px;
  background-color: #5b914f;
  border-radius: 20px;
  border: 1px dashed #fff;
  margin-bottom: 20px;
}
.q-box img{
  float: none;
  display: block;
  margin:auto;
  width: 56px;
  filter: invert(1);
}
.q-box h5{
      color: #fff;
      float: left;
      width: 100%;
      font-weight: 500;
      font-size: 30px;
      margin-bottom: 20px;
      margin-top: 20px;
      text-align: center;
      letter-spacing: -2px;
}
.q-box p{
      float: left;
      font-size: 16px;
      color: #ffff;
      font-weight: 400;
      text-align: left;
      line-height: 180%;
      width: 100%;
      text-align: center;
}

.quality-ban h6 {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #5B914F;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 1px;
    margin-bottom: 24px;
    float: left;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.quality-ban h6 img{
    width: 13px !important;
}

.quality-ban h2 {
    font-size: 60px;
    color: #232323;
    letter-spacing: -3px;
    font-weight: 500;
    margin-bottom: 54px;
    /* word-spacing: 5px; */
    float: left;
    width: 100%;
    text-align: center;
}

.quality-ban h2 span {
    color: #919191;
}

.abt-wrapper-h5 {
    color: rgb(91, 145, 79);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 9px;
}


.material-spec-section {
    padding: 100px 0px;
float: left;    
    background-color: #003358;
    background-image: url("../images/dots.webp");
width: 100%;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 50px;
    letter-spacing: -3px;
    margin-bottom: 15px;
    color: #fff;
    font-weight: 500;
}

.section-header p {
    color: #f5f5f5;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 400;
}
.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.spec-card {
    /* background: rgba(255, 255, 255, 0.03); */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(82, 183, 136, 0.15);
    padding: 40px;
    border-radius: 30px;
    transition: all 0.4s ease;
}

.spec-card:hover {
    background: rgba(82, 183, 136, 0.05);
    border-color: #ffffff;
    transform: translateY(-8px);
}

.spec-icon {
    font-size: 40px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 25px;
    display: block;
}

.spec-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: -1px;
}

.spec-card p {
    color: #f5f5f5c4;
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

.full-width {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 40px;
}

@media (max-width: 992px) {
    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .full-width {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .specs-grid {
        grid-template-columns: 1fr;
    }
    .full-width {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .spec-card {
        padding: 30px;
    }
}




.career-experience {
    background-color: #ffffff;
    padding: 120px 5%;
  float: left;
width: 100%;    color: #000000;
}

.career-container {
    max-width: 1200px;
    margin: 0 auto;
}

.career-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* margin-bottom: 80px; */
    /* border-bottom: 1px solid #e0e0e0; */
    padding-bottom: 76px;
}

.eyebrow {
    display: block;
    text-transform: uppercase;
    font-size: 15px;
    color: #5b914f;
    /* letter-spacing: 3px; */
    margin-bottom: 24px;
    font-weight: 700;
}

.career-heading {
    font-size: 51px;
    font-weight: 500;
    line-height: 0.85;
    color: #000;
    letter-spacing: -3px;
    margin: 0;
}

.para-wrap p {
    font-size: 16px;
    line-height: 1.8;
    color: #8d8d8d;
    max-width: 380px;
}

/* Form Layout */
.form-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px 40px;
}

.full-col {
    grid-column: span 2;
}

.input-set {
    display: flex;
    flex-direction: column;
    position: relative;
}

.input-no {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #5b914f;
}

.input-set label {
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: -1px;
}

.input-set input, 
.input-set textarea {
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    font-size: 16px;
    outline: none;
    transition: padding-left 0.4s ease;
}

.input-set input:focus {
    padding-left: 15px;
}

/* Expertise Selector */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    /* background: #e0e0e0; */
    /* border: 1px solid #e0e0e0; */
}

.expertise-item {
    background: #fff;
    padding: 30px;
    margin-top: 26px;
    cursor: pointer;
    border: 1px solid #ccc;
    transition: 0.3s;
}

.expertise-item input {
    display: none;
}

.expertise-content strong {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: 500;
}

.expertise-content span {
    font-size: 14px;
    color: #8d8d8d;
}

.expertise-item:has(input:checked) {
    background: #000;
    color: #fff;
}

/* Footer & Button */
.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 40px; */
}

.upload-minimal {
    position: relative;
    overflow: hidden;
}

.upload-minimal input {
    position: absolute;
    opacity: 0;
}

.upload-minimal label {
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.upload-minimal label span {
    font-weight: 400;
    color: #999;
    margin-left: 10px;
}




.submit-trigger{
    border: none;
    display: inline-flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    /* margin-top: 23px; */
    padding: 17px 73px;
    background:#000;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    font-weight: 500;
    }

.submit-trigger:before{z-index: 1;content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background: #5b914f;transition:.4s;}

.submit-trigger:hover:before{left:0;z-index: -1;}
.submit-trigger img{
    width: 8px;
}
.submit-trigger:hover{color:#fff;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); *//* transform:translateY(-3px); */z-index: 99;position: relative;}





@media (max-width: 900px) {
    .career-top { flex-direction: column; align-items: flex-start; }
    .career-heading {font-size: 47px;margin-bottom: 20px;letter-spacing: -1px;line-height: 51px;}
    .form-main-grid { grid-template-columns: 1fr; gap: 40px; }
    .full-col { grid-column: span 1; }
    .expertise-grid { grid-template-columns: 1fr; }
    .form-footer { flex-direction: column; gap: 30px; align-items: flex-start; }
}

.process-timeline{padding:120px 0;background: #f5f5f5;color: #232323;text-align:center;overflow:hidden;float: left;width: 100%;}

.timeline-header h2{font-size:40px;margin-bottom:15px;font-weight: 500;letter-spacing: -3px;}

.timeline-header p{max-width:700px;margin:auto;opacity:.8;font-size: 16px;font-weight: 400;line-height: 1.8;}

.timeline-wrapper{display:flex;justify-content:space-between;margin-top: 78px;position:relative;}

.timeline-wrapper::before{content:"";position:absolute;top: 25px;left:0;right:0;height:3px;background: linear-gradient(90deg, #5b914f, #019ee4);animation:lineMove 5s linear infinite;}

.timeline-item{
width:23%;
position:relative;
animation:floatItem 4s ease-in-out infinite;
}

.timeline-item:nth-child(2){
animation-delay:1s;
}

.timeline-item:nth-child(3){
animation-delay:2s;
}

.timeline-item:nth-child(4){
animation-delay:3s;
}

.timeline-img{width: 60px;height: 60px;border-radius:50%;overflow:hidden;margin:auto;/* padding: 10px; */background-color: #f5f5f5;}

.timeline-img img{width:100%;height:100%;object-fit: contain; animation:rotateRecycle 8s linear infinite;
}

.timeline-item h3{margin-top:20px;font-size: 24px;letter-spacing: -1px;font-weight: 500;}

.timeline-item p{opacity:.8;font-size: 16px;line-height: 1.8;}

@keyframes floatItem{
0%{transform:translateY(0px)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0px)}
}

@keyframes lineMove{
0%{background-position:0}
100%{background-position:300px}
}


.rubber-showcase{
position:relative;
padding:140px 0;
overflow:hidden;
color:#fff;
float: left;
width: 100%;
}

.showcase-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url("../images/bnr-1.webp");
background-size: cover;
background-repeat: no-repeat;
filter:brightness(.4);
z-index:-1;
}

.showcase-heading{
text-align:center;
margin-bottom:70px;
}

.showcase-heading h2{font-size:42px;font-weight: 500;margin-bottom:10px;letter-spacing: -2px;}
.showcase-heading p{font-size:16px; line-height:1.8;font-weight: 400;margin-bottom:10px;}

.showcase-grid{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
}

.showcase-card{width: 100%;background: #1d1d1d;border-radius:15px;overflow:hidden;transform-style:preserve-3d;transition:transform .5s, box-shadow .5s;position:relative;/* padding-bottom: 20px; */}

.showcase-card img{
width:100%;
height:220px;
object-fit:cover;
}

.card-content{
padding:25px;
}

.card-content h3{margin-bottom:10px;letter-spacing: -1px;font-weight: 500;color: #fff !important;}

.showcase-card:hover{box-shadow:0 30px 50px rgba(0,0,0,.5);overflow: hidden;}

.showcase-card::before{overflow: hidden;content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transition:.6s;}

.showcase-card:hover::before{
left:100%;
}



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



.btn-360{
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    margin-top: 23px;
    padding: 12px 38px;
    background:#000;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    font-weight: 500;
    transform:translateY(0);
    will-change:transform;
    }

.btn-360:before{ content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.btn-360:hover:before{
    transform:translateX(0);
}
.btn-360 img{
    height: auto !important;
    width: 8px !important;

}
.btn-360:hover{color:#fff;z-index: 99;position: relative;}



.ux-input-group  input:focus {
    padding-left: 15px;
}

.ux-input-group  textarea:focus {
    padding-left: 15px;
}

/* SECTION */
.ux-contact-section{padding:100px 0;/* background:#f6f6f6; */float: left;width: 100%;}




/* LEFT SIDE */
.ux-contact-left{background:#000;color:#fff;padding: 31px 41px;display:flex;flex-direction:column;gap:30px;float: left;width: 35%;align-items: stretch;justify-content: center;}

/* CONTACT CARD */
.ux-contact-card{
border:1px solid rgba(255,255,255,0.2);
padding:25px;
transition:0.4s;
cursor:pointer;
}

.ux-contact-card:hover{
background:#5b914f;
color:#fff;
transform:translateY(-6px);
}

.ux-contact-card:hover p{

color:#fff;
}
.ux-contact-card:hover a{

color:#fff;
}
.ux-contact-card h4{margin:10px 0;font-size: 22px;font-weight: 500;letter-spacing: -1px;}

.ux-contact-card p{font-size: 16px;line-height: 1.8;color: #8d8d8d;}

.ux-contact-card p a{font-size: 16px;line-height: 1.8;color: #8d8d8d;}

/* ICON */
.ux-contact-icon{width: 27px;filter: brightness(100);}

/* RIGHT FORM */
.ux-contact-right{background: #f6f6f6;padding:60px;float: left;width: 65%;display: flex;align-items: center;}

/* FORM GRID */
.ux-contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

/* INPUT GROUP */
.ux-input-group{display:flex;flex-direction:column;margin-bottom: 48px;float: left;width: 100%;}

.ux-input-group label{font-size: 20px;margin-bottom: 6px;font-weight: 500;letter-spacing: -1px;}

.ux-input-group input,
.ux-input-group textarea{border:none;border-bottom:1px solid #ddd;padding:10px 0;font-size: 16px;outline:none;transition:0.3s;background: #f6f6f6;width: 100%;  z-index: 0;}

.ux-input-group textarea{
height:100px;
resize:none;
}

/* INPUT HOVER */
.ux-input-group input:focus,
.ux-input-group textarea:focus{
border-color:#000;
}



.ux-contact-btn{
    border: none;
    display: inline-flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    /* margin-top: 23px; */
    padding: 17px 73px;
    background:#000;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.4s;
    font-size: 16px;
    font-weight: 500;
  transform:translateY(0);
    will-change:transform;
    }

.ux-contact-btn:before{ content:'';
    position:absolute;
    inset:0;
    background:#5b914f;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
}

.ux-contact-btn:hover:before{
    transform:translateX(0);
}
.ux-contact-btn img{
    width: 8px;
}
.ux-contact-btn:hover{color:#fff;/* box-shadow:0 10px 25px rgba(0,0,0,0.3); */z-index: 99;position: relative;}



/* RESPONSIVE */
@media(max-width:992px){

.ux-contact-container{
grid-template-columns:1fr;
}

.ux-contact-left{
flex-direction:row;
justify-content:space-between;
}

}

@media(max-width:600px){

.ux-contact-left{
flex-direction:column;
}

.ux-contact-grid{
grid-template-columns:1fr;
}

.ux-contact-right{
padding:40px 25px;
}

}


.map-frame{
    border:0;
    filter: grayscale(100%);
}



.join {
    border: none;
    display: inline-flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    padding: 17px 73px;
    /* Change: Start with transparent or a solid base that doesn't 'vanish' */
    background: #fff; 
    color: #000;
    border-radius: 40px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  
    font-size: 16px;
    font-weight: 500;
    z-index: 1; /* Establish a stacking context */
}

.join:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Hidden to the left */
    width: 100%;
    height: 100%;
    background: #5b914f;
    transition: 0.4s ease;
    z-index: -1; /* Keep it behind the text at all times */
}

.join:hover:before {
    left: 0; /* Slide in */
}

.join:hover {
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    /* Remove 'background-color: transparent' to prevent the flash/jump */
}

.join img {
    width: 8px;
    filter: brightness(0);
    position: relative;
    z-index: 2;
}

.join:hover img {
    filter: brightness(100);
}

#hcc-product-enquiry-modal .modal-dialog {
    margin-top:10px !important;
}

#hcc-product-enquiry-modal .modal-content {
    width: 100%;
    float: left;
    background-size: cover;
}

.hcc-close-form {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    z-index: 999;
    top: 0;
    background: transparent url("../images/close3.png") no-repeat center center;
    background-size: 25px 25px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

.hcc-mod-new {
    width: 100%;
    float: left;
}

.hcc-log-sec h2{
    font-weight: 500;
    float: left;
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 10px;
    width: 100%;
}

.hcc-log-sec {
    width: 100%;
    float: left;
    background: #000000;
    padding: 52px 30px;
}

.hcc-log-field {
    width: 100%;
    float: left;
    margin-top: 15px;
}

.hcc-log-field label {
    font-size: 15px;
    color: #ffffff;
    width: 100%;
    font-weight: 400;
    margin-bottom: 12px;
}

.hcc-log-field input {
    background-color: #fff;
    width: 100%;
    float: left;
    padding: 13px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    outline: none;
}

.hcc-log-sec button:hover{
    background-position: 201%;
    color: #fff;
    text-decoration: none;
    background-color: #518a44;
}

.hcc-log-sec button {
    outline: none;
    width: 164px;
    height: 46px;
    float: left;
    margin-top: 28px;
    background: #ffffff;
    border: 0;
    font-size: 15px;
    color: #232323;
    border-radius: 30px;
    padding: 11px 31px;
    cursor: pointer;
    font-weight: 500;
}

.hcc-log-sec button img{
  
    width: 24px;
    margin-left: 10px;
    margin-top: -4px;
    float: right;
}

.hcc-log-sec button:hover img{
    filter: brightness(100);
}@media (min-width: 992px) {
    .hcc-modal-body {
             max-width: 519px !important;
    }
}
    .hcc-modal-body{
        margin: auto;
    }

    #hcc-product-enquiry-modal .modal-content {
    width: 100%;
    float: left;
    background: none;
    background-size: cover;
    border: navajowhite;
    padding: 0;
}.close_form {
    border-radius: 30px;
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    right: 35px;
    z-index: 999;
    top: 25px;
    background: #00000000 url(../images/close.svg) no-repeat center center;
    background-size: 20px 20px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

/* Mobile Overlay Styles */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 0, 1, 0.98); /* Deep Dark */
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    clip-path: circle(0% at 90% 5%); /* Circular opening effect */
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
    clip-path: circle(150% at 90% 5%);
}

.close-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 40px;
    color: #5b914f;
    cursor: pointer;
}

.mobile-nav-content ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.mobile-main-menu > li {
    overflow: hidden; /* For staggered entrance */
    margin-bottom: 20px;
}

.mobile-main-menu > li > a {
    font-size: 28px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: block;
    transition: 0.3s;
}

/* Mobile Dropdown Logic */
.mob-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: rgba(255,255,255,0.05);
    margin-top: 10px;
    border-radius: 10px;
}

.mob-dropdown li a {
    font-size: 18px;
    padding: 10px;
    color: #ccc;
    display: block;
    text-decoration: none;
}

.has-mobile-dropdown.open .mob-dropdown {
    max-height: 500px; /* Large enough to hold items */
}

.mob-drop-trigger i {
    font-size: 16px;
    transition: 0.3s;
}

.has-mobile-dropdown.open .mob-drop-trigger i {
    transform: rotate(180deg);
}

/* animation */
.reveal-text .word {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-text .word.visible {
  opacity: 1;
  transform: translateY(0);
}


.fajr-footer a:hover{
    color: rgb(91, 145, 79);
}

.whatsapp-float {
    position: fixed;
    bottom: 14px;
    right: 25px;
    display: flex;
    align-items: center;
    z-index: 999;
}

/* Tooltip */
.whatsapp-float span {
    margin-right: 10px;
    background: #5b914f;
    color: #fff;
    padding: 11px 16px;
    text-transform: capitalize;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transform: translateX(24px);
    transition: 0.3s;
    white-space: nowrap;
}

/* Icon button */
.whatsapp-float a {
    width: 60px;
    height: 60px;
    /* background: linear-gradient(135deg, #013459, #003258); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
    transition: 0.3s;
}

/* Icon */
.whatsapp-float a img {
    width: 39px;
    height: 39px;
}

/* Hover Effects */
.whatsapp-float:hover span {
    opacity: 1;
    transform: translateX(0);
}

.whatsapp-float:hover a {
    transform: scale(1.1) rotate(5deg);
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


@media (max-width: 575px) {
    .ip-logo, .ip-loader {
        position: absolute;
        left: 9px !important;
        width: 100%;
        opacity: 0;
        cursor: default;
        pointer-events: none;
    }
}


.ip-loader{
    margin-left: 0px!important;
    bottom: 46%!important;
}
.loader {
  width: 180px;
  height: auto;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  opacity: 1;
  animation: filter-animation 3s infinite;
 
}
.loader img{
       max-width: 90px;
       width: 100%;
       /* margin-top: -71px; */
       /* filter: brightness(); */
}

@keyframes filter-animation {
   0% { transform: translateY(-3px); opacity: 1;}
  25% { transform: translateY(3px); opacity: 1;}
  50% { transform: translateY(-3px); opacity: 1;}
   75% { transform: translateY(3px); opacity: 1;}
 
  100% { transform: translateY(-3px); opacity: 1;}
}


.icon-card img{
    width: 20px !important;
}


.nav-menu > li:hover > .nav-dropdown2 {
    opacity: 1;
    visibility: visible;
    height: 105px !important;
}



/* Vision Hero */
.mission-vision-modern {
    background: #fdfdfd;
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    float: left;
    width: 100%;
}

/* Background Watermark Typography */
.bg-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.02);
    z-index: 0;
    pointer-events: none;
    letter-spacing: -5px;
}

.purpose-card {
    background: #fff;
    padding: 60px;
    height: 100%;
    box-shadow: 0 40px 100px rgba(0,0,0,0.04);
    position: relative;
    z-index: 1;
    border-top: 5px solid #5b914f; /* Fajr Blue */
}

/* Vertical Staggering for Variety */
.mission-card {
    margin-top: 60px;
}

.card-header {
    margin-bottom: 40px;
}

.card-num {
    font-family: serif;
    /* font-style: italic; */
    font-size: 1.2rem;
    color: #5b914f;
    display: block;
    margin-bottom: 10px;
}

.accent-line {
    width: 40px;
    height: 2px;
    background: #5b914f;
    margin-bottom: 15px;
}

.purpose-card h2 {
    font-size: 50px;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: -3px;
}

.lead-statement {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #5b914f;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.detail-content p {
    color: #878787;
    line-height: 1.8;
    font-size: 16px;
}

/* Specialized Milestone UI */
.milestone-box {
    margin-top: 30px;
    padding: 20px;
    background: #f8fbfc;
    border-left: 3px solid #013459;
}

.milestone-box span {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0px;
}

.milestone-box strong {
    font-size: 1.2rem;
    color: #013459;
}

/* Responsive Fixes */
@media (max-width: 991px) {
    .mission-card {
        margin-top: 0;
    }
    .purpose-card {
        padding: 40px;
    }
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    /* margin-top: 60px; */
}

.value-card {
    padding: 40px;
    background: #111;
    border: 1px solid #222;
    transition: 0.3s ease;
    padding: 30px 30px;
    background-color: #5b914f;
    border-radius: 20px;
    border: 1px dashed #fff;
}

.value-card:hover {
    border-color: #000;
    transform: translateY(-10px);
}

.value-number {
    font-size: 3rem;
    font-weight: 800;
    color: rgb(255 247 247 / 18%);
    margin-bottom: 20px;
}

.value-card h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 26px;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: -1px;
}

.value-card p {
    color: #f5f5f5;
    font-size: 16px;
    line-height: 1.8;
}



.hidden-input-field {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }