* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
}

a {
    text-decoration: none !important;
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ffe3f7;
    box-shadow: inset 0 0 6px #ffe3f7;
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(255, 255, 255, .4);
    -webkit-box-shadow: inset 0 0 6px #ff72d5;
    box-shadow: inset 0 0 6px #ff72d5
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(253, 253, 253, .4)
}

.left-section {
    /* overflow-y: hidden; */
    /* height: 80vh; */
    position: sticky;
    top: 99px;
}

.left-section::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

.sidebar::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

body {
    overflow-x: hidden;
}

/* section{
    margin-bottom: 20px !important;
} */
.navbar {
    box-shadow: 0px 4px 16px 12px #F848C426;
    background-color: white;
    /* position: fixed; */
}

/* .navbar-light .navbar-nav .nav-link.active{
    border-bottom: 2px solid #F648C3;
} */

#features:before {
    display: block;
    content: " ";
    height: 60px;
    visibility: hidden;
}

#services:before {
    display: block;
    content: " ";
    height: 70px;
    visibility: hidden;
}

#contact:before {
    display: block;
    content: " ";
    height: 110px;
    visibility: hidden;
}
#policy:before {
    display: block;
    content: " ";
    height: 110px;
    visibility: hidden;
}
/* #about:before {
    display: block;
    content: " ";
    height: 110px;
    visibility: hidden;
} */

/* .main-sec{
    background-image: url("../images/pink.png");
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 4px solid #F648C3;
    box-shadow: 0px 4px 16px 12px #F848C426;

} */

.main-two .container {
    position: relative;
    z-index: 1;
    color: white;
    margin-top: 80px !important;
}

.main-two::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1;
    height: 100vh;
    margin-top: 57px;
    opacity: .65;
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-size: cover;
    opacity: 0.7;
}

#business-video {
    width: 100%;
    /* border: 2px solid #F648C3; */
    border-radius: 10px;
}

.video-background {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url("../images/hero-back.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-container-right {
    align-items: center;
    -webkit-align-items: center;
    height: 560px;
    overflow: hidden;
}

.main {
    margin: 0px auto;
    width: 400px;
    height: 400px;
    position: relative;
    margin-top: 40px;
}

.big-circle {
    height: 100%;
    width: 100%;
    position: relative;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    animation: Rotate 20s linear infinite;
    -webkit-animation: Rotate 20s linear infinite;
}

.icon-block {
    width: 64px;
    height: 64px;
    position: absolute;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.icon-block img {
    margin: 0px auto;
    width: 86%;
    animation: Rotate-reverse 20s linear infinite;
    -webkit-animation: Rotate-reverse 20s linear infinite;
    display: flex;
    justify-content: center;
}

.icon-block:first-child {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.icon-block:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    -webkit-transform: translate(50%, -50%);
}

.icon-block:nth-child(3) {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
}

.icon-block:nth-child(4) {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* circle content */
.circle-right {
    animation: circle-rotate 20s linear infinite;
    -webkit-animation: circle-rotate 20s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    width: 75%;
    height: 75%;
    border: 3px solid #ffffff;
    border-radius: 50%;
}

.circle-right .icon-block i {
    animation: img-rotate 20s linear infinite;
    -webkit-animation: img-rotate 20s linear infinite;
}

/* center logo */
.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.center-logo img {
    max-width: 100px;
}

/* keyframe animation */

@keyframes Rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes Rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes Rotate-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes Rotate-reverse {
    from {
        -webkit-transform: rotate(360deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes circle-rotate {
    from {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(405deg);
    }
}

@-webkit-keyframes circle-rotate {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(405deg);
    }
}

@keyframes circle-rotate-reverse {
    from {
        transform: translate(-50%, -50%) rotate(405deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(45deg);
    }
}

@-webkit-keyframes circle-rotate-reverse {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(405deg);
    }

    to {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
    }
}

@keyframes img-rotate {
    from {
        transform: rotate(-45deg);
    }

    to {
        transform: rotate(-405deg);
    }
}

@-webkit-keyframes img-rotate {
    from {
        -webkit-transform: rotate(-45deg);
    }

    to {
        -webkit-transform: rotate(-405deg);
    }
}


.navbar-light .navbar-toggler {
    border: 2px solid #F748C4 !important;

}

.navbar-toggler:focus {
    box-shadow: none !important;
}


.nav-link {
    position: relative;
}

.navbar-nav .nav-link {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

.nav-link::after {
    content: '';
    transition: all 0.2s;
    opacity: 0;
    height: 2px;
    /* width: 90%; */
    width: 100%;
    background-color: #F648C3;
    position: absolute;
    bottom: 0;
    left: 0;
}

.nav-link:hover::after {
    opacity: 1;
}

.nav-link.active {
    color: #F648C3 !important;
}

.nav-link.active::after {
    opacity: 1;
}

/* .nav-link::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 16px;
    background-color: #e91e63;
    height: 2px;
    box-sizing: border-box;
    width: 35px;
} */

/* .nav-item .nav-link.active::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 16px;
    background-color: #e91e63;
    height: 2px;
    box-sizing: border-box;
    width: 35px;
} */
.btn-group .btn-one {
    border-radius: 6px;
    background-color: white;
    padding: 10px 24px 10px 24px;
    color: black;
    border: 0.5px solid #F648C3;
    box-shadow: 0px 5px 15px 0px #F648C333;
}

.btn-comment {
    border-radius: 6px;
    background-color: white;
    padding: 10px 24px 10px 24px;
    color: black;
    border: 0.5px solid #F648C3;
    box-shadow: 0px 5px 15px 0px #F648C333;
}

.btn-comment:hover {
    color: white;
    background-color: #F648C3;
    border: 0.5px solid #F648C3;
}

.btn-group .btn-one:hover {
    color: white;
    background-color: #F648C3;
    border: 0.5px solid #F648C3;
}

.btn-group .btn-two {
    background-color: #F648C3;
    border-radius: 6px;
    padding: 10px 35px 10px 35px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: 0.5px solid #F648C3;
    color: white;
}

.btn-group .btn-two:hover {
    color: #F648C3;
    background-color: white;
    border: 0.5px solid #F648C3;
}

.btn-danger:active:focus {
    box-shadow: none !important;
}

.dropdown-divider {
    border-top: 2px solid #F648C3 !important;
}

.dropdown-menu.show {
    display: block;
    border: 1px solid #F648C3
}

.dropdown-item {
    text-align: center !important;
    font-style: italic;
    color: #F648C3 !important;
}

.dropdown-menu .dropdown-item.active {
    background-color: white;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: white;

}

.btn-group:hover .dropdown-menu,
.btn-group .show .dropdown-menu {
    display: block;
    border: 1px solid #F648C3 !important;

}

.btn-group {
    position: relative;
    /* This ensures the dropdown menu is positioned relative to the button */
}

.signupitem {
    color: black !important;
}

.signupitem:hover {
    color: #F648C3 !important;
}

.dropdown-menu {
    position: absolute;
    /* Position it absolutely within the .btn-group */
    top: 100%;
    min-width: 7rem !important;
    /* left: 899px !important; */
    display: none;
    /* Initially hidden */
    z-index: 1000;
}

.dropdown-menu {
    display: none;
}

.services {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 95%;
    margin: 50px auto 20px auto;
}

.service {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 340px;
    width: 360px;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 700px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.service:hover {
    transform: scale(1.05);
}

.service p {
    color: #fff !important;
    font-weight: normal !important;
    font-size: 16px !important;
    text-align: center;
}

.front,
.back {
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.7s ease-in-out;
    border-radius: 10px;
}

.front {
    transform: rotateX(0deg);
    padding: 20px;
}

.back {
    transform: rotateX(-180deg);
    color: whitesmoke;
    text-align: center;
}

.back-1 {
    background-image: url("../images/img-one.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.back-2 {
    background-image: url("../images/img-two.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.back-3 {
    background-image: url("../images/img-three.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service:hover .front {
    transform: rotateX(180deg);
}

.service:hover .back {
    transform: rotateX(0deg);
}

.front h4 {
    color: white;
    font-size: 24px;
    font-weight: 400;
    transform: translateZ(50px);
    padding: 30px 0;
    text-align: center;
    line-height: 1.4;
}

.back h3 {
    display: inline-block;
    margin: 50px auto 30px auto;
    transform: translateZ(50px);
    color: rgb(116, 116, 116);
}

.back p {
    margin: 40px;
    transform: translateZ(50px);
    color: #fff !important;
}

.service1 .front {
    background: linear-gradient(45deg, rgb(91 108 196), rgb(139 175 217));
}

.service2 .front {
    background: linear-gradient(45deg, rgb(244 165 192), rgb(143 87 177));
}

.service3 .front {
    background: linear-gradient(45deg, rgb(203 106 153), rgb(217 181 134));
}

form .btn-2 {
    background-color: #F648C3;
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: none;
    color: white;

}

form a {
    text-decoration: none;
    color: white;
}

form a:hover {
    color: white;
}


/* form a:hover {
    color:#F648C3;
    background-color: white;
    border: 0.5px solid #F648C3;
} */
form .btn-1 {
    border-radius: 6px;
    background-color: white;
    padding: 10px 24px 10px 24px;
    color: black;
    border: 0.5px solid #F648C3;
    box-shadow: 0px 5px 15px 0px #F648C333;
}

form .btn-1:hover {
    color: white;
    background-color: #F648C3;
}

.main-two {
    padding-top: 114px;
    display: flex;
    justify-content: center;
    text-align: left;
    align-items: center;
    height: 100vh;
}

.main-two .text .head {
    font-size: 50px;
    font-weight: 700;
    line-height: 77px;
}

.main-two .text .head-p {
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
}

/* .banner-section{
    align-items: center;
    display: flex;
    justify-content: center;
} */
.text {
    margin-left: 60px !important;
}
.banner-img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-around;
    align-items: flex-start;
    margin-bottom: 20px;
}

.banner-img img {
    width: 400px;
    align-items: center;
}

/* .main-two  form .btn-2{
    background-color: #FFEA6C;
    border-radius: 8px;
    padding: 10px  30px 10px 30px ;
} */
.our-services-sec .txt-services h1 {
    color: #666666;
    font-weight: 600;
}

.srvice .img-one {
    border-radius: 20px;
    border: 5px solid #FFFFFF;
}

.srvice .img-one img {
    height: 336px;
    width: 343px;
}

.srvice p {
    color: black;
    font-size: 22px;
    font-weight: 500;
}

/* .brand-slider .items a img{
    padding-left: 20px;
    
} */
.brand-slider .slick-prev {
    left: -60px;
    color: black;
}

.brand-sec {
    max-width: 1040px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.slick-next:before,
.slick-prev:before {
    font-size: 30px !important;
    line-height: 1;
    opacity: .75;
    color: #F848C4 !important;
    display: none;
    /* background-color: none !important; */
}
.slick-next:before,
.slick-prev:before {
    display: none;
}
.apple {
    margin-right: 30px;
}
.stay-loop {
    padding-bottom: 60px;
}

@media only screen and (min-width:200px) and (max-width:991px) {
  .banner-section{
    display: none !important;
  }
  .main-two{
    height: 500px;
  }
  .main-two::before{
    height: 500px;
  }
  .video-background {
    height: 500px;
  }
  
  .text{
    margin-left: 0px !important;
}
}
@media only screen and (min-width:200px) and (max-width:360px) {
.head{
    line-height: normal !important;
    margin-top: 20px !important;
}
.main-two .text .head {
    font-size: 36px;
    padding-left: 10px;
    padding-right: 10px;
}
form .low {
    font-size: 12px !important;
}
.main-two .text .head-p {
    line-height: 20px !important;
    text-align: center !important;
    padding-left: 10px;
    padding-right: 10px;
}
.stay-loop {
    padding-bottom: 0px !important;
}
.our-client .apple{
    padding: 0px !important;
}
.contact-form button {
    padding: 10px !important;
    margin-top: 27px;
}
#contact:before{
    height: 26px !important;
}
.apple {
    margin-right: 0px !important;
}
.lower{
    margin-right: 0px !important;
}
#features:before{
    display: none;
}
.baten {
    display: flex;
    justify-content: center !important;
}
/* .main-two .container{
    margin-top: 0px !important;
} */
.text {
    margin-left: 0px !important;
}
}
@media only screen and (min-width:480px) and (max-width:640px) {

    .head{
        line-height: normal;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 39px !important;
    }
    .main-two .container{
        margin-top: 90px !important;
    }
    .main-two .text .head-p{
        margin-top: 15px;
    }
    #features:before{
        height: 35px  !important;
    }
    #contact:before {
        height: 40px !important;
    }
    .stay-loop{
        padding-bottom: 10px !important;
    }
}
@media only screen and (min-width:577px) and (max-width:768px) {
    /* .text{
        margin-left: 0px !important;
    } */
    /* .head{
        line-height: normal;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 29px !important;
    } */
    /* .main-two .container{
        margin-top: 40px !important;
    } */
    #features:before{
        height: 35px  !important;
    }
    #contact:before {
        height: 40px !important;
    }
    .stay-loop{
        padding-bottom: 10px !important;
    }
}
@media only screen and (min-width:768px) and (max-width:991px) {
    .main-two .container{
        margin-top: 100px !important;
    }
    .main-two .text .head{
        font-size: 45px !important;
    }
    .main-two .text .head-p {
        line-height: 39px !important;
        font-size: 24px !important;
    }
}
@media only screen and (min-width:991px) and (max-width:992px) {
.main {
    width: 391px;
    height: 391px;
    position: relative;
    margin-top: 24px;
}
}
/************background-img-sec start********************/
.new-background .new-txt h1 {
    font-size: 40px;
    font-weight: 500;
    color: #06284B;

}

.new-background .new-para p {
    font-size: 25px;
    font-weight: 400;
    color: #000000;
    align-items: center;

}

.new-background form .btn-2 {
    background-color: #F648C3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: 1px solid #F648C3;
    color: white;

}

.new-background form .btn-2:hover {
    color: #F648C3;
    background-color: white;
    border: 0.5px solid #F648C3;
}

/************background-img-sec end********************/


/* below server sec start */
.below-service-sec {
    background: linear-gradient(90deg, #ffefef, #f9f9f9);

}

.textes {
    justify-content: center;
    display: flex;
}

.below-service-sec .textes h1 {
    color: #666666;
    border-bottom: 4px solid #F648C3;

}

.below-service-sec .headings h4 {
    font-size: 28px;
    font-weight: 600;
    color: #000000;
}

.below-service-sec .parag p {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

/* below server sec end */


/*************our client sec start****************/
.our-client h1 {
    font-size: 50px;
    font-weight: 400;
    color: #000000;
}

.our-client h1 span {
    font-size: 50px;
    font-weight: 400;
    color: #F748C4;
}

.our-client p {
    font-size: 25px;
    font-weight: 400;
    color: #000000;
    padding-top: 15px;
}

.our-client .apple {
    background-color: #000000;
    width: auto;
    height: auto;
    padding-left: 10px;
    padding-top: 10px;
    border: 2.43px solid #A6A6A6;
    border-radius: 14px;
}

.our-client .apple .app-txt p {
    padding: 0;
    font-size: 10px;
    font-weight: 400;
    color: #FFFFFF;
}

.our-client .apple .app-txt p span {
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
}

.our-client .google {
    background-color: #000000;
    width: auto;
    height: auto;
    padding-left: 10px;
    padding-top: 10px;
    border: 2.43px solid #A6A6A6;
    border-radius: 14px;
}

.our-client .google .app-txt p {
    padding: 0;
    font-size: 10px;
    font-weight: 400;
    color: #FFFFFF;
}

.our-client .google .app-txt p span {
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
}


/*************our client sec end****************/
/**************stay loop sec start *****************/
.stay-loop {
    background-image: url("../images/pink-back.png");
}

.stay-loop .subscription .stay {
    font-size: 40px;
    font-weight: 400;
    color: #06284B;

}

.stay-loop .subscription .sub {
    font-size: 25px;
    font-weight: 400;
    line-height: 30px;
    color: #000000;
}

.stay-loop .newslwtter .btn-2 {

    background-color: #F648C3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: 1px solid #F648C3;
    color: white;

}

.stay-loop .newslwtter .btn-2:hover {
    color: #F648C3;
    background-color: white;
    border: 0.5px solid #F648C3;
}

.newslwtter form input::placeholder {
    color: #545454;
    font-size: 15px;
    font-weight: 400;
}

.newslwtter form input:hover {
    border: 2px solid #F848C4;
}


/**************stay loop sec end *****************/

/************ footer-sec start ****************/
.footer-sec {
    background-color: #000000;
}

.menu-tag ul li a {
    text-decoration: none;
    color: white;

}

.menu-tag ul li {
    list-style: none;
}

.footer-sec.line {
    border-top: 0.8px solid #D2D2D2;
}

.footer-sec .menu-tag {
    line-height: 29px;
    font-size: 16px;
    font-weight: 400;
}
.footer-sec .menu-tag ul{
    padding-left: 0;
}

.footer-sec .menu-tag ul li a {
    /* padding-left: 0; */
    transition: all 0.3s ease;
}

.footer-sec .menu-tag ul li a:hover {
    color: #F848C4;
    padding-left: 10px;
}

.footer-sec.text-last {
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;

}

.contact-us .conect {
    font-size: 17px;
    font-weight: 400;
    position: relative;
}

.contact-us .conect::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: #F848C4;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}

.contact-us p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;

}

.footer-sec .below-footer {
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
}

.icon a {
    text-decoration: none;
    padding: 10px;
    background-color: white;
    margin-right: 10px;
    border-radius: 50%;
}

.icon a i {
    font-size: 20px;
    color: #000000;
    opacity: 0.9;
}

.sub-icon a:hover {
    background-color: #000000;
    transition: 0.5s;
}

.icon a:hover i {
    color: #F848C4;
    transition: 0.5s;
}

/* .quick-links {
    padding-left: 2rem !important;
} */

.social-menu {
    display: flex;
}

.text-icon ul {
    padding-left: 0 !important;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

.social-btn {
    list-style: none;
    width: 48px;
    height: 48px;
    background: #fff;
    margin: 15px;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 10px -5px rgb(255, 255, 255, 0.1);
    transition: all 0.3s;
    z-index: 10px;
}

.social-btn a {
    text-decoration: none;
    color: #fff;
}

.social-btn:hover a {
    color: #fff;
}

.social-menu .social-btn::before {
    content: attr(tooltip);
    position: absolute;
    top: 0;
    font-size: 0.9em;
    font-weight: bold;
    z-index: -1;
    opacity: 0;
    pointer-events: auto;
    background: #fff;
    padding: 10px;
    color: #000;
    letter-spacing: 1px;
    transition: all 0.3s ease-out;
}

.social-menu .social-btn::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 0;
    opacity: 0;
    background: #fff;
    transform: rotate(45deg);
    left: 20%;
    z-index: -2;
    transition:
        all 0.3s ease-out;
}

.social-menu .social-btn:hover::before {
    top: -45px;
    opacity: 1;
}

.social-btn:hover::after {
    top: -12px;
    opacity: 1;
}

.facebook a {
    color: #3b5999;
}

.facebook:hover,
.facebook:hover .social-btn:before,
.facebook:hover .social-btn:after {
    background: #3b5999;
}

.instagram a {
    color: #962fbf;
}

.instagram:hover,
.instagram:hover .social-btn:before,
.instagram:hover .social-btn:after {
    background: #962fbf;
}

.pinterest a {
    color: #c8232c;
}

.pinterest:hover,
.pinterest:hover .social-btn:before,
.pinterest:hover .social-btn:after {
    background: #c8232c;
}

.linkedin a {
    color: #0072b1;
}

.linkedin:hover,
.linkedin:hover .social-btn:before,
.linkedin:hover .social-btn:after {
    background: #0072b1;
}



.pos-r {
    position: relative;
}

.section-title {
    margin-bottom: 50px;
    position: relative;
}

.section-title p {
    font-size: 16px;
}

.title-effect {
    width: 50px;
    height: 50px;
    top: 0;
    position: absolute;
    left: 0;
    opacity: 0.5;
    animation: rotation 12.8s steps(1) 0s infinite;
}

.text-center .title-effect {
    left: 40%;
    margin-left: -25px;
}

.text-center .section-title h6 {
    padding: 15px 0;
}

/* .title-effect .bar {background: #2575fc;} */
.title-effect .bar-top {
    width: 100%;
    height: 7px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left top;
    transform: scale(0, 1);
    animation: bar-top 3.2s linear 0s infinite;
}

.title-effect .bar-right {
    width: 7px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: left top;
    transform: scale(1, 0);
    animation: bar-right 3.2s linear 0s infinite;
}

.title-effect .bar-bottom {
    width: 100%;
    height: 7px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    animation: bar-bottom 3.2s linear 0s infinite;
}

.title-effect .bar-left {
    width: 7px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: left bottom;
    transform: scale(1, 0);
    animation: bar-left 3.2s linear 0s infinite;
}

.title {
    position: relative;
    color: #1c1d3e;
    margin-bottom: 0;
}

.section-title h2 {
    margin-bottom: 15px;
}

/* ------------------------
    How It Work
------------------------*/
.work-process {
    position: relative;
    margin-bottom: 20px;
}

.step-num {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 12px 20px 0 rgba(255, 212, 239, 1);
    color: #ff34bd;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    right: 0;
    line-height: 55px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50px;
}

.theme-bg .work-process h4,
.theme-bg .work-process p {
    color: #ffffff;
}

.step-icon {
    background: #ffffff;
    width: 140px;
    height: 140px;
    position: relative;
    border: 3px solid #fafaff;
    border-radius: 50%;
    line-height: 140px;
    font-size: 40px;
    text-align: center;
    color: #1c1d3e;
}

.step-icon span {
    position: relative;
}

.step-icon span i {
    color: #ff34bd;
}

.step-icon span::after,
.step-icon span::before {
    border-radius: 50%;
    content: "";
    height: 40px;
    position: absolute;
    width: 40px;
    z-index: -1;
}

.step-icon span::after {
    background: #cdf3f6;
    height: 25px;
    left: -10px;
    top: 5px;
    width: 25px;
}

.step-icon span::before {
    background: #d4f8e6;
    bottom: 0;
    right: -10px;
}

.dark-bg .step-icon {
    color: rgba(255, 255, 255, 0.9);
    background: none;
}

.dark-bg .step-desc h4 {
    color: #2575fc;
}

.dark-bg .step-icon {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-bg .step-desc p {
    color: rgba(255, 255, 255, 0.7);
}

.step-num-box {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.work-process .box-loader {
    position: absolute;
    top: 30%;
    right: -15%;
    left: inherit;
}

.work-process.style-2 {
    padding: 0;
    display: flex;
    align-items: center;
}

.work-process.style-2:before {
    display: none;
}

.work-process.style-2 .step-num-box {
    margin-bottom: 0;
    margin-right: 30px;
}

.work-process.style-3 {
    padding: 70px 30px 0;
}

.work-process.style-3 .step-num {
    background: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.1);
    font-size: 120px;
    height: auto;
    left: 50%;
    line-height: 120px;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: auto;
}

#svg-container {
    position: absolute;
    width: 100%;
    left: 52%;
    z-index: -1;
    transform: translateX(-50%);
    width: 75%;
}

#svgC {
    margin: 0 auto;
    width: 100%;
}


/* ------------------------
    box-loader
------------------------*/
.box-loader {
    border-radius: 100%;
    margin: 0 auto;
    position: absolute;
    top: 15px;
    left: 15px;
}

.box-loader span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #ff34bd;
    margin: 0 5px;
    opacity: 0;
}

.box-loader span:nth-child(1) {
    animation: opacitychange 1s ease-in-out infinite;
}

.box-loader span:nth-child(2) {
    animation: opacitychange 1s ease-in-out 0.33s infinite;
}

.box-loader span:nth-child(3) {
    animation: opacitychange 1s ease-in-out 0.66s infinite;
}


/*--rotation--*/

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bar-top {
    0% {
        transform: scale(0, 1);
    }

    12.5% {
        transform: scale(1, 1);
    }

    87.5% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(0, 1);
    }
}

@keyframes bar-right {
    0% {
        transform: scale(1, 0);
    }

    12.5% {
        transform: scale(1, 0);
    }

    25% {
        transform: scale(1, 1);
    }

    75% {
        transform: scale(1, 1);
    }

    87.5% {
        transform: scale(1, 0);
    }

    100% {
        transform: scale(1, 0);
    }
}

@keyframes bar-bottom {
    0% {
        transform: scale(0, 1);
    }

    25% {
        transform: scale(0, 1);
    }

    37.5% {
        transform: scale(1, 1);
    }

    62.5% {
        transform: scale(1, 1);
    }

    75% {
        transform: scale(0, 1);
    }

    100% {
        transform: scale(0, 1);
    }
}

@keyframes bar-left {
    0% {
        transform: scale(1, 0);
    }

    37.5% {
        transform: scale(1, 0);
    }

    50% {
        transform: scale(1, 1);
    }

    62.5% {
        transform: scale(1, 0);
    }

    100% {
        transform: scale(1, 0);
    }
}

/*--opacitychange--*/

@keyframes opacitychange {

    0%,
    100% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }
}

/* responsive */
@media (max-width: 1200px) {
    #svg-container {
        width: 85%;
    }
}

