/* Container for the video section */
.video-section {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.section-title {
font-size: 1.8rem;
color: #333;
margin-bottom: 20px;
border-left: 5px solid #d93025; /* YouTube Red accent color */
padding-left: 15px;
}

/* The Scrollable Row */
.video-carousel {
display: flex;
overflow-x: auto;
gap: 20px;
padding-bottom: 20px;
/* Smooth scrolling physics for mobile */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}

/* Individual Video Card */
.video-card {
flex: 0 0 300px; /* Fixed width: 300px per video */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
scroll-snap-align: start; /* Snaps in place when scrolling */
transition: transform 0.2s;
border: 1px solid #eee;
}

.video-card:hover {
transform: translateY(-5px); /* Slight lift on hover */
}

/* Responsive Video Container (16:9 Aspect Ratio) */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background: #000;
}

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

.video-title {
padding: 15px;
font-size: 0.95rem;
font-weight: 600;
color: #444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Adds "..." if title is too long */
}

/* Custom Scrollbar Styling */
.video-carousel::-webkit-scrollbar {
height: 8px;
}
.video-carousel::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.video-carousel::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.video-carousel::-webkit-scrollbar-thumb:hover {
background: #999;
}

.main-cta-btn {
  background-color: #28a745; /* Bright Green */
  color: white;
  padding: 15px 35px;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px; /* Rounded corners */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.2s, background-color 0.2s;
  display: inline-block;
}

.main-cta-btn:hover {
  background-color: #218838; /* Darker green on hover */
  transform: translateY(-3px); /* Button lifts up slightly */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}