/* Reset and Base Styles */* {    margin: 0;    padding: 0;    box-sizing: border-box;}html {    scroll-behavior: smooth;}body {    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    line-height: 1.6;    color: #333;    background: white;    min-height: 100vh;    transition: all 0.3s ease;}/* Theme Styles */body.light {    background-color: #f8f1eb;    color: #000000;}body.light h1, body.light h2, body.light h3 {    color: #333;}body.light p {    color: #666;}body.light a {    color: #4a6ba3;}body.light li {    color: #666;}body.dark {    background-color: #303048;    color: #ffffff;}body.dark h1, body.dark h2, body.dark h3 {    color: #ffffff;}body.dark p {    color: #e0e0d0;}body.dark a {    color: #FFE4EB;}body.dark li {    color: #e0e0d0;}body.dark .section-title {    color: #e0e0e0;}body.dark .header {    background: linear-gradient(135deg, #4a5cc4 0%, #5d4582 100%);}body.dark #home {    background: linear-gradient(135deg, #4a5cc4 0%, #5d4582 100%);}body.dark .about-content,body.dark .reading-container,body.dark .posts-container,body.dark .knowledge-container,body.dark .projects-container,body.dark .contact-container {    background: linear-gradient(135deg, #4a5cc4 0%, #5d4582 100%);}/* Header/Navigation */.header {    position: fixed;    top: 0;    width: 100%;    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    padding: 1rem 2rem;    z-index: 1000;    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;    display: flex;    justify-content: space-between;    align-items: center;}.header-title {    font-size: 1.5rem;    font-weight: bold;    color: white;}.nav-bar {    flex: 1;    display: flex;    justify-content: center;}.nav-links {    display: flex;    list-style: none;    gap: 2rem;    padding: 0;    margin: 0;}.nav-links li {    margin: 0;}.nav-links a,.nav-link {    text-decoration: none;    color: white;    font-weight: 500;    transition: all 0.3s ease;    position: relative;}.nav-link:hover {    color: rgba(255, 255, 255, 0.8);    transform: translateY(-2px);}.nav-link::after {    content: '';    position: absolute;    width: 0;    height: 2px;    bottom: -5px;    left: 0;    background: white;    transition: width 0.3s ease;}.nav-link:hover::after {    width: 100%;}/* Theme Switcher */.theme-switcher {    display: flex;    align-items: center;}.switch {    position: relative;    display: inline-block;    width: 60px;    height: 34px;}.switch input,.switch-select {    opacity: 0;    width: 0;    height: 0;}.slider {    position: absolute;    cursor: pointer;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: #FDFDFD;    transition: .4s;    border-radius: 34px;}.slider:before {    position: absolute;    content: "";    height: 26px;    width: 26px;    left: 4px;    bottom: 4px;    transition: .4s;    background-image: url('https://github.com/user-attachments/assets/4c345764-900b-4f56-ac06-f7ad311c498d');    background-size: cover;    background-repeat: no-repeat;    border-radius: 50%;}.slider:after {    position: absolute;    content: "";    height: 26px;    width: 26px;    right: 4px;    bottom: 4px;    transition: .4s;    background-image: url('https://github.com/user-attachments/assets/a1bb5805-a1ac-4111-842c-a1fd2f4e0c7a');    background-size: cover;    background-repeat: no-repeat;    opacity: 0;    border-radius: 50%;}input:checked + .slider {    background-color: #C7C7D7;}input:focus + .slider {    box-shadow: 0 0 1px #C7C7D7;}input:checked + .slider:before {    opacity: 0;    transform: translateX(26px);}input:checked + .slider:after {    opacity: 1;}.switch-select:checked + .slider {    background-color: rgba(255, 255, 255, 0.5);}.switch-select:checked + .slider:before {    transform: translateX(26px);}/* Main Content */.profile {    padding-top: 0;}

.section-title {    text-align: center;    font-size: 2.5rem;    margin-bottom: 3rem;    color: #333;}

/* Home Section */#home {    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    min-height: 100vh;    display: flex;    align-items: center;    padding: 0 2rem;    padding-top: 80px;}.profile-section {    max-width: 1200px;    margin: 0 auto;    width: 100%;}.profile-header {    display: flex;    align-items: center;    gap: 4rem;    margin-bottom: 3rem;}.profile-image {    flex-shrink: 0;}.social-icons-img img {width: 50px; height: auto;  border-radius: 50%;    object-fit: cover;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);    border: 3px solid rgba(255, 255, 255, 0.3);}.profile-image img {    width: 300px;    height: 300px;    border-radius: 50%;    object-fit: cover;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);    border: 3px solid rgba(255, 255, 255, 0.3);}.social-icons-image {    display: flex;    justify-content: center;    gap: 1rem;    margin-top: 2rem;    padding: 1rem 0;}.social-icons-image .icon-pres {    width: 50px;    height: 50px;    transition: all 0.3s ease; }.social-icons-image .icon-pres:hover {    transform: translateY(-3px) scale(1.1);    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);}.social-icons {    display: flex;    justify-content: center;    gap: 1rem;    margin-top: 2rem;    padding: 1rem 0;}.icon-pres {    width: 40px;    height: 40px;    transition: all 0.3s ease;    border-radius: 8px;}.icon-pres:hover {    transform: translateY(-3px) scale(1.1);    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);}.profile-info {    flex: 1;    color: white;}.profile-info h2 {    font-size: 2.5rem;    margin-bottom: 2rem;    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.profile-info > p {    font-size: 1.2rem;    margin-bottom: 3rem;    opacity: 0.9;    line-height: 1.8;}.details {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 3rem;}.details section h3 {    font-size: 1.5rem;    margin-bottom: 1rem;    color: white;}.details section ul {    list-style: none;    padding: 0;}.details section li {    padding: 0.5rem 0;    color: rgba(255, 255, 255, 1);    font-size: 1.1rem;    margin: 0.5rem 0;    font-weight: 400;}

/* Reading Section */#reading {    padding: 100px 2rem;}.reading-container {    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    color: white;    padding: 3rem;    border-radius: 20px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);    max-width: 1200px;    margin: 0 auto;}.reading-toggle {    text-align: center;    margin-bottom: 2rem;}.reading-content {    margin-top: 2rem;    border-radius: 15px;    overflow: hidden;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}.reading-content iframe {    border-radius: 15px;    background: white;}

/* Posts Section */#posts {    padding: 100px 2rem;}.posts-container {    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    color: white;    padding: 3rem;    border-radius: 20px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);    max-width: 1200px;    margin: 0 auto;}.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}.post-card {    background: rgba(255, 255, 255, 0.1);    backdrop-filter: blur(10px);    padding: 1.5rem;    border-radius: 15px;    text-align: left;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;    border: 1px solid rgba(255, 255, 255, 0.2);    min-height: 250px;    display: flex;    flex-direction: column;}.post-card:hover {    transform: translateY(-5px);    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);}.post-card h3 {    font-size: 1.2rem;    margin: 0 0 1rem 0;    color: white;    font-weight: 600;    line-height: 1.3;}

.read-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.read-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.3);
}

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

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem;
}

