/* =============================================
   Yayasan Peneraju Page Styles
   ============================================= */

/* Import Manrope Font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* Global Font Family */
body {
    font-family: 'Manrope', sans-serif;
}

/* Hero Section Styles */
.yayasan-hero-section {
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    background-image: url('../img/yayasan/office02.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.yayasan-hero-section .container-fluid {
    height: 70vh;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* Background overlay for better content readability */
.yayasan-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.yayasan-hero-section .row {
    height: 100%;
    margin: 0;
}

/* Left Panel - Financing Scheme */
.yayasan-left-panel {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.093) 0%, rgba(233, 236, 239, 0.131) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.yayasan-content-wrapper {
    text-align: center;
    position: relative;
    z-index: 10;
}

.yayasan-title {
    margin-bottom: 40px;
}

.title-main {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 50%, #e91e63 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 0 4px 8px rgba(110, 66, 193, 0.3);
    letter-spacing: -1px;
    animation: gradientShift 4s ease-in-out infinite;
    position: relative;
}

.title-sub {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 2.8rem;
    font-weight: 600;
    background: linear-gradient(135deg, #197ada 0%, #116cbb 50%, #11ecb5 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(73, 80, 87, 0.2);
    letter-spacing: -0.5px;
    position: relative;
}

.title-sub::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
    border-radius: 3px;
    animation: underlineExpand 1.5s ease-out 1s forwards;
    width: 0;
}

/* Approved Badge */
.yayasan-badge {
    position: relative;
    display: inline-block;
}

.badge-circle {
    width: 150px;
    height: 150px;
    border: 3px solid #6f42c1;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.badge-icon {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.badge-text {
    display: none;
}


/* Right Panel - Available Pillars */
.yayasan-right-panel {
    background: rgba(13, 62, 110, 0.9);
    color: #ffffff;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.yayasan-right-content {
    width: 100%;
    max-width: 400px;
}

/* Partner Logos */
.partner-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 15px;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 80px;
}

.partner-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 5px;
}

.logo-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
}

/* Available Pillars */
.available-pillars {
    width: 100%;
}

.pillars-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    text-align: left;
}

.pillars-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pillar-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
}

.pillar-item:last-child {
    border-bottom: none;
}

/* Why Join Us Section */
.why-join-us-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-bottom: 50px;
}

.benefits-list {
    max-width: 800px;
    margin: 0 auto;
}

.benefit-item {
    padding: 20px 30px;
    margin-bottom: 15px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.benefit-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    position: relative;
    z-index: 2;
}

