:root {
    --eod-orange: #F09034;
    --eod-dark: #080000;
    --eod-light: #F9F0E8;
    --eod-secondary: #003F46;
    --eod-red: #460000;
}

body {
    position: relative;
    font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-wrap: pretty;
    word-break: break-word;
}

.bg-orange {
    background-color: #F09034CC;
}

.bg-green {
    background-color: #003F4699;
}

a {
    transition: .2s;
    color: var(--eod-orange);
}

a:hover {
    color: var(--eod-light);
}

.bg-orange a {
    color: var(--eod-secondary);
}

.bg-orange a:hover {
    color: var(--eod-red);
}

.bg-green a {
    color: var(--eod-orange);
}

.bg-green a:hover {
    color: var(--eod-light);
}

h1 {
    font-size: 45px;
    font-weight: 700;
    line-height: 60px;
}

h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 3px solid var(--eod-light);
}

h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
}

h5 {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}

.event-started-container {
    display: flex;
    flex: 1;
    width: 100%;
    justify-content: center;
    flex-direction:column;
    align-items:center
}

.yellow-circle {
    background-color: #f09035;    /* Sets the background color to yellow */
    width: 35px;                /* Defines the width of the circle */
    height: 35px;               /* Defines the height of the circle */
    border-radius: 50%;          /* Makes the shape a circle */
    display: flex;               /* Enables flexbox for centering the icon */
    justify-content: center;     /* Centers the icon horizontally */
    align-items: center;
    position: relative;
}

.date-location-icon-container{
    width: 40px;
}

.yellow-circle i {
    font-size: 20px;             /* Adjusts the size of the icon */
    color: white;                /* Sets the icon color, you can change it */
}

.event-card{
    background-image: url(../Uploads/event_card_bg.png);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5%;
    padding-bottom: 5%;
}

.event-card img{
    width: 30%;
}

.event-card h1{
    font-weight: bold;
    text-transform: none;
    font-size: 1.4em;
    margin-bottom: 0;
}

.event-card h2{
    border-bottom: none;
    font-weight: bold;
    text-transform: none;
    font-size: 1.2em;
    margin-top: 0;
}

.date-location-container{
    width: 80%;
}

.date-location-item{
    width:100%;
    background-color: rgba(0,0,0,0.4);
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    margin: 2%;
    align-items: center;
}

.date-location-item span{
    font-size: 0.8em;
    margin-top: 2%;
    margin-bottom: 2%;
    font-weight: bold;
    margin-right: 5px;
}

.bg-dark {
    background-color: var(--eod-dark) !important;
}

.text-white {
    color: var(--eod-light) !important;
}

.text-dark {
    color: var(--eod-dark) !important;
}

::-webkit-scrollbar {
    width: 13px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--eod-dark);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #F9F0E866;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #F9F0E899;
}

/* header */

.navbar .navbar-nav .nav-item>.nav-link {
    padding-right: 0;
    padding-left: 1.5rem;
    color: #707070;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link {
    color: var(--eod-light);
}

/* countdown */

.image-header {
    position: relative;
    min-height: fit-content;
    background-image: url(../Uploads/Backdrop.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 130px;
    padding-bottom: 80px;
}

.cd-logo {
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translate(-50%, 0);
}

.cd-container {
    border: 3px solid var(--eod-light);
    border-radius: 20px;
    padding: 70px 30px;
}

.cd-number {
    font-size: 200px;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    line-height: 276px;
}

.cd-text {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
    line-height: 35px;
}

.cd-container div:not(:first-of-type) {
    position: relative;
}

.cd-container div:not(:first-of-type)::before {
    position: absolute;
    content: "";
    border-left: 5px solid var(--eod-light);
    height: 324px;
}

.countdown h1 {
    font-size: 34px;
    line-height: 47px;
    font-weight: 500;
    margin-top: 40px;
}

/* sections */

section {
    padding: 120px 0;
}

/* image and text */

.image-and-text {
    position: relative;
}

.image-and-text .rounded-frame {
    padding: 13px;
    background-color: #00000000;
    border: 3px solid var(--eod-light);
    border-radius: 20px;
}

.img-rounded {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.image-and-text .overlay {
    position: absolute;
    left: 0;
    top: 30%;
    transform: translate(0, -20%);
}

.image-and-text .overlay .text {
    background-color: #003F46cc;
    padding: 40px 30px 30px 30px;
    border-radius: 20px;
}

#project .image-and-text .rounded-frame::after {
    content: 'Project';
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 207px;
    color: var(--eod-dark);
    font-weight: 800;
    transform: translate(37%, -35%) rotate(-90deg);
}

/* team */

.team {
    background-color: #003F4699;
}

.team .image-and-text .overlay .text {
    background-color: #F09034CC;
}

.team .image-and-text .overlay {
    right: 0;
    left: auto;
    top: 45%;
    display: flex;
    flex-direction: column-reverse;
}


#team .image-and-text .rounded-frame::after {
    content: 'Team';
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 207px;
    color: #03252a;
    font-weight: 800;
    transform: translate(-32%, -35%) rotate(90deg);
}


