@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.tutup2{
    width:100%;
    min-height:50px;
    /*padding:15px;*/
    padding-bottom:60px;
    font-family: 'Roboto', sans-serif;
}

.kotak_header{
    width:100%;
    height:25px;
    /*background: linear-gradient(90deg, #037C3D, #06A94F)*/
    background: linear-gradient(90deg, #036F37, #059847)
    
}

.tutup3{
    padding:15px;
    padding-top:0;
    margin-top:-20px;
}

.tutup{
    width:1280px;
    min-height:1000px;
    margin:auto;
    background:#fff;
    padding:20px;
    box-shadow: 0 5px 30px #0000001a;
	border-radius:16px;
}

.border{
    border:1px solid black;
}

.tutup_instansi, .tutup_instansi2{
    display:flex;
    flex-wrap: wrap;
    /*align-items: stretch;*/
    /*justify-content: space-between;*/
    gap:20px;
}

.tutup_instansi a, .tutup_instansi2 a{
    color:#000;
    text-decoration:none;
    /*display:block;*/
}

/*.tutup_instansi a{*/
    
/*}*/

.kotak_instansi, .kotak_instansi2{
    position:relative;
    /*width:200px;*/
    /*min-height:50px;*/
    flex: calc(33.3% - 14px);
    max-width: calc(33.3% - 14px);
    border:1px solid #DBDFE9;
    /*margin:15px;*/
    border-radius:5px;
    box-shadow:0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    padding:20px 0;
    display:flex;
    transition: all .5s ease; 
}

.kotak_instansi:hover, .kotak_instansi2:hover{
    transform: translateY(-5px);
}

.kotak_instansi:hover .instansi_judul p:first-child, .kotak_instansi2:hover .instansi_judul p:first-child{
    color:#06A94F;
}



.tutup_instansi2{
    gap:10px;
}

.kotak_instansi2{
    flex: calc(25% - 8px);
    max-width: calc(25% - 8px);
}




.instansi_logo{
    width:15%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.instansi_logo2{
    width:18%;
}

.instansi_logo i{
    color:#03652F;
    font-size:40px;
}

.instansi_logo2 i{
    font-size:30px;
}

.instansi_logo3 i{
    font-size:30px;
}

.instansi_judul{
    width:85%;
    display:flex;
    /*align-items:;*/
    flex-direction: column;
    justify-content:center;
    gap:4px;
    padding-right:5px;
}

.instansi_judul p{
    padding:0;
    margin:0;
}

.instansi_judul p:first-child{
    font-size:15px;
    color:#071437;
    font-weight:500;
    transition: all .5s ease; 
    line-height:19px;
}

.instansi_judul p:last-child{
    font-size:13px;
    color:#99A1B7;
    line-height:14px;
    /*font-weight:700;*/
}

.ins_judul{
    /*padding:0;margin:0;*/
    font-size:20px;
    color:#071437;
    font-weight:500;
    /*transition: all .5s ease; */
    line-height:19px;
}

.ins_judul2{
    font-size:16px;
    margin:20px 0 10px 0;
}

.dot{
    position:absolute;
    bottom:15px;
    right:15px;
}

.dot, .neon-dot {
    /*margin:20px;*/
  width: 12px; /* Adjust size as needed */
  height: 12px; /* Must match width for a perfect circle */
  background-color: #61EF61; /* Base color of the dot */
  border-radius: 50%; /* Makes the div a circle */
  /* Multiple box shadows create the glowing effect */
  box-shadow:
    0 0 5px #fff,  /* Inner white glow */
    0 0 10px #fff, /* Inner white glow */
    0 0 20px #0fa, /* Outer neon color glow */
    0 0 40px #0fa, /* Wider neon color glow */
    0 0 80px #0fa; /* Farthest neon color glow */
}

.dot2{
    background-color: #F79D00;
    box-shadow:
    0 0 5px #fff, 
    0 0 10px #fff,
    0 0 20px #d35400;
    /*0 0 40px #d35400;*/
    /*0 0 80px #d35400;*/
}

.dot3{
    background-color: #737373;
    box-shadow:
    0 0 5px #fff, 
    0 0 10px #fff,
    0 0 20px #737373;
    /*0 0 40px #737373;*/
    /*0 0 80px #737373;*/
}






@media (max-width:1280px){
 
.tutup{
    width:100%;
}

.kotak_instansi{
    /*width:200px;*/
    flex: calc(50% - 10px);
    max-width: calc(50% - 10px);
    
}


    
}


@media (max-width:1060px){
.kotak_instansi2{
    flex: calc(33.3% - 7px);
    max-width: calc(33.3% - 7px);
}
}

@media (max-width:810px){
.kotak_instansi2{
    flex: calc(50% - 5px);
    max-width: calc(50% - 5px);
}
}


@media (max-width:720px){
    
.kotak_instansi{
    /*width:200px;*/
    flex: 100%;
    max-width: 100%;
}


    
}


@media (max-width:560px){
.kotak_instansi2{
    flex: calc(100%);
    max-width: calc(100%);
}
}