/* ---------------------------------- Fonts --------------------------------- */
@font-face {
    font-family: bahn;
    src: url(../fonts/BAHNSCHRIFT.TTF);
}


@font-face {
    font-family: bahn-light;
    src: url(../fonts/BAHNSCHRIFT\ 14.TTF);
}


@font-face {
    font-family: constania;
    src: url(../fonts/constan.ttf);
}

/* -------------------------------- ScrollBar ------------------------------- */
::-webkit-scrollbar {
    width: 14px;
    height: 18px;
    transition: all 500ms ease;
}

::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 7px;

    background-color: #a3a3a3;
    box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05),
        inset 1px 1px 0px rgba(0, 0, 0, 0.05);
    transition: all 200ms ease;
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover {
    background: #7d7d7d;
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 7px;
    box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05),
        inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

/* ------------------------------- Back to Top ------------------------------ */
#button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7E0018;
    width: 36px;
    height: 36px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;

}

#button:hover {
    cursor: pointer;
    background-color: #333;
}

#button:active {
    background-color: #555;
}

#button.show {
    opacity: 1;
    visibility: visible;
}

/* -------------------------------- No class -------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: bahn;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: overlay;
    transition: all 500ms ease;
    scroll-behavior: smooth;
}

/* --------------------------------- Loader --------------------------------- */
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


#loader {
    width: 260px;
    max-width: 80vw;
    height: auto;
}

/* Each path has pathLength="1", so every letter traces in sync */
#loader path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    fill: #fff;
    animation: line-anim 5s linear infinite;
}

@keyframes line-anim {
    0%,
    5% {
        stroke-dashoffset: 1;
        fill-opacity: 0;
    }

    45% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }

    55%,
    60% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }

    70% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }

    100% {
        stroke-dashoffset: 1;
        fill-opacity: 0;
    }
}



/* -------------------------------- No Class -------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #18191B;
    height: 100vh;
    overflow-x: hidden;
    font-family: bahn;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

ul {
    padding: 0;
}


/* ----------------------------- Navigation Bar ----------------------------- */
.nav-item {
    color: white;
}

.logo {
    position: absolute;
    left: 50%;
    top: 28px;
    width: 180px;
    height: auto;
    transform: translateX(-50%);
    z-index: 9998;

}

/* ---------------------------------- Main ---------------------------------- */
main {
    margin-top: 150px;
}

.text {
    color: white;
    font-family: bahn;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 24px;
    margin-right: -100px;
}

.text-right {
    color: white;
    font-family: bahn;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 24px;
    margin-left: -100px;

}

/* ---------------------------------- Line ---------------------------------- */
.line {
    width: 2px;
    border-radius: 100rem;
    height: 9100px;
    left: 50%;
    position: absolute;
    background-color: #707070;
    top: 20%;
}

