/* =====================================
   MoTow Premium Website
   styles-base.css
   Black / Grey / White Theme
===================================== */


/* ---------- VARIABLES ---------- */

:root{

    --black:#080808;
    --dark:#111111;
    --charcoal:#181818;
    --grey:#2b2b2b;
    --light-grey:#a9a9a9;
    --white:#ffffff;

    --border:rgba(255,255,255,.12);

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

    --radius:18px;

    --transition:.35s ease;

}



/* ---------- RESET ---------- */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--black);

    color:var(--white);

    font-family:'Inter',Arial,sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

}



/* ---------- CONTAINER ---------- */


.container{

    width:min(92%,1200px);

    margin:auto;

}



/* ---------- TYPOGRAPHY ---------- */


h1,
h2,
h3{

    line-height:1.15;

    font-weight:800;

}


h1{

    font-size:clamp(2.8rem,6vw,5.5rem);

    letter-spacing:-2px;

}


h2{

    font-size:clamp(2rem,4vw,3.2rem);

    text-align:center;

    margin-bottom:20px;

}


h3{

    font-size:1.35rem;

}


p{

    color:var(--light-grey);

}



/* ---------- SECTION ---------- */


.section{

    padding:100px 0;

}


.section-text{

    text-align:center;

    max-width:650px;

    margin:0 auto 50px;

    font-size:1.1rem;

}



/* ---------- BUTTONS ---------- */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

}



.btn-white{

    background:var(--white);

    color:var(--black);

}


.btn-white:hover{

    transform:translateY(-4px);

    background:#ddd;

}



.btn-outline{

    border:2px solid var(--white);

    color:var(--white);

}


.btn-outline:hover{

    background:var(--white);

    color:var(--black);

}



/* ---------- CARDS ---------- */


.card{

    background:var(--charcoal);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

}


.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}



/* ---------- DARK SECTION ---------- */


.dark-section{

    background:var(--dark);

}



/* ---------- FLOATING CALL ---------- */


.floating-call{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:white;

    color:black;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:bold;

    box-shadow:var(--shadow);

    z-index:999;

    transition:.3s;

}


.floating-call:hover{

    transform:scale(1.1);

}



/* ---------- FORM ---------- */


input,
textarea{

    width:100%;

    background:#1b1b1b;

    color:white;

    border:1px solid var(--border);

    padding:18px;

    border-radius:12px;

    font-size:16px;

}


input:focus,
textarea:focus{

    outline:none;

    border-color:white;

}


textarea{

    min-height:160px;

    resize:vertical;

}



/* ---------- SCROLLBAR ---------- */


::-webkit-scrollbar{

    width:12px;

}


::-webkit-scrollbar-track{

    background:#111;

}


::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:#888;

}



/* ---------- SELECTION ---------- */


::selection{

    background:white;

    color:black;

}