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

body {
    font-family: "Roboto", sans serif;
    color: #2E2F42;
    background-color: #FFFFFF;
    font-size: 16px;
    font-style: normal;
}

.container {
    width: 1440px;
    margin: 0 auto;
}

.page-header {
      
    display: flex;
    padding: 24px 156px;
    align-items: center;
    justify-content: space-around;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E7E9FC;
}


.webstudio {
    display: flex;
    gap: 0px;
    padding: 0px 76px 0px 0px;   
}

.web {
    color: #4D5AE5;
    font-family: "Raleway";
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: 0.03em;
 }

 .studio {
    color: #2E2F42;
    font-family: "Raleway";
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: 0.03em;
 }
  
.menu {
    display: flex;
    gap: 40px;
    list-style: none;
    padding-right: 332px;
    line-height: 1.5;
}

.menu .link {
    display: block;
    color: #2E2F42;
    text-decoration: none;
}

.menu .link:hover,
.menu .link:focus {
    color: #404BBF;
    line-height: 1.5;
    text-decoration: none;
}

.address {
    display: flex;
    gap: 40px;
            
}

.address .link {
    color: #434455;
    text-decoration: none;
    font-style: normal;
}

.address .link:hover,
.address .link:focus {
    color: #404BBF;
}

.firstsection {
    background: #2E2F42;
    display: flex;
    flex-direction: column;
    
}

h1 {
    font-weight: 700;
    font-size: 56px;
    line-height: 1.0714;
    color: #FFFFFF;
    font-style: normal;
    text-align: center;
    letter-spacing: 0.02em;

    padding: 188px 472px 0px;
    margin-bottom: 48px;
}

button {
    
    margin: 0 auto 188px;
   
}

.buttontext {
    
    cursor: pointer;
    color: #FFFFFF;
    background-color: #4D5AE5;
    
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    
    text-align: center;
    letter-spacing: 0.04em;
    
    box-shadow: 0px 4px 4px 0px #00000026;
    border-radius: 4px;

    padding: 16px 32px;
 
}

.buttontext:hover {
    background-color: #404BBF;
}

.section {
    padding: 120px 156px;
}

.secondsection .subjects {
    display: flex;
    gap: 24px;
    list-style: none;
}

.item h3 {
    font-size: 20px;
    line-height: 1.2;
    color: #2E2F42;
    letter-spacing: 0.02em;
}

.item p {
    font-size: 16px;
    line-height: 1.5;
    color: #515543;
    letter-spacing:0.02em;
}

.thirdsection {

    background-color: #F4F4FD;
    
}

h2 {    
    font-size: 36px;
    line-height: 1.111;
    color: #2E2F42;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;

    margin-bottom: 72px;
}

.ourteam {
    display: flex;
    list-style: none;
    gap: 24px;
}

.ourteam .card {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 6px rgba(46, 47, 66, 0.08), 0px 1px 1px rgba(46, 47, 66, 0.16), 0px 2px 1px rgba(46, 47, 66, 0.08);
    border-radius: 0px 0px 4px 4px;

}

.ourteam .id {
    display: flex;
    
    flex-direction: column;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;

}
.card-image {
    display: block;
}

.ourteam .name {
    font-size: 20px;
    line-height: 1.2;
    color: #2E2F42;  
    font-weight: 700;
}

.ourteam .position {
    font-size: 16px;
    line-height: 1.5;
    color: #435544;
}

.portfolio {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 24px;
      
}

.card2 {
    padding: 0px;
    background-color: #fff;    
}

.card2-image {
    width: 360px;
    display: block;
}

.portfolio .id2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 16px;
    
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #E7E9FC;

}

.portfolio .work {
    font-size: 20px;
    line-height: 1.2;
    color: #2e4230;
    font-weight: 700;
}

.portfolio .type {
    font-size: 16px;
    line-height: 1.5;
    color: #435544;
}

footer {
    display: flex;
    flex-direction: column;
    background-color: #2E2F42;
    padding: 100px 1020px 100px 156px;
    gap: 16px;
   }

.webstudio2 {
    font-family: "Raleway";
    font-weight: 700;
    font-size: 18px;
    line-height: 1.166;
    letter-spacing: 0.03em;
}

.web2 {
    color: #4D5AE5;
    text-decoration: none;
}

.studio2 {
    color: #F4F4FD;
    text-decoration: none;
}

.aim {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #F4F4FD;
    letter-spacing: 0.02em;
}