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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
    background:#f8f9fa;
    color:#333;
    line-height:1.6;
}

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

.navbar{

background:#0d6efd;
transition:.4s;
padding:12px 0;

}

.navbar-brand{

font-size:1.5rem;
font-weight:700;
color:#fff!important;

}

.navbar-nav{

gap:8px;

}

.nav-link{

color:#fff!important;
font-weight:600;
padding:8px 16px!important;
border-radius:30px;
transition:.3s;
display:inline-block;

}

.nav-link:hover{

background:#ffc107;
color:#000!important;

}

.nav-link.active{

background:#ffc107;
color:#000!important;

}

.navbar-toggler{

background:#ffc107;
border:none;
padding:8px 10px;
border-radius:8px;

}

.navbar-toggler:hover{

background:#ffca2c;

}

.navbar-toggler-icon{

filter:brightness(0);

}

.navbar-toggler:focus{

box-shadow:none;

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

.hero{

background:
linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
url("../images/Events/background.png");

background-size:cover;
background-position:center center;
background-repeat:no-repeat;

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
color:#fff;

position:relative;

}

.overlay{

width:100%;
padding:120px 20px;

}

.hero h1{

font-size:64px;
font-weight:700;
margin-bottom:20px;
text-shadow:2px 2px 12px rgba(0,0,0,.8);

animation:fadeDown 1s;

}

.hero p{

max-width:750px;
margin:auto;

font-size:22px;
line-height:1.8;

text-shadow:1px 1px 10px rgba(0,0,0,.8);

animation:fadeUp 1.2s;

}

.hero .btn{

padding:15px 40px;
font-size:18px;
font-weight:600;

border-radius:50px;

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

animation:fadeUp 1.5s;

}

@media(max-width:768px){

.hero{

min-height:80vh;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:18px;

}

}

@media(max-width:576px){

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

}

/* ===========================
   SECTION TITLES
=========================== */

section h2{

    font-weight:bold;

    color:#0d6efd;

}

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

section img{

    border-radius:12px;

}

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

.card{

    border:none;

    border-radius:15px;

    overflow:hidden;

    transition:.4s;

}

.card:hover{

    transform:translateY(-8px);

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

}

.card-body{

    padding:30px;

}

.card h4{

    color:#0d6efd;

    margin-bottom:15px;

}

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

#coursesContainer .card{

    height:100%;

}

/* ===========================
   NEWS
=========================== */

#newsContainer .card{

    height:100%;

}

/* ===========================
   EVENTS
=========================== */

#eventsContainer .card{

    height:100%;

}

/* ===========================
   STATS
=========================== */

.bg-primary h2{

    font-size:45px;

    font-weight:bold;

}

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

footer{

    margin-top:40px;

}

footer h4{

    font-weight:bold;

}

footer p{

    margin-bottom:8px;

}

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

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-3px);

}

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

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}



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

@media(max-width:992px){

.hero{

min-height:85vh;

}

.hero h1{

font-size:50px;

}

.hero p{

font-size:20px;

max-width:650px;

}

.navbar-brand{

font-size:1.3rem;

}

}

@media(max-width:768px){

.hero{

min-height:75vh;

background-position:center;

}

.overlay{

padding:80px 20px;

}

.hero h1{

font-size:38px;

line-height:1.3;

}

.hero p{

font-size:17px;

line-height:1.7;

}

.hero .btn{

padding:12px 30px;

font-size:16px;

}

section{

padding-top:60px!important;

padding-bottom:60px!important;

}

}

@media(max-width:576px){

.hero{

min-height:70vh;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:15px;

max-width:100%;

}

.hero .btn{

padding:10px 25px;

font-size:15px;

}

.navbar-brand{

font-size:18px;

}

}

/* ===========================
   SPONSORS & EXAMINING BODIES
=========================== */

.sponsor-logo{
width:120px;
height:120px;
object-fit:contain;
background:#fff;
padding:15px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,.1);
transition:.3s;
}

.sponsor-logo:hover{
transform:scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.sponsor-logo+p{
margin-top:10px;
font-weight:600;
font-size:15px;
}

@media(max-width:768px){

.sponsor-logo{
width:90px;
height:90px;
padding:10px;
}

}