body{
    overflow-x:hidden;
}
.elementor-button {
	clip-path: polygon(10% 0, 100% 0, 100% 30%, 100% 72%, 90% 100%, 30% 100%, 0 100%, 0 28%);
    min-height: 52px;
    display: flex;
    width: max-content; 
	transition: background .4s ease-in-out
}
.elementor-button:before{
	content:"";
	width:0%;
	height:100%;
	background:#0B97B7;
	position:absolute;
	left:0px;
	top:0px;
	transition: .4s;
	z-index:-1;
}
.card-text-panel .elementor-button{
	margin-top:40px;
}
.card-text-panel .elementor-button:before{
	background:#FFF;
}
.card-text-panel .elementor-button:hover{
	color:#000 !important;
}
.elementor-button:hover:before{
	width:100%;
}
.elementor-button  svg{
	width:36px;
	height:36px;
}
.elementor-button  .elementor-button-content-wrapper{
	align-items:center; 
	gap:15px;
}

/* .hero-section-bg:before{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.09%, rgba(0, 0, 0, 0.5) 61.92%),
linear-gradient(175.61deg, rgba(0, 0, 0, 0) 3.57%, rgba(0, 0, 0, 0.4) 47.87%);
	opacity:.5;
	border-radius:40px;
} */

.our-process-item{
	padding: 20px 30px;
    clip-path: polygon(15% 0, 100% 0, 100% 30%, 100% 88%, 85% 100%, 30% 100%, 0 100%, 0 12%);
	transition:.3s;
}
.our-process-item  .elementor-widget-image{
    clip-path: polygon(15% 0, 100% 0, 100% 30%, 100% 70%, 85% 100%, 30% 100%, 0 100%, 0 30%);
}
.our-process-item img{
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transition: .4s;
}
/* 
.our-process-item:hover img{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.our-process-item .count-number, .our-process-item h3, .our-process-item .elementor-icon-box-description{
	transition:.3s ease-in-out;
}
.our-process-item:hover .count-number{
	opacity:0;
}
.our-process-item:hover h3, .our-process-item:hover .elementor-icon-box-description{
	color:rgba(0, 0, 0, 1) !important;
} */
.our-process-item.active{
	background-color:#FFF!important;
}
.our-process-item.active img{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.our-process-item .count-number, .our-process-item h3, .our-process-item .elementor-icon-box-description{
	transition:.3s ease-in-out;
}
.our-process-item.active .count-number{
	opacity:0;
}
.our-process-item.active h3, .our-process-item.active .elementor-icon-box-description{
	color:rgba(0, 0, 0, 1) !important;
}

.our-process-item h3{
	min-height: 120px;
	display:flex;
    align-items: end;
}
.our-process-item .process-content {
    transform: translateY(calc(100% - 120px));
    transition: transform 0.3s ease;
}

/* .our-process-item:hover .process-content {
    transform: translateY(0);
} */

.our-process-item.active .process-content {
    transform: translateY(0);
}
.homeowner-slider .swiper-pagination{
    bottom: unset !important;
    top: 50px;
    width: 49% !important;
    left: unset !important;
    right: 0px !important;
    transform: unset !important;
    text-align: left;
}
.homeowner-slider .swiper-pagination-bullet{
	width:50px !important; 
	height:50px !important;
	border-radius:0px !important;
	clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
	background:#979696 !important;
	padding:2px;
	opacity:1 !important;
}
.homeowner-slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background:#000000 !important;
}
.homeowner-slider .swiper-pagination-bullet::after {
	content:"" !important;
    width: 45px;
    height: 44px;
    position: absolute;
    background: #ffffff;
    z-index: -1;
    clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
    left: 2.5px;
    top: 2.5px;
}
.homeowner-slider .swiper-pagination {
    counter-reset: slide;
}

.homeowner-slider .swiper-pagination-bullet {
    position: relative;
}

.homeowner-slider .swiper-pagination-bullet::before {
    counter-increment: slide;
    content: counter(slide);
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    color: #00000066;
    font-size:20px;
    font-weight: bold;
}

.homeowner-slider .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
	color:#000000 !important;
}


/*=======================================================*/

/* ── fake sections ── */
.fake-section{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#faf9f7;
  letter-spacing:-0.02em;
}

/* ══════════════════════════════════════════
   SECTION + STICKY VIEWPORT
══════════════════════════════════════════ */
.expertises_section{
	position:relative;
	width:100%;
}

.expertises_viewport{
  position:sticky;top:0;width:100%;
min-height:100vh;overflow:hidden;
  display:flex;align-items:stretch;
}

/* ══════════════════════════════════════════
   CARD
  ══════════════════════════════════════════ */
