@import url('https://fonts.googleapis.com/css2?family=Allura&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');


:root {
	--primary: #ff4646;
	--dark: #181c29;
	--static-white: #fff;
	--content-background: #ecf3f8;
	--tag-purple: #4361ff;
	--tag-pink: #ff43f7;
	--tag-green: #06a44f;
	--primary-10: rgba(255, 70, 70, 0.1);
	--static-white-20: rgba(255, 255, 255, 0.2);
	--static-white-40: rgba(255, 255, 255, 0.4);
	--overlay: rgba(24, 28, 41, 0.8);

    --font-family: "Montserrat", sans-serif;
    --second-family: "Allura", sans-serif;
    --third-family: "SF Pro", sans-serif;
}

* {
    box-sizing: border-box;
    list-style: none;

    margin: 0px;
    padding: 0px;

    border: none;
    outline: none;
	
    list-style: none;
    text-decoration: none;
    font-size: inherit;
	font-weight: inherit;

    color: inherit;
	background-color: transparent;

    /* border: solid 0.5px black; */
}

html {
    scroll-behavior: smooth;
}

h1 {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--static-white);
}

h2 {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 24px;
	line-height: 152%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--static-white);
}

h3 {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 152%;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--static-white);
}

h4 {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 12px;
	line-height: 130%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--static-white);
}

.body-container {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.header {
	margin: 0px auto;
	/* padding: 0px 8px; */
	width: 1440px;
	height: 64px;

	background: var(--static-white);
}

.header-container {
	display: flex;
	justify-content: space-between;

	margin: 0 auto;
	padding: 12px 0px;
	width: 1276px;
	/* height: 64px; */
	max-width: 1276px;

}

.header-container-logo {
	display: flex;
	justify-content: space-between;
	align-items: center;

	gap: 8px;

	border: 1px dashed var(--static-white);
	border-radius: 12px;
	padding: 8px 20px;
	/* width: 141px; */
	height: 40px;
}

.header-container-logo:active {
	border: 1px dashed var(--tag-green);
	border-radius: 4px;

	background: rgba(6, 164, 79, 0.1);

	transition: border 0.5s;
}

.header-container-logo-icon {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-container-logo-title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 12px;
	line-height: 130%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dark);
}

/* .nav-container { */
	/* width: 1123px; */
	/* height: 40px; */
/* } */

.nav-burger-menu {
	display: none;
}

.nav-container-list {
	display: flex;
	gap: 6px;
}

.nav-container-list-item {
	border-radius: 12px;
	padding: 12px 20px;
	/* width: 78px; */
	/* height: 40px; */

	font-family: var(--font-family);
	font-weight: 600;
	font-size: 12px;
	line-height: 130%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dark);

	/* border: 1px dashed var(--static-white); */
}

/* .nav-container-list-item:hover {
	color: var(--primary);
	background: rgba(255, 70, 70, 0.1);

	transition: 0.5s;
} */

.nav-container-list-item:active {
	transform: translateY(2px);
	transition: 0.5s;
}

.main {
	border-radius: 20px;
}

.hero {
	margin: 0 auto;

	border-radius: 20px 20px 0 0;
	padding: 60px 8px;
	width: 1440px;
	height: 524px;

	background: var(--primary);
	background-image: url("./assets/img/bg-ball.png"), url("./assets/img/bg-snow.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 50% 50%;
}

.hero-container {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;

	gap: 12px;
	
	padding: 60px 0px;
	width: 426px;
	/* height: 404px; */
	max-width: 426px;
}

.hero-container-caption {
	height: 24px;

	font-family: var(--second-family);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--static-white);
}

.hero-container-title {
	height: 144px;
	
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);

}

.hero-container-btn {
	padding: 20px 32px;

	border-radius: 20px;
	background: var(--dark);
	width: 235px;
	height: 56px;

	font-family: var(--font-family);
	font-weight: 600;
	font-size: 12px;
	line-height: 130%;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);

	transition: 0.5s;
}

/* .hero-container-btn:hover {
	color: var(--dark);
	background: var(--content-background);
} */

