@use '../utils' as *;


.vl-sidebar-area{
    position: relative;
    z-index: 1;
    & .vl-widget-area{
        position: sticky;
        top:120px;
        & .vl-search-widget{
            background: var(--ztc-bg-bg-4);
            border-radius: 8px;
            padding:24px 20px;
            & .title{
                color: var(--ztc-text-text-3);
                font-size: var(--ztc-font-size-font-s24);
                line-height: var(--ztc-specing-height24);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                padding-bottom: 24px;
            }
            & .search{
                & input[type="text"] {
                    height: 48px;
                    border-radius: 8px;
                    border: none;
                    color:var(--ztc-text-text-2);
                    font-size:16px;
                    line-height:16px;
                    font-weight:600;
                }
                & span{
                    position: absolute;
                    content: "";
                    height: 48px;
                    width: 48px;
                    background: #FBD459;
                    right: 0;
                    line-height: 48px;
                    text-align: center;
                    border-radius: 8px;
                    cursor: pointer;
                }
            }
            & .vl-single-service{
                position: relative;
                z-index: 1;
                transition: .3s;
                margin-bottom: 20px;
                &:last-child{
                    margin-bottom: 0;
                }
                & a{
                    background: var(--ztc-text-text-1);
                    padding: 21px 20px;
                    border-radius: 8px;
                    position: relative;
                    z-index: 1;
                    display: block;
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    transition: .3s;
                }
                & span{
                    background: var(--ztc-bg-bg-4);
                    height: 32px;
                    width: 32px;
                    border-radius: 50px;
                    display: inline-block;
                    line-height: 32px;
                    text-align: center;
                    position: absolute;
                    right: 20px;
                    top: 14px;
                    z-index: 9;
                    transition: .3s;
                    & img{
                        transform: rotate(-90deg);
                        transition: .3s;
                    }
                }
                &:hover{
                    a{
                        background: var(--ztc-text-text-4);
                        transition: .3s;
                    }
                    & span{
                        background: #E4C152;
                        transition: .3s;
                    }
                    & img{
                        transform: rotate(0deg);
                        transition: .3s;
                    }
                }
            }
        }
    }

    & .vl-phone-widget{
        background: var(--ztc-bg-bg-4);
        border-radius: 8px;
        padding:24px 20px;
        & .title{
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s24);
            line-height: var(--ztc-specing-height34);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            margin-bottom: 24px;
        }
        & .phone{
            background: var(--ztc-text-text-4);
            padding: 10px 16px;
            display: inline-block;
            border-radius: 50px;
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            & span{
                background: #E4C152;
                height: 32px;
                width: 32px;
                display: inline-block;
                border-radius: 50px;
                line-height: 32px;
                text-align: center;
                margin-right: 4px;
            }
        }
    }

    & .vl-social-widget{
        background: var(--ztc-bg-bg-4);
        padding: 24px 20px;
        border-radius: 8px;
        & .title{
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s24);
            line-height: var(--ztc-specing-height24);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            margin-bottom: 24px;
        }
        & .social-icon{
            & ul{
                & li{
                    display: inline-block;
                    & a{
                        background: var(--ztc-text-text-1);
                        color: var(--ztc-text-text-3);
                        transition: .3s;
                        font-size: 20px;
                        height: 40px;
                        width: 40px;
                        line-height: 44px;
                        text-align: center;
                        border-radius: 50px;
                        display: block;
                        margin-right: 12px;
                        &:hover{
                            background: var(--ztc-text-text-4);
                            transition: .3s;
                        }
                    }
                }
            }
        }
        &.social-tags{
            padding-bottom: 8px;
        }
    }

}

