#player1, #player2, #player4, .player {
    grid-template-columns:48px 1fr 48px;
    grid-gap: 16px
}

#login-pc a, #start-now, #start-now-mobile, #where-start p a, .bottom-package a, .follow-us, .instagram-footer, .tag-section .tags-link, .tag-webhamrah, a, div.breadcrumb li a, footer ul h4 a {
    text-decoration: none
}

#advice, #login-mobile i {
    border: 1px solid #f2bb09
}

#advice:hover, ul li a {
    color: #fff !important
}

*, .title-read .accordion .accordion-item h2, header {
    margin: 0
}

#advice, #hamber, nav ul li a:hover {
    color: #f2bb09 !important
}

footer, header {
    padding: 0;
    z-index: 100
}

#drop-ul, #dropdown-ul-blog, #footer {
    background-color: #0c5865 !important
}

.off-package h3, footer ul p {
    border-bottom: 3px solid #f2bb09
}

#send-number, #where-start {
    background-image: url(/upload/static/Mask-Group-12.png)
}

*, .article blockquote {
    box-sizing: border-box
}

.accordion-body ul, footer ul {
    list-style-type: none
}

#form-BMI input, .nav-item:hover .sub-menu-blog li a:hover {
    color: #0c5865 !important
}

#login-pc i, #login-tablet i, #sign-up:hover, #submit-mobile:hover, #submit:hover, #where-start p a:hover, .next:hover, .package-information-2 .div-description h3, .package-information-2 .div-description p, .prev:hover, .tag-landing a:hover, .vlog-cards h2 a:hover, footer ul h4 a li:hover, footer ul p {
    color: #f2bb09
}

@media screen and (min-width: 768px) {
    .section-pc {
        display: flex !important
    }

    .section-mobile {
        display: none
    }

    .swiper {
        width: 100% !important
    }

    .img-audio-package, .img-mahsa {
        width: 70% !important
    }

    .mahsa-photo {
        height: 100% !important
    }

    .img-mahsa {
        height: 140% !important;
        bottom: -20% !important
    }

    .img-mahsa-2 {
        width: 40% !important
    }
}

@media screen and (min-width: 950px) {
    .navbar-brand, .navbar-brand img {
        width: 100% !important
    }

    #login-tablet {
        display: inline-block !important
    }

    #rrrrrr {
        width: 15% !important
    }

    .navbar-brand img {
        height: 100% !important
    }
}

@media screen and (max-width: 950px) {
    #login-mobile {
        display: block !important
    }

    footer ul p {
        width: 100px
    }

    #footer-info {
        width: 90%
    }

    .instagram-footer {
        width: 100% !important;
        margin: 0 auto;
        height: 15% !important
    }

    .info-contact img {
        width: 20% !important
    }

    .swiper {
        width: 85% !important
    }

    #swiper-khadamat {
        width: 95% !important
    }

    #explain-package, .article-banner, .article-comment form textarea, .comment-article, .comment-article input, .player {
        width: 100% !important
    }

    #audio-hide {
        display: none !important
    }

    .vlog-banner h1 {
        font-size: 19px !important
    }

    .vlog-banner h2 {
        font-size: 22px !important
    }

    .article p {
        width: 90% !important;
        margin: auto !important
    }

    .article .article-banner-1 {
        width: 100% !important;
        height: auto;
        margin: 0 auto
    }

    .comment-article {
        font-size: 22px
    }

    .new-price {
        justify-content: center !important
    }

    .comment-form {
        width: 90vw !important
    }
}

@media (min-width: 356px) and (max-width: 992px) {
    #body-box-1 div, #body-box-2 div, #body-box-3 div, #body-box-4 div {
        padding-top: 1% !important;
        margin-top: 48% !important;
        width: 100% !important;
        height: 600px !important;
        margin-bottom: 45% !important
    }

    .head-box-swiper {
        margin-bottom: -20% !important
    }

    .bg-yellow {
        width: 100%;
        display: flex;
        flex-direction: column
    }

    #form-BMI input {
        outline: 0 !important
    }

    .text-shapes p, .text-shapes-1 p {
        margin-top: 32%
    }
}

@media screen and(max-width: 576px) {
    .div-img, .mahsa {
        position: relative
    }

    .swiper-slide {
        width: 100% !important;
        height: 60% !important
    }

    .ms5 {
        font-size: 2pc;
        text-align: start;
        align-content: start
    }

    .div-img {
        width: 100% !important;
        height: 80vh !important;
        background: url(/upload/static/Group-809.png) center no-repeat;
        background-size: 100% !important
    }

    .mahsa {
        width: 100%;
        height: 90% !important;
        background: url(/upload/static/mahsa.png) center/75% no-repeat !important;
        margin: auto !important
    }
}

.head, .head-1, .head-3, .player, .sabad {
    background-position: center
}

.head, .head-1, .head-3, .sabad, .section-pc, .text-shapes, .text-shapes-1 {
    background-repeat: no-repeat
}

#drop-ul li a, #login-pc a, .head, .head-1, .section-pc, .span-text {
    text-align: center
}

