/* =====================================================
   COMFORT TIME CENTER - Inner Pages Stylesheet
   ===================================================== */

/* =====================================================
   PAGE HEADERS
   ===================================================== */
.page-header {
    background-color: #4a8c1c;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 280px;
    margin: 20px;
    border-radius: 25px;
    overflow: hidden;
}

.page-header .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 60px;
    text-align: left;
}

.page-header h1 {
    font-size: 48px;
    color: var(--white);
    font-family: 'Tenor Sans', serif;
    font-weight: 400;
    text-align: left;
}

/* RTL text alignment for Arabic */
[dir="rtl"] .page-header {
    justify-content: flex-end;
}

[dir="rtl"] .page-header .container {
    text-align: right;
}

[dir="rtl"] .page-header h1 {
    text-align: right;
}

/* Page-specific header backgrounds */
.page-header-about {
    background-image: url('../images/about_us_en.png');
}

.page-header-services {
    background-image: url('../images/our_services_en.png');
}

.page-header-contact {
    background-image: url('../images/contact_us_en.png');
}

/* Arabic RTL header backgrounds */
[dir="rtl"] .page-header-about {
    background-image: url('../images/about_us_ar.png');
}

[dir="rtl"] .page-header-services {
    background-image: url('../images/our_services_ar.png');
}

[dir="rtl"] .page-header-contact {
    background-image: url('../images/contact_us_ar.png');
}

/* =====================================================
   ABOUT PAGE STYLES
   ===================================================== */
.about-intro-section {
    padding: 80px 0;
}

.about-intro-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
}

.about-intro-content {
    text-align: center;
}

.about-intro-logo {
    margin-bottom: 25px;
}

.about-intro-logo img {
    width: 80px;
    height: auto;
    margin: 0 auto;
}

/* Hierarchy intentionally inverted from the typical eyebrow→title pattern,
   per client request: the "Welcome to Comfort Time" line should read as
   the dominant element and the green tagline below it as a secondary
   subtitle. We keep the uppercase + letter-spacing on the welcome line
   so it still has the formal "establishment" feel — just at display size.
   The letter-spacing is dialed back from 2px to 1px so the longer line
   doesn't get awkwardly stretched at the bigger size. */
.about-intro-subtitle {
    font-family: 'Tenor Sans', serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #4F7661;
    margin-bottom: 18px;
    text-transform: uppercase;
    line-height: 1.2;
}

.about-intro-title {
    font-family: 'Tenor Sans', serif;
    font-size: 26px;
    color: #4DB700;
    margin-bottom: 25px;
    line-height: 1.3;
    font-weight: 400;
}

.about-intro-text {
    font-family: 'Tenor Sans', serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-gray);
}

.about-intro-image img {
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    height: auto;
}

/* RTL adjustments for About Intro */
[dir="rtl"] .about-intro-wrapper {
    direction: rtl;
}

[dir="rtl"] .about-intro-content {
    text-align: center;
}

/* Stats Bar */
.stats-bar {
    background-color: #337503;
    padding: 50px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--white);
    justify-content: center;
}

.stat-icon {
    flex-shrink: 0;
}

.stat-icon img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

.stat-number {
    font-size: 64px;
    font-family: 'Tenor Sans', serif;
    font-weight: 400;
    line-height: 1;
}

.stat-plus {
    font-size: 28px;
    font-family: 'Tenor Sans', serif;
    font-weight: 400;
    vertical-align: super;
    margin-left: -5px;
    color: var(--white);
}

.stat-text {
    display: flex;
    flex-direction: column;
    font-family: 'Tenor Sans', serif;
    font-size: 17px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
}

/* Vision & Mission */
.vision-mission-section {
    padding: 80px 15%;
    background-color: var(--white);
}

.vision-mission-section .container {
    max-width: none;
    padding: 0;
}

.vision-row,
.mission-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}

.mission-row {
    margin-bottom: 0;
}

.vision-image,
.mission-image {
    position: relative;
    border-radius: 0;
    overflow: hidden;
}

.vision-image img,
.mission-image img {
    width: 100%;
    border-radius: 0;
    display: block;
}

