/* slider logo and button css */

/* Mobile Logo Media Queries */
.mobile-logo img {
    height: 150px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 1200px) {
    .mobile-logo img {
        height: 130px;
    }
}

@media (max-width: 992px) {
    .mobile-logo img {
        height: 110px;
    }
}

@media (max-width: 768px) {
    .mobile-logo img {
        height: 90px;
    }
}

@media (max-width: 576px) {
    .mobile-logo img {
        height: 155px !important;
    }
}

@media (max-width: 480px) {
    .mobile-logo img {
        height: 150px !important;
    }
}

@media (max-width: 375px) {
    .mobile-logo img {
        height: 120px !important;
    }
}

.th-btn.style42 {
    /* Typography */
    /* font-family: var(--body-font, "Alegreya", serif); */
    font-size: 38px;
    font-weight: 700;
    text-transform: capitalize;

    /* Coloring & Border */
    color: var(--white-color, #ffffff);
    background-color: transparent;
    border: 3px solid #ffcd05;
    border-radius: 50px;

    /* Spacing */
    padding: 8px 40px;
    display: inline-block;

    /* Animation */
    transition: none;
    box-shadow: none;

    /* Image dimensions */
    height: auto;
    width: auto;
    max-width: 100%;
}

/* Ensure the wrapper element that provides the background color covers the button */
.btn-wrap {
    padding: 30px 0;
}

/* Media Queries */
@media (max-width: 1200px) {
    .th-btn.style42 {
        font-size: 32px;
        padding: 7px 35px;
    }

    .btn-wrap {
        padding: 25px 0;
    }
}

@media (max-width: 992px) {
    .th-btn.style42 {
        font-size: 28px;
        padding: 6px 30px;
        border: 2.5px solid #ffcd05;
    }

    .btn-wrap {
        padding: 20px 0;
    }
}

@media (max-width: 768px) {
    .th-btn.style42 {
        font-size: 24px;
        padding: 5px 25px;
        border: 2px solid #ffcd05;
    }

    .btn-wrap {
        padding: 15px 0;
    }
}

@media (max-width: 576px) {
    .th-btn.style42 {
        font-size: 20px;
        padding: 4px 20px;
        border: 1.5px solid #ffcd05;
        border-radius: 40px;
    }

    .btn-wrap {
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .th-btn.style42 {
        font-size: 25px;
        padding: 3px 15px;
    }

    .btn-wrap {
        padding: 8px 0;
    }
}




/* Custom CSS for the Technical Specification Modal (Pop-up) */

/* ------------------------------------------- */
/* 1. MODAL OVERLAY AND STRUCTURE */
/* ------------------------------------------- */

/* Modal Backdrop - Ensure proper z-index */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Modal Container - Highest z-index */
#specRequestModal.modal {
    z-index: 1050 !important;
}

/* Modal Dialog - Center positioning with proper z-index */
#specRequestModal .modal-dialog {
    z-index: 1055 !important;
    position: relative;
}

/* Modal Content Box (The White/Light Box Itself) */
#specRequestModal .modal-content {
    background-color: var(--white-color, #ffffff);
    /* Ensure it's clearly white */
    border: none;
    border-radius: 10px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    /* Stronger, clearer shadow */
    overflow: hidden;
    z-index: 1060 !important;
    position: relative;
}

/* Modal Header Styling (VioletChem Dark Theme) */
#specRequestModal .modal-header {
    background-color: var(--color-navy, #08103E);
    /* Your primary dark violet color */
    color: var(--white-color, #ffffff);
    padding: 25px 30px;
    /* More generous padding */
    border-bottom: 2px solid var(--color-highlight, #FF6B35);
    /* Subtle highlight border */
    position: relative;
    /* For the close button positioning */
    z-index: 1065 !important;
}

#specRequestModal .modal-title {
    /* font-family: var(--font-heading, 'Manrope', sans-serif); */
    font-size: 26px;
    /* Slightly larger title */
    font-weight: 700;
    margin: 0;
    /* Remove default margin */
}

/* Close Button Styling */
#specRequestModal .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
    width: 1.5em;
    /* Make it more prominent */
    height: 1.5em;
    /* Make it more prominent */
    position: absolute;
    /* Position relative to modal-header */
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    /* Remove any default button border */
    z-index: 1070 !important; /* Highest for close button */
}

