/* 
 * @Author: Emmanuel Alcime
 * @Site: Aliv Business
 * This file contains basic styles and a root section for custom properties
 */

 @font-face {
  font-family: "CircularPro";
  src: url("../fonts/CircularPro-Medium.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/CircularPro-Medium.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/CircularPro-Medium.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/CircularPro-Medium.otf")
      format("opentype"),
    /* OpenType format */
      url("../fonts/CircularPro-Medium.svg#CircularPro-Medium") format("svg");
  /* Legacy iOS */
  font-weight: 500;
  /* Medium weight */
  font-style: normal;
}

@font-face {
  font-family: "CircularPro";
  src: url("../fonts/CircularPro-BookItalic.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/CircularPro-BookItalic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/CircularPro-BookItalic.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/CircularPro-BookItalic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/CircularPro-BookItalic.otf")
      format("opentype"),
    /* OpenType format */
      url("../fonts/CircularPro-BookItalic.svg#CircularPro-BookItalic")
      format("svg");
  /* Legacy iOS */
  font-weight: 400;
  /* Normal weight */
  font-style: italic;
}

@font-face {
  font-family: "CircularPro";
  src: url("../fonts/CircularPro-Book.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/CircularPro-Book.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/CircularPro-Book.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/CircularPro-Book.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/CircularPro-Book.otf")
      format("opentype"),
    /* OpenType format */ url("../fonts/CircularPro-Book.svg#CircularPro-Book")
      format("svg");
  /* Legacy iOS */
  font-weight: 400;
  /* Normal weight */
  font-style: normal;
}

@font-face {
  font-family: "CircularPro";
  src: url("../fonts/CircularPro-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/CircularPro-Bold.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/CircularPro-Bold.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/CircularPro-Bold.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/CircularPro-Bold.otf")
      format("opentype"),
    /* OpenType format */ url("../fonts/CircularPro-Bold.svg#CircularPro-Bold")
      format("svg");
  /* Legacy iOS */
  font-weight: 700;
  /* Bold weight */
  font-style: normal;
}

@font-face {
  font-family: "CircularPro";
  src: url("../fonts/CircularPro-Black.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/CircularPro-Black.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/CircularPro-Black.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/CircularPro-Black.otf")
      format("opentype");
  /* OpenType format */
  font-weight: 900;
  /* Black weight */
  font-style: normal;
}

/* Root section for custom properties (CSS variables) */
:root {
  /* old aliv primary #fb3449; */
  --primary-color: #ff6c36;
  --secondary-color: #000000;
  --background-color: #ffffff;
  --text-white: #ffffff;
  --aliv-blue: #00b3e3;
  --aliv-yellow: #ffc627;
  --aliv-teal: #00c4b3;
  --aliv-pink: #ff9bb1;
  --aliv-purple: #645d9c;
  --aliv-orange: #ff6c36;
  --site-gray: #f9fafb;
  --font-family: "CircularPro", sans-serif;
  --bs-breadcrumb-divider: "\f054";
  --font-size: 16px;
  --line-height: 1.5;
  --padding: 1rem;
  --margin: 1rem;
  --bg-light: #ccc;
  --bg-white: #ffffff;
  --gray: #eee;
  --text-color: #344054;
  --text-gray: #6c757d;
  --did-you-know-text: #737373;
  --rounded-background: #0d0d0d;
  --text-dark-color: #c3c3c3;
  --hover-text-color: #444;
  --input-border-color: #cccccc;
  --fill: #4d4d4d;
  --border-color: #eee;
}

/* a:not(.btn):not(.btn-theme-primary):not(.btn-theme-primary-no-arrow):not(.link):not(.all-plans-link):not(.success-story-desc .link):not(.btn-featured){
  color: inherit !important;
} */

.text-primary-color {
  color: var(--primary-color) !important;
}

.border-primary-color {
  border: 1px solid var(--primary-color) !important;
}

.link {
  transition: all 0.3s ease-in-out;
}

.link:hover {
  background: var(--background-color) !important;
  color: var(--primary-color) !important;
}

.success-story-desc .link {
  max-width: 250px;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transition: all 0.3s ease-in-out;
  position: relative;
  text-align: center;
}

.success-story-desc .link:hover {
  background-color: var(--primary-color) !important;
  color: var(--background-color) !important;
}

.success-story-desc .link:hover::after {
  color: var(--background-color);
}

.success-story-desc .link::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
  position: absolute;
  right: 20px;
}

body {
  font-family: var(--font-family) !important;
  background-color: var(--background-color) !important;
  color: var(--secondary-color);
}

.btn_cta_container {
  display: flex;
  justify-content: end;
  margin-left: auto;
  width: 44%;
  max-height: 50px;
}

.btn-theme-primary-no-arrow {
  background-color: var(--primary-color) !important;
  color: var(--background-color) !important;
  width: 50%;
  padding: 2% 5% !important;
}

.btn-theme-primary-no-arrow:hover {
  background-color: var(--bg-white) !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

.btn-theme-primary {
  background-color: var(--primary-color);
  color: var(--background-color);
  width: 100%;
  padding: 4% 5%;
  transition: all 200ms ease;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--primary-color);
}

.btn-theme-primary:hover {
  background-color: var(--background-color) !important;
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color);
}

.btn-theme-primary:hover::after {
  color: var(--primary-color) !important;
}

.btn-login {
  max-width: 150px;
}

.hero_cta .btn-theme-primary {
  width: 50%;
  padding: 2% 0 !important;
}

.btn-learn-more {
  width: 30%;
  padding: 2% 0 !important;
  display: block;
  color: var(--primary-color);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.btn-learn-more:hover {
  text-decoration: underline;
}

.btn-theme-primary::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--text-white);
}

.theme-primary {
  background-color: var(--primary-color);
  color: var(--background-color);
}

.btn-theme-outline-primary {
  padding: 2% 5% !important;
  width: 50%;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  transition: all 0.3s ease;
  font-weight: 700;
}

.btn-theme-outline-primary:hover {
  background: var(--primary-color) !important;
  color: var(--text-white) !important;
}

.color-theme-primary {
  color: var(--primary-color) !important;
}

.white-image {
  filter: invert(100%) brightness(200%);
}

.header {
  height: auto;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.header.fixed {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  /* Slightly stronger shadow for fixed state */
}

.header .navbar {
  padding: 1.5% 0;
}

.navbar-nav {
  width: 55%;
  margin-bottom: 0.5rem;
  margin-right: auto;
}

.navbar-brand {
  width: auto;
  max-width: 150px;
}

.navbar-brand > img {
  width: 100%;
  height: auto;
}

.navbar-collapse {
  width: 100%;
}

.navbar-collapse.collapse.show {
  background: var(--bg-white);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
}

.plans-tabs-nav .nav-item {
  display: flex;
  padding: 0 2%;
}

.nav-item {
  /* display: flex; */
  padding: 0 2%;
}

.nav-tabs .nav-item {
  padding: 0 2% 0 0 !important;
  margin-left: 0 !important;
}

.nav-item > a {
  font-family: var(--font-family) !important;
  font-weight: 500;
  color: var(--secondary-color) !important;
}

.dropdown-menu {
  display: none;
  width: auto;
  height: auto;
  padding: 0 !important;
}

.has_menu {
  position: relative;
  transition: all 0.3s ease;
}

.has_menu:after {
  content: "\f078";
  /* Font Awesome Unicode for chevron-down */
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 0.75em;
  /* Adjust the size as needed */
  font-weight: 900;
  margin: 0 0px 6px 10px;
  /* Space between text and chevron */
  vertical-align: middle;
  /* Align the chevron with the text */
  transition: transform 0.3s;
  /* Add transition for animation */
}

.has_menu.open:after {
  /* content: "\f077";  */

  transform: rotate(180deg);
  /* Rotate 180 degrees */
}

.menus {
  width: auto;
  padding: 4%;
  min-width: 250px;
}

.menu_items {
  max-height: 95px;
  max-width: 263px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3%;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  padding: 3%;
  box-sizing: border-box;
}

.menu_items:hover {
  background: var(--site-gray);
  /* border: thin solid var(--gray); */
}

.menu_items_container {
  display: flex;
  align-items: start;
}

.all-plans-link {
  position: relative;
}

.all-plans-link::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  color: var(--primary-color);
  /* Divider color */
  margin: 2% 0.5rem;
  /* Space around divider */
  font-weight: 600;
  font-size: 13px;
}

