:root{
    --primary:#0A2540;
    --secondary:#D4AF37;
    --light:#f8fafc;
}

body{
    font-family:'Poppins',sans-serif;
}

.navbar{
    background:var(--primary);
}

.navbar-brand,
.nav-link{
    color:#fff !important;
}

.hero{
    min-height:90vh;
    background:
    linear-gradient(rgba(10,37,64,.75),rgba(10,37,64,.75)),
    url('https://images.unsplash.com/photo-1578575437130-527eed3abbec');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    color:white;
}

.hero h1{
    font-size:4rem;
    font-weight:700;
}

.btn-gold{
    background:var(--secondary);
    color:#000;
    font-weight:600;
}

.section-title{
    font-weight:700;
    color:var(--primary);
}

.service-card{
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-10px);
}

.stats{
    background:var(--primary);
    color:white;
}

.track-box{
    background:white;
    border-radius:15px;
    box-shadow:0 5px 25px rgba(0,0,0,.1);
}

.footer{
    background:#07182c;
    color:white;
}

#about{
    background:#ffffff;
}

#about img{
    border-radius:20px;
}

#about .btn-warning{
    background:#D4AF37;
    border:none;
    font-weight:600;
}

#about .btn-warning:hover{
    background:#c29b25;
}

#about p{
    text-align: justify;
}

#about h2{
    color:var(--primary);
    font-weight:500;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #0A2540;
    border-radius: 50%;
    padding: 20px;
}

.carousel img {
    max-height: 80px;
    object-fit: contain;
}

.footer {
    background: #07182c;
}

.footer a:hover {
    color: #D4AF37 !important;
}

.footer p {
    margin-bottom: 8px;
}

@media (max-width: 992px) {

.hero {
    height: auto;
    padding: 120px 20px 80px;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
}

.hero .lead {
    font-size: 1rem;
}

.section-title {
    font-size: 1.6rem;
}

.track-box {
    padding: 25px !important;
}

.service-card img {
    height: 200px;
}

.stats h1 {
    font-size: 2rem;
}

}

@media (max-width: 768px) {

.hero h1 {
    font-size: 2rem;
}

.navbar-brand {
    font-size: 1.1rem;
}

.service-card {
    margin-bottom: 20px;
}

.track-box {
    border-radius: 12px;
}

img {
    max-width: 100%;
    height: auto;
}

}

@media (max-width: 576px) {

.hero {
    padding: 110px 15px 60px;
}

.hero h1 {
    font-size: 1.8rem;
}

.btn-gold,
.btn-outline-light {
    width: 100%;
    margin-bottom: 10px;
}

.input-group {
    flex-direction: column;
}

.input-group input {
    margin-bottom: 10px;
    width: 100%;
}

.input-group button {
    width: 100%;
}

.stats .col-md-3 {
    margin-bottom: 20px;
}

}