.hero-container-btn:active {
	transform: translateY(2px);
}

.about {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	align-items: center;

	/* padding: 60px 8px; */
	width: 1440px;
	height: 648px;

	background: var(--primary);
	background-image: url("./assets/img/bg-snow.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 50% 50%;
}

.about-container {
	display: flex;
	justify-content: space-between;
	border-radius: 20px;

	width: 1276px;
	/* height: 528px; */
	/* max-width: 1276px; */

	background: var(--static-white);
}

.about-container-card {
	display: flex;
	align-items: center;

	padding: 0px 60px;
	width: 638px;
	/* height: 528px; */
}

.about-container-card-block {	
	display: flex;
	flex-direction: column;
	gap: 20px;

	padding: 60px 0px;

	width: 426px;
	height: 328px;
	max-width: 426px;
}

.about-container-card-block-caption {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.05em;
	color: var(--primary);
}

.about-container-card-block-title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 24px;
	line-height: 152%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dark);
}

.about-container-card-block-text {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 148%;
	color: var(--dark);
}

.about-container-img {
	border-radius: 20px;
	height: 528px;

	overflow: hidden;

	display: flex;
	justify-content: center;
}

.slider {
	display: flex;
	justify-content: center;
	align-items: center;

	margin: 0 auto;

	padding: 60px 8px;
	width: 1440px;
	/* height: 488px; */

	overflow: hidden;
	
	background: var(--primary);
	background-image: url("./assets/img/bg-snow.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 50% 50%;
}

.slider-container {
	width: 1276px;
	height: 368px;
	max-width: 1276px;
}

.slider-container-head {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;

	gap: 12px;
	/* width: 426px; */
	/* height: 72px; */
	/* max-width: 426px; */
}

.slider-container-head-caption {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--static-white);
}

.slider-container-head-title {

	font-family: var(--font-family);
	font-weight: 600;
	font-size: 24px;
	line-height: 152%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);
}

.slider-container-row {
	margin: 20px 0px;

	/* width: 1276px; */
	/* height: 200px; */
}

/* .slider-container-row-block { */
	/* width: 1993px; */
	/* height: 200px;	 */
/* } */

.slider-container-row-slider {
	display: flex;
	align-items: center;
	gap: 20px;

	transition: 0.3s;
}

.slider-container-row-sl-text {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 80px;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);
}

.slider-container-row-sl-img {
	border-radius: 20px;
	width: 200px;
	height: 200px;
}

.slider-container-button {
	display: flex;
	justify-content: end;

	gap: 20px;

	/* width: 1276px;
	height: 56px; */
}

.slider-container-btn {
	border: 1px solid var(--static-white-40);
	border-radius: 20px;
	width: 56px;
	height: 56px;
	
	stroke-opacity: 0.4;

	transition: 0.5s;
}

.slider-container-btn.active {
	border: 1px solid var(--content-background);
	stroke-opacity: 1;
	cursor: pointer;
	transition: 0.5s;
}

/* .slider-container-btn.active:hover {
	border: 1px solid var(--static-white);
	background: var(--static-white);
}

.slider-container-btn.active:hover svg > path{
	stroke: var(--primary);
} */

.slider-container-btn.active:active {
	transform: translateY(2px);
	transition: 0.5s;
}


.best-gifts {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	align-items: center;

	padding: 60px 8px;
	width: 1440px;
	height: 554px;

	background: var(--primary);
	background-image: url("./assets/img/bg-snow.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 50% 50%;
}

.best-gifts-container {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 20px;


	width: 1276px;
	height: 434px;
	max-width: 1276px;
}

.best-gifts-container-head {
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	gap: 12px;


	width: 426px;
	height: 72px;
	max-width: 426px;
}

.best-gifts-container-head-caption {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--static-white);
}

.best-gifts-container-head-title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 24px;
	line-height: 152%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);
}

.best-gifts-container-gifts {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	/* margin-top: 20px; */

	width: 1276px;
	height: 342px;
}

