/* =========================================================================
   UNIVERSAL RESPONSIVE RESET 
   Link this to all projects to fix sizing, overflow, and text bleeding
   ========================================================================= */

/* 1. The Magic Box Sizing Rule
   Ensures padding and borders do NOT add to the total width of a div/card. */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. Prevent Horizontal Scroll
   Forces the body to never exceed the screen width. */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* 3. Universal Text Wrapping
   Forces text to break and wrap to the next line instead of bleeding out. 
   This directly fixes the issue in your screenshot. */
p, h1, h2, h3, h4, h5, h6, span, a, div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100%;
}

/* 4. Responsive Media Constraints
   Ensures images and videos always shrink to fit their containers. */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* 5. Utility Class for Perfect Cards
   You can add class="responsive-container" to any div to make it scale perfectly. */
.responsive-container {
    width: 100%;
    max-width: 100%;
    padding: clamp(10px, 4vw, 30px); /* Dynamically shrinks padding on small screens */
    margin: 0 auto;
    overflow: hidden;
}