body { 
  font-family: Arial, sans-serif; 
  margin: 0; 
  padding: 0; 
background: #F8F8F8; 
color: #4A4A4A; 
} 
header { 
background: #023557; 
color: white; 
padding: 2rem; 
text-align: center; 
border-bottom-left-radius: 50px; /* Soft, modern curve */
border-bottom-right-radius: 50px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */

} 
header { 
  h1{
    background: #023557; 
    color: white; 
    padding: 2rem; 
    text-align: center;
    background-color: var(--primary-blue); /* Navy Blue background */
    color: var(--text-light); /* Light text on dark background */
    padding: 60px 20px;
    text-align: center;
    
        
  }
} 
.profile-pic { 
width: 120px; 
height: 120px; 
border-radius: 50%; 
object-fit: cover; 
} 
section { 
padding: 20px; 
max-width: 800px; 
margin: 40px auto; 
background-color: #FFFFFF; /* White background for content sections */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
} 
.skills ul { 
list-style: none; 
padding: 0; 
} 
.skills li { 
background: #ddd; 
padding: 8px; 
margin: 5px 0; 
border-radius: 5px; 
} 
.project { 
background: white; 
margin: 1rem 0; 
padding: 1rem; 
border-radius: 8px; 
box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
} 
.project a { 
color: #007acc; 
text-decoration: none; 
} 
footer { 
background: #333; 
color: white; 
text-align: center; 
padding: 1rem; 
}




/* In your style.css file */
.instagram-link {
    font-size: 1.2em; /* Make text bigger */
    font-weight: bold;
    color: #E1306C; /* Instagram's brand pink/red */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.instagram-link:hover {
    color: #C13584; /* Slightly darker on hover */
    text-decoration: underline; /* Add underline back on hover */
}

/* --- Contact Us Section Specific Styles --- */

/* Styles for the main "Contact Us" section container */
.contact-section {
    /* These properties assume this section might be a distinct block on a page,
       potentially inside a .container class for overall page layout. */
    padding-top: 30px;
    padding-bottom: 20px;
    /* If this section itself acts as the main content block,
       you might also add:
       background-color: #ffffff;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
       border-radius: 10px;
       max-width: 960px;
       margin: 30px auto;
       padding: 25px 30px;
    */
}




/* Style for the "Contact Us" main heading */
.contact-section h1 {
    color: #2c3e50; /* Dark blue-grey for main titles */
    font-family: 'Segoe UI', Arial, sans-serif; /* Consistent font */
    font-size: 2.8em; /* Large and prominent */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid #007bff; /* Primary blue accent underline */
    text-align: left;
}

/* Style for the descriptive paragraph below the heading */
.contact-section .page-description {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
}

/* Styles for each individual contact row (Email, Instagram, GitHub) */
.contact-item {
    display: flex; /* Use flexbox for perfect vertical alignment of icon and text */
    align-items: center; /* Vertically center items in the row */
    margin-bottom: 20px; /* Space between each contact item */
}

/* Styles for the social media icons (Gmail, Instagram, GitHub) */
.contact-item .icon {
    width: 45px; /* Fixed width for icons */
    height: 45px; /* Fixed height for icons */
    margin-right: 15px; /* Space between the icon and the text label */
    vertical-align: middle; /* Ensures icon aligns well with text, though flexbox helps more */
    border-radius: 50%; /* Makes square images appear as circles */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.2s ease-in-out; /* Smooth animation for hover effect */
}

/* Hover effect for the icons */
.contact-item .icon:hover {
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

/* Styles for the text labels (e.g., "Email:", "Instagram:", "GitHub:") */
.contact-item span {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.1em;
    font-weight: 500; /* Medium bold for labels */
    color: #495057; /* Darker grey for clear labels */
    margin-right: 10px; /* Space between the label and the actual link/email */
}

/* Styles for the clickable links (email address, Instagram handle, GitHub username) */
.contact-item a {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.1em;
    color: #007bff; /* Primary blue for links */
    text-decoration: none; /* Remove default underline */
    transition: color 0.2s ease; /* Smooth color change on hover */
}

/* Hover effect for the links */
.contact-item a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: underline; /* Add underline on hover for clear indication */
}

/* --- Basic Responsive Adjustments for Contact Us --- */
@media (max-width: 768px) {
    .contact-section h1 {
        font-size: 2.2em;
        margin-bottom: 20px;
    }

    .contact-item .icon {
        width: 35px; /* Smaller icons on small screens */
        height: 35px;
        margin-right: 10px;
    }

    .contact-item span,
    .contact-item a {
        font-size: 1em; /* Slightly smaller text on small screens */
    }
}




