.elementor-kit-2517{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-page-transition-entrance-animation:e-page-transition-fade-out-up;--e-page-transition-exit-animation:e-page-transition-slide-in-down;--e-page-transition-animation-duration:1500ms;--e-preloader-animation:eicon-spin;--e-preloader-animation-duration:1200ms;--e-preloader-delay:0ms;--e-preloader-width:5%;--e-preloader-max-width:4%;--e-preloader-opacity:0.8;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================
   DESTEC - Global CSS Styles
   Per WordPress / Elementor
   ======================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables (Design Tokens) ── */
:root {
  /* Base */
  --background: 0 0% 100%;
  --foreground: 220 25% 15%;

  /* Cards */
  --card: 0 0% 100%;
  --card-foreground: 220 25% 15%;

  /* Popover */
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 15%;

  /* Primary: Teal/Cyan */
  --primary: 185 75% 40%;
  --primary-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 220 15% 95%;
  --secondary-foreground: 220 25% 25%;

  /* Muted */
  --muted: 220 15% 96%;
  --muted-foreground: 220 10% 45%;

  /* Accent: Orange */
  --accent: 25 95% 53%;
  --accent-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  /* Borders & Inputs */
  --border: 220 15% 90%;
  --input: 220 15% 92%;
  --ring: 185 75% 40%;
  --radius: 0.75rem;

  /* DESTEC Brand Colors */
  --destec-teal: 185 75% 40%;
  --destec-teal-light: 185 65% 55%;
  --destec-teal-glow: 185 100% 60%;
  --destec-orange: 25 95% 53%;
  --destec-orange-light: 30 90% 60%;
  --destec-green: 140 60% 45%;
  --destec-green-light: 140 50% 55%;
  --destec-dark: 220 25% 12%;
  --destec-darker: 220 30% 8%;
  --destec-slate: 220 15% 35%;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(185, 75%, 40%) 0%, hsl(140, 60%, 45%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(40, 90%, 50%) 100%);
  --gradient-logo: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(185, 75%, 40%) 50%, hsl(140, 60%, 45%) 100%);
  --gradient-dark: linear-gradient(180deg, hsl(220, 25%, 12%) 0%, hsl(220, 30%, 8%) 100%);

  /* Shadows */
  --shadow-soft: 0 4px 20px -4px hsl(220, 25%, 15%, 0.1);
  --shadow-card: 0 10px 40px -10px hsl(220, 25%, 15%, 0.15);
  --shadow-float: 0 20px 40px -15px hsl(185, 75%, 40%, 0.2);
  --shadow-glow-teal: 0 0 60px -12px hsl(185, 100%, 50%, 0.4);
  --shadow-glow-orange: 0 0 60px -12px hsl(25, 100%, 50%, 0.4);
}

/* ── Base Reset & Typography ── */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

::selection {
  background: hsl(185 75% 40% / 0.2);
  color: hsl(220 25% 15%);
}

/* ── Dark Section Override ── */
.dark-section {
  --background: 220 25% 10%;
  --foreground: 210 20% 95%;
  --card: 220 20% 14%;
  --card-foreground: 210 20% 95%;
  --muted: 220 15% 20%;
  --muted-foreground: 215 15% 60%;
  --border: 220 15% 20%;
}

/* ── Glassmorphism Cards ── */
.glass-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(145deg, 
    hsl(0 0% 100% / 0.9) 0%, 
    hsl(0 0% 100% / 0.7) 100%
  );
  box-shadow: 0 8px 32px -8px hsl(220, 25%, 15%, 0.1);
}

.glass-card-dark {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, 
    hsl(220 20% 15% / 0.8) 0%, 
    hsl(220 20% 10% / 0.6) 100%
  );
}

/* ── Buttons ── */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, hsl(185, 75%, 40%) 0%, hsl(140, 60%, 45%) 100%);
  box-shadow: 0 4px 20px -4px hsl(185, 75%, 40%, 0.4);
  text-decoration: none;
}
.btn-primary:hover {
  box-shadow: 0 8px 30px -4px hsl(185, 75%, 40%, 0.5);
  transform: translateY(-2px);
}

