:root {
  /* Brand Colors */
  --color-primary: #182e6f;        /* Navy blue - logo color */
  --color-secondary: #02aca4;      /* Teal */
  --color-tertiary: #dbdaa7;       /* Beige */
  
  /* Primary Color Variations */
  --color-primary-light: #2a4a9f;
  --color-primary-dark: #0f1d45;
  --color-primary-darker: #080f24;
  
  /* Secondary Color Variations */
  --color-secondary-light: #04d4ca;
  --color-secondary-dark: #018179;
  
  /* Tertiary Color Variations */
  --color-tertiary-light: #e8e7c9;
  --color-tertiary-dark: #c9c88a;
  
  /* Text Colors */
  --color-text-primary: #1a1a1a;   /* Main body text */
  --color-text-secondary: #4a4a4a; /* Secondary text */
  --color-text-muted: #767676;     /* Muted/disabled text */
  --color-text-inverse: #ffffff;   /* Text on dark backgrounds */
  
  /* Heading Colors */
  --color-heading-primary: #182e6f;   /* Using brand navy */
  --color-heading-secondary: #2a2a2a;
  
  /* Status Colors */
  --color-success: #10b981;        /* Green */
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;
  
  --color-info: #02aca4;           /* Using brand teal */
  --color-info-light: #cff4f2;
  --color-info-dark: #018179;
  
  --color-warning: #f59e0b;        /* Amber */
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  
  --color-error: #ef4444;          /* Red */
  --color-error-light: #fee2e2;
  --color-error-dark: #dc2626;
  
  /* Neutral/Gray Scale */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Base font size */
  --font-size-base: 1.0625rem; /* 17px */
  
  /* Viewport breakpoints for fluid scaling */
  --fluid-min-width: 20rem;    /* 320px */
  --fluid-max-width: 80rem;    /* 1280px */
  
  /* Heading sizes with fluid clamp() */
  /* H1: 48px (3rem) - scales from 2rem to 3rem */
  --font-size-h1: clamp(2rem, 1.2rem + 4vw, 3rem);
  
  /* H2: 36px (2.25rem) - scales from 1.5rem to 2.25rem */
  --font-size-h2: clamp(1.5rem, 0.9rem + 3vw, 2.25rem);
  
  /* H3: 24px (1.5rem) - scales from 1.25rem to 1.5rem */
  --font-size-h3: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  
  /* H4-H6: Following golden ratio (÷1.618) from H3 */
  /* H4: ~15px (0.9375rem) - scales from 1rem to 0.9375rem */
  --font-size-h4: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  
  /* H5: ~12px (0.75rem) - scales from 0.875rem to 0.9375rem */
  --font-size-h5: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);
  
  /* H6: ~10px (0.625rem) - scales from 0.75rem to 0.8125rem */
  --font-size-h6: clamp(0.75rem, 0.725rem + 0.125vw, 0.8125rem);
  
  /* Body text - subtle fluid scaling */
  --font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  
  /* Additional utility sizes */
  --font-size-small: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);
  --font-size-xs: clamp(0.75rem, 0.725rem + 0.125vw, 0.8125rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
}

/* utilities classes */
/* Text Color Utilities */
.u-color-primary { color: var(--color-primary) !important; }
.u-color-secondary { color: var(--color-secondary) !important; }
.u-color-tertiary { color: var(--color-tertiary) !important; }

.u-color-text-primary { color: var(--color-text-primary) !important; }
.u-color-text-secondary { color: var(--color-text-secondary) !important; }
.u-color-text-muted { color: var(--color-text-muted) !important; }
.u-color-text-inverse { color: var(--color-text-inverse) !important; }

.u-color-success { color: var(--color-success) !important; }
.u-color-info { color: var(--color-info) !important; }
.u-color-warning { color: var(--color-warning) !important; }
.u-color-error { color: var(--color-error) !important; }

/* Background Color Utilities */
.u-bg-primary { background-color: var(--color-primary) !important; }
.u-bg-primary--light { background-color: var(--color-primary-light) !important; }
.u-bg-primary--dark { background-color: var(--color-primary-dark) !important; }

.u-bg-secondary { background-color: var(--color-secondary) !important; }
.u-bg-secondary--light { background-color: var(--color-secondary-light) !important; }
.u-bg-secondary--dark { background-color: var(--color-secondary-dark) !important; }

.u-bg-tertiary { background-color: var(--color-tertiary) !important; }
.u-bg-tertiary--light { background-color: var(--color-tertiary-light) !important; }
.u-bg-tertiary--dark { background-color: var(--color-tertiary-dark) !important; }