/* --- Base Styles for Contact Us Page --- */

body {
    font-family: 'Segoe UI', Arial, sans-serif; /* Modern, clean font */
    line-height: 2;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Very light grey background for the page */
    color: #343a40; /* Dark grey for primary text, ensuring readability */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

/* Main container for the Contact Us content */
.container {
    max-width: 960px; /* Limits the content width for better readability on large screens */
    margin: 30px auto; /* Centers the container horizontally and adds vertical spacing */
    padding: 25px 30px; /* Internal padding around the contact content */
    background-color: #ffffff; /* White background for the contact form/details area */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for a clean, elevated look */
    border-radius: 10px; /* Softly rounded corners for the container */
}

/* Style for the "Contact Us" main heading */
h1 {
    color: #2c3e50; /* Dark blue-grey for main titles */
    font-size: 2.8em; /* Large and prominent main title */
    margin-bottom: 25px; /* Space below the main title */
    padding-bottom: 10px; /* Padding for the underline effect */
    border-bottom: 3px solid #007bff; /* A vibrant blue underline for emphasis */
    text-align: left; /* Aligns title to the left */
}

/* Style for the descriptive paragraph below the heading (e.g., "Feel free to reach out...") */
.page-description {
    font-size: 1.1em; /* Slightly larger font for the introductory text */
    color: #555; /* Muted grey for a softer look than primary text */
    margin-bottom: 30px; /* More space below the description */
}

/* --- Styles for Each Contact Item (Email, Instagram, GitHub) --- */

/* Parent container for each icon, label, and link row */
.contact-item {
    display: flex; /* Use Flexbox to align items horizontally */
    align-items: center; /* Vertically centers items within the row */
    margin-bottom: 20px; /* Space between each contact detail row */
}

/* Styles for the social media/email icons */
.contact-item .icon {
    width: 45px; /* Fixed width for consistent icon size */
    height: 45px; /* Fixed height for consistent icon size */
    margin-right: 15px; /* Space between the icon and the text label */
    border-radius: 50%; /* Makes square icon images appear as perfect circles */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for the icons themselves */
    transition: transform 0.2s ease-in-out; /* Smooth animation for hover effect */
}

/* Hover effect for the icons */
.contact-item .icon:hover {
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

/* Styles for the text labels (e.g., "Email:", "Instagram:", "GitHub:") */
.contact-item span {
    font-size: 1.1em; /* Readable font size for labels */
    font-weight: 500; /* Medium bold to make labels stand out */
    color: #495057; /* Darker grey for clear labels */
    margin-right: 10px; /* Space between the label and the actual link/email address */
}

/* Styles for the clickable links (email address, Instagram handle, GitHub username) */
.contact-item a {
    font-size: 1.1em; /* Readable font size for the links */
    color: #007bff; /* Vibrant blue for links, making them easily identifiable */
    text-decoration: none; /* Removes the default underline from links */
    transition: color 0.2s ease; /* Smooth color change on hover */
}

/* Hover effect for the links */
.contact-item a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: underline; /* Adds an underline on hover for clear interaction feedback */
}

/* --- Footer Styles (if present on Contact Us page) --- */
.footer {
    text-align: center;
    margin-top: 50px; /* Space above the footer */
    padding: 25px; /* Internal padding within the footer */
    border-top: 1px solid #e9ecef; /* Light separator line above the footer */
    font-size: 0.9em; /* Smaller font size for footer text */
    color: #6c757d; /* Muted grey for footer text */
    background-color: #e9ecef; /* Slightly darker background for the footer */
}

/* --- Responsive Adjustments for Contact Us Page (Basic) --- */
@media (max-width: 768px) {
    .container {
        margin: 20px; /* Slightly smaller margins on smaller screens */
        padding: 15px; /* Reduced internal padding */
    }

    h1 {
        font-size: 2.2em; /* Smaller H1 on mobile */
        margin-bottom: 20px;
    }

    .contact-item .icon {
        width: 35px; /* Smaller icons on mobile */
        height: 35px;
        margin-right: 10px;
    }

    .contact-item span,
    .contact-item a {
        font-size: 1em; /* Slightly smaller text for contact items on mobile */
    }
}

.section {
    .about me {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #FFFFFF; /* White background for content sections */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
    }
}