.content {
    background-color: wheat;
}

.main-content-program-kursus {
    padding: 2vw 7vw 2vw;
}


/* item 1 base */
.item-layout {
    margin: 3vw auto 8vw;
}

.kursus-item {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    grid-template-areas: "info logo";
    align-items: start;
}

.kursus-info {
    grid-area: info;
    padding: 2vw;
    background-color: rgb(249,252,88);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "image requirement";
    gap: 1.7vw;
    box-shadow: -1vw 1vw 3px 0px rgb(9, 44, 136);
}

.kursus-image-box {
    grid-area: image;
}

.kursus-image-box img {
    width: 25vw;
    margin-bottom: 1vw;
    border-radius: 10px;
}

.kursus-info ul {
    grid-area: requirement;
    width: 28vw;
    padding-left: 3vw;
}

.kursus-info ul li {
    font-size: 1.6vw;
}

.kursus-logo {
    grid-area: logo;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img_logo"
                        "button";
    gap: 3vw;
}

.image-logo {
    grid-area: img_logo;
    display: grid;
    grid-template-columns: 1fr;
}

.image-logo img {
    height: 24vw;
}

.image-logo h3 {
    margin-top: -15vw;
    margin-left: 1vw;
    width: min-content;
    font-weight: bold;
    color: rgb(9, 44, 136);
    font-family: 'jua';
    text-shadow: 0.2vw 0.2vw 3px white, -0.2vw 0.2vw 3px white, 0.2vw -0.2vw 3px white, -0.2vw -0.2vw 3px white;
    font-size: 2.5vw;
}

.btn-pendaftaran-kursus {
    grid-area: button;
    width: 100%;
    text-decoration: none;
    height: fit-content;
    text-align: center;
    padding: 0.5vw 4vw;
    color: white;
    background-color: rgb(9, 44, 136);
    border-radius: 5px;
    font-size: 1.5vw;
}

/* testimoni siswa */
.testimoni-title {
    text-align: center;
    color: white;
    width: max-content;
    background-color: rgb(9, 44, 136);
    padding: 5px 40px;
    border-radius: 10px;
    margin: 5vw auto 2vw;
    font-family: 'candal';
}

.testimoni-content-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrow {
    width: 3vw;
    opacity: 0.5;
    cursor: pointer;
}

.arrow:hover {
    scale: 1.1;
    opacity: 1;
}

.arrow:active {
    scale: 1;
}

.left {
    rotate: 180deg;
}

.split-2-layout {
    display: flex;
    gap: 2vw;
    background-color: rgb(9, 44, 136);
    justify-content: center;
    width: 75vw;
    padding: 2vw 2vw;
    border-radius: 10px;
    box-shadow: 0 0 0 0.3vw yellow, -1vw 1vw 3px 0px rgb(9, 44, 136);
}

.testimoni-box {
    background-color: aqua;
    padding: 2vw;
    border-radius: 10px;
    width: 22vw;
}

.testimoni-box h5 {
    font-weight: bold;
    margin-bottom: 2vw;
    font-size: 1.7vw;
}

.content-testimoni {
    font-weight: normal;
}

.content-testimoni p {
    font-size: 1.1vw;
}

.img-testimoni {
    display: block;
    float: right;
    margin-left: 1vw;
    width: 40%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    box-shadow: 0px 0px 0px 0.2vw white, 0px 0px 0px 0.4vw aqua, 0px 0px 0px 0.6vw white;
}

/* Brosur */
.brosur {
    display: block;
    margin: 5vw auto 20vw;
    width: 65vw;
    border-radius: 10px;
    box-shadow: -1vw 1vw 3px 0px rgb(9, 44, 136);
}


/* item kedua penyesuaian */
.item-layout:nth-child(2) .kursus-item {
    grid-template-areas: "logo info";
    grid-template-columns: 1fr 2.5fr;
}

.item-layout:nth-child(2) .kursus-logo {
    gap: 3vw;
}

.item-layout:nth-child(2) .kursus-logo h3 {
    margin-top: -13vw;
    margin-right: 1vw;
    text-align: right;
}

.item-layout:nth-child(2) .kursus-info {
    grid-template-areas: "requirement image";
    grid-template-columns: 2fr 1fr;
    box-shadow: 1vw 1vw 3px 0px rgb(9, 44, 136);
}

.item-layout:nth-child(2) .image-logo {
    justify-items: end;
}

.item-layout:nth-child(2) .kursus-image-box {
    justify-self: end;
}

/* testimoni */
.item-layout:nth-child(2) .split-2-layout {
    box-shadow: 0 0 0 0.3vw yellow, 1vw 1vw 3px 0px rgb(9, 44, 136);
}

/* brosur */
.item-layout:nth-child(2) .brosur {
    box-shadow: 1vw 1vw 3px 0px rgb(9, 44, 136);
}



/* item ke 3 */
.item-layout:nth-child(3) .kursus-logo {
    grid-template-areas: "button"
                        "img_logo";
    align-self: self-end;
}

.item-layout:nth-child(3) .kursus-logo h3 {
    margin-top: -18vw;
}

.item-layout:nth-child(3) .kursus-info {
    align-self: self-start;
    box-shadow: -1vw -1vw 3px 0px rgb(9, 44, 136);
}

/* testimoni */
.item-layout:nth-child(3) .split-2-layout {
    box-shadow: 0 0 0 0.3vw yellow, -1vw -1vw 3px 0px rgb(9, 44, 136);
}

/* brosur */
.item-layout:nth-child(3) .brosur {
    box-shadow: -1vw -1vw 3px 0px rgb(9, 44, 136);
}



/* item ke 4 */
.item-layout:nth-child(4) .kursus-item {
    grid-template-areas: "logo info";
    grid-template-columns: 1fr 2.5fr;
}

.item-layout:nth-child(4) .kursus-logo {
    gap: 3vw;
    grid-template-areas: "button"
                        "img_logo";
    align-self: self-end;
}

.item-layout:nth-child(4) .kursus-logo h3 {
    margin-top: -21vw;
    margin-right: 1vw;
    text-align: right;
}

.item-layout:nth-child(4) .kursus-info {
    grid-template-areas: "requirement image";
    grid-template-columns: 2fr 1fr;
    align-self: self-start;
    box-shadow: 1vw -1vw 3px 0px rgb(9, 44, 136);
}

.item-layout:nth-child(4) .image-logo {
    justify-items: end;
}

.item-layout:nth-child(4) .kursus-image-box {
    justify-self: end;
}

/* testimoni */
.item-layout:nth-child(4) .split-2-layout {
    box-shadow: 0 0 0 0.3vw yellow, 1vw -1vw 3px 0px rgb(9, 44, 136);
}

/* brosur */
.item-layout:nth-child(4) .brosur {
    box-shadow: 1vw -1vw 3px 0px rgb(9, 44, 136);
}


/* Responsive Break */
@media (max-width: 650px) {
    .testimoni-title {
        font-size: 3vw;
    }
}