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

@font-face{
    font-family: "Helvetica Neue";
    src: url('font/HelveticaNeueLt.ttf');
}


html{
    scroll-behavior: smooth;
}

body{
    width: 100%;
    background-color: #121212;
    background-image: url('svgs/grid-background.svg');
    color: #ffffff;
    font-family: "Helvetica Neue";
    font-size: 1em;
    letter-spacing: 0.01em;
    transition: all 0.5s;
    overflow-x: hidden;
}

body.overflow-hidden{
    overflow: hidden;
}

body::-webkit-scrollbar{
    display: none;
}

body.white{
    background-color: #F2F2F2;
    background-image: url('svgs/grid-background.svg');
    color: #0C0C0C;
    transition: all 0.5s;
}


ul{
    list-style: none;
}


body a{
    color: #ffffff;
    text-decoration: none;
    font-size: 1em;
}

body.white a{
    color: #0C0C0C;
}


.wrapper{
    position: relative;
    height: 100%;
    max-width: 1920px;
    margin: auto;
}

/* Navbar */
.navbar{
    position: relative;
    padding: 2em;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    body.white .logo{
        filter: invert(1);
    }

    .nav-list{
        display: flex;
    }

        .nav-link{
            margin: 0 3.5em;
            font-size: 14px;
        }

            .nav-link a{
                position: relative;
                display: inline-block;
                padding-bottom: 2px;
                opacity: 0.75;
                transition: all 0.3s;
            }

            .nav-link a:hover{
                opacity: 1;
            }

    .hamburger-menu{
        cursor: pointer;
        z-index: 1001;
        width: 32px;
    }

        .hamburger-menu.active{
            z-index: 10000000000;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
        }


        .hamburger-menu.active .line:nth-child(1){
           position: absolute;
           transform: rotate(225deg);
           margin-bottom: 0px;
        }
        .hamburger-menu.active .line:nth-child(2){
            transform: rotate(-225deg);

         }

        body .line{
            background-color: #ffffff;
            width: 32px;
            height: 2px;
            transition: all 0.3s;
        }

        body.white .line{
            background-color: #0C0C0C;
        }

            .line:nth-child(1){
                margin-bottom: 4px;
            }

/* Home Page */
.home-page{
    position: relative;
    width: 75%;
    height: 90vh;
    max-height: 1000px;
    margin: auto;
    margin-bottom: 7em;
}

    .homePage-img:nth-child(1){
        position: absolute;
        width: 500px;
        height: 600px;
        right: 17.5%;
        overflow: hidden;
    }

        .first{
            position: relative;
            width: 100%;
            height: 100%;
        }

    .homePage-img:nth-child(2){
        position: absolute;
        width: 350px;
        top: 20%;
        right: -12%;
        overflow: hidden;
    }

        .second{
            width: 100%;
            height: 100%;
        }

    .main-content{
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .home-page h1,
        .section-title{
            font-size: 144px;
            font-weight: lighter;
            letter-spacing: -2%;
            font-weight: 600;
            overflow: hidden;

        }

        h1.title-1 p,
        h1.title-2 p{
            transform: translateY(0%);
        }

        .overlay-box{
            margin-top: 50px;
            width: 136.5px;
            height: 136.5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .circle-link{
            transform: translateY(0%);
            opacity: 1;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;

        }

            .content{
                position: relative;
                display: flex;
                align-items: center;
                transition: all 0.3s;
            }

                .content p{
                    font-size: 12px;
                    text-transform: uppercase;
                }

                .arrow{
                    position: absolute;
                    opacity: 1;
                    left: 100%;
                    margin-left: 20px;
                }

                body.white .arrow{
                    filter: invert(1);
                }

        .circle-link:hover .content{
            transform: translateX(1.1em);
        }

.review-page{
    position: relative;
    width: 75%;
    margin: auto;
    margin-bottom: 300px;
}

    .expand-item{
        opacity: 1;

    }
        .fixed-part{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, 0.8);
            padding: 0.5em 0;
            margin-bottom: 1em;
            cursor: pointer;
        }

        body.white .fixed-part{
            border-bottom: 1px solid rgba(12, 12, 12, 0.8);
        }


            .fixed-part h3{
                font-size: 72px;
                font-weight: 300;   
            }

            .fixed-part img.chevron-btn{
                cursor: pointer;
                transform: scale(1.2);
                transition: all 0.5s;
            }


                .fixed-part img.chevron-btn.active{
                    transform: rotate(180deg);
                }

            body.white img.chevron-btn{
                filter: invert(1);
            }



        .expanded-part{
            overflow: hidden;
            height: 0;
            opacity: 0;
            transition: all 0.5s;

        }    

        .expanded-part.active{
            width: 100%;
            opacity: 1;
            height: auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            margin-top: 96px;
            transition: all 0.5s;

        }

        .expanded-part .top{
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-bottom: 115px;

        }
        

                .item {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-end;

                }

                .item h5{
                    font-size: 12px;
                    line-height: 15px;
                    text-transform: uppercase;
                    font-weight: bold;
                    font-family: "Helvetica Neue";
                    letter-spacing: 0.01em;
                    margin: 16px 0 8px 0;
                }

                .item p{
                    opacity: 0.6;
                    font-size: 14px;
                    line-height: 21px;
                    width: 350px;

                }

                .item.one{
                    position: relative;
                    width: 477px;
                    
                }
            
                    .item.one img{
                        width: 100%;
                        height: 646px;
                        box-shadow: 0 5px 10px rgba(12, 12, 12, 0.5);

                    }

                .item.two{
                    position: relative;
                    width: 720px; 
                    
                }
                    .item.two img{
                        width: 100%;
                        height: 501px;
                        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);

                    }
        .expanded-part .bottom{
            display: flex;
            margin-bottom: 200px;
        }
            .item.three{
                justify-content: flex-start;
                width: 702px;
                margin-right: 130px;
            }

                .item.three img{
                    width: 100%;
                    height: 578px;
                    box-shadow: 0 5px 10px rgba(12, 12, 12, 0.5);

                }

            .item.four{
                justify-content: flex-start;
                width: 424px;
            }

                .item.four img{
                    width: 100%;
                    height: 694px;
                    box-shadow: 0 5px 10px rgba(12, 12, 12, 0.5);

                }

    .getInTouch-page{
        width: 75%;
        margin: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 140px;
    }

        h1.section-title{
            margin-bottom: 115px;
            opacity: 1;
        }

        .references{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
        }

            .reference-item{
                display: flex;
                flex-direction: column;
                opacity: 1;
            }

            .reference-item div{
                margin-bottom: 0em;

            }

            .reference-item:nth-child(2) div:nth-child(1){
                margin-bottom: 2em;
            }

            .reference-item p,
            .reference-item a{
                font-size: 14px;
                opacity: 0.6;
                width: 150px;
                display: block;
                position: relative;
                margin: 0 60px 0 0;



            }

            .reference-item a::after{
                content: '';
                position: absolute;
                width: 0%;
                height: 1px;
                background-color: #ffffff;
                bottom: 0;
                left: 0;
                overflow: hidden;
                transition: all 0.5s;
            }

                .reference-item a:hover::after{
                    width: 100%;
                    transition: all 0.5s;
                }



            .reference-item p.about-company{
                width: 400px;
                font-size: 16px;
                margin-bottom: 20px;
            }

            .reference-item h5{
                text-transform: uppercase;
                margin-bottom: 8px;
                font-size: 12px;

            }

    .footer{
        display: flex;
        width: 75%;
        margin: auto;
        padding: 2em 0;
        height: 100px;
        align-items: center;
        justify-content: space-between;
    }

    .footer ul{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        font-size: 14px;
    }

        ul.rights p.copyright{
            margin-right: 106px;
        }

        ul.rights li{
            margin-right: 72px;
        }

        ul.social-links li{
            position: relative;
            display: block;
            margin-left: 48px;
        }

        ul.social-links li::after{
            content: '';
            position: absolute;
            width: 0%;
            bottom: -15%;
            left: -10%;
            height: 1px;
            background-color: #ffffff;
            transition: all 0.3s;
            overflow: hidden;
        }

        ul.social-links li:hover::after{
            width: 130%;
            transition: all 0.3s;
        }

        body.white ul.social-links li::after{
            background-color: #0C0C0C;
        }

    .toggle-menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0C0C0C;
        color: #F2F2F2;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: all 0.3s;
    }

    body.white .toggle-menu{
        background-color: #F2F2F2;
        color: #0C0C0C;
    }

    .toggle-menu.active{
        opacity: 1;
        pointer-events: all;
        transition: all 0.3s;
    }

    .toggle-menu .menu-container{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1000px;
        height: 550px;
    }

        .toggle-menu .menu-links{
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            
        }

            .toggle-menu .menu-links a{
                font-size: 72px;
                color: rgba(255, 255, 255, 0.2);
                font-weight: 600;
                letter-spacing: 0.05em;
                margin-bottom: 50px;
                transition: all 0.5s;
            }


            body.white .toggle-menu .menu-links a{
                color: rgba(12, 12, 12, 0.2);
            }

            .toggle-menu .menu-links a:hover{
                color: rgba(255, 255, 255, 1);
                transition: all 0.5s;
            }

            body.white .toggle-menu .menu-links a:hover{
                color: rgba(12, 12, 12, 1);
                transition: all 0.5s;

            }

                .toggle-menu .menu-links a span{
                    font-size: 14px;
                    margin-right: 90px;
                }
        .toggle-menu .description-info{
            position: relative;
            height: 100%;
            width: 40%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 60px 100px 60px 0;
            
        }

        .description-info .logo{
            transform: scale(1.5);
            margin-left: 20px;
            margin-bottom: 30px;
            
        }

            .description-info p.about-company{
                opacity: 0.6;
                margin-bottom: 100px;
                font-size: 14px;
                        
            }
        
            .description-info .references{
                flex-direction: column;
            }

                .references .reference-item{
                    margin-bottom: 30px;
                }

                    .references .reference-item .flex-links{
                        margin: 0;
                        display: flex;
                        justify-content: flex-start;

                    }
                    .reference-item .flex-links a{
                        width: auto;
                        margin-right: 30px;
                        
                    }

        .horizontal-line{
            position: relative;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.2);
            height: 100%;
            margin: 0 80px;
        }

        body.white .horizontal-line{
            background-color: rgba(12, 12, 12, 0.2);
        }

        .overlay{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            z-index: 10000;
        }

        .overlay .layer{
            flex: 1;
            background: #171717;
            border: 1px solid rgba(255, 255, 255, 0.00)
        }


        .overlay .layer-logo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(3);
            z-index: 10001;
            opacity: 0;
        }

