/*
Theme Name: Saasland Child
Theme URI: https://droitthemes.com/wp/saasland-theme/demos/
Template: saasland
Author: DroitThemes
Author URI: https://themeforest.net/user/droitthemes
Description: Saasland is a creative WordPress theme for saas, software, startup, mobile app, agency and related products & services. SaasLand is loaded with tons of features, elements & blocks, options that give its users real flexibility to create a dynamic, professional website in no time.
Version: 1.1.5
Updated: 2021-08-12 

 */

/** ========================================================**/
/** ==== Main Home Page ====*/
/** ========================================================**/
.banner_area {
    background-color: #F4F3E7;
}

.main-col-slider .banner_text {
    position: relative;
    z-index: 2;
}

.banner_text .main-home-title {
    margin-bottom: 0;
}

.main-home-title+br {
    display: none;
}

.banner_area p.main-home-subtitle {
    color: #560216;
    padding-top: 40px;
    margin-bottom: 30px;
}

.right-buzz-content li:not(:last-child) {
    padding-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .right-buzz-content ul {
        padding-left: 1rem;
    }

    .buzz-group .elementor-heading-title>br {
        display: block;
    }
}

/** === Custom CSS For Main Home page - Saasland Tab ===  **/
.hdstudio-saalands-tab .container {
    padding-left: 0;
    padding-right: 0;
}

.hdstudio-saalands-tab .design_tab .nav-item {
    margin-bottom: 0;
}

.hdstudio-saalands-tab .design_tab .nav-item .nav-link {
    font-weight: 700;
    box-shadow: none;
    -webkit-box-shadow: none;
    padding: 20px;
}

.hdstudio-saalands-tab.has-last-button .design_tab .nav-item:last-child .nav-link,
.hdstudio-saalands-tab.has-last-button .design_tab .nav-item:last-child .nav-link:hover,
.hdstudio-saalands-tab.has-last-button .design_tab .nav-item:last-child .nav-link.active {
    border: none !important;
    background-color: transparent !important;
    padding-bottom: 20px;
    cursor: initial;
}

.hdstudio-saalands-tab .design_tab .nav-item .nav-link {
    border-bottom: 2px solid #F4F3E7;
}

.hdstudio-saalands-tab.color-b7895 .design_tab .nav-item .nav-link {
    border-bottom-color: var(--hd-blue-b4dbdc);
}

.hdstudio-saalands-tab.color-e47068 .design_tab .nav-item .nav-link {
    border-bottom-color: #e4706870;
}

.hdstudio-saalands-tab .design_tab .nav-item .title_color {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
}

.hdstudio-saalands-tab .design_tab .nav-item .nav-link:hover,
.hdstudio-saalands-tab .design_tab .nav-item .nav-link.active {
    background-color: #F4F3E7 !important;
    border-bottom-color: var(--hd-yellow);
}

.hdstudio-saalands-tab.color-b7895 .design_tab .nav-item .nav-link:hover,
.hdstudio-saalands-tab.color-b7895 .design_tab .nav-item .nav-link.active {
    background-color: var(--hd-blue-b4dbdc) !important;
    border-bottom-color: var(--hd-blue-b7895);
}

.hdstudio-saalands-tab.color-e47068 .design_tab .nav-item .nav-link:hover,
.hdstudio-saalands-tab.color-e47068 .design_tab .nav-item .nav-link.active {
    background-color: var(--hd-org-e47068) !important;
    border-bottom-color: var(--hd-org-e47068);
    color: #FFF;
}

.hdstudio-saalands-tab .design_tab .nav-item .nav-link:hover .title_color {
    color: var(--hd-blue) !important;
}

.hdstudio-saalands-tab.color-e47068 .design_tab .nav-item .nav-link:hover .title_color {
    color: #FFF !important;
}

.hdstudio-saalands-tab .tab-content .tab_img,
.hdstudio-saalands-tab .tab-content .tab_img p {
    margin-right: 0;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: #222;
}

.hdstudio-saalands-tab .tab-content .tab-pane .tab_img img {
    transform: none;
    -webkit-transform: none;
}

.hdstudio-saalands-tab .tab-content .tab-pane.show .tab_img img {
    max-width: 70%;
    padding-top: 30px;
}

.hdstudio-saalands-tab.has-last-button .nav-item .nav-link .last-button-tab {
    background-color: var(--hd-yellow);
    outline-color: var(--hd-yellow);
    color: #FFF;
    padding: 8px 30px;
    border-radius: 20px;
    border: 1px solid var(--hd-yellow);
    font-weight: 700;
}

