/*=============== FILE UPLOAD BOX (WHATSAPP MODAL) ===============*/
.file-upload {
    border: 2px dashed #0084FF;
    background: #f8faff;
    padding: 1.5rem;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    color: #333;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}
.file-upload:hover {
    border-color: #006ddb;
    background: #e6f0ff;
}
.file-label {
    margin-top: 0.5rem;
    color: #0084FF;
    font-size: 0.95rem;
}
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;
  
  /*========== Colors ==========*/
  --first-color: #0D2847; /* Dark Navy Blue */
  --first-color-alt: #10345A;
  --accent-color: #0084FF; /* Bright Blue */
  --accent-color-hover: #006DDB;
  --title-color: #FFFFFF;
  --text-color: #C0D6F0;
  --text-color-light: #7E95B3;
  --body-color: #F0F4F8;
  --container-color: #FFFFFF;

  /*========== Font and typography ==========*/
  --body-font: 'Montserrat', sans-serif;
  --title-font: 'Lora', serif;
  --biggest-font-size: 2.75rem;
  --h1-font-size: 2.25rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.25rem;
  --normal-font-size: 1rem;
  --small-font-size: .875rem;
  --smaller-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-bold: 700;

  /*========== z-index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  /*height: auto;*/
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}

.button {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--title-color);
    padding: 0.75rem 1.5rem;
    border-radius: 14px;
    font-weight: var(--font-medium);
    transition: background-color .3s;
}

.button:hover {
    background-color: var(--accent-color-hover);
}

/*=============== HEADER & NAV ===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--first-color);
  z-index: var(--z-fixed);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo img {
  height: 48px;
  display: block;
}

.nav__menu {
  display: flex;
  align-items: center;
}

.nav__list {
  display: flex;
  align-items: center;
  column-gap: 3rem;
}

.nav__link {
  color: var(--title-color);
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  transition: color .3s;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__link i {
    transition: transform .3s;
}

.nav__link:hover {
  color: var(--accent-color);
}

.nav__toggle, .nav__close {
  font-size: 1.5rem;
  color: var(--title-color);
  cursor: pointer;
  display: none;
}

/* Mobile accordion dropdown initially hidden */
.nav__dropdown {
    display: none;
}

