/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

/* Theme Variables */
:root {
    /* Dark theme (default) */
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --accent-color: #a91137;
    --border-color: #2c2c2c;
    --card-bg: rgba(26, 26, 26, 0.95);
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #333333;
    --text-secondary: #666666;
    --accent-color: #a91137;
    --border-color: #e0e0e0;
    --card-bg: rgba(255, 255, 255, 0.95);
}

/* Navigation */
nav {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(10, 10, 12, 0.95);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.logo {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    font-family: 'Times New Roman', serif;
    text-shadow: 0 0 10px rgba(128, 0, 32, 0.5);
    text-decoration: none;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0 1rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--accent-color);
    text-shadow: 0 0 8px rgba(128, 0, 32, 0.5);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Active link style */
.nav-links a.active {
    color: var(--accent-color);
}

.nav-links a.active::after {
    width: 100%;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 20px;
    border-radius: 20px;
    background-color: black; /* Blue to white gradient */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
}

.profile-container {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    padding: 2rem;
    border-radius: 20px;
}

.profile-img {
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    border: 5px solid rgba(255, 255, 255, 0.1);
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    flex: 1;
}

.profile-info h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-info p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 800px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--accent-color);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 5px 15px rgba(169, 17, 55, 0.3);
}

.cta-button:hover {
    background: transparent;
    border-color: var(--accent-color);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(169, 17, 55, 0.4);
}

/* Responsive adjustments */
@media (max-width: 968px) {
    .profile-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .profile-img {
        width: 250px;
        height: 250px;
    }

    .profile-info h1 {
        font-size: 2rem;
    }

    .profile-info p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .profile-img {
        width: 200px;
        height: 200px;
    }

    .profile-container {
        padding: 1.5rem;
    }

    .profile-info h1 {
        font-size: 1.8rem;
    }
}

/* Curve line for dark theme */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: var(--bg-secondary);
    clip-path: ellipse(50% 60% at 50% 100%);
    display: none;
}

[data-theme="dark"] .hero::after {
    display: block;
}

/* Stars Animation */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(3px 3px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 50px 160px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 160px 120px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 200px 150px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 250px 100px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 300px 180px, #fff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 350px 350px;
    animation: twinkle 3s ease-in-out infinite;
}

.stars::after {
    background-image: 
        radial-gradient(3px 3px at 15px 15px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 60px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 100px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 150px 60px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 200px 120px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 250px 150px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 300px 100px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 350px 170px, #fff, rgba(0,0,0,0));
    background-size: 400px 400px;
    animation: twinkle 4s ease-in-out infinite;
    animation-delay: -2s;
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.2;
    }
}

.night-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #0a0a0c 0%, #1a1a24 50%, #362154 100%);
    z-index: 1;
}

.moon {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%, #fff, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 50px #fff;
    opacity: 0.8;
}

.clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.cloud-1, .cloud-2, .cloud-3 {
    position: absolute;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    opacity: 0.1;
    animation: moveCloud linear infinite;
}

.cloud-1 {
    top: 20%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' fill='%23FFFFFF'%3E%3Cpath d='M0 30 Q 25 0 50 30 T 100 30 T 150 30 T 200 30 V60 H0'/%3E%3C/svg%3E");
    animation-duration: 60s;
}

.cloud-2 {
    top: 40%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' fill='%23FFFFFF'%3E%3Cpath d='M0 30 Q 35 10 70 30 T 140 30 T 200 30 V60 H0'/%3E%3C/svg%3E");
    animation-duration: 45s;
    opacity: 0.08;
}

.cloud-3 {
    top: 60%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' fill='%23FFFFFF'%3E%3Cpath d='M0 30 Q 45 5 90 30 T 180 30 T 200 30 V60 H0'/%3E%3C/svg%3E");
    animation-duration: 75s;
    opacity: 0.06;
}

@keyframes moveCloud {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Cloud Styles */
.cloud {
    position: absolute;
    background: none;
}

.cloud::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 30px;
    background: var(--text-secondary);
    border-radius: 30px;
}

.cloud::after {
    content: '';
    position: absolute;
    left: 25px;
    width: 80px;
    height: 40px;
    background: var(--text-secondary);
    border-radius: 50px;
    top: -15px;
}