/* socials */

.image-and-text .socials {
    margin: 20px 30px;
    margin-right: 0;
    padding-right: 40px;
}

.socials .social-link {
    background-color: var(--eod-light);
    padding: 27px;
    font-size: 27px;
    border-radius: 50%;
    color: #080000;
    position: relative;
}

.socials .social-link:hover {
    transform: scale(110%);
}

.socials .social-link i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
}

.team .image-and-text .socials {
    margin-left: auto;
    padding-left: 40px;
    margin-right: 30px;
    padding-right: 0;
}

.team .socials .social-link {
    color: #03252a;
}

/* connections */

.connections .images {
    gap: 16px;
}

.connections .images .small-col {
    padding-right: 32px;
    gap: 16px;
}

.connections .img-rounded {
    padding: 0;
    object-fit: cover;
}

.connections a.img-rounded {
    padding: 10%;
    background-color: #003F4699;
    color: var(--eod-light);
    text-decoration: none;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}


.connections a.img-rounded:hover {
    background-color: #F09034CC;
}

.connections .text {
    border: 3px solid var(--eod-light);
    margin-left: 20px;
    padding: 20px;
    border-radius: 20px;
}

.connections a.img-rounded p {
    align-content: center;
}

/* application */

.application {
    background-color: #F09034CC;
}

.application h2 {
    font-size: 210px;
    font-weight: 800;
    text-transform: none;
    margin-left: auto;
    width: fit-content;
    border: none;
}

.application .form {
    padding-left: 30px;
}

.application .form .form-control,
.application .form .form-select {
    padding: 37px 40px;
    background-color: #F9F0E899;
    border: none;
    border-radius: 20px;
    margin-bottom: 13px;
    height: fit-content;
    font-size: inherit;
}

.application .form .gap {
    gap: 13px;
}

.application .form .form-floating>label {
    padding: 37px 40px;
}

.application .form .form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-1.5rem) translateX(-.85rem);
}

.application .form .form-check .form-check-input {
    background-color: var(--eod-light);
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 20px;
}

.application .form .form-check-input:checked {
    background-color: var(--eod-secondary);
}

.application .form .form-check-label {
    margin-top: auto;
    margin-bottom: auto;
}

.application .form .btn {
    background-color: var(--eod-light);
    padding: 0 80px;
    border-radius: 20px;
    font-size: inherit;
    color: var(--eod-dark);
    transition: .2s;
}

.application .form .btn:not(:disabled):hover {
    background-color: var(--eod-secondary);
    color: var(--eod-light);
}

/* footer */

.footer {
    padding: 46px 0;
}

.footer .nav {
    align-items: center;
}

.footer .nav .nav-link,
.footer .dl a {
    color: var(--eod-light);
}

.footer .nav .nav-link:hover,
.footer .dl a:hover {
    text-decoration: underline;
}

.footer .socials {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .dl {
    display: flex;
    justify-content: end;
}

.footer .dl a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: inherit;
    margin-right: 0;
}

.footer .dl a>img {
    width: 169px;
}

/* responsive */

