/* Modern Clean White Design */
:root {
    --primary-color: #4a6cf7; /* A modern blue */
    --secondary-color: #6c757d; /* Grey for less emphasis */
    --text-color: #333;
    --light-gray: #f5f5f7;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.08); /* Softer shadow */
    --panel-width: 340px; /* Slightly wider panel */
    --border-radius: 6px; /* Consistent border radius */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Sticky Top Bar Styles */
.sticky-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white;
    padding: 12px 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 500;
}

.sticky-top-bar a {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.sticky-top-bar a:hover {
    opacity: 0.8;
}

.sticky-top-bar i {
    font-size: 12px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* System font stack */
    background-color: white;
    color: var(--text-color);
    overflow-x: hidden; /* Prevent scrollbars on the body itself on desktop */
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make body at least full viewport height */
    padding-top: 48px; /* Adjust based on sticky bar height */
}

.configurator {
    display: flex;
    height: 100vh; /* Full viewport height for the main container */
    width: 100vw;
    /* Initial state set by JS based on screen width */
    /* Classes 'menu-visible' or 'menu-hidden' will be added */
    flex: 1 0 auto;
}

/* 3D Viewer Section */
#viewer-container {
    flex: 1; /* Takes remaining horizontal space on desktop */
    /* height: 100%; */ /* Height controlled by state classes on mobile */
    position: relative;
    background-color: #eef0f4; /* Light neutral background */
    min-width: 0; /* Crucial for flexbox calculation stability */
    transition: height 0.3s ease-in-out; /* Smooth transition for mobile */
}

/* Configuration Panel */
.config-panel {
    width: var(--panel-width);
    flex-shrink: 0; /* Prevent panel from shrinking horizontally */
    /* height: 100%; */ /* Height controlled by state classes on mobile */
    background-color: white;
    border-left: 1px solid var(--border-color);
    overflow-y: auto; /* Enable scrolling within the panel if content exceeds height */
    padding: 1.5rem 2rem; /* Adjust padding */
    box-shadow: -4px 0 12px var(--shadow-color);
    z-index: 10; /* Ensure panel is above viewer canvas if overlapping */
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), border 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition for mobile properties */
}

h1 {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
}

.config-section {
    margin-bottom: 1.8rem; /* Space between sections */
}

h2 {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    color: var(--text-color);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.6rem;
}

.config-option {
    margin-bottom: 1.1rem; /* Space between options within a section */
    display: flex;
    flex-direction: column; /* Stack label above control */
}

label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--secondary-color); /* Lighter color for labels */
    font-weight: 500;
    display: block; /* Ensure label takes full width */
}

/* Select Dropdown Styling */
.select-wrapper {
    position: relative; /* For positioning the arrow */
}

select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem; /* Padding L/R adjusted for icon */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: white;
    appearance: none; /* Remove default OS arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 0.95rem;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s ease;
    background-image: none; /* Ensure no background image interferes */
}
select:hover {
    border-color: #aaa; /* Subtle border highlight on hover */
}
select:focus {
    outline: none; /* Remove default focus outline */
    border-color: var(--primary-color); /* Highlight border on focus */
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2); /* Add focus ring */
}
select:disabled { /* Style for disabled state */
    background-color: var(--light-gray);
    cursor: not-allowed;
    opacity: 0.7;
}


.select-wrapper i.fa-chevron-down {
    position: absolute;
    right: 1rem; /* Position arrow inside the select */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Icon doesn't block interaction */
    color: var(--secondary-color);
    font-size: 0.8rem;
}

/* Options Checkboxes & Info Icon Styling */
#options-container .config-option {
    flex-direction: row; /* Align items horizontally */
    align-items: center; /* Center items vertically */
    margin-bottom: 0.8rem; /* Spacing between options */
}
#options-container .config-option.option-with-tooltip { /* Class added by JS */
    /* Styles specific to options with tooltips if needed */
}

/* Label containing icon, checkbox, text */
#options-container label {
    display: flex;
    align-items: center;
    cursor: default; /* Label text itself isn't clickable for checkbox toggle */
    margin-bottom: 0; /* Override default label margin */
    flex-grow: 1; /* Allow text to take available space */
    font-size: 0.95rem; /* Match select font size */
    color: var(--text-color); /* Use standard text color */
    font-weight: normal;
}

/* Info Icon ('i') Styling */
.option-info-icon {
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1rem; /* Icon size */
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    margin-right: 0.6rem; /* Space between icon and checkbox */
    line-height: 1; /* Prevent extra height */
    flex-shrink: 0; /* Prevent icon from shrinking */
}
.option-info-icon:hover {
    opacity: 1.0; /* Fully opaque on hover */
}

