/* =========================================================
   EARLY GRIP SCHOOLS
   MOTHER / PARENT WEBSITE
   HOME PAGE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.eg-mother-site {

    --eg-blue: #1769A8;
    --eg-blue-dark: #104E7D;

    --eg-gold: #E6AA20;
    --eg-gold-light: #F7E9C2;

    --eg-ink: #1B2B3D;
    --eg-text: #4D6073;
    --eg-muted: #728294;

    --eg-paper: #F5F7F8;
    --eg-paper-blue: #EEF5F9;

    --eg-white: #FFFFFF;

    --eg-border: #DCE4EA;

}


/* =========================================================
   RESET FOR THIS PAGE
========================================================= */

.eg-mother-site,
.eg-footer {

    font-family: "Open Sans", sans-serif;

    color: var(--eg-text);

}

.eg-mother-site *,
.eg-footer * {

    box-sizing: border-box;

}

.eg-mother-site a,
.eg-footer a {

    text-decoration: none;

}

.eg-mother-site img {

    display: block;

    max-width: 100%;

}


/* =========================================================
   HEADER
========================================================= */

.eg-main-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    background: rgba(255,255,255,.94);

    border-bottom: 1px solid rgba(25,55,80,.08);

    backdrop-filter: blur(12px);

    transition: .3s ease;

}

.eg-main-header.scrolled {

    box-shadow: 0 8px 30px rgba(20,45,70,.09);

}


.eg-navigation {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   WORDMARK
========================================================= */

.eg-wordmark {

    display: inline-flex;

    flex-direction: column;

    color: var(--eg-ink);

    line-height: 1;

}

.eg-wordmark span {

    font-family: "Outfit", sans-serif;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: .5px;

}

.eg-wordmark small {

    margin-top: 5px;

    color: var(--eg-blue);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================================
   DESKTOP MENU
========================================================= */

.eg-desktop-menu {

    display: flex;

    align-items: center;

    gap: 7px;

}

.eg-desktop-menu a {

    position: relative;

    padding: 10px 15px;

    color: var(--eg-ink);

    font-size: 13px;

    font-weight: 600;

}

.eg-desktop-menu a:hover,
.eg-desktop-menu a.active {

    color: var(--eg-blue);

}

.eg-desktop-menu a.active::after {

    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 1px;

    height: 2px;

    background: var(--eg-gold);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.eg-menu-toggle {

    display: none;

    width: 43px;
    height: 43px;

    border: 1px solid var(--eg-border);

    border-radius: 8px;

    background: #fff;

    color: var(--eg-ink);

    font-size: 21px;

}


/* =========================================================
   MOBILE MENU
========================================================= */

.eg-mobile-menu {

    display: none;

    position: fixed;

    top: 78px;

    left: 0;
    right: 0;

    z-index: 999;

    padding: 12px 20px 20px;

    background: #fff;

    border-bottom: 1px solid var(--eg-border);

    box-shadow: 0 15px 30px rgba(20,45,70,.08);

}

.eg-mobile-menu.show {

    display: flex;

    flex-direction: column;

}

.eg-mobile-menu a {

    padding: 14px 4px;

    border-bottom: 1px solid #EDF1F4;

    color: var(--eg-ink);

    font-size: 14px;

    font-weight: 600;

}


/* =========================================================
   HERO
========================================================= */

.eg-hero {

    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #E9EEF1;

}


/* IMAGE */

.eg-hero-image {

    position: absolute;

    inset: 0;

    background-image:
        url("../images/hero/slide1.jpg");

    background-size: cover;

    background-position: center;

    transform: scale(1.02);

}


/* FADING */

.eg-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(244,247,248,.97) 0%,
            rgba(244,247,248,.94) 25%,
            rgba(244,247,248,.78) 43%,
            rgba(244,247,248,.38) 65%,
            rgba(244,247,248,.12) 100%
        );

}


/* CONTENT */

.eg-hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    padding-top: 90px;

}


