/* ==========================================
   SERVICES
========================================== */

.services{

background:var(--white);

}

.services .grid-4{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.service-card{

background:#fff;

border-radius:28px;

padding:40px 35px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

height:100%;

border:1px solid #EEF2F7;

}

.service-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(90deg,var(--primary),var(--success));

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-icon{

width:82px;

height:82px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF5FF;

margin-bottom:30px;

}

.service-icon img{

width:46px;

height:46px;

object-fit:contain;

}

.service-card h3{

font-size:26px;

margin-bottom:15px;

color:var(--secondary);

}

.service-card p{

color:var(--text-light);

line-height:1.8;

margin-bottom:28px;

}

.service-card a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.service-card:hover a{

gap:16px;

}

/* ==========================================
   FINANCIAL PRODUCTS
========================================== */

.featured-products{

background:#F8FAFC;

}

.product-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.product-card{

background:#fff;

border-radius:28px;

padding:40px 30px;

text-align:center;

transition:.35s;

box-shadow:var(--shadow);

border:1px solid #EEF2F7;

height:100%;

}

.product-card:hover{

transform:translateY(-10px);

}

.product-card img{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

object-fit:contain;

}

.product-card h3{

font-size:24px;

margin-bottom:12px;

color:var(--secondary);

}

.product-card p{

color:var(--text-light);

margin-bottom:30px;

line-height:1.7;

}

.product-card .btn{

width:100%;

}

.service-card:hover{

box-shadow:

0 20px 50px rgba(37,99,235,.12);

}

.product-card:hover{

box-shadow:

0 20px 50px rgba(37,99,235,.12);

}

.service-card,
.product-card{

display:flex;

flex-direction:column;

}

.service-card p,
.product-card p{

flex:1;

}

.services::before,
.featured-products::before{

content:"";

position:absolute;

width:300px;

height:300px;

border-radius:50%;

background:rgba(37,99,235,.03);

filter:blur(90px);

right:-120px;

top:-120px;

pointer-events:none;

}

.services,
.featured-products{

position:relative;

overflow:hidden;

}

/* ==========================================
   TRUSTED PARTNERS
========================================== */

.partners{

background:var(--white);

padding:60px 0;

border-top:1px solid #EEF2F7;

border-bottom:1px solid #EEF2F7;

}

.partners-heading{

text-align:center;

font-size:18px;

font-weight:600;

color:var(--text-light);

margin-bottom:45px;

}

.partner-slider{

overflow:hidden;

position:relative;

}

.partner-track{

display:flex;

align-items:center;

gap:70px;

width:max-content;

}

.partner-track img{

height:42px;

width:auto;

filter:grayscale(100%);

opacity:.65;

transition:.35s;

}

.partner-track img:hover{

filter:none;

opacity:1;

transform:scale(1.08);

}

/* ==========================================
   REAL ESTATE
========================================== */

.real-estate{

background:

linear-gradient(135deg,#2563EB,#0EA5E9);

color:#fff;

overflow:hidden;

}

.estate-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.estate-content{

max-width:620px;

}

.estate-content span{

display:inline-flex;

padding:10px 18px;

background:rgba(255,255,255,.15);

border-radius:999px;

margin-bottom:25px;

font-weight:600;

}

.real-estate h2{

font-size:56px;

line-height:1.1;

margin-bottom:20px;

}

.real-estate p{

font-size:19px;

line-height:1.8;

opacity:.95;

margin-bottom:35px;

}

.real-estate img{

width:100%;

max-width:650px;

margin:auto;

display:block;

filter:drop-shadow(0 30px 60px rgba(0,0,0,.20));

}

/* ==========================================
WHY CHOOSE US
========================================== */

.why-us{

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.why-card{

background:#fff;

padding:35px;

border-radius:28px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

border:1px solid #EEF2F7;

height:100%;

}

.why-card:hover{

transform:translateY(-8px);

}

.why-icon{

width:78px;

height:78px;

margin:auto;

margin-bottom:25px;

border-radius:22px;

background:#EEF5FF;

display:flex;

align-items:center;

justify-content:center;

}

.why-icon img{

width:42px;

}

.why-card h3{

font-size:24px;

margin-bottom:15px;

}

.why-card p{

color:var(--text-light);

line-height:1.8;

}

.why-card:hover{

box-shadow:

0 20px 55px rgba(37,99,235,.12);

}

.why-icon{

transition:.35s;

}

.why-card:hover .why-icon{

transform:rotate(-8deg) scale(1.08);

}

.real-estate .btn-outline{

background:#fff;

color:var(--primary);

border:none;

}

.real-estate .btn-outline:hover{

background:#E0F2FE;

}

.real-estate::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:350px;

height:350px;

border-radius:50%;

background:rgba(255,255,255,.08);

filter:blur(70px);

}

/* ==========================================
   STATISTICS
========================================== */

.stats{

background:linear-gradient(135deg,#2563EB,#0F172A);

color:#fff;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat-card{

text-align:center;

padding:45px 30px;

border-radius:24px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(8px);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.12);

}

.stat-card h2{

font-size:56px;

font-weight:800;

margin-bottom:12px;

line-height:1;

}

.stat-card span{

font-size:17px;

opacity:.9;

}

/* ==========================================
   TESTIMONIALS
========================================== */

.testimonials{

background:#F8FAFC;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:28px;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

border:1px solid #EEF2F7;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.stars{

font-size:20px;

color:#F59E0B;

letter-spacing:3px;

margin-bottom:22px;

}

.testimonial-card p{

color:var(--text-light);

line-height:1.9;

margin-bottom:28px;

}

.client{

display:flex;

align-items:center;

gap:16px;

}

.client img{

width:64px;

height:64px;

border-radius:50%;

object-fit:cover;

}

.client h4{

font-size:18px;

margin-bottom:4px;

}

.client span{

font-size:14px;

color:var(--text-light);

}

/* ==========================================
   FAQ
========================================== */

.faq{

background:#fff;

}

.faq-list{

max-width:900px;

margin:auto;

}

.faq-item{

border:1px solid #E5E7EB;

border-radius:20px;

margin-bottom:20px;

overflow:hidden;

transition:.35s;

background:#fff;

}

.faq-item.active{

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 30px;

border:none;

background:none;

cursor:pointer;

font-size:18px;

font-weight:600;

text-align:left;

}

.faq-question i{

color:var(--primary);

transition:.35s;

}

.faq-item.active i{

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.faq-answer p{

padding:0 30px 30px;

color:var(--text-light);

line-height:1.9;

}

/* ==========================================
Trust Badge
========================================== */

.trust-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:999px;

background:#EFF6FF;

font-size:14px;

font-weight:600;

color:var(--primary);

margin-bottom:18px;

}

.testimonial-card:hover{

box-shadow:

0 20px 60px rgba(37,99,235,.12);

}

.faq-item:hover{

border-color:#2563EB;

}

.stats,
.testimonials,
.faq{

position:relative;

overflow:hidden;

}

/* ==========================================
   BLOG
========================================== */

.blog{

background:var(--white);

}

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.blog-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

border:1px solid #EEF2F7;

}

.blog-card:hover{

transform:translateY(-10px);

}

.blog-image{

position:relative;

overflow:hidden;

}

.blog-image img{

width:100%;

height:240px;

object-fit:cover;

transition:.5s;

}

.blog-card:hover img{

transform:scale(1.08);

}

.blog-content{

padding:30px;

}

.blog-tag{

display:inline-flex;

padding:8px 18px;

background:#EEF5FF;

color:var(--primary);

border-radius:999px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.blog-content h3{

font-size:24px;

line-height:1.4;

margin-bottom:15px;

color:var(--secondary);

}

.blog-content p{

color:var(--text-light);

line-height:1.8;

margin-bottom:25px;

}

.blog-content a{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.blog-content a:hover{

gap:15px;

}

/* ==========================================
   CALL TO ACTION
========================================== */

.cta{

position:relative;

overflow:hidden;

background:

linear-gradient(135deg,#2563EB,#06B6D4);

color:#fff;

text-align:center;

}

.cta::before{

content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;

background:rgba(255,255,255,.08);

top:-180px;

right:-120px;

filter:blur(80px);

}

.cta::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(255,255,255,.08);

bottom:-180px;

left:-120px;

filter:blur(80px);

}

.cta .container{

position:relative;

z-index:2;

}

.cta h2{

font-size:58px;

line-height:1.15;

margin-bottom:22px;

}

.cta p{

font-size:20px;

max-width:760px;

margin:auto;

margin-bottom:40px;

opacity:.95;

line-height:1.8;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta .btn-outline{

background:#fff;

border:none;

color:var(--primary);

}

.cta .btn-outline:hover{

background:#E0F2FE;

}

/* ==========================================
CTA FEATURES
========================================== */

.cta-features{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:30px;

margin-top:45px;

}

.cta-features div{

display:flex;

align-items:center;

gap:10px;

font-size:16px;

font-weight:600;

}

.cta-features i{

color:#22C55E;

font-size:18px;

}

.blog-card:hover{

box-shadow:

0 20px 60px rgba(37,99,235,.12);

}

.blog,
.cta{

position:relative;

overflow:hidden;

}