.elementor-kit-6{--e-global-color-secondary:#386631;--e-global-color-primary:#4D8C59;--e-global-color-text:#210210;--e-global-color-accent:#62846A;--e-global-color-2666acb8:#EDEFE6;--e-global-color-1237ee86:#FFFFFF;--e-global-color-87c16a4:#94A06A;--e-global-color-6f8e42f:#F6C602;--e-global-color-fd9f2b8:#00000000;--e-global-color-496b0da:#B8BF9B;--e-global-color-797d71a:#E34234;--e-global-color-3156070:#BBBBBB;--e-global-color-9745cc5:#F4F7F4;--e-global-color-c2712d0:#1A2E1D;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-size:3rem;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-size:2rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.01rem;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-size:1em;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:1.6rem;--e-global-typography-7e5daae-font-family:"Montserrat";--e-global-typography-7e5daae-font-size:1em;--e-global-typography-7e5daae-font-weight:400;--e-global-typography-7e5daae-line-height:1.2em;--e-global-typography-fe2b18b-font-family:"Montserrat";--e-global-typography-fe2b18b-font-size:25px;--e-global-typography-fe2b18b-font-weight:700;--e-global-typography-fe2b18b-line-height:1.2em;--e-global-typography-9ced05c-font-family:"Montserrat";--e-global-typography-9ced05c-font-size:18px;--e-global-typography-9ced05c-font-weight:700;--e-global-typography-9ced05c-line-height:1.2em;--e-global-typography-6a692e1-font-family:"Montserrat";--e-global-typography-6a692e1-font-size:16px;--e-global-typography-6a692e1-font-weight:700;--e-global-typography-6a692e1-text-transform:uppercase;--e-global-typography-6a692e1-line-height:1.2em;--e-global-typography-5cec353-font-family:"Montserrat";--e-global-typography-5cec353-font-size:14px;--e-global-typography-5cec353-font-weight:400;--e-global-typography-5cec353-line-height:1.6em;background-color:var( --e-global-color-9745cc5 );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-1237ee86 );border-style:none;border-radius:10px 10px 10px 10px;padding:14px 20px 14px 20px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:transparent;color:var( --e-global-color-1237ee86 );background-image:linear-gradient(180deg, var( --e-global-color-secondary ) 0%, var( --e-global-color-secondary ) 100%);border-style:none;border-radius:10px 10px 10px 10px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a:hover{color:var( --e-global-color-797d71a );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-6 h3{font-family:var( --e-global-typography-7e5daae-font-family ), Sans-serif;font-size:var( --e-global-typography-7e5daae-font-size );font-weight:var( --e-global-typography-7e5daae-font-weight );line-height:var( --e-global-typography-7e5daae-line-height );}.elementor-kit-6 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-fe2b18b-font-family ), Sans-serif;font-size:var( --e-global-typography-fe2b18b-font-size );font-weight:var( --e-global-typography-fe2b18b-font-weight );line-height:var( --e-global-typography-fe2b18b-line-height );}.elementor-kit-6 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-9ced05c-font-family ), Sans-serif;font-size:var( --e-global-typography-9ced05c-font-size );font-weight:var( --e-global-typography-9ced05c-font-weight );line-height:var( --e-global-typography-9ced05c-line-height );}.elementor-kit-6 h6{color:var( --e-global-color-primary );font-family:var( --e-global-typography-6a692e1-font-family ), Sans-serif;font-size:var( --e-global-typography-6a692e1-font-size );font-weight:var( --e-global-typography-6a692e1-font-weight );text-transform:var( --e-global-typography-6a692e1-text-transform );line-height:var( --e-global-typography-6a692e1-line-height );}.elementor-kit-6 img{border-style:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-6{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a:hover{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-7e5daae-font-size );line-height:var( --e-global-typography-7e5daae-line-height );}.elementor-kit-6 h4{font-size:var( --e-global-typography-fe2b18b-font-size );line-height:var( --e-global-typography-fe2b18b-line-height );}.elementor-kit-6 h5{font-size:var( --e-global-typography-9ced05c-font-size );line-height:var( --e-global-typography-9ced05c-line-height );}.elementor-kit-6 h6{font-size:var( --e-global-typography-6a692e1-font-size );line-height:var( --e-global-typography-6a692e1-line-height );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:1023px){.elementor-kit-6{--e-global-typography-primary-font-size:2.5rem;--e-global-typography-secondary-font-size:2rem;--e-global-typography-text-font-size:1rem;--e-global-typography-accent-font-size:1rem;--e-global-typography-7e5daae-font-size:1.75rem;--e-global-typography-fe2b18b-font-size:1.5rem;--e-global-typography-9ced05c-font-size:1.25rem;--e-global-typography-6a692e1-font-size:1rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a:hover{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-7e5daae-font-size );line-height:var( --e-global-typography-7e5daae-line-height );}.elementor-kit-6 h4{font-size:var( --e-global-typography-fe2b18b-font-size );line-height:var( --e-global-typography-fe2b18b-line-height );}.elementor-kit-6 h5{font-size:var( --e-global-typography-9ced05c-font-size );line-height:var( --e-global-typography-9ced05c-line-height );}.elementor-kit-6 h6{font-size:var( --e-global-typography-6a692e1-font-size );line-height:var( --e-global-typography-6a692e1-line-height );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:2.3rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a:hover{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-7e5daae-font-size );line-height:var( --e-global-typography-7e5daae-line-height );}.elementor-kit-6 h4{font-size:var( --e-global-typography-fe2b18b-font-size );line-height:var( --e-global-typography-fe2b18b-line-height );}.elementor-kit-6 h5{font-size:var( --e-global-typography-9ced05c-font-size );line-height:var( --e-global-typography-9ced05c-line-height );}.elementor-kit-6 h6{font-size:var( --e-global-typography-6a692e1-font-size );line-height:var( --e-global-typography-6a692e1-line-height );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:2400px){.elementor-kit-6{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a:hover{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-6 h3{font-size:var( --e-global-typography-7e5daae-font-size );line-height:var( --e-global-typography-7e5daae-line-height );}.elementor-kit-6 h4{font-size:var( --e-global-typography-fe2b18b-font-size );line-height:var( --e-global-typography-fe2b18b-line-height );}.elementor-kit-6 h5{font-size:var( --e-global-typography-9ced05c-font-size );line-height:var( --e-global-typography-9ced05c-line-height );}.elementor-kit-6 h6{font-size:var( --e-global-typography-6a692e1-font-size );line-height:var( --e-global-typography-6a692e1-line-height );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS *//* ============================================
   TRASGOO - ELEMENTOR STYLE GUIDE
   Complete CSS Design System
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* === PRIMARY COLORS === */
  --trasgoo-primary: #386641;
  --trasgoo-primary-light: #4d8c59;
  --trasgoo-primary-dark: #2a4d31;
  --trasgoo-primary-rgb: 56, 102, 65;
  
  /* === BACKGROUND COLORS === */
  --trasgoo-background: #f4f7f4;
  --trasgoo-foreground: #1a2e1d;
  
  /* === SURFACE COLORS === */
  --trasgoo-card: #ffffff;
  --trasgoo-card-foreground: #1a2e1d;
  
  /* === SECONDARY COLORS === */
  --trasgoo-secondary: #e5ebe5;
  --trasgoo-secondary-foreground: #386641;
  
  /* === MUTED COLORS === */
  --trasgoo-muted: #e2e8e2;
  --trasgoo-muted-foreground: #5c7360;
  
  /* === ACCENT COLORS === */
  --trasgoo-accent: #f5f0e8;
  --trasgoo-accent-foreground: #386641;
  
  /* === CUSTOM BRAND COLORS === */
  --trasgoo-forest: #386641;
  --trasgoo-forest-light: #4d8c59;
  --trasgoo-forest-dark: #2a4d31;
  --trasgoo-sage: #a8c4ad;
  --trasgoo-cream: #f7f3eb;
  --trasgoo-sand: #ede8e0;
  
  /* === DESTRUCTIVE === */
  --trasgoo-destructive: #dc3545;
  --trasgoo-destructive-foreground: #ffffff;
  
  /* === BORDERS === */
  --trasgoo-border: #d4dfd6;
  --trasgoo-input: #dbe3dc;
  --trasgoo-ring: #386641;
  
  /* === BORDER RADIUS === */
  --trasgoo-radius-sm: 0.5rem;
  --trasgoo-radius: 0.75rem;
  --trasgoo-radius-lg: 1rem;
  --trasgoo-radius-xl: 1.5rem;
  --trasgoo-radius-full: 9999px;
  
  /* === SHADOWS === */
  --trasgoo-shadow-soft: 0 4px 20px -4px rgba(56, 102, 65, 0.1);
  --trasgoo-shadow-medium: 0 8px 30px -8px rgba(56, 102, 65, 0.15);
  --trasgoo-shadow-glow: 0 0 40px rgba(77, 140, 89, 0.2);
  --trasgoo-shadow-button: 0 4px 15px -3px rgba(56, 102, 65, 0.3);
  
  /* === GRADIENTS === */
  --trasgoo-gradient-hero: linear-gradient(135deg, #386641 0%, #4a7d52 100%);
  --trasgoo-gradient-subtle: linear-gradient(180deg, #f4f7f4 0%, #eef3ef 100%);
  --trasgoo-gradient-card: linear-gradient(145deg, #ffffff 0%, #f8faf8 100%);
  
  /* === TRANSITIONS === */
  --trasgoo-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --trasgoo-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================
   2. TYPOGRAPHY
   ============================================ */

/* Import DM Sans Font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* Base Typography */
body,
.elementor-widget-text-editor,
.elementor-widget-heading {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Styles */
.trasgoo-h1,
h1.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--trasgoo-foreground);
}

.trasgoo-h2,
h2.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--trasgoo-foreground);
}

.trasgoo-h3,
h3.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--trasgoo-foreground);
}

