/* ==========================================================================
   1. GLOBAL RESETS
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
         2. ROOT VARIABLES
         ========================================================================== */
:root {
  --primary-orange: hsl(25, 100%, 50%);
  --primary-dark-orange: hsl(25, 100%, 45%);
  --primary-black: hsl(220, 9%, 19%);
  --primary-gray: hsl(0, 0%, 40%);
  --primary-gray-lighter: hsl(0, 0%, 58%);
  --primary-light-blue: hsla(225, 44%, 96%, 1);
  --secondary-black: hsla(224, 11%, 20%, 1);
  --tertiary-black: hsl(0, 0%, 20%);
  --border: 1px solid hsla(0, 0%, 0%, 0.1);
  --transparent-black-65: hsla(0, 0%, 100%, 0.65);
  --transparent-black-60: hsla(0, 0%, 100%, 0.6);
  --transparent-black-10: hsla(0, 0%, 100%, 0.1);

  --testimonial-upper-padding: 1.875rem;
  --form-border: hsla(0, 0%, 20%, 0.1);
  --form-placeholder: hsl(210, 4%, 55%);
  --error-text: rgb(211, 47, 47);
}

/* ==========================================================================
         4. BASE ELEMENT STYLES
         ========================================================================== */
button,
input,
optgroup,
select,
textarea {
  padding: 0;
  margin: 0;
  border: none;
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-variation-settings: inherit;
  font-weight: inherit;
  line-height: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
  transition: all 0.3s ease;
}

svg {
  height: 1em;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

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

/* ==========================================================================
         5. UTILITY CLASSES
         ========================================================================== */
.new-home-page header a {
  color: inherit !important;
  @media screen and (max-width: 880px) {
    height: 33px;
    position: relative;
    top: 3px;
  }
}

.spread-text {
  letter-spacing: 2px;
}

.bg-primary-orange {
  background: var(--primary-orange) !important;
}

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

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

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

.fs-mini {
  font-size: 0.625rem;
}

.fs-0\.5 {
  font-size: 2rem;
}

.fs-0\.875 {
  font-size: 1.75rem;
}

.fs-0\.75 {
  font-size: 1.5rem;
}

.fs-7 {
  font-size: 0.875rem;
}

.fs-8 {
  font-size: 0.75rem;
}

.g-2\.5 {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
}

.g-6 {
  --bs-gutter-x: 4rem;
  --bs-gutter-y: 4rem;
}

.mt-2\.5 {
  margin-top: 0.75rem !important;
}

.pt-2\.5 {
  padding-top: 0.75rem !important;
}

.ls-1px {
  letter-spacing: -1px;
}

@media (min-width: 1200px) {
  .company-logo .container,
  .pre-header .container,
  footer .container,
  header .container {
    max-width: 71.25rem !important;
  }
}

/* Override styles in grid-container sass file from bootstrap */
/* [class^="col"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
      } */

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ==========================================================================
         6. CONTAINER STYLES
         ========================================================================== */
.container {
  max-width: 71.25rem !important;
  padding-inline: 1rem;
}

.container-fluid {
  padding-inline: 0;

  @media screen and (max-width: 768px) {
    padding-inline: 0 !important;
  }

  @media screen and (max-width: 480px) {
    padding-bottom: 1rem;
  }
}

.container--small {
  max-width: 68.25rem !important;
}

.container--smaller {
  max-width: 56.25rem !important;
}

/* Container used in the new page */
.container--smaller-2 {
  max-width: 58rem !important;
}

.container--smallest {
  max-width: 47.5rem !important;
}

/* ==========================================================================
         7. COMMON COMPONENTS
         ========================================================================== */
.learn-more-link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-orange);
  font-weight: 500;
  min-width: fit-content;
  text-transform: capitalize !important;
  transition: 0.3s ease-in-out;
}

.learn-more-link:hover {
  color: var(--primary-dark-orange);
}

.learn-more-link::after {
  content: '';
  display: inline-flex;
  background: url('../images/caret-right.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 0.75rem;
  width: 0.8125rem;
  margin-left: 3px;
}

.language-ar .learn-more-link::after {
  transform: scaleX(-1);
}

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

.circular-button {
  position: relative;
  min-width: 3rem;
  min-height: 3rem;
  background: var(--primary-orange);
  border-radius: 100%;
  transition: all 0.4s ease-out;
  margin-left: 1rem;
}

.circular-button::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: url(../images/arrow-right-new.svg);
  background-repeat: no-repeat;
  background-size: 1rem 0.5rem;
  background-position: center;
}

.circular-button:hover {
  background-color: var(--primary-dark-orange);
}

.cta-button {
  border-radius: 4px;
  transition: background-color 0.4s ease-out;
}

.cta-button:hover,
.btn-primary:hover {
  background-color: var(--primary-dark-orange) !important;
}

/* ==========================================================================
         8. HEADER SECTION
         ========================================================================== */
/* 8.1 HEADER GENERAL */
header {
  padding-inline: 2.375rem !important;
  padding-block: 1rem;
  border-bottom: 1px solid #0000001a;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 0.875rem;
  color: #000;
  box-shadow: none !important;
  position: fixed;
  width: 100%;
  z-index: 20;
  top: 1.5rem;
  transition: 0.2s ease-in-out;

  @media screen and (max-width: 768px) {
    top: 0;
    padding-inline: 1rem !important;
  }
}

#navbar.hide {
  transform: translateY(-150%);
}

header > nav {
  @media screen and (max-width: 768px) {
    padding-inline: 0 !important;
  }
}

/* 8.2 ADMIN TOOLBAR ADJUSTMENTS */
@media (max-width: 768px) {
  body.toolbar-vertical header:not(.scrolled) {
    top: 2.5rem;
    transition: all 0.3s ease;
  }
}

body.toolbar-fixed header {
  top: 4.125rem;

  &.scrolled {
    top: 2.375rem;
  }
}

@media (min-width: 976px) {
  body.toolbar-tray-open header {
    top: 8.875rem;

    &.scrolled {
      top: 7.375rem;
    }
  }
}

@media (min-width: 1226px) {
  body.toolbar-tray-open header {
    top: 6.625rem;
    &.scrolled {
      top: 4.875rem;
    }
  }
}

/* 8.3 NAVIGATION STRUCTURE */
.nav__left {
  display: flex;
  gap: 4.375rem;
  align-items: center;
  flex-shrink: 0;
}

.nav__left .logo img {
  width: 3.25rem;
  height: 2.3125rem;
}

.nav__left .main-menu {
  display: flex;
  gap: 2.25rem;
  align-items: center;
  margin-bottom: 0;

  @media screen and (max-width: 1112px) {
    gap: 1.5rem;
  }
}

.nav__left .main-menu .menu-item {
  display: flex;
  cursor: pointer;
}

.nav__left .main-menu .menu-item {
  padding: 0;
}

.nav__left .main-menu .menu-item > a,
.nav__right > a {
  color: inherit;
}

