@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
html {
  scroll-behavior: smooth;
}
body::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar {
  width: 0;
}
*{margin:0;padding:0;box-sizing:border-box}



body{
background: #fff;
font-family: "Inter", sans-serif;
overflow-x:hidden;
color: #000;
}

.contact_banner h1{
  text-align: center;
  color: #282828;
  font-size: 40px;
}

html, body {
  overflow-x: hidden !important;
}

h1,h2,h3,h4,h5,h6{
    font-family: "Funnel Display", sans-serif;
}

.upper_nav{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}
.sub-heading{
color: #c7c7c7 !important;
}
.upper_nav nav{
  color: var(--font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  width: 100%;
}

.logo{
    width: 250px;
  }
  .logo img{
    width: 70%;
  }
  .button-contact{
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: end;
 
  }

    .button-contact a{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 10px;
      border: 1px solid rgb(236, 236, 236);
      color: #000;
      cursor: pointer;
      height: 33px;
      width: 33px;
      background-color: rgb(247, 247, 247);
      margin-left: 10px;
    }
     .button-contact a svg{
      width: 14px;
      height: 14px;
      stroke: rgb(1, 1, 1);
     }
     .button-contact a img{
      width: 14px;
      height: 14px;
  
     }

  .menu ul{
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: center;
    font-size: 14px;
    list-style-type: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: rgb(21, 21, 21);
  }
   .menu ul li{
    cursor: pointer;
   }
.menu ul li a{
  color: #000000;
}

/* hamburger */

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:26px;
  height:3px;
  background:#060259;
}

/* close btn */

.menu-close{
  display:none;
}

/* mobile btn */

.mobile-btn{
  display:none;
}

.mobiile-logo{
  display: none;
}

.crp , .getintoch{
  display: none;
}

