.elementor-463 .elementor-element.elementor-element-c7e69a0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-463 .elementor-element.elementor-element-f667869{text-align:center;}.elementor-463 .elementor-element.elementor-element-f667869 .elementor-heading-title{font-family:"Nunito", Sans-serif;font-size:18px;font-weight:700;letter-spacing:1px;color:var( --e-global-color-primary );}/* Start custom CSS for html, class: .elementor-element-3d5476d */.youtube-showcase {
  padding: 50px 20px;
  background: linear-gradient(to right, #f0f4f8, #d9e2ec);
  text-align: center;
  animation: fadeIn 1.2s ease-in-out;
}

.youtube-showcase h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #333;
  animation: slideDown 1s ease-in-out;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  justify-content: center;
}

.video-card {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  animation: fadeUp 1s ease-in-out;
}

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

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}/* End custom CSS */