@media screen and (max-width: 768px) {
    .accordion-item {
        width: 95%;
        margin: auto
    }

    .accordion, .accordion-header {
        width: 95% !important
    }

    .div-description h3, .h1-index {
        font-size: 25px !important
    }

    #where-start {
        flex-direction: column !important;
        width: 100%
    }

    .title-cards {
        margin-top: 30% !important
    }

    .title-border {
        font-size: 24px !important;
        font-weight: 600
    }

    .p-card {
        font-weight: 600 !important
    }

    .card-info img, .head, .head-1 {
        width: 40% !important
    }

    #div-shapes-2 {
        margin-bottom: 30% !important
    }

    #faq-voice, #moshavere, #title-cards-swiper-package, #title-cards-swiper-package-1, .swiper-package {
        display: none !important
    }

    #head-box-1, #head-box-2, #head-box-3, #head-box-4 {
        width: 20% !important
    }

    #direct-opinion, #explain-package, #form-BMI, #form-BMI input, #form-BMI label, #mahsa-changes, #mahsa-voice, #posetive-energy, #suggestion-article, .card-info, .form-login, .image-voice img, .myswiper-4 .swiper-slide, .myswiper-5 .swiper-slide, .myswiper-6 .swiper-slide, .takhfif-index, .vlog-cards .card-vlog, div.breadcrumb {
        width: 100% !important
    }

    .myswiper-1 .swiper-slide {
        width: 100% !important;
        height: 100% !important
    }

    #posetive-energy {
        padding: 0 !important
    }

    .card-info {
        height: 450px !important
    }

    #div-form-bmi, #phone-number, .card-info div p, .description, .name-family, .phone {
        width: 90% !important
    }

    #article-time {
        font-size: 14px !important
    }

    #submit-mobile {
        width: 70% !important
    }

    .myswiper-5 .swiper-slide {
        height: 75% !important
    }

    #form-BMI .submitBMI, #submit {
        width: 60% !important
    }

    #explain-package h2 {
        font-size: 28px !important
    }

    .explain-package-p {
        font-size: 1.5rem !important;
        color: #0c5865;
        line-height: 200% !important
    }

    .div-description h3 {
        font-weight: 800;
        color: #0c5865
    }

    .div-description p {
        font-size: 16px
    }

    .vlog-cards {
        width: 90%;
        margin: auto
    }

    .vlog-cards h2 {
        padding: 0
    }

    .dropdown #drop-ul {
        margin-right: -105% !important
    }
}

#home-tag, #more-video, .form-title, nav {
    font-weight: 700
}

@media screen and (max-width: 1200px) {
    #moshavere, #title-moshavere, .side-bar {
        display: none !important
    }

    #more-video, .buy-package-pc {
        display: none
    }

    .landing-text p {
        width: 100% !important
    }

    .div-description h5 {
        text-align: center !important;
        font-size: 28px !important
    }

    .how-buy-package {
        width: 90% !important
    }

    #suggestion-article-1 {
        display: block !important;
        width: 100%
    }
}

@media screen and (min-width: 902px) {
    #body-box-1 div, #body-box-2 div, #body-box-3 div, #body-box-4 div, .text-shapes p, .text-shapes-1 p {
        height: 550px
    }

    .title-read {
        margin-right: 5%
    }

    footer ul p {
        width: 100px
    }
}

@media screen and (min-width: 1200px) {
    #login-pc {
        display: flex !important
    }

    #login-tablet, .mahsa-photo .img-mahsa-2 {
        display: none !important
    }

    .navbar-brand {
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 10%
    }

    footer ul {
        margin-right: 100px;
        margin-top: 50px
    }

    footer ul p {
        width: 100% !important
    }

    .div-tag-landing {
        width: 50% !important;
        margin-right: auto !important;
        margin-left: 6% !important
    }

    .buy-package-mobile {
        display: none
    }

    .text-shapes, .text-shapes-1, .text-shapes-3, .text-shapes-4 {
        margin-top: -32% !important
    }

    .text-shapes p, .text-shapes-1 p {
        height: 500px !important
    }

    .mahsa-photo {
        height: 60vh !important
    }

    .mahsa-photo .img-mahsa {
        width: 80% !important;
        height: 80vh !important;
        background-image: url(asset/mahsaaaaaa.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        padding-bottom: 16%
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    #card-vlog {
        width: 40% !important
    }

    .text-shapes, .text-shapes-1, .text-shapes-3, .text-shapes-4 {
        margin-top: -30% !important
    }
}

@media (min-width: 768px) and (max-width: 902px) {
    #rrrrrr .navbar-brand {
        width: 30%
    }

    #banner-sidebar-tablet {
        width: 70% !important;
        margin: auto !important
    }
}

@media screen and (min-width: 1600px) {
    .text-shapes, .text-shapes-1, .text-shapes-3, .text-shapes-4 {
        margin-top: -25% !important
    }

    nav {
        font-size: 17px !important
    }
}

* {
    padding: 0;
    transition: 0.35s linear
}

body {
    width: 100%;
    height: 100%;
    background-color: #d7dcdd !important
}

header {
    position: fixed;
    height: fit-content;
    max-width: 100%
}

#rating-Value, .content, .div-img, .dropup, .mahsa, .vlog-banner, footer {
    position: relative
}

nav {
    background-color: #0c5865;
    font-size: 14px;
    flex-shrink: 1;
    width: 100vw
}

.navbar-brand {
    width: 35%;
    display: flex;
    justify-content: center;
    margin: auto
}

#mahsa-voice, .navbar-brand img {
    width: 75%
}

.navbar-nav {
    width: 80% !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px
}

#voice-swiper-landing, .drop-section li {
    width: 100% !important
}

#drop-ul, #img-audio-package, .dropdown-item span, .dropup, footer {
    width: 100%
}

#advice {
    border-radius: 10px
}

#advice:hover, #start-now, #start-now-mobile, .follow-us:hover, .landing-container, .myswiper-1 .swiper-slide:hover, .myswiper-2 .swiper-slide:hover, .myswiper-3 .swiper-slide:hover, .package-information {
    background-color: #f2bb09
}

.aricle-date, .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

