/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


/* Body */
body {
    font-family: 'Arial', sans-serif;
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    line-height: 1.6; /* Improves readability */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    padding-top: 80px; /* Space for the fixed nav bar */
}

/* Full-Height Section for Centering */
.full-height-section {
    display: flex;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    width: 100%;
    min-height: calc(100vh - 80px); /* Adjust height to account for the fixed nav bar */
    max-width: 900px; /* Limit width for better readability */
    padding: 40px 20px;
    background-color: #111; /* Dark gray background for sections */
    border-radius: 10px;
    margin-bottom: 20px; /* Add some space between sections */
}

/* Navigation Bar */
header nav {
    display: flex;
    justify-content: center; /* Centers the navigation items horizontally */
    align-items: center;
    padding: 20px;
    background-color: #000; /* Keeps navigation background black */
    width: 100%; /* Full-width navigation */
    position: fixed; /* Keeps the nav bar fixed at the top */
    top: 0;
    left: 0;
    z-index: 1000; /* Ensures the nav bar stays on top of other content */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}


/* Align left items */
.nav-left {
    display: flex;
    gap: 20px;
}

/* Align right items (social icons) */
.nav-right {
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: #fff; /* White text */
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
}

nav ul li a:hover {
    color: plum; /* Orange hover effect */
}

/* About Section */
.about-section h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.about-section p {
    margin: 20px 0;
}

.profile-img {
    width: 250px;
    height: auto;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 5px solid plum; /* Border matches the color scheme */
}

/* Experience Section */
.experience-item {
    padding: 20px;
    background-color: #222; /* Dark gray for contrast */
    margin-bottom: 20px;
    border-radius: 10px;
}

.experience-item h3 {
    color: #fff;
}

.tag {
    background-color: plum;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

/* Contact Section */
.contact-section .btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    text-decoration: none;
    color: #000; /* Black text */
    background-color: plum; /* Orange background */
    border-radius: 5px;
    transition: opacity 0.3s;
}

.contact-section .btn:hover {
    opacity: 0.8; /* Slight opacity change on hover */
}

/* Experience Section */
.experience-section {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    width: 100%;
    max-width: 900px; /* Limit the width for readability */
    padding: 40px 20px;
    background-color: #000; /* Dark gray background for sections */
    border-radius: 10px;
    margin: 0 auto 20px; /* Center the section with margin auto */
}

/* Individual experience items */
.experience-item {
    width: 100%; /* Full width for the experience items */
    max-width: 700px; /* Limit the width */
    padding: 20px;
    background-color: #000; /* Dark gray for contrast */
    margin-bottom: 20px;
    border-radius: 10px;
    text-align: center; /* Center text within the experience items */
}

.experience-item h3 {
    color: #fff;
    margin-bottom: 10px;
}

.experience-item p {
    color: #ddd; /* Lighter gray for better contrast */
}

/* H2 Title */
.experience-section h2 {
    font-size: 48px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center; /* Center the heading text */
}

/* Contact Section */
#contact {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center;
    width: 100%;
    max-width: 900px; /* Limit the width for readability */
    padding: 40px 20px;
    background-color: #000; /* Match the dark gray/black background for consistency */
    border-radius: 10px; /* Consistent border radius */
    margin: 0 auto 20px; /* Center section with margin auto */
    text-align: center; /* Center the text to match other sections */
}

/* H2 Title in Contact Section */
#contact h2 {
    font-size: 36px; /* Reduced font size for a smaller title */
    color: #fff; /* White text for consistency */
    margin-bottom: 20px;
    text-transform: uppercase; /* Same text transformation as other section headings */
    text-align: center; /* Center the heading */
}

/* Contact paragraph and link */
#contact p {
    color: white; /* Lighter gray for readability, matching the other sections */
    margin-bottom: 10px;
}

#contact a {
    color: plum; /* Keep the link color consistent with the color scheme */
    text-decoration: none;
}

#contact a:hover {
    opacity: 0.8; /* Same hover effect as the rest of the site */
}

.contact-section .btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    text-decoration: none;
    color: #000;
    background-color: white;
    border-radius: 5px;
    transition: opacity 0.3s, transform 0.3s; /* Add transform to enhance the hover effect */
}

.contact-section .btn:hover {
    opacity: 0.8;
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

h2 {
    opacity: 0;
    animation: fadeInUp 1s forwards;
    animation-delay: 0.3s;
}

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

#reviews {
    padding: 40px 20px;
    background-color: #111;
    color: #fff;
}

.review-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.review-item {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    transition: transform 0.3s ease;
}

.review-item:hover {
    transform: scale(1.05);
}




/* Footer (Optional) */
footer {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
}