/*Обнуление*/
*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
:root{
	--dark:#1E1E1E;
	--white:#fff;
	--coffee:#603809;
	--text:#707070;
}
body{
	
	font-family:"Playfair Display", serif;	
}

.gradient {background: 
		linear-gradient(to right, transparent 0px, transparent 170px,rgba(30, 30, 30, 0.6) 170px, transparent 100%),
		url(img/coffee_image.png) no-repeat center center/cover;
	min-height: 100vh;
}

.header{

	padding-block-start: 25px; 
	max-width: 1105px;
	margin-inline: auto;
	
	}
	
h1{
	width: 155px;
	font-family: "Clicker Script", cursive;
	font-weight: 400;
	font-size: 40px;
	color:var(--white);
	}
.header__nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}

.header__list{
	display: flex;
	gap: 60px;
}

.header__list-link{
	color:var(--white);
	font-weight: 500;
	transition: 0.3s;
}
.header__list-link:hover{color:gray;}



.header__list-sign-in{
	color:var(--white);
	font-weight: 500;
	border-bottom: 1px solid var(--white);
}

.header__list-sign-up{
	padding:14px 27px 15px 27px;
	color:var(--dark);
	font-weight: 500;
	background-color: #F9C06A;
	border-radius: 25px;
	transition: 0.3s;
}
.header__list-sign-up:hover{
	background-color: #F9C06A;
	opacity: 80%;
}
.header__list-buttons{
	display: flex;
	gap: 20px;
	align-items: center;
}

.hero{
padding: 126px 0;}

.hero_content{
	max-width: 1105px;
	margin-inline: auto;

}
.up_cofee{
	width: 369px;
	font-size: 22px;
	color:var(--white);
	font-weight: 500;
	padding: 0 0 15px 0;
}
h2 {
	width: 449px;
	font-family: "Clicker Script", cursive;
	font-size: 220px;
	color:var(--white);
}
.down_coffee{
	width: 527px;
	font-size: 20px;
	color:var(--white);
	padding: 50px 0 0 0;
	line-height: 34px;
}

.hero_button{
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 50px 0 0 0;

}
.hero_butn-link{
	font-size: 16px;
	font-weight: 700;
	padding:14px 27px 13px 27px;
	color:var(--dark);
	background-color: #F9C06A;
	border-radius: 25px;
	transition: 0.3s;
}
.hero_butn-link:hover{
	background-color: #F9C06A;
	opacity: 80%;
}

.discover_container{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-block-start: 100px;
	max-width: 1105px;
	margin-inline: auto;
}
h3{width: 585px;
font-size: 54px;
font-weight: 700;
color: var(--coffee);
}

.discover_p{
	width: 585px;
	line-height: 34px;
	font-size: 20px;
	color:var(--text);
	padding: 30px 0 0 0;
	font-weight: 400;
}

.discover_img{
	margin-top: -80px;
}


discover_img-coffee{
	padding: 0 0 0px 0;
}

.discover_button{
	margin-top: 80px;

}

.discover_butn-link{
	
	font-size:16px;
	font-weight: 700;
	padding:14px 27px 13px 27px;
	color:var(--dark);
	background-color: #F9C06A;
	border-radius: 25px;
	transition: 0.3s;
}
.discover_butn-link:hover{
	background-color: #F9C06A;
	opacity: 80%;
}

.coffeestyle_img-blob-coffee{
	width: 490px;
	
}

h4{
	text-align: center;
	font-size: 54px;
	font-weight: 700;
	color:var(--coffee);
	
}

.coffeestyle-p{
	text-align: center;
	line-height: 34px;
	font-size: 20px;
	color:var(--text);
	padding: 30px 0 0 0;
	font-weight: 400;
}

.coffeestyle_img{
	padding-top: 32px;
	width: 300px;
	gap: 20px;
}

.coffeestyle_img{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-inline: 93px;
	
}

h5{
	font-size: 22px;
	font-weight: 700;
	color:var(--coffee);
	text-align: center;
	
}

.menu-info{
	background-color: rgba(255, 249, 241, 0.32);
	border: 2px solid rgba(212, 165, 116, 0.42);
	padding: 30px 20px 40px 20px;
	text-align: center;
    position: relative;

}
.menu-description{
	font-size: 16px;
	font-weight: 400;
	color:var(--dark);
	padding: 6px 0 0 0;
	text-align: center;
}

.menu-price{
	font-size: 18px;
	font-weight: 700;
	color:var(--coffee);
	padding: 6px 0 0 0;
	text-align: center;
}


.coffeestyle_butn-link {
	display: inline-block;
    background-color: #F9C06A;
    color: var(--dark);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    position: absolute;
    bottom: -25px; /* половина висоти кнопки */
    left: 50%;
    transform: translateX(-50%); /* центрує кнопку */
}

.coffeestyle_butn-link:hover {
	background-color: #F9C06A;
	opacity: 80%;
}