html{
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

::placeholder {
    color: #b3b3b3;
    opacity: 1;
    /* Firefox */
}

.modal-open {
    overflow: hidden !important;
}
.modal-open .datepicker-container{
    z-index: 2076 !important; 
}
.datepicker-container{
    z-index:1 !important;
}
* {
    outline: none !important;
}

body {
    position: relative;
    padding: 0;
    margin: 0;
    font-family: var(--font-1);
    background-color: rgb(255, 255, 255);
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    letter-spacing: 0.5px;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: currentColor;
}

a:hover {
    text-decoration: none;
    color: currentColor;
}

.ofh {
    overflow: hidden;
}

.modal {
    padding: 0 !important;
}

.error {
    color: red;
}

.relative-si{
    position: relative;
}

.pagedownarea {
    min-height: calc(100vh - 220px);
}

/* ---
Root Css
--- */
:root {
    --font-1: 'Inter', sans-serif;
    --font-2: 'Nunito', sans-serif;

    --white: #ffffff;
    --color-1: #295ea2;
    --border-color-1: #295ea242;
    --color-2: #41c6f7;
    --background-color-2: #e9f9ff;
    --background-color-3: #f3f8ff;
    --color-3: #333333;
    --color-4: #484848;
    --color-5: #808080;
    --color-6: #666666;
}

/* --- 
Web Loader Css
--- */
.web-loader {
    background-color: var(--color-2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1200;
    /* display: none; */
}

.web-loader span.web-inner {
    width: 150px;
    height: 150px;
    line-height: 150px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    z-index: 0;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #fff;
}

.web-loader span.web-inner img {
    width: 80px;
    height: 80px;
    position: relative;
    top: -4px;
    border-radius: 10px;
    /* padding: 4px; */
    background: white;
    /* box-shadow: 0 0 0 10px white; */
}
.web-loader span.web-inner>div::after,
.web-loader span.web-inner>div::before {
    opacity: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    border: 3px solid #fff;
    -webkit-box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
    box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
}

.web-loader span.web-inner>div::before {
    z-index: -2;
    animation: gogoloader 2s infinite;
    -webkit-animation: gogoloader 2s infinite;
    -moz-animation: gogoloader 2s infinite;
    -o-animation: gogoloader 2s infinite;
}

.web-loader span.web-inner>div::after {
    z-index: -1;
    animation: gogoloader 2s infinite 1s;
    -webkit-animation: gogoloader 2s infinite 1s;
    -moz-animation: gogoloader 2s infinite 1s;
    -o-animation: gogoloader 2s infinite 1s;
}

@-webkit-keyframes gogoloader {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@keyframes gogoloader {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

.deactivate span.web-inner {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s 0.5s ease-in-out;
    -o-transition: all 0.3s 0.5s ease-in-out;
    transition: all 0.3s 0.5s ease-in-out;
}

.deactivate {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s 1s ease-in-out;
    -o-transition: all 0.3s 1s ease-in-out;
    transition: all 0.3s 1s ease-in-out;
}


/* ---
Freelance Index Page Css
--- */
.freelance-index-bx {
    display: flex;
    min-height: 100vh;
    position: relative;
    background-image: url("/static/main_app/img/Untitled-1.jpg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fib-logo-bx {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 10px;
    padding: 0px;
    z-index: 5;
}

.fib-logo-bx img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.freelance-company,
.freelance-trainer {
    width: 50%;
    flex: 0 0 50%;
    min-height: 300px;
    padding: 40px 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.freelance-company::after,
.freelance-trainer::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0;
    visibility: hidden;
    background-color: rgb(0, 0, 0);
    transform: scale(0);
    border-radius: 50%;
    z-index: 1;
}

.freelance-company:hover::after,
.freelance-trainer:hover::after {
    opacity: 0.1;
    visibility: visible;
    transform: scale(1);
    border-radius: 0%;
    backdrop-filter: blur(10px);
}

.freelance-trainer {
    background-color: rgba(60, 180, 237, 0.9);
}

.freelance-company {
    background-color: rgba(0, 84, 158, 0.9);
}

.ftc-heding {
    font-size: 28px;
    color: white;
    font-weight: 500;
    margin-bottom: 15px;
    position: relative;
    z-index: 3;
    text-align: center;
}

.ftc-btn {
    display: inline-block;
    border: 2px solid white;
    padding: 5px 20px;
    border-radius: 4px;
    font-weight: 400;
    text-transform: capitalize;
    color: white;
    width: 130px;
    text-align: center;
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

.ftc-pera {
    color: white;
    max-width: 480px;
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 400;
    position: relative;
    z-index: 3;
}

.ftc-btn:hover {
    background-color: white;
    color: black;
}


@media screen and (max-width:850px) {
    .ftc-heding {
        font-size: 24px;
    }
}

@media screen and (max-width:600px) {

    .freelance-index-bx {
        flex-direction: column;
    }

    .freelance-company,
    .freelance-trainer {
        width: 100%;
        flex: auto;
        padding: 45px 10px;
    }
}



/* ---
Video Main Container
--- */

.video-container {
    position: relative;
    padding-top: 56%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.video-container iframe,
.video-container video {
    width: 100% !important;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block;
}

.video-highlighting {
    margin-top: 25px;
}

.video-highlighting p {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-4);
}



/* ---
Commun Overlaydiv Css
--- */
.overlaydiv {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    top: 0;
    cursor: pointer;
    margin: 0 !important;
    z-index: 1024;
}


/* ---
owl Nav css
--- */
.owl-carousel.owl-style {
    padding: 0 25px;
}

.testimonial-popup.owl-carousel.owl-style{
    padding: 0 0px;
}

.owl-style .owl-prev,
.owl-style .owl-next {
    width: 50px !important;
    height: 50px !important;
    background-color: rgb(253, 253, 253) !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: var(--color-1) !important;
    -webkit-box-shadow: 0 0 35px -10px black;
    box-shadow: 0 0 35px -10px black;
}


.testimonial-popup.owl-style .owl-prev,
.testimonial-popup.owl-style .owl-next{
    width: 40px !important;
    height: 40px !important;
}

.owl-style .owl-nav {
    margin: 0 !important;
}

.owl-style .owl-nav .owl-prev {
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.testimonial-popup.owl-style .owl-nav .owl-prev {
    left: 10px;
}

.owl-style .owl-nav .owl-next {
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.testimonial-popup.owl-style .owl-nav .owl-next {
    right: 10px;
}

.owl-style .owl-next svg {
    width: 25px;
    height: 25px;
    position: relative;
    right: -1px;
}


.owl-style .owl-prev svg {
    width: 25px;
    height: 25px;
    position: relative;
    left: -1px;
}

.owl-style .owl-prev:hover,
.owl-style .owl-next:hover {
    background-color: var(--color-2) !important;
    border-color: transparent !important;
    color: var(--white) !important;
    opacity: 1;
}

.owl-style .owl-prev.disabled,
.owl-style .owl-next.disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---
owl dots css
--- */
.owl-style .owl-dots {
    text-align: center;
    margin: 15px 0;
}

.owl-style .owl-dots .owl-dot span {
    width: 10px;
    height: 8px;
    display: block;
    margin: 0px 4px;
    border-radius: 50px;
    background-color: #d2d2d2;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

.owl-style .owl-dots .owl-dot.active span {
    width: 20px;
    background-color: var(--color-1);
}

/* ---
Header Css
--- */
.main-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: start;
    height: 90px;
    background-color: white;
    padding: 0px 15px;
    /* -webkit-box-shadow: 0px 0px 0px 1px #d3d3d354, #21232621 0px 10px 10px -10px; */
    /* box-shadow: 0px 0px 0px 1px #d3d3d354, #21232621 0px 10px 10px -10px; */
    position: sticky;
    top: 0;
    z-index: 1024;
    width: 100%;
    /* padding-left: 150px; */
}

.main-header .search-icon-bx {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: #777777;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid rgb(225, 231, 238);
    background-color: white;
    border-radius: 5px;
    padding: 8px 10px 8px 10px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}

.main-header .search-icon-bx:hover {
    border-color: var(--color-1);
    color: var(--color-1);
}

.main-header .search-icon-bx .fa {
    margin-right: 5px;
}

.main-header .logo-div {
    text-align: center;
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.main-header .logo-div span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: gray;
    margin-top: 3px;
}

.main-header .logo-link {
    display: inline-block;
    height: 55px;
    width: 218px;
    /* width: 20px; */
    /* -webkit-box-flex: 0;
    -ms-flex: 0 0 218px;
    flex: 0 0 218px; */
}

.main-header .logo-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media screen and (max-width:576px) {
    .main-header .logo-link {
        width: 160px;
    }
}

@media screen and (max-width:420px) {
    .main-header .logo-link {
        width: 120px;
    }
}

@media screen and (max-width:392px) {
    .main-header .logo-link {
        height: 55px;
        width: 55px;
    }
    
    .main-header .logo-link img {
        object-fit: cover;
        object-position: left center;
    }
}

@media screen and (max-width:360px) {
    .dm-menu-icon-bx{
        margin-left: 5px !important;
    }
    .login-bx .login-btn {
        padding: 5px !important;
    }

    .main-header .logo-div span{
        display: none !important;
    }
}

@media screen and (max-width:340px) {
    .login-bx .login-btn img{
        margin: 0 !important;
    }
    .login-bx .login-btn h6{
      display: none !important;
    }
}


.thisisnewd{
    width: 45px;
    position: absolute;
    left: -6px;
    top: -13px;
    z-index: 2; 
}

/* --- Header Menu bx Css --- */
.res-menu-bx,
.menu-bx{
    position: sticky;
    top: 90px;
    /* display: block; */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    /* position: relative; */
    z-index: 1023;
    background: #f3f3f3;
    padding: 8px 40px;
    /* box-shadow: 0px 0px 0px 1px #d3d3d354, #21232621 0px 10px 10px -10px; */
    border-top: 1px solid #f1f1f1;
    box-shadow: 0 0 15px #0000004a;
}

.menu-bx{
    overflow: hidden;
    overflow-x: auto;
}

.menu-bx::-webkit-scrollbar{
    display: none;
}


.resm-list,
.res-menu-bx{
    display: none;
}

.menu-drop-bx{
    position: relative;
    cursor: pointer;
}

.res-menu-bx .res-main-link,
.menu-bx .menu-drop-bx .main-link{
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 14px 5px;
    margin: 0px 5px;
    display: block;
    position: relative;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    z-index: 1;
    border-radius: 5px;
    background: var(--color-2);
    color: white;
}

.res-menu-bx .res-main-link .fa,
.menu-bx .menu-drop-bx .main-link .fa{
    margin-right: 5px;
}

.res-menu-bx .res-main-link::after,
.menu-bx .menu-drop-bx .main-link::after{
    /* content: ""; */
    position: absolute;
    width: 0%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    background: linear-gradient(90deg, var(--color-2) 0%, var(--color-1) 100%);
    border-radius: 100px;
    transition: width 0.33s ease;
    border-radius: 50px 50px 0 0;
}

.res-menu-bx .res-main-link:hover,
/* .res-menu-bx .res-main-link.active, */
/* .menu-bx .menu-drop-bx.active .main-link, */
.menu-bx .menu-drop-bx:hover .main-link{
    background-color: var(--color-1);
   color: white;
}

.res-menu-bx .res-main-link.active::after,
.res-menu-bx .res-main-link:hover::after,
.menu-bx .menu-drop-bx.active .main-link::after,
.menu-bx .menu-drop-bx .main-link:hover::after{
    width: 100%;
}

.menu-bx .menu-drop-bx .drop-main-links{
    position: absolute;
    left: 0%;
    top: 100%;
    border-radius: 10px;
    padding-top: 0px;
    width: 100%;
    width: fit-content;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) translateX(0%);
    transition: all 0.1s ease;
}

/* .menu-bx .menu-drop-bx.active .drop-main-links, */
.menu-bx .menu-drop-bx:hover .drop-main-links{
    opacity: 1;
    visibility: visible;
    /* transform: translateY(0px) translateX(-50%); */
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner{
    background: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 16%) 0px 0px 15px;
    position: relative;
    padding: 5px 0;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner::after{
    content: "";
    width: 14px;
    height: 14px;
    background: #ffffff;
    position: absolute;
    left: 20px;
    top: -7px;
    -webkit-transform: translateX(0%) rotate(45deg);
    -ms-transform: translateX(0%) rotate(45deg);
    transform: translateX(0%) rotate(45deg);
    box-shadow: rgb(0 0 0 / 8%) -4px -4px 10px;
    z-index: 0;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner{
    display: flex;
    padding: 6px 0px;
    font-weight: 500;
    color: black;
    /* display: block; */
    font-size: 14px;
    position: relative;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-main-group{
    border-left: 1px solid lightgray;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-main-group:first-child{
    border-left: none;
}

.dmg-box{
    max-height: calc(100vh - 252px);
    overflow: hidden;
    overflow-y: auto;
    display: block;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links{
    white-space: nowrap;
    padding: 6px 30px 6px 12px;
    font-weight: 500;
    color: black;
    display: block;
    font-size: 14px;
    border-top: 1px solid #e3e3e3;
    transition: all 0.3s ease-in-out;
    position: relative;
    margin: 0 8px;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links span{
    font-size: 13px;
    color: gray;
    transition: all 0.3s ease-in-out;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .dmg-box .di-links{
    width: 290px;
    white-space: normal;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links .fa{
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 18px;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links:first-child{
    border-radius: 5px 5px 0 0;
    border: none;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links:last-child{
    border-bottom: none;
    border-radius: 0 0 5px 5px;
}

.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links.active span,
.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links.active,
.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links:hover span,
.menu-bx .menu-drop-bx .drop-main-links .dml-inner .di-links:hover{
    background-color: var(--color-1);
    color: white;
}

.res-post-btn{
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: linear-gradient(90deg, var(--color-2) 0%, var(--color-1) 100%);
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
    font-weight: 400;
    font-size: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    z-index: 10;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}

.res-post-btn:hover{
    color: white;
}

.res-post-btn > div{
    color: white;
    margin-left: 5px;
    transition: all 0.3s ease-in-out;
}

.res-post-btn .fa{
    font-size: 18px;

}

/* --- ^ Header Menu bx Css ^ --- */


/* ---
Menu right Bx Css
--- */
.menu-right-bx {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    right: 50px;
    top: 0;
}


.header-notification-icon{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #000;
    background-color: #295ea212;
    cursor: pointer;
    height: 35px;
    padding: 8px;
    width: 35px;
    z-index: 1;
    margin-right: 5px;
    transition: all 0.3s ease-in-out;
}

.header-notification-icon:hover{
    /* color: white; */
    background-color: #295da270;
}

.header-notification-icon svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.header-notification-icon .hni-num{
    background: #2d61a4;
    border-radius: 50px;
    color: var(--white);
    font-size: 10px;
    font-weight: 500;
    height: 18px;
    position: absolute;
    right: 0px;
    top: -3px;
    width: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Other Btns */

.mrb-obtn{
    display: inline-flex;
    align-items: center;
    height: fit-content;
    color:white;
    /* border: 1px solid rgb(225, 231, 238); */
    border-radius: 5px;
    padding: 7px 9px 7px 9px;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-left: 10px;
    background-color: var(--color-2)
}

.mrb-obtn .fa{
    margin-right: 5px;
    position: relative;
    top: 1px;
    font-size: 16px;
}

.mrb-obtn:hover{
    color: white;
    background-color: var(--color-1)
}


/* ------ */
.login-bx {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 10px;
    position: relative;
    height: 100%;
}

.login-bx .login-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: white;
    /* border: 1px solid rgb(225, 231, 238); */
    background-image: linear-gradient(90deg, var(--color-2) 0%, var(--color-1) 100%);
    background-size: 200%;
    background-position: left center;
    border-radius: 5px;
    padding: 5px 8px 5px 8px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.login-bx .login-btn:hover {
    border-color: transparent;
    background-position: right center;
    background-color: var(--color-2);
    color: white;
}

.login-bx .login-btn img {
    width: 25px;
    height: 25px;
    box-shadow: none;
    margin: 0;
    margin-right: 5px;
}

.login-bx .login-btn h6 {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
}

.login-drop-bx {
    position: absolute;
    top: 95%;
    left: 50%;
    background: white;
    padding: 5px 5px;
    border-radius: 5px;
    width: 140px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 0 0 0px 1px #00000030;
    box-shadow: 0 0 0px 1px #00000030;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.login-bx .login-inner:hover .login-drop-bx {
    opacity: 1;
    visibility: visible;
}

.login-drop-bx::after {
    content: "";
    width: 12px;
    height: 12px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 0px;
    -webkit-transform: translateY(-50%) rotate(-135deg);
    -ms-transform: translateY(-50%) rotate(-135deg);
    transform: translateY(-50%) rotate(-135deg);
    z-index: 0;
    -webkit-box-shadow: 1px 1px 0.5px #00000030;
    box-shadow: 1px 1px 0.5px #00000030;
}

.login-drop-bx h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-3);
    margin-bottom: 0;
}

.login-drop-bx p {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: #777777;
}


.ldc-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px solid rgb(225, 231, 238);
}

.ldc-btn:nth-last-child(1) {
    border-bottom: none;
}

.ldc-btn img {
    width: 24px;
    margin-right: 8px;
}

.ldc-btn .trip-text p {
    margin-bottom: 0;
    font-size: 10px;
    font-weight: 500;
    color: #777;
}

.ldc-btn .trip-text h6 {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
    color: #000;
}


/* === Side Menu Css Start === */
.dm-menu-icon-bx {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    /* background-image: linear-gradient(135deg, #1abc9c 0, #4a90e2 100%); */
    padding: 3px 5px;
    border-radius: 5px;
    /* display: none; */
}

.dm-menu-icon-bx .menu-txt {
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 0px 5px 0px 0px;
    transition: 0.3s ease-in-out;
}

/* .dm-menu-icon-bx:hover .menu-txt {
    color: #124ca0;
} */

.dm-menu-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    /* margin-right: 5px; */
    flex-direction: column;
    padding: 1px;
    cursor: pointer;
}

.dm-menu-icon span {
    width: 100%;
    height: 4px;
    background-color: #b7b7b7;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    display: block;
    border-radius: 100px;
}

/* .dm-menu-icon-bx .dm-menu-icon span:nth-child(2) {
    width: 70%;
    margin-right: auto;
} */

.dm-menu-icon-bx:hover .dm-menu-icon span,
.dm-menu-icon-bx.active .dm-menu-icon span {
    background-color: var(--color-1);
}

.dm-menu-icon-bx.active .dm-menu-icon span:nth-child(1) {
    width: 50%;
    margin-left: auto;
}

.dm-menu-icon-bx.active .dm-menu-icon span:nth-child(2) {
    width: 90%;
}

.dm-menu-icon-bx.active .dm-menu-icon span:nth-child(3) {
    width: 50%;
    margin-right: auto;
}


/* --- aside menu Css --- */
.dm-side-menu {
    width: 300px;
    position: fixed;
    top: 0px;
    right: -310px;
    height: 100%;
    z-index: 1101;
    background: #f7f9fb;
    overflow: hidden;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    background-image: url(/static/main_app/img/pattern-1.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}


.dm-side-menu.active {
    right: 0;
    opacity: 1;
    visibility: visible;
}

.overlaydiv.adsm-over-active {
    visibility: visible;
    opacity: 1;
}

.adsm-logo-bx {
    background: #fcfcfc;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #d3d3d34d;
}

.adsm-logo-bx .adsm-logo-link {
    display: block;
    position: relative;
    padding: 0 15px 0 50px;
    pointer-events: none;
}

.adsm-logo-bx .adsm-logo-link img.logo-img {
    width: 100%;
}

.adsm-menu-bx {
    height: calc(100% - 100px - 64px);
    max-height: calc(100% - 100px - 64px);
    position: absolute;
    width: 100%;
    top: 0;
    margin-top: 100px;
    overflow: auto;
}

.adsm-menu-bx::-webkit-scrollbar{
    display: none;
}

.adsm-menu-bx.amb-sub-bx{
    right: -300px;
    background: white;
    transition: all 0.3s ease-in-out;
}

.adsm-menu-bx.amb-sub-bx.active{
    right: 0;
}

.amb-sub-back{
    margin: 10px;
    margin-bottom: 5px;
    border: 1px solid #e9e9e9;
    padding: 4px 12px;
    width: fit-content;
    border-radius: 50px;
    background: #fcfcfc;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.amb-sub-back .fa{
    margin-right: 5px;
    font-size: 18px;
    position: relative;
    top: 1px;
}

.amb-sub-back:hover{
    border-color:#202567;
    color: #202567;
}

.adsm-lable {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: black;
    padding: 0 0 5px;
    margin: 20px 15px 10px;
}

.adsm-lable::before,
.adsm-lable::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 20px;
    height: 1px;
    border-radius: 5px;
    background-color: black;
}

.adsm-lable::before {
    left: inherit;
    right: 0;
    top: 100%;
    width: calc(100% - 30px);
    opacity: 0.05;
}

.adsm-menu-bx ul {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0 10px;
    list-style: none;
}

.adsm-menu-bx ul li {
    margin: 0px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 0.3s all linear;
}

.dm-side-menu.active .adsm-menu-bx ul li {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(1) {
    transition-delay: 0.4s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(2) {
    transition-delay: 0.45s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(3) {
    transition-delay: 0.5s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(4) {
    transition-delay: 0.55s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(5) {
    transition-delay: 0.6s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(6) {
    transition-delay: 0.65s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(7) {
    transition-delay: 0.7s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(8) {
    transition-delay: 0.75s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(9) {
    transition-delay: 0.8s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(10) {
    transition-delay: 0.85s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(11) {
    transition-delay: 0.9s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(12) {
    transition-delay: 0.95s;
}

.dm-side-menu.active .adsm-menu-bx ul li:nth-child(13) {
    transition-delay: 1s;
}

.adsm-menu-bx ul li a {
    padding: 6px 10px 6px 10px;
    display: flex;
    text-decoration: none;
    color: #000000;
    position: relative;
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-radius: 0px;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    margin-bottom: 5px;
}

.adsm-menu-bx ul li a .fa {
    margin-right: 10px;
    visibility: hidden;
    transform: translateX(-10px);
    font-size: 16px;
    opacity: 0;
    transition: all 0.3s;
}

.adsm-menu-bx ul li a.active .fa,
.adsm-menu-bx ul li a:hover .fa {
    visibility: visible;
    transform: translateX(0px);
    opacity: 1;
}


.adsm-menu-bx ul li a:hover {
    background-color: #e9e9e9d4;
    color: #000;
}

.adsm-drop-li.active > a,
.adsm-menu-bx ul li a.active {
    color: var(--color-1);
    background-color: #e9e9e9d4;
}

.adsm-drop-li > a svg{
    transform: rotate(45deg);
    transition: all 0.3s ease-in-out;
}

.adsm-drop-li.active > a svg{
    transform: rotate(0deg);
}

.adsm-drop-li .adsm-drop-menu{
    display: none;
    margin-bottom: 10px;
    /* border-bottom: 1px solid #ececec; */
    padding-bottom: 5px;
    position: relative;
}

.adsm-drop-li .adsm-drop-menu::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: calc(100% - 30px);
    height: 1px;
    border-radius: 5px;
    background-color: #202567;
    opacity: 0.1;
    transform: translateX(-50%);
}

.adsm-drop-li .adsm-drop-menu .adsm-dm-link{
    padding: 6px 5px 6px 25px;
    position: relative;
    font-weight: 400;
    font-size: 14px;
}

.adsm-drop-li .adsm-drop-menu .adsm-dm-link .fa{
    position: relative;
    top: -1px;
}

.adsm-drop-li .adsm-drop-menu .adsm-dm-link::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: currentColor; */
    background: var(--color-1);
}

.adsm-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 15px;
    background-color: #fcfcfc;
    width: 100%;
    margin: 0;
    border-top: 1px solid #d3d3d34d;
}

.social-bx {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 10px;
}

.social-bx a {
    color: #777777;
    height: 30px;
    margin: 2px 0px;
    width: 30px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    border-radius: 50%;
}

.social-bx a.icon-fb:hover {
    border-color: #3b5998;
    background-color: #3b5998;
    color: white;
}

.social-bx a.icon-tw:hover {
    border-color: #00aced;
    background-color: #00aced;
    color: white;
}

.social-bx a.icon-insta:hover {
    border-color: #8a3ab9;
    background-color: #8a3ab9;
    color: white;
}

.social-bx a.icon-lin:hover {
    border-color: #0077b5;
    background-color: #0077b5;
    color: white;
}

.social-bx a.icon-yt:hover {
    border-color: red;
    background-color: red;
    color: white;
}

.social-bx a.icon-wa:hover {
    border-color: #25d465;
    background-color: #25d465;
    color: white;
}

.social-bx a.icon-tg:hover {
    border-color: #0077b5;
    background-color: #0077b5;
    color: white;
}
/* --- ^ aside menu Css ^ --- */



/* ---
Home search section Css
--- */

.home-search-section {
    background: -o-linear-gradient(bottom, var(--color-2) 0%, var(--color-1) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(var(--color-2)), to(var(--color-1)));
    background: linear-gradient(0deg, var(--color-2) 0%, var(--color-1) 100%);
    padding-bottom: 160px;
    padding-top: 80px;
    margin-bottom: -130px;
    position: relative;
}


.form-gorup-search {
    position: relative;
    width: 768px;
    max-width: 100%;
    margin: 20px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.form-gorup-search input {
    width: 100%;
    height: 45px;
    outline: none;
    font-size: 16px;
    padding: 0 55px 0 20px;
    border: none;
    outline: none;
    font-weight: 400;
    font-family: var(--font-1);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0 0 0 1px #e9e9e9;
    box-shadow: 0 0 0 1px #e9e9e9;
    border-radius: 3px;
}

.form-gorup-search input:focus,
.form-gorup-search input:hover {
    -webkit-box-shadow: 0 0 0 1px var(--color-1);
    box-shadow: 0 0 0 1px var(--color-1);
}

.form-gorup-search button {
    height: 45px;
    width: 45px;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 16px;
    color: var(--color-1);
    background-color: var(--background-color-3);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.form-gorup-search button:hover {
    opacity: 1;
    color: var(--white);
    background-color: var(--color-1);
}

.search-tag-bx {
    text-align: center;
    margin-bottom: 20px;
}

.search-tag-bx span {
    background: #00000026;
    color: white;
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.search-tag-bx span:hover {
    background: var(--white);
    color: var(--color-1);
}

.home-search-section .heading-bx,
.home-search-section .sub-heading-bx {
    text-align: center;
}

.home-search-section .heading-bx::after {
    content: none;
}

.home-search-section svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

/* ---
most-popular-section
--- */

.most-popular-section .heading-bx {
    color: var(--white);
    font-size: 20px;
    padding-left: 20px;
}

.most-popular-section .heading-bx::after {
    background: var(--white);
    height: 12px;
    width: 12px;
}

.popular-slider a.mps-item {
    padding: 10px;
    display: block;
    border-radius: 5px;
}

.popular-slider .mps-item .mps-img {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 50%;
    margin-bottom: 15px;
    -webkit-box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--background-color-2);
    box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--background-color-2);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.popular-slider .mps-item .mps-img:hover {
    -webkit-box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--color-1);
    box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--color-1);
}

.popular-slider .mps-item .mps-img img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    /* opacity: 0.7; */
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.popular-slider .mps-item .mps-img:hover img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
}

.popular-slider .mps-item h6 {
    color: var(--color-4);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500 !important;
    text-align: center;
    /* white-space: nowrap; */
    /* -o-text-overflow: ellipsis; */
    /* text-overflow: ellipsis; */
    /* overflow: hidden; */
    margin: 0;
    font-family: 'Inter', sans-serif !important;
    /* padding: 0 5px; */
}

.popular-slider .mps-item span {
    color: var(--color-6);
    font-size: 11px;
    line-height: 22px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    display: block;
}

.popular-slider.owl-style .owl-nav .owl-next,
.popular-slider.owl-style .owl-nav .owl-prev {
    top: 40%;
}

/* ---
Section Commun Heding
--- */
.title-bx {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--color-3);
}

.title-bx span {
    background: #f3f8ff;
    color: var(--color-1);
    border: 0.5px solid var(--border-color-1);
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
}

.section-heading-bx {
    position: relative;
}

.heading-bx {
    font-size: 24px;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    /* padding-left: 15px; */
    color: var(--color-3);
}

.heading-bx.type-text {
    line-height: 1.5;
    font-size: 28px;
    font-weight: 300;
    max-width: 768px;
    width: 100%;
    margin: auto;
    min-height: 80px;
    padding: 0;
}

/* .heading-bx::after {
    content: "";
    width: 8px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 4px;
    background: -o-linear-gradient(top, var(--color-2) 50%, var(--color-1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, var(--color-2)), to(var(--color-1)));
    background: linear-gradient(180deg, var(--color-2) 50%, var(--color-1) 100%);
    border-radius: 90px;
} */

.sub-heading-bx {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-top: 16px;
    color: var(--color-3);
}

.offering-bx {
    margin-top: 10px;
}

.offering-bx .offering-span {
    margin-right: 10px;
    color: var(--color-4);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.offering-bx .offering-span img {
    width: 13px;
    height: 13px;
    margin-right: 10px;
    margin-left: 10px;
}

.shb-text-white .title-bx span,
.shb-text-white .offering-bx .offering-span,
.shb-text-white .heading-bx,
.shb-text-white .sub-heading-bx,
.shb-text-white .title-bx {
    color: white;
}

.shb-text-white .title-bx span {
    background: #00000026;
}

.dagsrhdtht{
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1) !important;
    background: #295ea212;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif !important;
    text-align: center;
    margin-top: 10px;
    margin: 5px auto 5px;
    display: block;
    width: fit-content;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(27px);
    padding: 10px 15px;
    box-shadow: 0 0 20px #0000001a;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.dagsrhdtht svg{
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
}

.dagsrhdtht:hover{
    color: white !important;
    background-color:var(--color-1) !important;;
}

/* ---
commun-btn
--- */

/* .commun-btn{
    background: #f3f8ff;
    color: var(--color-1);
    border: 0.5px solid var(--border-color-1);
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
}*/

/* ---
Commun Close Icon Css
--- */

.commun-close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #ff000000;
    padding: 7px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.commun-close-icon.cci-white {
    background: #ffffff17;
    color: white;
}

.commun-close-icon.cci-white:hover,
.commun-close-icon:active,
.commun-close-icon:hover {
    background: #ff000024 !important;
    color: #ff0000 !important;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.commun-close-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.commun-close-icon.close-left{
    right: inherit;
    left: 10px;
}

/* ---
Banner Img Section
--- */

.banner-bx {
    margin: 30px 0;
}

.banner-bx img {
    width: 100%;
    border-radius: 10px;
}

/* ---
Courses & Category Section Css
--- */

.courses-category-bx {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.courses-category-bx .category-list-bx .category-lb-inner {
    width: 280px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 280px;
    flex: 0 0 280px;
    background: -o-linear-gradient(right, #f7faff 0, rgba(255, 255, 255, 0) 49.83%);
    background: -webkit-gradient(linear, right top, left top, color-stop(0, #f7faff), color-stop(49.83%, rgba(255, 255, 255, 0)));
    background: linear-gradient(270deg, #f7faff 0, rgba(255, 255, 255, 0) 49.83%);
    height: 550px;
    padding: 15px 0;
    border-radius: 10px;
    position: sticky;
    top: 90px;
}

.courses-list .coli-hed,
.category-list-bx .cali-hed {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-3);
    padding: 0 25px;
    margin-bottom: 30px;
}

.category-list-bx .category-list-item {
    position: relative;
    width: 100%;
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-3);
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.category-list-bx .category-list-item:hover {
    opacity: 0.8;
    background-color: var(--background-color-2);
}

.category-list-bx .category-list-item::after {
    content: "";
    width: 8px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color-2);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.category-list-bx .category-list-item .fa {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--color-1);
    width: 18px;
    height: 18px;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.category-list-bx .category-list-item.active {
    background-color: var(--background-color-2);
    font-weight: 600;
}

.category-list-bx .category-list-item.active .fa,
.category-list-bx .category-list-item.active::after {
    opacity: 1;
    visibility: visible;
}


.courses-category-bx .courses-list {
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    padding-left: 15px;
    position: relative;
}

.courses-category-bx .courses-list::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 153px;
    background-image: -o-linear-gradient(bottom, #ffffff, #ffffffdb);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#ffffffdb));
    background-image: linear-gradient(0deg, #ffffff, #ffffffdb);
}

.courses-category-bx .courses-list.noafter::after {
    content: none;
}

.courses-item-outter {
    padding: 0 7.5px;
}

.courses-item {
    display: block;
    border-radius: 5px;
    margin-bottom: 30px;
    overflow: hidden;
    background-color: white;
    -webkit-box-shadow: 0px 0px 0px 1px #f0f0f0;
    box-shadow: 0px 0px 0px 1px #f0f0f0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.courses-item:hover {
    -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.courses-item .ci-img {
    position: relative;
    padding-top: 50%;
    overflow: hidden;
    background-color: #f3f3f3;
}

.courses-item .ci-img>img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    filter: blur(3px);
}

.courses-item .ci-text {
    padding: 10px;
    position: relative;
}

.courses-item .ci-profile-img {
    width: 40%;
    padding-top: 40%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 50%;
    margin-bottom: 15px;
    -webkit-box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--background-color-2);
    box-shadow: 0px 0px 0 2px var(--white), 0px 0px 0 4px var(--background-color-2);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.courses-item .ci-profile-img img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.courses-item:hover .ci-profile-img {
    -webkit-box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--color-1);
    box-shadow: 0px 0px 0 2px var(--white), 0px 0px 0 4px var(--color-1);
}

.courses-item .ci-text>span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #8a8a8a;
}

.courses-item .ci-text>h6 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    margin-top: 8px;
    color: var(--color-3);
}

.courses-item .ci-text>div>span {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-6);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 10px;
    border-left: 1px solid var(--border-color-1);
}

.courses-item .ci-text>div>span .fa {
    color: #fda802;
    margin-right: 5px;
}

.courses-item .ci-text>div>span:nth-child(1) {
    padding-left: 0;
    border-left: none;
}

.courses-item .ci-last {
    background-color: #f3f8ff;
    padding: 14px 10px 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.courses-item .ci-last .fa {
    position: relative;
    top: 0px;
    margin-left: 8px;
    font-size: 18px;
}

.view-more-btn {
    background: #f3f8ff;
    color: var(--color-1);
    border: 0.5px solid var(--border-color-1);
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    z-index: 1;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.view-more-btn:hover {
    background-color: var(--color-1);
    color: white;
}

/* ---
specialization-section
--- */

.specialization-section {
    background: -o-linear-gradient(268.44deg, #005cbf .4%, #0063c6 98.96%);
    background: linear-gradient(181.56deg, #005cbf .4%, #0063c6 98.96%);
    padding-bottom: 220px !important;
    color: #fff;
    background-image: url("/img/specialization_section_background.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

/* .specialization-slider .owl-stage-outer {
    padding: 10px;
} */

.specialization-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    transform: scale(0.99);
    border: 1.5px solid lightgray;
}

.specialization-item:hover {
    border-color: rgb(42 98 165);
}

.specialization-item .si-img {
    position: relative;
    padding-top: 56%;
    overflow: hidden;
    background-color: #f3f3f3;
}

.specialization-item .si-img span {
    position: absolute;
    width: 72px;
    height: 28px;
    background: -o-linear-gradient(123.98deg, #fb8c0a 9.72%, #ffdc21 108.23%);
    background: linear-gradient(326.02deg, #fb8c0a 9.72%, #ffdc21 108.23%);
    top: 24px;
    right: 0;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 90px 0 0 90px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.specialization-item .si-img span .fa {
    margin-right: 5px;
    position: relative;
    top: 0.6px;
}

.specialization-item .si-img img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.specialization-item .si-text {
    padding: 10px 10px;
}

.specialization-item .si-text>h6 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-3);
    margin: 0 0 5px 0;
}

.specialization-item .si-text>p {
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-4);
    margin-bottom: 10px;
}

.specialization-item .si-text>p:last-child {
    margin-bottom: 0px;
}

.specialization-item .si-text>p .fa {
    margin-right: 5px;
    color: black;
}

.specialization-item .si-text > div.si-price{
    color: var(--color-1);
    font-size: 14px;
    font-weight: 500;
    margin-top: -5px;
}

.specialization-item .si-text > div.si-price del span,
.specialization-item .si-text > div.si-price del{
    color: black;
    font-weight: 500;
    font-size: 13px;
    margin-left: 5px;
}

.specialization-item .si-text > div.si-price del span{
    text-decoration: line-through;
    margin-right: 5px;
}


.specialization-item .si-last {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    /* display: block; */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #f3f8ff;
}

.specialization-item .si-last .si-l-text p {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    margin-bottom: 2px;
    color: var(--color-6);
}

.specialization-item .si-last .si-l-text h6 {
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--color-4);
}

.specialization-item .si-last .si-l-btn {
    background: var(--background-color-3);
    color: var(--color-1);
    border: 0.5px solid var(--color-1);
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.specialization-item .si-last .si-l-btn:hover {
    background: var(--color-1);
    color: var(--white);
    border: 0.5px solid var(--color-1);
}

.specialization-item .si-last .si-l-btn .fa {
    position: relative;
    top: 0.7px;
    margin-left: 4px;
    font-size: 18px;
}

.si-premium-icon-span {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    background: -o-linear-gradient(123.98deg, #fb8c0a 9.72%, #ffdc21 108.23%);
    background: linear-gradient(326.02deg, #fb8c0a 9.72%, #ffdc21 108.23%);
    padding: 14px;
    border-radius: 0 0 0px 50px;
}

.si-premium-icon-span img {
    width: 100% !important;
    position: relative !important;
    top: -5px !important;
    right: -5px !important;
    left: inherit !important;
}

.si-ft-icon-span {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: white;
    padding: 10px;
    border-radius: 0 0 50px 0px;
}

.si-ft-icon-span img {
    width: 100% !important;
    position: relative !important;
    top: -5px !important;
    left: -5px !important;
}

.si-user-img{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 0 0px 2px white, 0 0 0 4px var(--color-1);
}

.si-user-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}



.si-btn-bx {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f5f5f5;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.si-btn-bx::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-left: 1px solid #e7e7e7;
    height: calc(100% - 10px);
}

.si-btn-bx .si-btn-link {
    width: 100%;
    height: 40px;
    padding: 5px 5px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    background: #fcfcfc;
    color: black;
    transition: 0.3s ease-in-out;
}

.si-btn-bx .si-btn-link:hover {
    color: #db0000;
    background-color: #ffecec;
}

.si-btn-bx .si-btn-link:last-child:hover {
    color: #2c8eca;
    background-color: #e9f3fa;
}




/* ---
stats-Section
--- */
.stats-inner {
    background: white;
    padding: 40px;
    border-radius: 25px;
    -webkit-box-shadow: 0 8px 38px rgb(34 145 255 / 8%);
    box-shadow: 0 8px 38px rgb(34 145 255 / 8%);
    position: relative;
    z-index: 1;
}

.stats-item {
    position: relative;
    padding: 0 25px;
    text-align: center;
}

.stats-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0.5px;
    height: 60%;
    background-color: var(--border-color-1);
}

.stats-item:first-child:after {
    content: none;
}

.stats-item .stats-num {
    font-size: 48px;
    line-height: 58px;
    font-weight: 700;
    background: -o-linear-gradient(top, #00a5ec 0, #008bdc 170%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a5ec), color-stop(170%, #008bdc));
    background: linear-gradient(180deg, #00a5ec 0, #008bdc 170%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-item h6 {
    margin-top: 4px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-3);
}

/* ---
Freelance Trainings advantage section
--- */

.fta-section {
    background: linear-gradient(0deg, #f3faff, transparent);
}

.fta-r-section {
    background: linear-gradient(180deg, #f3faff, transparent);
}

.ftd-item {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0px 0px 1px rgb(0 0 0 / 6%);
    box-shadow: 0 0px 0px 1px rgb(0 0 0 / 6%);
    cursor: pointer;
    transform: scale(0.90);
    min-height: 210px;
    transition: all 0.3s linear;
}

.ftd-item:hover {
    -webkit-box-shadow: 0 0px 15px 0px rgb(0 0 0 / 11%);
    box-shadow: 0 0px 15px 0px rgb(0 0 0 / 11%);
}

.ftd-item img {
    width: 80px !important;
    margin-bottom: 10px;
    display: block;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
}

.ftd-item:hover img {
    transform: scale(1.05);
    box-shadow: 0 0 50px -15px #a2a2a2;
}

.ftd-item h6 {
    color: var(--color-3);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

.ftd-item p {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-4);
    margin-bottom: 0px;
    /* text-align: center; */
    transition: all 0.3s ease;
}

.ftd-item:hover p {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

/* ---
educators-slider
--- */

.es-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    -webkit-transform: scale(0.96);
    -ms-transform: scale(0.96);
    transform: scale(0.96);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0px 0px 0px 1px #f0f0f0;
    box-shadow: 0px 0px 0px 1px #f0f0f0;
}

.es-item:hover {
    -webkit-transform: scale(0.99);
    -ms-transform: scale(0.99);
    transform: scale(0.99);
}

.es-item .es-img {
    position: relative;
    padding-top: 86%;
    overflow: hidden;
    background-color: #f3f3f3;
}

.es-item .es-img img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.es-item .es-text {
    background-color: white;
    width: 100%;
    border-radius: 20px 20px 0 0;
    margin-top: -52px;
    position: relative;
    z-index: 1;
    padding: 20px;
}

.es-item .es-text>h6 {
    color: var(--color-3);
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    /* margin: 0; */
    margin: 0px 0 10px;
}

.es-item .es-text>p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--color-4);
    margin-bottom: 5px;
    position: relative;
    padding-left: 20px;
}

.es-item .es-text>p::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    color: currentColor;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
}

.es-item .es-text>p:last-child {
    margin-bottom: 0px;
}

/* ---
Sub Footer section
--- */

.sub-footer-section {
    background-color: var(--color-1);
    background-image: url(/img/background.webp);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.sub-footer-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    /* align-items: center; */
    padding: 60px 0 80px;
    width: 100%;
    max-width: 992px;
    margin: auto;
}

.sub-footer-inner h6 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 15px;
    /* text-align: center; */
    /* word-break: break-all; */
}

.sub-footer-inner .sfi-list p {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    margin-top: 16px;
    color: var(--white);
    margin: 0px 0 5px 0;
    position: relative;
    /* display: inline-block; */
    padding: 0 15px 0 15px;
}

.sub-footer-inner .sfi-list p::after {
    content: "";
    position: absolute;
    left: -0.5px;
    top: 12px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}




/* ---
Footer Section Css
--- */

footer {
    background-color: white;
    border-top: 1px solid #e7e7e7;
    position: relative;
    z-index: 1;
}

.footer-page-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer-page-links a {
    position: relative;
    color: black;
    font-weight: 400;
    display: inline-block;
    margin: 5px 0;
    padding: 3px 10px;
    font-size: 14px;
    letter-spacing: 0.5px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.footer-page-links a::after {
    content: "";
    position: absolute;
    left: -0.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 60%;
    box-shadow: 0 0 0 0.5px #dbdbdb;
}

.footer-page-links a:nth-child(1):after {
    content: none;
}

.footer-page-links a.active,
.footer-page-links a:hover {
    color: var(--color-1);
}


.social-links {
    text-align: center;
    margin: 10px 0;
}

.social-links a {
    color: #b0b0b0;
    height: 30px;
    margin: 0 0px;
    width: 30px;
    font-size: 16px;
    border-radius: 50%;
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.social-links a .fa {
    position: relative;
    z-index: 2;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.social-links a:hover {
    transform: scale(1.3);
}

.social-links a.fb-link:hover {
    color: #3b5998;
}

.social-links a.tw-link:hover {
    color: #00aced;
}

.social-links a.insta-link:hover {
    color: purple;
}

.social-links a.ld-link:hover {
    color: #0077b5;
}

.social-links a.wa-link:hover {
    color: #25d465;
}

.social-links a.te-link:hover {
    color: #1da1f2;
}

.footer-address {
    color: black;
    display: block;
    width: fit-content;
    margin: 10px auto;
    font-size: 12px;
    text-align: center;
}

.footer-address:hover {
    color: var(--color-4);
    /* text-decoration: underline; */
}



.copyright {
    color: #777;
    font-size: 11px;
    margin: 0;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 400;
    display: inline-block;
}

.mede-with {
    color: #777;
    font-size: 11px;
    margin: 0;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 400;
    display: inline-block;
}

.mede-with a {
    color: #777;
}

.mede-with a:hover {
    color: #c20017;
}

.icons-box-made {
    width: 12px;
    height: 12px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    top: 3px;
}

.icons-box-made .fa-heart,
.icons-box-made .fa-heart-o {
    position: absolute;
}

.mede-with .fa-heart-o {
    color: #777;
    font-size: 11px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 1;
}

.mede-with .fa-heart {
    color: #777;
    font-size: 11px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.mede-with:hover .fa-heart-o {
    opacity: 0;
}

.mede-with:hover .fa-heart {
    opacity: 1;
    color: #c20017;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

/* ---
serch-popup css
--- */
.serch-popup {
    position: fixed;
    height: calc(100vh);
    top: 0px;
    left: 0px;
    background-color: white;
    width: 100%;
    z-index: 1024;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity, visibility, 0.3s ease-in-out;
    -o-transition: opacity, visibility, 0.3s ease-in-out;
    transition: opacity, visibility, 0.3s ease-in-out;
    padding-top: 60px;
    padding-bottom: 60px;
}

.serch-popup.active {
    opacity: 1;
    visibility: visible;
}

.serch-popup-inner {
    max-width: 768px;
    width: 100%;
    margin: auto;
    padding: 0 15px;
}

.serch-popup-inner>h6 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-3);
}

.serch-popup-inner .form-gorup-search {
    margin: 20px auto;
}

.popup-most-popular>h6 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 1px;
}

.mps-tag-bx {
    margin-bottom: 20px;
}

.mps-tag-bx span {
    background: #e9e9e92e;
    border: 1px solid #e9e9e9;
    color: #333333;
    border-radius: 50px;
    text-transform: none;
    display: inline-block;
    padding: 3px 12px 4px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.mps-tag-bx span:hover {
    background: #295ea212;
    color: var(--color-1);
    border-color: var(--color-1);
}


.search-suggestions {
    position: absolute;
    left: 0;
    width: 100%;
    top: 102%;
    background: white;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: 0 1px 0 1px #e9e9e9;
    box-shadow: 0 1px 0 1px #e9e9e9;
    max-height: 160px;
    overflow: hidden;
    overflow-y: auto;
    padding: 5px;
    z-index: 2;
    display: none;
}

.search-suggestions .sug-item {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color-6);
    padding: 7px 14px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.search-suggestions .sug-item:hover {
    background: #295ea212;
    color: var(--color-1);
    border-color: var(--color-1);
}


/* ---
Search Page Css
--- */

.search-page {
    padding: 10px;
    padding-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1460px;
    width: 100%;
    margin: auto;
}

/* Search page left Css */
.spage-left {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 350px;
    flex: 0 1 350px;
    width: 350px;
    padding: 10px;
    padding-top: 0;
}

.sp-left-inner {
    background-color: white;
    border-radius: 5px;
    padding-bottom: 100px;
    height: calc(100vh - 170px);
    overflow: hidden;
    overflow-y: auto;
    position: sticky;
    top: 155px;
    border: 1px solid #eeeeee;
}

.sp-left-header {
    padding: 15px 15px 10px;
    position: relative;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    border-bottom: 1px solid rgb(240, 240, 240);
}

.sp-left-header .commun-close-icon {
    /* position: fixed; */
    top: 5px;
    right: 5px;
    /* z-index: 1; */
    width: 30px;
    height: 30px;
    padding: 2px;
    /* border-radius: 50%;
    background: #ffffffcc; */
    display: none;
}

.sp-left-header h6 {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-3);
    margin-bottom: 3px;
}

.sp-left-header p {
    font-size: 12px;
    color: #777777;
    margin: 0;
    font-weight: 500;
}

.reset-btn,
.all-reset-btn {
    position: absolute;
    right: 13px;
    top: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 8px;
    display: block;
    color: #d9d9d9;
    border-radius: 3px;
    letter-spacing: 0.5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.reset-btn {
    right: 28px;
    top: 6.5px;
    opacity: 0;
    visibility: hidden;
}

.reset-btn.active,
.all-reset-btn.active {
    color: var(--color-1);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}

.reset-btn.active:hover,
.all-reset-btn.active:hover {
    background-color: rgba(34, 118, 227, 0.1);
}

.acc-item {
    position: relative;
    padding: 0 15px;
    border-top: 1px solid rgb(240, 240, 240);
}

.acc-item .acc-heding {
    color: var(--color-1);
    padding: 10px 0px;
    background: transparent;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    margin: 0px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding-right: 20px;
}

.acc-item .acc-heding.collapsed:hover {
    color: var(--color-3);
}

.acc-item .acc-heding.collapsed {
    color: var(--color-3);
}

.acc-item .acc-heding span.down-icon {
    border-style: solid;
    border-color: currentColor;
    -o-border-image: initial;
    border-image: initial;
    border-width: 0px 2px 2px 0px;
    display: inline-block;
    padding: 3px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 0px;
    top: 15px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.acc-item .acc-heding.collapsed span.down-icon {
    top: 20px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.acc-item .acc-detail {
    position: relative;
}

.checkbox-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0em;
    margin-bottom: 10px;
}

.checkbox-group input {
    display: none;
}

.checkbox-group label {
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    /* white-space: nowrap; */
    cursor: pointer;
    position: relative;
    color: #000000;
    text-transform: capitalize;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 2px 0px;
    padding: 5px 10px 5px 25px;
    overflow: hidden;
    border-radius: 3px;
}

.checkbox-group.width-50 label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}


.checkbox-group label .fa {
    margin: 4px 1px 4px;
    color: #d1d1d1;
}

.checkbox-group label .fa.active {
    color: #FDBA00;
}


.checkbox-group label span.num-tag {
    position: absolute;
    right: 0px;
    top: 2px;
    font-size: 12px;
    background: white;
    width: 30px;
    text-align: right;
    display: block;
}

.checkbox-group label img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: bottom;
    object-position: bottom;
    margin-right: 5px;
}

.checkbox-group label:hover {
    color: var(--color-3);
}

.checkbox-group label::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 6.5px;
    width: 18px;
    height: 18px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 18px;
    flex: 0 0 18px;
    border: 2px solid #dbdbdb;
    display: block;
    border-radius: 3px;
}


.checkbox-group label::after {
    content: "";
    width: 18px;
    height: 18px;
    left: 3px;
    top: 6.5px;
    border-radius: 3px;
    background-color: var(--color-1);
    background-image: url("/static/main_app/img/icons/check.png");
    background-position: center;
    background-size: 14px;
    background-repeat: no-repeat;
    position: absolute;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s -webkit-transform ease;
    transition: 0.3s -webkit-transform ease;
    -o-transition: 0.3s transform ease;
    transition: 0.3s transform ease;
    transition: 0.3s transform ease, 0.3s -webkit-transform ease;
    display: block;
}

.checkbox-group.with-radio label::before,
.checkbox-group.with-radio label::after {
    border-radius: 50%;
}


.checkbox-group input:checked+label {
    color: var(--color-3);
}


.checkbox-group label:hover::before,
.checkbox-group input:checked+label::before {
    border-color: var(--color-1);
}

.checkbox-group input:checked+label::after {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.cg-style-2 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.cg-style-2 label {
    width: 47%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 47%;
    flex: 0 0 47%;
    padding: 5px 10px 5px;
    border-radius: 5px;
    /* border: 1px solid var(--color-1); */
    position: relative;
    margin: 24px 0 8px;
    background: rgb(245 245 245);
    color: #777777;
    font-size: 14px;
    overflow: inherit;
}

.ft-cb label,
.step-box label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cur-radio label {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
}

.box-m label {
    margin: 5px 5px 5px 0;
}

.cg-style-2 label .inner-lable {
    font-size: 12px;
    font-weight: 500;
    color: rgb(119, 119, 119);
    position: absolute;
    padding: 0px 5px;
    left: -4px;
    top: -20px;
    background-color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
    /* color: rgba(34, 118, 227, 0.1); */
}

.cg-style-2 label::before,
.cg-style-2 label::after {
    content: none;
}

.cg-style-2 label:hover {
    background: rgba(34, 118, 227, 0.1);
    color: var(--color-1);
}

.cg-style-2 input:checked+label {
    background: var(--color-1);
    color: white;
}


.search-over {
    opacity: 0;
    visibility: hidden;
}

/* ---
Search page right Css
--- */
.spage-right {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 calc(100% - 300px);
    flex: 0 1 calc(100% - 300px);
    width: calc(100% - 300px);
    padding: 10px;
    padding-top: 0;
}

/* --- spr-sort --- */
.spr-sort {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 20px;
    padding-top: 10px;
}

.spr-sort>.show-result {
    font-size: 12px;
    color: #777777;
    margin: 0;
    font-weight: 600;
    position: absolute;
    left: 0px;
    bottom: 5px;
}

.sort-bx {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sort-bx h6.sort-heding {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-3);
    display: inline-block;
}

.sort-item {
    display: inline-block;
    width: 150px;
    margin-left: 5px;
    position: relative;
}

.sort-item .sort-inner {
    background: white;
    padding: 2px 30px 2px 10px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #777777;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    -webkit-box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px;
    box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px;
}

.sort-item .sort-inner .sort-best-tag {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.sort-item:hover .sort-inner {
    color: var(--color-1);
}


.sort-item .sort-inner .down-icon {
    border-style: solid;
    border-color: currentColor;
    -o-border-image: initial;
    border-image: initial;
    border-width: 0px 2px 2px 0px;
    display: inline-block;
    padding: 3px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: 10px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sort-item:hover .sort-inner .down-icon {
    top: 13px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.sort-drop-bx {
    position: absolute;
    top: 110%;
    left: 50%;
    z-index: 1;
    background: white;
    border-radius: 3px;
    width: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px;
    box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px;
}

.sort-item:hover .sort-drop-bx {
    opacity: 1;
    visibility: visible;
}

.sort-drop-item {
    background: #ffffff;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #777777;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    border-bottom: 1px solid rgb(240, 240, 240);
}

.sort-drop-item:last-child {
    border-bottom: none;
}

.sort-drop-item .sort-best-tag {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.sort-drop-item.active,
.sort-drop-item:hover {
    color: var(--color-1);
    background: rgb(221 221 221 / 10%);
}


.filter-icon {
    /* display: none; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.filter-icon h6.sort-heding {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-3);
    display: inline-block;
}

.filter-icon .filter-img {
    width: 35px;
    height: 35px;
    padding: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 3px;
    margin-left: 5px;
    background: white;
    -webkit-box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px;
    box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.filter-icon:hover .filter-img {
    color: var(--color-1);
}

.filter-icon.active .filter-img {
    background-color: var(--color-1);
    color: white;
}

.filter-icon .filter-img svg {
    width: 100%;
    height: 100%;
    -o-object-position: center;
    object-position: center;
    -o-object-fit: contain;
    object-fit: contain;
}



.spr-filler-bx {
    background: #4294ff;
    width: 65px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    color: white;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding: 6px 4px;
    display: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 1020;
}

.spr-filler-bx svg {
    width: 24px;
    height: 24px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 24px;
            flex: 0 0 24px;
    margin: 0 auto 5px;
}

/* ---
Detail Page Css
--- */

.detail-top-bx {
    position: relative;
    width: 100%;
    background: linear-gradient(0deg, var(--color-2) 0%, var(--color-1) 70%);
}


.detail-top-bx svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

.dtb-inner {
    padding: 25px 0 90px;
}

.dtd-left {
    display: flex;
}

.dl-left {
    padding: 0px 10px;
}

.dl-right {
    flex-grow: 1;
    padding-left: 10px;
}

.trainer-profile .trainer-img {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin: auto;
    background-color: #f3f3f3;
    border-radius: 50%;
    box-shadow: 0px 0px 0 2px var(--white), 0px 0px 0 4px var(--color-1);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.trainer-profile .trainer-img img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


h6.dtd-name {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 5px;
}


.dtd-star-bx {
    margin-bottom: 5px;
    display: block;
    width: fit-content;
}

.dtd-star-bx .fa {
    color: black;
    margin-right: -3px;
    font-size: 15px;
}

.dtd-star-bx .fa.active {
    color: #fda802;
}

.dtd-star-bx>span.reviews-point {
    color: #ffffff;
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 0px 0px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
    letter-spacing: 1.5px;
    margin-left: 3px;
}

.dtd-star-bx>span.reviews-num {
    color: #ffffff;
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 0px 0px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
    letter-spacing: 1.5px;
    margin-left: 3px;
}

.dtd-specializes span {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 5px;
    display: inline-block;
    position: relative;
    padding: 0 5px;
}

.dtd-specializes span:first-child {
    padding: 0 5px 0 0;
}

.dtd-specializes span::after {
    content: "";
    position: absolute;
    left: -0.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 60%;
    box-shadow: 0 0 0 0.5px #ffffff;
}

.dtd-specializes span:first-child:after {
    content: none;
}


.dtd-about {
    margin-top: 15px;
}

.dtd-about,
.dtd-about>* {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: #ffffff;
}

.trainer-other-detail {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    background: white;
    border-radius: 5px;
    padding: 15px 10px;
    margin-bottom: -90px;
    z-index: 1;
    position: relative;
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
}

.trainer-other-detail .tod-item {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0px;
    color: var(--color-1);
    padding: 5px 5px;
    display: inline-block;
    width: 25%;
    flex: 0 0 25%;
}

.trainer-other-detail .tod-item span {
    display: block;
    font-size: 13px;
    color: black;
    display: block;
    margin: 1px 0 3px 0;
    font-weight: 500;
}

.dr-tf-bx {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    padding: 10px;
}

.dr-tf-bx .tficon {
    position: absolute;
    left: 10px;
    top: 7px;
    width: 25px;
    height: 25px;
}

.dr-tf-bx .tf-title {
    color: var(--color-3);
    font-size: 14px;
    padding-left: 30px;
    text-transform: capitalize;
    line-height: 1.4;
    margin-bottom: 10px;
}

.dr-tf-bx .tf-price-bx {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0px;
    color: var(--color-1);
    display: block;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0px;
    color: var(--color-1);
    display: block;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    width: 48%;
    margin: 5px 0;
    background: #f2f2f2;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    width: 48%;
    margin: 5px 0;
    background: #f2f2f2;
}

.dr-tf-bx .tf-price-bx span {
    font-size: 14px;
    color: var(--color-4);
    font-weight: 500;
}

.dr-tf-bx .tf-hire-btn {
    border: none;
    outline: none;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 5px;
    background-color: var(--color-1);
    color: var(--white);
    cursor: pointer;
    margin-top: 5px;
    width: 100%;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
}

.dr-tf-bx .tf-hire-btn:hover {
    background-color: var(--color-2);
}


.dr-tf-bx .tf-hire-btn-not-loggedin {
    border: none;
    outline: none;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 5px;
    background-color: var(--color-1);
    color: var(--white);
    cursor: pointer;
    margin-top: 5px;
    width: 100%;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
}

.dr-tf-bx .tf-hire-btn-not-loggedin:hover {
    background-color: var(--color-2);
}


.dr-pv-bx {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    padding: 10px;
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
}

.dr-pv-bx .pv-title {
    color: var(--color-3);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    line-height: 1.4;
    margin-bottom: 5px;
    padding: 0px 5px 7px 5px;
    border-bottom: 1px solid #efefef;
}

.dr-pv-bx .pv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dr-pv-bx .pv-item a {
    font-size: 14px;
    color: black;
    font-weight: 500;
    display: block;
    padding: 3px 8px;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.dr-pv-bx .pv-item a:hover {
    color: var(--color-1);
    background-color: var(--background-color-2);
}

.dr-pv-bx .pv-item span {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0px;
    color: black;
    padding: 5px 5px;
}

.dr-pv-bx .pv-item span .fa {
    margin-right: 8px;
    color: green;
}

.dr-pv-bx .pv-item img {
    width: 13px;
    opacity: 0;
    visibility: hidden;
    margin-right: 10px;
}

.dr-pv-bx .pv-item.verified span {
    color: green;
}

.dr-pv-bx .pv-item.verified img {
    opacity: 1;
    visibility: visible;
}

.dr-pv-bx a.pv-item img {
    opacity: 1;
    visibility: visible;
}

.dr-pv-bx a.pv-item:hover *,
.dr-pv-bx a.pv-item:hover{
    color: var(--color-1) !important;
}



/* ---
--- */
.dti-bx {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    padding: 10px;
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
}

.dti-bx .dti-title {
    color: var(--color-3);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    line-height: 1.4;
    margin-bottom: 5px;
    padding: 0px 5px 7px 5px;
    border-bottom: 1px solid #efefef;
}



.dti-list-bx {
    margin-top: 0px;
    margin-bottom: 5px;
}

.dti-list-bx li {
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-3);
    border: 1.5px solid #e9e9e9;
    background: #d3d3d333;
    position: relative;
    /* cursor: pointer; */
    transition: all 0.3s ease-in-out;
    display: inline-block;
    border-radius: 5px;
    margin: 5px 5px 1px 0;
    transition: all 0.3s ease-in-out;
}

.custom-sticky {
    position: sticky;
    top: 100px;
}



/* aedgvsrh */

.profile-pic-bx{
    position: relative;
    margin: 25px auto 15px;
    width: fit-content;
}

.profile-pic-name{
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--color-3);
    position: relative;
    top: 1.5px;
    margin-bottom: 10px;
}

.profile-pic-lable {
    display: block;
    margin: 0;
}

.profile-pic-img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    margin: 10px auto;
    display: block;
    box-shadow: 0px 0px 0px 3px white, 0px 0px 0px 5px var(--color-1);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.logo-pic-img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    margin: 10px auto;
    display: block;
    box-shadow: 0px 0px 0px 3px white, 0px 0px 0px 5px var(--color-1);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.profile-pic-btn{
    position: absolute;
    bottom: 1px;
    border: none;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 18px;
    background: #fbfbfb;
    box-shadow: 0 0 10px #00000029;
    margin: 0;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.profile-pic-btn .fa{
    pointer-events: none;
}

.profile-pic-btn.edit-btn{
    right: 0;
    color: #2c8eca;
    font-size: 16px;
}

.profile-pic-btn.edit-btn .fa{
    position: relative;
    left: 1px;
    top: 1px;
}

.profile-pic-btn.delete-btn{
    left: 0;
    color: #e30000;
}

.profile-pic-btn.delete-btn .fa{
    position: relative;
    left: -1px;
    top: 1px;
}

.profile-pic-btn.edit-btn:hover{
    color: white;
    background-color: #2c8eca;
}

.profile-pic-btn.delete-btn:hover{

    color: white;
    background-color: #e30000;
}

/* ---
On Dimand Slider
--- */
.in-demand-bx {
    background: linear-gradient(0deg, #f3faff, transparent);
}

.in-demand-slider .courses-item {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    margin: 0;
}

.cfeagsrh{
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
}


/* ---
Accroding Css
--- */

.faqs-accroding .acc-item {
    position: relative;
    padding: 0 15px;
    background: #fcfcfc;
    border: none;
    box-shadow: 0 0 0px 1px #f0f0f0;
    border-radius: 15px;
    margin-bottom: 15px;
    transition: all 0.3s linear;
}

.faqs-accroding .acc-item:hover {
    box-shadow: 0 0 0px 1px var(--color-1);
}

.faqs-accroding .acc-item .acc-heding {
    color: var(--color-1);
    padding: 15px 20px 15px 0px;
    background: transparent;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 16px;
    margin: 0px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.faqs-accroding .acc-item .acc-heding .fa {
    margin-right: 5px;
    color: #3ea69c;
}

.faqs-accroding .acc-item .acc-heding.collapsed:hover .fa,
.faqs-accroding .acc-item .acc-heding.collapsed:hover {
    color: var(--color-1);
}

.faqs-accroding .acc-item .acc-heding.collapsed .fa,
.faqs-accroding .acc-item .acc-heding.collapsed {
    color: black;
}

.faqs-accroding .acc-item .acc-heding span.down-icon {
    border-style: solid;
    border-color: currentColor;
    -o-border-image: initial;
    border-image: initial;
    border-width: 0px 2px 2px 0px;
    display: inline-block;
    padding: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 5px;
    top: 18px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.faqs-accroding .acc-item .acc-heding.collapsed span.down-icon {
    top: 25px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.faqs-accroding .acc-item .acc-detail {
    position: relative;
}

.faqs-accroding .acc-item .acc-detail .acc-detail-inner {
    padding-bottom: 15px;
}

.faqs-accroding .acc-item .acc-detail .acc-detail-inner p {
    color: var(--color-4);
    margin: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}


/* --- Detail Accordion Start --- */
.detailaccordion .acc-item {
    position: relative;
    padding: 0 15px;
    border: none;
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
    margin-bottom: 15px;
    transition: all 0.3s linear;
}

.detailaccordion .acc-item:first-child{
    border-radius: 10px 10px 0 0;
}

.detailaccordion .acc-item:last-child{
    border-radius: 0 0 10px 10px;
}

.detailaccordion .acc-item:hover {
    box-shadow: 0 0 0px 1px var(--color-1), 0 0 10px #00000014;
}

.detailaccordion .acc-item .acc-heding {
    display: flex;
    align-items: center;
    color: var(--color-1);
    padding: 15px 20px 15px 0px;
    background: transparent;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 16px;
    margin: 0px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.detailaccordion .acc-item .acc-heding .acc-num{
    color: black;
    border: 1px solid #f0f0f0;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detailaccordion .acc-item .acc-heding.collapsed:hover {
    color: var(--color-1);
}

.detailaccordion .acc-item .acc-heding.collapsed {
    color: #333;
}

.detailaccordion .acc-item .acc-heding .acc-icon-bx {
    position: absolute;
    right: 5px;
    top: 16px;
    width: 22px;
    height: 22px;
    background-image: url(/static/main_app/img/icons/remove.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    transform: rotate(45deg);
    transition: all 0.3s ease;
    filter: grayscale(0);
}

.detailaccordion .acc-item .acc-heding.collapsed .acc-icon-bx {
    background-image: url("/static/main_app/img/icons/plush.png");
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    filter: grayscale(1);
}

.detailaccordion .acc-item:hover .acc-heding.collapsed .acc-icon-bx {
    filter: grayscale(0);
}

.detailaccordion .acc-item .acc-detail {
    position: relative;
    border-top: 1px solid #f0f0f0;
}

.detailaccordion .acc-item .acc-detail .acc-detail-inner {
    padding-top: 15px;
    padding-bottom: 15px;
}



.common-detail-list{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 10px;
}

.common-detail-list > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #484848;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--font-2);
    background-color: #fbfbfb;
    border: 1px solid rgb(0 0 0 / 6%);
    padding: 5px 10px;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    margin: 0;
}

/* --- Detail Accordion End --- */


/* --- --- */
.detail-tab-item{
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 40px 12px 12px;
    background: transparent;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    margin-bottom: 15px;
    border-radius: 10px;
    transition: all 0.3s linear;
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
}

.detail-tab-item:hover{
    color: var(--color-1);
    box-shadow: 0 0 0px 1px var(--color-1), 0 0 10px #00000014;
}

.detail-tab-item .dti-num{
    color: black;
    border: 1px solid #f0f0f0;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-tab-item .dti-icon-bx {
    position: absolute;
    right: 10px;
    top: 14px;
    width: 22px;
    height: 22px;
    background-image: url("/static/main_app/img/icons/plush.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    transition: all 0.3s ease;
    filter: grayscale(1);
}

.detail-tab-item:hover .dti-icon-bx{
    filter: grayscale(0);
}
/* --- --- */


/* ---
review Section css
--- */
.review-item {
    position: relative;
    display: block;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    padding: 20px 10px 10px 10px;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s linear;
}

#profile-review .owl-item{
    padding: 7px 13px;
}

.review-item:hover {
    background-color: #ffffff25;
    backdrop-filter: 12px;
}

.review-item .review-star-bx {
    margin-top: 5px;
    display: block;
    text-align: center;
}

.review-item .review-star-bx .fa {
    color: #cbcbcb;
    margin-right: -1px;
    font-size: 15px;
}

.review-item .review-star-bx .fa.active {
    color: #fda802;
}

.review-item .review-star-bx>span {
    background: #f3f8ff;
    color: var(--color-1);
    border: 0.5px solid var(--border-color-1);
    border-radius: 4px;
    text-transform: none;
    display: inline-block;
    padding: 0px 8px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    margin-left: 5px;
}

.review-item p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: white;
    margin-top: 5px;
    margin-bottom: 0;
    position: relative;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.review-item h6 {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 8px;
    color: white;
    text-align: center;
}

.review-item .review-img {
    position: relative;
    width: 70px;
    height: 70px;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 15px;
    -webkit-box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 6px var(--background-color-2);
    box-shadow: 0px 0px 0 2px var(--white), 0px 0px 0 4px var(--background-color-2);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.review-item .review-img img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.review-item .review-read{
    background-color: rgb(255, 255, 255);
    padding: 3px 10px 6px;
    box-shadow: 0 0 20px #0000001a;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-1) !important;
    border-radius: 50px;
    width: fit-content;
    font-size: 14px;
    margin: 10px auto 10px;
    transition: all 0.3s ease-in-out;
}

.review-item .review-read:hover{
    background-color: var(--color-1) !important;
    color: white !important;
}

.review-item .review-quote-left{
    position: absolute;
    left: -13px;
    top: -7px;
    width: 50px !important;
    height: 50px !important;
    transform: rotate(167deg);
}

.review-item .review-quote-right{
    position: absolute;
    right: -13px;
    bottom: -7px;
    width: 50px !important;
    height: 50px !important;
    transform: rotate(13deg);
}


.review-popup .review-item{
    padding: 0;
    border: none;
    background: none;
}

.review-popup .review-item p {
    color: #000;
    display: inherit;
    -webkit-box-orient: inherit;
    -webkit-line-clamp: inherit;
    overflow: inherit;
}

.review-popup .review-item h6 {
    color: var(--color-1);
}


/* ---
Material Accroding Css
--- */

.material-accroding .acc-item {
    position: relative;
    padding: 0 15px;
    background: white;
    border: none;
    box-shadow: 0 0 0px 1px #f0f0f0;
    margin-bottom: 15px;
    transition: all 0.3s linear;
}

.material-accroding .acc-item:first-child {
    border-radius: 15px 15px 0 0;
}

.material-accroding .acc-item:last-child {
    border-radius: 0 0 15px 15px;
}

.material-accroding .acc-item:hover {
    box-shadow: 0 0 0px 1px var(--color-1);
}

.material-accroding .acc-item .acc-heding {
    color: var(--color-1);
    padding: 15px 20px 15px 0px;
    background: white;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 16px;
    margin: 0px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    pointer-events: none;
}


.material-accroding .acc-item .acc-heding .material-include {
    margin-top: 5px;
    /* display: none; */
    /* display: inline-block; */
    /* margin-left: 10px; */
}

.material-accroding .acc-item .acc-heding .material-include .include-span {
    margin-right: 10px;
    color: var(--color-4);
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

.material-accroding .acc-item .acc-heding.collapsed .material-include .include-span {
    color: black;
}

.material-accroding .acc-item .acc-heding .material-include .include-span img {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    margin-left: 0px;
    position: relative;
    top: -1px;
}

.material-accroding .acc-item .acc-heding.collapsed .material-include .include-span img {
    filter: grayscale(0);
}

.material-accroding .acc-item .acc-heding .fa {
    margin-right: 5px;
    color: #3ea69c;
}

.material-accroding .acc-item .acc-heding.collapsed:hover .fa,
.material-accroding .acc-item .acc-heding.collapsed:hover {
    color: var(--color-1);
}

.material-accroding .acc-item .acc-heding.collapsed .fa,
.material-accroding .acc-item .acc-heding.collapsed {
    color: var(--color-3);
}

.material-accroding .acc-item .acc-heding span.down-icon {
    border-style: solid;
    border-color: currentColor;
    -o-border-image: initial;
    border-image: initial;
    border-width: 0px 2px 2px 0px;
    display: inline-block;
    padding: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 5px;
    top: 18px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.material-accroding .acc-item .acc-heding.collapsed span.down-icon {
    top: 25px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.material-accroding .acc-item .acc-detail {
    position: relative;
}

.material-accroding .acc-item .acc-detail .material-inner {
    padding-bottom: 5px;
}

.material-row>div {
    margin-bottom: 15px;
    padding: 0 15px;
}

.material-list-item {
    box-shadow: 0 0 0px 1px #f0f0f0;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    /* align-items: center; */
    transition: all 0.3s linear;
    background: #fafafa;
}

.material-list-item:hover {
    box-shadow: 0 0 0px 1px var(--color-1);
    background-color: var(--background-color-3);
}

.material-list-item img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-right: 10px;
}

.material-text {
    width: 100%;
    flex: 0 1 100%;
}


.material-list-item .material-text h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 3px;
    color: var(--color-3);
    transition: all 0.3s linear;
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; */
    overflow: hidden;
}

.material-list-item:hover .material-text h6 {
    color: var(--color-1);
}

.material-list-item .material-text .material-price {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 3px;
    color: var(--color-3);
    transition: all 0.3s linear;
}



.topics-bx {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.topics-bx .topics-item {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-4);
    text-transform: capitalize;
    padding: 0px 5px 0px 5px;
    width: 100%;
    line-height: 1.7;
}

/* .topics-bx .topics-item::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 16px;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background: var(--color-5);
    border-radius: 50%;
} */

.material-buy-bx {
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
    background-color: white;
    border-radius: 10px;
    position: relative;
    padding: 15px;
}

.material-buy-bx .mbricon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
}

.material-buy-bx .material-buy-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0px;
    color: var(--color-4);
    display: block;
    margin-bottom: 10px;
}

.material-buy-bx .material-price-bx {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0px;
    color: var(--color-1);
    display: inline-block;
    margin-bottom: 5px;
}

.material-buy-bx .material-price-bx span {
    text-decoration: line-through;
    color: #9b9b9b;
    font-size: 16px;
    margin-left: 7px;
    font-weight: 400;
}

.material-buy-bx p {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-4);
    text-transform: capitalize;
    margin-bottom: 5px;
    line-height: 1.6;
}


.material-buy-bx .material-buy-btn {
    border: none;
    outline: none;
    padding: 0px 20px;
    font-weight: 400;
    font-size: 16px;
    border-radius: 50px;
    background-color: var(--color-2);
    color: var(--white);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 33px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-box-shadow: 0 0 0 1px var(--color-2);
    box-shadow: 0 0 0 1px var(--color-2);
    margin-top: 5px;
}

.material-buy-bx .material-buy-btn .fa {
    margin-right: 5px;
}

.material-buy-bx .material-buy-btn:hover {
    background-color: var(--color-1);
    -webkit-box-shadow: 0 0 0 1px var(--color-1);
    box-shadow: 0 0 0 1px var(--color-1);
}


/* ---
--- */

.ftm-list-bx {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
}

.ftm-list-bx .ftm-item-outer {
    width: 20%;
    flex: 0 0 20%;
    padding: 0 10px;
    margin-top: 20px;
}

.ftm-item {
    -webkit-box-shadow: 0 0px 0px 1px rgb(0 0 0 / 6%);
    box-shadow: 0 0px 0px 1px rgb(0 0 0 / 6%);
    border-radius: 10px;
    padding: 10px 10px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.ftm-item:hover {
    -webkit-box-shadow: 0 0px 15px 0px rgb(0 0 0 / 11%);
    box-shadow: 0 0px 15px 0px rgb(0 0 0 / 11%);
}

.ftm-item .ftm-item-img {
    width: 55px;
    border-radius: 50px;
    flex: 0 0 55px;
    filter: grayscale(0.2);
    transition: all 0.3s linear;
}

.ftm-item:hover .ftm-item-img {
    transform: scale(1.05);
    box-shadow: 0 0 50px -15px #a2a2a2;
}

.ftm-item .ftm-item-img img {
    width: 100%;
}

.ftm-item .ftm-heading {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--color-4);
    text-transform: capitalize;
    margin-left: 15px;
}


/* ---
Hire popup 
--- */

.hire-popup {
    background: linear-gradient(45deg, #f0f6fe, #faf1fa);
    background-repeat: no-repeat;
    min-height: 420px;
    width: 100%;
    -webkit-box-shadow: 0 0 20px #0000002e;
    box-shadow: 0 0 20px #0000002e;
    border-radius: 5px;
    position: relative;
    padding: 25px 20px 20px;
    margin: auto;
}

/* ---
Flash Message Popup Start
--- */

.flash-message-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background-color: #00000073;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 10px 50px;
    opacity: 0;
    visibility: hidden;
    display: none;
}

.flash-message-popup.fmp-active {
    opacity: 1;
    visibility: visible;
}

.flash-message-popup.fmp-deactive {
    backdrop-filter: blur(2px);
}

.flash-message {
    background-color: white;
    border-radius: 10px;
    padding: 20px 40px 20px 15px;
    max-width: 450px;
    width: 95%;
    position: relative;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    z-index: 1101;
    -webkit-box-shadow: 0 0 15px #0000003d;
    box-shadow: 0 0 15px #0000003d;
    -webkit-transition: all 0.1s cubic-bezier(0.215, 0.610, 0.355, 1);
    -o-transition: all 0.1s cubic-bezier(0.215, 0.610, 0.355, 1);
    transition: all 0.1s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.flash-message-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    /* align-items: center; */
}

.flash-message.fmp-message {
    opacity: 1;
    visibility: visible;
}

.flash-message .flash-img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-top: 5px;
}

.flash-message.ef-msg .flash-text h6 {
    font-weight: 600;
    font-size: 20px;
    color: red;
    margin-bottom: 0px;
}

.flash-message.sf-msg .flash-text h6 {
    font-weight: 500;
    font-size: 18px;
    color: #28a745;
    margin-bottom: 0px;
}

.flash-message .flash-text p {
    color: #484848;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
    margin-top: 3px;
}

.flash-message .flash-text{
    flex: 1 1 auto;
}

.flash-message .flash-text .flash-btn {
    color: var(--color-1);
    border: 1px solid var(--color-1);
    background-color: white;
    background-size: 200%;
    background-position: left center;
    padding: 4px 12px;
    border-radius: 5px;
    font-family: var(--font-2);
    font-weight: 600;
    cursor: pointer;
    display: block;
    outline: none;
    margin-right: -20px;
    margin-bottom: -5px;
    margin-top: 7px;
    margin-left: auto;
    transition: all 0.3s ease-in-out;
}

.flash-message .flash-text .flash-btn:hover {
    color: white;
    border-color: transparent;
    background-color:  var(--color-1);
}

.flash-message .msg-close {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333333;
    font-size: 18px;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.flash-message .msg-close:hover {
    color: red;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.flash-message .msg-close svg {
    width: 100%;
    height: 100%;
}

/* ---
Flash Message Popup End
--- */





.my-profile-downnload {
    background: transparent;
    display: block;
    padding: 8px 15px;
    border-radius: 50px;
    width: fit-content;
    color: white;
    font-weight: 600;
    font-family: var(--font-2);
    font-size: 14px;
    border: 1px solid white;
    transition: all 0.3s ease-in-out;
}

.my-profile-downnload .fa {
    margin-right: 5px;
    font-size: 16px;
}

.my-profile-downnload:hover {
    background-color: rgb(182, 23, 23);
    color: white;
    text-decoration: none;
    border-color: rgb(182, 23, 23);
}


/*  */

.my-profile-downnload-not-loggedin {
    background: transparent;
    display: block;
    padding: 8px 15px;
    border-radius: 50px;
    width: fit-content;
    color: white;
    font-weight: 600;
    font-family: var(--font-2);
    font-size: 14px;
    border: 1px solid white;
    transition: all 0.3s ease-in-out;
}

.my-profile-downnload-not-loggedin .fa {
    margin-right: 5px;
    font-size: 16px;
}

.my-profile-downnload-not-loggedin:hover {
    background-color: rgb(182, 23, 23);
    color: white;
    text-decoration: none;
    border-color: rgb(182, 23, 23);
}




/*  */







.searchbdngf {
    position: relative;
}

.searchbdngf button {
    height: 38px;
    width: 38px;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 16px;
    color: var(--color-1);
    background-color: var(--background-color-3);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    border: 1px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.searchbdngf:hover button {
    color: #fff;
    background-color: var(--color-1);
    border-color: var(--color-1);
}



/* --- 
Plans Popup Design Css
--- */
#plans-popup::-webkit-scrollbar {
    display: none;
}

.plans-dialog {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    padding: 5px;
    align-items: inherit;
}

.plans-dialog .modal-content {
    margin-top: 50px;
}

.plans-popup-bx {
    background-color: white;
    border-radius: 10px;
    /* position: relative; */
    padding: 15px;
    font-family: 'Nunito', sans-serif !important;
}

.scroll-popup{
    max-height: calc(100vh - 120px);
    overflow: hidden;
    overflow-y: auto;
}

.scroll-popup .commun-close-icon{
    background-color: white !important;
    z-index: 1;
    box-shadow: 0 0 5px #00000021;
}

.popup-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-3);
    margin: 0;
    font-family: 'Nunito', sans-serif !important;
    text-align: center;
    text-transform: capitalize;
}

.popup-pera {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-4);
    margin: 0;
    margin-top: 5px;
    font-family: 'Nunito', sans-serif !important;
    text-align: center;
    text-transform: capitalize;
}

.plans-tab {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    display: none;
}

.plan-item {
    position: relative;
    background: #f5f5f5;
    padding: 10px 30px 10px 64px;
    border-radius: 15px 15px 0 0;
    cursor: pointer;
}

.plan-type-img {
    width: 35px;
    height: 35px;
    display: block;
    background: white;
    border-radius: 5px;
    padding: 3px;
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 1;
    object-fit: contain;
    object-position: center;
    transform: translateY(-50%);
}

.plan-head {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-3);
    margin: 0px 0px 0 0;
    font-family: 'Nunito', sans-serif !important;
    text-transform: capitalize;
    /* text-align: center; */
    white-space: nowrap;
}

#profiladd-popup{
    backdrop-filter: blur(5px);
}

/* .plan-price {
    text-align: center;
    white-space: nowrap;
}

.plan-price span:first-child {
    font-size: 20px;
    font-weight: 600;
    color: #295ea2;
    margin: 0px 0 0 0;
    font-family: 'Nunito', sans-serif !important;
    text-transform: capitalize;
    display: inline-block;
}

.plan-price span:last-child {
    font-size: 14px;
    font-weight: 600;
    color: black
    margin: 0px 0px 0 0;
    font-family: 'Nunito', sans-serif !important;
    text-transform: capitalize;
    display: inline-block;
} */

.plan-item.plan-selected {
    cursor: pointer;
    background-color: #295ea2;
}

.plan-item .premium {
    background-color: #f0c400;
}

.plan-item.plan-selected .plan-price span:last-child,
.plan-item.plan-selected .plan-price span:first-child,
.plan-item.plan-selected .plan-head {
    color: white;
}

.plan-item b {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 1px;
    z-index: 1;
    background-color: #295ea2;
    visibility: hidden;
}

.plan-item.plan-premium.plan-selected,
.plan-item.plan-premium.plan-selected b {
    background-color: #f0c400;
}

.plan-item.plan-selected b {
    visibility: visible;
}

.plan-item b:nth-child(1) {
    left: -29px;
}

.plan-item b:nth-child(2) {
    right: -29px;
}

.plan-item b::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

.plan-item b:nth-child(1)::before {
    border-bottom-right-radius: 30px;
    left: -1px;
    top: -1px;
    height: 102%;
}

.plan-item b:nth-child(2)::before {
    border-bottom-left-radius: 30px;
    left: 1px;
    top: -1px;
    height: 102%;
}

div.plan-item:last-of-type b:nth-child(2)::before,
div.plan-item:first-child b:nth-child(1)::before {
    background-color: #ffffff;
}

.plans-content {
    border: 1px solid #295ea2;
    border-radius: 10px;
    padding: 10px;
    /* min-height: 100px; */
    display: none;
    background: #fcfcfc;
}

.plans-content.active {
    display: block;
}

.plans-content.plans-pre-content.active {
    border-color: #f0c400;
}

.plan-inc-box {
    display: flex;
    flex-wrap: wrap;
}

.plan-inc-box .plan-inc-item {
    flex: 0 0 100%;
    width: 100%;
    padding: 10px 0px 10px 32px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-3);
    position: relative;
}


.plan-inc-box>.plan-inc-item:nth-child(even) {
    background-color: #41c6f72b;
    border-bottom: none;
    border-radius: 5px;

}


.plan-main-heading .plan-inc-item {
    border-bottom: 1px dashed lightgray;
}

.plan-main-heading>.plan-inc-item:last-of-type {
    border: none
}

.plan-inc-box .plan-inc-item img {
    width: 14px;
    height: 14px;
    position: absolute;
    left: 12px;
    top: 15px;
}

.plan-inc-item.plan-main-heading {
    padding: 10px;
}

.plan-main-heading>img {
    display: none;
}

.not-inc-item {
    color: #b3b3b3 !important;
}

.not-inc-item>* {
    opacity: 0.7;
}

.not-inc-item>img {
    opacity: 1;
}

/* 
@media screen and (max-width:768px) {
    .plan-inc-box .plan-inc-item {
        flex: 0 0 50%;
        width: 50%;
    }
}

@media screen and (max-width:576px) {
    .plan-inc-box .plan-inc-item {
        flex: 0 0 100%;
        width: 100%;
    }

    .plans-dialog {
        padding: 0;
        align-items: inherit;
    }

    .plans-popup-bx {
        border-radius: 0px;
        padding-bottom: 85px;
    }

    .plans-dialog .modal-content {
        border-radius: 0;
        border: none;
        margin: 0;
        height: 100%;
    }

    .plan-btn-box {
        position: fixed;
        background: white;
        width: 100%;
        left: 0;
        bottom: 0;
        border-top: 1px solid lightgray;
    }

    .plan-btn {
        margin: 15px auto 15px;
    }
}
 */

.prcss {
    position: relative;
}

.dzfbgn {
    position: absolute;
    left: 0px;
    top: -13px;
    font-size: 16px;
    color: #333333;
    font-weight: 700;
    font-family: 'Nunito', sans-serif !important;
    background: linear-gradient(0deg, #fcfcfc 51%, transparent 51%);
    padding: 0 9px;
}

.page-breadcrumb {
    background: -o-linear-gradient(bottom, var(--color-2) 0%, var(--color-1) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(var(--color-2)), to(var(--color-1)));
    background: linear-gradient(0deg, var(--color-2) 0%, var(--color-1) 100%);
    padding-bottom: 60px;
    padding-top: 60px;
    position: relative;
}

.page-breadcrumb svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

.breadcrumb-inner .page-heading {
    font-size: 24px;
    font-weight: 500;
    width: 100%;
    padding: 0;
    text-align: center;
    color: white;
    margin-bottom: -5px;
}

.plan-purchase-bx {
    width: 100%;
    display: flex;
    margin: auto;
    flex-wrap: wrap;
}

.plan-purchase-left {
    flex: 0 1 calc(100% - 350px);
    width: calc(100% - 350px);
}

.commun-purchase-box {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    /* margin: 10px 0 20px; */
    box-shadow: 0 0 20px #0000001f;
}

.cpb-head {
    position: relative;
    color: #333333;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-bottom: 0px;
    font-family: 'Nunito', sans-serif !important;
}

.cpb-plan-inc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
}

.cpb-plan-inc .cpb-plan-inc-item {
    flex: 0 0 49%;
    width: 49%;
    padding: 8px 40px 8px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-3);
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.cpb-plan-inc .cpb-plan-inc-item:nth-last-child(2),
.cpb-plan-inc .cpb-plan-inc-item:last-child {
    border-bottom: none;
}

.cpb-plan-inc .cpb-plan-inc-item img {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 15px;
    top: 13px;
}


.plan-purchase-right {
    flex: 0 1 350px;
    width: 350px;
    padding: 15px;
    padding-top: 0;
}

.summary-bx {
    position: sticky;
    top: 155px;
    border-radius: 10px;
    padding-bottom: 55px;
    background-color: white;
    box-shadow: 0 0 20px #0000001f;
}

.summary-header {
    padding: 15px 15px 10px;
    position: relative;
}

.summary-header .commun-close-icon {
    display: none;
}

.summary-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: rgb(20, 24, 35);
    margin-bottom: 3px;
    font-family: 'Nunito', sans-serif !important;
}

.summary-ps-label{
    font-size: 14px;
    color: #00629b;
    font-weight: 600;
    font-family: 'Nunito', sans-serif !important;
    padding: 15px 15px 0;
    margin-bottom: -3px;
}

.summary-ps-box,
.summary-gt-bx {
    padding: 5px 15px 0;
}

.summary-ps-box .summary-ps-item,
.summary-gt-bx .summary-gt-item {
    margin: 0;
    padding: 5px 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.summary-ps-box .summary-ps-item .summary-ps-first {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.summary-ps-box .summary-ps-item .summary-ps-first img {
    width: 40px;
    margin-right: 5px;
}

.summary-ps-box .summary-ps-item .summary-ps-first div {
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    font-family: 'Nunito', sans-serif !important;
}

.summary-ps-box .summary-ps-item .summary-ps-first div span {
    font-weight: 500;
    font-size: 12px;
    color: #525252;
    margin: 0px;
    display: block;
    margin-top: -3px;
    font-family: 'Nunito', sans-serif !important;
}

.summary-ps-box .summary-ps-item .summary-ps-last {
    font-size: 17px;
    color: #333333;
    font-weight: 600;
    font-family: 'Nunito', sans-serif !important;
}

.summary-gt-bx .summary-gt-item .summary-gt-first {
    font-size: 20px;
    color: #333333;
    font-weight: 700;
    font-family: 'Nunito', sans-serif !important;
}

.summary-gt-bx .summary-gt-item .summary-gt-first span {
    font-weight: 500;
    font-size: 12px;
    color: #525252;
    margin: 0px;
    display: block;
    margin-top: -3px;
    font-family: 'Nunito', sans-serif !important;
}

.summary-gt-bx .summary-gt-item .summary-gt-last {
    font-size: 20px;
    color: var(--color-1);
    font-weight: 700;
    font-family: 'Nunito', sans-serif !important;
}




.summary-res {
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    transform: translateY(-50px);
}

.summary-price-btn {
    position: relative;
    padding: 0 30px 0 5px;
    cursor: pointer;
    display: none;
}

.summary-price-btn h6 {
    font-weight: 500;
    font-size: 12px;
    color: #525252;
    margin: 0px;
    margin-bottom: 3px;
    display: block;
    font-family: 'Nunito', sans-serif !important;
}

.summary-price-btn p {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
    font-family: 'Nunito', sans-serif !important;
    margin: 0;
}

.summary-price-btn p.vfdbhfgn {
    font-size: 12px;
    color: #777777;
    margin: 0;
    font-weight: 600;
}

.summary-price-btn p span {
    text-decoration: line-through;
    font-size: 14px;
    margin-left: 5px;
    color: #777777;
    font-weight: 400;
    position: relative;
    top: -2px;
}

.summary-price-btn span.down-icon {
    border-style: solid;
    border-color: var(--color-1);
    -o-border-image: initial;
    border-image: initial;
    border-width: 0px 2px 2px 0px;
    display: inline-block;
    padding: 3px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: 2px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.summary-price-btn.active span.down-icon {
    top: 9px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.summary-buy-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-1);
    border: 1px solid var(--color-1);
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif !important;
    width: 100%;
    text-align: center;
}

.summary-buy-btn:hover {
    color: white;
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.summary-footer{
    padding: 0 15px;
    margin-top: 10px;
}

@media screen and (max-width:992px) {

    .summary-bx,
    .summary-bx {
        width: 100%;
        max-height: calc(100vh - 80px);
        position: fixed;
        top: inherit;
        bottom: -130%;
        left: 0;
        z-index: 1025;
        padding-bottom: 10px;
        overflow: hidden;
        overflow-y: auto;
        border-radius: 15px 15px 0 0;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-box-shadow: rgb(0 0 0 / 13%) 0px 0px 4px 0px;
        box-shadow: rgb(0 0 0 / 13%) 0px 0px 4px 0px;
    }

    .summary-header .commun-close-icon {
        display: block;
    }

    .summary-bx.active {
        bottom: -1%;
    }

    .summary-price-btn {
        display: block;
    }
    .summary-footer{
        display: none;
    }
    .summary-res {
        width: 100%;
        height: 60px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1023;
        background-color: white;
        -webkit-box-shadow: 0 -5px 15px #0000001f;
        box-shadow: 0 -5px 15px #0000001f;
        padding: 10px;
        transform: translateY(0px);
        justify-content: space-between;
    }

    .summary-buy-btn {
        width: fit-content;
        padding: 4px 20px;
    }

    .overlaydiv.summary-over {
        visibility: visible;
        opacity: 1;
    }

    .plan-purchase-left {
        flex: 0 1 calc(100% - 0px);
        width: calc(100% - 0px);
    }
}

@media screen and (max-width:768px) {

    .cpb-plan-inc .cpb-plan-inc-item {
        flex: 0 0 100%;
        width: 100%;
    }

    .cpb-plan-inc .cpb-plan-inc-item:nth-last-child(2) {
        border-bottom: 1px solid #f0f0f0;
    }
}


.member-item {
    box-shadow: 0 0 5px #0000000d inset;
    border: 1px solid #e9e9e9;
    border-radius: 15px;
    min-height: 150px;
    margin: 10px 0;
    padding: 10px;
    background: #fcfcfc;
}

.member-hed-img {
    display: flex;
    align-self: center;
}

.member-hed-img img {
    width: 40px;
    margin-right: 10px;
    height: 40px;
    object-fit: contain;
    /* border: 1px solid #00000054; */
}

.member-hed-img.for-invoice-o img {
    width: 50px;
    border-radius: 5px;
    height: 50px;
}

.member-hed-img.trainer-hedbx img{
    border-radius: 50px;
    box-shadow: 0px 0px 0 3px var(--white), 0px 0px 0 5px #00559e;
    margin-right: 15px;
    margin-top: 5px;
    margin-left: 5px;
}

.member-hed-img div {
    font-size: 20px;
    color: #333333;
    font-weight: 700;
    font-family: 'Nunito', sans-serif !important;
}

.member-hed-img.for-invoice-o div {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.member-hed-img div span {
    font-weight: 600;
    font-size: 14px;
    color: #525252;
    margin: 0px;
    display: block;
    margin-top: -1px;
    font-family: 'Nunito', sans-serif !important;
}


.member-dacs-item {
    margin-top: 5px;
}

.member-dacs-item .mdacs-head {
    font-weight: 600;
    font-size: 14px;
    color: #777777;
    padding: 5px 0 0px;
    position: relative;
    font-family: 'Nunito', sans-serif !important;
}

.member-dacs-item .mdacs-htext {
    font-weight: 600;
    font-size: 14px;
    color: rgb(20, 24, 35);
    padding: 0px 0 0px;
    position: relative;
    font-family: 'Nunito', sans-serif !important;
}

.member-dacs-item a.mdacs-htext {
    transition: 0.3s ease-in-out;
}

.member-dacs-item a.mdacs-htext:hover {
    color: var(--color-1);
}

.membar-vd-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
    border: 1px solid var(--color-1);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif !important;
    text-align: center;
    margin-top: 10px;
    margin: 15px auto 5px;
    display: block;
    width: fit-content;
}

.membar-vd-btn .fa{
    margin-right: 5px;
    font-size: 16px;
    position: relative;
    top: 0.5px;
}

.membar-vd-btn.btn-red{
    color: #e71000;
    border-color: #e71000;
}

.membar-vd-btn:hover {
    color: var(--white);
    background-color: var(--color-1);
}

.membar-vd-btn.btn-red:hover {
    color: var(--white);
    background-color: #e71000;
}







.empty-div-bx {
    height: 200px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #fcfcfc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-shadow: 0 0 5px #0000000d inset;
    border: 1px solid #e9e9e9;
}

.empty-div-bx img {
    width: 70px;
    display: block;
    margin: auto;
}

.empty-div-bx h6 {
    margin-top: 10px;
    font-size: 18px;
    color: #0000006b;
    font-weight: 600;
    font-family: 'Nunito', sans-serif !important;
    text-align: center;
}

.empty-div-bx a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1) !important;
    background: #295ea212;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif !important;
    text-align: center;
    margin-top: 10px;
    margin: 5px auto 5px;
    display: block;
    width: fit-content;
}

.empty-div-bx a:hover {
    color: var(--white) !important;
    background-color: var(--color-1) !important;
}

.empty-special {
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #efefef;
    margin-bottom: 0;
    border-radius: 0 0 5px 5px;
}


.plans-details {
    border: 1px solid #eeeeee;
    margin-top: 20px;
}




.ty-section {
    background-color: white;
    border-radius: 10px;
    padding: 25px 15px;
    position: relative;
    box-shadow: 0 0 20px #0000001f;
    background-image: url("/static/main_app/img/pattern3.png");
    background-repeat: repeat;
    background-position: center;
    background-size: 100px 100px;
    border: 1px solid #d3d3d380;

}

.ty-section img {
    max-width: 330px;
    width: 100%;
    margin: auto;
    display: block;
}

.ty-section p {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
    color: #333333;
    font-weight: 500;
    font-family: 'Nunito', sans-serif !important;
}

.ty-section p span {
    display: inline-block;
    font-size: 16px;
    color: #246ec5;
    font-weight: 700;
}

.ty-section .home-btn {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-1);
    border: 1px solid var(--color-1);
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif !important;
    width: fit-content;
    text-align: center;
    margin: auto;
}

.ty-section .home-btn:hover {
    color: white;
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.link-expired .linke-hed {
    color: #1c2b33;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    margin-top: 30px;
    margin-bottom: 5px;
    font-family: var(--font-2);
    text-align: center;
}

.link-expired .linke-pera {
    color: #1c2b33;
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    margin-bottom: 10px;
    font-family: var(--font-2);
    text-align: center;
}


.mdetail-heding {
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 80px;
    font-size: 28px;
    font-weight: 500;
}


/* .mdetail-list-bx{
    overflow: hidden;
} */

.mdetail-list-item img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 5px;
}

.mdetail-list-item>div {
    word-break: break-word;
}

.mdetail-list-item {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-4);
    text-transform: capitalize;
    padding: 8px 170px 8px 8px;
    width: 100%;
    line-height: 1.7;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}



.mdetail-list-item:nth-child(odd) {
    background-color: white;
}

.mdetail-list-item:nth-child(even) {
    background-color: rgb(244 244 244);
}

.mdetail-list-item:hover {
    background-color: #3cb4ed1c;
    border-color: transparent;
}

.mdetail-download {
    font-weight: 500;
    border: 1px solid #00559e00;
    padding: 5px 14px;
    font-size: 14px;
    border-radius: 50px;
    color: white;
    background: #68c0ec;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
    right: 10px;
    display: block;
    top: 50%;
    transform: translateY(-50%);
}


.re-download {
    font-weight: 500;
    border: 1px solid #00559e00;
    padding: 5px 14px;
    font-size: 14px;
    border-radius: 50px;
    color: white;
    background: #28a745;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
    right: 10px;
    display: block;
    top: 50%;
    transform: translateY(-50%);
}

.mdetail-redesign:hover .mdetail-download,
.mdetail-list-item:hover .mdetail-download {
    border: 1px solid #00559e;
    color: #fff;
    background: #00559e;
}


.mdetail-redesign:hover .re-download,
.mdetail-list-item:hover .re-download {
    border: 1px solid #129130;
    color: #fff;
    background: #129130;
}


.mdetail-download .fa {
    margin-right: 5px;
}

.mdetail-premium-item .mdetail-download {
    border-color: #ffb229;
    background-color: #ffb229;
    color: white;
}

.mdetail-redesign.mdetail-premium-item:hover .mdetail-download,
.mdetail-list-item.mdetail-premium-item:hover .mdetail-download {
    border-color: #fca120;
    background-color: #fca120;
    color: white;
}

.mdetail-premium-item .mdetail-download img {
    width: 18px;
    height: 18px;
    margin-right: 0px;
    border-radius: 0;
    position: relative;
    top: -2px;
}

.mdetail-list-item.second-design {
    box-shadow: 0 0 0px 1px #f0f0f0, 0 0 10px #00000014;
    background-color: white;
    border-radius: 10px;
    position: relative;
    padding: 15px;
    border: none;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.mdetail-list-item.second-design:hover {
    box-shadow: 0 0 0px 1px #00559e, 0 0 10px #00000014;
    background: #f9f9f9;
}

.mdetail-list-item.mdetail-premium-item.second-design:hover {
    box-shadow: 0 0 0px 1px #fca120, 0 0 10px #00000014;
}

.mdetail-redesign .mdetail-download,
.mdetail-list-item.second-design .mdetail-download {
    display: block;
    position: inherit;
    left: 0;
    top: 0;
    border-radius: 3px;
    margin-top: 10px;
    text-align: center;
    font-size: 17px;
}

.mdilsd-inner {
    display: flex;
    justify-content: center;
}

.mdetail-redesign {
    box-shadow: 0 0px 0px 1.5px #e9e9e9;
    border: none;
}

.mdetail-redesign:hover {
    box-shadow: 0 0px 0px 1.5px #00559e;
    border: none;
}

.mdetail-redesign.re-premium-item:hover {
    box-shadow: 0 0px 0px 1.5px #fc980e;
    border: none;
}

.mdetail-redesign .si-img span {
    min-width: 72px;
    width: auto;
    top: 10px;
    padding: 0 5px 2px 10px;
}

.mdetail-redesign .si-img span img {
    position: initial;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.mdetail-redesign .si-text>h6 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
}

.vdzxfhbdfymh {
    display: flex;
    align-items: center;
}

@media (max-width:576px) {
    .cdszgvbdfb {
        margin-top: 5px;
    }

    .vdzxfhbdfymh {
        padding: 10px 10px 50px 10px;
    }

    .vdzxfhbdfymh  .re-download,
    .vdzxfhbdfymh .mdetail-download {
        bottom: 7px;
        top: inherit;
        transform: scale(0.8);
        right: 0px;
    }
}



.plan-ym-box {
    display: flex;
    justify-content: center;
    align-self: center;
    background: #f3f3f3;
    width: fit-content;
    border-radius: 50px;
    margin: auto;
    margin-bottom: 20px;
    position: relative;
}

.plan-ym-box .ym-btn {
    font-size: 16px;
    white-space: nowrap;
    margin-right: 0px;
    background-color: transparent;
    width: 100px;
    text-align: center;
    padding: 5px 0;
    color: black;
    border-radius: 50px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.plan-ym-box .ym-btn:hover {
    color: var(--color-1);
}

.plan-ym-box .ym-btn.active {
    color: #ffffff;
}

.plan-ym-box .ym-active {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    border-radius: 50px;
    background: var(--color-1);
    transition: 0.3s ease-in-out;
}

.plan-ym-box .ym-btn.active:nth-child(1)~.ym-active {
    left: 0;
}

.plan-ym-box .ym-btn.active:nth-child(2)~.ym-active {
    left: 100px;
}



.plan-main-box {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-wrap: wrap;
}

.plan-main-box .plan-sub-box {
    padding: 10px;
    flex: 0 0 320px;
}

.plan-main-box .plan-sub-box .plan-sub-inner {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgb(219, 219, 219);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.plan-main-box .plan-sub-box .plan-sub-inner:hover {
    box-shadow: 0 0 0 1px var(--color-1);
}

.plan-main-box .plan-sub-box .plan-sub-inner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 70px;
    border-radius: 20px 0 48px 160px;
    background: linear-gradient(0deg, var(--color-2) 0%, var(--color-1) 100%);
    opacity: 0.5;
}

.plan-main-box .plan-sub-box .plan-sub-inner::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 90px;
    border-radius: 20px 0 48px 160px;
    background: linear-gradient(0deg, var(--color-2) 0%, var(--color-1) 100%);
    opacity: 0.5;
}

.plan-heading {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin-top: 10px;
}

.plan-heading .plan-img {
    width: 40px;
    height: 40px;
    display: block;
    background: #ffffff;
    border-radius: 5px;
    padding: 5px;
    margin-right: 10px;
    object-fit: contain;
    object-position: center;
}

.plan-heading .plan-text {
    font-size: 24px;
    font-weight: 500;
    color: white;
}


.plan-price {
    text-align: center;
    white-space: nowrap;
    margin-top: 38px;
    position: relative;
    z-index: 1;
}

.plan-price span:first-child {
    font-size: 32px;
    font-weight: 600;
    color: #295ea2;
    margin: 0px 0 0 0;
    font-family: 'Nunito', sans-serif !important;
    text-transform: capitalize;
    display: inline-block;
}

.plan-price span:last-child {
    font-size: 16px;
    font-weight: 600;
    color: black;
    margin: 0px 0px 0 0;
    font-family: 'Nunito', sans-serif !important;
    text-transform: capitalize;
    display: inline-block;
}

.popup-common-btn,
.plan-btn {
    width: fit-content;
    cursor: pointer;
    color: #295ea2;
    background: #fcfcfc;
    border: 1px solid #295ea2;
    border-radius: 50px;
    padding: 5px 20px;
    font-weight: 500;
    font-size: 16px;
    margin-top: 5px;
    margin: 10px auto 10px;
    display: block;
    transition: all 0.3s ease;
}

.popup-common-btn:hover,
.plan-btn:hover {
    color: #fff;
    background: #295ea2;
}

.plan-sub-text {
    font-size: 12px;
    margin: 0;
    margin-top: 5px;
    color: gray;
    font-weight: 400;
    text-align: center;
    margin-left: -32px;
}

.plan-sub-text span {
    color: rgb(0, 0, 0);
    font-weight: 500;
    text-align: center;
}



.plan-tab-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3f3f3;
    width: fit-content;
    margin: auto;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    display: none;
}

.plan-tab-mobile .plan-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    width: 220px;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: 0.3s ease-in-out;
}


.plan-tab-mobile .plan-t-img {
    width: 30px;
    display: block;
    background: #ffffff;
    border-radius: 50%;
    padding: 3px;
    margin-right: 10px;
}



.plan-tab-mobile .plan-tab-item .plan-t-text {
    font-size: 18px;
    font-weight: 500;
    color: black;
    transition: 0.3s ease-in-out;
}

.plan-tab-mobile .plan-tab-item:hover {
    background-color: #295ea214;
}

.plan-tab-mobile .plan-tab-item:hover .plan-t-text {
    color: var(--color-1);
}

.plan-tab-mobile .plan-tab-item.active .plan-t-text {
    color: white;
}

.plan-tab-active {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    border-radius: 50px;
    background: var(--color-1);
    transition: 0.3s ease-in-out;
}

.plan-tab-mobile .plan-tab-item.active:nth-child(1)~.plan-tab-active {
    left: 0;
}

.plan-tab-mobile .plan-tab-item.active:nth-child(2)~.plan-tab-active {
    left: 50%;
}

.gst-note {
    color: red;
    font-weight: 500;
    /* margin-bottom: -7px; */
    /* margin-top: -6px; */
    font-size: 12px;
    text-align: center;
}

.gst-note.free-plan {
    color: rgb(0, 172, 57);
}


@media screen and (max-width:990px) {
    .plan-main-box .plan-sub-box {
        padding: 0px;
        flex: 0 0 100%;
    }

    .plan-main-box .plan-sub-box .plan-sub-inner {
        box-shadow: 0 0 0 1px var(--color-1);
    }

    /* .plan-sub-inner .plan-price, */
    .plan-heading,
    .plan-main-box .plan-sub-box {
        display: none;
    }

    .plan-main-box .plan-sub-box.active {
        display: block;
    }

    .plan-main-box .plan-sub-box .plan-sub-inner::after,
    .plan-main-box .plan-sub-box .plan-sub-inner::before {
        content: none;
    }

    .plan-price {
        margin-top: 0px;
        margin-bottom: 5px;
    }

    .plan-tab-mobile {
        display: flex;
    }

    .gst-note {
        margin: 0;
    }
}



@media screen and (max-width:990px) {
    .plans-tab {
        transform: scale(0.8);
        transform-origin: bottom;
        display: flex;
        margin-top: 0px;
    }

    .plan-price span:first-child {
        font-size: 28px;
    }

}

@media screen and (max-width:470px) {
    .plan-item .plan-type-img{
        display: none;
    }

    .plan-item {
        padding: 10px 30px 10px 30px;
    }
}

@media screen and (max-width:390px) {
    .plans-tab {
        transform: scale(0.7);
        margin-top: -10px;
    }
}

@media screen and (max-width:340px) {
    .plans-tab {
        transform: scale(0.6);
        margin-top: -15px;
    }
}

/* @media screen and (max-width:330px) {
    .plans-tab {
        transform: scale(0.55);
        margin-top: -20px;
    }
} */

/* ---
--- */

.demo-list-bx {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
}

.demo-list-bx .demo-item-outer {
    width: 25%;
    flex: 0 0 25%;
    padding: 0 10px;
    margin-top: 20px;
}

.demo-item {
    -webkit-box-shadow: 0 0px 0px 1px rgb(0 0 0 / 6%);
    box-shadow: 0 0px 0px 1px rgb(0 0 0 / 6%);
    border-radius: 10px;
    padding: 10px 10px;
    position: relative;
    display: flex;
    /* align-items: center; */
    cursor: pointer;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.demo-item:hover {
    -webkit-box-shadow: 0 0px 15px 0px rgb(0 0 0 / 11%);
    box-shadow: 0 0px 15px 0px rgb(0 0 0 / 11%);
}

.demo-item .demo-item-img {
    width: 55px;
    border-radius: 50px;
    height: 55px;
    flex: 0 0 55px;
    filter: grayscale(0.2);
    transition: all 0.3s linear;
}

.demo-item:hover .demo-item-img {
    transform: scale(1.05);
    box-shadow: 0 0 50px -15px #a2a2a2;
}

.demo-item .demo-item-img img {
    width: 100%;
}

.demo-item .demo-text {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--color-4);
    text-transform: capitalize;
    margin-left: 15px;
    width: 100%;
}

.demo-text a {
    background: transparent;
    display: flex;
    border: 1px solid #b00000;
    color: #b00000;
    justify-content: center;
    align-items: center;
    width: 10px;
    display: flex;
    width: 100%;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 3px;
    /* color: white; */
    font-size: 12px;
    margin-top: 5px;
    margin-left: auto;
    transition: 0.3s ease;
}

.demo-text a:hover {
    background: #b00000;
    color: #fff;
}

.demo-text a .fa {
    margin-right: 5px;
}


.demo-item.demo-all-download {
    border: 1px solid #b00000;
    background: #f6e7e8;
    color: #b00000;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-weight: 500;
}

.demo-item.demo-all-download:hover {
    background: #b00000;
    color: white;
}

.demo-item.demo-all-download .fa {
    margin-right: 5px;
}

@media screen and (max-width:992px) {
    .demo-list-bx .demo-item-outer {
        width: 33.33%;
        flex: 0 0 33.33%;
    }
}

@media screen and (max-width:768px) {
    .demo-list-bx .demo-item-outer {
        width: 50%;
        flex: 0 0 50%;
    }
}

@media screen and (max-width:530px) {
    .demo-list-bx .demo-item-outer {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* --- 
Congratulation css
--- */

.congratulation-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1024;
    background: #00000024;
    backdrop-filter: blur(3px);
    display: none;
}

.congratulation-popup-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 10px;
}

.js-animation {
    position: absolute !important;
    top: 0;
    width: 100%;
    height: 100%;
}

.confetti-container {
    perspective: 700px;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.confetti {
    position: absolute;
    z-index: 1;
    top: -10px;
    border-radius: 0%;
}

.confetti--animation-slow {
    animation: confetti-slow 2.25s linear 1 forwards;
}

.confetti--animation-medium {
    animation: confetti-medium 1.75s linear 1 forwards;
}

.confetti--animation-fast {
    animation: confetti-fast 1.25s linear 1 forwards;
}

@keyframes confetti-slow {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }

    100% {
        transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
    }
}

@keyframes confetti-medium {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }

    100% {
        transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
    }
}

@keyframes confetti-fast {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }

    100% {
        transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
    }
}

.congratulation-popup .cong-text-box {
    background-color: white;
    max-width: 576px;
    width: 100%;
    z-index: 1;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 40px -12px #00000096;
    padding: 20px 15px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: 0.5s ease-in-out;
}

.congratulation-popup-inner.cpi-show .cong-text-box{
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.success-animation {
    padding: 0px;
    background: #ffffff;
    width: 120px;
    height: 120px;
    margin: 0px auto 10px;
    display: block;
    border-radius: 50%;
}

.success-checkmark {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    stroke-width: 3px;
    stroke: #ffffff;
    stroke-miterlimit: 10;
    animation: success-fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.success-checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 4px;
    stroke-miterlimit: 10;
    stroke: #d0ffd2;
    fill: transparent;
    animation: success-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: success-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes success-stroke {
    100% {
        stroke-dashoffset: 0;
        fill: #4CAF50;
    }
}

@keyframes success-scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

.cong-text-box .congo-heading{
    text-align: center;
    font-size: 24px;
    color: #4CAF50;
    font-weight: 500;
}

.cong-text-box .congo-pera{
    margin: 5px 0 0 0;
    text-align: center;
    font-weight: 400;
    color: black;
    font-size: 16px;
    line-height: 1.5;
}



.panoti-popup {
    padding: 0 20px 20px;
}

.panoti-popup .panoti-popup-img {
    display: block;
    margin: auto;
    width: 80px;
    height: 80px;
    object-fit: contain;
    object-position: center;
    padding: 2px;
    border-radius: 50%;
    background: white;
    margin-top: -35px;
    margin-bottom: 5px;
}

.panoti-popup p {
    margin: 0;
    text-align: center;
    font-weight: 400;
    color: black;
    font-size: 16px;
    line-height: 1.5;
}

.panoti-popup .panoti-btn {
    display: block;
    background: white;
    color: #2196f3;
    border: 1px solid #2196f3;
    text-align: center;
    margin: 15px 0 0 0;
    border-radius: 5px;
    padding: 1px 10px 3px;
    width: 120px;
    margin: 20px auto 0;
    font-weight: 400;
    font-size: 20px;
    transition: all 0.3s ease-in-out;
}

.panoti-popup .panoti-btn:hover {
    background: #2196f3;
    color: white;
}


.all-m-download-item{
    border: 1px solid #ebebeb;
    display: block;
    padding: 12px;
    border-radius: 5px;
    background: white;
    display: flex;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    flex-direction: column;
    font-size: 16px;
    margin-top: 20px;
}

.all-m-download-item:hover{
    border-color: #b00000;
    color: #000000;
    box-shadow: 0 0 15px -5px #00000047;
}

.all-m-download-item img{
    margin-right: 10px;
    width: 50px;
}

.all-m-download-item .all-m-btn{
    width: 100%;
    color: #b00000;
    background: transparent;
    border-radius: 50px;
    border: 1px solid #b00000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    font-size: 14px;
    margin-top: 10px;
    transition: 0.3s ease;
}

.all-m-download-item:hover .all-m-btn{
    color: white;
    background-color: #b00000;
}

.all-m-download-item .all-m-btn .fa{
    margin-right: 5px;
}

.infoutpModal .modal-body h3 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: 10px 0;
}

.infoutpModal .modal-body>p {
    font-size: 16px;
    text-align: center;
    margin: 15px 0 !important;
    font-weight: 500;
}

.infoutpModal .modal-body button {
    margin: auto;
    display: block;
    background: rgb(221, 37, 37);
    color: white;
    padding: 7px 15px;
    display: inline-block;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.infoutpModal .modal-body button.no-btn {
    background: #31bf74;
}

.infoutpModal .modal-body button:hover {
    background: rgb(248, 41, 41);
}

.infoutpModal .modal-body button.no-btn:hover {
    background: #15b962;
}


.profile-sticky-btn{
    width: calc(100% + 30px);
    transform: translateX(-15px);
    padding: 0;
    background: white;
    padding: 12px !important;
    border-top: 1px solid #ebebeb;
    margin-bottom: -10px;
    position: sticky;
    bottom: 0;
    box-shadow: 14px 0px 9px -12px #d6d6d6 inset;
    z-index: 1;
}

.profile-sticky-btn .to-form-btn[disabled]{
    background: #e3e3e3;
    color: gray;
    border-color: #bcc6cc;
}

.profile-sticky-btn .to-form-btn{
    font-size: 16px;
    font-weight: 400;
    /* width: 100px; */
    padding: 7px 10px;
    display: inline-flex;
    margin: 0px 0px 0 10px;
}


.pwodiv {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 35%);
    left: 0;
    top: 0;
    z-index: 1200;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: none;
}

.pwodiv .pwodiv-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

.pwo-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pwo-loader {
    height: 25px;
    width: 25px;
    position: absolute;
    -webkit-animation: pwo-rotate 3.5s linear infinite;
    animation: pwo-rotate 3.5s linear infinite;
    opacity: 0;
}

.pwo-loader .pwo-dot {
    top: 30px;
    height: 7px;
    width: 7px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
}

.pwo-text {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin-top: 10px;
    letter-spacing: 1.5px;
}

@-webkit-keyframes pwo-rotate {

    0%,
    20% {
        opacity: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    30% {
        opacity: 1;
    }

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

    70% {
        opacity: 1;
    }


    80%,
    100% {
        opacity: 0;
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }

}

@keyframes pwo-rotate {

    0%,
    20% {
        opacity: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    30% {
        opacity: 1;
    }

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

    70% {
        opacity: 1;
    }


    80%,
    100% {
        opacity: 0;
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }

}

.pwo-loader:nth-child(1) {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.pwo-loader:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.pwo-loader:nth-child(3) {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.pwo-loader:nth-child(4) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.pwo-loader:nth-child(5) {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

.pwo-loader:nth-child(6) {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.membar-vd-btn.upa-btn{
    background: #295ea212;
    color: #295ea2;

}

.membar-vd-btn.upa-btn:hover{
    background: var(--color-1);
    color: white;
}



/* 18 Aug 2023 */
.bg-fafafa{
    background-color: #fafafa;
}

.common-material-list{
    display: block;
    border: 1px solid #ebebeb;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;  
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
}

.common-material-list:hover{
    border-color: var(--color-1);
}

.common-material-list:hover{
    background: white;
}

.common-material-list .cml-img-text{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.cml-img-text.full-img{
    flex-direction: column;
    padding: 0;
}

.cml-img-text.full-img .cml-img-outer{
    padding-top: 56%;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.common-material-list .cml-img-text img.cml-img{
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    object-position: center;
    object-fit: cover;
    margin-right: 15px;
    transition: all 0.3s ease-in-out;
}

.cml-img-text.full-img .cml-img-outer img.cml-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.common-material-list:hover .cml-img-text.full-img .cml-img-outer img.cml-img{
    transform: scale(1.05);
}

.common-material-list .cml-img-text div.cml-text{
    font-size: 15px;
    font-weight: 500;
    color: var(--color-4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    width: 100%;
}

.common-material-list .cml-img-text.full-img div.cml-text{
    padding: 0 15px;
    margin: 10px 0;
}

.common-material-list .cml-img-text.full-img div.cml-text-num{
    font-size: 15px;
    font-weight: 500;
    color: var(--color-4);
    margin-bottom: 10px;
    padding: 0 15px;
    width: 100%;
}

.common-material-list div.cml-btn{
    border-top: 1px solid #e7e7e7;
    width: 100%;
    height: 40px;
    padding: 0px 8px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b00000;
    transition: all 0.3s ease-in-out;
}

.common-material-list div.cml-btn .fa{
    margin-right: 10px;
}

.common-material-list:hover div.cml-btn{
    color: #b00000;
    background-color: #b0000012;
}





/* ------------------------
    Blog csss 
------------------------ */

/* .blog-list-bx{
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0 50px;
} */

.blog-item-outer {
    padding: 10px;
}

.blog-item-outer a {
    text-decoration: none;
    display: block;
}

.blog-item-bx {
    border-radius: 16px;
    overflow: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    /* border: 1px solid lightgrey; */
    transform: scale(0.99);
    box-shadow: 0px 0px 15px rgb(0 0 0 / 12%);
    background: white;
}

.blog-item-bx:hover {
    box-shadow: 0px 4px 15px rgb(203, 64%, 48%/ 12%);
}

.blog-item-img {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 56.56%;
    overflow: hidden;
}

.blog-item-img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100%;
    -o-object-position: center;
    object-position: center;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.blog-item-bx:hover .blog-item-img img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-item-txt {
    padding: 10px;
}

.blog-item-txt h3 {
    color: black;
    font-size: 16px;
    margin-top: 0px;
    line-height: 1.5;
    overflow: hidden;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 600;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.blog-item-bx h3:hover {
    color: #2c8eca;
}

.blog-item-txt p {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 14px;
    overflow: hidden;
    color: #777777;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 400;
    line-height: 1.5;
}

.blog-item-txt span{
    width: fit-content;
    cursor: pointer;
    color: #295ea2;
    background: #f3f3f3;
    border: 1px solid #d5d5d5;
    border-radius: 50px;
    padding: 5px 12px;
    font-weight: 500;
    font-size: 13px;
    margin-top: 5px;
    margin: 15px 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.blog-item-bx .blog-item-txt span .fa{
    margin-left: 5px;
    font-size: 18px;
    position: relative;
    top: 0px;
}

.blog-item-txt span:hover{
    background-color: #295ea2;
    color: white;
}

/* --- End Blog Slider Css --- */



/* --- Blog Detail Page start --- */


/* Detail page css */
.blog-detail-outer{
    display: flex;
    justify-content: center;
    /* padding: 0 15px; */
}

.blog-detail-outer .detail-news-outer{
    display: block;
    padding: 0px;
    flex: 0 1 auto;
    max-width: 770px;
    background: white;
    padding: 15px 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    margin-right: 20px;
}

.blog-detail-outer .newssidebx {
    padding: 20px 15px;
    flex: 0 0 340px;
    height: fit-content;
    background: white;
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}

.cat-news-list .cnl-item {
    display: flex;
    margin-top: 20px;
    padding: 0 0px;
}

.cat-news-list .cnl-item .cnl-item-img {
    flex: 0 0 65px;
    height: 65px;
    padding-bottom: 0%;
    margin-right: 10px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px #ccc;
}

.cat-news-list .cnl-item .cnl-item-img .cnl-item-img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    left: 0px;
    top: 0;
    transition: all 1s ease-in-out;
}

.cat-news-list .cnl-item .cnl-item-text .cnl-item-text-hed {
    font-size: 14px;
    color: black;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
}

.newssidebx .cnl-heading{
    position: relative;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: black;
    padding-bottom: 10px;
    width: 100%;
}

.newssidebx .cnl-heading::before,
.newssidebx .cnl-heading::after{
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 20px;
    height: 1px;
    border-radius: 5px;
    background-color: black;
}

.newssidebx .cnl-heading::before{
    left: inherit;
    right: 0;
    top: 100%;
    width: calc(100% - 30px);
    opacity: 0.05;
}






.detail-news-heading{
    font-size: 24px;
    line-height: 1.6;
    font-weight: 600;
    color: black;
}

.meta-social-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}

.meta-author{
    display: flex;
    /* margin-top: 10px; */
    align-items: center;
}

.meta-author .meta-author-img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    margin-right: 5px;
}

.meta-author .meta-author-data .meta-data-name {
    font-size: 14px;
    font-weight: 600;
    color: black;
    line-height: 1.3;
}

.meta-author .meta-author-data .meta-data-time {
    font-size: 13px;
    font-weight: 400;
    color: #aaaaaa;
    line-height: 1.2;
}

.social_share-bx{
    display: flex;
    flex-wrap: wrap;
    /* margin-top: 15px; */
    align-items: center;
}

.social_share-bx .ssb-lable{
    color: #666;
    font-weight: 500;
    margin-right: 5px;
}

.social_share-bx .ssb-icon{
    font-size: 16px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0px;
    margin: 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #666666;
    cursor: pointer;
    background-color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}

.social_share-bx .ssb-icon{
    font-size: 16px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0px;
    margin: 2px 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #666666;
    cursor: pointer;
    background-color: #f5f5f5;
}

.social_share-bx .ssb-icon:hover {
    color: white;
}

.social_share-bx .ssb-icon.fb:hover {
    background-color: #475993;
}

.social_share-bx .ssb-icon.yt:hover {
    background-color: #ff0000;
}

.social_share-bx .ssb-icon.tw:hover {
    background-color: #1da0f2;
}

.social_share-bx .ssb-icon.wa:hover {
    background-color: #44be53;
}

.social_share-bx .ssb-icon.tl:hover {
    background-color: #33a0cd;
}

.social_share-bx .ssb-icon.li:hover {
    background-color: #0077b5;
}

.social_share-bx .ssb-icon.cm:hover {
    background-color: #ce0000;
}

.detail-news-ivio-bx{
    position: relative;
    padding-top: 56%;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 15px;
    box-shadow: 0 4px 10px #ccc !important;
}

.detail-news-ivio-bx > *:not(audio){
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.detail-news-ivio-bx > audio{
    position: absolute;
    bottom: 10px;
    top: initial;
    left: 50%;
    width: 98%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px #00000078;
    max-height: 54px;
    border-radius: 50px;
}

.ivio-tag{
    width: 100%;
    text-align: center;
    color: #6c6c6c;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
}

.detail-news-text-bx{
    margin-top: 20px;
}

.detail-news-text-bx > *,
.detail-news-text-bx{
    font-size: 16px;
    margin-bottom: 15px;
    color: #353535;
    display: block;
    text-align: justify;
    line-height: 1.5;
    font-weight: 400;
}
/* --- Blog Detail Page end --- */


.scroll-bar-hide::-webkit-scrollbar{
    display: none;
}

.form-style-2 .signinup-group textarea, 
.form-style-2 .signinup-group select, 
.form-style-2 .signinup-group input{
    padding: 20px 10px 5px 10px;
}

.form-style-2 .signinup-group .group__label{
    -webkit-transform: scale(1) translateY(12px);
    -ms-transform: scale(1) translateY(12px);
    transform: scale(1) translateY(12px);
}

.form-style-2 .signinup-group textarea:not(:placeholder-shown)~.group__label, 
.form-style-2 .signinup-group textarea:focus~.group__label, 
.form-style-2 .signinup-group select:not(:placeholder-shown)~.group__label, 
.form-style-2 .signinup-group select:focus~.group__label, 
.form-style-2 .signinup-group input:not(:placeholder-shown)~.group__label, 
.form-style-2 .signinup-group input:focus~.group__label{
    -webkit-transform: scale(.7) translateY(0px);
    -ms-transform: scale(.7) translateY(0px);
    transform: scale(.7) translateY(0px);
}

.sdp-notes{
    font-size: 14px;
    color: gray;
    line-height: 1.5;
    display: block;
    margin-top: 8px;
}


.psb-new-big{
    border-radius: 50px !important;
    font-size: 16px !important;
    padding: 10px 15px !important;
    max-width: 180px !important;
    width: 100% !important;
}

.psb-loader-btn img{
    pointer-events: none;
    width: 20px;
    height: 20px;
    margin-right: 7px;
    position: relative;
    margin-right: 8px;
    -webkit-animation: rotation-btn 1s infinite linear;
       -moz-animation: rotation-btn 1s infinite linear;
         -o-animation: rotation-btn 1s infinite linear;
            animation: rotation-btn 1s infinite linear;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

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

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

@-moz-keyframes rotation-btn {
    from {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }

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

@-o-keyframes rotation-btn {
    from {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }

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

@keyframes rotation-btn {
    from {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }

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