.eg-hero-kicker {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 22px;

    color: var(--eg-blue-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

}

.eg-hero-kicker span {

    width: 24px;

    height: 1px;

    background: var(--eg-gold);

}


.eg-hero h1 {

    margin: 0;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(3rem, 6vw, 5.5rem);

    font-weight: 800;

    line-height: .99;

    letter-spacing: -2.8px;

}

.eg-hero h1 strong {

    display: block;

    color: var(--eg-blue);

    font-weight: 800;

}


.eg-hero-description {

    max-width: 610px;

    margin: 28px 0 0;

    color: #000508;

    font-size: 15px;

    line-height: 1.9;

}


.eg-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 30px;

}


/* BUTTON */

.eg-btn {

    min-height: 49px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 12px 20px;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 700;

    transition: .25s ease;

}


.eg-btn-primary {

    background: var(--eg-blue);

    border: 1px solid var(--eg-blue);

    color: #fff;

}

.eg-btn-primary:hover {

    background: var(--eg-blue-dark);

    color: #fff;

    transform: translateY(-2px);

}


.eg-btn-outline {

    background: rgba(255,255,255,.75);

    border: 1px solid rgba(25,55,80,.2);

    color: var(--eg-ink);

}

.eg-btn-outline:hover {

    background: #fff;

    color: var(--eg-blue);

    border-color: var(--eg-blue);

}


.eg-btn-dark {

    background: var(--eg-ink);

    border: 1px solid var(--eg-ink);

    color: #fff;

}

.eg-btn-dark:hover {

    background: #10202F;

    color: #fff;

}


/* HERO BOTTOM */

.eg-hero-bottom {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    border-top: 1px solid rgba(25,55,80,.08);

    background: rgba(255,255,255,.72);

    backdrop-filter: blur(8px);

}

.eg-hero-bottom-inner {

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    color: var(--eg-ink);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.eg-hero-bottom-inner i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--eg-gold);

}


/* =========================================================
   INTRO
========================================================= */

.eg-intro {

    padding: 95px 0;

    background: #F3F6F8;

    border-bottom: 1px solid #E2E8EC;

}

.eg-intro-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;

}

.eg-intro h2 {

    margin: 0;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 4vw, 3.2rem);

    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -1px;

}

.eg-intro h2 span {

    display: block;

    color: var(--eg-blue);

}

.eg-intro p {

    margin: 0 0 15px;

    color: var(--eg-text);

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.eg-section-label {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--eg-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


/* =========================================================
   SCHOOLS
========================================================= */

.eg-schools {

    padding: 105px 0;

    background: #FFFFFF;

}

.eg-section-heading {

    max-width: 690px;

    margin-bottom: 45px;

}

.eg-section-heading h2 {

    margin: 0;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 4vw, 3.2rem);

    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -1px;

}

.eg-section-heading h2 span {

    color: var(--eg-blue);

}

.eg-section-heading p {

    max-width: 570px;

    margin: 16px 0 0;

    color: var(--eg-muted);

    font-size: 14px;

    line-height: 1.8;

}


.eg-school-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;

}


.eg-school-card {

    overflow: hidden;

    background: #F6F8F9;

    border: 1px solid #E0E7EC;

    border-radius: 5px;

    transition: .3s ease;

}

.eg-school-card:hover {

    border-color: #C7D5DE;

    box-shadow: 0 18px 40px rgba(25,55,80,.09);

    transform: translateY(-4px);

}


.eg-school-image {

    height: 340px;

    overflow: hidden;

}

.eg-school-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;

}

.eg-school-card:hover .eg-school-image img {

    transform: scale(1.035);

}


.eg-school-content {

    padding: 31px 32px 34px;

}


.eg-school-stage {

    display: block;

    margin-bottom: 10px;

    color: var(--eg-blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


.eg-school-content h3 {

    margin: 0 0 13px;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: 24px;

    font-weight: 750;

    line-height: 1.25;

}


.eg-school-content p {

    max-width: 550px;

    margin: 0;

    color: var(--eg-muted);

    font-size: 13px;

    line-height: 1.85;

}


.eg-school-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 23px;

    color: var(--eg-blue);

    font-size: 11px;

    font-weight: 800;

}

.eg-school-link:hover {

    color: var(--eg-blue-dark);

}


/* =========================================================
   ABOUT
========================================================= */

.eg-about {

    padding: 105px 0;

    background: #EEF4F7;

}


.eg-about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 75px;

    align-items: center;

}


