@font-face {
  font-family: MontserratBook;
  src: url(../assets/src/library/fonts/Montserrat-Light.woff) format("woff"),
    url(../assets/src/library/fonts/Montserrat-Light.tff) format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: MontserratReg;
  src: url(../assets/src/library/fonts/Montserrat-Regular.woff) format("woff"),
    url(../assets/src/library/fonts/Montserrat-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: MontserratSemi;
  src: url(../assets/src/library/fonts/Montserrat-SemiBold.woff) format("woff"),
    url(../assets/src/library/fonts/Montserrat-SemiBold.ttf) format("truetype");
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: MontserratBold;
  src: url(../assets/src/library/fonts/Montserrat-Bold.woff) format("woff"),
    url(../assets/src/library/fonts/Montserrat-Bold.ttf) format("truetype");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: MontserratExtraBold;
  src: url(../assets/src/library/fonts/Montserrat-ExtraBold.woff) format("woff"),
    url(../assets/src/library/fonts/Montserrat-ExtraBold.ttf) format("truetype");
  font-style: normal;
  font-weight: 800;
}


:root {
    --clr-primary:#FF0000;
    --clr-secondary:#FFFCF7;
    --clr-white:#FFF;
    --clr-white-soft:#fcc;;
    --clr-black:#000;
  
    --clr-bg-grey-1: #F4F4F4;
    --clr-bg-grey-2: #F5F5F5;
    --clr-bg-grey-3:#F0F0F0;
    --clr-bg-grey-4:#D9D9D9;
    --text-accent:#FF0000;
    --text-secondary: #FF8080;
    --text-gray:#7F7F7F;
    --text-dark:#4A4A4A;

    /*====== Font Standard =======*/

    --header-text:72px/82px MontserratExtraBold,sans-serif;
    --header-mobile-text:52px/64px MontserratExtraBold,sans-serif;
    --title-text:40px/48px MontserratBold,sans-serif;
    --title-icon: 20px/26px MontserratSemi,sans-serif;
    --title-body: 22px/28px MontserratSemi,sans-serif;
    --body-title: 18px/24px MontserratBold,sans-serif;
    --body-text:15px/18px MontserratReg,sans-serif;
    --body-text2:17px/24px MontserratReg,sans-serif;
    --body-textbold:15px/18px MontserratSemi,sans-serif;



    


    --red-filter:brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(4570%) hue-rotate(355deg) brightness(107%) contrast(118%);
    --white-filter:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(181deg) brightness(103%) contrast(103%)

    /*=== z index ====*/
    --z-tooltip:10;
    --z-fixed:100;

    --header-height: 80px;


    --drop-shadow:0px 3px 30px #00000029;

}




  *,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    outline: 0;
    margin: 0;
    padding:0;
  }
  *:focus,
  *:after:focus,
  *:before:focus {
    outline: 0;
  }
  *:after,
  *:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }

  /* html {
    overflow-x:hidden;
  } */

 

  body {
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: white; */
    padding-top:80px;
    font-family: MontserratReg, sans-serif;
  }

  h5 {
    font-size: 18px;
    font-family: MontserratReg;
  }

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

  ol, ul, dl {
    padding:0;
    margin:0;
  }

  .tick-list {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 24px;
  }
  .tick-list li {
    background: url(../assets/img/ico-tickbold.webp) no-repeat left top;
    background-position-y: 5px;
    background-size: 20px 20px;
    margin-left:4px;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 18px;
  }

  a {
    text-decoration: none;
    color: var(--clr-primary);
  }

  b {
    font-family: MontserratBold;
  }
  button {
    border:none;
    background: none;
  }

  strong {
    font-family: MontserratBold;
  }

  hr {
    height:2px;
    background-color:#CCC;
    border:none;
  }

  .hr-vertical {
    width:1.3px;
    height: 60%;
  }

  .hr-vertical.black {
    background-color:#000;

  }

  .fa-star.checked {
    color:orange;
  }

  .row-custom {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:24px;
  }

  .col-custom-3 {
    flex: 0 0 auto;
    width: calc(25% - 18px);
  }


  .section {
    overflow: hidden;
  }


  .text__red {
    color:var(--clr-primary);
  }

.tp-bg-red {
    background-color: var(--clr-primary);
    color:#fff;
}



/* Menu navigation */

.header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left:0;
  width:100%;
  box-shadow: var(--drop-shadow);
  background-color: var(--clr-white);
  /* z-index: var(--z-fixed); */
  top: var(--wp-admin--admin-bar--height,0);
}
/*=============== NAV ===============*/
.nav__container {
  height: var(--header-height);
  background-color: var(--clr-white);
  z-index: 101;
  max-width: 1200px;
  padding: 0 15px;
  margin-inline: auto;
}

.nav__container.reverse { 
  flex-direction: row-reverse;
}
.nav__header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo-container {
  display: flex;
  align-items: center;
  gap:16px;
  height: 100%;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  width: 60px;
}

.nav__logo img{
  width: 100%;
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__toggle-menu, .nav__toggle-close {
  font-size: 1.25rem;
  color:var(--clr-black);
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
}
.nav__toggle-close {
  opacity: 0;
}




  .nav__link .dropdown__arrow, .nav__list > li span {
    pointer-events: none;
  }

  .jumbotron {
    margin:100px 0 160px;
  }


  .jumbotron h1 {
    font-family: MontserratSemi;
    font-size: 100px;
    font-weight: 800;
    color: #e91c24;
  }

  .jumbotron h1 span {
    color: #2c2d31;
  }

  .jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
  }

  .jumbotron hr {
    border: 1px solid #58595b;
  }

  .review-container {
    position: absolute;
    right: 0;
    bottom: -150px;
  }


  .review-tag {
    background-color: white;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0px 3px 20px #00000029;
    margin-top: -84px;
  }
  .review-tag span {
    font-size: 14px;
    font-family: MontserratSemi;
  }

