@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --pri-color: #F9A822;
    --sec-color: #AB54DB;
    --light-purple-bg: #FAF6FF;
    --headings-color: #141F39;
    --mian-font-color: #4F4F4F;
    --button-color: #24052F;
    --body-color: #4F4F4F;
    --footer-bg: #24052F;
}

html {
    scroll-behavior: smooth;
}

.light-purple-bg {
    background-color:var(--light-purple-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Space Grotesk", sans-serif;
    font-style: normal;
}

body {
    font-family: Inter;
    font-style: normal;
    color: var(--body-color);
    overflow-x: hidden;
}


.space-p-t {
    padding-top: 80px;
}

.space-p-b {
    padding-bottom: 80px;
}

.space-p-tb {
    padding: 80px 0;
}

.space-m-t {
    margin-top: 80px;
}

.space-m-b {
    margin-bottom: 80px;
}

.space-m-tb {
    margin: 80px 0;
}

.ctm-mian-title {
    font-size: 36px;
    line-height: 1.3;
    font-style: normal;
    font-weight: 700;
    color:var(--headings-color);
}

.ctm-title-text {    
    font-style: normal;
    font-weight: 400;
    font-size: 18px;   
    line-height:1.3;    

}


.ctm-main-header {
    padding: 15px 0;
    background-color: #FAFAFA;
}


.header-btn {
    padding:10px 20px;
    background-color:var(--button-color);
    display:inline-block;
    text-decoration:none;
    border-radius:10px;
    color:#fff;
    transition:0.3s ease-in;
}

.header-btn:hover {
    background-color:var(--pri-color);
    color:#000;
}

.navbar-expand-lg .navbar-nav {
    gap: 20px;
}
.navbar-light .navbar-nav .nav-link {
    color: #141F39;
}

.menu-btnsDiv {
    display: flex;
    gap: 16px;
    align-items: center;
}


/*Main Banner homepage*/

.mian-banner-home {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    position:relative;
}

.mian-banner-title {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-size: 51px;
    line-height: 50px;    
    color: #141F39;
}


.mian-banner-title span{
    color:var(--pri-color);
}

.mian-banner-cont {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    max-width: 450px;
}

.banner-btn-dark {
    display: inline-block;
    padding: 20px 50px;
    background-color: #24052F;
    text-decoration: none;
    border-radius: 10px;
    color: #fff;
    transition:0.3s ease-in-out;
}

.banner-btn-dark:hover {
    background-color:var(--pri-color);
    color:#000;
}


.global-btn-dark {
    display: inline-block;
    padding: 20px 50px;
    background-color: #24052F;
    text-decoration: none;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.global-btn-dark:hover {
    background-color: var(--pri-color);
    color: #000;
}

.banner-btn-holder {
    display: flex;
    align-items: center;
    gap: 35px;
}
.banner-btn-holder-thk{
    justify-content:center;
}
    .banner-btn-holder-thk .mian-banner-title{
        line-height:65px;
    }
    .banner-btn-link {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #000;
        text-decoration: none;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        transition: 0.3s ease-in;
    }

.banner-btn-link:hover {
    color: var(--pri-color);
}

.global-btn-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    transition:0.3s ease-in;
}

.global-btn-link:hover {
    color:var(--pri-color);
}

.mian-banner-img {
    position: absolute;
    right: 0;
    max-width: 58vw;
    top: 30px;
    bottom: 0;
    margin: auto;
}

.mian-banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/*Main Banner homepage end*/
/*Trusted partners logos*/
.tp-title {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 44px;
    /* identical to box height, or 183% */
    text-align: center;
    letter-spacing: -1px;
    color: #141F39;
}

.tp-logo-slider {
    display: flex;
    justify-content: space-between;
    padding: 32px 0;
    align-items: center;
}

/*Trusted partners logos End*/


/*Shapes CSS*/
.ctm-lt-shape {
    background-position: 40px top;
    background-repeat: no-repeat;
    background-size: 347px;
}

.shape-rt {
    position: absolute;
    right: 36px;
    top: 64px;
    max-width: 386px;
    z-index: -1;
}
/*Shapes CSS End*/

.ctm-zindex-1 {
    z-index:1;
}
/*LP Box*/
.light-purple-box {
    padding: 40px;
    height: 100%;
    background-color: var(--light-purple-bg);
}

.light-purple-box h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;  
    letter-spacing: -1px;
    color: #141F39;
    /*LP Box End*/
}

.pp-img-holder {
    margin-top: 40px;
}

.purple-gradient-bg {
    background: linear-gradient(180deg, #FAF6FF 0%, #FFFFFF 100%);
}


/*Tabs Homepage*/

#ctm-chat-tabs {
    flex-direction: column;
    text-align: left;
}

.ctm-tab-title {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #141F39;
}

.ctm-tab-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #4F4F4F;
    opacity: 0.7;
    margin-top: 10px;
}

.item-chat-tab button {
    background-color: transparent;
    border: none;
    text-align: left;
    color: #000;
    width: 100%;
    padding: 30px 0;
    border-bottom: 2px dashed #C8AEE9;
}

.chatBg-green {
    background: #F8FFF6;
}

.chatBg-cream {
    background: linear-gradient(180deg, #FFF9EE 0%, rgba(255, 249, 238, 0.1) 100%);
}

.chatBg-pink {
    background: linear-gradient(180deg, #FFEEF3 0%, rgba(255, 238, 243, 0.2) 100%);
}
.chatBg-purple {
    background: linear-gradient(180deg, #F7EEFF 0%, rgba(247, 238, 255, 0.2) 100%);
}   


.chatBgBox-div {
    position: relative;
    z-index: 1;
    border-radius: 22px;
}

.chatBgImg {
    text-align: center;
}

.chatBg-cont h4 {
    font-size: 20px;
    color: #320B3C;
    font-weight: 700;
}

.chatBg-cont p {
    color: #495C6E;
}


/*.nav-link.active {    
    border-bottom: 2px solid var(--pri-color);
}*/

/*Tabs Homepage end*/


.ctm-shape-rt {
    background-size: 333px;
    background-repeat: no-repeat;
    background-position: 91% 0px;
}

.ctm-mini-title {
    font-weight: 500;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: 2px;
    color: #24052F;
}


.ctm-imgbox-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
}

.ctm-imgbox-cont {
    max-width: 450px;
}



.imgl-box-shape {
    position: absolute;
    left: -105px;
    top: -74px;
    z-index: -1;
    max-width: 350px;
}


.imgr-box-shape {
    position: absolute;
    right: -118px;
    z-index: -1;
    top: -38px;
    max-width: 331px;
}


/*Icon Boxes*/

.icon-logo-holder {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.ic-icon-item {
    background-color: #FFFFFF;
    box-shadow: 0px 0px 11px rgba(229, 213, 250, 0.7);
    border-radius: 19px;
    padding: 15px 15px;
    transition:0.3s;
}

/*.item-chat-tab:hover {
    padding: 10px 10px 0;
    box-shadow: 4px -2px 8px 3px #ccc;
    border-radius: 10px;
}*/

/*.item-chat-tab:hover button {
    border-bottom: none;
}*/

.item-chat-tab {
    transition: 0.4s;
    padding: 10px 10px 0;
}

.ic-icon-item:hover {
    transform: scale(1.4);
}

.ic-center-box {
    background-color: transparent;
    box-shadow: none;
}
/*Icon Boxes End*/


/*Graph boxes*/
.ctm-graphbox {
    background: #FFFFFF;
    box-shadow: 0px 0px 13px rgba(185, 84, 218, 0.15);
    border-radius: 24px;
    padding: 18px 36px;
    height: 100%;
}

.ctm-graphbox h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 33px;
    color: #000000;
    margin-bottom: 20px;
}
/*Graph boxes end*/



/*contact Section homepage*/

.aar-title {
    font-weight: 700;
    font-size: 71px;
    line-height: 82px;
    text-align: center;
    letter-spacing: -1px;
    color: var(--headings-color);
    margin-bottom: 30px;
}

.aar-cont {
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
}

.chattrik-experts {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-top: 60px;
}

/*contact Section homepag End*/


/*Customers Say Slider*/

.cs-cont-holder {
    border-radius: 30px;
    overflow: hidden;
    position:relative;
}

/* the slides */
.customers-slider .slick-slide {
    margin: 0 10px;
}

/* the parent */
.customers-slider .slick-list {
    margin: 0 -10px;
}

.box-decor-none a {
    text-decoration:none;
}

.box-over-cont {
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 240px;
    padding: 15px 15px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.84) 100%);
    backdrop-filter: blur(6px);
    color: #fff;
}

.box-over-cont h5 {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom:15px;
    color: #FFFFFF;
}

.tm-name, .tm-desig{
    display: block;
    font-size: 13px;
}

.box-over-cont p {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
}

/*Customers Say Slider End*/


/*Icon box homepage*/

.ctm-icon-box {
    background: #FFFFFF;
    box-shadow: 0px 4px 19px rgba(38, 64, 234, 0.14);
    border-radius: 35px;
    text-align:center;
}

.ctm-icon-box span {
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    color: #223147;
    display: block;
    margin-top: 10px;
}

.ctm-icon-box {
    background: #FFFFFF;
    box-shadow: 0px 4px 19px rgba(38, 64, 234, 0.14);
    border-radius: 35px;
    text-align: center;
    min-height: 183px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transition: 0.3s;
    padding: 0 10px;
}

.ctm-icon-box:hover {
    transform: scale(1.1);
}

.ctm-icon-box i{
    font-size: 70px;
}

.ctm-icon-box.is--active {
    background-color: #000;
}

.ctm-icon-box.is--active span{
    color: #fff;
}

.ctm-icon-box.is--active i::before {
    color: #fff;
}

.iconbox-mian-img {
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 40px;
}

.icontab-link {
    text-decoration: none;
    /*margin-top: 30px;*/
    display: block;
    color:var(--sec-color);
}

.icontab-link:hover {   
    color: var(--headings-color);
}


.icontab-cont-box h3 {
    /*margin-bottom: 30px;*/
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color:var(--headings-color);
}

.icontab-subtitle {
    /*margin-bottom: 30px;*/
    display: block;    
   color:var(--pri-color);
}

.ctm-ic-box-holder {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/*Icon box homepage End*/
/*Footer*/
.mian-footer {
    background-color: var(--footer-bg);
    padding: 80px 0px 20px;
}

.foo-logo {
    margin-bottom: 15px;
}
.foo-copyright a {
    text-decoration: none;
    color: #B4B6C4;
    font-weight: 400;
    line-height: 1.5;
}
.foo-inf-holder, .foo-copyright {
    color: #B4B6C4;
}

.foo-inf-holder p {
    line-height: 1.8;
}

.foo-widget-holder h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: #FFFFFF;
    margin-bottom:15px;
}

.foo-holder {
    padding-bottom: 80px;
}

.foo-nav {
    list-style:none;
    padding-left:0;
    margin-bottom:0;
}

.foo-nav li a {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #B4B6C4;
    text-decoration: none;
    margin-bottom: 15px;
    display: block;
    transition:0.3s ease-in-out;
}

.foo-nav li a:hover {
    color: var(--pri-color);
}

.foo-nav li:last-child a {
    margin-bottom:0;
}

.foo-copyright {
    display: flex;
    justify-content: space-between;
}

.foo-ss-icons {
    padding-left: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}

.foo-ss-icons a{
    color: #B4B6C4;
    transition:0.3s ease-in;
}

.foo-ss-icons a:hover {
    color: var(--pri-color);
}

.foo-info-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 25px;
}

.foo-info-list li a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 15px;
    color: #B4B6C4;
    font-size: 16px;
    align-items: center;
}

.foo-info-list li:last-child a {    
    margin-bottom: 0px;    
}

.foo-copyright p a {
    color: #B4B6C4;
    text-decoration:none;
}

.foo-copyright p a:hover {
    color: var(--pri-color);    
}
.pp-tc{
    display:flex;
    gap:20px;
}
/*Footer End*/
/*Payment details Css*/
/*progress Bar css*/
.steps .step-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
    .steps .step-box:after {
        position: absolute;
        background-color: #B526E6;
        content: '';
        width: 75%;
        height: 2px;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 25%;
        z-index:-1;
    }
    .steps .step-box .step-box1 .step-c {
        background-color: #B526E6;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50px;
    }
    .steps .step-box .step-box1 .step-t {
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #000000;
        margin-top:10px;
    }

       


        .steps .step-box .step-box1 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
.order-top span {
    display: block;
    font-weight: 700;
    font-size: 26px;
    line-height: 33px;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    color: #320B3C;
    margin-bottom:40px;
}
.starter span {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
    display: flex;
    align-items: center;
    color: #320B3C;
    margin-bottom:8px;
}
.p-num span {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #B526E6;
    margin-bottom: 8px;
}
.price-holder{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
    .price-holder p {
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        display: flex;
        align-items: center;
        color: #4F4F4F;
    }
.order-s {
    border: 1px solid #D9D9D9;
    border-radius: 20px;
}
.order-top{
    padding:28px 13px 40px 29px;
}
    .order-top p{
        margin-bottom:35px;
    }
.p-list{
    list-style:none;
    column-count:2;
}
    .p-list li {
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: #4F4F4F;
        position:relative;
    }
        .p-list li::after {
            content: '';
            position: absolute;
            background-image: url(../images/icons/p-tick.png);
            width: 13px;
            height: 13px;
            left: -26px;
            top: 7px;
        }
.order-bottom {
    background: #EEF0F2;
    border: 1px solid #D9D9D9;
    border-radius: 0px 0px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0 35px 0;
}
    .order-bottom .day {
        font-weight: 700;
        font-size: 16px;
        line-height: 36px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #000000;
    }
    .order-bottom .day {
        font-weight: 400;
        font-size: 16px;
        line-height: 36px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #000000;
    }
.credit-card-form {
    border: 1px solid #D9D9D9;
    border-radius: 20px;
    padding:39px 42px 47px 41px;
}
    .credit-card-form h4 {
        font-weight: 700;
        font-size: 36px;
        line-height: 46px;
        display: flex;
        align-items: center;
        letter-spacing: -1px;
        color: #320B3C;
        margin-bottom:60px;
    }
.cc-holder{
    position:relative;
}
    .cc-holder img {
        position: absolute;
        right: 20px;
        top: 10%;
    }
.GoBack {
    background: #24052F;
    border-radius: 84px;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
    text-decoration:none;
    padding:18px 75px;
    display:block;
}
.cardField input {
    margin-bottom: 34px;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    height:40px;
}
.cardField label {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #000000;
    margin-bottom:8px;
}
/*Payment details Css*/
@media (max-width: 1600px) {
    .ctm-shape-rt {
        background-position: 95% 0px;
    }
}



/*---------------------------- Samit Css -------------------------------*/

.headingDarkBlue {
    color:#141F39;
}

.headingDarkPurple {
    color: #320B3C;
}

.bg-Lpink {
    background-color: #FAF6FD;
}

.bg-gray {
    background-color: #F7F5FB;
}

.lg-cont {
    font-size: 18px;
    color: #141F39;
}

.p-color {
    color: #4F4F4F;
}

.bg-DarkPurple {
    background-color: #24052F !important;
}

.inner-banner {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.inner-banner-thk .mian-banner-title {
    line-height:65px;
}
.inner-banner-thk img{
    margin-bottom:35px;
}
.inner-banner-p {
    font-size: 18px;
    line-height: 35px;
    color: #4F4F4F;
}

.mission-sec {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding:150px 0;
}

.mission-sec:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/division-border.webp);
    background-repeat: no-repeat;
    background-position: center;
    height: 90%;
    width: 2px;
    left: 50%;
    top: 30px;
}

