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

#hero{

    padding:60px 0 120px;

    overflow:hidden;

}

#hero .container{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:80px;

    align-items:center;

}

/* ==========================================
   LEFT
========================================== */

.hero-content{

    z-index:2;

}

.hero-tagline{

    display:flex;

    align-items:center;

    gap:10px;

    color:#2563eb;

    font-size:18px;

    font-weight:700;

    margin-bottom:30px;

}

.hero-tagline i{

    font-size:20px;

}

.hero-content h1{

    font-size:84px;

    line-height:1.02;

    font-weight:800;

    color:#111827;

    letter-spacing:-3px;

    margin-bottom:34px;

}

.hero-content h1 span{

    color:#2563eb;

}

.hero-content p{

    font-size:24px;

    line-height:1.7;

    color:#6b7280;

    max-width:470px;

}

/* ==========================================
   RIGHT
========================================== */

.hero-right{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

}

/* Glow */

.hero-right::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:#2563eb;

    opacity:.08;

    filter:blur(170px);

    z-index:-1;

}

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

.hero-image{

    width:100%;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:100%;

    max-width:980px;

    border-radius:22px;

    /*transform:
        perspective(2200px)
        rotateY(-12deg)
        rotateX(4deg);*/

    transform-origin:center;

    transition:.45s ease;

    box-shadow:
        0 25px 70px rgba(251, 250, 250, 0.08),
        0 80px 120px rgba(250, 249, 249, 0.08);

}

.hero-image img:hover{

    transform:
        perspective(2200px)
        rotateY(-6deg)
        rotateX(2deg)
        translateY(-6px);

}

/* ==========================================
   BUTTONS
========================================== */

.hero-buttons{

    width:100%;

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:40px;

}

.hero-buttons a{

    min-width:190px;

    height:62px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:20px;

    font-weight:600;

    text-decoration:none;

}

.btn-primary{

    background:#2563eb;

    color:#ffffff;

    transition:.25s;

}

.btn-primary:hover{

    background:#1d4ed8;

}

.btn-secondary{

    background:#ffffff;

    color:#111827;

    border:1px solid #d1d5db;

    transition:.25s;

}

.btn-secondary:hover{

    background:#f8f8f8;

}

/* ==========================================
   BENEFITS
========================================== */

.hero-benefits{

    width:100%;

    display:flex;

    justify-content:center;

    gap:38px;

    flex-wrap:wrap;

    margin-top:28px;

}

.hero-benefits div{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:17px;

    color:#6b7280;

}

.hero-benefits i{

    color:#2563eb;

}