/* Modal Body Styling */
#specRequestModal .modal-body {
    padding: 30px;
    /* Keep padding consistent */
    text-align: left;
    /* Ensure text alignment is natural for forms */
    color: var(--body-color, #555555);
    /* General body text color */
    font-family: var(--body-font, 'IBM Plex Sans', sans-serif);
    position: relative;
    z-index: 1060 !important;
}

#specRequestModal .modal-body p {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.6;
}

/* ------------------------------------------- */
/* 2. FORM ELEMENTS STYLING */
/* ------------------------------------------- */

#techSpecForm .form-label {
    /* font-family: var(--body-font, 'IBM Plex Sans', sans-serif); */
    font-weight: 600;
    color: var(--title-color, #333333);
    /* Darker label for contrast */
    margin-bottom: 8px;
    /* More space below label */
    display: block;
    /* Ensure label takes full width */
    font-size: 15px;
}

#techSpecForm .form-control {
    border-radius: 8px;
    /* Slightly more rounded */
    border: 1px solid var(--th-border-color2, #E0E0E0);
    /* Lighter border for input fields */
    padding: 12px 18px;
    /* More padding inside input fields */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    /* Ensure full width */
    font-size: 16px;
    color: var(--body-color, #333333);
    background-color: var(--smoke-color2, #F8F9FA);
    /* Light background for inputs */
}

#techSpecForm .form-control::placeholder {
    color: var(--text-light-color, #888888);
    opacity: 1;
}

#techSpecForm .form-control:focus {
    border-color: var(--color-highlight, #FF6B35);
    /* Focus highlight color */
    box-shadow: 0 0 0 0.2rem rgba(var(--color-highlight-rgb, 255, 107, 53), 0.2);
    /* Softer glow */
    background-color: var(--white-color, #ffffff);
    /* White background on focus */
}

/* ------------------------------------------- */
/* 3. SUBMISSION BUTTON STYLING (The "Submit & View Specs" button) */
/* ------------------------------------------- */

/* This targets the button specifically inside the modal form using the new class */
#techSpecForm button.th-btn-modal-submit {
    /* Base Styles */
    background-color: var(--theme-color, #FF6600);
    /* Your theme orange */
    border: 2px solid var(--theme-color, #FF6600);
    color: var(--white-color, #ffffff);
    font-family: var(--font-heading, 'Manrope', sans-serif);
    font-size: 18px;
    /* Slightly larger text for the button */
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 25px;
    /* More padding for a substantial button */
    border-radius: 8px;
    /* Matches input field rounding */
    cursor: pointer;
    margin-top: 25px;
    /* More space above the button */
    display: block;
    /* Ensures w-100 works */
    width: 100%;
    /* Ensures it takes full width */

    /* Hover Effect */
    transition: all 0.3s ease;
}

#techSpecForm button.th-btn-modal-submit:hover {
    background-color: transparent;
    color: var(--theme-color, #FF6B35);
    transform: translateY(-2px);
    /* A bit more pronounced lift */
    box-shadow: 0 5px 15px rgba(var(--theme-color-rgb, 255, 102, 0), 0.4);
    /* Clearer glow */
}

/* Optional: Focus state for accessibility */
#techSpecForm button.th-btn-modal-submit:focus {
    outline: none;
    box-shadow: 0 0 0 5px rgba(var(--theme-color-rgb, 255, 102, 0), 0.5);
}

/* Optional: Styling for the disabled button state after submission */
.product-spec-btn:disabled {
    background-color: var(--theme-color3, #209E2E) !important;
    /* Green for success */
    border-color: var(--theme-color3, #209E2E) !important;
    cursor: not-allowed;
    opacity: 0.8;
}


.submit-spec-btn {
    /* Override full width set by w-100 or default .th-btn if necessary */
    width: auto;

    /* Standard padding for a medium/small button */
    padding: 10px 25px;

    /* Ensure border radius is set for a clean, corporate shape */
    border-radius: 5px;

    /* Center the button if it's within a wider container */
    display: inline-block;

    /* Add a small margin top here, rather than inline HTML */
    margin-top: 15px;

    /* Transition for the hover effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;

    /* Optional: Ensure font size is appropriate for a small button */
    font-size: 16px;
    font-weight: 600;
}

/* Add a corporate hover effect */
.submit-spec-btn:hover {
    /* Slightly darken the theme color on hover */
    background-color: #6a3e80;
    /* A darker shade of #834f99 (var(--theme-color)) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------- */
/* 4. Z-INDEX HIERARCHY FOR MODAL */
/* ------------------------------------------- */

/* Ensure modal appears above all other content */
#specRequestModal.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

#specRequestModal .modal-dialog {
    z-index: 1055 !important;
}

#specRequestModal .modal-content {
    z-index: 1060 !important;
}

#specRequestModal .modal-header {
    z-index: 1065 !important;
}

#specRequestModal .btn-close {
    z-index: 1070 !important;
}

#specRequestModal .modal-body {
    z-index: 1060 !important;
}

/* ------------------------------------------- */
/* 5. RESPONSIVE MEDIA QUERIES */
/* ------------------------------------------- */

/* Large Devices (Desktops, 1200px and up) */
@media (min-width: 1200px) {
    #specRequestModal .modal-dialog {
        max-width: 600px;
    }
}

/* Medium Devices (Tablets, 992px - 1199px) */
@media (max-width: 1199.98px) {
    #specRequestModal .modal-dialog {
        max-width: 550px;
        margin: 1.75rem auto;
    }
}