#login-pc a {
    font-size: 16px;
    border-radius: 13px;
    width: 145px;
    padding-top: 7px;
    padding-bottom: 7px
}

#login-pc i {
    font-size: 23px !important
}

#sign-in {
    background-color: #fff;
    color: gray
}

#sign-in:hover, #sign-up {
    background-color: #f2bb09;
    color: #fff
}

#sign-up:hover, .e-namd a:hover, .title-read .accordion .accordion-item h2 .accordion-button {
    background-color: #fff
}

#login-mobile, #suggestion-article-1, .line-mobile, .line-mobile-2, .rating > input, .sub-menu-blog {
    display: none
}

#login-mobile i {
    font-size: 25px;
    color: #f2bb09;
    padding: 0;
    border-radius: 5px;
    margin: 0
}

#login-tablet i {
    font-size: 30px;
    border: 1px solid #f2bb09;
    padding: 0;
    border-radius: 5px
}

#drop-ul {
    margin-right: -78% !important
}

#drop-ul li a {
    margin-top: 2%;
    width: 100%
}

#hamber, .follow-us i, .vlog-banner h1 {
    font-size: 30px
}

.nav-item:hover .sub-menu-blog {
    display: block !important;
    position: absolute;
    background-color: #d7dcdd;
    margin-right: -1%;
    margin-left: auto;
    list-style-type: none;
    border-radius: 15px
}

.nav-item:hover .sub-menu-blog ul {
    display: block;
    margin: 10px
}

.nav-item:hover .sub-menu-blog li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 15px
}

.nav-item:hover .sub-menu-blog li a {
    color: #0c5865 !important;
    font-size: 16px;
    font-weight: 500
}

footer {
    font-size: 18px;
    height: fit-content !important
}

#footer {
    padding: 5px
}

#first-footer p {
    font-size: 25px;
    color: #d7dcdd
}

.instagram-footer {
    border: 3px solid #f2bb09;
    width: 60%;
    padding: 5px !important;
    height: 10%;
    border-radius: 8px;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center
}

#start-now, #start-now-mobile {
    color: #0c5865;
    border-radius: 10px
}

.instagram-footer p {
    font-size: 15px !important;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center
}

.instagram-footer p i {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.box-1, .e-namd a, .head-4, .sabad {
    justify-content: center
}

footer ul p {
    border-radius: 3px
}

footer ul h4 a {
    color: #d7dcdd
}

footer ul h4 a li {
    font-size: 18px;
    text-align: start;
    margin: 10px 0
}

.e-namd, .title-read .accordion {
    width: fit-content
}

.e-namd img {
    width: 100%;
    height: 40%
}

.e-namd a {
    background-color: #f2bb09;
    color: #0c5865;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin: 0 auto;
    font-weight: 600;
    border-radius: 15px;
    font-size: 12px !important;
    padding: 0 15px
}

.e-namd a i, .section-pc h1 {
    font-size: 35px
}

.tag-webhamrah {
    color: #fff;
    font-size: 15px
}

footer ul li {
    color: #d7dcdd;
    font-size: 18px
}

#social-media a i, .envelope, .facebook, .whatsapp {
    font-size: 30px;
    color: #d7dcdd
}

#facebook:hover, .dropup-link:hover #facebook {
    color: #1877f2
}

#whatsapp:hover {
    color: #25d366
}

#buy-package-pc:hover, #envelope:hover, .buy-package-pc:hover, .call:hover, .choose:hover, .h-moshavere, .text-shapes-3 h3, .text-shapes-4 h3 {
    color: #fff
}

.section-pc {
    width: 100%;
    height: 95vh;
    background-image: url(/upload/static/background-1.png);
    background-size: 100% 95%;
    display: none;
    flex-direction: row;
    gap: 10px
}

#body-box-1, #body-box-2, #body-box-3, #body-box-4, #head-box-1, #head-box-2, #head-box-3, #head-box-4, .head, .head-1, .sabad {
    background-size: contain
}

.section-mobile {
    flex-direction: row;
    margin-bottom: 30px
}

.section-pc p {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    margin-top: 80px;
    margin-bottom: 60px;
    line-height: 1.5
}

.section-mobile p {
    font-size: 30px;
    line-height: 1.5;
    font-weight: 400
}

.text-mobile {
    margin-top: 0;
    background-color: #030506;
    color: #fff;
    padding: 5px
}

.h1-index, .off-package h3 {
    padding-bottom: 10px;
    width: fit-content
}

#start-now-mobile {
    font-size: 20px;
    font-weight: 600;
    padding: 15px 70px
}

#start-now {
    font-size: 28px;
    font-weight: 600;
    padding: 10px 80px
}

#start-now:hover {
    background-color: #d7dcdd
}

.follow-us {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    border: 2px solid #f2bb09;
    border-radius: 7px;
    width: 350px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

#motive-package, .bottom-package, .follow-us i {
    align-items: center;
    display: flex
}

.back-button-box a, .color, .content, .h1-index, .off-package, .price span, .text, .text-article-sugession a, .vlog-cards h2 a {
    color: #0c5865
}

#social-media {
    margin-top: 60px
}

.h1-index {
    font-size: 35px;
    border-bottom: 4px solid #fc0;
    margin: 0 auto 5%
}

.off-package {
    margin-top: 20px !important
}

.off-package p {
    font-size: 20px;
    font-weight: 600
}

.takhfif-index {
    width: 90%;
    height: 700px
}

#a-content {
    width: 100%;
    height: 60%
}

#a-content img {
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 3px 6px rgb(0 0 0 / .3);
    top: 0
}

.myswiper, .myswiper-1 .swiper-slide .video-1 img, .swiper {
    width: 100%;
    height: 100%
}