.expertises_item{
  position:relative;
  flex-shrink:0;
  height:100%;
  overflow:hidden;
  will-change:width;
  border-radius:0;
  transition:none; /* GSAP handles everything */
}
.expertises_item:before{
	content:"";
	width:100%;
	height:100%;
	background-image:url(https://renovatepdx.com/wp-content/uploads/2026/06/Noise-Texture-1.png);
	position:absolute;
	left:0px;
	top:0px; 
	background-size:auto;
	background-repeat:no-repeat;
	
}

.expertises_item:nth-child(2){background:#1298B7}
.expertises_item:nth-child(3){background:#918450}
.expertises_item:nth-child(4){background:#0B20B1}

/* ── INNER LAYOUT ──
*/
.card-inner{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:flex;
  align-items:stretch;
}

/* IMAGE PANEL — centered, respects natural aspect ratio */
.card-image-panel{
  position:absolute;
  top:0;right:0;bottom:0;
  will-change:width,transform;
  overflow:hidden;
  display:flex;
  align-items:end;
  justify-content:end;  
  padding: 100px 0px;
  flex-direction:column;

}

.card-image-panel img{
  width:100%;
  height:auto;        /* natural aspect ratio — no 100vh stretch */
  max-height:500px;     /* cap so it never overflows the card       */
  object-fit:contain;
  display:block;
  will-change:transform;
  transform:scale(1.05);
}

/* TEXT PANEL — slides in from left side, hidden when inactive */
.card-text-panel{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:42%;
  display:flex;
  flex-direction:column;
  justify-content:end;
  gap:1.5rem;
  opacity:0;
  transform:translateX(-24px);
  z-index:10;
  pointer-events:auto; /* change this */
  padding:100px 0 230px 100px;
}

.card-label{
  font-size:0.72rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;opacity:0.45;
}

.card-text-panel h2{
  font-size:54px;
  font-weight:700;
  line-height:1.06;
  color:#FFF;
}

.card-text-panel p{
  font-size:20px;
  line-height:1.75em;color:#FFF;
}

.card-text-panel a{
  display:inline-flex;
  align-items:center;
  font-size:16px;
  font-weight:500;
  color:#1a1a1a;
  background:#F75C03;
  transition:background .3s,color .3s;
  min-width:160px;
  text-align:center;
  justify-content: center;
}

.card-text-panel a:hover{background:#1a1a1a;color:#faf9f7}

/* SLIM CARD — label rotated vertically when card is narrow */
.card-slim-label{
  font-size:32px;
  font-weight:500;
  color:#FFF;
  z-index:3;
  width:100%; 
  margin-bottom:20px;
}

/* ── BIG BG NUMBER ── */
.card-bg-num{
  position:absolute;bottom:-0.05em;right:0.05em;
  font-family:var(--fd);font-size:clamp(6rem,12vw,12rem);
  font-weight:900;color:rgba(26,26,26,.05);
  line-height:1;pointer-events:none;user-select:none;z-index:1;
}

/* ── UI OVERLAYS ── */
.expertises_title{
  position:fixed;top:clamp(1.5rem,4vh,3rem);left:clamp(1.5rem,4vw,3.5rem);
  z-index:1000;pointer-events:none;
}
.expertises_title h1{
  font-family:var(--fd);font-size:clamp(.7rem,1.1vw,.9rem);
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
}
.card-text-panel ul{
	list-style:none;
	display:flex;
	gap:20px;
	flex-wrap:wrap;
	padding:0px;
	margin:0px;
}
.card-text-panel ul li{
	color:#FFF;
    font-size: 20px;
	text-transform:uppercase;
	position:relative;
	padding-left:20px;
    line-height: 1;
}
.card-text-panel ul li:first-child{
	padding-left:0px;
}
.card-text-panel ul li:before{
    content: "";
    width: 2px;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    left: 5px;
    transform: rotate(15deg);
    top: 0;
}
.card-text-panel ul li:first-child:before{
	display:none;
}
.builte_items{
/*     padding:1px !important;
    background:rgba(241, 241, 241, 1);
    clip-path:polygon(
        14% 0,
        100% 0,
        100% 30%,
        100% 80%,
        86% 100%,
        30% 100%,
        0 100%,
        0 20%
    ); */
	transition:.3s ease-in-out;
}
.builte_items_inter{
    padding: 34px;
	background: rgba(241, 241, 241, 0.7);
 	backdrop-filter:blur(4px);
  clip-path:polygon(
        14% 0,
        100% 0,
        100% 30%,
        100% 80%,
        86% 100%,
        30% 100%,
        0 100%,
        0 18%
    );
  backdrop-filter: blur(10px);
	transition:.3s ease-in-out;
}
.builte_items_inter:before{
    content: "";
    width: 100%;
    height: 100%;
    background: #0B97B7;
    opacity: 1;
    transform: translateY(100%);
	transition: .4s;
}
.builte_items_inter:hover:before{
    transform: translateY(0%);
}
.builte_items:hover span, .builte_items:hover p{
	color:#fff !important;
}
/* .builte_items svg path{
	transition:.3s;
}
.builte_items:hover .elementor-icon svg path:first-child{
	fill:#fa5202;
}

.builte_items:hover .elementor-icon svg path:last-child{
	fill:#FFF;
} */

*/===========what-we-do-item===========*/
.what-we-do-item .elementor-image-box-wrapper{
    display: flex;
    align-items: center;
    gap: 20px;
    transition: gap .5s ease;
}

.what-we-do-item .elementor-image-box-img{
    transition: .5s ease;
}

.what-we-do-item:hover .elementor-image-box-img{
    width:30% !important;
}


.social-links .elementor-grid-item{
	width:50px !important; 
	height:50px !important;
	border-radius:0px !important;
	clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
	background:#979696 !important;
	padding:2px;
	opacity:1 !important;
}
.social-links .elementor-grid-item:hover{
	background:#f75c03 !important;
}
.social-links .elementor-icon{
    width: 44px;
    height: 44px;
    background: #ffffff;
    z-index: -1;
    clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
    margin-left: 1px;
    margin-top: 1px;
}