/*=========================================
FA MEDIA - STYLE.CSS
PART 1
=========================================*/

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --secondary:#EF4444;

    --dark:#0F172A;
    --gray:#64748B;

    --light:#F8FAFC;
    --white:#FFFFFF;

    --border:#E2E8F0;

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

    --radius:22px;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:#fff;

    color:var(--dark);

    overflow-x:hidden;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

img{

    display:block;

    width:100%;

}

.container{

    width:min(90%,1280px);

    margin:auto;

}

section{

    padding:100px 0;

}

/*=========================
BUTTON
=========================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:17px 34px;

border-radius:14px;

background:linear-gradient(135deg,#2563EB,#1D4ED8);

color:#fff;

font-weight:600;

transition:.35s;

box-shadow:0 20px 40px rgba(37,99,235,.25);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 30px 60px rgba(37,99,235,.35);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:17px 34px;

border:2px solid var(--primary);

border-radius:14px;

font-weight:600;

color:var(--primary);

transition:.35s;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/*=========================
NAVBAR
=========================*/

.header{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 0;

z-index:999;

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

backdrop-filter:blur(18px);

transition:.35s;

border-bottom:1px solid rgba(0,0,0,.05);

}

.header.scrolled{

padding:12px 0;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:58px;

width:auto;

}

.nav-menu{

display:flex;

gap:40px;

align-items:center;

}

.nav-menu a{

position:relative;

font-size:15px;

font-weight:600;

color:var(--dark);

transition:.3s;

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

border-radius:20px;

background:var(--primary);

transition:.35s;

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

width:100%;

}

.nav-menu a:hover{

color:var(--primary);

}

.nav-right{

display:flex;

align-items:center;

gap:18px;

}

.btn-nav{

padding:15px 26px;

border-radius:14px;

background:var(--primary);

color:#fff;

font-weight:600;

box-shadow:0 15px 35px rgba(37,99,235,.25);

transition:.3s;

}

.btn-nav:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

.hamburger{

display:none;

flex-direction:column;

gap:6px;

cursor:pointer;

}

.hamburger span{

width:28px;

height:3px;

border-radius:30px;

background:var(--dark);

}

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

.hero{

padding-top:180px;

padding-bottom:120px;

background:#fff;

position:relative;

overflow:hidden;

min-height:850px;

display:flex;

align-items:center;


}

.hero::before{

content:"";

position:absolute;

right:-180px;

top:-120px;

width:650px;

height:650px;

border-radius:50%;

background:#2563EB;

opacity:.06;

filter:blur(100px);

}

.hero::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:450px;

height:450px;

background:#60A5FA;

opacity:.05;

border-radius:50%;

filter:blur(100px);

}

.hero-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}
.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:#EEF4FF;

color:var(--primary);

font-weight:600;

margin-bottom:25px;

}



.hero-content h1 span{

color:var(--primary);

}

.hero-content p{

font-size:18px;

line-height:34px;

color:var(--gray);

margin-bottom:40px;

max-width:620px;

}

.hero-button{

display:flex;

align-items:center;

gap:18px;

margin-bottom:45px;

}
.btn-outline{

background:white;

box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.hero-counter{

display:flex;

justify-content:flex-start;

gap:60px;

margin-top:10px;

}

.hero-counter h2{

font-size:42px;

color:var(--primary);

margin-bottom:8px;

}

.hero-counter span{

font-size:15px;

color:var(--gray);

}

.hero-image{
    width:52%;
    flex:none;
    position:relative;
}

.hero-image img{
    width:100%;
    display:block;
    border-radius:24px;
}
.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:15px;

padding:18px 20px;

background:#fff;

border-radius:18px;

box-shadow:var(--shadow);

}

.floating-card i{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:#EEF4FF;

color:var(--primary);

font-size:22px;

}

.floating-card h4{

font-size:16px;

margin-bottom:4px;

}

.floating-card small{

color:var(--gray);

}

.card-one{

left:60px;

top:40px;

}

.card-two{

right:-30px;

top:180px;

}

.card-three{

left:35px;

bottom:30px;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

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

.section{

padding:100px 0;

}

.section-title{

text-align:center;

margin-bottom:65px;

}

.section-title span{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:#EEF4FF;

color:var(--primary);

font-size:14px;

font-weight:600;

letter-spacing:.5px;

margin-bottom:18px;

}

.section-title h2{

font-size:44px;

font-weight:800;

color:var(--dark);

margin-bottom:18px;

}

.section-title p{

max-width:700px;

margin:auto;

font-size:17px;

line-height:32px;

color:var(--gray);

}

/*=========================================
SERVICES
=========================================*/

.services{

background:#fff;

position:relative;

}

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

background:#fff;

padding:40px 35px;

border-radius:24px;

border:1px solid #EDF2F7;

transition:.35s;

position:relative;

overflow:hidden;

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

}

