@import './reset.css';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body {
   font-family: "Noto Sans", sans-serif;
    color:black;
    font-size: 14px;
}

.countainer{
    max-width:1230px;
    padding: 0 30px;
    margin: 0 auto;
}

.title-1{
   font-size: 34px;
   font-weight: 600;
}


/* HEADER */
header{
    padding-top: 46px;
    background-color: #F1F1F1;
}

.header-nav{

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 76px;
}

.logo{
position: relative;
padding: 0 12px 3px 0;
font-size: 32px;
font-weight : bold;
line-height: 1;
color:black;
}

.logo::after{
    position:absolute;
    right: 0px;
    bottom: 0px;
    content: '';
    display:block;
    width:8px;
    height:8px;
    background-color: #FDA300;
    border-radius: 50%;
}

/* NAV */

 .nav-list{
    display: flex;
    column-gap: 50px;
    font-size:14px;
    font-weight: 500 ;
 }
 .nav-button{
   display: none;
 }

 .nav-link{
    color:black;
 }

 .nav-link.active{
    color:#606060;
 }

 /* Header Content*/

 .header-row{
    display: flex;
    justify-content: space-between;
    column-gap: 30px;
 }


 .header-heading{
    margin-bottom: 20px;
    font-size:34px;
    font-weight: 600;
    max-width: 482px;
 }

 .header-content p {
    font-size:14px;
    font-weight: 400;
    line-height: 2;
    max-width: 500px;

 }
 .header-content{
    margin-top: 124px;
 }

 .content-recomend-list{
   display: flex;
   flex-direction: column;
   row-gap: 7px;
 }

 .content-recomend li{
   
   font-size: 15px;
   font-weight: 500;
 }
 /* Service */

.services{
padding: 90px 0;


}

.service-title{
   text-align: center;
   margin-bottom: 40px; 
}

.service-sections{
   display: flex;
   flex-direction: column;
   row-gap: 11px;
   flex-flow:column;
   
}

.service-sections a{
   font-size: 18px;
   color: #000000;
   font-weight: 500;

   transition: background-color 0.2s ease-in, top 0.2s ease-in;
}





.service-sections a:hover, .service-sections a:focus{
   background-color: #e2dede;
}

.service-sections a:active{
   background-color: #000000;
   position: relative;
   top: 1px;
}


.service-card-back{
   margin-top: 50px;
   font-size: 16px;
   font-weight: 500;

   display: inline-block;
   padding: 5px 10px;
   background-color: #9c9494;
   border-radius: 20px;
   transition: opacity 0.2s ease-in;
}

.service-card-back:hover{
   opacity: 0.8;
}

.service-card-back a{
   color:#FFFFFF;
}

.services-row{
display: flex;
column-gap: 30px;
}

.service-card-img{
margin-bottom: 30px;
}

.service-card-title{
margin-bottom: 10px;
font-weight:600 ;
font-size: 24px;
text-transform:uppercase;
}

.service-card p{
font-weight: 400;
line-height: 2;

}
/* Контакты */

   .contacts{
      padding: 90px 0;
      text-align: center;
      background-color: #F6F6F6;
   }

   .contact-title{
margin-bottom: 40px;
   }

   .contacts-content{
      margin-bottom: 40px;
      font-size: 18px;
   }

   .contacts-content a{
      margin-bottom: 40px;
      font-size: 18px;
      color:#2e20b1
   }
   .contacts-button{
margin-bottom: 80px;
   }

   .button{
      display: inline-block;
      padding: 7px 22px;
      background-color: #070707;
      border-radius: 30px;
      color:#FFFFFF;
      font-size: 18px;

      transition: background-color 0.2s ease-in, top 0.2s ease-in;
   }

   .button:hover, button:focus{
      background-color: #383838;
   }

   .button:active{
      background-color: #000000;
      position: relative;
      top: 1px;
   }

   .contacts-social{
display: flex;
justify-content: center;
align-items: center;
column-gap: 60px;
margin-bottom: 40px;
   }

   .contacts-footer{
color: #828282;
   }