/* Small Devices (Landscape Tablets, 768px - 991px) */
@media (max-width: 991.98px) {
    #specRequestModal .modal-dialog {
        max-width: 500px;
        margin: 1.5rem auto;
    }
    
    #specRequestModal .modal-header {
        padding: 20px 25px;
    }
    
    #specRequestModal .modal-title {
        font-size: 24px;
    }
    
    #specRequestModal .modal-body {
        padding: 25px;
    }
    
    #techSpecForm button.th-btn-modal-submit {
        font-size: 17px;
        padding: 13px 22px;
    }
}

/* Extra Small Devices (Portrait Tablets and Large Phones, 576px - 767px) */
@media (max-width: 767.98px) {
    #specRequestModal .modal-dialog {
        max-width: 450px;
        margin: 1rem auto;
    }
    
    #specRequestModal .modal-header {
        padding: 18px 20px;
    }
    
    #specRequestModal .modal-title {
        font-size: 22px;
    }
    
    #specRequestModal .modal-body {
        padding: 20px;
    }
    
    #specRequestModal .modal-body p {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    #techSpecForm .form-label {
        font-size: 14px;
    }
    
    #techSpecForm .form-control {
        padding: 11px 16px;
        font-size: 15px;
    }
    
    #techSpecForm button.th-btn-modal-submit {
        font-size: 16px;
        padding: 12px 20px;
        margin-top: 20px;
    }
    
    .submit-spec-btn {
        padding: 9px 20px;
        font-size: 15px;
        margin-top: 12px;
    }
}

/* Mobile Devices (Phones, 575px and down) */
@media (max-width: 575.98px) {
    #specRequestModal .modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }
    
    #specRequestModal .modal-header {
        padding: 15px 18px;
    }
    
    #specRequestModal .modal-title {
        font-size: 20px;
        padding-right: 30px; /* Ensure space for close button */
    }
    
    #specRequestModal .btn-close {
        width: 1.2em;
        height: 1.2em;
        right: 15px;
    }
    
    #specRequestModal .modal-body {
        padding: 18px;
    }
    
    #specRequestModal .modal-body p {
        font-size: 14px;
        margin-bottom: 18px;
        line-height: 1.5;
    }
    
    #techSpecForm .form-label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    #techSpecForm .form-control {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 6px;
    }
    
    #techSpecForm button.th-btn-modal-submit {
        font-size: 15px;
        padding: 11px 18px;
        margin-top: 18px;
        border-radius: 6px;
    }
    
    .submit-spec-btn {
        padding: 8px 18px;
        font-size: 14px;
        margin-top: 10px;
        border-radius: 4px;
    }
}

