/* ==========================================================================
   Responsive Stylesheet
   - This file adjusts the desktop styles from style.css for various screen sizes.
   - It is structured from larger screens down to smaller screens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Large Desktops & Laptops (max-width: 1200px)
   - Minor adjustments for slightly smaller desktop screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 4.2rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .page-title {
        font-size: 3rem;
    }
}


/* --------------------------------------------------------------------------
   2. Tablets & Small Desktops (max-width: 992px)
   - Major layout changes start here. Stacking columns, adjusting nav.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* --- General Typography & Spacing --- */
    h1, .hero-title {
        font-size: 3.5rem;
        line-height: 1.2;
    }

    h2, .section-title {
        font-size: 2.2rem;
    }

    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* --- Header & Navigation --- */
    .navbar-brand img {
        height: 60px; /* Adjust logo size for scrolled and non-scrolled nav */
    }
    .navbar.scrolled .navbar-brand img {
        height: 55px;
    }
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }

    /* --- Hero Section --- */
    #hero {
        min-height: 700px;
        height: auto;
        padding: 150px 0;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* --- About Page --- */
    #about-us-content .d-flex {
        flex-direction: column;
    }
    .about-nav {
        width: 100%;
        margin-bottom: 2rem;
    }
    #v-pills-tabContent {
        width: 100%;
        padding: 1.5rem;
    }

    /* --- Footer --- */
    .site-footer .text-lg-start {
        text-align: center !important;
    }
    .footer-title {
        margin-top: 1.5rem;
    }
    .social-icons {
        justify-content: center;
    }
}


/* --------------------------------------------------------------------------
   3. Mobile Devices - Landscape & Large Phones (max-width: 768px)
   - Focus on readability and touch-friendly targets.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* --- General Typography & Spacing --- */
    h1, .hero-title {
        font-size: 2.8rem;
    }

    h2, .section-title {
        font-size: 2rem;
    }

    .page-title {
        font-size: 2.5rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    /* --- Hero Section --- */
    #hero {
        padding: 120px 0 80px;
        min-height: auto;
    }

    .btn-primary-gradient {
        padding: 14px 30px;
        font-size: 0.8rem;
    }

    /* --- Page Header --- */
    #page-header {
        padding: 100px 0 50px;
    }

    /* --- About Page --- */
    .about-nav {
        flex-direction: column !important;
    }
    .about-nav .nav-link {
        text-align: center;
    }
    .tab-pane .d-flex {
        flex-direction: column;
        text-align: center;
    }
    .tab-image {
        margin-bottom: 1.5rem;
        float: none !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Contact Page --- */
    #contact-page-content .text-start {
        text-align: center !important;
    }
    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .contact-item .icon-bg {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    /* --- Footer --- */
    .footer-contact-info, .footer-links {
        text-align: center;
    }
    .footer-contact-info li {
        justify-content: center;
    }
    .footer-links li {
        padding-left: 0;
    }
    .footer-links li::before {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   4. Small Mobile Phones (max-width: 576px)
   - Final tweaks for the smallest screens.
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    /* --- General Typography & Spacing --- */
    h1, .hero-title {
        font-size: 2.2rem;
    }

    h2, .section-title {
        font-size: 1.8rem;
    }

    .page-title {
        font-size: 2rem;
    }

    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* --- Header & Navigation --- */
    .navbar-brand img {
        height: 50px;
    }
    .navbar.scrolled .navbar-brand img {
        height: 45px;
    }

    /* --- Cards --- */
    .service-card, .solution-card .card-body, .project-card-body, .application-form-wrapper {
        padding: 1.5rem;
    }

    /* --- Key Points List (About Page) --- */
    .key-points-list li {
        flex-direction: column;
        text-align: center;
    }
    .key-points-list .icon-box {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}