.gradient-animation{
    height: 100vh;
    background: linear-gradient(300deg, #010044, #06293d, #0e3764, #010044);
    background-size: 10000% 10000%;
    animation: gradient-animation 15s ease infinite;
  }
  
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .desktop-carousel .carousel-item {
    height: 95vh; /* Adjust as needed */
  }
  
  .parallax-slide img {
    width: 100%;
    height: auto;
    transform: translate3d(0, 0, 0); /* Add this line to ensure hardware acceleration */
  }
  
  .parallax-slide {
    position: relative;
    overflow: hidden;
  }
  

  .parallax-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .parallax-slide img {
    display: block;
  }
  
  .carousel-control-prev,
  .carousel-control-next {
    z-index: 1; /* Ensure the controls are on top of the parallax effect */
  }
  
  
  .parallax {
    /* The image used */
  
    /* Set a specific height */
    min-height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .parallax-1 {
    /* The image used */
    background-image: url(images/others/Mirai\ Mumbai\ img\ revised.jpg);
    /* Set a specific height */
    min-height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }



/* Default hide mobile carousel */
.mobile-carousel {
  display: none;
}
.mobile-map{
  display: none
}
.mob-proj{
  display: none;
}
 @media(max-width: 1100px){
    .desktop-carousel .carousel-item{
      height: 65vh;
    }
 }

@media (max-width: 900px) {
  .desktop-carousel {
    display: none;
  }
  .mobile-carousel {
    display: block;
  }
  .desktop-map{
    display: none;
  }
  .mobile-map{
    display: block;
  }
  .desktop-proj{
    display: none;
  }
  .mob-proj{
    display: block;
  }
  .carousel-item img {
    height: 700px; /* Set a specific height for mobile devices */
  }
  .parallax-1{
    background-image: url(images/others/mumbai\ img\ mobile.jpg);
  }
  
}

@media (max-width: 650px) {
  .desktop-carousel {
    display: none;
  }
  .mobile-carousel {
    display: block;
  }
  .desktop-map{
    display: none;
  }
  .mobile-map{
    display: block;
  }
  .desktop-proj{
    display: none;
  }
  .mob-proj{
    display: block;
  }
  .carousel-item img {
    height: 600px; /* Set a specific height for mobile devices */
  }
  .parallax-1{
    background-image: url(images/others/mumbai\ img\ mobile.jpg);
  }
  
}

/* Show mobile carousel for screens smaller than 768px */
@media (max-width: 420px) {
  .desktop-carousel {
    display: none;
  }
  .mobile-carousel {
    display: block;
  }
  .desktop-map{
    display: none;
  }
  .mobile-map{
    display: block;
  }
  .desktop-proj{
    display: none;
  }
  .mob-proj{
    display: block;
  }
  .carousel-item img {
    height: 350px; /* Set a specific height for mobile devices */
  }
  .parallax-1{
    background-image: url(images/others/mumbai\ img\ mobile.jpg);
  }
  
}

.navbar-toggler{
  transition: all 0.3s;
  color: transparent;
  border-width: 0px;
  position: absolute;
  top: 15px;
  align-items: end;
  
}
.navbar-toggler:hover{
  transform: scale(1.15);
}
.carousel-indicators{
  transition: all 0.3s;
}
.carousel-indicators:hover{
  transform: scale(1.15);
}
.nav-item{
  transition: all 0.3s ;
}
.nav-item:hover{
  transform: scale(1.05);
}
.abcdefg{
  display: grid;
  place-items: center;
  margin-top: 120px;
}
img.centered {
  max-width: 100%;
  max-height: 100%;
}
.pqrst{
  display: grid;
  place-items: center;
  margin-top: 50px;
}

.get-in-touch {
  max-width: 800px;
  margin: 50px auto;
  position: relative;

}
.get-in-touch .title {
  text-align: center;

  letter-spacing: 3px;
  font-size: 3.2em;
  line-height: 48px;
  padding-bottom: 4px;
     color: #5543ca;
    background: #fbfafc;
    background: -moz-linear-gradient(left,#010044  0%,#010044 100%) !important;
    background: -webkit-linear-gradient(left,#010044  0%,#010044 100%) !important;
    background: linear-gradient(to right,#010044  0%,#010044 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}
.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #e5d8cd;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contact-form .input-text:focus {
  outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}
.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #010044;
  cursor: text;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, 
  -webkit-transform .2s ease-in-out;
}
.contact-form .submit-btn {
  display: inline-block;
  background-color: #000;
   background-image: linear-gradient(125deg,#010044, #0e3764);
  color:#e5d8cd;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  width:200px;
  cursor: pointer;
}
.submit-btn{
  transition: all 0.3s;
}
.submit-btn:hover{
  transform: scale(1.15);
}

.card{
  transition: all 0.3s;
  background-color: transparent;
  text-align: center;
  border: white;
}
.card:hover{
  transform: scale(1.1);
}
body{
  font-family: 'Manrope', serif;
}
.transition-effect {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(300deg, #010044, #06293d, #0e3764, #010044);
  background-size: 400% 400%;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 2s ease, visibility 1.5s ease;
  animation: moveGradient 7s ease infinite;
}
/* Final state of the animation */
.transition-effect.end-state {
  opacity: 0;
  visibility: hidden;
}
/* Keyframes for moving gradient */
@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}