/* OFAMELO - responsive.css */

.menu-btn{

    display:none;

    cursor:pointer;

    font-size:30px;

    color:#fff;

}

/* Large tablets */
@media (max-width:1100px){
  .hero-content h1{font-size:60px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats .container{grid-template-columns:repeat(2,1fr)}
}

/* Tablets / Móviles */
@media (max-width:768px){

    header{

        padding:14px 0;

    }


    /* MENU MOVIL */

    .main-nav{

        position:fixed;

        top:80px;

        right:-100%;

        width:280px;

        height:calc(100vh - 80px);

        background:#003A70;

        transition:.35s ease;

        box-shadow:0 10px 30px rgba(0,0,0,.25);

        z-index:9999;

        padding:30px;

    }


    .main-nav.active{

        right:0;

    }


    .main-nav ul{

        display:flex;

        flex-direction:column;

        gap:25px;

        padding:0;

        margin:0;

    }


    .main-nav li{

        list-style:none;

    }


    .main-nav a{

        color:white;

        font-size:18px;

        font-weight:500;

    }


    .main-nav a:hover{

        color:#d4af37;

    }


    .menu-btn{

        display:block;

        color:white;

        font-size:30px;

        cursor:pointer;

        z-index:10000;

    }



    /* HERO */

    .hero{

        height:85vh;

    }


    .hero-content h1{

        font-size:48px;

    }


    .hero-content h3{

        font-size:22px;

    }


    .hero-content p{

        font-size:18px;

    }



    /* CARDS */

    .cards,
    .team-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }



    /* ESTADISTICAS */

    .stats .container{

        grid-template-columns:1fr 1fr;

        gap:25px;

    }



    .cta h2{

        font-size:34px;

    }

}



/* Phones */
@media (max-width:480px){
  .container{width:94%}
  .hero-content h1{font-size:38px;letter-spacing:2px}
  .hero-content p{font-size:16px}
  .btn-primary{
    padding:14px 28px;
    font-size:16px;
  }
  h2{font-size:2rem}
  .card{padding:30px}
  .member img{
    width:140px;
    height:140px;
  }
  .stats .container{
    grid-template-columns:1fr;
  }
  .stats h2{font-size:44px}
  .whatsapp,.top{
    right:18px;
  }
}



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

@media (max-width:992px){

.container{

    width:92%;

}

.hero{

    min-height:70vh;

}

.hero h1{

    font-size:48px;

}

.cards{

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

}

.stats .container{

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

    gap:40px;

}

.lawyers-grid{

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

}

.profile-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-side{

    position:relative;

    top:0;

}

.contact-cards{

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

}

}


/*=========================================================
MOVILES
=========================================================*/

@media (max-width:76800px){

.container{

    width:94%;

}

/* HERO */

.hero{

    min-height:60vh;

    padding:140px 0 90px;

}

.hero h1{

    font-size:38px;

    line-height:1.2;

}

.hero p{

    font-size:18px;

}

/* TITULOS */

.section-title h2{

    font-size:34px;

}

.section-title p{

    font-size:17px;

}

/* CARDS */

.cards{

    grid-template-columns:1fr;

}

.contact-cards{

    grid-template-columns:1fr;

}

.stats .container{

    grid-template-columns:1fr;

}

.lawyers-grid{

    grid-template-columns:1fr;

}

.team-grid{

    grid-template-columns:1fr;

}

.profile-grid{

    grid-template-columns:1fr;

}

/* FORMULARIOS */

.form-row{

    grid-template-columns:1fr;

}

.contact-form-box{

    padding:30px;

}

.contact-side{

    padding:30px;

}

/* MAPA */

#map{

    height:420px;

}

/* CTA */

.cta h2{

    font-size:34px;

}


    .menu-btn{

        display:block;

    }

}



/*=========================================================
MOVILES PEQUEÑOS
=========================================================*/

@media (max-width:576px){

.hero{

    padding:120px 0 70px;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:16px;

}

.btn-primary{

    width:100%;

    text-align:center;

}

.card{

    padding:30px;

}

.contact-form-box{

    padding:25px;

}

.contact-side{

    padding:25px;

}

.contact-form input,

.contact-form textarea,

.contact-form select{

    font-size:15px;

}

.profile-photo img{

    width:240px;

    height:240px;

}

.stats h2{

    font-size:48px;

}

}