/*
  Styles for the video-area layout
  - Uses flexbox to arrange left and right areas horizontally
  - gap defines spacing between the two columns
  - padding provides outer spacing around the area
*/
.video-area {
  display: flex;
  align-items: center; /* vertically center content */
  gap: 60px; /* horizontal spacing between left and right columns */
  padding: 80px 40px; /* top/bottom and left/right padding */
}

/* Left column inside the video area: allow it to grow and share space */
.video-area .left-video-area {
  flex: 1;
}

/* Right column inside the video area: allow it to grow and share space */
.video-area .right-video-area {
  flex: 1;
}

/* Paragraph/text copy styling used in the section */
.section-copy {
  font-size: 18px; /* readable body size */
  line-height: 1.7; /* comfortable line height for readability */
  text-align: justify; /* justified text alignment */
  color: #555; /* muted dark gray text color */
}

/* Responsive rules for smaller screens
   - Stack columns vertically and reduce padding */
@media (max-width: 768px) {
  .video-area {
    flex-direction: column-reverse; /* stack: video below content */
    padding: 20px 20px; /* reduced padding on mobile */
  }
}