/* Reset default styles for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
}

/* Root font-size set to 62.5% for easier rem-based calculations */
html {
    font-size: 62.5%;
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/* General Body Styles */
body {
    background-color: #000; /* Dark background for contrast */
    color: #fff; /* White text color */
}

/* Header Styles */
header {
    position: fixed; /* Keep header fixed at the top */
    top: 0;
    width: 100%;
    padding: 1.5rem 8%; /* Add padding for spacing */
    background-color: rgba(0, 0, 0, 0.85); /* Transparent black background */
    display: flex;
    justify-content: space-between; /* Space out logo and nav */
    align-items: center;
    z-index: 1000; /* Ensure the header stays on top of other elements */
}

/* Logo Styling */
.logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: #b74b4b; /* Red color for the logo */
}

/* Navigation Links Styles */
nav a {
    margin-left: 2rem;
    font-size: 1.6rem;
    color: white;
    transition: 0.3s; /* Smooth transition for hover effect */
}

/* Hover effect for nav links */
nav a:hover,
nav a.active {
    color: #b74b4b; /* Change color to red on hover */
    border-bottom: 2px solid #b74b4b; /* Add a red border under the active link */
}

/* Main Content Section Styles */
main {
    padding-top: 8rem; /* Add space for the fixed header */
}

/* General Section Styles */
section {
    padding: 6rem 8%;
    min-height: 100vh; /* Each section takes full viewport height */
}

/* Home Section Layout */
.home {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
}

/* Content within the home section */
.home-content {
    flex: 1 1 50%; /* Take up 50% of the space on larger screens */
    animation: fadeInLeft 1s ease-in-out; /* Animation for fade-in effect */
}

.home-content h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.home-content h3 {
    font-size: 2.4rem;
    margin-bottom: 2rem;
    color: #b74b4b; /* Red color for emphasis */
}

.home-content p {
    font-size: 1.6rem;
    max-width: 500px; /* Limit paragraph width */
}

/* Profile Image Styling */
.home-img {
    flex: 1 1 30%;
    text-align: center;
    animation: fadeInRight 1s ease-in-out; /* Animation for fade-in effect */
}

.home-img img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%; /* Make the image circular */
    box-shadow: 0 0 20px #b74b4b;
    transition: transform 0.3s ease;
}

/* Hover effect for the profile image */
.home-img img:hover {
    transform: scale(1.05); /* Slight zoom the image on hover */
}

/* About Me and Contact Section - Centered */
.about, .contact {
    text-align: center;
    max-width: 800px;
    margin: 0 auto; /* Center content */
}

.about h2,
.contact h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #b74b4b;
}

.about p,
.contact p {
    font-size: 1.6rem;
}

/* Skills Section Styles */
.skills-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
    gap: 2rem;
    font-size: 1.6rem;
    padding-left: 0;
}

.skills-list li {
    background-color: #111;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    transition: transform 0.3s ease;
}

/* Hover effect for skills */
.skills-list li:hover {
    transform: scale(1.05);
}

.skills-list img {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

/* Fade-in Animations for Sections */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Footer Styles */
footer {
    text-align: center;
    background-color: #111;
    color: white;
    padding: 2rem 0;
}

footer p {
    font-size: 1.4rem;
}

/* Style for the skills section */
.skills {
    text-align: center; /* Centers all content inside the section */
    padding: 5rem 8%; /* Adds space around */
}

.skills h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #b74b4b; /* Red color for the title */
    font-weight: 700;
}

.skills-list {
    display: grid; /* Use grid layout for the logos */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adaptable for smaller screens */
    gap: 3rem; /* Space between each logo */
    justify-items: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
}

.skill {
    text-align: center; /* Centers the text */
    padding: 2rem;
    border-radius: 1rem;
    background-color: #111; /* Dark background for the container */
    transition: transform 0.3s ease; /* Animation on hover */
}

.skill img {
    width: 100px; /* Adjust the logo size */
    height: 100px; /* Keep the aspect ratio square */
    object-fit: contain; /* Ensures the image keeps its aspect ratio */
    margin-bottom: 1rem; /* Space between the image and text */
    transition: transform 0.3s ease; /* Transition effect when hovering */
}

.skill p {
    font-size: 1.6rem;
    color: #fff; /* White text */
    font-weight: 600;
}

/* Hover effect for the skills */
.skill:hover {
    transform: scale(1.1); /* Slightly increases the size when hovered */
    background-color: #b74b4b; /* Red background when hovered */
}

.skill:hover img {
    transform: scale(1.1); /* Makes the logo grow when hovered */
}

/* For smaller screens */
@media (max-width: 768px) {
    .skills h2 {
        font-size: 2.5rem; /* Smaller title for mobile */
    }

    .skills-list {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Smaller layout for mobile */
    }
}

/* Styles for the My Projects Section */
.projects {
    text-align: center; /* Center the title and content */
    padding: 5rem 8%; /* Space around the section */
}

.projects h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #b74b4b; /* Title color */
    font-weight: 700;
}

/* GitHub Icon Styles */
.github-icon {
    font-size: 8rem; /* Large GitHub icon */
    color: #fff; /* White color for the icon */
    background-color: #333; /* Dark background for the icon */
    padding: 2rem; /* Space around the icon */
    border-radius: 50%; /* Circle shape */
    display: inline-block; /* Makes it behave like a block element */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
}

.github-icon:hover {
    transform: scale(1.1); /* Enlarges the icon on hover */
    background-color: #b74b4b; /* Red background on hover */
}

/* New navigation button styles for "My Projects" */
.projects-btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.8rem;
    background-color: #b74b4b; /* Red background */
    color: white;
    border-radius: 0.5rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 2rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Hover effect for the button */
.projects-btn:hover {
    background-color: #a03535; /* Darker red on hover */
    transform: scale(1.1); /* Slight zoom effect */
}

/* Ensuring all the sections and the button align properly */
#projects {
    text-align: center;
    padding: 6rem 8%;
}

#projects h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #b74b4b; /* Red color for title */
}

/* GitHub Icon Style (already included) */
.github-icon {
    font-size: 8rem;
    color: #fff;
    background-color: #333;
    padding: 2rem;
    border-radius: 50%;
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.github-icon:hover {
    transform: scale(1.1);
    background-color: #b74b4b;
}