/* Custom font for a clean look */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(to bottom right, #E0E7FF, #C7D2FE); /* bg-gradient-to-br from-blue-50 to-indigo-100 */
    min-height: 100vh; /* min-h-screen */
    color: #1F2937; /* text-gray-800 */
    margin: 0; /* Ensures no default body margin */
    padding: 0; /* Ensures no default body padding */
}

/* Base styles for common elements */
h1, h2, h3 {
    font-weight: 700; /* font-bold */
    color: #1D4ED8; /* text-blue-700 */
}

p {
    line-height: 1.625; /* leading-relaxed */
    color: #374151; /* text-gray-700 */
}

a {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits color from parent by default */
}

/* Utility classes equivalents for general layout */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    box-sizing: border-box; /* Ensures padding is included in width calculation */
}

/* Header Section */
header {
    background: linear-gradient(to right, #2563EB, #4F46E5); /* bg-gradient-to-r from-blue-600 to-indigo-700 */
    color: white; /* text-white */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding-top: 1.5rem; /* py-6 */
    padding-bottom: 1.5rem; /* py-6 */
    border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
    border-bottom-right-radius: 0.5rem; /* rounded-b-lg */
}

header > div { /* Targets the direct div child of header (the .container equivalent) */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    justify-content: space-between; /* justify-between */
    align-items: center; /* items-center */
}

header h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    margin-bottom: 1rem; /* mb-4 */
    color: inherit; /* Inherits white color from header */
}

header nav ul {
    display: flex; /* flex */
    flex-wrap: wrap; /* flex-wrap */
    justify-content: center; /* justify-center */
    list-style: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    font-size: 1.125rem; /* text-lg */
}

header nav ul li + li { /* Applies margin between list items */
    margin-left: 1rem; /* space-x-4 */
}

header nav ul li a {
    transition: all 0.3s ease-in-out; /* transition duration-300 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    display: block; /* Makes the link fill the padding area for easier clicking */
}

header nav ul li a:hover {
    color: #BFEEF6; /* hover:text-blue-200 */
}

/* Main Content Area */
main {
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* py-8 */
}

/* Section Styles */
section {
    background-color: white; /* bg-white */
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    margin-bottom: 2.5rem; /* mb-10 */
}

section:last-of-type {
    margin-bottom: 0; /* Removes margin from the last section to avoid extra space at the bottom */
}

/* About Section Specifics */
#about > div { /* Flex container for image and text */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
    gap: 1.5rem; /* space-y-6 (for vertical spacing) */
    background:linear-gradient(to right,rgb(167, 223, 36),rgb(172, 172, 9));
}

#about > div > div:first-child { /* Image container (profile picture) */
    width: 9rem; /* w-36 */
    height: 9rem; /* h-36 */
    border-radius: 9999px; /* rounded-full */
    overflow: hidden; /* overflow-hidden */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    flex-shrink: 0; /* flex-shrink-0 */
}

#about > div > div:first-child img {
    width: 100%; /* w-full */
    height: 100%; /* h-full */
    object-fit: cover; /* object-cover */
}

#about > div > div:last-child { /* Text container */
    text-align: center; /* text-center */
}

#about h2 {
    font-size: 1.875rem; /* text-3xl */
    margin-bottom: 1rem; /* mb-4 */
}

#about p {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1rem; /* mb-4 */
}

#about p:last-child {
    margin-bottom: 0; /* Removes margin from the last paragraph in this section */
}

#about span {
    font-weight: 600; /* font-semibold */
}

/* Skills Section Specifics */
#skills h2 {
    font-size: 1.875rem; /* text-3xl */
    text-align: center; /* text-center */
    margin-bottom: 1.5rem; /* mb-6 */
    background:linear-gradient(to right,red,yellow);
}

#skills > div { /* Grid container for skill cards */
    display: grid; /* grid */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
    gap: 1.5rem; /* gap-6 */
    
    
}

#skills > div > div { /* Individual skill card */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
    padding: 1rem; /* p-4 */
    background-color: #EFF6FF; /* bg-blue-50 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.3s ease-in-out; /* transition duration-300 */
      background:linear-gradient(to right,rgb(21, 155, 218),rgb(235, 239, 241));
    
    }

#skills > div > div:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-0.25rem); /* transform hover:-translate-y-1 */
 background:linear-gradient(to right,red,yellow);
}

#skills > div > div img {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    margin-bottom: 0.75rem; /* mb-3 */
    
}

#skills > div > div p {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1E40AF; /* text-blue-800 */
    margin: 0; /* Removes default paragraph margin */
    
}

/* Projects Section Specifics */
#projects h2 {
    font-size: 1.875rem; /* text-3xl */
    text-align: center; /* text-center */
    margin-bottom: 1.5rem; /* mb-6 */
    background:linear-gradient(to right,red,yellow);
}

#projects > div { /* Grid container for project cards */
    display: grid; /* grid */
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
    
    
}

#projects article { /* Individual project card */
    background-color: #EFF6FF; /* bg-blue-50 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    overflow: hidden; /* overflow-hidden */
    transition: all 0.3s ease-in-out; /* transition duration-300 */
       background:linear-gradient(to right,rgb(60, 226, 143),rgb(158, 198, 211));
}

#projects article:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-0.25rem); /* transform hover:-translate-y-1 */
    background:linear-gradient(to right,red,yellow);
}

#projects article img {
    width: 100%; /* w-full */
    height: 12rem; /* h-48 */
    object-fit: cover; /* object-cover */
}

#projects article > div { /* Text content area of project card */
    padding: 1.25rem; /* p-5 */
}

#projects article h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1E40AF; /* text-blue-800 */
    margin-bottom: 0.5rem; /* mb-2 */
}

