:root {
    --primary-color: #e72e77;
    --secondary-color: #b4245d;
    --heading-font: 'Dancing Script', cursive;
  }


  .top-header-text li {
      color: #fff;
      font-size: 16px;
      margin-right: 16px;
      display: inline-block;
  }


  .logo img {
        width: 200px;
    }
  @media (min-width: 1200px){
      .container, .container-lg, .container-md, .container-sm, .container-xl {
          max-width: 1300px;
      }
  }
  body{
        background-image: url('../media/announcement-bg.png');
        background-repeat: repeat;
        background-size: contain;
        background-position: center;
  }
  .top-header {
      background-color: var(--primary-color);
      border-top: solid var(--secondary-color);
      box-shadow: 0px 0px 20px -10px;
      padding: 5px 0px 7px;
  }
  .top-header-text li svg {
      width: 20px;
      margin-right: 5px;
      margin-top: -3px;
  }
  .top-header-icons {
      text-align: right;
  }
  .top-header-icons a {
      display: inline-block;
      color: var(--primary-color);
      margin-left: 8px;
      width: 25px;
      height: 25px;
      background-color: #fff;
      text-align: center;
      border-radius: 3px;
      padding-top: 2px;
  }


  .header-navigation li {
      list-style: none;
      text-decoration: none;
  }
  .header-navigation a::after {
      content: '';
      position: absolute;
      background-color: var(--primary-color);
      height: 2px;
      width: 0px;
      bottom: 0;
      left: 0;
      transition: all ease .5s;
      right: 0;
      margin: auto;
  }
  .header-navigation a:hover::after, .header-navigation a.active::after {
      width: 100%;
      transition: all ease .5s;
  }
  .header-navigation a {
      padding: 0px 0px 0px;
      display: block;
      position: relative;
      text-decoration: none !important;
      color: #000000e0;
      margin-left: 26px;
  }
  .header-navigation {
      text-align: right;
  }
  .header-navigation li {
      display: inline-block;
      padding: 15px 0px;
  }
  .main-header .row {
      align-items: center;
  }
  .site-button {padding: 8px 40px !important;background-color: var(--primary-color);color: #fff !important;display: inline-block;border-radius: 50px;font-size: 18px;position: relative;z-index: 1;transition: 0.5s;border: solid 1px var(--primary-color);box-shadow: 0px 0px 20px -10px #000;}
  .header-navigation a:hover, .header-navigation a.active {
      color: var(--primary-color);
  }
  .site-button:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      top: 0;
      bottom: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: var(--secondary-color);
      z-index: -1;
      opacity: 0;
      transition: 0.3s;
  }
  .site-button:hover:before, a.site-button.active:before {
      width: 100%;
      height: 100%;
      opacity: 1;
      border-radius: 50px;
  }
  .site-button:after {
      display: none;
  }
  .site-button:hover, a.site-button.active {
      color: #fff;
      background-color: #ffffff;
      border-color: var(--secondary-color);
  }




   body.register {
      padding: 50px 0px;
      position: relative;
      overflow-x:hidden;
      background-color: #e72e7712;
  }
  .register-box-text {
      padding: 50px 100px;
      text-align: center;
      background-image: url(https://cdn0.weddingwire.in/article/1574/3_2/960/jpg/104751-destination-wedding-cost-lead.jpeg);
      position: relative;
      border-radius: 10px;
      box-shadow: inset 0px 0px 0px 600px #e72e7770;
      height: 100vh !important;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .register-box-text h1 {
      color: #fff;
      font-size: 45px;
      margin-bottom: 20px;
  }
  .register-box-text p {
      color: #fff;
      font-size: 18px;
      line-height: 30px;
  }
  .register-icons a {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: #fff;
      text-align: center;
      font-size: 22px;
      border-radius: 50%;
      margin: 13px 7px;
      padding-top: 3px;
      color: var(--primary-color);
  }
  a {
      text-decoration: none !important;
  }
  .register-box-text a.site-button {
      margin-top: 30px;
      background-color: var(--secondary-color);
      border: none !important;
      width: 80%;
      padding: 14px 0px !important;
      font-size: 20px;
  }
  .register-box-text a.site-button:before {
      background-color: var(--primary-color);
  }
  .register-box-form {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    left: 25px;
    z-index: 9;
    padding: 21px;
    box-shadow: 0px 0px 14px -10px;
}
  .social-login {
        padding-top: 25px;
        text-align: center;
    }
    .social-login p {
        color: #0000007d;
        font-style: italic;
        position: relative;
    }
    .social-login p:before, .social-login p:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        margin: auto;
        bottom: 0;
        width: 40%;
        height: 1px;
        background-color: #0000002b;
    }
    .social-login p:after {
        left: auto;
        right: 0;
    }
    .social-login a {
        color: #fff;
        width: 100%;
        display: flex;
        border-radius: 50px;
        box-shadow: 0px 0px 20px -10px #000;
        background-color: #ea4335;
        font-size: 17px;
        padding: 10px;
        margin: 13px 4px;
        justify-content: center;
        align-items: center;
    }
    .social-login img {
        width: 100%;
        height: 100%;
    }
    a.fb {
        background-color: #0b84ee;
    }
    .social-login a i {
        font-size: 21px;
        padding-right: 10px;
    }
  section.register-login .col-md-5, section.register-login .col-md-7 {
      padding: 0px;
  }
  .register-box-form h4 {
      color: #000;
      font-size: 25px;
      position: relative;
      text-align: center;
  }
  .input input,.input select {
      width: 100%;
      padding: 10px;
      outline: none;
      border: solid 1px #00000021;
      border-radius: 2px;
  }
  .input input:focus {
      border-color: var(--primary-color);
  }
  .input label {
      font-size: 13px;
      color: #000000ba;
      font-weight: 600;
      position: absolute;
      left: 7px;
      margin-top: 11px;
      transition: 0.3s;
      background-color: #fff;
      padding: 0px 10px;
  }

  .input {
      margin-top: 20px;
      position: relative;
  }
  .input-flex {
      display: flex;
      column-gap: 20px;
      flex-wrap: wrap;
  }
  .input-flex .input {
      width: 47%;
      position: relative;
  }
  .input input:focus+label {
      margin-top: -11px;
  }
  body.register:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 120px;
      height: 120px;
      background-color: var(--primary-color);
      border-radius: 0px 0px 100% 0px;
      animation: body 6s linear infinite;
  }
  body.register:after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 120px;
      height: 120px;
      background-color: var(--primary-color);
      border-radius: 100% 0px 0px 0px;
      animation: body 4s linear infinite;
  }
  .input.gender label {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 32px;
      padding: 0px;
      left: 0;
      margin-right: 10px;
      margin-top: 0px;
  }
  .input.gender label span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      color: var(--secondary-color);
      text-align: center;
      padding-top: 7px;
      border-radius: 3px;
      cursor: pointer;
      border: solid 1px var(--secondary-color);
      transition: 0.5s;
  }
  .input.gender label input:checked+span {background-color: var(--primary-color);color: #fff;}
  label.unset-position {
      position: unset !important;
      left: 0 !important;
      padding: 0px !important;
      display: block !important;
      height: auto !important;
      margin: 0px 0px 8px !important;
  }
  .input.gender input {
        opacity: 0;
    }
  .site-button i {
      margin-left: 10px;
  }
  section.register-login .row {
      align-items: center;
  }
  .register-box-form h4:after, .register-box-form h4:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 2px;
    background-color: var(--secondary-color);
    bottom: 0;
    margin: auto;
}
  .register-box-form h4:after {right: 0;left: auto;}
  .form-header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 36px;
      padding-bottom: 20px;
  }
  .steps {
      padding: 37px 40px 0px;
      font-size: 18px;
      position: relative;
      counter-increment: count-step;
      cursor: pointer;
  }
  .steps:after {
      content: counter(count-step);
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 30px;
      height: 30px;
      top: 0;
      background-color: var(--secondary-color);
      color: #fff;
      text-align: center;
      border-radius: 50%;
  }
  .steps:before {
      content: "";
      position: absolute;
      left: 95px;
      width: 100%;
      height: 1px;
      background-color: var(--secondary-color);
      top: 14px;
  }
  .form-header .steps:nth-child(2):before {
      display: none;
  }
  .input-flex.btn-flex .input {
      width: fit-content;
  }
  .steps-content {
      display: none;
  }
  span.error {
        font-size: 14px;
        margin-top: 7px;
        display: block;
    }
  div#basic {
      display: block;
  }
  .loginBtn {
    box-sizing: border-box;
    position: relative;
    /* width: 13em;  - apply for fixed size */
    margin: 0.2em;
    padding: 11px 10px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #fff;
    display: block;
    width: 80%;
    margin: 35px auto;
  }
  .loginBtn:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 100%;
  }
  .loginBtn--google {
    /*font-family: "Roboto", Roboto, arial, sans-serif;*/
    background: var(--primary-color);
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    font-size: 20px;
  }
  .loginBtn--google:before {
    border-right: #bb3f30 1px solid;
    background: url(https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-512.png);
    background-size: contain;
    background-color: #fff;
  }
  .register-box-text h4 {
      color: #fff;
      font-style: italic;
      position: relative;
      margin: 50px 0px 20px !important;
  }
  .register-box-text h4:after, .register-box-text h4:before {
      content: "";
      position: absolute;
      right: 10%;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 30%;
      height: 1px;
      background-color: #fff;
  }
  .register-box-text h4:before {
      right: auto;
      left: 10%;
  }
  body.register.login {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(https://cdn0.weddingwire.in/article/1574/3_2/960/jpg/104751-destination-wedding-cost-lead.jpeg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
  }
  body.register.login main {
      width: 100%;
  }
  body.register.login:after, body.register.login:before {
      display: none;
  }
  div#login label {
      font-size: 18px;
      position: unset !important;
  }
  p.rember a {
      float: right;
      color: var(--secondary-color);
  }
  p.rember {
      margin-top: 20px;
      font-size: 17px;
  }
  div#login button.site-button {
      display: block;
      width: 100%;
  }
  div#login h4 {padding-bottom: 15px;}

  div#login h4:before {
      display: none;
  }
  body.register.login:after {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      border-radius: 0px;
      background-color: #000;
  }
  div#login h4:after {
      bottom: 0;
      top: auto;
      left: 0;
  }

  .select2-selection {height: fit-content !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 5px 10px;
}
span.select2-selection__arrow {
    padding: 38px 0px 0px 30px !important;
}
input.select2-search__field {
    outline: none !important;
}
.select2-container--default .select2-selection--single {
    border-radius: 2px !important;
    border-color: #00000021 !important;
}
.select2 {
    width: 100% !important;
}


  /* profile page css */
  section.profile-banner {
      padding-top: 50px;
      background-color: #0000;
  }

  .container.profile-cover img {
      width: 100%;
      border-radius: 10px;
  }
  .container.profile-cover:after {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--primary-color);
      border-radius: 10px;
      opacity: 0.3;
      top: 0;
  }
  .profile-pic label.edit-profile-pic {
      right: 0;
      bottom: 20px;
      top: auto;
  }
  .profile-pic img {
      width: 100%;
      border-radius: 50%;
      box-shadow: 0px 0px 14px -10px;
      height: inherit;
  }
  .profile-about {
      background-color: #fff;
      box-shadow: 0px 0px 16px -14px;
      padding: 20px 10px;
      border-radius: 5px;
      position: sticky;
      top: 100px;
  }
  .profile-pic {
      width: 200px;
      margin: auto;
      height: 200px;
      border-radius: 50%;
      position: relative;
  }
  section.profile-main .container {
      padding: 0px 60px;
  }
  label.edit-profile-pic {
      position: absolute;
      top: 30px;
      right: 58px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      background-color: var(--primary-color);
      color: #fff;
      opacity: 0.9;
      padding-top: 11px;
      cursor: pointer;
      animation: grow 4s linear infinite;
  }
  .profile-pic input {
      position: absolute;
      top: 0;
      opacity: 0;
  }
  .profile-nav {
      border-top: dashed 1px #ff000036;
      margin-top: 50px;
      padding-top: 20px;
  }
  .profile-nav li {
      display: block;
  }
  .profile-nav a {
      display: block;
      padding: 8px 25px !important;
      margin-bottom: 14px;
      border-radius: 50px;
  }
  .profile-nav a i {
      float: right;
      margin-top: 5px;
  }
  .profile-content {
      box-shadow: 0px 0px 16px -14px;
      padding: 20px;
      margin-top: 50px;
      background-color: #fff;
  }
  .profile-content h4 {
      color: #000;
      font-size: 25px;
      border-left: solid 4px var(--primary-color);
      padding-left: 20px;
      line-height: 26px;
      margin-bottom: 25px;
      border-bottom: dashed 1px var(--primary-color);
      padding-bottom: 14px;
  }
  .row.user-basic {
      width: 96%;
      margin-left: 31px;
  }
  .user-info {
      background-color: #ffffffbd;
      padding: 10px 20px;
      margin: 33px 0px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      column-gap: 16px;
      flex-wrap: wrap;
  }
  .user-info i {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      color: var(--secondary-color);
      transition: 0.3s;
      position: relative;
      border-radius: 50%;
  }
  .onfo-txt {
      padding-top: 14px;
      width: 65%;
  }
  .user-info:hover > i {
      background-color: var(--secondary-color);
      color: #fff;
  }
  form#prfile-cover {
      position: absolute;
      top: 0;
      right: 0;
  }
  form#prfile-cover input {
      opacity: 0;
  }
  li.auth-has span img {
    width: 25px;
    border-radius: 50%;
    box-shadow: 0px 0px 6px -4px;
    margin-right: 4px;
}
li.auth-has {
    padding-left: 30px;
    position: relative;
}
li.auth-has span {color: #000;cursor: pointer;}
ul.child {
    position: absolute;
    right: 0;
    width: 200px;
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 17px -10px;
    padding: 0px;
    margin-top: 16px;
    transition: 0.3s;
    transform: scale(1,0);
    transform-origin: top;
}
ul.child li {
    display: block;
    padding: 0px;
    margin: 0px !important;
}
ul.child li a {
    padding: 9px 10px !important;
    margin-left: 0px;
    color: #000000ab;
}
ul.child li a:after {
    display: none;
}
ul.child:after {
    content: "";
    position: absolute;
    top: -14px;
    right: 20px;
    border-top: solid 10px #e72e7700;
    border-bottom: solid 10px #0000;
    border-right: solid 10px #ffffff;
    transform: rotate(90deg);
}
.header-navigation li:hover > ul {
    transform: scale(1.1);
}
.profile-main label {
    font-size: 15px;
}
.profile-overview h2 {
    font-size: 22px;
}
.basic-detail span {
    word-wrap: break-word;
    font-size: 16px;
    color: #000000a8;
}
.basic-detail b {
    display: block;
    color: var(--secondary-color);
    font-size: 18px;
}
.basic-detail {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    margin-top: 20px;
    border-top: dashed 1px var(--primary-color);
    padding-top: 20px;
}
.basic-detail p {
    width: 30%;
}
.profile-content h4 .site-button {
    float: right;
    font-size: 15px;
    padding: 3px 10px 0px !important;
    margin-top: -5px;
}
.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    bottom: 30px;
    margin: auto;
    height: fit-content;
}
button.btn-close {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #fff;
    opacity: 1 !important;
    box-shadow: 0px 0px 20px -10px red;
    cursor: pointer;
}
.btn-close {
    background-size: 25%;
}
.profile-content .modal-header {
    display: block;
    border: none;
}
.profile-content .modal-header h4 {
    padding-bottom: 9px;
    margin-bottom: 0px;
}
.modal {
    background-color: #000000b3;
}
td.action {
    display: flex;
    column-gap: 10px;
}
.btn.action_btn {
    padding: 4px 7px 1px;
}
select#salary_currency {
    position: absolute;
    right: 0;
    width: 80px;
    height: 46px;
}
.languages_flex label {
    position: relative;
    margin: 0px;
    width: 40px;
    height: 20px;
    cursor: pointer;
}
.languages_flex {
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;
}
.languages_flex b {
    display: block;
    width: 100px;
}
.input h6 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #000000bf;
}
.languages_flex span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #e72e77;
    border-radius: 50px;
    transition: 0.3s;
}
.languages_flex label span:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 50%;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
}
.languages_flex input:checked + span {
    background-color: green;
}
.languages_flex input:checked + span:after {
    left: 22px;
}
.languages_flex input {
    transition: 0.3s;
}
.multi-images-upload label {
    display: block;
    border: dashed 2px #00000021;
    padding: 20px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 60px;
    color: var(--primary-color);
    cursor: pointer;
}
.multi-images-upload input {
    display: none;
}
span.upload_image {
    width: 95px;
    display: inline-block;
    position: relative;
    margin: 20px 10px 0px;
}
span.upload_image img {
    width: 100%;
    border-radius: 5px;
}
span.upload_image i {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: red;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    padding-top: 3px;
    border-radius: 50%;
    opacity: 0;
}
span.upload_image:hover.upload_image i {
    opacity: 1;
}
.empty-record {
    background-color: #e72e7721;
    padding: 12px 22px;
    border-radius: 2px;
    font-size: 18px;
    border-right: solid var(--primary-color);
    color: #0009;
}
.image {
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    transition: 0.5s;
}
.user_image {position: relative;margin: 10px 0px;}
.gallery_option {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    width: 92%;
    align-items: center;
    height: 100%;
    transition: 0.5s;
    background-color: #00000094;
    left: 12px;
    border-radius: 5px;
    column-gap: 10px;
    opacity: 0;
}
.gallery_option a, .gallery_option button {
    background-color: #fff;
    display: flex;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: var(--primary-color);
    transition: 0.5s;
}
.user_image:hover .gallery_option {
    opacity: 1;
}
.gallery_option a:hover, .gallery_option button:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.text-center.public_view_btn {
    padding-top: 20px;
}