.best-gifts-container-gifts-card {
	border-radius: 20px;
	width: 310px;
	height: 342px;

	background: var(--content-background);
	border: 1px dashed var(--content-background);

	transition: 0.5s;
	cursor: pointer;
}

/* .best-gifts-container-gifts-card:hover h3{
	color: var(--primary);
	transition: color 0.5s;
} */

.best-gifts-container-gifts-card:active {
	border: 1px dashed var(--tag-green);
	transition: border 0.5s;
	/* border-radius: 20px; */
}

.best-gifts-container-gifts-card-img {
	width: 310px;
	/* height: 230px; */
	height: 225px;

}

.best-gifts-container-gifts-card-description {
	border-radius: 20px;
	padding: 20px;
	/* width: 310px; */
	height: 112px;

	background: var(--static-white);
}

.best-gifts-container-gifts-card-description-work {
	color: var(--tag-purple);
}

.best-gifts-container-gifts-card-description-health {
	color: var(--tag-green);
}

.best-gifts-container-gifts-card-description-harmony {
	color: var(--tag-pink);
}

.best-gifts-container-gifts-card-description-title {
	margin-top: 9px;
	color: var(--dark);
}


.cta {
	padding: 60px 8px;
	width: 1440px;
	height: 668px;

	margin: 0 auto;
	border-radius: 0 0 20px 20px;

	background: var(--primary);
	background-image: url("./assets/img/bg-forest.png"), url("./assets/img/bg-snow.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 50% 50%;
}

.cta-container {
	margin: 0 auto;

	border-radius: 20px;
	padding: 60px 0px;
	/* width: 1276px; */
	/*height: 548px; */
	/* max-width: 1276px; */
}

.cta-subcontainer {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;

	gap: 20px;

	padding: 60px 0px;
	/* width: 426px; */
	/* height: 428px; */
	max-width: 426px;
}

.cta-subcontainer-title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 24px;
	line-height: 152%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);
}

.cta-subcontainer-btn {
	border-radius: 20px;
	padding: 20px 32px;
	/* width: 235px; */
	/* height: 56px; */

	background: var(--dark);
	
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 12px;
	line-height: 130%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--static-white);

	transition: 0.5s;
}

/* .cta-subcontainer-btn:hover {
	color: var(--dark);
	background: var(--content-background);
} */

.cta-subcontainer-btn:active {
	transform: translateY(2px);
}

.cta-subcontainer-clock {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;

	gap: 8px;

	/* width: 426px; */
	/* height: 104px; */
}

.cta-subcontainer-clock-caption {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--static-white);
}

.cta-subcontainer-clock-timer {
	display: flex;
	/* justify-content: center; */
	align-items: center;

	border-radius: 20px;
	padding: 8px 12px 12px 12px;
	width: 344px;
	height: 72px;

	background: var(--static-white-40);
}

.cta-subcontainer-clock-timer-date {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;

	width: 80px;
	/* height: 52px; */
}

/* .cta-subcontainer-clock-timer-date-title {
} */

/* .cta-subcontainer-clock-timer-date-subtitle {
} */

.cta-subcontainer-clock-timer-line {
	display: flex;
	justify-content: center;
	align-items: center;

	border: 1px solid var(--static-white-40);
	width: 20px;
	height: 0px;

	transform: rotate(90deg);
}

.footer {
	padding: 60px 8px;
	/* width: 1440px; */
	/* height: 496px; */

	background: var(--static-white);
}

.footer-container {
	display: flex;
	flex-direction: column;
	/* flex-wrap: wrap; */
	justify-content: center;
	align-items: center;

	gap: 60px;

	/* width: 1276px;
	height: 376px;
	max-width: 1276px; */
}

.footer-container-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;

	border-radius: 60px;
	/* width: 1276px; */
	/* height: 204px; */
}

.footer-container-contact-option {
	display: flex;
	flex-direction: column;
	gap: 12px;

	border: 1px dashed var(--static-white);
	border-radius: 20px;
	padding: 20px;
	width: 417px;
	height: 204px;

	background: var(--content-background);
}

/* .footer-container-contact-option:hover h3{
	color: var(--primary);
	transition: color 0.5s;
}

.footer-container-contact-option:hover div{
	color: var(--primary);
	transition: color 0.5s;
} */

