/*
 * Author: Encik Sepi
 * Project name: Sihaté Official
 * URL: http://sihate.com
 * Version: 2.0
 */

/* General */ 

@import url("tentang.css");
@import url("homepage.css");
@import url("navbar.css");
@import url("sahabat.css");
@import url("distributors.css");
@import url("popup-support.css");
@import url("general.css");
@import url("sale.css");
@import url("kategori.css");
@import url("katalog.css");

@import url("product/evoo.css");
@import url("product/sauda.css");
@import url("product/immune-booster.css");
@import url("product/honey-sauda.css");
@import url("product/honey-sauda-2.css");
@import url("product/evoo-lh.css");
@import url("product/evoo-eh.css");
@import url("product/vinegar-hawthorn.css");
@import url("product/vinegar-carob.css");
@import url("product/honey-pine.css");
@import url("product/honey-sauda.css");
@import url("product/evoo-sr.css");
@import url("product/mix-bee.css");
@import url("product/pomegranate-juice.css");
@import url("product/teenzeytun.css");
@import url("product/pomegranate-concentrate.css");
@import url("product/pomegranate-juice.css");
@import url("product/honey-sidr.css");
@import url("product/as-is.css");
@import url("product/sauda-oil.css");

@import url("sale/yes-2023.css");

@import url("component/sidebar-cart.css");


@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i");

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swa");

@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

body {
  background-color: #f5f0ec; /* #f5f0ec */
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
/*  color: #193b3b;*/
  color: #1d4949;
  /*padding-top: 56px;
  margin-top: 32px;*/
  /* STICK BAR */
}

@media (max-width: 576px) {
  body {
/*    padding-top: 48px;*/
  }
}

html,
body {
  overflow-x: hidden;
}

:root {

  --primary-green:#1d4949;
  --dark-green:#173b3b;
  --light-green:#007F61;

  --primary-orange:#faae42;

  --primary-beige:#f4ece1;
  --light-beige:#faf6f3;

}

.btn:focus,.btn:active, a:focus, a:active {
   outline: none !important;
   box-shadow: none;
}

#wrap {
  /* margin:2% auto; */
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  max-width: 1440px;
  /*box-shadow: -5px 0 29px 6px rgba(0,0,0,.02);*/
}

.pt10 {
    padding-top: 10px;
}

.pt20 {
    padding-top: 20px;
}

.pt30 {
    padding-top: 30px;
}

.pt40 {
    padding-top: 40px;
}

.pt50 {
    padding-top: 50px;
}

.pt60 {
    padding-top: 60px;
}

.pt70 {
    padding-top: 70px;
}

.pt80 {
    padding-top: 80px;
}

.pt90 {
    padding-top: 90px;
}

.pt100 {
    padding-top: 100px;
}

.pt120 {
    padding-top: 120px;
}

.pt150 {
    padding-top: 150px;
}

.pt180 {
    padding-top: 180px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.pb60 {
    padding-bottom: 60px;
}

.pb70 {
    padding-bottom: 70px;
}

.pb80 {
    padding-bottom: 80px;
}

.pb90 {
    padding-bottom: 90px;
}

.pb100 {
    padding-bottom: 100px;
}

.pb120 {
    padding-bottom: 120px;
}

.mt-100 {
    margin-top: -100px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt60 {
    margin-top: 60px;
}

.mt70 {
    margin-top: 70px;
}

.mt80 {
    margin-top: 80px;
}

.mt90 {
    margin-top: 90px;
}

.mt100 {
    margin-top: 100px;
}

.mt120 {
    margin-top: 120px;
}

.mt150 {
    margin-top: 150px;
}

.mt160 {
    margin-top: 160px;
}

.mt200 {
    margin-top: 200px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb60 {
    margin-bottom: 60px;
}

.mb80 {
    margin-bottom: 80px;
}

.mb100 {
    margin-bottom: 100px;
}

.mb150 {
    margin-bottom: 150px;
}

.mb200 {
    margin-bottom: 200px;
}

.mr10 {
    margin-right: 10px;
}

.ml25 {
    margin-left: 25px;
}

#sementara {
  height: 600px;
  background-color: #ccc;
}


/* General Button */

.btn-sihate-orange { 
  border-radius: 26px;
  padding: 1.5rem 2rem;
  font-size: 12px; 
  line-height: 0em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  background-color: transparent; 
  background-color: #faae42;
  color: #fff; 
  margin-top: 16px;
  transition: color .15s ease-in-out,
  background-color .15s ease-in-out,
  border-color .15s ease-in-out,
  box-shadow .15s ease-in-out;
}

.btn-sihate-orange:hover {
  background-color: #193b3b;
  color: #f9ae43;
  text-decoration: none;
}

/* BANNER SECTION */

#banner .banner-gambar {
  min-height: 640px;
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#banner .banner-text {
  background-color: #f7f3ef;
  height: 100%;
  min-height: 400px;
  padding: 56px;
}

#banner .banner-text .row {
  margin-left: 0;
  margin-right: 0;
}

