html {
    background-color: #170A0E;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: rgba(10, 10, 10, 0.95);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.container {
    max-width: 1312px;
    width: 100%;
    margin: 0 auto;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 56px;
    padding: 16px 0;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 56px;
}

.nav-menu a {
    display: block;
    padding-bottom: 9px;
}

.white-text {
    color: #FFFFFF !important;
}

.orange-text {
    color: #FF3B30 !important;
}

.prime-text {
    color: rgba(173, 21, 58, 1) !important;
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    gap: 8px;
    border-radius: 16px;
    flex: 0 0 auto;
}

.main-section p {
    text-align: center;
}

.main-section {
    height: 895px;
    display: flex;
    align-items: center;
    background-image: url('../images/bg-frame.webp');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
}

.wrapper-main {
    display: flex;
    flex-direction: column;
    gap: 64px;   
}

.subtitle-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-4-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    justify-items: center;
}

.wrapper-main .grid-4-col div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 40px;
    background: linear-gradient(112.04deg, #8B1538 0%, #DC143C 100%);
    box-shadow: 0px 20px 50px -12px rgba(139, 21, 56, 0.25);
    border-radius: 50px;
    width: fit-content;
}

.section {
    padding: 35px 0;
}

.section-1 {
    background-color: #050505;
    border: 1px solid #5E1616;
    background-image: url('../images/bg-section-1.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-1 .grid-4-col {
    gap: 32px;
}

.section-1 .grid-4-col div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 33px;
    gap: 16px;
    background: linear-gradient(134.86deg, #1A0F0F 0%, rgba(26, 15, 15, 0.6) 100%);
    border: 1px solid rgba(139, 21, 56, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    text-align: center;
}

.section-header {
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}

.icon-lightning {
    display: block;
    width: 60px;
    height: 60px;
    background-image: url('../images/icon-lightning.webp');
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 auto;
}
.icon-text {
    display: block;
    width: 60px;
    height: 60px;
    background-image: url('../images/icon-text.webp');
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 auto;
}
.icon-cong {
    display: block;
    width: 60px;
    height: 60px;
    background-image: url('../images/icon-cong.webp');
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 auto;
}
.icon-ok {
    display: block;
    width: 60px;
    height: 60px;
    background-image: url('../images/icon-ok.webp');
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 auto;
}

.section-2 .grid-4-col {
    gap: 24px;
}

.section-2 .grid-4-col > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 43px 20px 44px;
    gap: 16px;
    background: linear-gradient(147.36deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    border: 2px solid #DC143C;   
}

.example-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 5px;
    padding: 10px;
    background: #FAFAFA;
    position: relative;
}

.example-text::before {
    content: "";
    position: absolute;
    left: -11px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: #FAFAFA;
    height: 100%;
    clip-path: path('M9.72888 82.4313C9.72888 95.633 6.86502 104.864 1.13733 110.124L0.751251 110.469C0.155763 110.986 -0.148485 112.539 0.0716553 113.938C0.154207 114.462 0.304039 114.913 0.500488 115.229C2.52433 118.483 5.78945 120.368 10.2958 120.884C11.5926 129.126 14.967 135 18.9255 135H261C265.418 135 269 131.418 269 127V8C269 3.58172 265.418 0 261 0H18.241C13.8442 0 10.2714 3.54828 10.2412 7.94498L9.72888 82.4313Z');
}

.section-3 {
    background-color: #050505;
    border: 1px solid #5E1616;
}

.grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    justify-items: center;
}

.num {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    width: 120px;
    background: linear-gradient(135deg, #8B1538 0%, #DC143C 100%);
    border-radius: 30px;
    flex: 0 0 auto;
}

.section-3 .grid-3-col {
    gap: 32px;
}

.section-3 .grid-3-col > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}

.section-3 .grid-3-col ol {
    text-align: start;
}

.section-3 .grid-3-col .bold-l {
    margin-bottom: 8px;
}

.section-4 {
    background-color: #0A0A0A;
}

.grid-package {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.grid-package > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
    padding: 40px 41px;
}

