@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --reit-primary: #223F95;
    --reit-secondary: #E78431;
    --reit-typo: #707070;
    --reit-black: #000000;
    --reit-white: #ffffff;
    --reit-dark-grey: #4D4D4D;
    --reit-light-grey: #707070;
    --reit-banner-bg: #e6e6e6;
    --reit-grid: 1366px;
    --reit-space-4: 4px;
    --reit-space-8: 8px;
    --reit-space-10: 10px;
    --reit-space-12: 12px;
    --reit-space-14: 14px;
    --reit-space-16: 16px;
    --reit-space-18: 18px;
    --reit-space-20: 20px;
    --reit-space-24: 24px;
    --reit-space-30: 30px;
    --reit-space-36: 36px;
    --reit-space-42: 42px;
    --reit-space-48: 48px;
    --reit-space-54: 54px;
    --reit-space-60: 60px;
    --reit-space-80: 80px;
    --reit-montserrat: "Montserrat", sans-serif;
}

.owl-carousel {
    touch-action: manipulation;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

body,
html {
    font-weight: 400;
    color: var(--reit-white);
    letter-spacing: normal;
    background-color: var(--reit-white);
    font-family: var(--reit-montserrat);
    letter-spacing: normal;
    scroll-behavior: smooth;
    scroll-padding-top: 75px;
}

main,
section,
footer {
    width: 100%;
    height: auto;
}
.reit__grid {
    width: 100%;
    height: auto;
    max-width: var(--reit-grid);
    margin-inline: auto;
}
.reit--grid--padding {
    padding-left: var(--reit-space-20);
    padding-right: var(--reit-space-20);
}
main {
    padding-top: 75px;
}
section {
    color: var(--reit-black);
    h2.section--title {
        font: 700 36px/44px var(--reit-montserrat);
        color: var(--reit-primary);
        margin-bottom: var(--reit-space-20);
        text-align: center;
        span {
            color: var(--reit-secondary);
        }
    }
    h5.section--subtitle {
        max-width: 900px;
        font: 500 20px/24px var(--reit-montserrat);
        color: var(--reit-typo);
        margin-bottom: var(--reit-space-20);
        color: var(--reit-dark-grey);
        text-align: center;
        margin-inline: auto;
    }

}
.section--padding {
    padding: var(--reit-space-80) 0;
}
img.img--fluid {
    max-width: 100%;
    height: auto;
}
.line--height--0 {
    line-height: 0;
}
/* Header */
header {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 90px;
        background-color: var(--reit-secondary);
        z-index: -1;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }
    .header--wrapper {
        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-start;
        .logo {
            width: 190px;
            height: 90px;
            border-radius: 0 0 20px 20px;
            background-color: var(--reit-white);
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                height: 78px;
            }
        }
        nav {
            flex: 1;
            height: 90px;
            display: flex;
            align-items: stretch;
            ul {
                padding: 0 0 0 140px;
                margin: 0;
                display: flex;
                align-items: stretch;
                list-style: none;
                li {
                    width: max-content;
                    padding: 0 var(--reit-space-20);
                    display: flex;
                    align-items: center;
                    background-color: rgba(255, 255, 255, 0);
                    transition: all 0.3s ease-in-out;
                    -webkit-transition: all 0.3s ease-in-out;
                    -moz-transition: all 0.3s ease-in-out;
                    -ms-transition: all 0.3s ease-in-out;
                    -o-transition: all 0.3s ease-in-out;
                    a {
                        font: 600 20px/24px var(--reit-montserrat);
                        color: var(--reit-white);
                        text-decoration: none;
                    }
                    &.active,
                    &:hover {
                        background-color: rgba(255, 255, 255, 1);
                        a {
                            color: var(--reit-primary);
                        }
                    }
                }
            }
        }
        .responsive__menu {
            flex: 1;
            display: none;
            position: relative;
            .hamburger {
                width: 24px;
                height: 14px;
                position: absolute;
                right: 0;
                top: 38px;
                z-index: 10;
                -webkit-transform: rotate(0);
                -moz-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0);
                -webkit-transition: 0.5s ease-in-out;
                -moz-transition: 0.5s ease-in-out;
                -o-transition: 0.5s ease-in-out;
                transition: 0.5s ease-in-out;
                cursor: pointer;
                input {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    opacity: 0;
                    z-index: 10;
                }
                span {
                    display: block;
                    position: absolute;
                    height: 2px;
                    width: 20px;
                    background: var(--reit-white);
                    border-radius: 9px;
                    opacity: 1;
                    left: 0;
                    -webkit-transform: rotate(0);
                    -moz-transform: rotate(0);
                    -o-transform: rotate(0);
                    transform: rotate(0);
                    -webkit-transition: 0.25s ease-in-out;
                    -moz-transition: 0.25s ease-in-out;
                    -o-transition: 0.25s ease-in-out;
                    transition: 0.25s ease-in-out;
                }

                input:checked~span {
                    background: var(--reit-white);
                }

                span:nth-child(2) {
                    top: 0;
                }

                span:nth-child(3),
                span:nth-child(4) {
                    top: 6px;
                }

                span:nth-child(5) {
                    top: 12px;
                }

                input:checked~span:nth-child(2) {
                    top: 14px;
                    width: 0%;
                    left: 50%;
                }

                input:checked~span:nth-child(3) {
                    width: 100%;
                    -webkit-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                    -o-transform: rotate(45deg);
                    transform: rotate(45deg);
                }

                input:checked~span:nth-child(4) {
                    width: 100%;
                    -webkit-transform: rotate(-45deg);
                    -moz-transform: rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                }

                input:checked~span:nth-child(5) {
                    top: 18px;
                    width: 0%;
                    left: 50%;
                }
            }
            .responsive--menu--wrapper {
                position: fixed;
                width: calc(100% - 20px);
                max-width: 400px;
                height: calc(100dvh - 90px);
                background-color: var(--reit-white);
                right: -100%;
                top: 90px;
                z-index: 9;
                transition: all 0.3s ease-in-out;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                padding: var(--reit-space-24) 0;
                box-shadow: -8px 0 24px rgba(0, 0, 0, 0.05);
                ul {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    li {
                        padding: var(--reit-space-16) var(--reit-space-20);
                        user-select: none;
                        transition: all 0.3s ease-in-out;
                        -webkit-transition: all 0.3s ease-in-out;
                        -moz-transition: all 0.3s ease-in-out;
                        -ms-transition: all 0.3s ease-in-out;
                        -o-transition: all 0.3s ease-in-out;
                        &.active {
                            background-color: var(--reit-primary);
                            color: var(--reit-white);
                        }
                        a {
                            display: block;
                            font: 600 18px/24px var(--reit-montserrat);
                            color: var(--reit-dark-grey);
                            text-decoration: none;
                        }
                        &.active {
                            a {
                                color: var(--reit-white);
                            }
                        }
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                    }
                }
            }

            &:has(.hamburger input:checked) {
                .responsive--menu--wrapper {
                    right: 0;
                }
            }
        }
    }

}
.bgs--blue {
    background-color: var(--reit-primary);
}
.bgs--grey {
    background-color: var(--reit-banner-bg);
    .slide--title {
        color: var(--reit-primary) !important;
        strong {
            color: var(--reit-primary) !important;
        }
    }
}
.hero__banner {
    width: 100%;
    height: auto;
    min-height: auto;
    .hero--slider--item {
        width: 100%;
        height: auto;
        /* min-height: 100dvh; */
        position: relative;
        .slide--content--wrapper {
            width: 50%;
            height: auto;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 2;
            padding-left: var(--reit-space-20);
            .slide--title {
                max-width: 700px;
                font: 600 48px/56px var(--reit-montserrat);
                color: var(--reit-white);
                margin-bottom: var(--reit-space-10);
                strong {
                    color: var(--reit-secondary);
                    font-weight: 900;
                }
            }
            img.img--reit {
                margin-top: var(--reit-space-24);
                max-width: 300px;
            }
        }
    }
    .hero--carousel {
        .owl-dots {
            position: absolute;
            width: 100%;
            padding-bottom: var(--reit-space-20);
            .owl-dot {
                span {
                    width: 16px;
                    height: 16px;
                    background-color: transparent !important;
                    border: 2px solid var(--reit-secondary);
                    margin: 5px;
                }
                &.active span {
                    background-color: var(--reit-primary) !important;
                }
            }
        }
    }
}

