/* ============================================
   DBS Website - 2026 Modern Refresh
   Override file - loads AFTER Elementor CSS
   ============================================ */

/* ------------------------------------------
   1. GLOBAL DESIGN TOKENS
   ------------------------------------------ */
.elementor-kit-102 {
  /* Soften colors */
  --e-global-color-primary: #000000;
  --e-global-color-secondary: #4a4a5a;
  --e-global-color-text: #2d3436;

  /* Typography - Bebas Neue for headings */
  --e-global-typography-primary-font-family: "Bebas Neue";
  --e-global-typography-primary-font-size: 2.4em;
  --e-global-typography-primary-font-weight: 400;
  --e-global-typography-primary-text-transform: uppercase;
  --e-global-typography-primary-line-height: 1.15em;
  --e-global-typography-primary-letter-spacing: 1.5px;

  --e-global-typography-secondary-font-weight: 500;
  --e-global-typography-secondary-text-transform: none;
  --e-global-typography-secondary-letter-spacing: 0px;

  --e-global-typography-text-font-size: 1.05rem;
  --e-global-typography-text-font-weight: 400;

  --e-global-typography-accent-text-transform: none;

  --e-global-typography-df1c5e3-font-family: "Bebas Neue";
  --e-global-typography-df1c5e3-text-transform: uppercase;
  --e-global-typography-336bdc1-text-transform: uppercase;
  --e-global-typography-336bdc1-font-weight: 400;
  --e-global-typography-36cbde5-text-transform: uppercase;
  --e-global-typography-b1ea3e7-text-transform: uppercase;
  --e-global-typography-b1ea3e7-font-weight: 400;

  --e-global-typography-08eca54-font-weight: 400;
  --e-global-typography-08eca54-letter-spacing: 0px;
  --e-global-typography-cfaa767-font-weight: 400;

  /* Body defaults */
  font-weight: 400;
  line-height: 1.7;
}

/* Wider container - set variable only; .e-con-inner handles centering via margin:0 auto */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}
.e-con {
  --container-max-width: 1280px;
}

/* Smoother paragraph spacing */
.elementor-kit-102 p {
  margin-bottom: 1.2em;
}

/* Link transitions */
.elementor-kit-102 a {
  transition: color 0.25s ease;
}

/* Email mailto links inherit parent color (white on dark header/footer) */
.elementor-icon-list-text a {
  color: inherit !important;
}

/* ------------------------------------------
   2. TYPOGRAPHY REFINEMENTS
   ------------------------------------------ */

/* Bebas Neue for ALL headings */
.elementor-heading-title {
  font-family: "Bebas Neue", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 400 !important;
}

/* Icon box titles (service cards etc.) */
.elementor-icon-box-title,
.elementor-icon-box-title a {
  font-family: "Bebas Neue", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 400 !important;
}

/* Body text - bump weight from 300 to 400 for readability */
.elementor-widget-text-editor {
  line-height: 1.75;
  font-weight: 400 !important;
}

/* ------------------------------------------
   3. NAVIGATION MENU
   ------------------------------------------ */

/* Main nav items */
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu .elementor-item {
  font-size: 0.85em;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  padding-top: 8px;
  padding-bottom: 8px;
  transition: color 0.25s ease;
}

/* Hover - use accent color */
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--main .elementor-item:hover,
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--main .elementor-item:focus {
  color: var(--e-global-color-accent) !important;
}

/* Hover underline effect */
.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
  height: 3px !important;
  border-radius: 2px;
}

/* Dropdown menu - clean modern look */
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--dropdown a:hover,
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-30 .elementor-element.elementor-element-ac85f53 .elementor-nav-menu--dropdown a.highlighted {
  background-color: #fef5eb !important;
  color: var(--e-global-color-accent) !important;
}

.elementor-nav-menu--dropdown {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .elementor-sub-item {
  text-transform: none !important;
  font-weight: 400 !important;
  padding: 10px 20px !important;
}

/* Top utility bar - slightly more padding */
.elementor-30 .elementor-element.elementor-element-e50adb8 {
  --padding-top: 8px;
  --padding-bottom: 8px;
}

.elementor-30 .elementor-element.elementor-element-47f7ab3 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-30 .elementor-element.elementor-element-47f7ab3 .elementor-icon-list-item > a {
  font-size: 0.8em;
  font-weight: 400;
}

/* Mobile hamburger */
.elementor-menu-toggle {
  border-radius: 6px;
  padding: 8px !important;
}

/* ------------------------------------------
   4. SECTION HEADING DECORATIONS
   Preserve original Elementor double-border style
   ------------------------------------------ */

/* Ensure ALL section headings have the double-border orange lines */
.elementor-123 .elementor-element.elementor-element-50be39b > .elementor-widget-container,
.elementor-123 .elementor-element.elementor-element-df9f3b6 > .elementor-widget-container {
  border-style: double;
  border-width: 0px 10px 0px 10px;
  border-color: var(--e-global-color-accent);
  margin-bottom: 50px;
}

/* ------------------------------------------
   5. HOME PAGE
   ------------------------------------------ */

/* Hero section - subtle overlay for text readability */
.elementor-element-2b2145f::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.55) 0%, rgba(26, 26, 46, 0.3) 100%);
  z-index: 0;
  pointer-events: none;
}

.elementor-element-2b2145f > * {
  position: relative;
  z-index: 1;
}

