/* =========================================================
   CONTACT PAGE — GENERAL INSURANCE MOBILE CSS
   ========================================================= */

@media (max-width:768px){

    /* HEADER — SAME STYLE AS ABOUT MOBILE */
    .header{
        width:100%;
        min-height:95px;
        padding:12px 15px;
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        position:relative;
        z-index:1000;
    }

    .logo{
        position:absolute;
        left:50%;
        top:12px;
        transform:translateX(-50%);
        width:max-content;
        max-width:70%;
        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{
        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;
        z-index:10;
    }

    .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;
    }

    .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-menu{display:none !important;}


    /* CONTACT HERO + MOBILE HERO IMAGE */
    .contact-hero{
        min-height:100vh !important;
        padding:120px 20px 70px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        background:
            linear-gradient(
                rgba(8,62,63,.42),
                rgba(8,62,63,.55)
            ),
            url("images/wide_cinematic_vertical_portrait_business_promot.png")
            center center / cover no-repeat !important;
        background-attachment:scroll !important;
        background-position:center center !important;
    }

    .contact-hero .hero-content{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        text-align:center !important;
    }

    .contact-hero .hero-tag{font-size:12px !important;}

    .contact-hero .hero-content h1{
        font-size:34px !important;
        line-height:1.2 !important;
    }

    .contact-hero .hero-subtitle{font-size:15px !important;}

    .contact-hero .hero-description{
        font-size:14px !important;
        line-height:1.7 !important;
        max-width:100% !important;
    }


    /* INTRO */
    .contact-intro{
        padding:65px 20px !important;
    }

    .contact-intro .container{
        width:100% !important;
        max-width:100% !important;
    }

    .contact-intro .section-title{text-align:center !important;}

    .contact-intro .section-title h2{
        font-size:30px !important;
        line-height:1.25 !important;
    }

    .contact-intro .intro-content{
        width:100% !important;
        text-align:center !important;
    }

    .contact-intro .intro-content p{
        font-size:14px !important;
        line-height:1.8 !important;
    }


    /* CONTACT INFORMATION + FORM */
    .contact-main{
        padding:65px 20px !important;
    }

    .contact-main .container{
        width:100% !important;
        max-width:100% !important;
    }

    .contact-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:40px !important;
    }

    .contact-info,
    .contact-form-box{
        width:100% !important;
        max-width:100% !important;
    }

    .contact-info .left-title{text-align:center !important;}

    .contact-info .left-line{
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .contact-card{
        width:100% !important;
        display:grid !important;
        grid-template-columns:58px 1fr !important;
        align-items:center !important;
        gap:12px !important;
        margin:16px 0 !important;
        padding:18px 15px !important;
        box-sizing:border-box !important;
    }

    .contact-icon{
        width:58px !important;
        height:58px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-shrink:0 !important;
    }

    .contact-card h3{
        font-size:16px !important;
        margin-bottom:4px !important;
    }

    .contact-card p,
    .contact-card a{
        font-size:14px !important;
        line-height:1.5 !important;
        word-break:break-word !important;
    }

    .quick-contact{
        text-align:center !important;
        margin-top:28px !important;
    }

    .quick-buttons{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:12px !important;
    }

    .quick-btn{
        width:100% !important;
        max-width:320px !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }


    /* CONTACT FORM */
    .contact-form-box{
        padding:25px 18px !important;
        box-sizing:border-box !important;
    }

    .form-heading{text-align:center !important;}

    .form-heading h2{
        font-size:28px !important;
        line-height:1.25 !important;
    }

    .form-heading p{
        font-size:14px !important;
        line-height:1.7 !important;
    }

    .form-row{
        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;
    }

    .form-group{width:100% !important;}

    .form-group input,
    .form-group select,
    .form-group textarea{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        font-size:14px !important;
    }

    .form-group textarea{
        min-height:150px !important;
        resize:vertical !important;
    }

    .submit-btn{
        width:100% !important;
        min-height:52px !important;
        justify-content:center !important;
    }


    /* APPOINTMENT CTA */
    .appointment-section{
        padding:70px 20px !important;
    }

    .appointment-content{
        width:100% !important;
        max-width:100% !important;
        text-align:center !important;
    }

    .appointment-content h2{
        font-size:29px !important;
        line-height:1.25 !important;
    }

    .appointment-content p{
        font-size:14px !important;
        line-height:1.7 !important;
    }

    .appointment-buttons{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:12px !important;
    }

    .appointment-buttons .premium-btn{
        width:100% !important;
        max-width:320px !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }


    /* FOOTER — SAME CENTERED STYLE AS ABOUT */
    .premium-footer .footer-content{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
        gap:30px !important;
    }

    .footer-brand{
        width:100% !important;
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .footer-brand h2,
    .footer-brand h3,
    .footer-brand p{
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .premium-footer .footer-box{
        width:100% !important;
        max-width:500px !important;
        text-align:center !important;
    }

    .premium-footer .footer-box:nth-child(2),
    .premium-footer .footer-box:nth-child(3){
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
    }

    .premium-footer .footer-box:nth-child(2) a,
    .premium-footer .footer-box:nth-child(3) a{
        display:block !important;
        width:100% !important;
        text-align:center !important;
    }

    .footer-box .contact-item{
        width:90% !important;
        max-width:500px !important;
        display:grid !important;
        grid-template-columns:55px 1fr !important;
        align-items:center !important;
        margin:15px auto !important;
        text-align:left !important;
    }

    .footer-box .contact-item i{
        width:55px !important;
        text-align:center !important;
    }

    .footer-box .contact-item span{
        text-align:left !important;
        padding-left:10px !important;
        word-break:break-word !important;
    }

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

    .footer-bottom{
        text-align:center !important;
        padding-left:15px !important;
        padding-right:15px !important;
    }
}


/* SMALL PHONES */
@media (max-width:480px){

    .header{min-height:96px;}

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

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

    .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;
    }

    .menu-toggle{right:10px;}

    .contact-hero{
        padding:110px 16px 55px !important;
    }

    .contact-hero .hero-content h1{
        font-size:30px !important;
    }

    .contact-intro,
    .contact-main{
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .contact-card{
        grid-template-columns:50px 1fr !important;
        padding:16px 12px !important;
    }

    .contact-icon{
        width:50px !important;
        height:50px !important;
    }

    .contact-form-box{
        padding:22px 14px !important;
    }

    .form-heading h2{font-size:25px !important;}

    .appointment-section{
        padding-left:15px !important;
        padding-right:15px !important;
    }
}