@media (max-width: 992px) {
    .md-mt-5 {
        margin-top: 50px !important;
    }

    /*Step*/
    .work-process .box-loader {
        display: none;
    }

    .step-desc p {
        max-width: 300px;
        margin: 0 auto;
    }

    #svg-container {
        width: 100%;
        transform: rotate(90deg);
        left: 0;
        top: 50%;
    }
}

/************ footer-sec end ****************/


/* media query */
@media (max-width: 1024px) {
    .main-two .text .head {
        font-size: 49px;
    }

    .srvice .img-one img {
        height: 279px;
    }

    .below-service-sec .headings h4 {
        font-size: 21px;

    }

    .stay-loop .subscription .sub {
        font-size: 22px;
    }

    .below-service-sec .parag p {
        font-size: 14px
    }

    .brand-slider .slick-prev {
        left: 0px;
    }

    .items a {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}


@media (max-width: 992px) {
    .main-two .text .head {
        font-size: 39px;
        line-height: 53px;
        margin-top: 30px !important;
    }

    .banner-img img {
        height: 411px;
    }

    .our-client h1 span {
        font-size: 40px;
    }

    .our-client h1 {
        font-size: 40px;
    }

    .our-client p {
        font-size: 20px;
        padding-top: 20px;
    }

    .brand-slider .slick-prev {
        left: 12px;
    }

    .slick-next,
    .slick-prev {
        width: 59px;
    }

}

@media (max-width: 768px) {
    .main-two .text .head {
        font-size: 35px;
        line-height: 47px;
    }

    .main-two .text .head-p {
        line-height: 27px;
        font-size: 16px;
        padding: 20px;
    }

    /* .our-services-sec .txt-services h1 {
        font-size: 38px;
    } */
    form .btn-1 {
        padding: 4px 14px 10px 14px;
    }

    form .btn-2 {
        padding: 4px 14px 10px 14px;
    }

    .srvice .img-one img {
        height: 193px;
    }

    .srvice p {
        font-size: 18px;
    }

    .below-service-sec .headings h4 {
        font-size: 18px;
    }

    .below-service-sec .parag p {
        font-size: 14px;
    }

    .new-background .new-txt h1 {
        font-size: 38px;
    }

    .below-service-sec .textes h2 {
        font-size: 40px;
    }

    .stay-loop .subscription .stay {
        font-size: 32px;
    }

    .stay-loop .subscription .sub {
        font-size: 15px;
    }

    .slick-next {
        right: 11px !important;
        top: 37px !important;
    }

    .items a {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .main-two .text .head {
        font-size: 32px;
        line-height: 50px;
        text-align: center;
    }

    .main-two .text .head-p {
        text-align: center;
    }

    .baten {
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
    }

    /* .our-services-sec .txt-services h1 {
        font-size: 31px;
    } */
    .srvice .img-one img {
        height: 226px;
    }

    .srvice .img-one {
        text-align: center;
    }

    .below-service-sec .headings h4 {
        text-align: center;
    }

    .below-service-sec .parag p {
        text-align: center;
    }

    .new-para {
        font-size: 14px;
    }

    .share {
        text-align: center;
    }



    .app-logo-store {
        justify-content: center;
    }

    .our-client .apple {
        padding: 10px 30px 10px 30px;
    }

    .create-img {
        padding-top: 20px;
    }

    .subscription {
        text-align: center;
    }

    .form-fill {
        padding-top: 0px !important;
    }

    .menu-tag ul {
        padding-left: 0px;
        padding-bottom: 10px;
    }

    .items a {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .items a {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .slick-next {
        right: 9px !important;
        top: 36px !important;
    }

    .slick-prev {
        left: 0px !important;
        /* top: 36px !important; */
    }

    .items a {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 360px) {
    /* .main-two .text .head {
        font-size: 32px;
        line-height: 41px;
    }

    .main-two .text .head-p {
        line-height: 21px;
    } */

    form .btn-2 {
        padding: 4px 11px 10px 11px;
    }

    .brand-txt h3 {
        font-size: 20px;
    }

    .new-background .new-txt h1 {
        font-size: 26px;
    }

    .new-para {
        font-size: 16px;
    }
}

@media (max-width: 320px) {
    /* .main-two .text .head {
        font-size: 21px;
    } */

    form .low {
        padding: 7px 20px 7px 20px;
        font-size: 10px;
    }

    .items a {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .slick-prev {
        left: -1px !important;
        top: 33px !important;
        z-index: 9999999;
    }

    .our-services-sec .txt-services h1 {
        font-size: 20px;
    }

    .below-service-sec .textes h2 {
        font-size: 30px;
    }
}


/*********************profile css***************************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.line {
    height: 100%;
    width: 2px;
}

.upper-section.apple p {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
}

.large-form {
    background: #D958A108;
}

.image-man {
    background-image: url(../images/profile-cover.png);
    border-radius: 4px 4px 0px 0px;
    height: 140px;
    width: 100%;
    position: relative;
    background-size: 100% 100%;
}

.new-img img {
    position: absolute;
    right: 46%;
    top: 251px;
}

.new-img h2 {
    padding-top: 56px;
}

.new-img p {
    font-size: 13px;
    font-weight: 400;
    color: #00000099;
}

.image-man-btn {
    padding-top: 10px;
    padding-right: 10px;
}

.image-man-btn a {
    text-decoration: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0px 4px 10px 0px #00000059;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
}

.image-man-btn a:hover {
    color: black;
}

.form-part h1 {
    color: #16151E;
    font-size: 23px;
    font-weight: 700;
}

.profile-about {
    background-color: white;
    /* padding: 10px 20px 10px 20px; */

}

.profile-btn {
    background: #D958A1;
    color: white;
    padding: 6px 25px 6px 25px;
    border: 1px solid #D958A1;
    border-radius: 3px;
    margin-right: 20px;
}

.profile-btn2 {
    background: white !important;
    color: #D958A1 !important;
    padding: 6px 25px 6px 25px !important;
    border: 1px solid #D958A1 !important;
    border-radius: 3px !important;
    box-shadow: 0px 2px 10px 0px #F848C433 !important;

}

/* .save-btn{
    margin-top: 30px;
    padding-bottom: 30px;
}
.save-btn a{
    color: white;
    background-color: #D958A1;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    padding:5px 13px 5px 13px ;
    border-radius: 3px;
   
}
.save-btn a:hover{
    color: white;
} */
.profile-about form label {
    font-size: 14px;
    font-weight: 700;
    /* color: #575757; */
}

select.option-placeholder {
    color: #888;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.profile-about form input::placeholder {
    color: #A7A7A7 !important;
    font-size: 14px !important;
    font-weight: 400 !important;

}

.form-control {
    font-size: 14px !important;
    /* font-weight: 700 !important; */
    color: #A7A7A7;
}

.form-select {
    font-size: 14px !important;
    /* font-weight: 700 !important; */
    color: #A7A7A7;
}


/**********************notification css***************************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}


.long-text {
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
    overflow-y: scroll;
    max-height: 64vh;
    padding: 20px 10px 20px 10px;
}

.content-text h1 {
    font-size: 24px;
    font-weight: 700;
    color: #262626;
}

.content-text a {
    text-decoration: none;
    color: #00000099;
    font-size: 13px;
    font-weight: 600;
}

.bigger-image {
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

.bigger-image h1 {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
}

.bigger-image p {
    color: #00000099;
    font-size: 13px;
    font-weight: 400;
}

.longe-text h1 {
    font-size: 20px;
    font-weight: 700;
    color: #16151E;
}

.longe-text p {
    font-size: 12px;
    font-weight: 400;
    color: #00000099;
}

.view a {
    color: #F648C3;
}

/* .longe-image img{
    height: 511px;
    width: 100%;
  } */
.all-button {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: start;
}

.all-button a {
    text-decoration: none;
}

.bigger-image .input-group input::placeholder {
    color: #00000099;
    font-size: 12px;
    font-weight: 400;
}

.bigger-image .input-group input {
    border: 0.5px solid #F848C480;
    box-shadow: 0px 4px 35px 0px #F848C433;
}

.all-button .button {
    color: #F648C3;
    font-size: 14px;
    font-weight: 600;
    border: 0.5px solid #F648C3;
    border-radius: 4px;
    padding: 4px 16px 4px 16px;
    background-color: white;
    margin-left: 10px;
}

.all-button .button-one {
    color: white;
    font-size: 14px;
    font-weight: 600;
    border: 0.5px solid #F648C3;
    border-radius: 4px;
    padding: 4px 16px 4px 16px;
    background-color: #F648C3;
    margin-left: 10px;
}

.listing-notify .listing-text h2 {
    font-size: 16px;
    font-weight: 600;
    color: #262626;
}

.listing-notify .listing-text h2 span {
    color: #8E8E8E;
    font-size: 12px;
    font-weight: 400;
}

.listing-notify img {
    height: 33px;
}

.listing-notify .listing-text p {
    color: #00000099;
    font-size: 12px;
    font-weight: 400;
}

.listing-notify {
    display: flex;
    cursor: pointer !important;
}

.listing-notify.active {
    background: #F648C312;
    padding: 30px;
}

.small-img {
    display: flex;
}

.small-img img {
    height: 80px !important;
}

.small-ear img {
    height: 76px;
    width: 110px;

}

.cut-btn {
    width: 8px !important;
    height: 8px !important;
    padding: 2px !important;
    /* padding: 0.2em 0.2em; */
    color: #000;
    border: none;
    border-radius: 50px !important;

}

.filter-noti {
    display: flex;
    gap: 20px;
}

@media only screen and (min-width:200px) and (max-width:567px) {
    .filter-noti {
        justify-content: flex-end;
    }

    .noti {
        margin-bottom: 3px !important;
    }
}

.noti-list {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 16px #ebebeb;
}

.settings-container {
    background-color: white;
    border-radius: 0.25rem;
    display: flex;
    /* min-height: 460px; */
    overflow: hidden;
    box-shadow: 0px 2px 12px -4px rgba(0, 0, 0, 0.1);
}

.noti-content-heading {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    color: #F648C3;
}

.empty-state {
    /* width: 750px; */
    margin: 40px auto;
    border-radius: 4px;
}

.empty-state-content {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.empty-state-icon {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    border-radius: 200px;
    justify-content: center;
}

.empty-state-icon img {
    width: 170px;
}

.empty-state-message {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 0.85rem;
}

.empty-state-help {
    color: #a2a5b9;
    font-size: 0.875rem;
}

.circle-next {
    padding: 0 20px;
}

.date-activity {
    background-color: #ff34be;
    align-items: center;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
}

.date-activity input {
    border-radius: 10px;
    padding: 5px;
    margin-left: 5px;
    border: none;
}

@media only screen and (min-width:200px) and (max-width:567px) {
    .time-calendar {
        display: flex;
        justify-content: center;
    }

}

.activity-body {
    padding: 20px;
    border-radius: 5px;
    background-color: #ffecf9;
    box-shadow: 0px 26px 20px #ffebf8;
    margin-top: 16px;
}

.activity-social {
    display: flex;
    text-align: center;
    margin-top: 40px;
}

.activity-social ul {
    margin: 0;
    padding: 0;
}

.activity-social ul li {
    position: relative;
    width: 240px;
    height: 150px;
    border-radius: 10px;
    list-style: none;
    display: inline-block;
    margin: 10px;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    transition: .5s;
    overflow: hidden;
}

.activity-social ul li:hover {
    padding: 15px 20px;
}

.activity-social ul li span {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    line-height: 250px;
    transition: 1s;
    background: rgba(61, 61, 61, 0.4);
}

.activity-social ul li:hover span {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
}

.activity-social ul li span .fa-brands {
    color: #fff;
    font-size: 50px;
    margin-top: 24px;
    padding: 15px;
    transition: 1s;
}

.activity-social ul li:hover span .fa-brands {
    font-size: 20px;
    margin-top: 0;
}

.activity-social ul li h1 {
    font-size: 20px;
    margin: 5px 0;
}

.activity-social ul li p {
    font-size: 24px;
    font-weight: 600;
    white-space: initial;
}




.activity-social ul li:nth-child(1) {
    background: #1877F2;
}


.activity-social ul li:nth-child(2) {
    background: #25D366;
}
.activity-social ul li:nth-child(3) {
    background: #000000;
}
.activity-social ul li:nth-child(4) {
    background: #0088CC;
}
.activity-social ul li:nth-child(5) {
    background: #000000;
}


/* .activity-social ul li:nth-child(5) {
    background: linear-gradient(to right,
            #833ab4, #fd1d1d, #fcb045)
} */
.activity-social ul li:nth-child(6) {
    background: #0078FF;
}
.activity-social ul li:nth-child(7) {
    background: #FFFC00;
}


.credit {
    color: #A2A5B9;
    font-size: .75rem;
    text-align: center;

    a {
        color: #444;
    }
}

.settings-container .left-column {
    width: 30%;
    height: fit-content;
}

.settings-container .left-column ul {
    margin: 0;
    height: 100%;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0;
}

.settings-container .left-column ul li {
    flex: auto;
    padding: 20px;
    cursor: pointer;
    color: #363B6D;
    transition: all 0.2s ease-out;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin: 0px 10px 10px 0px;
}

.settings-container .left-column ul li:hover {
    background-color: #F648C3;
    color: white;
}

.settings-container .left-column ul li.active {
    background-color: #F648C3;
    color: white;
}

.settings-container .settings-tab {
    width: 70%;
    padding: 20px;
    border-left: 3px solid #F648C3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* ********************help and support FAQ *********************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;


}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.form-check-input {
    box-shadow: none !important;
}

.upper-section.apple p {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    box-shadow: 0px 4px 10px 0px #00000040;
    background: #D958A108;
    padding: 30px 35px 10px 35px;
    margin-top: 20px;
}

.form-switch .form-check-input:focus {
    background-color: none !important;
}

.tabs-main-container {
    background-color: #D958A108;
}

.notification-icon {
    color: #F648C3 !important;
}

.main-container h1 {
    font-size: 30px;
    font-weight: 700;
    color: #F848C4;
}

.main-container form label {
    font-size: 13px;
    font-weight: 700;
    /* color: #575757; */
}

form .form-check .form-text span {
    color: #F648C3;
    font-size: 12px;
    font-weight: 400;
}

form .form-text {
    color: #A7A7A7;
    font-size: 12px;
    font-weight: 400;
}

input::placeholder {
    color: #A7A7A7 !important;
    font-size: 14px !important;
    font-weight: 400 !important;

}

/* .baten a{
    margin-top: 25px;
} */

.box-text {
    height: 100%;
    width: 367px;
    background-color: #D9D9D980;
    display: flex;
    justify-content: center;
    align-items: center;

}

.uploadBtn {
    background-color: #F648C3;
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: #F648C3;
    color: #FFFFFF;
    margin-right: 7px;

}

.uploadBtn:hover {
    background-color: white;
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: #F648C3;
    color: #F648C3;

}

.box-text a {
    color: #000000CC;
    font-size: 31px;
    font-weight: 400;
    border: none !important;
    background-color: transparent !important;
}

.box-text a:hover {
    color: #000000CC;
    font-size: 31px;
    font-weight: 400;
}

form .btn-2 {
    background-color: #F648C3;
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    box-shadow: 0px 5px 15px 0px #F648C333;
    border: #F648C3;
    color: white;

}

form a {
    text-decoration: none;
    color: white;
}


/* form a:hover {
    color:#F648C3;
    background-color: white;
    border: 0.5px solid #F648C3;
} */
form .btn-1 {
    border-radius: 6px;
    background-color: white;
    padding: 10px 24px 10px 24px;
    border: 0.5px solid #F648C3;
    box-shadow: 0px 5px 15px 0px #F648C333;
}

form .btn-1:hover {
    background-color: #F648C3;
    padding: 10px 24px 10px 24px;
    color: white;
    box-shadow: 0px 4px 35px 0px #F848C433;
}

.contact-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form {
    border-radius: 10px;
    width: 45%;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
}

.contact-form h2 {
    margin-bottom: 10px;
    font-size: 28px;
}

.contact-form p {
    font-size: 16px;
    color: #666;
}

.checkbox {
    width: auto !important;
    margin: 6px 8px 18px 0 !important;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form textarea {
    height: 100px;
}

.contact-form button {
    background-color: #ff33cc;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #ff00aa;
}

.contact-info {
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
    width: 45%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-info p {
    font-size: 16px;
    color: #666;
}

.contact-info .map {
    border-radius: 10px;
    height: 260px;
}

.contact-info .info {
    margin-top: 20px;
    line-height: 1.6;
}

.contact-info .info span {
    display: block;
    margin: 5px 0;
}

.contact-info .info span i {
    margin-right: 10px;
}

.contact-info .social-icons {
    margin-top: 20px;
}

.contact-info .social-icons img {
    width: 24px;
    margin-right: 10px;
}

.large-form li a.active {
    color: #F848C4;
    font-size: 18px;
    font-weight: 700;
}

.custom-accordion-button {
    color: #303A42 !important;
    /* Text color for the accordion button */
    border: none;
    /* Remove default border */
    font-size: 18px;
    font-weight: 700;
    justify-content: flex-start !important;

}

.accordion-body {
    background-color: #D958A108 !important;
    font-style: italic;
    font-size: 14px;
    font-weight: 300;
}

.custom-accordion-button:not(.collapsed) {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.custom-accordion-button:focus {
    box-shadow: none !important;
    border: none;
}

.accordion-button:not(.collapsed) {
    background-color: #fff !important;
}

/* .custom-accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem !important;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url(/assets/images/plus.png) !important;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.custom-accordion-button:not(.collapsed)::after {
   background-image: url(/assets/images/minus.png) !important;
    transform: rotate(-180deg) !important;
} */
.help-tabs {
    display: flex;
    justify-content: center;
    align-items: center;

}

.custom-nav-help {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.custom-nav-tabs-help {
    background: #F9FAFB;
    border: 1.61px solid #E5E7EB !important;
    border-radius: 50px;
    width: 341px;
    height: 50px;

}

.custom-nav-help .custom-nav-link-help.active {
    border: none !important;
    background-color: #F648C3 !important;
    border-radius: 50px !important;
    transition: all 0.2s !important;
    color: white !important;
    width: 142px;
    height: 42px;
}

.custom-nav-help .custom-nav-link-help {
    border: none !important;
    color: #A7A7A7;
}

.custom-nav-help .custom-nav-link-help:hover {
    color: #A7A7A7;
}

.custom-nav-link-help::after {
    display: none;
}

/************* help and center****************/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    /* box-shadow: 0px 4px 10px 0px #00000040; */
    background: #D958A108;
    padding: 30px 35px 10px 35px;
    margin-top: 20px;
}

.large-form .form-body .first label {
    font-size: 14px;
    font-weight: 700;
    color: #575757;
}

.large-form .form-body .form-group label {
    font-size: 14px;
    font-weight: 700;
    /* color: #575757; */
    margin-bottom: 7px;
}

.large-form h1 {
    font-size: 30px;
    font-weight: 700;
    color: #F848C4;
}

.large-form li a.active {
    color: #F848C4;
    font-size: 18px;
    font-weight: 700;
}

form .form-text {
    color: #A7A7A7;
    font-size: 12px;
    font-weight: 400;
}

.first input::placeholder {
    color: #A7A7A7 !important;
    font-size: 14px !important;
    font-weight: 400 !important;

}


.upper-section.apple p {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
}

.form-group textarea::placeholder {
    color: #A7A7A7 !important;
    font-size: 14px !important;
    font-weight: 400 !important;

}

.form-body .submit-form {
    color: white;
    background-color: #F648C3;
    margin-top: 60px;
    border-radius: 8px;
    padding: 12px 100px 12px 100px;
    border: #F648C3;
}

/* *******************term and condition*****************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    border-right: 1.25px solid #00000040;
    height: 100;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    /* box-shadow: 0px 4px 10px 0px #00000040; */
    background: #D958A108;
    padding: 30px 35px 10px 35px;
}

.large-form h1 {
    font-size: 30px;
    font-weight: 700;
    color: #F848C4;
}

.new-page {
    font-style: italic;
    font-size: 14px;
    font-weight: 300;
}

.new-page li {
    padding-right: 25px;
}

.new-page li a.active {
    color: #F848C4;
    font-size: 18px;
    font-weight: 700;
}

.new-page li a img.active {
    color: #F848C4 !important;
}

.helpsupport-back {
    background: #D958A108;
    height: 100%;
    padding-left: 12px;
    padding: 10px;
}


/* ******************setting*************************/
.nav-butn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.custom-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.custom-nav-tabs {
    background: #F9FAFB;
    border: 1.61px solid #E5E7EB !important;
    border-radius: 50px;
    width: 278px;
    height: 50px;

}

.custom-nav .custom-nav-link.active {
    border: none !important;
    background-color: #F648C3 !important;
    border-radius: 50px !important;
    transition: all 0.2s !important;
    color: white !important;
    width: 142px;
    height: 42px;
}

.custom-nav .custom-nav-link {
    border: none !important;
    color: #A7A7A7;
}

.custom-nav .custom-nav-link:hover {
    color: #A7A7A7;
}

.custom-nav-link::after {
    display: none;
}

.pink-box {
    background-color: #F648C3;
    height: 35px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 15px;
}

.setting-img h4 {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

.setting-img p {
    font-size: 10px;
    font-weight: 400;
    color: #000000;
}

.setting-img span {
    font-size: 10px;
    font-weight: 400;
    color: #1A8CFF;
}

.pink-box h5 {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
}

.view-profile form label {
    font-size: 14px;
    font-weight: 500;
    color: #4E4E4E;
}

.profilesave {
    background-color: #F648C3;
    border: 1px solid #F648C3;
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    padding: 7px 16px 9px 16px;
}

.cancel-save {
    margin-top: 20px;
}

.cancel-save a {
    text-decoration: none;
}

.profilesave:hover {
    color: white;
}

.profilecancel:hover {
    color: #F648C3;
}

.profilecancel {
    background-color: white;
    border: 1px solid #F648C3;
    color: #F648C3;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    padding: 7px 40px 9px 40px;
    box-shadow: 0px 4px 35px 0px #F848C433;
    margin-left: 25px;

}

/* ******************notification-setting*********** */
.switch-label {
    margin-bottom: 0;
}

/* Toggle Switch Styles */
.form-switch .form-check-input {
    width: 40px;
    height: 20px;
    background-color: gray;
}

.form-switch .form-check-input:checked {
    background-color: #ff4eda;
    border-color: #ff4eda;
}

/* Align the switch and text */
.switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.switch-item span {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
}


/* .alltext p, .all text span{
    font-size: 14px;
    font-weight: 400;
}
.alltext p span{
    padding-left: 100px;
}
.alltext .email{
    padding-left:110px ;
} */

/* logout modal css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logout img {
    width: 148px;
}

.logout {
    border-bottom: none !important;
}

.modal-footer {
    border-top: none !important;
}

.modal-text-logout h2 {
    font-size: 32px;
    font-weight: 500;
    color: #000000;
}

.modal-text-logout p {
    font-size: 16px;
    font-weight: 400;
    color: #9B9EA1;
}

.logout-footer .btn-logout {
    color: white !important;
    background-color: #F648C3 !important;
    border: 1px solid #F648C3 !important;
    box-shadow: none !important;
    padding: 10px 48px 10px 48px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.logout-footer a {
    text-decoration: none;
}

.logout-footer .btn-logout:hover {
    color: #F648C3 !important;
    background-color: white !important;
    border: 1px solid #F648C3 !important;
    box-shadow: none !important;

}

.logout-footer .btn1 {
    color: #9B9EA1 !important;
    background-color: white !important;
    border: 1px solid #F648C3 !important;
    /* box-shadow: none !important; */
    box-shadow: 0px 4px 35px 0px #F848C433;
    padding: 10px 48px 10px 48px;
    border-radius: 8px;
    margin-bottom: 20px;

}

.logout-footer .btn1:hover {
    color: white !important;
    background-color: #F648C3 !important;
    border: 1px solid #F648C3 !important;
    box-shadow: none !important;

}

.modal-logout {
    z-index: 99;
}

/* *******************wallet page css**************** */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.upper-section.apple p {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    box-shadow: 0px 4px 10px 0px #00000040;
    background: #D958A108;
    padding: 30px 35px 10px 35px;
    margin-top: 20px;
}

.text-btn h1 {
    font-size: 24px;
    font-weight: 600;
    color: #101017;
}

.text-btn a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    padding: 9px 10px 9px 10px;
    background-color: #F648C3;
    border-radius: 6px;
}

.text-btn a:hover {
    color: white;
}

/* .balance-btn{
    display: flex;
    justify-content: center;
} */
.mistake {
    font-size: 16px;
    color: #F848C4;
    font-weight: 500;
}

.rupees-new-box {
    /* margin-top: 20px; */
    background: linear-gradient(145deg, #ffe6fa, #ffd6f7);
    box-shadow: 0 10px 20px rgba(255, 192, 203, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-right: 20px;
    margin-left: 21px;
    height: 100%;
    /* width: 357px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 16px;
}

.rupees-new-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 192, 203, 0.4);

}

.rupees {
    padding-top: 35px;
    padding-bottom: 30px;
}

.withdraw-deposit {
    margin-top: 0px;
    margin-bottom: 30px;
}

.withdraw-deposit a {
    color: white;
    background-color: #F648C3;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.withdraw-deposit a:hover {
    box-shadow: 0 10px 20px rgba(255, 20, 147, 0.4);
    color: #fff;
}

.content-btn a {
    text-decoration: none;
    color: black;
    font-size: 12px;
    font-weight: 400;
    background-color: #EEF3F7;
    border-radius: 4px;
    padding: 8px 12px 6px 12px;
}

.content-btn a:hover {
    color: black;
}

.tabledata h1 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

.tabledata a {
    margin-top: 20px;
    margin-bottom: 25px;
}

.table thead {
    background-color: #dcd6d9;
    border-radius: 5px;
    border: none;
}

thead .main {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

tbody tr,
th {
    font-size: 14px;
    font-weight: 400;
    color: #52575C;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom: none;
}

.amountDeposit {
    background: #F648C3;
    border-radius: 6px;
    border: 1px solid pink;
    color: white;
    padding: 5px 10px 5px 10px;
}

/* .table-responsive{
    overflow-x: hidden !important;
  } */

.pagination {
    align-items: baseline;
    justify-content: center;
}

.table-main th {
    font-size: 16px;
    font-weight: 500;
}
.modal {
    overflow-x: hidden;
    overflow-y: auto;
  }


@media only screen and (min-width:200px) and (max-width:567px) {
    .mistake {
        font-size: 11px;
        font-weight: 400;
    }

    .text-btn h1 {
        font-size: 20px;
    }
/* 
    #filterDropdown {
        top: 100% !important;
        left: 22% !important ;
    } */
}


/* .slider-feed{
    width: auto !important;
    max-width: 100vw;
    height: 300px;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.list {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    width: max-content;
    transition: 1s;
}
.list img{
    width: 1300px;
    max-width: 100vw;
    height: 100%;
    object-fit: cover;
}
.buttons{
    position: absolute;
    top: 45%;
    left: 5%;
    width: 90%;
    display: flex;
    justify-content: space-between;
}
.buttons button {
    width: 50px;
    height: 50px;
    border-radius: 505;
    background-color: #fff5;
    color: #fff;
    border: none;
    font-family: monospace;
    font-weight: bold;
}
.dots{
    position: absolute;
    bottom: 10px;
    color: #fff;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    transition: 1s;
}
.dots li {
    list-style: none;
    width: 10px;
    height: 10px;
    background-color: #fff;
    margin: 5px;
    border-radius: 20px;
}
.dots li.active {
    width: 30px;
    background-color: #ff34bd;
} */

.slider-feed {
    width: 100%;
    /* Full width */
    max-width: 100vw;
    height: 100%;
    /* Adjust height based on your design */
    max-height: 100vh;
    /* Optional: Full height of the viewport */
    margin: auto;
    position: relative;
    overflow: hidden;
    /* Hide other images */
}

.list {
    display: flex;
    transition: left 0.5s ease;
    /* Smooth transition */
    position: relative;
    width: 100%;
    /* The container will stretch as per the viewport */
}

.item-slider {
    min-width: 100%;
    /* Each item takes the full width of the container */
    height: 100%;
    /* Each item takes full height */
    box-sizing: border-box;
}

.list img,
.list video {
    width: 100%;
    height: 500px;
    object-fit: cover;
    /* Ensure the image/video covers the entire slider box */
}

.buttons {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 2;
    /* Make sure buttons are above the slider items */
}

.buttons button {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    /* Semi-transparent background */
    color: #fff;
    border: none;
    font-family: monospace;
    font-weight: bold;
    cursor: pointer;
}

.dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.dots li {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 1px solid #ff00aa;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dots li.active {

    background-color: #ff34bd;
}


.social-icon {
    position: unset !important;
    gap: 10px;
}

.reply-box {
    padding-bottom: 20px;
    border-bottom: 1px solid #efefef;
}

.card-text-comment {
    font-size: 15px !important;
    color: #666666 !important;
}

/* .view-modal-share{
    top: 10%;
    left: 90%;
    color: #e8e4ee;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 25px;
    background: rgb(113, 5, 156);
    transform: translate(-50%, -50%);
  } */
.popup-share {
    background: rgb(255, 254, 254);
    padding: 25px;
    position: absolute;
    border-radius: 15px;
    top: 50%;
    left: 50%;
    max-width: 380px;
    width: 100%;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%) scale(1.2);
    transition: top 0s 0.2s ease-in-out,
        opacity 0.2s 0s ease-in-out,
        transform 0.2s 0s ease-in-out;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 4s ease infinite;
}

.overlay-share {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
    /* Smooth transition */
    z-index: 2;
    /* Behind popup */
}

.overlay-share.show {
    opacity: 2;
    visibility: visible;
    /* Make overlay visible */
    transition: opacity 0.2s ease;
}

.popup-share.show+.overlay-share {
    opacity: 999999;
    pointer-events: auto;
    /* Allow interaction with the overlay when visible */
}

.no-scroll-share {
    overflow: hidden;
    /* Disable scroll on body */
}

.popup-share.show {
    opacity: 1;
    position: fixed;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: top 0s 0s ease-in-out,
        opacity 0.2s 0s ease-in-out,
        transform 0.2s 0s ease-in-out;

}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.popup-share :is(header, .icons-share, .field-share) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
}

.popup-share header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ebedf9;
}

header span {
    font-size: 21px;
    font-weight: 600;
    color: #fff;
}

header .close-share,
.icons-share a {
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

header .close-share {
    color: #878787;
    font-size: 17px;
    background: #ffffff;
    height: 33px;
    width: 33px;
    cursor: pointer;
}

header .close-share:hover {
    background: #ebedf9;
}

.popup-share .content-share {
    margin: 20px 0;
}

.popup-share .icons-share {
    margin: 15px 0 20px 0;
}

.content-share p {
    font-size: 16px !important;
    color: #fff !important;
}

.content-share .icons-share a {
    height: 44px;
    width: 50px;
    font-size: 20px;
    text-decoration: none;
    border: 1px solid transparent;
}

.icons-share a i {
    transition: transform 0.3s ease-in-out;
    border: none !important;
}

.icons-share a:nth-child(1) {
    color: #1877F2;
    border-color: #b7d4fb;
    background-color: #fff;
}

.icons-share a:nth-child(1):hover {
    background: #1877F2;
}

.icons-share a:nth-child(2) {
    color: #000;
    border-color: #b6e7fc;
    background-color: #fff;
}

.icons-share a:nth-child(2):hover {
    background: #000;
}

/* .icons-share a:nth-child(3) {
    color: #e1306c;
    border-color: #f5bccf;
    background-color: #fff;
}

.icons-share a:nth-child(3):hover {
    background: #e1306c;
} */

.icons-share a:nth-child(3) {
    color: #25D366;
    border-color: #bef4d2;
    background-color: #fff;
}

.icons-share a:nth-child(3):hover {
    background: #25D366;
}

.icons-share a:nth-child(4) {
    color: #0088CC;
    border-color: #b3e6ff;
    background-color: #fff;
}

.icons-share a:nth-child(4):hover {
    background: #0088CC;
}
.icons-share a:nth-child(5) {
    color: #000000;
    border-color: #b3e6ff;
    background-color: #fff;
}

.icons-share a:nth-child(5):hover {
    background: #000000;
}
.icons-share a:nth-child(6) {
    color: #0078FF;
    border-color: #b3e6ff;
    background-color: #fff;
}

.icons-share a:nth-child(6):hover {
    background: #0078FF;
}
.icons-share a:nth-child(7) {
    color: #0078FF;
    border-color: #b3e6ff;
    background-color: #fff;
}

.icons-share a:nth-child(7):hover {
    background: #0078FF;
}
.icons-share a:nth-child(8) {
    color: #FFFC00;
    border-color: #b3e6ff;
    background-color: #fff;
}

.icons-share a:nth-child(8):hover {
    background: #FFFC00;
}

.icons-share a:hover {
    color: #fff;
    border-color: transparent;
}

.icons-share a:hover i {
    transform: scale(1.2);
}

.content-share .field-share {
    margin: 12px 0 -5px 0;
    height: 45px;
    border-radius: 4px;
    padding: 0 5px;
    border: 1px solid #757171;
    background-color: #fff;
    display: none;
}

.field-share.active {
    border-color: #7d2ae8;
}

.field-share i {
    width: 50px;
    font-size: 18px;
    text-align: center;
}

.field-share.active i {
    color: #7d2ae8;
}

.field-share input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 15px;
}

.field-share button {
    color: #fff;
    padding: 5px 18px;
    background: #ff34bd;
    border: none !important;
    border-radius: 5px !important;
}

.field-share button:hover {
    background: #ff61ca;
}

@media screen and (max-width: 768px) {
    /* .slider {
        height: 400px;
    } */

}

/* *********************influencer winning page css ***************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons-second ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}

.icons-second ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;

}

.upper-section.apple p {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #262626;
}

.icons-second ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons-second ul {
    padding-left: 0px;
}

.icons-second {
    margin-top: 10px !important;
}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    /* box-shadow: 0px 4px 10px 0px #00000040; */
    background: #D958A108;
    padding: 30px 35px 10px 35px;
    margin-top: 20px;
}

.card-winner::after,
.card-winner img {
    border-radius: 50%;
}

.card-winner,
.stats {
    display: flex;
}

.card-winner {
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(45deg, rgb(203 212 255), rgb(254 206 255));
    max-width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    margin: .5rem;
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    gap: 10px;
}

.card-winner.active {
    background: linear-gradient(135deg, #ffd700, #ffc175);
}

.card-winner:hover {
    transform: scale(1.02);
}

.card-winner::before,
.card-winner::after {
    content: '';
    position: absolute;
    z-index: -1;
}

/* .card-winner::before {
  width: 100%;
  height: 100%;
  border: 1px solid #FFF;
  border-radius: 10px;
  top: -.7rem;
  left: -.7rem;
} */
.card-winner::after {
    height: 15rem;
    width: 15rem;
    background-color: #fff;
    top: -10rem;
    right: -7rem;
}

.card-winner img {
    width: 4rem;
    width: 80px;
    height: 80px;
    min-width: 80px;
    object-fit: fill;
    box-shadow: 0 0 0 5px #FFF;
}

.winner-badge {
    position: absolute;
    top: 80px;
    background-color: #ff4500;
    /* Bright orange-red for visibility */
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.winner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.infos {
    margin-left: 1.5rem;
}

.name {
    margin-bottom: 1rem;
}

.name h2 {
    font-size: 1.3rem;
}

.name h4 {
    font-size: .8rem;
    color: #333
}

.text {
    font-size: .9rem;
    margin-bottom: 0;
}

.stats {
    margin-bottom: 1rem;
}

.stats li {
    min-width: 5rem;
}

.stats li h3 {
    font-size: .99rem;
}

.stats li h4 {
    font-size: .75rem;
}

.links button {
    font-family: 'Poppins', sans-serif;
    min-width: 120px;
    padding: .5rem;
    border: 1px solid #222;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all .25s linear;
}

.links .follow,
.links .view:hover {
    background-color: #222;
    color: #FFF;
}

.links .view,
.links .follow:hover {
    background-color: transparent;
    color: #222;
}

ul {
    list-style: none;
}

@media screen and (max-width: 450px) {
    .card {
        display: block;
    }

    .infos {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .links button {
        min-width: 100px;
    }
}

.winner-box {
    width: 100%;
    height: 127px;
    background-color: white;
    margin: 20px 0 20px;
    /* box-shadow: 0px 2px 11px 0px #F848C426; */
    box-shadow: 0px 4px 6px 0px #ffc9ed;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

.winner-new {
    margin-bottom: 30px;
}

.winner-new h1 {
    font-size: 32px;
    font-weight: 600;
    color: #F648C3;
    margin-top: 10px;
    margin-bottom: 20px;
}

.winner-box h4 {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    padding-top: 9px;

}

.winner-box p {
    font-size: 9px;
    font-weight: 400;
    color: #828282;

}

.imagess-img {
    background: #F648C333;
    height: 41px;
    width: 41px;
}

.imagess-img span {
    color: #808080;
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    padding-inline-start: 7px;
}

.date-head {
    margin-right: 10px;
    margin-bottom: 10px;
}

.date-head h1 {
    font-size: 24px;
    font-weight: 600;
    color: #F648C3;
    padding-left: 15px;
}

.date-head input {
    background-color: #F6E4F0;
    border: none;
    border-radius: 4px;
    padding: 4px 12px 4px 12px;
}

/* .bar-img{
    height: 334px;
    width: 100%;
    background-color: white;
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
    padding-top: 10px;
} */
.content-btn a {
    text-decoration: none;
    color: black;
    font-size: 12px;
    font-weight: 400;
    background-color: #F6E4F0;
    border-radius: 4px;
    padding: 8px 15px 8px 15px;
}

.content-btn a:hover {
    color: black;
}

.tabledata-winning h1 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

.date-container form label {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    padding-right: 5px;
}

.tabledata-winning a {
    margin-top: 20px;
    margin-bottom: 25px;
}

.tabledata-winning .table thead {
    background-color: none;
    /* border-radius: 5px; */
    /* border: 1px solid #F848C480; */
    box-shadow: 0px 2px 10px 0px #F848C480;
    border-radius: 9px;
}

.tabledata-winning thead .main {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

.tabledata-winning tbody tr,
th {
    font-size: 14px;
    font-weight: 400;
    color: #52575C;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom: none;
}

/* graph css */
.chart-container {
    width: 100%;
    margin: auto;
    padding-top: 20px;
    /* height: 534px; */
    /* width: 100%; */
    background-color: white;
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
    padding: 10px 20px 5px 20px;
}

/* h1 {
    text-align: center;
    color: #ff1493;
} */
.date-container input[type="date"i] {
    color: #26262680;
    font-weight: 400;
    font-size: 14px;
}

.date-container {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
}

/* label {
    font-weight: bold;
    color: #ff1493;
} */

input[type="date"] #from-date {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 12px;
}


/********influencer home css*************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    box-shadow: 0px 4px 10px 0px #00000040;
    background: white;
    padding: 30px 35px 30px 35px;
    margin-top: 20px;
    width: 100%;
}

.small-text {
    box-shadow: 0px 4px 10px 0px #F848C433;
    /* width: 308px; */
    height: 268px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-box-text h1 {
    color: #000000;
    font-size: 26px;
    font-weight: 600;
}

.small-box-text p {
    font-size: 14px;
    font-weight: 400;
}

.search-container {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.search-container i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #aaa;
}

.search-container input {
    padding-left: 40px;
    border-radius: 16px;
    /* border: 1px solid #ccc; */
    /* border-radius: 4px; */
}

.long-text {
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
    margin-top: 10px;
    padding: 20px 10px 20px 10px;
}

.content-text h1 {
    font-size: 18px;
    font-weight: 600;
    color: #262626;
}

.content-text a {
    text-decoration: none;
    color: #00000099;
    font-size: 13px;
    font-weight: 600;
}

.bigger-image {
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
    padding: 20px;
}

/* .longe-image-one img{
    width: 400px;
  } */
.bigger-image h1 {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
}

.bigger-image p {
    color: #00000099;
    font-size: 13px;
    font-weight: 400;
}

.longe-text h1 {
    font-size: 20px;
    font-weight: 700;
    color: #16151E;
}

.longe-text p {
    font-size: 14px;
    font-weight: 400;
    color: #00000099;
}

/* .longe-image img{
    height: 511px;
    width: 100%;
  } */
.all-button {
    margin-top: 20px;
    margin-bottom: 30px;
}

.all-button a {
    text-decoration: none;
}

.all-button .button {
    color: #F648C3;
    font-size: 14px;
    font-weight: 600;
    border: 0.5px solid #F648C3;
    border-radius: 4px;
    padding: 4px 16px 4px 16px;
    background-color: white;
    margin-left: 20px;
    box-shadow: 0px 2.15px 10.77px 0px #F648C333;

}

.all-button .button-one {
    color: white;
    font-size: 14px;
    font-weight: 600;
    border: 0.5px solid #F648C3;
    border-radius: 4px;
    padding: 4px 16px 4px 16px;
    background-color: #F648C3;
    margin-left: 20px;
}

.dash-check {
    font-size: 14px;
    font-weight: 400;
    color: #A7A7A7;
}

.listing .listing-text h2 {
    font-size: 13px;
    font-weight: 600;
    color: #262626;
    /* overflow-x: hidden;
    overflow-y: auto;
    height: 24px;
    width: 300px;
    word-break: break-all; */
}

.listing img {
    height: 33px;
}

.listing .listing-text p {
    color: #00000099;
    font-size: 14px;
    font-weight: 400;
    /* overflow-x: hidden;
    overflow-y: auto;
    height: 24px; */
    /* width: 300px; */
    /* word-break: break-all; */
}

.listing {
    display: flex;
    cursor: pointer !important;
}

.listing.active {
    background: #F648C312;
    /* padding: 30px; */
}

.small-img {
    display: flex;
}

.small-img img {
    height: 33px;
}

/********recharge-modal***************/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.recharge {
    position: absolute;
    bottom: 26px;
    left: 252px;
    z-index: 9999;
}

.recharge a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 40px 15px 40px;
    background-color: #F848C4;
    border-radius: 50px;
}

.recharge a:hover {
    color: white;
}


.steps {
    position: relative;
    bottom: 313px;
    left: 281px;
}

.recharge-title {
    font-size: 27px;
    font-weight: 700;
    color: #101623;
}

.recharge-content {
    padding: 40px 25px 40px 25px !important;
}

.recharge-header {
    border: none !important;

}

.recharge-complete .done {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #F848C4;
    padding: 15px 60px 15px 60px;
    background-color: #F848C4;
    border-radius: 16px;

}

.recharge-complete .done:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.recharge-complete a:hover {
    color: #F848C4;
    /* background-color: white; */

}

.recharge-body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.recharge-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    text-align: center;
}

.recharge-header {
    position: relative;
    padding: 0;
    border-bottom: none;
}

.arrow-icon {
    position: absolute;
    left: 3px;
    top: -19px;
    font-size: 1.5rem;
    cursor: pointer;
}

/* .custom-modal-body {
    height: 603px;
    width: 603px;
}
    
.custom-modal-body img {
    height: 603px;
    width: 603px;
}  */


/* complete profile modal */

.profile-title {
    font-size: 27px;
    font-weight: 700;
    color: #101623;
}

.profile-content {
    padding: 9px 25px 40px 25px !important;
}

.profile-header {
    border: none !important;

}

.profile-complete .ok {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #F848C4;
    padding: 15px 60px 15px 60px;
    background-color: #F848C4;
    border-radius: 16px;

}

.profile-complete .ok:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.profile-complete a:hover {
    color: #F848C4;
    /* background-color: white; */

}

.profile-body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.profile-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    text-align: center;
}

@media only screen and (min-width:200px) and (max-width:567px) {
    .recharge-title {
        font-size: 16px;
    }

    .recharge-content {
        padding: 0px !important;
        padding-bottom: 15px !important;
    }

    .recharge-body img {
        height: 157px !important;
    }
}

@media only screen and (min-width:568px) and (max-width:992px) {
    .recharge-title {
        font-size: 16px;
    }

    .recharge-content {
        padding: 0px !important;
        padding-bottom: 15px !important;
    }

    .recharge-body img {
        height: 157px !important;
    }
}

/* ************profile page css****************** */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.upper-section {
    padding-top: 20px;
}

.vendor-main-sec {
    padding-top: 20px;
    /* border-right: 1.25px solid #00000040; */
}

.sidebar-section {
    margin-right: 30px;
    /* border-right: 1.25px solid #00000040; */
    height: 100;
    box-shadow: 0px 2px 11px 0px #F848C426;
    padding-left: 22px;
}

.vendor-main-sec .pink-btn a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}

.vendor-main-sec .pink-btn {
    background-color: #D958A1;
    padding: 10px 20px 10px 31px;
    border-radius: 7px;
    margin-right: 50px;

}

.icons ul li a {
    color: #262626;
    display: flex;
    align-items: center;
    text-decoration: none;

}

.icons ul li {
    list-style-type: none;
    line-height: 43px;
}

.icons ul li a i {
    padding-right: 17px;
    /* padding-top: 10px; */
    text-align: center;
    border-radius: 12px;
    font-size: 1.4rem;
}

.icons ul {
    padding-left: 0px;
}

.icons {
    margin-top: 10px !important;
}

.line {
    height: 100%;
    width: 2px;
}

.upper-section.apple p {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
}

.large-form {
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    box-shadow: 0px 4px 10px 0px #00000040;
    background: #D958A108;
    padding: 30px 35px 10px 35px;
    margin-top: 25px;
}

.image-man {

    border-radius: 4px 4px 0px 0px;
    height: 140px;
    width: 100%;
    position: relative;
}

.new-img img {
    position: absolute;
    right: 46%;
    top: 72px;
}

.new-img h2 {
    padding-top: 56px;
}

.new-img p {
    font-size: 13px;
    font-weight: 400;
    color: #00000099;
}

.image-man-btn {
    padding-top: 10px;
    padding-right: 10px;
}

.image-man-btn a {
    text-decoration: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0px 4px 10px 0px #00000059;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
}

.image-man-btn a:hover {
    color: black;
}

.edit-img {
    margin-top: 80px;
}

.form-part h1 {
    color: #D958A1;
    font-size: 23px;
    font-weight: 700;
}

.profile-about {
    background-color: white;
    /* padding: 10px 20px 10px 20px; */

}

.save-btn {
    margin-top: 30px;
    padding-bottom: 30px;
    display: flex;
    /* justify-content: center; */
}

.save-btn a {
    color: white;
    background-color: #D958A1;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    padding: 5px 13px 5px 13px;
    border-radius: 3px;

}

.save-btn a:hover {
    color: white;
}

.profile-about form label {
    font-size: 14px;
    font-weight: 700;
    /* color: #575757; */
}

select.option-placeholder {
    color: #888;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.profile-about form input::placeholder {
    color: #A7A7A7 !important;
    font-size: 14px !important;
    font-weight: 400 !important;

}

.profile-about form .form-control {
    font-size: 14px !important;
    font-weight: 400 !important;
    /* color:#A7A7A7 ; */
}

.profile-about form .form-select {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #A7A7A7;
}

.profile-about form .form-control::placeholder {
    font-weight: 600 !important;
}

/* ************sidebar css ******************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.user-img {
    width: 50px;
    border-radius: 100%;
    border: 1px solid #eee;
}

.sidebar {
    position: fixed;
    /* z-index: 10000; */
    z-index: 10;
    top: 0;
    left: 0;
    height: 100vh;
    width: 80px;
    background-color: white;
    padding: 0.4rem 0.8rem;
    transition: all 0.5s ease;
    box-shadow: 0px 4px 35px 0px #F848C433;
    overflow-y: auto;
    overflow-x: hidden;
    /* overflow: visible; */
}


.sidebar.active~.main-content {
    left: 250px;
    width: calc(100% - 250px);
}

.sidebar.active {
    width: 250px;
}

.sidebar #btn {
    position: absolute;
    color: #D958A1;
    top: .4rem;
    left: 50%;
    font-size: 1.8rem;
    line-height: 50px;
    transform: translateX(-50%);
    cursor: pointer;
}

.sidebar.active #btn {
    left: 90%;
}

.sidebar .top .logo {
    color: #D958A1;
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    pointer-events: none;
    opacity: 0;
}

.sidebar.active .top .logo {
    opacity: 1;
}

.sidebar.active .top .logo img {
    height: 40px;
}

.top .logo i {
    font-size: 2rem;
    margin-right: 5px;
}

.user {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}

.user p {
    color: #D958A1;
    opacity: 1;
    margin-left: 1rem;
}

.bold {
    font-weight: 600;
    /* color: #D958A1; */
}

.sidebar p {
    opacity: 0;
}

.sidebar.active p {
    opacity: 1;
}

.sidebar ul li {
    position: relative;
    list-style-type: none;
    height: 50px;
    width: 90%;
    margin: 0.8rem auto;
    z-index: 1;
    /* line-height: 50px; */
}

.sidebar ul li a {
    /* color: #D958A1; */
    color: black;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 0.8rem;
}

.sidebar ul li a:hover {
    background-color: #D958A1;
    color: white;
}

.sidebar ul li a i {
    min-width: 50px;
    text-align: center;
    height: 50px;
    border-radius: 12px;
    line-height: 50px;
    font-size: 1.33rem;
}

.sidebar ul li.active a i {
    font-weight: 100;
    /* Makes the icon bold */
    color: #D958A1;
    /* Optionally, change the icon color to indicate active state */
}
 /* .sidebar ul li a:hover i:hover{
    overflow: visible !important;
 } */

.sidebar ul li.active a:hover i {
    background-color: #D958A1;
    color: white;
  
}

.sidebar .nav-item {
    opacity: 0;
}

.sidebar.active .nav-item {
    opacity: 1;
}

.tooltip-inner {
    background-color: #333;  /* Background color */
    color: #fff;             /* Text color */
    font-size: 14px;         /* Font size */
    padding: 8px 10px;       /* Padding */
    border-radius: 4px;      /* Rounded corners */
}

/* .sidebar ul li .tooltip {
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: .6rem;
    padding: .3rem 1rem;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.sidebar ul li:hover .tooltip {
    opacity: 1;
}

.sidebar.active ul li .tooltip {
    display: none;
} */



.sidebar ul li.active .nav-item {
    color: #F648C3;
}

.sidebar ul li:hover .nav-item {
    color: white;
}


.main-content {
    position: relative;
    /* background-color: #eee; */
    height: fit-content;
    min-height: 100vh;
    /* z-index: 1; */
    top: 0;
    left: 80px;
    transition: all 0.5s ease;
    width: calc(100% - 80px);
    padding: 1rem;
    /* border-radius: 16px; */
    box-shadow: 0px 4px 10px 0px #00000040;
    background: white;
 
}

/* .container {
    display: flex;
    justify-content: space-between;
} */
/* .main-content .container img {
    height: 40px;
} */
.top-bar {
    box-shadow: 0px 2px 11px 0px #F848C426;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    /* height: 116px; */
}

.vis-hid {
    visibility: hidden !important;
}

.logo-img {
    height: 44px;
}

.upper-logo {
    display: flex;
    align-items: center;
}


/* *****************login page css ************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-background {
    background: linear-gradient(45deg, rgb(203 106 153), rgb(217 181 134));
}

.input-group {
    position: relative;
}

.fa-eye {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
}

.fa-eye-slash {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
}

.login-pass {
    min-height: 92vh;
}

.login-pass .login-main-container {
    min-height: 92vh;
}

.login-pass .login-main-container .login-form-part {
    /* min-height: 90vh; */
    width: -webkit-fill-available !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-pass .login-main-container .login-form-body {
    /* min-height: 300px; */
    height: 100%;
    width: 100%;
    border-radius: 16px;
    background-color: #ffff;
    padding-top: 20px;
    box-shadow: 0px 4px 35px 0px #F848C433;

    border: 0.5px solid #F848C4;
}

.login-pass .login-main-container {
    /* padding: 55px 20px 27px 96px; */
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-inline: 90px;
}

.login-pass .form-body {
    padding: 25px 50px 25px 50px;
}

.login-pass .form-body label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #575757;
}

.login-pass .form-body input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #A7A7A7;
}

.login-pass .form-body p {
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    text-align: center;

}

.login-pass .login-form-body .form-body h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #000;
}

