/*
    This CSS file contains the styles for the Panduan sections.
    It formats the content using a CSS Grid and includes responsive adjustments.
*/

body {
    margin: 0;
    background-color: white;
    color: black;
    font-family: sans-serif;
}

/* Base styles for the main content container */
.panduan-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default 4 columns */
    gap: 1.5vw;
    margin-top: 2vw;
    margin-bottom: 4vw;
    background-color: #a8daea;
    padding: 1vw;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1vw;
}

/* Styles for a specific 5-column layout if needed */
.panduan-container-5col {
    grid-template-columns: repeat(5, 1fr) !important;
}

.panduan-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    background-color: #fff;
    padding: 1vw;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 0.5vw;
    height: 13vw;
}

.panduan-header {
    position:relative;
    font-size: 1.8vw;
    font-weight: bold;
    margin-bottom: 2.5vw;
    color: #002d7a;
    padding-left: 1.5vw;
    text-align: center;
    margin-top: -4vw;
}

.shadow-none-3 {
    box-shadow: none !important;
/*    height: 450px;*/
}

.logo-3 {
    width: 15vw; /* smaller logo frame */
    margin: auto;
}

.shadow-none-2 {
    box-shadow: none !important;
    height: 100%;
    position: relative;
}
.img-panduan {  

/*    width: 5vw;*/
    height: 13vw;
/*    object-fit: cover;*/
    padding-bottom: 2vw;
}

.col-lg-4 {
    flex: 0 0 auto;
/*    width: 33%;*/
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 992px) {
    .panduan-header {
        position: relative;
        font-size: 3.5vw;
        font-weight: bold;
        margin-bottom: 2.5vw;
        color: #002d7a;
        padding-left: 1.5vw;
        text-align: center;
        margin-top: -13vw;
    }

    .video-text {
       font-size: 3.8vw;
       padding-top: 1.2vw;
    }

    .img-panduan {
        /*    width: 5vw;*/
        height: 30vw;
        /*    object-fit: cover;*/
        padding-bottom: 2vw;
    }
}

    .panduan-title {
        margin-top: 1vw;
        margin-bottom: 1vw;
        font-size: 1.1vw;
        color: #002d7a;
        padding: 0 0.5vw;
        height: 4vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/*    .video-buttons-frame {
        margin-top: 1.5vw;
        width: 13vw !important;
    }*/

    .video-buttons {
        padding: 0.5vw 1vw;
        color: white;
        border-radius: 0.5vw;
        text-decoration: none;
        font-size: 1vw;
    }

    .video-text {
/*        margin-top: 0.3vw;*/
    }

    /* Responsive adjustments for different screen sizes */

    /* For screens smaller than 1024px, all containers will have 2 columns. */
    @media (max-width: 1024px) {
        .panduan-container,
        .panduan-container-5col {
            grid-template-columns: repeat(2, 1fr);
            gap: 2vw;
        }

        .panduan-title, .video-buttons {
            font-size: 1.8vw;
        }
    }

    /* For screens smaller than 768px, all containers will have 1 column. */
    @media (max-width: 768px) {
        .panduan-container,
        .panduan-container-5col {
            grid-template-columns: repeat(1, 1fr);
        }

        .panduan-title, .video-buttons {
            font-size: 2.5vw;
        }
    }