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

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


html,
body{

    width:100%;
    min-height:100%;

}


body{

    min-height:100vh;

    display:flex;

    flex-direction:column;

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

    color:#ffffff;

    overflow-x:hidden;

    background:#000;

}


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


.hero{

    flex:1;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;


    padding:120px 20px 80px;


    background:

    linear-gradient(
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.65)
    ),

    url("https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=2000&q=80");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


/* ==================================
   LOGO
================================== */


.logo{

    position:absolute;

    top:35px;

    left:50px;


    font-size:28px;

    font-weight:700;

    letter-spacing:1px;

}


.logo span{

    color:#5eead4;

}



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


.container{

    width:90%;

    max-width:900px;

    text-align:center;

}


.tag{

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:5px;

    color:#5eead4;

    margin-bottom:25px;

}



h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(42px,6vw,75px);

    line-height:1.15;

    margin-bottom:25px;

}



.description{

    max-width:650px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#ddd;

}



/* ==================================
   COUNTDOWN
================================== */


.countdown{

    margin:45px 0;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}



.time{

    width:90px;

    padding:18px 10px;


    background:

    rgba(255,255,255,0.12);


    border:

    1px solid rgba(255,255,255,0.2);


    backdrop-filter:blur(10px);


    border-radius:10px;

}



.time strong{

    display:block;

    font-size:35px;

    font-weight:700;

}



.time span{

    display:block;

    margin-top:6px;

    font-size:12px;

    text-transform:uppercase;

    color:#ccc;

}



/* ==================================
   SUBSCRIBE FORM
================================== */


.subscribe{

    width:100%;

    max-width:550px;

    margin:auto;

    display:flex;

    overflow:hidden;

    border-radius:8px;


}



.subscribe input{

    flex:1;

    padding:18px;

    border:none;

    outline:none;

    font-size:16px;

}



.subscribe button{


    padding:0 35px;


    border:none;


    background:#5eead4;


    color:#062925;


    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}



.subscribe button:hover{

    background:#3dd8bd;

}



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


footer{


    width:100%;


    padding:20px 15px;


    text-align:center;


    background:rgba(0,0,0,0.85);


    color:#ccc;


    font-size:14px;


}



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


@media(max-width:768px){


    .logo{

        top:30px;

        left:30px;

        font-size:25px;

    }



    h1{

        font-size:48px;

    }



    .description{

        font-size:16px;

    }


}



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


@media(max-width:600px){


    .hero{

        min-height:auto;

        padding:

        120px 20px 60px;

    }



    .logo{

        top:25px;

        left:25px;

        font-size:23px;

    }



    .container{

        width:100%;

    }



    .tag{

        font-size:11px;

        letter-spacing:3px;

    }



    h1{

        font-size:36px;

        line-height:1.25;

    }



    .description{

        font-size:15px;

        line-height:1.6;

    }



    .countdown{

        margin:35px 0;

        gap:8px;

    }



    .time{

        width:70px;

        padding:12px 5px;

    }



    .time strong{

        font-size:24px;

    }



    .time span{

        font-size:10px;

    }



    .subscribe{


        flex-direction:column;


        gap:10px;


        border-radius:8px;


    }



    .subscribe input{


        width:100%;


        padding:16px;


    }



    .subscribe button{


        width:100%;


        padding:16px;


    }



    footer{


        position:relative;


        padding:20px 10px;


        font-size:12px;


    }


}