@charset "UTF-8";
/* CSS Document */

/* ===================================================== GLOBAL ===================================================== */

@font-face {
    font-family: 'MOBold';
    src: url(fonts/Montserrat-Bold.eot);
    src: url(fonts/Montserrat-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/Montserrat-Bold.woff) format('woff'), url(fonts/Montserrat-Bold.ttf) format('truetype'), url(fonts/Montserrat-Bold.svg#Montserrat-Bold) format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U +0020-2212
}

@font-face {
    font-family: 'MOExtraBold';
    src: url(fonts/Montserrat-ExtraBold.eot);
    src: url(fonts/Montserrat-ExtraBold.eot?#iefix) format('embedded-opentype'), url(fonts/Montserrat-ExtraBold.woff) format('woff'), url(fonts/Montserrat-ExtraBold.ttf) format('truetype'), url(fonts/Montserrat-ExtraBold.svg#Montserrat-ExtraBold) format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U +0020-2212
}

@font-face {
    font-family: 'MOBook';
    src: url(fonts/GothamRounded-Book_gdi.eot);
    src: url(fonts/Montserrat-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/Montserrat-Regular.woff) format('woff'), url(fonts/Montserrat-Regular.ttf) format('truetype'), url(fonts/Montserrat-Regular.svg#Montserrat-Regular) format('svg');
    font-weight: 325;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U +0020-2212
}

@font-face {
    font-family: 'MOMedium';
    src: url(fonts/Montserrat-SemiBold.eot);
    src: url(fonts/Montserrat-SemiBold.eot?#iefix) format('embedded-opentype'), url(fonts/Montserrat-SemiBold.woff) format('woff'), url(fonts/Montserrat-SemiBold.ttf) format('truetype'), url(fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold) format('svg');
    font-weight: 350;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U +0020-2212
}
 
 
body {
    margin: 0;
    font-family: 'MOBook',Arial, Helvetica, sans-serif;
    background: #F9FAFB;
    color: #707070;
    line-height: 1.5;
	font-size: 14px;
}
.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}
.center {
    text-align: center;
} 
	
	
/* ===================================================== NAVIGATION ===================================================== */
.nav {
    background: #ffffff;
    border-bottom: 1px solid #d8d8d8;
    padding: 16px 0;
	z-index: 1
}
.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
	z-index: 1
}



.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
	z-index: 1
}
.logo {
    height: 70px;
	position:absolute;
	z-index: 20;
	margin-top: 12px
}
 
.nav-tag {
    font-weight: 700;
    font-size: 12px;
}
.hotline {
    text-align: right;
}
.hotline-label {
    font-size: 12px;
   
}
.hotline-number {
    font-weight: 700;
    color: #ff0000;
	 font-size: 15px;
	font-style: italic;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
} 



/* ===================================================== HERO ===================================================== */
.hero {
    background: #ffffff;
    padding: 120px 0 200px 0;
	 
}
.hero-title {
	color: #084E3B;
    font-size: 45px;
    font-weight: 900;
	font-family: 'MOExtraBold',Arial, Helvetica, sans-serif;
}
.accent {
    color: #0ce865;
}
.hero-sub {
    color: #777;
    margin: 20px 0;
	font-size: 16px
}


/* ===================================================== BIG SEARCH ===================================================== */

.mega-select {
  position: relative;
	max-width: 45rem;
	margin: 0 auto;
	z-index: 9999;
	 overflow: visible;
}

.trigger-wrap {
  width: 100%;
  padding: 24px 30px;
  border-radius: 40px;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.1);
  border: 2px solid #D8D8D8;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  position: relative;
}

.trigger-text {
  font-size: 14px;
  color: #707070;
}

.mega-select.selected .trigger-text {
  color: #023c40;
  font-weight: 600;
}

.primary-btn {
  background: #023c40;
  color: #ffffff;
  border: none;
  border-radius: 30px;
  padding: 15px 30px;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	font-size: 14px;
	position: absolute;
}

.primary-btn:hover {
  background: #01282a;
}

/* ===================== */
/* DROPDOWN */
/* ===================== */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
	max-width: 95vw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  padding: 20px;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: 0.25s ease;
	text-align: left;
	  z-index: 10000;
}

