/*Cover*/
.blurry-animation { 
	filter: blur(10px); opacity: 0; animation: clearBlur 2s ease-in-out forwards; 
}

@keyframes clearBlur {
    0% { filter: blur(10px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

header {
    text-align: center; /* Centers the text horizontally */
    margin: 10px 0; /* Adds vertical spacing around the header */
}

/* Customize text inside the gallery */

/*Header font*/

h1 {
    font-family: 'Montserrat', sans-serif; /* Use Montserrat font */
    font-size: 40px; /* Larger font for h1 headings */
    font-weight: 600; /* Make it bold */
    color: #143c14; /* Darker text color */
}

/*Title font*/

h2 {
    font-family:'Bodoni Moda', serif; /* font family */
    font-size: 30px; /* Slightly smaller font for h2 headings */
    font-weight: 700; /* Make it bold */
	  font-style: italic; /* Italic */
    color: #143c14; /* Darker text color */
}

/*? font*/

h3 {
    font-family:'Montserrat', sans-serif; /* font family */
    font-size: 48px; /* Slightly smaller font for h2 headings */
    font-weight: 300; /* Make it bold */
	  font-style: italic; /* Italic */
    color: #143c14; /* Darker text color */
}

h4 {
    font-size: 20px;
    font-weight: 300;
    margin: 5px 0 0 0; /* Remove bottom margin */
}

/*Paragraph font*/

p {
    font-size: 6px;
    line-height: 1.5; /* Improves readability */
    color: #555; /* Gray text */
	margin: 1px 0 0 0; /* Remove bottom margin */
}

/* Remove underline from all links */
a {
    text-decoration: none; /* Prevents the default underline on links */
	  color: #143c14;
}

/* Optionally, you can also change the color of the link */
a:hover {
    color: #081808; /* Change color when hovered (optional) */
}

/*DESCRIPTION*/
.video-card .description {
    color: #666; /* Neutral text color */
    font-size: 10px; /* Smaller size for the description */
    line-height: 1.5; /* Space between lines */
    margin-top: 5px; /* Adds space between title and description */
    text-decoration: none; /* Removes underline */
    pointer-events: none; /* Makes the description unclickable */
}

.gallery {
    margin-bottom: 40px;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
	  flex-direction: row;
}

.gallery-header h2 {
    margin-bottom: 30px;
}

.show-more {
    text-decoration: none;
    color: #143c14;
	  font-weight: 500;
    background: #d0d8d0;
    padding: 5px 12px 5px 12px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.show-more:hover {
    background: #5B775B;
	  color: white;
}

/*needed spacer before show-more .spacer {width: 10px;}*/

/* Netflix-Style Scrolling */
.video-container {
    position: relative;
    display: flex;
    align-items: center;
    
}

.video-row {
    display: flex;
    gap: 10px;
    overflow-x: scroll;
    scroll-behavior: smooth;
	  
}

.video-row::-webkit-scrollbar {
    display: none; /* Hide scrollbars */
}

.video-card {
    flex: 0 0 auto; /* Prevent shrinking */
    width: 300px; /*embed*/
    text-align: center;
    background: #e8ece8;
    border-radius: 5px;
    padding: 10px 10px 5px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card iframe {
    width: 100%;
    height: 180px;
    border-radius: 10px;
}

.video-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Scroll Buttons */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(208,216,208,1);
    color: black;
    border: none;
    border-radius: 0%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.3s ease;
}

.scroll-btn:hover {
    background: rgba(91,119,91,1);
    color: white;
}

.scroll-btn.left {
    left: 10px;
	  z-index: 10;
}

.scroll-btn.right {
    right: 10px;
}