/* =========================================
   GLOBAL
========================================= */
.video-gallery-section{
  width:100%;
  padding:20px 20px;
  background:
  linear-gradient(
    135deg,
    rgba(135,206,235,0.10),
    rgba(255,255,255,1),
    rgba(186,230,253,0.25)
  );
}
.video-gallery-container{
  max-width:1250px;
  margin:auto;
}
/* =========================================
   HEADING
========================================= */
.section-heading{
  text-align:center;
  margin-bottom:30px;
}
.section-heading h2{
  font-size:46px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:14px;
}
.section-heading p{
  max-width:720px;
  margin:auto;
  font-size:17px;
  line-height:1.8;
  color:#475569;
}
/* =========================================
   MAIN BOX
========================================= */
.video-gallery-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:70px;
}
/* =========================================
   VIDEO AREA
========================================= */
.video-area{
  width:46%;
}
.video-frame{
  overflow:hidden;
  border-radius:28px;
  box-shadow:
  0 15px 35px rgba(0,0,0,0.08);
  background:#fff;
  transform:translateY(0px);
  transition:0.5s ease;
}
.video-frame:hover{
  transform:translateY(-6px);
}
.video-frame iframe{
  width:100%;
  height:320px;
  border:none;
  opacity:1;
  transition:opacity 0.4s ease;
}
/* =========================================
   CONTENT AREA
========================================= */
.content-area{
  width:54%;
}
.video-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:40px;
  background:#e0f2fe;
  color:#0284c7;
  font-size:14px;
  font-weight:600;
  margin-bottom:26px;
}
.content-area h3{
  font-size:42px;
  line-height:1.2;
  color:#0f172a;
  margin-bottom:24px;
  transition:0.4s ease;
}
.content-area p{
  font-size:17px;
  line-height:1.9;
  color:#475569;
  margin-bottom:42px;
  transition:0.4s ease;
}
/* =========================================
   MODERN DOTS
========================================= */
.video-dots{
  display:flex;
  align-items:center;
  gap:16px;
}
.dot{
  width:16px;
  height:16px;
  border:none;
  outline:none;
  border-radius:50%;
  background:#bfdbfe;
  cursor:pointer;
  transition:all 0.4s ease;
  position:relative;
}
/* hover effect */
.dot:hover{
  transform:scale(1.15);
  background:#7dd3fc;
}
/* active dot */
.dot.active{
  width:50px;
  border-radius:30px;
  background:
  linear-gradient(
    90deg,
    #38bdf8,
    #0ea5e9
  );
  box-shadow:
  0 6px 16px rgba(14,165,233,0.35);
}
/* =========================================
   MOBILE DESIGN
========================================= */

@media (max-width:768px){
  .video-gallery-section{
    padding:20px 15px;
  }
  .section-heading{
    margin-bottom:35px;
  }
  .section-heading h2{
    font-size:32px;
  }
  .section-heading p{
    font-size:14px;
  }
  .video-gallery-box{
    flex-direction:column;
    gap:28px;
  }
  /* MOBILE CONTENT */
  .content-area{
    width:100%;
    text-align:center;
  }
  .video-tag{
    display:none;
  }
  /* Hide paragraph & desktop title */
  .content-area h3,
  .content-area p{
    display:none;
  }
  .video-area{
    width:100%;
  }
  .video-frame iframe{
    height:220px;
    border-radius:18px;
  }
  .video-dots{
    justify-content:center;
    margin-top:5px;
  }
  .dot{
    width:12px;
    height:12px;
  }
  .dot.active{
    width:34px;
  }
}