/* media query */
@media (max-width: 1675px){
    .homePage-img:nth-child(1){
        width: 400px;
        height: 475px;
        right: 20%;
    }

    .homePage-img:nth-child(2){
        top: 20%;
        right: -10%;
        width: 275px;
    }

    
    .home-page h1,
    .section-title{
        font-size: 124px;
    }

    .item.one{
        width: 440px;
        
    }

        .item.one img{
            height: 600px;
        }

    .item.two{
        width: 650px; 
        
    }
        .item.two img{
            height: 450px;
        }

    .item.three{
        width: 600px;
    }

        .item.three img{
            height: 450px;
        }

    .item.four{
        width: 400px;
    }

        .item.four img{
            height: 650px;
        }


}

@media (max-width: 1500px){
    .references{
        justify-content: flex-start;
    }

    .reference-item:nth-child(2){
        display: flex;
        flex-direction: row;
        
    }

    .reference-item:nth-child(2) div{
        margin-bottom: 0;
    }

    .item.one{
        width: 400px;
        
    }

        .item.one img{
            height: 550px;
        }

    .item.two{
        width: 550px; 
        
    }
        .item.two img{
            height: 400px;
        }

    .item.three{
        width: 525px;
    }

        .item.three img{
            height: 400px;
        }

    .item.four{
        width: 400px;
    }

        .item.four img{
            height: 550px;
        }

    .footer{
        flex-direction: column-reverse;
    }

        .footer .social-links{
            margin: 30px 0;
        }

        .footer ul.rights{
            flex-wrap: wrap;
            width: 100%;
            justify-content: space-between;
        }
            ul.rights li,
            ul.rights p.copyright{
                margin: 0;
                margin-bottom: 10px;
                padding: 0 10px;
            }
}

