/* responsive css start */



@media only screen and (max-width: 1222px){
    .liveEvReminder{
        margin-bottom: 38.3%;
    }
}


@media only screen and (max-width: 1178px) and (min-width: 1153px){
    .liveEvReminder{
        margin-bottom: 41%;
    }
}

@media only screen and (max-width: 1168px){
    .liveEvReminder{
        margin-bottom: 44%;
    }
}

/* @media only screen and (max-width: 1154px){
    .liveEvReminder{
        margin-bottom: 43%;
    }
} */

@media only screen and (max-width: 1092px) {
    .homeHeroBtns {
        flex-wrap: wrap;
    }

    #hero-section{
        aspect-ratio: 2001 / 1200 !important;
        background-position: left;
    }

    .liveEvReminder{
        margin-right: calc(30% + 25px);
        margin-bottom: 54%;
    }
 
}

@media only screen and (max-width: 1056px) {
    .liveEvReminder{
        margin-bottom: 56%;
    }
}

@media only screen and (max-width: 1145px){
    #vendorAddNewProduct .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    #vendorAddNewProduct .productNav {
        max-width: 35%;
        width: 98%;
    }

    #vendorAddNewProduct .productUploadSection{
        max-width: 64%;
    }

    #vendorAddNewProduct .productlivePreviewSide{
        max-width: 100%;
        margin-top: 20px;
    }

    #vendorAddNewProduct {
        .prod-preview-card {
            display: flex;
            gap: 30px;
        }
        .prod-preview-main-image-wrapper{
            height: 220px;
        }
        .prod-preview-thumb{
            height: 100px;
            width: 100px;
        }
    }
}



@media only screen and (max-width: 1017px) {
    .liveEvReminder{
        margin-bottom: 58%;
    }
}


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

    .homeHeroTitle,
    .homeHeroTitle span {
        font-size: 35px;
        line-height: 39px;
    }

    #hero-section {
        padding-top: 100px !important;
        /* background-position: 0% bottom !important; */
    }

    .heroSmallTag p{
        font-size: 11.16px;
    }

    .hero-content {
        .hero-para {
            font-size: 18px !important;
            line-height: 20px;
        }
    }

    .homeHeroFeature {
        .icon{
            --size: 40px;
            height: var(--size);
            width: var(--size);
            img{
                --size: 15px;
                height: var(--size) !important;
                width: var(--size) !important;
            }
        }
    }

    .homeHeroFeature .h4{
        font-size: 15px;
    }

    .homeHeroFeature p{
        font-size: 12px;
    }

    .homeHeroFeature div:first-child .icon img{
        --size: 23px;
        height: var(--size);
        width: var(--size);
    }

    .homeHeroBtns a:last-child{
        padding: 7.56px 23px;
    }
    
    .homeHeroBtns a, .homeHeroBtns a:last-child span{
        font-size: 13.34px;
    }

    .homeHeroBtns a:first-child{
        padding: 12.49px 24.3px;
    }

    .homeHeroBtns a:last-child img{
        height: 20px;
    }

    #hero-section .container {
        padding-left: 17px;
    }

    .section-title{
        line-height: unset;
    }
    
    .upcomingAllEvBtn{
        margin-top: 30px;
    }

    #events .section-title{
        margin-bottom: 30px;
    }

}


@media only screen and (max-width: 992px) {
    .upcomingEvCard {
        flex-direction: column;
        text-align: center;
        margin-bottom: 33px;
    }

    .upcomingEvCard .contentSide {
        order: 2;

        .contentTag {
            margin-left: auto;
            margin-right: auto;
        }

        .title {
            text-align: center;
            font-size: 60px;
        }

        .time {
            justify-content: center;
        }

        .eventSd {
            text-align: center;
        }

        .upcomngEvTicketBtn {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .upcomingEvCard .imageSide {
        order: 1;
    }

    .upcomingEvCard .imageSide {
        background:
            linear-gradient(0.65deg,
                #120A20 0%,
                rgba(22, 12, 40, 0.75) 30%,
                rgba(22, 12, 40, 0) 70%),
            url('../images/event-up.png');
        height: 70px;
        justify-content: center !important;
    }

    .upcomingEvCard .imageSide .liveEvReminder {
        margin-left: auto;
        margin-right: auto;
    }

    .eventCountDown{
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .eventBtnTwo{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    /* #cta {
        .cta-content-wrapper{
            justify-content: center;
        }
    } */
}



@media only screen and (max-width: 768px) {
    .upcomingEvCard {
        margin-top: 40px;
    }

    .section-title2 h1, .section-title2 h1 span{
        font-size: 50px;
    }

    #hero-section h2.lead {
        font-size: 50px !important;
    }

    .section-title h1,
    .section-title span {
        font-size: 50px;
    }

    .homeHeroBtns {
        margin-bottom: 200px;
    }

    .homeHeroBtns a {
        margin-bottom: 0 !important;
    }

    #hero-section.breadCumb p{
        font-size: 18px !important;
    }

    .login-form-area{
        margin-top: 20px;
    }

    #hero-section {
        aspect-ratio: 2001 / 1500 !important;
        background-position: left;
    }

    #hero-section.breadCumb{
        h2.lead{
            font-size: 50px !important;
        }
        .hero-para{
            font-size: 20px !important;
        }
    }

}

