/* Global Styles */
body > * {
    max-width: 1200px; /* Restrict content width */
    margin: 0 auto; /* Center content horizontally */
    padding: 0 20px; /* Add some padding for extra spacing */
}

/* Header Section */
header {
    display: flex; /* Enables Flexbox layout for horizontal alignment */
    align-items: center; /* Vertically aligns all items */
    justify-content: space-between; /* Positions items at the left, center, and right */
    background: #2c3e50; /* Dark background */
    color: white; /* White text */
    padding: 15px 20px; /* Adds spacing inside the header */
}

/* Profile Photo Adjustment */
.profile-photo {
    margin-left: 10; /* Forces photo to align with the left edge */
    width: 120px; /* Profile photo size */
    height: auto;
    border-radius: 10px; /* Rounded corners for a polished look */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Header Text Section */
.header-text {
    text-align: center; /* Centers text horizontally */
    flex-grow: 1; /* Ensures it expands to take up available space */
}

    .header-text h1 {
        font-size: 24px; /* Name font size */
        margin-bottom: 5px; /* Space below the name */
    }

    .header-text h2 {
        font-size: 18px; /* Title font size */
        margin-top: 0; /* Removes extra space above the title */
    }

/* Contact Frame Section */
.contact-frame {
    margin-right: 10; /* Forces contact frame to align with the right edge */
    border: 2px solid #fff;
    padding: 15px;
    background-color: white;
    color: black;
    max-width: 230px;
    border-radius: 10px;
    text-align: center; /* Centers content inside the frame */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

    .contact-frame:hover {
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); /* Blue glow on hover */
        transform: scale(1.05); /* Slightly enlarge on hover */
    }

    .contact-frame h2 {
        margin-top: 0;
        font-size: 18px; /* Contact heading font size */
        font-weight: bold;
        color: #333; /* Darker text color for better contrast */
    }

    /* Contact Frame List Styling */
    .contact-frame ul {
        padding: 0;
        list-style-type: none;
    }

        .contact-frame ul li {
            margin-bottom: 10px; /* Space between items */
        }

            /* Email/LinkedIn Link Styling */
            .contact-frame ul li a {
                color: #3498db; /* LinkedIn blue for consistency */
                font-weight: bold;
                text-decoration: none;
            }

                .contact-frame ul li a:hover {
                    text-decoration: underline; /* Underline on hover for better UX */
                }

/* LinkedIn Icon Styling */
.linkedin-icon {
    border-radius: 5px; /* Rounded corners for a polished look */
    border: 1px solid #ddd; /* Light gray border around the icon */
    width: 32px; /* Icon size (consistent with design) */
    height: 32px;
}

    .linkedin-icon:hover {
        transform: scale(1.1); /* Slightly enlarge on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds subtle shadow for emphasis */
    }

    .linkedin-icon:active {
        transform: scale(0.95); /* Shrink slightly to simulate a click effect */
    }

/* Portfolio Table Styles */
.cad-projects {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    table-layout: fixed; /* Important for column width control */
}

    .cad-projects th,
    .cad-projects td {
        padding: 0.5rem;
        border: 1px solid #ddd;
        text-align: center;
        word-break: break-word; /* Prevent long words from breaking layout */
    }

    .cad-projects th {
        background: #f8f9fa;
        font-weight: bold;
    }

        /* Column Widths */
        .cad-projects th:nth-child(1),
        .cad-projects td:nth-child(1) {
            width: 20%; /* Adjust this percentage as needed */
        }

        .cad-projects th:nth-child(2),
        .cad-projects td:nth-child(2) {
            width: 60%; /* Adjust this percentage as needed */
        }

        .cad-projects th:nth-child(3),
        .cad-projects td:nth-child(3) {
            width: 20%; /* Adjust this percentage as needed */
        }

/* CAD Preview Images */
.cad-preview {
    max-width: 75%; /* Limits width to 75% of container */
    max-height: 200px; /* Maximum height constraint */
    width: auto; /* Allows width to adjust based on constraints */
    height: auto; /* Allows height to adjust based on constraints */
    object-fit: contain; /* Ensures image fits without distortion */
    cursor: pointer;
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto; /* Centers the image */
}

    .cad-preview:hover {
        transform: scale(1.05);
    }

/* Experience Timeline */
.timeline .position {
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 3px solid #3498db;
}

.timeline h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.company {
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}

/* Education Styles */
.credentials {
    list-style: none;
    padding: 0;
}

    .credentials li {
        margin-bottom: 1.5rem;
    }

/* Skills Section Styles */
#skills {
    padding-top: 3rem; /* Adds spacing for better visual separation */
}

    #skills h2 {
        text-align: center;
        color: #2c3e50;
    }

.skills-grid {
    display: grid; /* Enables grid layout */
    grid-template-columns: repeat(2, 1fr); /* Forces two equal columns */
    grid-template-rows: repeat(2, 1fr); /* Ensures two equal rows */
    gap: 1.5rem; /* Space between items */
    align-items: stretch; /* Ensures uniform height for all grid items */
}

.skill-category {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    min-height: 200px; /* Ensures consistent height */
}

    .skill-category h3 {
        color: #2c3e50; /* Dark blue for headings */
        font-weight: bold; /* Emphasize headings */
        text-align: center; /* Center the heading text */
        width: 100%;
    }

    .skill-category ul {
        list-style-type: none; /* Removes default bullet styling */
        padding-left: unset; /* Aligns list with container edges */
        margin-left: 0; /* Removes any unwanted spacing */
        text-align: center; /* Center the text */
        display: block; /* Ensures proper block-level alignment */
    }

    .skill-category li {
        font-size: 0.95rem; /* Slightly smaller font size for list items */
    }

/* Footer Styles */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem 0;
}

    footer a {
        color: #fff;
        text-decoration: none;
    }

/* Animation Effects */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

section {
    animation: fadeIn 0.5s ease-in;
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    width: 80%;
    height: 80%;
}

.close {
    float: right;
    cursor: pointer;
    font-size: 24px;
}

/* --- Responsive Design for Smaller Screens --- */
@media (max-width: 768px) {
    /* Adjust the skills grid to 1 column on small screens */
    .skills-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding: 1rem;
    }

    .cad-projects {
        display: block;
        overflow-x: auto;
    }

    .cad-preview {
        width: 150px;
        height: 100px;
    }

    /* Adjustments for Mobile Header */
    header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .profile-photo {
        margin: 0 auto;
    }

    .contact-frame {
        margin: 10px auto;
        text-align: center;
    }
}

/* --- Presentation Button (for all screen sizes) --- */
.presentation-btn {
    display: inline-block;
    padding: 15px 30px;
    margin: 20px 0;
    font-size: 20px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

    .presentation-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    }

/* Navigation Menu Styles */
nav {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

    .nav-menu li a {
        text-decoration: none;
        color: #2c3e50;
        font-size: 16px;
        font-weight: bold;
        transition: color 0.3s ease;
    }

        .nav-menu li a:hover {
            color: #3498db;
        }