/* ******************** THE HOME PAGE / BRAND CAROUSEL CSS *************************** */

/* 1. CONTAINER & PADDING LOGIC */
/* DESKTOP (992px+): Keep 5% padding */
@media screen and (min-width: 992px) {
    .brand-filmstrip {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

/* MOBILE & TABLET (Below 992px): 
   - Remove padding for edge-to-edge look 
   - Hide the overflow because we are about to stretch the container */
@media screen and (max-width: 991px) {
    .brand-filmstrip {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important; /* Critical: Hides the part of the stage we stretch off-screen */
    }
}

/* 2. ITEM VISUALS (The Card Look) */
/* We DO NOT touch 'width' here. We let Zoho's inline styles handle the width! */
.brand-filmstrip .zpfilmstrip-item {
    padding: 10px 5px !important; 
    margin: 0 !important; 
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* IMPORTANT: Remove any width !important rules from here */
}

/* Inner Card Styling */
.brand-filmstrip .zpfilmstrip-item figure {
    background: #ffffff;
    box-shadow: inset 0 0 0 2px #e74c3c !important; /* Red Border */
    border-radius: 6px !important;
    padding: 15px !important; 
    box-sizing: border-box !important;
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-filmstrip .zpfilmstrip-item:hover figure {
    transform: translateY(-6px);
    box-shadow: inset 0 0 0 2px #e74c3c, 0 12px 25px rgba(0,0,0,0.18) !important;
}
.brand-filmstrip .zpfilmstrip-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* TABLET & MOBILE OVERRIDES (Max-width 991px) */
@media screen and (max-width: 991px) {

    /* 1. RESET THE CONTAINER (Disable JS, Enable Swipe) */
    .brand-filmstrip .zpfilmstrip-inner {
        width: 100% !important;        
        transform: none !important;    /* Stop JS interference */
        display: flex !important;      
        flex-wrap: nowrap !important;  /* Keep them in one long line */
        overflow-x: auto !important;   /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap effect */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px !important; 
        
        /* Hide Scrollbars */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    /* Hide scrollbar for Chrome/Safari */
    .brand-filmstrip .zpfilmstrip-inner::-webkit-scrollbar {
        display: none;
    }

    /* 2. TABLET SIZING (Target: 4 Items) */
    /* Applies to screens between 768px and 991px */
    @media (min-width: 768px) {
        .brand-filmstrip .zpfilmstrip-item {
            min-width: 25% !important; /* 100% / 4 = 25% */
            width: 25% !important;
            scroll-snap-align: start;
        }
    }

    /* 3. MOBILE SIZING (Target: 3 Items) */
    /* Applies to screens 767px and below */
    @media (max-width: 767px) {
        .brand-filmstrip .zpfilmstrip-item {
            min-width: 33.33% !important; /* 100% / 3 = 33.33% */
            width: 33.33% !important;
            scroll-snap-align: start;
        }
    }
}

/* ******************** THE HOME PAGE / TESTIMONIAL CSS *************************** */
/* Hide thumbnail strip */
.testimonial-gallery .hb-lightbox__thumbs-cont {
  display: none !important;
}

/* Remove background from arrow buttons */
.testimonial-gallery .hb-lightbox__arrow-nav {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Make the SVG icon white */
.testimonial-gallery .hb-lightbox__arrow-nav svg,
.testimonial-gallery .hb-lightbox__arrow-nav svg path,
.testimonial-gallery .hb-lightbox__arrow-nav .icon,
.testimonial-gallery .hb-lightbox__arrow-nav use {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Remove hover effect - keep it the same */
.testimonial-gallery .hb-lightbox__arrow-nav:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ======================================================= */
/* TESTIMONIAL CAROUSEL FIX (TABLET & MOBILE ONLY)        */
/* Limits these changes to screens smaller than 992px      */
/* ======================================================= */

@media screen and (max-width: 991px) {

    /* 1. VISIBILITY FIX (Prevents disappearing act on mobile) */
    .testimonial-carousel .zpcarousel-content.zpcarousel-content-active {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .testimonial-carousel .zpcarousel-content:not(.zpcarousel-content-active) {
        display: none !important;
    }

    /* 2. THE NUCLEAR SPACING REMOVAL */
    /* Collapses height and padding ONLY on mobile/tablet */
    .testimonial-carousel .zpcarousel-container, 
    .testimonial-carousel .zpcarousel-content-container,
    .testimonial-carousel .zpcarousel-content,
    .testimonial-carousel .zpcarousel-content-inner,
    .testimonial-carousel .zprow, 
    .testimonial-carousel .zpelem-col {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important; /* Kill the 641px forced height */
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. ENSURE THE BOX HAS NO EXTERNAL MARGIN */
    .testimonial-carousel .zpelem-box {
        margin: 0 !important; 
    }

    /* 4. DOTS POSITIONING */
    /* Tucks the dots closer on mobile screens */
    .testimonial-carousel .zpcarousel-controller-container {
        margin-top: 10px !important;
        position: relative !important;
        z-index: 10;
    }
}

/* Testimonial card styling */
.testimonial-card {
  background: #ffffff;
  padding: 50px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* Speech bubble arrow pointing DOWN */
.testimonial-card::after {
  content: '';
  position: absolute;
  bottom: -20px; /* Position below the card */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Perfect centering */
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffffff; /* Creates downward point */
}

/* 1. Main container: Side-by-side (row) but centered horizontally */
.testimonial-author .zpimageheadingtext-container {
    display: flex !important;
    flex-direction: row !important; /* Image and text back to being side-by-side */
    align-items: center !important;  /* Vertical center between image and text */
    justify-content: center !important; /* Horizontal center under the bubble */
    gap: 15px; /* Space between the circular image and the text */
    width: 100% !important;
}

/* 2. Text Wrapper: Keeps the name and team stacked vertically */
.testimonial-author .zpimage-headingtext-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Keeps text left-aligned relative to itself */
    text-align: left !important;
}

/* 3. Image adjustment */
.testimonial-author figure.zpimage-data-ref {
    margin: 0 !important;
    line-height: 0 !important;
}

/* 4. Spacing between Heading and Subtext (your 2px request) */
.testimonial-author h3.zpimage-heading {
    margin: 0 0 10px 0 !important; /* 10px gap below the name */
    padding: 0 !important;
    line-height: 1.1 !important;
}

.testimonial-author .zpimage-text p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
}

/* =========================================================
   2. TABLET FIX (768px to 1024px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Wrapper to center everything */
    .testimonial-author {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 1. The Container: Centered with compact spacing */
    .testimonial-author .zpimageheadingtext-container {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        
        width: auto !important;
        padding: 0 !important;
        margin: 0 auto !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    
    /* 2. The Text Wrapper: Compact, no stretching */
    .testimonial-author .zpimage-headingtext-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    
    /* 3. The Image: Compact sizing with overflow fix */
    .testimonial-author figure.zpimage-data-ref {
        flex: 0 0 50px !important;
        margin: 0 !important;
        width: 50px !important;
        height: 50px !important;
        overflow: visible !important;
        line-height: 0 !important;
    }
    
    .testimonial-author figure.zpimage-data-ref a,
    .testimonial-author figure.zpimage-data-ref picture {
        display: block !important;
        width: 50px !important;
        height: 50px !important;
        overflow: visible !important;
    }
    
    .testimonial-author figure.zpimage-data-ref img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        min-width: 50px !important;
        margin: 0 !important;
        display: block !important;
        object-fit: cover !important;
    }
    
    /* 4. The Heading: One Line, Left Aligned */
    .testimonial-author h3.zpimage-heading {
        font-size: 14px !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: left !important;
        overflow: visible !important;
    }
    
    /* 5. The Sub-text: One Line, Left Aligned */
    .testimonial-author .zpimage-text p {
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: left !important;
        margin: 0 !important;
        overflow: visible !important;
    }
}

/* =========================================================
   3. MOBILE FIX (Max-width 767px)
   ========================================================= */
@media (max-width: 767px) {

    /* 1. RESET THE MAIN PARENT */
    /* This ensures the whole block is centered in the carousel */
    .testimonial-author {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding-top: 15px !important;
    }

    /* 2. THE FLEX CONTAINER (Image + Text Wrapper) */
    /* This is the critical part that forces side-by-side layout */
    .testimonial-author .zpimageheadingtext-container {
        display: flex !important;
        flex-direction: row !important; /* Forces Left/Right */
        flex-wrap: nowrap !important;   /* Forbids wrapping to new line */
        justify-content: center !important;
        align-items: center !important;
        
        width: auto !important;
        max-width: 90% !important; /* Prevents edge touching */
        margin: 0 auto !important;
        gap: 15px !important;      /* Space between Image and Text */
        
        /* Reset any old positioning hacks */
        position: static !important;
        transform: none !important;
        left: auto !important;
    }

    /* 3. THE IMAGE (Force it to stay small and behave) */
    .testimonial-author figure.zpimage-data-ref {
        flex: 0 0 50px !important; /* rigid width */
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;      /* Removes default browser margins */
        padding: 0 !important;
        display: block !important;
    }

    /* Ensure the img tag inside fills the circle */
    .testimonial-author figure.zpimage-data-ref img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* 4. THE TEXT WRAPPER (Name + Title) */
    .testimonial-author .zpimage-headingtext-container {
        display: flex !important;
        flex-direction: column !important; /* Stack Name on top of Title */
        align-items: flex-start !important; /* Left Align text */
        justify-content: center !important;
        text-align: left !important;
        
        width: auto !important; /* Allow it to shrink to fit text */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. TYPOGRAPHY (Name & Title sizes) */
    .testimonial-author h3.zpimage-heading {
        font-size: 15px !important;
        margin: 0 0 2px 0 !important;
        text-align: left !important;
        white-space: nowrap !important; /* Prevents name from breaking */
    }

    .testimonial-author .zpimage-text p {
        font-size: 13px !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
}

/* =================================================================
   SMART STACKING: Testimonial Row (Max-width 991px)
   Logic: Text Column = Top (Order 1)
          Gallery Column = Bottom (Order 2)
   ================================================================= */
@media (max-width: 991px) {
    
    /* 1. Enable Flexbox Stacking on the Row */
    .zprow.testimonial-row {
        display: flex !important;
        flex-direction: column !important; /* Stack items vertically */
    }

    /* 2. DEFAULT STATE: Force all columns to the TOP */
    /* This automatically catches the "Text/Carousel" column */
    .testimonial-row > .zpelem-col {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-bottom: 40px !important; /* Adds gap below the text before the image starts */
    }

    /* 3. THE DETECTOR: Find the column containing the MAIN GALLERY */
    /* We target .testimonial-gallery specifically so we don't accidentally 
       move the text column just because it has a small avatar image. */
    .testimonial-row > .zpelem-col:has(.testimonial-gallery) {
        order: 2 !important; /* Force to Bottom */
        padding-bottom: 0 !important; /* Remove extra padding at the very bottom */
        margin-top: 0 !important;
    }
}

/* =========================================================
   NEWSLETTER FORM - COMPLETE RESPONSIVE SOLUTION
   ========================================================= */

/* =========================================================
   1. BASE CONTAINER SETUP (All Devices)
   ========================================================= */
.newsforms .zpform-container,
.newsforms form {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Default Mobile Layout (Stacked) */
.newsforms form {
    flex-direction: column !important;
}

/* Force children to respect flexbox */
.newsforms form > * {
    flex-shrink: 0 !important;
}

/* =========================================================
   2. INPUT & BUTTON BASE STYLES
   ========================================================= */
.newsforms .zpnewsletter-email-input-field {
    height: 50px !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.newsforms button, 
.newsforms input[type="submit"],
.newsforms .zpbutton {
    height: 50px !important;
    box-sizing: border-box !important;
}

/* =========================================================
   3. MOBILE LAYOUT (Max-width: 767px)
   Layout: Vertical (Stacked) & Centered
   ========================================================= */
@media (max-width: 767px) {
    .newsforms form {
        flex-direction: column !important;
        padding: 0 20px !important;
    }
    
    .newsforms .zpnewsletter-email-input-field,
    .newsforms button, 
    .newsforms input[type="submit"],
    .newsforms .zpbutton {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

/* =========================================================
   4. TABLET LAYOUT (768px - 991px)
   Layout: Horizontal (Side-by-Side) - FORCED
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
    /* CRITICAL: Force horizontal layout */
    .newsforms .zpform-container {
        flex-direction: row !important;
    }
    
    .newsforms form {
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Prevent wrapping */
        padding: 0 30px !important;
    }
    
    /* Force all direct children to be in a row */
    .newsforms form > li,
    .newsforms form > div {
        display: inline-flex !important;
    }
    
    /* INPUT: Flexible width for tablet screens */
    .newsforms .zpnewsletter-email-input-field {
        width: 400px !important;
        min-width: 300px !important;
        max-width: 450px !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* BUTTON: Auto width to fit content */
    .newsforms button, 
    .newsforms input[type="submit"],
    .newsforms .zpbutton {
        width: auto !important;
        min-width: 120px !important;
        margin: 0 !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        display: block !important;
    }
}

/* =========================================================
   5. DESKTOP LAYOUT (Min-width: 992px)
   Layout: Horizontal with full 600px input width
   ========================================================= */
@media (min-width: 992px) {
    .newsforms .zpform-container {
        flex-direction: row !important;
    }
    
    .newsforms form {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    /* Force all direct children to be in a row */
    .newsforms form > li,
    .newsforms form > div {
        display: inline-flex !important;
    }
    
    /* INPUT: Full 600px width on desktop */
    .newsforms .zpnewsletter-email-input-field {
        width: 600px !important;
        min-width: 600px !important;
        max-width: 600px !important;
        flex: 0 0 600px !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* BUTTON: Auto width to fit content */
    .newsforms button, 
    .newsforms input[type="submit"],
    .newsforms .zpbutton {
        width: auto !important;
        min-width: 140px !important;
        margin: 0 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        display: block !important;
    }
}

/* =========================================================
   6. VISUAL STYLING & ANIMATIONS
   ========================================================= */

/* HOVER: Zoom In */
.newsforms .zpnewsletter-email-input-field:hover {
    transform: scale(1.05) !important;
    z-index: 10;
}

/* FOCUS: Maintain Zoom & Clean Look */
.newsforms .zpnewsletter-email-input-field:focus {
    transform: scale(1.05) !important;
    outline: none !important;
    border: 1px solid #333 !important;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15) !important;
}

/* Brand card - Option 1: Lift with enhanced shadow */
.brand-card {
  border: 2px solid #e0e0e0;
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.brand-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  border-color: #e74c3c;
}

/* View More Button Base Style */
.view-more-button {
    transition: all 0.3s ease;
}

/* View More Button Hover Effects */
.view-more-button:hover {
    transform: translateY(-2px); /* Lifts the button slightly */
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* =================================================================
   1. DESKTOP & TABLET (Min-width: 768px)
   Side-by-Side Layout
   ================================================================= */
@media (min-width: 768px) {
    .zprow.about-why {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .about-why > .zpelem-col {
        flex: 1 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .about-why .zpelement.zpelem-heading {
        width: 100% !important;
    }
}

/* =================================================================
   2. MOBILE (Max-width: 767px)
   Smart Stacking: Text Top, Image Bottom
   ================================================================= */
@media (max-width: 767px) {
    /* Enable Flexbox so we can reorder items */
    .zprow.about-why {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
    }

    /* DEFAULT: All columns want to be at the TOP (Order 1) */
    .about-why .zpelem-col {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* DETECTOR: If a column contains an Image ('img'), move it to BOTTOM (Order 2) */
    .about-why .zpelem-col:has(img) {
        order: 2 !important;
        margin-top: 30px !important; /* Add gap between text and image */
    }
}

/* ==========================================================================
   RESPONSIVE LOGO HEIGHTS (Corrected Selector)
   ========================================================================== */

/* 1. DESKTOP (992px+) -> 110px */
@media screen and (min-width: 992px) {
    .theme-branding-info img[data-zs-logo] {
        height: 110px !important;
        width: auto !important;
        max-width: none !important; /* Prevents squishing */
    }
}

/* 2. TABLET (768px - 991px) -> 80px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .theme-branding-info img[data-zs-logo] {
        height: 70px !important; 
        width: auto !important;
    }
}

/* 3. MOBILE (767px and below) -> 55px */
@media screen and (max-width: 767px) {
    .theme-branding-info img[data-zs-logo] {
        height: 60px !important; 
        width: auto !important;
    }
}

/* 4. Sticky Header Logic */
[data-headercontainer] {
    position: -webkit-sticky !important; /* For Safari */
    position: sticky !important;
    
    /* Pulls the header up to hide the Top Bar. 
       Adjust this negative number (-45px) if you still see part of the black bar. */
    top: -45px !important; 
    
    z-index: 9999 !important;
    width: 100% !important;
    background-color: #fff !important; /* Ensures background is solid */
}

/* 5. Reset Header Animations */
.theme-header {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* Custom back link styling */
.zc-custom-back {
  display: inline-block;
  padding: 12px 0 12px 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.zc-custom-back:hover {
  color: #E74C3C;
}

.zc-custom-back::before {
  content: "← ";
  margin-right: 4px;
}

/* Container for the back link right after header */
.zc-back-container {
  width: 100%;
  padding: 12px 0;
}

/* Hero Section */
.banner {
    position: relative !important;
    z-index: 1 !important;
}

/* Contact Section - Brings it to the front */
.contact-section {
    position: relative !important;
    z-index: 10 !important;
}

/* Contact Links */
.contact-links a {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-links a:hover {
    color: #e74c3c;
}

/* Hide Email Icon */
[contact-follow] .zpsocialprofile-email {
    display: none !important;
}

/* Remove left spacing - Pull Facebook icon to the left */
[contact-follow] .zpsocialprofile-facebook {
    margin-left: -3px !important;
}

/* Keep other social icons visible and styled */
[contact-follow] .zpsocialprofile-facebook,
[contact-follow] .zpsocialprofile-instagram,
[contact-follow] .zpsocialprofile-whatsapp {
    display: inline-block;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

/* Hover effect for visible icons */
[contact-follow] .zpsocialprofile-wrapper:hover {
    transform: translateY(-3px);
}


/* =================================================================
   Contact Form Design
   ================================================================= */

/* =========================================================
   SECTION 1: THE LAYOUT ENGINE - PROPERLY FIXED
   ========================================================= */

/* 1. Force Form Container to Full Width */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] form,
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-container,
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Grid Setup - Mobile First (Default 1 Column) */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer {
    display: grid !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 3. Fix List Items - Force them to fill grid cells */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 4. CRITICAL FIX: Force Field Containers to Full Width */
/* This overrides Zoho's inline width calculations */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-field-container,
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-label-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    float: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 5. Tablet & Desktop Layout (2 Columns) */
@media (min-width: 768px) {
    [data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Full Width Items: Subject(5), Message(6), Hidden(7), Button(8) */
    [data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer li:nth-child(5),
    [data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer li:nth-child(6),
    [data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer li:nth-child(7),
    [data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-outer li:nth-child(8) {
        grid-column: 1 / -1 !important;
    }
}

/* =========================================================
   SECTION 2: COSMETIC STYLING
   ========================================================= */

/* Labels */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] label {
    color: #333333 !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
    display: block !important;
    width: 100% !important;
}

/* Mandatory Asterisk */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-mandatory {
    color: #e74c3c !important;
    font-style: normal !important;
}

/* Input Fields - Force Full Width */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] input[type="text"],
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] input[type="email"],
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] input[type="password"],
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] select,
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    height: auto !important;
    display: block !important;
}

/* Focus State */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] input:focus,
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] select:focus,
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] textarea:focus {
    outline: none !important;
    border-color: #e74c3c !important;
}

/* Custom Select Arrow */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    height: 52px !important;
}

/* Textarea Height */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] textarea {
    min-height: 140px !important;
    resize: vertical;
}

/* Submit Button Container */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] .zpform-button {
    width: 100% !important;
}

/* Submit Button */
[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] #zsform_submit {
    background: #e74c3c !important;
    color: #ffffff !important;
    padding: 16px 50px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    text-transform: uppercase;
    width: 100% !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-top: 10px !important;
    -webkit-appearance: none;
    box-sizing: border-box !important;
}

[data-element-id="elm_RKkzipgKddJSoCe6Awa35A"] #zsform_submit:hover {
    background: #c0392b !important;
}

/* --- Instant Quote Button --- */
.quote-button { 
    /* Animation Speed */
    transition: all 0.3s;
}

/* --- Hover State --- */
.quote-button:hover {   
    /* slight zoom effect */
    transform: scale(1.05);
}

/* ==========================================================================
   DESKTOP ONLY: CUSTOMER PORTAL DROPDOWN STYLING
   (Ignored on Tablet & Mobile to preserve system defaults)
   ========================================================================== */

@media screen and (min-width: 992px) {

    /* --- Portal Icon Container --- */
    .theme-portal-login {
        position: relative;
        cursor: pointer;
        padding: 8px 12px;
        transition: all 0.3s ease;
    }

    /* --- Portal User Icon --- */
    .theme-portal-icon path {
        transition: stroke 0.3s ease;
    }

    .theme-portal-login:hover .theme-portal-icon path {
        stroke: #e74c3c !important;
    }

    /* --- Dropdown Container --- */
    .theme-portal-container-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 10px;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .theme-portal-login:hover .theme-portal-container-dropdown,
    .theme-portal-login:focus-within .theme-portal-container-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
    }

    /* --- Dropdown Content Box --- */
    .theme-portal-container {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        border: 1px solid #e0e0e0 !important;
    }

    /* --- FIXED: Sign In Button (Forces Red Background) --- */
    .theme-portal-content a[data-portal-signin] {
        background: #e74c3c !important; /* Forces Red over the brown default */
        color: #ffffff !important;
        border-radius: 6px !important;
        border: none !important; /* Removes default borders */
        display: block; 
        text-decoration: none;
        box-shadow: none; /* Clears any theme shadows */
        transition: all 0.3s ease;
    }

    .theme-portal-content a[data-portal-signin]:hover {
        background: #c0392b !important; /* Darker Red on Hover */
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
        color: #ffffff !important;
        border-left: none !important;
    }

    /* Sign Up Button - Secondary Style */
    .theme-portal-content a[data-portal-signup] {
        display: block;
        color: #e74c3c !important;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
    }

    .theme-portal-content a[data-portal-signup]:hover {
        background: #fff5f5 !important;
        border-left-color: #e74c3c;
    }

    /* --- Username Dropdown List --- */
    .theme-username-dropdown-list {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .theme-username-dropdown-list li a {
        display: block;
        color: #333333 !important;
        text-decoration: none;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
    }

    .theme-username-dropdown-list li a:hover {
        background: #f8f8f8 !important;
        color: #e74c3c !important;
        border-left-color: #e74c3c;
    }

    /* --- Sign Out Link --- */
    a[data-portal-logout] {
        color: #e74c3c !important;
        border-top: 1px solid #e0e0e0;
        padding-top: 15px !important;
    }

    a[data-portal-logout]:hover {
        background: #fff5f5 !important;
    }

} /* END DESKTOP ONLY MEDIA QUERY */


.footer-divider {
    /* 1. STRETCH THE LINE: */
    /* This scales the width by 20% to bridge the gaps. */
    /* If gaps remain, increase 1.2 to 1.3 or 1.4 */
    transform: scaleX(1.2) !important;

    /* 2. LOCK THE POSITION: */
    /* This ensures it stretches evenly from the center */
    transform-origin: center !important;

    /* 3. ENSURE FULL WIDTH: */
    width: 100% !important;
    max-width: none !important;
    
    /* 4. KEEP HORIZONTAL MARGINS CLEAN (Only Left/Right) */
    /* We do NOT touch margin-top or margin-bottom here. */
    margin-left: 0 !important;
    margin-right: 0 !important;
}