/* ===========================================================
   NEW HORIZONS HEALTH MORE FORMULATIONS
   Landing Page v1.2
   =========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#F8F8F8;
    color:#444;
    overflow-x:hidden;
}

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

.hero{

    background:
    linear-gradient(
        rgba(255,255,255,.52),
        rgba(255,255,255,.60)
    ),
    url("../img/hero.jpg");

    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;

    min-height:72vh;

    display:flex;
    justify-content:center;
    align-items:center;

}

.overlay{

    width:100%;
    max-width:1180px;

    margin:auto;

    text-align:center;

    /* antes: padding:20px 30px 60px; */
    padding:10px 30px 70px;

    position:relative;
    top:-50px;

}

.logo{

    width:420px;

    max-width:95%;

    margin-bottom:25px;

}

.hero h1{

    color:#640F52;

    font-size:60px;

    line-height:1.08;

    font-weight:700;

    margin-top:0;

    margin-bottom:25px;

}

}

.hero p{

    color:#4A4A4A;

    font-size:22px;

    line-height:1.8;

    font-weight:500;

    max-width:900px;

    margin:auto;

}

/* ===========================================================
   BOTONES
   =========================================================== */

.botones{

    margin-top:45px;

}

.btn{

    display:inline-block;

    padding:18px 38px;

    margin:8px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    font-size:17px;

    transition:.30s;

}

.naranja{

    background:#F89206;

    color:#FFF;

}

.naranja:hover{

    background:#E86F06;

}

.morado{

    background:#640F52;

    color:#FFF;

}

.morado:hover{

    background:#81185C;

}

.btn:hover{

    transform:translateY(-4px);

}

/* ===========================================================
   CONTACTO
   =========================================================== */

.contacto{

    max-width:1400px;

    margin:80px auto;

    padding:0 20px;

    text-align:center;

}

.contacto img{

    width:100%;

    max-width:1180px;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.10);

    transition:.35s;

}

.contacto img:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 60px rgba(0,0,0,.16);

}

/* ===========================================================
   FOOTER
   =========================================================== */

footer{

    background:#640F52;

    color:#FFF;

    padding:50px 25px;

    margin-top:70px;

    text-align:center;

}

.footer-contenido{

    max-width:900px;

    margin:auto;

}

.footer-contenido strong{

    display:block;

    font-size:24px;

    margin-bottom:12px;

}

.footer-contenido p{

    margin:8px 0;

    line-height:1.8;

}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media(max-width:992px){

.logo{

    width:280px;

    top:-30px;

}

.hero h1{

    font-size:46px;

    margin-top:-15px;

}

.hero p{

    font-size:19px;

}

}

@media(max-width:768px){

.hero{

    min-height:auto;

}

.overlay{

    padding:50px 25px;

}

.logo{

    width:220px;

    top:0;

    margin-bottom:25px;

}

.hero h1{

    font-size:34px;

    margin-top:0;

}

.hero p{

    font-size:17px;

}

.btn{

    display:block;

    width:240px;

    margin:15px auto;

}

.contacto{

    margin:50px auto;

}

.contacto img{

    max-width:100%;

}

footer{

    margin-top:50px;

}

}

@media(max-width:480px){

.logo{

    width:180px;

}

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:16px;

}

}