*,
*::before,
*::after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --blue: #2196F3;
    --black: #212121;
    --grey: #757575;
    --white: #FFFFFF;
    --button-grey: #F5F4FA;
    --normal-font-size: 14px;
    --middle-font-size: 16px;
    --main-font: "Roboto" sans-serif;
}

picture { max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;

}
.entire-content {
    font-family: var(--main-font);
    color: var(--black);
    background-color: var(--white);

}

body {

    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Link style */

a {
    text-decoration: none;
    color: var(--black);
}

.link:hover {
    color: var(--blue);
}

.link:focus {
    color: var(--blue)
}

.web-studio {
    font-family: "Raleway";
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.78px;
    line-height: 1.2;
}

.web-logo {
    color: var(--blue);
}

/*Title section*/

.first-section {
    display: flex;
    flex-direction: row;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: #ECECEC;
    border-bottom-style: solid;
    border-width: 1px;
    position: relative;
    
}
.title-section {
    display: flex;
    background-color: #2F303A;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(0deg, rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4)), url(../images/background-image@1x.jpg);
    background-repeat: no-repeat;
    
}
.main-title {
    color: var(--white);
    font-weight: 900;
    line-height: 1.36;
    letter-spacing: 2.64px;
    padding-top: 200px;
    padding-bottom: 30px;
    font-size: 26px;

}

.blue-button {
    background-color: var(--blue);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    width: 200px;
    line-height: 1.88;
    letter-spacing: 0.96px;
    margin-bottom: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.benefits {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin:auto;
}

.benefits-list {
    margin-right: 30px;
}

.benefits-list:last-child {
    margin-right: 0;
}

.benefits-list svg {
    background-color: var(--button-grey);
    width: 270px;
    height: 120px;
    margin-bottom: 30px;
    border-radius: 4px;
}

.advantage {
    font-size: var(--normal-font-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.42px;
    margin-bottom: 10px;
}

.advantage-description {
    color: var(--grey);
    text-align: left;
    line-height: 1.71;
    letter-spacing: 0.42px;
}

.list,
.benefits {
    list-style-type: none;
}


.our-team>.section {
    background-color: var(--button-grey);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.name {
    font-size: var(--middle-font-size);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 30px;
    text-align: center;
    margin-bottom: 10px;
}

.ocupation {
    font-size: var(--middle-font-size);
    color: var(--grey);
    line-height: 1.2;
    letter-spacing: 0.48px;
    text-align: center;
}

.social-icons-employes {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 15px;

}

.social-icons-employes .social-icons {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    fill: #afb1b8;
    transition: fill 250ms, background-color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icons-employes li:hover {
    fill: var(--white);
    background-color: var(--blue);
    cursor: pointer;
}

.social-icons-employes li:focus {
    fill: var(--white);
    background-color: var(--blue);
    cursor: pointer;
}
/* Modal style */

.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 11;
}

[data-modal] {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 11;
}

.is-hidden [data-modal-content] {
    transform: translate(-50%, -50%) scale(0.5);
}

[data-modal-content] {
    width: 528px;
    height: 581px;
    background-color: var(--white);
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition-duration: 1s;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

[data-modal-close] {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #000000;
    font-size: 18px;
    transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-modal-close]:hover,
[data-modal-close]:focus {
    color: var(--blue);
}

.modal-title {
    font-family: var(--main-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 23.44px;
    text-align: center;
    margin-top: 20px;
}

.modal-form {
    padding: 12px 0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-form__position {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.01em;
    color: rgba(117, 117, 117, 1);
    position: relative;
}

.modal-form__position svg {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 26px;
    left: 7px;
}

.modal-form__position input {
    padding-left: 30px;
}

.modal-form__position input:focus+svg,
.modal-form__position input:hover+svg {
    fill: var(--blue);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-form__input {
    outline: none;
    margin-top: 4px;
    border-radius: 4px;
    height: 35px;
    cursor: pointer;
    border: 1px solid rgba(33, 33, 33, 0.2);
    padding-left: 12px;
}

.modal-form__comments {
    outline: none;
    margin-top: 4px;
    border-radius: 4px;
    height: 35px;
    cursor: pointer;
    border: 1px solid rgba(33, 33, 33, 0.2);
    padding-left: 12px;
    padding-top: 5px;
    height: 120px;
}

.modal-form__input:hover,
.modal-form__input:focus,
.modal-form__comments:hover,
.modal-form__comments:focus {
    border-color: var(--blue);
}

.modal-form__checked {
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.03em;
    text-align: left;
    gap: 10px;
    justify-content: center;
}

.condition {
    color: var(--blue);
}

.modal-form__input[type='checkbox'] {
    display: none;
}

.modal-checkbox__position {
    position: relative;
    width: 12px;
    height: 12px;
    border: 1px solid black;
    border-radius: 2px;
}

.modal-form__input[type='checkbox']:checked+.replace-checkbox {
    background-color: var(--blue);
    border-color: var(--blue);
}

.modal-checkbox__position svg {
    position: absolute;
    height: 12px;
    width: 12px;
    top: -1px;
    left: 0px;
    display: none;
    fill: var(--white);
}

.modal-form__input[type='checkbox']:checked+.modal-checkbox__position svg {
    display: block;
}

.modal-form__btn {
    width: 200px;
    height: 50px;
    background-color: var(--blue);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    outline: none;
    border: none;
    cursor: pointer;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.06em;
    text-align: center;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 25px;
}

/*Mobile menu*/

.js-menu-container {
    display: none;
    background-color: var(--white);
    color: white;
    position: fixed;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 20px;
}

.js-menu-container.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 100%;
    z-index: 1;
}

.is-open {
    display: block;
}

.js-open-menu {
    display: none;
}
.menu-section svg {
    background-color: transparent;
    width: 40px;
    height: 40px;
    border: none;
    display: block;
    position: fixed;
    top: 0;
    right: 10px;
}
 button svg:hover {
fill: var(--blue);
 }
.js-close-menu {
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #212121;
    border: none;
    font-size: 44px;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 1;
}

.js-close-menu:hover,
.js-close-menu:focus {
    color: #2196f3;
    cursor: pointer;
    transition: color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);;
}
.js-menu-container.is-open~.js-open-menu {
    display: none;
}

.js-menu-container .nav-menu-container {
    margin-bottom: 250px;
}

.js-menu-container .social-titles {
    display: flex;
    gap: 10px;
    margin-left: 40px;
    margin-bottom: 48px;
    color: #2196f3;
    font-family: var(--main-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.36px;
}

.js-menu-container .social-titles .break-line {
    width: 1px;
    height: 22px;
    background: rgba(33, 33, 33, 0.2);
}

.js-menu-container .nav-menu-container li a {
    color: #212121;
    font-family: var(--main-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.8px;
    margin-left: 40px;
}
.js-menu-container .nav-menu-container li a:hover,
.js-menu-container .nav-menu-container li a:focus {
    color: var(--blue);
    transition: color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.js-menu-container .top-contact-details {
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px;
}

.js-menu-container .top-contact-details .phone-number a {
    color: #2196f3;
    font-family: var(--text-font-family);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.68px;
}

.js-menu-container .mail-address a {
    color: #757575;
    font-family: var(--text-font-family);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.48px;
}

.js-menu-container .mail-address a:hover,
.js-menu-container .mail-address a:focus {
    color: #2196f3;
}

.contacts {
    background-color: #2F303A;
    height: auto;
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    
}



.web-studio-light {
    font-family: "Raleway";
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.78px;
    text-align: left;
    line-height: 1.2;
    color: var(--white);

}

.web-logo-light {
    color: var(--blue);
}

.contacts-detailes {
    font-style: normal;
    margin-top: 28px;
}

.park {
    line-height: 1.2;
    letter-spacing: 0.42px;
    margin-bottom: 12px;
}

.info {
    margin-bottom: 12px;
}

.info,
.number {
    color: #FFFFFF60;
    line-height: 1.14;
    letter-spacing: 0.42px;
    transition: color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.info:hover,
.number:hover {
    color: var(--blue);
}

.info:focus,
.number:focus {
    color: var(--blue);
}

.bottom-section .footer-social-icons {
    display: flex;
    align-items: center;
    gap: 70px;
}

.footer-social-icons {
    
    white-space: nowrap;
   
}

.find-us-on {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: var(--normal-font-size);
    margin-bottom: 20px;
}

.social li {
    display: inline-flex;

    align-content: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.svg-image {
    margin: auto;
}

.social li:hover {
    background-color: var(--blue);
    cursor: pointer;
}

.social li:focus {
    background-color: var(--blue);
    cursor: pointer;
}

.subscribe-section {
    display: block;
    
}

.subscribe-section input {

    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(33, 150, 243, 0);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    margin-top: 20px;
    padding: 15px 16px;
    outline: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--main-font);
     font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.48px;
    margin-right: 12px;
    min-width: 320px;
    max-width: 450px;
}

.subscribe-section .subscribe-title {
    color: var(--white);
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.42px;
    text-transform: uppercase;
}

.subscribe-section button {
    flex-shrink: 0;
    border-radius: 4px;
    border: none;
    background: var(--blue);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    color: var(--white);
    text-align: left;
    padding: 10px 77px 10px 43px;
    font-family: var(--main-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.96px;
    cursor: pointer;
    margin-top: 18px;
    position: relative;
    top: 0;
    right: 0;
}

.subscribe-section .subscribe-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: var(--white);
    position: absolute;
    right: 28px;
    top: 13px;
}

/* Portofolio page*/


.buttons-element {
    font-size: var(--middle-font-size);
    font-weight: 500;
    color: #212121;
    background-color: var(--button-grey);
    border: none;
    box-shadow: none;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.63;
    letter-spacing: 0.48px;
    text-align: center;
    margin-right: 8px;
    padding: 6px 22px 6px 22px;
    transition: background-color 250ms, color 250ms, box-shadow 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.buttons-list:last-child {
    margin-right: 0px;
}


.buttons-element:hover {
    background-color: var(--blue);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.buttons-element:focus {
    background-color: var(--blue);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.buttons-list {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;

}

.portofolio {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: auto;
}

.portofolio-content {
    align-content: center;
    transition: box-shadow 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.portofolio-content:hover {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.portofolio-content:focus {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.top-image {
    display: block;
}

.bottom-card {
    margin-top: 0px;
    border-color: #EEEEEE;
    border-width: 0.5px;
    border-style: solid;
    border-top: none;
    padding-right: 24px;
    padding-left: 24px;
    padding-top: 20px;
    padding-bottom: 20px;

}

.projects {
    font-weight: 700;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 1.08px;
    text-align: left;
}

.projects-type {
    color: var(--grey);
    font-size: var(--middle-font-size);
    line-height: 1.88;
    letter-spacing: 0.48px;
    text-align: left;
}

.projects,
.projects-type {
    text-align: left;
    margin-bottom: 0px;
    margin-top: 0px;
}

.relative-overlay {
    position: relative;
    overflow: hidden;

}

.portofolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(105%);
    background-color: #2196F399;
    color: var(--white);
    transition-duration: 500ms;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    font-family: var(--main-font);
    font-size: 18px;
    text-align: left;
    letter-spacing: 0.48px;
    line-height: 28px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 63px;
    padding-bottom: 91px;

}

.portofolio-overlay p {
    width: 300px;
}

.portofolio-content:hover .portofolio-overlay {
    transform: translateY(0);
}

/*Mobile first*/

@media screen and (max-width:428px) {
    .js-menu-container {
        margin-left: 0px;
        padding: 20px 0;
    }
 
.benefits .benefits-list svg {
    max-width: 300px;
}
.what-we-do {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow-wrap: normal;
    flex-shrink: 1;

}
 .benefits {
     max-width: 765px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow-wrap: normal;
     margin-left: 30px;
 }
}

@media screen and (max-width: 768px) {
    body {
        margin: 0;
    }
    .js-open-menu {
        display: block;
    }
        .menu-section.js-open-menu.is-open {
            display: none;
        }
    .navigation-list .list .list-element {display: none}
    .header-links {display:none}
}

 .title-section {
     background: linear-gradient(rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4)),
         url("../images/header-img-mobile@1x.jpg,");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 400px;
     flex-shrink: 1;
 }

 @media (min-device-pixel-ratio: 2),
 (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi),
 (min-resolution: 2dppx) {
.title-section {
         background-image: url(../images/header-img-mobile@2x.jpg);
     }

 [data-modal-content] {
             width: 450px;
             height: 609px; }
.section {padding: 60px 0;
margin: 0 15px;}

.what-we-do { display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow-wrap: normal;
    flex-shrink: 1;

}
.benefits {
    max-width: 765px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-wrap: normal;
}

.benefits-list svg {
    background-color: var(--button-grey);
    width: 450px;
    height: 120px;
    margin-bottom: 30px;
    border-radius: 4px;
    flex-shrink: 0;
}

.advantage {
    font-size: var(--normal-font-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.42px;
    margin-bottom: 10px;
}

.advantage-description {
    color: var(--grey);
    text-align: left;
    line-height: 1.71;
    letter-spacing: 0.42px;
    margin-bottom: 30px;
    max-width: 450px;
}

.list,
.benefits {
    list-style-type: none;
}

.do-section {display: none;}

.our-team-title .customer-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.08px;
    margin-bottom: 50px;
    font-family: var(--main-font);   
}
.employes {
    
    border-radius: 4px;
    background-color: var(--white);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2),
        0px 1px 1px rgba(0, 0, 0, 0.14);
        height: 622px;
    max-width: 767px;
    margin-bottom: 30px;
}


.customers {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
    text-align: center;
}

.customer-title {
    margin-bottom: 30px;
}

.customers-icons .icon-element {
    max-width: 210px;
    max-height: 92px;
    border-style: solid;
    border-color: #AFB1B8;
    border-width: 1px;
    border-radius: 4px;
    justify-content: center;
    padding: 16px 52px;   
}

.icon-element {
    display: inline-flex;
    fill: #afb1b8;
    transition: fill 250ms, border-color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-element:hover {
    fill: var(--blue);
    border-color: var(--blue);
    cursor: pointer;
}

.icon-element:focus {
    fill: var(--blue);
    border-color: var(--blue);
    cursor: pointer;
}

.icon-element:last-child {
    margin-right: 0px;
}
.customers-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    gap:30px;
}

.contacts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
}
.subscribe-section button {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    margin: 30px auto;

}

 }
  
        /*Tablet design*/

@media screen and (min-width: 768px) and (max-width: 1157px) {
    body {
        width: 100%;
        flex-shrink: 0;
        overflow-x: hidden;
    }

    .js-menu-container {
        display: none;
    }

    .first-section .menu-section,
    .first-section .menu-section svg {
        display: none;
    }

    .title-section {(rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4)),
            url("../images/Header-img-tableta@1x.jpg");
        background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 400px;
            flex-shrink: 1;
    }

        @media (min-device-pixel-ratio: 2),
        (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi),
        (min-resolution: 2dppx) {
            .title-section {
                background-image: url(../images/Header-img-tableta@2x.jpg);
            }


}
.header-links {
        display: flex;
        flex-wrap: wrap;
        font-weight: 500;
        letter-spacing: 0.28px;
        line-height: 1.2;
        flex-direction: row;
        justify-content: flex-end;
                      }
    

 .first-section .navigation-list .list {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
        }
    
  .list .list-element a {
            display: flex;
            flex-direction: row;
            margin-right: 45px;
            margin-left: 35px;
        }
  .first-link {
             margin-right: 20px;
                }
   

  .benefits {
   display: grid;
   gap: 3rem;
   grid-template-columns:repeat(auto-fit, minmax(354px, 2fr));
   margin: auto;
} 

.benefits-list svg {
    background-color: var(--button-grey);
    width: 354px;
    height: 120px;
    margin-bottom: 30px;
    border-radius: 4px;
    flex-shrink: 0;
}

.our-team .section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    padding-top: 123px;
    gap: 30px;
}

.our-team .section .our-team-title {
    display: flex;
    position: absolute;
    top: 60px;
}
.employes {
    height: 536px;
}

    }


@media screen and (min-width: 1158px) {

        body {
                width: 100%;
                margin: 0;
                overflow-x: hidden;}

 .container {
      min-width: 1200px;
      margin: auto;
 }

 .section 
    {
            max-width: 1600px;
            margin: 0 auto;
            overflow: hidden;
            padding: 94px 0;
 }
.first-section {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: #ECECEC;
        border-bottom-style: solid;
        border-width: 1px;
        max-width: 100%;
        position: relative;
        z-index: 10;

    }

    .web-studio {
        font-family: "Raleway";
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 0.78px;
        line-height: 1.2;
        margin-left: 215px;


    }
    
    .web-logo {
        color: var(--blue);
    }

    .title-section {
                    background: linear-gradient(rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4)), url("../images/background-image@1x.jpg");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 100%;
                    height: 600px;
                    flex-shrink: 1;
                }
    
 @media (min-device-pixel-ratio: 2),
        (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi),
        (min-resolution: 2dppx) {
    .title-section {
     background-image: url(../images/desktop@2x.jpg);
            } }
/* Navigation list*/
.navigation-list {
    font-size: var(--normal-font-size);
    font-weight: 500;
    letter-spacing: 0.28px;
    text-align: left;
    line-height: 1.2;
    margin-left: 93px;

}

.list-element {
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
}


.header-links {
    display: flex;
    font-weight: 500;
    letter-spacing: 0.28px;
    line-height: 1.2;
    align-items: flex-end;
    
}

.first-link {
    margin-right: 40px;
}


.link:focus {
    color: var(--blue);
    stroke: var(--blue);
    cursor: pointer;
}

.link:hover {
    color: var(--blue);
    stroke: var(--blue);
    cursor: pointer;
}

li .link:visited {
    stroke: var(--blue);
    cursor: pointer;
}

.envelope,
.smartphone {
    margin-right: 10px;
}

.navigation-list .list-element {
    position: relative;
}

.navigation-list .list-element::after {
    content: '';
    display: block;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: var(--blue);
    margin-top: 3px;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: width;
}

.navigation-list .list-element:hover::after,
.navigation-list .active::after,
.navigation-list .list-element:visited::after {
    width: 100%;
}

/*Regular customer section*/
.customers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

.customer-title {
    margin-bottom: 50px;
}

.customers-icons .icon-element {
    width: 170px;
    height: 92px;
    border-style: solid;
    border-color: #AFB1B8;
    border-width: 1px;
    border-radius: 4px;
    justify-content: center;
    padding: 16px 32px 16px 32px;

}

.icon-element {
    display: inline-block;
    margin-right: 30px;
    fill: #afb1b8;
    transition: fill 250ms, border-color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-element:hover {
    fill: var(--blue);
    border-color: var(--blue);
    cursor: pointer;
}

.icon-element:focus {
    fill: var(--blue);
    border-color: var(--blue);
    cursor: pointer;
}

.icon-element:last-child {
    margin-right: 0px;
}

.do-section {
    display:block;
}

/* What we do*/
.do-section {
    display: flex;
    
}
.do-section .do-title {
    display: block;
    text-align: center;
    margin-bottom: 50px;
}

.do-title .our-team-title .customer-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.08px;
    margin-bottom: 50px;

}

.do-fields {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    margin: auto;
}

.first-image-content {
    margin-right: 30px;
}

.second-image-content {
    margin-right: 30px;
}

.first-image-content {
    position: relative;
}

.overlay1 {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    color: var(--white);
    background-color: #2F303A99;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.48px;
    line-height: 1.2;
}

.second-image-content {
    position: relative;
}

.overlay2 {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    color: var(--white);
    background-color: #2F303A99;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.48px;
    line-height: 1.2;
}

.third-image-content {
    position: relative;
}

.overlay3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--white);
    background-color: #2F303A99;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.48px;
    line-height: 1.2;
}

.our-team>.section {
    background-color: var(--button-grey);
    display: inline-block;
    min-width: 100%;
    text-align: center;
}


.name {
    font-size: var(--middle-font-size);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 30px;
}

.ocupation {
    font-size: var(--middle-font-size);
    color: var(--grey);
    line-height: 1.2;
    letter-spacing: 0.48px;
}

.employes {
    display: inline-block;
    margin-right: 30px;
    border-radius: 4px;
    background-color: var(--white);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2),
        0px 1px 1px rgba(0, 0, 0, 0.14);
    height: 428px;
    width: 270px;
    margin-top: 50px;

}

.employes:last-child {
    margin-right: 0px;
}

.social-icons-employes {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 15px;
}

.social-icons-employes .social-icons {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    fill: #afb1b8;
    transition: fill 250ms, background-color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icons-employes li:hover {
    fill: var(--white);
    background-color: var(--blue);
    cursor: pointer;
}

.social-icons-employes li:focus {
    fill: var(--white);
    background-color: var(--blue);
    cursor: pointer;
}
.contacts {
    background-color: #2F303A;
    height: auto;
    color: var(--white);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: left;
    padding-left: 0px;
    width: 100%;
    position: relative;
}

.web-studio-light {
    font-family: "Raleway";
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.78px;
    text-align: left;
    line-height: 1.2;
    color: var(--white);

}

.web-logo-light {
    color: var(--blue);
}

.contacts-detailes {
    font-style: normal;
    margin-top: 28px;
}

.park {
    line-height: 1.2;
    letter-spacing: 0.42px;
    margin-bottom: 12px;
}

.info {
    margin-bottom: 12px;
}

.info,
.number {
    color: #FFFFFF60;
    line-height: 1.14;
    letter-spacing: 0.42px;
    transition: color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.info:hover,
.number:hover {
    color: var(--blue);
}

.info:focus,
.number:focus {
    color: var(--blue);
}

.bottom-section .footer-social-icons {
    display: flex;
    align-items: center;
    gap: 70px;
}

.footer-social-icons {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-right: 878px;
    margin-bottom: 96px;
    margin-top: 75px;


}

.find-us-on {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: var(--normal-font-size);
    margin-bottom: 20px;
}

.social li {
    display: inline-flex;

    align-content: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 250ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.svg-image {
    margin: auto;
}

.social li:hover {
    background-color: var(--blue);
    cursor: pointer;
}

.social li:focus {
    background-color: var(--blue);
    cursor: pointer;
}

.subscribe-section {
    display: inline-block;
    position: absolute;
    top: 110px;
    right: 30px;
}

.subscribe-section input {
    width: 358px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(33, 150, 243, 0);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    margin-top: 20px;
    padding: 15px 16px;
    outline: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--main-font) font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.48px;
    margin-right: 12px;
}

.subscribe-section .subscribe-title {
    color: var(--white);
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.42px;
    text-transform: uppercase;
}

.subscribe-section button {
    width: 200px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 4px;
    border: none;
    background: var(--blue);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    color: var(--white);
    text-align: left;
    padding: 10px 77px 10px 43px;
    font-family: var(--text-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.96px;
    cursor: pointer;
    margin-top: 18px;
    position: relative;
    top: 0;
    right: 0;
}

.subscribe-section .subscribe-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: var(--white);
    position: absolute;
    right: 28px;
    top: 13px;
}
        }