.footer-container-contact-option:active {
	border: 1px dashed var(--tag-green);
	background: rgba(6, 164, 79, 0.1);

	color: var(--dark);

	transition: 0.5s;
}

.footer-container-contact-option:active h3{
	color: var(--dark);
}

.footer-container-contact-option:active div{
	color: var(--dark);
}

.footer-container-contact-option-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-container-contact-option-title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 24px;
	line-height: 152%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--dark);
}

.footer-container-contact-option-subtitle {
	text-align: center;
	color: var(--dark);
}

.footer-container-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	/* width: 1276px;
	height: 112px; */
}

.footer-container-link-socials {
	display: flex;
	justify-content: space-between;

	gap: 12px;

	/* width: 196px;
	height: 40px; */
}

.footer-container-link-socials-item {
	border: 1px dashed var(--static-white);
	padding: 8px;
	/* width: 40px;
	height: 40px; */
}

/* .footer-container-link-socials-item:hover svg > path{
	stroke: var(--primary);
	transition: stroke 0.5s;
} */

.footer-container-link-socials-item:active {
	border: 1px dashed var(--tag-green);
	background: rgba(6, 164, 79, 0.1);
	
	transition: 0.5s;
}

.footer-container-link-socials-item:active svg > path{
	stroke: var(--dark);
}

.footer-container-link-paragraph {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 148%;
	text-align: center;
	color: var(--dark);
}

.footer-container-link-caption {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--dark);
}

/* .footer-container-link-caption:hover {
	color: var(--primary);
	transition: color 0.5s;
} */

.footer-container-link-caption:active {
	transform: translateY(2px);
	transition: transform 0.5s;
}

/*popap*/
.popap {
	display: none;
}

.on {
    position: absolute;

    top: 0px;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5);
}

.body-container.blackout .on{
    left: 0;
}

.popap.show{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    /* height: 514; */
    z-index: 1000;

	display: flex;
    flex-direction: column;
    border-radius: 20px;
    width: 400px;
    background: #ECF3F8;
}

.popap-close {
	width: 40px;
	height: 40px;

	position: absolute;
	right: 12px;
	top: 12px;
}

.popap-card {
	border-radius: 20px;
	width: 400px;
	/* height: 342px; */

	background: var(--content-background);
	border: 1px dashed var(--content-background);

	transition: 0.5s;
	cursor: pointer;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}

@media (width <= 380px){
	.popap.show{
		width: 364px;
	}

	.popap-card {
		width: 364px;
	}
}

.popap-card-img {
    width: 100%;
    height: 230px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	object-fit: cover;
}

.popap-card-description {
    display: flex;
    flex-direction: column;
    height: 280px;
    gap: 8px;
    background: white;
    padding: 20px;
    border-radius: 20px;
}

.popap-card-description-work {
	color: var(--tag-purple);
}

.popap-card-description-health {
	color: var(--tag-green);
}

.popap-card-description-harmony {
	color: var(--tag-pink);
}

.popap-card-description-title {
	color: var(--dark);
	letter-spacing: 1.2px;
}

.popap-card-description-title2 {
	margin-top: 11px;
	color: var(--dark);
	letter-spacing: 0.6px;
}

.popap-card-description-subtitle {
	color: var(--Dark, #181C29);
	/* Paragraph */
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 148%; /* 23.68px */
}

.popap-card-description-container-item {
	/* margin-top: 4px; */
    line-height: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popap-card-description-container-item-title {
	width: 181px;

	color: var(--Dark, #181C29);

	/* Paragraph */
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 148%; /* 23.68px */
}

.popap-card-description-container-item-score {
    margin-top: 2px;
    line-height: 15px;
    display: flex;
    align-items: center;

	color: var(--Dark, #181C29);

	/* Paragraph */
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 148%; /* 23.68px */
}

.popap-card-description-container-item-superpowers {
	margin-top: -1px;
    line-height: 15px;
    display: flex;
	justify-content: space-between;
    align-items: center;

	width: 111px;

}