.stc-gradient-bg { background: linear-gradient(159deg, #0aa19f 0%, #010d0b 100%); background: rgb(31, 128, 134); background: linear-gradient(222deg, rgba(31, 128, 134, 1) 0%, rgba(9, 121, 72, 1) 35%, rgba(0, 221, 174, 0.9926773119122257) 66%, rgba(0, 212, 255, 1) 100%); }


/*.stc-gradient-bg{
    background: linear-gradient(222deg, rgb(26 117 46) 0%, rgb(10 209 244) 35%, rgb(37 209 172 / 99%) 66%, rgb(6 212 252) 100%);
}*/


.stc-landing-container { display: flex; flex-direction: column; justify-content: center; color: white; }

.landing-content-card { border-radius: 32px; backdrop-filter: blur(15px); }

.bg-transparent { background-color: #16211b54 !important; }

.gradient-content-card { background: rgb(31, 128, 134); background: linear-gradient(222deg, rgba(31, 128, 134, 1) 0%, rgba(9, 121, 72, 1) 35%, rgba(0, 221, 174, 0.9926773119122257) 66%, rgba(0, 212, 255, 1) 100%); }

.gradient-content-card-invers { background: rgb(31, 128, 134); background: linear-gradient(222deg, rgba(0, 212, 255, 1) 0%, rgba(0, 221, 174, 0.9926773119122257) 35%, rgba(9, 121, 72, 1) 66%, rgba(31, 128, 134, 1) 100%); }

.start-color-anim { background: rgb(31, 128, 134); background: linear-gradient(222deg, rgba(0, 212, 255, 1) 0%, rgba(0, 221, 174, 0.9926773119122257) 35%, rgba(9, 121, 72, 1) 66%, rgba(31, 128, 134, 1) 100%); animation: blinds: 1s ease }

@keyframes blinds {
    to { background: rgb(31, 128, 134); background: linear-gradient(222deg, rgba(31, 128, 134, 1) 0%, rgba(9, 121, 72, 1) 35%, rgba(0, 221, 174, 0.9926773119122257) 66%, rgba(0, 212, 255, 1) 100%); }
}

.body-text { animation: text-fade-in 4s ease; }

@keyfranes text-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gradient-dark-card { background: linear-gradient(222deg, rgb(8 86 102 / 54%) 0%, rgb(0 221 174 / 18%) 35%, rgb(9 121 72 / 26%) 66%, rgb(16 38 40 / 46%) 100%); }

.landing-card-flex-layout { justify-content: center; display: flex; }

.icon-card { width: 68% }
.icon-card-border { border-radius: 24px; border: 2px solid #050f12; border-left: 6px solid black; }

.icon-card-spacing { margin-bottom: 1rem; }

    .icon-card-spacing > h4 { margin-left: 1rem !important; }

    .icon-card-spacing > .child-content { margin-left: 1rem !important; }

.i-card-bp { padding-right: 250px !important; max-width: 85% !important; justify-self: end; }

@media (max-width: 880px) {
    /* .landing-content-card {
        height: 30vh;
    } */
     .icon-card{ margin-left: 2rem !important; margin-right: 2rem!important;min-width: 90% !important;max-width:90%!important}
    .i-card-bp { padding-right: 1rem !important; max-width: 90% !important; justify-self: unset; }

    .c-landing-card {
        width: unset;
        margin: -1rem;
        padding: 0;
    }

    .stc-landing { margin-top: 10vh; height: 40vh; display: flex; justify-content: center; align-content: center; }

    .headline-section-width { width: 90vw; }

    .container-layout { width: 90vw; margin-right: 5vw; margin-left: 5vw; }

    .sub-container-margin { margin-right: 5vw; margin-left: 5vw; }

    .img-size { display: none; }
}

@media (min-width: 880px) {


    .headline-section-width { width: 50vw; }

    .landing-header-txt-size { font-size: 1.25rem; }

    .stc-txt-size { font-size: 1rem; }

    .stc-landing { height: 60vh; display: flex; justify-content: center; align-content: center; }

    .container-layout { width: 80vw; margin-right: 10vw; margin-left: 10vw; margin-bottom: 5vh; }

    .sub-container-margin { margin-right: 10vw; margin-left: 10vw; }

    .img-size { max-height: 80px; }
}

@media(min-width: 1250px) {

    .headline-section-width { width: 30vw; }

    .img-size { max-height: 120px; }

    .container-layout { width: 60vw; margin-right: 20vw; margin-left: 20vw; }

    .sub-container-margin { margin-right: 20vw; margin-left: 20vw; }

    .landing-header-txt-size { font-size: 1.75rem; }

    .stc-txt-size { font-size: 1.5rem; }

    .stc-landing { height: 80vh; display: flex; justify-content: center; align-content: center; }
}

.stc-fo-list { list-style-type: none !important; }

.stc-header { font-size: 1.5rem !important; }

.stc-body { font-size: 1rem !important }

.cl-white { color: white !important; }


.white-glass-card { background-color: rgb(255 255 255 / 39%) !important; backdrop-filter: blur(4px); }

.spenden-card-img { border-radius: 16px 0px 0px 16px; background-size: cover; background-repeat: no-repeat }

.about-me-img { border-radius: 0px 16px 16px 0px; background-size: cover; background-repeat: no-repeat; background-image: url('/assets/pitti1.jpg'); }

.spenden-card-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }

.spenden-landing { height: 50vh; margin-bottom: 10vh; background-image: url(/title/spenden.png); background-repeat: no-repeat; background-size: cover }


.nav-mobile-links { display: none; }





.nav-mobile-links:hover > .link-list > .mobile-nav-links{display:block!important}
 
.mobile-nav-links {
    position: absolute;
    right: 5vw;
    background-color: #0000008a;
    border-radius: 16px;
    padding: 1.5rem;
    min-width: fit-content;
    white-space: nowrap;
    list-style: none;
    backdrop-filter: blur(8px);
    color: white;

}
.hide-item { display: none; }


.v-card { width: 350px; }


.footer-container {
    min-height: 500px;
    display: flex
;
    justify-content: center; 
    align-items: center;
    height: 50vh;
    color: white;
}

.sub-card-icon {
    max-height: 45px!important;
}
.ic-img-container { position: absolute; left: -70px; top: -70px; z-index: 10; background-color: black; min-height: 80px; min-width: 80px; background-repeat: no-repeat; border-radius: 32px 32px 32px 32px; padding: 1rem; }

.company-card {
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-left: 1rem;
    padding-bottom: 2rem;
    padding-right: 1rem;
}

.company-clm {
    padding-top: 2rem;
}

/* Medium devices such as tablets (1024px or lesser) */
@media only screen and (max-width: 1024px) {

    .spenden-landing{ margin-bottom: 2rem;}
    .company-clm {
        padding-top: 1rem!important;
    }

.company-card {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    margin-bottom: 1rem !important;
}

    .footer-container {
        align-items: start;
        justify-content: start;
        padding: 2rem;
    }

   

    .stc-landing { margin-top: 0px }

    .v-card { width: 100% !important; margin-top: 1rem; margin-bottom: 1rem; }

    .flcol-mbl { flex-direction: column !important; align-items: center; }

    .flcol-mbl .footer{ align-items: start;}

    .stc-fo-list{ padding-left: 0px; margin-left: 0px!important}

     .mbl-footer{ width:90%;align-items: start !important;padding-left: 0px !important; margin-left:0px!important}

    .footer-img { max-height: 80px !important; }



    #about-me-img { flex: 4 !important; background-size: contain !important; border-radius: 16px 16px 16px 0px !important; }

    .about-me-img { border-radius: 16px !important 16px!important 16px !important 0px !important; }
}


@media only screen and (max-width: 1350px) {
    #about-me-img { flex: 5 !important; background-size: contain !important; border-radius: 16px 16px 16px 0px !important; }

    .about-me-img {flex:5 !important; border-radius: 16px 16px 16px 0px !important; }
}
/* Small devices such as phones (768px or lesser) */
@media only screen and (max-width: 768px) {

    .spenden-card-img{ display: none !important; flex:0}

    .company-card {
        padding: 1rem 0 0 0 !important;
    }
    .co-card-header{ padding: 0.5rem !important;font-size: 1.25rem!important;margin-left: .5rem;}

    .footer-image { max-height: 50px !important; }

    .footer-container {
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .footer-container.content-layout {
        margin: 1rem 0.5rem 1rem 0.5rem !important;
        padding: 0rem .5rem 1rem .5rem !important;
        justify-content: start; 
    }

    .da-im-l {
        align-self: center!important;
        justify-self: center!important;
    }

    .v-card { width: 100% !important; margin-top: 1rem; margin-bottom: 1rem; }

    .nav-links { display: none; }

    .nav-mobile-links { display: flex; }

    .flcol-mbl .for-footer{ width:90%;align-items: start!important}

    .mobile-nav-links {
        display: none;
        position: absolute;
        right: 5vw;
        top: 2rem;
        background-color: #0000008a;
        border-radius: 16px;
        padding: 1.5rem;
        min-width: fit-content;
        white-space: nowrap;
        list-style: none;
        backdrop-filter: blur(8px);
        color: white;

    }
    .nav-mobile-links:hover > .mobile-nav-links{display:flex}


    .flcol-mbl { flex-direction: column !important; align-items: center; margin: 0 !important; }

    #about-me-img { display: none; }
    .about-me-img{ display: none;height: 0px;flex:0;min-height:0px!important}
    .nav-logo { display: flex; justify-self: start; }

    .menu-icon { align-self: end; padding: 1rem; }
}



.title-img { background-repeat: no-repeat; background-size: cover; height: 50vh }

.rubik-no-400 { font-family: 'Rubik'; font-style: normal; font-weight: 400; }

.opacity-animation {
    animation: opacity-a ease 2s
}

@keyframes opacity-a {
    0%{ opacity: 0;}
    100%{ opacity: 1;}

}



@keyframes fadeInUp {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0%); opacity: 1; }
}

.fadeInUp-animation { animation: 1.5s fadeInUp; }

@keyframes fadeInHori {
    0% { transform: translateX(100%); opacity: 0.5; }
    100% { transform: translateX(0%); opacity: 1; }
}

.fadeInHori-animation { animation: 2s fadeInHori; }