/* Hero text box */
.elementor-element-3727407 {
  border-radius: 12px !important;
  backdrop-filter: blur(4px);
  border-width: 0 0 0 4px !important;
  border-style: solid !important;
  border-color: var(--e-global-color-accent) !important;
}

/* Service icon boxes - card style with staggered fade-in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.elementor-widget-icon-box {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  animation: fadeInUp 0.6s ease both;
}

/* Staggered animation delays for service cards */
.e-con-full:nth-child(1) > .elementor-widget-icon-box { animation-delay: 0.2s; }
.e-con-full:nth-child(2) > .elementor-widget-icon-box { animation-delay: 0.4s; }
.e-con-full:nth-child(3) > .elementor-widget-icon-box { animation-delay: 0.6s; }
.e-con-full:nth-child(4) > .elementor-widget-icon-box { animation-delay: 0.8s; }
.e-con-full:nth-child(5) > .elementor-widget-icon-box { animation-delay: 1.0s; }

.elementor-widget-icon-box:hover {
  transform: translateY(-6px);
}

.elementor-icon-box-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
  box-shadow: 0 25px 50px rgba(248, 153, 29, 0.4),
              0 0 30px rgba(248, 153, 29, 0.2);
  border-color: rgba(248, 153, 29, 0.8);
}

/* Service icon size refinement */
.elementor-icon-box-icon .elementor-icon {
  margin-bottom: 12px;
}

/* Gallery images */
.gallery-item img {
  border-radius: 8px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Carousel images */
.elementor-image-carousel .swiper-slide img {
  border-radius: 10px;
}

/* Light gray section background */
[class*="elementor-element-48f27b5"],
[class*="elementor-element-521f9efa"] {
  border-radius: 0;
}

/* ------------------------------------------
   6. ABOUT PAGE TEXT FIX
   ------------------------------------------ */

/* Fix squashed text - widen the content area */
.elementor-125 [class*="elementor-element-cbe4b1f"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove excessive left margin on secondary text */
.elementor-125 [class*="elementor-element-5f32e25"] {
  margin-left: 0 !important;
}

/* Better text container width */
.elementor-125 .elementor-widget-text-editor > .elementor-widget-container {
  max-width: 800px;
}

/* About page heading decorations */
.elementor-125 .elementor-widget-heading > .elementor-widget-container {
  border-style: solid !important;
  border-width: 0 0 0 3px !important;
}

/* ------------------------------------------
   7. BLOCKQUOTE
   ------------------------------------------ */
.elementor-blockquote {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px);
  border-left: 4px solid var(--e-global-color-accent) !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.elementor-blockquote__content {
  font-size: 1.6em !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.2px !important;
}

.elementor-blockquote__author {
  font-weight: 500 !important;
  opacity: 0.7;
  margin-top: 12px;
}

/* ------------------------------------------
   8. BUTTONS & FORMS
   ------------------------------------------ */
.elementor-button {
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

.elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(248, 153, 29, 0.3);
}

/* Form inputs */
.elementor-field-group .elementor-field {
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  padding: 12px 16px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  font-size: 1rem !important;
}

.elementor-field-group .elementor-field:focus {
  border-color: var(--e-global-color-accent) !important;
  box-shadow: 0 0 0 3px rgba(248, 153, 29, 0.12) !important;
  outline: none !important;
}

.elementor-field-group textarea.elementor-field {
  border-radius: 8px !important;
}

.elementor-field-group label {
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

/* ------------------------------------------
   9. FOOTER
   ------------------------------------------ */
.elementor-location-footer .e-con {
  padding-top: 40px;
  padding-bottom: 40px;
}

.elementor-location-footer a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

.elementor-location-footer a:hover {
  opacity: 0.85;
}

/* Footer icon list spacing */
.elementor-location-footer .elementor-icon-list-item {
  padding: 4px 0;
}

/* ------------------------------------------
   10. GLOBAL POLISH
   ------------------------------------------ */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Better image rendering */
img {
  image-rendering: auto;
}

/* Logo subtle hover */
.elementor-widget-theme-site-logo img {
  transition: opacity 0.25s ease;
}

.elementor-widget-theme-site-logo img:hover {
  opacity: 0.85;
}

/* ------------------------------------------
   Scroll-reveal: elements fade/slide in as they enter the viewport
   ------------------------------------------ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Header - full width backgrounds, no white gaps on wide screens */
.elementor-location-header .e-con {
  max-width: 100%;
  --container-max-width: 100%;
}

/* Header shadow for depth */
.elementor-location-header {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 100;
}

/* Selection color */
::selection {
  background-color: rgba(248, 153, 29, 0.2);
  color: inherit;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--e-global-color-accent);
}

/* ------------------------------------------
   RESPONSIVE
   ------------------------------------------ */
@media (max-width: 1024px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1024px;
  }
  .e-con {
    --container-max-width: 1024px;
  }
}

@media (max-width: 767px) {
  .elementor-kit-102 {
    --e-global-typography-primary-font-size: 1.8em;
  }

  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
  }
  .e-con {
    --container-max-width: 100%;
  }

  .elementor-icon-box-wrapper {
    padding: 16px 12px;
  }

  .elementor-blockquote__content {
    font-size: 1.2em !important;
  }

  /* About page - full width on mobile */
  .elementor-125 [class*="elementor-element"] {
    max-width: 100% !important;
  }
}