.input-group {
    position: relative;
}

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

.fa-eye {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
    z-index: 99999;
}

.login-pass .login-form-body .form-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #9B9EA1;
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
}

.login-pass .login-form-body .form-body .forget {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    text-align: right;
    padding-top: 0px;
}

a {
    text-decoration: none;
}

form .forgot-next:hover {
    border: none;
}

.login-pass .login-form-body .login-btn:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.login-btn {
    /* width: 47% !important;
    font-size: 1.1rem !important; */
    padding: 12px 135px 12px 135px;
    background-color: #F648C3;
    color: white;
    border: 1px solid #F648C3;
    border-radius: 8px;
}

@media only screen and (min-width:200px) and (max-width:992.9px) {
    .title-effect {
        display: none;
    }

    .login-btn {
        /* width: 47% !important;
        font-size: 1.1rem !important; */
        padding: 12px 70px 12px 70px;
        text-align: center;
        background-color: #F648C3;
        color: white;
        border: 1px solid #F648C3;
        border-radius: 8px;
    }

    
}

@media only screen and (min-width:992px){
    .login-pass .login-main-container {
        padding-inline: 0px !important;
    }
}
/* @media only screen and (min-width:840px){
    .login-pass .login-main-container {
        padding:55px 20px 55px 120px !important;
    }
} */

