@media (min-width: 1800px){ 

}

@media (min-width: 1600px) and (max-width: 1799px){

}

@media (min-width: 1440px) and (max-width: 1599px){

    .counter-sec {padding: 80px 0 120px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 38px; line-height: 44px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap .counter-box h3 {font-size: 28px;}

    .tiles_adhesive {margin: 80px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 38px; line-height: 44px;}
    .titel-video-sec {align-items: stretch; gap: 40px;}

}
@media (min-width: 1400px) and (max-width: 1439px){

    .navigation_bar .nav_bar ul li:not(:first-child) {margin-left: 35px;}
    .header_logo a {height: 40px;}
    .counter-sec {padding: 70px 0 100px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 38px; line-height: 44px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap .counter-box h3 {font-size: 28px;}

    .tiles_adhesive {margin: 70px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 38px; line-height: 44px;}
    .titel-video-sec {align-items: stretch; gap: 25px;}
}

@media (min-width: 1300px) and (max-width: 1399px){

    .navigation_bar .nav_bar ul li:not(:first-child) {margin-left: 35px;}
    .header_logo a {height: 50px;}
    .counter-sec {padding: 70px 0 100px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 38px; line-height: 44px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap .counter-box h3 {font-size: 28px;}

    .tiles_adhesive {margin: 70px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 38px; line-height: 44px;}
    .titel-video-sec {align-items: stretch; gap: 25px;}
    .titel-video-sec .video-box {height: 380px;}
    
}


@media (min-width: 1200px) and (max-width: 1299px){

    .navigation_bar .nav_bar ul li:not(:first-child) {margin-left: 35px;}
    .header_logo a {height: 50px;}
    .counter-sec {padding: 70px 0 100px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 38px; line-height: 44px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap .counter-box h3 {font-size: 28px;}

    .tiles_adhesive {margin: 70px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 38px; line-height: 44px;}
    .titel-video-sec {align-items: stretch; gap: 25px;}
}




@media (min-width: 992px) and (max-width: 1199px){

    .navigation_bar .nav_bar ul li:not(:first-child) {margin-left: 35px;}
    .header_logo a {height: 50px;}
    .counter-sec {padding: 70px 0 100px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 38px; line-height: 44px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap .counter-box h3 {font-size: 28px;}
    .counter-wrap .counter-box::after {left: -15px;}
    .tiles_adhesive {margin: 70px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 38px; line-height: 44px;}
    .titel-video-sec {align-items: stretch; gap: 25px;}
    .titel-video-sec .video-box {height: 380px;}

}


@media (max-width: 991px){

    .menu-btn {display: flex;/* position: absolute; *//* top: 21px; *//* right: 20px; *//* justify-content: center; *//* align-items: center; */z-index: 1000;}
    .header_main .navigation_bar { position: fixed; top: 0; left: 100%; width: 100%; height: auto; bottom: 0; background: rgba(0, 0, 0, 0.8); display: block;
        transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
    }
    .navigation_bar .nav_bar ul li a {font-size: 20px;color: #FFFFFF; line-height: 1.3;}
    
    .open-nav .navigation_bar {left: 0; display: block; }
    body.open-nav { overflow: hidden; }
    body.open-nav:after { opacity: 1;pointer-events: auto; }
    .header_main .navigation_bar .nav_bar ul { flex-direction: column;  justify-content: flex-start; align-items: flex-start;}
    .header_main .navigation_bar {box-shadow: none; margin-top: 0;padding: 20px 0; overflow-y: auto; flex-direction: column; align-items: center; display: flex; gap: 40px;}
    .header_main .navigation_bar .nav_bar {flex-direction: column; padding-top: 100px; width: 100%; gap: 0;}
    .navigation_bar .nav_bar .btnbox {margin-top: 30px; display: flex; justify-content: center; align-items: center;}
    .navigation_bar .nav_bar .btnbox a {background-color: #FFF; color: #000;}
    .roof_wrap {padding: 120px 0 40px;}
    .header_main { z-index: 11111; height: 80px;}
    .navigation_bar .nav_bar ul li {margin-bottom: 20px;}
    .language_wrap ul li:not(:first-child) {margin: 0;}
    .navigation_bar .nav_bar > ul > li:not(:first-child) {margin-bottom: 20px; margin-left: 0;}
    .header_logo a {display: flex; position: relative; z-index: 1;}
    .desktop {display: none;}
    .mobile { display: block; }
    .mobile ul {flex-direction: column; gap: 20px;}
    .header_main .navigation_bar .nav_bar ul {width: 100%;}
    .header_main .navigation_bar .nav_bar ul .menu-item-has-children .sub-menu {max-height: 0; overflow: hidden;
    transition: all 0.4s ease-in-out;}
    
    .navigation_bar .nav_bar .menu-item-has-children > a {display: flex; align-items: center; justify-content: space-between; width: 100%;}
    .menu-item-has-children .icon{background-image: url(../images/small-down-arrow.svg);
        background-repeat: no-repeat;
        background-size: contain;
        height: 14px;
        width: 14px;
        background-position: bottom;
        transition: all 0.3s ease-in-out;
        margin-left: 10px;
        display: flex;
    }

    .menu-item-has-children.active .icon {transform: rotate(180deg);}
    .header_main .navigation_bar .nav_bar ul { padding: 0 15px; max-width: 750px;}
    
    .navigation_bar .nav_bar .sub-menu { position: relative; right: auto; top: auto; margin: 0; transition: none; opacity: 1; visibility: visible; pointer-events: all; margin: 0; padding: 0;}
    .navigation_bar .nav_bar .sub-menu::before,
    .navigation_bar .nav_bar .sub-menu::after { display: none;}
    .navigation_bar .nav_bar .sub-menu ul { margin: 0; padding: 20px;}
    .navigation_bar .nav_bar .menu-item-has-children.active .sub-menu{margin-top: 20px;} 
    .navigation_bar .nav_bar ul li { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
    .navigation_bar .nav_bar ul li::before {display: none;}
    .navigation_bar .nav_bar ul .sub-menu li a { line-height: 1.5;}
    .language_wrap ul { flex-direction: row;}
    .navigation_bar .nav_bar ul .sub-menu li a {font-size: 16px;}
    .navigation_bar .nav_bar ul .sub-menu li {justify-content: flex-start; align-items: flex-start; padding-bottom: 5px;}
    .header_main .navigation_wrap .logo .header_logo {display: none;}
    .navigation_bar .nav_bar .sub-menu {width: 233px;}
    .navigation_bar .nav_bar ul li .sub-menu{opacity: 1; visibility: visible;}

    
    .mobile_menu {display: flex;align-items: center;justify-content: space-between;width: 100%;height: 100%;padding: 25px 0;}
    .mobile_menu .mobile_logo {display: flex;position: relative;}
    .mobile_logo a{display: flex; height: 50px;}
    .mobile_logo a img {display: flex; width: 100%; height: 100%;}
    .header_main .navigation_wrap {display: flex;align-items: center;justify-content: space-between;height: 80px;}
    .header_main .container {width: 100%; max-width: 750px;}
    
    .image_slide {height: 100%;}
   
}


@media (min-width: 768px) and (max-width: 991px){

    .counter-sec {padding: 60px 0 100px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 34px; line-height: 40px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap .counter-box h3 {font-size: 26px;}
    .counter-wrap {flex-wrap: wrap; gap: 20px;}
    .counter-wrap .counter-box::after {left: -15px;}

    .tiles_adhesive {margin: 60px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 34px; line-height: 40px;}
    .titel-video-sec {flex-direction: column;}
    .titel-video-sec .video-box {width: 100%; height: 350px;}
    .titel-video-sec .text-box {width: 100%;}
   
}

@media (max-width: 767px){

    .counter-sec {padding: 50px 0 80px;}
    .counter-sec .counter-grp .counter-title h2 {font-size: 30px; line-height: 40px;}
    .counter-sec .counter-grp .counter-title {margin-bottom: 80px;}
    .counter-wrap {flex-wrap: wrap; gap: 15px;}
    .counter-wrap .counter-box {width: 45%; }
    .counter-wrap .counter-box::after {left: -25px;}
    .counter-wrap .counter-box h3 {font-size: 24px;}

    .tiles_adhesive {margin: 50px 0;}
    .tiles_adhesive .tiles-grp .tiles-title h2 {font-size: 30px; line-height: 40px;}
    .titel-video-sec {flex-direction: column;}
    .titel-video-sec .video-box {width: 100%; height: 300px;}
    .titel-video-sec .text-box {width: 100%;}
  
    
}

@media (max-width: 575px){

}


/* =================================== ABOUT PAGE & JOURNEY SECTION RESPONSIVE =================================== */

/* --- 1921px + --- */
@media (min-width: 1921px) {
    :root { --fz164:8.542vw; --fz96:5vw; --fz20:1.042vw; }
    .journy_wrap { padding: 4.997vw 0; }
    .journy_wrap .journy_sec { max-width: 93.701vw; padding: 0 3.123vw; }
    .journy_wrap .journy_sec .journy_heading { padding-bottom: 3.332vw; }
    .journy_scroll { gap: 3.332vw; padding-left: calc(50% - 20.8225vw); padding-right: calc(50% - 20.8225vw); }
    .journy_scroll .journy_grp { width: 41.645vw; min-width: 41.645vw; }
    .journy_dtl { padding-top: 5.778vw; }
    .journy_dtl h6 { font-size: 1.249vw; padding-bottom: 1.249vw; }
    .journy_dtl p { font-size: 1.041vw; }
    .line_scroll::after { width: 5.206vw; content: ''; margin-top: 3.071vw; right: -3.332vw; }
    .round_wrap { width: 1.041vw; height: 1.041vw; margin-top: 2.603vw; }
    .round_wrap::after { width: 0.937vw; height: 0.937vw; }
    .round_wrap::before { width: 0.312vw; height:0.312vw; }
    .line_scroll::before { margin-top: 3.071vw; }
    
    .how_do_wrap { padding-top: 4.997vw; }
    .how_do_wrap .how_do { max-width: 93.701vw; padding: 0 3.123vw; }
    .how_do_wrap .how_do .how_heading { padding-bottom: 4.997vw; }
    .how_do_wrap .how_do .how_heading span { font-size: 7.808vw; }
    .floor_content { max-width: 46.851vw; }
    .floor_content i { padding-bottom: 1.249vw; }
    .floor_content h2 { padding-bottom: 1.249vw; }
    .round_dots { right: 3.123vw; }
    .round_dots ul li:not(:last-child) { padding-bottom: 1.249vw; }
    .round_dots ul li span { width: 0.312vw; height: 0.312vw; }
    .round_dots ul li.active span { width: 0.521vw; height: 0.521vw; }
    .round_dots ul li.active span::after { width: 1.249vw; height: 1.249vw; }
}

/* --- Max 1920px (Variables) --- */
@media (max-width: 1920px) {
    :root { --fz164:8.542vw; --fz96:5vw; --fz20:20px; }
}

/* --- 1600px - 1740px --- */
@media (min-width: 1600px) and (max-width: 1740px) {
    .section_content {padding: 0 44px 32px 44px;}
    .story_wrap .story_content {padding: 0 44px;}
    .journy_wrap .journy_sec {padding: 0 44px;}
    .journy_scroll .journy_grp {width: 600px; min-width: 600px;}
    .how_do_wrap .how_do {padding: 0 44px;}
    .trust_logo ul {column-gap: 100px;}
}

/* --- 1400px - 1919px (Large Desktop - About Page) --- */
@media (min-width: 1400px) and (max-width: 1919px) {
    .about-v2-who-we-are { padding: 70px 0; }
    .about-v2-who-we-are__title { font-size: 72px; }
    .about-v2-who-we-are__desc { font-size: 16px; }
    .about-v2-who-we-are__header { margin-bottom: 50px; }
    .about-v2-who-we-are__image-wrapper img { max-height: 600px; }
    .about-v2-our-story { padding: 80px 0; }
    .about-v2-our-story__grid { gap: 40px; }
    .about-v2-our-story__title { font-size: 36px; line-height: 52px; }
    .about-v2-our-story__text { font-size: 16px; }
}

/* --- 1231px - 1599px --- */
@media (min-width: 1231px) and (max-width: 1599px) {
    .section_content {padding: 0 64px 32px 64px;}
    .story_wrap {padding: 64px 0;}
    .story_wrap .story_content {padding: 0 44px;}
    .story_wrap .story_content .story_head span {font-size: 115px;}
    .story_wrap .story_content .story_head {width: 40%;}
    .story_img {width: 60%;}
    .journy_wrap {padding: 10px 0 64px;}
    .journy_wrap .journy_sec .journy_heading {padding: 0 44px 64px 44px;}
    .journy_scroll_pin { align-items: flex-start; padding-top: 10px; }
    .how_do_wrap {padding-top: 64px;}
    .how_do_wrap .how_do {padding: 0 44px;}
    .how_do_wrap .how_do .how_heading span {font-size: 115px;}
    .how_do_wrap .how_do .how_heading {padding-bottom: 64px;}
    .journy_scroll .journy_grp {width: 500px; min-width: 500px;}
    .floor_content{left: 40%;}
    .trusted_wrap {padding: 64px 0;}
    .trusted_wrap .trusted_grp .trust_head {padding-bottom: 64px;}
    .trust_logo ul {column-gap: 40px; row-gap: 40px;}
    .trust_logo ul li {max-width: 250px;}
    .trusted_wrap .trusted_grp {max-width: 1230px;}
}

/* --- 1200px - 1399px (Medium Desktop - About Page) --- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .about-v2-who-we-are__title { font-size: 80px; }
    .about-v2-our-story__title { font-size: 40px; }
}

/* --- 992px - 1230px --- */
@media (min-width: 992px) and (max-width: 1230px) {
    .section_content {padding: 0 44px 32px 44px;}
    .section_content .sec_dtl p {font-size: 18px;}
    .story_wrap {padding: 64px 0;}
    .story_wrap .story_content {padding: 0 44px ; }
    .story_wrap .story_content .story_head {width: 100%; padding: 0 44px;}
    .story_wrap .story_content .story_head h2 {font-size: 64px;}
    .story_wrap .story_content .story_head span {font-size: 120px;}
    .story_wrap .story_content .story_head strong {font-size: 96px;}
    .story_img {width: 100%; padding-top: 64px;}
    .img_content {padding: 32px 44px;}
    .img_content p {font-size: 16px;}
    .journy_wrap {padding: 10px 0 64px;}
    .journy_wrap .journy_sec .journy_heading {padding: 0 44px 64px ;}
    .how_do_wrap {padding-top: 64px;}
    .how_do_wrap .how_do {padding: 0 44px;}
    .how_do_wrap .how_do .how_heading span {font-size: 110px;}
    .floor_content {left: 40%;}
    .floor_content p {font-size: 18px;}
    .trusted_wrap .trusted_grp .trust_head h4 {font-size: 54px;}
    .trust_logo ul {column-gap: 50px; row-gap: 50px;}
    .trust_logo ul li {max-width: 200px;}
    .trusted_wrap {padding: 64px 0;}
    .trusted_wrap .trusted_grp .trust_head {padding-bottom: 64px;}
    .journy_scroll .journy_grp {width: 400px; min-width: 400px;}
    .journy_dtl p {font-size: 16px;}
    .journy_scroll {gap: 40px;}
}

/* --- 992px - 1199px (Small Desktop - About Page) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    .about-v2-who-we-are__title { font-size: 72px; }
    .about-v2-who-we-are__header { gap: 30px; }
    .about-v2-our-story__grid { gap: 40px; }
    .about-v2-our-story__title { font-size: 36px; }
    /* Journey (Tablet/Small Desktop fallback) */
    .journy_scroll_pin { display: none; }
    .journy_slider { display: block; }
    .journy_wrap .journy_sec { padding: 0 30px; }
    .journy_wrap .journy_sec .journy_heading { padding-bottom: 40px; }
    .journy_wrap .journy_sec .journy_heading h2 { font-size: 48px; }
    .journy_wrap .journy_sec .journy_heading h2 span { font-size: 32px; }
    .journy_scroll .journy_grp { width: 100%; min-width: 100%; transform: none; }
    .journy_dtl { opacity: 1; visibility: visible; transform: none; padding-top: 40px; }
    .journy_dtl h6 { font-size: 20px; padding-bottom: 16px; }
    .journy_dtl p { font-size: 16px; line-height: 1.5; }
    .line_scroll::before, .line_scroll::after { display: none; }
    .round_wrap { display: none; }
    
    .how_do_wrap { padding-top: 60px; }
    .how_do_wrap .how_do { padding: 0 30px; }
    .how_do_wrap .how_do .how_heading { padding-bottom: 60px; }
    .how_do_wrap .how_do .how_heading h2 { font-size: 48px; }
    .how_do_wrap .how_do .how_heading span { font-size: 80px; }
    .how_do_img { height: 100vh !important; height: 100dvh !important; width: 100%; overflow: hidden; position: relative; }
    .how_do_img .how_scroll { position: absolute !important; top: 0; left: 0; height: 100% !important; width: 100%; }
    .how_do_img .how_scroll:first-child { position: relative !important; z-index: 1; }
    .how_do_img .how_scroll .floor_img { height: 100%; width: 100%; }
    .how_do_img .how_scroll .floor_img img { width: 100%; height: 100%; object-fit: cover; }
    .floor_content { left: 50%; padding: 0 30px; width: 100%; top: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 10; text-align: center; }
}

/* --- 992px + (Desktop Base - About Page) --- */
@media (min-width: 992px) {
    .about-v2-who-we-are__header { flex-wrap: wrap; }
    .about-v2-our-story__grid { grid-template-columns: 1fr 1fr; }
    
    /* RESET SWIPER STYLES FOR DESKTOP GSAP */
    .scroller_pin_wrap_ani .swiper-wrapper {
        display: block !important;
        transform: none !important;
        box-sizing: border-box !important;
        position: static !important;
        height: 100% !important;
        width: 100% !important;
        z-index: auto !important;
    }
    .scroller_pin_wrap_ani .swiper-slide {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0;
        left: 0;
        margin: 0 !important;
        flex-shrink: 0 !important;
        z-index: auto !important;
    }
    
    /* Desktop How We Do Section - Ensure visibility */
    .how_do_wrap .how_do_img {
        position: relative;
        height: 100vh;
    }
    
    .how_do_wrap .how_scroll {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
    }
    
    .how_do_wrap .how_scroll:first-child {
        position: relative;
        z-index: 1;
    }
    
    .how_do_wrap .floor_img {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .how_do_wrap .floor_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* --- 768px - 991px (Tablet - About Page) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .about-v2-who-we-are { padding: 70px 0; }
    .about-v2-who-we-are__header { flex-direction: column; margin-bottom: 40px; }
    .about-v2-who-we-are__title { font-size: 60px; max-width: 100%; margin-bottom: 20px; }
    .about-v2-who-we-are__desc { margin-top: 0; max-width: 100%; }
    .about-v2-who-we-are__image-wrapper img { max-height: 500px; }
    .about-v2-our-story__grid { grid-template-columns: 1fr; gap: 40px; }
    .about-v2-our-story__content { max-width: 100%; }
    .about-v2-our-story__title { font-size: 36px; }
    .about-v2-our-story__image { order: -1; }
    
    .about_page .about_section {padding: 130px 44px 32px;}
    .section_content {flex-direction: column;}
    .section_content .section_head {width: 100%; max-width: 400px; margin: 0 auto 0 0; padding-bottom: 16px;}
    .section_content .sec_dtl {width: 100%; max-width: 100%;}
    .section_content .section_head h1 {font-size: 96px;}
    .section_content .sec_dtl p {font-size: 14px;}
    .who_img .img_sec::after {padding-bottom: 78%;}
    .story_wrap {padding: 64px 0 32px;}
    .story_wrap .story_content {flex-direction: column;}
    .story_wrap .story_content .story_head {width: 100%; padding: 0 44px;}
    .story_wrap .story_content .story_head h2 {font-size: 64px;}
    .story_wrap .story_content .story_head span {font-size: 120px;}
    .story_wrap .story_content .story_head strong {font-size: 96px;}
    .story_img {width: 100%; padding-top: 64px;}
    .img_content {padding: 32px 44px;}
    .img_content p {font-size: 14px;}
    .journy_wrap {padding: 64px 0;}
    .journy_wrap .journy_sec .journy_heading {padding: 0 44px 64px 44px;}
    .journy_wrap .journy_sec .journy_heading h2 {font-size: 96px;}
    .journy_wrap .journy_sec .journy_heading h2 span {font-size: 64px;}
    .journy_scroll .journy_grp {width: 520px; min-width: 520px;}
    .journy_dtl h6 {font-size: 20px;}
    .journy_dtl p {font-size: 14px;}
    .journy_dtl {padding-top: 88px;}
    .line_scroll::before {margin-top: 44px;}
    .line_scroll::after {margin-top: 44px;}
    .round_wrap {margin-top: 35px;}
    .how_do_wrap {padding-top: 0; min-height: 100vh; position: relative;}
    .how_do_wrap .how_do .how_heading {padding-bottom: 64px; padding-top: 64px;}
    .how_do_wrap .how_do {padding: 0 44px;}
    .how_do_wrap .how_do .how_heading h2 {font-size: 96px;}
    .how_do_wrap .how_do .how_heading span {font-size: 120px; text-align: right;}

    .how_do_img { height: 100vh !important; height: 100dvh !important; width: 100%; z-index: 5; overflow: hidden; position: relative; }
    
    .how_do_img .how_scroll { 
        position: absolute !important; 
        top: 0;
        left: 0;
        height: 100% !important; 
        width: 100%;
        margin-bottom: 0px;
        opacity: 1 !important;
        visibility: visible !important;
        display: block;
    }
    .how_do_img .how_scroll:first-child {
        position: relative !important;
        z-index: 1;
    }
    .scroller_pin_wrap_ani .swiper-wrapper {
        display: block !important;
        transform: none !important;
        height: 100%;
    }
    .scroller_pin_wrap_ani .swiper-slide {
        display: block;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        flex-shrink: 0 !important;
    }
}

/* --- Max 767px (Mobile - About Page) --- */
@media (max-width: 767px) {
    /* About V2 */
    .about-page .container { padding-left: 15px; padding-right: 15px; width: 100%; max-width: 100%; }
    .about-v2-who-we-are { padding: 40px 0; }
    /* Apply column-reverse to bring image to top */
    .about-v2-who-we-are .container { display: flex; flex-direction: column-reverse; gap: 30px; }
    .about-v2-who-we-are__header { flex-direction: column; margin-bottom: 0; }
    .about-v2-who-we-are__title { font-size: 32px; line-height: 1.2; max-width: 100%; margin-bottom: 20px; flex: 1 1 1px; }
    .about-v2-who-we-are__desc { font-size: 16px; margin-top: 0; max-width: 100%; flex:1 1 1px; }
    .about-v2-who-we-are__image-wrapper img { max-height: 300px; }
    .about-v2-our-story__grid { grid-template-columns: 1fr; gap: 30px; }
    .about-v2-our-story__content { max-width: 100%; }
    .about-v2-our-story__title { font-size: 28px; line-height: 1.3; margin-bottom: 12px; }
    .about-v2-our-story__text { font-size: 16px; }
    .about-v2-our-story__image { order: -1; }

    .about_page .about_section {padding: 91px 20px 20px;}
    .section_content {flex-direction: column;padding-bottom: 24px;}
    .section_content .section_head {width: 100%;}
    .section_content .sec_dtl {width: 100%;}
    .section_content .section_head h1 {font-size: 44px; padding: 0 0 16px; max-width: 185px;}
    .section_content .sec_dtl p {font-size: 12px;}
    .who_img .img_sec::after {padding-bottom: 71%;}
    .who_img {padding: 0;}
    .story_wrap {padding: 20px 0;}
    .story_wrap .story_content {flex-direction: column; }
    .story_wrap .story_content .story_head {max-width: 100%; width: 100%; padding: 0 20px;}
    .story_wrap .story_content .story_head h2 {font-size: 32px;}
    .story_wrap .story_content .story_head span {font-size: 64px;}
    .story_wrap .story_content .story_head strong {font-size: 48px;}
    .story_img {padding-top: 24px; width: 100%;}
    .img_content {padding: 24px 20px;}
    .img_content p {font-size: 12px;}
    
    .journy_scroll_pin {display: none;}
    .journy_slider {display: block;}
    .journy_wrap .journy_sec { padding: 0; }
    .journy_slider .container {padding: 0 24px;}
    .journy_wrap .journy_sec .journy_heading h2 {padding: 0 24px; font-size: 48px;} 
    .journy_wrap .journy_sec .journy_heading h2 span {font-size: 32px;}
    .journy_wrap .journy_sec .journy_heading {padding-bottom: 24px;}
    .line_scroll::before {margin-top: 25px;}
    .round_wrap {margin-top: 16px; border-color: var(--black); left: 48%;}
    .round_wrap::before {background-color: var(--black);}
    .journy_dtl {padding-top: 50px; opacity: 1; visibility: visible; transform: translateY(0);} 
    .journy_dtl h6 {font-size: 16px;}
    .journy_dtl p {font-size: 12px;}
    .journy_img img {width: 100%; height: 100%;}
    .journy_swipe .similar_slider_navigation {display: flex; align-items: center; margin-top: 0px;
    justify-content: center; gap: 24px;}
    .journy-slide-arrow {display: flex; justify-content: center; align-items: center; height: 24px;
    width: 24px; border: 1px solid var(--black); border-radius: 50%; transition: all 0.3s ease-in-out;}
    .journy-slide-arrow i {display: flex; width: 5px;}
    .journy_wrap {padding: 20px 0;} 
    .how_do_wrap {padding-top: 0; min-height: 100vh; position: relative;}
    .how_do_wrap .how_do .how_heading {padding-bottom: 20px; padding-top: 20px;}
    .how_do_wrap .how_do .how_heading h2 {font-size: 48px;}
    .how_do_wrap .how_do .how_heading span {font-size: 48px; margin-left:100px;}
    .how_do_wrap .how_do {padding: 0 20px;}
    
    .how_do_img { height: 100vh !important; height: 100dvh !important; width: 100%; z-index: 5; overflow: hidden; position: relative; }
    
    .how_do_img .how_scroll { 
        position: absolute !important; 
        top: 0;
        left: 0;
        height: 100% !important; 
        width: 100%;
        margin-bottom: 0px;
        opacity: 1 !important;
        visibility: visible !important;
        display: block;
    }
    .how_do_img .how_scroll:first-child {
        position: relative !important;
        z-index: 1;
    }
    .scroller_pin_wrap_ani .swiper-wrapper {
        display: block !important;
        transform: none !important;
        height: 100%;
    }
    .scroller_pin_wrap_ani .swiper-slide {
        display: block;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        flex-shrink: 0 !important;
    }

    .how_do_img .how_scroll .floor_img { height: 100%; width: 100%; }
    .how_do_img .how_scroll .floor_img img { width: 100%; height: 100%; object-fit: cover; }
    
    .floor_content { 
        position: absolute; 
        left: 30px; 
        bottom: 180px;
        top: auto; 
        transform: none; 
        padding: 0; 
        width: auto;
        right: 70px;
        z-index: 10;
        text-align: left;
    }
    .floor_content h2 { font-size: 36px; line-height: 1.2; padding-bottom: 10px; color: #fff; text-transform: uppercase; }
    .floor_content p { font-size: 16px; color: #fff; line-height: 1.4; }
    .floor_content i { padding-bottom: 15px; display: block; }
    .floor_content i img { width: 40px; height: 40px; filter: brightness(0) invert(1); }

    /* Mobile Slider Pagination */
    .round_dots { position: absolute !important; right: 20px; bottom: 180px; top: auto; transform: none; display: block !important; margin-top: 0; z-index: 10; }
    .round_dots ul { display: flex; flex-direction: column; gap: 15px; padding: 0; margin: 0; align-items: center; list-style: none; }
    
    .round_dots ul li span { 
        position: relative;
        width: 6px; height: 6px; 
        background-color: #fff; 
        border-radius: 50%; 
        display: block; 
        transition: all ease-in-out 0.3s; 
    }
    
    .round_dots ul li span::after { 
        position: absolute; 
        content: ''; 
        width: 0; 
        height: 0; 
        border-radius: 50%; 
        border: 1px solid #fff; 
        transition: all ease-in-out 0.3s; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%);
    }

    .round_dots ul li.active span { 
        width: 10px; height: 10px; 
    }
    
    .round_dots ul li.active span::after { 
        width: 24px; height: 24px; 
    }
}

/* --- Max 374px (Mobile - About Page) --- */
@media (max-width: 374px) {
    .about-v2-who-we-are__title { font-size: 28px; }
}

/* =================================== INDEX PAGE SECTIONS RESPONSIVE =================================== */

/* --- Max 767px (Mobile - Index Sections) --- */
@media (max-width: 767px) {
    /* Reset all rigid min-widths for mobile */
    .contact-info-stack, .contact-image-container, 
    .footer-brand-info, .footer-nav, .footer-contact, .featured-card, 
    .category-list-wrapper, .portfolio-intro__content, .portfolio-intro__list,
    .content-visual, .content-text, .s10-feature-box { min-width: 0 !important;width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    
    /* Why Choose Section - S10 */
    .s10-why-choose { padding: 40px 0; min-height: auto; overflow: hidden; }
    .s10-header { margin-bottom: 40px; }
    .s10-header h2 { font-size: 28px; line-height: 1.3; }
    .s10-main-layout { display: flex; flex-direction: column; gap: 30px; width: 100%; }
    .s10-center-circle { order: -1; padding: 0; margin: 0 auto 20px auto; text-align: center; width: 100%; display: flex; justify-content: center; }
    .s10-logo-container { width: 180px; height: 180px; }
    .s10-main-logo { width: 120px; }
    .s10-column { gap: 30px; align-items: center !important; width: 100%; }
    .s10-col-left .s10-feature-wrapper:nth-child(2),
    .s10-col-right .s10-feature-wrapper:nth-child(2) { margin: 0; }
    .s10-feature-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; position: relative; }
    .s10-feature-icon { order: 1; }
    .s10-feature-box { order: 2; }
    .s10-feature-icon { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 60px !important; height: 60px !important; margin-bottom: -30px !important; z-index: 5; border: 2px solid var(--primary); background-color: var(--white); margin-left: auto; margin-right: auto; }
    .s10-feature-icon img { width: 30px !important; height: 30px !important; }
    .s10-feature-box { position: relative; min-width: 0 !important; width: 100% !important; max-width: 300px; padding: 45px 20px 25px 20px; text-align: center !important; border-radius: 20px; border: 2px solid var(--primary); z-index: 1; margin: 0 auto; height: auto; }
    .s10-col-left .s10-feature-wrapper,
    .s10-col-right .s10-feature-wrapper { flex-direction: column; }
    .s10-feature-box p.s10-feature-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .s10-feature-box p.s10-feature-desc { font-size: 14px; }
    
    /* Collection Section */
    .collection-section { padding: 40px 0; }
    .collection-header h2 { font-size: 28px; line-height: 1.3; margin-top: 10px; }
    .collection-tabs { flex-direction: column; max-width: 100%; margin-bottom: 30px; height: auto; min-height: auto; }
    .tab-item { padding: 15px; border-bottom: 1px solid var(--border-color); }
    .tab-item:not(:last-child)::after { width: 100%; height: 1px; top: auto; bottom: 0; }
    .tab-item h3 { font-size: 18px; }
    .tab-item .icon-wrapper { width: 40px; height: 40px; }
    .collection-content { flex-direction: column; gap: 30px; }
    .featured-card { min-height: 350px; height: auto; max-height: none; }
    .card-bg { height: 350px; position: relative; }
    .floating-image { display: none; }
    .category-list li { padding: 15px 0; }
    .list-content h3 { font-size: 18px; }
    .list-content img { width: 36px; height: 36px; }
    
    /* Application Section */
    .application-section { padding: 40px 0; }
    .application-grid { flex-direction: column; gap: 40px; }
    .header-group h2 { font-size: 28px; line-height: 1.3; }
    .application-list { gap: 15px; margin-top: 20px; }
    .application-list .list-item { font-size: 20px; line-height: 1.4; }
    .image-showcase { min-height: 300px; height: 300px; }
    
    /* Portfolio Section */
    .portfolio-intro { padding-top: 40px; padding-bottom: 40px; }
    .portfolio-intro__wrapper { flex-direction: column; gap: 30px; }
    .portfolio-intro__content h2 { font-size: 28px; line-height: 1.3; }
    .portfolio-item { padding: 15px 0; }
    .portfolio-item h3 { font-size: 20px; line-height: 1.4; max-width: 80%; }
    .portfolio-item p { font-size: 15px; }
    .portfolio-item__icon { width: 28px; height: 28px; }
    
    /* Values Section */
    .values-section { padding: 40px 0; }
    .values-header h2 { font-size: 28px; line-height: 1.3; }
    .values-header p { font-size: 14px; }
    .values-accordion { flex-direction: column; border-left: none; border-top: 1px solid var(--border-dark); min-height: auto; height: auto; }
    .accordion-item { flex-direction: column; border-right: none; border-bottom: 1px solid var(--border-dark); width: 100%; }
    .accordion-trigger { flex-direction: row; padding: 15px 0; width: 100%; min-width: auto; justify-content: space-between; gap: 10px; }
    .accordion-item h3 { transform: none; font-size: 20px; writing-mode: horizontal-tb; white-space: normal; line-height: 1.4; }
    .accordion-content { flex-direction: column; padding: 20px 0; }
    .content-visual { width: 100%; height: 250px; min-height: 250px; margin-bottom: 20px; }
    .content-text { padding: 0; max-width: 100%; gap: 15px; }
    .accordion-trigger .icon-wrapper img{ width: 25px; }
    .accordion-item:nth-child(4) .accordion-trigger .icon-wrapper img {
        content: url('../images/vuesaxlinearadd-circle.svg');
    }
    .accordion-item.is-active .accordion-trigger .icon-wrapper { display: flex !important; }
    .accordion-item.is-active .accordion-trigger .icon-wrapper img { opacity: 0; }
    .accordion-item.is-active .accordion-trigger .icon-wrapper {
        background-image: url('../images/vuesaxlinearadd-circle_3.svg');
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .accordion-content > .icon-wrapper { display: none; }
    
    /* Contact Section */
    .contact-section { padding-top: 40px; padding-bottom: 40px; }
    .contact-section h2 { font-size: 28px; line-height: 1.3; margin-bottom: 30px; }
    .contact-grid { flex-direction: column-reverse !important; gap: 30px; }
    .contact-image-container { min-height: 0px; }
    .social-wrapper { flex-direction: column; align-items: flex-start; gap: 15px; }
    .social-buttons { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .social-btn { padding: 10px 15px; }
    .icon-circle{ width: 27px; height: 27px; }
    
    /* New Footer Responsive */
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-logo img { max-width: 150px; }
    .footer-col h3 { font-size: 20px; margin-bottom: 16px; }
    .footer-map iframe { height: 250px; }
    .footer-bottom-new { flex-direction: column; text-align: center; gap: 8px; }
}

/* --- Max 374px (Mobile - Index Sections) --- */
@media (max-width: 374px) {
    .s10-logo-container { width: 270px; height: 160px; }
    .s10-main-logo { width: 170px; }
    .s10-feature-icon { width: 50px; height: 50px; margin-bottom: -25px; }
    .s10-feature-icon img { width: 25px; height: 25px; }
    .s10-feature-box { padding: 35px 15px 20px 15px; }
    .s10-feature-box p.s10-feature-title { font-size: 16px; }
    .s10-feature-box p.s10-feature-desc { font-size: 13px; }
    .accordion-trigger { padding: 15px 0; }
    .social-btn span { font-size: 14px; }
}

/* --- 768px - 991px (Tablet - Index Sections) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .s10-main-layout { grid-template-columns: 1fr; gap: 40px; }
    .s10-center-circle { grid-row: 1; padding: 0; }
    .s10-col-left, .s10-col-right { align-items: center; }
    .s10-col-left .s10-feature-wrapper:nth-child(2),
    .s10-col-right .s10-feature-wrapper:nth-child(2) { margin: 0; }
    .s10-col-left .s10-feature-wrapper { text-align: center; justify-content: center; }
    .s10-col-right .s10-feature-wrapper { text-align: center; justify-content: center; }
    .s10-col-left .s10-feature-box,
    .s10-col-right .s10-feature-box { text-align: center; min-width: 100%; max-width: 500px; }
    .s10-feature-icon { position: relative; width: 100px; height: 100px; }
    .s10-feature-icon img { width: 50px; height: 50px; }
    .collection-content { flex-direction: column; }
    .floating-image { display: none; }
    .collection-tabs { flex-direction: column; }
    .tab-item:not(:last-child)::after { width: 100%; height: 1px; top: auto; bottom: 0; }
    .application-grid { flex-direction: column-reverse; }
    .values-accordion { flex-direction: column; border-left: none; border-top: 1px solid var(--border-dark); }
    .accordion-item { flex-direction: column; border-right: none; border-bottom: 1px solid var(--border-dark); }
    .accordion-trigger { flex-direction: row; padding: 20px; min-width: auto; }
    .accordion-item h3 { transform: none; font-size: 24px; }
    .accordion-content { flex-direction: column; padding: 20px; }
    .content-visual { width: 100%; min-height: 200px; }
    .content-text { max-width: 100%; }
    .contact-grid { flex-direction: column-reverse; }
    .contact-image-container { min-height: 400px; }
    
    /* New Footer Responsive - Tablet */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-col-logo { grid-column: 1 / -1; }
}

/* --- 992px - 1199px (Small Desktop - Index Sections) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    .application-grid { flex-direction: row; justify-content: center; align-items: stretch; }
    .image-showcase { flex: 1; max-width: 714px; }
    .portfolio-intro__wrapper { flex-wrap: nowrap; gap: 80px; }
}

/* --- 992px + (Desktop - Index Sections) --- */
@media (min-width: 992px) {
    .application-grid { flex-direction: row; justify-content: center; align-items: stretch; }
    .image-showcase { max-width: 714px; }
    .portfolio-intro__wrapper { flex-wrap: nowrap; gap: 80px; }
}

/* --- 1200px - 1399px (Medium Desktop - Index Sections) --- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .s10-feature-box { min-width: 300px; padding: 15px 25px; }
    .s10-logo-container { width: 280px; height: 280px; }
    .s10-main-logo { width: 180px; }
    
    /* New Footer Responsive - Medium Desktop */
    .footer-grid { grid-template-columns: 0.8fr 1fr 1fr 1.2fr; gap: 40px; }
}

/* --- 1400px - 1919px (Large Desktop - Index Sections) --- */
@media (min-width: 1400px) and (max-width: 1919px) {

    
    /* Counter Section */
    .counter-sec { padding: 70px 0 120px; }
    .counter-sec .counter-grp .counter-title h2 { font-size: 36px; line-height: 50px; }
    .counter-sec .counter-grp .counter-title { margin-bottom: 80px; }
    .counter-sec .counter-grp .counter-title p { font-size: 16px; }
    .counter-wrap .counter-box h3 { font-size: 26px; }
    .counter-wrap .counter-box p { font-size: 14px; }

    /* Tiles Adhesive Section */
    .tiles_adhesive { margin: 70px 0; }
    .tiles_adhesive .tiles-grp .tiles-title h2 { font-size: 36px; line-height: 50px; }
    .tiles_adhesive .tiles-grp .tiles-title p { font-size: 16px; }
    .titel-video-sec { gap: 36px; }
    .titel-video-sec .text-box ul li span { font-size: 16px; }
    .titel-video-sec .text-box ul li p { font-size: 15px; }

    /* Typography */
    .s10-header h2,
    .collection-header h2,
    .header-group h2,
    .values-header h2,
    .portfolio-intro__content h2 { font-size: 36px; line-height: 52px; }
    .portfolio-intro__content h2 { max-width: 100%; }
    .tab-item h3 { font-size: 20px; }
    .application-list .list-item { font-size: 24px; line-height: 34px; }
    .accordion-item h3 { font-size: 22px; }
    .values-header p { font-size: 15px; }
    .portfolio-item h3 { font-size: 22px; line-height: 30px; }
    .portfolio-item p { font-size: 16px; line-height: 24px; }
    .contact-section h2 { font-size: 36px; margin-bottom: 36px; }
    
    /* Section Padding */
    .s10-why-choose,
    .collection-section,
    .application-section { padding: 70px 0; }
    .s10-why-choose { min-height: 0px; }
    
    /* Why Choose Section */
    .s10-main-layout { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0px; }
    .s10-column { gap: 60px; }
    .s10-col-left { align-items: flex-end; }
    .s10-col-right { align-items: flex-start; }
    .s10-col-left .s10-feature-wrapper { justify-content: flex-end; }
    .s10-col-right .s10-feature-box { text-align: right; }
    .s10-header { margin-bottom: 60px; }
    .s10-feature-box { min-width: 340px; max-width: 415px; padding: 16px 28px; border-radius: 80px; }
    .s10-feature-box p.s10-feature-title { font-size: 18px; }
    .s10-feature-box p.s10-feature-desc { font-size: 14px; }
    .s10-logo-container { width: 260px; height: 260px; }
    .s10-main-logo { width: 160px; }
    .s10-feature-icon { width: 100px; height: 100px; }
    .s10-feature-icon img { width: 50px; height: 50px; }
    .s10-center-circle { padding: 0 20px; }
    
    /* Collection Section */
    .collection-header { margin-bottom: 50px; }
    .collection-header p:first-child,
    .collection-header p:last-child { font-size: 16px; }
    .collection-tabs { margin-bottom: 48px; max-width: 1100px; min-height: 68px; }
    .collection-content { gap: 32px; }
    .featured-card,
    .card-list-wrapper { min-width: 250px; }
    .featured-card { min-height: 480px; height: 480px; max-height: 480px; }
    .card-bg { height: 480px; }
    .tab-item:not(:last-child)::after { height: 68px; }
    .tab-item { padding: 12px 18px; }
    .tab-item .icon-wrapper { width: 44px; height: 44px; }
    .list-content h3 { font-size: 20px; }
    .list-content img { width: 36px; height: 36px; }
    .card-text p:first-child { font-size: 18px; }
    .card-text p:last-child { font-size: 14px; }
    
    /* Application Section */
    .application-grid { gap: 36px; }
    .content-wrapper { gap: 28px; }
    .application-list { gap: 20px; }
    .image-showcase { min-height: 550px; }
    
    /* Portfolio Section */
    .portfolio-intro { padding-top: 70px; padding-bottom: 70px; }
    .portfolio-grid { gap: 32px; }
    .portfolio-intro__wrapper { gap: 32px; }
    .portfolio-intro__image-container { max-width: 420px; }
    .portfolio-item { padding-top: 20px; padding-bottom: 20px; }
    .portfolio-item p { margin-top: 20px; max-width: 600px; }
    .portfolio-item__icon { width: 32px; height: 32px; }
    
    /* Values Section */
    .values-section { padding: 60px 0; }
    .values-container { gap: 60px; }
    .values-header { margin-bottom: 40px; }
    .values-accordion { min-height: 420px; }
    .accordion-item { gap: 30px; }
    .accordion-trigger { padding: 0 20px; padding-top: 30px; padding-bottom: 30px; }
    .values-section .icon-wrapper { width: 26px; height: 26px; }
    .values-section .icon-wrapper img { width: 24px; height: 24px; }
    .content-visual { width: 300px; min-height: 420px; }
    .content-text { padding-bottom: 30px; padding-left: 24px; gap: 20px; max-width: 300px; }
    .content-text p { font-size: 15px; line-height: 24px; }
    .view-more { font-size: 14px; }
    .accordion-content .icon-wrapper { margin-top: 30px; }
    
    /* Contact Section */
    .contact-section { padding-top: 70px; padding-bottom: 70px; }
    .contact-grid { gap: 36px; }
    .contact-info-stack { min-width: 250px; }
    .contact-image-container { min-width: 250px; min-height: 400px; }
    .info-card p:first-child { font-size: 18px; line-height: 28px; }
    .info-card p:not(:first-child) { font-size: 15px; line-height: 20px; }
    .social-wrapper p { font-size: 18px; }
    .social-btn span { font-size: 16px; }
    .icon-circle { width: 30px; height: 30px; }
    
    /* Product Detail Section */
    .product-detail { padding: 70px 0; min-height: auto; }
    .product-grid { gap: 36px; }
    .product-gallery { max-width: 520px; }
    .thumbnail-list { gap: 24px; width: 70px; }
    .thumb-item { width: 70px; height: 70px; }
    .main-image-display { min-height: 460px; }
    .product-info h2 { font-size: 28px; }
    .product-info .description { font-size: 16px; }
    .specs-container p { font-size: 16px; }
    .export-badge p { font-size: 14px; }

    /* Guarantees Section */
    .guarantees-section { padding: 70px 0; min-height: auto; }
    .guarantees-section .section-header { margin-bottom: 50px; }
    .guarantees-section .section-header h2 { font-size: 36px; }
    .guarantee-card img { width: 64px; height: 64px; }
    .guarantee-card p { font-size: 16px; }
    .guarantees-grid { gap: 20px; }
    
    /* Footer Section */
    .footer-section { padding-top: 70px; min-height: auto; }
    .footer-top { gap: 80px; margin-bottom: 65px; }
    .footer-brand-info { min-width: 250px; max-width: 500px; gap: 40px; }
    .footer-tagline-group p { font-size: 15px; }
    .footer-tagline-group h2 { font-size: 26px; }
    .footer-hours h3 { font-size: 20px; }
    .hours-row p { font-size: 16px; }
    .footer-credits p { font-size: 16px; }
    .footer-nav { flex: 0 0 220px; }
    .footer-nav .nav-link { font-size: 26px; }
    .footer-nav .nav-menu { gap: 16px; }
    .footer-contact { flex: 0 0 220px; gap: 24px; }
    .footer-contact h3 { font-size: 20px; }
    .contact-details { gap: 24px; }
    .contact-details p { font-size: 16px; }
    .footer-bottom p { font-size: 16px; }
    .footer-grid { gap: 60px; }
}

/* =================================== ABOUT PORTFOLIO INTRO RESPONSIVE =================================== */

/* --- Max 767px (Mobile) --- */
@media (max-width: 767px) {
    .about-portfolio-intro { padding-top: 40px; padding-bottom: 40px; }
    .about-portfolio-intro__wrapper { flex-direction: column; gap: 24px; }
    .about-portfolio-intro__content, .about-portfolio-intro__list { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .about-portfolio-intro__content h2 { font-size: 28px; line-height: 1.3; max-width: 100%; }
    .about-portfolio-intro__image-container { max-width: 100%; aspect-ratio: 4/3; margin-bottom: 8px; }
    .about-portfolio-item { padding: 14px 0; cursor: pointer; opacity: 1; }
    .about-portfolio-item h3 { font-size: 18px; line-height: 1.4; max-width: 100%; }
    .about-portfolio-item p { font-size: 14px; }
    .about-portfolio-item__header { position: relative; padding-right: 30px; }
    .about-portfolio-item__header::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--text-secondary); transition: transform 0.3s ease; }
    .about-portfolio-item.active .about-portfolio-item__header::after { content: '−'; }
    .about-portfolio-item__content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease; margin-top: 0; }
    .about-portfolio-item.active .about-portfolio-item__content { max-height: 200px; opacity: 1; margin-top: 12px; }
}

/* --- 992px+ (Desktop) --- */
@media (min-width: 992px) {
    .about-portfolio-intro__wrapper { flex-wrap: nowrap; gap: 80px; }
}

/* --- 1400px - 1919px (Large Desktop) --- */
@media (min-width: 1400px) and (max-width: 1919px) {
    .about-portfolio-intro { padding-top: 70px; padding-bottom: 70px; }
    .about-portfolio-intro__content h2 { font-size: 36px; line-height: 1.2; max-width: 600px; }
    .about-portfolio-intro__wrapper { gap: 32px; }
    .about-portfolio-intro__image-container { max-width: 420px; }
    .about-portfolio-item { padding-top: 18px; padding-bottom: 18px; }
    .about-portfolio-item p { margin-top: 16px; max-width: 600px; font-size: 16px; }
    .about-portfolio-item h3 { font-size: 20px; line-height: 28px; }
    .about-portfolio-item.active .about-portfolio-item__content { margin-top: 0px; }
}

/* =================================== TILE LISTING PAGE RESPONSIVE =================================== */

/* --- Ultra-wide (1701px+) --- */
@media (min-width: 1701px) {
    .product-detail { padding: 96px 224px; }
    .guarantees-section { padding: 96px 224px; }
}

/* --- Extra Large (1400px+) --- */
@media (min-width: 1400px) {
    .product-grid { flex-wrap: nowrap; }
}

/* --- Large Desktop (1200px - 1399px) --- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .guarantees-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Desktop (992px - 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    .guarantees-grid { grid-template-columns: repeat(3, 1fr); }
    .product-grid { justify-content: center; }
}

/* --- Tablet (768px - 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .guarantees-grid { grid-template-columns: repeat(2, 1fr); }
    .product-detail, .guarantees-section { padding: 64px 0; }
    .product-gallery { max-width: 100%; }
}

/* --- Mobile (max 767px) --- */
@media (max-width: 767px) {
    .product-detail, .guarantees-section { padding: 48px 0; }
    .product-gallery { flex-direction: column-reverse; }
    .thumbnail-list { flex-direction: row; width: 100%; overflow-x: auto; padding-bottom: 10px; }
    .product-info h2 { font-size: 28px; }
    .guarantees-section .section-header h2 { font-size: 32px; }
    .guarantees-grid { grid-template-columns: 1fr; gap: 40px; }
    .main-image-display { min-height: 300px; }
}