header,main{min-width:320px}
.currency-table--container .down,.main-exchange-container .backgroundImg{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}
.main-comission-table,.main-currency-table{
    font-family:Inter,sans-serif;
    scroll-snap-align:start
}
.plans--go-right .next,.table--go-left .previous{transform:rotate(180deg)}
:root{
    --gradient-background:linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
    --bitcoin-orange:#F7931A;--soft-orange:#FFE9D5;
    --secondary-blue:#1A9Af7;--soft-blue:#E7F5FF;
    --warm-black:#282623;--black:#201e1c;
    --grey:#bababa;--dark-grey:#757575;
    --off-white:#faf8f7;--just-white:#fff}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{font-size:62.5%;font-family:'DM Sans',sans-serif}
header{
    position:relative;
    display:flex;
    flex-direction:column;
    place-content:center;
    width:100%;
    height:334px;
    text-align:center;
    background:var(--gradient-background)
}
header img{
    width:150px;
    height:24px;
    margin-top:60px;
    align-self:center
}
.header--title-container{
    width:90%;
    min-width:288px;
    max-width:900px;
    height:218px;
    margin-top:50px;
    text-align:center;
    align-self:center
}
.header--title-container h1{
    font-size:3rem;
    font-weight:700;
    line-height:3rem;
    color:var(--off-white)
}
.header--title-container p{
    font-size:1.5rem;
    font-weight:500;
    line-height:1.8rem;
    color:var(--soft-orange);
    margin-top:25px
}
.header--title-container .header--button{
    position:absolute;
    left:calc(50% - 114.5px);
    top:288px;display:block;
    margin-top:20px;
    padding:12px;
    width:229px;
    height:48px;
    background-color:var(--off-white);
    box-shadow:0 4px 8px rgba(89,73,30,.1);
    border-radius:4px;
    font-size:1.4rem;
    font-weight:700;
    align-content:center;
    text-align:start;
    text-decoration:none;
    color:var(--black)
}
.header--button span{
    position:absolute;
    top:12px;
    display:inline-block;
    width:24px;
    height:24px;
    margin-left:18px;
    background-image:url('../assets/images/icons/arrow-black-right.svg');
    transform:rotate(90deg)
}
main{width:100%;height:auto;background-color:var(--off-white)}
.main-exchange-container{
    width:100%;
    height:auto;
    padding:80px 0 30px;
    text-align:center;
    overflow-x:hidden}
.main-exchange-container--text{
    width:90%;
    min-width:288px;
    max-width:900px;
    margin:0 auto}
.main-exchange-container .backgroundImg{
    width:200px;
    height:200px;
    margin:0 auto 50px;
    background-image:url('../assets/images/bitcoin-red.svg')
}
.main-exchange-container--text h2{
    margin-bottom:30px;
    font-size:2.4rem;
    font-weight:700;
    line-height:2.4rem;
    color:var(--black)
}
.main-exchange-container--text p{
    margin-bottom:30px;
    font-size:1.5rem;
    font-weight:500;
    line-height:1.8rem;
    color:var(--dark-grey);
    text-align:center
}
.comission-table--date p,
.currency-table--date p{font-size:1.2rem;color:var(--warm-black);text-align:center}
.main-exchange-container--tables{
    display:flex;
    overflow:scroll;
    overflow-x:auto;
    scroll-behavior:smooth;
    width:100%;gap:16px;
    padding:0 16px
}
.main-exchange-container--tables::-webkit-scrollbar{display:none;height:0}
.main-currency-table{
    width:100vw;
    min-width:235px;
    max-width:500px;
    flex-shrink:0;
    height:360px;
    margin:0 auto
}
.main-currency-table .currency-table--title{
    margin-bottom:15px;
    font-family:'DM Sans',sans-serif;
    font-size:1.8rem;
    font-weight:700;
    line-height:2.4rem;
    color:var(--bitcoin-orange);
    text-align:left;padding-left:8rem
}
.comission-table--container,
.currency-table--container{
    width:60vw;
    min-width:235px;
    max-width:300px;
    height:250px;
    margin:0 auto;
    position:relative
}
.comission-table--container table,
.currency-table--container table{width:100%;height:100%}
.comission-table--container table tr td,
.currency-table--container table tr td{
    width:50%;
    font-size:1.6rem;
    font-weight:500;
    line-height:1.9rem;
    color:var(--grey);
    background-color:var(--just-white);
    text-align:left;padding-left:15px
}
.comission-table--container .table__top-left,
.currency-table--container .table__top-left{border-radius:16px 0 0}
.comission-table--container .table__top-right,
.currency-table--container .table__top-right{border-radius:0 16px 0 0}
.comission-table--container .table__bottom-left,
.currency-table--container .table__bottom-left{border-radius:0 0 0 16px}
.comission-table--container .table__bottom-right,
.currency-table--container .table__bottom-right{border-radius:0 0 16px}
.currency-table--container .table__right{
    font-size:1.4rem;
    font-weight:500;
    line-height:1.8rem;
    color:var(--dark-grey)
}
.currency-table--container .down{
    display:inline-block;
    width:16px;
    height:16px;
    margin-left:12px;
    background-image:url('../assets/images/icons/trending-down.png')
}
.currency-table--container .up{
    display:inline-block;
    width:16px;
    height:16px;
    margin-left:12px;
    background-image:url('../assets/images/icons/trending-up.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}
.table--go-left .previous,
.table--go-right .next{
    height:24px;
    background-image:url('../assets/images/icons/arrow-black-right.svg');
    display:inline-block;
    width:24px;
    margin-left:12px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat
}
.currency-table--date{
    width:190px;
    height:32px;
    margin:15px auto 0;
    padding:8px;
    background-color:var(--soft-orange);
    border-radius:4px
}
.currency-table--date p{font-weight:500;line-height:1.8rem}
.main-comission-table{
    width:100%;
    min-width:235px;
    max-width:500px;
    height:360px;
    margin:0 auto
}
.main-comission-table .comission-table--title{padding-left:6.3rem;color:var(--secondary-blue)}
.comission-table--date{
    width:190px;
    height:32px;
    margin:15px auto 0;
    padding:8px;
    background-color:var(--soft-blue);
    border-radius:4px
}
.comission-table--date p{font-weight:500;line-height:1.8rem}
.table--go-right{
    position:absolute;
    right:-42px;
    padding:8px;
    top:calc(50% - 20px)
}
.table--go-left{right:auto;left:-54px}
.main-product-details{
    position:relative;
    width:100%;
    min-width:320px;
    height:auto;
    padding:28px 12px;
    background-color:var(--black)
}
.product-detail--batata-logo{
    position:absolute;
    width:40px;
    height:24px;
    top:-1rem;
    left:calc(50% - 20px);
    background-image:url('../assets/images/icons/logo.png');
    transform:perspective(100px) rotateY(180deg)
}
.main-product-details--text{
    width:90%;
    min-width:288px;
    height:auto;
    margin:48px auto 0;
    text-align:center
}
.main-product-details--text h2{
    margin-bottom:24px;
    font-size:2.4rem;
    font-weight:700;
    line-height:2.4rem;
    color:var(--just-white)
}
.main-product-details--text p {
  margin-bottom:30px;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.8rem;
  color:grey;
  text-align:center;
}

.product-cards--container {
  display:flex;
  flex-direction:column;
  align-content:center;
  flex-wrap:wrap;
  gap:16px;
  height:auto;
}

.product-detail--card {
  width:100%;
  min-width:288px;
  max-width:400px;
  height:150px;
  padding:16px;
  background-color:var(--warm-black);
  border-radius:4px;
  box-shadow:0 4px 8px rgba(0,0,0,.16);
}

.product--card-title {
  margin-bottom:15px;
  font-size:1.8rem;
  font-weight:700;
  line-height:1.8rem;
  color:var(--just-white);
}

.product--card-body {
  font-size:1.4rem;
  font-weight:500;
  line-height:1.6rem;
  color:grey;
}

.product-detail--card .clock {
  display:inline-block;
  width:24px;
  height:24px;
  margin-bottom:12px;
  background-image:url('../assets/images/icons/clock-icon.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.product-detail--card .eye {
  display:inline-block;
  width:24px;
  height:24px;
  margin-bottom:12px;
  background-image:url('../assets/images/icons/eye-icon.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.product-detail--card .dollar-sign {
  display:inline-block;
  width:24px;
  height:24px;
  margin-bottom:12px;
  background-image:url('../assets/images/icons/dollar-sign.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.product-detail--card .check {
  display:inline-block;
  width:24px;
  height:24px;
  margin-bottom:12px;
  background-image:url('../assets/images/icons/check-circle.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.bitcoin-img-container {
  width:100%;
  min-width:320px;
  height:50vh;
  background-image:url(../assets/images/bitcoinbaby_2x.png);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.bitcoin-img-container h2 {
  padding-top:64px;
  font-size:2.4rem;
  font-weight:700;
  line-height:2.6rem;
  color:var(--just-white);
  text-align:center;
}

.main-plans-container {
  width:100%;
  min-width:320px;
  padding-bottom:72px;
  text-align:center;
}

.main-plans-container--text {
  width:90%;
  min-width:288px;
  height:auto;
  margin:0 auto 52px;
}

.main-plans-container--text h2 {
  padding-top:52px;
  font-size:2.4rem;
  font-weight:700;
  line-height:2.6rem;
  color:var(--black);
}

.main-plans-container--text p {
  padding-top:32px;
  font-size:1.4rem;
  font-weight:500;
  line-height:1.8rem;
  color:#757575;
}

.plans-cards--slider {
  display:flex;
  height:316px;
  overflow-x:scroll;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
}

.plans-container--card {
  position:relative;
  scroll-snap-align:center;
  width:60vw;
  min-width:234px;
  max-width:320px;
  height:250px;
  margin:52px 24px 0;
  padding:0 15px;
  background-color:var(--just-white);
  border-radius:16px;
  box-shadow:0 4px 8px rgba(89,73,30,.16);
}

.highlight-plan,footer {
  background-color:var(--bitcoin-orange);
}

.plans-cards--slider::-webkit-scrollbar {
  display:none;
  height:0;
}

.highlight-plan {
  position:absolute;
  top:-16px;
  left:calc(50% - 60px);
  width:120px;
  height:32px;
  border-radius:8px;
  color:var(--just-white);
  font-size:1.4rem;
  font-weight:700;
  padding:8px;
}

.plan-info-container {
  width:100%;
  height:100%;
  padding:16px;
  text-align:center;
}

.plan-info--title {
  margin-bottom:16px;
  font-size:1.4rem;
  font-weight:700;
  line-height:2.6rem;
  color:var(--black);
}

.plan-info--price {
  padding:4px 0;
  font-size:5.3rem;
  font-weight:700;
  line-height:6.3rem;
  color:var(--black);
}

.dollar-icon {
  position:absolute;
  font-size:1.2rem;
  font-weight:400;
  top:4.8rem;
  left:7.4rem;
  color:var(--black);
}

.plan-info--saving,footer .footer--links ul {
  font-size:1.4rem;
  font-weight:500;
  line-height:1.8rem;
}

.plan-info--saving {
  color:var(--dark-grey);
}

.plan-info--ca {
  margin:12px 0;
  width:152px;
  height:48px;
  border:2px solid var(--bitcoin-orange);
  border-radius:4px;
  background-color:var(--off-white);
  font-family:'DM Sans',sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--warm-black);
  line-height:1.8rem;
}

.plan-info--ca span {
  display:inline-block;
  width:24px;
  height:24px;
  margin-left:4px;
  background-image:url('../assets/images/icons//arrow-right.svg');
  vertical-align:middle;
}

#price-card3 span {
  left:6.2rem;
}

.plans-cards--slider .plans--go-left {
  position:absolute;
  z-index:1;
  margin-top:150px;
  left:20px;
  padding:8px;
}

.plans--go-left .previous {
  display:inline-block;
  width:24px;
  height:24px;
  margin-left:12px;
  background-image:url('../assets/images/icons/arrow-gray-left.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.plans-cards--slider .plans--go-right {
  position:absolute;
  z-index:1;
  margin-top:150px;
  padding:8px;
  right:32px;
}

.plans--go-right .next {
  display:inline-block;
  width:24px;
  height:24px;
  margin-left:12px;
  background-image:url('../assets/images/icons/arrow-gray-right.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

footer {
  display:flex;
  width:100%;
  height:150px;
}

footer section {
  display:flex;
  width:50%;
  justify-content:center;
  align-items:center;
  color:var(--just-white);
}

footer .footer--links ul {
  list-style:none;
}

.footer--links a {
  text-decoration:none;
}

.footer--logo {
  display:grid;
  height:100%;
  align-content:center;
}

.footer--logo img {
  margin-bottom:12px;
  width:42px;
  height:24px;
  justify-self:center;
}