/* =========================================================
   GENERAL INSURANCE WEBSITE
   MOBILE + TABLET RESPONSIVE CSS
   Based on the Life website mobile layout
   ========================================================= */


/* =========================================================
   TABLET
   769px - 1192px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1192px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    /* HEADER */
    .header{
        padding:13px 3%;
    }

    .brand-title{
        font-size:24px;
    }

    .brand-tagline{
        font-size:10px;
    }

    .nav-links{
        gap:10px;
    }

    .nav-links a{
        font-size:13px;
        padding:9px 7px;
        gap:5px;
    }

    .language-switcher{
        gap:6px;
        margin-left:12px;
        margin-right:12px;
    }

    .language-switcher a{
        min-width:38px;
        padding:7px 9px;
        font-size:11px;
    }

    /* HERO */
    .hero{
        min-height:720px;
        padding:130px 5% 70px;
        gap:35px;
    }

    .hero-image{
        max-width:48%;
    }

    .hero-content{
        max-width:48%;
    }

    .hero h1{
        font-size:46px;
    }

    .hero h3{
        font-size:27px;
    }

    .hero-text{
        font-size:14px;
        line-height:1.7;
    }

    .hero-buttons{
        gap:10px;
    }

    .premium-glass-btn{
        padding:12px 16px;
        font-size:12px;
    }

    /* FEATURES */
    .hero-features{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
        padding:35px 5%;
    }

    /* ABOUT */
    .about{
        padding:70px 5%;
        gap:45px;
    }

    .about-image{
        max-width:42%;
    }

    .about-content{
        max-width:52%;
    }

    .about-stats{
        grid-template-columns:repeat(3,1fr);
    }

    /* SERVICES */
    .services{
        padding:70px 5%;
    }

    .cards{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    /* WHY */
    .why{
        padding:70px 5%;
    }

    .why-container{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    /* CONTACT */
    .contact-section{
        padding:70px 5%;
        gap:25px;
    }

    /* FOOTER */
    .footer-content{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }
}


/* =========================================================
   MOBILE
   768px AND BELOW
   ========================================================= */

@media (max-width:768px){

    /* GLOBAL */

    *,
    *::before,
    *::after{
        box-sizing:border-box;
    }

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        margin:0;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .header{
        width:100%;
        min-height:95px;
        padding:12px 15px;
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        position:relative;
        z-index:1000;
    }


    /* CENTER LOGO */

    .logo{
        position:absolute;
        left:50%;
        top:12px;
        transform:translateX(-50%);
        width:max-content;
        max-width:70%;
        text-decoration:none;
        text-align:center;
        z-index:2;
    }

    .logo-text{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .brand-title{
        display:block;
        font-size:17px;
        line-height:1.2;
        font-weight:700;
        white-space:nowrap;
    }

    .brand-tagline{
        display:block;
        margin-top:3px;
        font-size:8px;
        line-height:1.3;
        text-align:center;
        white-space:nowrap;
    }


    /* LANGUAGE SWITCHER */

    .language-switcher{
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        top:56px !important;
        transform:translateX(-50%) !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        width:max-content !important;
        margin:0 !important;
    }

    .language-switcher a{
        min-width:40px !important;
        width:40px !important;
        height:33px !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:11px !important;
        white-space:nowrap !important;
    }


    /* MOBILE MENU BUTTON */

    .menu-toggle{
        position:absolute;
        right:15px;
        top:12px;
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:23px;
        text-decoration:none;
        z-index:20;
    }


    /* DESKTOP NAVIGATION HIDDEN */

    .desktop-menu{
        display:none !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero{
        width:100%;
        min-height:auto;
        padding:45px 18px 45px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:0 !important;
    }


    /* HERO IMAGE */

    .hero-image{
        width:100%;
        max-width:340px;
        margin:0 auto 25px;
        display:flex;
        justify-content:center;
    }

    .hero-image img{
        width:100%;
        max-width:340px;
        height:auto;
        display:block;
        object-fit:cover;
    }


    /* HERO CONTENT */

    .hero-content{
        width:100%;
        max-width:100%;
        margin:0 auto;
        text-align:center;
        padding-top:0;
    }

    .hero h1{
        margin:0 auto 14px;
        font-size:34px;
        line-height:1.12;
        text-align:center;
    }

    .hero h1 span{
        display:block;
    }

    .hero h3{
        margin:8px 0;
        font-size:23px;
        line-height:1.25;
        text-align:center;
    }

    .hero-sub{
        margin:5px 0 12px;
        font-size:14px;
        line-height:1.5;
        text-align:center;
    }

    .member-badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        margin:5px auto 15px;
        font-size:11px;
        text-align:center;
    }

    .hero-line{
        width:70px;
        height:3px;
        margin:15px auto;
        border-radius:10px;
    }

    .hero-text{
        width:100%;
        max-width:330px;
        margin:0 auto 20px;
        font-size:13px;
        line-height:1.7;
        text-align:center;
    }


    /* HERO BUTTONS */

    .hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:12px;
        margin-top:20px;
    }

    .hero-buttons a,
    .premium-glass-btn{
        width:100%;
        max-width:330px;
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        font-size:12px;
        line-height:1.3;
    }


    /* =====================================================
       HERO FEATURES
       ===================================================== */

    .hero-features{
        width:100%;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:15px !important;
        margin-top:10px;
        padding:20px 15px;
    }

    .feature-box{
        width:90% !important;
        max-width:360px !important;
        min-height:120px;
        padding:18px 10px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .feature-box i{
        font-size:24px;
        margin-bottom:8px;
    }

    .feature-box h4{
        margin:5px 0;
        font-size:14px;
        line-height:1.3;
    }

    .feature-box p{
        margin:0;
        font-size:10px;
        line-height:1.5;
    }


    /* =====================================================
       ABOUT
       ===================================================== */

    .about{
        width:100%;
        padding:50px 18px;
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .about-image{
        width:100%;
        max-width:320px;
        margin:0 auto;
    }

    .about-image img{
        width:100%;
        height:auto;
        display:block;
    }

    .about-content{
        width:100%;
        text-align:center;
    }

    .about-content h2{
        font-size:28px;
        line-height:1.2;
    }

    .about-content h3{
        font-size:21px;
        line-height:1.3;
    }

    .about-content h4{
        font-size:14px;
    }

    .about-content p{
        font-size:13px;
        line-height:1.7;
    }

    .about-highlight-card{
        text-align:left;
        width:100%;
    }

    .about-stats{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .stat{
        padding:15px 8px;
        text-align:center;
    }

    .stat h3{
        font-size:22px;
    }

    .stat p{
        font-size:10px;
    }

    .about-stats .stat:last-child{
        grid-column:1 / -1;
        justify-self:center;
        width:100%;
        max-width:180px;
    }

    .about-divider{
        margin-left:auto !important;
        margin-right:auto !important;
        align-self:center !important;
    }


    /* =====================================================
       SERVICES
       ===================================================== */

    .services{
        width:100%;
        padding:50px 15px;
    }

    .services h2,
    .why h2{
        font-size:28px;
        text-align:center;
        line-height:1.2;
    }

    .cards{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .card{
        width:100%;
        padding:25px 18px;
        text-align:center;
    }

    .card h3{
        font-size:19px;
    }

    .card p{
        font-size:13px;
        line-height:1.7;
    }


    /* =====================================================
       WHY CHOOSE ME
       ===================================================== */

    .why{
        width:100%;
        padding:50px 15px;
    }

    .why-container{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .why-box{
        width:100%;
        padding:25px 18px;
        text-align:center;
    }

    .why-box h3{
        font-size:18px;
    }

    .why-box p{
        font-size:13px;
        line-height:1.6;
    }


    /* =====================================================
       CONTACT
       ===================================================== */

    .contact-section{
        width:100%;
        padding:50px 15px;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
    }

    .contact-form-box,
    .contact-info-box{
        width:100%;
        margin-bottom:20px;
    }

    .contact-form-box h2{
        font-size:27px;
        line-height:1.25;
    }

    .contact-form-box input,
    .contact-form-box textarea,
    .contact-form-box select{
        width:100%;
        font-size:14px;
    }

    .contact-form-box button{
        width:100%;
        min-height:48px;
    }

    .info-top,
    .info-bottom{
        width:100%;
    }


    /* =====================================================
       FEEDBACK
       ===================================================== */

    .feedback-section{
        width:100%;
        padding:45px 15px;
    }

    .feedback-section form{
        width:100%;
    }

    .feedback-section input,
    .feedback-section select,
    .feedback-section textarea,
    .feedback-section button{
        width:100%;
    }


    /* =====================================================
       MAP
       ===================================================== */

    .map-section{
        width:100%;
        padding:0;
    }

    .map-section iframe{
        width:100%;
        min-height:300px;
        display:block;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .premium-footer{
        width:100%;
        text-align:center;
    }

    .footer-content{
        width:100%;
        padding:40px 18px;
        display:grid;
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-brand,
    .footer-box{
        width:100%;
        text-align:center;
    }

    .footer-box a,
    .footer-box p{
        font-size:13px;
    }

    .contact-item{
        justify-content:center;
        text-align:center;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-bottom{
        padding:20px 15px;
        font-size:11px;
        line-height:1.6;
        text-align:center;
    }


    /* =====================================================
       FLOATING BUTTONS
       ===================================================== */

    .floating-buttons{
        right:12px;
        bottom:15px;
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .floating-buttons a{
        width:45px;
        height:45px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
}


/* =========================================================
   SMALL PHONES
   480px AND BELOW
   ========================================================= */

@media (max-width:480px){

    .header{
        min-height:92px;
        padding-left:12px;
        padding-right:12px;
    }

    .logo{
        top:11px;
        max-width:72%;
    }

    .brand-title{
        font-size:16px;
    }

    .brand-tagline{
        font-size:7px;
    }

    .menu-toggle{
        right:12px;
        width:38px;
        height:38px;
        font-size:21px;
    }

    .language-switcher{
        top:56px !important;
        gap:5px !important;
    }

    .language-switcher a{
        min-width:36px !important;
        width:36px !important;
        height:30px !important;
        font-size:10px !important;
    }

    .hero{
        padding:35px 15px 40px;
    }

    .hero-image{
        max-width:310px;
        margin-bottom:22px;
    }

    .hero h1{
        font-size:31px;
    }

    .hero h3{
        font-size:21px;
    }

    .hero-sub{
        font-size:13px;
    }

    .hero-text{
        font-size:12px;
        max-width:300px;
    }

    .hero-buttons a,
    .premium-glass-btn{
        max-width:300px;
        font-size:11px;
    }

    .hero-features{
        gap:8px !important;
        padding:20px 10px;
    }

    .feature-box{
        min-height:105px;
        padding:14px 7px;
    }

    .feature-box i{
        font-size:21px;
    }

    .feature-box h4{
        font-size:12px;
    }

    .feature-box p{
        font-size:9px;
    }

    .about{
        padding:45px 15px;
    }

    .about-content h2,
    .services h2,
    .why h2{
        font-size:26px;
    }

    .about-content h3{
        font-size:20px;
    }

    .card{
        padding:22px 15px;
    }

    .card h3{
        font-size:18px;
    }

    .card p{
        font-size:12px;
    }

    .contact-form-box h2{
        font-size:24px;
    }

    .footer-content{
        padding:35px 15px;
    }
}


/* =====================================================
   GENERAL — CONTACT & FEEDBACK FORM RESPONSIVE FIX
   ===================================================== */

/* Tablet */
@media (min-width: 769px) and (max-width: 1192px){

    .contact-section form,
    .feedback-section form,
    .contact-form,
    .feedback-form{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-section input,
    .contact-section select,
    .contact-section textarea,
    .feedback-section input,
    .feedback-section select,
    .feedback-section textarea,
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .feedback-form input,
    .feedback-form select,
    .feedback-form textarea{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-section .form-row,
    .feedback-section .form-row,
    .contact-form .form-row,
    .feedback-form .form-row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .contact-section .form-group,
    .feedback-section .form-group,
    .contact-form .form-group,
    .feedback-form .form-group{
        min-width: 0;
    }
}

/* Mobile */
@media (max-width: 768px){

    .contact-section form,
    .feedback-section form,
    .contact-form,
    .feedback-form{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .contact-section .form-row,
    .feedback-section .form-row,
    .contact-form .form-row,
    .feedback-form .form-row{
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .contact-section .form-group,
    .feedback-section .form-group,
    .contact-form .form-group,
    .feedback-form .form-group{
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .contact-section label,
    .feedback-section label,
    .contact-form label,
    .feedback-form label{
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .contact-section input,
    .contact-section select,
    .contact-section textarea,
    .feedback-section input,
    .feedback-section select,
    .feedback-section textarea,
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .feedback-form input,
    .feedback-form select,
    .feedback-form textarea{
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        font-size: 15px;
    }

    .contact-section textarea,
    .contact-form textarea,
    .feedback-section textarea,
    .feedback-form textarea{
        min-height: 130px;
        resize: vertical;
    }

    .contact-section button,
    .feedback-section button,
    .contact-form button,
    .feedback-form button{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .contact-section .form-actions,
    .feedback-section .form-actions,
    .contact-form .form-actions,
    .feedback-form .form-actions{
        width: 100%;
    }
}

/* Small phones */
@media (max-width: 480px){

    .contact-section form,
    .feedback-section form,
    .contact-form,
    .feedback-form{
        padding-left: 0;
        padding-right: 0;
    }

    .contact-section input,
    .contact-section select,
    .contact-section textarea,
    .feedback-section input,
    .feedback-section select,
    .feedback-section textarea,
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .feedback-form input,
    .feedback-form select,
    .feedback-form textarea{
        font-size: 14px;
        padding: 12px 13px;
    }

    .contact-section button,
    .feedback-section button,
    .contact-form button,
    .feedback-form button{
        min-height: 46px;
    }
}


/* =====================================================
   CRITICAL FIX — GENERAL CONTACT + FEEDBACK VISIBILITY
   Overrides the fixed-height/overflow rules in general.css
   ===================================================== */

@media (max-width: 1192px){

    .contact-section{
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }

    .contact-form-box{
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #contactForm{
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    #contactForm input,
    #contactForm textarea,
    #contactForm button{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 !important;
        box-sizing: border-box !important;
    }

    .feedback-section{
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 25px !important;
        padding-bottom: 10px !important;
    }

    #feedbackForm{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        gap: 12px !important;
    }

    #feedbackForm input,
    #feedbackForm select,
    #feedbackForm textarea,
    #feedbackForm button{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #feedbackForm textarea{
        height: 110px !important;
        min-height: 110px !important;
    }

    .contact-info-box{
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
}


/* Extra protection for phones */
@media (max-width: 768px){

    .contact-section{
        padding: 55px 15px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .contact-form-box{
        padding: 25px 18px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .contact-form-box h2{
        font-size: 27px !important;
        line-height: 1.25 !important;
    }

    .contact-form-box > p{
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    #contactForm input,
    #contactForm textarea{
        padding: 13px 14px !important;
        font-size: 14px !important;
    }

    #contactForm textarea{
        height: 100px !important;
        min-height: 100px !important;
    }

    #contactForm button{
        min-height: 48px !important;
    }

    .feedback-section{
        margin-top: 25px !important;
        padding-top: 22px !important;
        padding-bottom: 5px !important;
    }

    .feedback-section h2{
        font-size: 23px !important;
        margin-bottom: 15px !important;
    }

    #feedbackForm input,
    #feedbackForm select,
    #feedbackForm textarea{
        padding: 13px 14px !important;
        font-size: 14px !important;
    }

    #feedbackForm textarea{
        height: 100px !important;
        min-height: 100px !important;
    }

    #feedbackForm button{
        min-height: 48px !important;
    }

    .contact-info-box{
        padding: 25px 18px !important;
    }
}


/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 480px){

    .contact-section{
        padding: 45px 12px !important;
    }

    .contact-form-box{
        padding: 22px 15px !important;
        border-radius: 18px;
    }

    .contact-form-box h2{
        font-size: 24px !important;
    }

    .feedback-section h2{
        font-size: 21px !important;
    }
}


/* =====================================================
   GENERAL FOOTER CONTACT INFO - FINAL MOBILE FIX
   ICON LEFT + TEXT RIGHT, WHOLE BLOCK CENTERED
   ===================================================== */

@media (max-width: 768px){

    .premium-footer .footer-content > .footer-box:nth-child(4){
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) h4{
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 22px !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item{
        width: 100% !important;
        max-width: 300px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item i{
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item span{
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.5 !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item a{
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .footer-social{
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 18px !important;
    }
}

@media (max-width: 480px){

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item{
        max-width: 290px !important;
        gap: 10px !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item i{
        flex-basis: 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item span,
    .premium-footer .footer-content > .footer-box:nth-child(4) .contact-item a{
        font-size: 12px !important;
    }
}