/* ===================================================================
   TABLE OF CONTENTS
   ===================================================================
   01. General & Utilities
   02. Site Header
   03. Hero Section
   04. Gronk Section
   05. Welcome Section
   06. Community Promo Video
   07. Community Section (Pillars & Logos)
   08. News Section
   09. Partners Section
   10. Newsletter Section
   11. Main Footer
   12. Modals
   13. Animations
   14. Responsive Adjustments
   =================================================================== */

/* == 01. General & Utilities == */
body {
    font-family: 'roboto', sans-serif;
    color: #333;
}
.section-divider {
    border-top: 5px solid #fff;
}
.link-blue a {
    color: #8dc6e8; /* A sample blue, adjust as needed */
    text-decoration: underline;
}
.link-blue a:hover {
    color: #b9e0f7;
}
h2 {
    overflow-wrap: break-word;
}
/* == 02. Site Header == */
.site-header {
    background-color: #17234B;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: padding 0.3s ease;
}
.site-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.site-header-logo img {
    max-height: 60px;
    transition: max-height 0.3s ease;
}
.site-header-actions {
    display: flex;
    gap: 15px;
}
header.site-header .site-header-actions a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    background-color: transparent;
    color: #fff;
    font-family: 'roboto-bld-ita', sans-serif;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
}
header.site-header .site-header-actions a.btn:hover {
    background-color: #fff;
    color: #17234B;
    text-decoration: none;
}
header.site-header .site-header-actions a.btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}
header.site-header .site-header-actions a.btn .btn-text {
    display: none;
    color: #fff;
}
header.site-header .site-header-actions a.btn:hover .btn-text {
    color: #17234B;
}
header.site-header .site-header-actions a.btn:hover a.btn svg {
    width: 20px;
    height: 20px;
    fill: #17234B;
}


/* == 03. Hero Section == */
.hero-section {
    position: relative;
    background-color: #17234B; /* Fallback for video */
    border-bottom: 5px solid #fff;
}
.hero-overlay {
    /* Base State: Hidden but in the DOM, ready to be faded in */
    display: block;
    opacity: 0;
    pointer-events: none; /* Not interactive when hidden */
    transition: opacity 0.4s ease-in-out; /* Smooth fade-in */

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    color: #fff;
}
/* New State Class: This is added by JS to show the overlay */
.hero-overlay.is-visible {
    opacity: 1;
    pointer-events: auto; /* Becomes interactive when visible */
}
img.hero-overlay-logo {
    height: 60vh;
    position: absolute;
    padding-top: 23vh;
    left: 0;
    right: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
}
.hero-overlay-copy {
    position: absolute;
    width: 100%;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-overlay-copy h2 {
    font-weight: 600;
    margin-bottom: 20px;
}
.hero-video-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}
.hero-video-link:hover {
    color: #ddd;
}
.hero-video-link span {
    color: #fff;
}
.hero-video-link img {
    max-width: 50px;
    margin-right: 15px;
}
.hero-video-wrapper {
    overflow: hidden;
    background-color: #000;
    background-image: url('../images/la-bowl-sofi-gronk-rob-gronkowski.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-video-wrapper video {
    width: 157.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 54.25vw; /* 100 * 9 / 16 */
    margin-left: 50vw;
    transform: translate(-50%);
}
.hero-mobile-fallback {
    overflow: hidden;
    background-size: cover;
    background-position: 20% 50%;
    background-repeat: no-repeat;
    text-align: center;
    padding: 50px 0 4vh 0;
    position: relative;
    min-height: 65vh;
}
.hero-mobile-fallback::before { /* Gradient overlay */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(23, 35, 75, 0.2), rgba(23, 35, 75, 0.2));
}
.hero-mobile-fallback > * {
    position: relative; /* Ensure content is above overlay */
}
.hero-mobile-fallback img.img-fluid {
    padding-bottom: 20px;
    max-height: 60vh;
    max-width: 80vw;
    opacity: 0.85;
    margin: auto;
}
.hero-mobile-date {
    color: #17234B;
    padding-bottom: 1vh;
    font-size: 28px;
}

