.elementor-334 .elementor-element.elementor-element-c7e45fd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-334 .elementor-element.elementor-element-00d3211{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-332bd35 */.cw-why{
background:#0d141c;
padding:120px 6%;
height:220vh;
color:white;
font-family:sans-serif;
}

.cw-container{
display:flex;
gap:80px;
}

.cw-left{
flex:1;
position:sticky;
top:120px;
}

.cw-left h2{
font-size:48px;
margin-bottom:20px;
}

.cw-left p{
color:#aeb7c2;
margin-bottom:25px;
line-height:1.6;
}

.cw-left h3{
color:#f3a84f;
margin-bottom:30px;
}

.cw-btn{
background:linear-gradient(135deg,#f6b35f,#f2a03d);
padding:14px 28px;
border-radius:30px;
color:black;
font-weight:600;
text-decoration:none;
}

.cw-cards{
flex:1;
position:sticky;
top:120px;
height:420px;
perspective:1400px;
}

.cw-card{
position:absolute;
width:100%;
background:linear-gradient(135deg,#e3a45a,#f6c37a);
padding:40px;
border-radius:20px;
box-shadow:0 30px 60px rgba(0,0,0,0.4);
transform-style:preserve-3d;
}

.cw-card:nth-child(1){z-index:4;}
.cw-card:nth-child(2){z-index:3;}
.cw-card:nth-child(3){z-index:2;}
.cw-card:nth-child(4){z-index:1;}

.cw-number{
background:black;
color:#f6b35f;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
margin-bottom:20px;
}
.work-card{
position:absolute !important;
width:100%;
top:0;
left:0;
transform-origin:center;
transform-style:preserve-3d;
}

[data-id="b293eba"]{
position:relative;
height:500px;
perspective:1500px;
}

.work-card:nth-child(1){z-index:4}
.work-card:nth-child(2){z-index:3}
.work-card:nth-child(3){z-index:2}
.work-card:nth-child(4){z-index:1}
[data-id="1e2970d"]{
min-height:200vh;
.work-content{
position:sticky;
top:120px;
height:fit-content;
}

[data-id="b293eba"]{
position:relative;
height:500px;
perspective:1200px;
}

.work-card{
position:absolute;
top:0;
left:0;
width:100%;
transform-style:preserve-3d;
}

.work-card:nth-child(1){z-index:4;}
.work-card:nth-child(2){z-index:3;}
.work-card:nth-child(3){z-index:2;}
.work-card:nth-child(4){z-index:1;}
}
[data-id="1e2970d"]{
min-height:220vh;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-520ebf1 */<style>

/* SECTION */

.why-section{
background:#0f1720;
padding:120px 6%;
color:white;
font-family:sans-serif;
}

.why-container{
display:flex;
gap:80px;
}

/* LEFT CONTENT */

.why-left{
flex:1;
position:sticky;
top:120px;
}

.why-left h2{
font-size:48px;
margin-bottom:20px;
}

.why-left p{
color:#aab3be;
line-height:1.6;
margin-bottom:30px;
}

/* BUTTON */

.why-btn{
padding:14px 28px;
background:linear-gradient(135deg,#f6b35f,#f2a03d);
border-radius:30px;
color:black;
text-decoration:none;
font-weight:600;
}

/* CARD AREA */

.why-cards{
flex:1;
position:relative;
height:500px;
overflow:hidden;
}

/* CARDS */

.why-card{
position:absolute;
width:100%;
background:linear-gradient(135deg,#e3a45a,#f6c37a);
padding:40px;
border-radius:20px;
box-shadow:0 30px 60px rgba(0,0,0,0.4);
transition:0.6s;
}

.why-card:nth-child(1){z-index:4;}
.why-card:nth-child(2){z-index:3;}
.why-card:nth-child(3){z-index:2;}
.why-card:nth-child(4){z-index:1;}

.num{
background:black;
color:#f6b35f;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-weight:bold;
margin-bottom:20px;
}

/* MOBILE */

@media(max-width:768px){

.why-container{
flex-direction:column;
gap:40px;
}

.why-left{
position:relative;
top:auto;
}

.why-left h2{
font-size:32px;
}

.why-cards{
height:auto;
}

.why-card{
position:relative;
margin-bottom:25px;
transform:rotate(-3deg);
}

.why-card:nth-child(2){
transform:rotate(2deg);
}

.why-card:nth-child(3){
transform:rotate(-2deg);
}

.why-card:nth-child(4){
transform:rotate(3deg);
}

}

</style>



<section class="why-section">

<div class="why-container">

<div class="why-left">

<h2>Why Choose Us</h2>

<p>
We build WordPress websites that do more than look good — they drive results.
Every website is crafted to attract, engage and convert the right audience.
</p>

<a href="#" class="why-btn">Get started today</a>

</div>



<div class="why-cards">

<div class="why-card">
<div class="num">01</div>
<h3>Built for Results</h3>
<p>Every website is structured to convert visitors into leads and customers.</p>
</div>

<div class="why-card">
<div class="num">02</div>
<h3>Fast Clean Development</h3>
<p>Optimized WordPress architecture for speed and SEO.</p>
</div>

<div class="why-card">
<div class="num">03</div>
<h3>Agency Level Quality</h3>
<p>Direct communication and premium delivery.</p>
</div>

<div class="why-card">
<div class="num">04</div>
<h3>Websites That Sell</h3>
<p>Every section designed to generate leads.</p>
</div>

</div>

</div>

</section>



<script>

const cards = document.querySelectorAll(".why-card");

window.addEventListener("scroll",()=>{

let scroll = window.scrollY;

cards.forEach((card,i)=>{

let offset = i*200;

if(scroll > offset){

card.style.transform="translateY(0px)";

}else{

card.style.transform="translateY(200px)";

}

});

});

</script>/* End custom CSS */