* {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                            font-family: poppins, sans-serif;
                        }
                        
                        body {
                            background: #0f1e29;
                        }
                        
                        .header {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            padding: 20px 20%;
                            background-color: transparent;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                        
                        .logo {
                            font-size: 18px;
                            color: #ccd6f6;
                            text-decoration: none;
                            font-weight: 700;
                        }
                        
                        .navbar {
                            display: flex;
                            gap: 20px;
                        }
                        
                        .navbar a {
                            font-size: 14px;
                            color: #ccd6f6;
                            text-decoration: none;
                            font-weight: 700;
                        }
                        
                        .navbar a:hover {
                            color: #aa7aa4;
                        }
                        
                        .social-icons {
                            display: flex;
                            gap: 20px;
                        }
                        
                        .social-icons a {
                            color: #ccd6f6;
                            text-decoration: none;
                            font-size: 20px;
                        }
                        
                        .social-icons a:hover {
                            color: #aa7aa4;
                        }
                        
                        .home {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            text-align: center;
                            color: #ccd6f6;
                            height: 100vh;
                        }
                        
                        .intro-content {
                            font-size: 60px;
                            margin-bottom: 10px;
                        }
                        
                        .intro-name {
                            color: #aa7aa4;
                        }
                        
                        .blinking-cursor {
                            color: #aa7aa4;
                            font-weight: 300;
                            animation: blink 1s linear infinite;
                        }
                        
                        @keyframes blink {
                            0%,
                            100% {
                                opacity: 1;
                            }
                            50% {
                                opacity: 0;
                            }
                        }
                        
                        .intro-sub {
                            font-size: 50px;
                            color: #ccd6f6;
                            font-weight: 400;
                            opacity: 0.8;
                            margin-bottom: 10px;
                        }
                        
                        .intro-desc {
                            width: 600px;
                            margin: 0 auto;
                            font-size: 18px;
                            text-align: justify;
                            opacity: 0.6;
                            word-spacing: 1px;
                            margin-bottom: 30px;
                        }
                        
                        @media (max-width: 768px) {
                            .navbar {
                                flex-direction: column;
                                align-items: end;
                            }
                            .navbar a {
                                display: none;
                            }
                            .intro-content {
                                font-size: 50px;
                            }
                            .intro-sub {
                                font-size: 40px;
                            }
                            .intro-desc {
                                width: 90%;
                            }
                        }
                        
                        #contact-me {
                            border: 2px solid #aa7aa4;
                            border-radius: 5px;
                            padding: 20px;
                            font-size: 20px;
                            font-weight: bold;
                            color: #aa7aa4;
                        }
                        
                        #contact-me:hover {
                            background: #313b58;
                        }
                        
                        .about {
                            padding: 100px 20%;
                            color: #ccd6f6;
                            min-height: 40vh;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                        }
                        
                        .about-title {
                            font-size: 35px;
                            color: #aa7aa4;
                            margin-bottom: 40px;
                            position: relative;
                        }
                        
                        .about-title::after {
                            content: '';
                            position: absolute;
                            bottom: -10px;
                            left: 0;
                            width: 50px;
                            height: 2px;
                            background: #aa7aa4;
                        }
                        
                        .about-content {
                            display: grid;
                            grid-template-columns: 3fr 2fr;
                            gap: 50px;
                            align-items: start;
                        }
                        
                        .about-text p {
                            font-size: 18px;
                            line-height: 1.6;
                            margin-bottom: 20px;
                            opacity: 0.8;
                        }
                        
                        .highlight {
                            color: #aa7aa4;
                            font-weight: 700;
                        }
                        
                        .skills h3 {
                            color: #aa7aa4;
                            margin-bottom: 30px;
                            font-size: 20px;
                        }
                        
                        .skills-grid {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            gap: 15px;
                        }
                        
                        .skill-item {
                            background: #1a2a3a;
                            padding: 12px 20px;
                            border-radius: 4px;
                            font-size: 16px;
                            text-align: center;
                            transition: transform 0.3s ease;
                        }
                        
                        .skill-item:hover {
                            transform: translateY(-3px);
                            background: #243447;
                        }
                        
                        .skills {
                            margin-bottom: 30px;
                        }
                        
                        .about-image {
                            background-image: url(./images/Bayan-pp.jpeg);
                            background-size: cover;
                            display: flex;
                            justify-content: center;
                            max-width: 300px;
                            height: 500px;
                            border: none;
                            border-radius: 10px;
                        }
                        
                        @media (max-width: 1200px) {
                            .about {
                                padding: 80px 10%;
                            }
                        }
                        
                        @media (max-width: 768px) {
                            .about-content {
                                grid-template-columns: 1fr;
                            }
                            .about-text p {
                                font-size: 16px;
                            }
                            .skills-grid {
                                grid-template-columns: repeat(2, 1fr);
                            }
                            .about-image {
                                display: none;
                            }
                        }
                        
                        @media (max-width: 480px) {
                            .about-title {
                                font-size: 28px;
                            }
                            .skill-item {
                                font-size: 14px;
                                padding: 10px 15px;
                            }
                            .about-image {
                                display: none;
                            }
                        }
                        
                        .experience {
                            padding: 100px 20%;
                            color: #ccd6f6;
                            min-height: 40vh;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                        }
                        
                        .experience-title {
                            font-size: 35px;
                            color: #aa7aa4;
                            margin-bottom: 40px;
                            position: relative;
                        }
                        
                        .experience-title::after {
                            content: '';
                            position: absolute;
                            bottom: -10px;
                            left: 0;
                            width: 50px;
                            height: 2px;
                            background: #aa7aa4;
                        }
                        
                        .experience-content {
                            display: flex;
                            flex-direction: column;
                            gap: 30px;
                        }
                        
                        .experience-item {
                            background: #1a2a3a;
                            padding: 20px;
                            border-radius: 10px;
                            transition: transform 0.3s ease;
                        }
                        
                        .experience-item:hover {
                            transform: translateY(-5px);
                            background: #243447;
                        }
                        
                        .experience-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 15px;
                        }
                        
                        .experience-role {
                            font-size: 20px;
                            color: #ccd6f6;
                            font-weight: 700;
                        }
                        
                        .experience-company {
                            font-size: 16px;
                            color: #aa7aa4;
                            font-weight: 600;
                        }
                        
                        .experience-date {
                            font-size: 14px;
                            color: #ccd6f6;
                            opacity: 0.8;
                        }
                        
                        .experience-details {
                            list-style: none;
                            padding-left: 20px;
                        }
                        
                        .experience-details li {
                            font-size: 16px;
                            margin-bottom: 10px;
                            position: relative;
                            opacity: 0.8;
                        }
                        
                        .experience-details li::before {
                            content: '▹';
                            position: absolute;
                            left: -20px;
                            color: #aa7aa4;
                        }
                        
                        @media (max-width: 1200px) {
                            .experience {
                                padding: 80px 10%;
                            }
                        }
                        
                        @media (max-width: 768px) {
                            .experience-header {
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 10px;
                            }
                            .experience-role {
                                font-size: 18px;
                            }
                            .experience-company {
                                font-size: 14px;
                            }
                            .experience-date {
                                font-size: 12px;
                            }
                            .experience-details li {
                                font-size: 14px;
                            }
                        }
                        
                        @media (max-width: 480px) {
                            .experience-title {
                                font-size: 28px;
                            }
                            .experience-item {
                                padding: 15px;
                            }
                        }
                        /* Courses Section */
                        
                        .courses {
                            padding: 100px 20%;
                            color: #ccd6f6;
                            min-height: 40vh;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                        }
                        
                        .courses-title {
                            font-size: 35px;
                            color: #aa7aa4;
                            margin-bottom: 40px;
                            position: relative;
                        }
                        
                        .courses-title::after {
                            content: '';
                            position: absolute;
                            bottom: -10px;
                            left: 0;
                            width: 50px;
                            height: 2px;
                            background: #aa7aa4;
                        }
                        
                        .courses-grid {
                            display: grid;
                            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                            gap: 30px;
                        }
                        
                        .course-item {
                            background: #1a2a3a;
                            padding: 20px;
                            border-radius: 8px;
                            transition: transform 0.3s ease;
                        }
                        
                        .course-item:hover {
                            transform: translateY(-5px);
                            background: #243447;
                        }
                        
                        .course-header {
                            margin-bottom: 15px;
                        }
                        
                        .course-name {
                            font-size: 18px;
                            color: #ccd6f6;
                            margin-bottom: 8px;
                        }
                        
                        .course-provider {
                            font-size: 14px;
                            color: #aa7aa4;
                            display: block;
                        }
                        
                        .course-date {
                            font-size: 12px;
                            color: #ccd6f6;
                            opacity: 0.7;
                        }
                        
                        .course-skills {
                            display: flex;
                            gap: 10px;
                            flex-wrap: wrap;
                            margin: 15px 0;
                        }
                        
                        .skill-tag {
                            background: #0f1e29;
                            color: #aa7aa4;
                            padding: 5px 12px;
                            border-radius: 15px;
                            font-size: 12px;
                            font-weight: 500;
                        }
                        
                        .course-link {
                            color: #ccd6f6;
                            text-decoration: none;
                            font-size: 14px;
                            display: inline-flex;
                            align-items: center;
                            gap: 5px;
                            transition: color 0.3s ease;
                        }
                        
                        .course-link:hover {
                            color: #aa7aa4;
                        }
                        /* Responsive Design */
                        
                        @media (max-width: 768px) {
                            .courses {
                                padding: 80px 10%;
                            }
                            .courses-grid {
                                grid-template-columns: 1fr;
                            }
                        }
                        
                        .credits {
                            padding: 10px;
                            text-align: center;
                            color: #ccd6f6;
                            font-size: 12px;
                            margin-bottom: 50px;
                            opacity: 0.8;
                        }