@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1820px;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {

  .challangeName--wrapper {
    margin-top: 56px;
    padding: 75px 19px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(39.5px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

.bonuses--item--card {
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 342px;
}











/* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--InTouch--inner--left{
  width: 100%;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  gap: 20px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right {
  display: block;
}
.get--in--touch--image {
  width: 100%;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */

.btn--right--opener{
  display: flex;
}


.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

/* dashboard right side */
.dashboard--right--nav{
width: 70%;
background: #212121;
height: 100vh;
position: fixed;
right: 0;
top: 0;
transform: translateX(100%);
padding: 32px 0 32px 32px;
transition: all linear 0.3s;
}

.dashboard--right--nav.active {
width: 32%;
background: #212121;
height: 100vh;
position: fixed;
right: 0%;
top: 0;
transform: translateX(0%);
padding: 15px 0 32px 0px;
z-index: 1111;
}



.dashboard--right--nav--main {
padding: 15px;
width: 100%;
height: 100%;
overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
display: none;
}
.dashboard--right--nav--profile{
padding: 5px 15px 5px 7px;
border-radius: 44px;
background: rgba(255, 255, 255, 0.15);
display: flex;
gap: 12px;
align-items: center;
}
.dashboard--right--nav--profile--photo {
min-width: 40px;
height: 40px;
border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.dashboard--heading--textss{
width: 100%;
}

.dashboard--daily--upload--wrapper{
margin-top: 46px;
}
.dashboard--mobile--upoader {
margin-top: 20px;
padding: 16px;
border-radius: var(--radi-xl, 16px);
background: rgba(255, 255, 255, 0.07);
box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.dashboard--Subtext{
overflow: hidden;
color: #6D6D6D;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height:  20px;
}
.cancel--btn--dashboard{
width: 24px;
height: 24px;
cursor: pointer;
}
.cancel--btn--dashboard svg{
width: 100%;
height: 100%;
object-fit: cover;
}

.dashboard--left--nav {
width: 20%;
background: #212121;
height: 100vh;
position: fixed;
left: 0;
top: 0;
padding: 32px 0 32px 32px;
}

.dashboard--main {
width: 80%;
padding: 32px;
margin: 0 0 0 20%;
}
.dashboard--main.rank {
width: 80%;
padding: 32px;
margin: 0 0 0 20%;
    height: 100vh;
}



}

/* laptop devices */
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 600;
    line-height: 46px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
  }
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 70px;
    text-transform: uppercase;
  }
  .subHeading {
    color: var(--text-white);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
    line-height: 44px;
  }

  .learn--moreBtn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2dddb;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .register--Btn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .timeSectionSub {
    color: #e2dddb;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }
  .duration--text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  .duration--time--headerss--italic {
    color: var(--text-yellow);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }
  .StudioAndLuxey--Texts {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
  }
  .effortable--texts {
    color: #000;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -1.92px;
    text-transform: uppercase;
  }
  .challangeTexts {
    color: var(--text-yellow);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
  }
  .challangeName--Inner--texts {
    color: #70798b;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
  }
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
  }
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
  }
  /* ========================= common styles End hare ========================= */



















/* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--InTouch--inner--left{
  width: 100%;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  gap: 20px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */

























  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 80px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: center;
  }
  .sign--in--content--wrapper {
    display: block;
  }
  .sign--in--content {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 410px;
    height: 305px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 50px 45px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }

  /* /forget pass */
  .forget--pas--wrapper {
    margin-top: 25px;
  }
  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 520px;
  }
  .signIn--Btn--wrapper.two button {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }
  /* /forget pass */

  /* =============================================== Sign In Page End Hare ================================== */












/* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: row;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--fream--wrapper{
  display: none;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10 {
  rotate: 6deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 60px 0 45px 24px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 250px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 250px;
  height: 240px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */















  /* =============================================== Index page Start Hare ================================== */

  .studio--luxury--main--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .join--now--main--right {
    width: 79.5%;
    height: 510px;
    position: relative;
}
  .join--now--main--right img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }


  .challangeName--wrapper {
    margin-top: 56px;
    padding: 75px 70px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(39.5px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
  }

  /* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 200.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */

  /* =============================================== Index Page End Hare ================================== */

  .btn--right--opener{
    display: flex;
  }


  .genaral--setting--instraction--wrapper {
    display: flex;
    flex-direction: column;
    gap: 44px;
    display: none;
}

/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 32%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--left--nav {
  width: 20%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  padding: 32px 0 32px 32px;
}

.dashboard--main {
  width: 80%;
  padding: 32px;
  margin: 0 0 0 20%;
}
.dashboard--main.rank {
  width: 80%;
  padding: 32px;
  margin: 0 0 0 20%;
}



}



/* large tablet devices */
@media only screen and (min-width: 992px) and (max-width: 1199px) {












/* =============================================== profile Page Start Hare ================================== */

.backBtn--main--svg {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: fixed;
  left: 10px;
  top: 8px;
  z-index: 111;
}

.backBtn--main--svg svg{
width: 100%;
height: 100%;
object-fit: cover;
}


.profile--cover-photo {
width: 100%;
height: 190px;
}
.profile--cover-photo img{
width: 100%;
height: 100%;
object-fit: cover;
}

.profile--main--wrapper {
padding: 0 40px;
position: relative;
top: -45px;
}


.profile--picture--main {
width: 100px;
height: 100px;
border-radius: 50%;
}
.profile--picture--main img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.profile--name--email--wrapper{
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}

.dashboard--photo--upload--card.viewOther {
width: 28%;
}


/* notification */
.modal-header .btn-close {
padding: 0;
margin: 0;
color: white;
}
.modal-header{
border-bottom: none;
display: flex;
justify-content: end;
align-items: end;
text-align: end;
color:  #FFF;
}
.modal-content{
background: #212121;
}
.notification--header{
padding-bottom: 10px;
}
.notification--wrapper{
margin-top: 25px;
height: 600px;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.notification--wrapper {
/* Common styles */
overflow: auto;

/* For Firefox */
scrollbar-width: thin; /* Makes the scrollbar thin */
scrollbar-color: #ccc transparent; /* Sets the track and thumb colors */
}

.notification--wrapper::-webkit-scrollbar {
width: 3px; /* Sets scrollbar width for WebKit browsers */
}

.notification--wrapper::-webkit-scrollbar-thumb {
background-color: #ccc; /* Sets thumb color for WebKit browsers */
border-radius: 10px; /* Optional: makes the thumb rounded */
}

.notification--wrapper::-webkit-scrollbar-track {
background: transparent; /* Optional: sets track background */
}

.notification--item{
padding: 20px 0;
border-bottom: 1px solid #fff;
}

.notification--header--time--wrapper h3{
color: #FFF;
font-family: "Wix Madefor Text";
font-size: 14px;
font-weight: 600;
line-height: 18px;
}
.notification--header--time--wrapper{
display: flex;
justify-content: space-between;
align-items: center;
}
.notification--header--time--wrapper p{
color: var(--color-text-dont-edit-text-quarterary, #667085);
font-size: 10px;
font-weight: 400;
line-height: 18px;
}
.notification--item h4{
overflow: hidden;
color: #888;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-top: 8px;
}

.btn:hover {
color: var(--bs-btn-hover-color);
background-color: transparent;
border-color: var(--text-yellow);
}
.btn-primary{
border-color: var(--text-yellow);
}
/* =============================================== Profile Page End Hare ================================== */






























  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 600;
    line-height: 46px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
  }
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 70px;
    text-transform: uppercase;
  }
  .subHeading {
    color: var(--text-white);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
    line-height: 44px;
  }

  .learn--moreBtn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2dddb;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .register--Btn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .timeSectionSub {
    color: #e2dddb;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }
  .duration--text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  .duration--time--headerss--italic {
    color: var(--text-yellow);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }
  .StudioAndLuxey--Texts {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
  }
  .effortable--texts {
    color: #000;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -1.92px;
    text-transform: uppercase;
}
  .challangeTexts {
    color: var(--text-yellow);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
  }
  .challangeName--Inner--texts {
    color: #70798b;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
  }
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
  }
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
  }
  /* ========================= common styles End hare ========================= */























/* =============================================== Dashboard Page Start Hare ================================== */


  /* opener closer */
  .btn--left--opener{
    display: flex;
  }
  .btn--right--opener{
    display: flex;
  }
  /* opener closer */



