/* Custom CheltenhamITCPro-Book Font here that was pulled from the LSI site, update or remove. */
@font-face {
    font-family: "CheltenhamITCPro-Book";
    src: url("webFonts/CheltenhamITCPro-Book/font.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Using AIC Blue just in case you have a variable that is already set, update or remove. */
    --aic-blue: #0519c2;
    --aic-blue-light: #2323cc;
    --aic-accent: #e8e8f8;
    --aic-peach: #fdf4ef;
    --body-font: "Noto Sans", sans-serif;
    --heading-font: "CheltenhamITCPro-Book", serif;
}

/* This Body class can probably be removed, as on the live site this will already be set, update or remove. */
body {
    font-family: var(--body-font);
    font-size: 1rem;
    color: #000000;
}

/* This can probably be removed if this is already set, update or remove. */
h1,
h2,
h4 {
    font-family: var(--heading-font);
}

/* H2 font size that may need to be changed, update or remove. */
h2 {
    font-size: 30px;
}

/* the H3 was using the body font family, so this will also need to be altered to match the live site if needs be, update or remove. */
h3 {
    font-family: "Noto Sans", sans-serif;
    @media (min-width: 991px) {
        font-size: 1.5rem;
    }
}

/* Custom H6 font size, update or remove. */
h6 {
    font-size: 1.125rem;
}

#main-page-content{
    margin-top: 6rem;
    @media (min-width: 1340px) {
        margin-top: 3rem;
    }
}

.timer-text {
    font-size: 1rem;
    @media (min-width: 991px) {
        font-size: 1.125rem;
    }
}
/* Breadcrumb */
.breadcrumb-bar {
    font-size: 0.8rem;
    color: #000;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;

    @media (min-width: 1240px) {
        margin-top: 7rem;
    }
}
.breadcrumb-bar a {
    color: #000;
    text-decoration: none;
}
/* Custom AIC Colour, update or remove. */
.breadcrumb-bar a:hover {
    color: var(--aic-blue);
}

/* Hero */
/* Custom AIC Colour, update or remove. */
.hero-section {
    padding: 2rem 0 2.875rem;
    background-color: var(--aic-accent);
}

/* Using the AIC-blue colour here, update if needs be, update or remove. */
.hero-section h1 {
    color: var(--aic-blue);
    font-size: 2.5rem;
    line-height: 1.2;
    max-width: 350px;
    @media (min-width: 768px) {
        max-width: 100%;
    }
    @media (min-width: 991px) {
        font-size: 3.875rem;
    }
}
.hero-section p, .accommodation-banner p {
    font-size: 1.25rem;
    line-height: 1.5rem;
    max-width: 620px;
    color: #000;
    @media (min-width: 991px) {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
}

.accommodation-banner p { max-width: 100%; }

.hero-img {
    object-fit: cover;
    width: 100%;
    height: 323px;
    @media (min-width: 991px) {
        height: 446px;
    }
}

.accommodation-banner{
    background-color: var(--aic-accent);
    padding: 2rem 0 2.875rem;
}

.accommodation-banner--white{ background-color: white; }

.accommodation-banner--light-pink{ background-color: rgb(252, 236, 232); }

.what-to-expect{
    background-color: var(--aic-accent);
    padding: 2rem 0 2.875rem;
}

.courses-blue-background{ background-color: var(--aic-accent); }

.tab-pane .text-primary img { width: 25px; }

/* Icon feature row */
/* Custom AIC Colour, update or remove. */
.features-row {
    background-color: var(--aic-peach);
    padding: 1.5rem 0;
    @media (min-width: 991px) {
        padding: 1.2rem 0;
    }
}
.features-row .smaller-icon {
    width: 75px;
}
/* Section headings */
.section-title {
    color: #000;
    font-size: 2rem;
    @media (min-width: 991px) {
        font-size: 2.625rem;
    }
}
.section-lead {
    font-size: 1rem;
    color: #000;
    margin: 0 auto;
    @media (min-width: 991px) {
        max-width: 1120px;
        font-size: 1.625rem;
    }
}

/* Skills grid */
.skill-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.skill-card p {
    font-size: 0.85rem;
    color: #000;
}

/* Apply body font her eto the H4 in the skill card, update or remove, update or remove. */
.skill-card h4 {
    font-weight: 600;
    font-family: "Noto Sans", sans-serif;
}
.timer-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
}
/* Using the AIC blue here, update or remove */
.timer-icon {
    width: 35px;
    height: 35px;
    color: var(--aic-blue);
}

/* University logos */
.uni-logo {
    max-height: 48px;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter 0.2s;
}
.uni-logo:hover {
    filter: none;
}

