/* ======================================================
   Table of Contents
==========================================================
1. General Style                          (line 34)
    1.1 Root Style                        (line 47)
    1.2 Header Style                      (line 75)
    1.3 Link and Image Style              (line 116)
    1.4 Text Style                        (line 126)
    1.5 Icon Circle Style                 (line 165)
    1.6 Color Utility Class               (line 248)
    1.7 Background Utility Class          (line 258)
    1.8 Font Size Utility Class           (line 265)
    1.9 Width Utility Class               (line 278)
    1.10 Button Style                     (line 290)
        1.10.1 Navbar Button              (line 312)
    1.11 Default Width                    (line 332)
2. Navbar Style                           (line 342)
3. Hero Style                             (line 420)
4. About Style                            (line 481)
5. CEO Quote Style                        (line 507)
6. Choose Us Style                        (line 539)
7. Service Style                          (line 557)
8. Showcase Style                         (line 599)
9. FAQs Style                             (line 627)
10. Blog Post Style                       (line 675)
11. Video Style                           (line 730)
12. Team Style                            (line 744)
13. Contact Style                         (line 791)
14. Packages Style                        (line 920)
15. 404 Style                             (line 932)
16. Transition Style                      (line 941)
17. Footer Style                          (line 951)
18. Other Style                           (line 1022)
19. Media Queries                         (line 1031)
===========================================================
*/