.grid-package > div:not(.package-prime) {
    background: linear-gradient(147.42deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%);
    border: 1px solid rgba(139, 21, 56, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    width: 312px;
    height: 487px;
}

.package-prime {
    /* padding: 43.025px 42px 44.09px; */
    border: 2px solid #DC143C;
    background: linear-gradient(147.36deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    width: 327px;
    height: 512px;
}

.text-package {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn.prime {
    background: linear-gradient(109.11deg, #8B1538 0%, #DC143C 100%);
    box-shadow: 0px 20px 50px -12px rgba(139, 21, 56, 0.25);
    border-radius: 50px;
}

.section-5 {
    background: rgba(178, 34, 34, 0.5);
}

.section-5 .grid-3-col {
    gap: 32px;
}

.section-5 .grid-3-col > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 33px;
    gap: 24px;
    background: linear-gradient(120.59deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%);
    border: 1px solid rgba(139, 21, 56, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 20px;
}

.review-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.social {
    display: block;
    width: 40px;
    height: 40px;
    background: #1A0F0F;
    border-radius: 20px;
}

.social.social-x {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z' fill='rgb(140, 135, 135)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.social.social-inst {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.257 5.66797C16.5901 5.66797 16.0898 6.16818 16.0898 6.83512C16.0898 7.50207 16.5901 8.00228 17.257 8.00228C17.9239 8.00228 18.4242 7.50207 18.4242 6.83512C18.4242 6.16818 17.9239 5.66797 17.257 5.66797Z' fill='rgb(140, 135, 135)'/%3E%3Cpath d='M12.0047 7.16895C9.25351 7.16895 7.08594 9.41989 7.08594 12.0877C7.08594 14.7555 9.33688 17.0064 12.0047 17.0064C14.6724 17.0064 16.9234 14.7555 16.9234 12.0877C16.9234 9.41989 14.7558 7.16895 12.0047 7.16895ZM12.0047 15.2557C10.2539 15.2557 8.83667 13.8384 8.83667 12.0877C8.83667 10.3369 10.2539 8.91968 12.0047 8.91968C13.7554 8.91968 15.1727 10.3369 15.1727 12.0877C15.1727 13.8384 13.7554 15.2557 12.0047 15.2557Z' fill='rgb(140, 135, 135)'/%3E%3Cpath d='M16.0059 2H8.08588C4.66778 2 2 4.66778 2 8.00251V15.9225C2 19.2572 4.66778 21.925 8.00251 21.925H15.9225C19.2572 21.925 21.925 19.2572 21.925 15.9225V8.00251C22.0084 4.66778 19.3406 2 16.0059 2ZM20.0909 16.0059C20.0909 18.2568 18.2568 20.1743 15.9225 20.1743H8.00251C5.75157 20.1743 3.8341 18.3402 3.8341 16.0059V8.08588C3.8341 5.83494 5.6682 3.91747 8.00251 3.91747H15.9225C18.1734 3.91747 20.0909 5.75157 20.0909 8.08588V16.0059Z' fill='rgb(140, 135, 135)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.social.social-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6034 0.940186H4.93669C2.63585 0.940186 0.77002 2.80602 0.77002 5.10685V16.7735C0.77002 19.0744 2.63585 20.9402 4.93669 20.9402H16.6034C18.905 20.9402 20.77 19.0744 20.77 16.7735V5.10685C20.77 2.80602 18.905 0.940186 16.6034 0.940186ZM7.43669 16.7735H4.93669V7.60685H7.43669V16.7735ZM6.18669 6.55019C5.38169 6.55019 4.72835 5.89185 4.72835 5.08019C4.72835 4.26852 5.38169 3.61019 6.18669 3.61019C6.99169 3.61019 7.64502 4.26852 7.64502 5.08019C7.64502 5.89185 6.99252 6.55019 6.18669 6.55019ZM17.4367 16.7735H14.9367V12.1035C14.9367 9.29685 11.6034 9.50935 11.6034 12.1035V16.7735H9.10335V7.60685H11.6034V9.07769C12.7667 6.92269 17.4367 6.76352 17.4367 11.141V16.7735Z' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

footer {
    background-color: #050505;
}

.footer {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 48px 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.flex-btns {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.contacts-section {
    height: 70vh;
}

.content-contacts {
    margin-top: 32px;
}

.subtitile-contacts {
    text-align: center;
}

.contacts-info {
   margin-top: 16px; 
}

main {
    padding-top: 79px;
}

.package-section {
    background: radial-gradient(55.05% 119.5% at 50% 50%, rgba(139, 21, 56, 0.1) 0%, rgba(139, 21, 56, 0) 70%);
}

.package-section .grid-package {
    margin-top: 70px;
}

/*account style*/
.account-page-wrapper {
    margin-top: 45px;
    margin-bottom: 38px;
}
.head-account {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    justify-items: center;
    gap: 32px;
    margin-bottom: 45px;
}
.head-account > div,
.head-account > a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 40px;
    background: linear-gradient(112.04deg, rgba(139, 21, 56, 0.5) 0%, rgba(220, 20, 60, 0.5) 100%);
    box-shadow: 0px 20px 50px -12px rgba(139, 21, 56, 0.25);
    border-radius: 50px;
    width: fit-content;
}
.head-account > .this-page {
    background: linear-gradient(112.04deg, #8B1538 0%, #DC143C 100%);
}
input[type="radio"] {
    display: none;
}
.tags-radio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    gap: 45px;
}
.form_radio {
    width: 100%;
}
.tags-radio label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    background: linear-gradient(147.36deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
    backdrop-filter: blur(3.55072px);
    border-radius: 14.2029px;
    border: 1.42px solid rgb(139, 21, 56);
}
.form_radio input[type=radio]:checked + label {
    background: linear-gradient(147.36deg, rgba(255, 230, 230, 0.9) 0%, rgba(176, 50, 50, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
}
.block-head {
    display: flex;
    justify-content: center;
    margin-top: 26px;
    margin-bottom: 16px;
}
.generate-draft-block .h3 {
    text-align: center;
}
.form-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-content .btn {
    width: fit-content;
    margin-left: auto;
}
.form-content textarea {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 24px 25px;
    background: linear-gradient(147.36deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
    backdrop-filter: blur(3.55072px);
    border-radius: 14.2029px;
    border: 1.42px solid rgb(139, 21, 56);  
    width: 100%;
}
.answer-generate {
    display: none;
}
.answer-generate.active {
    display: flex;
    justify-content: center;
    gap: 32px;
    align-items: center;
    margin-top: 40px;
}
.answer-generate .example-text,
.history-list-page .example-text {
    width: 289px;
}
.history-list-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    justify-content: center;
    justify-items: center;
}
.history {
    display: flex;
    align-items: center;
    gap: 20px;
}
.icon-delete {
    display: block;
    width: 21px;
    height: 21px;
    background: rgba(255, 59, 48, 1);
    border-radius: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='3' viewBox='0 0 12 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2.25H10.5C10.9142 2.25 11.25 1.91421 11.25 1.5C11.25 1.08579 10.9142 0.75 10.5 0.75H1C0.585786 0.75 0.25 1.08579 0.25 1.5C0.25 1.91421 0.585786 2.25 1 2.25Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.input {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: linear-gradient(147.36deg, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
    backdrop-filter: blur(3.55072px);
    border-radius: 14.2029px;
    border: 1.42px solid rgb(139, 21, 56);  
    width: 100%;
    text-align: center;
}

.icon-burger-menu {
    display: none;
}

@media (hover: hover) {
    .nav-menu a:hover {
        border-bottom: 2px solid;
        border-image: linear-gradient(91.15deg, #8B1538 0%, #DC143C 100%) 1;
        color: #fff;
    }
    .tags-radio label:hover {
        background: linear-gradient(147.36deg, rgba(255, 230, 230, 0.9) 0%, rgba(176, 50, 50, 0.6) 100%), linear-gradient(147.36deg, #8B1538 0%, #DC143C 100%);
    }
}


@media screen and (max-width: 640px) {
    .container {
        max-width: calc(100% - 32px);
        margin: 0 auto;
    }
    .link-home {
        width: 200px;
        height: auto;
    }
    .nav-menu a {
        display: none;
    }
    .nav-menu a:last-child {
        display: block;
    }
    .grid-4-col,
    .grid-3-col {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .main-section .grid-4-col {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .grid-package,
    .footer-top {
        flex-direction: column;
    }
    .wrapper-main .grid-4-col div {
        padding: 8px 20px;
    }
    .main-section {
        height: 600px;
    }
    .section-header {
        margin-bottom: 24px;
    }
    .section-1 .grid-4-col,
    .section-2 .grid-4-col {
        gap: 16px;
    }
    .grid-package > div {
        height: 100% !important;
    }
    .section-1 .grid-4-col div {
        width: 100%;
    }
    .head-account {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin-bottom: 32px;
    }
    .head-account > div, .head-account > a {
        padding: 8px 20px;
        width: 100%;
    }
    .head-account > *:last-child {
        grid-column: span 3;
    }
    .tags-radio {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }
    .form-content textarea {
        height: 120px;
    }
    .answer-generate.active {
        flex-direction: column;
    }
}