.service-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(37,99,235,.05),
transparent);

transition:.6s;

}

.service-card:hover::before{

left:100%;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 55px rgba(37,99,235,.12);

}

.service-card .icon{

width:75px;

height:75px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF4FF;

margin-bottom:28px;

}

.service-card .icon i{

font-size:32px;

color:var(--primary);

}

.service-card h3{

font-size:24px;

font-weight:700;

margin-bottom:18px;

}

.service-card p{

font-size:16px;

line-height:30px;

color:var(--gray);

margin-bottom:28px;

}

.service-card a{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.service-card:hover a{

gap:14px;

}

/*=========================================
WHY US
=========================================*/

.why{

background:#F8FAFC;

}

.why-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.why-image img{

border-radius:30px;

box-shadow:var(--shadow);

}

.section-subtitle{

display:inline-block;

padding:10px 20px;

background:#EEF4FF;

color:var(--primary);

border-radius:50px;

font-weight:600;

margin-bottom:18px;

}

.why-content h2{

font-size:44px;

font-weight:800;

line-height:1.25;

margin-bottom:25px;

}

.why-content p{

font-size:17px;

line-height:34px;

color:var(--gray);

margin-bottom:45px;

}

.why-grid{

display:grid;

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

gap:22px;

}

.why-box{

background:#fff;

padding:24px;

border-radius:22px;

display:flex;

gap:18px;

align-items:flex-start;

transition:.35s;

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

}

.why-box:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(37,99,235,.12);

}

.why-box i{

width:58px;

height:58px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF4FF;

font-size:24px;

color:var(--primary);

}

.why-box h4{

font-size:18px;

margin-bottom:8px;

}

.why-box span{

font-size:14px;

line-height:24px;

color:var(--gray);

}

/*=========================================
STATISTIC
=========================================*/

.stats{

background:#fff;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

padding:45px 30px;

background:#fff;

border-radius:24px;

text-align:center;

border:1px solid #EEF2F7;

transition:.35s;

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

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(37,99,235,.12);

}

.stat-card h2{

font-size:52px;

font-weight:800;

color:var(--primary);

margin-bottom:12px;

}

.stat-card span{

font-size:16px;

color:var(--gray);

line-height:28px;

}

/*=========================================
PORTFOLIO
=========================================*/

.portfolio{

background:#F8FAFC;

}

.portfolio-grid{

display:grid;

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

gap:30px;

}

.portfolio-item{

position:relative;

overflow:hidden;

border-radius:26px;

background:#fff;

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

cursor:pointer;

transition:.35s;

}

.portfolio-item:hover{

transform:translateY(-10px);

}

.portfolio-item img{

height:380px;

object-fit:cover;

transition:.5s;

}

.portfolio-item:hover img{

transform:scale(1.08);

}

.overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:30px;

background:linear-gradient(
transparent,
rgba(15,23,42,.92));

transform:translateY(100%);

transition:.4s;

}

.portfolio-item:hover .overlay{

transform:translateY(0);

}

.overlay h3{

font-size:24px;

color:#fff;

margin-bottom:12px;

}

.overlay a{

display:inline-flex;

align-items:center;

gap:8px;

color:#fff;

font-weight:600;

transition:.3s;

}

.overlay a:hover{

gap:15px;

}

/*=========================================
PROCESS
=========================================*/

.process{

background:#fff;

}

.process-grid{

display:grid;

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

gap:30px;

}

.process-item{

background:#fff;

padding:45px 30px;

border-radius:24px;

text-align:center;

border:1px solid #EEF2F7;

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

transition:.35s;

}

.process-item:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(37,99,235,.12);

}

.number{

width:78px;

height:78px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#1D4ED8);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:28px;

font-weight:700;

box-shadow:0 15px 30px rgba(37,99,235,.25);

}

.process-item h3{

font-size:24px;

margin-bottom:18px;

}

.process-item p{

font-size:16px;

line-height:30px;

color:var(--gray);

}

/*=========================================
PRICING
=========================================*/

.pricing{

background:#F8FAFC;

}

.pricing-grid{

display:grid;

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

gap:35px;

align-items:center;

}

.price-card{

position:relative;

padding:50px 40px;

background:#fff;

border-radius:28px;

text-align:center;

border:1px solid #EEF2F7;

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

transition:.35s;

overflow:hidden;

}

.price-card:hover{

transform:translateY(-10px);

}

.price-card.active{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

color:#fff;

transform:scale(1.06);

box-shadow:0 35px 70px rgba(37,99,235,.25);

}