.hero-mobile-video-link{
    color: #17234B;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-family: 'roboto-bld-ita', sans-serif;
}
.hero-mobile-video-link:hover {
    color: #17234B;
}
.hero-mobile-video-link span {
    color: #17234B;
}
.hero-mobile-video-link img {
    max-width: 50px;
    margin-right: 15px;
}
.hero-mobile-content {
    position: absolute;
    bottom: 2vh;
    left: 0;
    right: 0;
}
/* == 04. Gronk Section == */
.gronk-section {
    background-color: #12234d;
    background-size: cover;
    background-position: 50% 30%;
    color: #fff;
    text-align: center;
}
.gronk-content {
    padding: 4vw 0;
}
.gronk-subtitle {
    font-family: 'roboto-con-int-blk', sans-serif;
    font-size: clamp(2rem, 8vw, 4rem);
}
.gronk-title {
    font-size: clamp(4rem, 20vw, 10rem);
    line-height: 0.8;
    margin-bottom: 2rem;
}
.gronk-description {
    font-family: 'roboto', sans-serif;
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    margin-bottom: 2rem;
}
.gronk-section a.gronk-video-link {
    font-family: 'roboto-con-int-blk', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
}
.gronk-video-link:hover {
    color: #ddd;
}
.gronk-video-link img {
    max-width: 70px;
}
.gronk-mobile-image {
    width: 100%;
    height: auto;
}

/* == 05. Welcome Section == */
.welcome-section {
    background-repeat: no-repeat;
    background-position: 30% 0%;
    background-size: cover;
    color: #fff;
    padding: 100px 0;
    position: relative;
}
.welcome-section::before { /* Gradient overlay */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(23, 35, 75, 1.0));
}
.welcome-section .container {
    position: relative; /* Ensure content is above overlay */
}
.welcome-content {
    text-align: right;
    padding: 50px 0;
}
.welcome-subtitle {
    font-family: 'roboto-con-bld', sans-serif;
    font-size: 25px;
    line-height: 25px;
    margin: 0;
}
.welcome-title {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive font size */
    color: #fff;
    margin-bottom: 1rem;
}
.welcome-content p {
    font-family: 'roboto-con', sans-serif;
    font-size: 20px;
    padding: 10px 15px;
}
.group-experience-container {
    padding-top: 10px;
    padding-bottom: 20px;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}
/* THIS IS THE UPDATED BLOCK */
.welcome-section .group-experience-container .btn-outline-white {
    font-size: 18px; /* Matched to header button */
    padding: 8px 24px; /* Matched to header button */
    letter-spacing: .5px;
    border-radius: 22px; /* Matched to header button */
    border: 2px solid #fff; /* Matched to header button */
    color: #fff !important; /* Force white color */
    background-color: transparent;
    font-family: 'roboto-bld-ita', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}
.welcome-section .group-experience-container .btn-outline-white:hover {
    background-color: #fff;
    color: #17234B !important; /* Force blue color on hover */
}
/* END UPDATED BLOCK */
/* == 05a. Groups Section == */
.groups-section {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 100px 0;
    position: relative;
}
.groups-section::before { /* Gradient overlay */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    /* This creates the left-to-right gradient */
    background: linear-gradient(270deg, rgba(23, 35, 75, 0.4), rgba(23, 35, 75, 1.0));
}
.groups-section .container {
    position: relative; /* Ensure content is above overlay */
}
.groups-content {
    text-align: left;
    padding: 50px 0;
}
.groups-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #fff;
    margin-bottom: 1rem;
    font-family: 'roboto-con-bld', sans-serif;
}
.groups-content p {
    font-family: 'roboto-con', sans-serif;
    font-size: 20px;
    padding-right: 15px; /* Keep text from touching the edge of the gradient fade */
}
.groups-button-container {
    padding-top: 10px;
}
.groups-section .btn-outline-white {
    font-size: 18px;
    padding: 8px 24px;
    letter-spacing: .5px;
    border-radius: 22px;
    border: 2px solid #fff;
    color: #fff !important;
    background-color: transparent;
    font-family: 'roboto-bld-ita', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}
