@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@1,300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center {
width: 600px;
margin: auto;
}
#store-body {
font-size: 1.25rem;
padding: 50px 0;
}

.text-2x1 mx-auto my-2

.packages-list {
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgb(0, 0, 0) 60%, rgba(30, 0, 17, 0.7) 100%);
}

@media (min-width: 768px)
.packages-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.packages-list {
    display: grid;
    gap: 5rem;
    overflow: hidden;
    padding: 2.5rem 1.25rem;
}

.packages-list h1 {
    width: fit-content;
    margin-top: 3em;
    background-color: #f50a46 !important;
    border-radius: 4px !important;
    /* box-shadow: 0 2.8px 2.2px #f50a46a9, 0 6.7px 5.3px #f50a46a9, 0 12.5px 10px rgba(2255 0 85 / 50%), 0 22.3px 17.9px #f50a46a9, 0 41.8px 33.4px #f50a46a9, 0 100px 80px #f50a46a9; */
    /* -webkit-box-shadow: 0px 0px 20px 4px #f50a46a9;
    -moz-box-shadow: 0px 0px 20px 4px #f50a46a9; */
    color: rgb(255, 255, 255) !important;
    font-family: 'Poppins' !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    position: absolute;
    padding: 4px 32px;
    margin-left: 0px;
    position: static !important;
    text-align: center !important;
    top: 0% !important;
    width: 100% !important;
}

.packages-list h1 {
    background-color: #f50a46 !important;
    border-radius: 4px !important;
    /* box-shadow: 0 2.8px 2.2px #f50a46a9, 0 6.7px 5.3px #f50a46a9, 0 12.5px 10px #f50a46a9, 0 22.3px 17.9px #f50a46a9, 0 41.8px 33.4px #f50a46a9, 0 100px 80px #f50a46a9; */
    /* -webkit-box-shadow: 0px 0px 20px 4px #f50a46a9;
    -moz-box-shadow: 0px 0px 20px 4px #f50a46a9;
    padding: 8px 20px !important; */
    color: rgb(255, 255, 255) !important;
    font-family: 'Poppins' !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    position: static !important;
    text-align: center !important;
    top: 0% !important;
    width: 100% !important;
}