/* PSE section */
/* Custom AIC Colour, update or remove. */
.pse-section {
    background-color: var(--aic-accent);
}
.pse-section img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 260px;
}
.pse-section ul {
    padding-left: 1.1rem;
    @media (min-width: 991px) {
        line-height: 18px;
    }
}
.pse-section ul li {
    @media (min-width: 991px) {
        font-size: 1.125rem;
        margin-bottom: 0.3rem;
    }
}
.pse-section ul li::marker {
    font-size: 0.7rem;
}
.pse-section p {
    @media (min-width: 991px) {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
}
/* Flexible pathway */
.pathway-list {
    list-style: disc;
    padding-left: 1.2rem;
}
.pathway-list li {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}
.pathway-list li::marker {
    font-size: 0.7rem;
}

/* Study formats */
/* Custom AIC Colour, update or remove. */
.study-formats-section {
    background-color: var(--aic-peach);
    padding: 3rem 0;
    @media (min-width: 991px) {
        padding-top: 5.375rem;
        padding-bottom: 3.5rem;
    }
}

.study-formats-section--white{ background: white; }

.study-formats-section-white{ background-color: white; }

.study-formats-section img {
    width: 220px;
}
.format-item {
    text-align: center;
}
/* Custom AIC Colour, update or remove. */
.format-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 0.75rem;
    color: var(--aic-blue);
}
.format-item p {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

/* CTA / Apply */
/* Custom AIC Colour, update or remove. */
.cta-section {
    background-color: var(--aic-blue);
    padding: 3.125rem 1rem;
    text-align: center;
}
.cta-section h2 {
    color: #fff;
    font-size: 2.625rem;
}
.cta-section p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

/* Buttons */
/* Custom AIC Colour, update or remove. */
.btn-aic,
.btn-aic-reverse {
    background-color: var(--aic-blue);
    color: #fff;
    border: none;
    padding: 0.55rem 1.5rem;
    font-family: var(--body-font);
    transition: background 0.2s;
    width: 267px;
    height: 48px;
    align-content: center;
    font-size: 1.125rem;
    border-radius: 14px;
}
.btn-fullsize {
    width: 100%;
    @media (min-width: 768px) {
        width: 267px;
    }
}
/* Custom AIC Colour, update or remove. */
.btn-aic:hover {
    background-color: var(--aic-blue-light);
    color: #fff;
}

.btn-aic-reverse {
    background-color: white;
    padding: 0.55rem 1.5rem;
    color: #000;
}
/* Custom AIC Colour, update or remove. */
.btn-aic-reverse:hover {
    background-color: var(--aic-blue-light);
    color: #fff;
}

.btn-aic-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid #fff;
    padding: 0.55rem 1.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--body-font);
    transition:
            background 0.2s,
            color 0.2s;
}
/* Custom AIC Colour, update or remove. */
.btn-aic-outline:hover {
    background: #fff;
    color: var(--aic-blue);
}

/* FAQ */
.accordion-button {
    background-color: white !important;
    font-size: 1.375rem;
    font-weight: 600;
    box-shadow: none !important;
    color: black !important;
    border-radius: 0px !important;
    padding-left: 0;
    @media (min-width: 991px) {
        font-size: 1.5rem;
    }
}
.accordion-item {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0px !important;
}
@media (max-width: 768px) {
    .pse-section img {
        min-height: 200px;
    }
}

/* Custom Spacer */
#whatIsAICTest{
    @media (min-width: 991px) {
        margin-bottom: 6.5rem;
    }
}
#logoSection {
    @media (min-width: 991px) {
        margin-bottom: 6.7rem !important;
        padding-top: 3rem !important;
    }
}

/* Accordion */
#faqAccordion .accordion-body {
    @media (min-width: 991px) {
        font-size: 1.125rem !important;
    }
}
#faqAccordion ul li {
    @media (min-width: 991px) {
        font-size: 1.125rem;
    }
}
.noto-font {
    font-family: "Noto Sans", sans-serif;
}

