:root {
    /* Primary Brand Colors */
    --sss-main-color: #0B2153;
    --sss-main-color-variant: #0A142F;
    --sss-main-color-dark: #040F27;
    --sss-main-color-darker: #0b0b15;

    /* Text Colors */
    --sss-text-primary: #231F20;
    --sss-text-secondary: #333;
    --sss-text-muted: #434343;
    --sss-text-dark: #000;
    --sss-text-light-gray: rgba(35, 35, 35, 0.80);
    --sss-hover-alternative: #2052c3;
    /* --sss-text-darker: #231f20; */

    /* White and Light Colors */
    --sss-white: #ffffff;
    --sss-light-gray: #f8f9fa;
    --sss-gray: #ccc;
    --sss-border-gray: #D9D9D9;
    --sss-gray-light: #E6E7E8;

    /* Secondary Colors */
    --sss-dark-green: #47504E;
    --sss-gold: #E1CD98;
    --sss-gold-alt: #DBC792;
    --sss-brown: #736F5C;
    --sss-brown-alt: #7A7462;

    /* System Colors */
    --sss-danger: #dc3545;
    --sss-transparent: transparent;

    /* Background Colors with Alpha */
    --sss-black-overlay-light: rgba(0, 0, 0, 0.1);
    --sss-black-overlay-medium: rgba(0, 0, 0, 0.15);
    --sss-black-overlay-dark: rgba(0, 0, 0, 0.19);
    --sss-black-overlay-darker: rgba(0, 0, 0, 0.25);
    --sss-black-overlay-darkest: rgba(0, 0, 0, 0.27);
    --sss-black-overlay-strong: rgba(0, 0, 0, 0.3);
    --sss-green-overlay: rgba(71, 80, 78, 0.85);
    --sss-main-color-gradient: rgba(211, 17, 70, 1);
    --sss-main-color-transparent: rgba(211, 17, 70, 0);
    --sss-green-gradient-start: rgba(71, 80, 78, 0.8505996148459384);
    --sss-green-gradient-end: rgba(71, 80, 78, 1);
    --sss-white-transparent: rgba(255, 255, 255, 0);
}


/* Table of Contents
---------------------------------
---------------------------------
1. Fonts
2. Base Styles
3. Components
   3.1 Buttons
   3.2 Sidebar
   3.3 Headings
   3.4 Tables
   3.5 Videos
   3.6 Lists
   3.7 Accordion
   3.8 Breadcrumbs
4. Sections
   4.1 Hero Section
   4.2 By the Numbers Section
   4.3 Recent News Section
   4.4 Upcoming Events Section
   4.5 CTA Section
   4.6 Footer
   4.7 About Page
   4.8 Red Outline Box
   4.9 Dynamic Section
   4.10 College Destinations Section
   4.11 Course of Studies Section
   4.12 Academic Resources Section
   4.13 Admissions Section
   4.14 Chart Section
   4.15 Video Section
   4.16 Ready to Do Section
   4.17 News Section
   4.18 Contact Section
   4.19 Basic Feed Section
   4.20 Partners and Core Schools Section
   4.21 FAQs Section
   4.22 Timeline Section
   4.23 Giving Section
   4.24  Basic HTML Content Styles
5. Utilities/Bootstrap Extensions
   5.1 Media Queries and Container Padding
   5.2 Section Padding Helpers
   5.3 Image Cropping
   5.4 Bootstrap Grid Padding
   5.5 Bootstrap Extender: 5 Column Grid
   5.6 Page Backgrounds
   5.7 Page Intros
   5.8 Colors
   5.9 Alignments
6. Forms
   6.1 Form Layout and Labels
   6.2 Submit Button Styles
   6.3 Form Check Styles
   6.4 Fieldsets and Legends
   6.5 ReCaptcha Styling
7. Accessibility
   7.1 Skip to Main Content Link
   7.2 Screen Reader Only Classes
   7.3 Footer Links Focus Styles
--------------------------------- */
/* Fonts */

@font-face {
    font-family: 'SabonNext LT';
    src: url('../fonts/SabonNextLT-Demi.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}


/* Base Styles
--------------------------------- */
body {
    font-family: "montserrat", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--sss-text-primary);
}

/* Override Bootstrap container widths */
@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1280px;
    }
}

.basic-section {
    background-color: var(--sss-white-variant);
    padding: 60px 0;
}

/* Components 
--------------------------------- */
/* Buttons */
.button-row {
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid var(--sss-text-primary);
    border-bottom: 1px solid var(--sss-text-primary);
}

.button-row a {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px;
}

a {
    color: var(--sss-main-color);
    text-decoration: underline;
}

.btn-ghost {
    background: none;
    color: var(--sss-white-variant);
    border: 1px solid var(--sss-white-variant);
    margin-bottom: 10px;
}

.btn-ghost:hover {
    background: var(--sss-white-variant);
    color: var(--sss-main-color);
}

.btn-primary {
    background: var(--sss-main-color);
    border: 0;
    padding: 12px 25px;
}

.btn-primary:hover {
    background: var(--sss-main-color-dark);
}

.btn-arrow {
    border: none;
    padding: 10px 0;
    font-size: 18px;
    color: var(--sss-main-color-variant);
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    text-decoration: none;
}


.btn-arrow:hover {
    color: var(--sss-main-color-dark);
}

.btn-arrow:after {
    content: '';
    display: inline-block;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    width: 31px;
    height: 31px;
    background: var(--sss-main-color) url(../svg/controls/arrow-right.svg) no-repeat 5px center;
    background-size: 18px;
    margin-left: 20px;
    vertical-align: middle;
    transition: translate 0.3s ease;
}

.btn-arrow:hover:after {
    background-color: var(--sss-main-color-dark);
    translate: 5px 0;
}

.inline-arrow {
    color: var(--sss-main-color-variant);
    font-weight: 500;
    text-decoration: none;
}