@media screen and (max-width: 890px) {
  .product-navbar {
    justify-content: left !important;
  }

  .col-custom-3 {
    width: calc(50% - 18px) !important;
  }

}

@media screen and (max-width: 992px) {
  .bonaza-container {
    padding:24px 32px !important;
  }
}
@media screen and (max-width: 1200px) {

  .nav__list > li {
    border:1px solid var(--clr-bg-grey-3)
  }

  .dropdown__card.dropdown__desktop {
    display:none !important;
  }
  .dropdown__desktop .dropdown__col.border-right {
    border-right: none !important;
  }

  .dropdown__card.dropdown__mobile {
    display:block !important;
  }
  .nav__menu {
  
    font-family: MontserratSemi;
    box-shadow: var(--drop-shadow);
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    padding-block: 1.5rem 4rem;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    transition: top 0.4s, opacity 0.3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 0.5rem;
  }
  .nav__menu::-webkit-scrollbar-thumb {
    background-color: hsl(220, 12%, 70%);
  }

  .nav__menu .nav__list {
    width: 100%;
  }



  .dropdown__content {
    padding:0 1.5rem;
  }

  .products-body {
    flex-direction: column;
  }

  .tabs {
    flex-direction: row !important;
    justify-content: space-between;
    width: 100% !important;
    margin-bottom: 32px;
  }

  .col-custom-3 {
    width: calc(33.33% - 18px);
  }
}



.nav__menu {
  font-family: MontserratSemi;
  background-color: var(--clr-white);
  font-size:16px;
}


.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  transition: background-color 0.3s;
  cursor: pointer;
}


.nav__link > span {
  /* padding: 12px 16px;
  border-radius: 32px;
  background-color: transparent; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  /* transition: background-color .3s; */
}

.nav__link.active > span {
  /* background-color: var(--clr-white-soft) !important; */
  color: red;
}

  .nav__link.active .dropdown__arrow {
    transform: rotate(180deg);
  }


.menu-items {
  display: none;
}


.menu-items.show {
  display: flex;
}

.menu-country {
  display:none;
}

.menu-country.show {
  display:block;
}

.menu-buy {
  display:none;
}

.menu-buy.show {
  display:block;
}

.menu-product {
  display:none;
}

.menu-product.show {
  display:block;
}

.mobile-menu-product{
  display: none;
}

.mobile-menu-product.show{
  display: block;
}

.menu-product-links {
  display:none;
}

.menu-product-links.show {
  display:block;
}

.mobile-product-links {
  display: none;
  margin-left:8px;
}

.mobile-product-links.show {
  display: block;
}



.mobile-product-links li:not(:last-child) {
    border-bottom: 2px solid var(--clr-bg-grey-3);
    padding-bottom:16px;
}





.nav__quick-container {
  display: flex;
  align-items: center;
  height: 100%;

}

.nav__quick {
  display: none;
}

.nav__button {
  height: 100%;
  display: flex;
  align-items: center;
}


.dropdown__container {
  width:100%;
}

.dropdown__product__card {
  background-color: var(--clr-bg-grey-2);
  border-radius: 20px;
  margin:20px 0 !important;
  padding: 2rem 0;
  align-content: baseline;
  flex:1;
  cursor: pointer;
}

.dropdown__product__card:hover .product__title {
  color: var(--clr-primary);
  margin: 16px 0 26px;
}

.dropdown__product__card:hover .product__icon .img {
  margin-top: 0px;
}




.product__icon {
  margin-inline: auto;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s ;
}


.product__icon .img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 20px;
  transition: all .3s;
}

.dropdown__product__card:nth-child(1) .product__icon .img {
  background-image: url("../assets/img/product_motor.svg");
}
.dropdown__product__card:nth-child(1):hover .product__icon .img {
  background-image: url("../assets/img/product_motor_hover.svg");
}
.dropdown__product__card:nth-child(2) .product__icon .img {
  background-image: url("../assets/img/product_travel.svg");
}
.dropdown__product__card:nth-child(2):hover .product__icon .img {
  background-image: url("../assets/img/product_travel_hover.svg");
}
.dropdown__product__card:nth-child(3) .product__icon .img {
  background-image: url("../assets/img/product_dental.svg");
}
.dropdown__product__card:nth-child(3):hover .product__icon .img {
  background-image: url("../assets/img/product_dental_hover.svg");
}
.dropdown__product__card:nth-child(4) .product__icon .img {
  background-image: url("../assets/img/product_home.svg");
}
.dropdown__product__card:nth-child(4):hover .product__icon .img {
  background-image: url("../assets/img/product_home_hover.svg");
}
.dropdown__product__card:nth-child(5) .product__icon .img {
  background-image: url("../assets/img/product_bike.svg");
}
.dropdown__product__card:nth-child(5):hover .product__icon .img {
  background-image: url("../assets/img/product_bike_hover.svg");
}



.button__cta {
  font-size: 15px;
  font-family: MontserratSemi, sans-serif;
  background-color: var(--clr-primary);
  color: var(--clr-white);
  padding:12px 36px;
  border-radius: 32px;
  pointer-events: visible;

}
.button__cta.right-clear {
  margin-right: auto;
}

.review, .review img {
  height:100%;
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__toggle-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.show-icon .nav__toggle-close {
  opacity: 1;
  transform: rotate(90deg);
  color:var(--clr-primary);
  font-size: 36px;
}

/*=============== DROPDOWN ===============*/
.dropdown__arrow {
  font-size: 1.5rem;
  font-weight: initial;
  transition: transform 0.4s;
}
.dropdown__content, .dropdown__group, .dropdown__list, .dropdown__product__card {
  display: grid;
}

.dropdown__list  span{
  font-family: MontserratSemi;
    font-size: 16px;
    display: block;
}

.dropdown__card {
  background-color: var(--clr-white);
  height: 0;
  overflow: hidden;
  
  transition: height 0.4s;
}


 .dropdown__card.show {
    top: var(--header-height);
    height: max-content;
    opacity: 1;
    pointer-events: initial;
    cursor: initial;
  }

.dropdown__card.dropdown__desktop {
  display:block;
}

.dropdown__card.dropdown__mobile {
  display: none;
}
.dropdown__card.dropdown__mobile .menu-items {
  margin-left:16px;
}

.dropdown__content {
  row-gap: 1.75rem;
}

.dropdown__menu {
  height: 100%;
  max-height: 520px;
  
  /* overflow-y: overlay; */
  /* border-left: 2px solid var(--clr-bg-grey-3); */
  padding-left: 32px;
}

.dropdown__menu::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
}