.cloud1 {
    width: 100px;
    height: 40px;
    top: 100px;
    animation: moveCloud 60s linear infinite;
}

.cloud2 {
    width: 120px;
    height: 45px;
    top: 200px;
    animation: moveCloud 45s linear infinite;
}

.cloud3 {
    width: 80px;
    height: 35px;
    top: 150px;
    animation: moveCloud 75s linear infinite;
}

/* Sections */
.section {
    padding: 5rem 2rem;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 20px;
}

.section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-secondary);
    font-size: 2.5rem;
    font-family: 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--accent-color);
    margin: 20px auto;
}

/* About Section */
.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
}

/* Academics Timeline */
.timeline-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
    margin: 20px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(128, 0, 32, 0.1);
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.timeline-item {
    position: relative;
    width: calc(50% - 30px);
    margin: 30px 0;
    padding: 20px;
    background: rgba(10, 10, 12, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center center;
    z-index: 1;
    cursor: pointer;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--accent-color);
}

.timeline-item:nth-child(odd) {
    left: 0;
}

.timeline-item:nth-child(odd)::before {
    right: -50px;
}

.timeline-item:nth-child(even) {
    left: calc(50% + 30px);
}

.timeline-item:nth-child(even)::before {
    left: -50px;
}

.timeline-item:hover {
    transform: scale(1.2);
    box-shadow: 0 20px 40px rgba(128, 0, 32, 0.5);
    z-index: 1000;
    background: rgba(10, 10, 12, 0.95);
}


.timeline-item h3 {
    margin: 0 0 10px;
    color: var(--accent-color);
    font-size: 1.2rem;
}


   

.timeline-item .institution{
    margin: 0;
    font-size: 0.8rem;
    padding-left: 0.4rem;
    /* color: var(--text-primary); */
   
}

.timeline-item .date {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    color: var(--text-primary);
    border-radius: 15px;
    font-size: 0.9rem;
}

.timeline-item:hover .date {
    background: transparent;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent,
        var(--accent-color) 10%,
        var(--accent-color) 90%,
        transparent
    );
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        width: calc(100% - 60px);
        margin-left: 60px;
    }
    
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
    }
    
    .timeline-item::before {
        left: -30px !important;
        width: 30px;
    }
    
    .timeline-item:hover {
        transform: scale(1.1); /* Smaller scale on mobile */
    }
}

/* Interests Grid */
.interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.interest-item {
    text-align: center;
    padding: 2rem;
    background: #222222;
    border-radius: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}

.interest-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.interest-item i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

/* Certificates Grid */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.certificate-item {
    background: #222222;
    padding: 2rem;
    border-radius: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.certificate-item:hover {
    border-color: var(--accent-color);
}

.certificate-item i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem;
}

.project-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(169, 17, 55, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 229, 255, 0.2), 0 8px 15px rgba(169, 17, 55, 0.2);
}

.project-item:hover::before {
    opacity: 1;
}

.project-item h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.project-item:hover h3 {
    color: var(--accent-color);
}

.project-item p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.project-content {
    position: relative;
    z-index: 5;
}

.project-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    z-index: 10;
    position: relative;
}

.project-btn {
    padding: 0.8rem 1.5rem;
    background: rgba(169, 17, 55, 0.9);
    color: var(--text-primary);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    outline: none;
}

.project-btn i {
    margin-right: 0.5rem;
}

.project-btn:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(169, 17, 55, 0.3);
}

.project-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Section */
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.contact-info {
    display: grid;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 1rem;
    background: #222222;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 10px rgba(128, 0, 32, 0.2);
}

.contact-form textarea {
    height: 150px;
    resize: vertical;
}

.contact-form button {
    padding: 1rem;
    background: var(--accent-color);
    color: var(--text-primary);
    border: 1px solid var(--accent-color);
    border-radius: 0;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-form button:hover {
    background: transparent;
    color: var(--accent-color);
}

/* Contact form styles for light theme */
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
    background: #ffffff;
    color: #333333;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(169, 17, 55, 0.15);
}

