@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Roboto:wght@300;400;500;700&display=swap');


body, input, select, textarea {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
}

:root {
    --theme-color-background-light-grey: #F8F8F8;
    --theme-color-footer-bg: #383b43;
}

.bg-light-grey {
   background-color: var(--theme-color-background-light-grey);
}

.bg-court {
    background-image: url(https://oxaco-tennis.be/media/dmoax0yi/bg-gravel.png);
    background-repeat: repeat;
    filter: saturate(0.85) sepia(0.15);
}

footer {
    margin-top: auto;
    background-color: var(--theme-color-footer-bg);
    color: white;
}

footer .nav-link {
    font-weight: 400;
    color: white;
}

footer .nav-link:hover {
    color: white;
    text-decoration: underline;
}

/* bootstrap 5 */
.fs-2 {
    font-size: calc(1.325rem + .9vw) !important;
}


.hero {
    color: #fff;
    height: 480px;
    max-height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    background-attachment: scroll;
    padding-top: 0px;
}

.hero .btn-otc-primary {
    color: black;
    background-color: #ffd300;
    border-color: #ffd300;    
    padding-left: 24px;
    padding-right: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.hero .btn-otc-primary:hover, .hero .btn-otc-primary.active  {
    color: black;
    background-color: #ffc600;
    border-color: #ffc600;   
}

.hero .btn-otc-secondary {
    color: black;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.8);   
    padding-left: 24px;
    padding-right: 24px;
    text-transform: uppercase;
}

.hero .btn-otc-secondary:hover, .hero .btn-otc-secondary.active  {
    color: black;
    background-color: #ffd300;
    border-color: #ffd300;   
}

@media (min-width: 1200px) {
    .hero {
        background-attachment: fixed;
    }
}

.hero-logo {
    width: 500px;
    max-width: 100%;
    padding-top: 100px;
    padding-bottom: 40px;
    margin: auto;
    display: block;
}

.text-grey {
    color: #646464;
}

.text-orange {
    color: #bd632f;
}

.badge-yellow {
    background-color: #ffc700;
    font-size: 1rem;
    font-weight: normal;
}

/* styles available in bootstrap 5 */

.fw-light {
    font-weight: 300!important;
}

.fw-semibold {
    font-weight: 600!important;
}

.fw-bold {
    font-weight: 700!important;
}

.lh-base {
    line-height: 1.5!important;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}