/* Extra Small Mobile Devices (320px - 375px) */
@media (max-width: 375px) {
    #specRequestModal .modal-header {
        padding: 12px 15px;
    }
    
    #specRequestModal .modal-title {
        font-size: 18px;
    }
    
    #specRequestModal .modal-body {
        padding: 15px;
    }
    
    #specRequestModal .modal-body p {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    #techSpecForm .form-control {
        padding: 9px 12px;
        font-size: 13px;
    }
    
    #techSpecForm button.th-btn-modal-submit {
        font-size: 14px;
        padding: 10px 16px;
        margin-top: 15px;
    }
    
    .submit-spec-btn {
        padding: 7px 16px;
        font-size: 13px;
    }
}

/* Orientation Specific Styles */
@media (max-width: 767.98px) and (orientation: landscape) {
    #specRequestModal .modal-dialog {
        max-width: 90%;
        max-height: 85vh;
    }
    
    #specRequestModal .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #specRequestModal .modal-content {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    }
}

/* Print Styles */
@media print {
    #specRequestModal .modal-content {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    #specRequestModal .btn-close {
        display: none;
    }
}

/* Ensure modal appears above fixed/sticky headers and other high-z-index elements */
#specRequestModal.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

#specRequestModal .modal-dialog {
    z-index: 10000 !important;
}

#specRequestModal .modal-content {
    z-index: 10001 !important;
}

#specRequestModal .modal-header {
    z-index: 10002 !important;
}

#specRequestModal .btn-close {
    z-index: 10003 !important; /* Highest priority for close button */
}




/* --- Tabs Styling (For Spacing and Appearance) --- */
.product-tabs-wrapper {
    margin: 0 auto;
    max-width: 900px;
}

.product-tabs .nav-link {
    font-family: var(--title-font);
    color: var(--title-color);
    background-color: var(--smoke-color2);
    border: 1px solid var(--th-border-color2);
    padding: 10px 20px;
    font-weight: 700;
    transition: all 0.3s ease;
    border-radius: 5px;
    margin: 0 8px;
    /* Spacing between categories on desktop */
}

.product-tabs .nav-link:hover {
    color: var(--white-color);
    background-color: var(--gray-color);
}

.product-tabs .nav-link.active {
    color: var(--white-color);
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

@media (max-width: 767px) {
    .product-tabs {
        flex-direction: column;
    }

    .product-tabs .nav-item {
        width: 100%;
        margin-bottom: 8px;
    }

    .product-tabs .nav-link {
        width: 100%;
        text-align: center;
        margin: 0;
    }
}



/* --- Table Styling (Desktop/Tablet View) --- */
.product-title {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: 48px;
    text-align: left;
    margin-bottom: 20px;
    display: inline-block;
    font-weight: 700 !important;
}

.responsive-table-container {
    overflow-x: auto;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.tech-spec-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    margin: 0 auto;
    background-color: var(--white-color);
    font-family: var(--body-font);
    border-radius: 8px;
    overflow: hidden;
}

.tech-spec-table th {
    background-color: var(--theme-color);
    color: var(--white-color);
    padding: 15px 20px;
    text-align: left;
    font-family: var(--title-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: none;
}

.tech-spec-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--th-border-color2);
    color: var(--body-color);
    white-space: nowrap;
    border: none;
}

.tech-spec-table td:first-child {
    font-weight: 600;
    color: var(--title-color);
    background-color: var(--smoke-color2);
    width: 40%;
}

.tech-spec-table tbody tr:nth-child(even) {
    background-color: var(--smoke-color3);
}

.tech-spec-table tbody tr:last-child td {
    border-bottom: none;
}

/* ------------------------------------------------------------------- */
/* --- FULLY RESPONSIVE MEDIA QUERIES FOR ALL DEVICES --- */
/* ------------------------------------------------------------------- */

/* Large Desktops (1200px and above) */
@media (min-width: 1200px) {
    .tech-spec-table {
        min-width: 800px;
    }
    
    .tech-spec-table th,
    .tech-spec-table td {
        padding: 18px 25px;
        font-size: 16px;
    }
}

/* Medium Desktops (992px - 1199px) */
@media (max-width: 1199.98px) {
    .tech-spec-table {
        min-width: 750px;
    }
    
    .tech-spec-table th,
    .tech-spec-table td {
        padding: 16px 22px;
        font-size: 15px;
    }
}

/* Small Desktops and Tablets (768px - 991px) */
@media (max-width: 991.98px) {
    .tech-spec-table {
        min-width: 700px;
    }
    
    .tech-spec-table th,
    .tech-spec-table td {
        padding: 14px 18px;
        font-size: 14px;
    }
    
    .product-title {
        font-size: 42px;
    }
}