/* Checkbox Styling */
#options-container input[type="checkbox"] {
    margin-right: 0.7rem; /* Space between checkbox and text */
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    accent-color: var(--primary-color); /* Modern way to color the checkmark */
    vertical-align: middle; /* Better alignment with text */
}


/* Price Display & Finalize Section */
.price-summary {
    margin-top: auto; /* Push this section to the bottom of the panel */
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

#price-display p {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    color: #555;
}
#price-display p:last-of-type { /* Style the final total line */
     margin-top: 0.8rem;
     font-size: 1rem;
     font-weight: bold;
}

#price-display strong { /* Labels like 'Subtotal:' */
    font-weight: 500;
    color: var(--text-color);
}
#price-display span { /* Price values */
    font-weight: 600;
    min-width: 80px; /* Help align numbers */
    text-align: right;
}

#price-display #price-total { /* Final total value */
     font-size: 1.15rem;
     color: var(--primary-color);
     font-weight: bold;
}

/* Primary Button Styling (Finalize) */
.primary-button {
    margin-top: 1rem;
    width: 100%;
    padding: 0.9rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.primary-button i { /* Icon inside button */
    margin-right: 0.6rem;
}
.primary-button:hover {
    background-color: #3a5bd7; /* Darker blue on hover */
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.3);
}
.primary-button:active {
    background-color: #2e48b5; /* Even darker on click */
    box-shadow: none;
}

/* --- Mobile Menu Button Styles (Hidden on Desktop) --- */
.mobile-menu-button {
    display: none; /* <<< THIS IS THE CRUCIAL RULE TO HIDE IT ON DESKTOP */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    padding: 0.8rem 1.4rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.3s ease-in-out, opacity 0.3s ease;
    /* display: flex; */ /* <<< REMOVE 'display: flex' from the base rule if it's there */
    align-items: center;
    gap: 0.6rem;
}

.mobile-menu-button:hover {
    background-color: #3a5bd7;
}
.mobile-menu-button .fa-solid {
    font-size: 1.1em; /* Make icon slightly larger than text */
}


/* ----- Modal General Styles ----- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if modal content is tall */
    background-color: rgba(0, 0, 0, 0.65); /* Dark semi-transparent background */
    backdrop-filter: blur(4px); /* Optional background blur */
    padding: 20px; /* Padding for smaller screens where modal might touch edges */
}

.modal-content {
    background-color: #fff;
    margin: 8% auto; /* Centered, with top margin */
    padding: 25px 30px;
    border: none; /* Remove basic border */
    width: 90%; /* Responsive width */
    border-radius: var(--border-radius);
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    animation: fadeInScale 0.3s ease-out; /* Simple entrance animation */
}

/* Entrance animation */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Close Button ('x') styling */
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem; /* Larger close button */
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}
.close-button:hover,
.close-button:focus {
    color: #333; /* Darker on hover */
    text-decoration: none;
}

/* ----- Summary Modal Specific Styles ----- */
.summary-modal-content { /* Use specific class if needed */
    max-width: 550px; /* Limit width on larger screens */
}

.summary-modal h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-color);
    font-weight: 600;
}

.summary-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #eee; /* Separator line */
}
.summary-section:last-of-type { /* Remove border from last section */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1rem;
}

.summary-section h3 { /* Headings within summary */
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-weight: 600;
}

/* Styling for lines within summary (Config, Items, Price Breakdown) */
.summary-section p, .summary-section li {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    color: #444;
}
.summary-section li span, .summary-section p span { /* Price/Value spans */
   font-weight: 500;
   text-align: right;
   color: var(--text-color);
   min-width: 90px; /* Help align values */
   margin-left: 10px; /* Ensure space */
}
.summary-section p strong, .summary-section li strong { /* Labels like SKU, Total Price */
   font-weight: 600;
   color: var(--text-color);
}
.summary-section p strong span, .summary-section li strong span { /* Values for bold labels */
    font-weight: bold;
}

/* List for included options */
#summary-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#summary-options-list li {
     padding-bottom: 0.5rem;
     border-bottom: 1px dashed #eee; /* Dashed separator for options */
}
#summary-options-list li:last-child {
     border-bottom: none; /* No border on last item */
     padding-bottom: 0;
}

/* Price breakdown specific styling */
.price-breakdown p span { /* Values like GST/QST amount */
     min-width: 90px;
     font-weight: 500;
}
.price-breakdown p strong span { /* The final total price value */
     font-size: 1.1rem;
     font-weight: bold;
}

/* Disclaimer text at bottom of summary */
.disclaimer {
    font-size: 0.85rem;
    color: #777;
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* ----- Option Info Modal Specific Styles ----- */
.option-modal .modal-content { /* Use specific class */
     max-width: 450px; /* Suitable width for image + text */
     padding: 20px 25px;
     text-align: center;
}

.option-modal h3#option-modal-title { /* Target specific title */
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    color: var(--text-color);
    font-weight: 600;
}