.trasgoo-h4,
h4.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--trasgoo-foreground);
}

/* Body Text */
.trasgoo-body,
.elementor-widget-text-editor p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--trasgoo-foreground);
}

.trasgoo-body-large {
  font-size: 1.125rem;
  line-height: 1.7;
}

.trasgoo-body-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Muted Text */
.trasgoo-muted-text {
  color: var(--trasgoo-muted-foreground);
}

/* Text on Primary Background */
.trasgoo-text-on-primary {
  color: #ffffff;
}


/* ============================================
   3. BUTTONS
   ============================================ */

/* Primary Button (Hero CTA) */
.elementor-button.trasgoo-btn-primary,
.trasgoo-btn-primary {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  background: var(--trasgoo-gradient-hero);
  color: #ffffff;
  border: none;
  border-radius: var(--trasgoo-radius-xl);
  box-shadow: var(--trasgoo-shadow-button);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.elementor-button.trasgoo-btn-primary:hover,
.trasgoo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(56, 102, 65, 0.4);
}

.elementor-button.trasgoo-btn-primary:active,
.trasgoo-btn-primary:active {
  transform: translateY(0);
}

/* Outline Button */
.elementor-button.trasgoo-btn-outline,
.trasgoo-btn-outline {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  background: transparent;
  color: var(--trasgoo-primary);
  border: 2px solid var(--trasgoo-primary);
  border-radius: var(--trasgoo-radius-xl);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.elementor-button.trasgoo-btn-outline:hover,
.trasgoo-btn-outline:hover {
  background: var(--trasgoo-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Secondary Button */
.elementor-button.trasgoo-btn-secondary,
.trasgoo-btn-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  background: var(--trasgoo-secondary);
  color: var(--trasgoo-secondary-foreground);
  border: none;
  border-radius: var(--trasgoo-radius);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
}

.elementor-button.trasgoo-btn-secondary:hover,
.trasgoo-btn-secondary:hover {
  background: var(--trasgoo-sage);
}

/* Ghost Button */
.elementor-button.trasgoo-btn-ghost,
.trasgoo-btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--trasgoo-foreground);
  border: none;
  border-radius: var(--trasgoo-radius);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
}

