@font-face {
    font-family: "onlineTrainingBook";
    src: url("/fonts/FRABK.TTF") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "onlineTrainingDemi";
    src: url("/fonts/FRADM.TTF") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "onlineTrainingHeavy";
    src: url("/fonts/FRAHV.TTF") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

.onlineTrainingFamilyPage {
    background: #FFFFFF;
    color: #424242;
    display: block;
    font-family: "onlineTrainingBook", Arial, sans-serif;
    max-width: none;
    padding: 0 0 58px;
    width: 100%;
}

.onlineTrainingFamilyPage h1 {
    font-family: "onlineTrainingHeavy", "Franklin Gothic Heavy", "Franklin Gothic", Arial, sans-serif;
}

.onlineTrainingFamilyPage h2,
.onlineTrainingFamilyPage h3,
.onlineTrainingFamilyPage a,
.onlineTrainingFamilyPage button,
.onlineTrainingFamilyPage input {
    font-family: "onlineTrainingDemi", "Franklin Gothic", Arial, sans-serif;
}

.onlineTrainingFamilyPage .heroSection {
    background: #003566;
    color: #FFFFFF;
    margin: 0;
    padding: 52px 24px;
}

.onlineTrainingFamilyPage .heroContent {
    align-items: start !important;
    display: grid !important;
    gap: 44px;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    margin: 0 auto;
    max-width: 1180px;
    width: 100%;
}

.onlineTrainingFamilyPage .heroText {
    align-self: start;
    flex: none !important;
    max-width: none !important;
    padding: 0;
}

.onlineTrainingFamilyPage .heroText h1 {
    background: transparent;
    border-left: 6px solid var(--free-vid-accent);
    border-radius: 0;
    box-shadow: none;
    color: #FFFFFF;
    display: block;
    font-size: clamp(2.35rem, 4.6vw, 4.25rem);
    line-height: 1;
    margin: 0 0 20px;
    padding: 4px 0 4px 18px;
}

.onlineTrainingFamilyPage .heroText p {
    color: #FFFFFF;
    font-size: 1.1rem;
    line-height: 1.62;
}

.onlineTrainingFamilyPage .heroText p a {
    color: #FFFFFF;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.onlineTrainingFamilyPage .heroText p a:hover,
.onlineTrainingFamilyPage .heroText p a:focus {
    color: #FFB1CB;
}

.onlineTrainingFamilyPage .heroText ul + p {
    color: #424242;
}

.onlineTrainingFamilyPage .heroText ul + p a {
    color: var(--free-vid-accent-text);
}

.onlineTrainingFamilyPage .heroText ul + p a:hover,
.onlineTrainingFamilyPage .heroText ul + p a:focus {
    color: #FFFFFF;
}

.onlineTrainingFamilyPage .heroImage {
    align-self: start;
    flex: none !important;
    margin: 0;
    max-width: none !important;
    width: 100%;
}

.onlineTrainingFamilyPage .heroImage img {
    border: 4px solid #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.onlineTrainingFamilyPage #videoSearchBox,
.onlineTrainingFamilyPage .options-section:not(#videoSearchBox),
.onlineTrainingFamilyPage .additional-section {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1180px;
    width: calc(100% - 48px);
}

.onlineTrainingFamilyPage #videoSearchBox {
    border: 1px solid #B8C8DC;
    margin-top: 34px;
}

.onlineTrainingFamilyPage .options-section:not(#videoSearchBox) {
    display: grid !important;
    gap: 22px;
    margin-bottom: 0;
    margin-top: 22px;
}

.onlineTrainingFamilyPage .option-card {
    border: 1px solid #B8C8DC;
    border-radius: 10px;
    box-shadow: 0 7px 18px rgba(0, 53, 102, 0.1);
    max-width: none !important;
    min-width: 0;
    transform: none;
    width: 100%;
}

.onlineTrainingFamilyPage .option-card:hover {
    box-shadow: 0 12px 24px rgba(0, 53, 102, 0.16);
    transform: translateY(-2px);
}

.onlineTrainingFamilyPage .option-card h2 {
    line-height: 1.2;
    margin: 0;
}

.onlineTrainingFamilyPage .option-card h2 a {
    font-size: 1.06rem;
    line-height: 1.25;
    min-height: 58px;
}

.onlineTrainingFamilyPage .option-card p {
    font-size: 1rem;
    line-height: 1.58;
    margin: 0;
    padding: 16px;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="access-online"]) {
    --free-vid-accent: #7A1734;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="excel-online"]),
.onlineTrainingFamilyPage .option-card:has(a[href*="google-sheets"]) {
    --free-vid-accent: #217346;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="indesign-online"]) {
    --free-vid-accent: #C91D72;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="illustrator-online"]) {
    --free-vid-accent: #F57C00;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="photoshop-online"]) {
    --free-vid-accent: #0074D9;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="powerpoint-online"]) {
    --free-vid-accent: #D24726;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="word-online"]) {
    --free-vid-accent: #2B579A;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="visio-online"]) {
    --free-vid-accent: #3955A3;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="teams-online"]) {
    --free-vid-accent: #6264A7;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="outlook-online"]) {
    --free-vid-accent: #0078D4;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="power-bi-online"]) {
    --free-vid-accent: #F2C811;
    --free-vid-accent-text: #424242;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="publisher-online"]) {
    --free-vid-accent: #008272;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="zoom-meeting"]) {
    --free-vid-accent: #2D8CFF;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="dreamweaver-online"]) {
    --free-vid-accent: #2BA84A;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="acrobat-online"]) {
    --free-vid-accent: #D71920;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="windows-online"]) {
    --free-vid-accent: #0078D4;
}

.onlineTrainingFamilyPage .option-card:has(a[href*="html-online"]) {
    --free-vid-accent: #E34F26;
}

.onlineTrainingFamilyPage .additional-section {
    background: #FFEFF4;
    border: 1px solid #FF9FC0;
    border-radius: 12px;
    color: #424242;
    margin-top: 34px;
    padding: 28px;
}

.onlineTrainingFamilyPage .additional-section h2,
.onlineTrainingFamilyPage .additional-section h3 {
    color: #003566;
}

.onlineTrainingFamilyPage .additional-section p {
    line-height: 1.62;
}

@media (max-width: 900px) {
    .onlineTrainingFamilyPage .heroContent {
        grid-template-columns: 1fr;
    }

    .onlineTrainingFamilyPage .heroImage {
        margin: 0 auto;
        max-width: 680px !important;
    }

    .onlineTrainingFamilyPage .options-section:not(#videoSearchBox) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .onlineTrainingFamilyPage {
        padding-bottom: 44px;
    }

    .onlineTrainingFamilyPage .heroSection {
        padding: 38px 18px;
    }

    .onlineTrainingFamilyPage .heroText h1 {
        font-size: 2.5rem;
    }

    .onlineTrainingFamilyPage #videoSearchBox,
    .onlineTrainingFamilyPage .options-section:not(#videoSearchBox),
    .onlineTrainingFamilyPage .additional-section {
        width: calc(100% - 32px);
    }

    .onlineTrainingFamilyPage .options-section:not(#videoSearchBox) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onlineTrainingFamilyPage .option-card {
        transition: none;
    }

    .onlineTrainingFamilyPage .option-card:hover {
        transform: none;
    }
}