.deskcnt{
    display: flex;
  }
  .mobcnt{
    display: none !important;
  }

  .und{
    font-weight: 900 !important;
    text-transform: uppercase;
  }
  .hellop{
    margin-bottom: 20px !important;
    font-size: 20px !important;
    color: #c7c7c7 !important;
  }
  .hellop span{
    color: #000000;
    font-weight: 700;
  }

  .design-show{
padding-bottom: 60px !important;
  }

  .wspm{
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .wspm img{
width: 40px;
margin-top: 3px;
  }
/* ================= MOBILE ================= */

@media (max-width:768px){


  .deskcnt{
    display: none !important;
  }
  .mobcnt{
    display: flex !important;
  }

  .hamburger{
    display:flex;
    opacity: 1;
  }

  .button-contact{
    display:none; /* hide desktop button */
  }

  .menu{
    position:fixed;
    top:0;
    right:-100%;
    width:100%;
    min-height:100vh;
    backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
    background:rgba(255, 255, 255, .6);
    padding:90px 30px;
    transition:.4s;
    z-index:99999;
    overflow: auto;
  }

  .menu.active{
    right:0;
  }

  .menu ul{
    flex-direction:column;
    align-items: flex-start;
    gap:21px;
    font-size:17px;
    color: #000000  ;
    font-weight: 400;
    font-size: 17px;
    padding-top: 30px;
  }

  .getintoch ul{
    padding-top: 22px ;
  }
.gstin{
    padding-top: 32px !important;

}
.about_us_content p{
  margin-top: 16px !important;
  margin-bottom: 13px !important;
}
  .menu-close{
    display:block;
    position:absolute;
    top:36px;
    right:30px;
    font-size:26px;
    cursor:pointer;
    color: #000;
  }
  .about_us_content a{
    display: inline-block;
    margin-top: 10px;
  }

  .mobile-btn{
    display:flex;
    margin-top:30px;
    justify-content:flex-start;
  }
  .mobile-btn a{
    width: 100%;
    font-size: 20px;
    background-color: #ffffff !important;
    color: #000000;
    margin-top: 16px;
    padding: 13px;
  }
   .mobile-btn a svg{
    height: 22px !important;
    width: 22px !important;
    background-color: #ffffff !important;
    stroke: #000000;

  }
  .upper_nav nav{
    padding: 20px;
  }
  .mobiile-logo{
    width: 165px !important;
    display: block;
    margin-bottom: 20px;
    position: absolute;
    top: 25px;
    left: 25px;
  }

  .getintoch h3{
    font-size: 18px;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    margin-top: 30px;
  }
    .getintoch h4{
    font-size: 18px;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    margin-top: 30px;
  }
  .getintoch ul li{
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 23px;
  }
    .getintoch ul li svg{
      min-width: 20px;
      width: 20px;
    }
    .getintoch ul {
      gap: 17px !important;
    }
    .getintoch span{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      width: 40px;
      border-radius: 9px;
      background-color: #ffffff;
      margin-top: 18px;
    }
      .getintoch span svg {
        stroke: #060259;
        margin-top: 3px;
      }
      .getintoch span img{
        width: 20px;
      }

      .crp{
        font-size: 12px;
        color: rgba(255, 255, 255, .6);
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 20px;
        left: 0;
        display: block;
      }
      .getintoch{
        display: block;
      }
  
}




  h1{
     font-family: "Urbanist", sans-serif;
     color: rgb(32, 32, 32);
     text-align: center;
     font-size: 38px;
     line-height: 54px;
     padding-bottom: 80px;
     padding-top: 60px;
    width: 700px;
  }
  .hero_bottom p{
    font-size: 16px;
    text-align: center;
     color: rgb(32, 32, 32); 
     line-height: 24px;
     margin-bottom: 20px;
  }
  .hero_bottom{
    padding-top: 70px;
    z-index: 999;
    position: relative;
  }

  .hero_bottom a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    
    font-size: 13px;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 100px;
  }
    .hero_bottom a.fill{
      background-color: black;
      color: #ffffff;
      border: 1px solid #000;
    }
    .hero_bottom a.outline{
      background-color: transparent;
      color: #767676;
      border: 1px solid #d8d8d8;
    }

    .hero_bottom a svg{
      width: 15px;
      height: 15px;
    }
    .hero_bottom div{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }

    a{
      text-decoration: none !important;
    }

    @media(max-width:800px){
      .tag{
        top: -42px !important;
      }
      h1{
        line-height: 30px;
        font-size: 26px;
        padding-bottom: 80px;
      }
      h1 br{
        display: none;
      }
      .hero_bottom p br{
        display: none;
      }
       .hero_bottom p {
        margin-bottom: 30px;
       }
       .hero{
        padding-left: 20px;
        padding-right: 20px;
        background-position: center center !important;
       }
       .hero_bottom{
        padding-top: 50px;
       }

       .split-done{
        width: 300px;
       }
     

       .logo img{
        width: 60%;
       }
       .hero_bottom p{
        font-size: 15px;
       }
       .vision-section{
        flex-direction: column;
       }
       .vision-content{
        padding: 0 !important;
       }
       .vision-content h2{
        font-size: 24px !important;
        line-height: 34px !important;
        margin-top: 100px !important;
       }

       .about_us{
        padding: 0 !important;
       }
       .about_us_content{
        padding: 0 20px !important;
     background: #ffffff;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 72%, rgba(255, 255, 255, 0.54) 100%);
       }
       .about_us_images{
        height: 35vh !important;
       }
       .about_tag{
        display: none !important;
       }
       .mbns{
        display: none;
       }

    }


    /* ===== HERO TEXT ANIMATION PREP ===== */

.h1-word{
  display:inline-block;
  transform:translateY(60px) rotate(6deg);
  opacity:0;
  will-change:transform;
}
.split-done{
  font-weight: 600 !important;
}

.hero_bottom p,
.hero_bottom button{
  opacity:0;
  transform:translateY(40px);
}
 




/* ================= CIRCLE LOADER ================= */

#loader{
 position:fixed;
 inset:0;
 background:#ffffff;
 z-index:9999;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
}

/* expanding circle */
.loader-circle{
 position:absolute;
 width:250px;
 height:250px;
 border-radius:50%;
 background:#100531;
 box-shadow:0 0 60px rgba(1, 17, 46, 0.35);
 animation:heartbeat 1.2s ease-in-out infinite;
}