.elementor-button.trasgoo-btn-ghost:hover,
.trasgoo-btn-ghost:hover {
  background: var(--trasgoo-accent);
}

/* Button Sizes */
.trasgoo-btn-sm {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.trasgoo-btn-lg {
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
}


/* ============================================
   4. CARDS
   ============================================ */

/* Base Card */
.trasgoo-card {
  background: var(--trasgoo-gradient-card);
  border: 1px solid var(--trasgoo-border);
  border-radius: var(--trasgoo-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--trasgoo-shadow-soft);
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-card:hover {
  box-shadow: var(--trasgoo-shadow-medium);
  transform: translateY(-4px);
}

/* Feature Card */
.trasgoo-feature-card {
  background: var(--trasgoo-card);
  border: 1px solid var(--trasgoo-border);
  border-radius: var(--trasgoo-radius-xl);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--trasgoo-shadow-soft);
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-feature-card:hover {
  box-shadow: var(--trasgoo-shadow-medium);
  border-color: var(--trasgoo-primary);
  transform: translateY(-8px);
}

/* Icon Container in Cards */
.trasgoo-card-icon {
  width: 4rem;
  height: 4rem;
  background: var(--trasgoo-secondary);
  border-radius: var(--trasgoo-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--trasgoo-primary);
}

/* Pricing Card */
.trasgoo-pricing-card {
  background: var(--trasgoo-card);
  border: 2px solid var(--trasgoo-border);
  border-radius: var(--trasgoo-radius-xl);
  padding: 2rem;
  text-align: center;
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-pricing-card.featured {
  border-color: var(--trasgoo-primary);
  box-shadow: var(--trasgoo-shadow-glow);
  transform: scale(1.05);
}


/* ============================================
   5. SECTIONS & CONTAINERS
   ============================================ */

/* Hero Section */
.trasgoo-hero-section {
  background: var(--trasgoo-gradient-hero);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.trasgoo-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,...') center/cover;
  opacity: 0.1;
}

/* Standard Section */
.trasgoo-section {
  padding: 5rem 0;
  background: var(--trasgoo-background);
}

.trasgoo-section-alt {
  padding: 5rem 0;
  background: var(--trasgoo-cream);
}

/* Container */
.trasgoo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ============================================
   6. BADGES & TAGS
   ============================================ */

.trasgoo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--trasgoo-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
}

.trasgoo-badge-primary {
  background: var(--trasgoo-primary);
  color: #ffffff;
  border: none;
}

.trasgoo-badge-secondary {
  background: var(--trasgoo-secondary);
  color: var(--trasgoo-secondary-foreground);
  border: none;
}

.trasgoo-badge-outline {
  background: transparent;
  color: var(--trasgoo-primary);
  border: 1px solid var(--trasgoo-primary);
}


/* ============================================
   7. FORMS & INPUTS
   ============================================ */

.trasgoo-input,
.elementor-field-textual {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  background: var(--trasgoo-card);
  border: 1px solid var(--trasgoo-input);
  border-radius: var(--trasgoo-radius);
  color: var(--trasgoo-foreground);
  transition: var(--trasgoo-transition-smooth);
  width: 100%;
}

.trasgoo-input:focus,
.elementor-field-textual:focus {
  outline: none;
  border-color: var(--trasgoo-primary);
  box-shadow: 0 0 0 3px rgba(56, 102, 65, 0.1);
}

.trasgoo-input::placeholder {
  color: var(--trasgoo-muted-foreground);
}

/* Label */
.trasgoo-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--trasgoo-foreground);
  margin-bottom: 0.5rem;
  display: block;
}