.pagination-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    color: white;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}

/* Enhanced Post Card Styles */

.post-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    line-height: 1.4;
    flex-grow: 1;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.post-category {
    background: rgba(74, 144, 226, 0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    color: #87CEEB;
    font-weight: 500;
    border: 1px solid rgba(74, 144, 226, 0.4);
}

.post-date {
    background: rgba(34, 197, 94, 0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    color: #90EE90;
    font-weight: 500;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.post-read-time {
    background: rgba(251, 146, 60, 0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    color: #FFB347;
    font-weight: 500;
    border: 1px solid rgba(251, 146, 60, 0.4);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag {
    background: rgba(147, 51, 234, 0.3);
    color: #DDA0DD;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid rgba(147, 51, 234, 0.4);
}

/* Enhanced Project Card Styles */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.project-status {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.project-status.completed {
    background: rgba(0, 255, 0, 0.2);
    color: #90EE90;
}

.project-status.in-progress {
    background: rgba(255, 165, 0, 0.2);
    color: #FFB347;
}

.project-status.planning {
    background: rgba(255, 255, 0, 0.2);
    color: #FFFF99;
}

.project-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.tech-tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.project-links {
    display: flex;
    gap: 1rem;
    margin-top: auto;
}

.project-link {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.project-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}.btn {    padding: 12px 24px;    border: none;    border-radius: 25px;    font-weight: 600;    text-decoration: none;    display: inline-block;    transition: all 0.3s ease;    cursor: pointer;    text-align: center;}.btn-primary {    background: rgb(138, 95, 173);    color: #7f9fb3; border: 2px solid white;}.btn-secondary {    background: transparent;    color: white;    border: 2px solid white;}.btn:hover {    transform: translateY(-3px);    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}/* knowledge Section */#knowledge {    padding: 100px 2rem;}.knowledge-container {    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    color: white;    padding: 3rem;    border-radius: 20px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);    max-width: 1200px;    margin: 0 auto;}.knowledge-intro {    text-align: center;    margin-bottom: 3rem;    color: rgba(255, 255, 255, 1);    font-size: 1.1rem;    font-weight: 500;}.knowledge-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;}.service-card {    background: rgba(255, 255, 255, 0.1);    backdrop-filter: blur(10px);    padding: 2rem;    border-radius: 15px;    text-align: center;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;    border: 1px solid rgba(255, 255, 255, 0.2);}.service-card:hover {    transform: translateY(-10px);    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);}.service-icon {    width: 80px;    height: 80px;    background: rgba(255, 255, 255, 0.2);    backdrop-filter: blur(10px);    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    margin: 0 auto 1.5rem;    font-size: 2rem;    color: white;    border: 2px solid rgba(255, 255, 255, 0.3);}.service-card h3 {    font-size: 1.3rem;    margin-bottom: 1rem;    color: white;}.service-card p {    color: rgba(255, 255, 255, 1);    line-height: 1.6;    font-weight: 400;}/* Projects Section */#projects {    padding: 100px 2rem;}.projects-container {    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    color: white;    padding: 3rem;    border-radius: 20px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);    max-width: 1200px;    margin: 0 auto;}.projects-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));    gap: 2rem;}.project-card {    background: rgba(255, 255, 255, 0.1);    backdrop-filter: blur(10px);    border-radius: 15px;    overflow: hidden;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;    border: 1px solid rgba(255, 255, 255, 0.2);}.project-card:hover {    transform: translateY(-10px);    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);}.project-image {    width: 100%;    height: 200px;    background: rgba(255, 255, 255, 0.2);    backdrop-filter: blur(10px);    display: flex;    align-items: center;    justify-content: center;    color: white;    font-size: 3rem;    border-bottom: 1px solid rgba(255, 255, 255, 0.2);}.project-content {    padding: 1.5rem;}.project-content h3 {    font-size: 1.3rem;    margin-bottom: 1rem;    color: white;}.project-content p {    color: rgba(255, 255, 255, 1);    line-height: 1.6;    font-weight: 400;}/* Contact Section */#contact {    padding: 100px 2rem;}.contact-container {    background: linear-gradient(135deg, #a8c8ec 0%, #c8a8d8 100%);    color: white;    padding: 3rem;    border-radius: 20px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);    max-width: 600px;    margin: 0 auto;}.contact-form {    display: flex;    flex-direction: column;    gap: 1.5rem;}.form-group {    display: flex;    flex-direction: column;}.form-group label {    margin-bottom: 0.5rem;    font-weight: 600;    color: white;}.form-group input,.form-group textarea {    padding: 12px;    border: 2px solid rgba(255, 255, 255, 0.3);    background: rgba(255, 255, 255, 0.1);    backdrop-filter: blur(10px);    color: white;    border-radius: 8px;    font-size: 1rem;    transition: all 0.3s ease;}.form-group input::placeholder,.form-group textarea::placeholder {    color: rgba(255, 255, 255, 0.7);}.form-group input:focus,.form-group textarea:focus {    outline: none;    border-color: white;    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);    background: rgba(255, 255, 255, 0.2);}.form-group textarea {    resize: vertical;    min-height: 120px;}.submit-btn {    background: white;    color: #7f9fb3;    padding: 15px;    border: none;    border-radius: 8px;    font-size: 1.1rem;    font-weight: 600;    cursor: pointer;    transition: all 0.3s ease;}.submit-btn:hover {    transform: translateY(-2px);    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}/* Animations */@keyframes fadeInUp {    from {        opacity: 0;        transform: translateY(30px);    }    to {        opacity: 1;        transform: translateY(0);    }}.fade-in {    animation: fadeInUp 0.6s ease forwards;}/* Responsive Design */@media (max-width: 768px) {    .header {        flex-direction: column;        gap: 1rem;        padding: 1rem;    }    .header-title {        display: none;    }    .nav-links {        gap: 1rem;        font-size: 0.9rem;    }    .profile-header {        flex-direction: column;        text-align: center;        gap: 2rem;        margin-top: 120px;    }    .profile-image img {        width: 200px;        height: 200px;    }    .details {        grid-template-columns: 1fr;        gap: 2rem;    }    .about-content {        flex-direction: column;        text-align: center;        gap: 2rem;    }    .posts-grid {        grid-template-columns: 1fr;    }
    .pagination-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    .pagination-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }    .cv-buttons {        justify-content: center;    }    .knowledge-grid,    .projects-grid {        grid-template-columns: 1fr;    }    .section-title {        font-size: 2rem;    }    .profile-info h2 {        font-size: 2rem;    }}@media (max-width: 400px) {    .profile-header {        margin-top: 200px;    }}