/* ======================================================
   RESPONSIVE CSS
   Indian Book of Records - Mobile App UI
====================================================== */

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

@media (max-width: 480px) {

    .app-container{

        max-width:100%;

        box-shadow:none;

    }

}

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

@media (max-width: 430px) {

    /* Header */

    .app-header{

        padding:14px 15px;

    }

    .logo-text-wrap h5{

        font-size:13px;

    }

    .logo-text-wrap span{

        font-size:10px;

    }

    .menu-btn,
    .header-icon{

        width:40px;
        height:40px;

        border-radius:12px;

    }

    /* Search */

    .search-wrapper{

        padding:12px 15px 5px;

    }

    .search-box{

        height:50px;

        border-radius:16px;

    }

    .search-box input{

        font-size:13px;

    }

    /* Main */

    .main-content{

        padding:15px 15px 110px;

    }

    /* Hero */

    .hero-card{

        min-height:220px;

        padding:22px;

        border-radius:26px;

    }

    .hero-content{

        width:60%;

    }

    .hero-content h2{

        font-size:22px;

    }

    .hero-content p{

        font-size:12px;

        margin-bottom:15px;

    }

    .hero-btn{

        height:42px;

        padding:0 18px;

        font-size:12px;

    }

    .hero-image{

        width:38%;

    }

    /* Section Titles */

    .section-title-wrap h4{

        font-size:18px;

    }

    .section-title-wrap a{

        font-size:12px;

    }

    /* Quick Actions */

    .quick-actions-grid{

        gap:10px;

    }

    .quick-action-card{

        padding:15px 8px;

        border-radius:18px;

    }

    .quick-icon{

        width:52px;
        height:52px;

        font-size:20px;

        border-radius:16px;

    }

    .quick-action-card span{

        font-size:11px;

    }

    /* Categories */

    .category-item{

        min-width:82px;

    }

    .category-icon{

        width:74px;
        height:74px;

        border-radius:22px;

    }

    .category-icon img{

        width:38px;

    }

    .category-item p{

        font-size:12px;

    }

    /* Record Cards */

    .record-image{

        height:170px;

    }

    .record-content{

        padding:16px;

    }

    .record-content h5{

        font-size:16px;

    }

    .record-btn{

        height:40px;

        font-size:12px;

    }

    /* Awards */

    .award-banner{

        padding:24px;

        border-radius:26px;

    }

    .award-content{

        width:65%;

    }

    .award-content h3{

        font-size:22px;

    }

    .award-banner img{

        width:130px;

        right:-10px;

    }

    /* Achievers */

    .achiever-card{

        min-width:145px;

        padding:18px;

    }

    .achiever-img{

        width:72px;
        height:72px;

    }

    .achiever-card h5{

        font-size:15px;

    }

    /* Download Banner */

    .download-banner{

        padding:20px;

        border-radius:26px;

    }

    .download-left{

        width:62%;

    }

    .download-left h3{

        font-size:20px;

    }

    .download-btn-main{

        height:44px;

        padding:0 16px;

        font-size:12px;

    }

    /* Bottom Nav */

    .bottom-nav{

        height:78px;

    }

    .nav-item i{

        font-size:20px;

    }

    .nav-item{

        font-size:11px;

    }

}

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

@media (max-width: 390px) {

    /* Header */

    .logo-img{

        width:38px;
        height:38px;

    }

    .logo-text-wrap h5{

        font-size:12px;

    }

    /* Hero */

    .hero-card{

        min-height:210px;

        padding:20px;

    }

    .hero-content h2{

        font-size:20px;

        line-height:1.3;

    }

    .hero-content p{

        font-size:11px;

    }

    .hero-tag{

        padding:7px 12px;

        font-size:10px;

    }

    .hero-btn{

        height:40px;

        padding:0 15px;

    }

    /* Quick Actions */

    .quick-actions-grid{

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

    }

    .quick-action-card{

        padding:18px 10px;

    }

    /* Awards */

    .award-content h3{

        font-size:20px;

    }

    .award-banner img{

        width:115px;

    }

    /* Download Banner */

    .download-banner{

        flex-direction:column;

        text-align:center;

        gap:20px;

    }

    .download-left,
    .download-right{

        width:100%;

    }

    .download-right img{

        max-width:170px;

    }

}

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

@media (max-width: 350px) {

    .hero-content h2{

        font-size:18px;

    }

    .hero-content{

        width:65%;

    }

    .hero-image{

        width:35%;

    }

    .award-content{

        width:68%;

    }

    .award-content h3{

        font-size:18px;

    }

    .award-banner img{

        width:100px;

    }

    .section-title-wrap h4{

        font-size:16px;

    }

    .record-content h5{

        font-size:15px;

    }

}

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

@media (min-width: 768px) {

    body{

        background:#E2E8F0;

    }

    .app-container{

        margin:20px auto;

        border-radius:35px;

        overflow:hidden;

    }

}