#banner .banner-text .focus {
  background-color: #f9ae43;
  color: #633B03;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
  display: inline-block;
  padding: 6px 20px;
  border-radius: 16px;
  text-align: center;
}

#banner .banner-text h1 {
  color: #193b3b;
  font-size: 34px;
  line-height: 48px;
  font-weight: 500;
  font-family: 'Alegreya', serif;
}

#banner .banner-text h2 {
  color: #193b3b;
  font-size:15px;
  line-height: 24px;
  font-weight: 500;
}


#banner .premium-logo {
  position: absolute;
  bottom: -40px;
  left: -45px;
  opacity: 0.92;
}

#banner .premium-logo img {
  height: 100px;
}


@media (max-width: 920px) {
  #banner .banner-gambar {
    min-height: 400px;
  }
  #banner .premium-logo img {
    height: 80px;
  }
  #banner .premium-logo {
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -40px;
    opacity: 0.92;
  }
}

@media (max-width: 576px) {
  #banner .banner-gambar {
    min-height: 320px;
  }
  #banner .banner-text {
    min-height: 320px;
    padding: 56px 0px;
  }
  #banner .banner-text h1 {
    color: #193b3b;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    font-family: 'Alegreya', serif;
  }
  #banner .banner-text .focus {
    margin-bottom: 16px;
  }
  #banner .premium-logo img {
    height: 56px;
  }
  #banner .premium-logo {
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -30px;
    opacity: 0.92;
  }
}


/* BUTTON */

.btn-home {
  border:1px solid #193b3b;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 11px 32px;
  color:#193b3b;
  margin-top: 24px;
}


.btn-home:hover {
  background-color: #f9ae43;
  border:1px solid #f9ae43;
}

.btn-home-o {
  background-color: #f9ae43;
  border:1px solid #f9ae43;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
   padding: 11px 32px;
  color:#333;
  margin-top: 24px;
}

.btn-home-o:hover {
  background-color: #193b3b;
  border:1px solid #193b3b;
  color: #f9ae43;
}

.btn-home-o i {
  font-size: 18px;
  position: relative;
  top: 3px;
  margin-left: 4px;
}


/* KENAPA */

#kenapa {
  padding: 140px 0 40px;
  text-align: center;
}

#kenapa h1 {
  font-family: 'Alegreya', serif;
  font-size: 32px;
  line-height: 48px;
  font-weight: 500;
  margin-bottom: 72px;
  color: #193b3b;
}

#kenapa .kenapa-list .point {
  margin-bottom: 32px;
  padding: 8px 0px 24px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  font-size: 16px;
  text-align: left;
}

#kenapa .kenapa-list .point i {
  font-size: 34px;
  color: #633B03;
  margin-right: 8px;
  position: relative;
  bottom: -6px;
  opacity: 0.8;
  z-index: 2;
  opacity: 0.9;
}

#kenapa .kenapa-list .point .shade {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #f9ae43;
  position: absolute;
  opacity: 0.6;
  top:24px;
  left: 24px;
  z-index: 1;
}

#kenapa .sijil .btn-home-o {
  padding: 12px 48px;
  font-size: 11px;
  line-height: 20px;
}


@media (max-width: 920px) {
  #kenapa {
    padding: 80px 0;
    text-align: center;
  }
  #kenapa h1 {
    font-size: 30px;
    line-height: 48px;
    margin-bottom: 56px;
  }
}