.whyChattrik-sec span {
    font-weight: 700;
    color: #495c6ecc;
}

.whyChattrik-box {
    background: linear-gradient(5.13deg, #FAF6FD 6.09%, #FFFFFF 92.68%);
    box-shadow: 0px 0px 15px rgba(38, 64, 234, 0.14);
    border-radius: 10px;
    padding: 30px 30px 10px 30px;
    min-height: 178px;
}

.whyChattrik-box h4 {
    font-family: 'Inter';
    font-size: 18px;
    color: #000;
    font-weight: 600;
}

.whyChattrik-Img {
    position: relative;
}

/*.whyChattrik-Img:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/video-placeholder.png);
    width: 50px;
    height: 50px;
    left: 46%;
    top: 46%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}*/

.trusted-logo-sec h4 {
    font-size: 24px;
    font-weight: 700;
    color: #141F39;
}

.dashboard-bgDiv {
    border-radius: 22px;
    padding: 30px 30px 10px 30px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f8fff6;
}

/*.dashboard-img {
    text-align: end;
}*/

.dashboard-cont {
    padding-top:100px;
}

.dashboard-cont h4 {
    color: #24052F;
    font-size: 20px;
    font-weight: 700;
}

.dashboard-iconImage {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
}

.dashboard-smBox {
    border-radius: 20px;
    padding-left: 30px;
    padding-bottom: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dashboard-contBox {
    max-width: 360px;
}

.dashboard-contBox h4 {
    color: #24052F;
    font-size: 20px;
    font-weight: 700;
}

.dashboard-imgImage {
    position: relative;
}

.dashboard-imgImage:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/branding-curve.webp);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    right: 258px;
}

.testi-sec {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.testi-sec:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/chattrik-logo-shape.png);
    height: 450px;
    width: 466px;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -74px;
    left: 163px;
}

.testiheading {
    position: relative;
}

.testiheading:before {
    position: absolute;
    content: "";
    width: 130px;
    height: 2px;
    background-color: #24052F;
    top: -30px;
}

.testi-slider {
    max-width: 600px;
    margin: 0 auto;
}

.testi-box.slick-current.slick-active {
    box-shadow: 40px 55px 60px -23px rgba(63, 111, 223, 0.2);
    background-color: #F7EEFF;
    position: relative;
    left: 0px;
    z-index: 1;
}

.testi-box {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 30px 20px;
    transition: 0.5s ease-in-out;
    position: relative;
    left: 60px;
    z-index: -1;
    max-width: 530px;
}

    .testi-box .testi-info {
        display: flex;
        gap: 16px;
    }

.testi-name h5 {
    font-size: 18px;
    color: #232323;
    font-weight: bold;
    margin-bottom: 2px;
}

.testi-name p {
    color: #969696;
    font-size: 14px;
}

.testi-box p {
    margin-bottom: 0;
}

.agents-slider{
    margin:0 -10px;
}

.agentDiv {
    margin: 0 10px;
}

/*--------------------- About Css End -------------------------*/
/*term command privacy*/
.about-sec-2-sec h3 {
    color: var(--headings-color);
}
.about-sec-2-sec h4 {
    color: var(--headings-color);
}
.about-sec-2-sec p b {
    color: var(--headings-color);
}
.about-sec-2-sec h5 b {
    color: var(--headings-color);
}
.about-sec-2-sec h5 {
    color: var(--headings-color);
}
.about-sec-2-sec ul li b {
    color: var(--headings-color);
}

/*term command privacy*/
/*---------------- Pricing Css Start ----------------------*/
/*.pricing-mainSection .nav {
    justify-content: center;
}*/
.pricing-box {
    background: #FAF6FD;
    border-radius: 20px;
    padding: 40px 26px;
    position: relative;
}

.pricing-box:before {
    position: absolute;
    content: "";
    border-bottom: 1px solid #E5DFE9;
    width: 100%;
    left: 0;
    top: 174px;
}

.pricing-boxPurple {
    background: #24052F;
    border-radius: 20px;
    padding: 40px 26px;
    position: relative;
}

.pricing-boxPurple:before {
    position: absolute;
    content: "";
    border-bottom: 1px solid #4F256E;
    width: 100%;
    left: 0;
    top: 174px;
}

.pric-head h2 {
    color: #24052F;
    font-size: 40px;
}

.pric-head p {
    color: #0F1011;
    font-size: 18px;
}

.pric-body h3 {
    color: #0F1011;
    font-size: 18px;
    font-weight: 600;
}

.pric-head {
    min-height: 160px;
    position: relative;
}
.price-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .price-top span {
        display: block;
        color: #24052F;
        font-size: 30px;
    }
.pric-head:before {
    position: absolute;
}

.pric-body li {
    color: #0F1011;
    font-size: 18px;
    line-height: 50px;
    position:relative;
}

.pric-body li:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/checkmark.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    left: -26px;
    top: 20px;
}

.pricing-boxPurple .pric-body li {
    color: #0F1011;
    font-size: 18px;
    line-height: 50px;
    position: relative;
}

    .pricing-boxPurple .pric-body li:before {
        position: absolute;
        content: "";
        background-image: url(/assets/images/checkmark.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 13px;
        height: 13px;
        left: -26px;
        top: 20px;
        filter: brightness(0) saturate(100%) invert(96%) sepia(100%) saturate(17%) hue-rotate(253deg) brightness(104%) contrast(104%);
    }

.pric-body ul {
    list-style: none;
    min-height: 250px;
    overflow-y: auto;
}

.pric-Button {
    text-align: center;
    padding-top: 10px;
}

.pric-Button a,.pric-Button input {
    display: inline-block;
    padding: 20px 90px;
    background-color: #24052F;
    text-decoration: none;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s ease-in-out;
}

    .pric-Button a:hover, .pric-Button input:hover {
        background-color: var(--pri-color);
        color: #000;
    }

.pric-Button p {
    color: #1C4A90;
    font-size: 14px;
    padding-top: 10px;
    margin-bottom:0px;
}

.pricing-mainSection .nav-pills .nav-link.active {
    background: #24052F;
    border-radius: 25px;
    padding: 10px 26px;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.feature-vm-btn {
    text-decoration: none;
    color: #fca720;
    padding-left: 36px;
    display: block;
    margin-bottom: 17px;
    font-size: 14px;
    margin-top: 15px;
}

.feature-vm-btn:hover {
    color: #fca720;
}

.pricing-tabs {
    background: rgba(169, 121, 237, 0.18);
    border-radius: 25px;
    color: #24052f;
    /* padding: 0px 0px; */
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}

.pricing-tabs ul {
    margin-bottom: 0 !important;
}

.pricing-tabs .nav-pills .nav-link {
    color: #24052F;
    transition: 0.1s ease-in-out;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 30px;

}

.pricing-tabs .nav-item {
    width: 50%;
}

.pric-Button .btn-boxPurple {
    background-color: #fff;
    color: #24052F;
    font-size: 17px;
    font-weight: 500;
}

.plans-section .table > :not(caption) > * > * {
    border: 0;
}

.plan-Content ul {
    list-style: none;
    font-weight: 400;
}

.plan-Content li h4 {
    font-size: 22px;
    font-weight: 700;
}

.plan-Content li p {
    font-size: 18px;
    color: #000;
    margin-bottom: 0;
}

.plan-Starter ul {
    list-style: none;
    text-align: center;
    padding: 0;
}

.plan-Starter h4 {
    font-size: 22px;
    font-weight: 700;
}

.plan-Content li {
    line-height: 50px;
}

.plan-Starter li {
    line-height: 51px;
}

.plan-Starter {
    background-color: #fff;
    border: 1px solid #E1E9F3;
    border-radius: 20px;
    padding-top: 30px;
    width: 230px;
}

.plan-Content {
    padding-top: 30px;
    width: 500px;
}

.plan-Starter li p {
    font-size: 18px;
    color: #000;
    margin-bottom: 0;
}

.plan-Growth {
    background-color: #FAF6FD;
    border-radius: 20px;
    /*margin: 0 20px;*/
    padding-top: 30px;
    padding-bottom: 4px;
    width: 230px;
}

.plan-Growth ul {
    list-style: none;
    text-align: center;
    padding:0;
}

.plan-Growth h4 {
    font-size: 22px;
    font-weight: 700;
}

.plan-Growth li {
    line-height: 51px;
}

.plan-Growth li p {
    font-size: 18px;
    color: #000;
    margin-bottom: 0;
}

.more-less-box {
    height: 750px;
    overflow: hidden;
}

.more-less-box .table li {
    height: 50px;
}

.vm-btn-table {
    margin-top: 50px;
    /* display: inline-block; */
    padding: 15px 52px;
    background-color: var(--button-color);
    display: inline-block;
    text-decoration: none;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s ease-in;
}

.vm-btn-table:hover {
    background-color:var(--pri-color);
    color:#000;
}

.explore-tabsDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #BDB6C9;
}

.explore-tabsDiv .nav-pills .nav-link {
    color: #141F39;
    font-size: 22px;
    font-family: 'Space Grotesk';
    font-weight: 500;
}

.explore-tabsDiv ul {
    display: flex;
    gap: 20px;
}

.explore-tabsDiv .nav-pills .nav-link.active {
    background-color: transparent;
    border-bottom: 3px solid #B526E6;
    border-radius: 0;
    color: #B526E6;
    font-weight: 500;
}

.explore-section {
    position: relative;
}

.explore-section:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/chattrik-shape.webp);
    height: 350px;
    width: 350px;
    left: 50px;
    top: 220px;
    background-repeat: no-repeat;
    background-size: contain;
}

.explore-contSmall h5 {
    font-size: 26px;
    color: #141F39;
    font-weight: 600;
}

.explore-contSmall p {
    font-size: 18px;
    color: #4F4F4F;
    font-weight: 300;
}

.explore-contSmall {
    background: linear-gradient(180deg, #F2EDFF 0%, #FFFFFF 54.33%, #F2EDFF 100%);
    border-radius: 29px;
    padding: 252px 30px;
    height: 781px;
}

.elevate-box {
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0px 0px 15px rgba(38, 64, 234, 0.14);
    padding: 50px 22px;
    min-height: 280px;
    z-index: 1;
    position: relative;
    transition: 0.3s ease-in-out;
}

.elevate-cont h5 {
    color: #000;
    font-weight: 600;
    font-size: 18px;
    transition: 0.3s ease-in-out;
}

.elevate-cont p {
    color: #4F4F4F;
    transition: 0.3s ease-in-out;
}

.elevate-cont {
    padding-top: 12px;
}

.elevate-Section {
    background-color: #F7F5FB;
    position: relative;
}

.elevate-Section:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/chattrik-logo-shape.png);
    height: 450px;
    width: 466px;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -74px;
    left: 163px;
}

.price-faq .accordion-item {
    box-shadow: 0px 0px 14px rgba(218, 147, 242, 0.25);
    border-radius: 7px;
    border: 0;
    margin-bottom: 10px;
}

.price-faq .accordion-button {
    color: #232323 !important;
    font-size: 22px;
    font-weight: 600;
}

.price-faq .accordion-button::after {
    transform: rotate(268deg);
}

.fiters-divMain {
    display: flex;
    gap: 14px;
}

/*.filters-divSingle select option:placeholder {
    color: #9A9A9A !important;
    font-size: 14px;
}*/

.filters-divSingle .form-select {
    border: 1px solid #938D8D;
    color: #9A9A9A;
    font-size: 14px;
    width: 200px;
    padding: 4px 10px;
    border-radius: 8px;
    background-color: transparent;
}

.filters-divSingle .form-select:focus {
    box-shadow: none;
}

.sub-heading {
    color: #141F39;
    font-size: 26px;
    font-weight: 700;
}

.filter-sec p {
    color: #9A9A9A;
    margin-bottom: 10px;
}

.explore-opp-section {
    background-color: #F7F5FB;
    position: relative;
    z-index: 1;
}

.explore-opp-section:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/chattrik-shape.webp);
    height: 500px;
    width: 500px;
    left: 0;
    top: 130px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

.sub-heading-purple {
    color: #5A0899;
    font-size: 26px;
    font-weight: 700;

}

.filterbtn a {
    text-decoration: none;
    padding-right: 10px;
    color: #24052F;
    font-weight: 700;
    font-size: 18px;
}

.filterbtn .fa-arrow-right {
    color: #24052F;
}


/*------------------- Help center -------------*/

.fil-p {
    min-height: 40px;
}

.hoverBoxPurp:hover {
    background-color: #711093;
}
.hoverBoxPurp:hover .elevate-icon i {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
/* .hoverBoxPurp:hover .elevate-icon img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
} */

.elevate-icon i{
    font-size: 45px;
    color: #000;
}

.hoverBoxPurp:hover .elevate-cont h5 {
    color: #fff;
}

.hoverBoxPurp:hover .elevate-cont p {
    color: #fff;
}

.search-div {
    display: flex;
    align-items: center;
    position: relative;
}

.search-div .fas.fa-search {
    position: absolute;
    left: 20px;
    color: #ABABAB;
    font-size: 20px;
}

.search-div .form-control {
    padding: 14px;
    border: 1px solid #ABABAB;
    border-radius: 10px;
    padding-left: 50px;
}

.search-div .form-control::placeholder {
    font-size: 20px;
    font-weight: 300;
}

.help-cta-banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.help-cta-banner p {
    font-weight: 200;
    opacity: 0.8;
}

.helpCta-div {
    display: flex;
    gap: 20px;
    padding-top: 30px;
}

    .helpCta-div .form-control {
        background-color: #674274;
        border: 0;
        border-radius: 30px;
        max-width: 360px;
        padding: 14px 10px 14px 30px;
        color:#fff;
    }

.helpCta-div .form-control:focus {
    box-shadow: none;
}

.helpCta-div .btn {
    background-color: #F9A822;
    font-weight: 700;
    border-radius: 33px;
    width: 160px;
}

.helpCta-div .form-control::placeholder {
    color: #fff;
    font-weight: 200;
    font-size: 18px;
}


/*-------------- Contact Css ---------------*/

.inner-banner-contact {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 370px;
}

.cont-infobg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 29px;
    padding: 40px 40px 10px;
    min-height: 540px;
}

.contact-infoDiv {
    display: flex;
    gap: 30px;
    padding-top: 60px;
}

.contact-form-section {
    position: relative;
    top: -78px;
    z-index:1;
}

.contact-form-section p {
    color: #fff;
    font-weight: 200;
}

.cont-icon i {
    color: #fff;
}

.cont-information p {
    color: #fff;
    margin-bottom: 0;
    font-weight: 200;
}

.contact-info-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 14px;
    border-radius: 30px;
}

.contact-form-div label {
    font-size: 12px;
    color: #938D8D;
    margin-bottom: 0;
}

.contact-form-div .form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #E2E2E2;
    border-radius: 0;
    padding: 4px 10px 8px 0;
}

.contact-form-div .form-control::placeholder {
    color: #000;
    font-size: 15px;
    font-weight: 500;
}

.contact-form-div .form-select {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #E2E2E2;
    border-radius: 0;
}

.contact-form-div .form-control:focus {
    box-shadow: none;
}

.contact-form-div .form-select:focus {
    box-shadow: none;
}

.contact-form-div .messageBox {
    min-height: 40px;
    padding-bottom: 80px;
    /* border-bottom: 2px solid #5A0899; */
}

.contact-form-div {
    padding-top: 40px;
    padding-right: 40px;
}

.contact-form-section:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/chattrik-shape.webp);
    height: 500px;
    width: 500px;
    right: 0;
    bottom: -70px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

