.elementor-7630 .elementor-element.elementor-element-5817e30{--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;--margin-top:-9px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7630 .elementor-element.elementor-element-287093b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7630 .elementor-element.elementor-element-362a5ec{--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;--margin-top:-9px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7630 .elementor-element.elementor-element-ae743e0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-b7789c8 *//* =========================
DESKTOP DEFAULT
========================= */
.hero-v3{

background:
radial-gradient(
circle at 80% 40%,
rgba(212,160,23,.08),
transparent 40%
),

linear-gradient(
135deg,
#0A4E2A,
#0F6B3A
);

padding:90px 40px 60px;
}

.hero-content{

max-width:1200px;
margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

transform:none;
}

.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

border:1px solid #D4A017;

background:rgba(212,160,23,.15);

color:#F4C542;

font-size:13px;
font-weight:600;

letter-spacing:1px;

}

.hero-left h1{

font-size:clamp(52px,4vw,64px);

line-height:1.02;

margin:25px 0 3px;

color:#fff;

font-weight:700;

letter-spacing:-2px;

}

.hero-left h1 span{

color:#D4A017;

}

.hero-left p{

font-size:20px;

line-height:1.8;

color:rgba(255,255,255,.85);

max-width:600px;

}

.hero-benefits{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin:40px 0;

color:#fff;

font-size:17px;

}

.hero-buttons{

display:flex;
gap:15px;

}

.hero-buttons a{

text-decoration:none;

}

.hero-buttons a:first-child{

background:#D4A017;

color:#fff;

padding:18px 34px;

border-radius:14px;

font-weight:600;

}

.hero-buttons a:last-child{

border:1px solid #fff;

color:#fff;

padding:18px 34px;

border-radius:14px;

font-weight:600;

}

.hero-right{

flex:1;

position:relative;

height:720px;

display:flex;

justify-content:flex-end;

align-items:flex-end;

}

.hero-right::before{

content:"";

position:absolute;

width:500px;
height:680px;

background:
radial-gradient(
circle,
rgba(212,160,23,.10),
transparent 70%
);

right:40px;

top:50%;

transform:translateY(-50%);

z-index:0;

}

.mentor-photo{

position:absolute;

bottom:-60px;

right:-100px;

width:720px;

max-width:none;

height:auto;

z-index:2;

filter:drop-shadow(
0 30px 50px rgba(0,0,0,.18)
);

}

.gold-ring{

position:absolute;

width:560px;
height:560px;

right:-40px;

top:58%;

transform:translateY(-50%);

border-radius:50%;

border:3px solid rgba(212,160,23,.35);

box-shadow:
0 0 40px rgba(212,160,23,.15);

z-index:1;

}

.gold-ring::after{

content:"";

position:absolute;

inset:25px;

border-radius:50%;

border:1px solid rgba(212,160,23,.18);

}

.experience-card{

position:absolute;

left:70px;

bottom:150px;

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

backdrop-filter:blur(14px);

padding:24px 30px;

border-radius:24px;

box-shadow:
0 20px 50px rgba(0,0,0,.12);

z-index:3;

}

.experience-card h3{

margin:0;

font-size:30px;

color:#0F6B3A;

}

.experience-card p{

margin:5px 0 0;

color:#666;

}

/* =========================
TRUST BAR
========================= */

.trust-bar{

position:relative;
margin-top:-40px;
z-index:20;

}

.trust-wrap{

background:#fff;

border-radius:32px;

padding:30px 45px;

display:flex;
align-items:center;

gap:50px;

box-shadow:
0 15px 50px rgba(0,0,0,.08);

}

.trust-text{

width:340px;
flex-shrink:0;

}

.trust-text h3{

margin:0;

font-size:22px;
line-height:1.6;

font-weight:700;

color:#222;

}

.trust-text span{

color:#0F6B3A;

}

.trust-divider{

width:1px;
height:90px;

background:#E5E7EB;

}

.trust-logos{

flex:1;

display:flex;

align-items:center;

justify-content:center;

gap:55px;

flex-wrap:wrap;

}

.trust-logos img{

height:55px;

width:auto;

max-width:none;

object-fit:contain;

display:block;

transition:.3s;

}

.trust-logos img:hover{

opacity:1;

transform:translateY(-4px);

}

/* ========================================
PROBLEMS V2
======================================== */

.problems{

padding:100px 20px;

background:linear-gradient(
180deg,
#ffffff 0%,
#f8f8f6 100%
);

}

.section-title{

max-width:800px;

margin:0 auto 70px;

text-align:center;

}

.section-label{

display:flex;
align-items:center;
justify-content:center;

gap:14px;

font-size:13px;
font-weight:700;
letter-spacing:1.5px;

color:#D4A017;

text-transform:uppercase;

margin-bottom:18px;

}

.section-label:before,
.section-label:after{

content:"";

width:60px;
height:2px;

background:#D4A017;

}

.section-title h2{

font-size:48px;
line-height:1.25;
font-weight:800;

color:#1F2937;

margin-bottom:18px;

}

.section-title p{

font-size:18px;
line-height:1.8;

color:#6B7280;

max-width:700px;

margin:auto;

}

.problems-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:28px;

}

.problem-card{

background:#fff;

border:1px solid #ECECEC;

border-radius:28px;

padding:28px;

min-height:240px;

transition:.35s;

}

.problem-card:hover{

transform:translateY(-8px);

border-color:#D4A017;

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

}

.problem-number{

font-size:72px;

font-weight:800;

line-height:1;

color:#D4A017;

opacity:.30;

margin-bottom:10px;

}

.problem-card h3{

font-size:28px;

line-height:1.3;

font-weight:700;

color:#1F2937;

margin-bottom:14px;

}

