@media screen and (min-width: 500px) {
	.alignleft,
	.alignright {
		max-width: 45%;
	}
}

.hamburger-menu {
	background-color: transparent;
	border: 0;
}

@media screen and (max-width: 499px) {
	.alignleft,
	.alignright {
		width: 100%;
	}
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 992px) {
	.mobile-switcher-lang .gt_float_switcher .gt-selected .gt-current-lang {
		padding: 0;
	}

	.grid-2 {
		grid-template-columns: 1fr !important;
	}

	.mobile-sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		width: 300px;
		height: 100%;
		background: #fff;
		box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
		transition: left 0.5s ease;
		z-index: 9999;
		display: block;
	}

	.mobile-sidebar[aria-hidden='false'] {
		left: 0;
	}

	.sidebar-content {
		display: flex;
		flex-direction: column;
		padding: 20px;
		position: relative;
	}

	.close-sidebar {
		align-self: flex-end;
		background: none;
		border: none;
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.hero-section__columns {
		display: flex;
		flex-direction: column;
	}

	.first-section .hero-section__columns {
		flex-direction: column-reverse;
	}

	.hero-section__text,
	.beauty-section__text {
		padding: 35px 20px;
	}

	.btn {
		width: 100%;
	}

	.social-icons__inner {
		padding-bottom: 4rem;
	}
}

/****************************************
 * Hovers
 ****************************************/
@media (hover: hover) {
	.blog-posts__slide-image-link .blog-posts__slide-image:hover,
	.blog-list__item-image-wrapper:hover .blog-list__item-image {
		scale: 1.1;
	}

	.btn-text:hover path {
		stroke: var(--clr-accent);
	}

	.post-navigation .nav-link:hover {
		color: var(--clr-accent);
	}
}

/****************************************
 * Mobile First
 ****************************************/

@media (min-width: 768px) {
	:where(ul[class*='columns']) {
		gap: 2.5rem;
	}

	.woocommerce div.product form.cart .button {
		width: min(18.75rem, 100%);
	}

	.slick-dots {
		gap: 1.8125rem;
	}

	.social-icons {
		gap: 4.5rem;
	}

	.contact-us__details {
		border: 1px solid #e1e1e1;
		border-radius: 1rem;
		padding: 1.5rem 3rem;
	}

	.accordion .accordion-button {
		font-size: 2rem;
	}

	.faq__title {
		font-size: 3rem;
	}
}

@media (min-width: 992px) {
	.blog-list__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(2rem, 10vw, 4.688rem);
	}
}

@media (min-width: 1200px) {
	.wrapper-xl {
		grid-template-columns:
			minmax(var(--wrapper-padding-inline), 1fr)
			repeat(12, minmax(0, calc(var(--wrapper-max-width) / 12)))
			minmax(var(--wrapper-padding-inline), 1fr);
		padding-inline: 0;
	}

	.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.contact-us__info {
		grid-column: 2 / span 6;
	}

	.contact-us__map {
		grid-column: 8 / -1;
	}

	.faq-container {
		grid-column: 2 / 9;
	}

	.faq__image {
		grid-column: 9 / -1;
	}

	.faq__image img {
		border-radius: 1rem 0 0 1rem;
	}

	.why-collagen__row:nth-child(odd) .why-collagen__row-text {
		grid-column: 2 / 8;
	}

	.why-collagen__row:nth-child(odd) .why-collagen__row-media {
		grid-column: 8 / -1;
	}

	.why-collagen__row:nth-child(odd) .why-collagen__row-image {
		border-radius: 1rem 0 0 1rem;
	}

	.why-collagen__row:nth-child(even) .why-collagen__row-text {
		grid-column: 8 / 14;
	}

	.why-collagen__row:nth-child(even) .why-collagen__row-media {
		grid-column: 1 / 8;
	}

	.why-collagen__row:nth-child(even) .why-collagen__row-image {
		border-radius: 0 1rem 1rem 0;
	}

	.why-collagen__row:nth-child(odd) .why-collagen__row-media,
	.why-collagen__row:nth-child(even) .why-collagen__row-text {
		padding-left: 6.25rem;
	}
}

/****************************************
 * Desktop first
 ****************************************/

@media (max-width: 1199.98px) {
	.contact-us__map {
		padding-left: 1.25rem;
	}

	.contact-us__map svg {
		display: block;
		margin-left: auto;
	}

	.why-collagen__row {
		gap: 1.5rem;
	}
}

@media (max-width: 767.98px) {
	.faq-box + .faq-box {
		margin-top: 5rem;
	}

	.main-header {
		gap: 20px;
	}

	.accordion .accordion-button {
		padding-left: 0;
	}

	.hero {
		background-image: none !important;

		padding-top: 73px;
	}

	.hero .container-xxl {
		min-height: auto !important;
	}

	.right-header {
		gap: 19px;
	}

	.main-header {
		padding: 12px 19px;
	}

	.newsletter h2 {
		font-size: 20px;
	}

	.newsletter__inner {
		padding: 20px;
	}

	.mobile-title,
	.why-collagen__row-text h3 {
		font-size: 1.25rem;
		display: flex;
		margin: 0;
	}

	.border-b {
		border-bottom: 1px solid #282828;
	}

	.section-margin {
		margin: 0 0 1rem;
		margin-bottom: 1rem !important;
	}

	.arrow-hidden {
		margin-left: 10px;
		transition: all 0.5s;
	}

	.arrow-hidden.rotated {
		rotate: 180deg;
	}

	p {
		font-size: 15px;
	}

	.hidden-mobile {
		display: none;
	}

	.arrow-hidden {
		display: block;
	}
	.section-title {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.section-title .arrow {
		margin-left: 8px;
		transition: transform 0.3s ease;
	}

	.section-title.open .arrow {
		transform: rotate(90deg);
	}

	.hidden-mobile {
		height: 0;
		transition: all 0.5s;
	}

	.hidden-mobile.visible {
		display: block;
		height: 100%;
		margin-top: 10px;
	}

	.page-title {
		font-size: 2.5rem;
	}

	.blog-list__item-image {
		max-height: 200px;
	}

	.content-area {
		margin-block: 4.5rem;
	}

	.products-list__slider {
		border-top: 0;
	}

	.slick-dots {
		gap: 0;
	}

	.newsletter-inner .wpcf7-submit {
		padding: 20px 25px;
		font-size: 15px;
	}

	.newsletter-inner .wpcf7-email {
		font-size: 15px;
	}

	.social-icons__inner {
		padding-top: 3rem;
	}

	.logo-mobile {
		margin-bottom: 20px;
	}

	.product_type_simple,
	.short-description {
		font-size: 0.875rem !important;
	}
}

@media (max-width: 400px) {
	.logo {
		max-width: 140px;
	}

	.tab-link {
		padding: 8px;
		font-size: 12px;
	}

	.columns-3 {
		display: grid !important;
		grid-template-columns: 1fr;
	}
}