* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%; /*-Equivalent 16px-*/
  height: 100%;
}

body {
  color: #555555;
  background-color: black;
  font-family: "Montserrat", "Trebuchet MS", "Lucida Grande",
    "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  font-size: 1.5rem;
  overflow-x: hidden;
  line-height: 1.4;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

article,
aside,
footer,
header,
nav,
section,
time {
  display: block;
}

img {
  width: auto;
  height: 100%;
}

a {
  text-decoration: none;
  color: #fff;
}

p {
  margin-bottom: 1.2rem;
}

li {
  list-style: none;
}

/* --------------------- GRID / COLUMN -----------------*/

.container {
  max-width: 75rem;
  margin: 0 auto;
  /* padding: 0 1.5rem;   */
  background: #352511;
}

@media (min-width: 768px) {
  /* 768px up ang screen ang container ay 100%-*/
  .container {
    width: 100%; /*ang container width nya ay 100%*/
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/* --------------------- STYLE START -----------------*/
.header__wrapper {
  background-color: #352511;
}

.header__wrapper img {
  width: 20rem;
  padding: 1.5rem 0;
}

.marquee-wrapper {
  background-color: #352511;
  background-image: linear-gradient(90deg,#352511 0,#db8f01 49%,#352511);
  color: #fff;
}

.marquee_span{
  margin-right: 10rem;
}

.btnsec_wrapper{
  background-color: #352511;
}

.btn{
  text-align: center;
  padding: 1rem 6rem;
}

.red_btn{
  border-radius: 10px;
  padding: 2rem 1rem;
  background: linear-gradient(to bottom,#fd0d00 5%,#6b0000 100%) ;
}

.yellow_btn{
  border-radius: 10px;
  margin-top: 1rem;
  padding: 1.4rem;
  background: linear-gradient(to bottom,#ffc83c 5%,#e1701a 100%);
  background: #352511;
  border: 2px solid #FFC23C;
}

.banner_wrapper{
  margin-top: 10px;
}

.banner_wrapper img{
  width: 100%;

}

ul.pp_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 10px;

}

.pp_wrapper li img{
  width: 100%;
  padding: 10px 5px;
}

.footer_wrapper{
  color: #fff;
  background-color: #243169;
  background-image:  linear-gradient(90deg,#352511 0,#db8f01 49%,#352511);
}


.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 color: #fff;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

    .daftar {
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 10px;
        padding: 1rem;
        color: #ffffff;
    }
    
        .gradient-border-button {
        --borderWidth: 3px;
        position: relative;
        border-radius: var(--borderWidth);
    }
    .gradient-border-button:after {
        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #9333fade, #9333fade, #9333fade, #FFC23Cde, #FFC23Cde, #FFC23Cde, #9333fade, #FFC23Cde);
        border-radius: 10px;
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
    }

    @keyframes animatedgradient {
        0% {
        background-position: 0% 50%;
        }
        50% {
        background-position: 100% 50%;
        }
        100% {
        background-position: 0% 50%;
        }
    }

    body{
        -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
        -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
        -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
        animation:-amp-start 8s steps(1,end) 0s 1 normal both
    }
    @-webkit-keyframes -amp-start{
        from{visibility:hidden}to{visibility:visible}
    }
    @-moz-keyframes -amp-start{
        from{visibility:hidden}to{visibility:visible}
    }
    @-ms-keyframes -amp-start{
        from{visibility:hidden}to{visibility:visible}
    }
    @-o-keyframes -amp-start{
        from{visibility:hidden}to{visibility:visible}
    }
    @keyframes -amp-start{
        from{visibility:hidden}to{visibility:visible}
    }
    body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}