.vl-event-content-area{
    & .vl-event-content{
        &.vl-blg-content{
            & .title{
                color: var(--ztc-text-text-3);
                font-size: var(--ztc-font-size-font-s32);
                line-height: var(--ztc-specing-height40);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                padding-top: 32px;
                padding-bottom: 16px;
                @media #{$lg}{
                    font-size: var(--ztc-font-size-font-s30);
                    line-height: var(--ztc-specing-height40);
                }
                @media #{$xs}{
                    font-size: var(--ztc-font-size-font-s28);
                    line-height: var(--ztc-specing-height40);
                }
            }
        }
        & .title{
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-specing-height32);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            padding-top: 32px;
            padding-bottom: 16px;
            @media #{$xs}{
                font-size: var(--ztc-font-size-font-s28);
                line-height: var(--ztc-specing-height40);
            }
        }
        & .para{
            color: var(--ztc-text-text-2);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height28);
            font-family: var(--ztc-family-font1);
            font-weight: var(--ztc-weight-semibold);
        }
    }
    & .vl-event-box-bg{
        background: var(--ztc-bg-bg-4);
        border-radius: 8px;
        padding: 32px 24px;
        & .icon-box{
            background: var(--ztc-text-text-4);
            display: flex;
            padding: 24px;
            border-radius: 8px;
            & .icon{
                & span{
                    height: 50px;
                    width: 50px;
                    line-height: 50px;
                    border-radius: 8px;
                    display: block;
                    background: var(--ztc-bg-bg-1);
                    text-align: center;
                    margin-right: 20px;
                }
            }
            & .content{
                & .title{
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s24);
                    line-height: var(--ztc-specing-height24);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    padding-bottom: 16px;
                }
                & .para{
                    color: var(--ztc-text-text-2);
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height28);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-semibold);
                }
            }
        }
        & .amount{
            background: var(--ztc-bg-bg-1);
            border-radius: 50px;
            display: inline-block;
            padding: 8px;
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s24);
            line-height: var(--ztc-specing-height24);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            width: 170px;
            & span{
                height: 48px;
                width: 48px;
                display: inline-block;
                border-radius: 50px;
                line-height: 48px;
                text-align: center;
                background: var(--ztc-text-text-4);
                margin-right: 16px;
                & img{
                    margin-top: -10px;
                }
            }
        }
        & .am-flex{
            display: flex;
            align-items: center;
            padding-top: 16px;
            padding-bottom: 32px;
            @media #{$md,$xs}{
                display:block;
            }
            & .dlr{
                & ul{
                    & li{
                        display: inline-block;
                        & a{
                            background: var(--ztc-bg-bg-1);
                            transition: .3s;
                            padding: 8px 12px;
                            border-radius: 50px;
                            display: inline-block;
                            color: var(--ztc-text-text-3);
                            font-size: var(--ztc-font-size-font-s18);
                            line-height: var(--ztc-specing-height18);
                            font-family: var(--ztc-family-font2);
                            font-weight: var(--ztc-weight-bold);
                            margin-right: 14px;
                            @media #{$md,$xs}{
                                margin-bottom: 10px;
                            }
                            &:hover{
                                background: var(--ztc-text-text-4);
                                transition: .3s;
                            }
                        }
                    }
                }
            }
            & .contact{
                & .customer{
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-bold);
                    border: 1px solid #181713;
                    display: inline-block;
                    padding: 8px 8px 8px 20px;
                    border-radius: 50px;
                    margin-left: 18px;
                    transition: .3s;
                    @media #{$md,$xs}{
                        margin-left: 0px;
                    }
                    & span{
                        background: var(--ztc-bg-bg-1);
                        height: 36px;
                        width: 36px;
                        display: inline-block;
                        border-radius: 50px;
                        transform: rotate(-45deg);
                        line-height: 36px;
                        text-align: center;
                    }
                    &:hover{
                        background: var(--ztc-text-text-4);
                    }
                }
            }
        }
        & .select-method{
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            padding-bottom: 32px;
            & .title{
                color: var(--ztc-text-text-3);
                font-size: var(--ztc-font-size-font-s24);
                line-height: var(--ztc-specing-height24);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                padding-top: 32px;
            }
            & .select-meth {
                display: flex;
                @media #{$xs}{
                    display: block;
                }
                & .ofline {
                    margin-left: 24px;
                    @media #{$xs}{
                        margin-left: 0px;
                        margin-top:14px;
                    }
                }
                input#Online {
                    height: 22px;
                    width: 22px;
                    display: inline-block;
                    line-height: 22px;
                    text-align: center;
                }
                
                .online {
                    display: flex;
                    align-items: center;
                    & label{
                        color: var(--ztc-text-text-3);
                        font-size: var(--ztc-font-size-font-s18);
                        line-height: var(--ztc-specing-height18);
                        font-family: var(--ztc-family-font2);
                        font-weight: var(--ztc-weight-bold);
                        margin-left: 4px;
                    }
                }
                input#Offline {
                    height: 22px;
                    width: 22px;
                    display: inline-block;
                    line-height: 22px;
                    text-align: center;
                }
                
                .ofline {
                    display: flex;
                    align-items: center;
                    & label{
                        color: var(--ztc-text-text-3);
                        font-size: var(--ztc-font-size-font-s18);
                        line-height: var(--ztc-specing-height18);
                        font-family: var(--ztc-family-font2);
                        font-weight: var(--ztc-weight-bold);
                        margin-left: 4px;
                    }
                }
            }
        }
        & .donate-form{
            margin-top: 32px;
            & form {
                // display: flex;
                // justify-content: space-between;
                @media #{$xs}{
                    display: block;
                }
                input{
                    border-radius: 8px;
                    @media #{$xs}{
                        width: 100%;
                        margin-bottom:15px;
                        &:last-child{
                            margin-bottom:0px;
                        }
                    }
                    &::placeholder{
                        color: var(--ztc-text-text-2);
                        font-size: 16px;
                        line-height: 16px;
                        font-weight:600;
                     }
                }
                input[type="text"],
                input[type="email"]{
                    color: var(--ztc-text-text-2);
                    font-size: 16px;
                    line-height: 16px;
                    font-weight:600;
                    &::placeholder{
                        color: var(--ztc-text-text-2);
                        font-size: 16px;
                        line-height: 16px;
                        font-weight:600;
                    }
                }
            }
        }
        & .total-anoumt{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            @media #{$xs}{
                display: block;
            }
            & .content{
                & .title{
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s24);
                    line-height: var(--ztc-specing-height24);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    @media #{$xs}{
                        margin-top:15px;
                    }
                }
            }
        }
    }
    & .event-content-area{
        & .title{
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-specing-height32);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            padding-top: 32px;
            @media #{$lg}{
                line-height: var(--ztc-specing-height42);
            }
            @media #{$xs}{
                font-size: var(--ztc-font-size-font-s26);
                line-height: var(--ztc-specing-height35);
            }
        }
        & .para{
            color: var(--ztc-text-text-2);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height28);
            font-family: var(--ztc-family-font1);
            font-weight: var(--ztc-weight-semibold);
            padding-top: 16px;
        }
    }
}

.vl-singlevent-iner{
    & .more-title{
        & .title{
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s44);
            line-height: var(--ztc-specing-height44);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            @media #{$xs}{
                font-size: var(--ztc-font-size-font-s34);
                line-height: var(--ztc-specing-height44);
            }
        }
    }
}

.sidebar-area-all {
    position: sticky;
    top: 130px;
}