body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    background-image: url(../images/inside.jpg);
}

header {
    background-color: #4b8ef1;
    color: white;
    padding: 1em 0;
    text-align: center;
}

section {
    padding: 1em 2em;
}

h2{
    color: #4b8ef1;
} 

h3, h4 {
    color: #4b8ef1;
}

.filters {
    background-color: #cfd3d7;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.filters label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.filters input {
    width: calc(100% - 20px);
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filters select {
    width: calc(100% - 20px);
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filters button {
    padding: 0.5em 1em;
    background-color: white;
    color: #4b8ef1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    border: #4b8ef1 solid 0.1rem;
}

.filters button:hover {
    background-color: #4b8ef1;
    color: white;
}

.job-listings, .internship-listings, .startup-listings {
    background-color: #cfd3d7;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1em;
}

.job-card, .internship-card, .startup-card {
    border-bottom: 1px solid #2317ab;
    padding: 1em 0;
}

.job-card h3, .internship-card h3, .startup-card h4 {
    margin: 0;
    font-size: 1.35rem;
    color: #0056b3;
}

.job-card p, .internship-card p, .startup-card p {
    margin: 0.5em 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.1rem !important;
}

.job-card button, .internship-card button, .startup-card button {
    padding: 0.5em 1em;
    background-color: white;
    color: #4b8ef1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    border: #4b8ef1 solid 0.1rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.job-card button:hover, .internship-card button:hover, .startup-card button:hover {
    background-color: #4b8ef1;
    color: white;
}

.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

.tab-button {
    padding: 0.5em 1em;
    margin: 0 0.5em;
    background-color: #ddd;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.2rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.tab-button.active {
    background-color: #4b8ef1;
    color: white;
}

.tab-content {
    display: none;
    margin: 2rem;
    padding: 1rem;
}

.tab-content p{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1rem;
}

.tab-content.active {
    display: block;
}

.startup-categories {
    display: flex;
    justify-content: center;
    margin-bottom: -1em;
    margin-top: -1.5rem;
}

.category-button {
    margin: 0 0.5em;
    padding: 0.5em 1em;
    background-color: #ddd;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.2rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.category-button.active {
    background-color: #4b8ef1;
    color: white;
}

.startup-content {
    display: none;
}

.startup-content.active {
    display: block;
}

/*.startup-content.active h3{
    background-color: #4b8ef1;
   // display: none;
}*/

/* New Details content stylings are added here*/


#details-content{
    background-color: rgb(207, 211, 215, 0.75);
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1em;
}

#details-content h3 {
    color: black;
    font-size: 1.8rem;
    font-weight: 600;
}

#details-content p {
    color: black;
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 1.5rem;
}

/*the end*/

#details button{
    padding: 0.5em 1em;
    margin: 0 0.5em;
    height: 1.9rem;
    background-color: #ddd;
    border: 0.01rem solid black;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.main-back{
    margin-left:2.5rem ;
    margin-bottom: -1.5rem;
}

.main-back button {
    padding: 0.5em 1em;
    margin: 0 0.5em;
    height: 2rem;
    background-color: #4b8ef1;
    border: none;
    border-radius: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none; /* added */
    color: #4b8ef1; /* changed */
    transition: background-color 0.3s, color 0.3s; /* added */
}

.main-back button a {
    text-decoration: none;
    color: #fff;
}

.main-back :hover{
    background-color: #0056b3;
    transform: scale(1.01);
}