/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #131313;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;
  --color-grey: #ccc;
  --color-grey-dark: #8d8d8d;
  --color-grey-dark-1: #939393;
  --color-grey-dark-2: #515151;
  --color-text-body-dark: #000000;
  --color-text-enable-light-and-disable-text: #939393;
  --color-surface-white: #ffffff;
  --color-surface-light-grey: #f5f5f5;
  /* Maruti brand colors */
  --maruti-primary-blue: #171c8f;
  --maruti-secondary-blue: #1728b8;
  --maruti-text-blue: rgba(23, 28, 143, 1);
  --color-primary-light: #f0f4ff;
  --color-grey-1: #dddddd;
  --color-grey-2: #f0f0f0;
  --color-grey-3: #F7F7FB;
  /*linear gradients*/
  --gradient-pink: linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
  --gradient-grey:linear-gradient(90deg, rgba(178, 178, 178, 0.00) 0%, #B2B2B2 50.5%, rgba(178, 178, 178, 0.00) 100%);

  /* fonts */
  --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;

  /* body sizes */
  --body-font-size-xl: 40px;
  --body-font-size-m: 22px;
  --body-font-size-s: 19px;
  --body-font-size-ms: 20px;
  --body-font-size-xs: 14px;
  --font-size-15:15px;

  /* heading sizes */
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-ml: 32px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;

  /* Primary Text */
  --color-black: #000000;
  --color-black-rgb: 0 0 0;
  --color-dark-text: #1d1d1d;
  --color-disabled: #939393;

  /* Dividers, strokes, borders */
  --color-divider: #c0c0c0;
  --border-width-thin: 0.5px;
  --border-width-normal: 1px;

  /* Backgrounds */
  --color-bg-1: #c4c4c4;
  --color-bg-2: #d1d1d1;
  --color-bg-3: #f5f5f5;
  --color-bg-4: #b2b2b2;
  --color-bg-gray: #F5F6FE;
  /* Primary / CTA */
  --color-primary-dark: #01044b;
  --color-primary: #171c8f;
  --color-teal: #00a892;
  --color-red: #d04c54;
  --color-white: #ffffff;

  /* Supporting colors */
  --color-yellow: #fcbe62;
  --color-blue-light: #3998d7;
  --color-teal: #00bca4;
  --color-red-light: #e15f67;

  /* Alerts / Status */
  --color-red: #f0373a;
  --color-orange: #f0b529;
  --color-green: #37b200;
  --color-blue: #1a4993;

  /* Extra backgrounds */
  --color-bg-5: #e8e8e8;
  --color-bg-6: #e5b18d;
  --color-bg-7: #f7f7f7;
  --color-bg-8: #f8f8f8;
  --color-bg-9: #cccccc;
  --color-bg-red-light: #fcd7d8;
  --color-bg-blue-light: #d6d9f8;
  --color-bg-green-light: #e7f6e7;
  --color-border-red-light: #f2a0a3;
  --color-border-green-light: #a8d8a8;
  --color-stroke-light: #e6e6e6;
  --mock-llr-opacity-half: 0.5;
  --mock-llr-opacity-shadow: 0.07;
  --duration-fast: 0.1s;
  --duration-medium: 0.3s;
  /* Shadows */
  --shadow-dropdown: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* nav height */
  --nav-height: 64px;

  /* Font families */
  --font-primary: roboto, roboto-fallback, sans-serif;

  /*Font sizes */
  --font-size-32: 32px;
  --font-size-24: 24px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-14: 14px;
  --font-size-12: 12px;
  --font-size-40: 40px;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --fw-300: 300;

  /* Line heights */
  --line-height-1-2: 1.2;
  --line-height-1-25: 1.25;
  --line-height-1-18: 1.1875;
  --line-height-1-42: 1.42;
  --line-height-1-3: 1.3;
  --line-height-16: 16px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-28: 28px;
  --line-height-38: 38px;
  /* Headings */
  --font-h1-size: 48px;
  --font-h1-line-height: 56px;
  --font-h1-weight: var(--font-weight-bold);
  --font-h2-size: 36px;
  --font-h2-line-height: 44px;
  --font-h2-weight: var(--font-weight-bold);

  --font-h3_5-line-height: 38px; /* Between h3 and h2 */
  --font-hx-line-height: 48px;

  --font-h3-size: 28px;
  --font-h3-line-height: 36px;
  --font-h3-weight: var(--font-weight-semibold);
  --font-h4-size: 22px;
  --font-h4-line-height: 30px;
  --font-h4-weight: var(--font-weight-semibold);
  --font-h5-size: 18px;
  --font-h5-line-height: 26px;
  --font-h5-weight: var(--font-weight-medium);
  --font-h6-size: 16px;
  --font-h6-line-height: 24px;
  --font-h6-weight: var(--font-weight-medium);

  /* Body text */
  --font-body-large-size: 18px;
  --font-body-large-line-height: 28px;
  --font-body-large-weight: var(--font-weight-regular);
  --font-body-size: 16px;
  --font-body-line-height: 24px;
  --font-body-weight: var(--font-weight-regular);
  --font-body-small-size: 14px;
  --font-body-small-line-height: 20px;
  --font-body-small-weight: var(--font-weight-regular);
  --font-body-xs-size: 12px;
  --font-body-xs-line-height: 18px;
  --font-body-xs-weight: var(--font-weight-regular);

  /* Buttons */
  --font-button-size: 16px;
  --font-button-line-height: 24px;
  --font-button-weight: var(--font-weight-semibold);
  --font-button-small-size: 14px;
  --font-button-small-line-height: 20px;
  --font-button-small-weight: var(--font-weight-medium);

  /* Captions / Labels */
  --font-caption-size: 12px;
  --font-caption-line-height: 16px;
  --font-caption-weight: var(--font-weight-medium);
  --font-label-size: 10px;
  --font-label-line-height: 14px;
  --font-label-weight: var(--font-weight-semibold);

  /* Spacing scale */
  --spacing-0: 0px; /* None */
  --spacing-xs: 2px; /* Extra Small */
  --spacing-xxs: 3px; /* Between XS and SM */
  --spacing-sm: 4px; /* Small */
  --spacing-sm-plus: 5px; /* Between SM and MD */
  --mock-llr-radius-sm: 6px;
  --spacing-md: 8px; /* Medium */
  --spacing-md-plus: 10px; /* Between Medium and Large */
  --spacing-md-5: 12px;
  --spacing-lg: 16px; /* Large */
  --spacing-18: 18px;
  --mock-llr-stepper-icon-height: 19.196px;
  --spacing-lg-plus: 20px;
  --spacing-xl: 24px; /* Extra Large */
  --spacing-2xl: 32px; /* Super Large */
  --mock-llr-stepper-icon-width: 43px;
  --spacing-2xl-plus: 43.5px;
  --mock-llr-badge-radius: 50px;
  --spacing-3xl: 48px; /* Ultra Large */
  --mock-llr-timer-size: 60px;
  --spacing-4xl: 64px; /* Mega Large */
  --spacing-4-5xl: 80px; /* Between Mega and Giga */
  --spacing-5xl: 96px; /* Giga Large */
  --spacing-5xl-plus: 98px;
  --spacing-6xl: 120px; /* Tera Large */
  --mock-llr-desktop-timer-offset: 144px;
  --spacing-6-7xl: 189px;
  --spacing-7xl: 330px;
  --mock-llr-description-max-height: 400px;
  --mock-llr-card-max-width: 920px;
  --mock-llr-stepper-width: 1024px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-56: 56px;
  --spacing-51: 51px;
  --spacing-74: 74px;
  --spacing-80: 80px;
  --spacing-604: 604px;

  /* Icon dimensions (ascending: 2xs, xs, sm, md, lg, default, xl) */
  --icon-scrollbar-width: 2px;
  --icon-size-2xs: 10px;
  --icon-size-xs: 13px;
  --icon-size-sm: 14px;
  --icon-size-sm-plus: 15px;
  --icon-size-md: 16px;
  --icon-size-lg: 18px;
  --icon-size: 24px;
  --icon-size-xl: 32px;
  
  /* School locator component */
  --sl-map-height-mobile: 320px;
  --sl-scrollbar-blur: 20px;
  --sl-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
  --sl-dropdown-active-bg: rgba(0, 0, 0, 0.08);
  --sl-spinner-track: rgba(0, 0, 0, 0.12);
  --sl-layer-dropdown: 1000;
  --sl-layer-tooltip: 1000;


  /* Gradient Designs*/
  --gradient-1: linear-gradient(359deg, rgba(215, 116, 58, 0.10) -48.53%, rgba(255, 255, 255, 0.10) 43.7%), #FFF;
  --gradient-2: linear-gradient(359deg, rgba(0, 188, 164, 0.10) -48.53%, rgba(255, 255, 255, 0.10) 43.7%), #FFF;
  --gradient-3: linear-gradient(359deg, rgba(57, 139, 215, 0.10) -48.53%, rgba(255, 255, 255, 0.10) 43.7%), #FFF;
  /* Grid System */
  --grid-columns: 4;
  --grid-gutter-width: 16px;
  --container-margin: 20px;
  --grid-formula: (
    ((100vw - var(--container-margin) - var(--container-margin)) - (var(--grid-gutter-width) * (var(--grid-columns) - 1))) / var(--grid-columns)
  );
  /* component spacing */
    --block-spacing: 40px;
    @media screen and (width >=768px) {
      --block-spacing: 56px;

    }
    @media screen and (width >= 1024px) {
      --block-spacing: 80px;
    }
}

