@import "../css/fonts.css";

*:focus {
  outline: none;
}

/* ITS A MUST IN CUSTOM.CSS */

/* ESG SPINNER SHOULD BE REMOVED */

.navbar-nav .nav-item:hover > .nav-link {
  color: #ffffff;
  
}

.navbar-nav .nav-item:hover > .dropdown-menu {
  display: block;
}
.dropdown-item:hover {
  background-color: #335596;
  color: #ffffff;
}

/* ITS A MUST IN CUSTOM.CSS */

button:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.form-control:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

body {
  /* overflow: hidden; */
  padding: 0 !important;
  margin: 0 !important;
  background: white;
  font-family: "Poppins";
  font-weight: normal;
  overflow-x: hidden;
  background-image: url(../img/bg.png);
  background-repeat: no-repeat;
  background-position: top 25% center;
  /*&:before{
    content: "";
      background-image: url(../img/ship1.png);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      left: -109px;
      bottom: -61px;
      display: block;
      height: 50%;
      width: 45%;
      background-size: contain;
  }

  &:after{
    content: "";
      background-image: url(../img/ship2.png);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      right: -109px;
      bottom: -36px;
      display: block;
      height: 50%;
      width: 45%;
      background-size: contain;
  }*/
}

header {
  /*padding: 10px 0;*/
  border-bottom: 1px solid #d6d6d6;
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 50;
  background: #fff;
}

header .navbar .navbar-brand {
  margin-right: 20px;
  width: 200px;
}

@media (max-width: 575px) {
  header .navbar .navbar-brand {
    width: 200px;
  }
}

header .navbar .navbar-brand img {
  max-width: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  header .navbar .form-inline {
    margin-top: 10px;
  }
}

header .navbar .form-inline .btn {
  border-radius: 20px;
  background: #74c5b5;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  padding: 10px 14px;
}

header .navbar .form-inline span {
  font-size: 12px;
}

header .navbar .form-inline a {
  font-weight: bold;
  color: #335596;
  font-size: 12px;
}

header .navbar ul.navbar-nav li.nav-item a.nav-link {
  color: #335596;
  /*text-transform: capitalize;*/
  font-family: "Poppins";
  font-weight: normal;
  border-bottom: 2px solid white;
  padding: 10px;
  font-size: 14px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 991px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    padding: 10px 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    padding: 10px 12px;
  }
}

header .navbar ul.navbar-nav li.nav-item.active a.nav-link {
  border-bottom: 2px solid #74c5b5;
  color: #74c5b5;
}

header .navbar ul.navbar-nav li.nav-item:hover a.nav-link {
  border-bottom: 2px solid #335596;
  color: #335596;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

header .navbar-toggler-icon {
  background-image: url(../img/navbaricon.svg) !important;
}

header .navbar-toggler {
  padding: 0 !important;
}

header ul.dropdown-menu {
  padding: 10px;
}

header ul.dropdown-menu a {
  display: block;
  color: #335596;
  margin-bottom: 5px;
}

header ul.dropdown-menu a:hover {
  text-decoration: none;
  color: #74c5b5;
}

.middlepart {
  /*padding: 30px 0 0 0;*/
}

.middlepart #particles-js {
  z-index: 1;
}

.middlepart .container {
  position: relative;
}

.middlepart .container #display_box,
.middlepart .container #display_box1 {
  display: none;
  min-height: 85px;
  width: 300px;
  border: 2px dotted #335596;
  position: absolute;
  top: 50px;
  left: auto;
  right: 0;
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  padding: 10px;
  z-index: 11;
}

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

  .middlepart .container #display_box,
  .middlepart .container #display_box1 {
    width: 225px;
  }
}

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

  .middlepart .container #display_box,
  .middlepart .container #display_box1 {
    margin-bottom: 5%;
    bottom: -20px;
    top: auto;
  }
}

.middlepart .container #display_box .links,
.middlepart .container #display_box1 .links {
  width: 50%;
  display: inline-block;
  position: relative;
  font-size: 14px;
  height: 30px;
  vertical-align: bottom;
}

.middlepart .container #display_box .links.r_auto,
.middlepart .container #display_box1 .links.r_auto {
  right: auto;
}

.middlepart .container #display_box .btn,
.middlepart .container #display_box1 .btn {
  background: #74c5b5;
  color: #fff;
  text-transform: capitalize;
}

.middlepart .container #display_box .btn:hover,
.middlepart .container #display_box1 .btn:hover {
  background: #335596;
}

.middlepart .container #display_box label,
.middlepart .container #display_box1 label {
  color: #335596;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.middlepart .container #display_box label.input,
.middlepart .container #display_box1 label.input {
  color: #74c5b5;
}

.middlepart .container #display_box1 {
  justify-content: center;
  align-items: center;
  display: flex;
  left: 0;
  right: auto;
}

.middlepart .h75 {
  height: 80vh;
  overflow: hidden;
}