.inline-arrow i {
    color: var(--sss-main-color-variant);
    font-size: 20px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.inline-arrow:hover i {
    transform: translateX(5px);
}

.basic-section .btn {
    background: var(--sss-main-color);
    color: var(--sss-white-variant);
}

/* Sidebar */

.sidebar-menu a,
.chevron-link {
    color: var(--sss-text-secondary);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 18px;
    font-weight: 400;
    line-height: 41px;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.sidebar-menu a:hover,
.chevron-link:hover {
    color: var(--sss-hover-alternative);
}

.sidebar-menu i,
.chevron-link i {
    color: var(--sss-text-secondary);
    font-size: 14px;
    margin-left: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.sidebar-menu a:hover i {
    color: var(--sss-hover-alternative);
    transform: translateX(10px);
}

@media only screen and (min-width: 1201px) {
    @supports (-moz-appearance:none) {

        .sidebar-menu a:after,
        .chevron-link:after {

            translate: 0 10px;

        }

        .sidebar-menu a:hover:after,
        .chevron-link:hover:after {
            translate: 10px 10px;
            transition: translate cubic-bezier(0.86, 0, 0.07, 1) 0.3s;
        }
    }
}

@media only screen and (max-width: 1200px) {
    .sidebar-menu li {
        padding-right: 35px;
        position: relative;
        width: 100%;
        line-height: 25px;
        margin-bottom: 10px;
        display: block;
    }

    .sidebar-menu a:after {
        position: absolute;
        top: 4px;
        right: 0;
    }

    .sidebar-menu li a {
        width: 100%;
        line-height: 25px;
        display: block;
    }
}


/* Sidebar */
.sidebar-menu {
    list-style-type: none;
    margin: auto;
    padding: 0;
}

.sidebar-box {
    border: 1px solid var(--sss-main-color-variant);
    margin-bottom: 50px;
    padding: 35px;
    position: relative;
}

.sidebar-box h2 {
    color: var(--sss-main-color-variant);
    text-align: center;
    font-family: "SabonNext LT";
    font-size: 42px;
    font-weight: 600;
    line-height: 68px;
    margin-top: 0;
    z-index: 1;
    display: block;
    position: relative;
    text-align: left;
}


.sidebar-title:before {
    content: '';
    width: 70%;
    background: white;
    height: 3px;
    display: none;
    margin: auto;

    translate: 0 -36px;
}

.sidebar-box:before {
    content: '';
    display: none;
    width: 15%;
    left: 10%;
    background: var(--sss-white);
    position: absolute;
    top: -1px;
    height: 2px;
    background: linear-gradient(to right, transparent, white);
}

.sidebar-box:after {
    content: '';
    display: none;
    width: 15%;
    right: 10%;
    background: var(--sss-white);
    position: absolute;
    top: -1px;
    height: 2px;
    background: linear-gradient(to left, transparent, white);
}

.page-content {
    padding-top: 50px;
    padding-bottom: 135px;
}

.page-intro .page-content {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.page-content .page-intro {
    padding-top: 0;
}

@media only screen and (min-width: 992px) {
    .sidebar-inner {
        padding-top: 75px;
    }

    .page-content {
        padding-bottom: 135px;
        padding-top: 75px;
        padding-right: 23px;
    }
}

@media only screen and (min-width: 1200px) {
    .sidebar-box h2 {
        margin-top: -72px;
        text-align: center;
    }

    .sidebar-title:before,
    .sidebar-box:before,
    .sidebar-box::after {
        display: block;
    }
}

/* Headings */
h2 {
    font-family: "SabonNext LT";
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
    /* 142.857% */
}

h3 {
    font-family: "SabonNext LT";
    font-size: 32px;
    font-weight: 600;
    line-height: 36.8px;
    padding: 35px 0;
}

.l-title a {
    color: var(--sss-main-color-variant);
    text-decoration: none;
}

.l-heading {
    display: block;
    padding-bottom: 50px;
}

.line-base,
.line-end {
    width: 50%;
    float: left;
}

.l-title {
    color: var(--sss-main-color-variant);
    font-family: "SabonNext LT";
    font-size: 56px;
    font-weight: 600;
    line-height: 64px;
    margin-bottom: -15px;
    margin-right: 75px;
    margin-bottom: 30px;
}

.line-end {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(to right, var(--sss-main-color-variant), var(--sss-transparent));
    max-width: 909px;
}

.line-base {
    flex-grow: 1;
    height: 2px;
    background: var(--sss-main-color-variant);
    max-width: 909px;
}

.page-title {
    color: var(--sss-main-color-variant);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "SabonNext LT";
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: 64px;
    padding: 50px 0;
}

@media (min-width: 768px) {
    .l-heading {
        display: flex;
        align-items: flex-end;
        padding-bottom: 70px;
    }

    .line-base,
    .line-end {
        width: unset;
        float: unset;
    }

    .l-title {
        margin-bottom: -15px;
    }

    h2 {
        font-size: 44px;
        line-height: 56px;
    }
}

@media (min-width: 992px) {
    h2 {
        font-size: 56px;
        line-height: 80px;
    }

    h3 {
        font-family: "SabonNext LT";
        font-size: 42px;
        font-weight: 600;
        line-height: 56px;
    }

}

/* Tables */

/* Base styles for the table */
.table.table-2-col {
    width: 100%;
    border-collapse: collapse;
}

/* Desktop-specific adjustments */
@media (min-width: 768px) {
    .table.table-2-col tbody {
        display: flex;
        flex-wrap: wrap;
    }

    .table.table-2-col tbody tr {
        display: flex;
        justify-content: space-between;
        width: 50%;
        box-sizing: border-box;
    }

    .table.table-2-col tbody tr td:first-child {
        flex-grow: 1;
    }

    .table.table-2-col tbody tr td:last-child {
        white-space: nowrap;
    }

    .table.table-2-col tbody tr td {
        background-color: var(--sss-transparent);
        padding: 1rem 1rem;
    }

    /* Alternate background colors for every two rows */
    .table.table-2-col tbody tr:nth-child(4n+1),
    .table.table-2-col tbody tr:nth-child(4n+2) {
        background-color: var(--sss-light-gray-alt);
        /* Light gray for every two rows */
    }

    .table.table-2-col tbody tr:nth-child(4n+3),
    .table.table-2-col tbody tr:nth-child(4n+4) {
        background-color: var(--sss-white);
        /* White for the next two rows */
    }
}

/* Videos */
.video-container {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: auto;
}

.video-container video {
    width: 100%;
    height: auto;
    display: none;
    /* Start hidden */
}

.play-button {
    background: var(--sss-black-overlay-darker);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(0, 0);
    font-size: 48px;
    color: var(--sss-white-variant);
    cursor: pointer;
    border: none;
    outline: none;
    display: block;
    opacity: .7;
    transition: opacity 0.4s ease;

}

.play-button:hover {
    opacity: 1;
}

.watch-video-text .play-icon {
    transform: translate(0, 35px);
}

.watch-video-text:before {
    content: 'Watch Video';
    position: absolute;
    top: 50%;
    left: 50%;
    /* right: 0; */
    /* bottom: 0; */
    transform: translate(-50%, -28px);
    font-size: 18px;
    color: var(--sss-white-variant);
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    display: block;
    pointer-events: none;
}

.video-container .play-icon {
    transform: translate(0, 35px);
    width: 45px;
    height: 45px;
    pointer-events: none;
}

/* Lists */
.branded-list {
    list-style: none;
    padding: 0;
}

.branded-list li {
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
}

.branded-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 10px;
    height: 10px;
    background-color: var(--sss-red);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .branded-list li {
        font-size: 24px;
        line-height: 50px;
    }
}

/* Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.gp-accordion-item.active .accordion-content {
    max-height: 100px;
    /* Adjust as needed */
    overflow: auto;
}

.gp-accordion-item {
    position: relative;
}

.accordion-toggle {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
    width: fit-content;
    min-width: 120px;
    position: absolute;
    bottom: 35px;
}

.accordion-toggle .toggle-circle {
    margin-left: 0;
}

.accordion-toggle .toggle-text {
    text-align: left;
}

.accordion-image {
    max-width: 400px;
    width: 100%;
}

.accordion-preview {
    display: flex;
    flex-direction: column;
}

.gp-accordion-item {
    padding: 50px;
    border-bottom: 1px solid var(--sss-gray);
}

.accordion-content-inner {
    padding: 50px 0 135px 0;
}

.accordion-summary {
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
}

.accordion-toggle .toggle-text {
    font-weight: 500;
}

.accordion-header {
    font-family: "SabonNext LT";
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: 72px;
    width: 100%;
    display: block;
    margin-bottom: 25px;
}

.minus-text {
    display: none;
}

.accordion-toggle[aria-expanded="true"] .plus-icon,
.accordion-toggle[aria-expanded="true"] .plus-text {
    display: none;
}

.accordion-toggle[aria-expanded="true"] .minus-icon,
.accordion-toggle[aria-expanded="true"] .minus-text {
    display: inline;
}

.accordion-content h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 15px;
    padding-top: 35px;
    margin-bottom: 0;
}

.accordion-content-inner p {
    margin-bottom: 15px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.gp-accordion-item {
    padding-bottom: 135px;
}

.right-half {
    margin-top: 50px;
}

.toggle-circle {
    transition: scale .3s ease;
}

.accordion-toggle:hover .toggle-circle {
    scale: 1.15;
}

@media only screen and (min-width: 992px) {
    .accordion-preview {
        flex-direction: row;
    }

    .accordion-preview .right-half {
        padding-bottom: 105px;
    }

    .gp-accordion-item {
        padding-bottom: 50px;
    }

    .right-half {
        margin-top: unset;
    }

    .accordion-summary {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 50px;
    }

    .accordion-header {
        font-size: 56px;
        line-height: 80px;
        margin-bottom: 10px;
    }
}

/* Accordion Basic */
.gp-accordion-basic button.accordion-toggle .toggle-text {
    display: none;
}

.gp-accordion-basic button.accordion-toggle {
    right: 0;
}

.gp-accordion-basic .accordion-header {
    margin: 0;
}

.gp-accordion-basic .accordion-toggle {
    position: relative;
    margin-left: auto;
    margin-right: 0;
}

.gp-accordion-basic .right-half {
    text-align: right;
}

.gp-accordion-basic .accordion-toggle {
    bottom: 0;
}

.gp-accordion-basic .accordion-toggle {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.gp-accordion-basic .accordion-content-inner {
    padding: 50px 0 50px 0;
}

.gp-accordion-basic button.accordion-toggle h2 {
    color: var(--sss-text-primary);
    transition: color .3s ease;
}

.gp-accordion-basic button.accordion-toggle:hover h2 {
    color: var(--sss-main-color);
}

.gp-accordion-basic .gp-accordion-item {
    padding-bottom: 50px;
}

@media only screen and (min-width: 768px) {
    .gp-accordion-basic .left-half {
        width: clamp(50vw, calc(100% - 100px), 1300px);
    }
}

@media only screen and (min-width: 992px) {
    .gp-accordion-basic .gp-accordion-item {
        padding: 35px;
    }

    .gp-accordion-basic .accordion-preview .right-half {
        padding-bottom: 0;
    }

    .gp-accordion-basic .accordion-toggle .toggle-circle {
        margin-left: auto;
        margin-right: 0;
        margin-bottom: 0;
    }

    .gp-accordion-basic .accordion-toggle {
        flex-direction: row;
    }
}

/* Breadcrumbs */
.breadcrumbs {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.breadcrumbs li {
    display: inline;
}

.breadcrumbs li a {
    color: var(--sss-main-color-variant);
    text-decoration: none;
}

.breadcrumbs li a:hover {
    text-decoration: underline;
}

.breadcrumbs li::after {
    content: ">";
    padding: 0 8px;
}

.breadcrumbs li:last-child::after {
    content: none;
}

.breadcrumbs li:last-child {
    color: var(--sss-text-secondary);
    /* Red color for the current page */
}

.breadcrumb-row {

    text-align: center;
    margin: auto;
    display: block;
    width: fit-content;
}

/* Layout
--------------------------------- */
/* Basic Hero */

.hero-type-image {
    min-height: calc(100vh - 82.79px);
}

@media only screen and (max-width: 991px) {
    .hero-type-image {
        min-height: calc(100vh - 82.79px) !important;
        top: -17px;
    }
}

@media only screen and (min-width: 1200px) {
    .hero-type-image {
        min-height: calc(100vh - 100px) !important;
    }
}

@media only screen and (min-width: 992px) {

    .left-half,
    .right-half {
        width: 50%;
    }
}


/* Sections
--------------------------------- */

/* Hero Section */
.hero {
    position: relative;
    text-align: center;
}

.hero-section {
    position: relative;
}

.hero-shade {
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--sss-black-overlay-dark);
    pointer-events: none;
}

.hero-shade.darker-top {
    background: var(--sss-black-overlay-darkest);
    background: linear-gradient(180deg, var(--sss-black-overlay-strong) 0%, var(--sss-black-overlay-dark) 35%, var(--sss-black-overlay-dark) 100%);
}

.hero-type-image {
    height: 100svh;
    background-image: url('../images/main.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    width: 100%;
}

.hero-content {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
}

.has-transparent-menu .hero-content {
    top: 82.79px;
}


.hero-content-inner {
    text-align: left;
    max-width: 1280px;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.hero-content h1 {
    padding: 0 12px;
    margin: 0;
    color: var(--sss-white);
    font-family: "SabonNext LT";
    font-size: 50px;
    font-weight: 600;
    line-height: 65px;
    text-align: center;
}

.video-ada-bttn {
    margin-top: 25px;
}


@media only screen and (min-width: 768px) {

    .hero-content h1 {
        font-size: 60px;
        line-height: 75px;
    }
}

@media only screen and (min-width: 992px) {

    .hero-content h1 {
        margin: 0 0 -20px 0;
        font-size: 90px;
        line-height: 108px;
        text-align: left;
    }

    .hero-content h1.hero-homepage {
        font-size: 80px;
    }

    .hero-content {
        left: 35px;
        bottom: 85px;
        right: 35px;
        top: unset;
    }

    .has-transparent-menu .hero-content {
        top: unset;
    }


    .hero-content-inner {

        align-items: flex-end;
        flex-direction: row;
    }
}


/* Hero Video Controls */
.video-ada-bttn {
    background: none;
    border: none;
}

.video-ada-bttn img {
    width: 35px;
    opacity: .7;
    transition: opacity 0.4s ease;
}

.video-ada-bttn:hover img {
    opacity: 1;
}


.video-ada-bttn.playing .play-icon {
    display: none;
}

.video-ada-bttn.paused .pause-icon {
    display: none;
}

/* By the Numbers Section */
.statistics,
.news,
.events,
.about {
    padding: 60px 0;
    text-align: center;
}

.statistics {
    background: var(--sss-main-color-dark);
    color: var(--sss-white);
    padding: 70px 0 50px 0;
}

.statistics.less-padding {
    padding: 100px 0 100px 0;
}

.statistics img {
    max-height: 105px;
}

.statistics .number {
    font-weight: bold;
    text-align: center;
    font-size: 56px;
    line-height: 42px;
    margin: 50px 0;
}

.statistics .stat {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 36px;
    padding: 0 23px;
}

.less-padding .statistic-inner {
    padding-bottom: 50px;
}

.statistics-white {
    background: var(--sss-white);
    color: var(--sss-text-primary);
}

.statistics-white .number {
    color: var(--sss-main-color-variant);
}

.statistic-inner {
    padding-bottom: 50px;
}

.statistic-inner dl {
    margin-bottom: 0;
}

.statistics.less-padding .stat {
    padding: 0 5px;
}

@media (min-width: 992px) {
    .statistics {
        padding: 100px 0 50px 0;
    }
}

@media (min-width: 1200px) {

    .less-padding .statistic-inner {
        padding-bottom: 0;
    }

}

/* Footer */

/* Footer styles */
.main-footer {
    background: var(--sss-main-color-darker);
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 0 100px;
    /* border-radius: 60px 0 0 0; */
    color: white;
}

/* TOP FOOTER */
.top-footer {
    display: flex;
    padding: 40px 0;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-between;
}

.logo-box {
    max-width: 250px;
}

.logo-box .footer-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.logo-title {
    font-size: 32px;
}

.label-menu {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    position: relative;
    width: fit-content;
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-size: 17.5px;
}

.label-menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgb(255, 255, 255, 0.3);
    bottom: 0;
}

.menu-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.menu-box a {
    /* border: solid; */
    text-decoration: none;
    color: #C2C4C8;
    position: relative;
    left: 0;
    bottom: 0;
    transition: 0.25s;
}

.menu-box a:hover {
    left: 4px;
    bottom: 1px;
    color: white;
}

.newsletter-box {
    max-width: 300px;
}

.newsletter-message {
    color: #C2C4C8;
}

.input-box {
    /* border: solid; */
    display: flex;
    margin-top: 16px;
}

.email-input {
    width: 100%;
    padding: 12px;
    border-radius: 12px 0 0 12px;
    border: none;
    outline: none;
    color: black;
    font-weight: 500;
}

.send-btn {
    background: #25CAAC;
    width: 55px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-size: 20px;
    cursor: pointer;
    transition: 0.25s;
}

.send-btn:hover {
    background: #3DE9C9;
}

/* END TOP FOOTER */

/* BOTTOM FOOTER */
.bottom-footer {
    /* border: solid; */
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    border-top: solid 2px rgb(255, 255, 255, 0.05);
    align-items: center;
}

.copyright-txt {
    color: #C2C4C8;
    text-align: center;
}

.social-media {
    /* border: solid; */
    display: flex;
    gap: 24px;
}

.social-media i {
    font-size: 32px;
    color: #C2C4C8;
    position: relative;
    bottom: 0;
    transition: 0.25s;
}

.social-media i:hover {
    bottom: 3px;
    color: white;
}

/* END BOTTOM FOOTER */

/* RESPONSIVE SCREEN */
@media (max-width: 1024px) {
    .main-footer {
        padding: 0 50px;
    }

    .logo-box {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .main-footer {
        padding: 0 25px;
    }

    .bottom-footer {
        flex-direction: column;
        gap: 25px;
    }
}

/* End footer */

/* CTA Section */
/* Full-Screen CTA Section */
.cta-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f8f9fa;
}

.cta-card {
    background-color: white;
    padding: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
    margin: 25px;
}

.cta-content h2 {
    color: var(--sss-main-color-variant);
    font-family: "SabonNext LT";
    font-size: 42px;
    font-weight: 600;
    line-height: 42px;
    padding: 10px 0 40px;
}

.cta-content {
    align-items: flex-end;
    display: flex;
    padding: 50px 0;
}

.cta-content p {
    color: var(--sss-text-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 35px;
}


@media (min-width: 580px) {
    .cta-card {
        margin: 0;
    }
}

@media (min-width: 992px) {
    .cta-spacer {
        min-height: calc(100vh - 72px);
    }

    .cta-content {
        padding-bottom: clamp(20px, 10vh, 135px);
    }
}

/* About Page */
/* Double Eagle Section */
.double-eagle-section {
    background-color: var(--sss-main-color-darker);
    color: white;
    padding: 50px 0;
}

.double-eagle img {
    width: clamp(200px, 50%, 568px);
    margin: auto;
    display: block;
    opacity: 0.1;
}

.double-eagle {
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
}

.double-eagle-section,
.red-banner,
.banner {
    padding: 70px 35px;
    min-height: 540px;
    display: flex;
    align-items: center;
    position: relative;
}

.double-eagle-section,
.red-banner {
    background-color: var(--sss-main-color-darker);
    color: white;
}

.banner-content {
    max-width: 768px;
    margin: auto;
    text-align: center;
    z-index: 1;
}

.banner-content h2 {
    text-align: center;
    margin-bottom: 35px;
}

.red-banner .banner-content {
    color: var(--sss-white);
}

.banner-content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}

.double-eagle-section.silver-scheme {
    background: white;
}

.silver-scheme .banner-content h2 {
    color: var(--sss-main-color-variant);
}

.silver-scheme .banner-content p {
    color: rgb(35, 31, 32);
}

.banner-content p:last-child {
    margin-bottom: 0;
}

.red-overlay {
    background: var(--sss-main-color-variant);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .9;
    z-index: 0;
}

@media (min-width: 768px) {

    .double-eagle-section,
    .red-banner,
    .banner {
        padding: 135px;

    }

    .banner-content p {
        font-size: 21px;
        line-height: 42px;
    }
}

/* Red Outline Box (rob) */
.rob-section {
    padding: 50px 25px;
}

.red-outline-box {
    border: 1px solid var(--sss-main-color-variant);
    background: var(--sss-white);
    max-width: 1280px;
    margin: auto;
    width: 100%;
    padding: 25px 25px;
}

.rob-title h2 {
    color: var(--sss-main-color-variant);
    font-family: "SabonNext LT";
    font-weight: 600;
    font-size: 38px;
    line-height: 52px;
    margin: 0 0 35px 0;
    width: 100%;
    padding: 0;
    background: white;
    max-width: unset;
    position: relative;
}


@media (min-width: 400px) {

    .red-outline-box {
        padding: 25px;
    }

    .rob-section {
        padding: 50px 25px;
    }
}

@media (min-width: 580px) {

    .red-outline-box {
        padding: 35px;
    }

    .rob-section {
        padding: 130px 35px;
    }
}

@media (min-width: 768px) {

    .red-outline-box {
        padding: 75px;
    }

    .rob-title h2 {
        font-size: 42px;
        line-height: 60px;
    }

    .rob-title h2:after {
        content: '';
        background: linear-gradient(to right, white, transparent);
        width: 75px;
        position: absolute;
        top: 18px;
        right: -75px;
        height: 2px;
    }
}

@media (min-width: 1200px) {

    .rob-title h2 {

        font-size: 56px;
        line-height: 72px;
        margin: -95px 0 75px;
        width: fit-content;
        padding: 0 35px;
        margin-left: -35px;
        max-width: 328px;

    }
}

/* Dynamic Section */
/* Dynamic Section | Red */

/* Students Origin Section */
.dynamic-section {
    padding: 70px 0;
    position: relative;
    background-color: white;
    color: var(--sss-text-primary);
}

.map-bg {
    background-size: cover;
    background-position: center;
}

.dynamic-section h2 {
    color: var(--sss-main-color-variant);
}

.dynamic-section-blue {
    background-color: var(--sss-main-color-dark);
    color: white;
}

.dynamic-section-blue h2 {
    color: var(--sss-white);
}

.dynamic-section p {
    font-size: 21px;
    font-weight: 400;
    line-height: 36px;
}

.d-description {
    margin-top: 35px;
    margin-bottom: 35px;
}

.d-heading,
.d-content,
.d-image,
.d-inner {
    padding: 0 25px;
}

.d-image {
    margin-top: 35px;
}

.student-list {
    list-style-type: none;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 64px;
}

.student-list li {
    margin-bottom: 10px;
    font-weight: 400;
}

.region {
    font-weight: 700;
}

.region:last-child {
    word-break: break-word;
}

.d-description a {
    color: var(--sss-main-color-variant);
    font-weight: 500;
    text-decoration: none;
}

@media (min-width: 580px) {

    .d-heading,
    .d-content,
    .d-image,
    .d-inner {
        padding: 0 35px;
    }
}

/* Responsive styling */
@media (min-width: 1200px) {
    .d-heading {
        display: flex;
    }

    .d-title,
    .d-description {
        width: 50%;
    }

    .d-description {
        padding-left: 10px;
    }

    .d-title {
        padding-right: 10px;
    }

    .d-heading,
    .d-content,
    .d-image,
    .d-inner {
        padding: 0 75px;
    }

    .d-content {
        margin-top: 75px;
    }

    .student-list {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .dynamic-section p {
        font-size: 24px;
        line-height: 50px;
    }

    .d-description {
        margin-top: 0;
        margin-bottom: 0;
    }

    .dynamic-section {
        padding: 130px 0;
    }
}

/* College Destinations Section */

.content-container {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sss-main-color-dark);
    padding: 20px;
    border-radius: 5px;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #E6E7E8);
    pointer-events: none;
}

.expanded .gradient-overlay {
    display: none;
}

.toggle-box .toggle-button {
    margin-top: -45px;
    z-index: 1;
    position: relative;
}

.toggle-button {
    background: none;
    margin: auto;
    display: block;
    border: 0;
}

.toggle-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 0;
    background-color: var(--sss-main-color-dark);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 24px;
}

.toggle-text {
    color: var(--sss-main-color-variant);
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
}

.minus-icon {
    display: none;
}

.toggle-button[aria-expanded="true"] .plus-icon {
    display: none;
}

.toggle-button[aria-expanded="true"] .minus-icon {
    display: inline;
}

.content-container.expanded {
    max-height: none;
}

.content-container.expanded .gradient-overlay {
    display: none;
}

.expanded .tb-content {
    height: auto;
}

.tb-content {
    border: var(--sss-main-color-variant) solid 1px;
    height: 300px;
    overflow: hidden;
    position: relative;
    padding: 35px;
}

.tb-inner h3 {
    font-size: 21px;
    padding: 0 0 20px 0
}

.tb-inner ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 35px;
}

.tb-inner ul>li {
    margin-bottom: 10px;
}

.tb-2-col {
    column-count: 2;
    column-gap: 20px;
}

.heading {
    margin-bottom: 50px;
}

.title h2 {
    color: var(--sss-main-color-variant);
}

.description {
    color: var(--sss-text-primary);
    font-family: "montserrat";
    font-size: 24px;
    font-weight: 325;
    line-height: 50px;
}

/* TABBED CONTENT FEATURE */
/* Course of Studies Section */
.course-of-studies-section {
    background-color: white;
    padding: 60px 0;
}

.nav-tabs .nav-link {
    color: var(--sss-text-primary);
    font-weight: bold;
}

.nav-tabs .nav-link:hover {
    color: var(--sss-main-color);
}

.nav-tabs .nav-link.active {
    color: var(--sss-main-color-dark);
    border-color: var(--sss-main-color-dark);
}

.course-list {
    list-style-type: none;
    padding: 0;
    font-size: 18px;
}

.course-list li {
    margin-bottom: 10px;
}

.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--sss-main-color-variant);
}