@media screen and (max-width: 1399px) {
    .cd-number {
        font-size: 166px;
        line-height: 240px;
    }

    .cd-container div:not(:first-of-type)::before {
        height: 290px;
    }

    #project .image-and-text .rounded-frame::after {
        font-size: 177px;
        transform: translate(36%, -35%) rotate(-90deg);
    }

    #team .image-and-text .rounded-frame::after {
        font-size: 177px;
        transform: translate(-31%, -35%) rotate(90deg);
    }

    .team .image-and-text .overlay {
        top: 40%;
    }

    .application h2 {
        font-size: 184px;
    }

    .application .form .btn {
        padding: 0 45px;
    }
}

@media screen and (max-width: 1199px) {
    .cd-number {
        font-size: 130px;
        line-height: 200px;
    }

    .cd-text {
        font-size: 25px;
    }

    .cd-container div:not(:first-of-type)::before {
        height: 246px;
    }

    #project .image-and-text .rounded-frame::after {
        font-size: 145px;
        transform: translate(35%, -35%) rotate(-90deg);
    }

    .image-and-text .overlay .text {
        padding: 30px 20px 20px 20px;
    }

    .image-and-text .socials {
        margin: 10px 20px;
    }

    .team .image-and-text .socials {
        padding-left: 30px;
    }

    .application h2 {
        font-size: 145px;
    }

    #team .image-and-text .rounded-frame::after {
        font-size: 145px;
        transform: translate(-30%, -35%) rotate(90deg);
    }

    .team .image-and-text .overlay {
        top: 34%;
    }

    .connections .images .small-col {
        padding-right: 16px;
    }

    .connections .text {
        margin-left: 0;
        margin-top: 32px;
    }

    .connections .small-col a.img-rounded img {
        max-width: 60%;
    }

}

@media screen and (max-width: 991px) {

    .cd-number {
        font-size: 105px;
        line-height: 136px;
    }

    .cd-text {
        font-size: 22px;
    }

    .cd-container div:not(:first-of-type)::before {
        height: 174px;
        border-left: 3px solid var(--eod-light);
    }

    .countdown h1 {
        font-size: 28px;
    }

    section.project,
    section.team {
        padding-bottom: 240px;
        padding-top: 100px;
    }

    .image-and-text .overlay {
        top: 50%;
    }

    #project .image-and-text .rounded-frame::after {
        font-size: 119px;
        transform: translate(33%, -35%) rotate(-90deg);
    }

    #team .image-and-text .rounded-frame::after {
        font-size: 119px;
        transform: translate(-29%, -35%) rotate(90deg);
    }

    .team .image-and-text .overlay {
        top: 62%;
        flex-direction: column;
    }

    .team .image-and-text .socials {
        margin-right: 20px;
    }

    .application h2 {
        font-size: 100px;
    }

    .connections .small-col a.img-rounded img {
        max-width: 100%;
    }

    .application .form {
        padding-left: inherit;
    }

    .application .container>div>div {
        margin: 20px 0;
    }

    .footer .dl a>img {
        width: 108px;
    }
}

@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 35px;
        line-height: 50px;
    }

    h2 {
        font-size: 24px;
    }

    .cd-number {
        font-size: 74px;
        line-height: 105px;
    }

    .cd-text {
        font-size: 16px;
    }

    .cd-container div:not(:first-of-type)::before {
        height: 152px;
    }

    .countdown h1 {
        font-size: 26px;
        margin-top: 16px;
    }

    .navbar .navbar-nav .nav-item>.nav-link {
        padding-right: 0;
        padding-left: 0.8rem;
    }

    .image-and-text .overlay {
        position: relative;
        top: 30%;
        transform: translate(0, -20%);
    }

    #project .image-and-text .rounded-frame::after {
        font-size: 104px;
        top: 22%;
        transform: translate(32%, -50%) rotate(-90deg);
    }

    section {
        padding: 100px 0;
    }

    section.project,
    section.team {
        padding-bottom: 0;
        padding-top: 100px;
    }

    .team .image-and-text .overlay {
        top: 0;
        flex-direction: column;
        left: 100%;
        transform: translate(-100%, -20%);
    }

    #team .image-and-text .rounded-frame::after {
        font-size: 104px;
        top: 22%;
        transform: translate(-27%, -50%) rotate(90deg);
    }

    .connections .images {
        height: 425px;
    }

    .connections a.img-rounded {
        font-size: 18px;
    }

    .connections .text {
        padding: 15px;
    }

    .application h2 {
        font-size: 76px;
    }

    .application .form .form-control,
    .application .form .form-select {
        padding: 32px 23px;
    }

    .application .form .form-floating>label {
        padding: 32px 23px;
    }

    .application .form .form-floating>.form-control:focus~label,
    .form-floating>.form-control:not(:placeholder-shown)~label,
    .form-floating>.form-select~label {
        opacity: .65;
        transform: scale(.85) translateY(-1rem) translateX(-0.5rem);
    }

    .application .form .btn {
        padding: 15px 45px;
        margin-top: 15px;
    }

    .footer .nav {
        align-content: center;
    }
}

