/* ---------------------------------- 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 path {
    stroke-dasharray: 611.987px;
    stroke-dashoffset: 611.987px;
    animation: line-anim 5s linear forwards infinite;
}

@keyframes line-anim {
    0% {
        stroke-dashoffset: 611.987px;
    }

    5% {
        stroke-dashoffset: 611.987px;
    }

    50% {
        stroke-dasharray: 611px;
        stroke-dashoffset: 0;
    }

    55% {
        stroke-dasharray: 611px;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 611.987px;
    }
}



/* -------------------------------- 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: 20px;
    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-right {
    height: 150px;
    margin-top: 200px;
    width: 2px;
    border-radius: 100rem;
    background: white;

}

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

.whiteline-mother {
    height: 150px;
    margin-top: 400px;
    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-zahra {
    height: 150px;
    margin-top: 420px;
    width: 2px;
    border-radius: 100rem;
    background: white;
}

.whiteline-three {
    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-cpp {
    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-tannous {
    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-kfifan {
    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;
}

.whiteline-stlouis {
    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;
    align-items: center;
    justify-content: end;
    cursor: pointer;
}

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


/* -------------------------------- Buildings ------------------------------- */
.basha {
    background: url(./images/basha.jpg) no-repeat;
    background-size: cover;
    height: 466px;
    width: 683px;
    margin-top: 230px;
    margin-left: 70px;
}

.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;
}

.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%;
}

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

.wafta {
    background: url(./images/wafta.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;
}

.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%;
}

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

.kassab {
    background: url(./images/Villa\ Kassab\ 01.PNG) 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;
}

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

.kfifan {
    margin-top: 100px;
    background: url(./images/kfifan.jpg) 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%;
}

.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;
}

/* --------------------------------- 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: space-between;
    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-right {
        margin-left: 0;
        font-size: 35px;
    }
    
    .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%; 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;
    }
}