/*=============== MEGA MENU (Desktop) ===============*/
.mega-menu {
  background-color: var(--first-color);
  position: right;
  top: var(--header-height);
  z-index: calc(var(--z-fixed) - 1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.mega-menu.active {
  max-height: 500px;
  padding: 2.5rem 0;
  transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}

/* .mega-menu__content {
    display: grid;
    grid-template-columns: repeat(1, 4fr);
    gap: 2rem;
} */
.mega-menu__content {
  display: flex;
  justify-content: center; /* center horizontally */
}

.mega-menu__list ul {
  display: flex;
  gap: 2rem;              /* spacing between items */
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu__list li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
}

 /* Team */
        .team {
            padding: 80px 5%;
            text-align: center;
        }
        
        .team h2 {
            font-size: 2.5rem;
            color:#FFFFFF;
            margin-bottom: 40px;
        }
        
        .team-category {
            margin-bottom: 60px;
        }
        
        .team-category h3 {
            font-size: 1.8rem;
            color: #FFFFFF;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4a9df7;
            display: inline-block;
        }
        
        .team-members {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        .team-member {
            background: white;
            border-radius: 15px;
            padding: 20px;
            width: 250px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: 0.3s;
        }
        
        .team-member:hover {
            transform: translateY(-5px);
        }
        
        .team-member-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 15px;
            border: 5px solid #f1f7ff;
            background: #e3f2fd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            color: #1a4dbd;
        }
        
        .team-member h4 {
            font-size: 1.2rem;
            color: #0a3d62;
            margin-bottom: 5px;
        }
        
        .team-member p {
            color: #4a9df7;
        }
       
        .contact-link {
          color: white;          /* makes number white */
          font-weight: bold;     /* makes number bold */
          text-decoration: none; /* removes underline */
        }

        .contact-link:hover {
          color: lightgray;      /* number turns light gray when mouse hovers */
        }

        
        
.mega-menu__title {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-weight: var(--font-medium);
}

.mega-menu__list ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mega-menu__list a {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-color);
}

.mega-menu__list a:hover span {
    color: var(--accent-color);
}

.mega-menu__list i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.mega-menu__list span {
    font-weight: var(--font-medium);
    color: var(--title-color);
    font-size: var(--normal-font-size);
    transition: color .3s;
}

.mega-menu__list p {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
    
}

.article-card {
    background-color: var(--first-color-alt);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.article-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.article-card h4 {
    font-size: var(--normal-font-size);
    margin-bottom: 0.25rem;
}

.article-card p {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
    margin-bottom: 0.75rem;
}

.article-card .read-more {
    color: var(--accent-color);
    font-weight: var(--font-medium);
    font-size: var(--small-font-size);
}

.see-all {
    color: var(--accent-color);
    font-weight: var(--font-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/*=============== HERO SECTION ===============*/
.hero {
    height: 100vh;
    background: url('images/indian-healthcare-professional.jpg') no-repeat center center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: clamp(1rem, 6vw, 6rem);
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(13, 40, 71, 0.8) 0%, rgba(13, 40, 71, 0.3) 60%, rgba(13, 40, 71, 0) 100%);
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: left; /* ensure left alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(13, 40, 71, 0.8) 0%, rgba(13, 40, 71, 0.3) 60%, rgba(13, 40, 71, 0) 100%);
}

.hero {
  height: 100vh;
  background: url('images/indian-healthcare-professional.jpg') no-repeat center center/cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(1rem, 6vw, 6rem);
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3); /* White overlay to soften */
  /* OR use: background: rgba(0, 0, 0, 0.2); for dark overlay */
  pointer-events: none;
}
/* Force left alignment and left-aligned children */
.hero__content,
.hero__content.container,
.hero .container.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* left-align flex children */
  text-align: left !important; /* override other text-align rules */
  width: 100%;
  max-width: 720px; /* limit line length, adjust as needed */
  margin: 0; /* remove any auto-centering from container */
}

/* Headline: keep left aligned and responsive */
.hero__content h1 {
  font-family: var(--title-font);
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: 2rem;
  max-width: none; /* remove 15ch if it was causing tight wrapping */
  text-align: left; /* explicit */
}

/* .hero__content h1 {
    font-family: var(--title-font);
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    max-width: 15ch;
    text-align: left;
} */

.button--hero {
    background-color: #E9ECEF;
    color: #343A40;
    padding: 1rem 2rem;
    font-size: var(--normal-font-size);
    font-weight: var(--font-bold);
}

.button--hero:hover {
    background-color: #FFFFFF;
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (max-width: 992px) {
    .nav__list {
        column-gap: 2rem;
    }
    .mega-menu__content {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero__content h1 {
        font-size: 3.5rem;
    }
}

/* For small devices */
@media screen and (max-width: 768px) {
    /* Hide desktop mega menu on mobile */
    .mega-menu {
        display: none;
    }

    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--first-color);
        flex-direction: column;
        justify-content: center;
        transition: right .4s;
        padding: 0 1.5rem;
    }

    .nav__list {
        flex-direction: column;
        row-gap: 1rem;
        width: 100%;
    }

    .nav__item {
        width: 100%;
    }

    .nav__link {
        font-size: var(--h2-font-size);
        justify-content: center;
        padding: 0.5rem 0;
    }

    .nav__close {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1.5rem;
    }

    .nav__toggle {
        display: block;
    }

    .button--header {
        display: none;
    }

    .show-menu {
        right: 0;
    }

    /* ====== NEW STYLES FOR MOBILE ACCORDION ====== */
    .nav__item--dropdown .nav__link {
        justify-content: center; /* Center link text and arrow */
    }

    .nav__dropdown {
        display: block;
        background-color: var(--first-color-alt);
        border-radius: 4px;
        margin-top: 0.5rem;
        padding: 1rem 1.5rem;
        
        /* Accordion animation */
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }

    .nav__item--dropdown.active > .nav__dropdown {
        max-height: 500px; /* Or a larger value if needed */
    }

    .nav__item--dropdown.active .nav__link-arrow {
        transform: rotate(180deg);
    }
    
    .nav__dropdown-title {
        font-size: var(--normal-font-size);
        color: var(--text-color-light);
        margin-bottom: 0.75rem;
    }

    .nav__dropdown-title:not(:first-child){
        margin-top: 1rem;
    }

    .nav__dropdown-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .nav__dropdown-link {
        color: var(--text-color);
        font-size: var(--h3-font-size);
    }
    
    .hero__content {
        /* text-align: center; */
    }
    
    .hero__overlay {
        background: linear-gradient(90deg, rgba(13, 40, 71, 0.85) 0%, rgba(13, 40, 71, 0.5) 100%);
    }

    .hero__content h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
}

/*=============== WELCOME SECTION (NEW) ===============*/
.welcome {
    background-color: #003166;
    padding: 6rem 0;
    color: white;
}

.welcome__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.welcome__heading h2 {
    font-family: var(--title-font);
    color: var(--welcome-text-color);
    font-size: 3.5rem;
    line-height: 1.2;
}

.welcome__description {
    color: var(--welcome-text-color);
    font-size: var(--normal-font-size);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.welcome__stats {
    display: flex;
    gap: 4rem;
}

.stat__item h3 {
    font-family: var(--body-font);
    font-size: 3.5rem;
    font-weight: var(--font-bold);
    color: var(--welcome-text-color);
}

.stat__item p {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: var(--welcome-text-color);
}

/* Responsive styles for Welcome Section */
@media screen and (max-width: 992px) {
    .welcome__container {
        gap: 2rem;
    }
    .welcome__heading h2,
    .stat__item h3 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 768px) {
    .welcome {
        padding: 4rem 0;
    }
    .welcome__container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .welcome__heading {
        text-align: center;
    }
    .welcome__heading h2 {
        font-size: 2.25rem;
    }
    .welcome__stats {
        justify-content: center;
        gap: 3rem;
    }
}

/*=============== SERVICES SECTION (NEW) ===============*/
/* .services {
    background-color: #ffd351;
    padding: 6rem 0;
    color: black;
}

.services__header {
    text-align: center;
    margin-bottom: 4rem;
}

.services__header h2 {
    color: var(--services-title-color);
    font-family: var(--body-font);
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.services__header p {
    color: var(--services-text-color);
    font-size: var(--normal-font-size);
    max-width: 500px;
    margin: 0 auto;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card {
    background-color: #ffc107;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.card__icon {
    width: 68px;
    height: 68px;
    background-color: var(--services-bg-color);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.75rem;
    color: var(--services-title-color);
    margin-bottom: 1.5rem;
}

.card__tagline {
    font-size: var(--small-font-size);
    color: var(--services-text-color);
    margin-bottom: 0.5rem;
}

.card__title {
    color: var(--services-title-color);
    font-family: var(--body-font);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.card__description {
    color: var(--services-text-color);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.card__link {
    color: var(--services-title-color);
    font-weight: var(--font-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.card__link i {
    transition: transform .3s;
}

.card__link:hover i {
    transform: translateX(4px);
}

.card__image {
    background-color: var(--card-image-bg);
    border-radius: 8px;
    margin-top: 1.5rem;
    height: 120px;

    background-repeat: no-repeat;
    background-position: center;
}

#card__image-1 {
    background-image: url("images/indian-healthcare-professional.jpg");
    background-size: cover;
}

#card__image-2 {
    background-image: url("images/indian-healthcare-professional.jpg");
    background-size: cover;
}

#card__image-3 {
    background-image: url("images/indian-healthcare-professional.jpg");
    background-size: cover;
} */

.services {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    padding: 6rem 0;
    color: black;
}

.services__header {
    text-align: center;
    margin-bottom: 4rem;
}

.services__header h2 {
    font-size: 3rem;
    color: #2c2c2c;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.services__header p {
    font-size: 1.1rem;
    color: #4a4a4a;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.services__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 25px;
    align-items: stretch;
}

.card {
    background: rgba(255, 193, 7, 0.9);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.card--large {
    background: rgba(255, 193, 7, 1);
    padding: 30px;
}

/* Main featured card spans 2 rows */
.card--large:first-child {
    grid-row: span 2;
    padding: 40px;
}

.card__icon {
    width: 68px;
    height: 68px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #2c2c2c;
    margin-bottom: 20px;
}

.card__title {
    color: #2c2c2c;
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Main card title larger */
.card--large:first-child .card__title {
    font-size: 2.2rem;
}

.card__description {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    font-size: 0.95rem;
}

/* Main card description larger */
.card--large:first-child .card__description {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.card__link {
    color: #2c2c2c;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.card__link:hover {
    transform: translateX(4px);
}

.card__link i {
    transition: transform .3s;
}

.card__link:hover i {
    transform: translateX(4px);
}

.card__image {
    margin-top: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Main card image taller */
.card--large:first-child .card__image {
    height: 250px;
}

/* Specific background images for each card */
#card__image-1 {
    background-image: url("images/img1.jpeg");
}

#card__image-2 {
    background-image: url("images/indian-healthcare-professional.jpg");
}

#card__image-3 {
    background-image: url("images/img2.jpeg");
}

/* Responsive styles for Services Section */
@media screen and (max-width: 992px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .services {
        padding: 4rem 0;
    }
    .services__grid {
        grid-template-columns: 1fr;
    }
    .services__header h2 {
        font-size: 2rem;
    }
}

.diagnostic-services {
    max-width: 1200px;
    margin: 0 auto;
}

.container {
    width: 100%;
}

.header {
    text-align: center;
    margin-bottom: 60px;
}

.header h1 {
    font-size: 3rem;
    color: #2c2c2c;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.header p {
    font-size: 1.1rem;
    color: #4a4a4a;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 25px;
    align-items: stretch;
}

.service-card {
    background: rgba(255, 193, 7, 0.9);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.main-card {
    grid-row: span 2;
    background: rgba(255, 193, 7, 1);
    padding: 40px;
}

.main-card h2 {
    font-size: 2.2rem;
    color: #2c2c2c;
    margin-bottom: 15px;
    font-weight: 600;
}

.main-card p {
    font-size: 1.1rem;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 30px;
}

.service-image {
    margin-top: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.service-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.service-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #2c2c2c;
}

.service-card h3 {
    font-size: 1.4rem;
    color: #2c2c2c;
    margin-bottom: 15px;
    font-weight: 600;
}

.service-card p {
    font-size: 0.95rem;
    color: #4a4a4a;
    line-height: 1.5;
    flex-grow: 1;
}

/* Why-Choose Us Section */

.why-choose-us {
    background-color: rgb(241, 206, 78);
    margin: 0;
    color: black;
}

/* Main Layout */
.why-choose-us-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header Section */
.why-choose-us-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.why-choose-us-header h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: black;
}

.why-choose-us-header p {
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: black;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Individual Feature Cards */
.feature-card {
    background-color: rgb(232, 187, 23);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.yellow-card {
    background-color: rgb(240, 189, 5);
}

.feature-card-content {
    flex-grow: 1;
}

.feature-card h2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: black;
}

.feature-card p {
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin: 0;
}

.feature-card .feature-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 0.5rem;
}

/* Specific Card Layouts */
.best-prices-feature {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
}

.easy-prescription-feature {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.expert-radiologist-feature {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
}

.conveniently-located-feature, .fast-appointment-feature {
    grid-column: span 1;
    flex-direction: row;
    align-items: center;
}

.features-grid > :nth-child(1) { grid-row: 1 / 3; }
.features-grid > :nth-child(2) { grid-row: 1 / 2; }
.features-grid > :nth-child(3) { grid-row: 2 / 3; }
.features-grid > :nth-child(4) { grid-row: 3 / 4; }
.features-grid > :nth-child(5) { grid-row: 3 / 4; }


/* Image Placeholders */
.feature-card-image-bottom, .feature-card-image-left {
    background-color: rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.best-prices-feature .feature-card-image-bottom {
    flex-grow: 1;
    min-height: 500px;
    margin-top: 1rem;
    background-image: url('images/best-price.jpeg');
    object-fit: fill;
}

.easy-prescription-feature .feature-card-image-left {
    width: 50%;
    min-width: 150px;
    height: 100%;
    margin-right: 1rem;
    background-image: url('images/happy-doctor-with-patients.jpg');
}

.expert-radiologist-feature .feature-card-image-bottom {
    flex-grow: 1;
    min-height: 200px;
    margin-top: 1rem;
    background-image: url('images/doctor-patient-1.jpg');
}

/* Icons */
.feature-icon-container {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
}

.feature-icon-container svg {
    width: 100%;
    height: 100%;
    color: #444;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .features-grid > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        flex-direction: column !important;
    }

    .easy-prescription-feature .feature-card-image-left {
        width: 100%;
        height: 150px;
        margin: 0 0 1rem 0;
    }
}

/*=============== ACCURACY & CARE SECTION (NEW) ===============*/
.accuracy-care {
    background-color: rgb(241, 206, 78);
    padding: 6rem 0;
    border-top: 1px solid rgba(61, 45, 0, 0.1);
    color: black;
}

.accuracy-care__header {
    text-align: center;
    margin-bottom: 4rem;
}

.accuracy-care__header h2 {
    font-family: var(--title-font);
    color: var(--why-choose-text);
    font-size: 2.5rem;
}

.accuracy-care__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.care-card {
    text-align: center;
}

.care-card__image {
    margin-bottom: 1.5rem;
}

.care-card__image img {
    border-radius: 16px;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.care-card h3 {
    color: var(--why-choose-text);
    font-family: var(--body-font);
    font-size: var(--h3-font-size);
    margin-bottom: 0.75rem;
}

.care-card__tagline {
    color: var(--why-choose-text);
    font-style: italic;
    line-height: 1.6;
    opacity: 0.9;
}

.torn-effect img {
    /* Generated via https://bennettfeely.com/clippy/ */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 80% 82%, 70% 100%, 60% 80%, 50% 100%, 40% 85%, 30% 100%, 20% 80%, 10% 100%, 0 80%);
}


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */

@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .accuracy-care__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .why-choose { padding: 4rem 0; }
    .why-choose__header h2 { font-size: 2rem; }
    .why-choose__grid {
        grid-template-columns: 1fr;
    }
    
    .accuracy-care { padding: 4rem 0; }
    .accuracy-care__header h2 { font-size: 2rem; }
    .accuracy-care__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/*=============== BOOKING SECTION (NEW) ===============*/
.booking {
    background-color: var(--first-color-alt);
    padding: 6rem 0;
}

.booking__header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--booking-text-color);
}

.booking__tagline {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: white;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.booking__header h2 {
    font-family: var(--title-font);
    color: white;
    font-size: 2.75rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.booking__header p {
    font-size: var(--normal-font-size);
    line-height: 1.6;
    color: white;
}

.booking__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.booking-card {
    background-color: var(--first-color-alt); /* Slightly lighter dark blue */
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes content and image */

    /* Animation initial state */
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

.booking-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.booking-card__image {
    width: 100%;
    height: 150px; /* Fixed height for consistency */
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.booking-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.booking-card h3 {
    font-family: var(--body-font);
    color: var(--booking-title-color);
    font-size: var(--h3-font-size);
    margin-bottom: 0.75rem;
}

.booking-card p {
    font-size: var(--small-font-size);
    line-height: 1.6;
    color: white;
    flex-grow: 1; /* Ensures text takes available space */
}


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */

@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .accuracy-care__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
    .booking__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .booking-card h3 { font-size: var(--normal-font-size); }
}

@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .accuracy-care { padding: 4rem 0; }
    .accuracy-care__header h2 { font-size: 2rem; }
    .accuracy-care__grid { grid-template-columns: 1fr; gap: 3rem; }

    .booking { padding: 4rem 0; }
    .booking__header h2 { font-size: 2.25rem; }
    .booking__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .booking-card { padding: 1.25rem; }
    .booking-card__image { 
        height: auto; 
        margin-bottom: 1rem; 
    }
    .booking-card__image img {
        height: auto;
        object-fit: contain;
    }
    .booking-card h3 { font-size: var(--h3-font-size); }
    .booking-card p { font-size: var(--smaller-font-size); }
}

/*=============== PRECISION SECTION (NEW) ===============*/
.precision {
    background-color: #a5def8;
    padding: 6rem 0;
    overflow: hidden; /* Prevents overflow from absolutely positioned images */
    color: black;
}

.precision__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.precision__text h2 {
    font-family: var(--title-font);
    color: var(--precision-text-color);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.precision__text p {
    color: var(--precision-text-color);
    line-height: 1.6;
    opacity: 0.8;
}

.precision__collage {
    position: relative;
    min-height: 450px; /* Provides space for the images */
}

.precision__collage img {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.collage-img-1 {
    width: 80%;
    height: 350px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

.collage-img-2 {
    width: 50%;
    height: 250px;
    top: 0;
    right: 0;
    z-index: 2;
}

.collage-img-3 {
    width: 60%;
    height: 200px;
    bottom: 0;
    right: 10%;
    z-index: 2;
}


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .precision__container {
        gap: 2rem;
    }
    .precision__text h2 {
        font-size: 2.75rem;
    }
    .precision__collage {
        min-height: 400px;
    }
    .collage-img-1 { height: 300px; }
    .collage-img-2 { height: 220px; }
    .collage-img-3 { height: 180px; }
}


@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .booking { padding: 4rem 0; }
    .booking__header h2 { font-size: 2.25rem; }
    .booking__grid { grid-template-columns: 1fr; gap: 2rem; }

    .precision { padding: 4rem 0; }
    .precision__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .precision__text {
        text-align: center;
    }
    .precision__text h2 { font-size: 2.25rem; }
    
    .precision__collage {
        min-height: 350px; /* Adjust height for mobile */
    }
    .collage-img-1 {
        width: 75%;
        height: 280px;
    }
    .collage-img-2 {
        width: 45%;
        height: 200px;
    }
    .collage-img-3 {
        width: 55%;
        height: 160px;
        right: 5%;
    }
}

/*=============== BENEFITS SECTION (NEW) ===============*/
.benefits {
    background-color: #a5def8;
    padding: 6rem 0;
    color: black;
}

.benefits__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefits__content h2 {
    font-family: var(--title-font);
    color: var(--benefits-heading-color);
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.benefits__content p {
    color: var(--benefits-text-color);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.benefits__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.benefits__list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--benefits-text-color);
    font-weight: var(--font-medium);
}

.benefits__list i {
    font-size: 1.5rem;
    color: var(--first-color);
}

.benefits__image img {
    border-radius: 16px;
    width: 100%;
    height: 450px;
}


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .precision__container { gap: 2rem; }
    .precision__text h2 { font-size: 2.75rem; }
    .precision__collage { min-height: 400px; }
    .collage-img-1 { height: 300px; }
    .collage-img-2 { height: 220px; }
    .collage-img-3 { height: 180px; }
    .benefits__container { gap: 2rem; }
    .benefits__content h2 { font-size: 2.5rem; }
}


@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .precision { padding: 4rem 0; }
    .precision__container { grid-template-columns: 1fr; gap: 3rem; }
    .precision__text { text-align: center; }
    .precision__text h2 { font-size: 2.25rem; }
    .precision__collage { min-height: 350px; }

    .benefits { padding: 4rem 0; }
    .benefits__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .benefits__image {
        order: -1; /* Puts image on top on mobile */
    }
    .benefits__content {
        text-align: center;
    }
    .benefits__list li {
        justify-content: center;
    }
}

/*=============== COMPREHENSIVE SECTION (NEW) ===============*/
.comprehensive {
    background-color: rgb(241, 206, 78);
    color: black;
    padding: 6rem 0;
    border-top: 1px solid rgba(61, 45, 0, 0.1);
}

.comprehensive__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.comprehensive__content h2 {
    font-family: var(--title-font);
    color: var(--why-choose-text);
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.comprehensive__content > p {
    color: var(--why-choose-text);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 50ch; /* Improves readability */
}

.sub-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.sub-service__item h3 {
    color: var(--why-choose-text);
    font-family: var(--body-font);
    font-size: var(--h3-font-size);
    margin-bottom: 0.5rem;
}

.sub-service__item p {
    color: var(--why-choose-text);
    font-size: var(--small-font-size);
    line-height: 1.6;
}

.comprehensive__image img {
    border-radius: 16px;
    width: 100%;
}


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */

@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .benefits__container { gap: 2rem; }
    .benefits__content h2 { font-size: 2.5rem; }

    .comprehensive__container { gap: 2rem; }
    .comprehensive__content h2 { font-size: 2.5rem; }
}


@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .benefits { padding: 4rem 0; }
    .benefits__container { grid-template-columns: 1fr; gap: 3rem; }
    .benefits__image { order: -1; }
    .benefits__content { text-align: center; }
    .benefits__list li { justify-content: center; }

    .comprehensive { padding: 4rem 0; }
    .comprehensive__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .comprehensive__image {
        order: -1;
    }
    .comprehensive__content {
        text-align: center;
    }
}

/*=============== FACILITIES SECTION (NEW) ===============*/
.facilities {
    background-color: var(--first-color-alt);
    padding: 6rem 0;
}

.facilities__container {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 4rem;
    align-items: center;
}

.facilities__content h2 {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.facilities__content p {
    color: var(--text-color);
    line-height: 1.6;
}

.facilities__image img {
    border-radius: 16px;
    width: 100%;
    height: 550px;
}


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */

@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .comprehensive__container { gap: 2rem; }
    .comprehensive__content h2 { font-size: 2.5rem; }

    .facilities__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .facilities__content h2 {
        font-size: 2.5rem;
    }
}


@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .comprehensive { padding: 4rem 0; }
    .comprehensive__container { grid-template-columns: 1fr; gap: 3rem; }
    .comprehensive__image { order: -1; }
    .comprehensive__content { text-align: center; }

    .facilities { padding: 4rem 0; }
    .facilities__container {
        grid-template-columns: 1fr;
    }
    .facilities__content {
        text-align: center;
    }
    .facilities__content h2 {
        font-size: 2.25rem;
    }
}

/*=============== TESTIMONIALS SECTION (NEW) ===============*/
.testimonials {
    background-color: #f1ce4e;
    padding: 6rem 0;
    color: black;
    
}

.testimonials__header {
    text-align: center;
    margin-bottom: 4rem;
}

.testimonials__header h2 {
    font-family: var(--title-font);
    color: var(--benefits-heading-color);
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.testimonials__header p {
    color: var(--benefits-text-color);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

.testimonial-slider {
    position: relative;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    flex: 0 0 100%; /* For mobile-first approach */
    max-width: 100%;
    background-color: #ffc107e6;

    /* var(--services-bg-color); */
    
    padding: 2.5rem;
    border-radius: 16px;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
}

.card-stars {
    color: var(--why-choose-bg);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.card-quote {
    color: var(--services-title-color);
    line-height: 1.6;
    flex-grow: 1; /* Pushes author to the bottom */
    margin-bottom: 2rem;
}

.card-author h4 {
    color: var(--services-title-color);
    font-size: var(--normal-font-size);
}

.card-author p {
    color: var(--services-text-color);
    font-size: var(--small-font-size);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 1px solid #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--services-title-color);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.slider-btn:hover {
    background-color: var(--first-color);
    color: #fff;
}
.slider-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-btn.prev {
    left: 10px;
}
.slider-btn.next {
    right: 10px;
}

/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
/*@media screen and (min-width: 768px) {*/
/*    .testimonial-card { 
        flex-basis: 50%; /* 
/*        max-width: 50%;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1024px) {*/
/*    .testimonial-card {
        flex-basis: 33.333%; 
/*        max-width: 33.333%;*/
/*    }*/
/*}*/

/*=============== TEAM SECTION (NEW) ===============*/
/*.team {*/
/*    background-color: var(--first-color);*/
/*    padding: 6rem 0;*/
/*}*/

/*.team__header {*/
/*    text-align: center;*/
/*    margin-bottom: 4rem;*/
/*}*/

/*.team__header h2 {*/
/*    font-family: var(--title-font);*/
/*    color: var(--booking-title-color);*/
/*    font-size: 2.75rem;*/
/*    margin-bottom: 1rem;*/
/*}*/

/*.team__header p {*/
/*    color: var(--booking-text-color);*/
/*}*/

/*.team__grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(4, 1fr);*/
/*    gap: 2.5rem 2rem;*/
/*}*/

/*.team-card {*/
/*    color: var(--booking-text-color);*/
/*}*/

/*.team-card__photo {*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    border-radius: 50%;*/
/*    background-color: var(--first-color-alt);*/
/*    margin-bottom: 1.5rem;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-size: 2rem;*/
/*}*/

/*.team-card h3 {*/
/*    font-family: var(--body-font);*/
/*    font-size: 1.25rem;*/
/*    color: var(--booking-title-color);*/
/*    margin-bottom: 0.25rem;*/
/*}*/

/*.team-card__title {*/
/*    font-size: var(--small-font-size);*/
/*    margin-bottom: 1rem;*/
/*    line-height: 1.4;*/
/*}*/

/*.team-card__description {*/
/*    font-size: var(--small-font-size);*/
/*    line-height: 1.6;*/
/*}*/

/*.team-card__socials {*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    margin-top: 1rem;*/
/*}*/

/*.team-card__socials a {*/
/*    color: var(--booking-title-color);*/
/*    font-size: 1.25rem;*/
/*    transition: color 0.3s;*/
/*}*/

/*.team-card__socials a:hover {*/
/*    color: var(--accent-color);*/
/*}*/

/*.team__hiring {*/
/*    text-align: center;*/
/*    margin-top: 5rem;*/
/*    padding-top: 3rem;*/
/*    border-top: 1px solid var(--first-color-alt);*/
/*}*/

/*.team__hiring h3 {*/
/*    font-family: var(--body-font);*/
/*    font-size: 1.75rem;*/
/*    color: var(--booking-title-color);*/
/*    margin-bottom: 0.5rem;*/
/*}*/

/*.team__hiring p {*/
/*    color: var(--booking-text-color);*/
/*}*/


/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .facilities { padding: 4rem 0; }
    .facilities__container { grid-template-columns: 1fr; }
    .facilities__content { text-align: center; }
    .facilities__content h2 { font-size: 2.25rem; }

    .team { padding: 4rem 0; }
    .team__header h2 { font-size: 2.25rem; }
    .team__grid {
        grid-template-columns: 1fr;
    }
}

/*=============== FAQ SECTION (NEW) ===============*/
.faq {
    background-color: rgb(241, 206, 78);
    padding: 6rem 0;
    color: black;
}

.faq__header {
    text-align: center;
    margin-bottom: 4rem;
}

.faq__header h2 {
    font-family: var(--title-font);
    color: var(--why-choose-text);
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.faq__header p {
    color: var(--why-choose-text);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 5rem;
}

.faq-item {
    background-color: rgb(237, 185, 14);
    border-radius: 12px;
    padding: 1.5rem;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.faq-question span {
    font-family: var(--body-font);
    font-size: 1.1rem;
    font-weight: var(--font-bold);
    color: var(--why-choose-text);
}

.faq-question i {
    font-size: 1.5rem;
    color: var(--why-choose-text);
    /*transition: transform 0.3s ease;*/
}

.faq-item.active .faq-question i {
     /*transform: rotate(45deg); */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding-top 0.4s ease-out;
}
.faq-answer p {
    color: var(--why-choose-text);
    line-height: 1.6;
    font-size: var(--small-font-size);
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust if answers are longer */
    padding-top: 1rem;
    transition: max-height 0.4s ease-in, padding-top 0.4s ease-in;
}

.faq__cta {
    text-align: center;
}
.faq__cta h2 {
    font-family: var(--title-font);
    color: var(--why-choose-text);
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}
.faq__cta p {
    color: var(--why-choose-text);
    margin-bottom: 1.5rem;
}
.button-contact {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: 2px solid var(--why-choose-text);
    color: var(--why-choose-text);
    border-radius: 8px;
    font-weight: var(--font-bold);
    text-decoration: none;
    transition: all 0.3s;
}
.button-contact:hover {
    background-color: var(--why-choose-text);
    color: var(--why-choose-bg);
}

/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .team { padding: 4rem 0; }
    .team__header h2 { font-size: 2.25rem; }
    .team__grid { grid-template-columns: 1fr; }

    .faq { padding: 4rem 0; }
    .faq__header h2 { font-size: 2.25rem; }
    .faq__grid {
        grid-template-columns: 1fr;
    }
}

/*=============== FOOTER SECTION (NEW) ===============*/
.footer {
    background-color: rgb(87, 4, 4);
    padding: 6rem 0;
    color: var(--title-color);
}

.footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 3rem;
}

.footer__intro .tagline {
    color: var(--text-color-light);
}

.footer__intro h2 {
    font-family: var(--title-font);
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.footer__intro p {
    color: var(--text-color);
    line-height: 1.6;
}

.footer__contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-item i {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.contact-item h4 {
    font-size: var(--normal-font-size);
    margin-bottom: 0.25rem;
}
.contact-item p {
    font-size: var(--small-font-size);
    color: var(--text-color);
}

.footer__map a {
    display: block;
    border-radius: 16px;
    overflow: hidden;
}

.footer__map img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.footer__map a:hover img {
    transform: scale(1.03);
}

/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .faq { padding: 4rem 0; }
    .faq__header h2 { font-size: 2.25rem; }
    .faq__grid { grid-template-columns: 1fr; }
    
    .footer { padding: 4rem 0; }
    .footer__main {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }
    .footer__contact-details {
        text-align: left;
    }
}

/*=============== FOOTER SECTION (NEW) ===============*/
.site-footer {
    background-color: var(--benefits-bg); /* White background for the whole area */
    color: black;
    padding: 3rem 0;
    font-size: var(--small-font-size);
}

.footer-main {
    background-color: var(--footer-bg);
    padding: 3rem;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
}

.footer-logo {
    display: block;
    margin-bottom: 1rem;
}
.footer-logo img {
    height: 68px;
}

.footer-col p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.newsletter-form {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.newsletter-form input {
    width: 100%;
    padding: 0.75rem 6rem 0.75rem 1rem;
    border: 1px solid #DEE2E6;
    border-radius: 8px;
    background-color: #fff;
}
.newsletter-form input::placeholder {
    color: var(--footer-text-color);
}

.newsletter-form button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    padding: 0 1.25rem;
    border: none;
    background-color: var(--footer-heading-color);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: var(--font-medium);
}

.consent-text {
    font-size: 12px;
    opacity: 0.8;
}

.footer-col h4 {
    color: var(--footer-heading-color);
    font-size: var(--normal-font-size);
    margin-bottom: 1rem;
    font-weight: var(--font-medium);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-col a {
    color: var(--footer-text-color);
    text-decoration: none;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-col a:hover {
    color: var(--footer-heading-color);
}

.footer-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0 0 0;
    border-top: 1px solid #E9ECEF;
    margin-top: 3rem;
}

.legal-links {
    display: flex;
    gap: 1.5rem;
}

.legal-links a {
    color: var(--footer-text-color);
    text-decoration: none;
}
.legal-links a:hover {
    color: var(--footer-heading-color);
}

/*=============== BREAKPOINTS ===============*/
/* ... (previous responsive rules) ... */
@media screen and (max-width: 992px) {
    /* ... (abbreviated) ... */
    .team__grid { grid-template-columns: repeat(2, 1fr); }
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    /* ... (abbreviated) ... */
    .team { padding: 4rem 0; }
    .team__header h2 { font-size: 2.25rem; }
    .team__grid { grid-template-columns: 1fr; }

    .footer-main {
        grid-template-columns: 1fr;
        padding: 2rem;
    }
    .footer-sub {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            overflow-y: auto;
            padding: 20px;
        }
        
        .modal-content {
            background: white;
            margin: 40px auto;
            border-radius: 15px;
            max-width: 800px;
            width: 100%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            animation: modalFade 0.3s;
        }
        
        @keyframes modalFade {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 28px;
            color: #aaa;
            cursor: pointer;
            z-index: 10;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        .modal-header {
            background: linear-gradient(120deg, #1a4dbd, #4a9df7);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        .modal-header h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        /* Form Controls */
        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #0a3d62;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e1e5eb;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: #4a9df7;
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 157, 247, 0.1);
        }
        
        .select-wrapper {
            position: relative;
        }
        
        .select-wrapper::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
            pointer-events: none;
        }
        
        select.form-control {
            appearance: none;
            background: white;
        }
        
        .time-selection {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        
        .time-option {
            padding: 12px 5px;
            background: #f0f5ff;
            border: 2px solid #dbe5ff;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            font-weight: 500;
        }
        
        .time-option:hover {
            background: #e0eaff;
        }
        
        .time-option.selected {
            background: #4a9df7;
            color: white;
            border-color: #1a4dbd;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: #1a4dbd;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            text-align: center;
            text-decoration: none;
            margin-top: 20px;
        }
        
        .btn:hover {
            background: #153e9d;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .btn-whatsapp {
            background: #25D366;
        }
        
        .btn-whatsapp:hover {
            background: #128C7E;
        }
        
        .message-preview {
            background: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
            border-left: 4px solid #4a9df7;
        }
        
        .message-preview h3 {
            color: #1a4dbd;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
        }
        
        #messageOutput {
            white-space: pre-wrap;
            line-height: 1.6;
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e1e5eb;
            font-size: 14px;
        }