body.bg-color {
  background: linear-gradient(104deg, #7fc5c4 12.37%, #5482e6 89.28%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Barlow", serif;
}
header .main-nav {
  margin-bottom: 52px;
}
header .main-nav .nav-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 32px;
}
.card-main {
  padding: 17px 21px 21px;
  border-radius: 5px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.46);
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 500px !important;
  transition: height 0.3s ease-in-out;
}

.card-main .card-header {
  font-size: 26px;
  color: #555;
  padding-bottom: 0;
  text-transform: uppercase;
  line-height: normal;
}
.card-main .img-wrapper,
 .card-main .img-wrapper {
  width: 100%;
  max-width: 199px;
  margin: 0 auto;
}
.card-main .img-wrapper img,
.card-main .img-wrapper img {
  width: 100%;
  object-fit: cover;
}
.card-main .card-body {
  padding-top: 0;
}

.card-main .accordion-wrapper .accordion-header, .card-main .accordion-wrapper .accordion-header a {
  font-size: 15px;
  color: #505050;
  cursor: pointer;
  gap: 10px;
}
.card-main .accordion-wrapper .accordion-header.collapsed .min-icon {
  display: none !important;
}
.card-main .accordion-wrapper .accordion-header.collapsed .max-icon {
  display: block !important;
}
.card-main .accordion-wrapper .sub-section li a{
  color: #826969;
  font-size: 14px;
  cursor: pointer;
}
.card-main .accordion-wrapper .sub-section li .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.card-main .card-body .img-wrapper {
  margin-bottom: 14px;
}
.svg-icon {
  border-radius: 3px;
  background: #7fc5c4;
}

/* Card flip css */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.exhibition-card .card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
}

.card-front {
  background: #fff;
}

.card-back {
  background: #ff0066;
  transform: rotateY(180deg);
}

/* card flip css */

.scene {
  perspective: 1000px;
}

.sc-card {
  position: relative;
  /* width: 100%; */
  /* height: 100%; */
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.sc-card.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  /* height: 600px; */
  /* height: 100%; */
  backface-visibility: hidden;
}

.flip-trigger{
  cursor: pointer;
}
.card__face--back {
  transform: rotateY(180deg);
}

.card-back-main {
  background: #ececec !important;
}
.card-back-header {
  font-size: 16px !important;
}
.back-btn {
  padding: 0 0px 0px 5px;;
}
.signin-msg {
  color: #505050;
  font-size: 18px;
}
.card-header,
.img-wrapper {
  flex-grow: 0; /* Keeps them at the top */
}
.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.list-center-item {
  font-size: 32px;
}




/* login page css */
.login-block {
  background: #fff;
  padding: 24px 0 22px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.46);
  border-radius: 3px;
  width: 100vw;
}
.main-wrapper {
  display: grid;
  place-items: center;
  height: 100vh;
}

.login-section .login-header {
  font-size: 26px;
  text-transform: uppercase;
  color: #555;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  line-height: normal;
}
.login-form .user-input, .login-form .pass-input{
  border: none;
  border-bottom: 1px solid #86DAD8;
  width: 100%;
  padding: 10px 4px;
}
.login-form .user-input:focus-visible, .login-form .user-input:focus, .login-form .pass-input:focus-visible, .login-form .pass-input:focus{
  border: none;
  border-bottom: 1px solid #86DAD8;
  outline: none;
}
.footer .login-btn {
  border-radius: 3px;
  background: #7fc5c4;
  gap: 3px;
  color: #fff;
  font-size: 14px;
  padding: 7px 10px;
}
.logo-wrapper {
  width: 100% !important;
  max-width: 110px !important;
}
.logo-wrapper .logo {
  width: 100%;
  max-width: 110px;
}
.right-logo-wrapper {
  width: 100%;
  max-width: 130px;
}
.right-logo-wrapper .logo {
  width: 100%;
  max-width: 130px;
}
.logo-wrapper .logo img,
.right-logo-wrapper .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-wrapper .header,
.right-logo-wrapper .header {
  color: rgba(85, 85, 85, 0.3);
  font-size: 18px;
  text-transform: uppercase;
  line-height: normal;
}

.login-section .login-form-wrapper {
  width: 100%;
  max-width: 320px;
}

.copy-right-wrapper {
  color: #fff;
  font-size: 10px;
}