body {
  font-family: 'Poppins', sans-serif;
      background: linear-gradient(334deg, #ffdab6, transparent);
   
}
h3 , h5 {
  color:  #3396D3;
}

.navbar {
  background: transparent;
  transition: background-color 0.3s ease;
}

.navbar-nav li {
  margin-right: 30px;
}

.input-group-text {
  align-items: start;
}

.hero-section {
  position: relative;

}

.hero-text h6 {
  color: #3396D3;
  font-weight: 600;
}

.hero-text h1 {
  font-size: 55px;
  font-weight: 800;
  font-family: 'Volkhov', serif;
}

.hero-text h1 span {
  position: relative;
  display: inline-block;
}

.underline-img {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.underline-img::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url('../images/Vector 12.png') no-repeat center bottom;
  background-size: contain;
  z-index: -1;
}

.hero-text p {
  color: #666;
  margin-top: 1rem;
}

.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 700px;
  height: auto;
  z-index: 0;
  object-fit: contain;
  pointer-events: none;
}

.hero-girl {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 550px;
  height: 400px;
}



/* section 2 */

.leafsection {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.bgleafsection {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow-x: hidden;
  
}

.leaf {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden; /* Add this line */
  opacity: 0.7;
}

.leaf div {
  position: absolute;
  display: block;
}

.leaf div:nth-child(1) {
  left: 20%;
  animation: fall 15s linear infinite;
  animation-delay: -2s;

}

.leaf div:nth-child(2) {
  left: 70%;
  animation: fall 15s linear infinite;
  animation-delay: -4s;
}

.leaf div:nth-child(3) {
  left: 10%;
  animation: fall 20s linear infinite;
  animation-delay: -7s;

}

.leaf div:nth-child(4) {
  left: 50%;
  animation: fall 18s linear infinite;
  animation-delay: -5s;
}

.leaf div:nth-child(5) {
  left: 85%;
  animation: fall 14s linear infinite;
  animation-delay: -5s;
}

.leaf div:nth-child(6) {
  left: 15%;
  animation: fall 16s linear infinite;
  animation-delay: -10s;
}

.leaf div:nth-child(7) {
  left: 90%;
  animation: fall 15s linear infinite;
  animation-delay: -4s;
}

@keyframes fall {
  0% {
    opacity: 1;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
    /* Corrected */
  }

  20% {
    opacity: 0.8;
    transform: translateX (-20px) rotate(45deg);
  }

  40% {

    transform: translateX (-20px) rotate(90deg);
  }

  60% {

    transform: translateX (-20px) rotate(135deg);
  }

  80% {

    transform: translateX (-20px) rotate(180deg);
  }

  100% {

    top: 110%;
    transform: translateX (-20px) rotate(225deg);
  }
}

.leaf1 {
  transform: rotateX(180deg);
}


.btn-custom {
  background-color:   #3396D3;
  color: white;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
}

.btn-custom:hover {
  background-color:   #3396D3;
}

.footer {
  background-color: #fff;
  position: relative;
  background-image: url('../images/footer-image.jpg');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08);
}

.btn-orange {
  background-color: #3396D3;
  color: white;
  border: none;
  padding: 0.5rem 1.25rem;
}

.btn-orange:hover {
  background-color: #3396D3;
}

.footer a {
  color: #555;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer .social-icons i {
  font-size: 1.5rem;
  margin-right: 12px;
  color: #3396D3;
}

.footer .newsletter-form input {
  background-color: #f0f1ff;
  border: none;
}

.footer .newsletter-form input:focus {
  outline: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
    margin: 5px 0;
  }
}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text {
    text-align: center;
    top: -27px;
  }

  .hero-bg {
    display: none;
  }

  .shape {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 250px;
    height: 200px;
  }
  


  .modal-form {
    padding: 1rem !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse.show {
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
  }

  .navbar .nav-link {
    color: #000;
  }

  .btn-custom {
    width: 100%;
    text-align: center;
  }
}


:root {
  --background: #e27fcb;
  --primary: #eaaaec;
  --secondary: #f58bec;
  --third: #f88bdf;
}

.shape {
  /* Flexbox properties to center the child image */
  display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 80% 30% 70% / 60% 30% 70% 40%;
  height: 400px;
  width: 500px;
  transition: all 1s ease-in-out;
}

.shape img {
  /* Adjust size as needed */
  height:130px;
  width: 100%;
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  }
}

 .bubble-word {
            font-family: 'Varela Round', sans-serif;
            font-size: 100rem;
            font-weight: bold;
            color: #ee3bc1; /* Baby Blue */
            /* This text-shadow creates the 3D highlight effect */
            text-shadow: 
                -2px -2px 0 #fff,  
                 2px -2px 0 #fff,
                -2px  2px 0 #fff,
                 2px  2px 0 #fff,
                 4px 4px 5px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        
        .bubble-word:hover {
            transform: scale(1.05); /* A little pop on hover */
        }



      
 .gallery img {
  max-inline-size: 100%;
}

.store {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #070707;
  background: #fff;

  /* Use whichever works best for you */
  min-block-size: 100vh;
  min-block-size: 100dvh;
  min-block-size: 100svh;

  display: grid;
  grid-template-columns:
    [sidebar-start]
    5rem
    [sidebar-end main-start]
    1fr
    [main-end];
}

 

.main {
  grid-column: main;
  padding: 1.25rem;
}

/* Photo Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  grid-auto-rows: 12.5rem;
  grid-auto-flow: dense;
  gap: 0.75rem;
}

.gallery figure {
  /* container-type: inline-size; */
  container: figure / inline-size;
  overflow: hidden;

  display: grid;
  /* grid-template-columns: 1fr; */
  /* grid-template-rows: 1fr; */

  /*
    Because 1fr = minmax(auto, 1fr),
    to prevent the grid blowout,
    set the minimum to zero.
  */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.gallery img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;

  /* grid-row: 1 / -1; */
  /* grid-column: 1 / -1; */
  grid-area: 1 / 1 / -1 / -1;

  transition: scale 1s ease-in-out;
}

.gallery figure:hover img {
  scale: 1.125;
}

.gallery figcaption {
  grid-area: 1 / 1 / -1 / -1;
  align-self: end;
  z-index: 1;

  padding: 3em 15% 1em 1em;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.3;
  background: linear-gradient(transparent 25%, rgb(0 0 0 / 0.75));
  display: none;
}

@container figure (width > 20rem) {
  .gallery figcaption {
    display: block;
  }
}

.gallery figcaption h3 {
  font-size: 1.0625rem;
}

.gallery figcaption p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (width > 600px) {
  .gallery figure:nth-child(1) {
    grid-area: span 2 / span 2;
  }

  .gallery figure:nth-child(4n + 1) {
    grid-row: span 2;
  }

  .gallery figure:nth-child(4n + 2) {
    grid-column: span 2;
  }
}