/* --- Global Reset for Footer --- */
.custom-footer-wrapper {
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
}
.custom-footer-wrapper ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.custom-footer-wrapper a {
    text-decoration: none !important;
    transition: 0.3s !important;
}

/* =========================
   ZONE 1 – CONTACT SECTION
   APPLIES TO ALL PAGES
========================= */

.footer-top-zone{
    background:#fff !important;
    padding:25px 0 !important;
    display:flex !important;
    justify-content:center !important;
}

.footer-split-layout{
    max-width:1200px !important;
    width:100% !important;
    display:flex !important;
    gap:24px !important;
}

/* LEFT IMAGE */
.footer-image-side{
    width:50% !important;
    height:auto !important;
    min-height:340px !important;
    border-radius:18px !important;
    background-size:cover !important;
    background-position:center !important;
    box-shadow:0 10px 30px rgba(0,0,0,.1) !important;
}

/* RIGHT BOX */
.footer-contact-side{
    width:50% !important;
    background:#fff !important;
    border:2px solid #0f8b68 !important;
    border-radius:18px !important;
    padding:20px 40px !important;
    display:flex !important;
    align-items:center !important;
    height:auto !important;
    min-height:340px !important;
}

/* Title */
.contact-box h2{
    font-size:28px !important;
    font-weight:700 !important;
    margin:0 0 8px !important;
    color: #111 !important;
}

/* Subtitle */
.contact-sub{
    font-size:14px !important;
    color:#555 !important;
    margin-bottom:26px !important;
    max-width:460px !important;
    line-height:1.4em !important;
}

/* Grid */
.contact-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:30px 50px !important;
    margin-bottom:26px !important;
}

/* CONTACT ITEM (ICON LEFT – TEXT STACKED VERTICALLY) */
.contact-item{
    display:flex !important;
    align-items:flex-start !important;
    gap:14px !important;
}

/* ICON WRAPPER - NO BACKGROUND */
.icon-wrap{
    width:40px !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
}

/* PNG ICON STYLES */
.icon-wrap img {
    width:40px !important;
    height:40px !important;
    object-fit:contain !important;
    display:block !important;
}

/* TEXT CONTAINER - STACKED VERTICAL LAYOUT */
.contact-item div:not(.icon-wrap) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

