@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Red Hat Display", serif;
    border: none;
    outline: none;
    text-decoration: none;
    color: #3c3958;
}


[class*="grid"] {
    display: grid;
}

.align-center {
    align-items: center;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
}

price-card-body {
    -webkit-text-size-adjust: 100%;
}

i svg {
    width: unset;
    height: 1.8rem;
}

p,
a,
input,
select,
textarea,
button {
    font-size: 1.6rem;
    font-weight: 500;
}

button {
    padding: 1.5rem 3rem;
    border-radius: 1rem;
    font-weight: 700;
    background: #ff5d15;
    color: #fff;
    cursor: pointer;
}

p {
    color: #6e727a;
    /* line-height: 1.8; */
}

h1,
h2,
h3 {
    text-transform: capitalize;
}

img,
video {
    max-width: 100%;
}

.container {
    max-width: 1240px;
    padding: 0 2rem;
    margin: auto;
    width: 100%;
}

.container-max {
    max-width: 1540px;
    padding: 0 2rem;
    margin: auto;
    width: 100%;
}

section {
    padding: 8rem 0;
}

.price-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.price-chart .price-card-body {
    display: flex;
    flex-direction: column;
}

.price-chart .price-card-title {
    height: 6rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #00000018;
    padding-left: 1.5rem;
}

.price-chart .price-card-title h3 {
    font-size: 1.8rem;
}

.price-chart .price-card-body p {
    height: 8rem;
    display: flex;
    align-items: center;
}

.price-chart .price-card-body p {
    border-bottom: 1px solid #00000018;
}

.price-chart .price-card-body p:last-child {
    border: unset;
}

.price-box button {
    border: 1px solid #ff5d15;
    background: unset;
    color: #ff5d15;
}

.price-chart .price-card-body p svg {
    width: unset;
    height: 2.3rem;
    margin: auto;
    fill: green;
}

.price-box .price-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.price-box .price-card-header h2 {
    font-size: 2rem;
    height: 8rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    flex-direction: column-reverse;
    width: 100%;
    border-bottom: 1px solid #00000024;
}

.price-box .price-card-header>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 15rem;
    gap: 1.5rem;
    width: 100%;
    padding: 0 1.5rem;
}

.price-box .price-card-header h2 span {
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
    background: #ff5d15;
    color: #ffe8de;
    border-radius: 5rem;
    width: fit-content;
}

.price-box .price-card-header h3 {
    font-size: 4.5rem;
    font-weight: 900;
}

.price-box:nth-child(1) .price-card-header {
    align-items: flex-start;
    text-align: left;
}

.price-box:nth-child(1) .price-card-header h2 {
    align-items: flex-start;
    text-align: left;
}

.price-box:nth-child(1) .price-card-header>div {
    align-items: flex-start;
    text-align: left;
    padding: 0;
}

.price-box:nth-child(1) .price-card-header h3 {
    font-size: 2rem;
    font-weight: 700;
}

.price-box .price-card-header :is(a, button) {
    width: 100%;
    display: block;
}

.price-box.popular {
    background: #fffcfa;
    box-shadow: 0 0 0 1px #ff5d15;
    border-radius: 2rem;
    position: relative;
}

.price-box.popular button {
    background: #ff5d15;
    color: white;
}

.price-box.popular h2 span {
    position: absolute;
    top: -1.2rem;
}

@media (max-width:700px) {
    .price-chart {
        grid-template-columns: 1fr;
    }

    .price-box:nth-child(1) {
        display: none;
    }

    .price-box .price-card-title h3::before {
        content: attr(data-content);
    }

    .price-box .price-card-item p::before {
        content: attr(data-content);
    }

    .price-chart .price-card-body p {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1.5rem;
    }

    .price-card-item {
        padding: 0 1.5rem;
    }
}