/* Inline <style> blocks from the live page /connects (winndixie.com), extracted verbatim.
   The live site ships these inside the CMS-authored HTML; the Contentstack entries hold
   only structured content, so they are re-attached here per page. */

/* Un-caps the shared page shell for THIS ROUTE ONLY. _app-wd-legacy-content.scss caps
   .container-fluid__full at max-width:1170px to compensate for page templates (including
   Connects.razor) that render straight from that wrapper without live's nested .container.
   Scoped here because connects.css is loaded on this route alone, so the other shells keep
   the cap — see about_contact.css / indirect-suppliers.css for the same pattern. */
.container-fluid__full {
  max-width: 100%;
}

@media screen and (min-width: 1200px) {
.recipes-details .image-slider .image {
min-height: 850px !important;
}
}
.hero-section {
			padding: 0;
			background: #ffffff;
		}

		.hero-container {
			max-width: 1280px;
			margin: 0 auto;
		}
		.hero-container {
			max-width: 1280px;
			margin: 0 auto;
			position: relative;
		}

		.hero-banner {
			width: 100%;
			height: auto;
			display: block;
		}
		.overlay-image {
			position: absolute;
			top: 83%;
			left: 83%;
			transform: translate(-50%, -50%);
			width: 170px;
			height: auto;
		}
		/* Tablet */
		@media (max-width: 992px) {
			.overlay-image {
				width: 130px;
				right: 15px;
			}
		}

		/* mobile */
		@media (max-width: 576px) {
			.overlay-image {
				/* position: static; */
				display: block;
				margin: 20px auto 0;
				top: 79%;
				height: 50px;
				width: 50px;
			}
		}
.insights-section {
			padding: 80px 20px;
			background: #ffffff;
		}

		.insights-container {
			max-width: 1280px;
			margin: 0 auto;
		}



		.insight-box {
			background: #fff;
			border-radius: 24px;
			padding: 36px 17px;
			box-shadow: 0 8px 24px rgba(0,0,0,0.08);
			text-align: center;
font-weight: 400;
		}

			.insight-box p {
				font-size: 20px;
				line-height: 1.6;
				color: var(--wd-color-text);
				margin: 0;
			}

			/* Middle highlight box */
			.insight-box.highlight h3 {
				font-size: 24px;
				color: #8E873E;
				margin: 0;
				font-weight: 700;
				white-space: nowrap;
			}

			.insight-box.highlight span {
				display: block;
				font-size: 16px;
				margin-top: 6px;
				font-weight: 600;
			}

			.insight-box.highlight small {
				display: block;
				margin-top: 4px;
				font-size: 20px;
				color: #666;
			}
.percentage {
    padding-top: 20px;
}

		/* INSIGHTS SECTION */
		.insights-row {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 25px;
		}

		.insight-card {
			max-width: 290px;
			width: 100%;
		}

		@media (max-width: 768px) {
.insight-box p {
				font-size: 12px;
			}
.insight-box.highlight h3 {
    font-size: 12px;
}
.percentage strong {
    font-size: 12px;
}
.insight-box.highlight small {
    font-size: 12px;
}
.percentage strong {
    font-size: 12px;
}

			.insights-row {
				grid-template-columns: 1fr;
			}
		}

		.percentage strong {
			font-size: 24px;
			color: #8E873E;
			display: block;
		}

		


		
		.icon-circle {
			width: 64px;
			height: 64px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20px;
		}

			.icon-circle img {
				width: 50px;
				height: 50px;
				object-fit: contain;
				color: black;
			}
.partners-section {
			background: #f7ede3;
			padding: 40px 20px;
		}

		.partners-container {
			max-width: 1280px;
			margin: 0 auto;
			text-align: center;
		}

			.partners-container h2 {
				font-size: 36px;
				font-weight: 700;
				letter-spacing: 1px;
				margin-bottom: 40px;
				color: #000;
			}

		/* Logo row */
		.partners-logos {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 40px;
			flex-wrap: wrap;
		}

		.partner {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

			/* Logos */
			.partner img {
				max-height: 60px;
				max-width: 160px;
				object-fit: contain;
			}

		/* Responsive */
		@media (max-width: 992px) {
			.partners-logos {
				justify-content: center;
			}
.partners-container h2 {
				font-size: 28px;
			}
			.partner {
				flex: 0 0 50%;
				margin-bottom: 30px;
			}
		}

		@media (max-width: 576px) {
			.partner {
				flex: 0 0 100%;
			}
		}
		/* PARTNERS SECTION */
		.partners-logos {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 40px;
			justify-items: center;
			align-items: center;
		}

		

		@media (max-width: 768px) {
.partners-container h2 {
				font-size: 24px;
			}
			.partners-logos {
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}
		}
.reach-section {
			padding: 80px 20px;
			background: #ffffff;
		}


		.reach-container {
			max-width: 1280px;
			margin: 0 auto;
			text-align: center;
		}

			.reach-container h2 {
				color: var(--wd-color-brand-red);
				font-size: 28px;
				font-weight: 700;
				margin-bottom: 60px;
			}


		.reach-cards {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 30px;
			width: 100%;
		}


		.reach-card {
			background: #fff;
			border-radius: 24px;
			padding: 24px;
			/* max-width: 300px; */
			width: 100%;
			margin: 0 auto;
			box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		}


		.card-image {
			position: relative;
			border-radius: 18px;
			overflow: hidden;
		}

			.card-image img {
				width: 100%;
				height: 220px;
				object-fit: cover;
			}


		.badge {
			position: absolute;
			bottom: 1px;
			left: 50%;
			transform: translateX(-50%);
			background: var(--wd-color-brand-red);
			color: #ffffff;
			padding: 6px 16px;
			border-radius: 15px;
			max-height: 34.0625px;
			width: 172px;
			font-size: 14px;
			font-weight: 600;
			text-transform: uppercase;
		}



		.card-icons {
			margin-top: 30px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 22px;
		}

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
		}

			.icon-item .icon {
				width: 65px;
				height: 65px;
				background: var(--wd-color-bread)80;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
			}

			.icon-item p {
				font-size: 13px;
				color: var(--wd-color-text);
				margin: 0;
			}

