/* .root {
        --main-font: 'Roboto', sans-serif;
        --secondary-font: 'Raleway', sans-serif;
        --main-letter-spacing: 0.03em;
        --secondary-letter-spacing: 0.02em;
        --other-letter-spacing: 0.06em;
    } */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
          
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }
  
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0;
    }
  
    ul,
    ol {
      margin: 0;
      padding: 0; 
    }
    img {
      display: block;
    }
    
    body {
      color: #212121;
    }
    a {
      text-decoration: none;
      color: #212121;
    }
    ul {
      list-style: none;}
    .colortext {
        color: #2196F3;
      }
    .accent {
      color: #2196F3
    }
    .header .address a:hover,
    .header .address a:focus {
      color: #2196F3;
    }
    .link:hover,
    .link:focus {
      color: #2196F3;
    }
    .container {
      width: 1200px;
      padding: 0 15px;
      margin: 0 auto;
      /* background-color: #ec93ca; */
    } 
    /* --------------------------Header */
    .link.logo {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 26px;
      line-height: 1.192;
      letter-spacing: 0.03em;
      color: #000000;
    }
    .nav__item {
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.143;
      letter-spacing: 0.02em;
    }
    .header .address a{
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.143;
      letter-spacing: 0.02em;
      color: #757575;
    }
    .nav__items {
      display: flex;
      align-items: center;
    }
    .header .address {
      display: flex;
    }
    .nav {
      display: flex;
      align-items: center;
    }
    .header .logo {
      margin-right: 90px;
    }
  
    .nav__item:not(:last-child) {
      margin-right: 50px;
    }
  
    .header__mail {
      margin-right: 50px;
    } 
    .link {
      display: flex;
      /* outline: 1px solid rgb(37, 173, 25); */
    }
    .header {
      border-bottom: 1px solid  #EEEEEE; 
      padding-top: 32px;
      padding-bottom: 32px;
      /* background-color: rgb(229, 151, 151); */
        /* outline: 1px solid tomato; */
    }
    .header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
   
    /*---------------------------------------- hero */
    .hero__title {
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
      font-size: 44px;
      line-height: 1.364;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #FFFFFF;
      /* outline: 1px solid rgb(197, 94, 211); */
    }
    .hero__title {
      margin-bottom: 30px;
      width: 700px;
      margin-left: auto;
      margin-right: auto;
      /* outline: 1px solid rgb(197, 94, 211); */
    }
  
    .modal__btn {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 16px;
      line-height: 1.875;
      letter-spacing: 0.06em;
      color: #FFFFFF;
    }
  
    .modal__btn {
      /* position: absolute; */
      min-width: 200px;
      background: #188CE8;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      cursor: pointer;
      padding: 10px 32px;
    }
    .hero {
      padding-top: 200px;
      padding-bottom: 200px;
      background: #2F303A;
    }
    .hero .container{
      text-align: center;
      
      /* background: #a0cff7; */
  
    }
    
    /* --------------------------Features------------ */
    .features__subtitl {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.143;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #212121;
    }
  
    .features__desc {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.714;
      letter-spacing: 0.03em;
      color: #757575; 
    }
    .features__desc {
      padding-right: 20px;
      /* outline: 1px solid rgb(5, 1, 0); */
    }
    .features__items {
      display: flex;
    }
    .features__item:not(:last-child) {
      margin-right: 30px;
    }
    .features__subtitle {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.143;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #212121;

      margin-bottom: 10px;
    }
    .features {
      padding-top: 94px;
      padding-bottom: 94px;
      /* background-color: rgb(231, 197, 197); */
    }
    /* -----------------Work-examples ----------------*/
  
    .work-examples__title,
    .team__title {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 36px;
      line-height: 1.167;
      letter-spacing: 0.03em;
      /* color: #212121; */
    }
    .work-examples {
      padding-bottom: 94px;
      /* background-color: rgb(153, 10, 10); */
    }
  
    .work-examples .container {
      text-align: center; 
      

    }
    .work-examples__items {
      display: flex;
      justify-content: center;
    }
    .work-examples__item:not(:last-child) {
      margin-right: 30px;
    }
  
    .work-examples__title {
      margin-bottom: 50px;
    }
    /* -----------------------------------------Team */
    /* .team {
      background: rgb(192, 87, 87);
    } */
    .team__subtitle {
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.188;
      letter-spacing: 0.03em;
      /* color: #212121; */
    }
    .team__item:not(:last-child) {
      margin-right: 30px;
    }
    .team__subtitle {
      padding-top: 30px;
      padding-bottom: 10px;
    }
    .team__desc {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.188;
      letter-spacing: 0.03em;
      color: #757575;
    }
    .team__items {
      display: flex;
      text-align: center;
      justify-content: center;
    
    }
    .team__item {
      background: #FFFFFF;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2);
      border-radius: 0px 0px 4px 4px;
      padding-bottom: 30px;
    }
    .team {
      padding-top: 94px;
      padding-bottom: 94px;
      /* background-color: rgb(40, 201, 19); */
    }
  
    .team__title {
      text-align: center;
      margin-bottom: 50px;
      /* background-color: rgb(139, 111, 204); */
    }
    /*    ---------------------------------------- Footer */
    .footer__adrress a{
      color: #FFFFFF; 
     }
     
     .footer__mail a,
     .footer__tel a {
      color: rgba(255, 255, 255, 0.6);
     }
    
    .footer .link {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.714;
      letter-spacing: 0.03em;
      
      }
    
    .footer {
      background: #2F303A;;
      padding-bottom: 60px;
      padding-top: 60px;
    }
    .footer .logo {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 26px;
      line-height: 1.192;
      letter-spacing: 0.03em;
      color: #FFFFFF;

      margin-bottom: 20px;
    }
    .footer .address {
      display: flex;
      flex-direction: column;
    }
    .footer .item:not(:last-child) {
      margin-bottom: 9px;
    }
       /* -----------------------Catalog-------------- */
    .catalog__btn {
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.625;
      letter-spacing: 0.03em;
      color: #212121;
    }
    .catalog__btn {
      min-width: 73px;
      border: none;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
      padding: 6px 22px;
      background: #F5F4FA;
    }
    .catalog__btn:hover,
    .catalog__btn:focus {
      background-color: #2196F3;
      color: #FFFFFF;
    }
  
    .catalog__subtitle {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 18px;
      line-height: 2;
      letter-spacing: 0.06em;
      color: #212121;
    }
    .catalog__subtitle {
      margin-bottom: 4px;
    }
    .catalog__desc {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.875;
      letter-spacing: 0.03em;
      color: #757575;
    }
  
    .menu-catalog__items {
      display: flex;
      justify-content: center; 
      margin-bottom: 50px;
      /* outline: 1px solid #e88718; */
    }
    .catalog__items {
      display: flex;
      flex-wrap: wrap;
      margin-top: -30px;
      margin-right: -30px;
    }
    
    .menu-catalog__item:not(:last-child) {
      margin-right: 8px;
    }
    .catalog__item {
      display: flex;
      margin-top: 30px;
      margin-right: 30px;
      flex-basis: calc(100% / 3 - 30px);
      justify-content: center; 
      /* outline: 1px solid #091118; */
    }
    
    .title {
      padding: 20px 24px;
      border: 1px solid #EEEEEE;
     
    }
    .menu-catalog {
      padding-top: 94px;
      padding-bottom: 94px;
      /* background-color: rgb(75, 104, 82); */
    }