/*--------------------------------------------------------------
# YouTube Video Section Styles (Using .ytvideos)
--------------------------------------------------------------*/
.ytvideos { /* Changed from .video-section */
    /* Add background color or keep it transparent based on your design */
     background-color: #f8f9fa; /* Example light background */
     /* Or maybe match your dark blue: background-color: #1a234d; */
}

/* Adjust title styles if needed to match theme */
.ytvideos .sec-title h2 { /* Changed from .video-section */
     color: #1a234d; /* Example title color on light bg */
     /* color: #ffffff; */ /* Example title color on dark bg */
     margin-bottom: 15px;
}
 .ytvideos .sec-title .sub-title { /* Changed from .video-section */
     color: #e63946; /* Example theme red */
     display: block;
     margin-bottom: 5px;
     font-weight: 500;
 }

/* --- Inner element styles remain largely the same --- */
/* --- but ensure they are correctly scoped if needed --- */
/* --- (though direct descendant selectors are often sufficient) --- */

.ytvideos .video-block { /* Scoping just in case, optional */
    /* Ensures columns behave correctly */
}

.ytvideos .video-card { /* Scoping just in case, optional */
  /* Add styling like background, border, padding if desired */
  /* background: #ffffff; */
  /* border: 1px solid #eee; */
  /* border-radius: 8px; */
  /* padding: 15px; */
  /* box-shadow: 0 4px 10px rgba(0,0,0,0.05); */
  transition: transform 0.3s ease;
}
.ytvideos .video-card:hover { /* Scoping just in case, optional */
   /* transform: translateY(-5px); */ /* Optional hover effect */
}


/* Responsive YouTube Embed Container */
/* --- Reconfirm these styles --- */

/* Responsive YouTube Embed Container */
.ytvideos .video-embed-container {
  position: relative;   /* Crucial for absolute positioning of iframe */
  overflow: hidden;     /* Hides anything outside the container */
  width: 100%;          /* Takes full width of its parent (.video-card) */
  padding-top: 56.25%;  /* 16:9 Aspect Ratio (9 / 16 * 100%) - THIS SETS THE HEIGHT */
  background-color: #000; /* Optional: Background while loading */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* The actual Iframe */
.ytvideos .video-embed-container iframe {
  position: absolute;   /* Positioned relative to .video-embed-container */
  top: 0;
  left: 0;
  width: 100%;          /* Makes iframe fill the container width */
  height: 100%;         /* Makes iframe fill the container height */
  border: none;         /* Remove default border */
}

/* --- Check Parent Styles (Ensure they aren't restricting width) --- */

.ytvideos .video-card {
  width: 100%; /* Explicitly allow card to fill column */
  /* Remove any fixed width or max-width if present */
}

/* Grid columns should already handle width, but double check theme styles if needed */
.ytvideos .video-block {
    /* Usually empty unless specific column adjustments needed */
}

.ytvideos .video-title { /* Scoping just in case, optional */
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    /* color: #ffffff; */ /* Color for dark background */
    margin-top: 15px;
    margin-bottom: 0;
}

.ytvideos .video-description { /* Scoping just in case, optional */
    font-size: 0.9rem;
    color: #666;
    /* color: #ccc; */ /* Color for dark background */
    margin-top: 5px;
}

/* --- Utility classes remain the same --- */
.mb_15 { margin-bottom: 15px !important; }
.mb_30 { margin-bottom: 30px !important; }
.mb_50 { margin-bottom: 50px !important; }
.pt_100 { padding-top: 100px !important; }
.pb_70 { padding-bottom: 70px !important; }
.text-center { text-align: center !important; }