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

.hero{

    min-height:108vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:var(--dark);

}

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

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

    filter:blur(140px);

    top:-250px;

    right:-200px;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.badge{

    display:inline-block;

    background:rgba(0,120,212,.15);

    color:#4FC3F7;

    padding:10px 18px;

    border-radius:30px;

    margin-bottom:25px;

}

.hero h3{

    font-size:1.3rem;

    color:#A5B4FC;

}

.hero h1{

    font-size:4.6rem;

    margin:10px 0;

    line-height:1.1;

}

.hero h1 span{

    color:var(--primary);

}

.hero h2{

    color:#94A3B8;

    margin-bottom:20px;

    font-size:2rem;

}

.hero p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:35px;

}

.social-links{

    display:flex;

    gap:18px;

}

.social-links a{

    width:50px;

    height:50px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#121C2D;

    transition:.35s;

}

.social-links a:hover{

    background:var(--primary);

    transform:translateY(-6px);

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.image-card{

    width:400px;

    border-radius:30px;

    overflow:hidden;

    background:var(--card);

    padding:15px;

    box-shadow:var(--shadow);

}

.image-card img{

    border-radius:20px;

}

.floating{

    position:absolute;

    width:65px;

    height:65px;

    border-radius:18px;

    background:var(--card);

    display:grid;

    place-items:center;

    font-size:1.7rem;

    animation:float 4s ease-in-out infinite;

}


.floating img{

    width:32px;

    height:32px;

    object-fit:contain;

}