@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Black_Italic.OTF');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Black.OTF');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Bold_Italic.OTF');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Bold.OTF');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Italic.OTF');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Medium_Italic.otf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Medium.otf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Bogle';
    src: url('https://cdn.northpass.io/fonts/Bogle_Regular.OTF');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Bogle', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #232325;
}

.main-page-container {
    max-width: 1440px;
    margin: auto;
}

.np-header-logo {
    justify-content: start;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.background-light {
    background: #f4f4f5;
}

.background-dark {
    background: #E8E8E8;
}

.section-padding {
    padding: 16px;
}

.heading {
    color: #232325;
    font-weight: 600;
    font-size: 24px;
}

.heading-light {
    color: #232325;
    font-weight: 300;
    font-size: 20px;
}

.card-image {
    width: 100%;
    border-radius: 8px;
}

.course-content-container {
    margin-top: 10px;
}

.course-heading {
    font-size: 18px;
    font-weight: 600;
    color: #232325;
}

.course-description {
    font-size: 16px;
    font-weight: 400;
    color: #232325;
    margin-top: 5px;
}

.featured-section-container {
    padding-top: 16px;
}

.tns-nav {
    display: flex;
    justify-content: center;
    margin-top: 23px;
    gap: 8px;
}

.tns-nav button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #fff;
    padding: 0;
}
.tns-nav-active {
    background: #000 !important;
}

.card-course {
    text-decoration: none;
}

@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    .heading {
        font-size: 32px;
    }

    .heading-light {
        font-size: 28px;
    }
    .section-padding {
        padding: 24px;
    }
}