/* General Style */
@font-face {
    font-family: 'Philosopher';
    src: url(../font/philosopher.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url(../font/lato.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
    /* Root Style */
    :root {
        /* Main heading color */
        --heading-color: #112015;
        /* Primary color for the site, often used for buttons, links, etc. */
        --color-main: #5c9269;
        /* Darker shade of the primary color, used for hover states or dark background elements */
        --color-darker: #1D4026;
        /* Lighter shade of the primary color, for lighter elements or backgrounds */
        --color-lighter: #99c7a3;
        /* Subtle background color, used for subtle backgrounds or areas with less emphasis */
        --color-subtle: #FFFBE9;
        /* Border color, used for borders and dividers */
        --color-border: #fdfdfd;
        /* Error color, usually red, used for form validation or error messages */
        --color-error: #E22D2D;
        /* Warning color, yellow, used for warning messages or indicators */
        --color-warning: #E2D52D;
        /* Information color, blue, used for info messages or alert indicators */
        --color-info: #2663cf;
        /* Success color, green, used for success messages or successful actions */
        --color-success: #20bd3c;
        /* Text color 1 for headers*/
        --text-color-1: #696969;
        /* Text color 2 for body text */
        --text-color-2: #c7c7c7;
        /* Font family for main headers */
        --font-1: "Philosopher";
        /* Font family for body text or secondary headers */
        --font-2: "Lato";
    }

    /* Header Styles */
    h1 {
        font-size: 80px; /* Large font size for main headers */
        font-weight: 500; /* Medium font weight */
        line-height: 1.1em; /* Slightly compact line height */
        letter-spacing: -1.3px; /* Tight letter spacing for a cleaner look */
        font-family: var(--font-1); /* Applying the main header font */
    }

    h2, h3, h4, h5, h6 {
        /* Standard header styles with decreasing font sizes */
        font-weight: 500;
        line-height: 1.2em;
        font-family: var(--font-1); /* Using the same font for all header tags */
    }

    h2 {
        font-size: 56px; /* Slightly smaller than h1 */
        letter-spacing: -1.3px;
    }

    h3 {
        font-size: 40px;
        letter-spacing: -1.1px;
    }

    h4 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    h5 {
        font-size: 24px;
        letter-spacing: -0.8px;
    }

    h6 {
        font-size: 16px;
        letter-spacing: -0.6px;
    }

    /* Link and Image Styling */
    a {
        text-decoration: none; /* Remove underline from links */
        cursor: pointer; /* Change cursor to pointer on hover */
    }

    img {
        object-fit: cover; /* Ensures images cover their container without distortion */
    }

    /* Text Style */
    .heading {
        color: var(--heading-color); /* Main heading color */
    }

    .sub-heading {
        color: var(--color-main); /* Sub-heading color */
    }
    .text-subtitle {
        font-family: 'Philosopher';
        font-size: 24px;
        font-weight: 500;
        line-height: 1,2;
        letter-spacing: -0.8px;
    }
    .text-grey {
        font-family: 'Lato';
        font-size: 16px;
        color: var(--text-color-1);
    }
    .text-white {
        font-family: 'Lato';
        font-size: 16px;
        color: white;
    }
    .text-silver {
        font-family: 'Lato';
        font-size: 16px;
        color: var(--text-color-2);
    }
    .text-color-1 {
        color: var(--text-color-1);
    }
    .text-color-2 {
        color: var(--text-color-2);
    }

    .font-1, .philosopher {
        font-family: var(--font-1); /* Font family for headers */
    }

    .font-2, .lato {
        font-family: var(--font-2); /* Font family for body text */
    }

    /* Icon Circle Styles */
    .icon-circle-37-main, .icon-circle-32, .icon-circle-32-main, .icon-circle-17, .icon-circle-17-main, .icon-circle-15-main {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: transparent;
        font-size: 16px;
        cursor: pointer;
    }

    .icon-circle-37-main {
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-main);
        color: var(--color-main);
    }

    .icon-circle-32 {
        width: 32px;
        height: 32px;
        border: 1px solid white;
        color: white;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .icon-circle-32:hover {
        color: var(--color-darker);
        background-color: var(--color-subtle);
        border: 1px solid var(--color-subtle);
    }

    .icon-circle-32-main {
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-main);
        color: var(--color-main);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .icon-circle-32-main:hover {
        color: white;
        background-color: var(--color-main);
        border: 1px solid var(--color-main);
    }

    .icon-circle-17 {
        width: 17px;
        height: 17px;
        border: 1px solid white;
        font-size: 15px;
        color: white;
    }

    .icon-circle-17-main {
        width: 17px;
        height: 17px;
        border: 1px solid var(--color-main);
        font-size: 15px;
    }

    .icon-circle-15-main {
        width: 15px;
        height: 15px;
        border: 1px solid var(--color-main);
        font-size: 13px;
    }

    /* Testimonial Circle Styles */
    .testimonial-circle {
        width: 45px;
        height: 45px;
        background-color: grey;
        border-radius: 50%;
        margin-left: -7px;
    }

    .testimonial-circle-first {
        width: 45px;
        height: 45px;
        background-color: grey;
        border-radius: 50%;
    }

    /* Color Utility Classes */
    .c-white { color: white; }
    .c-silver { color: var(--text-color-2); }
    .c-main { color: var(--color-main); }
    .c-black { color: black; }
    .c-text { color: rgb(255, 254, 250, 0.6); }
    .c-semi-black { color: var(--heading-color); }
    .c-semi-transparent { color: #00000080; }
    .c-grey { color: var(--text-color-1); }

    /* Background Utility Classes */
    .bg-subtle { background-color: var(--color-subtle); }
    .bg-semi-white { background-color: var(--color-border) !important; }
    .bg-darker { background-color: var(--color-darker) !important; }
    .bg-grey { background-color: var(--text-color-1); }
    .bg-main { background-color: var(--color-main); }

    /* Font Size Utility Classes */
    .fs-12 { font-size: 12px; }
    .fs-13 { font-size: 13px; }
    .fs-14 { font-size: 14px; }
    .fs-15 { font-size: 15px; }
    .fs-16 { font-size: 16px; }
    .fs-17 { font-size: 17px; }
    .fs-18 { font-size: 18px; }
    .fs-22 { font-size: 22px; }
    .fs-24 { font-size: 24px; }
    .fs-26 { font-size: 26px; }
    .fs-48 { font-size: 48px; }

    /* Width Utility Classes */
    .w-10 { width: 10%; }
    .w-20 { width: 20%; }
    .w-30 { width: 30%; }
    .w-40 { width: 40%; }
    .w-50 { width: 50%; }
    .w-60 { width: 60%; }
    .w-70 { width: 70%; }
    .w-80 { width: 80%; }
    .w-90 { width: 90%; }
    .w-100 { width: 100%; }

    /* Button Styles */
    .btn-light, .btn-dark {
        background-color: var(--color-main);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 24px;
        font-size: 14px;
        max-width: fit-content;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-light:hover {
        background-color: white;
        color: var(--text-color-1);
    }

    .btn-dark:hover {
        background-color: var(--color-darker);
        color: white;
    }

        /* Navbar Styles */
        button.nav-link {
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
        }

        button.nav-link:hover {
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
        }

        button.nav-link:focus {
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
        }


    /* Default Width */
    .width-base {
        width: 1220px;
        padding-top: 100px;
        padding-bottom: 100px;
        margin-left: auto;
        margin-right: auto;
    }

    
/* Navbar Style */
.navbar-toggler {
    width: 30px;
    height: 30px;
    border: none; 
    background: none; 
    box-shadow: none;
    outline: none; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none; 
    box-shadow: none; 
    border: none; 
}
.navbar-toggler-icon {
    display: block;
    height: 1px;
    width: 30px;
    background-color: white;
    border-radius: 2px;
    transition: none;
}
.navbar-toggler-icon:nth-child(3) {
    width: 22px;
    height: 2px; 
    margin-left: 8px;
}
.offcanvas.show .nav-link {
    color: var(--text-color-1);  
    font-size: 12px;
}
.offcanvas.show .nav-link:hover {
    color: var(--color-main); 
}
.nav-link {
    color: var(--text-color-2);
    font-size: 15px;
}
.nav-link:hover {
    color: white; 
}
.dropdown {
    border-radius: 10px;
}
.dropdown-toggle {
    box-shadow: none !important;
}
.dropdown-menu {
    padding: 10px;
    color: var(--text-color-2);
    min-width: 200px;
}
.dropdown-menu a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropdown-menu:hover a:hover {
    color: #fff; 
    background-color: var(--color-main); 
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}
.dropdown-menu {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.navbar-logo {
  height: 90px;
  width: auto;
}

.footer-logo {
    max-width: 250px;
    height: 100px;
    width: auto;
    object-fit: contain;
}

/* Hero Style */
.content-m {
    margin-top: 6rem;
}
.section-m {
    margin-top: 9rem; 
    width: 1220px;
}
.hero-title {
    width: 73%;
}
.banner-title {
    width: 100%;
    font-size: 80px;
    font-weight: 500;
    line-height: 1,1px;
    letter-spacing: -1.3px;
}
.hero-subtitle {
    width: 60%;
}
.hero-subtext {
    width: 70%;
}
.bg-hero {
    background-image: url('../img/bg-1.jpg');
    background-size: cover;
}
.overlay-hero {
    background-color: rgba(17, 32, 21, 0.6); 
    padding-bottom: 100px;
}
.border-hero {
    border-bottom: 1px solid #c4c4c4;
}
.form-container {
    background: rgba(255, 255, 255, 0.0);
    border-radius: 10px;
    padding: 20px;
    max-width: 1000px;
    width: 100%;
    border: 1px solid white;
}
.form-control, .form-control:focus, .form-control::placeholder{
    background: rgba(255, 255, 255, 0.0);
    color: white;
    box-shadow: none;
    outline: none;
    border-color: white;
    font-family: 'Philosopher';
    padding: 10px;
}
.form-control:focus {
    background-color: white;
    color: black;
}
.date {
    color-scheme: dark;
}


/* About Style */
.about-bg {
    background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6));
    background-size: cover;
    background-position: center;
    height: 512px;
}
.img-about {
    border-radius: 10px;
    width: 100%;
}
.img-about-last {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.title-about{
    font-family: 'Philosopher';
    font-size: 56px;
    font-weight: 500;
    line-height: 1,2;
    letter-spacing: -1.3px;
}


/* CEO Quote Style */
.bg-ceo {
    background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6)); 
    width: 100%;
    background-size: cover;
    background-position: center;
}
.ceo-quote {
    margin: auto;
    width: 60%;
    padding-left: 0;
    padding-right: 0;
}
.signature {
    width: 160px;
    height: 34px;
}
.card {
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    overflow: hidden;
}
.card:hover {
    border: 1px solid var(--color-main);
}
.card-body {
    background-color: var(--color-subtle);
    border-radius: 10px;
    padding: 30px;
}

/* Enhanced Services Page Styles */

/* Service Cards Enhancement */
.bg-service-1, .bg-service-2, .bg-service-3 {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.bg-service-1:hover, .bg-service-2:hover, .bg-service-3:hover {
    transform: translateY(-5px);
}

.bg-service-1::before, .bg-service-2::before, .bg-service-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(17, 32, 21, 0.3) 0%, rgba(92, 146, 105, 0.4) 100%);
    z-index: 1;
}

.custom-card {
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.custom-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Enhanced Icon Styles */
.icon-circle-32-main {
    background: linear-gradient(135deg, var(--color-main), var(--color-lighter));
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(92, 146, 105, 0.3);
    transition: all 0.3s ease;
}

.icon-circle-32-main:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(92, 146, 105, 0.4);
}

/* Enhanced Specialized Services */
.custom-card-1 {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.custom-card-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-main), var(--color-lighter));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.custom-card-1:hover::before {
    transform: scaleX(1);
}

.custom-card-1:hover {
    transform: translateY(-8px);
    border-color: var(--color-main);
    box-shadow: 0 15px 40px rgba(92, 146, 105, 0.2);
}

/* Enhanced Treatment Process Cards */
.bg-semi-white.border-radius-10 {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.bg-semi-white.border-radius-10::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(92, 146, 105, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bg-semi-white.border-radius-10:hover::before {
    opacity: 1;
}

.bg-semi-white.border-radius-10:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Enhanced Button Styles */
.btn-light.btn-sm {
    background: linear-gradient(135deg, var(--color-main), var(--color-lighter));
    border: none;
    padding: 8px 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.btn-light.btn-sm:hover {
    background: linear-gradient(135deg, var(--color-darker), var(--color-main));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(92, 146, 105, 0.3);
}

/* Service Features Enhancement */
.text-main {
    color: var(--color-main) !important;
    font-weight: 600;
}

/* Section Headers Enhancement */
.title-about {
    position: relative;
    margin-bottom: 30px;
}

.title-about::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-main), var(--color-lighter));
    border-radius: 2px;
}

/* FAQ Enhancement */
.accordion-item {
    border: 1px solid var(--color-lighter) !important;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.accordion-item:hover {
    border-color: var(--color-main) !important;
    box-shadow: 0 5px 15px rgba(92, 146, 105, 0.1);
}

.accordion-button {
    position: relative;
    font-weight: 500;
}

.accordion-button::after {
    background-image: none;
    content: '+';
    font-weight: bold;
    font-size: 18px;
    color: var(--color-main);
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(92, 146, 105, 0.05) 100%);
    border-bottom-color: var(--color-main);
}

/* Enhanced Badge Styles */
.philosopher.fs-14.c-main {
    position: relative;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(92, 146, 105, 0.1), rgba(92, 146, 105, 0.2));
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Service Highlights Enhancement */
.service-highlight {
    background: linear-gradient(135deg, var(--color-subtle), rgba(255, 255, 255, 0.8));
    border: 1px solid var(--color-lighter);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.service-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-main), var(--color-lighter));
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .custom-card {
        max-width: 100%;
        position: static;
        margin-bottom: 20px;
    }
    
    .service-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-number {
        font-size: 28px;
    }
}

/* Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Loading Animation for Service Cards */
@keyframes cardLoad {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-card, .custom-card-1 {
    animation: cardLoad 0.6s ease forwards;
}

.custom-card:nth-child(1) { animation-delay: 0.1s; }
.custom-card:nth-child(2) { animation-delay: 0.2s; }
.custom-card:nth-child(3) { animation-delay: 0.3s; }


/* Choose Us Style */
.bg-choose-us {
    background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6)), url('../img/choose.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.bg-darker {
    background-color: var(--color-darker);
}
.choose-position {
    top: -200px;
    left: 0;
    right: 0;
    margin: auto;
}


/* Services Style */
.bg-service-1 {
    background-image: url('../img/service1.jpg');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-2 {
    background-image: url('../img/service2_20x9.jpg');
    min-height: 455px;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative;
}
.bg-service-3 {
    background-image: url('../img/service3.jpg');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.custom-card {
    max-width: 35%;
    width: max-content;
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden;
    position: absolute;
    left: 5%;
    bottom: 10%;
}


/* Showcase Style */
.custom-card-1 {
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden;
}
.subtext-showcase {
    width: 550px;
    font-family: 'Lato';
    font-size: 16px;
    color: var(--text-color-1);
    text-align: center;
}
.img-showcase {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.last-img-showcase{
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* FAQS Style */
.img-faqs {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.accordion,
.accordion-button,
.accordion-item,
.accordion-header,
.accordion-body {
    border: none !important;
    box-shadow: none !important;
}
.accordion-button {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.6px;
    color: var(--text-color-1); 
    background-color: var(--color-border); 
}
.accordion-button:focus {
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: var(--heading-color);
    background-color: transparent !important;
}
.accordion-button:hover {
    background-color: #e9ecef; 
}
.accordion-button:active {
    background-color: transparent !important;
}
.accordion-item {
    margin-bottom: 10px;
}
.accordion-item {
    border: 1px solid #c4c4c4 !important;
    border-radius: 10px;
}
.accordion-header, .accordion-body, .accordion-button {
    border-radius: 10px !important;
}


/* Blog Post Style */
.img-blog-post {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform-origin: center;
}
.img-wrapper {
    overflow: hidden;
}
.img-blog-post-2 {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform-origin: center;
}
.img-blog-post-2:hover {
    transform: scale(1.1); 
}
.img-blog-post-3 {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.custom-card-2 {
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden; 
    transition: box-shadow 0.3s ease-in-out;
}
.custom-card-2:hover .img-blog-post {
    transform: scale(1.1) rotate(3deg); 
}
.learn-link{
    transition: color 0.3s ease;
}
.learn-link:hover {
    color: var(--text-color-1);
}
.blog-link {
    color: var(--color-main);
    font-size: 16px;
    font-family: var(--font-2);
}
.blog-link:hover {
    color: var(--heading-color);
}


/* Video Style */
.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* Aspect ratio 16:9 */
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Team Style */
.img-team {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.team-member {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.img-team {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.team-member .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.team-member .team-name {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 11;
}
.team-member:hover .overlay {
    opacity: 1;
}
.team-member:hover .team-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* Contact Style */
.form-container-2 {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    font-family: var(--font-2);
}
.form {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--text-color-2);
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
}
.form-row.full-width {
    flex-direction: column;
}
.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.form-label {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-color-1);
}
.form-input, .form-textarea {
    border: none;
    border-bottom: 1px solid var(--text-color-2);
    padding: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}
.form-input:focus, .form-textarea:focus {
    border-bottom-color: var(--color-border);
    outline: none;
}
.form-textarea {
    resize: none;
}
.form-button {
    width: 100%;
    align-self: center;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: var(--color-main);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.form-button:hover {
    background-color: var(--color-darker);
}
.form-select {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--text-color-2);
    padding: 8px;
    font-size: 14px;
    background-color: transparent;
    transition: border-color 0.3s;
    appearance: none; 
}
.form-select:focus {
    border-bottom-color: var(--color-border);
    outline: none;
    box-shadow: none;
}
.form-select::-ms-expand {
    display: none; 
}
.form-select-wrapper {
    position: relative;
}
.form-select-wrapper::after {
    font-size: 12px;
    color: var(--text-color-2);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.popup-message {
    display: none;
    background-color: var(--color-border);
    color: var(--heading-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.border-radius-10 {
    border-radius: 10px;
}
.contact-image {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.contact-card {
    width: 65%;
    width: max-content;
    background: var(--color-border); 
    border: 1px solid #c4c4c4;
    border-radius: 10px; 
    overflow: hidden;
    position: absolute;
    right: 10%;
    bottom: 8%;
}
.maps {
    width: 100%;
    height: 420px;
    transition: filter 0.5s;
    display: block;
}


/* Packages Style */
.package-card {
    border: 1px solid var(--text-color-2);
    border-radius: 10px;
    padding: 32px;
    position: relative;
}
.package-card:hover {
    border: 1px solid var(--text-color-1);
}


/* 404 Style */
.bg-404{
    background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6)), url('../img/about-overlay.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}


/* Transition Style */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-in, transform 0.8s ease-in;
}
.fade-in.visible {
    opacity: 1;
}


/* Footer Style */
.email-input {
    flex: 1;
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
}
.email-input::placeholder {
    color: white;
    opacity: 0.8; 
}
.email-input:focus {
    outline: none; 
}
.newsletter-container {
    border-bottom: #c9c9c9 1px solid;
    width: 60%;
}
.newsletter-container:hover {
    border-bottom: white 1px solid;
}
.btn-newsletter {
    background: transparent; 
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.newsletter-form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
}
.btn-newsletter i {
    color: #c9c9c9;
}
.btn-newsletter:hover i {
    color: white; 
}
.footer-link:hover {
    color: white;
}
.footer-links {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    margin-top: 24px;
}
.footer-links li {
    margin: 10px 0; 
}
.subtext-footer {
    width: 60%;
}
.footer-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}


/* Other Style */
.large-padding {
    padding-bottom: 200px;
}
.partner-margin {
    margin-top: -200px;
}

/* ========================================
   MEDIA QUERIES - ORGANIZED BY BREAKPOINT
======================================== */

/* DESKTOP TO TABLET - 1220px and below */
@media screen and (max-width: 1220px) {
    .section-m {
        margin-top: 8rem; 
        width: 100%;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* TABLET - 992px and below */
@media screen and (max-width: 992px) {
    /* Typography */
    h1 { font-size: 60px; line-height: 1.1em; }
    h2 { font-size: 40px; line-height: 1.2em; }
    h3 { font-size: 28px; line-height: 1.2em; }
    h4 { font-size: 24px; line-height: 1.2em; }
    h5 { font-size: 22px; line-height: 1.1em; }
    h6 { font-size: 16px; line-height: 1.2em; }
    
    /* Layout adjustments */
    .border-hero { display: none; }
    .hero-title { margin-top: 24px; width: 95%; line-height: normal; }
    .hero-subtitle { width: 80%; }
    .section-m { margin-top: 3rem; padding-left: 32px; padding-right: 32px; }
    .width-base { padding: 50px 32px; }
    
    /* Service Cards - Keep background images visible */
    .bg-service-1, .bg-service-2, .bg-service-3 {
        min-height: 400px;
        display: flex;
        align-items: flex-end;
        padding: 20px;
    }
    
    .custom-card {
        position: relative !important;
        max-width: 90%;
        width: 100%;
        left: auto !important;
        bottom: auto !important;
        margin: 0 auto;
        z-index: 10;
        background: rgba(253, 253, 253, 0.95);
        backdrop-filter: blur(10px);
    }
    
    /* Other elements */
    .img-about, .img-about-last { width: 100%; border-radius: 10px; }
    .ceo-quote { width: 90%; padding: 0; }
    .img-faqs { max-height: 512px; }
    .newsletter-container { width: 100%; }
    .contact-image { max-height: 512px; border-radius: 10px; }
    
    /* Dropdown styles */
    .dropdown-menu { border: none; }
    .dropdown-item { 
        background-color: white !important; 
        font-size: 12px; 
        color: var(--text-color-1) !important; 
    }
    .dropdown-item:hover { color: var(--color-main) !important; }
}

/* MOBILE - 768px and below */
@media screen and (max-width: 768px) {
    /* Full width buttons on mobile */
    .btn-light, .btn-dark {
        width: 100%;
        max-width: 100%;
        text-align: center;
        display: block;
    }
    
    /* Service Cards - Enhanced for mobile */
    .bg-service-1, .bg-service-2, .bg-service-3 {
        min-height: 350px;
        background-size: cover;
        background-position: center;
    }
    
    .custom-card {
        max-width: 100%;
        margin-top: auto;
    }
    
    .custom-card .btn-light {
        position: relative;
        z-index: 100;
        pointer-events: auto;
        display: inline-block;
    }
}

/* SMALL MOBILE - 450px and below */
@media screen and (max-width: 450px) {
    /* Typography - Smaller sizes */
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 24px; }
    h4 { font-size: 22px; }
    h5 { font-size: 18px; }
    h6 { font-size: 16px; font-weight: 500; }
    
    /* Hero adjustments */
    .hero-title, .hero-subtitle, .hero-subtext { width: 100%; }
    .banner-title { font-size: 24px; line-height: normal; margin-top: 24px; }
    
    /* Spacing */
    .section-m { padding: 0 20px; margin-top: 3rem; }
    .width-base { padding: 50px 20px; }
    
    /* Service Cards - Show as cards only, no background */
    .bg-service-1, .bg-service-2, .bg-service-3 {
        background-image: none;  /* Remove image on very small screens */
        min-height: auto;
        padding: 0;
        display: block;
    }
    
    .custom-card {
        position: relative !important; /* Keep relative, not static! */
        max-width: 100%;
        background: white;
        backdrop-filter: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 10px;
        margin: 10px 0;
    }
    
    /* Other adjustments */
    .title-about { font-size: 32px; }
    .text-subtitle { font-size: 18px; }
    .ceo-quote { width: 100%; }
    .subtext-showcase, .subtext-footer, .newsletter-container { width: 100%; }
    
    /* Images */
    .img-about-last { height: 256px; }
    .last-img-showcase { max-height: 256px; }
    .img-faqs { max-height: 256px; }
    
    /* About section */
    .about-bg { height: 400px; }
    
    /* Contact card */
    .contact-card { width: 90%; margin: auto; }
}

/* Service Page Specific Styles */
.service-highlight-box {
    background-color: var(--color-subtle);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #c4c4c4;
}

.service-icon-large {
    width: 60px;
    height: 60px;
    background-color: var(--color-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.service-image-container {
    position: relative;
}

.service-featured-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}

.service-overlay-card {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 20px;
    max-width: 250px;
}

/* Symptom Cards */
.symptom-card {
    background: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.symptom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.symptom-icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin: 0 auto 15px auto;
}

/* Process Steps */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.step-number {
    width: 40px;
    height: 40px;
    background-color: var(--color-main);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

/* Benefit Cards */
.benefit-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefit-card {
    background: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.benefit-icon {
    width: 45px;
    height: 45px;
    background-color: var(--color-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

/* Condition Categories */
.condition-category {
    background: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 25px;
    height: 100%;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #c4c4c4;
}

.category-icon {
    width: 50px;
    height: 50px;
    background-color: var(--color-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.condition-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.condition-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color-1);
}

/* Treatment Timeline */
.treatment-timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.timeline-marker {
    width: 60px;
    height: 60px;
    background-color: var(--color-border);
    border: 3px solid var(--color-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.marker-inner {
    width: 40px;
    height: 40px;
    background-color: var(--color-main);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.timeline-content {
    background: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 25px;
    flex: 1;
}

.timeline-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-features li {
    padding: 5px 0;
    position: relative;
    padding-left: 25px;
    color: var(--text-color-1);
}

.timeline-features li:before {
    content: "•";
    color: var(--color-main);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* CTA Card */
.cta-card {
    background: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 30px;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color-1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-featured-image {
        height: 250px;
    }
    
    .service-overlay-card {
        position: static;
        margin-top: 20px;
        max-width: 100%;
    }
    
    .timeline-item {
        flex-direction: column;
        text-align: center;
    }
    
    .process-step {
        flex-direction: column;
        text-align: center;
    }
}