.nav-tabs .nav-link {
    border: 0;
}

.nav-tabs {
    padding-bottom: 75px;
    border: 0;
}

.nav-item {
    flex-grow: 1;
    text-align: center;
}

.page-intro {
    padding-top: 75px;
    color: var(--sss-text-primary);
    font-family: "montserrat";
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
}


.nav-tabs .nav-link {
    border-bottom: #D9D9D9 2px solid;
}

.tab-pane h3:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Departments */

.department {
    display: block;
    align-items: center;
    margin-bottom: 35px;
    text-decoration: none;
}

.department .dept-name {
    transition: color cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s;
}

.department:hover .dept-name {
    color: var(--sss-main-color);
}

.dept-name {
    color: var(--sss-text-primary);
    font-size: 28px;
    font-weight: 600;
    line-height: 44px;
    margin: 0;
    padding: 25px 0;
    font-family: "SabonNext LT";
}

@media (min-width: 992px) {
    .dept-name {
        padding: 20;
    }
}

/* Resources Section */

.resource-item {
    padding: 70px 0;
    border-bottom: rgba(0, 0, 0, 0.15) solid 1px;
    z-index: 1;
    position: relative;
}

.resource-item h3 {
    color: var(--sss-text-primary);
    margin: 0;
    padding: 0;
}

