/* ======================================================
   CRD BERLIN
   RESPONSIVE STYLES
====================================================== */

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

@media (max-width:1200px){

    .container{

        width:min(94%,1100px);

    }

    .hero h1{

        font-size:4.8rem;

    }

    .about-grid{

        gap:60px;

    }

    .services-grid{

        gap:28px;

    }

    .approach-grid{

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

    }

    .footer-grid{

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

        gap:50px;

    }

}

/* ===========================
   992px
=========================== */

@media (max-width:992px){

    .section{

        padding:90px 0;

    }

    .header-container{

        height:80px;

    }

    .navigation{

        position:fixed;

        top:80px;

        right:-100%;

        width:300px;

        height:calc(100vh - 80px);

        background:#111;

        transition:.4s;

        padding:50px 35px;

    }

    .navigation.active{

        right:0;

    }

    .navigation ul{

        flex-direction:column;

        gap:30px;

    }

    .navigation a{

        color:#fff !important;

        font-size:1.05rem;

    }

    .mobile-toggle{

        display:flex;

        flex-direction:column;

        justify-content:space-between;

        width:28px;

        height:20px;

        cursor:pointer;

        background:none;

        border:none;

    }

    .mobile-toggle span{

        display:block;

        width:100%;

        height:2px;

        background:#fff;

        transition:.3s;

    }

    .header.scrolled .mobile-toggle span{

        background:#111;

    }

    .header-button{

        display:none;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-image{

        max-width:650px;

        margin:auto;

    }

    .about-content{

        text-align:center;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .approach-grid{

        grid-template-columns:1fr 1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-information{

        order:2;

    }

    .contact-form-container{

        order:1;

    }

}

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

@media (max-width:768px){

    .section{

        padding:75px 0;

    }

    .hero{

        min-height:90vh;

    }

    .hero h1{

        font-size:3.4rem;

    }

    .hero p{

        font-size:1rem;

    }

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:2.2rem;

    }

    .services-cta{

        padding:60px 30px;

    }

    .services-cta h3{

        font-size:1.8rem;

    }

    .approach-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 25px;

    }

    .footer-column ul{

        align-items:center;

    }

    .back-to-top{

        width:50px;

        height:50px;

        right:20px;

        bottom:20px;

    }

    .whatsapp-button{

        width:58px;

        height:58px;

        left:20px;

        bottom:20px;

    }

}

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

@media (max-width:576px){

    .hero{

        padding-top:90px;

    }

    .hero h1{

        font-size:2.7rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

    .contact-form-container{

        padding:35px 25px;

    }

    .contact-item{

        padding:25px;

    }

    .services-cta{

        padding:45px 20px;

    }

    .cta-content h2{

        font-size:2rem;

    }

    .scroll-indicator{

        display:none;

    }

}