﻿.allContent{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

.event-info-container {
    flex: 1;
    width: 100%;
    background: url(../images/participantImages/Group3646.png) no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 20px 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
}
@media (min-width: 992px) {
    .event-info-container .container::before {
        content: "";
        background-image: url(../images/home/Group2870.svg);
        background-repeat: repeat-y;
        position: absolute;
        top: 0;
        left: -80px;
        width: 66px;
        background-size: 66px 694px;
        height: 100%;
    }

    .event-info-container .container::after {
        content: "";
        background-image: url(../images/home/Group2878.svg);
        background-repeat: repeat-y;
        position: absolute;
        background-size: 66px 862px;
        top: 0;
        right: -80px;
        width: 66px;
        height: 100%;
    }

    .event-info-container .container.localize-en::before {
        background-image: url(../images/home/GroupFooter1.svg);
    }
    .event-info-container .container.localize-en::after {
        background-image: url(../images/home/GroupFooter2.svg);
    }
}

.custom-radio.active, .hidden-radio:checked + .custom-radio {
    background-color: var(--c-FED7BE);
    border: 1px solid var(--c-FED7BE);
    color: var(--c-293038) !important;
}

.custom-radio:hover {
    background-color: var(--c-FED7BE);
    border: 1px solid var(--c-FED7BE);
    color: var(--c-293038) !important;
}

.counter-wrapper {
    display: flex;
    gap: 16px;
    margin-top: 0px;
    padding-left: 50px;
    margin-bottom: 0px;
    width:fit-content;
    flex-direction:row;
}

.counter-wrapper .counter-item{
    width:56px;
    height:56px;
}
.counter-wrapper .counter-item .number{
    font-size: 24px;
    line-height: 28px;
}
.counter-wrapper .counter-item .text{
    font-size: 10px;
    line-height: 12px;
}

@media (max-width: 768px) {
    .order-sm-0 {
        order: 0;
    }

    .order-sm-1 {
        order: 1;
    }

    .order-sm-2 {
        order: 2;
    }

    .order-sm-3 {
        order: 3;
    }

    .order-sm-4 {
        order: 4;
    }
    .order-sm-5 {
        order: 5;
    }
    .order-sm-6 {
        order: 6;
    }

    .order-sm-7 {
        order: 7;
    }

    .order-sm-8 {
        order: 8;
    }

    .order-sm-9 {
        order: 9;
    }

    .order-sm-10 {
        order: 10;
    }

    .order-sm-11 {
        order: 11;
    }
}

.participant-qr-wrapper{
    width:120px;
    min-width:120px;
    height:120px;
    background-color:#fff;
    padding:8px;
    border-radius:0 8px;
}

.participant-qr-wrapper .qr{
    width:100% !important;
    height:100% !important;
    background-color:#000;
}

.info-message-wrapper{
    display:flex;
    flex-direction:column;
    justify-content:center;
}



.info-message-wrapper .default-h2-caption{
    color:var(--c-293028);
    font-size:24px;
    text-align:center;
    margin-top:24px;
}
.default-btn {
    white-space: nowrap;
    align-items: center;
    gap: 10px;
}

@media (max-width: 576px) {
    .default-btn {
        min-width:240px;
    }
}
.default-btn.dark-btn {
    color: var(--c-FDFCE7);
}
.default-btn.dark-btn:hover {
    color: #fff;
}
.default-btn svg{
    width:20px;
    height:20px;
}

.info-message-wrapper .default-text-content {
    color: var(--c-293028);
    font-size: 18px;
    text-align: center;
}

.info-message-wrapper .info-flu-text {
    color: var(--c-859375);
    font-size: 16px;
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
    justify-content: center;
}

/*Card Styles Start*/
.masonry {
    display:flex;
    flex-direction:column;
    gap:40px;
}

.masonry-item {
    break-inside: avoid;
    text-align: center;
    border-radius: 0 16px;
    font-size: 18px;
    padding: 40px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    perspective: 1000px;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.toggle-masonry {
    display:flex;
    flex-direction:column;
    gap:16px;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.masonry-card {
    padding-bottom: 16px;
    border-bottom: 1px solid #000;
}

.masonry-card .caption-svg {
    min-height: 40px;
    min-width: 40px;
}

/*.masonry-card-header{
    width:140px;
}*/
/*@media (max-width: 992px) {
    .masonry-card {
        border-bottom: 1px solid #000;
    }
}*/

@media (max-width: 1200px) {
    .masonry-item {
        font-size: 16px;
    }
    .masonry-card-header {
        width: 100%;
    }
/*    .masonry-card {
        padding-bottom: 16px;
    }*/
}

@media (min-width: 992px) {
    .col-inside-lg-5_1 {
        width: 9.33%;
        flex: 0 0 auto;
    }

    .col-inside-lg-5_2 {
        width: 21%;
        flex: 0 0 auto;
    }
}


.user-card-bg{
    background-image:url(../images/participantImages/Group3819.png);
}
.transport-card-bg {
    background-image: url(../images/participantImages/Group3630.png);
}
.hotel-card-bg {
    background-image: url(../images/participantImages/Group3722.png);
}
.wedding-card-bg {
    background-image: url(../images/participantImages/Group3831.png);
    background-position: top center;
}

.havalimanı_otel, .otogar_otel {
    background-image: url(../images/participantImages/oto_hav_otel.png);
}

.havalimanı_düğün {
    background-image: url(../images/participantImages/oto_hav_dugun.png);
}

.otel_düğün {
    background-image: url(../images/participantImages/otel_dugun.png);
}

.otel_havalimanı{
    background-image: url(../images/participantImages/otel_havalimani.png);
}

.otel_otogar {
    background-image: url(../images/participantImages/otel_otogar.png);
}

.düğün_otel {
    background-image: url(../images/participantImages/dugun_otel.png);
}

.düğün_havalimani, .düğün_otogar {
    background-image: url(../images/participantImages/dugun_havalimani.png);
}


@media (max-width: 992px) {
    .user-card-bg {
        background-image: url(../images/participantImages/Group3819_M.png);
    }

    .transport-card-bg {
        background-image: url(../images/participantImages/Group3630_M.png);
    }

    .hotel-card-bg {
        background-image: url(../images/participantImages/Group3722_M.png);
    }

    .wedding-card-bg {
        background-image: url(../images/participantImages/Group3831_M.png);
        background-position: 0 40%;
    }

    .oto_hav_otel {
        background-image: url(../images/participantImages/oto_hav_otel_M.png);
    }

    .oto_hav_dugun {
        background-image: url(../images/participantImages/oto_hav_dugun.png);
    }

    .otel_dugun {
        background-image: url(../images/participantImages/otel_dugun_M.png);
    }

    .otel_havalimani {
        background-image: url(../images/participantImages/otel_havalimani.png);
    }

    .otel_otogar {
        background-image: url(../images/participantImages/otel_otogar_M.png);
    }

    .dugun_otel {
        background-image: url(../images/participantImages/dugun_otel_M.png);
    }

    .dugun_havalimani {
        background-image: url(../images/participantImages/dugun_havalimani.png);
    }
}


.after-party-card-bg {
  background-image: url(../images/participantImages/s3.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 20px 30px;
  position: relative;
  color: white;
  z-index: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border-radius: 0 16px;
}

.after-party-card-bg h2{
    font-size:22px;
}

.wedding-card-see-location {
    color: #FDAD7E;
    font-size:16px;
    line-height:18px;
    font-weight:bold;
    text-decoration:underline;
}

.wedding-card-bg {
    color:var(--c-FEEDD9)
}

.shuttle-info-text{
    font-size:14px;
    color:var(--c-293028);
    margin-top:16px;
    display:flex;
    justify-content:center;
}

.card-flex-content{
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    /*gap:8px;*/
}
.resp-height{
    height:100%;
}


.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.card-flex-content img{
    width:18px;
    height:18px;
}

.card-caption {
    font-size: 20px;
    line-height: 24px;
    color: #293028;
    text-align: left;
    /*    margin-top: 16px;*/
    flex-grow: 1;
}

.card-mini-caption{
    font-size:16px;
    line-height:18px;
    font-style:italic;
    text-align:center;
    margin-top:5px;
}

/*.card-info-caption{
    position:absolute;
    left:-140px;
    bottom:0;
    width:140px;
    height:auto;
    overflow-wrap:break-word;
}*/

.user-card-text {
    text-align: start !important;
}

@media (max-width: 992px) {
    .card-flex-content {
        height: fit-content;
        /*gap:8px;*/
    }

    .masonry .vr:not(.after-party-card-bg .vr) {
        width: 100%;
        min-height: 1px;
        margin: 15px 0;
    }

    .card-mini-caption br {
        display: none;
    }

    .resp-height {
        height: fit-content;
    }

    .user-card-text {
        text-align: center !important;
    }
}

@media (max-width: 1200px) {
    .card-caption {
        margin-top: 0px;
    }
    .card-info-caption {
        position: relative;
        width: auto;
        left:initial;
        bottom:initial;
    }
}
.location-dash-wrapper {
    top: 35%;
    border-top: 1px dashed #000;
}

.location-dash-wrapper:before{
    background-color: #cbcae0;
    border: 1px solid #000;
}

.shuttle-card-bg .location-dash-wrapper:before {
    background-color: #d5ccb7;
}
.location-dash-wrapper:after{
    background-color:#000;
    border:1px solid #000;
}

.shuttle-card-bg .info-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    height: 50px;
    width: 50px;
    min-width: 50px;
    min-height: 50px;
}

@media (max-width: 992px) {
    .shuttle-card-bg .info-btn {
        height: 40px;
        width: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 0 8px;
    }

    .shuttle-card-bg .info-btn svg{
        width:15px;
        height:15px;
        position:absolute;
    }
}
.shuttle-card-bg .info-btn:hover{
    background-color: var(--c-F2FCF0);
    color: var(--c-859375);
}
.shuttle-card-bg .card-back .info-btn {
    top: 20px;
    right: 20px;
}

.shuttle-card-bg .info-btn.active{
    background-color: var(--c-F2FCF0);
    color: var(--c-859375);
}

.shuttle-card-bg .info-btn.active:hover {
    background-color:var(--c-859375);
    color: var(--c-F2FCF0) ;
}

/*Card Styles End*/