@media (min-width: 1200px) and (max-width: 1280px) {
  .middlepart .h75 {
    height: 90vh;
  }
}

@media (min-width: 900px) and (max-width: 998px) {
  .middlepart .h75 {
    height: 52vh !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .middlepart .h75 {
    margin-top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .middlepart .h75 {
    height: 100vh;
  }
}

@media (max-width: 767px) {
  .middlepart .h75 {
    height: 63vh;
    margin-top: 130px;
  }
}

@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait) {
  .middlepart .h75 {
    height: 40vh !important;
  }
}

.middlepart #main_circle {
  height: 440px;
  width: 440px;
  margin-top: 54px;
  border: 1px solid #74c5b5;
  border-radius: 50%;
  /*transform: rotate(0deg);*/
  /* transition: transform 3s linear !important;*/
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 5;

}

.middlepart #main_circle #child-1,
.middlepart #main_circle #child-2,
.middlepart #main_circle #child-3,
.middlepart #main_circle #child-4,
.middlepart #main_circle #child-5,
.middlepart #main_circle #child-6,
.middlepart #main_circle #child-7,
.middlepart #main_circle #child-8,
.middlepart #main_circle #child-9 {
  position: absolute;
  width: 85px;
  height: 85px;
  /* transform: rotate(0deg); */
  transition: transform 0.7s linear;
  top: -20px;
  left: 176px;
  line-height: 1;
  /*left: 0px;
  right: 0;
  margin: 0 auto;*/
}

.middlepart #main_circle #child-1 img,
.middlepart #main_circle #child-2 img,
.middlepart #main_circle #child-3 img,
.middlepart #main_circle #child-4 img,
.middlepart #main_circle #child-5 img,
.middlepart #main_circle #child-6 img,
.middlepart #main_circle #child-7 img,
.middlepart #main_circle #child-8 img,
.middlepart #main_circle #child-9 img {
  max-width: 100%;
  width: 30px;
  height: 30px;
}

.middlepart #main_circle #child-1 span,
.middlepart #main_circle #child-2 span,
.middlepart #main_circle #child-3 span,
.middlepart #main_circle #child-4 span,
.middlepart #main_circle #child-5 span,
.middlepart #main_circle #child-6 span,
.middlepart #main_circle #child-7 span,
.middlepart #main_circle #child-8 span,
.middlepart #main_circle #child-9 span {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.middlepart #main_circle #child-1 .short_des,
.middlepart #main_circle #child-2 .short_des,
.middlepart #main_circle #child-3 .short_des,
.middlepart #main_circle #child-4 .short_des,
.middlepart #main_circle #child-5 .short_des,
.middlepart #main_circle #child-6 .short_des,
.middlepart #main_circle #child-7 .short_des,
.middlepart #main_circle #child-8 .short_des,
.middlepart #main_circle #child-9 .short_des {
  display: none;
  font-size: 11px;
  margin-top: 15px;
  font-weight: bold;
  -webkit-animation: fade-in 3.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 3.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.middlepart #main_circle #child-1 .short_des label.input,
.middlepart #main_circle #child-2 .short_des label.input,
.middlepart #main_circle #child-3 .short_des label.input,
.middlepart #main_circle #child-4 .short_des label.input,
.middlepart #main_circle #child-5 .short_des label.input,
.middlepart #main_circle #child-6 .short_des label.input,
.middlepart #main_circle #child-7 .short_des label.input,
.middlepart #main_circle #child-8 .short_des label.input,
.middlepart #main_circle #child-9 .short_des label.input {
  color: #335596;
}

.middlepart #main_circle #child-1 .short_des label.output,
.middlepart #main_circle #child-2 .short_des label.output,
.middlepart #main_circle #child-3 .short_des label.output,
.middlepart #main_circle #child-4 .short_des label.output,
.middlepart #main_circle #child-5 .short_des label.output,
.middlepart #main_circle #child-6 .short_des label.output,
.middlepart #main_circle #child-7 .short_des label.output,
.middlepart #main_circle #child-8 .short_des label.output,
.middlepart #main_circle #child-9 .short_des label.output {
  color: #74c5b5;
}

.middlepart #main_circle #child-2 {
  top: 21px;
  left: auto;
  right: 44px;
  transform: rotate(45deg);
}

.middlepart #main_circle #child-3 {
  top: 182px;
  left: auto;
  right: -20px;
  transform: rotate(80deg);
}

.middlepart #main_circle #child-4 {
  top: auto;
  left: auto;
  right: -1px;
  bottom: 80px;
  transform: rotate(116deg);
}

.middlepart #main_circle #child-5 {
  top: auto;
  left: auto;
  right: 90px;
  bottom: -9px;
  transform: rotate(152deg);
}

.middlepart #main_circle #child-6 {
  top: auto;
  left: 102px;
  right: auto;
  bottom: -15px;
  transform: rotate(202deg);
}

.middlepart #main_circle #child-7 {
  top: auto;
  left: 0px;
  right: auto;
  bottom: 68px;
  transform: rotate(241deg);
}