.option-modal-body {
    margin-top: 1rem;
}

#option-modal-image {
    max-width: 90%; /* Prevent image touching edges */
    height: auto;
    max-height: 220px; /* Limit image height */
    display: block; /* Remove extra space below image */
    margin: 0 auto 1rem auto; /* Center image, add bottom margin */
    border-radius: var(--border-radius);
    background-color: var(--light-gray); /* Light background for placeholder */
    object-fit: contain; /* Scale image nicely */
}

#option-modal-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    text-align: left; /* Left align description text */
}


/* Checkbox Styling (General - applies to main options and wirelocks before specific override) */
#options-container input[type="checkbox"],
#options-container input[type="radio"] { /* Apply base to both */
    margin-right: 0.7rem;
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary-color); /* Works for modern checkboxes, less so for radios */
    vertical-align: middle;
    /* appearance: none; */ /* We might need this if we go full custom */
    /* -webkit-appearance: none; */
    /* -moz-appearance: none; */
}

/* Custom Styling for Wirelock Radio Buttons to look more like checkboxes or styled circles */
.wirelock-option-item input[type="radio"] {
    appearance: none; /* Hide the default radio button */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff; /* Background of the custom 'box' */
    border: 1px solid var(--border-color);
    border-radius: 4px; /* Make it square like a checkbox, or 50% for a circle */
    display: inline-block;
    position: relative;
    width: 17px; /* Match checkbox size */
    height: 17px;
    margin-right: 0.7rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wirelock-option-item input[type="radio"]:hover {
    border-color: #aaa;
}

.wirelock-option-item input[type="radio"]:focus-visible { /* Modern focus styling */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
}


/* Style for the 'checked' state - the inner mark */
.wirelock-option-item input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 9px; /* Size of the inner 'check' or dot */
    height: 9px;
    background-color: var(--primary-color); /* Color of the inner mark */
    border-radius: 2px; /* For a square-ish inner mark, or 50% for a dot */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease;
}

/* Optional: If you want the radio button itself to change background when checked */
.wirelock-option-item input[type="radio"]:checked {
    /* background-color: var(--primary-color); */ /* Option 1: fill the box */
    border-color: var(--primary-color);       /* Option 2: just change border */
}


/* Ensure the label for wirelock items is still clickable to toggle the radio */
.wirelock-option-item label {
    display: flex; /* Keep alignment */
    align-items: center;
    cursor: pointer; /* Make the whole label clickable for the radio */
}

/* Adjust spacing for the wirelock options if needed */
.wirelock-option-item {
    /* margin-bottom: 0.6rem; */ /* Example if you want tighter spacing */
}

/* You might need to adjust alignment if the custom radio looks off */
.wirelock-option-item input[type="radio"],
.wirelock-option-item label span { /* If you wrap text in span */
    vertical-align: middle;
}