.dropdown__menu::-webkit-scrollbar-track {
  background: white;        /* color of the tracking area */
}

.dropdown__menu::-webkit-scrollbar-thumb {
  background-color: red;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 2px solid white;  /* creates padding around scroll thumb */
}


/* .dropdown__col {
    padding-bottom:16px;
    padding-top: 16px;
} */
.dropdown__desktop .dropdown__col.border-right {
    border-right: 2px solid var(--clr-bg-grey-3);
}

.dropdown__mobile .dropdown__nav {
  flex-direction: column;
  align-items: flex-start;
}

.dropdown__mobile .dropdown__nav > span{
  display:flex;
  align-items: center;
}
.dropdown__mobile .dropdown__list {
  gap:12px;
}


.dropdown__content .dropdown__navbar {
  display: grid;
  row-gap:16px;
  padding:1em 0;
}

.mobile-menu-product > ul > li {
  font-family: MontserratSemi ;
  padding:16px 40px;
  border-bottom:2px solid var(--clr-bg-grey-3);
}


.mobile-buy-product {
  font-family: MontserratSemi ;
  padding:16px 40px;
  border-bottom:2px solid var(--clr-bg-grey-3);
}



/* .mobile-product-links  {
  background-color: var(--clr-primary);
} */



/* .mobile-menu-product li:hover{
  color:var(--clr-primary)

} */

.mobile_dropdown__content .mobile-menu-nav{
  /* padding:20px 24px; */

  border-bottom: 2px solid var(--clr-bg-grey-4)
}

.mobile_dropdown__content .mobile-menu-nav > span{
  display: block;
  padding:20px 24px;
  background-color: var(--clr-bg-grey-3);
}

.mobile-menu-nav:hover , .mobile-menu-nav.active {
  color:var(--clr-primary)
}
.mobile-menu-nav:hover > span , .mobile-menu-nav.active > span{
  padding-left:32px;
}

.mobile-menu-nav:hover > span .bx-arrow-back, .mobile-menu-nav.active > span .bx-arrow-back {
  opacity: 100%;
  margin-left:10px;
  font-size:24px;
}


.mobile-menu-nav .bx-arrow-back {
  transform: rotate(180deg);
  margin-left:18px;
  font-size:20px;
  opacity: 0%;
  transition:all .2s ease-out;
  pointer-events: none;
}

.mobile-buy-product {
  color:var(--clr-black)

}

.mobile-buy-product:hover,  .mobile-buy-product.active{
  color:var(--clr-primary);
  padding-left:48px;

}

.mobile-buy-product:hover > span .bx-arrow-back, .mobile-buy-product.active > span .bx-arrow-back {
  opacity: 100%;
  margin-left:10px;
  font-size:24px;
}











.dropdown__nav {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition:all .2s ease-out;
}

/* .dropdown__nav:hover , .dropdown__nav.active, .dropdown__mobile .dropdown__nav.active > span {
  padding-left:12px;
  color:var(--clr-primary)
} */

.dropdown__nav:hover , .dropdown__nav.active {
  padding-left:12px;
  color:var(--clr-primary)
}

.dropdown__nav .bx-arrow-back {
  transform: rotate(180deg);
  margin-left:18px;
  font-size:20px;
  opacity: 0%;
  transition:all .2s ease-out;
  pointer-events: none;
}

.dropdown__nav:hover .bx-arrow-back, .dropdown__nav.active .bx-arrow-back {
  opacity: 100%;
  margin-left:10px;
  font-size:24px;
}



.dropdown__group {
  /* padding-left: 2.5rem; */
  row-gap: 0.5rem;
}
.dropdown__group:first-child {
  margin-top: 1.25rem;
}
.dropdown__group {
  margin-bottom: 1.25rem;
}


.dropdown__icon i {
  font-size: 1.25rem;
  color: var(--first-color);
}
.dropdown__title {
  font-size: 18px;
  color:var(--clr-black)
}
.dropdown__list {
  row-gap: 0.25rem;
}
.dropdown__link {
  font-family: MontserratReg ;
  color: var(--text-dark);
  font-size: 14px;
  transition: color 0.3s;
}
.dropdown__link:hover {
  color: var(--clr-primary);
}

.dropdown__link.wait {
  cursor: wait;
}

