/* ==========================================================
   RESPONSIVE.CSS
   FINANZVERMITTLUNG SOMMER
========================================================== */


/* ==========================================================
   1200px
========================================================== */

@media (max-width:1200px){

    .hero__container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .hero__content{

        text-align:center;

    }

    .hero p{

        margin:0 auto 40px;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__dashboard{

        max-width:700px;

        margin:auto;

    }

    .finance-check__content{

        grid-template-columns:1fr;

    }

    .contact__grid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   1024px
========================================================== */

@media (max-width:1024px){

    section{

        padding:90px 0;

    }

    .services__grid{

        grid-template-columns:1fr;

    }

    .strategy__grid{

        grid-template-columns:1fr;

    }

    .advantages__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .academy__grid{

        grid-template-columns:1fr;

    }

    .testimonials__grid{

        grid-template-columns:1fr;

    }

    .process__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer__grid{

        grid-template-columns:repeat(2,1fr);

    }

}
/* ==========================================================
   768px
========================================================== */

@media (max-width:768px){

    .header__container{

        height:80px;

    }

    .nav{

        position:fixed;

        top:80px;

        left:-100%;

        width:100%;

        height:calc(100vh - 80px);

        background:#ffffff;

        display:flex;

        justify-content:center;

        align-items:center;

        transition:.35s ease;

        z-index:999;

    }

    .nav.active{

        left:0;

    }

    .nav ul{

        flex-direction:column;

        gap:35px;

    }

    .mobile-menu{

        display:block;

    }

    .header__actions .btn{

        display:none;

    }

    .hero{

        padding-top:140px;

    }

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2.1rem;

    }

    .hero__buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .dashboard__header{

        flex-direction:column;

        gap:15px;

        align-items:flex-start;

    }

    .process__grid{

        grid-template-columns:1fr;

    }

    .advantages__grid{

        grid-template-columns:1fr;

    }

    .footer__grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .footer__bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer__links{

        flex-wrap:wrap;

        justify-content:center;

    }

}
/* ==========================================================
   576px
========================================================== */

@media (max-width:576px){

    .container{

        width:min(100% - 24px, var(--container));

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.25rem;

        line-height:1.15;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.25rem;

    }

    .hero__dashboard{

        padding:24px;

    }

    .strategy-card,
    .service-card,
    .process-card,
    .advantage-card,
    .academy-card,
    .testimonial-card{

        padding:28px 22px;

    }

    .strategy__quote{

        padding:45px 25px;

    }

    .contact__form-wrapper{

        padding:28px 22px;

    }

    .score-card{

        padding:28px 22px;

    }

    .score-circle{

        width:150px;

        height:150px;

    }

    .score-circle::before{

        width:115px;

        height:115px;

    }

    .score-circle__value{

        font-size:2.4rem;

    }

    .score-circle__text{

        font-size:.8rem;

        bottom:34px;

        width:100px;

    }

    .contact__icon{

        width:52px;

        height:52px;

        font-size:1.15rem;

    }

    .footer{

        padding-top:70px;

    }

}

/* ==========================================================
   ENDE RESPONSIVE.CSS
========================================================== */