.benefit-1 {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.benefit-2 {
    background: linear-gradient(135deg, #20c997 0%, #1e7e34 100%);
}

.benefit-3 {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.benefit-4 {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
}

.benefit-5 {
    background: linear-gradient(135deg, #343a40 0%, #23272b 100%);
}

.benefit-6 {
    background: linear-gradient(135deg, #e83e8c 0%, #c2185b 100%);
}

.benefit-7 {
    background: linear-gradient(135deg, #fd7e14 0%, #e65100 100%);
}

.benefit-8 {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* DevOps & AiOps Section */
.devops-section {
    padding: 0;
    background: #ffffff;
}

.devops-left-panel {
    background: #3c3ebb;
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.devops-left-content {
    text-align: center;
    color: #ffffff;
}

.devops-title {
    font-family: 'Nunito', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.devops-image {
    margin-bottom: 40px;
}

.devops-team-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.accreditation {
    text-align: left;
}

.accreditation-text {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10px;
}

.accreditation-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.devops-right-panel {
    background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.devops-right-content {
    width: 100%;
    max-width: 500px;
    color: #f8fcff;
}

.programs-title {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fcfeff;
    margin-bottom: 40px;
    text-decoration: underline;
    text-underline-offset: 8px;
}

.software-dev-right-panel .programs-title {
    color: #0d3e6e;
}

.programs-list {
    margin-bottom: 40px;
}

.program-item {
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.program-item:last-child {
    border-bottom: none;
}

.software-dev-right-panel .program-item {
    border-bottom: 1px solid rgba(13, 62, 110, 0.2);
}

.program-name {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.software-dev-right-panel .program-name {
    color: #0d3e6e;
}

.program-description {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.9;
}

.software-dev-right-panel .program-description {
    color: #495057;
    opacity: 1;
}

.course-outline-btn {
    background: #ffffff;
    color: #007bff;
    border: 2px solid #007bff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif;
}

.software-dev-right-panel .course-outline-btn {
    background: linear-gradient(135deg, #0d3e6e 0%, #007bff 100%);
    color: #ffffff;
    border: 2px solid #0d3e6e;
    box-shadow: 0 4px 15px rgba(13, 62, 110, 0.2);
}

.course-outline-btn:hover {
    background: #007bff;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.software-dev-right-panel .course-outline-btn:hover {
    background: linear-gradient(135deg, #007bff 0%, #0d3e6e 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(13, 62, 110, 0.4);
}

.register-btn {
    background: #ffffff;
    color: #007bff;
    border: 2px solid #007bff;
    padding: 18px 36px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif;
    width: 100%;
}

.software-dev-right-panel .register-btn {
    background: linear-gradient(135deg, #0d3e6e 0%, #007bff 100%);
    color: #ffffff;
    border: 2px solid #0d3e6e;
    box-shadow: 0 6px 20px rgba(13, 62, 110, 0.3);
}

.register-btn:hover {
    background: #007bff;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.software-dev-right-panel .register-btn:hover {
    background: linear-gradient(135deg, #007bff 0%, #0d3e6e 100%);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(13, 62, 110, 0.5);
}

/* Big Data Science Section */
.big-data-science-section {
    padding: 0;
    background: #ffffff;
}

.big-data-science-left-panel {
    background: #3c3ebb;
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.big-data-science-left-content {
    text-align: center;
    color: #ffffff;
}

.big-data-science-title {
    font-family: 'Nunito', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.big-data-science-graphic {
    margin-bottom: 40px;
}

.big-data-graphic-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.big-data-science-right-panel {
    background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.big-data-science-right-content {
    width: 100%;
    max-width: 500px;
    color: #ffffff;
}

/* Project Management Section */
.project-management-section {
    padding: 0;
    background: #ffffff;
}

.project-management-left-panel {
    background: #3c3ebb;
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.project-management-left-content {
    text-align: center;
    color: #ffffff;
}

.project-management-title {
    font-family: 'Nunito', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.project-management-graphic {
    margin-bottom: 40px;
}

.project-management-graphic-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.project-management-right-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 30%, #e8f4f8 70%, #d1ecf1 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    position: relative;
    overflow: hidden;
}

.project-management-right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 700px 500px at 15% 25%, rgba(0, 123, 255, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 500px 700px at 85% 75%, rgba(13, 62, 110, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 300px 200px at 50% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
        radial-gradient(ellipse 400px 300px at 25% 85%, rgba(0, 123, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 350px 250px at 75% 35%, rgba(13, 62, 110, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse 250px 180px at 60% 70%, rgba(0, 123, 255, 0.16) 0%, transparent 40%);
    z-index: 1;
    animation: marbleSwirl 28s ease-in-out infinite;
}

.project-management-right-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        conic-gradient(from 45deg at 20% 30%, transparent 0deg, rgba(0, 123, 255, 0.10) 45deg, transparent 90deg, rgba(13, 62, 110, 0.08) 135deg, transparent 180deg, rgba(0, 123, 255, 0.09) 225deg, transparent 270deg, rgba(13, 62, 110, 0.06) 315deg, transparent 360deg),
        conic-gradient(from 225deg at 80% 70%, transparent 0deg, rgba(13, 62, 110, 0.12) 60deg, transparent 120deg, rgba(0, 123, 255, 0.10) 180deg, transparent 240deg, rgba(13, 62, 110, 0.08) 300deg, transparent 360deg),
        conic-gradient(from 135deg at 50% 50%, transparent 0deg, rgba(0, 123, 255, 0.07) 30deg, transparent 60deg, rgba(13, 62, 110, 0.09) 90deg, transparent 120deg, rgba(0, 123, 255, 0.06) 150deg, transparent 180deg, rgba(13, 62, 110, 0.08) 210deg, transparent 240deg, rgba(0, 123, 255, 0.05) 270deg, transparent 300deg, rgba(13, 62, 110, 0.07) 330deg, transparent 360deg);
    z-index: 2;
    animation: marbleTwist 35s linear infinite;
}

.project-management-right-content {
    width: 100%;
    max-width: 500px;
    color: #0d3e6e;
    position: relative;
    z-index: 2;
}

.project-management-right-panel .programs-title {
    color: #0d3e6e;
}

.project-management-right-panel .program-name {
    color: #0d3e6e;
}

.project-management-right-panel .program-description {
    color: #495057;
    opacity: 1;
}

.project-management-right-panel .program-item {
    border-bottom: 1px solid rgba(13, 62, 110, 0.15);
}

.project-management-right-panel .course-outline-btn {
    background: linear-gradient(135deg, #0d3e6e 0%, #007bff 100%);
    color: #ffffff;
    border: 2px solid #0d3e6e;
    box-shadow: 0 4px 15px rgba(13, 62, 110, 0.2);
}

.project-management-right-panel .course-outline-btn:hover {
    background: linear-gradient(135deg, #007bff 0%, #0d3e6e 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(13, 62, 110, 0.4);
}

.project-management-right-panel .register-btn {
    background: linear-gradient(135deg, #0d3e6e 0%, #007bff 100%);
    color: #ffffff;
    border: 2px solid #0d3e6e;
    box-shadow: 0 6px 20px rgba(13, 62, 110, 0.3);
}

.project-management-right-panel .register-btn:hover {
    background: linear-gradient(135deg, #007bff 0%, #0d3e6e 100%);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(13, 62, 110, 0.5);
}

.accreditation-logos {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.accreditation-logos .accreditation-logo {
    height: 35px;
    width: auto;
    object-fit: contain;
}

/* IT Service Management Section */
.itsm-section {
    padding: 0;
    background: #ffffff;
}

.itsm-left-panel {
    background: #3c3ebb;
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.itsm-left-content {
    text-align: center;
    color: #ffffff;
}

.itsm-title {
    font-family: 'Nunito', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.itsm-graphic {
    margin-bottom: 40px;
}

.itsm-graphic-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.itsm-right-panel {
    background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    position: relative;
    overflow: hidden;
}

.itsm-right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 700px 500px at 20% 30%, rgba(0, 123, 255, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 500px 700px at 80% 70%, rgba(108, 66, 193, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 400px 300px at 60% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse 500px 400px at 40% 80%, rgba(0, 123, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 350px 250px at 70% 40%, rgba(108, 66, 193, 0.18) 0%, transparent 45%);
    z-index: 1;
    animation: marbleFlow 25s ease-in-out infinite;
}

.itsm-right-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        conic-gradient(from 0deg at 30% 40%, transparent 0deg, rgba(0, 123, 255, 0.12) 60deg, transparent 120deg, rgba(108, 66, 193, 0.10) 180deg, transparent 240deg, rgba(0, 123, 255, 0.08) 300deg, transparent 360deg),
        conic-gradient(from 180deg at 70% 60%, transparent 0deg, rgba(108, 66, 193, 0.15) 90deg, transparent 150deg, rgba(0, 123, 255, 0.12) 210deg, transparent 270deg, rgba(108, 66, 193, 0.10) 330deg, transparent 360deg),
        conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(0, 123, 255, 0.06) 45deg, transparent 90deg, rgba(108, 66, 193, 0.08) 135deg, transparent 180deg, rgba(0, 123, 255, 0.05) 225deg, transparent 270deg, rgba(108, 66, 193, 0.07) 315deg, transparent 360deg);
    z-index: 2;
    animation: marbleRotate 30s linear infinite;
}

.itsm-right-content {
    width: 100%;
    max-width: 500px;
    color: #ffffff;
    position: relative;
    z-index: 3;
}

/* Financing Scheme Section - Modern Design */
.financing-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.financing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    z-index: 1;
}

.financing-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.financing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
}

.financing-content {
    padding-right: 30px;
}

.financing-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.financing-title {
    font-family: 'Manrope', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.2;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.financing-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin-bottom: 30px;
    font-weight: 500;
}

.financing-features {
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 1rem;
    color: #34495e;
    font-weight: 500;
}

.feature-item i {
    color: #27ae60;
    margin-right: 15px;
    font-size: 1.2rem;
}

.financing-cta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    padding: 13px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #667eea;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.financing-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.logo-container {
    position: relative;
    z-index: 3;
}

.main-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

.main-logo:hover {
    transform: scale(1.05) rotate(5deg);
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    animation: float 6s ease-in-out infinite;
}

.circle-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.circle-2 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 15%;
    animation-delay: 2s;
}

.circle-3 {
    width: 100px;
    height: 100px;
    top: 50%;
    right: 5%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Get In Touch Section */
.get-in-touch-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    position: relative;
    overflow: hidden;
}

.get-in-touch-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    z-index: 1;
}

.section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.contact-cards {
    position: relative;
    z-index: 2;
}

.contact-card {
    background: 
        linear-gradient(135deg, #d1b9fd 0%, #db8afe 25%, #685ef5 50%, #4588eb 100%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    border-radius: 25px;
    padding: 0;
    margin-bottom: 30px;
    box-shadow: 
        0 25px 50px rgba(111, 66, 193, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    z-index: 1;
}

.contact-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%),
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
    z-index: 1;
}

.card-header {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    padding: 25px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.specialization {
    font-family: 'Manrope', sans-serif;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.card-image {
    padding: 20px 30px 30px 30px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.contact-photo {
    width: 220px;
    height: 280px;
    border-radius: 15px;
    object-fit: contain;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.card-footer {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    padding: 25px 20px;
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.contact-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #ffffff;
    font-weight: 500;
}

.contact-info i {
    font-size: 1.2rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-name {
    font-family: 'Manrope', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-number {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Software Development Section */
.software-dev-section {
    padding: 0;
    background: #ffffff;
}

.software-dev-left-panel {
    background: #3c3ebb;
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.software-dev-left-content {
    text-align: center;
    color: #ffffff;
}

.software-dev-title {
    font-family: 'Nunito', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.software-dev-image {
    margin-bottom: 40px;
}

.software-dev-team-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.software-dev-right-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 30%, #e3f2fd 70%, #bbdefb 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    position: relative;
    overflow: hidden;
}

.software-dev-right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 800px 600px at 20% 30%, rgba(33, 150, 243, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 600px 800px at 80% 70%, rgba(156, 39, 176, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 400px 300px at 60% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
        radial-gradient(ellipse 500px 400px at 40% 80%, rgba(33, 150, 243, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 350px 250px at 70% 40%, rgba(156, 39, 176, 0.18) 0%, transparent 45%);
    z-index: 1;
    animation: marbleFlow 25s ease-in-out infinite;
}

.software-dev-right-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        conic-gradient(from 0deg at 30% 40%, transparent 0deg, rgba(33, 150, 243, 0.12) 60deg, transparent 120deg, rgba(156, 39, 176, 0.10) 180deg, transparent 240deg, rgba(33, 150, 243, 0.08) 300deg, transparent 360deg),
        conic-gradient(from 180deg at 70% 60%, transparent 0deg, rgba(156, 39, 176, 0.15) 90deg, transparent 150deg, rgba(33, 150, 243, 0.12) 210deg, transparent 270deg, rgba(156, 39, 176, 0.10) 330deg, transparent 360deg),
        conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(33, 150, 243, 0.06) 45deg, transparent 90deg, rgba(156, 39, 176, 0.08) 135deg, transparent 180deg, rgba(33, 150, 243, 0.05) 225deg, transparent 270deg, rgba(156, 39, 176, 0.07) 315deg, transparent 360deg);
    z-index: 2;
    animation: marbleRotate 30s linear infinite;
}

.software-dev-right-content {
    width: 100%;
    max-width: 500px;
    color: #0d3e6e;
    position: relative;
    z-index: 3;
}

/* Eligibility Section */
.eligibility-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 30%, #e9ecef 70%, #dee2e6 100%);
    position: relative;
    overflow: hidden;
}

.eligibility-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 600px 400px at 25% 35%, rgba(13, 62, 110, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 500px 600px at 75% 65%, rgba(0, 123, 255, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 300px 200px at 50% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
        radial-gradient(ellipse 400px 350px at 40% 80%, rgba(13, 62, 110, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 350px 280px at 65% 45%, rgba(0, 123, 255, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse 200px 150px at 80% 25%, rgba(13, 62, 110, 0.15) 0%, transparent 40%);
    z-index: 1;
    animation: marbleDrift 32s ease-in-out infinite;
}

.eligibility-section .container {
    position: relative;
    z-index: 2;
}

.eligibility-title {
    font-family: 'Nunito', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0d3e6e;
    margin-bottom: 30px;
}

.eligibility-woman {
    text-align: center;
    margin-top: 20px;
}

.eligibility-woman-img {
    width: 400px;
    height: auto;
    object-fit: contain;
}

.eligibility-intro {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 30px;
    line-height: 1.6;
}

.requirements-list {
    max-width: 500px;
}

.requirement-item {
    padding: 15px 20px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #0d3e6e 0%, #007bff 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.requirement-text {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    position: relative;
    z-index: 2;
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .title-main {
        font-size: 3.5rem;
        letter-spacing: -0.8px;
    }
    
    .title-sub {
        font-size: 2.3rem;
        letter-spacing: -0.4px;
    }
    
    /* Get In Touch Section Responsive */
    .get-in-touch-section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
    
    .contact-card {
        margin-bottom: 25px;
    }
    
    .contact-photo {
        width: 200px;
        height: 250px;
    }
    
    .specialization {
        font-size: 1.1rem;
    }
    
    .contact-name {
        font-size: 1.2rem;
    }
    
    .contact-number {
        font-size: 1rem;
    }

    /* Financing Section Responsive */
    .financing-section {
        padding: 50px 0;
    }
    
    .financing-card {
        padding: 35px 30px;
    }
    
    .financing-title {
        font-size: 2.3rem;
    }
    
    .financing-content {
        padding-right: 15px;
    }
    
    .main-logo {
        width: 140px;
        height: 140px;
    }
    
    .financing-cta {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }

}

@media (max-width: 991.98px) {
    .yayasan-hero-section {
        background-attachment: scroll; /* Better performance on mobile */
    }
    
    .yayasan-hero-section .container-fluid {
        height: auto;
    }
    
    .yayasan-left-panel,
    .yayasan-right-panel {
        min-height: 25vh;
    }
    
    /* DevOps Section Responsive */
    .devops-left-panel,
    .devops-right-panel {
        min-height: 60vh;
        padding: 60px 40px;
    }
    
    .devops-title {
        font-size: 3rem;
    }
    
    .programs-title {
        font-size: 1.8rem;
    }
    
    .program-name {
        font-size: 1.3rem;
    }
    
    /* Software Development Section Responsive */
    .software-dev-left-panel,
    .software-dev-right-panel {
        min-height: 60vh;
        padding: 60px 40px;
    }
    
    .software-dev-title {
        font-size: 3rem;
    }
    
    .software-dev-team-img {
        max-width: 400px;
    }
    
    /* Big Data Science Section Responsive */
    .big-data-science-left-panel,
    .big-data-science-right-panel {
        min-height: 60vh;
        padding: 60px 40px;
    }
    
    .big-data-science-title {
        font-size: 3rem;
    }
    
    .big-data-graphic-img {
        max-width: 400px;
    }
    
    /* Project Management Section Responsive */
    .project-management-left-panel,
    .project-management-right-panel {
        min-height: 60vh;
        padding: 60px 40px;
    }
    
    .project-management-title {
        font-size: 3rem;
    }
    
    .project-management-graphic-img {
        max-width: 400px;
    }
    
    .accreditation-logos {
        gap: 15px;
    }
    
    .accreditation-logos .accreditation-logo {
        height: 30px;
    }
    
    /* Financing Banner Section Responsive */
    .financing-banner-section {
        min-height: 70vh;
    }
    
    .financing-left-panel,
    .financing-right-panel {
        min-height: 70vh;
        padding: 60px 40px;
    }
    
    .financing-woman-img {
        max-width: 400px;
    }
    
    .financing-title {
        font-size: 2.5rem;
    }
    
    .financing-subtitle {
        font-size: 1.3rem;
    }
    
    .financing-content {
        min-height: 50vh;
    }
    
    .financing-logo-container {
        bottom: 30px;
        right: 30px;
    }
    
    .approved-logo {
        width: 120px;
        height: 120px;
    }

    /* IT Service Management Section Responsive */
    .itsm-left-panel,
    .itsm-right-panel {
        min-height: 60vh;
        padding: 60px 40px;
    }
    
    .itsm-title {
        font-size: 3rem;
    }
    
    .itsm-graphic-img {
        max-width: 400px;
    }
    
    
    .pillars-title {
        font-size: 1.5rem;
    }
    
    .pillar-item {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .benefit-text {
        font-size: 1.1rem;
    }
    
    .eligibility-title {
        font-size: 2rem;
    }
    
    .eligibility-woman-img {
        width: 150px;
    }
}

@media (max-width: 767.98px) {
    .yayasan-left-panel,
    .yayasan-right-panel {
        padding: 40px 20px;
        min-height: 30vh;
    }
    
    .title-main {
        font-size: 2.5rem;
        letter-spacing: -0.4px;
    }
    
    .title-sub {
        font-size: 1.7rem;
        letter-spacing: -0.2px;
    }
    
    .badge-circle {
        width: 120px;
        height: 120px;
        padding: 0;
    }
    
    .badge-logo-img {
        width: 100%;
        height: 100%;
    }
    
    .badge-text {
        font-size: 0.6rem;
    }
    
    
    .partner-logos {
        justify-content: center;
        margin-bottom: 30px;
    }
    
    .logo-item {
        flex: none;
        width: 70px;
    }
    
    .partner-logo {
        width: 30px;
        height: 30px;
    }
    
    .logo-text {
        font-size: 0.6rem;
    }
    
    .pillars-title {
        font-size: 1.3rem;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .pillar-item {
        padding: 12px 0;
        text-align: center;
        font-size: 0.95rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .benefit-item {
        padding: 15px 20px;
    }
    
    .benefit-text {
        font-size: 1rem;
    }
    
    .eligibility-section {
        padding: 60px 0;
    }
    
    .eligibility-title {
        font-size: 1.8rem;
    }
    
    .eligibility-woman-img {
        width: 120px;
    }
    
    .eligibility-intro {
        font-size: 0.9rem;
    }
    
    .requirement-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .title-main {
        font-size: 2.2rem;
        letter-spacing: -0.2px;
    }
    
    .title-sub {
        font-size: 1.5rem;
        letter-spacing: -0.1px;
    }
    
    .badge-circle {
        width: 100px;
        height: 100px;
        padding: 0;
    }
    
    .badge-logo-img {
        width: 100%;
        height: 100%;
    }
    
    .badge-text {
        font-size: 0.55rem;
    }
    
    
    .partner-logo {
        width: 25px;
        height: 25px;
    }
    
    .logo-text {
        font-size: 0.55rem;
    }
    
    .pillars-title {
        font-size: 1.2rem;
    }
    
    .pillar-item {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .benefit-text {
        font-size: 0.95rem;
    }
    
    .eligibility-title {
        font-size: 1.6rem;
    }
    
    .eligibility-woman-img {
        width: 100px;
    }
    
    .requirement-text {
        font-size: 0.85rem;
    }
    
    /* DevOps Section Mobile */
    .devops-left-panel,
    .devops-right-panel {
        min-height: 50vh;
        padding: 40px 20px;
    }
    
    .devops-title {
        font-size: 2.5rem;
    }
    
    .devops-team-img {
        max-width: 300px;
    }
    
    .programs-title {
        font-size: 1.6rem;
    }
    
    .program-name {
        font-size: 1.2rem;
    }
    
    .program-description {
        font-size: 0.9rem;
    }
    
    .course-outline-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .register-btn {
        padding: 15px 30px;
        font-size: 1rem;
    }
    
    /* Software Development Section Mobile */
    .software-dev-left-panel,
    .software-dev-right-panel {
        min-height: 50vh;
        padding: 40px 20px;
    }
    
    .software-dev-title {
        font-size: 2.5rem;
    }
    
    .software-dev-team-img {
        max-width: 300px;
    }
    
    /* Big Data Science Section Mobile */
    .big-data-science-left-panel,
    .big-data-science-right-panel {
        min-height: 50vh;
        padding: 40px 20px;
    }
    
    .big-data-science-title {
        font-size: 2.5rem;
    }
    
    .big-data-graphic-img {
        max-width: 300px;
    }
    
    /* Project Management Section Mobile */
    .project-management-left-panel,
    .project-management-right-panel {
        min-height: 50vh;
        padding: 40px 20px;
    }
    
    .project-management-title {
        font-size: 2.5rem;
    }
    
    .project-management-graphic-img {
        max-width: 300px;
    }
    
    .accreditation-logos {
        gap: 10px;
    }
    
    .accreditation-logos .accreditation-logo {
        height: 25px;
    }
    
    /* IT Service Management Section Mobile */
    .itsm-left-panel,
    .itsm-right-panel {
        min-height: 50vh;
        padding: 40px 20px;
    }
    
    .itsm-title {
        font-size: 2.5rem;
    }
    
    .itsm-graphic-img {
        max-width: 300px;
    }
    
    /* Financing Banner Section Mobile */
    .financing-banner-section {
        min-height: 60vh;
    }
    
    .financing-banner-section::before {
        clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
    }
    
    .financing-left-panel,
    .financing-right-panel {
        min-height: 60vh;
        padding: 40px 20px;
    }
    
    .financing-woman-img {
        max-width: 300px;
    }
    
    .financing-title {
        font-size: 2rem;
    }
    
    /* Get In Touch Section Mobile */
    .get-in-touch-section {
        padding: 50px 0;
    }
    
    .section-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    
    .contact-card {
        margin-bottom: 20px;
    }
    
    .contact-photo {
        width: 180px;
        height: 220px;
    }
    
    .specialization {
        font-size: 1rem;
    }
    
    .contact-name {
        font-size: 1.1rem;
    }
    
    .contact-number {
        font-size: 0.9rem;
    }
    
    .contact-info {
        gap: 10px;
        flex-wrap: wrap;
        text-align: center;
    }

    /* Financing Section Mobile */
    .financing-section {
        padding: 40px 0;
    }
    
    .financing-card {
        padding: 30px 25px;
        margin: 0 15px;
    }
    
    .financing-title {
        font-size: 1.9rem;
        margin-bottom: 12px;
    }
    
    .financing-subtitle {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .financing-content {
        padding-right: 0;
        margin-bottom: 25px;
    }
    
    .financing-features {
        margin-bottom: 25px;
    }
    
    .feature-item {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    
    .main-logo {
        width: 120px;
        height: 120px;
    }
    
    .financing-visual {
        min-height: 250px;
    }
    
    .floating-circle {
        display: none; /* Hide floating elements on mobile for better performance */
    }
}

/* Animation Effects */
.benefit-item {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.benefit-item:nth-child(1) { animation-delay: 0.2s; }
.benefit-item:nth-child(2) { animation-delay: 0.3s; }
.benefit-item:nth-child(3) { animation-delay: 0.4s; }
.benefit-item:nth-child(4) { animation-delay: 0.5s; }
.benefit-item:nth-child(5) { animation-delay: 0.6s; }

.requirement-item {
    animation: fadeInLeft 0.6s ease-out forwards;
    opacity: 0;
    transform: translateX(-30px);
}

.requirement-item:nth-child(1) { animation-delay: 0.2s; }
.requirement-item:nth-child(2) { animation-delay: 0.3s; }
.requirement-item:nth-child(3) { animation-delay: 0.4s; }
.requirement-item:nth-child(4) { animation-delay: 0.5s; }
.requirement-item:nth-child(5) { animation-delay: 0.6s; }

/* Keyframe Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading Animation */
.yayasan-hero-section {
    animation: fadeIn 1.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Gradient Animation */
@keyframes gradientShift {
    0%, 100% {
        background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 50%, #e91e63 100%);
        background-clip: text;
        -webkit-background-clip: text;
    }
    50% {
        background: linear-gradient(135deg, #e91e63 0%, #6f42c1 50%, #8e44ad 100%);
        background-clip: text;
        -webkit-background-clip: text;
    }
}

/* Underline Animation */
@keyframes underlineExpand {
    from {
        width: 0;
    }
    to {
        width: 80px;
    }
}

@keyframes subtleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px) rotate(1deg);
        opacity: 0.5;
    }
}

@keyframes gentlePulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

@keyframes marbleFlow {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateX(40px) translateY(-30px) rotate(4deg) scale(1.05);
        opacity: 1;
    }
    50% {
        transform: translateX(-20px) translateY(35px) rotate(-2deg) scale(0.95);
        opacity: 0.9;
    }
    75% {
        transform: translateX(30px) translateY(-20px) rotate(3deg) scale(1.02);
        opacity: 1;
    }
}

@keyframes marbleRotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: rotate(90deg) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) scale(0.9);
        opacity: 0.7;
    }
    75% {
        transform: rotate(270deg) scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.6;
    }
}

@keyframes marbleSwirl {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
        opacity: 0.7;
    }
    33% {
        transform: translateX(50px) translateY(-40px) scale(1.2) rotate(120deg);
        opacity: 1;
    }
    66% {
        transform: translateX(-30px) translateY(50px) scale(0.8) rotate(240deg);
        opacity: 0.8;
    }
}

@keyframes marbleTwist {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: rotate(90deg) scale(1.15);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(0.85);
        opacity: 0.8;
    }
    75% {
        transform: rotate(270deg) scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.7;
    }
}

@keyframes marbleDrift {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    20% {
        transform: translateX(60px) translateY(-50px) rotate(6deg) scale(1.1);
        opacity: 1;
    }
    40% {
        transform: translateX(-40px) translateY(60px) rotate(-4deg) scale(0.9);
        opacity: 0.8;
    }
    60% {
        transform: translateX(50px) translateY(-30px) rotate(4deg) scale(1.05);
        opacity: 0.9;
    }
    80% {
        transform: translateX(-20px) translateY(40px) rotate(-2deg) scale(0.95);
        opacity: 0.8;
    }
}