@import "fonts.css";

* {
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
	--main-color: #652D86;
	--secondary-color: #F6F6F6;
	--third-color: #7AB700;
}

html {
	scroll-behavior: smooth;
}

body {
	font-size: 16px;
	font-family: Inter, arial;
}

figure {
    margin:0
}

img {
	width: 100%;
}

h1, h2 {
	color: var(--main-color);
	font-family: AmorSansPro, arial;
}

a {
    text-decoration:none
}
figure {
    margin:0
}

header {
	padding: 16px 10px;
	background-color: var(--main-color);
	width: 100%;
	z-index: 900;
}
.header__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header__middle {
	display: none;
	grid-gap: 10px;
}
.header__middle a {
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}
.header__middle a:hover {
	text-decoration: underline;
}
.header__logo {
	width: 130px;
}
.header__menu__icon {
	width: 26px;
}
.header__phone {
	display: none;
	align-items: center;
	grid-gap: 5px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	margin-right: 5px;
}
.header__phone:hover {
	text-decoration: underline;
}
.header__phone img {
	width: 14px;
}
.header__whatsapp {
    align-items: center;
    grid-gap: 4px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
	display: none;
}
.header__whatsapp:hover {
    text-decoration: underline;
}
.header__whatsapp__img {
    width: 40px;
    margin-left: 5px;
    content: url('../img/icons/wa.png');
    transition: content 0.3s ease-in-out;
}
.header__whatsapp:hover .header__whatsapp__img {
    content: url('../img/icons/wa_hover.png');
}

.header__menu {
	display: none;
	position: fixed;
	top: 68px;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	padding: 40px 20px;
}
.header__menu__buttons {
	position: absolute;
	left: 50%;
	bottom: 150px;
	transform: translate(-50%);
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
	grid-gap: 10px;
	border-top: 1px solid #EFEFEF;
}
.header__menu__btn {
    display: block;
    width: 130px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 2px solid var(--main-color);
    border-radius: 20px;
    padding: 8px 0;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    color: var(--main-color);
}
.header__menu__btn.af {
	color: #fff;
	background-color: var(--main-color);
}

footer {
	padding: 20px;
}
.footer__rrss {
	display: block;
	text-align: center;
	padding: 40px 20px;
	background-color: var(--secondary-color);
}
.footer__rrss img {
	width: 42px;
}
.footer__links {
	padding: 20px 0;
}
.footer__links {
	display: flex;
	grid-gap: 30px;
	flex-direction: column;
}
.footer__links a {
	color: #000;
	text-decoration: none;
}
.footer__links span {
	display: none;
}
.footer__line {
	width: 100%;
	margin: 20px auto;
	border-top: 1px solid #EFEFEF;
}
.footer__yastas {
	font-size: 14px;
	padding: 20px 0;
}
.footer__yastas img {
	width: 120px;
	margin-bottom: 10px;
}
.footer__yastas__gentera {
	font-size: 14px;
	margin-bottom: 10px;
}
.footer__yastas__gentera img {
	width: 93px;
	margin-bottom: 0;
}
.footer__esr {
	padding-bottom: 20px;
}
.footer__esr img {
	width: 100px;
}


@media screen and (min-width: 360px) {

	.header__menu__btn {
		width: 150px;
	}
	.header__whatsapp {
		display: none;
	}
	.header__left {
		margin:auto;
	}
	.footer__rrss {
		padding: 50px 20px;
	}

}

@media screen and (min-width: 500px) {

	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 900;
	}
	.header__menu {
		width: 360px;
	}
	.header__logo {
		width: 100px;
	}
	.header__whatsapp{
		display: none;
	}
	.footer__links {
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		width: 460px;
		margin: auto;
	}
	.footer__line {
		width: 460px;
	}
	.footer__yastas {
		text-align: center;
	}
	.footer__esr {
		text-align: center;
	}

}

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

	.header__left{
		margin: 0;
	}
	.header__middle {
		display: flex;
        align-items: center;
	}
	.header__right {
		grid-gap: 6px;
		display: flex;
	}
	.header__menu__icon {
		display: none;
	}
	.header__phone {
		display: flex;
	}
	.header__phone span {
		display: none;
	}
	.header__afiliarme {
		display: block;
		font-size: 12px;
	}
	.header__whatsapp{
		display: block;
	}
	.footer__links {
		width: 680px;
	}
	.footer__line {
		width: 680px;
	}
	.footer__line.esr {
		display: none;
	}
	.whatsapp__img {
        width: 76px;
    }
}

@media screen and (min-width: 1000px) {

	.header__content {
		padding: 0 16px;
		margin: auto;
	}
	.header__middle {
		grid-gap: 14px;
	}
	.header__middle a {
		font-size: 14px;
	}
	.header__phone img {
		width: 16px;
	}
	.header__afiliarme {
		font-size: 14px;
	}
	.footer__rrss {
		padding: 70px 0;
	}

}

@media screen and (min-width: 1200px) {

	header {
		padding: 16px 0;
	}
	.header__right {
		grid-gap: 12px;
	}
	.header__logo {
		width: 130px;
	}
	.header__phone span {
		display: block;
	}
	.header__afiliarme {
		font-size: 16px;
		padding: 8px 20px;
	}
	.header__middle {
		grid-gap: 18px;
	}
	.header__middle a {
		font-size: 16px;
	}
	.header__middle .yastas {
		font-size: 20px;
	}
	.header__phone {
		font-size: 16px;
	}

	footer {
		padding-top: 40px;
	}
	.footer__rrss img {
		width: 40px;
	}
	.footer__links {
		width: 1050px;
		grid-gap: 26px;
	}
	.footer__links .sep4 {
		display: none;
	}
	.footer__links span {
		display: block;
	}
	.footer__yastas {
		margin-bottom: 0;
		padding-top: 30px;
		font-size: 14px;
	}
	.footer__yastas img {
		width: 140px;
		margin-bottom: 10px;
	}
	.footer__yastas__gentera {
		margin-bottom: 10px;
	}
	.footer__yastas__gentera img {
		width: 100px;
		margin-bottom: 0;
	}
	.footer__esr {
		padding-bottom: 30px;
	}
	.footer__line {
		width: 1180px;
	}

}