/* ========================================
   CLEAN MOBILE RESPONSIVE STYLES
   ======================================== */

/* Base */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* Mobile Typography */
@media (max-width: 767px) {
    body { font-size: 15px; }
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    p { font-size: 15px !important; }
    
    /* Hide underline animation on mobile */
    .section-title::before,
    .section-title::after {
        display: none !important;
    }
}

/* Mobile Spacing */
@media (max-width: 767px) {
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .container, .container-fluid { padding-left: 15px !important; padding-right: 15px !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }
}

/* Navbar */
@media (max-width: 991px) {
    .navbar-brand img { width: 70px !important; }
    .navbar-collapse { background: rgba(6, 20, 41, 0.98); padding: 20px; margin-top: 15px; border-radius: 10px; }
}

/* Carousel */
@media (max-width: 767px) {
    .carousel-item img { height: 60vh; min-height: 400px; }
    .carousel-caption h1 { font-size: 1.5rem !important; }
}

/* Cards */
@media (max-width: 767px) {
    .service-item, .blog-card, .card { padding: 20px 15px !important; margin-bottom: 1.5rem !important; }
}

/* Buttons */
@media (max-width: 767px) {
    .btn { padding: 10px 20px !important; font-size: 0.9rem !important; }
}


/* Section Title Centering Fix */
@media (max-width: 767px) {
    .section-title {
        text-align: center !important;
    }
    
    .section-title h1,
    .section-title h2,
    .section-title h3,
    .section-title h5 {
        text-align: center !important;
    }
    
    .section-title.text-center {
        display: block !important;
        width: 100% !important;
    }
}