/* member public profile css */
section.member-profile-banner {
    background: linear-gradient(225deg, rgba(253,44,121,1) 0%, rgba(253,101,91,1) 100%);
    height: 300px;
    display: flex;
    align-items: center;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0px 0px 0px 600px rgb(253 44 121 / 38%);
}
section.member-profile-main .col-md-3.order-1.order-xl-0 {
    margin-top: -230px;
}
.member_basic {
    padding: 15px;
    /* text-align: center; */
}
.member_basic h4 {
    font-size: 30px;
    margin: 15px 0px;
    color: var(--primary-color);
}
.member_basic p {
    margin: 0px 0px 0px;
    padding: 10px 0px;
    color: #000000b5;
}
.member_basic p i {
    color: var(--primary-color);
    transition: 0.5s;
}
.aiz-profile-sidebar {
    position: sticky;
    top: 60px;
}
.member-details {
    padding-left: 50px;
}
.profile-accordion {
    padding-top: 40px;
    position: relative;
}
.accordion-header {
    display: flex;
    align-items: center;
    column-gap: 20px;
    cursor: pointer;
}
.accordion-header h4 {
    margin: 0px;
    font-size: 24px;
    color: #000000c4;
}
.accordion-header i {
    display: grid;
    width: 50px;
    height: 50px;
    border: solid 1px #0000001c;
    border-radius: 50%;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    color: #000000c4;
    background-color: #fff;
}
.accordion-body {
    padding-left: 72px;
}
.active .accordion-header h4 {
    color: var(--primary-color);
}
.active .accordion-header i {
    background-color: var(--primary-color);
    color: #fff;
}
.profile-accordion:before {
    content: "";
    position: absolute;
    left: 24px;
    top: 60px;
    border-left: dashed 1px #0000003b;
    height: 100%;
    z-index: -1;
}
.member-details .profile-accordion:nth-last-child(1):before {
    display: none;
}

