/* default settings */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: 0.3s;
	color: #240f0c;
}
body{
	/*max-width: 1920px;*/
	margin: auto;
	background-color:#ffcbaa;
    width: 100%;	
	overflow-x: hidden;
}
/* whole top section */
#header{
	height: 10vh;
	font-family: 'Cookie', cursive;
}
/* logo left section*/
#logo{
	float: left;
	width: 30%;
	display: flex;
}
#logo-img{
	height: 80px;
	margin-left: 5px;
	margin-top: 5px;
}









/* navligation right section */
#nav{
	text-decoration: none;
	height: 120px;
	display: flex;
	justify-content:flex-end;
	background-color: #240f0c;
	align-items: center;
	width: 70%;
	float: right;
    position: relative;
    padding-left: 10px;
	border-bottom-left-radius: 900px;
}
/* navligation buttons style */
.nav-links{
	text-decoration: none;
	color: #240f0c;
	font-size: 40pt;
	border-color: #a66039;
	border-style: solid;
	display: block;
	border-radius: 30px;
	background-color: #ffcbaa;
	transition: 1s;
	padding: 0.5vh 0.5vw;
}
.nav-block{
	position: relative;
	top: 0;
	float: right;
	margin: 0 10px;
	text-align: center;
	transition: 1s;
	border-radius: 30%;
}
/* navligation buttons hover state*/
.nav-block:hover{
	position: relative;
	top:5%;
	transition: 0.1s;
}
.nav-links:hover{
	background-color: #a66039;
	transition: 0.1s;
	border-color:  #ffcbaa;
	color: #ffcbaa;
}










/* hidden menu style for mobile transition */
.burger-menu{
	position: fixed;
	bottom: 0;
	height: 100vh;
	min-width: 100%;
	text-align: center;
	left: 100%;
	transition: 0.5s ease-in-out;
	z-index: 100;

}
.burger-menu ul{
	background-color: #240f0c;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	height: 100vh;
	width: 100%;
    flex-direction: column;
    padding-top: 10vh;
}
.burger-menu li{
	list-style: none;
	width: 80%;
}
.burger-menu .nav-links{
	position: relative;
	height: 100px;
	line-height: 150%;
}
.burger{
	display: none;
}










/* tablet view */
@media screen and (max-width: 1125px){
    /* making logo apear at the middle top */
    #logo{
		clear: both;
		text-align: center;
		margin-left:50%;
		transform: translateX(-50%);
		transition: 0.1s;
		height: 120%;
		margin-top: 10px;
	}
	#logo-img{
		margin: auto;
	}
    /* putting navligation area under logo at full wide  */
	#nav{
		clear: both;
		width: 100vw;
		transition: 0.1s;
        position: relative;
        justify-content: center;
		border-bottom-left-radius: unset;
	}
	.nav-block, .nav-links{
        margin: auto;
        padding: 10px 0.7vw;

	}
}










/* mobile view */
@media screen and (max-width: 768px){
    /* logo again at top left side */
    #logo{
		float: left;
		width: 60%;
		text-align: left;
		position: relative;
		margin-left:10px;
		transform: translateX(0);
		height: 100%;
	}
    /* setting navligation area just for burger button */
    #nav{
		float: right;
		width: 20%;
		position: absolute;
		right: 0;
    }
    /* burger place settings */
	.burger{
		display:unset;
		position: absolute;
        bottom: 99%;
		right: 60px;
        z-index: 101;
        margin: 2%;
	}
    /* asign checkbox for burger menu to the button */
	.burger .toggler{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 102;
		cursor: pointer;
		width: 50px;
		height: 50px;
		opacity: 0;
    }
    /* creating area for burger apearing */
	.burger .lines{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 101;
		width: 60px;
		height: 60px;
		padding: 1rem;
		display: flex;
		align-items: center;
        justify-content: center;
        transition: 0.5s ease;
    }
    /* burger lines create */
	.burger .lines > div{
		position: relative;
		width: 100%;
		height: 3px;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.4s ease;
    }
    /* lines of burger mooved to sides */
	.burger .lines > div:before,
	.burger .lines > div:after{
		content: '';
		position: absolute;
		z-index: 101;
		top: -10px;
		width: 100%;
		height: 3px;
		background: inherit;
		transition: all 0.4s ease;
	}
	.burger .lines > div:after{
		top: 10px;
    }
    /* burger lines after clicking the button */
	.burger .toggler:checked + .lines{
        transform: translateY(-10px);
        transition: 0.5s ease;
    }
    /* rotating lines for creating close button */
	.burger .toggler:checked + .lines > div{
		transform: rotate(135deg);
	}
	.burger .toggler:checked + .lines > div:before,
	.burger .toggler:checked + .lines > div:after{
		top: 0;
		transform: rotate(90deg);
		transition: 0.4s;
	}
	.burger .toggler:checked:hover + .lines > div{
		transform: rotate(225deg);
    }
    /* mobile nav bar apear after clicking the button */
	.burger .toggler:checked ~ .burger-menu{
		left: 0;
    }
    /* desktop navligation buttons disapeare for mobile */
	.nav-block, .nav-block .nav-links{
		display: none;
	}
	#nav{
		border-bottom-left-radius: 900px;
	}
}