@media (max-width: 576px) {
  #kenapa {
    padding: 56px 0;
    text-align: center;
  }
  #kenapa h1 {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 40px;
  }
  #kenapa .kenapa-list .point {
    margin-bottom: 16px;
  }
}



/* SENARAI PRODUK */

#senarai-produk {
  padding: 80px 32px;
}

#senarai-produk h1 {
  font-family: 'Alegreya', serif;
  font-size: 32px;
  line-height: 48px;
  font-weight: 500;
  margin-bottom: 72px;
  color: #193b3b;
}

#senarai-produk .box-produk {
  margin-bottom: 24px;
}

#senarai-produk .box-produk .gambar {
  min-height: 480px;
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#senarai-produk .box-produk .feed {
  margin-top: 16px;
}

#senarai-produk .box-produk .feed .nama {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}

#senarai-produk .box-produk .feed .harga {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 0;
}

#senarai-produk .senarai-logo {
  text-align: center;
  margin-top: 0;
  padding: 100px 0 0px;
  border-top: 1px solid #fff;
}

#senarai-produk .senarai-logo .pengiktirafan {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 40px;
  color: #808080;
}

#senarai-produk .senarai-logo img {
  height: 56px;
  opacity: 0.9;
}

#senarai-produk .senarai-logo ul li {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
}

@media (max-width: 1024px) {
  #senarai-produk {
    margin-bottom: -140px;
  }

  #senarai-produk .senarai-logo ul li {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 920px) {
  #senarai-produk {
    margin-bottom: -80px;
  }
  #senarai-produk h1 {
    font-size: 30px;
    line-height: 48px;
    margin-bottom: 56px;
  }
  #senarai-produk .box-produk .gambar {
    min-height: 400px;
  }
  #senarai-produk .senarai-logo .pengiktirafan {
    font-size: 13px;
  }
  #senarai-produk .senarai-logo {
    padding: 64px 0 0;
  }
  #senarai-produk .senarai-logo img {
    height: 40px;
  }
  #senarai-produk .senarai-logo ul li {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 24px;
  }
}

@media (max-width: 576px) {
  #senarai-produk {
    padding: 56px 0px;
  }
  #senarai-produk h1 {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 40px;
  }
  #senarai-produk .box-produk .feed {
    margin-top: 8px;
  }
  #senarai-produk .senarai-logo img {
    height: 36px;
  }
  #senarai-produk .senarai-logo ul li {
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 24px;
  }
}

/* KATA PAKAR */

#kata-pakar {
  padding: 100px 0;
}

#kata-pakar .container-fluid {
  max-width: 1200px;
}

#kata-pakar .box {
  background-color: #FDE5C3;
  border-radius: 12px;
}

#kata-pakar .box .feed {
  padding: 80px 64px 56px 80px;
}


#kata-pakar .box .feed .feedback {
  font-size: 33px;
  line-height: 52px;
  font-family: 'Alegreya', serif;
}


#kata-pakar .box .feed .feedback::before {
  content: '“';
  font-size: 80px;
  position: absolute;
  top:56px;
  left: 40px;
}


#kata-pakar .box .feed .nama {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

#kata-pakar .box .feed .jawatan {
  font-size: 13.5px;
  color: #333;
  width: 80%;
}

#kata-pakar .box .feed img {
  margin-top: 48px;
  height: 40px;
}

#kata-pakar .box .gambar {
  background-color: #faae42;
  padding: 24px 0px 0;
  margin-right: -40px;
}

#kata-pakar .box .gambar img {
}

@media (max-width: 1024px) {
  #kata-pakar .box .gambar {
    margin-right: -16px;
  }
}

@media (max-width: 920px) {
  #kata-pakar {
    padding: 24px 0 80px;
  }
  #kata-pakar .box .gambar {
    margin-right: 0px;
    margin-bottom: -40px;
  }
  #kata-pakar .box .feed {
    padding: 80px 48px 56px;
  }
  #kata-pakar .box .feed .feedback {
    font-size: 28px;
    line-height: 48px;
  }
}

