@media only screen and (max-width: 1140px) {
	body {
		overflow-x: hidden;
	}
	.container {
		width: auto;
		padding: 0 15px;
		margin: inherit;
	}
}

@media only screen and (max-width: 1024px) {
	nav ul {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	.header-links-conatiner {
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.logo-container a img {
		width: 15rem;
	}
	.section {
		padding: 5rem 0;
	}
	h2 {
		font-size: 2.2rem;
	}
	.section-pad {
		padding-bottom: 5rem;
	}
	.inner-banner-content h5 {
		font-size: 2.2rem;
	}
}

@media only screen and (max-width: 1021px) {
	.menu-bars {
		display: block;
		height: 2.5rem;
		width: 2.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.menu-bars i {
		color: var(--color-brown);
		font-size: 2rem;
	}

	.menu-bars img {
		width: 100%;
	}

	.header-links-conatiner {
		gap: 1rem;
	}

	nav ul {
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: 0;
		background: #6f4e37;
		display: block;
		padding: 5rem 2rem 0 2rem;
		transform: translateX(100%);
		transition: all 1.1s ease;
		z-index: 110;
	}

	nav ul.active {
		width: 19rem;
		transform: translateX(0);
	}

	nav ul li a {
		color: var(--color-white);
	}

	nav ul li {
		margin-bottom: 1rem;
	}

	.close {
		display: block;
		position: absolute;
		top: 15px;
		left: 20px;
		height: 2.5rem;
		width: 2.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.close i {
		color: var(--color-white);
		font-size: 2rem;
	}
	.header-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 0;
		height: 100%;
		background: rgba(255, 255, 255, 0.733);
		transition: all 1s ease;
		z-index: 100;
	}

	.header-overlay.active {
		width: 100%;
	}

	.bg-image {
		height: inherit;
		background-size: cover;
	}
	.hero-content-box {
		height: inherit;
		padding: 1.5rem 0 3rem;
	}

	.about-bg-image {
		height: inherit;
		padding: 2rem 0;
	}

	.faq-sec .grid-column-two {
		grid-template-columns: 1fr;
		gap: 5rem 0rem;
	}

	.grid-column-four {
		grid-template-columns: repeat(3, 1fr);
	}

	.blog-image-box {
		height: 14rem;
		border-radius: 1rem;
		overflow: hidden;
		margin-bottom: 1.5rem;
	}

	.blog-image-box img {
		height: 14rem;
		object-fit: cover;
	}

	.blog-info {
		justify-content: space-around;
		gap: 0;
	}

	.footer-info-conatiner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 3rem;
	}

	.footer-info-conatiner .company-info {
		width: 100%;
	}

	.footer-info-conatiner .ft-links {
		width: 100%;
	}

	.about-main-section .grid-column-two {
		grid-template-columns: 1fr;
		gap: 2rem 0rem;
	}

	.grid-column-products {
		flex-wrap: wrap;
	}

	.quality-content {
		width: 100%;
	}

	.quality-vedieo {
		width: 100%;
	}

	.details-chocolate-sec .grid-column-two {
		grid-template-columns: 1fr;
		gap: 2rem 0rem;
	}

	.check-image {
		left: 63px;
	}

	.inner-banner-image {
		padding: 7rem 0;
	}

	.contact-info-sec .grid-column-three {
		grid-template-columns: repeat(2, 1fr);
	}

	.from-sec .form-image {
		display: none;
	}

	.from-sec .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
	}

	.about-content {
		height: inherit;
		padding: 1.5rem 0;
	}

	.brach-partner-sec .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
	}

	.partner-sub-content-box .grid-column-two {
		grid-template-columns: repeat(2, 1fr);
	}

	.partner-btn {
		padding: 1.2rem 2.5rem;
	}

	.benefits-sec .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
	}

	.benefits-sec .benefit-sub-content-box .grid-column-two {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 767px) {
	.hero-content-box p {
		max-width: 35rem;
	}

	.usp-sec .grid-column-three {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.product-category-box {
		flex-wrap: wrap;
	}

	.blog-sec .grid-column-three {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.abt-page-service-sec .grid-column-three {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.card p {
		max-width: 100%;
	}

	.our-team-sec .grid-column-three {
		grid-template-columns: repeat(1, 1fr);
		gap: 3rem;
	}

	.contact-info-sec .grid-column-three {
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}

	.content-box-container .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}

	.tab-sub-content {
		margin-bottom: 3rem;
	}

	.flex-column-two {
		flex-wrap: wrap;
	}

	.need-more-content-box {
		width: 100%;
	}

	.need-more-image-container {
		width: 100%;
	}

	.order-info .grid-column-three {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
	.about-image {
		height: auto;
	}
	.testimonial-bg-image {
		padding: 4rem 0;
	}
	.detail-sec .beadcrums ul {
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 639px) {
	.footer-info-conatiner {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem 3rem;
	}

	.order-info .grid-column-four {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-sec .grid-column-four {
		grid-template-columns: repeat(1, 1fr);
	}

	.hero-content-box {
		width: auto;
	}
	.about-content {
		width: auto;
	}

	.logo-container a img {
		width: 10rem;
	}
	.customer-support {
		width: 92%;
	}
	.customer-support p {
		color: var(--color-white);
		font-size: 1rem;
	}

	.order-info .grid-column-four {
		grid-template-columns: repeat(1, 1fr);
	}
	.copy-right-box {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	.overlay {
		padding: 70px 10px;
	}
	.formBox {
		padding: 50px 15px;
	}

	.acc-question {
		padding-right: 1rem;
	}

	.form-box .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
	}
	.partner-sub-content-box .grid-column-two {
		gap: 0rem;
	}
	.partner-sub-content-box .grid-column-two {
		gap: 0.2rem;
	}
	.partner-content-box ul li {
		align-items: baseline;
	}
}

@media only screen and (max-width: 375px) {
	.partner-sub-content-box .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
		gap: 0rem;
	}

	.benefits-sec .benefit-sub-content-box .grid-column-two {
		grid-template-columns: repeat(1, 1fr);
		gap: 1.2rem;
	}
	.partner-btn {
		padding: 1rem 1.8rem;
	}
}
