/* Initial Root Element */
@font-face {
    font-family: helvetica;
    src: url("../../fonts/FreeSans.otf"); /* IE9 Compat Modes */
    src: url("../../fonts/FreeSans.otf") format("embedded-opentype"), /* IE6-IE8 */
         url("../../fonts/FreeSans.otf") format("woff"), /* Modern Browsers */
         url("../../fonts/FreeSans.otf") format("truetype"), /* Safari, Android, iOS */
         url("../../fonts/FreeSans.otf") format("svg"); /* Legacy iOS */
}

:root {
    --green-color: green;
}

/* Base Root Element 10px => 1rem = 10px */
/* Ukuran Web 2/3 dari ukurang di Figma */
body, html {
    width: 100%;
    font-size: calc(2/3 * 10px);
    font-family: helvetica;
    /* overflow-x: hidden; */
    /* overflow-y: initial; */
    scroll-behavior: smooth;
}

@media screen and (max-width: 450px) {
    body, html {
        font-size: 3.5;
    }
}

/* Header Time */
.header-time {
    background: #D9D9D9;
}
.header-time p {
    font-size: 2.5rem;
    font-weight: 700;
    word-spacing: 5px;
}
.tanggal-sistem {
    border-right: 2px solid black;
}
/* End Header Time */

/* Search */
#header-search {
    background: #F1F1F1;
    padding: 3rem 0;
}
#header-search-input {
    height: 5rem;
    font-size: 2.5rem;
    border: none;
    padding-left: 10px;
}
#header-search-input::placeholder {
    color: #C1C1C1;
}
#header-search-button {
    background: #EA1E37;
    width: 11rem;
    height: 5rem;
    font-size: 2rem;
}
.form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}
#header-search-body-1 {
    font-size: 2.4rem;
    color: #EA1E37;
    font-weight: 700;
    padding-top: 2px;
}  
#header-search-body-2, #header-search-body-3, #header-search-body-4 {
    font-size: 2.3rem;
    color: #000;
    text-decoration: none;
    transition: .3s;
}  

#header-search-body-2:hover, #header-search-body-3:hover, #header-search-body-4:hover {
    color: #EA1E37;
    transition: .3s;
}

@media screen and (max-width: 450px) {
    #header-search .container {
        padding: 0 20px;
    }
}
/* End Search */

/* Jumbotron */
#header-jumbotron-body-1 {
    font-size: 4.8rem;
    color: #fff;
}
#header-jumbotron-body-2 {
    font-size: 3.2rem;
    color: #fff;
}

@media screen and (min-width: 1200px) {
    #header-jumbotron {
        /* background: url("../../images/background.png"); */
        background: url("../../images/background-ita.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: min(85vh, 85rem);
    }
}

@media screen and (max-width: 450px) {
    #header-jumbotron {
        padding: 0 20px;
    }
    #header-jumbotron {
        /* background: url("../../images/background-mobile.png"); */
        /* background: linear-gradient(89.87deg, rgba(234, 30, 55, 0.95) 18.23%, rgba(234, 30, 55, 0) 99.87%), url("../../images/hires-background.jpg"); */
        background: url("../../images/background-ita.png");
        height: 165px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}
/* End Jumbotron */

/* Sambutan */
.main-sambutan {
    background: url("../../images/bg-sambutan.png");
    background-size: cover;
    background-position: bottom;
}
.main-sambutan .container {
    padding: 13.4rem 40rem 10rem 10rem;
    position: relative;
}
#apostrof {
    position: absolute;
    left: 1rem;
    top: 7rem;
    width: 10rem;
}
.main-sambutan-head p {
    font-size: 4rem;
    font-weight: 700;
    line-height: 20px;
}
#more {
    display: none;
}
#read-more {
    width: 25rem;
    height: 6rem;
    font-size: 2.5rem;
    background-color: #EA1E37;
    color: #fff;
    border: none;
    border-radius: 6px;
    margin-top: 3rem;
}
.main-sambutan-body {
    margin-top: 5rem;
}
.main-sambutan-body p {
    font-size: 3rem;
}
@media screen and (max-width: 450px) {
    .main-sambutan .container {
        padding: 13.4rem 10rem 10rem 10rem;
    }
}
/* End Sambutan */

/* Pengaduan */
.main-pengaduan {
    background-color: #fff;
}
.main-pengaduan-head p {
    font-size: 3rem;
    font-weight: 700;
}

.main-pengaduan-body-1 img {
    transform: scale(1);
    transition: .3s;
}

.main-pengaduan-body-1:hover img {
    transform: scale(1.1);
    transition: .3s;
}

.main-pengaduan-body-2 img {
    transform: scale(1);
    transition: .3s;
}