.swiper-slide {
    width: 50%;
    height: 100%;
    border-radius: 15px;
    margin: 0 0 5px;
    overflow: hidden
}

.content:hover, .myswiper-4 .swiper-slide:hover {
    background-color: #f2bb09 !important
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 5px;
    user-select: none;
    margin: 0
}

.content::after, .content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: #fff
}

.content h3 {
    font-size: 18px
}

#motive-package {
    height: 25%;
    font-weight: 600
}

.content span {
    top: 0;
    font-size: 1rem;
    font-weight: 400;
    padding: 0;
    margin: 0
}

.price {
    margin-bottom: 50px
}

.bottom-package {
    width: 100%;
    justify-content: space-between;
    position: absolute;
    bottom: 1px;
    padding-top: 20px
}

.head, .sabad {
    align-items: center
}

.player, .sabad {
    position: relative
}

.bottom-package a {
    font-size: 15px !important;
    color: #0c5865;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important
}

.sabad {
    background-image: url(/upload/static/sabad.png);
    padding: 5px 0;
    width: 32%;
    margin-right: -25px;
    height: 100%;
    display: flex
}

.a-sabad {
    display: flex;
    justify-content: center;
    width: 100%
}

.price h5, del {
    color: red
}

.player {
    width: 60%;
    background-image: url(/upload/static/Mask-Group-10.png);
    display: grid;
    padding: 0;
    border-radius: 10px;
    margin-bottom: 10px
}

#current, #current1, #current2, #current4, .control, .control1 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 10px;
    color: #d7dcdd
}

#playbtn, #playbtn1, #playbtn3, #playbtn4 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: #f2bb09;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #f2bb09;
    cursor: pointer;
    padding: 4px;
    margin-left: 14px
}

#more-video, .card-info div span {
    font-size: 20px
}

#playbtn3:hover, #playbtn:hover, .playbtn1:hover, .playbtn4:hover {
    background-color: #fff;
    width: fit-content;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center
}

#current, #current2, .current1, .current4 {
    position: absolute;
    right: 0;
    padding-right: 10px
}

#progress, #progress2, .progress1, .progress4 {
    display: block;
    width: var(--progress, 0%);
    height: 5px !important;
    background-color: #f2bb09;
    transition: 1s linear
}

#player1, #player2, #player4 {
    background-image: url(asset/mask\group\10png);
    display: grid;
    padding: 0;
    position: relative;
    border-radius: 30px
}

#head-box-1, #head-box-2, #head-box-3, #head-box-4 {
    height: 40%;
    width: 80%
}

#progress-bar, #progress-bar2, .progress-bar1, .progress-bar4 {
    width: var(--progress, 100%);
    background-color: #d7dcdd;
    cursor: pointer
}

#where-start {
    height: 140px;
    display: flex;
    justify-content: space-around;
    align-items: center
}

#where-start p {
    font-size: 2rem;
    word-spacing: 1px;
    font-weight: 700;
    color: #0c5865
}

#where-start p a {
    color: #fff;
    background-color: #0c5865;
    padding: 10px 100px;
    border-radius: 20px
}

.title-cards {
    display: flex;
    flex-direction: column;
    color: #0c5865;
    justify-content: center;
    align-items: center;
    margin-top: 5%
}

.title-border {
    border-bottom: 4px solid #f2bb09;
    width: fit-content;
    padding-bottom: 10px;
    font-size: 30px
}

.head, .head-1 {
    width: 40% !important;
    height: 27%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    color: #fff
}

.p-card {
    font-size: 22px
}

.head {
    background-image: url(/upload/static/Ellipse-13.png)
}

.head-1 {
    background-image: url(/upload/static/Ellipse-14.png);
    align-items: center
}

#body-box-1, #body-box-3, .text-shapes {
    background-image: url(/upload/static/Subtraction-8.png)
}

.text-shapes, .text-shapes-1 {
    border-radius: 25px;
    background-size: contain;
    justify-content: center;
    margin-top: -40%;
    width: 100%;
    height: 100%;
    background-position: center;
    display: flex
}

.free, .vlog-banner {
    background-size: cover
}

.head h4, .head-1 h4 {
    color: #fff;
    font-weight: 700;
    font-size: 18px
}

.text-shapes, .text-shapes-1 {
    align-items: center
}

#body-box-2, #body-box-4, .text-shapes-1 {
    background-image: url(/upload/static/Subtraction-9.png)
}

.text-shapes p, .text-shapes-1 p {
    display: flex;
    justify-content: center;
    margin-bottom: 25%;
    color: #fff;
    padding: 45% 2% 0;
    font-weight: 600;
    height: 600px;
    overflow-y: hidden
}

.head-3, .shapes-2 {
    justify-content: center;
    width: 100%
}

#div-shapes {
    margin-bottom: 10%;
    height: 100%;
    width: 100%
}

#div-shapes-2 {
    width: 100%;
    height: 100%;
    margin-bottom: 10%;
    margin-top: 0
}

#sport {
    margin-top: 12%;
    margin-bottom: 0
}

.head-3 {
    height: 100%;
    display: flex;
    background-image: url(/upload/static/Ellipse-15.png)
}

.head-3 span, .head-4 span, .up-article p i, .up-article p span {
    display: flex;
    justify-content: center;
    align-items: center
}

.text-shapes-3, .text-shapes-4 {
    align-items: center;
    display: flex;
    background-position: center;
    background-repeat: no-repeat
}

.head-3 span img, .head-4 span img {
    width: 100%;
    height: 30%
}

.head-4 {
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url(/upload/static/Ellipse-16.png);
    background-position: center;
    background-repeat: no-repeat
}

