@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-size: 32px;
	font-weight: 600;
	line-height: 150%;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--static-white);
}

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

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

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

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

.header {
	margin: 0 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);
	border: 1px solid var(--static-white);

	transition: 0.5s;
} */

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

.nav-container-list-item.choose {
	cursor: default;

	color: var(--primary);
	background: var(--primary-10);
}

.nav-container-list-item.choose:active {
	transform: translateY(0px);
}

.main {
	border-radius: 20px;
}

.gift {
	margin: 0 auto;
	border-radius: 20px;

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

	background: var(--primary);
	background-image: url("../assets/img/bg-garland.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
}

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

	gap: 20px;
	
	/* padding: 60px 0px; */
	width: 1276px;
	/* height: 1274px; */
	max-width: 1276px;
}

.gift-container-title {
	text-align: center;
	width: 426px;
	height: 144px;
	max-width: 426px;
}

.gift-container-tabs {
	display: flex;
	justify-content: center;

	gap: 8px;

	width: 474px;
	height: 40px;
}

.gift-container-tabs-item {
	border-radius: 12px;
	padding: 11px 20px;
	/* width: 65px; */
	height: 40px;

	cursor: pointer;

	transition: 0.5s;
}

/* .gift-container-tabs-item:hover {
	background: var(--static-white-20);
} */

.gift-container-tabs-item:active {
	/* background: var(--static-white-20); */
	transform: translateY(2px);
	transition: transform 0.5s;
}

/* .gift-container-tabs-item:hover button{
	cursor: pointer;
} */

.gift-container-tabs-item.choose {
	cursor: default;
	background: var(--static-white-20);
}

.gift-container-tabs-item.choose:active {
	transform: none;
}

/* .gift-container-tabs-item.choose:hover button{
	cursor: default;
} */

.gift-container-tabs-item-btn {
	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);
}

.gift-container-cards {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;

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

.gift-container-cards-item {
	border-radius: 20px;
    width: 310px;
    height: 342px;
    background: var(--content-background);

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

	cursor: pointer;
}

/* .gift-container-cards-item:hover h3{
	color: var(--primary);
	transition: color 0.5s;
} */

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

.gift-container-cards-item-img {
	width: 310px;
    /* height: 230px; */
    height: 225px;
}

.gift-container-cards-item-text {
    border-radius: 20px;
    padding: 20px;
    /* width: 310px; */
    height: 112px;
    background: var(--static-white);
}

.gift-container-cards-item-text-work {
    color: var(--tag-purple);
}

.gift-container-cards-item-text-health {
    color: var(--tag-green);
}

.gift-container-cards-item-text-harmony {
	color: var(--tag-pink);
}

.gift-container-cards-item-text-subtitle {
	margin-top: 9px;

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

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

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

.footer-container {
	display: flex;
	flex-direction: column;
	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;

}