.eg-about-image {

    height: 450px;

    overflow: hidden;

    border-radius: 5px;

}

.eg-about-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.eg-about-content h2 {

    margin: 0 0 22px;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 4vw, 3.1rem);

    font-weight: 800;

    line-height: 1.13;

    letter-spacing: -1px;

}

.eg-about-content h2 span {

    display: block;

    color: var(--eg-blue);

}

.eg-about-content p {

    max-width: 580px;

    margin: 0 0 15px;

    color: var(--eg-text);

    font-size: 14px;

    line-height: 1.9;

}


.eg-about-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 25px;

}

.eg-about-list div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--eg-ink);

    font-size: 12px;

    font-weight: 700;

}

.eg-about-list i {

    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #DCECF5;

    color: var(--eg-blue);

    font-size: 11px;

}


/* =========================================================
   SCHOOL SELECTION
========================================================= */

.eg-selection {

    padding: 90px 0;

    background: #FFFFFF;

}

.eg-selection-box {

    padding: 50px;

    background: #F4F7F8;

    border: 1px solid #DFE7EB;

}

.eg-selection-heading {

    margin-bottom: 30px;

}

.eg-selection-heading h2 {

    margin: 0;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(1.9rem, 3vw, 2.7rem);

    font-weight: 800;

}

.eg-selection-heading h2 span {

    color: var(--eg-blue);

}


.eg-selection-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}


.eg-selection-item {

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 16px;

    padding: 20px;

    background: #FFFFFF;

    border: 1px solid #DDE5EA;

    color: var(--eg-ink);

    transition: .25s ease;

}

.eg-selection-item:hover {

    border-color: #B9CCD9;

    transform: translateY(-2px);

}


.eg-selection-number {

    color: var(--eg-gold);

    font-family: "Outfit", sans-serif;

    font-size: 17px;

    font-weight: 800;

}


.eg-selection-item strong {

    display: block;

    margin-bottom: 4px;

    font-size: 12px;

}

.eg-selection-item span {

    display: block;

    color: var(--eg-muted);

    font-size: 10px;

}

.eg-selection-item > i {

    color: var(--eg-blue);

}


/* =========================================================
   ADMISSIONS
========================================================= */

.eg-admissions {

    padding: 95px 0;

    background: #F8F3E7;

}


.eg-admissions-inner {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 80px;

    align-items: center;

}


.eg-admissions h2 {

    margin: 0 0 20px;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    line-height: 1.12;

}

.eg-admissions h2 span {

    display: block;

    color: var(--eg-blue);

}

.eg-admissions p {

    max-width: 570px;

    margin: 0;

    color: var(--eg-text);

    font-size: 14px;

    line-height: 1.9;

}


.eg-admission-links {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.eg-admission-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px;

    background: #FFFFFF;

    border: 1px solid #E4D9B8;

    color: var(--eg-ink);

    font-size: 12px;

    font-weight: 700;

}

.eg-admission-links a:hover {

    border-color: var(--eg-gold);

    transform: translateX(3px);

}

.eg-admission-links i {

    color: var(--eg-blue);

}


/* =========================================================
   CONTACT
========================================================= */

.eg-contact {

    padding: 100px 0;

    background: #F3F6F8;

}

.eg-contact-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

.eg-contact h2 {

    margin: 0 0 20px;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    line-height: 1.12;

}

.eg-contact h2 span {

    display: block;

    color: var(--eg-blue);

}

.eg-contact p {

    max-width: 580px;

    margin: 0;

    color: var(--eg-text);

    font-size: 14px;

    line-height: 1.9;

}


.eg-contact-links {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.eg-contact-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px;

    background: #FFFFFF;

    border: 1px solid #DCE5EA;

    color: var(--eg-ink);

}

.eg-contact-links a:hover {

    border-color: #B8CBD7;

    transform: translateX(3px);

}

.eg-contact-links span {

    font-size: 12px;

    font-weight: 700;

}

.eg-contact-links small {

    display: block;

    margin-bottom: 5px;

    color: var(--eg-blue);

    font-size: 8px;

    letter-spacing: 1.4px;

}

.eg-contact-links i {

    color: var(--eg-blue);

}


/* =========================================================
   FINAL CTA
========================================================= */

