/*=========================================================
 SUBWAY ENERGY ACADEMY
 Official Stylesheet
 Version 2.0
 Developed by Raisevia Energy & Digital Solution Ltd.
=========================================================*/

/*=========================================================
 GOOGLE FONTS
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap');

/*=========================================================
 ROOT VARIABLES
=========================================================*/

:root{

--primary:#0F172A;
--primary-light:#1E293B;

--secondary:#C68A00;
--secondary-light:#FBBF24;

--accent:#10B981;

--white:#ffffff;
--light:#F8FAFC;
--gray:#E2E8F0;
--text:#475569;

--danger:#ef4444;

--radius:18px;

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

--transition:.35s ease;

}

/*=========================================================
 RESET
=========================================================*/

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:#fff;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

button{

font-family:inherit;

cursor:pointer;

}

/*=========================================================
 CONTAINER
=========================================================*/

.container{

width:min(1200px,92%);

margin:auto;

}

/*=========================================================
 TYPOGRAPHY
=========================================================*/

h1,h2,h3,h4{

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

font-weight:700;

line-height:1.2;

color:var(--primary);

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

background:#FFF7DA;

color:var(--secondary);

border-radius:40px;

font-weight:600;

margin-bottom:18px;

}

.section-title h2{

font-size:2.6rem;

margin-bottom:18px;

}

.section-title p{

max-width:760px;

margin:auto;

}

/*=========================================================
 BUTTONS
=========================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

}

.btn-primary{

background:var(--secondary);

color:#fff;

}

.btn-primary:hover{

transform:translateY(-4px);

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

}

.btn-outline{

border:2px solid #fff;

color:#fff;

}

.btn-outline:hover{

background:#fff;

color:var(--primary);

}

.btn-secondary{

background:#10B981;

color:#fff;

}

.btn-secondary:hover{

transform:translateY(-4px);

}

/*=========================================================
 HEADER
=========================================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(15,23,42,.92);

backdrop-filter:blur(10px);

}

.navbar{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:60px;

}

.nav-menu{

display:flex;

align-items:center;

gap:30px;

}

.nav-menu a{

color:#fff;

font-weight:500;

transition:.3s;

}

.nav-menu a:hover{

color:var(--secondary-light);

}

.nav-buttons{

display:flex;

gap:12px;

align-items:center;

}

.mobile-menu{

display:none;

font-size:28px;

color:#fff;

cursor:pointer;

}

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

.hero{

padding:150px 0 100px;

background:#F8FBFF;

}

.hero-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

background:#FFF7DA;

color:var(--secondary);

border-radius:40px;

font-weight:600;

margin-bottom:25px;

}

.hero-content h1{

font-size:3.3rem;

margin-bottom:25px;

}

.hero-content h1 span{

color:#0056d2;

}

.hero-content p{

font-size:18px;

margin-bottom:35px;

max-width:560px;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}

.hero-stats{

display:flex;

gap:40px;

flex-wrap:wrap;

}

.hero-stats h2{

font-size:34px;

color:#0056d2;

margin-bottom:5px;

}

.hero-image img{

width:100%;

max-width:550px;

margin:auto;

}

/*=========================================================
COUNTDOWN
=========================================================*/

.countdown-section{

padding:90px 0;

background:var(--light);

text-align:center;

}

.countdown-section h2{

margin-bottom:50px;

}

.countdown{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:30px;

}

.time-box{

width:140px;

height:140px;

background:#fff;

border-radius:var(--radius);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

box-shadow:var(--shadow);

transition:.3s;

}

.time-box:hover{

transform:translateY(-8px);

}

.time-box span{

font-size:3rem;

font-weight:700;

color:var(--secondary);

}

.time-box small{

margin-top:8px;

font-weight:600;

color:var(--text);

}

/*=========================================================
STATISTICS
=========================================================*/

.statistics{

padding:100px 0;

background:#fff;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#fff;

padding:40px 25px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

border-top:5px solid var(--secondary);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card h2{

font-size:3rem;

color:var(--secondary);

margin-bottom:10px;

}

.stat-card p{

font-weight:600;

}

/*=========================================================
PARTNERS
=========================================================*/

.partners{

padding:90px 0;

background:var(--light);

}

.partners-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}

.partner-logo{

background:#fff;

padding:30px;

border-radius:16px;

box-shadow:var(--shadow);

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

}

.partner-logo:hover{

transform:translateY(-8px);

}

.partner-logo img{

max-height:70px;

filter:grayscale(100%);

opacity:.75;

transition:.3s;

}

.partner-logo:hover img{

filter:none;

opacity:1;

}

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

.why-us{

padding:100px 0;

background:#fff;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.why-card:hover{

transform:translateY(-10px);

}

