Please see HTML/CSS for my page below. I'm trying to identify what exactly is causing a slight shift to the left, throwing the whole page off-center. One section (the div assigned class .sliding-section seems to be properly centered.
<style>
@import url("https://use.typekit.net/poz1xqv.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap')
*
{
margin:0px;
padding:0px;
}
.syne-font {
font-family: "Syne", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.work-sans-light {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.work-sans-medium {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.cta-button {
display: block;
background-color: #ffffff;
width: 100%;
text-align: center;
padding: 10px 0;
border: 2px solid black;
text-decoration: none;
color: black;
transition: background-color 0.3s, color 0.3s;
font-size: 20px;
}
.cta-button:hover {
text-decoration: none;
background-color: black;
color: white;
}
.more-button {
display: block;
background-color: #ffffff;
width: 60%;
text-align: center;
padding: 10px 0;
border: 2px solid black;
text-decoration: none;
color: black;
transition: opacity 1s, background-color 0.3s, color 0.3s;
font-size: 20px;
}
.more-button:hover {
text-decoration: none;
background-color: black;
color: white;
}
.hidden-text {
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
overflow: hidden;
transition: 1s ease;
}
.hidden-text:hover {
opacity: 100;
}
.feature-image:hover ~ .hidden-text,
.hidden-text:hover {
opacity: 100;
}
.sliding-section {
/* margin-left: -120px;
margin-right: 120px; */
position: relative;
margin-left: -10%;
margin-right: 10%;
width: 120%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(0);
transition: ease 1s;
}
.carousel {
max-width: 1440px;
justify-content: center;
}
@media screen and (max-width: 480px) {
.carousel {
margin-left: -25%;
margin-right: 25%;
width: 150%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(33%);
transition: ease 1s;
}
.feature2:hover ~.carousel {
transform: translateX(0%);
}
.carousel:has(feature1:hover) {
transform: translateX(33%);
}
.carousel:has(feature2:hover) {
transform: translateX(0%);
}
.carousel:has(feature3:hover) {
transform: translateX(-33%);
}
}
.partner-cta {
max-width: 1440px;
}
@media screen and (max-width: 480px) {
.partner-cta{
margin-left: 0;
width: screen;
display: flex;
align-items: center;
overflow: hidden;
}
}
.residential {
position: relative;
transform: translateX(0);
opacity: 1;
transition: ease 1s;
}
.residential:hover {
transform: translateX(10%);
transition: ease 1s;
}
.residential:hover ~ .commercial{
transform: translateX(10%);
opacity: .25;
transition: ease 1s;
}
.hidden-button {
opacity: 0;
transition: ease 1s;
}
.residential:hover .hidden-button{
opacity: 1;
transition: ease 1s;
}
.commercial:hover .hidden-button{
opacity: 1;
transition: ease 1s;
}
.commercial {
position: relative;
transform: translateX(0);
opacity: 1;
transition: ease 1s;
}
.commercial:hover {
transform: translateX(-10%);
transition: ease 1s;
}
.commercial:hover ~ .residential{
transform: translateX(-10%);
transition: ease 1s;
}
.residential:has(~.commercial:hover) {
transform: translateX(-10%);
opacity: .25;
transition: ease 1s;
}
.hid-text-res {
display: flex;
flex-direction: column;
position: relative;
opacity: 100;
overflow: hidden;
transition: 1s ease;
}
.hid-text-com {
opacity: 100;
transition: 1s ease;
}
.hid-text-com:has(~.residential:hover) {
opacity: 0;
transition: ease 1s;
}
</style><script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
},
fontFamily: {
'Syne': ['"Syne"', 'sans-serif']
},
fontFamily: {
'Work Sans': ['"Work Sans"', 'sans-serif']
},
colors: {
greybg: '#CECCC4',
}
transitionDuration: {
'300': '300ms',
}
}
}
}
</script>
<div class="max-w-[1440px] max-h-[540px] flex justify-center items-center overflow-hidden mx-0 -mt-12 bg-greybg"><img class="w-screen mx-0 object-cover overflow-hidden" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/Header2.jpg" alt="Trades Hero Image" /></div>
<!-- PROGRAM INTRO -->
<div class="max-w-[1440px] mx-0 mt-12">
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-20">
<div class="max-w-[440px]"></div>
<div class="max-w-[440px]">
<h2 class="syne-font">We love working with our partners</h2>
</div>
<div class="max-w-[440px]">
<p class="work-sans-light">Our partnership program is designed to help you provide great outdoor kitchen solutions for your clients.</p>
<p class="work-sans-light pt-6">Learn about our products, get access to our brochures & marketing materials, attend our training sessions.</p>
</div>
</div>
</div>
<!-- PROGRAM FEATURES / SELLING POINTS -->
<!--<div class="max-w-[1440px] max-md:mx-0">-->
<div class="carousel max-md:no-margin">
<div class="w-full grid grid-cols-3 gap-2 md:gap-20">
<div class="feature1 feature-image max-w-[430px] items-left overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img1.jpg" alt="Image 1" />
<h3 class="feature-image syne-font pt-4">Trusted Vendors</h3>
<p class="hidden-text work-sans-light pt-4">Trusted vendors and builders get exclusive rebates and rewards, as well as marketing materials and advertising assistance</p>
</div>
<div class="feature2 feature-image max-w-[430px] items-center overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img2.jpg" alt="Image 2" />
<h3 class="feature-image syne-font pt-4">Exclusive Trade Pricing</h3>
<p class="hidden-text work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
</div>
<div class="feature3 feature-image max-w-[430px] items-right overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img3.jpg" alt="Image 3" />
<h3 class="feature-image syne-font pt-4">Personalized Support</h3>
<p class="hidden-text work-sans-light pt-4">We’ll help you gain a deep understanding of Danver’s products and processes, as well as our catalogs, libraries, and support team</p>
</div>
</div>
</div>
<!-- 1ST CTA -->
<div class="max-w-[1440px] mx-0">
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-20">
<div class="md:col-span-2 max-md:justify-center max-md:items-center">
<h2 class="syne-font">Get in touch to discuss how our partnership program can benefit you and your business</h2>
</div>
<div class="flex md:col-span-1 items-center">
<a href="#" class="cta-button work-sans-medium">sign up</a>
</div>
</div>
</div>
<!-- SLIDING SECTION -->
<div class="sliding-section w-screen">
<div class="w-full grid grid-cols-2 gap-5 md:gap-10">
<div class="residential feature-image">
<img class="feature-image object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg" alt="Residential" />
<h3 class="hid-text-com text-right syne-font pt-4">Multi-Family</h3>
<div class="grid grid-cols-1 md:grid-cols-2 max-md:pl-5">
<div class="hidden-button flex items-center justify-center max-md:order-2 max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
<div class="max-md:order-1">
<p class="hid-text-com text-right work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
</div>
</div>
</div>
<div class="commercial">
<img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg" alt="Commercial" />
<h3 class="hid-text-com text-left syne-font pt-4">Hospitality</h3>
<div class="grid grid-cols-1 md:grid-cols-2 max-md:pr-5">
<div class="hid-text-com hidden-text"><p class="hid-text2 text-left work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p></div>
<div class="hidden-button flex items-center justify-center max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
</div>
</div>
</div>
<!-- BECOME A PARTNER 2ND CTA -->
<div class="max-w-[900px] mx-0 pt-32 partner-cta flex justify-center ">
<div class="grid grid-cols-2 max-md:w-full md:w-[65%] gap-8 lg:gap-20">
<div class="origin-top-right">
<img class="" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img6.jpg" alt="Danver Partnership Image" />
</div>
<div class="">
<h2 class="feature-image syne-font">Become a Danver Partner</h2>
<p class="work-sans-light pt-4">Sign up to take advantage of all that our partnership program has to offer. Discounted prices for builders, access to training and assistance, as well as comprehensive support for our products.</p>
<p class="work-sans-light pt-4">Trusted vendors and builders get exclusive rebates and rewards, as well as marketing materials and advertising assistance</p>
<p class="work-sans-light pt-4">Submit the form below and we’ll get in touch with you.</p>
<a href="#" class="cta-button work-sans-medium mt-12">sign up</a>
</div>
<div class=""></div>
</div>
</div>
<!-- ADDITIONAL DETAILS -->
<div class="max-w-[1440px] mx-0 pt-32">
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-20">
<div class="">
<h3 class="feature-image syne-font pt-4">Architects</h3>
<p class="work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
<div class="flex justify-center md:justify-left mt-8"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
<div class="">
<h3 class="feature-image syne-font pt-4">Builders</h3>
<p class="work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
<div class="flex justify-center md:justify-left mt-8"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
<div class="">
<h3 class="feature-image syne-font pt-4">Designers</h3>
<p class="work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
<div class="flex justify-center md:justify-left mt-8"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
</div>
</div>
<!-- PROGRAM FEATURES / SELLING POINTS -->
<!--<div class="max-w-[1440px] max-md:mx-0">-->
<div class="carousel max-md:no-margin">
<div class="w-full grid grid-cols-3 gap-2 md:gap-20">
<div class="feature1 feature-image max-w-[430px] items-left overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img_salesMarketing.jpg" alt="Image 1" />
<h3 class="feature-image syne-font pt-4">Sales & Marketing Support</h3>
<p class="hidden-text work-sans-light pt-4">Trusted vendors and builders get exclusive rebates and rewards, as well as marketing materials and advertising assistance</p>
</div>
<div class="feature2 feature-image max-w-[430px] items-center overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img2.jpg" alt="Image 2" />
<h3 class="feature-image syne-font pt-4">Book a Consultation</h3>
<p class="hidden-text work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
</div>
<div class="feature3 feature-image max-w-[430px] items-right overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img_contEd.jpg" alt="Image 3" />
<h3 class="feature-image syne-font pt-4">Continuing Education Courses</h3>
<p class="hidden-text work-sans-light pt-4">We’ll help you gain a deep understanding of Danver’s products and processes, as well as our catalogs, libraries, and support team</p>
</div>
</div>
</div>Thanks in advance!
For pages with a left-to-right language such as English, blocks-level elements are laid out from the left edge. To center these block-level elements, you could consider applying margin-left: auto; margin-right: auto via the mx-auto Tailwind class:
@import url("https://use.typekit.net/poz1xqv.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap')
*
{
margin:0px;
padding:0px;
}
.syne-font {
font-family: "Syne", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.work-sans-light {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.work-sans-medium {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.cta-button {
display: block;
background-color: #ffffff;
width: 100%;
text-align: center;
padding: 10px 0;
border: 2px solid black;
text-decoration: none;
color: black;
transition: background-color 0.3s, color 0.3s;
font-size: 20px;
}
.cta-button:hover {
text-decoration: none;
background-color: black;
color: white;
}
.more-button {
display: block;
background-color: #ffffff;
width: 60%;
text-align: center;
padding: 10px 0;
border: 2px solid black;
text-decoration: none;
color: black;
transition: opacity 1s, background-color 0.3s, color 0.3s;
font-size: 20px;
}
.more-button:hover {
text-decoration: none;
background-color: black;
color: white;
}
.hidden-text {
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
overflow: hidden;
transition: 1s ease;
}
.hidden-text:hover {
opacity: 100;
}
.feature-image:hover ~ .hidden-text,
.hidden-text:hover {
opacity: 100;
}
.sliding-section {
/* margin-left: -120px;
margin-right: 120px; */
position: relative;
margin-left: -10%;
margin-right: 10%;
width: 120%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(0);
transition: ease 1s;
}
.carousel {
max-width: 1440px;
justify-content: center;
}
@media screen and (max-width: 480px) {
.carousel {
margin-left: -25%;
margin-right: 25%;
width: 150%;
display: flex;
align-items: center;
overflow: hidden;
transform: translateX(33%);
transition: ease 1s;
}
.feature2:hover ~.carousel {
transform: translateX(0%);
}
.carousel:has(feature1:hover) {
transform: translateX(33%);
}
.carousel:has(feature2:hover) {
transform: translateX(0%);
}
.carousel:has(feature3:hover) {
transform: translateX(-33%);
}
}
.partner-cta {
max-width: 1440px;
}
@media screen and (max-width: 480px) {
.partner-cta{
margin-left: 0;
width: screen;
display: flex;
align-items: center;
overflow: hidden;
}
}
.residential {
position: relative;
transform: translateX(0);
opacity: 1;
transition: ease 1s;
}
.residential:hover {
transform: translateX(10%);
transition: ease 1s;
}
.residential:hover ~ .commercial{
transform: translateX(10%);
opacity: .25;
transition: ease 1s;
}
.hidden-button {
opacity: 0;
transition: ease 1s;
}
.residential:hover .hidden-button{
opacity: 1;
transition: ease 1s;
}
.commercial:hover .hidden-button{
opacity: 1;
transition: ease 1s;
}
.commercial {
position: relative;
transform: translateX(0);
opacity: 1;
transition: ease 1s;
}
.commercial:hover {
transform: translateX(-10%);
transition: ease 1s;
}
.commercial:hover ~ .residential{
transform: translateX(-10%);
transition: ease 1s;
}
.residential:has(~.commercial:hover) {
transform: translateX(-10%);
opacity: .25;
transition: ease 1s;
}
.hid-text-res {
display: flex;
flex-direction: column;
position: relative;
opacity: 100;
overflow: hidden;
transition: 1s ease;
}
.hid-text-com {
opacity: 100;
transition: 1s ease;
}
.hid-text-com:has(~.residential:hover) {
opacity: 0;
transition: ease 1s;
}<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
},
fontFamily: {
'Syne': ['"Syne"', 'sans-serif']
},
fontFamily: {
'Work Sans': ['"Work Sans"', 'sans-serif']
},
colors: {
greybg: '#CECCC4',
}
transitionDuration: {
'300': '300ms',
}
}
}
}
</script>
<div class="max-w-[1440px] max-h-[540px] flex justify-center items-center overflow-hidden mx-auto -mt-12 bg-greybg"><img class="w-screen mx-0 object-cover overflow-hidden" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/Header2.jpg" alt="Trades Hero Image" /></div>
<!-- PROGRAM INTRO -->
<div class="max-w-[1440px] mx-auto mt-12">
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-20">
<div class="max-w-[440px]"></div>
<div class="max-w-[440px]">
<h2 class="syne-font">We love working with our partners</h2>
</div>
<div class="max-w-[440px]">
<p class="work-sans-light">Our partnership program is designed to help you provide great outdoor kitchen solutions for your clients.</p>
<p class="work-sans-light pt-6">Learn about our products, get access to our brochures & marketing materials, attend our training sessions.</p>
</div>
</div>
</div>
<!-- PROGRAM FEATURES / SELLING POINTS -->
<!--<div class="max-w-[1440px] max-md:mx-0">-->
<div class="carousel max-md:no-margin mx-auto">
<div class="w-full grid grid-cols-3 gap-2 md:gap-20">
<div class="feature1 feature-image max-w-[430px] items-left overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img1.jpg" alt="Image 1" />
<h3 class="feature-image syne-font pt-4">Trusted Vendors</h3>
<p class="hidden-text work-sans-light pt-4">Trusted vendors and builders get exclusive rebates and rewards, as well as marketing materials and advertising assistance</p>
</div>
<div class="feature2 feature-image max-w-[430px] items-center overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img2.jpg" alt="Image 2" />
<h3 class="feature-image syne-font pt-4">Exclusive Trade Pricing</h3>
<p class="hidden-text work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
</div>
<div class="feature3 feature-image max-w-[430px] items-right overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img3.jpg" alt="Image 3" />
<h3 class="feature-image syne-font pt-4">Personalized Support</h3>
<p class="hidden-text work-sans-light pt-4">We’ll help you gain a deep understanding of Danver’s products and processes, as well as our catalogs, libraries, and support team</p>
</div>
</div>
</div>
<!-- 1ST CTA -->
<div class="max-w-[1440px] mx-auto">
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-20">
<div class="md:col-span-2 max-md:justify-center max-md:items-center">
<h2 class="syne-font">Get in touch to discuss how our partnership program can benefit you and your business</h2>
</div>
<div class="flex md:col-span-1 items-center">
<a href="#" class="cta-button work-sans-medium">sign up</a>
</div>
</div>
</div>
<!-- SLIDING SECTION -->
<div class="sliding-section w-screen">
<div class="w-full grid grid-cols-2 gap-5 md:gap-10">
<div class="residential feature-image">
<img class="feature-image object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg" alt="Residential" />
<h3 class="hid-text-com text-right syne-font pt-4">Multi-Family</h3>
<div class="grid grid-cols-1 md:grid-cols-2 max-md:pl-5">
<div class="hidden-button flex items-center justify-center max-md:order-2 max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
<div class="max-md:order-1">
<p class="hid-text-com text-right work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
</div>
</div>
</div>
<div class="commercial">
<img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg" alt="Commercial" />
<h3 class="hid-text-com text-left syne-font pt-4">Hospitality</h3>
<div class="grid grid-cols-1 md:grid-cols-2 max-md:pr-5">
<div class="hid-text-com hidden-text"><p class="hid-text2 text-left work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p></div>
<div class="hidden-button flex items-center justify-center max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
</div>
</div>
</div>
<!-- BECOME A PARTNER 2ND CTA -->
<div class="max-w-[900px] mx-auto pt-32 partner-cta flex justify-center ">
<div class="grid grid-cols-2 max-md:w-full md:w-[65%] gap-8 lg:gap-20">
<div class="origin-top-right">
<img class="" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img6.jpg" alt="Danver Partnership Image" />
</div>
<div class="">
<h2 class="feature-image syne-font">Become a Danver Partner</h2>
<p class="work-sans-light pt-4">Sign up to take advantage of all that our partnership program has to offer. Discounted prices for builders, access to training and assistance, as well as comprehensive support for our products.</p>
<p class="work-sans-light pt-4">Trusted vendors and builders get exclusive rebates and rewards, as well as marketing materials and advertising assistance</p>
<p class="work-sans-light pt-4">Submit the form below and we’ll get in touch with you.</p>
<a href="#" class="cta-button work-sans-medium mt-12">sign up</a>
</div>
<div class=""></div>
</div>
</div>
<!-- ADDITIONAL DETAILS -->
<div class="max-w-[1440px] mx-auto pt-32">
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-20">
<div class="">
<h3 class="feature-image syne-font pt-4">Architects</h3>
<p class="work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
<div class="flex justify-center md:justify-left mt-8"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
<div class="">
<h3 class="feature-image syne-font pt-4">Builders</h3>
<p class="work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
<div class="flex justify-center md:justify-left mt-8"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
<div class="">
<h3 class="feature-image syne-font pt-4">Designers</h3>
<p class="work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
<div class="flex justify-center md:justify-left mt-8"><a href="#" class="more-button work-sans-medium">learn more</a></div>
</div>
</div>
</div>
<!-- PROGRAM FEATURES / SELLING POINTS -->
<!--<div class="max-w-[1440px] max-md:mx-0">-->
<div class="carousel max-md:no-margin mx-auto">
<div class="w-full grid grid-cols-3 gap-2 md:gap-20">
<div class="feature1 feature-image max-w-[430px] items-left overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img_salesMarketing.jpg" alt="Image 1" />
<h3 class="feature-image syne-font pt-4">Sales & Marketing Support</h3>
<p class="hidden-text work-sans-light pt-4">Trusted vendors and builders get exclusive rebates and rewards, as well as marketing materials and advertising assistance</p>
</div>
<div class="feature2 feature-image max-w-[430px] items-center overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img2.jpg" alt="Image 2" />
<h3 class="feature-image syne-font pt-4">Book a Consultation</h3>
<p class="hidden-text work-sans-light pt-4">Our sales and technical support teams are here to assist you in designing and building the projects that’ll impress your clients</p>
</div>
<div class="feature3 feature-image max-w-[430px] items-right overflow-hidden">
<img class="aspect-w-1 aspect-h-1.357 feature-image overflow-hidden object-cover saturate-0 hover:saturate-100 origin-bottom hover:scale-105 transition-all duration-500" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img_contEd.jpg" alt="Image 3" />
<h3 class="feature-image syne-font pt-4">Continuing Education Courses</h3>
<p class="hidden-text work-sans-light pt-4">We’ll help you gain a deep understanding of Danver’s products and processes, as well as our catalogs, libraries, and support team</p>
</div>
</div>
</div>