.vision-content h2,
.mission-content h2 {
    font-family: 'Tenor Sans', serif;
    font-size: 42px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.vision-content p,
.mission-content p {
    font-family: 'Tenor Sans', serif;
    font-size: 16px;
    color: #666;
    line-height: 1.8;
}

/* RTL adjustments for Vision & Mission */
[dir="rtl"] .vision-row,
[dir="rtl"] .mission-row {
    direction: rtl;
}

[dir="rtl"] .vision-content,
[dir="rtl"] .mission-content {
    text-align: right;
}

/* Core Values */
.core-values-section {
    padding: 80px 0;
}

.core-values-section .section-title {
    text-align: center;
    margin-bottom: 15px;
}

.section-description {
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.value-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: var(--off-white);
    border-radius: 10px;
    transition: var(--transition);
}

.value-item:hover {
    background-color: var(--primary-green);
    color: var(--white);
}

.value-number {
    width: 35px;
    height: 35px;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.value-item:hover .value-number {
    background-color: var(--white);
    color: var(--primary-green);
}

.value-text {
    font-weight: 500;
}

/* Team Stats */
.team-stats-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    position: relative;
}

.team-stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/slider-2.jpg') center/cover no-repeat;
    opacity: 0.15;
}

.team-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    z-index: 1;
}

.team-stat {
    text-align: center;
    color: var(--white);
}

.team-stat-number {
    font-size: 72px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.team-stat-number span {
    font-size: 48px;
}

.team-stat-label {
    font-size: 16px;
    opacity: 0.9;
}

/* About Testimonials */
.about-testimonials-section {
    padding: 80px 0;
    background-color: #82B75D;
    color: var(--white);
    overflow: hidden;
}

.about-testimonials-section .container {
    max-width: none;
    padding: 0;
}

.about-testimonials-section .section-title {
    text-align: center;
    color: var(--white);
    margin-bottom: 50px;
    font-family: 'Tenor Sans', serif;
    font-size: 42px;
    font-weight: 400;
    padding: 0 20px;
}

.about-testimonials-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.about-testimonials-wrapper::-webkit-scrollbar {
    display: none;
}

.about-testimonials-wrapper.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.about-testimonials-wrapper.dragging .testimonial-card {
    user-select: none;
    pointer-events: none;
}

.about-testimonials-slider {
    display: flex;
    gap: 25px;
    width: max-content;
    padding: 0 25px;
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 40px 30px 30px;
    border-radius: 15px;
    text-align: center;
    color: var(--white);
    min-width: 350px;
    max-width: 350px;
    position: relative;
    flex-shrink: 0;
}

.testimonial-card .testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    background-color: var(--white);
}

.testimonial-card .testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-card h4 {
    font-family: 'Tenor Sans', serif;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 15px;
    color: var(--white);
}

.testimonial-card p {
    font-family: 'Tenor Sans', serif;
    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 20px;
}

.testimonial-card .testimonial-stars {
    color: var(--white);
    font-size: 14px;
}

.testimonial-card .testimonial-stars i {
    margin: 0 2px;
}

/* Scrolling Text */
.scrolling-text-section {
    padding: 50px 0;
    background-color: var(--white);
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    /* Force LTR direction for the entire marquee section.
       On RTL pages, the body's direction:rtl would normally
       anchor the wider-than-viewport track to the right edge
       of the section, with its overflow extending leftward.
       Translating the track further leftward then exposes empty
       space on the right side of the viewport (the track's right
       edge moves off-screen). Forcing LTR on the section anchors
       the track to the LEFT edge — same as the English page —
       so translating leftward only ever reveals more of the
       three duplicated copies. The Arabic text inside each span
       still renders correctly (Arabic characters have intrinsic
       RTL direction at the Unicode bidi level, independent of
       this property). */
    direction: ltr;
}

.scrolling-text-track {
    display: flex;
    width: max-content;
    animation: scroll-text 30s linear infinite;
    /* Force LTR layout so the duplicated copies stay in document order
       even when the page body has direction:rtl. The animation handles
       the visual scrolling direction via animation-direction. */
    direction: ltr;
}

.scrolling-text {
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: 48px;
    font-family: 'Tenor Sans', serif;
    color: #50554D;
    white-space: nowrap;
    padding-right: 40px;
}

.scrolling-text .divider {
    color: #50554D;
    font-weight: 300;
}

/* The track contains 3 identical copies of .scrolling-text. Translating
   by exactly 1/3 of the track width per cycle moves the view by one
   whole copy, so when the animation loops back to 0% the visual content
   at the new position matches what was visible at the end of the cycle —
   creating a seamless infinite scroll. The 3-copy width also guarantees
   the track is always wider than even ultra-wide viewports, so no empty
   space ever appears at the edges. */
