:root {
  --text-blue: #0001b9;
  --text-green: #29a443;
  --text-second-green: #5ed05c;
  --text-purple: #361a70;
  --border-radius-size: 10px;
  --border-top-height: 15px;
  --white: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.block {
  max-width: 1800px;
  margin: auto;
  padding: 2rem 5%;
}

/* Header initial style */
.header .header-na-list-item-drop-item-a {
  color: #333;
}

.cover {
  margin-top: var(--header-height);
  margin-bottom: 1rem;
  width: 100%;
}

.cover-img {
  object-fit: contain;
  object-position: top;
  width: 100%;
  transform: scaleX(125%);
  -webkit-transform: scaleX(125%);
  -moz-transform: scaleX(125%);
  -ms-transform: scaleX(125%);
  -o-transform: scaleX(125%);
}

.prices-intro {
  margin-bottom: 2em;
}

.prices-intro-title {
  color: var(--text-blue);
  font-weight: 800;
  font-size: 4em;
  margin-bottom: .6em;
}

.prices-intro-description {
  color: var(--text-purple);
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.3em;
}

.prices-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3em 2em;
}

/* Card classes */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: 330px;
  padding: 1.5rem;
  border-top-right-radius: var(--border-radius-size);
  border-top-left-radius: var(--border-radius-size);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  transition: box-shadow 150ms ease-in-out;
  -webkit-transition: box-shadow 150ms ease-in-out;
  -moz-transition: box-shadow 150ms ease-in-out;
  -ms-transition: box-shadow 150ms ease-in-out;
  -o-transition: box-shadow 150ms ease-in-out;
}

.card:first-child::before {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--border-top-height);
  top: 0;
  left: 0;
  background: linear-gradient(to right,#a1de1d, #3bd698, #589cec, #2745af);
  border-top-right-radius: var(--border-radius-size);
  border-top-left-radius: var(--border-radius-size);
}

.card:nth-child(2)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--border-top-height);
  top: 0;
  left: 0;
  background: linear-gradient(to right,#589cec, #2745af, #c47eff);
  border-top-right-radius: var(--border-radius-size);
  border-top-left-radius: var(--border-radius-size);
}

.card:first-child::after,
.card:nth-child(2)::after {
  content: 'Solutions';
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--text-blue);
  color: var(--white);
  padding: .4rem 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: translateY(-15%);
  -webkit-transform: translateY(-15%);
  -moz-transform: translateY(-15%);
  -ms-transform: translateY(-15%);
  -o-transform: translateY(-15%);
}

.card:nth-child(3)::after {
  content: 'Advisory';
  position: absolute;
  top: 0;
  left: 0;
  background-color: #8787FF;
  color: var(--white);
  padding: .4rem 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: translateY(-15%);
  -webkit-transform: translateY(-15%);
  -moz-transform: translateY(-15%);
  -ms-transform: translateY(-15%);
  -o-transform: translateY(-15%);
}

.subcard:nth-child(1)::before,
.subcard:nth-child(2)::before {
  content: 'Custom Offering';
  position: absolute;
  top: 0;
  left: 0;
  padding: .4rem 1rem;
  background-color: #08BAB1;
  color: var(--white);
  padding: .4rem 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: translateY(-15%);
  -webkit-transform: translateY(-15%);
  -moz-transform: translateY(-15%);
  -ms-transform: translateY(-15%);
  -o-transform: translateY(-15%);
  z-index: 10;
}

.card:nth-child(3)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--border-top-height);
  top: 0;
  left: 0;
  background: linear-gradient(to right,#589cec, #2745af, #5202c4,#c47eff);
  border-top-right-radius: var(--border-radius-size);
  border-top-left-radius: var(--border-radius-size);
}

.card:nth-child(1) {
  align-self: flex-start;
}

.card:nth-child(3) {
  align-self: flex-start;
}

.card:hover {
  box-shadow: var(--text-second-green) 3px 3px 5px, var(--text-second-green) -3px 3px 5px;
}

.card-intro {
  width: 90%;
  margin-top: 1.2em;
  font-size: 1.4em;
  font-weight: 500;
  color: var(--text-blue);
}

.card-intro span {
  color: var(--text-green);
}