@media (max-width: 1400px){
    .homePage-img:nth-child(1){
        width: 425px;
        height: 500px;
        right: 20%;
    }

    .homePage-img:nth-child(2){
        top: 30%;
        width: 275px;
    }

    .home-page h1,
    .section-title{
        font-size: 124px;
    }

    .overlay-box{
        width: 125px;
        height: 125px;
    }
    .arrow{
        margin-left: 16px;
        width: 70px;
    }
    .circle-link:hover .content{
        transform: translateX(1em);
    }

    .item.one{
        width: 375px;
        
    }

        .item.one img{
            height: 525px;
        }

    .item.two{
        width: 525px; 
        
    }
        .item.two img{
            height: 375px;
        }

    .item.three{
        width: 475px;
    }

        .item.three img{
            height: 400px;
        }

    .item.four{
        width: 375px;
    }

        .item.four img{
            height: 525px;
        }

}

@media (max-width: 1300px){
    .item.one{
        width: 350px;
        
    }

        .item.one img{
            height: 500px;
        }

    .item.two{
        width: 500px; 
        
    }
        .item.two img{
            height: 350px;
        }

    .item.three{
        width: 450px;
    }

        .item.three img{
            height: 350px;
        }

    .item.four{
        width: 325px;
    }

        .item.four img{
            height: 475px;
        }

    .item h5,
    .reference-item h5{
        font-size: 10px;
    }

    .item p,
    .reference-item p,
    .reference-item a{
        opacity: 0.6;
        font-size: 12px;


    }
}

