/* ==========================================
   Leonardo Villa LLC
   Coming Soon Landing Page
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#02131f;

    color:#fff;

    overflow-x:hidden;

}

/* ===========================
   BACKGROUND
=========================== */

body{

    background-image:
        linear-gradient(rgba(0,18,32,.55),rgba(0,18,32,.70)),
        url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

    min-height:100vh;

}

.overlay{

    position:fixed;

    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(0,20,40,.20),
        rgba(0,20,40,.60),
        rgba(0,20,40,.80));

    z-index:-1;

}

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

header{

    padding:40px 20px;

    text-align:center;

}

.logo{

    width:260px;

    max-width:85%;

    filter:drop-shadow(0 5px 15px rgba(0,0,0,.4));

    animation:fadeDown 1.3s ease;

}

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

.hero{

    min-height:calc(100vh - 180px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.glass{

    width:100%;

    max-width:900px;

    padding:55px;

    border-radius:24px;

    background:rgba(8,25,40,.45);

    backdrop-filter:blur(16px);

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

    box-shadow:0 20px 60px rgba(0,0,0,.35);

    text-align:center;

    animation:fadeUp 1.2s ease;

}

/* ===========================
   TEXT
=========================== */

.subtitle{

    display:block;

    color:#53d6ff;

    font-size:15px;

    letter-spacing:4px;

    font-weight:600;

    margin-bottom:18px;

}

h1{

    font-size:62px;

    line-height:1.05;

    font-weight:700;

    margin-bottom:25px;

}

.separator{

    width:90px;

    height:4px;

    background:#18bfff;

    margin:0 auto 30px;

    border-radius:20px;

}

p{

    color:#d8e5ef;

    font-size:19px;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}

/* ===========================
   SERVICES
=========================== */

.services{

    margin-top:45px;

    display:grid;

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

    gap:18px;

}

.service{

    padding:20px;

    border-radius:15px;

    background:rgba(255,255,255,.06);

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

    transition:.35s;

}

.service:hover{

    transform:translateY(-8px);

    background:rgba(24,191,255,.18);

}

.service i{

    font-size:34px;

    color:#18bfff;

    margin-bottom:15px;

}

.service span{

    display:block;

    font-size:15px;

}

/* ===========================
   CONTACT
=========================== */

.contact{

    margin-top:45px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:white;

    font-size:18px;

    font-weight:500;

    padding:18px;

    border-radius:50px;

    background:#18bfff;

    transition:.3s;

}

.contact a:hover{

    background:#36d0ff;

    transform:scale(1.03);

}

.contact i{

    font-size:20px;

}

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

footer{

    padding:30px;

    text-align:center;

    color:#d0dce5;

    font-size:14px;

    line-height:2;

}

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

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:900px){

.services{

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

}

h1{

    font-size:50px;

}

}

@media(max-width:700px){

.glass{

    padding:35px 25px;

}

.services{

    grid-template-columns:1fr;

}

h1{

    font-size:38px;

}

p{

    font-size:17px;

}

.contact a{

    font-size:15px;

    padding:15px;

}

.logo{

    width:200px;

}

.subtitle{

    letter-spacing:2px;

    font-size:13px;

}

}