/* Rotate dropdown icon */
.show-dropdown .dropdown__arrow {
  transform: rotate(180deg);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
/* @media screen and (max-width: 300px) {
  .dropdown__group {
    padding-left: 1.5rem;
  }
} */
/* For large devices */
@media screen and (min-width: 1200px) {
  /* Nav */
  .nav__container {
    /* height: calc(var(--header-height) + 2rem); */
    display: flex;
    justify-content: space-between;
    column-gap: 1.8rem;
  }

  .nav__header {
    width: initial;
  }
  /* .nav__menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
  } */

  

  .nav__toggle {
    display: none;
  }
  .nav__list {
    display: flex;
    column-gap: 1.8rem;
    height: 100%;
  }

  .nav__container li {
    display: flex;
  }
  .nav__link {
    padding: 0;
  }
  .nav__link:hover {
    background-color: initial;
  }

  .nav__link.wait {
    cursor: wait;
  }
  /* Dropdown */
  .dropdown__button {
    /* column-gap: 0.25rem;
    pointer-events: none; */
  }

 

  .dropdown__card {
    /* height: max-content; */
    position: absolute;
    left: 0;
    right: 0;
    top: 3.5rem;
    background-color: var(--clr-white);
    box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  }
  .dropdown__content {
    display: flex;
    column-gap: 3.2rem;
    max-width: 1200px;
    margin-inline: auto;
  }
  .dropdown__group {
    padding: 1rem 1rem 1rem 0;
    align-content: baseline;
    row-gap: 1.25rem;
    /* flex:1; */
  }
  .dropdown__group:first-child, .dropdown__group:last-child {
    margin: 0;
  }
  .dropdown__list {
    row-gap: 0.75rem;
  }

  .dropdown__button {
    cursor: pointer;
  }
 


  .dropdown__button > a > span {
    transition: color .3s;

  }

  .dropdown__button.active > a > span {
    color: red;
  }

 



  .nav__quick {
    display: block;
  }

  .nav__quick-container .dropdown__content{
    column-gap: 24px;
  }

  


}




/*  Map Section   */

#map-section {
  background-color: var(--clr-secondary);
  padding-bottom: 80px;
  margin-top:-70px;
  position: relative;
}

#map-section .subheading {
  font: var(--title-body);
  pointer-events: none;
}

#map-section .title {
  font:var(--header-text);
  pointer-events: none;
}

#map-section .title span{
  display: block;
}

.map-image img {
  width: 100%;
  height: 100%;
  /* margin-top: -110px; */
}

.country-content {
    position: absolute;
    font-size: 24px;
    width: 380px;
    display: grid;
    row-gap: 16px;
    padding: 32px;
    background-color: var(--clr-white);
    border-radius: 20px;
    box-shadow: var(--drop-shadow);
    opacity: 0;
    display: none;
    transition: all .3s ease-in-out;
    z-index: 99 !important;
}

.country-content.show {
  opacity: 1;
  display: block;
}

.country-content.right-bottom {
  bottom:0;
  right:0;
}

.country-content.right-top {
  top:0;
  right:0;
}

.country-content.left-bottom {
  bottom:0;
  left:0;
}

.country-content.left-top {
  top:0;
  left:0;
}

.country-content.center-top {
  top:0;
  left:50%;
  transform:translateX(-50%)
}

.country-content > * {
  margin-bottom:16px;
}
.country-content > *:last-child {
  margin-bottom:0px;
}

.country-info {
  position:re
}

.country-title {
  font-size: 28px;
  font-family:MontserratSemi;
  text-wrap: wrap;
}


.country-desc {
text-wrap: wrap;
}

.country-cta {
  font-size: 26px;
  font-family:MontserratSemi;
  color: var(--clr-black);
  transition: all .3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.country-cta:hover {
  color:var(--clr-primary);

}

.country-cta i {
  transform: rotate(180deg);
  font-size: 28px;
}

.exit-icon {
  position: absolute;
  right:18px;
  top:18px;
  cursor: pointer;
}

.exit-icon i{
  color:var(--clr-primary);
  pointer-events: none;
}




.map-content {
position: absolute;
  bottom:0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}



.map-info {
  text-align: center;
  position: absolute;
  bottom:0;
  top:auto;
  width: 100%;
  margin: 0 0 48px;
}

.map-modal:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px) !important;
}

.map-modal {
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  /* background-color: var(--clr-white); */
  z-index: 100000;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
}



.map-modal.show {
  opacity: 1;
  visibility:visible;
}

.modal-card {
  background-color: white;
  max-width: 920px;
  width: 100%;
  max-height: 100%;
  box-shadow: var(--drop-shadow);
  overflow-y: auto;
  overflow-x: hidden;
  margin: auto;
  position: relative;
  border-radius: 20px;
  padding:48px 56px;
  top:50%;
  transform: translateY(-50%);
}

.modal-card h2 {
  font:var(--title-text);
  margin-bottom:48px;
}

.modal-card li {
  margin-bottom: 4px;
}

.modal-card a > i{
  opacity: 0;
  transform: rotate(180deg);
  transition: opacity .3s ease;
}
.modal-card a {
  color: var(--text-gray);
  cursor: pointer;
  transition: all .5s ease;

  letter-spacing: .3px;
}

.modal-card a:hover {
  padding-left: 6px;
  color: var(--clr-primary);
}

.modal-card a:hover > i{
  opacity: 1
}

.modal-subtitle {
  font:var(--title-body)
}


/*==== PINPOINT ====*/

.map-container {
  position: relative;
  width:100%;
  max-width: 1364px;
  padding: 0 32px;
  /* margin:-160px auto 0; */
  margin:0 auto 0;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  user-select: none;
  cursor:grab;
}

.map-container::-webkit-scrollbar {
  display: none;
}

.map-visual {
  /* margin-top:-120px; */
  width: 1300px;
  position: relative;
}

.map-pins {
  display: block;
  width: 1300px;
  position:absolute;
  height: 100%;
  width:100%;
  left:0; top:0;
  z-index:999
}
.map-marker {
  padding: 0 7%;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

}

.map-pinpoint {
  position: absolute;
  cursor: pointer;
  z-index: 99;
  /* width: 100%;
  height: 100%; */
  /* left: 50% ;
  top: 50% ; */
  /* transform: translate(-50%,-50%) !important; */
  transform: scale(0.5);
}

.country {
  font-family: MontserratSemi;
  position: absolute;
    top: 24px;
    left: 50%;
    font-size: 19px;
    letter-spacing: 1px;
    transform: translateX(-50%);
    line-height: 22px;
    text-shadow: 0 2px 9px #fff,0 2px 9px #fff, 0px -1px 1px #fff;
}

