/* ===========================================
   USAEDU Premium Education Website
   Version 2.0
=========================================== */

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

:root{

--primary:#0B3C74;
--secondary:#D4AF37;
--accent:#1E88E5;

--white:#ffffff;
--light:#f5f8fc;
--text:#273043;
--muted:#6b7280;

--radius:20px;

--shadow:0 20px 60px rgba(0,0,0,.08);

--transition:.35s;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--light);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

}

.container{

width:min(1200px,92%);
margin:auto;

}

section{

padding:110px 0;

}

/* =======================
Loader
======================= */

#loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.5s;

}

.loader-circle{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #ddd;

border-top:6px solid var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* =======================
Navigation
======================= */

header{

transition:all .3s ease;
position:fixed;

top:0;

width:100%;

z-index:999;

}

header.scrolled{

background:rgba(44,72,105,0.95);

backdrop-filter:blur(10px);

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

}


nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

.logo{

display:flex;

align-items:center;

gap:15px;

color:var(--white);

}

header.scrolled .logo{

color:var(--primary);

}

.logo-icon{

width:58px;

height:58px;

border-radius:18px;

background:linear-gradient(135deg,var(--primary),#2b78d8);

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

color:#fff;

}

.logo-text h2{

font-size:28px;

font-weight:800;

}

.logo-text span{

font-size:13px;

letter-spacing:1px;

opacity:.8;

}

.navigation{

display:flex;

gap:40px;

}

.navigation a{

font-weight:500;

color:#fff;

}

header.scrolled .navigation a{

color:var(--text);

}

.navigation a:hover{

color:var(--secondary);

}

.nav-right{

display:flex;

align-items:center;

gap:20px;

}

.mobile-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

.btn-small{
transition:all .35s ease;
padding:13px 28px;

border-radius:50px;

background:var(--secondary);

font-weight:700;

color:#111;

}
.btn-small:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(228,174,46,.35);

}

/* =======================
Hero
======================= */

.hero{

    padding:180px 0 120px;

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:
linear-gradient(rgba(6,26,58,.82),rgba(6,26,58,.82)),
url("../assets/images/hero.jpg");

background-size:cover;

background-position:center;

color:#fff;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:80px;

align-items:center;

}

.badge{

display:inline-block;

padding:10px 18px;

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

backdrop-filter:blur(12px);

border-radius:40px;

margin-bottom:25px;

font-size:14px;

}

.hero h1{

font-size:72px;

line-height:1.05;

margin-bottom:25px;

font-weight:800;

}

.hero p{

font-size:19px;

opacity:.9;

margin-bottom:40px;

max-width:650px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:55px;

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:17px 36px;

border-radius:50px;

background:var(--secondary);

color:#111;

font-weight:700;

transition:.35s;

}

.primary-btn:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(212,175,55,.3);

}

.outline-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:17px 36px;

border:2px solid rgba(255,255,255,.5);

border-radius:50px;

color:#fff;

}

.outline-btn:hover{

background:#fff;

color:var(--primary);

}

.hero-features{

display:flex;

gap:60px;

}

.hero-features strong{

display:block;

font-size:36px;

font-weight:800;

}

.hero-card{

position:relative;

}

.hero-card img{

border-radius:28px;

box-shadow:var(--shadow);

}

.floating-card{

position:absolute;

bottom:-25px;

left:-30px;

display:flex;

gap:18px;

align-items:center;

background:#fff;

padding:20px;

border-radius:20px;

box-shadow:var(--shadow);

color:var(--text);

}

.floating-card i{

font-size:38px;

color:var(--secondary);

}

/* =======================
Section Header
======================= */

.section-header{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-tag{

display:inline-block;

color:var(--secondary);

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

}

.section-header h2{

font-size:48px;

color:var(--primary);

margin-bottom:18px;

}

.section-header p{

color:var(--muted);

font-size:18px;

}

/* =======================
Partners
======================= */

.partners{

padding:50px 0;

background:#fff;

position:relative;

z-index:5;

}

.partner-grid{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:30px;

padding:30px;

background:#ffffff;

border-radius:22px;

box-shadow:0 15px 40px rgba(13,39,80,.08);

border:1px solid rgba(13,39,80,.05);

}
.partner-grid span{

padding:14px 26px;

background:#F6F8FC;

border-radius:50px;

font-weight:600;

font-size:16px;

color:var(--primary);

transition:.35s;

cursor:default;

}

.partner-grid span:hover{

background:var(--secondary);

color:#fff;

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(228,174,46,.35);

}
.partners p{

text-align:center;

font-size:18px;

color:#555;

max-width:700px;

margin:0 auto 35px;

line-height:1.8;

font-weight:500;

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

.about-preview{

background:#fff;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.image-side img{

border-radius:30px;

box-shadow:var(--shadow);

}

.content-side h2{

font-size:50px;

color:var(--primary);

margin:15px 0 25px;

}

.content-side p{

color:var(--muted);

margin-bottom:30px;

}

.feature-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-bottom:35px;

}

.feature-list div{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}

.feature-list i{

color:var(--secondary);

}

/* =======================
SERVICES
======================= */

.services{

background:var(--light);

}

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--secondary),
var(--accent)
);

}