.login-pass .login-form-body .text p {
    text-align: left;
    display: flex;
    justify-content: left;
}

.card.login-form {
    padding-top: 40px;
    /* padding-bottom: 40px; */
    box-shadow: 0px 4px 35px 0px #F848C433;

    border: 0.5px solid #F848C4;
    border-radius: 15px;
}

.login-pass .login-form-body .span-color,
.span-color a {
    color: #7C2EF0;
    font-weight: bold;
    text-decoration: none;
}

.login-back-img {
    background-image: url(../images/signpage-back.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.login-upper-img {
    box-shadow: 0px 4px 35px 0px #F848C433;
    /* border: 0.5px solid #F848C4; */
    border-radius: 16px;
    height: 775px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}


.login-back-img img {
    height: 137px;
}

.nav-butn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.login-nav-tabs {
    background: #F9FAFB;
    border: 1.61px solid #E5E7EB !important;
    border-radius: 50px;
    width: 303px;
    height: 50px;
}

.login-nav .login-nav-link.active {
    border: none !important;
    background-color: #F648C3 !important;
    border-radius: 50px !important;
    transition: all 0.2s !important;
    color: white !important;
    width: 146px;
    height: 42px;
    margin-bottom: 1px;
}

.login-nav .login-nav-link {
    border: none !important;
    color: #A7A7A7;
}

.login-nav .login-nav-link:hover {
    color: #A7A7A7;
}

.login-nav-link::after {
    display: none;
}

.log-undre-text p {
    font-size: 16px;
    font-weight: 500;
    color: #747070;
}

.log-undre-text span {
    font-size: 16px;
    font-weight: 500;
    color: #F648C3;
}

.log-undre-text p {
    font-size: 16px;
    font-weight: 500;
    color: #747070;
}

.remember-box {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #000000 !important;
}





/* ************pass sucess css ***************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.otp-sucess img {
    width: 100px;
    margin-bottom: 0px;
}

/* .fa-eye{
  
    z-index:1;
} */
.otp-sucess {
    border-bottom: none !important;
    margin-top: 19px;
}

.modal-footer {
    border-top: none !important;
}

.modal-body h2 {
    font-size: 32px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0px;
}

.modal-body p {
    font-size: 16px;
    font-weight: 400;
    color: #9B9EA1;
    margin-bottom: 0px;
}

.modal-footer .btn {
    color: white !important;
    background-color: #F648C3 !important;
    border: 1px solid #F648C3 !important;
    box-shadow: none !important;
    padding: 9px 80px 9px 80px;
    border-radius: 8px;
    margin-top: 0px;
    margin-bottom: 20px;
}

.modal-footer .btn:hover {
    color: #F648C3 !important;
    background-color: white !important;
    border: 1px solid #F648C3 !important;
    box-shadow: none !important;

}

.modal-content {
    z-index: 1;
}


/* *************forget page css **********************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* .forget-pass .forget-screen-main-secion {
    min-height: 92vh;
} */

/* .forget-pass .forget-screen-main-secion  .forget-main-container {
    min-height: 92vh;
} */
.forget-pass .forget-screen-main-secion .forget-main-container .forget-form-part {
    /* min-height: 90vh; */
    /* width: 456px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.forget-pass .forget-main-container .forget-form-body {
    /* min-height: 300px; */
    height: 100%;
    width: 100%;
    border-radius: 16px;
    background-color: #ffff;
    padding-top: 20px;
    box-shadow: 0px 4px 35px 0px #F848C433;

    border: 0.5px solid #F848C4;
}

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

/* .forget-pass .forget-main-container  {
    padding: 80px 20px 20px 80px;
} */
.forget-pass .form-body {
    padding: 10%;

}

.forget-pass .form-body label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #575757;
}

.forget-pass .form-body input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #A7A7A7;
}