.mega-select.active .dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

 
 
/* =========================
HIDDEN SELECT (FIXED)
========================= */
 

.mobile-select {
  display: none;
}

.desktop-text {
  display: block;
}

 
/* =========================
TOM SELECT FIX (IMPORTANT)
========================= */
.ts-wrapper {
  width: 100%;
}

.ts-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px;
}

.ts-dropdown {
  z-index: 99999 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.ts-dropdown .optgroup-header {
  font-weight: bold;
  color: #023C40;
  font-size: 13px;
  padding: 8px 12px;
  background: #f5f5f5;
}

.ts-dropdown .option {
  padding: 10px 12px;
  font-size: 14px;
}

.ts-dropdown .option:hover {
  background: #f5f5f5;
}



/* ===================== */
/* GRID */
/* ===================== */
.regions {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr;;
  gap: 25px;
}

.regions .title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #023C40;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.items.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

/* ===================== */
/* ITEM */
/* ===================== */
.item {
  padding: 2px 0px;
  border-radius: 8px;
  display: block;
  text-decoration: none;
  color: #6D6D6D;
  font-weight: 500;
  transition: 0.2s;
	cursor: pointer
}

.item:hover {
   
	color: #0FE865;
}
 

.name {
  font-weight: 600;
}
 

/* active state */
.mega-select.active .trigger-wrap {
  border-color: #023c40;
  box-shadow: 0 0 0 3px rgba(2,60,64,0.1);
}



/* ===================================================== ACTION CARDS ===================================================== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: -100px;
    margin-bottom: 80px;
}
.card {
    background: #ffffff;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid #d8d8d8;
    transition: 0.3s;
	font-size: 12px;
	z-index: 1
}
.card:hover {
    transform: translateY(-4px);
   box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
              0 4px 6px -4px rgba(0,0,0,0.1);
}

.card h3{
	font-family: 'MOExtraBold',Arial, Helvetica, sans-serif;
	color: #084E3B;
	font-size: 18px
}

.card .icon {
    font-size: 28px;
    
	background: #eafcf0;
	width: 50px;
	height: 50px;
	display:flex;
    justify-content:center;
    align-items:center;
	border-radius: 1rem;
}

.card .icon img{
	height: 20px; 
	
}

.card .link {
    color: #ff0000;
    font-weight: bold;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	text-decoration: none
} 

.card .extra{
	margin-bottom: 20px
}



/* FEATURE SECTION */
 
.delay-section{
  padding:60px 20px;
	margin:auto;
  background:linear-gradient(135deg,#023C40,#118a63);
  border-radius:40px;
  padding:60px;
  /*display:flex;*/
  align-items:center;
  justify-content:space-between;
  gap:40px;
  color:white;
	z-index: 1;
	position: relative
   
}

 

.delay-content{
  max-width:480px;
}

.delay-icon img{
  width:45px;
    filter: brightness(0) invert(1);
	color: #ffffff
}

.delay-content h2{
  font-size:42px;
  font-weight:700;
  line-height:1.2;
	margin-top:0px;
  margin-bottom:10px;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
}

.delay-content p{
  font-size:18px;
  line-height:1.6;
  color:#d7f3ea;
  margin-bottom:30px;
}

.delay-btn{
  display:inline-block;
  background:white;
  color:#e60000;
  padding:14px 32px;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
  transition:0.3s;
}

.delay-btn:hover{
  background:#f5f5f5;
}

.delay-image img{
  max-width:680px;
  width:100%;
	position:absolute;
	z-index: 20;
	top: 110px;
	left: 460px
	
}



/* Mini search inside product card */
.mini-search {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.mini-search input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 12px;
}


.mini-search select {
       flex: 1;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 12px;
    appearance: none; /* remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px;
    padding-right: 30px;
}

.circle-btn {
    background: #ff0000;
    color: #fff;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center
} 





/* ===================================================== PROMOTION CAROUSEL ===================================================== */
.promotions {
    text-align: center;
    margin-bottom: 80px;
	clear: both;
    margin-top: 150px;
}
.section-title {
    font-size: 30px;
    margin-bottom: 20px;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	color: #084E3B
}
.carousel-wrapper{
position:relative;
}

.carousel{
overflow:hidden;
}

.promo-grid {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}
.promo-card {
    width: 320px;
    border-radius: 12px;
    transition: 0.3s;
}
.promo-card:hover {
    transform: scale(1.05);
}
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
	 z-index:20;
	display:flex;
align-items:center;
justify-content:center;
}

  

.arrow-icon path{
stroke:#ff0000;
	stroke-width:3;
}

.nav-arrow.left {
    left: -25px;
}
.nav-arrow.right {
    right: -25px;
} 


/* ===================================================== GLOBAL COVERAGE ===================================================== */
.coverage {
    padding: 60px 0;
}

.coverage-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
	 align-items:flex-end
}

.coverage-header h3{
	font-size: 30px;
    margin-bottom: 10px;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	color: #084E3B
}

.view-all {
    color: #ff0000;
    font-weight: 700;
    cursor: pointer;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	display: flex;
	align-items: center;
	text-decoration: none
}

.view-all:hover,.arrow-icon path :hover{
	color: #b10606;
}
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
}
.country-card {
    background: #ffffff;
    padding: 25px 12px;
    border-radius: 14px;
    text-align: center;
	display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:4px;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	color:#084E3B;
	border: 1px solid #D8D8D8;
	transition:0.25s;
	text-decoration: none
} 

