/* ==========================================================
   The Gift Shop - Responsive Styles
   responsive.css
========================================================== */

/* Large Desktop (1600px+) */
@media (min-width:1600px){

    .glass-card{
        width:900px;
        padding:80px;
    }

    .glass-card h1{
        font-size:72px;
    }

    .glass-card p{
        font-size:22px;
    }

    .time-box{
        width:135px;
    }

    .time-box span{
        font-size:50px;
    }

}

/* Laptop */

@media (max-width:1200px){

    header{
        left:40px;
    }

    #music-btn{
        right:35px;
    }

    .glass-card{
        width:90%;
        padding:60px;
    }

    .glass-card h1{
        font-size:48px;
    }

}

/* Tablet Landscape */

@media (max-width:992px){

    body{
        overflow-y:auto;
    }

    header{

        position:relative;

        left:0;

        top:20px;

        display:flex;

        justify-content:center;

        margin-bottom:30px;

    }

    .hero{

        height:auto;

        min-height:100vh;

        padding:30px 20px 80px;

    }

    .glass-card{

        width:100%;

        padding:45px;

    }

    .glass-card h1{

        font-size:42px;

    }

    .glass-card p{

        font-size:17px;

        line-height:30px;

    }

    .countdown{

        flex-wrap:wrap;

        gap:15px;

    }

    .time-box{

        width:140px;

    }

    #music-btn{

        top:20px;

        right:20px;

        padding:12px 22px;

    }

}

/* Tablet Portrait */

@media (max-width:768px){

    .logo{

        flex-direction:column;

        gap:10px;

    }

    .logo img{

        width:60px;

        height:60px;

    }

    .logo h2{

        font-size:22px;

    }

    .glass-card{

        padding:35px 25px;

        border-radius:24px;

    }

    .glass-card h3{

        font-size:13px;

        letter-spacing:4px;

    }

    .glass-card h1{

        font-size:34px;

        line-height:1.2;

    }

    .glass-card p{

        font-size:16px;

        line-height:28px;

    }

    .countdown{

        justify-content:center;

    }

    .time-box{

        width:120px;

        padding:18px 10px;

    }

    .time-box span{

        font-size:36px;

    }

    #notify-form{

        flex-direction:column;

        gap:15px;

        align-items:center;

    }

    #notify-form input{

        width:100%;

        max-width:420px;

        border-radius:50px;

    }

    #notify-form button{

        width:220px;

        height:55px;

        border-radius:50px;

    }

    .social{

        flex-wrap:wrap;

    }

}

/* Mobile */

@media (max-width:576px){

    body{

        overflow-y:auto;

    }

    header{

        margin-bottom:20px;

    }

    .glass-card{

        padding:30px 20px;

    }

    .glass-card h1{

        font-size:28px;

    }

    .glass-card p{

        font-size:15px;

        line-height:26px;

    }

    .countdown{

        gap:12px;

    }

    .time-box{

        width:90px;

        padding:15px 8px;

    }

    .time-box span{

        font-size:28px;

    }

    .time-box small{

        font-size:11px;

    }

    #notify-form input{

        height:54px;

        font-size:15px;

    }

    #notify-form button{

        height:54px;

        font-size:15px;

    }

    .social a{

        width:48px;

        height:48px;

        font-size:18px;

    }

    .whatsapp{

        width:60px;

        height:60px;

        font-size:28px;

        right:18px;

        bottom:18px;

    }

    #music-btn{

        top:15px;

        right:15px;

        padding:10px 18px;

        font-size:14px;

    }

    footer{

        position:relative;

        margin:25px 0;

        padding-bottom:20px;

    }

}

/* Very Small Phones */

@media (max-width:360px){

    .glass-card{

        padding:22px 16px;

    }

    .glass-card h1{

        font-size:24px;

    }

    .glass-card p{

        font-size:14px;

    }

    .time-box{

        width:78px;

    }

    .time-box span{

        font-size:24px;

    }

    #notify-form button{

        width:100%;

        max-width:260px;

    }

}