.hdstudio-saalands-tab.has-last-button.color-b7895 .nav-item .nav-link .last-button-tab {
    background-color: var(--hd-blue-b7895);
    outline-color: var(--hd-blue-b7895);
    border-color: var(--hd-blue-b7895);
}

.hdstudio-saalands-tab.has-last-button.color-e47068 .nav-item .nav-link .last-button-tab {
    background-color: var(--hd-org-e47068);
    outline-color: var(--hd-org-e47068);
    border-color: var(--hd-org-e47068);
}

.hdstudio-saalands-tab.has-last-button .nav-item .nav-link .last-button-tab:hover {
    background-color: #FFF;
    color: var(--hd-yellow);
}

.hdstudio-saalands-tab.has-last-button.color-b7895 .nav-item .nav-link .last-button-tab:hover {
    color: var(--hd-blue-b7895);
}

.hdstudio-saalands-tab.has-last-button.color-e47068 .nav-item .nav-link .last-button-tab:hover {
    color: var(--hd-org-e47068);
}

.hdstudio-saalands-tab.row-reverse .row {
    flex-direction: row-reverse;
}

/** === END Custom CSS For Main Home page - Saasland Tab ===  **/

/** =================================== **/
/** === Custom CSS for Main Integration === **/
/** =================================== **/
.main-header.home-integration .payment_clients_area .clients_bg_shape_top,
.main-header.home-integration .payment_clients_area .clients_bg_shape_right,
.main-header.home-integration .payment_features_content .icon {
    display: none;
}

.main-header.home-integration .payment_clients_area.drdt-ignore-dark {

    background: transparent;
}

.main-header.home-integration .agency_banner_btn.drdt-ignore-dark {
    outline: none;
    color: #FFF !important;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-weight: 700;
    margin-left: 0;
}

.main-header.home-integration .agency_banner_btn.drdt-ignore-dark:hover {
    background-color: #FFF;
    color: var(--hd-blue) !important;
    border-color: var(--hd-blue);
}

.main-header.yellow-header.home-integration .agency_banner_btn.drdt-ignore-dark:hover {
    color: var(--hd-yellow) !important;
    border-color: var(--hd-yellow);
}

.main-header.home-integration .agency_banner_btn.drdt-ignore-dark:hover:before {
    display: none;
}

.main-header.home-integration .container .col-lg-6 {
    padding-left: 0;
}

@media only screen and (min-width: 650px) and (max-width: 767px) {
    .elementor-element .elementor-element.elementor-widget.home-integration .elementor-widget-container {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 992px) {
    .home-integration .payment_clients_area .payment_clients_inner {
        height: 450px;
        margin-top: 50px;
    }
}

/** === End Custom CSS for Main Home Integration === **/

/** === Custom CSS for Image-Content Group === **/
.grid-learn-more {
    position: relative;
}

.grid-learn-more .elementor-image-box-img img {
    width: 100%;
    height: 220px;
}

.grid-learn-more .elementor-image-box-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 35px;
}

.grid-learn-more .elementor-image-box-content .learn-more {
    position: absolute;
    bottom: 10px;
}

.grid-learn-more .elementor-image-box-content .learn-more a {
    font-weight: 700;
}

.grid-learn-more .elementor-image-box-content .learn-more a i.fa-angle-right {
    padding-left: 5px;
    font-weight: 700;
    font-size: 16px;
}

/** === END Custom CSS for Image-Content Group === **/

/** === Custom CSS for Main FAQ === **/
.main-faq .droit-icon span[class^="droit-accordion-icon"] svg {
    stroke: black;
    fill: #560216;
}

/** === END Custom CSS for Main FAQ === **/

/** === CUSTOM CSS For Main Home Contact Form === **/
.main-cf7 .dl_contact_form_wrapper.wpcf7_default {
    background-color: transparent;
}

.main-cf7 .wpcf7-form-control.wpcf7-text,
.main-cf7 .wpcf7-form-control.wpcf7-textarea {
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 10px 12px 10px 15px;
}

.main-cf7 .wpcf7-form-control.wpcf7-text {
    height: auto;
}


.main-cf7 .wpcf7-not-valid-tip {
    font-size: 12px;
    font-style: italic;
}

.main-cf7 .wpcf7 form .wpcf7-response-output {
    margin-top: 20px;
    border: 2px solid var(--hd-red-ce0000);
    color: var(--hd-red-ce0000);
}

