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

/* RESET */



@font-face {
	
    font-family: "Cormorant Garamond";
	
    src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
	
    font-weight: 300;
	
    font-style: normal;
}



@font-face {
	
    font-family: "Cormorant Garamond";
	
    src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype");
	
    font-weight: 400;
	
    font-style: normal;
}



@font-face {
	
    font-family: "Arial Local";
	
    src: url("fonts/Arial.ttf") format("truetype");
	
    font-weight: 400;
	
    font-style: normal;
}



@font-face {
	
    font-family: "Arial Local";
	
    src: url("fonts/Arial-Bold.ttf") format("truetype");
	
    font-weight: 700;
	
    font-style: normal;
}


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







body{
	
    background:white;

    font-family: "Arial Local", Arial, sans-serif;

    color:black;

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

    overflow-x:hidden;
}








header{
	
    width:100%;

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

    padding:35px 20px;

    font-size:12px;

    letter-spacing:1px;

    position:relative;
}








.header-left{
	
    display:flex;

    gap:55px;

    align-items:flex-start;
}








.logo{
	
    position:absolute;

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

    font-family: "Arial Local", Arial, sans-serif;

    font-size:50px;

    font-weight:10;

    line-height:1;
}




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








.header-right{
	
    display:flex;

    gap:55px;

    align-items:flex-start;

    text-align:left;

    line-height:1.4;
}










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;
}




.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{

    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:550px;
	
	font-size: 13px;
	
	font-family: "Arial Local", Arial, sans-serif;
            
	color:black;
	
	font-weight:700;
	
	line-height: 1.1;

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




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




.side-text h3{
	
    font-family: "Arial Local", 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 Local", 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 Local", 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;
	
}








a{
	
    text-decoration:none;

    color:black;

    transition:0.3s;
}



a:hover{
	
    opacity:0.5;
}










.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:85vh;

    width:auto;

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




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




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




.scroll-image,

.scroll-image1,

.scroll-image2


{

    position:relative;

    z-index:20;
}













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

    
	
	
	
   
	
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-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{
	
    display:flex !important;
   
    width:100%;
	
    gap:13px !important;
	
    margin:70px 0;
	
	margin-top: -30px;
	
	font-weight: 700;
	

	
	
}
	

    .horizontal-scroll{

        display:flex;
		
        flex-direction:column;

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

        width:100%;

        height:auto;

        gap:20px;

        padding:20px;

        margin-top:0;
    }
	
	
	



    .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;
    }


}