.livecount {
    font-family: "JetBrains Mono", monospace;
    font-style: normal;
}

/* ********************************************** */
/*                 Global styles                  */
/* ********************************************** */
body {
    place-items: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

p {
    font-size: large;
}

/* ********************************************** */
/*             Countdown timer styles             */
/* ********************************************** */
.countdown h1 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    font-family: "Lucida Console", "Courier New", monospace;
}

.countdown table {
    margin: 0 auto;
    font-size: 5.4rem;
    font-weight: bold;
    text-align: center;
    font-family: "Lucida Console", "Courier New", monospace;
}

.countdown td {
    vertical-align: middle;
    padding: 10px;
}

.countdown .subtitle-row {
    font-size: 2rem;
    font-weight: normal;
    line-height: 1;
}

@media only screen and (max-width: 1000px) {
    .countdown table {
        font-size: 2.2rem;
    }

    .countdown table .subtitle-row {
        font-size: 1.2rem;
    }

    .countdown td {
        padding: 2px;
    }
}

/* ********************************************** */
/*               Top Navigation Bar               */
/* ********************************************** */
.navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.navbar-nav li {
    margin-right: 10px;
}

/* negate above style for the button */
.dropdown-menu li {
    margin-right: 0px;
}

.nav-item {
    padding: 10px 0 10px 0;
}

.navbar {
    background-color: #16191c;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.navbar img {
    filter: invert(100%);
    margin-left: 20px;
}

/* For smaller screens */
@media only screen and (max-width: 1000px) {
    .navbar-nav {
        padding: 5px 0 5px 0;
    }

    .nav-item {
        padding: 0 0 0 0;
    }

    .dropdown button {
        width: 300px;
    }

    .dropdown-menu li {
        padding-top: 5px;
    }
}

/* ********************************************** */
/*                     Footer                     */
/* ********************************************** */
footer {
    padding: 10vh 0 10vh 0;
    color: #ffffff;
    width: 100%;
    background-color: #16191c;
}

footer p {
    margin-bottom: 5px;
}

.social-icons li {
    display: inline-block;
    margin-right: 10px;
    font-size: 3rem;
}

.social-icons li:last-child {
    margin-right: 0;
}

/* For smaller screens */
@media only screen and (max-width: 1000px) {
    footer {
        padding: 5vh 3vw 5vh 3vw;
    }

    .social-icons {
        text-align: center;
        align-items: center;
    }
}

/* ********************************************** */
/*                  Banner styles                 */
/* ********************************************** */
.banner {
    padding: 10vh 0 10vh 0;
    line-height: 2.1;
    flex: 1;
}

.banner-reduced-top {
    padding: 30px 0 30px 0;
    line-height: 2.1;
    flex: 1;
}

.banner-fluid {
    padding: 10vh 0 10vh 0;
    vertical-align: middle;
    flex: 1;
}

.cta-banner {
    background-color: #343a40;
    padding: 30px;
    color: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cta-button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.cta-button-group a {
    margin: 0 5px;
}

.heading-banner {
    padding: 17vh 30vw 10vh 30vw;
}

.top-page-alert {
    padding: 2.5vh 10vw 2.5vh 10vw;
}

body {
    margin-top: 8vh !important;
}

/* For smaller screens */
@media only screen and (max-width: 1000px) {
    body {
        margin-top: 6.5vh;
    }

    .heading-banner {
        padding: 10vh 30vw 10vh 30vw;
    }

    .top-page-alert {
        padding: 2.5vh 10vw 2.5vh 10vw;
    }
}

/* ********************************************** */
/*                  Image Carousel                */
/* ********************************************** */
.carousel-indicators li {
    list-style: none;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: none !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel-inner img {
    max-width: 100%;
    max-height: 100%;
}

/* ********************************************** */
/*               Main Banner styles               */
/* ********************************************** */
#main-logo {
    filter: invert(100%);
    padding-bottom: 20px;
}

.main-heading {
    margin: 7vh 0 0 0;
}

.main-heading .detail {
    padding-top: 10vh;
}

.main-heading .feature-img {
    max-height: 150vh;
    max-width: 30vw;
}

.main-heading .logo-img {
    max-height: 300vh;
    max-width: 40vw;
}

/* For smaller screens */
@media only screen and (max-width: 1000px) {
    .banner-fluid {
        padding: 5vh 0 10vh 0;
    }

    .main-heading {
        margin: 1vh 0 0 0;
    }

    .main-heading .detail {
        padding-top: 5vh;
    }

    .main-heading .logo-img {
        max-width: 100vw;
    }

    .main-heading .feature-img {
        max-width: 80vw;
        max-height: 50vh;
    }
}




/* ********************************************** */
/*                Timeline Styles                 */
/* ********************************************** */
.timeline-heading {
    display: flex;
    align-items: center;
    height: 100%;
    /* Adjust the height as needed */
}

.timeline-circle {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    margin-right: 10px;
}

.timeline-time {
    font-size: 1rem;
    align-self: center;
}

.timeline-title {
    font-size: 2rem;
}


.timeline-body {
    padding-left: 15px;
    margin-left: 4px;
    border-left: 2px solid white;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.timeline-content {
    flex-grow: 1;
    max-width: 100vw;
    overflow-wrap: anywhere;
}

.timeline-image {
    margin-left: 10px;
}

.timeline-image img {
    max-height: 100%;
    /* Adjust as needed */
    vertical-align: middle;
}

.timeline-container {
    padding: 20px;
}

.talk-details {
    margin: 10px;
    padding-right: 20px;
    margin-bottom: 50px;
}

.talk-details .speaker-content {
    background-color: #343a40;
    border-radius: 25px;
    padding: 20px;
}

.talk-group {
    margin-top: 50px;
}

.talk-group button {
    margin: 0 5px 0;
}

.facilitator-img {
    background-color: black;
}

/* ********************************************** */
/*           Room Navigation Buttons             */
/* ********************************************** */
.room-nav-btn {
    margin: 0.25rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 0.375rem;
}

.room-nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.room-nav-btn.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

#roomNavButtons {
    justify-content: center;
    align-items: center;
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .room-nav-btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
        margin: 0.125rem;
    }
    
    #roomNavButtons {
        gap: 0.25rem !important;
    }
}