.items_container {
  display: flex;
  align-items: start;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.items_container > svg {
  padding-top: 8%;
  width: 40px;
  height: 40px;
}

.ellipsis {
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide the overflowing text */
  text-overflow: ellipsis; /* Add ellipsis (...) at the end of the overflowing text */
  width: 100%; /* Set the width or a specific value for truncation */
}

#globe {
  padding-top: 3%;
  width: 50px;
  height: 50px;
}

.items_container > svg .svg-path {
  fill: var(--primary-color);
  /* Use CSS variable for color */
}

.items_container > .menu_item_desc {
  padding-top: 8%;
}

.menu-items_link {
  width: 100%;
  height: auto;
  max-height: 108px;
  display: flex;
  padding: 3% 3%;
  box-sizing: content-box;
  text-decoration: none;
  border-bottom: 8px;
}

.menu-items_link:hover {
  background: var(--bg-white);
}

.menu-items_link_image {
  width: 144px;
  height: 80px;
}

.menu-items_link_image > img {
  width: inherit;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.menu-items_link_description {
  margin: 0 3%;
}

.menu-items_link_description > h3 {
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.menu-items_link_description > p {
  font-size: 0.8rem;
  color: var(--secondary-color);
}

.menu_item_desc {
  margin: 0 0 0 3%;
}

.menus.right {
  background: var(--bg-white);
}

.menus.left {
  background: var(--site-gray);
  width: 500px;
}

.menus.segment {
  padding: 7%;
}

.menus-heading {
  color: var(--primary-color);
  margin: 0 0 10% 0;
}

.menu_item_desc__heading {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.menu_item_desc__text {
  font-size: 0.8rem;
  color: var(--secondary-color);
}

.call-to-actions {
  width: 40%;
  list-style-type: none;
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 5 Free";
  content: var(--bs-breadcrumb-divider);
  color: var(--text-gray);
  /* Divider color */
  margin: 2% 0.5rem;
  /* Space around divider */
  font-weight: 600;
  font-size: 13px;
}

.breadcrumb-item.active {
  color: var(--primary-color) !important;
}

.heading-text__container {
  margin-top: 1em;
}

.larger-break {
  font-size: 4.3rem;
  line-height: 5.5rem;
}

.smaller-text {
  margin: 5% 0 0 0;
}

.aliv-business_sponsors {
  width: 180px;
}

.aliv-business_sponsors > img {
  width: 100%;
}

.hero {
  width: 90%;
  margin: 3% auto 0 auto;
}

.hero-image__container {
  width: 100%;
}

.hero-image__container > img {
  width: 100%;
  height: auto;
}

.did-you-know {
  margin: 3% 0 0 0;
}

.did-you-know_desc {
  padding-right: 3rem !important;
}

.did-you-know__big-text {
  font-size: 3.3rem;
  font-weight: 900;
}

.did-you-know__text {
  color: #737373;
  font-size: 1.2rem;
  line-height: 2.3rem;
}

.did-you-know__image > img {
  width: 100%;
}

.promo-description {
  margin-top: 3%;
}

.promo-description__text {
  font-size: 1.5rem;
  line-height: 2.3rem;
}

.how-it-works {
  --border-radius: 20px;
  width: 90%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 5% auto 0 auto;
}

.how-it-works__text {
  --local-text-color: #c3c3c3;
  color: var(--local-text-color);
  font-size: 1.2rem;
  line-height: 2.3rem;
}

.how-it-works__divider {
  border: none;
  /* Remove default border */
  height: 2px;
  /* Set height of the hr */
  background: var(--background-color);
  margin: 20px 0;
  /* Add some margin */
}

.how-it-works__rounded {
  box-sizing: border-box;
  background-clip: padding-box;
  background-color: var(--rounded-background);
  margin: 10px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.how-it-works-link {
  text-decoration: none;
}

.how-it-works__rounded:hover {
  background-color: var(--primary-color);
}

.how-it-works__rounded:hover .how-it-works__top-heading > h4 {
  font-weight: 900;
  color: var(--bg-white) !important;
}

.how-it-works__rounded:hover > h4 {
  color: var(--text-white);
}

.how-it-works__rounded a.text-links {
  color: var(--primary-color);
  font-weight: 900;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  padding-bottom: 4%;
}

.how-it-works__rounded:hover a.text-links {
  color: var(--text-white);
  font-weight: 900;
}

.how-it-works__rounded a.text-links::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
}

.how-it-works__rounded:hover a.text-links::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--text-white);
}

.service-link {
  box-sizing: border-box;
  background-clip: padding-box;
  background-color: transparent;
  margin: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: block;
}

.service-link:hover {
  background-color: var(--primary-color);
  border: thin solid var(--primary-color) !important;
}

.service-link::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--text-white);
  position: absolute;
  right: 20px;
}

.how-it-works__top-heading > h4 {
  font-weight: 900;
  color: var(--primary-color);
  transition: all 0.3s ease;
  padding: 0;
}

.how-it-works__rounded:hover > p {
  color: var(--text-white);
}

.how-it-works__rounded > h4 {
  color: var(--primary-color);
  font-size: 3.3rem;
}

.how-it-work__main .how-it-works__divider {
  margin: 10px 0;
}

.how-it-works-top-number > h5 {
  font-weight: bolder;
  font-size: 30px;
}

.how-it-works-metrics-text > p {
  font-weight: 700;
}

.how-it-works-metric-col {
  /* border-left: 1px solid var(--bg-white); */
  padding: 0 3%;
}

.arrow-circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid var(--bg-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-us__heading {
  font-size: 1.2rem;
  padding: 0 25%;
}

.contact-us__heading > p {
  color: var(--did-you-know-text);
  line-height: 2.3rem;
}

.contact-type__icon {
  margin-bottom: 3rem;
}

.contact-type__text {
  margin-top: 3%;

  color: var(--did-you-know-text);
}

.contact-type__link {
  display: block;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 900;
  margin: 2% 0 0 0;
}

.contact-form {
  width: 60%;
  margin: 3em auto 0 auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.contact-form .contact-us__heading > p {
  font-size: 1rem;
}

.business-contact input[type="text"],
.business-contact input[type="email"],
.business-contact input[type="tel"],
.business-contact textarea {
  border: 1px solid var(--input-border-color) !important;
  height: 3.1rem;
}

#message {
  min-height: 200px;
}

.button-container {
  width: 20%;
}

.agreement-text {
  width: 80%;
  margin: 0 0 0 2%;
}

.agreement-text > p {
  color: var(--did-you-know-text);
  font-size: 0.9rem !important;
  line-height: 2rem;
}

.featured-image-container {
  display: flex;
  min-height: 350px;
  justify-content: center;
  align-items: end;
}

.scaled-image {
  width: 80%;
}

.footer {
  --border-radius: 20px;
  width: 90%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 5% auto 0 auto;
  /* background-image: url(../assets/aliv_stripe.png);
    background-position: top right;
    background-repeat: no-repeat; */
  /* Ensure the image does not repeat */
}

.horizontal-strip {
  background-image: url(../assets/Lines.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 58px;
  margin: 20px 0 40px 0;
}

.footer-text {
  width: 100%;
}

.footer-text-container > p {
  max-width: 900px;
  color: var(--text-dark-color);
  font-size: clamp(1.5rem, 2vw, 2.6rem);
  line-height: 4rem;
  font-weight: 700;
}

.footer-text-cta {
  width: 20%;
}

.footer-links_header {
  width: 100%;
}

.footer-links_header > h4 {
  font-size: 1rem;
  color: var(--text-dark-color);
}

.footer-links_menu {
  width: 100%;
}

.footer-links_menu > ul {
  color: var(--text-dark-color);
  list-style-type: none;
  padding: 0;
}

.footer-links_menu > ul > li {
  padding-top: 2%;
  font-size: 1.1rem;
}

.footer-links_menu > ul > li > a {
  color: var(--text-dark-color);
  text-decoration: none;
  transition: color 0.4s ease;
}

.footer-links_menu > ul > li > a:hover {
  color: var(--hover-text-color);
}

.copy-right-container {
  width: 90%;
  margin: 2% auto;
}

.copy-right-container > div {
  justify-content: space-between;
}

.social-link {
  width: 40%;
  display: flex;
  justify-content: end;
}

.social-links > ul {
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  justify-content: space-between;
  margin: 0;
}

.social-links > ul > li {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 5px;
}

.social-links > ul > li > a {
  display: block;
  width: 30px;
  height: 30px;
}

.social-links > ul > li > a > svg {
  fill: var(--fill);
}

.hero_logo_image {
  width: 20% !important;
}

.empowering {
  --border-radius: 20px;
  width: 90%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 5% auto 0 auto;
  background-image: url(../assets/motif-fix.png);
  background-position: bottom center;
  background-repeat: repeat-x;
}

.business-plans_small-text {
  color: var(--primary-color);
}

.bundles {
  box-sizing: border-box;
  background-clip: padding-box;
  background-color: var(--rounded-background);
  margin: 10px 10px;
}

.bundle-link-to-plan > a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 700;
}

.bundle-link-to-plan > a::after {
  font-family: "Font Awesome 5 Free";

  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
}

.business-plan-box-heading > h2 {
  color: var(--primary-color);
  font-weight: 900;
}

.plan-box {
  box-sizing: border-box;
  background-clip: padding-box;
  background-color: var(--rounded-background);
  margin: 10px 10px;
}

.plan-box-link {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 700;
  display: block;
}

.plan-box-description {
  font-weight: 400;
}
.plan-features-list {
  padding: 0;
  margin: 0;
}

.plan-features-list > li:first-child {
  margin-top: 0.8rem;
}
.plan-features-list > li {
  padding: 5px 0;
}

.plan-features-list > li::before {
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
  margin-right: 10px;
}

.biab::before {
  visibility: hidden;
}

.plan-features-list::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: #ccc;
  margin: 0px 0;
}

