@import "variables";
html{
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
    color:inherit;
    display: flex;

    align-items: center;
    &.back{
        align-items: unset;
        justify-content: unset;
    }
    &.center{
        justify-content: center;
    }
    &.caro{
        width: 100%;
        height: 100%;
    }
}
.white{

background-color: white !important;
}
.bemaac{
    a{
        justify-content: unset;
        text-decoration: underline;
    }
    img{
        opacity: 1;
        aspect-ratio: unset !important;
    }
}
.section{
    margin-top: 140px;
    background-color: $section-background;
        &.white{
            background-color: #FFFFFF;
        }
    .section-title{
        height: 90px;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 26px;
        letter-spacing: 0.5px;
        &.small{
            font-size: 15px;
        }
        &.medium{
            font-size: 22px;
        }
    }
    .section-nav{
        background-color: $white;
        display: flex;
        height: 90px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 50px;
        width: 100%;
        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
            overflow-x: auto;
        }
        box-sizing: border-box;
        .section-nav-item{
            border:1px solid $global-border;
            border-radius: 45px;
            padding: 20px;
            margin-right: 10px;
            box-sizing: border-box;
            width: max-content;

            &:hover{
                border:1px solid $black;
            }
            &.active{
                border:1px solid $black;
            }
        }

    }
    .section-body{
        //padding-top: 80px;
        padding-bottom: 80px;
        &.half-p{
            padding-top: 20px;
            padding-bottom: 40px;
        }
        &.no-p{
            padding-top: 0px;
            padding-bottom: 40px;
        }

        .back{
            font-size: $font-editing-size;
            i{
                font-size: 10px;
                display: flex;
                align-items: center;
                margin-right: 3px;
            }
        }
    }
}
.bg-grey{
    background-color: $section-background;
}
.mt-10{
    margin-top: 5em;
}
//#___gcse_0{
//    width: 100% !important;
//}
//.gsc-search-button{
//    width: 0 !important;
//    display: none;
//}
//.gssb_c{
//    z-index: 99999 !important;
//    .gsc-completion-container{
//        position: fixed;
//    }
//}
.service-main-banner{
    margin-bottom: 30px;
    img{
        width: 100%;
        object-fit: cover;
        //aspect-ratio: 3/1;
        &.no-aspect{
            aspect-ratio: unset !important;
        }
        &.aspect{
            aspect-ratio: 3/1 !important;
        }
        margin-bottom: 10px;
    }
    .draw-image-text{
        font-weight: 600;
        margin-top: 10px;
        padding-#{$start-direction}: 10px;
    }
    .service-main-banner-description{
        margin-top: 50px;
        font-size: $font-editing-size;
        span{
            font-size: unset !important;
        }
        opacity: 0.8;
    }
    .service-main-banner-title{
        text-transform: capitalize;
        font-weight: 500;
        font-size: $font-editing-size;
        span{
            font-size: unset !important;
        }
        margin-bottom: 20px;
    }
}
.blog-component{
    margin-bottom: 80px;
    .blog-component-title{
        font-weight: 500;
        font-size: $font-editing-size;
        span{
            font-size: unset !important;
        }
        margin-bottom: 20px;
        text-transform: capitalize;
    }
    .blog-component-container{
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1%;
        .blog-component-blog-item{
            margin: 1%;
            width: 31%;
            display: block;
            position: relative;
            aspect-ratio: 1/1;
            @media #{$mediaquery-xsm},#{$mediaquery-sm} {
             width: 100%;
                margin-bottom: 30px;
            }
            @media #{$mediaquery-md},#{$mediaquery-lg} {
                width: 48%;
                margin-bottom: 30px;
            }
            img{
                width: 100%;
                object-fit: cover;
                aspect-ratio: 1/1;
                filter: brightness(.80);
                transition: $transition-2 ease-in-out;
            }
            .blog-component-blog-item-details{
                display: flex;
                justify-content: space-between;
                padding-top: 15px;
                text-transform: capitalize;
                font-size: $font-editing-size;
                span{
                    font-size: unset !important;
                }
                &.block{
                    display: block;
                    padding-#{$start-direction}:10px ;
                    padding-bottom: 10px;
                    transition: $transition-2 ease-in-out;
                    .label{
                        text-align: left;
                        letter-spacing: 0px;
                        color: #000000;
                        opacity: 1;
                        font-size: 15px;
                        font-weight: normal;
                        margin-top: 0px;
                        margin-bottom: 5px;
                    }
                    .price{
                        margin-top: 10px;
                        margin-bottom: 5px;
                    }

                }
                .title{
                    width: 60%;
                    font-size: $font-editing-size;
                    span{
                        font-size: unset !important;
                    }

                }
                .count{
                    opacity: 0.5;
                    font-style: italic;
                }
            }
            .gal-sign{
                position: absolute;
                z-index: 1;
                top: 20px;
                #{$end-direction} : 20px;

            }
                &.with-hov{
                    cursor: pointer;
                    button{
                        position: absolute;
                        top: 45%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        color: white;
                        border: unset;
                        opacity: 0;
                        transition: $transition-2;
                    }
                    &:hover{
                        img{
                            filter: brightness(.60);
                        }
                        button{
                            opacity: 1;
                        }
                        .blog-component-blog-item-details{
                            &.block{
                                box-shadow: 0px 3px 60px #0000000D;
                            }
                        }
                    }

                }
        }
    }
}
.restoration-page-detail{
    display: flex;
    justify-content: center;
    .restoration-box{
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .left{
            width: 40%;
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        .right{
            width: 50%;
            ul{
                list-style: none;
                padding: unset;
                li{
                    display: flex;
                    justify-content: space-between;
                    border-top: 2px solid #EDEDED;
                    padding: 10px 0;
                    &:first-of-type{
                        border-top: unset;
                    }
                    .label{
                        text-align: left;
                        letter-spacing: 0px;
                        color: #000000;
                        opacity: 1;
                        font-weight: 600;
                        font-size: 15px;
                        line-height: 20px;
                    }
                    .price{
                        letter-spacing: 0px;
                        color: #000000;
                        opacity: 1;
                        font-weight: normal;
                        font-size: 15px;
                        line-height: 20px;
                    }
                }
            }
        }
        @media #{$mediaquery-xsm},#{$mediaquery-sm} {
            width: 100%;
            margin-bottom: 30px;
        }
        @media #{$mediaquery-md},#{$mediaquery-lg} {
            width: 100%;

        }
        .description-box{
            margin-top: 30px;
            width: 100%;
            padding: 20px 10px;
        }
    }
}
.gallery-component{
    .gallery-component-title{
        font-weight: 500;
        font-size: $font-editing-size;

        span{
            font-size: unset !important;
        }
        margin-bottom: 20px;
        text-transform: capitalize;
    }
    img{
        width: 100%;
        object-fit: cover;
        aspect-ratio: 3/1;
    }
    .gal-slider{
        height: 210px;
        padding-top: 30px;
        padding-bottom: 30px;
        .slider-item{
            width: 140px;
            height: 140px;
            margin: 1%;

               img{
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
               }

        }
        .owl-nav{
            position: absolute;
            top: 35%;
            width: 100%;
            justify-content: space-between;
            display: flex;
            left: -20px;
            @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
               display: none;
            }
            .owl-next{
                right: -40px;
                position: absolute;
            }
        }
    }
}
.paragraph-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    &.even{
        flex-wrap: wrap-reverse;
    }
    .paragraph-col{
        position: relative;
        width: 48%;
        &.full-width{
            width: 100%;
        }
          img{
              width: 100%;
              object-fit: cover;
              margin-bottom: 10px;
              //aspect-ratio: 1/1;
              &.aspect{
                  aspect-ratio: 1/1 !important;
              }
          }
        .draw-image-text{
            font-weight: 600;
            margin-top: 10px;
            padding-#{$start-direction}: 10px;
        }
        &.text{
            margin: auto 0;
        }
        @media #{$mediaquery-xsm},#{$mediaquery-sm} {
         width: 100%;
            margin-bottom: 30px;
        }
        .parag-title{
            font-size: 20px;
            letter-spacing: 1px;
            span{
                font-size: unset !important;
            }
        }
        .parag-body{
            padding-top: 40px;
            opacity: 0.8;
            font-size: $font-editing-size;
            a{
                display: unset !important;
            }
            span{
                font-size: unset !important;
            }
        }
    }
}
.link-component{
    display: flex;
    flex-wrap: wrap;
    margin: 30px -1%;

    .link-item{
        display: flex;
        height: fit-content;
        width: 47.5%;
        margin: 1%;
        border: 2px solid #0000000D;
        position: relative;
        align-items: unset;
        transition: $transition-2;
        &.white{
            background-color: $white;
        }
        &:hover{
            box-shadow: 0px 3px 60px #0000000D;
            background-color: $white;
            border: 2px solid $white;
        }
        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
           width: 100%;
        }
        .banner{
            width: 40%;
            aspect-ratio: 1/1;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        }
        .details{
            width: 70%;
            padding: 30px;
            .details-title{
                font-size: $font-editing-size;
                font-weight: 500;
                margin-bottom: 20px;
            }
            .details-description{
                opacity: 0.5;
                line-height: 20px;
                height: 100px;
                font-size: $font-editing-size;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;

            }
        }
        .link-item-link{
            position: absolute;
            top:15px;
            #{$end-direction} : 20px;
        }
    }
}
.event-component{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1%;
    .event-item{
        aspect-ratio: 1/1;
        width: 48%;
        margin: 1%;
        position: relative;
        @media #{$mediaquery-xsm},#{$mediaquery-sm} {
        width: 100%;
        }
        img{
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            filter: brightness(0.7);
        }
        .event-date1{
            position: absolute;
            top: 22px;
            left: 45px;
            font-size: $font-editing-size;
            color: $white;
            z-index: 1;
        }
        .event-date2{
            position: absolute;
            bottom: 0;
            #{$start-direction}: 0;
            font-size: 20px;
            color: $white;
            z-index: 1;
            background-color: $black;
            height: 50px;
            width: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .event-label{
            color:$white;
            font-size: 20px;
            position: absolute;
            bottom: 65px;
            #{$start-direction}: 40px;
            letter-spacing: 1px;
            z-index: 1;
        }
    }
}
.event-details{
    .event-date{
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .event-main-banner{
        width: 100%;
        aspect-ratio: 3/1;
        object-fit: cover;
    }
    .artists-section{
        background-color: $artists;
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 30px;
        .artists-section-container{
            display: flex;
            flex-wrap: wrap;
            margin: 0 -1%;
            .artists-section-artist{
                width: 30%;
                margin: 1.5%;
                @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                   width: 100%;
                }
                .artists-section-artist-header {
                    border-top: 1px solid black;
                    padding-bottom: 30px;
                    cursor: pointer;
                    position: relative;
                  .title{
                      font-weight: 400;
                      font-size: $font-editing-size;
                      padding-top: 15px;
                      padding-bottom: 10px;
                  }
                    .job{
                        opacity: 0.5;
                    }
                    .plus{
                        position: absolute;
                        top: 35%;
                        #{$end-direction}: 15px;
                        transform: translate(0, -50%);
                        cursor: pointer;
                        //svg{
                        //    g{
                        //        .rot1{
                        //            transition: $transition-2;
                        //         &.rot{
                        //             transform: rotate(90deg);
                        //         }
                        //        }
                        //    }
                        //}
                    }
                }
                .artists-section-artist-body{
                    display: none;
                    opacity: 0.75;
                }
            }
        }
    }
    .partners-section{
        .partners-section-container{
            display: flex;
            flex-wrap: wrap;
            .partners-section-partner{
                display: flex;
                justify-content: center;
                align-items: center;
                border:2px solid $partner-border;
                width: 16.35%;
                aspect-ratio: 1/1;
                opacity: 0.5;
                @media #{$mediaquery-md},#{$mediaquery-lg} {
                   width: 32%;
                }
                @media #{$mediaquery-xsm},#{$mediaquery-sm}{
                    width: 48%;
                }
                img{

                    width: 100%;
                    object-fit: contain;

                }
            }
        }
    }
    .gallery-section{
        .gallery-section-container{
            .gallery-slider{
                .slider-item{
                    aspect-ratio: 1/1;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .owl-nav{
                    position: absolute;
                    top: -50px;
                    #{$end-direction}: 80px;
                    .owl-prev{
                        margin-#{$end-direction}: 20px;
                    }
                }
            }
        }
    }
    .video-section{
        .video-section-container{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .video-section-video{
                width: 65%;
                @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
               width: 100%;
                    margin-bottom: 30px;
                }
                .fancybox-media{
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        filter: brightness(0.7);
                    }
                    .play-size{
                        position: absolute;
                    }
                }
            }
            .video-section-description{
                width: 30%;
                @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                    width: 100%;
                    margin-bottom: 30px;
                }
                b{
                    font-weight: 500;
                }
            }
        }
    }
    .event-title{
        font-size: $font-editing-size;
        span{
            font-size: unset !important;
        }
    }
}

