@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");
:root {
  --primary-color: rgb(52, 78, 65);
  --primary-hover-color: rgba(52, 78, 65, 0.8);
  --primary-color-light: rgb(128, 150, 139);
  --theme-background-color: #fffcf2;
}

body {
  background: var(--theme-background-color) !important;
  font-family: "Manrope", sans-serif;
}
.kaushan-font {
  font-family: "Kaushan Script", cursive;
}
.mobile-image {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
  object-fit: cover;
}

.bg-icon {
  background: rgba(52, 78, 65, 0.2) !important;
}

.theme-background-primary {
  background: var(--primary-color) !important;
  color: var(--theme-background-color) !important;
}

.theme-background-primary-hover{
  background: var(--primary-hover-color) !important;
  color: var(--theme-background-color) !important;
}

.theme-background-primary-light{
  background: var(--primary-color-light) !important;
  color: var(--theme-background-color) !important;
}

.theme-background {
  background: var(--theme-background-color) !important;
}

.text-theme {
  color: var(--theme-background-color) !important;
}

.btn-primary {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color);
}
.btn-primary:hover {
  background: var(--primary-hover-color) !important;
  border-color: var(--primary-color-light);
}
.btn-primary-light {
  background: var(--primary-color-light) !important;
  color: white !important;
}

.text-primary {
  color: var(--primary-color) !important;
}
.text-primary-light {
  color: var(--primary-color-light) !important;
}

.bg-primary-light {
  background: var(--primary-color-light) !important;
}
.bg-primary {
  background: var(--primary-color) !important;
}
.hero-bottom-circle {
  height: 650px;
}
.hero-bottom-circle::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 80%);
  width: 600px;
  aspect-ratio: 1/1;
  background: var(--primary-color-light);
  border-radius: 50%;
  z-index: -1;
}

.blogs-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blogs-section div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogs-section div:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/3;
}

.blogs-section div:nth-child(2) {
  grid-column: 2/4;
  grid-row: 1/2;
}

.blogs-section div:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/3;
}
.blogs-section div:nth-child(4) {
  grid-column: 3/4;
  grid-row: 2/4;
}
.blogs-section div:nth-child(5) {
  grid-column: 1/3;
  grid-row: 3/5;
}
.blogs-section-mobile .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary-color) !important;
}

.testimonial-section-mobile .swiper-button-prev::after,
.testimonial-section-mobile .swiper-button-next::after {
  content: "";
}

.divider:after,
.divider:before {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

.transition {
  transition: all 0.3s ease-in-out;
}
.nav-mobile-toggle {
  transform: translateX(-100%);
}
.hero-image img {
  width: 220px !important;
}
.hero-image {
  transform: translate(-50%, 50%) !important;
}
.with-transition {
  opacity: 0;                  /* Start hidden */
  max-height: 0;               /* Collapsed height */
  transition: opacity 0.3s ease, max-height 0.3s ease; /* Smooth fade and collapse */
  width: 100%;                 /* Full width when shown */
  overflow: hidden;            /* Hide content during collapse */
}

.with-transition.show {
  opacity: 1;                  /* Fades in */
  max-height: 500px; 
  margin-top: 0.5rem;          /* mt-2 bootstrap equivalent */
}

      /* App Banner Styling */
      #app_banner {
        display: none; /* Hidden by default */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--primary-color); /* Bootstrap primary color */
        color: white;
        padding: 5px 5px;
        text-align: center;
        font-size: 13px;
        z-index: 1050; /* Ensure it's above other elements */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    .app_banner_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        position: relative;
    }
    .app_banner_store_buttons {
        display: flex;
        gap: 10px;
    }
    .app_banner_store_buttons img {
        height: 35px; /* Default smaller size for mobile */
    }
    .app_banner_close_btn {
        position: absolute;
        right: 5px;
        top: -5px; /* Move it slightly above the banner content */
        background: transparent;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        z-index: 1051;
    }
    @media (min-width: 768px) {
        .app_banner_container {
            flex-direction: row;
            justify-content: center;
        }
        .app_banner_store_buttons img {
            height: 45px; /* Larger size for tablets & desktops */
        }
        .app_banner_close_btn {
            top: 10px; /* Properly aligned for larger screens */
            right: 15px;
        }
    }

@media screen and (max-width: 1024px) {
  .hero-content {
    top: 12% !important;
  }
}
@media screen and (max-width: 767px) {
  .step {
    font-size: 64px !important;
  }
  .hero-bottom-circle {
    height: 550px;
  }
  .istakara-text {
    text-align: justify;
  }
  .hero-content {
    top: 10% !important;
  }
  .download-content {
    padding-top: 6rem !important;
  }
  .why-choose {
    padding-bottom: 5rem !important;
  }
  .choose-section {
    background: none !important;
    gap: 50px;
  }
  .choose-section-content {
    background: var(--primary-color);
    border-radius: 10px;
  }
  .container {
    padding: 0 50px;
  }
  .hero-bottom-circle::after {
    width: 500px;
  }
  .app-section {
    overflow: visible !important;
    background: none !important;
    color: var(--primary-color) !important;
  }
}

@media screen and (max-width: 640px) {
  .app-images img {
    width: 170px !important;
  }
}
@media screen and (max-width: 440px) {
  .container {
    padding: 0 20px;
  }
}
@media screen and (max-width: 450px) {
  .app-images img {
    width: 130px !important;
  }
  .hg-theme-default .hg-button {
    height: 27px !important;
  }
  .hg-button {
    font-size: 10px !important;
  }
}