.nav__left .main-menu .menu-item:not(:nth-last-of-type(2), .rewards)::after,
.menu-item .product-list ul li::after {
  content: '';
  display: inline-flex;
  background-image: url(../images/dropdown.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 0.625rem;
  height: 0.438rem;
  margin-top: 0.313rem;
  margin-left: 0.3125rem;
  transition: transform 0.2s ease-out;
}

.language-ar .nav__left .main-menu .menu-item:not(:last-child)::after,
.language-ar .menu-item .product-list ul li::after {
  margin-left: 0;
  margin-right: 0.3125rem;
}

.menu-item .product-list ul li::after {
  background-image: url(../images/angle.svg);
  width: 0.1875rem;
  height: 0.4375rem;
}

.main-menu .menu-item:is(.about, .products):hover::after {
  transform: rotate(180deg);
}

.main-menu .menu-item {
  transition: all 0.1s ease-out;
}

.main-menu .menu-item:hover {
  color: var(--primary-gray) !important;
}

.main-menu .sub-menu a {
  color: black !important;
  transition: color 0.2s ease-out;
}

.main-menu .sub-menu a:hover {
  color: var(--primary-gray-lighter) !important;
}

.main-menu .sub-menu a:hover::after {
  background-color: var(--primary-gray-lighter) !important;
}

.nav__right {
  display: flex;
  gap: 0.75rem;

  @media screen and (max-width: 576px) {
    gap: 0.5rem;
  }
}

.nav__right .renew {
  color: white;
}

.lang-switcher .links li > a,
.translate,
.clams,
.renew {
  background: white;
  border-radius: 0.375rem;
  padding: 0.75rem;
  transition: 0.3s all;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  @media screen and (max-width: 576px) {
    font-size: 0.8rem;
  }
}

.lang-switcher .links li > a {
  padding-inline: 0;
  width: 2rem;
}

.nav__right .renew {
  color: white !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.nav__right .renew,
.nav__right .clams,
.nav__right .lang-switcher .links li > a {
  @media screen and (max-width: 880px) {
    color: var(--primary-black) !important;
    border: 1px solid var(--primary-black);
    border-radius: 0.375rem;
  }
}

/* The language switcher shows both the languages at once, show only the opposite language label */
.lang-switcher .links {
  margin-bottom: 0;
  display: grid;
  width: 2rem;
}

.lang-switcher .links > * {
  grid-area: 1 / -1;
}

/* Extra classes to override !important specificity */
.lang-switcher .region-lang-switcher .links.links.links li > a {
  position: relative;
  line-height: 1;
  width: 100%;
  text-transform: capitalize;
}

/* Arabic text has a text indent because it is replaced with an svg. */
.lang-switcher .links li[hreflang='ar'] a {
  text-indent: -10000vw;
}

body:not(:has(.language-ar)) .lang-switcher li[hreflang='en'] a {
  z-index: -10;
  pointer-events: none;
}

/* When in english page, hide english */
/* When in arabic page, hide arabic label */
body:has(.language-ar) .lang-switcher li[hreflang='ar'],
body:not(:has(.language-ar)) .lang-switcher li[hreflang='en'] {
  display: none;
}

/* For arabic label, use an svg */
body:not(:has(.language-ar)) .lang-switcher li[hreflang='ar'] a::before {
  content: '';
  display: inline-flex;
  mask-image: url(../images/ع.svg);
  mask-repeat: no-repeat;
  mask-size: 0.625rem 1rem;
  width: 0.625rem;
  height: 1rem;
  background-color: black;
}

.lang-switcher .links li > a:hover,
.translate:hover,
.clams:hover {
  background: var(--primary-black);
  color: white !important;
}

.hamburger .line {
  @media screen and (max-width: 880px) {
    background-color: var(--primary-black) !important;
  }
}

.lang-switcher .links li > a:hover::before {
  color: white;
  background-color: white !important;
}

.renew:hover {
  border: 1px solid #00000066;
  color: #000 !important;
  background: white;
}

@media screen and (max-width: 880px) {
  .renew:hover {
    background: var(--primary-black);
    color: white !important;
  }
}

@media (max-width: 992px) {
  .menu {
    display: none;
  }
}

/* 8.4 SCROLLED HEADER STATE. Always have a white background and show outlines in car page */
:is(.scrolled, body:has(.path-car)) {
  background-color: white;
  top: 0;
}

/* Also, disable transitions in the car page header */
body:has(.path-car) header {
  transition: none;
}

.nav__right button,
.nav__right > a {
  border: 1px solid transparent;
}

:is(.scrolled, body:has(.path-car)) .nav__right .lang-switcher .links > li > a,
:is(.scrolled, body:has(.path-car)) .nav__right button,
:is(.scrolled, body:has(.path-car)) .nav__right > a {
  border: 1px solid var(--primary-black);
  color: var(--primary-black) !important;
}

:is(.scollred, body:has(.path-car))
  .nav__right
  .lang-switcher
  .links
  > li
  > a:hover,
:is(.scrolled, body:has(.path-car)) .nav__right button:hover,
:is(.scrolled, body:has(.path-car)) .nav__right > a:hover {
  color: white !important;
  background-color: var(--primary-black) !important;
}

:is(.scrolled, body:has(.path-car)) .hamburger .line {
  background-color: var(--primary-black);
}

/* 8.5 DROPDOWN MENU */
.main-menu .menu-item {
  position: relative;
}

.main-menu .menu-item::before {
  content: '';
  position: absolute;
  bottom: -3rem;
  left: 0;
  width: 100%;
  background: transparent;
  height: 3rem;
  display: none;
}

.main-menu .menu-item:hover::before {
  display: block;
}

.sub-menu {
  position: absolute;
  top: 3.5em;
  border: 10px solid var(--primary-orange);
  border-radius: 8px;
  background-color: var(--primary-orange);
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  transition: all 0.3s ease-in-out;
}

.sub-menu.product-sub-menu {
  transform: translateX(-33.5%);
}

.language-ar .sub-menu.product-sub-menu {
  transform: translateX(-72%);
}

.menu-item.about:hover .sub-menu,
.menu-item.products:hover .sub-menu {
  display: block;
}

header .sub-menu a {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

header .sub-menu a::after {
  content: '';
  display: inline-flex;
  mask-image: url(../images/caret-right.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: black;
  mask-size: contain;
  width: 0.625rem;
  height: 0.5rem;
  transition: all 0.3s ease-out;
}

.language-ar header .sub-menu a::after {
  transform: scaleX(-1);
}

.about-sub-menu ul,
.sub-menu .product-list ul {
  flex-direction: column;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 400;
}

.about-sub-menu ul,
.menu-item .product-list {
  background-color: #fff;
  padding: 1.25rem 1.875rem;
  border-radius: 8px;
}

.about-sub-menu ul::before,
.sub-menu.product-sub-menu::before {
  position: absolute;
  top: -1.9rem;
  content: '';
  width: 0;
  height: 0;
  border-left: 16px solid var(--primary-orange);
  border-right: 16px solid transparent;
  border-bottom: 14px solid var(--primary-orange);
  border-top: 14px solid transparent;
  border-radius: 5px;
  rotate: 135deg;
  left: 50%;
  transform: translateX(50%);
}

.sub-menu.product-sub-menu::before {
  left: 32%;
}

.language-ar .sub-menu.product-sub-menu::before {
  left: 72%;
}

.menu-item .product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 1.25rem;
}

.product-list h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 0.875rem;
  color: #000;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
}

.hamburger-product-list h4 {
  padding: 0.9375rem 0;
  margin-bottom: 0rem;
}

.menu-item .about-sub-menu ul li,
.menu-item .product-list ul li {
  padding-bottom: 0.75rem;
}

.menu-item .about-sub-menu {
  width: 260px;
}

.product-list .car-insurance h4::before,
.product-list .life-insurance h4::before,
.product-list .health-insurance h4::before,
.product-list .life-insurance .travel::before,
.product-list .life-insurance .home-insurance::before {
  content: '';
  width: 1.4375rem;
  height: 1.25rem;
  background-image: url(../images/car.svg);
  background-repeat: no-repeat;
  display: inline-flex;
  margin-right: 0.625rem;
}

.language-ar .product-list .car-insurance h4::before,
.language-ar .product-list .life-insurance h4::before,
.language-ar .product-list .health-insurance h4::before,
.language-ar .product-list .life-insurance .travel::before,
.language-ar .product-list .life-insurance .home-insurance::before {
  margin-left: 0.625rem;
  margin-right: 0;
}

.product-list .health-insurance h4::before {
  background-image: url(../images/health.svg);
}

.product-list .life-insurance h4::before {
  background-image: url(../images/care.svg);
}

.product-list .life-insurance .travel::before {
  background-image: url(../images/flight.svg);
}

.product-list .life-insurance .home-insurance::before {
  background-image: url(../images/home.svg);
}

.product-list .life-insurance ul {
  border-bottom: 1px solid #3333331a;
}

.product-list .life-insurance .travel,
.product-list .life-insurance .home-insurance {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.9375rem 0;
  display: flex;
  align-items: center;
}

.menu-item .product-list .car-insurance,
.menu-item .product-list .health-insurance {
  border-right: 1px solid #3333331a;
}

.language-ar .menu-item .product-list .car-insurance,
.language-ar .menu-item .product-list .health-insurance {
  border-left: 1px solid #3333331a;
  border-right: 0;
}

/* 8.6 HAMBURGER MENU */
.hamburger .line {
  position: relative;
  width: 25px;
  height: 2px;
  background-color: white;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 999999;
}

.hamburger.is-active .line {
  background: black;
}

.hamburger:hover {
  cursor: pointer;
}

#hamburger-1.is-active .line:nth-child(2) {
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

#hamburger-1.is-active {
  position: absolute;
  right: 2rem;
  z-index: 999999;
}

.language-ar #hamburger-1.is-active {
  left: 1rem;
  right: inherit;
}

.hamburger-main-menu {
  position: absolute;
  top: 0;
  right: -100%;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  overflow: auto;
  padding: 50px 20px 100px;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.hamburger-main-menu.active {
  visibility: visible;
  opacity: 1;
  right: 0;
}

.hamburger-sub-menu {
  padding: 0.75rem 0;
}

.hamburger-menu {
  display: block;
  padding-left: 4px;

  @media screen and (min-width: 993px) {
    display: none;
  }
}

.hamburger-menu-item a {
  color: inherit;
}

.hamburger-menu-item.more,
.hamburger-sub-menu ul li {
  padding-bottom: 0.75rem;
}

.hamburger-menu-item.rewards {
  padding-bottom: 1.5rem;
}

.more-link {
  text-align: left;
  padding-top: 27px;
  display: inline-block;
}

.language-ar .more-link {
  text-align: right;
}

.hamburger-menu-item .about,
.hamburger-menu-item .product,
.hamburger-menu-item .contact,
.hamburger-menu-item .more,
.hamburger-menu-item .contact-us,
.hamburger-menu-item.rewards {
  font-weight: 500;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  margin: 0rem 2rem;
}

.collapsible-section.active .collapsible-content {
  max-height: 500px;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  display: none;
}

.menu-overlay.active {
  display: block;
}

/* ==========================================================================
         9. HERO BANNER SECTION
         ========================================================================== */
/* 9.1 HERO BANNER LAYOUT & BACKGROUND */
.hero-banner-section {
  background: hsla(224, 11%, 20%, 1);
}

.banner-section {
  z-index: 99;
  margin-top: -100px;
  border-radius: 8px;
  width: calc(100% - 48px);
  min-height: 100dvh;
  padding-left: 1rem;
  overflow: hidden;
  margin-inline: auto;
  background-color: #fff;

  @media screen and (max-width: 992px) {
    min-height: 0;
  }
}

.hero-black-wrapper {
  background: hsla(224, 11%, 20%, 1);
  padding: 1.5rem 1.5rem 0 1.5rem;

  @media screen and (max-width: 768px) {
    padding: 0;
  }
}

.hero-banner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: white;
  padding-top: 6.25rem;
  background-image: url('../images/hero-background.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-position-x: calc(100% + 1px);
  background-size: auto 100%;
  margin: 0;
  max-width: 1366px !important;
  border-radius: 12px;
  position: relative;
  overflow: hidden;

  @media (max-width: 768px) {
    background-position: top right;
    border-radius: 0;
  }

  @media screen and (max-width: 660px) {
    padding-inline: 1rem !important;
    background: white;
  }

  @media screen and (max-width: 880px) {
    padding-top: 5.8125rem;
    background-size: auto 90%;
    background: white;
  }

  @media screen and (max-width: 992px) {
    padding-top: 5.8125rem;
  }
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: -123px;
  width: 762px;
  height: 293px;
  background-image: url('../images/hero-wave.png');
  background-size: cover;
  background-position: center;
  z-index: 5;

  @media screen and (max-width: 1300px) {
    right: -170px;
  }

  @media screen and (max-width: 1215px) {
    right: -250px;
  }

  @media screen and (max-width: 1150px) {
    right: -300px;
  }

  @media screen and (max-width: 1050px) {
    right: -360px;
  }

  @media screen and (max-width: 992px) {
    right: -123px;
  }
}

.hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 100px;
  width: 510px;
  height: 100%;
  background-image: url('../images/peoples.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 100%;
  z-index: 10;
}

.language-ar .hero-banner::after {
  width: 525px;
}

@media screen and (max-width: 880px) {
  .hero-banner,
  .hero-banner::before,
  .hero-banner::after {
    background-image: none;
  }
}

/* 9.2 HERO BANNER CONTENT */
.rate {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: absolute;
  bottom: 37px;
  right: 48px;

  @media (max-width: 1112px) {
    position: static;
  }
}

.language-ar .rate {
  right: initial;
  left: 48px;
}

.rate img {
  height: 4.75rem;
  width: 8.125rem;
}

.hero-banner-left-column {
  position: relative;
  z-index: 17;
  border-radius: 8px 8px 0 0;

  @media screen and (max-width: 1112px) {
    padding: 1.5rem 1rem 1.5rem 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.95));
  }

  @media screen and (max-width: 768px) {
    padding-block: 1rem;
  }
}

.language-ar .hero-banner-left-column {
  @media screen and (max-width: 1112px) {
    padding: 1.5rem 0 1.5rem 1rem;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1220px) {
  .hero-banner-left-column {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-banner-left-column > div {
    margin-left: 0 !important;
  }
}

.hero-banner > .container {
  margin-left: 0;
}

.hero-banner .title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  max-width: 347px;
  mix-blend-mode: multiply;

  @media screen and (max-width: 640px) {
    font-size: 1.3rem;
  }
}

.hero-banner .title span {
  color: var(--primary-orange);
}

/* 9.3 HERO BANNER FORM */
.hero-banner .tabs-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  border-bottom: 1px solid hsla(0, 0%, 20%, 0.1);
}

.hero-banner .tabs-list .tab-item {
  flex: 1;
  text-align: center;
}

.hero-banner .tabs-list .tab-item:nth-child(4) {
  flex: 1.25;
}

.hero-banner .tabs-list .tab-item:nth-child(5) {
  flex: 1;
}

.hero-banner .form-section-wrapper {
  max-width: 31.25rem;

  @media screen and (max-width: 1200px) {
    max-width: 28rem;
  }
  @media screen and (max-width: 1112px) {
    max-width: 100%;
  }
}

.language-ar .hero-banner .form-section-wrapper {
  @media screen and (max-width: 1200px) {
    max-width: 26rem;
  }
  @media screen and (max-width: 1112px) {
    max-width: 100%;
  }
}

.hero-banner .tab-item {
  display: grid;
  align-items: flex-start;
  justify-content: center;
  justify-items: center;
  gap: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 3px solid transparent;
  grid-template-rows: 1.5rem auto;
  cursor: pointer;
  transition: border-color 0.4s ease-out;
}

.hero-banner .tab-item .image {
  transition: filter 0.4s ease-out;
}

.hero-banner .tab-item:is(:hover, .active) {
  border-bottom-color: var(--primary-orange);
}

.hero-banner .tab-item .image {
  filter: grayscale(1);
}

.hero-banner .tab-item.active .image {
  filter: grayscale(0);
}

.hero-banner .tab-item span {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.188rem;
  transition: color 0.3s ease-out;
  @media screen and (max-width: 768px) {
    font-size: 0.75rem;
    line-height: 1.1rem;
  }
}

.hero-banner .tab-item:not(.active) span {
  color: var(--primary-gray-lighter);
}

.hero-banner .tab-item.active span {
  color: hsl(0, 0%, 20%);
}

.hero-banner p {
  margin: 0;
}