.u-bg-success { background-color: var(--color-success) !important; }
.u-bg-success--light { background-color: var(--color-success-light) !important; }
.u-bg-success--dark { background-color: var(--color-success-dark) !important; }

.u-bg-info { background-color: var(--color-info) !important; }
.u-bg-info--light { background-color: var(--color-info-light) !important; }
.u-bg-info--dark { background-color: var(--color-info-dark) !important; }

.u-bg-warning { background-color: var(--color-warning) !important; }
.u-bg-warning--light { background-color: var(--color-warning-light) !important; }
.u-bg-warning--dark { background-color: var(--color-warning-dark) !important; }

.u-bg-error { background-color: var(--color-error) !important; }
.u-bg-error--light { background-color: var(--color-error-light) !important; }
.u-bg-error--dark { background-color: var(--color-error-dark) !important; }

.u-bg-white { background-color: var(--color-white) !important; }
.u-bg-black { background-color: var(--color-black) !important; }

/* Gray Background Utilities */
.u-bg-gray-50 { background-color: var(--color-gray-50) !important; }
.u-bg-gray-100 { background-color: var(--color-gray-100) !important; }
.u-bg-gray-200 { background-color: var(--color-gray-200) !important; }

/* Border Color Utilities */
.u-border-primary { border-color: var(--color-primary) !important; }
.u-border-secondary { border-color: var(--color-secondary) !important; }
.u-border-tertiary { border-color: var(--color-tertiary) !important; }

.u-border-success { border-color: var(--color-success) !important; }
.u-border-info { border-color: var(--color-info) !important; }
.u-border-warning { border-color: var(--color-warning) !important; }
.u-border-error { border-color: var(--color-error) !important; }

.u-border-gray-200 { border-color: var(--color-gray-200) !important; }
.u-border-gray-300 { border-color: var(--color-gray-300) !important; }

ul.general-ul {
  margin-left: 1.5rem!important;
}

/* Apply this to an element like .card or .overlay */
.glass-element {
    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* For Safari support */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); 
    border-radius: 1rem;
    padding: 2rem;
}

/* end of utilities classes */

/* homepage css */
.hero-section {
  aspect-ratio: 21 / 9;
  position: relative !important;
}

@media (max-width: 1024px) {
  .hero-section {
      aspect-ratio: 3 / 4 !important;
      position: relative !important;
}
}

.hero-wrapper {
  margin-top: 16rem;
}

@media (max-width: 1024px) {
  .hero-wrapper {
    margin-top: 18rem;
}
}

.wrapper-with-right-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.wrapper-with-right-column .inner-wrapper {
  grid-column: 2;
}

@media (max-width: 1024px) {
  .wrapper-with-right-column {
    grid-template-columns: 1fr; 
  }

  .wrapper-with-right-column .inner-wrapper {
    grid-column: 1 / -1;
  }
}

.wrapper-with-left-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.wrapper-with-left-column .inner-wrapper {
  grid-column: 1;
}

@media (max-width: 1024px) {
  .wrapper-with-left-column {
    grid-template-columns: 1fr; 
  }

  .wrapper-with-left-column .inner-wrapper {
    grid-column: 1 / -1;
  }
}

