.bg-gray {
    background-color: #efefef;
}

.txt-black {
    color: black;
}

main {
    flex: 1; /* Allow main to grow and fill available space */
    padding: 1rem; /* Padding for main content */
}

.video-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, auto); /* 2 rows */
    gap: 1rem;
    max-width: 100vw; /* Ensure gallery does not exceed viewport width */
    margin: 0 auto; /* Center the grid */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.video-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box; /* Ensure card width includes padding and border */
}

.video-card:hover {
    transform: scale(1.03);
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden; /* Hide any overflow from iframe */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-content {
    padding: 1rem;
}

.video-header {
    padding: 0.5rem;
    text-align: left; /* Align text to the left */
}

.video-header h4 {
    font-size: 1.5rem; /* Adjust font size for the main title */
    margin: 0;
}

.video-header h6 {
    font-size: 1rem; /* Adjust font size for the subtitle */
    color: #666;
    margin-top: 0.5rem;
}

.video-body {
    padding: 1rem;
}

/* Media Queries for Responsiveness */

@media (max-width: 768px) {
    .video-gallery {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
        grid-template-rows: auto; /* Allow rows to adjust based on content */
    }
}

@media (max-width: 480px) {
    .video-gallery {
        grid-template-columns: 1fr; /* Single column on mobile devices */
    }
}


.button-container-x {
    text-align: center; /* Center the button horizontally */
    margin: 2rem 0; /* Add space above and below the button */
}

.btn-pill-x {
    display: inline-block; /* Ensure the button is treated as an inline element */
    padding: 0.5rem 1rem; /* Add padding to the button */
    font-size: 1rem; /* Set font size */
    color: #fff; /* Text color */
    background-color: #ff0000; /* Background color (YouTube red) */
    border-radius: 50px; /* Make the button pill-shaped */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effects */
}

.btn-pill-x:hover {
    background-color: #cc0000; /* Darker shade on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

.button-container {
    text-align: center; /* Center the button horizontally */
    margin: 2rem 0; /* Add space above and below the button */
}

.btn-pill {
    display: inline-block; /* Ensure the button is treated as an inline element */
    padding: 0.5rem 1rem; /* Add padding to the button */
    font-size: 1rem; /* Set font size */
    color: #fff; /* Text color */
    background-color: #eb1c22; /* #ff0000; /* Background color (YouTube red) */
    border-radius: 50px; /* Make the button pill-shaped */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effects */
}

.btn-pill:visited {
    color: #fff; /* Maintain white text color after clicking */
    background-color: #eb1c22; /* Maintain the same background color */
    text-decoration: none; /* Ensure underline is removed after visit */
}

.btn-pill:hover {
    background-color: #eb1c22; /* #cc0000; /* Darker shade on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    text-decoration: none; /* Ensure underline is removed on hover */
    color: #fff; /* Ensure text color stays the same on hover */
}

.btn-pill:active {
    background-color: #eb1c22; /*#cc0000; /* Darker shade when the button is actively pressed */
    transform: scale(1.05); /* Keep the enlarged state when actively pressed */
    text-decoration: none; /* Ensure underline is removed on click */
}