@import url(https://fonts.cdnfonts.com/css/campton);

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
    scroll-padding: 2rem;
    box-sizing: border-box;
    font-family: "Campton", sans-serif;
}
.position-staff li,
.list-comprehensive li,
.tab-proquest li,
.list-voice li,
.list-program li,
.tab-prospective li,
.tab-prospective-safety li,
.tab-test li,
.tab-criteria .item {
    cursor: pointer;
}

.pagination{
    overflow: auto;
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}
@media (min-width: 576px) {
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
}

.dropdown-box {
    position: relative;
    width: 100%;
}

.dropdown-select {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    appearance: none; /* Hides the default dropdown icon */
    background-color: #fff;
    background-image: url("../img/pages/all/chevron-down.svg"); /* Custom dropdown icon */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
}

/* Dropdown select on focus */
.dropdown-select:focus {
    outline: none;
    border-color: #007bff;
}

body.no-scroll {
    overflow: hidden;
}

img {
    padding: 0px;
    margin: 0px;
}

:root {
    --white: #fff;
    --dark-grey: #555555;
    --light-grey: #e4e4eb;
    --slate-grey: #8f90a6;
    --black: #000000;
    --main-blue: #292f78;
    --dark-blue: #191c48;
    --sky-blue: #b8d9f0;
    --soft-grey: #f2f2f5;
    --stormy-grey: #555770;
    --cool-grey: #c7c9d9;
    --red: #d32525;
    --medium-grey: hsl(0, 0%, 57%);
    --gunmetal-black: #1c1c28;
    --blue-ht: #0199c9;
    --blue-hd: #e6f6fb;
    --bg-form: #b1bed936;
    --border-input: #c3cad8bf;
    --steel-grey: #57647e;
    --ash-grey: #929292;
}

/* header */

.navbar {
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--light-grey);
    z-index: 1000;
}

.top-nav-announcement {
    background-color: #B41E44;
    color: var(--white);
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
    width: 100%;
    
    /* Default (Desktop and Large Screens >= 1200px) */
    font-size: 13px;
    padding: 10px 20px;
    white-space: nowrap;
}

/* Medium screens (Laptop: 992px - 1199px) */
@media screen and (max-width: 1200px) {
    .top-nav-announcement {
        font-size: 11.5px;
        padding: 9px 15px;
        white-space: nowrap;
    }
}

/* Portrait Tablet (768px - 991px) */
@media screen and (max-width: 992px) {
    .top-nav-announcement {
        font-size: 8px;
        padding: 8px 12px;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
}

/* Mobile Screens (< 768px) */
@media screen and (max-width: 767px) {
    .top-nav-announcement {
        font-size: clamp(8px, 2.3vw, 9px);
        letter-spacing: 0.01em;
        padding: 6px 10px;
        white-space: normal; /* Allow wrapping on mobile up to 2 lines */
    }
}


.navbar-content {
    width: 100%;
    padding: 16px 200px;
}

.hamburger-menu,
.navbar-mobile {
    display: none;
}

.navbar.scroll {
    background-color: var(--dark-grey);
}

.header {
    position: relative;
}

.navbar-first {
    position: absolute;
    right: 0;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
}

.navbar-second {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-first .line a,
.navbar-second .line a,
.navbar-second .line .tag,
.navbar-first .line.language .tag.bahasa .flag-line span {
    color: var(--white);
    font-size: 16px;
}

.navbar-second .line .tag,
.line.language .tag.bahasa .flag-line {
    display: flex;
    align-items: center;
}

.line.language .tag.bahasa .flag-line {
    gap: 8px;
}

.navbar-second .line .tag img {
    margin-left: 8px;
    width: 12px;
    cursor: pointer;
}

.navbar-first .language .tag.bahasa {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.navbar-first .non-degrees .tag.non-degree {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.navbar-first .language {
    position: relative;
}

.navbar-first .non-degrees {
    position: relative;
}

/* ul li ul.dropdown li */

.navbar-first .language .tag.bahasa span {
    color: var(--white);
}

.navbar-first .non-degrees .tag.non-degree span {
    color: var(--white);
}

.navbar-first .language .tag.bahasa .flag {
    width: 24px;
}

.navbar-first .language .tag.bahasa .arrow {
    width: 12px;
}

.navbar-first .non-degrees .tag.non-degree .arrow {
    width: 12px;
}

.navbar-first .language .list-header.bahasa img {
    width: 24px;
}

.navbar-second .logo-title img {
    height: 93px;
}

.navbar-list {
    display: flex;
    gap: 32px;
    margin-top: 32px;
}

/* navbar - dropdown */

.navbar-list .line {
    position: relative;
}

/* Active link styles */

.line.active a::before,
.line.active .flag-line::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--white);
    bottom: -16px;
    left: 0;
    border-radius: 10px;
    transform: scaleX(1);
}

.line a,
.line .flag-line {
    position: relative;
    cursor: pointer;
}

.line a::before,
.line .flag-line::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--white);
    bottom: -16px;
    left: 0;
    border-radius: 10px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.line a:hover::before,
.line .flag-line:hover::before {
    transform: scaleX(1);
}

.navbar-list .line .list-header.side,
.navbar-list .line .list-header.admission,
.navbar-list .line .list-header.sampoerna-difference {
    left: 0px;
}

.navbar-list .line .list-header.side,
.navbar-list .line .list-header {
    position: absolute;
    top: 60px;
    padding: 27px 30px;
    background-color: var(--light-grey);
}

.navbar-first .language .list-header.bahasa {
    position: absolute;
    top: 30px;
    z-index: 100;
    right: 0;
    padding: 20px 30px 30px;
    background-color: var(--light-grey);
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease-in-out;
}

.navbar-first .non-degrees .list-header.non-degree {
    position: absolute;
    top: 30px;
    z-index: 100;
    right: 0;
    padding: 20px 30px 30px;
    background-color: var(--light-grey);
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease-in-out;
}

.navbar-first .non-degrees .list-header.non-degree a {
    color: black;
}

.navbar-first .language:hover .list-header.bahasa {
    opacity: 1;
    visibility: visible;
    transition: all 200ms ease-in-out;
}

.navbar-first .non-degrees:hover .list-header.non-degree {
    opacity: 1;
    visibility: visible;
    transition: all 200ms ease-in-out;
    width: max-content;
}

.navbar-first .language .list-header.bahasa li .flag-line {
    display: flex;
    gap: 8px;
    align-items: center;
}

.navbar-list .line .list-header.campus,
.navbar-list .line .list-header.about {
    right: 0px;
}

/* Sembunyikan dropdown saat tidak aktif */
.navbar-list .line .list-header {
    /* display: none; */
    display: flex;
    visibility: hidden;
    opacity: 0;
}

/* Tampilkan dropdown saat aktif */
.navbar-list .line:hover .list-header {
    display: flex;
    visibility: visible;
    opacity: 1;
    transition: all 200ms ease-in-out;
}

.navbar-list .line .list-header.side {
    flex-direction: row;
    gap: 40px;
    transition: all 200ms ease-in-out;
}

.navbar-list .line .list-header.flank {
    transition: all 200ms ease-in-out;
}

.navbar-list .line .list-header {
    flex-direction: column;
}

.list-header.side .list-academics h6,
.list-header.side .list-faculties h6,
.list-header.side .list-research h6 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.list-header.side .list-academics li a,
.list-header.side .list-faculties li a,
.list-header.side .list-research li a,
.navbar-list .line .list-header li a,
.line.language .list-header li .flag-line span {
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.list-header.admission {
    width: 240px;
}

.list-header.sampoerna-difference {
    width: 240px;
}

.list-header.about {
    width: 320px;
}

.list-header.campus {
    width: 360px;
}

.list-header li {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--black);
}

.list-header.side .list-academics li {
    padding: 12px 0;
    width: 150px;
    border-bottom: 1px solid var(--black);
}

.list-header.side .list-faculties li {
    padding: 12px 0;
    width: 150px;
    border-bottom: 1px solid var(--black);
}
.list-header.side .list-research li {
    padding: 12px 0;
    width: 170px;
    border-bottom: 1px solid var(--black);
}

.list-header.side .list-academics li:last-child,
.list-header.side .list-faculties li:last-child,
.list-header.side .list-research li:last-child {
    padding: 12px 0 0;
    border-bottom: 0px solid var(--black);
}

.list-header li:last-child {
    padding: 12px 0 0;
    border-bottom: 0px solid var(--black);
}

.list-header li:first-child {
    padding: 0 0 12px;
}

.list-header li {
    padding: 12px 0;
}

/* floating */

.sticky {
    position: fixed;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center; /* Meratakan button secara horizontal ke tengah */
    gap: 8px; /* Jarak antar button — button TERPISAH */
    bottom: 60px;
    right: 60px;
    transition: transform 0.4s ease;
}

.sticky.hide {
    transform: translateX(150%); /* Sembunyikan ke samping kanan */
}

.sticky:hover {
    transform: translateX(0);
}

/* Base style semua button */
.sticky .overlay a {
    background-color: var(--main-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.sticky .overlay a img {
    max-width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Button 1 (Admission) — Biru gelap, ukuran normal, rounded atas saja */
.sticky .overlay:nth-child(1) a {
    background-color: var(--main-blue);
    width: 96px;
    padding: 14px 12px;
    border-radius: 20px 20px 0 0;
}

/* Button 2 (Schedule a Visit) — Merah, LEBIH BESAR, rounded semua sisi */
.sticky .overlay:nth-child(2) a {
    background-color: #BE1E2D;
    width: 112px;  /* Lebih lebar agar menonjol di kiri & kanan (center aligned) */
    padding: 22px 12px; /* Lebih tinggi */
    border-radius: 20px;
}

/* Button 3 (Contact Whatsapp) — Biru gelap, ukuran normal, rounded bawah saja */
.sticky .overlay:nth-child(3) a {
    background-color: var(--main-blue);
    width: 96px;
    padding: 14px 12px;
    border-radius: 0 0 20px 20px;
}

.sticky .overlay .text-sticky {
    color: var(--white);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* footer */
.base {
    background-color: var(--main-blue);
    padding: 60px 160px 48px;
}

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

.base .part-1 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.logo-footer img {
    height: 80px;
}

.address-footer {
    color: var(--white);
    line-height: 1.5;
    font-size: 21px;
    font-weight: 400;
}

.social-footer {
    display: flex;
    align-items: center;
    gap: 24px;
}

.base .part-2 {
    display: flex;
    gap: 120px;
}

.base .part-2 .menu,
.base .part-2 .resource {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.base .part-2 .menu .title-footer,
.base .part-2 .resource .title-footer {
    font-weight: 600;
    color: var(--white);
    font-size: 32px;
}

.base .part-2 .menu ul,
.base .part-2 .resource ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.base .part-2 .menu ul li a,
.base .part-2 .resource ul li a {
    color: var(--white);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
}

.text-credit {
    border-top: 1px solid var(--white);
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    color: var(--white);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* home */

/* home - home-bg */

.home-bg {
    position: relative;
    min-width: 100%;
    max-height: 100vh;
    overflow: hidden;
}

.home-bg video {
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
}

.home-bg img.video-home {
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
}

.home-bg .home-hero-cta,
.pathway-bg .pw-hero-cta {
    position: absolute;
    right: 19%;
    bottom: 6%;
    flex-direction: column;
    gap: 12px;
    z-index: 3;
}

.home-bg .home-hero-cta {
    display: flex;
}

.pathway-bg .pw-hero-cta {
    display: none;
    right: 24%;
    bottom: 8%;
}

.pathway-bg .pw-hero-cta.is-active {
    display: flex;
}

.home-bg .home-hero-cta .hero-cta-btn,
.pathway-bg .pw-hero-cta .hero-cta-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: var(--dark-blue);
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    min-width: 260px;
    max-width: 320px;
    transition: opacity 0.2s ease;
}

.home-bg .home-hero-cta .hero-cta-btn:hover,
.pathway-bg .pw-hero-cta .hero-cta-btn:hover {
    opacity: 0.85;
}

.home-bg .home-hero-cta .hero-cta-btn svg,
.pathway-bg .pw-hero-cta .hero-cta-btn svg {
    flex-shrink: 0;
}

.home-bg .home-hero-cta .hero-cta-btn span,
.pathway-bg .pw-hero-cta .hero-cta-btn span {
    text-align: center;
    flex: 1;
}

@media (max-width: 768px) {
    .home-bg .home-hero-cta,
    .pathway-bg .pw-hero-cta {
        left: 50%;
        right: auto;
        bottom: 4%;
        transform: translateX(-50%);
        align-items: center;
    }

    .home-bg .home-hero-cta .hero-cta-btn,
    .pathway-bg .pw-hero-cta .hero-cta-btn {
        min-width: 200px;
        max-width: 240px;
        font-size: 12px;
        padding: 10px 14px;
    }
}

.home-bg .box-video::before {
    /* background-color: #00000030; */
    content: "";
    width: 100%;
    height: 100vh;
    position: absolute;
}

.home-bg .content-bg .play-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-bg .content-bg img.bg {
    width: 100%;
    max-height: 100vh;
    object-fit: cover;
}

.home-bg .text-bg {
    position: absolute;
    bottom: 80px;
    left: 60px;
    color: var(--white);
    display: flex;
    /* gap: 24px; */
}

.home-bg .text-bg h3 {
    max-width: 518px;
    min-width: 200px;
    font-size: 36px;
    border-right: 1px solid var(--white);
    padding-right: 32px;
}

.home-bg .text-bg p {
    max-width: 518px;
    min-width: 200px;
    font-size: 21px;
    padding-left: 32px;
}

/* home - home-companies */

.home-companies {
    display: flex;
    justify-content: center;
    padding: 0 32px;
}

.home-companies .box-companies {
    max-width: 1377px;
    width: 100%;
    margin: 64px 0 0;
    padding: 48px 64px;
    background-color: var(--light-grey);
    border-radius: 24px;
    text-align: center;
}

.home-companies .box-companies .title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 16px;
}

.home-companies .box-companies .desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--stormy-grey);
    margin-bottom: 32px;
}

.home-companies .company-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 48px;
    margin-bottom: 24px;
}

.home-companies .company-logos li {
    display: flex;
    align-items: center;
}

.home-companies .company-logos li img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.home-companies .box-companies .more {
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    color: var(--main-blue);
}

@media screen and (max-width: 1060px) {
    .home-companies {
        padding: 0 24px;
    }

    .home-companies .box-companies {
        margin-top: 40px;
        padding: 32px 24px;
        border-radius: 16px;
    }

    .home-companies .box-companies .title {
        font-size: 20px;
    }

    .home-companies .box-companies .desc {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .home-companies .company-logos {
        gap: 28px;
        margin-bottom: 16px;
    }

    .home-companies .company-logos li img {
        height: 26px;
    }

    .home-companies .box-companies .more {
        font-size: 14px;
    }
}

/* home - home-desc */

.home-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-desc .box-desc {
    max-width: 1377px;
    min-width: 300px;
    margin: 200px 0;
    text-align: center;
}

.home-desc .box-desc .title {
    text-align: center;
    font-size: 50px;
    font-weight: 600;
}

.home-desc .box-desc .desc {
    margin: 32px 0 18px;
    font-size: 22px;
    line-height: 30px;
}

.home-desc .box-desc .desc .bold {
    font-weight: 700;
}

.home-desc .box-desc .more-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* border-bottom: 1px solid var(--dark-blue); */
}

.home-desc .box-desc .more-info .text-link {
    color: var(--dark-blue);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* home - home-degree */

.home-degree {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 32px;
}

.home-degree .box-degree {
    max-width: 1377px;
    min-width: 300px;
    width: 100%;
    text-align: center;
}

.home-degree .box-degree .degree-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 48px;
}

.home-degree .degree-options {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    justify-content: center;
}

.home-degree .degree-option {
    flex: 1;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.home-degree .degree-card {
    background-color: var(--main-blue);
    border-radius: 10px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 12px;
    text-decoration: none;
}

.home-degree .degree-card .degree-name {
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.home-degree .degree-card .degree-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.home-degree .degree-card .degree-logo.degree-logo-lg {
    height: 60px;
    margin: -8px 0;
}

.home-degree .degree-option .degree-desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--stormy-grey);
    text-align: center;
    max-width: 540px;
}

/* home - home-diverse */

.home-diverse {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 32px;
}

.home-diverse .box-diverse {
    max-width: 1520px;
    min-width: 200px;
    width: 100%;
}

.home-diverse .box-diverse ul {
    display: flex;
    overflow: hidden;
}

.home-diverse .box-diverse h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
}

.home-diverse .box-diverse ul li {
    flex: 1;
    max-width: 1600px;
    width: 100%;
    min-width: 200px;
    position: relative;
}

.home-diverse .box-diverse ul li img {
    width: 100%;
    height: 570px;
    object-fit: cover;
}

.home-diverse .box-diverse ul li .box-text {
    position: absolute;
    bottom: 0;
    padding: 34px 28px;
}

.home-diverse .box-diverse ul li .box-text .major {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 10px;
}

.home-diverse .box-diverse ul li:before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 130px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.home-diverse .box-diverse ul li .box-text .more-info {
    color: var(--white);
    font-size: 24px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.home-diverse .box-diverse ul li .box-text .more-info svg path {
    stroke: var(--white);
}

/* home - home-collaboration */

.home-collaboration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 200px 32px;
}

.home-collaboration .box-collaboration {
    max-width: 1520px;
    width: 100%;
    min-width: 100px;
}

.home-collaboration .box-collaboration .box-img {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.home-collaboration .box-collaboration .box-img li {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
}

.home-collaboration .box-collaboration .box-img li .layer-img {
    width: 100%;
    height: 780px;
    object-fit: cover;
    object-position: center;
}

.home-collaboration .box-collaboration .box-img li .box-info {
    position: absolute;
    top: 0;
    right: 0;
}

.box-collaboration .box-img li .box-info::before {
    content: "";
    width: 1000px;
    height: 100%;
    /* background: linear-gradient(
    to right,
    rgb(101, 95, 95),
    rgba(101, 95, 95, 0.3)
  ); */
    position: absolute;
}

.box-collaboration .box-img li .box-info {
    position: absolute;
    padding: 46px;
}

.box-collaboration .box-img li .box-info .box-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 36px;
}

.box-collaboration .box-img li .box-info .box-logo img:first-child {
    width: 168px;
}

.box-collaboration .box-img li .box-info .box-logo img:last-child {
    width: 158px;
}

.box-collaboration h3 {
    font-size: 30px;
    font-weight: 700;
    color: var(--main-blue);
    line-height: 1.5;
    text-align: center;
}

.box-collaboration .decs {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    padding: 10px 0 48px;
}

.box-collaboration .box-directed .body-directed,
.box-collaboration .box-directed .header-directed {
    width: 100%;
    padding: 8px 55px;
    border: 1px solid var(--main-blue);
    text-align: center;
}

.box-collaboration .box-directed .header-directed {
    border-radius: 18px 18px 0 0;
    background-color: var(--main-blue);
}

.box-collaboration .box-directed .body-directed {
    border-radius: 0 0 18px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.box-collaboration .box-directed .header-directed p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--white);
}

.box-collaboration .box-directed .body-directed .area {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
}

.box-collaboration .box-directed .body-directed .area:nth-child(1) {
    font-weight: 700;
}

.box-collaboration .box-directed .body-directed .area:nth-child(2) {
    max-width: 600px;
    width: 100%;
    min-width: 100px;
    padding: 5px 0 16px;
}

.box-collaboration
    .box-directed
    .body-directed
    .info-contact-sampoerna
    .link-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.box-collaboration .box-directed .body-directed .info-contact-sampoerna {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    max-width: 800px;
    width: 100%;
    min-width: 100px;
}

/* home - home-content */
.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin: 200px 0; */
}

.home-content .box-content {
    max-width: 1520px;
    width: 100%;
}

.home-content .box-content .title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
}

.home-content .box-content .list-content {
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

.home-content .box-content .list-content .ig-link a img {
    width: 320px;
    height: 320px;
}

/* home - home - experience */

.home-experience {
    padding: 200px 0;
}

.home-experience .box-experience .cont-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-experience .box-experience .cont-title .box-title {
    min-width: 1520px;
}

.home-experience .box-experience .cont-title .box-title h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.home-experience .box-experience .cont-title .box-title .desc {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 75px;
}

.home-experience .box-experience .box-place {
    position: relative;
}

.home-experience .box-experience .box-place .img-place {
    width: 100%;
    height: 576px;
    object-fit: cover;
}

.home-experience .box-experience .box-place .svg-360 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* home - home - graduates */

.home-graduates .box-graduates .cont-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-graduates.about {
    padding: 200px 0;
}

.home-graduates .box-graduates .cont-title .box-title {
    min-width: 1520px;
}

.home-graduates .box-graduates .cont-title .box-title h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.home-graduates .box-graduates .cont-title .box-title .desc {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 75px;
}

.home-graduates .box-graduates .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.home-graduates .box-graduates .slider .box-jobs {
    display: flex;
    gap: 32px; /* Adjust gap between images if needed */
    animation: scroll 60s linear infinite;
    width: max-content;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.home-graduates .box-graduates .slider .box-jobs img {
    object-fit: contain;
}

/* home - home-schedule */

.home-schedule {
    padding: 200px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-schedule .box-schedule {
    max-width: 1520px;
    width: 100%;
}

.home-schedule .box-schedule .title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.home-schedule .box-schedule .cont-events {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create two equal-width columns */
    gap: 10px; /* Optional: spacing between items */
    width: 100%;
    justify-content: space-between;
    column-gap: 32px;
}

.home-schedule .box-schedule .cont-events .box-event {
    display: flex;
    align-items: stretch;
}

.home-schedule .box-schedule .cont-events .box-event .event-date,
.home-schedule .box-schedule .cont-events .box-event .event-text {
    display: flex;
    align-items: center; /* Centers text vertically */
    padding: 12px 24px;
    border-radius: 5px;
}

.home-schedule .box-schedule .cont-events .box-event .event-date {
    width: 172px;
    background-color: var(--main-blue);
    font-size: 25px;
    font-weight: 700;
    color: var(--white);
}

.home-schedule .box-schedule .cont-events .box-event .event-text {
    flex: 1;
    max-width: 500px;
    background-color: var(--light-grey);
    font-size: 25px;
    font-weight: 500;
    color: var(--main-blue);
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(5) {
    grid-column: 1;
    grid-row: 5;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(6) {
    grid-column: 2;
    grid-row: 1;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(7) {
    grid-column: 2;
    grid-row: 2;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
}

.home-schedule .box-schedule .cont-events .box-event:nth-child(10) {
    grid-column: 2;
    grid-row: 5;
}

/* home-updates */

.home-updates {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 75px;
}

.home-updates .box-updates {
    width: 100%;
    max-width: 1520px;
}

.home-updates .box-updates .box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.home-updates .box-updates .box-title h4 {
    font-size: 32px;
    font-weight: 700;
}

.home-updates .box-updates .box-title .more-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-updates .box-updates .box-title .more-info .text-link {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--dark-blue);
    font-weight: 800;
}

.home-updates .box-updates .box-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    justify-content: space-between;
}

.home-updates .box-updates .box-news .item-news {
    width: 440px;
    height: 622px;
    /* overflow: hidden; */
}

.home-updates .box-news .item-news img {
    width: 100%;
    height: 334px;
    object-fit: cover;
}

.home-updates .box-news .item-news .content-news {
    margin-top: 36px;
}

.home-updates .box-news .item-news .content-news .date {
    font-size: 18px;
    font-weight: 400;
    color: var(--slate-grey);
}

.home-updates .box-news .item-news .content-news .title {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    margin: 4px 0;
    color: var(--black);
}

.home-updates .box-news .item-news .content-news .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
}

/* home-shape */

.home-shape {
    position: relative;
    background-color: var(--sky-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 350px;
}

.home-shape .box-shape {
    max-width: 1520px;
    width: 100%;
    padding: 64px 0 32px;
    /* margin-top: 400px; */
}

.home-shape .box-shape img {
    position: absolute;
    top: -7%;
    left: 45%;
    transform: translate(-0%, -50%);
}

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

.home-shape .box-shape .apply .decs h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.home-shape .box-shape .apply .decs p {
    width: 660px;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
}

.home-shape .box-shape .apply .btn-apply {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 15px;
    color: var(--white);
    padding: 24px 48px;
    background-color: var(--dark-blue);
}

.home-shape .box-shape .apply .btn-apply p {
    font-size: 22px;
    font-weight: 700;
}

.home-shape .box-shape .apply .btn-apply svg path {
    stroke: var(--white);
}

/* news - career - faq - difference*/
.news-bg,
.career-bg,
.faq-bg,
.difference-bg,
.contact-bg,
.academic-bg,
.pathway-bg,
.cetl-bg,
.curriculum-bg,
.qair-bg,
.about-bg,
.accreditation-bg,
.governance-bg,
.as-bg,
.admission-bg,
.faculties-bg,
.fas-bg,
.fet-bg,
.fob-bg,
.foe-bg,
.student-government-bg,
.campus-life-bg,
.student-affairs-bg,
.spac-bg,
.safety-environment-bg,
.it-departement-bg,
.academic-registry-bg,
.library-bg,
.facilities-bg,
.student-rights-bg {
    min-width: 100%;
    max-height: 100vh;
    position: relative;
}

.news-bg img,
.career-bg img,
.faq-bg img,
.difference-bg img,
.contact-bg img,
.academic-bg img,
.pathway-bg img,
.cetl-bg img,
.curriculum-bg img,
.qair-bg img,
.about-bg img,
.accreditation-bg img,
.governance-bg img,
.as-bg img,
.admission-bg img,
.faculties-bg img,
.fas-bg img,
.fet-bg img,
.fob-bg img,
.foe-bg img,
.student-government-bg img,
.campus-life-bg img,
.student-affairs-bg img,
.spac-bg img,
.safety-environment-bg img,
.it-departement-bg img,
.academic-registry-bg img,
.library-bg img,
.facilities-bg img,
.student-rights-bg img {
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
}

.news-bg .box-img::before,
.career-bg .box-img::before,
.faq-bg .box-img::before,
.difference-bg .box-img::before,
.contact-bg .box-img::before,
.academic-bg .box-img::before,
.pathway-bg .box-img::before,
.cetl-bg .box-img::before,
.curriculum-bg .box-img::before,
.qair-bg .box-img::before,
.about-bg .box-img::before,
.accreditation-bg .box-img::before,
.governance-bg .box-img::before,
.as-bg .box-img::before,
.admission-bg .box-img::before,
.faculties-bg .box-img::before,
.fas-bg .box-img::before,
.fet-bg .box-img::before,
.fob-bg .box-img::before,
.foe-bg .box-img::before,
.student-government-bg .box-img::before,
.campus-life-bg .box-img::before,
.student-affairs-bg .box-img::before,
.spac-bg .box-img::before,
.safety-environment-bg .box-img::before,
.it-departement-bg .box-img::before,
.academic-registry-bg .box-img::before,
.library-bg .box-img::before,
.facilities-bg .box-img::before,
.student-rights-bg .box-img::before {
    background-color: rgba(0, 0, 0, 0.100);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
}

.news-bg .box-title,
.career-bg .box-title,
.faq-bg .box-title,
.difference-bg .box-title,
.contact-bg .box-title,
.academic-bg .box-title,
.pathway-bg .box-title,
.cetl-bg .box-title,
.curriculum-bg .box-title,
.qair-bg .box-title,
.about-bg .box-title,
.accreditation-bg .box-title,
.governance-bg .box-title,
.as-bg .box-title,
.admission-bg .box-title,
.faculties-bg .box-title,
.fas-bg .box-title,
.fet-bg .box-title,
.fob-bg .box-title,
.foe-bg .box-title,
.student-government-bg .box-title,
.campus-life-bg .box-title,
.student-affairs-bg .box-title,
.spac-bg .box-title,
.safety-environment-bg .box-title,
.it-departement-bg .box-title,
.academic-registry-bg .box-title,
.library-bg .box-title,
.facilities-bg .box-title,
.student-rights-bg .box-title {
    position: absolute;
    bottom: 100px;
    left: 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-bg .box-title .title,
.career-bg .box-title .title,
.faq-bg .box-title .title,
.difference-bg .box-title .title,
.contact-bg .box-title .title,
.academic-bg .box-title .title,
.pathway-bg .box-title .title,
.cetl-bg .box-title .title,
.curriculum-bg .box-title .title,
.qair-bg .box-title .title,
.about-bg .box-title .title,
.accreditation-bg .box-title .title,
.governance-bg .box-title .title,
.as-bg .box-title .title,
.admission-bg .box-title .title,
.faculties-bg .box-title .title,
.fas-bg .box-title .title,
.fet-bg .box-title .title,
.fob-bg .box-title .title,
.foe-bg .box-title .title,
.campus-life-bg .box-title .title,
.student-government-bg .box-title .title,
.campus-life-bg .box-title .title,
.student-affairs-bg .box-title .title,
.spac-bg .box-title .title,
.safety-environment-bg .box-title .title,
.it-departement-bg .box-title .title,
.academic-registry-bg .box-title .title,
.library-bg .box-title .title,
.facilities-bg .box-title .title,
.student-rights-bg .box-title .title {
    color: var(--white);
    font-size: 36px;
    font-weight: 600;
}

.career-bg .box-title .decs,
.difference-bg .box-title .decs,
.contact-bg .box-title .decs,
.cetl-bg .box-title .decs,
.curriculum-bg .box-title .decs,
.qair-bg .box-title .decs,
.accreditation-bg .box-title .decs,
.governance-bg .box-title .decs,
.as-bg .box-title .decs,
.fas-bg .box-title .decs,
.fet-bg .box-title .decs,
.fob-bg .box-title .decs,
.foe-bg .box-title .decs,
.campus-life-bg .box-title .decs,
.student-government-bg .box-title .decs,
.student-affairs-bg .box-title .decs,
.spac-bg .box-title .decs,
.safety-environment-bg .box-title .decs,
.it-departement-bg .box-title .decs,
.academic-registry-bg .box-title .decs,
.library-bg .box-title .decs,
.facilities-bg .box-title .decs,
.student-rights-bg .box-title .decs {
    color: var(--white);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;
    width: 620px;
}

.news-highlight,
.career-text,
.faq-question,
.difference-content,
.contact-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-highlight .box-highlight,
.career-text .box-text,
.faq-question .box-question,
.difference-content .box-content {
    max-width: 1520px;
    width: 100%;
    margin: 200px 0;
}

.blue-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sky-blue);
    padding: 90px 0;
}

.blue-apply .box-apply {
    max-width: 1520px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blue-apply .box-apply .text-apply {
    font-size: 32px;
    font-weight: 700;
}

.blue-apply .box-apply .btn-apply,
.box-shape .content-shape .btn-apply {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 36px;
    border-radius: 12px;
    background-color: var(--main-blue);
}

.blue-apply .box-apply .btn-apply p,
.box-shape .content-shape .btn-apply p {
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
}

.blue-apply .box-apply .btn-apply svg path,
.box-shape .content-shape .btn-apply svg path {
    stroke: var(--white);
}

.shape-footer {
    background-color: var(--sky-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-footer .box-shape {
    max-width: 1520px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 267px;
}

.shape-footer .box-shape img {
    position: absolute;
    bottom: 0;
    left: 0;
    /* width: 496px; */
    height: 430px;
}

.shape-footer .box-shape .content-shape {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 62px;
}

.shape-footer .box-shape .content-shape .text-shape {
    width: 700px;
}

.content-shape .text-shape .title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.content-shape .text-shape .decs {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    width: 600px;
}

.more-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.more-info .text-link {
    color: var(--dark-blue);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.shape-schedule {
    background-color: var(--sky-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.shape-schedule.foe-schedule {
    margin-top: 200px;
}

.shape-schedule .box-schedule {
    max-width: 1520px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shape-schedule .box-schedule .shape-text .title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.shape-schedule .box-schedule .shape-text .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.shape-schedule .box-schedule .shape-btn {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.shape-schedule .box-schedule .shape-btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 487px;
    padding: 21px;
    border: none;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 700;
}

.as-overview button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 487px;
    padding: 21px;
    border: none;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 700;
}

.shape-schedule .box-schedule .shape-btn button.schedule {
    background-color: var(--dark-blue);
    color: var(--white);
}

.as-overview button.schedule {
    background-color: var(--dark-blue);
    color: var(--white);
}

.box-title button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 28px;
    min-height: 52px;

    border: none;
    border-radius: 14px;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;

    cursor: pointer;
    transition: all 0.25s ease;
}

.box-title button.schedule {
    background-color: var(--dark-blue);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(41, 47, 120, 0.25);
}

.box-title button.schedule:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(41, 47, 120, 0.35);
}

.box-title button.schedule:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(41, 47, 120, 0.25);
}

.box-title button.schedule svg {
    width: 20px;
    height: 20px;
}

.box-title button.schedule svg path {
    stroke: var(--white);
    stroke-width: 2.2;
}

.shape-schedule .box-schedule .shape-btn button.schedule svg path {
    stroke: var(--white);
}

.as-overview button.schedule svg path {
    stroke: var(--white);
}

.shape-schedule .box-schedule .shape-btn button.apply {
    background-color: var(--sky-blue);
    color: var(--black);
    border: 1px solid var(--dark-blue);
}

.shape-schedule .box-schedule .shape-btn button.apply svg path {
    stroke: var(--black);
}

/* news */

.news-highlight .box-highlight .main-news {
    position: relative;
    margin-bottom: 50px;
}

.news-highlight .box-highlight .main-news img {
    width: 100%;
    height: 676px;
    object-fit: cover;
}

.news-highlight .box-highlight .main-news .box-news {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 140px 35px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0, 0.1),
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.9)
    );
}

.news-highlight .box-highlight .main-news .box-news .title {
    font-size: 24px;
    font-weight: 700;
    max-width: 630px;
    width: 100%;
    min-width: 300px;
}

.news-highlight .box-highlight .main-news .box-news .desc {
    font-size: 16px;
    font-weight: 400;
    max-width: 800px;
    width: 100%;
    min-width: 300px;
    margin: 8px 0;
    line-height: 1.5;
    color: var(--dark-blue);
}

.news-highlight .box-highlight .main-news .box-news .more-news {
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-highlight .box-highlight .main-news .box-news .more-news .text-more {
    font-size: 21px;
    font-weight: 700;
    color: var(--main-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.news-highlight .box-highlight .grid-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, auto));
    gap: 30px;
    justify-content: left;
}

.news-highlight .box-highlight .grid-news .box-news {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.news-highlight .box-highlight .grid-news .box-news img {
    max-width: 600px;
    width: 100%;
    min-width: 200px;
    height: 340px;
    object-fit: cover;
    margin-bottom: 36px;
}

.news-highlight .box-highlight .grid-news .box-news .box-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.news-highlight .box-highlight .grid-news .box-news .box-content .date {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--slate-grey);
}

.news-highlight .box-highlight .grid-news .box-news .box-content .title {
    font-size: 26px;
    font-weight: 700;
    margin: 6px 0;
}

.news-highlight .box-highlight .grid-news .box-news .box-content .desc {
    font-size: 22px;
    font-weight: 400;
    /*  */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    line-height: 1.5;
}

/* career */
.career-text .box-text .title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 28px;
}

.career-text .box-text .box-desc {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.career-text .box-text .box-desc .desc {
    font-size: 22px;
    font-weight: 400;
}

/* FAQs */
.faq-question .box-question .main-question {
    margin-bottom: 75px;
}

.faq-question .box-question .main-question .title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 24px;
}

.faq-question .box-question .main-question .desc {
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
}

.faq-question .box-question .content-question {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-question .box-question .content-question .item-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    background-color: var(--soft-grey);
    padding: 16px 42px;
    border-radius: 16px;
}

.item-question .question-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-question {
    cursor: pointer;
}

.item-question .question-text .title {
    font-size: 26px;
    font-weight: 700;
}

.item-question .question-text .desc,
.item-question .question-text .box-desc .point {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
}

.item-question .question-text .box-desc,
.item-question .question-text .desc-content {
    display: flex;
    flex-direction: column;
}

.item-question .question-text .desc-content {
    gap: 16px;
}

.item-question .question-text .box-desc .decs-question .point {
    margin-left: 16px;
    list-style-type: "- ";
    padding-left: 10px;
}

.item-question .question-text .content-decs {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease-in-out;
}

.item-question .question-text .content-decs.active {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease-in-out;
}

.item-question .question-img.active {
    transform: rotate(45deg);
}

/* sampoerna-difference */

.difference-credit {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 200px;
}

.difference-credit img {
    height: 460px;
    object-fit: cover;
}

.difference-credit .credit-text .title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 36px;
}

.difference-credit .credit-text .text {
    font-size: 22px;
    font-weight: 400;
}

.difference-credit .credit-text .box-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.difference-why h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

.difference-why .difference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(506px, auto));
    margin-bottom: 75px;
}

.difference-why .difference-grid .difference-path {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    background-color: var(--main-blue);
}

.difference-why .difference-grid .difference-path .difference-part .part-text {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.difference-grid .difference-path .difference-part .part-text .title {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
}

.difference-path .difference-part .part-text .decs {
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
}

.difference-path .difference-part .part-text .title,
.difference-path .difference-part .part-text .decs {
    width: 391px;
}

/* early */

.difference-path.early .difference-part img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: top;
}

.difference-path.early .difference-part .part-text {
    height: 248px;
}

/* middle */

.difference-why .difference-grid .difference-path.middle .difference-part {
    display: flex;
    flex-direction: column-reverse;
}

.difference-path.middle .difference-part img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
}

.difference-path.middle .difference-part .part-text {
    height: 203px;
}

/* late */
.difference-path.late {
    flex-direction: column;
}

.difference-path.late .difference-part img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top;
}

.difference-path.late .difference-part .part-text {
    height: 216px;
}

.difference-path.late .difference-part.logo-card img {
    background-color: var(--white);
    object-fit: contain;
    padding: 40px;
}

/* contact */

.contact-feedback .box-feedback {
    padding: 200px 0;
    max-width: 1018px;
    width: 100%;
}

.contact-feedback .box-feedback .contact-text .title,
.contact-feedback .box-feedback .contact-text .decs {
    text-align: center;
    line-height: 1.5;
}

.contact-feedback .box-feedback .contact-text .title {
    font-size: 50px;
    font-weight: 700;
}

.contact-feedback .box-feedback .contact-text .decs {
    font-size: 22px;
    font-weight: 400;
    margin: 52px 0;
    color: var(--stormy-grey);
}

.contact-feedback .box-feedback .contact-form {
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    box-shadow: 0px 10.67px 21.33px 0px #60617029;
    padding: 42px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.contact-form .text-item,
.contact-form .dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.contact-form .text-item .contact-labels,
.contact-form .dropdown-item .contact-labels {
    display: flex;
    gap: 6px;
}

.contact-form .text-item .contact-labels .decs,
.contact-form .dropdown-item .contact-labels .decs {
    font-size: 22px;
    font-weight: 700;
}

.contact-form .text-item .contact-labels .red,
.contact-form .dropdown-item .contact-labels .red {
    font-size: 22px;
    font-weight: 700;
    color: var(--red);
}

.contact-form .text-item .label-input {
    border: 1px solid var(--cool-grey);
    border-radius: 8px;
    padding: 14px 18px;
    outline: none;
    font-size: 16px;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}

.contact-form .text-item .label-input::-webkit-inner-spin-button,
.contact-form .text-item .label-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contact-form .twosided-item {
    display: flex;
    gap: 40px;
    width: 100%;
}

.contact-form .dropdown-item .dropdown-box {
    position: relative;
}

.contact-form .dropdown-item .dropdown-box .dropdown-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--cool-grey);
    border-radius: 8px;
    padding: 14px 18px;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--cool-grey);
}

.contact-form .dropdown-item .dropdown-box .dropdown-content {
    position: absolute;
    bottom: -90px;
    z-index: 100;
    background-color: var(--white);
    border: 1px solid var(--cool-grey);
    background-color: var(--white);
    width: 100%;
    border-radius: 8px;
    padding: 12px 18px 24px;
    visibility: hidden;
    opacity: 0;
}

.contact-form .dropdown-item .dropdown-box .dropdown-content.active {
    visibility: visible;
    opacity: 1;
}

.contact-form .dropdown-item .dropdown-box .dropdown-content li {
    border-bottom: 1px solid var(--dark-grey);
    padding: 8px 0;
}

.contact-form .box-button {
    margin: 42px;
    width: 100%;
    padding: 0 42px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.contact-form .box-button .button-submit {
    width: 300px;
    background-color: var(--main-blue);
    border: none;
    border-radius: 10px;
    padding: 16px;
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
}

/* academic */

.academic-list {
    margin: 200px 0;
}

.academic-list .box-academic-uni {
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.academic-list .box-academic-uni .academic-part .academic-img {
    width: 945px;
    height: 510px;
    object-fit: cover;
    /* object-position: -100px; */
}

.academic-list .box-academic-uni .academic-part .box-academic {
    width: 657px;
}

.academic-list .box-academic-uni .academic-part .box-academic .title {
    font-size: 32px;
    font-weight: 700;
}

.academic-list .box-academic-uni .academic-part .box-academic .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin: 24px 0;
    line-height: 30px;
}

.academic-list .box-academic-uni .academic-part.left {
    display: flex;
    align-items: center;
    gap: 118px;
}

.academic-list .box-academic-uni .academic-part.right {
    display: flex;
    align-items: center;
    gap: 300px;
    flex-direction: row-reverse;
}

/* Pathway to The World, CETL*/
.pathway-content,
.cetl-content,
.curriculum-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 200px 0;
}

.pathway-content .box-content,
.cetl-content .box-content,
.curriculum-content .box-content {
    max-width: 1520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

/* Pathway to The World  */

.pathway-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 130px;
}

.pathway-bridge img {
    width: 638px;
    height: 550px;
}

.pathway-bridge .bridge-text .title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.pathway-bridge .bridge-text .box-decs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pathway-bridge .bridge-text .box-decs .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.pathway-years {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

.pathway-years .title {
    font-size: 32px;
    font-weight: 700;
}

.pathway-years .img-years {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.pathway-years .img-years .years-1 {
    width: 400px;
    height: 604px;
    object-fit: cover;
}

/* cetl */
.cetl-about {
    display: flex;
    justify-content: space-between;
}

.cetl-about .decs {
    width: 1129px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.cetl-about .title {
    font-size: 50px;
    font-weight: 700;
}

.cetl-main .title {
    font-size: 32px;
    font-weight: 700;
}

.cetl-main .cetl-decs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 1129px;
}

.cetl-main .cetl-decs .decs {
    width: 1129px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.cetl-main .cetl-decs .decs-ul li {
    list-style-type: disc;
    margin-left: 20px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.cetl-programs h5.title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 70px;
}

.cetl-programs .box-events {
    display: flex;
    gap: 30px;
}

.cetl-programs .box-events .cetl-events {
    border-radius: 12px;
    background-color: var(--light-grey);
    width: 100%;
    padding: 32px 48px;
}

.cetl-events .title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
}

.cetl-events .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.cetl-shape {
    background-color: var(--sky-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cetl-shape .box-shape {
    max-width: 1520px;
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 50px 0;
}

.cetl-shape .box-shape .img-person {
    position: absolute;
    bottom: 0;
    left: 0;
    /* width: 496px; */
    height: 326px;
}

.cetl-shape .box-shape .box-text {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 100%;
    gap: 65px;
}

.cetl-shape .box-shape .box-text .title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    width: 775px;
}

.btn-website {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    border-radius: 12px;
    gap: 12px;
    width: 292px;
    color: var(--white);
    background-color: var(--dark-blue);
    font-size: 22px;
    font-weight: 700;
}

.btn-website svg path {
    stroke: var(--white);
}

/* core-curriculum */
.curriculum-prepare h4 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 32px;
}

.curriculum-prepare .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 1262px;
}

.core-university {
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: space-between;
}

.core-university .box-text .title {
    font-size: 32px;
    font-weight: 700;
}

.core-university .box-text .decs {
    font-size: 22px;
    font-weight: 400;
    margin: 32px 0 50px;
    line-height: 1.5;
}

.core-university .box-text .core-curriculum {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.core-university .box-text .core-curriculum li {
    display: flex;
    gap: 16px;
}

.core-university .box-text .core-curriculum li .li-core {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-blue);
}

.core-competencies {
    display: flex;
    gap: 160px;
    justify-content: space-between;
}

.core-competencies .box-competencies .title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.core-competencies .box-competencies .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 486px;
}

.core-competencies .choose-competencies {
    display: flex;
    gap: 75px;
}

.core-competencies .choose-competencies .item-competencies {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 300px;
}

.core-competencies .choose-competencies .item-competencies li {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.core-competencies
    .choose-competencies
    .item-competencies
    li.active
    svg
    g
    rect {
    fill: var(--dark-blue);
}

.core-competencies .choose-competencies .item-competencies li svg g rect {
    fill: var(--cool-grey);
}

.core-competencies .choose-competencies .item-competencies li .text {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--medium-grey);
}

.core-competencies .choose-competencies .item-competencies li.active .text {
    color: var(--main-blue);
}

.core-competencies .choose-competencies .content-competencies {
    width: 517px;
}

.core-competencies .choose-competencies .content-competencies ul {
    display: none;
}

.core-competencies .choose-competencies .content-competencies ul.active {
    display: block;
    padding: 32px;
    background-color: var(--soft-grey);
    border-radius: 10px;
}

.core-competencies .choose-competencies .content-competencies ul li {
    list-style: decimal;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 16px;
    color: var(--dark-blue);
}

.dynamic-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dynamic-container .box-content {
    max-width: 100%;
    width: 1520px;
    padding: 160px 0;
    display: flex;
    gap: 24px;
}

/* QAIR */

.qair-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qair-container .box-content {
    max-width: 100%;
    width: 1520px;
    padding: 200px 0;
    display: flex;
    gap: 24px;
}

.qair-list {
    min-width: 360px;
}

.qair-list li {
    border-bottom: 1px solid var(--cool-grey);
    padding: 16px 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--gunmetal-black);
    cursor: pointer;
}

.qair-list li.active {
    font-weight: 700;
}

.qair-list li:nth-child(6) {
    border-bottom: 1px solid transparent;
}

.dynamic-list {
    min-width: 360px;
}

.dynamic-list li {
    border-bottom: 1px solid var(--cool-grey);
    padding: 16px 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--gunmetal-black);
    cursor: pointer;
}

.dynamic-list li.active {
    font-weight: 700;
}

.qair-data .data-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
    font-size: 22px;
    color: var(--gunmetal-black);
    line-height: 1.5;
}

.qair-data .data-list {
    display: none;
}

.qair-data .data-list.active {
    display: flex;
}

.qair-data .data-list:nth-child(1) .text-normal {
    font-weight: 400;
}

.qair-data .data-list:nth-child(1) .text-bold {
    font-weight: 700;
}

.dynamic-data .data-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
    font-size: 22px;
    color: var(--gunmetal-black);
    line-height: 1.5;
}

.ul-decimal li {
    list-style-type: decimal !important;
}

.dynamic-data .data-list {
    display: none;
}

.dynamic-data .data-list.active {
    display: flex;
}

.dynamic-data .data-list .text-normal {
    font-weight: 400;
}

.dynamic-data .data-list .text-bold {
    font-weight: 700;
}

.dynamic-data .data-list .header-text {
    font-weight: 600;
    font-size: xx-large;
}
.dynamic-data .data-list img {
    width: 100%;
}

.dynamic-data .data-list ul li {
    list-style-type: disc;
    margin-left: 30px;
}


.qair-data .data-list.book-table.active {
    display: flex;
    gap: 100px;
}

.qair-data .data-list.book-table .box-table {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.qair-data .data-list.book-table .box-table .text-table {
    font-weight: 500;
}

.qair-data .data-list.book-table .box-table .bold-table {
    font-weight: 700;
}

.table-data {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--blue-ht);
    border-radius: 20px 20px 0 0;
}

.table-data td {
    padding: 24px 36px;
    text-align: left;
    font-size: 24px;
    font-weight: 400;
    color: var(--black);
}

.table-data td.bold {
    font-weight: 700;
}

.table-data tbody tr:nth-child(odd) {
    background-color: var(--white);
}

.table-data tbody tr {
    background-color: var(--blue-hd);
}

.table-data th {
    padding: 16px 36px;
    text-align: left;
    color: var(--white);
    font-size: 24px;
    font-weight: 400;
}

.table-data th:first-child {
    width: 360px;
}

.button-survey {
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    height: 72px;
    gap: 12px;
    width: 416px;
}

.button-survey .years {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}

.button-survey svg path {
    stroke: var(--white);
}

.box-survey {
    display: flex;
    gap: 24px;
}

.survey {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-start;
    gap: 16px;
}

.survey .box-survey {
    width: 600px;
}

.survey .box-survey .button-survey {
    width: 100%;
}

.survey h5 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.quality-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.quality-list .program-box .text-list {
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.qair-data .data-list .program-box ul li {
    list-style-type: disc;
    margin-left: 30px;
}

.box-form {
    background-color: var(--bg-form);
    border-radius: 10px;
    margin-top: 16px;
}

.box-form form .form-content {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 42px 80px;
}

.box-form form .form-content .box-required {
    display: flex;
    flex-direction: column;
}

.box-form form .form-content .box-required label,
.box-form form .form-content .box-required .text {
    margin-bottom: 21px;
    font-size: 24px;
    font-weight: 500;
    color: var(--black);
}

.box-form form .form-content .box-required label span,
.box-form form .form-content .box-required .text span {
    color: var(--red);
}

.box-form form .form-content .box-required.box-label,
.box-form form .form-content .box-required.box-date {
    width: 468px;
}

.box-form form .form-content .box-required input {
    outline: none;
    border-radius: 6px;
    padding: 16px;
    border: 1.51 solid var(--border-input);
    font-size: 18px;
}

.box-form form .form-content .box-required .desc {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 400;
    color: var(--steel-grey);
}

.box-form form .form-content .box-required .box-label {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    gap: 20px;
}

.box-form
    form
    .form-content
    .box-required.box-name
    .box-label
    .box-input
    input {
    width: 468px;
}

.box-form form .form-content .box-required .content-radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
}

.radio-option {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 16px;
}

.radio-option input[type="radio"] {
    display: none;
}

.custom-radio {
    width: 24px;
    height: 24px;
    border: 1px solid var(--cool-grey);
    background-color: var(--white);
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
}

.custom-radio::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--main-blue);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s;
}

input[type="radio"]:checked + .custom-radio::after {
    opacity: 1;
}

.form-footer {
    border-top: 2px solid var(--white);
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.form-footer button {
    padding: 24px 96px;
    border-radius: 6px;
    background-color: var(--main-blue);
    color: var(--white);
    font-size: 24px;
    font-weight: 500;
    outline: none;
    border: none;
}

/* contact-step */
.contact-step {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 76px 0;
    background-color: var(--sky-blue);
}

.contact-step .box-step {
    width: 1520px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-step .box-step .step-take {
    width: 745px;
}

.contact-step .box-step .step-take h4 {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 16px;
}

.contact-step .box-step .step-take .desc {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.5;
}

.contact-step .box-step .step-button {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-step .box-step .step-button a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 230px;
    height: 74px;
    justify-content: center;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 700;
}

.contact-step .box-step .step-button .btn-contact {
    background-color: var(--dark-blue);
    color: var(--white);
}

.contact-step .box-step .step-button .btn-contact svg path {
    stroke: var(--white);
}

.contact-step .box-step .step-button .btn-faq {
    border: 1px solid var(--black);
    color: var(--black);
}

.contact-step .box-step .step-button .btn-faq svg path {
    stroke: var(--black);
}

.accreditation-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 200px;
}

.accreditation-text {
    width: 1520px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.accreditation-text h3 {
    font-size: 50px;
    font-weight: 700;
}

.accreditation-text .desc {
    width: 1260px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.accreditation-text .text-articulation h6 {
    font-size: 22px;
    font-weight: 700;
}

/* applied-skilled */
.as-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200px;
}

.as-content .box-content {
    width: 1520px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.boxes-container {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.box {
    min-width: max-content;
    background-color: #292f78;
    border-radius: 30px;
    padding: 1rem 1rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-title-text {
    font-size: 1.1rem;
    font-weight: 400;
    color: white;
    margin: 0;
}

.dynamic-data {
    background-color: #F2F2F5;
    border-radius: 5px;
    padding: 2rem;
}

.as-overview h4 {
    font-size: 50px;
    font-weight: 700;
}

.table-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

table {
    background-color: white;
    width: fit-content;
    border-collapse: collapse;
}

thead {
    background-color: #2133A0;
    color: #fff;
}
thead tr th {
    color: #fff;
}

th {
    padding: 16px 20px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

td {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: #f8f9fa;
}

.no-column {
    width: 60px;
    text-align: center;
    color: #555;
}

.subject-column {
    color: #202124;
}

.credits-column {
    width: 100px;
    text-align: center;
    color: #202124;
}

.title {
    font-size: 24px;
    font-weight: normal;
    /* margin-bottom: 20px; */
    color: #202124;
    /* text-align: center; */
}

@media (max-width: 768px) {

    th, td {
        padding: 12px 15px;
    }

    .no-column {
        width: 50px;
    }

    .credits-column {
        width: 80px;
    }
}

@media (max-width: 480px) {
    th, td {
        padding: 10px;
        font-size: 12px;
    }

    .title {
        font-size: 20px;
    }
}

.as-overview .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin: 32px 0 76px;
}

.as-overview .container-overview {
    margin-top: 25px;
    display: flex;
    justify-content: start;
    gap: 30px;
}

.as-overview .container-overview li {
    width: 23%;
    height: auto;
    background-color: var(--main-blue);
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
}


.as-overview .container-overview li img {
    display: block;
    width: 115px;
    height: auto;
    object-fit: contain;
    /* pusatkan secara visual */
    align-self: center;     /* memastikan tetap center kalau ada perubahan layout */
}


.as-overview .container-overview li h6 {
    font-size: 25px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
}

/* governance */
.governance-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 200px 0;
}

.governance-content .box-content {
    width: 1520px;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.governanve-overview h4 {
    font-size: 50px;
    font-weight: 700;
}

.governanve-overview .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin: 32px 0 76px;
}

.governanve-overview .container-overview {
    display: grid;
    justify-content: space-between;
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto));
}

.governanve-overview .container-overview li {
    background-color: var(--main-blue);
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    border-radius: 10px;
}

.governanve-overview .container-overview li h6 {
    font-size: 25px;
    font-weight: 700;
    color: var(--white);
}

.governanve-overview .container-overview li p {
    font-size: 18px;
    font-weight: 400;
    color: var(--white);
    line-height: 1.5;
    text-align: center;
}

.governance-vision {
    background-color: var(--sky-blue);
    padding: 50px 100px;
    border-radius: 20px;
    height: 503px;
    overflow: hidden;
}

.governance-vision.fet-vision {
    height: 550px;
}

.governance-vision.foe-faculty {
    height: 880px;
}

.governance-vision .tab-ul {
    display: flex;
    gap: 24px;
    margin-bottom: 64px;
}

.governance-vision .tab-ul .tab-li {
    width: 148px;
    height: 50px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dark-blue);
    background-color: var(--white);
    color: var(--dark-blue);
}

.governance-vision .tab-ul .tab-li.active {
    background-color: var(--dark-blue);
    color: var(--white);
}

.governance-vision .content-ul .content-li.active {
    display: flex;
}

.governance-vision .content-ul .content-li {
    align-items: center;
    justify-content: space-between;
    display: none;
    position: relative;
}

.governance-vision .content-ul .content-li h5 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

.governance-vision .content-ul .content-li .decs {
    font-size: 20px;
    font-weight: 400;
    width: 693px;
    line-height: 1.5;
}

.governance-vision .content-ul .content-li .decs.mision {
    width: 909px;
}

.governance-vision .content-ul .page-img {
    position: absolute;
    right: 0px;
}

.governance-vision .content-ul .content-li .page-img::after {
    content: " ";
    width: 520px;
    height: 520px;
    position: absolute;
    background-color: #a0cbe8;
    border-radius: 50%;
    top: 60px;
    left: 70px;
    /* z-index: -1; */
}

.governance-vision .content-ul .content-li .page-img img {
    position: relative;
    z-index: 2;
    left: 100px;
}

.governance-vision .content-ul .content-li .page-text .list-mission li {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 800px;
    width: 100%;
    min-width: 200px;
    margin-left: 20px;
    list-style-type: disc;
}

.governanve-greeting h6 {
    margin-bottom: 56px;
    font-size: 32px;
    font-weight: 700;
}

.governanve-greeting .greeting-text {
    display: flex;
    gap: 100px;
    justify-content: space-between;
}

.governanve-greeting .greeting-text .box-qoutes .text-qoutes {
    font-size: 34px;
    font-weight: 700;
    color: #1c1c28;
    line-height: 1.5;
}

.governanve-greeting .greeting-text .box-qoutes .name-qoutes {
    font-size: 24px;
    font-weight: 700;
    color: #1c1c28;
    padding: 32px 0 6px;
}

.governanve-greeting .greeting-text .box-qoutes .degree {
    font-size: 16px;
    font-weight: 400;
    color: #28293d;
}

.governanve-greeting .greeting-text img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.governance-chart {
    width: 100%;
}

.governance-chart ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, auto));
    justify-content: space-between;
    margin-bottom: 93px;
}

.governance-chart ul li {
    width: 360px;
}

.governance-chart ul li img {
    margin-bottom: 32px;
}

.governance-chart ul li .name {
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 700;
    color: #1c1c28;
}

.governance-chart ul li .position {
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 700;
    color: var(--main-blue);
}

.governance-chart ul li .text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.governance-chart .link-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.governance-chart .box-chart {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    font-weight: 700;
    color: var(--main-blue);
}

.governance-chart .box-chart .text {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #292f78;
    text-decoration-thickness: 2px;
}

/* voice */

.voice-sampoerna {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200px 0 0;
}

.voice-sampoerna .box-voice {
    width: 1520px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.voice-sampoerna .box-voice h3 {
    font-size: 32px;
    font-weight: 700;
}

.voice-sampoerna .box-voice .list-voice {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 35px 0 50px;
}

.voice-sampoerna .box-voice .list-voice li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.voice-sampoerna .box-voice .list-voice li svg g rect {
    fill: var(--cool-grey);
}

.voice-sampoerna .box-voice .list-voice li.active svg g rect {
    fill: var(--main-blue);
}

.voice-sampoerna .box-voice .list-voice li.active .text {
    color: var(--main-blue);
}

.voice-sampoerna .box-voice .list-voice li .text {
    font-size: 22px;
    font-weight: 700;
    color: var(--cool-grey);
}

.content-voice li {
    display: none;
}

.content-voice li.active {
    display: flex;
    justify-content: space-between;
    width: auto;
    gap: 20px;
    /* display: block; */
}

.content-voice li .box-voices {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.content-voice li .box-voices .text-voice {
    padding-top: 21px;
    position: relative;
}

.content-voice li .box-voices .position-voice {
    position: relative;
    top: -30px;
    left: 16px;
}

.content-voice li .box-voices .position-voice .title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.content-voice li .box-voices .position-voice .desc {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.content-voice li .box-voices .position-voice .name {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 700;
}

.content-voice li .box-voices .position-voice .job {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.content-voice li:nth-child(1) .box-voice .position-voice .title,
.content-voice li:nth-child(1) .box-voice .position-voice .desc {
    width: 391px;
}

.content-voice li:nth-child(2) .box-voice:nth-child(1) .position-voice .title,
.content-voice li:nth-child(2) .box-voice:nth-child(1) .position-voice .desc {
    width: 391px;
}

.content-voice li:nth-child(2) .box-voice:nth-child(2) .position-voice .title,
.content-voice li:nth-child(2) .box-voice:nth-child(2) .position-voice .desc {
    width: 453px;
}

.content-voice li:nth-child(3) .box-voice:nth-child(2) .position-voice .title,
.content-voice li:nth-child(3) .box-voice:nth-child(2) .position-voice .desc {
    width: 391px;
}

.content-voice li:nth-child(4) .box-voice .position-voice .desc {
    width: 409px;
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-content .box-content {
    width: 1520px;
    padding-top: 200px;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.about-content .box-content .about-sampoerna img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.about-content .box-content .about-text {
    margin-top: 86px;
    display: flex;
    align-items: right;
    flex-direction: column;
    gap: 32px;
}

.about-content .box-content .about-text h3 {
    font-size: 50px;
    font-weight: 700;
}

.about-content .box-content .about-text .decs {
    line-height: 1.5;
    font-size: 22px;
    font-weight: 400;
    width: 1260px;
}

.boxx-learn {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--main-blue);
        font-weight: 700;
}

.accreditation-sampoerna {
    display: flex;
    align-items: right;
    flex-direction: column;
    gap: 32px;
}

.accreditation-sampoerna h6 {
    font-size: 32px;
    font-weight: 700;
}

.accreditation-sampoerna .desc {
    line-height: 1.5;
    font-size: 22px;
    font-weight: 400;
    width: 1260px;
}

.alumni-sampoerna {
    display: flex;
    align-items: right;
    flex-direction: column;
    gap: 32px;
}

.alumni-sampoerna h4 {
    font-size: 50px;
    font-weight: 700;
}

.alumni-sampoerna .desc {
    line-height: 1.5;
    font-size: 22px;
    font-weight: 400;
    width: 1260px;
}

.alumni-sampoerna iframe {
    width: 100%;
    height: 800px;
}

.img-about {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
}

.img-about h6 {
    font-size: 32px;
    font-weight: 700;
}

.img-about img {
    width: 100%;
    height: 100%;
}

/* admissions */
.admission-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.admission-content .box-content {
    width: 1520px;
    padding-top: 200px;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.content-explore {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-explore .box-explore {
    display: flex;
    width: 1520px;
    margin: 200px 0;
}

.content-explore .box-explore .explore-img img {
    width: 557px;
    height: 688px;
    object-fit: cover;
    border-radius: 0 30px 30px 0;
}

.admission-content .box-content .box-apply {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.admission-content .box-content .box-apply h6 {
    font-size: 32px;
    font-weight: 700;
}

.admission-content .box-content .box-apply .list-apply {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.admission-content .box-content .box-apply .list-apply li {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.admission-content .box-content .box-apply .list-apply li .decs {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--main-blue);
    width: 256px;
    height: 74px;
    border-radius: 12px;
}

.read-more p {
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
}

.read-more svg path {
    stroke: var(--white);
}

.box-requirements {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 70px;
}

.box-requirements h6 {
    font-size: 32px;
    font-weight: 700;
}

.box-requirements .content-requirements {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

.box-requirements .content-requirements li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 160px;
}

.box-requirements .content-requirements li:nth-child(2) {
    flex-direction: row-reverse;
}

.box-requirements .content-requirements li .box-text .decs {
    width: 616px;
}

.box-requirements .content-requirements li img {
    width: 745px;
}

.box-requirements .content-requirements li .box-text .decs {
    font-size: 22px;
    font-weight: 400;
    padding: 24px 0;
    line-height: 1.5;
}

.boxx-more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--main-blue);
}

.content-explore {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-explore .box-explore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1520px;
    background-color: var(--soft-grey);
    border-radius: 10px 30px 30px 10px;
}

.content-explore .box-explore .explore-text {
    margin: 66px 130px;
    width: 616px;
}

.content-explore .box-explore .explore-text .title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
}

.content-explore .box-explore .explore-text .desc {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 28px;
}

.content-explore .box-explore .explore-text .box-button {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 46px;
}

.content-explore .box-explore .explore-text .box-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 487px;
    height: 74px;
    border-radius: 13px;
    font-size: 22px;
    font-weight: 700;
}

.content-explore .box-explore .explore-text .box-button .virtual-button {
    background-color: var(--main-blue);
    color: var(--white);
}

.content-explore
    .box-explore
    .explore-text
    .box-button
    .virtual-button
    svg
    path {
    stroke: var(--white);
}

.content-explore .box-explore .explore-text .box-button .onsite-button {
    border: 2px solid #00a7cf;
    color: #00a7cf;
}

.content-explore
    .box-explore
    .explore-text
    .box-button
    .onsite-button
    svg
    path {
    stroke: #00a7cf;
}

.info-explore {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info-explore .data-box {
    display: flex;
    gap: 16px;
    align-items: center;
}

.info-explore .data-box .text {
    font-size: 18px;
    font-weight: 400;
}

/* universitas admissions */
.list-univ .univ-bg.active,
.list-req .req-bg.active {
    display: block;
}

.list-univ .univ-bg,
.list-req .req-bg {
    display: none;
    min-width: 100%;
    max-height: 100vh;
    position: relative;
}

.univ-bg img,
.req-bg img {
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
}

.univ-bg .box-img::before,
.req-bg .box-img::before {
    background-color: #00000030;
    content: "";
    width: 100%;
    height: 100vh;
    position: absolute;
}

.univ-bg .box-title,
.req-bg .box-title {
    position: absolute;
    bottom: 100px;
    left: 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.univ-bg .box-title .title,
.req-bg .box-title .title {
    color: var(--white);
    font-size: 36px;
    font-weight: 700;
}
.univ-bg .box-title .decs,
.req-bg .box-title .decs {
    color: var(--white);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    width: 620px;
}

.tab-univ,
.tab-req {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-univ li,
.tab-req li {
    padding: 30px;
    text-align: center;
    width: 100%;
    background-color: var(--soft-grey);
    font-size: 25px;
    font-weight: 700;
}

.tab-univ li.active,
.tab-req li.active {
    background-color: var(--main-blue);
    color: var(--white);
}

.tab-univ li:hover,
.tab-req li:hover {
    background-color: var(--main-blue);
    /* background-color: red; */
    color: var(--white);
    cursor: pointer;
}

.content-univ,
.content-req {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-univ .box-content,
.content-req .box-content {
    width: 1520px;
    margin-top: 200px;
}

.content-tab .content-main .text-apply {
    display: flex;
    flex-direction: column;
    gap: 150px;
}

.content-univ .box-content .content-tab.active {
    display: block;
}

.content-univ .box-content .content-tab {
    display: none;
}

.content-univ .box-content .content-tab .content-main {
    padding: 0 32px;
}

.text-apply li h5 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.text-apply li h5 br {
    display: none;
}

.text-apply li {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.text-apply li h5 span {
    padding-right: 80px;
}

.text-apply li .decs {
    padding-left: 130px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
}

.text-apply li .decs .blue {
    color: var(--main-blue);
}

.text-apply li .box-practice-test,
.text-apply li .box-placement-test {
    background-color: var(--soft-grey);
    padding: 40px 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-apply li .box-practice-test .box-click {
    display: flex;
    align-items: center;
    gap: 40px;
}

.text-apply li .box-practice-test .box-click .box-img {
    background-color: #bce3ff;
    padding: 45px 42px 43px 59px;
    border-radius: 50%;
}

.text-apply li .box-practice-test .box-click .title {
    width: 711px;
    font-size: 27px;
    font-weight: 700;
}

.text-apply li .box-practice-test .box-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
}

.text-apply li .box-practice-test .box-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 417px;
    height: 74px;
    border-radius: 13px;
    font-size: 22px;
    font-weight: 700;
}

.text-apply li .box-practice-test .box-button .btn-blue {
    background-color: var(--dark-blue);
    color: var(--white);
}

.text-apply li .box-practice-test .box-button .btn-blue svg path {
    stroke: var(--white);
}

.text-apply li .box-practice-test .box-button .btn-border {
    background-color: var(--white);
    border: 1.5px solid var(--dark-blue);
    color: var(--dark-blue);
}

.text-apply li .box-placement-test .btn {
    font-size: 27px;
    font-weight: 700;
}

.text-apply li .box-placement-test .btn-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 300px;
    height: 74px;
    border-radius: 13px;
    font-size: 22px;
    font-weight: 700;
    background-color: var(--dark-blue);
    color: var(--white);
}

.text-apply li .box-placement-test .btn-center svg path {
    stroke: var(--white);
}

.content-univ .box-content .content-tab:nth-child(2) {
    margin-bottom: 200px;
}

.content-univ .box-content .content-tab .content-main {
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.tuition h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 32px;
}

.tuition .decs-tuition {
    font-size: 22px;
    font-weight: 400;
    width: 1262px;
    line-height: 1.5;
}

.tuition .decs-tuition .line-here {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--black);
}

.tuition .box-img {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-top: 75px;
}

.tuition .box-cost {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tuition .box-cost .decs {
    font-size: 22px;
    line-height: 1.5;
}

.tuition .table-cst {
    margin-top: 16px;
    width: 873px;
    border-collapse: collapse;
    border-left: 1px solid var(--cool-grey);
    border-right: 1px solid var(--cool-grey);
}

.tuition .table-cst th {
    text-align: left;
    padding: 17px 54px;
    background-color: #2133a0;
    border: none;
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
}

.tuition .table-cst th:first-child {
    width: 700px;
}

.tuition .table-cst td {
    padding: 17px 54px;
    border-bottom: 1px solid var(--cool-grey);
    font-size: 22px;
    font-weight: 400;
}

.tuition .box-cost .box-decs-tui .decs-tui {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 2px;
    line-height: 1.5;
}

.tuition.award .decs {
    margin-bottom: 32px;
    font-size: 22px;
    line-height: 1.5;
}

.tuition.award img {
    margin-top: 75px;
}

.tuition.requirements h6 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.tuition.requirements .decs {
    font-size: 22px;
}

.tuition.requirements .requirements-tab {
    margin-top: 75px;
    display: flex;
    gap: 24px;
}

.tuition.requirements .requirements-tab .tab-criteria .item {
    width: 360px;
    font-size: 22px;
    font-weight: 400;
}

.tuition.requirements .requirements-tab .tab-criteria .item.active {
    font-weight: 700;
    color: #292F78;
}

.tuition.requirements .requirements-tab .tab-criteria .item:nth-child(1) {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--black);
}

.tuition.requirements .requirements-tab .tab-criteria .item:nth-child(2) {
    padding-top: 10px;
}

.tuition.requirements .requirements-tab .content-criteria .item.active {
    display: block;
}

.tuition.requirements .requirements-tab .content-criteria .item {
    display: none;
}

.tuition.requirements .requirements-tab .content-criteria .item .box-text {
    margin-top: 32px;
}

.tuition.requirements
    .requirements-tab
    .content-criteria
    .item
    .box-text
    ul
    li {
    list-style: disc;
    margin-left: 28px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

/* .tuition .box-decs {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tuition .box-decs .bold {
  font-weight: 700;
}

.tuition .box-decs .tab-bursary li {
  list-style: disc;
  font-size: 22px;
  line-height: 1.5;
  margin-left: 35px;
}

.tuition .box-decs .tab-bursary .number li {
  list-style: decimal;
  font-size: 22px;
  line-height: 1.5;
  margin-left: 23px;
}

.tuition .box-decs .box-number .text {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
}

.tuition .box-decs .box-number .number li {
  list-style-type: decimal;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  margin-left: 30px;
}

.tuition .box-decs .bold .blue {
  color: var(--dark-blue);
} */

.tuition .box-bursary {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tuition .box-bursary .decs {
    font-size: 22px;
}

.tuition .box-bursary .bold {
    font-weight: 700;
}

.tuition .box-bursary .tab-bursary li {
    list-style: disc;
    font-size: 22px;
    line-height: 1.5;
    margin-left: 35px;
}

.tuition .box-bursary .tab-bursary .number li {
    list-style: decimal;
    font-size: 22px;
    line-height: 1.5;
    margin-left: 23px;
}

.tuition .box-bursary .box-number .text {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.tuition .box-bursary .box-number .number li {
    list-style-type: decimal;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 30px;
}

.tuition .box-bursary .bold .blue {
    color: var(--dark-blue);
}

/* testing */
.testing h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 32px;
}

.testing .decs-test {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 1262px;
}

.testing img {
    margin-top: 75px;
    width: 1500px;
    height: 711px;
    object-fit: cover;
    border-radius: 10px;
}

.testing h6 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.testing .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.testing .box-test {
    margin-top: 75px;
    display: flex;
    gap: 24px;
}

.testing .box-test .tab-test li {
    width: 360px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 0;
    border-top: 1px solid var(--cool-grey);
}

.testing .box-test .tab-test li.active {
    font-weight: 700;
}

.testing .box-test .tab-test li:nth-child(1) {
    padding-top: 0px;
    border-top: 1px solid transparent;
}

.testing .box-test .content-test .item.active {
    display: flex;
}

.testing .box-test .content-test .item {
    display: none;
    flex-direction: column;
    gap: 32px;
}

.table-test {
    width: 1067px;
    border-collapse: collapse;
}
.table-graduates-profile {
    width: -webkit-fill-available;
    border-collapse: collapse;
}

.table-test thead tr {
    background-color: #2133a0;
}
.table-graduates-profile thead tr {
    background-color: #2133a0;
    font-size: 20px;
}

.table-test th {
    text-align: center;
    padding: 16px;
    border: 1px solid var(--white);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
}
.table-graduates-profile th {
    text-align: center;
    padding: 16px;
    border: 1px solid var(--white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--white);
}

.table-test th:first-child {
    border-radius: 16px 0 0;
    width: 200px;
}
.table-graduates-profile th:first-child {
    border-radius: 16px 0 0;
    width: 200px;
}

.table-test th:nth-child(2) {
    width: 240px;
}
.table-graduates-profile th:nth-child(2) {
    width: 240px;
}

.table-test th:last-child {
    border-radius: 0 16px 0 0;
}
.table-graduates-profile th:last-child {
    border-radius: 0 16px 0 0;
}

.table-test tbody td {
    padding: 16px;
    border: 1px solid var(--soft-grey);
}
.table-graduates-profile td.justify-text-left {
    text-align: left;
    line-height: 30px;
}
.table-graduates-profile tbody td {
    padding: 16px;
    border: 1px solid var(--soft-grey);
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
}

.table-test tbody td.bold {
    font-weight: 700;
}
.table-graduates-profile tbody td.bold {
    font-weight: 300;
}

.table-test tfoot td {
    padding: 16px 0;
    background-color: var(--soft-grey);
    font-style: italic;
}
.table-graduates-profile tfoot td {
    padding: 16px 0;
    background-color: var(--soft-grey);
    font-style: italic;
}

.list-main li {
    list-style-type: decimal;
    margin-left: 22px;
    font-size: 21px;
    font-weight: 400;
}

/* University Admission */

/* International student */

.content-req .box-content .content-tab.active {
    display: flex;
}

.content-req .box-content .content-tab {
    display: none;
}

.box-admission h6 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
    margin-top: 200px;
}

.box-admission .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 1003px;
}

.box-admission .requirements-tab {
    margin-top: 75px;
    display: flex;
    gap: 24px;
}

.box-admission .requirements-tab .tab-criteria .item {
    width: 360px;
    font-size: 22px;
    font-weight: 400;
}

.box-admission .requirements-tab .tab-criteria .item.active {
    font-weight: 700;
    color: #292F78;
}

.box-admission .requirements-tab .tab-criteria .item:nth-child(1) {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--black);
}

.box-admission .requirements-tab .tab-criteria .item:nth-child(2) {
    padding-top: 10px;
}

.box-admission .requirements-tab .content-criteria .item.active {
    display: block;
}

.box-admission .requirements-tab .content-criteria .item {
    display: none;
}

.box-admission .requirements-tab .content-criteria .item .decs {
    margin-bottom: 32px;
}

.box-admission .requirements-tab .content-criteria .item .box-text ul li {
    list-style: disc;
    margin-left: 28px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.box-settle h2 {
    font-size: 50px;
    font-weight: 700;
}

.box-settle .box-decs {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 0 75px;
    width: 1262px;
}

.box-settle .box-decs p {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.box-settle .img-settle {
    width: 100%;
}

/* international student */

.inter-img {
    width: 100%;
}

.list-inter {
    display: flex;
    flex-direction: column;
    gap: 132px;
    margin-top: 80px;
}

.list-inter .inter-box {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.list-inter .inter-box h6 {
    width: 372px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
}

.list-inter .inter-box .box-decs {
    width: 1169px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.list-inter .inter-box .box-decs p {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.list-inter .inter-box .box-decs p .blue {
    color: var(--main-blue);
}

/* faculties */

.list-faculty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-faculty .box-faculty {
    max-width: 1520px;
    width: 100%;
    padding: 200px 0;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.list-faculty .box-faculty .item {
    display: flex;
    align-items: center;
    background-color: var(--light-grey);
}

.list-faculty .box-faculty .item img {
    max-width: 646px;
    width: 100%;
    height: 435px;
    min-width: 150px;
    object-fit: cover;
}

.list-faculty .box-faculty .item .box-text {
    padding: 0px 36px 0px 90px;
}

.list-faculty .box-faculty .item .box-text h2 {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.5;
}

.list-faculty .box-faculty .item .box-text .main-major {
    padding: 20px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-faculty .box-faculty .item .box-text .main-major .box-major {
    display: flex;
    flex-wrap: wrap;
}

.list-faculty .box-faculty .item .box-text .main-major .box-major .text {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-blue);
    padding-right: 5px;
    padding-left: 5px;
    border-left: 2px solid var(--main-blue);
}

.list-faculty
    .box-faculty
    .item
    .box-text
    .main-major
    .box-major
    .text:nth-child(1) {
    padding-left: 0px;
    border-left: none;
}

.list-faculty .box-faculty .item .box-text .more-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--main-blue);
    font-weight: 700;
    font-size: 22px;
}

.list-non-degree {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-non-degree .box-non-degree {
    max-width: 1520px;
    width: 100%;
    padding: 200px 0;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.list-non-degree .box-non-degree .item {
    display: flex;
    align-items: center;
    background-color: var(--light-grey);
}

.list-non-degree .box-non-degree .item img {
    width: 50%;
    height: -webkit-fill-available;
    object-fit: cover;
}

.list-non-degree .box-non-degree .item .box-text {
    padding: 60px 36px 60px 90px;
}

.list-non-degree .box-non-degree .item .box-text h2 {
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
}

.list-non-degree .box-non-degree .item .box-text .main-major {
    padding: 20px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-non-degree .box-non-degree .item .box-text .main-major .box-major {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.list-non-degree .box-non-degree .item .box-text .main-major .box-major .text {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-blue);
    padding-right: 0px;
    padding-left: 5px;
    border-left: 2px solid var(--main-blue);
}

.list-non-degree
.box-non-degree
.item
.box-text
.main-major
.box-major
.text:nth-child(1) {
    padding-left: 0px;
    border-left: none;
}

.list-non-degree .box-non-degree .item .box-text .more-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--main-blue);
    font-weight: 700;
    font-size: 22px;
}

/* faculties - fob */
.tab-fob,
.tab-fet,
.tab-foe,
.tab-fas,
.tab-ss,
.tab-stuaff,
.tab-pathway {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab-fob li,
.tab-fet li,
.tab-foe li,
.tab-fas li,
.tab-ss li,
.tab-stuaff li,
.tab-pathway li {
    text-align: center;
    width: 100%;
    background-color: var(--soft-grey);
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-fob li.active,
.tab-fet li.active,
.tab-foe li.active,
.tab-fas li.active,
.tab-ss li.active,
.tab-stuaff li.active,
.tab-pathway li.active {
    background-color: var(--main-blue);
    color: var(--white);
}
.tab-fob li:hover,
.tab-fet li:hover,
.tab-foe li:hover,
.tab-fas li:hover,
.tab-ss li:hover,
.tab-stuaff li:hover,
.tab-pathway li:hover {
    background-color: var(--main-blue);
    cursor: pointer;
    color: var(--white);
}

.content-fob .box-content .content-tab,
.content-fet .box-content .content-tab,
.content-foe .box-content .content-tab,
.content-fas .box-content .content-tab,
.content-ss .box-content .content-tab,
.content-stuaff .box-content .content-tab,
.content-pathway .box-content .content-tab {
    display: none;
}

.content-fob .box-content .content-tab .display,
.content-fet .box-content .content-tab .display,
.content-foe .box-content .content-tab .display,
.content-fas .box-content .content-tab .display,
.content-ss .box-content .content-tab .display,
.content-stuaff .box-content .content-tab .display,
.content-pathway .box-content .content-tab .display {
    max-width: 1520px;
    margin: 200px auto 0;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.content-fob .box-content .content-tab.active,
.content-fet .box-content .content-tab.active,
.content-foe .box-content .content-tab.active,
.content-fas .box-content .content-tab.active,
.content-ss .box-content .content-tab.active,
.content-stuaff .box-content .content-tab.active,
.content-pathway .box-content .content-tab.active {
    display: block;
}

.faculty-overview h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 32px;
}

.faculty-overview .decs {
    font-size: 22px;
    font-weight: 400;
    max-width: 1002px;
    width: auto;
    min-width: 200px;
    line-height: 1.5;
}

.faculty-overview.fet .decs {
    max-width: 1262px;
}

.faculty-overview.science .decs {
    max-width: 1391px;
}

.faculty-overview .box-decs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faculty-overview .box-decs .list-decs li {
    list-style-type: disc;
    margin-left: 20px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.faculty-competencies h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
    color: var(--gunmetal-black);
}

.faculty-competencies .box-competencies {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.faculty-competencies .box-competencies .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background-color: var(--dark-blue);
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}

.faculty-program {
    display: flex;
    justify-content: space-between;
}

.faculty-program .question-program {
    width: 486px;
}

.faculty-program .question-program h5 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
    line-height: 1.5;
    margin-bottom: 12px;
}

.faculty-program .question-program .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.faculty-program .question-program .blue-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--main-blue);
    line-height: 1.5;
    margin-bottom: 32px;
}

.faculty-program .tab-program {
    display: flex;
    gap: 75px;
}

.faculty-program .tab-program .list-program {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faculty-program .tab-program .list-program li {
    display: grid;
    grid-template-columns: 20px 280px;
    gap: 16px;
}

.faculty-program .tab-program .list-program li .decs {
    font-size: 22px;
    font-weight: 700;
    color: var(--ash-grey);
    line-height: 1.5;
}

.faculty-program .tab-program .list-program li.active .decs {
    color: var(--main-blue);
}

.faculty-program .tab-program .list-program li svg g rect {
    fill: var(--ash-grey);
}

.faculty-program .tab-program .list-program li.active svg g rect {
    fill: var(--main-blue);
}

.faculty-program .tab-program .content-program li {
    display: none;
    width: 517px;
    background-color: var(--soft-grey);
    padding: 32px 50px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.faculty-program .tab-program .content-program li.active {
    display: block;
}

.faculty-statement {
    background-color: var(--sky-blue);
    padding: 50px 100px 0px;
    border-radius: 13px;
    max-width: 1600px;
    width: 100%;
    min-width: 200px;
    overflow: hidden;
    position: relative;
}

.faculty-statement.foe-statement,
.faculty-statement.fet-statement,
.faculty-statement.fas-statement {
    height: 500px;
}

.faculty-statement.governance-statement {
    height: 500px;
}

.faculty-statement .tab-statement {
    display: flex;
    gap: 26px;
    align-items: center;
    padding-bottom: 18px;
}

.faculty-statement .tab-statement li {
    padding: 10px 42px;
    border-radius: 10px;
    background-color: var(--white);
    border: 1px solid var(--main-blue);
    font-size: 20px;
    font-weight: 400;
    color: var(--main-blue);
    cursor: pointer;
}

.faculty-statement .tab-statement li.active {
    background-color: var(--main-blue);
    color: var(--white);
}

.faculty-statement .content-statement {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.faculty-statement .content-statement .content-text ul {
    display: none;
}

.faculty-statement .content-statement .content-text ul.active {
    display: block;
    padding: auto 0;
}

.faculty-statement .content-statement .content-img {
    position: relative;
}

.faculty-statement .content-statement .content-img img {
    position: relative;
    bottom: 100px;
    left: 80px;
    height: 500px;
}

.faculty-statement .content-statement .content-img::before {
    content: "";
    width: 500px;
    height: 500px;
    background-color: #a0cbe8;
    position: absolute;
    left: 60px;
    border-radius: 50%;
    bottom: 40px;
}

.faculty-statement.foe-statement
    .content-statement
    .content-text
    ul:first-child {
    padding-top: 60px;
    max-width: 700px;
    width: 100%;
    min-width: 200px;
}

.faculty-statement.fas-statement .content-statement .content-text ul,
.faculty-statement.governance-statement .content-statement .content-text ul {
    padding-top: 40px;
    max-width: 700px;
    width: 100%;
    min-width: 200px;
}

.faculty-statement.fas-statement
    .content-statement
    .content-text
    ul
    .list-program {
    list-style-type: lower-alpha;
}

.faculty-statement.fas-statement
    .content-statement
    .content-text
    .psychology-program {
    margin-left: 10px;
}

.faculty-statement.fet-statement
    .content-statement
    .content-text
    ul:first-child {
    padding-top: 30px;
    max-width: 700px;
    width: 100%;
    min-width: 200px;
}

.faculty-statement .content-statement .content-text ul h3 {
    font-size: 32px;
    font-weight: 700;
    padding-bottom: 30px;
    color: var(--dark-blue);
}

.faculty-statement .content-statement .content-text ul p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.faculty-statement.foe-statement .content-statement .content-text ul li {
    font-size: 15px;
    font-weight: 400;
    margin-left: 10px;
    line-height: 1.5;
    list-style-type: disc;
    margin-left: 16px;
}

.faculty-statement .content-statement .content-text ul li {
    font-size: 18px;
    font-weight: 400;
    margin-left: 10px;
    line-height: 1.5;
    list-style-type: disc;
    margin-left: 16px;
}

.box-academics {
    margin: 200px 0;
    padding: 95px 200px;
    display: flex;
    gap: 24px;
    background-color: var(--soft-grey);
}

.box-academics .position-staff {
    width: 320px;
}

.box-academics .position-staff li {
    font-size: 22px;
    width: 320px;
    margin: 0 0 16px;
    font-weight: 400;
    color: var(--gunmetal-black);
}

.box-academics .position-staff li.active {
    font-weight: 700;
    color: #292F78;
}

.box-academics .position-staff li:not(:first-child) {
    padding-top: 10px;
    border-top: 1px solid var(--gunmetal-black);
}

.box-academics .academic-staff h5 {
    font-size: 32px;
    font-weight: 700px;
    margin-bottom: 40px;
}

.box-academics .academic-staff li {
    display: none;
}

.box-academics .academic-staff li.active {
    display: block;
}

.box-academics .academic-staff li .box-staff {
    display: flex;
    justify-content: left;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.box-academics .academic-staff li .box-staff .item {
    width: 300px;
}

.box-staff .item img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin-bottom: 32px;
}

.box-staff .item .name {
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 12px;
    line-height: 1.5;
}

.box-staff .item .text-blue {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-blue);
    line-height: 1.5;
}

.box-staff .item .major {
    margin-top: 32px;
    font-size: 16px;
    font-weight: 400;
    color: var(--black);
    line-height: 1.5;
}

.box-alumni h5 {
    margin-bottom: 60px;
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
}

.box-alumni .alumni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    gap: 30px;
    justify-content: space-between;
}

.box-graduates h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
}

.box-graduates .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.box-graduates .box-table {
    margin-top: 75px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 200px;
}

.box-graduates .box-table img {
    width: 100%;
    max-width: 439xp;
    min-width: 200px;
    object-fit: contain;
}

.box-graduates .list-graduates,
.box-graduates.foe {
    margin-bottom: 200px;
}

.box-graduates.mechanical .list-graduates {
    margin-bottom: 0px;
}

.faculty-link {
    margin-bottom: 200px;
}

.faculty-link h6 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 32px;
}

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

.faculty-link .box-link .link-visit {
    max-width: 487px;
    width: 100%;
    min-width: 200px;
    border-radius: 12px;
    padding: 75px 34px;
    background-color: var(--soft-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    height: 248px;
}

.faculty-link .box-link .link-visit .title {
    max-width: 339px;
    width: 100%;
    min-width: 200px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.faculty-link .box-link .link-visit .open-link {
    background-color: var(--dark-blue);
    display: flex;
    width: 310px;
    padding: 21px 0;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-radius: 13px;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
}

.faculty-link .box-link .link-visit .open-link svg path {
    stroke: var(--white);
}

.box-graduates .list-graduates li {
    list-style-type: disc;
    margin-left: 30px;
    font-size: 22px;
    font-weight: 400;
}

.box-graduates .decs {
    font-size: 22px;
    font-weight: 400;
}

.box-graduates .list-graduates .item {
    line-height: 1.5;
}

.box-graduates .list-graduates .item .bold {
    font-weight: 700;
}

.faculty-info {
    padding: 0 200px;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.faculty-info .box-info {
    width: 476px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    height: 265px;
    background-color: var(--soft-grey);
    position: relative;
    overflow: hidden;
}

.faculty-info .box-info .box-text {
    margin-left: 26px;
}

.faculty-info .box-info .box-text h5 {
    font-size: 30px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 10px;
}

.faculty-info .box-info .box-text .more-info {
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 28px;
    font-weight: 700;
    color: var(--main-blue);
}

.faculty-info .box-info .box-img {
    width: 100%;
    height: 100%;
    position: relative;
}

.faculty-info.bg {
    margin: 200px 0 125px;
}

.faculty-info .box-info .box-img::before {
    content: "";
    background-color: var(--main-blue);
    width: 320px;
    height: 600px;
    position: absolute;
    border-radius: 50%;
    top: -90px;
    right: -110px;
}

.faculty-info .box-info .box-img img {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.home-experience.faculty {
    padding: 200px 0 0;
}

.home-experience.faculty .box-experience .box-place {
    position: relative;
    bottom: -6px;
}

.faculty-qoutes {
    position: relative;
}

.faculty-qoutes img {
    width: 100%;
    height: 205px;
    object-fit: cover;
    border-radius: 10px;
}

.faculty-qoutes .qoutes {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    padding: 0 55px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 38px;
    font-weight: 700;
    color: var(--white);
}

.faculty-overview .box-decs {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.faculty-concentrations h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
    color: var(--gunmetal-black);
}

.faculty-concentrations .box-concentrations {
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

.faculty-concentrations .box-concentrations .num-concentrations img {
    width: 120px;
    height: 120px;
}

.faculty-concentrations .box-concentrations .num-concentrations,
.faculty-concentrations .box-concentrations .additional-concentrations {
    max-width: 486px;
    width: 100%;
    min-width: 200px;
    height: 100%;
}

.faculty-concentrations .box-concentrations .num-concentrations h6 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin: 21px 0 10px;
    line-height: 1.5;
}

.faculty-concentrations .box-concentrations .num-concentrations .decs {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.faculty-concentrations .box-concentrations .additional-concentrations {
    padding: 53px 60px 36px;
    background-color: #ededed;
    border-radius: 30px;
}

.faculty-concentrations
    .box-concentrations
    .additional-concentrations
    .list-additional {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faculty-concentrations
    .box-concentrations
    .additional-concentrations
    .list-additional
    li {
    list-style-type: decimal;
    margin-left: 20px;
    line-height: 1.5;
}

.faculty-concentrations .box-concentrations .additional-concentrations h5 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
    line-height: 1.5;
    margin-bottom: 10px;
}

.faculty-experiential h5 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 20px;
    line-height: 1.5;
}

.faculty-experiential .decs {
    width: 1262px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.box-career-pathways {
    display: flex;
    gap: 30px;
    /* align-items: center; */
    justify-content: left;
}

.box-career-pathways .career-pathway-img {
    width: 946px;
    height: 312px;
    object-fit: cover;
}

.box-career-pathways .box-ceklis {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, auto));
    gap: 20px;
    justify-content: left;
}

.box-career-pathways .box-ceklis li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--main-blue);
}

.faculty-career-pathways h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
    color: var(--gunmetal-black);
}
.graduates-profile h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
    color: var(--gunmetal-black);
}

.faculty-career-pathways .decs {
    margin-bottom: 75px;
    font-size: 22px;
    font-weight: 400;
    color: var(--gunmetal-black);
    line-height: 1.5;
}

.faculty-career-pathways.system {
    margin-bottom: 200px;
}

.program-faculty {
    display: flex;
    flex-direction: column;
    gap: 150px;
    margin-bottom: 200px;
}

.program-faculty.faculty {
    margin-bottom: 0px;
}

.program-faculty .box-program {
    display: flex;
    gap: 40px;
}

.program-faculty .box-program h5 {
    max-width: 342px;
    width: 100%;
    min-width: 200px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
}

.program-faculty .box-program .box-list li {
    list-style-type: disc;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gunmetal-black);
}

.box-laboratories h5 {
    margin: 0 200px;
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 50px;
}

.box-laboratories img {
    width: 100%;
    height: 506px;
    object-fit: cover;
}

.faculty-bachelor h5 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 50px;
}

.faculty-bachelor .box-bachelor {
    background-color: var(--soft-grey);
    padding: 36px 60px 10px;
    border-radius: 12px;
}

.faculty-bachelor .box-bachelor h6 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--gunmetal-black);
}

.faculty-bachelor .box-bachelor .box-decs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.governance-vision.faculty {
    margin-bottom: 200px;
}

.faculty-bachelor .box-bachelor .box-decs .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.degree-plan {
    width: 100%;
    padding: 96px 200px;
    background-color: var(--sky-blue);
    position: relative;
    display: flex;
    margin-top: 200px;
    justify-content: space-between;
}

.degree-plan img {
    position: absolute;
    bottom: 0px;
}

.degree-plan .box-degree {
    display: flex;
    align-items: center;
    gap: 431px;
    justify-content: space-between;
}

.degree-plan .box-degree h5 {
    font-size: 32px;
    font-weight: 700;
}

.degree-plan .box-degree .box-consultation {
    display: flex;
    align-items: center;
    gap: 13px;
    background-color: var(--dark-blue);
    padding: 21px 50px;
    border-radius: 16px;
}

.degree-plan .box-degree .box-consultation .teks {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
}

.degree-plan .box-degree .box-consultation svg path {
    stroke: var(--white);
}

.graduate-profile {
    width: 1132px;
}

.graduate-profile h5 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 26px;
}

.table-graduates {
    width: 100%;
    border-collapse: collapse;
}

.table-graduates th {
    border: 1px solid var(--black);
    background-color: var(--main-blue);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    padding: 12px 16px;
}

.table-graduates td {
    border: 2px solid var(--black);
    padding: 10px 6px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.table-graduates td:first-child {
    text-align: center;
}

.faculty-stories {
    margin-bottom: 200px;
}

.faculty-stories h5 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 32px;
}

.faculty-stories .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

/* campus life */

.campus-life-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 200px;
}

.box-student-affairs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 200px;
}

.box-student-affairs h6,
.box-government-clubs h6,
.box-inspiring-learning h6 {
    font-size: 32px;
    font-weight: 700;
}

.box-student-affairs img {
    max-width: 1520px;
    height: 477px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--main-blue);
    padding: 22px 50px;
    border-radius: 13px;
}

.link-button svg path {
    stroke: var(--white);
}

.box-government-clubs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.box-government-clubs .decs {
    width: 1260px;
    margin-top: 40px;
    margin-bottom: 35px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.box-government-clubs .box-clubs-img {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.box-government-clubs .box-clubs-img .slideshow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 98.7vw;
    margin-bottom: 32px;
    position: relative;
}

.box-government-clubs .box-clubs-img img {
    width: 813px;
    height: 467px;
    object-fit: cover;
    opacity: 0; /* Initially hide images */
    transition: opacity 2s ease-in-out; /* Fade-in transition */
}

.box-government-clubs .box-clubs-img img.active {
    opacity: 1; /* Show active image */
}

.box-government-clubs .box-clubs-img img:nth-child(2) {
    width: 1006px;
    height: 557px;
    object-fit: cover;
}

.box-inspiring-learning {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 200px;
}

.box-inspiring-learning img {
    margin-top: 40px;
    margin-bottom: 32px;
}

/* student - affairs */

.student-affairs-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 200px;
    gap: 200px;
}

.box-campus-orientation,
.box-comprehensive {
    max-width: 1520px;
    display: flex;
    gap: 75px;
    flex-direction: column;
}

/* Animation untuk konten */
.data-list {
    display: none;
    animation: fadeIn 0.5s ease;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.dynamic-list {
    padding-top: 25px;
}

.data-list.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.box-campus-orientation .box-text,
.box-comprehensive .box-text {
    display: flex;
    gap: 32px;
    flex-direction: column;
}

.box-campus-orientation .box-text h3 {
    font-size: 50px;
    font-weight: 700;
}

.box-campus-orientation .box-text .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 1260px;
}

.box-campus-orientation img {
    width: 100%;
}

.box-comprehensive .box-text h5 {
    font-size: 32px;
    font-weight: 700;
}

.box-comprehensive .box-text .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 1000px;
}

.box-list-comprehensive {
    display: flex;
    gap: 24px;
}

.box-list-comprehensive .list-comprehensive .item {
    width: 360px;
    font-size: 22px;
    font-weight: 400;
    padding: 10px 0;
    border-top: 1px solid var(--border-input);
}

.box-list-comprehensive .list-comprehensive .item:first-child {
    padding-top: 0px;
    border-top: 0px solid var(--dark-grey);
}

.box-list-comprehensive .list-comprehensive .item.active {
    font-weight: 700;
    color: #292F78;
}

.content-comprehensive .item {
    display: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    flex-direction: column;
    gap: 32px;
}

.content-comprehensive .item.active {
    display: flex;
}

.voice-sampoerna.student {
    margin-bottom: 200px;
}

/* student - government clubs */

.student-government-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 130px;
    margin-top: 200px;
}

.student-government-content .box-overview-student {
    width: 1520px;
    display: flex;
    flex-direction: column;
    gap: 75px;
}

.student-government-content .box-overview-student .box-decs {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.student-government-content .box-overview-student .box-decs h3 {
    font-size: 50px;
    font-weight: 700;
}

.student-government-content .box-overview-student .box-decs .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    width: 1260px;
}

.student-government-content .box-overview-student .icon-club {
    display: grid;
    justify-content: space-between;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(354px, auto));
}

.student-government-content .box-overview-student .icon-club .item {
    background-color: var(--soft-grey);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 22px 26px;
    width: 354px;
}

.student-government-content .box-overview-student .icon-club .item .text {
    padding: 20px 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.btn-see-more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.content-club {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

.content-club .item-club {
    display: flex;
    padding: 90px 200px;
    gap: 60px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-grey);
}

.content-club .item-club.right {
    padding: 0 200px;
    background-color: var(--white);
    flex-direction: row-reverse;
}

.content-club .item-club .box-text {
    width: 745px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.content-club .item-club .box-text .title {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 32px;
    font-weight: 700;
    color: var(--main-blue);
}

.content-club .item-club .box-text .title img {
    width: 40px;
    height: 40px;
}

.content-club .item-club .box-text .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gunmetal-black);
}

.content-club .item-club .box-text .list-student-club .item {
    font-size: 22px;
    font-weight: 700;
    list-style-type: disc;
    line-height: 1.5;
    color: var(--main-blue);
    margin-left: 25px;
}

.box-event-club {
    padding: 200px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.box-event-club h6 {
    font-size: 32px;
    font-weight: 700;
    width: 1040px;
    line-height: 1.5;
}

.box-event-club .list-activities-club li {
    list-style-type: disc;
    font-size: 22px;
    font-weight: 400;
    margin-left: 20px;
    margin-bottom: 10px;
}

.content-club .item-club .box-img {
    width: 616px;
    height: 387px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* animation-direction: alternate-reverse; */
    animation-play-state: running;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.content-club .item-club .box-img.education {
    background-image: url(../img/pages/student-government/content-Education\ Club-1.webp);
    animation-name: education;
    transition: 2s;
    animation-duration: 12s;
}

@keyframes education {
    0% {
        background-image: url(../img/pages/student-government/content-Education\ Club-2.webp);
    }
    20% {
        background-image: url(../img/pages/student-government/content-Education\ Club-3.webp);
    }
    40% {
        background-image: url(../img/pages/student-government/content-Education\ Club-4.webp);
    }
    60% {
        background-image: url(../img/pages/student-government/content-Education\ Club-5.webp);
    }
    80% {
        background-image: url(../img/pages/student-government/content-Education\ Club-6.webp);
    }
    100% {
        background-image: url(../img/pages/student-government/content-Education\ Club-1.webp);
    }
}

.content-club .item-club .box-img.arts {
    background-image: url(../img/pages/student-government/content-Arts\ Club-1.webp);
    animation-name: arts;
    transition: 2s;
    animation-duration: 6s;
}

@keyframes arts {
    0% {
        background-image: url(../img/pages/student-government/content-Arts\ Club-2.webp);
    }
    50% {
        background-image: url(../img/pages/student-government/content-Arts\ Club-3.webp);
    }
    100% {
        background-image: url(../img/pages/student-government/content-Arts\ Club-1.webp);
    }
}

.content-club .item-club .box-img.religion {
    background-image: url(../img/pages/student-government/content-Religion\ Club-1.webp);
    animation-name: religion;
    transition: 2s;
    animation-duration: 6s;
}

@keyframes religion {
    0% {
        background-image: url(../img/pages/student-government/content-Religion\ Club-2.webp);
    }
    50% {
        background-image: url(../img/pages/student-government/content-Religion\ Club-3.webp);
    }
    100% {
        background-image: url(../img/pages/student-government/content-Religion\ Club-1.webp);
    }
}

.content-club .item-club .box-img.sport {
    background-image: url(../img/pages/student-government/content-Sports\ Club-1.webp);
    animation-name: sport;
    transition: 2s;
    animation-duration: 10s;
}

@keyframes sport {
    0% {
        background-image: url(../img/pages/student-government/content-Sports\ Club-2.webp);
    }
    25% {
        background-image: url(../img/pages/student-government/content-Sports\ Club-3.webp);
    }
    50% {
        background-image: url(../img/pages/student-government/content-Sports\ Club-4.webp);
    }
    75% {
        background-image: url(../img/pages/student-government/content-Sports\ Club-5.webp);
    }
    100% {
        background-image: url(../img/pages/student-government/content-Sports\ Club-1.webp);
    }
}

/* spac */

.spac-content,
.safety-environment-content,
.it-departement-content,
.academic-registry-content,
.library-content,
.facilities-content,
.student-rights-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 200px;
}

.library-content,
.facilities-content,
.student-rights-content {
    margin: 200px 0;
}

.content-explanation {
    margin-top: 200px;
}

.content-explanation,
.content-department {
    width: 1520px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.content-explanation h3,
.content-department h3 {
    font-size: 50px;
    font-weight: 700;
}

.content-explanation .decs,
.prospective-text .decs {
    max-width: 1260px;
    width: 100%;

    min-width: 200px;
}

.content-explanation .decs,
.prospective-text .decs,
.content-department .decs {
    line-height: 1.5;
    font-size: 22px;
    font-weight: 400;
}

.content-department .decs.department {
    max-width: 1260px;
    min-width: 200px;
    width: 100%;
}

.content-department .decs.medium {
    max-width: 1130px;
    min-width: 200px;
    width: 100%;
}

.content-department .collective-list {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.content-department .collective-list li {
    list-style-type: disc;
    margin-left: 36px;
}

.prospective-text .decs.bold {
    font-weight: 700;
}

.prospective-text,
.grading-text {
    margin-bottom: 200px;
    padding: 0 32px;
}

.prospective-text,
.grading-text,
.content-resources {
    width: 1520px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.grading-text .box-years {
    margin-top: 43px;
    display: flex;
    flex-direction: column;
    gap: 75px;
}

.prospective-text h5,
.grading-text h5,
.content-resources h5 {
    font-size: 32px;
    font-weight: 700;
}

.grading-text .decs,
.content-resources .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.content-resources .decs {
    max-width: 1260px;
    width: 100%;
    min-width: 200px;
}

.box-prospective,
.content-proquest {
    display: flex;
    gap: 24px;
}

.content-proquest {
    max-width: 1520px;
    min-width: 200px;
    width: 100%;
    padding: 0 32px;
}

.tab-prospective .item,
.tab-prospective-safety .item,
.tab-prospective-it .item,
.tab-proquest .item {
    width: 360px;
    border-top: 1px solid var(--cool-grey);
    padding: 10px 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--gunmetal-black);
}

.tab-prospective .item.active,
.tab-prospective-safety .item.active,
.tab-prospective-it .item.active,
.tab-proquest .item.active {
    font-weight: 700;
    color: #292F78;

}

.tab-prospective .item:first-child,
.tab-prospective-safety .item:first-child,
.tab-prospective-it .item:first-child,
.tab-proquest .item:first-child {
    border-top: none;
    padding-top: 0px;
}

.content-prospective .item,
.content-prospective-safety .item,
.content-prospective-it .item,
.box-proquest .item {
    display: none;
    flex-direction: column;
    gap: 32px;
}

.content-prospective .item.active,
.content-prospective-safety .item.active,
.content-prospective-it .item.active,
.box-proquest .item.active {
    display: flex;
}

.box-proquest .item .decs {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.content-prospective .item table {
    max-width: 1000px;
    border-radius: 16px;
}

.content-prospective .item table thead {
    text-align: center;
    background-color: var(--main-blue);
}

.content-prospective .item table th:first-child {
    border-radius: 10px 0 0 0;
}

.content-prospective .item table th {
    padding: 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
}

.content-prospective .item table th:last-child {
    border-radius: 0 10px 0 0;
}

.content-prospective .item table td {
    border: 1px solid var(--ash-grey);
    padding: 16px;
    font-size: 22px;
    font-weight: 500;
}

.content-prospective-safety .item img {
    max-width: 350px;
    width: 100%;
    min-width: 200px;
    height: 185px;
    object-fit: cover;
    border-radius: 12px;
}

.content-prospective-it .item .information-system {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.content-prospective-it .item li {
    list-style-type: disc;
    margin-left: 36px;
}

.content-prospective-it .item .table-departement {
    max-width: 1200px;
    width: 100%;
    border-collapse: collapse;
}

.content-prospective-it .item .table-departement th {
    background-color: var(--main-blue);
    color: var(--white);
    border-right: 1px solid var(--black);
    padding: 10px;
    font-size: 22px;
    font-weight: 700;
}

.content-prospective-it .item .table-departement th:first-child {
    border-radius: 12px 0 0 0;
}

.content-prospective-it .item .table-departement th:last-child {
    border-radius: 0 12px 0 0;
    border-right: 0px solid var(--black);
}

.content-prospective-it .item .table-departement tbody td {
    padding: 10px;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
}

.content-prospective-it .item .table-departement tbody tr td {
    border-right: 1px solid var(--dark-blue);
    border-top: 1px solid var(--dark-blue);
}

.content-prospective-it .item .table-departement tbody tr td:last-child {
    border-right: 0px solid var(--dark-blue);
}

.content-prospective-it .item .box-service h6 {
    font-size: 22px;
    font-weight: 700;
    color: var(--main-blue);
}

.content-prospective-it .item .box-service .decs {
    font-size: 22px;
    font-weight: 400;
    color: var(--main-blue);
}

.principles {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.principles li {
    list-style-type: disc;
    margin-left: 32px;
}

.tbl-grades {
    background-color: #f7f7ff;
    max-width: 1420px;
    width: 100%;
}

.tbl-grades th {
    background-color: var(--main-blue);
    border-radius: 10px;
    color: var(--white);
    padding: 10px;
}

.tbl-grades td {
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    background-color: var(--white);
}

.box-catalogoue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.box-catalogoue .course-list {
    background-color: var(--soft-grey);
    padding: 32px 42px;
    border-radius: 13px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.box-catalogoue .course-list h6,
.grading-text .box-general h6,
.grading-text .box-schedule h6 {
    font-size: 25px;
    font-weight: 700;
}

.box-catalogoue .course-list .decs,
.grading-text .box-general .decs {
    font-size: 22px;
    font-weight: 400;
}

.box-catalogoue .course-list .box-course {
    display: flex;
}

.box-catalogoue .course-list .course-btn {
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 48px;
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    border-radius: 20px;
}

.box-catalogoue .course-list .course-btn svg path {
    stroke: var(--white);
}

.box-catalogoue .course-list .course-btn.course-1 {
    width: 358px;
}

.box-catalogoue .course-list .course-btn.course-2 {
    width: 290px;
}

.grading-text .box-general {
    background-color: var(--soft-grey);
    padding: 32px 42px;
    border-radius: 13px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.grading-text .box-general .box-button-click {
    display: flex;
}

.grading-text .box-general .btn-click {
    background-color: var(--white);
    padding: 20px 48px;
    display: flex;
    gap: 12px;
    border-radius: 12px;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--main-blue);
    border: 1px solid var(--main-blue);
}

.grading-text .box-general .btn-general-class {
    display: flex;
    gap: 30px;
}

.grading-text .box-schedule {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.grading-text .box-schedule .class-schedule {
    width: 471px;
    background-color: var(--soft-grey);
    padding: 32px 148px 32px 48px;
    font-size: 22px;
    text-decoration: underline;
    font-weight: 700;
    color: var(--main-blue);
    text-underline-offset: 4px;
    border-radius: 12px;
}

.grading-text .box-schedule .box-class {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.slideshow-facilities {
    width: 100%;
    height: 471px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* animation-direction: alternate-reverse; */
    animation-play-state: running;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    background-image: url("../img/pages/facilities/innovation-1.webp");
    animation-name: facilities;
    transition: 2s;
    animation-duration: 16s;
}

@keyframes facilities {
    0% {
        background-image: url("../img/pages/facilities/innovation-1.webp");
    }
    14.29% {
        background-image: url("../img/pages/facilities/innovation-2.webp");
    }
    28.57% {
        background-image: url("../img/pages/facilities/innovation-3.webp");
    }
    42.86% {
        background-image: url("../img/pages/facilities/innovation-4.webp");
    }
    57.14% {
        background-image: url("../img/pages/facilities/innovation-5.webp");
    }
    71.43% {
        background-image: url("../img/pages/facilities/innovation-6.webp");
    }
    85.71% {
        background-image: url("../img/pages/facilities/innovation-7.webp");
    }
    100% {
        background-image: url("../img/pages/facilities/innovation-8.webp");
    }
}

.box-skors {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.box-skors .blue-skors {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 350px;
    flex-direction: column;
    background-color: var(--main-blue);
    color: var(--white);
    border-radius: 12px;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.box-skors .blue-skors h2 {
    font-size: 100px;
}

.box-skors .data-skors {
    width: 100%;
    background-color: var(--soft-grey);
}

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

.box-skors .data-skors .item .data {
    margin: 4px;
    padding: 16px;
    background-color: white;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--main-blue);
}

.box-skors .data-skors .item .data a {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--main-blue);
}

.box-skors .data-skors .item .data:nth-child(1),
.box-skors .data-skors .item .data:nth-child(3) {
    width: 330px;
}

.content-resources .box-student {
    background-color: var(--soft-grey);
    padding: 32px 26px;
    border-radius: 10px;
}

.content-resources .box-student h6 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
}

.content-resources .box-student .list-student .item {
    list-style-type: disc;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 20px;
}

.content-resources .box-student .list-student .item.student {
    margin-left: 52px;
}

.underline-link {
    text-decoration: underline;
}

.vision-mission-ie {
    margin-top: 13.313rem;
    margin-bottom: 12.438rem;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    justify-content: center;
}
.survey-result {
    font-size: 25px;
    margin-bottom: 4rem;
}
/* responsive */

/* dekstop (1920 - 1281) */

@media screen and (max-width: 1760px) {


    .academic-list {
        margin: 160px 0;
    }

    .curriculum-doc {
        margin-top: 2rem;
        /* margin-left: 2rem; */
        padding: 2rem;
    }


    .curriculum-doc .faculty-link {
        margin-bottom: 1rem;
    }


    .mission-ie-tittle {
        margin-bottom: 0.5rem;
        font-weight: 400;
        font-size: 18px;
    }

    .academic-list .box-academic-uni {
        gap: 160px;
    }

    .academic-list .box-academic-uni .academic-part .academic-img {
        width: 900px;
        height: 450px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic {
        width: 100%;
        margin: 32px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic .title {
        font-size: 26px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic .decs {
        font-size: 18px;
        margin: 21px 0;
        line-height: 1.5;
    }

    .academic-list .box-academic-uni .academic-part.left,
    .academic-list .box-academic-uni .academic-part.right {
        gap: 70px;
    }

    .degree-plan {
        width: 100%;
        padding: 96px 100px;
    }

    .box-laboratories h5 {
        margin: 0 100px 32px;
    }

    .prospective-text {
        padding: 0 32px;
    }
}

@media screen and (max-width: 1600px) {
    .home-shape {
        position: relative;
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 350px;
    }

    .home-shape .box-shape {
        max-width: auto;
        width: 100%;
        padding: 64px 30px 32px;
        /* margin-top: 400px; */
    }

    .home-shape .box-shape img {
        position: absolute;
        top: -7%;
        left: 45%;
        transform: translate(-0%, -50%);
    }

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

    .home-shape .box-shape .apply .decs h5 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 16px;
    }

    .home-shape .box-shape .apply .decs p {
        width: 660px;
        font-size: 22px;
        font-weight: 400;
        line-height: 32px;
    }

    .home-shape .box-shape .apply .btn-apply {
        display: flex;
        align-items: center;
        gap: 16px;
        border-radius: 15px;
        color: var(--white);
        padding: 24px 48px;
        background-color: var(--dark-blue);
    }

    .home-shape .box-shape .apply .btn-apply p {
        font-size: 22px;
        font-weight: 700;
    }

    .home-shape .box-shape .apply .btn-apply svg path {
        stroke: var(--white);
    }

    .blue-apply {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--sky-blue);
        padding: 60px 30px;
    }

    .blue-apply .box-apply {
        max-width: auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .blue-apply .box-apply .text-apply {
        font-size: 24px;
        font-weight: 700;
    }

    .blue-apply .box-apply .btn-apply,
    .box-shape .content-shape .btn-apply {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 8px;
        background-color: var(--main-blue);
    }

    .blue-apply .box-apply .btn-apply p,
    .box-shape .content-shape .btn-apply p {
        color: var(--white);
        font-size: 16px;
        font-weight: 700;
    }

    .blue-apply .box-apply .btn-apply svg path,
    .box-shape .content-shape .btn-apply svg path {
        stroke: var(--white);
    }

    .shape-footer {
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .shape-footer .box-shape {
        max-width: auto;
        width: 100%;
        display: flex;
        padding: 0 30px;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        position: relative;
        height: 267px;
    }

    .shape-footer .box-shape img {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 360px;
    }

    .shape-footer .box-shape .content-shape {
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 42px;
    }

    .shape-footer .box-shape .content-shape .text-shape {
        width: 600px;
    }

    .content-shape .text-shape .title {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .content-shape .text-shape .decs {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }

    .more-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .more-info .text-link {
        color: var(--dark-blue);
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    .difference-why h5 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 32px;
    }

    .difference-why .difference-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, auto));
        margin-bottom: 75px;
    }

    .difference-why .difference-grid .difference-path {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        background-color: var(--main-blue);
    }

    .difference-why
        .difference-grid
        .difference-path
        .difference-part
        .part-text {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }

    .difference-grid .difference-path .difference-part .part-text .title {
        font-size: 16px;
        font-weight: 700;
        color: var(--white);
    }

    .difference-path .difference-part .part-text .decs {
        font-size: 14px;
        font-weight: 400;
        color: var(--white);
    }

    .difference-path .difference-part .part-text .title,
    .difference-path .difference-part .part-text .decs {
        width: 320px;
    }

    /* early */

    .difference-path.early .difference-part img {
        width: 100%;
        height: 215px;
        object-fit: cover;
        object-position: top;
    }

    .difference-path.early .difference-part .part-text {
        height: 215px;
    }

    /* middle */

    .difference-why .difference-grid .difference-path.middle .difference-part {
        display: flex;
        flex-direction: column-reverse;
    }

    .difference-path.middle .difference-part img {
        width: 100%;
        height: 215px;
        object-fit: cover;
        object-position: top;
    }

    .difference-path.middle .difference-part .part-text {
        height: 215px;
    }

    /* late */
    .difference-path.late {
        flex-direction: column;
    }

    .difference-path.late .difference-part img {
        width: 100%;
        height: 215px;
        object-fit: cover;
        object-position: top;
    }

    .difference-path.late .difference-part .part-text {
        height: 215px;
    }

    .difference-path.late .difference-part.logo-card img {
        background-color: var(--white);
        object-fit: contain;
        padding: 30px;
    }

    .pathway-content,
    .cetl-content,
    .curriculum-content {
        margin: 160px 32px;
    }

    .pathway-content .box-content,
    .cetl-content .box-content,
    .curriculum-content .box-content {
        max-width: 100%;
        width: 100%;
        min-width: 300px;
        gap: 160px;
    }

    .curriculum-prepare h4 {
        font-size: 38px;
        margin-bottom: 26px;
    }

    .curriculum-prepare .decs {
        font-size: 18px;
        width: 100%;
    }

    .core-university {
        gap: 120px;
    }

    .core-university .box-text .title {
        font-size: 26px;
    }

    .core-university .box-text .decs {
        font-size: 18px;
        margin: 26px 0 38px;
    }

    .core-university .box-text .core-curriculum {
        gap: 21px;
    }

    .core-university .box-text .core-curriculum li {
        gap: 14px;
    }

    .core-university .box-text .core-curriculum li .li-core {
        font-size: 18px;
    }

    .core-university img {
        width: 520px;
        height: 620px;
        object-fit: cover;
    }

    .core-competencies {
        gap: 120px;
    }

    .core-competencies .box-competencies .title {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 26px;
    }

    .core-competencies .box-competencies .decs {
        font-size: 18px;
        width: 100%;
    }

    .core-competencies .choose-competencies {
        gap: 42px;
    }

    .core-competencies .choose-competencies .item-competencies {
        gap: 21px;
        width: 300px;
    }

    .core-competencies .choose-competencies .item-competencies li {
        gap: 14px;
    }

    .core-competencies
        .choose-competencies
        .item-competencies
        li.active
        svg
        g
        rect {
        fill: var(--dark-blue);
    }

    .core-competencies .choose-competencies .item-competencies li svg g rect {
        fill: var(--cool-grey);
    }

    .core-competencies .choose-competencies .item-competencies li .text {
        font-size: 18px;
    }

    .core-competencies .choose-competencies .content-competencies {
        width: 517px;
    }

    .core-competencies .choose-competencies .content-competencies ul {
        display: none;
    }

    .core-competencies .choose-competencies .content-competencies ul.active {
        display: block;
        padding: 26px;
        background-color: var(--soft-grey);
        border-radius: 10px;
    }

    .core-competencies .choose-competencies .content-competencies ul li {
        list-style: decimal;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        margin-left: 16px;
        color: var(--dark-blue);
    }

    .shape-schedule {
        padding: 42px;
    }

    .shape-schedule .box-schedule {
        max-width: auto;
        gap: 32px;
    }

    .shape-schedule .box-schedule .shape-text .title {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .shape-schedule .box-schedule .shape-text .decs {
        font-size: 18px;
    }

    .shape-schedule .box-schedule .shape-btn {
        gap: 14px;
    }

    .shape-schedule .box-schedule .shape-btn button {
        gap: 10px;
        width: 400px;
        padding: 18px;
        border-radius: 10px;
        font-size: 18px;
    }

    .as-overview button {
        gap: 10px;
        width: 400px;
        padding: 18px;
        border-radius: 10px;
        font-size: 18px;
    }

    .box-title button {
        width: 400px;
        padding: 16px 26px;
        font-size: 17px;
        border-radius: 12px;
    }

    .pathway-bridge {
        gap: 110px;
    }

    .pathway-bridge img {
        width: 540px;
        height: 500px;
    }

    .pathway-bridge .bridge-text .title {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .pathway-bridge .bridge-text .box-decs {
        gap: 14px;
    }

    .pathway-bridge .bridge-text .box-decs .decs {
        font-size: 18px;
    }

    .pathway-years .title {
        font-size: 28px;
        font-weight: 700;
    }

    .pathway-years .img-years {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 26px;
    }

    .pathway-years .img-years .years-1 {
        width: auto;
        height: 475px;
        object-fit: contain;
    }

    .pathway-years .img-years .years-3 {
        width: auto;
        height: 475px;
        object-fit: contain;
    }

    .cetl-about .decs {
        width: 100%;
        font-size: 18px;
    }

    .cetl-about .title {
        font-size: 44px;
        width: 450px;
    }

    .cetl-main .title {
        font-size: 28px;
        width: 450px;
    }

    .cetl-main .cetl-decs {
        gap: 14px;
        width: 100%;
    }

    .cetl-main .cetl-decs .decs {
        width: 100%;
        font-size: 18px;
    }

    .cetl-main .cetl-decs .decs-ul li {
        font-size: 18px;
    }

    .cetl-programs h5.title {
        font-size: 28px;
        margin-bottom: 63px;
    }

    .cetl-programs .box-events {
        display: flex;
        gap: 28px;
    }

    .cetl-programs .box-events .cetl-events {
        padding: 30px 40px;
    }

    .cetl-events .title {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .cetl-events .decs {
        font-size: 18px;
    }

    .cetl-shape {
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 125px;
    }

    .cetl-shape .box-shape {
        max-width: 100%;
        width: 100%;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
        padding: 50px 32px;
    }

    .cetl-shape .box-shape .img-person {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 305px;
    }

    .cetl-shape .box-shape .box-text {
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        gap: 50px;
    }

    .cetl-shape .box-shape .box-text .title {
        font-size: 28px;
        width: 650px;
    }

    .btn-website {
        height: 65px;
        border-radius: 10px;
        gap: 10px;
        width: 250px;
        font-size: 18px;
    }

    .btn-website svg {
        width: 26px;
    }

    .btn-website svg path {
        stroke: var(--white);
    }

    .qair-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dynamic-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qair-container .box-content {
        max-width: 100%;
        width: 100%;
        padding: 160px 32px;
        display: flex;
        gap: 24px;
    }

    .dynamic-container .box-content {
        max-width: 100%;
        width: 100%;
        padding: 160px 32px;
        display: flex;
        gap: 24px;
    }

    .qair-list {
        min-width: 300px;
    }

    .dynamic-list {
        min-width: 300px;
    }

    .qair-list li {
        padding: 14px 0;
        font-size: 18px;
    }

    .dynamic-list li {
        padding: 14px 0;
        font-size: 18px;
    }


    .qair-data .data-list {
        gap: 30px;
        font-size: 18px;
    }

    .dynamic-data .data-list {
        gap: 30px;
        font-size: 18px;
    }

    .qair-data .data-list.book-table.active {
        display: flex;
        gap: 100px;
    }

    .qair-data .data-list.book-table .box-table {
        gap: 30px;
    }

    .table-data {
        width: 100%;
        border-collapse: collapse;
        background-color: var(--blue-ht);
        border-radius: 15px 15px 0 0;
    }

    .table-data td {
        padding: 16px 32px;
        font-size: 20px;
    }

    .table-data th {
        padding: 16px 36px;
        text-align: left;
        font-size: 20px;
    }

    .table-data th:first-child {
        width: 320px;
    }

    .button-survey {
        border-radius: 10px;
        height: 72px;
        gap: 12px;
        width: 416px;
    }

    .button-survey .years {
        font-size: 18px;
    }

    .button-survey svg {
        width: 26px;
    }

    .box-survey {
        display: flex;
        gap: 20px;
    }

    .survey {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: flex-start;
        gap: 14px;
    }

    .survey .box-survey {
        width: 500px;
    }

    .survey .box-survey .button-survey {
        width: 100%;
    }

    .survey h5 {
        font-size: 20px;
    }

    .quality-list {
        gap: 30px;
    }

    .quality-list .program-box .text-list {
        font-size: 20px;
    }

    .box-form {
        background-color: var(--bg-form);
        border-radius: 10px;
        margin-top: 14px;
    }

    .box-form form .form-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 36px 40px;
    }

    .box-form form .form-content .box-required {
        display: flex;
        flex-direction: column;
    }

    .box-form form .form-content .box-required label,
    .box-form form .form-content .box-required .text {
        margin-bottom: 16px;
        font-size: 20px;
        font-weight: 500;
        color: var(--black);
    }

    .box-form form .form-content .box-required.box-label,
    .box-form form .form-content .box-required.box-date {
        width: 468px;
    }

    .box-form form .form-content .box-required input {
        border-radius: 6px;
        padding: 14px;
        border: 1.51 solid var(--border-input);
        font-size: 16px;
    }

    .box-form form .form-content .box-required .desc {
        margin-top: 16px;
        font-size: 16px;
    }

    .box-form form .form-content .box-required .box-label {
        gap: 16px;
    }

    .box-form
        form
        .form-content
        .box-required.box-name
        .box-label
        .box-input
        input {
        width: 100%;
    }

    .box-form form .form-content .box-required .content-radio {
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    }

    .form-footer {
        padding: 24px;
        width: 100%;
    }

    .form-footer button {
        padding: 12px 96px;
        font-size: 20px;
    }

    .contact-step {
        padding: 60px 32px;
    }

    .contact-step .box-step .step-take {
        width: 645px;
    }

    .contact-step .box-step .step-take h4 {
        font-size: 28px;
        margin-bottom: 14px;
    }

    .contact-step .box-step .step-take .desc {
        font-size: 18px;
    }

    .contact-step .box-step .step-button {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-step .box-step .step-button a {
        gap: 12px;
        width: 200px;
        height: 65px;
        border-radius: 10px;
        font-size: 18px;
    }

    .contact-step .box-step .step-button a svg {
        width: 28px;
    }

    .content-explore {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
    }

    .content-explore .box-explore {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px 30px 30px 10px;
        overflow: hidden;
        margin: 160px 0;
    }

    .content-explore .box-explore .explore-text {
        margin: 56px 20px 56px 100px;
        width: 500px;
    }

    .content-explore .box-explore .explore-text .title {
        font-size: 28px;
    }

    .content-explore .box-explore .explore-text .desc {
        font-size: 18px;
        margin-bottom: 26px;
    }

    .content-explore .box-explore .explore-text .box-button {
        gap: 18px;
        margin-bottom: 40px;
    }

    .content-explore .box-explore .explore-text .box-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 400px;
        height: 74px;
        border-radius: 13px;
        font-size: 18px;
        font-weight: 700;
    }

    .content-explore .box-explore .explore-text .box-button .virtual-button svg,
    .content-explore .box-explore .explore-text .box-button .onsite-button svg {
        width: 24px;
    }

    .info-explore {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .info-explore .data-box {
        display: flex;
        gap: 14px;
        align-items: center;
    }

    .info-explore .data-box .text {
        font-size: 16px;
        font-weight: 400;
    }

    .content-explore .box-explore .explore-img img {
        /* height: 100%; */
        width: 600px;
        object-fit: cover;
    }

    .admission-content .box-content {
        width: 100%;
        padding: 160px 32px 0;
        gap: 160px;
    }

    .admission-content .box-content .box-apply {
        gap: 52px;
    }

    .admission-content .box-content .box-apply h6 {
        font-size: 28px;
    }

    .admission-content .box-content .box-apply .list-apply {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        gap: 30px;
    }

    .admission-content .box-content .box-apply .list-apply li {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 18px;
    }

    .admission-content .box-content .box-apply .list-apply li img {
        width: 80px;
    }

    .admission-content .box-content .box-apply .list-apply li .decs {
        font-size: 20px;
    }

    .read-more {
        gap: 10px;
        width: 220px;
        height: 60px;
        border-radius: 10px;
    }

    .read-more p {
        font-size: 20px;
    }

    .read-more svg {
        width: 28px;
    }

    .box-requirements {
        gap: 50px;
    }

    .box-requirements h6 {
        font-size: 28px;
    }

    .box-requirements .content-requirements {
        gap: 85px;
    }

    .box-requirements .content-requirements li {
        gap: 100px;
    }

    .box-requirements .content-requirements li:nth-child(2) {
        flex-direction: row-reverse;
    }

    .box-requirements .content-requirements li .box-text .decs {
        width: 100%;
    }

    .box-requirements .content-requirements li img {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }

    .box-requirements .content-requirements li .box-text .decs {
        font-size: 20px;
        padding: 20px 0;
    }

    .boxx-more {
        font-size: 20px;
    }

    .boxx-more svg {
        width: 28px;
    }

    .tab-univ li,
    .tab-req li {
        padding: 24px;
        font-size: 20px;
    }

    .content-univ .box-content,
    .content-req .box-content {
        width: 100%;
        margin-top: 160px;
    }

    .content-univ .box-content .content-tab .content-main,
    .content-req .box-content .content-tab .content-main {
        padding: 0 32px;
    }

    .content-tab .content-main .text-apply {
        gap: 100px;
    }

    .text-apply li h5 {
        font-size: 28px;
    }

    .text-apply li {
        gap: 28px;
    }

    .text-apply li h5 span {
        padding-right: 60px;
    }

    .text-apply li .decs {
        padding-left: 100px;
        font-size: 20px;
    }

    .text-apply li .box-practice-test,
    .text-apply li .box-placement-test {
        padding: 35px 30px;
    }

    .text-apply li .box-practice-test .box-click {
        gap: 32px;
    }

    .text-apply li .box-practice-test .box-click .box-img {
        padding: 36px 36px 39px 50px;
    }

    .text-apply li .box-practice-test .box-click .box-img img {
        width: 80px;
        height: 80px;
    }

    .text-apply li .box-practice-test .box-click .title {
        max-width: 711px;
        width: 100%;
        min-width: 200px;
        font-size: 24px;
    }

    .text-apply li .box-practice-test .box-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .text-apply li .box-practice-test .box-button a {
        gap: 12px;
        width: 360px;
        height: 65px;
        border-radius: 12px;
        font-size: 20px;
    }

    .text-apply li .box-practice-test .box-button .btn-blue svg {
        width: 24px;
    }

    .text-apply li .box-placement-test .btn {
        font-size: 24px;
    }

    .text-apply li .box-placement-test .btn-center {
        gap: 16px;
        width: 250px;
        height: 65px;
        border-radius: 12px;
        font-size: 20px;
    }

    .text-apply li .box-placement-test .btn-center svg {
        width: 28px;
    }

    .content-univ .box-content .content-tab:nth-child(2) {
        margin-bottom: 160px;
    }

    .content-univ .box-content .content-tab .content-main {
        gap: 160px;
    }

    .tuition h2 {
        font-size: 42px;
        margin-bottom: 28px;
    }

    .tuition .decs-tuition {
        font-size: 18px;
        width: 100%;
    }

    .tuition .box-img {
        padding-top: 60px;
    }

    .tuition .box-img img {
        width: 620px;
        height: 900px;
    }

    .tuition .box-cost {
        gap: 28px;
    }

    .tuition .box-cost .decs {
        font-size: 18px;
    }

    .tuition .table-cst {
        margin-top: 14px;
        width: 720px;
    }

    .tuition .table-cst th {
        padding: 15px 48px;
        font-size: 18px;
    }

    .tuition .table-cst th:first-child {
        width: 590px;
    }

    .tuition .table-cst td {
        padding: 15px 48px;
        font-size: 18px;
    }

    .tuition .box-cost .box-decs-tui .decs-tui {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .tuition.award .decs {
        margin-bottom: 28px;
        font-size: 18px;
    }

    .tuition.award img {
        margin-top: 37px;
        height: 600px;
        width: 100%;
        object-fit: cover;
    }

    .tuition.requirements h6 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .tuition.requirements .decs {
        font-size: 18px;
    }

    .tuition.requirements .requirements-tab {
        margin-top: 65px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item {
        width: 320px;
        font-size: 18px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item:nth-child(1) {
        padding-bottom: 8px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item:nth-child(2) {
        padding-top: 8px;
    }

    .tuition.requirements .requirements-tab .content-criteria .item .box-text {
        margin-top: 38px;
    }

    .tuition.requirements
        .requirements-tab
        .content-criteria
        .item
        .box-text
        ul
        li {
        margin-left: 24px;
        font-size: 18px;
    }

    .tuition .box-bursary {
        gap: 28px;
    }

    .tuition .box-bursary .decs {
        font-size: 18px;
    }

    .tuition .box-bursary .tab-bursary li {
        font-size: 18px;
        line-height: 1.5;
        margin-left: 32px;
    }

    .tuition .box-bursary .tab-bursary .number li {
        font-size: 18px;
        margin-left: 20px;
    }

    .tuition .box-bursary .box-number .text {
        font-size: 18px;
    }

    .tuition .box-bursary .box-number .number li {
        font-size: 18px;
        margin-left: 26px;
    }

    .testing h2 {
        font-size: 42px;
        margin-bottom: 28px;
    }

    .testing .decs-test {
        font-size: 18px;
        width: 100%;
    }

    .testing img {
        margin-top: 60px;
        max-width: 1512px;
        width: 100%;
        min-width: 230px;
        height: 100%;
    }

    .testing h6 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .testing .decs {
        font-size: 18px;
    }

    .testing .box-test {
        margin-top: 60px;
    }

    .testing .box-test .tab-test li {
        width: 340px;
        font-size: 18px;
        padding: 8px 0;
    }

    .testing .box-test .content-test .item {
        gap: 28px;
    }

    .table-test {
        width: 100%;
        max-width: 1067px;
        min-width: 611px;
    }

    .table-test th {
        padding: 12px;
        font-size: 18px;
    }

    .table-test th:first-child {
        border-radius: 14px 0 0;
        width: 180px;
    }

    .table-test th:nth-child(2) {
        width: 200px;
    }

    .table-test th:last-child {
        border-radius: 0 14px 0 0;
    }

    .table-test tbody td {
        padding: 12px;
        font-size: 16px;
    }

    .table-test tfoot td {
        padding: 12px 0;
        font-size: 16px;
    }

    .list-main li {
        margin-left: 20px;
        font-size: 18px;
    }

    .box-settle h2 {
        font-size: 45px;
    }

    .box-settle .box-decs {
        gap: 28px;
        padding: 28px 0 65px;
        width: 100%;
    }

    .box-settle .box-decs p {
        font-size: 18px;
    }

    .box-settle .img-settle {
        max-width: 1512px;
        min-width: 200px;
        height: 100%;
        border-radius: 10px;
    }

    .box-admission h6 {
        font-size: 28px;
        margin-bottom: 28px;
        margin-top: 160px;
    }

    .box-admission .decs {
        font-size: 18px;
        width: 1003px;
    }

    .box-admission .requirements-tab {
        margin-top: 60px;
        gap: 24px;
    }

    .box-admission .requirements-tab .tab-criteria .item {
        width: 300px;
        font-size: 18px;
    }

    .box-admission .requirements-tab .tab-criteria .item:nth-child(1) {
        padding-bottom: 8px;
    }

    .box-admission .requirements-tab .tab-criteria .item:nth-child(2) {
        padding-top: 8px;
    }

    .box-admission .requirements-tab .content-criteria .item .decs {
        margin-bottom: 28px;
    }

    .box-admission .requirements-tab .content-criteria .item .box-text ul li {
        margin-left: 24px;
        font-size: 18px;
    }

    .inter-img {
        max-width: 1512px;
        width: 100%;
        min-width: 200px;
    }

    .list-inter {
        gap: 80px;
        margin-top: 65px;
    }

    .list-inter .inter-box {
        gap: 28px;
    }

    .list-inter .inter-box h6 {
        width: 372px;
        font-size: 28px;
    }

    .list-inter .inter-box .box-decs {
        width: 100%;
        gap: 28px;
    }

    .list-inter .inter-box .box-decs p {
        font-size: 18px;
    }

    .voice-sampoerna {
        padding: 160px 32px 0;
    }

    .voice-sampoerna .box-voice {
        width: 100%;
    }

    .voice-sampoerna .box-voice h3 {
        font-size: 28px;
    }

    .voice-sampoerna .box-voice .list-voice {
        gap: 45px;
        padding: 30px 0 40px;
    }

    .voice-sampoerna .box-voice .list-voice li {
        gap: 14px;
    }

    .voice-sampoerna .box-voice .list-voice li svg {
        width: 20px;
    }

    .voice-sampoerna .box-voice .list-voice li .text {
        font-size: 18px;
    }

    .content-voice li.active {
        width: 100%;
        gap: 16px;
    }

    .content-voice li .box-voices .img-voice img {
        width: 200px;
        height: 300px;
        object-fit: cover;
        padding-right: 16px;
    }

    .content-voice li .box-voices .text-voice {
        padding-top: 20px;
    }

    .content-voice li .box-voices .position-voice {
        position: relative;
        top: -30px;
        left: 10px;
    }

    .content-voice li .box-voices .position-voice .title {
        font-size: 18px;
    }

    .content-voice li .box-voices .position-voice .desc {
        margin-top: 12px;
        font-size: 14px;
    }

    .content-voice li .box-voices .position-voice .name {
        margin-top: 18px;
        font-size: 20px;
    }

    .content-voice li .box-voices .position-voice .job {
        margin-top: 6px;
        font-size: 14px;
    }

    .content-voice li:nth-child(1) .box-voice .position-voice .title,
    .content-voice li:nth-child(1) .box-voice .position-voice .desc {
        max-width: 391px;
        width: 100%;
        min-width: 160px;
        padding-right: 16px;
    }

    .content-voice
        li:nth-child(2)
        .box-voice:nth-child(1)
        .position-voice
        .title,
    .content-voice
        li:nth-child(2)
        .box-voice:nth-child(1)
        .position-voice
        .desc {
        max-width: 391px;
        width: 100%;
        min-width: 160px;
        padding-right: 16px;
    }

    .content-voice
        li:nth-child(2)
        .box-voice:nth-child(2)
        .position-voice
        .title,
    .content-voice
        li:nth-child(2)
        .box-voice:nth-child(2)
        .position-voice
        .desc {
        max-width: 391px;
        width: 100%;
        min-width: 160px;
        padding-right: 16px;
    }

    .content-voice
        li:nth-child(3)
        .box-voice:nth-child(2)
        .position-voice
        .title,
    .content-voice
        li:nth-child(3)
        .box-voice:nth-child(2)
        .position-voice
        .desc {
        max-width: 391px;
        width: 100%;
        min-width: 160px;
        padding-right: 16px;
    }

    .content-voice li:nth-child(4) .box-voice .position-voice .desc {
        max-width: 391px;
        width: 100%;
        min-width: 160px;
    }

    .about-content .box-content {
        width: 100%;
        padding: 160px 32px 0;
        gap: 160px;
    }

    .about-content .box-content .about-text {
        margin-top: 70px;
        gap: 28px;
    }

    .about-content .box-content .about-text h3 {
        font-size: 45px;
    }

    .about-content .box-content .about-text .decs {
        font-size: 18px;
        width: 1260px;
    }

    .boxx-learn {
        gap: 8px;
        font-size: 18px;
        color: var(--main-blue);
        font-weight: 700;
    }

    .boxx-learn svg {
        width: 28px;
    }

    .accreditation-sampoerna {
        gap: 28px;
    }

    .accreditation-sampoerna h6 {
        font-size: 28px;
    }

    .accreditation-sampoerna .desc {
        font-size: 18px;
        width: 1260px;
    }

    .alumni-sampoerna {
        gap: 28px;
    }

    .alumni-sampoerna h4 {
        font-size: 45px;
    }

    .alumni-sampoerna .desc {
        font-size: 18px;
        width: 1260px;
    }

    .alumni-sampoerna iframe {
        width: 100%;
        height: 600px;
    }

    .img-about {
        gap: 28px;
    }

    .img-about h6 {
        font-size: 28px;
    }

    .img-about img {
        width: 100%;
        height: 100%;
    }

    .as-content {
        padding: 160px 32px 0 32px;
    }

    .as-content .box-content {
        width: 100%;
        gap: 100px;
    }

    .as-overview h4 {
        font-size: 45px;
    }

    .as-overview .decs {
        font-size: 18px;
        margin: 28px 0 60px;
    }

    .as-overview .container-overview {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .as-overview .container-overview li {
        background-color: var(--main-blue);
        padding: 20px 24px;
        gap: 18px;
        border-radius: 10px;
    }

    .as-overview .container-overview li img {
        width: 115px;
    }

    .as-overview .container-overview li h6 {
        font-size: 20px;
        text-align: center;
    }

    .governance-content {
        padding: 160px 32px;
    }

    .governance-content .box-content {
        width: 100%;
        gap: 160px;
    }

    .governanve-overview h4 {
        font-size: 45px;
    }

    .governanve-overview .decs {
        font-size: 18px;
        margin: 28px 0 60px;
    }

    .governanve-overview .container-overview {
        display: grid;
        justify-content: space-between;
        gap: 32px;
        grid-template-columns: repeat(auto-fit, minmax(285px, auto));
    }

    .governanve-overview .container-overview li {
        background-color: var(--main-blue);
        padding: 20px 24px;
        gap: 18px;
        border-radius: 10px;
    }

    .governanve-overview .container-overview li img {
        width: 85px;
        height: 96px;
    }

    .governanve-overview .container-overview li h6 {
        font-size: 20px;
        text-align: center;
    }

    .governanve-overview .container-overview li p {
        font-size: 16px;
        text-align: center;
    }

    .governance-content {
        padding: 75px 32px;
    }

    .governance-content .box-content {
        gap: 75px;
    }

    .governanve-overview h4 {
        font-size: 28px;
    }

    .governanve-overview .decs {
        font-size: 16px;
        margin: 18px 0 35px;
    }

    .governanve-overview .container-overview {
        gap: 18px;
        grid-template-columns: repeat(auto-fit, minmax(152px, auto));
    }

    .governanve-overview .container-overview li {
        padding: 14px 10px;
        gap: 10px;
        border-radius: 10px;
    }

    .governanve-overview .container-overview li img {
        width: 48px;
        height: 56px;
    }

    .governanve-overview .container-overview li h6 {
        font-size: 16px;
    }

    .governanve-overview .container-overview li p {
        font-size: 14px;
    }

    .governance-vision {
        padding: 45px 80px;
        border-radius: 16px;
        height: 400px;
        overflow: hidden;
    }

    .governance-vision .tab-ul {
        display: flex;
        gap: 20px;
        margin-bottom: 56px;
    }

    .governance-vision .tab-ul .tab-li {
        width: 128px;
        height: 45px;
        font-size: 18px;
        border-radius: 10px;
    }

    .governance-vision .content-ul .content-li h5 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .governance-vision .content-ul .content-li .decs {
        font-size: 18px;
        width: 693px;
    }

    .governance-vision .content-ul .content-li .decs.mision {
        width: 909px;
    }

    .governance-vision .content-ul .page-img {
        position: absolute;
        right: 0px;
    }

    .governance-vision .content-ul .content-li .page-img::after {
        width: 480px;
        height: 480px;
        top: 120px;
        left: 70px;
    }

    .governance-vision .content-ul .content-li .page-img img {
        position: relative;
        z-index: 2;
        left: 100px;
        top: 30px;
    }

    .governanve-greeting h6 {
        margin-bottom: 48px;
        font-size: 28px;
    }

    .governanve-greeting .greeting-text {
        gap: 75px;
    }

    .governanve-greeting .greeting-text img {
        width: 420px;
        height: 480px;
        object-fit: cover;
    }

    .governanve-greeting .greeting-text .box-qoutes .text-qoutes {
        font-size: 28px;
    }

    .governanve-greeting .greeting-text .box-qoutes .name-qoutes {
        font-size: 20px;
        padding: 28px 0 5px;
    }

    .governanve-greeting .greeting-text .box-qoutes .degree {
        font-size: 14px;
    }

    .governance-chart ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        margin-bottom: 75px;
    }

    .governance-chart ul li {
        width: 300px;
    }

    .governance-chart ul li img {
        margin-bottom: 26px;
        width: 300px;
        height: 320px;
        object-fit: cover;
    }

    .governance-chart ul li .name {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .governance-chart ul li .position {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .governance-chart ul li .text {
        font-size: 14px;
    }

    .governance-chart .link-chart {
        gap: 10px;
        width: 100%;
    }

    .governance-chart .box-chart {
        gap: 8px;
        font-size: 18px;
    }

    .governance-chart .box-chart svg {
        width: 28px;
    }

    .accreditation-content {
        margin-top: 160px;
        padding: 0 32px;
    }

    .accreditation-text {
        width: 100%;
        gap: 28px;
    }

    .accreditation-text h3 {
        font-size: 42px;
    }

    .accreditation-text .desc {
        width: 1260px;
        font-size: 18px;
    }

    .accreditation-text .text-articulation h6 {
        font-size: 18px;
    }

    .list-faculty .box-faculty {
        max-width: 1520px;
        width: 100%;
        padding: 160px 32px;
        display: flex;
        gap: 90px;
    }

    .list-faculty .box-faculty .item img {
        width: 540px;
        max-width: auto;
        min-width: auto;
        height: 360px;
        object-fit: cover;
    }

    .list-faculty .box-faculty .item .box-text {
        padding: 0px 30px 0px 60px;
    }

    .list-faculty .box-faculty .item .box-text h2 {
        font-size: 44px;
    }

    .list-faculty .box-faculty .item .box-text .main-major {
        padding: 18px 0 26px;
        gap: 11px;
    }

    .list-faculty .box-faculty .item .box-text .main-major .box-major .text {
        font-size: 16px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .list-faculty .box-faculty .item .box-text .more-info {
        gap: 10px;
        font-size: 18px;
    }

    .list-faculty .box-faculty .item .box-text .more-info svg {
        width: 28px;
    }

    .list-non-degree .box-non-degree {
        max-width: 1520px;
        width: 100%;
        padding: 160px 32px;
        display: flex;
        gap: 90px;
    }

    .list-non-degree .box-non-degree .item img {
        width: 540px;
        max-width: auto;
        min-width: auto;
        height: 360px;
        object-fit: cover;
    }

    .list-non-degree .box-non-degree .item .box-text {
        padding: 0px 30px 0px 60px;
    }

    .list-non-degree .box-non-degree .item .box-text h2 {
        font-size: 44px;
    }

    .list-non-degree .box-non-degree .item .box-text .main-major {
        padding: 18px 0 26px;
        gap: 11px;
    }

    .list-non-degree .box-non-degree .item .box-text .main-major .box-major .text {
        font-size: 16px;
        padding-right: 0px;
        padding-left: 10px;
    }

    .list-non-degree .box-non-degree .item .box-text .more-info {
        gap: 10px;
        font-size: 18px;
    }

    .list-non-degree .box-non-degree .item .box-text .more-info svg {
        width: 28px;
    }

    .tab-fob li,
    .tab-fet li,
    .tab-foe li,
    .tab-fas li,
    .tab-ss li,
    .tab-stuaff li {
        font-size: 20px;
        height: 80px;
    }

    .content-fob .box-content .content-tab .display,
    .content-fet .box-content .content-tab .display,
    .content-foe .box-content .content-tab .display,
    .content-fas .box-content .content-tab .display,
    .content-ss .box-content .content-tab .display,
    .content-stuaff .box-content .content-tab .display {
        max-width: 100%;
        margin: 160px auto 0;
        gap: 160px;
        padding: 0 32px;
    }

    .faculty-overview h2 {
        font-size: 42px;
        margin-bottom: 28px;
    }

    .faculty-overview .decs {
        font-size: 20px;
    }

    .faculty-program {
        gap: 24px;
    }

    .faculty-program .question-program {
        width: 100%;
        max-width: 486px;
        min-width: 386px;
    }

    .faculty-program .question-program h5 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .faculty-program .question-program .decs {
        font-size: 18px;
    }

    .faculty-program .question-program .blue-title {
        font-size: 24px;
        margin-bottom: 28px;
    }

    .faculty-program .tab-program {
        display: flex;
        gap: 65px;
    }

    .faculty-program .tab-program .list-program {
        gap: 20px;
    }

    .faculty-program .tab-program .list-program li {
        display: grid;
        grid-template-columns: 14px 250px;
        gap: 14px;
    }

    .faculty-program .tab-program .list-program li svg {
        width: 28px;
    }

    .faculty-program .tab-program .list-program li .decs {
        font-size: 18px;
    }

    .faculty-program .tab-program .content-program li {
        max-width: 517px;
        width: 100%;
        min-width: 368px;
        padding: 28px 42px;
        border-radius: 10px;
        font-size: 14px;
    }

    .box-academics {
        margin: 160px 0;
        padding: 70px 160px;
        gap: 26px;
    }

    .box-academics .position-staff {
        width: 260px;
    }

    .box-academics .position-staff li {
        font-size: 18px;
        width: 260px;
        margin: 0 0 10px;
    }

    .box-academics .position-staff li:last-child {
        padding-top: 10px;
    }

    .box-academics .academic-staff h5 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .box-academics .academic-staff li .box-staff {
        gap: 22px;
    }

    .box-academics .academic-staff li .box-staff .item {
        width: 260px;
    }

    .box-staff .item img {
        width: 260px;
        height: 260px;
        object-fit: cover;
        margin-bottom: 28px;
    }

    .box-staff .item .name {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .box-staff .item .text-blue {
        font-size: 16px;
    }

    .box-staff .item .major {
        margin-top: 24px;
        font-size: 14px;
    }

    .box-alumni h5 {
        margin-bottom: 50px;
        font-size: 28px;
    }

    .box-alumni .alumni {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        gap: 24px;
        justify-content: space-between;
    }

    .box-alumni .alumni img {
        width: 300px;
    }

    .box-graduates h5 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .box-graduates .decs {
        font-size: 18px;
    }

    .box-graduates .box-table {
        margin-top: 65px;
        gap: 16px;
        margin-bottom: 160px;
    }

    .box-graduates .box-table img {
        width: 100%;
        max-width: 439xp;
        min-width: 200px;
        object-fit: contain;
    }

    .box-graduates .list-graduates,
    .box-graduates.foe {
        margin-bottom: 160px;
    }

    .faculty-info {
        padding: 100px 32px 160px;
        display: flex;
        align-items: left;
        gap: 28px;
        flex-wrap: wrap;
    }

    .faculty-info .box-info {
        width: 420px;
        border-radius: 10px;
        height: 240px;
    }

    .faculty-info .box-info .box-text {
        margin-left: 24px;
    }

    .faculty-info .box-info .box-text h5 {
        font-size: 28px;
        margin-bottom: 9px;
    }

    .faculty-info .box-info .box-text .more-info {
        font-size: 24px;
    }

    .faculty-info .box-info .box-text .more-info svg {
        width: 28px;
    }

    .faculty-info .box-info .box-img {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .faculty-info.bg {
        margin: 100px 0 0px;
    }

    .faculty-info .box-info .box-img::before {
        width: 280px;
        height: 500px;
        top: -90px;
        right: -110px;
    }

    .faculty-info .box-info .box-img img {
        position: absolute;
        right: 0px;
        bottom: 0px;
    }

    .home-experience.faculty {
        padding: 160px 0 0;
    }

    .home-experience.faculty .box-experience .box-place {
        position: relative;
        bottom: -6px;
    }

    .home-experience .box-experience .box-place a .svg-360 {
        width: 95px;
    }

    .faculty-qoutes img {
        height: 205px;
        border-radius: 10px;
    }

    .faculty-qoutes .qoutes {
        padding: 0 48px;
        font-size: 32px;
    }

    .faculty-concentrations h5 {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .faculty-concentrations .box-concentrations {
        gap: 24px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations img {
        width: 90px;
        height: 90px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations,
    .faculty-concentrations .box-concentrations .additional-concentrations {
        max-width: 486px;
        width: 100%;
        min-width: 200px;
        height: 100%;
    }

    .faculty-concentrations .box-concentrations .num-concentrations h6 {
        font-size: 18px;
        margin: 18px 0 8px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations .decs {
        font-size: 16px;
    }

    .faculty-concentrations .box-concentrations .additional-concentrations {
        padding: 45px 50px 32px;
        border-radius: 26px;
    }

    .faculty-concentrations
        .box-concentrations
        .additional-concentrations
        .list-additional {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .faculty-concentrations
        .box-concentrations
        .additional-concentrations
        .list-additional
        li {
        margin-left: 18px;
    }

    .faculty-concentrations .box-concentrations .additional-concentrations h5 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .faculty-experiential h5 {
        font-size: 28px;
        margin-bottom: 19px;
    }

    .faculty-experiential .decs {
        width: 1262px;
        font-size: 18px;
    }

    .box-graduates .list-graduates li {
        margin-left: 28px;
        font-size: 18px;
    }

    .box-graduates .decs {
        font-size: 18px;
    }

    .box-career-pathways {
        gap: 26px;
    }

    .box-career-pathways .career-pathway-img {
        width: 720px;
        height: 260px;
        object-fit: cover;
    }

    .box-career-pathways .box-ceklis {
        grid-template-columns: repeat(2, minmax(200px, auto));
        gap: 20px;
    }

    .box-career-pathways .box-ceklis li {
        gap: 14px;
        font-size: 18px;
    }

    .box-career-pathways .box-ceklis li img {
        width: 28px;
    }

    .faculty-career-pathways h5 {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .degree-plan {
        padding: 96px 32px;
        width: 100%;
        margin-top: 160px;
    }

    .degree-plan img {
        position: absolute;
        bottom: 0px;
    }

    .degree-plan .box-degree {
        gap: 280px;
    }

    .degree-plan .box-degree h5 {
        font-size: 28px;
    }

    .degree-plan .box-degree .box-consultation {
        gap: 10px;
        padding: 21px 44px;
        border-radius: 14px;
    }

    .degree-plan .box-degree .box-consultation .teks {
        font-size: 18px;
    }

    .degree-plan .box-degree .box-consultation svg {
        width: 28px;
    }

    .graduate-profile h5 {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .table-graduates th {
        font-size: 18px;
        padding: 10px 16px;
    }

    .table-graduates td {
        padding: 10px 6px;
        font-size: 18px;
    }

    .faculty-stories {
        margin-bottom: 160px;
    }

    .faculty-stories h5 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .faculty-stories .decs {
        font-size: 18px;
    }

    .faculty-info .box-info .img-lop img {
        width: 150px;
        height: 100%;
        object-fit: cover;
    }

    .faculty-link {
        margin-bottom: 160px;
    }

    .faculty-link h6 {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .faculty-link .box-link .link-visit {
        max-width: 487px;
        width: 100%;
        min-width: 200px;
        border-radius: 10px;
        padding: 55px 32px;
        gap: 24px;
        height: 212px;
    }

    .faculty-link .box-link .link-visit .title {
        font-size: 20px;
    }

    .faculty-link .box-link .link-visit .open-link {
        width: 280px;
        padding: 18px 0;
        gap: 12px;
        border-radius: 12px;
        font-size: 18px;
    }

    .faculty-link .box-link .link-visit .open-link svg {
        width: 28px;
    }

    .faculty-link .box-link {
        gap: 20px;
    }

    .faculty-career-pathways .decs {
        margin-bottom: 55px;
        font-size: 18px;
    }

    .faculty-overview .box-decs {
        gap: 16px;
    }

    .faculty-overview .box-decs .list-decs li {
        margin-left: 18px;
        font-size: 18px;
    }

    .faculty-competencies h5 {
        font-size: 28px;
        margin-bottom: 55px;
    }

    .faculty-competencies .box-competencies {
        gap: 10px;
    }

    .faculty-competencies .box-competencies .item {
        gap: 10px;
        padding: 12px 30px;
        font-size: 16px;
    }
    .faculty-competencies .box-competencies .item svg {
        width: 28px;
    }
    .governance-vision .content-ul .content-li .page-text .list-mission li {
        font-size: 16px;
        margin-left: 18px;
    }

    .program-faculty {
        gap: 120px;
        margin-bottom: 160px;
    }

    .program-faculty .box-program {
        display: flex;
        gap: 40px;
    }

    .program-faculty .box-program h5 {
        max-width: 342px;
        width: 100%;
        min-width: 200px;
        font-size: 32px;
    }

    .program-faculty .box-program .box-list li {
        font-size: 18px;
    }

    .box-laboratories h5 {
        margin: 0 32px;
        font-size: 28px;
        margin-bottom: 47px;
    }

    .box-laboratories img {
        width: 100%;
        height: 404px;
        object-fit: cover;
    }

    .faculty-bachelor h5 {
        font-size: 28px;
        margin-bottom: 48px;
    }

    .faculty-bachelor .box-bachelor {
        padding: 30px 50px 16px;
        border-radius: 10px;
    }

    .faculty-bachelor .box-bachelor h6 {
        font-size: 18px;
        margin-bottom: 22px;
    }

    .faculty-bachelor .box-bachelor .box-decs {
        gap: 18px;
    }
    .faculty-bachelor .box-bachelor .box-decs .decs {
        font-size: 18px;
    }

    .shape-schedule.foe-schedule {
        margin-top: 160px;
    }

    .campus-life-content {
        gap: 160px;
    }

    .box-student-affairs {
        margin-top: 160px;
    }

    .box-student-affairs h6,
    .box-government-clubs h6,
    .box-inspiring-learning h6 {
        font-size: 28px;
    }

    .box-student-affairs img {
        max-width: 1520px;
        width: 100%;
        min-width: 200px;
        height: 400px;
        margin-top: 55px;
        margin-bottom: 38px;
    }

    .link-button {
        gap: 10px;
        font-size: 18px;
        padding: 18px 44px;
        border-radius: 10px;
    }

    .link-button svg {
        width: 28px;
    }

    .box-government-clubs {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
    }

    .box-government-clubs .decs {
        max-width: 1260px;
        width: 100%;
        min-width: 200px;
        margin-top: 35px;
        margin-bottom: 35px;
        font-size: 18px;
    }

    .box-government-clubs .box-clubs-img .slideshow {
        gap: 24px;
        max-width: 98.7vw;
        margin-bottom: 32px;
        position: relative;
    }

    .box-government-clubs .box-clubs-img img {
        width: 640px;
        height: 380px;
    }

    .box-government-clubs .box-clubs-img img:nth-child(2) {
        width: 800px;
        height: 480px;
        object-fit: cover;
    }

    .box-inspiring-learning {
        margin-bottom: 160px;
    }

    .box-inspiring-learning img {
        margin-top: 38px;
        margin-bottom: 28px;
        height: 570px;
        width: 100%;
        object-fit: cover;
    }

    .student-affairs-content {
        margin-top: 160px;
        gap: 160px;
        padding: 0 32px;
    }

    .box-campus-orientation,
    .box-comprehensive {
        gap: 65px;
    }

    .box-campus-orientation .box-text,
    .box-comprehensive .box-text {
        gap: 28px;
    }

    .box-campus-orientation .box-text h3 {
        font-size: 42px;
    }

    .box-campus-orientation .box-text .decs {
        font-size: 18px;
        width: 1260px;
    }

    .box-campus-orientation img {
        width: 100%;
        height: 100%;
    }

    .box-comprehensive .box-text h5 {
        font-size: 28px;
    }

    .box-comprehensive .box-text .decs {
        font-size: 18px;
        width: 100%;
    }

    .box-list-comprehensive .list-comprehensive .item {
        width: 310px;
        font-size: 18px;
        padding: 8px 0;
    }

    .content-comprehensive .item {
        font-size: 18px;
        gap: 28px;
    }

    .voice-sampoerna.student {
        margin-bottom: 160px;
    }

    .student-government-content {
        gap: 110px;
        margin-top: 160px;
        padding: 0 32px;
    }

    .student-government-content .box-img img {
        width: 100%;
        height: 100%;
    }

    .student-government-content .box-overview-student {
        width: 100%;
        gap: 65px;
    }

    .student-government-content .box-overview-student .box-decs {
        gap: 28px;
    }

    .student-government-content .box-overview-student .box-decs h3 {
        font-size: 42px;
    }

    .student-government-content .box-overview-student .box-decs .decs {
        font-size: 18px;
        width: 1260px;
    }

    .student-government-content .box-overview-student .icon-club {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        gap: 28px;
    }

    .student-government-content .box-overview-student .icon-club .item {
        gap: 0px;
        width: 300px;
        border-radius: 10px;
    }

    .student-government-content .box-overview-student .icon-club .item img {
        width: 90px;
        height: 90px;
    }

    .student-government-content .box-overview-student .icon-club .item .text {
        /* padding: 18px 0 8px; */
        font-size: 18px;
    }

    .btn-see-more {
        gap: 6px;
        font-size: 18px;
    }

    .btn-see-more svg {
        width: 28px;
    }

    .content-club {
        margin-top: 160px;
        gap: 160px;
    }

    .content-club .item-club {
        padding: 80px 32px;
        gap: 24px;
    }

    .content-club .item-club .box-img {
        width: 616px;
        height: 300px;
    }

    .content-club .item-club.right {
        padding: 42px 28px;
    }

    .content-club .item-club .box-text {
        max-width: 745px;
        min-width: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .content-club .item-club .box-text .title {
        gap: 28px;
        font-size: 28px;
    }

    .content-club .item-club .box-text .title img {
        width: 35px;
        height: 35px;
    }

    .content-club .item-club .box-text .decs {
        font-size: 18px;
    }

    .content-club .item-club .box-text .list-student-club .item {
        font-size: 18px;
        margin-left: 24px;
    }

    .box-event-club {
        padding: 160px 32px;
        gap: 28px;
    }

    .box-event-club h6 {
        font-size: 28px;
        max-width: 1040px;
        min-width: 200px;
        width: 100%;
        line-height: 1.5;
    }

    .box-event-club .list-activities-club li {
        font-size: 18px;
        margin-left: 16px;
        margin-bottom: 8px;
    }

    .spac-content,
    .safety-environment-content,
    .it-departement-content,
    .academic-registry-content,
    .library-content,
    .facilities-content,
    .student-rights-content {
        gap: 160px;
    }

    .content-explanation {
        margin-top: 160px;
    }

    .content-explanation,
    .content-department {
        width: 100%;
        padding: 0 32px;
        gap: 28px;
    }

    .content-explanation h3,
    .content-department h3 {
        font-size: 42px;
    }

    .content-explanation .decs,
    .prospective-text .decs {
        max-width: 1260px;
        width: 100%;
        min-width: 200px;
    }

    .content-explanation .decs,
    .prospective-text .decs,
    .content-department .decs {
        font-size: 18px;
    }

    .content-explanation .decs,
    .prospective-text .decs,
    .content-department .decs {
        font-size: 18px;
    }

    .prospective-text,
    .grading-text {
        margin-bottom: 160px;
    }

    .prospective-text,
    .grading-text,
    .content-resources {
        max-width: 1520px;
        width: 100%;
        min-width: 200px;
        gap: 28px;
    }

    .prospective-text h5,
    .grading-text h5,
    .content-resources h5 {
        font-size: 28px;
    }

    .tab-prospective .item,
    .tab-prospective-safety .item,
    .tab-prospective-it .item,
    .tab-proquest .item {
        width: 300px;
        padding: 8px 0;
        font-size: 18px;
    }

    .content-prospective .item,
    .content-prospective-safety .item,
    .content-prospective-it .item,
    .box-proquest .item {
        gap: 28px;
    }

    .principles {
        font-size: 18px;
    }

    .principles li {
        margin-left: 28px;
    }

    .content-prospective-it .item .information-system {
        font-size: 18px;
    }

    .content-prospective-it .item li {
        list-style-type: disc;
        margin-left: 28px;
    }

    .content-prospective-it .item .table-departement {
        max-width: 1200px;
        width: 100%;
        min-width: 200px;
        border-collapse: collapse;
    }

    .content-prospective-it .item .table-departement th {
        padding: 8px;
        font-size: 18px;
    }

    .content-prospective-it .item .table-departement th:first-child {
        border-radius: 10px 0 0 0;
    }

    .content-prospective-it .item .table-departement th:last-child {
        border-radius: 0 10px 0 0;
    }

    .content-prospective-it .item .table-departement tbody td {
        padding: 8px;
        font-size: 18px;
    }

    .content-prospective-it .item .box-service h6 {
        font-size: 18px;
    }

    .content-prospective-it .item .box-service .decs {
        font-size: 18px;
    }

    .grading-text .decs,
    .content-resources .decs {
        font-size: 18px;
    }

    .tbl-grades {
        max-width: 1420px;
        width: 100%;
        min-width: 200px;
    }

    .tbl-grades th {
        border-radius: 10px;
        padding: 8px;
        font-size: 18px;
    }

    .tbl-grades td {
        border-radius: 10px;
        padding: 8px;
        font-size: 18px;
    }

    .grading-text .box-years {
        margin-top: 40px;
        gap: 65px;
    }

    .box-catalogoue {
        gap: 42px;
    }

    .box-catalogoue .course-list {
        padding: 28px 36px;
        border-radius: 10px;
        gap: 22px;
    }

    .box-catalogoue .course-list h6,
    .grading-text .box-general h6,
    .grading-text .box-schedule h6 {
        font-size: 22px;
    }

    .box-catalogoue .course-list .decs,
    .grading-text .box-general .decs {
        font-size: 18px;
    }

    .box-catalogoue .course-list .course-btn {
        gap: 10px;
        padding: 22px 42px;
        font-size: 18px;
        border-radius: 18px;
    }

    .box-catalogoue .course-list .course-btn svg {
        width: 24px;
    }

    .box-catalogoue .course-list .course-btn.course-1 {
        width: 310px;
    }

    .box-catalogoue .course-list .course-btn.course-2 {
        width: 250px;
    }

    .grading-text .box-general {
        padding: 28px 36px;
        border-radius: 12px;
        gap: 26px;
    }

    .grading-text .box-general .btn-click {
        padding: 18px 42px;
        gap: 12px;
        border-radius: 12px;
        font-size: 18px;
    }

    .grading-text .box-general .btn-click svg {
        width: 28px;
    }

    .grading-text .box-general .btn-general-class {
        gap: 30px;
    }

    .grading-text .box-schedule {
        gap: 36px;
    }

    .grading-text .box-schedule .class-schedule {
        max-width: 400px;
        min-width: 200px;
        width: 100%;
        padding: 28px 42px;
        font-size: 18px;
        border-radius: 12px;
    }

    .grading-text .box-schedule .box-class {
        gap: 20px;
    }

    .library-content,
    .facilities-content,
    .student-rights-content {
        margin: 160px 0px;
    }

    .content-department .collective-list {
        font-size: 18px;
    }

    .content-department .collective-list li {
        margin-left: 32px;
    }

    .content-resources .decs {
        max-width: 1260px;
        min-width: 200px;
        width: 100%;
    }

    .prospective-text,
    .grading-text,
    .content-resources {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 0 32px;
    }

    .content-resources img {
        width: 100%;
        height: 100%;
    }

    .box-proquest .item .decs {
        font-size: 18px;
    }

    .content-department .collective-list {
        font-size: 18px;
    }

    .content-department .collective-list li {
        margin-left: 32px;
    }

    .content-explanation h3,
    .content-department h3 {
        font-size: 42px;
    }

    .content-department img {
        width: 100%;
        height: 100%;
    }

    .box-skors {
        gap: 60px;
    }

    .box-skors .blue-skors {
        height: 280px;
        border-radius: 10px;
        font-size: 30px;
    }

    .box-skors .blue-skors h2 {
        font-size: 80px;
    }

    .box-skors .data-skors .item .data {
        margin: 4px;
        padding: 14px;
        border-radius: 10px;
        font-size: 18px;
    }

    .box-skors .data-skors .item .data:nth-child(1),
    .box-skors .data-skors .item .data:nth-child(3) {
        width: 280px;
    }

    .content-resources .box-student {
        padding: 28px 24px;
        border-radius: 8px;
    }

    .content-resources .box-student h6 {
        margin-bottom: 18px;
        font-size: 22px;
    }

    .content-resources .box-student .list-student .item {
        font-size: 18px;
        margin-left: 18px;
    }

    .content-resources .box-student .list-student .item.student {
        margin-left: 42px;
    }

    .career-text .box-text .title {
        font-size: 36px;
        margin-bottom: 28px;
    }

    .career-text .box-text .box-desc .desc {
        font-size: 18px;
    }

    .contact-feedback .box-feedback {
        padding: 160px 30px;
        max-width: auto;
        width: 100%;
    }

    .contact-feedback .box-feedback .contact-text .title {
        font-size: 42px;
    }

    .contact-feedback .box-feedback .contact-text .decs {
        font-size: 18px;
        margin: 16px 0 42px;
    }

    .shape-schedule .box-schedule .shape-btn button svg {
        width: 28px;
    }

    .as-overview button svg {
        width: 28px;
    }

    .box-title button svg {
        width: 22px;
    }

    /*  */
    .faculty-statement {
        padding: 40px 80px 0px;
        border-radius: 12px;
    }

    .faculty-statement.fet-statement {
        height: 500px;
    }

    .faculty-statement.fas-statement {
        height: 430px;
    }

    .faculty-statement .tab-statement {
        gap: 22px;
        padding-bottom: 24px;
    }

    .faculty-statement .tab-statement li {
        padding: 9px 36px;
        border-radius: 9px;
        font-size: 18px;
    }

    .faculty-statement .content-statement .content-img img {
        position: relative;
        bottom: 0px;
        left: 80px;
        height: 450px;
    }

    .faculty-statement.fas-statement .content-statement .content-img img {
        position: relative;
        bottom: 80px;
        left: 80px;
        height: 450px;
    }

    .faculty-statement .content-statement .content-img::before {
        width: 400px;
        height: 400px;
        left: 60px;
        bottom: 0px;
    }

    .faculty-statement.fas-statement .content-statement .content-img::before {
        width: 400px;
        height: 400px;
        left: 60px;
        bottom: 70px;
    }

    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:first-child {
        padding-top: 60px;
    }

    .faculty-statement .content-statement .content-text ul h3 {
        font-size: 28px;
        padding-bottom: 28px;
    }

    .faculty-statement .content-statement .content-text ul p {
        font-size: 18px;
    }

    .faculty-statement.foe-statement .content-statement .content-text ul li {
        font-size: 14px;
    }

    .faculty-statement .content-statement .content-text ul li {
        font-size: 16px;
    }

    .home-diverse .box-diverse h3 {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .home-diverse .box-diverse ul li img {
        height: 500px;
    }

    .home-diverse .box-diverse ul li .box-text {
        padding: 34px 27px;
    }

    .home-diverse .box-diverse ul li .box-text .major {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .home-diverse .box-diverse ul li:before {
        height: 130px;
    }

    .home-diverse .box-diverse ul li .box-text .more-info {
        font-size: 22px;
    }

    .home-diverse .box-diverse ul li .box-text .more-info svg {
        width: 30px;
    }

    .home-collaboration {
        margin: 160px 32px;
    }

    .home-collaboration .box-collaboration .box-img li .layer-img {
        width: 100%;
        height: 680px;
        object-fit: cover;
        object-position: center;
    }

    .home-collaboration .box-collaboration .box-img li .box-info {
        position: absolute;
        top: 0;
        right: 0;
    }

    .box-collaboration .box-img li .box-info::before {
        content: "";
        width: 1000px;
        height: 100%;
        /* background: linear-gradient(
      to right,
      rgb(101, 95, 95),
      rgba(101, 95, 95, 0.3)
    ); */
        position: absolute;
    }

    .box-collaboration .box-img li .box-info {
        position: absolute;
        padding: 36px;
    }

    .box-collaboration .box-img li .box-info .box-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 36px;
    }

    .box-collaboration .box-img li .box-info .box-logo img:first-child {
        width: 140px;
    }

    .box-collaboration .box-img li .box-info .box-logo img:last-child {
        width: 140px;
    }

    .box-collaboration h3 {
        font-size: 26px;
    }

    .box-collaboration .decs {
        font-size: 16px;
        padding: 10px 0 40px;
    }

    .box-collaboration .box-directed .body-directed,
    .box-collaboration .box-directed .header-directed {
        padding: 8px 48px;
    }

    .box-collaboration .box-directed .header-directed {
        border-radius: 16px 16px 0 0;
    }

    .box-collaboration .box-directed .body-directed {
        border-radius: 0 0 16px 16px;
    }

    .box-collaboration .box-directed .header-directed p {
        font-size: 16px;
        line-height: 1.2;
    }

    .box-collaboration .box-directed .body-directed .area {
        font-size: 16px;
        line-height: 1.3;
    }

    .box-collaboration .box-directed .body-directed .area:nth-child(2) {
        padding: 5px 0 16px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar {
        gap: 4px;
    }

    .box-collaboration .box-directed .body-directed .info-contact-sampoerna {
        padding-top: 16px;
        max-width: 1000px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar
        img {
        width: 26px;
    }

    .content-prospective .item table {
        max-width: 1000px;
        width: 100%;
        min-width: 600px;
        border-radius: 14px;
    }

    .content-prospective .item table th:first-child {
        border-radius: 10px 0 0 0;
    }

    .content-prospective .item table th {
        padding: 14px;
        font-size: 18px;
    }

    .content-prospective .item table th:last-child {
        border-radius: 0 10px 0 0;
    }

    .content-prospective .item table td {
        padding: 14px;
        font-size: 18px;
    }
}

/* 1600 */

@media screen and (max-width: 1580px) {
    .home-experience {
        padding: 160px 0;
    }

    .home-experience .box-experience .cont-title {
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 30px;
    }

    .home-experience .box-experience .cont-title .box-title {
        min-width: auto;
    }

    .home-experience .box-experience .cont-title .box-title h5 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .home-experience .box-experience .cont-title .box-title .desc {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 0px;
    }

    .home-experience .box-experience .box-place {
        position: relative;
    }

    .home-experience .box-experience .box-place .img-place {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }

    .home-experience .box-experience .box-place .svg-360 {
        position: absolute;
        width: 70px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .home-graduates .box-graduates .cont-title {
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 30px;
    }

    .home-graduates.about {
        padding: 160px 0;
    }

    .home-graduates .box-graduates .cont-title .box-title {
        min-width: auto;
    }

    .home-schedule {
        padding: 160px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home-schedule .box-schedule {
        max-width: auto;
        width: 100%;
    }

    .home-schedule .box-schedule .cont-events .box-event .event-date {
        width: 162px;
    }
}

@media screen and (max-width: 1560px) {
    .home-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-content .box-content {
        max-width: auto;
        width: 100%;
    }

    .home-content .box-content .title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
        padding-left: 30px;
    }

    .home-content .box-content .list-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: auto;
        padding: 20px;
    }

    .home-updates {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px;
        padding: 0 30px;
    }

    .home-updates .box-updates {
        width: 100%;
        max-width: auto;
    }

    .news-highlight .box-highlight,
    .career-text .box-text,
    .faq-question .box-question,
    .difference-content .box-content {
        max-width: auto;
        width: 100%;
        margin: 120px 0;
        padding: 0 30px;
    }
    .news-highlight .box-highlight .main-news {
        position: relative;
        margin-bottom: 40px;
    }

    .news-highlight .box-highlight .main-news img {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    .news-highlight .box-highlight .main-news .box-news {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 75px 35px;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0, 0.1),
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0.9)
        );
    }

    .news-highlight .box-highlight .main-news .box-news .title {
        font-size: 20px;
        font-weight: 700;
        max-width: 450px;
        width: 100%;
        min-width: 350px;
    }

    .news-highlight .box-highlight .main-news .box-news .desc {
        font-size: 14px;
        font-weight: 400;
        max-width: 550px;
        width: 100%;
        min-width: 350px;
        margin: 8px 0;
        line-height: 1.5;
        color: var(--dark-blue);
    }

    .news-highlight .box-highlight .main-news .box-news .more-news {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .news-highlight .box-highlight .main-news .box-news .more-news .text-more {
        font-size: 18px;
        font-weight: 700;
        color: var(--main-blue);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .news-highlight .box-highlight .main-news .box-news .more-news svg {
        width: 22px;
    }
    .news-highlight .box-highlight .grid-news {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, auto));
        gap: 23px;
        justify-content: space-between;
    }
    .news-highlight .box-highlight .grid-news .box-news {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .news-highlight .box-highlight .grid-news .box-news img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        margin-bottom: 32px;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .date {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--slate-grey);
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .title {
        font-size: 22px;
        font-weight: 700;
        margin: 6px 0;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .desc {
        font-size: 18px;
        font-weight: 400;
        /*  */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        line-height: 1.5;
    }
}

@media screen and (max-width: 1516px) {
    .navbar-content {
        padding: 16px 100px;
    }
    .navbar-first {
        gap: 16px;
    }
    .navbar-first .line a,
    .navbar-second .line a,
    .navbar-second .line .tag,
    .navbar-first .line.language .tag.bahasa .flag-line span {
        font-size: 14px;
    }

    .navbar-second .line .tag img {
        margin-left: 6px;
    }

    .navbar-first .language a {
        gap: 4px;
    }

    .base {
        padding: 50px 100px 44px;
    }
    .home-desc .box-desc {
        max-width: 1377px;
        min-width: 300px;
        margin: 160px 80px;
    }
}

@media screen and (max-width: 1500px) {
    .academic-list {
        margin: 120px 0;
    }

    .academic-list .box-academic-uni {
        gap: 120px;
    }

    .academic-list .box-academic-uni .academic-part .academic-img {
        width: 768px;
        height: 360px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic .title {
        font-size: 22px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic .decs {
        font-size: 16px;
        margin: 17px 0;
    }

    .academic-list .box-academic-uni .academic-part.left,
    .academic-list .box-academic-uni .academic-part.right {
        gap: 50px;
    }

    .more-info {
        gap: 4px;
    }

    .more-info .text-link {
        font-size: 18px;
    }

    .more-info img {
        width: 26px;
    }
}

@media screen and (max-width: 1420px) {
    .home-updates .box-updates .box-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .home-updates .box-updates .box-title h4 {
        font-size: 24px;
        font-weight: 700;
    }

    .home-updates .box-updates .box-title .more-info {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .home-updates .box-updates .box-title .more-info .text-link {
        text-decoration: underline;
        text-underline-offset: 4px;
        color: var(--dark-blue);
        font-weight: 800;
        font-size: 12px;
    }

    .home-updates .box-updates .box-news {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        justify-content: space-between;
    }

    .home-updates .box-updates .box-news .item-news {
        width: 340px;
        height: 100%;
    }

    .home-updates .box-news .item-news img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    .home-updates .box-news .item-news .content-news {
        margin-top: 24px;
    }

    .home-updates .box-news .item-news .content-news .date {
        font-size: 14px;
        font-weight: 400;
        color: var(--slate-grey);
    }

    .home-updates .box-news .item-news .content-news .title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        margin: 4px 0;
        color: var(--black);
    }

    .home-updates .box-news .item-news .content-news .decs {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--black);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
    }

    .slideshow-facilities {
        width: 100%;
        height: 400px;
    }
}

@media screen and (max-width: 1400px) {
    .home-schedule .box-schedule .title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 28px;
    }

    .home-schedule .box-schedule .cont-events {
        display: grid;
        grid-template-columns: repeat(
            2,
            1fr
        ); /* Create two equal-width columns */
        gap: 10px; /* Optional: spacing between items */
        width: 100%;
        justify-content: space-between;
        column-gap: 20px;
    }

    .home-schedule .box-schedule .cont-events .box-event {
        display: flex;
        align-items: stretch;
    }
    .home-schedule .box-schedule .cont-events .box-event .event-date,
    .home-schedule .box-schedule .cont-events .box-event .event-text {
        display: flex;
        align-items: center; /* Centers text vertically */
        padding: 12px 24px;
        border-radius: 5px;
    }

    .home-schedule .box-schedule .cont-events .box-event .event-date {
        width: 132px;
        background-color: var(--main-blue);
        padding: 12px 24px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 700;
        color: var(--white);
    }

    .home-schedule .box-schedule .cont-events .box-event .event-text {
        width: 100%;
        background-color: var(--light-grey);
        padding: 12px 24px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        color: var(--main-blue);
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(4) {
        grid-column: 1;
        grid-row: 4;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(5) {
        grid-column: 1;
        grid-row: 5;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(7) {
        grid-column: 2;
        grid-row: 2;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(8) {
        grid-column: 2;
        grid-row: 3;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(9) {
        grid-column: 2;
        grid-row: 4;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(10) {
        grid-column: 2;
        grid-row: 5;
    }
}

@media screen and (max-width: 1340px) {
    .dynamic-list {
        padding-top: 0px;
    }

    .navbar-second .logo-title img {
        height: 65px;
    }
    .navbar-second .line .tag img {
        width: 8px;
    }
    .navbar-first .language .tag.bahasa .flag {
        width: 20px;
    }

    .navbar-first .language .tag.bahasa .arrow {
        width: 8px;
    }
    .navbar-first .non-degrees .tag.non-degree .arrow {
        width: 8px;
    }
    .navbar-content {
        padding: 12px 80px;
    }
    .navbar-list {
        display: flex;
        gap: 16px;
        margin-top: 32px;
    }
    .navbar-first {
        gap: 12px;
    }
    .navbar-list .line .list-header.side,
    .navbar-list .line .list-header {
        top: 42px;
        padding: 16px 20px;
    }

    .navbar-first .language .list-header.bahasa {
        top: 24px;
        padding: 16px 20px;
    }

    .navbar-first .non-degrees .list-header.non-degree {
        top: 24px;
        padding: 16px 20px;
    }

    .navbar-list .line .list-header.side,
    .navbar-list .line .list-header.admission {
        left: auto;
        right: 0px;
    }

    .navbar-list .line .list-header.side {
        gap: 16px;
    }

    .list-header.side .list-academics h6,
    .list-header.side .list-faculties h6,
    .list-header.side .list-research h6 {
        font-size: 16px;
        margin-bottom: 2px;
    }

    .list-header.side .list-academics li a,
    .list-header.side .list-faculties li a,
    .list-header.side .list-research li a,
    .navbar-list .line .list-header li a,
    .line.language .list-header li .flag-line span {
        font-size: 14px;
    }

    .line.language .list-header li .flag-line img {
        width: 20px;
    }

    .list-header.admission {
        width: 180px;
    }

    .list-header.about {
        width: 240px;
    }

    .list-header.campus {
        width: 240px;
    }

    .list-header.side .list-academics li {
        padding: 6px 0;
        width: 166px;
        border-bottom: 1px solid var(--black);
    }

    .list-header.side .list-faculties li {
        padding: 6px 0;
        width: 170px;
        border-bottom: 1px solid var(--black);
    }
    .list-header.side .list-research li {
        padding: 6px 0;
        width: 170px;
        border-bottom: 1px solid var(--black);
    }

    .list-header.side .list-academics li:last-child,
    .list-header.side .list-faculties li:last-child,
    .list-header.side .list-research li:last-child {
        padding: 6px 0 0;
    }

    .list-header li:last-child {
        padding: 6px 0 0;
    }

    .list-header li:first-child {
        padding: 0 0 6px;
    }

    .list-header li {
        padding: 6px 0;
    }

    .line.active a::before {
        bottom: -10px;
    }

    .line a::before,
    .line .flag-line::before {
        bottom: -10px;
    }

    .base {
        padding: 50px 80px 44px;
    }

    .logo-footer img {
        height: 80px;
    }

    .address-footer {
        line-height: 1.5;
        font-size: 16px;
        font-weight: 400;
    }

    .social-footer {
        gap: 18px;
    }

    .base .part-2 {
        gap: 75px;
    }

    .base .part-2 .menu,
    .base .part-2 .resource {
        gap: 16px;
    }

    .base .part-2 .menu .title-footer,
    .base .part-2 .resource .title-footer {
        font-size: 23px;
    }

    .base .part-2 .menu ul,
    .base .part-2 .resource ul {
        gap: 12px;
    }

    .base .part-2 .menu ul li a,
    .base .part-2 .resource ul li a {
        color: var(--white);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }

    .text-credit {
        margin-top: 40px;
        padding-top: 30px;
        font-size: 14px;
    }

    .home-bg .text-bg {
        bottom: 60px;
        display: flex;
    }

    .home-bg .text-bg h3 {
        max-width: 518px;
        min-width: 200px;
        font-size: 26px;
        padding-right: 24px;
    }

    .home-bg .text-bg p {
        font-size: 16px;
        padding-left: 24px;
    }

    .home-desc .box-desc .title {
        font-size: 36px;
        font-weight: 600;
    }

    .home-desc .box-desc .desc {
        margin: 14px 0;
        font-size: 16px;
        line-height: 1.5;
    }

    .home-desc .box-desc .desc .bold {
        font-weight: 700;
    }

    .home-desc .box-desc .more-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .home-desc .box-desc .more-info .text-link {
        font-size: 16px;
    }

    .home-graduates .box-graduates .cont-title .box-title h5 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .home-graduates .box-graduates .cont-title .box-title .desc {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 50px;
    }

    .home-graduates .box-graduates .slider {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .home-graduates .box-graduates .slider .box-jobs {
        display: flex;
        gap: 24px; /* Adjust gap between images if needed */
        animation: scroll 60s linear infinite;
        width: max-content;
    }

    .home-graduates .box-graduates .slider .box-jobs img {
        height: 40px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

    .home-graduates .box-graduates .slider .box-jobs img {
        object-fit: contain;
    }
}

@media screen and (max-width: 1300px) {
    .home-shape {
        position: relative;
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 250px;
    }

    .home-shape .box-shape {
        max-width: auto;
        width: 100%;
        padding: 64px 30px 32px;
        /* margin-top: 400px; */
    }

    .home-shape .box-shape img {
        position: absolute;
        top: 5%;
        left: 38%;
        transform: translate(-0%, -50%);
        height: 400px;
    }

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

    .home-shape .box-shape .apply .decs h5 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .home-shape .box-shape .apply .decs p {
        width: 450px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }

    .home-shape .box-shape .apply .btn-apply {
        display: flex;
        align-items: center;
        gap: 16px;
        border-radius: 15px;
        color: var(--white);
        padding: 24px 48px;
        background-color: var(--dark-blue);
    }

    .home-shape .box-shape .apply .btn-apply p {
        font-size: 22px;
        font-weight: 700;
    }

    .home-shape .box-shape .apply .btn-apply svg path {
        stroke: var(--white);
    }

    .faq-question .box-question .main-question {
        margin-bottom: 50px;
    }

    .faq-question .box-question .main-question .title {
        font-size: 38px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .faq-question .box-question .main-question .desc {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }

    .faq-question .box-question .content-question {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .faq-question .box-question .content-question .item-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        background-color: var(--soft-grey);
        padding: 10px 30px;
        border-radius: 14px;
    }

    .item-question .question-text {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .item-question {
        cursor: pointer;
    }

    .item-question .question-text .title {
        font-size: 22px;
        font-weight: 700;
    }

    .item-question .question-text .desc,
    .item-question .question-text .box-desc .point {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }

    .item-question .question-text .box-desc,
    .item-question .question-text .desc-content {
        display: flex;
        flex-direction: column;
    }

    .item-question .question-text .desc-content {
        gap: 14px;
    }

    .item-question .question-text .box-desc .decs-question .point {
        margin-left: 14px;
        list-style-type: "- ";
        padding-left: 10px;
    }

    .item-question .question-text .content-decs {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 300ms ease-in-out;
    }

    .item-question .question-text .content-decs.active {
        display: block;
        opacity: 1;
        visibility: visible;
        transition: opacity 300ms ease-in-out;
    }

    .item-question .question-img.active {
        transform: rotate(45deg);
    }
    .academic-list .box-academic-uni .academic-part .academic-img {
        width: 540px;
        height: 280px;
    }
    .academic-list .box-academic-uni .academic-part.left,
    .academic-list .box-academic-uni .academic-part.right {
        gap: 35px;
    }

    .more-info .text-link {
        font-size: 16px;
    }

    .more-info img {
        width: 22px;
    }

    .pathway-content,
    .cetl-content,
    .curriculum-content {
        margin: 120px 32px;
    }

    .pathway-content .box-content,
    .cetl-content .box-content,
    .curriculum-content .box-content {
        gap: 120px;
    }

    .curriculum-prepare h4 {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .curriculum-prepare .decs {
        font-size: 16px;
    }

    .core-university {
        gap: 80px;
    }

    .core-university .box-text .title {
        font-size: 24px;
        font-weight: 700;
    }

    .core-university .box-text .decs {
        font-size: 16px;
        margin: 24px 0 32px;
    }

    .core-university .box-text .core-curriculum {
        display: flex;
        flex-direction: column;
        gap: 17px;
    }

    .core-university .box-text .core-curriculum li {
        display: flex;
        gap: 14px;
    }

    .core-university .box-text .core-curriculum li .li-core {
        font-size: 16px;
        font-weight: 700;
    }

    .core-university img {
        width: 520px;
        height: 620px;
    }

    .core-competencies {
        display: flex;
        gap: 90px;
        justify-content: space-between;
        flex-direction: column;
    }

    .core-competencies .box-competencies .title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .core-competencies .box-competencies .decs {
        font-size: 16px;
    }

    .core-competencies .choose-competencies {
        display: flex;
        gap: 42px;
    }

    .core-competencies .choose-competencies .item-competencies {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .core-competencies .choose-competencies .item-competencies li {
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
    }

    .core-competencies .choose-competencies .item-competencies li svg {
        width: 20px;
    }

    .core-competencies .choose-competencies .item-competencies li .text {
        font-size: 16px;
    }

    .core-competencies .choose-competencies .content-competencies ul li {
        font-size: 14px;
    }

    .core-university img {
        width: 440px;
        height: 520px;
        object-fit: cover;
    }

    .pathway-bridge {
        gap: 90px;
    }

    .pathway-bridge img {
        width: 450px;
        height: 420px;
        object-fit: contain;
    }

    .pathway-bridge .bridge-text .title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .pathway-bridge .bridge-text .box-decs {
        gap: 12px;
    }

    .pathway-bridge .bridge-text .box-decs .decs {
        font-size: 16px;
    }

    .pathway-years .title {
        font-size: 24px;
    }

    .pathway-years .img-years {
        gap: 24px;
    }

    .pathway-years .img-years .years-1 {
        height: 425px;
    }

    .pathway-years .img-years .years-3 {
        height: 425px;
    }

    .cetl-about .decs {
        width: 100%;
        font-size: 16px;
    }

    .cetl-about .title {
        font-size: 38px;
        width: 450px;
    }

    .cetl-main .title {
        font-size: 26px;
        width: 450px;
    }

    .cetl-main .cetl-decs {
        gap: 12px;
        width: 100%;
    }

    .cetl-main .cetl-decs .decs {
        width: 100%;
        font-size: 16px;
    }

    .cetl-main .cetl-decs .decs-ul li {
        font-size: 16px;
    }

    .cetl-programs h5.title {
        font-size: 26px;
        margin-bottom: 53px;
    }

    .cetl-programs .box-events {
        display: flex;
        gap: 26px;
    }

    .cetl-programs .box-events .cetl-events {
        padding: 28px 36px;
    }

    .cetl-events .title {
        font-size: 18px;
        margin-bottom: 26px;
    }

    .cetl-events .decs {
        font-size: 16px;
    }

    .cetl-shape {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 125px;
    }

    .cetl-shape .box-shape {
        max-width: 100%;
        width: 100%;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
        padding: 50px 32px;
    }

    .cetl-shape .box-shape .img-person {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 275px;
    }

    .cetl-shape .box-shape .box-text {
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        gap: 42px;
    }

    .cetl-shape .box-shape .box-text .title {
        font-size: 26px;
        width: 450px;
    }

    .btn-website {
        height: 55px;
        border-radius: 8px;
        gap: 8px;
        width: 210px;
        font-size: 16px;
    }

    .btn-website svg {
        width: 22px;
    }

    .qair-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qair-container .box-content {
        max-width: 100%;
        width: 100%;
        padding: 100px 32px;
        display: flex;
        gap: 24px;
    }

    .dynamic-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dynamic-container .box-content {
        max-width: 100%;
        width: 100%;
        padding: 100px 32px;
        display: flex;
        gap: 24px;
    }

    .qair-list {
        min-width: 270px;
    }

    .qair-list li {
        padding: 12px 0;
        font-size: 16px;
    }

    .dynamic-list {
        min-width: 270px;
    }

    .dynamic-list li {
        padding: 12px 0;
        font-size: 16px;
    }

    .qair-data .data-list {
        gap: 24px;
        font-size: 16px;
    }

    .dynamic-data .data-list {
        gap: 24px;
        font-size: 16px;
    }

    .qair-data .data-list.book-table.active {
        display: flex;
        gap: 100px;
    }

    .qair-data .data-list.book-table .box-table {
        gap: 24px;
    }

    .table-data {
        width: 100%;
        border-collapse: collapse;
        background-color: var(--blue-ht);
        border-radius: 13px 13px 0 0;
    }

    .table-data td {
        padding: 16px 30px;
        font-size: 18px;
    }

    .table-data th {
        padding: 16px 30px;
        text-align: left;
        font-size: 18px;
    }

    .table-data th:first-child {
        width: 300px;
    }

    .button-survey {
        border-radius: 10px;
        height: 60px;
        gap: 12px;
        width: 360px;
    }

    .button-survey .years {
        font-size: 16px;
    }

    .button-survey svg {
        width: 24px;
    }

    .box-survey {
        display: flex;
        gap: 18px;
    }

    .survey {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: flex-start;
        gap: 12px;
    }

    .survey .box-survey {
        width: 400px;
    }

    .survey .box-survey .button-survey {
        width: 100%;
    }

    .survey h5 {
        font-size: 18px;
    }

    .quality-list {
        gap: 26px;
    }

    .quality-list .program-box .text-list {
        font-size: 18px;
    }

    .box-form {
        background-color: var(--bg-form);
        border-radius: 10px;
        margin-top: 12px;
    }

    .box-form form .form-content {
        display: flex;
        flex-direction: column;
        gap: 26px;
        padding: 36px 24px;
    }

    .box-form form .form-content .box-required {
        display: flex;
        flex-direction: column;
    }

    .box-form form .form-content .box-required label,
    .box-form form .form-content .box-required .text {
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 500;
        color: var(--black);
    }

    .box-form form .form-content .box-required.box-label,
    .box-form form .form-content .box-required.box-date {
        width: 468px;
    }

    .box-form form .form-content .box-required input {
        border-radius: 6px;
        padding: 14px;
        border: 1.51 solid var(--border-input);
        font-size: 14px;
    }

    .box-form form .form-content .box-required .desc {
        margin-top: 16px;
        font-size: 14px;
    }

    .box-form form .form-content .box-required .box-label {
        gap: 16px;
    }

    .box-form
        form
        .form-content
        .box-required.box-name
        .box-label
        .box-input
        input {
        width: 100%;
    }

    .radio-option {
        font-size: 14px;
    }

    .custom-radio {
        width: 18px;
        height: 18px;
    }

    .custom-radio::after {
        width: 10px;
        height: 10px;
    }

    .form-footer {
        padding: 24px;
        width: 100%;
    }

    .form-footer button {
        padding: 12px 96px;
        font-size: 18px;
    }

    .contact-step {
        padding: 50px 32px;
    }

    .contact-step .box-step .step-take {
        width: 500px;
    }

    .contact-step .box-step .step-take h4 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .contact-step .box-step .step-take .desc {
        font-size: 16px;
    }

    .contact-step .box-step .step-button {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .contact-step .box-step .step-button a {
        gap: 12px;
        width: 180px;
        height: 50px;
        border-radius: 10px;
        font-size: 16px;
    }

    .contact-step .box-step .step-button a svg {
        width: 24px;
    }

    .content-explore {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
    }

    .content-explore .box-explore {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* width: 100px; */
        border-radius: 10px 30px 30px 10px;
        margin: 100px 0;
    }

    .content-explore .box-explore .explore-text {
        margin: 48px 20px 48px 80px;
        width: 500px;
    }

    .content-explore .box-explore .explore-text .title {
        font-size: 24px;
    }

    .content-explore .box-explore .explore-text .desc {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .content-explore .box-explore .explore-text .box-button {
        gap: 16px;
        margin-bottom: 34px;
    }

    .content-explore .box-explore .explore-text .box-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 360px;
        height: 64px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
    }

    .content-explore .box-explore .explore-text .box-button .virtual-button svg,
    .content-explore .box-explore .explore-text .box-button .onsite-button svg {
        width: 22px;
    }

    .info-explore {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .info-explore .data-box {
        display: flex;
        gap: 14px;
        align-items: center;
    }

    .info-explore .data-box .text {
        font-size: 14px;
        font-weight: 400;
    }

    .content-explore .box-explore .explore-img img {
        height: 560px;
        width: 420px;
        object-fit: cover;
        border-radius: 0 10px 10px 0;
    }

    .admission-content .box-content {
        width: 100%;
        padding: 100px 32px 0;
        gap: 100px;
    }

    .admission-content .box-content .box-apply {
        gap: 45px;
    }

    .admission-content .box-content .box-apply h6 {
        font-size: 24px;
    }

    .admission-content .box-content .box-apply .list-apply {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        gap: 24px;
    }

    .admission-content .box-content .box-apply .list-apply li {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 18px;
    }

    .admission-content .box-content .box-apply .list-apply li img {
        width: 70px;
    }

    .admission-content .box-content .box-apply .list-apply li .decs {
        font-size: 16px;
    }

    .read-more {
        gap: 8px;
        width: 180px;
        height: 50px;
        border-radius: 8px;
    }

    .read-more p {
        font-size: 16px;
    }

    .read-more svg {
        width: 24px;
    }

    .box-requirements {
        gap: 40px;
    }

    .box-requirements h6 {
        font-size: 24px;
    }

    .box-requirements .content-requirements {
        gap: 75px;
    }

    .box-requirements .content-requirements li {
        gap: 80px;
    }

    .box-requirements .content-requirements li:nth-child(2) {
        flex-direction: row-reverse;
    }

    .box-requirements .content-requirements li .box-text .decs {
        width: 100%;
    }

    .box-requirements .content-requirements li img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 16px;
    }

    .box-requirements .content-requirements li .box-text .decs {
        font-size: 16px;
        padding: 18px 0;
    }

    .boxx-more {
        font-size: 16px;
    }

    .boxx-more svg {
        width: 24px;
    }

    .tab-univ li,
    .tab-req li {
        padding: 22px;
        font-size: 18px;
    }

    .content-univ .box-content,
    .content-req .box-content {
        width: 100%;
        margin-top: 100px;
    }

    .content-tab .content-main .text-apply {
        gap: 75px;
    }

    .text-apply li h5 {
        font-size: 24px;
    }

    .text-apply li {
        gap: 28px;
    }

    .text-apply li h5 span {
        padding-right: 40px;
    }

    .text-apply li .decs {
        padding-left: 80px;
        font-size: 18px;
    }

    .text-apply li .box-practice-test,
    .text-apply li .box-placement-test {
        padding: 30px 24px;
    }

    .text-apply li .box-practice-test .box-click {
        gap: 28px;
    }

    .text-apply li .box-practice-test .box-click .box-img {
        padding: 30px 30px 32px 40px;
    }

    .text-apply li .box-practice-test .box-click .box-img img {
        width: 68px;
        height: 68px;
    }

    .text-apply li .box-practice-test .box-click .title {
        max-width: 711px;
        width: 100%;
        min-width: 200px;
        font-size: 20px;
    }

    .text-apply li .box-practice-test .box-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .text-apply li .box-practice-test .box-button a {
        gap: 10px;
        width: 320px;
        height: 58px;
        border-radius: 10px;
        font-size: 16px;
    }

    .text-apply li .box-practice-test .box-button .btn-blue svg {
        width: 20px;
    }

    .text-apply li .box-placement-test .btn {
        font-size: 20px;
    }

    .text-apply li .box-placement-test .btn-center {
        gap: 14px;
        width: 220px;
        height: 58px;
        border-radius: 10px;
        font-size: 16px;
    }

    .text-apply li .box-placement-test .btn-center svg {
        width: 24px;
    }

    .content-univ .box-content .content-tab:nth-child(2) {
        margin-bottom: 100px;
    }

    .content-univ .box-content .content-tab .content-main {
        gap: 100px;
    }

    .tuition h2 {
        font-size: 36px;
        margin-bottom: 24px;
    }

    .tuition .decs-tuition {
        font-size: 16px;
    }

    .tuition .box-img {
        padding-top: 45px;
    }

    .tuition .box-img img {
        width: 450px;
        height: 650px;
    }

    .tuition .box-cost {
        gap: 24px;
    }

    .tuition .box-cost .decs {
        font-size: 16px;
    }

    .tuition .table-cst {
        margin-top: 12px;
        width: 600px;
    }

    .tuition .table-cst th {
        padding: 13px 42px;
        font-size: 16px;
    }

    .tuition .table-cst th:first-child {
        width: 500px;
    }

    .tuition .table-cst td {
        padding: 13px 42px;
        font-size: 16px;
    }

    .tuition .box-cost .box-decs-tui .decs-tui {
        font-size: 16px;
    }

    .tuition.award .decs {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .tuition.award img {
        margin-top: 36px;
        height: 400px;
    }

    .tuition.requirements h6 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .tuition.requirements .decs {
        font-size: 16px;
    }

    .tuition.requirements .requirements-tab {
        margin-top: 60px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item {
        width: 300px;
        font-size: 16px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item:nth-child(1) {
        padding-bottom: 6px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item:nth-child(2) {
        padding-top: 6px;
    }

    .tuition.requirements .requirements-tab .content-criteria .item .box-text {
        margin-top: 32px;
    }

    .tuition.requirements
        .requirements-tab
        .content-criteria
        .item
        .box-text
        ul
        li {
        margin-left: 26px;
        font-size: 16px;
    }

    .tuition .box-bursary {
        gap: 24px;
    }

    .tuition .box-bursary .decs {
        font-size: 16px;
    }

    .tuition .box-bursary .tab-bursary li {
        font-size: 16px;
        margin-left: 28px;
    }

    .tuition .box-bursary .tab-bursary .number li {
        font-size: 16px;
        margin-left: 18px;
    }

    .tuition .box-bursary .box-number .text {
        font-size: 16px;
    }

    .tuition .box-bursary .box-number .number li {
        font-size: 16px;
        margin-left: 22px;
    }

    .testing h2 {
        font-size: 36px;
        margin-bottom: 24px;
    }

    .testing .decs-test {
        font-size: 16px;
    }

    .testing img {
        margin-top: 50px;
    }

    .testing h6 {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .testing .decs {
        font-size: 18px;
    }

    .testing .box-test {
        margin-top: 40px;
    }

    .testing .box-test .tab-test li {
        width: 300px;
        font-size: 16px;
        padding: 6px 0;
    }

    .testing .box-test .content-test .item {
        gap: 24px;
    }

    .table-test th {
        padding: 10px;
        font-size: 16px;
    }

    .table-test th:first-child {
        border-radius: 12px 0 0;
        width: 140px;
    }

    .table-test th:nth-child(2) {
        width: 160px;
    }

    .table-test th:last-child {
        border-radius: 0 12px 0 0;
    }

    .table-test tbody td {
        padding: 10px;
        font-size: 16px;
    }

    .table-test tfoot td {
        padding: 10px 0;
        font-size: 16px;
    }

    .list-main li {
        margin-left: 18px;
        font-size: 16px;
    }

    .box-settle h2 {
        font-size: 40px;
    }

    .box-settle .box-decs {
        gap: 24px;
        padding: 24px 0 55px;
    }

    .box-settle .box-decs p {
        font-size: 16px;
    }

    .box-admission h6 {
        font-size: 24px;
        margin-bottom: 24px;
        margin-top: 100px;
    }

    .box-admission .decs {
        font-size: 16px;
        max-width: 1003px;
        width: 100%;
        min-width: 200px;
    }

    .box-admission .requirements-tab {
        margin-top: 40px;
        gap: 24px;
    }

    .box-admission .requirements-tab .tab-criteria .item {
        width: 260px;
        font-size: 16px;
    }

    .box-admission .requirements-tab .tab-criteria .item:nth-child(1) {
        padding-bottom: 6px;
    }

    .box-admission .requirements-tab .tab-criteria .item:nth-child(2) {
        padding-top: 6px;
    }

    .box-admission .requirements-tab .content-criteria .item .decs {
        margin-bottom: 24px;
    }

    .box-admission .requirements-tab .content-criteria .item .box-text ul li {
        margin-left: 20px;
        font-size: 16px;
    }

    .list-inter {
        gap: 60px;
        margin-top: 55px;
    }

    .list-inter .inter-box {
        gap: 24px;
    }

    .list-inter .inter-box h6 {
        width: 300px;
        font-size: 24px;
    }

    .list-inter .inter-box .box-decs {
        width: 100%;
        gap: 24px;
    }

    .list-inter .inter-box .box-decs p {
        font-size: 16px;
    }

    .home-graduates.about {
        padding: 100px 0;
    }

    .voice-sampoerna {
        padding: 100px 32px 0;
    }

    .voice-sampoerna .box-voice {
        width: 100%;
    }

    .voice-sampoerna .box-voice h3 {
        font-size: 24px;
    }

    .voice-sampoerna .box-voice .list-voice {
        gap: 38px;
        padding: 25px 0 30px;
    }

    .voice-sampoerna .box-voice .list-voice li {
        gap: 12px;
    }

    .voice-sampoerna .box-voice .list-voice li svg {
        width: 18px;
    }

    .voice-sampoerna .box-voice .list-voice li .text {
        font-size: 16px;
    }

    .content-voice li.active {
        width: 100%;
        gap: 14px;
    }

    .content-voice li .box-voices .img-voice img {
        width: 180px;
        height: 240px;
        object-fit: cover;
        padding-right: 0px;
    }

    .content-voice li .box-voices .text-voice {
        padding-top: 18px;
    }

    .content-voice li .box-voices .position-voice {
        position: relative;
        top: -30px;
        left: 10px;
    }

    .content-voice li .box-voices .position-voice .title {
        font-size: 16px;
    }

    .content-voice li .box-voices .position-voice .desc {
        margin-top: 10px;
        font-size: 12px;
    }

    .content-voice li .box-voices .position-voice .name {
        margin-top: 16px;
        font-size: 18px;
    }

    .content-voice li .box-voices .position-voice .job {
        margin-top: 6px;
        font-size: 12px;
    }

    .about-content .box-content {
        padding: 100px 32px 0;
        gap: 100px;
    }

    .about-content .box-content .about-text {
        margin-top: 60px;
        gap: 24px;
    }

    .about-content .box-content .about-text h3 {
        font-size: 38px;
    }

    .about-content .box-content .about-text .decs {
        font-size: 16px;
        width: 100%;
    }

    .boxx-learn {
        gap: 6px;
        font-size: 16px;
    }

    .boxx-learn svg {
        width: 24px;
    }

    .accreditation-sampoerna {
        gap: 24px;
    }

    .accreditation-sampoerna h6 {
        font-size: 24px;
    }

    .accreditation-sampoerna .desc {
        font-size: 16px;
        width: 100%;
    }

    .alumni-sampoerna {
        gap: 24px;
    }

    .alumni-sampoerna h4 {
        font-size: 38px;
    }

    .alumni-sampoerna .desc {
        font-size: 16px;
        width: 100%;
    }

    .alumni-sampoerna iframe {
        width: 100%;
        height: 400px;
    }

    .img-about {
        gap: 24px;
    }

    .img-about h6 {
        font-size: 24px;
    }

    .governance-content {
        padding: 100px 32px;
    }

    .governance-content .box-content {
        width: 100%;
        gap: 100px;
    }

    .as-content {
        padding: 100px 32px 0 32px;
    }

    .as-content .box-content {
        width: 100%;
        gap: 50px;
    }

    .as-overview h4 {
        font-size: 38px;
    }

    .as-overview .decs {
        font-size: 16px;
        margin: 24px 0 50px;
    }

    .as-overview .container-overview {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .as-overview .container-overview li {
        padding: 18px 16px;
        gap: 16px;
        border-radius: 10px;
    }

    .as-overview .container-overview li img {
        width: 70px;
        height: 80px;
    }

    .as-overview .container-overview li h6 {
        font-size: 18px;
    }

    /*todo*/

    .governanve-overview h4 {
        font-size: 38px;
    }

    .governanve-overview .decs {
        font-size: 16px;
        margin: 24px 0 50px;
    }

    .governanve-overview .container-overview {
        display: grid;
        justify-content: space-between;
        gap: 28px;
        grid-template-columns: repeat(auto-fit, minmax(213px, auto));
    }

    .governanve-overview .container-overview li {
        padding: 18px 16px;
        gap: 16px;
        border-radius: 10px;
    }

    .governanve-overview .container-overview li img {
        width: 70px;
        height: 80px;
    }

    .governanve-overview .container-overview li h6 {
        font-size: 18px;
    }

    .governanve-overview .container-overview li p {
        font-size: 14px;
    }

    .governance-vision {
        padding: 40px 60px;
        border-radius: 12px;
        height: 460px;
        overflow: hidden;
    }

    .governance-vision .tab-ul {
        display: flex;
        gap: 18px;
        margin-bottom: 48px;
    }

    .governance-vision .tab-ul .tab-li {
        width: 108px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px;
    }

    .governance-vision .content-ul .content-li h5 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .governance-vision .content-ul .content-li .decs {
        font-size: 16px;
        width: 520px;
    }

    .governance-vision .content-ul .content-li .decs.mision {
        width: 520px;
    }

    .governance-vision .content-ul .page-img {
        position: absolute;
        right: 0px;
    }

    .governance-vision .content-ul .content-li .page-img::after {
        width: 400px;
        height: 400px;
        top: 150px;
        left: 130px;
    }

    .governance-vision .content-ul .content-li .page-img img {
        position: relative;
        z-index: 2;
        left: 100px;
        top: 60px;
    }

    .governanve-greeting h6 {
        margin-bottom: 42px;
        font-size: 24px;
    }

    .governanve-greeting .greeting-text {
        gap: 60px;
    }

    .governanve-greeting .greeting-text img {
        width: 360px;
        height: 430px;
        object-fit: cover;
        border-radius: 10px;
    }

    .governanve-greeting .greeting-text .box-qoutes .text-qoutes {
        font-size: 24px;
    }

    .governanve-greeting .greeting-text .box-qoutes .name-qoutes {
        font-size: 18px;
        padding: 24px 0 4px;
    }

    .governanve-greeting .greeting-text .box-qoutes .degree {
        font-size: 13px;
    }

    .governance-chart ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, auto));
        margin-bottom: 60px;
        gap: 24px;
    }

    .governance-chart ul li {
        width: 250px;
    }

    .governance-chart ul li img {
        margin-bottom: 20px;
        width: 250px;
        height: 270px;
        object-fit: cover;
    }

    .governance-chart ul li .name {
        margin-bottom: 14px;
        font-size: 16px;
    }

    .governance-chart ul li .position {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .governance-chart ul li .text {
        font-size: 13px;
    }

    .governance-chart .link-chart {
        gap: 10px;
        width: 100%;
    }

    .governance-chart .box-chart {
        gap: 8px;
        font-size: 16px;
    }

    .governance-chart .box-chart svg {
        width: 24px;
    }

    .accreditation-content {
        margin-top: 100px;
        padding: 0 32px;
    }

    .accreditation-text {
        width: 100%;
        gap: 24px;
    }

    .accreditation-text h3 {
        font-size: 36px;
    }

    .accreditation-text .desc {
        width: 100%;
        font-size: 16px;
    }

    .accreditation-text .text-articulation h6 {
        font-size: 16px;
    }

    .list-faculty .box-faculty {
        max-width: 1520px;
        width: 100%;
        padding: 100px 32px;
        gap: 85px;
    }

    .list-faculty .box-faculty .item img {
        width: 420px;
        max-width: auto;
        min-width: auto;
        height: 380px;
        object-fit: cover;
    }

    .list-faculty .box-faculty .item .box-text {
        padding: 0px 0px 0px 30px;
    }

    .list-faculty .box-faculty .item .box-text h2 {
        font-size: 38px;
    }

    .list-faculty .box-faculty .item .box-text .main-major {
        padding: 16px 0 22px;
        gap: 10px;
    }

    .list-faculty .box-faculty .item .box-text .main-major .box-major .text {
        font-size: 12px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .list-faculty .box-faculty .item .box-text .more-info {
        gap: 8px;
        font-size: 16px;
    }

    .list-faculty .box-faculty .item .box-text .more-info svg {
        width: 24px;
    }

    .list-non-degree .box-non-degree {
        max-width: 1520px;
        width: 100%;
        padding: 100px 32px;
        gap: 85px;
    }

    .list-non-degree .box-non-degree .item img {
        width: 420px;
        max-width: auto;
        min-width: auto;
        height: 380px;
        object-fit: cover;
    }

    .list-non-degree .box-non-degree .item .box-text {
        padding: 0px 0px 0px 30px;
    }

    .list-non-degree .box-non-degree .item .box-text h2 {
        font-size: 38px;
    }

    .list-non-degree .box-non-degree .item .box-text .main-major {
        padding: 16px 0 22px;
        gap: 10px;
    }

    .list-non-degree .box-non-degree .item .box-text .main-major .box-major .text {
        font-size: 12px;
        padding-right: 0px;
        padding-left: 8px;
    }

    .list-non-degree .box-non-degree .item .box-text .more-info {
        gap: 8px;
        font-size: 16px;
    }

    .list-non-degree .box-non-degree .item .box-text .more-info svg {
        width: 24px;
    }

    .tab-fob li,
    .tab-fet li,
    .tab-foe li,
    .tab-fas li,
    .tab-ss li,
    .tab-stuaff li {
        font-size: 18px;
        height: 70px;
    }

    .content-fob .box-content .content-tab .display,
    .content-fet .box-content .content-tab .display,
    .content-foe .box-content .content-tab .display,
    .content-fas .box-content .content-tab .display,
    .content-ss .box-content .content-tab .display,
    .content-stuaff .box-content .content-tab .display {
        margin: 100px auto 0;
        gap: 100px;
    }

    .faculty-overview h2 {
        font-size: 36px;
        margin-bottom: 24px;
    }

    .faculty-overview .decs {
        font-size: 16px;
    }

    .faculty-program .question-program h5 {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .faculty-program .question-program .decs {
        font-size: 16px;
    }

    .faculty-program .question-program .blue-title {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .faculty-program .tab-program {
        display: flex;
        gap: 55px;
    }

    .faculty-program .tab-program .list-program li {
        grid-template-columns: 20px 215px;
        gap: 14px;
    }

    .faculty-program .tab-program .list-program li svg {
        width: 24px;
    }

    .faculty-program .tab-program .list-program li .decs {
        font-size: 16px;
    }

    .faculty-program .tab-program .content-program li {
        max-width: 517px;
        width: 100%;
        min-width: 300px;
        padding: 24px 36px;
        border-radius: 10px;
        font-size: 12px;
    }

    .box-academics {
        margin: 100px 0;
        padding: 55px 100px;
        gap: 26px;
    }

    .box-academics .position-staff {
        width: 220px;
    }

    .box-academics .position-staff li {
        font-size: 16px;
        width: 220px;
        margin: 0 0 10px;
    }

    .box-academics .position-staff li:last-child {
        padding-top: 10px;
    }

    .box-academics .academic-staff h5 {
        font-size: 24px;
        margin-bottom: 28px;
    }

    .box-academics .academic-staff li .box-staff {
        gap: 22px;
    }

    .box-academics .academic-staff li .box-staff .item {
        width: 220px;
    }

    .box-staff .item img {
        width: 220px;
        height: 220px;
        object-fit: cover;
        margin-bottom: 24px;
    }

    .box-staff .item .name {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .box-staff .item .text-blue {
        font-size: 14px;
    }

    .box-staff .item .major {
        margin-top: 20px;
        font-size: 12px;
    }

    .box-alumni h5 {
        margin-bottom: 45px;
        font-size: 24px;
    }

    .box-alumni .alumni {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, auto));
        gap: 24px;
        justify-content: space-between;
    }

    .box-alumni .alumni img {
        width: 250px;
    }

    .box-graduates h5 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .box-graduates .decs {
        font-size: 16px;
    }

    .box-graduates .box-table {
        margin-top: 55px;
        gap: 16px;
        margin-bottom: 100px;
    }

    .box-graduates .box-table img {
        width: 100%;
        max-width: 439xp;
        min-width: 200px;
        object-fit: contain;
    }

    .box-graduates .list-graduates,
    .box-graduates.foe {
        margin-bottom: 100px;
    }

    .faculty-info {
        padding: 75px 32px 100px;
        display: flex;
        align-items: left;
        gap: 24px;
        flex-wrap: wrap;
    }

    .faculty-info .box-info {
        width: 360px;
        border-radius: 8px;
        height: 200px;
    }

    .faculty-info .box-info .box-text {
        margin-left: 20px;
    }

    .faculty-info .box-info .box-text h5 {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .faculty-info .box-info .box-text .more-info {
        font-size: 20px;
    }

    .faculty-info .box-info .box-text .more-info svg {
        width: 24px;
    }

    .faculty-info .box-info .box-img {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .faculty-info.bg {
        margin: 75px 0 0px;
    }

    .faculty-info .box-info .box-img::before {
        width: 260px;
        height: 420px;
        top: -90px;
        right: -110px;
    }

    .faculty-info .box-info .box-img img {
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 160px;
        height: 100%;
        object-fit: cover;
    }

    .home-experience.faculty {
        padding: 100px 0 0;
    }

    .home-experience.faculty .box-experience .box-place {
        position: relative;
        bottom: -6px;
    }

    .home-experience .box-experience .box-place a .svg-360 {
        width: 80px;
    }

    .faculty-qoutes img {
        height: 205px;
        border-radius: 10px;
    }

    .faculty-qoutes .qoutes {
        padding: 0 38px;
        font-size: 28px;
    }

    .faculty-concentrations h5 {
        font-size: 24px;
        margin-bottom: 45px;
    }

    .faculty-concentrations .box-concentrations {
        gap: 22px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations img {
        width: 75px;
        height: 75px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations,
    .faculty-concentrations .box-concentrations .additional-concentrations {
        max-width: 486px;
        width: 100%;
        min-width: 200px;
        height: 100%;
    }

    .faculty-concentrations .box-concentrations .num-concentrations h6 {
        font-size: 16px;
        margin: 16px 0 6px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations .decs {
        font-size: 14px;
    }

    .faculty-concentrations .box-concentrations .additional-concentrations {
        padding: 38px 42px 28px;
        border-radius: 22px;
    }

    .faculty-concentrations
        .box-concentrations
        .additional-concentrations
        .list-additional {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .faculty-concentrations
        .box-concentrations
        .additional-concentrations
        .list-additional
        li {
        margin-left: 16px;
    }

    .faculty-concentrations .box-concentrations .additional-concentrations h5 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .faculty-experiential h5 {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .faculty-experiential .decs {
        width: 100%;
        font-size: 16px;
    }

    .box-graduates .list-graduates li {
        margin-left: 24px;
        font-size: 16px;
    }

    .box-graduates .decs {
        font-size: 16px;
    }

    .box-career-pathways {
        gap: 24px;
    }

    .box-career-pathways .career-pathway-img {
        width: 620px;
        height: 220px;
        object-fit: cover;
    }

    .box-career-pathways .box-ceklis {
        grid-template-columns: repeat(2, minmax(200px, auto));
        gap: 20px;
    }

    .box-career-pathways .box-ceklis li {
        gap: 12px;
        font-size: 16px;
    }

    .box-career-pathways .box-ceklis li img {
        width: 24px;
    }

    .faculty-career-pathways h5 {
        font-size: 24px;
        margin-bottom: 45px;
    }

    .degree-plan {
        padding: 96px 32px;
        width: 100%;
        margin-top: 160px;
    }

    .degree-plan img {
        position: absolute;
        bottom: 0px;
    }

    .degree-plan .box-degree {
        gap: 180px;
    }

    .degree-plan .box-degree h5 {
        font-size: 24px;
    }

    .degree-plan .box-degree .box-consultation {
        gap: 8px;
        padding: 16px 34px;
        border-radius: 12px;
    }

    .degree-plan .box-degree .box-consultation .teks {
        font-size: 16px;
    }

    .degree-plan .box-degree .box-consultation svg {
        width: 24px;
    }

    .degree-plan .box-img img {
        height: 320px;
    }

    .graduate-profile {
        max-width: 1132px;
        width: 100%;
        min-width: 200px;
    }

    .graduate-profile h5 {
        font-size: 24px;
        margin-bottom: 22px;
    }

    .table-graduates th {
        font-size: 16px;
        padding: 10px 6px;
    }

    .table-graduates td {
        padding: 10px 6px;
        font-size: 16px;
    }

    .faculty-stories {
        margin-bottom: 100px;
    }

    .faculty-stories h5 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .faculty-stories .decs {
        font-size: 16px;
    }

    .faculty-info .box-info .img-lop img {
        width: 150px;
        height: 100%;
        object-fit: cover;
    }

    .faculty-link {
        margin-bottom: 100px;
    }

    .faculty-link h6 {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .faculty-link .box-link .link-visit {
        max-width: 487px;
        width: 100%;
        min-width: 200px;
        border-radius: 10px;
        padding: 45px 28px;
        gap: 20px;
        height: 180px;
    }

    .faculty-link .box-link .link-visit .title {
        font-size: 16px;
    }

    .faculty-link .box-link .link-visit .open-link {
        width: 240px;
        padding: 16px 0;
        gap: 10px;
        border-radius: 10px;
        font-size: 16px;
    }

    .faculty-link .box-link .link-visit .open-link svg {
        width: 24px;
    }

    .faculty-career-pathways .decs {
        margin-bottom: 45px;
        font-size: 16px;
    }

    .faculty-overview .box-decs {
        gap: 16px;
    }

    .faculty-overview .box-decs .list-decs li {
        margin-left: 18px;
        font-size: 16px;
    }

    .faculty-competencies .box-competencies {
        gap: 10px;
    }

    .faculty-competencies .box-competencies .item {
        gap: 8px;
        padding: 10px 24px;
        font-size: 14px;
    }
    .faculty-competencies .box-competencies .item svg {
        width: 24px;
    }
    .governance-vision .content-ul .content-li .page-text .list-mission li {
        font-size: 14px;
        margin-left: 16px;
        max-width: 600px;
        width: 100%;
        min-width: 200px;
    }

    .program-faculty {
        gap: 100px;
        margin-bottom: 100px;
    }

    .program-faculty .box-program {
        display: flex;
        gap: 28px;
    }

    .program-faculty .box-program h5 {
        max-width: 342px;
        width: 100%;
        min-width: 200px;
        font-size: 24px;
    }

    .program-faculty .box-program .box-list li {
        font-size: 16px;
    }

    .box-laboratories h5 {
        margin: 0 32px;
        font-size: 24px;
        margin-bottom: 40px;
    }

    .box-laboratories img {
        width: 100%;
        height: 302px;
        object-fit: cover;
    }

    .faculty-bachelor h5 {
        font-size: 24px;
        margin-bottom: 45px;
    }

    .faculty-bachelor .box-bachelor {
        padding: 26px 40px 16px;
        border-radius: 10px;
    }

    .faculty-bachelor .box-bachelor h6 {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .faculty-bachelor .box-bachelor .box-decs {
        gap: 16px;
    }

    .faculty-bachelor .box-bachelor .box-decs .decs {
        font-size: 16px;
    }

    .shape-schedule.foe-schedule {
        margin-top: 100px;
    }

    .faculty-competencies h5 {
        font-size: 24px;
        margin-bottom: 45px;
    }

    .campus-life-content {
        gap: 100px;
    }

    .box-student-affairs {
        margin-top: 100px;
    }

    .box-student-affairs {
        margin-top: 100px;
    }

    .box-student-affairs h6,
    .box-government-clubs h6,
    .box-inspiring-learning h6 {
        font-size: 24px;
    }

    .box-student-affairs img {
        max-width: 1520px;
        width: 100%;
        min-width: 200px;
        height: 320px;
        margin-top: 45px;
        margin-bottom: 38px;
    }

    .link-button {
        gap: 10px;
        font-size: 14px;
        padding: 16px 32px;
        border-radius: 10px;
    }

    .link-button svg {
        width: 24px;
    }

    .box-government-clubs {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
    }

    .box-government-clubs .decs {
        max-width: 1260px;
        width: 100%;
        min-width: 200px;
        padding: 0 32px;
        margin-top: 35px;
        margin-bottom: 35px;
        font-size: 16px;
    }

    .box-government-clubs .box-clubs-img .slideshow {
        gap: 20px;
        max-width: 98.7vw;
        margin-bottom: 32px;
        position: relative;
    }

    .box-government-clubs .box-clubs-img img {
        width: 480px;
        height: 300px;
    }

    .box-government-clubs .box-clubs-img img:nth-child(2) {
        width: 600px;
        height: 400px;
        object-fit: cover;
    }

    .box-inspiring-learning {
        margin-bottom: 100px;
    }

    .box-inspiring-learning img {
        margin-top: 32px;
        margin-bottom: 24px;
        height: 450px;
        width: 100%;
        object-fit: cover;
    }

    .student-affairs-content {
        margin-top: 100px;
        gap: 100px;
        padding: 0 32px;
    }

    .box-campus-orientation,
    .box-comprehensive {
        gap: 55px;
    }

    .box-campus-orientation .box-text,
    .box-comprehensive .box-text {
        gap: 26px;
    }

    .box-campus-orientation .box-text h3 {
        font-size: 36px;
    }

    .box-campus-orientation .box-text .decs {
        font-size: 16px;
        width: 100%;
    }

    .box-campus-orientation img {
        width: 100%;
        height: 100%;
    }

    .box-comprehensive .box-text h5 {
        font-size: 24px;
    }

    .box-comprehensive .box-text .decs {
        font-size: 16px;
        width: 100%;
    }

    .box-list-comprehensive .list-comprehensive .item {
        width: 270px;
        font-size: 16px;
        padding: 6px 0;
    }

    .content-comprehensive .item {
        font-size: 16px;
        gap: 26px;
    }

    .voice-sampoerna.student {
        margin-bottom: 100px;
    }

    .student-government-content {
        gap: 90px;
        margin-top: 100px;
        padding: 0 32px;
    }

    .student-government-content .box-img img {
        width: 100%;
        height: 100%;
    }

    .student-government-content .box-overview-student {
        width: 100%;
        gap: 55px;
    }

    .student-government-content .box-overview-student .box-decs {
        gap: 26px;
    }

    .student-government-content .box-overview-student .box-decs h3 {
        font-size: 36px;
    }

    .student-government-content .box-overview-student .box-decs .decs {
        font-size: 16px;
        width: 100%;
    }

    .student-government-content .box-overview-student .icon-club {
        grid-template-columns: repeat(auto-fit, minmax(250px, auto));
    }

    .student-government-content .box-overview-student .icon-club .item {
        width: 250px;
    }

    .student-government-content .box-overview-student .icon-club .item img {
        width: 70px;
        height: 70px;
    }

    .student-government-content .box-overview-student .icon-club .item .text {
        padding: 16px 0 6px;
        font-size: 16px;
    }

    .btn-see-more {
        gap: 6px;
        font-size: 16px;
    }

    .btn-see-more svg {
        width: 24px;
    }

    .content-club {
        margin-top: 100px;
        gap: 100px;
    }

    .content-club .item-club {
        padding: 60px 32px;
        gap: 24px;
    }

    .content-club .item-club .box-img {
        width: 616px;
        height: 240px;
    }

    .content-club .item-club.right {
        padding: 36px 24px;
    }

    .content-club .item-club .box-text {
        max-width: 745px;
        min-width: 300px;
        width: 100%;
        gap: 24px;
    }

    .content-club .item-club .box-text .title {
        gap: 24px;
        font-size: 24px;
    }

    .content-club .item-club .box-text .title img {
        width: 30px;
        height: 30px;
    }

    .content-club .item-club .box-text .decs {
        font-size: 16px;
    }

    .content-club .item-club .box-text .list-student-club .item {
        font-size: 16px;
        margin-left: 18px;
    }

    .box-event-club {
        padding: 100px 32px;
        gap: 24px;
    }

    .box-event-club h6 {
        font-size: 24px;
        max-width: 1040px;
        min-width: 200px;
        width: 100%;
        line-height: 1.5;
    }

    .box-event-club .list-activities-club li {
        font-size: 16px;
        margin-left: 16px;
        margin-bottom: 8px;
    }

    .spac-content,
    .safety-environment-content,
    .it-departement-content,
    .academic-registry-content,
    .library-content,
    .facilities-content,
    .student-rights-content {
        gap: 100px;
    }

    .content-explanation {
        margin-top: 100px;
    }

    .content-explanation,
    .content-department {
        gap: 24px;
    }

    .content-explanation h3,
    .content-department h3 {
        font-size: 36px;
    }

    .content-explanation .decs,
    .prospective-text .decs,
    .content-department .decs {
        font-size: 16px;
    }

    .content-explanation .decs,
    .prospective-text .decs,
    .content-department .decs {
        font-size: 16px;
    }

    .prospective-text,
    .grading-text {
        margin-bottom: 100px;
    }

    .prospective-text,
    .grading-text,
    .content-resources {
        gap: 24px;
    }

    .prospective-text h5,
    .grading-text h5,
    .content-resources h5 {
        font-size: 24px;
    }

    .tab-prospective .item,
    .tab-prospective-safety .item,
    .tab-prospective-it .item,
    .tab-proquest .item {
        width: 240px;
        padding: 6px 0;
        font-size: 16px;
    }

    .content-prospective .item,
    .content-prospective-safety .item,
    .content-prospective-it .item,
    .box-proquest .item {
        gap: 24px;
    }

    .principles {
        font-size: 16px;
    }

    .principles li {
        margin-left: 24px;
    }

    .content-prospective-it .item .information-system {
        font-size: 16px;
    }

    .content-prospective-it .item li {
        list-style-type: disc;
        margin-left: 24px;
    }

    .content-prospective-it .item .table-departement {
        max-width: 1200px;
        width: 100%;
        min-width: 200px;
        border-collapse: collapse;
    }

    .content-prospective-it .item .table-departement th {
        padding: 6px;
        font-size: 16px;
    }

    .content-prospective-it .item .table-departement th:first-child {
        border-radius: 8px 0 0 0;
    }

    .content-prospective-it .item .table-departement th:last-child {
        border-radius: 0 8px 0 0;
    }

    .content-prospective-it .item .table-departement tbody td {
        padding: 6px;
        font-size: 16px;
    }

    .content-prospective-it .item .box-service h6 {
        font-size: 16px;
    }

    .content-prospective-it .item .box-service .decs {
        font-size: 16px;
    }

    .grading-text .decs,
    .content-resources .decs {
        font-size: 16px;
    }

    .tbl-grades {
        max-width: 1420px;
        width: 100%;
        min-width: 200px;
    }

    .tbl-grades th {
        border-radius: 10px;
        padding: 8px;
        font-size: 16px;
    }

    .tbl-grades td {
        border-radius: 10px;
        padding: 8px;
        font-size: 16px;
    }

    .grading-text .box-years {
        margin-top: 38px;
        gap: 55px;
    }

    .box-catalogoue {
        gap: 36px;
    }

    .box-catalogoue .course-list {
        padding: 24px 32px;
        border-radius: 10px;
        gap: 20px;
    }

    .box-catalogoue .course-list h6,
    .grading-text .box-general h6,
    .grading-text .box-schedule h6 {
        font-size: 20px;
    }

    .box-catalogoue .course-list .decs,
    .grading-text .box-general .decs {
        font-size: 16px;
    }

    .box-catalogoue .course-list .course-btn {
        gap: 10px;
        padding: 18px 36px;
        font-size: 12px;
        border-radius: 16px;
    }

    .box-catalogoue .course-list .course-btn svg {
        width: 20px;
    }

    .box-catalogoue .course-list .course-btn.course-1 {
        width: 265px;
    }

    .box-catalogoue .course-list .course-btn.course-2 {
        width: 210px;
    }

    .grading-text .box-general {
        padding: 24px 32px;
        border-radius: 10px;
        gap: 22px;
    }

    .grading-text .box-general .btn-click {
        padding: 16px 36px;
        gap: 10px;
        border-radius: 10px;
        font-size: 16px;
    }

    .grading-text .box-general .btn-click svg {
        width: 24px;
    }

    .grading-text .box-general .btn-general-class {
        gap: 30px;
    }

    .grading-text .box-schedule {
        gap: 32px;
    }

    .grading-text .box-schedule .class-schedule {
        max-width: 340px;
        min-width: 200px;
        width: 100%;
        padding: 24px 36px;
        font-size: 16px;
        border-radius: 10px;
    }

    .grading-text .box-schedule .box-class {
        gap: 20px;
    }

    .library-content,
    .facilities-content,
    .student-rights-content {
        margin: 100px 0px;
    }

    .content-department .collective-list {
        font-size: 16px;
    }

    .content-department .collective-list li {
        margin-left: 28px;
    }

    .box-proquest .item .decs {
        font-size: 16px;
    }

    .content-department .collective-list {
        font-size: 16px;
    }

    .content-department .collective-list li {
        margin-left: 28px;
    }

    .content-explanation h3,
    .content-department h3 {
        font-size: 36px;
    }

    .box-skors {
        gap: 40px;
    }

    .box-skors .blue-skors {
        height: 250px;
        border-radius: 10px;
        font-size: 24px;
    }

    .box-skors .blue-skors h2 {
        font-size: 60px;
    }

    .box-skors .data-skors .item .data {
        margin: 4px;
        padding: 12px;
        border-radius: 10px;
        font-size: 16px;
    }

    .box-skors .data-skors .item .data:nth-child(1),
    .box-skors .data-skors .item .data:nth-child(3) {
        width: 240px;
    }

    .content-resources .box-student {
        padding: 24px 22px;
        border-radius: 8px;
    }

    .content-resources .box-student h6 {
        margin-bottom: 16px;
        font-size: 18px;
    }

    .content-resources .box-student .list-student .item {
        font-size: 16px;
        margin-left: 16px;
    }

    .content-resources .box-student .list-student .item.student {
        margin-left: 38px;
    }

    .slideshow-facilities {
        width: 100%;
        height: 360px;
    }

    .career-text .box-text .title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .career-text .box-text .box-desc .desc {
        font-size: 16px;
    }

    .news-bg .box-title,
    .career-bg .box-title,
    .faq-bg .box-title,
    .difference-bg .box-title,
    .contact-bg .box-title,
    .academic-bg .box-title,
    .pathway-bg .box-title,
    .cetl-bg .box-title,
    .curriculum-bg .box-title,
    .qair-bg .box-title,
    .about-bg .box-title,
    .accreditation-bg .box-title,
    .governance-bg .box-title,
    .as-bg .box-title,
    .admission-bg .box-title,
    .faculties-bg .box-title,
    .fas-bg .box-title,
    .fet-bg .box-title,
    .fob-bg .box-title,
    .foe-bg .box-title,
    .student-government-bg .box-title,
    .campus-life-bg .box-title,
    .student-affairs-bg .box-title,
    .spac-bg .box-title,
    .safety-environment-bg .box-title,
    .it-departement-bg .box-title,
    .academic-registry-bg .box-title,
    .library-bg .box-title,
    .facilities-bg .box-title,
    .student-rights-bg .box-title {
        position: absolute;
        bottom: 55px;
        left: 150px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .news-bg .box-title .title,
    .career-bg .box-title .title,
    .faq-bg .box-title .title,
    .difference-bg .box-title .title,
    .contact-bg .box-title .title,
    .academic-bg .box-title .title,
    .pathway-bg .box-title .title,
    .cetl-bg .box-title .title,
    .curriculum-bg .box-title .title,
    .qair-bg .box-title .title,
    .about-bg .box-title .title,
    .accreditation-bg .box-title .title,
    .governance-bg .box-title .title,
    .as-bg .box-title .title,
    .admission-bg .box-title .title,
    .faculties-bg .box-title .title,
    .fas-bg .box-title .title,
    .fet-bg .box-title .title,
    .fob-bg .box-title .title,
    .foe-bg .box-title .title,
    .campus-life-bg .box-title .title,
    .student-government-bg .box-title .title,
    .campus-life-bg .box-title .title,
    .student-affairs-bg .box-title .title,
    .spac-bg .box-title .title,
    .safety-environment-bg .box-title .title,
    .it-departement-bg .box-title .title,
    .academic-registry-bg .box-title .title,
    .library-bg .box-title .title,
    .facilities-bg .box-title .title,
    .student-rights-bg .box-title .title {
        color: var(--white);
        font-size: 28px;
    }

    .career-bg .box-title .decs,
    .difference-bg .box-title .decs,
    .contact-bg .box-title .decs,
    .cetl-bg .box-title .decs,
    .curriculum-bg .box-title .decs,
    .qair-bg .box-title .decs,
    .accreditation-bg .box-title .decs,
    .governance-bg .box-title .decs,
    .as-bg .box-title .decs,
    .fas-bg .box-title .decs,
    .fet-bg .box-title .decs,
    .fob-bg .box-title .decs,
    .foe-bg .box-title .decs,
    .campus-life-bg .box-title .decs,
    .student-government-bg .box-title .decs,
    .student-affairs-bg .box-title .decs,
    .spac-bg .box-title .decs,
    .safety-environment-bg .box-title .decs,
    .it-departement-bg .box-title .decs,
    .academic-registry-bg .box-title .decs,
    .library-bg .box-title .decs,
    .facilities-bg .box-title .decs,
    .student-rights-bg .box-title .decs {
        color: var(--white);
        font-size: 16px;
        line-height: 1.5;
        width: 520px;
    }

    .univ-bg .box-title,
    .req-bg .box-title {
        position: absolute;
        bottom: 55px;
        left: 150px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .univ-bg .box-title .title,
    .req-bg .box-title .title {
        color: var(--white);
        font-size: 28px;
        font-weight: 700;
    }
    .univ-bg .box-title .decs,
    .req-bg .box-title .decs {
        color: var(--white);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        width: 520px;
    }

    .career-text .box-text .box-desc {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pathway-years .img-years .years-1 {
        height: 375px;
    }

    .pathway-years .img-years .years-3 {
        height: 375px;
    }

    .difference-credit {
        display: flex;
        align-items: center;
        gap: 46px;
        margin-bottom: 120px;
    }

    .difference-credit img {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }

    .difference-credit .credit-text .title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .difference-credit .credit-text .text {
        font-size: 16px;
        font-weight: 400;
    }

    .difference-credit .credit-text .box-text {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-feedback .box-feedback {
        padding: 100px 30px;
        max-width: auto;
        width: 100%;
    }

    .contact-feedback .box-feedback .contact-text .title {
        font-size: 38px;
    }

    .contact-feedback .box-feedback .contact-text .decs {
        font-size: 16px;
        margin: 16px 0 36px;
    }

    .shape-schedule {
        padding: 36px;
    }

    .shape-schedule .box-schedule {
        max-width: auto;
        gap: 32px;
    }

    .shape-schedule .box-schedule .shape-text .title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .shape-schedule .box-schedule .shape-text .decs {
        font-size: 16px;
    }

    .shape-schedule .box-schedule .shape-btn {
        gap: 10px;
    }

    .shape-schedule .box-schedule .shape-btn button {
        gap: 10px;
        width: 320px;
        padding: 16px;
        border-radius: 10px;
        font-size: 16px;
    }

    .as-overview button {
        gap: 10px;
        width: 320px;
        padding: 16px;
        border-radius: 10px;
        font-size: 16px;
    }

    .box-title button {
        width: 320px;
        padding: 14px 22px;
        font-size: 15px;
    }

    .box-title button svg {
        width: 20px;
    }

    .shape-schedule .box-schedule .shape-btn button svg {
        width: 24px;
    }

    .as-overview svg {
        width: 24px;
    }

    .shape-footer .box-shape .content-shape .text-shape {
        width: 500px;
    }

    .content-shape .text-shape .decs {
        width: auto;
    }

    .shape-footer .box-shape img {
        height: 320px;
    }

    .faculty-statement {
        padding: 35px 60px 0px;
        border-radius: 10px;
    }

    .faculty-statement.fas-statement {
        height: 360px;
    }

    .faculty-statement.governance-statement {
        height: 380px;
    }

    .faculty-statement .tab-statement {
        gap: 20px;
        padding-bottom: 28px;
    }

    .faculty-statement .tab-statement li {
        padding: 8px 32px;
        border-radius: 8px;
        font-size: 16px;
    }

    .faculty-statement .content-statement .content-img img {
        position: relative;
        bottom: -60px;
        left: 80px;
        height: 360px;
    }

    .faculty-statement.fas-statement .content-statement .content-img img {
        position: relative;
        bottom: 80px;
        left: 80px;
        height: 360px;
    }

    .faculty-statement.governance-statement
        .content-statement
        .content-img
        img {
        position: relative;
        bottom: 60px;
        left: 80px;
        height: 360px;
    }

    .faculty-statement.governance-statement
        .content-statement
        .content-img::before {
        width: 360px;
        height: 360px;
        left: 80px;
        bottom: 30px;
    }

    .faculty-statement .content-statement .content-img::before {
        width: 360px;
        height: 360px;
        left: 80px;
        bottom: -120px;
    }

    .faculty-statement.fas-statement .content-statement .content-img::before {
        width: 360px;
        height: 360px;
        left: 80px;
        bottom: 30px;
    }

    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:first-child {
        padding-top: 40px;
    }

    .faculty-statement .content-statement .content-text ul h3 {
        font-size: 24px;
        padding-bottom: 24px;
    }

    .faculty-statement .content-statement .content-text ul p {
        font-size: 14px;
    }

    .faculty-statement.foe-statement .content-statement .content-text ul li {
        font-size: 12px;
    }

    .faculty-statement .content-statement .content-text ul li {
        font-size: 14px;
    }

    .faculty-statement.fas-statement .content-statement .content-text ul {
        padding-top: 20px;
    }

    .home-diverse .box-diverse h3 {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .home-diverse .box-diverse ul li img {
        height: 400px;
    }

    .home-diverse .box-diverse ul li .box-text {
        padding: 33px 26px;
    }

    .home-diverse .box-diverse ul li .box-text .major {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .home-diverse .box-diverse ul li:before {
        height: 130px;
    }

    .home-diverse .box-diverse ul li .box-text .more-info {
        font-size: 20px;
    }

    .home-diverse .box-diverse ul li .box-text .more-info svg {
        width: 28px;
    }

    .home-collaboration {
        margin: 120px 32px;
    }

    .home-collaboration .box-collaboration .box-img li .layer-img {
        height: 630px;
    }

    .box-collaboration .box-img li .box-info::before {
        content: "";
        width: 1000px;
        height: 100%;
        /* background: linear-gradient(
      to right,
      rgb(101, 95, 95),
      rgba(101, 95, 95, 0.3)
    ); */
        position: absolute;
    }

    .box-collaboration .box-img li .box-info {
        padding: 30px;
    }

    .box-collaboration .box-img li .box-info .box-logo {
        padding-bottom: 30px;
    }

    .box-collaboration .box-img li .box-info .box-logo img:first-child {
        width: 120px;
    }

    .box-collaboration .box-img li .box-info .box-logo img:last-child {
        width: 120px;
    }

    .box-collaboration h3 {
        font-size: 22px;
    }

    .box-collaboration .decs {
        font-size: 14px;
        padding: 10px 0 30px;
    }

    .box-collaboration .box-directed .body-directed,
    .box-collaboration .box-directed .header-directed {
        padding: 8px 32px;
    }

    .box-collaboration .box-directed .header-directed {
        border-radius: 14px 14px 0 0;
    }

    .box-collaboration .box-directed .body-directed {
        border-radius: 0 0 14px 14px;
    }

    .box-collaboration .box-directed .header-directed p {
        font-size: 14px;
    }

    .box-collaboration .box-directed .body-directed .area {
        font-size: 14px;
    }

    .box-collaboration .box-directed .body-directed .area:nth-child(2) {
        padding: 5px 0 14px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar {
        gap: 4px;
    }

    .box-collaboration .box-directed .body-directed .info-contact-sampoerna {
        padding-top: 14px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar
        img {
        width: 22px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar
        span {
        font-size: 14px;
    }

    .content-prospective .item table {
        max-width: 1000px;
        width: 100%;
        min-width: 600px;
        border-radius: 12px;
    }

    .content-prospective .item table th:first-child {
        border-radius: 8px 0 0 0;
    }

    .content-prospective .item table th {
        padding: 12px;
        font-size: 16px;
    }

    .content-prospective .item table th:last-child {
        border-radius: 0 10px 0 0;
    }

    .content-prospective .item table td {
        padding: 12px;
        font-size: 16px;
    }
}

/* 1300 */

/* laptop (1280 -1025) */

@media screen and (max-width: 1240px) {
}

@media screen and (max-width: 1100px) {
    .shape-footer {
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .shape-footer .box-shape {
        max-width: auto;
        width: 100%;
        display: flex;
        padding: 0 30px;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        position: relative;
        height: 100%;
    }

    .shape-footer .box-shape img {
        position: relative;
        bottom: auto;
        left: auto;
        height: 285px;
    }

    .shape-footer .box-shape .content-shape {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 50px 0 16px;
    }

    .shape-footer .box-shape .content-shape .text-shape {
        max-width: 450px;
        width: 100%;
        min-width: 250px;
    }

    .content-shape .text-shape .title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 14px;
        text-align: center;
    }

    .content-shape .text-shape .decs {
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        line-height: 1.5;
    }

    .more-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .more-info .text-link {
        color: var(--dark-blue);
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .faculty-program {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .faculty-program .question-program {
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }

    .faculty-program .tab-program {
        display: flex;
        gap: 42px;
    }

    .slideshow-facilities {
        width: 100%;
        height: 320px;
    }
}

@media screen and (max-width: 1110px) {
    .home-updates .box-updates .box-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .home-updates .box-updates .box-title h4 {
        font-size: 24px;
        font-weight: 700;
    }

    .home-updates .box-updates .box-title .more-info {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .home-updates .box-updates .box-title .more-info .text-link {
        text-decoration: underline;
        text-underline-offset: 4px;
        color: var(--dark-blue);
        font-weight: 800;
        font-size: 12px;
    }

    .home-updates .box-updates .box-news {
        display: flex;
        gap: 32px;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        justify-content: space-between;
        overflow: hidden;
        overflow-x: auto;
    }

    .home-updates .box-updates .box-news .item-news {
        width: 340px;
        height: 100%;
        /* overflow: hidden; */
    }

    .home-updates .box-news .item-news img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    .home-updates .box-news .item-news .content-news {
        margin-top: 24px;
    }

    .home-updates .box-news .item-news .content-news .date {
        font-size: 14px;
        font-weight: 400;
        color: var(--slate-grey);
    }

    .home-updates .box-news .item-news .content-news .title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        margin: 4px 0;
        color: var(--black);
    }

    .home-updates .box-news .item-news .content-news .decs {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--black);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
    }

    .home-shape {
        position: relative;
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100px;
        padding-top: 0px;
    }

    .home-shape .box-shape {
        max-width: auto;
        width: 100%;
        padding: 50px 70px 0;
    }

    .home-shape .box-shape img {
        position: relative;
        top: auto;
        /* bottom: 0px; */
        left: 50%;
        transform: translateX(-50%);
        height: 400px;
        bottom: -5px;
    }

    .home-shape .box-shape .apply {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 26px;
    }

    .home-shape .box-shape .apply .decs h5 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        text-align: center;
    }

    .home-shape .box-shape .apply .decs p {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
    }

    .home-shape .box-shape .apply .btn-apply {
        display: flex;
        align-items: center;
        gap: 16px;
        border-radius: 15px;
        color: var(--white);
        padding: 24px 48px;
        background-color: var(--dark-blue);
    }

    .home-shape .box-shape .apply .btn-apply p {
        font-size: 22px;
        font-weight: 700;
    }

    .home-shape .box-shape .apply .btn-apply svg path {
        stroke: var(--white);
    }

    .contact-feedback .box-feedback .contact-text .title,
    .contact-feedback .box-feedback .contact-text .decs {
        text-align: center;
    }

    .contact-feedback .box-feedback .contact-form {
        border: 1px solid var(--light-grey);
        border-radius: 4px;
        box-shadow: 0px 10.67px 21.33px 0px #60617029;
        padding: 32px;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .contact-form .text-item,
    .contact-form .dropdown-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .contact-form .text-item .contact-labels,
    .contact-form .dropdown-item .contact-labels {
        display: flex;
        gap: 6px;
    }

    .contact-form .text-item .contact-labels .decs,
    .contact-form .dropdown-item .contact-labels .decs {
        font-size: 16px;
        font-weight: 700;
    }

    .contact-form .text-item .contact-labels .red,
    .contact-form .dropdown-item .contact-labels .red {
        font-size: 16px;
        font-weight: 700;
        color: var(--red);
    }

    .contact-form .text-item .label-input {
        border: 1px solid var(--cool-grey);
        border-radius: 8px;
        padding: 14px 18px;
        outline: none;
        font-size: 14px;
    }

    .contact-form .twosided-item {
        display: flex;
        gap: 16px;
        width: 100%;
    }

    .contact-form .twosided-item .text-item input {
        width: 100%;
    }

    .contact-form .dropdown-item .dropdown-box {
        position: relative;
    }

    .contact-form .dropdown-item .dropdown-box .dropdown-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--cool-grey);
        border-radius: 8px;
        padding: 14px 18px;
        outline: none;
        cursor: pointer;
        font-size: 14px;
        color: var(--cool-grey);
    }

    .contact-form .dropdown-item .dropdown-box .dropdown-content {
        position: absolute;
        bottom: -90px;
        z-index: 100;
        background-color: var(--white);
        border: 1px solid var(--cool-grey);
        background-color: var(--white);
        width: 100%;
        border-radius: 8px;
        padding: 12px 18px 24px;
        visibility: hidden;
        opacity: 0;
    }

    .contact-form .dropdown-item .dropdown-box .dropdown-content li {
        border-bottom: 1px solid var(--dark-grey);
        padding: 8px 0;
    }

    .contact-form .box-button {
        margin: 0px;
        padding: 0px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .contact-form .box-button .button-submit {
        width: 180px;
        background-color: var(--main-blue);
        border: none;
        border-radius: 6px;
        padding: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--white);
    }
    .difference-credit {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 46px;
        margin-bottom: 120px;
    }

    .difference-credit img {
        width: 100%;
        height: 332px;
        object-fit: cover;
    }

    .difference-credit .credit-text .title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .difference-credit .credit-text .text {
        font-size: 12px;
        font-weight: 400;
    }

    .difference-credit .credit-text .box-text {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 1140px) {
    .difference-why h5 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 32px;
    }

    .difference-why .difference-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: auto;
        margin-bottom: 75px;
    }

    .difference-why .difference-grid .difference-path {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        /* background-color: transparent; */
    }

    .difference-why
        .difference-grid
        .difference-path
        .difference-part
        .part-text {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }

    .difference-grid .difference-path .difference-part .part-text .title {
        font-size: 16px;
        font-weight: 700;
        color: var(--white);
    }

    .difference-path .difference-part .part-text .decs {
        font-size: 14px;
        font-weight: 400;
        color: var(--white);
    }

    .difference-path .difference-part .part-text .title,
    .difference-path .difference-part .part-text .decs {
        max-width: 320px;
        width: 100%;
        min-width: 100px;
        padding: 0 20px;
    }

    /* early */

    .difference-why .difference-grid .difference-path.early .difference-part {
        display: flex;
        flex-direction: row;
    }

    .difference-why
        .difference-grid
        .difference-path.early
        .difference-part:nth-child(2) {
        display: flex;
        flex-direction: row-reverse;
    }

    .difference-path.early .difference-part img {
        max-width: 500px;
        width: 100%;
        min-width: 100px;
        height: 215px;
        object-fit: cover;
        object-position: top;
    }

    .difference-path.early .difference-part .part-text {
        max-width: 500px;
        width: 100%;
        min-width: 100px;
        height: 215px;
    }

    /* middle */

    .difference-why .difference-grid .difference-path.middle .difference-part {
        display: flex;
        flex-direction: row;
    }

    .difference-why
        .difference-grid
        .difference-path.middle
        .difference-part:nth-child(2) {
        display: flex;
        flex-direction: row-reverse;
    }

    .difference-path.middle .difference-part img {
        max-width: 500px;
        width: 100%;
        min-width: 100px;
        height: 215px;
        object-fit: cover;
        object-position: top;
    }

    .difference-path.middle .difference-part .part-text {
        max-width: 500px;
        width: 100%;
        min-width: 100px;
        height: 215px;
    }

    /* late */
    .difference-why .difference-grid .difference-path.late .difference-part {
        display: flex;
        flex-direction: row;
    }

    .difference-why
        .difference-grid
        .difference-path.late
        .difference-part:nth-child(2) {
        display: flex;
        flex-direction: row-reverse;
    }

    .difference-path.late .difference-part img {
        max-width: 500px;
        width: 100%;
        min-width: 100px;
        height: 215px;
        object-fit: cover;
        object-position: top;
    }

    .difference-path.late .difference-part .part-text {
        max-width: 500px;
        width: 100%;
        min-width: 100px;
        height: 215px;
    }

    .difference-path.late .difference-part.logo-card img {
        background-color: var(--white);
        object-fit: contain;
        padding: 20px;
        flex: 1 1 50%;
        min-width: 0;
    }

    .difference-path.late .difference-part.logo-card .part-text {
        flex: 1 1 50%;
        min-width: 0;
    }

    .shape-schedule .box-schedule .shape-text .decs br {
        display: none;
    }
}

@media screen and (max-width: 1100px) {
    .home-graduates.about {
        padding: 75px 0;
    }

    .voice-sampoerna {
        padding: 75px 32px 0;
    }

    .voice-sampoerna .box-voice {
        width: 100%;
    }

    .voice-sampoerna .box-voice h3 {
        font-size: 18px;
    }

    .voice-sampoerna .box-voice .list-voice {
        gap: 28px;
        padding: 20px 0 10px;
    }

    .voice-sampoerna .box-voice .list-voice li {
        gap: 10px;
    }

    .voice-sampoerna .box-voice .list-voice li svg {
        width: 14px;
    }

    .voice-sampoerna .box-voice .list-voice li .text {
        font-size: 14px;
    }

    .content-voice li.active {
        width: 100%;
        gap: 12px;
        align-items: center;
        flex-direction: column;
    }

    .content-voice li .box-voices .text-voice {
        padding-top: 14px;
    }

    .content-voice li .box-voices .position-voice {
        position: relative;
        top: -30px;
        left: 10px;
    }

    .content-voice li .box-voices .position-voice .title {
        font-size: 12px;
    }

    .content-voice li .box-voices .position-voice .desc {
        margin-top: 10px;
        font-size: 12px;
    }

    .content-voice li .box-voices .position-voice .name {
        margin-top: 14px;
        font-size: 14px;
    }

    .content-voice li .box-voices .position-voice .job {
        margin-top: 6px;
        font-size: 10px;
    }
}

@media screen and (min-width: 601px) {

    .anchor-top {
        display: flex;
        gap: 30px;
        position: relative;
    }

    /* Sidebar styling */
    .dynamic-list {
        width: 30%;
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
        height: fit-content;
        align-self: flex-start;
    }

    .dynamic-data {
        width: 70%;
    }

}

@media screen and (max-width: 1060px) {
    .navbar-content {
        padding: 12px 50px;
    }

    .home-bg .text-bg {
        position: absolute;
        bottom: 80px;
        left: 30px;
        color: var(--white);
        display: flex;
        flex-direction: column;
        /* gap: 24px; */
    }

    .home-bg .text-bg h3 {
        max-width: 518px;
        min-width: 200px;
        font-size: 26px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--white);
        border-right: 0px solid var(--white);
        padding-right: 0px;
    }

    .home-bg .text-bg p {
        max-width: 210px;
        min-width: 200px;
        font-size: 12px;
        padding-top: 14px;
        padding-left: 0px;
    }

    .home-desc {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
    }

    .home-desc .box-desc {
        max-width: 1377px;
        min-width: 300px;
        margin: 120px 32px 75px;
        text-align: left;
    }

    .home-desc .box-desc .title {
        text-align: left;
        font-size: 28px;
        font-weight: 600;
    }

    .home-desc .box-desc .desc {
        margin: 14px 0;
        font-size: 12px;
        line-height: 1.5;
    }

    .home-desc .box-desc .more-info {
        display: flex;
        align-items: left;
        justify-content: left;
        gap: 8px;
    }

    .home-desc .box-desc .more-info .text-link {
        color: var(--dark-blue);
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* tablet (1024 - 768) */
@media screen and (max-width: 1000px) {
    .dynamic-data .data-list .header-text {
        font-weight: 600;
        font-size: x-large;
    }

    .hamburger-menu {
        display: block;
    }
    .logo-title {
        display: flex;
        padding: 10px 20px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .navbar-second .logo-title img.logo-img {
        width: 116px;
        height: 47px;
    }
    .navbar-second .logo-title img.hamburger-menu {
        width: 20px;
        height: 100%;
    }
    .navbar-first {
        display: none;
    }
    .navbar-list {
        display: none;
    }
    .navbar-mobile .navbar-first {
        display: block;
    }
    .navbar-mobile .navbar-list {
        display: block;
    }
    .navbar-content {
        padding: 0px;
    }
    .navbar-mobile {
        display: none;
    }
    .navbar-mobile.active {
        display: flex;
    }
    .navbar-mobile {
        flex-direction: column;
        position: absolute;
        overflow-y: auto;
        top: 0px;
        left: 0px;
        height: 100vh;
        width: 100%;
        background-color: var(--main-blue);
        color: var(--white);
        padding: 30px 22px 22px;
        z-index: 1010;
    }
    .navbar-mobile .first li a,
    .navbar-mobile .dropdown li a {
        color: var(--white);
    }
    .navbar-mobile .dropdown .list li a {
        color: var(--white);
        font-size: 12px;
    }
    .navbar-mobile .first .list,
    .navbar-mobile .dropdown .list {
        padding: 14px 0;
        border-bottom: 1.2px solid var(--white);
    }
    .navbar-mobile .dropdown .list:first-child {
        padding: 0 0 14px;
        /* padding: 14px 0 0; */
    }
    .navbar-mobile .first .list:last-child {
        padding: 14px 0 0;
        border-bottom: 0px solid var(--white);
    }
    .navbar-mobile .dropdown .list .bar,
    .navbar-mobile .first .list .bar-flag {
        padding: 10px 0;
    }

    .navbar-mobile .dropdown .list .bar.side {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .navbar-mobile .dropdown .list .text-navbar {
        font-weight: 700;
    }
    .navbar-mobile .dropdown .list .text-navbar,
    .navbar-mobile .dropdown .list .tag .text-navbar a {
        font-size: 14px;
    }
    .navbar-mobile .dropdown .list .bar h6,
    .navbar-mobile .first .list {
        font-size: 14px;
        font-weight: 700;
    }
    .navbar-mobile .first .list.language a {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .navbar-mobile .dropdown .list .bar .academics,
    .navbar-mobile .dropdown .list .bar .faculties,
    .navbar-mobile .dropdown .list .bar .research,
    .navbar-mobile .dropdown .list .bar.campus,
    .navbar-mobile .dropdown .list .bar.admission,
    .navbar-mobile .dropdown .list .bar.about,
    .navbar-mobile .dropdown .list .bar.sampoerna-difference,
    .navbar-mobile .first .list .bar-flag {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .navbar-mobile .first .list .bar-flag .part-language {
        margin-top: 6px;
    }

    .navbar-mobile .dropdown .list .bar .academics li,
    .navbar-mobile .dropdown .list .bar .faculties li,
    .navbar-mobile .dropdown .list .bar .research li,
    .navbar-mobile .dropdown .list .bar.campus,
    .navbar-mobile .dropdown .list .bar.admission,
    .navbar-mobile .dropdown .list .bar.about,
    .navbar-mobile .dropdown .list .bar.sampoerna-difference,
    .navbar-mobile .first .list .bar-flag {
        margin-left: 10px;
    }
    .navbar-mobile .dropdown .list .tag,
    .navbar-mobile .first .list .tag-flag .part-language {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .navbar-mobile .dropdown .list .tag img,
    .navbar-mobile .first .list .tag-flag .part-language .arrow {
        width: 12px;
        transition: rotate 300ms ease-in-out;
    }

    .navbar-mobile .first .list .tag-flag .part-language .flag,
    .navbar-mobile .first .list .bar-flag .part-language img {
        width: 20px;
    }

    .navbar-mobile .first .list .bar-flag .part-language {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .navbar-mobile .first .list .bar-flag .part-language span {
        font-weight: 500;
        font-size: 12px;
    }

    .navbar-mobile .dropdown .list .tag img.active,
    .navbar-mobile .first .list .tag-flag .arrow.active {
        transform: rotate(180deg);
        transition: rotate 300ms ease-in-out;
    }
    .navbar-mobile .dropdown .list.arrow .bar,
    .navbar-mobile .first .list .bar-flag {
        display: none;
    }
    .navbar-mobile .dropdown .list.arrow .bar.active,
    .navbar-mobile .first .list .bar-flag.active {
        display: flex;
    }
    .header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    .header-mobile .logo {
        width: 116px;
    }
    .sticky {
        display: flex;
        flex-direction: row;
        align-items: center; /* Meratakan button secara vertikal ke tengah */
        gap: 6px; /* Button terpisah juga di mobile */
        bottom: 20px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        overflow: visible;
        border-radius: 0;
    }
    .sticky .overlay a {
        justify-content: center;
        align-items: center;
        background-color: var(--main-blue);
        height: 80px;
        gap: 4px;
        padding: 8px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    /* Mobile: Button 1 & 3 ukuran normal, rounded kiri & kanan masing-masing */
    .sticky .overlay:nth-child(1) a {
        width: 76px;
        background-color: var(--main-blue);
        border-radius: 12px 0 0 12px;
    }
    .sticky .overlay:nth-child(3) a {
        width: 76px;
        background-color: var(--main-blue);
        border-radius: 0 12px 12px 0;
    }

    /* Mobile: Button 2 — Merah, lebih besar, rounded semua sisi */
    .sticky .overlay:nth-child(2) a {
        background-color: #BE1E2D;
        width: 90px;
        height: 92px;
        border-radius: 12px;
    }

    .sticky .overlay .text-sticky {
        font-size: 10px;
        font-weight: 700;
        line-height: 1.3;
    }

    .base {
        background-color: var(--main-blue);
        padding: 40px 30px;
    }

    .box-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .logo-footer img {
        height: 45px;
    }
    .address-footer {
        line-height: 1.8;
        font-size: 12px;
    }
    .social-footer {
        gap: 12px;
    }
    .base .part-2 {
        gap: 46px;
    }
    .base .part-2 .menu,
    .base .part-2 .resource {
        gap: 12px;
    }
    .base .part-2 .menu .title-footer,
    .base .part-2 .resource .title-footer {
        font-size: 18px;
    }
    .base .part-2 .menu ul,
    .base .part-2 .resource ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .base .part-2 .menu ul li a,
    .base .part-2 .resource ul li a {
        font-size: 12px;
    }
    .text-credit {
        margin-top: 20px;
        padding-top: 20px;
        font-size: 12px;
    }
    .home-desc .box-desc .more-info {
        gap: 6px;
    }
    .home-desc .box-desc .more-info img {
        width: 22px;
    }
    .home-desc .box-desc .more-info .text-link {
        font-size: 12px;
    }

    .news-bg .box-title,
    .career-bg .box-title,
    .faq-bg .box-title,
    .difference-bg .box-title,
    .contact-bg .box-title,
    .academic-bg .box-title,
    .pathway-bg .box-title,
    .cetl-bg .box-title,
    .curriculum-bg .box-title,
    .qair-bg .box-title,
    .about-bg .box-title,
    .accreditation-bg .box-title,
    .governance-bg .box-title,
    .as-bg .box-title,
    .admission-bg .box-title,
    .faculties-bg .box-title,
    .fas-bg .box-title,
    .fet-bg .box-title,
    .fob-bg .box-title,
    .foe-bg .box-title,
    .student-government-bg .box-title,
    .campus-life-bg .box-title,
    .student-affairs-bg .box-title,
    .spac-bg .box-title,
    .safety-environment-bg .box-title,
    .it-departement-bg .box-title,
    .academic-registry-bg .box-title,
    .library-bg .box-title,
    .facilities-bg .box-title,
    .student-rights-bg .box-title {
        position: absolute;
        bottom: 37px;
        left: 52px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .news-bg .box-title .title,
    .career-bg .box-title .title,
    .faq-bg .box-title .title,
    .difference-bg .box-title .title,
    .contact-bg .box-title .title,
    .academic-bg .box-title .title,
    .pathway-bg .box-title .title,
    .cetl-bg .box-title .title,
    .curriculum-bg .box-title .title,
    .qair-bg .box-title .title,
    .about-bg .box-title .title,
    .accreditation-bg .box-title .title,
    .governance-bg .box-title .title,
    .as-bg .box-title .title,
    .admission-bg .box-title .title,
    .faculties-bg .box-title .title,
    .fas-bg .box-title .title,
    .fet-bg .box-title .title,
    .fob-bg .box-title .title,
    .foe-bg .box-title .title,
    .campus-life-bg .box-title .title,
    .student-government-bg .box-title .title,
    .campus-life-bg .box-title .title,
    .student-affairs-bg .box-title .title,
    .spac-bg .box-title .title,
    .safety-environment-bg .box-title .title,
    .it-departement-bg .box-title .title,
    .academic-registry-bg .box-title .title,
    .library-bg .box-title .title,
    .facilities-bg .box-title .title,
    .student-rights-bg .box-title .title {
        color: var(--white);
        font-size: 21px;
    }
    .career-bg .box-title .decs,
    .difference-bg .box-title .decs,
    .contact-bg .box-title .decs,
    .cetl-bg .box-title .decs,
    .curriculum-bg .box-title .decs,
    .qair-bg .box-title .decs,
    .accreditation-bg .box-title .decs,
    .governance-bg .box-title .decs,
    .as-bg .box-title .decs,
    .fas-bg .box-title .decs,
    .fet-bg .box-title .decs,
    .fob-bg .box-title .decs,
    .foe-bg .box-title .decs,
    .campus-life-bg .box-title .decs,
    .student-government-bg .box-title .decs,
    .student-affairs-bg .box-title .decs,
    .spac-bg .box-title .decs,
    .safety-environment-bg .box-title .decs,
    .it-departement-bg .box-title .decs,
    .academic-registry-bg .box-title .decs,
    .library-bg .box-title .decs,
    .facilities-bg .box-title .decs,
    .student-rights-bg .box-title .decs {
        color: var(--white);
        font-size: 12px;
        line-height: 1.5;
        max-width: 355px;
        width: 100%;
        min-width: 250px;
    }

    .univ-bg .box-title,
    .req-bg .box-title {
        position: absolute;
        bottom: 37px;
        left: 52px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .univ-bg .box-title .title,
    .req-bg .box-title .title {
        color: var(--white);
        font-size: 21px;
        font-weight: 700;
    }

    .univ-bg .box-title .decs,
    .req-bg .box-title .decs {
        color: var(--white);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        max-width: 355px;
        width: 100%;
        min-width: 250px;
    }

    .news-highlight .box-highlight .main-news {
        position: relative;
        margin-bottom: 30px;
    }

    .news-highlight .box-highlight .main-news img {
        width: 100%;
        height: 387px;
        object-fit: cover;
    }

    .news-highlight .box-highlight .main-news .box-news {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 30px 15px;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0, 0.1),
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0.9)
        );
    }

    .news-highlight .box-highlight .main-news .box-news .title {
        font-size: 14px;
        font-weight: 700;
        max-width: 350px;
        width: 100%;
        min-width: 350px;
    }

    .news-highlight .box-highlight .main-news .box-news .desc {
        font-size: 10px;
        font-weight: 400;
        max-width: 300px;
        width: 100%;
        min-width: 350px;
        margin: 8px 0;
        line-height: 1.5;
        color: var(--dark-blue);
    }

    .news-highlight .box-highlight .main-news .box-news .more-news {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .news-highlight .box-highlight .main-news .box-news .more-news .text-more {
        font-size: 12px;
        font-weight: 700;
        color: var(--main-blue);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .news-highlight .box-highlight .main-news .box-news .more-news svg {
        width: 22px;
    }
    .news-highlight .box-highlight .grid-news {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        gap: 15px;
        justify-content: space-between;
    }
    .news-highlight .box-highlight .grid-news .box-news {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .news-highlight .box-highlight .grid-news .box-news img {
        width: 100%;
        height: 190px;
        object-fit: cover;
        margin-bottom: 21px;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .date {
        font-size: 10px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--slate-grey);
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .title {
        font-size: 14px;
        font-weight: 700;
        margin: 6px 0;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .desc {
        font-size: 12px;
        font-weight: 400;
        /*  */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        line-height: 1.5;
    }
    .news-highlight .box-highlight,
    .career-text .box-text,
    .faq-question .box-question,
    .difference-content .box-content {
        max-width: auto;
        width: 100%;
        margin: 75px 0;
        padding: 0 30px;
    }
    .career-text .box-text .title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 28px;
    }

    .career-text .box-text .box-desc {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .career-text .box-text .box-desc .desc {
        font-size: 12px;
        font-weight: 400;
    }
    .faq-question .box-question .main-question {
        margin-bottom: 32px;
    }

    .faq-question .box-question .main-question .title {
        font-size: 25px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .faq-question .box-question .main-question .desc {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
    }

    .faq-question .box-question .content-question {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .faq-question .box-question .content-question .item-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        background-color: var(--soft-grey);
        padding: 10px 30px;
        border-radius: 14px;
    }

    .item-question .question-text {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .item-question {
        cursor: pointer;
    }

    .item-question .question-text .title {
        font-size: 16px;
        font-weight: 700;
    }

    .item-question .question-text .desc,
    .item-question .question-text .box-desc .point {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
    }

    .item-question .question-text .box-desc,
    .item-question .question-text .desc-content {
        display: flex;
        flex-direction: column;
    }

    .item-question .question-text .desc-content {
        gap: 14px;
    }

    .item-question .question-text .box-desc .decs-question .point {
        margin-left: 12px;
        list-style-type: "- ";
        padding-left: 8px;
    }

    .item-question .question-text .content-decs {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 300ms ease-in-out;
    }

    .item-question .question-text .content-decs.active {
        display: block;
        opacity: 1;
        visibility: visible;
        transition: opacity 300ms ease-in-out;
    }

    .item-question .question-img {
        width: 16px;
    }

    .item-question .question-img.active {
        transform: rotate(45deg);
    }

    .academic-list {
        margin: 75px 32px;
    }

    .academic-list .box-academic-uni {
        display: flex;
        flex-direction: column;
        gap: 75px;
    }

    .academic-list .box-academic-uni .academic-part .academic-img {
        object-fit: cover;
        object-position: -100px;
    }

    .academic-list .box-academic-uni .academic-part.left {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0px;
    }

    .academic-list .box-academic-uni .academic-part.right {
        display: flex;
        align-items: center;
        gap: 0px;
        flex-direction: column;
    }

    .more-info .text-link {
        font-size: 12px;
    }

    .more-info img {
        width: 18px;
    }

    .shape-schedule {
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 38px 75px;
    }

    .shape-schedule .box-schedule {
        /* max-width: 1520px; */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
    }

    .shape-schedule .box-schedule .shape-text .title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
        text-align: center;
    }

    .shape-schedule .box-schedule .shape-text .decs {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
    }

    .shape-schedule .box-schedule .shape-btn {
        display: flex;
        gap: 12px;
        flex-direction: column;
    }

    .shape-schedule .box-schedule .shape-btn button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 280px;
        padding: 10px;
        border: none;
        font-size: 12px;
        font-weight: 700;
    }

    .as-overview button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 280px;
        padding: 10px;
        border: none;
        font-size: 12px;
        font-weight: 700;
    }

    .shape-schedule .box-schedule .shape-btn button.schedule {
        background-color: var(--dark-blue);
        color: var(--white);
    }

    .as-overview button.schedule {
        background-color: var(--dark-blue);
        color: var(--white);
    }

    .box-title button {
        width: 280px;
        padding: 12px 18px;
        font-size: 14px;
        border-radius: 12px;
    }

    .box-title button svg {
        width: 18px;
    }

    .shape-schedule .box-schedule .shape-btn button.schedule svg path {
        stroke: var(--white);
    }

    .as-overview button.schedule svg path {
        stroke: var(--white);
    }

    .shape-schedule .box-schedule .shape-btn button.apply {
        background-color: var(--sky-blue);
        color: var(--black);
        border: 1px solid var(--dark-blue);
    }

    .shape-schedule .box-schedule .shape-btn button.apply svg path {
        stroke: var(--black);
    }

    .cetl-content,
    .curriculum-content {
        margin: 75px 32px;
    }

    .pathway-content {
        margin: 75px 0px;
    }

    .pathway-content .box-content,
    .cetl-content .box-content,
    .curriculum-content .box-content {
        gap: 75px;
    }

    .curriculum-prepare h4 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .curriculum-prepare .decs {
        font-size: 12px;
    }

    .core-university {
        display: flex;
        align-items: left;
        flex-direction: column;
        justify-content: left;
    }

    .core-university .box-text .title {
        font-size: 24px;
        font-weight: 700;
    }

    .core-university .box-text .decs {
        font-size: 16px;
        margin: 24px 0 32px;
    }

    .core-university .box-text .core-curriculum {
        display: flex;
        flex-direction: column;
        gap: 17px;
    }

    .core-university .box-text .core-curriculum li {
        display: flex;
        gap: 14px;
    }

    .core-university .box-text .core-curriculum li svg {
        width: 18px;
    }

    .core-university .box-text .core-curriculum li .li-core {
        font-size: 16px;
        font-weight: 700;
    }

    .core-university img {
        width: 440px;
        height: 520px;
    }

    .core-competencies {
        gap: 50px;
    }

    .core-competencies .box-competencies .title {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .core-competencies .box-competencies .decs {
        font-size: 12px;
    }

    .core-competencies .choose-competencies {
        display: flex;
        gap: 20px;
    }

    .core-competencies .choose-competencies .item-competencies {
        gap: 10px;
    }

    .core-competencies .choose-competencies .item-competencies li {
        gap: 12px;
        cursor: pointer;
    }

    .core-competencies .choose-competencies .item-competencies li svg {
        width: 16px;
    }

    .core-competencies .choose-competencies .item-competencies li .text {
        font-size: 12px;
    }

    .core-competencies .choose-competencies .content-competencies ul li {
        font-size: 10px;
    }

    .core-university img {
        width: 364px;
        height: 420px;
    }

    .pathway-bridge {
        gap: 50px;
        margin: 0 32px;
    }

    .pathway-bridge img {
        width: 368px;
        height: 318px;
        object-fit: contain;
    }

    .pathway-bridge .bridge-text .title {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .pathway-bridge .bridge-text .box-decs {
        gap: 10px;
    }

    .pathway-bridge .bridge-text .box-decs .decs {
        font-size: 12px;
    }

    .pathway-years .title {
        font-size: 18px;
    }

    .pathway-years .img-years {
        gap: 20px;
    }

    .pathway-years .img-years .years-1 {
        height: 270px;
    }

    .pathway-years .img-years .years-3 {
        height: 270px;
    }

    .cetl-about,
    .cetl-main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }

    .cetl-about .decs {
        width: 100%;
        font-size: 12px;
    }

    .cetl-about .title {
        font-size: 22px;
        width: 100%;
    }

    .cetl-main .title {
        font-size: 18px;
        width: 100%;
    }

    .cetl-main .cetl-decs {
        gap: 10px;
        width: 100%;
    }

    .cetl-main .cetl-decs .decs {
        width: 100%;
        font-size: 12px;
    }

    .cetl-main .cetl-decs .decs-ul li {
        font-size: 12px;
    }

    .cetl-programs h5.title {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .cetl-programs .box-events {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .cetl-programs .box-events .cetl-events {
        padding: 24px 24px;
    }

    .cetl-events .title {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .cetl-events .decs {
        font-size: 12px;
    }

    .cetl-shape {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 0px;
    }

    .cetl-shape .box-shape {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        position: relative;
        align-items: center;
        justify-content: space-between;
        padding: 35px 32px 0;
    }

    .cetl-shape .box-shape .img-person {
        position: relative;
        bottom: 0;
        left: 0;
        height: 225px;
        margin-top: 28px;
    }

    .cetl-shape .box-shape .box-text {
        display: flex;
        align-items: center;
        justify-content: right;
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .cetl-shape .box-shape .box-text .title {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .btn-website {
        height: 44px;
        border-radius: 8px;
        gap: 8px;
        width: 140px;
        font-size: 12px;
    }

    .btn-website svg {
        width: 18px;
    }

    .qair-container .box-content {
        padding: 75px 32px;
        flex-direction: column;
        gap: 24px;
    }

    .dynamic-container .box-content {
        padding: 75px 32px;
        gap: 24px;
    }

    .qair-list {
        max-width: 200px;
    }

    .qair-list li {
        padding: 6px 0;
        font-size: 12px;
    }

    .dynamic-list {
        max-width: 200px;
    }

    .dynamic-list li {
        padding: 6px 0;
        font-size: 12px;
    }

    .qair-data .data-list {
        gap: 20px;
        font-size: 12px;
    }

    .qair-data .data-list.book-table .box-table {
        gap: 20px;
    }

    .dynamic-data .data-list {
        gap: 20px;
        font-size: 12px;
    }

    .table-data {
        width: 100%;
        border-collapse: collapse;
        background-color: var(--blue-ht);
        border-radius: 10px 10px 0 0;
    }

    .data-list .box-table .box-overflow {
        overflow-x: auto;
    }

    .table-data.main-table {
        max-width: 100px;
        width: 100%;
        min-width: 550px;
    }

    .table-data.main-table th:first-child {
        width: 130px;
    }

    .table-data td {
        padding: 16px 26px;
        font-size: 14px;
    }

    .table-data th {
        padding: 16px 26px;
        text-align: left;
        font-size: 14px;
    }

    .table-data th:first-child {
        width: 250px;
    }

    .button-survey {
        border-radius: 8px;
        height: 42px;
        gap: 8px;
        width: 241px;
    }

    .button-survey .years {
        font-size: 12px;
    }

    .button-survey svg {
        width: 18px;
    }

    .box-survey {
        display: flex;
        gap: 12px;
    }

    .survey {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: flex-start;
        gap: 12px;
    }

    .survey .box-survey {
        width: 345px;
    }

    .survey .box-survey .button-survey {
        width: 100%;
    }

    .survey h5 {
        font-size: 12px;
    }

    .quality-list {
        gap: 20px;
    }

    .quality-list .program-box .text-list {
        font-size: 12px;
    }

    .box-form {
        background-color: var(--bg-form);
        border-radius: 6px;
        margin-top: 12px;
    }

    .box-form form .form-content {
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding: 25px 16px;
    }

    .box-form form .form-content .box-required {
        display: flex;
        flex-direction: column;
    }

    .box-form form .form-content .box-required label,
    .box-form form .form-content .box-required .text {
        margin-bottom: 11px;
        font-size: 14px;
    }

    .box-form form .form-content .box-required.box-label,
    .box-form form .form-content .box-required.box-date {
        width: auto;
    }

    .box-form form .form-content .box-required input {
        border-radius: 6px;
        padding: 12px;
        border: 1.51 solid var(--border-input);
        font-size: 12px;
    }

    .box-form form .form-content .box-required .desc {
        margin-top: 10px;
        font-size: 12px;
    }

    .box-form form .form-content .box-required .box-label {
        gap: 12px;
    }

    .box-form
        form
        .form-content
        .box-required.box-name
        .box-label
        .box-input
        input {
        width: 100%;
    }

    .radio-option {
        font-size: 12px;
    }

    .custom-radio {
        width: 16px;
        height: 16px;
    }

    .custom-radio::after {
        width: 10px;
        height: 10px;
    }

    .form-footer {
        padding: 24px;
        width: 100%;
    }

    .form-footer button {
        padding: 12px 96px;
        width: 100%;
        font-size: 14px;
    }

    .contact-step {
        padding: 35px 75px;
    }

    .contact-step .box-step {
        flex-direction: column;
        gap: 16px;
    }

    .contact-step .box-step .step-take {
        width: auto;
    }

    .contact-step .box-step .step-take h4 {
        font-size: 18px;
        margin-bottom: 10px;
        text-align: center;
    }

    .contact-step .box-step .step-take .desc {
        font-size: 12px;
        text-align: center;
    }

    .contact-step .box-step .step-button {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-step .box-step .step-button a {
        gap: 12px;
        width: 144px;
        height: 43px;
        border-radius: 10px;
        font-size: 12px;
    }

    .contact-step .box-step .step-button a svg {
        width: 18px;
    }

    .content-explore {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
    }

    .content-explore .box-explore {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        flex-direction: column;
        margin: 75px 0;
    }

    .content-explore .box-explore .explore-text {
        padding: 44px 36px;
        width: 100%;
        margin: 0px;
    }

    .content-explore .box-explore .explore-text .title {
        font-size: 18px;
    }

    .content-explore .box-explore .explore-text .desc {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .content-explore .box-explore .explore-text .box-button {
        gap: 14px;
        margin-bottom: 30px;
    }

    .content-explore .box-explore .explore-text .box-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 280px;
        width: 100%;
        min-width: 100px;
        height: 43px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
    }

    .content-explore .box-explore .explore-text .box-button .virtual-button svg,
    .content-explore .box-explore .explore-text .box-button .onsite-button svg {
        width: 20px;
    }

    .info-explore {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .info-explore .data-box {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .info-explore .data-box .text {
        font-size: 12px;
        font-weight: 400;
    }

    .content-explore .box-explore .explore-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 0px 0px 10px 10px;
    }

    .admission-content .box-content {
        width: 100%;
        padding: 75px 32px 0;
        gap: 75px;
    }

    .admission-content .box-content .box-apply {
        gap: 35px;
    }

    .admission-content .box-content .box-apply h6 {
        font-size: 18px;
    }

    .admission-content .box-content .box-apply .list-apply {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        gap: 20px;
    }

    .admission-content .box-content .box-apply .list-apply li {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 18px;
        width: 140px;
    }

    .admission-content .box-content .box-apply .list-apply li img {
        width: 52px;
    }

    .admission-content .box-content .box-apply .list-apply li .decs {
        font-size: 12px;
    }

    .read-more {
        width: 146px;
        height: 43px;
    }

    .read-more p {
        font-size: 12px;
    }

    .read-more svg {
        width: 18px;
    }

    .box-requirements {
        gap: 30px;
    }

    .box-requirements h6 {
        font-size: 18px;
    }

    .box-requirements .content-requirements {
        gap: 70px;
    }

    .box-requirements .content-requirements li {
        gap: 20px;
        flex-direction: column;
    }

    .box-requirements .content-requirements li:nth-child(2) {
        flex-direction: column;
    }

    .box-requirements .content-requirements li img {
        width: 100%;
        height: 223px;
        object-fit: cover;
        border-radius: 10px;
    }

    .box-requirements .content-requirements li .box-text .decs {
        font-size: 12px;
        padding: 16px 0;
    }

    .boxx-more {
        font-size: 12px;
    }

    .boxx-more svg {
        width: 18px;
    }

    .tab-univ li,
    .tab-req li {
        padding: 18px;
        font-size: 14px;
    }

    .content-univ .box-content,
    .content-req .box-content {
        width: 100%;
        margin-top: 75px;
    }

    .content-tab .content-main .text-apply {
        gap: 35px;
    }

    .text-apply li h5 {
        font-size: 18px;
    }

    .text-apply li {
        gap: 20px;
    }

    .text-apply li h5 br {
        display: block;
    }

    .text-apply li h5 span {
        padding-right: 0px;
    }

    .text-apply li .decs {
        padding-left: 0px;
        font-size: 14px;
    }

    .text-apply li .box-practice-test,
    .text-apply li .box-placement-test {
        padding: 25px 18px;
        flex-direction: column;
        gap: 20px;
    }

    .text-apply li .box-practice-test .box-click {
        gap: 20px;
        flex-direction: column;
        gap: 20px;
    }

    .text-apply li .box-practice-test .box-click .box-img {
        padding: 18px 17px 17px 23px;
    }

    .text-apply li .box-practice-test .box-click .box-img img {
        width: 38px;
        height: 38px;
    }

    .text-apply li .box-practice-test .box-click .title {
        max-width: 711px;
        width: 100%;
        min-width: 200px;
        font-size: 16px;
        text-align: center;
    }

    .text-apply li .box-practice-test .box-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .text-apply li .box-practice-test .box-button a {
        gap: 10px;
        width: 240px;
        height: 44px;
        border-radius: 8px;
        font-size: 12px;
    }

    .text-apply li .box-practice-test .box-button .btn-blue svg {
        width: 16px;
    }

    .text-apply li .box-placement-test .btn {
        font-size: 16px;
        text-align: center;
    }

    .text-apply li .box-placement-test .btn-center {
        gap: 8px;
        width: 180px;
        height: 44px;
        border-radius: 8px;
        font-size: 12px;
    }

    .text-apply li .box-placement-test .btn-center svg {
        width: 18px;
    }

    .content-univ .box-content .content-tab:nth-child(2) {
        margin-bottom: 75px;
    }

    .content-univ .box-content .content-tab .content-main {
        gap: 75px;
    }

    .tuition h2 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .tuition .decs-tuition {
        font-size: 12px;
    }

    .tuition .box-img {
        padding-top: 26px;
        overflow: auto;
    }

    .tuition .box-img img {
        width: 368px;
        height: 533px;
    }

    .tuition .box-cost {
        gap: 18px;
    }

    .tuition .box-cost .decs {
        font-size: 12px;
    }

    .tuition .table-cst {
        margin-top: 10px;
        width: 100%;
    }

    .tuition .table-cst th {
        padding: 10px 30px;
        font-size: 12px;
    }

    .tuition .table-cst th:first-child {
        width: 100%;
    }

    .tuition .table-cst td {
        padding: 10px 30px;
        font-size: 12px;
    }

    .tuition .box-cost .box-decs-tui .decs-tui {
        font-size: 12px;
    }

    .tuition.award .decs {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .tuition.award img {
        margin-top: 32px;
        height: 368px;
    }

    .tuition.requirements h6 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .tuition.requirements .decs {
        font-size: 12px;
    }

    .tuition.requirements .requirements-tab {
        margin-top: 18px;
        flex-direction: column;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item {
        width: 270px;
        font-size: 12px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item:nth-child(1) {
        padding-bottom: 3px;
    }

    .tuition.requirements .requirements-tab .tab-criteria .item:nth-child(2) {
        padding-top: 3px;
    }

    .tuition.requirements .requirements-tab .content-criteria .item .box-text {
        margin-top: 24px;
    }

    .tuition.requirements
        .requirements-tab
        .content-criteria
        .item
        .box-text
        ul
        li {
        margin-left: 20px;
        font-size: 12px;
    }

    .tuition .box-bursary {
        gap: 18px;
    }

    .tuition .box-bursary .decs {
        font-size: 12px;
    }

    .tuition .box-bursary .tab-bursary li {
        font-size: 12px;
        margin-left: 22px;
    }

    .tuition .box-bursary .tab-bursary .number li {
        font-size: 12px;
        margin-left: 14px;
    }

    .tuition .box-bursary .box-number .text {
        font-size: 12px;
    }

    .tuition .box-bursary .box-number .number li {
        font-size: 12px;
        margin-left: 18px;
    }

    .testing h2 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .testing .decs-test {
        font-size: 12px;
    }

    .testing img {
        margin-top: 35px;
    }

    .testing h6 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .testing .decs {
        font-size: 12px;
    }

    .testing .box-test {
        margin-top: 25px;
        flex-direction: column;
    }

    .testing .box-test .tab-test li {
        width: 270px;
        font-size: 12px;
        padding: 3px 0;
    }

    .testing .box-test .content-test .item {
        gap: 18px;
    }

    .content-app {
        overflow: auto;
    }

    .table-test {
        width: 700px;
        max-width: auto;
        min-width: auto;
    }

    .table-test th {
        padding: 8px;
        font-size: 14px;
    }

    .table-test th:first-child {
        border-radius: 10px 0 0;
        width: auto;
    }

    .table-test th:nth-child(2) {
        width: auto;
    }

    .table-test th:last-child {
        border-radius: 0 10px 0 0;
    }

    .table-test tbody td {
        padding: 8px;
        font-size: 14px;
    }

    .table-test tfoot td {
        padding: 8px 0;
        font-size: 14px;
    }

    .list-main li {
        margin-left: 14px;
        font-size: 12px;
    }

    .box-settle h2 {
        font-size: 28px;
    }

    .box-settle .box-decs {
        gap: 18px;
        padding: 18px 0 35px;
    }

    .box-settle .box-decs p {
        font-size: 12px;
    }

    .box-admission h6 {
        font-size: 18px;
        margin-bottom: 18px;
        margin-top: 75px;
    }

    .box-admission .decs {
        font-size: 12px;
        max-width: 1003px;
        width: 100%;
        min-width: 200px;
    }

    .box-admission .requirements-tab {
        margin-top: 25px;
        gap: 24px;
        flex-direction: column;
    }

    .box-admission .requirements-tab .tab-criteria .item {
        width: 200px;
        font-size: 12px;
    }

    .box-admission .requirements-tab .tab-criteria .item:nth-child(1) {
        padding-bottom: 3px;
    }

    .box-admission .requirements-tab .tab-criteria .item:nth-child(2) {
        padding-top: 3px;
    }

    .box-admission .requirements-tab .content-criteria .item .decs {
        margin-bottom: 18px;
    }

    .box-admission .requirements-tab .content-criteria .item .box-text ul li {
        margin-left: 18px;
        font-size: 12px;
    }

    .list-inter {
        gap: 27px;
        margin-top: 35px;
    }

    .list-inter .inter-box {
        gap: 24px;
        flex-direction: column;
    }

    .list-inter .inter-box h6 {
        width: 100%;
        font-size: 18px;
    }

    .list-inter .inter-box h6 br {
        display: none;
    }

    .list-inter .inter-box .box-decs {
        gap: 18px;
    }

    .list-inter .inter-box .box-decs p {
        font-size: 12px;
    }

    .about-content .box-content {
        padding: 75px 32px 0;
        gap: 75px;
    }

    .about-content .box-content .about-text {
        margin-top: 35px;
        gap: 18px;
    }

    .about-content .box-content .about-text h3 {
        font-size: 28px;
    }

    .about-content .box-content .about-text .decs {
        font-size: 12px;
        width: 100%;
    }

    .boxx-learn {
        gap: 4px;
        font-size: 12px;
    }

    .boxx-learn svg {
        width: 18px;
    }

    .accreditation-sampoerna {
        gap: 18px;
    }

    .accreditation-sampoerna h6 {
        font-size: 18px;
    }

    .accreditation-sampoerna .desc {
        font-size: 12px;
    }

    .alumni-sampoerna {
        gap: 18px;
    }

    .alumni-sampoerna h4 {
        font-size: 28px;
    }

    .alumni-sampoerna .desc {
        font-size: 12px;
    }

    .alumni-sampoerna iframe {
        height: 200px;
    }

    .img-about {
        gap: 18px;
    }

    .img-about h6 {
        font-size: 18px;
        text-align: center;
        width: 200px;
    }

    .governance-vision {
        padding: 30px 24px;
        border-radius: 10px;
        height: 600px;
        overflow: hidden;
    }

    .governance-vision.fet-vision {
        height: 700px;
    }

    .governance-vision .tab-ul {
        gap: 16px;
        margin-bottom: 40px;
    }

    .governance-vision .tab-ul .tab-li {
        width: 88px;
        height: 30px;
        font-size: 12px;
        border-radius: 10px;
    }

    .governance-vision .content-ul .content-li {
        flex-direction: column;
    }

    .governance-vision .content-ul .content-li h5 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .governance-vision .content-ul .content-li .decs {
        font-size: 12px;
        width: 100%;
    }

    .governance-vision .content-ul .content-li .decs.mision {
        width: 100%;
    }

    .governance-vision .content-ul .page-img {
        position: absolute;
        right: 0px;
    }

    .governance-vision .content-ul .content-li .page-img::after {
        width: 400px;
        height: 400px;
        top: 200px;
        left: 0px;
    }

    .governance-vision.fet-vision .content-ul .content-li .page-img::after {
        width: 400px;
        height: 400px;
        top: 300px;
        left: 0px;
    }

    .governance-vision.fet-vision .content-ul .content-li .page-img img {
        position: relative;
        z-index: 2;
        left: 0px;
        top: 250px;
        width: 244px;
        height: 394px;
        object-fit: cover;
    }

    .governance-vision .content-ul .content-li .page-img img {
        position: relative;
        z-index: 2;
        left: 0px;
        top: 150px;
        width: 244px;
        height: 394px;
        object-fit: cover;
    }

    .governanve-greeting h6 {
        margin-bottom: 32px;
        font-size: 26px;
    }

    .governanve-greeting .greeting-text {
        gap: 25px;
        flex-direction: column;
    }

    .governanve-greeting .greeting-text img {
        width: 280px;
        height: 322px;
        object-fit: cover;
        border-radius: 10px;
    }

    .governanve-greeting .greeting-text .box-qoutes .text-qoutes {
        font-size: 16px;
    }

    .governanve-greeting .greeting-text .box-qoutes .name-qoutes {
        font-size: 14px;
        padding: 18px 0 2px;
    }

    .governanve-greeting .greeting-text .box-qoutes .degree {
        font-size: 10px;
    }

    .governance-chart ul {
        grid-template-columns: repeat(auto-fit, minmax(220px, auto));
        margin-bottom: 35px;
        gap: 8px;
    }

    .governance-chart ul li {
        width: 220px;
    }

    .governance-chart ul li img {
        margin-bottom: 16px;
        width: 220px;
        height: 230px;
        object-fit: cover;
    }

    .governance-chart ul li .name {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .governance-chart ul li .position {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .governance-chart ul li .text {
        font-size: 10px;
    }

    .governance-chart .link-chart {
        gap: 8px;
    }

    .governance-chart .box-chart {
        gap: 6px;
        font-size: 12px;
    }

    .governance-chart .box-chart svg {
        width: 16px;
    }

    .accreditation-content {
        margin-top: 75px;
        padding: 0 32px;
    }

    .accreditation-text {
        gap: 20px;
    }

    .accreditation-text h3 {
        font-size: 28px;
    }

    .accreditation-text .desc {
        font-size: 12px;
    }

    .accreditation-text .text-articulation h6 {
        font-size: 12px;
    }

    .list-faculty .box-faculty {
        max-width: 1520px;
        width: 100%;
        padding: 100px 32px;
        gap: 75px;
    }

    .list-faculty .box-faculty .item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .list-faculty .box-faculty .item img {
        width: 100%;
        max-width: 100%;
        min-width: auto;
        height: 223px;
        object-fit: cover;
    }

    .list-faculty .box-faculty .item .box-text {
        padding: 0px 0px 16px 24px;
    }

    .list-faculty .box-faculty .item .box-text h2 {
        font-size: 28px;
    }

    .list-faculty .box-faculty .item .box-text .main-major {
        padding: 12px 0 18px;
        gap: 10px;
    }

    .list-faculty .box-faculty .item .box-text .main-major .box-major .text {
        font-size: 12px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .list-faculty .box-faculty .item .box-text .box-major {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
        row-gap: 16px;
    }

    .list-faculty .box-faculty .item .box-text .box-major .text.major {
        padding-left: 0px;
        border-left: none;
    }

    .list-faculty .box-faculty .item .box-text .more-info {
        gap: 8px;
        font-size: 12px;
    }

    .list-faculty .box-faculty .item .box-text .more-info svg {
        width: 18px;
    }

    .list-non-degree .box-non-degree {
        max-width: 1520px;
        width: 100%;
        padding: 100px 32px;
        gap: 75px;
    }

    .list-non-degree .box-non-degree .item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .list-non-degree .box-non-degree .item img {
        width: 100%;
        max-width: 100%;
        min-width: auto;
        height: 223px;
        object-fit: cover;
    }

    .list-non-degree .box-non-degree .item .box-text {
        padding: 0px 16px 16px 24px;
    }

    .list-non-degree .box-non-degree .item .box-text h2 {
        font-size: 25px;
    }

    .list-non-degree .box-non-degree .item .box-text .main-major {
        padding: 12px 0 18px;
        gap: 10px;
    }

    .list-non-degree .box-non-degree .item .box-text .main-major .box-major .text {
        font-size: 12px;
        padding-right: 0px;
        padding-left: 8px;
    }

    .list-non-degree .box-non-degree .item .box-text .box-major {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
        row-gap: 16px;
    }

    .list-non-degree .box-non-degree .item .box-text .box-major .text.major {
        padding-left: 0px;
        border-left: none;
    }

    .list-non-degree .box-non-degree .item .box-text .more-info {
        gap: 8px;
        font-size: 12px;
    }

    .list-non-degree .box-non-degree .item .box-text .more-info svg {
        width: 18px;
    }

    .tab-fob li,
    .tab-fet li,
    .tab-foe li,
    .tab-fas li,
    .tab-ss li,
    .tab-stuaff li  {
        font-size: 14px;
        height: 60px;
    }

    .content-fob .box-content .content-tab .display,
    .content-fet .box-content .content-tab .display,
    .content-foe .box-content .content-tab .display,
    .content-fas .box-content .content-tab .display,
    .content-ss .box-content .content-tab .display,
    .content-stuaff .box-content .content-tab .display {
        margin: 75px auto 0;
        gap: 75px;
    }

    .faculty-overview h2 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .faculty-overview .decs {
        font-size: 12px;
    }

    .faculty-program .question-program h5 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .faculty-program .question-program .decs {
        font-size: 12px;
    }

    .faculty-program .question-program .blue-title {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .faculty-program .tab-program .list-program li {
        grid-template-columns: 20px 200px;
        gap: 12px;
    }

    .faculty-program .tab-program .list-program li svg {
        width: 18px;
    }

    .faculty-program .tab-program .list-program li .decs {
        font-size: 12px;
    }

    .faculty-program .tab-program .content-program li {
        max-width: 517px;
        width: 100%;
        min-width: 300px;
        padding: 18px 28px;
        border-radius: 8px;
        font-size: 10px;
    }

    .box-academics {
        margin: 75px 0;
        padding: 35px 28px;
        gap: 35px;
        flex-direction: column;
    }

    .box-academics .position-staff {
        width: 175px;
    }

    .box-academics .position-staff li {
        font-size: 12px;
        width: 175px;
        margin: 0 0 10px;
    }

    .box-academics .position-staff li:last-child {
        padding-top: 10px;
    }

    .box-academics .academic-staff h5 {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .box-academics .academic-staff li .box-staff {
        gap: 12px;
    }

    .box-academics .academic-staff li .box-staff .item {
        width: 175px;
    }

    .box-staff .item img {
        width: 175px;
        height: 175px;
        object-fit: cover;
        margin-bottom: 18px;
    }

    .box-staff .item .name {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .box-staff .item .text-blue {
        font-size: 10px;
    }

    .box-staff .item .major {
        margin-top: 12px;
        font-size: 10px;
    }

    .box-alumni h5 {
        margin-bottom: 35px;
        font-size: 18px;
    }

    .box-alumni .alumni {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(175px, auto));
        gap: 18px;
    }

    .box-alumni .alumni img {
        width: 175px;
    }

    .box-graduates h5 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .box-graduates .decs {
        font-size: 12px;
    }

    .box-graduates .box-table {
        margin-top: 35px;
        gap: 12px;
        margin-bottom: 75px;
        align-items: left;
        justify-content: left;
        flex-direction: column;
    }

    .box-graduates .box-table.tbl-fob {
        margin-bottom: 35px;
    }

    .box-graduates .box-table img {
        width: 100%;
        max-width: 400px;
        min-width: 120px;
        object-fit: contain;
    }

    .box-graduates .list-graduates,
    .box-graduates.foe {
        margin-bottom: 75px;
    }

    .faculty-info {
        padding: 75px 32px;
        display: flex;
        align-items: left;
        gap: 18px;
        flex-wrap: wrap;
    }

    .faculty-info .box-info {
        width: 270px;
        border-radius: 8px;
        height: 148px;
    }

    .faculty-info .box-info .box-text {
        margin-left: 14px;
    }

    .faculty-info .box-info .box-text h5 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .faculty-info .box-info .box-text .more-info {
        font-size: 14px;
    }

    .faculty-info .box-info .box-text .more-info svg {
        width: 18px;
    }

    .faculty-info .box-info .box-img {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .faculty-info.bg {
        margin: 0px 0px;
    }

    .faculty-info .box-info .box-img::before {
        width: 260px;
        height: 420px;
        top: -90px;
        right: -140px;
    }

    .faculty-info .box-info .box-img img {
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 120px;
        height: 100%;
        object-fit: cover;
    }

    .home-experience.faculty {
        padding: 0px 0 0;
    }

    .home-experience.faculty .box-experience .box-place {
        position: relative;
        bottom: -6px;
    }

    .home-experience .box-experience .box-place a .svg-360 {
        width: 65px;
    }

    .faculty-qoutes img {
        height: 205px;
        border-radius: 10px;
    }

    .faculty-qoutes .qoutes {
        padding: 0 24px;
        font-size: 18px;
    }

    .faculty-concentrations h5 {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .faculty-concentrations .box-concentrations {
        gap: 16px;
        flex-direction: column;
    }

    .faculty-concentrations .box-concentrations .num-concentrations img {
        width: 45px;
        height: 45px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations,
    .faculty-concentrations .box-concentrations .additional-concentrations {
        max-width: 486px;
        width: 100%;
        min-width: 200px;
        height: 100%;
    }

    .faculty-concentrations .box-concentrations .num-concentrations h6 {
        font-size: 12px;
        margin: 12px 0 6px;
    }

    .faculty-concentrations .box-concentrations .num-concentrations .decs {
        font-size: 10px;
    }

    .faculty-concentrations .box-concentrations .additional-concentrations {
        padding: 28px 31px 25px;
        border-radius: 18px;
    }

    .faculty-concentrations
        .box-concentrations
        .additional-concentrations
        .list-additional {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .faculty-concentrations
        .box-concentrations
        .additional-concentrations
        .list-additional
        li {
        margin-left: 14px;
    }

    .faculty-concentrations .box-concentrations .additional-concentrations h5 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .faculty-experiential h5 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .faculty-experiential .decs {
        font-size: 12px;
    }

    .box-graduates .list-graduates li {
        margin-left: 18px;
        font-size: 12px;
    }

    .box-graduates .decs {
        font-size: 12px;
    }

    .box-career-pathways {
        gap: 18px;
    }

    .box-career-pathways .career-pathway-img {
        max-width: 368px;
        width: 100%;
        min-width: 200px;
        height: 154px;
        object-fit: cover;
    }

    .box-career-pathways .box-ceklis {
        grid-template-columns: repeat(2, minmax(160px, auto));
        gap: 16px;
    }

    .box-career-pathways .box-ceklis li {
        gap: 10px;
        font-size: 12px;
    }

    .box-career-pathways .box-ceklis li img {
        width: 18px;
    }

    .faculty-career-pathways h5 {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .degree-plan {
        padding: 45px 32px 0px;
        width: 100%;
        margin-top: 100px;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

    .degree-plan img {
        position: relative;
        bottom: -6px;
    }

    .degree-plan .box-img img {
        height: 280px;
    }

    .degree-plan .box-degree {
        gap: 16px;
        flex-direction: column;
    }

    .degree-plan .box-degree h5 {
        font-size: 18px;
    }

    .degree-plan .box-degree .box-consultation {
        gap: 8px;
        padding: 12px 20px;
        border-radius: 10px;
    }

    .degree-plan .box-degree .box-consultation .teks {
        font-size: 12px;
    }

    .degree-plan .box-degree .box-consultation svg {
        width: 18px;
    }

    .graduate-profile h5 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .table-graduates th {
        font-size: 12px;
        padding: 10px 6px;
    }

    .table-graduates td {
        padding: 10px 6px;
        font-size: 12px;
    }

    .faculty-stories {
        margin-bottom: 75px;
    }

    .faculty-stories h5 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .faculty-stories .decs {
        font-size: 12px;
    }

    .faculty-info .box-info .img-lop img {
        width: 120px;
        height: 100%;
        object-fit: cover;
    }

    .faculty-link {
        margin-bottom: 75px;
    }

    .faculty-link h6 {
        font-size: 12px;
        margin-bottom: 18px;
    }

    .faculty-link .box-link .link-visit {
        max-width: 100%;
        width: 100%;
        min-width: 200px;
        border-radius: 10px;
        padding: 20px 20px;
        gap: 16px;

        height: 142px;
    }

    .faculty-link .box-link .link-visit .title {
        font-size: 14px;
    }

    .faculty-link .box-link .link-visit .open-link {
        width: 178px;
        padding: 14px 0;
        gap: 8px;
        border-radius: 8px;
        font-size: 12px;
    }

    .faculty-link .box-link .link-visit .open-link svg {
        width: 20px;
    }

    .faculty-link .box-link {
        gap: 20px;
        flex-direction: column;
    }

    .faculty-career-pathways .decs {
        margin-bottom: 35px;
        font-size: 12px;
    }

    .faculty-overview .box-decs {
        gap: 14px;
    }

    .faculty-overview .box-decs .list-decs li {
        margin-left: 18px;
        font-size: 12px;
    }

    .faculty-competencies .box-competencies {
        gap: 10px;
    }

    .faculty-competencies .box-competencies .item {
        gap: 6px;
        padding: 8px 20px;
        font-size: 10px;
    }
    .faculty-competencies .box-competencies .item svg {
        width: 18px;
    }
    .governance-vision .content-ul .content-li .page-text .list-mission li {
        font-size: 12px;
        margin-left: 14px;
    }

    .program-faculty {
        gap: 75px;
        margin-bottom: 75px;
    }

    .program-faculty .box-program {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .program-faculty .box-program h5 {
        max-width: 100%;
        width: 100%;
        min-width: 200px;
        font-size: 18px;
    }

    .program-faculty .box-program .box-list li {
        font-size: 12px;
    }

    .box-laboratories h5 {
        margin: 0 32px;
        font-size: 18px;
        margin-bottom: 32px;
    }

    .box-laboratories img {
        width: 100%;
        height: 148px;
        object-fit: cover;
    }

    .faculty-bachelor h5 {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .faculty-bachelor .box-bachelor {
        padding: 21px 30px 16px;
        border-radius: 10px;
    }

    .faculty-bachelor .box-bachelor h6 {
        font-size: 12px;
        margin-bottom: 14px;
    }

    .faculty-bachelor .box-bachelor .box-decs .decs {
        font-size: 12px;
    }

    .faculty-bachelor .box-bachelor .box-decs {
        gap: 14px;
    }

    .shape-schedule.foe-schedule {
        margin-top: 75px;
    }

    .faculty-competencies h5 {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .campus-life-content {
        gap: 75px;
    }

    .box-student-affairs {
        margin-top: 75px;
    }

    .box-student-affairs h6,
    .box-government-clubs h6,
    .box-inspiring-learning h6 {
        font-size: 18px;
    }

    .box-student-affairs img {
        max-width: 1520px;
        width: 100%;
        min-width: 200px;
        object-fit: cover;
        height: 320px;
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .link-button {
        gap: 8px;
        font-size: 12px;
        padding: 12px 28px;
        border-radius: 8px;
    }

    .link-button svg {
        width: 18px;
    }

    .box-government-clubs {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
    }

    .box-government-clubs .decs {
        max-width: 1260px;
        width: 100%;
        min-width: 200px;
        margin-top: 28px;
        margin-bottom: 28px;
        font-size: 12px;
    }

    .box-government-clubs .box-clubs-img .slideshow {
        gap: 20px;
        max-width: 98.7vw;
        margin-bottom: 24px;
        position: relative;
    }

    .box-government-clubs .box-clubs-img img {
        width: 400px;
        height: 300px;
    }

    .box-government-clubs .box-clubs-img img:nth-child(2) {
        width: 400px;
        height: 330px;
        object-fit: cover;
    }

    .box-inspiring-learning {
        margin-bottom: 100px;
    }

    .box-inspiring-learning img {
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .box-student-affairs img {
        max-width: 1520px;
        width: 100%;
        min-width: 200px;
        object-fit: cover;
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .student-affairs-content {
        margin-top: 75px;
        gap: 75px;
        padding: 0 32px;
    }

    .box-campus-orientation,
    .box-comprehensive {
        gap: 35px;
    }

    .box-campus-orientation .box-text,
    .box-comprehensive .box-text {
        gap: 20px;
    }

    .box-campus-orientation .box-text h3 {
        font-size: 28px;
    }

    .box-campus-orientation .box-text .decs {
        font-size: 12px;
    }

    .box-comprehensive .box-text h5 {
        font-size: 18px;
    }

    .box-comprehensive .box-text .decs {
        font-size: 12px;
        width: 100%;
    }

    .box-list-comprehensive {
        flex-direction: column;
    }

    .box-list-comprehensive .list-comprehensive .item {
        width: 208px;
        font-size: 12px;
        padding: 6px 0;
    }

    .content-comprehensive .item {
        font-size: 12px;
        gap: 20px;
    }

    .voice-sampoerna.student {
        margin-bottom: 75px;
    }

    .student-government-content {
        gap: 75px;
        margin-top: 75px;
        padding: 0 32px;
    }

    .student-government-content .box-img img {
        width: 100%;
        height: 100%;
    }

    .student-government-content .box-overview-student {
        width: 100%;
        gap: 35px;
    }

    .student-government-content .box-overview-student .box-decs {
        gap: 20px;
    }

    .student-government-content .box-overview-student .box-decs h3 {
        font-size: 28px;
    }

    .student-government-content .box-overview-student .box-decs .decs {
        font-size: 12px;
        width: 100%;
    }

    .student-government-content .box-overview-student .icon-club {
        display: grid;
        justify-content: space-between;
        gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(175px, auto));
    }

    .student-government-content .box-overview-student .icon-club .item {
        width: 175px;
    }

    .student-government-content .box-overview-student .icon-club .item img {
        width: 56px;
        height: 56px;
    }

    .student-government-content .box-overview-student .icon-club .item .text {
        padding: 12px 0 4px;
        font-size: 12px;
        text-align: center;
    }

    .btn-see-more {
        gap: 6px;
        font-size: 12px;
    }

    .btn-see-more svg {
        width: 18px;
    }

    .content-club {
        margin-top: 75px;
        gap: 75px;
    }

    .content-club .item-club {
        padding: 42px 32px;
        gap: 32px;
        flex-direction: column;
    }

    .content-club .item-club .box-img {
        max-width: 1100px;
        min-width: 200px;
        width: 100%;
        height: 178px;
    }

    .content-club .item-club.right {
        padding: 36px 24px;
        flex-direction: column-reverse;
    }

    .content-club .item-club .box-text {
        max-width: 745px;
        min-width: 300px;
        width: 100%;
        gap: 18px;
    }

    .content-club .item-club .box-text .title {
        gap: 18px;
        font-size: 18px;
    }

    .content-club .item-club .box-text .title img {
        width: 22px;
        height: 22px;
    }

    .content-club .item-club .box-text .decs {
        font-size: 12px;
    }

    .content-club .item-club .box-text .list-student-club .item {
        font-size: 12px;
        margin-left: 18px;
    }

    .box-event-club {
        padding: 75px 32px;
        gap: 18px;
    }

    .box-event-club h6 {
        font-size: 18px;
        max-width: 1040px;
        min-width: 200px;
        width: 100%;
        line-height: 1.5;
    }

    .box-event-club .list-activities-club li {
        font-size: 12px;
        margin-left: 16px;
        margin-bottom: 8px;
    }

    .spac-content,
    .safety-environment-content,
    .it-departement-content,
    .academic-registry-content,
    .library-content,
    .facilities-content,
    .student-rights-content {
        gap: 75px;
    }

    .content-explanation {
        margin-top: 75px;
    }

    .content-explanation,
    .content-department {
        gap: 18px;
    }

    .content-explanation h3,
    .content-department h3 {
        font-size: 28px;
    }

    .content-explanation .decs,
    .prospective-text .decs,
    .content-department .decs {
        font-size: 12px;
    }

    .content-explanation .decs,
    .prospective-text .decs,
    .content-department .decs {
        font-size: 12px;
    }

    .prospective-text,
    .grading-text {
        margin-bottom: 75px;
    }

    .prospective-text,
    .grading-text,
    .content-resources {
        gap: 18px;
    }

    .prospective-text h5,
    .grading-text h5,
    .content-resources h5 {
        font-size: 18px;
    }

    .box-prospective,
    .content-proquest {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .tab-prospective .item,
    .tab-prospective-safety .item,
    .tab-prospective-it .item,
    .tab-proquest .item {
        width: 200px;
        padding: 3px 0;
        font-size: 12px;
    }

    .content-prospective .item,
    .content-prospective-safety .item,
    .content-prospective-it .item,
    .box-proquest .item {
        gap: 18px;
    }

    .principles {
        font-size: 12px;
    }

    .principles li {
        margin-left: 18px;
    }

    .content-prospective-it .item .information-system {
        font-size: 12px;
    }

    .content-prospective-it .item li {
        list-style-type: disc;
        margin-left: 10px;
    }

    .content-prospective-it .item .table-departement {
        max-width: 1200px;
        width: 100%;
        min-width: 200px;
        border-collapse: collapse;
    }

    .content-prospective-it .item .table-departement th {
        padding: 6px;
        font-size: 12px;
    }

    .content-prospective-it .item .table-departement th:first-child {
        border-radius: 8px 0 0 0;
    }

    .content-prospective-it .item .table-departement th:last-child {
        border-radius: 0 8px 0 0;
    }

    .content-prospective-it .item .table-departement tbody td {
        padding: 6px;
        font-size: 12px;
    }

    .content-prospective-it .item .box-service h6 {
        font-size: 12px;
    }

    .content-prospective-it .item .box-service .decs {
        font-size: 12px;
    }

    .grading-text .decs,
    .content-resources .decs {
        font-size: 12px;
    }

    .content-tbl-grades {
        overflow: auto;
    }
    .tbl-grades {
        max-width: 1420px;
        width: 100%;
        min-width: 814px;
    }

    .tbl-grades th {
        border-radius: 10px;
        padding: 8px;
        font-size: 12px;
    }

    .tbl-grades td {
        border-radius: 10px;
        padding: 8px;
        font-size: 12px;
    }

    .grading-text .box-years {
        margin-top: 35px;
        gap: 35px;
    }

    .box-catalogoue {
        gap: 30px;
        flex-direction: column;
    }

    .box-catalogoue .course-list {
        padding: 20px 26px;
        border-radius: 10px;
        gap: 18px;
    }

    .box-catalogoue .course-list h6,
    .grading-text .box-general h6,
    .grading-text .box-schedule h6 {
        font-size: 18px;
    }

    .box-catalogoue .course-list .decs,
    .grading-text .box-general .decs {
        font-size: 12px;
    }

    .box-catalogoue .course-list .course-btn {
        gap: 10px;
        padding: 14px 28px;
        font-size: 12px;
        border-radius: 12px;
    }

    .box-catalogoue .course-list .course-btn svg {
        width: 18px;
    }

    .box-catalogoue .course-list .course-btn.course-1 {
        width: 205px;
    }

    .box-catalogoue .course-list .course-btn.course-2 {
        width: 168px;
    }

    .grading-text .box-general {
        padding: 20px 26px;
        border-radius: 10px;
        gap: 18px;
    }

    .grading-text .box-general .btn-click {
        padding: 12px 28px;
        gap: 10px;
        border-radius: 10px;
        font-size: 12px;
    }

    .grading-text .box-general .btn-general-class {
        gap: 30px;
    }

    .grading-text .box-general .btn-click svg {
        width: 18px;
    }

    .grading-text .box-schedule {
        gap: 22px;
    }

    .grading-text .box-schedule .class-schedule {
        max-width: 600px;
        min-width: 200px;
        width: 100%;
        padding: 20px 28px;
        font-size: 12px;
        border-radius: 8px;
    }

    .grading-text .box-schedule .box-class {
        gap: 16px;
        flex-wrap: wrap;
    }

    .content-department .collective-list {
        font-size: 12px;
    }

    .content-department .collective-list li {
        margin-left: 24px;
    }

    .library-content,
    .facilities-content,
    .student-rights-content {
        margin: 75px 0px;
    }

    .box-proquest .item .decs {
        font-size: 12px;
    }

    .content-department .collective-list {
        font-size: 12px;
    }

    .content-department .collective-list li {
        margin-left: 24px;
    }

    .content-explanation h3,
    .content-department h3 {
        font-size: 28px;
    }

    .box-skors {
        gap: 12px;
    }

    .box-skors .blue-skors {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        font-size: 12px;
    }

    .box-skors .blue-skors h2 {
        font-size: 32px;
    }

    .box-skors .data-skors .item .data {
        margin: 4px;
        padding: 8px;
        border-radius: 8px;
        font-size: 12px;
        text-wrap: nowrap;
    }

    .box-skors .data-skors .item .data:nth-child(1),
    .box-skors .data-skors .item .data:nth-child(3) {
        width: 100%;
    }

    .content-resources .box-student {
        padding: 16px 18px;
        border-radius: 8px;
    }

    .content-resources .box-student h6 {
        margin-bottom: 12px;
        font-size: 14px;
    }

    .content-resources .box-student .list-student .item {
        font-size: 12px;
        margin-left: 12px;
    }

    .content-resources .box-student .list-student .item.student {
        margin-left: 32px;
    }

    .slideshow-facilities {
        width: 100%;
        height: 270px;
    }

    .contact-feedback .box-feedback {
        padding: 75px 30px;
        max-width: auto;
        width: 100%;
    }

    .contact-feedback .box-feedback .contact-text .title {
        font-size: 28px;
    }

    .contact-feedback .box-feedback .contact-text .decs {
        font-size: 12px;
        margin: 16px 0 30px;
    }

    .shape-schedule .box-schedule .shape-btn button svg {
        width: 18px;
    }

    .as-overview button svg {
        width: 18px;
    }

    .faculty-statement {
        padding: 30px 24px 0px;
        border-radius: 8px;
    }

    .faculty-statement.foe-statement {
        height: 600px;
    }

    .faculty-statement.fas-statement {
        height: 500px;
    }

    .faculty-statement.governance-statement {
        height: 540px;
    }

    .faculty-statement.fas-statement .content-statement ul p {
        padding-bottom: 40px;
    }

    .faculty-statement.governance-statement
        .content-statement
        ul:first-child
        p {
        padding-bottom: 36px;
    }

    .faculty-statement .tab-statement {
        gap: 16px;
        padding-bottom: 16px;
    }

    .faculty-statement .tab-statement li {
        padding: 6px 26px;
        border-radius: 6px;
        font-size: 12px;
    }

    .faculty-statement.foe-statement .content-statement .content-img img {
        height: 300px;
        left: auto;
        right: -40px;
        bottom: -320px;
        position: absolute;
    }

    .faculty-statement.fet-statement .content-statement .content-img img {
        height: 300px;
        left: auto;
        right: -40px;
        bottom: -300px;
        position: absolute;
    }

    .faculty-statement.fas-statement .content-statement .content-img img {
        height: 300px;
        left: auto;
        right: -40px;
        bottom: -300px;
        position: absolute;
    }

    .faculty-statement.governance-statement
        .content-statement
        .content-img
        img {
        height: 300px;
        left: auto;
        right: -40px;
        bottom: -300px;
        position: absolute;
    }

    .faculty-statement.foe-statement .content-statement .content-img::before {
        width: 300px;
        height: 300px;
        left: auto;
        right: -120px;
        bottom: -360px;
    }

    .faculty-statement.fet-statement .content-statement .content-img::before {
        width: 300px;
        height: 300px;
        left: auto;
        right: -120px;
        bottom: -330px;
    }

    .faculty-statement.fas-statement .content-statement .content-img::before {
        width: 300px;
        height: 300px;
        left: auto;
        right: -120px;
        bottom: -330px;
    }

    .faculty-statement.governance-statement
        .content-statement
        .content-img::before {
        width: 300px;
        height: 300px;
        left: auto;
        right: -120px;
        bottom: -330px;
    }

    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:first-child {
        padding-top: 80px;
    }

    .faculty-statement .content-statement .content-text ul h3 {
        font-size: 24px;
        padding-bottom: 16px;
    }

    .faculty-statement .content-statement .content-text ul p {
        font-size: 12px;
    }

    .faculty-statement.foe-statement .content-statement .content-text ul p {
        padding-bottom: 26px;
    }

    .faculty-statement.foe-statement .content-statement .content-text ul li {
        font-size: 10px;
        line-height: 1.5;
    }

    .faculty-statement .content-statement .content-text ul li {
        font-size: 12px;
    }

    .faculty-statement .content-statement {
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
    }

    .home-diverse .box-diverse h3 {
        font-size: 16px;
        margin-bottom: 20px;
        margin-left: 32px;
    }

    .home-diverse {
        margin: 0;
    }

    .home-diverse .box-diverse ul {
        flex-direction: column;
    }

    .home-diverse .box-diverse ul li img {
        height: 300px;
    }

    .home-diverse .box-diverse ul li .box-text {
        padding: 32px 24px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

    .home-diverse .box-diverse ul li .box-text .major {
        font-size: 18px;
        margin-bottom: 0px;
    }

    .home-diverse .box-diverse ul li:before {
        height: 100px;
    }

    .home-diverse .box-diverse ul li .box-text .more-info {
        font-size: 18px;
    }

    .home-diverse .box-diverse ul li .box-text .more-info p {
        text-wrap: nowrap;
    }

    .home-diverse .box-diverse ul li .box-text .more-info svg {
        width: 24px;
    }

    .home-collaboration {
        margin: 75px 32px;
    }

    .home-collaboration .box-collaboration .box-img li .layer-img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        object-position: center;
    }

    .home-collaboration .box-collaboration .box-img {
        display: flex;
        overflow: hidden;
        flex-direction: column;
        width: 100%;
    }

    .home-collaboration .box-collaboration .box-img li .box-info {
        position: absolute;
        top: 0;
        right: 0;
    }

    .box-collaboration .box-img li .box-info::before {
        content: "";
        width: 1000px;
        height: 100%;
        /* background: linear-gradient(
      to right,
      rgb(101, 95, 95),
      rgba(101, 95, 95, 0.3)
    ); */
        position: absolute;
    }

    .box-collaboration .box-img li .box-info {
        position: absolute;
        padding: 10px;
    }

    .box-collaboration .box-img li .box-info .box-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .box-collaboration .box-img li .box-info .box-logo img:first-child {
        width: 88px;
    }

    .box-collaboration .box-img li .box-info .box-logo img:last-child {
        width: 84px;
    }

    .box-collaboration h3 {
        font-size: 16px;
    }

    .box-collaboration .decs {
        font-size: 10px;
        padding: 4px 0 23px;
    }

    .box-collaboration .box-directed .body-directed,
    .box-collaboration .box-directed .header-directed {
        padding: 4px 28px;
    }

    .box-collaboration .box-directed .header-directed {
        border-radius: 10px 10px 0 0;
    }

    .box-collaboration .box-directed .body-directed {
        border-radius: 0 0 10px 10px;
    }

    .box-collaboration .box-directed .header-directed p {
        font-size: 10px;
        line-height: 1.2;
    }

    .box-collaboration .box-directed .body-directed .area {
        font-size: 10px;
        line-height: 1.3;
    }

    .box-collaboration .box-directed .body-directed .area:nth-child(2) {
        padding: 8px 0 9px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar {
        gap: 3px;
    }

    .box-collaboration .box-directed .body-directed .info-contact-sampoerna {
        padding-top: 10px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar
        img {
        width: 14px;
    }

    .box-collaboration
        .box-directed
        .body-directed
        .info-contact-sampoerna
        .link-bar
        span {
        font-size: 10px;
    }

    .content-prospective .item .walk-in-content {
        overflow: auto;
    }

    .content-prospective .item table {
        max-width: 1000px;
        width: 100%;
        min-width: 600px;
        border-radius: 12px;
    }

    .content-prospective .item table th:first-child {
        border-radius: 8px 0 0 0;
    }

    .content-prospective .item table th {
        padding: 10px;
        font-size: 12px;
    }

    .content-prospective .item table th:last-child {
        border-radius: 0 8px 0 0;
    }

    .content-prospective .item table td {
        padding: 10px;
        font-size: 12px;
    }
}
/* 1000 */

@media screen and (max-width: 860px) {
    .home-updates .box-updates {
        position: relative;
    }

    .home-updates .box-updates .box-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .home-updates .box-updates .box-title h4 {
        font-size: 16px;
        font-weight: 700;
    }

    .home-updates .box-updates .box-title .more-info {
        display: flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        bottom: -20px;
    }

    .home-updates .box-updates .box-title .more-info .text-link {
        text-decoration: underline;
        text-underline-offset: 4px;
        color: var(--dark-blue);
        font-weight: 800;
        font-size: 12px;
    }

    .home-updates .box-updates .box-title .more-info svg {
        width: 22px;
    }

    .home-updates .box-updates .box-news {
        display: flex;
        gap: 16px;
        grid-template-columns: auto;
        justify-content: space-between;
        overflow: hidden;
        overflow-x: auto;
    }

    .home-updates .box-updates .box-news .item-news {
        width: 280px;
        height: 380px;
        /* overflow: hidden; */
    }

    .home-updates .box-news .item-news img {
        width: 280px;
        height: 190px;
        object-fit: cover;
    }

    .home-updates .box-news .item-news .content-news {
        margin-top: 20px;
    }

    .home-updates .box-news .item-news .content-news .date {
        font-size: 10px;
        font-weight: 400;
        color: var(--slate-grey);
    }

    .home-updates .box-news .item-news .content-news .title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        margin: 4px 0;
        color: var(--black);
    }

    .home-updates .box-news .item-news .content-news .decs {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--black);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
    }

    .home-shape {
        position: relative;
        background-color: var(--sky-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100px;
        padding-top: 0px;
    }

    .home-shape .box-shape {
        max-width: auto;
        width: 100%;
        padding: 50px 70px 0;
    }

    .home-shape .box-shape img {
        position: relative;
        top: auto;
        /* bottom: 0px; */
        left: 50%;
        transform: translateX(-50%);
        height: 300px;
        bottom: -5px;
    }

    .home-shape .box-shape .apply {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap: 22px;
        margin-bottom: 26px;
    }

    .home-shape .box-shape .apply .decs h5 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;
        text-align: center;
    }

    .home-shape .box-shape .apply .decs p {
        width: 100%;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
    }

    .home-shape .box-shape .apply .btn-apply {
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 10px;
        color: var(--white);
        padding: 12px 28px;
        background-color: var(--dark-blue);
    }

    .home-shape .box-shape .apply .btn-apply p {
        font-size: 12px;
        font-weight: 700;
    }

    .home-shape .box-shape .apply .btn-apply svg {
        width: 22px;
    }

    .home-shape .box-shape .apply .btn-apply svg path {
        stroke: var(--white);
    }

    .difference-grid .difference-path .difference-part .part-text .title {
        font-size: 12px;
        font-weight: 700;
        color: var(--white);
    }

    .difference-path .difference-part .part-text .decs {
        font-size: 9px;
        font-weight: 400;
        color: var(--white);
    }

    .difference-why h5 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 32px;
    }

    .box-career-pathways {
        gap: 24px;
        flex-direction: column;
    }

    .box-career-pathways .box-ceklis {
        grid-template-columns: repeat(2, minmax(100px, auto));
        justify-content: left;
    }

    .box-career-pathways .box-ceklis li img {
        width: 16px;
    }

    .slideshow-facilities {
        width: 100%;
        height: 200px;
    }
}
/* phablet (767 - 481) */

@media screen and (max-width: 760px) {

    .as-overview .container-overview {
        display: flex;
        gap: 28px;
    }

    .as-overview .container-overview li {
        background-color: var(--main-blue);
        padding: 17px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        border-radius: 10px;
        aspect-ratio: 1 / 0.5;
        width: 45%;
    }

    .vision-mission-ie {
        margin-top: 5rem;
        margin-bottom: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .home-schedule .box-schedule .title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .home-schedule .box-schedule .cont-events {
        display: flex;
        flex-direction: column;
        grid-template-columns: repeat(
            2,
            1fr
        ); /* Create two equal-width columns */
        gap: 10px; /* Optional: spacing between items */
        width: 100%;
        justify-content: space-between;
        column-gap: 0px;
    }

    .home-schedule .box-schedule .cont-events .box-event {
        display: flex;
        align-items: stretch;
    }

    .home-schedule .box-schedule .cont-events .box-event .event-date,
    .home-schedule .box-schedule .cont-events .box-event .event-text {
        display: flex;
        align-items: center; /* Centers text vertically */
        padding: 12px 24px;
        border-radius: 5px;
    }
    .home-schedule .box-schedule .cont-events .box-event .event-date {
        width: 85px;
        background-color: var(--main-blue);
        padding: 6px 11px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
        color: var(--white);
    }

    .home-schedule .box-schedule .cont-events .box-event .event-text {
        width: 100%;
        flex: 1;
        background-color: var(--light-grey);
        padding: 6px 11px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 500;
        color: var(--main-blue);
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(4) {
        grid-column: 1;
        grid-row: 4;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(5) {
        grid-column: 1;
        grid-row: 5;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(7) {
        grid-column: 2;
        grid-row: 2;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(8) {
        grid-column: 2;
        grid-row: 3;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(9) {
        grid-column: 2;
        grid-row: 4;
    }

    .home-schedule .box-schedule .cont-events .box-event:nth-child(10) {
        grid-column: 2;
        grid-row: 5;
    }

    .home-schedule {
        padding: 75px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pathway-bridge {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:first-child {
        padding-top: 60px;
    }
}

@media screen and (max-width: 730px) {
    .home-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-content .box-content {
        max-width: auto;
        width: 100%;
        height: 100%;
    }

    .home-content .box-content .title {
        font-size: 18px;
        font-weight: 700;
        padding-left: 30px;
    }

    .home-content .box-content .list-content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: auto;
        overflow: hidden;
        overflow-x: auto;
        padding: 20px;
    }
    .home-experience {
        padding: 75px 0;
    }

    .home-experience .box-experience .cont-title {
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 30px;
    }

    .home-experience .box-experience .cont-title .box-title {
        min-width: auto;
    }

    .home-experience .box-experience .cont-title .box-title h5 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 18px;
    }

    .home-experience .box-experience .cont-title .box-title .desc {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 0px;
    }

    .home-experience .box-experience .box-place {
        position: relative;
    }

    .home-experience .box-experience .box-place .img-place {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .home-experience .box-experience .box-place .svg-360 {
        position: absolute;
        width: 65px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .home-graduates .box-graduates .cont-title .box-title h5 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .home-graduates .box-graduates .cont-title .box-title .desc {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .home-graduates .box-graduates .slider {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .home-graduates .box-graduates .slider .box-jobs {
        display: flex;
        gap: 16px; /* Adjust gap between images if needed */
        animation: scroll 60s linear infinite;
        width: max-content;
    }

    .home-graduates .box-graduates .slider .box-jobs img {
        height: 32px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

    .home-graduates .box-graduates .slider .box-jobs img {
        object-fit: contain;
    }

    .pathway-years .img-years {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
    }

    .pathway-years .img-years .years-3 {
        width: 100%;
        height: auto;
    }

    .box-government-clubs .box-clubs-img img {
        width: 202px;
        height: 207px;
    }

    .box-government-clubs .box-clubs-img img:nth-child(2) {
        width: 250px;
        height: 256px;
        object-fit: cover;
    }
}

@media screen and (max-width: 700px) {
    .faculty-statement.fet-statement {
        height: 556px;
    }
}

@media screen and (max-width: 650px) {
    .faculty-program .tab-program {
        display: flex;
        gap: 42px;
        flex-direction: column;
    }

    .box-inspiring-learning img {
        height: 300px;
    }

    .box-student-affairs img {
        height: 300px;
    }

    .box-skors {
        gap: 12px;
    }

    .box-skors .blue-skors {
        height: 160px;
        border-radius: 10px;
        font-size: 8px;
    }

    .box-skors .blue-skors h2 {
        font-size: 32px;
    }

    .box-skors .data-skors .item .data {
        margin: 4px;
        padding: 6px;
        border-radius: 8px;
        font-size: 8px;
        text-wrap: nowrap;
    }

    .box-skors .data-skors .item .data:nth-child(1),
    .box-skors .data-skors .item .data:nth-child(3) {
        width: 100%;
    }

    .slideshow-facilities {
        width: 100%;
        height: 160px;
    }

    .faculty-statement.fas-statement {
        height: 520px;
    }

    .faculty-statement.fas-statement .content-statement ul p {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 625px) {
    .core-competencies .choose-competencies {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .core-competencies .choose-competencies .content-competencies {
        width: 100%;
    }
}

@media screen and (max-width: 660px) {
    .blue-apply {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--sky-blue);
        padding: 30px 30px;
    }

    .blue-apply .box-apply {
        max-width: auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap: 30px;
    }

    .blue-apply .box-apply .text-apply {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }

    .blue-apply .box-apply .btn-apply,
    .box-shape .content-shape .btn-apply {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 8px;
        background-color: var(--main-blue);
    }

    .blue-apply .box-apply .btn-apply p,
    .box-shape .content-shape .btn-apply p {
        color: var(--white);
        font-size: 12px;
        font-weight: 700;
    }

    .blue-apply .box-apply .btn-apply svg,
    .box-shape .content-shape .btn-apply svg {
        width: 18px;
    }

    .tuition.award img {
        margin-top: 32px;
        height: 200px;
    }
}

@media screen and (max-width: 600px) {
    .dynamic-container .box-content {
        padding: 75px 32px;
        flex-direction: column;
        gap: 24px;
    }
    .news-bg img {
        width: 100%;
        min-height: 100vh;
        object-fit: cover;
        object-position: 45% 20%;
    }

    .academic-list {
        margin: 75px 16px;
    }

    .academic-list .box-academic-uni .academic-part .academic-img {
        max-width: 368px;
        width: 100%;
        min-width: 200px;
        height: 223px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic .title {
        font-size: 18px;
    }

    .academic-list .box-academic-uni .academic-part .box-academic .decs {
        font-size: 12px;
        margin: 14px 0;
    }

    .content-voice li .box-voices .img-voice img {
        width: 130px;
        height: 190px;
        object-fit: cover;
    }

    .faculty-statement .content-statement .content-text ul p {
        font-size: 12px;
    }

    .home-diverse .box-diverse ul li img {
        height: 240px;
    }

    .home-collaboration .box-collaboration .box-img li .layer-img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        object-position: center;
    }

    .faculty-statement.governance-statement {
        height: 550px;
    }

    .faculty-statement.governance-statement
        .content-statement
        ul:first-child
        p {
        padding-bottom: 36px;
    }

    .faculty-link .box-link .link-visit .open-link {
        width: 160px;
        padding: 8px;
        gap: 8px;
    }

    .faculty-link .box-link .link-visit .open-link svg {
        width: 18px;
    }
}

@media screen and (max-width: 560px) {
    .content-explore .box-explore .explore-img img {
        height: 384px;
        width: 100%;
    }

    .tab-univ.univ-admission,
    .tab-req {
        flex-wrap: wrap;
    }

    .governance-chart ul {
        grid-template-columns: repeat(auto-fit, minmax(175px, auto));
        margin-bottom: 35px;
        gap: 8px;
    }

    .governance-chart ul li {
        width: 175px;
    }

    .governance-chart ul li img {
        margin-bottom: 16px;
        width: 175px;
        height: 185px;
        object-fit: cover;
    }

    .tab-fob,
    .tab-fet,
    .tab-foe,
    .tab-fas,
    .tab-ss,
    .tab-stuaff {
        flex-wrap: wrap;
    }

    .box-alumni .alumni {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
        gap: 18px;
    }

    .box-alumni .alumni img {
        max-width: 168px;
        width: 100%;
        min-width: 100px;
    }

    .grading-text .box-general .btn-click {
        padding: 12px 18px;
        gap: 10px;
        border-radius: 10px;
        font-size: 12px;
    }

    .grading-text .box-general .btn-general-class {
        gap: 12px;
    }

    .slideshow-facilities {
        width: 100%;
        height: 140px;
    }

    .faculty-statement.foe-statement .content-statement .content-text ul p {
        font-size: 12px;
        /* padding-bottom: 30px; */
    }

    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:first-child {
        padding-top: 45px;
    }

    .faculty-statement.fet-statement {
        height: 575px;
    }
}

@media screen and (max-width: 500px) {
    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:last-child {
        margin-bottom: 180px;
    }

    .faculty-statement.fet-statement {
        height: 590px;
    }

    .faculty-statement.fas-statement {
        height: 540px;
    }
}

@media screen and (max-width: 460px) {

    .as-overview .container-overview li {
        background-color: var(--main-blue);
        padding: 17px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        border-radius: 10px;
        aspect-ratio: 1 / 0.5;
        width: 100%;
        height: auto;
    }

    .news-highlight .box-highlight .grid-news {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, auto));
        gap: 15px;
        justify-content: space-between;
    }
    .news-highlight .box-highlight .grid-news .box-news {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .news-highlight .box-highlight .grid-news .box-news img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        margin-bottom: 21px;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .date {
        font-size: 10px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--slate-grey);
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .title {
        font-size: 14px;
        font-weight: 700;
        margin: 6px 0;
    }
    .news-highlight .box-highlight .grid-news .box-news .box-content .desc {
        font-size: 12px;
        font-weight: 400;
        /*  */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        line-height: 1.5;
    }

    .news-highlight .box-highlight .main-news img {
        width: 100%;
        height: 387px;
        object-fit: cover;
    }

    .news-highlight .box-highlight .main-news .box-news {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 30px 15px;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0, 0.1),
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0.9)
        );
    }

    .news-highlight .box-highlight .main-news .box-news .title {
        font-size: 14px;
        font-weight: 700;
        max-width: 300px;
        width: 100%;
        min-width: 300px;
    }

    .news-highlight .box-highlight .main-news .box-news .desc {
        font-size: 10px;
        font-weight: 400;
        max-width: 300px;
        width: 100%;
        min-width: 300px;
        margin: 8px 0;
        line-height: 1.5;
        color: var(--dark-blue);
    }

    .news-highlight .box-highlight .main-news .box-news .more-news {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .news-highlight .box-highlight .main-news .box-news .more-news .text-more {
        font-size: 12px;
        font-weight: 700;
        color: var(--main-blue);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .faculty-statement.governance-statement {
        height: 550px;
    }

    .faculty-statement.governance-statement
        .content-statement
        ul:first-child
        p {
        padding-bottom: 0px;
    }

    .faculty-statement.governance-statement .content-statement ul:last-child p {
        padding-bottom: 200px;
    }

    .faculty-statement.fet-statement .content-statement ul:last-child {
        padding-bottom: 200px;
    }
}

@media screen and (max-width: 450px) {
    .home-shape .box-shape img {
        position: relative;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        height: 260px;
        bottom: -5px;
    }

    .governance-chart ul {
        grid-template-columns: repeat(auto-fit, minmax(130px, auto));
        margin-bottom: 35px;
        gap: 8px;
    }

    .governance-chart ul li {
        max-width: 200px;
        width: 100%;
        min-width: 100px;
    }

    .governance-chart ul li img {
        margin-bottom: 16px;
        max-width: 200px;
        width: 100%;
        min-width: 100px;
        height: 165px;
        object-fit: cover;
    }

    .student-government-content .box-overview-student .icon-club {
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
    }

    .student-government-content .box-overview-student .icon-club .item {
        max-width: 165px;
        width: 100%;
        min-width: 120px;
    }

    .faculty-statement.fas-statement {
        height: 540px;
    }

    .faculty-statement.fas-statement .content-statement ul p {
        padding-bottom: 40px;
    }

    .voice-sampoerna .box-voice .list-voice {
        gap: 16px;
    }

    .voice-sampoerna .box-voice .list-voice li {
        gap: 4px;
    }
    .content-prospective-safety .item img {
        height: 140px;
    }
}

/* mobile (480 - 320) */

@media screen and (max-width: 420px) {
    .pathway-bridge img {
        width: 320px;
        height: 280px;
    }

    .contact-step {
        padding: 35px 35px;
    }

    .box-inspiring-learning img {
        height: 200px;
    }

    .box-student-affairs img {
        height: 200px;
    }

    .faculty-statement .content-statement .content-text ul p {
        font-size: 12px;
        padding-bottom: 0px;
    }

    .faculty-statement.fet-statement {
        height: 620px;
    }

    .faculty-statement.foe-statement
        .content-statement
        .content-text
        ul:first-child {
        padding-top: 30px;
    }

    .faculty-statement.foe-statement .content-statement .content-text ul p {
        padding-bottom: 0px;
    }

    .faculty-statement.fas-statement {
        height: 540px;
    }

    .faculty-statement.fas-statement .content-statement ul p {
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 400px) {
    .core-university img {
        width: 300px;
        height: 380px;
    }

    .admission-content .box-content .box-apply .list-apply li {
        gap: 18px;
        width: 133px;
    }

    .home-shape .box-shape img {
        height: 220px;
    }

    .news-highlight .box-highlight .main-news .box-news {
        padding: 0 30px 0px;
    }

    .news-highlight .box-highlight .main-news .box-news .title {
        max-width: 300px;
        width: 100%;
        min-width: 150px;
    }

    .news-highlight .box-highlight .main-news .box-news .desc {
        font-size: 10px;
        font-weight: 400;
        max-width: 300px;
        width: 100%;
        min-width: 150px;
    }

    .news-highlight .box-highlight .grid-news {
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
        gap: 16px;
    }
    .news-highlight .box-highlight .grid-news .box-news {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .news-highlight .box-highlight .grid-news .box-news img {
        width: 100%;
        height: 160px;
        margin-bottom: 20px;
    }

    .home-collaboration .box-collaboration .box-img li .layer-img {
        height: 480px;
    }

    .faculty-statement.fas-statement .content-statement ul:last-child {
        padding-bottom: 180px;
    }

    .contact-feedback .box-feedback .contact-form {
        padding: 16px;
    }

    .contact-form .text-item .contact-labels .decs,
    .contact-form .dropdown-item .contact-labels .decs {
        font-size: 14px;
        font-weight: 700;
    }

    .contact-form .text-item .contact-labels .red,
    .contact-form .dropdown-item .contact-labels .red {
        font-size: 14px;
        font-weight: 700;
        color: var(--red);
    }

    .box-survey {
        display: flex;
        gap: 12px;
        flex-direction: column;
    }

    .survey {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: flex-start;
        gap: 12px;
    }

    .survey .box-survey {
        width: 200px;
    }

    .survey .box-survey .button-survey {
        width: 100%;
    }

    .news-bg .box-title,
    .career-bg .box-title,
    .faq-bg .box-title,
    .difference-bg .box-title,
    .contact-bg .box-title,
    .academic-bg .box-title,
    .pathway-bg .box-title,
    .cetl-bg .box-title,
    .curriculum-bg .box-title,
    .qair-bg .box-title,
    .about-bg .box-title,
    .accreditation-bg .box-title,
    .governance-bg .box-title,
    .as-bg .box-title,
    .admission-bg .box-title,
    .faculties-bg .box-title,
    .fas-bg .box-title,
    .fet-bg .box-title,
    .fob-bg .box-title,
    .foe-bg .box-title,
    .student-government-bg .box-title,
    .campus-life-bg .box-title,
    .student-affairs-bg .box-title,
    .spac-bg .box-title,
    .safety-environment-bg .box-title,
    .it-departement-bg .box-title,
    .academic-registry-bg .box-title,
    .library-bg .box-title,
    .facilities-bg .box-title,
    .student-rights-bg .box-title {
        position: absolute;
        bottom: 37px;
        left: 30px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .univ-bg .box-title,
    .req-bg .box-title {
        position: absolute;
        bottom: 37px;
        left: 30px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

/* 400 */

@media screen and (max-width: 370px) {
    .faculty-statement.fet-statement {
        height: 650px;
    }

    .faculty-statement.fas-statement .content-statement ul p {
        padding-bottom: 10px;
    }

    .voice-sampoerna .box-voice .list-voice {
        gap: 10px;
    }
}

/* ============================================================
   pathway - tab content specific styles
   ============================================================ */

/* Tab 1 override: tighten gap vs faculty pages */
.content-pathway .box-content .content-tab .display {
    gap: 120px;
}

/* ---- Tab 2 : International Degree ---- */

.pw-neche {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pw-neche-header h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--main-blue);
}

.pw-neche-header h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--gunmetal-black);
    max-width: 860px;
}

.pw-neche-body {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.pw-neche-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pw-neche-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
}

.pw-neche-info p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--stormy-grey);
}

.pw-neche-link {
    display: inline-block;
    color: var(--main-blue);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pw-neche-country {
    flex: 1;
}

.pw-neche-country img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Why this matters */
.pw-why-matters {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pw-why-matters > h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.pw-why-tabs {
    display: flex;
    gap: 16px;
}

.pw-why-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--soft-grey);
    color: var(--black);
    transition: background 0.2s, color 0.2s;
}

.pw-why-btn.active {
    background-color: var(--main-blue);
    color: var(--white);
}

.pw-why-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pw-why-content.hidden {
    display: none;
}

.pw-why-content p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--stormy-grey);
    max-width: 900px;
}

.pw-why-content ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
}

.pw-why-content ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--main-blue);
}

.pw-why-content ul li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--main-blue);
    flex-shrink: 0;
}

.pw-employability {
    background-color: var(--soft-grey);
    border-radius: 12px;
    padding: 40px 48px;
}

.pw-employability h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--gunmetal-black);
}

.pw-employability p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--stormy-grey);
    max-width: 800px;
}

/* Photos strip */
.pw-photos-strip {
    display: flex;
    gap: 16px;
}

.pw-photos-strip img {
    flex: 1;
    width: 0;
    height: 280px;
    object-fit: cover;
    border-radius: 8px;
}

/* Quote banner */
.pw-quote-banner {
    background-color: var(--main-blue);
    border-radius: 12px;
    padding: 60px 80px;
    text-align: center;
}

.pw-quote-banner p {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.6;
    font-style: italic;
}

/* 3 Standards */
.pw-standards {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pw-standards > h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.pw-standards ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pw-standards ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    color: var(--gunmetal-black);
}

.pw-standards .pw-check {
    width: 32px;
    height: 32px;
    background-color: var(--main-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

/* NECHE investment */
.pw-investment {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pw-investment h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.pw-investment p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--stormy-grey);
    max-width: 900px;
}

/* ---- Tab 3 : International 2-Degree ---- */

.pw-ua-banner {
    background-color: var(--dark-blue);
    border-radius: 12px;
    padding: 48px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.pw-ua-banner-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pw-ua-banner-text .pw-ua-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--sky-blue);
    text-transform: uppercase;
}

.pw-ua-banner-text .pw-ua-partner-label {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
}

.pw-ua-banner .pw-ua-logo {
    height: 80px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.pw-ua-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pw-ua-main > h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--gunmetal-black);
    max-width: 860px;
    line-height: 1.2;
}

.pw-ua-main > p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--stormy-grey);
    max-width: 800px;
}

.pw-ua-rankings {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pw-ua-rankings > p {
    font-size: 18px;
    font-weight: 600;
    color: var(--gunmetal-black);
}

.pw-ranking-badges {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.pw-ranking-badges img {
    height: 80px;
    width: auto;
    object-fit: contain;
}

.pw-ua-program {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pw-ua-program > h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.pw-ua-program-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.pw-flex-pathways {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.pw-flex-pathways > h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--gunmetal-black);
}

.pw-pathway-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--light-grey);
}

.pw-pathway-header {
    display: grid;
    grid-template-columns: 140px repeat(4, 1fr);
    background-color: var(--main-blue);
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
}

.pw-pathway-header div {
    padding: 16px 20px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.pw-pathway-row {
    display: grid;
    grid-template-columns: 140px repeat(4, 1fr);
    border-bottom: 1px solid var(--light-grey);
    background-color: var(--white);
}

.pw-pathway-row:last-child {
    border-bottom: none;
}

.pw-pathway-label {
    padding: 20px;
    font-weight: 700;
    font-size: 15px;
    background-color: var(--soft-grey);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--light-grey);
}

.pw-pathway-cell {
    padding: 20px;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--light-grey);
}

.pw-pathway-cell.navy {
    background-color: var(--main-blue);
    color: var(--white);
    font-weight: 600;
}

.pw-pathway-cell.light-navy {
    background-color: #3d4491;
    color: var(--white);
    font-weight: 600;
}

.pw-pathway-icon {
    padding: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--main-blue);
}

/* Shared CTA for Tab 2 & 3 */
.pw-cta {
    background-color: var(--soft-grey);
    border-radius: 12px;
    padding: 60px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.pw-cta-text h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gunmetal-black);
    margin-bottom: 12px;
}

.pw-cta-text p {
    font-size: 18px;
    color: var(--stormy-grey);
    line-height: 1.6;
}

.pw-cta-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--main-blue);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 18px 32px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.pw-cta-btn:hover {
    background-color: var(--dark-blue);
}

/* ============================================================
   home-degree responsive */

@media screen and (max-width: 860px) {
    .home-degree {
        padding: 60px 24px;
    }

    .home-degree .degree-options {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .home-degree .degree-option {
        max-width: 100%;
        width: 100%;
    }

    .home-degree .box-degree .degree-title {
        font-size: 32px;
        margin-bottom: 36px;
    }
}

@media screen and (max-width: 600px) {
    .home-degree {
        padding: 48px 16px;
    }

    .home-degree .box-degree .degree-title {
        font-size: 26px;
        margin-bottom: 28px;
    }

    .home-degree .degree-card {
        padding: 20px 24px;
        gap: 16px;
    }

    .home-degree .degree-card .degree-name {
        font-size: 18px;
        white-space: normal;
    }

    .home-degree .degree-card .degree-logo {
        height: 36px;
    }

    .home-degree .degree-card .degree-logo.degree-logo-lg {
        height: 48px;
        margin: -6px 0;
    }

    .home-degree .degree-option .degree-desc {
        font-size: 14px;
        line-height: 22px;
    }
}