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

.online-hero{

padding:200px 0 120px;

background:#070707;

}

.online-hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.online-title{

font-size:88px;

line-height:.92;

margin:25px 0 30px;

}

.online-description{

font-size:20px;

color:#bdbdbd;

line-height:1.9;

margin-bottom:40px;

}

.online-features{

display:flex;

flex-direction:column;

gap:15px;

margin-bottom:40px;

}

.online-feature{

color:#d7d7d7;

font-weight:600;

}

.online-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.online-hero-image img{

width:100%;

display:block;

border-radius:32px;

}

@media(max-width:991px){

.online-hero-grid{

    grid-template-columns:1fr;
}

.online-title{

    font-size:54px;
}

}

/* ====================================
ONLINE FOR WHO
==================================== */

.online-for-who{

padding:120px 0;

background:#090909;

}

.online-for-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.online-for-card{

background:#111111;

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

border-radius:28px;

padding:35px;

transition:.3s ease;

}

.online-for-card:hover{

transform:translateY(-8px);

border-color:rgba(212,168,95,.25);

}

.online-for-card h3{

font-size:24px;

margin-bottom:15px;

}

.online-for-card p{

color:#bdbdbd;

line-height:1.8;

}

@media(max-width:991px){

.online-for-grid{

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

}

@media(max-width:767px){

.online-for-grid{

    grid-template-columns:1fr;
}

}

/* ====================================
ONLINE BENEFITS
==================================== */

.online-benefits{

padding:120px 0;

background:#070707;

}

.online-benefits-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.online-benefit-card{

background:#111111;

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

border-radius:28px;

padding:35px;

transition:.3s ease;

}

.online-benefit-card:hover{

transform:translateY(-8px);

border-color:rgba(212,168,95,.25);

}

.online-benefit-number{

font-family:'Bebas Neue';

font-size:56px;

line-height:1;

color:var(--primary);

margin-bottom:20px;

}

.online-benefit-card h3{

font-size:26px;

margin-bottom:15px;

}

.online-benefit-card p{

color:#bdbdbd;

line-height:1.8;

}

@media(max-width:991px){

.online-benefits-grid{

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

}

@media(max-width:767px){

.online-benefits-grid{

    grid-template-columns:1fr;
}

}

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

.online-process{

padding:120px 0;

background:#090909;

}

.online-process-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.online-process-card{

background:#111111;

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

border-radius:28px;

padding:40px 30px;

text-align:center;

transition:.3s ease;

}

.online-process-card:hover{

transform:translateY(-8px);

border-color:rgba(212,168,95,.25);

}

.online-process-number{

font-family:'Bebas Neue';

font-size:72px;

line-height:1;

color:var(--primary);

margin-bottom:20px;

}

.online-process-card h3{

font-size:24px;

margin-bottom:15px;

}

.online-process-card p{

color:#bdbdbd;

line-height:1.8;

}

@media(max-width:991px){

.online-process-grid{

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

}

@media(max-width:767px){

.online-process-grid{

    grid-template-columns:1fr;
}

}

/* ====================================
ONLINE WHY
==================================== */

.online-why{

padding:120px 0;

background:#070707;

}

.online-why-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.online-why-card{

background:#111111;

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

border-radius:28px;

padding:35px;

text-align:center;

transition:.3s ease;

}

.online-why-card:hover{

transform:translateY(-8px);

border-color:rgba(212,168,95,.25);

}

.online-why-card strong{

display:block;

font-family:'Bebas Neue';

font-size:72px;

line-height:1;

color:var(--primary);

margin-bottom:15px;

}

.online-why-card h3{

margin-bottom:15px;

}

.online-why-card p{

color:#bdbdbd;

line-height:1.8;

}

@media(max-width:991px){

.online-why-grid{

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

}

@media(max-width:767px){

.online-why-grid{

    grid-template-columns:1fr;
}

}

/* ====================================
ONLINE REVIEWS
==================================== */

.online-reviews{

padding:120px 0;

background:#090909;

}

.online-reviews-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.online-review-card{

background:#111111;

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

border-radius:28px;

padding:35px;

transition:.3s ease;

}

.online-review-card:hover{

transform:translateY(-8px);

border-color:rgba(212,168,95,.25);

}

.online-stars{

color:var(--primary);

font-size:24px;

margin-bottom:20px;

}

.online-review-card p{

color:#d7d7d7;

line-height:1.9;

margin-bottom:20px;

}

.online-review-card strong{

color:#bdbdbd;

}

.online-reviews-cta{

text-align:center;

margin-top:50px;

}

@media(max-width:991px){

.online-reviews-grid{

    grid-template-columns:1fr;
}

}

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

.online-faq{

padding:120px 0;

background:#070707;

}

.online-faq-list{

max-width:900px;

margin:60px auto 0;

}

.online-faq-item{

background:#111111;

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

border-radius:24px;

padding:30px;

margin-bottom:20px;

transition:.3s ease;

}

.online-faq-item:hover{

border-color:rgba(212,168,95,.25);

}

.online-faq-item h3{

font-size:24px;

margin-bottom:15px;

}

.online-faq-item p{

color:#bdbdbd;

line-height:1.8;

margin:0;

}

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

.online-cta{

padding:120px 0 140px;

background:#090909;

}

.online-cta-box{

position:relative;

overflow:hidden;

text-align:center;

padding:90px 60px;

border-radius:36px;

background:
linear-gradient(
    135deg,
    rgba(212,168,95,.18),
    rgba(212,168,95,.05)
);

border:1px solid rgba(212,168,95,.15);

}

.online-cta-box::before{

content:'';

position:absolute;

top:-120px;
right:-120px;

width:320px;
height:320px;

border-radius:50%;

background:
radial-gradient(
    circle,
    rgba(212,168,95,.15),
    transparent 70%
);

}

.online-cta-box h2{

font-size:64px;

line-height:1.05;

margin:20px auto 25px;

max-width:850px;

}

.online-cta-box p{

max-width:750px;

margin:0 auto 40px;

color:#d0d0d0;

line-height:1.9;

font-size:18px;

}

.online-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

@media(max-width:767px){

.online-cta-box{

    padding:60px 30px;
}

.online-cta-box h2{

    font-size:42px;
}

.online-cta-buttons{

    flex-direction:column;
}

}