/* There starts Footer section */
.footer{
    margin-top: 200px;
    height: 250px;
    width: 100%;
    background-color: #240f0c;
    display: flex;
}
/* text settings for both collums at footer */
.column div, .column2 div{
	color: #ffcbaa;
}
.column a, .column2 a{
    text-decoration: none;
    color: #ffcbaa;
    font-weight: bold;
    line-height: 25px;
}
.column a:hover, .column2 a:hover{
    font-weight:800;
}
/* setting for left column */
.column{
    display: block;
    width: 50%;
    height: 200px;
    text-align: right;
    padding: 30px;
    border-right:dotted #ffcbaa 2px;
}
/* settings for right column */
.column2{
    width: 50%;
    height: 200px;
    text-align: left;
    padding: 30px;
    border-left:dotted #ffcbaa 2px;
}
/* Section for copyright text at the very bottom */
.copyright{
    padding-top: auto;
	background-color: #240f0c;
}
.copyright .copyright-text{
    text-align: center;
	color: #ffcbaa;
}










/* There starts settings for preloading screen */
.preload{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	opacity: 1;
	text-align: center;
	justify-content: center;
	align-items: center;
	background-color: #ffcbaa;
	transition: opacity 1s ease;
}
.preload-finish{
	animation: preload-finishing;
	animation-delay: 1s;
	pointer-events: none;
	opacity: 0;
}
@keyframes preload-finishing{
	from{
		display: unset;
	}
	to{
		display: none;
	}
}
.loading-text{
	margin: auto;
	position: fixed;
	margin-top: 20vh;
	margin-left: 50vw;
	font-size: 10vw;
	font-weight: 800;
	transform: translate(-50%,0);
	text-align: center;
	color:#240f0c;
}
.dot{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #240f0c;
	margin: auto;
	position: fixed;
	margin-top: 50vh;
	animation: preload-dots 2s infinite;
	transition: 1s;
}
.dot1{
	transform: translateY(50px);
}
.dot2{
	transform: translate(36px, -36px);
	animation-delay: 0.5s;
	opacity: 0;
}
.dot3{
	transform: translateX(50px);
	animation-delay: 1s;
	opacity: 0;
}
.dot4{
	transform: translate(36px, 36px);
	animation-delay: 1.5s;
	opacity: 0;
}
.dot5{
	transform: translateY(-50px);
}
.dot6{
	transform: translate(-36px, 36px);
	animation-delay: 0.5s;
	opacity: 0;
}
.dot7{
	transform: translateX(-50px);
	animation-delay: 1s;
	opacity: 0;
}
.dot8{
	transform: translate(-36px, -36px);
	animation-delay: 1.5s;
	opacity: 0;
}
@keyframes preload-dots{
	0%{
		opacity: 0.5;
		transition: 1s;
	}
	12.5%{
		opacity: 1;
		transition: 1s;
	}
	25%{
		opacity: 1;
	}
	90%{
		opacity: 0;
		transition: 1s;
	}
	100%{
		opacity: 0.5;
	}
}