.why-card i{

font-size:55px;

color:var(--secondary);

margin-bottom:25px;

}

.why-card h3{

margin-bottom:18px;

font-size:1.4rem;

}

.why-card p{

color:#64748B;

}

/*=========================================================
COURSES
=========================================================*/

.courses{

padding:100px 0;

background:var(--light);

}

.course-grid{

display:grid;

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

gap:35px;

}

.course-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}

.course-card:hover{

transform:translateY(-10px);

}

.course-card img{

width:100%;

height:240px;

object-fit:cover;

}

.course-content{

padding:30px;

}

.course-content h3{

margin-bottom:18px;

font-size:1.5rem;

}

.course-content p{

margin-bottom:20px;

}

.course-content ul{

display:grid;

gap:10px;

margin-bottom:25px;

}

.course-content li{

color:#475569;

}

/*=========================================================
TRAINING CALENDAR
=========================================================*/

.training-calendar{

padding:100px 0;

background:#fff;

}

.calendar-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.calendar-card{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

transition:.3s;

}

.calendar-card:hover{

transform:translateY(-10px);

}

.calendar-date{

display:inline-block;

padding:10px 20px;

background:var(--secondary);

color:#fff;

border-radius:30px;

font-weight:700;

margin-bottom:20px;

}

.calendar-card h3{

font-size:22px;

margin-bottom:20px;

}

.calendar-card p{

margin-bottom:10px;

color:#64748B;

}

.calendar-card .btn{

margin-top:20px;

width:100%;

}

/*=========================================================
TRAINERS
=========================================================*/

.trainers{

padding:100px 0;

background:var(--light);

}

.trainer-grid{

display:grid;

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

gap:35px;

}

.trainer-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

text-align:center;

}

.trainer-card:hover{

transform:translateY(-10px);

}

.trainer-card img{

width:100%;

height:420px;

object-fit:cover;

}

.trainer-card h3{

margin:25px 0 10px;

}

.trainer-card span{

display:block;

color:var(--secondary);

font-weight:600;

margin-bottom:15px;

}

.trainer-card p{

padding:0 30px 35px;

color:#64748B;

}
/*=========================================================
WEBINAR AGENDA
=========================================================*/

.agenda{

padding:100px 0;

background:#fff;

}

.timeline{

max-width:900px;

margin:auto;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:28px;

top:0;

bottom:0;

width:4px;

background:var(--secondary);

}

.timeline-item{

position:relative;

padding-left:90px;

margin-bottom:50px;

}

.timeline-item:last-child{

margin-bottom:0;

}

.timeline-item::before{

content:"";

position:absolute;

left:16px;

top:8px;

width:28px;

height:28px;

border-radius:50%;

background:var(--accent);

border:5px solid #fff;

box-shadow:0 0 0 4px var(--secondary);

}

.timeline-item span{

display:inline-block;

padding:8px 18px;

background:var(--secondary);

color:#fff;

border-radius:30px;

font-weight:600;

margin-bottom:15px;

}

.timeline-item h3{

margin-bottom:10px;

}

.timeline-item p{

color:#64748B;

}

/*=========================================================
GALLERY
=========================================================*/

.gallery{

padding:100px 0;

background:var(--light);

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-grid img{

width:100%;

height:260px;

object-fit:cover;

border-radius:18px;

transition:.35s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

/*=========================================================
TESTIMONIALS
=========================================================*/

.testimonials{

padding:100px 0;

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card img{

width:90px;

height:90px;

border-radius:50%;

margin:auto;

margin-bottom:20px;

object-fit:cover;

border:4px solid var(--secondary);

}

.stars{

color:#F59E0B;

font-size:20px;

margin:15px 0;

}

/*=========================================================
REGISTRATION
=========================================================*/

.registration{

padding:110px 0;

background:linear-gradient(135deg,#0F172A,#1E293B);

}

.registration .section-title h2,

.registration .section-title p,

.registration .section-title span{

color:#fff;

}

#registrationForm{

background:#fff;

padding:45px;

border-radius:20px;

max-width:1000px;

margin:auto;

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

}

.form-grid{

display:grid;

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

gap:22px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:8px;

font-weight:600;

color:var(--primary);

}

.form-group input,

.form-group select,

.form-group textarea{

padding:14px 16px;

border:1px solid #CBD5E1;

border-radius:12px;

font-size:16px;

font-family:inherit;

outline:none;

transition:.3s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

border-color:var(--secondary);

box-shadow:0 0 0 3px rgba(198,138,0,.15);

}

.form-group textarea{

min-height:140px;

resize:vertical;

}

.register-btn,

#submitBtn{

width:100%;

padding:18px;

border:none;

border-radius:50px;

background:var(--secondary);

color:#fff;

font-size:18px;

font-weight:700;

transition:.3s;

}

.register-btn:hover,

#submitBtn:hover{

background:#d89d00;

}

.register-btn:disabled,

#submitBtn:disabled{

opacity:.7;

cursor:not-allowed;

}