[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder {
    color: #666666;
}

[data-theme="light"] .contact-form .submit-btn {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(169, 17, 55, 0.2);
}

[data-theme="light"] .contact-form .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(234, 228, 229, 0.3);
}

[data-theme="light"] .contact-section h2 {
    color: #333333;[data-theme="light"] .contact-form .submit-btn {
        color: white; /* Change text color to white */
    }
}

[data-theme="light"] .contact-section p {
    color: #555555;
}

/* Footer */
footer {
    background: #0a0a0a;
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--border-color);
}

.social-links {
    margin-top: 1rem;
}

.social-links a {
    color: var(--text-secondary);
    font-size: 1.5rem;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: var(--accent-color);
    transform: translateY(-3px);
    display: inline-block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .burger {
        display: block;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .section {
        padding: 3rem 1rem;
    }
}

/* Burger Menu */
.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    margin: 5px;
    transition: all 0.3s ease;
}

/* Output Modal Styles */
.output-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 15px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--text-primary);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: var(--accent-color);
    transform: rotate(90deg);
}

.modal-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    margin: 0;
}

.project-description {
    color: var(--text-secondary);
}

.project-description h3 {
    color: var(--text-primary);
    margin: 1.5rem 0 1rem;
}

.project-description ul {
    list-style-type: none;
    padding-left: 0;
}

.project-description li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.project-description li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

.terminal-output {
    background: #000;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    font-family: monospace;
    white-space: pre-wrap;
}

.terminal-output pre {
    color: #0f0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-header h2 {
        font-size: 1.4rem;
    }

    .project-description {
        padding: 1rem;
    }

    .terminal-output {
        margin: 0 1rem 1rem 1rem;
        padding: 1rem;
    }

    .terminal-output pre {
        font-size: 14px;
    }
}

/* Butterfly Styles */
@keyframes leftWing {
    0%, 100% {
        transform: rotate(-30deg) scaleX(1);
    }
    50% {
        transform: rotate(30deg) scaleX(0.8);
    }
}

@keyframes rightWing {
    0%, 100% {
        transform: rotate(30deg) scaleX(1);
    }
    50% {
        transform: rotate(-30deg) scaleX(0.8);
    }
}

.butterfly {
    position: fixed;
    width: 200px; /* Increased size for visibility */
    height: 200px; /* Increased size for visibility */
    background-color: transparent; /* Set background to transparent */
    border-radius: 0%; /* Makes it circular */
    opacity: 1; /* Ensure visibility */
    pointer-events: none;
    z-index: 1000;
}

.butterfly::before,
.butterfly::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 15px;
    height: 20px;
    background: linear-gradient(45deg, #ff1493, #ff69b4);
    opacity: 1;
    border-radius: 50px 0;
}

.butterfly::before {
    left: 0;
    transform-origin: right center;
    animation: leftWing 1.4s ease-in-out infinite;
}

.butterfly::after {
    right: 0;
    transform-origin: left center;
    animation: rightWing 1.4s ease-in-out infinite;
}

/* CTA Container and Social Icons */
.cta-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(169, 17, 55, 0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(169, 17, 55, 0.3);
}

.social-icon.linkedin:hover {
    background: #0077b5;
}

.social-icon.github:hover {
    background: #333;
}

.social-icon.facebook:hover {
    background: #1877f2;
}

.social-icon.youtube:hover {
    background: #ff0000;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .social-icons {
        margin-top: 1rem;
    }
}

/* Theme Toggle Button */
#theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #28096b !important; /* Dark theme */
}

input:checked + .slider::before {
  background-color: #fff; /* Toggle button color */
}

input:checked ~ .clouds_stars {
  background-color: #fff; /* Clouds and stars color */
}

.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

/* Dark theme switch button styles */
[data-theme="dark"] .switch {
  background-color: #333;
}

[data-theme="dark"] .slider {
  background-color: #333;
}

[data-theme="dark"] .slider::before {
  background-color: #fff;
}

/* Light theme switch button styles */
[data-theme="light"] .switch {
  background-color: #fff;
}

[data-theme="light"] .slider {
  background-color: #fff;
}

[data-theme="light"] .slider::before {
  background-color: #333;
}