.middlepart #main_circle #child-8 {
  top: 145px;
  left: -24px;
  right: auto;
  bottom: auto;
  transform: rotate(280deg);
}

.middlepart #main_circle #child-9 {
  top: 26px;
  left: 43px;
  right: auto;
  bottom: auto;
  transform: rotate(315deg);
}

/* ESG RADIAL MENU : BEGIN */

/* ESG RADIAL MENU : END */

.middlepart #main_circle .circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #74c5b5;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px;
  flex-direction: column;
  margin: 0 auto;
  cursor: pointer;
}

.middlepart #main_circle .circle:hover {
  border: 1px solid #335596;
  background-color: #e0f9f4;
}

.middlepart .block_details {
  display: none;
}

.middlepart #inner_circle {
  height: 275px;
  width: 275px;
  background-image: url(../img/inner-circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 132px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -2;

}
/* Abdullah's */
.middlepart #inner_rotator {
  height: 275px;
  width: 275px;
  background-image: url(../img/esg_iconpack/inner-rotator.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 132px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -2;
}

.middlepart #center_circle {
  height: 130px;
  width: 130px;
  background-image: url(../img/center-circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0px, 187px);
}

.middlepart #esg {
  height: 250px;
  width: 250px;
  background-image: url(../img/esg_iconpack/esg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0px, 145px);
  border-radius: 100%;
  z-index: 1;
}

.middlepart #esgtest {
  height: 250px;
  width: 250px;
  background-image: url(../img/esg_iconpack/esgtest.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0px, 145px);
  border-radius: 100%;
  z-index: 1;
}

.middlepart #center_circle:before {
  content: "";
  height: 140px;
  width: 140px;
  background-image: url(../img/dotted-center.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: -5px;
  left: -5px;
  right: 0;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  -webkit-animation: flower 30s infinite linear;
  animation: flower 30s infinite linear;
}

.middlepart #center_circle:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 50px #335596;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: hvr-ripple-out 2s infinite;
  animation: hvr-ripple-out 2s infinite;
  border-radius: 100%;
}

.middlepart #hover_effect {
  height: 211px;
  width: 131px;
  background-image: url(../img/hover-effect2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 3px;
  left: -12px;
  right: 0;
  margin: 0 auto;
  transform: rotate(4deg);
  z-index: -1;
}

.middlepart #hover_effect:before {
  content: "";
  background-image: url(../img/dotted-hover.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 194px;
  width: 126px;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 7px;
  position: absolute;
  -webkit-animation: blink-1 5s 3s infinite alternate both;
  animation: blink-1 5s 3s infinite alternate both;
}
/* Abdullah's edit */
.middlepart #dotted_effect {
  content: "";
  background-image: url(../img/dotted_line.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 194px;
  width: 126px;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 7px;
  position: absolute;
  -webkit-animation: blink-1 5s 3s infinite alternate both;
  animation: blink-1 5s 3s infinite alternate both;
}

.middlepart #hover_effect #mydot {
  position: relative;
  height: 7px;
  width: 7px;
  display: block;
  z-index: 1;
  background: #74c5b5;
  left: 0;
  right: 0;
  display: block;
  top: 4px;
  margin: 0 auto;
  border-radius: 50%;
}

.middlepart #hover_effect #mydot2 {
  position: absolute;
  height: 7px;
  width: 7px;
  display: block;
  z-index: 1;
  background: #335596;
  left: 0;
  right: -20px;
  display: block;
  bottom: 12px;
  margin: 0 auto;
  border-radius: 50%;
}

.links {
  text-transform: uppercase;
  color: #74c5b5;
  position: relative;
  top: 0px;
  right: 10px;
  left: auto;
}

.links:hover {
  color: #335596;
  text-decoration: none;
}

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

.calender_sec>.container {
  position: relative;
  -webkit-box-shadow: 0px 2px 13px 2px rgba(43, 43, 43, 0.5);
  -moz-box-shadow: 0px 2px 13px 2px rgba(43, 43, 43, 0.5);
  box-shadow: 0px 2px 13px 2px rgba(43, 43, 43, 0.5);
  overflow: hidden;
  background-color: transparent;
}

.calender_sec>.container.h80 {
  height: 90vh;
}

.calender_sec>.container .v-dialog__content {
  display: flex !important;
  align-items: center;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 1ms;
  width: 100%;
  z-index: 202;
  outline: none;
}

.calender_sec>.container .v-dialog {
  box-shadow: none;
  margin-top: 65px;
  width: 80%;
}

.calender_sec>.container .v-overlay {
  display: none;
}

.common>.container {
  position: relative;
}

@media (min-width: 992px) {
  .common>.container {
    min-height: 550px;
  }
}

.common>.container img {
  max-width: 100%;
}

.common>.container #particles-js {
  z-index: -1;
}

.common>.container h3 {
  color: #74c5b5;
  text-transform: capitalize;
  display: block;
  font-weight: bold;
}

