/* ==========================================================
   GOOGLE FONT
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================================
   RESET
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#111;
    color:#fff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

:root{

    --primary:#4caf50;
    --secondary:#ffd33d;
    --dark:#111111;
    --dark2:#1d1d1d;
    --white:#ffffff;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{
    max-width:1320px;
    margin:auto;
    padding:0 24px;
}

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

.header{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:28px 0;

}

.navbar{
    padding:0;
}

.navbar-brand{

    display:flex;
    align-items:center;
    gap:12px;

    color:#ffd33d !important;

    font-size:30px;
    font-weight:800;

}

.navbar-brand i{
    font-size:28px;
}

.navbar-nav{

    gap:35px;

}

.nav-link{

    color:#fff !important;

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    transition:.3s;

}

.nav-link:hover{

    color:#ffd33d !important;

}

.navbar-toggler{

    border:0;

    box-shadow:none !important;

}

.navbar-toggler-icon{

    filter:invert(1);

}

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

.hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:#111;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:url("../images/bg.jpg") center center/cover no-repeat;

    filter:brightness(.28);

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.15),
        rgba(0,0,0,.45),
        rgba(0,0,0,.78)
    );

    z-index:1;

}

/* ==========================================================
   SHAPE
========================================================== */

.hero-shape-left{

    position:absolute;

    left:-170px;

    top:0;

    width:430px;

    height:100%;

    background:#4caf50;

    transform:skewX(-20deg);

    z-index:2;

}

.hero-shape-center{

    position:absolute;

    left:235px;

    top:0;

    width:155px;

    height:100%;

    background:#111;

    transform:skewX(-20deg);

    z-index:3;

}

.hero-shape-right{

    position:absolute;

    right:-250px;

    top:0;

    width:58%;

    height:100%;

    background:#232323;

    transform:skewX(-20deg);

    z-index:2;

}

.hero::after{

    content:"";

    position:absolute;

    left:330px;

    top:0;

    width:5px;

    height:100%;

    background:#ffd33d;

    transform:skewX(-20deg);

    z-index:4;

}

/* ==========================================================
   WRAPPER
========================================================== */

