/* General Styles */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #494949;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Hero Section with Solar System Animation */
.hero {
    background: #000;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-text {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: #ff6347;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #ff4500;
}

/* Solar System Animation */
.solar-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.sun {
    width: 100px;
    height: 100px;
    background: #ffcc00;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px #e4c54c;
    animation: rotateSun 20s linear infinite;
}

.planet {
    position: absolute;
    border-radius: 50%;
    animation: orbit linear infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.mercury {
    width: 10px;
    height: 10px;
    background: #a9a9a9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 4s;
}

.venus {
    width: 15px;
    height: 15px;
    background: #ff8c00;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 8s;
}

.earth {
    width: 20px;
    height: 20px;
    background: #00bfff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 12s;
}

.moon {
    width: 5px;
    height: 5px;
    background: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbit linear infinite;
    animation-duration: 3s;
}

.mars {
    width: 18px;
    height: 18px;
    background: #d34c1b;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 15s;
}

.jupiter {
    width: 40px;
    height: 40px;
    background: #ff8c00;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 20s;
}

.saturn {
    width: 35px;
    height: 35px;
    background: #ffd700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 25s;
}

.uranus {
    width: 30px;
    height: 30px;
    background: #00ced1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 30s;
}

.neptune {
    width: 25px;
    height: 25px;
    background: #0000ff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 35s;
}
@keyframes rotateSun {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(150px) rotate(360deg);
    }
}

/* About Section */
.about-section {
    padding: 80px 0;
}

.about-section h2 {
    margin-top: 80px;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

.about-section p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.about-section .btn {
    margin-top: 20px;
}

/* Projects Section */
.projects-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.projects-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
    margin-top: 70px;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 10px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-text {
    font-size: 1rem;
    color: #666;
}

/* Contact Section */
.contact-section {
    padding: 80px 0;
}

.contact-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
    margin-top: 50px;
}

.contact-section form {
    max-width: 600px;
    margin: 0 auto;
}

.contact-section .form-control {
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
}

.contact-section .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.contact-section textarea {
    resize: none;
}

/* Footer */
footer {
    background: #343a40;
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-top: auto;
    width: 100%;
}

footer p {
    margin: 0;
}

