/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@500;700&display=swap');


/* Apply to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* General Styles */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light background color */
    color: #333;
}

/* Container Layout */
.container {
    display: flex;
}

/* Sidebar Styles */
.sidebar {
    width: 25%; /* Sidebar width remains the same */
    background-color: #333;
    color: white;
    padding: 30px 20px; /* Increase padding for a balanced look */
    text-align: center;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: white;
}

/* Profile Picture Styles */
.profile-pic {
    width: 220px; /* Increase the size */
    height: 220px;
    border-radius: 50%; /* Keep the circular shape */
    margin: 20px auto; /* Center the image */
    display: block;
    border: 5px solid #fff; /* Add a white border for better contrast */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Introduction Section */
.intro {
    max-width: 85%; /* Reduce width for a cleaner look */
    margin: 20px auto; /* Center the text within the sidebar */
}

.intro h2 {
    font-size: 1.8em; /* Increase heading size */
    margin-bottom: 15px;
    color: #ecf0f1; /* Lighter color for better contrast */
}

.intro p {
    font-size: 1em;
    line-height: 1.5;
    text-align: center; /* Justify the text */
    color: #ecf0f1; /* Softer white color */
}

/* Social Links Section */
.social-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px; /* More space between icons */
}

.social-links a {
    color: white;
    font-size: 2em;
    transition: color 0.3s; /* Add transition for smooth hover effect */
}

.social-links a:hover {
    color: #3498db; /* Accent color on hover */
}

/* Main Content Styles */
.main-content {
    width: 75%;
    padding: 40px; /* Increase padding for a spacious look */
}

/* Projects Section */
#projects, #skills {
    margin-bottom: 40px;
}

/* Project Card Container */
.project {
    display: flex; /* Use Flexbox */
    align-items: center; /* Align items vertically center */
    justify-content: space-between; /* Space between content and image */
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Project Title Styling */
.project h3 {
    font-family: 'Poppins', sans-serif; /* Use a modern and professional font */
    font-size: 1.8em; /* Adjust font size */
    font-weight: 600; /* Use a medium-bold weight */
    color: #333; /* Darker color for better contrast */
    margin-bottom: 15px; /* Space below the title */
    padding-bottom: 5px; /* Space inside the title for decoration */
    border-bottom: 2px solid rgba(30, 144, 255, 0.3); /* Subtle underline with a blue tint */
    text-transform: capitalize; /* Capitalize the title */
}

/* Section Titles Styling */
section h2 {
    font-family: 'Poppins', sans-serif; /* Use a modern and professional font */
    font-size: 1.5em; /* Adjust font size to fit in one line */
    font-weight: 700; /* Use a bold weight to make it prominent */
    text-align: center; /* Center the section titles */
    margin-top: 30px; /* Add space above the title */
    margin-bottom: 20px; /* Add space below the title */
    text-transform: uppercase; /* Transform to uppercase for a clean look */
    letter-spacing: 1px; /* Add letter spacing for a more refined look */
    padding-bottom: 10px; /* Space inside the title for decoration */
    max-width: 80%; /* Restrict the width */
    margin-left: auto;
    margin-right: auto;

    /* Fallback Color */
    color: #5a9cf2; /* Light blue fallback color */

    /* Gradient Text */
    background: linear-gradient(135deg, #1e90ff, #5a9cf2); /* Apply gradient */
    -webkit-background-clip: text; /* Clip the gradient to the text */
    -webkit-text-fill-color: transparent; /* Use gradient as text color */
    background-clip: text; /* For non-webkit browsers */
    text-fill-color: transparent; /* For non-webkit browsers */
}


/* Adjust container margins to separate from other sections */
#projects, #skills {
    margin-bottom: 40px; /* Space below each section */
}


/* Project Content (70%) */
.project-content {
    width: 70%;
    padding-right: 20px; /* Space between text and image */
}

/* Project Image Wrapper (30%) */
.project-image-wrapper {
    width: 30%;
    height: 100%; /* Make the wrapper's height equal to the card's height */
    overflow: hidden; /* Hide overflow to crop the image */
    display: flex; /* Use Flexbox */
    align-items: center; /* Center image vertically */
    justify-content: center; /* Center image horizontally */
    /* Add border and shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
    border: 1px solid #ddd; /* Optional border */
    border-radius: 10px; /* Optional: rounded corners */
}

/* Project Image */
.project-image {
    width: 100%; /* Make the image fit the width of the wrapper */
    height: auto;
    object-fit: cover; /* Crop the image while maintaining its center */
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Responsive layout */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar, .main-content {
        width: 100%;
    }
}

/* Button Styles */
.button {
    display: inline-block;
    padding: 4px 10px; /* Smaller padding for compact size */
    margin-right: 10px;
    font-size: 0.9em; /* Keep font size consistent */
    font-weight: bold;
    color: white; /*#1e90ff; /* Text color */
    background-color: rgba(30, 144, 255, 0.1); /* Light blue background with transparency */
    border: none; /* Remove border */
    border-radius: 15px; /* Rounded corners */
    text-decoration: none;
    transition: background-color 0.3s; /* Smooth transition */
}

/* Button Hover Effect */
.button:hover {
    background-color: rgba(30, 144, 255, 0.2); /* Slightly darker blue on hover */
}

.project, .skill-project {
    background-color: white;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    transition: transform 0.3s; /* Add transition for hover effect */
}

.project:hover, .skill-project:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
}

/* Project Image Styles */
/* .project-image {
    width: 100%; /* Make the image responsive */
    /* height: auto; /* Maintain the aspect ratio */
    /* border-radius: 10px; /* Rounded corners */
    /* margin-bottom: 15px; /* Space between the image and the text */
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Add shadow for a frame effect */
    /* border: 5px solid #fff; /* Optional: Add a white border */
/*} */


.project h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #2c3e50; /* Darker color for project titles */
}

.project p, .skill-project p {
    font-size: 1em;
    line-height: 1.5;
    color: #555;
}

.project a, .skill-project a {
    display: inline-block;
    margin-right: 15px;
    text-decoration: none;
    color: #3498db; /* Accent color for links */
    font-weight: bold;
}

.project a:hover, .skill-project a:hover {
    text-decoration: underline;
}

/* Project Icons */
.project-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between icons */
    margin-top: 15px;
}

.project-icons span {
    background-color: #f0f0f0;
    padding: 4px 10px; /* Reduce padding */
    border-radius: 15px; /* Rounded corners */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-size: 0.8em; /* Reduce font size slightly */
}

/* Project Icon Images */
.project-icons i, .project-icons img {
    margin-right: 5px;
    font-size: 1em; /* Adjust icon size */
}

/* Button Hover Effect */
a:hover {
    color: #fff;
    background-color: #3498db;
    transition: background-color 0.3s, color 0.3s;
}

/* Project Card Hover */
.project:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


/* Footer (optional) */
footer {
    background-color: #333; /* Dark footer */
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
    margin-top: 20px;
}