@media (width < 1440px){	
	.header {
		width: 100%;
	}
	
	.header-container {
		width: 96vw;
	}
	
	.hero {
		width: 100%;
	}
	
	.about {
		width: 100%;
	}
	
	.about-container {
		width: 87vw;
	}
	
	.about-container-card {
		width: 50vw;
	}
	
	.about-container-img {
		width: 50vw;
		height: 528px;
	}
	
	.slider {
		width: 100%;
	}
	
	.slider-container {
		width: 96vw;
	}
	
	.best-gifts {
		width: 100%;
		height: 908px;
	}
	
	.best-gifts-container {
		width: 96vw;
		height: 788px;
	}
	
	.best-gifts-container-gifts {
		justify-content: center;
		gap: 12px;
		width: 96vw;
		height: 696px;
	}
	
	.cta {
		width: 100%;
	}

	.footer {
		width: 100%;
	}

	.footer-container {
		width:  100%;
	}
	
	.footer-container-contact {
		width: 100%;
	}
	
	.footer-container-contact-option {
		width: 100%;
	}
	
}

@media (width <= 768px){
	.header {
		width: 768px;
	}
	
	.header-container {
		width: 752px;
	}

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

	.nav-burger-menu-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 40px;
		height: 40px;

		gap: 6px;

		border: none;

		transition: transform .5s;
		cursor: pointer;
	}

	.nav-burger-menu-btn span {
		width: 22px;
		height: 2px;

		border-radius: 1px;
		background-color: var(--dark);

		z-index: 2;
	}

	.nav-container .nav-burger-menu-btn span:nth-child(1){
		transform: translateY(0px);
		transition: 0.5s;
	}
	.nav-container .nav-burger-menu-btn span:nth-child(2){
		transform: translateY(0px);
		transition: 0.5s;
	}

	.nav-container.show .nav-burger-menu-btn span:nth-child(1){
		transform: translateY(4px) rotate(45deg);
		transition: 0.5s;
	}
	.nav-container.show .nav-burger-menu-btn span:nth-child(2){
		transform: translateY(-4px) rotate(-45deg);
		transition: 0.5s;
	}
	
	.nav-container-list {
		position: absolute;
		display: flex;
		flex-direction: column;

		justify-content: center;
		align-items: center;
		/* padding-top: 348px; */

		gap: 8px;

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

		width: 100%;
		height: 100vh;
		/* height: 960px; */

		/* top: 64px; */
		top:0;
		right: -100%;
		transition: transform 0.5s;
	}

	.nav-container.show .nav-container-list{
		transform: translateX(-100%);
	}

	.nav-container-list-item {
		border-radius: 12px;
		padding: 12px 20px;
		/* width: 127px; */
		/* height: 60px; */
	
		font-family: var(--font-family);
		font-weight: 600;
		font-size: 24px;
		line-height: 152%;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--dark);
	}
	
	.hero {
		width: 768px;
	}
	
	.about {
		width: 768px;
	}
	
	.about-container {
		width: 752px;
	}
	
	.about-container-card {
		width: 376px;
	}
	
	.about-container-card-block {	
		width: 256px;
		height: 436px;
	}
	
	.about-container-img {
		border-radius: 20px;
		width: 376px;
		height: 528px;

		overflow: hidden;
	}
	
	.slider {
		width: 768px;
	}
	
	.slider-container {
		width: 752px;
	}
	
	.best-gifts {
		width: 768px;
		height: 908px;
	}
	
	.best-gifts-container {
		gap: 20px;
	
		width: 752px;
		height: 788px;
	}
	
	.best-gifts-container-gifts {
		flex-wrap: wrap;
		justify-content: center;

		gap: 12px;
	
		width: 752px;
		height: 696px;
	}
	
	.best-gifts-container-gifts-card-description-title {
		margin-top: 9px;
		color: var(--dark);
	}
	
	.cta {
		width: 768px;
	}
	
	.footer-container-contact {
		display: flex;
		flex-wrap: wrap;
		border-radius: 12px;
	}
	
	.footer-container-contact-option {
		width: 100%;
	}
}

@media (width > 768px) {
	.nav-container-list-item:hover {
		color: var(--primary);
		background: rgba(255, 70, 70, 0.1);
	
		transition: 0.5s;
	}

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

	.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);
	}

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

	.cta-subcontainer-btn:hover {
		color: var(--dark);
		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-link-socials-item:hover svg > path{
		stroke: var(--primary);
		transition: stroke 0.5s;
	}

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