/* Main Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;  /* Two columns: one smaller, one larger */
    grid-template-rows: auto auto;  /* Adjust row heights automatically */
    gap: 20px;                      /* Space between rows and columns */
    padding: 20px;
}

/* Intro Section */
.intro {
    grid-column: 1 / -1;            /* Spans across both columns */
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    border-radius: 8px;  /* Rounded corners for a soft look */
}

/* Profile Section */
.profile {
    background-color: #e6e6e6;
    padding: 20px;
    border-radius: 8px;  /* Rounded corners for a soft look */
}

/* Profile Card */
#profile .profile-card {
    max-width: 900px;  /* Limit the width of the profile card */
    margin: 20px auto;  /* Center it horizontally */
    background-color: #f9f9f9;  /* Light background for the profile card */
    padding: 20px;
    border-radius: 8px;  /* Rounded corners for a soft look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Add some subtle shadow */
    display: grid;
    grid-template-columns: auto 1fr;  /* Profile picture (auto size) and details (1fr) */
    gap: 20px;
    align-items: start;  /* Align items to start */
}

/* Profile Info Layout */
.profile-info {
    display: grid;
    grid-template-columns: auto 1fr;  /* Title column (auto for title width) and description column (remaining space) */
    gap: 10px;  /* Space between title and description */
    align-items: start;  /* Align items to the start */
    margin-bottom: 10px; /* Space at the bottom of the profile info */
}

/* Profile Picture */
.profile-photo img {
    width: 100px;  /* Fixed size for the profile picture */
    height: 100px;
    border-radius: 50%;  /* Make the image circular */
    object-fit: cover;
}

/* Profile Details */
.profile-details {
    display: flex;
    flex-direction: column;
    gap: 10px;  /* Space between each profile item */
}

/* Profile Item */
.profile-item {
    display: flex; /* grid for consistence description start
    align-items: start;  /* Align both items to the top for consistency */
    gap: 10px;  /* Space between title and description */
    flex-wrap: wrap /* Allow wrapping if needed */
}

/* Title Style */
.profile-title {
    font-weight: bold;
    color: #333;  /* Dark color for titles */
    width: auto;  /* Automatically adjust width based on content */
    min-width: 150px;  /* Fixed width for titles to prevent wrapping inconsistencies */
    word-wrap: break-word;  /* Allow long titles to wrap */
}

/* Description Style */
.profile-description {
    color: #555;  /* Lighter color for descriptions */
    margin-top: 0;  /* Ensure no extra margin on top */
    word-wrap: break-word;  /* Handle long text without breaking the layout */
    flex: 1;  /* Let the description take up the remaining space */
    text-align: justify;  /* Justify the text for clean alignment */
}


/* Contact Section */
.contact {
    background-color: #d9d9d9;
    padding: 20px;
    border-radius: 8px;  /* Rounded corners for a soft look */
}

/* Contact Form */
.contact form {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 15px; /* Space between fields */
    max-width: 600px; /* Limit the form width */
    margin: 0 auto; /* Center the form */
}

.contact label {
    font-weight: bold;
    margin-bottom: 5px;  /* Space between label and input */
    display: block;  /* Make labels take full width */
}

.contact input,
.contact textarea {
    width: 100%; /* Make inputs take full width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.contact textarea {
    resize: vertical;        /* Allow resizing of textareas vertically */
}

.contact input:focus,
.contact textarea:focus {
    border-color: #007BFF;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.contact button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact button:hover {
    background-color: #0056b3;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Reset default list styles */
ul, li {
    list-style: none;  /* Remove bullets */
    margin: 0;
    padding: 0;
}

/* Sticky Header */
.sticky-header {
    position: sticky;
    top: 0;
    background-color: #333; /* Dark grey background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensures it stays above other elements */
}

/* Navbar Styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

/* Logo Styling */
.navbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar .logo img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

/* Main Menu Styling */
.navbar .menu {
    display: flex; /* Align menu items horizontally */
    gap: 20px;    /* Space between menu items */
    margin: 0;
    padding: 0;
}

/* Navbar Menu List Item */
.navbar .menu li {
    position: relative; /* Needed for submenu positioning */
}

/* Menu Link Styling */
.navbar .menu a {
    color: white; /* White text color */
    text-decoration: none; /* Remove underline */
    font-size: 18px;
    padding: 10px 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Menu Link Hover Effect */
.navbar .menu a:hover {
    background-color: #555;
    border-radius: 5px;
    color: #fff; /* Ensures the text color changes on hover */
}

/* Remove underline and velvet color */
.navbar .menu a:focus, 
.navbar .menu a:active {
    text-decoration: none;  /* Ensure no underline */
    color: white;  /* Maintain white color when clicked/focused */
}

/* Submenu Styling */
.navbar .submenu {
    display: none; /* Hide submenu by default */
    position: absolute;
    top: 100%; /* Show submenu just below the parent */
    left: 0;
    background-color: #444;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 150px; /* Set minimum width for submenu */
    z-index: 1000;
}

/* Submenu Item Styling */
.navbar .submenu li a {
    padding: 10px;
    display: block;
    color: white;
}

/* Submenu Link Hover Effect */
.navbar .submenu li a:hover {
    background-color: #555;
    border-radius: 0;
}

/* Display submenu on hover */
.navbar .submenu-parent:hover .submenu {
    display: block; /* Show submenu when hovering over parent */
}

/* body content */
body {
    /* Ensure page content doesn't hide under the sticky header */
    padding-top: 0px; /* Adjust based on the header's height */
    margin-top: 0px;
    
    /* Ensure body content doesn't overlap with fixed footer */
    padding-bottom: 60px;  /* Adjust to prevent content from hiding under the footer */
}

/* Footer Styling */
footer {
    background-color: #333;          /* Dark background for contrast */
    color: #fff;                     /* White text color */
    text-align: center;              /* Center the text */
    padding: 15px 20px;              /* Add some padding for spacing */
    font-size: 14px;                 /* Slightly smaller font size for footer */
    position: fixed;                 /* Fix footer at the bottom */
    width: 100%;                     /* Full width across the screen */
    bottom: 0;                       /* Align it to the bottom */
    left: 0;                         /* Stretch from the left edge */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);  /* Subtle shadow above the footer */
}

/* Footer Hover Effect */
footer p:hover {
    color: #007BFF;        /* Change text color on hover for interactivity */
    cursor: pointer;
}