* {
    box-sizing: border-box;
}

/* Style the tab */
.tab {
    flex: 0 0 30%; /* Fixed width */
    border: 1px solid #f3c286;
    background-color: #f8cc6d;
    height: auto; /* Let height adjust based on content */
}

/* Style the buttons that are used to open the tab content */
.tab button {
    display: block;
    background-color: #e0cca8;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #e0bc7e;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #b8813e;
    color: white;
}

/* Style the tab content */
.tabcontent {
    flex: 1; /* Take the remaining space */
    padding: 0px 12px;
    border: 1px solid #ccc;
    border-left: none;
    background-color: #f2dab1;
    color: #372f1f;
    display: none; /* All tabs are hidden initially */
    overflow-y: auto; /* Enable vertical scrolling if content is too large */
    max-height: 300px; /* Limit height */
}

/* Show the Experience tab content by default */
#Experience {
    display: block;  /* Display Experience tab by default */
}

.hero-area, .mobile-only{
    display: flex;  /* Use flexbox for layout */
    background-color: #f3c286;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* Light shadow for depth */
    padding: 10px;
    margin: 10px;
}

.image-container {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* Light shadow for depth */
    padding: 10px;
    border-radius: 10px;
    background-color: #f2dab1;
    display: flex;          /* Use flexbox for inner layout */
    flex-direction: column; /* Stack image and text vertically */
    align-items: center;    /* Center the items */
}

.image-container img {
    max-width: 150px;  /* Adjust image width */
    height: auto;
    border-radius: 10px;
}

.hero-area-text-region {
    padding: 60px 10px 20px 20px;
    margin: 10px;
    flex: 1; /* Allow this region to take the remaining space */
}

.hero-area-text-region h1 {
    font-size: 50px;
    color: #372f1f;
}

.personal-details-tab-area {
    /* Vertical and horizontal padding */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* Light shadow for depth */
    display: flex;
    
}

#footer-placeholder{
    margin-top: 10px;
}
tr td:first-child{
    font-weight: bold;
}

table, tr, td{
    border: 1px solid black;
    
}

#Education ul li, .job-experience, .projects-article, .sections-more-about-me{
    border: 1px solid black;
    margin: 2px;
    padding-left: 10px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.12);
}
#Education ul{
    list-style-type: none;
    
}

.projects-article p b{
    font-size: small;
}
.sections-more-about-me{
    padding-bottom: 10px;
    padding-right: 10px;
}



/* Media queries for smaller screens */
@media (max-width: 768px) {
    .hero-area {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: center; /* Center items */
    }

    .hero-area-text-region h1 {
        font-size: 2em; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 480px) {
    .hero-area-text-region h1 {
        font-size: 1.5em; /* Further adjust font size for very small screens */
    }
}

.mobile-only {
    display: none; /* Hide the div by default */
}

/* Media query for mobile screens */
@media (max-width: 768px) { /* Adjust the width as needed */
    .mobile-only {
        display: block; /* Show the div on mobile screens */
    }
}

.mobile-only li{
    list-style-type: none;
}

.mobile-only li a{
    text-decoration: none;
    color: #372f1f;
}

.mobile-only li a:hover{
    text-decoration: none;
    color: #817661;
    font-size: larger;
}