.site-footer {
    background-color: #ffffff; /* White background */
    color: #555; /* Medium gray text for readability */
    padding: 40px 0 0; /* Top padding, no bottom padding initially (bottom bar handles it) */
    border-top: 1px solid var(--border-color, #e0e0e0); /* Use your existing border color */
    font-size: 0.9rem;
    line-height: 1.6;
    width: 100%;
    /* Removed position:fixed and bottom:0 to allow normal page flow */
}

.footer-content-wrapper {
    max-width: 1200px; /* Max width for content */
    margin: 0 auto;
    padding: 0 20px; /* Side padding for content */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Distribute space */
    gap: 30px; /* Gap between footer sections */
}

.footer-logo-area,
.footer-links-group,
.footer-disclaimer-area {
    flex: 1; /* Allow flex items to grow */
    min-width: 200px; /* Minimum width before wrapping */
    margin-bottom: 30px;
}

.footer-logo {
    max-height: 40px; /* Adjust as needed */
    margin-bottom: 15px;
    display: block; /* Or inline-block if text is next to it */
}

.footer-company-name {
    font-size: 0.95rem;
    color: var(--text-color, #333);
    font-weight: 500;
}

.footer-links-group h4,
.footer-disclaimer-area h4 {
    font-size: 1rem;
    color: var(--text-color, #333);
    margin-bottom: 15px;
    font-weight: 600;
    position: relative;
    /* Optional: underline effect for headings */
    /* padding-bottom: 5px; */
}
/* Optional: underline effect for headings */
/*
.footer-links-group h4::after,
.footer-disclaimer-area h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color, #4a6cf7);
}
*/

.footer-links-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-group ul li {
    margin-bottom: 8px;
}

.footer-links-group ul li a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-links-group ul li a:hover {
    color: var(--primary-color, #4a6cf7);
    text-decoration: underline;
}

.footer-disclaimer-text {
    font-size: 0.85rem;
    color: #777;
}

.footer-bottom-bar {
    background-color: #f5f5f7; /* Slightly different background for the bottom bar */
    color: #777;
    text-align: center;
    padding: 15px 20px;
    margin-top: 20px; /* Space above the bottom bar */
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* Email Configuration Link Styling */
.email-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.email-link:hover {
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
}

.email-link i {
    font-size: 0.85rem;
}


/* ----- Responsive Adjustments ----- */
/* Tablet and smaller */
@media (max-width: 992px) {
    :root {
        --panel-width: 320px; /* Adjust panel width for tablets */
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    /* Adjust body padding for mobile sticky bar */
    body {
        overflow: hidden; /* Prevent body scroll when panel takes full height */
        padding-top: 44px; /* Reduced padding for mobile sticky bar */
    }

    /* Adjust sticky bar for mobile */
    .sticky-top-bar {
        padding: 10px 15px;
        font-size: 13px;
    }

    .configurator {
        flex-direction: column; /* Stack vertically */
        height: 100vh; /* Ensure main container takes full viewport height */
    }

    /* --- State When Menu is HIDDEN --- */
    .configurator.menu-hidden #viewer-container {
        height: 100vh; /* Viewer takes full screen */
        /* flex-grow: 1; */ /* Not needed if height is 100vh */
    }
    .configurator.menu-hidden .config-panel {
        height: 0; /* Panel is collapsed */
        flex-shrink: 0;
        overflow: hidden; /* Hide content */
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
        box-shadow: none;
        /* transition applied below */
    }
    .configurator.menu-hidden .mobile-menu-button {
         transform: translateX(-50%) translateY(0); /* Button fully visible */
         opacity: 1;
    }

    /* --- State When Menu is VISIBLE --- */
    .configurator.menu-visible #viewer-container {
        height: 55vh; /* Viewer takes top portion */
        flex-shrink: 0; /* Don't allow shrinking below this */
    }
    .configurator.menu-visible .config-panel {
        width: 100%;
        height: 45vh; /* Panel takes bottom portion */
        min-height: 280px; /* Ensure minimum usable height */
        flex-shrink: 0; /* Don't allow shrinking below this */
        border-left: none;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -5px 15px var(--shadow-color);
        padding: 1rem 1.5rem; /* Restore padding */
        overflow-y: auto; /* Enable scrolling */
        display: flex; /* Keep internal flex layout */
        flex-direction: column;
    }
    .configurator.menu-visible .mobile-menu-button {
         transform: translateX(-50%) translateY(0); /* Button still visible */
         /* Optionally hide button slightly when menu is open: */
         /* transform: translateX(-50%) translateY(50px); */
         /* opacity: 0.8; */
    }

    /* Apply smooth transitions between states */
    #viewer-container, .config-panel {
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother ease */
    }
    .config-panel {
        /* Specify properties included in the transition */
        transition-property: height, padding, border, box-shadow;
    }


    /* Show and style the button only on mobile */
    .mobile-menu-button {
        display: flex; /* Show button on mobile */
    }

    /* Adjust text sizes for mobile */
    h1 { font-size: 1.3rem; margin-bottom: 1.2rem; }
    h2 { font-size: 1.0rem; margin-bottom: 0.8rem; }
    .config-section { margin-bottom: 1.2rem; } /* Tighter section spacing */
    select, #options-container label, .primary-button { font-size: 0.9rem; }
    .config-option label { font-size: 0.85rem; }
    .summary-section p, .summary-section li { font-size: 0.9rem; }
    #option-modal-description { font-size: 0.9rem; }


    /* Ensure price summary stays at bottom in mobile view */
    .price-summary {
         margin-top: auto; /* Push to bottom */
         padding-top: 1rem;
    }

    /* Adjust modal styles slightly for smaller screens */
    .modal-content {
        margin: 5% auto; /* Reduce top margin */
        width: 95%; /* Use more screen width */
        padding: 20px;
        max-height: 85vh; /* Ensure modal itself doesn't overflow screen */
        overflow-y: auto; /* Allow modal content to scroll if needed */
    }
     /* Ensure summary/option modals don't exceed screen width */
     .summary-modal-content,
     .option-modal .modal-content {
          max-width: 95%;
     }

     .footer-content-wrapper {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: flex-start; /* Align items to the start */
        text-align: left; /* Ensure text is left-aligned */
    }

    .footer-logo-area,
    .footer-links-group,
    .footer-disclaimer-area {
        min-width: 100%; /* Take full width */
        margin-bottom: 25px;
        text-align: left;
    }
    .footer-logo-area {
        text-align: center; /* Center logo on mobile if preferred */
    }
     .footer-logo {
        margin-left: auto; /* For centering if text-align center on parent */
        margin-right: auto; /* For centering */
    }

} /* End of @media block */