/* NEW BLOCK FOR ICG */
/* Custom CheltenhamITCPro-Book Font here that was pulled from the LSI site, update or remove. */
@font-face {
    font-family: "CheltenhamITCPro-Book";
    src: url("webFonts/CheltenhamITCPro-Book/font.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Using AIC Blue just in case you have a variable that is already set, update or remove. */
    --aic-blue: #0519c2;
    --aic-blue-light: #176bfb;
    --aic-accent: #e8e8f8;
    --aic-peach: #fdf4ef;
    --body-font: "Noto Sans", sans-serif;
    --heading-font: "CheltenhamITCPro-Book", serif;

    /* Extra Colour */
    --aic-slate-blue: rgb(227, 227, 248);
    --aic-pink: rgb(252, 236, 232);
    --aic-red: rgb(220, 105, 81);
}

/* Custom Colours */
.aic-blue {
    background-color: var(--aic-blue) !important;
}
.aic-slate-blue {
    background-color: rgb(227, 227, 248) !important;
}

.aic-pink {
    background-color: rgb(252, 236, 232) !important;
}

.aic-red {
    background-color: rgb(220, 105, 81) !important;
}

.aic-light-blue {
    background-color: var(--aic-blue-light) !important;
}

/* This Body class can probably be removed, as on the live site this will already be set, update or remove. */
body {
    font-family: var(--body-font);
    font-size: 1rem;
    color: #000000;
}

/* This can probably be removed if this is already set, update or remove. */
h1,
h2,
h4 {
    font-family: var(--heading-font);
}

/* H2 font size that may need to be changed, update or remove. */
h2 {
    font-size: 2rem;

@media (min-width: 991px) {
    font-size: 2.625rem;
}
}

/* the H3 was using the body font family, so this will also need to be altered to match the live site if needs be, update or remove. */
h3 {
    font-family: "Noto Sans", sans-serif;

@media (min-width: 991px) {
    font-size: 1.5rem;
}
}

/* Custom H6 font size, update or remove. */
h6 {
    font-size: 1.125rem;
    line-height: 1.5rem;
}

/* Noto sans font to overide */
.noto-font {
    font-family: "Noto Sans", sans-serif;
}

/* Custom lead font size, update or remove. */
.lead {
    font-size: 1rem;

@media (min-width: 991px) {
    font-size: 1.625rem;
}
}

/* Buttons */
.btn-aic {
    background-color: var(--aic-blue);
    color: #fff;
    border: none;
    padding: 0.55rem 1.5rem;
    font-family: var(--body-font);
    transition: background 0.2s;
    width: 267px;
    height: 48px;
    align-content: center;
    font-size: 1.125rem;
    border-radius: 14px;
    transition: background-color 0.3s ease;
}
.btn:hover,
.btn-small:hover {
    background-color: color-mix(in srgb, var(--aic-blue), black 50%);
    color: #fff;
}
.aic-red.btn-aic:hover {
    background-color: color-mix(in srgb, var(--aic-red), black 50%);
}

.btn-small {
    display: block;
    font-size: 1rem;
    height: auto;
    padding: 0;
    text-decoration: none;
    text-align: center;
    width: 153px;
    background: #176bfb;
}

.small-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 10px;
}

/* Tabs Block */
#myTab {
@media (min-width: 991px) {
    margin-bottom: 100px;
}
}
#tabs-block .nav-tabs::-webkit-scrollbar {
    display: none;
}

#tabs-block .nav-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 1px;
    padding-right: 20px;
    border-color: #707070 !important;
}

#tabs-block .nav-item {
    padding-left: 1.563rem;
    padding-right: 1.563rem;
@media (min-width: 991px) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
}

#tabs-block .nav-link {
    color: #000000 !important;
    border: none !important;
    font-size: 0.938rem;
    padding-left: 0;
    padding-right: 0;
}

#tabs-block .nav-link.active {
    color: var(--aic-blue) !important;
    border: none;
    border-bottom: 2px solid var(--aic-blue) !important;
@media (min-width: 991px) {
    border: none !important;
}
}

#tabs-block .tab-img {
    height: 323px;
    object-fit: cover;

@media (min-width: 768px) {
    height: auto;
}
}

/* Carousel Block */
.swiper-pagination-bullets {
    bottom: -6px !important;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 8px !important;
}

.swiper-button-next,
.swiper-button-prev {
    background: #7b7979;
    padding: 10px;
    border-radius: 100px;
    position: absolute;
    right: 0px !important;
    opacity: 1 !important;
    display: none;
}

.swiper-button-next svg path,
.swiper-button-prev svg path {
    fill: white !important;
}

.swiper-button-prev {
    left: 0px !important;
}

/* Language Courses */
.languageCoursesBlock .swiper-slide {
    height: auto;
    /* Allows flex to work properly */
    display: flex;
}

/* Ensure the inner content card stretches to fill the slide height */
.languageCoursesBlock .swiper-slide > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Language Course - HTML Table */
.timetable-inner .cell {
    background-color: var(--aic-slate-blue);
    font-size: 1.2rem;
    font-weight: 100;
}
.top-scrollbar-wrapper .table-responsive {
    display: flex;
    flex-direction: column;
    transform: rotateX(180deg);
}

.top-scrollbar-wrapper .timetable-inner {
    transform: rotateX(180deg);
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
    margin: 0 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--aic-blue);
    border-radius: 10px;
}

@media (min-width: 800px) {
    .table-responsive {
        overflow-x: hidden !important;
        transform: none !important;
    }
    .timetable-inner {
        transform: none !important;
        width: 100%;
    }
}

@media (max-width: 799px) {
    .timetable-inner {
        min-width: 800px;
        padding-top: 20px;
    }
}