.groups-section .btn-outline-white:hover {
    background-color: #fff;
    color: #17234B !important;
}

/* == 06. Community Promo Video == */
.community-video-promo {
    position: relative;
    height: 500px;
    overflow: hidden;
    background-position: center;
    background-image: url('../images/la-bowl-gronk-skills-drills-community.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.community-video-promo video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* == 07. Community Section (Pillars & Logos) == */
.community-section {
    background-color: #17234B;
    padding: 5vw 0 2vw 0;
}
.community-intro h2 {
    font-size: clamp(3rem, 6vw, 5rem);
}
.community-intro p {
    font-size: 20px;
}
/* New rule to make the email link white */
#inthecommunity .link-blue a {
    color: #fff !important;
    text-decoration: underline;
    overflow-wrap: break-word; /* Prevents overflow on small screens */
}
#inthecommunity .link-blue a:hover {
    color: #ddd;
}
/* Reduces the 'LA BOWL CARES' title size to match the pillar titles */
#inthecommunity .link-blue h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}
.partner-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto 2rem auto;
}
.partner-logo-grid .logo-container {
    background-color: white;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.15);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-logo-grid .logo-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.partner-logo-grid img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: saturate(0.8);
    opacity: 0.9;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.partner-logo-grid .logo-container:hover img {
    filter: saturate(1);
    opacity: 1;
}
.pillar-showcase {
    color: #fff;
}
.pillar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.0vw;
    min-height: 400px;
}
.pillar:last-child { margin-bottom: 0; }
.pillar-content { flex: 1 1 50%; padding: 2rem 4rem; z-index: 10; }
.pillar-image-container {
    flex: 1 1 50%;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.pillar:nth-child(odd) .pillar-content { order: 1; }
.pillar:nth-child(odd) .pillar-image-container { order: 2; }
.pillar:nth-child(even) .pillar-content { order: 2; }
.pillar:nth-child(even) .pillar-image-container { order: 1; }
.pillar h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-family: 'roboto-con-int-blk', sans-serif;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.pillar p {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.6;
    max-width: 600px;
}


/* == 08. News Section == */
.news-section {
    padding: 3vw 0;
    background-color: #fff;
}
.news-section h2 {
    color: #17234B;
    font-size: clamp(3rem, 8vw, 5rem);
    text-align: center;
    margin-bottom: 2rem;
}
.news-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #17234B;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.news-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.news-card-content { padding: 1.5rem; }
.news-card h3 { font-size: 1.1rem; font-weight: bold; margin-bottom: 0.5rem; }
.news-card p { font-size: 0.9rem; color: #666; }

/* == 09. Partners Section == */
.partners-section {
    padding: 1vw 0;
}
.section-title-with-line {
    border-top: 1px solid #ddd;
    text-align: center;
    margin-bottom: 0px;
}
.title-text {
    display: inline-block;
    background-color: #fff;
    color: #17234B;
    font-family: 'roboto-con-bld', sans-serif;
    font-size: 60px;
    padding: 0 2rem;
    transform: translateY(-50%);
}
.partner-logo-item {
    padding: 1rem 3rem;
}
.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Uniform height */
}
.logo-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* == 10. Newsletter Section == */
#newsCarouselDesktop .carousel-control-prev-icon,
#newsCarouselMobile .carousel-control-prev-icon,
#newsCarouselDesktop .carousel-control-next-icon,
#newsCarouselMobile .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#newsCarouselDesktop .carousel-control-prev-icon,
#newsCarouselMobile .carousel-control-prev-icon {
    transform: scaleX(-1); /* Flips the 'next' icon to create a 'prev' icon */
}
.newsletter-section {
    padding: 100px 0;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    position: relative;
}
.newsletter-section::before { /* Gradient overlay */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.65));
}
.newsletter-form-container {
    color: #17234B;
    position: relative;
    z-index: 10;
}
.newsletter-bg-trees-left, .newsletter-bg-trees-right {
    position: absolute;
    bottom: 0;
    width: 33.33%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    z-index: 5;
}
.newsletter-bg-trees-left { left: 0; }
.newsletter-bg-trees-right { right: 0; }
/* Adjust carousel container to make space for external controls on desktop */
/* START: Corrected News Carousel Styles */