.card-cost {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.card-cost-price {
  color: var(--text-blue);
  font-size: 2em;
  font-weight: 800;
}

.card-cost-price sup {
  font-size: .6em;
}

.card-cost-text {
  color: var(--text-purple);
}

.card-description {
  color: var(--text-purple);
  font-size: 1.15em;
  width: 90%;
}

.card-elements-title {
  color: var(--text-green);
  font-size: 1.15em;
  font-weight: 500;
}

.card-element-list {
  margin-top: .8rem;
  margin-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  list-style: none;
}

.card-element-list-item {
  display: flex;
  align-items: center;
  gap: 2.5em;
  color: var(--text-purple);
}

.card-element-list-item i{
  font-size: 1.1em;
  color: var(--text-blue);
}

.card-element-list-item span {
  font-size: 1.1em;
}

.--special-item {
  display: block;
  font-size: .9em;
}

.card-button {
  color: var(--white);
  font-size: 1.2em;
  font-weight: 500;
  background-color: var(--text-second-green);
  align-self: flex-start;
  padding: .4rem 1.5rem;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

/* Subcard classes */

.card-subwrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 3em 2em;
  justify-content: center;
}

.subcard {
  position: relative;
  width: 330px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2.5rem;
  border-top-right-radius: var(--border-radius-size);
  border-top-left-radius: var(--border-radius-size);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.subcard:first-child, .subcard:nth-child(2) {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.subcard:first-child {
  background-image: url(../images/pricing/blueimage1.webp);
}

.subcard:nth-child(2) {
  background-image: url(../images/pricing/blueimage2.webp);
}

.subcard::after {
  content: '';
  position: absolute;
  width: 100%;
  height: var(--border-top-height);
  top: 0;
  left: 0;
  background: linear-gradient(to right,#a1de1d, #3bd698, #589cec);
  border-top-right-radius: var(--border-radius-size);
  border-top-left-radius: var(--border-radius-size);
}

.subcard-intro,
.subcard-description {
  text-align: center;
  color: var(--white);
}

.subcard-intro {
  margin-top: 1.4em;
}

.subcard-intro-title {
  font-weight: 400;
  font-size: 1.5em;
}

.subcard-intro-content {
  font-size: .85em;
  font-weight: 200;
}

.subcard-description {
  font-size: 1em;
  width: 85%;
  font-weight: 500;
}

.subcard-button {
  background-color: var(--text-blue);
  color: var(--white);
  font-weight: 500;
  font-size: 1.4em;
  padding: .4rem 1.5rem;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

@media screen and (min-width: 1400px) {
  .block {
    padding: 2rem calc( calc(1400 / 100) * 7px);
  }
  .cover {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 1258px) {
  .prices-intro-title {
    font-size: 3.8em;
  }
}

@media screen and (max-width: 768px) {
  .prices-intro-title {
    font-size: 2.5em;
  }
  .prices-intro-description {
    font-size: 1em;
    line-height: 1.1em;
  }
  .card, .subcard{
    width: 250px;
  }
  .card {
    gap: .8rem;
  }
  .card-intro {
    width: 100%;
    font-size: .9em;
  }  
  .card-cost-price {
    font-size: 1em;
  }  
  .card-cost-text {
    font-size: .8em;
  }
  .card-description {
    font-size: .8em;
    line-height: 1.2em;
    width: 100%;
  }
  
  .card-elements-title {
    font-size: .9em;
  }
  
  .card-element-list-item {
    gap: 1em;
  }
  
  .card-element-list-item i,  
  .card-element-list-item span {
    font-size: .8em;
  }
  .--special-item {
    font-size: .7em;
  }
  .card-button {
    font-size: .9em;
  }
  .card-subwrapper {
    min-width: 250px;
    gap: 1em 2em;
    width: calc(50% - 4em);
  }
  .subcard-intro-title {
    font-size: .9em;
  }
  .subcard-intro-content {
    font-size: .7em;
  }
  .subcard-description {
    font-size: .9em;
    width: 90%;
  }
}

@media screen and (max-width: 591px) {
  .card-subwrapper {
    gap: 3em 2em;
  }
}

@media screen and (max-width: 480px) {
  .cover {
    margin-bottom: 0;
  }
  .cover-img {
    width: 100%;
    transform: scaleX(120%) translate(5%,-20%);
    -webkit-transform: scaleX(120%) translate(5%,-20%);
    -moz-transform: scaleX(120%) translate(5%,-20%);
    -ms-transform: scaleX(120%) translate(5%,-20%);
    -o-transform: scaleX(120%) translate(5%,-20%);
  }
  .card, .subcard {
    max-width: 300px;
  }
  .prices {
    padding: 0 1.8rem 1.8rem 1.8rem;
  }
  .prices-intro-title {
    font-size: 1.7em;
  }
  .prices-intro-description {
    font-size: .9em;
    line-height: 1.2em;
  }
  .card-cost-text {
    font-size: .7em;
  }
  .card-elements-title {
    font-size: .8em;
  }
  .card-element-list-item {
    gap: .8em;
  }
  .--special-item {
    font-size: .7em;
  }
  .card-button {
    font-size: .8em;
  }
  .subcard-description {
    width: 100%;
  }
  .card-subwrapper {
    width: 100%;
  }
}