footer .social-links a {
    color: white;
    margin: 0 10px;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

footer .social-links a:hover {
    color: #007bff;
}

/* For about page */

/* #############Profile Image Container */
.glow-container {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
}

/* Glowing Background */
.glow-background {
    position: absolute;
    width: 120%;
    height: 120%;
    background: linear-gradient(45deg, #ff00ff, #31f531, #0038ff, #ff0000, #9560e8,#7dd0ca,#fff3a8,#0fccbf);
    top: -10%;
    left: -10%;
    border-radius: 50%;
    filter: blur(40px);
    animation: glow-animation 6s linear infinite;
    z-index: -5;
}

/* Profile Picture */
.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

/* Glow Animation */
@keyframes glow-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* EXPERIENCE TIMELINE DESIGN */
/* Timeline Design */
ul {
    --col-gap: 2rem;
    --row-gap: 2rem;
    --line-w: 0.25rem;
    display: grid;
    grid-template-columns: var(--line-w) 1fr;
    grid-auto-columns: max-content;
    column-gap: var(--col-gap);
    list-style: none;
    width: min(60rem, 90%);
    margin-inline: auto;
}

/* Line */
ul::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 20;
    background: rgb(225, 225, 225);
    border-radius: calc(var(--line-w) / 2);
}

/* Row Gaps */
ul li:not(:last-child) {
    margin-bottom: var(--row-gap);
}

/* Card */
ul li {
    grid-column: 2;
    --inlineP: 1.5rem;
    margin-inline: var(--inlineP);
    grid-row: span 2;
    display: grid;
    grid-template-rows: min-content min-content min-content;
}

/* Date */
ul li .date {
    --dateH: 3rem;
    height: var(--dateH);
    margin-inline: calc(var(--inlineP) * -1);
    text-align: center;
    background-color: var(--accent-color,#0abdc6); /* Default to blue if no accent color */
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    display: grid;
    place-content: center;
    position: relative;
    border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* Date Flap */
ul li .date::before {
    content: "";
    width: var(--inlineP);
    aspect-ratio: 1;
    background: var(--accent-color, #0abdc6);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
    position: absolute;
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    right: 0;
}

/* Circle */
ul li .date::after {
    content: "";
    position: absolute;
    width: 2rem;
    aspect-ratio: 1;
    background: var(--bgColor);
    border: 0.3rem solid var(--accent-color, #007bff);
    border-radius: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* Title and Description */
ul li .title,
ul li .descr {
    background: var(--bgColor);
    position: relative;
    padding-inline: 1.5rem;
}

ul li .title {
    overflow: hidden;
    padding-block-start: 1.5rem;
    padding-block-end: 1rem;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--color);
}

ul li .descr {
    padding-block-end: 1.5rem;
    font-weight: 300;
    color: #666;
}

/* Shadows */
ul li .title::before,
ul li .descr::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    left: 50%;
    border-radius: 50%;
    filter: blur(4px);
    transform: translate(-50%, 50%);
}

ul li .title::before {
    bottom: calc(100% + 0.125rem);
}

ul li .descr::before {
    z-index: -1;
    bottom: 0.25rem;
}

/* Responsive Design */
@media (min-width: 40rem) {

    ul {
        grid-template-columns: 1fr var(--line-w) 1fr;
    }

    ul::before {
        grid-column: 2;
    }

    ul li:nth-child(odd) {
        grid-column: 1;
    }

    ul li:nth-child(even) {
        grid-column: 3;
    }

    /* Start second card */
    ul li:nth-child(2) {
        grid-row: 2/4;
    }

    ul li:nth-child(odd) .date::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        left: 0;
    }

    ul li:nth-child(odd) .date::after {
        transform: translate(-50%, -50%);
        left: calc(100% + var(--col-gap) + var(--line-w) / 2);
    }

    ul li:nth-child(odd) .date {
        border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
    }
}

ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Testimonials Section */
/* Testimonials Section */
.testimonials-section {
    padding: 60px 0; /* Reduced padding */
    background: #f8f9fa;
}

.testimonial-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.testimonial-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    flex: 0 0 100%; /* Each card takes full width of the slider */
    max-width: 600px; /* Set a max-width for the card */
    background: #fff;
    border-radius: 10px;
    padding: 20px; /* Adjusted padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Center the card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px); /* Reduced hover effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.testimonial-image {
    text-align: center;
    margin-bottom: 15px; /* Reduced margin */
}

.testimonial-image img {
    width: 80px; /* Reduced image size */
    height: 80px; /* Reduced image size */
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-image .no-image {
    width: 80px; /* Reduced size */
    height: 80px; /* Reduced size */
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1rem; /* Reduced font size */
}

.testimonial-content {
    text-align: center;
}

.testimonial-content h4 {
    font-size: 1.25rem; /* Reduced font size */
    margin-bottom: 8px; /* Reduced margin */
    color: #333;
}

.testimonial-content p.text-muted {
    font-size: 0.9rem; /* Reduced font size */
    color: #666;
    margin-bottom: 10px; /* Reduced margin */
}

.testimonial-content p {
    font-size: 0.9rem; /* Reduced font size */
    color: #333;
    line-height: 1.5; /* Adjusted line height */
    margin-bottom: 10px; /* Reduced margin */
}

.testimonial-rating {
    color: #f5c518; /* Gold color for stars */
    font-size: 16px; /* Reduced font size */
}

/* Navigation Buttons */
.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px; /* Adjusted padding */
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem; /* Adjusted font size */
    transition: background 0.3s ease;
}

.slider-prev:hover,
.slider-next:hover {
    background: #0056b3;
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

/* Certificate Section Styling */
.certificate-section {
    background: linear-gradient(135deg, #f9f9f9, #e0e0e0); /* Gradient background */
    padding: 80px 0;
    overflow: hidden; /* Ensures animations don't overflow */
}

.certificate-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
    color: #333;
    animation: fadeInDown 1s ease-out; /* Fade-in animation for the heading */
    margin-top: 70px;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.certificate-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    opacity: 0; /* Initially hidden for animation */
    transform: translateY(20px); /* Initial position for animation */
    animation: fadeInUp 0.8s ease-out forwards; /* Fade-in animation for cards */
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.certificate-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.certificate-card .card-body {
    padding: 25px;
}

.certificate-card .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.certificate-card .card-text {
    font-size: 1rem;
    color: #666;
    margin-bottom: 15px;
}

.certificate-card .text-muted {
    font-size: 0.9rem;
    color: #888;
}

.view-certificate-btn {
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: pulse 2s infinite; /* Pulse animation for the button */
}

.view-certificate-btn:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Slight scale-up on hover */
}

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

/* CONTACT MY DETAILS */
.contact-section {
    padding: 80px 0;
}

.contact-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
    margin-top: 70px;
}

.contact-section .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-section .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.contact-section .card-body {
    padding: 20px;
}

.contact-section .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.contact-section .list-unstyled {
    list-style: none;
    padding-left: 0;
}

.contact-section .list-unstyled li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #333;
}

.contact-section .list-unstyled i {
    color: #007bff;
    margin-right: 10px;
}

.contact-section .list-unstyled a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-section .list-unstyled a:hover {
    color: #0056b3;
}




/* Navbar Icon Styles */
.navbar-nav .nav-link i {
    margin-right: 9px; /* Space between icon and text */
    font-size: 1.1rem; /* Icon size */
}

/* Hover effect for navbar links */
.navbar-nav .nav-link:hover i {
    color: #578ac0; /* Change icon color on hover */
}

/* Active link styling */
.navbar-nav .nav-link.active i {
    color: #007bff; /* Change icon color for active link */
}


/* Circular Progress Bar */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.skill-item {
    text-align: center;
}

.circular-progress {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(#d16117da 0%, #e0e0e0 0%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.circular-progress::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background-color: #fff;
}

.progress-value {
    position: relative;
    font-size: 1.5rem;
    font-weight: bold;
    color: #c5ac1d;
}

.skill-name {
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
}
.navbar {
    padding-top: 0.5rem; /* Reduce top padding */
    padding-bottom: 0.5rem; /* Reduce bottom padding */
    /* Set a fixed height for the navbar */
}