.timeline-container {
            max-width: 650px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* Pembungkus utama per item */
        .step-item {
            position: relative;
            margin-bottom: 35px;
        }

        /* Box Tanggal (Bagian Atas) */
        .date-badge {
            background-color: transparent;
            border: 2px solid #ffb300; /* Garis emas/oranye */
            font-weight: 600;
            font-size: 0.95rem;
            text-align: center;
            padding: 6px 30px;
            border-radius: 20px 20px 0 0;
            display: inline-block;
            margin-left: 60px; /* Menyesuaikan posisi di atas kotak putih */
            position: relative;
            bottom: -2px; /* Menempel pas dengan kotak putih di bawahnya */
            z-index: 1;
        }

        /* Box Konten Utama (Warna Putih) */
        .content-box {
            background-color: #ffffff;
            border-radius: 0 25px 25px 25px; /* Pojok kiri atas tajam karena tertutup nomor */
            padding: 20px 20px 20px 85px; /* Padding kiri besar untuk memberi ruang nomor */
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            min-height: 80px;
            display: flex;
            align-items: center;
            position: relative;
        }

        /* Teks Alur Kegiatan */
        .step-text {
            color: #127d69; /* Warna biru tulisan */
            font-weight: 700;
            font-size: 1.2rem;
            margin: 0;
            line-height: 1.3;
        }

        /* Desain Nomor Pita (Ribbon) di Kiri */
        .number-ribbon {
            position: absolute;
            left: -10px; /* Keluar sedikit untuk efek 3D */
            top: 15px;
            background: #127d69;
            color: #ffffff;
            font-size: 1.8rem;
            font-weight: 700;
            width: 65px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px 5px 5px 5px;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
            z-index: 2;
        }

        /* Potongan Pita Kecil (Efek Lipatan Oranye di Belakang) */
        .number-ribbon::before {
            content: '';
            position: absolute;
            left: 0;
            top: -10px;
            border-left: 10px solid transparent;
            border-right: 0px solid transparent;
            border-bottom: 10px solid #ff9100; /* Warna oranye lipatan */
        }
        
        /* Panah di ujung kanan nomor */
        .number-ribbon::after {
            content: '';
            position: absolute;
            right: -15px;
            top: 0;
            border-top: 27.5px solid transparent;
            border-bottom: 27.5px solid transparent;
            border-left: 15px solid #127d69;
        }

        /* Dekorasi Tambahan Oranye Kecil di Paling Kiri */
        .orange-tag {
            position: absolute;
            left: -10px;
            top: 30px;
            width: 6px;
            height: 25px;
            background-color: #ff9100;
            border-radius: 3px 0 0 3px;
            z-index: 3;
        }

        /* Responsif untuk Layar HP (Mobile) */
        @media (max-width: 575.98px) {
            .date-badge {
                font-size: 0.8rem;
                padding: 4px 20px;
                margin-left: 45px;
            }
            .content-box {
                padding: 15px 15px 15px 70px;
                border-radius: 0 15px 15px 15px;
            }
            .step-text {
                font-size: 0.95rem;
            }
            .number-ribbon {
                width: 50px;
                height: 44px;
                font-size: 1.4rem;
                top: 12px;
            }
            .number-ribbon::after {
                border-top: 22px solid transparent;
                border-bottom: 22px solid transparent;
                border-left: 12px solid #1976d2;
                right: -12px;
            }
            .orange-tag {
                top: 24px;
                height: 20px;
            }
        }
		   /* Background Utama Section Prestasi */
        .prestasi-section {
            padding: 50px 30px;
            border-radius: 4px;
        }
        .header-title {
            color: #219f94;
            font-weight: 700;
            font-size: 2.2rem;
            margin: 0;
        }
        .header-subtitle {
            color: #219f94;
            font-size: 1.1rem;
            font-weight: 400;
        }
        /* Tombol Lihat Semua */
        .btn-lihat-semua {
            background-color: #ffffff;
            color: #219f94;
            font-weight: 600;
            border-radius: 8px;
            padding: 10px 24px;
            border: none;
            transition: all 0.3s ease;
        }
        .btn-lihat-semua:hover {
            background-color: #e0f2f1;
            color: #17736b;
        }
        /* Card Prestasi */
        .card-prestasi {
            background-color: #ffffff;
            border-radius: 12px;
            border: none;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            height: 100%;
        }
        /* Badge Kategori */
        .badge-akademik {
            background-color: #e3f2fd;
            color: #1e88e5;
            font-weight: 500;
            font-size: 0.8rem;
            padding: 4px 12px;
            border-radius: 4px;
            display: inline-block;
        }
        .badge-non-akademik {
            background-color: #e0f2f1;
            color: #00897b;
            font-weight: 500;
            font-size: 0.8rem;
            padding: 4px 12px;
            border-radius: 4px;
            display: inline-block;
        }
        /* Gambar Poster Prestasi */
        .img-poster {
            width: 100%;
            max-width: 100px;
            border-radius: 8px;
            object-fit: cover;
            aspect-ratio: 3/4;
        }
        .siswa-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #333333;
            margin-top: 8px;
            margin-bottom: 4px;
        }
        .event-text {
            font-size: 0.85rem;
            color: #757575;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        /* Detail Informasi Peringkat & Bidang */
        .info-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #212529;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .info-label i {
            color: #fbc02d; /* Warna ikon emas/kuning */
        }
        .info-value {
            font-size: 0.85rem;
            color: #616161;
            margin-top: 2px;
        }
        
        /* Modifikasi Layout khusus HP/Mobile */
        @media (max-width: 767.98px) {
            .prestasi-section {
                padding: 30px 15px;
            }
            .header-area {
                text-align: center;
                margin-bottom: 25px;
            }
            .btn-lihat-semua {
                width: 100%;
                margin-top: 15px;
            }
            .card-prestasi {
                padding: 15px;
            }
            .siswa-name {
                font-size: 1.1rem;
            }
        }
        .custom-card {
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
            padding: 40px;
            border: none;
        }
        .text-teal {
            color: #219f94; /* Warna hijau toska khas di gambar */
        }
        .welcome-title {
            font-weight: 700;
            color: #219f94;
        }

        .welcome-text {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-top: 15px;
        }
        .link-sambutan {
            color: #219f94;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 15px;
        }
        .link-sambutan:hover {
            color: #17736b;
        }
        /* Styling untuk counter data sekolah */
        .stat-box {
            text-align: center;
            border-right: 1px solid #dee2e6;
        }
        .stat-box:last-child {
            border-right: none;
        }
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #212529;
            line-height: 1;
        }
        .stat-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6c757d;
            letter-spacing: 0.5px;
            margin-top: 5px;
            text-transform: uppercase;
        }
        /* Styling Tombol */
        .btn-outline-teal {
            color: #219f94;
            border-color: #219f94;
            border-radius: 10px;
            padding: 8px 20px;
            font-weight: 500;
        }
        .btn-outline-teal:hover {
            background-color: #219f94;
            color: #fff;
        }
        .btn-teal {
            background-color: #219f94;
            color: #fff;
            border-radius: 10px;
            padding: 8px 20px;
            font-weight: 500;
        }
        .btn-teal:hover {
            background-color: #17736b;
            color: #fff;
        }
        
        /* Mengatur agar garis pembatas hilang saat tampilan mobile (layar kecil) */
        @media (max-width: 767.98px) {
            .section-title {
                text-align: left;
                margin-top: 30px;
            }
            .stat-box {
                border-right: none;
                border-bottom: 1px solid #dee2e6;
                padding: 15px 0;
            }
            .stat-box:last-child {
                border-bottom: none;
            }
        }
		       .visimisi-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* ------------------------------------------------------ */
        /* STYLE JUDUL UTAMA                                      */
        /* ------------------------------------------------------ */
        .main-header {
            text-align: center;
            margin-bottom: 40px;
        }
        .title-visi {
            font-size: 4rem;
            font-weight: 700;
            color: #127d69;
            line-height: 1;
            display: inline-block;
        }
        .title-ampersand {
            font-size: 3.5rem;
            font-weight: 400;
            color: #e69c24; /* Oranye/Emas */
            font-style: italic;
            margin: 0 10px;
        }
        .title-misi {
            font-size: 4rem;
            font-weight: 700;
            color: #127d69;
            line-height: 1;
            display: block;
            margin-top: -10px;
        }
        .subtitle-tagline {
            font-size: 1.1rem;
            color: #7d7d7d;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 20px;
            font-weight: 300;
        }
        .subtitle-tagline span {
            color: #e69c24;
            font-weight: 600;
        }
        .header-line {
            height: 2px;
            width: 150px;
            background-color: #7d7d7d;
            margin: 15px auto 0 auto;
        }

        /* ------------------------------------------------------ */
        /* STYLE BADGE SEPARATOR (VISI / MISI)                    */
        /* ------------------------------------------------------ */
        .badge-section-visi {
            background-color: #e69c24;
            color: #ffffff;
            font-weight: 700;
            font-size: 1.1rem;
            padding: 6px 35px;
            border-radius: 20px;
            display: inline-block;
            text-transform: uppercase;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }
        .badge-section-misi {
            background-color: #127d69;
            color: #ffffff;
            font-weight: 700;
            font-size: 1.1rem;
            padding: 6px 35px;
            border-radius: 20px;
            display: inline-block;
            text-transform: uppercase;
            margin-top: 40px;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }

        /* ------------------------------------------------------ */
        /* STYLE BLOK VISI                                        */
        /* ------------------------------------------------------ */
        .visi-box {
            background-color: #ffffff;
            border-radius: 20px;
            padding: 35px 40px;
            box-shadow: 0 10px 30px rgba(230, 156, 36, 0.05);
            border-left: 3px solid #127d69;
            border-bottom: 3px solid #127d69;
            position: relative;
        }
        .visi-text {
            font-size: 1.15rem;
            color: #555555;
            line-height: 1.8;
            font-style: italic;
            margin: 0;
        }
        .quote-icon {
            color: rgba(230, 156, 36, 0.2);
            font-size: 2rem;
            position: absolute;
        }
        .quote-start { top: 15px; left: 15px; }
        .quote-end { bottom: 15px; right: 15px; }

        /* ------------------------------------------------------ */
        /* STYLE LIST LAJUR MISI                                  */
        /* ------------------------------------------------------ */
        .misi-item {
            background-color: #ffffff;
            border-radius: 50px; /* Membuat ujung membulat lonjong */
            padding: 12px 30px;
            margin-bottom: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
            display: flex;
            align-items: center;
            border: 1px solid #f1eade;
        }
        
        /* Lingkaran Ikon di Kiri */
        .misi-icon-wrapper {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #ffffff;
            flex-shrink: 0;
            margin-right: 20px;
        }
        /* Variasi warna ikon selang-seling */
        .bg-oranye { background-color: #e69c24; }
        .bg-biru { background-color: #127d69; }

        /* Teks Deskripsi Misi */
        .misi-text {
            font-size: 1rem;
            color: #555555;
            margin: 0;
            flex-grow: 1;
            font-weight: 400;
        }

        /* Penomoran Besar di Kanan */
        .misi-number {
            font-size: 1.8rem;
            font-weight: 700;
            flex-shrink: 0;
            margin-left: 20px;
        }
        .text-oranye { color: #e69c24; }
        .text-biru { color: #127d69; }

        /* ------------------------------------------------------ */
        /* ADAPTASI RESPONSIF LAYAR HP (MOBILE)                    */
        /* ------------------------------------------------------ */
        @media (max-width: 767.98px) {
            body { padding: 30px 0; }
            .title-visi, .title-misi { font-size: 2.8rem; }
            .title-ampersand { font-size: 2.3rem; }
            .subtitle-tagline { font-size: 0.85rem; letter-spacing: 1px; }
            
            .visi-box { padding: 25px; }
            .visi-text { font-size: 1rem; line-height: 1.6; }
            
            .misi-item {
                border-radius: 20px; /* Mengurangi kebulatan di HP agar text muat */
                padding: 15px;
                align-items: flex-start;
            }
            .misi-icon-wrapper {
                margin-right: 12px;
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            .misi-text {
                font-size: 0.9rem;
                line-height: 1.5;
            }
            .misi-number {
                font-size: 1.3rem;
                margin-left: 10px;
                margin-top: -2px;
            }
        }
	.pyv-5 {
		padding-top: 3rem !important;
	}
	        /* ------------------------------------------------------ */
        /* STYLE 1: SECTION PIMPINAN UNIVERSITAS (ATAS)            */
        /* ------------------------------------------------------ */
        .outer-card-pimpinan {
            background-color: #ffffff;
            border-radius: 20px;
            border: 1px solid #eef0f3;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
            margin-bottom: 40px;
        }
        .main-title {
            font-size: 2rem;
            font-weight: 700;
            color: #1a2b49;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            margin-bottom: 0;
        }
        .title-line-center {
            height: 4px;
            width: 250px;
            background-color: #198754;
            margin: 10px auto 25px auto;
        }
        .sub-header-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 15px;
        }
        .divider-line {
            height: 1px;
            width: 80px;
            background-color: #ced4da;
        }
        .icon-badge-univ {
            background-color: #e8f5e9;
            color: #146c43;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        .tagline-text {
            font-style: italic;
            color: #6c757d;
            font-size: 0.95rem;
            text-align: center;
            margin-bottom: 40px;
        }
        
        /* Inner Card Profil Pemimpin */
        .inner-profile-card {
            background-color: #ffffff;
            border: 1px solid #eef0f3;
            border-radius: 25px;
            padding: 40px;
            max-width: 850px;
            margin: 0 auto;
            position: relative;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }
        /* Aksen hijau pojok kanan atas */
        .corner-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #146c43;
            color: #ffffff;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
        }
        /* Aksen dekorasi samar di pojok kanan bawah */
        .inner-profile-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 60px;
            height: 60px;
            background: radial-gradient(circle at bottom right, #dbeedb 0%, transparent 70%);
            border-radius: 0 0 25px 0;
        }
        .avatar-container {
            width: 130px;
            height: 130px;
            background-color: #146c43;
            border-radius: 50%;
            margin: 0 auto 25px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid #ffffff;
            box-shadow: 0 8px 20px rgba(20, 108, 67, 0.2);
        }
        .avatar-container i {
            font-size: 3.5rem;
            color: #ffffff;
        }
        .pimpinan-name {
            font-size: 1.4rem;
            font-weight: 700;
            color: #1a2b49;
            text-align: center;
            margin-bottom: 8px;
        }
        .pimpinan-jabatan {
            font-size: 1rem;
            font-weight: 600;
            color: #198754;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0;
        }
        .pimpinan-line {
            height: 3px;
            width: 50px;
            background-color: #198754;
            margin: 12px auto;
        }
        .contact-link {
            color: #6c757d;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: color 0.2s ease;
        }
        .contact-link:hover {
            color: #146c43;
        }

        /* ------------------------------------------------------ */
        /* STYLE 2: SECTION FAKULTAS AGROINDUSTRI (BAWAH)         */
        /* ------------------------------------------------------ */
        .outer-card-fakultas {
            background-color: #ffffff;
            border-radius: 20px;
            border: 1px solid #eef0f3;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
			margin-bottom: 40px;
        }
        .faculty-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1a2b49;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0;
            display: inline-block;
        }
        .faculty-title-line {
            height: 4px;
            width: 350px;
            background-color: #198754;
            margin-top: 10px;
            margin-bottom: 35px;
        }
        .pejabat-card {
            background-color: #ffffff;
            border: 1px solid #f1f3f5;
            border-radius: 12px;
            padding: 20px 25px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .pejabat-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            bottom: 15%;
            width: 5px;
            background-color: #146c43;
            border-radius: 0 4px 4px 0;
        }
        .text-jabatan {
            font-size: 1.05rem;
            font-weight: 600;
            color: #495057;
        }
        .text-nama {
            font-size: 1.05rem;
            font-weight: 500;
            color: #212529;
        }
        .colon-separator {
            color: #6c757d;
            padding: 0 15px;
        }

        /* ------------------------------------------------------ */
        /* ADAPTASI RESPONSIF LAYAR HP (MOBILE)                    */
        /* ------------------------------------------------------ */
        @media (max-width: 767.98px) {
            .outer-card-pimpinan, .outer-card-fakultas {
                padding: 25px 15px;
            }
            .main-title {
                font-size: 1.5rem;
            }
            .title-line-center {
                width: 180px;
            }
            .inner-profile-card {
                padding: 30px 15px;
            }
            .avatar-container {
                width: 110px;
                height: 110px;
            }
            .avatar-container i {
                font-size: 2.8rem;
            }
            .pimpinan-name {
                font-size: 1.2rem;
            }
            
            /* Fakultas Mobile */
            .faculty-title {
                font-size: 1.4rem;
            }
            .faculty-title-line {
                width: 100%;
                margin-bottom: 25px;
            }
            .pejabat-card {
                padding: 15px;
                flex-direction: column;
                align-items: flex-start;
            }
            .pejabat-card::before {
                top: 0;
                bottom: 0;
                height: 100%;
                border-radius: 0;
            }
            .colon-separator {
                display: none;
            }
            .text-nama {
                font-size: 0.95rem;
                margin-top: 4px;
                word-break: break-word;
            }
            .text-jabatan {
                font-size: 0.95rem;
            }
        }
		
		.ekstra-container {
            border-radius: 20px;
            padding: 25px 20px;
        }
        
        .ekstra-title-line {
            flex-grow: 1;
            height: 2px;
            background-color: rgb(0 0 0 / 60%);
            max-width: 150px;
        }
		
		.text-ponpe:before {
			color: var(--ponpes);
		}

        .ekstra-item {
            width: 110px; /* Lebar konstan tiap item */
            transition: transform 0.2s;
        }

        .ekstra-item:hover {
            transform: translateY(-5px); /* Efek sedikit naik saat di-hover */
        }

        .ekstra-circle {
            width: 85px;
            height: 85px;
            background-color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px auto;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Mengatur ukuran gambar/ikon di dalam lingkaran */
        .ekstra-circle img, .ekstra-circle i {
            max-width: 70%;
            max-height: 70%;
            object-fit: contain;
            font-size: 2.2rem;
            color: #333;
        }

        .ekstra-text {
            color: var(--ponpes);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
		.title-serif {
            font-family: 'Playfair Display', serif;
            color: #1a253c;
            font-weight: 700;
        }
        .badge-ekskul {
            background-color: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #c8e6c9;
            font-weight: 600;
            padding: 0.5rem 1rem;
            border-radius: 50px;
        }
        .badge-active {
            background-color: #e8f5e9;
            color: #2e7d32;
            font-weight: 600;
        }
        .ekskul-card {
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            transition: all 0.3s ease;
            height: 100%;
        }
        .ekskul-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            border-color: #2e7d32;
        }
        .icon-container {
            font-size: 2.5rem;
            color: #2e7d32;
            margin-bottom: 1rem;
        }
        .card-title {
            color: #1a253c;
            font-weight: 700;
            font-size: 1.15rem;
        }
        .card-text {
            color: #666666;
            font-size: 0.9rem;
            line-height: 1.6;
        }
        .info-text {
            font-size: 0.85rem;
            font-weight: 600;
        }
        .text-green {
            color: #2e7d32;
        }
        .text-muted-custom {
            color: #888888;
        }
        .divider {
            width: 50px;
            height: 3px;
            background-color: #bfa15f;
            margin: 12px auto 24px auto;
        }