.forget-pass .form-body p {
    font-size: 12px;
    font-weight: 400;
    color: #BDBEC1;

}

.forget-pass .forget-form-body .form-body h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #000;
    margin-bottom: 60px;
}

.forget-pass .forget-form-body .form-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #9B9EA1;
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
}

.forget-pass .forget-form-body button:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.forget-pass .forget-form-body button {
    /* width: 47% !important;
    font-size: 1.1rem !important; */
    /* padding: 5% 25%; */
    width: 100%;
    padding: 10px 0px;
    background-color: #F648C3;
    color: white;
    border: none;
    border-radius: 8px;
}
.forget-back-img {
    background-image: url(../images/signpage-back.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.forget-upper-img {
    box-shadow: 0px 4px 35px 0px #F848C433;
    height: 622px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}


.forget-back-img img {
    height: 137px;
}

.forget-pass .forget-form-body .text p {
    text-align: left;
    display: flex;
    justify-content: left;
}

a .forget {
    text-decoration: none;
}

.forget-pass .forget-form-body .span-color,
.span-color a {
    color: #7C2EF0;
    font-weight: bold;
    text-decoration: none;
}




.forget-upper-img img {
    height: 137px;
}

@media (max-width: 992px) {
    .forget-pass .forget-main-container {
        padding: 17px 25px 10px 25px
    }

   
}

@media (max-width: 768px) {
    .forget-pass .forget-screen-main-secion .forget-main-container .forget-form-part {
        /* min-height: 90vh; */
        width: auto !important;
    }
}

@media screen and (min-width: 992px) and (max-width:1320px)  { 
    .forget-upper-img{
        height: 666px !important;
    }
    .forget-pass .forget-form-body .form-body h2{
        font-size: 25px !important;
        margin-bottom: 40px !important;
    }
}


@media (max-width: 320px) {
    /* .forget-back-img {
        width: 519px;
    } */
    /* .forget-pass .forget-main-container {
        padding: 25px 14px 10px 21px;
    }
  
    .forget-pass .forget-form-body button {
        padding: 7px 32px 7px 38px;
    }
    .forget-pass .form-body label {
        font-size: 11px;
    }
     */
}

/* *****************change pass page css*************** */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.input-group {
    position: relative;
}

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

.fa-eye {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
    z-index: 99;
}

.fa-eye-slash {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
}

.change-pass .change-main-container {
    min-height: 92vh;
}

.change-pass .change-main-container .change-form-part {
    /* min-height: 90vh; */
    width: 456px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.change-pass .change-main-container .change-form-body {
    /* min-height: 300px; */
    height: 100%;
    width: 100%;
    border-radius: 16px;
    background-color: #ffff;
    padding-top: 20px;
    box-shadow: 0px 4px 35px 0px #F848C433;

    border: 0.5px solid #F848C4;
}

.change-pass .change-main-container {
    padding: 80px 20px 20px 80px;
}

.change-pass .form-body {
    padding: 50px 50px 50px 50px;
}

.change-pass .form-body label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #575757;
}

.change-pass .form-body input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #A7A7A7;
}

.change-pass .form-body p {
    font-size: 12px;
    font-weight: 400;
    color: #BDBEC1;

}

.change-pass .change-form-body .form-body h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #000;
    ;
}

