/* General styles */
body {
    display: flex;
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll if content overflows */
    flex-direction: column; /* Ensure body flows downwards */
}

html, body {
    height: auto; /* Let the document grow with content */
    min-height: 100vh; /* Ensure at least full screen height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

h4{
    font-size: 0.9rem; /* Adjust size as needed */
    font-weight: bold;
    line-height: 1.5; /* Adjust spacing */
    margin-bottom: 0.2rem; /* Optional: reduce bottom margin */
}


/* Left panel */
#leftPanel {
    width: 30vw; /* Width of the left panel */
    height: 100vh; /* Full height of the screen */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: width 0.3s ease-in-out;
    background-color: #343a40;
    position: fixed; /* Keeps the panel fixed */
    left: 0;
    top: 0;
    padding-top: 0; /* Remove any top padding */
    z-index: 10; /* Ensuring it's above other elements */
}

/* Navigation panel inside left panel */
#sideNav {
    width: 100%; /* Full width of the left panel */
    display: flex;
    flex-direction: column; /* Stack nav items vertically */
    height: 100%; /* Full height of the left panel */
}

/* Navbar list styles */
.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    height: 100%; /* Ensure full height */
}

/* Hide the hamburger menu */
.navbar-toggler {
    display: none;
}

/* Nav item styles - Full width, height adjustment */
.nav-item {
    width: 100%; /* Full width of the left panel */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    height: 6vh; /* Default height for the non-expanded buttons (10% of the panel height) */
}

/* Nav links with background images */
.nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white; /* Default text color for inactive state */
    font-size: 16px; /* Default font size */
    transition: all 0.3s ease-in-out;
    height: 100%; /* Ensure each button takes full height of the nav item */
    width: 100%; /* Full width of the nav item */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-transform: uppercase;
    font-weight: bold;
    position: relative; /* Positioning for absolute text removal */
}

/* Background images for each nav button */
.nav-item:nth-child(1) a { background-image: url('../assets/img/home.jpg'); }
.nav-item:nth-child(2) a { background-image: url('../assets/img/research.jpg'); }
.nav-item:nth-child(3) a { background-image: url('../assets/img/cv.jpg'); }
.nav-item:nth-child(4) a { background-image: url('../assets/img/art.jpg'); }
.nav-item:nth-child(5) a { background-image: url('../assets/img/contact.jpg'); }

/* Expanded button style (76% of the height of the panel) */
.nav-item.expanded {
    height: 76vh; /* Make expanded button take 60% of the panel height */
}

/* Active (expanded) state - Remove text when active */
.nav-item.expanded a {
    color: transparent !important; /* Remove text by making it transparent */
    font-size: 16px !important; /* Keep the font size the same when active */
}

/* Pseudo-element to remove text when active */
.nav-item.expanded a::after {
    content: ''; /* No content when expanded */
}

/* Ensuring that the text is completely removed on active */
.nav-item a span {
    visibility: visible; /* Ensure visibility of text in inactive state */
}

.nav-item.expanded a span {
    visibility: hidden; /* Hide text when the nav item is expanded */
}

/* Fixing the sideNav to the left side of the page */
#sideNav {
    position: fixed; /* Fixed position for side navigation */
    top: 0;
    left: 0;
    width: 30vw; /* Set width of the navigation panel */
    height: 100vh; /* Full height of the viewport */
    z-index: 10; /* Keep it on top of other elements */
    background-color: #FFE756; /* Navigation background color */
    overflow-y: auto; /* Handle overflow if needed */
    padding-top: 0; /* Space from top */
}

/* Main content */
.container-fluid {
    margin-left: 30vw; /* This ensures the content starts after the left panel */
    width: 75vw; /* Content width */
    padding: 20px;
    min-height: 100vh; /* Ensure it can expand */
    height: auto; /* Allow it to grow dynamically */
}

