/* Mobile-first responsive overrides for Brilliant Roofing */

img,
iframe,
svg,
canvas,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Keep hero video filling its frame — do NOT force height:auto */
.hero-video,
.hero-image,
.hero-bg-slider video {
  max-width: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#main-content,
.header-area,
.footer,
.slider-area,
.promotional-area,
.about-us-area,
.feature-area,
.service-areas-area,
.faq-area,
.call-to-action-area,
.contact-form-area,
.contact-info-area,
.page-breadcrumb-area,
.counter-up-area,
.te-process-step-area,
.testimonial-slider-area,
.te-footer-sec,
.footer-bottom-area {
  max-width: 100%;
}

/* WOW sets visibility:hidden until animate — always show content as fallback */
.wow {
  visibility: visible !important;
}

@media (max-width: 991px) {
  .te-menu-sidebar-area {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Kill horizontal entrance animations that widen the page */
  .wow,
  .animated {
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    visibility: visible !important;
  }
}

/* ========== Hero ========== */
.hero-bg-slider {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  min-height: clamp(480px, 70vh, 750px);
}

.hero-bg-slider .te-slider-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* clip slick track sideways only via list */
}

.hero-bg-slider .slick-list {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Do NOT constrain .slick-track — slick needs it wider than the viewport */
.hero-bg-slider .slick-slide {
  width: 100%;
  float: left;
}

.hero-bg-slider .te-single-slider {
  width: 100%;
  min-height: clamp(480px, 70vh, 750px);
}

@media (max-width: 991px) {

  .hero-bg-slider,
  .hero-bg-slider .te-single-slider {
    min-height: 0 !important;
    height: auto !important;
  }

  .hero-bg-slider .te-single-slider .te-slider-container {
    flex-direction: column !important;
    padding: 100px 0 48px !important;
    gap: 16px !important;
    width: 100%;
    max-width: 100%;
  }

  .hero-bg-slider .te-single-slider .te-slider-container .te-slider-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide empty second column on mobile */
  .hero-bg-slider .te-single-slider .te-slider-container .te-slider-column:empty {
    display: none !important;
  }

  .promotional-image-wrapper .image {
    overflow: hidden;
  }

  .promotional-image-wrapper .image .circle-gradient,
  .circle-gradient {
    display: none !important;
  }

  .te-about-image-card .te-main-img-wrapper,
  .te-about-image-card .te-main-img-inner {
    overflow: hidden;
    max-width: 100%;
  }

  .te-about-image-card .te-img-card-shape,
  .te-about-image-card .te-another-image,
  .te-about-image-card .about-img-two {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
  }

  .te-btn-wrappper .te-theme-btn,
  .br-header__cta,
  .te-theme-btn {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 100%;
  }

  .te-footer-bottom-wrapper,
  .te-copyright-text,
  .te-copyright-text p,
  .te-section-desc,
  .te-section-desc p,
  .te-list-item .text,
  .te-accordion-body,
  .te-accordion-body p {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

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

  .row>[class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 767px) {
  .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-title {
    font-size: clamp(26px, 7vw, 38px) !important;
    letter-spacing: -0.5px !important;
    word-break: break-word;
  }

  .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-short-desc {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 24px !important;
  }

  .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper .te-theme-btn {
    width: 100%;
    justify-content: center;
  }

  .br-header__cta {
    font-size: 14px;
    padding: 10px 14px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ========== About images ========== */
@media (max-width: 991px) {
  .about-us-area .te-main-img-inner>img {
    height: clamp(260px, 50vw, 500px) !important;
  }

  .about-us-area .col-xl-7,
  .about-us-area .col-xxl-6:last-child {
    z-index: auto;
    margin-top: 24px;
  }

  .te-about-image-card.style-2 .te-main-img-wrapper .te-main-img-inner {
    padding-right: 0 !important;
  }

  .te-about-image-card.style-3 .te-main-img-wrapper .te-main-img-inner .about-img-one {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 280px;
  }

  .te-about-image-card.style-3 .te-main-img-wrapper .te-main-img-inner .about-img-one>img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: cover;
  }

  .te-about-image-card .te-main-img-wrapper .te-main-img-inner>img.tilt-animate {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}

/* ========== Promotional / CTA ========== */
@media (max-width: 991px) {
  .promotional-area.style-1 {
    margin-top: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    overflow-x: hidden;
  }

  .promotional-area.style-1 .row>[class*="col-"]:last-child {
    margin-top: 30px;
  }

  .promotional-area .te-btn-wrappper {
    width: 100%;
  }

  .promotional-area .te-btn-wrappper .te-theme-btn {
    width: 100%;
    max-width: 100%;
  }
}

/* ========== Testimonials ========== */
@media (max-width: 991px) {
  .testimonial-bg.style-3 {
    height: auto !important;
    min-height: 180px;
  }

  .testimonial-slider-area.style-3 {
    margin-top: 0 !important;
    overflow-x: hidden;
  }

  .testimonial-slider-area.style-3 .te-testimonial-slider-wrapper {
    margin-left: 0 !important;
    padding: 0 12px;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .single-testimonial.custom-width {
    margin: 8px 0 !important;
    max-width: 100% !important;
  }

  .te-testimonial-slider-wrapper .slick-list {
    margin: 0 !important;
  }
}

/* ========== Contact ========== */
@media (max-width: 991px) {
  .contact-info-area {
    margin-top: 24px !important;
  }

  .contact-info-area .row {
    row-gap: 20px;
  }
}

@media (max-width: 767px) {
  .te-map-widget iframe {
    height: 280px !important;
  }

  .contact-info-area .te-icon-card.style-2 {
    padding: 28px 20px;
  }

  .contact-form-area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .contact-form-area .te-theme-btn {
    width: 100%;
    justify-content: center;
  }

  .te-comment-form input,
  .te-comment-form select,
  .te-comment-form textarea {
    font-size: 16px;
    max-width: 100%;
  }
}

/* ========== FAQ ========== */
@media (max-width: 1199px) {
  .faq-area .row>.offset-xl-1 {
    margin-left: 0 !important;
  }

  .faq-area .col-xl-5 {
    margin-bottom: 30px;
  }

  .accordion-wrapper .te-accordion-list-item .te-accordion-head .te-accordion-title {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  .accordion-wrapper .te-accordion-list-item .te-accordion-head {
    padding: 14px 16px !important;
  }

  .accordion-wrapper .te-accordion-list-item .te-accordion-body {
    margin: 0 12px !important;
  }
}

/* ========== Service pages ========== */
@media (max-width: 991px) {
  .service-section-row.flex-row-reverse {
    flex-direction: column !important;
  }

  .service-section-row>[class*="col-"]:not(:last-child) {
    margin-bottom: 24px;
  }

  .service-section-row img.tilt-animate,
  .about-us-area .te-about-image-card img.tilt-animate {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }
}

/* ========== Bottom CTAs ========== */
@media (max-width: 991px) {
  .call-to-action-area .col-lg-4.text-lg-end {
    text-align: center !important;
    margin-top: 20px;
  }

  .call-to-action-area .te-theme-btn,
  .te-btn-wrappper .te-theme-btn {
    width: 100%;
    max-width: 320px;
  }

  .te-btn-wrappper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .te-btn-wrappper .te-theme-btn.me-3 {
    margin-right: 0 !important;
  }
}

/* ========== Counters & process ========== */
@media (max-width: 575px) {
  .te-counter-card .te-counter-item .number {
    font-size: 30px !important;
  }

  .counter-up-area.style-1 {
    padding: 50px 0 !important;
  }

  .te-section-title .title {
    font-size: 26px !important;
    line-height: 34px !important;
    letter-spacing: -0.5px !important;
  }

  .te-section-title .short-title {
    font-size: 14px !important;
    letter-spacing: 2px !important;
  }

  .page-breadcrumb-area {
    padding: 70px 0 !important;
  }

  .page-heading .page-title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.3 !important;
  }
}

.highlight-icon-image {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
}

@media (max-width: 767px) {
  .te-info-card.style-5 .te-icon {
    width: 96px !important;
    height: 96px !important;
    font-size: 44px !important;
  }

  .te-info-card.style-5 .te-title-wrapper .te-title {
    font-size: 20px !important;
  }

  .te-process-step-area .te-info-card.style-5 {
    padding: 20px 16px;
  }

  .service-areas-grid .service-area-chip {
    font-size: 13px;
    padding: 10px 12px;
  }

  .te-theme-btn,
  .br-header__cta {
    min-height: 44px;
  }
}

/* ========== Footer ========== */
@media (max-width: 767px) {
  .footer-bottom-area .te-footer-bottom-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .te-footer-widget {
    margin-bottom: 24px;
  }

  .te-footer-widget .te-footer-logo img {
    max-width: 160px;
    height: auto;
  }
}

/* ========== Header ========== */
body.br-nav-open {
  overflow: hidden;
}

.br-header__cta-short {
  display: none;
}

.br-header__cta-full {
  display: inline;
}

@media (max-width: 1199px) {
  .br-header__cta-full {
    display: none;
  }

  .br-header__cta-short {
    display: inline;
  }
}

/* ========== Slick ========== */
@media (max-width: 767px) {
  .slick-slider,
  .contact-info-area .te-icon-card.style-2 {
    padding: 28px 20px;
  }

  .contact-form-area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .contact-form-area .te-theme-btn {
    width: 100%;
    justify-content: center;
  }

  .te-comment-form input,
  .te-comment-form select,
  .te-comment-form textarea {
    font-size: 16px;
    max-width: 100%;
  }
}

/* ========== FAQ ========== */
@media (max-width: 1199px) {
  .faq-area .row>.offset-xl-1 {
    margin-left: 0 !important;
  }

  .faq-area .col-xl-5 {
    margin-bottom: 30px;
  }

  .accordion-wrapper .te-accordion-list-item .te-accordion-head .te-accordion-title {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  .accordion-wrapper .te-accordion-list-item .te-accordion-head {
    padding: 14px 16px !important;
  }

  .accordion-wrapper .te-accordion-list-item .te-accordion-body {
    margin: 0 12px !important;
  }
}

/* ========== Service pages ========== */
@media (max-width: 991px) {
  .service-section-row.flex-row-reverse {
    flex-direction: column !important;
  }

  .service-section-row>[class*="col-"]:not(:last-child) {
    margin-bottom: 24px;
  }

  .service-section-row img.tilt-animate,
  .about-us-area .te-about-image-card img.tilt-animate {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }
}

/* ========== Bottom CTAs ========== */
@media (max-width: 991px) {
  .call-to-action-area .col-lg-4.text-lg-end {
    text-align: center !important;
    margin-top: 20px;
  }

  .call-to-action-area .te-theme-btn,
  .te-btn-wrappper .te-theme-btn {
    width: 100%;
    max-width: 320px;
  }

  .te-btn-wrappper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .te-btn-wrappper .te-theme-btn.me-3 {
    margin-right: 0 !important;
  }
}

/* ========== Counters & process ========== */
@media (max-width: 575px) {
  .te-counter-card .te-counter-item .number {
    font-size: 30px !important;
  }

  .counter-up-area.style-1 {
    padding: 50px 0 !important;
  }

  .te-section-title .title {
    font-size: 26px !important;
    line-height: 34px !important;
    letter-spacing: -0.5px !important;
  }

  .te-section-title .short-title {
    font-size: 14px !important;
    letter-spacing: 2px !important;
  }

  .page-breadcrumb-area {
    padding: 70px 0 !important;
  }

  .page-heading .page-title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.3 !important;
  }
}

.highlight-icon-image {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
}

@media (max-width: 767px) {
  .te-info-card.style-5 .te-icon {
    width: 96px !important;
    height: 96px !important;
    font-size: 44px !important;
  }

  .te-info-card.style-5 .te-title-wrapper .te-title {
    font-size: 20px !important;
  }

  .te-process-step-area .te-info-card.style-5 {
    padding: 20px 16px;
  }

  .service-areas-grid .service-area-chip {
    font-size: 13px;
    padding: 10px 12px;
  }

  .te-theme-btn,
  .br-header__cta {
    min-height: 44px;
  }
}

/* ========== Footer ========== */
@media (max-width: 767px) {
  .footer-bottom-area .te-footer-bottom-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .te-footer-widget {
    margin-bottom: 24px;
  }

  .te-footer-widget .te-footer-logo img {
    max-width: 160px;
    height: auto;
  }
}

/* ========== Header ========== */
body.br-nav-open {
  overflow: hidden;
}

.br-header__cta-short {
  display: none;
}

.br-header__cta-full {
  display: inline;
}

@media (max-width: 1199px) {
  .br-header__cta-full {
    display: none;
  }

  .br-header__cta-short {
    display: inline;
  }
}

/* ========== Slick ========== */
.slick-slider,
.slick-list {
  overflow: hidden;
  max-width: 100%;
}

/* ========== Mobile Overflows Fixes ========== */
@media (max-width: 991px) {
  .br-header__cta {
    display: none !important;
  }
}

@media (max-width: 767px) {

  /* Fix header logo pushing the menu */
  .br-header__inner {
    justify-content: space-between !important;
  }

  .br-header__logo img {
    max-width: 150px !important;
    height: auto !important;
  }

  /* Fix text overflowing in slider */
  .te-slider-title,
  .te-slider-short-desc,
  .te-section-title .title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* Fix footer bottom menu */
  .te-footer-bottom-menu ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* Force container widths and fix content-box bug */
  * {
    box-sizing: border-box !important;
  }

  .container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}