/* Academic section styles */
[data-theme="light"] .timeline-item {
    background: transparent;
    border-color: #ddd;
}

[data-theme="light"] .timeline-item h3 {
    color: #333333;
    font-weight: 600;
}

[data-theme="light"] .timeline-item p {
    color: #333333;
}

[data-theme="light"] .timeline-item .date {
    color: #333333;
    background: transparent;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

[data-theme="light"] .education-section {
    background: var(--bg-secondary);
}

[data-theme="light"] .education-section h2 {
    color: #333333;
}

/* Make the sun and moon icons more distinct */
.fa-sun {
    font-size: 1.8rem;
    color: #FDB813;
}

.fa-moon {
    font-size: 1.8rem;
    color: #C2C5CC;
}

/* Background Scenes */
.background-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Dark Theme Background */
.dark-theme-bg {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .dark-theme-bg {
    display: block;
}

.moon {
    position: absolute;
    top: 50px;
    right: 100px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%, #fff, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 50px #fff;
    opacity: 0.8;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 50px white,
        200px 100px white,
        300px 150px white,
        400px 50px white,
        500px 200px white,
        600px 100px white,
        700px 150px white,
        800px 50px white,
        900px 200px white,
        150px 250px white,
        250px 300px white,
        350px 350px white,
        450px 250px white,
        550px 300px white,
        650px 350px white,
        750px 250px white,
        850px 300px white,
        950px 350px white;
    animation: twinkle 5s infinite alternate;
}

/* Light Theme Background */
.light-theme-bg {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

[data-theme="light"] .light-theme-bg {
    display: block;
}

.sun {
    position: absolute;
    top: 50px;
    right: 100px;
    width: 100px;
    height: 100px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 50px #ffd700;
    animation: rotate 20s linear infinite;
}

.scene {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
}

.trees {
    position: absolute;
    bottom: 100px;
    width: 100%;
    height: 200px;
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, #90EE90, #228B22);
}

.road {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, #666, #444);
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
}

/* Cloud Animations */
.clouds-dark, .clouds-light {
    position: absolute;
    width: 100%;
    height: 100%;
}

.cloud {
    position: absolute;
    background: var(--text-secondary);
    border-radius: 50px;
    opacity: 0.8;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud1 {
    width: 100px;
    height: 40px;
    top: 100px;
    animation: moveCloud 60s linear infinite;
}

.cloud2 {
    width: 120px;
    height: 45px;
    top: 200px;
    animation: moveCloud 45s linear infinite;
}

.cloud3 {
    width: 80px;
    height: 35px;
    top: 150px;
    animation: moveCloud 75s linear infinite;
}

/* Animations */
@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes moveCloud {
    from { left: -200px; }
    to { left: 100%; }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Fix text visibility in light theme */
[data-theme="light"] {
    --text-primary: #333333;
    --text-secondary: #555555;
    --bg-card: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .project-item,
[data-theme="light"] .interest-item,
[data-theme="light"] .certificate-item {
    background: var(--bg-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .project-description,
[data-theme="light"] .timeline-item p,
[data-theme="light"] .interest-item p {
    color: var(--text-secondary);
}

[data-theme="light"] .project-btn {
    background: var(--accent-color);
    color: white;
}

[data-theme="light"] .project-btn:hover {
    background: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

[data-theme="light"] .section {
    background: var(--bg-secondary);
}

[data-theme="light"] .hero-content h1,
[data-theme="light"] .hero-content p {
    color: var(--text-primary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Ensure text contrast */
[data-theme="light"] .nav-links a {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
    color: var(--accent-color);
}

[data-theme="light"] .timeline-item {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="light"] .timeline-item h3 {
    color: var(--accent-color);
}

[data-theme="light"] .timeline-item p,
[data-theme="light"] .timeline-item .date {
    color: var(--text-secondary);
}

[data-theme="light"] .logo {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .light-theme-bg {
    background: linear-gradient(180deg, #87CEEB 0%, #B0E2FF 100%);
}

[data-theme="light"] .cloud::before,
[data-theme="light"] .cloud::after {
    background: #ffffff;
}

[data-theme="light"] .contact-form .submit-btn {
    color: white; /* Change text color to white */
}