/* about dialoma page css */
/* Base container for the whole table-like structure */
  .data-table-container {
    border: 1px solid var(--color-tertiary-dark, #c9c88a);
    border-radius: 1rem;
    padding: 10px;
    max-width: 60%;
    margin-right: auto;
    margin-left: auto;
  }

  @media (max-width: 1024px) {
    .data-table-container {
      max-width: 100%;
    }
  }

  .data-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-tertiary-light, #e8e7c9);
  }

  .data-row:last-child {
    border-bottom: none;
  }

  .key-column {
    flex: 0 0 18%;
    font-weight: 700;
    color: var(--color-primary, #182e6f);
    padding-right: 10px;
    text-align: right;
    font-size: var(--font-size-h5);
  }

  @media (max-width: 1024px) {
    .key-column {
      flex: 0 0 25%;
    }
  }

  .value-column {
    flex: 1;
    padding-left: 10px;
    font-size: var(--font-size-h5);
    color: var(--color-primary-light, #2a4a9f);
    line-height: 1.4;
  }

  .service-list-container {
    border: 1px solid #ffffff;
    border-radius: 1rem;
    padding: 15px;
    max-width: 60%;
    margin-right: auto;
    margin-left: auto;
    background-color: #01817956;
  }

  @media (max-width: 1024px) {
    .service-list-container {
      max-width: 100%;
    }
  }

  .service-block {
    padding: 12px 0;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ffffff;
  }

  .service-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .service-name {
    display: block;
    font-weight: 700;
    color: var(--color-text-inverse, #ffffff);
    font-size: var(--font-size-h5);
    margin-bottom: 5px;
  }

  .service-description {
    display: block;
    color: var(--color-text-inverse, #ffffff);
    line-height: 1.5;
    padding-left: 0;
    font-size: var(--font-size-h5);
  }

  /* Service pages css */
  .service-title {
    color: var(--color-text-inverse, #ffffff);
  }

  .service-tagline {
    color: var(--color-text-inverse, #ffffff);
    font-weight: 700;
  }

  .service-included {
    color: var(--color-text-inverse, #ffffff);
  }

  .service-included ul {
    margin-left: 1.5rem!important;
  }

  .service-included a {
    color: var(--color-color-tertiary, #dbdaa7)!important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px dotted;
    border-color: currentColor;
  }

  .service-included a:hover {
    color: var(--color-color-secondary, #02aca4)!important;
  }

  /* Service Grid Item */
  .service-grid {

  }

  .service-grid .w-grid-list {

  }
  .service_item {
    border-radius: 1rem;
    background: #4a4a4a37;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .service_media {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    overflow: hidden;
  }

  .service_media img {
    transition: transform 0.3s ease-in-out; 
    object-fit: cover; 
    width: 100%; 
    height: 100%;
}

.service_item:hover .service_media img {
    transform: scale(1.05); 
}

.service_title {
    margin-left: 0.6rem;
    margin-right: 0.6rem;
    font-weight: 700;
}

  .service_excerpt {
    font-size: var(--font-size-xs)!important;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
  }
  .service_cta,
  .service_cta::before {
    border-bottom-left-radius: 1rem!important;
    border-bottom-right-radius: 1rem!important;
    margin-top: auto!important;
  }

  /* CTA CSS */
  .cta-wrapper {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }

  .cta-special-button {
    text-align: left;
  }

  @media (min-width: 1025px) {
    .cta-wrapper {
      grid-template-columns: 2fr 1fr;
      gap: 2rem;
    }
    .cta-special-button {
      text-align: right!important;
  }
  }

  /* About Wrapper CSS */
  .about-wrapper {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }

  @media (min-width: 1025px) {
    .about-wrapper {
      grid-template-columns: 2fr 1fr;
      gap: 2rem;
    }
  }

  .about-inner {
    color: var(--color-color-primary, #182e6f);
  }
  .about-inner ul {
    margin-left: 1.5rem!important;
  }

  /* Puplication CSS */
  .publication-item {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }

    @media (min-width: 1025px) {
    .publication-item {
      grid-template-columns: 3fr 1fr;
      gap: 2rem;
    }
  }

  .publication-media img {
    border-radius: 1rem;
  }

  .publication-content .collapsible-content-more,
  .publication-content .collapsible-content-less {
    font-size: var(--font-size-h6);
    color: var(--color-primary-light, #2a4a9f)!important;
  }

  .publication-content .collapsible-content-more:hover,
  .publication-content .collapsible-content-less:hover {
    font-size: var(--font-size-h6);
    color: var(--color-secondary-light, #04d4ca)!important;
  }

  /* Academic / corporate Wrapper CSS */

  .academic-corporate-wrapper {

  }

.academic-corporate-wrapper {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }

@media (min-width: 1025px) {
    .academic-corporate-wrapper {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }

@media (max-width: 1024px) {
.academic-corporate-wrapper .inner-wrapper {
  margin-inline-end: 0!important;
}
}

.academic-corporate-wrapper .inner-wrapper,
.academic-corporate-wrapper .inner-wrapper h3 {
  color: var(--color-text-inverse, #ffffff);
}

.academic-corporate-wrapper .inner-wrapper .special-text *,
.special-text * {
  font-size: var(--font-size-h3);
  font-style: italic;
}

/* Gravity Forms CSS */
.gform_description {
  padding-bottom: 20px;
}
span.my-note {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-color-primary, #182e6f);
}

@media (max-width: 640px) {
#gform_fields_1 {
  grid-row-gap: 8px!important;
}
#input_1_1_3_container {
  margin-bottom: 8px!important;
}
#input_1_1_6_container {
  margin-bottom: 0px!important;
}
}
.grecaptcha-badge {
    visibility: hidden;
}
.my-google-links a {
  color: var(--color-color-secondary, #02aca4);
}
#gform_confirmation_message_1,
.gform_confirmation_message,
.form_saved_message_sent {
    font-size: var(--font-size-h4)!important;
    color: var(--color-success, #10b981)!important;
    font-weight: 700!important;
    padding: 1.6rem!important;
    background: var(--color-tertiary-light, #e8e7c9)!important;
    border-radius: 1rem!important;
}