.hero-wrapper{

    position:relative;

    z-index:10;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

.hero-left{

    width:45%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    position:relative;

}

.hero-right{

    width:55%;

    display:flex;

    justify-content:flex-end;

}

.hero-content{

    width:100%;

    max-width:610px;

}

/* ==========================================================
   PLAYER
========================================================== */

.hero-player{

    position:relative;

    z-index:10;

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

.hero-player::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(76,175,80,.28);

    filter:blur(90px);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:-1;

}

.hero-player::after{

    content:"";

    position:absolute;

    bottom:-22px;

    left:50%;

    transform:translateX(-50%);

    width:240px;

    height:24px;

    border-radius:50%;

    background:rgba(0,0,0,.55);

    filter:blur(18px);

    z-index:-2;

}

.hero-player img{

    width:100%;

    max-width:560px;

    object-fit:contain;

    filter:
        drop-shadow(0 20px 35px rgba(0,0,0,.45))
        drop-shadow(0 0 45px rgba(76,175,80,.18));

    animation:floating 5s ease-in-out infinite;

    transition:.35s;

}

.hero-player img:hover{

    transform:translateY(-8px) scale(1.02);

}

/* ==========================================================
   CONTENT
========================================================== */

.hero-top{

    display:inline-block;

    color:#ffd33d;

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.hero-content h1{

    font-size:92px;

    line-height:.92;

    font-weight:900;

    text-transform:uppercase;

    margin-bottom:24px;

    text-shadow:0 6px 18px rgba(0,0,0,.35);

}

.hero-content h1 span{

    color:#ffd33d;

    display:block;

    position:relative;

}

.hero-content h1 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:120px;

    height:5px;

    border-radius:30px;

    background:#ffd33d;

}

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

.hero-button{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-primary-custom{

    width:230px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border-radius:50px;

    background:#ffd33d;

    color:#111;

    font-weight:700;

    overflow:hidden;

    position:relative;

    transition:.35s;

}

.btn-primary-custom::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transition:.8s;

}

.btn-primary-custom:hover{

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(255,211,61,.35);

}

.btn-primary-custom:hover::before{

    left:120%;

}

.btn-secondary-custom{

    width:185px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border:2px solid #fff;

    border-radius:50px;

    color:#fff;

    backdrop-filter:blur(8px);

    transition:.35s;

}

.btn-secondary-custom:hover{

    background:#fff;

    color:#111;

    box-shadow:0 0 25px rgba(255,255,255,.18);

}

.mobile-login{

    display:none;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes floating{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1400px){

    .hero-content h1{
        font-size:76px;
    }

    .hero-player img{
        max-width:500px;
    }

    .hero-content{
        max-width:560px;
    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    /* ---------------- HEADER ---------------- */

    .header{

        position:fixed;

        top:0;

        left:0;

        width:100%;

        padding:18px 0;

        background:rgba(17,17,17,.95);

        backdrop-filter:blur(14px);

    }

    .navbar-collapse{

        margin-top:18px;

        padding:25px;

        border-radius:20px;

        background:#1d1d1d;

    }

    .navbar-nav{

        gap:14px;

        text-align:center;

    }

    .nav-link{

        padding:10px 0;

    }

    /* ---------------- HERO ---------------- */

    .hero{

        min-height:auto;

        padding-top:130px;

        padding-bottom:70px;

    }

    .hero-wrapper{

        min-height:auto;

        flex-direction:column;

        gap:50px;

        text-align:center;

    }

    .hero-left{

        width:100%;

        order:1;

        justify-content:center;

    }

    .hero-right{

        width:100%;

        order:2;

        justify-content:center;

    }

    .hero-content{

        max-width:700px;

        margin:auto;

    }

    .hero-player img{

        max-width:380px;

    }

    .hero-player::before{

        width:300px;

        height:300px;

        filter:blur(70px);

    }

    .hero-content h1{

        font-size:58px;

    }

    .hero-content h1 span::after{

        left:50%;

        transform:translateX(-50%);

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

        font-size:17px;

        line-height:30px;

    }

    .hero-button{

        justify-content:center;

    }

    /* ---------------- SHAPE ---------------- */

    .hero-shape-left,

    .hero-shape-center,

    .hero-shape-right,

    .hero::after{

        display:none;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .hero{

        min-height:auto;

        padding-top:95px;

        padding-bottom:40px;

    }

    .container{

        padding:0 18px;

    }

    .hero-wrapper{

        gap:25px;

    }

    /* PLAYER */

    .hero-left{

        width:100%;

    }

    .hero-player{

        justify-content:center;

    }

    .hero-player::before{

        width:210px;

        height:210px;

        filter:blur(45px);

    }

    .hero-player::after{

        width:170px;

        height:18px;

        bottom:-14px;

    }

    .hero-player img{

        width:auto;

        height:260px;

        max-width:none;

        object-fit:contain;

    }

    /* CONTENT */

    .hero-right{

        width:100%;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

    }

    .hero-top{

        font-size:12px;

        letter-spacing:3px;

        margin-bottom:10px;

    }

    .hero-content h1{

        font-size:42px;

        margin-bottom:18px;

    }

    .hero-content h1 span::after{

        width:80px;

    }

    .hero-content p{

        font-size:15px;

        line-height:28px;

        margin:22px auto 30px;

        max-width:100%;

    }

    /* BUTTON */

    .hero-button{

        justify-content:center;

    }

    .btn-primary-custom{

        width:100%;

        max-width:300px;

        height:56px;

    }

    .btn-secondary-custom{

        display:none;

    }

    .mobile-login{

        display:block;

        margin-top:18px;

        color:#d6d6d6;

        font-size:15px;

    }

    .mobile-login a{

        color:#ffd33d;

        font-weight:700;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .navbar-brand{

        font-size:22px;

    }

    .navbar-brand i{

        font-size:22px;

    }

    .hero{

        padding-top:90px;

        padding-bottom:35px;

    }

    .hero-wrapper{

        gap:18px;

    }

    .hero-player img{

        height:220px;

    }

    .hero-player::before{

        width:170px;

        height:170px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:14px;

        line-height:24px;

    }

    .btn-primary-custom{

        height:52px;

        font-size:15px;

        max-width:260px;

    }

    .mobile-login{

        font-size:14px;

    }

}

/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    .hero-content h1{

        font-size:110px;

    }

    .hero-player img{

        max-width:620px;

    }

}

/* ==========================================================
   SMOOTH ANIMATION
========================================================== */

.hero-left{

    animation:fadeLeft .9s ease;

}

.hero-right{

    animation:fadeRight .9s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}