/* Navbar custom tweaks */

body{
  background-color: rgb(228, 229, 233) !important;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
}
.ff-nun{
 font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
}
.navbar-brand {
  font-size: 1.5rem;
  color: #343a40;
}

.z-set{
  z-index: 1;
}

.nav-link {
  color: #1e1c1c;
  transition: color 0.3s;
  /* padding-top: 80px; */
}

.nav-link:hover {
  color: #007bff;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

/* Ensure swiper behaves properly */
.swiper {
  width: 100%;
  padding: 20px 0;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  /* width: auto !important; */
  flex-shrink: 0;
}
.swiper-slide img{
  max-width: 280px;
  height: auto;
}
/* Image styling */
/* Default size for all screens (mobile first) */
 .brand-icon {
  /* width: 100%; */
  /* max-width: 160px; */
  /* height: auto; */
  object-fit: contain;
  padding: 0 10px;
  margin: 50px 50px;
}

/* Input field styling */
.custom-input {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 10px;
}
.custom-gap{
  row-gap: 36px;
}
.btn-wide {
  padding: 12px 95px;
}

.dark-blue{
  color: #2645ac
}
.small-font{
  font-size: 14px;
}
.fixed-img {
    height: 135px; /* Set your desired height */
    object-fit: cover;
    width: 100%;
  }
.custom-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.custom-input:focus {
  background-color: transparent;
  color: white;
  border-color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.sticky-calendar {
  position: sticky;
  top: 100px;
}

.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.calendar-day {
  width: 13%;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #007bff;
  background-color: #f0f4ff;
  cursor: pointer;
  transition: all 0.3s ease;
} */

    .hero-section {
      position: relative;
      z-index: 1;
    }

    .calendar-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .calendar-controls button {
      background: none;
      border: none;
      font-size: 1.25rem;
      color: #0d6efd;
      cursor: pointer;
    }
.calendar-day:hover {
  background-color: #007bff;
  color: white;
}

.calendar-day.invisible {
  visibility: hidden;
}
 .calendar-floater {
      position: fixed;
      top: 100px;
      right: 10%;
      width: 320px;
      z-index: 0; /* lower priority */
    }

.card-setup{
  background: white;
    /* border: 2px solid blue; */
    border-radius: 10px;
    max-width: 28%;
}
.card-image {
  height: 160px;           /* Set desired height */
  object-fit: cover;       /* Keeps image looking good */
  width: auto;            /* Ensures image fills its column */
}

.size-image{
  width: 20px;
}
.size-text{
  font-size: 10px;
}
/* Calendar floating from behind hero */
.sticky-calendar {
  position: sticky;
  top: 100px;
  z-index: 1;
}


/* Sticky logic already exists */
.sticky-calendar {
  position: sticky;
  top: 100px;
}
.faq-shadow{
      border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.equal-height-img {
  height: auto;
  width: 100%;
  object-fit: cover;
  border-radius: 0.375rem; /* matches Bootstrap's rounded */
}


.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
    border-color: transparent;
  }

  /* Remove border on focus */
  .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
  }
  /* Style only the toggle arrow */
.accordion-button::after {
  background-color: #f3f2f5; /* light gray */
  padding: 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}
/* Bold question text */
.accordion-button {
  font-weight: 700;
  color: #5b5959;
}

/* Smaller and lighter answer text */
.accordion-body {
  font-size: 0.9rem;     /* Smaller font */
  color: #555;           /* Softer color */
  font-weight: 400;
}
/* Form inputs on dark background */
.form-control,
.form-select,
textarea {
  background-color: transparent !important;
  color: white !important;
  border: 1.5px solid #ffffff88; /* Slightly transparent white */
  border-radius: 8px;
}

.form-control::placeholder,
textarea::placeholder {
  color: white; /* Light white placeholder */
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  background-color: transparent;
  color: white;
  border-color: #ffc107; /* Optional highlight color on focus */
  box-shadow: none;
  outline: none;
}

.form-check-input {
  background-color: transparent;
  border: 1px solid #fff;
}

.mobile-footer-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #ddd;
  z-index: 1050;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}


/* Gradient Button Style */
.gradient-btn {
  background: linear-gradient(90deg, #00B2FF, #0066FF);
  color: white;
  border: none;
  font-size: 0.9rem;
}
.offcanvas.offcanvas-start {
  background: linear-gradient(to bottom, #007BFF, #00A3FF); /* adjust as needed */
  color: white;
}
.nav-link1 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 8px;
  color: white;
  text-decoration: none;
}
/* Optional: Adjust brand icon size on small screens */
.brand-icon {
  max-height: 60px;
  width: auto;
}

/* Keep swiper height dynamic */
.trustedSwiper {
  max-height: 100%;
}

/* Optional: Ensure images don't overflow */
.swiper-slide img {
  max-width: 100%;
  height: auto;
}
/* Logo Sizing */
.brand-icon {
  max-height: 60px;
  width: auto;
}



/* Prevent slider images from overflowing */
.swiper-slide img {
  max-width: 100%;
  height: auto;
}

/* <!-- Place below your footer or in a CSS file --> */

  input::placeholder {
    color: rgb(108, 107, 107) !important;
    opacity: 1; /* Ensures it’s fully black */
  }
  /* White placeholder for all form controls inside the dark section */
.dark-form ::placeholder {
  color: #fff !important;
  opacity: 0.8; /* Optional: Makes it slightly dimmer than full white */
}

.brand-icon {
  max-height: 60px;
  width: auto;
}



.trustedSwiper {
  min-width: 0; /* prevent overflow in flex row */
}
.mobile-footer-cta {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}


/* <!------------------------------------screen sizes-------------------------------------------> */
/* Reduce size on medium (tablet) and larger screens */
@media (max-width: 576px) {
  .mobile-footer-cta {
    font-size: 0.85rem;
  }
}
/* Make logos appear larger on phones */

@media (max-width: 576px) {
  .brand-icon {
    max-height: 200px;
    margin: 0px;
    padding: 0px;
  }
}
@media (max-width: 576px) {
  .card-setup {
   max-width: 100%;
  }
}

@media (max-width: 576px) {
  .card-setup p {
    max-width: 220px;
    margin-inline: auto; /* center-align if text-center is used */
  }
}