/* ====================================
   GLOBAL
==================================== */

body{
font-family:'Segoe UI',sans-serif;
background:#f8fafc;
color:#222;
overflow-x:hidden;
}

a{
text-decoration:none;
}

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

.exam-navbar{
background:#ffffff !important;
box-shadow:0 2px 15px rgba(0,0,0,.08);
padding:10px 0;
z-index:9999;
}

.exam-navbar .nav-link{
color:#222 !important;
font-weight:600;
margin-left:15px;
transition:.3s;
}

.exam-navbar .nav-link:hover{
color:#f59e0b !important;
}

.navbar-brand img{
max-height:70px;
}

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

.exam-hero{
background:linear-gradient(
135deg,
#f8fafc,
#eef2f7
);
padding:50px 0 30px;
}

.exam-hero h1{
font-size:48px;
font-weight:800;
color:#111827;
}

.exam-hero p{
font-size:18px;
}

.hero-image{
max-height:320px;
width:auto;
animation:float 4s ease-in-out infinite;
}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0);
}

}


/* ====================================
   PRIZES SECTION BACKGROUND
==================================== */


.prizes-section{
    background: linear-gradient(135deg,#1e3c72,#2a5298);
}

/* CARD STYLE */
.prize-card{
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(10px);
    transition: 0.3s ease;
    height: 100%;
}

/* HOVER EFFECT */
.prize-card:hover{
    transform: translateY(-8px);
    background: rgba(255,255,255,0.18);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* ICON STYLE */
.prize-card .icon{
    font-size: 40px;
    margin-bottom: 10px;
}



/* ====================================
   NOTICE BAR
==================================== */

.notice-bar{
background:#dc2626;
color:#fff;
padding:12px;
font-weight:600;
font-size:15px;
}

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

section{
padding:70px 0;
}

.section-title{
text-align:center;
margin-bottom:50px;
}

.section-title h2{
font-weight:800;
}

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

.exam-card{

border-radius:25px;
padding:30px;
position:relative;
overflow:hidden;
height:100%;
transition:.4s;
box-shadow:0 10px 25px rgba(0,0,0,.10);

}

.exam-card:hover{

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

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

}

.exam-card::before{

content:'';

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

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

transform:skewX(-25deg);

transition:.7s;

}

.exam-card:hover::before{

left:130%;

}

/* GROUP A */

.group-a{
background:linear-gradient(135deg,#2563eb,#60a5fa);
color:#fff;
}

/* GROUP B */

.group-b{
background:linear-gradient(135deg,#059669,#34d399);
color:#fff;
}

/* GROUP C */

.group-c{
background:linear-gradient(135deg,#ea580c,#fb923c);
color:#fff;
}

/* GROUP D */

.group-d{
background:linear-gradient(135deg,#7e22ce,#c084fc);
color:#fff;
}

/* BADGE */

.group-badge{

position:absolute;

top:15px;
right:15px;

background:#fff;

padding:6px 15px;

border-radius:30px;

font-weight:700;

font-size:13px;

}

.group-a .group-badge{
color:#2563eb;
}

.group-b .group-badge{
color:#059669;
}

.group-c .group-badge{
color:#ea580c;
}

.group-d .group-badge{
color:#7e22ce;
}

/* CARD CONTENT */

.exam-card h3{

font-weight:800;

margin-top:20px;

}

.exam-price{

font-size:52px;

font-weight:800;

margin:20px 0;

color:#fff;

}

.exam-info{

display:flex;

justify-content:space-around;

margin:20px 0;

}

.exam-info strong{

display:block;

font-size:22px;

color:#fff;

}

.exam-info span{

font-size:13px;

color:#fff;

}

/* BUTTONS */

.exam-card .btn{

padding:12px;

border-radius:12px;

font-weight:700;

}

.exam-card .btn-dark{

background:#fff;

color:#111827;

border:none;

}

.exam-card .btn-dark:hover{

background:#f3f4f6;

color:#000;

}

.exam-card .btn-outline-dark{

border:2px solid #fff;

color:#fff;

}

.exam-card .btn-outline-dark:hover{

background:#fff;

color:#111827;

}

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

.portal-card{

display:block;

background:#fff;

padding:30px;

text-align:center;

border-radius:20px;

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

transition:.3s;

color:#222;

height:100%;

}

.portal-card:hover{

transform:translateY(-8px);

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

}

.portal-card i{

font-size:42px;

margin-bottom:15px;

color:#f59e0b;

}

/* ====================================
   DATE BOX
==================================== */

.date-box{

background:#fff;

padding:25px;

border-radius:20px;

text-align:center;

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

height:100%;

transition:.3s;

}

.date-box:hover{

transform:translateY(-6px);

}

.date-box i{

color:#f59e0b;

}

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

.accordion-button{

font-weight:600;

}

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

.footer{

background:#111827;

color:#fff;

padding:60px 0 20px;

}

.footer h5{

margin-bottom:20px;

}

.footer a{

color:#d1d5db;

}

.footer a:hover{

color:#fff;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:10px;

}





.exam-navbar{
z-index:1000 !important;
}

.modal{
z-index:99999 !important;
}

.modal-backdrop{
z-index:99998 !important;
}




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

@media(max-width:768px){

.exam-hero{

text-align:center;

padding:30px 0;

}

.exam-hero h1{

font-size:30px;

}

.hero-image{

max-height:220px;

margin-top:20px;

}

.exam-price{

font-size:38px;

}

.exam-info{

gap:10px;

}

.portal-card{

padding:20px;

}

}