/* Large Tablets */
@media (max-width:992px){

    section{
        padding:70px 7%;
    }

    .hero h1{
        font-size:4rem;
    }

    .hero h2,
    #countdown{
        font-size:1.8rem;
    }

    h2{
        font-size:2.4rem;
    }

}

/* Tablets */
@media (max-width:768px){

    section{
        padding:60px 5%;
    }

    .hero{
        padding:20px;
    }

    .hero h3{
        font-size:1rem;
        letter-spacing:2px;
    }

    .hero h1{
        font-size:3rem;
        line-height:1.1;
    }

    .hero p{
        font-size:1rem;
    }

    #countdown{
        font-size:1.5rem;
    }

    h2{
        font-size:2rem;
        margin-bottom:30px;
    }

    .card{
        padding:25px;
    }

    .gallery{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .gallery img{
        height:180px;
    }

    iframe{
        height:320px;
    }

    .btn,
    form button,
    #shareBtn{
        width:100%;
        text-align:center;
    }

}

/* Phones */
@media (max-width:480px){

    section{
        padding:50px 20px;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .hero h3{
        font-size:.9rem;
    }

    .hero p{
        font-size:.95rem;
    }

    #countdown{
        font-size:1.2rem;
    }

    h2{
        font-size:1.8rem;
    }

    .card{
        padding:20px;
    }

    .card h3{
        font-size:1.6rem;
    }

    .gallery{
        grid-template-columns:1fr;
    }

    .gallery img{
        height:240px;
    }

    input,
    textarea,
    select{
        padding:14px;
        font-size:.95rem;
    }

    #musicBtn{
        width:52px;
        height:52px;
        font-size:18px;
        right:15px;
        bottom:15px;
    }

    footer{
        padding:60px 20px;
    }

}
@media(max-width:768px){

.timeline::before{
    left:25px;
}

.timeline-item{
    gap:20px;
}

.timeline-icon{
    width:50px;
    height:50px;
    min-width:50px;
    font-size:22px;
}

.timeline-content{
    padding:20px;
}

.timeline-content h3{
    font-size:1.6rem;
}

}