.plan-box-link {
  margin-top: 20px;
}

.plan-box-link::after {
  font-family: "Font Awesome 5 Free";

  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
}

.featured-heading_small {
  color: var(--primary-color);
  font-weight: 700;
}

.featured-deals-box {
  -webkit-box-sizing: border-box; /* For Safari and older Chrome */
  -moz-box-sizing: border-box; /* For older Firefox */
  box-sizing: border-box;

  -webkit-background-clip: padding-box; /* For Safari and older Chrome */
  -moz-background-clip: padding; /* For older Firefox */
  background-clip: padding-box;

  background-color: var(--rounded-background);
  margin: 10px 10px;

  background: #f9fafb;
  border-radius: 1.5rem !important;
  -webkit-border-radius: 1.5rem; /* For Safari and older Chrome */
  -moz-border-radius: 1.5rem; /* For older Firefox */
  border-radius: 1.5rem;
}

.featured-box-header {
  margin: 4em 0 5em 0;
}

.featured-box-header > h3 {
  color: var(--primary-color);
  font-weight: 900;
}

.featured-box-header > p {
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 16px;
}

.btn-featured {
  text-decoration: none;
  border: thin solid var(--primary-color);
  color: var(--primary-color);
  display: block;
  max-width: 250px;
  padding: 1em 3em;
  transition: all 0.3s ease-in-out;
}

.btn-featured:hover,
.btn-featured:focus,
.btn-featured:active,
.btn-featured:focus-visible {
  --bg-white: #ffffff;
  background: var(--primary-color) !important;
  color: var(--bg-white) !important;
}

.btn-featured:hover::after {
  --bg-white: #ffffff;
  color: var(--bg-white);
}

.btn-featured::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 6%;
  font-weight: 600;
  color: var(--primary-color);
}

.sisyphus {
  --border-radius: 20px;
  width: 90%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 5% auto 0 auto;
  /* background-image: url(../assets/aliv_stripe.png); */
  background-image: url(../assets/motif-fix.png);
  background-position: bottom center;
  background-repeat: repeat-x;
}

#partnersCarouselIndicators{
  max-height: 600px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.carousel-item{
  max-height: 600px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.carousel-indicators button {
  width: 10px !important;
  /* Make the indicators smaller */
  height: 10px !important;
  /* Make the indicators round */
  border-radius: 50% !important;
  /* Make the indicators round */
  background-color: white !important;
  /* Default color */
  border: none;
  /* Remove default border */
}

.carousel-indicators .active {
  background-color: var(--primary-color) !important;
  /* Active color */
}

.accordion {
  --bs-accordion-bg: transparent;
  background: none !important;
}

.accordion-item {
  --bs-accordion-color: #eee;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: thin solid #ccc !important;
  background: none !important;
}

.accordion-body {
  color: var(--secondary-color);
}

.accordion-button {
  transform: none !important;
  transition: none !important;
}

.accordion-button::after {
  display: none;
  background-image: none;
  transition: none !important;
}

.accordion-button::after {
  content: "\002B";
  /* Plus sign */
  font-size: 1.25rem;
  margin-right: 10px;
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  color: black;
  border: 1px solid black;
  transition: transform 0.2s;
}

.accordion-button:not(.collapsed)::after {
  content: "\2212";
  /* Minus sign */
  background-image: none;
  font-size: 1.25rem;
  line-height: 18px;
}

.accordion-button:not(.collapsed) {
  background: transparent !important;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
  background: transparent !important;
}

.help {
  width: 70%;
  margin: 1% auto 7% auto;
}

.help .accordion-item {
  border-bottom: none !important;
}

.get-in-touch {
  --border-radius: 20px;
  width: 70%;
  background-color: var(--gray);
  border-radius: var(--border-radius);
  margin: 1% auto 3% auto;
}

.input-group-text > svg {
  fill: #dee2e6 !important;
  width: 20px;
  height: 20px;
}

.customer-solution-small-heading > h4 {
  color: var(--primary-color);
}

.sme-hero .breadcrumb-item + .breadcrumb-item::before {
  margin: 0 0.5rem;
}

.business-right .body > a {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
}

.business-right .body > a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
}

.comment-box {
  background-color: white;
  padding: 5%;
  border: 1px solid #ccc;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  /* Space for the image */
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);
}

.comment-box::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  /* Adjust based on the triangle's height */
  z-index: 1;
}

.comment-box::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-top: 21px solid #ccc;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -21px;
  /* Adjust based on the triangle's height */
  z-index: 0;
}

.comment-box > h3 {
  font-weight: 900;
  text-align: center;
  line-height: 1.4em;
  margin-bottom: 4% 0;
}

.comment-box > p {
  font-weight: 400;
  text-align: center;
  line-height: 1.8em;
}

.comment-image {
  width: 70px;
  height: 70px;
}

.testimony-item {
  box-sizing: border-box;
  background-clip: padding-box;
  background-color: transparent;
  margin: 10px 10px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(1) sepia(1) saturate(10000%) hue-rotate(190deg);
}

#carouselCustomerReviews .carousel-control-next-icon,
#carouselCustomerReviews .carousel-control-prev-icon {
  filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%)
    contrast(90%);
  /* This filter creates a dark gray color */
  /* Alternatively, you can use the --primary-color variable if it's defined */
  /* color: var(--primary-color); */
}

.review-carousel-inner {
  min-height: 300px;
}

@media screen and(min-width: 300px) and (max-width: 860px) {
  .review-carousel-inner {
    min-height: unset;
  }
}

.review-header-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ccc;
  overflow: hidden;
}
.review-header-image > img {
  height: 100%;
  object-fit: cover;
}

#carouselInner {
  padding: 2em 0 4em 0;
}

.cle-hero .link {
  background: var(--primary-color);
  padding: 1em 3em;
  text-align: center;
  color: var(--background-color);
  font-weight: 900;
  position: relative;
  text-decoration: none;
  display: block;
  margin: 3% 0;
}

.cle-hero .link::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--background-color);
  position: absolute;
  right: 20px;
}

.cle-hero .link:hover::after {
  color: var(--primary-color);
}

.le.faqs {
  margin: 4% auto 4% auto !important;
}

.le.get-in-touch {
  margin: 1% auto 3% auto;
}

.partners .carousel-indicators button {
  background-color: #b5b5b5 !important;
  margin: 0 5px !important;
}

.partners .carousel-indicators {
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.partners .carousel-indicators .active {
  width: 30px !important;
  height: 8px !important;
  border: none;
  border-radius: var(--bs-border-radius-xxl) !important;
  flex-shrink: 0;
  background-color: var(--primary-color) !important;
}

.partners .hero-link > a {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 800;
  text-decoration: none;
  padding: 1em 4em;
  position: relative;
}

.partners .hero-link > a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
  position: absolute;
  right: 20px;
}

.partners .hero-link > a:hover {
  border: 1px solid var(--primary-color);
  color: var(--background-color) !important;
  background-color: var(--primary-color) !important;
}

.partners .hero-link > a:hover::after {
  color: var(--background-color);
}

.partners .hero-link > a {
  border: 1px solid var(--primary-color);
}

.alliances .link-bordered {
  text-decoration: none;
  padding: 1em 4em;
  border-radius: 3em;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  text-align: center;
  position: relative;
  font-weight: 800;
  transition: all 0.3s ease-in-out;
}

.alliances .link-bordered::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
  position: absolute;
  right: 20px;
}

.alliances .link-bordered:hover {
  border: 1px solid var(--primary-color);
  color: var(--background-color) !important;
  background-color: var(--primary-color) !important;
}