/* START: FINAL Corrected News Carousel Styles */

/* START: FINAL Carousel Arrow Positioning (Below Card) */

/* 1. Add space at the bottom of the section for the new controls */
.news-section {
    padding-bottom: 7vw; /* Responsive spacing */
}

/* 2. Common styles for both arrows to reset and style them as buttons */
#newsCarouselDesktop .carousel-control-prev,
#newsCarouselMobile .carousel-control-prev,
#newsCarouselDesktop .carousel-control-next,
#newsCarouselMobile .carousel-control-next {
    position: absolute;
    top: 100%; /* Position below the slide content */
    bottom: auto;
    width: 45px;
    height: 45px;
    margin-top: 0.5rem; /* Space between card and arrows */
    opacity: 1;
    background-color: rgba(23, 35, 75, 0.25); /* Optional subtle background */
    color:#17234b;
    border-radius: 50%;
    border: 2px solid #17234b;
}

/* 3. Position the PREV arrow to the left of the center point */
#newsCarouselDesktop .carousel-control-prev,
#newsCarouselMobile .carousel-control-prev {
    left: 50%;
    transform: translateX(-55px); /* (45px width + 10px half-gap) */
}

/* 4. Position the NEXT arrow to the right of the center point */
#newsCarouselDesktop .carousel-control-next,
#newsCarouselMobile .carousel-control-next {
    left: 50%;
    transform: translateX(10px); /* (10px half-gap) */
}

/* END: FINAL Carousel Arrow Positioning */
/* Pushes mobile carousel arrows into the side whitespace */
/* #newsCarouselMobile .carousel-control-prev {
    transform: translateX(-7vw);
}

#newsCarouselMobile .carousel-control-next {
    transform: translateX(7vw);
}
#newsCarouselDesktop .carousel-control-prev {
    transform: translateX(-7vw);
}

#newsCarouselDesktop .carousel-control-next {
    transform: translateX(7vw);
} */

/* END: FINAL Corrected News Carousel Styles */

/* == 11. Main Footer == */
.site-footer-main {
    background-color: #17234B;
    color: #fff;
    font-family: 'roboto-con', sans-serif;
    padding: 40px 0 20px 0;
    text-align: center;
}
.social-links {
    margin-bottom: 20px;
}
.social-links a {
    margin: 0 15px;
}
.social-links img {
    max-height: 50px;
}
.footer-link {
    margin-bottom: 20px;
}
.footer-link a {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}
.footer-link a:hover {
    text-decoration: underline;
}
.footer-copyright {
    font-size: 16px;
}

/* == 12. Modals == */
.modal-body { color: #333; }
.video-modal .modal-body { padding: 0; }
.video-modal .close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
    border: 0;
    background: transparent;
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* == 13. Animations == */
.anim-fade-in {
    opacity: 0;
    animation: .2s anim-fade-in forwards;
}
@keyframes anim-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* == 14. Responsive Adjustments == */
@media (min-width: 768px) {
    header.site-header .site-header-actions a.btn {
        width: auto;
        height: auto;
        border-radius: 22px;
        padding: 8px 24px;
        font-size: 18px;
    }
    header.site-header .site-header-actions a.btn .btn-text {
        display: inline-block;
        margin-left: 8px;
    }
    .gronk-section {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 600px; /* Give it some height */
    }
    .gronk-content {
        padding: 0;
    }
    .welcome-content {
        text-align: right;
    }
    .group-experience-container {
        justify-content: flex-end;
    }
}

@media (max-width: 991px) {
    .pillar { flex-direction: column; }
    .pillar:nth-child(odd) .pillar-content,
    .pillar:nth-child(even) .pillar-content {
        order: 2;
        text-align: center;
    }
    .pillar:nth-child(odd) .pillar-image-container,
    .pillar:nth-child(even) .pillar-image-container {
        order: 1;
        width: 100%;
        height: 300px;
        margin-bottom: 2rem;
    }
    #newsCarousel .carousel-item {
        flex: 0 0 50%;
    }
    .pillar-content {
        padding: 2rem 1.5rem; /* Adjust horizontal padding for mobile */
    }
}

