/* ==========================================================
   MOBILE CSS
   Landing Page SIKAD UIR
   Desktop tidak berubah
========================================================== */

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

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
    margin:0;
    padding:0;
    background:#004029;
}

.container-fluid{
    width:100%;
    margin:0 !important;
    padding:0 !important;
}

.row{
    margin:0 !important;
}

[class*="col-"]{
    padding-left:15px;
    padding-right:15px;
}

/* ======================================
   HEADER
====================================== */

.box-header{
    display:none !important;
}

/* ======================================
   HERO
====================================== */

.box-featured{
    background:#004029;
    padding:30px 0 10px;
}

.box-featured > .row{
    display:flex;
    flex-direction:column;
}

.header-featured-title{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:100% !important;
    margin:0 !important;
    padding:0 20px !important;
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
}

.p-featured-1{
    font-family:"Just Another Hand";
    color:#FFF;
    font-size:52px;
    line-height:1;
    margin:0;
}

.p-featured-2{
    font-family:"Just Another Hand";
    color:#FBB136;
    font-size:55px;
    line-height:1;
    margin:-8px 0 15px;
}

.p-featured-3{
    width:100%;
    max-width:320px;
    margin:0 auto;
    font-size:14px;
    line-height:1.8;
    color:#FFF;
    text-align:center;
}

.column-button{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:25px;
    padding:0 20px;
}

.btn-login{
    width:100% !important;
    max-width:400px;
    height:50px;
    border-radius:50px;
    border:1px solid #FBB136;
    background:#004029;
    color:#FFF;
    font-weight:600;
    font-size:14px;
}

.div-logo-featured{
    width:100% !important;
    height:auto !important;
    margin:20px auto 0;
    display:flex;
    justify-content:center;
}

.logo-featured{
    width:80%;
    max-width:280px;
    height:auto;
}

/* ======================================
   BERITA & AGENDA
====================================== */

.box-news{
    margin-top:0 !important;
}

.box-news .row{
    flex-direction:column;
    margin:0 !important;
}

.box-news > .row > [class*="col-"]{
    padding:0;
}

.div-newslogo-featured{
    width:100% !important;
    margin:30px 0 0 0 !important;
    padding:0 20px;
    align-items:flex-start;
    display:flex;
    flex-direction:column;
}

.logonews-featured{
    display:none !important;
}

.p-logonews-container{
    margin-top:0 !important;
    margin-left:0 !important;
    display:flex;
    align-items:baseline;
}

.p-logonews-1{
    color:#FFF;
    font-family:Poppins;
    font-size:22px !important;
    font-style:normal;
    font-weight:700;
    line-height:normal;
    margin-bottom:0;
}

.p-logonews-2{
    color:#FBB136;
    font-family:Poppins;
    font-size:22px !important;
    font-style:normal;
    font-weight:700;
    line-height:normal;
    margin-bottom:0;
}

.p-logonews-3{
    color:#FBB136;
    font-family:Poppins;
    font-size:22px !important;
    font-style:normal;
    font-weight:700;
    line-height:normal;
    margin-bottom:0;
}

.segment-news{
    min-height:auto !important;
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    color:#FFF;
    width:100% !important;
    margin:15px 0 0 0 !important;
    padding:0 20px;
}

.segment-news .row.mb-5{
    flex-direction:row;
    align-items:center;
    width:100%;
    margin:0 0 10px 0 !important;
    padding:8px 0;
    cursor:pointer;
}

.segment-news .col-3{
    flex:0 0 50px;
    max-width:50px;
    padding:0 8px 0 0 !important;
}

.segment-news .col-9{
    flex:1;
    padding:0 0 0 5px !important;
}

.box-image-1{
    width:50px !important;
    height:50px !important;
    margin:0 !important;
    padding:4px !important;
    border-radius:12px;
    border:1px solid #fff;
    box-sizing:border-box;
    overflow:hidden;
    flex-shrink:0;
    position:relative;
    background:#003925;
}

.box-image-1 img.img-fluid.logonews-1-featured{
    position:absolute;
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:8px;
    object-fit:cover;
}

.box-image-elemen-1{
    margin-top:0 !important;
    margin-left:0 !important;
    color:#E3E3E3;
    font-family:Poppins;
    font-size:13px !important;
    font-weight:700;
    line-height:1.4;
}

.segment-news [style*="display:flex"]{
    flex-wrap:wrap;
    gap:4px !important;
    margin-top:5px !important;
    width:100% !important;
}

.segment-news [style*="width:260px"],
.segment-news [style*="width:180px"],
.segment-news [style*="width:120px"]{
    width:auto !important;
    flex:1 1 auto;
}

.elemen-date-1,
.elemen-date-2,
.elemen-date-3{
    margin-top:0 !important;
    margin-left:0 !important;
    color:#809C92;
    font-family:Poppins;
    font-size:10px !important;
    width:auto;
    height:auto;
}

.box-image-elemen-line-1{
    margin-left:0 !important;
    margin-top:8px !important;
    margin-bottom:5px;
    border-bottom:1px solid #A8A8A8;
}

.segment-news-2{
    text-align:right;
    color:#FFF;
    width:100% !important;
    margin:5px 0 25px 0 !important;
    padding:0 20px;
}

.others-news{
    color:#FFF;
    font-family:Poppins;
    font-size:14px !important;
    font-weight:500;
    margin-left:auto !important;
    text-align:right;
}

/* ======================================
   KONTAK & INFORMASI
====================================== */

.box-contact{
    background-color:#004029;
    margin:0;
    padding:30px 0 0;
}

.box-contact > .row{
    margin:0 !important;
}

.box-contact > .row > [class*="col-"]{
    padding:0 !important;
}

.div-contactinformation-featured{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 20px;
}

.div-contactinformation-featured .p-logonews-container{
    margin-top:0 !important;
    margin-left:0 !important;
}

.footer-featured-title{
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    color:#FFF;
    width:100% !important;
    margin:25px 0 0 0 !important;
    padding:0 20px;
}

.footer-featured-title > .row{
    order:3;
    width:100%;
    margin:0 !important;
}

.footer-featured-title > p:nth-child(2){
    order:1;
}

.footer-featured-title > p:nth-child(3){
    order:2;
}

.phone-container{
    display:flex;
    justify-content:flex-start;
    gap:15px;
    width:100%;
    margin-top:15px;
    margin-bottom:0;
}

.phone-featured{
    display:flex;
    width:45px !important;
    height:45px !important;
    margin:5px 5px 5px 0;
}

.footer-featured-title p{
    display:flex !important;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:8px;
}

.footer-featured-title p span{
    font-size:14px !important;
}

.div-contact-featured{
    display:block !important;
    width:100%;
    margin:25px 0 0 0;
    padding:0 20px;
    text-align:center;
}

.contact-text{
    display:none !important;
}

.contact-featured{
    display:block !important;
    width:80% !important;
    max-width:300px !important;
    height:auto !important;
    margin:0 auto;
}

.box-footer{
    background-color:#003925;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    margin:30px 0 0 -15px !important;
    padding:15px 10px;
    height:auto !important;
    width:calc(100% + 30px);
}

.footer-text{
    display:inline-flex;
    flex-wrap:nowrap;
    white-space:nowrap;
    font-size:10px;
    text-align:center;
    color:#FFF;
    width:100%;
    justify-content:center;
    align-items:center;
    gap:0;
}

.url-footer{
    color:#E7E7E7;
    font-family:Poppins;
    font-size:12px;
    font-weight:400;
    text-decoration:underline;
}

}