.btn-accent {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(40, 90%, 50%) 100%);
  box-shadow: 0 4px 20px -4px hsl(25, 95%, 53%, 0.4);
  text-decoration: none;
}
.btn-accent:hover {
  box-shadow: 0 8px 30px -4px hsl(25, 95%, 53%, 0.5);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid hsl(185, 75%, 40%, 0.5);
  color: hsl(var(--primary));
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-outline:hover {
  border-color: hsl(var(--primary));
  background: hsl(185, 75%, 40%, 0.1);
}

.btn-hero {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(to right, hsl(var(--primary)), hsl(210, 80%, 50%));
  text-decoration: none;
}
.btn-hero:hover {
  box-shadow: 0 12px 30px -5px hsl(185, 75%, 40%, 0.3);
  transform: scale(1.02);
}
.btn-hero:active {
  transform: scale(0.98);
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid hsl(var(--foreground), 0.3);
  color: hsl(var(--foreground));
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-hero-outline:hover {
  border-color: hsl(var(--primary));
  background: hsl(185, 75%, 40%, 0.05);
  color: hsl(var(--primary));
}

/* ── Text Gradients ── */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, hsl(185, 75%, 40%) 0%, hsl(140, 60%, 45%) 100%);
}

.text-gradient-accent {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(40, 90%, 50%) 100%);
}

.text-gradient-logo {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(185, 75%, 40%) 50%, hsl(140, 60%, 45%) 100%);
}

/* ── Glow Effects ── */
.glow-teal { box-shadow: 0 0 60px -12px hsl(185, 100%, 50%, 0.4); }
.glow-orange { box-shadow: 0 0 60px -12px hsl(25, 100%, 50%, 0.4); }
.glow-soft { box-shadow: 0 0 80px -20px hsl(185, 100%, 50%, 0.2); }

/* ── Card 3D Hover ── */
.card-3d {
  transition: all 0.5s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card-3d:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
}

/* ── Animated Border Gradient ── */
.border-gradient { position: relative; }
.border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(185, 75%, 40%) 50%, hsl(140, 60%, 45%) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ── Background Patterns ── */
.polygon-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10L65 25L65 55L40 70L15 55L15 25L40 10Z' stroke='%2300a0a0' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.logo-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50,10 80,30 80,70 50,90 20,70 20,30' stroke='%2300a0a0' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3Cpolygon points='50,25 65,35 65,65 50,75 35,65 35,35' stroke='%23f97316' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

/* ── Horizontal Scroll Container ── */
.scroll-horizontal {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: hsl(185, 75%, 40%) transparent;
}
.scroll-horizontal::-webkit-scrollbar { height: 6px; }
.scroll-horizontal::-webkit-scrollbar-track { background: transparent; }
.scroll-horizontal::-webkit-scrollbar-thumb {
  background: hsl(185, 75%, 40%);
  border-radius: 3px;
}

/* ── Section Divider ── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, hsl(185, 75%, 40%, 0.3) 25%, hsl(25, 95%, 53%, 0.3) 75%, transparent 100%);
}

/* ── Hero Dark Section ── */
.hero-dark {
  background: linear-gradient(180deg, hsl(220, 25%, 10%) 0%, hsl(220, 30%, 6%) 100%);
  color: hsl(210, 20%, 95%);
}

/* ── Animations ── */
@keyframes fade-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-left {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in-right {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slide-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px -5px hsl(185, 100%, 50%, 0.3); }
  50% { box-shadow: 0 0 40px -5px hsl(185, 100%, 50%, 0.5); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px -5px hsl(185, 100%, 50%, 0.3); }
  50% { box-shadow: 0 0 40px -5px hsl(185, 100%, 50%, 0.6); }
}
@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
.animate-fade-in-left { animation: fade-in-left 0.6s ease-out forwards; }
.animate-fade-in-right { animation: fade-in-right 0.6s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.5s ease-out forwards; }
.animate-slide-up { animation: slide-up 0.5s ease-out forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-scan-line { animation: scan-line 8s linear infinite; }
.animate-rotate-slow { animation: rotate-slow 20s linear infinite; }

/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ── Utility: Container ── */
.destec-container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ── Utility: Semantic Colors (for plain HTML) ── */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }

.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-muted-fg { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-card-fg { color: hsl(var(--card-foreground)); }
.text-white { color: #fff; }

.border-border { border-color: hsl(var(--border)); }
.border-primary { border-color: hsl(var(--primary)); }

.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: calc(var(--radius) + 0.25rem); }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-float { box-shadow: var(--shadow-float); }/* End custom CSS */