/* ============================================
   8. NAVIGATION
   ============================================ */

/* Header */
.trasgoo-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trasgoo-border);
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Nav Links */
.trasgoo-nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--trasgoo-foreground);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--trasgoo-radius);
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-nav-link:hover {
  background: var(--trasgoo-secondary);
  color: var(--trasgoo-primary);
}

.trasgoo-nav-link.active {
  color: var(--trasgoo-primary);
  font-weight: 600;
}


/* ============================================
   9. FOOTER
   ============================================ */

.trasgoo-footer {
  background: var(--trasgoo-forest-dark);
  color: #ffffff;
  padding: 4rem 0 2rem;
}

.trasgoo-footer a {
  color: var(--trasgoo-sage);
  text-decoration: none;
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-footer a:hover {
  color: #ffffff;
}

.trasgoo-footer-heading {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1rem;
}


/* ============================================
   10. ANIMATIONS
   ============================================ */

/* Fade Up Animation */
@keyframes trasgoo-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trasgoo-animate-fade-up {
  animation: trasgoo-fade-up 0.6s ease-out forwards;
}

/* Fade In Animation */
@keyframes trasgoo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.trasgoo-animate-fade-in {
  animation: trasgoo-fade-in 0.5s ease-out forwards;
}

/* Float Animation */
@keyframes trasgoo-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.trasgoo-animate-float {
  animation: trasgoo-float 4s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes trasgoo-pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.trasgoo-animate-pulse {
  animation: trasgoo-pulse-soft 3s ease-in-out infinite;
}

/* Staggered Animation Delays */
.trasgoo-delay-1 { animation-delay: 0.1s; }
.trasgoo-delay-2 { animation-delay: 0.2s; }
.trasgoo-delay-3 { animation-delay: 0.3s; }
.trasgoo-delay-4 { animation-delay: 0.4s; }
.trasgoo-delay-5 { animation-delay: 0.5s; }


/* ============================================
   11. UTILITY CLASSES
   ============================================ */

/* Backgrounds */
.trasgoo-bg-primary { background-color: var(--trasgoo-primary); }
.trasgoo-bg-secondary { background-color: var(--trasgoo-secondary); }
.trasgoo-bg-accent { background-color: var(--trasgoo-accent); }
.trasgoo-bg-cream { background-color: var(--trasgoo-cream); }
.trasgoo-bg-sand { background-color: var(--trasgoo-sand); }
.trasgoo-bg-gradient-hero { background: var(--trasgoo-gradient-hero); }
.trasgoo-bg-gradient-subtle { background: var(--trasgoo-gradient-subtle); }

/* Text Colors */
.trasgoo-text-primary { color: var(--trasgoo-primary); }
.trasgoo-text-muted { color: var(--trasgoo-muted-foreground); }
.trasgoo-text-white { color: #ffffff; }

/* Shadows */
.trasgoo-shadow-soft { box-shadow: var(--trasgoo-shadow-soft); }
.trasgoo-shadow-medium { box-shadow: var(--trasgoo-shadow-medium); }
.trasgoo-shadow-glow { box-shadow: var(--trasgoo-shadow-glow); }

/* Border Radius */
.trasgoo-rounded-sm { border-radius: var(--trasgoo-radius-sm); }
.trasgoo-rounded { border-radius: var(--trasgoo-radius); }
.trasgoo-rounded-lg { border-radius: var(--trasgoo-radius-lg); }
.trasgoo-rounded-xl { border-radius: var(--trasgoo-radius-xl); }
.trasgoo-rounded-full { border-radius: var(--trasgoo-radius-full); }

/* Text Alignment */
.trasgoo-text-center { text-align: center; }
.trasgoo-text-left { text-align: left; }
.trasgoo-text-right { text-align: right; }

/* Flex Utilities */
.trasgoo-flex { display: flex; }
.trasgoo-flex-center { display: flex; align-items: center; justify-content: center; }
.trasgoo-flex-between { display: flex; align-items: center; justify-content: space-between; }
.trasgoo-flex-col { display: flex; flex-direction: column; }
.trasgoo-gap-1 { gap: 0.25rem; }
.trasgoo-gap-2 { gap: 0.5rem; }
.trasgoo-gap-3 { gap: 0.75rem; }
.trasgoo-gap-4 { gap: 1rem; }
.trasgoo-gap-6 { gap: 1.5rem; }
.trasgoo-gap-8 { gap: 2rem; }

/* Spacing */
.trasgoo-mt-4 { margin-top: 1rem; }
.trasgoo-mt-8 { margin-top: 2rem; }
.trasgoo-mb-4 { margin-bottom: 1rem; }
.trasgoo-mb-8 { margin-bottom: 2rem; }
.trasgoo-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.trasgoo-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.trasgoo-px-4 { padding-left: 1rem; padding-right: 1rem; }
.trasgoo-px-8 { padding-left: 2rem; padding-right: 2rem; }


/* ============================================
   12. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .trasgoo-h1,
  h1.elementor-heading-title {
    font-size: 2.5rem;
  }
  
  .trasgoo-h2,
  h2.elementor-heading-title {
    font-size: 2rem;
  }
  
  .trasgoo-section {
    padding: 3rem 0;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .trasgoo-h1,
  h1.elementor-heading-title {
    font-size: 2rem;
  }
  
  .trasgoo-h2,
  h2.elementor-heading-title {
    font-size: 1.5rem;
  }
  
  .trasgoo-section {
    padding: 2rem 0;
  }
  
  .trasgoo-feature-card {
    padding: 1.5rem;
  }
  
  .elementor-button.trasgoo-btn-primary,
  .trasgoo-btn-primary,
  .elementor-button.trasgoo-btn-outline,
  .trasgoo-btn-outline {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================
   END OF TRASGOO STYLE GUIDE
   ============================================ */
/* ============================================
   TRASGOO - ELEMENTOR STYLE GUIDE
   Complete CSS Design System
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* === PRIMARY COLORS === */
  --trasgoo-primary: #386641;
  --trasgoo-primary-light: #4d8c59;
  --trasgoo-primary-dark: #2a4d31;
  --trasgoo-primary-rgb: 56, 102, 65;
  
  /* === BACKGROUND COLORS === */
  --trasgoo-background: #f4f7f4;
  --trasgoo-foreground: #1a2e1d;
  
  /* === SURFACE COLORS === */
  --trasgoo-card: #ffffff;
  --trasgoo-card-foreground: #1a2e1d;
  
  /* === SECONDARY COLORS === */
  --trasgoo-secondary: #e5ebe5;
  --trasgoo-secondary-foreground: #386641;
  
  /* === MUTED COLORS === */
  --trasgoo-muted: #e2e8e2;
  --trasgoo-muted-foreground: #5c7360;
  
  /* === ACCENT COLORS === */
  --trasgoo-accent: #f5f0e8;
  --trasgoo-accent-foreground: #386641;
  
  /* === CUSTOM BRAND COLORS === */
  --trasgoo-forest: #386641;
  --trasgoo-forest-light: #4d8c59;
  --trasgoo-forest-dark: #2a4d31;
  --trasgoo-sage: #a8c4ad;
  --trasgoo-cream: #f7f3eb;
  --trasgoo-sand: #ede8e0;
  
  /* === DESTRUCTIVE === */
  --trasgoo-destructive: #dc3545;
  --trasgoo-destructive-foreground: #ffffff;
  
  /* === BORDERS === */
  --trasgoo-border: #d4dfd6;
  --trasgoo-input: #dbe3dc;
  --trasgoo-ring: #386641;
  
  /* === BORDER RADIUS === */
  --trasgoo-radius-sm: 0.5rem;
  --trasgoo-radius: 0.75rem;
  --trasgoo-radius-lg: 1rem;
  --trasgoo-radius-xl: 1.5rem;
  --trasgoo-radius-full: 9999px;
  
  /* === SHADOWS === */
  --trasgoo-shadow-soft: 0 4px 20px -4px rgba(56, 102, 65, 0.1);
  --trasgoo-shadow-medium: 0 8px 30px -8px rgba(56, 102, 65, 0.15);
  --trasgoo-shadow-glow: 0 0 40px rgba(77, 140, 89, 0.2);
  --trasgoo-shadow-button: 0 4px 15px -3px rgba(56, 102, 65, 0.3);
  
  /* === GRADIENTS === */
  --trasgoo-gradient-hero: linear-gradient(135deg, #386641 0%, #4a7d52 100%);
  --trasgoo-gradient-subtle: linear-gradient(180deg, #f4f7f4 0%, #eef3ef 100%);
  --trasgoo-gradient-card: linear-gradient(145deg, #ffffff 0%, #f8faf8 100%);
  
  /* === TRANSITIONS === */
  --trasgoo-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --trasgoo-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================
   2. TYPOGRAPHY
   ============================================ */

/* Import DM Sans Font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* Base Typography */
body,
.elementor-widget-text-editor,
.elementor-widget-heading {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Styles */
.trasgoo-h1,
h1.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--trasgoo-foreground);
}

.trasgoo-h2,
h2.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--trasgoo-foreground);
}

.trasgoo-h3,
h3.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--trasgoo-foreground);
}

.trasgoo-h4,
h4.elementor-heading-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--trasgoo-foreground);
}