@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.3333%);
    }
}

[dir="rtl"] .scrolling-text-track {
    animation-direction: reverse;
}

/* Instagram Section */
.instagram-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--white);
    overflow: hidden;
}

.instagram-handle {
    display: block;
    font-size: 48px;
    font-family: 'Tenor Sans', serif;
    color: #7C3AED;
    text-decoration: none;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.instagram-handle:hover {
    color: #5B21B6;
}

.instagram-subtitle {
    font-family: 'Tenor Sans', serif;
    font-size: 18px;
    color: #666;
    margin-bottom: 60px;
}

.instagram-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    padding: 0 20px;
    min-height: 350px;
}

.instagram-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.instagram-item:hover {
    transform: scale(1.05);
}

.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.instagram-item-1 {
    width: 180px;
    height: 240px;
    align-self: flex-end;
    margin-bottom: 0;
}

.instagram-item-2 {
    width: 200px;
    height: 280px;
    align-self: flex-start;
    margin-top: 20px;
}

.instagram-item-3 {
    width: 200px;
    height: 260px;
    align-self: center;
}

.instagram-item-4 {
    width: 220px;
    height: 200px;
    align-self: flex-start;
    margin-top: 40px;
}

.instagram-item-5 {
    width: 200px;
    height: 280px;
    align-self: flex-end;
    margin-bottom: 0;
}

.instagram-item-6 {
    width: 180px;
    height: 220px;
    align-self: center;
}

/* Booking Section Full Width */
.booking-section-full {
    background: var(--white);
    padding: 80px 0;
}

.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

.booking-form-side {
    padding-right: 40px;
}

.booking-form-side h2 {
    font-family: 'Tenor Sans', serif;
    font-size: 42px;
    font-style: italic;
    font-weight: 400;
    color: #82B75D;
    margin-bottom: 15px;
    text-align: center;
}

.booking-form-side > p {
    font-family: 'Tenor Sans', serif;
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
    text-align: center;
}

