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

.hero-container {
    display: grid;
    min-height: 912px;
    z-index: 2;
    background-color: black;
}


/* =========================================================
   HERO BACKGROUND IMAGE
========================================================= */

.hero-cover {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: 100%;
    opacity: var(--hero-cover-opacity);
    background-image: url("../img/hero-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}


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

.hero-inner {
    display: grid;
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: 100%;
    min-height: 512px;
    z-index: 2;
    position: relative;

}


/* =========================================================
   BLACK 50% OVERLAY
========================================================= */

.hero-inner::before {
    content: "";
    /*    background-color: black;
    */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}


/* Remove the old gradient overlay */

.hero-inner::after {
    display: none;
}


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

.hero-content {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(100%, 800px);

    padding: 64px;
    box-sizing: border-box;

    display: grid;
    gap: 16px;

    z-index: 3;
}

@media (max-width: 767px) {

    .hero-content {

        position: relative;

        top: auto;
        left: auto;

        transform: none;

        width: 100%;

        padding: 40px 20px;

        margin-top: 40px;

        box-sizing: border-box;

        z-index: 3;
        align-content: baseline;
    }

}

@media (max-width: 767px) {
    .hero-container {
        min-height: 512px;
    }

    .hero-inner {
        min-height: 512px;
    }

    .hero-content {
        width: 100%;
        padding: 32px 20px;
    }

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

/* =========================================================
   HERO CONTENT TEXT
========================================================= */

.hero-content :is(h1, h2, h3, h4, p) {
    justify-self: center;
    text-align: center;
    color: #fff;
}



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

.hero-content h1 {
    font-weight: 600;
    font-size: 60px;
    color: transparent;
    -webkit-text-stroke: 2px white;

}

.hero-content h3 {
    font-size: 1.17em;
}

@media (max-width: 767px) {


    .hero-content h1 {
        font-weight: 600;
        font-size: 40px;
        color: transparent;
        -webkit-text-stroke: 1px white;

    }
    
    .hero-content h3 {
        font-size: 13px;
    }

}

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

.hero-content .btn {
    margin-top: 32px;
}


/* =========================================================
   BUTTON
========================================================= */

.btn {
    display: grid;
    text-decoration: none;
    justify-self: center;
}


/* Button background hover effect */

.btn::after {
    content: "";

    grid-row: 1;
    grid-column: 1;

    background-color: var(--colour1);

    opacity: 0;

    border-radius: 24px;

    transition:
        cubic-bezier(0.175, 0.885, 0.32, 1.275) all .33s;
}


/* Button hover */

.btn:hover::after {
    transform: scale(1.2);
    opacity: 1;
}


/* Button text hover */

.btn:hover h4 {
    transform: scale(1.2);
    color: #fff;
}


/* Button text */

.btn h4 {
    transition:
        cubic-bezier(0.175, 0.885, 0.32, 1.275) all .33s;

    grid-row: 1;
    grid-column: 1;

    z-index: 2;

    color: var(--colour1);

    padding: 12px 24px;
    box-sizing: border-box;

    border: solid 2px var(--colour1);
    border-radius: 24px;
}


/* =========================================================
   SUB HERO CONTENT
========================================================= */
/* =========================================================
   INNER PAGE HERO CONTENT
========================================================= */

.sub-hero-content {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

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

    box-sizing: border-box;

    z-index: 3;
    pointer-events: none;
}

.sub-hero-content h1 {
    margin: 0;
    padding: 0;

    width: 100%;

    text-align: center;
    color: #fff;
}

.nav-container {
    position: relative;
    z-index: 10;
}

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

@media (min-width: 992px) {
    .hero-content {
        /* Add desktop adjustments here if required */
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

/*
@media (min-width: 1200px) {
    .hero-content {
        margin-top: 128px;
    }
}*/


/* =========================================================
   SUB HERO - LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {
    .sub-hero .hero-inner::after {
        display: none;
    }
}


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

@media (max-width: 767px) {
    .hero-container {
        min-height: 512px;
    }

    .hero-inner {
        min-height: 512px;
    }

    .hero-content {
        width: 100%;
        padding: 32px 20px;
        /*        margin-top: 32px;*/
    }

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