.change-pass .change-form-body .form-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #9B9EA1;
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
}

.change-pass .change-form-body .form-body .forget {
    font-size: 12px;
    font-weight: 500;
    color: #062A41;
    text-align: right;
    padding-top: 0px;
}

.change-pass .change-form-body .form-body a {
    text-decoration: none;
}

.change-pass .change-form-body button:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.change-pass .change-form-body button {
    /* width: 47% !important;
    font-size: 1.1rem !important; */
    padding: 12px 135px 12px 135px;
    background-color: #F648C3;
    color: white;
    border: none;
    border-radius: 8px;
}

.change-pass .change-form-body .text p {
    text-align: left;
    display: flex;
    justify-content: left;
}

.change-pass .change-form-body .span-color,
.span-color a {
    color: #7C2EF0;
    font-weight: bold;
    text-decoration: none;
}

.change-back-img img {
    height: 100vh;
    width: 100%;
}

.change-back-img {
    position: relative;
}

.change-upper-img {
    position: absolute;
    top: 34%;
    left: 12%;
}

.change-upper-img img {
    height: 150px;
}

/* media query */
@media (max-width: 1326px) {
    .back-img img {
        height: 227vh;
    }

    .upper-img img {
        height: 150px;
    }
}

@media (max-width: 1080px) {
    .change-pass .change-main-container {
        padding: 80px 20px 27px 38px;
    }

    .back-img img {
        height: 248vh;
    }

    .upper-img img {
        height: 150px;
    }
}

@media (max-width: 992px) {
    .change-pass .change-main-container {
        padding: 79px 20px 27px 20px;
    }

    .change-pass .change-main-container .change-form-part {
        width: 400px;
    }

    .change-pass .change-form-body button {
        padding: 7px 77px 7px 77px;
    }
}

@media (max-width: 640px) {
    .change-pass .change-main-container {
        padding: 80px 20px 27px 80px;
    }

    .change-pass .change-main-container .change-form-part {
        width: 420px;
    }

    .upper-img {
        position: absolute;
        top: 34%;
        right: 6%;
        left: 10%;
    }

    .change-pass .change-main-container {
        padding: 79px 17px 26px 84px;
    }

    .back-img {
        width: 640px;
    }

    .change-pass .change-main-container .change-form-part {
        width: 380px;
    }
}

@media (max-width: 576px) {
    .change-pass .change-main-container .change-form-part {
        width: 476px;
    }
}

@media (max-width: 480px) {
    .back-img {
        width: 529px;
    }

    .change-pass .change-main-container {
        padding: 79px 14px 26px 51px;

    }

    .change-pass .change-main-container .change-form-part {
        width: 432px;
    }

}

@media (max-width: 360px) {
    
    .back-img {
        width: 480px;
    }

    .change-pass .change-main-container .change-form-part {
        width: 454px;

    }

    .change-pass .change-main-container {
        padding: 79px 14px 26px 13px;
    }

    .forget-pass .forget-screen-main-secion .forget-main-container .forget-form-part {
        width: 265px;
    }
}

@media (max-width: 360px) {
    .back-img {
        width: 437px;
    }

    .change-pass .change-main-container .change-form-part {
        width: 412px;
    }
}
@media (max-width: 419.9px) {
    .upper-logo{
        display: none;
    }

}

/* *****************8signup page css ******************/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.input-group {
    position: relative;
}

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

.fa-eye {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
    z-index: 99;
}

.fa-eye-slash {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
    z-index: 99;
}

.sign-page {
    min-height: 92vh;
}

.sign-page .sign-main-container {
    min-height: 92vh;
}

.sign-page .sign-main-container .sign-form-part {
    /* min-height: 90vh; */
    /* width: 456px; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 62px; */
}

.sign-page .sign-main-container .sign-form-body {
    /* min-height: 300px; */
    height: 100%;
    width: 100%;
    border-radius: 16px;
    background-color: #ffff;
    /* padding-top: 20px; */
    /* box-shadow: 0px 4px 35px 0px #F848C433; */

}

.sign-page .border-line {
    border: 0.5px solid #F848C4;
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
}

.sign-page .sign-main-container .sign-form-body .sign-page .sign-main-container {
    padding: 80px 20px 27px 80px;
}

.sign-page .form-body {
    /* padding: 50px 50px 50px 50px; */
    padding-left: 90px;
    padding-right: 90px;
    /* padding-top: 40px; */
}
/* @media only screen and (min-width:1320px){
    .sign-page .sign-upper-img{
        height: 671px !important;
    }
} */
@media only screen and (min-width:992px)  {
    .input-group input{
        padding-right: 38px !important;
    }
}

@media only screen and (min-width:991px) and (max-width:1320px)  {
    /*.sign-page .sign-form-body button {
        padding: 12px 90px 12px 90px !important;
    }*/

    .sign-page .sign-form-body .form-body .change {
        font-size: 26px !important;
    }

    .sign-page .form-body {
        padding: 0;
        padding-top: 0px;
    }
    .sign-page .sign-upper-img{
        height: 671px !important;
    }
  
}
@media only screen and (min-width:768px) and (max-width:840px){
    .sign-page .sign-main-container .sign-form-part {
        margin-bottom: 15px !important;
    }
}

@media only screen and (min-width:200px) and (max-width:640px) {
    .sign-page .form-body {
        padding: 0px;
        /* padding-top: 40px */
    }
    .sign-page .sign-main-container .sign-form-part {
        margin-bottom: 15px !important;
    }
   
}

@media only screen and (max-width:320px) {
    .sign-page .sign-form-body .form-body h2 {
        font-size: 24px !important;
    }
    .sign-page .sign-form-body button{
        padding: 12px 89px 12px 89px !important;
    }
    
}


.sign-page .form-body label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #575757;
}

.sign-page .form-body input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #A7A7A7;
}

#show-password {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#show-password:hover {
    color: #000;
    /* Even darker on hover (black) */
}

#show-password-cnfrm {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#show-password-cnfrm:hover {
    color: #000;
}

#show-pass {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#show-pass:hover {
    color: #000;
}

#show-vendor-password {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#show-vendor-password {
    color: #000;
}

#toggleOldPassword {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#toggleOldPassword {
    color: #000;
}

#toggleNewPassword {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#toggleNewPassword {
    color: #000;
}

#toggleConfirmPassword {
    color: #333;
    /* Dark gray */
    cursor: pointer;
}

#toggleConfirmPassword {
    color: #000;
}

.activity-body-vendor {
    background-color: #fff !important;
    padding: 0 !important;
}

.sectionClass {
    padding: 20px 0px 50px 0px;
    position: relative;
    display: block;
}

.fullWidth {
    width: 100% !important;
    display: table;
    float: none;
    padding: 0;
    min-height: 1px;
    height: 100%;
    position: relative;
}


.sectiontitle {
    background-position: center;
    margin: 30px 0 0px;
    text-align: center;
    min-height: 20px;
}

.sectiontitle h2 {
    font-size: 30px;
    color: #222;
    margin-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
}


.headerLine {
    width: 160px;
    height: 2px;
    display: inline-block;
    background: #101F2E;
}