.pin {
  width: 30px;
  height: 30px;
  z-index: 99 !important;
  border-radius: 50% 50% 50% 0;
  background: var(--text-dark);
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: -20px 0 0 -20px;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  -ms-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
}
.pin:after {
  content: '';
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #FFF;
  position: absolute;
  border-radius: 50%;
}
.pulse {
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  z-index: 9 !important;
  margin: 11px 0px 0px -12px;
  -webkit-transform: rotateX(55deg);
  -moz-transform: rotateX(55deg);
  -o-transform: rotateX(55deg);
  -ms-transform: rotateX(55deg);
  transform: rotateX(55deg);
  z-index: -2;
}
.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  -webkit-animation: pulsate 1s ease-out;
  -moz-animation: pulsate 1s ease-out;
  -o-animation: pulsate 1s ease-out;
  -ms-animation: pulsate 1s ease-out;
  animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-shadow: 0 0 2px 4px #FF0000;
  box-shadow: 0 0 2px 4px #FF0000;
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  -ms-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
@-moz-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}
@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}
@-o-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}



.exit-icon {
  position: absolute;
  top:24px;
  right: 24px;
  font-size: 42px;
  cursor:pointer;
}



.element-left{

  position: absolute;
  /* width: 330px; */
  width: 20%;
  bottom: 0;
  z-index: 1;
  margin-bottom: -150px;
}

.element-right{

  position: absolute;
  /* width: 265px; */
  width:14%;
  top:0;
  right:0;
  margin-top:50px;
}

.pump-logo {
    max-width:100px ;
}

.promo__swiper {

}

.swiper {
    margin-inline:initial;
    overflow: visible;
}


.headline-content {
    text-align: center;
    line-height: 2;
    margin-bottom: 64px;
}

.headline-content .title {
    font-family: MontserratBold;
    font-size: 38px;
    letter-spacing: 1.5px;
}
.headline-content .subtitle {
    font-family: MontserratBold;
    font-size: 16px;
    color: #5C5C5C;
    letter-spacing: 2px;
}

.headline-content p{
    font-family: MontserratReg;
    font-size: 18px;
    padding-top: 4px;
    letter-spacing: 1.35px;
    line-height: 1.6;
    width: 50%;
    margin: auto;
}

.button-wrapper {
    display: flex;
    justify-content: flex-end;
    gap:12px;
    padding-top: 32px;
}

.button-wrapper .swiper-button {
    width:40px;
    height: 40px;
}


.button-wrapper .swiper-button img {
    width: 100%;
}






/* shortcut nav bottom */

.navigation-card {
    background-color: var(--clr-white);
    margin: auto;
    max-width: 800px;
    display: flex;
    /* grid-gap:8px; */
    flex-wrap: wrap;
    justify-content: space-between;
    gap:8px;
    padding:24px 32px;
    border-radius: 20px;
    box-shadow: 0px 0px 50px #00000017;
    margin-block:16px;
    margin-inline: auto;
}

.nav-button {
  flex: 0 1 calc(20% - 8px); 
}

@media screen and (min-width: 992px) {
.partner-benefits > * {
  background-color: #F7F7F7;
  
}

.partner-content {
  padding: 0 48px;
}

.partner-success-item {
  margin-top:32px;
}

.partner-benefits {
  display: grid;
  grid-template-columns: repeat(2,1fr);
   background-color: #D1D1D1;
  gap : 1px;  
}

.partner-benefit-icon {
  flex: 2 !important;
}

.partner-benefit-desc {
  flex: 8 !important;
}
}

@media screen and (max-width: 993px) {
  #partner-info-section::before {

    width: 100% !important;;
}

.partner-benefit-item {
  padding:24px 0px !important;
  gap:24px !important;
  border-bottom: 1px solid #CCC;
  border-radius: 1px;
}

.partner-benefit-desc {
  text-align: left !important;
}

.hero-content {
  margin:0 8px;
}

.review-container {
    position: relative;
    margin: auto;
}
  
  /* #map-section .subheading {
  
    margin: 0;
  } */

  .dropdown__button > span{
    display: flex !important;
    justify-content: space-between;
  }

  .dropdown__menu {
    height: 100% !important;
    overflow-y: inherit !important;
  }
  .dropdown__link {
    font-family: MontserratSemi !important;
  }

  #map-section .title {
      font: var(--header-mobile-text);
  }

  

}

@media screen and (max-width: 768px) {

  #airasia-hero {
    background-position-x: 70% !important;
  }

  .airasiaSwiper{
    padding:40px 24px !important;
  }

  .headline-logo {
    margin-bottom: 16px !important;
  }

  #airasia-section .row {
    margin: 16px 0 48px !important;
}

  #airasia-hero h1 {
    font-size:36px !important
  }

  .sublogo-aa{
    width:120px !important;
    padding-inline: 0 !important;
  }

  .sublogo-tp {
    width: 60px !important;
    padding-inline: 0 !important;
  }

   .review-container {
    bottom: -175px !important;
  }

 

  .map-container {
    margin-top:50px !important
  }

   .map-info{
    top:80px;
    bottom: auto;
  }

    #map-section {
    margin-top: 0px !important;
  }
  #map-section .subheading {
    font-size: 15px;
    margin: 0;
  }

  #map-section .title {
    font-size: 26px !important;
    line-height: 30px !important;
  }
  /* 
 
  
  #map-section .title {
    font-size: 48px !important;
    line-height: 54px !important;
  } */

  .element-left{
  display: none;
  }

  .element-right{
    display: none;
  }


  .navigation-card {
    justify-content: center;
  }

  .nav-button {
    flex: 0 1 calc(33.33% - 8px);
  }

  .hero-headline h1 {
    font-size: 38px;
    text-align: center;
  }

  .hero-headline h4 {
    font-size: 22px;
    text-align: center;
   }

   .hero-headline {
    margin-right:0;
   }

   .campaign-card {
    margin-top:100px;
    margin-inline:16px !important;
   }

   .campaign-visual img {
    width: 100% !important;
    float: initial !important;
    margin-top: -100px;
   }
   .download-card {
    width:100% !important;
   }




  
  /* .navigation-card {
    grid-template-columns: repeat(3,1fr);
  }
  .nav-button:nth-last-child(-n + 2)  {
    justify-self: center;
  } */
}



