/* --- Theme base styles --- */

/* --- Font Family --- */
/* Inter */




/* --- Generic
This is where reset, normalize & box-sizing styles go.
*/
*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */

/**
* Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**
* Add the correct box sizing in Firefox.
*/

hr {
  box-sizing: content-box;
  height: 0;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
========================================================================== */

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
*/

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
* Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
========================================================================== */

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
* Remove the inheritance of text transform in Edge and Firefox.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
  text-transform: none;
}

/**
* Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
* Correct the padding in Firefox.
*/

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
* Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
*/

legend {
  padding: 0;
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
  vertical-align: baseline;
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
========================================================================== */

/*
* Add the correct display in Edge and Firefox.
*/

details {
  display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
  display: list-item;
}

/* --- Objects
Non-cosmetic design patterns including grid and layout classes)
*/


/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12{
/*   min-height: 1px; */
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
  .row-fluid .span1 {
    width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span2 {
    width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span3 {
    width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span4 {
    width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span5 {
    width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span6 {
    width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span7 {
    width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span8 {
    width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span9 {
    width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span10 {
    width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span11 {
    width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
  }
  
}
/* --- Unknown but removes bottom invisible padding */
.body-wrapper {
  height: 100px;
}


.content-wrapper {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* --- Global components --- */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/************* Primary-button ************/
/*********** UNIT Variables ***********/









/******************* Animated Primary Button**********************/























/************* Secondary-button ************/















/************* Tertiary-button ************/









 





.button {
    font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  font-size: 1.125em;
  color:#FFFFFF;
  background-color:#4F4AD9;
  padding: 13px 24px;
  display: inline-block;
  transition: all .2s ease;
  border-radius: 30px;
  cursor: pointer;
}

.button:hover {
  background-color: #FAB914;
}

.secondary-button {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
   font-size: 1.125em;
  color:#4F4AD9;
  background-color:#FFFFFF;
  padding: 13px 24px;
  border: 1px solid #4F4AD9;
  transition: all .2s ease;
  border-radius: 30px;
  cursor: pointer;
}

.secondary-button:hover {
  background-color: #4F4AD9;
  color:#FFFFFF;
}


.tertiary-button {

  font-family: 'Inter Tight', sans-serif;
    font-weight: regular;
  font-size: 1.125em;
  display: inline-block;
  color: #4F4AD9;
  transition: all .2s ease;
  padding-bottom: 4px;
  cursor: pointer;
  position: relative; /* To position the pseudo-element */
}

.tertiary-button svg path {
  stroke: #4F4AD9;
}

.tertiary-button:hover {
  color: #FAB914;
}

.tertiary-button:hover svg path {
  stroke: #FAB914;
}

/* Create the sliding underline effect */
.tertiary-button::after {
  content: ''; 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Initially, the width is 0 */
  height: 2px; /* Thickness of the underline */
  background-color: #FAB914; /* Underline color */
  transition: width 0.3s ease; /* Slide effect duration */
}

.tertiary-button:hover::after {
  width:98%;
}



/* Animated Button */ 


.animated-button {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 24px; 
  background-color: #4F4AD9;
  border-radius: 30px;
  color:#FFFFFF;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 24px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #FAB914;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  border-radius: 12px;
  color: #01012A;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #1f387e;
}

.animated-button:active .circle{
  /*   scale: 0.95;
  box-shadow: 0 0 0 4px red; */
  background-color: #25219C;

}

.animated-button:active {
  color: #fff;
}

.animated-button:hover .circle {
  width: 100%;
  height: ;
  opacity: 1;

}







@media (max-width: 768px) {
  .button {
    text-align: center;
    display: block;
    padding: px 24px; 
  }

  .secondary-button {
    text-align: center;
    display: block;
    padding: 13px 24px; 
  }

  .tertiary-button-wrapper{
    display: flex;
    justify-content: center;
  }
}
/* Animated Primary Button */




















/*  Animated secondary Button  */




















/*  Animated Tertiary Button */




















































.arrow_icon{
  padding: 16px;
  background-color: #4F4AD9;
  border-radius: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.arrow_icon:hover {
  background-color: #FAB914;
  transform: translateY(-2px) scale(1.05);
}

.arrow_icon:hover svg{
  fill: #01012A;
}

.arrow_icon img {
  transition: transform 0.3s ease;
}

.arrow_icon * {
  width: 20px;
  height: 20px;
  /* Add display: block to ensure even inline elements respect the size */
  display: block; 
}

.arrow_icon svg {
  fill: #FFFFFF; 
  height: 20px;
}



.arrow_icon:hover img {
  transform: translate(2px, -2px);
}

.arrow_icon img {
  height: 20px;
  width: 20px;
}



.primary-animated-button {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  font-size: 1.125em;
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
/*   border: 4px solid transparent; */
  padding: 13px 24px;
  background-color: #4F4AD9;
  border-radius: 52px;
  color: #FFFFFF;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 0 0 2px #4F4AD9;
}

.primary-animated-button svg {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-animated-button .arr-1 {
  /* FIXED: Position arrow within padding area, not at edge */
  right: 24px;
}

.primary-animated-button .arr-2 {
  left: -25%; /* Hidden initially */
}

.primary-animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #FAB914;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-animated-button .text {
  position: relative;
  z-index: 1;
  /* FIXED: Remove margin and transform that push text outside padding */
  margin-right: 0;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);

  /* ADD: Ensure text has space for arrow but stays within padding */
  padding-right: calc(24px + 12px);
}

.primary-animated-button:hover {
  border-radius: 8px;
  color: #01012A;
  box-shadow: 0 0 0 12px transparent;
}

.primary-animated-button:hover .arr-1 {
  right: -25%; /* Moves out */
}

.primary-animated-button:hover .arr-2 {
  /* FIXED: Position within padding area */
  left: 18px;
}

.primary-animated-button:hover .text {
  /* FIXED: Remove margins and transforms that break padding */
  margin-left: 0;
  margin-right: 0;
  transform: translateX(0);

  /* ADD: Space for left arrow but within padding */
  padding-left: calc(24px + 12px);
  padding-right: 0;
}

.primary-animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #4F4AD9;
}

.primary-animated-button:hover .circle {
  width: 100%;
  opacity: 1;
}








.secondary-animated-button {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  font-size: 1.125em;
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 13px 24px;
  background-color: #FFFFFF;
  border-radius: 52px;
  color: #01012A;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 0 0 2px #585883;
}
.secondary-animated-button svg {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.secondary-animated-button .arr-1 {
  /* FIXED: Position arrow within padding area, not at edge */
  right: 24px;
}
.secondary-animated-button .arr-2 {
  left: -25%; /* Hidden initially */
}
.secondary-animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #FAB914;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.secondary-animated-button .text {
  position: relative;
  z-index: 1;
  /* FIXED: Remove transform that pushes text outside padding */
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);

  /* ADD: Ensure text has space for arrow but stays within padding */
  padding-right: calc(24px + 12px);
}
.secondary-animated-button:hover {
  border-radius: 8px;
  color: #01012A;
  box-shadow: 0 0 0 12px transparent;
}
.secondary-animated-button:hover .arr-1 {
  right: -25%; /* Moves out */
}
.secondary-animated-button:hover .arr-2 {
  /* FIXED: Position within padding area */
  left: 18px;
}
.secondary-animated-button:hover .text {
  /* FIXED: Remove transforms that break padding */
  transform: translateX(0);

  /* ADD: Space for left arrow but within padding */
  padding-left: calc(24px + 12px);
  padding-right: 0;
}
.secondary-animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #FFFFFF;
}
.secondary-animated-button:hover .circle {
  width: 100%;
  opacity: 1;
}





.tertiary-animated-button {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  font-size: 1.125em;
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  color: #4F4AD9;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 0 16px 0 0; 
}
.tertiary-animated-button svg {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tertiary-animated-button .arr-1 {
  /* FIXED: Position arrow within padding area */
  right: 16px; /* Matches horizontal padding */
}
.tertiary-animated-button .arr-2 {
  left: -25%; /* Hidden initially */
}
.tertiary-animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tertiary-animated-button .text {
  position: relative;
  z-index: 1;
  /* FIXED: Remove transform, use padding-based spacing */
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  
  /* ADD: Space for arrow but within padding boundaries */
  padding-right: calc(24px + 12px);
}
.tertiary-animated-button:hover {
  color: #4F4AD9;
}
.tertiary-animated-button:hover .arr-1 {
  right: -25%; /* Moves out */
}
.tertiary-animated-button:hover .arr-2 {
  /* FIXED: Position within padding area */
  left: 2px; /* Matches horizontal padding */
}


.tertiary-animated-button:hover .text {
  /* FIXED: Use padding instead of transform for consistent spacing */
  transform: translateX(0);
  text-decoration: underline;
  text-underline-offset: 3px; /* controls the space */
  text-decoration-thickness: 2px; /* optional: control line thickness */

  /* ADD: Space for left arrow but within padding */
  padding-left: calc(24px + 12px);
  padding-right: 0;
}
.tertiary-animated-button:active {
  scale: 0.95;
}
.tertiary-animated-button:hover .circle {
  width: 100%;
  opacity: 1;
}



@media (max-width: 768px) {
  .animated-button-wrapper {
    display: block;
  }
  
 
  .primary-animated-button {
    display: flex;
    gap: 12px;
    width: 100%;
    text-align: center;
    justify-content: center;
    /* Remove transitions and animations */
    transition: none;
    overflow: visible;
    /* Reset box shadow */
    box-shadow: none;
  }
  
  /* Keep icons visible but remove animations */
  .primary-animated-button svg {
    transition: none;
    transform: none;
  }
  
  /* Position the visible arrow statically */
  .primary-animated-button .arr-1 {
    right: 24px;
    position: static;
  }
  
  /* Hide the second arrow completely */
  .primary-animated-button .arr-2 {
    display: none;
  }
  
  /* Hide the circle animation element */
  .primary-animated-button .circle {
    display: none;
  }
  
  /* Center the text and remove all spacing adjustments */
  .primary-animated-button .text {
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    text-align: center;
/*     width: 100%; */
  }
  
  /* Remove hover effects */
  .primary-animated-button:hover {
    border-radius: 52px;
    color: #FFFFFF;
    background-color: #FAB914;
    box-shadow: none;
    transform: none;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .primary-animated-button:hover .text {
    margin: 0;
    padding: 0;
    transform: none;
  }
  
  /* Simple active state */
  .primary-animated-button:active {
    scale: 1;
    box-shadow: none;
  }
  .secondary-animated-button {
  display: flex;
  align-items: center;
  width: 100%;
    justify-content: center;
    gap: 12px;
/*   border: 4px solid transparent; */
  /* Remove transitions and animations */
  transition: none;
  overflow: visible;
  /* Reset box shadow */
  box-shadow: 0 0 0 2px #585883;
}

/* Keep icons visible but remove animations */
.secondary-animated-button svg {
  transition: none;
  transform: none;
}

/* Position the visible arrow statically */
.secondary-animated-button .arr-1 {
  right: 24px;
  position: static;
}

/* Hide the second arrow completely */
.secondary-animated-button .arr-2 {
  display: none;
}

/* Hide the circle animation element */
.secondary-animated-button .circle {
  display: none;
}

/* Remove all spacing adjustments and transforms */
.secondary-animated-button .text {
  padding: 0;
  transform: none;
  transition: none;
}

/* Remove hover effects */
.secondary-animated-button:hover {
  border-radius: 8px;
  color: #01012A;
  box-shadow: 0 0 0 2px #585883;
  transform: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.secondary-animated-button:hover .text {
  padding: 0;
  transform: none;
}

/* Simple active state */
.secondary-animated-button:active {
  scale: 1;
  box-shadow: 0 0 0 2px #585883;
}
  
  .tertiary-animated-button{
/*     display: block;
    width: auto; */
  }
  
  .tertiary-animated-button {
  display: flex;
  margin: 0 auto;
    gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Remove transitions and animations */
  transition: none;
  overflow: visible;
  padding: 0;
}

/* Keep icons visible but remove animations */
.tertiary-animated-button svg {
  transition: none;
  transform: none;
}

/* Position the visible arrow statically */
.tertiary-animated-button .arr-1 {
  right: 16px;
  position: static;
}

/* Hide the second arrow completely */
.tertiary-animated-button .arr-2 {
  display: none;
}

/* Hide the circle animation element */
.tertiary-animated-button .circle {
  display: none;
}

/* Center the text and remove all spacing adjustments */
.tertiary-animated-button .text {
  margin: 0;
  padding: 0;
  transform: none;
  transition: none;
  text-align: center;
}

/* Remove hover effects */
.tertiary-animated-button:hover {
  color: #4F4AD9;
  transform: none;
  transition: color 0.3s ease;
}

.tertiary-animated-button:hover .text {
  margin: 0;
  padding: 0;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Simple active state */
.tertiary-animated-button:active {
  scale: 1;
}
  
    .secondary-animated-button-wrapper {
    display: block;
  }
}















.bordered_text{
  padding:8px 24px;
  border-radius: 30px ;
  display: inline-block;
  width: fit-content;
  margin-bottom: 1.5rem;
  color:#01012A;
  border: 1px solid #CBD5E1;
}

.arrow_icon{
  display: inline-block;
  padding:16px;
  /*     border: 1px solid red; */
  border-radius: 52px ;
}


/* ============================================= */
/* ====== Centralized Navigation Arrow Component ====== */
/* ============================================= */

/* Base style for the navigation arrow button */
.nav-arrow {
  /*   width: 52px;
  height: 52px; */
  border-radius: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding:16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0px solid #e5e5e5;

  /* --- Theme Variable Dependency --- */
  background-color: #FFFFFF;
}

/* Base style for icons inside the arrow */
.nav-arrow svg,
.nav-arrow img {

  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.nav-arrow span {
  display: contents;
}

/* Default icon color */
.nav-arrow:not(.active) svg {
  /* --- Theme Variable Dependency --- */
  fill: #01012A;
}

/* Hover state for any navigation arrow */
.nav-arrow:hover {
  transform: translateY(-2px) scale(1.05);
}

.nav-arrow:hover svg,
.nav-arrow:hover img {
  transform: scale(1.1);
}

/* Hover state specifically for inactive arrows */
.nav-arrow:not(.active):hover {
  /* --- Theme Variable Dependency --- */
  background-color: #FFFFFF;
  /* Note: You may want a slightly different theme color for hover, like a light grey */
}

/* Active state (when a direction is clickable) */
.nav-arrow.active {
  /* --- Theme Variable Dependency --- */
  background-color: #FAB914;
}

/* Icon color for the active state */
.nav-arrow.active svg {
  /* --- Theme Variable Dependency --- */
  fill: #01012A;
}

/* Hover state for an active arrow */
.nav-arrow.active:hover {
  /* --- Theme Variable Dependency --- */
  background-color: #FAB914;
}

/* Disabled state */
.nav-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-arrow:disabled:hover {
  transform: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-arrow svg,
  .nav-arrow img {
    width: 20px;
    height: 20px;
  }

  .bordered_text{
    margin-left: auto;
    margin-right: auto; 
    margin-bottom: 0.75em;
  }


  .nav-arrow{
    border-radius: 52px;
    padding:16px;
  }

}







@media(max-width: 768px) {
  .arrow_icon{
    border-radius: 52px;
    padding:16px;
  }


}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


a {
  text-decoration: none;
}

p,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


 /*****************************************/
  .container {
    font-size: 16px;

  } 

  @media (max-width: 1200px) {

    .container {
      font-size: 14.5px;
    } 

  }

  @media (max-width: 1100px) {

    .container {
      font-size: 12.5px;
    } 

  }

  @media (max-width: 1000px) {

    .container {
      font-size: 11px;
    } 

  }


  @media (max-width: 900px) {

    .container {
      font-size: 10px;
    } 

  }

  @media (max-width: 800px) {

    .container {
      font-size: 10px;
    }
  }

  @media (max-width: 768px) {

    .container {
      font-size: 16px;
    }
  }
  /*****************************************/
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/********** Colors ***************/
/************* Links ******************/














  /* === NAVBAR TOP === */
  .navbar-top{
    background: #F3F3F3;
  }
  
  /* === NAVBAR BASE === */
  .navbar {
    background: #F3F3F3;
  }
  
  .links > li a {
    color: #01012A;
  }
  
  .links > li a:hover {
    color: #4F4AD9;
  }
  
  /* === ARROWS === */
  .arrow path {
    stroke: #01012A;
  }
  
    .links > li a:hover .arrow path {
    stroke: #4F4AD9;
  }
  
  /* === SUB MENUS === */
  .sub-menu {
    background:#FFFFFF;
  }
  
  .links > li > .sub-menu a {
    color: #01012A;
  }
  
  .links > li > .sub-menu a:hover {
    color: #4F4AD9;
  }
  
  .sub-menu li:hover {
    background-color: #F3F3F3;
  }
  .sub-menu li .submenu-icon, .submenu-icon svg {
    fill: #4F4AD9;
    
  }

  .sub-menu li:hover .submenu-icon svg {
    fill: #FAB914;
  }
  
  .tag {
    background-color: #F3F3F3;
    color: ;
  }

  .bx-menu svg, .bx-x svg{
      fill: #01012A;
    }

/* .tertiary-button {
  color: #4F4AD9;
}

.tertiary-button svg path {
  stroke: #4F4AD9;
}

.tertiary-button:hover {
  color: #FAB914;
}

.tertiary-button:hover svg path {
  stroke: #FAB914;
}

.tertiary-button::after {
  background-color: #FAB914; 
} 
*/

@media (max-width: 800px) {
  .nav-links {
          background-color: #FFFFFF;
        }

}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/********** Colors ***************/












     .footer {
       background-color: #FFFFFF;
color: #01012A;
}


 .footer-bottom {
    border-top: #CBD5E1px solid #CBD5E1;
}
.links a {
  color: #01012A;
}
.links a::after {
  background-color: #4F4AD9; 
}

.links a:hover {
  color: #4F4AD9;
}

.footer-bottom {
  color: #01012A;
/* border-top: 1px solid  #CBD5E1; */
}

.footer-logo {
/* border-right: 1px solid  #CBD5E1; */
}
  
 
.s-icon svg{
  fill: #01012A;
  }
.s-icon svg:hover{
  fill: #4F4AD9;
  }
  

@media (max-width: 768px) {
 .footer-logo {
/* border-bottom: 1px solid #CBD5E1; */
}
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/********** Colors ***************/
















 










/************* Button ************/


















.hs-form .form-columns-1 .input{
  margin-right: 0 !important;
}

.hs-form .form-columns-1 .hs-input:not([type="checkbox"]){
  width:100% !important;
}

.hs-form .form-columns-2 .input, .form-columns-2 .hs-form-field{
  margin-right: 0 !important;
  max-width:100% !important;
  width:100% !important;
}

.hs-form .form-columns-2 {
  display: flex;
  gap: 1em;
}

.hs-form fieldset {
  max-width: 100% !important;
}





.hs-form input,
.hs-form textarea,
.hs-form select {
  background-color:#FFFFFF;
  color: #01012A;font-family: Mulish, sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  padding: 17px 14px;
  width: 100%;
  display: block;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  margin-top: 0.5em; 
  margin-bottom: 1.5em;
  box-sizing: border-box;

}

.hs-form select { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #4F4AD9 50%),
    linear-gradient(135deg, #4F4AD9 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 27px) calc(1em + 8px),
    calc(100% - 22px) calc(1em + 8px),
    calc(100% - 3.5em) 0.99em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}


.hs-form select:focus {
  background-image:
    linear-gradient(45deg, #4F4AD9 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #4F4AD9 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 24px) 1.5em,
    calc(100% - 29px) 1.5em,
    calc(100% - 3.5em) 0.99em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}


.hs-form select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}



 .hs-form input::placeholder,  .hs-form textarea::placeholder,.hs-form select::placeholder { /* Standard */
 font-family:Mulish;
  color:#585883;
}




.hs-form label {
  color: #01012A;
  font-family:Mulish;
  font-size: 1.125em;
  text-align:left;

}

.hs-error-msg {
  font-size: 0.875em !important;
  font-weight: 500;
  text-align: left;
  color: red !important;
}


.hs-form input[type="submit"]  {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  color:#FFFFFF;
  background-color:#4F4AD9;
  padding: 13px 24px;
  border: none;
  display: block;
  transition: all .2s ease;
  border-radius: 52px;
  cursor: pointer;
  display: flex;
  margin: 13px 0 0 0;  
}

.hs-form .hs_submit {
  display: flex;
  justify-content: flex-end; 
}

.hs_submit input[type="submit"]:hover{
  background-color:#FAB914;
}


.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
 border:1px solid #CBD5E1;
}

.hs-form textarea {
  resize: none;
  min-height: 9em;
  box-sizing: border-box;
}

.hs-form ul{
  list-style-type: none;
}

.hs-form .inputs-list{
  padding-left:0px;
}

.hs-form .hs-form-booleancheckbox-display{
  display:flex ;
  align-items:center;
}

.hs-form input[type='checkbox']{
  width:auto !important;
  width:16px;
  height:16px;
  display:inline;
  cursor:pointer;
  margin-right:0.4375em;
  margin-bottom:0;
  margin-top:0;
  accent-color: #4F4AD9
}

@media (max-width: 768px) {
  .hs-form{
    text-align:left;
  }
  .hs-form .hs_submit{
    display:block;
  }

  .hs-form  input,
  .hs-form  textarea,
  .hs-form  select {
    margin-bottom: 1em;
    font-size: 1em; 
  }
  .hs-form  .form-columns-2 {
    flex-direction: column;
    gap: 1em;
  }
  .hs-error-msgs {
    margin-top: -10px;
  }

}
@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
  .hs-form  .form-columns-1 .input{
    margin-right: 0 !important;
  }
  .hs-form .form-columns-1 .hs-input:not([type="checkbox"]), .form-columns-2 .hs-form-field .hs-input{
    width:100% !important;
  }
  .hs-form  .form-columns-2 .input, .form-columns-2 .hs-form-field{
    margin-right: 0 !important;
    max-width:100% !important;
    width:100% !important;
  }
}





/* Flag and caret section */
:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-PhoneInput__FlagAndCaret) {
  background-color:#F3F2FC!important;
  border-right:0 !important;
  padding: 17px 14px !important; 
  position: relative;
  z-index: 999999999999999999999; 
  border-radius: 8px 0 0 8px !important; 
}

/* Input field styling */
:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-PhoneInput) input[type="tel"] {
  padding: 17px 14px !important;
  border-radius: 0 8px 8px 0 !important;
}


:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-Step__Content) {
  padding: 0 !important; 
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-TextInput, .hsfc-TextareaInput, .hsfc-DateInput) {
  background-color: #FFFFFF !important;
  color: #01012A !important;
  font-family: Mulish !important;
  font-size: 0.9em !important;
  padding: 17px 14px !important; /* Force padding */
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid #CBD5E1 !important;
  box-sizing: border-box !important;
}




:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-FieldLabel__RequiredIndicator) {
   color:#01012A!important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-Heading) {
   color:#01012A!important;
  font-size:2.25em;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-TextInput, .hsfc-TextareaInput)::placeholder {
 font-family:Mulish !important;
  color:#585883 !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] .hsfc-FieldLabel {
   color: #01012A !important;
  font-family:Mulish !important;
  font-size: 1.125em !important;
  text-align:left !important;
  margin-bottom: 0.5em !important;
}


:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] .hsfc-Button {
  font-family: Mulish, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
  color: #FFFFFF !important;
  background-color: #4F4AD9 !important;
  padding: 13px
    24px !important;
  border: none !important;
  border-radius: 52px !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  margin: 13px 0 0 0 !important;
  justify-content: center !important;
  text-align: center !important;
}


.hs-form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons .hsfc-Button:hover {
    background-color: #FAB914 !important;
}


@media (max-width: 768px) {

  .hs-form [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content {
    padding:0;
    text-align:left;
  }

  .hs-form [data-hsfc-id="Renderer"] .hsfc-Button {
    text-align:center;
    justify-content:center;
  }

}

.hs-form [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: #4F4AD9; 
}


.hs-form [data-hsfc-id="Renderer"] .hsfc-Step input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: #4F4AD9; 
}

/* Ensure radio button styles inside the multi-step form steps */
.hs-form [data-hsfc-id="Renderer"] .hsfc-Step input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: #4F4AD9; /* Dynamically set the accent color */
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/*********** UNIT Variables ***********/









/********** Colors ***************/

















/********** Typography ***************/


























































/************* Button ************/















/************* Links ******************/











/*********** Width & Spacing *****************/











/************* Forms ************/














.title-p h4{
  color: #4F4AD9;
}

.badge-text-hv1-p {
/*   margin-bottom: 1em; */
}

.badge-text-hv1 {
  background-color: #F3F3F3;
  color: #FAB914;   
  display: inline-block;
  padding: 0.5em 1.5em;
  border-radius: 30px;
  margin-bottom: 1.25rem;
  width: fit-content;
  border: 1px solid {color=#CBD5E1, opacity=null, rgba=rgba(203, 213, 225, 1), rgb=rgb(203, 213, 225), hex=#CBD5E1, css=#CBD5E1};
}







.heading-hv1 {
  color: #01012A ;
  margin-bottom: 1.25em;
}

.sub-heading-hv1 {
  color: #01012A ;
  margin-bottom: 2.5em;
}

.short-des-title * {
  color: #FAB914;
}

.short-des-subtitle *{

}

.list-text *, .m-c-title *, .m-c-sub *{
  color: #01012A;
}

.mini-card-hv1 {
  background-color: #FFFFFF;
}




/********** Hero V2 Start **************/

.heading-hv2 * {
  color: #01012A ;
}

.sub-heading-hv2 * {
  color: #01012A ;
}

.list-text-hv2 * {
  color: #01012A ;
}


/********** Hero V2 End **************/




@media (max-width: 768px) {

  .badge-text-hv1-p {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .badge-text-hv1 {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0.75rem;
    }


  .heading-hv1 {
    text-align: center;
    margin-bottom: .75em;
  }

  .sub-heading-hv1 {
    text-align: center;
    margin-bottom: 2em;
  }

}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/*********** UNIT Variables ***********/









/************ Global Variable Start *********************/





/************ Global Variable End *********************/






.slide {
  background-color: #FFFFFF;
} 

.author-des *{ 
  color: #01012A;
}

.author-name *{
  font-weight: bold;
  color: #01012A;
}

.author-location *{
  color: #01012A;
}

.t-text-heading *{
  color: #01012A;
}

.t-text-sub-heading *{
  color: #01012A;
}


/* --- Utilities --- */
/* common-Macro */
/* --- Macro CSS --- */