/* logo fixed center — NOT scaling */
.loader-logo-img{
 position:absolute;
 width:160px;
 height:160px;
 object-fit:contain;
 z-index:2;
}

/* heartbeat popup */
@keyframes heartbeat{
 0%{transform:scale(1)}
 25%{transform:scale(1.08)}
 40%{transform:scale(1)}
 60%{transform:scale(1.12)}
 100%{transform:scale(1)}
}




/* ================= HERO ================= */



.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  z-index:999;
  visibility:hidden;
  overflow:hidden;

background-size: cover;
background-position: top;
flex-direction: column;
}







.hero-image-wrapper{
 position:relative;
  width:clamp(140px,28vw,210px);
  aspect-ratio:1/1;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.15));
   z-index:2;
}

.card{
 position:absolute;
 width:100%;
 height:100%;
 border-radius:16px;
 transform: rotate(-50deg);
}

.card img{
 width:100%;
 height:100%;
 object-fit:cover;
 border-radius:16px;
 
}

.tag{
 position:absolute;
 top:-58px;
 left:10px;
 padding:6px 10px;
 border-radius:999px;
 font-size:10px;
 font-weight:400;
 color:#fff;
 opacity:0;
 transform:translateY(40px) scale(.8);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.tag.blue{background:#060259}
.tag.green{background:#0e6de1}
.tag.purple{background:#286507}
.tag.pink{background:#360356}

.tag.dyellow{background:#a5e10e}

.tag.orange{background:#e1460e}
.tag.red{background:#e20303}
.tag.pink{background:#9e057d}


@media(max-width:700px){
 .hero .card:nth-child(n+5){display:none}
}

/* ================= ABOUT ================= */

.about_us{
 min-height:100vh;
 display:flex;
 justify-content:space-between;
 padding:100px;
 gap:4vw;
 background:#ffffff;
}

.about_us_content{width:60%;position: relative;z-index: 99;}
.about_us_images{width:55%;height:65vh;position:relative}

.about_card{
 position:absolute;
 width:clamp(180px,18vw,340px);
 aspect-ratio:1/1;
 border-radius:14px;
 left:50%;
 top:80%;
 transform:translate(-50%,-50%);
}

.about_card img{
 width:100%;
 height:100%;
 object-fit:cover;
 border-radius:14px;
}

.about_tag{
 position:absolute;
 top:-44px;
 left:8px;
 font-size:9px;
 padding:5px 8px;
 border-radius:999px;
 font-weight:400;
 opacity:0;
 transform:translateY(20px) scale(.8);
}


.about_us_content h2{
  font-size:45px;
  color: #000000;
   font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 55px;

}
.about_us_content h2 aside{
  color: #060259;
  display: inline;
  padding: 0 10px;
  font-weight: 600;
}

.about_us_content p{
  font-size: 16px;
  color: #3d3d3d;
  line-height: 30px;
  line-height: 30px;
  margin-top: 30px;
  margin-bottom: 40px;
}

.about_us_content a{
border: none;
background-color: #000000;
color: #ffffff;
padding: 10px 20px;
font-size: 13px;
border-radius: 100px;
}




@media(max-width:800px){
 .about_us{flex-direction:column;}
 .about_us_content,.about_us_images{width:100%}
 .about_us_images{height:55vh}
 .about_us_content h2
 {
  line-height: 40px;
  font-size: 28px;
 }
 .about_card{
  top: 38%;
 }

 .wrapper_ser_cards{
  flex-wrap: nowrap !important;
 }
 .header_serv_cards p{
  font-size: 13px !important;
 }
 .header_serv_cards h4{
  font-size: 15px !important;
 }
}

@media(min-width:1800px){
  .about_us_content h2{
    font-size: 60px;
    line-height: 84px;
  }
  .about_us_content{
    width: 38%;
  }
  .about_card{

 width:clamp(180px,18vw,450px);

}
}


/* ===== FALLING STARS BACKGROUND ===== */



/* stars layer */
.hero::before{
  content:"";
  position:absolute;
  inset:-200%;
  z-index:0;

  background-image:
    radial-gradient(3px 3px at 20px 30px, #060259, transparent),
    radial-gradient(3px 3px at 120px 80px, #060259, transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, #060259, transparent),
    radial-gradient(3px 3px at 300px 40px, #060259, transparent),
    radial-gradient(1.5px 1.5px at 400px 120px, #060259, transparent),
    radial-gradient(3px 3px at 600px 200px, #060259, transparent);

  background-size:600px 600px;
  opacity:.9;

  animation:starsFall 18s linear infinite;
}

/* second layer — depth feel */
.hero::after{
  content:"";
  position:absolute;
  inset:-200%;
  z-index:0;

  background-image:
    radial-gradient(2px 2px at 60px 90px, #8fd3ff, transparent),
    radial-gradient(2px 2px at 180px 40px, #8fd3ff, transparent),
    radial-gradient(1.5px 1.5px at 260px 160px, #8fd3ff, transparent),
    radial-gradient(2px 2px at 420px 60px, #8fd3ff, transparent);

  background-size:700px 700px;
  opacity:.25;

  animation:starsFall 28s linear infinite;
}

@keyframes starsFall{
  from{ transform:translateY(-25%); }
  to{ transform:translateY(25%); }
}

.rise-word{
  display:inline-block;
  will-change: transform, opacity;
}






/* ================= DESIGN SHOW ================= */

.design-show{
  padding:8vw 6vw;
  background:#ffffff;
  text-align:center;
  overflow:hidden;
}

.design-show-img{
  width:100%;
  height: 450px;
  object-fit: cover;
  margin-top:40px;
  border-radius:22px;
  overflow:hidden;
  position: relative;
}

.design-show-img img{
  width:100%;
  height:450px;
  display:block;
  transform-origin:center;
  object-fit: cover;
}

/* word span helper */
.word-rise{
  display:inline-block;
  will-change:transform, opacity;
}


.sub-heading{
color: #3e3e3e;
font-size: 18px;
font-family: "Urbanist", sans-serif;
font-weight: 600;
text-align: left;
margin-bottom: 10px;

}


.heading-design-show{
  color: #000000;
  font-size: 45px;
  text-align: left;
font-family: "Urbanist", sans-serif;
font-weight: 600;
line-height: 65px;
}

.heading-design-show2{
  color: #000000;
  font-size: 45px;
  text-align: left;
font-family: "Urbanist", sans-serif;
font-weight: 600;
line-height: 55px;
}



.heading-clients{
 color: #000000;
  font-size: 45px;
  text-align: left;
font-family: "Inter", sans-serif;
font-weight: 600;
line-height: 55px;
}

.heading-design-show b{
  display: block;
}
.heading-design-show2 b{
  display: block;
}

.design-show{
  padding:100px;
}

.design-show-img-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}

.design-show-img{
  width:100%;
  display:block;
  transform-origin:center;
}

/* popup tags right side */

.ds-tags{
  position:absolute;
  right:30px;
  top:30px;
  transform:translateY(-50%);
  display:flex;

  gap:14px;
}

.ds-tag{
  background:#000000;
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:400;
  opacity:0;
  transform:translateX(40px) scale(.8);

}


/* ================= CLIENTS ================= */

.clients{
  padding:8vw 6vw;
  padding-top: 100px;
  text-align:center;
  overflow:hidden;
}

.clients-marquee{
  width:100%;
  overflow:hidden;
  margin-top:40px;
}

.clients-track{
  display:flex;
  gap:60px;
  width:max-content;
  animation:clientsMarquee 15s linear infinite;
}

.clients-track img{
  width:120px;
  height:auto;
  opacity:.7;
  filter:grayscale(1);
  transition:.3s;
}

.clients-track img:hover{
  opacity:1;
  filter:none;
  transform:scale(1.08);
}

/* marquee move */

@keyframes clientsMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}



/* ================= NEW SECTION ================= */

.new-section{
  padding:8vw 6vw;
  padding-top: 0 !important;
}

.new-section > div{
  display:flex;
  align-items:center;
  flex-direction: column;
  gap:4vw;
}

.new-section-images{
  width:100%;
  height:60vh;
  position:relative;
}

.new-section-images img{
  position:absolute;
  width:clamp(160px,18vw,220px);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px;
  left:50%;
  top:55%;
  transform:translate(-50%,-50%);
  box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.new-section-text{
  width:100%;
}


.new-section-text h4{
  font-size: 40px;
  line-height: 50px;
  color: #000000;
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  padding-top:280px;
}
.new-section-text h4 span{
  font-size: 40px;
  line-height: 50px;
  color: rgba(0, 0, 0 , .5) !important;
}


.cnt_card_sec{
  padding: 100px;
  padding-top: 0px;

}
.cnt_card_sec section{
  border: 1px solid rgb(240, 240, 240);
  border-radius: 15px;
  padding: 50px;
  background-color: rgb(252, 252, 252);
}

.cntheros{
  height: auto !important;
  background-image: url(./bg.png);
}
.cntheros h1 {
  margin-top: 100px;
  margin-bottom: 0;

}
.cardwraps{
  background-color: transparent;
  border: none !important;
  padding: 0 !important;
  display: flex;
  gap: 15px;
}

.cardwraps div{
border: 1px solid rgb(224, 224, 224);
width: 100%;
border-radius: 10px;
padding: 15px;
background-color: #ffffff;


}
.cnt_card_sec section div b{
  color: #000000;
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}
.cnt_card_sec section div ul li{
  display: flex;
gap: 10px;
font-size: 14px;
color: #9a9a9a;
line-height: 24px;
}
.cnt_card_sec section div ul li svg{
  min-width: 16px;
  max-width: 16px;

}

.cnt_content h2{
  color: #000000;
  font-size: 30px ;
  margin-bottom: 15px;
}

.cnt_content p{
  color: #828282;
  font-size: 16px ;
  margin-bottom: 35px;
  line-height: 26px;
}

.whatwedo , .ourclients , .ourworks {
  padding: 60px 100px;
}

.ourclients{
  padding-bottom: 120px;
}


.wrapper_ser_cards{
  display: flex;
  gap: 2%;
  flex-wrap: wrap;
  padding-top: 60px;
 
}

.serv_cards{
  padding: 10px;
  border-radius: 25px;
  background-color: #140c3a;
  width: 32%;
  min-height: 100%;
  margin-bottom: 25px;
}

.header_serv_cards{
  padding-top:17px;
  padding-bottom: 16px;
  padding-left: 16px;
}

.header_serv_cards h4{
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;

}
.header_serv_cards p{
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}
.list_serv_cards ul li{
  list-style-type: none;
  font-size: 15px;
  color: #0b0b0b;
  line-height: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
}
.list_serv_cards ul li::before{
  display: block;
  height: 20px;
  min-width: 20px;
  border-radius: 100px;
  background-color: #140c3a;
  background-image: url(./check2.svg);
  background-size: 10px;
  background-position: center center;
background-repeat: no-repeat;
  content: '';
}
.list_serv_cards{
  background-color: #ffffff;
  padding: 25px;
  border-radius: 25px;
  height: calc(100% - 90px);
}

.bxh{
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.big_mar{
  margin-top: 100px;
}

.instructs{
  display: none;
}



.min-mar{
  margin-top: 50px;
}
.portfolio-images{
  padding-top: 60px;
}

.portfolio-images span{
  position: relative;
  margin-bottom: 20px;
  display: block;
}
.portfolio-images strong{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: #000000;
  font-weight: 700;
  font-size: 22px;
  border-radius: 0 0 7px 7px;
  background: rgba(255, 255, 255, 0.2);   /* transparent white */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); 
  width: 100%;
}

.sub_hedss{
  font-size: 16px;
  line-height: 29px;
  color: #000000;
  margin-top: 25px;
}

.wide_pad{
  padding: 100px 0;
}

.dan_head{
  margin: auto;
  width: 650px;
  padding: 50px 0;
}

.dan_head h2{
  font-size: 45px;
  color: #000000;
  text-align: center;
  margin-bottom: 15px;
  font-family: "Inter", sans-serif;

}
.dan_head p{
  font-size: 19px;
  color: #373737;
  line-height: 29px;
  text-align: center;
}

.max-wid-sec{
  max-width: 1900px;
  margin: auto;
  display: flex;
  gap: 30px;
  justify-content: space-between;
}
.max-wid-sec div{
  width: 100%;
  padding: 0 30px;
}
.max-wid-sec div img{
  width: 150px;
}
.max-wid-sec div p{
  font-size: 12px;
  margin-top: 15px;
  line-height: 19px;
  color: #000000;
}
.max-wid-sec div h5{
  color: #2d2d2d;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  margin-bottom: 20px;

}
.max-wid-sec div ul li{
  list-style-type: none;
  color: #363636;
  font-size: 13px;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  line-height: 22px;
}
.max-wid-sec div ul li svg{
  min-width: 13px;
  max-width: 13px;
}

.ftr_text{
  display: flex;
  justify-content: space-between;
}
.ftr_text p{
  font-size: 12px;
  margin-bottom: 0;
  color: #000000;
  margin-top: 50px !important;
}

footer{
  width: 100%;
  padding: 15px;
}
  footer section{
  background-color: #f7f5ff;
  border-radius: 15px;
  padding: 35px 50px;
}

.footer_follow{
  display: flex;
  gap: 10px;
}

.footer_follow span{
  height: 35px;
  width: 35px;
  border-radius: 10px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer_follow span a{
color: #000000;
}
.footer_follow span a svg{
width: 15px;
margin-top: 4px;
}
.footer_follow span a img{
width: 15px;
margin-top: 4px;
}

.lets_connect_sec {
  padding: 100px;
  padding-top: 0;
}

.lets_connect_sec div{
  border-radius: 50px;
  padding: 100px;
  text-align: center;
background-image: url(./ref.jpg);
 background-size: cover;
background-position: center;
}

.lets_connect_sec div h2{
  font-size: 50px;
  line-height: 70px;
  margin-bottom: 30px;
  color: #ffffff;
}
.lets_connect_sec div p{
  line-height: 30px;
  font-size: 16px;
  color: #ffffff;

}

.lets_connect_sec div a{
  background-color: #fff;
  padding: 15px 30px;
  font-size: 16px;
  border-radius: 100px;
  color: #000;
  display: inline-block;
  margin-top: 33px;
}

.l1{
  background-color: #f7f7fe;
}
.l2{
  background-color: #f9fdf6;
}
.l3{
  background-color: #fff9fe;
}

.ltmob{
  display: none !important;
}

.ltdes{
  display: inline-block !important;
}

@media(max-width:800px){
  .lets_connect_sec{
    padding: 20px;
  }
  .ltmob{
  display: inline-block !important;
}
.ltdes{
  display: none !important;
}
  .lets_connect_sec div{
  border-radius: 30px;
  padding: 30px;
  text-align: center;
  background-color: #140c3a;
}
.lets_connect_sec div h2{
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 30px;
}
  footer section{
    padding: 20px;
  }
  .max-wid-sec{
    flex-direction: column;
  }
  .ftr_text{
    flex-direction: column;
    padding-top: 30px;
  }
  .ftr_text p{
    margin-top: 10px !important;
  }
  .max-wid-sec div{
    padding: 0 !important;
  }
.dan_head{
  width: 100%;
  padding: 30px 20px;
}
.dan_head h2{
  font-size: 25px;
}
.dancing_image_section2 .upper_row2{
  gap: 20px !important;
}
.sub_hedss{
  margin-top: 12px;
}
.wide_pad{
  padding: 50px 0 !important;
}

  .portfolio-images{
    gap: 2%;
    flex-wrap: wrap;
  }
  .portfolio-images div{
    width: 48%;
  }
  .portfolio-images strong{
    font-size: 17px;
    font-weight: 500;
    padding: 11px;
  }
  .portfolio-images span{
    margin-bottom: 8px;
  }
  .portfolio-images div img{
    height: 190px;
  }

.bxh{
  box-shadow: none;
}
.serv_cards{
  min-width:93% ;
  border-radius: 25px;
}
.big_mar{
  margin-top: 0;
}
.wrapper_ser_cards{
  gap: 10px;
  align-items: normal;
  overflow: auto;
  padding-top: 25px;
}
.list_serv_cards ul li::before{
  min-width: 20px;
}
.list_serv_cards ul li{
  gap: 10px;
  padding: 6px;
}

.list_serv_cards{
  border-radius: 25px;
  padding: 25px 18px ;
}
.instructs{
  display: block;
  margin-top: 5px;
}
.instructs p{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  font-size: 14px;
  color: #3d3d3d;
}
.instructs p svg{
  width: 16px;
}

  .new-section > div{
    flex-direction:column;
  }
  .whatwedo, .ourclients, .ourworks{
    padding:20px;
  }
  .new-section-images,
  .new-section-text{
    width:100%;
  }
  .new-section-images{
    height:50vh;
  }
  .design-show{
    padding-top: 0 !important;
  }
  .design-show-img{
    height: auto !important;
  }
  .heading-design-show{
    font-size: 28px !important;
    line-height: 35px !important;
  }
    .heading-design-show2{
    font-size: 28px !important;
    line-height: 35px !important;
  }
  .sub-heading{
    margin-bottom: 10px;
  }
  .heading-clients{
     font-size: 28px !important;
    line-height: 35px !important;
  }
  .new-section-images img{
    width: clamp(172px,18vw,220px);
  }
  .new-section-text h4{
    padding-top: 200px;
    font-size: 19px;
    line-height: 25px;
  }
  .new-section-text h4 span{
  font-size: 19px;
  line-height: 25px;
  color: rgba(0, 0, 0 , .5) !important;
}
.clients{
  padding-bottom: 90px;
  padding-top: 60px ;
}
.track{
  gap: 0 !important;
}

.framess{
  width: 350PX !important;
  left: -4px !important;
top: -4px !important;
}
.vision-images{
width: 234px !important;
height: 150px !important;
}

.v1 img, .v2 img, .v3 img{
  height: 100%   !important;
}

.cardwraps{

  flex-direction: column;
}
.cnt_card_sec section{
  padding: 30px ;
}
.cnt_content h2{
  font-size: 24px;
}
.gstin{
  gap: 10px !important;
}
.menu ul li a{
  color: #000000;
}

.design-show {
  padding: 20px;
}
.rowf, .rowse{
  flex-direction: column !important;
  gap: 0 !important;
}
.ourclients{
  padding-bottom: 80px !important;
}
.vision-section{
  padding: 20px !important;
}

.mb20s{
  margin-bottom: 20px !important;
}
.dancing_image_section .upper_row{
  gap: 20px !important;
}
.lets_connect_sec div p{
  line-height: 23px !important;
}
.ds-tag{
  font-size: 9px !important;
}
.card_p div{
  border-radius: 40px !important;
  margin-top: 23px !important;
}

}

.new-section-text h4{
  color: #000;
}


.new-section div:first-child{
  position:relative;
  height:420px;
}

.new-section img{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
}
.ds-tag.pink{
  background-color: #08a2db;
}
.ds-tag.red{
  background-color: #efcf00;
}
.ds-tag.yellow{
  background-color: #d901b1;
}


.vision-section{
  padding: 100px;
  display: flex;
  box-sizing: border-box;
  display: flex;
}

.vision-content {
flex: 1;
box-sizing: border-box;
padding: 0 30px;
padding-left: 270px;

}

.vision-content h2{
  font-size: 36px;
  font-family: "Inter", sans-serif;
  line-height: 50px;
  color: #000000;
}
.vision-content p{
  font-size: 16px;
  line-height: 26px;
  color: #3e3e3e;
  margin-top: 20px;
}

.v1 img, .v2 img, .v3 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  padding: 5px 0;

}

.v1, .v2, .v3 {
  width: 100%;
  height: 100%;
  overflow: hidden;   /* important */
}

.vision-images {
  width: 554px;
  border: 1px solid black;
  border-radius: 10px;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  gap: 2%;
  height: 365px;

  position: relative;
}

.framess{
  position: absolute;
  z-index: 9;
  top: -27px;
  left: -12px;
  width:850px;
}

/* track wrapper */
.track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}










.dancing_image_section{
  overflow:hidden;
  width:100%;
  padding:60px 0;
  background:#ffffff;
}

.dancing_image_section .upper_row{
  display:flex;
  gap:60px;
  width:max-content;
}

.dancing_image_section img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:14px;
  flex-shrink:0;
  will-change: transform;
}

.dancing_image_section{
  overflow:hidden;
}



.dancing_image_section2{
  overflow:hidden;
  width:100%;
  padding:60px 0;
  background:#ffffff;
}

.dancing_image_section2 .upper_row2{
  display:flex;
  gap:60px;
  width:max-content;
}

.dancing_image_section2 img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:14px;
  flex-shrink:0;
  will-change: transform;
}

.dancing_image_section2{
  overflow:hidden;
}

.rowf , .rowse{
  display: flex;
  gap: 30px;
}
.rowf .card_p{
  width: 100%;
}



.rowse .card_p{
  width: 100%;
}
.card_p div{
  position: relative;
  overflow: hidden;
  margin-top: 25px;
  border-radius: 30px;
}
.card_p div span{
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 15px 20px;
  border-radius: 10px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  bottom:4px;
  left: 0;
  gap: 10px;
  background-color: rgba(1, 1, 1,.2);
}

.card_p div span h2{
  color: #ffffff;
  font-size: 18px;
  font-family: "Inter", sans-serif;
}
.card_p div span p{
  color: #ffffff;
  font-size: 14px;
  padding-bottom: 10px;
  line-height: 21px;
}

.card_p img{
  width: 100%;
  height: 350px;
  object-fit: cover;


}





.lead-popup,
.thank-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lead-box,
.thank-box {
background: #f5f5ff;
background: radial-gradient(circle, rgba(245, 245, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
  padding: 21px;
  width: 90%;
  max-width: 420px;
  border-radius: 14px;
  position: relative;
  animation: fade .3s ease;
  border: 1px solid rgb(213, 213, 213);
}

.lead-box input,
.lead-box textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

button[type="submit"] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: black;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 15px;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  border: none;
  background: none;
  cursor: pointer;
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  margin-bottom: 12px;
}

.dropdown-selected {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  font-family: "Inter", sans-serif;
  font-size: 12px;
}

.thank-box h3{
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.thank-box p{
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight:400;
  line-height: 21px;
  margin-top: 10px;
}

.thank-box h4{
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight:600;
  line-height: 21px;
  margin-top: 10px;
  color: #286507;
}

.dropdown-options {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 5px;
  display: none;
  z-index: 10;
  padding: 10px;
  height: 150px;
  padding-bottom: 50px;
  overflow: auto;
}

.dropdown-options div {
  padding: 9px 14px;
  cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    background-color: rgb(248, 248, 248);
    margin-bottom: 7px;
    border-radius: 5px;
}

.dropdown-options div:hover {
  background: #f1f1f1;
}

@keyframes fade {
  from {opacity:0; transform:scale(.9);}
  to {opacity:1; transform:scale(1);}
}
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: none;
}

button.loading .btn-spinner {
  display: inline-block;
}

button.loading span {
  opacity: .7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.form_headling{
  font-size:16px !important;
  font-family: "Inter", sans-serif;
  color: #000000;
  font-weight: 500;
}

.form_headling+p{
  font-size:12px !important;
  font-family: "Inter", sans-serif;
  color: #4a4a4a;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 23px;
}
#leadForm label{
  display: block;

  font-size:12px !important;
  font-family: "Inter", sans-serif;
  color: rgb(46, 46, 46)  ;
  position: relative;
}
#leadForm label svg{
  position: absolute;
  width: 14px;
  top: 8px;
  left: 8px;
}

#leadForm input::placeholder{
  font-family: "Inter", sans-serif;
  font-size:12px !important;

}
.lead-box input{
  padding-left: 28px !important;
}