/* style.css - light theme custom styles */
:root{
  --primary:#0d6efd;
  --muted:#6c757d;
  --bg:#f8f9fa;
  --card-bg:#ffffff;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #222;
}

/* logos */
.site-logo{
  width:64px;
  height:64px;
  object-fit:contain;
}
.mobile-logo{
  width:46px;
}

/* topbar */
.topbar { box-shadow: 0 1px 6px rgba(16,24,40,0.04); }
.navbar .nav-link { color: #374151; padding: .6rem 1rem; }
.navbar .nav-link.active { font-weight:600; color:var(--primary); }

/* hero */
/* Hero triangular content background */
.hero-triangular {
  background: #ff6600; /* fallback */
  color: #fff;
  position: relative;
}

.content-triangle {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  overflow: visible;
}

/* Layer offsets for desktop */
.layer-1 { position: relative; top: 0; left:0; }
.layer-2 { position: relative; top: -10px; left: 10px; }
.layer-3 { position: relative; top: -5px; left: 5px; }
.layer-4 { position: relative; top: 5px; }

/* Fade-up animation */
.layer-1, .layer-2, .layer-3, .layer-4 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s forwards;
}
.layer-2 { animation-delay: 0.2s; }
.layer-3 { animation-delay: 0.4s; }
.layer-4 { animation-delay: 0.6s; }

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

/* ============ MOBILE FIX ============ */
@media (max-width: 768px) {

  /* Section height and spacing fix */
  .hero-triangular {
    min-height: auto !important;
    padding: 60px 20px !important;
    background-position: center !important;
    background-size: cover !important;
  }

  /* Overlay visibility reduced */
  .hero-triangular > div[style*="background"] {
    background: rgba(0,0,0,0.25) !important;
  }

  /* Ensure content always stays above overlay */
  .hero-triangular .container {
    position: relative !important;
    z-index: 5 !important;
  }

  /* Reset triangle and alignment */
  .content-triangle {
    padding: 1.5rem !important;
    text-align: center !important;
    clip-path: none !important;
  }

  /* Remove all positioning offsets & animations */
  .layer-1, .layer-2, .layer-3, .layer-4 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}


/* Optional subtle overlay/triangle behind image for contrast */
.hero-bg-shape {
  position: absolute;
  top:0; left:50%;
  width:50%; height:100%;
  background: url('assets/images/hero-tv.png') center/cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
  z-index:1;
  opacity:0.1; /* subtle behind content */
}

/* Responsive adjustments */
@media (max-width: 991px){
  .content-triangle {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding:2rem;
    text-align:center;
  }
  .hero-bg-shape { display:none; }
}
.about-screenup .about-content {
  backdrop-filter: blur(4px); /* subtle blur for better readability */
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.about-screenup ul li {
  margin-bottom: 0.5rem;
  font-weight:500;
  color:#333;
}

/* Responsive */
@media (max-width:991px){
  .about-screenup .about-content {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    text-align:center;
    padding:2rem;
  }
}
/* Diagonal background */
.service-bg-layer {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:60%;
  background:#f7f7f7;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);
  z-index:1;
}
/* Background diagonal */
.premium-bg-shape {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:90%;
  background:#fff3e6;
  clip-path:polygon(0 0, 100% 0, 100% 75%, 0 100%);
  z-index:1;
}

/* Image box */
.premium-image-box img {
  border-radius:20px;
  object-fit:cover;
}

/* Feature boxes */
.feature-box {
  background:#fff;
  border-radius:15px;
  transition:.3s;
}

.feature-box:hover {
  transform:translateY(-8px);
  box-shadow:0 25px 35px rgba(0,0,0,0.12);
}

/* Responsive */
@media(max-width: 768px) {
  .premium-bg-shape {
    height:100%;
    clip-path:polygon(0 0,100% 0,100% 90%,0 100%);
  }
}

/* Service Cards */
.service-card {
  background:#fff;
  border-radius:14px;
  transition:all .3s ease;
  position:relative;
}

.service-card:hover {
  transform:translateY(-8px);
  box-shadow:0 18px 35px rgba(0,0,0,0.12);
}

/* Icon box */
.icon-box {
  width:70px;
  height:70px;
  margin:auto;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,102,0,0.1);
  font-size:28px;
  color:#ff6600;
}
/* Background diagonal */
.hiw-bg-layer {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:65%;
  background:#f8f9fa;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  z-index:1;
}