@media (max-width: 576px) {
  #kata-pakar {
    padding: 56px 0;
  }
  #kata-pakar .box .feed {
    padding: 64px 32px 24px;
  }
  #kata-pakar .box .feed .feedback {
    font-size: 24px;
    line-height: 40px;
  }
  #kata-pakar .box .feed .feedback::before {
    content: '“';
    font-size: 80px;
    position: absolute;
    top:40px;
    left: 24px;
  }
  #kata-pakar .box .feed .nama {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }
  #kata-pakar .box .feed .jawatan {
    font-size: 13.5px;
    color: #333;
    width: 100%;
  }
  #kata-pakar .box .feed img {
    margin-top: 24px;
    height: 40px;
  }
  #kata-pakar .box .gambar {
    text-align: center;
  }
  #kata-pakar .box .gambar img {
    max-height: 320px;
  }
}


/* PESAN */

#pesan {
  margin: 240px 0 0;
  padding: 0 0 100px 0;
  background-color:#f7f3ef;
}

#pesan.monomark {
  background-image: url("../../images/homepage/sihate-monomark.svg");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 20%;
}


#pesan .sihate-monomark {
  position: absolute;
  bottom:24px;
  left:-56px;
  z-index: 1;
}

#pesan .sihate-monomark img {
  height: 160px;
}


#pesan .gambar {
  min-height: 640px;
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: relative;
  top:-64px;
}


#pesan .feed {
  padding: 100px 40px 64px 64px;
}

#pesan .feed .focus {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0 24px 8px 0;
  margin-bottom:32px;
  display: inline-block;
}

#pesan .feed i {
  color: #633B03;
  font-size: 40px;
  margin-right: 8px;
  position: relative;
  z-index: 2;
}

#pesan .feed .shade {
  height: 22px;
  width: 30px;
  border-radius: 10%;
  background-color: #f9ae43;
  position: absolute;
  opacity: 0.6;
  top:105px;
  left: 80px;
  z-index: 1;
}

#pesan .feed ul li {
  font-family: 'Alegreya', serif;
  font-size: 22px;
  line-height: 48px;
  font-weight: 400;
  margin-left: 24px;
  margin-bottom: 12px;
  color: #193b3b;
  counter-increment: inst;
}

#pesan .feed ul li a {
  color: #193b3b;
  padding-bottom: 6px;
  border-bottom: 2px solid #faae42;
}

#pesan .feed ul li a:hover {
  color: #faae42;
  text-decoration: none;
}

#pesan .feed ul li:before {
  content: counter(inst);
  color: #faae42;
  font-size: 22px;
  position: absolute;
  left: 64px;
}


#pesan .feed .more {
  text-align: right;
  margin-top: 24px;
  text-transform: uppercase;
}

#pesan .feed .more a {
  color:  #faae42;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

#pesan .feed .more a:hover {
  text-decoration: none;
  color: #193b3b;
}

#pesan .feed .more i {
  color:  #faae42;
  font-size: 22px;
  position: relative;
  top:3px;
}

@media (max-width: 920px) {
  #pesan {
    margin: 180px 0 0;
    padding: 0 0 64px 0;
  }
  #pesan .gambar {
    min-height: 400px;
    top:-40px;
  }
  #pesan .feed {
    padding: 64px 40px;
  }
  #pesan .feed .shade {
    top:68px;
    left: 56px;
    z-index: 1;
  }
  #pesan .feed ul li:before {
    left: 48px;
  }
}

@media (max-width: 576px) {
  #pesan {
    margin: 140px 0 0;
    padding: 0 0 40px 0;
  }
  #pesan .gambar {
    min-height: 320px;
    top:0px;
  }
  #pesan .feed {
    padding: 40px 0px;
  }
  #pesan .feed .focus {
    margin-bottom:16px;
  }
  #pesan .feed .shade {
    top:48px;
    left: 24px;
    z-index: 1;
  }
  #pesan .feed ul li {
    font-size: 18px;
    line-height: 36px;
    margin-bottom: 12px;
  }
  #pesan .feed ul li:before {
    left: 16px;
  }
}


/* PRE-FOOTER */

#pre-footer {
  background-color: #faae42;
  padding: 120px 32px;
}