.main-pengaduan-body-2:hover img {
    transform: scale(1.1);
    transition: .3s;
}

@media screen and (max-width: 450px) {
    .main-pengaduan .container {
        padding: 0 10rem;
    }

}
/* End Pengaduan */

/* Berita */
.main-berita {
    background: #F1F1F1;
}
.main-berita .container .main-berita-head {
    padding: 13.4rem 0 5rem 10rem;
    position: relative;
}
#bintang {
    position: absolute;
    left: 3rem;
    top: 9rem;
    width: 10rem;
}
.main-berita-body-alert {
    margin: 0 0 2rem 12.5rem;
    font-size: 3rem;
    background-color: #EA1E37;
    width: 15rem;
    height: 5rem;
    color: #fff;
    border-radius: 3px;
}
.main-berita-lihat-lainya {
    text-align: right; 
    padding-right: 11rem;
}
.main-berita-lihat-lainya a {
    transition: .3s;
}
.main-berita-lihat-lainya a:hover {
    transition: .3s;
    color: #EA1E37;
}
.main-berita-head p {
    font-size: 4rem;
}
.main-berita-head a {
    text-decoration: none;
    color: #000;
    font-size: 3rem;
}
.main-berita-body {
    display: flex;
    justify-content: space-evenly;
}
.card {
    background: #F1F1F1;
    border: none;
    /* padding: 0px 4rem; */
}
.card-img-top {
    border-radius: 5px;
}
.desc {
    max-height: 16rem;
    overflow: hidden;
}
.card-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: black;
    text-decoration: none;
    transition: .3s;
}
.card-title:hover {
    color: #EA1E37;
    transition: .3s;
}
.card-text {
    font-size: 2rem;
}
@media screen and (max-width: 450px) {
    .main-berita-body-alert {
        margin: 0 0 0 5rem;
    }
    .card {
        padding: 0px 5rem;
        margin: 2rem 0;
    }
    .desc {
        max-height: 18rem;
    }
    .card-title {
        font-size: 3.5rem;
        font-weight: 700;
    }
    .card-text {
        font-size: 2.5rem;
    }
    .main-berita-lihat-lainya {
        padding-right: 5rem;
    }
}
/* End Berita */

/* Galeri */
.main-galeri {
    background: #fff;
    padding-bottom: 10rem;
}
.main-galeri .container .main-galeri-head {
    padding: 13.4rem 0 5rem 10rem;
    position: relative;
}
.main-galeri-head p {
    font-size: 4rem;
}
.main-galeri-head a {
    text-decoration: none;
    color: #000;
    font-size: 3rem;
}
#pagar {
    position: absolute;
    left: 3rem;
    top: 9rem;
    width: 10rem;
}
.main-galeri-lihat-semua {
    text-align: right; 
    padding-right: 15rem;
}
.main-galeri-lihat-semua a {
    transition: .3s;
}
.main-galeri-lihat-semua a:hover {
    transition: .3s;
    color: #EA1E37;
}
.main-galeri-head-button {
    width: 30rem;
    height: 5rem;
}
#main-galeri-head-button-1 {
    font-size: 2.4rem;
}
#main-galeri-head-button-2 {
    font-size: 2.4rem;
}
#main-galeri-body-carousel-button {
    width: 100%;
    height: 10rem;
    background-color: #D9D9D9;
    padding-top: 3rem;
}
.main-galeri-body-carousel-image {
    height: 50rem;
    object-fit: cover;
}
.card-galeri {
    background: #fff;
}
.card-galeri .card-title {
    font-size: 2.5rem;
}
.card-galeri .card-text {
    font-size: 2rem;
}
.iframe-carousel {
    height: 35rem;
}
@media screen and (max-width: 450px) {
    .main-galeri-head-button {
        padding: 0 5rem;
        height: 7rem;
    }
    .main-galeri-lihat-semua {
        padding-right: 6rem;
    }
    .card-galeri {
        padding: 0 5rem;
        background: #fff;
    }
    .card-galeri .card-title {
        font-size: 3rem;
    }
    .card-galeri .card-text {
        font-size: 2.5rem;
    }
    .iframe-carousel {
        height: 45rem;
    }
}
/* End Galeri */

@media (min-width: 768px) and (max-width: 1024px) {
  
    body, html {
        width: 100%;
        font-size: 6px;
    }

    #header-jumbotron {
        background: url("../../images/background-ita.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 30vh;
    }
    
}

@media (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
  
    body, html {
        width: 100%;
        font-size: 7px;
    }

    #header-jumbotron {
        background: url("../../images/background-ita.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 55vh;
    }
    
}