.main-cf7 .wpcf7-form[data-status="sent"] .wpcf7-response-output {
    border-color: #256C70;
    color: #256C70;
}

.grecaptcha-badge {
    display: none !important;
}

.sass_button_form .text_box_saas {
    position: relative;
    margin-top: 15px;
}

.sass_button_form .text_box_saas p {
    margin-bottom: 0;
}

.wpcf7-form .sass_button_form .text_box_saas input:disabled+.wpcf7-spinner {
    position: absolute;
    visibility: visible;
    opacity: 1;
    display: block;
    top: 50%;
    transform: translate(-50%, -50%);
    left: initial;
    right: 0;
    margin: 0;
    background-color: var(--hd-blue);
}

.wpcf7-form .sass_button_form input.wpcf7-submit {
    margin: 0;
}

.wpcf7-form input:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.wpcf7-not-valid-tip:not(:last-child),
.wpcf7-spinner:not(:last-child),
.sass_button_form .text_box_saas span.wpcf7-spinner:not(:last-child) {
    display: none;
}

.main-cf7.circle-spin .wpcf7-spinner::before {
    animation-name: circle-spin;
}

@keyframes circle-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
/** === END Custom CSS For Main Home Contact Form === **/

@media screen and (min-width: 992px) {
    /** CSS Saasland Tab **/
    .hdstudio-saalands-tab .container .col-lg-4,
    .hdstudio-saalands-tab .container .col-lg-8 {
        padding-left: 12px;
        padding-right: 12px;
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: start !important;
    }

    /** CSS For Main Home Contact Form **/
    .main-cf7 .wpcf7 form .wpcf7-response-output {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
        margin-left: auto;
        margin-right: auto;
    }
}

/** ========================================================**/
/** ==== Industry / Beauty and Salon Page ==== */
/** ==== URL https://hdstudio.app/industries/beauty-salon ==== **/
/** ========================================================**/
.compare-feature-list .priceing_area_four>.container {
    padding: 0;
}

.compare-feature-list .price_item svg {
    width: 22px;
    fill: #E47068;
    transition: fill 0.3s;
}

.compare-feature-list .price_item svg.e-fas-ban {
    opacity: 0.45;
    fill: #afb5c7;
}

.compare-feature-list .price_info_two .price_item:first-child {
    padding: 23px 20px;
}

.compare-feature-list .price_info_two .price_head .p_head {
    padding: 11px 0;
}

.compare-feature-list .price_info_two .price_item .pr_title {
    padding-left: 0;
}

@media only screen and (max-width: 768px) {
    .compare-feature-list .price_info_two .price_item {
        padding: 15px 0;
    }

    .compare-feature-list .price_info_two .price_item:last-child {
        background-color: #FFF;
        border-top: 1px dashed #94a2ce;
    }
}

/** ========================================================**/
/** ==== Industry / Beauty and Salon / Hair Salon Page ==== */
/** ==== URL https://hdstudio.app/industries/beauty-salon/hair-salon ==== **/
/** ========================================================**/

/** === For Rave Reviews & Love Notes section  === **/
.hair-salon-reviews .feedback_area_three.bg_color {
    padding-top: 0;
    padding-bottom: 0;
}

.hair-salon-reviews .feedback_area_three.bg_color .container {
    padding-left: 0;
    padding-right: 0;
}

.feedback_area_three .feedback_slider_two .owl-nav i:hover {
    background-color: var(--hd-blue);
    border-color: var(--hd-blue);
}

/** === For Rave Reviews & Love Notes section  === **/
.discover-icon-list .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon {
    border: 1px solid #FFF;
    padding: 3px;
    border-radius: 100%;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
}

.feedback_area_three .feedback_slider_two .feedback_item p {
    line-height: 1.6;
}

.feedback_area_three {
    height: auto;
    min-height: 200px;
}

@media only screen and (max-width: 767px) {
    .feedback_area_three .feedback_slider_two .owl-nav {
        right: 22px;
        top: -50px;
        display: block;
    }

    .feedback_area_three .feedback_slider_two .owl-nav button.owl-prev,
    .feedback_area_three .feedback_slider_two .owl-nav button.owl-next {
        display: inline-block;
    }

    .feedback_area_three .feedback_slider_two .owl-nav i {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
}

@media only screen and (min-width: 768px) {
    .hair-salon-reviews .sec_title.mb_70 {
        margin-bottom: 20px;
    }

    .hair-salon-reviews .feedback_slider_two .owl-nav {
        top: -70px;
        right: 22px;
    }

    .feedback_area_three .feedback_slider_two .feedback_item p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 75px;
    }

    .h-md-100 {
        height: 100%;
    }
}