.contact-boxSection {
    position: relative;
    top: -50px;
}

.contact-Box {
    background: #FAFCFF;
    box-shadow: 0px 3.73px 55.96px rgba(56, 10, 121, 0.19);
    border-radius: 23px;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
    height: 100%;
}

.contct-cont h4 {
    color: #223147;
    font-size: 22px;
    font-weight: 500;
}

.contct-iconDiv {
    padding-bottom: 40px;
}

.chat-ImgBox {
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #C8CDD2;
    box-shadow: 0px 0px 15px rgba(38, 64, 234, 0.14);
    border-radius: 21px;
    margin-bottom: 20px;
}

.chat-Cont {
    padding: 30px 10px 1px 20px;
    min-height: 110px;
}

.chat-Cont h3 {
    color: #220000;
    font-size: 18px;
    font-weight: 700;
}

.chat-Cont p {
    color: #5C5C5C;
    margin-bottom: 0;
}


/*---------------- Agent & Team ---------------------*/

.tab-icon-ContentDiv {
    display: flex;
    gap: 20px;
    padding-right: 30px;
}

.tab-icon-div img {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F9A822;
    padding: 10px;
    border-radius: 25px;
}

/*.tab-icon-div {
    background-color: #F9A822;
    width: 44px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}*/

.tab-ContentDiv h3 {
    font-size: 15px;
    font-weight: 600;
    color: #232323;
    margin-bottom: 4px;
}

.tab-ContentDiv p {
    color: #5C5C5C;
    margin-bottom: 0;
}

.tabs-contDiv {
    background-color: #FAF6FD;
    padding: 50px;
    border-radius: 25px;
}

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

