/* 1300, 1200, 1024, 992, 768, 480 */

@media (max-width: 1300px) {
    .main-selection-color-container{
        flex-direction: column;
    }
    .carousel-selection-container{
        height: 350px;
    }
    .image-color-container{
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .selection-container{
        width: 100%;
        position: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .carousel-color-controls{
        position: unset !important;
        transform: unset !important;
    }
    .carousel-selection-item{
        left: 0;
    }
    .selection-container .prev-overlay{
        top: 50%;
        left: 50px;
    }
    .selection-container .next-overlay{
        top: 50%;
    }
    .color-tabs-category{
        width: 70%;
    }
}
@media (max-width: 1200px) {
    .color-swatches-panel{
        grid-template-columns: repeat(8, 1fr);
    }
    #productCatalogueEcho{
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .about-us-second-right, .about-us-fifth-right{
        display: flex;
    }
    .acoustic-section .main-acoustic-container h1{
        font-size: 100px;
    }
    .acoustic-section .acoustic-panel-layer{
        width: calc(100% - 100px);
    }
}

@media (max-width: 1024px) {
    .color-tabs-category{
        width: 90%;
    }
    .acoustic-section .acoustic-panel-layer{
        width: calc(100% - 50px);
    }
    .acoustic-section .image-acoustic-container{
        margin-top: -70px;
    }
    .acoustic-section .main-acoustic-container h1{
        font-size: 90px;
    }
    .sub-header-container h4{
        text-align: center;
    }
    .sub-header-container .tabs{
        border-radius: 15px;
        display: grid; 
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        text-align: center;
    }
    .sub-header-container .tabs li {
        border-radius: 10px;
        margin: 5px;
    }
    .sub-header-container .tabs .tab{
        font-size: 14px !important;
    }
}

@media (max-width: 992px) {
    .audisa-container {
        align-items: center;
    }
    .selection-bottom .discover{
        width: 80%;
    }
    .image-color-container{
        aspect-ratio: 1 / 1;
    }
    .sub-selection-color-container{
        flex-direction: column;
    }
    .image-sub-container {
        width: 100%;
        overflow: hidden;
        aspect-ratio: 4 / 2;
    }
    .color-cart-tabs-category{
        width: 80%;
    }
    .color-info{
        justify-content: center;
    }
    .add-selection-container{
        flex-direction: column;
        align-items: center;
    }
    .add-selection-left-container{
        width: 80%;
    }
    .add-selection-right-container{
        width: 100%;
        padding: 20px;
    }
    .color-section .container .color-main-title-container h1{
        width: 100%;
    }
    .panel-cart-tabs-category{
        width: 100%;
    }
    .add-top-container{
        flex-direction: column;
    }
    .add-top-container .add-left-container,
    .add-top-container .add-right-container{
        width: 100%;
    }
    .right-add h1{
        text-align: center;
    }
    .right-add{
        align-items: center;
    }
    .quantity-info-container{
        justify-content: center;
    }
    .other-product-swatches{
        justify-content: center !important;
    }
    .add-cart-common-left, .add-cart-common-right{
        width: 100%;
        padding: 0;
    }
    .add-cart-common-section{
        flex-direction: column;
        gap: 50px;
    }
    .common-footer-cart{
        align-items: center;
    }
    .about-us-fifth-right{
        padding: 0;
    }
    .about-us-third .container,
    .about-us-fifth .container{
        flex-direction: column;
        align-items: center;
    }
    .about-us-fifth .container{
        gap: 40px;
    }
    .about-us-third-left,
    .about-us-third-right,
    .about-us-fifth-right,
    .about-us-fifth-left{
        width: 95%;
    }
    .about-us-second-left-content{
        width: 95%;
    }
    .about-us-second .container{
        flex-direction: column;
        gap: 50px;
    }
    .about-us-second-left,
    .about-us-second-right{
        width: 100%;
        padding: 0;
    }
    .about-us-fifth-left-content{
        width: 90%;
    }
    .second-right-image-container,
    .fifth-right-image-container{
        aspect-ratio: 16 / 9;
    }
    .overlay-first-image{
        gap: 10px;
    }
    .about-us-first-image-container .overlay-first-image h1{
        font-size: 25px;
        line-height: 1;
    }
    .about-us-first-image-container .overlay-first-image p{
        font-size: 13px;
        line-height: 1;
    }
    .about-sub-header-title p{
        width: 90%;
    }
    .about-us-first .container .about-sub-header-title h1{
        text-align: center;
    }
    .acoustic-section .acoustic-images-container{
        width: 600px;
    }
    .acoustic-section .image-acoustic-container{
        margin-top: -60px;
    }
    .acoustic-section .main-acoustic-container h1{
        font-size: 70px;
    }
    .desc-center-right{
        right: unset;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .new-first-description a{
        text-align: center;
    }
    .new-first-description p{
        text-align: center;
    }
    .second-section .description{
        max-height: 100%;
    }
}

@media (max-width: 768px) {
    .audisa-preloader img {
        width: 400px; 
    }
    .sub-selection-color-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .image-sub-container img{
        border-radius: 20px;
    }
    .sub-selection-color-container > div:nth-child(3) {
        grid-column: 1 / 3;
        aspect-ratio: 16/4;
    }
    .acoustic-section .acoustic-highlight-layer h1,
    .acoustic-section .acoustic-look-layer h1,
    .acoustic-section .acoustic-quiet-layer h1,
    .acoustic-section .acoustic-sound-layer h1{
        font-size: 30px;
        line-height: 35px;
        text-align: center;
    }
    .acoustic-section .acoustic-look-layer p,
    .acoustic-section .acoustic-quiet-layer p{
        font-size: 20px;
        line-height: 25px;
    }
    .acoustic-section .acoustic-perception-layer button{
        padding: 8px 20px;
    }
    .carousel-palette-name{
        width: 100%;
    }
    .acoustic-section .acoustic-highlight-layer,
    .acoustic-section .acoustic-look-layer,
    .acoustic-section .acoustic-quiet-layer,
    .acoustic-section .acoustic-sound-layer{
        margin: 50px 0 0 0;
    }
    .acoustic-section .upper-acoustic-container{
        gap: 15px;
    }
    .second-section .description {
        padding: 0;
    }
    .second-section .description h1{
        font-size: 30px;
        line-height: 35px;
    }
    .layer-images-container .image-text-overlay h2{
        font-size: 13px;
    }
    .layer-images-container .image-container{
        width: 200px;
    }
    .layer-images-container .image-container .image-text-overlay{
        left: 15px;
        top: 15px;
    }
    .selection-bottom .discover{
        width: 100%;
    }
    
    .color-tabs-category{
        width: 100%;
    }
    .carousel-selection-item{
        width: 200px;
        aspect-ratio: 9 / 12;
    }
    .carousel-selection-container {
        height: 300px;
    }
    
    .new-first-description{
        width: 90%;
    }
    .common-footer-cart h1,
    .right-add h1{
        text-align: center;
    }
    .add-cart-colors{
        padding: 20px;
    }
    .color-cart-tabs-category{
        width: 90%;
    }
    .color-cart-tabs-category, .color-tabs-category{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 15px;
    }
    
    .color-swatches-panel{
        grid-template-columns: repeat(6, 1fr);
    }
    .add-right-container{
        padding: 0;
    }
    .bottom-desciption-dl{
        flex-direction: column;
        align-items: center;
    }
    .color-matters-panel{
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .color-matters-panel-left, .color-matters-panel-right{
        gap: 5px;
    }
    .custom-dropdown, .custom-thickness{
        width: 100%;
    }
    .dropdown-colors{
        display: flex;
        justify-content: space-between;
    }
    .categorypanel{
        font-size: 13px;
    }
    .common-img-container{
        overflow: unset;
    }
    .new-first-description .desc-center-right{
        width: 80% !important;
    }
    .sub-header-container h4{
        margin-top: 25px;
    }
    .about-us-fifth-right{
        width: 100%;
    }
    .about-us-fourth-container.about-us-fourth-first-container .content{
        left: 50%;
        transform: translate(-50%, -50%) !important;
        max-width: unset;
        width: 80%;
    }
    .about-us-fourth-container.about-us-fourth-second-container .content{
        right: 50%;
        transform: translate(50%, -50%);
        max-width: unset;
        width: 80%;
    }
    .about-us-third .container{
        padding: 0 40px 40px 40px;
    }
    .about-us-first-image-container .overlay-first-image h1{
        font-size: 20px;
    }
    .about-us-first-image-container .overlay-first-image p{
        font-size: 12px;
    }
    .about-us-first .container{
        padding: 10px;
    }
    .about-sub-header-title{
        padding: 15px;
    }
    .acoustic-section .acoustic-images-container{
        width: 450px;
    }
    .acoustic-section .acoustic-images-container h1{
        font-size: 30px;
    }
    .acoustic-section .upper-acoustic-container{
        flex-direction: column;
        text-align: center;
    }
    .acoustic-section .image-acoustic-container{
        margin-top: -50px;
    }
    .acoustic-section .main-acoustic-container h1{
        font-size: 50px;
    }
    .second-section .description{
        padding: 0 20px;
    }
    .sub-header-container .tabs{
        grid-template-columns: repeat(2, 1fr);
    }
    .sub-header-container p {
        display: none;
    }
}

@media (max-width: 480px) {
    .audisa-preloader img {
        width: 250px; 
    }
    .about-us-fourth-container .content p{
        font-size: 13px;
    }
    .selection-container .prev-overlay{
        top: calc(100% + 20px);
        left: 50px;
    }
    .selection-container .next-overlay{
        top: calc(100% + 20px);
    }
    .add-selection-right-container{
        padding: 20px 0;
    }
    .image-sub-container{
        aspect-ratio: 16/8;
    }
    .image-sub-container img{
        border-radius: 10px !important;
    }
    .sub-selection-color-container > div:nth-child(3) {
        grid-column: unset;
        aspect-ratio: 16/8;
    }
    .sub-selection-color-container{
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .acoustic-section .acoustic-highlight-layer h1,
    .acoustic-section .acoustic-look-layer h1,
    .acoustic-section .acoustic-quiet-layer h1,
    .acoustic-section .acoustic-sound-layer h1{
        font-size: 25px;
        line-height: 35px;
    }
    .acoustic-section .acoustic-look-layer p,
    .acoustic-section .acoustic-quiet-layer p{
        font-size: 15px;
        line-height: 20px;
    }
    .acoustic-panel-layer{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .common-section .layer-title-container h1{
        font-size: 25px;
        line-height: 30px;
    }
    .second-section .card-description-container p{
        line-height: 1;
        font-size: 11px;
    }
    .second-section .details-btn{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        height: fit-content;
        border-radius: 10px;
        gap: 5px;
        margin: 0 auto 10px auto;
    }
    .second-section .details-btn button {
        font-size: 13px;
    }
    .second-section .description h1{
        line-height: 1;
        font-size: 20px;
    }
    .second-section .description {
        padding: 0 10px;
    }
    .second-section .description p{
        font-size: 13px;
        line-height: 1;
    }
    .new-first-section .prev-overlay{
        left: 7%;
    }
    .new-first-section .next-overlay{
        right: 7%;
    }
    .image-color-overlay{
        padding: 20px;
    }
    .image-color-container img,
    .image-sub-container img,
    .color-main-container{
        border-radius: 20px;
    }
    .carousel-selection-item{
        width: 150px;
        aspect-ratio: 9 / 12;
    }
    .carousel-palette-name{
        width: 100%;
        padding: 10px;
        border-radius: 10px;
    }
    .carousel-palette-name h1,
    .selection-bottom p{
        line-height: 1;
        font-size: 13px;
    }
    .selection-bottom .discover{
        line-height: 1;
        font-size: 13px;
        padding: 10px;
    }
    .carousel-selection-container {
        height: 220px;
    }
    .color-main-container{
        padding: 20px;
    }
    .add-selection-left-container {
        width: 100%;
    }
    .new-first-description a{
        font-size: 13px;
    }
    .color-swatches-panel{
        grid-template-columns: repeat(4, 1fr);
    }
    .quantity-info-container{
        flex-direction: column;
        align-items: center;
    }
    .add-cart-container{
        flex-direction: column;
    }
    .color-tabs{
        width: 95%;
    }
    .discount-switch{
        width: 50px;
        height: 20px;
    }
    .discount-slider:before{
        width: 20px;
        height: 14px;
    }
    .get-discount-container h1, #product-price{
        font-size: 15px !important;
    }
    .guides-download h1,
    .guides-download a,
    .guides-download i{
        font-size: 13px !important;
        line-height: 1;
    }
    .panel-cart-tabs-category, .color-cart-tabs-category{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 15px;
    }
    .right-main-add-image{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .right-bottom-main-image-container{
        position: unset;
        transform: unset;
    }
    .right-top-base-container.left{
        width: 80%;
    }
    .right-top-base-container.right{
        width: 50%;
    }
    .color-section .container .color-main-title-container{
        width: calc(100% - 50px);
    }
    .color-section .container .color-main-title-container h1{
        font-size: 25px;
        line-height: 1;
        text-align: center;
    }
    #panel-specs-container{
        width: calc(100% - 40px);
        padding: 10px !important;
    }
    .common-download-info{
        width: 100%;
    }
    .add-cart-colors{
        width: calc(100% - 40px);
        padding: 10px 0;
    }
    .common-footer-cart{
        gap: 15px;
    }
    .common-footer-cart h1,
    .right-add h1{
        font-size: 20px;
        line-height: 1;
    }
    .common-image-info{
        width: 90%;
    }
    .common-footer-cart p{
        padding: 0 5px;
    }
    .product-catalogue-echo{
        width: 300px;
    }
    .about-us-fifth .container{
        padding: 20px 10px;
    }
    .about-us-fifth-left-content h1{
        font-size: 25px;
        line-height: 1;
    }
    .about-us-fifth-left-content p{
        font-size: 13px;
    }
    .about-us-fourth-container.about-us-fourth-first-container .content,
    .about-us-fourth-container.about-us-fourth-second-container .content{
        width: 90%;
    }
    .about-us-third-left{
        width: 100%;
    }
    .about-us-third-right{
        width: 100%;
        padding: 15px;
    }
    .about-us-third-right p{
        font-size: 13px;
    }
    .overlay-first-image{
        width: 40%;
    }
    .about-us-first-image-container .overlay-first-image h1{
        font-size: 15px;
        line-height: 1;
    }
    .about-us-first-image-container .overlay-first-image p{
        font-size: 11px;
        line-height: 1;
    }
    .acoustic-section .acoustic-images-container{
        width: 350px;
    }
    .acoustic-section .acoustic-images-container h1{
        font-size: 20px;
        line-height: 25px;
    }
    .acoustic-section .carousel-acoustic-controls{
        gap: 15px;
    }
    .acoustic-section .image-acoustic-container{
        margin-top: -25px;
    }
    .acoustic-section .main-acoustic-container h1{
        font-size: 2rem;
        text-align: center;
    }
    .mix-logo{
        padding: 0 20px !important;
    }
    .sub-header-container h4{
        margin-top: 25px;
    }
    .sub-header-container .tabs{
        grid-template-columns: repeat(1, 1fr);
    }
    .sub-header-container .tabs .tab{
        font-size: 12px !important;
    }
}