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

@media (max-width:992px){

.hero-card{

    width:90%;

    padding:40px 30px;

}

.hero h1{

    font-size:58px;

}

.language-switcher{

    top:20px;
    right:20px;

}

}


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

@media (max-width:768px){

.hero{

    min-height:100vh;

    padding:30px 15px;

}

.hero-card{

    width:100%;

    padding:35px 22px;

    border-radius:28px;

}

.logo{

    width:75px;

}

.subtitle{

    font-size:12px;

    letter-spacing:3px;

}

.hero h1{

    font-size:46px;

}

.hero h1 span{

    font-size:30px;

}

.date{

    font-size:16px;

    letter-spacing:2px;

}

.hero-btn{

    width:100%;

    padding:18px;

}

.language-switcher{

    top:15px;

    right:15px;

}

.language-switcher button{

    width:45px;

    height:38px;

    font-size:13px;

}

.timer{

    gap:12px;

}

.time-box{

    width:42%;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.story-content{

    grid-template-columns:1fr;

}

.timeline-item{

    flex-direction:column;

}

.event{

    width:100%;

}

}


/* ===========================
   SMALL PHONE
=========================== */

@media (max-width:420px){

.hero h1{

    font-size:38px;

}

.hero-btn{

    font-size:15px;

}

.time-box{

    width:46%;

}

.logo{

    width:65px;

}

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

.hero{
    min-height:100vh;
    background-position:center;
}


.hero-card{

    width:90%;
    max-width:350px;

    padding:35px 20px;

    border-radius:30px;

}


.hero-card .logo{

    width:90px;
    height:90px;

}


.hero-card h1{

    font-size:42px;
    line-height:1.1;
    margin:20px 0;

}


.hero-card h1 span{

    font-size:35px;

}


.subtitle{

    font-size:14px;
    letter-spacing:4px;

}


.date{

    font-size:16px;

}


.hero-btn{

    width:90%;
    font-size:16px;

    padding:15px 20px;

}


.language-switcher{

    top:20px;
    right:15px;

}


.language-switcher button{

    font-size:13px;

}

}