/* змінні */
:root {
    --text-color-2: #6278B4;
    --main-text: #3A2E2E;
    --foot-text-color: #FFF;
    --add-information-color: #686868;
    --header-and-section-bgcolor: #DDF9FF;
    --footer-bg-color: #535353;
    --prise-color: #999999;
}



/* абсолютні стилі */

body {
    font-family: 'Jost', sans-serif;
    box-sizing: border-box;
}



.container {
    width: 1107px;
    margin: 0 auto;
    padding: 0 15px;
}


/* селектори класу */
/* header */
.header {
    background-color: var(--header-and-section-bgcolor);
    padding-top: 35px;
    padding-bottom: 48px;
}

.nav-wrap {
    display: flex;
    align-items: center;
}

.logo-wrap {
    display: flex;
    align-items: center;
}

.sitename {
    color: var(--text-color-2);
    font-size: 36px;
    font-weight: 700;

}

.header-nav-list {
    display: flex;
    width: 717px;
    margin-left: 193px;
}

.head-nav {}

.head-nav-element {
    color: var(--main-text);
    font-size: 24px;
    font-weight: 700;
    padding-right: 64px;
}

.header-content-wrap {
    display: flex;
    margin-top: 90px;
}

.benefits-wrap {
    display: flex;
    align-items: center;

}

.header-benefits {
    color: var(--text-color-2);
    font-size: 24px;
    font-weight: 600;
}

.header-line {
    width: 209px;
    height: 3px;
    background: #6278B4;
    margin-left: 11px;
}

.header-title {
    color: var(--main-text);
    font-size: 48px;
    font-weight: 700;
    width: 562px;
}

.header-assurance {
    color: var(--main-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 30.6px;
}

.header-btn-wrap {
    margin-top: 32px;
}

.header-button {
    padding: 16px 21px;
    border-radius: 30px;
    background: var(--text-color-2);
    color: var(--foot-text-color);
    font-size: 20px;
    font-weight: 900;
    border: none;
}

.beagle {
    width: 572.94px;
    height: 448px;
}

/* main */

/* our-services */

.servis {
    padding-top: 24px;
    padding-bottom: 54px;
}

.section-name {
    color: var(--main-text);
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 18px;
}

.section-name-span {
    color: var(--text-color-2);
    font-size: 48px;
    font-weight: 600;
}

.servise-card {
    width: 30%;
    display: flex;
}

.servis-title-photo {
    width: 49px;
    height: 49px;
    margin-right: 15px;
}

.servis-text-wrap {}

.section-line {
    width: 351px;
    height: 4px;
    background: var(--text-color-2);
    margin: 0 auto;

}

.servis-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 35px;
    align-items: center;
    margin-top: 47px;
}

.servis-title-img {
    width: 50px;
    height: 50px;
}

.servis-card-title {
    color: var(--text-color-2);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 25px;
}

.servis-card-span {
    color: var(--main-text);
    font-size: 24px;
    font-weight: 400;
}

