/* Global Styles */
* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
}

body { 
  font-family:Arial,sans-serif; 
  background:#fff; 
  overflow-x:hidden; 
}

/* Top Bar */
.top-bar { 
  width:100%; 
  height:4vh; 
  background:purple; 
  color:#fff; 
  display:flex; 
  align-items:center; 
  position:fixed; 
  top:0; 
  z-index:999; 
}

.top-bar p { 
  white-space:nowrap; 
  animation:scrollText 15s linear infinite; 
  padding-left:100%; 
}

@keyframes scrollText { 
  from { transform:translateX(0); } 
  to { transform:translateX(-100%); } 
}

/* Navbar */
.navbar { 
  width:100%; 
  background:#fff; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:10px 20px; 
  position:fixed; 
  top:4vh; 
  z-index:998; 
  border-bottom:1px solid #ddd; 
}

.logo { 
  font-size:20px; 
  font-weight:bold; 
  color:#333; 
}

.menu { 
  display:flex; 
  gap:20px; 
}

.menu a { 
  text-decoration:none; 
  color:#333; 
  font-weight:500; 
}

.hamburger { 
  display:none; 
  flex-direction:column; 
  cursor:pointer; 
}

.hamburger span { 
  width:25px; 
  height:3px; 
  background:#333; 
  margin:3px 0; 
}

.mobile-menu { 
  display:none; 
  flex-direction:column; 
  position:absolute; 
  right:20px; 
  top:60px; 
  background:#fff; 
  border:1px solid #ddd; 
  padding:10px; 
}

.mobile-menu a { 
  padding:5px 0; 
  color:#333; 
  text-decoration:none; 
}

/* Main Content */
main { 
  padding-top:120px; 
  text-align:center; 
}

.videos { 
  display:flex; 
  flex-wrap:wrap; 
  gap:20px; 
  justify-content:center; 
  padding:20px; 
}

.videos iframe { 
  width:32%; 
  min-width:260px; 
  height:200px; 
  border:none; 
  border-radius:8px; 
}

.section-bg { 
  position:relative; 
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
            url('') center/cover no-repeat;

  height:200px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin:40px 0; 
}

.section-bg h2 { 
  color:#fff; 
  font-size:32px; 
  background:rgba(0,0,0,0.5); 
  padding:10px 20px; 
  border-radius:4px; 
}

/* Services Grid */
#direct-services { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  gap: 20px; 
  padding: 30px 20px; 
  max-width: 1200px; 
  margin: 0 auto; 
}

/* Service Card */
.service-card { 
background: #fff;
  border-radius: 12px; 
  box-shadow: 0 8px 16px rgba(0,0,0,0.08); 
  padding: 20px; 
  transition: all 0.3s ease; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  border: 1px solid #e0e0e0; 
  opacity: 0; 
  transform: translateY(20px); 
  animation: slideUp 0.6s ease forwards; 
}

.service-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 12px 24px rgba(0,0,0,0.12); 
}

.service-card h3 { 
  font-size: 20px; 
  margin-bottom: 10px; 
  color: #333; 
}

.service-card p { 
  flex-grow: 1; 
  font-size: 15px; 
  color: #555; 
  margin-bottom: 15px; 
}

.price-time { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 15px; 
}

.price-time .price { 
  font-weight: bold; 
  color: #007bff; 
  font-size: 17px; 
}

.service-card button { 
  background: #007bff; 
  color: #fff; 
  padding: 10px 15px; 
  border: none; 
  border-radius: 6px; 
  cursor: pointer; 
  font-size: 14px; 
  transition: background 0.3s; 
}

.service-card button:hover { 
  background: #0056b3; 
}

@keyframes slideUp { 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

/* Modal */
.modal { 
  display: none; 
  position: fixed; 
  z-index: 999; 
  left: 0; 
  top: 0; 
  width: 100vw; 
  height: 100vh; 
  background-color: rgba(0, 0, 0, 0.6); 
  justify-content: center; 
  align-items: center; 
  padding: 15px; 
}

.modal-content { 
  background-color: #fff; 
  border-radius: 12px; 
  max-width: 450px; 
  width: 100%; 
  padding: 25px 30px; 
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
  position: relative; 
  animation: fadeIn 0.3s ease; 
}

@keyframes fadeIn { 
  from { opacity: 0; transform: scale(0.95); } 
  to { opacity: 1; transform: scale(1); } 
}

.modal-content .close { 
  position: absolute; 
  top: 10px; 
  right: 15px; 
  font-size: 24px; 
  color: #999; 
  cursor: pointer; 
}

.modal-content .close:hover { 
  color: #ff4d4d; 
}

.modal-content h3 { 
  margin-bottom: 20px; 
  font-size: 20px; 
  text-align: center; 
  color: #333; 
}

.modal-content form { 
  display: flex; 
  flex-direction: column; 
}

.modal-content label { 
  margin-bottom: 5px; 
  font-size: 14px; 
  font-weight: 500; 
  color: #444; 
}

.modal-content input, 
.modal-content select { 
  padding: 10px; 
  margin-bottom: 15px; 
  border-radius: 6px; 
  border: 1px solid #ccc; 
  font-size: 14px; 
  outline: none; 
}

.modal-content input:focus, 
.modal-content select:focus { 
  border-color: #007bff; 
}

.modal-content button { 
  background-color: #007bff; 
  color: white; 
  border: none; 
  padding: 10px 0; 
  border-radius: 6px; 
  font-size: 15px; 
  cursor: pointer; 
  transition: background-color 0.3s ease; 
}

.modal-content button:hover { 
  background-color: #0056b3; 
}

/* Footer */
.site-footer { 
  background-color: #0f172a; 
  color: #f1f1f1; 
  padding: 30px 20px; 
  text-align: center; 
  font-size: 15px; 
  margin-top: 50px; 
  border-top: 3px solid #334155; 
}

.site-footer a { 
  color: #38bdf8; 
  text-decoration: underline; 
}

.footer-content p { 
  margin: 5px 0; 
}

.social-icons { 
  margin-top: 15px; 
}

.social-icons a { 
  margin: 0 10px; 
  display: inline-block; 
}

.social-icons img { 
  width: 30px; 
  height: 30px; 
  transition: transform 0.2s ease; 
}

.social-icons img:hover { 
  transform: scale(1.2); 
}

/* Responsive */
@media(max-width:768px){ 
  .menu { display:none; } 
  .hamburger { display:flex; } 
  .videos iframe { width:90%; margin:10px auto; } 
}