* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
:root { --gray-text: #4C4C4C; --font-family: 'Inter','Verdana', sans-serif; --blue-color: #005CA9 }
body { line-height: 1.5; background-color: #fff; font-family: var(--font-family); font-size: 18px; position: relative; font-weight: 400; min-height: 100vh; display: flex; flex-direction: column; padding: 0px; margin: 0px; height: 100%; }
#Body { min-width: 320px; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; margin: 0; }
audio, canvas, progress, video { display: inline-block; }
img { border: 0; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: #222957; margin: 0; padding: 0; }
input[type=checkbox], input[type=radio] { width: auto; }
a:focus,a:hover { border-bottom: 1px solid; }
a, a:visited, a:hover { text-decoration: none }
.wrap { width: 98%; max-width: 1262px; margin: 0 auto; }
.dFlex { display: flex; }
p { padding: 0; margin: 0; }
main { margin: 107px 0 143px; position: relative; background: linear-gradient(45deg, var(--blue-color), var(--blue-color), var(--blue-color),var(--blue-color),var(--blue-color), #09AFE6, #09B1E8); padding-bottom: 84px; }
.domain { color: #fff; height: 244px; padding-left: 285px; display: flex; flex-direction: column; justify-content: center }
h1 { color: #fff; font-size: 40px; font-weight: 600; }
.domain h2 { color: #fff; font-size: 19px; font-weight: normal; }
.domain h3 { color: #fff; font-size: 15px; font-weight: normal; margin-bottom: 20px;}
.content { background-color: #F5F5F5; color: var(--gray-text); padding-bottom: 30px; }
h3 { color: var(--gray-text); font-weight: 500; }
.leftContent { display: flex; flex-direction: column; align-items: center; padding-right: 70px; margin-top: 20px; }
.leftContent > span { font-size: 21px; margin-bottom: 20px; }
.options { display: flex; flex-direction: row; justify-content: center; text-align: center; align-items: center; }
.options > * { flex-basis: 27%; font-size: 25px; }
.options > span { font-weight: 600; }
.stats { display: flex; text-align: center }
.stats > div:first-child { border-right: 1px solid black; padding-right: 45px; }
.stats > div:last-child { padding-left: 45px; }
.stats > div { flex-basis: 50%; padding: 45px 0; column-gap: 18px; }
.stats > div > div { flex-basis: 33%; display: flex; flex-direction: column; }
.stats b { font-weight: 600; font-size: 22px; }
.stats span { font-size: 16px; padding-top: 5px; }
.containerAside { position: relative; flex-shrink: 0; width: 372px; }
aside { position: absolute; box-shadow: rgb(0 0 0 / 10%) 0px 0px 28px; height: 642px; top: -180px; background-color: #fff; border-radius: 9px; padding: 38px 23px 33px; }
aside h3 { padding-bottom: 5px; font-size: 22px; }
aside > span { color: var(--blue-color); font-weight: 600; }
.btns { flex-direction: column; row-gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #E3E3E3; margin-top: 20px; }
.blueBtn { line-height: 0px; max-height: 0px; border-radius: 0px; text-align: center; text-decoration: none; transition: filter 0.5s }
.greenBtn, .grayBtn { line-height: 45px; max-height: 45px; border-radius: 6px; text-align: center; text-decoration: none; transition: filter 0.5s }
.btns b, .btns svg { color: #fff; }
.greenBtn:hover, .grayBtn:hover { text-decoration: none; filter: opacity(80%); }
.greenBtn { background-color: #10B981; color: #D0F1E6; }
.grayBtn { background-color: #51667B; color: #CBD1C8; }
.btns svg { height: 21px; width: 22px; transform: translate(0, 20%); }
ul { list-style-type: none; padding: 0; display: flex; flex-direction: column; row-gap: 20px; }
ul li:before { content: ''; display: inline-block; transform: rotate(45deg); height: 12px; width: 6px; border-bottom: 2px solid var(--blue-color); border-right: 2px solid var(--blue-color); margin-right: 16px; }
ul li { font-size: 14px; }
.methods { justify-content: space-evenly; padding-top: 10px; }
.methods svg { height: 40px; width: 43px; filter: sepia(100%) opacity(60%) grayscale(0.6); }
.methods svg:last-child, .methods svg:nth-child(4) { height: 50px; width: 53px; transform: translate(0, -8%); }
.listedBy { background-color: #fff; height: 135px; display: flex; align-items: center; flex-direction: row; }
.listedBy > div { display: flex; }
.userIcon { position: relative; overflow: hidden; height: 36px; width: 36px; border-radius: 50%; border: 3px solid #7F8896; background-color: #E5E7EA; margin-right: 13px; }
.userIcon > div { position: absolute; }
.userIcon > div:first-child { height: 15px; width: 15px; border-radius: 50%; border: 3px solid #7F8896; background-color: #fff; flex-shrink: 0; top: calc(50% - 2px); left: 50%; transform: translate(-50%,-50%); }
.userIcon > div:last-child { height: 23px; width: 23px; border-radius: 50%; border: 3px solid #7F8896; background-color: #fff; flex-shrink: 0; top: calc(50% + 15px); left: 50%; transform: translate(-50%,-50%); }
.listedBy span { font-size: 13px; filter: opacity(60%); font-weight: 600; }
.name { display: block; filter: opacity(90%) !important; font-size: 16px !important; line-height: 1; }
.listedBy > .wrap > div:last-child { display: flex; flex-direction: column; }

@media screen and (max-width:1185px) {
    .leftContent { padding-right: 30px; }
    .stats > div:first-child { padding-right: 20px; }
    .stats > div:last-child { padding-left: 20px; }
}

@media screen and (max-width:1185px) {
    .stats > div { flex-direction: column; align-items: center; row-gap: 20px; }
    .content > .dFlex { justify-content: center; }
}

@media screen and (max-width:1000px) {
    .wrap { width: 99%; }
    .domain { padding-left: 100px; }
    .stats > div { flex-basis: auto; }
    .leftContent { padding-right: 10px; }
}

@media screen and (max-width:767px) {
    .domain { padding: 0; text-align: center; }
    .content > .dFlex { flex-direction: column; align-items: center; }
    .leftContent { order: 2; }
    .containerAside { order: 1; height: 629px; }
    aside { top: -20px; width: 100%; }
    .stats > div:first-child { padding-right: 10px; }
    .stats > div:last-child { padding-left: 10px; }
}

@media screen and (max-width:500px) {
    .options > span { display: none }
    .options { justify-content: space-around; }
    .options > * { flex-basis: 50%; padding: 0 10px; }
    .containerAside { width: 96%; }
    ul { row-gap: 15px; margin-bottom: 10px; }
    .methods { padding-top: 0 }
    .stats > div { padding-top: 25px; }
}



.invalid {
  border: 1px solid red;
}

.mb-2 {
  margin-bottom: 20px;
}

.mb-4 {
  margin-bottom: 40px;
}



input {
  padding: 10px;
  border-radius: 5px;
  width: 280px;
  border: 1px solid rgb(34, 75, 179);
  font-size: 18px;
  outline: none;
  color: #333;
}

.error {
  color: red;
  font-size: 14px;
  margin-top: 6px;
}

.success {
  color: rgb(0, 114, 66);
  font-size: 14px;
  margin-top: 12px;
  display: none;
}

.fail {
  color: red;
  font-size: 14px;
  margin-top: 12px;
  display: none;
}

label {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
}

.hide {
  opacity: 0;
}

textarea {
  width: 300px;
  border-radius: 5px;
  outline: none;
  padding: 5px;
  height: 100px;
  font-size: 18px;
}

button {
  color: black;
  padding: 10px;
  border: 1px solid rgb(34, 75, 179);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  transition: all 0.5s;
  color: rgb(34, 75, 179);
}

button:hover {
  background-image: linear-gradient(
    to right,
    rgb(34, 75, 179) 0%,
    rgb(38, 70, 204) 100%
  );
  color: white;
}

form {
  padding: 1px;
}