.text-shapes-3, .text-shapes-4 {
    width: 100%;
    height: 250px;
    margin-top: -32%;
    background-size: cover
}

.text-shapes-3 {
    background-image: url(/upload/static/Subtraction-10.png);
    justify-content: center
}

.text-shapes-4 {
    background-image: url(/upload/static/Subtraction-16.png);
    justify-content: center
}

#khadamat, .box-1 {
    align-items: center
}

.box-1, .box-2 {
    position: relative;
    height: 320px;
    width: 40%;
    display: flex;
    background-position: center;
    background-repeat: no-repeat
}

.box-1 {
    background-image: url(asset/ellipse\20png)
}

.box-2 {
    background-image: url(asset/path\1668png);
    justify-content: center;
    align-items: center
}

.line, .line-2 {
    position: absolute;
    left: 0;
    z-index: -1
}

.span-text {
    width: 65% !important;
    height: 100%
}

.p-moshavere {
    color: #fff;
    font-weight: 700;
    font-size: 17px
}

.line-2 {
    right: 65%;
    bottom: 10%
}

.line {
    right: 70%
}

.myswiper .swiper-slide {
    width: 40%;
    height: 500px;
    border-radius: 15px;
    margin: 0 0 5px;
    overflow: hidden;
    background-color: #d7dcdd !important
}

.myswiper-1 .swiper-slide, .myswiper-2 .swiper-slide {
    height: 60% !important;
    margin: 0 0 5px;
    box-shadow: 0 8px 10px rgb(0 0 0 / .5), inset 0 2px 2px rgb(0 0 0 / .2);
    padding: 5px;
    overflow: hidden
}

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

#direct-opinion, #khadamat {
    justify-content: space-between;
    display: flex
}

#head-box-1 {
    background-image: url(/upload/static/Group-366.png);
    background-position: center;
    background-repeat: no-repeat
}

#body-box-1, #body-box-3 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -15%;
    position: relative
}

#body-box-1 div, #body-box-2 div, #body-box-3 div, #body-box-4 div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20%;
    align-items: center;
    color: #fff;
    padding: 40% 10% 0;
    font-weight: 600;
    overflow-y: hidden
}

#head-box-2 {
    background-image: url(/upload/static/Group-459.png);
    background-position: center;
    background-repeat: no-repeat
}

#head-box-3 {
    background-image: url(/upload/static/Group-461.png);
    background-position: center;
    background-repeat: no-repeat;
    position: relative
}

#head-box-4 {
    background-image: url(/upload/static/Group-467.png);
    background-position: center;
    background-repeat: no-repeat
}

#body-box-2, #body-box-4 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -15%
}

.myswiper-1, .myswiper-2 {
    width: 100% !important;
    height: 70%
}

.myswiper-1 .swiper-slide {
    width: 100%;
    border-radius: 15px;
    background-color: #fff
}

#khadamat {
    width: 80%
}

#phone-number, #submit-mobile {
    font-size: 22px;
    font-weight: 700
}

#direct-opinion {
    align-items: center;
    width: 85%
}

.myswiper-2 .swiper-slide {
    width: 5%;
    border-radius: 20px;
    background-color: #fff
}

.video-2 video {
    width: 100%;
    height: 350px;
    border-radius: 20px
}

#mahsa-changes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    height: fit-content;
    padding: 10px
}

.myswiper-3 .swiper-slide {
    height: 100% !important;
    border-radius: 15px;
    margin: 0;
    overflow: hidden;
    cursor: grab;
    display: flex;
    justify-content: center
}

.myswiper-3 .swiper-slide img {
    width: 100% !important;
    height: 300px
}

#posetive-energy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%
}

.myswiper-4 .swiper-slide {
    width: 50%;
    height: 100% !important;
    border-radius: 20px;
    margin: 0 0 5px;
    overflow: hidden;
    box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
    padding: 10px;
    border: 1px solid gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    gap: 30px
}

.card-info {
    padding-top: 20px;
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px
}

.card-info img {
    width: 25%;
    height: 50px
}

.p-comment {
    width: 70% !important
}

.p-date {
    text-align: left;
    color: #0c5865;
    font-weight: 500;
    font-size: 13px
}

.card-info div p {
    font-weight: 700;
    color: #0c5865;
    padding-top: 5%
}

.p-2-comment {
    height: 100px
}

.next, .prev {
    color: #000;
    border: 0;
    background-color: #d7dcdd;
    font-size: 1.6rem
}

#send-number {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center
}

.form-send-number {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%
}

#phone-number {
    width: 100%;
    padding: 10px;
    text-align: center;
    word-spacing: 5px;
    border: 0;
    border-radius: 20px
}

#phone-numbe:focus {
    border: 0 !important
}

.form-send-number input[class|="phone-number"]::placeholder {
    color: #0c5865;
    font-size: 24px;
    font-weight: 700
}

#submit-mobile {
    width: 50%;
    padding: 8px 5px;
    text-align: center;
    background-color: #0c5865;
    color: #fff;
    border: 0;
    border-radius: 20px
}

#suggestion-article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    height: 70%
}

.article-card, .myswiper-5 .swiper-slide {
    display: flex;
    flex-direction: column;
    height: 100%
}

.myswiper-5 .swiper-slide {
    width: 100%;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / .3) 0 4px 12px;
    justify-content: space-between;
    padding: 10px
}

.aricle-date {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    bottom: 0
}

.article-card {
    justify-content: space-between;
    align-items: center !important
}

.demo-card, .form-moshavere {
    flex-direction: column;
    display: flex
}

.article-card h3 {
    height: 50px;
    font-size: 17px
}

.article-card-description {
    height: 200px;
    overflow: hidden
}

