/* html {
    background-color: #000;
} */

body {
    box-sizing: border-box;
    font-size: 24px;
    overflow: hidden;
}

section {
    margin-bottom: 0;
}

.header__mobile {
    display: none;
}

.header {
    position: absolute;
    width: 1440px;
    margin: 0 auto;
    display: flex;
    font-size: 18px;
    color: #fff;
    left: 50%;
    top: 0;
    transform: translate(-50%);
}

.header__wrap {
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
}

.header__contacts {
    display: flex;
    align-items: center;
}

.header__adress {
    margin-right: 26px;

}

.header__phone {
    margin-right: 24px;
}

.header__social {
    display: flex;
    gap: 7px;
}

/* PRIME */

.prime {
    background: url("/img/frame.jpg") no-repeat center/cover;
    height: 790px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}

.prime__first {
    padding: 187px 0 70px;
}

.container {
    padding: 0 100px;
}

.prime__wrap {
    display: flex;
    justify-content: space-between;
}

.prime__title {
    max-width: 738px;
    margin-bottom: 20px;
    font-size: 58px;
    font-weight: 700;
}

.prime__subtitle {
    max-width: 738px;
}

.prime__btn {
    height: 48px;
    padding: 15px 37px;
    color: #FF0000;
    background-color: #fff;
    border: none;
    border-radius: 48px;
    font-size: 16px;
    font-weight: 600;
}

.prime__btn:hover {
    color: #FFF;
    background-color: #FF0000;
}

.prime__second {
    padding: 60px 0 64px;
}

.prime__second {
    background-image: linear-gradient(to bottom, rgb(84 83 83 / 32%), rgba(46, 45, 45, 1));        
}

.tre {
    margin-bottom: 20px;
}

.prime__second p {
    line-height: 120%;
    font-size: 24px;
}

.prime__second p span{
    font-weight: 600;
}

.prime__second a {
    color: #FF0000;
}

.prime__second a:hover,
.header__phone:hover {
    color: #be0404;
}

/* CALCULATION */

.calculation {
    background-color: #FF0000;
    padding: 60px 0;
}

.calculation__wrap {
    display: flex;
    justify-content: space-between;
}

.calculation__desc {
    max-width: 710px;
    color: #fff;
}

.prime-page__agreement {
    color: #fff;
}

.calculation__desc h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 24px;
}

.calculation__desc p {
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
}

.calculation__send-form {
    max-width: 296px;
}

.prime-page__phone {
    width: 100%;
    height: 57px;
    margin-bottom: 10px;
    padding: 19px 19px 13px;
    font-size: 22px;
    border: 0.5px solid #C4C4C4;
    border-radius: 4px;
    outline: none;
}

.prime-page__btn {
    width: 100%;
    padding: 15px;
    border-radius: 4px;
    font-size: 16px;
}


.prime-page__chekbox {
    padding-top: 8px;
    display: flex;
    align-items: top;
    gap: 8px;
}

#checkbox1 {
    width: 16px;
    height: 16px;
}

.prime-page__agreement {
    max-width: 272px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

/* CLIENTS */

.clients {
    padding-top: 60px;
    margin-bottom: 60px;
    background-color: #fff;
}

/* advantages */

.advantages {
    padding-top: 60px;
    margin-bottom: 60px;
}

.advantages__wrap {
    display: flex;
    justify-content: space-between;
}

.advantages__title {
    margin-bottom: 52px;
}

.advantages__list {
  display: grid;
  grid-template-columns: repeat(2, 295px);
  grid-template-rows: repeat(2, 198px);
  gap: 42px 21px;
}

.advantage__img {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
}

.advantage__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.advantage__subtitle {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4%;
}


/* areas */

.areas {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #D9D9D9;
}

.areas__title {
    margin-bottom: 40px;
}

.areas__list {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(2, 220px);
    gap: 20px;
}

.areas__item {
    padding: 30px;
    background: #fff;
}

.area__img {
    margin-bottom: 10px;
}

.area__title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}

.areas__item ul li {
    font-size: 16px;
    font-weight: 400;
}

/* faq */

.faq {
    padding: 60px 0;
    background-color: #2C2F37;
}

.faq__title {
    margin-bottom: 50px;
    color: #fff;
}

.faq__btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
} 

.faq__btn {
    padding: 8.5px 24px;   
    font-size: 18px;
    background-color: #fff;
    border-radius: 18px;
    cursor: pointer;
}

.faq__btn:hover {
    background-color: #FF0000;
    color: #fff;
}

.faq__questions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__question {
    background-color: #fff;
    padding: 20px 30px;
}


/* products */

.products {
    padding: 60px;
    background-color: #D9D9D9;
}

.products__title {
    margin-bottom: 27px;
}

.products__btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 47px;    
}

.products__btn {
    padding: 8.5px 24px;   
    font-size: 18px;
    background-color: #fff;
    border-radius: 18px;
    cursor: pointer;
}

.products__btn:hover {
    background-color: #FF0000;
    color: #fff;
}

.products__list {
    display: flex;
    justify-content: space-between;
}