#pre-footer .bantuan h1 {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: 1px;
  color:#633B03;
  border-bottom: 3px solid #633B03;
  display: inline-block;
  padding-bottom: 4px;
}

#pre-footer .bantuan p {
  color: #633B03;
  font-size: 14.5px;
  line-height: 23px;
  margin-top:0;
}

#pre-footer .bantuan ul {
  list-style: none;
  padding: 0;
  margin:0 0 16px 0;
}

#pre-footer .bantuan ul li {
  font-family: 'Alegreya', serif;
  color:#173b3b;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
}

#pre-footer .bantuan .phone {
  font-family: 'Alegreya', serif;
  color:#173b3b;
  font-size: 32px;
  line-height: 1.4em;
  font-weight: 700;
}

#pre-footer .bantuan .emel {
  font-family: 'Alegreya', serif;
  color:#173b3b;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}

#pre-footer .bantuan i {
  color: #633B03;
  font-size: 20px;
}

#pre-footer .bantuan .mt16 {
  margin-top: 8px;
}

/* PRE-FOOTER > Newsletter */

#pre-footer .newsletter {
  background-color: #173b3b;
  border-radius: 8px;
  padding: 40px 56px 50px;
  margin-left: 40px;
}


#pre-footer .newsletter h1 {
  font-family: 'Alegreya', serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #faae42;
}

#pre-footer .newsletter p {
  font-size: 14px;
  line-height: 23px;
  color: #fff;
  margin-bottom: 10px;
}

#pre-footer .newsletter form {
  margin-top: 0px;
  padding: 0px;
}

#pre-footer .newsletter .form-control {
  height: 48px;
  border-radius: 0; 
  border:0;
  border-bottom: 1px solid #eee; 
  background-color: transparent;
  padding: 0 2px;
  font-size: 14px;
  color: #fff;
}

#pre-footer .newsletter .form-control:focus {
  border:0;
  border-bottom: 1px solid #faae42; 
  outline:0px !important;
  -webkit-appearance:none;
  box-shadow: none !important;
  background-color: transparent;
}

#pre-footer .newsletter .btn-newsletter {
  z-index:1;
  height: 48px;
  padding: 0 0 0 32px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #eee;
}

#pre-footer .newsletter .btn-newsletter:hover {
  color: #faae42;
  border-color: #faae42;
}

#pre-footer .newsletter .email-octopus-success-message {
  color:#217e63;
}

@media (max-width: 920px) {
  #pre-footer {
    background-color: #faae42;
    padding: 80px 16px;
  }
  #pre-footer .newsletter {
    margin: 40px 0px 56px;
  }
}

@media (max-width: 576px) {
  #pre-footer {
    background-color: #faae42;
    padding: 80px 16px;
  }
  #pre-footer .newsletter {
    padding: 40px 24px 50px;
  }
}



/* FOOTER */

#footer {
  background-color: #173b3b;
  padding: 120px 0px 64px;
  color: #eee;
}

#footer.top-svg {
  background-image: url("../../images/homepage/pre-footer-wave.svg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: -100px;
  padding-top: 220px;
}

#footer .syarikat {
}

#footer .syarikat .logo img {
  width: 88px;
  margin-bottom: 16px;
}

#footer .syarikat p {
  font-size: 13.5px;
  line-height: 23px;
  margin-bottom: 6px;
  color: #e9e9e9;
}

#footer .syarikat p.focus {
  font-weight: 600;
  margin-bottom: 5px;
}


#footer .syarikat ul {
  margin-top: 8px;
  margin-bottom: 0;
  padding-bottom: 0;
}

#footer .syarikat ul li {
  margin-right: 4px;
}

#footer .syarikat ul li a {
  color: #faae42;
}

#footer .syarikat ul li a:hover {
  color: #fff;
}

#footer .syarikat i {
  font-size: 22px;
  opacity: 0.8;
}

/* FOOTER > Pautan */

#footer .pautan {
}

#footer .pautan h1 {
  font-family: 'Alegreya', serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #faae42;
}

#footer .pautan ul {
  list-style: none;
  padding: 0;
  margin:0;
}

