/* Base (Mobile) Styles */

/* Regular weight */
@font-face {
    font-family: 'santoshi';
    src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Bold weight */
@font-face {
    font-family: 'santoshi';
    src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Light weight */
@font-face {
    font-family: 'santoshi';
    src: url('../fonts/Satoshi-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* Italic style */
@font-face {
    font-family: 'santoshi';
    src: url('../fonts/Satoshi-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* Bold Italic style */
@font-face {
    font-family: 'santoshi';
    src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}
body{
    font-family: 'santoshi', sans-serif;
}
/* Add an active state class (optional if dynamic styling is done via JS) */
.active {
    color: #2E3D9B;
    font-weight: 700;
  }
  

.footer {
    background-color: #3C6BFA;
}
.hero_section {
    background: url('../Images/Home_mobile.webp');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.race_section {
    background: url('../Images/Mid_banner_mobile.webp');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* For medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero_section {
        background: url('../Images/Sakal_banner_web.webp');
        background-size: 100% 100%;
        background-position: bottom ;
        background-repeat: no-repeat;
    }
    .footer {
        background: url('../Images/Sakal_footer_banner.webp');
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    .race_section {
        background: url('../Images/Mid_banner_web.webp');
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
    }
}

/* For large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .hero_section {
        background: url('../Images/Sakal_banner_web.webp');
        background-size: 100% 100%  ;
        background-position: bottom ;
        background-repeat: no-repeat;
        
    }
    .footer {
        background: url('../Images/Sakal_footer_banner.webp');
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    .race_section {
        background: url('../Images/Mid_banner_web.webp');
        background-size: cover;
        /* background-position: bottom; */
        background-repeat: no-repeat;
    }
}