.resource-item p {
    margin-bottom: 0;
    margin-top: 35px;
    color: var(--sss-text-light-gray);
    font-size: 24px;
    font-weight: 400;
    line-height: 50px;
}

.resource-content {
    padding-right: 20px;
}

.arrow-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sss-main-color-variant);
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.arrow-icon i {
    color: var(--sss-white);
    font-size: 20px;
    transition: color 0.2s ease, transform 0.4s ease;
}

.arrow-icon:hover {
    background: var(--sss-white);
}

.arrow-icon:hover i {
    color: var(--sss-hover-alternative);
    transform: translateX(5px);
}

.resource-item:hover .arrow-icon {
    background: var(--sss-white);
}

.resource-item:hover .arrow-icon i {
    color: var(--sss-hover-alternative);
    transform: translateX(5px);
}

.resource-link {
    position: relative;
    text-decoration: none;
}


.resource-feed .resource-link:first-of-type .resource-item {
    border-top: rgba(0, 0, 0, 0.15) solid 1px;
}

.resource-link,
.resource-link h3,
.resource-link p {
    transition: color 0.4s ease;
}

.resource-link:hover,
.resource-link:hover h3,
.resource-link:hover p {

    color: var(--sss-hover-alternative);
}

.resource-link:hover:before {
    opacity: 1;
    transition: opacity 0.4s ease;
}

@media (min-width: 992px) {
    .resource-item {
        padding: 70px 0;
    }
}

/* Admissions Section */
.letter {
    padding: 75px;
    border: var(--sss-main-color-variant) 1px solid;
}

.letter-title {
    color: var(--sss-main-color-variant);
    font-family: "SabonNext LT";
    font-size: 56px;
    font-weight: 600;
    line-height: 80px;
    padding: 50px 0;
}

.message-from-admissions-section p {
    font-size: 18px;
    font-weight: 400;
    line-height: 35px;
}

.message-from-admissions-section a {
    color: var(--sss-hover-alternative);
}

.message-from-admissions-section .title {
    margin-bottom: 50px;
}

.signature {
    margin: 35px 0;
}

.person-name,
.person-title {

    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 10px;
}

.person-name {
    color: var(--sss-main-color-variant);
}

.contact-item {
    display: flex;
    align-items: center;
}

.contact-item i {
    color: var(--sss-main-color-variant);
    font-size: 24px;

}

