@font-face {
    font-family: 'Bowlby One';
    src:
    local("Bowlby One"),
    url('../fonts/Bowlby_One/BowlbyOne-Regular.woff') format('woff'),
    url("../fonts/Bowlby_One/BowlbyOne-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap; }
@font-face {
    font-family: 'Inter';
    src:
    local("Inter"),
    url('../fonts/inter/Inter-Regular.woff') format('woff'),
    url("../fonts/inter/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap; }


/* ================================= */
/*              General              */
/* ================================= */

html, body{
    scroll-behavior: smooth;
}

main {
    overflow: hidden;
}

h1 {
    font-family: 'Bowlby One', sans-serif;
    font-style: normal;
    font-weight: 400;
}

p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
}

a {
    color: #ffffff;
    overflow-wrap: break-word;
}

.container {
  z-index: 1;
  position: relative;
}

/* ================================= */
/*             Top Bar               */
/* ================================= */

#navbar {
  background: #fff;
}

.navbar-nav .nav-link {
  color: #010066;
  padding: 2px 10px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

.navbar-nav .nav-link:hover {
  color: #CC0100;
}

.navbar-nav .active > .nav-link {
  border-radius: 6px;
  background-color: #CC0100;
  color: #fff;
  pointer-events: none;
  cursor: default;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

.sticky + .content {
  padding-top: 60px!important;
}

#navbarCollapse {
  position: absolute;
  right: 0;
  top: 0;
  padding: 14px;
}


/* ================================= */
/*              Header               */
/* ================================= */
.myundi-logo-wrapper {
    padding: 10px;
}

.myundi-logo-wrapper img {
    max-width: 130.83px;
}


/* ================================= */
/*           First Section           */
/* ================================= */
#first {
    position: relative;
    background: linear-gradient(120deg, rgba(248, 207, 215, 1) , rgba(237, 225, 225, 0.5) );
    flex-direction: column;
    align-items: center;
  	justify-content: center;
  	margin: 0;
  	height: 100%;
  	width: 100%;
    overflow: hidden;
}

#first>div {
  padding: 100px 0 0 0;
  background: linear-gradient(240deg, rgba(172, 199, 227, 0.5) , rgba(225, 229, 241, 0) );
}

#first::before {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: clamp(110px, 30%, 254.98px);
    height: clamp(12.5rem, 8.4189rem + 21.7656vw, 28.008rem);
    position: absolute;
    left: 2%;
    bottom: 0.8%;
    z-index: 1;
}

.handballot {
    width: 100%;
    z-index: 1;
    position: relative;
    max-width: 854px;
}

.handballot-1 {
    position: absolute;
    bottom: -25%;
    opacity: .8;
}

.handballot-2 {
    position: absolute;
    bottom: -40%;
}

.handballot-1 g {
    opacity: .2;
}

.handballot-2 path {
    fill:#9AA1CD;
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
}

.main-vote-type-wrapper h1{
    font-size: 34px;
    line-height: 50px;
    text-align: center;
    color: #00324F;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
}

.main-vote-type-wrapper p {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #014554;
    max-width: 578px;
    margin: auto;
    z-index: 1;
    position: relative;
}

.main-vote-type-wrapper h1 span {
    display: block;
}


/* ================================= */
/*           Second Section          */
/* ================================= */
#second {
    background: linear-gradient(180deg, #01A29B 0%, #017675 100%);
    position: relative;
    padding: 80px 0 40px;
}
#second::after {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: clamp(7.5rem, 4.9147rem + 13.7881vw, 17.324rem);
    height: clamp(23.5rem, 8.5416rem + 21.1116vw, 27.542rem);
    position: absolute;
    left: 2%;
    bottom: -1.8%;
    z-index: 1;
}

#second h2 {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 26px;
}



/* ================================= */
/*           Third Section           */
/* ================================= */

#third {
    background: #1D5164;
    position: relative;
    padding: 80px 0;
}

.adv-vote-title-wrapper {
    line-height: 63px;
    color: #FFF;
    text-align: center;
}

.adv-vote-title-wrapper h1 {
    color: #fff;
    font-size: 36px;
    text-transform: uppercase;
}

#third .handballot-1 {
    bottom: -45%;
    opacity: .2;
}

/* ================================= */
/*           Forth Section          */
/* ================================= */
#forth {
    background: linear-gradient(180deg, #27BEDB 0%, #167385 100%);
    position: relative;
    padding: 80px 0;
}

/* ================================= */
/*           Fifth Section           */
/* ================================= */
#fifth {
    background: linear-gradient(180deg, #8680D0 0%, #393F83 100%);
    position: relative;
    padding: 80px 0;
}

#fifth .campaign-1 {
    position: absolute;
    bottom: -25%;
    opacity: .1;
}

/* ================================= */
/*           Sixth Section           */
/* ================================= */
#sixth {
    background: linear-gradient(180deg, #018CA2 0%, #0E6B67 100%);
    position: relative;
    padding: 80px 0;
}

/* ================================= */
/*           Seventh Section         */
/* ================================= */
#seventh {
    background: linear-gradient(180deg, #1D5164 0%, #0A6687 100%);
    position: relative;
    padding: 80px 0;
    height: 100%;
}

#seventh .campaign-2 {
    position: absolute;
    bottom: -25%;
}

#seventh .campaign-2 g {
    opacity: .1;
}


/* ================================= */
/*            Responsive             */
/* ================================= */
@media only screen and (min-width:768px) and (max-width:1024px) {
}

@media only screen and (min-width:576px) and (max-width:767px) {
    #fifth .campaign-1,
    #seventh .campaign-2 {
        bottom: -35%;
    }
}

@media (max-width:991px){
}

@media only screen and (min-width:768px) and (max-width:991px){
    .postal {
        margin-left: -3rem;
    }
}

@media only screen and (min-width:576px) and (max-width:991px) {
}

@media (max-width:575px){
    #fifth .campaign-1,
    #seventh .campaign-2 {
      bottom: -45%;
    }

    #navbar ul {
        padding-right: .5rem;
    }
}

@media (max-width:428px){
}

@media (max-width:375px){
}

@media (max-width:330px){
    .handballot {
        bottom: 31px;
    }
}

/* ================================= */
/*              Footer               */
/* ================================= */

.bg-news {
    background: #fff;
    padding: 45px 0px;
}

.footer {
    display: block;
    background-image: url(https://www.myundi.com.my/images/my/footerbg.png);
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 110px;
}

.logo {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 33px;
    height: 51px;
    z-index: 0;
}
.logo {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 33px;
    height: 51px;
    z-index: 0;
}
.footer .logo {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
.footer_item {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.36;
    text-align: center;
    letter-spacing: normal;
    color: #000000;
}