.projectFactsWrap {
    display: flex;
    margin-top: 30px;
    flex-direction: row;
    flex-wrap: wrap;
}


#projectFacts .fullWidth {
    padding: 0;
}

.projectFactsWrap .item {
    width: 25%;
    height: 100%;
    padding: 50px 0px;
    text-align: center;
}

.projectFactsWrap .item:nth-child(1) {
    background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2) {
    background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3) {
    background: rgb(21, 38, 56);
}

.projectFactsWrap .item:nth-child(4) {
    background: rgb(23, 44, 66);
}

.projectFactsWrap .item p.number {
    font-size: 40px;
    padding: 0;
    font-weight: bold;
}

.projectFactsWrap .item p {
    color: rgba(255, 255, 255);
    font-size: 18px;
    margin: 0;
    padding: 10px;
}


.projectFactsWrap .item span {
    width: 60px;
    background: rgba(255, 255, 255, 0.8);
    height: 2px;
    display: block;
    margin: 0 auto;
}


.projectFactsWrap .item i {
    vertical-align: middle;
    font-size: 50px;
    color: rgba(255, 255, 255, 0.8);
}


.projectFactsWrap .item:hover i,
.projectFactsWrap .item:hover p {
    color: white;
}

.projectFactsWrap .item:hover span {
    background: white;
}

@media (max-width: 786px) {
    .projectFactsWrap .item {
        flex: 0 0 50%;
    }
}

.sign-page .form-body p {
    font-size: 12px;
    font-weight: 400;
    color: #BDBEC1;
}

.sign-page .sign-form-body .form-body h2 {
    font-size: 31px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #000;
    margin-bottom: 30px !important;
}

.sign-page .sign-form-body .form-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #9B9EA1;
    padding-top: 15px;
    /* padding-bottom: 15px;  */
    justify-content: center;
    align-items: center;
}

.sign-page .sign-form-body .form-body .forget {
    font-size: 12px;
    font-weight: 500;
    color: #062A41;
    text-align: right;
    padding-top: 0px;
}

.sign-page .sign-form-body button:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.sign-page .sign-form-body button {
    margin-top: 10px;
    padding: 12px 110px 12px 110px;
    background-color: #F648C3;
    color: white;
    border: 1px solid white;
    border-radius: 8px;
}

.sign-page .sign-form-body .text p {
    text-align: left;
    display: flex;
    justify-content: left;
}

.sign-page .sign-form-body .span-color,
.span-color a {
    color: #7C2EF0;
    font-weight: bold;
    text-decoration: none;
}


.nav {
    display: flex;
    flex-wrap: nowrap;
}

/* .upper-img img{
    height: 124px;

} */
.sign-back-img {
    background-image: url(../images/signpage-back.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.sign-page .sign-upper-img {
    box-shadow: 0px 4px 35px 0px #F848C433;
    /* border: 0.5px solid #F848C4; */
    /* border-radius: 16px; */
    height: 672px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sign-upper-img img {
    height: 137px;
    padding: 0px 28px;
}

.sign-page .sign-form-body .form-body .last {
    font-size: 14px;
    font-weight: 600;
    color: #747070;
}

.sign-page .sign-form-body #uploadBtn label {
    color: #000000;
    background-color: #D9D9D9;
    border-radius: 5px;
    padding: 20px 30px;
}

input[type="file"] {
    display: none;
}

.sign-page .sign-form-body .form-body .file-txt {
    text-align: left;
}

.sign-img {
    margin-top: 40px;
    margin-bottom: 40px;
}

.sign-page .sign-form-body .form-body .checkbox {
    color: #BDBEC1;
    font-size: 16px;
    font-weight: 400;
}

.profile-container {
    display: flex;
    align-items: center;
}

/* .icon-img{
    display: flex;
    justify-content: center;
    gap: 10px;
} */

/* media query */


@media (max-width: 480px) {
    .back-img {
        width: 529px;
    }


}

@media (max-width: 360px) {
    .back-img {
        width: 389px;
    }
}


/* *******************8signup kyc page css *******************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.input-group {
    position: relative;
}

.form-control:focus {
    box-shadow: none !important;
    border: 1px solid #ced4da !important;
}

.fa-eye {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
    z-index: 99999;
}

.fa-eye-slash {
    position: absolute;
    top: 27%;
    right: 4%;
    color: lightgray;
    font-weight: 0px !important;
    cursor: pointer;
}

.sign-page-two {
    min-height: 92vh;
}


.sign-page-two .sign-two-main-container {
    min-height: 92vh;
}

.sign-page-two .sign-two-main-container .sign-two-form-part {
    /* min-height: 90vh; */
    /* width: 456px; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 62px; */
}

.sign-page-two .sign-two-main-container .sign-two-form-body {
    /* min-height: 300px; */
    height: 100%;
    width: 100%;
    border-radius: 16px;
    background-color: #ffff;
    /* padding-top: 20px; */
    /* box-shadow: 0px 4px 35px 0px #F848C433; */

}

.sign-page-two .border-line {
    border: 0.5px solid #F848C4;
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 16px;
}

.sign-page-two .sign-two-main-container .sign-two-form-body .sign-page-two .sign-two-main-container {
    padding: 80px 20px 27px 80px;
}

.sign-page-two .form-two-body {
    padding-left: 50px;
    padding-right: 50px;
    /* padding-top: 30px; */
}

@media only screen and (min-width:200px) and (max-width:567px) {
    .sign-page-two .form-two-body {
        padding-left: 0px;
        padding-right: 0px;
        /* padding-top: 30px; */
    }
}

.sign-page-two .form-two-body label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    color: #575757;
}

.sign-page-two .form-two-body input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #A7A7A7;
}

/* input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

/* Hide the calendar icon for Firefox */
/* input[type="date"] {
    appearance: none;
    background: none;
} */

.sign-page-two .form-two-body p {
    font-size: 12px;
    font-weight: 400;
    color: #BDBEC1;

}

.sign-page-two .sign-two-form-body .form-two-body h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    color: #000;
    ;
}

.sign-page-two .sign-two-form-body .form-two-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #9B9EA1;
    padding-top: 10px;
    /* padding-bottom: 15px;  */
    justify-content: center;
    align-items: center;
}

.sign-page-two .sign-two-form-body .form-two-body .forget {
    font-size: 12px;
    font-weight: 500;
    color: #062A41;
    text-align: right;
    padding-top: 0px;
}

.sign-page-two .sign-two-form-body button:hover {
    background-color: white;
    color: #F648C3;
    border: 1px solid #F648C3;
}

.sign-page-two .sign-two-form-body button {
    margin-top: 10px;
    padding: 12px 132px 12px 132px;
    background-color: #F648C3;
    color: white;
    border: 1px solid white;
    border-radius: 8px;
}

.sign-page-two .sign-two-form-body .text p {
    text-align: left;
    display: flex;
    justify-content: left;
}

.sign-page-two .sign-two-form-body .span-color,
.span-color a {
    color: #7C2EF0;
    font-weight: bold;
    text-decoration: none;
}

input[type=date] {
    color: #212529;
    font-weight: 400;
}


.nav {
    display: flex;
    flex-wrap: nowrap;
}

.kyc-back-img {
    background-image: url(../images/signpage-back.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100%;
}

.kyc-back-img img {
    height: 137px;
    padding: 0px 28px;
}

.kyc-upper-img {
    box-shadow: 0px 4px 35px 0px #F848C433;
    /* border: 0.5px solid #F848C4; */
    /* border-radius: 16px; */
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
@media only screen and (min-width:992px) and (max-width:1320px) {
    .kyc-upper-img{
        height: 788px !important;
    }
}

.show-adhar {
    width: 357px;
    height: 118px;
    border: 0.5px dashed #F648C3;
    background-color: #1B375C0D;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin: 20px 0px 30px 0px;

}

@media only screen and (min-width:200px) and (max-width:567px) {
    .show-adhar {
        width: -webkit-fill-available;
        height: 118px;
        border: 0.5px dashed #1B375C;
        background-color: #1B375C0D;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        margin: 0;
    }

    .sign-page-two .sign-two-form-body button {
        padding: 12px 80px 12px 80px;
    }
}

@media only screen and (min-width:992px) and (max-width:1080px) {
    .show-adhar {
        margin: 0px;
    }
}

#previewImage {
    width: -webkit-fill-available;
}

.show-adhar h1 {
    font-size: 32px;
    font-weight: 600;
    color: #52575C;
}

.sign-page-two .sign-two-form-body .form-two-body .last {
    font-size: 14px;
    font-weight: 600;
    color: #747070;
}

.sign-page-two .sign-two-form-body #uploadBtn label {
    color: #000000;
    background-color: #D9D9D9;
    border-radius: 5px;
    padding: 20px 30px;
}

input[type="file"] {
    display: none;
}

.sign-page-two .sign-two-form-body .form-two-body .file-txt {
    text-align: left;
}

/* .kyc-sign-img{
    margin-top: 40px;
    margin-bottom: 40px;
} */
.sign-page-two .sign-two-form-body .form-two-body .checkbox {
    color: #575757;
    font-size: 16px;
    font-weight: 400;
}

/* media query */

/* topbar css dropdown */

.action .menu {
    position: absolute;
    right: 12px;
    top: 86px;
    border: 1px solid #F848C4;
    padding: 4px;
    background: #fff;
    width: 130px;
    box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
    z-index: 99;
}

.action .menu.active {
    top: 86px;
    visibility: visible;
    opacity: 1;
}

/* .action .menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
} */

.action .menu h3 {
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    font-weight: 500;
    color: #555;
    line-height: 1.5em;
}

.action .menu h3 span {
    font-size: 14px;
    color: #cecece;
    font-weight: 300;
}

.action .menu ul li {
    list-style: none;
    padding: 16px 0;
    /* border-top: 1px solid rgba(0, 0, 0, 0.05); */
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 7px;
}

.action .menu ul li img {
    max-width: 20px;
    margin-right: 10px;
    opacity: 0.5;
    transition: 0.5s;
}

.action .menu ul li:hover img {
    opacity: 1;
}

.action .menu ul li:hover {
    color: #F848C4 !important;
}

.action .menu ul li a {
    display: inline-block;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: 0.5s;
}

.action .menu ul li:hover a {
    color: #ff5d94;
}

/* *************activity page css*************** */
.activity-day {
    /* display: flex; */
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    /* background-color: #f7e6f9; */
    margin: 0 5px;
    color: #ff5acb;
}

.activity-sec {
    display: flex;
    margin-bottom: 60px;
    /* flex-direction: row; */
}

.activity-tracker h2 {
    font-size: 24px;
    font-weight: 600;
    color: #101017;
}

.activity-tracker {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.icon-media a {
    text-decoration: none;
}

.icon-media a:hover {
    color: #858699;

}

.time-calendar {
    margin-bottom: 20px;
}

.time-calendar h4 {
    font-size: 18px;
    font-weight: 600;
    color: #858699;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-calendar .calender-img {
    color: #F848C4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.activity-day.active {
    background-color: #ff5acb;
    color: white;
}

.screen-time {
    font-size: 40px;
    font-weight: 600;
    color: #ff5acb;
    padding-left: 10px;
}

.screen-time span {
    font-size: 15px;
    font-weight: 400;
    color: #858699;
}

.activity-time {
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
}

.activity-time img {
    width: 100px;
}

.activity-time li {
    padding-top: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #858699;
}

.performance {
    background-color: #353535;
    border-radius: 10px;
}

.performance span {
    font-size: 16px;
    font-weight: 500;
    color: #F848C4;
}

.performance p {
    font-size: 13px;
    font-weight: 500;
    color: #858699;
    padding-top: 10px;
}

.performance p span {
    font-size: 16px;
    font-weight: 400;
    color: white;
}

.highlight {
    color: #15B79E;
    font-size: 13px;
    font-weight: 600;
}


h2 {
    margin-bottom: 20px;
    font-size: 24px;
}

/* .days {
    display: flex;
    justify-content:start;
    width: 300px;
    margin: 0 auto;
  } */

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid pink;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.incomplete {
    opacity: 0.3;
}

.complete {
    border-color: #ff69b4;
    background-color: #ff69b4;
    color: white;
}

.bar-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}

.bar {
    height: 40px;
    margin-right: 10px;
    background-color: #F848C4;
    border-radius: 5px;
}

.bar-label {
    margin-left: 10px;
    font-weight: bold;
    position: absolute;
    left: 0px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
}

.icon-media {
    margin-left: 15px;
}

.icon-media a {
    font-size: 14px;
    font-weight: 500;
    color: #858699;
}

.black-last h3 {
    font-size: 18px;
    font-weight: 600;
    color: #14141C;
}

.black-last {
    margin-top: 40px;
}

.radialProgressBar {
    border-radius: 50%;
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #ddd;
    margin: 20px;
    float: left;
}

.radialProgressBar .tick {
    color: #16B364;
}

.radialProgressBar .question {
    color: #B3B3BA;
}

.radialProgressBar .overlay {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin: auto;
    background: #fff;
    text-align: center;
    padding-top: 25%;
}

