/*==================================================
URBAN BEAST GYM
CONTACTO.CSS
PARTE 1
HERO + INTRO + INFORMACIÓN
==================================================*/


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

.hero-contact{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-contact video{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    animation:videoVertical 20s ease-in-out infinite alternate;

}

.hero-contact .overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.82),
        rgba(0,0,0,.45)
    );

}

.hero-contact-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1300px;

    text-align:center;

}


/*==================================================
TÍTULO
==================================================*/

.contact-title{

    width:100%;

    max-width:850px;

    margin:auto;

    animation:fadeHero 1.2s ease;

}

.contact-title img{

    width:100%;

    display:block;

    transition:.45s;

}

.contact-title img:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 30px rgba(225,6,0,.45));

}


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

.hero-contact-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

}


/*==================================================
INTRO
==================================================*/

.contact-intro{

    background:#080808;

    padding:90px 8%;

    text-align:center;

}

.contact-intro h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:68px;

    letter-spacing:3px;

    margin-bottom:25px;

}

.contact-intro p{

    max-width:920px;

    margin:auto;

    color:#c7c7c7;

    font-size:18px;

    line-height:1.9;

}


/*==================================================
SECCIÓN INFORMACIÓN
==================================================*/

.contact-info{

    background:#050505;

    padding:100px 8%;

}


/*==================================================
TÍTULO
==================================================*/

.contact-heading{

    display:flex;

    justify-content:center;

    margin-bottom:70px;

}

.contact-heading img{

    width:100%;

    max-width:700px;

    transition:.45s;

}

.contact-heading img:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 35px rgba(225,6,0,.40));

}


/*==================================================
GRID
==================================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}


/*==================================================
CARD
==================================================*/

.contact-card{

    position:relative;

    background:linear-gradient(
        180deg,
        #181818,
        #0b0b0b
    );

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    overflow:hidden;

    transition:.45s ease;

}


/*==================================================
BRILLO
==================================================*/

.contact-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.05),
        transparent
    );

    transform:translateX(-120%);

    transition:1s;

}

.contact-card:hover::before{

    transform:translateX(120%);

}


/*==================================================
HOVER
==================================================*/

.contact-card:hover{

    transform:translateY(-12px);

    border-color:rgba(225,6,0,.45);

    box-shadow:

        0 20px 45px rgba(225,6,0,.18);

}


/*==================================================
ICONO
==================================================*/

.contact-card i{

    font-size:62px;

    color:var(--red);

    margin-bottom:25px;

    transition:.35s;

}

.contact-card:hover i{

    transform:scale(1.15);

    color:#ff2b2b;

}


/*==================================================
TÍTULO CARD
==================================================*/

.contact-card h3{

    font-family:'Bebas Neue';

    font-size:34px;

    letter-spacing:2px;

    margin-bottom:18px;

}


/*==================================================
TEXTO
==================================================*/

.contact-card p{

    color:#c8c8c8;

    line-height:1.9;

    font-size:17px;

}


/*==================================================
ANIMACIÓN ICONOS
==================================================*/

.contact-card i{

    animation:iconFloat 3s ease-in-out infinite;

}

@keyframes iconFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
URBAN BEAST GYM
CONTACTO.CSS
PARTE 2
FORMULARIO + MAPA + REDES + CTA + RESPONSIVE
==================================================*/


/*==================================================
FORMULARIO
==================================================*/

.contact-form-section{

    background:#090909;

    padding:100px 8%;

}

.contact-form-title{

    display:flex;

    justify-content:center;

    margin-bottom:70px;

}

.contact-form-title img{

    width:100%;

    max-width:700px;

    transition:.45s;

}

.contact-form-title img:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 30px rgba(225,6,0,.35));

}


/*==================================================
CONTENEDOR
==================================================*/

.contact-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;

    margin-top:-90px;

}


/*==================================================
FORMULARIO
==================================================*/

.contact-form{

    background:linear-gradient(
        180deg,
        #171717,
        #0b0b0b
    );

    border-radius:25px;

    padding:45px;

    border:1px solid rgba(255,255,255,.08);

}