#emailError{

display:none;

margin-top:8px;

font-size:14px;

color:var(--danger);

}

.input-error{

border:1px solid var(--danger)!important;

}

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

.faq{

padding:100px 0;

background:var(--light);

}

.faq-item{

background:#fff;

margin-bottom:18px;

border-radius:15px;

overflow:hidden;

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

padding:22px 30px;

background:#fff;

border:none;

text-align:left;

font-size:17px;

font-weight:600;

}

.faq-answer{

display:none;

padding:0 30px 25px;

color:#64748B;

}

.faq-item.active .faq-answer{

display:block;

}

/*=========================================================
CONTACT
=========================================================*/

.contact{

padding:100px 0;

background:#fff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}

.contact-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-card h3{

margin-bottom:20px;

}

.contact-info{

display:flex;

align-items:center;

gap:15px;

margin-bottom:18px;

}

.contact-info i{

font-size:22px;

color:var(--secondary);

width:35px;

text-align:center;

}

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

footer{

background:#020617;

color:#CBD5E1;

padding:80px 0 0;

}

.footer-grid{

display:grid;

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

gap:50px;

padding-bottom:50px;

}

.footer-logo{

height:70px;

margin-bottom:20px;

}

.footer-about p{

margin-top:20px;

line-height:1.8;

}

footer h3{

color:#fff;

margin-bottom:20px;

}

footer a{

display:block;

margin-bottom:12px;

transition:.3s;

}

footer a:hover{

color:var(--secondary);

padding-left:5px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:50%;

background:#0F172A;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

transition:.3s;

}

.footer-social a:hover{

background:var(--secondary);

color:#fff;

transform:translateY(-5px);

}

.copyright{

border-top:1px solid rgba(255,255,255,.08);

padding:25px;

text-align:center;

font-size:14px;

margin-top:30px;

}

/*=========================================================
WHATSAPP FLOAT
=========================================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:30px;

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

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/*=========================================================
ANIMATIONS
=========================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.zoom{

transition:.35s;

}

.zoom:hover{

transform:scale(1.04);

}

/*=========================================================
GENERAL SPACING
=========================================================*/

section{

overflow:hidden;

}

iframe{

max-width:100%;

}

table{

width:100%;

border-collapse:collapse;

}

.table-container{

overflow-x:auto;

}

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

@media(max-width:992px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-content p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.stats-grid{

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

}

.course-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr 1fr;

}

.calendar-grid{

grid-template-columns:1fr 1fr;

}

.trainer-grid{

grid-template-columns:1fr;

}

.gallery-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr 1fr;

}

.partners-grid{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){

.nav-menu{

position:fixed;

top:90px;

right:-100%;

width:280px;

height:calc(100vh - 90px);

background:#0F172A;

display:flex;

flex-direction:column;

padding:40px 25px;

gap:25px;

transition:.4s;

}

.nav-menu.mobile-active{

right:0;

}

.mobile-menu{

display:block;

}

.nav-buttons{

display:none;

}

.hero{

padding:120px 0 70px;

}

.hero-content h1{

font-size:2.2rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

gap:25px;

}

.hero-stats h2{

font-size:28px;

}

.countdown{

gap:15px;

}

.time-box{

width:100px;

height:100px;

}

.time-box span{

font-size:2rem;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:2rem;

}

.stats-grid,

.course-grid,

.calendar-grid,

.trainer-grid,

.gallery-grid,

.testimonial-grid,

.footer-grid,

.contact-grid,

.why-grid,

.form-grid{

grid-template-columns:1fr;

}

.partners-grid{

grid-template-columns:1fr 1fr;

}

.timeline::before{

left:18px;

}

.timeline-item{

padding-left:60px;

}

.container{

width:94%;

}

}

/*=========================================================
SMALL PHONES
=========================================================*/

@media(max-width:480px){

.hero-content h1{

font-size:1.8rem;

}

.hero-content p{

font-size:15px;

}

.hero-tag{

font-size:13px;

}

.section-title h2{

font-size:1.6rem;

}

.btn{

padding:15px 24px;

font-size:15px;

}

.partners-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:220px;

}

.trainer-card img{

height:320px;

}

.course-card img{

height:200px;

}

.footer-social{

justify-content:center;

}

.whatsapp{

width:58px;

height:58px;

font-size:26px;

}

}

/*=========================================================
END OF FILE
=========================================================*/