/* =================================
   VISI MISI PAGE
   MAN 1 PONOROGO
================================= */



/* =================================
   VISI MADRASAH
================================= */


.visi-section{

    padding:90px 20px;

    background:#fafafa;

    text-align:center;
    
    padding-bottom:40px;
}



.visi-header .visi-label{

    color:#df6a32;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

}



.visi-header h1{

    font-size:42px;

    margin:15px 0;

    color:#111827;

}



.visi-header p{

    color:#64748b;

    font-size:18px;

}



/* CARD VISI */


.visi-card{

    max-width:950px;

    margin:55px auto 15px;

    padding:60px 80px;

    background:white;

    border-radius:18px;

    border:1px solid #eeeeee;

    position:relative;

    box-shadow:

    0 15px 40px rgba(0,0,0,.06);

}



.quote-icon{

    position:absolute;

    top:20px;

    left:35px;

    font-size:80px;

    color:#f6bd4d;

    font-weight:bold;

}



.visi-text{

    font-size:28px;

    line-height:1.6;

    font-weight:600;

    color:#1e293b;

}



/* =================================
   MISI MADRASAH
================================= */



.misi-card{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    min-height:220px;

    padding:32px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    transition:.35s ease;

}



.misi-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 12px 30px rgba(0,0,0,.08);

}



/* nomor misi */


.misi-number{

    position:relative;

    z-index:2;

}



/* judul misi */


.misi-card h3{

    position:relative;

    z-index:2;

    font-size:24px;

    line-height:1.35;

    margin-top:25px;

    min-height:90px;

}



/* =================================
   OVERLAY INDIKATOR
================================= */


.indikator-pencapaian{


    position:absolute;


    inset:0;


    background:

    linear-gradient(
        135deg,
        #df6a32,
        #f6bd4d
    );


    color:white;


    padding:32px;


    display:flex;


    flex-direction:column;


    justify-content:flex-start;


    overflow-y:auto;


    transform:translateY(100%);


    transition:.4s ease;


    z-index:5;


}



.misi-card:hover .indikator-pencapaian{


    transform:translateY(0);


}



/* judul indikator */


.indikator-pencapaian h4{


    margin:0 0 15px;


    font-size:18px;


    color:white;


}



/* list indikator */


.indikator-pencapaian ul{


    padding-left:20px;


    margin:0;


}



.indikator-pencapaian li{


    margin-bottom:10px;


    line-height:1.6;


    font-size:14px;


}



/* =================================
   MISI KE 5 TENGAH
================================= */


.misi-terakhir{


    grid-column:1 / 3;


    width:calc(50% - 12px);


    justify-self:center;


}



/* =================================
   RESPONSIVE
================================= */


@media(max-width:768px){


    .visi-header h1{

        font-size:32px;

    }



    .visi-card{

        padding:40px 25px;

    }



    .visi-text{

        font-size:20px;

    }



    .misi-terakhir{


        grid-column:auto;


        width:auto;


    }



    .misi-card h3{

        font-size:20px;

    }


}