.btn-success {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-success {
    background-color: #f50a46 !important;
    /* box-shadow: 0 2.8px 2.2px #f50a46a9, 0 6.7px 5.3px #f50a46a9, 0 12.5px 10px #f50a46a9, 0 22.3px 17.9px #f50a46a9, 0 41.8px 33.4px #f50a46a9, 0 100px 80px #f50a46a9; */
    /* -webkit-box-shadow: 0px 0px 20px 4px #f50a46a9;
    -moz-box-shadow: 0px 0px 20px 4px #f50a46a9; */
    border-radius: 4px !important;
    color: rgb(255, 255, 255) !important;
    font-family: 'Poppins' !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    transition: 0.5s !important;
}

.btn-info {
    --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-info {
    background: 0 !important;
    border: 1px solid #fafafa !important;
    border-radius: 4px !important;
    color: rgb(248, 248, 248) !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
    text-transform: uppercase !important;
    transition: 0.5s !important;
}

.badge {
    border-radius: 0.25rem;
    background-color: #fff;
    color: #000;
}

.badge {
    box-shadow: 0 0 0.4rem 0.1rem #f50a46a9 !important;
    background-color: #f50a46 !important;
}

.badge {
    display: grid;
    place-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* .package {
    background-color: #f50a46 !important;
    border-radius: 4px !important;
    box-shadow: 0 2.8px 2.2px #f50a46a9, 0 6.7px 5.3px #f50a46a9, 0 12.5px 10px #f50a46a9, 0 22.3px 17.9px #f50a46a9, 0 41.8px 33.4px #f50a46a9, 0 100px 80px #f50a46a9;
    -webkit-box-shadow: 0px 0px 20px 4px #f50a46a9;
    -moz-box-shadow: 0px 0px 20px 4px #f50a46a9;
    padding: 8px 20px !important;
    color: rgb(255, 255, 255) !important;
    font-family: 'Poppins' !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    position: static !important;
    text-align: center !important;
    top: 0% !important;
    width: 100% !important;
}

.packages-list {
    /* background-color: #f50a46 !important; */
    border-radius: 4px !important;
    box-shadow: 0 2.8px 2.2px #f50a46a9, 0 6.7px 5.3px #f50a46a9, 0 12.5px 10px #f50a46a9, 0 22.3px 17.9px #f50a46a9, 0 41.8px 33.4px #f50a46a9, 0 100px 80px #f50a46a9;
    -webkit-box-shadow: 0px 0px 20px 4px #f50a46a9;
    -moz-box-shadow: 0px 0px 20px 4px #f50a46a9;
    padding: 8px 20px !important;
    color: rgb(255, 255, 255) !important;
    font-family: 'Poppins' !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    position: static !important;
    text-align: center !important;
    top: 0% !important;
    width: 100% !important;
} */

.pl-4 flex-1 {
    color: white;
    background-color: yellowgreen;
}

.primary-button {
color: white;
background-image: linear-gradient(to left, #f50a46, #bb0835);
border-radius: 5px;
text-decoration: none;
text-align: center;
padding: 15px;
display: block;
font-size: 1.0em;
letter-spacing: 2px;
overflow: hidden;
width: 100%;
max-width: 600px;
margin: 0 auto 15px;
border: 0;
}
.primary-button:hover {
background-image: linear-gradient(to left, #f50a46, #bb0835);
}
#content-1:focus-within ~ .content-1,
#content-2:focus-within ~ .content-2,
#content-3:focus-within ~ .content-3,
#content-4:focus-within ~ .content-4,
#content-5:focus-within ~ .content-5,
#content-6:focus-within ~ .content-6 {
opacity: 1;
height: auto;
display: block;
}
.primary-text {
display: none;
font-size: 16px;
text-align: center;
max-width: 730px;
margin: 0 auto 15px;
padding: 10px;
font-size: 13px;
overflow: hidden;
height: 0;
opacity: 0;
color: #fff;
overflow: hidden;
letter-spacing: 2px;
transition: all 0.2s ease-out;
}
.frequency-text {
font-size: 25px;
text-align: center;
color: #fff;
}
/*SCROLLBAAR ABAIXO */
/* width */
::-webkit-scrollbar {
width: 2px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #f50a46;
}
/*BORDA*/
.border-gradient {
border: 2px solid;
border-radius: 5px;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #f50a46, #bb0835);
padding: 15px;
}
.btn{
background-color:#fbff00
}
.fas{
color:#f50a46
}
.shadow{
border-bottom:1px solid #f50a46
}
.categories{
border-top:1px solid #f50a46;
border-bottom:1px solid #f50a46
}
.product {
background: rgba(15, 15, 15);
color: #FFF;
padding: 10px;
border-top: 3px solid #f50a46;
border-bottom: 3px solid #f50a46;
border-radius: 5px;
}
.product-body {
border: 1px solid #000;
border-radius: 0px 0px 0 0;
}
.btn:hover {
background-color: #999921;
border: 1px solid #292b2c;
font-weight: 700;
}
.fa, .fas {
color: #f50a46;
}
.btn {
background: #0090e1;
border: 1px solid #303234;
font-weight: 700;
}
.banner{
animation:flip-scale-down-diag-2 1s linear both
}
@keyframes shake{
10%,90%{
transform:translate3d(-1px,0,0)
}
20%,80%{
transform:translate3d(2px,0,0)
}
30%,50%,70%{
transform:translate3d(-4px,0,0)
}
40%,60%{
transform:translate3d(4px,0,0)
}
}
@keyframes flip-scale-down-diag-2{
0%{
transform:scale(1) rotate3d(-1,1,0,-180deg)
}
50%{
transform:scale(.4) rotate3d(-1,1,0,-90deg)
}
100%{
transform:scale(1) rotate3d(-0.8,1,0,0deg)
}
}