@media (max-width: 1200px){
    h1.section-title{
        margin-bottom: 75px;

    }

    .home-page h1,
    .section-title{
        font-size: 110px;
    }



    .overlay-box{
        width: 115px;
        height: 115px;
    }
    .arrow{
        margin-left: 16px;
        width: 60px;
    }
    .circle-link:hover .content{
        transform: translateX(1em);
    }

    .content p{
        font-size: 10px;
        text-transform: uppercase;
    }

    .item.one{
        width: 325px;
        
    }

        .item.one img{
            height: 450px;
        }

    .item.two{
        width: 450px; 
        
    }
        .item.two img{
            height: 300px;
        }

    .item.three{
        width: 400px;
    }

        .item.three img{
            height: 300px;
        }

    .item.four{
        width: 275px;
    }

        .item.four img{
            height: 400px;
        }

    .item h5,
    .reference-item h5{
        font-size: 10px;
    }

    .item p,
    .reference-item p,
    .reference-item a{
        opacity: 0.6;
        font-size: 12px;
        width: 95px;
    }

    .item p{
        width: 280px;
    }
}

@media (max-width: 1100px){
    .home-page h1,
    .section-title{
        font-size: 90px;
    }

    .item{
        margin-bottom: 60px;
    }

    .item.one{
        width: 400px;
        
    }

        .item.one img{
            height: 500px;
        }

    .item.two{
        width: 600px; 
        
    }
        .item.two img{
            height: 400px;
        }

    .item.three{
        width: 600px;
        margin-right: 0;
    }

        .item.three img{
            height: 400px;
        }

    .item.four{
        width: 400px;
    }

        .item.four img{
            height: 500px;
        }

    .item h5,
    .reference-item h5{
        font-size: 10px;
    }


    .item p,
    .reference-item p,
    .reference-item a{
        opacity: 0.6;
        font-size: 12px;
    }

    .item p{
        width: 375px;
    }

    .expanded-part .top{
        flex-direction: column;
        align-items: center;
        margin-bottom: 0px;
    }

    .expanded-part .bottom{
        width: 100%;
        flex-direction: column-reverse;
        align-items: center;
    }
}

@media (max-width: 1000px){
    .nav-list{
        display: none;
    }



    .toggle-menu .menu-container{
        width: 1000px;
        height: 100vh;
    }

    .toggle-menu .menu-links{
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: flex-start;
        padding-left: 30%;
    }

    .toggle-menu .description-info{
        display: none;
    }
    .toggle-menu .horizontal-line{
        display: none;
    }
}