.common>.container .style1 {
  font-size: 14px;
}

.common>.container .terms-conditions {
  text-align: left;
  margin-top: 40px;
  display: block;
  width: 100%;
  font-size: 14px;
}

.common>.container .terms-conditions .card:hover .card-header {
  background: #74c5b5;
}

.common>.container .terms-conditions .card:hover .btn.btn-link {
  color: #fff;
}

.common>.container .terms-conditions h1 {
  font-size: 24px;
  color: #335596;
  font-weight: 600;
}

.common>.container .terms-conditions h2 {
  font-size: 17px;
  color: #335596;
  font-weight: 600;
  letter-spacing: 1px;
}

.common>.container .terms-conditions h5 {
  color: #393636;
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 15px;
  font-weight: bold;
}

.common>.container .terms-conditions p {
  color: #393636;
  font-size: 14px;
}

.common>.container .terms-conditions a {
  color: #74c5b5;
}

.common>.container .terms-conditions a:hover {
  color: #335596;
}

.common>.container .terms-conditions .btn-link {
  display: block;
  width: 100%;
  text-align: left;
  color: #393636;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: bold;
  white-space: inherit;
  word-break: keep-all;
}

.common>.container .terms-conditions .btn-link:hover {
  text-decoration: none;
}

.common>.container .terms-conditions .btn-link i {
  float: right;
  font-size: 21px;
  font-weight: bold;
}

.common>.container .terms-conditions .btn-link i.rotate-icon {
  transform: rotate(180deg);
}

.change-password {
  margin-bottom: 10%;
}

.change-password .passinst {
  font-size: 11px;
}

.change-password .codealert {
  font-size: 12px;
}

.change-password .box-h {
  max-height: 385px;
  min-height: 350px;
  padding: 20px;
  height: 100%;
  align-items: center;
}

.change-password .form-control {
  font-size: 14px;
}

.pswd-part {
  display: none;
  width: 100%;
}

.change-password-part {
  display: none;
  width: 100%;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 9px;
  position: relative;
  z-index: 2;
}

.change-password .box-h .bodysec {
  padding: 24px;
  margin-top: 15%;
  text-align: center;
}

.change-password .box-h.title_sec {
  display: flex;
  margin-top: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.change-password .box-h.title_sec .bodysec {
  margin-top: 0;
}

.change-password .box-h .loginform .btn {
  background-color: #74c5b5;
  border: none;
}

.change-password .box-h .loginform .btn:hover {
  background-color: #335596;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

.loginSec {
  margin-bottom: 10% !important;
}

.loginSec .box-h {
  /* max-height: 350px; */
  min-height: 350px;
  padding: 20px;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
}

.loginSec .box-h .bodysec {
  padding: 24px;
  /* margin-top: 15%; */
  text-align: center;
}

.loginSec .box-h .bodysec.change-password-part{
  padding: 0;
}

.loginSec .box-h .bodysec h2 {
  color: #335596;
}

@media (min-width: 768px) {
  .loginSec .box-h .bodysec h2 {
    font-size: 4rem;
  }

  .change-password .box-h .bodysec h2 {
    font-size: 4rem;
  }
}

.loginSec .box-h .bodysec a {
  color: #335596;
  margin-top: 10px;
  display: inline-block;
}

.loginSec .box-h .loginform .btn, .changePasswordform .btn {
  background-color: #74c5b5;
  border: none;
}

.loginSec .box-h .loginform .btn:hover , .changePasswordform .btn:hover{
  background-color: #335596;
}

.loginSec h3 {
  text-transform: capitalize;
  border-bottom: 1px solid #74c5b5;
  width: 50%;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.loginSec p {
  display: block;
  width: 100%;
  color: #000;
  font-size: 14px;
}

.loginSec.common>.container {
  min-height: 365px;
}

.loginSec.common h3 {
  border-bottom: none;
  text-align: center;
}

.loginSec.common .btn {
  background-color: #74c5b5;
  border: none;
  color: #fff;
  font-weight: bold;
}

.loginSec.common .btn:hover {
  background-color: #335596;
}

.loginSec *::placeholder {
  font-size: 14px;
}

.loginSec .form-control {
  font-size: 14px;
}

.loginSec .form-control:focus {
  border: 1px solid #ced1d4;
}

.blink-1 {
  -webkit-animation: blink-1 2.5s infinite alternate both;
  animation: blink-1 2.5s infinite alternate both;
}

@-webkit-keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.zeroposition1 {
  transform: rotate(0deg);
  animation: spin 1s linear !important;
}

.zeroposition2 {
  transform: rotate(-41deg);
  animation: spin2 1s linear !important;
}

.zeroposition2 #child-2 {
  transform: rotate(41deg) !important;
}

.zeroposition3 {
  transform: rotate(-78deg);
  animation: spin3 1s linear !important;
}

.zeroposition4 {
  transform: rotate(-119deg);
  animation: spin4 1s linear !important;
}

.zeroposition4 #child-4 {
  transform: rotate(119deg) !important;
}

.zeroposition5 {
  transform: rotate(-155deg);
  animation: spin5 1s linear !important;
}

.zeroposition5 #child-5 {
  transform: rotate(155deg) !important;
}