/* Landscape Tablets and Small Devices (600px - 767px) */
@media (max-width: 767.98px) {
    .tech-spec-table {
        min-width: 650px;
    }
    
    .tech-spec-table th,
    .tech-spec-table td {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .product-title {
        font-size: 38px;
        margin-bottom: 15px;
    }
}

/* Mobile Devices - Card Layout (Below 600px) */
@media (max-width: 600px) {
    /* Remove horizontal scrolling on mobile */
    .responsive-table-container {
        overflow-x: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Set table elements to display as full-width blocks */
    .tech-spec-table,
    .tech-spec-table tbody,
    .tech-spec-table tr,
    .tech-spec-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Hide the desktop header */
    .tech-spec-table thead {
        display: none;
    }

    /* Style the row as a mobile "card" */
    .tech-spec-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--th-border-color2);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        background-color: var(--white-color);
        padding: 0;
    }

    /* Remove table borders and backgrounds for mobile */
    .tech-spec-table td {
        position: relative;
        text-align: left;
        white-space: normal;
        border-bottom: none;
        width: 100% !important;
        background-color: transparent !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Property name styling for mobile */
    .tech-spec-table td:first-child {
        background-color: var(--smoke-color2) !important;
        color: var(--title-color);
        font-weight: 700;
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--th-border-color2);
        font-size: 15px;
        width: 100%;
    }

    /* Property value styling for mobile */
    .tech-spec-table td:last-child {
        color: var(--body-color);
        text-align: left;
        padding: 14px 16px !important;
        background-color: var(--white-color) !important;
        font-size: 14px;
        line-height: 1.5;
        width: 100%;
    }

    /* Alternate row styling for mobile */
    .tech-spec-table tbody tr:nth-child(even) {
        background-color: var(--smoke-color3);
    }
    
    .tech-spec-table tbody tr:nth-child(even) td:first-child {
        background-color: var(--smoke-color) !important;
    }
    
    .product-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
    }
}

/* Small Mobile Devices (480px - 599px) */
@media (max-width: 599.98px) {
    .tech-spec-table td:first-child,
    .tech-spec-table td:last-child {
        padding: 12px 14px !important;
        font-size: 14px;
    }
    
    .tech-spec-table tr {
        margin-bottom: 14px;
        border-radius: 6px;
    }
    
    .product-title {
        font-size: 28px;
        margin-bottom: 18px;
    }
}

/* Extra Small Mobile Devices (Below 480px) */
@media (max-width: 479.98px) {
    .tech-spec-table td:first-child,
    .tech-spec-table td:last-child {
        padding: 10px 12px !important;
        font-size: 13px;
    }
    
    .tech-spec-table tr {
        margin-bottom: 12px;
        border-radius: 5px;
    }
    
    .product-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
}

/* Very Small Mobile Devices (Below 360px) */
@media (max-width: 359.98px) {
    .tech-spec-table td:first-child,
    .tech-spec-table td:last-child {
        padding: 8px 10px !important;
        font-size: 12px;
    }
    
    .tech-spec-table tr {
        margin-bottom: 10px;
        border-radius: 4px;
    }
    
    .product-title {
        font-size: 22px;
        margin-bottom: 14px;
    }
}

/* Landscape Orientation for Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .tech-spec-table td:first-child,
    .tech-spec-table td:last-child {
        padding: 10px 12px !important;
        font-size: 13px;
    }
    
    .tech-spec-table tr {
        margin-bottom: 12px;
    }
    
    .responsive-table-container {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* High DPI/Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tech-spec-table {
        border: 0.5px solid var(--th-border-color2);
    }
}

/* Print Styles */
@media print {
    .tech-spec-table {
        min-width: 100%;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .tech-spec-table th {
        background-color: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .tech-spec-table td:first-child {
        background-color: #f8f8f8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .responsive-table-container {
        overflow-x: visible;
        box-shadow: none;
    }
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .responsive-table-container {
        scroll-behavior: auto;
    }
}

/* product inttro section css */
.key-features {
    background: var(--smoke-color3);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--theme-color);
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--title-color);
}

.feature-item:last-child {
    margin-bottom: 0;
}

