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

.page-header{

padding-top:170px;

padding-bottom:90px;

background:linear-gradient(135deg,#0F172A,#2563EB);

color:white;

}

.page-header h1{

font-weight:800;

line-height:1.2;

}

.page-header p{

font-size:20px;

line-height:1.8;

}

.breadcrumb{

margin-bottom:0;

}

.breadcrumb a{

text-decoration:none;

}

/* ===========================
   NAVIGATION
=========================== */

:root{

--primary:#0B1220;
--secondary:#102542;
--accent:#ff6b00;
--blue:#1d8fff;
--white:#ffffff;

}

body{

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

background:#07111f;

}

/* Navbar */

#navbar{

transition:.4s;

padding:18px 0;

z-index:9999;

}

#navbar.scrolled{

background:rgba(8,17,34,.85);

backdrop-filter:blur(14px);

box-shadow:0 8px 30px rgba(0,0,0,.35);

padding:10px 0;

}

.navbar-brand img{

height:58px;

transition:.3s;

}

.nav-link{

color:white;

font-weight:500;

margin-left:22px;

position:relative;

}

.nav-link:hover{

color:#ff6b00;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:#ff6b00;

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

.nav-link.active{

color:#ff6b00;

}

.demo-btn{

background:linear-gradient(135deg,#ff6b00,#ff8c29);

color:white;

padding:12px 28px;

border-radius:40px;

font-weight:600;

transition:.35s;

box-shadow:0 12px 30px rgba(255,107,0,.35);

}

.demo-btn:hover{

transform:translateY(-3px);

color:white;

box-shadow:0 18px 35px rgba(255,107,0,.5);

}

.navbar-toggler{

border:none;

color:white;

font-size:30px;

}

.navbar-toggler:focus{

box-shadow:none;

}
@media(max-width:991px){

.navbar-collapse{

background:#081122;

padding:25px;

margin-top:15px;

border-radius:18px;

}

.nav-link{

margin:12px 0;

}

.demo-btn{

display:inline-block;

margin-top:20px;

}

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

.hero-section{

padding-top:170px;

padding-bottom:120px;

position:relative;

overflow:hidden;

background:linear-gradient(135deg,#07111f,#0e2345);

color:white;

}

.hero-bg{

position:absolute;

width:800px;

height:800px;

background:#1d8fff20;

filter:blur(120px);

top:-250px;

right:-250px;

}

.hero-title{

font-size:64px;

font-weight:800;

line-height:1.15;

}

.hero-title span{

color:#ff6b00;

}

.hero-subtitle{

font-size:20px;

margin-top:30px;

line-height:1.8;

opacity:.9;

}

.hero-badge{

display:inline-block;

background:#143764;

padding:12px 24px;

border-radius:40px;

margin-bottom:25px;

}

.hero-buttons{

margin-top:40px;

}

.hero-btn{

background:#ff6b00;

color:white;

padding:15px 35px;

border-radius:50px;

font-weight:600;

margin-right:15px;

}

.hero-btn:hover{

background:#ff8124;

color:white;

}

.hero-btn-outline{

border:2px solid white;

padding:15px 35px;

border-radius:50px;

color:white;

}

.hero-btn-outline:hover{

background:white;

color:#07111f;

}

.hero-image{

text-align:center;

animation:float 5s ease-in-out infinite;

}

.hero-image img{

max-width:90%;

}

.hero-stats{

display:flex;

gap:50px;

margin-top:60px;

}

.hero-stats h2{

color:#ff6b00;

font-size:42px;

font-weight:700;

}

.hero-stats p{

margin-top:-8px;

}

.tech-grid{

display:grid;

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

gap:25px;

margin-top:-60px;

position:relative;

z-index:2;

}

.tech-card{

background:#102542;

padding:25px;

border-radius:20px;

text-align:center;

transition:.35s;

color: #ffffff;

}

.tech-card:hover{

transform:translateY(-10px);

background:#173663;

}

.tech-card img{

height:60px;

margin-bottom:15px;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}
/*=========================================
AUDIENCE SECTION
==========================================*/

.audience-section{

padding:100px 0;

background:#07111f;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:#ff6b00;

font-weight:600;

letter-spacing:2px;

}

.section-title h2{

font-size:48px;

color:white;

font-weight:700;

margin-top:15px;

}

.section-title p{

color:#b5c2d3;

font-size:18px;

margin-top:15px;

}

.audience-card{

background:#102542;

padding:45px 30px;

border-radius:20px;

text-align:center;

height:100%;

transition:.4s;

border:1px solid transparent;

}

.audience-card:hover{

transform:translateY(-12px);

border-color:#ff6b00;

box-shadow:0 20px 40px rgba(255,107,0,.15);

}

.icon-circle{

width:90px;

height:90px;

background:linear-gradient(135deg,#1d8fff,#ff6b00);

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:white;

margin-bottom:30px;

}

.audience-card h4{

color:white;

font-size:24px;

margin-bottom:20px;

}

.audience-card p{

color:#c7d2df;

line-height:1.8;

}
/*=========================================
FEATURES
==========================================*/

.features-section{

padding:100px 0;

background:#0b1728;

}

.feature-card{

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

backdrop-filter:blur(12px);

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

padding:40px 30px;

border-radius:20px;

text-align:center;

height:100%;

transition:.4s;

}

.feature-card:hover{

transform:translateY(-12px);

border-color:#ff6b00;

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

}

.feature-card i{

font-size:52px;

color:#ff6b00;

margin-bottom:25px;

display:block;

}

.feature-card h4{

color:white;

margin-bottom:18px;

font-weight:600;

}

.feature-card p{

color:#c9d4e3;

line-height:1.7;

margin:0;

}
/*=========================================
FOUNDER
==========================================*/

.founder-section{

padding:120px 0;

background:#07111f;

}

.founder-image{

position:relative;

text-align:center;

color: #ffffff;

}

.founder-image img{

border-radius:25px;

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

}

.experience-badge{

position:absolute;

bottom:25px;

right:-15px;

background:linear-gradient(135deg,#ff6b00,#ff944d);

padding:20px 25px;

border-radius:20px;

color:white;

text-align:center;

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

}

.experience-badge h2{

margin:0;

font-size:38px;

font-weight:700;

}

.section-tag{

display:inline-block;

color:#ff6b00;

font-weight:600;

letter-spacing:2px;

margin-bottom:15px;

}

.founder-title{

color:white;

font-size:46px;

font-weight:700;

}

.founder-role{

color:#1d8fff;

margin-bottom:20px;

}

.founder-desc{

color:#cbd5e1;

line-height:1.9;

font-size:18px;

}

.founder-highlights{

display:grid;

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

gap:15px;

margin:35px 0;

}

.highlight{

background:#102542;

padding:18px;

border-radius:14px;

color:white;

display:flex;

align-items:center;

gap:12px;

transition:.3s;

}

.highlight:hover{

transform:translateY(-5px);

border:1px solid #ff6b00;

}

.highlight i{

color:#ff6b00;

font-size:22px;

}

.skill-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:20px;

}

.skill-tags span{

background:#173663;

padding:10px 18px;

border-radius:30px;

color:white;

font-size:14px;

transition:.3s;

}

.skill-tags span:hover{

background:#ff6b00;

}
/*=========================================
ROADMAP
==========================================*/

.roadmap-section{

padding:120px 0;

background:#0b1728;

}

.roadmap{

max-width:900px;

margin:auto;

position:relative;

}

.roadmap::before{

content:"";

position:absolute;

left:32px;

top:0;

width:4px;

height:100%;

background:#1d8fff;

}

.roadmap-item{

display:flex;

margin-bottom:45px;

position:relative;

}

.roadmap-icon{

width:65px;

height:65px;

background:#ff6b00;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

flex-shrink:0;

z-index:2;

box-shadow:0 10px 25px rgba(255,107,0,.35);

}

.roadmap-content{

margin-left:30px;

background:#102542;

padding:30px;

border-radius:18px;

width:100%;

transition:.35s;

}

.roadmap-content:hover{

transform:translateX(10px);

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

border-left:5px solid #ff6b00;

}

.roadmap-content h4{

color:white;

margin-bottom:15px;

font-weight:600;

}

.roadmap-content p{

color:#c9d4e3;

margin:0;

line-height:1.8;

}

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

.courses-section{

padding:120px 0;

background:#07111f;

}

.course-card{

background:#102542;

border-radius:22px;

overflow:hidden;

height:100%;

transition:.4s;

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

}

.course-card:hover{

transform:translateY(-12px);

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

border-color:#ff6b00;

}

.course-header{

padding:35px;

background:linear-gradient(135deg,#173663,#0f2a4f);

}

.course-header h3{

color:white;

margin-top:20px;

font-weight:700;

}

.course-level{

background:#ff6b00;

padding:8px 16px;

border-radius:30px;

color:white;

font-size:13px;

font-weight:600;

}

.course-level.beginner{

background:#28a745;

}

.course-level.advanced{

background:#dc3545;

}

.course-body{

padding:35px;

}

.tech-stack{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:25px;

}

.tech-stack span{

background:#1d8fff20;

color:#66b8ff;

padding:8px 15px;

border-radius:30px;

font-size:14px;

}

.course-body ul{

padding-left:18px;

color:#d7e1ed;

line-height:2;

}

.course-footer{

padding:0 35px 35px;

}

.btn-course{

width:100%;

background:#ff6b00;

color:white;

padding:14px;

border-radius:50px;

font-weight:600;

}

.btn-course:hover{

background:#ff8124;

color:white;

}
/*=========================================
PROJECTS
==========================================*/

.projects-section{

padding:120px 0;

background:#0b1728;

}

.project-card{

background:#102542;

border-radius:22px;

overflow:hidden;

transition:.4s;

height:100%;

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

}

.project-card:hover{

transform:translateY(-12px);

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

border-color:#ff6b00;

}

.project-top{

height:140px;

display:flex;

align-items:center;

justify-content:center;

font-size:60px;

color:white;

}

.blue{

background:linear-gradient(135deg,#1d8fff,#2563eb);

}

.orange{

background:linear-gradient(135deg,#ff6b00,#ff9b3d);

}

.green{

background:linear-gradient(135deg,#00b894,#009970);

}

.project-body{

padding:35px;

}

.project-type{

background:#173663;

padding:8px 16px;

border-radius:30px;

font-size:13px;

color:#66b8ff;

}

.project-body h3{

color:white;

margin:20px 0;

font-weight:700;

}

.project-body p{

color:#cdd6e3;

line-height:1.8;

}

.project-body ul{

display:flex;

flex-wrap:wrap;

gap:10px;

padding:0;

margin-top:25px;

list-style:none;

}

.project-body ul li{

background:#0f2d52;

padding:8px 16px;

border-radius:30px;

color:white;

font-size:14px;

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

.testimonials-section{

padding:120px 0;

background:#07111f;

}

.testimonial-card{

background:#102542;

padding:35px;

border-radius:20px;

height:100%;

transition:.4s;

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

}

.testimonial-card:hover{

transform:translateY(-10px);

border-color:#ff6b00;

box-shadow:0 20px 45px rgba(255,107,0,.2);

}

.stars{

font-size:26px;

color:#ffc107;

margin-bottom:20px;

}

.testimonial-card p{

color:#d4dce7;

line-height:1.9;

min-height:150px;

}

.student{

display:flex;

align-items:center;

margin-top:30px;

}

.student-avatar{

width:60px;

height:60px;

border-radius:50%;

background:#ff6b00;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:22px;

font-weight:700;

margin-right:15px;

}

.student h5{

color:white;

margin:0;

}

.student small{

color:#9db3c9;

}

.success-box{

background:#102542;

padding:30px;

border-radius:18px;

margin-top:20px;

transition:.3s;

}

.success-box:hover{

transform:translateY(-8px);

}

.success-box h2{

color:#ff6b00;

font-size:42px;

font-weight:700;

}

.success-box p{

color:#d4dce7;

margin-top:10px;

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

.faq-section{

padding:120px 0;

background:#0b1728;

}

.accordion-item{

background:#102542;

border:none;

margin-bottom:15px;

border-radius:15px;

overflow:hidden;

}

.accordion-button{

background:#102542;

color:white;

font-weight:600;

padding:22px;

box-shadow:none;

}

.accordion-button:not(.collapsed){

background:#173663;

color:#ff6b00;

}

.accordion-button::after{

filter:brightness(0) invert(1);

}

.accordion-body{

background:#102542;

color:#d4dce7;

line-height:1.8;

}

.cta-box{

margin-top:70px;

background:linear-gradient(135deg,#173663,#0f2d52);

padding:60px;

border-radius:25px;

text-align:center;

}

.cta-box h2{

color:white;

font-size:42px;

font-weight:700;

}

.cta-box p{

color:#d7e1ed;

margin:20px 0 35px;

font-size:18px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

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

.footer{

background:#050d18;

padding:90px 0 30px;

}

.footer-logo{

width:220px;

margin-bottom:20px;

}

.footer-text{

color:#a9b7c7;

line-height:1.8;

margin-bottom:30px;

}

.footer h4{

color:white;

margin-bottom:25px;

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin-bottom:14px;

color:#c6d2df;

}

.footer a{

color:#c6d2df;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:#ff6b00;

}

.social-icons{

display:flex;

gap:15px;

margin-top:20px;

}

.social-icons a{

width:45px;

height:45px;

border-radius:50%;

background:#102542;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

}

.social-icons a:hover{

background:#ff6b00;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:30px;

flex-wrap:wrap;

color:#9db3c9;

}

.whatsapp-btn{

position:fixed;

bottom:30px;

right:30px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:white;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.35);

transition:.3s;

}

.whatsapp-btn:hover{

transform:scale(1.1);

color:white;

}

#topBtn{

position:fixed;

bottom:110px;

right:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#ff6b00;

color:white;

display:none;

font-size:24px;

cursor:pointer;

z-index:999;

}
/*=========================================
ABOUT HERO
==========================================*/

.about-hero{

padding:170px 0 120px;

background:linear-gradient(135deg,#07111f,#102542);

color:white;

}

.about-hero h1{

font-size:64px;

font-weight:800;

margin:20px 0;

}

.about-hero h1 span{

color:#ff6b00;

}

.about-hero p{

font-size:20px;

line-height:1.8;

color:#d5e0ec;

margin:30px 0;

}
.story-section{

padding:120px 0;

background:#07111f;

color:white;

}

.story-section h2{

font-size:46px;

margin-bottom:30px;

}
/*=========================================
FOUNDER PROFILE
==========================================*/

.founder-profile{

padding:120px 0;

background:#0b1728;

color:white;

}

.founder-photo{

border-radius:25px;

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

}

.founder-profile h3{

font-size:38px;

margin-bottom:25px;

font-weight:700;

}

.founder-profile p{

color:#d4dce7;

line-height:1.9;

}

.info-card{

background:#102542;

padding:25px;

border-radius:18px;

margin-bottom:25px;

transition:.35s;

text-align:center;

height:100%;

}

.info-card:hover{

transform:translateY(-10px);

border:1px solid #ff6b00;

}

.info-card i{

font-size:40px;

color:#ff6b00;

margin-bottom:20px;

}

.info-card h5{

color:white;

margin-bottom:10px;

}
/*=========================================
MISSION
==========================================*/

.mission-section{

padding:120px 0;

background:#07111f;

}

.mission-card{

background:#102542;

padding:40px;

text-align:center;

border-radius:20px;

transition:.4s;

height:100%;

}

.mission-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(255,107,0,.2);

}

.mission-card i{

font-size:55px;

color:#ff6b00;

margin-bottom:25px;

}

.mission-card h3{

color:white;

margin-bottom:20px;

}

.mission-card p{

color:#d6e0eb;

line-height:1.8;

}
html{

scroll-behavior:smooth;

scroll-padding-top:90px;

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

.contact-section{

padding:120px 0;

background:#07111f;

}

.contact-card{

background:#102542;

padding:40px;

border-radius:20px;

height:100%;

color: #ffffff;

}

.contact-item{

display:flex;

align-items:flex-start;

margin-bottom:30px;

}

.contact-item i{

font-size:28px;

color:#ff6b00;

margin-right:20px;

}

.contact-item h5{

color:white;

margin-bottom:5px;

}

.contact-item p{

color:#d6e0eb;

margin:0;

}

.contact-form{

background:#102542;

padding:40px;

border-radius:20px;

}

.form-control,
.form-select{

background:#173663;

border:none;

color:white;

padding:15px;

}

.form-control::placeholder{

color:#c7d3df;

}

.form-control:focus,
.form-select:focus{

background:#173663;

color:white;

box-shadow:none;

border:1px solid #ff6b00;

}

textarea{

resize:none;

}

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

.custom-navbar{

background:rgba(7,17,31,.85);

backdrop-filter:blur(15px);

transition:.4s;

padding:15px 0;

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

}

.custom-navbar.scrolled{

background:#07111f;

padding:10px 0;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}

.navbar-brand{

font-size:30px;

font-weight:700;

color:#ffffff !important;

}

.nav-link{

color:#d7e1ed !important;

margin:0 12px;

font-weight:500;

position:relative;

transition:.3s;

}

.nav-link:hover{

color:#ff6b00 !important;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#ff6b00;

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}
.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}
.hero-btn{

transition:.35s;

}

.hero-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(255,107,0,.35);

}

.hero-btn-outline:hover{

transform:translateY(-4px);

}
.feature-card,
.course-card,
.project-card,
.testimonial-card,
.audience-card{

cursor:pointer;

}

.feature-card:hover,
.course-card:hover,
.project-card:hover,
.testimonial-card:hover,
.audience-card:hover{

transform:translateY(-12px) scale(1.02);

}