@media (max-width: 480px) {
    .room-nav-btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
        min-width: auto;
    }
    
    #roomNavButtons {
        justify-content: space-around;
    }
}

.clickable {
    cursor: pointer;
}

.clickable:hover {
    color: rgb(0, 119, 255);
    border-radius: 5%;
}

.timeline-object {
    padding: 0 10px 0 10px;
}


/* For smaller screens */
@media only screen and (max-width: 1000px) {
    .talk-details .speaker-content {
        margin: 10px;
        max-width: 95vw;
    }

    .talk-details {
        margin-bottom: 50px;
    }

    .timeline-title {
        font-size: x-large;
    }

    .timeline-container {
        padding: 5px;
    }
}

/* ********************************************** */
/*                  Talks Styles                  */
/* ********************************************** */

.speaker-content .speaker-pic {
    vertical-align: middle;
    margin-bottom: 20px;
    background-color: black;
}

:target::before {
    content: "";
    display: block;
    margin-top: -75px;
    height: 75px;
}


.sponsor-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* ********************************************** */
/*                 Sponsor Styles                 */
/* ********************************************** */
.sponsor-logo {
    min-height: 60px;
    max-height: 60px;
    min-width: 150px;
    max-width: 300px;
    object-fit: contain;
    z-index: 10;
}

.sponsor {
    max-width: 90%;
    height: 120px;
    padding: 35px 20px;
    margin: 5px 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.sponsor-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px;
    position: relative;
}

.sponsor-group:last-child {
    margin-bottom: 150px;
}

.sponsor-bar {
    position: absolute;
    background: white;
    font-weight: 900;
    font-size: 15px;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 3px;
    user-select: none;
    font-family: sans-serif;
}

.sponsor-bar:nth-of-type(1) {
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    padding: 0 5px;
}

.sponsor-bar:nth-of-type(2) {
    top: 15px;
    right: 0;
    bottom: 15px;
    width: 15px;
    padding: 5px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.sponsor-bar:nth-of-type(3) {
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    padding: 0 5px;
    transform: rotate(180deg);
}

.sponsor-bar:nth-of-type(4) {
    top: 15px;
    left: 0;
    bottom: 15px;
    width: 15px;
    padding: 5px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.sponsor-group.activate {
    z-index: 40;
}

.sponsor-group.activate .sponsor-bar {
    background: #c5ff99;
    color: #79c815;
}

.sponsor-group.platinum {
    z-index: 30;
}

.sponsor-group.platinum .sponsor-bar {
    background: #cdffff;
    color: #33c2ff;
}

.sponsor-group.partner {
    z-index: 30;
}

.sponsor-group.partner .sponsor-bar {
    background: #d4d4d4;
    color: #000;
}

.sponsor-group.gold {
    z-index: 20;
}

.sponsor-group.gold .sponsor-bar {
    background: #EDDE7C;
    color: #BD8100;
}

.sponsor-group.silver {
    z-index: 10;
}

.sponsor-group.silver .sponsor-bar {
    background: #EBEFF1;
    color: #9A9D9F;
}

.sponsor-group.product-sponsors {
    z-index: 5;
}

.sponsor-group.product-sponsors .sponsor-bar {
    background: #FFE6CC;
    color: #E67E22;
}

.gold .sponsor-bar::before {
    content: "GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD GOLD"
}

.silver .sponsor-bar::before {
    content: "SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER SILVER"

}

.platinum .sponsor-bar::before {
    content: "PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM PLATINUM"
}

.partner .sponsor-bar::before {
    content: "PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER PARTNER"
}

.product-sponsors .sponsor-bar::before {
    content: "PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS PRODUCT SPONSORS"
}

.sponsor-card {
    border-radius: 25%;
    background-color: #181a1b !important;
    min-height: 300px;
}

.hover-animation {
    transition: transform 0.3s ease-in-out;
}

.hover-animation:hover {
    transform: scale(1.02);
    /* You can adjust the scale factor for the hover effect */
}

/* For smaller screens */
@media only screen and (max-width: 1000px) {
    .sponsor-group {
        margin: 0px !important;
    }

}