.zeroposition6 {
  transform: rotate(158deg);
  animation: spin6 1s linear !important;
}

.zeroposition6 #child-6 {
  transform: rotate(203deg) !important;
}

.zeroposition7 {
  transform: rotate(121deg);
  animation: spin7 1s linear !important;
}

.zeroposition7 #child-7 {
  transform: rotate(238deg);
}

.zeroposition8 {
  transform: rotate(80deg);
  animation: spin8 1s linear !important;
}

.zeroposition9 {
  transform: rotate(41deg);
  animation: spin9 1s linear !important;
}

.zeroposition9 #child-9 {
  transform: rotate(319deg) !important;
}

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(45deg);
  }

  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-41deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-41deg);
  }
}

@-webkit-keyframes spin3 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-78deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-78deg);
  }
}

@-webkit-keyframes spin4 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-119deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-119deg);
  }
}

@-webkit-keyframes spin5 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-155deg);
  }
}

@keyframes spin5 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-155deg);
  }
}

@-webkit-keyframes spin6 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(158deg);
  }
}

@keyframes spin6 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(158deg);
  }
}

@-webkit-keyframes spin7 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(121deg);
  }
}

@keyframes spin7 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(121deg);
  }
}

@-webkit-keyframes spin8 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(80deg);
  }
}

@keyframes spin8 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(80deg);
  }
}

@-webkit-keyframes spin9 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(41deg);
  }
}

@keyframes spin9 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(41deg);
  }
}



.flower {
  -webkit-animation: flower 63s infinite linear;
  animation: flower 63s infinite linear;
  
}

@-webkit-keyframes flower {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

@keyframes flower {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.pulse {
  -webkit-animation: pulse 1s cubic-bezier(0.39, 0.575, 0.565, 1) 1s infinite alternate-reverse both;
  animation: pulse 1s cubic-bezier(0.39, 0.575, 0.565, 1) 1s infinite alternate-reverse both;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.aboutus_sec {
  z-index: 11;
  position: relative;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.aboutus_sec label {
  display: block;
  text-transform: capitalize;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  margin: 2rem 0;
}

.aboutus_sec p {
  font-size: 14px;
}

.aboutus_sec h5 {
  font-size: 18px;
  color: #74c5b5;
  font-weight: bold;
  margin-bottom: 5px;
}

.aboutus_sec #cont {
  font-size: 14px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.aboutus_sec #bt {
  border: none;
  background-color: transparent;
  color: #74c5b5;
  font-size: 14px;
  font-weight: bold;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#tsparticles,
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
}

#tsparticles canvas,
#particles-js canvas {
  background-color: transparent !important;
}

.fade-in {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

footer {
  position: sticky;
  width: 100%;
  bottom: 0;
  z-index: 50;
  background: #fff;
  padding: 10px 0;
  border-top: 1px solid #d6d6d6;
}

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer ul li {
  display: inline-block;
  color: black;
  font-size: 12px;
  font-weight: normal;
}

footer ul li:after {
  content: "|";
  color: black;
  font-size: 12px;
  margin: 0 5px;
}

footer ul li:last-child:after {
  display: none;
}

footer ul li a {
  color: black;
  font-size: 12px;
  text-transform: capitalize;
}

footer ul li a:hover {
  color: #74c5b5;
}

footer ul.social {
  text-align: right;
}

footer ul.social li:after {
  display: none;
}

footer ul.social li a {
  padding: 10px;
  font-size: 15px;
}

footer ul.social li a.fb {
  color: #3b5998;
}

footer ul.social li a.tw {
  color: #26a6d1;
}

footer ul.social li a.in {
  color: #016197;
}

footer ul.social li a.you {
  color: #dc472e;
}

footer ul.social li a.pin {
  color: #c8232c;
}

footer ul.social li a.insta {
  color: #c536a4;
  font-size: 16px;
}

.contactus ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 50px;
}

.contactus ul li {
  display: inline-block;
  color: black;
  font-size: 12px;
}

.contactus ul.social {
  text-align: center;
}

.contactus ul.social li:after {
  display: none;
}

.contactus ul.social li a {
  display: block;
  font-size: 15px;
  border-radius: 4px;
  height: 30px;
  width: 30px;
  line-height: 2;
  margin-left: 5px;
}

.contactus ul.social li a:hover {
  color: #74c5b5;
  background-color: transparent !important;
  border: 1px solid #74c5b5;
}

.contactus ul.social li a.fb {
  background-color: #3b5998;
  color: #fff;
}

.contactus ul.social li a.tw {
  background-color: #26a6d1;
  color: #fff;
}

.contactus ul.social li a.in {
  color: #fff;
  background-color: #016197;
}

.contactus ul.social li a.you {
  color: #dc472e;
}

.contactus ul.social li a.pin {
  color: #c8232c;
}

.contactus ul.social li a.insta {
  color: #c536a4;
  font-size: 16px;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #74c5b5;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 1001;
}

.logoimg {
  position: fixed;
  z-index: 1001;
  display: block;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 48%;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #74c5b5;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #74c5b5;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #ffffff;
  color: #000000;
  z-index: 1000;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(0);
  /* IE 9 */
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}

p.loadingtext {
  position: fixed;
  z-index: 1001;
  display: block;
  text-align: center;
  width: 100%;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

/* JavaScript Turned Off */
.no-js #loader-wrapper {
  display: none;
}

.no-js h1 {
  color: #222222;
}

#content {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 80%;
  max-width: 978px;
}

.change-password {
  margin-bottom: 10% !important;
}

.change-password .passinst {
  font-size: 11px;
}

.change-password .codealert {
  font-size: 12px;
}

.change-password .box-h {
  max-height: 385px;
  min-height: 350px;
  padding: 20px;
  height: 100%;
  align-items: center;
}

.change-password .form-control {
  font-size: 14px;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 9px;
  position: relative;
  z-index: 2;
}

.change-password .box-h .bodysec {
  padding: 0px 18px 0px 18px;
  margin-top: 15%;
  text-align: center;
}

.change-password .box-h.title_sec {
  display: flex;
  margin-top: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.change-password .passinst {
  font-size: 12px;
}

.change-password .codealert {
  font-size: 11px;
  text-align: left;
}

.change-password .box-h.title_sec .bodysec {
  margin-top: 0;
}

.change-password .box-h .loginform .btn {
  background-color: #74c5b5;
  border: none;
}

.change-password .box-h .loginform .btn:hover {
  background-color: #335596;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

@media (min-width: 768px) {
  .loginSec .box-h .bodysec h2 {
    font-size: 4rem;
  }

  .change-password .box-h .bodysec h2 {
    font-size: 4rem;
  }
}

.cme_part.common>.container #particles-js {
  z-index: 0;
}

.cmr_sec {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 20px;
}
.circle_circle{
  margin-top: 80px;
}
.cmr_sec .block_details {
  display: none;
}

.cmr_sec #display_box {
  /*display: none;*/
  min-height: 85px;
  width: 300px;
  border: 2px dotted #335596;
  position: absolute;
  top: 50px;
  left: auto;
  right: -90%;
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  padding: 10px;
  z-index: 11;
  background-color: #ffffff;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .cmr_sec #display_box {
    width: 225px;
    right: -54%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cmr_sec #display_box {
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: -50%;
  }
}

