/* ===========================================================
   ReliefMap
   Responsive Stylesheet
   Author : Vigneshan S
=========================================================== */

/* ===========================================================
   LARGE DESKTOP
=========================================================== */

@media (min-width:1600px){

    .content{

        max-width:1600px;

        margin:auto;

        margin-left:300px;

    }

    .dashboard-cards{

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

    }

}

/* ===========================================================
   LAPTOP
=========================================================== */

@media(max-width:1400px){

    .dashboard-cards,

    .resource-grid,

    .analytics-kpi,

    .ai-grid{

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

    }

}

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

@media(max-width:1200px){

    .hero{

        justify-content:center;

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .map-grid{

        grid-template-columns:1fr;

    }

    .chart-grid{

        grid-template-columns:1fr;

    }

    .news-grid{

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

    }

    .profile-container{

        grid-template-columns:1fr;

    }

}

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

@media(max-width:992px){

    .sidebar{

        left:-100%;

    }

    .sidebar.mobile-open{

        left:0;

    }

    .content{

        margin-left:0;

    }

    .topbar{

        padding:0 18px;

    }

    .info-panel{

        left:0;

    }

    .dashboard-cards,
    .resource-grid,
    .stats-grid,
    .trend-grid{

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

    }

}

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

@media(max-width:1200px){

    .info-panel{

        height:auto;

        flex-wrap:wrap;

        justify-content:flex-start;

        gap:14px 6px;

        padding:14px 18px;

    }

    .info-item + .info-item{

        border-left:none;

        padding-left:8px;

    }

}

@media(max-width:768px){

    .info-panel{

        gap:12px;

    }

    .info-item{

        flex:1 1 40%;

        min-width:150px;

    }

    .info-text span{

        font-size:.68rem;

    }

    .info-text strong{

        font-size:.9rem;

    }

}

@media(max-width:576px){

    .info-item{

        flex:1 1 100%;

    }

    .info-item + .info-item{

        border-left:none;

    }

}

@media(max-width:768px){

    .hero{

        min-height:420px;

        padding:40px 25px;

    }

    .hero-content{

        max-width:100%;

    }

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.1rem;

    }

    .dashboard-cards,

    .resource-grid,

    .analytics-kpi,

    .trend-grid,

    .ai-grid,

    .achievement-grid,

    .settings-grid,

    .chart-grid,

    .widget-grid,

    .quick-actions-grid{

        grid-template-columns:1fr;

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .featured-news{

        grid-template-columns:1fr;

    }

    .footer-container{

        grid-template-columns:1fr;

    }

}

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

@media(max-width:576px){

    body{

        font-size:14px;

    }

    .content{

        padding:15px;

    }

    .hero-left h1{

        font-size:2rem;

    }

    .hero-left p{

        font-size:.95rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .primary-btn,

    .secondary-btn{

        width:100%;

    }

    .dashboard-cards .card{

        flex-direction:column;

        text-align:center;

        gap:20px;

    }

    .weather-card,

    .chart-card,

    .profile-card,

    .setting-card,

    .resource-card,

    .news-card{

        padding:18px;

    }

    #mapContainer{

        height:350px;

    }

    table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

/* ===========================================================
   EXTRA SMALL DEVICES
=========================================================== */

@media(max-width:400px){

    .hero-left h1{

        font-size:1.7rem;

    }

    .logo h2{

        font-size:1rem;

    }

    .logo span{

        font-size:.7rem;

    }

    .dashboard-cards .card h2{

        font-size:1.8rem;

    }

    .temperature{

        font-size:3rem;

    }

}

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

@media(max-height:500px){

    .sidebar{

        overflow-y:auto;

    }

    .hero{

        padding-top:20px;

    }

}

/* ===========================================================
   PRINT
=========================================================== */

@media print{

    .sidebar,

    .topbar,

    footer,

    .primary-btn,

    .secondary-btn,

    #scrollTopBtn{

        display:none !important;

    }

    .content{

        margin:0;

        padding:0;

    }

    body{

        background:white;

        color:black;

    }

}