/* @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    */
/*****************************************/

/*Text Styles */

.fsp-focus-grad {
  background: linear-gradient(101deg, #2244EC -14.71%, #0D87F2 35.71%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   font-weight: 700;
}

.fsp-icon-focus {
  fill: linear-gradient(101deg, #2244EC -14.71%, #0D87F2 35.71%);
}
.fsp-icon-defocus {
  fill: linear-gradient(101deg, #2244EC -14.71%, #0D87F2 35.71%);
}

.fsp-focus-dark {
   color: #B2BCFF !important;
   font-weight: 700 !important;
}

.fsp-nav-glass {
  background: linear-gradient(95deg, rgba(248, 250, 252, 0.80) 0%, rgba(248, 250, 252, 0.40) 98.01%) !important;
  backdrop-filter: blur(25px) !important;
}
.fsp-sub-nav-glass {
  background: linear-gradient(95deg, rgba(248, 250, 252, 0.90) 0%, rgba(248, 250, 252, 0.40) 98.01%) !important;
  backdrop-filter: blur(25px) !important;
}


/* General Card Styles */

.fsp-card-light {
  border-radius: 12px;
  border: 1px solid rgba(23, 101, 239, 0.20) !important;
}

/* Default styling for desktop */
.fsp-visible-desktop {
    display: block;
}

.fsp-hidden-sm {
    display: none;
}

/* Mobile styling */
@media (max-width: 768px) {
    /* On mobile, hide the desktop-specific content */
    .fsp-visible-desktop {
        display: none;
    }

    /* On mobile, show the content hidden by fsp-hidden-sm */
    .fsp-hidden-sm {
        display: block;
    }
}

.mobile-break { 
      display: none;
}

@media (max-width:575px) {
    .mobile-break {
      display: block;
  }
}


/* Glass Card Style */
.fsp-glass { 
  border-radius: 12px;
  background: radial-gradient(110% 124.53% at 50% 0%, rgba(246, 248, 253, 0.12) 37.41%, rgba(23, 101, 239, 0.06) 69.27%, rgba(13, 135, 242, 0.12) 100%);
  border: 1px solid rgba(23, 101, 239, 0.20);
  backdrop-filter: blur(45px) !important;
}

.fsp-glass-focus { 
  border-radius: 12px;
  background: radial-gradient(110% 124.53% at 50% 0%, rgba(246, 248, 253, 0.12) 37.41%, rgba(23, 101, 239, 0.06) 69.27%, rgba(13, 135, 242, 0.12) 100%);
  border: 2px solid rgba(23, 101, 239);
  backdrop-filter: blur(45px) !important;
}

.gradient-overlay {
    position: relative; /* Ensures the overlay is positioned relative to its container */
    z-index: 0; /* Ensures the overlay is beneath other content */
}

.gradient-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(110% 124.53% at 50% 0%, 
                               
                                rgba(23, 101, 239, 0.90) 1%, 
                                rgba(23, 101, 239, 0.9) 100%)!important; /* Updated color stop with #1765EF */
    mix-blend-mode: hue !important; /* Apply blend mode */
    z-index: -1; /* Ensure the gradient is below content */
    pointer-events: none; /* Allows interaction with underlying content */
}

.fsp-card-glass {
  align-items: center !important;
  gap: 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(206, 209, 250, 0.20) !important;
  background: linear-gradient(95deg, rgba(16, 19, 60, 0.40) 0%, rgba(16, 19, 60, 0.01) 98.01%), 
    linear-gradient(180deg rgba(16, 19, 60, 0.03) 0%, rgba(16, 19, 60, 0.01) 100%)!important;
  backdrop-filter: blur(45px) !important;
  margin-top: -120px !important;
  z-index: 2 !important;
  grid-column: 3 / span 8 !important; /* Start at column 3 and span 8 columns */
}

/* Mobile breakpoint */
@media (max-width: 575px) {
  .fsp-card-glass {
    margin-top: -40px !important;
    padding: 24px 40px !important;
    grid-column: 2 / span 10  !important; /* Span all 12 columns on mobile */
  }
}


.fsp-card-glass-extralight { /* for homepage sub hero section */
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(206, 209, 250, 0.40);
  background: linear-gradient(95deg, rgba(246, 248, 253, 0.6) 0%, rgba(246, 248, 253, 0.8) 98.01%) !important;
  backdrop-filter: blur(45px) !important;
  margin-top: -120px !important;
  z-index: 2;
  grid-column: 3 / 11 !important;
}
.fsp-card-glass-top { /* for homepage sub hero section */
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(206, 209, 250, 0.20);
  background: linear-gradient(95deg, rgba(16, 19, 60, 0.40) 0%, rgba(16, 19, 60, 0.01) 98.01%) !important;
  backdrop-filter: blur(45px) !important;
  margin-bottom: -180px !important;
  z-index: 2;
  grid-column: 3 / 11 !important;
}

.fsp-meter {
  border-radius: 50px;
  border: 1px solid rgba(23, 101, 239, 0.20) !important;
  background-color: #14184C; /* Fill color */
  border: 1.162px solid rgba(23, 101, 239, 0.20); /* Stroke color and width */
  clip-path: polygon(
        5.99% 6.79%, 
        94.01% 6.79%, 
        100% 50%, 
        94.01% 93.21%, 
        5.99% 93.21%, 
        0% 50%
    );
}

.fsp-card-glass-light {
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(23, 101, 239, 0.2);
  background-color: rgba(248, 250, 252, 0.05) !important;
  background-image:linear-gradient(95deg, rgba(248, 250, 252, 0.40) 0%, rgba(248, 250, 252, 0.10) 98.01%) !important;
  backdrop-filter: blur(45px) !important;
  margin-top: 20vw !important;
  z-index: 2;
}

.fsp-card-glass-light-responsive {
  /* Inherit all properties from fsp-card-glass-light */
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(23, 101, 239, 0.2);
  background-color: rgba(248, 250, 252, 0.05) !important;
  background-image: linear-gradient(95deg, rgba(248, 250, 252, 0.40) 0%, rgba(248, 250, 252, 0.10) 98.01%) !important;
  backdrop-filter: blur(45px) !important;
  margin-top: 20vw !important;
  z-index: 2;

  /* Add responsive grid column behavior */
  grid-column: span 7 !important;
}

/* Tablet breakpoint */
@media (max-width: 991px) {
  .fsp-card-glass-light-responsive {
    grid-column: span 9 !important;
  }
}

/* Mobile breakpoint */
@media (max-width: 575px) {
  .fsp-card-glass-light-responsive {
    grid-column: span 12 !important;
  }
}

.fsp-card-glass-hero {
  align-items: center;
  gap: 16px;
  padding: 40px !important;
  border-radius: 12px;
  border: 1px solid rgba(23, 101, 239, 0.2);
  background-color: rgba(248, 250, 252, 0.1) !important;
  background-image:linear-gradient(95deg, rgba(248, 250, 252, 0.60) 0%, rgba(248, 250, 252, 0.40) 98.01%) !important;
  backdrop-filter: blur(45px) !important;
  margin-top: 20vw !important;
  z-index: 2;
}

/* Vertical Card Style (fsp-card-v-light) */
.fsp-card-v-light {
  border-radius: 12px;
  border: 1px solid rgba(23, 101, 239, 0.20) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  padding: 48px 40px; 
  height: 100%; 
}

/* Horizontal Card Style (fsp-card-h-light) */
.fsp-card-h-light {
  border-radius: 12px;
  border: 1px solid rgba(23, 101, 239, 0.20) !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 48px 40px; 
  height: 100%;
}

/* Tablet breakpoint (max-width: 991px) */
@media (max-width: 991px) {
  .fsp-card-h-light,
  .fsp-card-v-light {
    flex-direction: column;
    align-items: flex-start;
  }

  .fsp-card-h-light .pwr-adc-content--text,
  .fsp-card-v-light .pwr-adc-content--text {
    width: 100%;
    order: 1;
    margin-bottom: 20px;
  }

  .fsp-card-h-light .pwr-adc-content--image,
  .fsp-card-v-light .pwr-adc-content--image {
    width: 100%;
    order: 2;
  }
}

/* Mobile breakpoint (max-width: 575px) */
@media (max-width: 575px) {
  .fsp-card-h-light,
  .fsp-card-v-light {
    padding: 24px 20px !important;
  }
}

/* Custom Homepage Section */

.fsp-cropped-image-container {
  display: flex;
  width: 130%; 
  align-items: flex-start; 
  position: relative; /
  margin-left: -15%; 
}

.fsp-cropped-image-container-2 {
  display: flex;
      width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px;
}

.fsp-text-container {
  position: relative;
  top: -10%; 
  text-align: center;
}

/* Comparison Table */
.fsp-comparison-table {
  width: 100%;
  overflow: hidden;
  background-color: var(--clr-background-lt);
  border-radius: 12px;
  padding: 1px;
}

.fsp-comparison-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.fsp-comparison-table th,
.fsp-comparison-table td {
  border: 1px solid rgba(23, 101, 239, 0.2);
  padding: 16px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 1.4;
  box-sizing: border-box;
}

.fsp-comparison-table th {
  background-color: var(--clr-background-accent-lt);
  font-weight: var(--fw-header);
  color: var(--clr-text-lt);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Style for the feature column text */
.fsp-comparison-table td:first-child {
  font-weight: bold; /* Ensures bold text */
  color: var(--clr-primary);
  font-size: 1rem; /* h6 equivalent size */
}

/* Set specific widths for columns */
.fsp-comparison-table th:first-child,
.fsp-comparison-table td:first-child {
  width: 20%;
}

.fsp-comparison-table th:not(:first-child),
.fsp-comparison-table td:not(:first-child) {
  width: 20%;
}

/* Highlight FSP column */
.fsp-comparison-table th:nth-child(2),
.fsp-comparison-table td:nth-child(2) {
  background-color: rgba(23, 101, 239, 0.1);
  border-left: 2px solid var(--clr-primary);
  border-right: 2px solid var(--clr-primary);
}

/* Remove all borders for first and last rows */
.fsp-comparison-table tr:first-child th,
.fsp-comparison-table tr:last-child td {
  border: none;
}

/* Add borders only for the highlighted column in first and last rows */
.fsp-comparison-table tr:first-child th:nth-child(2) {
  border-top: 2px solid var(--clr-primary);
  border-left: 2px solid var(--clr-primary);
  border-right: 2px solid var(--clr-primary);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.fsp-comparison-table tr:last-child td:nth-child(2) {
  border-bottom: 2px solid var(--clr-primary);
  border-left: 2px solid var(--clr-primary);
  border-right: 2px solid var(--clr-primary);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Responsive Design Adjustments */
@media (max-width: 991px) {
  .fsp-comparison-table {
    overflow-x: auto;
  }
  
  .fsp-comparison-table th,
  .fsp-comparison-table td {
    padding: 12px;
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .fsp-comparison-table th,
  .fsp-comparison-table td {
    padding: 8px;
    font-size: 12px;
  }
}


/* Logo Scroll */
.fsp-logo-scroll {
 gap: 60px;
}

.fsp-card-white {
  border-radius: 12px;
  background: #ffffff !important;
  border: 1px solid rgba(23, 101, 239, 0.20);
  backdrop-filter: blur(45px) !important;
}

/* Stacked list Divider*/
.fsp-line-dark {
 width: 100%;
  height: 1px;
  background-color: #B2BCFF;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.fsp-line-light {
 width: 100%;
  height: 1px;
  background-color: #CBDCF9;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Quote offset */
.fsp-quote-mark {
  font-weight: 700;
  color: #B2BCFF;
  font-size: 4rem;
  opacity: 30%;
  margin-bottom; -2rem;
}
 
.fsp-quote-card-glass {
  width: auto !important;
  max-width; 100% !important;
  height; 200px !important;
  gap: 16px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(206, 209, 250, 0.20);
  background: linear-gradient(95deg, rgba(16, 19, 60, 0.40) 0%, rgba(16, 19, 60, 0.01) 98.01%) !important;
  backdrop-filter: blur(45px) !important;
  z-index: 2;
}

.hs-menu-item a {
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.hs-menu-item a:hover {
  color: #1376cd;
}

.hs-menu-item.active-branch a {
  font-weight: bold;
  border-bottom: 2px solid var(--clr-primary);
}

.hs-form-field {
  margin-bottom: 20px !important;
}

.hs-submit {
  margin-top: 10px !important;
}