.hero-banner .form-section {
  max-width: 31.25rem;
  margin-top: 2rem;
  padding-bottom: 2rem;

  @media screen and (max-width: 992px) {
    max-width: 28.125rem;
  }

  @media screen and (max-width: 768px) {
    margin-top: 1.5rem;
  }
}

.form-section.container,
.title-wrapper.container,
#navbar .container {
  padding-left: 0;
  padding-right: 0;
}

.hero-banner .form-container {
  display: grid;
  align-items: flex-start;
  margin-top: 1.5rem;

  @media screen and (max-width: 768px) {
    margin-top: 1rem;
  }
}

.hero-banner .form-container > * {
  grid-area: 1 / -1;
}

.hero-banner .form-container .single-form {
  display: none;
  opacity: 0;
  transition:
    opacity 0.1s ease-out,
    display 0s 0.1s;
}

.hero-banner .form-container .single-form:first-child {
  display: grid;
  opacity: 0;
}

.hero-banner .form-container .single-form.active {
  display: grid;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.1s ease-out;
}

.hero-banner .form-container .single-form:not(.active) {
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero-banner .form-container .single-form {
    display: grid;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition:
      opacity 0.1s ease-out,
      height 0s 0.1s;
  }

  .hero-banner .form-container .single-form.active {
    opacity: 1;
    height: auto;
    overflow: visible;
  }
}

.hero-section :is(.form-control) {
  font-size: 0.875rem;
  padding-left: 0;
}

.hero-section :is(.form-text, .form-email, .form-select) {
  outline: 0;
  border: 0;
  border-bottom: 1px solid var(--form-border);
  border-radius: 0;
}

.hero-section input::placeholder {
  color: var(--form-placeholder);
}

.hero-section form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  @media screen and (max-width: 768px) {
    gap: 0.75rem;
  }
}

.hero-section .form-item {
  margin: 0;
}

.hero-section .form-item :is(input, .select2-selection) {
  background-color: transparent;
}

.hero-section [id^='edit-heading'] {
  display: none;
}

@media screen and (max-width: 640px) {
  .hero-section .js-form-item {
    grid-column: span 2;
  }
}

.hero-section
  :is(
    .js-form-item-consent-message,
    .js-form-item-civil-id-,
    .js-form-item-name-,
    .form-actions
  ) {
  grid-column: span 2;
}

.hero-section .single-form:not(:first-child) .js-form-item-mobile-number {
  grid-column: span 2;
}

.hero-section
  .js-form-type-select
  :is(
    .select2-container,
    .selection,
    .select2-selection,
    .select2-selection__rendered,
    .select2-selection__placeholder,
    .select2-selection__arrow,
    .form-email
  ) {
  height: 100%;
}

.hero-section .form-email {
  height: 100%;
}

.hero-section .js-form-type-select .select2-selection__placeholder {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 0.875rem;
}

.hero-section fieldset :is(.fieldset-wrapper, .js-form-type-select) {
  height: 100%;
  font-size: 0.875rem;
}

.hero-section fieldset .select2-selection__rendered {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  color: var(--form-placeholder) !important;
}

.hero-section fieldset .select2-selection__rendered .select2-selection__clear {
  order: 10;
}

.hero-section .select2-selection {
  border: none;
  border-bottom: 1px solid var(--form-border);
}

.hero-section fieldset .select2-selection__arrow b {
  margin-top: -4px !important;
}

[id^='edit-consent-mess'].js-form-item-consent-message p {
  font-size: 0.6875rem !important;
  color: var(--form-placeholder);
  margin-bottom: 0;

  @media screen and (min-width: 1200px) {
    margin-right: -4.8125rem;
  }
}

.language-ar [id^='edit-consent-mess'].js-form-item-consent-message p {
  text-align: right;
  @media screen and (min-width: 1200px) {
    margin-right: 0;
  }
}

[id^='edit-consent-message'].js-form-item-consent-message a {
  color: hsl(0, 0%, 20%);
  text-decoration: underline;
}

[id^='edit-consent-message'].js-form-item-consent-message {
  margin-right: 78px;
  @media screen and (max-width: 1200px) {
    margin-right: 0;
  }
}

.language-ar [id^='edit-consent-message'].js-form-item-consent-message {
  margin-right: 0;
}

.hero-section .js-form-type-processed-text {
  grid-column: span 2;
}

.hero-section .js-form-type-processed-text .info-box-container {
  margin-bottom: 0 !important;
}

.hero-section .js-form-type-processed-text h1 {
  margin-bottom: 0 !important;
}

.hero-section .js-form-item-vehicle-plate-numbers {
  display: none;
}

.hero-section .form-actions {
  margin: 0;

  @media (max-width: 1112px) {
    justify-content: center;
  }
}

/* Terms and conditions text, applicable only in the car page for now */
body:not(:has(.path-car)) .hero-section .js-form-item-term-and-condition {
  display: none;
}

.hero-section .js-form-item-term-and-condition {
  grid-column: span 2;
  font-size: 0.875rem;
  line-height: 1;
}

.hero-section .js-form-item-term-and-condition p {
  margin-bottom: 0;
}

.hero-section .js-form-item-term-and-condition a {
  font-size: 0.6875rem;
  line-height: 1;
  text-decoration: underline;
  color: inherit;
}

.form-actions:has(.webform-button--submit) input {
  border: none;
  outline: none;
  padding-block: 1rem;
  background-color: var(--primary-orange);
  width: min(100%, 31.25rem);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent !important;
}

.form-actions:has(.webform-button--submit) input:active {
  background-color: var(--primary-dark-orange) !important;
}

.form-actions:has(.webform-button--submit) input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.hero-section .captcha {
  display: contents;
}

.hero-section .captcha__element {
  grid-column: span 2;
}

.hero-section .captcha__description {
  font-size: 0.75rem !important;
  grid-column: span 2;
  margin-top: -0.25rem !important;
  margin-bottom: 0;
}

.hero-section :is(.js-form-item-captcha-response, .captcha__description) {
  color: var(--form-placeholder);
}

.hero-section .js-form-item-captcha-response {
  display: grid !important;
  font-size: 12px !important;
  grid-template-columns: max-content max-content 4rem;
  align-items: center;
  width: fit-content !important;

  @media screen and (max-width: 768px) {
    grid-template-columns: max-content max-content auto;
  }
}

.hero-section
  .form-container
  .single-form:not(:first-child)
  .captcha__element
  div[id^='edit-captcha-response'] {
  display: none !important;
}

.hero-section .form-container .single-form:not(:first-child) .captcha__element {
  display: flex;
}

.hero-section .js-form-item-captcha-response label {
  margin-bottom: 0 !important;
}

.hero-section .js-form-item-captcha-response input {
  padding: 0 !important;
  margin: 0 0 0 0.25rem !important;
}

/* ==========================================================================
         10. INSURANCE STEPS SECTION
         ========================================================================== */
.insurance-steps {
  padding-top: 6rem;

  @media screen and (max-width: 768px) {
    padding-top: 4rem;
  }

  @media screen and (max-width: 640px) {
    padding-top: 3rem;
  }

  @media screen and (max-width: 480px) {
    padding-top: 2rem;
  }
}

.insurance-steps > .container {
  @media screen and (max-width: 768px) {
    padding-inline: 0 !important;
  }
}

.insurance-steps__main-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.insurance-steps__subtitle {
  letter-spacing: 2px;
  font-weight: 400;
}

.insurance-steps__title {
  letter-spacing: -1px;
}

.insurance-steps__inner-grid {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: center;
}

.insurance-step__icon-column {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
}

.insurance-step__icon-column::before {
  position: relative;
  content: '';
  position: absolute;
  width: 1.5px;
  height: 100%;
  left: 50%;
  background-color: hsla(0, 0%, 20%, 0.1);
}

.insurance-steps__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: white;
  border-radius: 100%;
  margin-top: 0;
  flex-basis: 2.25rem;
  font-weight: 500;
  color: hsla(0, 0%, 58%, 1);
  background: hsl(0, 0%, 98%);
  border: 1px solid hsla(0, 0%, 20%, 0.1);
}

.insurance-steps__text {
  padding: 2rem 0;
  color: var(--primary-gray-lighter) !important;
}
.insurance-steps__text .mb-2 {
  margin-bottom: 0 !important;
}
/* .insurance-steps__inner-grid:nth-child(2) .insurance-steps__text {
  padding-block: 2.75rem 1rem;
} */

/* .insurance-steps__inner-grid:last-child .insurance-steps__text {
  padding-block: 2rem 0.5rem;
} */

.insurance-steps__text span {
  color: var(--primary-gray-lighter) !important;
}

.insurance-steps__inner-grid:first-of-type
  .insurance-step__icon-column::before {
  background: var(--primary-orange);
}

.insurance-steps__inner-grid:first-of-type .insurance-steps__icon::before {
  background: var(--primary-orange);
}

.insurance-steps__inner-grid:first-of-type .insurance-steps__icon {
  background: var(--primary-orange);
  color: white;
}

.insurance-steps__inner-grid:first-of-type .insurance-steps__text {
  color: var(--primary-black) !important;
}

.insurance-steps__inner-grid:first-of-type .insurance-steps__text span {
  color: var(--primary-gray) !important;
}

.insurance-steps__cta {
  width: 18.375rem;
  margin-top: 2.625rem;
  transition: all 0.4s ease-out;
  display: inline-block;
}

.insurance-steps__cta:hover {
  background-color: var(--primary-dark-orange);
}

/* ==========================================================================
         11. PRODUCTS SECTION
         ========================================================================== */
.products {
  padding-block: 2.625rem 8.75rem;

  @media screen and (max-width: 768px) {
    padding-block: 2.625rem 6.75rem;
  }

  @media screen and (max-width: 640px) {
    padding-block: 2.625rem 4.75rem;
  }

  @media screen and (max-width: 480px) {
    padding-block: 2rem 3rem;
  }
}

.products__subtitle {
  letter-spacing: 2px;
	text-transform: uppercase;
  font-weight: 400;
}

.products__title {
  margin-inline: auto;
  line-height: 1.4;
}

.products__card-container {
  margin-top: 2.5rem;
}

.products .card {
  border: none;
  text-align: center;
  max-width: 27.75rem;
  margin-inline: auto;
}

.products .card > div {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1rem 0;
  border-radius: 4px;
  height: 250px;
  isolation: isolate;
}

.products .card__description {
  margin-inline: auto;
  max-width: 12.6875rem;
}

.products .card__image.multiply {
  mix-blend-mode: multiply;
}

.products .card__image.burn {
  mix-blend-mode: color-burn;
}

.products .card--yellow > div {
  background: #fffaf6;
}

.products .card--blue > div {
  background: #f0f2f9;
}

.products .learn-more-link {
  margin-top: 0.75rem;
}

.products .card__image {
  flex: 1;
  margin-top: 1.25rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}

/* ==========================================================================
         12. WHY US SECTION
         ========================================================================== */
.why-us {
  padding-bottom: 6rem;

  @media screen and (max-width: 768px) {
    padding-bottom: 4rem;
  }

  @media screen and (max-width: 640px) {
    padding-bottom: 3rem;
  }

  @media screen and (max-width: 480px) {
    padding-bottom: 2rem;
  }
}

.why-us__card {
  display: flex;
  flex-direction: column;
  padding: 3rem 2rem 0 2rem;
  border-radius: 12px;
  min-height: 34.75rem;
  max-width: 34.75rem;
  margin-inline: auto;

  @media screen and (max-width: 576px) {
    padding-inline: 1rem;
    min-height: 25rem;
  }
}

.why-us__card .join-text {
  @media screen and (max-width: 576px) {
    font-size: 1rem;
  }
}

.why-choose-us {
  position: relative;
  background: url(../images/why-choose-liva.png) no-repeat center;
  background-size: cover;
  color: white;
  isolation: isolate;
}