#projects article p {
    font-size: 1rem; /* text-base */
    margin-bottom: 1rem; /* mb-4 */
}

#projects article a {
    display: inline-block; /* inline-block */
    background-color: #2563EB; /* bg-blue-600 */
    color: white; /* text-white */
    padding: 0.5rem 1.25rem; /* px-5 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.3s ease-in-out; /* transition duration-300 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
}

#projects article a:hover {
    background-color: #1D4ED8; /* hover:bg-blue-700 */
}

/* Contact Section Specifics */
#contact h2 {
    font-size: 1.875rem; /* text-3xl */
    text-align: center; /* text-center */
    margin-bottom: 1.5rem; /* mb-6 */
    background:linear-gradient(to right,red,yellow);
}

#contact > div:first-of-type { /* Container for contact text and links */
    max-width: 36rem; /* max-w-xl */
    margin-left: auto;
    margin-right: auto; /* mx-auto */
    background:linear-gradient(to right,rgba(31, 197, 81, 0.014),rgb(16, 122, 69));
}

#contact > div:first-of-type > p {
    text-align: center; /* text-center */
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1.5rem; /* mb-6 */
}

#contact > div:last-of-type { /* Social links container */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    justify-content: center; /* justify-center */
    align-items: center; /* items-center */
    gap: 1rem; /* space-y-4 */
}

#contact a {
    display: flex; /* flex */
    align-items: center; /* items-center */
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.3s ease-in-out; /* transition duration-300 */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: white; /* text-white */
}

#contact a:nth-of-type(1) { /* Email button */
    background-color: #22C55E; /* bg-green-500 */
}
#contact a:nth-of-type(1):hover {
    background-color: #16A34A; /* hover:bg-green-600 */
}

#contact a:nth-of-type(2) { /* LinkedIn button */
    background-color: #1D4ED8; /* bg-blue-700 */
}
#contact a:nth-of-type(2):hover {
    background-color: #1C3FAA; /* hover:bg-blue-800 */
}

#contact a:nth-of-type(3) { /* GitHub button */
    background-color: #1F2937; /* bg-gray-800 */
}
#contact a:nth-of-type(3):hover {
    background-color: #111827; /* hover:bg-gray-900 */
}

#contact a svg {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    margin-right: 0.5rem; /* mr-2 */
    stroke: currentColor; /* stroke (for path elements) */
    fill: currentColor; /* fill (for shape elements) */
}

/* Footer Section */
footer {
    background-color: #1F2937; /* bg-gray-800 */
    color: white; /* text-white */
    text-align: center; /* text-center */
    padding-top: 1.5rem; /* py-6 */
    padding-bottom: 1.5rem; /* py-6 */
    margin-top: 2.5rem; /* mt-10 */
    border-top-left-radius: 0.5rem; /* rounded-t-lg */
    border-top-right-radius: 0.5rem; /* rounded-t-lg */
}

footer > div { /* Container inside footer */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    background-color: #BFEEF6;
}

/* --- Media Queries for Responsiveness --- */

/* Small screens (sm: >= 640px) */
@media (min-width: 640px) {
    #skills > div { /* Skill grid: sm:grid-cols-3 */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #contact > div:last-of-type { /* Social links: sm:flex-row space-x-6 */
        flex-direction: row;
        gap: 0; /* Remove default gap from flex-col */
    }
    #contact > div:last-of-type > a + a {
        margin-left: 1.5rem; /* sm:space-x-6 */
    }
}

/* Medium screens (md: >= 768px) */
@media (min-width: 768px) {
    header {
        padding-top: 2rem; /* md:py-8 */
        padding-bottom: 2rem; /* md:py-8 */
    }

    header > div {
        flex-direction: row; /* md:flex-row */
    }

    header h1 {
        font-size: 3rem; /* md:text-5xl */
        margin-bottom: 0; /* md:mb-0 */
    }

    header nav ul li + li { /* md:space-x-8 */
        margin-left: 2rem;
    }

    main {
        padding-top: 3rem; /* md:py-12 */
        padding-bottom: 3rem; /* md:py-12 */
    }

    section {
        padding: 2.5rem; /* md:p-10 */
        margin-bottom: 3rem; /* md:mb-12 */
    }

    #about > div {
        flex-direction: row; /* md:flex-row */
        align-items: flex-start; /* md:items-start */
        gap: 0; /* Remove default gap */
    }
    #about > div > div:first-child { /* Image container */
        width: 12rem; /* md:w-48 */
        height: 12rem; /* md:h-48 */
        margin-right: 2.5rem; /* md:space-x-10 (applied as right margin on first item) */
    }

    #about h2,
    #skills h2,
    #projects h2,
    #contact h2 {
        font-size: 2.25rem; /* md:text-4xl */
        margin-bottom: 2rem; /* md:mb-8 */
    }

    #skills > div { /* Skill grid: md:gap-8 */
        gap: 2rem;
    }

    #projects > div { /* Project grid: md:grid-cols-2 md:gap-10 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
    }
}

/* Large screens (lg: >= 1024px) */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px; /* Sets max-width for large screens */
    }

    #skills > div { /* Skill grid: lg:grid-cols-4 */
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #projects > div { /* Project grid: lg:grid-cols-3 */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
#footer-1{
    background:linear-gradient(to right,red,yellow);
}




#projects article {
    display: inline-block; /* inline-block */
    background-color: #2563EB; /* bg-blue-600 */
    color: white; /* text-white */
    padding: 0.5rem 1.25rem; /* px-5 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.3s ease-in-out; /* transition duration-300 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
}

#projects article a:hover {
    background-color: #1D4ED8; /* hover:bg-blue-700 */
}