.products__card {
    width: 295px;
    height: 395px;
    background-color: #fff;
}

.product__img {
    width: 100%;
}

.product__description {
    padding: 24px;
    font-size: 18px;
}

/* footer */

footer {
    padding: 81px 0 60px;
    background-color: #000;
    color: #fff;
    font-size: 16px;
}

.footer__wrap {
    display: flex;
}

/* колонна 1 */
.footer__column-1 {
    max-width: 295px;
    margin-right: 21px;
}

.footer__logo {
    margin-bottom: 29px;
}

.footer__column-1 p{
    margin-bottom: 38px;
}

.column-1__phons {
    display: flex;
    gap: 10px;
}

.column-1__phons img{
    width: 20px;
    height: 20px;
}

.footer__phons {
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__phone {
    font-size: 24px;
}


/* колонна 2 */
.footer__column-2 {
    max-width: 400px;
}

.requisites__title {
    margin-bottom: 32px;
    font-size: 24px;
}

.requisites__item {
    margin-bottom: 10px;
}


/* колонна 3 */
.footer__column-3 {
    max-width: 400px;
    margin-left: auto;
}

.footer__map {
    margin-bottom: 30px;
}

.footer__contacts {
    display: flex;
    gap: 4px;
}

.column-3__phons {
    display:  flex;
    gap: 4px;
}

.footer__phone-red {
    color: #FF0000;
}

.column-3__email {
    display: flex;
    gap: 4px;
}

/* 2 страница */

.header__second {
    position: relative;
    width: 100%;
    background-color: #010411;
}

.card__product {
    padding: 100px 0 0;
}

.card__main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 62px;
}

.card__slider {
    width: 505px;
    height: 470px;
    background-color: black;
}

.card__desc {
    max-width: 610px;
}

.card__desc div {
    display: flex;
    gap: 6px;
}

.card__desc span {
    font-weight: 600;
}

.manufacturer {
    margin-bottom: 12px;
    font-size: 18px;
}

.country {
    margin-bottom: 40px;
    font-size: 18px;
}

.card__title {
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 600;
    line-height: 120%;
}

.card__subtitle {
    margin-bottom: 40px;
    font-size: 24px;
    line-height: 120%;
}

.card__button {
    padding: 16px 54px;
    font-size: 16px;
    background-color: #FF0000;
    color: #fff;
    border: none;
}

.card__button:hover {
    background-color: #da0303;
}

.card__btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card__btn {
    padding: 16px 0;
    border-bottom: 5px solid #00000099;
    cursor: pointer;
}

.card__btn:hover {
   border-bottom: 5px solid #FF0000; 
}

#features {
    padding-right: 45px;
}

#specific {
    padding-right: 10px;
}

#recommendations {
    padding-right: 28px;
}

.card__function {
    background-color: #F8F7F5;
}

.card__description {
    height: 360px;
    padding-top: 60px;
    font-size: 18px;
}

.card__description li {
    margin-bottom: 16px;
    list-style-type: square;
    list-style-position: inside;
    line-height: 120%;
}

.card__description li::marker {
    color: #FF0000;
	font-size: 28px;
}

.specific__wrap {
    display: flex;
    justify-content: space-between;
}

.specific__column-1 {
    width: 420px;
}

.specific__column-2 {
    width: 400px;
}

.specific__column-3 {
    width: 272px;
}

table {
    border-spacing: 10px 8px;
}

thead {
    font-weight: 600;
}


.configuration li:first-child{
    font-weight: 600;
}

.configuration li {
    margin-bottom: 8px;
    list-style-type: none;
}

.conditions li {
    margin-bottom: 8px;
}

.conditions h3 {
     font-size: 18px;
     font-weight: 600;
}

.conditions__table {
    display: flex;
    gap: 80px;
}

.features,
.specific,
.recommendations,
.configuration,
.conditions {
    display: none;
}


.active {
    display: block;
    /* background-color: rebeccapurple; */
}

/* Мобильная версия */
@media (max-width: 1000px) {

    html {
        background: #000;
    }

    body {
        background: url("/img/bg_mobile.jpg") no-repeat 60% 340px;        
        font-size: 20px;
        overflow: visible;
    }

    .container {
        padding: 0 20px;
    }

    .header {
        display: none;
    }


    .header__mobile {
        display: block;
        font-size: 16px;        
    }
    
    .header__logo {
        width: 140px;
        height: 28px;
    }

    .header__wrap {
        display: flex;
        padding: 22px 0;
    }

    .header__contacts {
        display: block;
    }

    .header__phone {
        margin-bottom: 8px;
    }

    .header__adress {
        max-width: 300px;
        margin: 0;
    }

    /*  */
    .prime__first {
        padding: 58px 0;
        margin-bottom: 165px;
    }

    .prime__title {
        font-size: 33px;
    }

    .prime__second {
        background-image: linear-gradient(to bottom, rgb(84 83 83 / 32%), rgba(46, 45, 45, 1));        
        padding-bottom: 40px;
    }

    .prime__second p{
        opacity: 100%;
    }

}