.why-choose-us__description {
  max-width: 27rem;
}

.why-choose-us__face-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;

  @media screen and (max-width: 576px) {
    margin-top: 1rem;
  }
}

.why-choose-us__face-container img {
  width: 4.5rem;
  height: 4.5rem;
}

.why-choose-us__face-container img:not(:first-child) {
  margin-left: -1rem;
}

.exclusive-perks {
  background: url(../images/liva-rewards-en.png) no-repeat center;
}

.language-ar .exclusive-perks {
  background: url(../images/liva-rewards-ar.png) no-repeat center;
}

.language-ar .exclusive-perks,
.exclusive-perks {
  background-size: cover;
}

.exclusive-perks__description {
  max-width: 20.5rem;
}

/* ==========================================================================
         13. RECOGNITION SECTION
         ========================================================================== */
.recognition {
  position: relative;
  background-color: #fffaf6;
  overflow: hidden;
}

.recognition__section-title {
  max-width: 28.125rem;
}

.recognition__background {
  display: none;
}

.recognition__right-text {
  max-width: 24.375rem;
}

.recognition__container {
  padding-block: 5.5rem 7.125rem;

  @media screen and (max-width: 768px) {
    padding-block: 4.5rem 6.125rem;
  }

  @media screen and (max-width: 640px) {
    padding-block: 3rem;
  }

  @media screen and (max-width: 480px) {
    padding-block: 2rem;
  }
}

.recognition__container > * {
  max-width: 60rem;
}

.recognition__awards-grid {
  margin-top: 3rem;
}

.recognition__image-container {
  background: white;
  width: 5.75rem;
  height: 5.75rem;
  display: grid;
  place-items: center;
  box-shadow:
    0px 3px 6px 0px #0000000d,
    0px 10px 10px 0px #0000000a,
    0px 23px 14px 0px #00000008,
    0px 40px 16px 0px #00000003,
    0px 63px 18px 0px #00000000;
  border-radius: 4px;
}

.recognition__image-container img {
  max-width: 1.75rem;
}

.recognition__title {
  font-family: 'Inter';
}

.recognition__title--global {
  letter-spacing: -0.04em;
}

.recognition__award-name {
  letter-spacing: -0.01em;
  margin-top: 0.25rem;
}

.recognition__award--mena {
  max-width: 7.25rem;
}

.recognition__award--aiwa {
  max-width: 10.125rem;
}

.recognition__award--global {
  max-width: 8.75rem;
}

img.recognition__image--global {
  max-width: 2.75rem;
}

/* ==========================================================================
         14. TESTIMONIALS SECTION
         ========================================================================== */
.testimonials {
  text-align: center;
  width: 100%;
  padding-block: 6rem;

  @media screen and (max-width: 768px) {
    padding-block: 5rem;
  }

  @media screen and (max-width: 640px) {
    padding-block: 3rem;
  }
}

.testimonials-subtitle {
  font-size: 12px;
  color: var(--primary-black);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 100%;
  font-weight: 400;
}

.testimonials-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  color: var(--primary-black);
  line-height: 140%;
  letter-spacing: -1px;
  margin-bottom: 60px;
  max-width: 605px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-title .img-placeholder-wrapper {
  display: inline-block;
  width: 78px;
  height: 40px;

  @media screen and (max-width: 768px) {
    img {
      width: 68px;
      height: 30px;
    }
  }
}

.testimonials-title .highlight-orange {
  color: var(--primary-orange);
}

.testimonial-slider-container {
  position: relative;
}

.testimonial-item {
  background-color: #f2f4fa;
  padding: 3rem 1.5rem 1rem;
  border-radius: 12px;
  text-align: left;
  box-sizing: border-box;
  transition:
    box-shadow 0.3s ease,
    transform 0.4s ease,
    opacity 0.4s ease;
  position: relative;
  width: min(100vw - 4rem, 675px) !important;
  min-height: 280px;
  background-image: url(../images/v-sign.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;

  @media (max-width: 640px) {
    padding: 50px;
  }

  @media (max-width: 540px) {
    padding: 32px;
  }
}

.testimonial-slider {
  overflow: hidden;
}

.testimonial-slider.slick-initialized .slick-slide {
  display: flex;
  flex-direction: column;
}

.quote-mark svg {
  position: absolute;
  left: 56px;
  top: -30px;
  height: 62px;
  width: 83px;
}

.testimonial-text {
  font-size: clamp(14px, 2.5vw, 20px) !important;
  color: var(--primary-black);
  line-height: 140%;
  letter-spacing: 0;
  margin-bottom: 24px;
}

.testimonial-author {
  font-size: 14px;
  color: var(--primary-black);
  margin: 0;
}

.testimonial-slider .slick-list {
  padding-top: var(--testimonial-upper-padding) !important;
}

.testimonial-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + var(--testimonial-upper-padding) / 2));
  z-index: 10;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.testimonial-slider .slick-arrow svg {
  width: 10px;
  height: auto;
}