.service-card .icon{

width:75px;

height:75px;

border-radius:20px;

background:rgba(11,60,116,.08);

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.service-card .icon i{

font-size:32px;

color:var(--primary);

}

.service-card h3{

margin-bottom:15px;

color:var(--primary);

font-size:24px;

}

.service-card p{

color:var(--muted);

}

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

.statistics{

background:
linear-gradient(
135deg,
var(--primary),
#184f95
);

color:#fff;

}

.stats-grid{

display:grid;

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

gap:30px;

text-align:center;

}

.stat-box{

padding:30px;

}

.stat-box h2{

font-size:60px;

font-weight:800;

margin-bottom:10px;

}

.stat-box p{

opacity:.9;

font-size:18px;

}

/* =======================
PROGRAMS
======================= */

.programs{

background:#fff;

}

.program-grid{

display:grid;

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

gap:35px;

}

.program-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.program-card:hover{

transform:translateY(-12px);

}

.program-card img{

height:240px;

width:100%;

object-fit:cover;

}

.program-content{

padding:30px;

}

.program-content h3{

margin-bottom:15px;

color:var(--primary);

font-size:24px;

}

.program-content p{

color:var(--muted);

margin-bottom:25px;

}

.program-content a{

font-weight:700;

color:var(--primary);

}

.program-content a:hover{

color:var(--secondary);

}

/* =======================
SCHOLARSHIP
======================= */

.scholarship{

padding:80px 0;

background:var(--light);

}

.scholarship-box{

background:
linear-gradient(
135deg,
var(--primary),
#1d5ca8
);

padding:70px;

border-radius:30px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

color:#fff;

box-shadow:var(--shadow);

}

.scholarship-box span{

display:inline-block;

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

padding:10px 18px;

border-radius:40px;

margin-bottom:20px;

font-size:14px;

}

.scholarship-box h2{

font-size:42px;

margin-bottom:20px;

}

.scholarship-box p{

max-width:700px;

opacity:.9;

}

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

.why-us{

background:#fff;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-grid > div{

background:#fff;

padding:40px 30px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.why-grid > div:hover{

transform:translateY(-10px);

}

.why-grid i{

font-size:50px;

color:var(--secondary);

margin-bottom:20px;

}

.why-grid h3{

margin-bottom:15px;

color:var(--primary);

font-size:24px;

}

.why-grid p{

color:var(--muted);

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

.testimonials{

background:linear-gradient(180deg,#f8fbff,#ffffff);

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:28px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.quote{

width:70px;

height:70px;

border-radius:50%;

background:rgba(212,175,55,.15);

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.quote i{

font-size:28px;

color:var(--secondary);

}

.student{

display:flex;

align-items:center;

gap:18px;

margin-top:30px;

}

.avatar{

width:60px;

height:60px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

font-size:22px;

}

.student h4{

color:var(--primary);

margin-bottom:4px;

}

.student span{

color:var(--muted);

font-size:14px;

}

/* ==========================================
ADMISSIONS TIMELINE
========================================== */

.admissions{

background:#fff;

}

.timeline{

max-width:900px;

margin:auto;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:29px;

top:0;

bottom:0;

width:3px;

background:var(--secondary);

}

.timeline-item{

display:flex;

gap:30px;

margin-bottom:45px;

position:relative;

}

.number{

width:60px;

height:60px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

font-weight:700;

flex-shrink:0;

z-index:2;

}

.timeline-item h3{

color:var(--primary);

margin-bottom:10px;

}

.timeline-item p{

color:var(--muted);

}

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

.faq{

background:var(--light);

}

.faq-wrapper{

max-width:900px;

margin:auto;

}

.faq-item{

background:#fff;

padding:30px;

border-radius:20px;

margin-bottom:20px;

box-shadow:var(--shadow);

}

.faq-item h3{

margin-bottom:12px;

color:var(--primary);

}

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

.contact{

background:#fff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

margin-bottom:60px;

}

.contact-info{

background:var(--primary);

color:#fff;

padding:50px;

border-radius:30px;

box-shadow:var(--shadow);

}

.contact-info h3{

font-size:34px;

margin-bottom:25px;

}

.contact-info p{

margin-bottom:22px;

line-height:1.8;

}

.contact-form{

background:#fff;

padding:50px;

border-radius:30px;

box-shadow:var(--shadow);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:18px;

margin-bottom:20px;

border:1px solid #dde3ec;

border-radius:14px;

font-family:inherit;

font-size:16px;

outline:none;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--primary);

}

.contact-form button{

border:none;

cursor:pointer;

font-size:16px;

}

.map{

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

}

.map iframe{

width:100%;

height:450px;

border:0;

}

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

footer{
border-top:1px solid rgba(255,255,255,.08);
background:#081f3f;

color:#fff;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

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

gap:50px;

margin-bottom:50px;

}

.footer-grid h2,

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid p,

.footer-grid li{

color:#d6dce7;

margin-bottom:12px;

}

.footer-grid a{

color:#d6dce7;

}

.footer-grid a:hover{

color:var(--secondary);

}

.copyright{

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

padding-top:25px;

text-align:center;

color:#c9d2df;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1100px){

.hero-grid,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

}

.services-grid,
.program-grid,
.testimonial-grid,
.why-grid,
.footer-grid{

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

}

.hero h1{

font-size:64px;
line-height:1.1;

}

.scholarship-box{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.navigation{

gap:40px;

}

.mobile-toggle{

display:block;

color:#fff;

}

header.scrolled .mobile-toggle{

color:var(--primary);

}

.hero{

text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.hero-features{

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.services-grid,
.program-grid,
.testimonial-grid,
.why-grid,
.footer-grid,
.feature-list,
.stats-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:42px;

}

.section-header h2{

font-size:34px;

}

.content-side h2{

font-size:36px;

}

.scholarship-box{

padding:40px;

}

.scholarship-box h2{

font-size:32px;

}

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

}

section{

padding:80px 0;

}

}
/* ===========================================
JavaScript Animation Classes
=========================================== */

.navigation a.active{

color:var(--secondary);

}

.service-card,
.program-card,
.testimonial-card,
.why-grid div,
.timeline-item,
.stat-box,
.faq-item{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.animate{

opacity:1 !important;

transform:translateY(0) !important;

}

.navigation.open{

display:flex;

position:absolute;

top:100%;

left:0;

width:100%;

background:#fff;

flex-direction:column;

padding:30px;

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

}

.navigation.open a{

color:var(--primary);

}

.scrollTop{

position:fixed;

right:30px;

bottom:30px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:var(--secondary);

color:#111;

font-size:20px;

cursor:pointer;

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

opacity:0;

pointer-events:none;

transition:.3s;

z-index:999;

}

.scrollTop.show{

opacity:1;

pointer-events:auto;

}

.scrollTop:hover{

transform:translateY(-6px);

}
/* ==========================================
INNER PAGE HERO
========================================== */

.page-hero{

padding:180px 0 120px;

background:
linear-gradient(rgba(8,35,71,.85),rgba(8,35,71,.85)),
url("../assets/images/campus.jpg");

background-size:cover;

background-position:center;

text-align:center;

color:#fff;

}

.page-hero h1{

font-size:64px;

margin-bottom:20px;

font-weight:800;

}

.page-hero p{

font-size:20px;

opacity:.9;

max-width:700px;

margin:auto;

}

@media(max-width:768px){

.page-hero{

padding:150px 0 90px;

}

.page-hero h1{

font-size:42px;

}

.page-hero p{

font-size:17px;

}

}
/* ==========================================
PROGRAM DETAILS
========================================== */

.program-details{

margin:20px 0 25px;

padding:0;

list-style:none;

}

.program-details li{

padding:10px 0;

border-bottom:1px solid #eef2f7;

font-size:15px;

color:var(--muted);

}

.program-details strong{

color:var(--primary);

}/* ==========================================
ADMISSION REQUIREMENTS
========================================== */

.requirements{

background:#fff;

}

.requirements-grid{

display:grid;

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

gap:30px;

}

.requirement-card{
transition:.35s;
background:#fff;

padding:40px 30px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.requirement-card:hover{

transform:translateY(-8px);

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

}

.requirement-card i{

font-size:46px;

color:var(--secondary);

margin-bottom:20px;

}

.requirement-card h3{

margin-bottom:15px;

color:var(--primary);

}

.requirement-card p{

color:var(--muted);

}

@media(max-width:992px){

.requirements-grid{

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

}

}

@media(max-width:768px){

.requirements-grid{

grid-template-columns:1fr;

}

}
/* CONTACT PAGE */

.contact-item{

display:flex;

align-items:flex-start;

gap:20px;

margin:30px 0;

}

.contact-item i{

width:60px;

height:60px;

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

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

flex-shrink:0;

}

.contact-item h4{

margin-bottom:8px;

font-size:20px;

color:#fff;

}

.contact-item p{

margin:0;

color:#f2f2f2;

}
/* Fixed Header Scroll Fix */

header.scrolled{

background:#ffffff !important;

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

}


/* Logo after scroll */

header.scrolled .logo-text h2{

color:var(--primary);

}

header.scrolled .logo-text span{

color:#666;

}


/* Navigation after scroll */

header.scrolled .navigation a{

color:var(--primary);

}


header.scrolled .navigation a:hover,
header.scrolled .navigation a.active{

color:var(--secondary);

}


/* Apply button */

header.scrolled .primary-btn{

background:var(--secondary);

color:#111;

}
.logo-img{
    border-radius:20px; 
    height:60px;
    width:auto;
    display:block;
}
.logo{

position:relative;

display:flex;

align-items:center;

}

.logo img{

height:60px;

transition:.3s;

}

.logo-dark{

display:none;

}

header.scrolled .logo-white{

display:none;

}

header.scrolled .logo-dark{

display:block;

}