.cmr_sec #display_box .links {
  width: 50%;
  display: inline-block;
  position: relative;
  font-size: 14px;
  height: 30px;
  vertical-align: bottom;
}

.cmr_sec #display_box .links.r_auto {
  right: auto;
}

.cmr_sec #display_box .btn {
  background: #74c5b5;
  color: #fff;
  text-transform: capitalize;
}

.cmr_sec #display_box .btn:hover {
  background: #335596;
}

.cmr_sec #display_box label {
  color: #335596;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.cmr_sec #display_box label.input {
  color: #74c5b5;
}

.cmr_sec #main_circle {
   width: 80vw;         /* relative to viewport */
  max-width: 450px;    /* desktop limit */
  height: auto;
  aspect-ratio: 1/1;   /* always a circle */
  margin: 20px auto;
  border: 1px solid #74c5b5;
  border-radius: 50%;
  position: relative;
  
}

.cmr_sec #main_circle .circle {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 1px solid #74c5b5;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 9px;
  flex-direction: column;
  margin: 0 auto;
  cursor: pointer;
}

.cmr_sec #main_circle .circle:hover {
  border: 1px solid #335596;
  background-color: #e0f9f4;
}

.cmr_sec #main_circle #child-1,
.cmr_sec #main_circle #child-2,
.cmr_sec #main_circle #child-3,
.cmr_sec #main_circle #child-4,
.cmr_sec #main_circle #child-5,
.cmr_sec #main_circle #child-6,
.cmr_sec #main_circle #child-7,
.cmr_sec #main_circle #child-8,
.cmr_sec #main_circle #child-9,
.cmr_sec #main_circle #child-10,
.cmr_sec #main_circle #child-11,
.cmr_sec #main_circle #child-12,
.cmr_sec #main_circle #child-13,
.cmr_sec #main_circle #child-14,
.cmr_sec #main_circle #child-15,
.cmr_sec #main_circle #child-16,
.cmr_sec #main_circle #child-17 {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -30px;
  left: 200px;
  line-height: 1;
  /* &:hover{
    @include trans;
      cursor: pointer;
    &:before{
      opacity:0.6;
    }
   }*/
}