.myswiper-5 .swiper-slide img {
    margin-bottom: 20px;
    border-radius: 15px;
    width: 100%;
    height: 200px !important
}

.faq {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    color: #0c5865;
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px
}

.buy-package-mobile, .img-mahsa, .vlog-banner, .vlog-cards .card-vlog img {
    margin-left: auto;
    margin-right: auto
}

.faq::-webkit-scrollbar {
    width: 5px
}

.faq::-webkit-scrollbar-track {
    background: #0c5865
}

.faq::-webkit-scrollbar-thumb {
    background: #f2bb09;
    border-radius: 10px
}

.faq::-webkit-scrollbar-thumb:hover {
    background: #f2bb09
}

.accordion-button:after, .accordion-button:before, .accordion-button:focus {
    background-color: #fff;
    border: none
}

.choose, .tag-landing a {
    border-radius: 15px
}

.accordion-button, .demo-card p {
    color: #0c5865;
    font-weight: 600
}

.faq div {
    color: #515a5a
}

.mahsa-photo {
    position: relative;
    width: 80%;
    max-width: 500px;
    padding-top: 20%
}

.img-mahsa {
    position: absolute;
    opacity: 1;
    height: 600px;
    bottom: -85px;
    width: 70%
}

.img-mahsa-2 {
    display: block;
    width: 65%;
    height: 65%
}

.landing-text p {
    width: 80%;
    font-size: 17px;
    font-weight: 600;
    color: #0c5865
}

#submit, .tag-landing a {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    background-color: #0c5865
}

.tag-landing a {
    width: 50%;
    padding: 15px 0
}

.image-voice {
    background-color: #0c5865;
    height: 100%
}

.image-voice img {
    width: 48%;
    height: 350px
}

.free {
    height: 100%;
    background-image: url(asset/mask\group\12png);
    background-repeat: no-repeat;
    background-position: center
}

.form-moshavere {
    align-items: center;
    align-items: center;
    gap: 20px
}

.description, .name-family, .phone {
    width: 35%;
    padding: 20px 0;
    text-align: center;
    border: 0;
    border-radius: 15px;
    font-size: 18px
}

.form-moshavere input[class|="description"]::placeholder, .form-moshavere input[class|="name-family"]::placeholder, .form-moshavere input[class|="phone"]::placeholder {
    font-size: 19px;
    color: #0c5865;
    font-weight: 600
}

#submit {
    width: 15%;
    padding: 20px 0;
    text-align: center;
    border: 0;
    border-radius: 15px
}

.myswiper-6 {
    width: 100% !important;
    height: 100%
}

.myswiper-6 .swiper-slide {
    width: 30%;
    height: 40% !important;
    border-radius: 20px;
    margin: 0 0 5px;
    overflow: hidden;
    box-shadow: rgb(60 64 67 / .3) 0 1px 2px 0, rgb(60 64 67 / .15) 0 2px 6px 2px;
    padding: 5px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / .24) 0 3px 8px
}

.audio-player {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

#player1, #player4 {
    width: 60%;
    background-position: center;
    margin-bottom: 10px
}

.demo-card {
    justify-content: center;
    gap: 10px
}

.demo-card img {
    border-radius: 30px;
    padding: 10px
}

.takhfifi-landing {
    background-color: #0c5865;
    width: 100%;
    height: 100%
}

#buy-package-pc, .choose, .package-information-2 .buy-package-mobile {
    background-color: #f2bb09;
    color: #0c5865
}

#div-form-bmi, .package-information-2, .save, .swipper-takhfif-landing {
    background-color: #0c5865
}

.call, .choose {
    width: 40%;
    font-size: 20px;
    padding: 15px 5px
}

#player2 {
    width: 100%;
    margin: 0 0 10px;
    background-position: center
}

#player-player-2 {
    width: 70%
}

#explain-package {
    width: 30%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap: 40px;
    position: static
}

#explain-package h2 {
    font-size: 32px
}

.explain-package-p {
    font-size: 20px;
    color: #0c5865;
    line-height: 160%
}

.buy-package-mobile, .buy-package-pc, .call {
    color: #f2bb09;
    border-radius: 15px;
    background-color: #0c5865
}

.div-img-package-off img {
    width: 250px;
    height: 300px
}

.div-description h3 {
    border-bottom: 3px solid #0c5865;
    width: fit-content;
    text-align: center;
    font-size: 26px;
    line-height: 40px;
    color: #0c5865
}

.buy-package-pc {
    padding: 15px 0;
    width: 75% !important;
    font-size: 18px;
    font-weight: 700
}

.new-price {
    font-size: 28px;
    font-weight: 600;
    text-decoration: underline;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px
}

.buy-package-mobile {
    padding: 10px 0;
    font-size: 18px;
    width: 100% !important;
    font-weight: 700
}

.div-description p, .form-group label {
    font-size: 18px;
    font-weight: 600;
    color: #0c5865
}

.div-description h5 {
    font-size: 30px;
    color: #0c5865;
    font-weight: 800;
    text-align: left
}

.vlog-banner h1, .vlog-banner h2 {
    color: #fff !important;
    padding-right: 5%
}

#img-audio-faq img {
    width: 60%
}

.vlog-banner {
    content: "";
    background-image: url(/upload/static/fitness-banner.png);
    width: 100%;
    height: 20vh;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10%
}

.vlog-banner h2 {
    font-size: 45px
}

.vlog-cards {
    flex-wrap: wrap
}

.vlog-cards .card-vlog {
    background-color: #fff;
    width: 23%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 10px;
    border-radius: 20px;
    box-shadow: rgb(0 0 0 / .24) 0 3px 8px;
    overflow: hidden
}