@media screen and (max-width:577px) {
  .modal-container{
      /* padding:64px 20px !important; */

    max-height: 500px;
  }
  .map-pins {
    display: none;
  }

  .map-visual {
    width: 720px;
  }

  #map-section {
    padding-bottom: 24px;
  }

  #products-section {
    padding-top:0 !important;
  }
  #products-section h2{
    text-align: left !important;
    font-size: 30px !important;
    line-height: 36px !important;
    margin:16px !important;
  }

  .hero-content h1 {
    font-size: 32px !important;
  }

  .hero-content h5{
    font-size: 18px !important;
    line-height: 24px !important;
  }


  
  .product-container{
    padding:0 !important;
  }

 

  #partner-section h2, #partner-info-section h2, #partner-success-section h2 {
    font-size: 30px !important;
    line-height: 36px !important;
  }

  .partner-content {
    text-align: center !important;
  }

  

  #contact-section h2{
    font-size: 30px !important;
    line-height: 36px !important;
  }

  .button__cta.right-clear {
    margin-right: inherit;
  }

  #brands-section h2 {
    font-size: 30px !important;
    line-height: 36px !important;
    margin:16px !important;
  }
  

  .row-custom {
    width:100%;
    flex-flow: nowrap;
    justify-content: left;
    overflow-x: scroll;
    overflow-y: hidden;
    padding:32px !important;
    /* white-space: nowrap; */
  }
  
  .col-custom-3 {
    width: 100% !important;
    text-wrap: wrap;
  }

 

  /* #product-menu {
    width: 200%;
    overflow-y: scroll;
  } */
}



.nav-button a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    font-family: MontserratSemi;
    color:var(--clr-black);
    cursor: pointer !important;
 
}
.nav-button .nav-space {
    margin:12px 12px;
    transition: all .3s ease-in-out;
    position: relative;
}

.nav-button .nav-space:hover {
    margin:0px 12px 24px;
}

.nav-button .nav-space .nav-tag{
  
}

.nav-button a img {
    width: 100%;
    border:4px solid transparent;
    border-radius: 50%;
    transition: all .3s ease-in-out;
}

.nav-button a:hover img {
    border:4px solid red;
}

.nav-button a .product-name {
    text-align: center;
    font-size: 14px;
    letter-spacing: 1.1px;
    margin-top: 18px;
    color: var(--clr-black);
    transition: all .3s ease-in-out;
}

.nav-button a:hover .product-name {
    color: var(--clr-primary);
}




.swiper-pagination {
    margin-bottom: -5%;
}

.swiper-pagination-bullet-active {
    background-color: #6A6868 !important;
}

/*===  Products Section  ===*/


  #contactproducts-section {
    background-color:#F7F7F7;
    padding:24px 0 48px;
  }

#products-section {
  padding: 56px 0;
  position: relative;
  z-index: 3;
}

#products-section h2{
  font: var(--title-text);
  text-align: center;
  margin: 72px 16px 32px;
}


.product-navbar {

  position: relative;
  width:100%;
  max-width: 1364px;
  padding:32px;
  margin:0 auto;
  display:flex;
  gap:24px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  transition:all 0.5s ease-in-out;
  justify-content: center;
  /* 
  transform:scale(0.92);
  will-change:transform; */
  user-select: none;
  cursor:grab
}

.product-navbar.active {
  cursor:grabbing;
}


.product-navbar::-webkit-scrollbar {
  display: none;

}


.product-nav {
    
  min-width: 120px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:16px;
  background-color: var(--clr-white);
  box-shadow: var(--drop-shadow);
  border-radius: 20px;
  border:1.5px solid white;
  transition: all .3s ease;
}

.product-nav.active {
  background-color: red;
  color: white;
}



.product-nav:hover {
  border:1.5px solid var(--clr-primary);
  color:var(--clr-primary);
}

.product-nav:hover img{
  filter: invert(27%) sepia(99%) saturate(6799%) hue-rotate(356deg) brightness(95%) contrast(116%);
}

.product-nav.active img{
  filter: invert(100%) sepia(92%) saturate(31%) hue-rotate(341deg) brightness(107%) contrast(111%);
}

.product-nav span{
  font:var(--title-icon);
  color:var(--clr-black);
  transition: color .3s ease;
}

.product-nav:hover span{
  color:var(--clr-primary);
}

.product-nav.active span{
  color:var(--clr-white);
}

#product-items .product-item {
  border-radius: 30px;
  background-color: var(--clr-white);
  box-shadow: var(--drop-shadow);
  display:flex;
  flex-direction: column;

}

.product-container{
   width:100%;
  max-width: 1364px;
  padding:0 32px;
  margin:auto;
}


.product-content {
  padding:24px;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font:var(--body-title);
}

.product-desc {
  font:var(--body-text)
}

.product-cta {
  font:var(--body-textbold);
  color: var(--text-accent);
}





/* Partner Sections */


#partner-section {
  padding: 56px 0;
  background-color: var(--clr-secondary);
}

#partner-section h2, #partner-info-section h2, #partner-success-section h2 {
  font: var(--title-text);
  margin-bottom: 16px;
}

#partner-info-section, #partner-success-section {
    padding-top:96px;
    position: relative;
}

#partner-info-section::before {
  content:'';
    position:absolute;
    width:calc(60% +  84px);
    top:0;
    left:0;
    height: calc(100% + 64px);
    background-color: #F7F7F7;
    z-index: -999;
}

#partner-success-section h5 {
  font-size: 18px;
  letter-spacing: .4px;
  line-height: 28px;
  font-family: MontserratReg;
}


.partner-success {
  margin: 24px 0 ;
}

.partner-success h5 {
  text-transform: uppercase;

  letter-spacing: 1.5px !important;
  line-height: 20px !important;

}