* {
  box-sizing: border-box;
}

header {
  + main {
    padding-top: calc(var(--block-spacing) * -1);
  }
}
  main .section > div > .block > div:first-of-type {
    padding-top: var(--block-spacing);
  }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: var(--font-body-weight);
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status='loaded'],
footer .footer[data-block-status='loaded'] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  margin: 0;
}

h1 {
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  font-weight: var(--font-h1-weight);
}
h2 {
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  font-weight: var(--font-h2-weight);
}
h3 {
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  font-weight: var(--font-h3-weight);
}
h4 {
  font-size: var(--font-h4-size);
  line-height: var(--font-h4-line-height);
  font-weight: var(--font-h4-weight);
}
h5 {
  font-size: var(--font-h5-size);
  line-height: var(--font-h5-line-height);
  font-weight: var(--font-h5-weight);
}
h6 {
  font-size: var(--font-h6-size);
  line-height: var(--font-h6-line-height);
  font-weight: var(--font-h6-weight);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

/* main > div {
  margin: 40px 16px;
} */

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  text-decoration: underline;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

main > .section:first-of-type {
  margin-top: 0;
}

/* @media (width >= 900px) {
  main > .section > div {
    padding: 0 32px;
  }
} */

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

/* Elements: Body text */
.typography__body--lg {
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  font-weight: var(--font-body-large-weight);
}

.typography__body,
p,
dl,
ol,
ul,
pre,
blockquote {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: var(--font-body-weight);
}

.typography__body--sm {
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  font-weight: var(--font-body-small-weight);
}

.typography__body--xs {
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
  font-weight: var(--font-body-xs-weight);
}

/* Button Component using BEM methodology */

/* Base Button - Common styles for all buttons */
.cmp-button {
  /* Box model */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid transparent;

  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-button-size);
  line-height: var(--font-button-line-height);
  font-weight: var(--font-weight-regular);
  text-align: center;
  text-decoration: none;

  /* Behavior */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Button sizes */
.cmp-button--small {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-button-small-size);
  line-height: var(--font-button-small-line-height);
  font-weight: var(--font-button-small-weight);
}