.feature-item i {
    font-size: 16px;
}



/* --- Founder Message Section Styles (New Layout & Improved Visibility) --- */

/* Ensure the theme color variable is set for this section or globally */
.founder-message-section.theme-color2 {
    --theme-color: #834f99;
}

.founder-message-section {
    background-color: var(--white-color);
    /* Section background is white */
    padding: var(--section-space) 0;
    font-family: var(--body-font);
    color: var(--body-color);
    /* General page text color (for outside the card if any) */
}

.message-container {
    max-width: var(--main-container);
    margin: 0 auto;
    padding: 0 var(--container-gutters);
}

.message-heading {
    color: var(--title-dark);
    /* Ensure heading is dark on white background */
    font-family: var(--title-font);
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--section-title-space);
}

.founder-statement-card {
    background-color: var(--theme-color);
    /* The primary background of the card is the theme color */
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.card-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* ALL text inside this card will now default to white for maximum visibility */
    color: var(--white-color);
}

.founder-text-content {
    flex: 1;
    padding: 40px;
    position: relative;
    z-index: 2;
    max-width: 65%;
    color: var(--white-color);
    justify-content: center;
    align-items: center;
    /* Explicitly set text color to white here */
}

.founder-text-content p {
    font-size: 21px;
    line-height: 1.7;
    margin-bottom: 1em;
    color: var(--white-color);
    text-align: justify;
    /* Ensure paragraph text is white and justified */
}

/* Large overlapping quote marks */
.quote-mark-top,
.quote-mark-bottom {
    font-family: var(--body-font);
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.2);
    /* Slightly less transparent for subtle visibility */
    position: absolute;
    line-height: 1;
    z-index: 1;
    font-weight: bold;
}

.quote-mark-top {
    top: -30px;
    left: -20px;
}

.quote-mark-bottom {
    bottom: -30px;
    right: -20px;
}

.founder-signature-bottom {
    margin-top: 30px;
    font-family: var(--title-font);
}

.founder-signature-bottom .name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--white-color);
    /* Ensure name is clearly white */
    margin-bottom: 5px;
}

.founder-signature-bottom .title,
.founder-signature-bottom .company {
    font-size: 1rem;
    color: var(--smoke-color3);
    /* A very light off-white for subtle contrast, like #FFF5EB */
    margin: 0;
}

/* Founder Image Wrapper */
.founder-image-wrapper {
    flex-shrink: 0;
    width: 35%;
    text-align: center;
    position: relative;
    padding: 20px 0;
}

.founder-profile-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    /* Removed box-shadow from image */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .card-inner {
        flex-direction: column;
        text-align: center;
    }

    .founder-text-content {
        max-width: 100%;
        padding: 30px;
        order: 2;
    }

    .founder-image-wrapper {
        width: 60%;
        order: 1;
        padding: 30px 0 0 0;
    }

    .founder-profile-image {
        max-width: 250px;
        margin: 0 auto;
    }

    .quote-mark-top {
        top: 10px;
        left: 10px;
        font-size: 8rem;
    }

    .quote-mark-bottom {
        bottom: 10px;
        right: 10px;
        font-size: 8rem;
    }
}

@media (max-width: 768px) {
    .message-heading {
        font-size: 2.5rem;
    }

    .founder-text-content p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .founder-image-wrapper {
        width: 80%;
    }

    .founder-profile-image {
        max-width: 200px;
    }

    .founder-text-content {
        padding: 20px;
    }

    .quote-mark-top,
    .quote-mark-bottom {
        font-size: 6rem;
    }
}

/* Base Team Section Styles */
.team-section {
    position: relative;
    padding-top: 50px;
    /* Use your saved variable for top padding */
    padding-bottom: var(--section-space);
    /* Use your saved variable for bottom padding */
    overflow: hidden;
}