.testimonial-slider .slick-arrow {
  background-image: url(../images/arrow-right-new.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem 0.5rem;
}

.testimonial-slider .slick-arrow:hover {
  background-color: var(--primary-orange);
}

.testimonial-slider .slick-slide:not(.slick-active) .slick-arrow {
  display: none !important;
}

.testimonial-slider .slick-prev-custom {
  background-color: hsla(0, 0%, 83%, 1);
  background-image: url(../images/arrow-left.svg);
}

.testimonial-slider .slick-prev-custom.desktop {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-slider .slick-next-custom {
  background-color: hsla(0, 0%, 83%, 1);
}

.testimonial-slider .slick-next-custom.desktop {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-slider .slick-next-custom svg path {
  stroke: white;
}

.testimonial-slider .slick-prev:before,
.testimonial-slider .slick-next:before {
  content: '' !important;
  display: none !important;
}

.testimonial-slider .slick-track {
  display: flex !important;
}

.testimonial-slider .slick-slide {
  margin: 0 4.125rem;
}

.testimonial-slider .slick-list {
  margin: 0 -4.125rem;
}

.testimonial-slider .slick-slide {
  height: inherit !important;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.testimonial-slider .slick-center,
.testimonial-slider .slick-slide.slick-current.slick-active {
  opacity: 1;
}

.testimonial-slider .testimonial-item.slick-center .quote-mark {
  display: flex;
}

.testimonials .mobile-arrow-container {
  display: flex;
}

.testimonials .slick-arrow.mobile {
  position: static;
}

@media (max-width: 1020px) {
  .testimonials-title {
    font-size: 28px;
    max-width: 500px;
  }

  .testimonial-slider .slick-arrow {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .testimonials-title {
    font-size: 24px;
    margin-bottom: 40px;
    max-width: 420px;
  }

  .testimonial-text {
    font-size: 18px;
  }

  .quote-mark svg {
    top: -25px;
    height: 52px;
    width: 73px;
  }
}

@media (max-width: 540px) {
  .testimonials-title {
    font-size: 22px;
    max-width: 90%;
  }

  .testimonial-item {
    height: auto;
  }

  .testimonial-text {
    font-size: 16px;
  }
}

@media (max-width: 320px) {
  .testimonials-title {
    font-size: 20px;
  }
}

@media screen and (min-width: 640px) {
  .testimonial-slider .slick-list {
    padding: var(--testimonial-upper-padding) 200px 0px !important;
  }

  .testimonial-item {
    padding: 4.75rem 5rem 2.875rem 3.875rem;
  }
}

/* ==========================================================================
         15. MEDIA SECTION
         ========================================================================== */
.media {
  background: var(--secondary-black);
  padding-block: 6rem;

  @media screen and (max-width: 768px) {
    padding-block: 5rem;
  }

  @media screen and (max-width: 640px) {
    padding-block: 3rem;
  }

  @media screen and (max-width: 480px) {
    padding-block: 2rem;
  }
}

.media .learn-more-link {
  justify-content: flex-start;
}

.media__container {
  margin-top: 1.5rem;
}

.media__container > * + * {
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
}

.media-row {
  display: grid;
  column-gap: 1rem;
  row-gap: 1rem;
  padding-block: 1.5rem;
  grid-template-areas:
    'image'
    'badge'
    'title'
    'date'
    'learn-more-text'
    'learn-more-link';

  @media screen and (min-width: 480px) {
    grid-template-areas:
      'image badge'
      'image title'
      'image date'
      '. learn-more-text'
      '. learn-more-link';
  }
}

.media__image {
  grid-area: image;
  margin-inline: auto;

  @media screen and (max-width: 480px) {
    margin-inline: 0;
  }
}

.media__badge {
  grid-area: badge;
  width: fit-content;
  padding: 0.375rem 1rem;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 100vw;
  color: var(--transparent-black-60);
  font-size: 0.6875rem;
}

.media__title {
  grid-area: title;
  max-width: 30rem;
  a {
    color: white;
  }
}

.media__date {
  grid-area: date;
  color: var(--transparent-black-60);
}

.media__learn-more-text {
  grid-area: learn-more-text;
  color: var(--transparent-black-65);
}

.media__learn-more-link {
  grid-area: learn-more-link;
  place-self: flex-end flex-start;
}

/* ==========================================================================
         16. SECURITY SECTION
         ========================================================================== */
.security {
  position: relative;
  background: url(/sites/default/files/2025-08/cta-banner-2-1.webp);
  background-repeat: no-repeat;
  background-position: center top !important;
  background-size: cover;
}
.security::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 15%);
}

.security > .container {
  padding-block: 10.25rem;

  @media screen and (max-width: 1600px) {
    padding-block: 6.25rem;
  }

  @media screen and (max-width: 768px) {
    padding-block: 5rem;
  }

  @media screen and (max-width: 640px) {
    padding-block: 3rem;
  }

  @media screen and (max-width: 480px) {
    padding-block: 2rem;
  }
}

.security__text h2 {
  max-width: 27.5rem;
  line-height: 1.4;
}

.security__description {
  max-width: 22.5rem;
  color: hsl(0, 0%, 20%);
}

.security__cta {
  width: min(100%, 18.375rem);
  display: inline-block;
  white-space: nowrap;
  @media screen and (max-width: 768px) {
    width: min(100%, 14.375rem);
  }

  @media screen and (max-width: 640px) {
    width: min(100%, 12.375rem);
  }

  @media screen and (max-width: 480px) {
    padding: 0.8rem !important;
  }
}

/* ==========================================================================
         17. FAQ SECTION
         ========================================================================== */
.faq {
  padding-block: 5.25rem;
  background: var(--primary-light-blue);

  @media screen and (max-width: 768px) {
    padding-block: 4rem;
  }

  @media screen and (max-width: 640px) {
    padding-block: 3rem;
  }

  @media screen and (max-width: 480px) {
    padding-block: 2rem;
  }
}

.faq__grid-container {
  display: grid;
  gap: 1rem;
}

.faq__question-container {
  padding: 2.25rem;
  background: white;
  border-radius: 6px;
  box-shadow:
    0px 4px 9px 0px hsla(0, 0%, 0%, 0.05),
    0px 17px 17px 0px hsla(0, 0%, 0%, 0.04),
    0px 38px 23px 0px hsla(0, 0%, 0%, 0.03),
    0px 68px 27px 0px hsla(0, 0%, 0%, 0.01),
    0px 107px 30px 0px hsla(0, 0%, 0%, 0);
  width: 100%;

  @media screen and (min-width: 992px) {
    max-width: 36.375rem;
  }
}

.faq .accordion-item {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.faq :is(.accordion-button, .accordion-body) {
  padding-inline: 0;
}

.faq .accordion-button {
  font-weight: 500;
  box-shadow: none;
  border-color: transparent;
  background-image: none !important;
  gap: 12px;
}

.faq .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.faq .accordion-body {
  color: var(--primary-gray);
  font-size: 0.875rem;
  max-width: 26.25rem;
  padding-top: 0;
}

.faq .accordion-button::after {
  background-image: url(../images/accordion-plus.svg);
}

.faq .accordion-button:not(.collapsed) {
  background: transparent;
  color: inherit;
}

.faq .accordion-button:not(.collapsed)::after {
  background-image: url(../images/accordion-minus.svg);
  transform: none !important;
}

/* ==========================================================================
         18. FOOTER SECTION
         ========================================================================== */
footer .learn-more-link {
  display: flex;
  color: var(--primary-orange);
  font-weight: 500;
  justify-content: flex-start;
}

.footer .learn-more-link::after {
  content: '';
  display: inline-flex;
  background: url('../images/caret-right.svg');
  background-repeat: no-repeat;
  background-position: center;
  width: 0.75rem;
  height: 0.375rem;
}

footer {
  background: #0d0d0d;
  color: #ffffffa6;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 3.125rem 0 2.75rem;

  @media screen and (max-width: 640px) {
    padding: 2rem 0;
  }
}

.footer-column.footer-social ul a:hover {
  color: #ffffffa6;
}

.footer-menu-row,
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 0;
  justify-content: space-between;
}

footer .company-info,
.footer-menu-row {
  border-bottom: 1px solid #ffffff1a;
  padding-bottom: 1.625rem;
  margin-bottom: 1.5rem;
}

.footer-menu-row {
  padding-bottom: 1.3125rem;
  margin-bottom: 1.25rem;
  position: relative;

  @media screen and (max-width: 480px) {
    margin-bottom: 1rem;
  }
}

.company-info img {
  width: 3.25rem;
  height: 2.3125rem;
  margin-bottom: 1rem;
}

.footer-menu {
  gap: 2rem 5.75rem;

  @media (max-width: 567px) {
    gap: 2rem 2rem;
  }
}

.footer-menu h4 {
  margin-bottom: 3px;
}

footer h4,
.footer-social li a {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
}

.footer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.company-info {
  max-width: 23.625rem;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4.75rem;

  @media screen and (max-width: 540px) {
    gap: 2rem 3rem;
  }

  ul {
    margin-bottom: 0;
    display: grid;
    gap: 0.9375rem;
  }
}

.footer-menu ul.footer-column {
  margin-bottom: 0;
}

.footer-layout {
  display: flex;
  flex-direction: column;
  gap: 2.688rem;
}

.footer-column.footer-social {
  position: relative;
}

.copy-right {
  gap: 1rem;
  flex-wrap: wrap;
}

.copy-right > span {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
}

.copy-right .separator {
  display: inline-flex;
  margin-inline: 0.25rem;
}

.social-icons {
  display: flex;
  gap: 0.875rem;
  margin-top: 1rem;
}

.social-icons a {
  transition: filter 0.2s ease-out;
}

.social-icons a:hover {
  filter: brightness(0.7);
}

/* ==========================================================================
         19. BREAKPOINT-SPECIFIC OVERALL ADJUSTMENTS
         ========================================================================== */
@media screen and (min-width: 576px) {
}

@media screen and (min-width: 640px) {
  .why-choose-us__face-container img {
    width: 5.75rem;
    height: 5.75rem;
  }
}

@media screen and (min-width: 768px) {
  .insurance-steps__main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .insurance-steps__steps-container {
    margin-top: 2.625rem;
  }

  .recognition__title-wrapper > *:first-child {
    padding-right: 3rem;
  }

  .recognition__title-wrapper > *:nth-child(2) {
    padding-left: 3rem;
    border-left: var(--border);
  }

  .security {
    background-position: center;
  }

  .media-row {
    grid-template-columns: 8.5625rem 1fr 18rem;
    grid-template-areas:
      'image badge .'
      'image title learn-more-text'
      'image date  learn-more-link';
    row-gap: 0;
  }

  .media__title {
    margin-top: 0.75rem;
  }

  .media__date {
    margin-top: 2rem;
  }

  .media__learn-more-text {
    margin-top: 0.625rem;
  }
}

@media screen and (min-width: 992px) {
  .insurance-steps__main-grid {
    gap: 4rem;
  }

  .products .container--smaller {
    padding-inline: 0;
  }

  .products .card:is(:nth-of-type(1), :nth-of-type(2)) {
    margin-top: 0;
    padding-inline: 0 !important;
  }

  .recognition__awards-grid {
    margin-top: 6rem;
  }

  .media-row {
    column-gap: 3.125rem;
    grid-template-columns: 8.5625rem 1fr 22.5rem;
  }

  .faq__grid-container {
    grid-template-columns: 17.5rem 1fr;
    gap: 5rem;
  }
}

@media screen and (min-width: 1200px) {
  .container,
  .container--small,
  .container--smaller,
  .container--smallest {
    padding-inline: 0 !important;
  }

  .why-us article {
    padding-inline: 0 !important;
  }

  .recognition__background {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
  }

  .faq__grid-container {
    gap: 12.5rem;
  }
}

/* ==========================================================================
         20. TEMPORARY CSS FOR PRODUCT GRID
         ========================================================================== */
.products__card-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 15.625rem;
  grid-auto-rows: 15.625rem;
  gap: 0.75rem;
}

.products__card-container article {
  width: 100%;
}

.products__card-container article {
  grid-column: span 12;
}

@media screen and (min-width: 768px) {
  .products__card-container article:is(:first-of-type, :nth-of-type(2)) {
    grid-column: span 6;
  }

  .products__card-container
    article:is(:nth-of-type(3), :nth-of-type(4), :nth-of-type(5)) {
    grid-column: span 4;
  }
}

/* ==========================================================================
         21. SUB-HERO SECTION
         ========================================================================== */
.sub-hero {
  padding-block: 4.5rem;
  background: hsla(224, 11%, 20%, 1);
  color: var(--primary-light-blue);
}

.sub-hero__title {
  font-size: clamp(1.2rem, 4vw, 2rem);
  max-width: 472px;
  text-align: center;
  margin-inline: auto;
}

.sub-hero__grid {
  position: relative;
  display: flex;
  gap: 16px;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
  font-family: 'Inter';
  isolation: isolate;
  background-image: url(../images/giant-50k.svg);
  background-size: 29.8125rem 17.9375rem;
  background-position: center;
  background-repeat: no-repeat;
}

.sub-hero__stat-box {
  min-width: fit-content;
  text-align: center;
  line-height: 1;
}

@media screen and (min-width: 992px) {
  .sub-hero__grid {
    flex-direction: row;
    background-position: center 40%;
    background-size: contain;
  }

  .sub-hero__stat-box {
    flex: 1;
    line-height: 1;
    text-align: center;
  }

  .sub-hero__mega-text {
    width: 29.8125rem;
  }
}

@media screen and (max-width: 991px) {
  .lg-mb-0 {
    margin-bottom: 0 !important;
  }
}

.sub-hero__stat {
  font-size: 1.75rem;
  letter-spacing: -0.07em;
  font-family: 'Inter';
  font-weight: 800;
}

.sub-hero__desc {
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.sub-hero__mega-text {
  text-align: center;
}

.sub-hero__mega-text {
  position: relative;
  display: inline-block;
  text-align: center;
}

.sub-hero__mega-text .text-wrapper {
  position: relative;
  display: inline-block;
}

.sub-hero__mega-text .giant-text {
  font-size: clamp(6rem, 20vw, 9.375rem);
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-weight: 800;
}

.sub-hero__mega-text .giant-image-text {
  background-image: url('../images/family-banner-image.png');
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}

.sub-hero__mega-text .giant-overlay-text {
  color: hsla(25, 100%, 50%, 1);
  mix-blend-mode: multiply;
  z-index: 2;
}

.sub-hero__mega-text .subtitle {
  margin-bottom: 1rem;
  letter-spacing: 0.37em;
  color: var(--primary-orange);
  font-size: 0.875rem;
  font-weight: 500;
}

.sub-hero__background-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 2rem));
  z-index: -1;
  letter-spacing: -0.03em;
  color: white;
  font-size: 14.875rem;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: hsla(0, 0%, 100%, 0.05);
  -webkit-text-stroke-width: 1px;
}

/* ==========================================================================
         22. COLLAPSIBLE ELEMENTS (HAMBURGER MENU)
         ========================================================================== */
.collapsible-header {
  position: relative;
  cursor: pointer;
  &:after {
    content: '';
    position: absolute;
    border-color: inherit;
    border-width: 0 2px 2px 0;
    border-style: solid;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    transition: 0.3s ease;
    left: 100%;
  }
}

.language-ar .collapsible-header::after {
  left: 0;
  right: 100%;
}

.collapsible-section.active .collapsible-header:after {
  transform: rotate(225deg);
  transform-origin: 59% 71%;
}

/* ==========================================================================
         23. FORM VALIDATION & MISCELLANEOUS
         ========================================================================== */
.form-item--error-message {
  top: 2px;

  .placeholder {
    background-color: unset;
    cursor: unset;
    opacity: 1;
  }
}

.form-actions:has(.webform-button--submit) input,
a.bg-primary-orange {
  @media screen and (max-width: 768px) {
    padding-block: 0.75rem !important;
  }
}

.error-text {
  color: var(--error-text);
  font-size: 11px;
  font-weight: normal;
}

.input.webform-counter-warning,
input.form-text.webform-counter-warning {
  border-bottom: 1px solid var(--form-border);
}

.form-item-civil-id- {
  position: relative;
}

.text-count-wrapper.webform-counter-warning {
  position: absolute;
}

.contextual {
  z-index: 15;
}

.form-control:focus {
  box-shadow: none !important;
  border-bottom: 1px solid var(--form-border) !important;
}

.btn-primary:focus {
  box-shadow: none !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}

.grecaptcha-badge {
  display: none;
}

/* ==========================================================================
         24. RESPONSIVE TYPOGRAPHY & IMAGE ADJUSTMENTS
         ========================================================================== */
.insurance-protection .image-grid__title {
  font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
}

.insurance-steps__title,
.products__title,
.recognition__section-title,
.media h3:not(.media__title),
.security__text h2,
.faq__grid-container h3,
.testimonials-title,
.insurance-protection .image-grid__title--large,
.insurance-plans__title {
  font-size: clamp(1.4rem, 4vw, 2rem) !important;
}

.testimonials-title {
  display: flex;
  flex-direction: column;
}

.recognition__title {
  font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
}
.recognition__award-name {
  font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
}

.media__title {
  font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
}

.media__learn-more-text,
.media .learn-more-link {
  font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
}

.insurance-steps__image img {
  width: 100%;
}

/* ==========================================================================
         25. RTL STYLES
         ========================================================================== */
.language-ar #navbar,
.language-ar .insurance-steps,
.language-ar .media,
.language-ar .why-us,
.language-ar footer,
.language-ar .products,
.language-ar .faq,
.language-ar .recognition__awards-grid,
.language-ar .recognition .recognition__title-wrapper {
  direction: rtl;
  text-align: right;
}

.language-ar .why-us .circular-button {
  rotate: 180deg;
}

.language-ar .hero-black-wrapper .hero-banner,
.language-ar .recognition {
  transform: scaleX(-1);
}

.language-ar .recognition .recognition__container {
  transform: scaleX(-1);
}

.language-ar .hero-black-wrapper .hero-banner .hero-banner-left-column {
  transform: scaleX(-1);
  direction: rtl;
}

.language-ar .security,
.language-ar .security .security__cta {
  transform: scaleX(-1);
}
.language-ar .testimonial-slider .testimonial-item,
.language-ar .select2-selection__placeholder,
.language-ar .select2 .select2-selection__rendered {
  text-align: right !important;
}

.language-ar .select2 .select2-selection {
  background: transparent;
  height: 100%;
}

.language-ar .select2 .select2-selection .select2-selection__rendered {
  color: #91969a;
  font-size: 14px;
}

