html{
overflow-x:hidden;
}

*,
*::before,
*::after{
box-sizing:border-box;
}

/* RESET */

body{
margin:0;
padding:0;
font-family:"Proxima Nova", sans-serif;
}

/* CONTAINER */

.results-container{
max-width:1440px;
width:100%;
margin:0 auto;
padding:0 16px;
}

/* HERO SECTION */

.results-hero-section{
margin-top:74px;
background:#F5F1EC;
padding-bottom:80px;
}

/* GRID SECTION */

.results-grid-section{
background:#FFFFFF;
padding-top:32px;
padding-bottom:100px;
}

/* BREADCRUMB */

.results-breadcrumb{
display:flex;
align-items:center;
gap:8px;
padding-top:32px;
margin-bottom:48px;
}

/* HOME ICON */

.breadcrumb-home img{
width:18px;
height:18px;
display:block;
}

/* SEPARATOR */

.breadcrumb-separator{
font-size:14px;
color:#1A1A1A;
}

/* RESULTS TEXT */

.breadcrumb-current{
font-family:"Proxima Nova", sans-serif;
font-weight:600;
font-size:16px;
line-height:22px;
letter-spacing:0;
color:#1A1A1A;
}

/* HERO */

.results-hero{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:24px;
align-items:flex-start;
}

/* TITLE */

.results-title{
font-family:"Proxima Nova Bold", sans-serif;
font-weight:700;
font-size:52px;
line-height:58px;
color:#FF7900;
margin:0;
}

/* DESCRIPTION */

.results-description{
font-weight:600;
font-size:24px;
line-height:30px;
margin-top:0;
margin-bottom:24px;
margin-right: 20px;
}

/* NOTE */

.results-note{
font-size:16px;
line-height:22px;
margin-bottom:24px;
}

/* FILTER */

.results-filters{
display:flex;
flex-wrap:wrap;
gap:16px;
}

.filter{
padding:10px 24px;
border-radius:999px;
border:1px solid #1A1A1A;
background:transparent;
font-size:16px;
font-weight:600;
line-height:22px;
cursor:pointer;
}

.filter.active{
background:#1A1A1A;
color:#fff;
}

/* GRID */

.results-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
justify-items:center;
}

/* CARD */

.result-card{
background:#E9DED3;
border-radius:16px;
overflow:hidden;
width:100%;
height:438px;
display:flex;
flex-direction:column;
}

/* IMAGE */

.comparison-slider{
position:relative;
height:324px;
overflow:hidden;
cursor:default;
flex-shrink:0;
}

.before-img,
.after-img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}

/* BEFORE IMAGE MASK */

.before-img{
clip-path: inset(0 50% 0 0);
}

/* DIVIDER LINE */

.slider-divider{
position:absolute;
left:50%;
top:0;
width:1px;
height:100%;
background:#1A1A1A;
transform:translateX(-50%);
z-index:5;
}

/* OVAL HANDLE */

.slider-handle{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:44px;
height:26px;
background:#FF7900;
border:1px solid #1A1A1A;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
cursor:grab;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}

/* DISABLE TEXT / IMAGE SELECTION */

.comparison-slider,
.comparison-slider *{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}

/* ARROW ICON */

.slider-arrow{
width:10px;
height:10px;
position:absolute;
top:50%;
transform:translateY(-50%);
}

/* LEFT ARROW */

.slider-arrow-left{
left:10px;
}

/* RIGHT ARROW */

.slider-arrow-right{
right:10px;
}

/* LABEL */

.label-before{
position:absolute;
bottom:15px;
left:15px;
background:white;
padding:13px 15px;
border-radius:20px;
font-size:12px;
}

.label-after{
position:absolute;
bottom:15px;
right:15px;
background:white;
padding:13px 15px;
border-radius:20px;
font-size:12px;
}

/* TEXT */

.card-content{
padding:20px;
display:flex;
align-items:center;
font-size:16px;
line-height:22px;
}

.card-content p{
margin:0;
}

/* LOAD MORE BUTTON */

.results-loadmore-wrapper{
display: none !important;;
justify-content:center!important;
margin-top:40px;
}

