/* ==========================================
   Responsive Styles
==========================================*/

/* ---------- Large Desktop ---------- */

@media (max-width:1400px){

.hero h1{
    font-size:60px;
}

.glass-card{
    max-width:850px;
}

}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

nav{
    padding:15px 25px;
}

nav ul{
    gap:25px;
}

.hero h1{
    font-size:52px;
}

.section-title h2{
    font-size:44px;
}

.about-card{
    grid-template-columns:1fr;
}

.stats{
    justify-content:center;
}

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

header{
    width:95%;
}

nav{
    flex-wrap:wrap;
    gap:20px;
}

nav ul{
    width:100%;
    justify-content:center;
}

.hero{
    padding-top:170px;
}

.hero h1{
    font-size:46px;
}

.hero p{
    font-size:17px;
}

.countdown{
    grid-template-columns:repeat(2,1fr);
}

.countdown span{
    font-size:42px;
}

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

.glass-card{
    padding:45px;
}

.subscribe form{
    flex-direction:column;
}

.subscribe input,
.subscribe button{
    width:100%;
}

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

.logo span{
    display:none;
}

nav{
    padding:15px 20px;
}

nav ul{
    display:none;
}

.btn{
    padding:12px 22px;
    font-size:14px;
}

.hero{

    padding:140px 20px 80px;

}

.hero-logo{
    width:95px;
}

.hero h4{
    font-size:14px;
}

.hero h1{
    font-size:38px;
}

.hero p{

    font-size:16px;

    line-height:1.7;

}

.glass-card{

    padding:35px 25px;

    border-radius:22px;

}

.countdown{

    gap:15px;

}

.countdown div{

    padding:18px;

}

.countdown span{

    font-size:34px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

.features{

    padding:90px 20px;

}

.grid{

    grid-template-columns:1fr;

}

.feature-card{

    padding:35px;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    font-size:16px;

}

.about-content h2{

    font-size:38px;

}

.stats{

    flex-direction:column;

}

.contact-item{

    flex-direction:column;

    text-align:center;

}

.contact-item span{

    font-size:17px;

}

.subscribe h2{

    font-size:34px;

}

footer h3{

    font-size:28px;

}

.social{

    gap:12px;

}

.social a{

    width:50px;

    height:50px;

}

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:15px;

}

.countdown{

    grid-template-columns:1fr 1fr;

}

.countdown span{

    font-size:28px;

}

.countdown small{

    font-size:13px;

}

.glass-card{

    padding:25px 18px;

}

.section-title h2{

    font-size:30px;

}

.feature-card{

    padding:28px;

}

.feature-card i{

    width:75px;

    height:75px;

    font-size:28px;

}

.contact-item{

    padding:18px;

}

.contact-item i{

    width:60px;

    height:60px;

}

.subscribe input{

    min-width:100%;

}

footer img{

    width:70px;

}

}

/* ---------- Ultra Wide ---------- */

@media (min-width:1800px){

.hero{

    max-width:1700px;

    margin:auto;

}

.glass-card{

    max-width:1100px;

}

.hero h1{

    font-size:80px;

}

.hero p{

    font-size:22px;

}

}

/* ---------- Landscape Mobile ---------- */

@media (max-height:500px) and (orientation:landscape){

.hero{

    min-height:auto;

    padding:140px 20px 60px;

}

.countdown{

    margin:30px 0;

}

}