/********** common setting **********/
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../font-awesome-4.7.0/fonts/BrandonGrotesque-Regular.woff2")
      format("woff2"),
    url("../font-awesome-4.7.0/fonts/BrandonGrotesque-Regular.woff")
      format("woff");
  font-weight: normal;
}

html {
  font-family: Brandon Grotesque !important;
}

body {
  font-family: Brandon Grotesque !important;
  overflow-x: hidden !important;
}

.announcement {
  background: #5e718b !important;
  color: #ffffff !important;
  padding: 5px;
  text-align: center;
}

h2 {
  font-size: 2.8rem !important;
  font-weight: 700;
}

img {
  display: block;
  max-width: 100%;
}

header img {
  max-width: 270px !important;
}

a,
button {
  cursor: pointer;
}

.jumbotron {
  margin-bottom: 0 !important;
}

.atlas-cta {
  border-radius: 22px !important;
  padding: 12px 30px !important;
  font-weight: 700;
  transition: 0.3s ease-in-out !important;
}

.atlas-cta:hover {
  text-decoration: none;
  transform: translateY(-5px);
}

.atlas-cta-wide {
  width: 100%;
}

.cta-green {
  background: #5e718b;
  color: white;
}

.cta-green:hover {
  color: #ffffff;
  background: #5e718b;
}

.cta-blue {
  background: #5e718b;
  color: #ffffff;
}

.cta-blue:hover {
  color: #ffffff;
  background: #5e718b;
}

.cta-ghost {
  border: 2px solid #5e718b !important;
  color: #5e718b;
}

.cta-ghost:hover {
  color: #ffffff;
  background: #5e718b;
}

#banner {
  background-size: cover;
}

/********** banner **********/
.header {
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.herobanner {
  padding-left: 50px !important;
}

#banner header {
  overflow: hidden;
}

#banner header img {
  max-width: 80px;
}

/********** feature (skew background) **********/
.feature img {
  width: 100%;
  max-width: 200px;
}

#feature-first {
  background: linear-gradient(168deg, #ffffff 55%, #9eaeae 0);
}

#feature-last {
  background: #9eaeae;
}

/********** price table **********/
.price-table-card {
  perspective: 1000px;
}

.price-table-inner {
  transition: transform 0.5s, box-shadow 0.5s;
  transform-style: preserve-3d;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.1),
    0 24px 48px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

.price-table-inner:hover {
  transform: rotateY(6deg) rotateX(4deg) scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 24px 48px rgba(0, 0, 0, 0.15),
    0 36px 72px rgba(0, 0, 0, 0.1);
}

.price-table-inner h4 {
  font-weight: bold;
}

#price-table {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#price-table__earnhistory {
  background: rgb(198, 146, 44);
  color: #ffffff;
  padding: 20px 0;
}

#price-table__redeem {
  background: #9eaeae;
  color: #000000;
  padding: 20px 0;
}

#price-table ul li {
  padding: 5px 0;
}

/********** contact **********/
#contact {
  background-size: cover;
}

#contact ul li {
  padding: 3px 0;
}

#contact form {
  color: #9eaeae;
}

#contact form input,
#contact form textarea {
  background: transparent;
  border: 1px solid #9eaeae;
  color: #ffffff;
}

label {
  font-size: 20px;
}

.contactform {
  padding: 4rem 2rem 0 2rem !important;
}

.body {
  height: 100vh;
}

/********** copyright **********/
#copyright {
  background: #5e718b;
  padding: 2rem 3rem;
}

#copyright #social-media a {
  width: 40px;
  height: 40px;
  border-radius: 99%;
  background: #ffffff;
  transition: 0.4s ease;
}

#copyright #social-media a i {
  color: #5e718b;
  font-size: 1.2rem;
  line-height: 40px;
}

#copyright #social-media a:hover {
  background: #9eaeae;
}

#copyright #social-media a:hover i {
  color: #ffffff;
}

/********** RWD **********/
@media (max-width: 575px) {
  #banner h1 {
    font-size: 3.6rem;
  }
}

/********** loader **********/
#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

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

.mobile {
  display: none !important;
}

@media (max-width: 768px) {
  br {
    display: none;
  }

  .form-group {
    text-align: left !important;
  }

  #price-table {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .contactform {
    padding: 4rem 0 2rem 0 !important;
  }

  .mobile {
    display: block !important;
  }

  .desktop {
    display: none !important;
  }

  header img {
    max-width: 200px !important;
  }

  .herobanner {
    padding-left: 15px !important;
  }

  .header {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}