﻿*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;

}
img{
    max-width: 100%;
    height: auto;
    display: block;
}
.body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 10px;
}
.header{
    max-width: 1440px;
    width: 100%;
    margin-top: 24px;
}
.section__nav{
    display: flex;
    justify-content: center;
    max-width: 1440px;
    width: 100%;
}
.nav{
    max-width: 1280px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav__logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav__logo-img{
    max-width: max-content;
    margin-right: 30px;
}
.nav__logo-title{
    font-family: 'Roboto';
    font-size: 32px;
    font-weight: 700;
    line-height: 35.2px;
    text-align: left;
    color: #4E4C4D;
}
.nav__list{
    display: flex;
    max-width: 340px;
    list-style: none;
    justify-content: space-between;
}
.nav__list-title{
    margin-right: 26px;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #4E4C4D;
}
.main__title{
    max-width: 1280px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}
.section__main{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1440px;
    width: 100%;
}
.main__title-header{
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.main__header-title_list{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main__header-title_text{
    font-family: 'Roboto';
    font-size: 52px;
    font-weight: 800;
    line-height: 57.2px;
    text-align: left;
    margin-bottom: 24px;
}
.main__header-text{
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    color: #4E4C4D;
    margin-bottom: 24px;
}
.main__header-button{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 185px;
    border: 2px solid #2563EB;
    border-radius: 8px;
    padding: 12px;
    color: #2563EB;
}
.main__header-button:hover{
    color: #0b2d75;
    border: 2px solid #0b2d75;
    transition: 0.3s;
}
.main__header-button_text{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: left;
    
    max-width: 137px;
    width: 100%;
}
.main__header-img{
    max-width: 600px;
    width: 100%;
}
.section__cooperation{
    max-width: 1440px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F1F5F9;
    padding: 80px 0;
}
.cooperation__main-text{
    max-width: 1280px;
    width: 100%;
    font-family: 'Roboto';
    font-size: 40px;
    font-weight: 700;
    line-height: 60.2px;
    text-align: center;
    color: #0F172A;
}
.section__directions{
    max-width: 1440px;
    width: 100%;
    background: linear-gradient(180deg, #F1F5F9 0%, rgba(255, 255, 255, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.directions__title{
    font-family: 'Roboto';
    font-size: 56px;
    font-weight: 800;
    line-height: 61.6px;
    text-align: center;
    color: #0F172A;
    margin-top: 80px;
    margin-bottom: 60px;
}
.directions__cards{
    display: flex;
    max-width: 1280px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 80px;
}
.direction__card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    max-width: 510px;
    width: 100%;
    margin-bottom: 50px;
}
.direction__icon{
    box-sizing: border-box;
    max-width: 104px;
    width: 100%;
}
.direction__card-list {
    list-style: none;
    padding-left: 0;
}

.direction__card-title {
    font-family: 'Roboto';
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    text-align: left;
    color: #0F172A;
    margin-top: 7px;
    margin-bottom: 16px;
}

.direction__card-list_text {
    position: relative;
    padding-left: 20px; /* Отступ для текста, чтобы точка располагалась отдельно */
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
    color: #0F172A;
    margin-bottom: 3px;
}

.direction__card-list_text::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(0);
    font-size: 1.2em; /* Отрегулируйте при необходимости */
    color: #0F172A;
}

.section__treatment{
    max-width: 1440px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.treatment__main{
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.treatment__title{
    font-family: 'Roboto';
    font-size: 56px;
    font-weight: 800;
    line-height: 61.6px;
    text-align: center;
    color: #0F172A;
    margin: 80px 0 60px;
}
.treatment__main-block{
    display: flex;
}
.treatmen__main-block-image{
    margin: 0 45px;
}
.treatment__main-block-col{
    max-width: 640px;
    width: 100%;
    margin-top: 21px;
}
.treatment__main-list{
    margin-left: 28px;
}
.treatment__main-list:not(:last-child){
    margin-bottom: 44px;
}
.treatment__main-list_title{
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    margin: 8px 0 10px;
    color: #0F172A;
}
.treatment__main-list-text{
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    margin-bottom: 8px;
    color: #0F172A;
}
.section__contacts{
    display: flex;
    max-width: 1440px;
    width: 100%;
    align-items: center;
    justify-content: center;
    
}
.contacts__main{
    display: flex;
    max-width: 1280px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 80px;
}
.contacts__main-content{
    display: flex;
    max-width: 1280px;
    width: 100%;
	
}
.contacts__main-title{
    font-family: 'Roboto';
    font-size: 56px;
    font-weight: 800;
    line-height: 72.8px;
    text-align: center;
    color: #0F172A;
    margin: 80px 0;
	
}
.contacts__main-info{
    max-width: 575px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-right: 219px;
	
}
.contacts__main-info_title{
    font-family: 'Roboto';
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    text-align: left;
    color: #0F172A;
    margin-bottom: 40px;
}
.contacts__main-info_text{
    max-width: 502px;
    font-family: 'Roboto';
    font-size: 22px;
    font-weight: 400;
    line-height: 24.2px;
    text-align: left;
    color: #0F172A;
    margin-bottom: 40px;
}
.contacts__main-info_mailphone{
    max-width: 360px;
    width: 100%;
    display: flex;
    flex-direction: column;
	
}
.contacts__main-info_mp{
    display: flex;
    align-items: center;
    font-family: 'Roboto';
    font-size: 22px;
    font-weight: 400;
    line-height: 25.78px;
    text-align: left;
    color: #111111;
}
.contacts__main-info_mp:not(:last-child){
    margin-bottom: 20px;
}
.contacts__main-info-mailphone_icon{
    margin-right: 20px;
}
.footer{
    max-width: 1440px;
    width: 100%;
    display: flex;
text-align: center;
    justify-content: center;
}
.footer__main{
    max-width: 1280px;
    width: 100%;
    margin: 48px 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer__title{
    font-family: 'Roboto';
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    text-align: left;
    color: #4E4C4D;
}
.footer__text{
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: right;
    color: #646263;
}
.form__control{
	color: mediumvioletred
}
.body-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}




















/* Responsive */
@media (max-width: 1024px){
    .nav{ padding: 0 10px; }
    .header{ padding: 0 10px; }
    .section__main{ padding: 0 10px; }
    .section__cooperation{ padding: 60px 10px; }
    .section__directions{ padding: 0 10px; }
    .section__treatment{ padding: 0 10px; }
    .section__contacts{ padding: 0 10px; }
    .footer__main{ padding: 0 10px; }

    .main__header-title_text{ font-size: 42px; line-height: 1.2; }
    .cooperation__main-text{ font-size: 32px; line-height: 1.4; }
    .directions__title{ font-size: 44px; line-height: 1.25; }
    .contacts__main-title{ font-size: 44px; line-height: 1.3; }
    .nav__list{ flex-wrap: wrap; }
}

@media (max-width: 768px){
    .nav{ gap: 16px; }
    .nav__logo-title{ font-size: 24px; }
    .nav__list{ width: 100%; justify-content: center; }
    .nav__list-title{ margin-right: 16px; }

    .main__title{ flex-direction: column; gap: 24px; margin-top: 40px; }
    .main__title-header{ max-width: 100%; align-items: flex-start; }
    .main__header-title_text{ font-size: 34px; line-height: 1.25; }
    .main__header-text{ font-size: 16px; line-height: 1.6; }
    .main__header-img{ max-width: 100%; }

    .cooperation__main-text{ font-size: 24px; line-height: 1.5; }

    .directions__title{ font-size: 36px; margin-top: 48px; margin-bottom: 32px; }
    .directions__cards{ justify-content: center; }
    .direction__card{ max-width: 100%; }
    .direction__card-title{ font-size: 20px; }
    .direction__card-list_text{ font-size: 16px; line-height: 1.6; }

    .treatment__title{ font-size: 36px; margin: 48px 0 32px; }
    .treatment__main-block{ flex-direction: column; align-items: center; }
    .treatmen__main-block-image{ margin: 0 0 24px; max-width: 360px; }
    .treatment__main-block-col{ max-width: 100%; }
    .treatment__main-list{ margin-left: 0; }
    .treatment__main-list_title{ font-size: 18px; }
    .treatment__main-list-text{ font-size: 16px; line-height: 1.6; }

    .contacts__main-title{ font-size: 36px; margin: 48px 0; }
    .contacts__main-content{ flex-direction: column; gap: 24px; }
    .contacts__main-info{ margin-right: 0; max-width: 100%; }
    .contacts__main-info_title{ font-size: 28px; }
    .contacts__main-info_text{ font-size: 18px; line-height: 1.5; }
    .contacts__main-info_mp{ font-size: 18px; }

    .footer__main{ flex-direction: column; align-items: center; gap: 8px; }
    .footer__text{ text-align: center; }
}

@media (max-width: 480px){
    .nav__logo-img{ margin-right: 16px; max-width: 140px; }
    .nav__logo-title{ font-size: 20px; }
    .nav__list-title{ font-size: 14px; margin-right: 12px; }

    .main__header-button{ max-width: 100%; }
    .main__header-button_text{ font-size: 14px; }

    .directions__title{ font-size: 28px; }
    .cooperation__main-text{ font-size: 20px; }
    .contacts__main-title{ font-size: 28px; }
    .footer__title{ font-size: 20px; }
    .footer__text{ font-size: 14px; }
}






