.language-ar .security .security__text {
  direction: rtl;
  text-align: right;
  transform: scaleX(-1);
}

@media screen and (min-width: 768px) {
  .language-ar .recognition__title-wrapper > *:first-child {
    padding-left: 3rem;
    padding-right: 0rem;
  }

  .language-ar .recognition__title-wrapper > *:nth-child(2) {
    padding-right: 3rem;
    border-right: var(--border);
    border-left: none;
    padding-left: 0;
  }
}

.language-ar * {
  font-family: 'GE-SS-Two', 'Aller', sans-serif !important;
  letter-spacing: 0 !important;
}

.language-ar .faq .accordion .accordion-button::after {
  margin-right: auto;
  margin-left: 0;
}

.language-ar .hamburger-menu {
  padding-left: 0;
  padding-right: 4px;
}

.language-ar .text-block {
  display: block;
}

.language-ar .title {
  text-align: right;
}

.language-ar .edit-consent-message p {
  text-align: initial !important;
}

.language-ar .testimonial-text {
  direction: rtl;
}

.language-ar a[href^='tel:'] {
  font-family: 'Aller', sans-serif !important;
}

.language-ar .faq .accordion-button {
  text-align: right;
}

.language-ar .select2-container {
  text-align: right !important;
  direction: rtl;
}

.language-ar .select2-container .select2-selection__arrow {
  left: 6px;
  right: auto;
}

.language-ar .recognition__container > * {
  max-width: 71rem;
}

.language-ar .new-home-page header a {
  @media screen and (max-width: 880px) {
    font-size: 12px;
  }
}

html[lang='ar_OM'] .select2-container .select2-dropdown {
  text-align: right !important;
  direction: rtl;
}

.language-ar .sub-hero__mega-text .subtitle {
  font-size: 1.625rem;
}

.language-ar .sub-hero__desc {
  font-size: 0.813rem;
}

/* RTL styles for car page */
.language-ar
  .path-car
  :is(.hero-section, .insurance-protection, .insurance-plans, .support) {
  direction: rtl;
  text-align: right;
}

/* ==========================================================================
Car page start
========================================================================== */
.path-car {
  margin-top: 4.5rem;
}

header:has(+ .path-car) {
  top: 0;
  border-bottom-color: transparent;
  background: white;
}

header.scrolled:has(+ .path-car) {
  border-bottom-color: #0000001a;
}

/* Position the navbar at the top for this page */
body.toolbar-fixed header:has(+ .path-car) {
  top: 2.375rem;
}

body.toolbar-tray-open header:has(+ .path-car) {
  top: 5rem;
}

/* ==========================================================================
Hero section of car page
========================================================================== */
.hero-section {
  position: relative;
  padding-block: 1.25rem;
  isolation: isolate;
  min-height: 450px;

  @media screen and (max-width: 576px) {
    padding-block: 0;
  }
}

/* Pseudo element is used to avoid confusion while reflection along the y-axis */
/* .hero-section::before {
  content: '';
  position: absolute;
  background: url(../images/car-banner.png);
  background-size: cover;
  background-position: right center;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: -1;
}
.language-ar .hero-section::before {
  transform: scaleX(-1);
} */

.hero-section .imgbx {
	position:absolute;
  left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.hero-section .imgbx img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: right center;
  width: 100%;
  height: 100%;
}

/* Flip horizontally on arabic page */
.language-ar .hero-section .imgbx img {
  transform: scaleX(-1);
}

.hero-section .container {
  @media screen and (max-width: 576px) {
    padding-inline: 0 !important;
  }
}

.hero-section .content-wrapper {
  max-width: 50rem;
  background: white;
  padding: 1.25rem 2rem;
  border-radius: 8px;

  @media screen and (max-width: 576px) {
    border-radius: 0;
    padding-inline: 1rem;
  }
}

.hero-section__title {
  max-width: 23.75rem;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.hero-section__title span {
  display: block;
}

.hero-section__form-discount-grid {
  display: grid;
  grid-template-columns: 1fr 12.5rem;
  grid-template-areas: 'form discount-card';
  align-items: flex-start;
  gap: 1.5rem;

  @media screen and (max-width: 576px) {
    grid-template-areas: 'discount-card' 'form';
    grid-template-columns: 1fr;
  }
}

.hero-section__form-discount-grid .form-container {
  grid-area: form;
}

.hero-section__discount-card {
  display: grid;
  grid-template-columns: auto 1.75rem;
  grid-template-areas:
    'number percent'
    'first-text first-text'
    'second-text second-text';
  justify-self: flex-start;
  grid-area: discount-card;
  background-color: var(--primary-light-blue);
  border-radius: 8px;
  padding: 0 0.75rem 1.25rem 1rem;
  width: 100%;

  @media screen and (max-width: 576px) {
    grid-template-rows: min-content min-content;
    grid-template-areas: 'number percent text-wrapper';
    text-align: center;
    justify-self: center;
    padding-bottom: 0;
    width: auto;
  }
}

.hero-section .discount-text-wrapper {
  display: contents;

  @media screen and (max-width: 576px) {
    display: block;
    grid-area: text-wrapper;
    align-self: center;
    text-align: left;
  }
}

.language-ar .hero-section .discount-text-wrapper {
  @media screen and (max-width: 576px) {
    text-align: right;
    margin-inline: 0.75rem 0;
  }
}

/* Make the number large on arabic page, center the text and remove margins */
.language-ar .hero-section__discount-card {
  padding-top: 1rem;
}

.language-ar .hero-section .discount-percent {
  line-height: 1;
  font-size: 10rem;
}

.language-ar .hero-section .discount-text-wrapper {
  text-align: center;

  @media screen and (max-width: 576px) {
    text-align: right;
  }
}

.language-ar .hero-section .discount-text-wrapper > * {
  margin-inline: 0;
}

.hero-section .discount-percent {
  grid-area: number;
  margin-top: -1rem;
  font-family: 'Inter';
  text-align: center;
  font-size: 8rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -6px;

  @media screen and (max-width: 576px) {
    margin-top: 0;
    font-size: 4rem;
  }
}

.hero-section .discount-text {
  grid-area: first-text;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-top: -1rem;

  @media screen and (max-width: 576px) {
    font-size: 1rem;
    margin-top: 0;
  }
}

.hero-section .discount-desc {
  grid-area: second-text;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  margin-top: 0.25rem;
}

/* For alignment with the '1' */
.hero-section :is(.discount-text, .discount-desc) {
  margin-left: 1.5rem;

  @media screen and (max-width: 576px) {
    margin-left: 0.75rem;
  }
}

.path-car .percent-sign {
  grid-area: percent;
  margin-top: 1rem;
  font-size: 1.75rem;
  line-height: 1.4;
  font-family: 'Inter';

  @media screen and (max-width: 576px) {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-left: 0.25rem;
    padding-bottom: 0.5rem;
    font-size: 1.375rem;
  }
}

/* Bringing the percentage sign closer to the number */
.language-ar .path-car .percent-sign {
  margin-right: -1.5rem;

  @media screen and (max-width: 576px) {
    margin-right: 0;
  }
}

/* ==========================================================================
26. The alternating image-text layout
========================================================================== */
.insurance-protection {
  padding-top: 2rem;
}

.insurance-protection__main-grid {
  display: grid;
  gap: 4.5rem;
  padding-block: 6rem;

  @media screen and (max-width: 768px) {
    gap: 3rem;
    padding-block: 3rem;
  }

  @media screen and (max-width: 576px) {
    gap: 2rem;
    padding-block: 2rem;
  }
}

.insurance-protection .image-grid__title {
  margin-bottom: 2rem;
  font-weight: 500;
  max-width: 35rem;
  line-height: 1.4;

  @media screen and (max-width: 768px) {
    margin-bottom: 1rem;
  }
}

.insurance-protection .image-grid__title--large {
  font-size: 2rem;
}

.insurance-protection .image-grid {
  display: grid;

  @media screen and (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

/* Image on the right side */
.insurance-protection .image-grid--right {
  grid-template-columns: 488fr 290fr;
  gap: 9.25rem;

  @media screen and (max-width: 1024px) {
    gap: 3rem;
  }
}

/* Image on the left side */
.insurance-protection .image-grid--left {
  grid-template-columns: 290fr 488fr;
  grid-template-areas: 'image text';
  gap: 4.375rem;

  @media screen and (max-width: 1024px) {
    gap: 3rem;
  }

  @media screen and (max-width: 768px) {
    /* For mobile view purposes, place the image at the bottom of the grid */
    grid-template-areas: 'text' 'image';
    gap: 1rem;
  }
}

.insurance-protection .image-grid--left .image-grid__right-column {
  grid-area: text;
}

.insurance-protection :is(.image-grid--left, .image-grid--right) {
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.insurance-protection .image-grid > div:has(img) {
  @media screen and (max-width: 768px) {
    display: flex;
    justify-content: center;
  }
}

.insurance-protection .image-grid > div:has(img) img {
  @media screen and (max-width: 480px) {
    width: 100%;
  }
}

.insurance-protection .image-grid__description {
  color: var(--primary-gray);
  font-size: 0.875rem;
  max-width: 30.5rem;
}

.insurance-protection .learn-more-link {
  display: inline-flex;
}

/* ==========================================================================
     27. Insurance plans
   ========================================================================== */
.insurance-plans {
  background: var(--primary-light-blue);
  padding-block: 4rem 1.5rem;
}

.insurance-plans__title {
  margin-inline: auto;
  font-weight: 500;
  width: fit-content;
}

.insurance-plans__main-grid {
  margin-block: 2rem 1.375rem;
}

/* .insurance-plans__table-container {
  overflow: auto;
} */

.insurance-plans__table {
  background: white;
  width: 100%;
  border-radius: 8px;
}

/* Headers */
.insurance-plans__comparison-title {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1em;
  color: var(--tertiary-black);
}

/* First column */
.insurance-plans__table > thead > tr > th:first-child {
  @media screen and (max-width: 1024px) {
    min-width: 15rem;
  }

  @media screen and (max-width: 768px) {
    min-width: 0;
  }
}

/* Second and third columns */
.insurance-plans__table > thead > tr > th:not(:first-child) {
  min-width: 20.0625rem;

  @media screen and (max-width: 1024px) {
    min-width: 15.5rem;
  }

  @media screen and (max-width: 768px) {
    min-width: 0;
  }
}

/* For each table cell in the first column. Div is used for border purposes. */
.insurance-plans__table > tbody > tr > td:first-child > div {
  padding: 1.375rem 1rem 1.375rem 2.75rem;

  @media screen and (max-width: 768px) {
    padding-inline: 0.375rem;
  }
}

/* Centre and bold all the text except in the first column */
.insurance-plans__table > tbody > tr > td:not(:first-child) {
  text-align: center;
  font-weight: 500;
}

/* Each cell in general  */
.insurance-plans__table > tbody > tr > td > div {
  border-top: 1px solid hsla(0, 0%, 0%, 0.1);
  font-size: 0.875rem;
  line-height: 1;
}

/* First cell in the second and third columns */
.insurance-plans__table > thead .insurance-plans__button-title {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  padding-block: 3rem 1.75rem;

  @media screen and (max-width: 768px) {
    padding-inline: 1rem;
  }

  @media screen and (max-width: 576px) {
    padding-inline: 0.5rem;
  }
}

/*
    For the border surrounding the second column
    The first row and the last have to be treated differently
    */
.insurance-plans__table > thead > tr > th:nth-child(2) {
  position: relative;
  isolation: isolate;
}

/* For the table headers */
.insurance-plans__table > thead > tr > th:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-orange);
  border-radius: 8px 8px 0 0;
  z-index: -1;
}

.insurance-plans__table > thead > tr > th:nth-child(2)::after {
  content: '';
  position: absolute;
  inset: 8px 8px 0 8px;
  background: white;
  border-radius: 8px 8px 0 0;
  z-index: -1;

  @media screen and (max-width: 768px) {
    inset: 2px 2px 0 2px;
  }
}

/* For main table cells. Relative because the divs inside are placed absolutely.  */
.insurance-plans__table > tbody > tr > td:is(:nth-child(2), :nth-child(3)) {
  position: relative;
  isolation: isolate;
}

.insurance-plans__table
  > tbody
  > tr
  > td:is(:nth-child(2), :nth-child(3))
  > div {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
}

.insurance-plans__table > tbody > tr > td:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-orange);
  z-index: -1;
}