.contact-text {
    color: var(--sss-main-color-variant);
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
    padding-left: 15px;
    text-decoration: none;
}

.staff-member h3 {
    color: var(--sss-text-dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 64px;
    padding-top: 15px;
    margin-bottom: 0;
    padding-bottom: 15px;
}

.staff-member p {
    color: var(--sss-text-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 42px;
}

@media (min-width: 580px) {
    .contact-text {
        font-size: 21px;
        line-height: 38px;
    }
}

@media (min-width: 768px) {
    .contact-text {
        font-size: 24px;
        line-height: 38px;
    }

}

@media (min-width: 1200px) {
    .contact-text {
        font-size: 28px;
        line-height: 42px;
    }
}

/** Chart Section **/
.chart-section {
    padding-bottom: 135px;
}

.chart-group {
    color: var(--sss-text-primary);
    padding: 10px;
    border: var(--sss-main-color) solid 1px;
}

.chart-section h2 {
    padding: 70px 0;
    text-align: center;
    max-width: 825PX;
    margin: auto;
}

.custom-legend {
    display: block;
}

.custom-legend .legend-item {
    display: flex;
    margin-right: 10px;
    margin-bottom: 15px;
}

.custom-legend .legend-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 3px;
    /* Optional, for rounded corners */
}

.color-annual-fund {
    background-color: var(--sss-main-color-variant);
    /* Color for Annual Fund */
}

.color-endowment {
    background-color: var(--sss-dark-green);
    /* Color for Endowment Withdrawal */
}

.color-fees {
    background-color: var(--sss-gold);
    /* Color for Fees and Other Income */
}

.custom-legend {
    width: fit-content;
    margin: 35px auto 0 auto;
}

.chart-wrapper {
    position: relative;
}

.chart-title {
    font-family: "Montserrat";
    font-size: 24px;
    position: absolute;
    top: calc(50% - 38px);
    width: 50%;
    left: 25%;
    line-height: 38px;
}

.ctitle-1,
.ctitle-2 {
    width: 100%;
    display: block;
    text-align: center;
}

.chart-intro {
    text-align: center;
    font-family: "Montserrat";
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 35px;
}

.chart-presentation {
    padding: 35px 0;
}

@media (min-width: 580px) {
    .chart-group {
        padding: 35px;
    }

    .chart-title {
        font-size: 32px;
        top: calc(50% - 38px);
    }
}

@media (min-width: 992px) {
    .chart-group {
        padding: 65px;
    }

    .chart-presentation {
        padding: 0 15px;
    }
}

@media (min-width: 992px) {
    .chart-presentation {
        padding: 0 30px;
    }
}

/** Video Section **/
.video-section {
    z-index: 1;
    position: relative;
}

/** Ready to Do **/
.ready-to-do main {
    background: var(--sss-dark-green);
    color: var(--sss-gold);
}

.rtd-logo {
    display: block;
    max-width: 100px;
    margin: 70px auto 0 auto;
}

.stacked-title-1,
.stacked-title-2 {
    display: block;
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "SabonNext LT";
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: 48.3px;
    text-align: center;
}

.ready-to-do .stacked-title-1 {
    color: var(--sss-gold);
}

.ready-to-do .stacked-title-2 {
    color: var(--sss-white);
    font-weight: 700;
}

.rtd-heading {
    padding: 70px 0;
    margin: 0;
}



.ready-to-do .button-row {
    border-color: var(--sss-gold);
    color: var(--sss-gold);
}

.ready-to-do .button-row a {
    color: var(--sss-gold);
}

.ready-to-do .accordion-toggle .toggle-text {
    color: white;
}

.ready-to-do .chart-group {
    background: var(--sss-brown);
    border: none;
    color: white;
}

.ready-to-do .chart-intro {
    color: #DBC792;
}

.ready-to-do .inverse-colors {
    background: var(--sss-gold);
    color: var(--sss-dark-green);
}

.ready-to-do-cta {
    padding: 50px;
}

.ready-to-do-cta h2 {
    max-width: 825px;
    margin: 0 auto 50px;
}

.ready-to-do-cta form {
    margin: 70px 0;
}

.rossete {
    margin-bottom: 20px;
}

@media (min-width: 1200px) {

    .stacked-title-1,
    .stacked-title-2 {
        font-size: 56px;
        line-height: 64px;
        /* 114.286% */
    }
}

/* RTD page bg */
.ready-to-do .page-bg:after {
    background: rgb(71 80 78 / 85%);
    background: linear-gradient(180deg, rgba(71, 80, 78, 0.8505996148459384) 0%, rgba(71, 80, 78, 1) 90%, rgba(71, 80, 78, 1) 100%);

}

/* RTD Accordion */
.ready-to-do .gp-accordion-item {
    border-bottom: 1px var(--sss-white) solid;
    background: var(--sss-brown-alt);
    color: white;
}

.vp-info-description {
    text-align: center;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    /* 152.381% */
}

.vp-info {
    background: var(--sss-dark-green);
    color: white;
    padding: 10px;
    border-radius: 10px;
    max-width: 400px;
    margin: 35px auto 0;
}

.vp-info p:last-child {
    margin-bottom: 0;
}

/** News **/
.blog .post-details {
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
}

.blog .news-item {
    border-bottom: none;
}

.blog .news-title {
    min-height: 132px;
}

.newsLinkRight {
    color: var(--sss-text-primary);
    width: 100%;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid rgb(0 0 0 / 13%);
    padding: 10px 0;
}

/* Contact */
.contact-page {
    padding: 100px 0;
}

.v-line-r {
    position: relative;
}

.v-line-r:before {
    content: ' ';
    height: 100%;
    width: 1px;
    display: block;
    position: absolute;
    /* background: red; */
    right: 0;
    background: linear-gradient(100deg, rgba(211, 17, 70, 1) 0%, rgba(211, 17, 70, 0) 100%);
    display: none;
}

.col-lg-content:first-child {
    margin-bottom: 100px;
}

@media (min-width: 1200px) {
    .v-line-r:before {
        display: block;
    }

    .col-lg-content:first-child {
        margin-bottom: 0;
    }
}

address {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 42px;
}

address a {
    color: var(--sss-main-color);
    text-decoration: none;
}

address a:hover {
    text-decoration: underline;
}

address abbr[title] {
    text-decoration: none;
}

/* Basic Feed (Student Life) */
.feed-item h2 {
    color: var(--sss-main-color-variant);
    font-family: "SabonNext LT";
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 50px;
}

.feed-item p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    /* 177.778% */
}

.feed-item {
    padding: 100px 0;
    border-bottom: 1px solid rgb(0 0 0 / 15%);
}

.feed-item img {
    margin-bottom: 35px;
}

.feed-item:first-child {
    padding-top: 50px;
}

.feed-item:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .feed-item img {
        margin-bottom: 0;
    }
}

/* Partners and Core Schools */
.centered-heading {
    color: var(--sss-main-color-variant);
    text-align: center;
    font-family: "SabonNext LT";
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: 80px;
}

.centered-paragraph {
    text-align: center;
    font-size: 18px;
    line-height: 36px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.basic-heading-section {
    padding: 100px 0;
}

section.less-padding.basic-heading-section {
    padding-bottom: 50px;
}

.basic-heading-section .breadcrumb-row {
    margin-bottom: 35px;
}

.brob {
    border: 1px var(--sss-main-color-variant) solid;
    padding: 35px;
    margin-bottom: 100px;
}

.brob h2 {
    color: var(--sss-main-color-variant);
    font-family: "SabonNext LT";
    font-size: 42px;
    font-weight: 600;
    line-height: 56px;
    margin-bottom: 50px;
}

.brob p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px;
    /* 208.333% */
}

.partner-row {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: space-around;
    margin-top: 50px;
}

.partner-logo {
    padding: 10px;
}

.partner-logos-2 img {
    width: 100%;
    max-width: 177px;
}

@media (min-width: 768px) {
    .brob {
        padding: 75px;
    }
}

/* REACH */
.big-social-icon {
    max-width: 120px;
}

.big-social-icon:hover {
    transition: scale .3s ease;
}

.big-social-icon:hover {
    scale: 1.05;
}

.hero .reach-logo {
    display: block;
    max-width: 600px;
    margin: auto;
    pointer-events: none;
    width: clamp(260px, 600px, 50%);
    height: auto;
}

.reach-logo-wrapper {
    align-items: center;
    pointer-events: none;
    display: flex;
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100vw;
    left: 0;
    bottom: 0;
}

.glide-hero .glide__slide {

    /* height: calc(100vh - 100px);
    position: relative; */
    overflow: hidden;
    /* Ensures no overflow of content outside the slide */
    min-height: 400px;
}


.glide-hero .glide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the slide, similar to background-size: cover */
    object-position: center;
    /* Centers the image within the slide */
}

.glide-hero .glide__bullets {
    position: absolute;
    z-index: 1;
    bottom: 35px;
    width: 100%;
}

.glide__bullet.glide__bullet--active {
    background: var(--sss-danger);
}

.glide__bullets {
    display: none;
}