.cmp-button--large {
  padding: var(--spacing-lg) var(--spacing-2xl);
}

/* Button variants */

/* Primary button - Blue background with white text */
.cmp-button--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  padding: 10px 16px;
  font-size: var(--body-font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 18px;
}

.cmp-button--primary:hover,
.cmp-button--primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
}

/* Secondary button - Outline with blue text */
.cmp-button--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.cmp-button--secondary:hover,
.cmp-button--secondary:focus {
  background-color: var(--color-primary-dark);
  text-decoration: none;
  color: var(--color-white);
}

/* Text button - No background or border, just text */
.cmp-button--text {
  background-color: transparent;
  color: var(--color-primary);
  border: none;
  padding: var(--spacing-sm);
}

.cmp-button--text:hover,
.cmp-button--text:focus {
  text-decoration: underline;
  background-color: transparent;
}

/* Call button - Blue background with phone icon */
.cmp-button--call {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cmp-button--call:hover,
.cmp-button--call:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
}

/* Red button */
.cmp-button--red {
  background-color: var(--color-red-light);
  color: var(--color-white);
  border-color: var(--color-red-light);
}

.cmp-button--red:hover,
.cmp-button--red:focus {
  background-color: var(--color-red); /* Darker shade of red-light */
  border-color: var(--color-red);
  text-decoration: none;
}

