@font-face {
    font-family: 'Bowlby One';
    src: local("Bowlby One"), local("Bowlby One"), 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"), local("Inter"), url("../fonts/inter/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap; }
@font-face {
    font-family: 'Cabin';
    src: local("Cabin"), local("Cabin"), url("../fonts/Cabin/Cabin-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap; }


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

html, body{
    scroll-behavior: smooth;
}

main {
    background-color: #00324F;
    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;
}

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


/* ================================= */
/*              Header               */
/* ================================= */
.myundi-logo-wrapper {
    background: #FFFFFF;
    /* border-top-width: 48px;
    border-top-color: #00324F;
    border-top-style: solid; */
    display: flex;
    justify-content: center;
    padding: 10px;
}

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


/* ================================= */
/*           First Section           */
/* ================================= */
#first {
    background-image: url(../img/first-sec-bg.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    padding: 150px 0 210px 0;
}

#first::before {
    content: '';
    background-image: url(../img/bp1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* width: 100%;
    max-width: 254.98px; */
    width: clamp(110px, 30%, 254.98px);
    /* height: 448.12px; */
    height: clamp(12.5rem, 8.4189rem + 21.7656vw, 28.008rem);
    position: absolute;
    left: 2%;
    bottom: 0.8%;
    z-index: 1;
}

.flag {
    width: clamp(350px, 50%, 500px);
    position: absolute;
    top: 0;
    left: 0;
}

.handballot {
    /* width: 100%;
    max-width: 442.44px; */
    width: clamp(150px, 45%, 442.44px);
    position: absolute;
    bottom: 0;
    right: 0;
}

.main-vote-type-wrapper h1{
    font-size: 36px;
    line-height: 50px;
    text-align: center;
    color: #014554;
    margin-bottom: 1rem;
}

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

.adv-vote-desc-wrapper p {
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #014554;
}

.eligible-title-wrapper {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.eligible-title-wrapper h1 {
    font-size: 40px;
    line-height: 55px;
    text-align: center;
    color: #014554;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(5, 0.45fr);
    grid-gap: 5px;
    padding: 1rem;
    /* height: 100vh; */
    /* background-color: #2196F3; */
  }

  /* line-based placement */
  .item1 { grid-column: 1 / 2; grid-row: 1 / 3; }
  .item2 { grid-column: 2 / 3; grid-row: 1 / 2; align-self: flex-end; }
  .item3 { grid-column: 1 / 2; grid-row: 3 / 5; align-self: center; }
  .item4 { grid-column: 2 / 3; grid-row: 2 / 5; align-self: flex-end; }
  .item5 { grid-column: 1 / 2; grid-row: 5 / 6; }
  .item6 { grid-column: 2 / 3; grid-row: 5 / 6; align-self: center; }

  .grid-container > div {
    /* background-color: rgba(255, 255, 255, 0.8); */
    text-align: center;
    /* border: 1px solid #ccc; */
  }
  /* * { box-sizing: border-box; margin: 0; } */

  .military-img {
    width: 100%;
    max-width: 238.22px;
  }

  .police-img {
    width: clamp(123px, 80%, 235.69px);
  }

  .media-img {
    width: 150%;
    max-width: 354.24px;
    margin-left: -40px;
    margin-top: 1.5rem;
  }

  .item2 .eligible-info-wrapper {
    margin-bottom: -3rem;
    margin-left: -3rem;
}

.item6 .eligible-info-wrapper {
    max-width: 264px;
    margin: auto;
}

.eligible-info-wrapper h1 {
    /* font-size: 36px; */
    font-size: clamp(1.875rem, 1.7763rem + 0.5263vw, 2.25rem);
    line-height: 56px;
    color: #014554;
}
.eligible-info-wrapper p {
    font-family: 'Cabin', sans-serif;
    /* font-size: 20px;
    line-height: 24px; */
    font-size: clamp(1.063rem, 1.0138rem + 0.2625vw, 1.25rem);
    line-height: clamp(1.313rem, 1.2638rem + 0.2625vw, 1.5rem);
    color: #014554;
}


/* ================================= */
/*           Second Section          */
/* ================================= */
#second {
    background-image: url(../img/second-sec-bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    padding: 180px 0 300px 0;
    margin-top: -95px;
}
#second::after {
    content: '';
    background-image: url(../img/bp2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* width: 100%;
    max-width: 277.18px; */
    width: clamp(7.5rem, 4.9147rem + 13.7881vw, 17.324rem);
    /* height: 440.67px; */
    height: clamp(23.5rem, 8.5416rem + 21.1116vw, 27.542rem);
    position: absolute;
    left: 2%;
    bottom: -1.8%;
    z-index: 1;
}

.s2 {
    position: absolute;
    bottom: 1.5%;
    right: 3%;
    /* width: 100%;
    max-width: 274.23px; */
    width: clamp(7.5rem, 4.9634rem + 13.5284vw, 17.139rem);
    z-index: 1;
}

.postal-voting-title h1{
    max-width: 172px;
    /* font-size: 40px; */
    line-height: 50px;
    font-size: clamp(0.5rem, 1.8684rem + 0.7018vw, 2.5rem);
    line-height: clamp(2.625rem, 1.8684rem + 2.7018vw, 3.125rem);
    color: #014554;
    margin-top: 2rem;
}

.postal {
    /* width: 100%;
    max-width: 359.02px; */
    width: clamp(140px, 60%, 359.02px);
    height: clamp(17.813rem, 16.9835rem + 4.4239vw, 20.965rem);
    object-fit: contain;
    margin-left: -1rem;
}

.postal-info-wrapper p {
    max-width: 530px;
    margin: auto;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #014554;
}

.postal-info-wrapper {
    margin: 3.5rem 0 1.5rem 0;
}

.postal-info-bg {
    background-image: url(../img/postal-info-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    padding: 2rem;
    margin-top: 2rem;
}

ul {
    padding-left: 0;
}

ul li {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}

li {
    padding-bottom: 1rem;
}
li:last-child {
    padding-bottom: 0rem;
}

li::marker {
    font-size: 21px;
}

.army {
    width: 100%;
    max-width: 241.74px;
    object-fit: contain;
}
.worker {
    width: 100%;
    max-width: 155px;
    object-fit: contain;
}.doctor {
    width: 100%;
    max-width: 194.19px;
    object-fit: contain;
}.student {
    width: 100%;
    max-width: 169.04px;
    object-fit: contain;
}



/* ================================= */
/*           Second Section          */
/* ================================= */
#third {
    background-image: url(../img/third-sec-bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    padding: 180px 0;
    margin-top: -100px;
}

.city-img {
    position: absolute;
    bottom: 0;
    left: 0;
    /* transform: translate(-50%, 0); */
}

.adv-vote-title-wrapper {
    font-size: 40px;
    line-height: 63px;
    color: #014554;
    text-align: center;
}

#third .postal-info-wrapper {
    margin: 1.5rem 0;
}

.advPostal-info-bg {
    background-image: url(../img/advPostal-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    padding: 3rem 2rem 4rem 2rem;
}

.advP-info-content h1 {
    font-size: 24px;
    line-height: 32px;
    color: #FFFFFF;
    margin-bottom: 1rem;
}
.advP-info-content p {
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}

.calendar, .people {
    width: 100%;
    max-width: 180px;
    object-fit: contain;
}.postman {
    width: 100%;
    max-width: 141px;
    object-fit: contain;
}.post {
    width: 100%;
    max-width: 178px;
    object-fit: contain;
}




/* ================================= */
/*            Responsive             */
/* ================================= */

@media only screen and (min-width:768px) and (max-width:1024px) {

    #first {
        padding-bottom: 340px;
    }

    #second {
        margin-top: -100px;
        padding-bottom: 400px;
    }
}

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

    #first {
        padding-bottom: 330px;
    }

    #third {
        margin-top: -118px;
    }

    #second {
        padding-bottom: 345px;
    }
}

