/* GENERAL *********************************************************************/
p,
span, div {
    text-wrap: pretty;
}

p, span {
    color: #4d5344;
}

.text-white,
.text-white p,
.text-white span {
    color: #FFF !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
}

.ff-heading {
    font-family: 'Oswald', sans-serif !important;
}

.ff-body {
    font-family: "Libre Franklin", sans-serif !important;
}

.ar-1x1 {
    aspect-ratio: 1;
}

.ar-16x9 {
    aspect-ratio: 16/9;
}

.ar-4x3 {
    aspect-ratio: 4/3;
}

.object-fit-cover>img,
img.object-fit-cover {
    object-fit: cover;
}

iframe,
.rounded-3,
.rounded-3>img,
.row[class*=bg-] {
    border-radius: 1rem !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.text-pretty {
    text-wrap: pretty;
}

.text-balance {
    text-wrap: balance;
}

a.text-green,
.text-green,
.text-green p,
.text-green span {
    color: #0d6b0a !important;
}

.bg-green {
    background-color: #ACD003;
}

.bg-green-dark {
    background-color: #006e00;
}

.bg-gradient-green {
    background: linear-gradient(-45deg, #0A632A 0%, #ACD003 56%, #56C724 100%);
}

.bg-gradient-dark {
    background: linear-gradient(-45deg, #5FC14A 23%, #2E3EBB 100%);
}

.border-green {
    border-color: #ACD003 !important;
}

.border-gradient-top::before,
.border-gradient-bottom::after {
    content: "";
    display: block;
    background: linear-gradient(-45deg, #0A632A 0%, #ACD003 56%, #56C724 100%);
    width: 100%;
    height: 1.5rem;
}

.btn {
    font-family: "Libre Franklin";
    font-weight: 500;
    text-transform: none;
    border-radius: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.btn-primary {
    background: #acd003;
    border-color: #acd003;
    color: #006e00;
}

.btn-primary:hover {
    background: #006E00;
    border-color: #006E00;
    color: #FFF;
}

.bg-white.translucent-1 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-white.translucent-2 {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.bg-white.translucent-3 {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.overlay-text {
    position: absolute;
    top: 50%;
    margin: 0 1.5rem;
    border-radius: 1rem;
    padding: 1.5rem;
    font-weight: 700;
    color: #FFF;
    transform: translateY(-50%);
}

.overlay-text.bg-green {
    background: rgba(0, 110, 0, 0.65);
    backdrop-filter: blur(6px)
}

.icon-row .az-image {
    width: calc(100% / 7);
}

.logo-startups {
    height: 240px;
}

.logo-startups>a {
    display: block;
    height: 100%;
}

.logo-startups>a>img,
.logo-startups>img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.accordion .accordion-button {
    color: #fff;
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    font-weight: 600;
    background-color: #0d600d;
}

.accordion .accordion-button.collapsed {
    background-color: #bfdfbf;
    color: #0d600d;
}

.accordion .accordion-button:not(.collapsed):after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.hover-effect-usi {
    position: relative;
    z-index: 1;
    border: solid 5px transparent !important;
    transition: all ease 0.3s;
}

.hover-effect-usi:hover {
    border: solid 5px #0d6b0a !important;
    z-index: 2;
}

.inner-landing-banner {
    height: 480px;
    overflow: hidden;
}

/* CARD ***********************************************************/
.card.d-flex .card-body {
    display: flex;
}

.card.h-100 > .card-body > .az-ctnr{
height: 100%;
}

.card.align-items-center .card-body {
    align-items: center;
}

.news-and-events .card.event-item {
    background: rgba(0, 0, 0, 0.05);
    border: 0;
    padding: 0;
    border-radius: 0.25rem;
    overflow: hidden;
    transform: translateY(0);
    transition: all ease-in-out 0.3s;
}

.news-and-events .card.event-item:hover {
    background-color: #fff;
    transform: translateY(-0.25rem);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.22);
    transition: all ease-in-out 0.3s;
}

.news-and-events .card.event-item h4 {
    font-size: 1.25rem;
    color: #8a704c;
}

.news-and-events .card-body img {
    aspect-ratio: 1;
    object-fit: cover;
}

/* INNER LANDING BANNER ***********************************************************/
.inner-landing-banner::before {
    content: "";
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0));
    z-index: 2;
    position: absolute;
    bottom: 0;
}

.inner-landing-banner>.container-fluid,
.inner-landing-banner>.container-fluid>.az-image,
.inner-landing-banner>.container-fluid>.az-image>img {
    height: 100%;
}


.inner-landing-banner>.container-fluid>.az-image>img {
    object-fit: cover;
}

.inner-landing-banner .text-overlay {
    position: absolute;
    bottom: 0;
    max-width: 1332px;
    margin: 0 auto;
    padding: 2rem 6rem;
    width: 100%;
    z-index: 2;
}

.inner-landing-banner .text-overlay h1.page-title {
    color: #FFF;
}

/* CARDS  *************************************************/
.card-stats.grid-2x2 {

}

.card-stats .az-image {
    height: 200px;
}

.card-stats .az-image>img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.card-stats.grid-2x2 > div {
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding: 3rem 1.5rem;
}

.card-stats.grid-2x2 > div:nth-child(1),
.card-stats.grid-2x2 > div:nth-child(2) {
    padding-top: 0;
}

.card-stats.grid-2x2 > div:nth-child(2n) {
    border-right: none;
}

.card-stats.grid-2x2 > div:nth-last-child(1),
.card-stats.grid-2x2 > div:nth-last-child(2) {
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0;
}


/* FLIPCARD  *************************************************/

.flipcard-toggle {
    display: none;
}

.flipcard-container {
    display: block;
    width: 300px;
    height: 360px;
    perspective: 1000px;
    cursor: pointer;
}

.flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flipcard-inner img {
    border-radius: 1.5rem;
}

/* Flip when checkbox is checked */
.flipcard-toggle:checked+.flipcard-container .flipcard-inner {
    transform: rotateY(180deg);
}

.flipcard-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 10px;
}

.flipcard-front {}

.flipcard-back {
    transform: rotateY(180deg);
}


/* FORM ***************************************************/

/* Modal */
.modal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.modal-dialog {
    width: 50vw;
    min-width: 800px;
    border-radius: 1.5rem !important;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .modal-dialog {
        min-width: 640px;
    }

    .webform-options-display-two-columns {
        column-count: 1 !important;
    }
}

@media screen and (max-width: 767px) {
    .modal-dialog {
        min-width: 480px;
    }
}

@media screen and (max-width: 575px) {
    .modal-dialog {
        min-width: 320px;
        margin: 2rem auto;
    }
}


/* General */
form {
    margin-bottom: 2rem;
}

div:has(.js-form-item) .js-form-item:first-child {
    /*margin-top: 0;*/
}

.js-form-item {
    margin-top: 1.5rem;
}

/* Fields that are not Radio Button */

.js-form-item:not(.js-form-type-radio) {
    margin-bottom: 1.5rem;
}

.js-form-item[id*=edit-experience-likert]:not(.js-form-type-radio) {
    margin-bottom: 0.5rem;
}

/* Radio & Checkbox */

.form-item.js-form-type-radio {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.5rem;
}

.form-item.js-form-type-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}


.form-item.js-form-type-radio input,
.form-item.js-form-type-checkbox input {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.form-item.js-form-type-checkbox label {
    width: calc(100% - 28px);
}

.form-item.js-form-type-radio label {
    width: calc(100% - 1.25rem - 0.5rem);
    margin-top: -2px;
}

.form-item.js-form-type-checkbox label,
.form-item.js-form-type-checkbox input {
    /*margin-bottom: 0.5rem;*/
}

.form-item.js-form-type-radio {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
}

.form-item.js-form-type-radio input {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.form-item.js-form-type-radio label {
    width: calc(100% - 1.25rem - 0.5rem);
}

/*Text Fields */

.form-item.js-form-type-url input,
.form-item.js-form-type-email input,
.form-item.js-form-type-tel input,
.form-item.js-form-type-textarea textarea,
.js-form-type-date input,
.js-form-type-webform-time input,
.iti--allow-dropdown input,
.iti--allow-dropdown input[type="tel"] {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: 1px solid #CCC;
    width: 100%;
}

/* Others */
.js-form-type-email label,
fieldset legend {
    font-weight: bold;
}

fieldset legend {
    font-size: 1rem !important;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.js-form-type-textfield label,
.js-form-type-textarea label,
.js-form-type-datetime label,
.js-form-type-tel label,
.js-form-type-email label,
fieldset fieldset legend {
    font-size: 1rem !important;
}



/* Custom CSS for forms */
form#webform-submission-website-feedback-add-form,
form.webform-submission-test-form {
    margin-bottom: 4rem;
}

form#webform-submission-website-feedback-add-form {
    margin-top: -4rem;
}

/*****************************************************/
/* USI EVENTS + NEWS */
.event-list .card-item,
.news-list .card-item {
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    border: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    transform: translateY(0);
    transition: all ease-in-out 0.3s;
}

.event-list .card-item:has(a):hover,
.news-list .card-item:has(a):hover {
    background-color: #fff;
    transform: translateY(-0.25rem);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.22);
    transition: all ease-in-out 0.3s;
}

.event-list .card-item .card-content-image>img,
.news-list .card-item .card-content-image>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.event-list .card-item .card-content-image,
.news-list .card-item .card-content-image {
    display: block;
    overflow: hidden;
    background: linear-gradient(-45deg, #0A632A 0%, #ACD003 56%, #56C724 100%);
}

.event-list .card-item .card-content-image {
    aspect-ratio: 1;

}

.news-list .card-item .card-content-image {
    aspect-ratio: 16/9;
}

.event-list .card-item .card-content-text,
.news-list .card-item .card-content-text {
    padding: 1.5rem;
}

.event-list .card-item .card-content-text h3,
.news-list .card-item .card-content-text h3 {
    color: #0d6b0a;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: bold;
}

.event-list .card-item .card-content-text .greenhouse-category {
    font-size: 0.875rem;
    color: #141c52;
    font-weight: bold;
    background: #DEE2E6;
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    border-radius: 0 1rem 1rem 0;
    margin-left: -1.5rem;
    margin-top: 1rem;
}

.event-list .card-item .card-content-text .greenhouse-organisers {
    margin-top: 1rem;
}

.event-list .card-item .card-content-text .greenhouse-time,
.event-list .card-item .card-content-text .greenhouse-venue {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.5rem;
}

.event-list .card-item .card-content-text .greenhouse-time::before,
.event-list .card-item .card-content-text .greenhouse-venue::before {
    font-family: "Font Awesome 6 Free" !important;
    display: inline-block;
    margin-top: 2px;
    color: #0d6b0a;
    width: 1rem;
    text-align: center;
}

.event-list .card-item .card-content-text .greenhouse-time::before {
    font: var(--fa-font-solid);
    content: "\f017";
}

.event-list .card-item .card-content-text .greenhouse-venue::before {
    font: var(--fa-font-solid);
    content: "\f3c5";
}

.event-list .pager,
.news-list .pager {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    justify-content: end;
}

/* FOUDNER / COHORT CARDS  **********************************************/

.gallery-thumbnails .az-image {
    width: 50%;
    border-radius: 1.25rem !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0.25rem !important;
}

.gallery-thumbnails .az-image>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem !important;
}

@media screen and (max-width: 991px) {
    .inner-landing-banner .text-overlay {
        padding: 2rem;
    }

    .card-stats .card {
        /*        max-width: 240px;*/
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px) {
    .overlay-text {
        margin: 0;
        padding: 1rem;
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
    }


    .logo-startups {
        aspect-ratio: 16/6;
        width: 100%;
    }

    .flipcard-container {
        width: 240px;
        height: 288px;
    }

 .card-stats.grid-2x2 > div {
        padding: 1.5rem;
        border-right: 0;
    }
    
    .card-stats.grid-2x2 > div:nth-child(1),
    .card-stats.grid-2x2 > div:nth-child(2) {
        padding-top: 1.5rem;
    }

    .card-stats.grid-2x2 > div:nth-last-child(1),
    .card-stats.grid-2x2 > div:nth-last-child(2) {
        padding-bottom: 1.5rem;
    }

    .card-stats.grid-2x2 > div:nth-last-child(2) {
        border-bottom: 1px solid #FFF;
    }
}

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

    .cohort-card>div:nth-child(2)>.row:last-child>div,
    .cohort-card>div:nth-child(2)>.row:last-child>div>.row>div {
        display: flex !important;
        justify-content: center !important;
        text-align: center;
    }
}