@font-face {
    font-family: "STCFont";
    font-weight: normal;
    src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/STCForwardBold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: "STCFont";
    font-weight: bold;
    src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/STCForwardRegular.ttf");
    font-display: swap;
  }

  body {
    font-family: "STCFont" !important;
    direction: rtl;
    text-align: right;
    position: relative;
  }

  * {
    letter-spacing: 0px !important;
  }

  .linktreeContainer {
    position: fixed;
    top: 170px;
    left: -1px;
    z-index: 10;
  }

  .linktreeContainer .socialMedia {
    padding: 0px !important;
  }

  .linktreeContainer .socialMedia a {
    display: block;
    margin-left: -2px;
    height: 60px;
    width: 70px;
    border-radius: 0 25px 25px 0;
    border: 2px solid #000;
    background: transparent;
    margin-bottom: 1em;
    transition: all .4s ease;
    color: #2980b9;
    text-decoration: none;
    line-height: 60px;
    position: relative;
    background: rgba(#27ae60, .1);
    border-color: #27ae60;
    color: #27ae60;
    margin: 0px;
  }

  .linktreeContainer .socialMedia a span {
    position: absolute;
    left: -200px;
    transition: left .4s ease;
    color: #27ae60
  }

  .linktreeContainer .socialMedia a .icon {
    position: absolute;
    top: 50%;
    right: 30%;
    transform: translateY(-50%);
    font-size: 1.5em;
  }

  .linktreeContainer .socialMedia a:hover {
    cursor: pointer;
    width: 180px;
    background: rgba(#27ae60, 1);

    span {
      left: 20px;
    }

    .icon {
      right: 20%;
    }
  }

  @keyframes SocialMedisPulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.4);
    }

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

  .pulse {
    animation-name: SocialMedisPulse;
    animation-duration: .1s;
  }

  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
  }

  a {
    text-decoration: none;
  }

  /*global pages*/

  .headerRight {
    display: flex;
  }

  .headerRightContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 50px;
    flex-wrap: wrap;
  }

  .headerRightContainer .imageContainer {
    margin: 0px 30px;
  }

  .pageHeader {
    background-image: radial-gradient(#1999e8, #031f46);
    /* direction: rtl; */
  }

  .pageHeaderStyle {
    background: url('/public/images/logo-background.png') no-repeat 50%;
    background-size: contain;
    background-position: center;
    min-height: 100vh;
    overflow: hidden;
  }

  .pageHeaderH1 {
    font-size: 70px;
    /* font-weight: bold; */
    opacity: .5;
    margin-bottom: 25px;
  }

  .pageHeaderH5 {
    font-size: 30px;
    /* font-weight: 700; */
    margin-bottom: 20px;
  }

  .headerNavbar {
    /* margin: 0px 60px 0px 60px !important;
    padding: 0px !important; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .headerOperation {
    /* display: flex; */
  }

  .headerLeft {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .headerNavbar .nav-item a {
    cursor: pointer;
    color: #fff;
    padding: 0px 1em !important;
    font-Size: 15px !important
  }

  .pageP {
    font-weight: bolder;
  }

  .frame .iframe iframe {
    width: 100%;
    height: 335px;
  }

  /*end global pages*/

  /*start header*/
  /* .translate-btn {
    position: relative;
    right: 3em;
    color: #053987;
    border-radius: 50%;
    background: rgb(25, 153, 232);
    background: linear-gradient(90deg,
            rgb(250, 250, 250) 0%,
            rgb(157, 211, 245) 50%,
            rgb(82, 182, 245) 100%);
    border: none;
    font-weight: bold;
    font-family: "STCFont" !important;

    @media (max-width: 991px) {
        right: 0;
        left: 40%;
        top: 2.4em;
    }
} */

  .favorite-btn {
    /* position: relative;
    left: -4%; */
    color: #053987;
    background-color: #fff;
    border-radius: 50%;
    padding: 0.4em 0.7em;
    font-size: 14px;

    /* @media (max-width: 991px) {
      right: 0;
      left: 35%;
      top: 2.4em;
    } */
  }

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

    .favorite-btn,
    .translate-btn {
      font-size: 0.9em;
    }
  } */

  .profile {
    cursor: pointer;
    padding: 0px;
  }

  .profile-name {
    color: #fff;
  }

  .profile-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0px 10px;
  }

  .en-nav {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    color: #fff;
    font-weight: 900;
    text-align: center;
    font-size: 13px;
  }

  .header .navbarBrandImage {
    width: 90px !important;
  }

  .header .navbar {
    background-color: #053987 !important;
  }

  /* .header .navbar-nav {
    margin: auto !important;
  } */

  .header .nav-link {
    color: #fff;
  }

  .header ul li a {
    padding: 0px 1.1rem !important;
    font-size: 18px !important;
  }

  .header ul li a span {
    position: relative;
  }

  .header ul li a span::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    top: 130%;
    left: 0;
    background: #4cb0f8;
    transition: transform 0.5s;
    transform: scaleX(0);
    transform-origin: right;
  }

  .header .navbar-nav li a span:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .header .navbar-nav li a span:hover {
    color: #4cb0f8 !important;
  }

  .header .favorite:hover {
    background-color: #fff;
    color: #031f46;
  }

  .headerLogin {
    /* position: relative; */
    text-decoration: none;
    color: #fff;
    margin: 0px 10px;
  }

  .headerLogin:hover {
    color: #0d6efd;
  }

  /* .headerLogin span::before {
    content: '';
    background: url("/public/images/signin-dumble-left.png") no-repeat center center;
    width: 10px;
    height: 10px;
    left: -35px;
  } */
  .sign-in {
    margin: 0px 20px;
  }

  .sign-in .headerLogin {
    /* position: relative !important; */
    /* text-align: center; */
    cursor: pointer;
  }

  .sign-in .headerLogin .logoutContainer {
    position: relative !important;
    text-align: center;
    cursor: pointer;
    color: #ccc;
    text-decoration: none;
  }

  .sign-in .headerLogin .logoutContainer::before {
    content: '';
    position: absolute;
    right: -35px;
    top: -7px;
    background: url('../images/signin-dumble-right.png');
    width: 26px;
    height: 26px;
  }

  .sign-in .headerLogin .logoutContainer::after {
    content: '';
    position: absolute;
    left: -35px;
    top: -7px;
    background: url('../images/signin-dumble-left.png');
    width: 26px;
    height: 26px;
  }

  .sign-in .headerLogin .list {
    list-style: none;
    margin: 0px;
    padding: 0px 0.5rem;
  }

  .sign-in .headerLogin .listAR {
    text-align: right;
  }

  .sign-in .headerLogin .listEN {
    text-align: left;
  }

  .sign-in .headerLogin .list .list-item {
    padding: 6px 5px;
    margin: 2px 0px;
    font-size: 14px;
    font-weight: bolder;
  }

  .sign-in .headerLogin .list .list-item:hover {
    background-color: #ccc !important;
    border-radius: 5px;
  }

  .sign-in .headerLogin .list .list-item a {
    padding: 0px !important;
    font-size: 14px !important;
    color: #111;
    text-decoration: none;
  }

  .sign-in .headerLogin .list .list-item a:hover {
    color: #111 !important;
  }

  .sign-in .headerLogin .dropdown .userName::before {
    content: '';
    position: absolute;
    right: -35px;
    top: -7px;
    background: url('../images/signin-dumble-right.png');
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
  }

  .sign-in .headerLogin .dropdown .userName::after {
    content: '';
    position: absolute;
    left: -35px;
    top: -7px;
    background: url('../images/signin-dumble-left.png');
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
  }

  /*   
  .headerLogin span::after {
    content: '';
    width: 10px;
    height: 10px;
    background: url("/public/images/signin-dumble-right.png") no-repeat center center;
    right: -35px;
  } */

  /*end header*/

  /*start gym page*/
  .gymName:hover {
    color: #4c8eff !important;
    transition: all .3s ease-in-out;
  }

  .gymSearchButton {
    border-radius: 25px;
    background-color: #f8f9fa;
    padding: 6px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 41px;
  }

  .gymSearchButtonIconAr {
    position: relative;
    top: -30px;
    left: -20px;
  }

  .gymSearchButtonIconEn {
    position: relative;
    top: -30px;
    right: -20px;
  }

  .trainer-gym {
    min-height: 18em;

    @media (max-width: 991px) {
      height: auto;
    }
  }

  .trainer-img img {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50%;
  }

  .trainer-image {
    width: 100% !important;
    height: 100% !important;
  }

  .trainer-top-area {
    position: relative;
  }

  .favorite-trainer-btn {
    position: absolute;
    background-color: #fff;
    padding: 0.4em 0.6em;
    border-radius: 50%;
    top: 0%;
    right: 0%;

    @media (max-width: 991px) {
      right: 0;
    }
  }

  /*end gym page*/

  /*start trainer page*/
  .allTrainer .trainer-name a {
    font-size: 15px !important;
    text-decoration: none !important;
    color: #111 !important;
  }

  .allTrainer .trainer-name a:hover {
    color: #313eb3 !important;
    transition: all .4s;
  }

  .trainerSearchButton {
    position: relative;
    border-radius: 25px;
    background-color: #f8f9fa;
    padding: 6px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 41px;
  }

  .trainer-section {
    position: relative;
    border: 1px solid transparent;
    padding: 10px 10px 100px 10px;
    background-color: #e7f5fc;
    border-radius: 15px;
    margin: 10px 0px;
    height: auto;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .trainerSearchButtonIconAr {
    position: relative;
    top: -30px;
    left: -20px;
  }

  .trainerSearchButtonIconEn {
    position: relative;
    top: -30px;
    right: -20px;
  }

  .trainer-gym {
    min-height: 18em;

    @media (max-width: 991px) {
      height: auto;
    }
  }

  .trainer-img img {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50%;
  }

  .trainer-image {
    width: 100% !important;
    height: 100% !important;
  }

  .trainer-top-area {
    position: relative;
  }

  .favorite-trainer-btn {
    position: absolute;
    background-color: #fff;
    padding: 0.4em 0.6em;
    border-radius: 50%;
    top: 0%;
    right: 0%;

    @media (max-width: 991px) {
      right: 0;
    }
  }

  /*end trainer page*/

  /* start trainerDetails */
  .trainerDetails {
    padding: 150px 0px;
    background-image: radial-gradient(#1999e8, #214f83);
    /* direction: rtl; */
  }

  .trainerDetails .trainerMainInfo {
    background-color: #eee;
    border-radius: 7px;
    padding: 17px;
  }

  .trainerDetails .trainerMainInfo img {
    border-radius: 5px;
    width: 100%;
    object-fit: cover;
  }

  .trainerDetails .trainerMainInfo .info {
    font-weight: bolder;
    margin: 0px 50px;
  }

  .trainerDetails .trainerMainInfo .info .trainerSnapChat {
    border: 1px solid #fffc00;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    color: #111;
    font-size: 1.3em;
    text-decoration: none;
  }

  .trainerDetails .trainerMainInfo .info .trainerInstgram {
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3em;
    color: red;
    text-decoration: none;
  }

  .trainerDetails .trainerMainInfo .info .trainerInstgram:hover {
    background-color: red;
    color: #fff !important;
    transition: all .3s;
  }

  .trainerDetails .trainerMainInfo .info .trainerSnapChat:hover {
    background-color: #fffc00;
    color: #111 !important;
    transition: all .3s;
  }

  .trainerDetails .trainerAbout {
    background-color: #eee;
    border-radius: 7px;
    padding: 17px;
    margin: 20px 0px;
  }

  .trainerDetails .trainerAbout p {
    opacity: .9;
    font-weight: bolder;
  }

  .trainerDetails .trainerVideos {
    background-color: #eee;
    border-radius: 7px;
    padding: 17px;
    margin: 20px 0px;
  }

  .trainerDetails .trainerAchievements .operation {
    background-color: #eee;
    border-radius: 7px;
    padding: 17px;
    margin: 20px 0px;
  }

  .trainerDetails .trainerAchievements .trainerSeveralData {
    background-color: #eee;
    border-radius: 7px;
    padding: 17px;
    margin: 20px 0px;
  }

  .trainerDetails .trainerAchievements .operation .operationButtom {
    border: 1px solid #111;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;
    width: 100%;
  }

  .trainerDetails .trainerAchievements .operation .operationButtom:hover {
    color: white;
    background-color: #0d6efd;
    border-color: transparent;
  }

  .trainerDetails .trainerAchievements .operation .activeTrainerOperation {
    color: white;
    background-color: #0d6efd;
    border-color: transparent;
  }

  .activeOperationButtom
  /* end trainerDetails */

  /* start slider*/
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 50px;
  }

  .swiper-slide img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: cover;
  }

  .swiper-slide h4 {
    line-height: 50px;
    color: #707070;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 2px;
  }

  /* end slider*/

  /*start home*/
  .pageHeader .pageHeaderStyle .homeHeaderContent {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute;
    top: 40%;
    right: 20%; */
  }

  .alcoachApp {
    padding: 100px 0px;
    background-image: radial-gradient(#1999e8, #031f46);
  }

  .alcoachApp p {
    font-weight: bolder;
  }

  .alcoachApp .alCoachHomeH4 {
    margin: 2em 0px;
    margin: 2em 0;
    color: #fff;
    line-height: 1.5;
    opacity: .7;
    font-size: 1.2em;
    letter-spacing: 2px;
  }

  .alcoachApp .alcoachAppH2 {
    margin: 50px 0px 30px;
    font-weight: 700;
    opacity: .7;
    margin: 50px 0 30px;
    color: #fff;
    font-size: 1.5em;
  }

  .homeCustomerReview {
    background-color: #f7f7f7;
    padding: 100px 0 200px;
    /* direction: rtl; */
  }

  .homeCustomerReview .customerH2 {
    font-size: 40px;
    font-weight: 700;
    opacity: .5;
    color: #707070;
    margin-bottom: 10px;
  }

  .homeCustomerReview .customerP {
    margin: 0px 0px 16px;
    font-size: 15px;
    color: #707070;
    font-weight: bolder;
  }

  .homeRate {
    color: #fec208;
  }

  /*end home*/

  /* start blogPage*/
  .blogTitle,
  .blogComment,
  .blogRate {
    font-weight: bolder !important;
  }

  .blogTitle {
    color: #fff;
  }

  .blogSearchButton {
    border-radius: 25px;
    background-color: #f8f9fa;
    padding: 6px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 41px;
  }

  .blogSearchButtonIconAr {
    position: relative;
    top: -30px;
    left: -20px;
  }

  .blogSearchButtonIconEn {
    position: relative;
    top: -30px;
    right: -20px;
  }

  /* end blogPage*/

  /*start home*/
  .homeRate {
    color: #fec208;
  }

  /*end home*/

  /*start footer*/
  .footer {
    /* direction: rtl; */
    width: 100%;
    /* height: 280px; */
    /* padding: 0em 0px 1em 0px; */
    /* position: relative;
    z-index: 1000; */
  }

  .footerList {
    background-color: rgb(242, 242, 242);
    padding: 100px 50px;
  }

  .footerList ul li {
    text-decoration: none;
    list-style: none;
    color: #707070;
  }

  .footerList a {
    color: #111 !important;
    font-weight: bolder;
    margin: 10px 0px;
  }

  .footerList ul li span {
    color: #111;
  }

  .footerList ul li h3 {
    margin: 0px;
  }

  .childList {
    width: 100% !important;
    /* display: flex !important; */
    list-style-type: none !important;
    padding: 0px !important;
    /* flex-direction: column !important; */
    margin-top: 20px;
  }

  .childList li a {
    text-decoration: none;
  }

  .childList li a span {
    color: #575757;
  }

  .childList li a:hover {
    border-bottom: 1px solid #111;
  }

  .followUS {
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .followUS .followUSQRCode {
    margin-top: 20px;
  }

  .mobileApp ul li {
    margin: 0px;
  }

  .mobileApp ul li img {
    width: 200px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    object-fit: fill;
    margin-bottom: 5px;
  }

  .footerMenue {
    position: absolute;
    top: -85%;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 310px;
    min-height: 310px;
    max-height: auto;
    overflow-y: scroll;
    background-color: #fff;
    padding: 30px;
    font-size: 20px;
    text-align: center;
    font-weight: bolder !important;
    display: none;
  }

  .footerMenue .follow a {
    text-decoration: none !important;
  }

  /*end footer*/
  /* .copyRight p {
    font-size: 15px;
    color: #6b6b6b;
    text-align: center;
  } */

  .copyRight {
    display: flex;
    justify-content: center;
    padding: .7em;
    background-color: rgba(5, 57, 135, 0.2) !important;
  }

  /* gym details start */
  .gymDetailsPage {
    background-image: radial-gradient(#1999e8, #214f83);
    padding: 150px 0px 64px;
  }

  .gymDetailsPage .gymDetailsContainer {
    background-color: #fff;
    border-radius: 30px;
    padding: 50px;
  }

  .gymDetailsPage .gymDetailsContainer .gymDetailsImage {
    width: 100%;
    margin: auto;
    display: block;
    object-fit: cover;
  }

  .gymDetailsNav .navbar-nav li {
    cursor: pointer;
  }

  .gymDetailsNav .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
  }

  .gymDetailsNav .navbar-nav li:hover {
    color: #313eb3 !important;
  }

  .activeGymDetailsNav {
    padding: 10px 20px;
    background-color: #d3d3d3;
    border-radius: 10px;
    color: #313eb3 !important;
  }

  .gymDetailsNav .footerFeature .feature {
    border: 1px solid transparent;
    padding: 10px 15px;
    background-color: #eee;
    color: #232d8b;
    border-radius: 10px;
    font-weight: bolder;
    margin: 10px 5px;
    display: flex;
    align-items: center;
  }

  .gymDetailsNav .gymNav {
    padding: 15px 0px;
    background-color: #eee;
  }

  .gymDetailsNav .gymNav ul {
    padding: 15px 3rem;
  }

  .gymDetailsNav .gymNav ul li a {
    border: none;
    color: #858585;
    font-weight: bolder;
  }

  .gymDetailsNav .gymNav ul li a:hover {
    color: #313eb3;
  }

  .gymDetailsfeatureAndInfo {
    min-height: 50vh;
    width: 100%;
    background-color: #fff;
    padding: 20px;
  }

  /* gym details end */

  /* start blogDetails */

  .blogDetails {
    background-image: radial-gradient(#1999e8, #214f83);
    /* direction: rtl; */
    padding: 150px 0px 64px;
  }

  .blogDetails .blogDetailsContainer {
    background-color: #fff;
    border-radius: 15px;
    padding: 50px 40px;
  }

  .blogDetails .blogDetailsContainer .blogDetailsInfo {
    margin: 0px 20px;
  }

  /* end blogDetails */

  /* start reate */
  .rate {

    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;

  }

  .rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center
  }

  .rating>input {
    display: none
  }

  .rating>label {
    position: relative;
    width: 1em;
    font-size: 30px;
    font-weight: 300;
    color: #FFD600;
    cursor: pointer
  }

  .rating>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
  }

  .rating>label:hover:before,
  .rating>label:hover~label:before {
    opacity: 1 !important
  }

  .rating>input:checked~label:before {
    opacity: 1
  }

  .rating:hover>input:checked~label:before {
    opacity: 0.4
  }

  /* end reate */

  /* TWS start */
  .plansWithSystem {
    background-image: radial-gradient(#1999e8, #031f46);
    padding: 100px 0;
  }

  .plansWithSystem button:hover {
    color: #fff !important;
  }

  .plansWithSystemContainer {
    padding: 48px 48px 20px 48px;
  }

  .plansWithSystem ul li {
    position: relative;
    margin-bottom: 25px;
    font-size: 15px;
    list-style: none;
  }

  .plansWithSystem .arabicStyle li::before {
    content: '';
    position: absolute;
    right: -35px;
    background: url('../images/circle.png');
    width: 17px;
    height: 17px;
    top: 3px;
  }

  .plansWithSystem .arabicStyle li::after {
    content: '';
    position: absolute;
    right: -32px;
    background: url('../images/mark.png');
    width: 10px;
    height: 10px;
    top: 8px;
  }

  .plansWithSystem .enStyle li::before {
    content: '';
    position: absolute;
    left: -35px;
    background: url('../images/circle.png');
    width: 17px;
    height: 17px;
    top: 3px;
  }

  .plansWithSystem .enStyle li::after {
    content: '';
    position: absolute;
    left: -32px;
    background: url('../images/mark.png');
    width: 10px;
    height: 10px;
    top: 8px;
  }

  .questionDesign {
    text-decoration: none;
    color: #111;
    padding: 40px 32px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    cursor: pointer;
    position: relative
  }

  .questionDesign:hover {
    border: 2px solid orange;
  }

  .questionDesignActive {
    border: 2px solid orange;
  }

  .twsButtonNext {
    background-color: #343496;
    width: 70%;
    margin: 20px auto;
    height: 50px;
    color: #fff;
    border-radius: 10px;
    border: 1px solid transparent;
  }

  .musclesQuestionSelect {
    color: #fff;
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 25px;
    padding: 0.3em;
    font-size: .8em;
    width: 100%;
    text-align: center;
    cursor: pointer
  }

  .musclesQuestionSelect:hover {
    border: 1px solid orange;
    background-color: #fff;
    color: #111;
  }

  .musclesQuestionActive {
    border: 1px solid orange;
    background-color: #fff;
    color: #111;
  }

  .btn-done {
    background-color: #fff;
    color: #000;
    padding: 1em 1.5em;
    border-radius: 15px;
    margin: 1em 0;
    font-weight: bolder;
  }

  .btn-done:hover {
    background-color: #fff;
  }

  .gymEquipmentsCheck {
    position: absolute;
    top: 15%;
    right: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: #aaa
  }

  .gymEquipmentsCheck:hover {
    background-color: orange;
    cursor: pointer;
  }

  .gymEquipmentsCheckActive {
    background-color: orange;
  }

  .gymOrganization:hover {
    background-color: #dfdfdf;
  }

  .gymBranchesCheck {
    position: absolute;
    top: 15%;
    left: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: #aaa
  }

  .gymBranchesCheckActive {
    background-color: orange;
  }

  .iti {
    width: 100% !important;
  }

  /* start register page */
  .registerForm {
    background-color: #131725 !important;
    border-radius: 15px;
    padding: 3em;
  }

  @media (min-width:481px) and (max-width:760px) {
    .headerRightContainer {
      margin: 0px 25px !important;
    }

    .headerRightContainer .imageContainer {
      margin: 0px !important;
    }

    .alcoachFooterLogo {
      text-align: center !important;
    }
  }

  @media (min-width:600px) and (max-width:991px) {
    .alcoachFooterLogo img {
      width: 400px !important;
    }
  }

  /* responsive website */
  @media only screen and (max-width:480px) {
    .headerRight {
      display: flex;
      width: 100%;
    }

    .headerNavbar {
      margin: 0px 30px 0px 30px !important;
      align-items: normal !important;
    }

    .headerLeft {
      display: block !important;
    }

    .pageHeader .pageHeaderStyle .homeHeaderContent {
      text-align: center;
      padding: 10px;
    }

    .pageHeader .pageHeaderStyle .homeHeaderContent .pageHeaderH1 {
      font-size: 55px;
      margin-bottom: 22px;
    }

    .pageHeader .pageHeaderStyle .homeHeaderContent .pageHeaderH5 {
      font-size: 25px;
      margin-bottom: 22px;
      opacity: .7;
    }

    .headerRightContainer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0px 10px;
      flex-wrap: wrap;
      width: 100%;
    }

    .headerRightContainer .imageContainer {
      margin: 0px !important;
    }

    .headerOperationAr {
      padding: 0px 50px 0px 0px !important;
    }

    .headerOperationEn {
      padding: 0px 0px 0px 70px !important;
    }

    .sign-in-ar {
      margin: 13px 21px 0px 0px !important;
    }

    .sign-in-en {
      margin: 13px 0px 0px 21px !important;
    }

    .navbar-collapse ul li {
      margin: 7px 0px;
    }

    .alcoachApp .homeAbout {
      text-align: center;
    }

    .alcoachApp .alcoachAppInfo {
      padding: 0px 25px;
    }

    /* .alcoachApp .alcoachAppDownload {
      width: 100%;
      margin: auto;
      padding: 20px;
      border-radius: 10px;
    } */

    .homeCustomerReview {
      padding: 50px 0 200px;
    }

    .homeCustomerReview .customerH2 {
      font-size: 2em;
      text-align: center;
    }

    .footer {
      height: 130px;
    }

    .pageHeaderH1 {
      font-size: 45px;
      margin-bottom: 22px;
    }

    .planPageContent {
      text-align: center;
      padding: 0px 20px;
    }

    .planPageContent .pageHeaderH5 {
      font-size: 15px;
      margin-bottom: 22px;
      opacity: .7;
    }

    /* twsPlan */
    .plansWithSystemContainer {
      padding: 48px 40px 20px;
    }

    /* register page*/
    .registerForm {
      background-color: #131725 !important;
      border-radius: 15px;
      padding: 1em;
    }

    /* trainer deatils page */
    .trainerDetails .trainerMainInfo .info {
      font-weight: bolder;
      margin: 0px 0px;
    }

    /* gym Page */
    .gymPageContent {
      text-align: center;
      padding: 0px 20px;
    }

    .gymPageContent .pageHeaderH1 {
      font-size: 40px;
      opacity: .6;
    }

    .gymPageContent .pageHeaderH5 {
      font-size: 15px;
      opacity: .7;
    }

    .gymPageContent .pageP {
      font-size: 10px;
      font-weight: bolder;
    }

    /* gymDetails */
    .gymDetailsPage .gymDetailsContainer {
      padding: 20px;
    }

    .gymDetailsPage .gymDetailsContainer .gymDetailsContent {
      margin-top: 10px;
    }

    .gymDetailsPage .gymDetailsContainer .gymDetailsContent .copyGymURL {
      text-align: center;
    }

    .gymDetailsMapButton {
      margin: 15px 0px;
    }

    .gymDetailsNav .gymNav {
      padding: 10px 0px;
    }

    .gymDetailsNav .gymNav .navbar-nav {
      font-size: 13px;
    }

    .gymDetailsNav .gymNav .navbar-nav .nav-item {
      margin: 0px .5em !important;
    }

    .gymDetailsNav .gymNav .navbar-nav .nav-item .activeGymDetailsNav {
      padding: 6px 13px;
    }

    .gymDetailsfeatureAndInfo {
      padding: 10px;
    }

    .gymDetailsfeatureAndInfo .footerFeature .feature {
      padding: 5px 10px;
      font-size: 13px;
    }

    .gymDetailsNav .gymNav ul {
      padding: .25rem !important;
    }

    .gymDetailsNav .gymNav ul li r {
      margin: 0px .5em !important;
    }

    /* nutritionist */
    .nutritionistPageContent {
      text-align: center;
      padding: 0px 20px;
    }

    .nutritionistPageContent .pageHeaderH1 {
      font-size: 40px;
      opacity: .6;
    }

    .nutritionistPageContent .pageHeaderH5 {
      font-size: 15px;
      opacity: .7;
    }

    .nutritionistPageContent .pageP {
      font-size: 10px;
      font-weight: bolder;
    }

    /* store */
    .storePageContent {
      text-align: center;
      padding: 0px 20px;
    }

    .storePageContent .pageHeaderH1 {
      font-size: 40px;
      opacity: .6;
    }

    .storePageContent .pageHeaderH5 {
      font-size: 15px;
      opacity: .7;
    }

    .storePageContent .pageP {
      font-size: 10px;
      font-weight: bolder;
    }

    /* healthResturantContentPage */
    .healthResturantContentPage {
      text-align: center;
      padding: 0px 20px;
    }

    .healthResturantContentPage .pageHeaderH1 {
      font-size: 40px;
      opacity: .6;
    }

    .healthResturantContentPage .pageHeaderH3 {
      font-size: 15px;
      opacity: .7;
    }

    .healthResturantContentPage .pageP {
      font-size: 10px;
      font-weight: bolder;
    }

    /* healthResturantContentPage */
    .blogPageContentPage {
      text-align: center;
      padding: 0px 20px;
    }

    .blogPageContentPage .pageHeaderH1 {
      font-size: 40px;
      opacity: .6;
    }

    .blogPageContentPage .pageHeaderH5 {
      font-size: 15px;
      opacity: .7;
    }

    .blogPageContentPage .pageP {
      font-size: 10px;
      font-weight: bolder;
    }

    /* blogDetails */
    .blogDetails {
      padding: 190px 0px 64px !important;
    }

    .blogDetails .blogDetailsContainer .blogDetailsInfo {
      margin: 10px 0px;
    }

    .blogDetails .blogDetailsContainer .blogDetailsInfo .copyBlogURL {
      display: flex;
      justify-content: center;
    }

    .blogDetails .blogDetailsContainer {
      padding: 22px;
    }

    .blogDetails .blogDetailsContainer .blogDetailsInfo h5 {
      font-size: 15px !important;
    }

    .alcoachIntroVideo {
      width: 100% !important;
      height: 100% !important;
    }

    .footerList {
      padding: 70px 10px !important;
    }

    .alcoachFooterLogo {
      text-align: center !important;
    }

  }

  @media (min-width:481px) and (max-width:991px) {
    .headerNavbar {
      margin: 0px 30px 0px 30px !important;
      align-items: normal !important;

      .nav-item {
        a {
          margin: 7px 0px !important;
        }
      }
    }

    .headerOperation {
      margin: 7px 0px !important;
    }

    .headerLeft {
      display: block !important;
    }

    .headerOperationAr {
      padding: 0px 50px 0px 0px !important;
    }

    .headerOperationEn {
      padding: 0px 0px 0px 70px !important;
    }

    .sign-in-ar {
      margin: 18px 21px 0px 0px !important;
    }

    .sign-in-en {
      margin: 18px 0px 0px 21px !important;
    }
  }

  .aboutCompany {
    padding: 160px 0px 40px 0px;

  }

  .aboutCompany .aboutCompanyContainer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 8px;
    padding: 10px;
    width: 90%;
    margin: auto;
    font-weight: bolder;
  }

  .aboutCompany .aboutCompanyContainer .pageH1 {
    color: #1f3ea3;
    position: relative;
  }

  .aboutCompany .aboutCompanyContainer .pageH1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 150px;
    height: 2px;
    border-radius: 5px;
    background: #2256ff;
  }

  .aboutCompany .aboutCompanyContainer span {
    color: #1366af;
    font-size: 20px;
  }

  .aboutCompany .aboutCompanyContainer p {
    line-height: 2;
  }

  .termsPage {
    padding: 160px 0px 40px 0px;
    font-weight: bolder;
  }

  .termsPage .pageContainer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 8px;
    padding: 10px;
    width: 90%;
    margin: auto;
  }

  .termsPage .pageContainer .header {
    position: relative;
  }

  .termsPage .pageContainer .header h5 {
    font-weight: bolder;
  }

  .termsPage .pageContainer .header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 2px;
    background-color: lightgray;
    border-radius: 5px;
  }

  .termsPage .pageContainer .pageContent {
    margin-top: 20px;
    line-height: 2;

  }

  .termsPage .pageContainer .pageContent span {
    color: rgb(19, 102, 175);
  }

  .termsPage .pageContainer .pageContent p {
    margin: 0px !important;
  }

  .termsPage .pageContainer .pageContent h6 {
    line-height: 2 !important;
    font-weight: bolder;
  }

  .termsPage .pageContainer .pageContent ol li {
    line-height: 3;
  }

  .termsPage .pageContainer .pageContent ol li .childList li {
    line-height: 2;

  }

  .privacyPolicy {
    padding: 160px 0px 40px 0px;
  }

  .privacyPolicy .privacyPolicyContainer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 8px;
    padding: 10px;
    width: 90%;
    margin: auto;
  }

  .privacyPolicy .privacyPolicyContainer .pageH1 {
    color: #1f3ea3;
    position: relative;
  }

  .privacyPolicy .privacyPolicyContainer .pageH1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 300px;
    height: 2px;
    border-radius: 5px;
    background: #2256ff;
  }

  .privacyPolicy .privacyPolicyContainer .childList li {
    line-height: 2;
    margin-top: 15px;
    color: #111;
    font-weight: bolder;
  }

  .privacyPolicy .privacyPolicyContainer {
    color: #1366af;
    font-size: 20px;
  }

  .refundPolicy {
    padding: 160px 0px 40px 0px;
  }

  .refundPolicy .refundPolicyContainer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 8px;
    padding: 10px;
    width: 90%;
    margin: auto;
    font-weight: bolder;
  }

  .refundPolicy .refundPolicyContainer .pageH1 {
    color: #1f3ea3;
    position: relative;
  }

  .refundPolicy .refundPolicyContainer .pageH1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 300px;
    height: 2px;
    border-radius: 5px;
    background: #2256ff;
  }

  .refundPolicy .refundPolicyContainer .childList li {
    line-height: 2.5;
  }

  .refundPolicy .refundPolicyContainer .childList li p {
    margin: 0px;
  }

  .refundPolicy .refundPolicyContainer span {
    color: #1366af;
    font-size: 20px;
  }

  .cancelPolicy {
    padding: 160px 0px 40px 0px;
  }

  .cancelPolicy .cancelPolicyContainer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 8px;
    padding: 10px;
    width: 90%;
    margin: auto;
    font-weight: bolder;
  }

  .cancelPolicy .cancelPolicyContainer .pageH1 {
    color: #1f3ea3;
    position: relative;
  }

  .cancelPolicy .cancelPolicyContainer .pageH1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 300px;
    height: 2px;
    border-radius: 5px;
    background: #2256ff;
  }

  .cancelPolicy .cancelPolicyContainer .childList li {
    line-height: 2.5;
  }

  .cancelPolicy .cancelPolicyContainer .childList p {
    margin: 0px;
  }

  .cancelPolicy .cancelPolicyContainer span {
    color: #1366af;
    font-size: 20px;
  }

  .shippingAndDelivaryPolicy {
    padding: 160px 0px 40px 0px;
  }

  .shippingAndDelivaryPolicy .shippingAndDelivaryPolicyContainer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 8px;
    padding: 10px;
    width: 90%;
    margin: auto;
    font-weight: bolder;
  }

  .shippingAndDelivaryPolicy .shippingAndDelivaryPolicyContainer .pageH1 {
    color: #1f3ea3;
    position: relative;
  }

  .shippingAndDelivaryPolicy .shippingAndDelivaryPolicyContainer .pageH1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 300px;
    height: 2px;
    border-radius: 5px;
    background: #2256ff;
  }

  .shippingAndDelivaryPolicy .shippingAndDelivaryPolicyContainer li {
    line-height: 2.5;

    p {
      margin: 0px;
    }
  }

  .shippingAndDelivaryPolicy .shippingAndDelivaryPolicyContainer li p {
    margin: 0px;
  }

  .shippingAndDelivaryPolicy .shippingAndDelivaryPolicyContainer span {
    color: #1366af;
    font-size: 20px;
  }

  .contact {
    padding: 160px 0px 40px 0px;
    font-weight: bolder;
  }

  .contact .pageH1 {
    color: #1f3ea3;
    position: relative;
    font-weight: bolder;
  }

  .contact .pageH1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 150px;
    height: 2px;
    border-radius: 5px;
    background: #2256ff;
  }

  .contact .rightSide {
    position: relative;
  }

  .contact .rightSide div {
    display: flex;
    align-items: flex-end;
    margin: 0px 0px 25px 0px;
  }

  .contact .rightSide div p {
    margin: 0px 25px 10px 25px;
  }

  .contact .rightSide::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 1px;
    border-radius: 3px;
    background-color: #ccc;
  }

  .contact .leftSide {
    padding: 0px 100px;

  }

  .contact .leftSide h5 {
    color: #1f3ea3;
    font-weight: bolder;
  }

  .contact .leftSide .submitBtn {
    background-color: #1f3ea3;
    color: #fff;
    margin-top: 15px;
    width: 30%;
  }

  .isValid {
    border: 1px solid red;
  }

  @media (max-width: 991px) {

    .contact .leftSide {
      padding: 0px 50px !important;
    }

    ol {
      padding: 0px 20px !important;
    }

    ul {
      padding: 0px 10px !important;
    }

    li {
      line-height: 1.9 !important;
      font-size: 15px !important;
    }

    .alcoachIntroVideo {
      width: 100% !important;
      height: 100% !important;
    }

    .headerRight {
      width: 100% !important;
    }

    .headerRightContainer {
      width: 100% !important;
    }

    .navbar {
      padding: 1.5rem 1rem !important;
    }

    .followUS {
      align-items: flex-start !important;
    }

  }

  @media (min-width: 1210px) and (max-width:1361px) {
    .headerRightContainer {
      margin: 0px 25px !important;
    }

    .headerNavbar .nav-item a {
      font-size: 13px !important;
    }

    .favorite-btn {
      /* padding: 0.2em 0.5em!important;
      font-size: 13px!important; */
    }

    .headerLogin .dropdown span {
      font-size: 13px !important;
    }
  }

  @media (min-width: 1141px) and (max-width:1209px) {
    .headerRightContainer {
      margin: 0px 20px !important;
    }

    .headerNavbar .nav-item a {
      font-size: 12px !important;
    }

    .favorite-btn {
      /* padding: 0.2em 0.5em!important;
      font-size: 12px!important; */
    }

    .headerLogin .dropdown span {
      font-size: 12px !important;
    }
  }

  @media (min-width: 1073px) and (max-width:1140px) {
    .headerRightContainer {
      margin: 0px 15px !important;
    }

    .headerNavbar .nav-item a {
      font-size: 11px !important;
    }

    .favorite-btn {
      /* padding: 0.2em 0.5em!important;
      font-size: 11px!important; */
    }

    .headerLogin .dropdown span {
      font-size: 10px !important;
    }
  }

  @media (min-width: 1004px) and (max-width:1072px) {
    .headerRightContainer {
      margin: 0px 20px !important;
    }

    .headerNavbar .nav-item a {
      font-size: 10px !important;
    }

    .headerLeft {
      justify-content: space-between !important;
    }

    .headerLogin .dropdown span {
      font-size: 10px !important;
    }
  }

  @media (min-width: 992px) and (max-width:1003px) {
    .headerRightContainer {
      margin: 0px 15px !important;
    }

    .headerNavbar .nav-item a {
      font-size: 10px !important;
    }

    .favorite-btn {
      /* padding: 0.2em 0.5em!important;
      font-size: 10px!important; */
    }

    .headerLogin .dropdown span {
      font-size: 7px !important;
    }
  }

  @media (min-width: 761px) and (max-width:991px) {
    .headerRightContainer .imageContainer {
      margin: 0px !important;
    }
  }

  @media (min-width: 992px) and (max-width:1066px) {
    .imageContainer {
      margin: 0px !important;

      .navbar-brand {
        margin: 0px !important;
      }
    }

    .headerNavbar .nav-item-en a {
      font-size: 8px !important;
    }
  }

  @media (min-width: 1067px) and (max-width:1200px) {
    .imageContainer {
      margin: 0px !important;

      .navbar-brand {
        margin: 0px !important;
      }
    }

    .headerNavbar .nav-item-en a {
      font-size: 9px !important;
    }
  }

  @media (min-width: 1067px) and (max-width:1072px) {
    .headerNavbar .nav-item a {
      font-size: 8px !important;
    }
  }

  @media (min-width: 1201px) and (max-width:1300px) {
    .headerRightContainer {
      margin: 0px !important;
    }

    .headerNavbar .nav-item-en a {
      font-size: 9px !important;
    }
  }

  @media (min-width: 1301px) and (max-width:1390px) {
    .headerRightContainer {
      margin: 0px !important;
    }

    .headerNavbar .nav-item-en a {
      font-size: 10px !important;
    }
  }

  @media (min-width: 1391px) and (max-width:1490px) {
    .headerRightContainer {
      margin: 0px !important;
    }

    .headerNavbar .nav-item-en a {
      font-size: 12px !important;
    }
  }

  @media (min-width: 1491px) and (max-width:1580px) {
    .headerRightContainer {
      margin: 0px !important;
    }

    .headerNavbar .nav-item-en a {
      font-size: 13px !important;
    }
  }

  @media (min-width: 1581px) and (max-width:1680px) {
    .headerRightContainer {
      margin: 0px !important;
    }

    .headerNavbar .nav-item-en a {
      font-size: 14px !important;
    }
  }

  @media (min-width: 1681px) and (max-width:1855px) {
    .headerRightContainer {
      margin: 0px !important;
    }

    .headerNavbar .nav-item-en a {
      font-size: 15px !important;
    }
  }

  /* TWS end */

  .lds-dual-ring {
    display: inline-block;
  }

  .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 30px;
    height: 30px;
    margin: 0px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }

  .inputLoader {
    position: absolute;
    top: 12px;
    left: 30px;
  }

  .inputLoader:after {
    border-color: #111 transparent #fff transparent;
  }

  .finalSaveLoader {
    text-align: center;
    display: none;
  }

  .finalSaveLoader:after {
    border-color: #111 transparent #fff transparent;
  }

  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }

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

  ::-webkit-scrollbar {
    height: 5px;
    width: 7px;
    border-radius: 100px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #6975a0;
    border-radius: 100px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(#2268fb, #30dde5);
    border-radius: 100px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#2268fb, #30dde5);
  }

  .packageDetailsSelectButton {
    width: 100%;
  }

  .packageDetailsSelectBody {
    height: 47vh;
    overflow-y: scroll;
  }

  .packageDetailsSelectBody .selectedPackageList {
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
  }

  .packageDetailsSelectBody .selectedPackageList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0px;
  }

  .packageDetailsSelectBody .selectedPackageList label {
    color: #1e3561;
    margin: 0px;
  }

  .packageDetailsSelectBody .selectedPackageList li p {
    padding: 0px;
    margin: 0px;
  }

  .mobileAppDownloads {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 10px;
  }

  .mobileAppDownloads h4 {
    margin: auto;
    color: #fff;
  }

  .alcoachApp .alcoachAppDownload ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }

  .alcoachApp .alcoachAppDownload ul li a img {
    width: 255px;
    height: 85px;
    /* min-height: 60px;
    max-height: 60px; */
    object-fit: fill;
    margin-bottom: 10px;
    border-radius: 13px;
  }

  /* .alcoachApp .alcoachAppDownload .appleDownload {
    background-color: #111 !important;

  }

  .alcoachApp .alcoachAppDownload .androidDownload {
    background-color: #579457;
  }

  .alcoachApp .alcoachAppDownload a:hover {
    text-decoration: none !important;
  } */

  .deleteMyAccount {
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200px 0px 85px;
    /* background-color: #ccc; */
  }

  .deleteMyAccount .deleteMyAccountContainer {
    width: 50%;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
    padding: 30px 20px;
    background-color: #fff;

  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .header {
    color: rgb(6, 49, 111);
    text-align: center;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .header h1 {
    margin-bottom: 10px;
    font-weight: bolder!important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .header p {
    font-weight: bolder!important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .warningBody {
    background-color: rgba(255, 0, 0, .1);
    padding: 20px;
    margin: 35px 0px 25px;
    position: relative;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .warningBody h5 {
    color: darkred;
    font-weight: bolder!important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .warningBody p {
    margin: 0px;
    color: rgb(180, 97, 97);
    font-weight: bolder!important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .warningBody::before {
    content: '';
    position: absolute;
    right: 0px;
    top: 0px;
    width: 5px;
    height: 100%;
    background-color: rgb(147, 21, 21);
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .userForm .passwordInput {
    position: relative;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .userForm .passwordInput i {
    position: absolute;
    top: 10px;
    left: 15px;
    cursor: pointer;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .userForm .passwordInput .right {
    left: auto;
    right: 15px !important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .userForm .passwordInput .left {
    right: auto;
    left: 15px !important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .userForm .errors label,.deleteMyAccount .deleteMyAccountContainer .cardItem .userForm .errors span {
    color: red;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .buttons {
    text-align: center;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .buttons .btnDeleteAccount {
    color: #fff;
    background-color: rgba(255, 0, 0, .7);
    border-radius: 15px;
    padding: 5px 35px;
    margin: 0px 5px;
    font-weight: bolder!important;
  }

  .deleteMyAccount .deleteMyAccountContainer .cardItem .buttons .btnBack {
    color: #111;
    background-color: #fff;
    border: 1px solid rgba(5, 77, 137, 0.7);
    border-radius: 15px;
    padding: 5px 35px;
    margin: 0px 5px;
    font-weight: bolder!important;
  }
  
  .deleteMyAccount .deleteMyAccountContainer .cardItem .buttons .btnBack:hover {
    color: #fff;
    background-color: rgba(5, 77, 137, 0.7);
  }


  @media only screen and (max-width: 1345px) and (min-width: 1000px) {
    .deleteMyAccount .deleteMyAccountContainer {
      width: 50%;
    }
  }
  
  @media only screen and (max-width: 1000px) and (min-width: 768px) {
    .deleteMyAccount .deleteMyAccountContainer {
      width: 70%;
    }
  }
  
  @media only screen and (max-width: 768px) {
    .deleteMyAccount .deleteMyAccountContainer {
      width: 95%;
    }
  }