.glide__bullets .glide__bullet {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid grey;
    margin: 5px;
}

.glide__bullets .glide__bullet:hover {
    border: 1px solid var(--sss-danger);
}

.hero-type-slider .glide__arrows {
    position: absolute;
    left: 35px;
    z-index: 1;
    bottom: 35px;
    margin: 0;
    color: white;
    padding: 5px 10px;
}

.hero-type-slider .glide__arrows {
    display: block;
}

.hero-type-slider .glide__arrows button {
    color: white;
}

.hero-type-slider .glide__arrows button {
    border-radius: 50%;
    color: white;
    background: var(--sss-main-color);
    width: 40px;
    height: 40px;
}

.hero-type-slider .glide__arrows button:hover {
    background: var(--sss-main-color-variant);
}

.hero .glide__arrow .lg-slide-arrow {
    width: 16px;
}

.glide__arrow--left>img {
    margin-left: -2px;
}

.glide__arrow--right>img {
    margin-right: -2px;
}

.hero-type-slider {
    width: 100%;
    overflow: hidden;
}

/** Glide Fade Animation **/
.glide-hero .glide__slides {
    transform: translate3d(0, 0, 0) !important;
    width: 100vw !important;
    height: calc(100vh - 82.79px);
}

.glide-hero .glide__slide {
    opacity: 0;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .7s ease;
    height: calc(100vh - 82.79px);
}

.glide-hero .glide__slide.glide__slide--active {
    opacity: 1;
    z-index: 1;
}

/* page navbar */
.page-navbar {
    display: flex;
    align-items: center;
}

.navbar-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.navbar-list li {
    white-space: nowrap;
}

.page-navbar {
    background-color: var(--sss-main-color-dark);
    color: white;
    display: flex;
    justify-content: center;

    display: flex;
    align-items: center;
    position: relative;
}

.page-navbar a {
    color: var(--sss-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    padding: 15px 15px;
    text-wrap: nowrap;
    text-decoration: none;
}

.page-navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.page-navbar li {
    padding: 0;
    cursor: pointer;
}


.more-dropdown {
    list-style-type: none;
    padding: 0;
    margin-left: auto;
}

.more-dropdown .more-dropdown-content {
    color: black;
    display: none;
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: var(--sss-white);
    border: 1px solid #ccc;
    z-index: 1;
    right: 10px;
    left: auto;
    width: fit-content;

}

.page-navbar .more-dropdown-content a {
    color: black;
}

.page-navbar .more-dropdown-content a:hover {
    color: var(--sss-danger);
}

.more-dropdown .dropdown-content {
    color: black;
    right: 10px;
    left: auto;
    width: fit-content;
    min-width: 200px;
    top: 50px;
    color: black;
    padding: 10px;
    border-radius: 2px
}

.more-dropdown:hover .more-dropdown-content {
    display: block;
}

.more-dropdown li {
    white-space: nowrap;
}

.more-button {
    cursor: pointer;
}

.navbar-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.page-nav-item {
    white-space: nowrap;
}

.more-dropdown {
    list-style-type: none;
    padding: 0;
    margin-left: auto;
}

.more-dropdown-content {
    display: none;
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: var(--sss-white);
    border: 1px solid #ccc;
}

.more-dropdown:hover .dropdown-content {
    display: block;
}

.more-dropdown-content li a {
    color: var(--sss-text-primary);
}

.dropdown-item {
    display: none;
    white-space: nowrap;
}

.more-dropdown-content[aria-hidden="true"] {
    display: none;
}

.more-dropdown-content[aria-hidden="false"] {
    display: block;
}

.more-button {
    font-size: 18px;
    background: none;
    color: white;
    border: none;
}

@media (min-width: 1200px) {
    .page-navbar .more-dropdown {
        display: none;
    }

    .page-navbar a {
        padding: 15px 10px;
        display: block;

    }
}

/* Loose Buttons Section */
.loose-buttons-section {
    padding: 70px 35px 0 35px;
    min-height: 400px;
    display: flex;
    align-items: center;
    position: relative;
}

.lb-content h2 {
    color: var(--sss-main-color);
}

.lb-content ul {
    display: flex;
    list-style-type: none;
    margin: 50px 0 70px;
    flex-direction: column;
    padding-left: 0;
}

.lb-content ul li {
    padding-right: 35px;
    float: left;
    padding-bottom: 35px;
}

.lb-content {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    border-bottom: 1px solid rgb(0 0 0 / 15%);
}

.lb-btn {
    background: var(--sss-main-color-variant);
    color: white;
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 21px;
    font-style: normal;
    font-weight: 325;
    line-height: 44px;
    transition: background 0.4s ease;
}

.lb-btn:hover {
    background: #bb0a3a;
}

@media (min-width: 768px) {
    .lb-content ul {
        display: block;
        list-style-type: none;
        margin: 50px 0 70px;
        padding-left: 0;
        flex-direction: unset;
    }
}

/* basic section */
.basic-section h2 {
    color: var(--sss-main-color-variant);
    margin-bottom: 35px;
}

.basic-section p {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px;
    /* 208.333% */
}

.mobile-bounds {
    padding-left: 35px;
    padding-right: 35px;
}

@media (min-width: 1200px) {
    .mobile-bounds {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Reach */
.reach {
    padding-bottom: 70px;
}

.reach .dynamic-section {
    padding: 100px 0 50px 0;
}

.reach .double-eagle-section {
    z-index: 0;
    /* ensures this section doesnt hide page nav */
}

/* Athletics */
.grid-style .caption {
    color: var(--sss-text-primary);
    font-family: "SabonNext LT";
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
    margin-bottom: 50px;
    padding-top: 35px;
    text-decoration: none;
    transition: color 0.4s ease;
}

.grid-style a {
    text-decoration: none;
}

.grid-style a:hover .caption {
    color: var(--sss-main-color-variant);
}

/* FAQs */


.faq-section h2 {
    color: rgba(211, 18, 69, 0.94);
    font-family: "SabonNext LT";
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
    /* 147.368% */
}

.faq-section summary {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--sss-main-color-dark);
    cursor: pointer;
    margin-bottom: 10px;
}

.faq-section p {
    margin-left: 20px;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--sss-text-dark);
}

.faq-section dt {
    color: rgba(211, 18, 69, 0.94);

    font-family: "SabonNext LT";
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
    /* 147.368% */

    margin-bottom: 35px;
}

.prefix {
    font-family: "SabonNext LT";
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
    /* 147.368% */
}

.faq-section dd {

    margin-bottom: 100px;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    /* 166.667% */
}

.faq-section dd:last-child {
    margin-bottom: 0;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 100px auto;
    padding: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-item {
    position: relative;
    width: 100%;
    padding: 0;

}


.timeline-item {
    align-self: flex-end;
}

.timeline-content {
    padding: 0 35px 35px 35px;
    border-radius: 8px;
    position: relative;
}

.timeline-content-inner {
    opacity: 0;
    transition: opacity .6s ease;
}


.visible .timeline-content-inner {
    opacity: 1;
}

.timeline-content h2 {
    color: var(--sss-main-color);
    font-size: 42px;
    font-weight: 600;
    line-height: 68px;
    margin: 0;
    padding: 35px 0;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--sss-main-color-dark);
    top: 0;
    bottom: 0;
    left: 0;
    margin-left: -2px;
}

.timeline-item:nth-child(odd) .timeline-content::after,
.timeline-item:nth-child(even) .timeline-content::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: -10px;
}

.timeline-item:nth-child(even) .timeline-content::after,
.timeline-item:nth-child(odd) .timeline-content::after {
    background: var(--sss-main-color-dark);
    right: calc(100% - 10px);
    margin-left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
}


.timeline-content.left:before,
.timeline-content.right:before {
    content: '';
    width: 0;
    position: absolute;
    top: 0;
    height: 2px;
    left: 0;
    background: var(--sss-main-color-dark);
    transition: width .4s ease;
}

.timeline-heading {
    margin: 50px 0;
}

.visible .timeline-content.left:before,
.visible .timeline-content.right:before {
    width: 100%;
}

