/****************** General ******************/
* {
  font-family: Jost;
}

:root {
    --container_width: 1320px;
}

a {
    text-decoration: none !important;
}

.page_loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.page_loader > span {
    width: 48px;
    height: 48px;
    border: 5px solid white;
    border-bottom-color: #21D0B3;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.5s linear infinite;
    z-index: 1001;
}

/* Custom Loader styles */
.loader {
    display: flex;
    place-content: center;
}

.loader >span {
    width: 48px;
    height: 48px;
    border: 5px solid #2F455C;
    border-bottom-color: #21D0B3;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.5s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*.loader >span {*/
/*    font-size: 10px;*/
/*    width: 1em;*/
/*    height: 1em;*/
/*    border-radius: 50%;*/
/*    position: relative;*/
/*    text-indent: -9999em;*/
/*    animation: mulShdSpin 1.1s infinite ease;*/
/*    transform: translateZ(0);*/
/*}*/
/*@keyframes mulShdSpin {*/
/*    0%,*/
/*    100% {*/
/*        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);*/
/*    }*/
/*    12.5% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);*/
/*    }*/
/*    25% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);*/
/*    }*/
/*    37.5% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);*/
/*    }*/
/*    50% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);*/
/*    }*/
/*    62.5% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);*/
/*    }*/
/*    75% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);*/
/*    }*/
/*    87.5% {*/
/*        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;*/
/*    }*/
/*}*/


.type-selection button {
    font-size: 20px;
    font-weight: 500;
}

/* Content wrapper class */
.wrapper {
    width: 100%;
    max-width: var(--container_width);
    margin-inline: auto;
    padding-inline: 1rem;
}
/* ===================== */

.strong-cyan-background {
  background-color: #21D0B2!important;
}

.waves {
    background-color: transparent;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -1px;
    left: 0px;
    right: 0;
    height:clamp(20rem, -0.6452rem + 43.0108vw, 80rem) ;
}

/*@media (min-aspect-ratio: 1366 / 1024){*/
    @media (min-aspect-ratio: 3/2) and (max-aspect-ratio: 3/1) and (max-width: 1024px){

        .waves {
            /*height: clamp(20rem, 13.0328rem + 32.7869vw, 95rem);*/
            /*height: clamp(20rem, 13.3115rem + 31.4754vw, 92rem);*/
            display: none;
        }
        .home-hero {
            padding-bottom: 2rem;
        }
    }

    @media (max-aspect-ratio: 800 / 900){
        .waves {
            height: -webkit-fill-available;
        }
        .home-header-content p {
            padding-bottom: 40px;
        }
    }

    @media screen and (aspect-ratio: 3/4) {
        .waves {
            display: none;
        }
        .home-header-content p {
            padding-bottom: 40px;
        }
    }

    @media (aspect-ratio: 4/3) {
        .waves {
            display: none;
        }
        .home-header-content p {
            padding-bottom: 40px;
        }
    }

    @media (max-aspect-ratio: 375 / 640) {
        .waves{
            height: 131px;
        }
    }

    .no_results_image {
        max-width: 300px;
    }

    .margin_bottom_custom {
        margin-bottom: 50px;
    }

    .p-yellow {
        color: #FFC93C;
        font-size: 2em;
        font-weight: 500;
        /*text-wrap: wrap; */
        width: 50%;
        line-height: 1.4em;
    }

    .p-white {
        color: #FFFFFF;
        font-size: 1.3em;
        font-weight: 400;
        /*text-wrap: wrap;*/
        width: 90%;
        max-width: 1200px;
    }

    h3 {
        margin-bottom: 0;
        text-transform: none;
    }

    p {
        margin: 0;
    }

    img {
        width: 100%;
        /*height: 100%;*/
    }



    .termsfeed-com---palette-light .cc-nb-okagree,
    .termsfeed-com---palette-light .cc-nb-reject {
        background-color: #21D0B2 !important;
        color: #444444 !important;
    }
    .termsfeed-com---palette-light .cc-nb-changep {
        color: #444444 !important;
    }

    .sidebar_container {
        padding: 25px;
    }

    @media  screen and (min-width: 992px) {
        .custom_padding_left {
            padding-left: calc(var(--bs-gutter-x) * 2.8);;
        }
    }

    /*************************************************/

    /******************** Pages **********************/

    /* Header */
    html.sticky-header-active #header .header-body.header-body-bottom-border {
        border-bottom: #21D0B2!important;
    }

    #header .header-body {
        border-bottom: none!important;
    }

    #header.sticky-header-active {
        background-color: #21D0B2!important;
    }

    #header .header-nav-main nav > ul > li > a {
        /*font-size: inherit!important;*/
        font-size: 16px;
    }

    #header .header-btn-collapse-nav {
        background: #3EA396;
    }

    #header .header-nav-main:before {
        background: #21D0B2;
    }


    .btn-strong-cyan {
        background-color: #21D0B2;
        border: 1px solid #000000;
        border-radius: 3px;
        /*text-wrap: nowrap;*/
        text-align: center;
        font-size: 16px;
        color:  #000000!important;
    }

    .btn-strong-cyan:hover {
        background-color: #3EA396;
        color: #FFFFFF!important;
    }

    #header .header-btns {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    #header .header-row {
        flex-wrap: nowrap;
    }

    #header .header-container {
        background-color: #21D0B2;
    }

    .dropdown-strong-cyan {
        background-color: #21D0B2;
        color: #FFFFFF!important;
    }

    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
        color: #FFFFFF;
        font-size: 0.83em;
        font-weight: 400;
        padding: 6px 18px 6px 18px;
        position: relative;
        text-transform: none;
        text-decoration: none;
        letter-spacing: -0.5px;
    }

    .nav-pills .nav-link:hover,
    .nav-pills .nav-link:focus {
        color: #FFFFFF !important;
        transition: all 0.2s!important;
    }

    .nav-pills .nav-link::before {
        content: ''!important;
        height: 2px!important;
        width: 80%!important;
        background: #FFFFFF!important;
        position: absolute!important;
        left: 10%!important;
        bottom: -8px!important;
        opacity: 0!important;
        transition: all 0.2s!important;
        pointer-events: none!important;
    }



    .dropdown-item-link {
        border-bottom: none!important;
        padding-top: 10px!important;
        padding-bottom: 10px!important;
    }

    .dropdown-item-link:hover {
        background-color: #3EA396!important;
    }

    #header .header-nav-main nav > ul > li > a {
        color: #000000;
    }

    #header .header-nav-main nav > ul > li > a.active,
    #header .header-nav-main nav > ul > li > a.active:hover,
    #header .header-nav-main nav > ul > li > a.active:focus {
        background: none;
        color: #ffffff;
    }

    .header-btns .active {
        color: #ffffff !important;
    }

    @media(max-width: 1370px) {
        #header .header-nav-main {
            position: absolute;
            background: transparent;
            width: 100%;
            top: 100%;
            left: 50%;
            transform: translate3d(-50%, 0, 0);
        }
    }

    @media(min-width: 1370px) {
        .nav-pills .nav-link:hover::before,
        .nav-pills .nav-link:focus:before {
            opacity: 1!important;
        }
    }

    /* Footer */
    #footer {
        background-color: #F0F0F0!important;
        border-top: none!important;
    }

    .footer-logo > img {
        mix-blend-mode: multiply;
    }

    #footer .form-group {
        margin-bottom: 0;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 1fr;
        gap:2rem;
    }

    @media screen and (min-width: 820px){
        .footer-content {
            grid-template-columns: 350px 1fr;
        }
    }

    @media screen and (min-width: 1200px){
        .footer-content {
            grid-template-columns:350px 1fr 350px;
        }
    }

    .footer-newsletter {
        background-color: #3EA396;
        width: 80%;
        max-width: 1056px;
        /*position: absolute;*/
        /*left: 10%;*/
        /*top: -50px;*/
        margin-top: -50px;
        margin-left: auto;
        margin-right: auto;
        color: #FFFFFF;
    }

    .email-newsletter {
        width: 300px!important;
    }

    .consent-checkbox {
        width: 18px;
        height: 18px;
    }

    .btn-newsletter {
        border: none;
        border-radius: 0px;
        color: #FFFFFF;
        background-color: #2F455C;
    }

    .btn-newsletter:hover{
        color: #2F455C;
        background-color: #FFFFFF ;
    }

    .footer-logo-socials {
        width: 100%;
    }

    .footer-logo {
        width: 100%;
        height: auto;
    }

    .social-icons {
        color: #3EA396;
        font-size: 2.8em;
        /*margin: 20px 30px;*/
    }

    .partners-img {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.5rem;
    }

    .footer-links a{
        color: #0a0c0d;
        font-size: 1.15rem;
    }

    .footer-links li{
        list-style: none;
        margin-bottom: 0.75rem;
        margin-left: 0.25rem;
    }

    .footer-links ul{
        margin: 0;
        padding: 0;
    }

    .footer-links a:hover {
        text-decoration: none !important;
        color: #0cc485 !important;
    }

    .footer-logo-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    @media(max-width: 1100px) {
        .footer-newsletter {
            background-color: #3EA396;
            width: 100%;
            position: relative;
            left: 0;
            top: 0;
            color: #FFFFFF;
        }
    }

    /* Home Page */
    .home-header {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        text-align: center;
    }

    .home-hero  {
        background-image: url('/img/home-background.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        min-height: 100vh;
        min-height: 100dvh;
        position: relative;
    }

    @media screen and (max-width: 1360px){
        .home-header,
        .home-hero
        {
            min-height: calc(100vh - 100px);
            min-height: calc(100dvh - 100px);
        }
    }

@media screen and (max-width: 745px){
    .home-header,
    .home-hero
    {
        min-height: calc(100vh - 200px);
        min-height: calc(100dvh - 200px);
    }
}

@media screen and (max-width: 380px){
    .home-header,
    .home-hero
    {
        min-height: calc(100vh - 0px);
        min-height: calc(100dvh - 0px);
    }
}

    .home-header-content{
        padding-top: 100px;
        height: 100%;
        position: relative;
        z-index: 1;
    }

    .home-header-content > img {
        position: absolute;
        top: 2rem;
        right: 0px;
        max-width: 300px;
        z-index: -1;
    }

    .home-header-content  h1 {
        font-weight: 600;
        text-align: left;
        color: #FFFFFF;
        padding-top: 4rem;
        margin-bottom: 2rem;
        max-width: 700px;
    }

    .home-header-content p {
        font-weight: 400;
        color: #FFFFFF;
        text-align: left;
        max-width: 700px;
    }

    @media (min-aspect-ratio: 2/1) {
        .home-header-content  h1 {
            padding-top: 1rem;
        }
        .home-header-content p {
            max-width: 1300px;
        }
    }

    .homepage-content {
        margin: 3rem 0 6rem 0;
    }

    .homepage-content-column {
        display: flex;
        flex-direction: column;
    }

    .homepage-content-column a,
    .home_page_dropdown {
        color: white;
        background: #21D0B2;
        padding: 1rem 2rem;
        align-self: end;
    }

    .custom_dropdown.show {
        display: flex;
    }

    .first_child {
        width: 100%;
        border-right: 0.5px solid black;
    }

    .second_child {
        width: 100%;
    }

    .homepage-content-column .homepage-content-info{
        flex: 1;
    }

    .homepage-content a:hover{
        text-decoration: none;
    }

    .homepage-content section {
        display: flex;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .homepage-content section:nth-of-type(even){
        flex-direction: row-reverse;
    }

    .homepage-content section>*{
        flex: 1;
    }

    .homepage-content .homepage-image-container {
        aspect-ratio: 16/9;
    }

    .homepage-content .homepage-image-container img {
        aspect-ratio: 16/9;
    }

    .homepage-content .info-subtitle {
        color: #21D0B2;
        margin-bottom: 0.5em;
    }

    .homepage-content .info-title {
        color: #FFC93C;
        margin-bottom: 0.75em;
    }

    .homepage-content .info-description {
        color: black;
        margin-bottom: 1em;
        font-weight: bold;
    }

    .homepage-content section:nth-of-type(even) .homepage-content-info{
        text-align: left;
    }


    .homepage-callToAction {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 2em;
    }

    .homepage-callToAction > p{
        max-width: 600px;
    }

    .homepage-callToAction-container {
        padding: 8rem 0;
        background: #FFC93C;
    }

    .homepage-callToAction > p{
        color: #2F455C;
    }


    .homepage-callToAction a{
        font-size: 2em;
        color: white;
        background: #21D0B2;
        padding: 1rem 2rem;
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    @media screen and (max-width: 768px){
        .homepage-content section:nth-of-type(odd),
        .homepage-content section:nth-of-type(even)
        {
            flex-direction: column;
        }
    }



    @media screen and (min-width: 900px) {
        .home-header-content > img {
            top: 9rem;
            right: 0px;
            left: unset;
            z-index: 2;

        }
    }

    /* Impact Assessment */
    .impact-assessment-header {
        position: relative;
    }

    .impact-assessment-description {
        background-image: url('/img/impact-assessment/Group 213.png');
        background-position: center;
        background-size: cover;
        height: 100vh;
        height: 100dvh;
        position: relative;
    }

    @media screen and (max-width: 1360px) {
        .impact-assessment-description {
            height: calc(100vh - 110px);
            height: calc(100dvh - 110px);
        }
    }

    .impact-assessment-description h1 {
        color: #FFFFFF;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 1px;
        word-break: break-word;
        margin-top: 56px;
    }

    .impact-assessment-section-1 {
        padding: 60px 100px;
        margin-bottom: 14rem;
    }

    .activities-container {
        width: 100%;
    }

    .activity-steps {
        position: relative;
    }

    .activity-steps-section-1 {
        position: relative;
        z-index: 100;
    }

    .activity-steps-section-2 {
        top: 7rem;
        position: relative;
        z-index: 100;
    }

    .activity-step {
        margin-bottom: 7rem;
    }

    .activity-step:last-child {
        margin-bottom: 0px;
    }

    .activity-step-title {
        text-wrap: wrap;
    }

    .cyan-square {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        width: 140px;
        background-color: #21D0B2;
        margin-right: 15px;
        padding: 15px 8px;
    }

    .cyan-square > h3 {
        color: #FFFFFF;
        text-align: center;
        vertical-align: middle;
    }

    .cyan-circle {
        width: 80px;
        height: 80px;
        border-radius: 100px;
        background-color: #21D0B2;
        margin-right: 45px;
        margin-left: 35px;
    }

    .vertical-line-yellow {
        position: absolute;
        height: 100%;
        background-color: #FFC93C;
        width: 5px;
        left: 75px;
        top: 0;
        z-index: 90;
    }

    .vertical-dotted-line-yellow {
        position: absolute;
        height: 7rem;
        border-left: 5px dotted #FFC93C;
        left: 75px;
        top: 0;
    }

    .impact-assessment-section-2 {
        padding-bottom: 70px;
    }

    .impact-assessment-section-2-content {
        background-image: url('/img/impact-assessment/Group 216.png');
        background-position: center;
        background-size: cover;
        padding-block: 10vh;
    }

    @media(max-width: 1100px) {
        .impact-assessment-section-1 {
            padding-left: 30px;
            padding-right: 30px;
        }

        .activity-step-title {
            width: 400px;
            line-height: 1em;
        }
        .p-yellow {
            width: 60%;
        }
    }

    @media(max-width: 610px) {

        .impact-assessment-description h1 {
            font-weight: 600;
            line-height: 1em;
        }

        .impact-assessment-section-1 {
            /*height: 100vh;*/
            padding-left: 20px;
            padding-right: 20px;
        }

        .activity-step-title {
            width: 180px;
            line-height: 1em;
        }

        .vertical-line-yellow {
            height: 90%;
        }

        .vertical-dotted-line-yellow {
            top: -50px;
            height: 200px;
        }
        .p-yellow {
            width: 90%;
        }
    }

    /* BM Wizard */
    .bm-wizard-description {
        background-image: url('/img/bm-wizard/Group95.png');
        background-position: center;
        background-size: cover;
        height: 68vh;
        height: 68dvh;
        position: relative;
    }

    @media screen and (max-width: 1360px) {
        .bm-wizard-description {
            height: calc(100vh - 110px);
            height: calc(100dvh - 110px);
        }
    }

    .bm-wizard-description h1 {
        color: #FFFFFF;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 1px;
        word-break: break-word;
        margin-top: 56px;
    }

    .bm-p-yellow {
        color: #FFC93C;
        font-size: 1.563em;
        font-weight: 500;
        line-height: 1.413em;
    }

    .bm-p-tourgoise {
        color: #21D0B2;
        font-size: 1.25em;
        font-weight: 500;
        line-height:  1.813em;
    }

    .bm-p-20 {
        font-size: 1.25em;
        line-height: 1.813em;
    }

    .bm-p-25 {
        font-size: 1.563em;
        line-height: 1.413em;
    }
    
    .custom-hr {
        border-top: 1px solid #B9B9B9;
        width: 100%;
    }
    
    .fw-500 {
        font-weight: 500;
    }

    .start-button {
        color: white;
        background: #21D0B2;
        padding: 1rem 2rem;
        font-size: 1.255em;
        border: none;
    }

    .start-button:hover {
        background: #FFC93C;
        color: white;
    }

    .simple-button {
        color: black;
        background-color: white;
        border: 1px solid #000000;
        padding: 1rem 2rem;
        font-size: 1.255em;
    }

    .step_indicator_container {
        height: 20px;
        background: #E5E5E5;
        border-radius: 10px;
    }

    .form-check-input:checked {
        background-color: #21D0B2 !important;
        border-color: #21D0B2 !important;
    }

    .bm-info-container {
        color: #2F455C;
        background-color: #00B79E2E;
        border: 1px dashed #00B79E;
        padding-top: 22px;
        padding-bottom: 21px;
    }

    @media screen and (min-width: 768px) {
        .col-md-4-custom {
            flex: 0 0 auto;
            width: 31%;
        }
    }
    
    .layer-card-completed {
        border: 1px solid #FFC93C;
        background: #FFFDF9 0% 0% no-repeat padding-box;
    }

    .yellow-text {
        color: #FFC93C;
    }

    .border-radius0 {
        border-radius: 0px !important;
    }

    .canvas-section-title {
        font-weight: 500;
        color: black;
        padding-top: 11px;
        padding-bottom: 14px;
        background-color: #FFC93C33;
        border: 1px solid #FFC93C
    }

    .canvas-grid {
        display: grid;
        margin: 0 auto;
        gap: 10px;
        padding: 10px;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(6, 1fr);
    }

    .canvas-item {
        background: white;
        padding: 20px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 8px;
        transition: background-color 0.2s ease;
        border: 2px dashed #00B79E;
    }

    .canvas-item:hover {
        background-color: #f3f3f3;
    }

    .canvas-item .box-title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .canvas-section-title {
        font-weight: 700;
        color: #333;
    }

    ul {
        list-style: disc;
        padding-left: 20px;
        margin-bottom: 0;
    }

    ul li {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .mobile-canvas .canvas-item {
        width: 100%;
        min-height: 200px;
    }


    /* Market Concentration Calculator */
    .grey_background {
        background-color: #F9F9F9;
    }

    .market-input {
        flex: 1;
        background-color: white;
        border: 1px solid #21D0B2;
        padding: 1.125rem 0.813rem ;
        font-size: 1em;
    }

    .delete-button {
        border: 1px solid #21D0B2;
        padding: 1.125rem 2rem ;
        font-size: 1em;
    }

    .mcc-header-image {
        position: absolute;
        top: 2rem;
        right: 0px;
        max-width: 695px;
        z-index: -1;
    }

    @media screen and (min-width: 900px) {
        .mcc-header-image {
            top: 12rem;
            right: 0px;
            left: unset;
            z-index: 2;

        }
    }


    /* Custom tooltip styling */
    .custom-tooltip .tooltip-inner {
        background-color: #EFEFEF !important; 
        color: #7A7A7A; 
        font-size: 14px; 
        max-width: 300px; 
        padding: 12px 16px; 
        border: 1px solid #C2C2C2;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }

    .custom-tooltip .tooltip-arrow::before {
        border-top-color: #EFEFEF; 
    }

    .text-size-1 {
        font-size: 1em !important;
    }

    .disabled-start-button {
        color: white;
        background: #21d0b3a9;
        padding: 1rem 2rem;
        font-size: 1em;
        border: none;
    }

    .restart-button {
        color: black;
        background: white;
        padding: 1rem 2rem;
        border: 1px solid #21D0B2;
    }

    .flex-1 {
        flex: 1;
    }

    .results-container {
        background-color: #FBFBFB;
    }

    @media screen and  (min-width: 768px) {
        .col-md-6-custom {
            flex: 0 0 auto;
            width: 49%;
        }
    }

    /* Drone Technologies */
    .background-graphic-container {
        position: relative;
        bottom: 0px;
        width: 100%;
    }

    .background-graphic-1 {
        width: 600px;
        position: absolute;
        top: -140px;
        right: -200px;
    }

    .background-graphic-2 {
        width: 600px;
        position: absolute;
        top: -240px;
        right: -180px;
    }

    /* Category Tiles */
    .category-tile {
        /*width: 145px;*/
        /*height: 188px;*/
        width: 18%;
        min-width: 145px;
        position: relative;
        text-align: center;
        margin: 10px auto;
        cursor: pointer;
    }

.category-tile.first-tile {
    margin-left: 0;
}

.category-tile.last-tile {
    margin-right: 0;
}


.category-tile img {
        position: relative;
        left:0;
        top:0;
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        opacity: 1;
        transition: .2s ease;
    }

    .category-tile.active {
        background-color: #FFC93C;
    }

    .category-tile.active img{
        opacity: 0;
    }

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

        .category-tile {
            min-width: 135px;
        }
        .category-tile img {
            height: 200px;
        }
    }

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

        .category-tile {
            min-width: 128px;
        }
        .category-tile img {
            height: 178px;
        }
    }

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

        .category-tile {
            min-width: 110px;
            margin: 6px;
        }
        .category-tile img {
            height: 87px;
        }
    }

    .category-tile p {
        max-width: 210px;
        color: #FFFFFF;
        position: absolute;
        font-size: 1.3em;
        font-weight: 500;
        text-wrap: wrap;
        z-index:10;
    }

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        opacity: 0;
        transition: .2s ease;
        background-color: #FFC93C;
        /*cursor: pointer;*/
        z-index: 9;
    }

    .overlay::before {
        background: none;
    }

    .category-tile:hover img {
        opacity: 0;
    }

    .category-tile:hover .overlay {
        opacity: 1;
    }

    /* Sidebar */
    .sidebar {
        padding: 10px 30px;
    }

    .filter-square-cyan {
        width: auto;
        padding: 6px 10px;
        color: #7A7A7A!important;
        background-color: #FFFFFF;
        margin: 4px 10px;
        vertical-align: middle;
    }

    .filter-square-cyan:hover,
    .filter-square-cyan:active,
    .filter-square-cyan:focus {
        background-color: #21D0B2;
    }

    .filter-square-cyan p {
        color: #7A7A7A!important;
        font-size: 1.1em;
        font-weight: 500;
        margin: 0;
    }

    .filter-square-cyan:hover p,
    .filter-square-cyan:active p,
    .filter-square-cyan:focus p {
        color: #FFFFFF!important;
    }

    .sidebar_container {
        background-color: #F9F9F9;
    }

    .sidebar-search-icon {
        margin-left: -42px;
    }

    /* Collapse Details */
    .drone-details-card {
        position: relative;
        background-color: #FFFFFF;
        z-index: 1;
    }

    .platforms_container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(360px,100%), 1fr));
        gap: 1rem;
    }

    .platforms_container > div {
        width: 100% !important;
    }

    .drone-details-collapse {
        background-color: #FFFFFF;
        height: 100%;
        width: 100%;
        padding: 10px 10px;
        border: 1px solid;
    }

    .drone-details {
        width: 100%;
        background-color: #FFFFFF;
        box-shadow: 0px 25px 25px #00000029;
        border: 1px solid;
        border-top: none;
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 30;
    }

    .drone-details-table-wrapper {
        padding: 20px;
    }

    .collapse-trigger,
    .collapse-trigger:active,
    .collapse-trigger:hover,
    .collapse-trigger:focus {
        text-decoration: none!important;
        color: #000000;
        font-size: 1.4em;
    }

    .collapse-trigger.collapsed i {
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }

    .collapse-trigger:not(.collapsed) i {
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
        -ms-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

    .collapse-trigger:not(.collapsed) .drone-details-collapse {
        border-bottom: 0px solid;
    }

    .collapse-trigger:not(.collapsed) .drone-details {
        border-top: none;
    }

    .drone-details-table, .drone-details-table td, .drone-details-table th {
        border: 1px solid;
    }

    .drone-details-table {
        width: 100%;
        border-collapse: collapse;
    }

    .drone-details-table td, .drone-details-table th {
        height: 30px;
        padding: 8px;
    }

    /* Sidebar Filters */
    .filters {
        margin-bottom: 40px;
    }

    .filter-group {
        margin: 10px 0px 20px 0px;
        max-height: 470px;
        overflow-y: auto;

    }

    .filter-group::-webkit-scrollbar {
        width: 8px; /* Set the width of the scrollbar */
    }

    .filter-group::-webkit-scrollbar-thumb {
        background-color: #c1c1c1; /* Color of the scrollbar thumb */
        border-radius: 4px; /* Radius of the scrollbar thumb */
    }

    .filter-group::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color of the scrollbar track */
        border-radius: 4px; /* Radius of the scrollbar track */
    }

    .filter-group-label {
        padding-left: 10px;
        font-size: 1.3em;
    }

    /* Sidebar Filter Component */
    .sidebar-filter {
        border: 1px solid #707070;
        margin: 5px;
        cursor: pointer;
        /*display: none;*/
    }

    .sidebar-filter.active .empty-square,
    .sidebar-filter.active .filter-name {
        background-color: #FFC93C;
    }

    .sidebar-filter:hover .empty-square,
    .sidebar-filter:active .empty-square,
    .sidebar-filter:focus .empty-square,
    .sidebar-filter:hover .filter-name,
    .sidebar-filter:active .filter-name,
    .sidebar-filter:focus .filter-name {
        background-color: #FFC93C;
    }

    .empty-square {
        border-right: 1px solid #707070;
        width: 40px;
        display: none;
    }

    .filter-name {
        flex: 1;
        padding: 0.75rem;
        background: #F9F9F9;
    }

    .filter-name p {
        /*font-weight: 500;*/
        font-size: 14px;
    }

    .toggle-filters-button {
        width: fit-content;
        font-size: 1.1em;
        font-weight: 500;
        display: none;
        background-color: #3EA396;
        margin-top: 15px;
        margin-bottom: 20px;
        color: #fff;
    }

    @media (max-width: 991px) {
        .toggle-filters-button {
            display: block;
        }

        .filters-container {
            display: none;
        }
    }

    /* Dataset Card */
    .dataset-card {
        border: 1px solid #707070;
        z-index: 1;
    }

    .dataset-card:hover {
        background-color: #21D0B2;
    }

    .dataset-card p {
        font-size: 1.2em;
        font-weight: 500;
        color: #000000!important;
        /*max-width: 90%;*/
        overflow-wrap: anywhere;
    }

    .dataset_date {
        font-weight: 300 !important;
        font-style: italic;
    }

    .dataset-card-img {
        width: 40px;
        height: 40px;
    }

    /* Use Cases */

    .use-cases-container {
        background-color: #F9F9F9;
        border-radius: 10px;
        width: 100%;
        max-width: 600px;
    }

    .use-cases-list {
        position: relative;
    }

    .use-cases {
        position: relative;
        z-index: 100;
    }

    .use-cases>a:hover {
        text-decoration: none;
    }

    .use-case {
        margin: 40px;
    }

    .use-case-details {
        width: 100%;
        /*max-width: 500px;*/
    }

    .use-case:hover .use-case-details h3,
    .marker-mouseover .use-case-details h3,
    .use-case:hover .use-case-details h4,
    .marker-mouseover .use-case-details h4,
    .use-case:hover .use-case-details h5,
    .marker-mouseover .use-case-details h5
    {
        color: #FFC93C;
    }

    .use-case:hover .square-plus,
    .marker-mouseover .square-plus{
        background-color: #FFC93C;
    }

    .use-case-details h3,
    .use-case-details h4,
    .use-case-details h5
    {
        /*font-size: 1.8em;*/
        font-weight: 600;
        margin-bottom: 10px;
        text-align: left;
    }

    .use-case-details p {
        /*font-size: 1.1em;*/
        color: #000000;
        text-align: start;
    }

    .square-plus {
        background-color: #21D0B2;
        height: 40px;
        width: 40px;
        padding: 0;
        align-items: center;
        vertical-align: middle;
        margin-right: 20px;
    }

    .cyan-square-plus i {
        font-size: 2.4em !important;
    }

    .use-case-yellow-line {
        position: absolute;
        background-color: #FFC93C;
        width: 2px;
        height: 90%;
        top: 0px;
        left: 59px;
        z-index: 90;
    }

    .use-cases-map-container {
        margin: 40px;
    }

    .use-cases-map {
        position: relative;
        width: 700px;
        top: 0;
        left: 0;
    }

    /* Markers */
    .marker {
        position: absolute;
        transition: all 0.3s;
        width: 65px;
        overflow: hidden;
    }

    .marker:hover,
    .usecase-mouseover{
        overflow: unset;
    }

    .marker:hover,
    .usecase-mouseover  {
        transform: scale(1.4);
        filter: drop-shadow(0px 7px 2px rgb(0 0 0 / 0.4));
        z-index: 30;
    }

    /*.marker-greece{*/
    /*    top: 275px;*/
    /*    left: 481px;*/
    /*}*/

    /*.marker-lithuania {*/
    /*    top: 48px;*/
    /*    left: 483px;*/
    /*}*/

    /*.marker-north-macedonia {*/
    /*    top: 228px;*/
    /*    left: 437px;*/
    /*}*/

    /*.marker-france {*/
    /*    top: 136px;*/
    /*    left: 206px;*/
    /*}*/

    /*.marker-spain{*/
    /*    top: 209px;*/
    /*    left: 69px;*/
    /*}*/