/* Teal button */
.cmp-button--teal {
  background-color: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
  box-shadow: 0px 4px 4px rgb(0, 0, 0, 0.25);
}

.cmp-button--teal:hover,
.cmp-button--teal:focus {
  background-color: var(--color-teal); /* Darker shade of teal */
  border-color: var(--color-teal);
  text-decoration: none;
  box-shadow: none;
}

/* Button with icon */
.cmp-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--spacing-sm);
}

.cmp-button__icon--left {
  margin-right: var(--spacing-sm);
  margin-left: 0;
}

/* Arrow icon specific styling */
.cmp-button__icon--right,
.cmp-button__icon--left {
  width: 16px;
  height: 16px;
}

/* Disabled state */
.cmp-button:disabled,
.cmp-button--disabled {
  background-color: var(--color-disabled);
  color: var(--color-white);
  border-color: var(--color-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Full width button */
.cmp-button--full-width {
  width: 100%;
}

/* Button group - for buttons that appear next to each other */
.cmp-button-group {
  display: flex;
  gap: var(--spacing-lg);
}

.cmp-button-group--vertical {
  flex-direction: column;
}

.hidden {
  display: none!important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .cmp-button {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .cmp-button--small {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .cmp-button--large {
    padding: var(--spacing-lg) var(--spacing-xl);
  }

  .cmp-button-group {
    flex-direction: column;
    width: 100%;
  }

  .cmp-button--mobile-full {
    width: 100%;
  }
}

/* Grid System */
@media screen and (width >=768px) {
  :root {
    --grid-columns: 8;
    --grid-gutter-width: 24px;
  }
}

@media screen and (width >=1024px) {
  :root {
    --grid-columns: 12;
    --grid-gutter-width: 24px;
    --container-margin: 56px;
  }
}

/* Grid system */
.g-container {
  width: 100%;
  padding-inline: var(--container-margin);
}

.g-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--grid-gutter-width);
}

[class^='g-lg-'],
[class^='g-sm'],
[class^='g-md'] {
  width: 100%;
  /* Default to full width */
}

.g-sm-1 {
  width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
}

.g-sm-2 {
  width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
}

.g-sm-3 {
  width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
}

.g-sm-4 {
  width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
}

@media screen and (width >=768px) {
  .g-md-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-md-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-md-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-md-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  .g-md-5 {
    width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
  }

  .g-md-6 {
    width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
  }

  .g-md-7 {
    width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
  }

  .g-md-8 {
    width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
  }
}

/* Media Queries for desktop */
@media screen and (width >=1024px) {
  .g-lg-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-lg-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-lg-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-lg-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  .g-lg-5 {
    width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
  }

  .g-lg-6 {
    width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
  }

  .g-lg-7 {
    width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
  }

  .g-lg-8 {
    width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
  }

  .g-lg-9 {
    width: calc((var(--grid-formula) * 9) + (var(--grid-gutter-width) * (9 - 1)));
  }

  .g-lg-10 {
    width: calc((var(--grid-formula) * 10) + (var(--grid-gutter-width) * (10 - 1)));
  }

  .g-lg-11 {
    width: calc((var(--grid-formula) * 11) + (var(--grid-gutter-width) * (11 - 1)));
  }

  .g-lg-12 {
    width: calc((var(--grid-formula) * 12) + (var(--grid-gutter-width) * (12 - 1)));
  }
}

/* Media Queries for Large desktop */
@media screen and (width >=1366px) {
  .g-xl-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-xl-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-xl-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-xl-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  .g-xl-5 {
    width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
  }

  .g-xl-6 {
    width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
  }

  .g-xl-7 {
    width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
  }

  .g-xl-8 {
    width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
  }

  .g-xl-9 {
    width: calc((var(--grid-formula) * 9) + (var(--grid-gutter-width) * (9 - 1)));
  }

  .g-xl-10 {
    width: calc((var(--grid-formula) * 10) + (var(--grid-gutter-width) * (10 - 1)));
  }

  .g-xl-11 {
    width: calc((var(--grid-formula) * 11) + (var(--grid-gutter-width) * (11 - 1)));
  }

  .g-xl-12 {
    width: calc((var(--grid-formula) * 12) + (var(--grid-gutter-width) * (12 - 1)));
  }
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Splide Slider overrides */
.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.splide__track--draggable {
  user-select: none;
}
.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  @media (width >=1024px) {
    li:first-child.is-active {
      padding-left: 20px;

      @media (width>=1024px) {
        padding-left: 56px;
      }
    }

    li:not(:first-child).is-active {
      padding-left: 0;
    }
  }
}
.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}
.splide__sr{
  clip:rect(0 0 0 0);
  border:0;
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
}
.splide__arrow--prev {
  background-image: url('/icons/arrow_backward.svg') !important;
}
.splide__arrow--next {
  background-image: url('/icons/arrow_forward.svg') !important;
}

.splide__arrow svg {
  display: none;
}

.splide__list {
  li:first-child.is-active {
    padding-left: 0;
  }
}

.overflow-hidden, body:has(dialog[open]) {
  overflow: hidden !important;
}


.animate {
  animation: shimmer 3s;
  animation-iteration-count: infinite;
  background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
  background-size: 1000px 100%;
}
@keyframes shimmer {
  from {
    background-position: -1000px 0;
  }
  to {
    background-position: 1000px 0;
  }
}


/* Overlay with background blur */
.loader-overlay {
  position: absolute; /* use absolute if inside container */
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10); /* translucent layer */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Spinner */
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Optional hidden state */
.loader-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
}


main .section > .fragment-wrapper > div > div:first-of-type {
  padding-top: 0;
}
.floating-register-interest {
  padding: var(--spacing-md-plus) var(--spacing-lg);
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-18);
  background: var(--color-red-light);
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.25);
  position: fixed;
  right: 0;
  top: 80%;
  z-index: 9;
  border: none;
  color: var(--color-white);
  cursor: pointer;
}

::-webkit-scrollbar {
    width: 0px;
    height: 4px;
    background-color: var(--color-primary);
    border-left: none;
  }
  
  ::-webkit-scrollbar-track {
    background-color: var(--color-primary);
  }
  
  ::-webkit-scrollbar-thumb {
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    position: relative;
    background-position: top left;
    background-color: var(--tertiary-black);
  }
  
  ::-webkit-scrollbar-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    width: 10px;
  }