.tab-iconBtn a {
    display: inline-block;
    padding: 10px 50px;
    background-color: #24052F;
    text-decoration: none;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.tab-iconBtn a:hover {
    background-color: var(--pri-color);
    color: #000;
}

.tab-iconBtn a {
    display: inline-block;
    padding: 10px 50px;
    background-color: #24052F;
    text-decoration: none;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.tab-iconBtn a:hover {
    background-color: var(--pri-color);
    color: #000;
}

.tab-menuCont .nav-pills .nav-link.active {
    background-color: #F0DBFF;
    border-radius: 8px;
    color: #232323;
    font-weight: 600;
    border-bottom: none;
}

.tab-menuCont {
    border: 1px solid #C8CDD2;
    border-radius: 10px;
    padding: 10px;
    height: 100%;
}

.tab-menuCont .nav-pills .nav-link {
    color: #232323;
    font-size: 15px;
    font-weight: 600;
    padding: 20px 0;
    border-bottom: 1px solid #DDE8F3;
    border-radius: 0;
}

.tab-menuCont .nav-pills .nav-link:last-child {
    border-bottom: 0;
}

.tabing-mainBorder {
    padding: 20px 10px;
    background: #FFFFFF;
    border: 1px solid #C8CDD2;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
}

.setting-imageDiv {


    display: flex;
    justify-content: center;
}


.setting-contDiv h3 {
    color: #24052F;
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 6px;
}

.setting-contDiv p {
    font-size: 18px;
    color: #4F4F4F;
}

.setting-imageDiv img {
    max-width: 550px;
}

.main-blogCont p {
    color: #141F39;
}

.main-blogInfo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
}

.main-blogInfo p {
    margin-bottom: 0;
    /* color: #141F39; */
}

.main-blogCont {
    padding-top: 20px;
}

.main-blogCont h3 {
    color: #000;
    font-size: 24px;
    font-weight: 700;
}

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

.mini-blogImg {
    max-width: 150px;
    flex: 1 0 150px;
}

.mini-blogDiv {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mini-blogInfo {
    display: flex;
    gap: 30px;
}

.mini-blogCont h3 {
    color: #000;
    font-size: 24px;
    font-weight: 700;
}

.mini-blogInfo p {
    color: #141F39;
}


/*-------------- Blogs -----------------*/
.main-nav .dropdown-item {
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    transition: 0.3s ease-in-out;
}

    .main-nav .dropdown-item:hover {
        background-color: var(--pri-color);
        color: #000;
    }

.main-nav .dropdown-menu li:last-child .dropdown-item {
    border-bottom: none;
}

.main-nav .dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}
/*Mega Menu CSS Start/*/

.mega-menu {
    width: 692px;
    left: 130% !important;
    transform: translateX(-50%);
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 5px 19.11px 1.89px rgba(13, 17, 45, 0.22);
    border: none;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}




.hover-dropdown:focus-visible {
    outline: none !important;
}

.dd-megamenu-holder {
    padding: 20px 20px 8px 20px;
    background-image: url(../../assets/images/menu-shape.png);
    background-size: 220px;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.mega-menu .col-md-6 {
    width: 50%; /* Each column takes 50% of the menu width */
}

.icon-menu-list-item {
    display: flex;
    margin-bottom: 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
    padding: 7px 0;
    position: relative;
    align-items: center;
}
.icon-menu-list a{
    text-decoration:none;
}
/* .icon-menu-list-item:hover {
    background-color: #edf4fb;
} */
.icon-menu-list-item:before {
    width: 0;
    height: 100%;
    content: "";
    background-color: var(--pri-color);
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    z-index: -1;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

    .icon-menu-list-item:hover:before {
        width: 100%;
    }


.iml-icon {
    flex: 1 0 50px;
    height: 50px;
    max-width: 50px;
    background-color: #f4a7211a;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-right: 8px;
    border-radius: 5px;
}

    .iml-icon img {
        max-width: 30px;
    }

.iml-cont span {
    font-size: 14px;
    color: #141313;
    font-weight: bold;
    display: block;
}

.iml-cont a {
    font-size: 16px;
    color: #141313;
    font-weight: bold;
    display: block;
}

.iml-cont p {
    font-size: 12px;
    margin-bottom: 0px;
    color: #212529;
}

.menu-cta {
    background-color: var(--pri-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 22px;
}

.cta-msnu-title {
    font-weight: 700;
    font-size: 17px;
    display: block;
    color: #fff;
}

.cta-menu-cont p {
    font-size: 12px;
    margin-bottom: 0;
    color: #fff;
}

.cta-menu-btn-holder {
    flex: 1 0 150px;
    max-width: 150px;
}

.cta-menu-btn {
    transition: 0.3s ease-in-out;
    padding: 12px 17px;
    background-color: var(--sec-color);
    border-radius: 4px;
    color: #fff;
    text-align: center;
}


    .cta-menu-btn:hover {
        background-color: #333;
        color: #fff;
    }

.dropdown-menu {
    opacity: 0;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    visibility: hidden;
    display: inherit;
}

    .dropdown-menu.show {
        opacity: 1;
        transition: 0.3s ease-in-out;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -ms-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        visibility: visible;
    }

/* .dropdown-toggle.show:before{
    opacity: 0;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    display: inherit;
} */

.dropdown-toggle:before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 56px;
    transform: rotate(45deg);
    box-shadow: 0 0 10px #ccc;
    visibility: hidden;
    opacity: 0;
}

.dropdown-toggle.show:before {
    visibility: visible;
    opacity: 1;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}

/*/Mega Menu CSS End/*/

/*Modal Css Start*/
.career-pop h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    padding-top: 30px;
    padding-bottom: 26px;
    margin: 0;
}

.career-pop .btn-close {
    background-color: #D9D9D9;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 11px;
}
.career-pop .modal-body {
    position: relative;
    background-color: #F4F4F4;
    padding:12px;
}
    .career-pop .modal-body .form{
        padding-right:35px;
    }
    .career-pop .modal-dialog {
        border-radius: 10px;
    }
.career-pop .modal-content {
    border-radius: 10px;
}
.career-pop .modal-body {
    border-radius: 10px;
    padding-right: 35px;
}
    .career-pop .modal-body .btn-sec {
        background: #24052F;
        border-radius: 10px;
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        color: #FFFFFF;
        border: 1px solid #24052F;
        height: 50px;
        margin-top: 5px;
    }
    .career-pop .modal-body label b {
        font-weight: 700;
        font-size: 15px;
        line-height: 4px;
        color: #000000;
    }
    .career-pop .modal-body .input-group-text {
        background-color: #F4F4F4;
    }
    .career-pop .modal-body input{
        background-color:transparent;
        height:40px;
    }

        .career-pop .modal-body input::file-selector-button {
            background-color: transparent;
            font-weight: 500;
            font-size: 12px;
            line-height: 18px;
            color: #979797;
        }
            .career-pop .modal-body input::file-selector-button:hover {
                background-color: transparent !important;
            }
            .career-pop .modal-body input::placeholder {
                font-weight: 500;
                font-size: 12px;
                line-height: 18px;
                color: #979797;
            }
    .career-pop .modal-body .form-control {
        font-weight: 500;
        font-size: 12px;
        line-height: 25px;
        color: #979797;
    }
    .career-pop2 .modal-body .iti-group {
        width: calc(100% - 44px) !important;
    }
    .career-pop2 h3 {
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: #000000;
        padding-bottom: 33px;
    }
/*Modal Css End*/
.blogs-cta-sec {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
}

.teleted-div {
    position: absolute;
    bottom: 74px;
}

.teleted-div h5 {
    color: #141F39;
    font-size: 16px;
    margin-bottom: 5px;
}

.togel-box {
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
}

.togel-box img {
    width: 100%;
}

.togel-cont {
    padding: 30px 10px;
}

.togel-cont h4 {
    font-size: 22px;
    font-weight: 700;
    color: #141F39;
}

.togel-cont p {
    margin-bottom: 0;
    color: #141F39;
    opacity: 0.7;
}

.blogs-cta-sec {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.single-blogDiv {
    display: flex;
    gap: 10px;
}

.single-blogImg {
    max-width: 110px;
    flex: 1 0 110px;
}

.single-blogCont h3 {
    color: #141F39;
    font-size: 23px;
    line-height: 30px;
    font-weight: 700;
}

.main-blogDiv img {
    width: 100%;
}

.main-blogInfo img {
    width: 60px;
    height: 60px;
}

.single-blogSection{
    position:relative;
}

.all-article {
    position: absolute;
    right: 300px;
    display: flex;
    gap: 16px;
    align-items: baseline;
}

.all-article a {
    margin-bottom: 0;
    color: #141F39;
    font-weight: 600;
    text-decoration:none;
}

.all-article i {
    color: #141F39;
}

/*-------------- Features --------------------*/

.feature-NavDiv li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    position: relative;
}

/*.feature-NavDiv li .nav-link.active {
    border-bottom: 0;
    background: rgba(169, 121, 237, 0.18);
    border-radius: 6px;
    position: relative;
}
*/
.feature-NavDiv li.nav-item.active {
    border-bottom: 0;
    background: rgba(169, 121, 237, 0.18);
    border-radius: 6px;
    position: relative;
}

.feature-NavDiv .nav-link {
    color: #000;
    padding: 10px 0;
    font-size: 15px;
}

.feature-NavDiv li .nav-link.active:after {
    position: absolute;
    content: "";
    width: 100%;
    background-color: #D9D9D9;
    bottom: -6px;
    height: 1px;
    left: 0;
}

.feature-NavDiv .nav-item.active .nav-link {
    font-weight: 600;
    color: #000000; 
}
.feature-NavDiv .nav-item i{
    color:#000;
    font-size: 18px;

}
.feature-NavDiv {
    position: sticky;
    top: 50px;
    z-index: 10;
    margin-right: 26px;
}

.feature-contMainDiv {
    position: relative;
        
}

.feature-contMainDiv:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #D9D9D9;
    left: -26px;
}

.feature-box {
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(38, 64, 234, 0.14);
    padding: 30px 20px 22px;
    min-height: 200px;
    z-index: 1;
    position: relative;
    transition: 0.3s ease-in-out;
    margin-bottom: 30px;
}
.feature-icon i{
     font-size: 40px;
  color: #333;
  font-weight: 500;
}
.feature-cont h5 {
    color: #000;
    font-weight: 600;
    font-size: 18px;
    transition: 0.3s ease-in-out;
}

.feature-cont p {
    color: #5C5C5C;
    transition: 0.3s ease-in-out;
    padding-top: 8px;
    margin-bottom: 0;
}

.feature-cont {
    padding-top: 26px;
}

.feature-showMore {
    text-align: end;
}

.feature-showMore a {
    text-decoration: none;
    color: #24052F;
    font-weight: 700;
}

.feature-showMore i {
    color: #24052f;
    padding-left: 8px;
}


.scroll-animate {
    animation: highlightFade 1.5s ease-out;
}

.featureCont-section {
    position: relative;
}

.featureCont-section:before {
    position: absolute;
    content: "";
    background-image: url(/assets/images/chattrik-shape.webp);
    height: 600px;
    width: 600px;
    right: 0;
    top: 220px;
    background-repeat: no-repeat;
    background-size: contain;
}

.ctm-main-header .navbar-nav .nav-item ul.dropdown-menu {
    padding: 0;
}


/*-------------------- What Chat Start ----------------*/

.wchat-box {
    background-color: #FFFFFF;
    border: 1px solid #E0E7EE;
    border-radius: 10px;
    padding: 10px 28px;
    min-height: 70px;
    transition: 0.3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

.wchat-cont h5 {
    font-size: 15px;
    font-weight: 600;
    color: #232323;
    margin-bottom: 0;
}

.wchat-box:hover {
    background-color: #F9A822;
}

/*-------------------- Payment Sequence One -----------------*/

.paySequence-div {
    display: flex;
    /* justify-content: space-between; */
    justify-content: space-around;
}

.paySequence-box p {
    color: #141F39;
    margin-bottom: 4px;
}

.paySeq-icon {
    background-color: #B526E6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    margin: 0 auto;
}

.paySequence-bar .progress-bar {
    background: linear-gradient(90deg, #4D39FF -5.22%, #F590FF 103.24%);
    border-radius: 2px;
}

.paySequence-bar .progress {
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(0deg, #DEE1E2 21.67%, #D2D2D2 97.64%);
}

.paySequence-bar {
    padding-top: 14px;
    padding-left: 40px;
    padding-right: 40px;
}

.paySeq-Numb {
    background-color: #F8E4FD;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    margin: 0 auto;
}

    .paySeq-Numb p {
        margin-bottom: 0;
    }

    .paySeq-accountBox {
    background: rgba(250, 252, 253, 0.26);
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    backdrop-filter: blur(17px);
    border-radius: 19px;
    padding: 70px 40px 40px;
}

.paySeq-accountBox h1 {
    color: #141F39;
    font-size: 45px;
    font-weight: 700;
    text-align: center;
}

.paySeq-accountBox p {
    text-align: center;
    color: #363A40;
}

.paySeq-input {
    display: flex;
    align-items: center;
    border: 1px solid #EEF0F1;
    border-radius: 10px;
    padding: 18px 16px;
    background-color: #FCFBFB;
    position: relative;
}

.paySeq-input select {
    border: 0;
    width: 100%;
    background: transparent;
}

.paySeq-input .select:focus,
.select:focus-visible {
    outline: none;
    border: none; 
    box-shadow: none;
}

.paySeq-input  .pst-text {
    position: absolute;
    right: 0;
}

.paySeq-input .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
}

.paySeq-input img {
    width: 20px;
    height: 20px;
}

.paySeq-input input {
    background: transparent;
    border: 0;
    padding: 0 0 0 16px;
}

.paySeq-input .form-control:focus {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
}

.paySeq-input input::placeholder {
    color: #BBBCBD;
    font-weight: 300;
}

.secureCheckout-form input::placeholder {
    color: #BBBCBD;
    font-weight: 300;
}

.paySeq-formDiv label {
    color: #222222;
    font-weight: 300;
}

.paySeq-formDiv {
    padding-top: 30px;
}

.paySeq-input-btn {
    text-align: center;
    background-color: #B526E6;
    padding: 18px 16px;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paySeq-input-btn:hover {
    background-color: var(--pri-color);
    color: #000;
}

.secureCheckout-main {
    background: rgba(250, 252, 253, 0.26);
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    backdrop-filter: blur(17px);
    border-radius: 19px;
    padding: 20px 14px 30px 40px;
}

.secureCheckout-div h1 {
    color: #141F39;
    font-size: 32px;
    font-weight: 500;
}

.summary-box {
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
    border-radius: 30px;
    padding: 20px 20px;
    margin-left: 30px;
}

.secureCheckout-logoDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.secureCheckout-div p {
    color: #363A40;
}

.secCheckout-box {
    border: 0.5px solid #5e6d7b3d;
    border-radius: 21px;
    padding: 20px 18px 24px;
    margin-top: 30px;
}

.secureCheckout-logoDiv h3 {
    color: #141F39;
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 400;
    padding-left: 10px;
    position: relative;
}

.secureCheckout-form label {
    margin-bottom: 4px !important;
    font-weight: 300;
    color: #222222;
}

.secureCheckout-form input {
    border: 1px solid #EEF0F1 !important;
    border-radius: 10px !important;
    padding: 12px 12px !important;
    background-color: #FCFBFB !important;
}

.expireDate-div {
    display: flex;
    align-items: end;
}

.secureCheckout-form select {
    border: 1px solid #EEF0F1 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    background-color: #FCFBFB !important;
    height: 50px;
    margin-bottom: 0;
    color: #BBBCBD;
    font-weight: 300;
    width: 100%;
}

.radioCheck-btnDiv {
    display: flex;
    align-items: baseline;
}

.secureCheckout-logoDiv img {
    max-width: 200px;
}

.secCheckout-box1 {
    border: 0.5px solid #5e6d7b3d;
    border-radius: 20px;
    padding: 20px 16px;
}

.radioCheck-btnDiv .form-check-input:checked {
    background-color: #B526E6;
    border-color: #B526E6;
}

.radioCheck-btnDiv .form-check-input:focus {

    box-shadow:none;
}

.countrySelect-div {
    display: grid;
}

.summary-box h3 {
    font-size: 29px;
    color: #000;
}

/*.billingCycle-div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}*/

/*.billingCycle-div p {
    color: #333333;
    font-size: 15px;
    font-weight: 600;
}*/

/*.support-divMain p {
    color: #333333;
    font-size: 14px;
    margin-bottom: 2px;
}*/

.support-divMain p {
    text-align: end;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

.support-divMain .form-select {
    color: #646668;
    border: 1px solid #EEF0F1;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
}

.summaryMainP {
    color: #333333 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom:0px !important;
    text-align:start !important;
}

.billingCycle-selectdiv .form-select {
    color: #646668;
    border: 1px solid #EEF0F1;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
}

/*.billingCycle-selectdiv p {
    text-align: end;
    margin-bottom: 0;
    padding-top: 12px;
    text-transform: uppercase;
    font-size: 14px;
    color: #333333;
}*/

.support-divMain select {
    border: 1px solid #EEF0F1;
    border-radius: 10px;
    color: #646668;
}

.support-divMain input {
    border: 1px solid #EEF0F1;
    border-radius: 10px;
    color: #646668;
    width: 100%;
    padding: 6px;
    text-align: center;
}

.promoCode-inputDiv {
    margin-bottom: 12px;
}

.promoCode-div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.promoCode-div a {
    margin: 0px;
    border: 1px solid rgb(249 168 34);
    border-radius: 4px;
    color: #f9a822 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    padding: 7px 14px;
        transition: 0.2s ease-in-out;
}

.promoCode-div a:hover {
    background: #f9a822;
    color: #fff !important;
}

.promoCode-inputDiv p {
    text-align: start !important;
    margin-bottom: 4px;
}

.supportPlan-div a {
    color: #333333;
    font-size: 15px;
}

.supportPlan-div {
    margin: 13px 0;
}

.Sumdescrip-price-div {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #E8E6E6;
    padding-top: 10px;
    padding-bottom: 10px;
}

.SumdescriptionDiv {
    display: block;
}

.SumdescriptionDiv span {
    display: block;
    color: #333333;
    font-weight: 600;
    font-size: 15px;
}

.SumdescriptionDiv a {
    color: #333333;
    cursor: pointer;
    font-size: 14px;
}

.SumpriceDiv p {
    margin-bottom: 0;
    text-align: end;
    color: #333333;
    font-size: 14px;
}

.SumdescriptionDiv p {
    margin-bottom: 0;
    text-align: end;
    color: #333333;
    font-size: 14px;
}

.SumpriceDiv span {
    text-align: end;
    display: block;
    color: #333333;
    font-weight: 600;
    font-size: 15px;
}

.policyDiv {
    display: flex;
    gap: 4px;
}

.policyDiv p {
    color: #333333;
    font-size: 11px;
    margin-bottom: 0;
}

.policyDiv p a {
    color: #F9A822;
}

.summaryBtn-div {
    text-align: center;
    padding: 12px;
    background-color: #F9A822;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    transition:0.3s ease-in-out;
}

.summaryBtn-div:hover {
    color: #000;
}

.summaryBtn-div:hover i {
    color: #000;
}


.summaryBtn-div a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.summaryBtn-div i {
    color: #fff;
    padding-right: 6px;
    font-size: 10px;
    transition:0.3s ease-in-out;
}


.thank-paymentDiv {
    background: rgba(250, 252, 253, 0.26);
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    backdrop-filter: blur(17px);
    border-radius: 19px;
    padding: 40px 14px 30px 40px;
}

.thank-paymentDiv img {
    padding-bottom: 30px;
}

.thank-paymentDiv h1 {
  /*  font-size: 45px;*/
    font-size: calc(22px + (36 - 22) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    color: #141F39;
}
.thank-paymentDiv p {
     font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
}


/* --------------- Payment Successful Page Start ---------------- */

.paymentSuccess {
    background: rgba(250, 252, 253, 0.26);
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    backdrop-filter: blur(17px);
    border-radius: 19px;
    padding: 50px 68px 68px;
    margin: 10px;
}

.paymentSuccess img {
    padding-bottom: 30px;
}

.paymentSuccess h1 {
  font-size: calc(22px + (51 - 22) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 600;
  color: #141F39;
}

.paymentSuccess h2 {
    font-size: calc(20px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
}

.paymentSuccess p {
     font-size: calc(15px + (21 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.paySuccess-plan {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 24px;
}

.paySuccess-plan h3 {
    font-size: 21px;
    color: #161616;
    margin: 0;
}

.paySuccess-plan span {
    font-size: 21px;
    color: #858B92;
}

.paySuccess-btn a {
    text-decoration: none;
    background-color: #b526e6;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    font-family: poppins;
    border-radius: 10px;
    padding: 18px 30px;
}

/* --------------- Payment Successful Page End ---------------- */

.form-step .input-group{
    position: relative;
    display: block;
    width: 100%;
}
.form-step .input-group i{
      position: absolute;
        right: 10px;
        z-index: 9;
        top: 15px;
}

.form-step .input-group .pst-text{
          position: absolute;
        right: 10px;
        z-index: 9;
        top: 15px;
}

.in-sml-icon{
    font-size: 11px;
    margin-top:3px;

}

/* Login Screen */
.login-sec{
    padding: 76px 0;
    position: relative;
    overflow: hidden;
    /*height: calc(100% - 95px);*/
    display: flex;
    align-items: center;
}
.login-sec p{
     font-family: "Poppins";
}
.ctm-main-header.bdr-bottom{
    border-bottom: 1px solid #E2DEE9;
    background: transparent;
}
.flex-area{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px 70px;
}
.flex-area .flex-left{
    flex: 0 0 auto;
    width: calc(54% - 10px);
}
.flex-area .flex-right{
    flex: 1;
}

.loginForm-imgDiv p {
    color: #000;
    font-family: 'Space Grotesk';
    font-size: 25px;
    font-weight: 500;
    padding-top: 10px;
}

.login-wrap h1{
    font-size: calc(22px + (39 - 22) * (100vw - 320px) / (1920 - 320));
    color: #17012C;
    font-weight: 700;
}
.login-wrap p{
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    color: #1B1515;
    font-weight: 300;
   
}
.login-wrap .login-img img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.login-form{
    background: rgba(250, 252, 253, 0.26);
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    border: 1px solid rgba(77, 85, 235, 0.15);
    backdrop-filter: blur(17px);
    border-radius: 19px;
    padding: 70px 40px 140px;
}
.login-form h2{
    font-size: calc(22px + (39 - 22) * (100vw - 320px) / (1920 - 320));
    color: #141F39;
     font-weight: 700;
       margin-bottom: 40px;
}
.login-form h2 span{
    font-size: calc(22px + (39 - 22) * (100vw - 320px) / (1920 - 320));
    color: var(--pri-color);
  
}
.login-form h3{
    font-size: calc(18px + (30 - 18) * (100vw - 320px) / (1920 - 320));
    color: #060606;
}
.login-box{
    margin-top: 40px;
}

.login-box .form-group label{
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    color: #676666;
    font-weight: 400;
   font-family: "Poppins";
   margin-bottom: 5px;
}
.form-group .form-wrap{
    position: relative;
}
.form-group .form-wrap span{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    color: #676666;
}
.form-group .form-wrap .form-control{
    background: #FCFBFB;
    border: 1px solid #EEF0F1;
    border-radius: 10px;
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    height: 53px;
    padding: 15px 105px 15px 15px;
}
.form-wrap .form-control::placeholder{
    font-weight: 400;
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    color: #BBBCBD;
}
.form-group .forgot-link{
    text-align: right;
    margin-top: 5px;
}
.form-group .forgot-link a{
    color: #2C2C2C;
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    font-weight: 400;
    text-decoration: none;
    text-align: right;
}
.form-btn {
  margin-top: 40px;
}
.form-btn .btn-secondary{
        width: 100%;
        background: #B526E6;
        border-color: #B526E6;
        color: white;
        border-radius: 10px;
        font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
        font-weight: 600;
        /*margin: 0 0 20px;*/
        padding: 12px 15px;
}
.form-btn .btn-transparent{
        width: 100%;
        background: transparent;
        border: 1px solid #24052F;
        color: #24052F;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 10px;
        padding: 12px 15px;
        font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
        font-weight: 600;
}
.form-btn .btn-transparent i{
        color: #24052F;
       
}

.forgot-freeTrial-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forgot-link a {
    color: #2C2C2C !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    text-decoration: none;
}

.forgot-freeTrial-div a {
    color: #24052F;
    font-weight: 600;
    font-size: 14px;
}

.loginForm-imgDiv img {
    width: 250px;
}

.shape{
    position: absolute;
    user-select: none;
    z-index: -1;
}
.img-100 >img{
    width: 100%;
    height: 100%;
}
.pos-1{
    left: 0;
    bottom: 0;
    right: -8%;
    height: 100%;
    top: 0%;
}
.pos-2{
    background: #15BEE3;
    opacity: 0.4;
    filter: blur(150px);
    inset: 0;
    margin: auto;
    max-width: 512px;
    max-height: 512px;
    width: 100%;
    height: 100%;
    bottom: -20%;
}
.pos-3{
    background: rgba(249, 168, 34, 0.58);
    opacity: 0.4;
    filter: blur(150px);
    max-width: 512px;
    max-height: 512px;
    width: 100%;
    height: 100%;
    right: -17%;
    top: -5%;
}


/* Login Screen End */
.head-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tabs-sort{
  max-width: 180px;
  flex: 0 0 auto;
  margin-left: auto;
}
.tabs-sort .select-sort{
    border: 1px solid #D9D9D9;
    color: #4F4F4F;
    width: 100%;
    height: 32px;
    padding: 5px 5px 5px 10px;
    border-radius: 6px;
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
}
.category-list li{
    color: #4F4F4F;
     font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
     font-weight: 400;
     list-style: none;
     display: flex;
     align-items: center;
     gap: 0 15px;
     margin-bottom: 15px;
}
.category-list li i{
   color: #B526E6;
   font-style: italic;
     font-size: calc(12px + (16 - 12) * (100vw - 320px) / (1920 - 320));
}
.tabs-sec.tabbing-area{
      all: unset;
      display: flex;
      align-items: flex-start;
}
.tabs-sec.tabbing-area .ctm-mian-title{
        margin: 0 !important;
}
.tabs-sec.tabbing-area .show-more-wrapper >p{
      margin-top: 10px;
}
.no-before::before{
   display: none;
}

.password-FormDiv i {
    position: absolute;
    right: 14px;
    top: 20px;
    z-index: 99;
}

.password-FormDiv .form-check-input:checked {
    background-color: #E6CEEE;
    border-color: #E6CEEE;
    border-radius: 20px !important;
    position: absolute;
    right: 42px;
    top: 16px;
    z-index: 99;
}



/*-------------- Forgot Password -------------------*/

.login-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}

    .login-bg .login-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 25px 8px;
    }

         .login-inner .login-box {
            background-color: #ffffff;
            width: 556px;
            height: 407px;
            box-shadow: 0px 0px 31px rgba(28, 77, 134, 0.25);
            border-radius: 31px;
            padding: 25px 30px;
            position: relative;
        }

        .login-box.sty1 {
            height: 450px;
            margin: 10px;
        }

                 .login-box.sty1 input {
                    padding: 10px 15px !important;
                }

                .login-box.sty2 {
                    height: auto;
                    margin: 10px;
                }

             .login-box .form-group {
                position: relative;
                margin-bottom: 0;
            }

                .login-box .form-group label {
                    font-size: calc(12px + (12 - 10) * (100vw - 320px) / (1920 - 320));
                    color: #676666;
                }

                .login-box .form-group input {
                    width: 100%;
                    background: #FCFBFB;
                    border: 1px solid #EEF0F1;
                    border-radius: 10px;
                    height: 50px;
                }

                .login-box .form-group input::placeholder {
                    color: #909AA1;
                }
                    .login-box .form-group .eye-icon {
                    right: 20px;
                    position: absolute;
                    top: 14px;
                    font-size: 12px;
                    color:#b3b3b3;
                }

                .login-box .form-group .login-f-icon {
                    position: absolute;
                    left: 10px;
                    top: 8px;
                    width: 25px;
                    height: 25px;
                    padding: 5px 10px 5px 0;
                    display: flex;
                    align-items: center;
                }

                 .login-box .form-group .login-f-icon i {
                        font-size: 12px;
                    }

                 .login-box .form-group .login-f-icon::before {
                        content: "";
                        height: 100%;
                        background-color: #999999;
                        width: 1px;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }

            .login-box .login-logo {
                text-align: center;
                padding: 20px 0;
            }

            .login-box h6 {
                font-size: calc(22px + (22 - 14) * (100vw - 320px) / (1920 - 320));
                font-weight: 600;
                color: #000000;
            }

            .login-box p {
                font-size: 14px;
                font-weight: 400;
                color: #5F6678;
            }

.login-bg .login-inner .pr-list {
    padding: 0;
    position: absolute;
    /*bottom: -35px;*/
    left: 5px;
    display: flex;
    align-items: center;
}

    .login-bg .login-inner .pr-list.sty1 {
        margin-top: 32px;
    }

    .login-bg .login-inner .pr-list li {
        list-style: none;
        font-size: 14px;
        font-weight: 400;
        margin: 0 5px;
        color: #848282;
    }

        .login-bg .login-inner .pr-list li a {
            color: #848282;
            text-decoration:none;
        }

            .login-bg .login-inner .pr-list li a:hover {
                color: #000;
            }

.login-bg .login-inner .forget-link {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    color:  #999999;
    margin-bottom: 15px;
}

.login-bg span {
    font-size: 14px;
    font-weight: 400;
    color: #aaaaaa;
    margin: 0;
}

    .login-bg span i {
        font-size: 10px;
        color: #aaaaaa;
    }

.login-bg .back-login {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
}

.login-bg .ps-str {
    font-size: 14px;
    font-weight: 400;
    color: #aaaaaa;
}

.rghtAnglDiv {
    position: relative;
}

    .rghtAnglDiv i {
        position: absolute;
        right: 160px;
        top: 18px;
        color: #ffffff;
        font-size: 10px;
    }

.lftAnglDiv {
    position: relative;
}

    .lftAnglDiv i {
        position: absolute;
        left: 177px;
        top: 6px;
        color: #000;
        font-size: 13px;
    }

    .login-bg .ps-str .ps-str-iner {
        color: #B526E6;
    }

.sign-icon {
    background-color: #F4BFFF;
    width: 124px;
    height: 124px;
    border: 0;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sign-icon i {
        color: #000000;
        font-size: 50px;
    }

    .sign-icon.sty1 {
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .sign-icon.sty2 {
        margin-top: 0;
    }


/*--------------- Waiting free Trial ----------*/


.steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 154px;
    margin: 0 auto;
    padding-bottom: 20px;
    padding-top: 20px;
}

.steps-bar-w {
        width: 34px;
        height: 4px;
        background-color: #cccccc; /* $iGray2 */
        border: 0;
        border-radius: 77px;
        margin: 0 3px;
    }

 .steps-bar-w.active {
        background-color: #B526E6; /* $iPrimary */
    }

    .steps-bar.sty1 {
        max-width: 100%;
        justify-content: start;
        margin: 0;
        padding: 5px 0;
    }

        .steps-bar.sty1 .steps-bar-w {
            width: 88px;
        }

.user-wizard {
    position: relative;
    padding: 3% 0;
}

    .user-wizard h4 {
        font-size: calc(25px + (25 - 18) * (100vw - 320px) / (1920 - 320));
        font-weight: 700;
        color: #000000; /* $black */
        margin-bottom: 10px;
    }

    .user-wizard h5 {
        font-size: calc(20px + (20 - 14) * (100vw - 320px) / (1920 - 320));
        font-weight: 600;
        color: #B526E6;
        margin-bottom: 10px;
    }

    .user-wizard p {
        font-size: 14px;
        font-weight: 400;
        color: #5F6678;
        margin-bottom: 10px;
    }

    .user-wizard h6 {
        font-size: 21px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 10px;
    }

    .user-wizard h6 span {
        background-color: #B526E6;
        padding: 1px 2px;
        color: #ffffff;
        margin-right: 4px;
        font-size: 16px;
    }


.st-box-Active  {
    background-color: #ffffff;
    /*width: 176px;*/
    width:100%;
    height: 170px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 20px 12px 10px;
    display: grid;
    justify-content: center;
    position: relative;
}

.st-box-Active .st-gren-chk {
    width: 16px;
    height: 16px;
    background-color: #0AC266;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 5px;
}

    .st-box-Active .st-gren-chk i {
        font-size: 10px;
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7496%) hue-rotate(251deg) brightness(96%) contrast(105%);
        margin-top: 10px;
    }

.st-box-Active i {
    font-size: 38px;
    color: #B526E6;
    filter: brightness(0) saturate(100%) invert(52%) sepia(33%) saturate(6144%) hue-rotate(353deg) brightness(100%) contrast(101%);
    margin-bottom: 10px;
}

.st-box-Active label {
    font-size: 14px;
    font-weight: 400;
    color: #939699;
    filter: none;
}

.st-box-Active h6 {
    font-size: 21px;
    font-weight: 500;
    color: #312D2D;
    line-height: 1;
    filter: none;
}

.st-box {
    background-color: #ffffff;
    /*width: 176px;*/
    width: 100%;
    height: 170px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 20px 12px 10px;
    display: grid;
    justify-content: center;
    position: relative;
}

    .st-box img {
        filter: brightness(0) saturate(100%) invert(83%) sepia(0%) saturate(0%) hue-rotate(86deg) brightness(99%) contrast(92%);
    }


    .st-box .st-gren-chk {
        width: 16px;
        height: 16px;
        background-color: #0AC266;
        border: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 5px;
    }

        .st-box .st-gren-chk i {
            font-size: 10px;
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7496%) hue-rotate(251deg) brightness(96%) contrast(105%);
            margin-top: 10px;
        }

    .st-box i {
        font-size: 38px;
        color: #B526E6;
        filter: brightness(0) saturate(100%) invert(52%) sepia(33%) saturate(6144%) hue-rotate(353deg) brightness(100%) contrast(101%);
        margin-bottom: 10px;
    }

.st-box label {
    font-size: 14px;
    font-weight: 400;
    color: #939699;
    filter: brightness(0) saturate(100%) invert(83%) sepia(0%) saturate(0%) hue-rotate(86deg) brightness(99%) contrast(92%);
}

.st-box h6 {
    font-size: 21px;
    font-weight: 500;
    color: #312D2D;
    line-height: 1;
    filter: brightness(0) saturate(100%) invert(83%) sepia(0%) saturate(0%) hue-rotate(86deg) brightness(99%) contrast(92%);
}




@media (max-width: 991px) {
    .st-box {
        width: 100%;
        margin: 0 auto;
        padding-left: 15px;
        justify-content: start;
        height: 170px;
    }
}

.waitingSteps-mainIDv {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.waiting-stepDiv-active {
    background-color: #B526E6;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.waiting-stepDiv p {
    margin-bottom: 0;
    color: #939699;
    font-size: 17px;
    font-weight: 600;
}

.waiting-stepDiv {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #D9E2EF;
    position: relative;
    background-color: #ffffff;
}

.waitingSequence-bar {
    position: relative;
    top: -53px;
    z-index: -1;
    padding: 0 40px;
}

.waitingSequence-bar .progress {
    height: 2px;
    background: #D9E2EF;
}

.waitingSequence-bar .progress-bar {
    background: #0068F8;
}

.completeSequence-bar {
    position: relative;
    top: -53px;
    z-index: -1;
    padding: 0 40px;
}

.completeSequence-bar .progress {
    height: 2px;
    background: #D9E2EF;
}

    .completeSequence-bar .progress-bar {
        background: #b526e6;
    }



/* progressbar */


        

@media (max-width: 991px) {
    #progressbar li:before {
        width: 35px;
        height: 35px;
        font-size: 12px;
        line-height: 35px;
    }
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #bbbbbb; /* $iGray19 */
    position: absolute;
    left: -50%;
    top: 30px;
    z-index: -1;
}

@media (max-width: 991px) {
    #progressbar li:after {
        top: 15px;
    }
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #B526E6; /* $iPrimary */
    color: #ffffff; /* $white */
}

/* form wizard */
#msform {
    position: relative;
}

    #msform fieldset:not(:first-of-type) {
        display: none;
    }

    #msform .action-button {
        width: 100%;
        background: #000000; /* $iBlack */
        font-weight: 500;
        color: #ffffff; /* $white */
        border: 0 none;
        border-radius: 10px;
        cursor: pointer;
        padding: 10px;
        margin: 10px 5px;
        text-decoration: none;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.5px;
    }




/*--------------------- Pricing PopUp ----------------*/

.pricing-bodyWidth{
    max-width:900px;
}

.price-popUp .modal-body {
    padding: 0;
    border-radius: 10px;
}

.price-popUp .modal-content {
    border-radius: 18px;
}

.price-formMain {
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    /* padding: 50px; */
    padding: 50px 50px 30px 50px;
    width: 100%;
    height: 100%;
}

.price-formMain h3 {
    font-size: 28px;
    color: #000;
    font-weight: 700;
 }

.price-formMain p {
    font-size: 14px;
    color: #5F6678;
}

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

.pricing-formDiv label {
    font-size: 12px;
    /* color: #5F6678; */
    color: #938D8D;
    margin-bottom: 0;
}

.pricing-formDiv .form-control {
  background-color: #fff;
  border: 0;
  border-radius: 0;
  padding: 7px 25px 7px 10px;
  font-size: 14px;
  text-align: left;
}
.domain-name {
      padding-right: 110px!important;
}


    .pricing-formDiv .form-control::placeholder {
        /* color: #000; */
        font-size: 15px;
        font-weight: 500;
    }

.pricing-formDiv .form-select {

  background-color: #ffff;
  border: 0;
  border-radius: 0;
  color: #495057;
  font-size: 14px;
  padding: 6px 10px;
  font-weight: 400;
   text-align: left;

}

.pricing-formDiv .iti-group input::placeholder {
    background-color: #ffff;
    border: 0;
    border-radius: 0;
    color: #495057;
    font-size: 14px;
    font-weight: 400;
}

.pricing-formDiv .form-group .iti-group {
    width: 100% !important;
}

.pricing-formDiv .form-group.iti-group {
    width: 100% !important;
}

.pricing-formDiv .form-control:focus {
    box-shadow: none;
}

.pricing-formDiv .form-select:focus {
    box-shadow: none;
}

.pricing-formDiv {
    /* padding-top: 40px; */
    padding-right: 20px;
}

.pricing-formDiv button {
    text-align: center;
    background: #B526E6;
    border-color: #B526E6;
    color: white;
    border-radius: 4px;
    font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
    font-weight: 400;
    padding: 10px 100px;
}





/*------------- New progress Bar ------------*/

#progressbar {
    margin-bottom: 20px;
    overflow: hidden;
    counter-reset: step
}

    #progressbar li {
        list-style-type: none;
        color: #939699;
        text-transform: uppercase;
        font-size: 14px;
        width: 20%;
        float: left;
        position: relative
    }

        #progressbar li i {
            /*content: "\e92d";*/
            width: 55px;
            line-height: 55px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content:center;
            align-items:center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center; /*
            font-family: 'xicons';*/
            font-size: 20px;
            color: #ffffff;
            background: #b526e6;
            border-radius: 50%;
            margin: 0 auto 5px auto;
            border: 0px solid #D9E2EF
        }

@media (max-width: 991px) {
    #progressbar li:before {
        width: 35px;
        height: 35px;
        font-size: 12px;
        line-height: 35px
    }
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #D9E2EF;
    position: absolute;
    left: -50%;
    top: 30px;
    z-index: -1
}