/* Key Pointers Section */
.key__wrapper {
    min-height: auto;
    background-color: var(--reit-white);
    .key--pointers {
        width: 100%;
        height: auto;
        margin-top: var(--reit-space-42);
        display: flex;
        flex-wrap: wrap;
        gap: var(--reit-space-24);
        .key--point {
            width: calc(50% - 12px);
            height: auto;
            display: flex;
            align-items: center;
            gap: var(--reit-space-24);
            img {
                max-width: 60px;
            }
            .key--point--wrap {
                flex: 1;
                .key--point--title {
                    font: 800 42px/54px var(--reit-montserrat);
                    color: var(--reit-primary);
                }
                .key--point--details {
                    font: 500 24px/30px var(--reit-montserrat);
                    color: var(--reit-dark-grey);
                }
            }

        }
    }
    .key--footer {
        width: 100%;
        height: auto;
        text-align: center;
        font: 600 24px/30px var(--reit-montserrat);
        color: var(--reit-dark-grey);
        margin-top: var(--reit-space-24);
    }
}
/* What Section */
.what__wrapper {
    padding: var(--reit-space-80) 0 0;
    background-color: var(--reit-white);
    min-height: auto;
    .what--row {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        .what--col {
            width: 55%;
            height: auto;
            min-height: 100px;
            line-height: 0;
            .what--left {
                max-width: 520px;
            }
            &:first-child {
                width: 45%;
                padding-left: calc(calc(calc(100% - var(--reit-grid)) / 2) + 20px);
            }
            h2, h5 {
                text-align: left;
            }
            .what--orange {
                width: max-content;
                height: 45px;
                background-color: var(--reit-secondary);
                padding: var(--reit-space-4) var(--reit-space-16);
                display: flex;
                align-items: center;
                font: 600 20px/24px var(--reit-montserrat);
                font-style: italic;
                color: var(--reit-white);
                position: relative;
                margin-top: var(--reit-space-36);
                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: -200px;
                    background-color: var(--reit-secondary);
                    width: 200px;
                    height: 45px;
                    z-index: 0;
                }
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: -20px;
                    width: 100%;
                    height: 20px;
                    background-image: url('../img/shadow.png');
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
        }
    }

}

