/* CSS HEX

    --mint-cream: #e6efec;
    --yellow-green: #aada2f;
    --carrot-orange: #f39200;
    --star-command-blue: #1480c4;
    --gunmetal: #192c38;

    CSS HSL
    --mint-cream: hsla(160, 22%, 92%, 1);
    --yellow-green: hsla(77, 70%, 52%, 1);
    --carrot-orange: hsla(36, 100%, 48%, 1);
    --star-command-blue: hsla(203, 81%, 42%, 1);
    --gunmetal: hsla(203, 38%, 16%, 1);

    SCSS RGB
    $mint-cream: rgba(230, 239, 236, 1);
    $yellow-green: rgba(170, 218, 47, 1);
    $carrot-orange: rgba(243, 146, 0, 1);
    $star-command-blue: rgba(20, 128, 196, 1);
    $gunmetal: rgba(25, 44, 56, 1);
    */


    .servizi {
        margin-top: 10rem;
        padding-bottom:10rem;

    }
    .servizi .container_intro {
        position: relative;
    }
    .servizi .content_intro{

    }
    .servizi .titolo {
        margin-bottom: 3rem;
        color: #e6efec;
        text-align: center;
    }
    .servizi .titolo h1{
        font-size: 70px;
        font-weight: bold;
        margin-bottom: 1.5rem;
    }
    .servizi .titolo h1:before {
        position: absolute;
        content:  "SERVIZI";
        font-size: 70px;
        font-weight: bold;
        color: #192c38;
        transform: translate(4px,-2px);
    }
    .servizi .titolo span {
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        line-height: 5px;
    }
    .servizi .description {
        margin-top: 3rem;
        margin-bottom: 3rem;
        text-align: center;
    }

    .servizi .body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      font-family: "Roboto", sans-serif;
    }


    * {
      marign: 0;
      padding: 0;
      font-family: "montserrat", sans-serif;
      box-sizing: border-box;
    }

    a, a:hover {
      text-decoration: none;
    }

    .services-container {
      /*background: #34495e;*/
      padding: 60px;
    }
    .services-title {
      text-align: center;
      font-weight: 500;
      text-transform: uppercase;
      color: #e6efec;
    }
    .services-border {
      width: 150px;
      height: 2px;
      background: #1480c4;
      margin: 30px auto;
    }
    .services-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .services-content--box {
      max-width: 33.33%;
      padding: 14px;
      text-align: center;
      color: #e6efec;
      margin-bottom: 15px;
      transition: 0.5s ease;
      border-radius: 10px;
    }
    .services-content--box:hover {
        background-color: rgba(230, 239, 236, 0.4);
    }
    .services-content--box:hover .services-content__title h6{
        color: #1480c4;
      border-color: #1480c4;
    }
    .services-content__icon {
      display: inline-block;
      width: 75px;
      height: 75px;
      border: 3px solid #192c38;
      transform: rotate(45deg);
      margin: 16px 0 30px;
      transition: 0.3s linear;
      color: #192c38;
      border-radius: 40px;
    }
    .services-content--box:hover .services-content__icon {
      background: #aada2f;
      color: #f39200;
      border: 3px solid #f39200;
    }

    .services-content__icon i {
      line-height: 70px;
      transform: rotate(-45deg);
      font-size: 20px;
    }
    .services-content__title {

    }
    .services-content__title h6 {
      font-size: 18px;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 12px;
      border-bottom: 2px solid transparent;
      transition: 0.25s ease-out;
      color: #e6efec;
      font-family: 'montserrat', sans-serif;
      padding-bottom: 8px;
    }

    .services-content__desc {
      font-size: 16px;
      color: #192c38;
    }

    .inner-width {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      padding: 0 20px;
      overflow: hidden;
    }

    .lightbox-container {
      min-width: 500px;
      min-height: 200px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -80%);
      border-radius: 15px;
      background-color: #ECEFF1;
      transition: transform 0.25s ease-out;
      display: none;
    }
    .lightbox:before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
    }
    .lightbox:target .lightbox-container {
      display: block;
    }
    .lightbox:target:before {
      display: block;
    }
    .lightbox-content {
      padding: 25px;
    }
    .lightbox-content__actions {
      margin-top: 15px;
    }
    .lightbox-btn {
      background-color: #1480c4;
      color: #e6efec;
      margin: 10px;
      padding: 10px;
      border-radius: 10px;
    }
    .lightbox-btn:hover {
      color: #e6efec;
      background-color: #0277BD;
      cursor: pointer;
    }
    .lightbox-submit {
      background-color: #1480c4;
      color: #e6efec;
    }
    .lightbox-submit:hover {
      color: #e6efec;
      background-color: #0277BD;
      cursor: pointer;
    }
    .lightbox-close {
      display: inline-block;
      float: right;
    }
    .box-highlight {
            background-color: rgba(230, 239, 236, 0.4);
        }
    .box-title-highlight h6{
            color: #1480c4;
          border-color: #1480c4;
        }
    .box-icon-highlight {
          background: #aada2f;
          color: #f39200;
          border: 3px solid #f39200;
        }

    @media screen and (max-width: 960px) {
      .services-content--box {
        max-width: 45%;
      }
    }
    @media screen and (max-width: 768.02px) {
      .services-content--box {
        max-width: 50%;
      }
      .servizi .services-content {
          margin:0.5rem;
      }
      .servizi .services-container{
          padding: 0;

      }
      .servizi .inner-width {
          padding:0;
      }
      .servizi .services-content__desc {
          text-align: justify;
      }
    }
    @media screen and (max-width: 480px) {
      .services-content--box {
        max-width: 100%;
      }
    }