/* ======================================================
   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;
}
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Playwrite+IN:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');


    /* Root Style */
    :root {
        /* Main heading color */
        --heading-color: #112015;
        /* Primary color for the site, often used for buttons, links, etc. */
        --color-main: #018749;
        /* 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: 'TAN Parfait', serif;   /* HEADINGS */
         --font-2: 'TT Drugs', sans-serif; /* BODY */

        /*  */
            --color-white: #ffffff;
            --color-silver: #c0c0c0;
            --color-dark: #333333;
    }

    /* 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/1.jpeg');
    background-size: cover;
} */
/* ============================================
   HERO SLIDESHOW ANIMATION
============================================ */

.bg-hero {
  position: relative;
  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center;
}

/* Fade animation between multiple images */
/* @keyframes heroSlider {
  0%   { background-image: url('../img/up-banner-1.jpg'); }
  25%  { background-image: url('../img/up-banner-2.jpg'); }
  50%  { background-image: url('../img/up-banner-3.jpg'); }
  75%  { background-image: url('../img/up-banner-1.jpg'); }
  100% { background-image: url('../img/up-banner-2.jpg'); }
} */

.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)), 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 */
/* CEO Quote Style */
.bg-ceo {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.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/cc.png');
    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 */
.service-slide-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  border: 1px solid #e5e5e5;
  padding-bottom: 20px;
  transition: transform 0.3s ease;
}

.service-slide-card:hover {
  transform: translateY(-5px);
}

.service-slide-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.service-slide-title {
  font-family: "Philosopher";
  font-size: 22px;
  color: var(--heading-color);
  padding: 15px 15px 0 15px;
}

.service-slide-link {
  display: inline-block;
  margin-top: 10px;
  padding-left: 15px;
  font-family: "Lato";
  font-size: 16px;
  color: var(--color-main);
  text-decoration: none;
}

.service-slide-link:hover {
  text-decoration: underline;
}

.serviceSwiper .swiper-slide {
  display: flex;
  justify-content: center;
}

/* External navigation for services slider (outside cards) */
.service-swiper-wrap {
    position: relative;
}
.service-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    color: var(--color-main);
    border: 1px solid #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    z-index: 30;
    cursor: pointer;
}

/* larger glyph while keeping button dimensions */
.service-nav {
    font-size: 64px; /* glyph size */
    line-height: 0;   /* center glyph vertically in flexbox */
    padding: 0;
    overflow: visible; /* allow glyph to overflow the white circle */
}
.service-nav-prev { left: -28px; }
.service-nav-next { right: -28px; }

@media (max-width: 992px) {
    .service-nav-prev { left: -18px; }
    .service-nav-next { right: -18px; }
    .service-nav { font-size: 44px; }
}

/* SVG sizing inside nav buttons */
.service-nav svg {
    width: 44px;
    height: 44px;
    display: block;
}

@media (max-width: 992px) {
    .service-nav svg { width: 36px; height: 36px; }
}


/* 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;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.gallery-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
}


/* 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: #1f4d2a;
    font-size: 16px;
    font-family: var(--font-2);
}

.blog-link:hover {
     color: black; /* new 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 {
    width: 224px;
    height: 56px;
    object-fit: cover;
}
.subtext-footer {
    width: 60%;
}
.footer-padding {
    /* padding-top: 60px; */
    padding-bottom: 60px;
}


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



/* ======================================================
   Navigation Restructuring
========================================================== */

/* ======================================================
   Compact Top Navigation
========================================================== */

/* Compact first navigation - Reduced height */
.top-navbar.compact-nav {
  padding: 4px 0; /* Reduce vertical padding */
}

.top-navbar.compact-nav .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.top-navbar.compact-nav .icon-circle-32 {
  width: 28px; /* Reduce icon size */
  height: 28px;
  font-size: 12px; /* Reduce icon font size */
}

.top-navbar.compact-nav .fs-13,
.top-navbar.compact-nav .fs-16 {
  font-size: 15px !important; /* Reduce text size */
}

.top-navbar.compact-nav .fs-16 {
  font-size: 12px !important;
}