.dashboard--wrapper{
  width: 100%;
  display: flex;
}
.dashboard--left--nav {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--left--nav.active {
  width: 40%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 32px 0 32px 32px;
  z-index: 1111;
}

.dashboard--header--main{
  display: flex;
  gap: 8px;
  align-items: center;
  display: none;
}
.dashboard--logo{
  width: 38px;
  height: 40px;
}
.dashboard--logo svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dashboard--nav--main{
  margin-top: 40px;
}
.dashboard--nav--main ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard--nav--main ul li a{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.dashboard--nav--main ul li a.active{
  padding: 12px 0;
  position: relative;
  background: var(--fghjk, linear-gradient(270deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%));
}
.dashboard--nav--main ul li a.active::after{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background: #C39D42;
}
/* dashboard left end hare  */

.dashboard--main {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}

.dashboard--notification--name--header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column-reverse;
}

.dashboard--rank--navProfile {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}


.dashboard--notification--custom--svg {
  width: 45px;
  height: 45px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.dashboard--notification--custom--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--banner--wrapper{
  margin-top: 42px;
  width: 100%;
}
.dashboard--banner--item {
  padding: 15px 25px 29px 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
}
.bannerMotivated--text {
  color: #FFF;
  font-family: var(--Domaine);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}




/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 48%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* image uploader */
.uploader-wrapper {
  text-align: center;
  width: 100%;
}

.uploader {
  border: 2px dashed #ffa726;
  border-radius: 10px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.uploader img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  display: none;
}

.uploader.active img {
  display: block;
}

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

.uploader .icon {
  margin-bottom: 10px;
}

.uploader p, .uploader span {
  margin: 5px 0;
}

.browse {
  font-size: 14px;
  color: #ffa726;
}

.uploader:hover {
  background-color: #444;
}
#message{
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
#separator{
  color: #6D6D6D;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.browse{
  padding: 8px 10px;
  width: 100%;
  border-radius: 50px;
  border: 1px solid #C39D42;
}
/* image Uploader */
.upload--btn{
  margin-top: 16px;
}
.upload--btn button{
  padding: 8px 0;
  width: 100%;
  background: var(--text-yellow);
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}



.Announcement--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement--notification--card--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.announcement--notification--card--item{
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}
.announcement--notification--headerss{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.announcement--notification--headerss--icon--texts{
  display: flex;
  gap: 8px;
  align-items: center;
}
.announcement--notification--headerss--icon{
  padding: 4px;
  background: rgba(22, 179, 100, 1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theVoting--texts--time{
  color: #DCDCDC;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}
.theVoting--texts{
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.announcement--notification--content{
  padding-left: 32px;
  margin-top: 10px;
}


/* owl custom */
.owl-dots {
  display: flex;
  gap: 10px;
  position: relative;
  left: 42%;
  top: -25px;
}
.owl-carousel button.owl-dot{
  width: 24px;
  height: 4px;
  border-radius: 20px;
  background: #707070;
}
.owl-carousel button.owl-dot.active{
  background: #fff;
}


.dashboard--photo--upload--gellary{
  margin-top: 50px;
}
.dashboard--photo--upload--gellaryss{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  width: 100%;
}
.dashboard--photo--upload--card {
  width: 44%;
}
.dashboard--photo--upload--heading{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--photo--upload--image{
  width: 100%;
  height: 320px;
  border-radius: 15px;
}
.dashboard--photo--upload--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.dashboard--photo--upload--text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}






/* ===========:: Dashboard Rank ::============== */
.dashboard--main.rank {
  width: 100%;
  padding: 20px;
  margin: 0 0 0 0%;
    height: 100vh;
}
/* .dashboard--left--nav.rank{
  position: relative;
} */
.count--down--time--wrapper.rank{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashBoard--rank--timer--wrapper{
  position: relative;
  left: 50%;
    top: 35%;
  transform: translate(-50%,-50%);
}
.dashboard--rank--navProfile{
  display: flex;
  gap: 62px;
  align-items: center;
}
.dashboard--rank--time--header{
  max-width: 1085px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard--rank--time--header p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.dashboard--time--start--in--wrapper{
  margin-top: 48px;
}
.dashboard--time--start--in--wrapper h5 {
  color: #C39D42;
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.dashborad--rank--voting--timeCountDown--wrapper{
  margin-top: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px 0;
  width: 100%;
  text-align: center;
}



.rank--countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  color: #FFF;
  font-size: 20px;
}

.rank--countdown-item {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80px;
}

.rank--count {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: var(--Domaine);
}

.rank--label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: var(--text-yellow);
  font-family: var(--Domaine);
}

.rank--countdown-item:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 40px;
  background-color: var(--text-yellow);
  position: absolute;
  margin-left: 52px;
  margin-top: -45px;
  display: none;
}

/* LeaderBoard */
.dashborad--rank--leaderBoard--wrapper{
  margin-top: 40px;
}

.dashboard--leader--main--wrapper {
  margin-top: 60px;
}

.dashboard--leader--item--content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.dashboard--leader--item--content::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #465065;
  width: 100%;
  height: 1px;
}


.dashboard--leader--main--wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard--leader--item {
  padding: 55px 20px;
  border-radius: 8px;
  background: #212121;
  width: 31%;
  position: relative;
}
.dashboard--leader--item--ranking {
  padding: 6px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}
.dashboard--leader--item--ranking--inner{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visit--profile--btn{
  margin-top: 16px;
  text-align: center;
}
.visit--profile{
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  text-decoration: underline;
}


/* Leader Board */
.dashboard--main--ranking--leading--bord--wrappers {
  margin-top: 20px;
  padding: 8px 25px;
  border-radius: 8px;
  background: #212121;
}
.dashboard--main--ranking--leading--inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
}
.dashboard--main--ranking--leading--inner--heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 90px;
}
.Leadernumbers{
  min-width: 10%;
}
.LeaderNamess {
  min-width: 30%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 4px;
  overflow: hidden;
}
.whoIsPhoto {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
}
.whoIsPhoto img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.LeaderBeforeImg {
  min-width: 10%;
  text-align: center;
}
.LeaderBeforeImg--wrapper{
  width: 100%;
  height: 40px;
}
.LeaderBeforeImg--wrapper img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}


.LeaderNowImg{
  min-width: 10%;
  text-align: center;
}
.LeaderTotalVote{
  min-width: 20%;
  text-align: center;
}
.LeaderGiveIngVote{
  width: 20%;
  text-align: center;
}

.voteNowBtn{
  padding: 10px 0;
  width: 90px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all linear 0.3s;
}
.voteNowBtn:hover{
  background: var(--text-yellow);
}

/* ====== :: People Vote You Right Side Nav :: =========== */
.dashboard--people--vote--you--wrapper{
  margin-top: 20px;
}


.people--who--vote--you--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people--who--vote--you--item{
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prople--who--vote--nameImg--wrapper{
  display: flex;
  gap: 8px;
  align-items: center;
}
.people--who--vote--you--image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.people--who--vote--you--image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.people--who--vote--svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.people--who--vote--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likees.active{
  display: none;
}
.unlikees.active{
  display: none;
}
/* ====== :: People Vote You Right Side Nav :: =========== */



/* DASHBOARD SETTING START HARE */
.dashboard--setting--wrapper{
  margin-top: 42px;
  width: 100%;
  display: flex;
  gap: 80px;
}
/* .hello ul{
  display: flex;
} */
.skltbs-tab-group{
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}
.skltbs-tab-group::after {
  position: absolute;
  content: '';
  right: -40px;
  top: 0;
  height: 100%;
  max-height: 80vh;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 49.95%, rgba(255, 255, 255, 0.06) 50.05%);
}
.dashboard--setting--wrapper .skltbs-tab{
  padding: 16px;
  width: 100%;
  text-align: start;
  background: transparent;
  border-radius: 39px;
  background: transparent;
  border: none;
  color: #949494;
  font-family: "Wix Madefor Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
}

.dashboard--setting--wrapper .skltbs-tab.skltbs-active{
  color: #FFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 178.21%);
}
.skltbs-mode-tabs .skltbs-panel-group {
  position: relative;
  width: 100%;
}



.genarel--wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genaral--setting--main--wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.genaral--setting--main--wrapper form{
  width: 100%;
}
.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

.genaral--setting--profile--picture--ins{
  width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--notification--SubText{
  color: #A5A5A5;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.genaral--setting--update--wrapper{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Photo Uploader */
.image-uploader-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uploader-section {
  text-align: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border-radius: 44px;
  border: 1px solid #C39D42;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.upload-instruction {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.preview-section {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.nameChangeInputBox {
  width: 100%;
  padding: 0 25px;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 250px 0px rgba(0, 0, 0, 0.25);
  margin-top: 14px;
}

.nameChangeInputBox input{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
}
.save--change--btn{
  padding-top: 126px;
  display: flex;
  justify-content: end;
}
.save--change--btn button {
  width: 165px;
  padding: 12px 0;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
}
.skltbs-panel.skltbs-active{
  margin-top: 50px;
}
.skltbs-panel-heading{
  margin-top: 50px;
}

/* Photo Uploader */

/* DASHBOARD SETTING END HARE */

/* =============================================== Dashboard Page End Hare ================================== */






























/* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--InTouch--inner--left{
  width: 100%;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  gap: 20px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */












  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 50px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: center;
  }
  .sign--in--content--wrapper {
    display: none;
  }
  .sign--in--content {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 410px;
    height: 305px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 50px 45px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }

  /* /forget pass */
  .forget--pas--wrapper {
    margin-top: 25px;
  }
  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 520px;
  }
  .signIn--Btn--wrapper.two button {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }
  /* /forget pass */
  /* =============================================== Sign In Page End Hare ================================== */











/* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: row;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--fream--wrapper{
  display: none;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10 {
  rotate: 6deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 50px 0 40px 22px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 210px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 250px;
  height: 240px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */
























































  /* =============================================== iNDEX Page start Hare ================================== */
  /* Studios and luxury section Start hare */
.Studios--luxury--wrapper{
  padding-bottom: 140px;
}

.studio--luxury--main--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.studio--luxury--left--item{
  display: flex;
}
.studio--luxury--left--item--img{
  width: 375px;
  height: 375px;
}
.studio--luxury--left--item--img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.studio--luxury--left--item--text{
  background-color: rgba(27, 27, 27, 1);
  width: fit-content;
}
.studio--luxury--left--item--Innertext{
  width: 375px;
  height: 375px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.studio--luxury--left--item--img--two{
  width: 749px;
  height: 374px;
}
.studio--luxury--left--item--img--two img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Studios and luxury section End hare */



/* Join Now section Start hare */
.join--now--wrapper{
  padding-bottom: 145px;
}

.join--now--main--wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.join--now--main--left {
  min-width: 19.5%;
  display: none;
}
.join--now--main--right {
  width: 100%;
  height: 400px;
  position: relative;
}
.join--now--main--right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join--now--wrapperss {
  position: absolute;
  bottom: -30%;
  right: 25%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Join Now section End hare */



.challangeName--wrapper {
  margin-top: 56px;
  padding: 75px 70px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(39.5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.challangeName--item2 {
  display: flex;
  gap: 100px;
  align-items: start;
  margin-bottom: 25px;
}


/* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 200.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */
  /* =============================================== iNDEX Page End Hare ================================== */






}






/* medium tablet devices */
@media only screen and (min-width: 768px) and (max-width: 991px) {










/* =============================================== profile Page Start Hare ================================== */

  .backBtn--main--svg {
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 8px;
    z-index: 111;
}

.backBtn--main--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.profile--cover-photo {
  width: 100%;
  height: 190px;
}
.profile--cover-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile--main--wrapper {
  padding: 0 40px;
  position: relative;
  top: -45px;
}


.profile--picture--main {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.profile--picture--main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile--name--email--wrapper{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard--photo--upload--card.viewOther {
  width: 28%;
}


/* notification */
.modal-header .btn-close {
	padding: 0;
	margin: 0;
  color: white;
}
.modal-header{
  border-bottom: none;
  display: flex;
  justify-content: end;
  align-items: end;
  text-align: end;
  color:  #FFF;
}
.modal-content{
  background: #212121;
}
.notification--header{
  padding-bottom: 10px;
}
.notification--wrapper{
  margin-top: 25px;
  height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notification--wrapper {
  /* Common styles */
  overflow: auto;

  /* For Firefox */
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #ccc transparent; /* Sets the track and thumb colors */
}

.notification--wrapper::-webkit-scrollbar {
  width: 3px; /* Sets scrollbar width for WebKit browsers */
}

.notification--wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Sets thumb color for WebKit browsers */
  border-radius: 10px; /* Optional: makes the thumb rounded */
}

.notification--wrapper::-webkit-scrollbar-track {
  background: transparent; /* Optional: sets track background */
}

.notification--item{
  padding: 20px 0;
  border-bottom: 1px solid #fff;
}

.notification--header--time--wrapper h3{
  color: #FFF;
  font-family: "Wix Madefor Text";
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.notification--header--time--wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification--header--time--wrapper p{
  color: var(--color-text-dont-edit-text-quarterary, #667085);
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}
.notification--item h4{
  overflow: hidden;
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 8px;
}

.btn:hover {
	color: var(--bs-btn-hover-color);
	background-color: transparent;
	border-color: var(--text-yellow);
}
.btn-primary{
  border-color: var(--text-yellow);
}
/* =============================================== Profile Page End Hare ================================== */

































  /* ============================
     Common Navbar Start Hare
  ==============================
*/

  .navbar--wrapper {
    padding: 36px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 11111;
  }
  .navbar--main--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar--logo {
    width: 24px;
    height: 65px;
  }
  .navbar--logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .navbar--item--wrapper {
    padding: 10px 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
    width: fit-content;
  }
  .navbar--item--wrapper ul {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .navbar--item--wrapper ul li a {
    padding: 3px 15px;
    color: #e2dddb;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all linear 0.3s;
}
  .navbar--item--wrapper ul li a:hover {
    background-color: var(--text-yellow);
    color: #2c2b2a;
  }
  .navbar--item--wrapper ul li a:hover svg {
    fill: #2c2b2a;
  }
  .navbar--menu {
    padding: 0px 10px 0px 20px;
    width: fit-content;
    border-radius: 27px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .navbar--menu:hover {
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
  }
  .menu--humburger--Icon {
    width: 20px;
    height: 20px;
  }
  .menu--humburger--Icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ============================
     Common Navbar End Hare
  ==============================
*/

  /* ===== :: Main Menu Start Hare :: ==== */
  .main--menu--wrapper {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }

  .main--menu--wrapper:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(27.5px);
    backdrop-filter: blur(27.5px);
    -webkit-transition: -webkit-clip-path 0.5s;
    transition: clip-path 0.5s;
    -o-transition: clip-path 0.5s;
    transition: clip-path 0.5s, -webkit-clip-path 0.5s;
    -webkit-clip-path: circle(0% at 100% 0);
    clip-path: circle(0% at 100% 0);
  }
  .main--menu--wrapper,
  .main--menu--wrapper:before {
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .main--menu--wrapper.show {
    visibility: visible;
    -webkit-transition: linear;
    -o-transition: linear;
    transition: linear;
    z-index: 2200000001;
  }
  .main--menu--wrapper.show:before {
    -webkit-transition: -webkit-clip-path 0.7s;
    transition: clip-path 0.7s;
    -o-transition: clip-path 0.7s;
    transition: clip-path 0.7s, -webkit-clip-path 0.7s;
    -webkit-clip-path: circle(141.4% at 100% 0);
    clip-path: circle(141.4% at 100% 0);
  }

  .main--menu--wrapper .main--menu--wrapper--inner {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: ease-in 0.2s;
  }

  .main--menu--wrapper .main--menu--wrapper--inner.show {
    visibility: visible;
    opacity: 1;
  }

  .main--menu--wrapper--top--header {
    padding: 35px 0px 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .close--btn {
    padding: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .close--btn:hover {
    background: var(--text-yellow);
    border: 1px solid #c39d42;
  }

  .main--menu--items--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main--menu--wrapper--items {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
  .main--menu--items ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .main--menu--items ul li a {
    transition: all linear 0.3s;
    position: relative;
  }
  .main--menu--items ul li a::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 40%;
    background-color: var(--text-yellow);
    bottom: -10px;
    left: 0;
    transition: all linear 0.3s;
  }
  .main--menu--items ul li a:hover {
    color: var(--text-yellow);
  }
  .main--menu--items ul li a:hover::after {
    width: 100%;
  }
  .nav--menu--textss {
    color: #f2f2f2;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
  }

  .main--menu--item--social--links ul {
    display: flex;
    column-gap: 48px;
    align-items: center;
  }
  .social--icon--linkdin {
    width: 24px;
    height: 24px;
  }
  .social--icon--linkdin svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nav--menu--textss.logOutBtn {
    background: transparent;
    border: none;
  }

  .ProfilePic--name {
    color: #fff;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.39px;
  }
  /* ===== :: Main Menu End Hare :: ==== */























/* =============================================== Dashboard Page Start Hare ================================== */


  /* opener closer */
  .btn--left--opener{
    display: flex;
  }
  .btn--right--opener{
    display: flex;
  }
  /* opener closer */



.dashboard--wrapper{
  width: 100%;
  display: flex;
}
.dashboard--left--nav {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--left--nav.active {
  width: 40%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 32px 0 32px 32px;
  z-index: 1111;
}

.dashboard--header--main{
  display: flex;
  gap: 8px;
  align-items: center;
  display: none;
}
.dashboard--logo{
  width: 38px;
  height: 40px;
}
.dashboard--logo svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dashboard--nav--main{
  margin-top: 40px;
}
.dashboard--nav--main ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard--nav--main ul li a{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.dashboard--nav--main ul li a.active{
  padding: 12px 0;
  position: relative;
  background: var(--fghjk, linear-gradient(270deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%));
}
.dashboard--nav--main ul li a.active::after{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background: #C39D42;
}
/* dashboard left end hare  */

.dashboard--main {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}

.dashboard--notification--name--header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column-reverse;
}

.dashboard--rank--navProfile {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}


.dashboard--notification--custom--svg {
  width: 45px;
  height: 45px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.dashboard--notification--custom--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--banner--wrapper{
  margin-top: 42px;
  width: 100%;
}
.dashboard--banner--item {
  padding: 15px 25px 29px 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
}
.bannerMotivated--text {
  color: #FFF;
  font-family: var(--Domaine);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}




/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 48%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* image uploader */
.uploader-wrapper {
  text-align: center;
  width: 100%;
}

.uploader {
  border: 2px dashed #ffa726;
  border-radius: 10px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.uploader img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  display: none;
}

.uploader.active img {
  display: block;
}

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

.uploader .icon {
  margin-bottom: 10px;
}

.uploader p, .uploader span {
  margin: 5px 0;
}

.browse {
  font-size: 14px;
  color: #ffa726;
}

.uploader:hover {
  background-color: #444;
}
#message{
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
#separator{
  color: #6D6D6D;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.browse{
  padding: 8px 10px;
  width: 100%;
  border-radius: 50px;
  border: 1px solid #C39D42;
}
/* image Uploader */
.upload--btn{
  margin-top: 16px;
}
.upload--btn button{
  padding: 8px 0;
  width: 100%;
  background: var(--text-yellow);
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}



.Announcement--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement--notification--card--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.announcement--notification--card--item{
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}
.announcement--notification--headerss{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.announcement--notification--headerss--icon--texts{
  display: flex;
  gap: 8px;
  align-items: center;
}
.announcement--notification--headerss--icon{
  padding: 4px;
  background: rgba(22, 179, 100, 1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theVoting--texts--time{
  color: #DCDCDC;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}
.theVoting--texts{
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.announcement--notification--content{
  padding-left: 32px;
  margin-top: 10px;
}


/* owl custom */
.owl-dots {
  display: flex;
  gap: 10px;
  position: relative;
  left: 42%;
  top: -25px;
}
.owl-carousel button.owl-dot{
  width: 24px;
  height: 4px;
  border-radius: 20px;
  background: #707070;
}
.owl-carousel button.owl-dot.active{
  background: #fff;
}


.dashboard--photo--upload--gellary{
  margin-top: 50px;
}
.dashboard--photo--upload--gellaryss{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  width: 100%;
}
.dashboard--photo--upload--card {
  width: 44%;
}
.dashboard--photo--upload--heading{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--photo--upload--image{
  width: 100%;
  height: 320px;
  border-radius: 15px;
}
.dashboard--photo--upload--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.dashboard--photo--upload--text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}






/* ===========:: Dashboard Rank ::============== */
.dashboard--main.rank {
  width: 100%;
  padding: 20px;
  margin: 0 0 0 0%;
  height: 70vh;
}
/* .dashboard--left--nav.rank{
  position: relative;
} */
.count--down--time--wrapper.rank{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashBoard--rank--timer--wrapper{
  position: relative;
  left: 50%;
    top: 35%;
  transform: translate(-50%,-50%);
}
.dashboard--rank--navProfile{
  display: flex;
  gap: 62px;
  align-items: center;
}
.dashboard--rank--time--header{
  max-width: 1085px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard--rank--time--header p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.dashboard--time--start--in--wrapper{
  margin-top: 48px;
}
.dashboard--time--start--in--wrapper h5 {
  color: #C39D42;
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.dashborad--rank--voting--timeCountDown--wrapper{
  margin-top: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px 0;
  width: 100%;
  text-align: center;
}



.rank--countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  color: #FFF;
  font-size: 20px;
}

.rank--countdown-item {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80px;
}

.rank--count {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: var(--Domaine);
}

.rank--label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: var(--text-yellow);
  font-family: var(--Domaine);
}

.rank--countdown-item:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 40px;
  background-color: var(--text-yellow);
  position: absolute;
  margin-left: 52px;
  margin-top: -45px;
  display: none;
}

/* LeaderBoard */
.dashborad--rank--leaderBoard--wrapper{
  margin-top: 40px;
}

.dashboard--leader--main--wrapper {
  margin-top: 60px;
}

.dashboard--leader--item--content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.dashboard--leader--item--content::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #465065;
  width: 100%;
  height: 1px;
}


.dashboard--leader--main--wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard--leader--item {
  padding: 55px 20px;
  border-radius: 8px;
  background: #212121;
  width: 31%;
  position: relative;
}
.dashboard--leader--item--ranking {
  padding: 6px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}
.dashboard--leader--item--ranking--inner{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visit--profile--btn{
  margin-top: 16px;
  text-align: center;
}
.visit--profile{
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  text-decoration: underline;
}


/* Leader Board */
.dashboard--main--ranking--leading--bord--wrappers {
  margin-top: 20px;
  padding: 8px 25px;
  border-radius: 8px;
  background: #212121;
}
.dashboard--main--ranking--leading--inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
}
.dashboard--main--ranking--leading--inner--heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 90px;
}
.Leadernumbers{
  min-width: 10%;
}
.LeaderNamess {
  min-width: 30%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 4px;
  overflow: hidden;
}
.whoIsPhoto {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
}
.whoIsPhoto img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.LeaderBeforeImg {
  min-width: 10%;
  text-align: center;
}
.LeaderBeforeImg--wrapper{
  width: 100%;
  height: 40px;
}
.LeaderBeforeImg--wrapper img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}


.LeaderNowImg{
  min-width: 10%;
  text-align: center;
}
.LeaderTotalVote{
  min-width: 20%;
  text-align: center;
}
.LeaderGiveIngVote{
  width: 20%;
  text-align: center;
}

.voteNowBtn{
  padding: 10px 0;
  width: 90px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all linear 0.3s;
}
.voteNowBtn:hover{
  background: var(--text-yellow);
}

/* ====== :: People Vote You Right Side Nav :: =========== */
.dashboard--people--vote--you--wrapper{
  margin-top: 20px;
}


.people--who--vote--you--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people--who--vote--you--item{
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prople--who--vote--nameImg--wrapper{
  display: flex;
  gap: 8px;
  align-items: center;
}
.people--who--vote--you--image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.people--who--vote--you--image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.people--who--vote--svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.people--who--vote--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likees.active{
  display: none;
}
.unlikees.active{
  display: none;
}
/* ====== :: People Vote You Right Side Nav :: =========== */



/* DASHBOARD SETTING START HARE */
.dashboard--setting--wrapper{
  margin-top: 42px;
  width: 100%;
  display: flex;
  gap: 80px;
}
/* .hello ul{
  display: flex;
} */
.skltbs-tab-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.skltbs-tab-group::after {
  position: absolute;
  content: '';
  right: -40px;
  top: 0;
  height: 100%;
  max-height: 80vh;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 49.95%, rgba(255, 255, 255, 0.06) 50.05%);
}
.dashboard--setting--wrapper .skltbs-tab{
  padding: 16px;
  width: 100%;
  text-align: start;
  background: transparent;
  border-radius: 39px;
  background: transparent;
  border: none;
  color: #949494;
  font-family: "Wix Madefor Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
}

.dashboard--setting--wrapper .skltbs-tab.skltbs-active{
  color: #FFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 178.21%);
}
.skltbs-mode-tabs .skltbs-panel-group {
  position: relative;
  width: 100%;
}



.genarel--wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genaral--setting--main--wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.genaral--setting--main--wrapper form{
  width: 100%;
}
.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

.genaral--setting--profile--picture--ins{
  width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--notification--SubText{
  color: #A5A5A5;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.genaral--setting--update--wrapper{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Photo Uploader */
.image-uploader-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uploader-section {
  text-align: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border-radius: 44px;
  border: 1px solid #C39D42;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.upload-instruction {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.preview-section {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.nameChangeInputBox {
  width: 100%;
  padding: 0 25px;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 250px 0px rgba(0, 0, 0, 0.25);
  margin-top: 14px;
}

.nameChangeInputBox input{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
}
.save--change--btn{
  padding-top: 126px;
  display: flex;
  justify-content: end;
}
.save--change--btn button {
  width: 165px;
  padding: 12px 0;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
}
.skltbs-panel.skltbs-active{
  margin-top: 50px;
}
.skltbs-panel-heading{
  margin-top: 50px;
}

/* Photo Uploader */

/* DASHBOARD SETTING END HARE */

/* =============================================== Dashboard Page End Hare ================================== */




























  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 64px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
  }
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    text-transform: uppercase;
}
.subHeading {
  color: var(--text-white);
  text-align: center;
  font-family: var(--Domaine);
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 40px;
}

  .learn--moreBtn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2dddb;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .register--Btn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .timeSectionSub {
    color: #e2dddb;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }
  .duration--text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  .duration--time--headerss--italic {
    color: var(--text-yellow);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }
  .StudioAndLuxey--Texts {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
  }
  .effortable--texts {
    color: #000;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -1.92px;
    text-transform: uppercase;
}
  .challangeTexts {
    color: var(--text-yellow);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
  }
  .challangeName--Inner--texts {
    color: #70798b;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
  }
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
  }
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
  }
  /* ========================= common styles End hare ========================= */

















  /* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--InTouch--inner--left{
  width: 100%;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  gap: 20px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */






















/* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10 {
  rotate: 6deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 50px 0 40px 22px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 210px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 250px;
  height: 240px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */













  /* =============================================== Index Page Start Hare ================================== */


/* Banner Start hare */
.banner--wrapper {
  padding: 230px 0 200px 0;
  background: url(../images/SignInPageBg.png) no-repeat;
}
.banner--heading{
  text-align: center;
}
.banner--heading p span{
  color: #C39D42;
  margin-top: 24px;
}
.banner--btn {
  margin-top: 52px;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
/* Banner End hare */



/* time section start hare */
.timeSection--wrapper {
  padding: 264px 0 52px 0;
  background: url(../images/TimeSectionBg.png) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.timeSection--freme--upper{
  width: 100%;
  height: 357px;
  position: absolute;
  top: 0;
  left: 0;
}
.timeSection--freme--upper img{
  width: 100%;
  height: 100%;
}
.timeSection--heading {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 32px;
}
.pageHeading.two{
  text-align: start;
}
.timeSectionSub.two{
  width: 577px;
}
.timeSection--heading p span{
  color: var(--text-yellow);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 27px;
}


.duration--Time--wrapper{
  margin-top: 24px;
  display: flex;
  gap: 43px;
}

.duration--Time--item{
  padding-right: 43px;
  position: relative;
  width: fit-content;
}
.duration--Time--item:last-child::after{
  display: none;
}
.duration--Time--item::after{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  height: 80%;
  width: 1px;
  background: var(--text-white);
}
.duration--icon--wrapper{
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.duration--icon{
  width: 24px;
  height: 24px;
}
.duration--icon svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.count--down--time--wrapper{
  margin-top: 56px;
  display: flex;
  gap: 40;
  align-items: center;
}

.count--down--time--item--itemsss{
  padding-right: 20px;
  padding-left: 20px;
  position: relative;
  width: fit-content;
}
.count--down--time--item--itemsss::after{
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: 2px;
  background: var(--text-yellow);
}
.count--down--time--item--itemsss:last-child::after{
  display: none;
}
.count--down--time--item{
  padding: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20.5px);
  width: fit-content;
}
.learn--more--btn{
  margin-top: 56px;
}
/* time section End hare */


/* member with benifits section start hare */
.memberWith--benifits--wrapper{
  padding: 80px 0;
  background: #000000;
}
.member--with--benifits--main{
  display: flex;
  gap: 66px;
  align-items: center;
}
.member--with--benifits--item1{
  width: 650px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member--with--benifits--item1 h4{
  text-align: end;
}


.member--with--benifits--img{
  width: 288px;
  height: 288px;
}
.member--with--benifits--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* member with benifits section End hare */




/* Studios and luxury section Start hare */

.studio--luxury--main--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
/* Studios and luxury section End hare */



/* Join Now section Start hare */
.join--now--wrapper{
  padding-bottom: 145px;
}

.join--now--main--wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.join--now--main--left {
  min-width: 19.5%;
  display: none;
}
.join--now--main--right {
  width: 100%;
  height: 400px;
  position: relative;
}
.join--now--main--right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join--now--wrapperss {
  position: absolute;
  bottom: -30%;
  right: 25%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Join Now section End hare */






/* effort able section Start hare */
.effort--able--wrapper {
  padding-top: 100px;
  padding-bottom: 116px;
}
.affordable--heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.affordable--heading p span{
  color: var(--text-yellow);
}

.challangeName--wrapper {
  margin-top: 56px;
  padding: 75px 70px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(39.5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.challangeName--item1 h4 span{
  color: #70798B;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.challangeName--item2 {
  display: flex;
  gap: 13px;
  align-items: start;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.challangeName--Inner--item{
  display: flex;
  gap: 10px;
  align-items: center;
}
/*  effort able section End hare */


/*  Frequently Asked Questions section Start hare */
.frequently--asked--questions{
  padding-bottom: 150px;
}

.faq--wrapper{
  margin-top: 56px;
}

.accordion.custom{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.accordion-item.custom{
  border-radius: 14px;
  border: 2px solid rgba(23, 27, 36, 0.72);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.accordion-button.custom{
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  background: transparent;
  color: var(--text-white);
}

.accordion-button.custom::after {
  flex-shrink: 0;
  width: 51px; /* Match the width of your SVG */
  height: 51px; /* Match the height of your SVG */
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51' viewBox='0 0 51 51' fill='none'%3E%3Cg filter='url(%23filter0_b_41_302)'%3E%3Ccircle cx='25.6691' cy='25.3308' r='25.3309' transform='rotate(-180 25.6691 25.3308)' fill='white' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M33.9258 28.4404L25.6692 20.2212L17.4126 28.4404' stroke='%23F4DB0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_41_302' x='-299.662' y='-300' width='650.662' height='650.662' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='150'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_41_302'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_41_302' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain; /* Adjust as needed */
  transition: var(--bs-accordion-btn-icon-transition);
}
.accordion-body{
  max-width: 1152px;
}
/*  Frequently Asked Questions section End hare */



/* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 160.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */


/* =============================================== Index Page End Hare ================================== */
































  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 50px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: center;
  }
  .sign--in--content--wrapper {
    display: none;
  }
  .sign--in--content {
    max-width: 894px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 476px;
    height: 476px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 50px 45px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }

  /* /forget pass */
  .forget--pas--wrapper {
    margin-top: 25px;
  }
  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 520px;
  }
  .signIn--Btn--wrapper.two button {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }
  /* /forget pass */
  /* =============================================== Sign In Page End Hare ================================== */
}






/* small tablet devices */
@media only screen and (min-width: 576px) and (max-width: 767px) {







  /* =============================================== profile Page Start Hare ================================== */

  .backBtn--main--svg {
    width: 35px;
    height: 35px;
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 8px;
    z-index: 111;
}

.backBtn--main--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.profile--cover-photo {
  width: 100%;
  height: 190px;
}
.profile--cover-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile--main--wrapper {
  padding: 0 40px;
  position: relative;
  top: -45px;
}


.profile--picture--main {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.profile--picture--main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile--name--email--wrapper{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard--photo--upload--card.viewOther {
  width: 44%;
}


/* notification */
.modal-header .btn-close {
	padding: 0;
	margin: 0;
  color: white;
}
.modal-header{
  border-bottom: none;
  display: flex;
  justify-content: end;
  align-items: end;
  text-align: end;
  color:  #FFF;
}
.modal-content{
  background: #212121;
}
.notification--header{
  padding-bottom: 10px;
}
.notification--wrapper{
  margin-top: 25px;
  height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notification--wrapper {
  /* Common styles */
  overflow: auto;

  /* For Firefox */
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #ccc transparent; /* Sets the track and thumb colors */
}

.notification--wrapper::-webkit-scrollbar {
  width: 3px; /* Sets scrollbar width for WebKit browsers */
}

.notification--wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Sets thumb color for WebKit browsers */
  border-radius: 10px; /* Optional: makes the thumb rounded */
}

.notification--wrapper::-webkit-scrollbar-track {
  background: transparent; /* Optional: sets track background */
}

.notification--item{
  padding: 20px 0;
  border-bottom: 1px solid #fff;
}

.notification--header--time--wrapper h3{
  color: #FFF;
  font-family: "Wix Madefor Text";
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.notification--header--time--wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification--header--time--wrapper p{
  color: var(--color-text-dont-edit-text-quarterary, #667085);
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}
.notification--item h4{
  overflow: hidden;
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 8px;
}

.btn:hover {
	color: var(--bs-btn-hover-color);
	background-color: transparent;
	border-color: var(--text-yellow);
}
.btn-primary{
  border-color: var(--text-yellow);
}
/* =============================================== Profile Page End Hare ================================== */








/* ============================
   Common Navbar Start Hare
  ==============================
*/

  .navbar--wrapper {
    padding: 36px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 11111;
  }
  .navbar--main--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar--logo {
    width: 24px;
    height: 65px;
  }
  .navbar--logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .navbar--item--wrapper {
    padding: 10px 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
    width: fit-content;
    display: none;
  }
  .navbar--item--wrapper ul {
    display: flex;
    gap: 57px;
    align-items: center;
  }
  .navbar--item--wrapper ul li a {
    padding: 12px 15px;
    color: #e2dddb;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all linear 0.3s;
  }
  .navbar--item--wrapper ul li a:hover {
    background-color: var(--text-yellow);
    color: #2c2b2a;
  }
  .navbar--item--wrapper ul li a:hover svg {
    fill: #2c2b2a;
  }
  .navbar--menu {
    padding: 0px 10px 0px 20px;
    width: fit-content;
    border-radius: 27px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .navbar--menu:hover {
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
  }
  .menu--humburger--Icon {
    width: 20px;
    height: 20px;
  }
  .menu--humburger--Icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ============================
     Common Navbar End Hare
  ==============================
*/

  /* ===== :: Main Menu Start Hare :: ==== */
  .main--menu--wrapper {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }

  .main--menu--wrapper:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(27.5px);
    backdrop-filter: blur(27.5px);
    -webkit-transition: -webkit-clip-path 0.5s;
    transition: clip-path 0.5s;
    -o-transition: clip-path 0.5s;
    transition: clip-path 0.5s, -webkit-clip-path 0.5s;
    -webkit-clip-path: circle(0% at 100% 0);
    clip-path: circle(0% at 100% 0);
  }
  .main--menu--wrapper,
  .main--menu--wrapper:before {
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .main--menu--wrapper.show {
    visibility: visible;
    -webkit-transition: linear;
    -o-transition: linear;
    transition: linear;
    z-index: 2200000001;
  }
  .main--menu--wrapper.show:before {
    -webkit-transition: -webkit-clip-path 0.7s;
    transition: clip-path 0.7s;
    -o-transition: clip-path 0.7s;
    transition: clip-path 0.7s, -webkit-clip-path 0.7s;
    -webkit-clip-path: circle(141.4% at 100% 0);
    clip-path: circle(141.4% at 100% 0);
  }

  .main--menu--wrapper .main--menu--wrapper--inner {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: ease-in 0.2s;
  }

  .main--menu--wrapper .main--menu--wrapper--inner.show {
    visibility: visible;
    opacity: 1;
  }

  .main--menu--wrapper--top--header {
    padding: 35px 0px 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .close--btn {
    padding: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .close--btn:hover {
    background: var(--text-yellow);
    border: 1px solid #c39d42;
  }

  .main--menu--items--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main--menu--wrapper--items {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
  .main--menu--items ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .main--menu--items ul li a {
    transition: all linear 0.3s;
    position: relative;
  }
  .main--menu--items ul li a::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 40%;
    background-color: var(--text-yellow);
    bottom: -10px;
    left: 0;
    transition: all linear 0.3s;
  }
  .main--menu--items ul li a:hover {
    color: var(--text-yellow);
  }
  .main--menu--items ul li a:hover::after {
    width: 100%;
  }
  .nav--menu--textss {
    color: #f2f2f2;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
  }

  .main--menu--item--social--links ul {
    display: flex;
    column-gap: 48px;
    align-items: center;
  }
  .social--icon--linkdin {
    width: 24px;
    height: 24px;
  }
  .social--icon--linkdin svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nav--menu--textss.logOutBtn {
    background: transparent;
    border: none;
  }

  .ProfilePic--name {
    color: #fff;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.39px;
  }
  /* ===== :: Main Menu End Hare :: ==== */



















/* =============================================== Dashboard Page Start Hare ================================== */


  /* opener closer */
  .btn--left--opener{
    display: flex;
  }
  .btn--right--opener{
    display: flex;
  }
  /* opener closer */



.dashboard--wrapper{
  width: 100%;
  display: flex;
}
.dashboard--left--nav {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--left--nav.active {
  width: 40%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 32px 0 32px 32px;
  z-index: 1111;
}

.dashboard--header--main{
  display: flex;
  gap: 8px;
  align-items: center;
  display: none;
}
.dashboard--logo{
  width: 38px;
  height: 40px;
}
.dashboard--logo svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dashboard--nav--main{
  margin-top: 40px;
}
.dashboard--nav--main ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard--nav--main ul li a{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.dashboard--nav--main ul li a.active{
  padding: 12px 0;
  position: relative;
  background: var(--fghjk, linear-gradient(270deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%));
}
.dashboard--nav--main ul li a.active::after{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background: #C39D42;
}
/* dashboard left end hare  */

.dashboard--main {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}

.dashboard--notification--name--header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column-reverse;
}

.dashboard--rank--navProfile {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}


.dashboard--notification--custom--svg {
  width: 45px;
  height: 45px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.dashboard--notification--custom--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--banner--wrapper{
  margin-top: 42px;
  width: 100%;
}
.dashboard--banner--item {
  padding: 15px 25px 29px 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
}
.bannerMotivated--text {
  color: #FFF;
  font-family: var(--Domaine);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}




/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 48%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* image uploader */
.uploader-wrapper {
  text-align: center;
  width: 100%;
}

.uploader {
  border: 2px dashed #ffa726;
  border-radius: 10px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.uploader img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  display: none;
}

.uploader.active img {
  display: block;
}

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

.uploader .icon {
  margin-bottom: 10px;
}

.uploader p, .uploader span {
  margin: 5px 0;
}

.browse {
  font-size: 14px;
  color: #ffa726;
}

.uploader:hover {
  background-color: #444;
}
#message{
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
#separator{
  color: #6D6D6D;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.browse{
  padding: 8px 10px;
  width: 100%;
  border-radius: 50px;
  border: 1px solid #C39D42;
}
/* image Uploader */
.upload--btn{
  margin-top: 16px;
}
.upload--btn button{
  padding: 8px 0;
  width: 100%;
  background: var(--text-yellow);
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}



.Announcement--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement--notification--card--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.announcement--notification--card--item{
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}
.announcement--notification--headerss{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.announcement--notification--headerss--icon--texts{
  display: flex;
  gap: 8px;
  align-items: center;
}
.announcement--notification--headerss--icon{
  padding: 4px;
  background: rgba(22, 179, 100, 1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theVoting--texts--time{
  color: #DCDCDC;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}
.theVoting--texts{
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.announcement--notification--content{
  padding-left: 32px;
  margin-top: 10px;
}


/* owl custom */
.owl-dots {
  display: flex;
  gap: 10px;
  position: relative;
  left: 42%;
  top: -25px;
}
.owl-carousel button.owl-dot{
  width: 24px;
  height: 4px;
  border-radius: 20px;
  background: #707070;
}
.owl-carousel button.owl-dot.active{
  background: #fff;
}


.dashboard--photo--upload--gellary{
  margin-top: 50px;
}
.dashboard--photo--upload--gellaryss{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  width: 100%;
}
.dashboard--photo--upload--card {
  width: 44%;
}
.dashboard--photo--upload--heading{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--photo--upload--image{
  width: 100%;
  height: 320px;
  border-radius: 15px;
}
.dashboard--photo--upload--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.dashboard--photo--upload--text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}






/* ===========:: Dashboard Rank ::============== */
.dashboard--main.rank {
  width: 100%;
  padding: 20px;
  margin: 0 0 0 0%;
    height: 100vh;
}
/* .dashboard--left--nav.rank{
  position: relative;
} */
.count--down--time--wrapper.rank{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashBoard--rank--timer--wrapper{
  position: relative;
  left: 50%;
    top: 35%;
  transform: translate(-50%,-50%);
}
.dashboard--rank--navProfile{
  display: flex;
  gap: 62px;
  align-items: center;
}
.dashboard--rank--time--header{
  max-width: 1085px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard--rank--time--header p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.dashboard--time--start--in--wrapper{
  margin-top: 48px;
}
.dashboard--time--start--in--wrapper h5 {
  color: #C39D42;
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.dashborad--rank--voting--timeCountDown--wrapper{
  margin-top: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px 0;
  width: 100%;
  text-align: center;
}



.rank--countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  color: #FFF;
  font-size: 20px;
}

.rank--countdown-item {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80px;
}

.rank--count {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: var(--Domaine);
}

.rank--label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: var(--text-yellow);
  font-family: var(--Domaine);
}

.rank--countdown-item:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 40px;
  background-color: var(--text-yellow);
  position: absolute;
  margin-left: 52px;
  margin-top: -45px;
  display: none;
}

/* LeaderBoard */
.dashborad--rank--leaderBoard--wrapper{
  margin-top: 40px;
}

.dashboard--leader--main--wrapper {
  margin-top: 60px;
}

.dashboard--leader--item--content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.dashboard--leader--item--content::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #465065;
  width: 100%;
  height: 1px;
}


.dashboard--leader--main--wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard--leader--item {
  padding: 55px 20px;
  border-radius: 8px;
  background: #212121;
  width: 31%;
  position: relative;
}
.dashboard--leader--item--ranking {
  padding: 6px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}
.dashboard--leader--item--ranking--inner{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visit--profile--btn{
  margin-top: 16px;
  text-align: center;
}
.visit--profile{
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  text-decoration: underline;
}


/* Leader Board */
.dashboard--main--ranking--leading--bord--wrappers {
  margin-top: 20px;
  padding: 8px 25px;
  border-radius: 8px;
  background: #212121;
}
.dashboard--main--ranking--leading--inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
}
.dashboard--main--ranking--leading--inner--heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 90px;
}
.Leadernumbers{
  min-width: 10%;
}
.LeaderNamess {
  min-width: 30%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 4px;
  overflow: hidden;
}
.whoIsPhoto {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
}
.whoIsPhoto img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.LeaderBeforeImg {
  min-width: 10%;
  text-align: center;
}
.LeaderBeforeImg--wrapper{
  width: 100%;
  height: 40px;
}
.LeaderBeforeImg--wrapper img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}


.LeaderNowImg{
  min-width: 10%;
  text-align: center;
}
.LeaderTotalVote{
  min-width: 20%;
  text-align: center;
}
.LeaderGiveIngVote{
  width: 20%;
  text-align: center;
}

.voteNowBtn{
  padding: 10px 0;
  width: 90px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all linear 0.3s;
}
.voteNowBtn:hover{
  background: var(--text-yellow);
}

/* ====== :: People Vote You Right Side Nav :: =========== */
.dashboard--people--vote--you--wrapper{
  margin-top: 20px;
}


.people--who--vote--you--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people--who--vote--you--item{
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prople--who--vote--nameImg--wrapper{
  display: flex;
  gap: 8px;
  align-items: center;
}
.people--who--vote--you--image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.people--who--vote--you--image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.people--who--vote--svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.people--who--vote--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likees.active{
  display: none;
}
.unlikees.active{
  display: none;
}
/* ====== :: People Vote You Right Side Nav :: =========== */



/* DASHBOARD SETTING START HARE */
.dashboard--setting--wrapper{
  margin-top: 42px;
  width: 100%;
  display: flex;
  gap: 80px;
}
/* .hello ul{
  display: flex;
} */
.skltbs-tab-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.skltbs-tab-group::after {
  position: absolute;
  content: '';
  right: -40px;
  top: 0;
  height: 100%;
  max-height: 80vh;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 49.95%, rgba(255, 255, 255, 0.06) 50.05%);
}
.dashboard--setting--wrapper .skltbs-tab{
  padding: 16px;
  width: 100%;
  text-align: start;
  background: transparent;
  border-radius: 39px;
  background: transparent;
  border: none;
  color: #949494;
  font-family: "Wix Madefor Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
}

.dashboard--setting--wrapper .skltbs-tab.skltbs-active{
  color: #FFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 178.21%);
}
.skltbs-mode-tabs .skltbs-panel-group {
  position: relative;
  width: 100%;
}



.genarel--wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genaral--setting--main--wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.genaral--setting--main--wrapper form{
  width: 100%;
}
.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

.genaral--setting--profile--picture--ins{
  width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--notification--SubText{
  color: #A5A5A5;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.genaral--setting--update--wrapper{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Photo Uploader */
.image-uploader-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uploader-section {
  text-align: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border-radius: 44px;
  border: 1px solid #C39D42;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.upload-instruction {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.preview-section {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.nameChangeInputBox {
  width: 100%;
  padding: 0 25px;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 250px 0px rgba(0, 0, 0, 0.25);
  margin-top: 14px;
}

.nameChangeInputBox input{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
}
.save--change--btn{
  padding-top: 126px;
  display: flex;
  justify-content: end;
}
.save--change--btn button {
  width: 165px;
  padding: 12px 0;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
}
.skltbs-panel.skltbs-active{
  margin-top: 50px;
}
.skltbs-panel-heading{
  margin-top: 50px;
}

/* Photo Uploader */

/* DASHBOARD SETTING END HARE */

/* =============================================== Dashboard Page End Hare ================================== */


















  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 64px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
  }
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 43px;
    font-style: normal;
    font-weight: 400;
    line-height: 62px;
    text-transform: uppercase;
}
.subHeading {
  color: var(--text-white);
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  line-height: 42px;
}

.learn--moreBtn {
  width: fit-content;
  padding: 14px 64px;
  border-radius: 50px;
  border: 1px solid var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2dddb;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

  .register--Btn {
    width: fit-content;
    padding: 14px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .timeSectionSub {
    color: #e2dddb;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }
  .duration--text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  .duration--time--headerss--italic {
    color: var(--text-yellow);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }
  .StudioAndLuxey--Texts {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
  }
  .effortable--texts {
    color: #000;
    font-family: var(--Domaine);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -1.92px;
    text-transform: uppercase;
}
  .challangeTexts {
    color: var(--text-yellow);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
  }
  .challangeName--Inner--texts {
    color: #70798b;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
  }
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
  }
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
  }
  /* ========================= common styles End hare ========================= */
















  /* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */
























  /* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10 {
  rotate: 6deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 50px 0 40px 22px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 210px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 250px;
  height: 240px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */





































/* =============================================== Index Page Start Hare ================================== */


/* Banner Start hare */
.banner--wrapper {
  padding: 190px 0 200px 0;
  background: url(../images/SignInPageBg.png) no-repeat;
}
.banner--heading{
  text-align: center;
}
.banner--heading p span{
  color: #C39D42;
  margin-top: 24px;
}
.banner--btn {
  margin-top: 52px;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
/* Banner End hare */



/* time section start hare */
.timeSection--wrapper {
  padding: 50px 0 52px 0;
  background: url(../images/TimeSectionBg.png) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.timeSection--freme--upper {
  width: 100%;
  height: 80px;
  position: absolute;
  top: -20px;
  left: 0;
}
.timeSection--freme--upper img{
  height: 100%;
  width: 100%;
}
.timeSection--heading {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 32px;
}
.pageHeading.two{
  text-align: start;
}
.timeSectionSub.two {
  width: 100%;
}
.timeSection--heading p span{
  color: var(--text-yellow);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 27px;
}


.duration--Time--wrapper {
  margin-top: 24px;
  display: flex;
  gap: 43px;
  flex-wrap: wrap;
}

.duration--Time--item{
  padding-right: 43px;
  position: relative;
  width: fit-content;
}
.duration--Time--item:last-child::after{
  display: none;
}
.duration--Time--item::after{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  height: 80%;
  width: 1px;
  background: var(--text-white);
}
.duration--icon--wrapper{
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.duration--icon{
  width: 24px;
  height: 24px;
}
.duration--icon svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.count--down--time--wrapper {
  margin-top: 50px;
  display: flex;
  gap: 40;
  align-items: center;
}

.count--down--time--item--itemsss {
  padding-right: 10px;
  padding-left: 10px;
  position: relative;
  width: fit-content;
}
.count--down--time--item--itemsss::after{
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: 2px;
  background: var(--text-yellow);
}
.count--down--time--item--itemsss:last-child::after{
  display: none;
}
.count--down--time--item{
  padding: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20.5px);
  width: fit-content;
}
.learn--more--btn{
  margin-top: 56px;
}
/* time section End hare */



/* member with benifits section start hare */
.memberWith--benifits--wrapper{
  padding: 80px 0;
  background: #000000;
}
.member--with--benifits--main {
  display: flex;
  gap: 66px;
  align-items: center;
  display: none;
}
.member--with--benifits--item1{
  width: 650px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member--with--benifits--item1 h4{
  text-align: end;
}


.member--with--benifits--img{
  width: 288px;
  height: 288px;
}
.member--with--benifits--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* member with benifits section End hare */




/* Studios and luxury section Start hare */
.Studios--luxury--wrapper{
  padding-bottom: 140px;
}

.studio--luxury--main--wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.studio--luxury--left--item {
  display: flex;
  flex-wrap: wrap;
}
.studio--luxury--left--item--img {
  width: 100%;
  height: 405px;
}
.studio--luxury--left--item--img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.studio--luxury--left--item--text{
  background-color: rgba(27, 27, 27, 1);
  width: fit-content;
}
.studio--luxury--left--item--Innertext{
  width: 375px;
  height: 375px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.studio--luxury--left--item--img--two {
  width: 100%;
  height: 374px;
}
.studio--luxury--left--item--img--two img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Studios and luxury section End hare */


/* Join Now section Start hare */
.join--now--wrapper{
  padding-bottom: 145px;
}

.join--now--main--wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.join--now--main--left {
  min-width: 19.5%;
  display: none;
}
.join--now--main--right {
  width: 100%;
  height: 315px;
  position: relative;
}
.join--now--main--right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join--now--wrapperss {
  position: absolute;
  bottom: -30%;
  right: 25%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Join Now section End hare */



/* effort able section Start hare */
.effort--able--wrapper {
  padding-top: 60px;
  padding-bottom: 60px;
}
.affordable--heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.affordable--heading p span{
  color: var(--text-yellow);
}

.challangeName--wrapper {
  margin-top: 56px;
  padding: 75px 70px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(39.5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.challangeName--item1 h4 span{
  color: #70798B;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.challangeName--item2 {
  display: flex;
  gap: 0px;
  align-items: start;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.challangeName--Inner--item{
  display: flex;
  gap: 10px;
  align-items: center;
}
/*  effort able section End hare */


/*  Frequently Asked Questions section Start hare */
.frequently--asked--questions{
  padding-bottom: 150px;
}

.faq--wrapper{
  margin-top: 56px;
}

.accordion.custom{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.accordion-item.custom{
  border-radius: 14px;
  border: 2px solid rgba(23, 27, 36, 0.72);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.accordion-button.custom{
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  background: transparent;
  color: var(--text-white);
}

.accordion-button.custom::after {
  flex-shrink: 0;
  width: 51px; /* Match the width of your SVG */
  height: 51px; /* Match the height of your SVG */
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51' viewBox='0 0 51 51' fill='none'%3E%3Cg filter='url(%23filter0_b_41_302)'%3E%3Ccircle cx='25.6691' cy='25.3308' r='25.3309' transform='rotate(-180 25.6691 25.3308)' fill='white' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M33.9258 28.4404L25.6692 20.2212L17.4126 28.4404' stroke='%23F4DB0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_41_302' x='-299.662' y='-300' width='650.662' height='650.662' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='150'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_41_302'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_41_302' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain; /* Adjust as needed */
  transition: var(--bs-accordion-btn-icon-transition);
}
.accordion-body{
  max-width: 1152px;
}
/*  Frequently Asked Questions section End hare */



/* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 110.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */

/* =============================================== Index Page End Hare ================================== */

























  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 50px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: center;
  }
  .sign--in--content--wrapper {
    display: none;
  }
  .sign--in--content {
    max-width: 894px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 476px;
    height: 476px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 50px 45px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  /* =============================================== Sign In Page End Hare ================================== */

  /* =============================================== Sign Up Page Start Hare ================================== */

  .signUp--names--wrapper {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }
  .firstName--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.56);
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .firstName--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  /* /forget pass */
  .forget--pas--wrapper {
    margin-top: 25px;
  }
  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 520px;
  }
  .signIn--Btn--wrapper.two button {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }
  /* /forget pass */
  /* =============================================== Sign Up Page End Hare ================================== */
}








/* large mobile devices */
@media only screen and (min-width: 480px) and (max-width: 575px) {







  /* =============================================== profile Page Start Hare ================================== */

  .backBtn--main--svg {
    width: 35px;
    height: 35px;
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 8px;
    z-index: 111;
}

.backBtn--main--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.profile--cover-photo {
  width: 100%;
  height: 190px;
}
.profile--cover-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile--main--wrapper {
  padding: 0 40px;
  position: relative;
  top: -45px;
}


.profile--picture--main {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.profile--picture--main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile--name--email--wrapper{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard--photo--upload--card.viewOther {
  width: 44%;
}


/* notification */
.modal-header .btn-close {
	padding: 0;
	margin: 0;
  color: white;
}
.modal-header{
  border-bottom: none;
  display: flex;
  justify-content: end;
  align-items: end;
  text-align: end;
  color:  #FFF;
}
.modal-content{
  background: #212121;
}
.notification--header{
  padding-bottom: 10px;
}
.notification--wrapper{
  margin-top: 25px;
  height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notification--wrapper {
  /* Common styles */
  overflow: auto;

  /* For Firefox */
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #ccc transparent; /* Sets the track and thumb colors */
}

.notification--wrapper::-webkit-scrollbar {
  width: 3px; /* Sets scrollbar width for WebKit browsers */
}

.notification--wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Sets thumb color for WebKit browsers */
  border-radius: 10px; /* Optional: makes the thumb rounded */
}

.notification--wrapper::-webkit-scrollbar-track {
  background: transparent; /* Optional: sets track background */
}

.notification--item{
  padding: 20px 0;
  border-bottom: 1px solid #fff;
}

.notification--header--time--wrapper h3{
  color: #FFF;
  font-family: "Wix Madefor Text";
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.notification--header--time--wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification--header--time--wrapper p{
  color: var(--color-text-dont-edit-text-quarterary, #667085);
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}
.notification--item h4{
  overflow: hidden;
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 8px;
}

.btn:hover {
	color: var(--bs-btn-hover-color);
	background-color: transparent;
	border-color: var(--text-yellow);
}
.btn-primary{
  border-color: var(--text-yellow);
}
/* =============================================== Profile Page End Hare ================================== */



















  /* ============================
     Common Navbar Start Hare
  ==============================
  */

  .navbar--wrapper {
    padding: 36px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 11111;
  }
  .navbar--main--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar--logo {
    width: 32px;
    height: 65px;
}
  .navbar--logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .navbar--item--wrapper {
    padding: 10px 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
    width: fit-content;
    display: none;
  }
  .navbar--item--wrapper ul {
    display: flex;
    gap: 57px;
    align-items: center;
  }
  .navbar--item--wrapper ul li a {
    padding: 12px 15px;
    color: #e2dddb;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all linear 0.3s;
  }
  .navbar--item--wrapper ul li a:hover {
    background-color: var(--text-yellow);
    color: #2c2b2a;
  }
  .navbar--item--wrapper ul li a:hover svg {
    fill: #2c2b2a;
  }
  .navbar--menu {
    padding: 0px 10px 0px 20px;
    width: fit-content;
    border-radius: 27px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .navbar--menu:hover {
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
  }
  .menu--humburger--Icon {
    width: 20px;
    height: 20px;
  }
  .menu--humburger--Icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ============================
     Common Navbar End Hare
  ==============================
*/

  /* ===== :: Main Menu Start Hare :: ==== */
  .main--menu--wrapper {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }

  .main--menu--wrapper:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(27.5px);
    backdrop-filter: blur(27.5px);
    -webkit-transition: -webkit-clip-path 0.5s;
    transition: clip-path 0.5s;
    -o-transition: clip-path 0.5s;
    transition: clip-path 0.5s, -webkit-clip-path 0.5s;
    -webkit-clip-path: circle(0% at 100% 0);
    clip-path: circle(0% at 100% 0);
  }
  .main--menu--wrapper,
  .main--menu--wrapper:before {
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .main--menu--wrapper.show {
    visibility: visible;
    -webkit-transition: linear;
    -o-transition: linear;
    transition: linear;
    z-index: 2200000001;
  }
  .main--menu--wrapper.show:before {
    -webkit-transition: -webkit-clip-path 0.7s;
    transition: clip-path 0.7s;
    -o-transition: clip-path 0.7s;
    transition: clip-path 0.7s, -webkit-clip-path 0.7s;
    -webkit-clip-path: circle(141.4% at 100% 0);
    clip-path: circle(141.4% at 100% 0);
  }

  .main--menu--wrapper .main--menu--wrapper--inner {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: ease-in 0.2s;
  }

  .main--menu--wrapper .main--menu--wrapper--inner.show {
    visibility: visible;
    opacity: 1;
  }

  .main--menu--wrapper--top--header {
    padding: 35px 0px 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .close--btn {
    padding: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .close--btn:hover {
    background: var(--text-yellow);
    border: 1px solid #c39d42;
  }

  .main--menu--items--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main--menu--wrapper--items {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
  .main--menu--items ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .main--menu--items ul li a {
    transition: all linear 0.3s;
    position: relative;
  }
  .main--menu--items ul li a::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 40%;
    background-color: var(--text-yellow);
    bottom: -10px;
    left: 0;
    transition: all linear 0.3s;
  }
  .main--menu--items ul li a:hover {
    color: var(--text-yellow);
  }
  .main--menu--items ul li a:hover::after {
    width: 100%;
  }
  .nav--menu--textss {
    color: #f2f2f2;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
  }

  .main--menu--item--social--links ul {
    display: flex;
    column-gap: 48px;
    align-items: center;
  }
  .social--icon--linkdin {
    width: 24px;
    height: 24px;
  }
  .social--icon--linkdin svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nav--menu--textss.logOutBtn {
    background: transparent;
    border: none;
  }

  .ProfilePic--name {
    color: #fff;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.39px;
  }
  /* ===== :: Main Menu End Hare :: ==== */




















/* =============================================== Dashboard Page Start Hare ================================== */


  /* opener closer */
  .btn--left--opener{
    display: flex;
  }
  .btn--right--opener{
    display: flex;
  }
  /* opener closer */



.dashboard--wrapper{
  width: 100%;
  display: flex;
}
.dashboard--left--nav {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--left--nav.active {
  width: 50%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 32px 0 32px 32px;
  z-index: 1111;
}

.dashboard--header--main{
  display: flex;
  gap: 8px;
  align-items: center;
  display: none;
}
.dashboard--logo{
  width: 38px;
  height: 40px;
}
.dashboard--logo svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dashboard--nav--main{
  margin-top: 40px;
}
.dashboard--nav--main ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard--nav--main ul li a{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.dashboard--nav--main ul li a.active{
  padding: 12px 0;
  position: relative;
  background: var(--fghjk, linear-gradient(270deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%));
}
.dashboard--nav--main ul li a.active::after{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background: #C39D42;
}
/* dashboard left end hare  */

.dashboard--main {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}

.dashboard--notification--name--header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column-reverse;
}

.dashboard--rank--navProfile {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}


.dashboard--notification--custom--svg {
  width: 45px;
  height: 45px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.dashboard--notification--custom--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--banner--wrapper{
  margin-top: 42px;
  width: 100%;
}
.dashboard--banner--item {
  padding: 15px 0px 29px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
}
.bannerMotivated--text {
  color: #FFF;
  font-family: var(--Domaine);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}




/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 55%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* image uploader */
.uploader-wrapper {
  text-align: center;
  width: 100%;
}

.uploader {
  border: 2px dashed #ffa726;
  border-radius: 10px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.uploader img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  display: none;
}

.uploader.active img {
  display: block;
}

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

.uploader .icon {
  margin-bottom: 10px;
}

.uploader p, .uploader span {
  margin: 5px 0;
}

.browse {
  font-size: 14px;
  color: #ffa726;
}

.uploader:hover {
  background-color: #444;
}
#message{
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
#separator{
  color: #6D6D6D;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.browse{
  padding: 8px 10px;
  width: 100%;
  border-radius: 50px;
  border: 1px solid #C39D42;
}
/* image Uploader */
.upload--btn{
  margin-top: 16px;
}
.upload--btn button{
  padding: 8px 0;
  width: 100%;
  background: var(--text-yellow);
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}



.Announcement--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement--notification--card--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.announcement--notification--card--item{
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}
.announcement--notification--headerss{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.announcement--notification--headerss--icon--texts{
  display: flex;
  gap: 8px;
  align-items: center;
}
.announcement--notification--headerss--icon{
  padding: 4px;
  background: rgba(22, 179, 100, 1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theVoting--texts--time{
  color: #DCDCDC;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}
.theVoting--texts{
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.announcement--notification--content{
  padding-left: 32px;
  margin-top: 10px;
}


/* owl custom */
.owl-dots {
  display: flex;
  gap: 10px;
  position: relative;
  left: 42%;
  top: -25px;
}
.owl-carousel button.owl-dot{
  width: 24px;
  height: 4px;
  border-radius: 20px;
  background: #707070;
}
.owl-carousel button.owl-dot.active{
  background: #fff;
}


.dashboard--photo--upload--gellary{
  margin-top: 50px;
}
.dashboard--photo--upload--gellaryss{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  width: 100%;
}
.dashboard--photo--upload--card {
  width: 44%;
}
.dashboard--photo--upload--heading{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--photo--upload--image{
  width: 100%;
  height: 320px;
  border-radius: 15px;
}
.dashboard--photo--upload--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.dashboard--photo--upload--text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}






/* ===========:: Dashboard Rank ::============== */
.dashboard--main.rank {
  width: 100%;
  padding: 20px;
  margin: 0 0 0 0%;
    height: 100vh;
}
/* .dashboard--left--nav.rank{
  position: relative;
} */
.count--down--time--wrapper.rank{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashBoard--rank--timer--wrapper{
  position: relative;
  left: 50%;
    top: 35%;
  transform: translate(-50%,-50%);
}
.dashboard--rank--navProfile{
  display: flex;
  gap: 62px;
  align-items: center;
}
.dashboard--rank--time--header{
  max-width: 1085px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard--rank--time--header p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.dashboard--time--start--in--wrapper{
  margin-top: 48px;
}
.dashboard--time--start--in--wrapper h5 {
  color: #C39D42;
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.dashborad--rank--voting--timeCountDown--wrapper{
  margin-top: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px 0;
  width: 100%;
  text-align: center;
}



.rank--countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  color: #FFF;
  font-size: 20px;
}

.rank--countdown-item {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 60px;
}

.rank--count {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: var(--Domaine);
}

.rank--label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: var(--text-yellow);
  font-family: var(--Domaine);
}

.rank--countdown-item:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 40px;
  background-color: var(--text-yellow);
  position: absolute;
  margin-left: 52px;
  margin-top: -45px;
  display: none;
}

/* LeaderBoard */
.dashborad--rank--leaderBoard--wrapper{
  margin-top: 40px;
}

.dashboard--leader--main--wrapper {
  margin-top: 60px;
}

.dashboard--leader--item--content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.dashboard--leader--item--content::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #465065;
  width: 100%;
  height: 1px;
}


.dashboard--leader--main--wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard--leader--item {
  padding: 55px 20px;
  border-radius: 8px;
  background: #212121;
  width: 45%;
  position: relative;
}
.dashboard--leader--item--ranking {
  padding: 6px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}
.dashboard--leader--item--ranking--inner{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visit--profile--btn{
  margin-top: 16px;
  text-align: center;
}
.visit--profile{
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  text-decoration: underline;
}


/* Leader Board */
.dashboard--main--ranking--leading--bord--wrappers {
  margin-top: 20px;
  padding: 8px 25px;
  border-radius: 8px;
  background: #212121;
}
.dashboard--main--ranking--leading--inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
}
.dashboard--main--ranking--leading--inner--heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 90px;
}
.Leadernumbers{
  min-width: 10%;
}
.LeaderNamess {
  min-width: 30%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 4px;
  overflow: hidden;
}
.whoIsPhoto {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
}
.whoIsPhoto img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.LeaderBeforeImg {
  min-width: 10%;
  text-align: center;
}
.LeaderBeforeImg--wrapper{
  width: 100%;
  height: 40px;
}
.LeaderBeforeImg--wrapper img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}


.LeaderNowImg{
  min-width: 10%;
  text-align: center;
}
.LeaderTotalVote{
  min-width: 20%;
  text-align: center;
}
.LeaderGiveIngVote{
  width: 20%;
  text-align: center;
}

.voteNowBtn{
  padding: 10px 0;
  width: 90px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all linear 0.3s;
}
.voteNowBtn:hover{
  background: var(--text-yellow);
}

/* ====== :: People Vote You Right Side Nav :: =========== */
.dashboard--people--vote--you--wrapper{
  margin-top: 20px;
}


.people--who--vote--you--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people--who--vote--you--item{
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prople--who--vote--nameImg--wrapper{
  display: flex;
  gap: 8px;
  align-items: center;
}
.people--who--vote--you--image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.people--who--vote--you--image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.people--who--vote--svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.people--who--vote--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likees.active{
  display: none;
}
.unlikees.active{
  display: none;
}
/* ====== :: People Vote You Right Side Nav :: =========== */



/* DASHBOARD SETTING START HARE */
.dashboard--setting--wrapper{
  margin-top: 42px;
  width: 100%;
  display: flex;
  gap: 80px;
}
/* .hello ul{
  display: flex;
} */
.skltbs-tab-group{
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}
.skltbs-tab-group::after {
  position: absolute;
  content: '';
  right: -40px;
  top: 0;
  height: 100%;
  max-height: 80vh;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 49.95%, rgba(255, 255, 255, 0.06) 50.05%);
}
.dashboard--setting--wrapper .skltbs-tab{
  padding: 16px;
  width: 100%;
  text-align: start;
  background: transparent;
  border-radius: 39px;
  background: transparent;
  border: none;
  color: #949494;
  font-family: "Wix Madefor Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
}

.dashboard--setting--wrapper .skltbs-tab.skltbs-active{
  color: #FFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 178.21%);
}
.skltbs-mode-tabs .skltbs-panel-group {
  position: relative;
  width: 100%;
}



.genarel--wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genaral--setting--main--wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.genaral--setting--main--wrapper form{
  width: 100%;
}
.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

.genaral--setting--profile--picture--ins{
  width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--notification--SubText{
  color: #A5A5A5;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.genaral--setting--update--wrapper{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Photo Uploader */
.image-uploader-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uploader-section {
  text-align: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border-radius: 44px;
  border: 1px solid #C39D42;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.upload-instruction {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.preview-section {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.nameChangeInputBox {
  width: 100%;
  padding: 0 25px;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 250px 0px rgba(0, 0, 0, 0.25);
  margin-top: 14px;
}

.nameChangeInputBox input{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
}
.save--change--btn{
  padding-top: 126px;
  display: flex;
  justify-content: end;
}
.save--change--btn button {
  width: 165px;
  padding: 12px 0;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
}
.skltbs-panel.skltbs-active{
  margin-top: 50px;
}
.skltbs-panel-heading{
  margin-top: 50px;
}

/* Photo Uploader */

/* DASHBOARD SETTING END HARE */

/* =============================================== Dashboard Page End Hare ================================== */































  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 64px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
  }
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px;
    text-transform: uppercase;
}
.subHeading {
  color: var(--text-white);
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  line-height: 40px;
}

  .learn--moreBtn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2dddb;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .register--Btn {
    width: fit-content;
    padding: 16px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .timeSectionSub {
    color: #e2dddb;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }
  .duration--text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  .duration--time--headerss--italic {
    color: var(--text-yellow);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }
  .StudioAndLuxey--Texts {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
  }
  .effortable--texts {
    color: #000;
    font-family: var(--Domaine);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -1.92px;
    text-transform: uppercase;
}
  .challangeTexts {
    color: var(--text-yellow);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
  }
  .challangeName--Inner--texts {
    color: #70798b;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
}
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
  }
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
  }
  /* ========================= common styles End hare ========================= */


















  /* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */





























    /* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10 {
  rotate: 6deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 50px 0 40px 22px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 210px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 250px;
  height: 240px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */














/* =============================================== Index Page Start Hare ================================== */


/* Banner Start hare */
.banner--wrapper {
  padding: 150px 0 200px 0;
  background: url(../images/SignInPageBg.png) no-repeat;
}
.banner--heading{
  text-align: center;
}
.banner--heading p span{
  color: #C39D42;
  margin-top: 24px;
}
.banner--btn {
  margin-top: 52px;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* Banner End hare */



/* time section start hare */
.timeSection--wrapper {
  padding: 50px 0 52px 0;
  background: url(../images/TimeSectionBg.png) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.timeSection--freme--upper {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.timeSection--freme--upper img{
  height: 100%;
  width: 100%;
}
.timeSection--heading {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 32px;
}
.pageHeading.two{
  text-align: start;
}
.timeSectionSub.two {
  width: 100%;
}
.timeSection--heading p span{
  color: var(--text-yellow);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 27px;
}


.duration--Time--wrapper {
  margin-top: 24px;
  display: flex;
  gap: 43px;
  flex-wrap: wrap;
}

.duration--Time--item{
  padding-right: 43px;
  position: relative;
  width: fit-content;
}
.duration--Time--item:last-child::after{
  display: none;
}
.duration--Time--item::after{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  height: 80%;
  width: 1px;
  background: var(--text-white);
}
.duration--icon--wrapper{
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.duration--icon{
  width: 24px;
  height: 24px;
}
.duration--icon svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.count--down--time--wrapper {
  margin-top: 50px;
  display: flex;
  gap: 40;
  align-items: center;
}

.count--down--time--item--itemsss {
  padding-right: 10px;
  padding-left: 10px;
  position: relative;
  width: fit-content;
}
.count--down--time--item--itemsss::after{
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: 2px;
  background: var(--text-yellow);
}
.count--down--time--item--itemsss:last-child::after{
  display: none;
}
.count--down--time--item{
  padding: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20.5px);
  width: fit-content;
}
.learn--more--btn{
  margin-top: 56px;
}
/* time section End hare */


/* member with benifits section start hare */
.memberWith--benifits--wrapper{
  padding: 80px 0;
  background: #000000;
}
.member--with--benifits--main {
  display: flex;
  gap: 66px;
  align-items: center;
  flex-wrap: wrap;
  display: none;
}
.member--with--benifits--item1{
  width: 650px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member--with--benifits--item1 h4{
  text-align: end;
}


.member--with--benifits--img{
  width: 288px;
  height: 288px;
}
.member--with--benifits--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* member with benifits section End hare */



/* Studios and luxury section Start hare */
.Studios--luxury--wrapper{
  padding-bottom: 140px;
}

.studio--luxury--main--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.studio--luxury--left--item{
  display: flex;
  flex-wrap: wrap;
}
.studio--luxury--left--item--img {
  width: 100%;
  height: 350px;
}
.studio--luxury--left--item--img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.studio--luxury--left--item--text{
  background-color: rgba(27, 27, 27, 1);
  width: fit-content;
}
.studio--luxury--left--item--Innertext {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.studio--luxury--left--item--img--two {
  width: 100%;
  height: 230px;
}
.studio--luxury--left--item--img--two img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Studios and luxury section End hare */



/* Join Now section Start hare */
.join--now--wrapper{
  padding-bottom: 145px;
}

.join--now--main--wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.join--now--main--left {
  min-width: 19.5%;
  display: none;
}
.join--now--main--right {
  width: 100%;
  height: 260px;
  position: relative;
}
.join--now--main--right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join--now--wrapperss {
  position: absolute;
  bottom: -30%;
  right: 25%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Join Now section End hare */


/* effort able section Start hare */
.effort--able--wrapper {
  padding-top: 80px;
  padding-bottom: 100px;
}
.affordable--heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.affordable--heading p span{
  color: var(--text-yellow);
}

.challangeName--wrapper {
  margin-top: 56px;
  padding: 50px 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(39.5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.challangeName--item1 h4 span{
  color: #70798B;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.challangeName--item2 {
  display: flex;
  gap: 3px;
  align-items: start;
  flex-wrap: wrap;
}
.challangeName--Inner--item{
  display: flex;
  gap: 10px;
  align-items: center;
}
.challangeName--item3{
  margin-top: 20px;
}
/*  effort able section End hare */


/*  Frequently Asked Questions section Start hare */
.frequently--asked--questions{
  padding-bottom: 150px;
}

.faq--wrapper{
  margin-top: 56px;
}

.accordion.custom{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.accordion-item.custom{
  border-radius: 14px;
  border: 2px solid rgba(23, 27, 36, 0.72);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.accordion-button.custom{
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  background: transparent;
  color: var(--text-white);
}

.accordion-button.custom::after {
  flex-shrink: 0;
  width: 51px; /* Match the width of your SVG */
  height: 51px; /* Match the height of your SVG */
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51' viewBox='0 0 51 51' fill='none'%3E%3Cg filter='url(%23filter0_b_41_302)'%3E%3Ccircle cx='25.6691' cy='25.3308' r='25.3309' transform='rotate(-180 25.6691 25.3308)' fill='white' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M33.9258 28.4404L25.6692 20.2212L17.4126 28.4404' stroke='%23F4DB0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_41_302' x='-299.662' y='-300' width='650.662' height='650.662' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='150'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_41_302'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_41_302' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain; /* Adjust as needed */
  transition: var(--bs-accordion-btn-icon-transition);
}
.accordion-body{
  max-width: 1152px;
}
/*  Frequently Asked Questions section End hare */


/* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 110.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */


/* =============================================== Index Page End Hare ================================== */













































  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 50px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: space-between;
  }
  .sign--in--content--wrapper {
    display: none;
  }
  .sign--in--content {
    max-width: 894px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 476px;
    height: 476px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 50px 30px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  /* =============================================== Sign In Page End Hare ================================== */

  /* =============================================== Sign Up Page Start Hare ================================== */

  .signUp--names--wrapper {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }
  .firstName--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.56);
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .firstName--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  /* /forget pass */
  .forget--pas--wrapper {
    margin-top: 25px;
  }
  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 400px;
  }
  .signIn--Btn--wrapper.two button {
    width: fit-content;
    padding: 10px 50px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }
  /* /forget pass */
  /* =============================================== Sign Up Page End Hare ================================== */
}








/* mobile devices */
@media only screen and (min-width: 375px) and (max-width: 479px) {








/* =============================================== profile Page Start Hare ================================== */

  .backBtn--main--svg {
    width: 35px;
    height: 35px;
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 8px;
    z-index: 111;
}

.backBtn--main--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.profile--cover-photo {
  width: 100%;
  height: 150px;
}
.profile--cover-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile--main--wrapper {
  padding: 0 40px;
  position: relative;
  top: -45px;
}


.profile--picture--main {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.profile--picture--main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile--name--email--wrapper{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard--photo--upload--card.viewOther {
  width: 70%;
}


/* notification */
.modal-header .btn-close {
	padding: 0;
	margin: 0;
  color: white;
}
.modal-header{
  border-bottom: none;
  display: flex;
  justify-content: end;
  align-items: end;
  text-align: end;
  color:  #FFF;
}
.modal-content{
  background: #212121;
}
.notification--header{
  padding-bottom: 10px;
}
.notification--wrapper{
  margin-top: 25px;
  height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notification--wrapper {
  /* Common styles */
  overflow: auto;

  /* For Firefox */
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #ccc transparent; /* Sets the track and thumb colors */
}

.notification--wrapper::-webkit-scrollbar {
  width: 3px; /* Sets scrollbar width for WebKit browsers */
}

.notification--wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Sets thumb color for WebKit browsers */
  border-radius: 10px; /* Optional: makes the thumb rounded */
}

.notification--wrapper::-webkit-scrollbar-track {
  background: transparent; /* Optional: sets track background */
}

.notification--item{
  padding: 20px 0;
  border-bottom: 1px solid #fff;
}

.notification--header--time--wrapper h3{
  color: #FFF;
  font-family: "Wix Madefor Text";
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.notification--header--time--wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification--header--time--wrapper p{
  color: var(--color-text-dont-edit-text-quarterary, #667085);
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}
.notification--item h4{
  overflow: hidden;
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 8px;
}

.btn:hover {
	color: var(--bs-btn-hover-color);
	background-color: transparent;
	border-color: var(--text-yellow);
}
.btn-primary{
  border-color: var(--text-yellow);
}
/* =============================================== Profile Page End Hare ================================== */























  /* ============================
     Common Navbar Start Hare
  ==============================
*/

  .navbar--wrapper {
    padding: 36px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 11111;
  }
  .navbar--main--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar--logo {
    width: 24px;
    height: 65px;
  }
  .navbar--logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .navbar--item--wrapper {
    padding: 10px 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
    width: fit-content;
    display: none;
  }
  .navbar--item--wrapper ul {
    display: flex;
    gap: 57px;
    align-items: center;
  }
  .navbar--item--wrapper ul li a {
    padding: 12px 15px;
    color: #e2dddb;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all linear 0.3s;
  }
  .navbar--item--wrapper ul li a:hover {
    background-color: var(--text-yellow);
    color: #2c2b2a;
  }
  .navbar--item--wrapper ul li a:hover svg {
    fill: #2c2b2a;
  }
  .navbar--menu {
    padding: 0px 10px 0px 20px;
    width: fit-content;
    border-radius: 27px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .navbar--menu:hover {
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
  }
  .menu--humburger--Icon {
    width: 20px;
    height: 20px;
  }
  .menu--humburger--Icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ============================
     Common Navbar End Hare
  ==============================
*/

  /* ===== :: Main Menu Start Hare :: ==== */
  .main--menu--wrapper {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }

  .main--menu--wrapper:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(27.5px);
    backdrop-filter: blur(27.5px);
    -webkit-transition: -webkit-clip-path 0.5s;
    transition: clip-path 0.5s;
    -o-transition: clip-path 0.5s;
    transition: clip-path 0.5s, -webkit-clip-path 0.5s;
    -webkit-clip-path: circle(0% at 100% 0);
    clip-path: circle(0% at 100% 0);
  }
  .main--menu--wrapper,
  .main--menu--wrapper:before {
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .main--menu--wrapper.show {
    visibility: visible;
    -webkit-transition: linear;
    -o-transition: linear;
    transition: linear;
    z-index: 2200000001;
  }
  .main--menu--wrapper.show:before {
    -webkit-transition: -webkit-clip-path 0.7s;
    transition: clip-path 0.7s;
    -o-transition: clip-path 0.7s;
    transition: clip-path 0.7s, -webkit-clip-path 0.7s;
    -webkit-clip-path: circle(141.4% at 100% 0);
    clip-path: circle(141.4% at 100% 0);
  }

  .main--menu--wrapper .main--menu--wrapper--inner {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: ease-in 0.2s;
  }

  .main--menu--wrapper .main--menu--wrapper--inner.show {
    visibility: visible;
    opacity: 1;
  }

  .main--menu--wrapper--top--header {
    padding: 35px 0px 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .close--btn {
    padding: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .close--btn:hover {
    background: var(--text-yellow);
    border: 1px solid #c39d42;
  }

  .main--menu--items--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main--menu--wrapper--items {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
  .main--menu--items ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .main--menu--items ul li a {
    transition: all linear 0.3s;
    position: relative;
  }
  .main--menu--items ul li a::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 40%;
    background-color: var(--text-yellow);
    bottom: -10px;
    left: 0;
    transition: all linear 0.3s;
  }
  .main--menu--items ul li a:hover {
    color: var(--text-yellow);
  }
  .main--menu--items ul li a:hover::after {
    width: 100%;
  }
  .nav--menu--textss {
    color: #f2f2f2;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
  }

  .main--menu--item--social--links ul {
    display: flex;
    column-gap: 48px;
    align-items: center;
  }
  .social--icon--linkdin {
    width: 24px;
    height: 24px;
  }
  .social--icon--linkdin svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nav--menu--textss.logOutBtn {
    background: transparent;
    border: none;
  }

  .ProfilePic--name {
    color: #fff;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.39px;
  }
  /* ===== :: Main Menu End Hare :: ==== */

  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 64px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
  }
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}
.subHeading {
  color: var(--text-white);
  text-align: center;
  font-family: var(--Domaine);
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px;
}

.learn--moreBtn {
  width: fit-content;
  padding: 14px 64px;
  border-radius: 50px;
  border: 1px solid var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2dddb;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

  .register--Btn {
    width: fit-content;
    padding: 14px 64px;
    border-radius: 50px;
    border: 1px solid var(--text-yellow);
    background: var(--text-yellow);
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .timeSectionSub {
    color: #e2dddb;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
}
  .duration--text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  .duration--time--headerss--italic {
    color: var(--text-yellow);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}
.StudioAndLuxey--Texts {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}
.effortable--texts {
  color: #000;
  font-family: var(--Domaine);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1.92px;
  text-transform: uppercase;
}
.challangeTexts {
  color: var(--text-yellow);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
}
  .challangeName--Inner--texts {
    color: #70798b;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
}
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
  }
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
  }
  /* ========================= common styles End hare ========================= */













/* =============================================== Dashboard Page Start Hare ================================== */


  /* opener closer */
  .btn--left--opener{
    display: flex;
  }
  .btn--right--opener{
    display: flex;
  }
  /* opener closer */



.dashboard--wrapper{
  width: 100%;
  display: flex;
}
.dashboard--left--nav {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--left--nav.active{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 32px 0 32px 32px;
  z-index: 1111;
}

.dashboard--header--main{
  display: flex;
  gap: 8px;
  align-items: center;
  display: none;
}
.dashboard--logo{
  width: 38px;
  height: 40px;
}
.dashboard--logo svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dashboard--nav--main{
  margin-top: 40px;
}
.dashboard--nav--main ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard--nav--main ul li a{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.dashboard--nav--main ul li a.active{
  padding: 12px 0;
  position: relative;
  background: var(--fghjk, linear-gradient(270deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%));
}
.dashboard--nav--main ul li a.active::after{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background: #C39D42;
}
/* dashboard left end hare  */

.dashboard--main {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}

.dashboard--notification--name--header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column-reverse;
}

.dashboard--rank--navProfile {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}


.dashboard--notification--custom--svg {
  width: 45px;
  height: 45px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.dashboard--notification--custom--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--banner--wrapper{
  margin-top: 42px;
  width: 100%;
}
.dashboard--banner--item {
  padding: 15px 0px 29px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
}
.bannerMotivated--text {
  color: #FFF;
  font-family: var(--Domaine);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}




/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* image uploader */
.uploader-wrapper {
  text-align: center;
  width: 100%;
}

.uploader {
  border: 2px dashed #ffa726;
  border-radius: 10px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.uploader img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  display: none;
}

.uploader.active img {
  display: block;
}

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

.uploader .icon {
  margin-bottom: 10px;
}

.uploader p, .uploader span {
  margin: 5px 0;
}

.browse {
  font-size: 14px;
  color: #ffa726;
}

.uploader:hover {
  background-color: #444;
}
#message{
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
#separator{
  color: #6D6D6D;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.browse{
  padding: 8px 10px;
  width: 100%;
  border-radius: 50px;
  border: 1px solid #C39D42;
}
/* image Uploader */
.upload--btn{
  margin-top: 16px;
}
.upload--btn button{
  padding: 8px 0;
  width: 100%;
  background: var(--text-yellow);
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}



.Announcement--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement--notification--card--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.announcement--notification--card--item{
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}
.announcement--notification--headerss{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.announcement--notification--headerss--icon--texts{
  display: flex;
  gap: 8px;
  align-items: center;
}
.announcement--notification--headerss--icon{
  padding: 4px;
  background: rgba(22, 179, 100, 1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theVoting--texts--time{
  color: #DCDCDC;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}
.theVoting--texts{
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.announcement--notification--content{
  padding-left: 32px;
  margin-top: 10px;
}


/* owl custom */
.owl-dots {
  display: flex;
  gap: 10px;
  position: relative;
  left: 42%;
  top: -25px;
}
.owl-carousel button.owl-dot{
  width: 24px;
  height: 4px;
  border-radius: 20px;
  background: #707070;
}
.owl-carousel button.owl-dot.active{
  background: #fff;
}


.dashboard--photo--upload--gellary{
  margin-top: 50px;
}
.dashboard--photo--upload--gellaryss{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  width: 100%;
}
.dashboard--photo--upload--card {
  width: 75%;
}
.dashboard--photo--upload--heading{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--photo--upload--image{
  width: 100%;
  height: 320px;
  border-radius: 15px;
}
.dashboard--photo--upload--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.dashboard--photo--upload--text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}






/* ===========:: Dashboard Rank ::============== */
.dashboard--main.rank {
  width: 100%;
  padding: 20px;
  margin: 0 0 0 0%;
    height: 100vh;
}
/* .dashboard--left--nav.rank{
  position: relative;
} */
.count--down--time--wrapper.rank{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashBoard--rank--timer--wrapper{
  position: relative;
  left: 50%;
    top: 35%;
  transform: translate(-50%,-50%);
}
.dashboard--rank--navProfile{
  display: flex;
  gap: 62px;
  align-items: center;
}
.dashboard--rank--time--header{
  max-width: 1085px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard--rank--time--header p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.dashboard--time--start--in--wrapper{
  margin-top: 48px;
}
.dashboard--time--start--in--wrapper h5 {
  color: #C39D42;
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.dashborad--rank--voting--timeCountDown--wrapper{
  margin-top: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px 0;
  width: 100%;
  text-align: center;
}



.rank--countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  color: #FFF;
  font-size: 20px;
}

.rank--countdown-item {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 60px;
}

.rank--count {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: var(--Domaine);
}

.rank--label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: var(--text-yellow);
  font-family: var(--Domaine);
}

.rank--countdown-item:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 40px;
  background-color: var(--text-yellow);
  position: absolute;
  margin-left: 52px;
  margin-top: -45px;
  display: none;
}

/* LeaderBoard */
.dashborad--rank--leaderBoard--wrapper{
  margin-top: 40px;
}

.dashboard--leader--main--wrapper {
  margin-top: 60px;
}

.dashboard--leader--item--content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.dashboard--leader--item--content::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #465065;
  width: 100%;
  height: 1px;
}


.dashboard--leader--main--wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard--leader--item {
  padding: 55px 20px;
  border-radius: 8px;
  background: #212121;
  width: 45%;
  position: relative;
}
.dashboard--leader--item--ranking {
  padding: 6px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}
.dashboard--leader--item--ranking--inner{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visit--profile--btn{
  margin-top: 16px;
  text-align: center;
}
.visit--profile{
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  text-decoration: underline;
}


/* Leader Board */
.dashboard--main--ranking--leading--bord--wrappers {
  margin-top: 20px;
  padding: 8px 15px;
  border-radius: 8px;
  background: #212121;
}
.dashboard--main--ranking--leading--inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
}
.dashboard--main--ranking--leading--inner--heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 90px;
}
.Leadernumbers{
  min-width: 10%;
}
.LeaderNamess {
  min-width: 30%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 4px;
  overflow: hidden;
}
.whoIsPhoto {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
}
.whoIsPhoto img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.LeaderBeforeImg {
  min-width: 10%;
  text-align: center;
}
.LeaderBeforeImg--wrapper{
  width: 100%;
  height: 40px;
}
.LeaderBeforeImg--wrapper img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}


.LeaderNowImg{
  min-width: 10%;
  text-align: center;
}
.LeaderTotalVote{
  min-width: 20%;
  text-align: center;
}
.LeaderGiveIngVote{
  width: 20%;
  text-align: center;
}

.voteNowBtn{
  padding: 10px 0;
  width: 90px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all linear 0.3s;
}
.voteNowBtn:hover{
  background: var(--text-yellow);
}

/* ====== :: People Vote You Right Side Nav :: =========== */
.dashboard--people--vote--you--wrapper{
  margin-top: 20px;
}


.people--who--vote--you--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people--who--vote--you--item{
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prople--who--vote--nameImg--wrapper{
  display: flex;
  gap: 8px;
  align-items: center;
}
.people--who--vote--you--image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.people--who--vote--you--image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.people--who--vote--svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.people--who--vote--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likees.active{
  display: none;
}
.unlikees.active{
  display: none;
}
/* ====== :: People Vote You Right Side Nav :: =========== */



/* DASHBOARD SETTING START HARE */
.dashboard--setting--wrapper{
  margin-top: 42px;
  width: 100%;
  display: flex;
  gap: 80px;
}
/* .hello ul{
  display: flex;
} */
.skltbs-tab-group{
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}
.skltbs-tab-group::after {
  position: absolute;
  content: '';
  right: -40px;
  top: 0;
  height: 100%;
  max-height: 80vh;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 49.95%, rgba(255, 255, 255, 0.06) 50.05%);
}
.dashboard--setting--wrapper .skltbs-tab{
  padding: 16px;
  width: 100%;
  text-align: start;
  background: transparent;
  border-radius: 39px;
  background: transparent;
  border: none;
  color: #949494;
  font-family: "Wix Madefor Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
}

.dashboard--setting--wrapper .skltbs-tab.skltbs-active{
  color: #FFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 178.21%);
}
.skltbs-mode-tabs .skltbs-panel-group {
  position: relative;
  width: 100%;
}



.genarel--wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genaral--setting--main--wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.genaral--setting--main--wrapper form{
  width: 100%;
}
.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

.genaral--setting--profile--picture--ins{
  width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--notification--SubText{
  color: #A5A5A5;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.genaral--setting--update--wrapper{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Photo Uploader */
.image-uploader-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uploader-section {
  text-align: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border-radius: 44px;
  border: 1px solid #C39D42;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.upload-instruction {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.preview-section {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.nameChangeInputBox {
  width: 100%;
  padding: 0 25px;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 250px 0px rgba(0, 0, 0, 0.25);
  margin-top: 14px;
}

.nameChangeInputBox input{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
}
.save--change--btn{
  padding-top: 126px;
  display: flex;
  justify-content: end;
}
.save--change--btn button {
  width: 165px;
  padding: 12px 0;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
}
.skltbs-panel.skltbs-active{
  margin-top: 50px;
}
.skltbs-panel-heading{
  margin-top: 50px;
}

/* Photo Uploader */

/* DASHBOARD SETTING END HARE */

/* =============================================== Dashboard Page End Hare ================================== */




























  /* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */



















/* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10 {
  rotate: 6deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 45px 0 30px 18px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 200px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 250px;
  height: 240px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */



























/* =============================================== Index Page Start Hare ================================== */


/* Banner Start hare */
.banner--wrapper {
  padding: 170px 0 125px 0;
  background: url(../images/SignInPageBg.png) no-repeat;
}
.banner--heading{
  text-align: center;
}
.banner--heading p span{
  color: #C39D42;
  margin-top: 24px;
}
.banner--btn {
  margin-top: 52px;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* Banner End hare */



/* time section start hare */
.timeSection--wrapper {
  padding: 50px 0 52px 0;
  background: url(../images/TimeSectionBg.png) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.timeSection--freme--upper {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.timeSection--freme--upper img{
  height: 100%;
  width: 100%;
}
.timeSection--heading {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 32px;
}
.pageHeading.two{
  text-align: start;
}
.timeSectionSub.two {
  width: 100%;
}
.timeSection--heading p span{
  color: var(--text-yellow);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 27px;
}


.duration--Time--wrapper {
  margin-top: 24px;
  display: flex;
  gap: 43px;
  flex-wrap: wrap;
}

.duration--Time--item{
  padding-right: 43px;
  position: relative;
  width: fit-content;
}
.duration--Time--item:last-child::after{
  display: none;
}
.duration--Time--item::after{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  height: 80%;
  width: 1px;
  background: var(--text-white);
}
.duration--icon--wrapper{
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.duration--icon{
  width: 24px;
  height: 24px;
}
.duration--icon svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.count--down--time--wrapper {
  margin-top: 50px;
  display: flex;
  gap: 40;
  align-items: center;
}

.count--down--time--item--itemsss {
  padding-right: 10px;
  padding-left: 10px;
  position: relative;
  width: fit-content;
}
.count--down--time--item--itemsss::after{
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: 2px;
  background: var(--text-yellow);
}
.count--down--time--item--itemsss:last-child::after{
  display: none;
}
.count--down--time--item{
  padding: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20.5px);
  width: fit-content;
}
.learn--more--btn{
  margin-top: 56px;
}
/* time section End hare */


/* member with benifits section start hare */
.memberWith--benifits--wrapper{
  padding: 80px 0;
  background: #000000;
}
.member--with--benifits--main {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  display: none;
}
.member--with--benifits--item1 {
  width: 100%;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member--with--benifits--item1 h4{
  text-align: end;
}


.member--with--benifits--img {
  width: 240px;
  height: 240px;
}
.member--with--benifits--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* member with benifits section End hare */




/* Studios and luxury section Start hare */
.Studios--luxury--wrapper{
  padding-bottom: 140px;
}

.studio--luxury--main--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.studio--luxury--left--item{
  display: flex;
  flex-wrap: wrap;
}
.studio--luxury--left--item--img {
  width: 100%;
  height: 350px;
}
.studio--luxury--left--item--img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.studio--luxury--left--item--text{
  background-color: rgba(27, 27, 27, 1);
  width: fit-content;
}
.studio--luxury--left--item--Innertext {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.studio--luxury--left--item--img--two {
  width: 100%;
  height: 230px;
}
.studio--luxury--left--item--img--two img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Studios and luxury section End hare */





/* Join Now section Start hare */
.join--now--wrapper{
  padding-bottom: 145px;
}

.join--now--main--wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.join--now--main--left {
  min-width: 19.5%;
  display: none;
}
.join--now--main--right {
  width: 100%;
  height: 260px;
  position: relative;
}
.join--now--main--right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join--now--wrapperss {
  position: absolute;
  bottom: -30%;
  right: 25%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Join Now section End hare */



/* effort able section Start hare */
.effort--able--wrapper {
  padding-top: 70px;
  padding-bottom: 60px;
}
.affordable--heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.affordable--heading p span{
  color: var(--text-yellow);
}

.challangeName--wrapper {
  margin-top: 50px;
  padding: 35px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(39.5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.challangeName--item1 h4 span{
  color: #70798B;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.challangeName--item2 {
  display: flex;
  gap: 8px;
  align-items: start;
  flex-wrap: wrap;
}
.challangeName--Inner--item{
  display: flex;
  gap: 10px;
  align-items: center;
}
/*  effort able section End hare */


/*  Frequently Asked Questions section Start hare */
.frequently--asked--questions{
  padding-bottom: 150px;
}

.faq--wrapper{
  margin-top: 56px;
}

.accordion.custom{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.accordion-item.custom{
  border-radius: 14px;
  border: 2px solid rgba(23, 27, 36, 0.72);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.accordion-button.custom{
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  background: transparent;
  color: var(--text-white);
}

.accordion-button.custom::after {
  flex-shrink: 0;
  width: 51px; /* Match the width of your SVG */
  height: 51px; /* Match the height of your SVG */
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51' viewBox='0 0 51 51' fill='none'%3E%3Cg filter='url(%23filter0_b_41_302)'%3E%3Ccircle cx='25.6691' cy='25.3308' r='25.3309' transform='rotate(-180 25.6691 25.3308)' fill='white' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M33.9258 28.4404L25.6692 20.2212L17.4126 28.4404' stroke='%23F4DB0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_41_302' x='-299.662' y='-300' width='650.662' height='650.662' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='150'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_41_302'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_41_302' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain; /* Adjust as needed */
  transition: var(--bs-accordion-btn-icon-transition);
}
.accordion-body{
  max-width: 1152px;
}
/*  Frequently Asked Questions section End hare */


/* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 80.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */


/* =============================================== Index Page End Hare ================================== */





















  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 50px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: space-between;
  }
  .sign--in--content--wrapper {
    display: none;
  }
  .sign--in--content {
    max-width: 894px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 476px;
    height: 476px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 30px 30px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  /* =============================================== Sign In Page End Hare ================================== */

  /* =============================================== Sign Up Page Start Hare ================================== */

  .signUp--names--wrapper {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }
  .firstName--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.56);
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .firstName--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 300px;
  }
  /* =============================================== Sign Up Page End Hare ================================== */
}






/* extra small devices */
@media only screen and (min-width: 320px) and (max-width: 374px) {



  /* =============================================== profile Page Start Hare ================================== */

  .backBtn--main--svg {
    width: 35px;
    height: 35px;
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 8px;
    z-index: 111;
}

.backBtn--main--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.profile--cover-photo {
  width: 100%;
  height: 150px;
}
.profile--cover-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile--main--wrapper {
  padding: 0 40px;
  position: relative;
  top: -45px;
}


.profile--picture--main {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.profile--picture--main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile--name--email--wrapper{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard--photo--upload--card.viewOther {
  width: 100%;
}


/* notification */
.modal-header .btn-close {
	padding: 0;
	margin: 0;
  color: white;
}
.modal-header{
  border-bottom: none;
  display: flex;
  justify-content: end;
  align-items: end;
  text-align: end;
  color:  #FFF;
}
.modal-content{
  background: #212121;
}
.notification--header{
  padding-bottom: 10px;
}
.notification--wrapper{
  margin-top: 25px;
  height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notification--wrapper {
  /* Common styles */
  overflow: auto;

  /* For Firefox */
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #ccc transparent; /* Sets the track and thumb colors */
}

.notification--wrapper::-webkit-scrollbar {
  width: 3px; /* Sets scrollbar width for WebKit browsers */
}

.notification--wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Sets thumb color for WebKit browsers */
  border-radius: 10px; /* Optional: makes the thumb rounded */
}

.notification--wrapper::-webkit-scrollbar-track {
  background: transparent; /* Optional: sets track background */
}

.notification--item{
  padding: 20px 0;
  border-bottom: 1px solid #fff;
}

.notification--header--time--wrapper h3{
  color: #FFF;
  font-family: "Wix Madefor Text";
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.notification--header--time--wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification--header--time--wrapper p{
  color: var(--color-text-dont-edit-text-quarterary, #667085);
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}
.notification--item h4{
  overflow: hidden;
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 8px;
}

.btn:hover {
	color: var(--bs-btn-hover-color);
	background-color: transparent;
	border-color: var(--text-yellow);
}
.btn-primary{
  border-color: var(--text-yellow);
}
/* =============================================== Profile Page End Hare ================================== */



  /* =============================================== Dashboard Page Start Hare ================================== */
  /* opener closer */
  .btn--left--opener{
    display: flex;
  }
  .btn--right--opener{
    display: flex;
  }
  /* opener closer */
.dashboard--wrapper{
  width: 100%;
  display: flex;
}
.dashboard--left--nav {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--left--nav.active{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  left: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 32px 0 32px 32px;
  z-index: 1111;
}

.dashboard--header--main{
  display: flex;
  gap: 8px;
  align-items: center;
  display: none;
}
.dashboard--logo{
  width: 38px;
  height: 40px;
}
.dashboard--logo svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.dashboard--nav--main{
  margin-top: 40px;
}
.dashboard--nav--main ul{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard--nav--main ul li a{
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.dashboard--nav--main ul li a.active{
  padding: 12px 0;
  position: relative;
  background: var(--fghjk, linear-gradient(270deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 100%));
}
.dashboard--nav--main ul li a.active::after{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background: #C39D42;
}
/* dashboard left end hare  */

.dashboard--main {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}

.dashboard--notification--name--header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column-reverse;
}

.dashboard--rank--navProfile {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}


.dashboard--notification--custom--svg {
  width: 45px;
  height: 45px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.dashboard--notification--custom--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard--banner--wrapper{
  margin-top: 42px;
  width: 100%;
}
.dashboard--banner--item {
  padding: 15px 0px 29px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
}



/* dashboard right side */
.dashboard--right--nav{
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  padding: 32px 0 32px 32px;
  transition: all linear 0.3s;
}

.dashboard--right--nav.active {
  width: 70%;
  background: #212121;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0;
  transform: translateX(0%);
  padding: 15px 0 32px 0px;
  z-index: 1111;
}



.dashboard--right--nav--main {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dashboard--right--nav--main::-webkit-scrollbar{
  display: none;
}
.dashboard--right--nav--profile{
  padding: 5px 15px 5px 7px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.dashboard--right--nav--profile--photo {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.dashboard--right--nav--profile--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard--heading--textss{
  width: 100%;
}

.dashboard--daily--upload--wrapper{
  margin-top: 46px;
}
.dashboard--mobile--upoader {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radi-xl, 16px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0px 4px 50px 0px var(--shadow-op2, rgba(33, 33, 33, 0.08)), 0px 4px 6px 0px var(--shadow-op1, rgba(33, 33, 33, 0.04));
}
.dashboard--mobile--upoader--header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dashboard--Subtext{
  overflow: hidden;
  color: #6D6D6D;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
.cancel--btn--dashboard{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.cancel--btn--dashboard svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* image uploader */
.uploader-wrapper {
  text-align: center;
  width: 100%;
}

.uploader {
  border: 2px dashed #ffa726;
  border-radius: 10px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.uploader img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  display: none;
}

.uploader.active img {
  display: block;
}

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

.uploader .icon {
  margin-bottom: 10px;
}

.uploader p, .uploader span {
  margin: 5px 0;
}

.browse {
  font-size: 14px;
  color: #ffa726;
}

.uploader:hover {
  background-color: #444;
}
#message{
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height:  20px;
}
#separator{
  color: #6D6D6D;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.browse{
  padding: 8px 10px;
  width: 100%;
  border-radius: 50px;
  border: 1px solid #C39D42;
}
/* image Uploader */
.upload--btn{
  margin-top: 16px;
}
.upload--btn button{
  padding: 8px 0;
  width: 100%;
  background: var(--text-yellow);
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}



.Announcement--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement--notification--card--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.announcement--notification--card--item{
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}
.announcement--notification--headerss{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.announcement--notification--headerss--icon--texts{
  display: flex;
  gap: 8px;
  align-items: center;
}
.announcement--notification--headerss--icon{
  padding: 4px;
  background: rgba(22, 179, 100, 1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.theVoting--texts--time{
  color: #DCDCDC;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}
.theVoting--texts{
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.announcement--notification--content{
  padding-left: 32px;
  margin-top: 10px;
}


/* owl custom */
.owl-dots {
  display: flex;
  gap: 10px;
  position: relative;
  left: 42%;
  top: -25px;
}
.owl-carousel button.owl-dot{
  width: 24px;
  height: 4px;
  border-radius: 20px;
  background: #707070;
}
.owl-carousel button.owl-dot.active{
  background: #fff;
}


.dashboard--photo--upload--gellary{
  margin-top: 50px;
}
.dashboard--photo--upload--gellaryss{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  width: 100%;
}
.dashboard--photo--upload--card {
  width: 100%;
}
.dashboard--photo--upload--heading{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--photo--upload--image {
  width: 100%;
  height: 285px;
  border-radius: 15px;
}
.dashboard--photo--upload--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.dashboard--photo--upload--text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}






/* ===========:: Dashboard Rank ::============== */
.dashboard--main.rank {
  width: 100%;
  padding: 20px;
  margin: 0 0 0 0%;
    height: 100vh;
}
/* .dashboard--left--nav.rank{
  position: relative;
} */
.count--down--time--wrapper.rank{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashBoard--rank--timer--wrapper{
  position: relative;
  left: 50%;
  top: 35%;
  transform: translate(-50%,-50%);
}
.dashboard--rank--navProfile{
  display: flex;
  gap: 62px;
  align-items: center;
}
.dashboard--rank--time--header{
  max-width: 1085px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard--rank--time--header p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.dashboard--time--start--in--wrapper{
  margin-top: 48px;
}
.dashboard--time--start--in--wrapper h5 {
  color: #C39D42;
  text-align: center;
  font-family: var(--Domaine);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}


.dashborad--rank--voting--timeCountDown--wrapper{
  margin-top: 42px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px 0;
  width: 100%;
  text-align: center;
}



.rank--countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  color: #FFF;
  font-size: 20px;
}

.rank--countdown-item {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 60px;
}

.rank--count {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: var(--Domaine);
}

.rank--label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: var(--text-yellow);
  font-family: var(--Domaine);
}

.rank--countdown-item:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 40px;
  background-color: var(--text-yellow);
  position: absolute;
  margin-left: 52px;
  margin-top: -45px;
  display: none;
}

/* LeaderBoard */
.dashborad--rank--leaderBoard--wrapper{
  margin-top: 40px;
}

.dashboard--leader--main--wrapper {
  margin-top: 60px;
}

.dashboard--leader--item--content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.dashboard--leader--item--content::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-color: #465065;
  width: 100%;
  height: 1px;
}


.dashboard--leader--main--wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard--leader--item {
  padding: 55px 20px;
  border-radius: 8px;
  background: #212121;
  width: 45%;
  position: relative;
}
.dashboard--leader--item--ranking {
  padding: 6px;
  border-radius: 50%;
  background-color: #000000;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}
.dashboard--leader--item--ranking--inner{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visit--profile--btn{
  margin-top: 16px;
  text-align: center;
}
.visit--profile{
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  text-decoration: underline;
}


/* Leader Board */
.dashboard--main--ranking--leading--bord--wrappers {
  margin-top: 20px;
  padding: 8px 15px;
  border-radius: 8px;
  background: #212121;
}
.dashboard--main--ranking--leading--inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
}
.dashboard--main--ranking--leading--inner--heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 90px;
}
.Leadernumbers{
  min-width: 10%;
}
.LeaderNamess {
  min-width: 30%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 4px;
  overflow: hidden;
}
.whoIsPhoto {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
}
.whoIsPhoto img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.LeaderBeforeImg {
  min-width: 10%;
  text-align: center;
}
.LeaderBeforeImg--wrapper{
  width: 100%;
  height: 40px;
}
.LeaderBeforeImg--wrapper img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}


.LeaderNowImg{
  min-width: 10%;
  text-align: center;
}
.LeaderTotalVote{
  min-width: 20%;
  text-align: center;
}
.LeaderGiveIngVote{
  width: 20%;
  text-align: center;
}

.voteNowBtn{
  padding: 10px 0;
  width: 90px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #C39D42;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all linear 0.3s;
}
.voteNowBtn:hover{
  background: var(--text-yellow);
}

/* ====== :: People Vote You Right Side Nav :: =========== */
.dashboard--people--vote--you--wrapper{
  margin-top: 20px;
}


.people--who--vote--you--wrapper{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people--who--vote--you--item{
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prople--who--vote--nameImg--wrapper{
  display: flex;
  gap: 8px;
  align-items: center;
}
.people--who--vote--you--image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.people--who--vote--you--image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.people--who--vote--svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.people--who--vote--svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likees.active{
  display: none;
}
.unlikees.active{
  display: none;
}
/* ====== :: People Vote You Right Side Nav :: =========== */



/* DASHBOARD SETTING START HARE */
.dashboard--setting--wrapper{
  margin-top: 42px;
  width: 100%;
  display: flex;
  gap: 80px;
}
/* .hello ul{
  display: flex;
} */
.skltbs-tab-group{
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}
.skltbs-tab-group::after {
  position: absolute;
  content: '';
  right: -40px;
  top: 0;
  height: 100%;
  max-height: 80vh;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 49.95%, rgba(255, 255, 255, 0.06) 50.05%);
}
.dashboard--setting--wrapper .skltbs-tab{
  padding: 16px;
  width: 100%;
  text-align: start;
  background: transparent;
  border-radius: 39px;
  background: transparent;
  border: none;
  color: #949494;
  font-family: "Wix Madefor Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 16px;
}

.dashboard--setting--wrapper .skltbs-tab.skltbs-active{
  color: #FFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 178.21%);
}
.skltbs-mode-tabs .skltbs-panel-group {
  position: relative;
  width: 100%;
}



.genarel--wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genaral--setting--main--wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.genaral--setting--main--wrapper form{
  width: 100%;
}
.genaral--setting--instraction--wrapper {
  display: flex;
  flex-direction: column;
  gap: 44px;
  display: none;
}

.genaral--setting--profile--picture--ins{
  width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard--notification--SubText{
  color: #A5A5A5;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.genaral--setting--update--wrapper{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Photo Uploader */
.image-uploader-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uploader-section {
  text-align: center;
}

.upload-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border-radius: 44px;
  border: 1px solid #C39D42;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.upload-instruction {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.preview-section {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}

.nameChangeInputBox {
  width: 100%;
  padding: 0 25px;
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 250px 0px rgba(0, 0, 0, 0.25);
  margin-top: 14px;
}

.nameChangeInputBox input{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
}
.save--change--btn{
  padding-top: 126px;
  display: flex;
  justify-content: end;
}
.save--change--btn button {
  width: 165px;
  padding: 12px 0;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 50px;
  border: 1px solid #C39D42;
  background: #C39D42;
}
.skltbs-panel.skltbs-active{
  margin-top: 50px;
}
.skltbs-panel-heading{
  margin-top: 50px;
}

/* Photo Uploader */

/* DASHBOARD SETTING END HARE */

/* =============================================== Dashboard Page End Hare ================================== */
















  /* ============================
     Common Navbar Start Hare
    ==============================
  */

  .navbar--wrapper {
    padding: 36px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 11111;
  }
  .navbar--main--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar--logo {
    width: 24px;
    height: 65px;
  }
  .navbar--logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .navbar--item--wrapper {
    padding: 10px 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
    width: fit-content;
    display: none;
  }
  .navbar--item--wrapper ul {
    display: flex;
    gap: 57px;
    align-items: center;
  }
  .navbar--item--wrapper ul li a {
    padding: 12px 15px;
    color: #e2dddb;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all linear 0.3s;
  }
  .navbar--item--wrapper ul li a:hover {
    background-color: var(--text-yellow);
    color: #2c2b2a;
  }
  .navbar--item--wrapper ul li a:hover svg {
    fill: #2c2b2a;
  }
  .navbar--menu {
    padding: 0px 10px 0px 20px;
    width: fit-content;
    border-radius: 27px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .navbar--menu:hover {
    background: rgba(44, 43, 42, 0.35);
    backdrop-filter: blur(5px);
  }
  .menu--humburger--Icon {
    width: 20px;
    height: 20px;
  }
  .menu--humburger--Icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ============================
     Common Navbar End Hare
    ==============================
  */

  /* ===== :: Main Menu Start Hare :: ==== */
  .main--menu--wrapper {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }

  .main--menu--wrapper:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(27.5px);
    backdrop-filter: blur(27.5px);
    -webkit-transition: -webkit-clip-path 0.5s;
    transition: clip-path 0.5s;
    -o-transition: clip-path 0.5s;
    transition: clip-path 0.5s, -webkit-clip-path 0.5s;
    -webkit-clip-path: circle(0% at 100% 0);
    clip-path: circle(0% at 100% 0);
  }
  .main--menu--wrapper,
  .main--menu--wrapper:before {
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .main--menu--wrapper.show {
    visibility: visible;
    -webkit-transition: linear;
    -o-transition: linear;
    transition: linear;
    z-index: 2200000001;
  }
  .main--menu--wrapper.show:before {
    -webkit-transition: -webkit-clip-path 0.7s;
    transition: clip-path 0.7s;
    -o-transition: clip-path 0.7s;
    transition: clip-path 0.7s, -webkit-clip-path 0.7s;
    -webkit-clip-path: circle(141.4% at 100% 0);
    clip-path: circle(141.4% at 100% 0);
  }

  .main--menu--wrapper .main--menu--wrapper--inner {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: ease-in 0.2s;
  }

  .main--menu--wrapper .main--menu--wrapper--inner.show {
    visibility: visible;
    opacity: 1;
  }

  .main--menu--wrapper--top--header {
    padding: 35px 0px 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .close--btn {
    padding: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all linear 0.3s;
  }
  .close--btn:hover {
    background: var(--text-yellow);
    border: 1px solid #c39d42;
  }

  .main--menu--items--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main--menu--wrapper--items {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
  .main--menu--items ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .main--menu--items ul li a {
    transition: all linear 0.3s;
    position: relative;
  }
  .main--menu--items ul li a::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 40%;
    background-color: var(--text-yellow);
    bottom: -10px;
    left: 0;
    transition: all linear 0.3s;
  }
  .main--menu--items ul li a:hover {
    color: var(--text-yellow);
  }
  .main--menu--items ul li a:hover::after {
    width: 100%;
  }
  .nav--menu--textss {
    color: #f2f2f2;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
  }

  .main--menu--item--social--links ul {
    display: flex;
    column-gap: 48px;
    align-items: center;
  }
  .social--icon--linkdin {
    width: 24px;
    height: 24px;
  }
  .social--icon--linkdin svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nav--menu--textss.logOutBtn {
    background: transparent;
    border: none;
  }

  .ProfilePic--name {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.39px;
}
  /* ===== :: Main Menu End Hare :: ==== */

  /* ========================= common styles Start hare ========================= */

  .sign--in--heading--text {
    color: var(--text-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 64px;
  }
  .sign--in--pera--text {
    color: var(--text-bg-gradient);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--form--texts {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .email--address--texts {
    color: var(--text-bg-gradient);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
  .passDirectionText {
    color: var(--text-bg-gradient);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }

  .signIn--Btn {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 35px 10px 33px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: var(--text-yellow);
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .menuText {
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
  }

  .pageHeading {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}
.subHeading {
  color: var(--text-white);
  text-align: center;
  font-family: var(--Domaine);
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px;
}

.learn--moreBtn {
  width: fit-content;
  padding: 14px 64px;
  border-radius: 50px;
  border: 1px solid var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2dddb;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.register--Btn {
  width: fit-content;
  padding: 12px 50px;
  border-radius: 50px;
  border: 1px solid var(--text-yellow);
  background: var(--text-yellow);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

  .timeSectionSub {
    color: #e2dddb;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
}
.duration--text {
  color: var(--text-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.duration--time--headerss--italic {
  color: var(--text-yellow);
  font-family: var(--Domaine);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

  .duration--day--text--italic {
    color: #fff;
    font-family: var(--Domaine);
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}
.StudioAndLuxey--Texts {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}
.effortable--texts {
  color: #000;
  font-family: var(--Domaine);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1.92px;
  text-transform: uppercase;
}
.challangeTexts {
  color: var(--text-yellow);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
}
.challangeName--Inner--texts {
  color: #70798b;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
}
  .accordion--body--text {
    color: rgba(255, 255, 255, 0.8);
    font-feature-settings: "liga" off, "clig" off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .yellowText {
    color: var(--text-yellow);
  }
  .far--beyound--text {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    text-transform: uppercase;
  }
  .beyond--16pxText {
    color: var(--text-white);
    font-family: var(--Domaine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .card--texts {
    color: var(--text-white);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
}
  .get--inTouch--subHeader {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
  }
  .getInTouch--texts {
    color: #e9e9e9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .dashboard--text--main {
    color: var(--text-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
  .dashboard--text--email {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .daily--update--texts {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
  .seeAll--text {
    color: #c39d42;
    font-size: 14px;
    font-weight: 500;
  }
  .dashboard--notification--text {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
  .dashboard--notification--NameText {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}.dashboard--notification--NameText {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
  .dateUpload {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
  }
  .rank--currently--unavailable--text {
    color: var(--text-yellow);
    text-align: center;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
  .voting--open16px {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .giveYour--vote--yellow {
    color: #cfa43d;
    font-family: var(--Domaine);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .total--vote--text {
    color: #c39d42;
    font-family: var(--Domaine);
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.36px;
  }
  .sixteenPxYellowText {
    color: var(--text-yellow);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.08px;
  }
  .dateUploadName {
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
}
  .TotalVoteText {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.24px;
  }
  .peopleWhoVoteNameText {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
  }
  .ProfilePic--email {
    color: #5a5c5f;
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.144px;
}
  /* ========================= common styles End hare ========================= */









  /* =============================================== Contract Start Hare ================================== */
.getIn--touch--wrapper{
  padding: 195px 0;
}
.get--InTouch--inner--main {
  padding: 30px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 64px;
  align-items: center;
}
.get--in--touch--heeader{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.get--in--touch--form--wrapper{
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first--and--last--name--wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.first--name--wrapper{
  width: 100%;
}
.firstName--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.firstName--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.email--inputbox {
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.email--inputbox input{
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.sendMsg--inputbox {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 189, 0.00);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
}
.sendMsg--inputbox textarea{
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #C0C0C0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.agreee--checkbox label{
  display: flex;
  gap: 12px;
  align-items: center;
}
.get--InTouch--inner--right{
  display: none;
}
.get--in--touch--image{
  width: 830px;
  height: 750px;
}
.get--in--touch--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send--massage--btn{
  margin-top: 32px;
}
.send--massage--btn button {
  padding: 12px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #C39D42;
  background: #C39D42;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--White, #FFF);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* =============================================== Contract End Hare ================================== */























  /* ======================================== Challange Details Page Start Hare ========================= */



/* Challange Banner start hare */
.Challange--banner--wrapper {
  padding: 150px 0 90px 0;
  background: url(../images/challangeBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.subHeader--mainBox{
  max-width: 1005px;
  margin: 0 auto;
  padding-top: 24px;
}

/* Challange Banner End hare */


/* For Beyound Start hare */
.for--beyond--wrapper{
  padding-bottom: 128px;
}
.far--beyound--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0px;
}
.far--beyound--left{
  max-width: 448px;
}
.far--beyound--right{
  max-width: 630px;
}

.far--beyound--banner {
  padding: 40px 0px;
}
.far--beyound--banner--inner {
  padding: 50px 10px 50px 10px;
  background: url(../images/forBeyoundBanner.png) no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

.far--beyound--banner--item--wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.far--beyound--banner--item {
  padding: 17px 10px 17px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7.5px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


.far--beyound--banner--item--svg{
  width: 42px;
  height: 42px;
}
.far--beyound--banner--item--svg svg{
  width: 100%;
  height: 100%;
}
/* For Beyound End hare */



/* Bonuses Start hare */
.bonuses--wrapper {
  padding-bottom: 50px;
  background: url(../images/cardsBg.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.bonuses--inner--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.bonuses--item--card--wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0 15px;
}
.bonuses--item--card{
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(30.5px);
  width: 95%;
}
.bonuses--item--card.rotete--7{
  rotate: -7deg;
}
.bonuses--item--card.rotete5 {
  rotate: 5deg;
  margin-left: 20px;
}
.bonuses--item--card.rotate10{
  rotate: 10deg;
}
.bonuses--item--card.rotete7--custom {
  rotate: -7deg;
  margin-left: 10px;
}
.bonuses--item--card--heading {
  padding: 30px 0 20px 10px;
}
.bonuses--item--card--img {
  width: 100%;
  height: 126px;
}
.bonuses--item--card--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bonuses--item--fream {
  width: 210px;
  height: 160px;
}
.bonuses--item--fream img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Bonuses End hare */



/* ======================================== Challange Details Page End Hare =========================== */
















/* =============================================== Index Page Start Hare ================================== */


/* Banner Start hare */
.banner--wrapper {
  padding: 150px 0 200px 0;
  background: url(../images/SignInPageBg.png) no-repeat;
}
.banner--heading{
  text-align: center;
}
.banner--heading p span{
  color: #C39D42;
  margin-top: 24px;
}
.banner--btn {
  margin-top: 52px;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* Banner End hare */



/* time section start hare */
.timeSection--wrapper {
  padding: 50px 0 52px 0;
  background: url(../images/TimeSectionBg.png) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.timeSection--freme--upper {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.timeSection--freme--upper img{
  height: 100%;
  width: 100%;
}
.timeSection--heading {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 32px;
}
.pageHeading.two{
  text-align: start;
}
.timeSectionSub.two {
  width: 100%;
}
.timeSection--heading p span{
  color: var(--text-yellow);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 27px;
}


.duration--Time--wrapper {
  margin-top: 24px;
  display: flex;
  gap: 43px;
  flex-wrap: wrap;
}

.duration--Time--item{
  padding-right: 43px;
  position: relative;
  width: fit-content;
}
.duration--Time--item:last-child::after{
  display: none;
}
.duration--Time--item::after{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  height: 80%;
  width: 1px;
  background: var(--text-white);
}
.duration--icon--wrapper{
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.duration--icon{
  width: 24px;
  height: 24px;
}
.duration--icon svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.count--down--time--wrapper {
  margin-top: 50px;
  display: flex;
  gap: 40;
  align-items: center;
}

.count--down--time--item--itemsss {
  padding-right: 10px;
  padding-left: 10px;
  position: relative;
  width: fit-content;
}
.count--down--time--item--itemsss::after{
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: 2px;
  background: var(--text-yellow);
}
.count--down--time--item--itemsss:last-child::after{
  display: none;
}
.count--down--time--item{
  padding: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20.5px);
  width: fit-content;
}
.learn--more--btn{
  margin-top: 56px;
}
/* time section End hare */


/* member with benifits section start hare */
.memberWith--benifits--wrapper{
  padding: 80px 0;
  background: #000000;
}
.member--with--benifits--main {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  display: none;
}
.member--with--benifits--item1 {
  width: 650px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member--with--benifits--item1 h4{
  text-align: end;
}


.member--with--benifits--img {
  width: 80%;
  height: 120px;
}
.member--with--benifits--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* member with benifits section End hare */




/* Studios and luxury section Start hare */
.Studios--luxury--wrapper {
  padding-bottom: 80px;
}

.studio--luxury--main--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.studio--luxury--left--item{
  display: flex;
  flex-wrap: wrap;
}
.studio--luxury--left--item--img {
  width: 50%;
  height: 240px;
}
.studio--luxury--left--item--img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.studio--luxury--left--item--text{
  background-color: rgba(27, 27, 27, 1);
  width: fit-content;
}
.studio--luxury--left--item--Innertext {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.studio--luxury--left--item--img--two {
  width: 50%;
  height: 230px;
}
.studio--luxury--left--item--img--two img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio--luxury--right--item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
/* Studios and luxury section End hare */


/* Join Now section Start hare */
.join--now--wrapper{
  padding-bottom: 145px;
}

.join--now--main--wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.join--now--main--left {
  min-width: 19.5%;
  display: none;
}
.join--now--main--right {
  width: 100%;
  height: 260px;
  position: relative;
}
.join--now--main--right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join--now--wrapperss {
  position: absolute;
  bottom: -30%;
  right: 25%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--text-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Join Now section End hare */



/* effort able section Start hare */
.effort--able--wrapper {
  padding-top: 70px;
  padding-bottom: 60px;
}
.affordable--heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.affordable--heading p span{
  color: var(--text-yellow);
}

.challangeName--wrapper {
  margin-top: 50px;
  padding: 25px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(39.5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.challangeName--item1 h4 span{
  color: #70798B;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.challangeName--item2 {
  display: flex;
  gap: 8px;
  align-items: start;
  flex-wrap: wrap;
}
.challangeName--Inner--item{
  display: flex;
  gap: 10px;
  align-items: center;
}
/*  effort able section End hare */


/*  Frequently Asked Questions section Start hare */
.frequently--asked--questions {
  padding-bottom: 55px;
}

.faq--wrapper{
  margin-top: 56px;
}

.accordion.custom{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.accordion-item.custom{
  border-radius: 14px;
  border: 2px solid rgba(23, 27, 36, 0.72);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
}
.accordion-button.custom{
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  background: transparent;
  color: var(--text-white);
}

.accordion-button.custom::after {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51' viewBox='0 0 51 51' fill='none'%3E%3Cg filter='url(%23filter0_b_41_302)'%3E%3Ccircle cx='25.6691' cy='25.3308' r='25.3309' transform='rotate(-180 25.6691 25.3308)' fill='white' fill-opacity='0.05'/%3E%3C/g%3E%3Cpath d='M33.9258 28.4404L25.6692 20.2212L17.4126 28.4404' stroke='%23F4DB0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_41_302' x='-299.662' y='-300' width='650.662' height='650.662' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='150'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_41_302'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_41_302' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: var(--bs-accordion-btn-icon-transition);
}
.accordion-body{
  max-width: 1152px;
}
/*  Frequently Asked Questions section End hare */


/* Footer Section Start Hare */
.footer--menus ul {
  display: flex;
  gap: 50px;
  align-items: center;
}

.footer--main--text {
  color: #C39D42;
  font-size: 80.744px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
/* Footer Section End Hare */

/* =============================================== Index Page End Hare ================================== */




























  /* =============================================== Sig In Page Start Hare ================================== */
  .sign--in--wrapper {
    padding: 50px 15px;
    background: url(../images/SignInPageBg.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .sign--in--wrapper--main {
    display: flex;
    justify-content: space-between;
  }
  .sign--in--content--wrapper {
    display: none;
  }
  .sign--in--content {
    max-width: 894px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sign--in--content--freame {
    width: 476px;
    height: 476px;
    overflow: hidden;
    margin-top: 60px;
  }
  .sign--in--content--freame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sign--in--form {
    padding: 20px 16px;
    border-radius: 24px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px);
  }

  .signIn--inputBox--main {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .email--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--text-bg-gradient);
  }
  .email--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .passWord--hidden--Text--wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .passHidden--wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
  }
  .passHidden--wrapper span {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: 400;
  }
  .hideIcon--svg {
    width: 14px;
    height: 11px;
    display: none;
  }
  .hideIcon--svg svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkBox--wrapper {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .checkBox--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  .signIn--Btn--wrapper {
    margin-top: 25px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-direction: column;
  }
  .signIn--Btn--wrapper a span {
    color: var(--text-yellow);
    text-decoration: underline;
  }
  /* =============================================== Sign In Page End Hare ================================== */

  /* =============================================== Sign Up Page Start Hare ================================== */

  .signUp--names--wrapper {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }
  .firstName--inputBox--wrapper {
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.56);
  }
  .emai--input--box--text--wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .firstName--inputBox--wrapper input {
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    background: transparent;
    border: none;
    outline: none;
  }

  .signIn--Btn--wrapper.two {
    margin-top: 25px;
    min-width: 300px;
  }
  /* =============================================== Sign Up Page End Hare ================================== */
}