:root {

    --primary: #dc3545;

    --secondary: #6c757d;

    --dark: #212529;

    --light: #f8f9fa;

}



body {

    font-family: 'Roboto', sans-serif;

    color: var(--dark);

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'Oswald', sans-serif;

}



.navbar-brand h1 {

    color: var(--primary);

    font-weight: 700;

    letter-spacing: 1px;

}



.hero-section {

    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/hero-bg.jpg');

    background-size: cover;

    background-position: center;

}



.icon-box {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.card {

    transition: transform 0.3s ease;

}



.card:hover {

    transform: translateY(-5px);

}



.btn-primary {

    background-color: var(--primary);

    border-color: var(--primary);

}



/* Animation classes */

.animate-delay-1 {

    animation-delay: 0.3s;

}



.animate-delay-2 {

    animation-delay: 0.6s;

}



@media (max-width: 768px) {

    .hero-section {

        text-align: center;

        padding: 3rem 0;

    }

}