/* ==========================================================================
   Responsive Overrides
   Breakpoints follow Bootstrap: 1199.98 / 991.98 / 767.98 / 575.98
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Desktops / Small Laptops (<= 1199.98px)
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .section-padding {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .section-padding-top {
        padding-top: 90px;
    }

    .section-padding-bottom {
        padding-bottom: 90px;
    }

    .main-nav {
        gap: 24px;
    }

    .hero-title {
        font-size: 46px;
    }

    .hero-image-shape {
        height: 520px;
    }

    .about-image-main {
        height: 440px;
    }

    .footer-top {
        padding-top: 80px;
    }
}

/* --------------------------------------------------------------------------
   Tablets (<= 991.98px)
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .section-padding-top {
        padding-top: 80px;
    }

    .section-padding-bottom {
        padding-bottom: 80px;
    }

    .section-heading-wrapper {
        margin-bottom: 44px;
    }

    /* Top bar simplifies on tablet */
    .top-bar-right {
        justify-content: flex-start;
        margin-top: 6px;
    }

    /* Desktop nav hidden, offcanvas takes over */
    .main-nav,
    .header-support {
        display: none !important;
    }

    .header-actions {
        gap: 10px;
    }

    .hero-section {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
        text-align: center;
    }

    .hero-content {
        margin-bottom: 50px;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-image-shape {
        height: 440px;
        border-radius: 200px 200px 24px 24px;
    }

    .about-image-wrapper {
        margin-bottom: 50px;
        padding-right: 0;
    }

    .about-experience-badge {
        left: 10px;
    }

    .counter-item {
        margin-bottom: 30px;
        justify-content: center;
        text-align: left;
    }

    .specialty-image-wrapper {
        height: 420px;
        margin-bottom: 50px;
    }

    .why-choose-image {
        height: 440px;
        margin-bottom: 50px;
    }

    .contact-image-wrapper {
        min-height: 320px;
        margin-bottom: 40px;
    }

    .contact-form-wrapper {
        padding: 36px;
    }

    .cta-content {
        text-align: center;
        margin-bottom: 30px;
    }

    .cta-phone {
        justify-content: center;
    }

    .footer-bottom .row {
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        margin-top: 10px;
    }

    .request-band-inner { align-items:flex-start; flex-direction:column; padding:36px; }
    .detail-image { height:440px; }
}

/* --------------------------------------------------------------------------
   Mobile Landscape / Small Tablets (<= 767.98px)
-------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section-padding,
    .section-padding-top,
    .section-padding-bottom {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section-padding-top {
        padding-bottom: 0;
    }

    .section-padding-bottom {
        padding-top: 0;
    }

    .top-bar {
        display: none;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-image-shape {
        height: 360px;
    }

    .hero-badge {
        left: 0;
        padding: 14px 18px;
    }

    .hero-float-card {
        display: none;
    }

    .about-image-main {
        height: 360px;
    }

    .about-image-secondary {
        width: 150px;
        height: 150px;
    }

    .service-card-content,
    .contact-form-wrapper {
        padding: 24px;
    }

    .project-card {
        height: 320px;
    }

    .cta-section .row > div:last-child {
        margin-top: 24px;
        text-align: center;
    }

    .footer-top {
        padding-top: 60px;
        padding-bottom: 30px;
    }

    .footer-widget-title {
        margin-bottom: 18px;
    }

    .footer-top .col-lg-3,
    .footer-top .col-lg-2 {
        margin-bottom: 40px;
    }

    .article-feature-image { height:300px; margin:28px 0 32px; }
    .article-lead { font-size:18px; }
    .article-author-box { align-items:flex-start; padding:22px; }
}

/* --------------------------------------------------------------------------
   Mobile Portrait (<= 575.98px)
-------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .hero-title {
        font-size: 30px;
    }

    .hero-description {
        font-size: 15.5px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero-actions .btn-primary-custom,
    .hero-actions .btn-outline-custom {
        justify-content: center;
    }

    .hero-image-shape {
        height: 300px;
        border-radius: 140px 140px 20px 20px;
    }

    .about-image-secondary {
        display: none;
    }

    .about-experience-badge {
        width: 100px;
        height: 100px;
    }

    .about-experience-badge strong {
        font-size: 24px;
    }

    .counter-number {
        font-size: 34px;
    }

    .specialty-mini-card {
        flex-direction: column;
        gap: 10px;
        left: 16px;
        bottom: 16px;
        padding: 14px 18px;
    }

    .project-filter {
        justify-content: center;
    }

    .project-filter button {
        padding: 8px 16px;
        font-size: 13px;
    }

    .testimonial-card {
        padding: 26px;
    }

    .contact-form-wrapper {
        padding: 20px;
    }

    .cta-title {
        font-size: 26px;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 8px;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

    .request-band { padding:48px 0; }
    .request-band-inner { padding:28px 22px; }
    .detail-image { height:340px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}