.button_1{

    cursor: pointer;
    text-transform: uppercase;
    transition: 0.1s ease-in-out;

    &.black{
        background: $black;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
    &.white{
        background: $white;
        .text{
            color: $black;

        }
    }
    &.small{
        width: 120px;
        height: 40px;
        font-size: 12px;
    }
    &.big{
        width: 160px;
        height: 40px;
        font-size: 12px;
    }
    &:hover{
        background-color: $background_1;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
}
.button_2{
    cursor: pointer;

    text-transform: uppercase;
    transition: 0.1s ease-in-out;

    &.black{
        background: $black;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
    &.white{
        background: $white;
        .text{
            color: $black;

        }
    }
    &.small{
        width: 120px;
        height: 40px;
        font-size: 12px;
    }

    &:hover{
        background-color: $background_2;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
}
.button_3{
    cursor: pointer;

    text-transform: uppercase;
    transition: 0.1s ease-in-out;

    &.black{
        background: $black;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
    &.white{
        background: $white;
        .text{
            color: $black;

        }
    }
    &.small{
        width: 120px;
        height: 40px;
        font-size: 12px;
    }

    &:hover{
        background-color: $background_3;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
}
.button_4{
    cursor: pointer;

    text-transform: uppercase;
    transition: 0.1s ease-in-out;

    &.black{
        background: $black;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
    &.white{
        background: $white;
        .text{
            color: $black;

        }
    }
    &.small{
        width: 120px;
        height: 40px;
        font-size: 12px;
    }

    &:hover{
        background-color: $background_4;
        .text{
            color: $white;
            transition: $transition-2;
        }
    }
}
.pagination{
    display: flex;
    justify-content: center;
    margin: 50px -1%;
    a{
        font-size: 16px;
        margin: 1%;
        &.active{
            text-decoration: underline;
        }
    }
}
.play-size{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
.mob-search-cont{
    height: 140px;
    display: flex;
    align-items: center;
    .mob-search-form{
        width: 90%;
        align-items: center;
        display: flex;
        margin: 0 auto;
        border: 1px solid $grey2;
        height: 40px;
        &.rev{
            flex-direction: row-reverse;
        }
        .search-input{
            background: transparent;
            border: unset;
            color: black;
            outline: unset;
            width: 80%;
            padding: 5px;
            padding-left: 10px;

        }
        .search-btn{
            background: unset;
            border: unset;
            outline: unset;
            cursor: pointer;
            svg{
                stroke: $black;
            }
        }
    }
}
.navbar{
    z-index: 9999;
background-color: transparent;
height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: $transition-3;
    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
       display: none;
    }
    .height-100{
        height: 100%;
    }

    .navbar-container{
        display: flex;
        justify-content: space-between;
        height: 100%;
        align-items: center;

        .navbar-brand{
            display: block;
            width: 100px;
            img{
                width: 100%;
                object-fit: contain;
            }
            .dark{
                display: none;
            }
            .light{
                display: block;
            }

        }

    }
    .navbar-nav{
        display: flex;
        list-style: none;
        align-items: center;
       &.w-6{
           width: 60%;
       }
        &.w-1{
            width: 100%;
        }
        &.flex-end{
            justify-content: flex-end;
        }

        li{
            margin-right: 2%;
            position: relative;

            .search-form{
                width: 300px;
                align-items: center;
                display: flex;
                &.rev{
                    flex-direction: row-reverse;
                }
                .search-input{
                    background: transparent;
                    border: unset;
                    color: black;
                    outline: unset;
                    width: 80%;
                    padding: 5px;
                    padding-left: 10px;
                    border-left: 1px solid $grey2;
                    &:focus{
                        background-color: white;
                    }
                }
                .search-btn{
                    background: unset;
                    border: unset;
                    outline: unset;
                    cursor: pointer;
                    svg{
                        stroke: $white;
                    }
                }
            }
            .navbar-nav-level-m{
                background-color: $white;
                position: absolute;
                border-radius: 5px;
                height: unset;
                min-width: 0px;
                width: 0px;
                overflow: hidden;
                top: 35px;
                transition: $transition-2;
                display: block;
                    opacity: 0;
                li{
                    font-weight: 400;
                    position: relative;
                    color: $grey4;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 2px solid $global-border;
                    &::after{
                        content:" ";
                        position: absolute;
                        right: -100px;
                        width: 100px;
                        height: 51px;
                        background-color: transparent;
                    }
                    svg{
                        stroke:$white;
                    }
                    a{
                        height: 0px; line-height: 36px;
                        opacity: 0;
                        padding: 0 20px;
                        white-space:nowrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        transition: 0.3s all;


                    }
                    &:hover{
                        color: $black;
                        svg{
                            stroke: $black;
                        }
                    }
                    //.navbar-nav-sublevel{
                    //    background-color: $white;
                    //    position: absolute;
                    //    border-radius: 5px;
                    //    width: 20em;
                    //    top: 10px;
                    //    right: -270px;
                    //    transition: $transition-2;
                    //    display: none;
                    //
                    //
                    //    li{
                    //        font-weight: 400;
                    //        position: relative;
                    //        color: $grey4;
                    //        padding: 7%;
                    //
                    //        display: flex;
                    //        justify-content: space-between;
                    //        align-items: center;
                    //        border-bottom: 2px solid $global-border;
                    //        svg{
                    //            stroke:$white;
                    //        }
                    //        a{
                    //            white-space:nowrap;
                    //            display: flex;
                    //            justify-content: space-between;
                    //            align-items: center;
                    //            width: 100%;
                    //
                    //
                    //        }
                    //        &:hover{
                    //            color: $black;
                    //            svg{
                    //                stroke: $black;
                    //            }
                    //        }
                    //    }
                    //}
                }
            }
            &:hover{
                .navbar-nav-level-m{
                    opacity: 1;
                    min-width: 25em;
                    height: auto;
                    a{
                        height:36px; opacity: 1;
                    }
                }



            }
        }
    }
    .nav-sep{
        border-top: 2px solid $border-color;
    }
    .nav-second{

        display: flex;
        justify-content: space-between;
        align-items: center;
        ul{
            padding-left: unset;
            color: $white;
            li{
                margin-right: 3%;
                font-weight: bold;

                .sign{
                transition: $transition-1;
                    margin-left: 1px;

            }
                a{
                    transition: $transition-1;
                }
                &:hover{
                    .sign{
                        transform: rotate(55deg);
                    }
                    a{
                        transform: scale(0.9);
                    }
                }
            }
        }
        .nav-second-left{
            width: 75%;
            height: 40px;
            .navbar-nav{
                height: 100%;
                &.navbar-nav-level-m{
                    height: unset;

                    //li{
                    //    height: 100%;
                    //}
                }
                align-items: unset;
            }

        }
        .nav-second-right{
            width: 25%;
        }
    }
    &.fixed{
        background-color:white;
        .navbar-container {
            .navbar-brand {
                .dark {
                    display: block;
                }

                .light {
                    display: none;
                }
            }
        }
    }
&.compact{
    position: fixed;
    background-color: $white;

    .nav-sep{
        border-top:2px solid $grey2;
    }
    .header-lang{
        background-color: $white;
        color: $black;
    }
    .nav-second{
        background-color: $white;
        ul{
            color: $black;
        }
    }
    .navbar-nav{
        li{
            .search-form{
                .search-input{
                    color:$black;
                }
                .search-btn{
                    svg{
                        stroke: $black;
                    }
                }
            }
        }
    }
    .navbar-container{
        .navbar-brand{
            .dark{
                display: block !important;
            }
            .light{
                display: none !important;
            }
        }
    }
}
}
.mobile-navbar{
    display: none;
    position: fixed;
    background-color: $white;
    z-index: 999999;
    top: 0;
    right: 0;left: 0;
    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
        display: block;
    }
    .mobile-nav-header{

        padding-top: 30px;
        padding-bottom: 30px;
        box-shadow: 0 0 15px rgb(15 11 12 / 10%);

        .mobile-nav-header-container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .mobile-nav-logo{
                width: 15%;
                img{
                    width: 100%;
                    object-fit: contain;
                }
            }

            .menu-burger {
                width: 50px;
                height: 50px;
                background-color: transparent;
                border: none;
                cursor: pointer;
                display: flex;
                padding: 0;
                svg{
                    width: 50px;
                    height: 50px;
                }
            }
            .line {
                fill: none;
                stroke: black;
                stroke-width: 6;
                transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
            }
            .line1 {
                stroke-dasharray: 60 207;
                stroke-width: 6;
            }
            .line2 {
                stroke-dasharray: 60 60;
                stroke-width: 6;
            }
            .line3 {
                stroke-dasharray: 60 207;
                stroke-width: 6;
            }
            .opened {
                .line1 {
                    stroke-dasharray: 90 207;
                    stroke-dashoffset: -134;
                    stroke-width: 6;
                }
                .line2 {
                    stroke-dasharray: 1 60;
                    stroke-dashoffset: -30;
                    stroke-width: 6;
                }
                .line3 {
                    stroke-dasharray: 90 207;
                    stroke-dashoffset: -134;
                    stroke-width: 6;
                }
            }
        }

    }
    .mobile-nav-body{
        display: none;
        height: 100vh;
        padding-top: 30px;

        overflow: auto;
        height: 85vh;
        ul{
            list-style: none;
            padding: unset;
            width: 100%;
            li{
                line-height: 60px;
                box-shadow: 0px 1px 0px #EDEDED;
                font-size: 17px;
                text-align: center;
            }
        }
    }
}
.custom-select{
    border: unset;
    outline: unset;
    background: transparent;
    color: white;
&.black{
    color: $black;
    background-color: $white;
}
    &.grey{
        color: #999999;
        background-color: $white;
    }
    &.wid{
       width: 100%;
        height: 100%;
    }
    &.mobile-nav-lang{
        font-size: 17px;
    }
}
.main-slider{
    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
       margin-top: 140px;
    }
    .slider-item{
        position: relative;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
          height: unset;
            aspect-ratio: 3/2;
        }
        .image-overlay{
            position: absolute;
            top:0;
            bottom: 0;
            right: 0;
            left: 0;
            background: rgb(0,0,0);
            background: linear-gradient(354deg, rgba(0,0,0,0.09987745098039214) 0%, rgba(0,0,0,0.4472163865546218) 100%);
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;

        }
        .slider-text{
            position: absolute;
            bottom: 100px;
            #{$start-direction}: 30px;
            font-size: 40px;
            color: white;
            text-transform: capitalize;
            @media #{$mediaquery-md},#{$mediaquery-lg} {
                bottom: 35px;
                font-size: 40px;
            }
            @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                bottom: 20px;
                font-size: 20px;
            }
        }
    }
    .owl-nav{
        position: absolute;
        top: 50%;
        /* right: 0; */
        left: 4%;
        /* right: -1%; */
        display: flex;
        justify-content: space-between;
        width: 90%;
        font-size: 20px;
        opacity: 0;
        transition: $transition-2;
        &:hover{
            opacity: 1;
        }
    }
}
.mute-toggle{
    border: unset;
    outline: unset;
    background: white;
    padding: 10px 30px;
    position: absolute;
    top: 120px;
    right: 30px;
}
.slider-text-marque{
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100vw;
    position: absolute;
    bottom: 0;
    height: 160px;
    z-index: 2;
    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
        height: 40px;
    }
    .text{
        color: $white;
        font-size: 7em;
        text-transform: capitalize;
        position: absolute;
        width: 100vw;
        white-space: nowrap;
        text-align: center;
        /* Starting position */
        transform: translateX(0%);
        /* Apply animation to this element */
            padding-#{$start-direction}: 40px;
        display: flex;
        justify-content: center;
        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
            font-size: 3em;
        }
    }
    &.active{
       .text{
           padding-#{$start-direction}: unset !important;
           animation: scroll-left 8s linear infinite;
       }
    }
}
.blo{
    display: inline !important;
}
.location-label{
    padding: 10px;
    font-weight: 500;
}
.painter{
    .painter-description{
        opacity: .7;
        font-size: 15px;
    }
    .painter-container{
        display: flex;
        flex-wrap: wrap;
        margin: 30px -1%;

        .paint{
            width: 23%;
            margin: 1%;
            position: relative;
            @media #{$mediaquery-md},#{$mediaquery-lg} {
                width: 31%;
            }
            @media #{$mediaquery-xsm},#{$mediaquery-sm} {
             width: 48%;
            }
            img{
                width: 100%;
                object-fit: cover;
                filter: brightness(.65);
                aspect-ratio: 1/1;
            }
            .label{
                position: absolute;
                color: $white;
                bottom: 20px;
                width: 40%;
                #{$start-direction} : 20px;
                @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                    font-size: 10px;
                }
            }
            .label_sec{
                position: absolute;
                color: $white;
                bottom: 20px;
                width: 40%;
                #{$end-direction} : 20px;
                @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                    font-size: 10px;
                }
            }
        }
    }
}
.press{
    .press-container{
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1%;
        .press-item{
            width: 30.33%;
            margin: 1%;
            box-shadow: 0px 3px 30px #00000012;
            aspect-ratio: 1/1;
            position: relative;
            .publications-overlay{
                background-color: $black;
                opacity: 0.3;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                position: absolute;
            }
            @media #{$mediaquery-md},#{$mediaquery-lg} {
                width: 48%;
                margin-bottom: 50px;
            }
            @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                width: 100%;
                margin-bottom: 50px;
            }
            .press-link{
                position: absolute;
                top: 30px;
                #{$end-direction}: 30px;
                svg{
                    width: 20px ;
                    height: 20px;
                }
            }
            img{
                width: 120px;
                position: absolute;
                #{$start-direction}: 20px;
                top:30px;
            }
            .press-item-desc{
                position: absolute;
                top: 70%;
                width: 80%;
                #{$start-direction}: 20px;
                font-size: 15px;
            }
            .press-item-date{
                position: absolute;
               bottom:5%;
                width: 80%;
                #{$start-direction}: 20px;

                opacity: 0.6;
            }
        }
    }
}
.publications{
    .publications-container{
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1%;
        .publications-item{
            width: 30.33%;
            margin: 1%;
            box-shadow: 0px 3px 30px #00000012;
            aspect-ratio: 1/1;
            position: relative;
            color: $white;
            @media #{$mediaquery-md},#{$mediaquery-lg} {
                width: 48%;
                margin-bottom: 50px;
            }
            @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                width: 100%;
                margin-bottom: 50px;
            }
            .publications-overlay{
                background-color: $black;
                opacity: 0.3;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                position: absolute;
            }
            .publications-link{
                position: absolute;
                bottom:5%;
                #{$end-direction}: 30px;
                svg{
                    width: 20px ;
                    height: 20px;
                }
            }
            img{
                width: 80px;
                position: absolute;
                #{$start-direction}: 20px;
                top: 55%;
            }
            .publications-item-desc{
                position: absolute;
                top: 70%;
                width: 80%;
                #{$start-direction}: 20px;
                font-size: 15px;
            }
            .publications-item-date{
                position: absolute;
                bottom:5%;
                width: 80%;
                #{$start-direction}: 20px;

                opacity: 0.6;
            }
        }
    }
}
.policy{
    opacity: 0.7;
}
.join-community{
    .community-mainbanner{
        width:100%;
        object-fit: cover;
        aspect-ratio: 3/1;
    }
    .join-community-container{
        margin: 0 auto;
        width: 60%;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px;

        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
           width: 100%;
        }
        .title-1{
            font-weight: 400;
            font-size: 20px;
            &.center{
                text-align: center;
                width: 100%;
            }
            &.big{
                font-size: 23px;
                font-weight: 500;
                padding-top: 60px;
            }
        }
        .title-2{

            font-size: 14px;
            margin-top: 10px;
            margin-bottom: 30px;
        }
        .community-form{
            display: flex;
            flex-wrap: wrap;
            margin:45px -1%;
            .input-text{
                width: 100%;
                border: 1px solid #0000001A;
                outline: unset;
                background-color: $white;
                height: 50px;
                margin: 1%;
                position: relative;
                padding-#{$start-direction}:20px ;
                box-sizing: border-box;
                &.less{
                    width: 96%;
                }
                &::placeholder{
                    color: #999999 !important;
                }
                &.half{
                    width: 47%;
                    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                       width: 100%;
                    }
                }
                //&::after{
                //    content: '*';
                //    color: red;
                //    position: absolute;
                //    top: 1px;
                //    left: 30px;
                //}
            }
            .phone{
             position: relative;
                overflow: hidden;
                width: 47% !important;
                @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                   width: 100% !important;
                }
                .code{
                    position: absolute;
                    top: 50%;
                    left: 10px;
                    transform: translate(0, -50%);
                }
                .numb{
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    left: 70px;
                }
            }
            textarea{
                height: unset !important;
                resize: none;
                font:unset;
            }
            .filter-checkbox {
                width: 100%;
                display: block;
                position: relative;
                padding-left: 30px;
                cursor: pointer;
                padding-bottom: 20px;
                font-size: 14px;
                font-weight: 400;
                color: $black;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                    margin: 1%;
                text-align: left;
                input {
                    position: absolute;
                    opacity: 0;
                    cursor: pointer;
                    height: 0;
                    width: 0;

                    &:checked {
                        ~ {
                            span.filter-label {
                                color: $black;
                            }

                            .checkmark {
                                background-color: black;

                                &:after {
                                    display: block;
                                }
                            }
                        }
                    }
                }

                .checkmark {
                    &:after {
                        left: 6px;
                        top: 2px;
                        width: 4px;
                        height: 8px;
                        border: solid white;
                        border-width: 0 2px 2px 0;
                        -webkit-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        transform: rotate(45deg);
                    }
                }

                .checkmark {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 17px;
                    width: 17px;
                    background-color: #eee;
                    border-radius: 3px;

                    &:after {
                        content: "";
                        position: absolute;
                        display: none;
                    }
                }
            }
        }
        &.subscription{
            width: 100%;

            .community-form1{
                width: 60%;
                margin: 20px auto;
                .forms-hint{
                   color:  $background_3;
                    font-weight: bold;
                }
                .member-toggle{ width: 100%;
                    border-bottom: 1px solid #0000001f;
                    padding: 10px 0;
                    display: flex;
                    justify-content: space-between;
                    font-weight: bold;
                    .plus{
                        display: block;
                    }
                    .minus{
                        display: none;
                    }
                    &.toggled{
                        .plus{
                            display: none;
                        }
                        .minus{
                            display: block;
                        }
                    }
                }
                @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                    width: 100%;

                }
            }
        }
    }
}
.hidden{
    display: none !important;
}
.donation-total{
    border: unset;
    width: 60%;
    margin: 10px auto;
    border-collapse: collapse;
    border: 1px solid #0000002b;
    margin-top: 30px;
    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
        width: 100%;

    }
    tr{
        border-bottom: 1px solid #0000002b;
        th{
            height: 30px;
            border-#{$end-direction}: 1px solid #0000002b;
            input{
                width: 98%;
                outline: unset;
                border: unset;
            }
            &#total{
                text-align: $start-direction;
                padding-#{$start-direction}: 10px;
            }
            &#donation-total-package-price{
                text-align: $start-direction;
                padding-#{$start-direction}: 10px;
            }
            &#gifted-total-package-price{
                text-align: $start-direction;
                padding-#{$start-direction}: 10px;
            }
        }
    }
}