.cmr_sec #main_circle #child-1 img,
.cmr_sec #main_circle #child-2 img,
.cmr_sec #main_circle #child-3 img,
.cmr_sec #main_circle #child-4 img,
.cmr_sec #main_circle #child-5 img,
.cmr_sec #main_circle #child-6 img,
.cmr_sec #main_circle #child-7 img,
.cmr_sec #main_circle #child-8 img,
.cmr_sec #main_circle #child-9 img,
.cmr_sec #main_circle #child-10 img,
.cmr_sec #main_circle #child-11 img,
.cmr_sec #main_circle #child-12 img,
.cmr_sec #main_circle #child-13 img,
.cmr_sec #main_circle #child-14 img,
.cmr_sec #main_circle #child-15 img,
.cmr_sec #main_circle #child-16 img,
.cmr_sec #main_circle #child-17 img {
  max-width: 100%;
  margin-top: -3px;
}

.cmr_sec #main_circle #child-1:before,
.cmr_sec #main_circle #child-2:before,
.cmr_sec #main_circle #child-3:before,
.cmr_sec #main_circle #child-4:before,
.cmr_sec #main_circle #child-5:before,
.cmr_sec #main_circle #child-6:before,
.cmr_sec #main_circle #child-7:before,
.cmr_sec #main_circle #child-8:before,
.cmr_sec #main_circle #child-9:before,
.cmr_sec #main_circle #child-10:before,
.cmr_sec #main_circle #child-11:before,
.cmr_sec #main_circle #child-12:before,
.cmr_sec #main_circle #child-13:before,
.cmr_sec #main_circle #child-14:before,
.cmr_sec #main_circle #child-15:before,
.cmr_sec #main_circle #child-16:before,
.cmr_sec #main_circle #child-17:before {
  content: "";
  height: 169px;
  width: 137px;
  background-image: url(../img/hover-effect.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  margin: 0 auto;
  transform: rotate(6deg);
  top: -22px;
  left: -49px;
  right: 0;
  z-index: -1;
  opacity: 0;
}

.cmr_sec #main_circle #child-1.active:before,
.cmr_sec #main_circle #child-2.active:before,
.cmr_sec #main_circle #child-3.active:before,
.cmr_sec #main_circle #child-4.active:before,
.cmr_sec #main_circle #child-5.active:before,
.cmr_sec #main_circle #child-6.active:before,
.cmr_sec #main_circle #child-7.active:before,
.cmr_sec #main_circle #child-8.active:before,
.cmr_sec #main_circle #child-9.active:before,
.cmr_sec #main_circle #child-10.active:before,
.cmr_sec #main_circle #child-11.active:before,
.cmr_sec #main_circle #child-12.active:before,
.cmr_sec #main_circle #child-13.active:before,
.cmr_sec #main_circle #child-14.active:before,
.cmr_sec #main_circle #child-15.active:before,
.cmr_sec #main_circle #child-16.active:before,
.cmr_sec #main_circle #child-17.active:before {
  opacity: 1;
}

.cmr_sec #main_circle #child-2 {
  left: 284px;
  top: -5px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-2.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-2.active:before {
  top: -33px;
  left: -63px;
  right: 0;
  transform: rotate(29deg);
}

.cmr_sec #main_circle #child-3 {
  left: auto;
  right: 36px;
  top: 40px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-3.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-3.active:before {
  top: -39px;
  left: -71px;
  transform: rotate(51deg);
}

.cmr_sec #main_circle #child-4 {
  left: auto;
  right: -8px;
  top: 103px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-4.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-4.active:before {
  top: -47px;
  left: -79px;
  transform: rotate(70deg);
}

.cmr_sec #main_circle #child-5 {
  left: auto;
  right: -23px;
  top: 180px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-5.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-5.active:before {
  top: -65px;
  left: -79px;
  transform: rotate(91deg);
}

.cmr_sec #main_circle #child-6 {
  left: auto;
  right: -17px;
  top: auto;
  bottom: 128px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-6.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-6.active:before {
  top: -77px;
  left: -81px;
  transform: rotate(114deg);
}

.cmr_sec #main_circle #child-7 {
  left: auto;
  right: 22px;
  top: auto;
  bottom: 58px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-7.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-7.active:before {
  top: -85px;
  left: -75px;
  transform: rotate(133deg);
}

.cmr_sec #main_circle #child-8 {
  left: auto;
  right: 83px;
  top: auto;
  bottom: 4px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-8.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-8.active:before {
  top: -100px;
  left: -61px;
  transform: rotate(153deg);
}

.cmr_sec #main_circle #child-9 {
  left: auto;
  right: 163px;
  top: auto;
  bottom: -24px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-9.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-9.active:before {
  top: -103px;
  left: -45px;
  transform: rotate(175deg);
}

.cmr_sec #main_circle #child-10 {
  left: auto;
  right: 248px;
  top: auto;
  bottom: -19px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-10.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-10.active:before {
  top: -101px;
  left: -30px;
  transform: rotate(198deg);
}

