body {
    font-family: 'PT Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('./assets/media/images/background.avif');
    background-size: cover;
    background-repeat: no-repeat;
    color: rgb(72, 66, 55);
}

p, li {
    font-size: clamp(1rem, 2.5vw, 1.15em);
    line-height: 1.6;
}

body::before {
    background-image: none;
    background-color: rgba(249, 246, 240, 0.85);
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'PT Serif', serif;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: clamp(2rem, 5vw, 3em);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5em);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2em);
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.5em);
}

.container {
    width: 90%;
    max-width: 855px;
    margin: 0 auto;
}

.dark-container {
    width: 100%;
    background-color: rgb(223, 216, 204);
}

.profile {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    margin-top: 100px;
}

.profile img {
    width: 225px;
    border-radius: 10px;
    border: 2px solid rgb(223, 216, 204);
}

.subtitle {
    color: #808080
}

.cards {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 25px;
}

.card {
    background-color: #f8f3f3;
    padding: 20px;
    border-color: rgb(223, 223, 224);
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    width: 160px;
    font-size: clamp(1rem, 2.5vw, 1.35em);
    font-weight: 700;
}

.card.wide {
    margin-top: 10px;
    width: calc(100% - 45px);
}

ul > li {
    margin-bottom: 10px;
    margin-left: -10px;
}

.price-table {
    display: flex;
    flex-direction: row;
}

.price-table > div {
    width: 50%;
    font-size: clamp(1rem, 2.5vw, 1.15em);
    margin-top: 20px;
}

.results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 20px;
    font-size: clamp(1rem, 2.5vw, 1.15em);
}

.results > div > span > span {
    vertical-align: middle;
    margin-right: 10px;
}

.free-trial {
    font-weight: normal;
    font-size: clamp(1rem, 2.5vw, 1.15em);
}

.contacts {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 20px;
}

.contacts > div {
    width: 50%;
}

.contacts .email {
    padding: 20px;
    font-size: clamp(1rem, 2.5vw, 1.35em);
    font-weight: 700;
}

.contacts a {
    color: rgb(72, 66, 55);
}

a.whatsapp img {
    margin-top: 28px;
}

a.telegram {
    margin-top: 20px;
    height: 48px;
    width: 110px;
    background-color: #24A1DE;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 15px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    font-size: 17px;
    user-select: none;
}

a.telegram i {
    height: 20px;
    width: 20px;
    background: url('data:image/svg+xml,%3Csvg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m1.77404283 9.58769086c4.67714245-1.99564845 7.79596997-3.31130205 9.35648257-3.9469608 4.4555806-1.81493491 5.381412-2.13020854 5.984856-2.14061906.1327219-.0022897.4294781.02992311.6217044.18267827.162312.12898346.2069705.30322179.2283411.42551228.0213705.12229049.047982.40087134.0268279.61854631-.2414495 2.48450744-1.2861975 8.51375174-1.817706 11.29644264-.2249011 1.1774608-.6709749 1.4294697-1.0996928 1.4681058-.9317032.0839651-1.6359598-.4602232-2.5383599-1.0395344-1.412078-.9065075-1.9311138-1.1506648-3.30178003-2.0352487-1.58404193-1.0222898-.71982554-1.5573792.18291533-2.4756292.23625159-.2403103 4.3705401-3.98382431 4.4499945-4.31554914.0099371-.04148774-.12607-.45629906-.2198814-.53795815s-.2322689-.05373486-.3321837-.03152647c-.1416262.03147972-2.397439 1.49167812-6.76743852 4.38059516-.64030496.4305972-1.22027332.6403987-1.73990507.6294043-.5728523-.0121204-1.67479033-.3172064-2.49396798-.5779863-1.00475474-.3198572-1.37564449-.4704946-1.30610794-1.013711.03621894-.2829407.29151946-.57846124.76590154-.88656154z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E') 0 0 no-repeat;
}

@media screen and (max-width: 600px) {
    .profile {
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    .cards {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 90%;
    }

    .price-table {
        flex-direction: column;
    }

    .price-table > div {
        width: 100%;
    }

    .results {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .contacts {
        flex-direction: column;
        align-items: center;
    }

    .contacts > div {
        width: 90%;
    }
}