/*==================================================
        FASTVAM LANDING PAGE
        Part 1
==================================================*/

:root{

--primary:#22c55e;
--primary-dark:#16a34a;
--secondary:#0f172a;
--text:#475569;
--white:#ffffff;
--bg:#f8fafc;
--border:#e2e8f0;

--radius:22px;

--shadow:
0 15px 35px rgba(15,23,42,.08);

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Estedad',sans-serif;

background:var(--bg);

color:var(--secondary);

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

.container{

width:min(1250px,92%);

margin:auto;

}

/*=========================
Hero
==========================*/

.hero{

position:relative;

padding:120px 0;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

left:-250px;

top:-180px;

background:#dcfce7;

border-radius:50%;

filter:blur(80px);

}

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

right:-150px;

bottom:-180px;

background:#dbeafe;

border-radius:50%;

filter:blur(70px);

}

.hero .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.hero-right{

width:48%;

position:relative;

z-index:2;

}

.hero-left{

width:52%;

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.badge{


align-items:center;

gap:10px;

padding:0 3% 0 !important; 

background:#dcfce7;

color:var(--primary-dark);

border-radius:100px;

font-size:15px;

font-weight:700;

margin-bottom:25px;

box-shadow:var(--shadow);

}

.hero h1{

font-size:64px;

line-height:1.3;

font-weight:900;

margin-bottom:20px;

}

.hero h1 span{

display:block;

background:linear-gradient(90deg,#16a34a,#22c55e);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

line-height:2;

color:var(--text);

max-width:620px;

margin-bottom:35px;

}

/*=========================
Buttons
==========================*/

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

flex-wrap:wrap;

}

.btn-loan{

padding:6% 7% 0% 7%!important;

border-radius:16px;

font-size:17px;

font-weight:700;

transition:var(--transition);

display:inline-flex;

align-items:center;

gap:10px;

}

.btn-loan-primary{

background:linear-gradient(135deg,#22c55e,#16a34a);

color:#fff;

box-shadow:

0 15px 35px rgba(34,197,94,.35);

}

.btn-loan-primary:hover{

transform:translateY(-5px);

box-shadow:

0 25px 45px rgba(34,197,94,.45);

}

.btn-loan-light{

background:#fff;

color:#111827;

border:1px solid var(--border);

}

.btn-loan-light:hover{

background:#f1f5f9;

}

/*=========================
Users
==========================*/

.hero-rating{

display:flex;

align-items:center;

gap:18px;

}

.avatars{

display:flex;

}

.avatars img{

width:56px;

height:56px;

border-radius:50%;

border:4px solid #fff;

margin-left:-15px;

box-shadow:var(--shadow);
display:inline-block;

}

.hero-rating h4{

font-size:21px;

margin-bottom:6px;

}

.hero-rating p{

margin:0;

font-size:15px;

color:#64748b;

}

/*=========================
Phone
==========================*/

.hero-image{

width:540px;

position:relative;

z-index:2;

animation:float 5s ease-in-out infinite;
border-radius: 1%;

}

.glow{

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(circle,#bbf7d0 0%,transparent 70%);

filter:blur(20px);

z-index:-1;

}

/*=========================
Floating Icons
==========================*/

.floating{

position:absolute;

width:70px;

height:70px;

background:#fff;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

box-shadow:var(--shadow);

animation:floatIcon 4s ease-in-out infinite;

}

.bank{

top:60px;

left:20px;

}

.money{

bottom:40px;

right:0;

animation-delay:.5s;

}

.chart{

top:40%;

left:-30px;

animation-delay:1s;

}

.shield{

right:20px;

top:100px;

animation-delay:1.5s;

}

/*=========================
Animation
==========================*/

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes floatIcon{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/*==================================================
            STATS SECTION
==================================================*/

.stats{

padding:90px 0;

position:relative;

}

.stats .container{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat{

position:relative;

background:rgba(255,255,255,.75);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.7);

border-radius:28px;

padding:40px 30px;

text-align:center;

overflow:hidden;

box-shadow:
0 15px 40px rgba(15,23,42,.06);

transition:.35s;

}

.stat::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#22c55e,#4ade80);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.stat:hover::before{

transform:scaleX(1);

}

.stat:hover{

transform:translateY(-12px);

box-shadow:
0 30px 60px rgba(34,197,94,.15);

}

.stat h2{

font-size:56px;

font-weight:900;

color:#16a34a;

margin-bottom:12px;

line-height:1;

}

.stat p{

font-size:18px;

font-weight:600;

color:#64748b;

}

.stat::after{

content:"";

position:absolute;

width:180px;

height:180px;

background:#dcfce7;

border-radius:50%;

top:-90px;

left:-90px;

opacity:.55;

transition:.4s;

}

.stat:hover::after{

transform:scale(1.2);

opacity:.9;

}

/*==============================
SECTION TITLE
==============================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

border-radius:100px;

background:#dcfce7;

color:#16a34a;

font-weight:700;

margin-bottom:18px;

font-size:15px;

}

.section-title h2{

font-size:46px;

font-weight:900;

color:#0f172a;

}

/*==============================
RESPONSIVE HERO
==============================*/

@media(max-width:1200px){

.hero h1{

font-size:52px;

}

.hero-image{

width:470px;

}

}

@media(max-width:992px){

.hero{

padding:80px 0;

}

.hero .container{

flex-direction:column-reverse;

text-align:center;

}

.hero-right{

width:100%;

}

.hero-left{

width:100%;

margin-bottom:40px;

}

.hero p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-rating{

justify-content:center;

}

.hero-image{

width:420px;

}

.stats .container{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){


.btn-loan{
    display:block;
}

.hero h1{

font-size:40px;

}

.hero p{

font-size:17px;

line-height:1.9;

}

.hero-image{

width:320px;

}

.btn-loan{

width:100%;

justify-content:center;

}

.hero-buttons{

flex-direction:column;

}

.stats{

padding:60px 0;

}

.stats .container{

grid-template-columns:1fr;

gap:20px;

}

.stat{

padding:30px;

}

.stat h2{

font-size:42px;

}

.section-title h2{

font-size:34px;

}

.floating{

display:none;

}

}
/*==================================================
                STEPS
==================================================*/

.steps{

padding:120px 0;

position:relative;

background:
linear-gradient(180deg,#ffffff,#f8fafc);

overflow:hidden;

}

.steps::before{

content:"";

position:absolute;

width:700px;

height:700px;

right:-300px;

top:-250px;

background:#dcfce7;

border-radius:50%;

filter:blur(90px);

opacity:.6;

}

.step-grid{

width:min(1200px,92%);

margin:auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

position:relative;

z-index:2;

}

.step{

background:#fff;

border-radius:28px;

padding:45px 30px;

text-align:center;

position:relative;

transition:.35s;

box-shadow:
0 15px 40px rgba(15,23,42,.06);

overflow:hidden;

}

.step::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:
linear-gradient(90deg,#22c55e,#4ade80);

transform:scaleX(0);

transition:.35s;

}

.step:hover::before{

transform:scaleX(1);

}

.step:hover{

transform:translateY(-12px);

box-shadow:
0 35px 60px rgba(34,197,94,.16);

}

.banks .section-title span p{
      color:black !important;
}

.number-tittle p,h3{
    color:black !important;
}


.number{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:
linear-gradient(135deg,#22c55e,#16a34a);

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

font-weight:900;

color:#fff;

box-shadow:
0 15px 35px rgba(34,197,94,.35);

transition:.35s;

}

.step:hover .number{

transform:rotate(12deg) scale(1.08);

}

.step h3{

font-size:25px;

margin-bottom:15px;

font-weight:800;

}

.step p{


line-height:2;

color:#fff;

}

/*==================================================
              BANKS
==================================================*/

.banks{

padding:120px 0;

background:#fff;

position:relative;

}

.banks-grid{

width:min(1200px,92%);

margin:auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

}

.banks-grid div{

background:#ffffff;

padding:35px;

border-radius:24px;

text-align:center;

font-size:22px;

font-weight:800;

position:relative;

overflow:hidden;

transition:.35s;

border:1px solid #edf2f7;

box-shadow:
0 12px 35px rgba(15,23,42,.05);

}

.banks-grid div::before{

content:"🏦";

display:block;

font-size:46px;

margin-bottom:18px;

transition:.35s;

}

.banks-grid div:hover{

transform:translateY(-10px);

background:
linear-gradient(135deg,#22c55e,#16a34a);

color:#fff;

box-shadow:
0 25px 60px rgba(34,197,94,.22);

}

.banks-grid div:hover::before{

transform:scale(1.2);

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1100px){

.step-grid{

grid-template-columns:repeat(2,1fr);

}

.banks-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.step-grid{

grid-template-columns:1fr;

}

.banks-grid{

grid-template-columns:1fr;

}

.number{

width:75px;

height:75px;

font-size:30px;

}

.step{

padding:35px 25px;

}

}

/*==================================================
                PHONE MOCKUP
==================================================*/

.phone-section{

padding:140px 0;

position:relative;

overflow:hidden;

background:
linear-gradient(135deg,#f8fafc,#ffffff);

}

.phone-section::before{

content:"";

position:absolute;

width:750px;

height:750px;

left:-250px;

top:-220px;

background:#dcfce7;

border-radius:50%;

filter:blur(90px);

opacity:.8;

}

.phone-section::after{

content:"";

position:absolute;

width:550px;

height:550px;

right:-200px;

bottom:-200px;

background:#dbeafe;

border-radius:50%;

filter:blur(90px);

opacity:.7;

}

.phone-wrapper{

width:min(1200px,92%);

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:90px;

position:relative;

z-index:2;

}

.phone-info{

width:45%;

}

.phone-info h2{

font-size:48px;

font-weight:900;

margin-bottom:25px;

line-height:1.4;

}

.phone-info p{

font-size:19px;

line-height:2.1;

color:#64748b;

margin-bottom:40px;

}

.phone-list{

display:flex;

flex-direction:column;

gap:20px;

}

.phone-list div{

display:flex;

align-items:center;

gap:15px;

font-size:18px;

font-weight:700;

}

.phone-list i{

width:55px;

height:55px;

border-radius:18px;

background:#dcfce7;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#16a34a;

}

/*=========================
PHONE
==========================*/

.phone-box{

width:55%;

display:flex;

justify-content:center;

position:relative;

}

.phone{

width:420px;

border-radius:48px;

background:#fff;

padding:18px;

box-shadow:

0 45px 100px rgba(15,23,42,.18);

position:relative;

z-index:2;

animation:phoneFloat 5s ease-in-out infinite;

}

.phone img{

width:100%;

border-radius:36px;

display:block;

}

/*=========================
Glass Cards
==========================*/

.glass-card{

position:absolute;

background:rgba(255,255,255,.72);

backdrop-filter:blur(18px);

padding:18px 24px;

border-radius:22px;

box-shadow:

0 20px 50px rgba(15,23,42,.10);

display:flex;

align-items:center;

gap:15px;

font-weight:800;

animation:floatCard 6s ease-in-out infinite;

}

.glass-card i{

width:46px;

height:46px;

border-radius:14px;

display:flex;

justify-content:center;

align-items:center;

background:#dcfce7;

color:#16a34a;

font-size:20px;

}

.card-one{

top:30px;

left:-60px;

}

.card-two{

bottom:60px;

right:-60px;

animation-delay:1.5s;

}

.card-three{

top:50%;

right:-90px;

animation-delay:3s;

}

/*=========================
CTA
==========================*/

.cta{

padding:120px 0;

background:

linear-gradient(135deg,#22c55e,#16a34a);

color:#fff;

position:relative;

overflow:hidden;

}

.cta::before{

content:"";

position:absolute;

width:700px;

height:700px;

left:-250px;

top:-250px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.cta::after{

content:"";

position:absolute;

width:450px;

height:450px;

right:-180px;

bottom:-180px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.cta .container{

text-align:center;

position:relative;

z-index:2;

}

.cta h2{

font-size:52px;

font-weight:900;

margin-bottom:20px;

}

.cta p{

font-size:22px;

margin-bottom:45px;

opacity:.95;

}

@media(max-width:768px){
    .cta .btn-loan p{
        position: absolute !important;
    }

    .cta .btn-loan p{
        color:red !important;
    display: flex;
    justify-content: center; /* وسط افقی */
    align-items: center;     /* وسط عمودی */

    min-height: 56px;
    text-align: center;
}
}

.cta .btn-loan{

background:#fff;

color:#16a34a;

padding:20px 42px;

font-size:18px;

border-radius:18px;

box-shadow:

0 20px 45px rgba(0,0,0,.12);

}

.cta .btn--loan:hover{

transform:translateY(-8px);

}

/*=========================
Animations
==========================*/

@keyframes phoneFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*=========================
Responsive
==========================*/

@media(max-width:1000px){

.phone-wrapper{

flex-direction:column-reverse;

text-align:center;

}

.phone-info{

width:100%;

}

.phone-box{

width:100%;

}

.phone{

width:340px;

}

.glass-card{

display:none;

}

.cta h2{

font-size:38px;

}

}

@media(max-width:700px){

.phone{

width:280px;

}

.phone-info h2{

font-size:34px;

}

.phone-info p{

font-size:17px;

}

.cta h2{

font-size:30px;

}

.cta p{

font-size:18px;

}

}