.member_tab {
    position: absolute;
    left: 32px;
    bottom: -67px;
}
section.member-profile-banner .col-xl-8.offset-md-4 {
    position: relative;
}
.member_tab a {color: #fff !important;background-color: #ffffff1c;border-radius: 0px !important;}
.member_tab a.active {
    border-radius: 0px;
    color: #fff !important;
    background-color: var(--primary-color) !important;
}
div#member_gallery {
    padding-top: 30px;
}
.info-box {
    margin-top: 0px;
    box-shadow: 0px 0px 11px -10px;
    padding: 10px 10px 0px;
}
.full-width {
    display: block;
    padding: 20px 20px 10px;
}
.full-width p {
    width: 100%;
}
.basic-detail.two p {
    width: 47%;
}
a#profile_public {
    position: absolute;
    left: -38px;
    top: 30px;
    background-color: #07b8079c;
    color: #fff;
    width: 170px;
    text-align: center;
    transform: rotate(-45deg);
    font-size: 14px;
    padding: 6px 0px;
}
.matches-filter {
    background-color: #fff;
    padding: 16px;
}
.best-matches {
    background-color: #fff;
    box-shadow: 0px 0px 16px -14px;
    margin-top: 50px;
}
.matches-filter button {
    display: inline-block;
    border: solid  1px var(--secondary-color);
    padding: 5px 20px 3px;
    border-radius: 50px;
    margin-right: 10px;
    transition: 0.5s;
    color: var(--secondary-color);
    background: none;
}
.matches-filter button:hover, .matches-filter button.active {
    background-color: var(--secondary-color);
    color: #fff;
}
.matches-head-text {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 86%;
    bottom: 0;
}
.matches-head-text span {
    color: #fff;
    font-size: 20px;
    text-shadow: 0px 0px 5px #0000005c;
}
.matches-head-text h4 {
    color: #fff;
    font-size: 32px;
    text-shadow: 0px 0px 5px #0000005c;
}
.matches-head-text p {
    color: #fff;
    font-size: 20px;
}
.head-tab a {
    color: #fff;
    display: inline-block;
    padding: 10px 10px;
    border-bottom: solid #0000;
}
.head-tab a.active {
    border-color: var(--primary-color);
}
.head-tab {
    margin-top: 30px;
}
.matches-body {
    padding: 0px 16px 25px;
}
div#matches-basic-info p {
    color: #0009;
}
.match-user-img img {
    width: 50px;
    border-radius: 50%;
    box-shadow: 0px 0px 15px -10px;
    background-color: #fff;
    height: 50px;
}
.match-user-img img:nth-child(2) {
    position: relative;
    left: -17px;
}
div#match-total {
    display: flex;
    column-gap: 0px;
    background-color: #fff4f6;
    align-items: center;
    padding: 12px 20px;
    border-radius: 5px;
}
.match-user-txt p {
    margin: 0px;
    color: #000000a1;
}
div#match-total h5 {
    margin-bottom: 0px;
}
.match-user-img i {
    position: absolute;
    left: 33px;
    bottom: 0;
    background-color: #07b807;
    color: #fff;
    font-size: 13px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
}
.match-user-img {
    position: relative;
}
.matche-body-box {
    margin-top: 40px;
}
.message-btn {
    background-color: #fff;
    border: none;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none !important;
}
.chat-head {
    display: flex;
    column-gap: 20px;
    align-items: center;
}
.chat-img {
    width: 50px;
    height: 50px;
}
.chat-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.user-chat-popup .modal-header {
    padding: 12px 20px;
    border: none;
}
.chat-head h4 {
    font-size: 20px;
    margin-bottom: 2px;
}
.chat-head p {
    font-size: 12px;
    color: #0000009c;
    margin-bottom: 0px;
}
.user-chat-popup .modal-body {
    height: 550px;
    overflow: auto;
    box-shadow: inset 0px 0px 0px 500px #0000002e;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}
.chat-footer {
    padding: 20px;
}
.chat-footer form {
    display: flex;
    position: relative;
}
.chat-footer input {
    width: 100%;
    border: solid 1px #0000002b;
    border-radius: 50px;
    padding: 10px;
    outline: none;
}
.chat-footer button {
    position: absolute;
    right: 0;
    border: solid 1px var(--primary-color);
    height: 100%;
    background-color: var(--primary-color);
    color: #fff;
    padding: 0px 25px;
    border-radius: 50px;
}
.right-message {
    text-align: right;
}
.chat_message p {
    background-color: #fff;
    padding: 6px 20px;
    width: fit-content;
    font-size: 14px;
    border-radius: 50px;
    color: #000000c9;
}
.right-message p {
    float: right;
}
.chat_message {
    display: grid;
    padding: 10px 0px;
}
.header-flex {
    width: 100%;
    display: flex;
}
.chatheadtxt {
    width: 76%;
}
.chat-call {
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.chat-call a {
    font-size: 20px;
    color: var(--primary-color);
}
.chat-call {
    width: 24%;
    justify-content: end;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 50px;
}
.user-message {
    position: absolute;
    right: 20px;
    top: 20px;
}
.user-message button {
    background-color: #07b807 !important;
    color: #fff !important;
    border-color: #07b807 !important;
    padding: 6px 15px 5px !important;
    font-size: 13px;
}
.user-message button:before {
    display: none !important;
}
button.site-button.send_request i {
    margin: 0px;
}
.user-message .cancel_request {
    background-color: #ff4b00 !important;
    border-color: #ff4b00 !important;
}
.accept-reject span {
    color: #fff;
    font-size: 11px;
    display: inline-block;
    padding: 5px 15px 2px;
    background-color: #07b807;
    border-radius: 50px;
    cursor: pointer;
}
span.reject_req {
    background-color: red;
}
.accept-reject p {
    color: #fff;
    margin-bottom: 10px;
    font-size: 13px;
    border-radius: 50px;
    text-shadow: 0px 0px 20px #000;
}

.premium-sidebar {
    background-color: #fff;
    box-shadow: 0px 0px 16px -14px;
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    position: sticky;
    top: 100px;
}
.premium-sidebar h4 {
    font-size: 19px;
    color: #000000cf;
}
.premium-sidebar h4 span {
    color: var(--secondary-color);
}
.premium-sidebar-box {
    padding: 20px 30px;
}
.premium-sidebar-box i {
    width: 60px;
    height: 60px;
    background-color: #e72e7717;
    border-radius: 50%;
    color: #e72e7742;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 30px;
}
.premium-sidebar-box p {
    margin: 10px 0px 0px;
    font-size: 16px;
    color: #0000009e;
}
.premium-sidebar-btn {
    border-top: dashed 1px var(--primary-color);
    padding-top: 18px;
    margin-top: 20px;
}
.premium-sidebar-btn p {
    font-size: 18px;
    color: var(--secondary-color);
}
.input textarea {
    outline: none;
    border: solid 1px #00000021;
    border-radius: 2px;
    width: 100%;
    height: 200px;
    padding: 10px;
}
div#best_matches button.carousel-control-prev, div#best_matches button.carousel-control-next {
    height: 50px;
    width: 50px;
    top: 23%;
}
.matche-body-box h4 {
    font-size: 26px;
}
div#edu-info p {
    font-size: 20px;
    color: #000000a6;
}
div#edu-info i {
    margin-right: 10px;
}
div#match_by_ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 60px;
}
.her_pref, .you_match {
    width: 25%;
}
.match_result {
    width: 50%;
    position: relative;
}
div#match_by_ref img {
    width: 80px;
    border-radius: 50%;
    height: 80px;
}
.match_result p {
    width: 72%;
    margin: auto;
    background-color: #f6f7fa;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
}
.you_match {
    text-align: right;
}
.match_result:before, .match_result:after {
    content: "";
    position: absolute;
    left: -40px;
    width: 60px;
    height: 2px;
    background-color: #e72e77;
    margin: auto;
    bottom: 0;
    top: 0;
}
.match_result:after {
    left: auto;
    right: -40px;
}
.matching_table p {
    border-bottom: solid 1px #0000001f;
    padding: 13px 0px;
    color: #0000009e;
    font-size: 17px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0px;
}
.matching_table p b {
    display: block;
    color: #000;
}
.matching_table p i {
    text-align: right;
    width: 20%;
    font-size: 18px;
    color: #ff0000f2;
}
.matching_table span {
    display: block;
    width: 80%;
}
.matching_table p i.fa-check {
    color: #07b807;
}
.matching_table {
    padding: 0px 10px;
}
.match-btn {
    text-align: center;
    margin-top: 30px;
}
.user-chat-popup .modal-dialog {
    position: unset;
    width: 100% !important;
}