.insurance-plans__table > tbody > tr > td:nth-child(2)::after {
  content: '';
  position: absolute;
  inset: 0 8px 0 8px;
  background: white;
  z-index: -1;

  @media screen and (max-width: 768px) {
    inset: 0 2px 0 2px;
  }
}

/* For the last cell in the second column */
.insurance-plans__table > tbody > tr:last-child > td:nth-child(2)::before {
  border-radius: 0 0 8px 8px;
}
.insurance-plans__table > tbody > tr:last-child > td:nth-child(2)::after {
  inset: 0 8px 8px 8px;
  border-radius: 0 0 8px 8px;

  @media screen and (max-width: 768px) {
    inset: 0 2px 2px 2px;
  }
}

/* Due to the border in the last row, give extra padding to all the cells */
.insurance-plans__table > tbody > tr:last-child > td > div {
  padding-block: 1.375rem 1.875rem;
}

.insurance-plans .cta-button {
  display: block;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  width: fit-content;
  text-align: center;
  font-weight: 400;
}

.insurance-plans .cta-button--coloured {
  background: var(--primary-orange);
  color: white;
  border: 1px solid var(--primary-orange);
}

.insurance-plans .cta-button--ghost {
  color: inherit;
  border: 1px solid hsla(224, 11%, 20%, 0.4);
}

.insurance-plans .cta-button--ghost:hover {
  color: white;
  border-color: transparent;
}

.insurance-plans__disclaimer {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--primary-gray);
}

/* ==========================================================================
     28. Support
   ========================================================================== */
.support {
  padding-block: 4rem 6rem;
  color: white;

  @media screen and (max-width: 768px) {
    padding-block: 2rem 3rem;
  }
}

.support__card {
  position: relative;
  padding: 1.75rem 4.5rem 1.75rem 3rem;
  border-radius: 0.75rem;
  isolation: isolate;

  @media screen and (max-width: 768px) {
    padding: 1.75rem 1rem;
  }
}

.support__card::before,
.support__card::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: -1;
}

.support__card::before {
  background: linear-gradient(163.76deg, #2d3038 11.28%, #434751 95.29%);
  border-radius: 0.75rem;
}

.support__card::after {
  background-image: url(../images/support-wave.webp);
  background-position: right bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

.support__grid {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;

  @media screen and (max-width: 960px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.support__text {
  max-width: 24.875rem;
}

.support__title {
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1.5rem;
}

.support__description {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 200;

  @media screen and (max-width: 768px) {
    font-size: 1rem;
  }
}

.support .learn-more-link {
  display: inline-flex;
}

.support__image {
  @media screen and (max-width: 960px) {
    margin-inline: auto;
  }
}





/* Moiz CSS */

.generic-h2-title h2{
	font-size: 32px;
	color: #2C2F36;
	font-weight: 500;
	margin-bottom: 25px;
}
.generic-h2-title h2 span{
	color: #FF6900;
}

.inner-banner-image img{
/*max-height: 400px;*/
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height:350px
}

.inner-banner-image {
	position:relative;
}

.inner-banner-image .imgbx::before,
.hero-section .imgbx::before {
	background: url("../images/banner-wave.svg") no-repeat;
	background-position: right bottom;
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	z-index:1;
	right: 0;
	bottom: 0;
	
}

.inner-banner-image .imgbx::after,
.hero-section .imgbx::after  {
	background: #000;
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	z-index:0;
	right: 0;
	bottom: 0;
  opacity: 0.2;
}

.inner-page-title-wrapper{
	max-width: 1140px;
	position: absolute;
	margin: 0 auto;
	right: 0;
	left: 0;
	top: 0;
	width: 100%;
	 top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.inner-page-title{
	max-width: 500px;
}
.inner-page-title h1,
.inner-page-title .main-title {
	font-size: 40px;
	color: #fff;
	font-weight: 500;
}
.inner-page-title h6{
	color: #fff;
	font-weight: 100;
	font-size: 14px;
	text-transform: uppercase;
}
.inner-page-title h1 span,
.inner-page-title .main-title span {
	color: #FF6900;
}
.el-section h2{
	font-size: 32px;
	color: #2C2F36;
	font-weight: 500;
	margin-bottom: 25px;
}
.el-section h2 span{
	color: #FF6900;
}

.el-section h6{
	padding:19px 0 0 0;
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}

.el-section img{
	border-radius: 15px;
	width: 100%;
}

.cta-button-orange{
    display: block;
    padding: 10px 18px;
    border-radius: 6px;
    font-size:13px;
    width: fit-content;
    text-align: center;
    font-weight: 400;
	transition: background-color 0.4s ease-out;
	background: #ff6a00;
    color: #fff !important;
    border: 1px solid #ff6a00;
	margin-top: 30px;
}

.cta-button-orange:hover{
background: #e56911;
}

 .profile-box {
      width: 100%;
      height: 420px;
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      background: #FEF9F5;
      cursor: pointer;
		
    }

    .profile-box .image-container {
      position: absolute;
      top: 55%;
      left: 50%;
      width: 225px;
      height: 225px;
      transform: translate(-50%, -55%);
      border-radius: 50%;
      overflow: hidden;
      transition: all 0.4s ease;
      z-index: 2;
    }

    .profile-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
		object-position: top center;
    }

    .profile-info-wrapper {
      text-align: left;
      position: absolute;
      width: auto;
      top: 30px;
		left: 30px;
/*     transition: all 0.4s ease;*/
      z-index: 1;
    }

	  .profile-info{
		  padding:0;
		  margin: 0;
		  
	  }
    .contentbx .profile-info h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
    padding: 0;
    font-weight: 600;
    }

    .contentbx .profile-info p {
      margin: 0;
      color: #777;
    }

/*
    .profile-box::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
*/

    .profile-box:hover .image-container {
      width: 100%;
      height: 100%;
      border-radius: 0;
      transform: translate(-50%, -55%) scale(1);
    }

    .profile-box:hover img {
      transform: scale(1);
		object-fit: cover;
		object-position: top center;
    }

/*
    .profile-box:hover::after {
      opacity: 1;
    }
*/

    .profile-box:hover .profile-info-wrapper {
      bottom:15px;
      transform: translateY(0%);
      color: #fff;
      opacity:0.9;
	  top: auto;
		left: 15px;
		right: 15px;
		background: #FF6900;
		border-radius: 15px;
		z-index: 2;
		
    }

.profile-box:hover .profile-info{
		  padding:20px;
		  margin: 0;
	  }


.contentbx .profile-box:hover .profile-info h3, .contentbx .profile-box:hover .profile-info p{
		  padding:0;
		  margin: 0;
		color: #fff;
	  }

.profile-btn{
	display:none;
}

.profile-box:hover a.profile-btn{
	display:block;
	color: #fff;
	font-size: 12px;
	margin-top: 15px;
	background: url("../images/profile-arrow.png") no-repeat;
	background-position:right center;
	background-size: 10px;
    width: fit-content;
    padding: 0 15px 0 0;
}


.generic-sec-spacing{
	padding: 20px 0 80px 0;
}

.generic-sec-spacing-all{
	padding: 80px 0;
}

.larg-p-text{
	font-size: 20px;
	margin-bottom: 50px;
}

.el-section-detail.generic-h2-title h2{
	margin-bottom: 0;
}

.image-rounded{
	border-radius: 15px;
}

.awards-wrapper{
	background:#F2F4FA;
}

.award-box-wrapper{
	background:#fff;
	border-radius: 8px;
	padding:20px;
	box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0), 0 1px 5px 0 rgba(0, 0, 0, 0.15);
	height: 100%;
}

.award-year{
background: #333333;
    padding: 5px 15px;
    color: #fff;
    font-size: 11px;
    border-radius: 100px;
    display: inline-block;
}

.award-box-wrapper h6{
margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
}

.award-box-wrapper ul{
	margin:15px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.award-box-wrapper li{
	margin:0;
	padding: 0 0 0 23px;
	list-style-type: none;
	background: url("../images/award-box-check.svg") no-repeat;
	background-position:left top 3px;
	color: #666666;
	font-size: 14px;
}

.award-image{
	text-align: center;
	margin: 20px 0;
	
}
	

.award-image img{
	width:120px;
	height: auto;
	margin: auto;
}



.location-map-wrapper{
	background: #2D3038;
background: linear-gradient(180deg,rgba(45, 48, 56, 1) 0%, rgba(67, 71, 81, 1) 100%);
}

.location-map-wrapper h2, .location-map-wrapper p{
	color:#fff;
}

.our-presence-map {
    position: relative;
}

.spot {
    position: absolute;
    width: 20px;
    height: 30px;
    cursor: pointer;
    display: block;
    text-decoration: none;
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Country name (hidden by default) */
.country-name {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff url(../images/caret-right.svg);  /* Set background to transparent */
	background-position: right 8px center;
	background-repeat: no-repeat;
    color: #ff6900 !important;
    padding: 5px 23px 5px 8px;
    border-radius: 5px;
    font-size: 12px !important;
    white-space: nowrap;
    display: none; /* Hidden initially */
	text-align: left;
}
.spot-wraper1:hover .country-name, .spot-wraper2:hover .country-name, .spot-wraper3:hover .country-name, .spot-wraper4:hover .country-name, .spot-wraper5:hover .country-name {
    display: block;
}
.spot-wraper1 .country-name {
    top: 44.4%;
    left: 39%;
}
.spot-wraper2 .country-name {
    top: 8.5%;
    left: 53%;
}
.spot-wraper3 .country-name {
    top: 34.5%;
    left: 67%;
}
.spot-wraper4 .country-name {
    top: 40%;
    left: 80%;
}
.spot-wraper5 .country-name {
    top: 63%;
    left: 87%;
}
/* Adjust positions (based on image) */
#spot1 {
    top: 50%;
    left: 38%;
}  /* Saudi Arabia */
#spot2 {
    top: 14%;
    left: 52%;
}  /* Kuwait */
#spot3 {
    top: 31%;
    left: 62%;
}  /* Bahrain */
#spot4 {
    top: 46%;
    left: 79%;
}  /* UAE */
#spot5 {
    top: 69%;
    left: 86%;
}  /* Oman */

.about-product-wrapper .products{
	padding-block: 60px 60px !important;
	
}

.our-commitment{
background:#FEF9F5;
}






.knowledge-center-wrapper .products {
    padding-block:0;
}

.knowledge-center-wrapper .products .card__description {
    max-width:14rem;
}

.knowledge-center-wrapper .card-title {
	font-size:16px;
}

/* Tabs CSS */


