/* .hero-title{
    font-size: 40px;
} */

/* ==========HEADER========== */
.head-item {
    display: flex;
    align-items: center; 
    border-bottom: 1px solid var(--cornflower);
   }
.logo {
    font-family: var(--second-family);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.17;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--iris);
    margin-right: 77px;
}
.logo-color {
    color: var(--navy-blue);
}
.nav {
  
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}
.nav-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
     column-gap: 40px;
}
.menu-items {
    color: var(--navy-blue);
    
}
.menu-item,
.info-email,
.info-tel {
    /* display: block; */

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
    padding-bottom: 24px;
    color: var(--slate);
}
.menu-item:hover,
.menu-item:focus {   
    color: var(--ocean);
}
.nav-info {
    font-weight: 400;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 40px;
}
.info-email:hover,
.info-email:focus,
.info-tel:hover,
.info-tel:hover:focus{
    color: var(--ocean);
}
.info-email-svg,
.info-phone-svg {
fill: currentColor;
width: 20px;
height: 20px;

}
 
/* ==========MAIN========== */
/* ==========hero========== */
.hero {
    background-image:linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url(../img/main/hero/people-office.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    padding-top: 188px;
    padding-bottom: 188px;
}

 /* linear-gradient(rgba(var(--navy-rgb), 0.7), rgba(var(--navy-rgb), 0.7)),  */
.hero-title {
font-weight: 700;
font-size: 56px;
line-height: 1.07;
letter-spacing: 0.02em;
text-align: center;
color: var(--white);
margin-bottom: 48px;

}
.hero-btn {
    display: block;
    margin: 0 auto;
}
/* ==========feature========== */
.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.feature-card {
    flex-basis: calc((100% - 24px * 3)/4);
}
.feature-card-box{
    background-color: var(--cloud);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
   
    margin-bottom: 8px;
}
.feature-card-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--navy-blue); 
    }
    .feature-card-title:not(:last-child){
    margin-bottom: 8px;
    }
.feature-card-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    }

/* ==========doing========== */

.doing {
    padding-bottom: 120px;
   
    /* outline: 5px solid coral; */

}
.doing-title:not(:last-child) {
    margin-bottom: 72px;
}
.doing-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.doing-card {
    flex-basis: calc((100% - 24px * 2)/3);
}
.doing-card-link {
}
.doing-card-img {
}
/* ==========team========== */
.team {
   background-color: var(--cloud);
}

.team-title {
    margin-bottom: 72px;
}
.team-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.team-card {
    flex-basis: calc((100% - 24px * 3)/4);
}
.team-card-img {
}
.team-card-box{
    padding: 32px 16px;
    box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
    background: var(--white);
}
.team-card-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    color: var(--navy-blue);
}
.team-card-title:not(:last-child){
    margin-bottom:8px;
}
.team-card-subtitle {
    font-weight: 400;
    text-align: center;
}

.team-card-subtitle:not(:last-child){
    margin-bottom: 8px;
} 
.team-card-soc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    
}
.team-soc-item {
}
.team-soc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--iris);
    border-radius: 50%;
}
.team-soc-icon:hover,
.team-soc-icon:focus{
background-color: var(--ocean);
}

.team-soc-svg{
    fill: currentColor;
}
.twiter{
    fill: var(--white);
}

/* ==========CUSTOMERS========== */
.customers-title {
}
.title {
}
.customers-list {
}
.list {
}
.customers-card {
}
.customers-card-link {
}
.customers-card-svg {
}



/* ===================PORTFOLIO================================ */
.portfolio {
    padding-top: 96px;

}
.portfolio-menu{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-bottom:72px;
}
.portfolio-menu-item {
    padding: 12px 24px;
    background-color: var(--cloud);
    text-align: center;
    color: var(--iris);
    cursor: pointer;
}
.portfolio-menu-item:hover,
.portfolio-menu-item:focus{
   background-color: var(--iris); 
   color:var(--white) ;
}



.portfolio-card {
    display: flex;
    flex-wrap: wrap;
    row-gap: 48px;
    column-gap: 24px;
   

}


.portfolio-card-list {
    flex-basis: calc((100% - 24px * 2) / 3);
     
}
.portfolio-card-link {
    
}
.portfolio-item {
    padding:32px 16px;
     box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
}
.portfolio-title {
   font-size: 20px; 
   color: var(--navy-blue);
   margin-bottom: 8px;
}
.portfolio-subtitle {
    font-weight: 400;
}
.portfolio-text {
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--cloud);
    background-color: var(--iris);
    padding: 40px 32px;
    min-height: 300px;

}