/* ===========================
   Large Devices (1200px)
=========================== */
@media (max-width:1200px){

}

/* ===========================
   Laptops (992px)
=========================== */
@media (max-width:992px){

    .navbar-nav{
        text-align:center;
    }

    .hero-content{
        text-align:center;
        padding:80px 20px;
    }

    .service-box{
        margin-bottom:30px;
    }

    .portfolio-item{
        margin-bottom:25px;
    }

}

/* ===========================
   Tablets (768px)
=========================== */
@media (max-width:768px){

    .top-header{
        display:none;
    }

    .navbar-brand img{
        height:55px;
    }

    .hero{
        min-height:450px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:16px;
    }

    .section-title h2{
        font-size:30px;
    }

    .about-image{
        margin-bottom:30px;
    }

    .contact-info{
        margin-top:40px;
    }

}

/* ===========================
   Mobile (576px)
=========================== */
@media (max-width:576px){

    .hero{
        min-height:380px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:15px;
    }

    .btn{
        width:100%;
        margin-bottom:10px;
    }

    .portfolio-item img{
        width:100%;
        height:auto;
    }

    footer{
        text-align:center;
    }

}



/* =========================================================
   TEJAS9 FINAL MOBILE COMPATIBILITY FIX
   Overrides older responsive rules without changing desktop.
   ========================================================= */

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Tablet / mobile */
@media (max-width: 991.98px) {

    /* Keep navbar compact and let Bootstrap collapse normally */
    .navbar {
        height: 53px !important;
        min-height: 53px !important;
    }

    .navbar .container {
        min-height: 53px !important;
        height: 53px !important;
    }

    .navbar-brand img {
        height: 48px !important;
        width: auto !important;
    }

    /* Do not force the hero to become excessively tall */
    .hero {
        min-height: 300px !important;
    }

    .hero-overlay {
        padding: 25px 0 !important;
    }

    .hero-content {
        padding: 0 15px !important;
        text-align: center !important;
    }

    .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    .hero-content p {
        font-size: 13px !important;
        line-height: 21px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* IMPORTANT: stack About content and image instead of squeezing them */
    .about-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 25px !important;
    }

    .about-content,
    .about-wrapper .about-image {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-wrapper .about-image {
        text-align: center !important;
    }

    .about-wrapper .about-image img {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }

    /* Keep service cards readable */
    .service-box {
        margin-bottom: 0 !important;
        height: 100% !important;
    }

    /* Contact columns naturally stack through Bootstrap */
    .contact-info {
        margin-top: 0 !important;
    }

    .whatsapp-btn {
        right: 15px !important;
        bottom: 15px !important;
    }
}

/* Phones */
@media (max-width: 575.98px) {

    /* Hide the narrow desktop top strip, as in the existing design */
    .top-header {
        display: none !important;
    }

    .navbar,
    .navbar .container {
        height: 53px !important;
        min-height: 53px !important;
    }

    .navbar-brand img {
        height: 45px !important;
        max-width: 160px !important;
    }

    /* Bootstrap mobile menu */
    .navbar-collapse {
        background: #fff !important;
        padding: 8px 0 12px !important;
        box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
        position: relative !important;
        z-index: 9998 !important;
    }

    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .navbar-nav .nav-link {
        line-height: 38px !important;
        padding: 0 15px !important;
        text-align: center !important;
    }

    .hero {
        min-height: 330px !important;
    }

    .hero-overlay {
        padding: 28px 0 !important;
    }

    .hero-content {
        padding: 0 12px !important;
    }

    .hero-small-title {
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    .hero-content h1 {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .hero-content p {
        font-size: 12.5px !important;
        line-height: 20px !important;
    }

    .hero-buttons {
        width: 100% !important;
    }

    .hero-buttons .btn {
        width: auto !important;
        min-width: 145px !important;
        margin-bottom: 0 !important;
    }

    /* Two service cards per row on phones */
    .services-section .row > .col-lg-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .service-box img {
        height: 145px !important;
    }

    .service-box h4 {
        font-size: 13px !important;
    }

    .service-box p {
        font-size: 10px !important;
        line-height: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .portfolio-img {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    .cta-section .col-lg-8 > p {
        white-space: normal !important;
    }

    .cta-section .col-lg-4 {
        margin-top: 18px !important;
    }

    .contact-section form {
        padding: 15px !important;
    }

    .footer-bottom {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}