.vlog-card-title {
    height: 10px !important;
    font-size: 17px;
    color: #0c5865 !important
}

#card-vlog .vlog-info-p {
    height: 75px !important;
    overflow: hidden
}

.vlog-cards .card-vlog img {
    width: 100%;
    height: 200px;
    border-radius: 15px
}

#vlog-continue {
    color: #f2bb09;
    font-weight: 800;
    font-size: 18px
}

.swipper-takhfif-landing {
    width: 100%;
    padding: 0;
    margin: 0
}

div.breadcrumb {
    padding: 25px 1em;
    border: 1px solid hsl(0deg 0% 90%);
    align-items: start !important;
    background: #fff;
    box-shadow: 0 4px 10px rgb(0 0 0 / .15);
    border-radius: 10px;
    width: 70%
}

.article-side-suggesion, .banner-sidebar {
    border-radius: 15px;
    background-color: #f2bb09
}

.article blockquote, .article blockquote span {
    background-image: url(asset/blockqute.png);
    background-repeat: no-repeat;
    background-size: 30px
}

#label-textarea-blog textarea, .form-group input {
    box-shadow: rgb(60 64 67 / .3) 0 1px 2px 0, rgb(60 64 67 / .15) 0 2px 6px 2px
}

div.breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style: none
}

div.breadcrumb li {
    display: inline
}

div.breadcrumb li a {
    color: #5221bd;
    font-size: 12px !important
}

div.breadcrumb li + li::before {
    display: inline-block;
    margin: .25em 0 0 .25em;
    font-family: FontAwesome;
    content: "\f104";
    color: rgb(103 101 101 / .9)
}

div.breadcrumb [aria-current="page"] {
    color: #5221bd;
    font-weight: 700;
    text-decoration: none
}

.article-banner {
    width: 70%;
    height: auto;
    margin: 2% auto
}

.article-banner-1 {
    width: 50% !important;
    height: 20%;
    margin: 3% auto !important
}

.article p {
    color: #0c5865;
    width: 95%;
    margin: 0 auto;
    line-height: 250%;
    font-size: 18px;
    font-weight: 600
}

.article h2 {
    margin-right: 2.5%;
    margin-bottom: 2%
}

.article blockquote {
    background-color: #fff;
    width: 80%;
    height: 100px;
    margin: 10px auto;
    color: #f2bb09;
    font-size: 20px;
    font-weight: 800;
    border-radius: 10px;
    background-position: top left
}

.article blockquote span {
    width: 100%;
    margin: 0 auto;
    height: inherit;
    background-position: bottom right !important;
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-sidebar {
    width: 100% !important;
    height: 300px;
    margin: 0 auto;
    padding: 20px
}

.img-banner-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 5px
}

.banner-sidebar img {
    width: 50%;
    height: 80%
}

.article-side-suggesion {
    width: 95% !important;
    margin: 10px auto !important;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border: 1px
}

.sidebar-text-article {
    font-size: 14px !important;
    line-height: 150% !important
}

.suggesion-one-article {
    background-color: #d7dcdd;
    width: 100%;
    margin: 0 auto;
    border-radius: 15px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.article-Description {
    height: 150px !important
}

.article-Description p {
    line-height: 120% !important;
    font-size: 13px !important;
    font-weight: 600 !important
}

.article-side-suggesion img {
    width: 100px;
    height: 80px;
    padding: 5px
}

.text-article-sugession {
    display: flex;
    flex-direction: column;
    padding: 0
}

.text-article-sugession span {
    font-size: 12px;
    display: flex;
    justify-content: end;
    align-items: flex-end;
    padding-left: 5px
}

.up-article {
    width: 100% !important;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center
}

.up-article p {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #424949
}

.center, .info {
    justify-content: center;
    display: flex
}

.up-article p i {
    font-size: 16px
}

.info {
    align-items: center;
    font-size: 24px
}

.how-buy-package {
    width: 75%;
    margin: 10px auto;
    line-height: 250%;
    color: #0c5865;
    background-color: #fff;
    padding: 25px;
    border-radius: 15px;
    font-weight: 700
}

#rating-Value, .rating-wrap {
    text-align: center;
    border-radius: 15px;
    color: #fff
}

.container-star {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-bottom: 50px
}

.rating-wrap {
    max-width: 800px;
    background-color: #0c5865;
    margin: auto;
    padding: 25px;
    box-shadow: rgb(50 50 93 / .25) 0 6px 12px -2px, rgb(0 0 0 / .3) 0 3px 7px -3px
}

.center {
    width: 280px;
    margin: auto;
    align-items: center
}

#rating-Value {
    width: 110px;
    margin: 20px auto 0;
    padding: 10px 5px;
    box-shadow: rgb(0 0 0 / .02) 0 1px 3px 0, rgb(27 31 35 / .15) 0 0 0 1px;
    font-size: 22px
}

#tokens-code, #user-mobile {
    color: #0c5865;
    font-size: 18px;
    text-align: center
}

.rating {
    border: none;
    float: left
}