@media (max-width: 991px) {
       #progressbar li:after {
        top: 15px
    }
}

/* #progressbar li:first-child:after {
    content: none
}

#progressbar li.active:before, #progressbar li.active:after {
    background: #FF660F;
    color: #fff
}
*/
    #msform {
        position: relative
    }

        #msform fieldset:not(:first-of-type) {
            display: none
        }

        #msform .action-button {
            width: 100%;
            background: #232323;
            font-weight: 500;
            color: #fff;
            border: 0 none;
            border-radius: 10px;
            cursor: pointer;
            padding: 10px;
            margin: 10px 5px;
            text-decoration: none;
            font-size: 18px;
            text-align: center;
            letter-spacing: 0.5px
        }







    /*media Qureries*/
    @media (max-width: 1399.98px) {

        .paymentSuccess{
            padding: 50px 50px 68px;
        }

        .paySuccess-plan h3 {
            font-size: 18px;
        }

        .paySuccess-plan span {
            font-size: 18px;
        }

        .mian-banner-img {
            top: 140px;
        }

        .mian-banner-home {
            height: 700px;
        }

        .thank-paymentDiv img {
            width: 74px;
        }

        .secureCheckout-logoDiv img {
            max-width: 180px;
        }

        .ctm-icon-box span {
            font-size: 15px;
        }

        .ctm-icon-box span {
            font-size: 15px;
        }

        .ctm-icon-box {
            min-height: 170px;
        }

            .ctm-icon-box i {
                font-size: 60px;
            }

        .user-wizard h6 {
            line-height: 25px;
        }

        .waitingSteps-mainIDv {
            gap: 84px;
        }

        .login-form {
            padding: 50px 40px 100px;
        }

        .wchat-box {
            padding: 10px 10px;
        }

        .plan-Content {
            width: 450px;
        }

        .plan-Starter {
            width: 200px;
        }

        .plan-Growth {
            width: 200px;
        }

        .item-chat-tab button {
            padding: 25px 0;
        }

        .ctm-tab-text {
            margin-top: 13px;
            font-size: 16px;
        }

        .ctm-icon-box img {
            max-width: 65px;
        }

        .box-over-cont p {
            font-size: 17px;
        }

        .box-over-cont h5 {
            font-size: 28px;
        }

        .box-over-cont {
            min-height: 225px;
        }

        .aar-title {
            font-size: 64px;
            line-height: 73px;
        }


        /*---------------- Samit Css ----------------------*/

        .whyChattrik-box {
            padding: 20px;
            min-height: 150px;
        }

            .whyChattrik-box p {
                margin-bottom: 0;
            }

        /* .navbar-expand-lg .navbar-nav {
        gap: 10px;
    }*/

        .navbar-light .navbar-nav .nav-link {
            padding: 0 6px;
        }

        .mian-banner-title {
            font-size: 44px;
            line-height: 60px;
        }

        .testi-sec:before {
            height: 422px;
            width: 400px;
            bottom: -82px;
            left: 17px;
        }

        .explore-tabsDiv ul {
            gap: 10px;
        }

        .explore-tabsDiv .nav-pills .nav-link {
            font-size: 20px;
            padding: 8px 6px;
        }

        .explore-contSmall {
            padding: 150px 20px;
            height: 736px;
        }

        .setting-imageDiv img {
            max-width: 490px;
        }

        .teleted-div {
            bottom: 30px;
        }

        .mini-blogCont h3 {
            font-size: 20px;
        }

        .single-blogCont h3 {
            font-size: 20px;
            line-height: 28px;
        }

        .all-article {
            right: 70px;
        }

        .feature-box {
            min-height: 230px;
            padding: 20px 16px 16px;
        }

        .whyChattrik-box {
            min-height: auto;
        }

        .dashboard-imgImage:before {
            width: 259px;
            height: 208px;
            right: 275px;
            top: 18px;
        }
    }

    @media (max-width: 1199.98px) {

        /*---------------- Samit Css ----------------------*/

        .mian-banner-home {
            height: 600px;
        }

        .completeSequence-bar {
            top: -42px;
            left: 10px;
        }

            .completeSequence-bar .progress {
                width: 90%;
            }

        .waiting-stepDiv-active {
            width: 45px;
            height: 36px;
        }

            .waiting-stepDiv-active img {
                width: 16px;
            }

        .waiting-stepDiv {
            width: 45px;
            height: 40px;
        }

        .waitingSteps-mainIDv {
            gap: 50px;
        }

        .waitingSequence-bar {
            top: -45px;
            padding: 0 60px;
        }

        .thank-paymentDiv h1 {
            font-size: 30px;
        }

        .thank-paymentDiv img {
            width: 60px;
        }

        .secureCheckout-logoDiv h3 {
            font-size: 16px;
            padding-left: 6px;
        }

        .radioCheck-btnDiv {
            align-items: center;
        }

        .secureCheckout-logoDiv img {
            max-width: 160px;
        }


        .ctm-icon-box i {
            font-size: 40px;
        }

        .flex-area {
            gap: 20px 30px;
        }

        .login-form {
            padding: 40px 30px 60px;
        }

        .p-list {
            column-count: 1;
        }

        .steps .step-box:after {
            width: 71%;
        }

        .contact-boxSection {
            top: 0;
        }

        .contact-form-section {
            top: 0;
        }

        .inner-banner-contact {
            min-height: 240px;
        }

        .contact-Box {
            padding: 30px 4px;
        }

        .contct-iconDiv {
            padding-bottom: 20px;
        }

        .mini-blogInfo {
            gap: 16px;
        }

        .togel-cont {
            padding: 20px 8px;
            min-height: 170px;
        }

        .teleted-div {
            bottom: 16px;
        }

            .teleted-div h5 {
                font-size: 14px;
            }

        .plan-Content {
            width: 350px;
        }

        .plan-Starter {
            width: 150px;
        }

        .plan-Growth {
            width: 150px;
        }

        .elevate-box {
            padding: 30px 20px;
        }

        .pricing-box {
            padding: 20px 16px;
        }

        .pric-head h2 {
            font-size: 30px;
        }

        .pricing-boxPurple {
            padding: 20px 16px;
        }

            .pricing-boxPurple:before {
                top: 160px;
            }

        .pricing-box:before {
            top: 160px;
        }

        .pric-body li {
            line-height: 35px;
        }

            .pric-body li:before {
                top: 12px;
            }

        .pricing-boxPurple .pric-body li {
            line-height: 35px;
        }

            .pricing-boxPurple .pric-body li:before {
                top: 12px;
            }

        .pric-Button a {
            padding: 14px 10px;
            width: 90%;
        }

        .pric-Button {
            padding-top: 0px;
        }

        .testiheading:before {
            top: -8px;
            width: 100px;
        }

        .dashboard-imgImage:before {
            display: none;
        }

        .mian-banner-title {
            font-size: 40px;
            line-height: 1.2;
        }

        .feature-box {
            min-height: 226px;
            padding: 20px 12px 6px;
        }


        .setting-imageDiv img {
            width: 100%;
        }

        .explore-contSmall {
            padding: 90px 20px;
            height: 620px;
        }

        .navbar-light .navbar-nav .nav-link {
            font-size: 15px;
            padding: 0 6px;
        }

        .navbar-expand-lg .navbar-nav {
            gap: 4px;
        }

        .mian-banner-title {
            font-size: 40px;
            line-height: 1.2;
        }

        .navbar-brand {
            max-width: 150px;
        }

            .navbar-brand img {
                width: 100%;
            }

        .header-btn {
            padding: 8px;
        }

        .banner-btn-dark {
            padding: 16px 38px;
        }

        .mian-banner-cont {
            font-size: 16px;
            line-height: 30px;
        }

        .space-p-t {
            padding-top: 60px;
        }

        .space-p-b {
            padding-bottom: 60px;
        }

        .space-p-tb {
            padding: 60px 0;
        }

        .space-m-t {
            margin-top: 60px;
        }

        .space-m-b {
            margin-bottom: 60px;
        }

        .space-m-tb {
            margin: 60px 0;
        }

        .aar-title {
            font-size: 53px;
            line-height: 63px;
        }

        .global-btn-dark {
            padding: 15px 30px;
        }

        .ce-img-holder img {
            max-width: 74px;
        }

        .chattrik-experts {
            gap: 15px;
            justify-content: center;
        }

        .ctm-icon-box {
            min-height: 126px;
        }

            .ctm-icon-box span {
                font-size: 14px;
            }

            .ctm-icon-box img {
                max-width: 50px;
            }



        .ic-icon-item {
            padding: 10px;
        }



            .ic-icon-item img {
                max-width: 30px;
            }

        .ic-center-box img {
            max-width: 70px;
        }

        .ctm-title-text br {
            display: none;
        }

        .ctm-title-text {
            font-size: 16px;
            line-height: 1.6;
        }

        .item-chat-tab button {
            padding: 14px 0;
        }

        .ctm-tab-text {
            margin-top: 10px;
            font-size: 16px;
            line-height: 1.5;
        }

        .tp-logo-slider {
            padding: 18px 0;
        }

        .box-over-cont h5 {
            font-size: 24px;
        }

        .box-over-cont p {
            font-size: 15px;
        }

        .aar-cont {
            max-width: 100%;
        }
    }

    @media (min-width: 992px) {
        .ctm-mob-menu-btn {
            display: none;
        }
    }

    @media (max-width: 991.98px) {

        .paymentSuccess {
    padding: 50px 30px;
}

        .mian-banner-img {
            max-width: 100vw;
            position: relative;
            top: 40px;
        }

        .mian-banner-title {
            text-align: center;
        }

        .mian-banner-cont {
            text-align: center;            
            max-width: 100%;
        }

        .banner-btn-holder {
    justify-content: center;
}

            .ctm-imgbox-cont {
            text-align: center;
        }

        #progressbar li i {
            width: 40px;
            height: 40px;
        }

        #progressbar li:after {
            top: 20px;
        }

        .completeSequence-bar {
            left: 84px;
        }

            .completeSequence-bar .progress {
                width: 70%;
            }

        .waitingSequence-bar {
            padding: 0 136px;
        }

        .price-popUpImage {
            display: none;
        }

        .login-bg .login-inner .login-box {
            padding: 10px 10px;
        }

        .tabs-sec.tabbing-area {
            margin: 20px 0 0;
        }

            .tabs-sec.tabbing-area .feature-contMainDiv {
                margin: 0 !important;
            }

        .md-none {
            display: none;
        }

        .login-sec {
            padding: 50px 0;
            height: auto;
        }

        .flex-area .flex-left {
            width: 100%;
            order: 2;
        }

        .flex-area .flex-right {
            width: 100%;
            flex: 0 0 auto;
        }

        .form-group .form-wrap .form-control {
            padding: 5px 95px 5px 10px;
            height: 40px;
            border-radius: 4px;
        }

        .summary-box {
            margin-left: 0;
        }

        .wchat-box {
            padding: 10px 20px;
        }

        .mian-footer {
            padding: 40px 0px 20px;
        }

        .foo-holder {
            padding-bottom: 30px;
        }

        .foo-social-media .foo-ss-icons {
            justify-content: center;
        }

        .foo-copyright {
            flex-direction: column;
            gap: 10px;
        }

        .pp-tc {
            justify-content: center;
        }

        .foo-copyright p {
            text-align: center;
        }

        .p-list {
            column-count: 2;
        }

        .credit-card-form {
            margin-bottom: 30px;
        }

        .steps .step-box:after {
            width: 79%;
        }

        .career-pop .modal-body {
            padding-right: 25px;
            padding-left: 25px;
        }

            .career-pop .modal-body .pop-22 {
                display: none;
            }

            .career-pop .modal-body .pop-11 {
                display: none;
            }

        .full-w {
            width: 100%;
        }

        .career-pop2 h3 br {
            display: none;
        }

        .career-pop2 h3 {
            padding: 20px 0 20px 0;
        }
        /*-------------- Samit Css Start -----------*/
        .togel-cont {
            padding: 14px 8px;
            min-height: 116px;
        }

        .teleted-div {
            bottom: 316px;
        }

        .plan-Content {
            width: 300px;
        }

            .plan-Content ul {
                padding: 0;
            }

        .elevate-box {
            padding: 30px 20px;
            min-height: auto;
        }

        .pric-head {
            min-height: auto;
            padding-bottom: 20px;
        }

        .pric-body ul {
            min-height: auto;
            overflow: auto;
            padding-bottom: 20px;
        }

        .pricing-box:before {
            top: 110px;
        }

        .pricing-boxPurple:before {
            top: 110px;
        }


        .testi-box {
            padding: 30px 20px;
            transition: 0.5s ease-in-out;
            position: relative;
            left: 40px;
            z-index: -1;
            max-width: 500px;
        }

        .testiheading:before {
            top: -8px;
            width: 100px;
        }

        .dashboard-cont {
            padding-top: 30px;
        }

        .mission-sec:before {
            display: none;
        }

        .mission-sec {
            padding: 50px 0;
        }

        .space-p-tb {
            padding: 40px 0;
        }

        .space-p-t {
            padding-top: 40px;
        }

        .space-p-b {
            padding-bottom: 40px;
        }


        .tabs-contDiv {
            margin-top: 20px;
            padding: 30px;
        }

        .tab-img-Div {
            margin-top: 20px;
        }

        .tab-iconBtn {
            text-align: center;
        }

        .explore-contSmall {
            height: auto;
            padding: 20px;
            margin-bottom: 20px;
        }

        .feature-box {
            min-height: auto;
            padding: 20px;
        }

        .feature-contMainDiv:before {
            display: none;
        }

        .chat-Cont {
            min-height: auto;
            padding: 20px 10px 1px 10px;
        }

        .chat-Img img {
            width: 100%;
        }


        /*-------------- Samit Css End -----------*/

        .ctm-ic-box-holder {
            flex-direction: row;
            justify-content: space-between;
            gap: 20px;
            margin-top: 22px;
            margin-bottom: 22px;
        }

            .ctm-ic-box-holder .ctm-icon-box {
                flex: 1;
            }

        .aar-cont {
            display: none;
        }

        .imgl-box-shape {
            left: -93px;
            top: -50px;
            max-width: 223px;
        }

        .shape-rt {
            position: absolute;
            right: 15px;
            top: 64px;
            max-width: 236px;
        }

        #ctm-chat-tabs {
            margin-bottom: 20px;
        }

        .ctm-mini-title {
            font-size: 20px;
            margin-bottom: 0;
        }

        .ctm-mian-title {
            font-size: 32px;
        }

        .ctm-imgbox-text {
            font-size: 16px;
            line-height: 1.6;
        }

        .global-btn-dark {
            padding: 10px 32px;
        }

        .ctm-shape-rt {
            background-size: 226px;
        }

        .mian-banner-title {
            font-size: 38px;
            line-height: 1.2;
        }

        .mian-banner-home {
            height: auto;
            padding: 60px 0;
        }

        /* .mian-banner-img {
            max-width: 58vw;
            top: 0;
            display: flex;
            align-items: center;
        } */

        .icon-logo-holder {
            flex-wrap: wrap;
        }

        .ctm-lt-shape {
            background-size: 222px;
        }

        .light-purple-box {
            padding: 40px 20px;
            height: 100%;
            background-color: var(--light-purple-bg);
        }

        .ic-center-box img {
            max-width: 30px;
        }

        .ic-center-box {
            background-color: #FFFFFF;
            box-shadow: 0px 0px 11px rgba(229, 213, 250, 0.7);
            border-radius: 19px;
        }
    }

    @media (max-width: 767.98px) {

        .paymentSuccess img {
            padding-bottom: 20px;
            width: 40px;
        }

        .paymentSuccess {
            padding: 40px 20px;
        }

        .paySuccess-btn a {
            padding: 14px 20px;
        }

        .paySuccess-plan {
            padding-top: 12px;
        }

        .tab-box-img {
            margin-top: 20px;
            min-height: auto !important;
        }

        .completeSequence-bar {
            top: -34px;
            left: 50px;
        }

        .waitingSteps-mainIDv {
            gap: 30px;
        }

        .waitingSequence-bar {
            padding: 0 93px;
            top: -37px;
        }

        .sign-icon {
            width: 100px;
            height: 100px;
        }

            .sign-icon img {
                width: 50px;
            }

        .tabs-sec.tabbing-area {
            flex-direction: column-reverse;
        }

        .paySeq-accountBox h1 {
            font-size: 36px;
        }

        .tabs-sort {
            margin-bottom: 20px;
            width: 100%;
            max-width: 100%;
        }

        .paySeq-accountBox {
            padding: 40px 30px 20px;
        }

        .foo-copyright {
            flex-wrap: wrap;
        }

            /* .foo-copyright div {
                padding-right: 20px;
            } */

        .inner-banner-contact {
            min-height: 190px;
        }

        .cont-infobg {
            padding: 30px 20px 10px;
            min-height: 560px;
        }

        .contact-infoDiv {
            gap: 20px;
            padding-top: 30px;
        }

        .togel-cont {
            min-height: auto;
        }

        .teleted-div {
            top: 200px;
        }

        .mission-sec {
            padding: 30px 0;
        }

        .space-p-t {
            padding-top: 40px;
        }

        .space-p-b {
            padding-bottom: 40px;
        }

        .space-p-tb {
            padding: 40px 0;
        }

        .space-m-t {
            margin-top: 40px;
        }

        .space-m-b {
            margin-bottom: 40px;
        }

        .space-m-tb {
            margin: 40px 0;
        }

        .ctm-icon-box img {
            max-width: 40px;
        }

        .ctm-icon-box {
            min-height: 110px;
        }

        .ctm-ic-box-holder {
            gap: 8px;
            margin-top: 9px;
            margin-bottom: 9px;
        }

        .ctm-icon-box {
            margin-bottom: 0;
        }

        .aar-title {
            font-size: 40px;
            line-height: 48px;
        }

        .foo-widget-holder {
            margin-bottom: 30px;
        }

        .mian-footer {
            background-color: var(--footer-bg);
            padding: 60px 0px 20px;
        }

        .foo-holder {
            padding-bottom: 0px;
        }        

        .header-btn {
            font-size: 12px;
        }


        /*---------------- Samit Css -------------*/

        .fiters-divMain {
            flex-wrap: wrap;
        }

        .setting-contDiv h3 {
            font-size: 28px;
        }
    }

    @media (max-width: 575.98px) {

        .completeSequence-bar .progress {
            width: 86%;
        }

        .completeSequence-bar {
            left: 32px;
        }

        .waitingSequence-bar {
            padding: 0 71px;
        }

        .waitingSteps-mainIDv {
            gap: 40px;
        }

        .ctm-icon-box {
            border-radius: 16px;
            min-height: 100px;
        }

        .price-formMain {
            padding: 20px 30px;
        }

        .pricing-formDiv {
            padding-right: 0;
        }

        .loginForm-imgDiv p {
            font-size: 20px;
        }

        .loginForm-imgDiv img {
            width: 180px;
        }

        .login-form {
            padding: 30px 20px 30px;
        }

            .login-form h2 {
                margin-bottom: 20px;
            }

        .login-box {
            margin-top: 20px;
        }

        .form-btn {
            margin-top: 20px;
        }

            .form-btn .btn {
                padding: 10px 15px;
            }

        .secureCheckout-main {
            padding: 0px;
            margin: 10px;
        }

        .secureCheckout-div h1 {
            font-size: 24px;
        }

        .summary-box h3 {
            font-size: 24px;
        }

        .credit-card-form h4 {
            font-size: 31px;
        }

        .cont-infobg {
            padding: 30px 20px 10px;
            min-height: 550px;
        }

        .contact-infoDiv {
            gap: 20px;
            padding-top: 30px;
        }

        .inner-banner-contact {
            min-height: 150px;
            padding-top: 40px;
        }

        .contact-form-div button {
        }

        .contact-Box {
            padding: 20px 4px 10px;
        }

        .contct-iconDiv {
            padding-bottom: 12px;
        }

        .all-article {
            position: relative;
            right: 0;
        }

        .teleted-div {
            top: 176px;
        }

        .search-div .form-control {
            padding: 10px;
            padding-left: 32px;
        }

            .search-div .form-control::placeholder {
                font-size: 16px;
            }

        .search-div .fas.fa-search {
            font-size: 16px;
            left: 12px;
        }

        .plan-Content li p {
            font-size: 16px;
        }

        .plan-Content li {
            line-height: 36px;
        }

        .plan-Starter li p {
            font-size: 16px;
        }

        .plan-Starter li {
            line-height: 36px;
        }

        .plan-Growth li p {
            font-size: 16px;
        }

        .plan-Growth li {
            line-height: 36px;
        }

        .elevate-Section:before {
            display: none;
        }

        .testiheading:before {
            display: none;
        }

        .testi-box {
            padding: 20px 10px;
            transition: 0.5s ease-in-out;
            position: relative;
            left: 40px;
            z-index: -1;
            max-width: 400px;
        }

        .helpCta-div {
            padding-top: 12px;
            flex-direction: column;
        }

            .helpCta-div .btn {
                width: 100%;
                padding: 14px 10px 14px 30px;
            }

            .helpCta-div .form-control {
                max-width: 100%;
            }



        .mian-footer {
            padding: 30px 0px 20px;
        }

        .header-btn {
            display: none;
        }

        .menu-btnsDiv .banner-btn-link {
            display: none;
        }

        .chattrik-experts {
            display: none;
            /* flex-wrap: wrap;
            margin-top: 38px; */
        }

        .aar-title {
            font-size: 32px;
            line-height: 38px;
        }

        .ctm-icon-box span {
            font-size: 12px;
        }

        .ctm-mian-title {
            font-size: 22px;
        }

        .mian-banner-title {
            font-size: 30px;
        }


        /* .space-p-t {
            padding-top: 20px;
        }

        .space-p-b {
            padding-bottom: 20px;
        }

        .space-p-tb {
            padding: 20px 0;
        } */

        .space-m-t {
            margin-top: 30px;
        }

        .space-m-b {
            margin-bottom: 30px;
        }

        .space-m-tb {
            margin: 30px 0;
        }

        .ctm-graphbox h4 {
            font-size: 18px;
            line-height: 25px;
        }

        .banner-btn-holder {
            gap: 14px;
        }

        .global-btn-dark {
            font-size: 14px;
            padding: 10px 26px;
        }

        .banner-btn-dark {
            padding: 10px 26px;
            font-size: 14px;
        }

        .global-btn-link {
            font-size: 14px;
        }

        .banner-btn-link {
            font-size: 14px;
        }

        .foo-copyright p {
            font-size: 14px;
        }

        .foo-copyright {
            flex-direction: column;
            gap: 10px;
            align-items: center;
            position: relative;
        }

        .aar-title {
            font-size: 28px;
            line-height: 33px;
        }

        .light-purple-box {
            padding: 20px 20px;
            margin-bottom: 10px;
            height: auto;
        }

        .mian-banner-home {
            padding: 30px 0;
        }

        .light-purple-box h3 {
            font-size: 20px;
        }

        .ctm-tab-title {
            font-size: 18px;
        }

        .ctm-mini-title {
            font-size: 16px;
        }

        .ctm-imgbox-cont {
            max-width: 450px;
            margin-bottom: 20px;
            margin-top: 15px;
        }

        .ctm-lt-shape {
            background-size: 176px;
            background-position: 18px top;
        }
    }

    @media (max-width: 480px) {

        .paymentSuccess {
            padding: 20px 10px 30px;
        }

        .paySuccess-plan {
            flex-direction: column;
            gap: 4px;
        }


        .foo-inf-holder p {
            display: none;
        }

        .foo-inf-holder {
            text-align: center;
        }

        .foo-info-list {
            margin-top: 10px;
            position: relative;
        }

        .foo-info-list li a {
            gap: 6px;
            justify-content: center !important;
        }

        .foo-info-list li a svg {
            width: 20px;
        }

        .foo-info-list:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 1px;
            background-color: #573563;
            left: 2px;
            bottom: -20px;
        }

        .foo-copyright:before {
            position: absolute;
            content: "";
            width: 100%;
            height: 1px;
            background-color: #573563;
            left: 2px;
            top: -10px;
        }

        .foo-ss-icons {
            gap: 10px;
        }

        .pp-tc {
            gap: 10px;
        }

        .mian-banner-home {
            padding: 30px 0 50px;
        }

        .mian-banner-img {
            top: 20px;
        }

        #progressbar li i {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }

        #progressbar li:after {
            top: 15px;
        }

        .waitingSequence-bar {
            padding: 0 30px;
        }

        .st-box-Active {
            justify-content: center;
            text-align: center;
            height: auto;
            gap: 10px;
        }

            .st-box-Active img {
                margin: 0 auto;
            }

             .st-box .active {
            justify-content: center;
            text-align: center;
            height: auto;
            gap: 10px;
        }

            .st-box .active img {
                margin: 0 auto;
            }

        .st-box {
            justify-content: center;
            text-align: center;
            height: auto;
            gap: 10px;
        }

            .st-box img {
                margin: 0 auto;
            }

        .btn-Purple {
            width: 100% !important;
        }

        .step-stripe .iti-group {
            width: 100% !important;
        }

        .content .content__box {
            /*padding: 10px 30px;*/
            padding: 20px 20px !important;
        }

        .content .body .input-group .freeTrial-span {
            right: -5px;
            font-size: 12px;
        }

        .content .body {
            padding: 30px 4px 10px;
        }

        .thank-paymentDiv {
            padding: 10px 2px;
            margin: 10px;
        }

        .secureCheckout-logoDiv h3 {
            font-size: 16px;
            padding-left: 6px;
        }

        .radioCheck-btnDiv {
            align-items: baseline;
            /*        margin-bottom: 10px;*/
        }

        .secureCheckout-logoDiv img {
            max-width: 160px;
        }

        .secureCheckout-logoDiv {
            display: block;
        }

        .paySequence-box p {
            font-size: 12px;
        }

        .tab-box-img {
            min-height: auto;
        }

        .iconbox-mian-img {
            padding: 40px 20px;
            text-align: center;
        }

        .icontab-cont-box h3 {
            font-size: 18px;
            line-height: 24px;
        }

        .icontab-cont-box p {
            display: none;
        }

        .icontab-subtitle {
            font-size: 14px;
        }

        .ctm-icon-box span {
            font-size: 12px;
            line-height: 1.2;
        }

        .ctm-icon-box {
            min-height: 170px;
        }

        .ctm-icon-box {
            min-height: 90px;
        }

            .ctm-icon-box i {
                font-size: 26px;
            }

        .rghtAnglDiv i {
            right: 85px;
            top: 14px;
        }

        .lftAnglDiv i {
            left: 80px;
            top: 8px;
        }

        .sign-icon {
            width: 70px;
            height: 70px;
        }

            .sign-icon img {
                width: 34px;
            }

        .ctm-navbar-brand img {
            width: 120px;
        }

        .loginForm-imgDiv img {
            width: 140px;
        }

        .forgot-freeTrial-div {
            flex-direction: column;
            padding-top: 10px;
        }

        .login-sec {
            padding: 20px 0;
        }

        .login-form {
            padding: 20px;
        }

        .thank-paymentDiv h1 {
            font-size: 26px;
        }

        .thank-paymentDiv img {
            width: 60px;
            padding-bottom: 12px;
        }

        .thank-paymentDiv h1 {
            font-size: 24px;
        }

        .thank-paymentDiv img {
            width: 40px;
        }

        .thank-paymentDiv {
            padding: 10px;
            margin: 10px;
        }

        .billingCycle-selectdiv select {
            width: 170px;
        }

        .paySeq-accountBox h1 {
            font-size: 24px;
        }

        .paySeq-accountBox {
            padding: 20px 12px;
        }

        .paySeq-formDiv {
            padding-top: 12px;
        }

        .paySequence-box p {
            font-size: 14px;
        }

        .paySeq-accountBox p {
            font-size: 14px;
        }

        .paySequence-bar {
            padding-top: 12px;
            padding-left: 22px;
            padding-right: 20px;
        }

        .paySeq-input {
            padding: 10px 12px;
        }

        .paySeq-input-btn {
            padding: 10px 12px;
        }

        .wchat-box {
            padding: 14px;
            min-height: auto;
        }

        .foo-copyright p {
            font-size: 12px;
        }

        .foo-copyright a {
            font-size: 12px;
        }

        .foo-nav li a {
            font-size: 12px;
        }

        .inner-banner-thk .mian-banner-title {
            line-height: 40px;
        }

        .mian-banner-title {
            font-size: 26px;
        }

        .GoBack {
            font-size: 14px;
            padding: 11px 40px;
        }

        .cardField input {
            margin-bottom: 15px;
            height: 30px;
        }

        .cc-holder img {
            top: 0%;
        }

        .cardField label {
            font-size: 12px;
            margin-bottom: 3px;
        }

        .credit-card-form h4 {
            margin-bottom: 10px;
        }

        .credit-card-form h4 {
            font-size: 22px;
        }

        .credit-card-form {
            padding: 20px;
        }

        .steps .step-box:after {
            width: 63%;
        }

        .order-top p br {
            display: none;
        }

        .p-list {
            column-count: 1;
        }

        .contct-iconDiv img {
            width: 40px;
        }

        .contct-cont h4 {
            font-size: 18px;
        }

        .contact-infoDiv {
            gap: 16px;
            padding-top: 20px;
        }

        .cont-infobg {
            padding: 20px 16px 10px;
            min-height: 400px;
        }

        .contact-form-div {
            padding-top: 20px;
            padding-right: 10px;
        }

        .single-blogDiv {
            gap: 4px;
        }

        .main-blogInfo {
            gap: 6px;
            padding-top: 0px;
            padding-bottom: 10px;
        }

        .single-blogCont h3 {
            font-size: 18px;
            line-height: 24px;
        }

        .main-blogInfo img {
            width: 45px;
            height: 45px;
        }

        .lg-cont {
            font-size: 16px;
            color: #141F39;
        }

        .teleted-div {
            top: 216px;
        }

        .explore-opp-section:before {
            height: 300px;
            width: 300px;
        }

        .sub-heading-purple {
            font-size: 20px;
            font-weight: 700;
            padding-top: 10px;
        }

        .elevate-box {
            padding: 20px 14px;
        }

        .price-faq .accordion-button {
            font-size: 18px;
            padding: 10px;
        }

        .dashboard-cont {
            padding-top: 10px;
        }

        .testi-sec:before {
            height: 250px;
            width: 250px;
            bottom: 0px;
            left: 12px;
        }

        .dashboard-img img {
            width: 170px;
        }

        .dashboard-imgImage img {
            width: 170px;
        }

        .dashboard-icon img {
            width: 40px;
        }

        .dashboard-smBox {
            padding-left: 10px;
            padding-bottom: 10px;
        }

        .dashboard-contBox {
            padding-top: 10px;
        }

        .dashboard-bgDiv {
            padding: 20px 10px 10px 10px;
        }

        .testi-box {
            padding: 20px 10px;
            left: 0px;
            z-index: -1;
            max-width: 310px;
        }

        .setting-contDiv h3 {
            font-size: 24px;
            margin-bottom: 0;
        }

        .setting-contDiv p {
            margin-bottom: 0;
            font-size: 16px;
        }

        .tabs-contDiv {
            padding: 20px 10px;
        }

        .tabing-mainBorder {
            padding: 10px;
        }

        .tab-icon-ContentDiv {
            gap: 10px;
            padding-right: 0;
        }

        .explore-section:before {
            height: 250px;
            width: 250px;
        }

        .explore-tabsDiv ul {
            gap: 4px;
        }

        .explore-tabsDiv .nav-pills .nav-link {
            font-size: 16px;
            padding: 6px 4px;
        }

        .explore-contSmall {
            padding: 10px 14px;
        }

            .explore-contSmall h5 {
                font-size: 20px;
            }

            .explore-contSmall p {
                font-size: 16px;
            }

        .chat-Cont {
            padding: 12px 2px 6px 6px;
        }

        .banner-btn-dark {
            padding: 10px 10px;
            font-size: 14px;
        }

        .inner-banner-p {
            font-size: 16px;
            line-height: 26px;
        }

        .mini-blogDiv {
            flex-direction: column;
            justify-content: center;
            text-align: center;
            gap: 10px;
        }

        .mini-blogImg {
            max-width: none;
        }

        .mini-blogInfo {
            gap: 20px;
            justify-content: center;
        }

        .mini-blogCont h3 {
            font-size: 20px;
        }
    }

    @media (max-width: 360px) {

        .waiting-stepDiv-active {
            width: 0;
            height: 0;
            border-radius: 50%;
            padding: 20px;
        }

        .waiting-stepDiv {
            width: 0;
            height: 0;
            border-radius: 50%;
            padding: 20px;
        }

        .waitingSteps-mainIDv {
            gap: 20px;
            justify-content: center;
        }
    }

    .tabs-sec .tabs-content {
        display: none;
    }

        .tabs-sec .tabs-content.is--active {
            display: block;
        }

    .js-tab-link {
        cursor: pointer;
    }

    .ctm-nav-tabs .nav-link {
        position: relative;
    }

        .ctm-nav-tabs .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -3px;
            display: block;
            /* border-bottom: solid 3px orange;   */
            /* transform: scaleX(0);   */
            width: 0;
            height: 3px;
            background: orange;
            transition: width 0ms ease-out;
        }

        .ctm-nav-tabs .nav-link.active::after {
            /* transform: scaleX(1); */
            width: 100%;
            /* transform-origin:  0% 50%;  */
            transition: width 5000ms ease-in;
        }

    #chat-ayalytics {
        width: 100%;
    }

    .tabs-sec {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0px 0px 107px rgba(217, 177, 248, 0.25);
    }

    .tab-box-img {
        background-color: #FDF8FF;
        min-height: 400px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        padding: 20px;
    }

    /*//login-form//*/

    .step-stripe {
        height: calc(100% - 95px);
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .form-container {
        position: relative;
        width: 600px;
        height: 445px;
        background: rgba(250, 252, 253, 0.26);
        box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
        backdrop-filter: blur(17px);
        border-radius: 19px;
        overflow: hidden;

        @media (max-width:991px) {
            width:80%;
        }

        @media (max-width:575px) {
            width:90%;
        }
    }

        .form-container .input-group .form-control {
            background: #FCFBFB;
            border: 1px solid #EEF0F1;
            border-radius: 10px !important;
            /* height: 50px; */
            padding: 12px 15px;
            width: 100%;
            text-align: left;
        }

            .form-container .input-group .form-control::placeholder {
                color: #BBBCBD;
                font-size: 14px;
                
            }

        .form-container .input-group select {
            background: #FCFBFB;
            border: 1px solid #EEF0F1;
            border-radius: 10px;
            height: 50px;
            width: 100%;
            padding: 10px;
        }

            .form-container .input-group select:focus-visible {
                outline: none;
            }

        .form-container .form-header {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            z-index: 10;
            top: 0;
            left: 0;
        }

            .form-container .form-header .indicator {
                position: relative;
                display: inline-block;
                width: 46px;
                height: 6px;
                border-radius: 5px;
                margin-left: 15px;
                background-color: #F5EDFB;
            }

                .form-container .form-header .indicator:first-of-type {
                    margin-left: 0;
                }

    .content {
        box-sizing: border-box;
        overflow: hidden;
        z-index: 5;
        display: block;
        position: absolute;
        color: grey;
        height: 100%;
        top: 0;
        padding: 20px;
        width: 100%;
        box-shadow: 15px 5px 80px -20px rgba(0, 0, 0, 0.6);
    }

        .content .content__box {
            position: absolute;
            width: 100%;
            height: 100%;
            right: 1000px;
            padding: 35px;
            text-align: center;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 100%;
        }

            .content .content__box.visible__no-animation {
                right: 0;
            }

            .content .content__box.slide-in {
                animation: slide-in 500ms ease-in-out forwards;
            }

            .content .content__box.slide-out {
                animation: slide-out 500ms ease-in-out forwards;
            }

        .content .title {
            position: relative;
            text-align: center;
            font-family: "Poppins";
            margin: 20px 0 40px 0;
        }

            .content .title.sty1 {
                position: relative;
                text-align: center;
                font-family: "Poppins";
                margin: 20px 0 10px 0;
            }

            .content .title h5 {
                font-family: "Poppins";
                color: #111010;
                font-size: calc(16px + (23 - 16) * (100vw - 320px) / (1920 - 320));
            }

    .content-para {
        font-family: "Poppins";
        color: #707A83;
        font-size: calc(13px + (14 - 13) * (100vw - 320px) / (1920 - 320));

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

    .content .description {
        text-align: center;
        margin-bottom: 10px;
    }

    .content .body {
        padding: 20px;
        padding: 40px 20px 20px;

        @media (max-width:575px) {
            padding:40px 10px 20px;
        }
    }


        .content .body .input-group {
            margin: 0px;
        }

    .content-1 {
        text-align: center;
    }

        .content-1 p {
            text-align: center;
        }

    .form-container .form-header span.active {
        background-color: #B526E6;
    }

    /* Animations */
    @keyframes slide-in {
        0% {
            right: 1000px;
        }

        100% {
            right: 0;
        }
    }

    @keyframes slide-out {
        0% {
            right: 0;
        }

        100% {
            right: -1000px;
        }
    }


    .form-mask {
        width: 90%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 90%;
        border-radius: 22px;
        overflow: hidden;
    }

        .form-mask img {
            height: 100%;
            background-size: cover;
            width: 100%;
        }

    .indicator-txt h6 {
        color: #B7AFBD;
        font-weight: 400;
        font-size: 14px;
        font-family: poppins;
        font-size: calc(13px + (14 - 13) * (100vw - 320px) / (1920 - 320));
        padding-bottom: 5px;
    }

    .content .body .input-group .freeTrial-span {
        background: transparent;
        border: 0;
        position: absolute;
        right: 12px;
        top: 10px;
        z-index: 99;
    }


    .form-title {
        text-align: left;
        color: #111010;
        font-family: poppins;
        font-size: 14px;
        font-weight: 400;
    }

    .form-logos {
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        @media (max-width:575px) {
            height: 290px;
            overflow-y: scroll;
        }
    }

        .form-logos li {
            flex: 0 0 48%;
            max-width: 48%;
            padding: 10px 0;

            @media (max-width:575px) {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

    .form-logarea {
        text-decoration: none;
        border: 1px solid #622A82;
        display: flex;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        gap: 0 10px;
        padding: 14px 10px;
        height: 100%;
    }

    .form-logos li {
        list-style-type: none;
    }

    .form-logareacontent h6 {
        color: #111010;
        font-weight: 500;
        font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
        margin-bottom: 0;
    }


    /*button*/
    .btn-Purple {
        border: 1px solid #B526E6;
        background-color: #B526E6 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: #fff!important;
        font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
    }
         .btn-Purple:hover{
    background-color: #B526E6;
    color: #fff;
    border-color: #B526E6;
}


    .btn-border {
        border: 1px solid #24052F;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: #24052F;
        font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
    }

        .btn-border:hover {
            background-color: #B526E6;
            color: #fff;
            border-color: #B526E6;
        }

.form-btn-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 25px;

    @media (max-width:575px) {
        gap:10px 0;
    }
}

.form-btn-area button {
    flex:0 0 49%;
    max-width:49%;

    @media(max-width:575px){
        flex:0 0 100%;
        max-width:100%;
    }
}

/* Set Password*/
/* Rectangle 6545 */
.set-up-holder{
   padding-top:8%;
}
@media(max-width:1400px){
    .set-up-holder {
        padding-top: 4%;
    }
}
.setup-box {
    box-sizing: border-box;
    max-width: 600px;
    padding: 30px;
    background: rgba(250, 252, 253, 0.26);
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    backdrop-filter: blur(17px);
    border-radius: 19px;
    margin: 0 auto;
}

.setup-box h3{
    color:#111010;
    font-weight:500;
    font-size: calc(18px + (23 - 18) * ((100vw - 300px) / (1920 - 300)));
    margin-bottom:25px;
}
.setup-box-inner {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 20px;
    box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
    border-radius: 19px;
}
.setup-box-inner .form-group {
    position:relative;
    margin-bottom:15px;
}
.setup-box-inner .form-group label{
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    color:#111010;
    font-weight:400;
}
.setup-box-inner .form-group input{
    background-color:#FCFBFB;
    border:1px solid #FCFBFB;
    padding:10px 20px;
    border-radius:10px;
    position:relative;
}
.setup-box-inner .st-sbbt{
    background-color:var(--sec-color);
    padding:12px 45px;
    color:#fff;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    font-weight:400;
    border:0;
    border-radius:12px;
}
.setup-box-inner .form-group .icon-ps{
  position: absolute;
  right: 14px;
  top: 38px;
  z-index: 9;
}
.setup-box-inner .form-group .icon-ps a{
    text-decoration:none;
}
.setup-box-inner .form-group .icon-ps i{
      font-family: 'xicons' !important;
      color:#000;
      font-size:14px;
      padding:0 3px;
}
.setup-box-inner .form-group .icon-ps
.eye-ic{
    font-size:12px;
}

.cst-verify{
 max-width: 250px;
  margin: 0 auto !important;
  display: flex!important;
  align-items: center;
  justify-content: space-between; 
}
.cst-verify input{
  border: 0;
  border-bottom: 1px solid #D9D9D9;
  background: transparent;
  border-radius: 0;
  padding: 5px;
  text-align: center;
  /* border: 0; */
  margin: 0px 12px;
  font-size: 20px;
  color: #000000;
  width: 50px;
  font-weight: bolder;
  opacity: 1;

}
.cst-verify input:focus,
.cst-verify input:hover{
    border: 0!important;
    box-shadow: 0!important;
}
.ent-thank i{
    font-size: calc(60px + (100 - 60) * ((100vw - 300px) / (1920 - 300)));
    margin: 20px 0;
}

.step-counter {

  margin-bottom: 15px;
}
.step-sct
.form-container {
  position: relative;
  width: 600px;
  height: 445px;
  background: rgba(250, 252, 253, 0.26);
  box-shadow: 0px 0px 8px rgba(77, 85, 235, 0.15);
  backdrop-filter: blur(17px);
  border-radius: 19px;
  overflow: hidden;
  margin: 0 auto;
}

.content {
     padding-top: 35px;
    }

    .form-wrapper {
  position: relative;
  overflow: hidden;
  height: 280px; /* adjust based on your form content */
  width: 500px;
  margin: 0 auto;

}

.form-step {
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  transition: opacity 0.5s ease, transform 1s ease;

  /* transition: all 0.4s ease; */
  transform: translateX(100%);
  z-index: 0;
}

.form-step.active {
  left: 0;
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.form-step.slide-left {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}

.form-step.slide-right {
  transform: translateX(100%);
  opacity: 0;
  z-index: 1;
}

#success-message {
  display: none;
  text-align: center;
}
    

    .error {
      color: red;
      font-size: 10px;
      margin-bottom: 10px;
    }
.et-verify p{
      font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
      font-weight: 400;
      color: #777270;
      text-align: center;
}
.et-verify p a{
    color: #B526E6;
    text-decoration: none;
}
   
#progress-bar .indicator.completed {
  background-color: #28a745; 
}
@media(max-width:991px){
  .shape.pos-3{
    display: none;
  }
  .form-btn-area {
    margin-top: 20px;
}
     .form-wrapper {
      width: 95%;
          height: 100%;
     }
     .form-container .form-header .indicator {
        margin-left: 5px;
     }
    .form-container .input-group .form-control {
          height: 40px;
    }
    .submit-button{
        padding: 10px 12px;
    }
}



/* New style*/
.subs-top{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.subs-top h4{
    color: #B627E6;
    font-size: 20px;
    font-weight: 500;
    position: relative;
}
.subs-top .subs-top-line{
    background-color: #BDB1B1;
    width: 100%;
    height: 1px;
  
  
}
.subs-text {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.subs-text p{
    color: #161616;
    font-weight: 500;
    font-size: 14px;
}
.subs-text p span{
    color: #838B90;
    font-weight:400;
}
.subs-text p span .circle{
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background-color: #00BA64;
}
.feature-bg{
    border: 0;
background: #FBF4FC;
box-shadow: 0px 0px 8px rgba(50, 119, 248, 0.09);
border-radius: 16px;
padding: 12px 20px;

}
.featre-box{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.featre-box .featre-box-icon{
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    flex-shrink: 1;
}
.featre-box .featre-box-icon i{
    color: #B526E6;
    font-size: 22px;
}
.featre-box .featre-box-text{
    margin-left: 20px;
    color: #312D2D;
    font-weight:500;
    font-size: 16px;

}
.pp-note {
    margin-bottom: 0;
    position: relative;
    padding: 10px ;
}
.pp-note span{
    display: block;
    color: #2D0505;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}
.pp-note p{
    display: block;
    color: #EE0B0E;
    font-size: 14px;
    font-weight: 400;
}
.pp-note p i{
    color: #DB0609;
}
.error-s{
    position: relative;
    padding: 10px ;
}
.error-s p i{
    color: #DB0609;
}
.error-s p{
    color: #161616;
    font-size: 14px;
    font-weight: 400;
}
.error-s p a{
    text-decoration: underline;
     color: #B526E6;
     font-size: 14px;
    font-weight: 400;
}
.fill-step-holder{
      padding:15px 10px;
}
.fill-step-holder   
.fill-step{
    display: flex;
    align-items: center;
  
    position: relative;
    text-align: center;
    justify-content: center;
}
.fill-step-holder
span{
  font-size: 14px;
  font-weight: 400;
  color: #B7AFBD;
  text-align: center;
  display: block;
  margin-bottom: 15px;
}
.fill-step-holder
.fill-step .fill-empty{
    width: 44px;
    height: 6px;
    border: 0;
    border-radius: 6px;
    margin: 0 5px;
    background-color: #fff;
}

.fill-step-holder
.fill-step .fill-active{
    background-color: #B526E6;
}


.cst-verify{
 max-width: 350px;
  margin: 0 auto !important;
  display: flex!important;
  align-items: center;
  justify-content: space-between; 
  
}
.cst-verify input{
  border: 0;
  border-bottom: 1px solid #D9D9D9;
  background: transparent;
  border-radius: 0;
  padding: 5px;
  text-align:left;
  /* border: 0; */
  margin: 0px 12px;
  font-size: 20px;
  color: #000000;
  width: 50px;
  font-weight: bolder;
  opacity: 1;

}
.cst-verify input:focus,
.cst-verify input:hover{
    border: 0!important;
    box-shadow: 0!important;
}

.change-pas-p2{
    position: relative;
}
.et-verify h4{
      font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1920 - 300)));
      font-weight: bold;
      color: #000;
}
.et-verify p{
      font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
      font-weight: 400;
      color: #777270;
}
.et-verify p a{
    color: #B526E6;
}
.checkbox-holder 
.form-check-input:checked {
  background-color: #b526e6;
  border:1px solid #888888;
  padding: 2px;
}
.checkbox-holder2 .form-check-label{
     font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
  color: #474747;
  font-weight: 400;
  margin: 0;
  padding-left: 6px;  
}
.subscription-pop h5{
 font-size: calc(17px + (20 - 17) * ((100vw - 300px) / (1920 - 300)));
  color: #474747;
  font-weight: bold;
}
.contSupt-icon i{
    font-size: 45px;
    color: #B526E6;
}
.number-plis{
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: 400px;
    cursor: pointer;
}
.number-plis p{
  font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
  color: #8F8F8F;
  font-weight: 400;
  padding-left: 15px;
  margin: 0;
}

.number-plis-inner {
  max-width: 142px;
  border: 1px solid #D7E7F5;
  background-color: #EFF6FA;
  padding: 2px 5px;
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
}
.number-plis-inner input{
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background-color: #eff6fa;
    text-align: center;
    color: #909AA1;
}
.cret-box{
    position: relative;
    padding:10px 24px;
}
.cret-box h6{
    font-size: calc(18px + (21 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #858B92;
    font-weight: 400;
    margin-bottom:20px;
}
.cret-box h6 span{
    font-weight: 500;
    color: #000;
}
.cs-popup-cont h5{
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #474747;
    font-weight: bold;
}
.cs-popup-cont h5 span{
    color: #999999;
}
.avaibl-grade{
    position: relative;
    margin-bottom: 20px;
}
.avaibl-grade span{
     font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
     font-weight: bold;
    color: #000;
}
.avaibl-grade ul{
    padding: 0;
    margin: 0;
}
.avaibl-grade ul li{
    list-style: none;
     font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
     font-weight: 400;
    color: #474747;
    position: relative;
    padding-left: 15px;
}
.avaibl-grade ul li::before{
    content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background-color: #B526E6;
  position: absolute;
  left: 0;
  top: 11px;

}

.ligt-text{
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #595656;
    font-weight: 600;
}
.est-text{
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #595656;
    font-weight: 600;
    color: #161616;

}
.est-text span{
    color: #858B92;
}

.price-popUpImage img{
    height: 100%;
}

.change-pas-p1 .btn-close1{
    position: absolute;
    background-color:#818181;
    font-size: 11px;
    color: #fff;
    right: 12px;
    top: 10px;
    border: 0;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:99;
}


.accPopup-width a{
    text-decoration: none;
    color: #B526E6;
}

.content .body .input-group .freeTrial-span {
  background: transparent;
  border: 0;
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 99;
}
.sht-pst{
     position: absolute;
  top: 32px;
  right: 5px;
  opacity: 0.6;
  font-size: 14px;
}

:where([autocomplete=one-time-code]) {
  --otp-digits: 4; /* length */
  --otc-ls: 4.5ch;
  --otc-gap: 1;
  /* private consts */
  --_otp-bgsz: calc(var(--otc-ls) + 1ch);

  all: unset;
  background: linear-gradient(90deg, 
    var(--otc-bg, #EEE) calc(var(--otc-gap) * var(--otc-ls)),
    transparent 0
  ) 0 0 / var(--_otp-bgsz) 100%;
  caret-color: var(--otc-cc, #333);
  clip-path: inset(0% calc(var(--otc-ls) / 2) 0% 0%);
  font-family: ui-monospace, monospace;
  font-size: var(--otc-fz, 2.5em);
  inline-size: calc(var(--otc-digits) * var(--_otp-bgsz));
  letter-spacing: var(--otc-ls);
  padding-block: var(--otc-pb, 1ch);
  padding-inline-start: calc(((var(--otc-ls) - 1ch) / 2) * var(--otc-gap));
}




  .password-toggle {
            position: absolute;
            right: 12px;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            user-select: none;
        }

        .password-toggle:hover {
            background-color: #f8f9fa;
        }

        .eye-icon {
            width: 20px;
            height: 20px;
            fill: #6c757d;
            transition: fill 0.2s ease;
        }

        .password-toggle:hover .eye-icon {
            fill: #667eea;
        }

        .cst-verify{
  max-width: 160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}
.cst-verify input{
  border: 0;
  border-bottom: 1px solid #D9D9D9;
  background: transparent;
  border-radius: 0;
  padding: 5px;
  /* text-align: center; */
  text-align: left;
  /* border: 0; */
  margin: 0px 12px;
  font-size: 20px;
  color: #000000;
  /* width: 50px; */
  width: 100%;
  font-weight: bolder;
  opacity: 1;
  letter-spacing: 20px;

}
.cst-verify input:focus,
.cst-verify input:hover{
    border: 0!important;
    box-shadow: 0!important;
}