/* Why Section */
.why__wrapper {
    min-height: auto;
    background-image: url('../img/why-REIT-bg-desktop.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    .why--carousel {
        width: 100%;
        max-width: 1000px;
        height: auto;
        margin-inline: auto;
        margin-top: var(--reit-space-42);
        .owl-stage-outer {
            width: calc(100% - 21px);
            .owl-stage {
                display: flex;
                align-items: stretch;
                .owl-item {
                    height: auto;
                    .item {
                        height: 100%;
                    }
                }
            }
        }
        .why--carousel--item {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--reit-space-16);
            padding: 0 var(--reit-space-30);
            position: relative;
            &::after {
                content: '';
                width: 1px;
                height: 100%;
                background-color: var(--reit-primary);
                position: absolute;
                right: -1px;
                top: 0;
                z-index: 1;
            }
            .why--carousel--title {
                min-height: 60px;
                font: 700 24px/30px var(--reit-montserrat);
                color: var(--reit-primary);
            }
            p {
                font: 500 18px/24px var(--reit-montserrat);
                color: var(--reit-light-grey);
                margin: 0;
            }
            img {
                max-width: 70px;
            }
        }
        .owl-dots {
            .owl-dot {
                margin-top: var(--reit-space-24) !important;
                span {
                    width: 16px;
                    height: 16px;
                    background-color: transparent !important;
                    border: 2px solid var(--reit-secondary);
                    margin: 5px;
                }
                &.active span {
                    background-color: var(--reit-primary) !important;
                    border-color: var(--reit-primary);
                }
            }
        }
        .owl-nav {
            width: calc(100% + 300px);
            margin-top: 0;
            position: absolute;
            top: 50%;
            left: -150px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            button.owl-next,
            button.owl-prev {
                background-color: transparent;
            }
        }
    }
}

