html {
  scroll-behavior: smooth;
}
.body{
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F5F6;
}

/* Underline Effect */
.underline{
    position: relative;
    color: rgb(0, 0, 0);
    text-decoration: none;
}
  
.underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 12;
    width: 0%;
    height: 2px;
    background-color: rgb(0, 0, 0);
    transition: width 0.4s ease-in-out;
}

.underline:hover::after {
    width: 100%;
}


.underline2{
  position: relative;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.underline2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: rgb(0, 0, 0);
  transition: width 0.4s ease-in-out;
}

.underline2:hover::after {
  width: 100%;
}

.underline3{
  position: relative;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.underline3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: rgb(255, 255, 255);
  transition: width 0.4s ease-in-out;
}

.underline3:hover::after {
  width: 100%;
}


/* Overlay Layer */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.104);
  z-index: 1;
}



/* Nabar Section */
.navbar{
  display: flex;
  justify-content: center;
}
.resp-nav2{
  display: none;
}
.navbar-wrapper{
  font-family: "space grotesk";
  z-index: 100;
  position: fixed;
  background-color: #EFF0F1;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin-top: -8px;
}
  
.navbar-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-family: "space grotesk";
  gap: 11vw;
  width: 88.75vw;
  max-width: 1440px;
}
.nav-logo{
  font-weight: 700;
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(to right, #629EF8, #8E3BEA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-logo p{
  width: fit-content;
}
.navbar-links{
  display: flex;
  gap: 2vw;
  width: fit-content !;
  justify-content: center;
  align-items: center;
}
.navbar-links{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.navbar-links a{
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  margin: 0;
  padding: 0;
  width: max-content;
}
.contact-us-wrapper{
  display: flex;
  justify-content: center; 
  align-items: center;
  margin-left: 60px;
}
.contact-us{
  height: fit-content;
  text-decoration: none;
  color: #1C45FF;
  background-color: #fff;
  border-radius: 8px;
  font-size: 14px;
  width: fit-content !important;
  padding: 0 20px;
  transition: all 0.3s ease-in-out;
  border: 1px solid #1C45FF;
}
.contact-us:hover{
  color: #fff;
  background: #1C45FF;
}

.main-wrapper {
  max-width: 1800px;
}




@media screen and (min-width: 2604px) and (max-width: 2800px) {

  .navbar-container{
    gap: 7vw;
  }
}
@media screen and (min-width: 2405px) and (max-width: 2604px) {

  .navbar-container{
    gap: 8vw;
  }
}
@media screen and (min-width: 2249px) and (max-width: 2405px) {

  .navbar-container{
    gap: 9vw;
  }
}
@media screen and (min-width: 1560px) and (max-width: 1690px) {

  .navbar-container{
    gap: 12vw;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1548px) {

  .navbar-container{
    gap: 11vw;
  }
}
@media screen and (min-width: 1085px) and (max-width: 1440px) {

  .navbar-container{
    gap: 10vw;
  }
}
@media screen and (max-width: 1341px) {

    .navbar-container{
        gap: 9vw;
    }
    .nav-logo{
      font-size: 28px;
    }
    .navbar-links a{
      font-size: 20px;
    }
    .contact-us{
      font-size: 14px
    }
    
}
@media screen and (max-width: 1287px) {

  .navbar-container{
      gap: 7vw;
  }
  .nav-logo{
    font-size: 28px;
  }
  .navbar-links a{
    font-size: 20px;
  }
  .contact-us{
    font-size: 14px
  }
  
}
@media screen and (max-width: 1216px) {

  .navbar-container{
      gap: 5vw;
  }
  .nav-logo{
    font-size: 28px;
  }
  .navbar-links a{
    font-size: 20px;
  }
  .contact-us{
    font-size: 14px
  }
  
}

@media screen and (max-width: 1147px) {

  .navbar-container{
      gap: 4vw;
  }
  .nav-logo{
    font-size: 28px;
  }
  .navbar-links a{
    font-size: 20px;
  }
  .contact-us{
    font-size: 14px
  }
  
}

@media screen and (max-width: 1100px) {

    .navbar-container{
      gap: 5vw;
    }
    .nav-logo{
      font-size: 28px;
    }
    .navbar-links a{
      font-size: 16px;
    }
    .contact-us{
      font-size: 14px
    }
    
}
@media screen and (max-width: 1024px) {

    .navbar-container{
        gap: 4vw;
    }
}
@media screen and (max-width: 985px) {

  .nav-logo{
    font-size: 24px;
  }
  .navbar-links a{
    font-size: 14px;
  }
  .contact-us{
    font-size: 12px
  }
  
}
/* Navbar Hamburger Toggle menu */
/* Default desktop view */
.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
}
.navbar2{
  display: none;
}
.side-panel{
  display: none;
}

@media (max-width: 890px) {

  /* Navbar 2*/
  .resp-nav1{
    display: none;
  }
  .resp-nav2{
    display: block;
  }
  .navbar2{
    display: flex;
    justify-content: center;
  }
  .navbar2-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 88.75vw;
  }



  .hamburger {
    display: block;
  }

  .menu-content {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
  }

  .menu-content.show {
    display: flex;
  }

  .navbar2-links, .contact-us-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .navbar2-links a, .contact-us-wrapper a {
    display: block;
    padding: 10px;
    text-align: center;
  }


  

/* Navbar layout */
.navbar2 {
  display: block;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  color: white;
  padding: 20px 0px;
  background-color: #EFF0F1;
  z-index: 10;
  margin-top: -8px;
}

.nav2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90vw;
}

.logo2 a{
  font-weight: 700;
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(to right, #629EF8, #8E3BEA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
  font-family: "space grotesk";
}

/* Hamburger styles */
.hamburger-icon {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: end;
  transition: all 0.3s ease-in-out;
  margin-right: -0.2rem;
}

.nav-hr {
  width: 25px;
  height: 2px;
  background: linear-gradient(to right, #629EF8, #8E3BEA);
  margin: 0;
  border: none;
  transition: all 0.3s ease-in-out;
}
.nav-hr3{
  width: 15px;
  height: 2px;
  background: linear-gradient(to right, #629EF8, #8E3BEA);
  margin: 0;
  border: none;
  transition: all 0.3s ease-in-out;
}
/* Animate to X */
.hamburger-icon.active .top-bar {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-icon.active .middle-bar {
  transform: rotate(-45deg) translate(1px, -1px);
}

.hamburger-icon.active .bottom-bar {
  opacity: 0;
}
#navbar2 {
  background-color: #EFF0F1;
  background-image: linear-gradient(to right, #232323 0%, #232323 100%);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 0% 100%;
  transition: background-size 0.7s ease-in-out, background-color 0.7s ease-in-out;
}
#navbar2.black-bg {
  background-color: #232323;
  background-size: 100% 100%;    /* Slide in fully from right */
}





/* Side panel hidden by default */
.side-panel{
  display: block;
}
.side-panel {
  position: fixed;
  left: 100%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: #232323;
  padding: 60px 20px;
  transition: left 0.7s ease-in-out;
  z-index: 9;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Show panel */
.side-panel.active {
  /* transform: translateY(0%); */
  left: -1%;
  width: 100%;
  height: 100%;
}

.side-nav-links {
  list-style: none;
  padding: 20;
  font-family: "space grotesk";
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.navbar2-links a {
  margin-bottom: 1px;
}
.side-nav-links a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 1rem;
}
.navbar2-contact-us-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar2-contact-us-wrapper .contact-us{
  background-color: #3168F5;
  padding: 0 15vw;
}

.side-panel .newsletter{
  width: 100%;
  border-radius: 0;
  margin-left: -2vw;
  overflow: hidden;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "space gortesk";
  background-color: #000;
  padding-top: 0;
}
.side-panel .newsletter form p{
  font-size: 1.4rem;
}
.input-field .mail-text1{
  border: none;
  border-bottom: 1px solid #5E5E5E;
  background: transparent;
  font-size: 16px;
  padding: 10px;
  width: 100%;
  color: #fff;
}

}









/* Hero Background */

/* Hero Section */
.hero-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-background{
  width: 100%;
  max-width: 1800px;
  height: auto;
}
.hero-heading-wrapper{
  background-image: url('images/homeImageSemiCircle2.png');
  background-position: 0 5vh;
  background-size: cover;
  overflow: hidden;
}

.hero{
    font-family: "Space Grotesk";
    display: flex;
    justify-content: center;
    margin-top: 25vh;
    /* height: auto; */
    margin: 22vh auto;
    width: 88.75vw;
    max-width: 1450px; /* Set a max width for the hero section */
    gap: 10vw;
}
.hero-container{
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 20px;
}
.hero-heading2{
  display: none;
}
.hero-heading h1{
  font-size: 4.5rem;
  margin: 0;
  line-height: 1.3;
}
.hero-heading .digital{
  background: linear-gradient(to right, #8E3BEA, #629EF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
}
.hero-para p{
  font-size: 20px;
  max-width: 500px;
}
.button-display2{
  display: none;
}
.hero-button{
  margin-top: 5px;
  border: 1px solid #1C45FF;
  border-radius: 50px;
  width: fit-content;
  overflow: hidden; 
  position: relative;
  cursor: pointer;
}

.hero-contact {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  position: relative;
  z-index: 1;
  color: #1C45FF;
  border: 2px solid white;
  border-radius: 50px;
  padding: 0 25px;
}

.hero-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1C45FF 10%, #1C45FF 90%);
  transform: scaleX(0) scaleY(1);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 0;
  border-radius: 50px;
}

.hero-button:hover::before {
  transform: scaleX(1) scaleY(1);
}

.hero-button:hover p {
  color: white;
}

.hero-contact img {
  width: 20px;
  height: 20px;
  z-index: 1;
  rotate: -30deg;
  transition: filter 0.4s ease;
  margin-top: -3px;
  transition: transform 1s ease-in-out;
}
/* Start in original place */
.hero-contact p,
.hero-contact img {
  /* position: relative; */
  z-index: 1;
  transition: color 0.3s ease-in-out, filter 0.4s ease-in-out, rotate 0.4s ease-in-out;
}

/* Color & filter change */
.hero-button:hover .hero-contact p {
  color: white;
}

.hero-button:hover .hero-contact img {
  filter: brightness(0) invert(1);
  /* transform: rotate(30deg); */
  rotate: 0deg;
}



/* Hero Image Section */

.hero-image{
  display: flex;
  justify-content: left;
  align-items: center;
}
.hero-image a{
  width: 6vw;
  height: 12vh;
  position: absolute;
  padding: 2px 6px;
  background: linear-gradient(90deg, transparent 50%, #ffffff 50%);
  border-radius: 50%;
  margin-left: -3.5vw;
  display: flex;
  justify-content: center;
  align-items: center;

}
.hero-image a img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}

/* Shine effect on hero image */

.card-image {
  width: 40vw;
  height: 35vw;
  max-height: 700px;
  max-width: 700px;
  border-radius: 20px;
  overflow: hidden !important;
}

.card-image .main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* shine Effect */
.card-image {
  position: relative;
  overflow: hidden;
  z-index: -1;
}

.card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0%;
  width: 20%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(74, 65, 65, 0) 0%,
    rgba(255, 253, 253, 0.352) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

.cards-first:hover .card-image::before {
  opacity: 1;
  animation: shineOnce 0.7s ease-in-out forwards;
}

@keyframes shineOnce {
  0% {
    left: -75%;
  }
  100% {
    left: 130%;
  }
}
  

@media screen and (max-width: 1329px) {
  
  .hero{
    gap: 7vw;
    margin-top: 160px;
  }
}
@media screen and (max-width: 1329px) {

  .hero-heading h1{
    font-size: 4rem;
  }
}

@media screen and (max-width: 1099px) {
  .hero-heading h1{
    font-size: 3rem;
  }
  
}

@media screen and (max-width: 946px) {
  
  .hero{
    margin-top: 13vh;
  }
  .hero-heading h1{
    font-size: 3rem;
  }  
}
@media screen and (max-width: 890px) {
  
  /* Hero Section */
  .hero{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .hero-container{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-heading{
    display: none;
  }
  .hero-heading2{
    display: block;
    text-align: center;
  }
  .hero-heading2 h1{
    font-size: 3rem;
    margin: 0;
    line-height: 1.3;
  }
  .hero-heading2 .digital{
    background: linear-gradient(to right, #8E3BEA, #629EF8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for Firefox */
    color: transparent;
  }
  .hero-para{
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100% !important;
  }
  .hero-para p{
    width: 100vw !important;
  }
  .button-display2{
    display: block;
  }
  .button-display1{
    display: none;
  }
  
  .hero-image{
    margin-top: -4vh;
    z-index: 1;
    width: 100%;
    justify-content: center;
  }
  .card-image{
    width: 90vw;
  }
  .hero-image a{
    left: 50%;
    width: 60px;
    height: 60px;
    background: transparent;
  }


  .hero-contact2 {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    position: relative;
    z-index: 1;
    color: #1C45FF;
    border: 2px solid white;
    border-radius: 50px;
    padding: 0 25px;
  }
  
  .hero-button2{
    background-color: #2382FF;
    border-radius: 4px;
    border: none;
    margin-top: 0px;
    margin-bottom: -2rem;
    text-decoration: none;
  }

  .hero-contact2{
    border-radius: 4px;
    border: none;
  }
  .hero-contact2 p{
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
  .hero-contact2 img{
    width: 14px;
    height: 14px; 
    filter: contrast(10);
    rotate: 10deg;
    border-radius: 4px;
  }
}



@media screen and (max-width: 425px) {
  .hero-heading2 h1{
    width: 80vw;
    font-size: 2rem !important;
  }
  .hero-para p{
    width: 80vw !important;
    font-size: 12px !important;
  }
  .hero-image a{
    left: 45%;
    width: 40px;
    height: 40px;
    background: transparent;
  }
  .hero-background{
    margin-bottom: -10vh;
  }

  .hero-button{
    background-color: #2382FF;
    border-radius: 4px;
    border: none;
    margin-top: 0px;
    margin-bottom: 0rem;
  }
  .hero-contact{
    border-radius: 4px;
    border: none;
  }
  .hero-contact p{
    color: #fff;
    font-size: 12px;
    font-weight: 500;
  }
  .hero-contact img{
    width: 10px;
    height: 10px; 
    filter: contrast(10);
    rotate: 10deg;
    border-radius: 4px;
  }

}






  /* Black Background Section */
  .black-heading{
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px 0vh;
  }

  .black-heading h1{
    margin-top: 131px;
    font-size: 52px;
    width: 80vw;
    max-width: 1430px;
  }

  .black-heading p{
    margin-top: -10px;
    font-size: 20px;
    width: 70vw;
    max-width: 1000px;
  }

@media screen and (max-width: 786px) {
   .black-heading h1{
    margin-top: 131px;
    font-size: 40px;
  }
  .black-heading p{
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
  .black-heading h1{
   margin-top: 131px;
   font-size: 36px;
 }
 .black-heading p{
   font-size: 14px;
 }
}
@media screen and (max-width: 425px) {
  .black-heading h1{
   font-size: 26px;
   width: 90vw;
 }
 .black-heading p{
   font-size: 10px;
   width: 90vw;
 }
}



  

/* Cards Section */
.cards-wrapper{
  display: flex;
  justify-content: center;
}
.cards{
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  grid-auto-rows: 400px;
  width: 87.5vw;
  position: relative;
  font-family: "space grotesk";
  max-width: 1430px;
}
.cards-container{
  position: relative;
}

.cards-container img{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  opacity: 0.5;
}
.cards-info{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 70%;
  color: #fff;
  padding: 16px;
  width: fit-content;
  z-index: 2;
  font-size: 16px;
  width: 20vw;
  max-width: 300px;
}
.cards-info :first-child{
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}


@media screen and (max-width: 1166px) {
  .cards-info{
    width: 19vw;
    top: 68%;
  } 
}
@media screen and (max-width: 892px) {


  .cards{
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .cards-info{
    width: 90%;
  }
}
@media screen and (max-width: 425px) {
  .cards{
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}




/* Grid Section */



/* Brands Cards Section */
.brand-cards-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */
  z-index: 1;
}
.brand-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 87.75vw;
  margin-top: 70px;
  font-family: "space grotesk";
  overflow: hidden;
  object-fit: cover;
  border-radius: 12px;
  max-width: 1430px;
}
.brand-cards-image {
  position: relative;
}
.brand-cards-image img{
  width: 99.5%;
  height: 350px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #FFFFFF;
  border-radius: 12px;
}

.overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0); /* adjust color or remove */
  border-radius: 0;
  z-index: 1;
}

/* Text content */
.brand-cards-info{
  display: flex;
  flex-direction: column;
  justify-content: left;
  color: #fff;
  padding-left: 20px;
  /* width: 100%; */
  margin-top: 20px;
}

.brand-date {
  gap: 10px;
  display: flex;
  align-items: center;
  margin-bottom: -10px;
}

.brand-date img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 0;
}
.brand-date-para{
  font-size: 20px !important;
}
.brand-cards-info p{
  font-size: 12px;
}

.read-more {
  color: #1353F2;
  cursor: pointer;
  font-weight: 600;
  background-color: #fff;
  width: fit-content;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}
.read-more p{
  font-size: 14px;
  padding: 0 20px;
  font-weight: 400;
}

.read-more:hover {
  background-color: #1353F2;
  color: #fff;
}


@media screen and (max-width: 1024px) {
  .brand-cards-image img{
    zoom: 0.9;
  }
}

@media screen and (max-width: 890px) {
  .brand-cards-image img{
    zoom: 0.7;
  }
}

@media screen and (max-width: 768px) {
    .brand-cards{
      grid-template-columns: repeat(1, 1fr);
      gap: 80px;
      width: 60vw !important;
      min-width: 500px;
    }
    .brand-cards-image img{
      zoom: 0.8;
    }
}

@media screen and (max-width: 600px) {
  .brand-cards{
    width: 70vw;
    min-width: 450px;
  }
  .brand-cards-image img{
    zoom: 0.8;
  }
}

@media screen and (max-width: 485px) {
  .brand-cards{
    width: 40vw;
    min-width: 400px;
  }
  .brand-cards-image img{
    zoom: 0.7;
  }
}
@media screen and (max-width: 425px) {
  .brand-cards{
    width: 80vw;
    min-width: 80vw;
  }

  .brand-cards-image img{
    zoom: 0.6;
  }

}
@media screen and (max-width: 375px) {
  .brand-cards-image img{
    zoom: 0.5;
  }
}
@media screen and (max-width: 320px) {
  .brand-cards-image img{
    zoom: 0.4;
  }
}











  /* <!-- Texh Stack Section --> */
.tech-stack{
  font-family: "space grotesk";
  color: #fff;
  margin-top: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 60px;

}
.tech-stack-wrapper{
  width: 85vw;
  max-width: 1440px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tech-info{
  font-family: "space grotesk";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}


.tech-stack-image img{
  width: 50px !important;
  height: 50px !important;
  border-radius: 50px;
  margin-left: 10px;
}

.tech-heading{
  font-size: 35px;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 50%;
}
.red-text {
    color: rgba(255, 255, 255, 0.361);
    font-weight: 700;
  }
  
  .white-text {
    color: white;
    font-weight: 700;
  }
  
@media screen and (max-width: 768px) {

  .tech-stack{
    text-align: center;
  }
  .tech-heading{
    text-align: center;
    width: 100%;
    align-items: center;
  }
  .tech-info{
    display: flex;
    flex-direction: column;
  }
  .tech-stack-image{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5vw;
  }
  .tech-stack-image img{
    width: 60px !important;
    height: 60px !important;
    border-radius: 50px;
  }
}
@media screen and (max-width: 375px) {

  .tech-heading{
    font-size: 25px;
  }
  .tech-stack-image img{
    width: 50px !important;
    height: 50px !important;
  }
}





/* Development Process Section */
  .development-heading1{
    padding-top: 10vh;
    font-family: "space grotesk";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .development-heading1 h1{
    color: #fff;
    font-size: 3.5rem;
    margin: 0;
    width: 80vw;
    max-width: 1430px;
    color: #000;
  }
  .development-heading1 p{
    font-size: 20px;
    color: #E4E4E4;
    width: 45vw;
    margin-top: 20px;
    width: 70vw;
    max-width: 1100px;
    color: #000;
  }

  @media screen and (max-width: 768px) {
    .development-heading1 h1{
      font-size: 2rem;
    }
    .development-heading1 p{
      font-size: 1rem;
    }
  }
  @media screen and (max-width: 485px) {
    .development-heading1 h1{
      width: 90vw;
    }
    .development-heading1 p{
      width: 90vw;
    }
  }



/* Development Process Section */
.dev-wrap-display2{
  display: none;
}
.development-wrapper{
  padding-top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "space grotesk";
}
.development-cards1{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 86.75vw;
  max-width: 1440px;
  gap: 25px;
}
.development-cards1 img{
  margin-top: 2vh;
  width: 20vw;
  max-width: 320px;
  height: 22vh;
  object-fit: cover;
  border-radius: 12px;
}
.development-card-para{
  text-align: center;
  width: 17vw;
  max-width: 320px;
  height: 18vh;
  min-height: 150px;
  padding: 20px;
  border-radius: 24px;
  transform: translateY(90px);
  border: 1px solid black;
}
.development-card-para h3{
  color: #1C45FF;
}

.development-card-para2{
  text-align: center;
  width: 17vw;
  max-width: 320px;
  height: 18vh;
  min-height: 150px;
  padding: 20px;
  border-radius: 24px;
  transform: translateY(-90px);
  border: 1px solid black;
}
.development-card-para2 h3{
  color: #1C45FF;
}



/* Zigzag Section */
.zigzag-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
.zigzag-container {
  height: 200px;
  overflow: visible;
}
svg {
  overflow: visible;
  width: 88.75vw;
  height: 100%;
  max-width: 1440px;
}

.zigzag {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 0s ease forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.outer-circle {
  fill: transparent;
  stroke: #000;
  stroke-width: 1;
}
.inner-circle {
  fill: #000;
}
svg .inner-circle {
  transition: all 0.3s ease;
}
/* Smooth transition for both circles */
svg .inner-circle,
svg .outer-circle {
  transition: all 0.3s ease;
}
svg g{
  cursor: pointer;
}

/* Hover effect for group 1 */
svg .circle-group1:hover .inner-circle,
svg .circle-group2:hover .inner-circle,
svg .circle-group3:hover .inner-circle,
svg .circle-group4:hover .inner-circle
{
  fill: #1C45FF;
}

svg .circle-group1:hover .outer-circle,
svg .circle-group2:hover .outer-circle,
svg .circle-group3:hover .outer-circle,
svg .circle-group4:hover .outer-circle
{
  stroke: #1C45FF;
}

/* transition Effect */
/* for group 1 */
.hover-card1,
.hover-card2,
.hover-card3,
.hover-card4,
.hover-image1,
.hover-image2,
.hover-image3,
.hover-image4{
  transition: all 0.5s ease-in-out;
  opacity: 0;
}



/* Development Cards Section */
.dev-cards-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dev-cards1{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* margin-left: 80px; */
  gap: 20px;
  width: 87.5vw;
  margin-top: 60px;
  max-width: 1430px;

}

.dev-cards-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #EDEDED;
  border-radius: 20px;
  padding: 20px 10px 5px 10px;
  font-family: "space grotesk";
}

.dev-cards-vector{
  background-color: #5E5E5E;
  border-radius: 50px;
}

.dev-cards-vector img{
  padding: 20px;
}

.dev-cards-heading{
  font-size: 20px;
  color: #3168F5;
}
.dev-cards-para{
  font-size: 16px;
  color: #E4E4E4;
}

/* development card 2 */
.dev-cards2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* margin-left: 80px; */
  gap: 20px;
  width: 87.5vw;
  margin-top: 40px;
  max-width: 1430px;
}

.dev-wrap-display2{
  display: none !important;
}


@media screen and (max-width: 1227px) {

  .development-card-para p{
    font-size: 14px !important;
  }
  .development-card-para2 p{
    font-size: 14px !important;
  }
}
@media screen and (max-width: 1119px) {

  .development-card-para h3{
    font-size: 16px !important;
  }
  .development-card-para2 h3{
    font-size: 16px !important;
  }
}
@media screen and (max-width: 972px) {

  .development-card-para p{
    font-size: 12px !important;
  }
  .development-card-para2 p{
    font-size: 12px !important;
  }
}

@media screen and (max-width: 890px) {
  .dev-wrap-display1{
    display: none;
  }
  .dev-wrap-display2{
    display: block !important;
  }

 /* Base */
.process {
  --bg: #0f1622;
  --card-bg: #28313E;
  --text: #fff;
  --muted: #b9c0cc;
  --brand: #1C45FF;

  color: var(--text);
  display: flex;
  justify-content: center;
  font-family: "space grotesk";
  margin-top: 20px;
  width: 100%;
}


/* Grid wrapper */
.process__grid {
    display: flex;
    align-items: stretch; /* Makes all columns same height */
}

.process__image {
  border-radius: 12px !important;
  display: block;
  width: 34vw !important;
  height: 220px;
}


.process__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 1px solid #334155;
  border-radius: 12px;
  /* padding: 16px; */  padding: 0 10px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: center;
  width: 30vw;
  height: 220px;
}
.process__card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(0,0,0,0.75);
}
.process__card h3{
  color: #1C45FF;
}
.process__card p{
  color: #000;
}


/* Dots default style */
.dot { fill: #000; }
.dot--outer { fill: transparent; stroke: #000; stroke-width: 1;}
.dot--inner { fill: #000; }

/* ————— 3‑Column from 890px+ ————— */
  .process__grid {
    grid-template-columns: 1fr 100px 1fr;  /* left | timeline | right */
    align-items: start;
  }

  .process__col {
    flex: 1;
  }
  

  .process__col--left,
  .process__col--right {
    grid-auto-rows: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
/* 
  .process__timeline {
    display: flex;
    position: relative;
    height: 100vh;
    justify-content: center;
    width: 100%;
  } */
  
  .process__grid {
    display: flex;
    align-items: stretch;
    gap: 2vw;
  }
  
  .process__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .process__timeline {
    width: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  

.process__timeline-svg{
  margin-top: 10vh;         
  /* height: 120vh;     */
  width: 20px;        
}
  



  /* Optional hover: make both inner+outer dots blue when hovering the group */
  .dot-group:hover .dot--inner,
  .dot-group:hover .dot--outer {
    fill: var(--brand);
  }
  

/* Nice spacing for left/right sequences */
  .process__col--left {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
  .process__col--right {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

/* Optional: card/image elevation & smooth images */
.process__image { object-fit: cover; }

/* If you want tighter alignment between dots & rows, you can tweak the cy values in the SVG,
   or give each row a fixed height and compute the dot positions accordingly. */

  
}
@media screen and (max-width: 600px) {

  .process__card{
    height: 160px;
  }
  .process__image{
    height: 160px;
  }
  .process__card h1{
    font-size: 12px;
  }
  .process__card p{
    font-size: 10px;
  }
}
@media screen and (max-width: 485px) {

  .process__card{
    height: 160px;
  }
  .process__image{
    height: 160px;
  }
  .process__card h1{
    font-size: 12px;
  }
  .process__card p{
    margin-top: -10px;
    font-size: 10px;
  }

  .process__timeline-svg{
    margin-top: 10vh;         
    /* height: 120vh;     */
    width: 14px;        
  }
}
@media screen and (max-width: 425px) {

  .process__card{
    height: 140px;
  }
  .process__image{
    height: 140px;
  }

  .process__card h1{
    font-size: 10px;
  }
  .process__card p{
    font-size: 8px;
  }
}








/* Development, Blog Heading */
.blog-heading2{
  padding-top: 10vh;
  font-family: "space grotesk";
  margin-top: 110px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.blog-heading2 h1{
  color: #fff;
  font-size: 3.5rem;
  margin: 0;
  width: 80vw;
  max-width: 1430px;
}
.blog-heading2 p{
  font-size: 20px;
  color: #E4E4E4;
  width: 45vw;
  margin-top: 20px;
  width: 70vw;
  max-width: 1100px;
}
/* Blogs Section */

.blogs-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.blogs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 87.5vw;
  gap: 20px;
  margin-top: 60px;
  padding-bottom: 5rem;
  max-width: 1430px;

}
.blog-container{
  padding: 20px;
  background: #333333;
  border-radius: 8px;
}
.blog-image img{
  /* width: 18.4vw; */
  width: 100%;
  height: 25vh;
  border-radius: 8px;
}
.blog-heading{
  text-decoration: none;
}
.blog-heading p{
  color: #fff;
  font-size: 20px;
}


@media screen and (max-width: 890px) {
  .blogs .slick-track{
    left: 7%;
  }
  .blog-container{
    margin-left: 50px;
  }
  .blogs .slick-dots{
    margin-top: -30vh !important;
  }
  .blogs-wrapper {
    overflow-x: hidden;
    padding: 20px;
  }
  .blogs .blog-container {
    margin: 0 10px;
  }

  .blog-heading2{
    text-align: center;
  }

  
}

@media screen and (max-width: 890px) {
  .blog-heading2 h1{
    font-size: 3rem;
  }
  .blog-heading2 p{
    font-size: 1rem;
  }
}

@media screen and (max-width: 600px) {
    .blogs .slick-track{
      left: 17% !important;
    }
    .blog-container{
      margin-left: 50px !important;
    }
}
@media screen and (max-width: 425px) {
  .blogs .slick-track{
    left: 17% !important;
  }
  .blog-container{
    margin-left: 20px !important;
  }

}

@media screen and (max-width: 425px) {
  .blog-heading2 h1{
    font-size: 2rem;
    width: 90vw;
  }
  .blog-heading2 p{
    font-size: 12px;
    width: 80vw;
  }
}









/* Price Section */
.price-background{
  background: url('images/price-background.svg');
  background-size: cover;
}

.price-heading{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 7vh;
  text-align: center !important;
}
.price-heading h1{
  font-family: "space grotesk";
  font-size: 3.1rem;
  text-align: center !important;
}

/* Price Cards */
.price{
  display: flex;
  justify-content: center;
  font-family: "space grotesk";
  align-items: center;
  width: 100%;
}
.price-container{
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  width: 88.75vw !important;
  justify-content: center;
}
.price-cards{
  margin: 3vh 2vw;
  background-color: #F7F8FD;
  padding: 0px 20px 20px 20px;
  border-radius: 20px;
  box-shadow: -2px 4px 11.5px 0 #00000040;
  width: fit-content;
  transition: all 0.3s ease-in-out;
}
.price-cards2{
  margin: 3vh 2vw;
  color: #fff;
  background-color: #1C1C1CE5;
  padding: 0px 20px 20px 20px;
  border-radius: 20px;
  box-shadow: -2px 4px 11.5px 0 #00000040;
  width: fit-content;
  transition: all 0.3s ease-in-out;
}
.package{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: -3vh;
}
.price-tag{
  font-size: 36px;
  font-weight: 700;
  margin-bottom: -1.6vh;
}
.price-cards .price-tag{
  color: #1C45FF;
}
.price-cards2 .price-tag{
  background: linear-gradient(90deg, #629EF8 20%, #8E3BEA 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
}
.plan{
  font-size: 24px;
  font-weight: 700;
}
.contain{
  font-size: 16px;
}
.feature{
  display: flex;
  gap: 20px;
  font-size: 16px;
  margin: -1vh 0;
}
.vision{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-top: 2vh;
  font-weight: 500;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.vision img{
  width: 25px;
  height: 25px;
}
.price-cards .vision{
  background: #1C1C1C;
  color: #fff;
}
.price-cards2 .vision{
  background: #F7F8FD;
  color: #000;
}
.price-cards:hover{
  transform: scale(1.02);
}
.price-cards2:hover{
  transform: scale(1.02);
}

@media screen and (max-width: 425px) {
  .price-heading{
    width: 88vw;
  }
  .price-heading h1{
    font-size: 2rem;
  }
}

@media screen and (max-width: 890px) {

  .price-container{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .price-cards2{
    padding: 40px;
  }
  .price-background{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .price-heading{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80vw;
  }
}







/* Client Testimonial Section */
.testimonial-background{
  margin-top: 10vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  font-family: "space grotesk";
}
.testimonial-heading-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.testimonial-heading{
  width: 88.75vw;
  max-width: 1430px;
  display: flex;
  justify-content: center;
}
.testimonial-heading p{
  font-size: 3rem;
  margin-top: 0;
  font-weight: 600;
}


/* Testimonial */
.client-grid{
  display: flex;
  justify-content: center;
  margin-top: 16vh;
}
.client-grid-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 88.7vw;
  max-width: 1430px;
}
.client-testimonial{
  background-color: #EFF0F1;
  padding: 20px;
  border-radius: 20px;
}
.client{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: -16vh;
  gap: 0;
}
.client img{
  width: 150px;
  height: 150px;
  border-radius: 85px;
  border: 10px solid #F7F5F6;
  object-fit: cover;
}
.client-info{
  text-align: center;
}
.client-info h1{
  margin-top: 5px;
}
.client-info h2{
  color: #1C45FF;
}
.client-info p{
  font-size: 20px;
}
.client-info :first-child{
  margin-bottom: 3px;
  font-weight: 500;
}
.client-info :nth-child(2){
  margin-top: 3px;
  font-weight: 300;
}
.testimonial-para{
  text-align: center;
  font-size: 16px;
  margin-top: -5px;
}



@media screen and (max-width: 890px) {
 

  .client-grid-container{
    grid-template-columns: repeat(1, 1fr);
    width: 70vw;
  }
  .client-Testimonial:first-child{
    margin-top: 0;
  }
  .client-Testimonial{
    margin-top: 12vh;
  }
  .testimonial-heading p{
    text-align: center;
    font-size: 2rem;
  }

}

@media screen and (max-width: 425px) {
 
  .client-Testimonial .Testimonial-para{
    font-size: 12px !important;
  }
  .testimonial-heading p{
    text-align: center;
  }

}









/* Footer Section */
.footer-heading{
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;
  font-family: "space grotesk";
}
.footer-heading-h1{
  display: flex;
  gap: 10px;
  color: #FFFFFF;
  font-size: 2rem;
  margin-bottom: -5vh;
}
.footer-heading-h1 .together{
  background: linear-gradient(90deg, #66A2FA 5%, #BB85FC 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
}

.footer-heading p{
  color: #D1D5D0;
  margin-bottom: 10vh;
  width: 49vw;
  text-align: center;
}


/* CTA Section */
.cta{
  display: flex;
  justify-content: center;
  padding-bottom: 100px;
}
.cta-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cta-info{
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.cta-info img{
  width: 60px;
  height: 60px;
}
.cta-para-p1{
  color: #fff;
  font-size: 20px;
  margin: 0;
}
.cta-para-p2{
  color: #E5E5E5;
  font-size: 16px;
  margin: 0;
}


.footer1-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2vh;
}

.footer-container{
  display: flex;
  font-family: "space grotesk";
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 40px;
  width: 88.75vw;
  max-width: 1440px;
}
.footer-image img{
  width: 40vw;
  max-width: 500px;
  height: 40vh;
  border-radius: 40px;
  object-fit: cover;
}

.footer1-choose {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.footer1-choose h1{
  color: #fff;
}
.footer1-choose-result{
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.footer1-choose-result img{
  width: 16px;
  height: 16px;
}
.footer1-choose-result p{
  color: #fff;
  font-size: 16px;
}

.footer-form{
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  width: 50%;
  height: 77vh;
  background-color: #28313E;
  color: #fff;
  border-radius: 16px;
  padding: 20px 0px;
}
.footer-form{
  display: flex;
  justify-content: left;
  align-items: center;
}
.footer1-container{
  display: flex;
}
.footer1-label{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding-left: 1.5vw;
  padding-top: 20px;
}
.footer-container form input{
  background: #232D3B;
  font-size: 1rem;
  padding: 16px 20px;
  width: 18vw;
  max-width: 300px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  border: 2px solid #4B5563;
  color: #fff;
}
.footer1-label select{
  padding: 16px 20px;
  width: 18vw;
  max-width: 300px;
  background: transparent;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid #4B5563;
}
select:focus {
  outline: none;
  box-shadow: none;
}

.footer-container form textarea{
  background: #5C5C5C29;
  font-size: 1rem;
  padding: 16px 20px;
  width: 38vw;
  max-width: 550px;
  height: 135px;
  margin-top: 0px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  color: #fff;
}
.footer-container form button{
  border: none;
  color: #fff;
  background: #23A7FF;
  font-size: 1.3rem;
  padding: 16px 20px;
  width: 38vw;
  max-width: 650px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

@media screen and (min-width: 1590px) {
  .footer-container form textarea{
    max-width: 630px !important;
  }
  .footer-container form button{
    max-width: 630px !important;
  }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input:focus {
  outline: none;
  box-shadow: none;
}
textarea:focus {
  outline: none;
  box-shadow: none;
}

@media screen and (max-width: 1008px) {
  

  /* Right-side Text */
  .footer1-label label{
    font-size: 14px;
  }
  .footer1-label input{
    font-size: 14px !important;
  }
  .footer1-label select{
    font-size: 14px !important;
  }
  .footer-container form textarea{
    font-size: 14px !important;
    width: 40vw;
  }
  .footer-container form button{
    width: 40vw;
    margin-left: 18px;
  }
  .footer-form{
    width: 45vw
  }
}


@media screen and (max-width: 768px) {

  .cta-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100vw;
    
  }
  .cta-info{
    border: 1px solid #4B5563;
    background-color: #232323;
    width: 70vw;
    padding: 20px 50px;
    border-radius: 12px;
    justify-content: left;
  }



  /* footer 1 Section */
  .footer-container{
    display: flex;
    flex-direction: column !important;
  }
  .footer-image .footer-image1{
    display: none;
  }

  .footer1-choose{
    background-color: #232323;
    width: 70vw !important;
    padding: 20px 50px;
    border-radius: 12px;
    border: 1px solid #4B5563;
    margin-top: -10vh;
  }

  .footer-form{
    width: 70vw !important;
    padding: 20px 50px;
    justify-content: center;
    align-items: start;
    height: 850px;
    margin: 0 !important;
  }
  .footer1-label label{
    font-size: 16px;
  }
  .footer1-label input{
    font-size: 16px !important;
    width: 70vw !important;
  }
  .footer1-label select{
    font-size: 16px !important;
    width: 300px !important;

  }
  .footer-container form textarea{
    font-size: 16px !important;
    width: 300px !important;

  }
  .footer-container form button{
    width: 300px !important;
  }
  .footer1-container{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
    gap: 20px;
  }

}

@media screen and (max-width: 600px) {
  .footer-heading-h1{
    font-size: 1.5rem;
  }
  .footer-heading p{
    width: 70vw;
  }
}

@media screen and (max-width: 485px) {

  .footer-heading-h1{
    font-size: 1.2rem;
  }
  .footer-heading p{
    width: 70vw;
    font-size: 1rem;
  }


  .footer-container form button{
    margin-left: 10px !important;
  }
}

@media screen and (max-width: 425px) {



  .footer-heading-h1{
    font-size: 1rem;
  }
  .footer-heading p{
    width: 70vw;
    font-size: 0.7rem;
  }



  .footer1-label select{
    font-size: 16px !important;
    width: 70vw !important;
  }
  .footer-container form textarea{
    font-size: 16px !important;
    width: 70vw !important;

  }
  .footer-container form button{
    width: 70vw !important;
    margin-left: 10px !important;
  }



  .footer-form{
    height: 850px;
  }

}

@media screen and (max-width: 365px) {
  
  /* footer-heading Section */
  .footer-heading-h1{
    padding-bottom: 5px;
  }

  /* CTA Section */
  .cta-info{
    padding: 20px 40px;
  }
  .footer1-choose{
    padding: 20px 40px;
  }
  .footer-form{
    padding: 20px 40px;
  }


/* Footer Section Left Side */
  .left-side h1{
    font-size: 2.5rem !important;
  }
  .left-side p{
    font-size: 0.7rem !important;
  }

}













/* Footer 2 Section */
.footer2{
  font-family: "space grotesk";
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  margin-top: 10vh;
}
.footer2-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  width: 87.5vw;
  max-width: 1440px;
}



/* Left side Section */
.left-side{
  display: flex;
  flex-direction: column;
  width: auto;
}
.left-side h1{
  background: linear-gradient(90deg, #629EF8 10%, #8E3BEA 40%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
  font-size: 3.5rem;
  margin: 0;
  width: fit-content;
}
.left-side p{
  color: #FFFFFF;
  width: 78%;
}
.left-side-image{
  display: flex;
  justify-content: left;
  gap: 20px;
  margin: 20px 20px;
  width: fit-content;
}



/* footer mid  section */
.footer-mid{
  display: flex;
  justify-content: center !important;
  /* width: fit-content; */
  gap: 25px
}
.footer-links ul{
  list-style: none;
  display: flex;
  justify-content: left;
  flex-direction: column;
  gap: 20px;
  width: max-content;
  padding: 0;
}
.footer-links-list a{
  text-decoration: none;
  color: #E4E4E4;
}
.explore a{
  color: #fff !important;
  font-size: 1.6rem;
  font-weight: 700;
}



/* Right side section */
.right-side{
  display: flex;
  justify-content: right;
}
.newsletter1{
  width: max-content;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
.newsletter1-mail{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.newsletter1-mail:first-child{
  color: #ffffff;
  font-size: 20px;
}

.text-field{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.text-field-p{
  width: 20vw;
  font-size: 14px;
}
.input-field1{
  display: flex;
  gap: 20px;
  background-color: #ffffff;
  border-radius: 8px;
}
.input-field1 .mail-text1{
  border: none;
  font-size: 16px;
  padding: 10px;
  width: 90%;
  color: #000;
  background-color: #ffffff;
  border-radius: 8px;
}
.newsletter{
  color: #fff;
  font-size: "space grotesk";
}
.newsletter .sign-up{
  color: #fff;
}



.policy{
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #E4E4E4;
}
.newsletter-mail{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.mail-text{
  width: 40vw !important;
  margin-bottom: 10px;
  border: none;
  border-bottom: 1px solid #5E5E5E;
  background: transparent;
  font-size: 16px;
  padding: 10px;
  width: 34vw;
  color: #fff;
}
.custom-checkbox {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  user-select: none;
}
.custom-checkbox p{
  margin-top: 0px;
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  left: 0;
  top: 0;
  height: 24px;
  width: 24px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: transparent;
}

input:checked ~ .checkmark {
  background: url("images//vector/checkbox-right.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 25px;
}

/* show image icon */
input:checked ~ .checkmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background-image: url('images/check-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
}





/* footer hr section */
.footer2-hr{
  display: none;
}



@media screen and (min-width: 1441px) {
  .input-field1 .mail-text1{
    width: 87% !important;
  }
}
@media screen and (max-width: 1440px) {
  .input-field1 .mail-text1{
    width: 80% !important;
  }
}


@media screen and (max-width: 1230px) {

  .footer2-container{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 1230px) {

  .footer2-container{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 786px) {

  .footer2-container{
    grid-template-columns: repeat(1, 1fr);
  }
  .left-side{
    width: 100%;
  }
  .footer-mid{
    justify-content: left !important;
  }
  .right-side{
    justify-content: left;
  }
  .text-field-p{
    width: 70vw;
  }
  .input-field1{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  .input-field .mail-text{
    width: 300px !important;
  }


  /* footer hr section */
.footer2-hr{
  display: block;
  width: 100%;
  border: 1px solid #636363;
}


}

@media screen and (max-width: 485px) {
  .newsletter{
    margin-left: -15px !important;
  }
}

@media screen and (max-width: 425px) {
  .newsletter{
    margin-left: -16px !important;
  }
  .newsletter-mail p{
    font-size: 18px !important;
    padding-top: 2px;
  }
  .input-field{
    display: flex;
    justify-content: center;
  }
  .input-field .mail-text{
    width: 240px !important;
  }
  .submit-img{
    width: 15px;
  }
  .custom-checkbox{
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .custom-checkbox input{
    width: 10px !important;
  }
  
}