.filter_tabs {
    display: flex;
}
.filter_tabs ul {
    display: block;
    width: 30%;
    background-color: #0000000d;
}
.filter-fields {
    width: 70%;
    padding: 12px 20px;
}
.filter_fields .container {
    padding: 0px !important;
}
.filter_tabs li a {
    padding: 10px;
    color: #000000d4;
    border-radius: 0px !important;
}
div#filter .modal-body {
    padding: 0px;
    overflow: hidden;
    border-radius: 0px 0px 0px 10px;
}
.filter_tabs .nav-pills .nav-link.active {
    background-color: #fff;
    color: var(--primary-color);
}
.filter_tabs ul a:hover {
    color: var(--primary-color);
}
.filter_fields {
    margin-bottom: 10px;
}
.filter_fields label {
    cursor: pointer;
}
.filter_fields input {
    position: relative;
}
.filter_fields input[type="radio"]:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background-color: #ddd3d3;
    border-radius: 50%;
    border: solid 1px #00000000;
    transition: 0.5s;
}
.filter_fields input[type="radio"]:checked:after {
    box-shadow: inset 0px 0px 0px 3px #fff;
    background-color: var(--primary-color);
}
.filter-fields .tab-pane {
    max-height: 280px;
    overflow: auto;
}
.filter_fields input[type="text"], .filter_fields input[type="number"] {
    width: 100%;
    padding: 8px;
    border: solid 1px #00000026;
    outline: none;
    border-radius: 5px;
}
div#filter h4 button {
    font-size: 12px;
    padding: 8px 10px !important;
    position: absolute;
    right: 25px;
}
.user-profile-box img {
    width: 100%;
}
.user-img {
    height: 300px;
    overflow: hidden;
    transition: 0.5s;
}
.user-profile-box {box-shadow: 0px 0px 14px -10px;overflow: hidden;border-radius: 10px;transition: 0.5s;margin-top: 20px;position: relative;background-color: #fff;}
.user-text {
    padding: 20px;
    position: absolute;
    bottom: -47px;
    transition: 0.5s;
    opacity: 0.8;
    border-radius: 0px 10px 0px 0px;
    background-color: var(--primary-color);
    width: 100%;
    text-align: center;
    height: 45%;
}
.user-profile-box:hover {
    box-shadow: 0px 0px 20px 0px #00000040;
    margin-top: 12px;
}
.user-text i {
    font-size: 17px;
    color: #fff;
}
.user-text p {
    margin-top: 5px;
    color: #fff;
}
.user-profile-box:hover .user-text {
    opacity: 0.8;
    bottom: 0;
    height: 100%;
    padding-top: 60px;
}
.user-text h4 {
    color: #fff;
    margin: 0px;
}
.user-text a {
    background-color: #fff;
    margin-top: 20px;
    padding: 6px 21px 5px !important;
    color: var(--primary-color) !important;
}
.user-text a:hover {
    color: #fff !important;
}
section#happy-couple {
    margin-top: 50px !important;
    box-shadow: inset 0px 0px 0px 600px #e72e7721;
    background: #fff;
}
.wd_blog_img img {
    width: 100%;
    border-radius: 50px 0px 50px 0px;
}
.wd_blog_info ul li {
    list-style: none;
    width: auto;
    margin-right: 15px;
    display: inline-block;
}
.wd_blog_info ul {
    padding: 0px;
}
.wd_blog_info li a {
    color: #000000bd;
}
.wd_blog_info li i {
    color: var(--primary-color);
}
.wd_blog_info {
    padding-left: 20px;
}
.wd_blog_box.row {
    align-items: center;
    margin-top: 40px;
    background-color: #ffffff96;
    box-shadow: 0px 0px 12px -10px;
    border-radius: 10px;
    padding: 12px 2px !important;
}
.wd_blog_info a.site-button {
    margin-top: 20px;
}
.wd_blog_info h3 {
    font-size: 26px;
}


  /*footer start*/
  /* .footer {
      background-color: #000000e6;
      padding: 50px 0px 0px;
      margin-top: 100px;
      position: relative;
  } */
  .footer {
    padding-top: 93px;
}
.footer-bg {
    background-color: #e72e779e;
    color: #fff;
}
  .footer-wave-svg {
    background-color: transparent;
    display: block;
    height: 41px;
    position: relative;
    top: -1px;
    width: 100%;
}
.footer-wave-path {
    fill: #fffff2;
}
a.social-link {
    position: relative;
    display: block;
    width: 46px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    transition: .6s;
    box-shadow: 0 5px 4px rgba(0,0,0,.5);
}
a.social-link i {
    font-size: 20px;
    line-height: 48px;
    transition: .3s;
    color: #000;
}

