/* ===================================================================
   DIMENSI STUDIO - CUSTOM STYLES
   ===================================================================
   File ini berisi semua CSS custom untuk website Dimensi Studio
   - Navbar sticky styles
   - Mobile responsive adjustments
   - Logo alignment fixes
   =================================================================== */

/* ===== NAVBAR STICKY STYLES ===== */
/* Make navbar sticky/fixed at top */
#header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

/* Add padding to body to prevent content from hiding behind navbar */
body {
  padding-top: 80px; /* Adjust according to navbar height */
}

/* Enhanced scrolling effect */
#header.scrolled {
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
/* Tablet and Mobile (≤768px) */
@media (max-width: 768px) {
  body {
    padding-top: 70px;
  }
  
  /* Smaller logo and text on mobile */
  #header .logo img {
    height: 35px !important;
    margin-right: 4px !important; /* Much tighter spacing */
  }
  
  #header .logo h1 {
    font-size: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #header .logo span {
    margin-left: 0px !important; /* No gap between text and dot */
    margin-right: 0px !important;
    padding: 0 !important;
  }
  
  /* Fix logo alignment on mobile */
  #header .logo {
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important; /* Remove any flexbox gap */
  }
  
  #header .logo h1,
  #header .logo span {
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
  /* Even smaller on very small screens */
  #header .logo img {
    height: 30px !important;
    margin-right: 3px !important; /* Minimal spacing */
  }
  
  #header .logo h1 {
    font-size: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #header .logo span {
    margin: 0 !important; /* Absolutely no margin */
    padding: 0 !important;
  }
  
  /* Force tight alignment */
  #header .logo {
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Remove any default spacing from flexbox children */
  #header .logo > * {
    flex-shrink: 0 !important;
  }
}

/* ===== SERVICE DETAILS RESPONSIVE LAYOUT ===== */
/* Reorder content on mobile for better UX */
@media (max-width: 991px) {
  /* Main service details container */
  .service-details .row {
    display: flex;
    flex-direction: column;
  }
  
  /* Content order on mobile:
     1. Service image (first)
     2. Service title & description 
     3. Features list
     4. Sidebar (services list + WhatsApp) - after features
  */
  
  /* Service image stays at top */
  .service-details .services-img {
    order: 1;
    margin-bottom: 20px;
  }
  
  /* Service content (title, description, features) */
  .service-details .col-lg-8 {
    order: 2;
  }
  
  /* Move sidebar after main content */
  .service-details .col-lg-4 {
    order: 3;
    margin-top: 30px;
  }
  
  /* Adjust spacing for mobile layout */
  .services-list {
    margin-bottom: 20px;
  }
  
  .help-box {
    margin-top: 20px !important;
  }
  
  /* Ensure proper spacing between sections */
  .service-details .col-lg-8 > div:last-child {
    margin-bottom: 20px;
  }
}
/* ===== FOOTER ENHANCEMENTS ===== */
/* Make Dimensi Studio link in copyright clickable with hover effect */
.footer .copyright a {
  color: #0ea2bd !important; /* Dimensi Studio brand blue */
  text-decoration: none !important;
  transition: all 0.3s ease;
  font-weight: bold;
}

.footer .copyright a:hover {
  color: #0b8ca3 !important; /* Darker shade of brand blue on hover */
  text-decoration: underline !important;
  transform: scale(1.02);
}