/*======================================================
SECTION HEADERS
======================================================*/
.section-header{
max-width:760px;
margin:0 auto 42px;
margin-bottom:70px;
text-align:center;
min-height:135px;
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.section-header h2{
font-size:clamp(2.3rem,4vw,3.8rem);
color:var(--secondary);
margin-bottom:22px;
line-height:1.15;
text-align:center;
}
.section-header p{
min-height:32px;
margin:0 auto;
max-width:700px;
line-height:1.8;
}
.section-header--light h2{
color:#fff;
}
.section-header--light p{
color:rgba(255,255,255,.88);
}
/*======================================================
COURSES
======================================================*/
.courses{
background:var(--primary);
padding:110px 0 130px;
position:relative;
}
.courses__grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
/*======================================================
COURSE CARD
======================================================*/
.course-card{
background:#fff;
border-radius:28px;
padding:38px;
display:flex;
flex-direction:column;
box-shadow:var(--shadow-md);
transition:var(--transition);
position:relative;
text-align:center;
}
.course-card:hover{
transform:translateY(-10px);
box-shadow:var(--shadow-lg);
}
.course-card__icon{
width:74px;
height:74px;
border-radius:22px;
background:#EAF8FF;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:28px;
margin:0 auto 28px;
}
.course-card__icon svg{
width:34px;
height:34px;
stroke:var(--primary);
}
.course-card h3{
color:var(--secondary);
font-size:1.45rem;
margin-bottom:16px;
}
.course-card p{
margin-bottom:28px;
}
.course-card__list{
display:flex;
flex-direction:column;
gap:14px;
margin:32px 0;
align-items:flex-start;
}
.course-card__list li{
display:flex;
align-items:flex-start;
gap:12px;
color:var(--secondary);
font-weight:600;
}
}
.course-card__list svg{
width:18px;
height:18px;
stroke:var(--primary);
color:var(--primary);
flex-shrink:0;
margin-top:3px;
}
.course-card__button{
margin-top:auto;
display:flex;
align-items:center;
justify-content:center;
height:54px;
border-radius:14px;
background:var(--primary);
color:#fff;
font-weight:700;
transition:var(--transition);
}
.course-card__button:hover{
background:var(--primary-dark);
}
/*======================================================
FEATURED COURSE
======================================================*/
.course-card--featured{
position:relative;
border:3px solid var(--primary);
transform:translateY(-10px);
}
.course-card--featured:hover{
transform:scale(1.05);
}
.course-card__label{
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
background:#FFE082;
color:#5C4200;
border:1px solid #FFD54F;
padding:10px 28px;
border-radius:999px;
font-size:.82rem;
font-weight:700;
letter-spacing:.04em;
white-space:nowrap;
box-shadow:
0 8px 20px rgba(255,193,7,.20);
}
.course-card--featured{
transform:translateY(-22px);
box-shadow:0 30px 70px rgba(20,55,95,.20);
}
/*======================================================
FEATURES
======================================================*/
.features{
padding:120px 0;
background:#fff;
}
.features__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
/*======================================================
FEATURE CARD
======================================================*/
.feature-card{
background:#fff;
border:1px solid var(--border);
border-radius:26px;
padding:40px;
transition:var(--transition);
text-align:center;
}
.feature-card:hover{
transform:translateY(-8px);
border-color:transparent;
box-shadow:var(--shadow-md);
}
.feature-card__icon{
width:74px;
height:74px;
border-radius:22px;
background:#EAF8FF;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:28px;
margin:0 auto 30px;
}
.feature-card__icon svg{
width:34px;
height:34px;
stroke:var(--primary);
}
.feature-card h3{
color:var(--secondary);
margin-bottom:18px;
font-size:1.35rem;
}
.feature-card p{
color:var(--text);
}
/*======================================================
REVIEWS
======================================================*/
.reviews{
padding:120px 0;
background:var(--light);
}
.reviews__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
.review{
background:#fff;
border-radius:28px;
padding:40px;
box-shadow:var(--shadow-sm);
transition:var(--transition);
text-align:center;
}
.review:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-md);
}
.review__stars{
color:#FFC933;
font-size:1.35rem;
letter-spacing:4px;
margin-bottom:24px;
}
.review p{
font-style:italic;
margin-bottom:30px;
color:var(--text);
}
.review strong{
color:var(--secondary);
font-size:1rem;
}
/*======================================================
CTA
======================================================*/
.cta{
padding:120px 0;
background:
linear-gradient(
135deg,
var(--primary),
#0C88D7
);
}
.cta__box{
max-width:900px;
margin:auto;
text-align:center;
}
.cta h2{
color:#fff;
font-size:clamp(2.5rem,5vw,4rem);
margin-bottom:22px;
}
.cta p{
color:rgba(255,255,255,.9);
font-size:1.2rem;
margin-bottom:40px;
}
/*======================================================
FOOTER
======================================================*/
.footer{
background:#16375D;
color:#DCE8F4;
padding:90px 0 40px;
}
.footer__grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:60px;
margin-bottom:60px;
}
.footer__logo{
width:220px;
margin-bottom:24px;
}
.footer h4{
color:#fff;
margin-bottom:18px;
}
.footer ul{
display:flex;
flex-direction:column;
gap:12px;
}
.footer a{
transition:var(--transition);
}
.footer a:hover{
color:#fff;
}
.footer__bottom{
border-top:1px solid rgba(255,255,255,.12);
padding-top:30px;
text-align:center;
}
/*======================================================
RESPONSIVE
======================================================*/
@media (max-width:1200px){
.hero__wrapper{
grid-template-columns:1fr;
gap:60px;
}
.hero__left{
text-align:center;
}
.hero__left p{
margin-inline:auto;
}
.hero__buttons{
justify-content:center;
}
.hero__usp-list{
max-width:700px;
margin:auto;
}
.hero__photo img{
height:500px;
}
.hero__stats{
grid-template-columns:repeat(3,1fr);
}
.courses__grid{
grid-template-columns:repeat(2,1fr);
}
.features__grid{
grid-template-columns:repeat(2,1fr);
}
.reviews__grid{
grid-template-columns:repeat(2,1fr);
}
.footer__grid{
grid-template-columns:repeat(2,1fr);
}
}
/*=====================================
COMPACTE SECTION HEADERS MOBIEL
=====================================*/
@media (max-width:768px){
.hero__buttons{
gap:18px;
}
.btn-primary{
box-shadow:0 10px 22px rgba(17,155,239,.18);
}
.btn-outline{
position:relative;
z-index:2;
background:#fff;
}
.section-header{
margin:0 auto 28px;
min-height:auto;
text-align:center;
margin-bottom:70px;
}
.section-header h2{
margin-bottom:20px;
font-size:2rem;
}
.section-header p{
min-height:0;
margin:0;
max-width:720px;
margin:0 auto;
line-height:1.8;
}
.courses{
padding:70px 0;
}
.features{
padding:70px 0;
}
.reviews{
padding:70px 0;
}
.cta{
padding:70px 0;
}
.courses .section-header{
margin-bottom:24px;
}
.features .section-header{
margin-bottom:24px;
}
.reviews .section-header{
margin-bottom:24px;
}
.login-btn{
width:40px;
height:40px;
border-radius:12px;
}
.login-btn svg{
width:18px;
height:18px;
}
.header{
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
backdrop-filter:none;
box-shadow:0 2px 15px rgba(0,0,0,.08);
padding:12px 0;
}
.logo img{
width:190px;
}
.navigation{
display:none;
}
.hamburger{
display:flex;
flex-direction:column;
gap:5px;
}
.hamburger span{
width:28px;
height:2px;
background:var(--secondary);
}
.hero{
padding-top:115px;
}
.hero__wrapper{
gap:40px;
}
.hero__buttons{
flex-direction:column;
}
.btn{
width:100%;
}
.hero__usp-list{
grid-template-columns:1fr;
}
.hero__photo img{
height:340px;
}
.hero__stats{
grid-template-columns:1fr;
}
.courses__grid,
.features__grid,
.reviews__grid,
.footer__grid{
grid-template-columns:1fr;
}
.course-card--featured{
transform:none;
}
.course-card__icon{
margin-top:16px;
}
.section-header{
max-width:760px;
margin:0 auto 42px;
text-align:center;
min-height:135px;
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.footer{
text-align:center;
}
}
@media (max-width:480px){
.hero__left h1{
font-size:2.6rem;
}
.hero__left p{
font-size:1rem;
}
.section-header h2{
font-size:2rem;
}
.hero__photo{
border-radius:20px;
}
.hero__icon{
width:46px;
height:46px;
}
.hero__icon svg{
width:20px;
height:20px;
}
.hero-stat{
padding:18px;
}
.course-card,
.feature-card,
.review{
padding:28px;
}
}
/*======================================================
ANIMATIONS
======================================================*/
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:none;
}
}
.hero__left{
animation:fadeUp .8s ease;
}
.hero__right{
animation:fadeUp 1s ease;
}
/*======================================================
REVEAL
======================================================*/
.reveal{
opacity:0;
transform:translateY(40px);
transition:
opacity .7s ease,
transform .7s ease;
}
.reveal.show{
opacity:1;
transform:none;
}
/*======================================================
ACTIVE NAV
======================================================*/
.navigation a.active{
color:var(--primary);
}
.navigation a.active::after{
width:100%;
}
/*======================================================
SELECTION
======================================================*/
::selection{
background:var(--primary);
color:#fff;
}
/*======================================================
SCROLLBAR
======================================================*/
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:20px;
}
::-webkit-scrollbar-track{
background:#EDF5FB;
}
.login-btn{
width:46px;
height:46px;
padding:0;
border-radius:14px;
}
.login-btn svg{
width:20px;
height:20px;
stroke:#fff;
}
.reveal{
opacity:0;
transform:translateY(40px);
transition:.7s;
}
.reveal.reveal-active{
opacity:1;
transform:none;
}
.faq-question svg,
.module__header svg{
transition: transform .3s ease;
}
.faq-item.active .faq-question svg,
.module.active .module__header svg{
transform: rotate(180deg);
}