@charset "utf-8";
/* CSS Document */

/* RESET */

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



/* BODY */

body{
    background:white;

    font-family:Arial, sans-serif;

    color:black;

    width:100%;
    min-height:100vh;

    overflow-x:hidden;
}



/* HEADER */

header{
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    padding:35px 20px;

    font-size:12px;

    letter-spacing:1px;

    position:relative;
}



/* LEFT HEADER */

.header-left{
    display:flex;

    gap:55px;

    align-items:flex-start;
}



/* CENTER LOGO */

.logo{
    position:absolute;

    left:50%;
    transform:translateX(-50%);
	
	z-index: 9999;

    font-family:'Arial', cursive;

    font-size:50px;

    font-weight:10;

    line-height:1;
}

.logo a{
	
	display: block;
	pointer-events: auto;
}



/* RIGHT HEADER */

.header-right{
    display:flex;

    gap:55px;

    align-items:flex-start;

    text-align:left;

    line-height:1.4;
}



/* MAIN SECTION */


main{
    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:400px;

    margin-top:40px;
}

.bottom-row{
    display:flex;
	
	flex-direction: column;
	
	align-items: center;

    gap:5px;

    justify-content:flex-end;
	
	padding-right: 1000px;
}

.text-block{
	display: flex;
	
	flex-direction: row;
	
	align-items: flex-end;
		
	gap:10px;
	
	justify-content: flex-end;
	
	padding-left: 1100px;
}


/* MAIN IMAGE */

.scroll-image{
    height:60vh;
    width:auto;
	z-index: 10;
}

/* BOTTOM ROW IMAGES */

.second-image{
    width:400px;

    height:250px;

    object-fit:cover;
}

.third-image{
    width:400px;

    height:250px;

    object-fit:cover;
}

.fourth-image{


    position:fixed;

    top:180px;

    left:30%;

    width:850px;

    display:grid;


    gap:20px;

    opacity:0.30;

    z-index:-1;

	
}

.text-block{
    width:260px;

    margin-top:120px;
}



.text-block h2{
    font-size:14px;

    letter-spacing:3px;

    font-weight:normal;

    margin-bottom:30px;
}



.text-block p{
    font-size:13px;

    line-height:2;

    color:#444;
}

/* SIDE NUMBERS */

.side-numbers{

	cursor: auto;
    position:absolute;

    left:20px;
    top:320px;

    display:flex;
    flex-direction:column;

    gap:8px;

    font-size:12px;
	
	z-index: 5;
	
}

.side-numbers a{

    color:black;
	

    text-decoration:underline;

    text-underline-offset:3px;

    opacity:0.3;

    transition:0.3s ease;
}

.side-numbers a:hover{

    opacity:1;
}

.side-text{
	position: absolute;
	
	z-index: 5;
	
	left:20px;
	top:545px;
	
	font-size: 13px;
	
	font-family:Arial, sans-serif;
            
	color:black;
	
	font-weight:700;
	
	line-height: 1.1;

    letter-spacing: -1px;
	
	margin-top: 135px;
	
	opacity: 0.3;
	
	transition: 0.3s ease;
}

.side-text:hover{
    opacity:1;
}

.side-text h3{
    font-family: Arial, sans-serif;
    font-weight: 750;
    font-size: 15px;
	letter-spacing: -1px;
}

.side-text1{
	position: absolute;
	
	z-index: 5;
	
	left:20px;
	top:150px;
	
	font-size: 13px;
	
	font-family:Arial, sans-serif;
            
	color:black;
	
	line-height: 1.1;

    letter-spacing: -1px;
	
	margin-top: -56px;
	
	opacity: 0.3;
	
	transition: 0.3s ease;
	
	max-width: 500px;
}

.side-text1:hover{
    opacity:1;
	
}