@media only screen and (max-width: 733px){
    #hero-section{
        aspect-ratio: auto !important;
        background-position: bottom right !important;
        p, h1, .h4{
            text-shadow: 1px 1px 0.5px rgba(255, 255, 255, 0.5);
        }
        
    }

    

    .hero-content {
        margin-top: 10px;
        max-width: 499px;
        width: 100%;
    }

    .homeHeroBtns {
        margin-bottom: 100px;
    }
}

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

    .hideImg .img svg{
        height: 400px;
    }
}

@media only screen and (max-width: 645px){
    #vendorAddNewProduct {
        .prod-preview-card {
            flex-direction: column;
        }
    }

}

@media only screen and (max-width: 622px){
    #vendorAddNewProduct .productNav{
        max-width: 100%;
    }

    #vendorAddNewProduct .productUploadSection{
        max-width: 100%;
        margin-top: 20px;
    }

    #vendorAddNewProduct .productUploadSection .header{
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
    }
}

@media only screen and (max-width: 611px){
    
}


@media only screen and (max-width: 580px) {
    .img1 svg {
        height: 400px;
    }

    #hero-section.breadCumb p {
        font-size: 20px !important;
    }

    #e-stalls {
        padding: 0;
    }

    .wekart-content {
        padding-bottom: 0 !important;
    }

    .upcomingEvCard .imageSide {
        padding-left: 0;
    }

    .section-title2 h1,
    .section-title2 span {
        font-size: 50px !important;
    }

    .about-us-card-common .icon {
        --size: 47px;
        height: var(--size);
        width: var(--size);
    }

    #hoe-het-werkt .section-title2 .werkt-tag{
        font-size: 20px !important;
    }

}


@media (max-width: 575.99px){
    .section-title h1, .section-title h1 span{
        font-size: 28px !important;
    }

    .sample-modal-view-card{
        grid-template-columns: 74px 230px 22px;
    }
}

@media only screen and (max-width: 485px){
    .sample-modal-view-card {
        display: flex;
        flex-wrap: wrap;
    }

    .sample-modal-view-card-content{
        width: 90%;
    }

    .sample-modal-view-chevron{
        width: 2%;
    }

}


@media only screen and (max-width: 430px) {
    .upcomingEvCard .contentSide {
        .title {
            font-size: 47px;
        }
    }

    .upcomingEvCard .contentSide {
        padding: 27px 20px;
        background-color: #120A20;
    }

    #hero-section h2.lead {
        font-size: 40px !important;
    }

    .homeHeroTitle, .homeHeroTitle span {
        font-size: 35px;
    }


}

@media only screen and (max-width: 426px) {
    .cta {
        padding: 60px 40px;
        padding-top: 108px;
    }

    .giftbox.yellow,
    .giftbox.pink {
        z-index: 1;
    }

    .cta .btn {
        padding: 10px 24px;
    }

    .cta .btn.alt {
        font-size: 15px;
    }
}

@media only screen and (max-width: 425px){
    .section-title h1,
    .section-title span {
        font-size: 40px;
    }

    .hideImg .img svg{
        height: 372px;
    }

    .upcomngEvTicketBtn{
        display: block;
        padding: 11px 58px 11px 58px;
    }

    .giftbox.pink{
        bottom: -50px;
        right: 0;
    }

    .productInfosForm .addOnCartBtn {
        padding: 12px 30px 12px 30px;
        font-size: 14px;
    }

    #productDetailsPage .infoSide .moreProductsLink a{
        padding: 10px 30px;
        font-size: 12px;
    }

    #myOrderPage .header {
        h2 {
            font-size: 23px;
        }
    }

    #myOrderPage .orderCards .orderCard{
        flex-wrap: wrap;
    }

    #myOrderPage .orderCards .orderCard .actions .betalingBtn {
            padding: 12px 18px;
            font-size: 14px;
            margin-top: 15px;
    }
    #myOrderPage .orderCards .orderCard .actions .onderwegBtn, #myOrderPage .orderCards .orderCard .actions .afgeleverd, .beschikbaarBtn{
        margin-top: 15px;
    }

    #myOrderPage .orderCards .orderCard .actions .bekijkenBtn {
        font-size: 14px;
        padding: 12px 18px;
    }
}

@media only screen and (max-width: 375px){
    #hero-section.breadCumb{
        h2.lead{
            font-size: 40px !important;
        }
        .hero-para{
            font-size: 18px !important;
        }
    }

    .btn-voor{
        height: 50px !important;
        width: 180px !important;
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 330px) {
    .img1 svg {
        height: 306px;
    }

}

@media (max-width: 575.99px) {
    .section-title2 h1, .section-title2 h1 span {
        font-size: 28px !important;
    }
}

@media (max-width: 767.99px) {
    .section-title2 h1, .section-title2 h1 span {
        font-size: 36px !important;
    }
}

@media only screen and (max-width: 396px){
    .goodie-form-card-header{
        gap: 15px;
    }
    .goodie-form-title{
        font-size: 22px;
        line-height: 100%;
    }
    .goodie-form-container{
        padding: 20px 30px 30px 20px;
    }
}

@media only screen and (max-width: 373px){
    .stall-dash-mod-actions {
        grid-template-columns: 1fr;
    }

    .stall-dash-step-title, .stall-dash-step-sub{
        font-size: 9px;
    }

    .stall-dash-steps-indicator{
        gap: 0;
    }

    .stall-dash-card {
        padding: 22px 16px 18px 16px;
    }

    .stall-dash-top-header {
        gap: 10px;
    }

}