body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5; /* Light Silver Background */
    color: #2a2a2a; /* Dark Text for contrast */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}





img {
    max-width: 100%;
    height: auto;
}

/*.container {
    width: 100%;
    padding: 10px;
}
*/


.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.item {
    flex: 1 1 100%;
}

/*.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
} */

/* Header Styles */
header {
    text-align: center;
    padding: 20px;
}

header h1 {
    font-size: 2.5em;
    margin: 0;
    background-color: #6a4c9c; /* Purple shade */
    color: white; /* White text */
    text-align: center;
    padding: 20px;
}


header p{
    font-size: 1em;
    margin: 0;
    background-color: #6a4c9c; /* Purple shade */
    color: white; /* White text */
    text-align: center;
    padding: 20px;
}

/* Navigation Bar */
nav {
    background-color: #c0c0c0; /* Light Silver */
    display: flex;
    justify-content: center;
    padding: 10px;
}

nav a {
    text-decoration: none;
    color: #6a4c9c; /* Purple color for links */
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 1.2em;
}

nav a:hover {
    background-color: #6a4c9c; /* Purple on hover */
    color: white;
    border-radius: 5px;
}
    section {
    padding: 3em 5%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: justify;
}
h2 {
    text-align: justify;
    color: #6a4c9c;
    font-size: 2.5em; /* Increased font size */
    font-family: 'Playfair Display', serif;
    margin-bottom: 2em;
    font-weight: 600; /* Bold subtitle */
}
.projects {
    display: grid;
    grid-template-columns:  repeat(2, 1fr);
    gap: 2.5em;
}

@media screen and (max-width: 412px) {
    .projects {
        grid-template-columns: 1fr;  /* 1 column for mobile devices */
    }
    .project-card {
        padding: 1em;  /* Adjust padding for smaller screens */
    }
}

.project-card {
    background-color: white;
    padding: 2em;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: justify;
    transition: transform 0.3s ease;
    overflow: hidden;

}
.project-card:hover {
    transform: translateY(-15px);
}
.project-card h3 {
    color: #6a4c9c;
    font-size: 1.5em; /* Increased font size for project titles */
    font-family: 'Playfair Display', serif;
    margin: 1em 0;
    font-weight: 600;
    text-align: justify;
}

.project-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.project-card img {
    width: 525px;    /* Adjust the width */
    height: 525px;   /* Adjust the height */
}


