/* 01. Tablet Responsive */

@media screen and (max-width: 991.98px) {
    h1{
        font-size: 80px;
    }
    h2{
        font-size: 60px;
    }
    h3{
        font-size: 36px;
    }
    h4{
        font-size: 24px;
    }
    h5{
        font-size: 19px;
    }
    p{
        font-size: 16px;
    }
    .nav-btn{
        display: block;
    }
    .navbar-nav{
        display: none;
    }
    .navbar-cta-container{
        display: none;
    }
    .section-core-service{
        padding: 120px 20px 515px 20px;
    }
    .section-cta-contact{
        padding: 0px 20px 0px 20px;
    }
    .section-small{
        padding: 0px 20px 0px 20px;
    }
    .btn{
        padding: 15px 30px 15px 30px;
    }
    .home-title-container{
        width: 52%;
    }
    .home-avatar-container{
        width: 46%;
    }
    .banner-home-video{
        padding: 120px 20px 0px 20px;
        min-height: 93vh;
    }
    .home-spacer{
        width: 120px;
        border: 17px solid var(--accent-color);
    }
    .home-spacer .spacer-inner{
        height: 35px;
    }
    .achievement-stat{
        font-size: 60px;
    }
    .card-trust-us .card-number-wrapper{
        left: -35px;
        width: 170px;
        top: -25px;
    }
    .card-trust-us .card-number{
        font-size: 150px;
    }
    .trust-us-stat{
        font-size: 80px;
    }
    .team-title-container{
        position: relative;
    }
    .breadcrumb-item{
        font-size: 16px;
    }
    .project-heading-container{
        margin-bottom: -65px;
    }
    .project-section-heading{
        font-size: 150px;
    }
    .project-title a{
        font-size: 36px;
    }
    .project-result{
        font-size: 24px;
    }
    .project-result .result-link{
        font-size: 24px;
    }
    .core-heading-container {
        flex: 0 0 64%;
        max-width: 64%;
    }
    .core-service-logo-container {
        flex: 0 0 17%;
        max-width: 17%;
    }
    .core-service-description{
        width: 72%;
        align-self: flex-end;
    }
    .core-service-card-container{
        width: 100%;
    }
    .core-service-image{
        left: 51px;
        width: 60%;
    }
    .service-title-wrapper .service-title-heading{
        width: 100%;
    }
    .service-title-wrapper .service-title-description{
        width: 41%;
    }
    .service-title-wrapper .service-title-cta{
        width: 50%;
    }
    .service-description-content{
        width: 100%;
    }
    .service-tag-container{
        width: 100%;
    }
    .service-detail-list li{
        font-size: 19px;
    }
    .accordion-item .service-accordion-header .accordion-button{
        font-size: 80px;
    }    
    .accordion-item.service-acc-1 .service-accordion-header {
        padding-left: 145px;
    }

    .accordion-item.service-acc-2 .service-accordion-header {
        padding-left: 70px;
    }

    .accordion-item.service-acc-3 .service-accordion-header {
        padding-left: 202px;
    }

    .accordion-item.service-acc-4 .service-accordion-header {
        padding-left: 105px;
    }

    .accordion-item.service-acc-5 .service-accordion-header {
        padding-left: 34px;
    }
    .accordion-item .faq-accordion-header .accordion-button{
        font-size: 19px;
    }
    .faq-content-wrapper{
        grid-template-columns: 1fr;
        gap: 80px 0px;
    }
    .faq-heading-container{
        width: 65%;
    }
    .partnership-title-content{
        font-size: 16px;
    }
    .contact-cta-banner{
        padding: 50px 20px 50px 20px;
    }
    .contact-cta-title-container{
        width: 100%;
    }
    .contact-cta-title{
        font-size: 80px;
    }
    .contact-cta-text-container{
        width: 54%;
        margin-top: -54px;
    }
    .contact-cta-image{
        left: 0px;
        width: 69%;
    }
    .cta-highlight-content{
        width: 67%;
    }
    .card-blog .blog-title{
        font-size: 24px;
    }
    .post-tag-container{
        width: 71%;
    }
    .post-quote-text{
        font-size: 24px;
    }
    .post-quote-icon{
        font-size: 80px;
    }
    .post-quote-author{
        font-size: 16px;
    }
    .pricing-content-title{
        width: 47%;
    }
    .pricing-detail-list li{
        font-size: 16px;
    }
    .heading-highlight-container{
        right: -96px;
        width: 58%;
    }
    .chevron-circle-list a{
        font-size: 16px;
    }
    .pricing-heading-highlight{
        font-size: 150px;
    }
    .card-pricing .price{
        font-size: 36px;
    }
    .notfound-heading{
        font-size: 150px;
    }
    .contact-content-heading{
        font-size: 80px;
    }
    .contact-info-heading{
        font-size: 16px;
    }
    #newsletter-form input::placeholder{
        font-size: 24px;
    }
    .footer-icon{
        font-size: 18px;
        width: 40px;
        min-height: 40px;
    }
    .footer-title{
        font-size: 150px;
        margin-bottom: -36px;
    }
}