.alliances .link-bordered:hover::after {
  color: var(--background-color);
}

.link-bordered-bottom {
  text-decoration: none;
  padding: 1em 4em;
  border-radius: 3em;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--background-color);
  text-align: center;
  position: relative;
  font-weight: 800;
  max-width: 300px !important;
  display: block;
  transition: all 0.3s ease-in-out;
}

.link-bordered-bottom::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--background-color);
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.link-bordered-bottom:hover {
  border: 1px solid var(--background-color);
  color: var(--primary-color);
  background-color: var(--background-color);
}

.link-bordered-bottom:hover::after {
  color: var(--primary-color);
}

.nav-tabs .nav-link {
  color: #667085 !important;
  /* Make text color red */
  font-weight: bold;
  /* Make text bold */
  transition: all 0.3s ease-in-out !important;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  /* Make text color red */
  font-weight: bold;
  /* Make text bold */
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: transparent;
  /* or use the same color as the background to make it invisible */
  border-bottom: 3px solid var(--primary-color);
  /* 2px red bottom border */
}

.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: 0;
  /* remove rounded borders */
  border-top-right-radius: 0;
  /* remove rounded borders */
}

.mobile-and-voice-pane-header > a:first-of-type {
  background-color: var(--primary-color);
  color: var(--background-color);
  font-weight: 800;
  border-radius: 3em;
  text-decoration: none;
  padding: 1em 3em;
}

.mobile-and-voice-pane-header > a {
  background-color: var(--gray);
  color: var(--secondary-color);
  font-weight: 800;
  border-radius: 3em;
  text-decoration: none;
  padding: 1em 3em;
}