.tabs {
      width:100%;
      margin:0;
    }

    .tabs input[type="radio"] {
      display: none;
    }

    .tab-labels {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-bottom: 40px;
	margin-top: 10px;
      flex-wrap: wrap;
    }

    .tab-labels label {
      padding: 10px 20px;
      background-color: #fff;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
		border:1px solid #ABACAF;
		font-size: 15px;
    }

    .tab-labels label:hover {
      background-color: #fff;
    }

    .tab-content {
      display: none;
      padding:0px;
    }

    /* Active tab label styling */
    #tab1:checked ~ .tab-labels label[for="tab1"],
    #tab2:checked ~ .tab-labels label[for="tab2"],
    #tab3:checked ~ .tab-labels label[for="tab3"] {
      background-color: #FF6900;
      color: #fff;
      font-weight: 400;
		border:1px solid #FF6900;
    }

    /* Show correct content */
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2,
    #tab3:checked ~ #content3 {
      display: block;
    }


  .custom-table {
      width:100%;
      table-layout: fixed; 
      border: 1px solid #DADCE1;
      border-radius: 15px;
      overflow: hidden;
      border-collapse: separate;
      border-spacing: 0;
	  font-size: 14px;
    }

    .custom-table thead {
      background-color: #F2F4FA;
    }
.custom-table thead th {
      border-bottom: 1px solid #DADCE1;
    }

    .custom-table th,
    .custom-table td {
      border-right: 1px solid #DADCE1;
      padding: 15px 20px;
      text-align: left;
      word-wrap: break-word;
    }

    /* Remove right border from last column */
    .custom-table tr th:last-child,
    .custom-table tr td:last-child {
      border-right: none;
    }

    /* Transparent by default */
    .custom-table tbody tr {
      background-color: #FCFDFF;
    }

    /* Gray starts from second tbody row */
    .custom-table tbody tr:nth-child(n+2):nth-child(even) {
      background-color: #F2F4FA;
    }


.custom-table td a{
 color: #FF6900;
	    background: url(../images/caret-right.svg);
	    background-repeat: no-repeat;
    background-position:right center;
	padding-right: 14px;
	
    }

.custom-table td a[href^="mailto:"] {
   background:none !important;
}

.location strong {
    font-size: 18px;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.breadcrumb span:nth-of-type(2) {
  color: #000;
}

.contact-us {
	background:#FFFAF6;
}

.el-section-detail.contentbx h2{
	    margin-bottom: 0;
}


.top-icon-box-inner-wapper{
	background:#fff;
	padding: 40px 30px;
	border-radius: 8px;
  height: 100%;
}

.top-icon-box-inner-wapper img{
	width: 60px;
	height: auto;
	margin-bottom: 20px;
}

.top-icon-box-inner-wapper h6{
	margin: 0;
	padding: 0 0 10px 0;
	font-size: 18px;
	font-weight: 500;
}

.block-quote img{
width: 80px;
height: auto;
display: block;
margin-bottom:20px;
}

.block-quote blockquote{
padding: 0 0 0 15px;
margin: 0;
border-left:5px solid #FF6900;
font-size: 16px;
font-weight: 100;
font-style: italic;
}


.block-quote h6{
padding:20px 0 0 0;
margin: 0;
font-size: 16px;
font-weight: 500;
}
.orange-bg{
  background: #fffaf6;
}
.blue-bg{
  background: #f0f2f9;
}
.ctabcontent{
  margin-top: 40px;
}
.ctabcontent h5{
  padding:0 0 10px 0;
}

.ctabcontent table{
  margin-bottom: 30px;
}



.sahatuna-plan li {
    margin: 0 !important;
    padding:0 !important;
    list-style-type: none !important;
    background:none !important;
    background-position:initial !important;
    color:initial !important;
    font-size: revert !important;
}


.border-rounded{
  border: 1px solid rgb(45, 48, 56, 40%);
    border-radius:15px;
    padding: 30px;
}

/* Punya */
.reward-webform #edit-captcha-response--2--description {
    display: none !important;
}

/* Liva-Insurance-Form style */
.liva-insurance-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

    @media (max-width:680px) {
        display: flex;
        flex-direction: column;
    }
}

.liva-insurance-form .form-control:not(input[type="checkbox"]) {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--form-border);
}

.liva-insurance-form .form-tel,
.liva-insurance-form .form-email {
    height: 100%;
}

.liva-insurance-form .service-offered-wrapper,
.liva-insurance-form .ministry-health-wrapper,
.liva-insurance-form .cr-copy,
.liva-insurance-form .company-brochure {
    margin: 0;
}

.liva-insurance-form .form-item-consent-message+#edit-actions {
    margin-top: 0;
}

/* form confirmation */
.liva-insurance-form .form-type-checkbox,
.liva-insurance-form .form-item-consent-message {
    grid-column: 1 / span 2;
}

.liva-insurance-form .form-type-checkbox .form-checkbox {
    width: 19px;
    height: 15px;
}

.liva-insurance-form .form-type-checkbox .form-checkbox:focus {
    border-bottom: 1px solid #80bdff !important;
    appearance: auto;
}

.liva-insurance-form .form-item-consent-message {
    margin-top: 0;
    margin-bottom: 0;
}

/* form confirmation end */

.liva-insurance-form .form-type-select .select2-selection__rendered[title="Nature of Business *"],
.liva-insurance-form .form-type-select .select2-selection__rendered[title="Type of Coverage"] {
    color: var(--form-placeholder);
    font-size: 0.875rem;
}

/* form with discount */
.insurance-discount-included {
    max-width: 50rem !important;
}

.insurance-discount-included .insurance-form-container {
    display: grid;
    grid-template-columns: 1fr 12.5rem;
    gap: 1rem;

    @media (max-width: 576px) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }
}

.insurance-discount {
    display: grid;
    grid-template-columns: auto 1.75rem;
    grid-template-areas:
        'number percent'
        'first-text first-text'
        'second-text second-text';
    align-self: flex-start;
    background-color: var(--primary-light-blue);
    border-radius: 8px;
    padding: 0 0.75rem 1.25rem 1rem;
    width: 100%;

    @media (max-width: 576px) {
        grid-template-rows: min-content min-content;
        grid-template-areas: "number percent text-wrapper";
        text-align: center;
        justify-self: center;
        padding-bottom: 0;
        width: auto;
        order: -1;
    }
}
/* form with discount end*/

/* car-insurance-form */
.page-node-210 .hero-section.bannerform .content-wrapper {
    max-width: 50rem;
}
/* Liva-Insurance-Form style end */

/* login admin edit nav */
.region-primary:has(.contextual-region) {
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;
    width: fit-content;
    margin-top: 3rem;

}

.region-primary #block-rsa-base-primary-local-tasks .nav {
    top: 0 !important;
}

.region-primary nav ul {
    display: flex;
    flex-wrap: wrap;
    font-size: .875rem;
    list-style-type: none;
    margin: 1rem 0 2.5rem;
    padding: 0;
    border: none;
}

.region-primary nav ul li:first-child {
   display: flex;
   border: none;
   padding: 0;
}

.region-primary nav ul li:first-child a:nth-child(2) {
    display: none;
}

.region-primary ul:not(.contextual-links) a {
    border: 1px solid var(--form-border);
    display: block;
    padding: 1rem;
    position: relative;
    transition: all .4s ease-out;
}
/* login admin edit nav */

/* Rewards page */
.liva-insurance-form #edit-heading {
    grid-column: 1 / span 2;
}

.second-content-wrapper .insurance-form-container {
    padding: 2.25rem;
    background: white;
    border-radius: 6px;
    box-shadow: 0px 4px 9px 0px hsla(0, 0%, 0%, 0.05), 0px 17px 17px 0px hsla(0, 0%, 0%, 0.04), 0px 38px 23px 0px hsla(0, 0%, 0%, 0.03), 0px 68px 27px 0px hsla(0, 0%, 0%, 0.01), 0px 107px 30px 0px hsla(0, 0%, 0%, 0);
    width: 100%;
}
/* Punya */

#edit-consent-message p {
    max-width: 100%;
}

.page-medical-providers h6{
display: none;
}


.page-rewards .contentbx h2{
  margin-bottom: 0px;
  
}

.page-rewards .js-form-item h2{
font-size: 24px;
}


.page-rewards .faq{
    padding-block: 0;
    margin-top: 40px;
}

.page-about-us .inner-banner-image .imgbx::after, 
.page-management-team .inner-banner-image .imgbx::after, 
.page-contact-us .inner-banner-image .imgbx::after,
.page-news-media .inner-banner-image .imgbx::after,
.page-knowledge-center .inner-banner-image .imgbx::after,
.page-rewards .inner-banner-image .imgbx::after,
.membersingle .inner-banner-image .imgbx::after,
.page-car .hero-section .imgbx::after {
  display: none;
}

.rewardslist-img img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
}

.rewardslist-img{
  margin-bottom: 30px;
}

.rewards_block--block_1--header-wrapper{
  display: flex;
      justify-content: space-between;
          align-items: center;
             margin-bottom: 40px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 40px;
}

.rewards_block--block_1--header-wrapper .form--inline .form-item{
  display: flex;
      align-items: center;
}

.rewards_block--block_1--header-wrapper .form--inline .form-actions {
    clear: inherit;
    float: left;
}
.rewards_block--block_1--header-wrapper label {
    margin-bottom: 0;
    margin-right: 15px;
    font-size: 14px;
}

.rewards_block--block_1--header-wrapper .btn-primary {
    color: #fff;
    background-color: #FF6900;
    border-color: #FF6900;
}
.rewards_block--block_1--header-wrapper .btn-primary:hover {
    color: #fff;
    border-color: #FF6900;
}

.rewards_block--block_1--header-wrapper .form-control:not(input[type="checkbox"]) {
    border: none;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 220px;
    background: transparent;
}

.rewards_block--block_1--header-wrapper .form-item, .rewards_block--block_1--header-wrapper .form-actions {
    margin-top: 0;
    margin-bottom:0;
}

.rewards_block--block_1--header-wrapper .liva-insurance-form {
    display: flex;
}

.page-claims-self-service-whatsapp .contentbx ul:not([class]) {
    padding: 0;
    list-style-type: none;
}

.page-claims-self-service-whatsapp h6{
margin-bottom: 20px;
margin-top: 35px;
}

.page-claims-self-service-whatsapp .contentbx ul:not([class]) li:last-child{
  padding-bottom: 0;
}

div#edit-actions {
    width: auto;
}

.page-type-rewards .contentbx ul:not([class]){
  margin-bottom: 0;

}

.alphabetical-key ul:not([class]) li {
    background: transparent !important;
    padding: 0 !important;
  }

/* .alphabetical-key .has-content {
    margin: 0 0 10px 0!important;
    padding: 8px 13px !important;
    list-style-type: none;
    background: transparent !important;
    color: #000;
border: 1px solid #CBCDD4;
border-radius: 8px;
    font-size: 20px !important;
    text-align: center;
}

.alphabetical-key .no-content {
    margin: 0 0 10px 0!important;
    padding: 8px 13px !important;
    list-style-type: none;
    background: transparent !important;
    color: #000;
border: 1px solid #CBCDD4;
border-radius: 8px;
    font-size: 20px !important;
    text-align: center;
} */

.alphabetical-key .has-content, .alphabetical-key .no-content {
    list-style-type: none;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(203, 205, 212);
    border-radius: 8px;
    text-align: center;
    margin: 0px 0px 10px !important;
    padding: 8px 0px !important;
    background: transparent !important;
    font-size: 20px !important;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.alphabetical-key ul:last-child {
    margin-bottom: 0 !important;
}

.alphabetical-key ul:not([class]) {
  margin-top: 0 !important;
}

.dictionary-list .faq__question-container, .dictionary-list .accordion-body{
width:100% !important;
max-width: 100% !important;
}

.dictionary-list .faq__grid-container{
grid-template-columns:100%;
}

.page-insurance-dictionary .ctabs{
  margin-bottom: 40px !important;
}

.page-insurance-dictionary .contentbx h1, .page-insurance-dictionary .contentbx h2{
  margin-bottom: 0px !important;
}

.page-insurance-dictionary .no-content{
  color: #D2D5DB;
}

.page-insurance-dictionary .has-content{
color: #2D3038;
}

.has-content.active {
    background: #FF6900 !important;
    color: #fff !important;
    border-color: #FF6900;
}