/* Body Text */
.trasgoo-body,
.elementor-widget-text-editor p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--trasgoo-foreground);
}

.trasgoo-body-large {
  font-size: 1.125rem;
  line-height: 1.7;
}

.trasgoo-body-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Muted Text */
.trasgoo-muted-text {
  color: var(--trasgoo-muted-foreground);
}

/* Text on Primary Background */
.trasgoo-text-on-primary {
  color: #ffffff;
}


/* ============================================
   3. BUTTONS
   ============================================ */

/* Primary Button (Hero CTA) */
.elementor-button.trasgoo-btn-primary,
.trasgoo-btn-primary {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  background: var(--trasgoo-gradient-hero);
  color: #ffffff;
  border: none;
  border-radius: var(--trasgoo-radius-xl);
  box-shadow: var(--trasgoo-shadow-button);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.elementor-button.trasgoo-btn-primary:hover,
.trasgoo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(56, 102, 65, 0.4);
}

.elementor-button.trasgoo-btn-primary:active,
.trasgoo-btn-primary:active {
  transform: translateY(0);
}

/* Outline Button */
.elementor-button.trasgoo-btn-outline,
.trasgoo-btn-outline {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  background: transparent;
  color: var(--trasgoo-primary);
  border: 2px solid var(--trasgoo-primary);
  border-radius: var(--trasgoo-radius-xl);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.elementor-button.trasgoo-btn-outline:hover,
.trasgoo-btn-outline:hover {
  background: var(--trasgoo-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Secondary Button */
.elementor-button.trasgoo-btn-secondary,
.trasgoo-btn-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  background: var(--trasgoo-secondary);
  color: var(--trasgoo-secondary-foreground);
  border: none;
  border-radius: var(--trasgoo-radius);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
}

.elementor-button.trasgoo-btn-secondary:hover,
.trasgoo-btn-secondary:hover {
  background: var(--trasgoo-sage);
}

/* Ghost Button */
.elementor-button.trasgoo-btn-ghost,
.trasgoo-btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--trasgoo-foreground);
  border: none;
  border-radius: var(--trasgoo-radius);
  cursor: pointer;
  transition: var(--trasgoo-transition-smooth);
  text-decoration: none;
}