@media (min-width: 768px) {
	.card-icons {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 992px) {
	.card-icons {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.reach-cards {
		display: flex;
        flex-direction: column;
	}
}
@media (max-width: 767px) {
	.card-image img {
		height: 150px;
		max-width: 200px;
	}
}
.form-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 24px;
		}

		.form-group {
			display: flex;
			flex-direction: column;
		}

		.full-width {
			margin-top: 24px;
		}

		label {
			font-weight: 500;
			margin-bottom: 6px;
		}

		.input-wrapper {
			position: relative;
		}

			.input-wrapper input,
			.input-wrapper textarea {
				width: 100%;
				padding: 14px 44px 14px 16px;
				/* border-radius: 28px; */
				border: 1px solid #d1d1d1;
				font-size: 14px;
				outline: none;
				transition: border 0.2s ease;
			}

		textarea {
			min-height: 120px;
			resize: none;
			border-radius: 16px;
		}

		/* Error state */
		.form-group.error input,
		.form-group.error textarea {
			border: 1.5px solid #e00000;
		}

		.error-icon {
			position: absolute;
			right: 16px;
			top: 50%;
			transform: translateY(-50%);
			color: #e00000;
			font-size: 16px;
			display: none;
		}

		.form-group.error .error-icon {
			display: block;
		}

		.error-text {
			color: #e00000;
			font-size: 12px;
			margin-top: 6px;
			display: none;
		}

		.form-group.error .error-text {
			display: block;
		}

		.form-actions {
			margin-top: 32px;
		}

		button {
			padding: 12px 28px;
			border-radius: 24px;
			border: none;
			background: #000;
			color: #fff;
			cursor: pointer;
		}




		.contact-section {
			padding: 0px 20px;
			background: #ffffff;
			margin-bottom: 100px;
		}

		.contact-container {
			max-width: 1280px;
			margin: 0 auto;
			background: #fff;
			border-radius: 24px;
			padding: 20px 50px;
			box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		}

			.contact-container h2 {
				text-align: center;
				color: var(--wd-color-brand-red);
				margin-bottom: 40px;
			}

		/* Card */
		.contact-card {
			background: #ffffff;
			border-radius: 16px;
			padding: 40px 50px;
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		}

			/* Title */
			.contact-card h2 {
				color: var(--wd-color-brand-red);
				margin-bottom: 40px;
				font-family: inherit;
				font-weight: 700;
				font-size: 36px;
				line-height: 100%;
				text-align: center;
			}

		/* Grid layout */
		.form-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 25px 30px;
		}

		.form-group {
			display: flex;
			flex-direction: column;
		}

			.form-group label {
				margin-bottom: 6px;
				color: #000000;
				font-family: inherit;
				font-weight: 400;
				font-size: 20px;
				line-height: 100%;
			}

			/* Inputs */
			.form-group input,
			.form-group textarea {
				height: 40px;
				padding: 8px 12px;
				border-radius: 6px;
				border: 1px solid #e2e2e2;
				font-size: 14px;
				outline: none;
			}

			.form-group textarea {
				height: 120px;
				resize: none;
			}

		/* Full width textarea */
		.full-width {
			margin-top: 25px;
		}

		/* Submit button */
		.form-actions {
			display: flex;
			justify-content: flex-end;
			margin-top: 30px;
		}

			.form-actions button {
				background: var(--wd-color-brand-red);
				color: #fff;
				border: none;
				padding: 10px 24px;
				border-radius: 20px;
				font-size: 14px;
				cursor: pointer;
				font-family: inherit;
				font-weight: 600;
				font-size: 16px;
				line-height: 24px;
				vertical-align: middle;
			}

				.form-actions button:hover {
					background: #cc0000;
				}

		/* Responsive */
		@media (max-width: 992px) {
			.form-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 600px) {
			.form-grid {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 767px) {
			.form-actions {
				display: flex;
				justify-content: flex-start;
			}
		}
.z-banner {
        z-index: 55555 !important;
    }

    .ps-fixed {
        position: fixed !important;
    }

    .bg-yellow-700 {
        background-color: #F8EC74;
        opacity: .92;
    }

    .fc-black {
        color: #000;
    }

    .wmx8 {
        max-width: 64.8205128rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .grid {
        display: flex;
    }

    .jc-center {
        justify-content: center;
    }

    .mr12 {
        margin-right: 10%;
        font-size : 1em;
    }

    #cookieBar a {
        cursor: pointer;
        text-decoration: underline;
    }
 #cookieBar p {
    margin-bottom : 0px;
  }
    .svgClose {
        float: right;
        margin-top: -21px;
        margin-right: 33px;
    }

    .paddingBar {
        padding: 20px;
        right: 0px;
        left: 0px;
        bottom: 0px;
    }


    .s-link {
        color: #000 !important;
    }

      @media screen and (min-width:100px) and (max-width:992px) {
        .paddingBar {
            right: -27px;
        }
    }
@media screen and (min-width:320px) and (max-width:568px) {
.svgClose {
    float: right;
    margin-top: -43px;
    margin-right: 20px;
}
.mx-auto {
    margin-left: -7px;
}
}
@media screen and (min-width:375px) and (max-width:667px) {
.mr12 {
    margin-right: 31px;
}
.svgClose {
    margin-top: -30px;
}
}
.async-hide {
			opacity: 0 !important;
		}