
/*---------- Background ------------*/
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2,
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1{
    max-width: 100%;
}
.windzfare-wrapper{

    .bg_color_1{
        background-color: #fbfcfd;
    }
    .bg_color_2{
        background-color: #f0f4f6;
    }

    .overlapping_urgent_cause{
        margin-top: -62px;
        position: relative;
        z-index: 3;
    }
    .urgent_cause_block{
        position: relative;
        background: $white-color;
        padding: 60px 100px;
        border-radius: 15px;
        overflow: hidden;
        &:before{
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-image: url(../images/layer1.png);
            background-repeat: no-repeat;
            background-position: bottom right;
        }
        &.fourth:before{
            background-image: url(../images/layer2.png);
        }
        .urgent_cause_heading h3{
            line-height: 36px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .windzfare_progress_content .windzfare_progress_bar{
            height: 8px;
        }
    }

    .urgent_cause_block.alt{
        border-radius: 0px;
        .row{
            align-items: center;
        }
        padding: {
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 40px;
        }
        box-shadow: 0px 0px 13px rgba(22, 50, 79, 0.1);
        &:before{
            display: none;
        }
        .windzfare_highlight_tag{
            background: $white-color;
            color: $primary-color;
            padding: 0px;
            font-size: $font-14;
            font-weight: $font-semibold;
            text-transform: capitalize;
            letter-spacing: 0px;
        }
        .urgent_cause_heading h3 {
            line-height: 36px;
            margin-top: 7px;
            margin-bottom: 0;
        }
        
        &.fourth{
            .windzfare_highlight_tag,
            .windzfare_progress_value{
                color: $fourth-color;
            }
        }
    } 

    .windzfare_highlight_tag{
        background: $primary-color;
        color: $white-color;
        display: inline-block;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: $font-12;
        font-weight: $font-regular;
        line-height: 20px;
        font-family: $heading-font;
        letter-spacing: 3px;
        padding: 4px 10px;
    }

    .give_donation{
        margin-top: 15px;
        .donation_amount_tab{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: $font-14;
            line-height: 20px;
            font-weight: $font-medium;
            color: $primary-color;

            .wp_fare_amount{
                border-left: 1px solid #f6c0cb;
                border-right: none;
                border-bottom: none;
                border-radius: 0;
                border-top: none;
                width: 85px;
                padding: 5px;
                height: 40px;
            }
        }
        .select_currency_box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fef9fa;
            border-radius: 5px;
            @include bordered(1px, solid, #f6c0cb);
            outline: none;
        }
        .currency_dropdown{
            margin: 0 10px;
        }
        .currency{
            padding: 10px 10px 10px 10px;
            @include bordered-left(1px, solid, #f6c0cb);
        }
        .select_amount_box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: $font-14;
            background: #fef9fa;
            padding: 0px 0px;
            border-radius: 5px;
            @include bordered(1px, solid, #f6c0cb);
            overflow: hidden;
        }
        .selectdonate{
            @include bordered-right(1px, solid, #f6c0cb);
            padding: 10px 10px 10px 10px;
            width: 150px;
        }
        .select_amount{
            width: 90px; 
            height: 40px;
            border: 0;
            border-radius: 0px;
            background: transparent;
            color: $primary-color;
            font-weight: $font-medium;
            outline: 0px;
            position: relative;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            &.radio_circle{
                margin: 0px;
                padding: 0px;
                display: flex;
                align-items: center;
                justify-content: center;
                .checkmark{
                    position: relative;
                    height: 6px;
                    width: 6px;
                    background: $primary-color;
                    @include bordered (0px, solid, #788a9c);
                    margin-right: 10px;
                    &:after{
                        display: none;
                    }
                }
            }
        }
        .select_amount.active{
            color: $white-color;
            background: $primary-color;
            &.radio_circle{
                .checkmark{
                    background: $white-color;
                }
            }
        }
        button.select_amount:focus{
            outline: 0px;
        }
        .dot{
            display: inline-block;
            width: 6px;
            height: 6px;
            background: $primary-color;
            border-radius: 100%;
            margin-right: 10px;
        }
        .select_amount.active .dot{
            background: $white-color;
        }
        .select_amount input[type=text] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            @include bordered(0px, solid, #f6c0cb);
            border-radius: 0px;
            background: $white-color;
            color: $primary-color;
            font-weight: $font-medium;
            padding: 10px;
            opacity: 0;
            visibility: hidden;
        }
        .select_amount input[type=text]:focus{
            outline: 0px;
        }
        .select_amount.custom.active input[type=text]{
            opacity: 1;
            visibility: visible;
        }
        .windzfare_button_group{
            text-align: left;
            margin: 20px 0px 0px 0px;
        }
        .windzfare_button {
            font-size: $font-12;
            padding: 8px 30px;
            background: $primary-color;
            &:hover{
                background: $white-color;
                color: $primary-color;
            }
        }
    }


    .second {
        .give_donation{
            .donation_amount_tab{
                color: $second-color;
            }
            .select_currency_box{
                @include bordered(1px, solid, $second-color);
            }
            .currency{
                @include bordered-left(1px, solid, $second-color);
            }
            .select_amount_box{
                @include bordered(1px, solid, $second-color);
            }
            .selectdonate{
                @include bordered-right(1px, solid, $second-color);
                width: 150px;
            }
            .select_amount{
                color: $second-color;
                &.radio_circle{
                    .checkmark{
                        background: $second-color;
                    }
                }
            }
            .select_amount.active{
                color: $white-color;
                background: $second-color;
                &.radio_circle{
                    .checkmark{
                        background: $white-color;
                    }
                }
            }
            .dot{
                background: $second-color;
            }
            .select_amount input[type=text] {
                @include bordered(0px, solid, $second-color);
                color: $second-color;
            }
            .windzfare_button {
                background: $second-color;
                &:hover{
                    background: $white-color;
                    color: $second-color;
                }
            }
        }
    }

    .third {
        .give_donation{
            .donation_amount_tab{
                color: $third-color;
            }
            .select_currency_box{
                @include bordered(1px, solid, $third-color);
            }
            .currency{
                @include bordered-left(1px, solid, $third-color);
            }
            .select_amount_box{
                @include bordered(1px, solid, $third-color);
            }
            .selectdonate{
                @include bordered-right(1px, solid, $third-color);
                width: 150px;
            }
            .select_amount{
                color: $third-color;
                &.radio_circle{
                    .checkmark{
                        background: $third-color;
                    }
                }
            }
            .select_amount.active{
                color: $white-color;
                background: $third-color;
                &.radio_circle{
                    .checkmark{
                        background: $white-color;
                    }
                }
            }
            .dot{
                background: $third-color;
            }
            .select_amount input[type=text] {
                @include bordered(0px, solid, $third-color);
                color: $third-color;
            }
            .windzfare_button {
                background: $third-color;
                &:hover{
                    background: $white-color;
                    color: $third-color;
                }
            }
        }
    }

    .fourth {
        .give_donation{
            .donation_amount_tab{
                color: $fourth-color;
            }
            .select_currency_box{
                @include bordered(1px, solid, $fourth-color);
            }
            .currency{
                @include bordered-left(1px, solid, $fourth-color);
            }
            .select_amount_box{
                @include bordered(1px, solid, $fourth-color);
                
            }
            .selectdonate{
                @include bordered-right(1px, solid, $fourth-color);
                width: 150px;
            }
            .select_amount{
                color: $fourth-color;
                &.radio_circle{
                    .checkmark{
                        background: $fourth-color;
                    }
                }            
            }
            .select_amount.active{
                color: $white-color;
                background: $fourth-color;
                &.radio_circle{
                    .checkmark{
                        background: $white-color;
                    }
                }
            }
            .dot{
                background: $fourth-color;
            }
            .select_amount input[type=text] {
                @include bordered(0px, solid, $fourth-color);
                color: $fourth-color;
            }
            .windzfare_button {
                background: $fourth-color;
                &:hover{
                    background: $white-color;
                    color: $fourth-color;
                }
            }
        }
    }

    .fifth {
        .give_donation{
            .donation_amount_tab{
                color: $fifth-color;
            }
            .select_currency_box{
                @include bordered(1px, solid, $fifth-color);
            }
            .currency{
                @include bordered-left(1px, solid, $fifth-color);
            }
            .select_amount_box{
                @include bordered(1px, solid, $fifth-color);
            }
            .selectdonate{
                @include bordered-right(1px, solid, $fifth-color);
            }
            .select_amount{
                color: $fifth-color;
                &.radio_circle{
                    .checkmark{
                        background: $fifth-color;
                    }
                }
            }
            .select_amount.active{
                color: $white-color;
                background: $fifth-color;
                &.radio_circle{
                    .checkmark{
                        background: $white-color;
                    }
                }
            }
            .dot{
                background: $fifth-color;
            }
            .select_amount input[type=text] {
                @include bordered(0px, solid, $fifth-color);
                color: $fifth-color;
            }
            .windzfare_button {
                background: $fifth-color;
                &:hover{
                    background: $white-color;
                    color: $fifth-color;
                }
            }
        }
    }

    .sixth {
        .give_donation{
            .donation_amount_tab{
                color: $sixth-color;
            }
            .select_currency_box{
                @include bordered(1px, solid, $sixth-color);
            }
            .currency{
                @include bordered-left(1px, solid, $sixth-color);
            }
            .select_amount_box{
                @include bordered(1px, solid, $sixth-color);
            }
            .selectdonate{
                @include bordered-right(1px, solid, $sixth-color);
            }
            .select_amount{
                color: $sixth-color;
                &.radio_circle{
                    .checkmark{
                        background: $sixth-color;
                    }
                }
            }
            .select_amount.active{
                color: $white-color;
                background: $sixth-color;
                &.radio_circle{
                    .checkmark{
                        background: $white-color;
                    }
                }
            }
            .dot{
                background: $sixth-color;
            }
            .select_amount input[type=text] {
                @include bordered(0px, solid, $sixth-color);
                color: $sixth-color;
            }
            .windzfare_button {
                background: $sixth-color;
                &:hover{
                    background: $white-color;
                    color: $sixth-color;
                }
            }
        }
    }

    .select2-container--default.select2-container--focus .select2-selection--single {
        outline: none;
    }
    .select2-container--default .select2-selection--single {
        background-color: transparent;
        border: 0px;
        border-radius: 0;
        cursor: default;
        padding: 0px;
    }
    .select2-dropdown {
        background-color: #fef9fa;
        @include bordered(1px, solid, #f6c0cb);
        text-align: center;
    }
    .select2-search--dropdown{
        padding: 0px;
        line-height: 20px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        color: $primary-color;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        border: 0px;
        background: transparent;
        color: $primary-color;
        height: 45px;
        padding: 0px 15px;
    }
    .select2-container--open .select2-dropdown {
        left: 0px;
        top: 0px;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field:focus{
        outline: 0px;
    }
    .select2-container--default .select2-results__option[aria-selected=true], .select2-results__option,
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        padding: 7px 15px;
        font-size: $font-14;
        background-color: #fef9fa;
        color: $primary-color;
        @include bordered-top(1px, solid, #f6c0cb);
        text-align: left;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b{
        border-color: $primary-color transparent transparent transparent;
    }
    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent $primary-color transparent;
    }

    .fourth .select2-container--default .select2-selection--single .select2-selection__rendered{
        color: $fourth-color;
    }
    .fourth .select2-container--default .select2-results__option[aria-selected=true], 
    .fourth .select2-results__option,
    .fourth .select2-container--default .select2-results__option--highlighted[aria-selected] {
        color: $fourth-color;
        @include bordered-top(1px, solid, $fourth-color);
    }
    .fourth .select2-container--default .select2-selection--single .select2-selection__arrow b{
        border-color: $fourth-color transparent transparent transparent;
    }
    .fourth .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent $fourth-color transparent;
    }

    .urgent_cause_carousel .urgent_cause_block{
        box-shadow: 0px 0px 13px rgba($primary-color, 0.1);
        margin: 15px;
    }
    /*--------- urgent_cause_carousel Navs --------*/
    .owl-carousel.urgent_cause_carousel.side_nav .owl-nav {
        margin-top: 0px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        z-index: -1;
        
        .owl-prev{
            float: left;
            margin-left: -60px;
        }
        .owl-next{
            float: right;
            margin-right: -60px;
        }
    }


    .owl-carousel.urgent_cause_carousel .owl-nav {
        margin-top: 0px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0%);
        width: 100%;
        z-index: -1;

        .owl-prev,
        .owl-next{
            float: none;
            margin: 0px 10px;
        }
        button.owl-prev, 
        button.owl-next {
            background: $white-color;
            color: $primary-color;
            border: none;
            padding: 0 !important;
            font: inherit;
            width: 30px;
            height: 30px;
            line-height: 28px;
            border-radius: 100%;
            @include bordered(2px, solid, $primary-color);
            outline: none;
            @include transition(color 0.5s, background-color 0.8s);
        }
        button.owl-prev:hover, 
        button.owl-next:hover {
            background: $primary-color;
            color: $white-color;
        }
    }
    /*--------- urgent_cause_carousel Dots --------*/
    .owl-carousel.urgent_cause_carousel .owl-dots {
        position: relative;
        text-align: center; 
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        button.owl-dot{
            outline: none;
            margin: 0px 5px;
            span{
                background: $black-color;
                outline: none;
                width: 10px;
                height: 10px;
                display: block;
                border-radius: 100%;
            }
            &.active span{
                background: $primary-color;
            }
        }
    }



    @media screen and (max-width: $breakpoint-desktop) {
        .give_donation{
            .donation_amount_tab{
                display: block;
            }
            .select_amount_box{
                margin-top: 15px;
            }
            .select_amount{
                display: none;
            }
            .select_amount.custom{
                display: block;
            }
        }

        .urgent_cause_block.alt{
            padding: 30px;
            .windzfare_progress_content {
                display: block;
                margin-top: 20px;
                .windzfare_button_group .windzfare_button {
                    width: 100%;
                    font-size: $font-14;
                    margin-top: 15px;
                    padding: 20px 25px;
                }
            }
        }
    }
    @media screen and (max-width: $breakpoint-minimobile) {
        .urgent_cause_block{
            padding: 40px 40px;
        }
        .give_donation{
            .selectdonate{
                border-right: 0px;
            }
            .select_amount_box{
                display: block;
            }
            .select_amount{
                width: 100%;
            }
        }
    }


    .call_to_action{
        position: relative;
        z-index: 2;
    }
    .call_to_image_box{
        text-align: right;
    }
    .call_to_inner{
        color: $white-color;
        padding: {
            top: 20px;
            bottom: 20px;
            left: 70px;
        }
        h1{
            line-height: 54px;
            margin-bottom: 20px;
        }
        h6{
            color: $primary-color;
            font-weight: $font-medium;
            line-height: 30px;
            margin-bottom: 20px;
        }
        ul{
            padding-left: 0px;
            list-style-type: none;
            li{
                position: relative;
                padding-left: 25px;
                margin-bottom: 5px;
                &:before {
                    position: absolute;
                    content: ""; 
                    background: $primary-color;
                    display: inline-block; 
                    width: 10px;
                    height: 10px;
                    border-radius: 100%;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
        .windzfare_button_group{
            margin-top: 35px;
        }
        &.second{
            h6{
                color: $second-color;
            }
            ul{
                li{
                    &:before {
                        background: $second-color;
                    }
                }
            }
        }
        &.third{
            h6{
                color: $third-color;
            }
            ul{
                li{
                    &:before {
                        background: $third-color;
                    }
                }
            }
        }
        &.fourth{
            h6{
                color: $fourth-color;
            }
            ul{
                li{
                    &:before {
                        background: $fourth-color;
                    }
                }
            }
        }
        &.fifth{
            h6{
                color: $fifth-color;
            }
            ul{
                li{
                    &:before {
                        background: $fifth-color;
                    }
                }
            }
        }
        &.sixth{
            h6{
                color: $sixth-color;
            }
            ul{
                li{
                    &:before {
                        background: $sixth-color;
                    }
                }
            }
        }
    }

    .banner{
        position: relative;
        padding-top: 70px;
        &:before{
            content: '';
            position: absolute;
            background: rgba($primary-color, 0.87);
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            clip-path: polygon(0 0, 48% 0, 23% 100%, 0% 100%);
        }
        &:after{
            content: '';
            position: absolute;
            background: rgba(16, 18, 27, 0.89);
            width: 100%;
            height: 100%;
            right: 0;
            top: 0;
            clip-path: polygon(100% 100%, 100% 0%, 48% 0%, 23% 100%);
        }
    }

    .banner_2{
        position: relative;
        padding: 70px 0px;
        background: $primary-color;
        &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            right: 0;
            top: 0;
            background-image: url(../images/object.png);
            background-repeat: no-repeat;
            background-position: right;
        }
        .banner_imageblock{
            position: absolute;
            height: 100%;
            top: 0;
            z-index: 2;
            left: 0;
            right: auto;
            padding: 0px;
            .banner_img_holder{
                background-image: url('../images/banner_bg.png');
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0;
                background-size: cover;
                background-position: right;
                background-repeat: no-repeat;
            }
        }
        .call_to_inner{
            h6{
                color: $white-color;
            }
            ul{
                li{
                    &:before {
                        background: $white-color;
                    }
                }
            }
        }
    }

    @media screen and (max-width: $breakpoint-desktop) {
        .banner{
            padding-bottom: 70px;
            .call_to_inner{
                padding-left: 0px;
            }
            &:before{
                display: none;
            }
            &:after{
                clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
            }
        }
        .banner_2{
            .call_to_inner{
                padding-left: 30px;
            }
        }
    }
    @media screen and (max-width: $breakpoint-tablet) {
        .banner_2{
            .call_to_inner{
                padding-left: 0px;
            }
        }
    }

    .be_volunteer{
        background: $white-color;
        padding: 20px;
        box-shadow: 0px 0px 40px rgba(236, 38, 88, 0.07);
        .call_to_inner{
            padding: {
                top: 65px;
                bottom: 20px;
                left: 50px;
            }
            h1{
                color: $black-color;
            }
            color: $black-color;
        }
    }

    .windzfare_partner {
        text-align: center;
        a{
            display: inline-block;
            border-radius: 100%;
            box-shadow: 0px 0px 10px rgba(178, 180, 195, 0.3);
        }
        &.no_round{
            a{
                border-radius: 0px;
                box-shadow: none;
            }
        }
    }
    .volunteer_facts .windzfare_partners_list{
        margin-top: 80px;
    }
    @media screen and (max-width: $breakpoint-desktop) {
        .windzfare_partner {
            margin-bottom: 15px;
        }
    }

    .newsletter{
        position: relative;
        background: #ed3f5a;
        padding: 23px 0px;
        div{
            position: relative;
            z-index: 2;
        }
        .row{
            align-items: center;
        }
        &:after{
            content: '';
            background: #e03450;
            position: absolute;
            right: 0;
            top: 0;
            width: 28%;
            height: 100%;
        }

        .windzfare_newsletter_title h4{
            color: $white-color;
            font-size: 22px;
            font-weight: $font-semibold;
        }
        .windzfare_newsletter form{
            position: relative;
            display: flex;
        }
        .windzfare_newsletter .form-control{
            position: relative;
            color: $white-color;
            font-size: $font-14;
            background: #e03450;
            border: 1px solid #d4435a;
            height: 50px;
            border-radius: 0px;
            margin-right: 20px;
        }
        .windzfare_newsletter .form-control:focus{
            outline: none;
            box-shadow: none;
        }
        .windzfare_newsletter .newsletter_button{
            background: #e03450;
            color: $white-color;
            padding: 5px 15px;
            font-size: 30px;
            box-shadow: none;
            outline: none;
            border: 1px solid #d4435a;
            border-radius: 0px;
            cursor: pointer;
        }
        .quickcontact {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            font-family: $heading-font;
            font-size: $font-16;
            font-weight: $font-bold;
            line-height: 26px;
            align-items: center;
            justify-content: flex-end;
            color: $white-color;
            span {
                font-family: $paragraph-font;
                font-size: $font-14;
                font-weight: $font-semibold;
                color: $white-color;
            }
            img {
                margin-right: 10px;
            }
        }

        &.second{
            background: $second-color;
            &:after{
                background: #4716dc;
            }
            .windzfare_newsletter .form-control,
            .windzfare_newsletter .newsletter_button{
                background: #4716dc;
                @include bordered (1px, solid, #3f12c7);
            }
        }
        
        &.third{
            background: $third-color;
            &:after{
                background: #fc9730;
            }
            .windzfare_newsletter .form-control,
            .windzfare_newsletter .newsletter_button{
                background: #fc9730;
                @include bordered (1px, solid, #ec8419);
            }
        }
        
        &.fourth{
            background: $fourth-color;
            &:after{
                background: #8845d3;
            }
            .windzfare_newsletter .form-control,
            .windzfare_newsletter .newsletter_button{
                background: #8845d3;
                @include bordered (1px, solid, #7b2fd0);
            }
        }
        
        &.fifth{
            background: $fifth-color;
            &:after{
                background: #01bdbb;
            }
            .windzfare_newsletter .form-control,
            .windzfare_newsletter .newsletter_button{
                background: #01bdbb;
                @include bordered (1px, solid, #04a9a7);
            }
        }
        
        &.sixth{
            background: $sixth-color;
            &:after{
                background: #541cfd;
            }
            .windzfare_newsletter .form-control,
            .windzfare_newsletter .newsletter_button{
                background: #541cfd;
                @include bordered (1px, solid, #5628e2);
            }
        }
    }


    @media screen and (min-width: $breakpoint-desktop){
        .newsletter [class^='col-lg']{
            padding-left: 0px;
            padding-right: 0px;
        }
    }
    @media screen and (max-width: $breakpoint-desktop){
        .newsletter:after{
            display: none;
        }
        .windzfare_newsletter{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .newsletter{
            .quickcontact{
                justify-content: flex-start;
            }
        }
    }
    .windzfare_newsletter ::-webkit-input-placeholder {
        color: $white-color;
    }
    .windzfare_newsletter ::-moz-placeholder { 
        color: $white-color;
    }
    .windzfare_newsletter :-ms-input-placeholder { 
        color: $white-color;
    }
    .windzfare_newsletter :-moz-placeholder { 
        color: $white-color;
    }
    .windzfare_newsletter :placeholder { 
        color: $white-color;
    }


    /* Customize Radio Button */
    label.radio_circle {
        display: inline-block;
        position: relative;
        padding-left: 25px;
        cursor: pointer;
        font-size: $font-12;
        line-height: 16px;
        margin-right: 20px;
        font-weight: $font-regular;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            left: 0;
        }
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 15px;
            width: 15px;
            background-color: $white-color;
            border-radius: 100%;
            @include bordered(1px, solid, #788a9c);
            &:after {
                content: "";
                position: absolute;
                display: none;
                top: 3px;
                left: 3px;
                width: 7px;
                height: 7px;
                border-radius: 1000%;
                background: $primary-color;
            }
        }
        &:hover input ~ .checkmark {
            background-color: $white-color;
            @include bordered(1px, solid, $primary-color);
        }
        input:checked ~ .checkmark {
            background-color: $white-color;
            @include bordered(1px, solid, $primary-color);
            &:after {
                display: block;
            }
        }
    }


    .pagination-div{
        margin-top: 40px;
        .pagination{
            display: block;
            margin-bottom: 0px;
            list-style-type: none;
            align-items: center;
            li{
                display: inline-block;
                color: $primary-color;
                a{
                    font-family: $heading-font;
                    font-size: $font-14;
                    background: $white-color;
                    @include bordered (1px, solid, $white-color);
                    display: inline-block;
                    text-align: center;
                    height: 30px;
                    line-height: 26px;
                    font-weight: $font-medium;
                    letter-spacing: 1px;
                    &:hover{
                        color: $primary-color;
                    }
                    i{
                        margin: 0px 5px;
                    }
                }
                a.page-number{
                    width: 30px;
                    border-radius: 100%;
                    color: $primary-color;
                    &.current{
                        background: $primary-color;
                        @include bordered (1px, solid, $primary-color);
                        color: $white-color;
                        box-shadow: 0px 4px 10px rgba($primary-color, 0.4);
                    }
                }
            }
        }
    }
    .album{
        padding-bottom: 80px;
    }
    .album_text_part .windzfare_heading_wrapper h2{
        line-height: 48px;
    }
    .album_text_part .windzfare_heading_wrapper h6{
        margin-top: 25px;
    }
    .album_text_part_inner{
        position: relative;
        p{
            margin-top: 30px;
        }
        p:last-child{
            margin-top: 30px;
        }
    }
    .album_text_part_video_inner{
        display: flex;
        align-items: center;
        margin-top: 90px;
        .video_button{
            padding-right: 15px;
        }
        p{
            font-size: $font-14;
            font-weight: $font-medium;
        }
    }
    @media screen and (max-width: $breakpoint-tablet) {
        .album_text_part{
            margin-bottom: 30px;
        }
    }

    .overlay_action{
        background: $white-color;
        padding: 50px 80px 50px 70px;
        margin-top: 65px;
        h2{
            line-height: 48px;
        }
        p{
            line-height: 32px;
        }
        .windzfare_button_group{
            display: flex;
            align-items: center;
            a+a{
                text-transform: uppercase;
                text-decoration: underline;
                font-size: $font-14;
                font-weight: $font-semibold;
                letter-spacing: 1px;
                margin-left: 40px;
            }
        }
        &.type_2{
            margin-top: 0px;
            .windzfare_button_group{
                a{
                    font-family: $heading-font;
                    font-size: $font-18;
                    font-weight: $font-bold;
                    text-decoration: none;
                    img{
                        margin-right: 15px;
                    }
                }
            }
        }
    }


    select,
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="range"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="color"]{
        display: block;
        width: 100%;
        height: 50px;
        padding: 10px 15px;
        font-size: $font-14;
        line-height: 1.5;
        color: $black-color;
        background-color: #fef9fa;
        background-clip: padding-box;
        @include bordered(1px, solid, #f6c0cb);
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        backface-visibility: hidden;
        box-sizing: border-box;
        outline: none;
        -webkit-appearance: none;
        outline-offset: 0;
    }
    textarea.form-control{
        display: block;
        width: 100%;
        height: 120px;
        padding: 10px 15px;
        font-size: $font-14;
        line-height: 1.5;
        color: $black-color;
        background-color: #fef9fa;
        background-clip: padding-box;
        @include bordered(1px, solid, #f6c0cb);
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        backface-visibility: hidden;
        box-sizing: border-box;
        outline: none;
        -webkit-appearance: none;
        outline-offset: 0;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    input[type="range"]:focus,
    input[type="date"]:focus,
    input[type="month"]:focus,
    input[type="week"]:focus,
    input[type="time"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="color"]:focus,
    textarea.form-control:focus{
        border-color: $primary-color;;
        outline: none;
        outline-offset: 0px;
        box-shadow: none;
    }

    .contact {
        .windzfare_heading_wrapper p {
            font-family: $heading-font;
            font-size: $font-16;
            font-weight: $font-semibold;
            color: $primary-color;
            margin: 0px 0px 0px 0px;
        }
        .windzfare_iconbox{
            background: $primary-color;
            color: $white-color;
            margin-bottom: 40px;
            align-items: flex-start;
            p{
                line-height: 16px;
                color: $white-color;
                margin-bottom: 15px;
            }
            h6{
                color: $white-color;
                line-height: 26px;
            }
            &:last-child{
                margin-bottom: 0px;
            }
        }
        .windzfare_iconbox.second{
            background: $second-color;
        }
        .windzfare_iconbox.third{
            background: $third-color;
        }
        .windzfare_iconbox.fourth{
            background: $fourth-color;
        }
        .windzfare_iconbox.fifth{
            background: $fifth-color;
        }
        .windzfare_iconbox.sixth{
            background: $sixth-color;
        }
    }
    .contact_form{
        padding: 50px 45px 60px 45px;
        box-shadow: 0px 0px 6px rgba(177, 177, 177, 0.23);
        .contact_form_heading_wrapper p{
            color: #62809a;
            margin: 15px 0px 30px 0px;
        }
        .form-group{
            margin-bottom: 30px;
        }
        .windzfare_button{
            width: 100%;
            background: $primary-color;
            &:hover{
                background: $white-color;
            }
        }
    }
    .contact_form ::-webkit-input-placeholder {
        color: $primary-color;
    }
    .contact_form ::-moz-placeholder { 
        color: $primary-color;
    }
    .contact_form :-ms-input-placeholder { 
        color: $primary-color;
    }
    .contact_form :-moz-placeholder { 
        color: $primary-color;
    }
    .contact_form :placeholder { 
        color: $primary-color;
    }

    .inner_posts{
        @include bordered-top (1px, dashed, #ebebeb);
        @include bordered-bottom (1px, dashed, #ebebeb);
        padding: 50px 0px;
        margin: 50px 0px;
        .inner_post{
            &.prev_post{
                text-align: left;
            }
            &.next_post{
                text-align: right;
            }
            .post_block{
                h5{
                    line-height: 30px;
                }
                .windzfare_blog_date{
                    display: inline-grid;
                    margin-bottom: 15px;
                    .day{
                        font-size: 48px;
                        line-height: 48px;
                        font-weight: 700;
                        color: $primary-color;
                    }
                    .month{
                        font-size: 14px;
                        font-weight: 600;
                    }
                }
                a{
                    color: $black-color;
                    &:hover{
                        color: $primary-color;
                    }
                }
            }
        }
    }


    /*-------- Comments ------------*/
    .comment_form_heading_wrapper{
        @include bordered-bottom (1px, dashed, #ebebeb);
        padding-bottom: 25px;
        margin-bottom: 50px;
        h1.comment_title{
            color: $primary-color;
            margin-bottom: 30px;
        }
    }
    .comment_sec {
        ul{
            list-style-type: none;
            padding-left: 0;
            ul{
                padding-left: 30px;
            }
            &.comment_area{
                @include bordered-bottom (1px, dashed, #ececec);
                padding-bottom: 25px;
                margin-bottom: 25px;
                padding-left: 0;
                li{
                    @include bordered-bottom (1px, dashed, #ececec);
                    padding-bottom: 25px;
                    margin-bottom: 25px;
                    padding-left: 0;
                    &:last-child{
                        margin-bottom: 0px;
                        border-bottom: 0px;
                        padding-bottom: 0px;
                    }
                    p{
                        margin-bottom: 0px;
                        line-height: 24px;
                    }
                }
                .children{
                    @include bordered-top (1px, dashed, #ececec);
                    border-bottom: 0px;
                    padding-top: 25px;
                    padding-bottom: 0px;
                    margin-top: 25px;
                    margin-bottom: 0px;
                }
                .commenter{
                    float: left;
                    height: 110px;
                    margin-right: 20px;
                    img{
                        border-radius: 100%;
                        height: 65px;
                        width: 65px;
                    }
                }
                .comment-block {
                    h4{
                        display: block;
                        font-size: $font-16;
                        line-height: 24px;
                        margin-top: 0px;
                        margin-bottom: 5px;
                        text-transform: capitalize;
                    }
                    h6{
                        font-size: $font-12;
                        margin-top: 0px;
                        font-weight: $font-semibold;
                        margin-bottom: 20px;
                        color: $primary-color;
                        span{
                            position: relative;
                            color: $primary-color;
                        }
                    }
                    .reply{
                        float: right;
                        font-size: $font-14;
                        font-weight: $font-regular;
                        a{
                            color: $primary-color;
                            line-height: 20px;
                            &:hover{
                                color: $black-color;
                            }
                        }
                    }
                }
            }
        }
    }
    .comments-pagination{
        display: block;
        margin-bottom: 0px;
        list-style-type: none;
        align-items: center;
        a, span{
            font-family: $heading-font;
            font-size: $font-14;
            background: $white-color;
            border: 1px solid $white-color;
            border-radius: 100%;
            display: inline-block;
            text-align: center;
            width: 30px;
            height: 30px;
            line-height: 28px;
            font-weight: $font-bold;
            text-transform: uppercase;
            color: #3f4655;
        }
        span.current{
            background: $primary-color;
            border: 1px solid $primary-color;
            color: $white-color;
        }
        a:hover{
            color: $primary-color;
        }
    }

    .comment_form{
        margin-top: 60px;
        .form-group{
            margin-bottom: 25px;
        }
        label {
            display: block;
            font-family: $heading-font;
            font-size: $font-14;
            font-weight: $font-semibold;
            margin-top: 0px;
            margin-bottom: 10px;
        }
        .windzfare_button_group{
            margin-top: 20px;
            .windzfare_button {
                width: 100%;
                background: $primary-color;
                text-transform: uppercase;
                letter-spacing: 1px;
                &:hover{
                    background: $white-color;
                }
            }
        }
    }
    .comment_form ::-webkit-input-placeholder {
        color: $primary-color;
    }
    .comment_form ::-moz-placeholder { 
        color: $primary-color;
    }
    .comment_form :-ms-input-placeholder { 
        color: $primary-color;
    }
    .comment_form :-moz-placeholder { 
        color: $primary-color;
    }
    .comment_form :placeholder { 
        color: $primary-color;
    }

    .windzfare_cause_details_top{
        margin-bottom: 60px;
        .windzfare_cause_details_img{
            position: relative;
            margin-bottom: 100px;
            .windzfare_cause_details_board{
                width: 600px;
                max-width: 100%;
                background: $white-color;
                padding: 50px 60px;
                position: absolute;
                bottom: -45px;
                left: 70px;
                @include bordered-bottom (3px, solid, $primary-color);
                box-shadow: 0px 2px 15px rgba($primary-color, 0.15);
                h2{
                    line-height: 48px;
                    margin-bottom: 20px;
                }
                p{
                    font-size: $font-16;
                    line-height: 32px;
                }
            }
        }
        p{
            font-size: $font-18;
            line-height: 36px;
        }
    }
    @media screen and (max-width: $breakpoint-desktop) {
        .windzfare_cause_details_top{
            margin-bottom: 60px;
            .windzfare_cause_details_img{
                .windzfare_cause_details_board{
                    padding: 40px 50px;
                }
            }
            p{
                font-size: $font-16;
                line-height: 30px;
            }
        }
    }
    @media screen and (max-width: $breakpoint-tablet) {
        .windzfare_cause_details_top{
            .windzfare_cause_details_img{
                margin-bottom: 30px;
                .windzfare_cause_details_board{
                    width: 100%;
                    position: relative;
                    bottom: 0;
                    left: 0px;
                }
            }
        }
    }

    .current_status_sec{
        box-shadow: 0px 0px 40px rgba($primary-color, 0.1);
    }
    .current_status_imageblock{
        position: absolute;
        height: 100%;
        top: 0;
        z-index: 2;
        left: 0;
        right: auto;
        padding: 0px;
        .current_status_img_holder{
            position: absolute;
            width: 95%;
            height: auto;
            top: 20px;
            bottom: 20px;
            left: 0;
            background-image: url('../images/causes/details_2.jpg');
            background-size: auto;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    }
    .current_status{
        padding-left: 50px;
        h1{
            margin-bottom: 30px;
        }
        h6{
            font-weight: $font-semibold;
            color: #788a9c;
            line-height: 30px;
        }

        .windzfare_progress_inner{
            display: flex;
            margin: 30px 0px;
            .windzfare_progress_amount{
                display: grid;
                font-size: 12px;
                margin-top: 0px;
                color: $primary-color;
                span{
                    font-family: $paragraph-font;
                    font-weight: $font-semibold;
                    font-size: $font-18;
                    .dot {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background: $primary-color;
                        border-radius: 100%;
                        margin-right: 10px;
                    }
                    i{
                        font-size: $font-16;
                        width: 22px;
                        height: 22px;
                        line-height: 23px;
                        @include bordered(1px, solid, #ededed);
                        border-radius: 100%;
                        display: inline-block;
                        color: $primary-color;
                        text-align: center;
                    }
                    b{
                        font-family: $heading-font;
                        font-size: $font-16;
                        color: $black-color;
                    }
                }
            }
        }
        .give_donation {
            .donation_amount_tab{
                justify-content: flex-start;
            }
            .select_currency_box{
                margin-right: 20px;
            }
            .windzfare_button_group{
                margin-top: 40px;
                .windzfare_button{
                    font-size: $font-14;
                    padding: 13px 54px;
                }
            }
        }
    }

    .project_area{
        text-align: center;
    }

    @media screen and (max-width: $breakpoint-desktop) {
        .current_status{
            .give_donation .select_currency_box{
                margin-right: 0px;
            }
        }    
    }
    @media screen and (max-width: $breakpoint-tablet) {
        .current_status_imageblock{
            display: none;
        }
        .current_status{
            &.windzfare_progress_content{
                margin-top: 0px;
            }
        }    
    }

    .windzfare_event_details_img{
        margin-bottom: 60px;
    }
    .windzfare_event_details_inner{
        .windzfare_event_details_left{
            padding-left: 75px;
        }
        h2{
            line-height: 48px;
            margin-bottom: 10px;
        }
        h5{
            line-height: 36px;
            color: $primary-color;
            margin-bottom: 20px;
        }
        p{
            font-size: $font-18;
            line-height: 36px;
            margin-bottom: 25px;
        }
        .windzfare_button_group{
            margin-top: 30px;
        }
    }

    .list_content {
        padding-right: 50px;
        ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            li{
                position: relative;
                font-size: 14px;
                line-height: 28px;
                @include bordered-bottom (1px, dashed, #788a9c);
                padding-top: 15px;
                padding-bottom: 15px;
                &:last-child{
                    border-bottom: 0px;
                }
                span{
                    font-family: $heading-font;
                    font-size: $font-16;
                    font-weight: $font-bold;
                    color: #788a9c;
                    padding: 0px 10px 0px 0px;
                }
            }
        }
    }
    @media screen and (max-width: $breakpoint-desktop) {
        .windzfare_event_details_inner{
            .windzfare_event_details_left{
                padding-left: 0px;
            }
        }
    }


    .event_schedule{
        padding-top: 60px;
        padding-bottom: 50px;
        .windzfare_schedule{
            padding: 35px;
            margin-bottom: 30px;
            @include bordered (1px, dashed, #bbbbbb);
            p{
                font-size: $font-14;
                span{
                    font-size: $font-16;
                    font-weight: $font-bold;
                    color: $primary-color;
                    margin-right: 10px;
                }
            }
            h5{
                line-height: 26px;
                margin-top: 12px;
            }
        }
    }

    .tab_sec{
        .windzfare_heading_wrapper{
            h1{
                font-size: 48px;
                color: $white-color;
            }
        }
    }
    .reg_form {
        input[type="text"],input[type="email"],textarea.form-control{
            @include bordered (0px, solid, $primary-color);
            background-color: #fef9fa;
        }
    }
    .reg_form ::-webkit-input-placeholder {
        color: $primary-color;
    }
    .reg_form ::-moz-placeholder { 
        color: $primary-color;
    }
    .reg_form :-ms-input-placeholder { 
        color: $primary-color;
    }
    .reg_form :-moz-placeholder { 
        color: $primary-color;
    }
    .reg_form :placeholder { 
        color: $primary-color;
    }

    .speakers{
        position: relative;
        &:before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #fef7f9;
            clip-path: polygon(0 0, 39% 0%, 50% 100%, 0% 100%);
        }
        > div > .row{
            align-items: center;
        }    
        .windzfare_heading_wrapper {
            text-align: right;
            margin: 0px 0px;
            h1{
                font-size: $font-30;
                text-transform: uppercase;
                margin: 0px 0px;
            }
            p{
                font-family: $heading-font;
                font-size: $font-18;
                font-weight: $font-light;
                color: $primary-color;
                margin: 0px 0px;
            }
            &:after{
                content: '';
                position: absolute;
                left: calc(100% + 30px);
                top: 50%;
                transform: translateY(-50%);
                width: 100%;
                height: 2px;
                background: $primary-color;
            }
        }
    }
    @media screen and (max-width: $breakpoint-desktop) {
        .speakers{
            > div > .row{
                flex-direction: column-reverse;
            }
            .windzfare_heading_wrapper {
                text-align: center;
                margin-bottom: 40px;
                &:after{
                    display: none;
                }
            }
        }
        .tab_sec{
            .windzfare_heading_wrapper{
                h1{
                    font-size: 36px;
                }
            }
        }
    }

}