@charset "utf-8";
@media only screen and (max-width: 1080px) {
	.element-full-padding {
		display: flex;
		flex: 1;
		height: 100%;
		width: 100%;
		flex-direction: column;
		padding: 0px 20px;
	}
	.hero-element-box {
		flex-direction: column;
	}
	.hero-element-box-media {
		min-height: 550px;
	}
	.hero-box-media-content-title {
		font-size: 160px;
		line-height: 170px;
	}
	.hero-box-media-content {
    	max-width: 173px;
	}
	.hero-element-box-swiper {
		padding: 100px 0px;
	}
	.hero-element-box-media, .hero-element-box-swiper {
		width: 100%;
	}
	.lg-product-wrapper {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.lg-product-box {
        padding: 20px 7%;
	}
	.lg-product-header {
		padding-bottom: 20px;
		align-items: unset;
        flex-direction: column;
	}
    .lg-product-title {
        font-size: 15px;
        padding-bottom: 4px;
    }
	.lg-product-desc {
		padding-top: 20px;
        font-size: 15px;
        text-align: left;
	}
	.lg-product-price {
        font-size: 15px;
		white-space: nowrap;
		padding-left: 0px;
	}
	.content-info-box {
		padding: 50px 10%;
	}
	.element-content-info {
		gap: 20px;
	}
	.element-title {
		font-size: 1.5rem;
		line-height: 1.75rem;
		font-weight: 400;
	}
	.content-info {
		max-width: 50vw;
	}
	.content-info p {
		padding-bottom: 0px;
	}
	.element-gallery-wrapper-full {
		display: none;
	}
	.element-sm, .element-normal {
		padding: 0px 20px;
	}
	.content-info-center-media {
		width: 150px;
    	height: 192px;
	}
	.sm-product-wrapper {
		padding-top: 40px;
		grid-template-columns: 1fr;
		grid-row-gap: 25px;
	}
	.sm-product-box {
		gap: 25px;
	}
	.sm-product-price {
		white-space: nowrap;
		padding-left: 20px;
	}
	.md-product-wrapper {
		grid-template-columns: 1fr 1fr;
    	grid-row-gap: 40px;
	}
	.menu-wrapper {
		padding: 0px 0px;
	}
	.menu-navigator {
		padding: 0px 0px;
	}
	.scroll-arrow {
		padding: 8px 13px;
	}
	.category {
		padding: 14px 20px;
	}
	.contact-info-wrapper {
		grid-template-columns: 1fr;
	}
	.contact-info {
		column-gap: 40px;
	}
	.contact-bon-info-wrapper, .contact-alt-info-wrapper {
		display: flex;
		flex-direction: column-reverse;
		gap: 40px;
	}
	.contact-alt-info-wrapper {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	.contact-delivery-wrapper {
		gap: 40px;
	}
	.contact-delivery-header {
		padding-left: 0px;
	}
	.contact-delivery-bottom {
		height: 100%;
		width: 100%;
	}
	.contact-delivery-bottom iframe {
		min-height: 460px;
	}
	.row-3-info-wrapper {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.instagram-row-wrapper {
		grid-template-columns: 1fr 1fr;
    	gap: 10px;
	}
	.instagram-row-box:nth-last-child(odd) {
		transform: unset;
	}
	.instagram-row-box-mobile {
		display: block;
	}
	.footer-wrapper-top, .footer-box-extra {
		flex-direction: column;
		align-items: unset;
	}
	.footer-wrapper-top {
		padding: 100px 0px 40px;
	}
	.footer-box-top {
		padding: 20px 0px;
		max-width: 100%;
		align-items: unset;
	}
	.footer-box-top:not(:first-child) {
		border-left-color: transparent;
	}
	.footer-wrapper-bottom {
		flex-direction: column;
    	gap: 10px;
	}
	/*HEADER*/
	.header-navigation {
		position: absolute;
		flex-direction: column;
		top: 90px;
		background-color: #0E0D0A;
		border-top: 1px solid var(--primary-color);
		width: 100%;
		right: -100%;
		padding: 20px;
		align-items: flex-start;
		gap: 10px;
		height: calc(100svh - 90px);
		transition: all 0.2s ease-in;
	}
	.navigator-button-box {
		display: flex;
		width: 100%;
	}
	.navigator-button {
		padding: 9px 0px 8px;
    	width: 100%;
	}
	.header-box {
		position: unset;
	}
	.header-wrapper {
  	  padding: 0px 20px;
	}
	.navigator-mobile-box {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		width: 100%;
	}
	.navigator-mobile-box .navigator-button-outline{
		margin-top: 20px;
	}
	.header-extra .navigator-button-outline{
		display: none;
	}
	.header-box {
		position: unset;
        align-items: center;
	}
	.header-logo-box {
		position: unset;
		transform: unset;
		height: 45px;
	}
	.navigation-active {
		overflow: hidden;
	}
	.navigation-active .header{
		background-color: #0E0D0A
	}
	.navigation-active .header-navigation {
		right: 0px;
	}
	.navigation-active .header.hidden {
		transform: unset;
	}
    .gallery-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
	.text-xs {
        font-size: 0.75rem; /* 12px */
        line-height: 1rem; /* 16px */
    }
    .text-sm {
        font-size: 0.875rem; /* 14px */
        line-height: 1.25rem; /* 20px */
    }
    
    .text-base {
        font-size: 1rem; /* 16px */
        line-height: 1.5rem; /* 24px */
    }

    .text-lg {
        font-size: 1.125rem; /* 18px */
        line-height: 1.75rem; /* 28px */
    }

    .text-xl {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75rem; /* 28px */
    }

    .text-2xl {
        font-size: 1.5rem; /* 24px */
        line-height: 2rem; /* 32px */
    }

    .text-3xl {
        font-size: 1.875rem; /* 30px */
        line-height: 2.25rem; /* 36px */
    }

    .text-4xl {
        font-size: 2.25rem; /* 36px */
        line-height: 2.5rem; /* 40px */
    }

    .text-5xl {
        font-size: 3rem; /* 48px */
        line-height: 3.5rem; /* 56px */
    }

    .text-6xl {
        font-size: 3.75rem; /* 60px */
        line-height: 4.25rem; /* 68px */
    }

    .text-7xl {
        font-size: 4.5rem; /* 72px */
        line-height: 5rem; /* 80px */
    }

    .text-8xl {
        font-size: 6rem; /* 96px */
        line-height: 6.5rem; /* 104px */
    }

    .text-9xl {
        font-size: 8rem; /* 128px */
        line-height: 8.5rem; /* 136px */
    }
	.navigator-mobile {
		display: flex;
	}
    .special-ofert-baner-box-img, .special-ofert-baner-box-info {
        width: 100%;
    }
    .special-ofert-baner-box {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .special-ofert-baner-box-info {
        padding-left: 0px;
        text-align: center;
    }
    .special-ofert-baner-box-img {
        padding-right: 0px;
    }
}
@media only screen and (max-width: 768px) {
    .section-padding {
        padding: 50px 0px;
    }
    .section-padding-bottom {
        padding: 0px 0px 50px;
    }
    .section-padding-top {
        padding: 50px 0px 0px;
    }
    .swiper-slide {
        padding: 0px 12%;
    }
    .testimonials-wrapper {
        min-height: 200px; 
        padding: 40px 0px;
    }
    .gallery-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .main-baner {
        position: relative;
        width: 100%;
        padding-bottom: 50%;
    }
	.contact-info {
		padding-top: 40px;
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 40px;
		column-gap: 0px;
	}
	.hero-swiper-box {
		width: 300px;
		padding: 100px 50px;
	}
	.element-showcase-wrapper {
		align-items: center;
    	flex-direction: column;
	}
	.element-showcase-box {
		margin-right: 0px;
	}
	.content-info {
		max-width: 100vw;
	}
	.md-product-wrapper {
		grid-template-columns: 1fr;
    	grid-row-gap: 25px;
	}
	.lg-product-wrapper {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.content-info-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
	.mobile-reverse {
		display: flex;
    	flex-direction: column-reverse;
	}
	.text-xs {
        font-size: 0.75rem; /* 12px */
        line-height: 1rem; /* 16px */
    }
    
    .text-sm {
        font-size: 0.875rem; /* 14px */
        line-height: 1.25rem; /* 20px */
    }
    
    .text-base {
        font-size: 1rem; /* 16px */
        line-height: 1.5rem; /* 24px */
    }

    .text-lg {
        font-size: 1.125rem; /* 18px */
        line-height: 1.75rem; /* 28px */
    }
    
    .text-xl {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75rem; /* 28px */
    }

    .text-2xl {
        font-size: 1.5rem; /* 24px */
        line-height: 2rem; /* 32px */
    }

    .text-3xl {
        font-size: 1.875rem; /* 30px */
        line-height: 2.25rem; /* 36px */
    }

    .text-4xl {
        font-size: 2.25rem; /* 36px */
        line-height: 2.5rem; /* 40px */
    }

    .text-5xl {
        font-size: 3rem; /* 48px */
        line-height: 3.5rem; /* 56px */
    }

    .text-6xl {
        font-size: 3.75rem; /* 60px */
        line-height: 4.25rem; /* 68px */
    }

    .text-7xl {
        font-size: 4.5rem; /* 72px */
        line-height: 5rem; /* 80px */
    }

    .text-8xl {
        font-size: 6rem; /* 96px */
        line-height: 6.5rem; /* 104px */
    }

    .text-9xl {
        font-size: 8rem; /* 128px */
        line-height: 8.5rem; /* 136px */
    }
	.hero-button-wrapper-row {
		flex-direction: column;
		gap: 10px;
	}
}