.country-card:hover{
 
 box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.1);
	border: 1px solid #0FE865
}

.country-card img{
width:20px;
height:20px;
display:block;
margin:0 auto;
filter: invert(70%) sepia(65%) saturate(500%) hue-rotate(95deg) brightness(95%) contrast(105%);
} 

/* ===================================================== TESTIMONIAL ===================================================== */
.testimonial {
    text-align: center;
    padding: 80px 0;
	background: #ffffff
}

.testimonial h2{
	font-size: 50px;
    margin-bottom: 10px;
	font-family: 'MOBold',Arial, Helvetica, sans-serif;
	color: #084E3B
}

.testimonial-wrap {
    width: 1100px;
    margin:50px auto;
     
}


.slider {
    
    overflow: hidden;
}

.slide-row {
    display: flex;
    width: 4400px;
    transition: transform 0.5s ease-out;
}
.slide-col {
    position: relative;
    width: 1100px;
    height: 400px;
	

}
.testi-video {
    position: absolute;
    
    top: 0;
    right: 0;
    height: 100%;
  
}

.testi-video iframe{
    border-radius: 20px;
    width: 600px;
	height: 400px;
}

.testi-video img {
    height: 100%;
    border-radius: 10px;
    width: 320px;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

.testi-content:before  {
   content: '“';
    font-family: 'MOBold',Arial, Helvetica, sans-serif;
    position: absolute;
    font-size: 70px;
    top: 45px;
    left: 45px;
    color:#0FE865;
	z-index: 1
    
}

.testi-content {
    position: absolute;
 
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 170px;
    color: #4d4352;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    border-radius: 10px;
     padding: 65px 150px 35px 45px;
    user-select: none;
	text-align: left
}
.testi-content p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 30px;
	z-index: 20;
	position: relative
}
.testi-content h2 {
    font-size: 1.1rem;
    font-weight: normal;
    color: #013C40;
}
.indicator {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.indicator .testi-btn {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 4px;
    border-radius: 15px;
    background: #ff0000;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}
.testi-btn.active {
    width: 30px;
}


.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: auto;
}
.testimonial-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
}
.testimonial-img {
    width: 100%;
    border-radius: 12px;
} 


/* ===================================================== FOOTER ===================================================== */
.footer {
    background: #ffffff;
    border-top: 1px solid #d8d8d8;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    
} 



 /* ========================= */
/* TABLET RESPONSIVE */
/* ========================= */

@media (max-width:1024px){

 
.delay-content h2{
  font-size:36px;
}

.delay-image img{
  max-width:420px;
}

}



/* ========================= */
/* MOBILE RESPONSIVE */
/* ========================= */