.elementor-button.trasgoo-btn-ghost:hover,
.trasgoo-btn-ghost:hover {
  background: var(--trasgoo-accent);
}

/* Button Sizes */
.trasgoo-btn-sm {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.trasgoo-btn-lg {
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
}


/* ============================================
   4. CARDS
   ============================================ */

/* Base Card */
.trasgoo-card {
  background: var(--trasgoo-gradient-card);
  border: 1px solid var(--trasgoo-border);
  border-radius: var(--trasgoo-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--trasgoo-shadow-soft);
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-card:hover {
  box-shadow: var(--trasgoo-shadow-medium);
  transform: translateY(-4px);
}

/* Feature Card */
.trasgoo-feature-card {
  background: var(--trasgoo-card);
  border: 1px solid var(--trasgoo-border);
  border-radius: var(--trasgoo-radius-xl);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--trasgoo-shadow-soft);
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-feature-card:hover {
  box-shadow: var(--trasgoo-shadow-medium);
  border-color: var(--trasgoo-primary);
  transform: translateY(-8px);
}

/* Icon Container in Cards */
.trasgoo-card-icon {
  width: 4rem;
  height: 4rem;
  background: var(--trasgoo-secondary);
  border-radius: var(--trasgoo-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--trasgoo-primary);
}

/* Pricing Card */
.trasgoo-pricing-card {
  background: var(--trasgoo-card);
  border: 2px solid var(--trasgoo-border);
  border-radius: var(--trasgoo-radius-xl);
  padding: 2rem;
  text-align: center;
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-pricing-card.featured {
  border-color: var(--trasgoo-primary);
  box-shadow: var(--trasgoo-shadow-glow);
  transform: scale(1.05);
}


/* ============================================
   5. SECTIONS & CONTAINERS
   ============================================ */

/* Hero Section */
.trasgoo-hero-section {
  background: var(--trasgoo-gradient-hero);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.trasgoo-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,...') center/cover;
  opacity: 0.1;
}

/* Standard Section */
.trasgoo-section {
  padding: 5rem 0;
  background: var(--trasgoo-background);
}

.trasgoo-section-alt {
  padding: 5rem 0;
  background: var(--trasgoo-cream);
}

/* Container */
.trasgoo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ============================================
   6. BADGES & TAGS
   ============================================ */

.trasgoo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--trasgoo-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
}

.trasgoo-badge-primary {
  background: var(--trasgoo-primary);
  color: #ffffff;
  border: none;
}

.trasgoo-badge-secondary {
  background: var(--trasgoo-secondary);
  color: var(--trasgoo-secondary-foreground);
  border: none;
}

.trasgoo-badge-outline {
  background: transparent;
  color: var(--trasgoo-primary);
  border: 1px solid var(--trasgoo-primary);
}


/* ============================================
   7. FORMS & INPUTS
   ============================================ */

.trasgoo-input,
.elementor-field-textual {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  background: var(--trasgoo-card);
  border: 1px solid var(--trasgoo-input);
  border-radius: var(--trasgoo-radius);
  color: var(--trasgoo-foreground);
  transition: var(--trasgoo-transition-smooth);
  width: 100%;
}

.trasgoo-input:focus,
.elementor-field-textual:focus {
  outline: none;
  border-color: var(--trasgoo-primary);
  box-shadow: 0 0 0 3px rgba(56, 102, 65, 0.1);
}

.trasgoo-input::placeholder {
  color: var(--trasgoo-muted-foreground);
}

/* Label */
.trasgoo-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--trasgoo-foreground);
  margin-bottom: 0.5rem;
  display: block;
}


