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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f7fb;
color:#222;
line-height:1.7;
}

.container{
width:94%;
max-width:1400px;
margin:auto;
}

/*=================================
TOP BAR
==================================*/

.topbar{

background:#0b2343;

color:white;

padding:10px 0;

font-size:15px;

}

.topbar .container{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}

.topbar a{

color:white;

text-decoration:none;

margin-left:15px;

}

.topbar a:hover{

color:#FFD54A;

}


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

.header{

background:white;

padding:25px 0;

}

.header .container{

display:flex;

align-items:center;

gap:25px;

}

.logo{

width:70px;

height:auto;

}

.header h1{

font-size:40px;

color:#143a6d;

margin-bottom:5px;

}

.header p{

font-size:20px;

color:#d59a00;

font-style:italic;

}


/*=================================
MENU
==================================*/

.menu{

background:white;

border-top:1px solid #ddd;

border-bottom:1px solid #ddd;

box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.menu .container{

display:flex;

justify-content:center;

flex-wrap:wrap;

}

.menu a{

display:block;

padding:18px 22px;

text-decoration:none;

font-weight:bold;

color:#143a6d;

transition:.3s;

}

.menu a:hover{

background:#143a6d;

color:white;

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

.hero{

background:linear-gradient(135deg,#0b2b56,#274b86);

color:white;

text-align:center;

padding:25px 20px;

}

.hero h1{

font-size:48px;
margin-bottom:10px;
line-height:1.2;
}

.hero h3{

font-size:28px;

font-weight:400;

margin-bottom:10px;

}

.tagline{

font-size:34px;

font-style:italic;

color:#FFD54A;

margin-bottom:15px;

}

.hero-text{

font-size:24px;

margin-bottom:15px;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

}

.btn-primary{

background:#FFD54A;

color:#0b2b56;

padding:14px 28px;

border-radius:6px;

font-weight:bold;

text-decoration:none;

display:inline-block;

}

.btn-secondary{

background:white;

color:#0b2b56;

padding:14px 28px;

border-radius:6px;

font-weight:bold;

text-decoration:none;

display:inline-block;

}

.btn-primary:hover,
.btn-secondary:hover{

opacity:.9;

}

/*==============================
SECTIONS
==============================*/

.section{

padding:40px 0;

}

.grey{

background:#eef3f8;

}

.section h2{

text-align:center;

font-size:40px;

margin-bottom:20px;

color:#143a6d;

}

.section p{

font-size:18px;

}

/*==============================
CARDS
==============================*/

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

margin-top:40px;

}

.card{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 3px 12px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{

transform:translateY(-6px);

}

.card h3{

margin-bottom:15px;

color:#143a6d;

}

/*==============================
MENTOR
==============================*/

.mentor{

display:flex;

gap:50px;

align-items:center;

flex-wrap:wrap;

}

.mentor img{

width:220px;

border-radius:50%;

}

/*==============================
CTA
==============================*/

.cta{

background:#143a6d;

color:white;

text-align:center;

padding:70px 20px;

}

.cta h2{

font-size:42px;

margin-bottom:20px;

}

.cta p{

font-size:22px;

margin-bottom:35px;

}
/*=================================
ENQUIRY FORM
==================================*/

.enquiry-box{

background:#ffffff;

max-width:850px;

margin:40px auto;

padding:40px;

border-radius:12px;

box-shadow:0 5px 20px rgba(0,0,0,0.10);

}

.enquiry-box h2{

text-align:center;

color:#143a6d;

margin-bottom:30px;

}

.enquiry-box input,
.enquiry-box textarea{

width:100%;

padding:14px;

margin-bottom:18px;

font-size:16px;

font-family:Arial,Helvetica,sans-serif;

border:1px solid #cccccc;

border-radius:6px;

}

.enquiry-box textarea{

resize:vertical;

min-height:150px;

}

.enquiry-box button{

background:#143a6d;

color:white;

padding:14px 35px;

font-size:18px;

border:none;

border-radius:6px;

cursor:pointer;

transition:0.3s;

}

.enquiry-box button:hover{

background:#0b2343;

}

.form-note{

text-align:center;

font-size:14px;

color:#666666;

margin-top:15px;

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

footer{

background:#0b2343;

color:white;

padding:60px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:40px;

}

footer h3{

margin-bottom:15px;

color:#FFD54A;

}

footer a{

color:white;

text-decoration:none;

display:block;

margin-bottom:8px;

}

footer a:hover{

color:#FFD54A;

}

footer hr{

margin:30px 0 15px;

border:none;

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

}

.copyright{

text-align:center;

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

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero h3{

font-size:22px;

}

.tagline{

font-size:26px;

}

.hero-text{

font-size:20px;

}

.section h2{

font-size:30px;

}

.mentor{

text-align:center;

justify-content:center;

}

}