@media (max-width:768px){

.delay-section{
  flex-direction:column;
  text-align:center;
  padding: 40px 30px 140px 30px;
}

.delay-content{
  max-width:100%;
}

.delay-content h2{
  font-size:30px;
}

.delay-content p{
  font-size:16px;
}

.delay-image{
  margin-top:30px;
}
	
.delay-image img{
        max-width:300px;
		left: 0;
		bottom: -20;
		top: inherit
}

.delay-btn{
  padding:12px 28px;
  font-size:16px;
}
	
.trigger-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
	width: auto;
    border-radius: 30px;
  }
	
	.trigger-text{
		padding: 12px 0;
		line-height: 1.5
	}	

  .primary-btn {
    width: 100%;
    position: static;
  }

   .dropdown {
    display: none !important;
  }

	 .regions {
    grid-template-columns: 1fr;
  }

  .items.two-col {
    grid-template-columns: 1fr;
  }
 
	.trigger-wrap {
    cursor: pointer;
  }
	
	
	 .desktop-text {
    display: none;
  }

  .mobile-select {
    display: block;
    flex: 1;
  }

  /* make Tom Select look like text */
  .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    font-size: 14px;
	  display: flex !important;
    justify-content: center;
    text-align: center;
	  line-height: 1.5 !important
	
  }
	
	.mobile-select .ts-control input {
    text-align: center !important;
		 
  }
	
	  .mobile-select .item {
    margin: 0 auto;
    text-align: center!important;
  }

  .ts-wrapper {
    width: 100%;
  }

  .ts-dropdown {
    z-index: 99999 !important;
  }
	
	.mobile-select .ts-control,
.mobile-select .ts-wrapper.single .ts-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
	
	.mobile-select .ts-control:focus,
.mobile-select .ts-control.focus {
  border: none !important;
  box-shadow: none !important;
}
	
	.mobile-select input {
  border: none !important;
  box-shadow: none !important;
}
	

}



/* ===================================================== MOBILE ===================================================== */

@media (min-width: 768px) {
	.mobile-hotline{
		display: none
	}
}

@media (max-width: 768px) {

	
	
	.mobile-hotline{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		z-index:1000;
		 display: flex;
		justify-content:center;
         text-align: center;
        align-items: center;
		background: #ff0000;
		padding: 5px 0px;
		color: #fff;
		margin: 0 auto
	}
	
	/* Sticky nav (below hotline) */
		.nav{
		position:fixed;
		top:30px;
		left:0;
		width:100%;
		z-index:999;
		 padding: 0;
		box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.1);
	     
		}
	
	.nav-left{
		width:100%;
		  display:flex;
		  justify-content:center;  
	}
	
	.mobile-hotline .hotline-number{
		color: #fff
	}
	
	.logo{
		height:60px;
		position:static; /* remove absolute */
		margin-top:10px;
		  
		display:block;
		 
	}
	
	.nav-arrow.left {
    left: -15px;
     }
	
	.nav-arrow.right {
    right: -15px;
    }
	
	.hero{
		padding: 180px 0 200px 0;
	}
	
    .hero-title {
        font-size: 32px;
		line-height: 1.1
    }
	
	.nav .hotline{
		display: none
	}
	
	.primary-btn{
		
	}
    
    .search-input {
        width: 100%;
    }
	
	.coverage-header{
		display: block
	}
     
	.testimonial h2{
		font-size: 32px
	}
	
	.testimonial h2 span{
		display: block
	}
	
	.testimonial-wrap{
		width: 350px;
		margin: 50px 10px
	}
	
	 .slide-row {
        width: 2400px;
    }
    .slide-col {
        
         width: 350px;
        height: 500px;
         
    }
	
	.testi-video iframe{
		width:100%;
		height:250px;
		border-radius:12px;
	}

     .testi-video {
      position: relative;
      bottom: 25%;
      top:initial;
		z-index: 30
     }

    .testi-video img {
        width: 200px;
    }

    .testi-content:before{
     top: 20px;
     left: 30px;
      font-size: 50px;
     }

    .testi-content {
        position: relative;
        width: 250px;
        height: 300px;
        padding:30px 30px 30px 30px;
        top:40%
    }
    .testi-content p {
        font-size: 0.9rem;
    }
    .testi-content h2 {
        font-size: 1rem;
        margin-top: 20px;
    }
	
	 
}