.side-text2{
	position: absolute;
	
	z-index: 5;
	
	left:20px;
	top:150px;
	
	font-size: 25px;
	
	font-weight: 550;
	
	font-family:Arial, sans-serif;
            
	color:black;
	
	line-height: 1.1;

    letter-spacing: -1px;
	
	margin-top: 10px;
	
	opacity: 0.3;
	
	transition: 0.3s ease;
	
	max-width: 500px;
}

.side-text2:hover{
    opacity:1;
	
}


/* LINKS */

a{
    text-decoration:none;

    color:black;

    transition:0.3s;
}

a:hover{
    opacity:0.5;
}


/* HORIZONTAL SCROLL */

.horizontal-scroll{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    gap:100px;

    overflow-x:auto;

    overflow-y:auto;

    width:100vw;

    height:110vh;

    padding:0 100px;
	
	padding-right: 0px;

    margin-top:-100px;
	
    scroll-behavior:smooth;
	
}


.scroll-end{
    width:1200px;
    flex-shrink:0;
}

.scroll-image{

    height:86vh;

    width:auto;

    flex-shrink:0;
	
	margin-left: 3200px;
	
	cursor: url("img/c2.png"), auto;
}

.scroll-image1{
	
	height: 45vh;
	
	width: auto;
	
	margin-top: 0px;
	
	margin-left: 300px;
	
	flex-shrink: 0;
	
	cursor: url("img/c2.png"), auto;
}

.scroll-image2{
	
	height:45vh;
	
	width: auto;
	
	margin-top: 0px;
	
	margin-left: -70px;
	
	flex-shrink: 0;
	
	cursor: url("img/c2.png"), auto;
}

.scroll-image3{
	
	height:45vh;
	
	width: auto;
	
	margin-top: 0px;
	
	margin-left: -70px;
	
	flex-shrink: 0;
	
	cursor: url("img/c2.png"), auto;
}




.scroll-image,
.scroll-image1,
.scroll-image2,
.scroll-image3
{

    position:relative;

    z-index:20;
}




/* =========================
   MOBILE VERSION
========================= */

@media screen and (max-width: 768px) {

    
	
/* HEADER */

   
	
header{
	
    display:flex;
        
    flex-direction:column;
	
    gap:20px;
	
	padding:20px;
	
	
}

	
	
	
.header-right{
	
    display:flex;
	
    flex-direction:column;
	
    gap:15px;
	
    align-items:flex-start;
}
    
	

	
.header-left{
	
    width:100%;

    display:flex;
	
    justify-content:space-between;

    align-items:flex-start;

    gap:0;
	
}

	


	
.logo{
    position:relative;
	
    left:auto;
	
    transform:none;

    font-size:37px !important;

    margin:10px 0;
		
	margin-top: -20px;

    white-space:nowrap;
		
}
	
	
	
	
	
/* SIDE TEXTS */
	
.side-text,
.side-text1,
.side-text2{
      
	position:relative;

    left:auto;
        
	top:auto;

    margin:0 20px 15px 20px;
		
    margin-top: 20px;

    max-width:100%;

    z-index:1;
	
}
	
	

 
	
.side-text{
    
	margin-top:160px;
	
}

    
	
	
	
	
	
/* SIDE NUMBERS */
	

.side-numbers{
	
    display:flex !important;
   
    width:100%;
	
    gap:13px !important;
	
    margin:70px 0;
	
	margin-top: -30px;
	
	font-weight: 700;
	

	
	
}


	
/* HORIZONTAL SCROLL -> VERTICAL */
	

    .horizontal-scroll{

        display:flex;
		
        flex-direction:column;

        overflow-x:hidden;
		
        overflow-y:auto;

        width:100%;

        height:auto;

        gap:20px;

        padding:20px;

        margin-top:0;
    }

    /* ALL PROJECT IMAGES */

    .scroll-image,
    .scroll-image1,
    .scroll-image2,
    .scroll-image3,
    .scroll-image4{

        width:100% !important;
		
        height:auto !important;

        max-width:100%;

        margin:0 !important;

        flex-shrink:1;

        position:relative;
    }

    .scroll-end{
		
        display:none;
    }