.whiteline-jeddahaviationterminal {
    height: 150px;
    margin-top: 200px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-berbara {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-kfifan {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-sirohotel {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-moroccomallrabat {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-moroccomallmarrakech {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-alakaryaresidence {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-sportsboulevard {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-shuraisland {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-alpha {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-creoliscentre {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-saintespirithospital {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-twintowersdoha {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-zahra {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-mother {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-tannous {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-moroccomallcasablanca {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-etccernay {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-saintpaulclinic {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-stbarthschool {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-achereswwtp {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-villejuifreservoirs {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-lehavrewwtp {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-versailleschantiers {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-cpp {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-stlouis {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-saintabdachurch {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-basha {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-assaf {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-wafta {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-threevillas {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-fadel {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-satellity {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-kassab {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-accari {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

/* ------------------------------ Black Overlay ----------------------------- */
.blackoverlay {
    background: rgba(0, 0, 0, 0.201);
    height: 466px;
    width: 683px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: end;
    cursor: pointer;
}

.blackoverlay-right {
    background: rgba(0, 0, 0, 0.201);
    height: 466px;
    width: 683px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: start;
    cursor: pointer;
}


/* -------------------------------- Buildings ------------------------------- */
.jeddahaviationterminal {
    background: url(../images/terminal-aviation-privee-jeddah-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.berbara {
    margin-top: 100px;
    background: url(./images/berbarahills.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.kfifan {
    background: url(./images/kfifan.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.sirohotel {
    margin-top: 100px;
    background: url(../images/siro-hotel-riyadh-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.moroccomallrabat {
    background: url(../images/morocco-mall-rabat-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.moroccomallmarrakech {
    margin-top: 100px;
    background: url(../images/morocco-mall-marrakech-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.alakaryaresidence {
    background: url(../images/alakarya-residence-riyadh-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.sportsboulevard {
    margin-top: 100px;
    background: url(../images/sports-boulevard-riyadh-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.shuraisland {
    background: url(../images/shura-island-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.alpha {
    margin-top: 100px;
    background: url(./images/alpha.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.creoliscentre {
    background: url(../images/centre-creolis-martinique-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.saintespirithospital {
    margin-top: 100px;
    background: url(../images/centre-hospitalier-saint-esprit-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.twintowersdoha {
    background: url(../images/twin-towers-doha-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.zahra {
    margin-top: 100px;
    background: url(./images/zahra.jpeg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.mother {
    background: url(./images/mothervilla.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.tannous {
    margin-top: 100px;
    background: url(./images/tannous.jpeg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.moroccomallcasablanca {
    background: url(../images/morocco-mall-casablanca-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.etccernay {
    margin-top: 100px;
    background: url(../images/etc-cernay-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.saintpaulclinic {
    background: url(../images/clinique-saint-paul-martinique-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.stbarthschool {
    margin-top: 100px;
    background: url(../images/groupe-scolaire-st-barth-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.achereswwtp {
    background: url(../images/station-epuration-acheres-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.villejuifreservoirs {
    margin-top: 100px;
    background: url(../images/reservoirs-villejuif-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.lehavrewwtp {
    background: url(../images/station-epuration-le-havre-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.versailleschantiers {
    margin-top: 100px;
    background: url(../images/gare-versailles-chantiers-main.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.cpp {
    background: url(./images/cpp.jpeg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.stlouis {
    margin-top: 100px;
    background: url(./images/stlouis.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.saintabdachurch {
    background: url(../images/eglise-saint-abda-kfifan-main.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.basha {
    margin-top: 100px;
    background: url(./images/basha.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.assaf {
    background: url(./images/assaf.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.wafta {
    margin-top: 100px;
    background: url(./images/wafta.jpg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.threevillas {
    background: url(./images/threevillas.png) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.fadel {
    margin-top: 100px;
    background: url(./images/fadelvilla.jpeg) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.satellity {
    background: url(./images/satellity.jpeg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

.kassab {
    margin-top: 100px;
    background: url(./images/Villa\ Kassab\ 01.PNG) no-repeat;
    background-size: cover;
    margin-right: 70px;
    background-position: 50% 50%;
    height: 466px;
    width: 683px;
    float: right;
    display: block;
}

.accari {
    background: url(./images/accari.jpeg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 100px;
    margin-left: 70px;
    background-position: 50% 50%;
}

/* ---------------------------- Project Location ---------------------------- */
.project-location {
    flex-basis: 100%;
    margin-top: 10px;
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/* --------------------------------- Foooter -------------------------------- */
footer {
    margin-top: 150px;
    background: #BFBFBF;
    color: black;
    display: flex;
    width: 100.4vw;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
}

.footer-ul {
    display: flex;
    color: black;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 0.5px;
    margin-bottom: -20px;
}

.footer-li {
    margin-left: 20px;
    cursor: pointer;
}

.tos-wrapper {
    display: flex;
    margin-top: 40px;
    color: black;
    font-weight: 100;
    font-size: 13px;
}

.cookies-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 300px;
    color: black;
    font-size: 13px;
}

.cpp-txt {
    width: 300px;
    text-align: center;
    margin-left: -150px;
}

/* ----------------------------- responsiveness ----------------------------- */
@media (max-width: 1744px) {

    .text {
        margin-right: 0;
        font-size: 35px;
        text-align: center;
    }

    .text-right {
        margin-left: 0;
        font-size: 35px;
        text-align: center;
    }

    .blackoverlay-right {
        justify-content: center;
    }

    .blackoverlay {
        justify-content: center;
    }
}

@media (max-width: 1590px) {
    .main {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .line {
        display: none;
    }

    .box {
        display: flex;
        align-content: center;
        justify-content: center;
        margin-bottom: 0;
        margin-top: 0;
    }

    .box-left {
        margin-left: 0;
        width: 100vw;
        height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0;
    }

    .box-right {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .box-inner-right {
        margin-right: 0;
        width: 100vw;
        height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .blackoverlay {
        background: rgba(0, 0, 0, 0.201);
        height: 50vh;
        width: 100vw;
        cursor: pointer;
    }

    .blackoverlay-right {
        background: rgba(0, 0, 0, 0.201);
        height: 50vh;
        width: 100vw;
        cursor: pointer;
    }

    .basha {
        background-position: 30% 50%;
    }

    .cpp-txt {
        margin-left: 0;
    }
}

@media (min-width: 1100px) {
    .menu-wrapper {
        display: none;
    }
}

@media (max-width: 1100px) {
    .logo {
        display: none;
    }
}

@media (max-width: 1367px) {
    footer {
        margin-top: 300px;
    }
}

@media (max-width: 1270px) {
    .footer-ul {
        display: none;
    }
}

@media (max-width: 1100px) {
    .cookies-wrapper {
        display: none;
    }

    .footer-redlogo {
        margin-bottom: 0;
    }
}

@media (max-width: 870px) {
    .tos-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 100vw;
        margin-top: 120px;
    }

    .privacy {
        margin-left: 20px;
    }

    .copyright {
        margin-left: -80px;
    }

    .footer-redlogo {
        display: none;
    }

    .footer-mainlogo {
        margin-top: -20px;
    }
}



@media (max-width: 1550px) {
    .services-txtwrap {
        margin-left: 50px;
    }

    .tos-wrapper {
        flex-direction: column;
    }

    .privacy {
        margin-left: 0;
    }
}

.footer-mainlogo {
    position: absolute;
    left: 50%;
    width: 170px;
    height: auto;
    transform:
        translateX(-50%);
}

.privacy {
    margin-left: 20px;
}

@media (max-width: 500px) {
    footer {
        margin-top: 300px;
    }

    .tos-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100vw;
        margin-top: 120px;
    }


    .copyright {
        margin-left: -80px;
    }

    .privacy {
        margin-left: -80px;
    }
}

@media (min-width: 1101px) {
    .line {
        display: none !important;
    }

    .main {
        width: min(1500px, calc(100vw - 120px));
        margin: 0 auto;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px;
    }

    .main>a {
        display: block;
        width: 100%;
    }

    .main>a>.box-left,
    .main>a>.box-right,
    .main>a>.box-right>.box-inner-right {
        width: 100% !important;
        height: clamp(300px, 29vw, 440px) !important;
        margin: 0 !important;
        float: none !important;
    }

    .main>a>.box-left,
    .main>a>.box-right>.box-inner-right {
        background-position: 50% 50% !important;
        background-size: cover !important;
    }

    .main>a .blackoverlay,
    .main>a .blackoverlay-right {
        width: 100% !important;
        height: 100% !important;
        justify-content: center !important;
    }

    .main>a .text,
    .main>a .text-right {
        margin: 0 !important;
        text-align: center;
        font-size: clamp(20px, 1.7vw, 28px);
    }

    .main>a .cpp-txt {
        width: min(78%, 380px);
        margin: 0 !important;
    }
}

/* Earlier breakpoints pushed the footer hundreds of pixels down, leaving an empty band */
footer {
    margin-top: 150px;
}

@media (max-width: 800px) {
    footer {
        margin-top: 80px;
    }
}