/* =====================================
   MoTow Premium Website
   styles-components.css
   Premium Visual Components
===================================== */


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


.hero-content h1{

    animation:fadeUp .9s ease forwards;

}


.hero-content p{

    animation:fadeUp 1.1s ease forwards;

}



.hero-buttons{

    animation:fadeUp 1.3s ease forwards;

}



.hero-tag{

    animation:fadeUp .7s ease forwards;

}



/* =========================
   ANIMATIONS
========================= */


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes pulse{

    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }


    100%{

        transform:scale(1);

    }

}



/* =========================
   HEADER EFFECTS
========================= */


.header-call{

    position:relative;

    overflow:hidden;

}


.header-call::before{

    content:"";

    position:absolute;

    inset:0;

    background:white;

    transform:translateX(-110%);

    transition:.4s;

}


.header-call:hover::before{

    transform:translateX(0);

}


.header-call{

    z-index:1;

}


.header-call:hover{

    color:black;

}


.header-call{

    isolation:isolate;

}



/* =========================
   SERVICE CARDS
========================= */


.card{

    position:relative;

    overflow:hidden;

}



.card::after{

    content:"";

    position:absolute;

    width:100%;

    height:3px;

    bottom:0;

    left:0;

    background:white;

    transform:scaleX(0);

    transition:.35s;

}


.card:hover::after{

    transform:scaleX(1);

}



.card h3{

    margin-bottom:15px;

    color:white;

}



.card p{

    color:#aaa;

}



/* =========================
   AREA CARDS
========================= */


.area-grid div{

    transition:.35s;

}


.area-grid div:hover{

    background:white;

    color:black;

    transform:translateY(-8px);

}



/* =========================
   GALLERY EFFECTS
========================= */


.gallery{

    overflow:hidden;

}


.gallery img{

    transition:.45s;

}


.gallery img:hover{

    transform:scale(1.06);

    filter:brightness(.75);

}



/* =========================
   REVIEWS
========================= */


.review{

    transition:.35s;

}


.review:hover{

    transform:translateY(-10px);

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

}



.review{

    color:white;

}


.review:first-letter{

    color:white;

}



/* =========================
   FORM BUTTON
========================= */


.contact-form button{

    border:none;

    font-size:18px;

}



.contact-form button:hover{

    transform:translateY(-4px);

}



/* =========================
   FLOATING CALL
========================= */


.floating-call{

    animation:pulse 2.5s infinite;

}



/* =========================
   IMAGE LOADING
========================= */


.gallery img,
.hero{

    background-color:#111;

}



/* =========================
   MOBILE MENU READY
========================= */


.nav.open{

    display:flex;

    position:absolute;

    top:90px;

    left:0;

    width:100%;

    background:#080808;

    padding:30px;

    flex-direction:column;

    text-align:center;

}



/* =========================
   SMALL DETAILS
========================= */


::placeholder{

    color:#777;

}


.card,
.review,
.area-grid div{

    backdrop-filter:blur(10px);

}



/* =========================
   PREMIUM DIVIDERS
========================= */


.section h2{

    position:relative;

}


.section h2::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    background:white;

    margin:18px auto 0;

}



/* =========================
   END COMPONENTS
========================= */