/* Footer */
footer {
    min-height: auto;
    background-image: url('../img/why-REIT-bg-desktop.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    .footer--row {
        width: 100%;
        height: auto;
        display: flex;
        align-items: stretch;
        .footer--col {
            width: 100%;
            height: auto;
            flex: 1;
            &:first-child {
                max-width: 400px;
                border-right: 1px solid var(--reit-primary);
                padding-right: var(--reit-space-36);
                margin-right: var(--reit-space-36);
                display: flex;
                align-items: center;
            }
            &.full--width {
                max-width: 100% !important;
                padding: 0;
                margin: 0;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: var(--reit-space-24);
                margin-top: var(--reit-space-36);
                span {
                    font: 600 18px/24px var(--reit-montserrat);
                    color: var(--reit-dark-grey);
                }
            }
            .footer--socials {
                width: max-content;
                display: flex;
                align-items: center;
                gap: var(--reit-space-16);
            }
            .footer--right {
                width: 100%;
                height: auto;
                .footer--title {
                    font: 800 20px/24px var(--reit-montserrat);
                    color: var(--reit-primary);
                    margin-bottom: var(--reit-space-10);
                }
                p {
                    font: 600 16px/20px var(--reit-montserrat);
                    color: var(--reit-light-grey);
                    strong {
                        font-weight: 800;
                    }
                }
                .footer--logo--container {
                    width: 100%;
                    max-width: 632px;
                    height: auto;
                    margin-top: var(--reit-space-24);
                    .footer--logos {
                        width: 100%;
                        height: auto;
                        margin-top: var(--reit-space-20);
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--reit-space-16);
                        .footer--logo {
                            width: 200px;
                            height: auto;
                            background-color: var(--reit-white);
                            padding: var(--reit-space-10);
                            border: 1px solid var(--reit-primary);
                            border-radius: var(--reit-space-20);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }
}
.footer--bottom {
    width: 100%;
    height: auto;
    padding: var(--reit-space-20) 0;
    background-color: var(--reit-primary);
    color: var(--reit-white);
    font: 400 16px/20px var(--reit-montserrat);
}

/* How Section */
.how__wrapper {
    padding: var(--reit-space-80) 0 0;
    background-color: var(--reit-white);
    .how--pointers {
        width: 100%;
        height: auto;
        max-width: 1000px;
        margin-inline: auto;
        margin-top: var(--reit-space-36);
        display: flex;
        flex-direction: column;
        gap: var(--reit-space-24);
        &.how--pointers--desktop {
            display: flex;
        }
        &.how--pointers--mobile {
            display: none;
        }
        .how--point {
            width: 100%;
            height: auto;
            min-height: 100px;
            position: relative;
            padding: var(--reit-space-12);
            &::before {
                content: '';
                width: calc(100% - 40px);
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 0;
                background-color: var(--reit-primary);
                border-radius: 20px;
            }
            .how--point--inner {
                width: 100%;
                height: auto;
                min-height: 100px;
                position: relative;
                z-index: 1;
                background-image: url('../img/box-content-bg.png');
                padding: var(--reit-space-12) var(--reit-space-20);
                background-repeat: repeat;
                background-position: left top;
                border-radius: 20px;
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
                display: flex;
                align-items: center;
                gap: var(--reit-space-20);
                overflow: hidden;
                border-left: 6px solid var(--reit-secondary);
                img {
                    max-width: 95px;
                }
                .how--point--content {
                    flex: 1;
                    h4 {
                        font: 700 24px/30px var(--reit-montserrat);
                        color: var(--reit-primary);
                        margin-bottom: var(--reit-space-10);
                    }
                    p {
                        font: 500 18px/24px var(--reit-montserrat);
                        color: var(--reit-primary);
                    }
                }
            }
        }
    }
}
.who--img {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: var(--reit-space-42);
    line-height: 0;
    position: relative;
    z-index: 2;
}
/* WHo section */
.who__wrapper {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    background-color: var(--reit-primary);
    padding: 0 0 var(--reit-space-80);
    &::before {
        content: '';
        position: absolute;
        top: -150px;
        left: 0;
        width: 100%;
        min-height: 150px;
        height: 100%;
        z-index: -1;
        background-color: var(--reit-primary);
    }
    h2.section--title {
        color: var(--reit-white);
        margin-top: var(--reit-space-42);
    }
    h5.section--subtitle {
        color: var(--reit-white);
        max-width: 750px;
    }
    .who--carousel {
        width: 100%;
        height: auto;
        max-width: 1000px;
        margin-inline: auto;
        margin-top: var(--reit-space-42);
        .owl-stage {
            display: flex;
            align-items: stretch;
            .owl-item {
                height: auto;
                .item {
                    height: 100%;
                }
            }
        }
        .who--carousel--item {
            width: 100%;
            height: 100%;
            background-color: var(--reit-white);
            border-radius: 20px;
            overflow: hidden;
            padding: var(--reit-space-24) var(--reit-space-20) 0;
            display: flex;
            flex-direction: column;
            gap: var(--reit-space-16);
            .who--carousel--item--title {
                font: 600 20px/24px var(--reit-montserrat);
                color: var(--reit-primary);
                margin-bottom: var(--reit-space-12);
                text-align: center;
            }
            p {
                font: 400 16px/20px var(--reit-montserrat);
                color: var(--reit-light-grey);
                text-align: center;
            }
            .who--carousel--img {
                line-height: 0;
                display: flex;
                justify-content: center;
                margin-top: auto;
                img {
                    max-width: 80%;
                }
            }
        }
        .owl-nav {
            width: calc(100% + 300px);
            margin-top: 0;
            position: absolute;
            top: 50%;
            left: -150px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            button.owl-next,
            button.owl-prev {
                background-color: transparent;
            }
        }
        .owl-dots {
            padding: var(--reit-space-20) 0 0;
            .owl-dot {
                span {
                    width: 16px;
                    height: 16px;
                    background-color: transparent !important;
                    border: 2px solid var(--reit-secondary);
                    margin: 5px;
                }
                &.active span {
                    background-color: var(--reit-white) !important;
                }
            }
        }
    }
}

/* About Section */
.about__wrapper {
    background-color: #E9FBFF;
    padding: var(--reit-space-80) 0 0;
    display: flex;
    align-items: center;
    .about--col {
        width: 50%;
        height: auto;
        &:first-child {
            width: 50%;
            height: auto;
            padding-left: calc(calc(calc(100% - var(--reit-grid)) / 2) + 20px);
            display: flex;
            flex-direction: column;
            gap: var(--reit-space-30);
        }
        h2 {
            text-align: left;
            margin: 0;
        }
        h5 {
            text-align: left;
            font: 700 24px/30px var(--reit-montserrat);
            color: var(--reit-dark-grey);
            margin: 0;
        }
        #download--form {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: var(--reit-space-30);
            .email--wrapper {
                width: 100%;
                height: auto;
                display: flex;
                align-items: stretch;
                label {
                    font: 400 20px/24px var(--reit-montserrat);
                    color: var(--reit-black);
                    background-color: #5CD5FF;
                    padding: var(--reit-space-12) var(--reit-space-16);
                    border-radius: var(--reit-space-12) 0 0 var(--reit-space-12);
                }
                input {
                    flex: 1;
                    border: none;
                    border-radius: 0 var(--reit-space-12) var(--reit-space-12) 0;
                    outline: none;
                    padding: 0 var(--reit-space-12);
                    font: 400 20px/24px var(--reit-montserrat);
                }
            }
            .checkbox--wrapper {
                label {
                    display: flex;
                    align-items: center;
                    gap: var(--reit-space-12);
                    position: relative;
                    padding-left: var(--reit-space-42);
                    font: 500 20px/24px var(--reit-montserrat);
                    color: var(--reit-dark-grey);
                    input {
                        display: none;
                    }
                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 30px;
                        height: 30px;
                        border: 2px solid var(--reit-primary);
                        border-radius: 8px;
                    }
                    &:has(input:checked)::before {
                        background-color: var(--reit-primary);
                        border-color: var(--reit-primary);
                        background-image: url('../img/white-tick.svg');
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: 24px 24px;
                    }
                }
            }
            button {
                width: max-content;
                height: auto;
                padding: var(--reit-space-8) var(--reit-space-16);
                background-color: var(--reit-primary);
                color: var(--reit-white);
                display: flex;
                align-items: center;
                gap: 8px;
                font: 500 20px/24px var(--reit-montserrat);
                color: var(--reit-white);
                border-radius: 12px;
                border: none;
                outline: none;
                cursor: pointer;
            }
        }
    }
}