/* Card styling */
.hiw-card {
  background:#fff;
  border-radius:20px;
  transition:.3s;
}

.hiw-card:hover {
  transform:translateY(-10px);
  box-shadow:0 20px 35px rgba(0,0,0,0.12);
}

/* Icons */
.hiw-icon {
  width:70px;
  height:70px;
  margin:auto;
  border-radius:50%;
  background:rgba(255,102,0,0.15);
  color:#ff6600;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:28px;
}

/* Step connector line */
.hiw-flow {
  position:relative;
}

.hiw-line {
  width:80px;
  height:3px;
  background:#ff6600;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* Mobile fix: hide line */
@media(max-width: 767px) {
  .hiw-line {
    display:none;
  }
}

/* Premium Gallery Section */
.premium-gallery-section {
  background: #f9fafc;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
  transition: .3s ease-in-out;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  transition: .5s ease;
  object-fit: cover;
}

/* Hover Zoom + Dark Overlay */
.gallery-card:hover img {
  transform: scale(1.12);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .4s ease;
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  color: #fff;
  font-size: 30px;
  transform: scale(0.7);
  transition: .3s ease;
}

.gallery-card:hover .gallery-overlay i {
  transform: scale(1);
}

/* Shadow Enhancement */
.gallery-card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* Booking Section Background */
.booking-section {
  background: linear-gradient(135deg, #ff7b00, #ffb64c);
  position: relative;
  overflow: hidden;
}

/* Glass Form Card */
.booking-form {
  max-width: 650px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.25);
  transition: .3s ease-in-out;
}

.booking-form:hover {
  transform: translateY(-4px);
}

/* Form Labels with Icons */
.booking-form .form-label {
  font-weight: 600;
  color: #fff;
}

.booking-form .form-label i {
  color: #ffe19c;
  margin-right: 6px;
}

/* Inputs */
.booking-form .form-control,
.booking-form .form-select {
  border-radius: 12px;
  padding: 10px 14px;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Booking Button */
.booking-btn {
  background: #ffe082;
  color: #333;
  border-radius: 14px;
  transition: .3s ease;
}

.booking-btn:hover {
  background: #fff3c6;
  transform: scale(1.05);
}

/* feature cards */
.feature-card i { color: var(--primary); font-size:1.6rem; }

/* gallery */
.gallery-card img { height:220px; object-fit:cover; transition: transform .4s ease; }
.gallery-card img:hover { transform: scale(1.04); }

/* buttons */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #0b5ed7; border-color:#0b5ed7; }

/* footer */
footer { font-size: .95rem; }

/* cards */
.card { border: none; }
.shadow-sm { box-shadow: 0 6px 18px rgba(15,23,42,0.06); }

/* responsive tweaks */
@media (max-width: 767px){
  .site-title { display:none; }
  .topbar .container { gap: .5rem; }
}

/* small utilities */
.small { font-size: .92rem; }

/* map placeholder */
.map-placeholder { min-height:180px; display:flex; align-items:center; justify-content:center; }

/* form controls */
.form-control:focus { box-shadow: 0 0 0 .15rem rgba(13,110,253,0.12); border-color: var(--primary); }

/* testimonials */
.card p { font-size: .95rem; color: #333; }

/* ensure images are rounded */
img.rounded { border-radius: .6rem; }

/* social */
.social { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
/* ------------------------------
   MOBILE FIX FOR NEW HEADER
--------------------------------*/
@media (max-width: 991px) {

  /* Header container spacing */
  .super-header .navbar {
    padding: 1.2rem 0 !important;
  }

  /* Brand adjust */
  .navbar-brand {
    font-size: 1.6rem !important;
  }

  /* Mobile Menu Background */
  #mainNav {
    background: rgba(0, 0, 0, 0.85);
    padding: 20px;
    border-radius: 12px;
    margin-top: 15px;
  }

  /* Mobile Menu Link */
  .menu-link {
    color: #fff !important;
    font-size: 18px;
    padding: 10px 0;
    display: block;
    text-align: center;
  }

  .menu-link::after {
    display: none; /* underline animation hide on mobile */
  }

  /* Call Button Mobile */
  .call-btn {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 18px;
    padding: 12px 0;
  }

  /* Toggle button bigger */
  .custom-toggler i {
    font-size: 30px !important;
  }
}