﻿/* Place Your Custom Styles Here */
/* Responsive video wrapper */
.video-embed {
  max-width: 960px;           /* tweak if you want it wider/narrower */
  margin: 0 auto;
}

.video-embed-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;       /* modern browsers */
  background: rgba(0,0,0,0.2);
  border-radius: .5rem;
  overflow: hidden;
}

/* fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .video-embed-inner {
    height: 0;
    padding-bottom: 56.25%;   /* 16:9 */
  }
  .video-embed-inner iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
}

.video-embed-inner iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.video-article-link {
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
}

.video-article-link a {
  color: #ffffff;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.video-article-link a:hover {
  color: #00cdac; /* match your gradient accent */
  text-decoration: none;
}
/* Prevent logo from overlapping video or hero content */
#home .container {
  padding-top: 120px; /* adjust as needed, try 100–140px range */
}

/* On small screens, reduce spacing slightly */
@media (max-width: 767px) {
  #home .container {
    padding-top: 90px;
  }
}