.footer-sicial  .social-link:hover {
    transform: translate(0, -10%);
}
.footer-sicial .social-link:hover .fa-facebook {
    color: #4267B2;
}
.footer-sicial .social-link:hover .fa-instagram {
color: #f93434;
}
.footer-sicial .social-link:hover .fa-twitter {
    color:	rgb(29, 161, 242);
}
.footer-sicial .social-link:hover .fa-youtube {
    color:  rgb(205, 32, 31)
}
  .footer-box h4 {
      color: #fff;
      font-size: 22px;
      position: relative;
      width: fit-content;
      margin-bottom: 0;
      padding-bottom: 30px;
  }
  .footer-box h4:after {
      content: "";
      position: absolute;
      bottom: 30px;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #fff;
  }div#copyright {
      border-top: solid 1px #b4245d52;
      margin-top: 50px;
      padding: 25px 0px;
  }
  div#copyright p {
      color: #fff;
      margin: 0px;
      font-size: 15px;
  }
  .col-md-6.copyright-nav {
      text-align: right;
  }
  .col-md-6.copyright-nav a {
      font-size: 15px;
      color: #ffffffd9;
      transition: 0.5s;
      font-size: 15px;
  }
  .col-md-6.copyright-nav a:hover {
      color: var(--secondary-color);
  }
  .col-md-6.copyright-nav a:nth-child(1):after {
      content: "/";
      padding: 0px 9px;
      pointer-events: none;
  }
  .footer-nav li {
      display: block;
  }
  .footer-nav a {
      display: inline-block;
      padding: 9px 0px;
      color: #fff;
      font-size: 15px;
      position: relative;
      transition: 0.3s;
  }
  .footer-nav a:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      height: 8px;
      background-color: var(--secondary-color);
      margin: auto;
      transition: 0.5s;
      opacity: 0;
  }
  .footer-nav a:hover:before {
      opacity: 1;
      border-radius: 50%;
  }
  .footer-nav a:hover {
      color: var(--secondary-color);
      padding-left: 15px;
  }
  .user-info i:after {
      content: "";
      position: absolute;
      border: dashed 1px;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      animation: rotate 2s linear infinite;
  }
  .footer-box p {
      font-size: 15px;
      color: #fff;
      line-height: 30px;
  }
  .newsletter {
      display: flex;
  }
  .newsletter input {
      width: 66%;
      border-radius: 50px;
      padding: 0px 15px;
      border: none;
      outline: none;
  }
  .newsletter button {
    width: 39%;
    padding: 7px 2px !important;
    border-radius: 50px;
    overflow: hidden;
    margin-left: 2px;
}
  .footer-box.newsletter-box h4 {
      text-align: right !important;
      width: 100%;
  }
  .footer-box.newsletter-box h4:after {
    position: unset;
}
.newsletter-box span {
    border-bottom: 2px solid #fff;
}
  .footer-sicial {
    text-align: right;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: end;
}
  .footer-sicial a {
      color: #fff;
      font-size: 20px;
      margin-left: 20px;
      transition:0.5s;
  }
  .footer-sicial a:hover {
      color: var(--secondary-color);
  }

  body {
      overflow-x: hidden;
  }


  section.home-banner {
      height: 97vh;
      display: flex;
      align-items: center;
      background-color: #fee8e8;
      position: relative;
      overflow: hidden;
      margin-top: -80px;
  }
  section.home-banner:before {
      content: "";
      position: absolute;
      left: -330px;
      width: 70%;
      height: 160%;
      background-image: url(Shape.png);
      top: 0;
      background-position: center;
      background-size: cover;
      transform: rotate(85deg);
  }
  header {
      position: relative;
      z-index: 9;
  }
  .col-md-6.banner-right img {
      width: 100%;
  }
  section.home-banner .row {
      align-items: center;
  }
  .col-md-6.banner-right {
      overflow: hidden;
      border-left: solid 10px #fff;
      padding: 0px;
      border-radius: 50% 0% 0% 50%;
      box-shadow: 0px 0px 20px -10px;
      position: absolute;
      right: -100px;
  }
  .main-header:after {
      position: absolute;
      right: 0;
      top: 0;
      width: 60%;
      height: 100%;
      background-color: #ffffffb8;
      z-index: -1;
  }
  .main-header {
      background-color: #ffffffc4;
      padding: 10px 0px;
  }
  img.bottom-icon {
      position: absolute;
      bottom: -80px;
      left: 51%;
      right: 0;
      width: 340px;
  }
  img.top-icon {
      position: absolute;
      width: 200px;
      top: 120px;
      left: 53%;
      z-index: 9;
  }
  .banner-txt h1 {
      font-size: 58px;
      color: var(--primary-color);
      font-family: 'Dancing Script', cursive;
      margin-bottom: 30px;
  }
  .banner-txt p {
      color: #000;
      font-size: 19px;
      line-height: 30px;
  }
  .banner-txt a.site-button {
      margin-top: 30px;
      padding: 11px 40px !important;
  }
  .banner-txt {
    padding-top: 88px;
}
  body {
      font-family: 'Josefin Sans', sans-serif;
  }
  .banner-txt h1 span {
      text-transform: uppercase;
      font-size: 90px;
      color: var(--secondary-color);
  }
  .banner-txt h1 img {
      width: 100px;
      margin-top: -9px;
      animation: zoom 1.5s infinite alternate;
  }
  section.section {
      margin-top: 50px;
  }
  h2.heading {
      text-align: center;
      font-family: 'Dancing Script', cursive;
      font-size: 50px;
      position: relative;
  }
  h4.sub-heading {
      text-align: center;
      font-size: 18px;
      color: #000000c7;
  }
  h2.heading:after {
      content:"";
      width: 100px;
      height: 100px;
      left: 0px;
      top: 33px;
      bottom: 0;
      right: 0;
      margin: auto;
      background-image: url(heart.png);
      background-size: cover;
      position: absolute;
      z-index: -1;
      opacity: 0.2;
      animation: zoom 1.5s infinite alternate;
  }
  .couple-box {
      display: flex;
      justify-content: center;
      column-gap: 20px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 50px;
  }
  .couple-img {
      width: 40%;
      height: 260px;
      overflow: hidden;
      padding: 5px;
      border-radius: 10px;
      position: relative;
      border: dashed var(--primary-color);
  }
  .couple-text {
      width: 56%;
  }
  .couple-img img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
  }
  .couple-text h4 {
      font-size: 22px;
  }
  .couple-text i {
      color:  var(--primary-color);
      font-size: 17px;
  }
  .couple-text p {
      padding-top: 20px;
      color: #0000009e;
  }
  section#happy-couple {
      margin: 0px;
      padding: 60px 0px;
      background-image: url(announcement-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
  }
  section.register-login {
      position: relative;
      z-index: 999;
  }
  .thanku-box {
      background-color: #ffffffe6;
      padding: 30px;
      border-radius: 5px;
      box-shadow: 0px 0px 20px -4px #0000004d;
      border-top: solid #0cc10c;
  }
  .thanku-box h2 {
      font-size: 40px;
  }
  .thanku-box p {
      font-size: 17px;
      margin: 0px;
      line-height: 30px;
      color: #000000bf;
  }
  body.register.thanku {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  body.register.thanku main {
      width: 100%;
  }
  body.register.thanku:after, body.register.thanku:before {
      opacity: 0.1;
  }
  .thanku-box h6 {
      padding: 25px 0px 0px;
      border-top: dashed 1px #0000002e;
      margin: 30px 0px 0px;
      font-size: 17px;
  }
  .thanku-box h6 a {
      color: var(--primary-color);
  }
  span.field_error {
    font-size: 12px;
    color: #ff2a00;
    position: absolute;
    right: 0;
    bottom: -20px;
}
i#show_pass {
    position: absolute;
    right: 10px;
    margin: 13px 0px 0px;
    cursor: pointer;
    color: var(--primary-color);
}
.alert.alert-success {
    background-color: #0ad10a;
    color: #fff;
}
.profile_message button {
    padding: 4px 5px !important;
    border-radius: 5px;
    top: -10px !important;
    right: -9px !important;
    box-shadow: 0px 0px 20px -6px #000;
    position: absolute !important;
    background-color: #fff !important;
    opacity: 1 !important;
    font-size: 16px;
}
.profile_message {
    position: fixed;
    right: 140px;
    z-index: 99;
    top: 110px;
}
.main-header.fixedheader {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    transition: 0.5s;
}
.main-header.fixedheader.stickyheader {
    top: 0;
    background-color: #fff;
    box-shadow: 0px 0px 14px -10px;
}
.about-img img {
    width: 100%;
    box-shadow: 0px 0px 20px -10px;
    border: solid 10px #fff;
    border-radius: 5px;
}
h2.heading.text-left {
    text-align: left;
}
.about-txt {
    padding-left: 25px;
}
p.text {
    line-height: 30px;
    color: #000000b8;
    font-size: 17px;
}
.about-list li {
    list-style: none;
    font-size: 17px;
    color: #000000b8;
    margin-top: 5px;
}
.about-list i {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 2px;
    padding-top: 2px;
}
.about-txt a {
    margin-top: 24px;
}



  .bubbles{
    position:absolute;
    width:100%;
    height: 100%;
    z-index:0;
    overflow:hidden;
    top:0;
    left:0;
  }
  .bubble{
    position: absolute;
    bottom:-100px;
    width:40px;
    height: 40px;
    background: var(--primary-color);
    border-radius:50%;
    opacity:0.1;
    animation: rise 10s infinite ease-in;
  }
  .bubble:nth-child(1){
    width:40px;
    height:40px;
    left:10%;
    animation-duration:8s;
  }
  .bubble:nth-child(2){
    width:20px;
    height:20px;
    left:20%;
    animation-duration:5s;
    animation-delay:1s;
  }
  .bubble:nth-child(3){
    width:50px;
    height:50px;
    left:35%;
    animation-duration:7s;
    animation-delay:2s;
  }
  .bubble:nth-child(4){
    width:80px;
    height:80px;
    left:50%;
    animation-duration:11s;
    animation-delay:0s;
  }
  .bubble:nth-child(5){
    width:35px;
    height:35px;
    left:55%;
    animation-duration:6s;
    animation-delay:1s;
  }
  .bubble:nth-child(6){
    width:45px;
    height:45px;
    left:50%;
    animation-duration:8s;
    animation-delay:3s;
  }
  .bubble:nth-child(7){
    width:90px;
    height:90px;
    left:40%;
    animation-duration:12s;
    animation-delay:2s;
  }
  .bubble:nth-child(8){
    width:25px;
    height:25px;
    left:30%;
    animation-duration:6s;
    animation-delay:2s;
  }
  .bubble:nth-child(9){
    width:15px;
    height:15px;
    left:20%;
    animation-duration:5s;
    animation-delay:1s;
  }
  .bubble:nth-child(10){
    width:90px;
    height:90px;
    left:25%;
    animation-duration:10s;
    animation-delay:4s;
  }
  @keyframes rise{
    0%{
      bottom:-100px;
      transform:translateX(0);
    }
    50%{
      transform:translate(100px);
    }
    100%{
      bottom:1080px;
      transform:translateX(-200px);
    }
  }

  @keyframes body{
    from{
      box-shadow: 0px 0px 0px 0px #e72e7726;
    }
    to{
      box-shadow: 0px 0px 0px 80px #e72e7726;
    }
  }

  @keyframes grow{
    from{
      box-shadow: 0px 0px 0px 0px #e72e778f;
    }
    to{
      box-shadow: 0px 0px 0px 10px #e72e7745;
    }
  }

  @keyframes rotate{
    from{
      transform: rotate(90deg);
    }
    to{
      transform: rotate(180deg);
    }
  }

  @keyframes zoom{
    to{
      transform: scale(1.6);
    }
  }
  .user-heaed {
    display: flex;
    column-gap: 20px;
    align-items: center;
}
.user-heaed img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.user_name {
    text-align: left;
}
.user_name h6 {
    font-size: 22px;
    margin-bottom: 2px;
}
.user_name p {
    font-size: 16px;
    color: #000000a3;
    margin: 0px;
}
.user_name p a {
    color: var(--secondary-color);
    font-size: 13px;
}
.match-nav {
    text-align: left;
    padding-top: 30px;
}
.match-nav a {
    display: block;
    color: #0000009e;
    padding: 10px 0px;
}
.match-nav a i {
    float: right;
}
.match-nav a.active {
    color: #000;
}
.plan-box {
    position: relative;
    margin-top: 15px;
}
.plan-box label {
    display: flex;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 18px -12px #000000bf;
    cursor: pointer;
    align-items: center;
}
.plan-type {
    width: 40%;
    font-size: 22px;
    color: #000000c4;
}
.plan-box input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 999;
}
.plan-radio {
    width: 40%;
    position: relative;
}
.plan-price {
    width: 20%;
    font-size: 30px;
    color: var(--primary-color);
    text-align: center;
}
.plan-radio span {
    position: absolute;
    right: 10px;
    top: -7px;
    width: 15px;
    height: 15px;
    border: solid 1px #0000008a;
    border-radius: 50%;
}
.plan-price span {
    display: block;
    font-size: 16px;
    opacity: 0.5;
}
.plan-box input:checked + label {
    background-color: var(--primary-color);
}
.plan-box input:checked + label div {
    color: #fff;
}
.plan-box input:checked + label .plan-radio span {
    border-color: #fff;
    box-shadow: inset 0px 0px 0px 3px #e72e77;
    background-color: #ffff;
}
.plan-box div, .plan-box span {
    transition: 0.5s;
}
.plane-benefits li {
    display: flex;
    column-gap: 6px;
    font-size: 14px;
    margin: 18px 0px;
}
.plane-benefits ul {
    padding: 0px;
}
.plane-benefits {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 18px -12px #000000bf;
    margin-top: 15px;
}
.plane-benefits p {
    margin: 0px;
}
.plane-benefits svg {
    color: #02b302;
    width: 20px;
}
.plane-benefits h6 {
    font-size: 20px;
    color: var(--primary-color);
}
.member-ship .site-button {
    margin-top: 20px;
    border-radius: 5px;
    width: 100%;
    padding: 5px 0px !important;
    justify-content: center;
}
.member-ship .site-button:before {
    display: none;
}
.member-ship .site-button:hover {
    color: var(--primary-color) !important;
}
button#buy span {
    font-size: 40px;
}
.order-review {
    background-color: #fff;
    box-shadow: 0px 0px 15px -10px;
    border-radius: 5px;
    overflow: hidden;
}
section.checkout {
    padding: 70px 0px;
}
.order-top {
    padding: 30px;
}
.order-top h4 {
    color: #000;
    margin-bottom: 20px;
    border-bottom: solid 1px #0000000f;
    padding-bottom: 20px;
}
.order-top b {
    color: var(--primary-color);
    font-size: 18px;
}
.order-top p {
    color: #000000d1;
    font-size: 18px;
}
.order-top p span {
    float: right;
    color: var(--primary-color);
}
.order-bottom {
    border-top: dotted 1px var(--primary-color);
    padding: 30px;
    margin-top: 50px;
    background: linear-gradient(90deg,var(--primary-color) 0%, var(--secondary-color) 100%);
}
.order-bottom span {
    float: right;
}
.order-bottom p {
    color: #ffffffd9;
    font-size: 16px;
}
.order-bottom h6 {
    font-size: 20px;
    color: #fff;
}
.payment-options ul {
    display: block;
    margin: 0px;
    padding: 0px;
    border: none;
    width: 30%;
    background-color: #fff;
    box-shadow: 0px 0px 15px -10px;
    border-radius: 5px;
    padding: 25px;
    height: fit-content;
    padding-bottom: 10px;
}
.payment-options {
    display: flex;
    column-gap: 30px;
}
.payment-options ul a.active {
    background-color: var(--secondary-color) !important;
}
.payment-options ul a:before {
    border-radius: 0px !important;
}
.payment-options .tab-content {
    width: 67%;
    background-color: #fff;
    box-shadow: 0px 0px 15px -10px;
    border-radius: 5px;
    padding: 25px;
}
.pay-option input, .pay-option select {
    padding: 10px 20px;
}
span.input-group-text.text-muted {
    padding: 15px 10px;
    border-radius: 0px 8px 8px 0px;
}
.pay-option .form-group {
    margin-top: 20px;
}
.pay-option .form-group label {
    margin-bottom: 3px;
}
.pay-option button.site-button {
    margin-top: 30px;
    width: 100%;
    border-radius: 8px;
    padding: 10px 0px !important;
    font-size: 20px;
}
.pay-option button.site-button:before {
    border-radius: 8px !important;
}
span.input-group-text.text-muted i {
    margin: 2px;
    color: #2c43e7;
}
form#payment-form label.error {
    display: block;
    position: absolute;
    bottom: -31px;
    color: red;
    font-size: 13px;
    right: 0px;
}
form#payment-form .form-group {
    position: relative;
    margin-top: 30px;
}
.premium-sidebar-box.premium i {
    background-color: #00800042;
    color: #008000c4;
}
.premium-sidebar-btn.premium a:before, .premium-sidebar-btn.premium a {
    background-color: #2c962c !important;
    border: none;
}
input.razorpay-payment-button {
    background-color: var(--primary-color) !important;
    color: #fff;
    border: none;
    border-radius: 50px;
    margin-top: 20px;
    padding: 10px 50px;
}


  @media (max-width:767px){
      .input {
          width: 100% !important;
      }
      .register-box-form {
          left: 0;
      }
      .register-box-text {
          height: fit-content;
          padding: 30px;
      }
      .footer-box.newsletter-box h4 {
          text-align: left !important;
      }
      .newsletter input {
        width: 100%;
        padding: 7px 20px;
    }
      .footer-box {
          margin-bottom: 30px;
      }
      div#copyright p {
          text-align: center;
      }
      .col-md-6.copyright-nav {
          text-align: center;
      }
      .container.profile-cover {
          height: auto;
          padding-bottom: 150px;
          padding-top: 60px;
      }
      .user-info {
          margin-bottom: 0px;
      }
      .row.user-basic {
          margin-left: 0px;
          width: 100%;
      }
      section.profile-main .container {
          padding: 0px 30px;
      }
      .footer-sicial {
          text-align: left;
      }

      .profile-about {
        margin-top: 30px !important;
    }
    .container.profile-cover {
        height: fit-content !important;
        padding: 50px 0px 70px 0px !important;
    }
    html {
        overflow-x: hidden;
    }
    .basic-detail p {
        width: 100%;
    }
    .modal-dialog {
        width: 90%;
    }
    .profile-main table {
        width: max-content;
    }
    .profile-table::-webkit-scrollbar {
        height: 10px;
        background-color:#00000030;
    }
    .profile-table::-webkit-scrollbar-thumb{
        background-color:var(--primary-color);
    }
    .profile-table {
        overflow-x: auto;
    }
    .profile_message {
        right: 20px;
    }
    section.member-profile-main .col-md-3.order-1.order-xl-0 {
        margin-top: 30px;
    }
    div#member_dt {
        padding-left: 0px;
    }
    div#match-total {
        display: block;
    }
    .match-user-txt {
        margin-top: 10px;
    }
    .head-tab a {
        padding: 8px !important;
        font-size: 14px;
    }
    .matches-filter button {
        font-size: 13px;
        margin-right: 0px;
        padding: 4px 12px 2px;
    }
    .matches-filter {
        text-align: center;
    }

    .header-navigation li {
        display: block;
        text-align: left;
    }
    .header-navigation {
        position: absolute;
        left: 10px;
        width: 92%;
        background-color: #fff;
        z-index: 99999;
        box-shadow: 0px 0px 17px -14px;
        transition: 0.5s;
        max-height: 0px;
        overflow: hidden;
        margin-top: 12px;
    }
    .header-navigation a:after {
        display: none;
    }
    .mobile-nav div {
        width: 100%;
        height: 2px;
        background-color: #000000c2;
        margin-top: 8px;
    }
    .mobile-nav {
        width: 27px;
        float: right;
        margin-top: -39px;
        margin-right: 20px;
    }
    .main-header {
        box-shadow: 0px 0px 13px -10px;
    }
    .header-navigation.show_nav {
        max-height: 1000px;
    }
    .top-header {
        display: none;
    }
    .logo img {
        width: 160px;
    }

    .couple-img, .couple-text {
        width: 100%;
        height: auto;
    }
    .couple-text {
        margin-top: 20px;
    }
    section.home-banner {
        height: fit-content;
        padding: 100px 0px 30px;
    }
    .col-md-6.banner-right, img.top-icon {opacity: 0.2 !important;z-index: 1;}
    .banner-txt {
        padding: 40px 0px;
    }
    img.bottom-icon {
        width: 120px;
        bottom: -30px;
        right: 0 !important;
        left: auto;
    }
    ul.child {
        position: unset;
        transform: unset;
        max-height: 0px;
        overflow: hidden;
        transition: 0.5s;
        margin: 0px;
    }
    li.auth-has:hover>ul {
        max-height: 400px;
        margin: 20px;
    }
    div#match_by_ref img {
        width: 50px;
        height: 50px;
    }
    .match_result p {
        font-size: 10px;
    }
    .match_result:before, .match_result:after {
        width: 30px;
        left: -11px;
    }
    .match_result:after {
        right: -11px;
        left: auto;
    }
    .member-details {
        padding-left: 0px;
    }
    .wd_blog_img.right {
    margin-top: 30px;
}
.wd_blog_img {
    margin-bottom: 20px;
}
.payment-options .tab-content, .payment-options ul {
    width: 100%;
    margin: 15px 0px;
}.payment-options {
    display: block;
}
.payment-options .tab-content button {
    justify-content: center;
}
  }

