/* General Responsive Styles */
body {
    overflow-x: hidden; /* Prevent horizontal scrolling on the body */
}

/* Ensure all main containers are responsive */
.container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Word wrapping for long text */
h1, h2, h3, h4, h5, h6, p, a, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Responsive typography for headings */
@media (max-width: 640px) {
    .text-6xl {
        font-size: 3rem; /* 48px */
        line-height: 1.1;
    }
    .text-5xl {
        font-size: 2.5rem; /* 40px */
        line-height: 1.1;
    }
    .text-4xl {
        font-size: 2rem; /* 32px */
        line-height: 1.2;
    }
}

/* Ensure images and videos don't overflow their containers */
img, video {
    max-width: 100%;
    height: auto;
}

/* Make embedded content responsive */
iframe, embed, object {
    max-width: 100%;
}

/* Adjust padding on sections for smaller screens */
@media (max-width: 640px) {
    .py-28 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Fix for the MailerLite form on small screens */
#mlb2-32749382.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
    max-width: 100%;
}