.partner-success p {
  font-size: 18px;
  letter-spacing: .4px;
  line-height: 28px;
  font-family: MontserratReg;
}

/* #partner-section p {
  font:var(--body-text2)
} */

.partner-content {
  display: grid;
  place-content: center;
}

.partner-content > p {
  font-size: 18px;
  line-height: 24px;
}



.partner-benefit-item {
  display: flex;
  align-items: flex-start;
  padding:24px 32px;
  gap:16px;
}

.partner-benefit-icon {
  flex: 1;
}

.partner-benefit-desc {
  flex: 9;
}


.partner-visual {
  position: relative;
  overflow: hidden;
}

.partner-visual video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
}


.modal-container h2, .modal-container h4, .partner-benefit-desc h5{
  font-family: MontserratBold;
}

.partner-benefit-desc p{
  font-size:14px;
  line-height: 22px;
  letter-spacing: 0.2px;
  font-family: MontserratReg;
}


.partner-success-item {
  margin-bottom:32px;
}

.partner-success-item button{
  color:red;

}

.cta-partner-arrow {
  margin-left:4px;
  font-size: 24px;
  transform:rotate(180deg);
  vertical-align: middle;
}



 

#partner-hero {
  background: url('../assets/img/partnerbanner.webp') center/cover no-repeat;
  padding:108px 0;
  
}



.hero-content {
  color:white;
}

.hero-content h1{
  font-family: MontserratBold;
  letter-spacing: 0.8px;
  font-size: 40px;
  margin-bottom: 24px;
}

.hero-content h5{
  font-family: MontserratBook;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.2px;
  margin-bottom: 42px;
}

/* Airasia Section */


#airasia-hero {
  background: url('../assets/img/airasiabanner.webp') center/cover no-repeat;
  padding:108px 0;
}

#airasia-hero h1 {
  font-size: 60px;

}

.headline-logo {
  display: flex;
  align-items: center;
  gap:16px;
  margin-bottom: 32px;
}

.sublogo-aa {
  width: 190px;
  height: auto;
  padding-inline: 16px;
}

.sublogo-tp {
  width: 120px;
  height: auto;
  padding-inline: 16px;
}

.border-horizontal {
  height: 48px;
  width: 1px;
  background-color: white;
}


.airasia-headline h1 {
  font-family: MontserratBold;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0.8px;
  text-align: center;
}

.airasia-content {
  padding-inline:24px;
  text-align: left;
  height: 100%;
  margin: auto 0;
}

.airasia-content h2 {
  font: var(--title-text);
  
}

.airasia-content h3 {
  font: var(--title-icon);
  color: var(--clr-primary);
  margin-bottom: 16px;
}



.airasia-content p{
  line-height: 24px;
  margin-bottom: 32px;
 
}



.bonaza-container {
  padding:40px 48px;
  overflow:hidden;
  height: 100%;
}

.bonaza-content {
  overflow-y: auto;
  max-height: none;
}

.bonaza-content p, .bonaza-content b {
  font-size:14px !important;
  margin: 0 !important;
}

.bonaza-content h1 {
  font-family: MontserratBold;
  font-size: 30px;
  margin-top:24px;
}

.bonaza-content h2 {
  font-family: MontserratBold;
  font-size: 20px;
  line-height: 28px;
  color: red;
  margin:8px 0 24px;
}

.bonaza-content ol {
  margin-top: 8px;
  margin-left: 20px;
  list-style: lower-alpha;
  font-size: 14px;
  line-height: 21px;
}

.bonaza-content a {
  color:red;
  text-decoration: underline;
}
.bonaza-header {
  background-color: red;
  border-radius: 6px;
  color: white;


}

.bonaza-table > div {
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:12px 16px;
  
}

.bonaza-eligiblity {
  margin-top: 16px;
}

.bonaza-eligiblity p{
  line-height: 21px;
}

.bonaza-eligiblity p:first-child{
  margin-bottom:12px !important;
}




/* Modal */

#modal-section {
  position: relative;
  z-index: 9999;
}

/* #modal-section::before {
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition: 200ms ease-in-out;

}  */



#modal-section .overlay {
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition: 200ms ease-in-out;
}

#modal-section .overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-close {
    position: absolute;
  right:16px;
  top:16px;
}
  
.modal-close i {
  color:red;
  font-size: 42px;
}

.partnership-product .modal-container {
   padding:64px 56px;
}

.modal-container{
  /* padding:64px 56px; */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: 200ms ease-in-out;
  border-radius: 10px;
  z-index: 10;
  background-color: #fff;
  width: 1480px;
  max-width: 90%;
  overflow: auto;
  /* overflow-y: auto; */
  max-height:720px;
}

.modal-container.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* .modal-container .row, .modal-container .row > * {
  padding: 0;
  margin: 0;
} */



.modal-container span {
  font-size: 14px;
  letter-spacing: 0.4px;
  /* font-family: MontserratSemi; */
}

.modal-container h5 , .partner-success-item h5{
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.modal-container p {
  font-size: 18px;

}

.modal-desc {
  margin-top:16px;
  display: flex;
  flex-direction: column;
  gap:12px;
  margin-bottom: 32px;
}

.contact-partner-cta{
  margin:32px auto 0;
  padding:16px 32px;
  text-decoration: none;
  color:white;
  background-color: red;
  border-radius:32px;
  width: auto;
  
}


#brands-section {
  padding: 56px 0;
}

#brands-section h2{
  font: var(--title-text);
  margin-bottom: 48px;
  margin-top: 56px;
}

.marquee-brands {
  --gap:36px;
  position: relative;
  display: flex;
  overflow:hidden;
  user-select: none;
  gap:var(--gap);
  padding: 16px 0 32px;
}

.marquee-brands:hover .brand-items {
  animation-play-state: paused;
}