@media (max-width:991px){

    #first {
        padding-top: 180px;
    }

    .item2 .eligible-info-wrapper {
        margin-left: 0;
    }
}

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

    #third {
        margin-top: -100px;
    }

    .postal {
        margin-left: -3rem;
    }
}

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

    .item2 .eligible-info-wrapper {
        margin-bottom: -3.5rem;
    }

    .media-img {
        width: 135%;
        margin-left: -33px;
    }

    .handballot {
        bottom: 4px;
    }

    .item6 .eligible-info-wrapper {
        margin-right: -10px;
    }
}

@media (max-width:575px){

    #first {
        padding-top: 200px;
        padding-bottom: 255px;
    }

    #second {
        padding-top: 135px;
        margin-top: -107px;
        padding-bottom: 330px;
    }

    #third {
        margin-top: -130px;
    }

    .handballot {
        bottom: 30px;
    }

    .media-img {
        width: 130%;
        margin-left: -15px;
    }

    .grid-container {
        grid-gap: 0.8rem;
    }

    .eligible-info-wrapper h1 {
        margin-bottom: 0;
    }

    .army, .worker, .doctor, .student {
        margin-bottom: 2rem;
    }

    .army {
        max-width: 200px;
    }.worker {
        max-width: 135px;
    }.doctor {
        max-width: 155px;
    }.student {
        max-width: 145px;
    }

    /* .army {
        max-width: 150px;
    }.worker {
        max-width: 95px;
    }.doctor {
        max-width: 110px;
    }.student {
        max-width: 105px;
    } */

    ul {
        padding-left: 1.5rem;
    }

    .calendar, .people, .postman, .post {
        margin-bottom: 2rem;
    }

    .advP-info-content h1, .advP-info-content p {
        text-align: center;
    }

    .item6 .eligible-info-wrapper {
        margin-right: -15px;
    }
}

@media (max-width:428px){

    #second {
        padding-bottom: 315px;
    }
    #third {
        margin-top: -145px;
    }

    .postal-info-wrapper {
        margin: 1rem 0 1.5rem 0;
    }
}

@media (max-width:375px){
    #third {
        margin-top: -155px;
    }

    .handballot {
        bottom: 30.5px;
    }
}
@media (max-width:330px){
    #third {
        margin-top: -172px;
    }

    .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;
}