/* ============================================
   8. NAVIGATION
   ============================================ */

/* Header */
.trasgoo-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trasgoo-border);
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Nav Links */
.trasgoo-nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--trasgoo-foreground);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--trasgoo-radius);
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-nav-link:hover {
  background: var(--trasgoo-secondary);
  color: var(--trasgoo-primary);
}

.trasgoo-nav-link.active {
  color: var(--trasgoo-primary);
  font-weight: 600;
}


/* ============================================
   9. FOOTER
   ============================================ */

.trasgoo-footer {
  background: var(--trasgoo-forest-dark);
  color: #ffffff;
  padding: 4rem 0 2rem;
}

.trasgoo-footer a {
  color: var(--trasgoo-sage);
  text-decoration: none;
  transition: var(--trasgoo-transition-smooth);
}

.trasgoo-footer a:hover {
  color: #ffffff;
}

.trasgoo-footer-heading {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1rem;
}


/* ============================================
   10. ANIMATIONS
   ============================================ */

/* Fade Up Animation */
@keyframes trasgoo-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trasgoo-animate-fade-up {
  animation: trasgoo-fade-up 0.6s ease-out forwards;
}

/* Fade In Animation */
@keyframes trasgoo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.trasgoo-animate-fade-in {
  animation: trasgoo-fade-in 0.5s ease-out forwards;
}

