.container {height: max-content; background-color: hsl(230, 60%, 98%);}
.box-lomba {
    /* jangan pake width: 100% kalo dak mau meleber */
    /* background-color: chartreuse; */
    padding: 5%;
    margin-top: 65px;
    display: flex;
    box-sizing: border-box;


}
.merah {background-color: #F2C6DE;}
.hijau {background-color: #C9E4DE;}
.kuning {background-color: #FAEDCB;}
.biru {background-color:#C6DEF1;}
.orange {background-color: #ffc095;}
.putih {background-color: aliceblue;}


.back {display: flex; align-items: center; align-content: center; flex-direction: row; margin-bottom: 30px;}
.back h3  {font-weight: 600; cursor: pointer; font-size: 22px; align-self: center;}
.back i.bx  {font-size: 30px;}
.back:hover {color: #ffb700;}


.detail-lomba {
    width: 50%;
    background-color: #fff;
}
.detail-global {
    width: 100%;
    background-color: #fff;
    padding: 30px;
    box-sizing: border-box;
}
.detail-global h2 {
    text-align: center;
    font-size: 3em;
    font-weight: 600;
    margin-bottom: 30px;
}
.detail-global a {
    display: flex; 
    text-decoration: none; 
    font-weight: 600; 
    color:#28282f;
    background-color: #fff;
    margin: 5px 15px 15px 5px;
    border-radius: 5px;
    box-shadow: 0 0 3px 1px hsla(0,0%,9%,.1);
    align-items: center;
}
.detail-global a:hover {background-color: hsl(47, 100%, 69%)}
.maskot-container {
    width: 100%;
    height: 300px;
    position: relative;
    display: flex;
    width: 100%;
    margin-top: 35px;
    border-radius: 15px;
    padding: 25px;
    box-sizing: border-box;
    border: 1px solid;
}
.maskot-container .text {width: 60%; text-align: justify;}
.maskot-container .text h2 {font-size: 2em; font-weight: 600; text-align: left;}
.maskot-container .maskot-img-coco,
.maskot-container .maskot-img-hector,
.maskot-container .maskot-img-dante,
.maskot-container .maskot-img-chica,
.maskot-container .maskot-img-enesto,
.maskot-container .maskot-img
 {
    position: absolute;
    height: 100%;
    width: 200px;
    top: 15px;
    right: 15px;
    bottom: 0px;
	
    background-size: cover;
    background-position: center center;
}

.maskot-img-coco {background-image: url(../img/maskot/merah.png);}
.maskot-img-hector {background-image: url(../img/maskot/hijau.png);}
.maskot-img-dante {background-image: url(../img/maskot/putih.png);}
.maskot-img-chica {background-image: url(../img/maskot/biru.png);}
.maskot-img-enesto {background-image: url(../img/maskot/kuning.png);}
.maskot-img{}

.box-contact {
    width: 100%;
    display: flex;
}
.contact-list {padding: 10px; width: 40%;}
.contact-form {width: 60%; background-color:hsl(230, 60%, 98%);}
.contact-form iframe {width: 100%;}
.detail-pamflet {
    min-width: 50%; 
    padding: 20px;
    background-color: #fff;
    /* karena bakal turun pas diperkecil, jangan dikasih width */
    
}
.detail-text {padding: 30px;}
.detail-pamflet img {width: 100%;}
.detail-lomba h2 {
    font-size: 3em;
    font-weight: 600;
    color: #000000c0;
    margin-bottom: 30px;
}
.detail-lomba .h2-kecil {font-size: 2.4em;}
.detail-lomba h3 {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
.detail-lomba b .strong {font-weight: 600;}
.desc {
    text-align: justify;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 150%;
}
table, th, td {
    border: 1px solid;
    padding: 7px 5px 7px 5px;
    text-align: left;
  }
table {
    border-collapse: collapse;
    width: 100%;
}
table td {
    width: 50%;
}

.text-timeline h4 {margin-top: 20px; margin-bottom: 15px; font-weight: 600;}
.text-timeline table, .text-timeline th, .text-timeline td {
    border: 1px solid;
    text-align: left;
}

.text-timeline table {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .box-lomba {display: block;}
    .detail-lomba {width: 100%; float: left;}
    .detail-pamflet {max-width: 100%; float: left;}

    .box-contact {display: block;}
    .contact-list {width: 100%;}
    .contact-form {width: 100%;}

    .maskot-container {
        width: 100%;
        position: none;
        display: flex;
        height: max-content;
        flex-direction: column;
        margin-top: 35px;
        border-radius: 15px;
        padding: 20px;
        box-sizing: border-box;
    }
    .maskot-container .text {width: 100%; text-align: justify;}
    .maskot-container .maskot-img-coco,
    .maskot-container .maskot-img-hector,
    .maskot-container .maskot-img-dante,
    .maskot-container .maskot-img-chica,
    .maskot-container .maskot-img-enesto
    {
        position: relative;
        width: 300px;
        height: 230px;
        top: 0;
        left: -70px;
        bottom: 0px;
        background-size: cover;
        background-position: center center;
    }
}

@media (max-width: 768px) {
    .box-lomba {
        display: block;
    }

    .detail-lomba {
        width: 100%;
        float: left;
    }

    .detail-pamflet {
        max-width: 100%;
        float: left;
    }

    .box-contact {
        display: block;
    }

    .contact-list {
        width: 100%;
    }

    .contact-form {
        width: 100%;
    }

    .maskot-container {
        flex-direction: column; /* Ubah flex-direction menjadi column */
        height: auto; /* Mengatur agar kontainer memiliki tinggi otomatis */
    }

    .maskot-container .text {
        width: 100%;
         /* Tambahkan jarak bawah agar teks tidak menempel dengan gambar */
    }

    .maskot-container .maskot-img-coco,
    .maskot-container .maskot-img-hector,
    .maskot-container .maskot-img-dante,
    .maskot-container .maskot-img-chica,
    .maskot-container .maskot-img-enesto,
    .maskot-container .maskot-img {
        position: relative; /* Ubah posisi menjadi relative */
        width: 200px; /* Agar gambar menyesuaikan lebar kontainer */
        height: 300px; /* Tetapkan tinggi agar gambar tetap terlihat */
        margin-top: 5px; /* Tambahkan jarak atas agar ada ruang dengan teks */
		margin-left: auto;
		margin-right: auto;
    }
}