.timeline-content p {
    font-size: 18px;
    line-height: 36px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.timeline-item.visible {
    border: 1px solid rgb(0 0 0 / 8%);
    margin-bottom: 50px;
    box-shadow: 0 26px 58px 0 rgba(0, 0, 0, 0.09), 0 5px 14px 0 rgba(0, 0, 0, 0.11);
}

@media (min-width: 992px) {
    .timeline-item:nth-child(odd) {
        align-self: flex-start;
    }

    .timeline-item:nth-child(even) {
        align-self: flex-end;
    }

    .timeline::after {

        left: 50%;
    }

    .timeline-item {
        width: 50%;
    }

    .timeline-item:nth-child(odd) .timeline-content::after {
        background: var(--sss-main-color-dark);
        left: calc(100% - 10px);
        margin-left: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 0;
    }

    .timeline-content.right:before {
        content: '';
        width: 0;
        position: absolute;
        top: 0;
        height: 2px;
        right: 0;
        background: var(--sss-main-color-dark);
        transition: width .4s ease;
    }

    .timeline-content.left:before {
        right: 0;
        left: auto;
    }

    /*.timeline:before {
        content: '';
        background: var(--sss-main-color);
        border-radius: 50%;
        width: 35px;
        height: 35px;
        position: absolute;
        left: -17.5px;
        top: 0;
        z-index: 1;
    }*/
}

/* Giving */
.accordion-content-inner address {
    font-size: 18px;
    line-height: 32px;
    color: var(--sss-text-primary);
}

/* Planned Giving */
.wGiveheader {
    font-size: 24px;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 10px;
}

.giveWell {
    margin-bottom: 35px;
}

.givingBox {
    font-size: 18px;
    margin-top: 35px;
}

.testimonial p {
    margin-bottom: 15px;
    margin-top: 15px;
}

.testimonial p:first-child {
    margin-top: 15px;
}

.testimonial {
    padding: 35px 0;
}

.testimonial .person-name {
    margin-top: 20px;
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
}

.testimonial {
    font-size: 18px;
}

@media (min-width: 992px) {
    .testimonial .person-name {
        margin-top: 0;
    }

    .givingBox {
        margin-top: 0;
    }
}

/* Overlayed Card */
.overlayed-card {
    position: relative;
}

.overlayed-card .caption {
    position: absolute;
    z-index: 1;
    color: white;
    bottom: 35px;
    left: 35px;
    padding: 0;
    margin: 0;
    width: fit-content;
    max-width: calc(100% - 70px);
}

.overlayed-card {
    position: relative;
    margin-bottom: 35px;
}

.overlayed-card:before {
    content: '';
    background: rgb(0 0 0 / 19%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1227284663865546) 0%, rgba(0, 0, 0, 0.2212718837535014) 39%, rgba(0, 0, 0, .3) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.overlayed-card .caption:before {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--sss-main-color);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

a:hover .overlayed-card .caption {
    color: white;
}

a:hover .overlayed-card .caption:before {
    width: 100%;
    left: 0;
}

.academics-grid .overlayed-card .caption {
    font-size: 28px;
    font-weight: 600;
    line-height: 44px;
}

/* Basic HTML Content Styles */
/* Mean for use in most pages where dynamic content will be pulled through a CMS */

.html-content {
    padding: 70px 0;
}

.html-content h2 {
    color: var(--sss-text-primary);
    font-size: 28px;
    font-weight: 600;
    line-height: 44px;
    margin: 0;
    padding: 20px 0;
    font-family: "SabonNext LT";
}

.html-content p {
    color: var(--sss-text-primary);
    font-family: "montserrat";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    margin-bottom: 35px;
}

.html-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 35px 0;
}

.html-content ul li {
    list-style-type: none;
    position: relative;
    padding-left: 35px;
}

.html-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background-color: var(--sss-main-color);
    border-radius: 50%;
}

.html-content a {
    color: var(--sss-main-color);
    font-weight: 700;
    font-family: "montserrat";
}


.html-content .btn {
    font-weight: 500;
    background-color: var(--sss-main-color);
}

.html-content .btn:hover {
    background-color: var(--sss-main-color-dark) !important;
}

/* Wordpress HTML Content Styles */
.wp-block-image img {
    width: 100%;
}

.html-content figcaption {
    margin-top: 15px;
}

/* WP Post Image Alignment Styles */
.wp-block-image.alignleft {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 50%;
}

.wp-block-image.alignright {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 50%;
}

.wp-block-image.aligncenter {
    display: block;
    margin: 0 auto;
    text-align: center;
    max-width: 70%;
}

.wp-block-image.alignleft img,
.wp-block-image.alignright img,
.wp-block-image.aligncenter img {

    height: auto;
    max-width: 100%;
}

.wp-block-image {
    overflow: hidden;
}

/* Responsive Styles */
@media only screen and (max-width: 768px) {

    .wp-block-image.alignleft,
    .wp-block-image.alignright {
        float: none;
        margin: 0 auto 20px auto;
        max-width: 90%;
    }
}


/* Utilities/Bootstrap Extensions
--------------------------------- */
@media (min-width: 300px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 380px) {
    .container {
        padding-right: 25px;
        padding-left: 25px;
    }
}

@media (min-width: 580px) {
    .container {
        padding-right: 35px;
        padding-left: 35px;
    }
}

@media (min-width: 768px) {
    .container {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Section Padding Helpers */
.standard-padding {
    padding: 135px 0;
}

.medium-padding {
    padding: 100px 0;
}

.small-padding {
    padding: 75px 0;
}

.thin-container {
    max-width: 1106px;
}

.flex-center {
    display: flex;
    align-items: center;
}


/* Image Cropping */
.square-image {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* This makes the height equal to the width, creating a square */
    overflow: hidden;
}

.square-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the entire square without distorting */
}

.auto-crop-3-2 {
    width: 100%;
    max-width: 1280px;
    height: auto;
    position: relative;
    padding-bottom: 66.66%;
    /* This gives the 3:2 ratio */
    overflow: hidden;
}

.auto-crop-3-2 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Bootstrap Grid Padding */
@media (min-width: 768px) {
    .row>.pr-md-2 {
        padding-right: 2rem;
    }

    .row>.pl-md-2 {
        padding-left: 2rem;
    }

    .row>.pr-md-3 {
        padding-right: 3rem;
    }

    .row>.pl-md-3 {
        padding-left: 3rem;
    }
}

@media (min-width: 1200px) {
    .row>.pr-xl-2 {
        padding-right: 2rem;
    }

    .row>.pl-xl-2 {
        padding-left: 2rem;
    }

    .row>.pr-xl-3 {
        padding-right: 50px;
    }

    .row>.pl-xl-3 {
        padding-left: 50px;
    }

    .row>.pr-xl-5 {
        padding-right: 100px;
    }

    .row>.pl-xl-5 {
        padding-left: 100px;
    }
}

.pt-lg-6 {
    padding-top: 135px;
}

.pb-lg-6 {
    padding-bottom: 135px;
}

.pt-lg-2 {
    padding-top: 3rem;
}

/** bootstrap extender: 5 column grid **/
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
    }

    .col-md-2-5 {
        width: 40%;
    }

    .col-md-3-5 {
        width: 60%;
    }

    .col-md-4-5 {
        width: 80%;
    }

    .col-md-5-5 {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
    }

    .col-lg-2-5 {
        width: 40%;
    }

    .col-lg-3-5 {
        width: 60%;
    }

    .col-lg-4-5 {
        width: 80%;
    }

    .col-lg-5-5 {
        width: 100%;
    }
}

/** Page backgrounds **/
.page-bg {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    overflow: hidden;
}

.page-bg:after {
    content: '';
    background: rgba(255, 255, 255, 0.85);
    background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .95) 90%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/* Page Intros */

.lg-intro {
    padding: 65px 0;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
}

.intro-section {
    padding: 65px 0;
}

.lg-intro p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .lg-intro {
        font-size: 24px;
        line-height: 50px;
        /* 208.333% */
    }

}

/* Colors */
.red {
    color: var(--sss-main-color-variant);
}

.inverse-colors {
    background: var(--sss-text-primary);
    color: white;
}

/* Alignments */
.centered-section {
    text-align: center;
}

/** Forms **/

form label {
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}

.ready-to-do-cta .form-container {
    max-width: 825px;
    margin: auto;
}

.submit,
.btn-primary[type="submit"] {
    margin-top: 35px;
    background: var(--sss-main-color-variant);
    border: transparent;
    color: white;
    padding: 10px 35px;
}

.submit:hover,
.btn-primary[type="submit"]:hover {
    background: var(--sss-main-color-dark);
    color: white;
}

.submit.submit-lg {
    text-align: center;
    font-family: Gotham;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 114.286% */
    padding: 20px 70px;
}

.form-check label {
    margin-top: 0;
}

.no-labels .form-group {
    margin-bottom: 20px;
}

legend {
    color: rgba(211, 18, 69, 0.94);
    font-family: "SabonNext LT";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px;
    margin-top: 25px;
}

.fieldset legend:first-child,
fieldset:first-child legend {
    margin-top: 0;
}

.form-check-input:checked {
    background-color: var(--sss-main-color);
    border-color: var(--sss-main-color);
}

.g-recaptcha {
    margin-top: 35px;
}

/* Accessibility
--------------------------------- */
/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: var(--sss-main-color-dark);
    color: white;
    padding: 10px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* sr-only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.footer-links a:focus-visible,
.footer-social a:focus-visible {
    outline: 2px solid white;
}

.btn-arrow:focus-visible {
    outline: 2px solid var(--sss-main-color);
    border-radius: 0;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* For menu styles **/

body:not(.has-transparent-menu) {
    padding-top: 82.79px !important;
}

#menu-toggle[aria-expanded="true"] img {
    display: none;
}

#menu-toggle[aria-expanded="true"]:after {
    content: "";
    color: white;
    padding: 0 7px;
    width: 30px;
    height: 30px;
    background: url(../svg/controls/close.svg);
    background-size: cover;
}

