/* APPOINTMENTS — GENERAL INSURANCE MOBILE CSS */

@media (max-width:768px){

/* HEADER — SAME 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;
}
.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!important;
    align-items:center;
    justify-content:center;
    font-size:23px;
    text-decoration:none;
    z-index:20;
}
.desktop-menu{display:none!important;}

/* HERO */
.appointment-hero{
    min-height:100vh!important;
    height:auto!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/a_cinematic_high_resolution_vertical_mobile_phon.png")
        center center / cover no-repeat!important;
    background-attachment:scroll!important;
    background-position:center center!important;
}
.appointment-hero .hero-content{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    text-align:center!important;
    transform:none!important;
}
.appointment-hero .hero-tag{
    font-size:12px!important;
    padding:9px 17px!important;
}
.appointment-hero .hero-content h1{
    font-size:34px!important;
    line-height:1.2!important;
}
.appointment-hero .hero-content h1 span{margin-top:5px!important;}
.appointment-hero .hero-subtitle{font-size:16px!important;}
.appointment-hero .hero-line{
    width:75px!important;
    height:4px!important;
    margin:20px auto!important;
}
.appointment-hero .hero-description{
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.75!important;
}

/* MAIN */
.appointment-main{
    width:100%!important;
    padding:65px 20px!important;
}
.appointment-main .container{
    width:100%!important;
    max-width:100%!important;
}
.appointment-main .section-title{
    margin-bottom:42px!important;
    text-align:center!important;
}
.appointment-main .section-title span{
    font-size:12px!important;
    letter-spacing:1.5px!important;
}
.appointment-main .section-title h2{
    font-size:29px!important;
    line-height:1.3!important;
}
.appointment-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:35px!important;
}
.appointment-info{
    width:100%!important;
    gap:18px!important;
}

/* INFO CARDS */
.info-card{
    width:100%!important;
    padding:25px 20px!important;
    border-radius:20px!important;
    box-sizing:border-box!important;
}
.info-icon{
    width:58px!important;
    height:58px!important;
    margin-bottom:16px!important;
    font-size:23px!important;
}
.info-card h3{
    font-size:20px!important;
    line-height:1.35!important;
}
.info-card p{
    font-size:14px!important;
    line-height:1.75!important;
}

/* FORM */
.appointment-form-box{
    width:100%!important;
    padding:25px 18px!important;
    border-radius:22px!important;
    box-sizing:border-box!important;
}
.form-heading{
    margin-bottom:25px!important;
    text-align:center!important;
}
.form-heading > span{
    font-size:12px!important;
    letter-spacing:1.5px!important;
}
.form-heading h2{
    font-size:27px!important;
    line-height:1.3!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;
    margin-bottom:18px!important;
}
.form-group label{
    font-size:13px!important;
    margin-bottom:7px!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;
    padding:13px 14px!important;
}
.form-group textarea{min-height:140px!important;}
.appointment-submit-btn{
    width:100%!important;
    min-height:52px!important;
    padding:15px 18px!important;
    justify-content:center!important;
    font-size:14px!important;
}

/* FOOTER — ABOUT STYLE */
.premium-footer{width:100%!important;overflow:hidden!important;}
.premium-footer .footer-content{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    gap:30px!important;
    padding:50px 20px!important;
    box-sizing:border-box!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;
    align-items:center!important;
}
.footer-bottom{
    width:100%!important;
    text-align:center!important;
    padding:25px 15px!important;
    box-sizing:border-box!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;}
.appointment-hero{padding:110px 16px 55px!important;}
.appointment-hero .hero-content h1{font-size:30px!important;}
.appointment-hero .hero-subtitle{font-size:15px!important;}
.appointment-main{padding-left:15px!important;padding-right:15px!important;}
.appointment-main .section-title h2{font-size:26px!important;}
.info-card{padding:22px 17px!important;}
.appointment-form-box{padding:22px 14px!important;}
.form-heading h2{font-size:25px!important;}
.premium-footer .footer-content{
    padding-left:15px!important;
    padding-right:15px!important;
}
}