:root {
    --bitcoin-oranje: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-balck: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

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

html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

header {position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 320px;
height: 334px;
text-align: center;
background:linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);}

header img {width: 150px;
height:24px;
margin-top: 60px;
align-self: center;}

.header--tittle-container {width: 90%;
min-width: 288px;
max-width: 900px;
height: 218px;
margin-top: 40px;
text-align: center;
align-self: center;}

.header--tittle-container h1 { font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem; 
    color: var(--just-white);
}

.header--tittle-container p {font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: var(--soft-orange);
margin-top: 24px;}

.header--tittle-container .header--button { 
    position: absolute;
    left: calc(50% - 120px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

.header--button span {display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url("/Assets/ICONOS/Downarrow.svg");
}

main {
width: 100%;
height: auto;
background-color: var(--off-white);
}

.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}

.main-exchange-container-title {
width: 90%;
min-width: 300px;
max-width: 900px;
margin: 0 auto;
}

.main-exchange-container .backgroundImg {
width: 200px;
height: 200px;
margin: 0 auto;
margin-bottom: 50px;
background-image: url("/Assets/Imagenes/Bitcoin.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.main-exchange-container h2 {
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.56rem;
    color: var(--black);
}

.main-exchange-container p {
margin-bottom: 30px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6rem;
color: #757575;
}



.main-currency-table {
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: sans-serif, "Inter"; 
}

.main-currency-table .currency-table--title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--bitcoin-oranje);
}

.currency-table--container {
width: 90%;
min-width: 200px;
max-width: 300px;
height: 250px;
margin: 0 auto;}

.currency-table--container table {
width: 100%;
height: 100%;}

.currency-table--container td {
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(--grey) ;
background-color: var(--just-white);
}

.currency-table--container .table__top-left {
border-radius: 16px 0 0 0 ;}

.currency-table--container .table__top-right {
border-radius: 0 16px 0 0;}

.currency-table--container .table__bottom-left {
border-radius: 0 0 0 15px;
}

.currency-table--container .table__bottom-right {
border-radius: 0 0 16px 0;
}

.currency-table--container .table__right {
color: #757575;
font-weight: normal;
font-size: 1.4rem;
line-height: 1.7rem;
}


.currency-table--container .down {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
background-image: url("/Assets/ICONOS/trending-down\ 1.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.currency-table--container .up {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
background-image: url("/Assets/ICONOS/trending-up\ 1.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.main-product-detail {
position: relative;
width: 100%;
min-width: 320px;
height: auto;
padding: 20px 10px;
background-color: var(--warm-balck);
}
.product-detail--batata-logo {
position: absolute;
width: 40px;
height: 25px;
top: -10px;
left: calc(50% - 20px);
background-image: url("/Assets/ICONOS/Potatologo.png");
}

.product-detail--title {
width:90% ;
min-width: 288px;
height: auto;
margin: 0 auto;
margin-top: 50px;
text-align: center;

}

.product-detail--title h2 {
margin-bottom: 20px;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(--just-white);
}

.product-detail--title p {
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
}

.product-detail--card {
width: 90%;
min-width: 288px;
max-width: 400px;
height:150px;
margin: 15px auto;
padding: 15px;
background-color: black;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail--card .clock {
display: inline-block;
width: 28px;
height: 28px;
margin-bottom: 10px;
background-image: url("/Assets/ICONOS/Service3.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.product-detail--card .eye {
display: inline-block;
width: 28px;
height: 28px;
margin-bottom: 10px;
background-image: url("/Assets/ICONOS/Service4.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.product-detail--card .money {
display: inline-block;
width: 28px;
height: 28px;
margin-bottom: 10px;
background-image: url("/Assets/ICONOS/Service2.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.product-detail--card .information {
display: inline-block;
width: 28px;
height: 28px;
margin-bottom: 10px;
background-image: url("/Assets/ICONOS/Service1.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
    
.product--card-tittle {
margin-bottom: 15px;
font-size: 1.8rem;
line-height: 1,8rem;
font-weight: bold;
color: var(--just-white);
}

.product--card-body {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
}

.bitcoin-img-container {
width: 100%;
min-width: 320px;
height: 50vh;
background-image: url("/Assets/Imagenes/bitcoinbaby\ 1.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

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

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

.plans--title {
width: 90%;
min-width: 288px;
height: auto;
margin: 0 auto;
margin-bottom: 50px;}

.plans--title h2 {
padding-top: 50px;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(--black);
}

.plans--title p {
padding-top: 30px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #757575;
}

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

.plans-container--card {
position: relative;
scroll-snap-align: center;
width: 60%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 50px auto 0;
padding: 0 15px;
background-color: var(--just-white);
border-radius: 15px;
box-shadow: 0 4px 8px rgba(86, 73, 30, 0.16) ;
}

.recomendado {
position: absolute;
width: 120px;
height: 31px;
background-color: var(--bitcoin-oranje);
border-radius: 8px;
color: var(--just-white);
left: calc(50% - 60px);
top: -15px;
font-size: 1.2rem;
padding: 7px;
}

.plan-card--title {
padding-top: 30px;
font: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: black;
}

.plan-card-price {
padding: 5px 0;
font-size: 5.2rem;
font-weight: bold;
line-height: 6.3rem;
color: var(--black);
}

.plan-card-price span {
display: inline-block;
vertical-align: text-top;
font-size: 1.2rem;
font-weight: 300;
}

.plan-card--saving {
font-size: 1.2rem;
color: #757575;
line-height: 1.5rem;
font-weight: 500;
}

.plan-card-ca {
width: 150px;
height: 48px;
margin-top: 20px;
background-color: #faf8f7;
border: 2px solid var(--bitcoin-oranje);
border-radius: 12px;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.8rem;
color: var(--black);
}

.plan-card-ca span {
display: inline-block;
width: 20px;
height: 20px;
background-image: url("/Assets/ICONOS/arrow-right\ 1\ \(1\).png");
vertical-align: text-bottom;
}

footer {
display: flex;
width: 100%;
height: 150px;
background-color: var(--bitcoin-oranje);
}

footer section {
display: flex;
width: 50%;
justify-content: center;
align-items: center;
}

footer ul {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
list-style: none;
}

footer li {
margin: 10px 0;
}

footer a {
text-decoration: none;
color: var(--just-white);
}