@charset "UTF-8";
:root{
	--white: #fff;
	--black: #000;
	--red: #DE0A29;
	--red2: #B1122A;
	--pink:#FEF6F6;
	--pink1: #FFEDF2;
	--font_size: 16px;
	--font_sizeA1: clamp(var(--font_size), 1.8vw, 4rem );
	--font_sizeA2: clamp(1.2rem, 2.8vw, 8rem);
	--font_sizeH: clamp(23px, 4vw, 7rem );
	--width_wrapp: clamp(300px, 86vw, calc(500px + 50vw));
	--width_flex: clamp(10px, 18vw, 1000px);
}
@font-face{
	font-family: "Unbounded-ExtraBold";
	src: url("../fonts/Unbounded/Unbounded-ExtraBold.ttf");
	font-display: swap;
}
@font-face {
	font-family: "Inter_18pt-Regular";
	src: url("../fonts/Inter/Inter_18pt-Regular.ttf");
	font-display: swap;
}

html, body{height: 100%}
body{
	margin: 0 0 2rem 0;
	font-size: var(--font_sizeA1);
	font-family: "Unbounded-ExtraBold", sans-serif;
}
a{text-decoration: none}
.wrapper{
	width: var(--width_wrapp);
	margin: 0 auto;
}
.header{
	position: relative;
	overflow: hidden;
}
.header__h1{
	font-size: var(--font_sizeH);
	text-align: center;
	color: var(--red);
	margin:2.5rem auto 0;
}
.header__a{
	margin: clamp(1rem, 2vw, 3rem) auto clamp(2rem, 6vw, 7rem);
}
.header__a, .discount__a{
	display: flex;
	align-items: center;
	background-color: var(--red);
	color: var(--white);
	font-size: var(--font_sizeA1);
	font-weight: 700;
	padding: clamp(0px, 0.9vw, 2rem) clamp(1rem, 1.5vw, 3rem);
	border-radius: 50px;
	border: clamp(1px, 0.2vw, 2px) solid var(--black);
	width: max-content;
}
.header__a_arrow{
	transform: rotate(-90deg);
	background-color: var(--white);
	border-radius: 40px;
	padding: clamp(0px, 1vw,  0.7rem);
	margin-left: 1rem;
}

.header__start{text-align: center}
.start__h2{
	font-size: var(--font_sizeA1);
	text-align: center;
	margin-top: 0.5rem;
	font-weight: bold;
}
.start__img{
	width: clamp(200px, 80vw, 1000px);
	height: auto;
}
.header__fon_table{
	position: absolute;
	top: 0;
	border-collapse: collapse;
	z-index: -1;
}
.header__fon_table tr,.header__fon_table td{
	border:1px solid var(--pink1);
}
.header__fon_table td{
	padding: clamp(2rem, 2vw, 40rem);
}
/*----------------lern-----------------*/
.learn, .discount{background-color: var(--pink)}
.learn{
	padding: clamp(1rem, 4vw, 4rem) 0;
	overflow: hidden;
}
.learn__h2{
	font-size: var(--font_sizeH);
	margin:2rem 0;
}
.learn__content{
	font-family: "Inter_18pt-Regular", sans-serif;
	font-size: var(--font_sizeA2);
}
.learn__content_info{
	margin: clamp(2rem, 5vw, 10rem) 0;
	font-weight: bold;
}
.learn__content-span{
	color: var(--red);
}
/*------------------------*/
.discount__header{
	font-size: var(--font_sizeH);
}
.discount__body{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: clamp(1rem, 5vw, 8rem) 0;
}
.discount__body-box_left{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: clamp(280px, 40vw, 800px);
}

.discount__a{
	margin: clamp(1rem, 2vw, 3rem) 0 clamp(2rem, 6vw, 7rem);
}
.discount__body_p{
	font-family: "Inter_18pt-Regular", sans-serif;
	font-weight: bold;
}
.discount__body_img{
	width: clamp(200px, 23vw, 1500px);
	height: auto;
	margin: 1rem 0 2rem;
}
.discount__body_footer{
	font-size: var(--font_sizeH);
}
.discount__body_price{
	display: inline-block;
	color: var(--red);
	margin: 1rem 0;
}
.foryou{
	font-family: "Inter_18pt-Regular", sans-serif;
}
.foryou__h2{
	text-align: center;
}
.foryou__body{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.foryou__body > div{
	width: clamp(300px, 33vw, 1200px);
	margin:1rem;
}
.foryou__body_block {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}
.foryou__body_block p{
	width: calc(100% - 100px);
	margin: 0;
}
.foryou__body_img{
	padding: clamp(0px, 1.8vw, 1rem);
	background-color: var(--red);
	border-radius: 10px;
	margin: 10px 1rem 0 0;
	width: clamp(20px, 3vw, 42px);
	height: auto;
}
.footer{
	background-color: var(--red2);
	font-family: "Inter_18pt-Regular", sans-serif;
	color: var(--white);
	padding: clamp(3rem, 4vw, 10rem) 2rem;
}
.footer__content{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.footer__content-div{
	width: clamp(300px, 35vw, 1000px);
}
.footer__sosial img{
	width: clamp(40px, 4vw, 250px);
	height: auto;
	margin: 1rem 1rem 0 0;
}
@media screen and (max-width: 560px){
	.discount__body-box{
		margin: 0 auto;
	}
}