.cmr_sec #main_circle #child-11 {
  left: 58px;
  right: auto;
  top: auto;
  bottom: 17px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-11.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-11.active:before {
  top: -90px;
  left: -11px;
  transform: rotate(-138deg);
}

.cmr_sec #main_circle #child-12 {
  left: 5px;
  right: auto;
  top: auto;
  bottom: 81px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-12.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-12.active:before {
  top: -75px;
  left: -4px;
  transform: rotate(-118deg);
}

.cmr_sec #main_circle #child-13 {
  left: -18px;
  right: auto;
  top: auto;
  bottom: 155px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-13.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-13.active:before {
  top: -60px;
  left: -8px;
  transform: rotate(-98deg);
}

.cmr_sec #main_circle #child-14 {
  left: -22px;
  right: auto;
  top: auto;
  bottom: 230px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-14.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-14.active:before {
  top: -53px;
  left: -8px;
  transform: rotate(-77deg);
}

.cmr_sec #main_circle #child-15 {
  left: 3px;
  right: auto;
  top: 82px;
  bottom: auto;
  /*&:hover, */
}

.cmr_sec #main_circle #child-15.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-15.active:before {
  top: -39px;
  left: -13px;
  transform: rotate(-57deg);
}

.cmr_sec #main_circle #child-16 {
  left: 51px;
  right: auto;
  top: 25px;
  bottom: auto;
  /*&:hover, */
}

.cmr_sec #main_circle #child-16.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-16.active:before {
  top: -30px;
  left: -24px;
  transform: rotate(-37deg);
}

.cmr_sec #main_circle #child-17 {
  left: 118px;
  right: auto;
  top: -12px;
  bottom: auto;
}

.cmr_sec #main_circle #child-17:hover,
.cmr_sec #main_circle #child-17.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-17:hover:before,
.cmr_sec #main_circle #child-17.active:before {
  top: -27px;
  left: -37px;
  transform: rotate(-17deg);
}

.cmr_sec #inner_circle {
  background-image: url(../img/crm-inner-circle1.png);
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 138px;
  left: 0;
  right: 0;
  margin: 0 auto;

  z-index: -2;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 50px #335596;

  transform-origin: 50% 50%;
  animation: spin 15s linear infinite; /* <-- add spin here */
}

/* keyframes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


.cmr_sec #center_circle {
  height: 170px;
  width: 170px;
  background-image: url(../img/crm2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
 
}

.cmr_sec #center_circle:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 50px #335596;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: hvr-ripple-out 2s infinite;
  animation: hvr-ripple-out 2s infinite;
  border-radius: 100%;
}

#passwordRule p {
  padding-bottom: 0 !important;
  margin-bottom: 5px !important;
  font-size: 11px !important;
}

#passwordRule {
  padding: 4px 10px !important;
}

#passwordform label.error {
  font-size: 11px !important;
  text-align: left;
  color: red;
  margin-bottom: 0 !important;
  display: block;
}

#changePasswordform label.error {
  font-size: 11px !important;
  text-align: left;
  color: red;
  margin-bottom: 0 !important;
  display: block;
}

#passwordform .form-group {
  margin-bottom: 0.7rem !important;
}

.passwordMessageArea {
  margin-top: .5rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 11px !important;
  padding: 5px !important;
  ;
}

.loginform.reg input:focus:required:invalid,
.loginform.reg textarea:focus:required:invalid,
.loginform.reg select:focus:required:invalid {
  border: 1px solid red;
  outline: none;
}

.loginform.reg input:required {
  box-shadow: none;
}

.loginform.reg input:invalid,
.loginform.reg textarea:invalid {
  box-shadow: none;
}

.form-group.ps-fields{
  display: inline-block;
  width: 49.5% !important;
  vertical-align: text-top;
}

.changePasswordform .btn-primary:focus{
  box-shadow: none !important;
}


/*# sourceMappingURL=custom.css.map */
/* Animate the whole CME section */
.cme_part {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 1.5s ease-out forwards;
}

/* Main circle animation */
/* Main circle animation */
/* Main circle animation */
.cme_part #main_circle {
  opacity: 0;
 
  animation: fadeInScaleRotate 1.5s ease-out forwards;
  animation-delay: 0.4s;
  transform: scale(0.5) rotate(0deg);
  animation: fadeInScale 1.5s ease-out forwards, spin 50s linear infinite;
  animation-delay: 0.4s, 1.9s; /* spin starts after fadeInScale finishes */
}

/* Slow infinite spin */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fade + scale + rotate keyframes */
@keyframes fadeInScaleRotate {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
}


/* Center circle animation */
.cme_part #center_circle {
  opacity: 0;
  transform: scale(0.5);
  animation: fadeInScale 1.5s ease-out forwards;
  animation-delay: 0.8s;
}

/* Hover effect animation */
.cme_part #hover_effect {
  opacity: 0;
  transform: rotate(4deg) scale(0.5);
  animation: fadeInScale 1.5s ease-out forwards;
  animation-delay: 1s;
}

/* Fade + scale animation keyframes */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}