.booking-map-side {
    border-radius: 10px;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.booking-map-side iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.booking-form-centered {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.booking-form-centered h2 {
    font-size: 32px;
    color: var(--primary-green);
    margin-bottom: 15px;
}

.booking-form-centered > p {
    color: var(--text-gray);
    margin-bottom: 30px;
}

.booking-form-wide {
    background-color: var(--white);
}

.booking-form-wide .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.booking-form-wide .form-group input,
.booking-form-wide .form-group select {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 30px;
    background-color: var(--white);
    font-family: 'Tenor Sans', serif;
    font-size: 15px;
    color: #333;
    transition: border-color 0.3s ease;
}

.booking-form-wide .form-group input::placeholder {
    color: #999;
}

.booking-form-wide .form-group input:focus,
.booking-form-wide .form-group select:focus {
    outline: none;
    border-color: #82B75D;
}

.btn-booking {
    background-color: #82B75D;
    color: var(--white);
    padding: 18px 40px;
    border-radius: 30px;
    font-family: 'Tenor Sans', serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-booking:hover {
    background-color: #6fa048;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* RTL adjustments for Booking */
[dir="rtl"] .booking-form-side {
    padding-right: 0;
    padding-left: 40px;
}

/* =====================================================
   SERVICES PAGE STYLES
   ===================================================== */

.services-content-section {
    padding: 80px 0;
}

.services-main-title {
    font-size: 36px;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.service-intro {
    margin-bottom: 40px;
    padding: 25px;
    background-color: var(--off-white);
    border-radius: 10px;
    border-left: 4px solid var(--primary-green);
}

.service-intro p {
    color: var(--text-gray);
    line-height: 1.8;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.service-detail {
    scroll-margin-top: 100px;
}

.service-detail h3 {
    font-size: 24px;
    color: var(--primary-green);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-gray);
}

.service-detail p {
    color: var(--text-gray);
    line-height: 1.8;
}

/* =====================================================
   CONTACT PAGE STYLES
   ===================================================== */

.contact-cards-section {
    padding: 80px 0;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.contact-card {
    background-color: var(--white);
    padding: 35px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-gray);
}

.contact-card-highlight {
    background-color: var(--off-white);
}

.contact-card-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.contact-card h3 {
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.contact-card-divider {
    width: 50px;
    height: 2px;
    background-color: var(--primary-green);
    margin-bottom: 20px;
}

.contact-card p {
    color: var(--text-gray);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.contact-card h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.contact-card .address {
    color: var(--primary-green);
    font-weight: 500;
}

.contact-phones {
    margin-top: 20px;
}

.phone-label {
    font-size: 13px;
    color: var(--primary-green);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone-label::before {
    content: '';
    width: 30px;
    height: 30px;
    background-color: var(--primary-green);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.phone-number {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.phone-number:hover {
    color: var(--primary-green);
}

.contact-center-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    min-height: 300px;
}

.contact-center-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-center-image .btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.btn-white {
    background-color: var(--white);
    color: var(--text-dark);
    font-weight: 600;
}

.btn-white:hover {
    background-color: var(--primary-green);
    color: var(--white);
}

/* Contact Booking Form */
.contact-booking-section {
    padding: 80px 0;
    background-color: var(--white);
}

.contact-booking-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-booking-wrapper h2 {
    font-size: 32px;
    color: var(--primary-green);
    margin-bottom: 15px;
}

.contact-booking-wrapper > p {
    color: var(--text-gray);
    margin-bottom: 30px;
}

.contact-form .form-group input,
.contact-form .form-group select {
    border: 1px solid var(--border-gray);
    padding: 16px 20px;
}

.contact-form .btn {
    margin-top: 10px;
}

/* Map Section */
.map-section {
    padding: 0 0 80px;
}

.map-wrapper {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* =====================================================
   RTL ADJUSTMENTS FOR INNER PAGES
   ===================================================== */
[dir="rtl"] .about-intro-content {
    direction: rtl;
}

[dir="rtl"] .about-intro-wrapper {
    direction: rtl;
}

[dir="rtl"] .stat-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .stat-text {
    text-align: right;
}

[dir="rtl"] .stat-plus {
    margin-left: 0;
    margin-right: -5px;
}

[dir="rtl"] .vision-mission-grid {
    direction: rtl;
}

[dir="rtl"] .image-overlay-text {
    left: auto;
    right: 20px;
}

[dir="rtl"] .service-intro {
    border-left: none;
    border-right: 4px solid var(--primary-green);
}

[dir="rtl"] .value-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .contact-cards-grid {
    direction: rtl;
}

[dir="rtl"] .contact-card {
    text-align: right;
}

/* (Note: direction reversal for scrolling text is handled on
   .scrolling-text-track above, around line 540 — the previous rule
   here targeted .scrolling-text which has no animation of its own.) */

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 1024px) {
    .page-header {
        min-height: 180px;
        padding: 60px 0;
        margin: 15px;
        border-radius: 20px;
    }

    .about-intro-wrapper,
    .vision-row,
    .mission-row,
    .booking-grid,
    .contact-cards-grid {
        grid-template-columns: 1fr;
    }

    .booking-grid {
        gap: 40px;
    }

    .booking-form-side {
        padding-right: 0;
        padding-left: 0;
    }

    .booking-form-side h2 {
        font-size: 32px;
    }

    .booking-map-side {
        min-height: 350px;
    }

    .booking-map-side iframe {
        min-height: 350px;
    }

    .about-intro-wrapper {
        gap: 40px;
    }

    .about-intro-image {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .about-intro-subtitle {
        font-size: 26px;
        letter-spacing: 0.5px;
    }

    .about-intro-title {
        font-size: 22px;
    }

    .vision-mission-section {
        padding: 60px 5%;
    }

    .vision-row,
    .mission-row {
        gap: 30px;
    }

    .vision-content h2,
    .mission-content h2 {
        font-size: 32px;
    }

    .mission-content {
        order: -1;
    }

    .testimonial-card {
        min-width: 300px;
        max-width: 300px;
    }

    .about-testimonials-section .section-title {
        font-size: 32px;
    }

    .stats-grid,
    .team-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .contact-center-image {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .page-header {
        min-height: 140px;
        padding: 40px 0;
        margin: 10px;
        border-radius: 15px;
    }

    .page-header .container {
        padding: 0 25px;
    }

    .page-header h1 {
        font-size: 28px;
    }

    .stats-grid,
    .team-stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .stat-item {
        justify-content: flex-start;
        padding: 0 20px;
    }

    .stat-number {
        font-size: 48px;
    }

    .stat-plus {
        font-size: 20px;
    }

    .team-stat-number {
        font-size: 42px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .scrolling-text {
        font-size: 28px;
        gap: 25px;
    }

    /* Keep the inverted hierarchy on small screens —
       welcome text stays larger than the green tagline. */
    .about-intro-subtitle {
        font-size: 22px;
        letter-spacing: 0.5px;
    }

    .about-intro-title {
        font-size: 20px;
    }

    .instagram-handle {
        font-size: 32px;
    }

    .instagram-subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .instagram-gallery {
        gap: 15px;
        min-height: 220px;
    }

    .instagram-item-1,
    .instagram-item-2,
    .instagram-item-3,
    .instagram-item-4,
    .instagram-item-5,
    .instagram-item-6 {
        width: 120px;
        height: 160px;
        margin: 0;
        align-self: center;
    }

    .services-main-title {
        font-size: 28px;
    }

    .service-detail h3 {
        font-size: 20px;
    }

    .contact-card {
        padding: 25px;
    }

    .phone-number {
        font-size: 18px;
    }

    .booking-form-wide .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .booking-form-side h2 {
        font-size: 28px;
    }
}







/* =====================================================
   GOOGLE MAPS LOADING INDICATOR
   The .booking-map-side starts with a .map-loading class on it,
   which displays a centered spinner over the iframe area. When
   the iframe fires its `onload` event, JS removes the class and
   the spinner fades out, revealing the map underneath.
   ===================================================== */
.booking-map-side {
    position: relative;
    background-color: #f5f5f5; /* fallback grey while iframe is empty */
}

.map-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #f5f5f5;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    border-radius: 10px;
}

.booking-map-side.map-loading .map-loader {
    opacity: 1;
    pointer-events: auto;
}

.map-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(51, 117, 3, 0.15);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: map-spin 0.9s linear infinite;
}

.map-loading-text {
    color: var(--text-gray);
    font-size: 15px;
    font-family: 'Tenor Sans', serif;
    margin: 0;
}

@keyframes map-spin {
    to { transform: rotate(360deg); }
}

/* Reduced motion: stop the rotation, keep a subtle pulse */
@media (prefers-reduced-motion: reduce) {
    .map-spinner {
        animation: map-pulse 1.5s ease-in-out infinite;
    }
    @keyframes map-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
}


/* =====================================================
   SERVICES CARDS SECTION
   The whole grid lives inside a single large rounded
   panel with a dark photo background. Cards are
   transparent by default with thin dividers between
   them; on hover, a per-card photo fades in, the card
   gets rounded corners, and lifts up.

   Structure:
     .services-cards-section  → outer wrapper, white bg
       .container             → max-width centering
         .services-cards-panel → ROUNDED dark panel
           .services-cards-header
           .services-cards-grid
             .service-card × N
   ===================================================== */

/* Outer wrapper — no horizontal padding so the panel can sit
   close to the viewport edges, mirroring how .page-header is laid out
   on the same page. The panel itself handles edge spacing via margin. */
.services-cards-section {
    padding: 0;
    background-color: var(--white);
}

/* The standard .container has a max-width that would constrain the
   panel and leave large empty strips on either side. Inside this
   section we want full bleed (minus the panel's margin), so we
   neutralize the container exactly the way .page-header .container
   does it earlier in this stylesheet. */
.services-cards-section .container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* The rounded dark panel — extends nearly to the viewport edges with
   the same 20px margin and 25px radius the page header uses, so the
   two stacked banners look like a matched pair. Vertical margin also
   provides the gap between this and the page header above it. */
.services-cards-panel {
    position: relative;
    margin: 20px;
    border-radius: 25px;
    overflow: hidden;
    padding: 90px 60px 70px;
    color: var(--white);
    background-color: var(--dark-green);
    background-image:
        linear-gradient(180deg, rgba(45, 80, 22, 0.86) 0%, rgba(20, 40, 8, 0.94) 100%),
        url('../images/helping-recovery.jpg');
    background-size: cover;
    background-position: center;
}

/* Header above the grid */
.services-cards-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 70px;
    position: relative;
    z-index: 1;
}

.services-cards-eyebrow {
    font-size: 13px;
    letter-spacing: 5px;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 22px;
    opacity: 0.92;
}

.services-cards-title {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--white);
    margin: 0;
}

.services-cards-title .accent {
    color: #C8DDB8;
    font-style: italic;
}

/* Grid */
.services-cards-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* Card — transparent by default, left-aligned text */
.service-card {
    position: relative;
    isolation: isolate;
    padding: 50px 32px 50px;
    text-align: start;
    border-radius: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-bottom-color 0.4s ease;
}

/* Vertical divider on inline-end side of each card */
.service-card::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    inset-inline-end: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.18);
    transition: opacity 0.3s ease;
}

/* Hide vertical divider on rightmost card of each row + the very last card */
.service-card:nth-child(4n)::after,
.service-card:last-child::after {
    display: none;
}

/* Hide bottom border on cards in the last row.
   For 10 cards in a 4-col grid, the last row holds 2 cards (9, 10). */
.services-cards-grid > .service-card:nth-last-child(-n+2) {
    border-bottom-color: transparent;
}

/* Hover photo + green tint, layered behind the card content via ::before */
.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 16px;
    background-image:
        linear-gradient(180deg, rgba(108, 161, 75, 0.55) 0%, rgba(45, 80, 22, 0.85) 100%),
        var(--service-bg, none);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-bottom-color: transparent;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover::after {
    opacity: 0;
}

/* Icon — left-aligned, larger size to match the demo */
.service-card-icon {
    margin: 0 0 30px;
    color: var(--white);
    line-height: 1;
    transition: transform 0.4s ease;
}

.service-card-icon i {
    font-size: 56px;
    line-height: 1;
}

.service-card:hover .service-card-icon {
    transform: scale(1.04);
}

/* Title */
.service-card-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--white);
    margin: 0 0 18px;
    line-height: 1.3;
}

/* Description (replaces the original "Read More" link entirely) */
.service-card-desc {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

/* =====================================================
   RESPONSIVE
   At each breakpoint the column count drops, so the
   "rightmost-of-row" rules and "last-row" rules need
   to be recomputed. We have 10 cards total.

     4-col → rows of 4,4,2     → last row = 2 cards
     3-col → rows of 3,3,3,1   → last row = 1 card
     2-col → rows of 2 × 5     → last row = 2 cards
     1-col → 10 rows           → last row = 1 card
   ===================================================== */

@media (max-width: 1100px) {
    .services-cards-panel {
        margin: 15px;
        border-radius: 20px;
        padding: 75px 35px 55px;
    }
    .services-cards-title { font-size: 38px; }

    .services-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Vertical divider rules for 3-col */
    .service-card:nth-child(4n)::after { display: block; }
    .service-card:nth-child(3n)::after,
    .service-card:last-child::after    { display: none; }

    /* Last-row bottom border for 3-col (only card 10) */
    .services-cards-grid > .service-card:nth-last-child(-n+2) {
        border-bottom-color: rgba(255, 255, 255, 0.18);
    }
    .services-cards-grid > .service-card:last-child {
        border-bottom-color: transparent;
    }
}

@media (max-width: 768px) {
    .services-cards-panel {
        margin: 10px;
        border-radius: 15px;
        padding: 60px 22px 40px;
    }
    .services-cards-title { font-size: 28px; }
    .services-cards-eyebrow { font-size: 12px; letter-spacing: 4px; }
    .services-cards-header { margin-bottom: 50px; }

    .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Vertical divider rules for 2-col */
    .service-card:nth-child(3n)::after,
    .service-card:nth-child(4n)::after { display: block; }
    .service-card:nth-child(2n)::after,
    .service-card:last-child::after    { display: none; }

    /* Last-row bottom border for 2-col (cards 9–10) */
    .services-cards-grid > .service-card:nth-last-child(-n+2) {
        border-bottom-color: transparent;
    }

    .service-card { padding: 40px 22px 36px; }
    .service-card-icon i { font-size: 44px; }
    .service-card-title { font-size: 20px; }
}

@media (max-width: 480px) {
    .services-cards-grid { grid-template-columns: 1fr; }

    /* No vertical dividers in single-column layout */
    .service-card::after,
    .service-card:nth-child(2n)::after,
    .service-card:nth-child(3n)::after,
    .service-card:nth-child(4n)::after { display: none; }

    /* Last-row bottom border for 1-col (only card 10) */
    .services-cards-grid > .service-card:nth-last-child(-n+2) {
        border-bottom-color: rgba(255, 255, 255, 0.18);
    }
    .services-cards-grid > .service-card:last-child {
        border-bottom-color: transparent;
    }

    .services-cards-title { font-size: 24px; }
}