@media (max-width: 767px) {
    .news-section {
        padding-bottom: 20vw; /* Increased padding for mobile */
    }
    .welcome-content, .group-experience-container {
        text-align: center;
        justify-content: center;
    }
    #newsCarousel .carousel-item {
        flex: 0 0 100%;
    }
    .title-text {
        font-size: 40px;
    }
    .partner-logo-item {
        padding: 10px 15px;
    }
    /* START: Mobile Header Refactor */
.site-header {
    padding-top: 15px;
    padding-bottom: 15px;
}

.site-header-content {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.site-header-logo img {
    max-height: 50px;
}

header.site-header .site-header-actions a.btn {
    width: auto;
    height: auto;
    border-radius: 22px;
    padding: 2px 20px;
    font-size: 16px;
}
/* Gronk Section Mobile Fix */
.gronk-section {
    background-image: none !important;
}
/* END: Mobile Header Refactor */
/* Center Group Experiences on Mobile */
.groups-content {
    text-align: center;
}
.groups-content p {
    padding-right: 0; /* Remove desktop-specific padding */
}
}
/* Compacts the Community Partner logos on very small screens */
@media (max-width: 576px) {
    .partner-logo-grid {
        grid-template-columns: 1fr 1fr; /* Force two columns */
        gap: 1rem;                     /* Reduce the gap */
    }
    .partner-logo-grid .logo-container {
        height: 100px;                 /* Make logo boxes more compact */
    }
}
/* == 15. Final Mobile Polish (320px-425px) == */
/* == 15. Final Mobile Polish (Up to 425px) == */
/* == 15. Final Mobile Polish (Up to 425px) == */
@media (max-width: 425px) {
    /*
     * 1. Force Standardized Content Padding
     * Using !important to win any specificity conflicts and guarantee
     * a consistent safe area on all problematic sections.
    */
    section.welcome-section .welcome-content,
    section.gronk-section .gronk-content,
    section.groups-section .groups-content,
    section.community-section .community-intro,
    .news-section .container > h2 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /*
     * 2. Adjust Font Sizes for Small Viewports
     * Reduces font sizes on the largest titles and problematic paragraphs
     * to prevent them from breaking the layout on the smallest screens.
    */
    .hero-mobile-date {
        font-size: 24px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .welcome-title {
        font-size: 2.0rem;
    }

    .groups-content p,
    .community-intro p {
        font-size: 18px;
    }

    /*
     * 3. Force Email/Link Wrapping
     * Ensures long, unbreakable strings like email addresses wrap correctly.
    */
    #inthecommunity a {
        word-break: break-all;
    }
}

/* == 16. Widescreen Adjustments == */
@media (min-width: 1800px) {
    /*
     * For screens wider than 1800px, we increase the max-width
     * of the container ONLY for these two specific sections.
    */
    .welcome-section .container,
    .groups-section .container,
    .gronk-section .container {
        max-width: 1750px;
    }
}

/* --- TEMPORARY DEBUGGING BORDERS --- */
/* Add these lines to the very end of your CSS file */

/* .groups-section .container { border: 2px solid red; }
.groups-section .row { border: 2px solid blue; }
.groups-section .col-md-6 { border: 2px solid green; }
.groups-section .groups-content { border: 2px solid yellow; }

.community-section .container { border: 2px dotted red; }
.community-section .community-intro { border: 2px dotted yellow; } */

/* --- END DEBUGGING --- */