/* 02. Mobile Responsive */

@media screen and (max-width: 767.98px) {
    h1{
        font-size: 60px;
    }
    h2{
        font-size: 39px;
    }
    h3{
        font-size: 28px;
    }
    h4{
        font-size: 21px;
    }
    h5{
        font-size: 18px;
    }
    p{
        font-size: 14px;
    }
    .banner-home-video{
        padding: 120px 20px 120px 20px;
    }
    #banner-video-background{
        width: 500%;
        height: 500%;
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .btn{
        font-size: 14px;
        padding: 13px 26px 13px 26px
    }
    .home-spacer{
        width: 90px;
        border: 13px solid var(--accent-color);
        border-radius: 25px 0px 25px 0px;
    }
    .home-spacer .spacer-inner{
        height: 24px;
    }
    .home-title-container{
        width: 100%;
        text-align: center;
        align-items: center;
    }
    .home-avatar-container{
        width: 100%;
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
    }
    .navbar .logo-container{
        width: 50%;
    }
    .about-circle-logo-container{
        max-width: 30%;
        margin-right: 25px;
    }
    .breadcrumb-item{
        font-size: 14px;
    }
    .achievement-container{
        flex-direction: column;
        gap: 20px 20px;
    }
    .achievement-content{
        width: 100%;
    }
    .achievement-stat{
        font-size: 39px;
    }
    .core-service-heading-container{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .card-trust-us{
        gap: 50px 50px;
    }
    .card-trust-us .card-number-wrapper{
        left: -20px;
        width: 100px;
        top: 0px;
    }
    .card-trust-us .card-number{
        font-size: 80px;
    }
    .trust-us-stat{
        font-size: 60px;
    }
    .core-heading-container{
        flex: 0 0 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }
    .core-service-logo-container {
        flex: 0 0 22%;
        max-width: 22%;
        margin-top: -168px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 33px;
    }
    .section-core-service{
        padding: 120px 20px 263px 20px;
    }
    .card-core-service{
        width: 100%;
        gap: 40px 40px;
        padding: 20px 20px 20px 20px;
    }
    .core-service-icon{
        width: 50px;
        min-height: 50px;
    }
    .card-core-service:nth-child(even){
        margin-bottom: 0px;
    }
    .core-service-description{
        width: 100%;
        text-align: center;
    }
    .core-service-card-container{
        flex-direction: column;
    }
    .service-title-wrapper .service-title-heading,
    .service-title-wrapper .service-title-description,
    .service-title-wrapper .service-title-cta{
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .service-detail-list li{
        font-size: 18px;
    }
    .project-heading-container{
        margin-bottom: -30px;
    }
    .project-section-heading{
        font-size: 80px;
    }
    .project-title a{
        font-size: 28px;
    }
    .project-video-bg#video-bg-3,
    .project-video-bg{
        width: 250%;
        height: 250%;
    }
    .project-result{
        font-size: 21px;
    }
    .project-result .result-link{
        font-size: 21px;
    }
    .accordion-item .service-accordion-header .accordion-button{
        font-size: 60px;
    }
    .accordion-item.service-acc-1 .service-accordion-header {
        padding-left: 0px;
    }

    .accordion-item.service-acc-2 .service-accordion-header {
        padding-left: 0px;
    }

    .accordion-item.service-acc-3 .service-accordion-header {
        padding-left: 0px;
    }

    .accordion-item.service-acc-4 .service-accordion-header {
        padding-left: 0px;
    }

    .accordion-item.service-acc-5 .service-accordion-header {
        padding-left: 0px;
    }
    .accordion-item .faq-accordion-header .accordion-button{
        font-size: 18px;
    }
    .faq-heading-container{
        width: 100%;
    }
    .testimonial-card-wrapper::before{
        opacity: 0.9;
    }
    .team-title-container{
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .pricing-detail-list li{
        font-size: 14px;
    }
    .pricing-detail-list li::before{
        font-size: 16px;
    }
    .pricing-content-title{
        width: 100%;
    }
    .pricing-description{
        font-size: 12px;
    }
    .heading-highlight-container{
        right: 10px;
    }
    .pricing-heading-highlight{
        font-size: 80px;
    }
    .card-pricing .price{
        font-size: 28px;
    }
    .swiperpartner{
        margin: 0px -120px 0px -120px;
    }
    .partnership-title-content{
        font-size: 14px;
    }
    .contact-cta-banner{
        border-radius: 50px 0px 50px 0px;
        gap: 20px 20px;
    }
    .contact-cta-title{
        font-size: 60px;
        text-align: center;
    }
    .contact-cta-text-container{
        width: 100%;
        text-align: center;
        margin-top: 0px;
    }
    .contact-info-heading{
        font-size: 14px;
    }
    .contact-cta-image{
        width: 100%;
    }
    .contact-content-heading{
        font-size: 60px;
    }
    .cta-highlight-content{
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .footer-info{
        font-size: 12px;
    }
    .chevron-circle-list a{
        font-size: 14px;
    }
    .notfound-heading{
        font-size: 80px;
    }
    .notfound-description{
        width: 100%;
    }
    .card-post-quote{
        flex-direction: column;
        padding: 30px 30px 30px 30px;
    }
    .card-blog .blog-title{
        font-size: 21px;
    }
    .post-tag-container{
        width: 100%;
    }
    .post-quote-icon{
        font-size: 60px;
    }
    .post-quote-text{
        font-size: 21px;
    }
    .post-quote-author{
        font-size: 14px;
    }
    #newsletter-form{
        flex-direction: column;
        gap: 20px 20px;
    }
    #newsletter-form input{
        width: 100%;
    }
    #newsletter-form button{
        width: 100%;
    }
    #newsletter-form input::placeholder{
        font-size: 21px;
    }
    .footer-copyright-container{
        flex-direction: column;
        justify-content: center;
    }
    .footer-icon{
        font-size: 16px;
        width: 35px;
        min-height: 35px;
    }
    .footer-title{
        font-size: 80px;
    }
    .legalink,
    .copyright{
        font-size: 12px;
        text-align: center;
    }
}

