/*----------------------------------- FIRST SECTION -----------------------------------*/
 .inner-banner-section {
   background-color: #DEECDD;
   background-image: linear-gradient(to bottom, #06060600, rgba(222, 236, 221, 0)), url('./../../img/OurB-Header-Background.jpg');
   background-size: cover;
   background-position: bottom center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   /* mix-blend-mode: multiply; */
   /* filter: contrast(1.5);
  pointer-events: none;
  opacity: .2; */
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;
   /* TWEENER - IE 10 */
   display: -webkit-flex;
   /* NEW - Chrome */
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   align-items: center;
   flex-wrap: wrap;
 }

 /* .c-section--1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #06060600, rgb(222, 236, 221));
  pointer-events: none;
  max-height: 50%;  
} */

 .search-container,
 .big-header h3 {
   position: relative;
   z-index: 2;
 }

 @media (max-width: 767px) {
   .inner-banner-section {
     background-image: linear-gradient(to top, #06060600, rgba(159, 223, 249, 0)), url('./../../img/our-b-bg-mbl.jpg');
     background-attachment: unset !important;
     align-items: flex-end !important;
   }

 }

 @media screen and (min-width: 768px) and (max-width: 1024px) {
   .c-section--1 {
     background-image: linear-gradient(to top, #06060600, rgba(159, 223, 249, 0)), url('./../../img/our-b-header-bg-i.jpg');
     background-attachment: unset !important;
   }
 }

 /* landscape */
 @media screen and (min-width: 300px) and (max-width: 1024px) and (orientation: landscape) {

   .c-section--1 {
     background-image: linear-gradient(to top, #06060600, rgba(159, 223, 249, 0)), url('./../../img/our-b-header-bg-i.jpg');
     background-attachment: unset !important;
     padding-bottom: calc(var(--section-padding) / 3) !important;
   }

   .big-header {
     padding-top: 4rem;
   }
 }

 /*----------------------------------- END FIRST SECTION -----------------------------------*/



 /*----------------------------------- SECOND SECTION -----------------------------------*/

 .c-section--2 {
   background: linear-gradient(to top, #06060600, rgba(222, 236, 221, 0.72));
   background-color: var(--white-color);
 }

 .c-section--2::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, #06060600, rgba(222, 236, 221, 0.8));
   pointer-events: none;
   /* max-height: 50%; */
 }

 .c-section--2::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #fff);
   pointer-events: none;
   max-height: 30%;
   z-index: -1;
 }

 /* our business card */
 .property-card-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
   /* margin: 20px 0 auto; */
   /* max-width: 1220px; */
 }

 .property-card {
   position: relative;
   margin: 10px;
   background-color: white;
   /* box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5); */
 }

 .property-card-thumb {
   position: relative;
   max-height: 400px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   width: 500px;
   border-radius: 0.45rem;
   height: 400px;
 }

 .property-card-thumb::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.05);
   z-index: 1;
 }

 .property-card-thumb::after {
   position: absolute;
   top: 0;
   display: block;
   content: "";
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(2, 44, 123, 0.829), rgb(2, 44, 123));
   transition: 0.3s ease-in-out all;
   opacity: 0;
   z-index: 2;
   border-radius: 0.45rem;
 }

 .property-card-image {
   transition: 0.5s ease-in-out;
   filter: contrast(110%);
   border-radius: 0.45rem;
   height: 400px;
   width: auto;
   object-fit: cover;
 }

 .property-card-caption {
   position: absolute;
   top: 50%;
   left: 0;
   z-index: 3;
   /* padding: 0 20px; */
   color: white;
   transform: translateY(-50%);
   text-align: center;
   transition: 0.3s ease-in-out all;
   opacity: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   flex-direction: column;
 }

 /* make the main title at the top */
 .property-card-title {
   position: absolute;
   top: 15px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 3;
 }

 .property-card-title {
   max-height: 85px;
 }

 .property-card-title h2 {
   font-family: "Stone Sans, SemiBold";
   font-size: 1.3rem;
   color: var(--white-color);
   line-height: 28px;
   text-shadow: 3px 3px 6px #0000006F;
   text-overflow: ellipsis;
   overflow: hidden;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   font-weight: inherit;
 }

 .property-card-title p {
   color: var(--white-color);
   font-size: 1.1rem;
 }

 p.property-card-snippet {
   display: -webkit-box;
   color: var(--white-color);
   font-size: .9rem;
   max-height: 150px;
   margin: 20px 0;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: 0.5s ease-in-out;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
   /* max-width: 444px; */
   padding: 0 70px;
 }

 .property-card-button {
   display: inline-block;
   transition: 0.3s ease-in-out all;
 }


 /* product tab */
 .product-tab-header a {
   margin-right: 13px;
   margin-bottom: 13px;
   font-size: 0.9rem;
   font-family: "Stone Sans, SemiBold";
   letter-spacing: 1.26px;
   padding: 15px 15px;
   float: left;
   clear: right;
   text-decoration: none;
   cursor: pointer;
   text-align: center;
   border: 1px solid #70707042;
   border-radius: 0.45rem;
   width: 13em;
   height: 5em;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .product-tab-title.product-title-active {
   background-color: #103984;
   color: #fff;
 }

 .product-tab-d,
 .product-tab-m {
   display: none;
   animation: fadeIn ease 2s;
   -webkit-animation: fadeIn ease 2s;
   -moz-animation: fadeIn ease 2s;
   -o-animation: fadeIn ease 2s;
   -ms-animation: fadeIn ease 2s;
   position: relative;
 }

 .product-tab-d.tab-active,
 .product-tab-m.tab-active {
   display: block;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }


 .product-tab-parent {
   z-index: 2;
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
 }

 .product-tab-header {
   width: 100%;
   margin: 0 auto !important;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }


 /* on mobile product tab */
 .productab-m-wrapper {
   width: 100%;
   margin: 0 auto;
   display: none;
 }

 .product-tab-header-m {
   /* float: left;
  width: 230px; */
   position: relative;
   /* min-height: 33px; */
   cursor: pointer;
   background-color: var(--royal-blue-color);
   /* padding: 15px; */
   /* overflow: hidden;
  display: flex;
  flex-wrap: wrap; */
 }

 /* .product-tab-title-m:not(.product-title-active-m) {
  height: 0;
  max-height: 0;
  transition: .2s ease-in-out all;
} */

 .product-tab-header-m>a {
   width: 100%;
   float: left;
   color: #D6D6D6;
   font-size: 15px;
   text-decoration: none;
   overflow: hidden;
   text-align: center;
 }

 .product-tab-title-m {
   transition: unset !important;
 }


 /* arrow on mobile */
 .property-card-arrow-m {
   display: none;
 }

 .property-card-arrow-m {
   text-align: center;
   margin: 0;
   position: absolute;
   bottom: 0;
   left: 50%;
   transition: .3s ease-in-out all;
   transform: translate(-50%, -50%);
   z-index: 3;
 }

 .property-card-arrow-m a {
   display: inline-block;
   pointer-events: none;
   transition: .3s ease-in-out all;
 }

 .property-arrow-m {
   display: inline-block;
   position: relative;
 }

 .property-arrow-m::after {
   content: '';
   display: inline-block;
   background-image: url('./../../img/main-btn-white-fill.svg');
   width: 28px;
   height: 28px;
   transition: .3s ease-in-out all;
   background-repeat: no-repeat;
 }

 /* hide on desktop */
 .swiper.swiper-product {
   display: none;
 }



 /* toggle btn for tabs */
 .dropdown-switch:checked+.dropdown-options-filter .dropdown-select {
   visibility: visible;
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1) translateX(-50%);
 }

 .dropdown-switch:checked+.dropdown-options-filter .dropdown-filter:after {
   transform: rotate(-135deg);
 }

 .dropdown-options-filter {
   position: relative;
   width: 100%;
   cursor: pointer;
   display: block;
 }

 .dropdown-filter {
   position: relative;
   border: 1px solid #70707042;
   border-radius: 0.45rem;
   margin: 0 0.2em;
   transition: .3s ease-in-out all;
   cursor: pointer;
   min-width: 12em;
   min-height: 3em;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: .2em .4em;
   border-radius: 0.45rem;
   font-size: .9rem;
   color: var(--white-color);
   font-family: 'Stone Sans, SemiBold';
   text-transform: uppercase;
 }

 .dropdown-filter::after {
   content: "";
   position: absolute;
   top: 45%;
   right: 10px;
   width: 6px;
   height: 6px;
   -webkit-transform: translateY(-50%) rotate(45deg);
   transform: translateY(-50%) rotate(45deg);
   border-right: 2px solid #b3b3b3;
   border-bottom: 2px solid #b3b3b3;
   transition: 0.2s ease;
 }

 .dropdown-select {
   position: absolute;
   top: 100%;
   width: 100%;
   overflow: hidden;
   background: var(--white-color);
   border-top: 1px solid #eee;
   border-radius: 0.45rem;
   z-index: 1;
   background: #fff;
   -webkit-transform: scale(1, 0);
   transform: scale(1, 0) translateX(-50%);
   -webkit-transform-origin: top center;
   transform-origin: top center;
   visibility: hidden;
   transition: 0.2s ease;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   left: 50%;
   min-width: 20em;
   margin-top: 15px;
 }

 .dropdown-select-option {
   padding: 10px;
   box-sizing: border-box;
   cursor: pointer;
   font-family: "Noto Sans, Light";
   font-size: .9rem;
   transition: 0.2s ease;
   color: var(--dark-blue-color);
 }

 .dropdown-select-option.product-tab-title-m.product-title-active-m {
   background: #f8f8f8;
   font-family: "Noto Sans, Black" !important;
   color: #022C7B;
 }



 /* codes for toggling the product desc in mobile and ipad */
 .property-card-thumb.clickedd .property-card-caption {
   max-height: 300px !important;
   opacity: 1;
 }



 @media (max-width: 767px) {

   .c-section--2 {
     padding-top: calc(var(--section-padding) / 2) !important;
   }

   .product-tab-d,
   .product-tab-m {
     padding-top: 60px;
   }

   .swiper-pagination.swiper-pagination-product {
     display: block !important;
   }

   .property-card-container {
     display: none !important;
   }

   .swiper.swiper-product {
     display: block !important;
   }

   .property-card-arrow-m {
     display: block !important;
   }

   .property-card-caption {
     left: 0;
     transform: translateY(-50%);
   }

   .property-card-thumb {
     width: 100% !important;
     height: 100% !important;
     max-height: unset !important;
     overflow: unset !important;
   }

   .property-card-image {
     width: 100%;
     height: 355px;
     object-fit: cover;
   }

   .property-card-title h2 {
     font-size: 1rem !important;
     margin-bottom: 5px !important;
   }

   p.property-card-snippet {
     font-size: .8rem !important;
     max-height: 207px;
     /* overflow: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important; */
     padding: 0 15px !important;
   }

   .product-tab-parent {
     display: block !important;
     z-index: 2;
     position: absolute;
     margin: 0 auto;
     width: 100%;
     left: 0;
   }

   .product-tab-header {
     display: none !important;
   }

   .productab-m-wrapper {
     display: flex !important;
     justify-content: center;
   }

 }

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

   .product-tab-d,
   .product-tab-m {
     padding-top: 60px;
   }

   .swiper-pagination.swiper-pagination-product {
     display: block !important;
   }

   .property-card-container {
     display: none !important;
   }

   .swiper.swiper-product {
     display: block !important;
   }

   .property-card-arrow-m {
     display: block !important;
   }

   .property-card-caption {
     left: 0;
     transform: translateY(-50%);
   }


   .property-card-image {
     width: 100%;
     height: 355px;
     object-fit: cover;
   }

   .property-card-title h2 {
     font-size: 1rem !important;
     margin-bottom: 5px !important;
   }

   p.property-card-snippet {
     font-size: .9rem !important;
     max-height: 207px;
     /* overflow: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important; */
     padding: 0 80px !important;
   }

   .product-tab-parent {
     display: block !important;
     z-index: 2;
     position: absolute;
     margin: 0 auto;
     width: 100%;
     left: 0;
   }

   .product-tab-header {
     display: none !important;
   }

   .productab-m-wrapper {
     display: flex !important;
     justify-content: center;
   }

 }

 /* make the card desc visible on mobile */
 @media (max-width: 1024px) {

   .property-card-thumb.clickedd::after {
     top: 0;
     opacity: 1;
   }

   .property-card-thumb.clickedd .property-card-arrow-m a {
     transform: rotate(180deg);
   }

   .property-card-caption .main-btn {
     pointer-events: none;
   }

   .property-card-thumb.clickedd .property-card-caption .main-btn {
     pointer-events: all !important;
   }

   .property-card-thumb {
     width: 100% !important;
     height: 100% !important;
     margin-bottom: 2rem !important;
     max-height: unset !important;
     overflow: unset !important;
   }

 }

 /* make the card hover-able on desktop */
 @media (min-width: 1025px) {

   .property-card-thumb {
     max-height: 500px;
   }

   .property-card-thumb::after {
     top: calc(100% - 140px);
   }

   .property-card:hover .property-card-caption {
     opacity: 1;
   }

   .property-card:hover .property-card-thumb::after {
     top: 0;
     opacity: 1;
   }

   .property-card:hover p.property-card-snippet {
     margin: 20px 0;
   }

   .property-card-thumb:hover .property-card-arrow-m a {
     transform: rotate(180deg);
   }
 }

 /* For only Large Devices, Wide Screens */
 @media screen and (min-width: 1500px) {
   .property-card-thumb {
     width: 635px !important;
   }

   p.property-card-snippet {
     font-size: 1rem !important;
     padding: 0 100px !important;
   }

   .product-tab-header a {
     padding: 20px 30px;
     width: 14em;
     height: 6em;
   }
 }

 /*----------------------------------- END SECOND SECTION -----------------------------------*/


 /*----------------------------------- PROPERTY INVESTMENT SECTION -----------------------------------*/

 .c-section--3 {
   background-color: var(--white-color);
 }

 .c-section--3::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #D7ECE4);
   pointer-events: none;
   max-height: 450px;
 }

 @media (max-width: 767px) {
   .c-section--3 .container.full-width {
     max-width: unset !important;
     padding-left: var(--container-padding) !important;
     padding-right: var(--container-padding) !important;
   }
 }

 /* landscape */
 @media screen and (min-width: 300px) and (max-width: 1024px) and (orientation: landscape) {
   .c-section--3 {
     padding-top: calc(var(--section-padding) * 1.4) !important;
   }
 }

 /*----------------------------------- END PROPERTY INVESTMENT SECTION -----------------------------------*/


 /*----------------------------------- CONSTRUCTION SECTION -----------------------------------*/

 .c-section--4 {
   background: linear-gradient(to top, #ffffff75, #D7ECE4), url('./../../img/Construction-Background.jpg');
   background-size: cover;
   background-position: bottom center;
   background-repeat: no-repeat;
 }

 .c-section--4::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #D7ECE4);
   pointer-events: none;
   /* max-height: 450px; */
 }

 .c-section--4::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, #06060600, #FFF);
   pointer-events: none;
   max-height: 650px;
 }

 .banner-img-center img {
   max-width: 900px;
 }

 @media screen and (min-width: 1500px) {
   .banner-img-center img {
     max-width: unset;
   }
 }

 @media (max-width: 767px) {
   .banner-img-center img {
     max-width: 100% !important;
   }
 }

 /* landscape */
 @media screen and (min-width: 300px) and (max-width: 1024px) and (orientation: landscape) {
   .c-section--4 {
     padding-top: calc(var(--section-padding) * 1.4) !important;
   }

   .banner-img-center img {
    max-width: 100% !important;
  }
 }

 /*----------------------------------- END CONSTRUCTION SECTION -----------------------------------*/


 /*----------------------------------- SETIA VIRTUAL BUTTON -----------------------------------*/

 .setia-virtual-wrapper {
   position: fixed;
   z-index: 4;
   width: 100%;
   bottom: 100px;
   right: 0;
   transition: .3s ease-in-out all;
 }

 .setia-virtual-wrapper .container.large {
   padding-left: calc(var(--gap-padding) * .5);
   padding-right: calc(var(--gap-padding) * .5);
   max-width: 100% !important;
 }

 .setia-virtual-inner {
   float: right;
   clear: both;
   position: relative;
 }

 .setia-virtual-wrapper img {
   position: absolute;
   bottom: 0;
   right: 0;
   transition: .3s ease-in-out all;
 }

 .setia-virtual-wrapper img.svirtual-normal {
   max-width: 110px;
 }


 @media (max-width: 767px) {

   .setia-virtual-wrapper img {
     bottom: -35px;
   }

   .setia-virtual-wrapper img.svirtual-normal {
     max-width: 90px !important;
   }

   .setia-virtual-wrapper img.svirtual-expand {
     max-width: 200px !important;
   }

   .svirtual-close {
     position: absolute;
     cursor: pointer;
     padding: 4px 8px;
     display: block;
     background-color: #f01c2a;
     top: -65px;
     left: -40px;
     z-index: 2;
   }

 }

 /* make the toggle works on mobile and ipad */
 @media (max-width: 1024px) {

   .svirtual-expand-wrapper {
     visibility: hidden;
     opacity: 0;
     transition: .3s ease-in-out all;
   }

   .setia-virtual-wrapper {
     margin-bottom: 2rem;
   }

   .setia-virtual-inner.clickedd .svirtual-normal {
     opacity: 0;
   }

   .setia-virtual-inner.clickedd .svirtual-expand-wrapper {
     opacity: 1 !important;
     visibility: visible !important;
   }

   .svirtual-expand-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
     display: block;
   }

   .svirtual-close::before {
     content: '';
     background-image: url('./../../img/close-icon.svg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     width: 13px;
     height: 13px;
     display: inline-block;
     -webkit-filter: brightness(0) invert(1);
     filter: brightness(0) invert(1);
   }
 }

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

   .setia-virtual-wrapper {
     bottom: 60px;
   }

   .svirtual-close {
     position: absolute;
     cursor: pointer;
     padding: 4px 8px;
     display: block;
     background-color: #f01c2a;
     top: -110px;
     left: -40px;
     z-index: 2;
   }

   .setia-virtual-wrapper img.svirtual-expand {
     max-width: 230px !important;
   }

 }

 /* make it hover-able on desktop */
 @media (min-width: 1025px) {

   .setia-virtual-wrapper img.svirtual-expand {
     max-width: 270px;
     visibility: hidden;
     opacity: 0;
   }


   .setia-virtual-wrapper:hover img.svirtual-normal {
     opacity: 0;
   }

   .setia-virtual-wrapper:hover img.svirtual-expand {
     visibility: visible;
     opacity: 1;
   }
 }

 /*----------------------------------- END SETIA VIRTUAL BUTTON -----------------------------------*/


 /* ------------------------- CUSTOM-STICKY-BOX IN PROPERTY INVESTMENT SECTION -------------------------------------------------- */

 .custom-sticky-box-section {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }

 .custom-sticky-box-container {
   /* max-width: 1200px; */
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
   /* grid-gap: 35px; */
   /* margin: 0 auto; */
   padding: 40px 0;
   z-index: 2;
 }

 @media (min-width: 800px) {
   .custom-sticky-box-container {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (min-width: 500px) {
   .custom-sticky-box-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 767px) {
   .custom-sticky-box-container {
     max-width: 800px !important;
     display: block;
     padding: unset !important;
   }

   .custom-sticky-box-container .custom-sticky-box-card:nth-child(2),
   .custom-sticky-box-container .custom-sticky-box-card:nth-child(3) {
     height: unset;
     width: unset;
     margin-top: 1rem !important;
   }
 }

 .custom-sticky-box-container .custom-sticky-box-card {
   position: relative;
   max-width: 100%;
   height: auto;
 }

 .custom-sticky-box-container .custom-sticky-box-card {
   position: relative;
   width: 275px;
   height: 340px;
   margin: 0 auto;
   background: rgba(0, 0, 0, 0.634);
   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.355);
 }

 .custom-sticky-box-icon img {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   transition: .3s ease-in-out all;
 }

 .custom-threebox-inner.custom-threebox-inner1 .custom-sticky-box-icon img {
   max-width: 250px;
   -ms-transform: translate(-50%, -45%);
   transform: translate(-50%, -45%)
 }

 .custom-threebox-inner.custom-threebox-inner2 .custom-sticky-box-icon img,
 .custom-threebox-inner.custom-threebox-inner3 .custom-sticky-box-icon img {
   max-width: 250px;
   -ms-transform: translate(-50%, -45%);
   transform: translate(-50%, -45%);
 }


 p.custom-sticky-box-subs {
   color: var(--white-color);
   font-family: "Noto Sans, Regular";
   font-size: .9rem;
   letter-spacing: 1.4px;
   position: relative;
   padding-top: 20px;
   /* position: absolute;
  top: 50%;
  transform: translateY(-65%); */
 }

 .custom-sticky-box-container .custom-sticky-box-card .custom-sticky-box-wrapper {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: unset;
   align-items: unset;
   text-align: unset;
 }

 .custom-sticky-box-content {
   position: relative;
   width: 100%;
   height: 100%;
 }

 .custom-sticky-box-container .custom-sticky-box-card .custom-sticky-box-wrapper.custom-sticky-box-wrapper1 {
   box-sizing: border-box;
   padding: 15px;
   color: #fff;
 }

 .custom-sticky-box-container .custom-sticky-box-card .custom-sticky-box-wrapper.custom-sticky-box-wrapper1 h4 {
   margin: 0;
   padding: 0;
   font-size: 1.3rem;
   position: relative;
   z-index: 2;
   letter-spacing: 2.31px;
 }

 .custom-sticky-box-container .custom-sticky-box-card:nth-child(1) {
   background-color: #022c7b;
 }

 .custom-sticky-box-container .custom-sticky-box-card:nth-child(2) {
   background-color: #84754e;
 }


 .custom-sticky-box-container .custom-sticky-box-card:nth-child(3) {
   background-color: #8a8d8f;
 }

 .custom-sticky-box-arrow {
   text-align: center;
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transition: .3s ease-in-out all;
 }

 .custom-threebox-inner.custom-threebox-inner1 .custom-sticky-box-arrow,
 .custom-threebox-inner.custom-threebox-inner2 .custom-sticky-box-arrow,
 .custom-threebox-inner.custom-threebox-inner3 .custom-sticky-box-arrow {
   -ms-transform: translate(-50%, -45%);
   transform: translate(-50%, -45%);
 }

 .custom-sticky-box-arrow a {
   display: inline-block;
   pointer-events: none;
   transition: .3s ease-in-out all;
 }

 .custom-sticky-box-arrowtop {
   display: inline-block;
   position: relative;
 }

 .custom-sticky-box-arrowtop::after {
   content: '';
   display: inline-block;
   background-image: url('./../../img/main-btn-white-fill.svg');
   width: 55px;
   height: 55px;
   transition: .3s ease-in-out all;
 }


 /* hover the cards */
 .custom-sticky-box-hover-top,
 .custom-sticky-box-hover-bottom {
   transition: .6s ease-in-out all;
 }


 /* for description */
 p.custom-sticky-box-subs {
   opacity: 0;
   transition: .3s ease-in-out all;
 }



 /* custom threebox */
 .custom-threebox-wrapper {
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;
   /* TWEENER - IE 10 */
   display: -webkit-flex;
   /* NEW - Chrome */
   display: flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   align-items: center;
   flex-wrap: no-wrap;
   justify-content: flex-end;
   align-items: center;
 }

 .custom-threebox-container2 {
   flex-basis: 370px;
 }

 .custom-threebox {
   position: relative;
   height: 100%;
   width: 100%;
   padding: 30px;
 }

 .custom-sticky-box-hover-top h4 {
   color: var(--white-color);
   font-size: 1.3rem;
   letter-spacing: 2.31px;
 }

 .custom-threebox-inner.custom-threebox-inner2 {
   background-color: #022c7b;
   ;
 }

 .custom-threebox-inner.custom-threebox-inner2 {
   background-color: #84754E;
   height: 365px;
 }

 .custom-threebox-inner.custom-threebox-inner3 {
   background-color: #8A8D8F;
   height: 365px;
 }


 /* Sidebar */
 .custom-threebox-container1 {
   background-color: #022C7B;
   /* padding: 30px; */
   /* margin-right: 10px; */
   flex-basis: 370px;
   height: 365px;
   position: relative;
 }

 @media (max-width: 767px) {

   .custom-threebox-wrapper {
     flex-wrap: wrap;
   }


   .custom-sticky-box-hover-top h4 {
     font-size: 1.2rem;
     text-align: center;
   }

   .custom-threebox-container1 {
     margin-top: 30px;
     flex-basis: 100%;
     height: 295px;
     justify-content: center;
     align-items: center;
   }

   p.custom-sticky-box-subs {
     letter-spacing: unset;
   }

   .custom-threebox-inner.custom-threebox-inner1 .custom-sticky-box-icon img {
     max-width: 100%;
     width: 260px;
     height: 170px;
     object-fit: cover;
   }

   .custom-sticky-box-arrowtop::after {
     width: 35px;
     height: 35px;
     background-repeat: no-repeat;
   }

   .custom-threebox-inner.custom-threebox-inner2 {
     height: 295px;
   }

   .custom-threebox-container2 {
     flex-basis: 100%;
   }

   .custom-threebox-inner.custom-threebox-inner2 .custom-sticky-box-icon img,
   .custom-threebox-inner.custom-threebox-inner3 .custom-sticky-box-icon img {
     max-width: 100%;
     width: 260px;
     height: 170px;
     object-fit: cover;
   }

   .custom-threebox-inner.custom-threebox-inner3 {
     height: 295px;
   }
 }

 /* make the card desc visible on mobile */
 @media (max-width: 1024px) {
   .custom-threebox.clickedd .custom-sticky-box-hover-bottom p {
     opacity: 1;
   }

   /* change the backgorund image when toggle */
   .custom-threebox.custom-threebox-inner.custom-threebox-inner1.clickedd {
     background-image: linear-gradient(to bottom, rgba(2, 44, 123, 0.829), rgb(2, 44, 123)), url('./../../img/retails-bg.jpg');
   }

   .custom-threebox.custom-threebox-inner.custom-threebox-inner2.clickedd {
     background-image: linear-gradient(to bottom, rgba(132, 117, 78, 0.911), rgb(132, 117, 78)), url('./../../img/retails-bg.jpg');
   }

   .custom-threebox.custom-threebox-inner.custom-threebox-inner3.clickedd {
     background-image: linear-gradient(to bottom, rgba(138, 141, 143, 0.904), rgb(138, 141, 143)), url('./../../img/retails-bg.jpg');
   }

   /* hide the default image when toggle */
   .custom-threebox.clickedd .custom-sticky-box-icon img {
     opacity: 0;
   }


   /* when hover the arrow will go down */
   .custom-threebox.custom-threebox-inner.custom-threebox-inner1.clickedd .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner.custom-threebox-inner2.clickedd .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner.custom-threebox-inner3.clickedd .custom-sticky-box-arrow {
     -ms-transform: translate(-50%, 130%);
     transform: translate(-50%, 130%);
   }


   .custom-threebox.clickedd .custom-sticky-box-arrow a {
     transform: rotate(180deg);
   }

   .custom-threebox.clickedd .custom-sticky-box-arrowtop::after {
     background-image: url('./../../img/main-btn-blue-fill.svg');
   }

 }


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

   .custom-threebox-wrapper {
     padding-top: 3rem !important;
   }

   p.custom-sticky-box-subs {
     font-size: .9rem !important;
   }

   .custom-sticky-box-arrowtop::after {
     width: 40px !important;
     height: 40px !important;
   }

   .custom-threebox.custom-threebox-inner1:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner2:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner3:hover .custom-sticky-box-arrow {
     -ms-transform: translate(-50%, 180%) !important;
     transform: translate(-50%, 180%) !important;
   }

 }

 /* make the card hover-able on desktop */
 @media (min-width: 1025px) {

   /* for description */
   .custom-threebox:hover .custom-sticky-box-hover-bottom p {
     opacity: 1;
   }

   /* hover background image each cards */
   .custom-threebox-wrapper .custom-threebox:hover {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
   }

   .custom-threebox-wrapper .custom-threebox-inner1:hover {
     background-image: linear-gradient(to bottom, rgba(2, 44, 123, 0.829), rgb(2, 44, 123)), url('./../../img/retails-bg.jpg');
   }

   .custom-threebox-wrapper .custom-threebox-inner2:hover {
     background-image: linear-gradient(to bottom, rgba(132, 117, 78, 0.911), rgb(132, 117, 78)), url('./../../img/retails-bg.jpg');
   }

   .custom-threebox-wrapper .custom-threebox-inner3:hover {
     background-image: linear-gradient(to bottom, rgba(138, 141, 143, 0.904), rgb(138, 141, 143)), url('./../../img/retails-bg.jpg');
   }

   /* hide the default image when hover */
   .custom-threebox:hover .custom-sticky-box-icon img {
     opacity: 0;
   }

   /* when hover the arrow will go down */
   .custom-threebox.custom-threebox-inner1:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner2:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner3:hover .custom-sticky-box-arrow {
     -ms-transform: translate(-50%, 130%);
     transform: translate(-50%, 130%);
   }


   .custom-threebox:hover .custom-sticky-box-arrow a {
     transform: rotate(180deg);
   }

   .custom-threebox:hover .custom-sticky-box-arrowtop::after {
     background-image: url('./../../img/main-btn-blue-fill.svg');
   }

   .custom-threebox.custom-threebox-inner1:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner2:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner3:hover .custom-sticky-box-arrow {
     -ms-transform: translate(-50%, 170%);
     transform: translate(-50%, 170%);
   }
 }

 @media screen and (min-width: 1500px) {

   .custom-threebox-inner.custom-threebox-inner2,
   .custom-threebox-inner.custom-threebox-inner3 {
     height: 400px;
   }


   p.custom-sticky-box-subs {
     font-size: 1.05rem;
     /* transform: translateY(-100%); */
   }


   .custom-threebox.custom-threebox-inner1:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner2:hover .custom-sticky-box-arrow,
   .custom-threebox.custom-threebox-inner3:hover .custom-sticky-box-arrow {
     -ms-transform: translate(-50%, 155%);
     transform: translate(-50%, 155%);
   }

   .custom-sticky-box-hover-top h4 {
     font-size: 1.5rem;
   }

   .custom-threebox-container1 {
     flex-basis: 370px;
     height: 400px;
   }

   .custom-threebox-container2 {
     flex-basis: 370px;
   }
 }