.recommended{

position:absolute;

top:18px;

right:18px;

padding:8px 16px;

border-radius:50px;

background:#EF4444;

color:#fff;

font-size:12px;

font-weight:700;

letter-spacing:.5px;

}

.price-card h3{

font-size:28px;

margin-bottom:20px;

}

.price{

font-size:54px;

font-weight:800;

margin-bottom:30px;

}

.price span{

font-size:22px;

}

.price-card ul{

margin:35px 0;

}

.price-card ul li{

padding:14px 0;

font-size:16px;

color:var(--gray);

border-bottom:1px solid #F1F5F9;

}

.price-card.active ul li{

color:#fff;

border-color:rgba(255,255,255,.15);

}

.price-card i{

color:#22C55E;

margin-right:10px;

}

.price-card.active i{

color:#fff;

}

.price-card .btn-primary,

.price-card .btn-secondary{

width:100%;

justify-content:center;

}

.price-card.active .btn-primary{

background:#fff;

color:#2563EB;

box-shadow:none;

}

/*=========================================
TESTIMONIAL
=========================================*/

.testimonial{

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:24px;

border:1px solid #EEF2F7;

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

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(37,99,235,.12);

}

.stars{

display:flex;

gap:5px;

margin-bottom:20px;

color:#FBBF24;

}

.testimonial-card p{

font-size:16px;

line-height:30px;

color:var(--gray);

margin-bottom:30px;

}

.client{

display:flex;

align-items:center;

gap:15px;

}

.client img{

width:65px;

height:65px;

border-radius:50%;

object-fit:cover;

}

.client h4{

font-size:18px;

margin-bottom:4px;

}

.client span{

font-size:14px;

color:var(--gray);

}

/*=========================================
FAQ
=========================================*/

.faq{

background:#F8FAFC;

}

.faq-container{

max-width:900px;

margin:auto;

}

.faq-item{

background:#fff;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

border:1px solid #EEF2F7;

box-shadow:0 10px 25px rgba(15,23,42,.04);

}

.faq-question{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px;

cursor:pointer;

}

.faq-question h3{

font-size:20px;

font-weight:600;

}

.faq-question i{

font-size:20px;

color:var(--primary);

transition:.3s;

}

.faq-item.active i{

transform:rotate(45deg);

}

.faq-answer{

display:none;

padding:0 25px 25px;

font-size:16px;

line-height:30px;

color:var(--gray);

}

.faq-item.active .faq-answer{

display:block;

}

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

.cta{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

color:#fff;

text-align:center;

padding:110px 0;

position:relative;

overflow:hidden;

}

.cta::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

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

top:-180px;

right:-120px;

}

.cta h2{

font-size:50px;

font-weight:800;

margin-bottom:20px;

}

.cta p{

font-size:18px;

line-height:34px;

opacity:.9;

max-width:700px;

margin:0 auto 40px;

}

.cta .btn-primary{

background:#fff;

color:var(--primary);

box-shadow:none;

}

/*=========================================
FOOTER
=========================================*/

.footer{

background:#0F172A;

color:#fff;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1.2fr;

gap:50px;

margin-bottom:60px;

}

.footer-logo{

width:180px;

margin-bottom:25px;

}

.footer h3{

font-size:22px;

margin-bottom:25px;

}

.footer p{

line-height:30px;

opacity:.8;

}

.footer ul li{

margin-bottom:15px;

}

.footer ul li a{

color:#fff;

opacity:.75;

transition:.3s;

}

.footer ul li a:hover{

opacity:1;

padding-left:6px;

color:#60A5FA;

}

.footer hr{

border:none;

height:1px;

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

margin:40px 0;

}

.copyright{

text-align:center;

font-size:15px;

opacity:.65;

}

/*=========================================
FLOATING WHATSAPP
=========================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#25D366;

color:#fff;

font-size:30px;

box-shadow:0 20px 40px rgba(0,0,0,.18);

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:translateY(-6px) scale(1.08);

}

/*=========================================
BACK TO TOP
=========================================*/

#topBtn{

position:fixed;

left:25px;

bottom:25px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:#2563EB;

color:#fff;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 15px 35px rgba(37,99,235,.25);

transition:.3s;

}

#topBtn:hover{

transform:translateY(-5px);

}

/*=========================================
DIVIDER
=========================================*/

.divider{

width:100%;

height:1px;

margin-top:100px;

background:linear-gradient(
90deg,
transparent,
#E2E8F0,
transparent);

}

/*=========================================
UTILITY
=========================================*/

.text-center{

text-align:center;

}

.mb-30{

margin-bottom:30px;

}

.mb-50{

margin-bottom:50px;

}

.mt-50{

margin-top:50px;

}

.rounded{

border-radius:24px;

}

.shadow{

box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.bg-light{

background:#F8FAFC;

}