.rating > label::before {
    font-size: 22px;
    content: "\f005";
    font-family: FontAwesome;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.rating > .half:before {
    content: "\f089";
    position: absolute;
    cursor: pointer
}

.rating > label {
    color: #ddd;
    float: right;
    cursor: pointer
}

.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label, .rating > input:checked ~ label {
    color: gold
}

.rating > input:checked + label:hover, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ label:checked ~ label {
    color: #b8860b
}

.rating-wrap h2 {
    color: #fff !important;
    font-size: 28px;
    padding: 0 20px
}

.title-read .accordion .accordion-item h2 .accordion-button:after {
    border: 0
}

.dropup-btn, .tag-section {
    box-shadow: 0 4px 10px rgb(0 0 0 / .15);
    border-radius: 10px;
    height: 70px;
    background: #fff
}

.accordion-body ul li a {
    color: #000 !important;
    font-size: 16px;
    font-weight: 400
}

.accordion-body ul {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.tag-section {
    display: flex;
    width: 80%;
    overflow: hidden;
    align-items: center
}

.tag-section .tags-link {
    color: #000
}

.comment-sent {
    display: block;
    float: left
}

.dropup-btn {
    width: 100%;
    color: #000;
    border: none;
    font-weight: 900;
    font-size: 16px
}

.dropup:focus .dropup-list, .dropup:hover .dropup-list {
    background: #fff;
    --dropup__list_max-ht: fit-content
}

.dropup-list {
    transition: max-height 180ms ease-in-out;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    bottom: 80%;
    right: 0;
    width: 100%;
    max-height: var(--dropup__list_max-ht, 0);
    overflow: hidden;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.dropup-link {
    color: #000;
    text-decoration: 0;
    display: block;
    font-size: 16px;
    font-weight: 700
}

.dropup-link span {
    color: #000
}

.dropup-link i {
    color: gray
}

.dropup-link:hover #telegram {
    color: #08c
}

.dropup-link:hover #instagram {
    color: #c13584
}

.dropup-link:hover #twitter {
    color: #1da1f2
}

.comment-form {
    border: 3px solid #0c5865;
    border-radius: 15px;
    padding: 3%;
    width: 50vw;
    margin: auto
}

.form-row {
    display: flex;
    width: 100%;
    justify-content: space-between
}

.admin-reply {
    font-size: 16px !important;
    color: #554945 !important
}

.coments-box {
    border: 3px solid #0c5865;
    border-radius: 15px;
    padding: 3%
}

.section-about-us {
    background-color: #ffc400;
    height: fit-content;
    width: 100%
}

.bg-yellow {
    width: 100%;
    height: max-content;
    padding-bottom: 10px
}

.div-img {
    width: 100%;
    height: 100%;
    background: url(/upload/static/Group-809.png) center/contain no-repeat;
    padding: 0
}

.mahsa {
    width: 100%;
    height: 85vh;
    background: url(/upload/static/mahsa.png) center/55% no-repeat
}

.info-contact {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center
}

.info-contact img {
    width: 10%
}

.content-span {
    width: 280px !important;
    display: flex;
    justify-content: center;
    align-items: center
}

.yellow {
    width: 100%;
    height: 50%;
    background-color: #f2bb09
}

.form-login input {
    border-radius: 10px;
    padding: 5px;
    width: 80% !important
}

.save {
    border: none;
    padding: 8px 25px;
    font-size: 20px;
    border-radius: 10px;
    color: #fff
}

.form-login {
    background-color: #d7dcdd;
    margin-bottom: 10%;
    border-radius: 10px;
    padding: 5%;
    width: 40%;
    box-shadow: rgb(50 50 93 / .25) 0 50px 100px -20px, rgb(0 0 0 / .3) 0 30px 60px -30px
}

#user-mobile {
    width: 80% !important;
    font-weight: 600;
    padding: 10px 20px
}

.row {
    --bs-gutter-x: 0 !important
}

article h3 {
    margin-right: 5% !important
}

#div-form-bmi {
    width: 60%;
    border-radius: 15px;
    box-shadow: rgb(0 0 0 / .19) 0 10px 20px, rgb(0 0 0 / .23) 0 6px 6px;
    margin: auto
}

#form-BMI {
    width: 90%
}

#div-form-bmi h3 {
    color: #fff;
    font-size: 30px !important;
    text-shadow: #fc0 1px 0 10px
}

#form-BMI input, #form-BMI label {
    width: 100%;
    margin: auto;
    font-size: 18px
}

#form-BMI input {
    padding: 5px;
    text-align: center;
    font-weight: 700;
    border: 0;
    outline: #fc0 solid 2px;
    border-radius: 10px !important
}

#form-BMI label, .result-bmi p {
    color: #fff;
    font-weight: 600
}

#form-BMI input::placeholder {
    color: #909497 !important;
    border: 0 !important
}

#form-BMI .submitBMI {
    width: 35%;
    background-color: #d2e0e6 !important
}

input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border: none
}

.title-bmi img {
    width: 130px;
    height: 230px;
    margin: 10px auto;
    padding: 5px
}

#form-BMI .submitBMI:hover {
    color: #fc0 !important
}

.result-bmi p {
    font-size: 22px;
    border-bottom: 3px solid #fc0;
    width: fit-content;
    padding-bottom: 2% !important;
    border-radius: 5px
}

.accordion-button::after {
    margin-left: 0 !important
}

.want-start {
    padding: 10px 20px !important;
    background-color: #fc0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 15px !important
}

.captcha {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 250px
}

.captcha input {
    margin-top: 5px;
    width: 200px
}

.form-group {
    margin: auto
}

.form-group input {
    font-size: 16px;
    padding: 8px;
    margin: 5px 0 0;
    border-radius: 5px;
    outline: 0;
    border: none
}

#label-textarea-blog {
    font-size: 16px;
    padding: 0;
    margin: 5px auto !important;
    border-radius: 5px;
    outline: 0;
    border: none
}

#label-textarea-blog label {
    margin: auto 10px 5px;
    width: 90%;
    font-size: 20px !important
}

#label-textarea-blog textarea {
    width: 100% !important;
    margin: auto
}

.custom-alert-margin {
    margin-top: 35px;
}

.help-block {
    color: red;
}