*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

a{text-decoration: none;}
p{font-weight: 300;}
.container{
    width: 80%;
    margin: 0 auto;
}
ul{
    text-decoration: none;
}
li{
    list-style: none;
}
section{
    padding: 50px 0;
}
.para-white{
    color: #fff!important;
}
  .greentext{color: #2b7c3e;}
  .lightgreentext{color: #41b05a!important;}

.para-gray{color: #bbbbbb!important;}
.lightgray{color: #c2c2c2!important;}
.darkgray{color: #323232!important;}
.chem-color{color: #155b80!important;}
.chem-color-light{color: #2dadcd!important;}
.buildr-color{color: #2f9c4d!important;}
.interior-color{color: #9f856a!important;}
.wood-color{color: #79542a!important;}
.yellow-color{color: #d9ba1f!important;}
.orange-color{color: #a15619!important;}
.tools-color{color: #2c3d79!important;}

.martop-0{margin-top: 0px!important;}

.martop-10{margin-top: 10px!important;}
.martop-30{margin-top: 30px!important;}
.martop-100{margin-top: 100px!important;}
.marleft-10{margin-left: 20px;}
.marbottom-50{margin-bottom: 50px!important;}

.padbottom-0{padding-bottom: 0px!important;}
.clear{clear: both;}
.fw-bold{font-weight: bold;}
.fw-normal{font-weight: 300;}

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

.border-radious10{border-radius: 10px;}
.inlineblock{display: inline-block!important;}
.vision-handshake{border-radius: 20px; width: auto; max-width: 100%;}
.whitebannerbg{display: block; width: 55%; height: 100%; background-color: #ffffffd7; position: absolute; left: 0; top: 0; backdrop-filter: blur(16px);}

/* HEADER START */
header{position: relative;}
.header-top{position: absolute; top: 0; left: 0; right: 0; z-index: 999; height: 120px; width: 100%;}
.header-container{display: flex; flex-wrap: wrap; justify-content: space-between;}

.logo .full-logo{width: 350px; height: 95px;}
.right-contact-details{display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 20px; gap: 20px;}
.maltichannel{ font-size: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500;}
.num-icon{font-size: 18px; font-weight: 400; margin-top: 8px;}
.number-with-sociaL{padding-top: 10px;}
.hearder-button{margin-top: -15px;}
.hearder-button button{
    padding: 8px 15px;
    background-color: #1b742f;
    border-radius: 35px;
    border: none;
    transition: all ease .5s;
}
.hearder-button button:hover{
    background-color: #000;
}

.hearder-button button a{
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
}
/* HEADER END */

/* BANNER START */
.banner{  
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.homebanner{padding-top: 0px; background-image: url(../images/banner-hub-full-video.webp); background-position: left bottom; background-repeat: no-repeat; width: 100%;  height: 100vh; position: absolute; top: 0;  z-index: 2;}

.home-bgvideo{height: 100%; width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; z-index: -1; opacity: 0; transition: all 0.3s ease-in-out;}

.contact-banner-bg{
    background: url(../images/contact-banner.webp) no-repeat center center;
    background-size: cover;
    height: 70vh;
    background-color: #dddddd;
    overflow: visible;
}

.about-banner-bg{
     /* background: linear-gradient(to bottom, #f1f1f1, #eeeeee); */
     background: url(../images/about-banner-2.webp) no-repeat center left;
     height: 100vh;
     background-color: #dddddd;
     background-size: cover;
}

.hub-innerbanner{
    height: 85vh;
    position: relative;
}

.partners-banner{background: url(../images/partners-banner.webp) no-repeat center center #ebebeb; height: 100vh;}

.prochem-banner{background:url(../images/prochem-hub-banner.webp) no-repeat top right;}
.buildrhub-banner{background:url(../images/buildr-hub-banner.webp) no-repeat center right;}
.metalhub-banner{background: url(../images/metal-hub-banner.webp) no-repeat top right;}
.interiohub-banner{background: url(../images/interio-hub-banner.webp) no-repeat center right;}
.decorhub-banner{background: url(../images/decorhub-banner.webp) no-repeat center left;}
.toolshub-banner{background: url(../images/tools-hub-banner.webp) no-repeat left top;}
.waterhub-banner{background:url(../images/waterhub-banner.webp) no-repeat center top}
.teknohub-banner{background:url(../images/tekno-hub-banner.webp) no-repeat center right}    
.financehub-banner{background:url(../images/finance-hub-banner.webp) no-repeat top right}

.parallax-image{height: 80vh; width: 100%; background: url(../images/carpenter.webp) no-repeat top center fixed; overflow: hidden;}

.teknohub-banner .inner-hubhead, .metalhub-banner .inner-hubhead{width: 750px;}

.infrastructural-heroes{background-color: #ededed; min-height: 500px;}
.infrastructural-heroes .leftcontent, .rightcontent{width: 45%;}
.rightcontent ul{display: flex; flex-wrap: wrap; gap: 20px; width: 100%; justify-content: space-between;}
.rightcontent ul li{width: 200px; height: 220px; background-color: #ffffff; position: relative; overflow: hidden; margin-top: 20px; border-radius: 15px; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);}
.rightcontent ul li img{width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out;}
.rightcontent ul li p{position: absolute; bottom: 5px; left:10px; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;}
.infrastructural-heroes h2{font-size: 30px; font-weight: 600; margin-bottom: 10px;}
.infrastructural-heroes p{font-size: 20px; color:#5e5e5e; line-height: 22px; padding-top: 20px;}

.rightcontent ul li:hover img{transform: scale(1.1); }

.banner-right ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: start;
    align-items:flex-start;   
}


.banner-right ul li{
    width: 47%;
    height: 190px;
    font-size: 22px;
    font-weight: 500;
    color: #e8e8e8;
    background-color:#41b05a;
    overflow:hidden ;
    display: flex;
    align-items: center; justify-content: center;
    font-size: 40px;
    line-height: 50px;
    flex-direction: column;
    border-radius: 10px;
    text-align: center;
}

.lightgreen{background-color: #408d51!important;}

.banner-right ul li span{display: block; width: 100%; font-size: 80px; font-weight: 600;}

.banner-right ul li img{width: 100%; height: 100%; object-fit: cover;}

.banner-container{
    padding-top: 30vh;    
}

.hub-innerbanner .banner-container{padding-top: 5vh;}

.banner-text h2, div.inner-hubhead h1, .banner-text h1.heading1{
    font-size: 76px;
    letter-spacing: -2px;
    color: #5a5a5a;
    line-height: 65px;
    font-weight: bold;   
}

.banner-text h1{
    font-size: 32px;
    font-weight: 400;
    color: #2c2c2c;  
    line-height: 32px;
}
.banner-text{
    position: relative;
    z-index: 3;
    width: 480px;
}

.banner-text button{margin-left: 0px;}

.banner-para{
    width: 90%;
    font-size: 20px;
    margin-top: 20px;
    color: #151515;
}
.arrow{
    width: 100px;
    height: 100px;
    padding: 15px;
    background-color: #41b05a;
    border-radius: 20px 20px 0 20px;
    position: absolute;
    right: -53px;
    top: -132px;
}

.arrow img{
    height: 90%;
    width: 90%;
    margin-top: 5px ;
    margin-left: 5px;
    object-fit: cover;
    object-position: center;
}
/* button start */

.button {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
    background-color: rgb(128 128 128);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffff;
    gap: 10px;
    width: auto;
    font-weight: 400;
    border: 1px solid #6464644d;
    outline: none;
    overflow: hidden;
    font-size: 15px;
    cursor: pointer;
    margin-top: 20px;
  }

  .greenbg{background-color: #208135!important;}

  .button a{display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff;}
  
  .banner-client-logo{width: 100%; text-align: center; background-color: #fff; color:#3c3c3c; left: 0;}
  .banner-client-logo h4{font-size: 30px; font-weight: 600; }
  .banner-client-logo p{padding:10px 15%; font-size: 20px;}


  .mission-vision{background-color: #fff; padding-bottom: 0;}

  .large-center-head, .heading3 span.green-largetext{text-align: center; font-size: 130px; margin-bottom: 0px; letter-spacing: -5px; line-height: 140px; background: linear-gradient(to bottom, #a6a6a6, #d6d6d6, #f2f2f2); -webkit-text-fill-color: transparent;  background-clip: text;  -webkit-background-clip: text;}
  .large-center-head.dark{background: linear-gradient(to bottom, #5a5a5a, #4d4d4d, #3d3d3d); -webkit-text-fill-color: transparent;  background-clip: text;  -webkit-background-clip: text;}
  .green-largetext{background: linear-gradient(to bottom, #c1dec8, #89bb94, #3e8a4f)!important; -webkit-text-fill-color: transparent!important;  background-clip: text!important;  -webkit-background-clip: text!important;}

  .bulkborder-container{display: flex; justify-content: space-between; flex-direction: row;}
  .bulkorder-box{background-color: #3b3b3b; height: 400px; padding: 30px 60px;  border-radius: 20px; margin-top: 50px; width: 48%; position: relative;}
  .bulkorder-box h2{font-size: 60px; color: #fff; line-height: 50px; display: block; width: 100%; margin-top: 75px;}
  .bulkorder-box p{font-size: 18px; color: #d1d1d1; margin-top: 15px; line-height: 22px; width: 55%;}
 .bulkorder-box a{width: 170px;}
  .bulkorder-box img{width: 192px; position: absolute; right: 20px; top: 115px;}
    .gray-box{background-color: #dddddd!important;}
    .gray-box h2, .gray-box p{color: #6c6c6c;}
    .partner-strength{width: 50%; position: relative; margin-top: 50px;}
.subheading{text-align: center; font-size: 24px; font-weight: 400; color: #707070;}
  .icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
  }
  
  .button:hover {
    transform: scale(1.05);
  }
  
  .button:hover .icon {
    transform: translate(4px);
  }
  
  .button:hover::before {
    animation: shine 1.5s ease-out infinite;
  }
  
  .button::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -100px;
    opacity: 0.6;
  }
  
  @keyframes shine {
    0% {
      left: -100px;
    }
  
    60% {
      left: 100%;
    }
  
    to {
      left: 100%;
    }
  }
  
/* button ebd */
.banner-text .wholesale-top{
    display: block;
    font-size: 35px;
    line-height: 30px;
    color: #5a5a5a;
}
.banner-text .banner-store{
    display: block;
    padding-top: 5px;
    width: 90%;
}
.banner-text .banner-store img{width: 100%;}


.banner-container .greenbox{display: flex; position: absolute; right: 5px; bottom: -40px; border-radius: 20px; width: 100px; height: 100px; background-color: #41b05a; z-index: 2; align-items: center; justify-content: center;
}
/* BANNER END */
p.largepara{font-size: 24px!important; color: #5e5e5e; line-height: 28px;}   


/* STANGHT START */
.strength-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    gap: 0px;
    margin: 0 auto;
    margin-bottom: 100px;
}
.count-left{
    width: 50%;
    display: flex;
    gap: 60px;
    justify-content: end;
    padding-top: 10px;
}
.count-left h3{
    font-size: 100px;
    color: #b1b1b1;
    height: 100px;
    line-height: 40px;
    font-weight: 800;
}
.count-left h3 .plus{
    font-size: 50px;
    display: inline-block;
    color: #c6c6c6; 
    position: relative; font-weight: 500;
    margin-left: -20px; top: -15px;
}
.count-left h3 .strength-sub{
    font-size: 40px;
    display: block;
    color: #41b05a;
    font-weight: 500;
}

.company-strength{background: url(../images/home-map.webp) no-repeat top center; padding-bottom: 0px;}

.mySwiper{overflow: hidden; padding: 0 20px; padding-bottom: 100px; position: relative;}
.productcatlist{display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; padding-bottom: 50px;}
.productcatlist li{display: block!important; width: 30%; text-align: center; background-color: #f8f8f8; height: 250px!important; border-radius: 20px; box-shadow: 0px 15px 25px rgba(0,0,0,0.1); border: solid 1px #efefef; position: relative; overflow: hidden;}
.productcatlist img{height: 50px!important; width: auto!important; display: inline-block!important; margin-top: 20px; margin-bottom: 10px;}
.productcatlist .subcats{display: flex;  flex-wrap: wrap; justify-content: left; gap: 5px;}
.subcats h3{width: 40%; font-size: 16px; font-weight: 400; color: #333; position: relative; text-align: left; margin-left: 6%; padding-bottom: 5px; display: flex; flex-direction: row; align-items: center; gap: 5px;}
.subcats h3:before{content: "next"; font-family: 'swiper-icons'; display: block; color: #41b05a; font-size: 10px; font-weight: 700;}
.swiper-pagination-bullet-active{background-color: #41b05a!important;}

.productcatlist li:before{content: ""; display: block; width: 100%; height: 8px; background-color: #dce8df; position: absolute; border-radius: 0 0px 10px 0;}
.productcatlist li a{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;}

.productcatlist li:nth-child(1):before{background-color: #134d6d;}
.productcatlist li:nth-child(2):before{background-color: #306f42;}
.productcatlist li:nth-child(3):before{background-color: #818181;}
.productcatlist li:nth-child(4):before{background-color: #3385b1;}
.productcatlist li:nth-child(5):before{background-color: #9f856a;}
.productcatlist li:nth-child(6):before{background-color: #525252;}
.productcatlist li:nth-child(7):before{background-color: #2c3d79;}
.productcatlist li:nth-child(8):before{background-color: #37727e;}
.productcatlist li:nth-child(9):before{background-color: #af7438;}

.productcatlist img.hub-stamp{position: absolute; right: 0px; bottom: 0px; height: 70px!important;}
.hub-stamp.leftimg{left: 0;}
.productcatlist img.hub-stamp.largeimg{margin-bottom: 0px; height: 100px!important; right: 0;}

.homevideo{width: 100%; height: 100vh; background-color: #000; position: relative; display: flex; align-items: center; justify-content: center;}
.homevideo video{width: 1280px; height: 720px; margin: 0 auto;}

.review-container{width: 800px; height: 800px; border-radius: 100%; margin: 0 auto;}
.partner-bannerbottom{padding: 50px 0;}

 div.review-card {width: 400px;  height: 420px; position: relative; margin: 0px auto; top: 190px;}
 .review-card .swiper-slide{display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 18px; background: url(../images/glow-bg.webp) no-repeat center top rgba(223, 223, 223, 0.77); backdrop-filter: blur(5px); box-shadow: 0px -10px 15px rgba(0, 0, 0, 0.05); position: relative;}
 .review-card .swiper-slide p{font-size: 18px; color: #232323; padding: 20px 30px; line-height: 24px; position: relative;}
 .review-card .swiper-slide p::before{content: '"'; color: #000; display: block; position: absolute; top: 0px; left: 0; width: 100%; text-align: center; font-size: 150px; font-family: "Birthstone", cursive; opacity: 0.1;}
 .review-card .swiper-slide div{display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
 .review-card .swiper-slide div img{width: 60px; height: 70px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);}
  .review-card .swiper-slide div span{text-align: left; color: #56b858;}
 .review-card .swiper-slide div small{display: block; color: #868686;}
 .review-card .swiper-slide:before{content: ""; width: 70px; height: 70px; border-radius: 0 25px 0 0; background-color: #606060; position: absolute; bottom: 0px; left: 0; opacity: 0.1;}

.review-card .swiper-slide:nth-child(2){background-color: #e4e8dfc3;}
.review-card .swiper-slide:nth-child(3){background-color: #e5e1d7c3;}

.hub-space{color: #cccccc; margin-top: 140px; text-align: center; font-size: 100px; font-weight: 800; line-height: 170px; width: 1000px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;}
.hub-space span{display: block; font-family: "Exo"; font-weight: 700; display: flex; align-items: flex-start; gap: 8px; color: #555;}
.hub-space small{font-size: 50px; font-family: "Birthstone", cursive; font-weight: 300; color: #9f9f9f;}
.company-strength h2{text-align: center; font-size: 32px; color: #2c2c2c; font-weight: 400; margin-top: -50px; padding-bottom: 50px;}
.finishtext{margin-top: 120px;}
.strength-details{width: 35%; padding: 20px 25px; background-color: #f4f4f4;  border-radius: 25px; min-height: 230px; display: flex; align-items: center;}
.strength-details p{font-size: 20px; line-height: 25px;}

.partner-list{display: flex; flex-direction: row; gap: 30px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 20px;}
.partner-list li{width: 250px; height: 200px; background-color: #ffffff; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: solid 1px #ededed; box-shadow: 0px 5px 20px rgba(0,0,0,0.05);}
.partner-list li img{min-width: 60px; max-width: 130px; filter: grayscale(100%); transition: all 0.2s ease-in-out;}
.partner-list li:hover img{filter: grayscale(0%); transform: scale(1.2);}
.quicklinks{display: flex; flex-direction: row; border-left: solid 1px #ddd; height: 40px; margin-top: 0px; padding-left: 15px; flex-wrap: wrap;}

.quicklinks li{padding-top: 0px; padding-right: 10px; display: block;}
.quicklinks li a{color: #1b742f;}

/* STANGHT END */


/* about details start */
.about-text{
    width: 76%;
    margin: 50px auto;
}
.about-text h2{
    font-size: 48px;
    font-weight: 400;
    text-align: center;

     background: linear-gradient(
    to right,
    rgb(244, 80, 80) 50%,
    rgb(37, 37, 37) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  /*   margin-bottom: -250px; */

}
.about-text span{
    color: #41b05a;
    font-weight: 700;
}

/* about details end */

.company-wing-container{
    position: relative;
    width: 100%;
    padding-bottom: 50px;
}
.main-wings-div{
    position: relative;
    width: 100%;
    margin-bottom: 385px;
}
/* .main-wings-1{
    position: sticky;
    top: 10px;
    margin-bottom: 285px;
}
.main-wings-2{
    position: sticky;
    top: 10px;
    margin-bottom: 285px;
}
.main-wings-3{
    position: sticky;
    top: 10px;
    margin-bottom: 285px;
}
.main-wings-4{
   
    position: sticky;
    top: 10px;
    margin-bottom: 285px;
}
.main-wings-5{
    position: sticky;
    top: 10px;
    margin-bottom: 150px;
    padding-bottom: 30px;
} */
.quate{
    font-size: 150px;
    color: #9191915e;
    position: absolute;
    left: -30px;
    top: -40px;
}


.company-wing-overview{
    background-image: url(../images/procemHub.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 95%;
    margin: 0 auto;
    height: 600px;  
    padding: 30px 20px;
    position: relative;
    border-radius: 35px;
    z-index: 2;
}
.builderhub{
    background-image: url(../images/builder-hub.webp);
}
.metal{
    background-image: url(../images/metal-hub.webp);
}
.intrio{
    background-image: url(../images/interior-hub.webp);
}
.tool-hub{
    background-image: url(../images/tools-hub.webp);
}
.water-hub{
    background-image: url(../images/water-hub.webp);
}

.tekno-hub{
    background-image: url(../images/teknohub.webp);
}

.decor-hub{
    background-image: url(../images/decor-hub.webp);
}

.finance-hub{
    background: url(../images/finance-service.webp) no-repeat center bottom; background-size: cover;
}

.wings-image{
    position: absolute;
    right: 0;
    bottom: -4px;
    border-bottom-left-radius: 35px ;
 
}
.procem-mini{
    position: absolute;
    right: -30px;
    bottom: -40px;   
}

.procem-mini-2{
    position: absolute;
    right: 0px;
    bottom: -20px;
}
.procem-mini-2 img{
       width: 350px;
       height: 200px;
       border-radius: 15px;
       margin-right: 15px;
       box-shadow: 5px 10px 20px #27272747;
}

.wings-details-content{
    width: 40%; padding-left: 15px;
}
.wings-details-content p{
    font-size: 18px;
    margin-top: 20px;
    line-height: 22px;
    font-weight: 300;
}

.wings-details-content button{margin: 20px 0;}

.contruction{
    color: #fff;
    display: block;
    font-weight: 300;
    padding-top: 25px;
}
.wings-name{
    color: #fff;
    font-weight: 300;
    font-size: 40px;
    padding-top: 25px;
    line-height: 40px;
}
.chemical{   
    color: #27bd49;
    font-weight: 700;
}
.watercolor{   
    color: #5cb7f0;
    font-weight: 700;
}
.yellowcolor{   
    color: #f1d23a;
    font-weight: 700;
}
.coating{ 
    color: #fff;
    font-weight: 700;
}
/* .wings-details-content img {
   
} */
.wings-details-content .logo-image-div{max-width: 68%; padding: 15px 20px ; background-color: #ffffff; backdrop-filter: blur(20px); border-radius: 0px 0px 30px 0;margin-left: -35px; margin-top: -30px;}
.wings-details-content .logo-image-div img{ width: 100%; height: auto;}
.company-wings-details{
    background-color: #fff;
    width: 100%;
    min-height: 500px;
    height: auto;
    border-radius: 35px;
    padding: 440px 20px 50px 20px;
    position: absolute;
    top: 150px;
    z-index: 1;
   box-shadow: 0px 15px 20px rgba(0,0,0,0.2);
}
.wing-relative{
    position: relative;
}
.wings-highlight{
    width: 25%;
    padding-right: 20px;
    text-align: right;
    border-right: 1px solid #7e7e7e;
    display: flex;
    align-items: center;
    justify-content: right;
}

.wings-highlight h4{
   font-size: 58px;
   font-weight: 800;
   color: #5a5a5a;
   line-height: 28px;
}
.wings-highlight h4 small{display: inline-block; font-weight: 400; font-size: 15px; background-color: #27bd49; color: #fff; padding: 0; width: 140px; text-align: center;}

.wings-highlight h4 span{
    font-size: 28px;
    line-height: 28px;
    color: #000000;
    display: block;
    font-weight: 600;
    padding-top: 10px;
}
.wings-flex-container{
    position: relative;
    padding-top: 50px;
    width: 100%;
    display: flex;
    gap: 30px;
    justify-content: left;
}
.full-width{width: 100%!important;}
.half-width{width: 50%!important;}

.li-part{
    display: flex;
    gap: 50px;
    flex-direction: column;
    width: 75%;
}
.li-part ul.products{display: flex;flex-direction: row;gap: 10px; justify-content: left;flex-wrap: wrap;}
.li-part ul.products li{font-size: 20px;  padding: 20px 35px; background-color: #e9e9e9; border-radius: 8px;}
.partners{display: flex;gap: 15px; justify-content: left; align-items: center; flex-wrap: wrap;}
.partners li{height: 45px;}
li.small-logo{height: 55px;}
li.large-logo{height: 40px;}
.partners li img{height: 100%; width: auto;}

.vcenter-align{display: flex; align-items: top; justify-content: center; padding-top: 50px;}
.vcenter-align h4{text-align: left; font-size: 50px; line-height: 48px; padding: 0px 40px; color: #fff;}
.vcenter-align h4 span{display: block; font-size: 24px; line-height: 25px; }
.vcenter-align h4 small{font-size: 50px;display: block; }

.franchise-form{background: linear-gradient(0deg,rgba(8, 8, 8, 0.08) 0%, rgba(255, 255, 255, 1) 100%);}

.office-locations{padding-top: 0px;}

/* ABOUT DESCRIBE START */
.about-describe-main{
    padding: 60px 0 !important;
    background-color: #41b05a;

}
.about-describe{
    background-image: url(../images/house-shape.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 1000px;
    position: relative;
    padding: 50px 0;
}

.describe-box-container{
    width: 600px;
    margin-left: 250px;
    display: flex;
    gap: 35px;
    flex-wrap: wrap;
    margin-top: 100px;
    position: relative;
    z-index: 2;
    flex-direction: row; justify-content: flex-start;
}
.store-extraspace{
    margin-top: 50px;
}
.store-lessspace{
    margin-top: -50px;
}
.describe-box{
    width: 280px;
    height: 260px;
    display: flex;
    justify-content: top;
    padding: 0 20px;
    text-align: left;
    flex-direction: column;
    border-radius: 15px;
    background: linear-gradient(0deg, rgba(73,175,96,1) 0%, rgb(118, 181, 84) 100%);
    box-shadow: 0px 15px 15px rgba(0,0,0,0.1);
}
.describe-box p{
    font-size: 24px;
    font-weight: 600;
    margin-top: -8px;
    color: #f6f6f6;
}
.describe-box h5{
    font-size:18px;
    color: #cdf4d6;
    font-weight: 400;    
    padding-top: 10px;
}
.describe-box h5 span{
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -2px;
}
.describe-box .into{
    color: #cae185;
    font-size: 26px;
    line-height: 26px;
}
.describe-box .godown-detail{
    color: #1b742f;
    font-size: 18px;
    margin-top: 10px;
}
.describe-image-right{
    width: 900px;
    height: 840px;
    border-radius: 20px;
    position: absolute;
    right: 0;
    top: 240px;
    z-index: 1;
}
.describe-image-right img{
    width: 100%;
    height: 100%;
    border-radius: 20px 0 0 20px;
    object-fit: cover;
    object-position: center;
}

/* ABOUT DESCRIBE END */

/* INFRA VIDEO START */
.infrahub-video-main{
    padding: 0px !important;
    margin-top: -200px;
    position: relative;
    z-index: -1;
}
.infrahub-video{
    width: 100%;
    height: 110vh;
    background-image: url(../images/contact-team-image.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.contact-image{
    background: url(../images/locations-map-image.webp) no-repeat right top;
    background-attachment: fixed;
    height: 100vh;
    background-size: contain;
    width: 100vw;
    overflow-x: hidden;
}


/* SWIPPER JS START */
.swipper-js{
    position: relative;
    background-color: #eeeeee;
    width: 80%;
    padding: 50px 30px;
    border-radius: 25px;
    margin-top: -150px;
}
.swiper-head{
    padding-bottom: 20px;
    width: 60%;
}
.swiper-head h3{
    font-size: 60px;
    color: #818181;
}
.swiper-head h3 span{
    color: #1b742f;
}
.swiper-head p{
    font-size: 20px;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 350px;
    border-radius: 25px;

  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .swiper-wrapper{
    display: flex;
  }

  .slider-arrow{position: absolute; width: 135px; right: 0px; bottom: 25px; height: 50px;}
  .swiper-button-next, .swiper-button-prev{padding: 10px; background-color: #208135; color: #fff; width: 50px; height: 40px; line-height: 50px; border-radius: 5px; margin: 5px;}
  .swiper-button-next:after, .swiper-button-prev:after{font-size: 18px!important;}
  /* SWIPPER JS END */
  .footer{
    padding: 50px 0 235px;
    position: relative;
  }
  .footer-content{
    width: 60%;
    position: relative;
    z-index: 2;
    height: 190px;
  }
  .footer-bottom{display: flex; flex-direction: row; gap: 10px; padding-right: 0px;align-items: center;padding-bottom: 20px;}
  .footer-bottom .social-link-b{display: flex;gap: 20px;margin-top: 10px;}

  .footer-content h3{color: #000;  font-weight: 500;  font-size: 20px;}
  .footer-content h3 .hub{color: #1b742f; font-size: 20px;font-weight: 700;}
  .footer-content h3 .infra{
    color: #5a5a5a;
    font-size: 20px;
    font-weight: 700;
  }
.footer-content p{
font-size: 20px;
color: #575757;
margin: 5px 0 10px;
}

.pos_rltv{position: relative;}

.social-link{
    display: flex;
    margin-top: 0px;
}
.social-link a{
    text-decoration: none;
    color: #000;
}

.social-link i{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   transition: all ease .5s;
    border: 1px solid gray;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 22px;
}
.social-link i:hover,.social-link i:hover a{
    background-color: #1b742f;
    color: #fff;
    
}
.line{
    margin-top: 10px;
    width: 61.7%;
    height: 1px;
    background-color: #dddddd;
    position: relative;
    z-index: 2;
}
.footer .copy-right{
    margin-top: 3px;
    color: #3b3b3b; 
    font-size: 12px;
    width: 100%;
    padding-right: 0px; padding-top: 0px;
}
.footer .copy-right a{color: rgb(47, 65, 156);}
.footer-logo{
    width: 80%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.footer-logo img{
    width: 100%;
    opacity: 0.7;    
}

.footer-logo .annvyearslogo{display: block; width: 100px; height: 90px; background: url(../images/anniversary-top-right.webp) no-repeat top center; position: absolute; right: 0; top: 0;}

.data{margin: 0;}
/* 
.footer-art{width: 100%; height: 100%; background: url(../images/footer-logo-outline.webp) no-repeat center top; position: absolute; top: -120px; left: 0;} */

.restbrands{border-left: solid 1px #7e7e7e; padding-left: 10px; height: 50px!important; line-height: 50px; font-size: 25px; font-weight: 700; letter-spacing: 0px; color: #41b05a;}

.short-logo{display: none; margin-top: 10px; filter: grayscale(100%);}
.innerhubhead .short-logo{display: block;}
.short-logo:hover{filter: grayscale(0%);}
.innerhubhead .full-logo{display: none;}

/* Contact us Start */
.inner-banner-head{width: 610px;}
.inner-banner-head h2{
    font-size: 76px; line-height: 70px;
}
.inner-hubhead h2 img, .inner-hubhead h1 img{width: auto; max-width: 100%; margin-top: 0px; margin-bottom: 20px;}

.contact-us{
    color: #8a8a8a;

}

.contact-banner-para{
    margin-top: 40px;
}
.summery-box{
    display: flex;
    justify-content: left;
    gap: 20px;
    max-width: 350px;
}
.summery-box i{
    color: #27bd49;
    font-size: 30px;
    width: 30px;
    text-align: center;
}
.contact-line{
    width: 100%;
    height: 1px;
    background-color: #525252;
    margin: 0 auto;
    margin: 10px 0;
}
.summery-address span{
    display: block;
    font-size: 14px;
    color: #27bd49;
    font-weight: 300;
    text-transform: uppercase;
}
.summery-address h3{
    font-size: 26px;
    width: 375px;
}
.contact-absolute{
    position: relative;
}
.contact-summery{
    border-bottom:5px solid #27bd49;
    color: #fff;
    display: inline-block;
    padding: 20px 40px;
    background-color: #383838;
    border-radius: 20px 0 20px 20px;
    position: absolute;
    right: 0;
    bottom: -50px;
}

.contact-summery a{color: inherit;}

.project-contact{
    
    color: #000000;
    display: inline-block;
    padding: 20px;
    width: 95%;
    box-sizing: border-box;
    border-radius: 20px 0 20px 20px;
   
}
.project-contact .summery-address span{color: #263d4d;}

.project-contact .summery-box{max-width: none!important; gap:10px;}

.contact-sum-rel{
    position: relative;
}

.contact-sum-rel h4{font-size: 50px;margin-bottom: 20px; color: #000000;}


/* contact form */
.contact-flex-container{
    width: 100%;
    display: flex;
    justify-content: left;
    gap: 20px;
    height: auto;
    box-shadow: 0px 10px 20px #9494944d;
    border-radius: 25px;
    overflow: hidden;
}

.contact-flex-left{
    /* display: flex; */
    background: url(../images/contact-store-background.webp) no-repeat bottom center;
    background-color: #d0e1e9;
    width: 34%;
    padding: 60px 30px;
    color: #fff;
}

.contact-flex-left .summery-box{max-width: 10%;}

.rotate-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.godown-sub{
    transform: rotate(270deg);
    display: flex;
    gap: 2px;
}
.office-location{
    margin-left: -55px;
}
.godown-sub p{
    width: 30px;
    height: 1px;
    background-color: #307956;
    transform: translateY(10px);
}
.godown-sub h3{
    font-size: 20px;
    font-weight: 300;
    color: #307956;
}
.office-location h5{
    font-size: 29px;
    font-weight: 200;
    padding: 15px 0;
    color: #141414;
    /* border-bottom: 1px solid #b4b4b4; */
}

.form-right{
    width: 66%;
    padding: 50px 30px;
    background-color: #fff;
    border-radius: 0 25px 25px 0;
}
.submit-button button{
    background-color: #41b05a;
    color: #fff;
    padding: 8px 25px;
    border: none;
    margin-top: 10px;
    border-radius: 35px;
    font-size: 20px;
    font-weight: 200;
    transition: all ease .5s;
}
.submit-button button:hover{
    background-color: #000;
    cursor: pointer;
}
.form-heading h3{
    font-size: 50px;
    line-height: 50px;
}
.form-heading h3 span{
    display: block;
    color:#208135; 
    font-size: 22px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}
.form-heading .form-para{padding: 15px 0;font-size: 20px;font-weight: 500;}
.lebel-input{
    margin-top: 10px;
}
.lebel-input label, .dropdown label{
    display: block;
    margin-bottom: 5px;
}

.lebel-input input , textarea{
    padding: 10px 12px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgb(199, 199, 199);
}


/* gallary start */
.gallary{
    width: 100vw;
    position: relative;
    height: auto;
    z-index: 2;
    margin-bottom: -50px;
}
.g-main-flex-con{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
.gallary-left-flex{
    display: flex;
    justify-content: end;
    gap: 30px;
    width: 70%;
    flex-wrap: wrap;
}
.gallary-left-flex > div{overflow: hidden;}
.gallary-left-flex .gallry-image-box-1{
    width: 55%;
    height: 280px;
    border-radius: 20px 20px 0 20px;
}
.gallary-left-flex img{object-fit: cover}
.gallary-left-flex .gallry-image-box-1 img{
    width: 100%;
    height: auto;
   
}
.gallary-left-flex .gallry-image-box-2{
    width: 40%;
    height: 280px;
    border-radius: 20px 20px 20px 0px;
}
.gallary-left-flex .gallry-image-box-2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallary-left-flex .gallry-image-box-3{
    width: 100px;
    height: 100px;
    border-radius: 20px 0px 20px 20px;
   background-color: #208135;
}
.gallary-left-flex .gallry-image-box-4{
    width: 65%;
    height: 280px;
    box-shadow: 2px 5px 40px #2b2b2b3f;
    border-radius: 0px 20px 20px 20px;
}
.gallary-left-flex .gallry-image-box-4 img{
    width: 100%;
    height: 100%;
  
}
.gallary-right-gallry-image-box{
    height: 590px;
    width: 430px;
    border-radius: 20px;
    box-shadow: 2px 5px 40px #2b2b2b3f;
    overflow: hidden;
}
.gallary-right-gallry-image-box img{
    height: auto;
    width: 100%;  
}


.form-flex{display: flex;width: 100%;gap: 15px;margin: 20px 0;}
.form-flex .lebel-input {width: 50%;}
.form-flex .lebel-input input, .form-flex select{width: 100%;}
.radio label{margin-right: 20px;}

.radio{padding: 0px 0 10px;}
.radio p{padding-bottom: 10px;font-size: 22px;}
.form-container{display: flex;justify-content: space-between;height: auto;}
.form-left{width: 34%; height: 100vh; background:url("../images/infra hub colaboration.jpg") no-repeat #1b742f center center; border-radius: 20px 0 0 20px; position: sticky; top: 0px;}

.form-middle{width: 65%;background-color: #f6f6f6; padding: 50px 35px;backdrop-filter: blur(20px); box-shadow: 0px 15px 15px rgba(0,0,0,0.1);}
.form-middle form{padding: 20px 0;}

.flex-form{display: flex;justify-content: space-between;width: 100%;gap: 18px;margin: 30px 0;}
.form-group{width: 100% !important;}
.form-group input{display: block;width: 100%;padding: 10px 15px;border-radius: 8px;border: none;margin: 10px 0; border: 1px solid rgba(184, 184, 184, 0.521);box-shadow: 2px 5px 10px #ffffff3a;}
.form-group textarea{display: block;width: 100%;padding: 15px 15px;border-radius: 8px;border: 1px solid rgba(184, 184, 184, 0.521);margin: 10px 0; box-shadow: 2px 5px 10px #ffffff3a;}
.form-group button{border: none;background-color: #41b05a; color: #fff; padding: 8px 25px; border: none; margin-top: 10px; border-radius: 35px; font-size: 20px;font-weight: 200; transition: all ease .5s;}
.main-radio{padding: 8px 0;}
.form-dropdown{padding: 10px; margin-top: 5px; width: 450px; border-radius:8px; border: 1px solid rgb(199, 199, 199);}
.label-2 {width: 220px;display: inline-block;}
.optional{font-size: 14px;color: gray;}


.accordion {background-color: #f0f0f0;color: #000;Cursor: pointer; padding: 25px; width: 100%; border: none; text-align: left;outline: none; font-size: 24px;font-weight: 600px; transition: 0.3s; border-radius: 15px 15px 0 0;}
.accordion.active, .accordion:hover { background-color: #e5f0e4; color: #1a673c; padding: 25px 40px; }
.panel {height: 0px; background-color: rgb(255 255 255);overflow: hidden;color: #000000; box-shadow: 0 5px 37px #85858566; transition: height 4s ease;}
.panel P{font-size: 20px;padding: 25px 40px; }
.acordian-box{margin: 28px 0;}
.acordian-box .accordion{position: relative;}
.acordian-box .accordion span{position: absolute;right: 50px; font-size: 30px;}
.acordian-head{text-align: center;}
.acordian-head h2{font-size: 70px;color: #414141;}


.why-us{background-color: #3e8a4f; position: relative;}

.why-us-heading, .joinus h2{text-align: center;align-items: center;}
.heading2{position: relative;}
.heading2.form-heading h3, .heading2 h1{font-size: 65px; line-height: 65px;}
.heading2 span.highlight{display: inline-block; font-size: inherit; line-height: 60px; text-transform: none; letter-spacing: 0px; font-weight: 700;}

.heading2 span.darkgray, .heading2 small.darkgray{color: #323232!important; display: inline-block; font-size: inherit;}
.heading2 small.green{color: #208135!important; font-size: inherit;}
.heading2 p{font-size: 22px; opacity: 0.8; padding-top: 15px;}
.heading3, .joinus h2{font-size: 50px;color: #565656;margin-bottom: 35px;}
.heading3{margin-bottom: 15px;}
.heading3 span{font-size: 65px;color: #161616;display: block;}
.heading3 small{font-size: 55px; background-color: #fff; color: #41b05a; display: block; border-radius: 5px; padding: 5px 25px; display: inline-block; font-weight: 500;}



.why-choose-box-container{display: flex;justify-content: center;flex-wrap: wrap;gap: 40px;}
.why-choose-box-container .why-us-box{transition: all ease .5s; box-shadow: 0 5px 10px rgba(12, 70, 31, 0.159); position: relative; width: 31%; height: 250px; background-color: #ffffffb1; border: solid 1px #ffffff26; border-radius: 8px; margin-bottom: 50px; display: flex;justify-content: center;align-items: center;padding: 30px;flex-direction: column; visibility: hidden;}
.why-choose-box-container .why-us-box:after{content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(255,255,255,0.6);-webkit-transition: none;  -moz-transition: none; transition: none;}

.why-choose-box-container .why-us-box:hover{margin-top: -15px;}
.why-choose-box-container .why-us-box:hover:after{width: 100%; background-color: rgba(255,255,255,0); -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

.why-choose-box-container .why-us-box:before{content: ""; display: block; width: 100%; height: 200px; position: absolute; top: 0; left: 0; background: url(../images/glow-bg.webp) no-repeat center top; z-index: -1;}
.why-us-heading .infrahub .infra{color: rgb(185, 185, 185);display: inline;}
.why-us-heading .infrahub .hub{color:#1b742f; display: inline;}
.why-us-heading p{width: 70%; margin: 0 auto; font-size: 20px; line-height: 26px; color: #ffffff; padding-bottom: 70px;}
.why-us-box p{text-align: center;font-size: 20px; color: #3c3c3c;}
.why-us-box h3, .promises li h2{text-align: center;font-size: 25px;text-align: center;line-height: 28px;padding-bottom: 15px;color: #447b53; font-weight: 500;}
.why-us-box .overlay-top{width: 80px;height: 80px;background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); border-radius: 50%;position: absolute;top: -40px;z-index: 200;display: flex;justify-content: center;align-items: center;box-shadow: 0 5px 15px #00000013;}
.why-us-box .overlay-top p{font-size: 50px;color: #447b53;font-weight: 600;}
.why-us-box .overlay-top img{width: 50px; height: 50px; margin: 0 auto;}

.horizontal-image{margin-top: -40px; margin-bottom: -30px; display: block; width: 200px;}

.line {
  fill: none;
  stroke: var(--light);
  stroke-width: 2px;
}
.co-ad-flex{padding-top: 50px;}
.co-ad-box{background-color: #f8f8f817;margin-top: 25px;color: #000000;width: fit-content;padding: 50px 25px;backdrop-filter: blur(7px);border-radius: 10px;width: 500px;box-shadow: 0 5px 10px #80808045;}
.co-ad-box h4{font-size: 30px; padding-bottom: 5px;}
.co-ad-box p{font-size: 20px;line-height: 22px;padding: 5px 0; display: flex;}
.co-ad-box p i{margin-right: 10px; color: #27bd49; font-size: 27px;}
.co-ad-box p a{color: #214c9c;}
.who-we-serve{background:#3d3d3d fixed; background-size: cover; padding:50px 0;}
.who-we-serve ul{display:flex;justify-content: center; gap: 0px;flex-wrap: wrap; flex-direction: row; margin-top: 50px;}
.who-we-serve ul li{width:100%; border-top: dashed 1px #5d5d5d; text-align: left; align-items: center; display: flex; justify-content: left; padding: 50px 0; height: auto;}
.who-we-serve ul li h3, .sub_categories_content_details h2{font-size: 40px; font-weight: 600; color: #dbdbdb; margin-top: 0px; margin-left: 0px; display: flex; align-items: center; flex-direction: row; transition: all 0.5s ease-in-out;}
.who-we-serve ul li h3{font-weight: 300; width: 40%;}
.who-we-serve ul li p{opacity: 0.7; transition: all 0.2s ease-in-out;}
.who-we-serve ul li h3 img{margin-right: 10px;}
.who-we-serve ul li p, .sub_categories_content_details p{font-size: 20px; line-height: 26px; color: #e1e1e1; width: 30%; }
.sub_categories_content_details p{width: 100%;}
.who-we-serve ul li:hover{backdrop-filter: blur(5px);}
.who-we-serve ul li:hover h3{margin-left: 10px;}
p.quotemsg{position: absolute; right: 0px; top: 0px; color: #ffffff; opacity: 0.5!important; font-size: 42px; line-height: 40px; font-family: "Quintessential", cursive; width: 400px; font-weight: 100; font-style: italic;}
p.quotemsg:before{content: '"'; display: block; font-size: 150px; color: #000000; position: absolute; margin-left: -55px; margin-top: 20px; opacity: 0.4;}
p.quotemsg strong{font-family: "Quintessential", cursive; text-decoration: underline;}
p.quotemsg.opacity1{opacity: 1!important;}
.who-we-serve ul li:hover p{opacity: 1;}
.who-we-serve ul li img{position: absolute; right: -10px; visibility: hidden; transform: rotate(5deg); opacity: 0; border-radius: 15px; transition: all 0.3s ease-in-out; z-index: 5; box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.who-we-serve ul li:hover img{visibility: visible; opacity: 1; right: 0px; transform: rotate(2deg);}
.who-we-serve ul li h3 img{display: block; opacity: 1;transform: rotate(0deg); visibility: visible; position: static; box-shadow: none;}

.sub_categories p.quotemsg{width: 500px; font-size: 30px;}

.warehouses p{padding-bottom: 15px; margin-bottom: 15px; border-bottom: solid 1px #dbdbdb; position: relative;}
.warehouses p a{position: absolute; right: 0;}
.warehouses p a i{color: #bbbbbb; font-size: 22px;}
.sidebyside{display: flex; justify-content: space-between; align-items: end; padding-top: 30px;}
.sidebyside p.righttext{width: 30%; font-size: 24px;}

.text {
  color: #dfdcff;
  font-size: clamp(2rem, 12rem, 5vw);
  line-height: 1.2;
  box-sizing: border-box;
  padding: 5%;
  width: 100%;
  text-align: center;
  perspective: 500px;
}

.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ibox { width: 80px; height: 80px; background-color: #414141; padding: 5px; backdrop-filter: blur(8px); margin-top:0px; border-radius: 100%; margin-top: 20px; margin-bottom: 15px;}
.ibox img { width: 70px; margin-top: 0px; margin-left: 0px;}


.menu-icon{display: inline-block;  cursor: pointer;  padding: 0px;  top: 17px;  position: relative; z-index: 2;}
.menu-icon .menu { background-color: transparent; border: none;  cursor: pointer;
  display: flex;
  padding: 0;
  outline: none;
}
.menu-icon .line {
  fill: none;
  stroke: #171717;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-icon .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.menu-icon .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.menu-icon .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.menu-icon .opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.menu-icon .opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.navmenu {
  position: fixed;
  top: 0;
  width: 100%;
  visibility: hidden;
   z-index: 5;
}
.menu--active {
  visibility: visible;
}
.menu__brand, .menu__list {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: left;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}
.menu__list {
  margin: 0;
  padding: 15px 20px;
  background: #e9e9e9;
  /* fallback for old browsers */
  background: linear-gradient(to left, #fafafa, #e9e9e9);
  list-style-type: none;
  transform: translate3d(0, -100%, 0);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__list > ul{display: flex; justify-content: left; align-items: flex-start; width: 95%; flex-wrap: wrap; padding:10px 0;}
.menu__list > ul.textlink{border-top: solid 1px #ccc; justify-content: space-between; position: absolute; bottom: 0px; left: 5%; right: 5%; width: auto;}
.menu__list > ul.textlink li{width: 50%; background-color: transparent;}
.menu__list > ul.textlink a{font-size: 22px; margin-right: 20px; color: #202020;}

.menu__list--active {
  transform: translate3d(0, 0, 0);
}
.menu__brand{background: url(../images/menu-bg.webp) no-repeat center bottom;}

.menu__brand--active {
  transform: translate3d(0, 0, 0);
}
.menu__item {
    width: 32%;
    height: 130px;
     display: flex;
    align-items: center;
    justify-content: center;   
    background-color: #fff;
  transform: translate3d(500px, 0, 0);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__item--active {
  transform: translate3d(0, 0, 0);
}
.menu__link {
  display: block;
  position: relative;
  font-size: 42px;
  padding: 15px 0;
  font-weight: 300;
  text-decoration: none;
  color: white;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);  
}
.menu__link img{height: 50px; width: auto; display: block;transition: all 0.3s ease-in-out;}
.menu__item:hover img{margin-top: -10px;}
.navmenu a.menu__link:hover {color: rgb(24, 122, 54) !important; text-decoration: none !important; font-weight: bold !important;}
.navmenu .menu__item:nth-child(1) {
  transition-delay: 0.1s;
}
.navmenu .menu__item:nth-child(2) {
  transition-delay: 0.2s;
}
.navmenu .menu__item:nth-child(3) {
  transition-delay: 0.3s;
}
.navmenu .menu__item:nth-child(4) {
  transition-delay: 0.4s;
}
.navmenu .menu__item:nth-child(5) {
  transition-delay: 0.5s;
}
.navmenu .menu__item:nth-child(6) {
  transition-delay: 0.6s;
}
.navmenu .menu__item:nth-child(7) {
  transition-delay: 0.7s;
}
.navmenu .menu__item:nth-child(8) {
  transition-delay: 0.8s;
}
.navmenu .menu__item:nth-child(9) {
  transition-delay: 0.9s;
}
.textlink li{justify-content: flex-start; height: auto; }
.textlink li.righttext{text-align: right; padding-top: 10px;justify-content: flex-end;}
.iconlink{text-align: center; gap: 10px;}
.menu__list > ul.textlink a{cursor: pointer;}

/* Horizontal scroll */


#horizontal-scoll {
  padding: 10px 0px;
  width: 100%;
  margin: 30px auto 0 auto;
  position: relative;
}

.horizontal-scoll-wrapper {
  overflow: hidden;
  height: 700px;
}

.horizontal {
  display: flex;
  height: 100%;
}

.horizontal > div {
  display: flex;
  flex-shrink: 0;
  padding: 0 5px;
}

.horizontal > div:first-child {
  padding: 0;
  margin-left: 40px;
}

.horizontal > div:last-child {
  padding: 0;
  margin-right: 40px;
}

.horizontal .card {align-items: stretch; width: 1200px; padding: 40px; background: #fff; display: flex; flex-direction: row; align-items: center; margin-right: 50px;position: relative; border-radius: 20px;}
.horizontal .card img{width: 50%; height: 100%; border-radius: 40px;}
.mission-container{border-radius: 20px; margin: 0 2%; width: 96%; margin-top:0px;  overflow: hidden;}
.mission-container .container{min-height: 80vh; width: 100%; display: flex; justify-content: space-between; align-items: end; padding-top: 10vh;}

.horizontal .card > div, .about-mission{padding: 25px 0; width: 40%; margin-left: 10%;}
.about-mission{height: 800px;}
.horizontal .card > div{margin-left: 25px; width: 50%; position: relative;}
.horizontal .card > div p{font-size: 18px!important;}
.card-content h2, .about-mission h2 {font-size: 50px; color: #434343; font-weight: 400; line-height: 48px;}
.about-mission h2 span.highlightbg{display: inline-block; background-color: #208135; margin-top: 5px; color: #fff; font-size: 60px; line-height: 60px; font-family: 'Exo'; padding: 8px 15px;}
.about-mission h2 span.extralarge{display: block; color: #208135; font-size: 155px; line-height: 150px; font-weight: 700; padding: 10px 0; font-family: 'Exo';}
.about-mission h2 span.highlighttext{color: #8b8b8b; font-size: 45px; font-family: 'Quintessential'; font-style: italic;}
.about-mission h2 span.highlighttext u{color: #000000;font-family: 'Quintessential';}
.card-content h2 small{font-size: 24px; display: block;}

.about-mission h2 small{font-size: 30px;}
.about-mission h2 i{font-style: normal; color: #929292;}
.card-content p, .about-mission p{font-size: 18px; margin-top: 20px;}
.about-mission p{font-size: 24px; font-weight: 400; width: 80%; color: #4f4f4f;}
.card-content h3, .about-mission h3{font-size: 28px; margin-top: 25px; color: #5e5e5e; font-weight: 400;}
.card-content h3:before, .card-content p:before{content: ""; display: block; width: 60px; height: 4px; background-color: #a9a9a9; margin-bottom: 20px;}
.card-content p strong, .card-content h3 strong{font-weight: 600; color: #208135; }
.mission-container .strength-details{width: 25%; margin-right: -40px; bottom: 140px; position: absolute; left: 40%; z-index: 2; display: flex; align-items: center; min-height: 200px; backdrop-filter: blur(8px); background-color: #ffffffa5; box-shadow: 5px 0px 18px rgba(0,0,0,0.2);}
.mission-container .strength-details:before, .horizontal .card > div:before{content: ""; display: block; width: 80px; height: 60px; position: absolute; right: 112px; top: -70px; background-color: #208135; border-radius: 15px 15px 0px 15px;}
.horizontal .card > div:before{left: -50px; right: auto;}

.challenges{background: url(../images/pattern-bg.webp) no-repeat center center #e9ebe4!important; background-size: cover; position: relative;}
.challenges:before{content: ""; display: block; width: 100%; height: 100%; background: url(../images/line-drawing-workers.webp) no-repeat bottom left; position: absolute; top: 0px; left: 0px; z-index: -1;}

.technologu-collab{background: url(../images/puzzle-bg.webp) no-repeat bottom left #e2e2e2!important;}

.about-rightimg{width: 40%; margin-top: 50px; border-radius: 15px 0 0 0;}

.promises{width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 50px; gap: 20px;}
.promises li{width: 25%; text-align: center;}
.promises li img{width: 120px;}
.promises p{text-align: center; font-size: 18px; padding: 5px 15px;}

.mission-container .about-text{width: 85%;}
.mission-container .about-text strong{color: #208135;}
.mission-container .quotemsg{position: relative!important; width: 400px; color: #858585; margin-left: 60px; font-size: 42px; line-height: 45px; opacity: 1!important;}
.mission-container.corevalue{background-color: #f7f7f7; border-radius: 0px; width: 100%!important; margin-left: 0px; padding-top: 50px;}

.corevalue .container{justify-content: center; align-items: flex-start; padding-top: 0; min-height: 50vh;}
.corevalue .about-mission{margin-left: 0%; width: 100%; text-align: center;}
.corevalue h4{font-size: 120px; font-weight: 300; filter: invert(1); mix-blend-mode: difference;}
.bottom-corevalue-img{width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 50px;}
.bottom-corevalue-img img{width: 500px; margin-bottom: 20px; margin-top: -200px; border-radius: 20px; position: relative; z-index: -1;}

.greenshape1{position: absolute; width: 100px; height: 100px; background-color: #509b61; border-radius: 20px 20px 0 20px; z-index: 1; top: 80px; left: 55.5%; display: none;}
.inner-hubhead {margin-top: 0px; width: 650px;}
.inner-hubhead small{font-size: 45px; line-height: 45px; font-weight: 300; display: block; letter-spacing: 0px;}
.inner-hubhead h2{line-height: 67px;}
.inner-hubhead ul{display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20px; gap: 10px;}
.inner-hubhead ul li{font-size: 16px; border: solid 2px #575757; padding: 10px 20px; border-radius: 30px; background-color: #ffffffc7;}

.about-subHub{position: relative;}
.about-subHub-left{width: 50%; min-height: 50vh;}
.about-subHub-left h2{font-size: 30px; line-height: 34px; font-weight: 500; margin-bottom: 20px; margin-top: 50px;}
.about-subHub-left p{font-size: 18px; line-height: 28px; margin-bottom: 20px;}

.about-subHub-right{position: absolute; width: 45%; height: 100%; right: 0; top: 0; padding: 50px 30px; border-radius:0 0 0 30px;}
.about-subHub-right p.quotemsg{position: relative; margin: 50px;  font-size: 30px; line-height: 35px; width: 80%;}
.about-subHub-right ul {display: flex; margin-left: 50px;}
.about-subHub-right ul li{font-size: 60px; min-width: 200px; font-weight: 300; color: #fff; margin-right: 20px; font-weight: 600; }
.about-subHub-right ul li span{font-size: 20px; font-weight: 300; display: block;}
.prochem-content{background-color: #134d6d!important;}
.buildr-content{background-color: #295a34!important;}
.metal-content{background-color: #4d4d4d!important;}
.interio-content{background-color: #9f856a!important;}
.decor-content{background-color: #525252!important;}
.dark-content{background-color: #525252!important;}
.light-content{background-color: #e1dcd4!important;}
.tools-content{background-color: #2c3d79!important;}
.decor-content-yellow{background-color: #ecebe9!important;}
.finance-content-orange{background-color: #a15619!important;}

.prochem-content.about-subHub-right:after{display: block; content: ""; background: url(../images/house-protection.webp) no-repeat; position: absolute; width: 428px; height: 290px; bottom: 0px; right: 0;}
.waterhub-right.about-subHub-right:after{display: block; content: ""; background: url(../images/water-drop.webp) no-repeat; position: absolute; width: 313px; height: 445px; bottom: 30px; right: 0;}
.interiohub-right.about-subHub-right:after{display: block; content: ""; background: url(../images/plywood-right.webp) no-repeat; position: absolute; width: 626px; height: 417px; bottom: 0px; right: 0;}
.decorhub-right.about-subHub-right:after{display: block; content: ""; background: url(../images/single-mattress.webp) no-repeat; position: absolute; width: 400px; height: 519px; bottom: -50px; right: 0;}
.buildr-content.about-subHub-right:after{display: block; content: ""; background: url(../images/buildr-right.webp) no-repeat; position: absolute; width: 601px; height: 300px; bottom: -50px; right: 0;}
.metal-content.about-subHub-right:after{display: block; content: ""; background: url(../images/metal-right.webp) no-repeat; position: absolute; width: 503px; height: 260px; bottom: -50px; right: 0;}
.tools-content.about-subHub-right:after{display: block; content: ""; background: url(../images/tools-right.webp) no-repeat; position: absolute; width: 368px; height: 480px; bottom: 0px; right: 0;}
.teknohub-content.about-subHub-right:after{display: block; content: ""; background: url(../images/tekno-right.webp) no-repeat; position: absolute; width: 516px; height: 370px; bottom: -50px; right: 0;}
.finance-hub-content.about-subHub:after{display: block; content: ""; background: url(../images/finance-right.webp) no-repeat; position: absolute; width: 910px; height: 400px; top: -20px; right: 0;}
.chemdrums{width: 200px; height: 645px; background: url(../images/chemical-drums.webp) no-repeat; position: absolute; left: 0; margin-top: -50px;}
.plywoods{width: 493px; height: 795px; background: url(../images/plywood-left.webp) no-repeat; position: absolute; left: 0; margin-top: -50px; z-index: -1;}


.subhub-video{position: relative; padding-top: 100px;}
.video-box{width: 100%; height: auto; border-radius: 30px; background-color: #ffffff; overflow: hidden; position: relative; top: 50px; left: 0%;}
.video-box video, .video-box img{position: relative; width: 100%; height: 100%; object-fit: cover; margin-bottom: -5px;}
.image-map{width: 1500px; margin: 0 auto; margin-bottom: 50px; position: relative; border-radius: 0 0 30px 30px; overflow: visible;}
.imagepoints{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.imagepoints span{width: 50px; height: 50px; display: flex; justify-content: center; cursor: pointer; transform: translateX(-50%); line-height: 47px; text-align: center; border-radius: 50px; color: #1a673c; font-size: 30px; font-weight: 300; background-color: #ffffffc0; backdrop-filter: blur(5px); position: absolute; left: 100px; top: 200px; box-shadow: 0px 5px 15px rgba(0,0,0,0.1); border: solid 1px #e8e8e8; transition: all 0.2s ease-in-out;}
.imagepoints span b{font-weight: 300;}
.imagepoints .roof{left: 55%; top: 110px;}
.imagepoints .doorframe{left: 57%; top: 70%;}
.imagepoints .decorative{left: 31%; top: 40%;}
.imagepoints .ceiling{left: 70%; top: 45%;}
.imagepoints .floor{left: 60%; top: 985px;}
.imagepoints .wall{left: 980px; top: 647px;}
.imagepoints span small{display: none;}
.imagepoints span:hover{width: 200px; padding-left: 5px;}
.imagepoints span:hover small{display: block;}
.imagepoints span:hover b{display: none;}

.interior-points-content{position: absolute; right: 20px; bottom: 5vh; background-color: #ffffff; width: 350px; height: 90vh; display: none; border: solid 1px #dbdbdb; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; border-radius: 10px;}
.interior-points-content.show{display: block;}
.interior-points-content h3{font-size: 40px; font-weight: 300; padding: 5px 20px 0 20px; color: #1a673c;}
.interior-points-content p{margin: 0px 20px 20px 20px; font-size: 18px; padding-bottom: 10px; border-bottom: solid 1px #dbdbdb;}
.interior-points-content ul{display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px;}
.interior-points-content ul li{width: 45%; padding-bottom: 10px; min-height: 100px; border: solid 1px #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden;}

.interior-points-content ul li img{width: 100%;}
.interior-points-data{display: none;}
.interior-points-data.active-content{display: block;}

.buildingpart{width: 100%;}

.close-popup{position: absolute; cursor: pointer; width: 50px; height: 40px; background-color: #fff; right: 4px; top: 4px; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 300;}
.changeposition{position: fixed;}

.smallbtn{width: 200px;}
.mediumbtn{width: 240px;}
.sub_categories{background-color: #252525; padding: 120px 0 80px 0; margin-top: -100px;}
.sub_categories_panel {display:flex; flex-direction:column; width:100%;  height:auto; gap: 20px; margin-top: 50px; overflow: hidden; flex-direction: wrap;} 
.sub_categories_content {width:100%; height: 500px; transition: height 0.5s; overflow: hidden; position:relative; display:flex; flex-direction:column;  justify-content:center;  cursor:pointer;  background-color: #d5d5d5;  border-radius: 20px; margin-bottom: 10px;}
.sub_categories_box{width: 100%; height: auto; padding-top: 50px; display: flex; flex-direction: row; align-items: center; justify-content:center; gap: 25px; flex-wrap: wrap; z-index: 2; position: relative;}
.sub_categories_box .sub_categories_content{width: 32%; height: 300px; background-color: #f7f7f7; border-radius: 10px; margin: 0;}
.sub_categories_box .sub_categories_content:after{display: none;}
.productslist .sub_categories_content{width: 32%; height: auto!important; min-height: 350px; justify-content: flex-start;}
.sub_categories_content_details {padding:50px; background:transparent; position: absolute; z-index: 1; top: 20%; width: 40%;}

.sub_categories_box .sub_categories_content_details{width: 100%!important; padding: 20px 25px; overflow: hidden; position: static;}
.sub_categories_box .sub_categories_content_details h2{font-size: 28px;}
.sub_categories_box .sub_categories_content_details p{color: #333333; font-size: 16px; line-height: 20px; margin-top: 10px;}
.productslist .sub_categories_content_details{backdrop-filter: blur(10px); position: relative; top: 0;left: 0;}
.productslist .sub_categories_content h2{line-height: 22px; font-size: 22px; font-weight: 400; color: #323232;}

.productslist img{width: 100%; height: auto; object-fit: cover;}
.sub_categories_expanded {height: 500px !important;}
  
.sub_categories_expanded h2{color: #fff; font-weight: 600;}
.sub_categories_expanded p{opacity: 1;}
.sub_categories_content:after {        
        content: '';
        background: #04040459;
        background: linear-gradient(270deg,rgba(0, 0, 0,0) 0%, rgba(0, 0, 0, 0.7) 100%);
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
        pointer-events:none;        
    }

.sub_categories_content:nth-child(even):after { background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);}

.sub_categories_content:nth-child(even) .sub_categories_content_details { width: 40%; right: 0;}

.sub_categories_content_details.active {opacity: 1; transition: opacity 0.5s 0.4s;}

   .svgbackground{position: relative; width: 100%;}
    .svgbackground svg{position: absolute; top: 0; right: 0; width: 100%; height: 500px; z-index: -1;}

    .bottompartners{opacity: 0.8; text-align: center;}
    .bottompartners img{filter: grayscale(100%); height: 50px; margin: 10px;}
    .bottompartners img:hover{filter: grayscale(0%);}

    .centerbtn{display: flex; align-items: center; justify-content: center; padding: 20px 0; width: 100%;}


	#compassContainer{width: 800px; height: 800px; margin: 0 auto; padding: 0%; position: relative; display: flex; justify-content: center; align-items: center; }
	#VDABcompass{width: 250px; height: 250px;}
	.circle{width: 250px; height: 250px; background-color: #253878; border: 1px solid #FFFFFF; position: absolute; border-radius: 50%; text-align: center; color: #FFFFFF; padding: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
    .circle h3{font-weight: 400; font-size: 20px; margin-bottom: 10px;}
	.toolshubcenter{position: absolute; width: 200px; height: 200px; background: url(../images/short-hub-logo.webp) no-repeat center center #ffffff; box-shadow: 5px 15px 30px rgba(0,0,0,0.2); background-size: cover; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1vw solid #8f96a1; border-radius: 50%; margin-left: 25px; margin-top: 25px;}
    #c0{background-color: #004b8d;}
    #c1{background-color: #003d73;}
    #c2{background-color: #002e5c;}
    #c3{background-color: #002045;}
    #c4{background-color: #3d649a;}

    .plumbing-pipes{display: block; margin: 0 auto; width: 520px; position: relative; z-index: 2;}
    .hdpepipe{background: url(../images/hdpe-pipe.webp) no-repeat left bottom; padding-top: 0px;}

    .our-team{padding: 50px 0; background: url(../images/green-shape-bg.webp) no-repeat right center; height: 100vh; overflow: hidden;}

    .our-team ul{width: 100%; display: flex; align-items: flex-start; gap: 35px; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 100px;}
    .our-team ul li{background-color: #dbdbdb; position: relative; width: 450px; border-radius: 40px 0 40px 0;}
    .our-team ul li img{float: right; max-width: 100%;}
    .our-team ul li h3{position: absolute; left: 0px; bottom: 0px; background-color: #fff; padding: 20px; font-size: 24px; font-weight: 500; width: 100%; box-shadow: 0 5px 14px rgba(0,0,0,0.1); border-bottom: solid 5px #208135;}
    .our-team ul li h3 span{color: #1b742f; display: block; font-size: 14px; text-transform: uppercase; font-weight: 300; letter-spacing: 1px;}

    .msg-chairmandesk{width: 100%; display: flex; align-items: self-start; justify-content: center; margin-top: 50px; position: relative;}
    .msg-chairmandesk img{width: 30%;}
    .msg-chairmandesk p{width: 550px; height: 500px; font-size: 24px; display: block; position: relative;padding: 50px; border-radius: 15px; z-index: 1;}
    .msg-chairmandesk p::before{content: ""; display: block; background: url(../images/comment-box.webp) no-repeat top center; background-size: cover; width: 689px; height: 533px; position: absolute; left: 0px; top: 0px; transform: translate(-15%, 0%); z-index: -1;}
    .msg-chairmandesk p span{display: block; color: #2b7c3e; font-weight: 400; padding-top: 15px;}
    .msg-chairmandesk p span small{display: block; color: #696969; font-size: 16px;}
.mobonly{display: none;}
.date-timeline-section{width: 100%; margin: 0 auto; padding-bottom: 0px; background: url(../images/history-bg.webp) no-repeat center bottom; background-size: cover; padding-bottom: 100px;}
.date-timeline-section .rows{width: 800px; margin: 0 auto; position: relative;}
.storycircle {
  width: 750px;
  height: 750px;
  margin: 0 auto;
  background: transparent;
  border-radius: 50%;
  color: #fff;
  position: relative;
  border: 15px solid #dcdcdc97;
  will-change: transform;
}

.text-list{width: 50%; position: absolute; margin-top: 160px; z-index: 2; left: 25%; top: 20%; }

.st, .ry{font-size: 100px; position: absolute; top: 200px; left: 0; color: #d3d3d38e; font-size: 20vw; width: 36%; text-align: center; font-weight: 400;}
.ry{right: 0; left: auto;}

@media only screen and (max-width: 1400px) {
  .circle {
    width: 540px;
    height: 540px;
  }
}
@media only screen and (max-width: 767px) {
  .circle {
    width: 300px;
    height: 300px;
    left: -110px;
  }
}
.date-list-row,
.dots-list-row {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dots {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #8ba88f;
  border-radius: 50%;
  display: inline-block;
  transition: ease 0.4s;
  will-change: transform;
}
@media only screen and (max-width: 767px) {
  .dots {
    width: 12px;
    height: 12px;
  }
}
.dots.active {
  background-color: #15a148;
}

.date-list {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #330662;
}
.date-list .inner-text {
  position: relative;
  display: inline-flex;
  gap: 10px;
}
.date-list .inner-text span {
  display: inline-block;
}
.date-list .inner-text .date-text {
  font-weight: 900;
  transition: ease 0.4s;
  color: #8ba88f;
  will-change: transform;
  transform-origin: center;
}
@media only screen and (max-width: 767px) {
  .date-list .inner-text .date-text {
    font-size: 12px;
  }
}
.date-list .inner-text .text {
  width: 100px;
  word-break: break-word;
  position: absolute;
  left: 80px;
  opacity: 0;
  transition: ease 0.4s;
  color: #330662;
}
.date-list.active .date-text {
  color: #41b05a;
  margin-left: 63px;
  transform: scale(2.4);
}
@media only screen and (max-width: 767px) {
  .date-list.active .date-text {
    transform: scale(1.8);
  }
}

@media only screen and (max-width: 767px) {
  .text-list {
    width: 100%;
    padding: 0 30px;
    text-align: right;
    margin-top: -140px;
  }
}
.text-list .out-text {
  max-width: 400px;
  display: none;
  font-size: 30px;
}

.text-list .out-text span{display: block; padding-top: 10px; color: #208135; font-size: 20px;}

.text-list .out-text.active {
  display: block;
}