/* ================================================================= HOME — NON-CRITICAL CSS Upload to CDN as home-styles.css → minify → home-styles.min.css Loaded asynchronously via in . ================================================================= */ /* --- 1. Global Utility --- */ .fs-list_menu{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#B08D57 transparent} .fs-list_menu::-webkit-scrollbar{width:6px} .fs-list_menu::-webkit-scrollbar-track{background:transparent} .fs-list_menu::-webkit-scrollbar-thumb{background-color:#B08D57;border-radius:3px} .fs-list_link.w--current div{color:#B08D57!important} div[card-style="yes"] .text_info_wrap{background-color:transparent!important} .case_button_wrap{position:relative;overflow:hidden} /* --- 2. Interior Grid System --- */ .interior_collection_item:has(.two_big_to_small:not(.w-condition-invisible)) .w-dyn-items{display:grid;grid-template-columns:4fr 2fr;gap:1.25rem} .interior_collection_item:has(.two_small_to_big:not(.w-condition-invisible)) .w-dyn-items{display:grid;grid-template-columns:2fr 4fr;gap:1.25rem} .interior_collection_item:has(.three_grid_view:not(.w-condition-invisible)) .w-dyn-items{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .interior_collection_item:has(.four-grid-view:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.four_grid_view:not(.w-condition-invisible)) .w-dyn-items{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .interior_collection_item:has(.five-grid-view:not(.w-condition-invisible)) .w-dyn-items{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem} .interior_collection_item:has(.two-to-two:not(.w-condition-invisible)) .w-dyn-items{display:grid;grid-template-columns:4fr 4fr;gap:1.25rem} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items{display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:1.25rem!important} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(1), .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(2){grid-column:span 2!important} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(3){grid-column:span 4!important} .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items{display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:1.25rem!important} .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(1){grid-column:span 4!important} .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(2), .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(3){grid-column:span 2!important} .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items{display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:1.25rem!important} .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(1), .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(3){grid-column:span 2!important} .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(2){grid-column:span 4!important} @media(max-width:1400px){ .interior_collection_item:has(.two_big_to_small:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.two_small_to_big:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.two-to-two:not(.w-condition-invisible)) .w-dyn-items{gap:1rem} .interior_collection_item:has(.five-grid-view:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:repeat(4,1fr)} .interior_collection_item:has(.four-grid-view:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.four_grid_view:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:repeat(2,1fr)} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:1rem!important} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(1){grid-column:span 2!important;grid-row:1!important} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(2){grid-column:span 2!important;grid-row:1!important} .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(3){grid-column:span 4!important;grid-row:2!important} .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(1){grid-column:span 4!important;grid-row:1!important} .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(2){grid-column:span 2!important;grid-row:2!important} .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(3){grid-column:span 2!important;grid-row:2!important} .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(1){grid-column:span 2!important;grid-row:2!important} .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(2){grid-column:span 4!important;grid-row:1!important} .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items .w-dyn-item:nth-child(3){grid-column:span 2!important;grid-row:2!important} } @media(max-width:1024px){ .interior_collection_item:has(.five-grid-view:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:repeat(3,1fr)} .interior_collection_item:has(.four-grid-view:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:repeat(2,1fr)} .interior_collection_item:has(.three_grid_view:not(.w-condition-invisible)) .w-dyn-items{gap:1rem} .interior_collection_item:has(.two_big_to_small:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.two_small_to_big:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:1fr 1fr;gap:1rem} } @media(max-width:768px){ .interior_collection_item:has(.five-grid-view:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:repeat(2,1fr)} .interior_collection_item:has(.three_grid_view:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:repeat(2,1fr)} .interior_collection_item:has(.two_big_to_small:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.two_small_to_big:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(.two-to-two:not(.w-condition-invisible)) .w-dyn-items{grid-template-columns:1fr;gap:1rem} } @media(max-width:676px){ .interior_collection_item .w-dyn-items, .interior_collection_item:has(#three_grid_right:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(#three_grid_left:not(.w-condition-invisible)) .w-dyn-items, .interior_collection_item:has(#three_grid_center:not(.w-condition-invisible)) .w-dyn-items{display:flex!important;flex-direction:column!important;gap:1rem!important} .w-dyn-item{grid-column:unset!important;grid-row:unset!important} } /* --- 3. Case Grid Layouts --- */ .case_grid{display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:auto;gap:1.25rem;align-items:start} .case_grid .image_nested{width:100%;height:100%;object-fit:cover} .case_grid>.w-dyn-item{height:100%} .case_grid.layout-6-images #case_description{grid-column:1/5;grid-row:1} .case_grid.layout-6-images .image-1{grid-column:5/7;grid-row:1} .case_grid.layout-6-images .image-2{grid-column:7/9;grid-row:1} .case_grid.layout-6-images .image-3,.case_grid.layout-6-images .image-4,.case_grid.layout-6-images .image-5,.case_grid.layout-6-images .image-6{grid-column:span 2;height:100%} .case_grid.layout-3-images-left #case_description{grid-column:1/5;grid-row:1} .case_grid.layout-3-images-left .image-2{grid-column:1/3;grid-row:2} .case_grid.layout-3-images-left .image-3{grid-column:3/5;grid-row:2} .case_grid.layout-3-images-left .image-1{grid-column:5/9;grid-row:1/span 2} .case_grid.layout-3-images-right .image-1{grid-column:1/5;grid-row:1/span 2} .case_grid.layout-3-images-right #case_description{grid-column:5/9;grid-row:1} .case_grid.layout-3-images-right .image-2{grid-column:5/7;grid-row:2} .case_grid.layout-3-images-right .image-3{grid-column:7/9;grid-row:2} .case_grid.layout-2-images-left #case_description{grid-column:1/5;grid-row:1} .case_grid.layout-2-images-left .image-1{grid-column:1/5;grid-row:2} .case_grid.layout-2-images-left .image-2{grid-column:5/9;grid-row:1/span 2} .case_grid.layout-2-images-right .image-1{grid-column:1/5;grid-row:1/span 2} .case_grid.layout-2-images-right #case_description{grid-column:5/9;grid-row:1} .case_grid.layout-2-images-right .image-2{grid-column:5/9;grid-row:2} .case_grid.layout-5-images-right #case_description{grid-column:1/5;grid-row:1} .case_grid.layout-5-images-right .image-1{grid-column:5/9;grid-row:1} .case_grid.layout-5-images-right .image-2,.case_grid.layout-5-images-right .image-3,.case_grid.layout-5-images-right .image-4,.case_grid.layout-5-images-right .image-5{grid-column:span 2} .case_grid.layout-5-images-left .image-1{grid-column:1/5;grid-row:1} .case_grid.layout-5-images-left #case_description{grid-column:5/9;grid-row:1} .case_grid.layout-5-images-left .image-2,.case_grid.layout-5-images-left .image-3,.case_grid.layout-5-images-left .image-4,.case_grid.layout-5-images-left .image-5{grid-column:span 2} .case_grid.layout-1-image-left .image-1{grid-column:1/5;grid-row:1} .case_grid.layout-1-image-left #case_description{grid-column:5/9;grid-row:1} .case_grid.layout-1-image-right #case_description{grid-column:1/5;grid-row:1} .case_grid.layout-1-image-right .image-1{grid-column:5/9;grid-row:1} .case_grid.layout-video-left .image-1{grid-column:1/6;grid-row:1} .case_grid.layout-video-left #case_description{grid-column:6/9;grid-row:1} .case_grid.layout-video-right #case_description{grid-column:1/4;grid-row:1} .case_grid.layout-video-right .image-1{grid-column:4/9;grid-row:1} @media(max-width:1240px) and (min-width:1000px){ .case_grid{display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:auto;gap:1rem} .case_grid #case_description{grid-column:1/9!important;grid-row:1!important} .case_grid>.w-dyn-item:not(#case_description){grid-column:span 4!important;grid-row:auto!important} .case_grid.layout-video-left .image-1,.case_grid.layout-video-right .image-1{grid-column:1/9!important} } @media(max-width:999px){ .case_grid{display:flex;flex-direction:column;gap:1rem} .case_grid #case_description,.case_grid>.w-dyn-item{width:100%;height:auto!important;min-height:unset!important;aspect-ratio:unset!important;display:block;grid-column:unset!important;grid-row:unset!important} .case_grid .image_nested{width:100%;height:auto!important;object-fit:cover;display:block} .case_grid>.w-dyn-item{order:unset!important} } /* --- 4. Video Block & More Button --- */ .video-block-16-9{display:block;width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#000;margin:0;padding:0} .video-block-16-9 video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s ease} .video-block-16-9 video.video-loaded{opacity:1} #more_btn{width:100%;height:100%!important;margin:0!important;padding:0;min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;box-sizing:border-box;align-self:stretch} @media(max-width:676px){#more_btn{margin-top:.75rem!important;margin-bottom:.75rem!important;height:auto!important;min-height:3.5rem}} #more_btn .clickable_wrap,#more_btn .gold_button_link{width:100%;height:100%;display:flex;justify-content:center;align-items:center} /* --- 5. Mobile Slider --- */ @media screen and (max-width:991px){ .collection-list-wrapper-7{display:flex!important;flex-direction:column!important;align-items:center!important} .collection-list-13{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:16px;padding-bottom:0;-webkit-overflow-scrolling:touch;width:100%!important;scrollbar-width:none;-ms-overflow-style:none} .collection-list-13::-webkit-scrollbar{display:none} .collection-item-11{flex:0 0 85vw!important;width:85vw!important;max-width:85vw!important;margin:0!important;scroll-snap-align:center} .mobile-slider-controls{display:flex;align-items:center;justify-content:center;gap:15px;padding:10px 0;width:100%;position:relative;z-index:10;margin-top:5px} .slider-btn{width:44px;height:44px;display:flex;justify-content:center;align-items:center;cursor:pointer;background-color:transparent;border:none;padding:0;flex-shrink:0;transition:opacity .2s ease} .slider-btn:active{opacity:.6} .slider-btn svg path{fill:#e8e8e8!important} .next-arrow svg{transform:rotate(180deg)} .slider-counter{font-size:16px;color:#e8e8e8;font-family:Arial,sans-serif;font-weight:500;min-width:60px;text-align:center;letter-spacing:1px} } @media screen and (min-width:992px){.mobile-slider-controls{display:none}} /* --- 6. Error Styles --- */ .error{color:#B94E48!important;font-size:1.5rem!important;line-height:110%!important;font-weight:normal!important} @media(max-width:767px){.error{font-size:1.25rem!important}} /* --- 7. Custom Scrollbar UI --- */ .custom-scrollbar-track{width:21.625rem;max-width:90%;padding:.12rem;height:auto;background:#252525;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:50;box-sizing:content-box;display:block;user-select:none} .custom-scrollbar-thumb{background:#E8E8E8;border-radius:100px;height:6px;width:20%;position:relative;cursor:grab;touch-action:none} .custom-scrollbar-thumb:active{cursor:grabbing} /* --- 8. Solution Slider (all screens, draggable) --- */ .home_solution_wrap{position:relative;display:block;width:100%;overflow:hidden;padding-bottom:3.75rem;cursor:grab} .home_solution_wrap:active{cursor:grabbing} @media(max-width:991px){.home_solution_wrap{padding-bottom:2.5rem}} .home_solution_list{display:flex!important;flex-wrap:nowrap!important;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;user-select:none} .home_solution_list::-webkit-scrollbar{display:none} .home_solution_item{flex-shrink:0;position:relative;border-radius:12px;margin-right:20px;scroll-snap-align:start} @media(min-width:992px){.home_solution_item{width:calc((100% - 40px)/3)}.home_solution_item:last-child{margin-right:0}} @media(max-width:991px) and (min-width:768px){.home_solution_item{width:calc((100% - 20px)/2)}} @media(max-width:767px){.home_solution_item{flex:0 0 100%;width:100%;margin-right:1.25rem}} .home_solution_item .image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .home_solution_item:hover .image{transform:scale(1.05)} /* --- 9. Points & Partnership Sliders --- */ .point_wrap .custom-scrollbar-track,.partnership_card_wrap .custom-scrollbar-track{display:none} .partnership_generated_list{display:contents} @media screen and (max-width:991px){ .point_wrap,.partnership_card_wrap{position:relative;width:100%;overflow:hidden;padding-bottom:3rem;display:block!important} .point_wrap .custom-scrollbar-track,.partnership_card_wrap .custom-scrollbar-track{display:block} .point_list,.partnership_generated_list{display:flex!important;flex-wrap:nowrap!important;gap:1.25rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;width:100%} .point_list::-webkit-scrollbar,.partnership_generated_list::-webkit-scrollbar{display:none} .point_list .case_info_item,.partnership_generated_list .case_info_item{flex:0 0 100%;width:100%;scroll-snap-align:start} } /* --- 10. Video Modal (Home — fullscreen iframe) --- */ .video-modal-wrapper{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:1000} .video-modal-wrapper.active{opacity:1;pointer-events:all} .video-modal{position:relative;background:#000;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center} .video-modal iframe{width:100%;height:100%;border:none} @media(max-width:768px){.video-modal{width:100vw;height:100vh}} .close-button{position:absolute;top:15px;right:20px;font-size:30px;color:#fff;cursor:pointer;z-index:10;padding:5px 10px;background:rgba(0,0,0,.5);border-radius:5px} /* --- 11. Hero Text Shadow --- */ .hero_heading_content_wrap .title_top_caption, .hero_heading_content_wrap .gold_title, .hero_heading_content_wrap .section_header_description{text-shadow:0 2px 4px rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.25);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .hero_heading_content_wrap .gold_title{text-shadow:0 2px 4px rgba(0,0,0,.4),0 12px 24px rgba(0,0,0,.3)}