/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : responsive.css
   Part    : 1
========================================================== */

/* ==========================================================
   Large Desktop
========================================================== */

@media (max-width:1536px){

    .container{

        max-width:1280px;

    }

    .hero-title{

        font-size:3.2rem;

    }

    .cards-container{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(320px,1fr)
            );

    }

}

/* ==========================================================
   Desktop
========================================================== */

@media (max-width:1280px){

    .container{

        padding-inline:20px;

    }

    .main-header{

        width:96%;

    }

    .hero-title{

        font-size:3rem;

    }

    .footer-top{

        grid-template-columns:

            1.5fr

            1fr

            1fr;

    }

}

/* ==========================================================
   End Part 1
========================================================== */

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : responsive.css
   Part    : 2
========================================================== */

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

@media (max-width:1024px){

    .main-header{

        height:72px;

        padding:0 18px;

    }

    .header-title{

        font-size:1rem;

    }

    .hero-section{

        padding-top:140px;

    }

    .hero-title{

        font-size:2.6rem;

    }

    .hero-subtitle{

        font-size:1.05rem;

    }

    #search-form{

        max-width:100%;

    }

    .cards-container{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(280px,1fr)
            );

    }

    .features-grid{

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

    }

    .statistics-grid{

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

    }

    .footer-top{

        grid-template-columns:1fr;

        text-align:center;

    }

}

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

@media (max-width:768px){

    .hero-logo{

        width:120px;

    }

    .hero-title{

        font-size:2.2rem;

    }

    .hero-subtitle{

        max-width:95%;

    }

}

/* ==========================================================
   End Part 2
========================================================== */

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : responsive.css
   Part    : 3
========================================================== */

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

@media (max-width:640px){

    .container{

        padding-inline:16px;

    }

    .main-header{

        top:12px;

        width:95%;

        height:64px;

        padding:0 14px;

    }

    .header-title{

        display:none;

    }

    .header-logo{

        width:42px;

        height:42px;

    }

    .header-button{

        width:42px;

        height:42px;

    }

    .hero-section{

        padding:110px 16px 50px;

    }

    .hero-title{

        font-size:1.9rem;

        line-height:1.4;

    }

    .hero-subtitle{

        font-size:.95rem;

        margin-bottom:36px;

    }

    #search-form{

        padding:8px;

        gap:8px;

    }

    #search-input{

        width:100%;

        height:46px;

        padding:0 14px;

        font-size:.92rem;

        text-align:right;

    }

    #search-button{

        width:46px;

        height:46px;

        min-width:46px;

        flex-shrink:0;

    }

    .cards-container,

    .category-grid,

    .features-grid,

    .statistics-grid{

        grid-template-columns:1fr;

    }

    .ai-card{

        padding:16px;

        gap:12px;

        border-radius:20px;

    }

    .ai-card-top{

        gap:12px;

    }

    .ai-logo{

        width:52px;

        height:52px;

        border-radius:14px;

    }

    .ai-name{

        font-size:1.1rem;

    }

    .ai-company{

        font-size:.85rem;

        margin-top:3px;

    }

    .ai-rating{

        font-size:.9rem;

    }

    .ai-description{

        font-size:.88rem;

        line-height:1.7;

    }

    .ai-tag{

        padding:6px 12px;

        font-size:.78rem;

    }

    .ai-meta{

        grid-template-columns:1fr;

        gap:10px;

    }

    .ai-meta-item{

        padding:10px;

        gap:10px;

        border-radius:14px;

    }

    .ai-meta-title{

        font-size:.75rem;

    }

    .ai-meta-value{

        font-size:.9rem;

    }

    .ai-actions{

        gap:10px;

        margin-top:6px;

    }

    .store-button{

        min-width:140px;

        height:46px;

        border-radius:14px;

        font-size:.85rem;

    }

    .store-button

    .material-symbols-rounded{

        font-size:20px;

    }

}

/* ==========================================================
   End Part 3
========================================================== */

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : responsive.css
   Part    : 4
========================================================== */

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

@media (max-width:480px){

    .main-header{

        top:10px;

        height:60px;

        padding:0 12px;

    }

    .hero-logo{

        width:96px;

    }

    .hero-title{

        font-size:1.65rem;

    }

    .hero-subtitle{

        font-size:.90rem;

        margin-bottom:30px;

    }

    .project-title{

        font-size:2rem;

    }

    .project-description{

        font-size:.90rem;

    }

    .loading-container{

        width:90%;

    }

    .logo-container{

        width:120px;

        height:120px;

    }

    .main-logo{

        width:72px;

    }

    .install-card{

        padding:24px;

    }

    .install-card h2{

        font-size:1.6rem;

    }

    .install-card p{

        font-size:.92rem;

    }

    .footer-brand h2{

        font-size:1.4rem;

    }

    .footer-links h3{

        font-size:1rem;

    }

    .footer-bottom{

        font-size:.85rem;

    }

    #scroll-top-button{

        width:50px;

        height:50px;

        bottom:20px;

        right:20px;

    }

}

/* ==========================================================
   Extra Small Devices
========================================================== */

@media (max-width:360px){

    .hero-title{

        font-size:1.45rem;

    }

    #search-input{

        font-size:.90rem;

    }

    .store-button{

        min-width:100%;

    }

}

/* ==========================================================
   End Part 4
========================================================== */

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : responsive.css
   Part    : 5
========================================================== */

/* ==========================================================
   Landscape Phones
========================================================== */

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

    .hero-section{

        min-height:auto;

        padding:100px 24px 50px;

    }

    .hero-logo{

        width:80px;

        margin-bottom:16px;

    }

    .hero-title{

        font-size:2rem;

        margin-bottom:12px;

    }

    .hero-subtitle{

        margin-bottom:24px;

    }

}

/* ==========================================================
   Short Height Displays
========================================================== */

@media (max-height:500px){

    .main-header{

        top:8px;

    }

    section{

        padding-block:48px;

    }

}

/* ==========================================================
   Responsive Utility
========================================================== */

.mobile-only{

    display:none;

}

.desktop-only{

    display:block;

}

@media (max-width:768px){

    .mobile-only{

        display:block;

    }

    .desktop-only{

        display:none;

    }

}

/* ==========================================================
   Print
========================================================== */

@media print{

    .main-header,

    .main-footer,

    #scroll-top-button,

    #install-button{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

}

/* ==========================================================
   End Of File
========================================================== */