#footer .pautan ul li {
  font-size: 14.5px;
  padding-bottom: 6px;
}

#footer .pautan ul li a {
  color: #e9e9e9;
}

#footer .pautan ul li a:hover {
  text-decoration: none;
  color: #faae42;
}

#footer .mr40 {
  margin-right: 40px;
}


@media (max-width: 920px) {
  #footer {
    padding: 0px 32px 64px;
  }
  #footer.top-svg {
    padding-top: 140px;
  }
  #footer .mr40 {
    margin-right: 0px;
    margin-top: 40px;
  }
  #footer .syarikat p.focus {
    font-weight: 600;
    margin-bottom: 0px;
  }
}

@media (max-width: 576px) {
  #footer.top-svg {
    padding-top: 80px;
  }
  #footer .pautan h1 {
    margin-top: 24px;
  }
}

/* BOOSTER BOX PROMO */

.booster-box-promo {
  margin:56px 0 -32px;
  padding: 40px;
  background: #FFEFBA;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #FFFFFF, #FFEFBA);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border:1px solid #d01f3c;

  /*box-shadow: -5px 0 29px 6px rgba(0,0,0,.03);*/
  border-radius: 8px;
  cursor: pointer;
}

.booster-box-promo p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6em;
  color: #333;
}

.booster-box-promo p.main {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #173b3b;
}

.booster-box-promo p.url {
  font-weight: 600;
  color: #faae42;
  border-bottom: 2px solid #faae42;
  display: inline-block;
  margin-top: 14px;
}

.booster-box-promo:hover p.url {
  color: #333;
}

.booster-box-promo p i {
  margin-left: 4px;
}

.booster-box-promo .jimat {
  color: #d01f3c;
  font-weight: 600;
}

.booster-box-promo b {
  /*border-bottom: 1px solid #faae42;*/
}

.booster-box-promo img {
  width:140px;
  float: right;
  margin-left: 40px;
}


@media (max-width: 576px) {
  .booster-box-promo {
    margin:40px 0 -24px;
  }
  .booster-box-promo img {
    width:200px;
    float: none;
    margin-left: 0px;
    margin-bottom: 16px;
  }
}


/* Ramadan Raya Promo */

#ramadan-raya {
  margin-top: -40px;
  padding: 100px 0 140px;
  background-position: center center;
  background-repeat: repeat;
  -webkit-background-size: 20%;
  -moz-background-size: 20%;
  -o-background-size: 20%;
  background-size: 20%;
  background-color: #f7f2ef;
}

#ramadan-raya img.logo {
  height: 160px;
  margin-bottom: 40px;
}

#ramadan-raya .offer h1 {
  font-family: 'Alegreya', serif;
  font-weight: 600;
  font-size:32px;
  text-align: center;
  margin-bottom: 80px;
}

#ramadan-raya .offer .gambar {
  height: 200px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 8px 8px 0 0;

}

#ramadan-raya .offer .feed {
  padding: 40px;
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  -webkit-box-shadow: -5px 0 29px 6px rgb(0 0 0 / 2%);
    box-shadow: -5px 0 29px 6px rgb(0 0 0 / 2%);
}

#ramadan-raya .offer .feed .hadiah {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1px;
  color: #173b3b;
  border:1px solid #173b3b;
  border-radius: 16px;
  width: 88px;
  height: 22px;
  display: inline-block;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

#ramadan-raya .offer .feed .hadiah-shadow {
  border-radius: 16px;
  width: 88px;
  height: 22px;
  background-color: #faad41;
  position: absolute;
  top: 237px;
  left: 57px;
  z-index: 1;
  opacity: 0.8;
}

#ramadan-raya .offer .feed h2 {
  font-size: 16px;
    font-weight: 600;
}


#ramadan-raya .offer .feed p {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 15px;
}

#ramadan-raya .offer .feed b {
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid #faae42;
}

.promo-rr {
  
}

.promo-rr i {
  color: #faad41 !important;
}

@media (max-width: 920px) {
  #ramadan-raya {
    margin-top: 0px;
    padding: 80px 0 80px;
  }
  #ramadan-raya .offer .feed {
    margin-bottom: 40px;
  }
}