@media only screen and (min-width: 960px) {
    .grid-salon-software-solution {
        width: 80%;
        max-width: 80%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1024px) {
    .feedback_area_three .feedback_slider_two .owl-nav {
        right: 24px;
    }
}

@media only screen and (min-width: 1200px) {
    .grid-salon-software-solution {
        padding-left: 5%;
    }
}

/** === For Discover Other Beauty & Salon Software Solutions section === **/

.discover-icon-list .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon i {
    font-size: 24px;
}

.discover-icon-list .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon svg {
    width: 30px !important;
    margin: 0 !important;
}

.discover-icon-list .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text {
    padding-left: 0;
    margin-left: 15px;
}

.discover-icon-list .elementor-icon-list-items:hover .elementor-icon-list-item:hover {
    cursor: pointer;
}

.discover-icon-list .elementor-icon-list-items:hover .elementor-icon-list-item:hover .elementor-icon-list-icon {
    border: 2px solid #e6f0f2;
}

.discover-icon-list .elementor-icon-list-items:hover .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #0BA3AD;
    border-bottom: 1px dashed #0ba3ad;
}

/** ========================================================**/
/** ==== Update CSS on June 17th 2024 ==== */
/** ========================================================**/
.click-book-process .setup_inner {
    max-width: 1200px;
}

.shadow-box {
    height: 96%;
    position: absolute;
    width: 200%;
    top: 0;
    left: auto;
    right: -10%;
    border-radius: 0 0 90% 50%;
    -webkit-box-shadow: 0 2px 46px 0 rgb(255, 175, 184);
    box-shadow: 0 2px 46px 0 rgb(255, 175, 184);
    padding: 0;
}

/** === CSS For Default Horizontal Tab  === **/
.default-horizontal-tab.elementor-widget-tabs .elementor-tabs-wrapper {
    overflow-x: auto;
}

.default-horizontal-tab.elementor-widget-tabs .elementor-tabs .elementor-tab-title.elementor-active {
    position: relative;
}

.default-horizontal-tab.elementor-widget-tabs .elementor-tabs .elementor-tab-title.elementor-active:before {
    content: none;
}

.default-horizontal-tab.elementor-widget-tabs .elementor-tabs .elementor-tab-title.elementor-active:after {
    content: "";
    position: absolute;
    width: 100%;
    height: .2em !important;
    background-color: #004369;
    border-radius: .09em;
    left: 0;
    bottom: 0;
}

.default-horizontal-tab.elementor-widget-tabs .elementor-tabs .elementor-tab-content {
    padding: 30px 0;
}

@media only screen and (min-width: 768px) {
    .click-book-process .setup_inner .setup_item {
        padding: 20px 0;
    }

    .default-horizontal-tab.elementor-widget-tabs .elementor-tab-title {
        text-align: center;
    }
}

/** === END CSS For Default Horizontal Tab  === **/


/** === CSS For Default Triangle Shape  === **/
.triangle-shape {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 51%;
    width: 100%;
    z-index: 2;
    background: #FDEAEE;
    pointer-events: none;
}

.triangle-shape svg {
    position: absolute;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    background: #fff;
    min-height: 50px;
    height: auto;
}

/** === END Custom CSS CSS For Default Triangle Shape  === **/

@media only screen and (max-width: 767px) {
    .setup_inner .setup_item.flex-row-reverse .setup_content {
        padding-right: 0;
    }

    .overlap-mobile {
        position: absolute;
        height: 100%;
        top: 0;
        width: 100%;
        text-align: center;
        opacity: 0.1;
        justify-content: center;
        align-content: center;
    }

    .default-horizontal-tab.elementor-widget-tabs .elementor-tab-title {
        font-size: 18px !important;
    }

    .elementor-widget.triangle-shape {
        height: 55%;
    }
}

@media only screen and (max-height: 600px) {
    .main-top-banner {
        min-height: 616px;
    }

    .shadow-box {
        height: auto !important;
        min-height: 590px !important;
    }
}