@media (min-width:1300px){
    .register-box-text {
        height: calc(100vh - 100px);
    }
}


@media (max-width:1070px){
    .register-box-form h4:after, .register-box-form h4:before{
        display:none !important;
    }
}

/*new css-add*/

section#Ourservices {
    background-color: #f5cde140;
    margin-top: 53px;
    padding-top: 50px;
}
.slick-slide {
    display: none;
    float: left;
    min-height: 367px !important;
}
.main-services img {
    border-radius: 10px;
}
.slick-initialized .slick-slide {
    display: block;
    margin: 0px 15px;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.services-main-section {
    position: relative;
    height: 100%;
    width: 100%;
}
.services-detail {
    position: absolute;
    background: #fff;
    width: 94%;
    min-height: 153px;
    left: 0;
    padding: 24px 16px;
    right: 0;
    margin: 0 auto;
    border-radius: 6px;
    text-align: center;
    bottom: -73px;
    transition: 0.3s;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.services-detail:hover{
   transition: all .5s;
    transform : translateY(-10px);
}
.silderimg {
    position: absolute;
    right: 10px;
    opacity: 0.8;
    bottom: 14px;
}
.services-detail h4 {
    font-size: 20px;
    margin: 7px;
}
.services-detail p {
    font-size: 14px;
    margin-bottom: 14px;
}
.slick-slide {
    display: none;
    float: left;
    min-height: 500px;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 47%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -46%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #e72e779e;
    border-radius: 100px;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 24px;
    line-height: 1.8;
    opacity: 5.75;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
    left: -35px;
}
.slick-next {
    right: -36px;
}
#about{
	background-image: url('../media/announcement-bg.png');
	background-repeat: repeat;
	background-size: contain;
	background-position: center;
}

/* progress-bar */
.progress-wrap {
    position: fixed;
    /* right: 50px; */
    bottom: 10px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    margin: 0 auto;
    left: 0;
    right: 0;

}

  .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .progress-wrap::after {
    position: absolute;
    font-family: 'FontAwesome';
    font-weight: 900;
    content: "\f106";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #1f2029;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
  .lightScrollIcon::after {
    color: #ecedf3 !important;
  }

  .progress-wrap:hover::after {
    opacity: 0;
  }

  .progress-wrap::before {
    position: absolute;
    font-family: 'FontAwesome';
    font-weight: 900;
    content: "\f106";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    opacity: 0;
   color: #000;

    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
  }

  .progress-wrap:hover::before {
    opacity: 1;
  }

  .progress-wrap svg path {
    fill: none;
  }

  .progress-wrap svg.progress-circle path {
    stroke: #1f2029;
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
  }
  .logo {
    padding-top: 10px;
}
  /* loader */
  .Preloader{
    position: absolute;
    content: '';
    left: 50%;
    transform: translate(-100%, -240%);
    font-size:62px;
}
.Loader{
    animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
    top: 50%;
    content: '';
    left: 50%;
    position: absolute;
}

.loading-1 {
    width: 1em;
    height: 1em;
    border: 1px solid #bc2e67;
    background-color: #bc2e67;
    content: '';
    position: absolute;
    display: block;
    border-radius: 100%;
    animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
    transform: translate(-28px, -27px);
}

.loading-2 {
    width: 1em;
    height: 1em;
    border: 1px solid #bc2e67;
    background-color: #bc2e67;
    content: '';
    position: absolute;
    display: block;
    border-radius: 100%;
    transform: translate(28px, -27px);
    animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
}

.loading-3 {
    width: 1em;
    height: 1em;
    border: 1px solid #bc2e67fb;
    background-color: #bc2e67fb;
    position: relative;
    display: block;
    content: '';
    transform: scale(1) rotate(-45deg);
    animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
}

.Loader-shadow {
    top: 97px;
    left: 50%;
    content: '';
    position: relative;
    display: block;
    bottom: -.5em;
    width: 1em;
    height: .24em;
    background-color: rgb(0,0,0,0.5);
    border: 1px solid rgb(0,0,0);
    border-radius: 50%;
    animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
}

@keyframes cssload-square {
    50% {
        border-radius: 100%;
        transform: scale(0.5) rotate(-45deg);
    }
    100% {
        transform: scale(1) rotate(-45deg);
    }
}

@keyframes cssload-heart {
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(720deg);
    }
}

@keyframes cssload-heartL {
    60% {
        transform: scale(0.4);
    }
}

@keyframes cssload-heartR {
    40% {
        transform: scale(0.4);
    }
}

@keyframes cssload-shadow {
    50% {
        transform: scale(0.5);
        border-color: rgb(228,228,228);
    }
}
  #loader {
    top: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    background-color: #ffffffe8;
    z-index: 099;
    display: flex;
    align-items: center;
    justify-content: center;
}