/* ======================================================
   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;
}


/* 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); 
}
.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)), url('../img/about-overlay.jpg');
    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)), url('../img/images-ZV8482W.jpg'); 
    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;
}


/* Choose Us Style */
.bg-choose-us {
    background-image: linear-gradient(rgba(17, 32, 21, 0.6), rgba(17, 32, 21, 0.6)), url('../img/images-PZE6K9S.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/service-1.jpg');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-2 {
    background-image: url('../img/service-2.jpg');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-3 {
    background-image: url('../img/service-3.jpg');
    min-height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.bg-service-4 {
    background-image: url('../img/service-4.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: 480px;
    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; 
}
.footer-logo {
    height: 150px;
}
.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 Query */
@media screen and (max-width: 1220px) {
    .section-m {
        margin-top: 8rem; 
        width: 100%;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
@media  screen and (max-width: 992px) {
    h1 {
        font-size: 60px;
        line-height: 1.1em;
        font-family: var(--font-1);
    }
    h2 {
        font-size: 40px;
        line-height: 1.2em;
        font-family: var(--font-1);
    }
    h3{
        font-size: 28px;
        line-height: 1.2em;
        font-family: var(--font-1);
    }
    h4 {
        font-size: 24px;
        line-height: 1.2em;
        font-family: var(--font-1);
    }
    h5 {
        font-size: 22px;
        line-height: 1,1em;
        font-family: var(--font-1);
    }
    h6 {
        font-size: 16px;
        line-height: 1,2em;
        font-family: var(--font-1);
    }
    .border-hero{
        display: none;
    }
    .hero-title {
        margin-top: 24px;
        width: 95%;
        line-height: normal;
    }
    .hero-subtitle {
        width: 80%;
    }
    .section-m {
        margin-top: 3rem; 
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .img-about {
        border-radius: 10px;
        width: 100%;
    }
    .img-about-last {
        border-radius: 10px;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .ceo-quote {
        width: 90%;
        padding-left: 0;
        padding-right: 0;
    }
    .signature {
        width: 148px;
        height: 32px;
    }
    .custom-card {
        max-width: 60%;
        position: absolute;
        left: 5%;
        bottom: 10%;
    }
    .img-faqs {
        width: 100%;
        height: 100%;
        max-height: 512px;
    }
    .newsletter-container {
        width: 100%;
    }
    .contact-image {
        max-height: 512px;
        border-radius: 10px;
    }
    .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;
    }
}
@media screen and (max-width: 450px) {
    h1 {
        font-size: 40px;
        font-family: var(--font-1);
    }
    h2 {
        font-size: 32px;
        font-family: var(--font-1);
    }
    h3{
        font-size: 24px;
        font-family: var(--font-1);
    }
    h4 {
        font-size: 22px;
        font-family: var(--font-1);
    }
    h5 {
        font-size: 18px;
        font-family: var(--font-1);
    }
    h6 {
        font-size: 16px;
        font-weight: 500;
        font-family: var(--font-1);
    }
    .hero-title {
        margin-top: 24px;
        width: 100%;
        line-height: normal;
    }
    .banner-title {
        margin-top: 24px;
        line-height: normal;
        font-size: 24px;
    }
    .hero-subtitle {
        width: 100%;
    }
    .hero-subtext {
        width: 100%;
    }
    .section-m {
        margin-top: 3rem; 
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .width-base {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .img-about {
        border-radius: 10px;
        width: 100%;
        height: 100%;
    }
    .img-about-last {
        border-radius: 10px;
        width: 100%;
        height: 256px;
    }
    .title-about{
        font-size: 32px;
    }
    .text-subtitle {
        font-size: 18px;
    }
    .ceo-quote {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .signature {
        width: 70px;
        height: 15px;
    }
    .bg-service-1 {
        background-image: none;
        min-height: 10px;
    }
    .bg-service-2 {
        background-image: none;
        min-height: 10px;
    }
    .bg-service-3 {
        background-image: none;
        min-height: 10px;
    }
    .bg-service-4 {
        background-image: none;
        min-height: 10px;
    }
    .custom-card {
        max-width: 100%;
        position: static;
    }
    .subtext-showcase {
        width: 100%;
    }
    .last-img-showcase{
        border-radius: 10px;
        width: 100%;
        height: 100%;
        max-height: 256px;
        object-fit: cover;
    }
    .img-faqs {
        width: 100%;
        height: 100%;
        max-height: 256px;
    }
    .subtext-footer {
        width: 100%;
    }
    .newsletter-container {
        width: 100%;
    }
    .about-bg {
        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: 400px;
    }
    .contact-image {
        border-radius: 10px;
    }
    .contact-card {
        width: 90%;
        left: 0;
        right: 0;
        margin: auto;
    }
    .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;
    }
}
.our-process-img {
  width: 90%;
  max-width: 600px;
  height: 550px;
  object-fit: cover;

  /* Rounded shape like screenshot */
  border-top-right-radius: 120px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;

  /* Optional: smooth look */
  display: block;
}
.service-card {
  display: flex;
  background: #fff;
  border-radius: 30px ;
  overflow: hidden;
  min-height: 250px;
}

.service-img {
  width: 45%;
  background-size: cover;
  background-position: center;
}

/* LEFT IMAGE CARD (rounded on left side) */
.left-img {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 80px;
   border-bottom-right-radius: 20px;
}

/* RIGHT IMAGE CARD (rounded on right side) */
.right-img {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 80px;
}

.service-card {
  display: flex;
  background: #fff;
  border-radius: 20px 120px 20px 20px;
  overflow: hidden;
  min-height: 340px;
  height: 100%;
}

.service-img {
  width: 45%;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.service-content {
  padding: 30px;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.discover-link {
  color: #345c3c;
  font-weight: 600;
  text-decoration: none;
}

.discover-link:hover {
  text-decoration: underline;
}
.core-image {
  width: 89%;
  max-height: 380px;   
  object-fit: cover;
  border-radius: 20px 120px 20px 20px;
}


.core-card {
  background: #fff;
  margin-top: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 20px 90px 20px 20px;
}
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 999;
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 15px rgba(0,0,0,0.25);
  padding: 25px;
  transition: right 0.3s ease-in-out;
  z-index: 1000;
  overflow-y: auto;
}

.cart-sidebar.open {
  right: 0;
}

.cart-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
}
/* Cart Title */
.cart-title {
  font-weight: 700;
  font-size: 22px;
}

/* Cart Items */
.cart-item {
  background: #f7f7f7;
  padding: 10px;
  border-radius: 10px;
  position: relative;
}

.cart-img {
  width: 55px;
  height: 55px;
  border-radius: 8px;
  object-fit: cover;
}

.remove-item {
  cursor: pointer;
  font-size: 20px;
  color: #444;
}

.remove-item:hover {
  color: red;
}

/* Checkout Button */
.btn-checkout {
  display: block;
  background: #2f9f7f;
  color: #fff;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-checkout:hover {
  background: #1c6f55;
}
/* Better spacing between all form fields */
.checkout-container .form-label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}

.checkout-container .form-control {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding-left: 14px;
  font-size: 15px;
}

/* On focus highlight */
.checkout-container .form-control:focus {
  border-color: #2f9f7f;
  box-shadow: 0 0 0 2px rgba(47,159,127,0.25);
}

/* Add space between groups */
.checkout-container .mb-3 {
  margin-bottom: 18px !important;
}

/* Two-column row spacing */
.checkout-container .row .col-6 .form-control {
  width: 100%;
}

/* Payment box improved spacing */
.payment-method {
  padding: 15px;
  border-radius: 12px;
}

/* Input placeholder smoothing */
.checkout-container .form-control::placeholder {
  color: #aaa;
  font-size: 14px;
}
  .checkout-container{
      max-width: 900px;
      margin: 40px auto;
      background: #fff;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .checkout-title{
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 25px;
      color: #222;
    }

    .section-title{
      font-size: 18px;
      font-weight: 600;
      color: #2f9f7f;
    }

    .order-summary-box{
      background: #f8f8f8;
      padding: 20px;
      border-radius: 12px;
    }

    .summary-item{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .btn-place-order{
      width: 100%;
      background: #2f9f7f;
      padding: 12px;
      color: #fff;
      border-radius: 10px;
      font-weight: 600;
      margin-top: 20px;
      border: none;
      transition: .3s;
    }

    .btn-place-order:hover{
      background: #1c6f55;
    }

    .payment-method{
      border: 1px solid #ccc;
      padding: 12px;
      border-radius: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .payment-method.active{
      border-color: #2f9f7f;
      background: #e8f6f2;
    }
    /* Whole page container */
.login-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #f7f7f7;
}

/* Left Image Area */
.login-image {
  flex: 1;
  background: #000;
}

.login-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right Side */
.login-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

/* Login Box */
.login-box {
  width: 100%;
  max-width: 420px;
  background: #fff;
  padding: 35px;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.login-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #2f9f7f;
  margin-bottom: 25px;
}

/* Input Wrapper */
.input-wrap {
  position: relative;
}

/* Icon */
.input-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #2f9f7f;
  font-size: 16px;
}

/* Input */
.login-input {
  width: 100%;
  height: 50px;
  padding-left: 45px;
  padding-right: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
}

.login-input::placeholder {
  color: #777;
}

/* Login Button */
.btn-login {
  width: 100%;
  background: #2f9f7f;
  color: #fff;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 17px;
  font-weight: 600;
  margin-top: 10px;
  transition: 0.3s;
}

.btn-login:hover {
  background: #1c6f55;
}

/* Footer */
.login-footer {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
}

.login-footer a {
  color: #2f9f7f;
  font-weight: 600;
}


/* --------------------------
   RESPONSIVE DESIGN
--------------------------- */

/* Tablet - Reduce layout height and spacing */
@media (max-width: 992px) {
  .login-container {
    flex-direction: column;
    height: auto;
  }

  .login-image {
    height: 260px;
  }

  .login-content {
    padding: 30px 20px;
  }

  .login-box {
    max-width: 500px;
    width: 100%;
  }
}

/* Mobile screens */
@media (max-width: 768px) {
  .login-image {
    height: 200px;
  }

  .login-box {
    padding: 28px;
  }

  .login-title {
    font-size: 26px;
  }

  .login-input {
    height: 48px;
    font-size: 14px;
  }

  .btn-login {
    font-size: 15px;
    padding: 10px;
  }
}

/* Small Mobile */
@media (max-width: 500px) {
  .login-image {
    height: 180px;
  }

  .login-box {
    padding: 22px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-input {
    height: 45px;
  }

  .btn-login {
    font-size: 14px;
  }
}
/* ---------------------------
   GLOBAL
--------------------------- */
.bg-hero {
  position: relative;
  width: 100%;
  height: auto;
}

.overlay-hero {
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
}

/* ---------------------------
   NAVBAR DESKTOP
--------------------------- */
.navbar {
  padding: 15px 0;
}

.border-hero {
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.navbar-nav .nav-link {
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
}

.nav-item .dropdown-menu {
  border-radius: 10px;
}

/* ---------------------------
   HERO TEXT
--------------------------- */
.hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-subtitle {
  max-width: 550px;
}

/* ---------------------------
   HERO FORM
--------------------------- */
.form-container {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px 25px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

.form-container .form-control {
  height: 48px;
  border-radius: 10px;
}

/* ---------------------------
   RESPONSIVE
--------------------------- */

/* TABLET */
@media (max-width: 992px) {

  /* Navbar top bar hidden already using d-none d-lg-flex */

  .hero-title {
    font-size: 40px;
  }

  .hero-subtitle {
    font-size: 15px;
    max-width: 100%;
  }

  .form-container form {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .form-container .form-control {
    width: 100%;
  }

  .content-m {
    flex-direction: column;
    text-align: center;
  }

  .testimonial-circle-first,
  .testimonial-circle {
    width: 45px;
    height: 45px;
  }

}

/* MOBILE */
@media (max-width: 768px) {

  .navbar-brand img {
    width: 135px;
  }

  .hero-title {
    font-size: 32px;
    text-align: center;
  }

  .hero-subtitle {
    text-align: center;
    font-size: 14px;
  }

  .btn-light {
    width: 100%;
    text-align: center;
  }

  .d-lg-flex {
    flex-direction: column;
  }

  .form-container {
    padding: 15px;
  }

  .testimonial-circle-first,
  .testimonial-circle {
    width: 38px;
    height: 38px;
  }

  .hero-subtext {
    text-align: center;
  }

}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .hero-title {
    font-size: 26px;
  }

  .form-container {
    padding: 12px;
  }

  .form-control {
    height: 44px;
    font-size: 14px;
  }

}
/* =======================================
   RESPONSIVE CSS (DO NOT REMOVE ANYTHING ABOVE)
======================================= */

/* ----------- TABLET (max-width: 992px) ----------- */
@media (max-width: 992px) {

  /* SERVICE CARD */
  .service-card {
    flex-direction: column;
    min-height: auto;
    border-radius: 20px;
  }

  .service-img {
    width: 100%;
    height: 230px;
    border-radius: 20px 20px 0 0 !important;
  }

  .service-content {
    width: 100%;
    padding: 20px;
    text-align: center;
  }

  /* CORE IMAGE */
  .core-image {
    width: 100%;
    max-height: 300px;
    border-radius: 20px !important;
  }

  /* CORE CARD */
  .core-card {
    border-radius: 20px !important;
  }

  /* PROCESS IMAGE */
  .our-process-img {
    width: 100%;
    height: 350px;
    border-radius: 20px !important;
  }

  /* CHECKOUT */
  .checkout-container {
    margin: 20px;
    padding: 20px;
  }
}

/* ----------- MOBILE (max-width: 768px) ----------- */
@media (max-width: 768px) {

  /* SERVICE CARD */
  .service-img {
    height: 200px;
  }

  .service-content h4 {
    font-size: 18px;
  }

  /* DISCOVER LINK */
  .discover-link {
    font-size: 14px;
  }

  /* CHECKOUT GRID */
  .checkout-container .row {
    flex-direction: column;
  }

  /* CART SIDEBAR */
  .cart-sidebar {
    width: 300px;
  }

  .cart-img {
    width: 50px;
    height: 50px;
  }
}

/* ----------- SMALL MOBILE (max-width: 480px) ----------- */
@media (max-width: 480px) {

  /* SERVICE CARD */
  .service-img {
    height: 170px;
  }

  .service-content {
    padding: 15px;
  }

  .service-content p {
    font-size: 14px;
  }

  /* PROCESS IMAGE */
  .our-process-img {
    height: 260px;
  }

  /* CHECKOUT */
  .checkout-title {
    font-size: 22px;
  }

  .section-title {
    font-size: 16px;
  }

  /* CART SIDEBAR */
  .cart-sidebar {
    width: 260px;
  }

  .btn-checkout {
    padding: 10px;
    font-size: 15px;
  }
}
/* ======================================
   NAVBAR RESPONSIVE CSS
   (Your original CSS stays untouched)
====================================== */


/* ----------- Laptop & Tablet (max-width: 1200px) ----------- */
@media (max-width: 1200px) {
  .navbar-brand img {
    width: 150px;
  }

  .navbar-nav .nav-link {
    font-size: 15px;
  }

  .navbar {
    padding: 12px 0;
  }
}


/* ----------- Tablet (max-width: 992px) ----------- */
@media (max-width: 992px) {

  /* Top contact bar is already hidden using d-none d-lg-flex */

  .navbar {
    padding: 10px 0;
  }

  .navbar-brand img {
    width: 140px;
  }

  /* Right side icons on tablet */
  .nav-item.d-flex.gap-3 i {
    font-size: 20px;
  }

  /* Offcanvas Menu */
  .offcanvas {
    width: 280px !important;
  }

  .offcanvas-body {
    padding-top: 25px;
  }

  .offcanvas .nav-link {
    font-size: 17px;
    padding: 12px 0;
  }

  .dropdown-menu {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
  }
}


/* ----------- Mobile (max-width: 768px) ----------- */
@media (max-width: 768px) {

  .navbar-brand img {
    width: 120px;
  }

  .navbar-toggler {
    border: none;
  }

  .navbar-toggler-icon {
    width: 24px;
    height: 3px;
  }

  /* Right side icons (search, cart, login) */
  .nav-item.d-flex.gap-3 i {
    font-size: 18px;
  }

  /* Make icons closer on mobile */
  .nav-item.d-flex {
    gap: 15px !important;
  }

  /* Offcanvas full width for better UX */
  .offcanvas {
    width: 100% !important;
  }

  .offcanvas-body ul {
    padding-left: 10px;
  }

  .offcanvas-body .nav-link {
    font-size: 18px;
    padding: 14px 0;
  }

}


/* ----------- Small Mobile (max-width: 480px) ----------- */
@media (max-width: 480px) {

  .navbar-brand img {
    width: 110px;
  }

  .nav-item.d-flex.gap-3 i {
    font-size: 17px;
  }

  .navbar {
    padding: 8px 0;
  }

  .navbar-toggler-icon {
    width: 22px;
    height: 2px;
  }

  /* Dropdown links inside offcanvas */
  .dropdown-menu .dropdown-item {
    padding: 10px 15px !important;
    font-size: 15px;
  }
}
/* ===============================
   WHY CHOOSE US - RESPONSIVE ONLY
================================ */

/* ---------- Tablet (≤ 992px) ---------- */
@media (max-width: 992px) {

  .bg-choose-us {
    padding: 40px 20px;
  }

  .title-about {
    font-size: 28px;
    width: 100% !important;
  }

  /* Remove side borders */
  .border-lg-right,
  .border-lg-left,
  .border-lg-bottom-0 {
    border: none !important;
  }

  /* Reduce padding inside rows */
  .row.row-cols-md-3 {
    padding: 20px !important;
  }

  .row.row-cols-md-3 .col {
    padding: 20px 10px !important;
  }

  .text-subtitle {
    font-size: 17px;
  }

  img[alt="choose"] {
    width: 48px;
    height: 48px;
  }
}


/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* Title */
  .title-about {
    font-size: 24px;
  }

  .bg-choose-us {
    padding: 30px 15px;
  }

  /* Remove all borders */
  .border-bottom,
  .border-lg-right,
  .border-lg-left {
    border: none !important;
  }

  .row.row-cols-md-3 {
    padding: 10px !important;
  }

  .row.row-cols-md-3 .col {
    padding: 15px 0 !important;
  }

  img[alt="choose"] {
    width: 44px;
    height: 44px;
  }

  .text-subtitle {
    font-size: 16px;
    text-align: center;
  }

  .text-white {
    text-align: center !important;
    font-size: 14px;
  }
}


/* ---------- Small Mobile (≤ 480px) ---------- */
@media (max-width: 480px) {

  .bg-choose-us {
    padding: 25px 10px;
  }

  .title-about {
    font-size: 22px;
    margin-bottom: 30px !important;
  }

  img[alt="choose"] {
    width: 40px;
    height: 40px;
  }

  .text-subtitle {
    font-size: 15px;
  }

  .text-white {
    font-size: 13px;
  }

  .row.row-cols-md-3 .col {
    padding: 12px 0 !important;
  }
}
/* =============================
  MOBILE SIDEBAR + HAMBURGER FIX
  - hamburger: transparent button, clear 3 lines
  - offcanvas becomes full-height sidebar (left)
  - right-side icons hidden on top and shown inside sidebar
  - accessible spacing + close area
============================= */

/* Target mobile/tablet */
@media (max-width: 991px) {

  /* make container spacing consistent */
  .navbar .container-lg {
    justify-content: space-between !important;
    align-items: center;
    gap: 8px;
  }

  /* Transparent toggler button (no background) */
  .navbar-toggler {
    background: transparent !important;
    border: none !important;
    padding: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1201; /* above overlay */
  }

  /* Remove default BS icon and render our three lines */
  .navbar-toggler-icon { background-image: none !important; }

  /* three-line hamburger (uses the three span elements you already have) */
  .navbar-toggler span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #fff;                /* line color - change if needed */
    margin: 3px 0;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* If you want darker lines on light bg, toggle with body theme */
  /* .navbar-toggler span { background: #222; } */

  /* Hide the desktop right icons in topbar, show them inside offcanvas instead */
  .nav-item.d-flex.gap-3 {
    display: none !important;
  }

  /* OFFCANVAS (left slide) - acting like a sidebar */
  .offcanvas.offcanvas-start {
    width: 86% !important;               /* sidebar width on mobile */
    max-width: 420px;
    height: 100vh !important;
    transform: translateX(-100%) !important; /* start off-screen left */
    left: 0;
    top: 0;
    background: #fff;
    box-shadow: 6px 0 30px rgba(0,0,0,0.35);
    z-index: 1200;
    transition: transform .33s ease-in-out !important;
    padding: 22px 18px;
    overflow-y: auto;
  }

  /* When shown BS adds .show class — provide transform for open state */
  .offcanvas.offcanvas-start.show {
    transform: translateX(0) !important;
  }

  /* Make offcanvas body spacing nicer */
  .offcanvas-body {
    padding: 10px 6px 30px 6px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Top close button inside offcanvas (use existing .btn-close or add one) */
  .offcanvas-header { padding: 0; margin-bottom: 6px; }
  .offcanvas-header .btn-close { margin-left: auto; }

  /* Navbar links sizing inside sidebar */
  .offcanvas-body .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
  }

  .offcanvas-body .navbar-nav .nav-link {
    color: #222 !important;
    font-size: 17px;
    padding: 12px 6px;
    border-radius: 8px;
  }

  /* Dropdowns inside offcanvas behave as block list */
  .offcanvas-body .dropdown-menu {
    position: relative !important;
    display: block;
    background: transparent;
    box-shadow: none;
    margin-left: 0;
    padding-left: 10px;
  }

  .offcanvas-body .dropdown-item {
    padding: 10px 6px;
    color: #444;
  }

  /* Show the right-side icons inside offcanvas: create selector for them */
  /* This expects the right icons to be present in offcanvas DOM (if not present, duplicate them inside offcanvas markup) */
  .offcanvas-body .right-icons,
  .offcanvas-body .nav-item.d-flex.gap-3 {
    display: flex !important;
    gap: 12px;
    align-items: center;
    margin: 10px 0 6px 6px;
  }

  /* Style for the small icon buttons inside sidebar */
  .offcanvas-body .right-icons a,
  .offcanvas-body .nav-item.d-flex.gap-3 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f3f3f3;
    color: #333;
    text-decoration: none;
    font-size: 18px;
  }

  /* overlay already exists but ensure it covers below the toggler */
  .offcanvas-backdrop {
    z-index: 1199 !important;
    background: rgba(0,0,0,0.45) !important;
  }

  /* ensure the desktop header top-bar disappears on mobile if desired */
  .container.d-none.d-lg-flex { display: none !important; }
}

/* Small devices tuning */
@media (max-width: 480px) {
  .offcanvas.offcanvas-start {
    width: 100% !important;
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }

  .navbar-toggler span {
    width: 20px;
    height: 2px;
  }

  .offcanvas-body .navbar-nav .nav-link {
    font-size: 16px;
    padding: 12px 0;
  }
}


/* LEFT IMAGE */
.register-image,
.login-image {
  width: 50%;
  height: 100vh;
}

.register-image img,
.login-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT SECTION */
.register-content,
.login-content {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

/* FORM BOX */
.register-box,
.login-box {
  width: 100%;
  max-width: 420px;
  background: #ffffffcc;
  padding: 40px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* TITLE */
.register-title,
.login-title {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
  color: #222;
}

/* INPUT WRAPPER */
.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 16px;
}

/* INPUT FIELD */
.register-input,
.login-input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 16px;
}

.register-input::placeholder,
.login-input::placeholder {
  color: #999;
}

/* BUTTON */
.btn-register,
.btn-login {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #009060;
  color: #fff;
  font-size: 18px;
}

.btn-register:hover,
.btn-login:hover {
  background: #006c44;
}

/* FOOTER TEXT */
.register-footer,
.login-footer {
  text-align: center;
  margin-top: 15px;
  color: #555;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .register-container,
  .login-container {
    flex-direction: column;
  }

  .register-image,
  .login-image {
    width: 100%;
    height: 260px;
  }

  .register-content,
  .login-content {
    width: 100%;
    padding: 25px;
  }

  .register-box,
  .login-box {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .register-box,
  .login-box {
    padding: 25px;
  }

  .register-title,
  .login-title {
    font-size: 24px;
  }
}

@media (max-width: 991px) {
  /* Navbar and sidebar layout fixes */
  .navbar .container-lg {
    justify-content: space-between !important;
  }
  .navbar-toggler {
    border: none !important;
    padding: 6px;
  }
  .nav-item.d-flex.gap-3 {
    display: none !important;
  }
  .offcanvas.offcanvas-start {
    width: 80% !important;
    max-width: 350px;
  }
  .mobile-icons a {
    background: #f2f2f2;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
  }

  /* Only hide dropdowns inside offcanvas/sidebar for mobile */
  .offcanvas-body .dropdown-menu,
  #offcanvasNavbar .dropdown-menu {
    display: none;                      /* Hidden by default in sidebar */
    position: relative;
    background: #f8f8f8;
    margin-left: 15px;
    border-radius: 10px;
    border: none;
    box-shadow: none;
    padding-left: 10px;
    margin-top: 8px;
  }
  .offcanvas-body .dropdown.show .dropdown-menu,
  #offcanvasNavbar .dropdown.show .dropdown-menu {
    display: block !important;           /* Show when active in sidebar */
  }
  .offcanvas-body .nav-link,
  #offcanvasNavbar .nav-link {
    padding: 12px 0;
    font-size: 18px;
  }
  .offcanvas-body .nav-link i,
  #offcanvasNavbar .nav-link i {
    float: right;
    margin-top: 5px;
  }
}
.product-page {
  padding: 40px 20px;
  background: #f8f8f8;
}
.sticky-sidebar { position: sticky; top: 32px; }
.filter-sidebar {
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(34,145,98,0.07), 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  z-index: 11;
}
.filter-box { border-bottom: 1px solid #eee; padding-bottom: 14px; margin-bottom: 16px; }
.filter-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.filter-list li { list-style: none; margin: 4px 0; }
.filter-list label { cursor: pointer; font-size: 14px; }

.btn-filter-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 38px; height: 38px;
  justify-content: center; align-items: center;
  border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 9px #e0f3ef;
  margin-bottom: 12px; margin-left: 7px;
}
.btn-filter-dots span {
  display: block;
  width: 18px;
  height: 4px;
  background: #009060;
  border-radius: 2px;
}

.product-grid { margin-top: 0; }

/* Product Card Styling */
.product-card {
  background: #fff;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(34,145,98,0.07);
  transition: box-shadow .18s, transform .16s;
  height: 100%;
  display: flex; flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 10px 24px rgba(34,145,98,0.13);
  transform: translateY(-4px) scale(1.028);
}
.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 11px 11px 0 0;
}
.product-info {
  padding: 13px;
  display:flex; flex-direction:column; justify-content:end; flex:1;
}
.product-title { font-size: 15px; font-weight: 600; }
.price-box { margin: 7px 0 5px 0; }
.new-price { font-size: 17px; font-weight: 700; color: #009060; }
.old-price { text-decoration: line-through; color: #888; margin-left: 7px; font-size: 15px; }
.btn-cart {
  width: 100%; background: #009060; color: #fff; padding: 11px 0; border-radius: 8px;
  border: none; font-size: 16px; font-weight: 600; margin-top: 7px; transition: background 0.18s;
}
.btn-cart:hover { background: #00754a; }
.floating-bar {
  background: #fff;
  border-radius: 10px;
  padding: 13px 18px;
  margin-bottom: 15px;
  box-shadow: 0 6px 18px rgba(34,145,98,0.09);
}

.pagination-container { margin-top: 27px; display: flex; justify-content: center; }
.animated-pagination .page-item { margin: 0 4px; }
.animated-pagination .active .page-link { background: #009060; color: #fff; font-weight: 700; border-radius: 8px;}
.animated-pagination .page-link {
  padding: 9px 14px; border-radius: 8px; color: #009060;
  border: 1px solid #009060; transition: background .22s;
}
.animated-pagination .page-link:hover { background: #2f9f7f; color: #fff; }

/* Tablet: Stack sidebar up, grid cards are 2 per row */
@media (max-width: 991px) {
  .product-page { padding: 16px 6px;}
  .filter-sidebar { border-radius: 10px; padding: 14px; margin-bottom: 14px; }
  .sticky-sidebar { position: static; }
  .product-img { height: 140px; }
  .floating-bar { padding: 11px 7px; }
  .btn-cart { font-size: 16px;}
}

/* Mobile: Hide sidebar, show filter dots, cards are large and single per row */
@media (max-width: 767px) {
  .product-page { padding: 8px; }
  .floating-bar { flex-wrap: wrap; gap:7px; }
  .btn-filter-dots { display: flex; }
  .filter-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 82vw;
    max-width: 340px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.33s cubic-bezier(.6,.2,.21,1.32), box-shadow .2s;
    z-index: 900;
    box-shadow: 8px 0 32px rgba(0,0,0,0.16);
    overflow-y: auto;
  }
  .filter-sidebar.active {
    transform: translateX(0);
  }
  .product-img { height: 140px;}
  .product-card { border-radius: 8px; }
  /* Cards stack single */
  .col-lg-3.col-md-4.col-sm-6.col-12 { max-width: 100%; flex: 0 0 100%; }
}

/* Overlay for mobile filter */
@media (max-width: 767px) {
  #filterOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 895;
  }
  #filterOverlay.active {
    display: block;
  }
}
.register-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}
.register-image,
.register-content {
  width: 50%;
}
@media (max-width: 991px) {
  .register-container {
    flex-direction: column;
  }
  .register-image,
  .register-content {
    width: 100%;
    height: auto;
  }
  .register-image img {
    height: 260px;
    object-fit: cover;
  }
}
/* Fix WHY CHOOSE US overlapping */
.bg-darker {
  padding-top: 120px;   /* adjust as needed */
}

/* Prevent section from cutting */
.bg-choose-us {
  top: 0;
  transform: translateY(0);
}

/* On mobile give more space */
@media (max-width: 768px) {
  .bg-darker {
    padding-top: 180px; 
  }
}
/* User icon dropdown styling */
.nav-item.dropdown .dropdown-menu {
  min-width: 180px;
  border-radius: 10px;
  padding: 10px 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

.dropdown-item {
  padding: 10px 18px;
  font-size: 15px;
}

.dropdown-item:hover {
  background: #f4f4f4;
}
/* Make carousel images look clean */
#mobileShowcase img {
  height: 340px;
  object-fit: cover;
}

/* Smooth rounded edges */
#mobileShowcase .carousel-item img {
  border-radius: 14px;
}
/* Mobile Testimonial Carousel */
.testimonialSwiper .swiper-slide {
  padding: 5px;
}

.swiper-pagination-bullet-active {
  background: #0a8f55 !important;
  width: 10px;
  height: 10px;
}
/* SEARCH OVERLAY */
.search-overlay {
  position: fixed;
  top: -100%;  /* Slide from top */
  left: 0;
  width: 100%;
  height: auto;
  background: #fff;
  z-index: 99999;
  padding: 30px 20px 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: top 0.4s ease;
}

/* Inside box */
.search-box {
  max-width: 900px;
  margin: auto;
  position: relative;
}

/* Close button top right */
.close-btn {
  background: none;
  border: none;
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 26px;
  color: #555;
  cursor: pointer;
}

.close-btn:hover {
  color: #000;
}

/* Label */
.search-label {
  font-size: 12px;
  color: #777;
  font-weight: 600;
}

/* Search Bar */
.search-input-wrapper {
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.search-input {
  width: 100%;
  padding: 15px 50px 15px 15px;
  font-size: 26px;
  border: none;
  border-bottom: 2px solid #ddd;
  outline: none;
  font-weight: 600;
  color: #2f2f2f;
}

.search-input:focus {
  border-bottom: 2px solid #0a8f55;
}

/* Search Icon inside input */
.search-icon {
  position: absolute;
  right: 10px;
  top: 18px;
  font-size: 22px;
  color: #333;
}

/* MOBILE */
@media (max-width: 576px) {
  .search-input {
    font-size: 22px;
    padding: 12px 45px 12px 10px;
  }
  .search-icon {
    font-size: 20px;
    top: 15px;
  }
  .close-btn {
    font-size: 24px;
  }
}
 /* ===========================
   VIDEO CONSULTATION SECTION
=========================== */
.video-section {
  padding: 60px 0;
}

.video-img {
  width: 100%;
  height: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 12px;
}

/* Right Content Box */
.video-box {
  background: #fafafa;
  padding: 30px;
  border-radius: 12px;
}

/* Benefits */
.benefit-box {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  border-left: 5px solid #0a8f55;
  margin-bottom: 20px;
}

/* Button */
.btn-main {
  background: #0a8f55;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  border: none;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}
.btn-main:hover {
  background: #066b3f;
}

/* ===========================
   FORM STYLING
=========================== */
.consult-form input,
.consult-form select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  font-size: 15px;
}

/* ===========================
   RELATED PRODUCTS
=========================== */
.related-wrapper {
  padding: 50px 0;
  margin-top: 60px;
}

.related-wrapper h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
}

/* Card Styling */
.product-card {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #eaeaea;
  transition: all 0.3s ease;
  height: 100%;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.product-img {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 12px;
}

.product-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.price-box {
  margin-bottom: 12px;
}

.new-price {
  font-size: 16px;
  font-weight: 700;
  color: #2b7a0b;
}

.old-price {
  font-size: 14px;
  text-decoration: line-through;
  color: #999;
  margin-left: 8px;
}

.btn-cart {
  width: 100%;
  padding: 10px 0;
  background: #2b7a0b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.3s;
}
.btn-cart:hover {
  background: #1e5b07;
}

/* ===========================
   RESPONSIVE FIXES
=========================== */

/* Tablets */
@media (max-width: 768px) {
  .video-section {
    padding: 40px 0;
  }
  .video-box {
    margin-top: 20px;
  }
  .product-img {
    height: 200px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .video-section {
    padding: 30px 0;
  }

  .video-img {
    max-height: 260px;
  }

  .related-wrapper {
    padding: 30px 0;
  }

  .product-card {
    padding: 12px;
  }

  .product-title {
    font-size: 15px;
  }

  .btn-cart {
    padding: 9px;
  }
}

/* =============================
   ORDER SUCCESS POPUP
   ============================= */

.thank-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}

.thank-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.thank-popup-box {
  background: #fff;
  width: 90%;
  max-width: 420px;
  padding: 35px 30px;
  border-radius: 18px;
  text-align: center;
  animation: popupScale 0.35s ease;
  position: relative;
  box-shadow: 0 10px 35px rgba(0,0,0,0.15);
}

@keyframes popupScale {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.thank-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  font-size: 22px;
  background: transparent;
  cursor: pointer;
}

.thank-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #e7fff0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
}

.thank-icon i {
  color: #0a8f55;
  font-size: 42px;
}

.thank-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

.thank-text {
  font-size: 15px;
  color: #555;
  margin-bottom: 18px;
}

.thank-btn {
  display: inline-block;
  background: #0a8f55;
  color: #fff;
  padding: 10px 22px;
  border-radius: 7px;
  font-weight: 600;
  text-decoration: none;
}
.thank-btn:hover {
  background: #066b3f;
}
/* ---- Desktop Mega Menu ---- */
.mega-dropdown {
  width: 950px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-radius: 12px;
}

.mega-dropdown .dropdown-item {
  padding: 5px 0;
}

.mega-dropdown h6 {
  font-size: 14px;
  margin-bottom: 8px;
}

/* ---- Medium Devices (Tablets) ---- */
@media (max-width: 991px) {
  .mega-dropdown {
    width: 100% !important;
    left: 0;
    transform: none;
    border-radius: 0;
  }
}

/* ---- Mobile (Offcanvas) ---- */
@media (max-width: 767px) {
  .mega-dropdown {
    padding: 20px !important;
    box-shadow: none;
  }

  .mega-dropdown h6 {
    margin-top: 20px;
  }

  .mega-dropdown .dropdown-item {
    font-size: 15px;
    padding: 6px 0;
  }
}
.no-color-change,
.no-color-change:visited,
.no-color-change:hover,
.no-color-change:active,
.no-color-change:focus {
    color: inherit !important;
    text-decoration: none !important;
}