/* Float Animation */
@keyframes trasgoo-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.trasgoo-animate-float {
  animation: trasgoo-float 4s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes trasgoo-pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.trasgoo-animate-pulse {
  animation: trasgoo-pulse-soft 3s ease-in-out infinite;
}

/* Staggered Animation Delays */
.trasgoo-delay-1 { animation-delay: 0.1s; }
.trasgoo-delay-2 { animation-delay: 0.2s; }
.trasgoo-delay-3 { animation-delay: 0.3s; }
.trasgoo-delay-4 { animation-delay: 0.4s; }
.trasgoo-delay-5 { animation-delay: 0.5s; }


/* ============================================
   11. UTILITY CLASSES
   ============================================ */

/* Backgrounds */
.trasgoo-bg-primary { background-color: var(--trasgoo-primary); }
.trasgoo-bg-secondary { background-color: var(--trasgoo-secondary); }
.trasgoo-bg-accent { background-color: var(--trasgoo-accent); }
.trasgoo-bg-cream { background-color: var(--trasgoo-cream); }
.trasgoo-bg-sand { background-color: var(--trasgoo-sand); }
.trasgoo-bg-gradient-hero { background: var(--trasgoo-gradient-hero); }
.trasgoo-bg-gradient-subtle { background: var(--trasgoo-gradient-subtle); }

/* Text Colors */
.trasgoo-text-primary { color: var(--trasgoo-primary); }
.trasgoo-text-muted { color: var(--trasgoo-muted-foreground); }
.trasgoo-text-white { color: #ffffff; }

/* Shadows */
.trasgoo-shadow-soft { box-shadow: var(--trasgoo-shadow-soft); }
.trasgoo-shadow-medium { box-shadow: var(--trasgoo-shadow-medium); }
.trasgoo-shadow-glow { box-shadow: var(--trasgoo-shadow-glow); }

/* Border Radius */
.trasgoo-rounded-sm { border-radius: var(--trasgoo-radius-sm); }
.trasgoo-rounded { border-radius: var(--trasgoo-radius); }
.trasgoo-rounded-lg { border-radius: var(--trasgoo-radius-lg); }
.trasgoo-rounded-xl { border-radius: var(--trasgoo-radius-xl); }
.trasgoo-rounded-full { border-radius: var(--trasgoo-radius-full); }

/* Text Alignment */
.trasgoo-text-center { text-align: center; }
.trasgoo-text-left { text-align: left; }
.trasgoo-text-right { text-align: right; }

/* Flex Utilities */
.trasgoo-flex { display: flex; }
.trasgoo-flex-center { display: flex; align-items: center; justify-content: center; }
.trasgoo-flex-between { display: flex; align-items: center; justify-content: space-between; }
.trasgoo-flex-col { display: flex; flex-direction: column; }
.trasgoo-gap-1 { gap: 0.25rem; }
.trasgoo-gap-2 { gap: 0.5rem; }
.trasgoo-gap-3 { gap: 0.75rem; }
.trasgoo-gap-4 { gap: 1rem; }
.trasgoo-gap-6 { gap: 1.5rem; }
.trasgoo-gap-8 { gap: 2rem; }

/* Spacing */
.trasgoo-mt-4 { margin-top: 1rem; }
.trasgoo-mt-8 { margin-top: 2rem; }
.trasgoo-mb-4 { margin-bottom: 1rem; }
.trasgoo-mb-8 { margin-bottom: 2rem; }
.trasgoo-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.trasgoo-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.trasgoo-px-4 { padding-left: 1rem; padding-right: 1rem; }
.trasgoo-px-8 { padding-left: 2rem; padding-right: 2rem; }


/* ============================================
   12. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .trasgoo-h1,
  h1.elementor-heading-title {
    font-size: 2.5rem;
  }
  
  .trasgoo-h2,
  h2.elementor-heading-title {
    font-size: 2rem;
  }
  
  .trasgoo-section {
    padding: 3rem 0;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .trasgoo-h1,
  h1.elementor-heading-title {
    font-size: 2rem;
  }
  
  .trasgoo-h2,
  h2.elementor-heading-title {
    font-size: 1.5rem;
  }
  
  .trasgoo-section {
    padding: 2rem 0;
  }
  
  .trasgoo-feature-card {
    padding: 1.5rem;
  }
  
  .elementor-button.trasgoo-btn-primary,
  .trasgoo-btn-primary,
  .elementor-button.trasgoo-btn-outline,
  .trasgoo-btn-outline {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================
   END OF TRASGOO STYLE GUIDE
   ============================================ *//* End custom CSS */