.results-loadmore-btn{
padding:12px 32px;
border-radius:999px;
border:1px solid #1A1A1A;
background:#FFFFFF;
font-family:"Proxima Nova", sans-serif;
font-size:14px;
cursor:pointer;
}


/* PAGINATION */

.results-pagination{
margin-right:50px;
margin-top:60px;
display:flex;
justify-content:flex-end;
}

/* pagination wrapper */

.results-pagination ul{
display:flex;
align-items:center;
gap:8px;
list-style:none;
padding:0;
margin:0;
}

/* page number */

.results-pagination .page-numbers{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
font-family:"Proxima Nova", sans-serif;
font-weight:600;
font-size:16px;
line-height:22px;
letter-spacing:0;
color:#1A1A1A;
text-decoration:none;
border-radius:1000px;
}

/* active page */

.results-pagination .page-numbers.current{
background:#FF7900;
border:1px solid #FF7900;
color:#FFFFFF;
}

/* hover */

.results-pagination a.page-numbers:hover{
background:#FF7900;
color:#FFFFFF;
}

/* NEXT BUTTON */

.results-pagination .next{
display:flex;
align-items:center;
font-family:"Proxima Nova", sans-serif;
font-weight:400;
font-size:12px;
line-height:18px;
color:#000000;
margin-left:8px;
}

.results-pagination .next.page-numbers{
background:none;
border:none;
}

.results-pagination .next::after{
content:"›";
margin-left:6px;
font-size:14px;
}

.results-pagination .next.page-numbers:hover{
background:transparent !important;
color:#000000 !important;
border:none !important;
}

.results-pagination .prev{
display:flex;
color:#000000;
margin-right:30px;
}

.results-pagination .prev::before{
content:"<";
margin-right:6px;
font-size:14px;
}

.results-pagination .prev.page-numbers:hover{
background:transparent !important;
color:#000000 !important;
border:none !important;
}

/* =========================
TABLET
========================= */

@media (max-width:1024px){

.results-container{
padding:0 24px;
}

.results-hero{
grid-template-columns:1fr;
gap:32px;
}

.results-title{
font-size:36px;
line-height:42px;
}

.results-grid{
grid-template-columns:1fr;
gap:32px;
justify-items:center;
}

/* CARD SIZE */

.result-card{
height:586px;
}

/* IMAGE */

.comparison-slider{
height:467px;
}

/* FILTER SCROLL */

.results-filters{
display:flex;
flex-wrap:nowrap;
gap:12px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:8px;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}

/* filter tidak shrink */

.filter{
flex:0 0 auto;
white-space:nowrap;
}

/* scrollbar */

.results-filters::-webkit-scrollbar{
height:4px;
}

.results-filters::-webkit-scrollbar-track{
background:#E6E1DA;
}

.results-filters::-webkit-scrollbar-thumb{
background:#BDB7AF;
border-radius:10px;
}

/* PAGINATION HIDDEN */

.results-pagination{
display:none;
}

/* LOAD MORE */

.results-loadmore-wrapper{
display:flex;
}

/* TOUCH HANDLE */

.slider-handle{
width:64px;
height:32px;
}

}

/* =========================
MOBILE
========================= */

@media (max-width:767px){

.results-hero,
.results-hero *{
max-width:100%;
}

.results-hero{
width:100%;
min-width:0;
}

.results-grid{
grid-template-columns:1fr;
gap:32px;
justify-items:center;
}

.results-hero{
grid-template-columns:1fr;
}

.results-title{
white-space: normal;
overflow-wrap: break-word;
}

.results-description{
white-space: normal;
overflow-wrap: break-word;
}

/* CARD SIZE */

.result-card{
height:406px;
border-radius:12px;
}

/* IMAGE */

.comparison-slider{
height:240px;
}

/* DESCRIPTION */

.card-content{
padding:16px;
font-size:15px;
}

.results-description{
margin-right: 0;
}

/* FILTER */

.results-filters{
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
gap:12px;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
width:100%;
touch-action:pan-x;
}

.results-filters::-webkit-scrollbar{
display:none;
}

.filter{
flex:0 0 auto;
white-space:nowrap;
}


/* HANDLE */

.slider-handle{
width:64px;
height:32px;
}

}


.elementor-section,
.elementor-container,
.elementor-column{
max-width:100% !important;
overflow:visible !important;
}