@charset "UTF-8";

nav{
    top:-100%;
}

header{
    &.swiper{
        height:100vh;

        & .swiper-wrapper{
            height:inherit;

            & .swiper-slide{
                height:inherit;

                & .solar,
                & picture{
                    position:absolute;
                    top:0;
                    left:0;
                }

                & .solar{
                    z-index:0;
                    align-content:center;

                    & h1{
                        margin-top:6rem;
                    }

                    & h2{
                        color:#fff;
                        font-weight:400;
                    }

                    & p{
                        margin-top:1rem;
                        color:rgba(255,255,255,0.75);
                    }

                    & .button{
                        margin-top:1rem;
                    }
                }

                & picture{
                    z-index:-1;
                }
            }
        }
    }
}

#topBar{
    position:absolute;
    top:0;
    left:0;
    z-index:9;
    box-shadow:0 10px 50px -12px rgba(171, 171, 171, 0.15);

    & .row{
        &:first-child{
            border-bottom:1px solid rgba(255,255,255,0.07);
        }

        &:last-child{
            padding-top:1rem;
            padding-bottom:1rem;
        }
    }

    & p{
        margin:0 .5rem;
        width:fit-content;
        margin-bottom:0;
        display:inline-block;
        color:#fff;

        & span{
            margin-right:.15rem;
        }

        &:first-child{
            margin-left:0;
        }

        &:last-child{
            margin-right:0;
        }
    }

    & .social{
        margin:0;
        padding:0;
        list-style-type:none;
        display:flex;
        justify-content:end;

        & li{
            & a{
                width:50px;
                height:50px;
                display:flex;
                align-items:center;
                justify-content:center;
                color:#fff;
                text-decoration:none;
                border-left:1px solid rgba(255,255,255,0.07);

                & span{
                    &:last-child{
                        line-height:0;
                    }
                }
            }
        }
    }

    & .menu{
        display:flex;
        gap:1rem;
        justify-content:end;
        align-items:center;

        & a{
            &:has(img){
                & img{
                    filter:invert();
                }
            }
        }
    }

    /*& menu{
        margin:0;
        padding:0;
        width:100%;
        height:80px;
        display:flex;
        justify-content:end;
        list-style-type:none;

        & > li{
            position:relative;

            & > a{
                margin:0;
                padding:0 .5rem;
                width:auto;
                height:100%;
                display:inline-flex;
                align-items:center;
                font-weight:600;
                font-size:0.85rem;
                color:#fff;
                text-decoration:none;
                text-transform:uppercase;
                letter-spacing:.1rem;

                & > span{
                    margin-left:.25rem;
                    font-size:1rem;
                    line-height:0;
                    color:var(--primary-color);
                }
            }

            & > ul{
                margin:0;
                padding:0;
                min-width:250px;
                display:block;
                background-color:#fff;
                border-bottom-left-radius:8px;
                border-bottom-right-radius:8px;
                position:absolute;
                list-style-type:none;
                box-shadow:0 16px 50px rgb(0 0 0 / 8%);
                transform:scaleY(0);
                transform-origin:center top 0;
                transition:all 0.3s ease-in-out 0s;

                & li{
                    & a{
                        padding:0 1rem;
                        width:100%;
                        height:50px;
                        display:flex;
                        align-items:center;
                        border-bottom:1px solid #f5f5f5;
                        font-weight:600;
                        text-decoration:none;
                        color:#000;
                        position:relative;
                        transition:all 0.3s ease;

                        & span{
                            font-size:1.15rem;
                            line-height:0;
                            position:absolute;
                            top:50%;
                            right:1rem;
                            transform:translateY(-50%);
                            color:var(--primary-color);
                        }

                        &:hover{
                            background-color:#f5f5f5;
                        }
                    }

                    &:last-child{
                        & a{
                            border-bottom:0;
                            border-bottom-left-radius:8px;
                            border-bottom-right-radius:8px;
                        }
                    }
                }
            }

            &:hover{
                & > ul{
                    transform:scaleY(1);
                }
            }
        }
    }*/
}

#homeAC{
    & h3{
        color:#fff;
    }

    & p{
        color:rgba(255,255,255,0.75);
    }
}

#homeAbout{
    & figure{
        & img{
            opacity:.25;
        }
    }
}

#homeRealEstate{
    & .row{
        & > :first-child{
            & figure{
                max-height:800px;
            }
        }
    }
}

#homePublicTransport{
    border-top:1px solid var(--light-color);

    & figure{
        height:100%;
        display:flex;
        align-items:end;
        justify-content:end;

        & img{
            transform:rotateY(180deg);
            max-width:500px;
        }
    }
}

#videoAlpha{
    &.video{
        height:100vh;
    }

    & picture{
        margin-bottom:2rem;
        display:block;
    }

    & p{
        color:#fff;
        font-size:1rem;
    }
}

#homeStore{
    & .button{
        margin-bottom:4rem;
    }
}

@media(max-width:991px){
    header{
        &.swiper{
            & .swiper-wrapper{
                & .swiper-slide{
                    & .solar{
                        & h1{
                            margin-top:10rem;
                        }
                    }
                }
            }
        }
    }

    #homeAC{
        text-align:center;

        & figure{
            margin-bottom:2rem;
        }
    }

    #homeAbout{
        & > .row{
            & > :first-child{
                text-align:center;

                & .button{
                    margin-bottom:4rem;
                }
            }
        }
    }

    #homeSkills{
        & > .row{
            & > :first-child{
                text-align:center;

                & .button{
                    margin-bottom:4rem;
                }
            }
        }
    }

    #homePublicTransport{
        text-align:center;

        & figure{
            justify-content:center;
        }
    }

    #homeStore{
        & .box{
            text-align:center;

            & figure{
                margin-bottom:2rem;
            }
        }
    }

    #homeProducts{
        text-align:center;
    }
}

@media(max-width:767px){
    #topBar{
        & .row{
            &:first-child{
                & > div{
                    &:first-child{
                        border-bottom:1px solid rgba(255,255,255,0.07);
                        text-align:center;
                    }

                    &:last-child{
                        & .social{
                            justify-content:center;

                            & li:last-child{
                                & a{
                                    border-right:1px solid rgba(255,255,255,0.07);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    header{
        &.swiper{
            height:800px;

            & .swiper-wrapper{
                & .swiper-slide{
                    & .solar{
                        & h1{
                            margin-top:12rem;
                        }
                    }
                }
            }
        }
    }

    #homeAbout{
        text-align:center;

        figure{
            margin-bottom:1.5rem;
        }
    }

    #homeRealEstate{
        & .row{
            & > :first-child{
                & figure{
                    max-height:600px;
                }
            }

            & > :last-child{
                text-align:center;
            }
        }
    }
}

@media(max-width:575px){
    #topBar{
        & .menu{
            & a:not(:last-child){
                display:none;
            }
        }
    }
}