@media screen and (max-width: 575px) {
    .navbar .navbar-nav .nav-item>.nav-link {
        padding-bottom: 1rem;
    }

    .navbar .navbar-brand {
        width: 60px !important;
    }

    .cd-number {
        font-size: 45px;
        line-height: 68px;
    }

    .cd-text {
        font-size: 14px;
    }

    .cd-container {
        border: 2px solid var(--eod-light);
        padding: 80px 5px;
        padding-bottom: 50px;
    }

    .cd-container div:not(:first-of-type)::before {
        height: 114px;
        border-left: 2px solid var(--eod-light);
    }

    h1 {
        font-size: 30px;
        line-height: 40px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
        line-height: 22px;
    }

    section,
    section.project,
    section.team {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .image-and-text .overlay {
        top: 0;
        transform: none;
        margin-top: 20px;
    }

    .image-and-text .rounded-frame {
        padding: 10px;
        border: 2px solid var(--eod-light);
    }

    #project .image-and-text .rounded-frame::after {
        font-size: 60px;
        top: 13%;
        transform: translate(29%, -10%) rotate(-90deg);
    }

    .team .image-and-text .overlay {
        left: 0;
        transform: none;
    }

    #team .image-and-text .rounded-frame::after {
        font-size: 60px;
        top: 13%;
        transform: translate(-23%, -10%) rotate(90deg);
    }

    .team .image-and-text .socials {
        padding-left: 0;
        padding-right: 40px;
        margin-right: 20px;
        margin-left: 20px;
    }

    .connections .images {
        height: fit-content;
    }

    .connections .images .small-col {
        padding-right: 0;
    }

    .connections a.img-rounded {
        font-size: 14px;
        padding: 15px;
        line-height: 14px;
    }

    .connections .images>img {
        max-height: 360px;
    }

    .connections .small-col a.img-rounded img {
        max-width: 80%;
    }

    .application h2 {
        font-size: 46px;
    }

    .application .form .form-control,
    .application .form .form-select {
        padding: 20px 14px;
    }

    .application .form .form-floating>label {
        padding: 20px 14px;
    }

    .application .form .form-floating>.form-control:focus~label,
    .form-floating>.form-control:not(:placeholder-shown)~label,
    .form-floating>.form-select~label {
        opacity: .65;
        transform: scale(.85) translateY(-1rem) translateX(0rem);
    }

    .application .form .form-check .form-check-input {
        width: 3rem;
        height: 3rem;
    }

    .application h2 {
        margin-left: 0;
    }

    .footer .nav {
        text-align: center;
    }

    .footer .socials {
        padding: 0 30px;
        margin: 35px 0;
    }

    .footer .dl {
        justify-content: center;
    }
}

/* Spinner styles */
.loading-spinner {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    width: 40px; /* Size of the spinner */
    height: 40px; /* Size of the spinner */
    margin-top: -20px; /* Half the height to perfectly center */
    margin-left: -20px; /* Half the width to perfectly center */
    border: 4px solid rgba(0, 0, 0, 0.1); /* Light border */
    border-top: 4px solid #000; /* Dark border for the spin effect */
    border-radius: 50%; /* Round shape */
    animation: spin 1s linear infinite; /* Spin animation */
    z-index: 1000; /* Ensure it's above other elements */
}

/* Spin animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 576px) {
    .small-col {
        flex-direction: column;
    }

    a.d-flex {
        flex-direction: column;
    }

    .event-card {
        padding: 1rem;
    }
}