/* =============================================
   RESPONSIVE BREAKPOINTS - BOOTSTRAP STYLE
   Complements the existing CSS breakpoints at 479px, 767px, 991px
   
   $grid-breakpoints: (
     xs: 0,
     sm: 576px,
     md: 768px,
     lg: 992px,
     xl: 1200px,
     xxl: 1400px
   );
   ============================================= */

/* =============================================
   RESPONSIVE CONTAINER - BOOTSTRAP STYLE
   ============================================= */
.rt-container-responsive {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media (min-width: 576px) {
    .rt-container-responsive {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .rt-container-responsive {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .rt-container-responsive {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .rt-container-responsive {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .rt-container-responsive {
        max-width: 1320px;
    }
}

/* =============================================
   VISIBILITY UTILITY CLASSES
   ============================================= */

/* Hide on specific breakpoints and down */
@media (max-width: 575.98px) {
    .rt-hidden-xs {
        display: none !important;
    }

    .rt-hide-xs-down {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .rt-hide-sm-down {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .rt-show-sm-up {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .rt-show-md-up {
        display: block !important;
    }

    .rt-container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .rt-show-lg-up {
        display: block !important;
    }

    .rt-container-md {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .rt-show-xl-up {
        display: block !important;
    }

    .rt-container-lg {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .rt-show-xxl-up {
        display: block !important;
    }

    .rt-container-xl {
        max-width: 1320px;
    }
}

@media (max-width: 767.98px) {
    .rt-hide-sm-down {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .rt-hide-md-down {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    .rt-hide-lg-down {
        display: none !important;
    }
}

@media (max-width: 1399.98px) {
    .rt-hide-xl-down {
        display: none !important;
    }
}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width */

/* =============================================
   HERO SECTION - FILLER FOR 479px to 575px GAP
   The existing CSS handles 479px, 767px, and 991px.
   This fills the missing ranges.
   ============================================= */

/* Between 480px and 575px - transition zone */
@media (min-width: 480px) and (max-width: 575.98px) {
    .rt-hero-v13-main {
        padding-top: 12rem;
        padding-bottom: 3rem;
    }

    .rt-hero-v13-heading h1,
    .rt-hero-v13-heading-one,
    .rt-hero-v13-heading-two {
        font-size: 2rem !important;
    }

    .rt-hero-v13-description {
        max-width: 24rem;
    }
}

/* Between 576px and 767px - landscape phones gap */
@media (min-width: 576px) and (max-width: 767.98px) {
    .rt-hero-v13-main {
        height: auto;
        min-height: 65vh;
        padding-top: 14rem;
        padding-bottom: 3.5rem;
    }

    .rt-hero-v13-heading h1,
    .rt-hero-v13-heading-one,
    .rt-hero-v13-heading-two {
        font-size: 2.25rem !important;
    }

    .rt-hero-v13-description {
        max-width: 26rem;
    }

    .rt-hero-v13-heading {
        max-width: 100%;
    }
}

/* Tablet landscape / small desktop gap between 992px and 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .rt-hero-v13-main {
        height: 80vh;
        padding-bottom: 5rem;
    }

    .rt-hero-v13-heading h1,
    .rt-hero-v13-heading-one,
    .rt-hero-v13-heading-two {
        font-size: 3.25rem !important;
    }

    .rt-hero-v13-heading {
        max-width: 38rem;
    }

    .rt-hero-v13-description {
        max-width: 22rem;
    }
}

/* Large desktop 1200px - 1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .rt-hero-v13-main {
        height: 90vh;
        padding-bottom: 5.5rem;
    }

    .rt-hero-v13-heading h1,
    .rt-hero-v13-heading-one,
    .rt-hero-v13-heading-two {
        font-size: 3.75rem !important;
    }
}

/* Extra large 1400px+ - full height */
@media (min-width: 1400px) {
    .rt-hero-v13-main {
        height: 100vh;
        padding-bottom: 6.25rem;
    }
}