@charset "UTF-8";
/* CSS Document */
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .slide5 {
    background-image: url("../media/slider/slide-5mobile.jpg");
    background-position: -100px center;
    background-size: cover;
  }
  .section-padding-top {
    padding-top: 30px;
  }
  .header-wrapper {
    min-height: 60px;
  }
  .header-logo img {
    width: 140px;
    padding: 15px 0;
  }
  .header-sticky.sticky {
    padding: 0;
    height: 58px;
  }
  .section-fluid {
    padding-right: 0;
    padding-left: 0;
  }
  .slide-1 {
    width: 300px;
  }
  .slide-5 {
    width: 300px;
  }
  .hero-slide-content {
    margin-bottom: 50px;
  }
  .hero-slide-content .title {
    font-size: 40px;
    line-height: 1;
    font-weight: 300;
    color: #fff;
    margin-bottom: 50px;
    letter-spacing: -0.25px;
    text-transform: capitalize;
  }
  .hero-slide-content p {
    font-size: 14px;
    margin-bottom: 20px;
    max-width: 280px;
  }
  .hero-slide-content .btn-link {
    font-size: 14px;
  }
  .parallax {
    height: 100vh;
  }
  .maskhead {
    position: absolute;
    bottom: 20px;
  }
  .maskhead h1 {
    color: #fff;
    font-weight: lighter;
    font-size: 22px;
  }
  .maskhead h2 {
    color: #fff;
    font-weight: lighter;
    font-size: 15px;
  }
  .m-bill {
    width: 250px;
  }
  .team-block .inner-box .team-content .title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
  }
  .mycontact {
    height: 50vh;
  }
  .content h1 {
    color: #212121;
    font-weight: 400;
    font-size: 15px;
    text-align: left;
    line-height: 1;
    width: 280px;
  }
  .content img {
    width: 100%;
  }
  .content h3 {
    color: #212121;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
  }
  .content h4 {
    color: #212121;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
  }
  .content-center h1 {
    color: #212121;
    width: 100%;
    font-weight: 400;
    font-size: 30px;
    text-align: left;
  }
  .contact-image-bg .contact h2 {
    font-size: 50px;
  }
  .contact-image-bg .contact .whatif::before {
    content: "If you have any enquiry, please touch the button below";
    color: #fff;
    line-height: 0;
    font-size: 20px;
  }
  .ppm-button {
    height: 50px;
    width: 150px;
    line-height: 50px;
  }
  .contact-image-bg .contact p {
    font-size: 14px;
  }
  .scroll-top {
    font-size: 20px;
    right: 15px;
  }
  .p-epay {
    width: 70%;
    height: auto;
    padding: 20px 0 20px 0;
  }
  .p-astro {
    width: 200px; /*403px 627px;*/
    height: 311px;
    position: absolute;
    right: 0;
    left: -35px;
    bottom: 250px;
    transform: scale(.5) rotate(60deg);
    -webkit-transform: scale(.5) rotate(60deg);
    -moz-transform: scale(.5) rotate(60deg);
    -o-transform: scale(.5) rotate(60deg);
    -ms-transform: scale(.5) rotate(60deg);
  }
  .p-game {
    width: 400px;
    height: 267px;
    position: absolute;
    right: -160px;
    bottom: 350px;
    transform: scale(.45) rotate(270deg);
    -webkit-transform: scale(.45) rotate(270deg);
    -moz-transform: scale(.45) rotate(270deg);
    -o-transform: scale(.45) rotate(270deg);
    -ms-transform: scale(.45) rotate(270deg);
  }
  .p-phone {
    width: 240px;
    height: 379px;
    position: absolute;
    right: -55px;
    bottom: 140px;
    transform: scale(.45) rotate(295deg);
    -webkit-transform: scale(.45) rotate(295deg);
    -moz-transform: scale(.45) rotate(295deg);
    -o-transform: scale(.45) rotate(295deg);
    -ms-transform: scale(.45) rotate(295deg);
  }
  .l-astro {
    width: 80px;
    height: 80px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    left: 70px;
    bottom: 430px;
    z-index: 2;
  }
  .l-phone {
    width: 80px;
    height: 80px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    position: absolute;
    right: 120px;
    bottom: 340px;
    z-index: 2;
  }
  .l-game {
    width: 80px;
    height: 80px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    position: absolute;
    right: 70px;
    bottom: 430px;
    z-index: 2;
  }
  .p-beli {
    width: 40%;
  }
 .bg1 {
  background-image: url("../media/products/01-maskhead-mobile.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
}
	.bg-sme {
  background-image: url(../media/products/03-maskhead-mobile.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
  .bg-reward {
    background-image: url(../media/products/04-maskhead-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bg-loyalty {
    background-image: url(../media/products/07-maskhead-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
	.bg-assit {
  background-image: url(../media/products/08-maskhead-mobile.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
	.bg-protect {
  background-image: url(../media/products/09-maskhead-mobile.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
  .p-label {
    background-color: #2F673C;
    width: 90px;
    height: 90px;
    line-height: 1.25;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    font-weight: 300;
    margin-top: 55px;
  }
  .plable1 {
    padding: 35px 0;
  }
  .plable2 {
    padding: 28px 0;
  }
  .mybeli {
    font-size: 15px;
    width: 100%;
    position: relative;
    left: 0;
    top: 10px;
  }
  .myloyalty {
    width: 100%;
    position: relative;
    left: 0;
    top: -40px;
  }
}
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .maskhead {
    position: absolute;
    bottom: 30px;
  }
 .bg1 {
  background-image: url("../media/products/01-maskhead.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
}
 .bg-sme {
  background-image: url(../media/products/03b-maskhead.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
  .bg-reward {
    background-image: url(../media/products/04-maskhead.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bg-loyalty {
    background-image: url(../media/products/07-maskhead.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
.bg-assit {
  background-image: url(../media/products/08-maskhead.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
	.bg-protect {
  background-image: url(../media/products/09-maskhead.jpg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .maskhead {
    position: absolute;
    bottom: 80px;
  }
  .slide5 {
    background-image: url("../media/slider/slide-5mobile.jpg");
    background-position: -115px center;
    background-size: cover;
  }
  .section-padding-top {
    padding-top: 30px;
  }
  .section-padding {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .m-bill {
    width: 300px;
  }
  .maskhead h1 {
    color: #fff;
    font-weight: lighter;
    font-size: 30px;
	list-style: 1.2;
  }
  .maskhead-width-9 p {width:calc(100% - 30px);}
  .mycontact {
    height: 45vh;
  }
  .bg1 {
  background-image: url("../media/products/01-maskhead-mobile.jpg");
  background-position: right -50px;
  background-repeat: no-repeat;
}
  .bg-sme {
    background-image: url(../media/products/03-maskhead-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bg-reward {
    background-image: url(../media/products/04-maskhead-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bg-loyalty {
    background-image: url(../media/products/07-maskhead-mobile.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
	.bg-assit {
  background-image: url(../media/products/08-maskhead-mobile.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
	.bg-protect {
  background-image: url(../media/products/09-maskhead-mobile.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
  .p-beli {
    width: 35%;
  }
  .p-label {
    background-color: #2F673C;
    width: 90px;
    height: 90px;
    line-height: 1.25;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    font-weight: 300;
    margin-top: 65px;
  }
  .mybeli {
    font-size: 15px;
    width: 100%;
    position: relative;
    left: 0;
    top: 0px;
    padding-right: 10px;
  }
  .myloyalty {
    width: 100%;
    position: relative;
    left: 0;
    top: -40px;
  }
  .p-epay {
    width: 80%;
    height: auto;
    padding: 20px 0 20px 0;
  }
  .p-astro {
    width: 200px; /*403px 627px;*/
    height: 311px;
    position: absolute;
    right: 0;
    left: -35px;
    bottom: 350px;
  }
  .p-game {
    width: 400px;
    height: 267px;
    position: absolute;
    right: -160px;
    bottom: 450px;
    transform: scale(.45) rotate(270deg);
    -webkit-transform: scale(.45) rotate(270deg);
    -moz-transform: scale(.45) rotate(270deg);
    -o-transform: scale(.45) rotate(270deg);
    -ms-transform: scale(.45) rotate(270deg);
  }
  .p-phone {
    width: 240px;
    height: 379px;
    position: absolute;
    right: -55px;
    bottom: 240px;
    transform: scale(.45) rotate(295deg);
    -webkit-transform: scale(.45) rotate(295deg);
    -moz-transform: scale(.45) rotate(295deg);
    -o-transform: scale(.45) rotate(295deg);
    -ms-transform: scale(.45) rotate(295deg);
  }
  .l-astro {
    width: 80px;
    height: 80px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    left: 70px;
    bottom: 530px;
    z-index: 2;
  }
  .l-phone {
    width: 80px;
    height: 80px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    position: absolute;
    right: 100px;
    bottom: 460px;
    z-index: 2;
  }
  .l-game {
    width: 80px;
    height: 80px;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    position: absolute;
    right: 70px;
    bottom: 600px;
    z-index: 2;
  }
}
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .maskhead {
    position: absolute;
    bottom: 30px;
  }
  .maskhead h1 {
    color: #fff;
    font-weight: lighter;
    font-size: 25px;
	list-style: 1;
  }
   .maskhead h2 {
    color: #fff;
    font-weight: lighter;
    font-size: 15px;
  }
		.bg1 {
  background-image: url("../media/products/01-maskhead.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
}
  .bg-sme {
   background-image: url(../media/products/03b-maskhead.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bg-reward {
    background-image: url(../media/products/04-maskhead.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bg-loyalty {
    background-image: url(../media/products/07-maskhead.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
	
.bg-assit {
  background-image: url(../media/products/08-maskhead.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-protect {
  background-image: url(../media/products/09-maskhead.jpg);
   background-position: -550px center;
  background-repeat: no-repeat;
  background-size: cover;
}
  .hero-slide-content .title {
    font-size: 33px;
    line-height: 1;
    font-weight: 300;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: -0.25px;
    text-transform: capitalize;
  }
  .p-beli {
    width: 20%;
  }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- iPhone X ----------- */
/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- iPhone 11 ----------- */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 12 ----------- */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}