/*=========================================================
=                 RESPONSIVE CSS
=          Florida Sky Roofing
=========================================================*/


/*=========================================================
=                 TABLETS
=========================================================*/

@media (max-width:991px){

    .container{
        padding-left:25px;
        padding-right:25px;
    }

}


/*=========================================================
=                 MOBILE
=========================================================*/

@media (max-width:767px){

    html,
    body{
        overflow-x:hidden;
    }

    img{
        max-width:100%;
        height:auto;
    }

    .container{
        padding-left:18px;
        padding-right:18px;
    }

    section{
        overflow:visible;
    }

    /*=========================================
      HERO
    =========================================*/

    .hero{

        min-height:auto;

        padding:45px 0;

    }

    .hero > .container > .row{

        min-height:auto;

        row-gap:35px;

    }

    .hero-title{

        font-size:42px;

        line-height:1.08;

        text-align:center;

    }

    .hero-subtitle{

        text-align:center;

        font-size:18px;

    }

    .hero-badge{

        margin:0 auto 18px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons a{

        width:100%;

        max-width:280px;

    }

    .hero-features{

        justify-content:center;

        gap:12px;

        font-size:15px;

    }

    .hero-info{

        justify-content:center;

    }

    /*=========================================
      HERO FORM
    =========================================*/

    .hero-form-card{

        margin:0 auto;

        max-width:100%;

        padding:18px;

    }

    .hero-form-header h3{

        font-size:28px;

    }

    .hero-contact-form .form-control,
    .hero-contact-form .form-select{

        height:48px;

        font-size:15px;

    }

    .hero-contact-form textarea.form-control{

        min-height:95px;

    }

    .hero-contact-form .btn-primary-custom{

        width:100%;

    }

}


/*=========================================================
=                 SMALL MOBILE
=========================================================*/

@media (max-width:576px){

    .container{

        padding-left:15px;

        padding-right:15px;

    }

    .hero-title{

        font-size:34px;

    }

    .hero-subtitle{

        font-size:16px;

    }

    .hero-form-card{

        border-radius:16px;

    }

}