/* ======================================
   Large Screens (1400px+)
====================================== */

@media (min-width: 1400px){

    .container{

        max-width:1300px;

    }

}

/* ======================================
   Laptop
====================================== */

@media (max-width:1100px){

    .hero{

        grid-template-columns:1fr 180px;

    }

    .temperature{

        font-size:5rem;

    }

}

/* ======================================
   Tablet
====================================== */

@media (max-width:900px){

    .header{

        flex-direction:column;

        align-items:stretch;

    }

    .search-area{

        width:100%;

    }

    .search-area input{

        flex:1;

        width:auto;

    }

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        gap:25px;

    }

    .weather-icon{

        font-size:5rem;

    }

    .highlights{

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

    }

}

/* ======================================
   Mobile
====================================== */

@media (max-width:768px){

    .container{

        width:95%;

        padding:25px 0 40px;

    }

    .logo{

        text-align:center;

        font-size:1.8rem;

    }

    .search-area{

        flex-wrap:wrap;

        justify-content:center;

    }

    .search-area input{

        width:100%;

    }

    .search-area button{

        flex:1;

        min-width:70px;

    }

    .hero{

        padding:30px;

    }

    .temperature{

        font-size:4.2rem;

    }

    .condition{

        font-size:1.2rem;

    }

    .highlights{

        grid-template-columns:1fr;

    }

    .card{

        text-align:center;

    }

    .forecast{

        padding:20px;

    }

    .week{

        padding:20px;

    }

    .forecast-item{

        min-width:90px;

        padding:15px;

    }

}

/* ======================================
   Small Mobile
====================================== */

@media (max-width:480px){

    .logo{

        font-size:1.5rem;

    }

    .hero{

        padding:22px;

    }

    .temperature{

        font-size:3.5rem;

    }

    .weather-icon{

        font-size:4rem;

    }

    .section-title{

        font-size:1.1rem;

    }

    .card h2{

        font-size:1.6rem;

    }

    .week-item{

        flex-direction:column;

        gap:12px;

        text-align:center;

    }

}