/* Variables */
:root {
    --primary-color: #1e5b7b; /* Steel blue */
    --secondary-color: #1fa2bf; /* Light blue */
    --tertiary-color: #e56d30; /* Tomato */
    --quaternary-color: #d9a13b; /* Yellow */
    --quinary-color: #1fbfa2; /* Jade green */
    --background-color: #f8f9fa; /* Light gray */
    --text-color: #212529; /* Dark gray */
}

/* GENERAL PAGE & TEXT FORMATTING --------------------------------------------------r-------------------------------- */

.navbar.fixed-top + .container {
    padding-top: 50px; /* Adjust this value based on your navbar height */
}

.container {
    padding-bottom: 5em;
}

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
}

em {
    font-style: normal;
    font-weight: 600;
}

em2 {
    font-weight: 600;
    color: var(--secondary-color)
}

em3 {
    font-weight: 600;
    color: var(--primary-color)
}

em4 {
    font-weight: 600;
    color: var(--primary-color)
}

h1 {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: semibold;
}

h2 {
    color: var(--primary-color);
    font-family: "Poppins", sans-serif;
    /*font-size:  xx-large;*/
    text-align: left;
    padding-top: 2em;
    padding-bottom: 1em;
}

h3 {
    color: var(--secondary-color);
    font-family: "Poppins", sans-serif;
    font-weight: large;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

h4 {
    color: var(--tertiary-color);
    font-family: "Poppins", sans-serif;
    font-weight: large;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 15px;
}
h5 {
    color: darkslategray;
    font-family: "Poppins", sans-serif;
    font-size: large;
    font-weight: normal;
    text-align: left;
}

.h-space {
    padding-top: 2em;
}

.centred {
    text-align: center
}

.top-padded-div {
    padding-top: 1em;
}

/* BUTTONS ---------------------------------------------------------------------------------------------------------- */
.custom-btn {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white; /* White text */
}

.custom-btn:hover {
    background-color: var(--primary-color); /* Darker green background on hover */
    border-color: var(--primary-color); /* Darker green border on hover */
}


/* NAVBAR ----------------------------------------------------------------------------------------------------------- */


.navbar-nav .nav-link.active {
    color: var(--secondary-color); /* Change this to your desired active link color */
    font-weight: normal; /* Bolder font weight for active link */
}

/* Hover Styling */
.navbar-nav .nav-link:hover {
    color: var(--secondary-color); /* Change this to your desired hover color */
    font-weight: normal; /* Bolder font weight on hover */
}


/* INDEX PAGE SECTION ----------------------------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: url('../images/home-video_dna.gif') no-repeat center center;
    background-size: cover;
    height: 100vh;
}

.hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    padding: 0 20px;
    flex-direction: column;
}

.hero h1 {
    font-size: 4rem;
}

.hero .btn {
    margin: 10px;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero .btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 576px) {
    .hero {
        background-size: contain;
    }
}

.index-research-card {
    background-color: var(--background-color);
}

.index-research-image {
    height: 20em;
    display: flex;
    justify-content: center;
}

.index-research-image img {
    padding: 10px;
    height: auto;
    width: 100%;
    object-fit: contain;
}

.index-research-details {
    padding: 10px;
}

.research-link {
    text-decoration: none;
    color: inherit;
}

.research-link:hover {
    color: var(--primary-color)
}

/*RESEARCH ----------------------------------------------------------------------------------------------------------*/

.research-area {
    display: flex;
    justify-content: center;
}

.research-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    height: auto;
    padding: 2em;
}




/*PUBLICATIONS ------------------------------------------------------------------------------------------------------*/

.pubsList {
    text-decoration: none;
}

li.pubsEntry {
    margin-bottom: 10px;
    padding-left: 1em;
}

a.pubsEntry {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none

}

ul.pubsYears {
    list-style-type: none;
}


/* GROUP MEMBERS --------------------------------------------------------------------------------------------------- */

.sleiman {
    display: block;
    width: 20em;
    height: auto;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    max-width: 100%;
    border: 5px solid var(--secondary-color);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.member {
    width: 80%;
    display: flex;
    align-items: center; /* Vertically center the child elements */
    margin-bottom: 20px;
}

.member_photo {
    flex: 0 0 auto;
    margin-right: 20px;
}

.member_desc {
    flex: 1 1 auto;
}

.flag-icon {
    width: 32px;  /* Adjust size as needed */
    height: 24px; /* Maintain 4:3 aspect ratio */
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

li.alumniEntry {
    margin-bottom: 10px;
    padding-left: 1em;
}

/* MEDIA CARDS ----------------------------------------------------------------------------------------------------- */

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between cards */
    justify-content: center; /* Center the cards horizontally */
    padding: 20px;
}

.card-img-top {
    width: 100%;
    height: 12vw;
    object-fit: cover;
}

.card-title {
    font-weight: 600;
    color: var(--secondary-color)
}

.video-card {
    flex: 1 calc(50% - 20px); /* Adjust the width of the cards */
    max-width: calc(50% - 20px); /* Ensure max width is the same */
    box-sizing: border-box;
}

.news-card {
    flex: 1 1 calc(33.333% - 40px); /* Adjust the width of the cards */
    max-width: calc(33.333% - 40px); /* Ensure max width is the same */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .news-card {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .news-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* CONTACT PAGE ---------------------------------------------------------------------------------------------------- */

.contact-photo {
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    max-width: 100%;
}
/* FOOTER ---------------------------------------------------------------------------------------------------------- */

footer {
    background-color: var(--primary-color);
    text-align: center;
    width: 100%;
}

.footer-heading {
    color: white;
    font-size: large;
    text-transform: uppercase;
    text-align: center;
}

.footer-text {
    color: #efefef;
    font-size: small;
    text-align: center;
}

.footer-links a {
    color: #27def2;
    font-size: small;
    text-align: center;
}

.footer-copyright {
    color: #ffffff;
    background-color: var(--secondary-color);
    font-size: small;
    width: 100%;
    padding: 10px;
}

.fa {
    padding: 15px;
    font-size: 30px;
    width: 60px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-youtube-play {
    background: #69abee;
    color: white;
}