.brand-items {
  gap:var(--gap);
  flex-shrink: 0;
  display:flex;
  
  justify-content: space-around;
  min-width: 100%;
  animation: sliding 16s linear infinite;
    will-change: transform;
}

.brand-items .item {
  width:240px;
  height: 140px;
  border-radius:20px;
  overflow: hidden;
  box-shadow: var(--drop-shadow);
  border:1.5px solid white;
  transition: all .2s ease ;
  cursor: pointer;
  position: relative;
}

.brand-items .item img{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}


.brand-items .item:hover {
  border:1.5px solid red;
}

.brand-items-line {
  gap:var(--gap);
  flex-shrink: 0;
  display:flex;
  justify-content: space-around;
  min-width: 100%;
  animation: sliding 16s linear infinite;
    will-change: transform;
}

.brand-items-line .item {
  width:120px;
  height: 70px;
  border-radius:10px;
  overflow: hidden;
  box-shadow: var(--drop-shadow);
  border:1.5px solid white;
  transition: all .2s ease ;
  cursor: pointer;
  position: relative;
}

.brand-items-line .item img{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}


.brand-items-line .item:hover {
  border:1.5px solid red;
}

/* Airasia Page */

#airasia-section {
  padding: 56px 0;

}

#airasia-section .row {
  margin: 84px 0
}

/*Contact page*/


#contact-section h2{
  font: var(--title-text);
  margin-bottom: 16px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap) - 48px));
  }
}



@keyframes sliding {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
  
}


/* Footer section*/
footer {
    font-size: 12px;
    font-family: MontserratReg, sans-serif;
}

footer p {
    font-family: MontserratReg, sans-serif;
    color:var(--clr-white-soft);
}

.footer-top {
    padding: 38px 0;
    border-bottom: 1px solid var(--clr-white-soft);
}

.footer-title {
    font-size: 12px;
    font-family: MontserratSemi, sans-serif;
    color:var(--clr-white);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.footer-subtitle {
    font-size: 12px;
    font-family: MontserratSemi, sans-serif;
    color:var(--clr-white);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    opacity: .8;

}

.footer-nav {
    border-top:1px solid var(--clr-white-soft);
    margin-top: 38px;
    padding-top:38px;
}

.footer-nav > div:not(:last-child) {
    border-right: 1px solid var(--clr-white-soft);
}

footer ul {
    list-style: none;
    padding: 0;
    font-family: MontserratSemi, sans-serif;
}

footer li a{
    text-decoration: none;
    color:var(--clr-white-soft);
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer-bottom {
    padding: 38px 0;
}

.footer-bottom .brand_legal {
    display: flex;
    flex-wrap: nowrap;
    gap: 36px;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 16px auto;
    max-width: 720px;
}

.footer-copyright {
    font-size: 12px;
    font-family: MontserratSemi, sans-serif;
    color:var(--clr-white);
    letter-spacing: 1.3px;
    opacity: .8;
}
.footer-bottom .brand_legal img {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

.footer-col-1 ul{
  margin-top:16px;
}
.footer-col-1 ul li{
  margin-top:16px;
}

.footer-col-2 li{
  margin-bottom: 4px;
}

.footer-col-2 span{
  display:block;
}

.home-link {
  cursor: pointer;
  color: white;
  font-family: MontserratSemi;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: .3s all ease;
}

.home-link:hover {
  border-bottom: 1px solid white;
} 


/*temporary*/



.products-card{
    background-color: #F5F5F5;

    border-radius: 20px;
    padding: 32px 16px;

  }

  .products-body {
    display: flex;
   
  }

  .products-content {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .tabs {
    display: flex;
    flex-direction: column;
    width: 320px;
    padding: 10px 10px 0 10px;
    position: relative;
  }
  
  .tabs::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
  }
  
  .tab {
    color: #918F9A;
    cursor: pointer;
    padding: 10px;
    margin: 0 5px;
    position: relative;
    padding-bottom: 20px;

  }
  
  .tab:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: transparent;
    bottom: 0;
    left: 0;
  }
  
  .tab.active, .tab:hover {
    color: #000;
    background-color: var(--clr-white);
    border-radius: 40px;
  }
  
  .tab.active:after, .tab:hover:after {
    bottom:-8px;
    background-color: #E6E6E6;
  }
  .taxonomy-content {
    display: none;
  }
  
  .taxonomy-content.active {
    display: block;
  }

  .product-container {
    position: relative;
  }

  .product-banner {

  }



.button__action {
    background-color: var(--clr-primary);
    color:var(--clr-white) !important;
    border-radius: 30px ;
  
  }

.button__action{
    
}


  .mySwiper {
    padding:0 56px;
  }
  

  .swiper {
    height: auto;
  }
  
  .swiper-slide {
    display: flex;
    flex-direction: column;
    height: 100% !important; 
    box-sizing: border-box;
  }

  /* Airasia Swiper */

  .airasiaSwiper {
  width: 100%;
  padding: 40px 0;
  overflow: hidden;
}

.airasia-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.airasia-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.airasia-card h3 {
  font-family: MontserratBold;
  font-size: 30px;
  margin-top: 18px;
}

.airasia-card p {
  font-size: 18px;
  font-family: MontserratSemi;
  color: red;
  margin: 12px 0;
}

.airasia-button {
  display: inline-block;
  padding: 12px 24px;
  background: red;
  color: white;
  text-decoration: none;
  border-radius: 52px;
  margin: 8px 0 16px;
}

.airasia-button:hover {
  background: darkred;
}




  /* Magnific Popup */

  .image-source-link {
    color: #98C3D1;
  }
  
  .mfp-with-zoom .mfp-container,
  .mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    /* ideally, transition speed should match zoom duration */
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
  }
  
  .mfp-with-zoom.mfp-ready .mfp-container {
      opacity: 1;
  }
  .mfp-with-zoom.mfp-ready.mfp-bg {
      opacity: 0.8;
  }
  
  .mfp-with-zoom.mfp-removing .mfp-container, 
  .mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
  }