/** ========================================================**/
/** ==== Update CSS on June 21st 2024 ==== */
/** ========================================================**/
.marked-word {
    background-color: #f8b1bf;
    border-radius: 1rem 1rem 1rem 0;
    padding: 0 .5rem;
    margin: 0 -0.5rem 0 0;
    line-height: 1rem;
    white-space: nowrap;
    color: #FFF;
}

@media only screen and (max-width: 767px) {
    .marked-word {
        display: inline-block;
        word-wrap: break-word;
        width: fit-content;
        white-space: normal;
        line-height: normal;
    }
}
/** ========================================================**/
/** ==== Update CSS on August 2nd 2024 ==== */
/** ========================================================**/
.bottom-line-box {
    min-height: 233px;
    border-radius: 0;
    box-shadow: none;
    background-image: url(/wp-content/uploads/2024/07/border-vecto-line.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -1px;
    background-size: 100%;
    z-index: 1;
    background-color: transparent;
}

.elementor {
    background-color: #FFF !important;
}

@media only screen and (min-width: 3001px) {
    .main-top-shape-banner.e-con {
        max-width: 3000px;
    }
}

.none-action-link {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

/** ========================================================**/
/** ==== Update CSS on Sep 11st 2024 ==== */
/** ========================================================**/
.social-icon a,
.social_icon a,
.social-icons a:is(:hover, :visited, :focus, :active),
.social_icon a:is(:hover, :visited, :focus, :active) {
    text-decoration: none;
}

.social-icons.youtube a:is(:hover, :focus, :active) i,
.social_icon a:is(:hover, :visited, :focus, :active) i.social_pinterest {
    color: #F00;
}

.social-icons.linkedin a:is(:hover, :focus, :active) i,
.social_icon a:is(:hover, :visited, :focus, :active) i.social_linkedin {
    color: #0077b5;
}

.social-icons.twitter a:is(:hover, :focus, :active) i,
.social_icon a:is(:hover, :visited, :focus, :active) i.social_twitter {
    color: #000;
}

.social-icons.facebook a:is(:hover, :focus, :active) i,
.social_icon a:is(:hover, :visited, :focus, :active) i.social_facebook {
    color: #0866ff;
}

.elementor-element:where(.e-con-full, .elementor-widget) {
    grid-gap: var(--gap);
}

/** ========================================================**/
/** ==== Update CSS on Sep 16th 2024 ==== */
/** ========================================================**/

/** Custom CSS for the Industry page **/
.compare-feature-list .price_info_two .price_body .pr_list:last-child {
    display: none;
}

.x-icon-button-cta svg {
    margin-top: -2px;
}

@media only screen and (max-width: 767px) {
    .hdstudio-hero6-img .payment_banner_area .payment_banner_content{
        margin-top: 0;
    }
}

@media only screen and (max-width: 991px) {
    br {
        display: none;
    }

    .hdstudio-hero6-img .payment_banner_area .animation_img_two {
        visibility: visible;
        animation-delay: 0.5s;
        display: flex;
        position: absolute;
        top: 20%;
        width: 100%;
        left: 0;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .hdstudio-hero6-img .payment_banner_area .animation_img_two img {
        width: 100%;
        opacity: 0.5;
        height: fit-content;
    }
}

@media only screen and (max-height: 600px) {
    @media only screen and (min-width: 768px) {
        .hdstudio-hero6-img .payment_banner_area {
            min-height: 600px;
        }
    }

    @media only screen and (min-width: 992px) {
        .hdstudio-hero6-img .payment_banner_area {
            min-height: 700px;
        }
    }
}

@media only screen and (max-width: 480px) and (max-height: 420px) {
    .hdstudio-hero6-img .payment_banner_area .payment_banner_content {
        padding-top: 65px;
    }
}

@media only screen and (max-width: 1025px) {
    @media only screen and (min-width: 320px) {
        .elementor-element.hd-grid-salon-beauty.e-con {
            --e-con-grid-template-columns: repeat(3, 1fr);
        }
    }

    @media only screen and (min-width: 420px) {
        .elementor-element.hd-grid-salon-beauty.e-con {
            --e-con-grid-template-columns: repeat(4, 1fr);
        }
    }

    @media only screen and (min-width: 520px) {
        .elementor-element.hd-grid-salon-beauty.e-con {
            --e-con-grid-template-columns: repeat(5, 1fr);
            --e-con-grid-template-rows: repeat(1, 1fr);
        }
    }

    @media only screen and (min-width: 992px) {
        .elementor-element.hd-grid-salon-beauty.e-con {
            width: 740px;
            margin: 0 auto;
        }
    }
}