.servis-card-text {
    width: 229px;
    height: 63px;
    color: var(--main-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 21.42px;
}

.work {
    background-color: var(--header-and-section-bgcolor);
    padding-top: 100px;
    padding-bottom: 32px;
}

.work-wrap {
    display: flex;
    align-items: center;
}

.work-title {
    color: var(--text-color-2);
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 28px;
}

.work-text {
    color: var(--main-text);
    font-size: 20px;
    font-weight: 500;
    width: 294px;
    line-height: normal;
}

.corgi-img {}

.specialist {
    padding-top: 32px;
    padding-bottom: 64px;
}

.specialist-list {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.specialist-card {}

.specialist-card-img {
    margin-bottom: 32px;
}

.card-line {
    width: 224px;
    height: 4px;
    background: var(--main-text);
    display: flex;
    margin: 0 auto;
    margin-bottom: 32px;
}

.specialist-name {
    color: var(--main-text);
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

.specialist-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.specialist-btn {
    padding: 9px 28px;
    border-radius: 25px;
    background: var(--text-color-2);
    font-size: 24px;
    font-weight: 600;
    border: none;
    color: var(--foot-text-color);
}

.pricing {
    background-color: var(--header-and-section-bgcolor);
    padding-top: 32px;
    padding-bottom: 32px;
}

.pricing-list {
    margin-top: 44px;
    display: flex;
    justify-content: space-between;
}

.pricing-card {
    background-color: var(--foot-text-color);
    width: 352px;
    padding-bottom: 32px;

}

.pricing-tytle-wrap {}

.services {
    background-color: var(--text-color-2);
    font-size: 32px;
    font-weight: 400;
    width: 352px;
    color: var(--foot-text-color);
    text-align: center;
    padding: 17px 0;
}

.price {
    color: var(--prise-color);
    font-size: 64px;
    font-weight: 400;
    text-align: center;
    padding-top: 32px;
}

.price-span {
    color: var(--prise-color);
    font-size: 36px;
    font-weight: 400;
}

.prices {
    color: var(--text-color-2);
    font-size: 64px;
    font-weight: 400;
    text-align: center;
    padding-top: 32px;
}

.prise-span {
    color: var(--text-color-2);
    font-size: 36px;
    font-weight: 400;
}

.price-subtitle {
    color: var(--prise-color);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 32px;
}

.reception-plan {
    color: var(--main-text);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

.price-card-line {
    width: 105px;
    height: 2px;
    background: var(--main-text);
    margin: 0 auto;
    margin-bottom: 16px;
}

.pricing-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 68px;
}

.price-card-button {
    width: 160px;
    height: 50px;
    background: #6278B4;
    border: none;
    font-size: 20px;
    font-weight: 400;
    color: var(--foot-text-color);
}

.footer {
    background-color: var(--footer-bg-color);
    padding-top: 32px;
}

.footer-wrap {
    display: flex;
}

.footer-logo-wrap {
    display: flex;
}

.foot-logo-img {
    width: 64px;
    height: 64px;
}

.footer-subtitle {
    color: var(--foot-text-color);
    font-family: Jost;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;

}

.footer-line {
    width: 1120px;
    height: 2px;
    background-color: var(--text-color-2);
    margin-top: 32px;
}

.foot-item-wrap {
    display: flex;
    justify-content: space-between;
}

.footer-menu-title,
.footer-contacts-title {
    color: var(--foot-text-color);
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 32px;
    margin-top: 32px;
}

.footer-menu-wrap {}

.menu-element-wrape {
    display: flex;
    flex-direction: column;

}

.menu-element {
    color: var(--foot-text-color);
}


.footer-menu-list {
    display: flex;
    gap: 40px;

}

.menu-element-list-card {
    margin-bottom: 16px;
}

.contact-card {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.foot-contact-img {
    width: 32px;
    height: 32px;
    margin-right: 13px;
}

.contact {
    color: var(--foot-text-color);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;

}

.form-wrap{
    display: flex;
    flex-direction: column;
}

.form-title {
    color: var(--foot-text-color);
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin-top: 32px;
}

.form-text {
    color: var(--foot-text-color);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
}

.foot-email-input {
    padding: 16px 95px 16px 22px;
    border-radius: 25px;
    border: none;
    margin-top: 24px;
}

.foot-btn-wrap{
    margin-top: 12px;
}

.form-btn{
    padding: 16px 22px;
    background-color: var(--text-color-2);
    border-radius: 25px;
    border: none;
}

.our-social-networks{
    display: flex;
    margin-top: 24px;
}

.social-netvork-img{
    height: 50px;
    width: 50px;
}

.add-information-wrap{
    display: flex;
    justify-content: center;
}

.add-information-section{
    background-color: var(--foot-text-color);
}

.add-information{
color: var(--add-information-color);
font-size: 16px;
font-weight: 700;
line-height: normal;
}