/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Define the animation */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* Apply the animation */
body {
    background: linear-gradient(-30deg, #a8c0ff, #b2f7ef, #d1e8b1, #f7d8b1); /* Softer colors */
    background-size: 300% 300%; /* Keeps the gradient large for animation */
    animation: gradientBG 60s ease infinite; /* Slower animation for less intense flash */
    margin: 0;
    height: 100vh; /* Full viewport height */
}

.container {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0;
}
.centered-text {
    text-align: center; /* Centers inline and inline-block elements like text */
    margin: 0 auto;     /* Ensures the div itself is centered if necessary */
}
/* Blog Button Styling - Fixed at Top Right */
.blog-button {
    position: fixed !important; /* Override any conflicting positions */
    top: 20px !important; /* Lock distance from the top */
    right: 20px !important; /* Lock distance from the right */
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Gradient background */
    color: #fff; /* White text */
    padding: 12px 24px; /* Button padding */
    font-size: 16px; /* Text size */
    font-weight: bold; /* Bold text */
    border-radius: 50px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Shadow effect */
    z-index: 10000 !important; /* Ensure it stays on top of other elements */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
}

/* Hover Effect */
.blog-button:hover {
    transform: scale(1.1); /* Slight enlargement on hover */
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
    cursor: pointer; /* Pointer cursor */
    background: linear-gradient(135deg, #ff9a8b, #ff6a88); /* Brighter gradient on hover */
}
/* Header Section */
header {
    background: linear-gradient(to right, #3b82f6, #2563eb);
    color: #fff;
    padding: 50px 0;
    text-align: center;
}

header .profile img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 20px 0;
    border: 5px solid #fff;
}
.profile img {
  transition: transform 0.3s ease-in-out;
}
.profile img:hover {
  transform: scale(1.1);
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

header p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}
h2 {
    margin-top: 20px; /* Space above the heading */
    margin-bottom: 10px; /* Space below the heading */
}

p, li {
    line-height: 1.6; /* Increase line spacing */
    margin-bottom: 8px; /* Add spacing between lines */
}

.btn {
     display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #28a745, #56d58c);
  color: #fff;
  text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn:hover {
    transform: scale(1.1);
     background: #16a34a;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.back-link {
    display: inline-block;
    margin-top: 20px; /* Space from previous content */
    padding: 10px 20px;
    background: #22c55e; /* Green background */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.back-link:hover {
    background: #16a34a; /* Darker green when hovered */
}
#about-me {
    text-align: Center;
    margin: 0 auto;
    max-width: 800px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h2, h3 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li {
    margin-bottom: 20px;
}

li span {
    display: block;
    margin-bottom: 4px;
}

hr {
    height: 1px;
    border: none;
    background-color: #ccc;
    margin: 20px 0;
}

/* Skills Section */
#skills {
    background-color: #fff;
    padding: 50px 0;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.skill-item {
    background: #3b82f6;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.skill-item i {
    font-size: 2rem;
    margin-bottom: 10px;
}

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

/* Style for the container of all the cards */
.project-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1200px; /* Adjust the max width as needed */
}

/* Style for each individual card */
.project-card {
    background-color: #f9f9f9; /* Light background color */
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
    text-align: center; /* Center-align content */
    width: 30%; /* Adjust width depending on the screen size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.project-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
}

/* Style for the images inside the cards */
.project-image {
    width: 50%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px; /* Space between image and button */
}

/* Style for the project title */
.project-card h3 {
    font-size: 1.5rem;
    color: #333; /* Dark text color */
    margin-bottom: 10px; /* Space between title and image */
    font-weight: bold;
}

/* Style for the View Details button */
button {
    background-color: #4CAF50; /* Green background */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

button:hover {
    background-color: #45a049; /* Darker green when hovered */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .project-card {
        width: 100%; /* Stack cards in a single column for small screens */
        margin-bottom: 20px;
    }

    .project-cards {
        justify-content: center; /* Center the cards in smaller screens */
    }
}

/* Contact Section */
#contact {
    background: linear-gradient(to right, #22c55e, #16a34a);
    color: #fff;
    padding: 50px 0;
}

#contact p {
    margin-bottom: 20px;
}

/* Footer */
footer {
    background-color: #111827;
    color: #fff;
    padding: 20px 0;
}