.use-cases-map >div:nth-of-type(2){
    top: 275px;
    left: 481px;
}

.use-cases-map >div:nth-of-type(4) {
    top: 48px;
    left: 483px;
}

.use-cases-map >div:nth-of-type(5) {
    top: 228px;
    left: 437px;
}

.use-cases-map >div:nth-of-type(3) {
    top: 136px;
    left: 206px;
}

.use-cases-map >div:nth-of-type(1){
    top: 209px;
    left: 69px;
}

    .marker-tooltip {
        position: absolute;
        top: 0px;
        left: 32px;
        padding: 14px;
        min-width: 180px;
        /*max-height: 80px;*/
        width: fit-content;
        border-radius: 10px;
        background-color: #FFFFFF;
        opacity: 0;
    }

    .marker-tooltip p {
        font-size: 1em!important;
        font-weight: 500;
        color: #000000;
        line-height: 1.1em;
        text-align: center;
        padding-left: 20px;
    }

    .marker:hover .marker-tooltip,
    .usecase-mouseover .marker-tooltip {
        opacity: 1;
        z-index: -1;
    }

    .use-cases-info {
        background-image: url('/img/wave-drone-background.png');
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        place-content: center;
        padding: 18rem 1rem 10rem 1rem;
    }

    @media screen and (min-width: 1920px) {
        .use-cases-info {
            padding: 28em 0rem 15em 0rem ;
        }
    }



    .use-cases-stats-container {
        position: relative;
        top: 0px;
        left: 0;
        height: 100%;
        z-index: 50;
    }

    .use-cases-stats {
        background-color: #FFFFFF;
        border-radius: 10px;
        padding:3rem 1rem;
    }


    .stat-item {
        flex: 1;
        align-self: stretch;
        padding-inline: 1rem;
    }

    .stat-item:not(:last-child) {
        border-right: 1px solid #d1d1d1;
    }

    .stat-item h3 {
        color: #3EA396;
        font-size: 1.8em;
        font-weight: 500;
    }

    .stat-item p {
        color: #000000;
        font-size: 1.2em;
        font-weight: 500;
        text-wrap: wrap!important;
        text-align: center;
        line-height: 1.2em;
    }


    @media screen and (max-width: 680px){
        .use-cases-stats {
            flex-direction: column;
        }
        .stat-item:not(:last-child) {
            border-bottom: 1px solid #d1d1d1;
            border-right: 0px solid #d1d1d1;
        }

        .stat-item{
            justify-content: center !important;
            padding-block: 2rem;
        }

    }

    @media(max-width: 1350px) {
        .wave {
            top: -50px;
        }
    }

    @media(max-width: 740px) {
        .use-case {
            margin: 10px 10px 2rem 10px;
        }

        .use-case-yellow-line {
            left: 30px;
        }

        .use-case-details h3 {
            font-size: 1.6em;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .use-case-details p {
            font-size: 1.0em;
            color: #000000;
            max-width: 200px;
        }

        .wave {
            top: -40px;
        }

        .stat-item:last-child {
            margin-left: 10px;
            margin-right: 10px;
        }

        .stat-item h3 {
            font-size: 1.4em;
        }

        .stat-item p {
            font-size: 0.9em;
            line-height: 1.1em;
        }
    }

    /* common rules  */

    .text-black{
        color: black !important;
    }


    /* login, register, contact, profile pages styles */
    .login-header-content, .contact-hero-content, .profile-hero-content  {
        background-image: url('/img/usecases-background.png');
        background-position: center;
        background-size: cover;
        margin: 0;
        padding: clamp(4rem, 2.545rem + 7.273vw, 20rem) 0 clamp(15rem, 11.818rem + 15.909vw, 50rem) 0;
    }

    .login-header, .register-hero, .contact-hero, .profile-hero {
        position: relative;
    }

    .login-header h1, .contact-hero h1, .profile-hero h1  {
        text-align: center;
        font-weight: 500;
        color: white;
    }

    .login-container, .register-container, .contact-container, .profile-container {
        /*margin: clamp(2rem, 3.091rem + -5.455vw, -10rem) auto 8rem auto;*/
        margin-inside: auto;
        margin-top: calc(clamp(0rem, -0.909rem + 4.545vw, 10rem) * -1 );
        margin-bottom: 8rem;
        position: relative;
    }

    .login-container > h2,
    .register-container >h2,
    .contact-container > h2
    {
        text-align: center;
    }

    .contact-container > h2 {
        max-width: 700px;
        margin-inline: auto;
    }

    .login-container form,
    .register-container form,
    .contact-container form,
    .profile-info-container
    {
        width: 100%;
        max-width: 700px;
        margin-inline: auto;
    }

    .profile-info-container {
        margin-bottom: 6rem;
    }

    .profile-info-container h2 {
        margin-bottom: 1rem;
    }

    .profile-info-container button:focus-visible{
        outline: none;
        border: 1px solid #0cc485;
        color: #0cc485;
        background: white;
    }

    .login-container .form-input,
    .register-container .form-input,
    .contact-container .form-input
    {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .login-container .form-input input,
    .register-container .form-input input,
    .contact-container .form-input input
    {
        outline: none;
        border: 1px solid lightgray;
        border-radius: 4px;
        padding: 0.75em 0.5em;
    }

    .login-container .form-input label,
    .register-container .form-input label,
    .contact-container .form-input label
    {
        font-size: 1.15em;
    }

    .contact-container .form-input textarea {
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid lightgray;
    }

    .form-input > p > a {
        color: #0cc485;
    }

    .form-input > p > a:focus,
    .form-input > p > a:active {
        text-decoration: underline;
    }

    .login-container a:focus,
    .login-container a:active,
    .register-form-container a:focus,
    .register-form-container a:active
    {
        text-decoration: underline;
    }

    .login-container  a,
    .register-form-container  a
    {
        color: #0cc485;
    }

    .login-container .form-input input,
    .login-container .form-input input:focus,
    .login-container .form-input input:active,
    .register-container .form-input input,
    .register-container .form-input input:focus,
    .register-container .form-input input:active,
    .contact-container .form-input input,
    .contact-container .form-input input:focus,
    .contact-container .form-input input:active
    {
        background-color: inherit !important;
    }

    .login-container .form-input input:focus,
    .login-container .form-input input:active,
    .register-container .form-input input:focus,
    .register-container .form-input input:active,
    .contact-container .form-input input:focus,
    .contact-container .form-input input:active
    {
        border: 2px solid dimgrey;
    }

    .login-container form button,
    .register-container form button,
    .contact-container form button,
    .profile-delete-account
    {
        width: 100%;
        max-width: 200px;
        padding: 0.75em 0.5em;
        border: 1px solid #21D0B2;
        color: white;
        background: #21D0B2;
        border-radius: 4px;
        transition: all 0.2s ease-in-out;
    }


    .login-container form button:hover,
    .login-container form button:focus,
    .register-container form button:hover,
    .register-container form button:focus,
    .contact-container form button:hover,
    .contact-container form button:focus,
    .profile-info-container form button:hover,
    .profile-info-container form button:focus
    {
        outline: none;
        border: 1px solid #21D0B2;
        color: #21D0B2;
        background: white;
    }


    button.profile-delete-account {
        background: red !important;
        border: 1px solid red !important;
    }

    button.profile-delete-account:hover,
    button.profile-delete-account:focus,
    button.profile-delete-account:focus-visible {
        outline: none !important;
        border: 1px solid red !important;
        color: red !important;
        background: white !important;
    }

    .profile-logout-btn {
        border: 0;
        padding: 1rem 1.5rem;
        border-radius: 4px;
        color: #0a0c0d;
        font-size: 1.5em;
        font-weight: 500;
        background-color: #21d0b2;
    }

    .profile-logout-btn:hover,
    .profile-logout-btn:focus {
        text-decoration: none !important;
        color: #0cc485;
        border: 1px solid #0cc485;
        background: white;
    }


    .login-rememberMe {
        display:flex;
        gap: 0.5rem;
        align-items: center;
    }

    .login-rememberMe span {
        line-height: 1;
    }

    .login-rememberMe input:focus {
        outline: 2px solid #21D0B2;
        outline-offset: -2px;
    }

    .login-rememberMe input:checked{
        outline: none;
    }





    /* use cases */

    .usecase-header-content  {
        background-image: url('/img/usecases-background.png');
        background-position: center;
        background-size: cover;
        margin: 0;
        min-height: calc(100vh - 100px);
        min-height: calc(100dvh - 100px);
    }

    @media screen and (min-width: 1280px) {
        .usecase-header-content {
            /*height: calc(100vh - 105px);*/
        }
    }

    .header-column1{
        margin-top: 2rem;
    }

    @media screen and (min-width: 992px){
        .header-column1{
            margin-right: 2rem;
            margin-top: 0;
            min-width: 400px;
        }
    }

    .header-column1 .card-body{
        padding-top: 0% ;
        padding-bottom: 0% !important;
    }

    .header-column1 .card-text{
        text-align: start;
    }

    .use-case-about {
        padding: 30px 0px;
        /*border: 1px solid #21D0B3 !important;*/
        border-radius: 4px;
        z-index: 2;
    }

    .about{
        position: relative;
        z-index: 10!important;
    }

    .hero-section-titles {
        font-weight: 500;
        text-align: start;
        margin-bottom: 1rem !important;
        /*line-height: 1.25em;*/
    }

    .header-column2{
        z-index: 222;
    }

    .header-column2 div{
        width: 100%;
    }

    .header-column2 .title{
        text-align: start;
        font-size: 64px;
        line-height: 1;
        /*letter-spacing: -2px;*/
        font-weight: bold;
        color: white;
    }

    .header-column2 .text p{
        text-align: start;
        color: #FFFFFF;
        font-size: 1.3em;
        font-weight: 400;
    }

    .drones-container{
        margin-block: 10rem;
    }

    .drones-container > div:not(:last-child) {
        margin-bottom: 2rem;
    }

    @media screen and (min-width: 1024px){
        .header-column1{
            width: 30%;
        }

        .header-column2 {
            width: 70%;
        }
    }




    .cyan-circle-small {
        width: 40px;
        height: 40px;
        border-radius: 100px;
        background-color: #21D0B2;
        margin-right: 15px;
        margin-left: 35px;
    }

    .about-card {
        position:relative;
        padding-top: 30px;
        padding-right: 30px;
        z-index: 40;
        background-color: transparent;
    }

    .usecase-header-line{
        position: absolute;
        width: 2px;
        height: 100%;
        background-color: #FFC93C;
        top: 0;
        left: 54px;
        z-index: 20;
    }

    .rhombus-background-left{
        position: absolute;
        top: -1000px;
        left: -550px;
    }

    .rhombus-background-right{
        position: absolute;
        top: -1000px;
        right: -550px;
    }

    .rhombus-background-center-left{
        position: absolute;
        top: -700px;
        left: 700px;
        width: 15%;
    }

    .rhombus-background-center-rigth{
        position: absolute;
        top: -500px;
        right: 700px;
        width: 15%;
    }

    .rhombus-background-center-left-down{
        position: absolute;
        top: -550px;
        left: -220px;
        width: 25%;
    }

    .card-section{
        display: flex;
        padding-block: clamp(2rem, 0.924rem + 5.063vw, 7rem);
        gap:0.75rem;
    }

    .card-section .item{
        flex: 1;
        border-radius: 10px;
        border-width: 2px;
        border-color: #21D0B2;
        /*width: 300px;*/
        /*height: 300px;*/
    }


    .card-section .item:hover{
        border-color: #FFC93C;
    }

    .card-section .card-title{
        color: #21D0B2;
    }

    .card-section .card-text{
        font-size: 2em;
        font-weight: bold;
        color: black;
    }

    @media (max-width: 990px) {
        .card-section .card-text{
            font-size: 1em;
        }
    }

    .card-image{
        width: 25%;
    }

    html .bg-color-primary,
    html .bg-primary {
        background-color: #FFC93C !important;
    }

    html .bg-color-hover-primary:hover,
    html .bg-hover-primary:hover {
        background-color: #FFC93C !important;
    }

    html .bg-color-after-primary:after {
        background-color: #FFC93C !important;
    }

    html .bg-color-hover-after-primary:hover::after {
        background-color: #FFC93C !important;
    }

    html .bg-color-before-primary:before {
        background-color: #FFC93C !important;
    }

    html .bg-color-hover-before-primary:hover::before {
        background-color: #FFC93C !important;
    }

    html .bg-color-hover-primary:hover .card-text{
        color: white;
    }

    .resultnum{
        color: #21D0B2;
        font-size: 2rem !important;
        margin: 1rem 0 !important;
    }
    .user-card:hover .category-tiles{
        color: #21D0B2;
    }

    .usecases-cards{
        padding-block: 4rem;
    }

    .user-card{
        width: 100%;
        margin: 10px;
        text-align: center;
        border: 0px;
        border-radius: 50px;
        background-color: #FBFBFB;
    }

    @media screen and (min-width: 768px) {
        .user-card {
            width :40%
        }
    }

    .user-card .card-title{
        color: #daaf38;
    }

    .user-card:hover {
        background-color: white;
        z-index: 100;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .user-card:hover .card-title{
        color: #21D0B2;
    }

    .user-card .card-text{
        color: black;
    }



    @media (max-width: 1200px) {
        .user-card .card-text{
            font-size: 14px;
        }
    }

    .category-tiles{
        color: #FFC93C;
        font-size: 32px;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .usecases .title{
        color: #FFC93C;
        margin-bottom: 2rem !important;
    }

    .technology-images{
        position: relative;
        width: 400px;
        height: 400px;
    }

    .technology-images .image{
        border-radius: 30px;
    }

    .technology-images .img1 {
        width: 60%;
        height: 60%;
        position: absolute;
        bottom: 40%;
        left: 55%;
        z-index: 100;
    }

    .technology-images .img2 {
        width: 60%;
        height: 60%;
        position: absolute;
        top: 40%;
        right: 55%;
        z-index: 100;
    }

    .line1{
        position: absolute;
        width: 240px;
        background-color:#21D0B2;
        height: 4px;
        top: 240px;
        right: 350px;
        z-index: 1000;
    }

    .line2{
        position: absolute;
        height: 100px;
        background-color:#21D0B2;
        width: 4px;
        top: 140px;
        right: 586px;
        z-index: 100;
    }

    .circle1 {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #21D0B2;
        border-radius: 50%;
        top: 232px;
        right: 350px;
        z-index: 100;
    }

    .floating-text1{
        margin: 0px !important;
        gap: 0;
        width: 400px;
        position: absolute;
        bottom: 280px;
        right: 370px;
        font-size: 16px;
    }

    .floating-text1 p{
        color: black;
    }

    .line3{
        position: absolute;
        width: 4px;
        background-color:#21D0B2;
        height: 300px;
        top: 50px;
        left: 320px;
        z-index: 100;
    }

    .line4{
        position: absolute;
        height: 4px;
        background-color:#21D0B2;
        width: 40px;
        top: 350px;
        left: 320px;
        z-index: 100;
    }

    .circle2 {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #21D0B2;
        border-radius: 50%;
        top: 40px;
        left: 310px;
        z-index: 100;
    }

    .floating-text2{
        margin: 0px !important;
        gap: 0;
        width: 400px;
        position: absolute;
        top: 330px;
        left: 370px;
        font-size: 16px;
    }

    .floating-text2 p{
        color: black;
    }

    @media (max-width: 1050px) {
        .line1{
            width: 140px;
        }
        .line2{
            right: 486px;
        }
        .floating-text1{
            right: 150px;
            font-size: 13px;
        }
        .line3{
            height: 250px;
        }
        .line4{
            display: none;
        }
        .floating-text2{
            width: 300px;
            font-size: 13px;
            left: 240px;
        }
    }


    @media (max-width: 740px) {
        .technology-images .img1 {
            width: 40%;
            height: 40%;
        }
        .technology-images .img2 {
            width: 40%;
            height: 40%;
        }
        .line1{
            width: 4px;
            height: 100px;
            top: 130px;
            right: 300px;
        }
        .line2{
            display: none;
        }
        .floating-text1{
            left: 20px;
            font-size: 10px;
        }
        .circle1 {
            top: 222px;
            right: 294px;
            width: 15px;
            height: 15px;
        }
        .line3{
            height: 180px;
            top: 120px;
            left: 270px;
        }
        .line4{
            display: none;
        }
        .floating-text2{
            width: 180px;
            font-size: 10px;
            left: 200px;
            top: 280px;
        }
        .circle2 {
            top: 115px;
            left: 265px;
            width: 15px;
            height: 15px;
        }
    }

    .data-tech-tabs.nav-tabs li{
        border-top: 1px solid #EEE;
    }

    .usecases .nav-tabs li .nav-link, .nav-tabs li .nav-link:hover{
        border-top: 1px solid #EEE;
        color: #7A7A7A;
    }
    .nav-tabs li .nav-link, .nav-tabs li .nav-link:hover{
        background-color: white;
    }


    .data-tech-tabs.first.active{
        border-bottom-left-radius: 0px 0px !important;
        border-right: none !important;
    }


    .data-tech-tabs{
        border-left: none !important;
        border-top: none !important;
        border-right: none !important;
    }


    .tab-content{
        border: 1px solid #707070;
        border-top: none !important;
    }

    .usecases .nav-tabs{
        border: 1px solid #707070;
        border-bottom: none !important;
    }

    .usecases .nav-tabs > li{
        position: relative;
    }

    .usecases .nav-tabs > li a {
        /*margin: 2px !important;*/
    }

    .nav-tabs .nav-link.active{
        color: #34F5C5 !important;
    }

    .usecases .nav-tabs > li >a.active:before,
    .usecases .nav-tabs > li:has(.first.active):before
    {
        content: "";
        position: absolute;
        height: 3px;
        top: -2px;
        right: 0;
        z-index: 10;
    }

    .usecases .nav-tabs > li >a.active:before {
        left: 0;
        width: calc(100% - 2px);
        transform: translateX(1px);
    }

    .usecases .nav-tabs > li:has(.first.active):before{
        left: -5px;
        width: calc(100% + 5px);
    }

    .usecases .nav-tabs > li >a.first.active {
        border-bottom-right-radius: 6px;
    }

    .usecases .nav-tabs li .nav-link {
        margin: 0px;
    }



    .usecases .nav-tabs > li:has(.first.active):after
    {
        content: "";
        position: absolute;
        width: 3px;
        height: calc(100% + 0px);
        top: 0;
        /*left: -2px;*/
        bottom: 0;
        z-index: 10;
        background-color: white;
    }


    @media screen and (min-width: 768px) {
        .usecases .nav-tabs > li:has(.first.active):after {
            left: -2px;
        }
    }

    .usecases .nav-tabs > li:has(.first.active){
        /*border-radius: 0px 0px 6px 0px;*/
        border-bottom: 1px solid #707070;
        /*border-left: 1px solid white;*/
        /*border-right: 1px solid #707070;*/
    }

    .usecases .nav-tabs > li:nth-of-type(2) >a.active,
    .usecases .nav-tabs > li:nth-of-type(3) >a.active,
    .usecases .nav-tabs > li:nth-of-type(4) >a.active {
        /*border-radius: 0px 0px 6px 6px;*/
        border-bottom: 1px solid #707070;
        /*border-left: 1px solid #707070;*/
        /*border-right: 1px solid #707070;*/
    }


    @media screen and (min-width: 768px){

        .usecases .nav-tabs > li:has(.first.active){
            border-radius: 0px 0px 6px 0px;
            border-bottom: 1px solid #707070;
            /*border-left: 1px solid white;*/
            border-right: 1px solid #707070;
        }

        .usecases .nav-tabs > li:nth-of-type(2) >a.active,
        .usecases .nav-tabs > li:nth-of-type(3) >a.active,
        .usecases .nav-tabs > li:nth-of-type(4) >a.active {
            border-radius: 0px 0px 6px 6px;
            border-bottom: 1px solid #707070 !important;
            border-left: 1px solid #707070 !important;
            border-right: 1px solid #707070 !important;
        }

        .usecases .nav-tabs > li >a.active:before,
        .usecases .nav-tabs > li:has(.first.active):before
        {
            background-color: white;
        }

    }





    .btn-mr-5{
        margin-right: 5%;
    }

    .usecase-header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .tabs{
        width: 100% !important;
        /*border: 1px solid #707070;*/
        /*overflow: hidden;*/
    }

    .tab-pane .title{
        font-size: 16px;
        font-weight: bold;
        color: black;
        margin-block: 1rem;
    }

    .tab-pane .column-1{
    }

    .tab-pane .column-2{
        display: flex;
        margin-top: 40px;
        margin-bottom: 20px;
        justify-content: center;
    }

    .tab-pane .column-2 .column{
        border: 1px solid grey;
        padding: 10px;
        margin-bottom: 5px;
        flex: 1;
    }

    .tab-info{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 1rem;
    }

    .inputs-wrapper {
        display: grid;
        grid-template-columns: 1fr 250px;
        gap: 2rem;
    }

    .tab-info .item{
        padding: 10px;
        border :1px solid grey;
    }


    .tab-info .item:hover{
        background-color: #34F5C5;
        border-color: #34F5C5;
    }

    .item-desc{
        font-size: 10px;
        padding-right: 20%;
    }

    .item-creator-id{
        margin-bottom: 0% !important;
        font-size: 10px;
    }

    .item-date{
        margin-bottom: 0% !important;
        margin-left: auto !important;
        font-size: 10px;
    }

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

        .inputs-wrapper {
            grid-template-columns: 1fr;
        }

        .tab-pane .column-2 .column {
            padding: 7rem 0;
        }
    }


    @media (max-width: 500px) {
        .item-creator-id{
            padding-right: 0px;
        }
        .item-desc{
            font-size: 10px;
            padding-right: 20%;
            line-height: 1.7;
        }
    }

    .Explore-btn{
        font-size: 32px;
        font-weight: bold;
        padding: 10px;
        border: 1px solid gray;
        background-color: white;
        color: #212529;
    }

    .Explore-btn:hover {
        color: #21D0B2;
        text-decoration: none!important;
        border: 1px solid #21D0B2;
    }

    @media (max-width: 800px) {
        .Explore-btn{
            font-size: 22px;
        }
    }

    .droneimg{
        width: 100px;
        height: auto;
    }

    .drone-text1{
        margin-bottom: 0px !important;
        margin-left: 20px;
        /* padding-right: 50%; */
    }



    .methodology-text p, .methodology-text{
        color: black;
    }


    .methodology-img{
        flex: 2;
    }

    .methodology-img .img{
        margin-left: 25%;
    }


    @media (max-width: 767px) {
        .methodology-img .img{
            margin-left: 15%;
        }
    }

    .results1{
        width: 50%;
        margin-right: 10%;
    }

    .result1img{
        width: 25%;
    }

    @media (max-width: 1200px) {
        .results1{
            font-size: 10px;
        }
        .result1img{
            width: 50%;
        }

    }



    .results2{
        width: 50%;
        margin-left: 10%;
    }

    .result2img{
        width: 25%;
    }



    @media (max-width: 1200px) {
        .results2{
            font-size: 10px;
        }
        .result2img{
            width: 50%;
        }

    }

    @media (max-width: 765px) {
        .results2{
            margin-left: 0;
        }
    }



    .result-card-text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 50%;
        /* max-width: 20%; */
        color: black;
        overflow-wrap: break-word;
        white-space: normal;
    }


    .result-section{
        margin-top: 20%;
        max-height: 30%;
    }


    .result-section .num{
        color: #FFC93C;
        font-size: 32px;
    }

    .result-card{
        margin: 2%;
        width: 20%;
    }

    .result-card .img{
        /* width: 20%;
        height: 20%; */
    }


    .workshop1{
        flex: 1;
        width: 50%;
        margin-right: 10%;
    }

    .workshopimg1{
        flex: 1;
    }

    .workshop2{
        flex: 1;
        width: 50%;
        margin-left: 10%;
    }


    .workshopimg2{
        flex: 1;
    }

    /* Academy page Styling */


    .academy-hero-container {
        padding-block: 2rem;
    }

    .academy-hero-container > div {
        gap: 2rem;
        position: relative;
    }



    @media (min-width: 992px) {
        .academy-hero-container {
            padding: 0rem;
        }
    }




    @media screen and (min-width: 992px) {
        .academy-hero-text{
            max-width: 500px;
            align-self: center;
        }

        .academy-hero-container > div:before {
            content: "";
            position: absolute;
            height: 100%;
            width:calc(100% + 1rem);
            right: 0;
            transform: translateX(calc(100% - 1.25rem));
            background-color: #FFC93C;
        }
    }



    .academy-hero-text p{
        color: black;
    }

    .academy-hero-img-container-img{
        position: absolute;
    }

    .academy-hero-img-container-img .img2{
        top: 0;
        right: 0;
        z-index: 1;
    }

    .academy-hero-title{
        line-height: 1.1;
        font-weight:550;
    }

    @media (max-width: 1300px) {
        .academy-hero-title{
            font-size: 50px;
        }
    }


    @media (max-width: 1100px) {
        .academy-hero-title{
            font-size: 30px;
        }
    }

    .academy-hero-img{
        flex: 1;
    }
    .academy-hero-img img {
        height: 100%;
    }


    .background-blue{

        background-repeat: no-repeat;
        background-size: cover;
    }



    .academy-cards{
        padding-block: 12rem;
        background-image: url('/img/icaerus-drone-flying-overlayed.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .academy-cards > div {
        gap: 2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px),1fr));
    }

    @media (max-width: 992px) {
        .academy-cards{
            padding-block: 6rem;
        }
    }

    .academy-search-categories {
        gap: 0.5rem;
    }

    .academy-courses {
        margin-bottom: 1rem;
    }

    .academy-courses >a {
        display: block;
        height: 100%;
    }


    .card-body-container> div:hover
    {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .card-body-container> div > p,
    .card-body-container> div > h4
    {
        text-align: center;
    }

    .card-body-container> div > p {
        color: white;
    }

    .card-body-container> div {
        height: 100%;
    }

    .card-body-container> div:hover > h4 {
        color: #0cc485;
    }

    .card-body-container> div:hover > p {
        color: black;
    }

    .academy-courses > a >div,
    .academy-courses > a >div .cart-body{
        height: 100%;
    }

    .academy-courses > a >div img {
        aspect-ratio: 16/9;
        object-fit: cover;
    }




    .sector-title .title{
        color: #FFC93C;
    }

    .form-outline {
        width: 90%;
        max-width: 600px;
        border: 1px solid #707070;
        border-radius: 41px;
        display: none !important;
    }

    .form-outline > input:focus{
        outline: none;
    }

    .form-outline input::placeholder{
        color: black;
        align-items: start;
    }

    .form-outline > input {
        border: none;
        background-color: inherit;
    }

    .academy-search-categories button{
        color: grey;
        padding-left: 1% !important;
        padding-right: 1% !important;
        border: none;
        background: none;
    }

    .academy-search-categories button:hover{
        color: white;
        background-color: #21D0B2;
    }

    .academy-course-collection img{
        width: 100%;
    }


    .academy-course-collection .card-body{
        border-top: 1px solid rgb(190, 189, 189);
        width: 100%;
    }


    .academy-course-collection .card-body:hover{
        background-color: #21D0B2;
    }

    a.card-body:hover {
        text-decoration: none;
    }

    .academy-course-collection .card{
        border: 1px solid rgb(190, 189, 189);
    }

    .View-btn{
        background-color: white;
        border: 1px solid rgb(190, 189, 189);
        font-size: 32px;
        font-weight: bold;
        padding: 2%;
    }

    .academy-courses{
        width: 25%;
    }

    @media (max-width: 1000px) {
        .academy-courses{
            width: 33%;
        }
    }

    @media (max-width: 780px) {
        .academy-courses{
            width: 50%;
        }
    }

    @media (max-width: 490px) {
        .academy-courses{
            width: 100%;
        }
    }

    .onsite-learning{
        background-image: url('/img/Mask Group 5.png');
        background-size: cover;
        background-repeat: no-repeat;
        padding-block: 5rem;
    }

    .onsite-text{
        margin-top: 2rem;
        color: white;
        text-align: center;
        max-width: 1000px;
        margin-inline: auto;
    }

    .learn-more-btn{
        background-color: white;
        border: 1px solid rgb(190, 189, 189);
        font-size: 32px;
        font-weight: bold;
        padding: 2%;
    }

    /* Single Course Styles */


    .single-course-description> p + p {
        margin-top: 1em;
    }

    .single-course-hero-container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6,1fr);
    }

    .arrow-down-academy {
        text-align: center;
        font-size: 75px;
        color: black;
        margin-bottom: 2rem;
        display: none;
    }

    .academy-hero-text{
        width: 100%;
        z-index: 2;
    }


    .yellow-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 30%;
    }


    .single-course-hero-text {
        width: 100%;
        max-width: 500px;
        display: grid;
        place-content: center;
        margin-right: 2rem;
        z-index: 2;
    }

    .single-course-hero-img {
        width: 60%;
        z-index: 2;
        align-self: center;
    }

    .course-hero-text{
        grid-column: 1/5;
        grid-row: 1/2;
        z-index: 2;
        align-self: end;
        margin-top: 1rem;
    }


    .course-hero-text p{
        color: black;
    }

    .course-hero-img-container{
        /* position: relative; */
    }

    .course-hero-title{
        font-weight:550;
    }

    @media  screen and (max-width: 992px) {
        .course-hero-text {
            grid-column: 1/-1;
        }
    }

    @media  screen and (min-width: 992px) {
        .single-course-hero-container:before {
            content: "";
            position: absolute;
            height: 100%;
            width:calc(100% + 1rem);
            right: 0;
            transform: translateX(calc(100% - 1.25rem));
            background-color: #FFC93C;
        }
    }

    @media (max-width: 1300px) {
        .course-hero-title{
            font-size: 50px;
        }
    }


    @media (max-width: 1100px) {
        .course-hero-title{
            font-size: 30px;
        }
    }

    @media (min-width: 993px) {
        .course-hero-title{
            max-width: 85%;
        }
    }

    .course-hero-img{
        grid-column: 4/7;
        grid-row: 1/2;
    }

    .course-hero-img-mobile {
        grid-column: 2/6;
        margin-top: 2rem;
    }

    @media  screen and (max-width: 560px) {
        .course-hero-img-mobile {
            grid-column: 1/-1;
        }
    }


    .course-hero-img img {
        height: 100%;
    }

    .course-hero-img img:nth-child(2) {
        z-index: 2;
    }

    .enroll-btn{
        background-color: white;
        border: 1px solid rgb(190, 189, 189);
        font-size: 16px;
        font-weight: bold;
        color:#000;
        padding: 0.75em 1em;
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .course-column1{
        flex: 1;
        max-width: 800px;
    }


    .course-column1 p{
        color: black;
    }


    .course-column1 li{
        color: black;
    }


    .course-column2{
        display: grid;
        place-content: end;
        gap: 2rem;
    }

    @media screen and (min-width: 992px) {
        .course-column2{
            place-content: center;
        }
    }

    .course-info {
        justify-content: space-between;
        gap: 2rem;
        margin-block: 8rem;
    }

    .course-info .course-title {
        font-weight: 500;
    }

    .course-column2 .card-title{
        font-size: 30px !important;
        font-weight: 500 !important;
    }


    .course-column2 .card{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .course-description{
        font-weight: 800;
    }

    .enroll{
        padding-top: 15%;
        padding-bottom: 15%;
        background-image: url('/img/Group 219.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .enroll > div {
        gap: 4rem;
        align-items: center;
    }

    .enroll p{
        color: white;
    }

    .enroll-course-btn {
        background-color: #FFC93C;
        font-size: 2em;
        font-weight: 700;
        color: #0a0c0d;
        border: none;
        padding: 1em;
        display: block;
        text-wrap: wrap;
        text-align: center;
    }

    .enroll-text{
        flex: 1;
        /*max-width: 800px;*/
    }


    .enroll-text p{
        font-size: 25px;
        line-height: 1.3;
    }


    .enroll-button-container{

    }

    /*=========== Open Calls View Styles ==============*/


    .open-calls-home-header{
        background-image: url('/img/Group 215.png');
        background-position: center;
        background-size: cover;
        height: 60vh;
        height: 60dvh;
        position: relative;
    }

    @media screen and (max-width: 1360px){
        .open-calls-home-header
        {
            min-height: calc(60vh - 100px);
            min-height: calc(60dvh - 100px);
        }
    }

    .open-calls-hero-title{
        font-size: 64px;
        font-weight: 900;
        color: white;
        text-align: start;
        padding-top: 56px;
    }

    .open-calls-hero-text{
        text-align: start;
        max-width: 700px;
        color: white;
    }

    .open-calls-btn{
        background-color: white;
        border: 1px solid rgb(190, 189, 189);
        font-size: 32px;
        font-weight: bold;
        white-space: nowrap;
        align-items: center;
        padding: 0.5rem 1rem;
        width: 100%;
        max-width: 280px;
    }

    .open-calls-btn:hover{
        text-decoration: none !important;
    }

    .open-calls-btn img {
        width: 100%;
    }

    .open-calls-learn-more {
        display: flex;
        justify-content: end;
    }

    .open-calls-learn-more > div {
        /*margin-left: auto;*/
        width: 100%;
        max-width: 300px;
    }

    .btn-arrow-right{
        flex: 1;
    }

    .open-calls-title{
        color: #FFC93C;
        margin-bottom: 4rem;
    }

    /* last open call section */

    .last-open-call-section {
        margin-top: 10rem;
    }

    .last-open-call-content {
        gap: 5rem;
    }

    .last-open-call-content li:not(:last-child) {
        margin-bottom: 2rem;
    }

    .last-call-column1{
        flex:1;
    }

    .last-call-column1 a {
        margin-top: 2rem;
    }

    .last-call-column2{
        flex:1;
    }

    .learn-more-text{
    }

    .last-call-img{
        text-align: end;
    }

    .last-call-title{
        font-weight: 500;
        text-align: end;
    }

    .last-call-text{
        color: gray;
        text-align: end;
    }

    /* latest open call winners section */


    .latest-winners-section {
        margin-top: 5rem;
        margin-bottom: 10rem;
        gap: 3rem;
    }

    .latest-winners-title > p{
        color: black;
        font-weight: bold;
    }

    .latest-winners-left {
        width: 100%;
        background: #F7F7F7;
        padding: 12rem 2rem 12rem 0rem;
        display: grid;
        place-content: center;
        position: relative;
    }

    .latest-winners-left .latest-winners-left-info{
        z-index: 2;
    }

    .latest-winners-left-info > p {
        color: black;
    }

    .latest-winners-left-info > p >span {
        color: #21D0B2;
    }

    .latest-winners-left:before{
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100vw;
        background: #F7F7F7;
        z-index: 0;
    }

    .latest-winners-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 2rem;
    }

    .latest-winners-right-images {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        gap: 1rem;
        place-content: center;
    }

    .latest-winners-right-images > a img {
        width: 100%;
        max-width: 200px;
    }

    .latest-winners-right-btn {
        align-self: end;
        color: black;
        font-size: 2em;
        font-weight: bold;
        align-items: center;
        border: 1px solid rgb(190, 189, 189);
        padding: 0.5rem 1rem;
        gap: 1rem;
    }

    .latest-winners-right-btn > div {
        width: 50px;
        height: 50px;
        aspect-ratio: 1;
    }

    .latest-winners-right-btn > div > img {
        width: 100%;
        height: 100%;
    }

    .latest-winners-right-btn:hover{
        text-decoration: none !important;
    }


    @media (min-width: 768px) {
        .latest-winners-left {
            width: 40%;
        }
    }


    /* previous open calls section */

    .previous-open-calls {
        margin-block: 6rem;
    }

    .previous-open-call {
        gap: 2rem;
    }

    .previous-open-call-content {
        flex: 1;
    }

    .previous-open-call-image {
        width: 100%;
        max-width: 300px;
    }

    .previous-calls-title{
        font-size: 32px;
        font-weight: 500;
    }

    .previous-calls-deadline{
        font-size: 20px;
    }

    .previous-calls-desc{
        font-size: 16px;
    }


    @media (max-width: 992px) {
        .previous-calls-title{
            margin-top: 5%;
            margin-left: 0%;
        }

        .previous-calls-deadline{
            margin-left: 0%;
        }

        .previous-calls-desc{
            margin-left: 0%;
        }
    }

    .arrow{
        width: 100px
    }

    .algorithm_readme h1 {
        font-size: 1.50em !important;
        font-weight: 400;
    }

    .algorithm_readme h2 {
        font-weight: 400;
        font-size: 1.35em !important;
    }

    .algorithm_readme img {
        width: unset;
    }

    @media (max-width: 992px) {
        .algorithm_readme_container {
            flex-wrap: wrap;
            justify-content: flex-end !important;
        }
    }

    .workshops h2{
        font-weight: bold;
        font-size: 46px;
        text-align: center;
        color: #FFC93C;
    }

    .model-preview-ID{
        margin-right: 3%;
        white-space: nowrap;
    }

    .background-grey{
        background-color: #FBFBFB !important;
    }

    .background-grey p {
        color: #0a0c0d;
    }

    .background-white{
        background-color: white !important;
    }

    .model-preview-title{
        margin-left: 3%;
    }

    .model-preview-container{
        border-radius: 14px;
        border-width: 1px;
        /* background-color: #E2E2E2; */
    }

    .model-preview-main{
        margin-bottom: 10%;
    }

    @media (max-width: 575px)  {
        .model-preview-main>div {
            justify-content: center!important;
        }
    }



    .border-top-left-right{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .detail-section-preview{
        background-color: #E2E2E2;
    }

    .rhombus-background-center-right-down{
        position: absolute;
        bottom: -200px;
        right: -100px;
        width: 30%;
    }

    .cert-column-1{
        flex: 5;
    }

    .cert-column-2{
        flex: 2;
    }


    .background-certificate{
        padding-top: 20%;
        padding-bottom: 100%;
        background-color: #21D0B2;
    }

    .bookmark{
        position: relative;
        height: 70%;
        width: 100%;
        padding: 0px;
        padding-bottom: 30%;
        border-left: 50px solid #21D0B2;
        border-right: 50px solid #21D0B2;
        border-bottom: 20px solid transparent;
    }

    .certificate{
        margin-left: 40%;
    }
    .txt-white{color: #fff !important;}


    /*@media (min-width: 768px) {*/
    /*    .col-md-5-custom {*/
    /*        flex: 0 0 auto;*/
    /*        width: 45%;*/
    /*    }*/
    /*}*/

    @media (max-width: 1080px) {
        .col-12-custom {
            width: 100%;
        }
    }

    .selected
    {
        background-color: #21D0B2 !important;
        color: white !important;
    }


    /* Modal */

    .modal {
        padding-right: 0 !important;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        height: unset;
    }

    .modal.fade .modal-dialog {
        transform: unset;
    }


    .custom-mb {
        margin-bottom: 10rem;
    }

    .square-plus.oct {
        margin-right: 15px;
        margin-left: 40px;
    }

    .cursor-default {
        cursor: default;
    }