@media (max-width: 576px) {
  #ramadan-raya {
    padding: 56px 0;
  }
  #ramadan-raya img.logo {
    height: 100px;
  }
  #ramadan-raya .offer .gambar {
    height: 160px;
  }
  #ramadan-raya .offer .feed {
    margin-bottom: 24px;
  }
  #ramadan-raya .offer .feed h2 {
    font-size: 15px;
  }
  #ramadan-raya .offer .feed p {
    font-size: 14px;
  }
  #ramadan-raya .offer .feed .hadiah-shadow {
    top: 197px;
  }
}


/* More Info */

#more-info {
  text-align: center;
  margin-top: 56px;
  margin-bottom: 0px;
}

#more-info a {
  font-size: 15px;
  line-height: 1em;
  font-weight: 600;
  /*color: #173b3b;
  border: 2px solid #173b3b;*/
  color: #173b3b;
  border: 2px solid #173b3b;
  padding: 12px 32px 9px;
  border-radius: 26px;
  transition: color .2s, background-color .2s, border .2s;
  display: inline-block;
}

#more-info a:hover {
  text-decoration: none;
  color: #fff;
  background-color: #faad41;
  border: 2px solid #faad41;
}

#more-info i {
  font-size: 24px;
  vertical-align: middle;
  margin-left: 4px;
  margin-top: -2px;
}


/* SHAPE */

#shapes .MoveUpDown1 {
  -webkit-animation: MoveUpDown1 4s infinite  alternate;
  animation: MoveUpDown1 4s infinite  alternate;
}

@keyframes MoveUpDown1 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

#shapes .MoveUpDown2 {
  -webkit-animation: MoveUpDown2 4s infinite  alternate;
  animation: MoveUpDown2 4s infinite  alternate;
}

@keyframes MoveUpDown2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

#shapes .MoveLeftRigh1 {
  -webkit-animation: MoveLeftRigh1 4s infinite  alternate;
  animation: MoveLeftRigh1 4s infinite  alternate;
}

@keyframes MoveLeftRigh1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-10px); }
}


/* PERCUMA HAWTHORN */

#percuma-hawthorn {
  /*background-color: #F8F2EF;*/
  padding: 80px;
  background: #F6EDE9;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #faf6f3, #F6EDE9);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #faf6f3, #F6EDE9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

#percuma-hawthorn .box .gambar {
  min-height: 220px;
  width: 100%; 
  background-position:center center; 
  background-repeat: no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 16px;
  box-shadow: rgb(0 0 0 / 8%) 0 0 1rem;
}

#percuma-hawthorn .box .feed {
  padding: 24px;
}

#percuma-hawthorn .box .feed h1 {
  font-weight: 700;
  font-size: 28px;
}

#percuma-hawthorn .box .feed p {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 18px;
  color: #555;
}

#percuma-hawthorn .box .feed strong {
  font-weight: 600;
  background: linear-gradient(180deg,transparent 60%,#F4D67B 0);
}

@media (max-width: 920px) {
  #percuma-hawthorn .box .feed {
    padding: 24px 0;
  }
}

@media (max-width: 576px) {
  #percuma-hawthorn {
    padding: 80px 24px;
  }
  #percuma-hawthorn .box .feed h1 {
    font-size: 20px;
    line-height: 1.4em;
  }
  #percuma-hawthorn .box .feed p {
    font-size: 16px;
  }
}


/* REMINDER */

.reminder {
  text-align: center;
  margin-top: 100px;
}

.reminder p {
  font-size: 15px;
  line-height: 30px;
  color: #999;
  border-bottom: 1px solid #faae42;
  display:inline;
  padding-bottom: 2px;
}

.reminder b {
  color: #faae42;
  font-size: 13px;
}

@media (max-width: 920px) {
  .reminder {
    text-align: center;
    margin-top: 80px;
  }
}

@media (max-width: 576px) {
  .reminder {
    text-align: center;
    margin-top: 56px;
  }
  .reminder p {
    font-size: 13px;
  }
}

/* ANIMATION */

.pulse-2s-orange {
  animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 174, 66, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(250, 174, 66, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(250, 174, 66, 0);
    }
}