/* 03. Mobile Spacing Responsive */

@media screen and (min-width: 767px){

    /* Flex spacing (gap) */

    .gspace-md-0 { 
        gap: 0px 0px; 
    }
    .gspace-md-1 { 
        gap: 10px 10px; 
    }
    .gspace-md-2 { 
        gap: 20px 20px; 
    }
    .gspace-md-3 { 
        gap: 30px 30px; 
    }
    .gspace-md-4 { 
        gap: 40px 40px; 
    }
    .gspace-md-5 { 
        gap: 50px 50px; 
    }
    .gspace-md-100 { 
        gap: 100px 100px; 
    }

    /* Grid spacing (column-gap) */

    .gspace-x-md-0 { 
        column-gap: 0px; 
    }
    .gspace-x-md-0 { 
        column-gap: 0px; 
    }
    .gspace-x-md-1 { 
        column-gap: 10px; 
    }
    .gspace-x-md-2 { 
        column-gap: 20px; 
    }
    .gspace-x-md-3 { 
        column-gap: 30px; 
    }
    .gspace-x-md-4 { 
        column-gap: 40px; 
    }
    .gspace-x-md-5 { 
        column-gap: 50px; 
    }
    .gspace-x-md-100 { 
        column-gap: 100px; 
    }

    /* Grid spacing (row-gap) */

    .gspace-y-md-0 { 
        row-gap: 0px; 
    }
    .gspace-y-md-1 { 
        row-gap: 10px; 
    }
    .gspace-y-md-2 { 
        row-gap: 20px; 
    }
    .gspace-y-md-3 { 
        row-gap: 30px; 
    }
    .gspace-y-md-4 { 
        row-gap: 40px; 
    }
    .gspace-y-md-5 { 
        row-gap: 50px; 
    }
    .gspace-y-md-100 { 
        row-gap: 100px; 
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-spacer-md-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-md-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-md-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-md-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-md-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-md-100 { 
        --bs-gutter-x: 100px; 
        --bs-gutter-y: 100px; 
    }

    /* Grid spacing (column-gap) */

    .grid-spacer-x-md-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-spacer-x-md-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-md-2 { 
        --bs-gutter-x: 20px; 
    }
    .grid-spacer-x-md-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-spacer-x-md-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-spacer-x-md-5 { 
        --bs-gutter-x: 50px; 
    }
    .grid-spacer-x-md-100 { 
        --bs-gutter-x: 100px; 
    }

    /* Grid spacing (row-gap) */

    .grid-spacer-y-md-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-y-md-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-md-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-y-md-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-y-md-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-y-md-5 { 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-y-md-100 { 
        --bs-gutter-y: 100px; 
    }
}

/* 04. Tablet Spacing Responsive */

@media screen and (min-width: 1025px){
    /* Flex spacing (gap) */
    .gspace-lg-0 { 
        gap: 0px 0px; 
    }
    .gspace-lg-1 { 
        gap: 10px 10px; 
    }
    .gspace-lg-2 { 
        gap: 20px 20px; 
    }
    .gspace-lg-3 { 
        gap: 30px 30px; 
    }
    .gspace-lg-4 { 
        gap: 40px 40px; 
    }
    .gspace-lg-5 { 
        gap: 50px 50px; 
    }
    .gspace-lg-100{
        gap: 100px 100px;
    }

    /* Grid spacing (column-gap) */

    .gspace-x-lg-0 { 
        column-gap: 0px;
    }
    .gspace-x-lg-1 { 
        column-gap: 10px; 
    }
    .gspace-x-lg-2 {
         column-gap: 20px; 
    }
    .gspace-x-lg-3 { 
        column-gap: 30px; 
    }
    .gspace-x-lg-4 { 
        column-gap: 40px; 
    }
    .gspace-x-lg-5 { 
        column-gap: 50px; 
    }
    .gspace-x-lg-100{
        column-gap: 100px;
    }

    /* Grid spacing (row-gap) */

    .gspace-y-lg-0 { 
        row-gap: 0px; 
    }
    .gspace-y-lg-1 { 
        row-gap: 10px; 
    }
    .gspace-y-lg-2 { 
        row-gap: 20px; 
    }
    .gspace-y-lg-3 { 
        row-gap: 30px; 
    }
    .gspace-y-lg-4 { 
        row-gap: 40px; 
    }
    .gspace-y-lg-5 { 
        row-gap: 50px; 
    }
    .gspace-y-lg-100 {
        row-gap: 100px;
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-spacer-lg-0 { 
        --bs-gutter-x: 0px; 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-lg-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-lg-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-lg-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-lg-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-lg-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-lg-100 { 
        --bs-gutter-x: 100px; 
        --bs-gutter-y: 100px; 
    }

    /* Grid spacing (column-gap) */

    .grid-spacer-x-lg-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-spacer-x-lg-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-lg-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-lg-2 { 
        --bs-gutter-x: 20px;
    }
    .grid-spacer-x-lg-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-spacer-x-lg-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-spacer-x-lg-5 { 
        --bs-gutter-x: 50px; 
    }
    .grid-spacer-x-lg-100 { 
        --bs-gutter-x: 100px; 
    }

    /* Grid spacing (row-gap) */

    .grid-spacer-y-lg-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-y-lg-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-lg-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-lg-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-y-lg-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-y-lg-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-y-lg-5 { 
        --bs-gutter-y: 50px; 
    }
    .grid-spacer-y-lg-100 { 
        --bs-gutter-y: 100px; 
    }
}
/* ---------------------------------------------------------------------------
   Review fixes, 2026-09-16 — mobile
   --------------------------------------------------------------------------- */

/* The service headings (DELIVERY, BUILD AND CALIBRATION, ...) were cut off on
   phones. The cause is `margin-block-end: -30px` on the accordion button: a
   deliberate overlap that works at the desktop 115px, but at 80px with the
   longer titles wrapping to two lines it pulls the following row up over the
   second line and clips it.
   Smaller type so the long ones fit, no negative margin, and the decorative
   indents dropped — on a narrow screen they only push text off the edge. */
@media (max-width: 767px) {
    .accordion-item .service-accordion-header .accordion-button {
        font-size: 40px;
        line-height: 1.15em;
        margin-block-end: 0;
        -webkit-text-stroke-width: 1.5px;
        stroke-width: 1.5px;
    }
    .accordion .accordion-item .service-accordion-header,
    .accordion-item.service-acc-1 .service-accordion-header,
    .accordion-item.service-acc-2 .service-accordion-header,
    .accordion-item.service-acc-3 .service-accordion-header,
    .accordion-item.service-acc-4 .service-accordion-header,
    .accordion-item.service-acc-5 .service-accordion-header {
        padding-left: 0;
    }

    /* "YOUR DATE. YOUR ROOM. YOUR WALL." was overlapping the panel beside it.
       Stack the two halves on a phone instead of letting them collide. */
    .cta-contact-container,
    .cta-contact-content {
        position: static;
    }

    /* Big outlined display type generally: no negative margins on a narrow
       screen, they are what produces the clipping. */
    .pricing-heading-highlight {
        font-size: 84px;
    }
}

/* The CTA banner stacks on a phone: the photo is absolutely positioned and
   would otherwise sit under the text. */
@media (max-width: 991px) {
    .contact-cta-banner {
        padding: 40px 24px 40px 24px;
        border-radius: 48px 0 48px 0;
    }
    .contact-cta-title-container,
    .contact-cta-text-container {
        width: 100%;
        margin-left: 0;
    }
    .contact-cta-title {
        font-size: 38px;
    }
    .contact-cta-text-container {
        margin-top: 20px;
    }
    /* Shown above the text rather than behind it. */
    .contact-cta-image {
        position: relative;
        left: 0;
        width: 100%;
        margin-bottom: 28px;
    }
}

/* On a phone the circular badge was landing on top of "LED walls for Tampa
   events". It is a flex row on desktop -- heading beside badge -- which
   collapses badly at narrow widths.
   Stack them: badge first, heading under it, both in normal flow. */
@media (max-width: 991px) {
    .core-service-heading-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .core-service-logo-container {
        flex: 0 0 auto;
        max-width: 110px;
        width: 110px;
        order: -1;
        align-self: flex-start;
        padding-top: 0;
    }
    .core-heading-container {
        width: 100%;
    }
    /* The outlined duplicate of the heading sits absolutely over the filled
       one. At desktop sizes the offset reads as a design flourish; at phone
       widths the two copies land on top of each other and the text looks
       doubled. Show only the filled one. */
    .core-service-heading.heading-stroke {
        display: none;
    }
}