/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Lexend:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Bootstrap CSS */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css');


#accordion .card-header {
    background-color: rgba(36, 95, 115, 0.5);
    color: #ffffff;
}

#class-img,
#instructor-img {
    max-width: 300px;
    width: 100%;
    height: auto;
}

.knewave-regular {
    font-family: "Knewave", system-ui;
    font-weight: 400;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}


.lexend-regular {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.brand-font {
    font-family: "Knewave", system-ui;
    font-style: normal;
    color: #656458;
}

.btn-brown {
    background-color: #733e24;
    color: #ffffff;
}

.btn-brown:hover {
    background-color: #808080;
    color: #000000;
}

.slogan {
    font-family: "Knewave", system-ui;
    font-weight: 400;
    font-style: normal;
}

.hero-section {
    position: relative;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(36, 95, 115, 0.5);
    color: #fff;
}

.bg-color-one {
    background-color: #f2f0ef;
}

.bg-color-two {
    background-color: #bbbdbc;
}

.bg-color-three {
    background-color: #245f73;
}

.bg-color-four {
    background-color: #733e24;
}

.rating {
    color: #ffd700;
}

.classes .card:hover,
.instructors .card:hover {
    box-shadow: 1px 1px 5px #245f73;
}

.contact img {
    max-height: 300px;
}

.form-signin {
    max-width: 330px;
    padding: 1rem;
    background-color: rgba(36, 95, 115, 0.2);
    border-radius: 10px;
}

body {
    font-family: "Roboto", sans-serif;
    background-color: #f2f0ef;
}

footer {
    background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

section:nth-of-type(even) {
    background-color: #e4e7e6;
}