@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Julius+Sans+One&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: #f9f9f9;
    letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6, a {font-family: "Julius Sans One", sans-serif; text-decoration: none;}
body{overflow-x: hidden;}
/* GENERAL STYLES */
.section-padding { padding: 8rem 12rem;}
h1{font-size: 50px; font-weight: 400; margin-bottom: 2rem;}

a.btn
{
    display: block;
    text-align: center;
    height: 45px;
    line-height: 45px;
    width: 150px;
    background: linear-gradient(to bottom right, #ffffff30, #ffffff10);
    border: 1px solid rgba(255,255,255,.4);
    cursor: pointer;
    transition: .2s;
}
a.btn:hover{backdrop-filter:blur(4px);}

@media only screen and (max-width: 900px) {
    .section-padding{padding: 8rem 8rem;}
    a{height: 38px; line-height: 38px;}

    section h1{font-size: 30px;}
}
@media only screen and (max-width: 600px) {
    .section-padding{padding: 8rem 2rem;}
}
/* #################### */


/* HOME */
#home
{
    width: 100vw;
    height: 100vh;
    position: relative;
}

#home > .header
{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 120px;
    padding: 0 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#home > .header > a{position: absolute; right: 8rem;}
#home > .header > .carousel-index
{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 230px;
}
#home > .header > .carousel-index > .line
{
    height: 5px;
    width: 70px;
    background: #ffffff20;
    border: 1px solid #dedede80;
    border-radius: 5px;
    cursor: pointer;
    transition: .2s;
}
#home > .header > .carousel-index > .line:hover{background: #ffffff40;}
#home > .header > .carousel-index > .line.active{background: #ffffff;}


#home > .carousel-item
{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("./img/section_bg/dubai_city.svg");
    background-position: top center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem 8rem;
}
#home > .carousel-item:nth-child(2){background-image: url("./img/section_bg/dubai_city_sun_set.svg");}
#home > .carousel-item:nth-child(3){background-image: url("./img/section_bg/dubai_artificial_beach_with_palms.svg");}
#home > .carousel-item::before
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .65;
}
#home > .carousel-item.hide{display: none;}
#home > .carousel-item > *{position: relative; z-index: 1;}
#home > .carousel-item > h1{font-size: 64px; width: 75%; font-weight: 400; /*animation: text-appear-from-bottom 1.2s ease-in;*/}
#home > .carousel-item > h2{font-size: 30px; width: 75%; font-weight: 300; color: #dedede; /* animation: text-appear-from-bottom 1.2s ease-in; */}

#home > .carousel-item.reverse{align-items: end;}
#home > .carousel-item.reverse > h1 {text-align: right;}
#home > .carousel-item.reverse > h2 {text-align: right;}

@media only screen and (max-width: 1200px) {
    #home > .carousel-item > h1{font-size: 55px; width: 100%;}
    #home > .carousel-item > h2{font-size: 25px;width: 100%;}
}

@media only screen and (max-width: 900px) {
    #home > .header{padding: 0 6rem;}
    #home > .carousel-item > h1{font-size: 42px; width: 100%;}
    #home > .carousel-item > h2{font-size: 22px;width: 100%;}

    #home > .header > .carousel-index
    {
        transform: translateY(50px);
        width: 164px;
    }
    #home > .header > .carousel-index > .line
    {
        height: 3px;
        width: 50px;
    }
}
@media only screen and (max-width: 600px) {
    #home > .header{padding: 0 2rem;}
    #home > .carousel-item{padding: 4rem 2rem;}
    #home > .header > a{right: 2rem;}
    #home > .carousel-item > h1{font-size: 38px; width: 100%;}
}
/* #################### */


/* About + Company */
#about,
#company
{
    position: relative;
    width: 100%;
    background-image: url("./img/section_bg/dubai_artificial_beach.svg");
    background-position: center;
    background-size: cover;
}
#company
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-image: url("./img/section_bg/dubai_city_sun_set.svg");
}
#about::before,
#about::after,
#company::before,
#company::after
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .4;
}
#about::after,
#company::after
{width: 75%; opacity: 1; background: linear-gradient(to right, #00000095, #00000090 70%, #00000000);}
#company::after
{
    left:unset; 
    right:0; 
    background: linear-gradient(to left, #00000085, #00000070 70%, #00000000);
    background-position: top center;
}

#about > .content,
#company > .content
{
    position: relative;
    width: 55%;
    z-index: 1;
}
#company > .content{display: flex;flex-direction: column;align-items: flex-end;}

#about > .content p,
#company > .content p
{margin-bottom:1rem; font-size: 18px; font-weight: 100;}
#about > .content a,
#company > .content a
{margin-top: 4rem;}

#company > .content h1,
#company > .content p {text-align: right;}

@media only screen and (max-width: 1200px) {
    #company::before,
    #about::before{opacity: .8;}

    #about::after,
    #company::after{display: none;}

    #about > .content,
    #company > .content{ width: 100%;}
}
@media only screen and (max-width: 900px) {
    #about > .content p,
    #company > .content p
    {margin-bottom:1rem; font-size: 14px; font-weight: 100;}
}
/* #################### */




/* About Dubai */
#about_dubai
{
    position: relative;
    width: 100%;
    background-image: url("./img/section_bg/dubai_artificial_beach_with_palms.svg");
    background-position: center top;
    background-size: cover;
}

#about_dubai::after
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
}
#about_dubai .content > * {position: relative; z-index: 1;}
#about_dubai .content > p{font-weight: 200; font-size: 18px; color: white; margin-bottom: 6rem;}

#about_dubai > .content > .grid
{
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 4rem;
    padding-top: 6rem;
}
#about_dubai > .content > .grid::before
{
    content: '';
    position: absolute;
    width: calc(100% + 24rem);
    height: calc(100% + 8rem);
    transform: translate(-12rem, 8rem);
    background: #00000085;
    left:0;
    bottom: 0;
}
#about_dubai > .content > .grid > div{position: relative; z-index: 1; width: 100%; height: 100%;}
#about_dubai > .content > .grid > div > h2 {font-family: "Inter", sans-serif; color: #f9f9f9; font-weight: 300;}
#about_dubai > .content > .grid > div > p {font-weight: 100; font-size: 18px; color: #dedede;}

@media only screen and (max-width: 900px) {
    #about_dubai > .content > .grid::before {width: calc(100% + 16rem); transform: translate(-8rem, 8rem);}
    #about_dubai > .content > .grid{grid-template-columns: repeat(2, 1fr);}
    #about_dubai .content > p{font-size: 14px;}

    #about_dubai > .content > .grid > div > h2{font-size: 20px;}
    #about_dubai > .content > .grid > div > p{font-size: 14px;}
}
@media only screen and (max-width: 600px) {
    #about_dubai > .content > .grid::before {width: calc(100% + 4rem); transform: translate(-2rem, 8rem);}
}
/* #################### */


/* Oportunities */
#oportunities
{
    position: relative;
    width: 100%;
    background: #0F0F0F;
    padding-bottom: 0;
}
#oportunities .partners
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 8rem;
}
#oportunities .partners img
{
    width: 200px;
    height: auto;
    margin: 0 4rem;
}
#oportunities > img
{
    width: 120px;
    height: auto;
    margin-bottom: 2rem;
}
#oportunities > p {font-weight: 100; font-size: 18px; margin-bottom: 1rem;}

.oportunities-box
{
    width: calc(100% + 24rem);
    transform: translateX(-12rem);
    height: 400px;
    margin-top: 4rem;
    display: flex;
}
.oportunities-box > div
{
    position: relative;
    height: 100%;
    flex: 1;
    transition: .3s;
    background-image: url("./img/realestate/skyrise_building.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
.oportunities-box > div.hills {background-image: url("./img/realestate/hills_building.png");}
.oportunities-box > div::before 
{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    transition: .3s;
    background: #000000;
    opacity: .3;
}
.oportunities-box > div > h2
{
    position: absolute;
    font-size: 100px;
    transform: translateY(calc(-100% - 2.5rem));
    top:2rem;
    left:2rem;
    font-weight: 200;
    opacity: 0;
    transition: .3s;
}
.oportunities-box > div > a
{
    position: absolute;
    bottom: 2rem;
    transform: translateY(calc(100% + 2.5rem));
    right: 2rem;
    width: 180px;
    transition: .3s;
    opacity: 0;
}

.oportunities-box > div:hover {flex: 2.5;}
.oportunities-box > div:hover {flex: 1.5;}
.oportunities-box > div:hover > h2 {transform: translateY(0); opacity: .8;}
.oportunities-box > div:hover > a {transform: translateY(0); opacity: 1;}
.oportunities-box:has(>div:hover) > div:not(:hover){filter: grayscale(1);}
.oportunities-box:has(>div:hover) > div:not(:hover)::before{opacity: .6;}

@media only screen and (max-width: 1200px) {
    #oportunities .partners img { width: 150px;}
}
@media only screen and (max-width: 900px) {
    #oportunities .partners{flex-direction: column;}
    #oportunities .partners img { margin: 2rem 0;}
    .oportunities-box {width: calc(100% + 16rem); transform: translateX(-8rem);}

    .oportunities-box{flex-direction: column; height: 800px;}
    .oportunities-box > div:hover {flex: 1;}
    .oportunities-box > div > h2,
    .oportunities-box > div > a{transform: unset; opacity: 1;}
    .oportunities-box > div > h2{opacity: .8; font-size: 65px;top:4rem;left:4rem;}
}
@media only screen and (max-width: 600px) {
    .oportunities-box {width: calc(100% + 4rem); transform: translateX(-2rem);}
}
/* #################### */


/* TEAM MEMBERS */
#team
{
    position: relative;
    width: 100%;
    background-image: url("./img/section_bg/dubai_tower_lobby.svg");
    background-position: center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#team > h1 {margin-bottom: 8rem; width: 100%;}
#team::before
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7;
}

#team > *{position: relative; z-index: 1;}
#team > .team-member
{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 750px;
}
#team > .team-member:nth-child(2){margin-bottom: 4rem;}
#team > .team-member > .img{justify-self: center;}
#team > .team-member > .img img{background: #ffffff40; width: 175px; height: auto; box-shadow: 0 0 6px #00000025;}
#team > .team-member > .content h2{font-weight: 200; font-size: 26px; margin-bottom: .5rem;}
#team > .team-member > .content h3{font-weight: 100; margin-bottom: 1rem;}
#team > .team-member > .content p{font-weight: 100;}
#team > .team-member >*:nth-child(1){margin-right: 2rem;}

#team > .team-member .link
{
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    overflow: hidden;
}
#team > .team-member .link::before,
#team > .team-member .link::after
{
    content: '';
    position: absolute;
    width:100%;
    height: 2px;
    border-radius: 2px;
    background:#0475B3;
    transition: .5s;
}
#team > .team-member .link::before{ top:0; transform: translateX(-100%);}
#team > .team-member .link::after{ transform: translateX(100%); bottom:0;}
#team > .team-member .link:hover::before{ transform: translateX(100%);}
#team > .team-member .link:hover::after{ transform: translateX(-100%);}
#team > .team-member .link a
{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
#team > .team-member .link i{color:#dedede; font-size: 22px; transition: .3s;}
#team > .team-member .link:hover i{color: #0475B3;;}

@media only screen and (max-width: 720px) {
    #team > .team-member
    {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #team > .team-member:nth-child(2) > *:nth-child(1){
        margin-right: 0;
        margin-bottom: 2rem;
    }
    #team > .team-member:nth-child(3) > *:nth-child(2){
        margin-right: 0;
        margin-bottom: 2rem;
    }
    #team > .team-member:nth-child(3){flex-direction: column-reverse;}
}

/* #################### */


/* CONTACT */
#contact
{background: #0F0F0F;}
#contact p{font-weight: 100; width: 65%;}
#contact > div
{
    width: 100%;
    display: flex;
    margin-top: 6rem;
}
#contact > div a
{
    width: 200px;
    height: 55px;
    line-height: 55px;
}
#contact > div a:nth-child(2){margin-left: 4rem;}

@media only screen and (max-width: 900px) {
    #contact p{width: 100%;}
    #contact > div{justify-content: space-between;}
    #contact > div a:nth-child(2){margin-left: 0;}
}
@media only screen and (max-width: 660px) {
    #contact > div{flex-direction: column; align-items: center; justify-content: center;}
    #contact > div a:nth-child(1){margin-bottom: 2rem;}  
}
/* #################### */

/* ANIMATIONS */
@keyframes text-appear-from-bottom {
    0%{transform: translateY(60px); opacity: 0;}
    50%{transform: translateY(60px); opacity: 0;}
    100%{transform: translateX(0); opacity: 1;}
}