@font-face {
    font-family: 'Outfit Regular';
    src: url('fonts/Outfit-Regular.eot');
    src: url('fonts/Outfit-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Outfit-Regular.woff2') format('woff2'),
        url('fonts/Outfit-Regular.woff') format('woff'),
        url('fonts/Outfit-Regular.ttf') format('truetype'),
        url('fonts/Outfit-Regular.svg#Outfit-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit Black';
    src: url('fonts/Outfit-Black.eot');
    src: url('fonts/Outfit-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Outfit-Black.woff2') format('woff2'),
        url('fonts/Outfit-Black.woff') format('woff'),
        url('fonts/Outfit-Black.ttf') format('truetype'),
        url('fonts/Outfit-Black.svg#Outfit-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit Bold';
    src: url('fonts/Outfit-Bold.eot');
    src: url('fonts/Outfit-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Outfit-Bold.woff2') format('woff2'),
        url('fonts/Outfit-Bold.woff') format('woff'),
        url('fonts/Outfit-Bold.ttf') format('truetype'),
        url('fonts/Outfit-Bold.svg#Outfit-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit Medium';
    src: url('fonts/Outfit-Medium.eot');
    src: url('fonts/Outfit-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Outfit-Medium.woff2') format('woff2'),
        url('fonts/Outfit-Medium.woff') format('woff'),
        url('fonts/Outfit-Medium.ttf') format('truetype'),
        url('fonts/Outfit-Medium.svg#Outfit-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit SemiBold';
    src: url('fonts/Outfit-SemiBold.eot');
    src: url('fonts/Outfit-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Outfit-SemiBold.woff2') format('woff2'),
        url('fonts/Outfit-SemiBold.woff') format('woff'),
        url('fonts/Outfit-SemiBold.ttf') format('truetype'),
        url('fonts/Outfit-SemiBold.svg#Outfit-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit Light';
    src: url('fonts/Outfit-Light.eot');
    src: url('fonts/Outfit-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Outfit-Light.woff2') format('woff2'),
        url('fonts/Outfit-Light.woff') format('woff'),
        url('fonts/Outfit-Light.ttf') format('truetype'),
        url('fonts/Outfit-Light.svg#Outfit-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk Bold';
    src: url('fonts/SpaceGrotesk-Bold.eot');
    src: url('fonts/SpaceGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpaceGrotesk-Bold.woff2') format('woff2'),
        url('fonts/SpaceGrotesk-Bold.woff') format('woff'),
        url('fonts/SpaceGrotesk-Bold.ttf') format('truetype'),
        url('fonts/SpaceGrotesk-Bold.svg#SpaceGrotesk-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk Medium';
    src: url('fonts/SpaceGrotesk-Medium.eot');
    src: url('fonts/SpaceGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpaceGrotesk-Medium.woff2') format('woff2'),
        url('fonts/SpaceGrotesk-Medium.woff') format('woff'),
        url('fonts/SpaceGrotesk-Medium.ttf') format('truetype'),
        url('fonts/SpaceGrotesk-Medium.svg#SpaceGrotesk-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk Regular';
    src: url('fonts/SpaceGrotesk-Regular.eot');
    src: url('fonts/SpaceGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpaceGrotesk-Regular.woff2') format('woff2'),
        url('fonts/SpaceGrotesk-Regular.woff') format('woff'),
        url('fonts/SpaceGrotesk-Regular.ttf') format('truetype'),
        url('fonts/SpaceGrotesk-Regular.svg#SpaceGrotesk-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk SemiBold';
    src: url('fonts/SpaceGrotesk-SemiBold.eot');
    src: url('fonts/SpaceGrotesk-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'),
        url('fonts/SpaceGrotesk-SemiBold.woff') format('woff'),
        url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'),
        url('fonts/SpaceGrotesk-SemiBold.svg#SpaceGrotesk-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk Light';
    src: url('fonts/SpaceGrotesk-Light.eot');
    src: url('fonts/SpaceGrotesk-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpaceGrotesk-Light.woff2') format('woff2'),
        url('fonts/SpaceGrotesk-Light.woff') format('woff'),
        url('fonts/SpaceGrotesk-Light.ttf') format('truetype'),
        url('fonts/SpaceGrotesk-Light.svg#SpaceGrotesk-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face{
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
		url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
		url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style:normal;
}

html, body{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
}

button,
input,
textarea{
	outline: none;
}

.err{
	position: relative;
	display: block;
	color: red;
	display: none;
	font-family: 'Space Grotesk Regular';
	font-size: 14px;
	margin-top:5px;
}
	.text-error,
	.text-error:focus{
		border: solid 1px red;
	}

    .btn-orange{
        background-color: #df6926;
        color: #fff;
        border: none;
        padding: 7px 10px;
        border-radius: 7px;
        font-family: 'Outfit SemiBold';
        font-size: 14px;
        user-select: none;
    }
        .btn-orange:hover{
            background-color: #c67a2a;
        }
            .input-group-btn .btn-orange{
                padding: 9px 10px;
            }
    .btn-disabled{
        background-color: #d3d3d3 !important;
        color: #000 !important;
        cursor: default !important;
        user-select: none;
    }
    .btn-no-bg{
        border: none;
        color: #0082a4;
        font-family: 'Outfit SemiBold';
        background: none;
        padding: 7px 10px;
        border-radius: 7px;
        font-size: 14px;
    }
        .btn-no-bg:hover{
            background-color: #badbe4;
        }
    .btn-blue{
        background-color: #0082a4;
        color: #fff;
        border: none;
        padding: 7px 10px;
        border-radius: 7px;
        font-family: 'Outfit SemiBold';
        font-size: 14px;
    }
        .btn-blue:hover{
            background-color: #4dc8e7;
        }

    .header{
		position: fixed;
		display: block;
		width: 100%;
		height: 60px;
		background-color: #023b57;
		z-index: 999;
	}
		.frame-header{
			position: relative;
			display: block;
			width: 100%;
			left: 50%;
			transform: translateX(-50%);
		}
			.box-logo{
				position: relative;
				display: inline-block;
				padding-top: 15px;
				padding-bottom: 10px;
				z-index: 9999;
                left: 10px;
			}
				.box-logo img{
					height: 28px;
				}
			.btn-menu{
				position: absolute;
				display: block;
				width: 45px;
				padding: 10px;
				background-color: #fff;
				top: 12px;
			    right: 12px;
                border-radius: 3px;
			}
				.menu-button{
					width: 25px;
					height: 18px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					cursor: pointer;
				}
				.bar{
					width: 100%;
					height: 3px;
					background-color: #000;
					transition: transform 0.3s ease, opacity 0.3s ease;
				}
				/* Close button styles */
				.menu-button.open .bar:nth-child(1) {
					transform: translateY(7.5px) rotate(45deg);
				}
				.menu-button.open .bar:nth-child(2) {
					opacity: 0;
				}
				.menu-button.open .bar:nth-child(3) {
					width: 100%;
					transform: translateY(-7.5px) rotate(-45deg);
				}
			.box-menu{
				position: relative;
				display: none;
				width: 100%;
				background-color: #fff;
				border-top: solid 1px #ccc;
                top: 7px;
			}
				.frame-menu{
					position: relative;
					display: table;
					width: 100%;
					text-align: left;
				}
					.isi-menu{
						position: relative;
						display: table-cell;
						vertical-align: middle;
					}
					.box-menu-button{
						padding: 10px 20px;
					}
						.menu{
							position: relative;
							display: block;
							width: 100%;
							color: #000;
							font-family: 'Outfit SemiBold';
							font-size: 16px;
							padding: 10px 20px;
							border-bottom: solid 1px #ccc;
						}
                        .menu-orange{
                            position: relative;
							display: block;
							width: 100%;
							font-family: 'Outfit SemiBold';
							font-size: 16px;
							padding: 10px 20px;
							border-bottom: solid 1px #ccc;
                            background-color: #df6926;
                            color: #fff;
                        }
						.menu-aktif,
						.menu:hover{
							background-color: #285870;
							color: #fff;
						}
                        .menu-orange-aktif,
						.menu-orange:hover{
							background-color: #e08956;
							color: #fff;
						}
						
	.body{
		position: relative;
		display: block;
		width: 100%;
        padding-top: 60px;
		color: #000;
        font-family: 'Outfit Regular';
        font-size: 16px;
	}
        .segment{
            position: relative;
            display: block;
            width: 100%;
        }
            .content{
                position: relative;
                display: block;
                width: 90%;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                padding: 30px 0px;
            }
            .box-banner{
                position: relative;
                display: block;
                width: 100%;
                text-align: center;
                border-top: solid 1px #fff;
            }
                .box-slider{
                    position: relative;
                    display: block;
                    width: 100%;
                    text-align: center;
                    color: #000;
                    font-family: 'Outfit Bold';
                    font-size: 26px;
                }
                .frame-button-slider{
                    position: absolute;
                    top: 85vw;
                    left: 0px;
                    width: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    z-index: 999 !important;
                }
                    .box-button-slider{
                        position: relative;
                        display: block;
                        width: 100%;
                        text-align: center;
                        margin-top: 30px;
                    }
                        .btn-slider{
                            font-size: 24px;
                            padding: 10px 50px;
                        }
                        .box-login-slider{
                            position: relative;
                            display: block;
                            width: 100%;
                            margin-top: 10px;
                            font-family: 'Outfit Regular';
                            font-size: 18px;
                            color:#fff;
                        }
                        .judul-registrasi{
                            position: relative;
                            display: block;
                            width: 100%;
                            font-family: 'Outfit Bold';
                            font-size: 32px;
                            margin-bottom: 10px;
                        }
                .box-content-2{
                    position: relative;
                    display: flex;
                    flex-direction: column;
                }
                    .box-content-2-left,
                    .box-content-2-right{
                        box-sizing: border-box;
                    }
                    .box-content-2-left{
                        margin-bottom: 20px;
                    }
                        .info-tagline{
                            position: relative;
                            display: block;
                            width: 100%;
                            color: #023b57;
                            font-family: 'Outfit Regular';
                            font-size: 16px;
                        }
                        .tag-line{
                            position: relative;
                            display: block;
                            width: 100%;
                            color: #0082a4;
                            font-family: 'Outfit SemiBold';
                            font-size: 32px;
                            line-height: 38px;
                            padding-bottom: 20px;
                            margin-bottom: 20px;
                            border-bottom: solid 1px #abbcc5;
                        }
                        .box-button{
                            position: relative;
                            display: block;
                            margin-top: 20px;
                            margin-bottom: 20px;
                        }
                .box-count-info{
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                }
                    .frame-count{
                        flex: 1 1 calc(50% - 10px);
                        box-sizing: border-box;
                        padding: 10px 15px;
                        background-color: #fff;
                        font-family: 'Outfit Regular';
                        font-size: 16px;
                        border-radius: 10px;
                    }
                        .count{
                            font-family: 'Outfit SemiBold';
                            color: #0082a4;
                            font-size: 30px;
                            line-height: 32px;
                        }
                .box-content{
                    position: relative;
                    display: block;
                    width: 100%;
                }
                    .judul-content{
                        position: relative;
                        display: block;
                        margin-bottom: 10px;
                        width: 100%;
                        color: #023b57;
                        font-family: 'Outfit SemiBold';
                        font-size: 24px;
                        line-height: 32px
                    }  
                    
                    .box-flex-2{
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        font-family: 'Outfit Regular';
                        color: #023b57;
                        font-size: 16px;
                    }
                        .box-flex-2-left,
                        .box-flex-2-right{
                            box-sizing: border-box;
                        }
                    
                    .box-daring{
                        position: relative;
                        padding: 10px;
                        background-color: #fff;
                        color: #023b57;
                        margin-bottom: 10px;
                        border-radius: 10px;
                    }
                        .judul-daring{
                            font-family: 'Outfit SemiBold';
                            font-size: 22px;
                            margin-bottom: 10px;
                        }
        
        /* Container untuk Flexbox */
        .box-flex-alumni {
            display: flex;
            gap: 20px; /* Jarak antar box */
            justify-content: center;
            flex-wrap: wrap; /* Agar elemen turun ke baris berikutnya jika tidak muat */
        }
            /* Box untuk setiap alumni */
            .box-alumni {
                width: 80%; /* Lebar setiap kartu */
                height: 300px; /* Tinggi setiap kartu */
                perspective: 1000px; /* Efek perspektif untuk flip */
            }   
                /* Struktur flip-card */
                .flip-card {
                    width: 100%;
                    height: 100%;
                }
                    .flip-card-inner {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        transform-style: preserve-3d;
                        transition: transform 0.6s ease-in-out;
                        transform: rotateY(0deg);
                    }   
                    .flip-card:hover .flip-card-inner {
                        transform: rotateY(180deg); /* Rotasi kartu saat hover */
                    }
            
            /* Sisi depan */
            .cover-alumni {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden; /* Sembunyikan sisi belakang */
            }
                .cover-alumni img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover; /* Agar gambar sesuai dengan ukuran box */
                    border-radius: 10px; /* Opsional, membuat sudut gambar melengkung */
                }    
                /* Sisi belakang */
                .info-alumni {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: #007bff; /* Warna latar belakang info */
                    color: white;
                    display: flex;
                    justify-content: left;
                    align-items: top;
                    text-align: left;
                    padding: 10px;
                    font-size: 14px;
                    border-radius: 10px;
                    backface-visibility: hidden; /* Sembunyikan sisi depan */
                    transform: rotateY(180deg); /* Sisi belakang terbalik secara default */
                    flex-wrap: wrap;
                }
                    .nama-alumni{
                        font-size: 14px;
                        align-items: bottom;
                    }
                    
                    .flip-card-inner.flipped {
                        transform: rotateY(180deg);
                    }
        
        .box-flex-artikel{
            display: flex;
            gap: 20px; /* Jarak antar box */
            justify-content: center;
            padding: 5%;
            flex-wrap: wrap; /* Agar elemen turun ke baris berikutnya jika tidak muat */
        }
            .box-artikel{
                position: relative;
                width: 100%;
                height: 350px;
                cursor: pointer;
                border-radius: 10px;
            }
            .box-artikel:hover{
                background-color: #cceff5;
            }
                .box-cover-artikel{
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 200px;
                    margin-bottom: 10px;
                }
                    .cover-artikel{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                    }
                        .cover-artikel img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover; /* Agar gambar sesuai dengan ukuran box */
                            border-radius: 10px; /* Opsional, membuat sudut gambar melengkung */
                        }
                .judul-artikel{
                    position: relative;
                    display: block;
                    font-family: 'Outfit SemiBold';
                    color: #023b57;
                    font-size: 18px;
                    margin-bottom: 10px;
                    padding: 0px 10px;
                }
                .isi-artikel{
                    position: relative;
                    display: block;
                    font-family: 'Outfit Regular';
                    color: #023b57;
                    font-size: 16px;
                    padding: 0px 10px;
                }

        .box-contact{
            position: relative;
            display: block;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
        }
            .box-contact label{
                font-family: 'Outfit Regular';
                color: #023b57;
                font-weight: normal;
            }
                .text-input{
                    border: solid 1px #cbe5ec;
                    padding: 18px 15px;
                    font-family: 'Outfit Regular';
                    font-size: 16px;
                    border-radius: 10px;
                }
                .btn-group-orange{
                    background-color: #df6926;
                    color: #fff;
                    border: none;
                    padding: 9px 20px;
                    border-radius: 0 7px 7px 0;
                    font-family: 'Outfit SemiBold';
                    font-size: 14px;
                }
                    .btn-group-orange:hover{
                        background-color: #c67a2a;
                    }

                .select2-container .select2-selection--single {
                    border: solid 1px #cbe5ec;
                    padding: 12px 8px;
                    height: 38px;
                    font-family: 'Outfit Regular';
                    font-size: 16px;
                    border-radius: 10px;
                }
                .select2-container--default .select2-selection--single .select2-selection__rendered {
                    color: #444;
                    line-height: 16px;
                }
                .select2-dropdown {
                    border: solid 1px #cbe5ec;
                    font-size: 14px;
                }
                .select2-container--default .select2-selection--single .select2-selection__arrow {
                    height: 36px;
                    top: 1px;
                    right: 5px;
                }
            
            .frame-nilai{
                position: relative;
                display: block;
                width: 100%;
                margin-top: 30px;
            }
                .box-nilai{
                    position: relative;
                    display: block;
                    width: 100%;
                    padding: 10px 0px;
                    border-bottom: solid 1px #cbe5ec;
                }
                    .judul-nilai{
                        position: relative;
                        display: block;
                        font-family: 'Outfit SemiBold';
                        font-size: 16px;
                        margin-bottom: 10px;
                        cursor: pointer;
                    }
                    .isi-nilai{
                        position: relative;
                        display: block;
                        font-family: 'Outfit Regular';
                        font-size: 14px;
                        background-color: #cceff5;
                        padding: 20px;
                        border-radius: 10px;
                        display: none;
                    }
            
            .frame-pernyataan{
                position: relative;
                display: block;
                width: 100%;
                padding-top: 30px;
            }
                .box-pernyataan{
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    flex-wrap: wrap;
                }
                    .item-pernyataan{
                        background-color: #fff;
                        padding: 10px;
                        border-radius: 5px;
                    }
                        .isi-pernyataan{
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            flex-wrap: nowrap;
                            padding-left: 5%;
                        }
                            .item-pernyataan{
                                padding: 10px;
                            }
            
        .box-login{
            position: relative;
            display: block;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
        }
            .box-login label{
                font-family: 'Outfit Regular';
                color: #023b57;
                font-weight: normal;
            }

        .box-register{
            position: relative;
            display: block;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
        }
            .box-register label{
                font-family: 'Outfit Regular';
                color: #023b57;
                font-weight: normal;
            }
        .box-thanks{
            position: relative;
            display: block;
            padding: 10% 5%;
            font-family: 'Outfit Regular';
            font-size: 16px;
            text-align: center;
        }
            .judul-thanks{
                font-family: 'Outfit Bold';
                margin-bottom: 20px;
                font-size: 20px;
            }
            .link-wa{
                margin-bottom: 10px;
            }
            .judul-beli{
                font-family: 'Outfit SemiBold';
                margin-bottom: 10px;
                font-size: 18px;
            }
            .link-toped{
                font-family: 'Outfit SemiBold';
            }
        
            .box-foto-profile {
                position: relative;
                display: block;
                width: 100%;
                max-width: 250px;
                height: 300px;
                background-color: #efefef;
                padding: 20px;
                border-radius: 10px;
                overflow: hidden;
            }
                #foto_profile {
                    position: absolute;
                    top: 0%;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                }
                .btn-change-foto {
                    position: absolute;
                    width: 52px;
                    bottom: 10px;
                    right: 10px;
                    cursor: pointer;
                }

                .btn-small-orange{
                    background-color: #df6926;
                    color: #fff;
                    border: none;
                    padding: 9px 20px;
                    border-radius: 7px;
                    font-family: 'Outfit SemiBold';
                    font-size: 16px;
                }
                    .btn-small-orange:hover{
                        background-color: #c67a2a;
                    }                    
    
    .footer{
        position: relative;
        display: block;
        width: 100%;
        background-color: #023b57;
        color: #fff;
        padding: 30px 0px;
    }
        .box-footer{
            position: relative;
            display: flex;
            flex-direction: column;
            width: 95%;
            left: 50%;
            transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
            .footer-alamat{
                position: relative;
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                font-family: 'Outfit Regular';
                font-size: 16px;
            }
                .logo-footer{
                    height: 38px;
                    margin-bottom: 20px;
                }
                .judul-kantor{
                    font-family: 'Outfit SemiBold';
                }
            .footer-sosmed{
                position: relative;
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                margin-top: 20px;
                margin-bottom: 30px;
            }
                .sosmed{
                    position: relative;
                    display: inline-block;
                    width: 42px;
                    font-size: 38px;
                    padding: 2px 0px;
                    margin: 0px 10px;
                    background-color: #fff;
                    color: #023b57;
                    border-radius: 7px;
                }
            .footer-copyright{
                position: relative;
                display: block;
                width: 100%;
                text-align: center;
                font-family: 'Outfit Regular';
                font-size: 14px;
            }
    
            .countdown{
                position: relative;
                display: block;
                width: 100%;
                text-align: center;
                font-family: 'Outfit Regular';
                font-size: 26px;
                margin-top: 50px;
            }

/*Tablet / iPad / Laptop Portraid*/
@media only screen
and (min-width: 601px) {
    .btn-orange{
        padding: 10px 15px;
        border-radius: 10px;
        font-size: 16px;
    }
            .input-group-btn .btn-orange{
                padding: 8px 15px;
            }
    .btn-no-bg{
        padding: 10px 15px;
        border-radius: 10px;
        font-size: 16px;
    }
    .btn-blue{
        padding: 10px 15px;
        border-radius: 10px;
        font-size: 16px;
    }
                .frame-button-slider{
                    top: 15vw;
                    width: 100%;
                }
                        .btn-slider{
                            padding: 10px 50px;
                            font-size: 12px;
                        }
                        .box-login-slider{
                            font-size: 16px;
                        }

                    .frame-count{
                        flex: 1 1 calc(25% - 10px);
                        box-sizing: border-box;
                        font-size: 16px;
                        padding: 15px 20px;
                    }
                        .count{
                            font-size: 38px;
                            line-height: 40px;
                        }
                    .box-flex-2{
                        flex-direction: row;
                        gap: 20px;
                        padding: 20px 0px;
                    }
                        .box-flex-2-left,
                        .box-flex-2-right{
                            flex: 1;
                        }
        /* Container untuk Flexbox */
        .box-flex-alumni {
            flex-wrap: nowrap;
        }

        .box-flex-artikel{
            padding: 0px;
            flex-wrap: nowrap
        }
        .box-artikel{
            height: 400px;
        }
            .box-cover-artikel{
                height: 200px;
                margin-bottom: 10px;
            }

            .isi-pernyataan{
                padding-left: 3%;
            }
                .sosmed{
                    width: 36px;
                    font-size: 32px;
                }
            

                .box-slider{
                    font-size: 28px;
                }
                    .btn-slider{
                        font-size: 24px;
                    }
                    .box-login-slider{
                        font-size: 16px;
                    }
                    .judul-registrasi{
                        font-size: 38px;
                    }

        .box-thanks{
            padding: 10%;
            font-size: 20px;
        }
            .judul-thanks{
                margin-bottom: 20px;
                font-size: 26px;
            }
            .link-wa{
                margin-bottom: 10px;
            }
            .judul-beli{
                margin-bottom: 10px;
                font-size: 22px;
            }
}


/*Tablet / iPad / Laptop Landscape*/
@media only screen
and (min-width: 1024px) {
    .header{
		height: 80px;
	}
		.frame-header{
			width: 90%;
		}
			.box-logo{
				position: absolute;
				top: 5px;
				left: 0px;
				transform: none;
				padding: 20px 0px;
			}
				.box-logo img{
					height: 32px;
				}
			.btn-menu{
				display: none;
			}
			.box-menu{
				position: absolute;
				display: block;
				width: 85%;
				text-align: right;
				top: 20px;
				right: 0px;
				padding-right: 0px;
				background: transparent;
				border-top: none;
			}
				.frame-menu{
					position: relative;
					display: inline-block;
					width: auto;
					text-align: right;
					border-top: none;
					vertical-align: middle;
					border-bottom: none;
				}
					.isi-menu{
						padding: 0px;
                        padding-left: 2px;
					}
						.menu{
							padding: 7px 15px;
							font-size: 14px;
							cursor: pointer;
							color: #fff;
							background: transparent;
							border-bottom: none;
						}
                        .menu-orange{
                            padding: 7px 15px;
							font-size: 14px;
							cursor: pointer;
							color: #fff;
							border-bottom: none;
                            background: #df6926;
                            border-radius: 10px;
                        }
						.menu-aktif,
						.menu:hover{
							background: #285870;
                            border-radius: 10px;
						}
    
    .body{
        padding-top: 80px;
    }
        .content{
            width: 90%;
        }
                .frame-button-slider{
                    top: 20vw;
                    width: 100%;
                }
                        .box-login-slider{
                            font-size: 20px;
                        }

            .box-content-2{
                flex-direction: row;
            }
                .box-content-2-left,
                .box-content-2-right{
                    flex: 1;
                }
                    .box-content-2-left{
                        padding-right: 20px;
                        align-items: center;
                    }

                    .judul-content{
                        font-family: 'Outfit Bold';
                        font-size: 32px;
                        line-height: 32px;
                        margin-bottom: 20px;
                    }

                    .box-slider{
                        font-size: 32px;
                    }
                        .btn-slider{
                            font-size: 32px;
                        }
                        .box-login-slider{
                            font-size: 20px;
                        }
                        .judul-registrasi{
                            font-size: 48px;
                        }

                    .box-alumni {
                        width: 80%; /* Lebar setiap kartu */
                        height: 350px; /* Tinggi setiap kartu */
                    }
                /* Sisi belakang */
                .info-alumni {
                    padding: 20px;
                    font-size: 16px;
                }

        .box-thanks{
            padding: 5% 10% !important;
            font-size: 20px;
        }
            .judul-thanks{
                margin-bottom: 20px;
                font-size: 30px;
            }
            .link-wa{
                margin-bottom: 10px;
            }
            .judul-beli{
                margin-bottom: 10px;
                font-size: 24px;
            }

    .footer{
        padding: 30px 0px;
    }
        .box-footer{
            width: 90%;
            flex-direction: row;
        }
            .footer-alamat{
                flex: 1;
                text-align: left;
                font-size: 16px;
                vertical-align: top;
            }
                .logo-footer{
                    height: 38px;
                    margin-bottom: 20px;
                }
            .footer-sosmed{
                flex: 1;
                text-align: right;
                margin-top: 0px;
                margin-bottom: 0px;
                vertical-align: top;
            }
                .sosmed{
                    text-align: center;
                    width: 36px;
                    font-size: 32px;
                    padding: 2px 0px;
                    margin: 0px 10px;
                }
                .last-sosmed{
                    margin-right: 0px;
                }
            .footer-copyright{
                margin-top: 30px;
                font-size: 14px;
            }
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
            .input-group-btn .btn-orange{
                padding: 7.5px 15px;
            }

                        .menu{
                            padding: 7px 15px;
                            font-size: 16px;
                        }
                        .menu-orange{
                            padding: 7px 15px;
                            font-size: 16px;
                            border-radius: 10px;
                        }

                        .btn-slider{
                            font-size: 36px;
                        }
                        .box-login-slider{
                            font-size: 22px;
                        }

                        .info-tagline{
                            font-size: 16px;
                        }
                        .tag-line{
                            font-size: 42px;
                            line-height: 48px;
                        }

                        .box-artikel{
                            height: 400px;
                        }
                            .box-cover-artikel{
                                height: 250px;
                            }

            .box-contact{
                padding: 30px;
                border-radius: 20px;
            }
            .box-login{
                padding: 30px;
                border-radius: 20px;
            }
            .box-register{
                padding: 30px;
                border-radius: 20px;
            }
            
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
        .frame-header{
            width: 85%;
        }

        .content{
            width: 85%;
        }
                    .box-daring{
                        padding: 15px;
                        margin-bottom: 10px;
                        border-radius: 10px;
                    }
                        .judul-daring{
                            font-size: 24px;
                            margin-bottom: 10px;
                        }

                        .btn-slider{
                            font-size: 42px;
                        }
                        .box-login-slider{
                            font-size: 26px;
                        }

                        .info-tagline{
                            font-size: 20px;
                        }
                        .tag-line{
                            font-size: 44px;
                            line-height: 52px;
                        }

                        .judul-artikel{
                            font-size: 18px;
                            margin-bottom: 10px;
                        }
                        .isi-artikel{
                            font-size: 16px;
                        }

        .box-footer{
            width: 85%;
        }
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
	.btn-orange,
    .btn-no-bg{
        font-size: 18px;
    }
            .input-group-btn .btn-orange{
                padding: 6px 15px;
            }

                        .btn-slider{
                            font-size: 42px;
                        }
                        .box-login-slider{
                            font-size: 26px;
                        }
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
        .frame-header{
            width: 80%;
        }
                        .info-tagline{
                            font-size: 22px;
                        }
                        .tag-line{
                            font-size: 48px;
                            line-height: 60px;
                        }
        .content{
            width: 80%;
        }
                    .box-daring{
                        padding: 20px;
                        margin-bottom: 20px;
                        border-radius: 10px;
                    }

                    .box-alumni {
                        height: 400px; /* Tinggi setiap kartu */
                    }
                /* Sisi belakang */
                .info-alumni {
                    padding: 25px;
                    font-size: 16px;
                }

                .box-artikel{
                    height: 450px;
                }
                    .box-cover-artikel{
                        height: 300px;
                    }
                    .judul-artikel{
                        font-size: 22px;
                        margin-bottom: 10px;
                    }
                    .isi-artikel{
                        font-size: 18px;
                    }
        
        .box-footer{
            width: 80%;
        }
}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
                        .info-tagline{
                            font-size: 24px;
                        }
                        .tag-line{
                            font-size: 52px;
                            line-height: 58px;
                        }
}