*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

html{
font-size:16px;
}

body{
background:#fff;
padding-bottom:5%;
color:#111;
}

.container{
width:92%;
max-width:100%;
margin-left:5%;
}

img{
width:100%;
display:block;
}

/* TOP HEADER */

.topbar{
background:#fff;
padding:0.75rem 0;
border-bottom:1px solid #eee;
}

.top-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
width:11.25rem;
}

.phone{
font-size:1.325rem;
}

/* HERO SECTION */

.hero{
background:url("images/hero.png") center center/cover no-repeat;
color:#fff;
padding:1.875rem 0;
position:relative;
min-height:45rem;
display:flex;
align-items:center;
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(80,0,0,0.28);
z-index:1;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:2.5rem;
align-items:center;
position:relative;
z-index:2;
}


.hero-left{
padding-left:1.875rem;
}

.hero-left h2{
font-size:3.4375rem;
}

.hero-left h1{
font-size:5.9375rem;
color:#ffd400;
line-height:1;
}

.hero-left h3{
font-size:3.25rem;
margin:0.9375rem 0;
}

.hero-left p{
font-size:1.75rem;
margin:1.125rem 0;
}

.hero-left small{
font-size:1.125rem;
display:block;
margin-bottom:1.5625rem;
}

.btn-wrap{
display:flex;
gap:0.9375rem;
flex-wrap:wrap;
}

.yellow-btn,
.outline-btn,
.bottom-bar button,
.scholarship button{
padding:1rem 1.375rem;
font-weight:bold;
border:none;
cursor:pointer;
border-radius:0.25rem;
}

.yellow-btn{
background:#ffd400;
color:#111;
}

.outline-btn{
background:transparent;
border:2px solid #fff;
color:#fff;
}

.notice{
margin-top:1.125rem;
font-size:1.125rem;
}

/* RANK SECTION */

.rank-section{
display:grid;
grid-template-columns:1fr 1.4fr .5fr;
gap:2.1875rem;
padding:3.4375rem 0;
align-items:center;
}

.rank-left{
width:100%;
}

/* SECTION TITLE */

.section-title{
text-align:center;
padding:1.25rem;
font-size:1.625rem;
}

/* PROGRAM CARDS */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5625rem;
padding-bottom:3.125rem;
}

.card{
background:#f3f3f3;
padding:1.75rem;
border-radius:0.625rem;
}

.card h3{
font-size:1.75rem;
margin-bottom:0.875rem;
}

.card p{
font-size:1.125rem;
margin-bottom:0.9375rem;
}

.card li{
margin-left:1.125rem;
margin-bottom:0.625rem;
font-size:1.125rem;
}

/* SCHOLARSHIP */

.scholarship{
background:#ffd400;
padding:2.1875rem 0;
}

.scholar-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.25rem;
text-align:center;
align-items:center;
}

.scholar-grid h2{
font-size:2.375rem;
color:#b00000;
}

.scholarship button{
background:#b00000;
color:#fff;
}

/* FORM */

.form-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:2.5rem;
padding:3.75rem 0;
align-items:center;
}

.form-left h2{
font-size:2.625rem;
margin-bottom:1.25rem;
}

.form-left h2 span{
color:#b00000;
}

.form-left li{
font-size:1.375rem;
margin-bottom:1.125rem;
}

form{
display:flex;
flex-direction:column;
gap:1rem;
}

input,
select{
padding:1rem;
font-size:1.125rem;
border:1px solid #ccc;
border-radius:0.25rem;
}

form button{
padding:1rem;
font-size:1.125rem;
background:#b00000;
color:#fff;
border:none;
font-weight:bold;
cursor:pointer;
}

#msg{
margin-top:0.75rem;
font-size:1.125rem;
font-weight:bold;
color:green;
}

/* WHY SECTION */

/* TRADITION */

.tradition{
background:#B40100;
color:#fff;
padding:0;
}

.overlay{
position:relative;
}

.tradition img{
height:15rem;
object-fit:cover;
opacity:.45;
}

.tradition-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
width:90%;
}

.tradition-text h2{
font-size:2.625rem;
margin-bottom:0.9375rem;
}

.tradition-text p{
font-size:1.375rem;
}

/* STATS */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.25rem;
padding:3.125rem 0;
text-align:center;
}

.stats h2{
font-size:3.375rem;
color:#b00000;
}

.stats p{
font-size:1.25rem;
}

/* STICKY BOTTOM BAR */

.bottom-bar{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#ffd400;
padding:0.875rem 1.25rem;
display:flex;
justify-content:space-between;
align-items:center;
z-index:999;
gap:1.25rem;
flex-wrap:wrap;
}

.bottom-text{
font-size:1.375rem;
font-weight:bold;
}

.timer{
font-size:2.125rem;
font-weight:bold;
color:#b00000;
}

.bottom-bar button{
background:#b00000;
color:#fff;
}

/* RESPONSIVE */

@media(max-width:1000px){

.hero-grid,
.rank-section,
.cards,
.form-wrap,
.why,
.stats,
.scholar-grid{
grid-template-columns:1fr;
}

.hero{
min-height:560px;
background-position:right center;
}

.hero-left{
padding:20px;
}

.hero-left h2{
font-size:40px;
}

.hero-left h1{
font-size:70px;
}

.hero-left h3{
font-size:35px;
}

.hero-left p{
font-size:22px;
}

.rank-mid h2,
.form-left h2,
.why-content h2,
.tradition-text h2{
font-size:32px;
}

.bottom-bar{
text-align:center;
justify-content:center;
}

.timer{
font-size:24px;
}

}