/*
Theme Name: Hello Elementor Child
Theme URI: 
Description: Child theme of hello-elementor theme for the Hello Elementor theme
Author: <a href="https://elementor.com/?utm_source=wp-themes&#038;utm_campaign=author-uri&#038;utm_medium=wp-dash">Elementor Team</a>
Author URI: 
Template: hello-elementor
Version: 3.1.1
*/

/* custom tab on home */
.check-lft-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tab1 {
    width: 100% !important;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab1 .tablinks {
    display: block;
    border: #27912E 1px solid;
    color: #000;
    background-color: transparent;
    padding: 10px 16px;
    margin: 0px 10px;
    width: 10%;
    outline: none;
    border-radius: 0px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-transform: capitalize;
}

.tab1 .tablinks:hover {
    background-color: #279ca8;
    color: #347900 !important;
}

.tab1 .tablinks.active {
    background-color: #279ca8 !important;
    color: #fff !important;
}

.first {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.last {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 20px !important;
}

.content-div {
    width: 100%;
}

.content-div ul li {
    list-style-type: disc;
    font-size: 18px;
    font-weight: 400;
}

.tabcontent {
    width: 100%;
    gap: 50px;
    padding: 30px 0px 0px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.tab-img {
    width: 40%;
}

.tab-img img {
    width: 100%;
}

.tab-txt {
    width: 50%;
}

.tabcontent div {
    height: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tabcontent p {
    margin: 10px;
    text-align: center;
    -webkit-animation: zoomIn 1s;
    animation: zoomIn 1s;
    color: #192a56;
}

.tabcontent p span {
    color: #192a56;
    font-size: 60px;
    display: inline-block;
    font-family: sans-serif !important;
    font-weight: bold;
}

/* custom button for website start here */
.cta-button-default {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-button-default:hover {
    background-color: #f2f2f2;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.cta-button-default:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.cta-button-default .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: #eaeaea;
    border-radius: 50%;
    margin-right: 10px;
    padding: 10px;
    transition: background-color 0.3s ease;
}

.cta-button-default .icon {
    font-size: 20px;
    color: #000;
}

a.cta-button-default:hover {
    color: #000;
}

.cta-button-default:hover .icon-container {
    background-color: #279ca8;
}

.cta-button-another {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #279ca8;
    border: 2px solid #000;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-button-another:hover {
    background-color: #167882;
    border-color: #000;
    transform: translateY(-2px);
}

.cta-button-another:active {
    transform: translateY(0);
}

.cta-button-another .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin-right: 8px;
    padding: 5px;
    transition: background-color 0.3s ease;
}

.cta-button-another .icon {
    font-size: 16px;
    color: #fff;
    transition: color 0.3s ease;
}

.cta-button-another:hover .icon-container {
    background-color: #fff;
}

.cta-button-another:hover .icon {
    color: #000;
}

/* custom button for website end here */

/* Slide In From The Top Option */

.clshead-mb-2 {
    transform: translatey(-80px);
    -moz-transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    transition: all .3s ease !important;
    width: 100% !important;
}

.elementor-sticky--effects.clshead-mb-2 {
    height: auto !important;
    transform: translatey(0px);
}

.elementor-sticky--effects.clshead-mb-1 {
    display: none !important;
}

/* End Of Slide In From The Top Option */

/* Fade In Option */

.clshead-mb-2 {
    opacity: 0;
    display: none;
    -moz-transition: opacity .25s ease-out !important;
    -webkit-transition: opacity .25s ease-out !important;
    transition: opacity .25s ease-out !important;
}

.elementor-sticky--effects.clshead-mb-2 {
    opacity: 1 !important;
    display: block;
}

/* End Of Fade In Option */
@media screen and (max-width:550px) {
    .check-lft-child {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tab1 {
        width: 100% !important;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .tab1 .tablinks {
        display: block;
        border: #27912E 1px solid;
        color: #000;
        background-color: transparent;
        padding: 10px 16px;
        margin: 0px 10px 10px 10px;
        width: 40%;
        outline: none;
        border-radius: 0px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        text-transform: capitalize;
    }

    .tab1 .tablinks:hover {
        background-color: #279ca8;
        color: #347900 !important;
    }

    .tab1 .tablinks.active {
        background-color: #279ca8 !important;
        color: #fff !important;
    }

    .first {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

    .last {
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 20px !important;
    }

    .content-div {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .content-div ul li {
        list-style-type: disc;
        font-size: 18px;
        font-weight: 400;
    }

    .tabcontent {
        width: 100%;
        gap: 20px;
        padding: 30px 0px 0px 0px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .tab-img {
        width: 100%;
    }

    .tab-img img {
        width: 100%;
    }

    .tab-txt {
        width: 100%;
    }

    .tabcontent div {
        height: 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .tabcontent p {
        margin: 10px;
        text-align: center;
        -webkit-animation: zoomIn 1s;
        animation: zoomIn 1s;
        color: #192a56;
    }

    .tabcontent p span {
        color: #279ca8;
        font-size: 60px;
        display: inline-block;
        font-family: sans-serif !important;
        font-weight: bold;
    }

    .cls-header-mobile .cta-button-another,
    .cls-header-mobile .cta-button-default {
        padding: 8px 11px;
        margin-right: 5px;
    }

}