/* Custom overrides and extracted inline styles */
.required{
  color: red;
}

.text-center {
  text-align: center;
}

.text-danger {
  color: red;
}

.center-img {
  display: block;
  margin: 20% auto 0;
}

/* Contact map container height */
#map,
.contact-map {
  height: 480px;
  width: 100%;
}

/* Hide unused template sections */
.team-area,
.testimonial-area,
.count-down-area,
.wantToWork-area,
.brand-area,
.single_sidebar_widget.newsletter_widget,
.single_sidebar_widget.instagram_feeds { display: none !important; }

/* Utility widths for progress bars */
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }

/* Elements gallery backgrounds */
.bg-g1 { background: url(assets/img/elements/g1.jpg); }
.bg-g2 { background: url(assets/img/elements/g2.jpg); }
.bg-g3 { background: url(assets/img/elements/g3.jpg); }
.bg-g4 { background: url(assets/img/elements/g4.jpg); }
.bg-g5 { background: url(assets/img/elements/g5.jpg); }
.bg-g6 { background: url(assets/img/elements/g6.jpg); }
.bg-g7 { background: url(assets/img/elements/g7.jpg); }
.bg-g8 { background: url(assets/img/elements/g8.jpg); }
/* Simple spacing for gallery thumbnails */
.section-padding30 { padding-top: 60px; padding-bottom: 60px; }

/* Gallery styles */
.gallery-grid a { text-decoration: none; }
.gallery-grid .video-title { color: #0b1c39 !important; font-weight: 600; transition: color .25s ease; }
.gallery-grid .video-link { color: #0b1c39 !important; position: relative; display: block; }
.gallery-grid .ig-caption { color: #0b1c39; font-size: 14px; margin-top: 8px; line-height: 1.4; }
.gallery-grid .gallery-item { position: relative; border-radius: 8px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.gallery-grid .gallery-item img { width: 100%; height: auto; display: block; transition: transform .3s ease, filter .3s ease; }
.gallery-grid .gallery-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,28,57,.12); }
.gallery-grid .gallery-item:hover img { transform: scale(1.04); }
.gallery-grid .gallery-item:hover .video-title { color: #06142b; }

/* Instagram overlay caption */
.gallery-grid .ig-link { position: relative; }
.gallery-grid .ig-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  opacity: .9;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

.gallery-grid .ig-link:hover .ig-overlay { opacity: 1; transform: translateY(-4px); }

/* YouTube play overlay */
.gallery-grid .video-link::after {
  content: "\f04b"; /* Font Awesome play icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9);
  width: 56px; height: 56px; line-height: 56px; text-align: center;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.gallery-grid .video-link:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Booking availability modal styles */
#availabilityModal .availability-overlay,
#availabilityTrigger .availability-overlay { position:absolute; inset:0; z-index:3; }
#availabilityTrigger .input-group .form-control[disabled],
#availabilityTrigger .input-group .input-group-text { background:#f3f5f9; border-color:#dfe3eb; color:#6c757d; }
#availabilityTrigger .input-group { cursor:pointer; }
#availabilityTrigger .input-group .input-group-text { cursor:pointer; }
#availabilityModal .modal-content { border-radius: 10px; box-shadow: 0 18px 40px rgba(11,28,57,.2); }
#availabilityModal .modal-title { color:#0b1c39; font-weight:700; }
#availabilityModal .badge-light { background: #eef1f7; color:#0b1c39; }
#availabilityModal #userCalendar { background:#fff; }
#availabilityModal .fc .fc-toolbar-title { font-size:1.1rem; color:#0b1c39; }
#availabilityModal .fc .fc-button { border-radius:8px; }
#availabilityModal .fc-daygrid-day.is-unavailable { opacity:.4; pointer-events:none; }
#availabilityModal .fc-daygrid-day.is-available { background:#22E319; color:#fff; }
#availabilityModal .fc-event-title, 
#availabilityModal .fc-event-time { display:none; }
#availabilityModal .hour-pill { cursor:pointer; }
#availabilityModal .hour-pill input { display:none; }
#availabilityModal .hour-pill .pill { display:inline-block; padding:.5rem .75rem; border:1px solid #dee2e6; border-radius:.5rem; margin:.25rem; background:#fff; }
#availabilityModal .hour-pill input:checked + .pill { background:#d4edda; color:#155724; border-color:#c3e6cb; }
#availabilityModal .hour-pill input[disabled] + .pill { opacity:.6; }

/* Make the booking modal roughly twice as wide on large screens */
#availabilityModal .modal-dialog.modal-2x { width: 95vw; max-width: 95vw; }
@media (min-width: 1200px) {
  #availabilityModal .modal-dialog.modal-2x { width: 90vw; max-width: 90vw; }
}

/* Keep contextual button colors on hover (the template overlay turned them white) */
.btn::before { content: none !important; }
.btn:hover::before { transform: none; }