@font-face {
    font-family: 'Halvar Breitschrift Bd';
    src: url('fonts/HalvarBreit-Bd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pragmatica-Light';
    src: url('fonts/Pragmatica-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pragmatica-Medium';
    src: url('fonts/Pragmatica-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pragmatica-Bold';
    src: url('fonts/Pragmatica-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
:root {
    --black: #070707;
    --white: #FFFFFF;
    --grayF7: #F7F7F7;
    --orange: #FF640D;
    --halvar-bd: 'Halvar Breitschrift Bd', sans-serif;
    --pragma-lt: 'Pragmatica-Light', sans-serif;
    --pragma-md: 'Pragmatica-Medium', sans-serif;
    --pragma-bd: 'Pragmatica-Bold', sans-serif;
}
html {
    height: 100%;
    scroll-behavior: smooth;
}
body{
	font-family: 'Pragmatica-Light', sans-serif;
    color: var(--black);
}
/*Убираем стрелки с числового инпута*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tooltip-inner {
    max-width: 400px;
}
.tooltip-inner {
    text-align: start;
}
.title {
    text-align: left;
    text-transform: uppercase;
    font-family: var(--halvar-bd);
    font-size: 36px;
    line-height: 46px;
}
.text {
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
}
.text__orange {
    color: var(--orange);
}
.btn__orange {
    font-family: var(--font-inter-bd);
    font-style: normal;
    color: var(--white);
    background: var(--orange);
    border-radius: 5px;
    border: none;
}
.btn__orange:active,
.btn__orange:hover {
    color: var(--white);
    background: linear-gradient(90deg, #FF640D 0%, #F8A70C 100%);
}
.btn__gray {
    background: var(--grayF7);
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.btn__gray:hover {
    border: 1px solid #e8e8e8;
}
/* Header */
.header {
    background-color: var(--white);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.03);
}
.header__btn {
    padding: 8px 35px;
}
/* Hero */
.hero__title {
    font-family: var(--halvar-bd);
    font-size: 40px;
    line-height: 54px;
}
.hero__subtitle {
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
}
.hero__img {
    margin-right: -20px;
}
.hero__btn-first {
    font-family: var(--pragma-bd);
    font-size: 16px;
    line-height: 26px;
    color: var(--white);
    padding: 18px 31px;
}
.hero__btn-second {
    font-family: var(--pragma-lt);
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
    padding: 18px 21px;
}

/* Options */
.options {
    padding: 100px 0;
    background: var(--grayF7);
}
.options__items {
    background: var(--white);
}
.options__item {
    padding: 32px 48px;
}
.options__subtitle {
    font-family: var(--pragma-bd);
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 32px;
}
.options img {
    width: 100%;
    height: auto;
}
.options__bottom {
    font-family: var(--pragma-md);
    font-size: 20px;
    line-height: 30px;
}
.options__danger {
    font-family: var(--halvar-bd);
    color: var(--orange);
}
/* Calculator
.calculator {
    padding: 100px 0;*/
}
.calculator__form {
    background: var(--grayF7);
    padding: 40px 48px;
    gap: 32px;
}
.calculator__form label {
    font-size: 14px;
    line-height: 20px;
}
.calculator__subtitle {
    font-family: var(--pragma-bd);
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 24px;
}
.calculator__input {
    border: none;
    padding: 14px 0 18px 16px;
    box-shadow: 0 0 0 0.1rem #e6eaf0;
}
.calculator__input:focus {
    box-shadow: 0 0 0 0.1rem #3579f5;
}
.calculator__helper {
    background: var(--white);
    border: none;
}
.calculator__result:disabled {
    font-family: var(--pragma-bd);
    font-size: 24px;
    line-height: 32px;
    color: #1C1C1C;
    background: transparent;
    padding-left: 0;
}
.calculator__warning {
    color: #FF640D;
    padding: 30px 0 0 0;
}
.calculator__info {
    display: none;
}
.calculator__bottom {
    margin-top: -100px;
}
.calculator__btn {
    font-size: 16px;
    line-height: 26px;
    padding: 18px 31px;
}
.calculator__reset {
    font-family: var(--pragma-md);
    font-size: 16px;
    line-height: 24px;
    padding: 18px 20px;
    background: transparent;
}
.calculator__reset:hover {
    color: var(--orange);
}
/* Steps */
.steps {
    padding: 100px 0;
    background: var(--grayF7);
}
.steps__details {
    position: relative;
    font-family: var(--pragma-bd);
    font-size: 24px;
    line-height: 34px;
    cursor: pointer;
    background: var(--white);
}
.steps__summary {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 32px 103px 32px 112px;
    position: relative;
}
.steps__details::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50px;
    font-family: var(--halvar-bd);
    font-size: 44px;
    line-height: 60px;
    color: var(--orange);
}
.steps__summary::after {
    content: '';
    writing-mode: vertical-rl;
    position: absolute;
    font-weight: bold;
    top: 36px;
    right: 48px;
    width: 24px;
    height: 24px;
    content: url('img/circleplus.svg');
}
.steps__first::before {
    content: '1';
}
.steps__second::before {
    content: '2';
}
.steps__third::before {
    content: '3';
}
.steps__text {
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
    padding: 0 103px 32px 112px;
}
.steps__link {
    text-decoration: none;
    color: var(--orange);
}
.steps__link:hover {
    color: var(--orange);
    border-bottom: 1px solid var(--orange);
}
.steps__details[open] summary::after {
    content: url('img/circle.svg');
}
.steps__details[open] .steps__text {
    animation: spoiler 0.5s ease-in-out;
    -webkit-animation: spoiler 0.5s ease-in-out;
}
@keyframes spoiler {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* Tariff */
.tariff {
    padding: 100px 0 50px;
}
.tariff__item {
    background: var(--grayF7);
    padding: 32px 48px;
    flex: 0 0 auto;
    width: 48%;
}
.tariff__head {
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
}
.tariff__name {
    font-family: var(--halvar-bd);
    font-size: 24px;
    line-height: 40px;
}

.tariff__info {
    font-family: var(--pragma-lt);
    font-size: 16px;
    line-height: 26px;
}
.tariff__info-big {
    font-size: 20px;
    line-height: 30px;
}
.tariff__cost {
    gap: 20px;
    margin-bottom: 32px;
}
.tariff__price {
    font-family: var(--pragma-bd);
    font-size: 24px;
    line-height: 34px;
}
.tariff__regular-price {
    text-decoration: line-through;
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
    color: #AAAAAA;
}
.tariff__discount {
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    background: var(--orange);
    border-radius: 4px;
    padding: 2px 5px;
}
.tariff__btn {
    text-decoration: none;
    display: inline-block;
    font-family: var(--pragma-bd);
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
    padding: 18px 30px;
}
.tariff__text {
    font-family: var(--pragma-lt);
    font-size: 14px;
    line-height: 18px;
}
.tariff__link {
    text-decoration: none;
    color: var(--orange);
}
.tariff__link:hover {
    color: var(--orange);
    border-bottom: 1px solid var(--orange);
}
.tariff__bottom {
    text-decoration: none;
    gap: 20px;
}
.tariff__bottom-border {
    cursor: pointer;
    font-family: var(--pragma-lt);
    font-size: 20px;
    line-height: 30px;
    color: var(--black);
    border-bottom: 1px dashed var(--black);    
}
.tariff__bottom-border:hover {
    color: var(--orange);
    border-bottom: 1px dashed var(--orange); 
}
#show-table {
    display: none;
}
#show-table:checked~.tariff__wrapper {
    display: block;
    animation: showTable 500ms ease-in-out both;
    -webkit-animation: showTable 500ms ease-in-out both;
}
@keyframes showTable {
    from {opacity: 0;}
    to {opacity: 1;}
}
.tariff__wrapper {
    display: none;
    padding: 0 48px; 
    background: var(--grayF7);
}
.tariff__table {
    padding: 32px 48px;
    border-color: #E5E5E5;
}
.tariff__table th {
    font-family: var(--pragma-md);
    font-size: 20px;
    line-height: 30px;
    padding: 16px 48px 16px 0;
}
.tariff__table td {
    text-align: center;
    vertical-align: middle;
    padding: 16px 48px;
}
.tariff__table-btn {
    text-decoration: none;
    padding: 18px 25px;
}
.tariff__table-bold {
    font-family: var(--pragma-md);
    font-size: 20px;
    line-height: 30px;
}
.tariff__table-light {
    text-decoration: line-through;
    font-size: 20px;
    line-height: 30px;
    color: #a5a5a5;
}
.tariff__table-bottom {
    border: 1px solid var(--grayF7);
}
/* Cta */
.cta {
    padding: 61px 0 127px;
}
.cta__block {
    position: relative;
    border: 4px solid var(--orange);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 50px 72px 50px 364px;
}
.cta__img {
    width: 435px;
    position: absolute;
    left: 87px;
    bottom: 0;
}
.cta__title {
    font-family: var(--font-halvar-bd);
    font-weight: 700;
    font-size: 32px;
    line-height: 37px;
    color: var(--orange);
}
.cta__form {
    position: relative;
}
.cta__block input {
    border: 1px solid #AAAAAA;
    border-radius: 5px;
    padding: 13px;
}
.cta__block input:focus {
    border: none;
    box-shadow: 0 0 0 0.1rem var(--orange);
}
.cta__btn {
    font-family: var(--font-inter-bd);
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: var(--white);
    background: var(--orange);
    padding: 13px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.cta__btn:disabled {
    background: #E5E5E5;
}
.cta__btn:not(:disabled) {
    background: var(--orange);
}
.cta__btn:not(:disabled):active,
.cta__btn:not(:disabled):hover {
    color: var(--white);
    background: linear-gradient(90deg, #FF640D 0%, #F8A70C 100%);
}
/* Footer */
.footer {
    padding: 60px 0;
    background: var(--grayF7);
}
.footer__tel {
    font-family: var(--pragma-bd);
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
}
.footer__tel:hover,
.footer__tel:visited {
    color: var(--black);
}
.footer__subtitle {
    font-family: var(--pragma-lt);
    font-size: 16px;
    line-height: 26px;
}
.footer__link {
    font-family: var(--pragma-lt);
    font-size: 14px;
    line-height: 18px;
    color: var(--black);
}
.footer__link:hover,
.footer__link:visited {
    color: var(--black);
}
.footer__text {
    font-family: var(--pragma-lt);
    font-size: 14px;
    line-height: 18px;
}
@media (max-width: 768px) {
    .title {
        text-align: center;
    }
    .calculator__bottom {
        margin-top: 0;
    }
    .tariff__item {
        width: 100%;
    }
    .cta__block {
        padding: 75px 72px 91px 75px;
    }
}
@media (max-width: 480px) {
    .header__btn {
        padding: 8px 10px;
    }
    .cta {
        padding: 20px 0 20px;
    }
    .cta__block {
        padding: 20px;
    }
    .cta__title {
        font-size: 28px;
        line-height: 120%;
    }
}