#menu-toggle:hover {
    background: var(--sss-main-color-dark);
    border-radius: 4px;
}


@media (min-width: 1200px) {
    body:not(.has-transparent-menu) {
        padding-top: 100px !important;
    }
}

/* Consider adding inline */
.hero-type-image {
    background-position: center center ! Important;
}



.sub-title {
    color: #d21246;
    font-weight: 600;
    margin-top: 25px;
    display: block;
}

.learn-box-img-top {
    width: 100%;
}

.protect-cta,
.protect-cta p,
.protect-cta ul {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    /* 177.778% */
}

.protect-cta .sub-title {
    margin-top: 0;
}

.protect-cta .btn-arrow {
    text-align: left;
}

.learn-box {
    margin-bottom: 50px;
}

.learn-box-title {
    margin-bottom: 0;
}

.protect-cta h2 {
    color: var(--sss-text-primary);
}

.list-checkmark {
    font-size: 24px;
    margin: 50px 0;
    list-style-type: none;
    padding: 0;
}

.list-checkmark li {
    padding-bottom: 20px;
    padding: 0 35px 20px 35px;
    position: relative;
}

.list-checkmark li:before {
    content: '\2713';
    display: inline-block;
    color: var(--sss-main-color);
    padding: 0 6px 0 0;
    position: absolute;
    left: 0;
}

.list-checkmark li::marker {
    display: none;
}

/* Quote Boxm*/
.quote-box {
    border: var(--sss-main-color-variant) solid 1px;
    position: relative;
    padding: 50px;
    max-width: 768px;
    margin: auto;
}

.big-quote {
    color: var(--sss-main-color-variant);
    text-align: center;
    font-family: "SabonNext LT";
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: 50px;
    /* padding: 60px; */
}

.blockquote-footer .author {
    width: 100%;
    display: block;
    color: #8A8A8A;

    text-align: center;
    font-family: "Gotham Rounded";
    font-size: 28px;
    font-style: normal;
    font-weight: 325;
    line-height: 44px;
    /* 228.571% */
}

.blockquote-footer::before {
    content: "";
}

.link {
    color: var(--sss-main-color);
    text-decoration: none;
    font-weight: 600;
}

.link:hover {
    text-decoration: underline;
}

.blockquote-footer {
    background: transparent;

}

@media (min-width: 580px) {

    .big-quote {
        font-size: 44px;
        line-height: 64px;
    }
}

@media (min-width: 768px) {
    .blockquote-footer {
        margin-bottom: -100px;
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        bottom: -50px;
    }

    .blockquote-footer .bf-inner {
        margin: auto;
        background: white;
        display: block;
        width: fit-content;
        padding: 0 35px;
    }

    .big-quote {
        font-size: 56px;
        line-height: 64px;
    }
}

@media (min-width: 1200px) {
    .quote-box {
        padding: 70px;
    }
}



input[type="checkbox"] {
    accent-color: var(--sss-main-color-dark);
    /* Set the checkbox color to your desired red */
}

.homecolumnHeader {
    font-size: 2em;
    font-weight: 400;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1;
}

.regisRed {
    color: #d31145;
}


.row {
    align-items: center;
}

.social-icons {
    margin-top: 15px;
}

.social-icons a {
    margin: 0 8px;
    font-size: 20px;
    color: #eceaea;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #007bff;
    /* Change hover color */
}

.contact-bg {
    margin-top: 5.5rem;
    height: 40vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('../Imgs/contact-bg.jpg');
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-bg h3 {
    font-size: 1.3rem;
    font-weight: 400;
}

.contact-bg h2 {
    font-size: 3rem;
    text-transform: uppercase;
    padding: 0.4rem 0;
    letter-spacing: 4px;
}

.line div {
    margin: 0 0.2rem;
}

.line div:nth-child(1),
.line div:nth-child(3) {
    height: 3px;
    width: 70px;
    background: #0A142F;
    border-radius: 5px;
}

.line {
    display: flex;
    align-items: center;
}

.line div:nth-child(2) {
    width: 10px;
    height: 10px;
    background: #0A142F;
    border-radius: 50%;
}

.text {
    font-weight: 300;
    opacity: 0.9;
}

.contact-bg .text {
    margin: 1.6rem 0;
}

.contact-body {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
}

.contact-info {
    margin: 2rem 0;
    text-align: center;
    padding: 2rem 0;
}

.contact-info span {
    display: block;
}

.contact-info div {
    margin: 0.8rem 0;
    padding: 1rem;
}

.contact-info span .fas {
    font-size: 2rem;
    padding-bottom: 0.9rem;
    color: #0A142F;
}

.contact-info div span:nth-child(2) {
    font-weight: 500;
    font-size: 1.1rem;
}

.contact-info .text {
    padding-top: 0.4rem;
}

.contact-form {
    padding: 2rem 0;
    border-top: 1px solid #c7c7c7;
}

.contact-form form {
    padding-bottom: 1rem;
}

.form-control {
    width: 100%;
    border: 1.5px solid #c7c7c7;
    border-radius: 5px;
    padding: 0.7rem;
    margin: 0.6rem 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    outline: 0;
}

.form-control:focus {
    box-shadow: 0 0 6px -3px rgba(48, 48, 48, 1);
}

.contact-form form div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.6rem;
}

.submit-btn {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: #fff;
    background: #0A142F;
    border: none;
    border-radius: 5px;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    transition: all 0.4s ease;
}

.submit-btn:hover {
    opacity: 0.8;
}

.contact-form>div img {
    width: 85%;
}

.contact-form>div {
    margin: 0 auto;
    text-align: center;
}

.map {
    width: 90%;
    /* height: 400px; */
}

@media screen and (min-width: 768px) {
    .contact-bg .text {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 992px) {
    .contact-bg .text {
        width: 50%;
    }

    .contact-form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
}

@media screen and (min-width: 1200px) {
    .contact-info {
        grid-template-columns: repeat(4, 1fr);
    }
}



.cards-container {
    margin-top: 40px;
    display: flex;
    gap: 100px;
    flex-wrap: wrap;
    justify-content: center;
}

.team-section {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    flex-wrap: wrap;
}

.team-member-card {
    position: relative;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 350px;
    height: 450px;
}

.team-member-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* The overlay is hidden by default */
.team-member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;

    /* Center the content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Hide it and prepare for a fade-in transition */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Reveal the overlay on hover */
.team-member-card:hover .team-member-overlay {
    opacity: 1;
}

/* Also, zoom the image slightly on hover for a nice effect */
.team-member-card:hover img {
    transform: scale(1.1);
}

.team-member-info {
    text-align: center;
    /* Move the text down slightly to start, and it will slide up */
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.team-member-card:hover .team-member-info {
    transform: translateY(0);
}

.team-member-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
}

.team-member-info p {
    margin: 0 0 1rem 0;
    font-style: italic;
    opacity: 0.9;
}

.team-member-social {
    /* Move the icons down slightly to start, will also slide up */
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
    /* Add a slight delay */
}

.team-member-card:hover .team-member-social {
    transform: translateY(0);
}

.team-member-social a {
    color: #fff;
    margin: 0 1rem;
    font-size: 1.75rem;
    transition: color 0.3s ease;
}

.team-member-social a:hover {
    color: #00a0dc;
    /* A bright blue for hover */
}

.alert {
    /* Positioning */
    position: fixed;
    /* Positions the element relative to the viewport, so it stays in place even when scrolling */
    top: 20px;
    /* 20 pixels from the top */
    left: 50%;
    /* 50% from the left edge of the viewport */
    transform: translateX(-50%);
    /* This is a trick to truly center the element. It shifts it back to the left by 50% of its OWN width. */
    z-index: 1000;
    /* Ensures the alert appears on top of all other content */

    /* Styling */
    color: white;
    /* Text color */
    background-color: #28a745;
    /* A pleasant green for success messages */
    padding: 1rem 1.5rem;
    /* Adds space inside the alert */
    border-radius: 8px;
    /* Softer, rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* A subtle shadow to make it "pop" */
    font-family: sans-serif;
    /* A clean, modern font */
    font-size: 1rem;
    min-width: 300px;
    /* Ensures the popup is not too narrow */
    text-align: center;

    /* Animation */
    opacity: 0;
    /* Start fully transparent */
    animation: fadeInOut 5s ease-in-out;
    /* The animation is named 'fadeInOut', lasts 5 seconds, and has a smooth timing function */
}

/*
  Keyframe animation for the fade-in and fade-out effect.
*/
@keyframes fadeInOut {

    /* It starts invisible and slightly above its final position */
    0% {
        opacity: 0;
        top: 0;
    }

    /* Over the first 10% of the animation, it fades in and moves down */
    10% {
        opacity: 1;
        top: 20px;
    }

    /* It stays visible for the majority of the duration */
    90% {
        opacity: 1;
        top: 20px;
    }

    /* In the last 10%, it fades out and moves up again */
    100% {
        opacity: 0;
        top: 0;
    }
}