.progress-0 {
    background-image: -webkit-linear-gradient(left, #FF92DF 50%, transparent 50%), -webkit-linear-gradient(left, #F848C4 50%, #FF92DF 50%);
    background-image: linear-gradient(90deg, #FF92DF 50%, transparent 50%), linear-gradient(90deg, #F848C4 50%, #FF92DF 50%);
}

.progress-10 {
    background-image: -webkit-linear-gradient(36deg, #FF92DF 0%, transparent 0%), -webkit-linear-gradient(left, #F848C4 100%, #FF92DF 0%);
    background-image: linear-gradient(180deg, #FF92DF 0%, transparent 0%), linear-gradient(180deg, #F848C4 100%, #FF92DF 0%);
}

.progress-20 {
    background-image: -webkit-linear-gradient(36deg, #FF92DF 0%, transparent 0%), -webkit-linear-gradient(left, #F848C4 100%, #FF92DF 0%);
    background-image: linear-gradient(180deg, #FF92DF 0%, transparent 0%), linear-gradient(180deg, #F848C4 100%, #FF92DF 0%);
}

.progress-30 {
    background-image: -webkit-linear-gradient(36deg, #FF92DF 0%, transparent 0%), -webkit-linear-gradient(left, #F848C4 100%, #FF92DF 0%);
    background-image: linear-gradient(180deg, #FF92DF 0%, transparent 0%), linear-gradient(180deg, #F848C4 100%, #FF92DF 0%);
}

.progress-40 {
    background-image: -webkit-linear-gradient(36deg, #FF92DF 0%, transparent 0%), -webkit-linear-gradient(left, #F848C4 100%, #FF92DF 0%);
    background-image: linear-gradient(180deg, #FF92DF 0%, transparent 0%), linear-gradient(180deg, #F848C4 100%, #FF92DF 0%);
}

.progress-50 {
    background-image: -webkit-linear-gradient(right, #FF92DF 50%, transparent 50%), -webkit-linear-gradient(left, #F848C4 50%, #FF92DF 50%);
    background-image: linear-gradient(-90deg, #FF92DF 50%, transparent 50%), linear-gradient(90deg, #F848C4 50%, #FF92DF 50%);
}

.progress-60 {
    background-image: -webkit-linear-gradient(left, #F848C4 50%, transparent 50%), -webkit-linear-gradient(36deg, #F848C4 50%, #FF92DF 50%);
    background-image: linear-gradient(90deg, #F848C4 50%, transparent 50%), linear-gradient(54deg, #F848C4 50%, #FF92DF 50%);
}


/*demo purpose*/
.rt-container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .rt-container {
        width: 768px;
    }
}

@media (min-width: 1024px) {
    .rt-container {
        width: 1000px;
    }
}

/*************** EDIT profile css*************/
.edit-image-man {
    background-image: url('../images/profile-cover.png');
    border-radius: 4px 4px 0px 0px;
    height: 140px;
    width: 100%;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.edit-new-img img {
    position: absolute;
    right: 46%;
    top: 76px;
}

.edit-new-img h2 {
    padding-top: 56px;
}

.edit-new-img p {
    font-size: 13px;
    font-weight: 400;
    color: #00000099;
}

.edit-image-man-btn {
    padding-top: 10px;
    padding-right: 10px;
}

.edit-image-man-btn a {
    text-decoration: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0px 4px 10px 0px #00000059;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
}

.edit-image-man-btn a:hover {
    color: black;
}

.form-part h1 {
    color: #16151E;
    font-size: 23px;
    font-weight: 700;
}

.edit-about {
    background-color: white;
    /* padding: 10px 20px 10px 20px; */

}

.upload-file-block {
    color: #F748C4;
}

.edit-save-btn .edit-btn {
    background: #D958A1;
    color: white;
    padding: 6px 25px 6px 25px;
    border: 1px solid #D958A1;
    border-radius: 3px;
    margin-right: 20px;
}

.edit-save-btn .edit-btn2 {
    background: white;
    color: #D958A1;
    padding: 6px 25px 6px 25px;
    border: 1px solid #D958A1;
    border-radius: 3px;
    box-shadow: 0px 2px 10px 0px #F848C433;

}

.edit-new-image-resp {
    height: 112px;
    width: 112px;
    object-fit: cover;
    border-radius: 50%;
    /* border: 1px solid #F648C3; */
    background-color: white;
}

/* .save-btn{
    margin-top: 30px;
    padding-bottom: 30px;
}
.save-btn a{
    color: white;
    background-color: #D958A1;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    padding:5px 13px 5px 13px ;
    border-radius: 3px;
   
}
.save-btn a:hover{
    color: white;
} */
.edit-middle-container form label {
    font-size: 14px;
    font-weight: 400;
    color: #575757 !important;
}

.edit-middle-container .form-select option::placeholder {
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.edit-middle-container form .first input::placeholder {
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;

}

.edit-middle-container form .first input {
    border-bottom: 1px solid #0000004D;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
}

.edit-middle-container form .first textarea {
    border-bottom: 1px solid #0000004D;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
}

.edit-middle-container form .first select {
    border-bottom: 1px solid #0000004D;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
}

.form-control {
    font-size: 14px !important;
    /* font-weight: 700 !important; */
    color: #A7A7A7;
}

.form-select {
    font-size: 14px !important;
    /* font-weight: 700 !important; */
    color: #A7A7A7;
}

/* top header */
#profilePic {
    height: 56px;
    width: 56px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 0 10px 10px !important;
}

.action {
    display: flex;
    justify-content: end;
}

.bell-image-logo {
    justify-content: space-between;
}

/* Responsive */
@media only screen and (min-width:200px) and (max-width:992.9px) {
    .left-section {
        height: max-content;
        position: relative;
    }

    /* .row{
        column-gap: 20px;
    } */
    .slider {
        width: auto;
    }

    /* .bell-image-logo{
    
flex-wrap: wrap !important;
   } */
    /* responsive landing home page */

    .services {
        flex-direction: column;
        flex-wrap: wrap;
        width: -webkit-fill-available;
        margin: auto;
        justify-content: center;
    }

    .service {
        margin: 0;
        margin-bottom: 20px !important;
        width: -webkit-fill-available;
    }


}

/* @media only screen and (min-width:766.9px) and (max-width:992.9px){
    .login-background{
        padding: 45px !important;
    }
} */
@media only screen and (min-width:200px) and (max-width:567px) {

    .contact-container {
        padding: 20px;
        margin: 0;
        display: flex;
        flex-direction: column !important;
        align-items: center;
    }


    .contact-form {
        width: 100%;
        margin-bottom: 40px;
    }

    .contact-info {
        width: 100%;
    }

    /* login */

    .login-background {
        padding: 0px !important;
    }
    .login-pass .login-main-container{
        padding-inline: 0px !important;
    }


    /* others */
    .noti {
        flex-direction: column !important;
    }

    .all-button {
        flex-direction: column !important;
        row-gap: 12px;
    }

    .card-winner {
        display: flex !important;
        flex-direction: column !important;
    }

    /* .bell-image-logo{
      
        justify-content: center !important;
    } */
    img#company-image {
        height: 40px !important;

    }

    #profilePic {
        height: 40px !important;
        width: 40px !important;
    }

    .small-img {
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
    }

    .edit-new-image-resp {
        width: 93px;
        height: 93px;
    }

    .edit-new-image-resp {
        object-fit: cover !important;
    }

    .page-width.container {
        padding-inline: 0px;
    }

    .rupees-new-box {
        margin: 0px !important;
    }

    p.mistake {
        margin: 0px 10px;
    }

    .date-head {
        flex-direction: column;
    }

    .date-container {
        flex-direction: column;
    }

    .winner-head {
        display: flex;
        flex-direction: column;
    }

    .activity-tracker {
        display: grid !important;
        grid-template-columns: repeat(2, auto);
    }

    .radialProgressBar {
        margin: 14px !important;
    }

    .tob-bar {
        padding-top: 10px !important;
    }

    .text-btn {
        flex-direction: column;
        text-align: center;
        padding-block: 10px;
    }

    .activity-time {
        flex-direction: column;

    }

    .activity-time li {
        padding: 0px;
    }

    .activity-time img {
        width: 20%;

    }
}

@media only screen and (max-width:576px) {
    .text-btn {
        flex-direction: column !important;
    }
}

.table-responsive::-webkit-scrollbar {
    display: none;
}

.withdraw-deposit a {
    white-space: nowrap;
}

.chart-container {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px;
}

@media screen and (max-width: 375px) {
    .col-12.d-flex.justify-content-between.align-items-baseline {
        display: flex;
        flex-direction: column;
    }

}

@media only screen and (min-width:375px) and (max-width:425.9px) {

    .edit-new-img img {
        right: 35%;
    }
}


/* .dropdown-menu.p-2.pb-0.show {
    left: 86% !important;
} */

@media only screen and (min-width:200px) and (max-width:992.9px) {
    /* .dropdown-menu.p-2.pb-0.show {
        left: 70% !important;
    } */

    .slider-feed {
        height: 300px;
        max-height: 300px;
        width: 100%;
    }

    .list img,
    .list video {
        width: -webkit-fill-available;
        height: 300px;
        object-fit: contain;
    }

    html {
        overflow-x: hidden;

    }

    #feedpageview {
        margin-top: 20px;
    }

    .left-section {
        top: 0px;
    }

   
}
@media only screen and (min-width:200px) and (max-width:767px) {
    .settings-container{
        flex-direction: column !important;
    }
    /* .settings-container .left-column{
        width: 100% !important;
    } */
    /* .settings-container .settings-tab{
        width: 100% !important;
    } */
}

/* logout */
/* Blurred Background Effect */
.modal-backdrop {
    backdrop-filter: blur(10px);
    /* Adjust the blur intensity */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional: adds a translucent overlay */
}

.modal-logout {
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 99999999999999999 !important;
    position: relative;
}

/* Modal header styling */
.modal-header.logout {

    border-bottom: none;
    padding: 20px;
    border-radius: 10px 10px 0 0;
}

.modal-header img {
    width: 100px;
}

/* Modal content */
.modal-body.modal-text-logout {
    font-family: 'Arial', sans-serif;
    padding: 10px 30px;
}

.modal-body h2.logout-heading {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.modal-body p.logout-text {
    font-size: 16px;
    color: #666;
}

/* Footer styling */
@media screen and (max-width: 480px) {
    .sidebar.active~.main-content {
        display: none;
    }

    .action .menu.active {
        top: 56px;
    }
}

@media screen and (max-width: 320.9px) {
    .edit-new-img img {
        right: 27% !important;
    }
}

@media screen and (min-width: 330px) and (max-width: 375px) {
    .edit-new-img img {
        right: 33% !important;
    }
}

@media screen and (min-width: 424.9px) and (max-width: 768.9px) {
    .edit-new-img img {
        right: 40% !important;
        display: flex;
        justify-content: center;
    }
}

@media only screen and (min-width:575.9px) and (max-width:767.8px) {
    .login-background {
        padding-left: 3rem !important;
    }
}



.form-body h2 {
    text-align: center;
}

/* landing page */
.step-num-box:hover .step-num,
.step-icon:hover .step-num {
    background: #ff00aa !important;
    color: white !important;
}

/* about us  */

.vertical_content_manage {
    margin-top: 60px !important;
}

@media only screen and (min-width:200px) and (max-width:567px) {
    .section_all {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .vertical_content_manage {
        margin-top: 10px !important;
    }
}

@media only screen and (min-width:568px) and (max-width:992px) {

.sidebar.active {
    width: 50% !important;
    z-index: 9995;
}

.sidebar.active~.main-content {
    width: 100%;
    left: 0px;
    right: 0px;
    z-index: -1;
}

.sidebar.active~.main-content {
    overflow: hidden !important;


}
html.no-scroll {
    overflow: hidden;
}

.sidebar.active {
    /* Sidebar styles when active */
}






.section_all {
    padding-top: 30px;
    padding-bottom: 30px;
}

.vertical_content_manage {
    margin-top: 20px !important;
}
}

@media only screen and (min-width:200px) and (max-width:576px) {
    .sidebar.active {
        width: 100vw !important;
        z-index: 9995;
    }

    .activity-social ul li {
        width: -webkit-fill-available;
    }

    /* .time-calendar {
        justify-content: center !important;
        flex-direction: column;
        align-items: center !important;
    } */

    .date-activity {
        width: fit-content !important;
    }

    .activity-body .circle-next {
        padding: 0px !important;
    }
}



/* privacy policy */

.policy {
    box-shadow: 0px 4px 35px 0px #F848C433;
    border-radius: 8px;
    margin-top: 43px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.policy p {
    text-align: justify;
}



.privacy-head {
    font-size: 32px;
    font-weight: 600;
    color: #F648C3;
    text-align: center;
}

/* .breadcrumb-sec .nav-breadcrum .breadcrumb {
    position: absolute;
    top: 35%;
    left: 120px;

}
.breadcrumb-sec .nav-breadcrum {
    position: relative;
}
    .breadcrumb-sec .nav-breadcrum .image-sec img {
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
        height: 80px;
        width: 100%;
    }

    .policy{
        box-shadow: 0px 4px 35px 0px #F848C433;
        border-radius: 8px;
        margin-top: 56px;
        padding: 30px;
        display: flex;
        flex-direction: column;
    }
    .policy p{
        text-align: justify;
    }
   
    .container__nav{
        border-top: 1px solid #ccc;
        text-align: right;
        padding: 2rem 0 1rem;
        width: -webkit-fill-available;
        
    }
    .container__nav .button{
        background-color: #F648C3;
        box-shadow: 0px 5px 15px 0px #F648C333;
        padding: 0.8rem 2rem;
        border-radius: 0.5rem;
        color: #fff;
        text-decoration: none;
        font-size: 0.9rem;
        transition: transform 0.25s, box-shadow 0.25s;
    }
    .container__nav .button:hover{
        box-shadow: 0px 5px 15px 0px #F648C333;
        transform: translateY(-0.5rem);
      }
    .container__nav small{
        color: #777;
        margin-right: 1rem;    }
        

        .policy-loop::before{
            height: 74px !important;
        }

        .breadcrumb-item.active{
            color: #F648C3 !important;
            font-family: 600 !important;
        } */

@media screen and (min-width:1024px) {
    .small-box-text h1 {
        height: 35px;
        /* overflow: hidden;
        width: -webkit-fill-available; */
    }
}

.small-box-text h1 {
    height: 35px;
    /* overflow: auto; */
}

.profile-container h2 {
    max-width: max-content !important;
    min-width: 100px;
    word-break: break-all;
}



@media only screen and (max-width:360px) {
    .profile-container h2 {
        width: 160px;
    }
}

.accordion-button::after {
    margin-bottom: auto !important;
}
body{
    overflow-y: auto !important;
}
.modal.show body{
    overflow: hidden !important;
}

@media only screen and (min-width:200px) and (max-width:360px) {
    .forget-pass .forget-form-body .form-body h2 {
        font-size: 22px !important;
        margin-bottom: 30px !important;
    }
}

@media only screen and (max-width:480px) {
    .forget-pass .forget-form-body .form-body h2 {
        font-size: 31px;
        margin-bottom: 50px;
    }
    .popup-share{
        left: 62%;
        width: 200px;
    }
    .content-share .icons-share {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .content-share .icons-share a{
        width: 30px;
        height: 30px;
    }
    .icons-share a i{
        font-size: 18px;
    }
    .content-share p {
        font-size: 14px !important;
    }
    header span{
        font-size: 16px;
    }
    header .close-share{
        height: 24px;
        width: 24px;
    }
    .field-share button{
        font-size: 10px;
        padding: 2px 6px;
    }
    .content-share .field-share{
        height: 30px;
    }
    .close-share i{
        font-size: 10px;
    }
    .field-share i{
        font-size: 12px;
    }
    .field-share input{
        font-size: 12px;
    }
}

@media only screen and (min-width:576px) and (max-width:600px) {
    .login-background {
        padding: 40px !important;
    }
}

@media only screen and (min-width:990px) and (max-width:991px) {
    .login-background {
        padding-left: 131px !important;
    }
}

@media only screen and (min-width:993px) {
    .login-btn {
        padding: 12px 45px 12px 45px !important;
    }
}


.modal.fade.logoutmodalpopup.show{
    z-index: 99999999999;
}
@media only screen and (min-width:768px) and (max-width:768.9px) {
    .content-btn a{
        padding: 10px 12px 9px 12px !important;
    
    }
}
@media only screen and (min-width:640px)  {
.modal-logout{
    padding: 0px !important;
}
}
@media only screen and (min-width:200px) and (max-width:320px) {
    .time-calendar{
        flex-direction: column;
    }
.new-add-box{
    flex-direction: column !important;
}
#dateForm{
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}
.new-clear{
    margin-left: 1px !important;
}
}
.new-clear{
    margin-left: 10px;
}
@media only screen and (min-width:320px) and (max-width:479px) {
    .new-clear{
        margin-left: 1px !important;
    }
    .time-calendar{
        flex-direction: column;
    }
.new-add-box{
    flex-direction: column !important;
}
#dateForm{
    margin-bottom: 10px;
}
}
@media only screen and (min-width:480px) and (max-width:480.9px) {
    .new-add-box{
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: row;
    }
    .new-clear{
        padding: 18px 9px 18px 9px !important;
    }

}

.scan-qr{
    margin-top: 20px;
    margin-bottom: 20px;
    color: #F648C3;
    font-size: 18px;
}
@media only screen and (min-width:200px) and (max-width:320px) {
    .profile-btn {
        background: #D958A1;
        color: white;
        padding: 6px 17px 6px 17px;
    }
    .wish_txt h2{
        font-size: 24px;
    }
}

@media only screen and (max-width: 360px) {
    .modal-logout {
        padding: 0px !important;
    }
}

.pan-input input{
    text-transform: uppercase;
}
.pan-input input::placeholder{
    text-transform: none;
}
#company-description span{
    word-break: break-all;
}
.app-logo-store{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.app-logo-store img{
    width: 150px;
}
.slick-slide img{
    max-width: 160px;
    max-height: 100px;
}