.contact-us{
    .contact-us-container{
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1%;
        &.j-s-b{
            justify-content: space-between;
            margin-top: 30px;
        }
        .contact-us-item{
            width: 28%;
            margin: 1%;
            padding: 30px;
            aspect-ratio: 3/1;
            position: relative;
            &.no-p{
                padding: unset;
            }
            &.added{
                min-height: 222px;
                width: 33%;
                @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                    width: 100%;
                    min-height: unset;
                }
            }
            &.border{
                border: 1px solid #E5E5E5;
            }
            &.white{
                background-color: $white;
                box-shadow: 0px 3px 60px #0000000D;
            }
            .item-title{
               font-size: 15px;
            }
            .item-desc{
                margin-top: 20px;
                height: 130px;
                overflow: hidden;
                .op{

                  opacity: 0.45;
                }
                .un{
                  justify-content: left;
                    text-decoration: underline;
                }

            }
            .l{
                position: absolute;
                bottom: 30px;
                left: 30px;
            }
            iframe{
                width: 100%;
                height: 100%;
            }
            @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                width: 100%;
            }
        }
        .contact-left{
            width:60% ;
            img{
                width:100%;
                object-fit: cover;
            }
        }
        .contact-right{
            width: 29.5%;


        .faq{
            .title{
                font-size: 18px;
                margin-bottom: 15px;
            }
            .faq-item{
                border-top: 1px solid $black;
               // border-bottom: 1px solid $black;
                padding-top: 15px;
                padding-bottom: 15px;
                cursor: pointer;
                .header{
                    display: flex;
                    justify-content: space-between;
                    .text{
                        font-size: 15px;
                    }
                }
                .body{
                    opacity: 0.45;

                  //  -webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear;
                        display: none;
                    padding-top: 20px;
                    padding-bottom: 20px;
                    //height: 0;
                    //overflow: hidden;
                }
                //
                //&.active{
                //    .body{
                //        padding-top: 20px;
                //        padding-bottom: 20px;
                //        height: auto;
                //    }
                //}
            }
        }


        }
    }
}
.atrist-cat-select{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #0000001A;
    border-radius: 3px;
    width: 300px;
    padding: 9px;
    outline: unset;
    margin-bottom: 30px;
    margin-top: 30px;

}
.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 120px;
    .footer-container{
        .logo{
            width: 100px;
            margin: 0 auto;
            img{
                width: 100%;
                object-fit: contain;
            }
        }
        .footer-social{
            display: flex;
            justify-content: space-between;
            .footer-social-link{
                background-color: $black;
                color: $white;
                aspect-ratio: 1/1;
                width: 60px;
                margin: 20px;
                font-size: 20px;
                transition:$transition-3 ;
                &:hover{
                    transform: $hover-scale;
                }
                @media #{$mediaquery-xsm},#{$mediaquery-sm}{
                    width: 45px;
                }
            }
        }
        .footer-policies{
            display: flex;
            justify-content: center;
            margin-top: 100px;


            .footer-policies-link{
                margin: 8px;
                color: $black;
                opacity: 0.7;
                transition:$transition-3 ;
                &:hover{
                    transform: $hover-scale;
                }
            }
        }
        .footer-sep{
            height: 2px;
            width: 100%;
            background-color: $grey3;
        }
    }

}
.bottom-footer{
    border-top: 2px solid $grey3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    position: relative;
    .copywrite-text{
        color: $black;
        opacity: 0.35;
        @media #{$mediaquery-xsm},#{$mediaquery-sm} {
            width: 70%;
        }
    }
    .footer-lang{
        position: absolute;
        right: 40px;
        color: black!important;
        @media #{$mediaquery-xsm},#{$mediaquery-sm} {
            position: relative;
            right: unset;
        }
    }
}
.cookie-reminder{
    background-color: $black;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
        height: 50px;

    @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
       height: max-content;
    }
    .cookie-reminder-text{
        color: $white;
        display: flex;
        .cookie-reminder-text-text{
            @media #{$mediaquery-md},#{$mediaquery-lg} {
             width: 80%;
                padding: 20px;
            }
            @media #{$mediaquery-xsm},#{$mediaquery-sm}{
                width: 75%;
                padding: 20px;

            }

            a{
                display: unset;
                text-decoration: underline;
                margin-left: 10px;
                transition:$transition-3 ;
                &:hover{
                    transform: $hover-scale;
                }
            }
        }

    }
    .cookie-hider{
        position: absolute;
        right: 40px;
        color: $white;
    }
}
.home-services{
    display: flex;
    margin: 0 -1%;
    flex-wrap: wrap;
    padding-top: 80px;
    .home-services-service{
        width: 48%;
        aspect-ratio: 1/1;
        margin: 1%;
        position: relative;
        @media #{$mediaquery-md},#{$mediaquery-lg} {
            width: 48% !important;

        }
        @media #{$mediaquery-xsm},#{$mediaquery-sm} {
            width: 100% !important;

        }

        .service-overlay{
            background-color: black;
            opacity: 0.3;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
        img{
            width: 100%;
            object-fit: cover;
        }
        .home-services-service-container{
            position: absolute;
            top: 50px;
            #{$start-direction} : 50px;
            h3{
                color: white;
                font-size: 22px;
                letter-spacing: 1px;
                font-weight: 400;
            }
        }
    }
}
.news-letter{
    height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    @media #{$mediaquery-xsm},#{$mediaquery-sm} {
        margin-top: 30px;
       height: 140px;

    }
    img{
        width: 100%;
        object-fit: cover;
        position: absolute;
        z-index: -1;
        height: 100%;
        filter: contrast(0.5);
    }
    .news-letter-container{
        color: $white;
        text-transform: uppercase;
        h2{
            text-align: center;
            font-size: 20px;
            letter-spacing: 2px;
        }
        form{
            position: relative;
            .news-letter-input{
                background-color: $white;
                border: unset;
                outline: unset;
                width: 100%;
                min-width: 390px;
                height: 30px;
                padding: 12px;
                &::placeholder {
                    color: $grey4;

                }
                @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                    min-width: 260px;
                        height: 20px;
                }
            }
            button{
                position: absolute;
                top: 50%;
                transform: translate(0 , -50%);
                #{$end-direction} : 0 !important;
                background:unset;
                border:unset;
                outline: unset;
                cursor: pointer;
            }
        }
    }
}
.content {
    padding-right: 15px;
    padding-left: 15px;
}
.link-details-links{
    background: #00000008 0% 0% no-repeat padding-box;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 17px;

}
@media (min-width: 576px) {
    .content {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 768px) {
    .content {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
    .content {
        padding-right: 50px;
        padding-left: 50px;
    }
}

@media (min-width: 1300px) {
    .content {
        margin-right: auto;
        margin-left: auto;
        padding-right: 80px !important;
        padding-left: 80px !important;
        max-width: 1400px;


    }
}
.common-loader-hide {
    animation: hideit 0.5s normal forwards ease-in-out !important;
    animation-delay: 0.3s !important;
}

.common-loader-initial {
    animation: fade-in 0.5s normal forwards ease-in-out;
    animation-delay: 0s;
}

@keyframes hideit {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 0;
        display: none !important;
        height: 100vh;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-webkit-keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes scroll-left {
    //0% {
    //    transform: translateX(5%);
    //}
    100% {
        transform: translate(-100%,0);
    }
}

.youtube-background{

    iframe{
        width: 100vw !important;
        height: 100vh !important;
    }
}
.subscription-packages-container{
    display: flex;
    flex-wrap: wrap;
    .package{
        border: 1px solid #00000017;
        box-sizing: border-box;
        padding: 10px 20px;
        margin: 1%;
        width: 31%;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        h3{
            min-height: 30px;
            margin-top: 25px;
            flex: 1;
        }
        .custom-description{
            margin-top: unset !important;
            flex: 5;

        }
        h4{
            //color: $background_1;
        }
        &:hover{
            border: 1px solid #000;
        }
        &.selected{
            border: 1px solid #000;
        }
        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
          width: 100%;
            margin-bottom: 20px;
        }
    }
}
.package-benefits{
    box-sizing: border-box;
    padding: 20px;
    margin: 25px auto !important;
    font-size: 15px !important;
    line-height: 24px !important;
    opacity: 0.8 !important;
    text-align: $start-direction;
    width: fit-content;

    display: none;
    transition: $transition-2;
    &.active{
        display: block;
    }
}
.custom-description{
    margin: 25px !important;
    font-size: 15px !important;
line-height: 24px !important;
    opacity: 0.8 !important;
    &.brief{
        font-size: 13px !important;
        opacity: 0.6 !important;
    }
}
.view-subscriptions-page{
    display: flex;
    justify-content: center;
    .container{
        width: 80%;
        background-color: rgba(0,0,0,0.1);

    #subscriptions {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;

    }

        #subscriptions td, #subscriptions th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #subscriptions tr:nth-child(even){background-color: #f2f2f2;}


        #subscriptions th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #117A5E;
            color: white;
            width: 25%;
        }
        .table-cont{
            width: 100%;
            overflow: scroll;
            padding: 20px 0;
            #subscriptions{
                th{
                    min-width: 200px;
                }
            }
        }
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.payment-table{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #0000001A;
    background: white;
    margin-top: 30px;
    .left{
        width: 40%;
        height: 50px;
        border-bottom: 1px solid #0000001A;
        border-#{$end-direction}:1px solid #0000001A;
        font-size: 14px;
        line-height: 50px;
        text-align: start;
        padding-#{$start-direction}:15px;
    }
    .right{
        width: 48%;
        border-bottom: 1px solid #0000001A;
        font-size: 14px;
       display: flex;
        align-items: center;
        text-align: start;
        padding-#{$start-direction}:15px;
        input{
            height: 90%;
            width: 100%;
            border: unset;
            outline: unset;
        }
    }
    &.resto{
        .left{
            width: 65%;

        }
        .right{
            width: 30%;
        }
        @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
            .left{
                width: 60%;

            }
            .right{
                width: 30%;
            }
        }
    }
}