.dollar-sign {
  color: var(--Gray-900, #101828);
  font-family: Inter;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
  /* 122.222% */
  letter-spacing: -0.72px;
}

.price {
  color: var(--Gray-900, #101828);
  /* Display xl/Semibold */
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: 72px;
  /* 120% */
  letter-spacing: -1.2px;
}

.per-month {
  color: var(--Gray-600, #475467);

  /* Text md/Medium */
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 92px;
  /* 150% */
}

.features-get-started-link > a {
  display: block;
  border-radius: 3em;
  text-decoration: none;
  font-weight: 800;
  background: var(--primary-color);
  color: var(--background-color);
  padding: 1em 6em;
}

.features-01-get-started-link > a {
  display: block;
  border-radius: 3em;
  text-decoration: none;
  font-weight: 800;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 1em 6em;
  transition: all 200ms ease-in-out;
  position: relative;
}

.features-01-get-started-link > a:hover {
  background: var(--primary-color);
  color: var(--text-white);
}

.features-01-get-started-link > a:hover::after {
  color: var(--text-white);
}
.features-01-get-started-link > a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
}

.plans-mobile-and-voice {
  min-height: 400px;
}

.plans-cta-container > a:first-of-type {
  display: flex;
  padding: 12px 18px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);

  color: var(--background-color);

  text-decoration: none;
  font-weight: 700;

  /* Shadows/shadow-xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: all 0.3s ease-in-out;
}

.plans-cta-container > a:first-of-type:hover {
  background: var(--background-color);
  color: var(--primary-color);
}

.plans-cta-container > a:last-of-type {
  display: flex;
  padding: 12px 18px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid var(--Gray-300, #d0d5dd);
  background: var(--Base-White, #fff);
  color: var(--Gray-700, #344054);
  font-weight: 700;
  text-decoration: none;
  /* Shadows/shadow-xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: all 0.3s ease-in-out;
}

.plans-cta-container > a:last-of-type:hover {
  background: var(--light-gray, #eee);
}

.team-member-role > p {
  font-weight: 600;
  color: var(--gray-600, #475467) !important;
  font-size: 14px !important;
}

.board-member-avatar {
  display: flex;
  justify-content: center;
}

.board-member-name {
  color: var(--Neutral-900, #171717);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.board-member-role {
  color: var(--Neutral-500, #737373);

  font-size: 0.875rem;
  font-style: normal;
  font-weight: 450;
  line-height: 20px;
}

.board-member-story {
  color: var(--Neutral-500, #737373);
  font-size: 1rem;
  font-style: normal;
  font-weight: 450;
  line-height: 39px;
  /* 150% */
}

.board-member-full-bio {
  width: 25%;
  padding: 1% 5%;
}

.director-image {
  width: 50%;
  height: auto;
}

.plan-header {
  padding: 1.5rem;
  margin: 2%;
  /* border: 1px solid #ccc;
    border-radius: 8px; */
  background: var(--Base-White, #fff);
  /* box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); */
}

/* Apply border to all rows */
.plan-features li {
  /* border-bottom: 1px solid #ddd; */
  padding: 1rem;
}

/* Apply striping to even rows */
.plan-features li:nth-child(even) {
  background-color: #f9fafb;
}

/* Orange border for the middle column */
.border-orange {
  border: 3px solid var(--primary-color);
  border-radius: 8px;
}

/* Tablebody */

tbody th {
  background: rgba(255, 255, 255, 0.42);
  border-left: 1px solid #ccc;
  font-size: 13px;
}

tbody th span {
  font-weight: normal;
  font-size: 87.5%;
  color: #999;
  display: block;
}

tbody td {
  background: rgba(255, 255, 255, 0.42);
  text-align: center;
  padding: 2em !important;
}

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td {
  background: var(--Gray-50, #f9fafb);
  padding: 2em !important;
}

/* Tablefooter */

tr {
  border: none;
}

tfoot th {
  padding: 2em 1em !important;
}

tfoot td {
  text-align: center;
  padding: 2em 1em !important;
  /* border-top: 1px solid #ccc; */
  /* border-bottom: 1px solid #ccc; */
}

tfoot a {
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding: 1.125em 2em;
  background: #92c500;
  border-radius: 0.5em;
  font-size: 13px;
}
*/ .fa-check {
  color: green;
}

.fa-times {
  color: #dc2b2b;
}

.custom-solutions {
  margin: 5em auto 2em auto !important;
  overflow: hidden;
}

.custom-image {
  width: 100%;
  height: auto;
  object-fit: none;
}

.custom-image-50 {
  width: 100%;
  height: auto;
}

.half-col-50 {
  width: 50%;
}

.half-col-75 {
  width: 75%;
}

.custom-image-100 {
  width: 100%;
  height: auto;
}

.maps-container {
  --border-radius: 20px;
  width: 90%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 5% auto 0 auto;
  padding: 20px;
}

/* Add styles for the map container */
#map {
  height: 700px !important;
  /* Set the height for desktop */
  width: 100%;
  /* Full width */
  border-radius: 15px;
  /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Optional: add shadow for better effect */
}

.map-info {
  width: 50%;
}

.map-info-icon {
  margin-bottom: 5%;
}

.map-icon-name {
  margin-bottom: 5%;
}

.map-icon-name > h5 {
  color: var(--text-white);
  font-family: Inter;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}

.map-info-hours {
  color: var(--Neutral-200, #e5e5e5);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 5%;
}

.map-info-address {
  color: var(--primary-color);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 150% */
}

.error {
  color: red;
  font-size: 0.9em;
  display: none;
  margin-top: 2%;
}
.tabs-container .switch-container {
  width: 90%;
  max-width: 1200px;
  height: 64px;
  border-radius: 100px;
  border: 1px solid rgba(229, 229, 229, 0.5);
  background: #f9fafb;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.tabs-container .switch-button {
  width: 20%;
  height: 56px;
  flex-shrink: 0;
  border-radius: 100px;
  color: var(--text-white) !important; /* Text color for the button */
  background: var(--primary-color, #ff6c36);
  position: absolute;
  left: 0;
  top: 4px;
  transition: left 0.3s;
  z-index: 1;
}

.tabs-container .switch {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabs-container .switch-label {
  width: 20%;
  text-align: center;
  z-index: 2;
  color: #000; /* Default text color */
  opacity: 0.4;
  font-weight: bold;
  cursor: pointer;
}

/* Change the text color of the active label */
.tabs-container
  .switch-container.active-infrastructure
  .switch-label[data-tab="infrastructure"],
.tabs-container
  .switch-container.active-internet-connectivity
  .switch-label[data-tab="internet-connectivity"],
.tabs-container .switch-container.active-voice .switch-label[data-tab="voice"],
.tabs-container
  .switch-container.active-mobile
  .switch-label[data-tab="mobile"],
.tabs-container
  .switch-container.active-commercial-tv
  .switch-label[data-tab="commercial-tv"] {
  color: var(--text-white) !important; /* White text for active label */
  opacity: 9;
}

.tabs-container .switch-container.active-voice .switch-button {
  left: 40%;
}

.tabs-container .switch-container.active-mobile .switch-button {
  left: 60%;
}

.tabs-container .switch-container.active-internet-connectivity .switch-button {
  left: 20%;
}

.tabs-container .switch-container.active-commercial-tv .switch-button {
  left: 80%;
}

.tabs-container .switch-container.active-infrastructure .switch-button {
  left: 0;
}

.tabs-container .bottom-div {
  width: 100%;
  border-radius: 24px;
  background: #f9fafb;
  padding: 2.188rem;
}

.tabs-container .child-div {
  display: none;
}

.tabs-container .child-div.active {
  display: block;
}

.tab-section:first-child {
  margin-top: 3%;
}

.tab-section {
  margin-bottom: 3%;
}

.tab-section:last-child {
  margin-bottom: 0;
}

.tab-section > h3 {
  color: var(--primary-color);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem; /* 150% */
  letter-spacing: -0.64px;
}

.tab-section > h4 {
  opacity: 0.7;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.625rem;
  letter-spacing: 0.18px;
  opacity: 0.7;
}
.tab-section > ul {
  margin-left: 0;
  padding-left: 0;
}

.tab-section > ul > li {
  opacity: 0.7;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem;
  letter-spacing: 0.18px;
  list-style-type: none; /* Hides the default bullet point */
  margin-left: 0; /* Removes the left margin */
  padding-left: 1.5rem; /* Optional: Add some padding for the custom marker */
  position: relative; /* To position the custom marker */
  margin-top: 2%;
}

.tab-section > a {
  display: inline-block;
  text-decoration: none;
  padding: 1.5% 9%;
  transition: all 200ms ease-in-out;
  font-size: 0.92rem;
  color: var(--primary-color);
  border-radius: 1.5rem;
  border: 0.063rem solid var(--primary-color);
  background: transparent;
  position: relative;
}

.tab-section > a:hover {
  background-color: var(--primary-color);
  color: var(--bg-white);
}

.tab-section > a:hover::after {
  color: var(--bg-white);
}

.tab-section > a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.tab-section > ul > li:first-child {
  margin-top: 0;
}

.tab-section > ul > li::marker {
  content: ""; /* Hides the default marker */
}

.tab-section > ul > li::before {
  content: "•"; /* Adds a generic bullet as a custom marker */
  color: #000; /* Set the color of the custom marker */
  position: absolute;
  left: 0; /* Position the custom marker */
}

.tab-section > p {
  color: var(--rounded-background);
  font-size: 1rem;
  font-style: normal;
  font-weight: 450;
  line-height: 1.9rem; /* 144.444% */
  letter-spacing: 0.18px;
  opacity: 0.7;
}

.switch {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch-container {
  width: 30%;
  max-width: 1200px;
  height: 64px;
  border-radius: 100px;
  border: 1px solid rgba(229, 229, 229, 0.5);
  background: #f9fafb;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.switch-button {
  width: 50%;
  height: 56px;
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--Aliv-Business-Red, #ff6c36);
  position: absolute;
  left: 0;
  top: 4px;
  transition: left 0.3s;
  z-index: 1;
}

.switch-container.active .switch-button {
  left: 50%;
}

.switch-label {
  width: 50%;
  text-align: center;
  z-index: 2;
  color: #000;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.switch-container.active .switch-label.right {
  color: white;
}

.switch-container:not(.active) .switch-label.left {
  color: white;
}

.bottom-div {
  width: 100%;
  transition: all 0.3s ease;
}

.child-div {
  display: none;
}

.child-div.active {
  display: block;
}

.black-rounded {
  --border-radius: 20px;
  width: 90%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 5% auto 0 auto;
}

.black-bg-biab > p {
  color: var(--text-white);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.black-bg-biab > p > span {
  color: var(--primary-color);
}
.black-bg-biab__text > p {
  color: var(--text-white);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 450;
  line-height: 2.2rem; /* 30px */
  letter-spacing: 0.006rem;
  opacity: 0.7;
}

.black-rounded-line {
  --local-opacity-white: #eaecf0;
  opacity: 0.5;
  background: var(--local-opacity-white);
  border: 1px solid var(--local-opacity-white);
}
.black-rounded-video {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  width: 100%; /* Adjust based on your needs */
}

.black-rounded-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This will ensure the poster image covers the whole container */
  border-radius: 10px;
}
.black-carousel {
  background-image: url("../assets/frame-34.svg");
  background-position: right 30px bottom 30px;
  background-repeat: no-repeat;
  background-size: 10%; /* Adjust the size of the background image */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%; /* Ensures full width */
  height: auto; /* Adjusts height based on content */
}

.black-carousel-container {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  position: relative;
}

.black-carousel-carousel {
  display: flex;
  transition: transform 0.3s ease;
  cursor: grab;
}

.black-carousel-item {
  min-width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid transparent;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.black-carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.black-indicator {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.black-indicator.active {
  background-color: #333;
}

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  padding: 20px;
  border-radius: 10px;
  width: 100%; /* Adjusted to take full width of the container */
  text-align: center;
}

.testimonial-heading {
  color: var(--Base-White, #fff);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 450;
  line-height: 3.3rem;
  letter-spacing: -0.72px;
}

.testimonial-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.testimonial-name {
  color: var(--Base-White, #fff);
  text-align: center;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem;
}

.testimonial-position {
  color: var(--Gray-200, #eaecf0);
  text-align: center;
  font-size: 0.938rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  margin-bottom: 0.938rem;
}

.testimonial-rating {
  display: flex;
  justify-content: center;
}

.star {
  font-size: 1.2rem;
  color: #ffcc00; /* Color for the stars */
  margin: 0 2px;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 7px;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.3; /* Visible initially */
  transition: opacity 0.3s ease;
  border-radius: 23px;
  pointer-events: none; /* Prevent overlay from interfering with video click events */
}

.play-pause-btn {
  width: 6.063rem;
  height: 6.063rem;
  background: rgba(255, 255, 255, 0.3); /* Light transparent background */
  opacity: 1.4;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0.1rem;
  font-size: 2rem; /* Adjust size as needed */
  color: white;
  border-radius: 50%; /* Make the button round */
  display: flex;
  justify-content: center;
  align-items: center;
}

.black-rounded-video video {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.black-rounded-video:hover .video-overlay {
  opacity: 1; /* Show overlay when hovering over the video */
  pointer-events: auto; /* Allow interaction */
}

/* Fullscreen button */
.black-rounded-video .fullscreen-btn {
  position: absolute;
  bottom: 32px;
  right: 25px;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 3;
  transition: background 0.3s ease;
}

/* Change button appearance on hover */
.fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #000;
}

.video-playing .video-overlay {
  opacity: 0; /* Hide overlay when video is playing and not hovered */
}

.video-playing:hover .video-overlay {
  opacity: 1; /* Show overlay when hovering over a playing video */
  pointer-events: auto; /* Allow interaction */
}

/* Styling for testimonial video section specifically */
.testimonial-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* Cover the entire video */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.3; /* Semi-visible initially */
  transition: opacity 0.3s ease;
  border-radius: 0px;
  pointer-events: none; /* Prevent overlay from interfering with video click events */
  z-index: 2; /* Ensure overlay is on top of the video */
}

/* Custom play/pause button for testimonial video */
.testimonial-play-pause-btn {
  width: 6rem;
  height: 6rem;
  background: rgba(255, 255, 255, 0.3); /* Light transparent button */
  border: none;
  cursor: pointer;
  outline: none;
  font-size: 2.5rem; /* Adjust size for icon visibility */
  color: white;
  border-radius: 50%; /* Circular button */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease; /* Smooth transition when button is hovered */
}

/* Button hover state */
.testimonial-play-pause-btn:hover {
  background: rgba(255, 255, 255, 0.6); /* Slightly more visible on hover */
  color: #000; /* Change icon color to black on hover */
}

/* Styling the testimonial video itself within the container */
.testimonial-video {
  width: 100%;
  height: 100%;
  border-radius: 0px; /* Softer border radius for the video */
  z-index: 1;
  position: relative;
}

/* Overlay appears fully when the testimonial video is hovered */
.testimonial-video-content:hover .testimonial-video-overlay {
  opacity: 1; /* Make overlay fully visible */
  pointer-events: auto; /* Enable interaction with the overlay */
}

/* Hide overlay when the testimonial video is playing */
.testimonial-video-playing .testimonial-video-overlay {
  opacity: 0; /* Hide the overlay */
  pointer-events: none; /* Prevent interaction while video is playing */
}

/* Show overlay when hovering over a playing testimonial video */
.testimonial-video-playing:hover .testimonial-video-overlay {
  opacity: 1; /* Show overlay again */
  pointer-events: auto; /* Allow interaction */
}

/* Styling for the fullscreen button at the bottom-right of the video */
.testimonial-fullscreen-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.3); /* Light transparent background */
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.5rem; /* Icon size */
  z-index: 3; /* On top of video */
  transition: background 0.3s ease;
}

/* Change button appearance on hover */
.testimonial-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.6); /* More visible on hover */
  color: #000; /* Change icon color */
}

/* Ensure responsive design for smaller screens */
@media (max-width: 768px) {
  .testimonial-play-pause-btn {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem; /* Scale button size down for mobile */
  }

  .testimonial-video {
    border-radius: 10px; /* Adjust border radius for mobile */
  }
}

.pricing {
  margin-top: 5%;
}

.pricing-category {
  color: var(--primary-color);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 150% */
  display: inline-block;
  margin-bottom: 2%;
}

.pricing-title {
  color: var(--Gray-900, #101828);
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.75rem; /* 125% */
  letter-spacing: -0.96px;
}

.pricing-top-text {
  color: var(--Gray-600, #475467);
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 450;
  line-height: 1.7; /* 120% */
  opacity: 0.7;
  max-width: 600px;
}

.addons-heading {
  color: #000;
  text-align: center;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 43.2px */
}

.addons-description {
  color: var(--Gray-600, #475467);
  text-align: center;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 450;
  line-height: 1.5rem;
  opacity: 0.7;
  max-width: 900px;
}

.addon-col__heading {
  color: var(--Aliv-Business-Black, #000);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; /* 150% */
}

.addon-col__list {
  padding-left: 0;
  margin-left: 0;
}
.addon-col__list > li {
  opacity: 0.7;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem;
  letter-spacing: 0.18px;
  list-style-type: none; /* Hides the default bullet point */
  margin-left: 0; /* Removes the left margin */
  padding-left: 0; /* Optional: Add some padding for the custom marker */
  position: relative; /* To position the custom marker */
}

.addon-col__list > li::marker {
  content: ""; /* Hides the default marker */
}

.addon-col__link {
  padding: 1.5% 8% 1.5% 0;
  text-decoration: none;
  color: var(--primary-color);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  position: relative;
}
.addon-col__link::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--primary-color);
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.solution {
  min-height: 437px;
  background-image: url("../assets/lines.png");
  background-position: top 0px right 70px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.solution-small-heading {
  color: var(--primary-color);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 120% */
}

.solution-heading {
  color: var(--Aliv-Business-White, #fff);
  font-size: 3.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.solution-description {
  color: var(--Aliv-Business-White, #fff);
  font-size: 1rem;
  font-style: normal;
  font-weight: 450;
  line-height: 150%; /* 30px */
  letter-spacing: 0.1px;
  opacity: 0.8;
}

.solution-link {
  display: inline-block;
  padding: 1.5% 3%;
  text-decoration: none;
  color: var(--text-white);
  background: var(--primary-color);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  position: relative;
  max-width: 40%;
  border-radius: 1.5rem;
  transition: all 0.3s ease;
}
.solution-link:hover {
  background: var(--text-white);
  color: var(--primary-color);
}

.solution-link:hover::after {
  color: var(--primary-color);
}
.solution-link::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  margin-left: 4%;
  font-weight: 600;
  color: var(--text-white);
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.case-study-sm-heading {
  color: var(--Aliv-Business-Black, #000);
  font-size: 0.813rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.625px;
  text-transform: uppercase;
  opacity: 0.5;
}
.case-study-lg-heading {
  color: var(--Aliv-Business-Black, #000);
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.75rem;
  letter-spacing: -1.8px;
}

.case-study-text {
  color: var(--Aliv-Business-Black, #000);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 170.588% */
  letter-spacing: -0.2px;
  opacity: 0.7;
}

.case-study-client-name,
.case-study-since-year {
  color: var(--Aliv-Business-Black, #000);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.75rem; /* 137.5% */
  letter-spacing: -1.2px;
}

.testimony-section {
  width: 100%;
  margin: 30px auto;
  border-radius: 8px;
  overflow: hidden;
}

/* .d-flex {
    display: flex;
    flex-wrap: wrap;
} */

.testimony-content {
  background-color: #000; /* Black background for the testimonial content */
  color: #fff; /* White text for contrast */
  padding: 4rem 1.875rem;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}

.testimonial-rating {
  margin-bottom: 10px;
}

.star {
  font-size: 1rem;
  color: #ffcc00; /* Gold color for stars */
  margin-right: 5px;
}

.testimony {
  color: var(--Base-White, #fff);

  /* Display md/Medium */
  font-family: Inter;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
  letter-spacing: -0.72px;
}

.e-testimonial-name {
  color: var(--Base-White, #fff);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem; /* 155.556% */
}

.e-testimonial-position {
  color: var(--primary-color);

  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}

.video-content {
  background-color: #fff; /* Optional, to contrast with the dark testimonial section */
}

.video-content > video {
  width: 100%;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .testimony-content,
  .video-content {
    padding: 20px;
  }

  /* .d-flex {
        flex-direction: column;
    } */
}

.deal-details > ul {
  list-style-type: none;
}

.deal-details > ul > li {
  margin-bottom: 1rem;
}
.btn-featured-down {
  position: relative;
  text-decoration: none;
  border: thin solid var(--primary-color);
  color: var(--primary-color);
  display: block;
  max-width: 250px;
  max-height: 50px;
  padding: 0.5em 3em;
  transition: all 0.3s ease-in-out;
}

.btn-featured-down > i {
  position: absolute;
  right: 24px;
  top: 15px;
  font-size: 3rem;
}
.btn-featured-down:hover {
  background: var(--primary-color);
  color: white;
}
.btn-featured-down .chevron-icon {
  transition: transform 0.3s ease;
}
.rotate {
  transform: rotate(180deg);
}
.deal-details {
  max-height: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  opacity: 0;
}
.deal-details.show {
  max-height: 500px; /* or a value that fits your content */
  opacity: 1;
}

.location-form-hero {
  background: var(--primary-color);
  height: max(300px, 30vh);
}

.floating-input {
  position: relative;
}

.floating-input > input {
  width: 100%;
  height: 64px;
  border-radius: 6px;
  font-size: 1rem;
  padding: 0 0.98rem;
  border: 1px solid var(--border-color);
  background: transparent;
  outline: none;
  color: var(--did-you-know-text);
}
.floating-input label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--did-you-know-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  pointer-events: none;
  transition: all 0.3s ease;
}

.floating-input > input:focus {
  border-color: var(--primary-color);
}

.floating-input > input:focus ~ label,
.floating-input > input:valid ~ label {
  top: 0;
  left: 15px;
  font-size: 0.8rem;
  color: var(--primary-color);
  padding: 0 0.98rem;
  background: white;
}

.floating-select {
  position: relative;
}

.floating-select-label {
  color: var(--did-you-know-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  margin-left: 5px;
  margin-bottom: 0.5rem;
}
.floating-select > select {
  width: 100%;
  height: 64px;
  border-radius: 6px;
  font-size: 1rem;
  padding: 0 0.98rem;
  border: 1px solid var(--border-color);
  background: transparent;
  outline: none;
  color: var(--did-you-know-text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.floating-select > label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--did-you-know-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  pointer-events: none;
  transition: all 0.3s ease;
  background: white;
  padding: 0 0.5rem;
}

.floating-select > select:focus {
  border-color: var(--primary-color);
}

.floating-select > select:focus + label,
.floating-select > select:valid + label {
  top: 0;
  font-size: 0.8rem;
  color: var(--primary-color);
}

.floating-select::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--did-you-know-text);
}

.floating-select > select:focus::after {
  color: var(--primary-color);
}
.form-check-label {
  color: var(--did-you-know-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.floating-input.is-invalid > input,
.floating-select.is-invalid > select,
.form-check.is-invalid > input[type="checkbox"] {
  border: 1px solid red;
}

.floating-input.is-invalid > input ~ label,
.floating-select.is-invalid > select ~ label,
.form-check.is-invalid > input[type="checkbox"] ~ label {
  color: red;
}

#confirm-button-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#confirm-button {
  display: none;
  width: 100%;
  max-width: 350px;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: 0.02rem;
}

.media-and-press__heading {
  font-size: clamp(1.5rem, 2.5vw, 3.5rem);
  font-weight: 600;
  color: var(--primary-color);
  line-height: 3rem;
  letter-spacing: 0.02rem;
}

.media-and-press__description {
  text-align: center;
  font-family: var(--font-family);
  font-size: 1.25;
  font-style: normal;
  font-weight: 450;
  line-height: 150%;
  letter-spacing: 0.1px;
  max-width: 660px;
}

.media-and-press__hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  max-height: 782px;
  transition: all 0.3s ease-in-out;
}
.media-and-press__hero > img {
  width: 100%;
  height: auto;
}

.media-and-press__hero-media-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.media-and-press__hero-media-info-heading {
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text-white);
  line-height: 2rem; /* 133.333% */
}

.media-and-press__hero-media-info-description {
  color: var(--text-white);
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}

.author-avatar {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 200px;
  background: var(
    --avatar-user-square-amlie-laurent-neutral-background,
    url(assets/Avatar.png) lightgray 50% / cover no-repeat,
    #e0e0e0
  );
}

.author-name {
  color: var(--text-white);
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}

.author-info-written-by {
  color: var(--Base-White, #fff);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}

.publish-info-published-on {
  color: var(--text-white);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem; /* 142.857% */
}
.publish-info-date {
  color: var(--Base-White, #fff);

  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 150% */
}

.media-file-under {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.media-file-under__title {
  color: var(--text-white);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem; /* 142.857% */
}

.media-file-under__tags {
  display: flex;
  gap: 0.5rem;
}

.media-file-under__tags-0{
  display: flex;
  text-wrap: nowrap;
}

.article-type-link:focus-visible {
  box-shadow: none !important;
}

div[id^="news-container-tags"] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 2px 10px 2px 0px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border: 1.5px solid var(--text-white);
  color: var(--text-white);
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.media-file-under__tag {
  display: flex;
  gap: 0.5rem;
  padding: 2px 10px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border: 1.5px solid var(--text-white);
  color: var(--text-white);
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.media-file-under__tag-1 {
  text-wrap: nowrap;
  display: inline-flex;
  padding: 2px 10px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--Blue-light-200, #b9e6fe);
  background: var(--Blue-light-50, #f0f9ff);
  color: #026aa2;
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem !important;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.media-file-under__tag-2 {
  text-wrap: nowrap;
  display: inline-flex;
  padding: 2px 10px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--Pink-200, #fcceee);
  background: var(--Pink-50, #fdf2fa);
  color: #c11574;
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.media-file-under__tag-3 {
  text-wrap: nowrap;
  display: inline-flex;
  padding: 2px 10px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--Success-200, #abefc6);
  background: var(--Success-50, #ecfdf3);
  color: #067647;
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.media-file-under__tag-4 {
  text-wrap: nowrap;
  display: inline-flex;
  padding: 2px 10px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border-radius: 16px;
  border: 1px solid var(--Brand-200, #e9d7fe);
  background: var(--Brand-50, #f9f5ff);
  color: #6941c6;
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.loader-container {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  /** make transparent white bg**/
  background-color: rgba(255, 255, 255, 0.5);
}

.media-and-press-article-card:not(.article-all):not(.article-category-featured){
  display: flex;
  gap: 1rem;
}
.media-and-press-article-card-link{ text-decoration: none !important; }

.media-and-press__hero.loading {
  min-height: 582px;
  z-index: 1;
}

.media-and-press__hero.loading > img[id="hero-media-image"] {
  filter: blur(1px);
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: auto;
  min-height: 582px;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid var(--primary-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: spin 1s linear infinite;
  transition: all 0.3s ease-in-out;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.media-and-press-tab__heading {
  color: var(--Gray-900, #101828);
  font-family: var(--font-family);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-style: normal;
  font-weight: 700;
  line-height: 2rem; /* 133.333% */
}

div[id^="news-container-image"]:not(.small-image) {
  width: 100%;
  height: auto;
  max-height: 248px;
  border-radius: 20px;
  overflow: hidden;
}

div[id^="news-container-image"]:not(.small-image) > img {
  width: 100%;
  height: auto;
  min-height: 248px;
}

/* div[id^="news-container-image"].small-image {
  width: 320px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
}

div[id^="news-container-image"].small-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* Style the container */
div[id^="news-container-image-"].small-image {
  width: 320px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the image to fit within the container */
div[id^="news-container-image-"].small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  border-radius: 20px;
}

h4[id^="news-container-heading"] {
  color: var(--Gray-900, #101828);
  /* Display xs/Semibold */
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 133.333% */
}

h4[id^="news-container-heading"]:not(.small-image-heading) {
  color: var(--Gray-900, #101828);
  /* Display xs/Semibold */
  font-family: var(--font-family);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem; /* 133.333% */
}

span[id^="news-container-author-and-date-"], .article-author{
  display: block;
  color: var(--Brand-700, #6941c6);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem; /* 142.857% */
}

p[id^="news-container-description-"] {
  overflow: hidden;
  color: var(--Gray-600, #475467);
  text-overflow: ellipsis;
  /* Text md/Regular */
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  margin: 0;
}

.media-file-under__tag-1 {
  color: var(--Gray-900, #101828);
  font-family: var(--font-family);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 133.333% */
}

div[id^="news-container-content-"]:not(.featured-article-content){
  max-width: 320px;
}

.media-and-press-article-card-link{
  text-decoration: none !important;
}
.media-and-press-article-card article-all{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
div[id^="all-articles-container-image"]{
  width: 100%;
  height: auto;
  max-height: 200px;
  border-radius: 20px;
  overflow: hidden;
}
div[id^="all-articles-container-image"] > img{
  width: 100%;
  height: auto;
  min-height: 200px;
}
div[id^="all-articles-container-content"]{
  display: flex;
  flex-direction: column;
}
div[id^="all-articles-container-author-and-date"]{
  display: block;
  color: var(--Brand-700, #6941c6);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem; /* 142.857% */
}
h4[id^="all-articles-container-heading"]{
  color: var(--Gray-900, #101828);
  /* Display xs/Semibold */
  font-family: var(--font-family);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem; /* 133.333% */
}
p[id^="all-articles-container-description"]{
  overflow: hidden;
  color: var(--Gray-600, #475467);
  text-overflow: ellipsis;
  /* Text md/Regular */
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
div[id^="all-articles-container-tags"]{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 2px 10px 2px 0px;
  margin-top: 5px;
  align-items: center;
  border-radius: 16px;
  border: 1.5px solid var(--text-white);
  color: var(--text-white);
  text-align: center;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  cursor: pointer;
}

.articles-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6rem;
  padding: 0;;
}

#pagination-ul{
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0;
}

 .pagination-button{
  border: none;
  background: none;
  cursor: pointer;
  color: var(--Gray-600, #475467);
  /* Text sm/Semibold */
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}

/** Put arrow in front of button **/
.pagination-button-previous::before{
  content: '←';
  margin-right: 0.5rem;
}
.pagination-button-next::after{
  content: '→';
  margin-left: 0.5rem;
}


/* Styles for pagination buttons */


.pagination-button:hover {
  background-color: #e6e6e6;
}

.pagination-button:disabled {
  background-color: transparent;
  cursor: not-allowed;
}

/* Inner div styled as a list for pagination numbers */
.pagination-inner {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0 10px;
  gap: 8px;
}

/* Styles for pagination items (li elements) */
.pagination-inner li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pagination-inner li:hover {
  background-color: #e6e6e6;
  border-color: #bbb;
}

/* Active page style */
.pagination-inner li.active {
  font-weight: bold;
  border-radius: 8px;
  background: var(--Gray-50, #F9FAFB);  
  color: #182230;

}

/* Ellipsis style */
.pagination-inner span {
  padding: 8px;
  font-size: 1.2em;
  color: #888;
}

.brand-section-heading,.brand-download-section-heading{
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-color);
}

.brand-download-section-heading{
  margin-top: 6rem;
}

.branding-fonts img{
  width: 100%;
}

.branding-colors img{
  width: 50%;
}

.aliv-branding-download-btn{
  margin-top: 7rem;
}

.article-image{
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 20px;
  overflow: hidden;
}
.article-image > img{
  width: 100%;
  height: auto;
  min-height: 400px;
}

@media screen and (max-width: 48rem) {
  #confirm-button {
    max-width: 400px;
  }

  .header > .navbar {
    height: 90px;
  }

  .navbar-collapse {
    padding: 0 8%;
  }

  .col {
    flex: 1 0 100%;
  }

  .hero_column_image > img {
    width: 100%;
  }

  .dropdown-menu {
    border: none !important;
  }

  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .dropdown-menu {
    position: relative !important;
  }

  .navbar-nav > .nav-item {
    min-height: 4rem;
    height: auto;
    padding: 5% 0;
    border-top: 1px solid;
    border-bottom: 1px solid var(--border-color);
  }

  .navbar-nav > .nav-item:nth-last-of-type(1) {
    border: none;
  }

  .nav-link {
    height: inherit;
    padding: 0 3% !important;
    position: relative;
  }

  .btn_cta_container {
    width: 100%;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
    margin-bottom: 13%;
  }

  .btn_cta_container > a {
    width: 90% !important;
    margin: 2% 0;
    max-height: 45px !important;
  }

  .btn-login {
    max-width: auto;
  }

  .menus.left {
    background: var(--site-gray);
    width: 100%;
  }

  .menus-heading {
    color: var(--primary-color);
    margin: 0 0 2% 0;
    display: none;
  }

  .menus_holder {
    width: 100%;
    flex-direction: column;
  }

  .menus {
    width: 100%;
  }

  .has_menu:after {
    position: absolute;
    right: 30px;
    top: 5px;
  }

  .heading-text__container {
    margin-top: 0;
  }

  .larger-break {
    font-size: 1.8rem;
    line-height: 2.6rem;
    text-align: center;
  }

  .smaller-text {
    margin: 5% 0 0 0 !important;
  }

  .aliv-business_sponsors {
    margin: 10% auto;
    display: flex;
    justify-content: center;
  }

  .aliv-business_sponsors img {
    width: 60%;
    margin-top: 2%;
  }

  .hero-image__container > img {
    min-height: 200px;
  }

  .hero_cta .btn-theme-primary {
    width: 60%;
    padding: 4% 0 !important;
  }

  .did-you-know {
    margin: 3% 5%;
  }

  .did-you-know__image {
    margin-top: 5% !important;
  }

  .did-you-know_desc {
    padding: 0 4% !important;
  }

  .promo-description__text {
    font-size: 1.2rem;
    line-height: 2.3rem;
  }

  .how-it-works-bottom {
    padding: 2%;
  }

  .how-it-works__rounded {
    width: auto !important;
    margin: 2% 0;
  }

  .contact-us__heading {
    font-size: 1.2rem;
    padding: 0 10%;
  }

  .contact-type-column {
    margin: 13% 0;
  }

  .contact-type__icon {
    margin-bottom: 1rem;
  }

  .contact-form {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 0 0;
  }

  .submit-container {
    flex-direction: column-reverse;
  }

  .button-container {
    width: 100%;
    margin: 2% 0 0 0;
  }

  .agreement-text {
    width: 100%;
    margin: 0 0 0 0;
  }

  /* .footer {
        padding: 0 3%;
    } */

  .footer-text-container > p {
    max-width: 400px;
  }

  .footer-text {
    flex-direction: column;
  }

  .footer-text-cta {
    width: 100%;
    margin: 5% 0;
  }

  .footer-links_menu {
    margin: 5% 0;
  }

  .footer-links_menu > ul > li {
    padding: 3% 0;
  }

  .copy-right-container > div {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .copy-right-container__text {
    width: 100%;
    text-align: center;
    margin: 3% 0 0 0;
  }

  .social-links {
    width: 100%;
    justify-content: center;
    margin: 1% 0 2% 0;
  }

  .reverse-column {
    flex-direction: column-reverse !important;
    margin-bottom: 3%;
  }

  .hero_column_image {
    justify-content: start !important;
    margin-bottom: 6%;
  }

  .image {
    max-width: 100% !important;
    height: auto !important;
  }

  .business-plan-box-mobile {
    justify-content: center;
    align-items: center;
  }

  .help {
    width: 90%;
  }

  .get-in-touch {
    width: 90%;
  }

  .plans-tabs-nav {
    overflow-y: hidden;
    overflow-x: scroll !important;
    flex-wrap: nowrap !important;
  }

  .plans-tabs-nav > li {
    min-width: 150px;
  }

  .plans-mobile-and-voice {
    min-height: auto;
  }

  .callback-image {
    width: 100%;
  }

  .disable-row {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: unset;
  }

  .disable-row .col-12 {
    flex: auto;
    width: 100%;
  }

  .disable-row > * {
    width: auto !important;
  }

  .custom-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .half-col-50 {
    width: 100%;
  }

  .half-col-75 {
    width: 100%;
  }

  .custom-image-50 {
    width: 100%;
    height: auto;
  }

  .custom-image-100 {
    width: 200px !important;
    height: auto;
  }

  .carousel-indicators {
    z-index: 0 !important;
  }

  #map {
    height: 400px;
    /* Adjust height for smaller screens */
  }

  .director-image {
    width: 100%;
    height: auto;
  }

  .switch-label {
    font-size: 0.75rem;
  }

  .play-pause-btn {
    width: 5rem;
    height: 5rem;
  }

  .solution {
    background-position: top 0px right 0px;
  }

  .solution-small-heading {
    margin-top: 10%;
  }
  .solution-link {
    max-width: 60%;
  }

  .footer-logo__container {
    width: 50%;
  }

  .featured-image-container {
    height: auto;
    min-height: auto;
  }

  .video-modal-body {
    max-height: 350px;
  }
  .video-modal-close-btn {
    margin-top: 0px;
    width: 100% !important;
  }

  .business-logo-container {
    width: 100%;
  }
  .business-logo-container > img {
    width: 30%;
  }

  .switch-container {
    width: 95%;
  }

  .media-and-press__hero {
    max-height: 600px;
  }

  .media-and-press-article-card:not(.article-all):not(.article-category-featured) {
    display: flex;
    flex-direction: column;
  }
  .hero-media-container{
    margin-inline: auto !important;
  }
  .article-type-link {
    width: 100% !important;
    padding: 5px 15px !important;
  }

  div[id^="news-container-image-"].small-image {
    width: 100% !important;
    
  }
  .articles-container{
    width: 100% !important;
    padding: 0 !important;
    margin-inline: auto !important;
  }
  .wide-nav{
    width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .wide-nav > li{
    min-width: 350px;
    padding: 20px 0px !important;
    margin-bottom: 12px;
  }

  div[id^="all-articles-container-image"] {
    height: auto;
    max-height: 142px;
  }
}

@media screen and (min-width: 48.063rem) and (max-width: 75rem) {
  .business-plan-box-mobile {
    justify-content: center;
    align-items: center;
  }

  .image {
    max-width: 100% !important;
    height: auto !important;
  }

  .reverse-column {
    flex-direction: column-reverse !important;
    margin-bottom: 3%;
  }

  .reverse-column > div {
    width: 100%;
  }

  .btn-login {
    max-width: auto;
  }

  /* .row {
        flex-direction: column;
        align-items: center;
    } */

  .hero_column_image {
    justify-content: start !important;
    margin-bottom: 6%;
  }
  .hero_column_image > img {
    width: 100%;
  }

  .hero_cta .btn-theme-primary {
    width: 60%;
    padding: 4% 0 !important;
  }

  .col-md-7,
  .col-md-5 {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
  }

  .collapse:not(.show) {
    display: none !important;
  }

  .navbar-expand-lg .navbar-toggler {
    display: block;
  }

  .get-in-touch {
    width: 90%;
  }

  .plans-tabs-nav {
    overflow-y: hidden;
    overflow-x: scroll !important;
    flex-wrap: nowrap !important;
  }

  .plans-tabs-nav > li {
    min-width: 150px;
  }

  .plans-mobile-and-voice {
    min-height: auto;
  }

  .callback-image {
    width: 100%;
  }

  .disable-row {
    display: flex;
    flex-wrap: wrap !important;
  }

  .disable-row {
    display: flex;
    flex-wrap: wrap !important;
  }
  .disable-row .col {
    flex: 1 0 100%;
    margin: 2% 0 0 0 !important;
  }

  .disable-row .col:nth-child(1) {
    margin-top: 0;
  }

  .disable-row .col-12 {
    flex: auto;
    width: 100%;
  }

  .disable-row > * {
    width: auto !important;
  }

  .custom-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .half-col-50 {
    width: 100%;
  }

  .half-col-75 {
    width: 100%;
  }

  .custom-image-50 {
    width: 100%;
    height: auto;
  }
  .business-plan-box {
    width: 100%;
  }

  .custom-image-100 {
    width: 200px !important;
    height: auto;
  }

  .carousel-indicators {
    z-index: 0 !important;
  }

  .director-image {
    width: 100%;
    height: auto;
  }

  .switch-label {
    font-size: 0.75rem;
  }
  .play-pause-btn {
    width: 5rem;
    height: 5rem;
  }
  .solution {
    background-position: top 0px right 0px;
  }

  .solution-small-heading {
    margin-top: 10%;
  }

  .solution-link {
    max-width: 60%;
  }
  .featured-image-container {
    height: auto;
    min-height: auto;
  }
}