.authored-highlight {
    font-size: 1.0em; /* Slightly larger font for prominence */
    font-weight: 600; /* Semi-bold for readability */
    font-family: 'Roboto', sans-serif; /* Clean and modern typography */
    text-align: justify; /* Center-aligned text */
    color:black ; /* Purple text for contrast with !important to ensure it is applied */
    background: linear-gradient(135deg, #fdfbfb, #ebedee); /* Soft light gradient */
    padding: 1em 2em; /* Balanced padding for elegance */
    border-radius: 20px; /* Smoothly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    letter-spacing: 1px; /* Spaced-out letters for modern feel */
    text-transform: capitalize; /* Capitalizes only the first letter */
    display: inline-block; /* Ensures the element is neatly wrapped */
    border: 2px solid #d3d3d3; /* Adds a soft border */
    transition: all 0.3s ease-in-out;
    cursor: pointer; /* Indicates interactivity */
}


.authored-highlight:hover {
    background: linear-gradient(135deg, #e0f7fa, #ffffff); /* Light blue accent on hover */
    color: #00796b;
     /* Complementary deep teal text */
    transform: translateY(-3px); /* Slight hover effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhance depth on hover */
    border-color: #00796b; /* Matches the hover text color */
}



.about-image {
width: 514px; /* Increased size for a larger image */
height: 358px; /* Matches width for a perfect square */
border-radius: 0; /* Removes rounding for square shape */
margin-right: 2.5em; /* Balanced spacing */
border: 6px solid #f8f9fa; /* Subtle border with a light color */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adds hover effect */
}

/* Add hover effect for interactivity */
.about-image:hover {
transform: scale(1.05); /* Slight zoom on hover */
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); /* More pronounced shadow */
}

/* Certifications Section */
/* Certifications Section */
.certifications {
padding: 4em 6%;
background: linear-gradient(135deg, #f8f8f8 30%, #ececec 100%); /* Soft gradient background */
margin-top: 4em;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Soft shadow */
text-align: center;
}

/* Section Heading */
.certifications h2 {
font-size: 2.4em;
color: #5c4d99;
margin-bottom: 2em;
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 1px;
}

/* List of Certifications */
.certifications-list {
display: flex;
flex-direction: column; /* One certificate per line */
gap: 2em; /* Increased gap for more spacing */
margin-top: 2em;
}
.certification-card {
background-color: #f5f5f5; /* Soft light gray */
padding: 0.5em;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
width: 100%;
text-align: justify;
border: 1px solid #e0e0e0; /* Light gray border for subtle definition */
}

.certification-card:hover {
transform: translateY(-8px); /* Slight lift effect on hover */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.certification-card h3 {
color: #6a4c9c;
font-size: 1.75em;
margin-bottom: 1em;
font-family: 'Helvetica Neue', sans-serif;
font-weight: 700;
}

.certification-card p {
color: #555;
font-size: 1.15em;
line-height: 1.6;
font-family: 'Arial', sans-serif;
margin-bottom: 1.5em;
}

.certification-card strong {
font-weight: bold;
color: #333;
}
.certification-card h3 i, .certification-card h3 .material-icons {
color: #6a4c9c; /* Icon color */
margin-right: 10px; /* Space between icon and title */
vertical-align: middle; /* Align the icon with the text */
font-size: 1.5em; /* Adjust the size of the icon */
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
.certifications-list {
margin: 0 5%; /* Adjust margin for smaller screens */
}
.certification-card {
padding: 2em; /* Adjust padding for smaller screens */
}
}
.btn-resume {
background-color: #6a4c9c;
color: white;
padding: 10px 20px;
font-size: 1.2em;
text-decoration: none;
border-radius: 5px;
}

.btn-resume:hover {
background-color: #5b3d7a; /* Darker shade of purple */
}


/* Contact Me Section */
.contact-container {
text-align: justify;
font-size: 1.2em;
color: #333;
margin-top: 4em;  /* Add more space from previous sections */
font-family: 'Playfair Display', serif;
padding: 1em 2%; /* Ensure padding for spacing */
background-color: #f9f9f9; /* Light background color */
border-radius: 12px; /* Soft border rounding */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

/* Enhanced Intro Text */
.intro-text {
font-size: 1.2em; /* Slightly larger font for better readability */
color: #444; /* Darker shade for better contrast */
margin-bottom: 40px; /* Increased space below for better flow */
font-style: italic;
line-height: 1.6; /* Improved line spacing for easier reading */
font-family: 'Roboto', sans-serif; /* Clean, modern font */
text-align: justify; /* Center the text for a more balanced look */
max-width: 80%; /* Limit the width to ensure the text doesn't stretch too much */
margin-left: auto; /* Center alignment */
margin-right: auto; /* Center alignment */
padding: 0 10px; /* Add some padding for better spacing */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow to make the text pop */
}

/* Optional: Make the text more prominent on hover */
.intro-text:hover {
color: #6a4c9c; /* Match the theme color on hover */
font-weight: 500; /* Add subtle boldness on hover */
transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition */
}


.contact-container h2 {
font-size: 2.5em; /* Increase font size for heading */
color: #6a4c9c; /* Match the theme color */
font-family: 'Playfair Display', serif;
margin-bottom: 2em; /* Add space below the heading */
font-weight: 700;
}

.contact-info {
list-style-type: none;
padding: 0;
text-align: justify;
font-size: 1.2em;
}

.contact-info li {
margin-bottom: 1.5em; /* Space out each contact detail */
color: #555; /* Slightly darker color for the text */
}

.contact-info a {
color: #6a4c9c; /* Matching purple for links */
text-decoration: none; /* Remove underline */
font-weight: 500; /* Slightly bold for emphasis */
transition: color 0.3s ease; /* Smooth color transition on hover */
}

.contact-info a:hover {
color: #5b3d7a; /* Darker shade on hover for interactivity */
text-decoration: underline; /* Underline on hover */
}

/* Responsive for smaller screens */
@media (max-width: 400px) {
.contact-container {
padding: 2em 4%; /* Adjust padding for smaller screens */
}
.contact-info {
font-size: 1.1em; /* Slightly smaller font for smaller screens */
}
.contact-info li {
margin-bottom: 1em; /* Adjust spacing */
}
}

footer {
    background-color: #6a4c9c;
    color: white;
    text-align: center;
    padding: 2em 0;
    font-size: 1.2em;
}
footer a {
    color: white;
    text-decoration: none;
}


/* For screens with a max-width of 412px (like iPhone screens) */
@media screen and (max-width: 412px) {
    /* Reset body margin and padding */
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: Arial, sans-serif; /* Use a more mobile-friendly font */
        overflow-x: hidden; /* Hide horizontal overflow */
    }

    /* Make container width 100% with some padding */
    .container {
        width: 100%;
        padding: 15px;  /* Reduced padding for better screen fitting */
        box-sizing: border-box; /* Make sure padding doesn't affect width */
    }

    /* Ensure images are responsive */
    img {
        width: 100%;
        height: auto;
        max-width: 100%; /* Prevent images from overflowing */
        display: block;
    }

    /* Adjust text size for mobile readability */
    body {
        font-size: 14px; /* Smaller font size for better mobile readability */
    }

    /* Ensure headings are properly scaled for mobile */
    h1, h2, h3, h4 {
        font-size: 1.4rem;  /* Make headings smaller to fit better */
        margin-top: 10px;
    }

    /* Adjust paragraph font size for readability */
    p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    /* Stack items vertically */
    .flex-container {
        display: block; /* Switch to block for better vertical stacking */
    }

    .flex-item {
        width: 100%; /* Full width for each item in the flexbox */
        margin-bottom: 15px; /* Spacing between stacked items */
    }

    /* Make sure buttons are touch-friendly */
    button {
        width: 100%; /* Full width buttons */
        padding: 15px;
        font-size: 16px; /* Larger text for easier interaction */
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px; /* Rounded corners */
        cursor: pointer;
        margin-bottom: 10px;
        text-align: center;
    }

    /* Adjust link styles for mobile */
    a {
        color: #007bff;
        text-decoration: none;
        font-size: 16px;
    }

    /* Adjust form fields for mobile-friendly input */
    input[type="text"], input[type="password"], textarea {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box; /* Ensure padding doesn't affect width */
        margin-bottom: 10px;
    }

    /* Responsive navigation menu */
    .nav {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .nav-item {
        width: 100%;
        padding: 15px;
        text-align: center;
        background-color: #f8f9fa;
        margin-bottom: 5px;
        border-radius: 5px;
        cursor: pointer;
    }

    .nav-item:hover {
        background-color: #e9ecef;
    }

    /* Ensure no content overflows or breaks the screen */
    .some-element {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    /* Prevent text overflow */
    .text-container {
        word-wrap: break-word; /* Break long words */
        overflow-wrap: break-word;
    }

    /* Set the maximum width for containers */
    .content-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Adjust margin for mobile */
    .content-wrapper {
        margin: 0;
        padding: 0;
    }
}


@media screen and (max-width: 400px) {
    .projects {
        grid-template-columns: 1fr;  /* 1 column for mobile devices */
    }
    .project-card {
        padding: 1em;  /* Adjust padding for smaller screens */
    }
}
/* Mobile-friendly styling for screens with max-width of 412px */

/* Default styles for larger screens */
.about h1 {
    font-size: 2.5em;
    line-height: 1.2;
    text-align: justify;
}

.about p {
    font-size: 1.2em;
    line-height: 1.6;
    text-align: justify;
    padding: 0 20px;
}

/* Styles for screens 768px and below */
@media screen and (max-width: 768px) {
    .about h1 {
        font-size: 2.2em;
        line-height: 1.3;
    }

    .about p {
        font-size: 1.1em;
        line-height: 1.5;
        padding: 0 15px;
    }

    .about .about-content {
        display: block; /* Stacking vertically */
        padding: 0 10px;
    }

    .about .about-card {
        width: 100%; /* Full width for the card */
        margin-bottom: 15px;
        text-align: justify;
    }

    .about .about-card img {
        width: 100%; /* Image takes full width */
        height: 180px;
        object-fit: cover;
    }

    .about .about-card h3,
    .about .about-card p {
        font-size: 1.05em;
        margin-top: 10px;
    }
}

/* Styles for screens 412px and below */


@media (max-width: 768px) {
    /* Stack the about section vertically on smaller screens */
    .about {
        flex-direction: column;
        align-items: justify;
    }

    /* Adjust the text container to have some padding for smaller screens */
    .about-text {
        max-width: 100%;
        padding: 10px;
    }

    /* Make the text font size a bit smaller on small screens */
    .about-text p {
        font-size: 1em;
    }

    /* Adjust the header text size for mobile */
    header h1 {
        font-size: 1.8em;
    }

    /* Adjust the nav links layout */
    nav {
        display: flex;
        flex-direction: column;
        align-items: justify;
    }

    nav a {
        margin: 10px 0; /* Space out links vertically */
    }

    /* Make the footer button take up more space on smaller screens */
    footer button {
        width: 100%;
        font-size: 1.2em;
    }
}