.eg-final {

    padding: 105px 0;

    background: #EAF2F6;

    text-align: center;

}


.eg-final-content {

    max-width: 760px;

    margin: auto;

}


.eg-final h2 {

    margin: 0;

    color: var(--eg-ink);

    font-family: "Outfit", sans-serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    font-weight: 800;

    line-height: 1.1;

}

.eg-final h2 span {

    display: block;

    color: var(--eg-blue);

}

.eg-final p {

    margin: 18px auto 28px;

    color: var(--eg-text);

    font-size: 14px;

}

.eg-final-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}


/* =========================================================
   FOOTER
========================================================= */

.eg-footer {

    background: #172736;

    color: #D5DEE5;

}

.eg-footer-top {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 70px;

    padding: 60px 0 50px;

}

.eg-footer-name {

    display: inline-block;

    margin-bottom: 15px;

    color: #FFFFFF;

    font-family: "Outfit", sans-serif;

    font-size: 18px;

    font-weight: 800;

}

.eg-footer-top p {

    max-width: 390px;

    margin: 0;

    color: #AEBCC7;

    font-size: 11px;

    line-height: 1.8;

}

.eg-footer h4 {

    margin: 0 0 16px;

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 700;

}

.eg-footer-top > div > a:not(.eg-footer-name) {

    display: block;

    margin-bottom: 9px;

    color: #AEBCC7;

    font-size: 11px;

}

.eg-footer-top > div > a:not(.eg-footer-name):hover {

    color: #FFFFFF;

}

.eg-footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,.1);

    color: #91A1AD;

    font-size: 9px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .eg-desktop-menu {

        display: none;

    }

    .eg-menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .eg-hero {

        min-height: 720px;

    }

    .eg-hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(247,250,251,.97),
                rgba(247,250,251,.75)
            );

    }

    .eg-intro-inner,
    .eg-about-grid,
    .eg-admissions-inner,
    .eg-contact-inner {

        gap: 45px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .eg-navigation {

        min-height: 70px;

    }

    .eg-mobile-menu {

        top: 70px;

    }

    .eg-wordmark span {

        font-size: 17px;

    }

    .eg-hero {

        min-height: 720px;

        align-items: flex-start;

    }

    .eg-hero-image {

        background-position: 63% center;

    }

    .eg-hero-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(244,247,248,.82) 0%,
                rgba(244,247,248,.65) 48%,
                rgba(20,35,48,.28) 100%
            );

    }

    .eg-hero-content {

        padding-top: 145px;

    }

    .eg-hero h1 {

        font-size: 3rem;

        letter-spacing: -1.5px;

    }

    .eg-hero-description {

        font-size: 13px;

    }

    .eg-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .eg-hero-actions .eg-btn {

        width: 100%;

    }

    .eg-hero-bottom-inner {

        min-height: 48px;

        gap: 9px;

        font-size: 8px;

    }

    .eg-intro,
    .eg-schools,
    .eg-about,
    .eg-contact {

        padding: 75px 0;

    }

    .eg-selection,
    .eg-admissions,
    .eg-final {

        padding: 70px 0;

    }

    .eg-intro-inner,
    .eg-about-grid,
    .eg-admissions-inner,
    .eg-contact-inner {

        grid-template-columns: 1fr;

    }

    .eg-school-grid,
    .eg-selection-grid {

        grid-template-columns: 1fr;

    }

    .eg-school-image {

        height: 260px;

    }

    .eg-about-image {

        height: 320px;

    }

    .eg-selection-box {

        padding: 30px 20px;

    }

    .eg-footer-top {

        grid-template-columns: 1fr 1fr;

        gap: 40px;

    }

    .eg-footer-top > div:first-child {

        grid-column: 1 / -1;

    }

    .eg-footer-bottom {

        flex-direction: column;

        align-items: flex-start;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .eg-hero h1 {

        font-size: 2.5rem;

    }

    .eg-hero-description {

        font-size: 12px;

    }

    .eg-school-content {

        padding: 25px 22px 28px;

    }

    .eg-school-content h3 {

        font-size: 21px;

    }

    .eg-footer-top {

        grid-template-columns: 1fr;

    }

    .eg-footer-top > div:first-child {

        grid-column: auto;

    }

}