@media (max-width: 900px){
    h1.section-title{
        margin-bottom: 65px;
        
    }

    .homePage-img:nth-child(1){
        width: 375px;
        height: 425px;
        right: 20%;
    }

    .homePage-img:nth-child(2){
        top: 25%;
        width: 225px;

    }

    .home-page h1,
    .section-title{
        font-size: 80px;
    }

    .overlay-box{
        width: 110px;
        height: 110px;
    }
    .circle-link:hover .content{
        transform: translateX(0.9em);
    }

    .fixed-part h3{
        font-size: 60px;
    }

    .footer .social-links{
        width: 100%;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
        font-size: 12px;
    }

        .footer .social-links li{
            margin: 0 15px;
        }

    .footer ul.rights{
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
        ul.rights li,
        ul.rights p.copyright{
            font-size: 10px;
            margin: 0;
            margin-bottom: 10px;
            padding: 0 10px;
        }

    .reference-item p.about-company{
        font-size: 12px;
    }

}

@media (max-width: 800px){
    .home-page{

        margin-bottom: 3em;
    }

    .review-page{

        margin-bottom: 150px;
    }

    .homePage-img:nth-child(1){
        width: 350px;
        height: 400px;
        right: 20%;

    }

    .homePage-img:nth-child(2){
        top: 25%;
        width: 200px;

    }

    .home-page h1,
    .section-title{
        font-size: 90px;
    }
    .home-page h1:nth-child(2){
        font-size: 70px;
    }

    .item.one{
        width: 375px;
        
    }

        .item.one img{
            height: 450px;
        }

    .item.two{
        width: 500px; 
        
    }
        .item.two img{
            height: 350px;
        }

    .item.three{
        width: 500px;
        margin-right: 0;
    }

        .item.three img{
            height: 350px;
        }

    .item.four{
        width: 375px;
    }

        .item.four img{
            height: 450px;
        }

    .toggle-menu .menu-links{
        padding-left: 25%;
    }

    h1.section-title{
        margin-bottom: 70px;
    }
}

@media (max-width: 700px){
    h1.section-title{
        margin-bottom: 50px;
        opacity: 1;
    }

    .toggle-menu .menu-links{
        padding-left: 20%;
    }

    .homePage-img:nth-child(1){
        width: 300px;
        height: 350px;
        right: 20%;
        top: 15%;
    }

    .homePage-img:nth-child(2){
        top: 35%;
        width: 175px;
        right: -5%;

    }

    .home-page h1,
    .section-title{
        font-size: 80px;
    }

    .home-page h1:nth-child(2){
        font-size: 60px;
    }

    .overlay-box{
        width: 105px;
        height: 105px;
    }

    .arrow{
        width: 50px;
        margin-left: 14px;
    }

    .circle-link:hover .content{
        transform: translateX(1em);
    }

    .content p{
        font-size: 9px;
    }

    .fixed-part h3{
        font-size: 45px;
    }

    .fixed-part img.chevron-btn{
        transform: scale(1);
    }

    .item.one{
        width: 350px;
        
    }

        .item.one img{
            height: 425px;
        }

    .item.two{
        width: 450px; 
        
    }
        .item.two img{
            height: 300px;
        }

    .item.three{
        width: 450px;
        margin-right: 0;
    }

        .item.three img{
            height: 300px;
        }

    .item.four{
        width: 350px;
    }

        .item.four img{
            height: 425px;
        }

    .item p{
        width: 325px;
    }
}

@media (max-width: 600px){
    .toggle-menu .menu-links{
        padding-left: 15%;
    }

    .toggle-menu .menu-links a{
        font-size: 60px;
    }

    .home-page h1,
    .section-title{
        font-size: 80px;
    }
    .home-page h1:nth-child(2){
        font-size: 40px;
    }

    .homePage-img:nth-child(1){
        width: 250px;
        height: 300px;
        top: 20%;
    }

    .homePage-img:nth-child(2){
        top: 35%;
        width: 150px;

    }

    .fixed-part h3{
        font-size: 40px;
    }

    .overlay-box{
        width: 100px;
        height: 100px;
    }

    .arrow{
        width: 45px;
        margin-left: 12px;
    }

    .circle-link:hover .content{
        transform: translateX(1.1em);
    }

    .content p{
        font-size: 8px;
    }

    .item.one{
        width: 250px;
        
    }

        .item.one img{
            height: 350px;
        }

    .item.two{
        width: 350px; 
        
    }
        .item.two img{
            height: 225px;
        }

    .item.three{
        width: 350px;
        margin-right: 0;
    }

        .item.three img{
            height: 225px;
        }

    .item.four{
        width: 250px;
    }

        .item.four img{
            height: 350px;
        }

    .item h5,
    .reference-item h5{
        font-size: 8px;
    }


    .item p,
    .reference-item a,
    .reference-item p{
        opacity: 0.6;
        font-size: 10px;
    }

    .item p{
        width: 250px;
    }

}

@media (max-width: 500px){
    .toggle-menu .menu-links a{
        font-size: 60px;
    }

    .toggle-menu .menu-links a span{
        display: none;
    }

    .toggle-menu .menu-links{
        padding-left: 0%;
        align-items: center;
    }

    .home-page h1,
    .section-title{
        font-size: 70px;
    }
    .home-page h1:nth-child(2){
        font-size: 40px;
    }

    .homePage-img:nth-child(1){
        width: 200px;
        height: 250px;
        top: 25%;
    }

    .homePage-img:nth-child(2){
        top: 40%;
        width: 125px;

    }

    .fixed-part h3{
        font-size: 30px;
    }

    .overlay-box{
        width: 90px;
        height: 90px;
    }

    .arrow{
        width: 40px;
        margin-left: 10px;
    }

    .circle-link:hover .content{
        transform: translateX(1em);
    }

    .content p{
        font-size: 7px;
    }

    .reference-item p.about-company{
        width: 250px;

    }
}

@media (max-width: 413px){
    .reference-item:nth-child(2){
        flex-direction: column;
    }
}