@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
*{
	padding: 0px ;
	margin: 0px ;
}
:root{
	--primary-color: #F48323 ;
	--primary-color-hover: #C85D12 ;
	--background-color: #F2F2F2 ;
	--border-color: ;
}
html{
	scroll-behavior: smooth ;
}
body,button,select,input,textarea{
	font-family: 'Montserrat', sans-serif ;
	color: #282828 ;
	font-size: 16px ;
}
body{
	background-color: var(--background-color) ;
	background-image: url('../images/background-tile.png') ;
	background-size: 150px ;
}
.container{
	width: calc(100% - 80px) ;
	max-width: 1200px ;
	margin: 20px auto 0px auto ;
}
header,
header .logo{
	display: flex ;
	gap: 10px ;
	align-items: center ;
}
header{
	gap: 30px ;
	justify-content: space-between ;
	margin-bottom: 20px ;
}
header .logo img{
	height: 50px ;
}
header .logo h1{
	font-size: 16px ;
	font-weight: 800 ;
	max-width: 100px ;
}
header > a{
	display: block ;
	padding: 5px 15px ;
	text-decoration: none ;
	background-color: var(--primary-color) ;
	color: var(--background-color) ;
	border-radius: 25px ;
	transition-property: background-color ;
	transition-duration: 0.25s ;
}
header > a:hover{
	cursor: pointer ;
	background-color: var(--primary-color-hover) ;
}
.slide{
	width: 100% ;
	position: relative ;
	overflow: hidden ;
	border-radius: 20px ;
}
.slide .wallpaper{
	display: block ;
	object-fit: cover ;
	object-position: center ;
	width: 100% ;
	height: 100% ;
	position: absolute ;
	top: 50% ;
	left: 50% ;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.slide .text{
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 20px;
	width: 100%;
	height: 100%;
	padding: 60px;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
}
.slide .text h2,
.slide .text p{
	max-width: 700px ;
}
.slide .text h2{
	margin-top: 120px ;
	font-size: 60px ;
}
.slide .text p{
	font-size: 14px ;
}
.slide .text a{
    padding: 10px 20px;
    border-radius: 50px;
    border: 0px;
    background-color: #FFFFFF;
    max-width: 150px;
    transition-property: transform;
    transition-duration: 0.25s;
    text-decoration: none;
    color: #282828;
    text-align: center;
}
.slide .text a:hover {
    cursor: pointer;
    transform: scale(1.1);
}
@media (max-width: 750px) {
    .slide .text h1 {
        font-size: 35px;
        margin-top: 60px;
    }
}
@media (max-width: 500px) {
    .slide .text {
        padding: 45px 30px 45px 30px;
        text-align: center;
        align-items: center;
    }
    .slide .text h1 {
        font-size: 35px;
        margin-top: 30px;
    }
}
footer{
    padding: 20px 0px 20px 0px;
    text-align: center;
    opacity: 0.5;
    font-size: 14px;
}
.grid-c3,
.grid-c2{
	display: grid ;
	grid-gap: 15px ;
}
.grid-c2{
	grid-template-columns: repeat( 2 , 1fr ) ;
}
.grid-c3{
	grid-template-columns: repeat( 3 , 1fr ) ;
}
.input-box{
	position: relative ;
	padding-top: 7.5px;
}
.input-box input,
.input-box textarea,
.input-box select{
	display: block ;
	width: 100% ;
	padding: 5px 15px ;
	border-radius: 25px ;
	border: 1px solid var(--primary-color) ;
	outline: none ;
	background-color: var(--background-color) ;
	box-sizing: border-box ;
}
.input-box label{
    font-size: 12px;
    position: absolute;
    top: 0px;
    left: 10px;
    background-color: #F2F2F2;
    padding: 0px 5px 0px 5px;
    color: var(--primary-color);
    z-index: 1;
}
#reserve{
	margin: 60px 0px 60px 0px ;
}
#reserve > .title{
	text-align: center ;
	font-family: 'Pacifico', cursive ;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	opacity: 0.5 ;
}
#reserve > .subtitle{
	font-size: 14px ;
	opacity: 0.75 ;
	text-align: center ;
	max-width: 500px ;
	margin: 0px auto 20px auto ;
}
.checkbox-box{
	display: flex ;
	align-items: center ;
	gap: 10px ;
	padding: 5px 0px 5px 0px ;
}
.checkbox-box img{
	height: 50px ;
}
.t-subtitle{
	margin: 30px 0px 10px 0px ;
	font-size: 20px ;
	font-weight: 800 ;
	opacity: 0.5 ;
}
.gline{
	grid-gap: 50px ;
	column-gap: 50px ;
	row-gap: 0px ;
}
.gline > div:last-child{
	border-left: 1.5px solid #D9D9D9 ;
	padding-left: 50px ;
}
.checkbox-box.r10{
	padding-left: 20px ;
}
.input-box input[type="submit"]{
	background-color: var(--primary-color) ;
	color: var(--background-color) ;
	transition-property: background-color ;
	transition-duration: 0.25s ;
	border: 0px ;
}
.input-box input[type="submit"]:hover{
	cursor: pointer ;
	background-color: var(--primary-color-hover) ;
}
.input-box textarea{
	border-radius: 10px ;
	resize: none ;
	height: 150px ;
}
.input-total{
	margin: 20px 0px 20px ;
	display: flex ;
	align-items: center ;
	justify-content: end ;
	gap: 10px ;
}
.input-total .value{
	font-weight: 800 ;
	padding: 5px 15px ;
	border-radius: 25px ;
	background-color: var(--primary-color);
	color: var(--background-color) ;
	font-size: 14px ;
}
@media(max-width: 700px){
	.grid-c3{
		grid-template-columns: repeat(2,1fr) ;
	}
	.gline > div:last-child{
		border-left: 0px ;
		padding-left: 0px ;
	}
}
@media(max-width: 500px){
	.slide .text h2{
		font-size: 35px ;
	}
	.grid-c3,
	.grid-c2{
		grid-template-columns: 1fr ;
	}
	.gline > .t-subtitle:nth-child(1){
		order: 1 ;
	}
	.gline > div:nth-child(3){
		order: 2 ;
	}
	.gline > div:last-child{
		order: 4 ;
	}
	.gline > .t-subtitle:nth-child(2){
		order: 3 ;
	}
}
@media(max-width: 400px){
	header .logo h1{
		display: none ;
	}
}
@media(max-width: 350px){
    .slide .text h1 {
        font-size: 25px;
        margin-top: 0px;
    }
}
@media(max-width: 300px){
	.slide .text{
		padding: 30px;
	}
}