/* Target strong and span styling */
.contact-item strong {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.contact-item span {
    font-size: 14px !important;
    color: #777 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* Button */
.contact-btn{
    display:block !important;
    width:100% !important;
    background:#0f8b68 !important;
    color:#fff !important;
    padding:8px !important;
    border-radius:30px !important;
    text-align:center !important;
    font-size:15px !important;
    font-weight:600 !important;
    transition:.3s !important;
    border: none !important;
    text-decoration: none !important;
    margin-top: 10px !important;
}

.contact-btn:hover{
    background:#0b6f54 !important;
    color:#fff !important;
}

/* =========================
   ZONE 2 – EXACT 6 COLUMN FOOTER
   APPLIES TO ALL PAGES
========================= */

.custom-main-footer{
    background:#0f8b68 !important;
    padding:0px 0px 15px 0px !important;
    color:#fff !important;
}

/* 6 Column Grid */
.footer-6col-grid{
    max-width:1200px !important;
    width:95% !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap:40px !important;
}

/* Headings */
.footer-col h4{
    font-size:16px !important;
    font-weight:600 !important;
    margin-bottom:16px !important;
    color:#fff !important;
}

/* Links */
.footer-col ul li{
    margin-bottom:0px !important;
}
.footer-col ul li a{
    color:#e5f2ee !important;
    font-size:14px !important;
}
.footer-col ul li a:hover{
    color:#ffffff !important;
}

/* Newsletter */
.newsletter-col p{
    font-size:14px !important;
    color:#e5f2ee !important;
    margin-bottom:12px !important;
    line-height: 1.4em !important;
}

/* Newsletter Input - Center Placeholder */
.footer-newsletter input{
    width:100% !important;
    padding:5px 12px !important;
    border-radius:6px !important;
    border:none !important;
    margin-bottom:10px !important;
    text-align: center !important;
}

.footer-newsletter input::placeholder {
    text-align: center !important;
    opacity: 0.7 !important;
}

/* For Firefox */
.footer-newsletter input::-moz-placeholder {
    text-align: center !important;
    opacity: 0.7 !important;
}

/* For Internet Explorer */
.footer-newsletter input:-ms-input-placeholder {
    text-align: center !important;
    opacity: 0.7 !important;
}

/* For Edge */
.footer-newsletter input::-ms-input-placeholder {
    text-align: center !important;
    opacity: 0.7 !important;
}

.footer-newsletter button{
    width:100% !important;
    background:#ffffff !important;
    color:#0f8b68 !important;
    border:none !important;
    padding:5px !important;
    border-radius:6px !important;
    font-weight:600 !important;
    cursor: pointer !important;
    text-align: center !important;
}

.footer-newsletter button:hover {
    background: #f0f0f0 !important;
}

/* Follow Us */
.follow-col .social-icons{
    display:flex !important;
    gap:14px !important;
    margin-top:8px !important;
}
.follow-col .social-icons a{
    color:#fff !important;
    font-size:20px !important;
}
.follow-col .social-icons a:hover {
    opacity: 0.8 !important;
}

/* =========================
   ZONE 3 – TRUST & LEGAL STRIP
   APPLIES TO ALL PAGES
========================= */

.footer-bottom-strip{
    background:#0f8b68 !important;
    border-top:1px solid rgba(255,255,255,0.25) !important;
    padding:14px 0 !important;
    font-size:12px !important;
    color:#e6f4ef !important;
}

.footer-bottom-inner{
    max-width:1200px !important;
    width:95% !important;
    margin:0 auto !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:30px !important;
}

/* LEFT SIDE */
.footer-trust-left{
    display:flex !important;
    align-items:center !important;
    gap:30px !important;
    flex-wrap:wrap !important;
}

/* TRUST BADGES */
.trust-badges{
    display:flex !important;
    gap:22px !important;
    flex-wrap:wrap !important;
    align-items:center !important;
}

/* TRUST BADGE SVG ICON */
.trust-badges .badge-item img{
    height:50px !important;
    width:auto !important;
    display:block !important;
}

.badge-item{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    font-size:13px !important;
    color: #e6f4ef !important;
    max-width:180px !important;
}

/* Force two lines for badge text */
.badge-item span {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 140px !important;
}

/* Specific width constraints for each badge to force two lines */
.trust-badges .badge-item:first-child span {
    max-width: 120px !important;
}

.trust-badges .badge-item:nth-child(2) span {
    max-width: 160px !important;
}

/* EV Safe & Tested - Forced to 2 lines with SAME font size as others */
.trust-badges .badge-item:nth-child(3) {
    position: relative !important;
    padding-right: 22px !important;
}

.trust-badges .badge-item:nth-child(3) span {
    max-width: 110px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Vertical divider line BETWEEN EV Safe & Tested and Certification & Compliance */
.trust-badges .badge-item:nth-child(3)::after {
    content: '' !important;
    position: absolute !important;
    right: -5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 30px !important;
    width: 1px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    display: block !important;
}

/* Icon alignment with content */
.badge-item img,
.badge-item i {
    align-self: flex-start !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

/* Certifications & Compliance - With underline and two lines */
.certification-link {
    display: flex !important;
    align-items: center !important;
    max-width: 160px !important;
}

.certification-link a{
    color:#e6f4ef !important;
    font-size:13px !important;
    font-weight:400 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(230, 244, 239, 0.5) !important;
    transition: all 0.3s ease !important;
    display: block !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 150px !important;
}

.certification-link a:hover{
    color:#ffffff !important;
    text-decoration-color: #ffffff !important;
    text-decoration-thickness: 2px !important;
}

/* RIGHT SIDE - PAYMENT + COPYRIGHT STACKED */
.footer-trust-right{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:8px !important;
    text-align:right !important;
}

.custom-footer-wrapper .payment-icons{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.custom-footer-wrapper .payment-icons img{
    height:25px !important;
    width:auto !important;
    display: block !important;
}

/* Copyright */
.copyright-text{
    font-size:12px !important;
    opacity:0.8 !important;
    color: #e6f4ef !important;
}

/* =========================
   ZONE 3 - RESPONSIVE
========================= */

@media(max-width:1200px){
    .footer-6col-grid{
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
}

@media(max-width:991px){
    .footer-split-layout{
        flex-direction:column !important;
    }
    .footer-image-side,
    .footer-contact-side{
        width:100% !important;
        min-height:300px !important;
    }
    
    .footer-bottom-inner{
        flex-direction:column !important;
        text-align:center !important;
        gap:14px !important;
    }
    
    .footer-trust-left,
    .footer-trust-right{
        justify-content:center !important;
        align-items:center !important;
        width:100% !important;
    }
    
    .footer-trust-right{
        align-items:center !important;
    }
    
    .trust-badges {
        justify-content: center !important;
    }
    
    .badge-item {
        text-align: left !important;
        max-width: 100% !important;
    }
    
    .badge-item span {
        text-align: left !important;
        max-width: 100% !important;
    }
    
    /* Remove divider on tablet */
    .trust-badges .badge-item:nth-child(3)::after {
        display: none !important;
    }
    
    .badge-item:nth-child(3) {
        padding-right: 0 !important;
    }
    
    .certification-link {
        justify-content: center !important;
    }
}

@media(max-width:768px){
    .contact-grid{
        grid-template-columns:1fr !important;
        gap: 20px !important;
    }
    
    .icon-wrap img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .footer-6col-grid{
        grid-template-columns:1fr !important;
        text-align:center !important;
    }
    
    .follow-col .social-icons{
        justify-content:center !important;
    }
    
    .trust-badges {
        gap: 18px !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .badge-item {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .badge-item:nth-child(3) {
        padding-right: 0 !important;
    }
    
    .certification-link {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .certification-link a {
        text-align: center !important;
    }
}

@media(max-width:480px){
    .footer-contact-side{
        padding:20px !important;
    }
    
    .contact-box h2{
        font-size:24px !important;
    }
    
    .contact-grid{
        gap:20px !important;
    }
    
    .icon-wrap img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .badge-item{
        white-space:normal !important;
        text-align:center !important;
        max-width:100% !important;
        justify-content: center !important;
    }
    
    .badge-item span {
        text-align: center !important;
    }
    
    .trust-badges{
        gap:15px !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .badge-item:nth-child(3) {
        padding-right: 0 !important;
    }
    
    .payment-icons {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .certification-link a {
        text-align: center !important;
    }
}

/* Force hide any unwanted WordPress elements */
.footer-contact-side p:empty,
.footer-contact-side br:only-child {
    display: none !important;
}

/* ====================================
   MOBILE ONLY FOOTER - COMPLETE
   ==================================== */

/* Hide mobile footer on desktop */
.mobile-footer {
    display: none;
}

/* Show mobile footer only on screens below 768px */
@media screen and (max-width: 767px) {
    /* Hide desktop footer */
    .desktop-footer {
        display: none !important;
    }
    
    /* Show mobile footer with white background */
    .mobile-footer {
        display: block;
        background: #ffffff;
        font-family: 'Inter', sans-serif;
        width: 100%;
        color: #333333;
    }
    
    /* ====================================
       ZONE 1: Contact Section with Text Overlay on Image
       ==================================== */
    .mobile-contact-section {
        background: #ffffff;
        width: 100%;
    }
    
    .mobile-image-overlay-container {
        position: relative;
        width: 100%;
        height: auto;
        padding:10px;
    }
    
    .mobile-image-side {
        width: 100% !important;
        height: 300px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        display: block !important;
    }
    
    .mobile-image-overlay-content {
        position: absolute;
        bottom: 25px;
        left: 20px;
        right: 20px;
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        z-index: 2;
    }
    
    .mobile-image-overlay-content .mobile-title {
        font-size: 28px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 8px 0;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .mobile-image-overlay-content .mobile-subtitle {
        font-size: 15px;
        color: #ffffff;
        margin: 0;
        line-height: 1.5;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    
    .mobile-content-wrapper {
        background: #ffffff;
    }
    
    .mobile-contact-rows {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 25px 20px 0;
    }
    
    .mobile-contact-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 0;
    }
    
    .mobile-row-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .mobile-row-icon img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        display: block;
    }
    
    .mobile-row-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }
    
    .mobile-row-label {
        font-size: 16px;
        font-weight: 600;
        color: #111111;
        line-height: 1.4;
    }
    
    .mobile-row-value {
        font-size: 15px;
        color: #000;
        line-height: 1.4;
        word-break: break-word;
    }
    
    /* Button wrapper with 10px padding */
    .mobile-button-wrapper {
        padding: 0 20px 10px 20px;
    }
    
    .mobile-contact-support-btn {
        display: block;
        width: 100%;
        background: #0f8b68;
        color: #ffffff;
        text-align: center;
        padding: 16px 20px;
        border-radius: 40px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        border: none;
        transition: background 0.3s ease;
        box-sizing: border-box;
    }
    
    .mobile-contact-support-btn:hover,
    .mobile-contact-support-btn:active {
        background: #0b6f54;
    }
    
    /* Full width borders - touching screen edges */
    .mobile-full-border {
        width: 100vw;
        height: 1px;
        background-color: #e0e0e0;
        margin-left: calc(-50vw + 50%);
        position: relative;
        left: 0;
        right: 0;
    }
    
    .mobile-full-border.final-border {
        margin-top: 0;
    }
    
    /* Features wrapper with 10px padding */
    .mobile-features-wrapper {
        padding: 0 20px;
    }
    
    /* ====================================
       4 ROWS with individual borders
       ==================================== */
    .mobile-features-section {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .mobile-feature-item {
        padding: 10px 0;
        border-bottom: 1px solid #e0e0e0;
        text-align: center;
    }
    
    .mobile-feature-item.last-feature {
        border-bottom: none;
        padding-bottom: 25px;
    }
    
    .mobile-feature-row {
        width: 100%;
        text-align: center;
    }
    
    .mobile-feature-text {
        font-size: 15px;
        color: #000000;
        line-height: 1.5;
        display: inline-block;
        font-weight: 400;
    }
    
    .mobile-feature-link {
        font-size: 15px;
        color: #000000;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: #cccccc;
        display: inline-block;
        transition: color 0.3s;
        font-weight: 400;
    }
    
    .mobile-feature-link:hover,
    .mobile-feature-link:active {
        color: #0f8b68;
        text-decoration-color: #0f8b68;
    }
    
    /* ====================================
       Mobile Menu Accordion Styles with Chevron
       BLACK FONT, WHITE BACKGROUND, LIGHT GREY CHEVRON
       ==================================== */
    
    /* Reset section padding for accordion */
    .mobile-products-section,
    .mobile-support-section,
    .mobile-policies-section,
    .mobile-company-section {
        padding: 0 !important;
        border-bottom: 1px solid #e0e0e0;
        background: #ffffff !important;
    }
    
    /* Toggle button styles */
    .mobile-links-toggle {
        width: 100%;
        background: #ffffff !important;
        border: none;
        padding: 18px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000 !important;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        transition: background-color 0.3s ease;
        font-family: 'Inter', sans-serif;
    }
    
    .mobile-links-toggle:hover {
        background-color: #ffffff !important;
    }
    
    .mobile-links-toggle:focus {
        outline: none;
        background-color: #ffffff !important;
    }
    
    /* Icon container */
    .mobile-links-toggle .toggle-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }
    
    /* Chevron icon - Light grey */
    .mobile-links-toggle .toggle-icon i {
        font-size: 18px;
        color: #cccccc !important;
        transition: transform 0.3s ease;
    }
    
    /* Active state for sections */
    .mobile-products-section.active .mobile-links-toggle,
    .mobile-support-section.active .mobile-links-toggle,
    .mobile-policies-section.active .mobile-links-toggle,
    .mobile-company-section.active .mobile-links-toggle {
        background-color: #ffffff !important;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Links grid - hidden by default */
    .mobile-links-grid {
        display: none;
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 12px;
        background: #ffffff !important;
    }
    
    /* Show links when section is active */
    .mobile-products-section.active .mobile-links-grid,
    .mobile-support-section.active .mobile-links-grid,
    .mobile-policies-section.active .mobile-links-grid,
    .mobile-company-section.active .mobile-links-grid {
        display: flex;
        animation: fadeIn 0.3s ease;
    }
    
    /* Link styles - Black font */
    .mobile-links-grid a {
        color: #000000 !important;
        text-decoration: none;
        font-size: 15px;
        padding: 8px 0;
        transition: color 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
        display: block;
        background: #ffffff;
    }
    
    .mobile-links-grid a:last-child {
        border-bottom: none;
    }
    
    .mobile-links-grid a:hover,
    .mobile-links-grid a:active {
        color: #0f8b68 !important;
        padding-left: 5px;
    }
    
    /* Fade in animation */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
  /* ====================================
   ZONE 7: Newsletter - FIXED BUTTON NOT GETTING CUT OFF
   ==================================== */
.mobile-newsletter-section {
    padding: 25px 20px;
    background: #ffffff !important;
    text-align: center;
}

.mobile-newsletter-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000000 !important;
    margin: 0 0 8px 0;
}

.mobile-newsletter-section p {
    font-size: 14px;
    color: #666666 !important;
    margin: 0 0 20px 0;
}

.mobile-newsletter-form {
    display: flex;
    flex-direction: row;
    max-width: 320px;
    margin: 0 auto;
    border: 1px solid #dddddd;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    height: 48px; /* Fixed height to contain button properly */
}

.mobile-newsletter-form input {
    flex: 1;
    min-width: 0; /* Prevents input from overflowing */
    padding: 0 18px;
    border: none;
    font-size: 14px;
    box-sizing: border-box;
    background: #ffffff;
    outline: none;
    height: 100%; /* Full height of container */
}

.mobile-newsletter-form input::placeholder {
    color: #999999;
}

.mobile-newsletter-form input:focus {
    outline: none;
}

.mobile-newsletter-form button {
    padding: 0 20px;
    background: #0f8b68;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
    height: calc(100% - 4px); /* Slightly smaller to fit inside */
    margin: 2px 2px 2px 0; /* Centered vertically with margin */
    border-radius: 8px; /* Slightly smaller radius to fit */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-newsletter-form button:hover,
.mobile-newsletter-form button:active {
    background: #0b6f54;
}

/* ====================================
   ZONE 8: Follow Us & Payment - UPDATED with no payment title
   ==================================== */
.mobile-bottom-section {
    padding: 25px 20px;
    background: #ffffff !important;
}

.mobile-social {
    text-align: center;
    margin-bottom: 10px;
}

.mobile-social h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000000 !important;
    margin: 0 0 15px 0;
}

.mobile-social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.mobile-social-icons a {
    color: #000000 !important;
    font-size: 24px;
    transition: color 0.3s;
}

.mobile-social-icons a:hover,
.mobile-social-icons a:active {
    color: #0f8b68 !important;
}

.mobile-payment-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 8px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.mobile-payment-icons img {
    height: 24px;
    width: auto;
    opacity: 0.8;
}

.mobile-copyright {
    text-align: center;
    font-size: 12px;
    color: #888888;
}

/* ====================================
   Responsive for Small Phones
   ==================================== */
@media screen and (max-width: 480px) {
    .mobile-image-side {
        height: 240px !important;
        padding:10px;
        border-radius:10px;
       
    }
    
    .mobile-image-overlay-content {
        bottom: 20px;
        left: 16px;
        right: 16px;
        padding:10px;
    }
    
    .mobile-image-overlay-content .mobile-title {
        font-size: 24px;
    }
    
    .mobile-image-overlay-content .mobile-subtitle {
        font-size: 14px;
    }
    
    .mobile-contact-rows {
        padding: 20px 16px 0;
        gap: 18px;
    }
    
    .mobile-contact-row {
        gap: 14px;
    }
    
    .mobile-row-icon {
        width: 40px;
        height: 40px;
    }
    
    .mobile-row-icon img {
        width: 32px;
        height: 32px;
    }
    
    .mobile-row-label {
        font-size: 15px;
    }
    
    .mobile-row-value {
        font-size: 14px;
    }
    
    .mobile-button-wrapper {
        padding: 16px 16px 16px 16px;
    }
    
    .mobile-contact-support-btn {
        padding: 7px 16px;
        font-size: 15px;
        color:#fff !important;
    }
    
    .mobile-features-wrapper {
        padding: 0 16px;
    }
    
    .mobile-feature-item {
        padding: 14px 0;
    }
    
    .mobile-feature-item.last-feature {
        padding-bottom: 20px;
    }
    
    .mobile-feature-text,
    .mobile-feature-link {
        font-size: 14px;
    }
    
    /* Accordion responsive */
    .mobile-links-toggle {
        padding: 10px 16px;
        font-size: 16px;
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .mobile-links-grid {
        padding: 0 16px 16px 16px;
        gap: 10px;
        background: #ffffff !important;
    }
    
    .mobile-links-grid a {
        font-size: 14px;
        padding: 7px 0;
        color: #000000 !important;
        background: #ffffff;
    }
    
    .mobile-links-toggle .toggle-icon i {
        font-size: 16px;
        color: #cccccc !important;
    }
    
    /* Newsletter responsive - FIXED BUTTON */
    .mobile-newsletter-section {
        padding: 20px 16px;
        background: #ffffff !important;
    }
    
    .mobile-newsletter-form {
        max-width: 100%; /* Full width on small screens */
        height: 46px; /* Slightly smaller for mobile */
    }
    
    .mobile-newsletter-form input {
        padding: 0 14px;
        font-size: 14px;
    }
    
    .mobile-newsletter-form button {
        padding: 0 16px;
        font-size: 14px;
        white-space: nowrap;
        margin: 2px 2px 2px 0;
        height: calc(100% - 4px);
    }
    
    /* Bottom section responsive */
    .mobile-bottom-section {
        padding: 20px 16px;
        background: #ffffff !important;
    }
    
    .mobile-social-icons {
        gap: 20px;
    }
    
    .mobile-social-icons a {
        font-size: 22px;
        color: #000000 !important;
    }
    
    .mobile-payment-icons {
        gap: 12px;
    }
    
    .mobile-payment-icons img {
        height: 20px;
    }
}

/* ====================================
   ZONE 8: Follow Us & Payment - UPDATED with no payment title
   ==================================== */
.mobile-bottom-section {
    padding: 25px 20px;
    background: #ffffff !important;
}

.mobile-social {
    text-align: center;
    margin-bottom: 10px;
}

.mobile-social h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000000 !important;
    margin: 0 0 15px 0;
}

.mobile-social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.mobile-social-icons a {
    color: #000000 !important;
    font-size: 24px;
    transition: color 0.3s;
}

.mobile-social-icons a:hover,
.mobile-social-icons a:active {
    color: #0f8b68 !important;
}

.mobile-payment-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 8px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.mobile-payment-icons img {
    height: 24px;
    width: auto;
    opacity: 0.8;
}

.mobile-copyright {
    text-align: center;
    font-size: 12px;
    color: #888888;
}

/* ====================================
   Responsive for Small Phones
   ==================================== */
@media screen and (max-width: 480px) {
    .mobile-image-side {
        height: 240px !important;
        padding:10px;
        border-radius:10px;
       
    }
    
    .mobile-image-overlay-content {
        bottom: 20px;
        left: 16px;
        right: 16px;
        padding:10px;
    }
    
    .mobile-image-overlay-content .mobile-title {
        font-size: 24px;
    }
    
    .mobile-image-overlay-content .mobile-subtitle {
        font-size: 14px;
    }
    
    .mobile-contact-rows {
        padding: 20px 16px 0;
        gap: 18px;
    }
    
    .mobile-contact-row {
        gap: 14px;
    }
    
    .mobile-row-icon {
        width: 40px;
        height: 40px;
    }
    
    .mobile-row-icon img {
        width: 32px;
        height: 32px;
    }
    
    .mobile-row-label {
        font-size: 15px;
    }
    
    .mobile-row-value {
        font-size: 14px;
    }
    
    .mobile-button-wrapper {
        padding: 16px 16px 16px 16px;
    }
    
    .mobile-contact-support-btn {
        padding: 7px 16px;
        font-size: 15px;
        color:#fff !important;
    }
    
    .mobile-features-wrapper {
        padding: 0 16px;
    }
    
    .mobile-feature-item {
        padding: 14px 0;
    }
    
    .mobile-feature-item.last-feature {
        padding-bottom: 20px;
    }
    
    .mobile-feature-text,
    .mobile-feature-link {
        font-size: 14px;
    }
    
    /* Accordion responsive */
    .mobile-links-toggle {
        padding: 10px 16px;
        font-size: 16px;
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .mobile-links-grid {
        padding: 0 16px 16px 16px;
        gap: 10px;
        background: #ffffff !important;
    }
    
    .mobile-links-grid a {
        font-size: 14px;
        padding: 7px 0;
        color: #000000 !important;
        background: #ffffff;
    }
    
    .mobile-links-toggle .toggle-icon i {
        font-size: 16px;
        color: #cccccc !important;
    }
    
    /* Newsletter responsive - FIXED BUTTON */
    .mobile-newsletter-section {
        padding: 20px 16px;
        background: #ffffff !important;
    }
    
    .mobile-newsletter-form {
        max-width: 100%; /* Full width on small screens */
        height: 46px; /* Slightly smaller for mobile */
    }
    
    .mobile-newsletter-form input {
        padding: 0 14px;
        font-size: 14px;
    }
    
    .mobile-newsletter-form button {
        padding: 0 16px;
        font-size: 14px;
        white-space: nowrap;
        margin: 2px 2px 2px 0;
        height: calc(100% - 4px);
    }
    
    /* Bottom section responsive */
    .mobile-bottom-section {
        padding: 20px 16px;
        background: #ffffff !important;
    }
    
    .mobile-social-icons {
        gap: 20px;
    }
    
    .mobile-social-icons a {
        font-size: 22px;
        color: #000000 !important;
    }
    
    .mobile-payment-icons {
        gap: 12px;
    }
    
    .mobile-payment-icons img {
        height: 20px;
    }
}
    /* ====================================
       ZONE 8: Follow Us & Payment - UPDATED with no payment title
       ==================================== */
    .mobile-bottom-section {
        padding: 25px 20px;
        background: #ffffff !important;
    }
    
    .mobile-social {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .mobile-social h3 {
        font-size: 18px;
        font-weight: 600;
        color: #000000 !important;
        margin: 0 0 15px 0;
    }
    
    .mobile-social-icons {
        display: flex;
        justify-content: center;
        gap: 25px;
    }
    
    .mobile-social-icons a {
        color: #000000 !important;
        font-size: 24px;
        transition: color 0.3s;
    }
    
    .mobile-social-icons a:hover,
    .mobile-social-icons a:active {
        color: #0f8b68 !important;
    }
    
    .mobile-payment-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-bottom: 8px;
        padding-top: 20px;
        border-top: 1px solid #e0e0e0;
    }
    
    .mobile-payment-icons img {
        height: 24px;
        width: auto;
        opacity: 0.8;
    }
    
    .mobile-copyright {
        text-align: center;
        font-size: 12px;
        color: #888888;
    }
    
    /* ====================================
       Responsive for Small Phones
       ==================================== */
    @media screen and (max-width: 480px) {
        .mobile-image-side {
            height: 240px !important;
            padding:10px;
            border-radius:10px;
           
        }
        
        .mobile-image-overlay-content {
            bottom: 20px;
            left: 16px;
            right: 16px;
            padding:10px;
        }
        
        .mobile-image-overlay-content .mobile-title {
            font-size: 24px;
        }
        
        .mobile-image-overlay-content .mobile-subtitle {
            font-size: 14px;
        }
        
        .mobile-contact-rows {
            padding: 20px 16px 0;
            gap: 18px;
        }
        
        .mobile-contact-row {
            gap: 14px;
        }
        
        .mobile-row-icon {
            width: 40px;
            height: 40px;
        }
        
        .mobile-row-icon img {
            width: 32px;
            height: 32px;
        }
        
        .mobile-row-label {
            font-size: 15px;
        }
        
        .mobile-row-value {
            font-size: 14px;
        }
        
        .mobile-button-wrapper {
            padding: 16px 16px 16px 16px;
        }
        
        .mobile-contact-support-btn {
            padding: 7px 16px;
            font-size: 15px;
            color:#fff !important;
        }
        
        .mobile-features-wrapper {
            padding: 0 16px;
        }
        
        .mobile-feature-item {
            padding: 14px 0;
        }
        
        .mobile-feature-item.last-feature {
            padding-bottom: 20px;
        }
        
        .mobile-feature-text,
        .mobile-feature-link {
            font-size: 14px;
        }
        
        /* Accordion responsive */
        .mobile-links-toggle {
            padding: 10px 16px;
            font-size: 16px;
            background: #ffffff !important;
            color: #000000 !important;
        }
        
        .mobile-links-grid {
            padding: 0 16px 16px 16px;
            gap: 10px;
            background: #ffffff !important;
        }
        
        .mobile-links-grid a {
            font-size: 14px;
            padding: 7px 0;
            color: #000000 !important;
            background: #ffffff;
        }
        
        .mobile-links-toggle .toggle-icon i {
            font-size: 16px;
            color: #cccccc !important;
        }
        
        /* Newsletter responsive */
        .mobile-newsletter-section {
            padding: 12px 16px;
            background: #ffffff !important;
        }
        
        .mobile-newsletter-form {
            max-width: 280px;
            border-radius: 10px;
        }
        
        .mobile-newsletter-form input {
            padding: 12px 16px;
            font-size: 13px;
            padding-left: 18px;
        }
        
        .mobile-newsletter-form button {
            padding: 6px 20px;
            font-size: 13px;
            border-radius: 8px;
            margin: 3px;
        }
        
        /* Bottom section responsive */
        .mobile-bottom-section {
            padding: 0px 0px;
            background: #ffffff !important;
        }
        
        .mobile-social-icons {
            gap: 20px;
        }
        
        .mobile-social-icons a {
            font-size: 22px;
            color: #000000 !important;
        }
        
        .mobile-payment-icons {
            gap: 12px;
        }
        
        .mobile-payment-icons img {
            height: 20px;
        }
    }
}