/* Team Member Card (The white box) */
.team-member-card {
    background-color: var(--white-color, #ffffff);
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    /* Adding a light shadow for a premium feel */
    box-shadow: 0 5px 20px rgba(var(--color-navy, 0, 16, 62), 0.1);
    margin-bottom: 30px;
}

/* Member Image Area (The circle) */
.member-image {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    margin: 40px auto 0;
    z-index: 2;
    border: 5px solid var(--white-color);
    /* Small white border around the circle */
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}

/* SVG Curve Shape (The unique yellow/orange element) */
.member-bg-shape {
    position: absolute;
    bottom: -15px;
    /* Adjust vertical position of the curve */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* Member Info (Name and Title) */
.member-info {
    position: relative;
    padding: 30px 20px 30px;
    z-index: 3;
}

.member-info h3 {
    /* Using your saved Title Font for the name */
    font-family: var(--title-font);
    font-size: 26px;
    font-weight: 700;
    color: var(--title-color, #0C0A0A);
    margin-bottom: 5px;
}

.member-info p {
    /* Using your saved Body Font for the role */
    font-family: var(--body-font);
    font-size: 18px;
    /* Using the main dark color from your setup for the role */
    /* color: var(--color-navy, #08103E);  */
    font-weight: 500;
    margin-bottom: 0;
}

/* Media Query for smaller screens */
@media (max-width: 767px) {
    .member-image {
        width: 160px;
        height: 160px;
    }

    .member-info h3 {
        font-size: 22px;
    }

    .member-info p {
        font-size: 16px;
    }
}

/* --- Floating Button Creative CSS (Left Side - Options Stacked Upwards) --- */
.th-contact-float-creative {
    position: fixed;
    bottom: 30px;
    /* Distance from the bottom of the viewport */
    left: 25px;
    /* Positioned on the left side */
    z-index: 1050;
    display: flex;
    /* *** KEY CHANGE: Stacks items bottom-up (options will appear above the button) *** */
    flex-direction: column-reverse;
    align-items: flex-start;
    /* Aligns all items (button and options) to the left */
}

/* Main Floating Button (Corporate Navy) */
.th-float-main-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--color-highlight, #ffcd05);
    /* Highlight border */
    cursor: pointer;
    font-size: 24px;
    color: var(--white-color, #ffffff);
    background-color: var(--color-navy, #834f99);
    /* Main corporate color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* Animation when button is active (options are visible) */
.th-float-main-btn.active {
    transform: rotate(360deg);
    background-color: var(--color-highlight, #ffcd05);
    border-color: var(--color-navy, #08103E);
}

/* Options Menu Container */
.th-float-options {
    display: none;
    /* Remove the margin-bottom as the buttons are now stacked in reverse order */
    padding-bottom: 5px;
}

/* Individual Option Button - Sleek Pill Shape */
.th-float-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    /* Space between buttons */
    padding: 10px 18px;
    border-radius: 30px;
    /* Pill shape */
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Initial state for slide-up animation */
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

/* Options when visible (for slide-up animation) */
.th-float-options.visible .th-float-option {
    transform: translateY(0);
    opacity: 1;
}

/* Add a slight delay for staggered animation */
.th-float-options.visible .th-float-option:nth-child(1) {
    transition-delay: 0.1s;
}

.th-float-options.visible .th-float-option:nth-child(2) {
    transition-delay: 0.2s;
}


.th-float-option i {
    font-size: 20px;
    margin-right: 10px;
}

.th-float-option span {
    color: var(--white-color, #ffffff);
}

/* WhatsApp Styling */
.whatsapp-btn {
    background-color: var(--success-color, #27AE60);
}

.whatsapp-btn:hover {
    background-color: #2ECC71;
}

/* Email Styling (Using corporate colors) */
.email-btn {
    background-color: var(--color-navy, #08103E);
}

.email-btn:hover {
    background-color: var(--color-subheading, #4B4B8C);
}


/* Styling for the icon wrapper to ensure consistent alignment/size */
.why-card4 .box-icon {
    /* Define a fixed area for the large icon to prevent layout shifts */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    /* Space between icon and title */
    /* Optional: Add a background or ring effect for extra emphasis */
    background-color: var(--theme-color, #834f99);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Targeting the actual Font Awesome icon for size and color */
.why-card4 .box-icon i {
    /* Increase icon size significantly (adjust 2.5rem as needed) */
    font-size: 2.5rem;
    /* Set icon color to white for contrast against the theme color background */
    color: var(--white-color, #ffffff);
    /* Optional: Ensure the transition is smooth if you add hover effects */
    transition: all 0.3s ease;
}

/* Optional: Add a subtle hover effect */
.why-card4:hover .box-icon {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}