.form-group{

    margin-bottom:22px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:15px;

    color:#fff;

    font-size:16px;

    transition:.35s;

}

.contact-form textarea{

    resize:none;

}

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--red);

    box-shadow:0 0 18px rgba(225,6,0,.25);

}

.contact-form .btn-red{

    width:100%;

    justify-content:center;

}


/*==================================================
MAPA
==================================================*/

.contact-map{

    overflow:hidden;

    border-radius:25px;

    border:2px solid rgba(225,6,0,.25);

    box-shadow:0 20px 45px rgba(0,0,0,.40);

}

.contact-map iframe{

    width:100%;

    height:650px;

    border:0;

}


/*==================================================
REDES
==================================================*/

.social-contact{

    background:#050505;

    padding:100px 8%;

}

.social-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

    margin-top:60px;

}

.social-card{

    background:linear-gradient(
        180deg,
        #171717,
        #0a0a0a
    );

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:45px;

    text-align:center;

    color:#fff;

    transition:.45s;

}

.social-card:hover{

    transform:translateY(-12px);

    border-color:rgba(225,6,0,.45);

    box-shadow:0 20px 45px rgba(225,6,0,.20);

}

.social-card i{

    font-size:70px;

    color:var(--red);

    margin-bottom:20px;

}

.social-card h3{

    font-family:'Bebas Neue';

    font-size:36px;

    margin-bottom:10px;

}

.social-card span{

    color:#c8c8c8;

}


/*==================================================
CTA FINAL
==================================================*/

.contact-final{

    position:relative;

    background:url("../img/fondo.jpg") center center/cover fixed;

    padding:35px 8%;

    overflow:hidden;

}

.contact-final::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

}

.contact-final .container{

    position:relative;

    z-index:2;

}

.contact-final-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}


/*==================================================
IMAGEN CTA
==================================================*/

.contact-final-image{

    width:100%;

    max-width:1400px;

    height:260px;

    background:url("../img/contactanos.png") center center no-repeat;

    background-size:contain;

    margin-bottom:10px;

    transition:.45s;

    filter:drop-shadow(0 0 30px rgba(225,6,0,.35));

}

.contact-final-image:hover{

    transform:scale(1.02);

}


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

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:-35px;

    flex-wrap:wrap;

}

.contact-buttons .btn-red,
.contact-buttons .btn-transparent{

    min-width:190px;

    height:50px;

    font-size:15px;

}


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

@media(max-width:992px){

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-map iframe{

    height:450px;

}

.contact-buttons{

    flex-direction:column;

    align-items:center;

}

}


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

@media(max-width:768px){

.hero-contact{

    text-align:center;

}

.hero-contact-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-contact-buttons a{

    width:230px;

}

.contact-intro h2{

    font-size:42px;

}

.contact-heading img,
.contact-form-title img{

    max-width:95%;

}

.contact-form{

    padding:30px;

}

.contact-map iframe{

    height:350px;

}

.contact-final-image{

    height:180px;

}

.contact-buttons{

    margin-top:10px;

}

}


/*==================================================
CELULARES PEQUEÑOS
==================================================*/

@media(max-width:480px){

.contact-intro h2{

    font-size:34px;

}

.contact-card{

    padding:30px;

}

.contact-card h3{

    font-size:28px;

}

.contact-card i{

    font-size:50px;

}

.contact-final-image{

    height:140px;

}

}
/*=====================================
TÍTULO REDES PREMIUM
======================================*/

.social-heading{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:60px;

}

.social-heading img{

    width:100%;

    max-width:900px;

    height:auto;

    display:block;

    transition:.45s ease;

    filter:drop-shadow(0 0 30px rgba(225,6,0,.35));

}

.social-heading img:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 0 45px rgba(225,6,0,.50));

}
@media(max-width:768px){

    .social-heading{

        margin-bottom:35px;

    }

    .social-heading img{

        max-width:100%;

    }

}