/* =========================================

ABOUT PAGE RESPONSIVE

========================================= */

/* Laptop */

@media (max-width: 1400px){

    .about-hero h1{

        font-size:64px;

    }

}

/* Tablet */

@media (max-width: 1024px){

    .about-hero{

        padding:140px 0 100px;

    }

    .about-hero .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-hero-content{

        text-align:center;

    }

    .about-hero p{

        margin:0 auto;

    }

    .about-hero-buttons{

        justify-content:center;

    }

    .about-hero-visual{

        order:-1;

    }

    .about-hero h1{

        font-size:56px;

    }

}

/* Mobile */

@media (max-width: 768px){

    .about-hero{

        padding:120px 0 80px;

    }

    .about-hero h1{

        font-size:42px;

        line-height:1.15;

    }

    .about-hero p{

        font-size:18px;

    }

    .about-hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .about-hero-buttons .btn-primary,
    .about-hero-buttons .btn-secondary{

        width:100%;

        max-width:280px;

        text-align:center;

    }

}

/* Small Mobile */

@media (max-width: 480px){

    .about-hero{

        padding:100px 0 60px;

    }

    .about-hero h1{

        font-size:34px;

    }

    .about-hero p{

        font-size:16px;

        line-height:1.7;

    }

}


@media(max-width:1200px){

    .about-hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .about-hero{

        padding:120px 0 80px;

    }

    .about-hero h1{

        font-size:48px;

    }

    .about-hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .image-placeholder{

        height:350px;

    }

}

@media(max-width:480px){

    .about-hero h1{

        font-size:36px;

    }

}