*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
   }
   body{
       margin: 0;
       padding: 0;
       overflow-x: hidden;
        font-family: "Montserrat", sans-serif;
   }
   body::-webkit-scrollbar{
       display: none;
   }
  /* --- Core Structural Settings From Your Base Code --- */
.navbar {
    height: 85px;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 999;
}

.logo {
    height: 100%;
    width: 14%;
}

.logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.navdiv {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* --- Adjusted Navlinks to List Structure Elements --- */
.navlinks {
    height: 100%;
    width: 65%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative; /* Anchor point for Level 1 drop menu box positioning */
}

.navlinks .nav-item > a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: rgb(50, 47, 48);
    transition: color 0.2s ease;
}

.navlinks .nav-item > a:hover {
    color: rgb(17, 16, 16);
}

/* --- Dropdown Styling Layer Mapping image_97a7c2.png UI --- */

/* UI Styling for Trigger Indicator */
.dropdown-chevron {
    display: inline-block;
    font-size: 10px;
    margin-left: 4px;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

/* Level 1 Popup Card Formatting Box */
.dropdown-menu-l1 {
    position: absolute;
    top: 80%;
    left: 0;
    width: 210px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    
    /* Hidden state setups */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-item-l1 {
    position: relative; /* Anchor point for Level 2 flyout submenu alignment positioning */
}

.dropdown-item-l1 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.2s ease;
}

/* Side Chevron Styling Rules */
.arrow-right {
    font-size: 14px;
    color: #64748b;
}

/* Image Match Variant: Active Selection Tint Indicator & Hover Tint */
.dropdown-item-l1:hover > a,
.dropdown-item-l1 a.active-category {
    background-color: #f0fdf4; /* Light emerald hue matching the image spectrum */
    color: rgb(45, 107, 4);
}

/* Level 2 Submenu Panel Properties Box */
.dropdown-menu-l2 {
    position: absolute;
    top: 0;
    left: 100%; /* Spawns menu immediately to the right edge boundary of layer 1 */
    width: 230px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 0;
    list-style: none;
    box-shadow: 5px 10px 35px rgba(0, 0, 0, 0.09);
    border: 1px solid #f1f5f9;
    margin-left: 2px; /* Tiny visual spacing separator gap */

    /* Hidden state configurations */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu-l2 li a {
    display: block;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 14px;
    color: #475569;
    background-color: transparent !important; /* Forces row item color purity */
}

.dropdown-menu-l2 li a:hover {
    background-color: #f8fafc !important; /* Neutral high-contrast grey hover selection row indicator */
    color: #0f172a !important;
}

/* --- Action Hover Visibility Matrix Engines --- */

/* Reveal Level 1 Box */
.has-dropdown:hover .dropdown-menu-l1 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown:hover .dropdown-chevron {
    transform: rotate(0deg);
}

/* Reveal Level 2 Box on Parent Hover Element */
.has-submenu:hover > .dropdown-menu-l2 {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* --- Contact Button Base Code Styling --- */
.conbut {
    height: 100%;
    width: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.conbut a {
    text-decoration: none;
    padding: 12px 28px;
    background-color: rgb(45, 107, 4);
    border-radius: 24px;
    color: white;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.conbut a:hover {
    background-color: rgb(83, 133, 50);
}
.conhe{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
     background: 
        radial-gradient(circle at 10% 20%, #effaf5 0%, transparent 40%),
        radial-gradient(circle at 90% 30%, #f0f4fe 0%, transparent 40%),
        #ffffff;
}
/* 1. Main Structural Section Dimensions */
.mp-contact-layout {
    width: 100%;
    max-width: 1440px;
    height: 480px; /* Explicit height boundary to isolate the section */
    padding: 60px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Soft blurred color spots matching image_a4d2e8.jpg backdrop texture */
   
}

.mp-contact-container {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 2. Top Small Badge Module Dimensions */
.mp-badge-row {
    width: 100%;
    height: 32px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-collab-badge {
    background-color: #40b9836f;
    color: rgb(45, 107, 4);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 3. Main Title Box Dimensions */
.mp-title-row {
    width: 100%;
    height: 58px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-main-heading {
    font-size: 46px;
    font-weight: 700;
    color: #0f172a; /* Slate 900 */
    letter-spacing: -1px;
}

.mp-text-green {
    color: rgb(45, 107, 4); /* Brand green */
}

/* 4. Description Paragraph Box Dimensions */
.mp-description-row {
    width: 100%;
    max-width: 680px; /* Restricts width to mirror the line wrapping text breaks */
    height: 56px;
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-lead-text {
    font-size: 17px;
    line-height: 1.6;
    color: #475569; /* Slate 600 */
    font-weight: 400;
}

.mp-text-green-bold {
    color: rgb(45, 107, 4);
    font-weight: 700;
}

/* 5. Call-To-Action Action Block Dimensions */
.mp-buttons-row {
    width: 100%;
    height: 52px; /* Strict operational height for button bounds */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* Reusable Button Blueprint Parameters */
.mp-btn {
    height: 100%;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease-in-out;
}

/* WhatsApp Variant Specifics */
.mp-btn-whatsapp {
    background-color: rgb(45, 107, 4);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.mp-btn-whatsapp:hover {
    background-color: rgb(83, 133, 50);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

/* Email Variant Specifics */
.mp-btn-email {
    background-color: #ffffff;
    color: rgb(83, 133, 50);
    border: 1.5px solid rgb(83, 133, 50);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.mp-btn-email:hover {
    background-color: #f0fdf4;
    transform: translateY(-2px);
}

.mp-btn-icon {
    font-size: 16px;
}

/* Responsive Overrides for Compact Form Factors */
@media (max-width: 640px) {
    .mp-contact-layout {
        height: auto;
        padding: 80px 24px;
    }
    .mp-title-row, .mp-description-row, .mp-buttons-row {
        height: auto;
    }
    .mp-buttons-row {
        flex-direction: column;
        width: 100%;
    }
    .mp-btn {
        width: 100%;
        height: 50px;
    }
}


.comu{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}


/* 1. Main Outer Container Dimensions */
.mp-comm-section {
    width: 100%;
    max-width: 1440px;
    height: auto;
    padding: 80px 40px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.mp-comm-container {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. Top Informational Badge Dimensions */
.mp-comm-badge-row {
    width: 100%;
    height: 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-location-badge {
    background-color: #e0ebff; /* Soft pastel blue badge background */
    color: #2563eb; /* Cobalt blue text */
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 20px;
}

/* 3. Main Headline Box Dimensions */
.mp-comm-title-row {
    width: 100%;
    height: 52px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-comm-heading {
    font-size: 40px;
    font-weight: 700;
    color: #0f172a; /* Slate 900 */
    letter-spacing: -0.5px;
}

.mp-accent-green {
    color: rgb(45, 107, 4); /* High-contrast emerald green */
}

/* 4. Sub-text Lead Paragraph Box Dimensions */
.mp-comm-desc-row {
    width: 100%;
    max-width: 700px; /* Boundaries strictly mapped to line wrapping length */
    height: 54px;
    margin-bottom: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mp-comm-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #475569; /* Slate 600 text readability */
    font-weight: 400;
}

/* 5. 3-Column Card Layout Deck Box Dimensions */
.mp-cards-deck {
    width: 100%;
    height: 340px; /* Strict uniform layout frame height */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

/* Individual Card Structural Architecture Blueprint */
.mp-method-card {
    width: 31.5%; /* Sized to perfectly spread across 3 blocks evenly */
    height: 75%;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #f1f5f9;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
    /* box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); Subdued graphic layer shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mp-method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

/* Featured Card Modifier (Green Tint Highlight Frame) */
.mp-featured-green-card {
    border: 1px solid #e2f7ed;
    background: linear-gradient(180deg, #ffffff 0%, #f6fdfa 100%);
}

/* Soft-tint Square Graphic Shield Box Dimensions */
.mp-icon-shield {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* Colored themes directly reflecting image_a4c3e0.png specs */
.mp-shield-green  { background-color: #e1f7ed; color: rgb(45, 107, 4); }
.mp-shield-blue   { background-color: #e0f2fe; color: #2563eb; }
.mp-shield-purple { background-color: #f3e8ff; color: #7c3aed; }

/* Card Headline Box Dimensions */
.mp-card-label-box {
    width: 100%;
    height: 26px;
    margin-bottom: 12px;
}

.mp-card-label-box h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
}

/* Featured Green Card Headline Color Swap */
.mp-featured-green-card .mp-card-label-box h3 {
    color: rgb(45, 107, 4); /* Darker emerald for text visibility */
}

/* Information Container Box Dimensions */
.mp-card-info-box {
    width: 100%;
    height: 60px;
    margin-bottom: auto; /* Clean uniform component alignment pusher */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-contact-data {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.mp-contact-subtext {
    font-size: 13px;
    color: #64748b;
    font-weight: 400;
}

/* Dynamic Call-To-Action Link Frame Dimensions */
.mp-card-action-box {
    width: 100%;
    height: 20px;
}

.mp-action-link {
    font-size: 13px;
    font-weight: 700;
    color: rgb(45, 107, 4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.mp-action-link:hover {
    color: rgb(83, 133, 50);
}

.mp-arrow {
    font-size: 16px;
    line-height: 1;
}

/* Tablet and Vertical Viewport Adapter System */
@media (max-width: 992px) {
    .mp-cards-deck {
        height: auto;
        flex-direction: column;
        gap: 24px;
    }
    .mp-method-card {
        width: 100%;
        height: auto;
    }
    .mp-comm-title-row, .mp-comm-desc-row {
        height: auto;
    }
}


.clo{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 1. Main Outer Structural Section Bounds */
.mp-timing-section {
    width: 100%;
    max-width: 1440px;
    height: auto;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

/* Rounded Card Board Parameters */
.mp-timing-card-frame {
    width: 100%;
    max-width: 1150px;
    height: 190px; /* Explicit operational height constraint */
    border-radius: 16px;
    padding: 32px 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* Soft light-mint gradient overlay style matching image_a4b83f.png graphics layer */
    background: linear-gradient(90deg, #f3faf7 0%, #f4f8fc 100%);
    border: 1px solid #edf5f1;
}

/* 2. Top Centered Badge Header Block Dimensions */
.mp-timing-header-box {
    width: auto;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mp-clock-icon-shield {
    width: 36px;
    height: 36px;
    background-color: rgb(45, 107, 4); /* High contrast brand green circle */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-timing-main-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a; /* Slate 900 */
    letter-spacing: -0.3px;
}

/* 3. Dual Columns Wrapper Box Dimensions */
.mp-timing-content-row {
    width: 100%;
    max-width: 820px; /* Aligns data text layout cleanly beneath the header banner spacing */
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Individual Data Column Dimension Blocks */
.mp-timing-data-column {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mp-column-headline-wrap {
    width: 100%;
    height: 22px;
    margin-bottom: 8px;
}

.mp-timing-data-column h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b; /* Slate 800 */
}

.mp-column-body-wrap {
    width: 100%;
    height: 42px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Typographic Nuances directly matching the presentation layer */
.mp-highlight-text {
    font-size: 14px;
    font-weight: 500;
    color: #334155; /* Slate 700 */
}

.mp-dim-text {
    font-size: 14px;
    font-weight: 400;
    color: #475569; /* Slate 600 */
}

.mp-darker-text {
    color: #1e293b;
    font-weight: 500;
}

/* Responsive breakout matrix for tablet and portrait layouts */
@media (max-width: 768px) {
    .mp-timing-card-frame {
        height: auto;
        padding: 32px 24px;
    }
    .mp-timing-content-row {
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        margin-top: 24px;
    }
    .mp-timing-data-column {
        width: 100%;
        height: auto;
    }
    .mp-column-body-wrap {
        height: auto;
    }
}


.inq{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8fafc;
}

/* 1. Main Outer Structural Section Bounds */
.mp-message-section {
    width: 100%;
    max-width: 1440px;
    height: auto;
    padding: 60px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/* Isolated Centered White Card Frame */
.mp-message-card-board {
    width: 100%;
    max-width: 680px;
    height: auto;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    /* box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04); */
    border: 1px solid #f1f5f9;
}

/* 2. Top Rounded Graphic Shield Box Dimensions */
.mp-message-icon-shield {
    width: 56px;
    height: 56px;
    background-color: #50cc9459; /* Light mint accent theme */
    color: rgb(45, 107, 4); /* Primary brand emerald */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* 3. Heading Component Wrap Block */
.mp-message-headline-wrap {
    width: 100%;
    height: 32px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-message-main-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a; /* Slate 900 */
    letter-spacing: -0.5px;
}

/* 4. Lead Explainer Wrap Block */
.mp-message-lead-wrap {
    width: 100%;
    max-width: 540px; /* Bounded precisely to force proper text lines wrapping */
    height: auto;
    margin-bottom: 32px;
    text-align: center;
}

.mp-message-body-lead {
    font-size: 15px;
    line-height: 1.6;
    color: #475569; /* Slate 600 readability style */
}

.mp-highlight-email {
    color: #334155;
    font-weight: 500;
}

/* 5. Dual Information Grid Wrapper Blocks */
.mp-hints-row-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

/* Individual Prompt Cards Details */
.mp-hint-info-plate {
    width: 50%;
    height: auto;
    background-color: #f8fafc; /* Very soft light gray box fill */
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.mp-hint-label-box {
    width: 100%;
    height: 22px;
    margin-bottom: 6px;
}

.mp-hint-info-plate h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b; /* Slate 800 */
}

.mp-hint-body-box {
    width: 100%;
    height: auto;
}

.mp-hint-info-plate p {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b; /* Slate 500 minor instruction text */
}

/* 6. Primary Action Button Wrapper Box Dimensions */
.mp-message-action-wrap {
    width: 100%;
    height: 46px;
    display: flex;
    justify-content: center;
}

.mp-submit-inquiry-btn {
    height: 100%;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 600;
    background-color: rgb(45, 107, 4); /* Accent green solid variant */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease-in-out;
}

.mp-submit-inquiry-btn:hover {
    background-color: rgb(83, 133, 50);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

/* Mobile Adaptive Structural Overrides */
@media (max-width: 640px) {
    .mp-message-card-board {
        padding: 36px 20px;
    }
    .mp-hints-row-wrapper {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
    }
    .mp-hint-info-plate {
        width: 100%;
    }
    .mp-message-headline-wrap, .mp-hint-label-box {
        height: auto;
    }
}

.faa{
  height: auto;
  width: 100%;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq-section-container {
    width: 820px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Header Text Structural Block Division */
.faq-header-block {
    width: 100%;
    height: auto;
    text-align: center;
}

/* Separate Core Section Title Element */
.faq-main-title {
    font-size: 34px;
    font-weight: 700;
    color: #0b1f33;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

/* Separate Subtext Tagline Description Element */
.faq-sub-tagline {
    font-size: 16px;
    color: #556877;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Accordion Vertical Stack Wrapper Division */
.faq-accordion-stack {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Accordion Item Wrapper Frame */
.faq-item-box {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    width: 100%;
    height: auto;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Completely hide the state checkbox controllers */
.faq-state-checkbox {
    display: none;
}

/* Interactive Question Header Bar Element */
.faq-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

/* Separate Question Text Label Component */
.question-text-span {
    font-size: 16px;
    font-weight: 700;
    color: #0b1f33;
    padding-right: 20px;
}

/* Square Status Indicator Icon Wrapper Element */
.faq-toggle-icon-frame {
    position: relative;
    width: 22px;
    height: 22px;
    background-color: rgb(45, 107, 4); /* Green color scheme matching branding */
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Base configuration for cross lines within the toggle button */
.icon-line {
    position: absolute;
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.line-horizontal {
    width: 10px;
    height: 2px;
}

.line-vertical {
    width: 2px;
    height: 10px;
}

/* Animated Expansion Panel Box Area Division */
.faq-answer-panel {
    max-height: 0;
    overflow: hidden;
    /* Uses max-height transition framework to animate down cleanly without JS */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fcfdfe;
}

/* Interior padding box keeping sizing crisp during slides */
.faq-panel-inner-content {
    padding: 0 28px 24px 28px;
    border-top: 1px solid transparent;
    transition: border-color 0.3s ease;
}

/* Separate Paragraph Text Component */
.faq-answer-paragraph {
    font-size: 15px;
    color: #4b5d6b;
    line-height: 1.7;
}

/* Separate Font Weight Accent Highlight Component */
.faq-text-bold {
    font-weight: 700;
    color: #1f2937;
}

/* ==========================================================================
   PURE CSS STATE TRIGGERS (When checkbox hidden status is checked)
   ========================================================================== */

/* 1. Modify Card Outer Wrapper borders and shadows when active */
.faq-state-checkbox:checked + .faq-item-box {
    border-color: #e2f8ed;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.04);
}

/* 2. Style active state header background tint */
.faq-state-checkbox:checked ~ .faq-question-header {
    background-color: #f4faf7; /* Soft green backdrop on open item */
}

/* 3. Change icon color frame from Green (+) to Crimson/Red (-) as in mockup */
.faq-state-checkbox:checked ~ .faq-question-header .faq-toggle-icon-frame {
    background-color: #ef4444; 
}

/* 4. Rotate vertical bar into horizontal alignment to visually form minus sign */
.faq-state-checkbox:checked ~ .faq-question-header .line-vertical {
    transform: rotate(90deg);
    opacity: 0;
}

/* 5. Open inner structural border and expand panel height constraint smoothly */
.faq-state-checkbox:checked ~ .faq-answer-panel {
    max-height: 300px; /* Safe upper threshold bound for text expansion */
}

.faq-state-checkbox:checked ~ .faq-answer-panel .faq-panel-inner-content {
    border-color: #eef2f5;
}

/* Responsive breakout logic */
@media (max-width: 860px) {
    .faq-section-container {
        width: 100%;
        padding: 0 10px;
    }
    .faq-question-header {
        padding: 18px 20px;
    }
    .faq-panel-inner-content {
        padding: 0 20px 20px 20px;
    }
}
.still{
  height: auto;
  width: 100%;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
    background-color: #f0fbf5;
}

/* Single Outer Content Wrapper Card Division */
.cta-banner-container {
     /* Soft light-green tint background matching image_a11dbf.png */
    border: 1px solid #dcf4e8;   /* Subtle border layout accent line */
    width: 100%;
    max-width: 1140px;           /* Standard structural layout container width constraint */
    height: auto;
    border-radius: 20px;         /* Distinct rounded framing corners */
    padding: 56px 40px;          /* Generous vertical content buffer */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Separate Main Action Title Header Element */
.cta-main-title {
    font-size: 26px;
    font-weight: 700;
    color: #0c5132;              /* Deep dark green header text color */
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

/* Separate Core Description Text Paragraph Element */
.cta-description-text {
    font-size: 16px;
    font-weight: 400;
    color: #126e45;              /* Vibrant balanced dark green description color */
    max-width: 650px;
    line-height: 1.5;
    margin-bottom: 28px;
}

/* Action Trigger Anchor Element Button Link */
.cta-action-button {
    background-color: rgb(45, 107, 4);   /* Solid main green button theme background */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                   /* Precise horizontal gap spacing between icon and text */
    padding: 14px 28px;
    border-radius: 10px;         /* Crisp medium edge curve */
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); /* Soft glowing elevation shadow */
    transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}

/* Micro-Interaction Animation Rules for Button Hover States */
.cta-action-button:hover {
    background-color: rgb(83, 133, 50);   /* Smooth tone drop shift on pointer hover */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.cta-action-button:active {
    transform: translateY(0);    /* Button depresses down when active clicked */
}

/* Separate Embedded Vector Icon Elements Custom Dimensions */
.cta-phone-icon {
    width: 18px;
    height: 18px;
    color: #ffffff;
    transform: rotate(0deg);     /* Straight baseline vector alignment */
}

/* Separate Core Button Accent Text Label Element */
.cta-button-text {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;              /* Crisp clean white font contrast */
    letter-spacing: -0.2px;
}

/* Responsive adjustment rules for mobile layout viewports */
@media (max-width: 768px) {
    .cta-banner-container {
        padding: 40px 24px;
        border-radius: 16px;
    }
    .cta-main-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .cta-description-text {
        font-size: 14.5px;
        margin-bottom: 24px;
    }
    .cta-action-button {
        width: 100%;             /* Fits wide on small mobile screens */
        max-width: 280px;
        padding: 12px 20px;
    }
}
























.foter{
  height: auto;
  width: 100%;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   MAIN STRUCTURAL FOOTER BLOCK DIVISION (Separate height and width rules)
   ========================================================================== */
.footer-block-container {
    background-color: #0b1622;         /* Deep obsidian blue backdrop matching image_a12505.png */
    width: 100%;                       /* Full screen expansion track */
    height: 480px;                     /* Distinct overall segment height constraint */
    padding: 60px 80px 40px 80px;      /* Content edge grid buffers */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Top Section Core Layout Grid Container Row Division */
.footer-content-grid-row {
    width: 1140px;                     /* Locked standard design grid inner width */
    height: 290px;                     /* Separate grid row viewport height */
    margin: 0 auto;                    /* Centered horizontal alignment layout */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ==========================================================================
   COLUMN 1 DIVISION: BRAND CONTENT & CONNECT DATA PANEL
   ========================================================================== */
.footer-brand-column-div {
    width: 420px;                      /* Large dimension allotment for identity profiles */
    height: 290px;                     /* Explicit height boundary layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Corporate Logo Horizontal Combination Header Division Box */
.footer-logo-layout-box {
    overflow: hidden;
    width: 420px;                      
    height: 44px;                      /* Compact locked header row */
    display: flex;
    align-items: center;
    gap: 14px;
    /* background-color: #059669; */
}

/* Emblem Circle Graphics Configuration */
.brand-vector-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Typography Identity Stack Box Container */
.brand-text-identity-stack {
    width: 366px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.footer-company-name-heading {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.footer-company-tagline-text {
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(45, 107, 4);                    /* Branding accent green text color */
}

/* Contact List Cluster Stack Structural Box Division */
.footer-contact-directory-box {
    width: 420px;
    height: 106px;                     /* Allocated dimension profile for three lines */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Custom Horizontal Directory Line Rows */
.contact-info-line-row {
    width: 420px;
    height: 24px;                      /* Single content alignment row standard */
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-indicator-svg {
    width: 17px;
    height: 17px;
    color: rgb(45, 107, 4);                    /* Bright green accent node strokes */
    flex-shrink: 0;
}

.contact-item-label-span {
    font-size: 14.5px;
    color: #9cb0c1;                    /* Soft desaturated grey read-color contrast */
}

/* Social Media Controls Base Division Frame Block */
.footer-social-wrapper-box {
    width: 420px;
    height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.social-header-label-text {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.social-squares-layout-row {
    width: 200px;                      /* Confined width bounding the horizontal matrix */
    height: 42px;                      
    display: flex;
    gap: 10px;
}

/* Individual Squared Anchor Link Blocks Division Elements */
.social-media-square-link {
    background-color: #16222f;         /* Matte grey tinted base cells */
    width: 42px;
    height: 42px;
    border-radius: 8px;                /* Distinct smooth framing profile curvature */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.social-vector-graphic {
    width: 17px;
    height: 17px;
    color: #9cb0c1;
}

/* Micro-Interaction Hover Shifts for Social Links */
.social-media-square-link:hover {
    background-color: rgb(45, 107, 4);         /* Bright green transformation */
}
.social-media-square-link:hover .social-vector-graphic {
    color: #ffffff;                    /* Pure white graphic highlight transformation */
}

/* ==========================================================================
   COLUMNS 2 & 3 DIVISION: DIRECTORY LINK NAVIGATION MENUS
   ========================================================================== */
.footer-navigation-column-div {
    width: 180px;                      /* Tight vertical catalog width dimension rule */
    height: 260px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.footer-products-column-div {
    width: 220px;                      /* Wider structural buffer zone for content strings */
    height: 260px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.directory-column-header-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    height: 24px;                      /* Header height text standard profile lock */
}

.directory-links-vertical-stack {
    width: 100%;
    height: 214px;                     /* Maximized dynamic layout distribution area */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Separate Action Link Typography Labels Elements */
.directory-anchor-link {
    font-size: 14.5px;
    color: #9cb0c1;
    text-decoration: none;
    height: 22px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.directory-anchor-link:hover {
    color: #ffffff;
    padding-left: 4px;                 /* Dynamic active micro nudge animation effect */
}

/* ==========================================================================
   SEPARATOR DIVISION BOUNDARY
   ========================================================================== */
.footer-separator-line-divider {
    width: 1140px;
    height: 1px;                       /* Razor sharp wireframe dividing line */
    background-color: #162536;
    margin: 0 auto;
}

/* ==========================================================================
   BOTTOM SECTION: COPYRIGHT MANAGEMENT STRIP BLOCK DIVISION
   ========================================================================== */
.footer-bottom-copyright-strip-row {
    width: 1140px;
    height: 44px;                      /* Lower utility profile bar lock */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-textual-info-stack {
    width: 600px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.copyright-declaration-paragraph {
    font-size: 13.5px;
    color: #556b7e;
}

.nature-attribution-paragraph {
    font-size: 12.5px;
    color: #435463;
}

.heart-symbol-icon {
    color: #ef4444;                    /* Blood crimson red heart symbol glyph highlight */
}

/* Utilities Action Components Alignment Block Division */
.floating-utilities-alignment-box {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Back-To-Top Circular Automation Component Frame Division */
.utilities-back-to-top-circle-btn {
    background-color: rgb(45, 107, 4);         /* Vibrant evergreen forest foundation color tint */
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;                /* Full pixel uniform perfect sphere layout */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.utility-arrow-vector {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

.utilities-back-to-top-circle-btn:hover {
    background-color: rgb(45, 107, 4);         /* Bright light shift on focus tracking pointer */
    transform: translateY(-3px);       /* Vertical pop motion layout alteration response */
}

/* Responsive breakout logic constraints for small screen viewports */
@media (max-width: 1200px) {
    .footer-block-container {
        height: auto;
        padding: 50px 20px 30px 20px;
        gap: 40px;
    }
    .footer-content-grid-row,
    .footer-separator-line-divider,
    .footer-bottom-copyright-strip-row {
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .footer-brand-column-div,
    .footer-logo-layout-box,
    .brand-text-identity-stack,
    .footer-contact-directory-box,
    .contact-info-line-row,
    .footer-social-wrapper-box,
    .footer-navigation-column-div,
    .footer-products-column-div,
    .copyright-textual-info-stack {
        width: 100%;
        height: auto;
        gap: 16px;
    }
    .directory-links-vertical-stack {
        height: auto;
        gap: 12px;
    }
}