.success-popup{
    padding: 20px !important;
    max-width: 550px !important;
    h4{
        font-weight: 500;
        font-size: 25px;
        text-align: center;
        margin: 5px 0 25px;
    }
.description{
    font-size: 18px;

    line-height: 24px;
    margin-bottom: 25px;
    text-align: center;
    color: rgba(0,0,0,0.5);
}
    a{
        margin: 0    auto;
        outline: unset !important;
    }
    .closeBtn{
        position: absolute;
        top: 10px;
        right: 18px;
        font-size: 22px;
    }
}
.payment-box-cont{
    background-color: white;
    padding: 20px 30px;
    border: 1px solid #0000001A;
    width: 100%;
    margin-top: 20px;
    .label{
        width: fit-content;
        margin-bottom: 5px;
    }
    .custom-select{
        border: 1px solid #0000001A;
        width: 100%;
        height: 45px;
        color: black;
        &::placeholder{
            color: black;
        }
    }
    .prices-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .payment-box{
            width: 32%;
            border: 1px solid #0000001A;
            margin-bottom: 10px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            input[type=radio]{
                appearance: none;
            }
            font-size: 18px;
            @media #{$mediaquery-xsm},#{$mediaquery-sm},#{$mediaquery-md},#{$mediaquery-lg} {
                width: 48%;

            }
            &.clear{
                padding: 10px;
                box-sizing: border-box;
                @media #{$mediaquery-xsm},#{$mediaquery-sm} {
                    width: 100%;
                }
                input{
                    border: unset;
                    outline: unset;
                    height: 100%;
                    width: 80%;
                    margin-left: 10px;
                    border-radius: 5px;
                }
            }

            &:hover{
                background-color: #BD425E;
                color: white;
            }
            &.active{
                background-color: #BD425E;
                color: white;
            }
        }
    }
}