.problem-card p{

font-size:16px;

line-height:1.8;

color:#6B7280;

margin-bottom:25px;

}

/* =========================
LAPTOP
1366, 1440, notebook
========================= */

@media (max-width:1400px){

.hero-v3{
padding:80px 40px;
}

.hero-right{
height:500px;
}

.mentor-photo{
width:540px;
right:-50px;
bottom:-125px;
}

.gold-ring{

width:350px;
height:350px;

right:20px;

top:68%;

}

.hero-left h1{
font-size:54px;
}

.hero-left p{
font-size:18px;
}

}

@media (max-width:1400px) and (max-height:800px){

.hero-v3{
padding:40px 40px 10px;
}

.hero-content{
gap:30px;
}

.hero-left h1{
font-size:46px;
margin:15px 0;
}

.hero-left p{
font-size:16px;
line-height:1.5;
margin-bottom:15px;
}

.hero-benefits{
margin:15px 0;
gap:8px;
font-size:15px;
}

.hero-buttons a{
padding:14px 26px;
}

.hero-right{
height:450px;
}

.mentor-photo{
width:440px;
bottom:-120px;
right:-20px;
}

}

.gold-ring{

width:480px;
height:480px;

right:40px;

top:58%;

border:3px solid rgba(212,160,23,.28);

}

/* =========================
TABLET
========================= */

@media (min-width:768px) and (max-width:1024px){

.hero-v3{
padding:60px 30px;
}

.hero-content{
grid-template-columns:1fr;
gap:40px;
}

.hero-left{
text-align:center;
}

.hero-left h1{
font-size:56px;
}

.hero-left p{
max-width:100%;
}

.hero-benefits{
grid-template-columns:1fr 1fr;
}

.hero-buttons{
justify-content:center;
}

.hero-right{
height:320px;
}

.mentor-photo{

width:320px;
right:50%;
transform:translateX(50%);
bottom:-60px;

}

.gold-ring{
width:360px;
height:360px;
right:60%;
transform:translate(50%,-50%);
top:60%;
}

.experience-card{
left:30%;
transform:translateX(-50%);
bottom:40px;
}

}

@media (min-width:1025px) and (max-height:800px){

.hero-v3{
padding:60px 40px 30px;
}

.hero-content{
gap:50px;
}

.hero-right{
height:520px;
}

.mentor-photo{
width:460px;
bottom:-30px;
right:-10px;
}

.hero-left h1{
font-size:52px;
}

.hero-left p{
font-size:17px;
line-height:1.6;
}

.hero-benefits{
margin:25px 0;
}

}

/* =========================
TRUST BAR
========================= */

@media (max-width:991px){

.trust-bar{
margin-top:0;
padding-top:25px;
}

.trust-wrap{

flex-direction:column;

text-align:center;

padding:35px;

gap:25px;

}

.trust-divider{

width:100%;
height:1px;

}

.trust-text{

width:100%;

}

.trust-logos{

display:grid;

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

gap:15px;

width:100%;

}

}

.trust-logos img{
height:40px;
}

/* ========================================
PROBLEMS V2
======================================== */
@media (min-width:768px) and (max-width:1024px){

.problems-grid{

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

}

.section-title h2{

font-size:38px;

}

.problem-card h3{

font-size:24px;

}

.problem-number{

font-size:64px;

}

}

/* =========================
MOBILE
========================= */
@media (max-width:767px){

.hero-content{
grid-template-columns:1fr;
gap:12px;
}

.hero-left h1{
font-size:38px;
line-height:1.08;
padding-top: 16px;
padding-bottom: 10px;
}

.hero-benefits{
grid-template-columns:1fr;
gap:10px;
margin:26px 0;
}

.hero-right{
height:265px;
position:relative;
display:flex;
justify-content:center;
align-items:flex-end;
overflow:visible;
}

.btn-daftar{
width:52%;
}

.btn-konsultasi{
width:48%;
}

.hero-buttons a{
padding:12px 4px !important;
font-size:16px;
}

.mentor-photo{
width:200px;
right:50%;
transform:translateX(50%);
bottom:-10px;
}

.gold-ring{
width:200px;
height:200px;
right:58%;
transform:translate(50%,-50%);
top:60%;
}

.experience-card{
left:22%;
transform:translateX(-50%);
bottom:35px;
padding:12px 16px;
}

.experience-card h3{
font-size:20px;
}

.experience-card p{
font-size:12px;
}

}


@media (max-width:767px){

.hero-buttons .btn-daftar{
display:flex;
align-items:center;
justify-content:center;
}

.hero-buttons .btn-konsultasi{
display:flex;
align-items:center;
justify-content:center;
}

}

@media (max-width:767px){

.hero-badge{
margin-top:25px;
margin-bottom:15px;
}

}

/* =========================
TRUST BAR
========================= */

@media (max-width:767px){

.trust-wrap{

padding:25px 20px;

border-radius:24px;

}

.trust-text h3{

font-size:18px;

line-height:1.6;

}

.trust-logos{

display:grid;

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

gap:18px;

width:100%;

}

.trust-logos img{

height:36px;

width:auto;

margin:auto;

}

}

/* ========================================
PROBLEMS V2
======================================== */
@media (max-width:767px){

.problems{

padding:70px 20px;

}

.section-title{

margin-bottom:45px;

}

.section-label{

font-size:12px;

gap:10px;

}

.section-label:before,
.section-label:after{

width:35px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:15px;

}

.problems-grid{

grid-template-columns:1fr;

gap:20px;

}

.problem-card{

padding:28px;

}

.problem-number{

font-size:56px;

}

.problem-card h3{

font-size:22px;

}

.problem-card p{

font-size:15px;

}

}/* End custom CSS */