.top-navbar.compact-nav .d-flex.gap-3 {
  gap: 15px !important; /* Reduce gap between contact items */
}

/* Alternative: If you want even more compact */
.top-navbar.ultra-compact {
  padding: 2px 0;
}

.top-navbar.ultra-compact .icon-circle-32 {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.top-navbar.ultra-compact .fs-13,
.top-navbar.ultra-compact .fs-16 {
  font-size: 15px !important;
}

.top-navbar.ultra-compact i {
  font-size: 15px !important;
}
/* Second Navigation - White Background */
.navbar.bg-white {
  background-color: white !important;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1029;
}

/* White navbar text colors */
.navbar.bg-white .nav-link {
  color: var(--color-main) !important;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar.bg-white .nav-link:hover,
.navbar.bg-white .nav-link.active {
  color: var(--color-darker) !important;
}

/* White navbar dropdown styles */
.navbar.bg-white .dropdown-menu {
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}

.navbar.bg-white .dropdown-item {
  color: var(--text-color-1);
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.navbar.bg-white .dropdown-item:hover {
  color: white !important;
  background-color: var(--color-main);
}

/* White navbar toggler icon */
.navbar.bg-white .navbar-toggler {
  border: 1px solid var(--color-main);
}

.navbar.bg-white .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(92, 146, 105, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* White navbar offcanvas styles */
.navbar.bg-white .offcanvas {
  background-color: white;
}

.navbar.bg-white .offcanvas .nav-link {
  color: var(--text-color-1) !important;
}

.navbar.bg-white .offcanvas .nav-link:hover {
  color: var(--color-main) !important;
}

/* Hero Section Adjustments */
.bg-hero {
  margin-top: 0; /* Remove any top margin */
  background-image: url('../img/1.jpeg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.overlay-hero {
  background-color: rgba(17, 32, 21, 0.6);
  padding-top: 20px; /* Add padding to start content below nav */
  padding-bottom: 20px;
}

/* Adjust section margin for hero */
.section-m {
  margin-top: 0;
  width: 1220px;
}

/* Fix button colors for white navbar */
.navbar.bg-white .btn-light {
  background-color: var(--color-main);
  color: white;
  border: none;
}

.navbar.bg-white .btn-light:hover {
  background-color: var(--color-darker);
  color: white;
}


/* ============================================
   GLOBAL UPGRADE: PLUS ICON, OUTER CIRCLE, TITLES
   Applies to ABOUT US, SERVICES, PROCESS, FAQ, BLOG POST etc.
============================================ */

/* Increase outer circle size */
.icon-circle-17,
.icon-circle-17-main {
  width: 26px !important;     /* Old: 17px */
  height: 26px !important;    /* Old: 17px */
  font-size: 18px !important; /* Bigger + sign */
  border-width: 2px !important;
}

/* Increase "+" icon size */
.icon-circle-17 i,
.icon-circle-17-main i {
  font-size: 16px !important; 
}

/* Increase ALL section title sizes (ABOUT US, OUR SERVICES, OUR PROCESS etc.) */
.philosopher.fs-14,
span.philosopher.fs-14.c-main,
span.philosopher.fs-14.c-white {
  font-size: 20px !important; /* Old: 14px */
  letter-spacing: 0.3px;
  font-weight: bold !important;   /* ← ADDED BOLD */
}

/* Increase main section heading text */
.title-about {
  font-size: 64px !important; /* Old: 56px */
  line-height: 1.15 !important;
  font-weight: bold !important;   /* ← ADDED BOLD */
}

/* Increase “text-subtitle” (01, 02 etc. & small headers) */
.text-subtitle {
  font-size: 28px !important; /* Old: 24px */
  font-weight: bold !important;   /* ← ADDED BOLD */
}



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


.section-m {
  margin-top: 0.5rem !important;
}

/* Reduce spacing between hero text, buttons, and form */
.hero-title {
  margin-bottom: 40px !important;
}

.content-m {
  margin-top: 1.5rem !important;
}



/* FIX: Prevent submenu from disappearing when moving mouse from menu to dropdown */
.nav-item.dropdown {
    position: relative;
}

/* Keep dropdown open when hovering menu OR submenu */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown .dropdown-menu:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove the initial hidden gap */
.navbar .dropdown-menu {
    margin-top: 0 !important;
    top: 100% !important; /* attach menu directly to nav item */
}

/* =====================================
   STICKY SECOND NAVBAR (FINAL FIX)
===================================== */

.navbar.bg-white {
  position: sticky !important;
  top: 0;
  z-index: 1030; /* above hero overlay */
}


/* =====================================
   HERO RIGHT-ALIGNED LAYOUT
===================================== */

.hero-layout {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Right-aligned hero text */
.hero-text {
  max-width: 620px;
  text-align: right;
}

/* Override existing widths safely */
.hero-text .hero-title,
.hero-text .hero-subtitle {
  width: 100% !important;
}

/* Logo placement (bottom-right, no arch) */
/* =====================================
   HERO LOGO — LEFT SIDE (FIXED)
===================================== */

.hero-logo {
  position: absolute;
  left: 40px;          /* ← moved to LEFT */
  bottom: 40px;
  z-index: 3;          /* above overlay */
  opacity: 1;          /* fully visible */
  pointer-events: none;
}

.hero-logo img {
  max-width: 460px;
  height: auto;
  object-fit: contain;
}
.overlay-hero {
  position: relative;     /* REQUIRED */
  z-index: 1;
}

@media screen and (max-width: 992px) {
  .hero-layout {
    justify-content: center;
    text-align: center;
  }

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

  .hero-logo {
    position: static;
    margin-top: 30px;
    opacity: 0.2;
  }
}
/* =====================================
   HERO HEIGHT REDUCTION (SAFE)
===================================== */

.bg-hero {
  min-height: 40vh;       /* reduce banner height */
  height: auto;
}
/* Reduce hero content vertical spacing */
.hero-title {
  margin-bottom: 24px !important;
}

.content-m {
  margin-top: 1rem !important;
}


/* =====================================
   HERO BADGE (ARCH DESIGN – LEFT BOTTOM)
===================================== */

.hero-badge {
  position: absolute;
  left: -50px;
  bottom: -60px;
  width: 360px;
  height: 430px;

  background: #FFFBE9;
  border-radius: 180px 180px 0px 0px; /* ARCH TOP */


  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 5;              /* ABOVE overlay */
 
}

/* Logo inside badge */
.hero-badge img {
  width: 110%;
  height: auto;
  object-fit: contain;
}
.overlay-hero {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 992px) {
  .hero-badge {
    position: static;
    margin: 30px auto 0;
    width: 220px;
    height: 280px;
  }
}
/* =====================================
   MID PAGE BANNER SLIDER
===================================== */

.mid-banner-section {
  padding: 60px 0;              /* TOP & BOTTOM GAP */
  background-color: var(--color-subtle);
}

.midBannerSwiper {
    padding: 0;                /* ensure single-slide visibility */
    overflow: hidden;
}

.midBannerSwiper .swiper-wrapper {
    display: flex;
    width: 100%;
}

.midBannerSwiper .swiper-slide {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* center contained images vertically */
}

/* Make image fully visible (no crop) and reduce visual size */
.midBannerSwiper img {
    display: block;
    width: auto;           /* allow natural width */
    max-width: 90%;       /* reduce width so arrows sit on image edges */
    height: auto;         /* preserve aspect ratio */
    max-height: 320px;    /* limit height */
    object-fit: contain;  /* ensure entire image is visible */
    border-radius: 12px;
    margin: 0 auto;
}

/* Arrow styling: transparent background so arrows sit directly on the image */
.midBannerSwiper .swiper-button-next,
.midBannerSwiper .swiper-button-prev {
    color: var(--color-main);
    width: 44px;
    height: 44px;
    background: transparent; /* remove white circle */
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.midBannerSwiper .swiper-button-prev { left: 16px; right: auto; }
.midBannerSwiper .swiper-button-next { right: 16px; left: auto; }

/* Make arrow icons slightly larger and more visible */
.midBannerSwiper .swiper-button-next:after,
.midBannerSwiper .swiper-button-prev:after {
    font-size: 28px; /* larger chevron */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .midBannerSwiper img {
        max-width: 95%;
        max-height: 200px;
    }
}




/* =====================================
   CONTACT IMAGE FIX (NO JUMPING)
===================================== */

.contact-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
/* Force equal height columns */
.bg-darker.border-radius-10 {
  overflow:auto;
}

.bg-darker.border-radius-10 .row {
  align-items: stretch;
}
/* Stable contact section height */
.bg-darker.border-radius-10 {
  min-height: 520px;
}

/* BOOKING POPUP */
.booking-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 32, 21, 0.65);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.booking-overlay.active {
  display: flex;
}

.booking-modal {
  background: #fff;
  max-width: 520px;
  width: 100%;
  padding: 40px;
  border-radius: 16px;
  position: relative;
}

.booking-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 22px;
  cursor: pointer;
}

.booking-title {
  font-family: var(--font-1);
  font-size: 32px;
}

.booking-subtitle {
  font-family: var(--font-2);
  color: var(--text-color-1);
  margin-bottom: 20px;
}
/* ===============================
   BOOKING POPUP TEXT VISIBILITY FIX
=============================== */

/* Popup container */
.booking-modal {
  background-color: #FFFBE9 !important;
  color: #112015 !important;
}

/* Headings */
.booking-modal h2,
.booking-modal h3,
.booking-modal p {
  color: #112015 !important;
}

/* Form inputs */
.booking-modal .form-control,
.booking-modal textarea {
  background-color: transparent !important;
  color: #112015 !important;
  border-bottom: 1px solid #c7c7c7 !important;
}

/* Placeholder text */
.booking-modal .form-control::placeholder,
.booking-modal textarea::placeholder {
  color: #696969 !important;
  opacity: 1;
}

/* On focus */
.booking-modal .form-control:focus,
.booking-modal textarea:focus {
  border-bottom-color: var(--color-main) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Submit button text */
.booking-modal button {
  color: #ffffff !important;
}
/* Fix text color for date & time inputs */
.form-input[type="date"],
.form-input[type="time"] {
  color: #666 !important;            /* match your light text */
}

/* Placeholder-like color when empty */
.form-input[type="date"]:not(:valid),
.form-input[type="time"]:not(:valid) {
  color: #aaa !important;
}

/* Calendar & clock icon color (Chrome, Edge) */
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}
.bg-ceo .quote-author {
    font-family: 'Allura', cursive !important;
    font-size: 48px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px;
    line-height: 1.1;
    text-align: center;
    display: block;
    text-transform: capitalize;
    text-shadow: 0 3px 10px rgba(0,0,0,.35);
}

@media (max-width: 768px) {
    .bg-ceo .quote-author {
        font-size: 34px !important;
    }
}
/* ===== FORCE EQUAL HEIGHT PROCESS CARDS ===== */

/* Swiper + Grid column must stretch */
.processSwiper .swiper-slide,
.row-cols-lg-4 > .col {
    display: flex;
    height: 100%;
}

/* fade-in wrapper must stretch */
.processSwiper .fade-in,
.row-cols-lg-4 .fade-in {
    display: flex;
    width: 100%;
}

/* Card takes full height */
.processSwiper .card,
.row-cols-lg-4 .card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Card body flex */
.processSwiper .card-body,
.row-cols-lg-4 .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Description pushed to bottom */
.processSwiper .text-grey,
.row-cols-lg-4 .text-grey {
    margin-top: auto;
}

/* Optional: fix title height for perfect alignment */
.processSwiper .text-subtitle.c-semi-black,
.row-cols-lg-4 .text-subtitle.c-semi-black {
    min-height: 48px;
}

.text-grey {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ============================= */
/* TESTIMONIAL NAV ARROWS */
/* ============================= */

.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #cfd8cc;
    background: #ffffff;
    color: #1f2937;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* LEFT */
.testimonial-arrow.left {
    left: -24px;
}

/* RIGHT */
.testimonial-arrow.right {
    right: -24px;
}

/* HOVER */
.testimonial-arrow:hover {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
    transform: translateY(-50%) scale(1.05);
}

/* DISABLED STATE */
.testimonial-arrow[style*="opacity: 0.3"] {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    box-shadow: none;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .testimonial-arrow.left {
        left: 6px;
    }
    .testimonial-arrow.right {
        right: 6px;
    }
}
/* ============================= */
/* TESTIMONIAL CARD HEIGHT FIX */
/* ============================= */

/* Make column full height */
.testimonial-item {
    display: flex;
}

/* Card full height */
.custom-card-1 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card body flex */
.custom-card-1 .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Message takes available space */
.custom-card-1 .card-body p.text-grey {
    flex-grow: 1;
}

/* Footer stays at bottom */
.custom-card-1 .card-body > .d-flex {
    margin-top: auto;
}

/* Ensure equal height cards */
.card.h-100 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card body stretches evenly */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Push the text cleanly inside */
.card-body p:last-child {
    margin-top: auto;
}

/* Ensure uniform card height */
.card {
    height: 100%;
    min-height: 250px; /* adjust if needed */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Make description flexible and push bottom content if needed */
.card-body {
    display: flex;
    flex-direction: column;
}

.card-body p:last-child {
    margin-top: auto; /* pushes last text to bottom */
}
.mid-banner-section img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;

}


.map-responsive {
    position: relative;
    width: 100%;
    height: 400px; /* adjust height if needed */
    overflow: hidden;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}


:root {
  --color-main: #107c57;
}

.faq-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  position: relative;
  outline: none;
}

@media (hover: hover) {
  .faq-item:hover {
    box-shadow: 0 8px 22px rgba(16, 124, 87, 0.25);
    transform: translateY(-3px);
    border-color: var(--color-main);
  }
}

.faq-question {
  background: var(--color-main);
  color: #ffffff;
  padding: 18px 56px 18px 20px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
  border-radius: 16px;
}

.faq-question::after {
  content: '?';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.faq-answer {
  background: #f9fafb;
  color: #374151;
  font-size: 15px;
  line-height: 1.7;
  max-height: 0;
  opacity: 0;
  padding: 0 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

@media (hover: hover) {
  .faq-item:hover .faq-answer {
    max-height: 500px;
    opacity: 1;
    padding: 20px;
    border-top: 1px solid #e5e7eb;
  }

  .faq-item:hover .faq-question::after {
    transform: translateY(-50%) rotate(180deg);
  }
}

.faq-item:focus-within .faq-answer {
  max-height: 1000px;
  opacity: 1;
  padding: 18px 20px;
  border-top: 1px solid #e5e7eb;
}

.faq-item:focus-within .faq-question::after {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 768px) {
  .faq-container {
    padding: 12px;
    margin: 20px auto;
  }
}


.bg-darker {
    padding-top: 40px;
    padding-bottom: 30px;
    margin-top: 0 !important;
}

.footer-logo {
    max-width: 180px;
}

.footer-links li {
    list-style: none;
    margin-bottom: 8px;
}

.footer-link:hover {
    color: #ffffff;
}

.bg-subtle .card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}
.bg-subtle .card-body {
    flex-grow: 1;
}



.faq-item.active .faq-answer {
  max-height: 800px;
  opacity: 1;
  padding: 20px;
  border-top: 1px solid #e5e7eb;
}


.bg-darker {
    padding-top: 40px;
    padding-bottom: 30px;
    margin-top: 0 !important;
}

.footer-logo {
    max-width: 180px;
}

.footer-links li {
    list-style: none;
    margin-bottom: 8px;
}

.footer-link:hover {
    color: #ffffff;
}
.footer-link{
    color: white;
}

.bg-subtle .card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}
.bg-subtle .card-body {
    flex-grow: 1;
}

.faq-item {
    border-bottom: 1px solid #ddd;
    
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.faq-toggle {
    font-size: 22px;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px; /* enough size */
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}