/*each section in the right panel*/
section {
    min-height: 100vh; /* Ensures at least full screen height */
    height: auto !important; /* Allows it to expand if content grows */
    overflow: visible !important; /* Prevents content from being hidden */
    display: flex;
    flex-direction: column;
    margin-right: 7vw;
}


hr {
    display: none;
    visibility: hidden;
    height: 0;
    margin: 0;
    border: none;
}



/* Style for social icons */
.social-icons {
    display: flex;
    justify-content: flex-start; /* Center the icons horizontally */
    gap: 20px; /* Adds space between the icons */
}

/* social icons size*/
.social-icons .social-icon i {
    font-size: 40px; /* Adjust this value as needed */
    transition: font-size 0.3s ease-in-out; /* Optional: add a transition effect */
}


/* Parent to sections */
.container-fluid {
    margin-left: 31vw; /* Offset to align with left panel */
    width: 70vw;
    padding: 20px;
    min-height: 100vh; /* Keep sections at full screen height */
    height: auto; /* Allow dynamic content growth */
    overflow: hidden; /* Prevent extra space */
}


/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Resume section */
#cv {
    padding: 20px;
    box-sizing: border-box;
    min-height: 100vh; /* Keep the section at least as tall as the viewport */
    height: auto; /* Allow it to grow when accordions expand */
    padding-bottom: 20px; /* Padding at the bottom */
    position: relative; /* To manage the dynamic height */
}

/* Accordion styles */
.accordion-button {
    background-color: #E6134E;
    color: white; /* Default text color for the accordion title */
    border: none;
    padding: 1rem;
    font-size: 16px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.accordion-button:not(.collapsed) {
    background-color: #90072E; /* Darker color when expanded */
    color: white; /* Ensure text stays white when expanded */
}

.accordion-body {
    max-height: none;  /* Remove any height limits */
    overflow: visible; /* Ensure content expands properly */
    padding: 20px;
    font-size: 14px;
    background-color: #f8f9fa; /* Light background for content */
    color: #495057; /* Dark text for readability */
}

/* Accordion items */
.accordion-item {
    overflow: visible !important; /* Make sure the full content is shown */
    margin-bottom: 10px; /* Space between accordion items */
    border: 1px solid #dee2e6; /* Light border around each accordion item */
    border-radius: 5px;
}

/* Style for expanded accordion button */
.accordion-button:focus {
    box-shadow: none; /* Remove the default focus outline */
}

/* Adding a hover effect on the accordion buttons */
.accordion-button:hover {
    background-color: #495057; /* Darken background slightly on hover */
    cursor: pointer;
}

.skills-container {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Adjust spacing between lists */
}

.skills-list {
    flex: 1; /* Allows both lists to take equal width */
    list-style-type: none;
    padding: 0;
}

.skills-list li {
    font-size: 0.9rem;
    line-height: 1; /* Adjust spacing */
    margin-bottom: 5px;
}

.skills-list li::before {
    content: "•";  /* Unicode bullet point */
    color: #000;   /* Adjust color if needed */
    font-weight: bold;
    display: inline-block;
    width: 1em;    /* Space between bullet and text */
    margin-right: 8px;
}

#contact {
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Ensures section takes up most of the page */
    justify-content: space-between; /* Pushes footer down */
    padding-bottom: 20px; /* Adds a little extra space */
}


.container {
    max-width: 800px; /* Adjust to match your layout */
    margin: 0 auto;
}

form {
    max-width: 500px;
    margin-left: 0; /* Align with section title */
}

.btn {
    background-color: #E6134E;
    color: white;
    font-weight: bold;
}

.btn:hover {
    background-color: #90072E;
}

.contact-footer {
    text-align: center;
    margin-top: auto; /* Pushes it down */
    font-size: 14px;
    color: #6c757d; /* Muted color */
    border-top: 1px solid #ddd; /* Optional separator line */
    padding-top: 20px;
}

.pdf-viewer {
    width: 100%;
    height: 80vh;
    border: none;
}