/* ================================ MEDIA QUERIES – RESPONSIVIDADE ================================ */

@media screen and (max-width: 1136px) {
  .skills {
    padding: 100px 0px 20px 0px;
    h1.title {
        text-align: center;
        font-size: 3em;
        font-weight: 400;
    }

    .content-skills {
      margin: 0;
      margin-top: 30px;
      display: flex;
      flex-direction: row !important;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: nowrap !important;
      gap: 20px;
      overflow: hidden;
      overflow-x: auto;
      padding: 20px 0 50px 0;
      height: auto;
      width: 100%;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      position: relative;

      &::before {
        opacity: 0;
      }

      .content-top,
      .content-bottom {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
      }
      .content-top {
        .sub-content {
          width: 300px;
          scroll-snap-align: center; 
          &:nth-child(1) {
            margin-left: 30px;
          }
        }
      } 
      .content-bottom {
        .sub-content {
          width: 300px;
          scroll-snap-align: center; 
        }
      } 

      .content-top .sub-content:nth-child(2) {
        transform: translateY(0);
      }
      
      .content-bottom .sub-content:nth-child(2) {
        margin-top: 0;
      }
    }
  }

  .services {
    .content-cards-services {
      display: flex;
      flex-direction: row !important;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: nowrap !important;
      gap: 20px;
      overflow: hidden;
      overflow-x: auto;
      padding: 20px 40px 50px 0;
      height: auto;
      width: 100%;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      position: relative;
      .card {
        min-width: 320px !important;
        scroll-snap-align: center;
      }
    }
  }
  
}

@media screen and (max-width: 904px) {
  .skills {
    p.section-title {
      margin: auto;
      text-align: center;
    }

     h1.title {
        margin: 20px auto;
        text-align: center;
        font-size: 2em;
        font-weight: 400;
    }
  }
  section.who-we-are {
   
    h1.title {
      font-size: 3em;
      margin-left: 20px;
      margin-right: 20px;
      font-weight: 400;
    }

    p.subtitle {
      font-size: 1em;
      margin-left: 20px;
      margin-right: 20px;
    }
  
  }
  

  section.services {

    h1.title {
      font-size: 3em;
      margin-left: 30px;
      margin-right: 45px;
      font-weight: 400;
    }

    p.subtitle {
      font-size: 1em;
      margin-left: 30px;
      margin-right: 30px;
    }
    
    .content-cards-services {
      margin: 0 20px 0 20px;
      grid-template-columns: 1fr !important; 
      grid-template-rows: 2.5fr 2.5fr 2.5fr 2.5fr !important; 
    }
    .content-cards-pressets {
        display: block;
        width: calc(100% - 60px);
        height: auto;
        margin: 30px auto;
        border-radius: 1.2em;
        .card {
            padding: 20px;
            display: flex;
            justify-content: left;
            text-align: left;
            gap: 15px;
            p {
                color: #000000;
                font-weight: 400;
            }
        }
    }
  }
  
  .philosophy {
    h1.title {
        margin: 20px auto;
        text-align: center;
        font-size: 3em;
        font-weight: 400;
        color: #000000;
    }
    
    p.subtitle {
       text-align: justify;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-items: center;
        .left {
          margin-top: 40px;
          padding: 0;
          .content-left {
            
            img {
              padding: 0;
              height: auto;
              width: 300px;
            }
          }
        }
        .right {
          padding: 5px;
        }
        
    }
   }
  .name-brand {
      font-size: 9em;
      height: 110px;
      text-align: center;
      &:hover {
        margin-top: -5px;
        height: 118px !important;
      }
  }
  .float-info {
      transform: scale(0.8);

      &.info-1 {
        right: 0px !important;
      }
      &.info-2 {
        top: 145px !important;
        left: 0px !important;
      }
  }

  header {
    ul {
      position: absolute;
      margin: auto;
      right: 25px;
      padding-right: 240px;
      margin-right: 0;
      border: .9px solid #8888888c;
    } /* UL */
    
    .button-containment {
      gap: 10px;
    } /* BUTTON CONTAINMENT */
  }
}

@media screen and (max-width: 600px) {
  .loading-page {
    .txt {    
        .textIntro {
          font-size: 2em;
            font-weight: 500;
        }
    }
  }

  .skills {
    padding-bottom: 0px;
    p.section-title {
      margin-left: 30px;
      text-align: left;
    }

     h1.title {
        text-align: left !important;
        margin: 20px 30px 0 30px;
        text-align: center;
        font-size: 2em;
        font-weight: 400;
    }
  }
  section.who-we-are {
    padding-top: 100px;
    p.section-title {
      margin-left: 5px;
      text-align: left;
    }

    h1.title {
      text-align: left !important;
      font-size: 2em;
      margin-left: 5px;
      margin-right: 20px;
      font-weight: 400;
    }

    p.subtitle {
      text-align: left !important;
      font-size: 1em;
      margin-left: 5px;
      margin-right: 20px;
    }
  
  }
  

  section.services {
    padding-top: 100px;
    padding-bottom: 0px;
    p.section-title {
      margin-left: 30px;
      text-align: left;
    }

    h1.title {
      text-align: left !important;
      font-size: 2em;
      margin-left: 30px;
      margin-right: 45px;
      font-weight: 400;
    }

    p.subtitle {
      text-align: left !important;
      font-size: 1em;
      margin-left: 30px;
      margin-right: 30px;
    }
    
    .content-cards-services {
      margin: 0 20px 0 20px;
      grid-template-columns: 1fr !important; 
      grid-template-rows: 2.5fr 2.5fr 2.5fr 2.5fr !important; 
    }
  }
  
  .philosophy {
    
    padding-top: 100px;
    p.section-title {
      margin-left: 5px;
      text-align: left;
    }
    h1.title {
        text-align: left !important;
        margin: 20px 0 0 5px;
        text-align: center;
        font-size: 2em;
        font-weight: 400;
        color: #000000;
    }
    
    p.subtitle {
      margin-top: 50px;
      font-size: 1em;
      text-align: justify;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-items: center;
        .left {
          margin-top: 40px;
          padding: 0;
          .content-left {
            
            img {
              padding: 0;
              height: auto;
              width: 300px;
            }
          }
        }
        .right {
          padding: 5px;
        }
        
    }
   }
  .name-brand {
      font-size: 9em;
      height: 110px;
      text-align: center;
      &:hover {
        margin-top: -5px;
        height: 118px !important;
      }
  }
  .float-info {
      transform: scale(0.8);

      &.info-1 {
        right: 0px !important;
      }
      &.info-2 {
        top: 145px !important;
        left: 0px !important;
      }
  }

  header {
    ul {
      position: absolute;
      margin: auto;
      right: 25px;
      padding-right: 240px;
      margin-right: 0;
      border: .9px solid #8888888c;
    } /* UL */
    
    .button-containment {
      gap: 10px;
    } /* BUTTON CONTAINMENT */
  }
}

@media screen and (max-width: 755px) {
  
  .marker-mouse {
      display: none;
  }
  .float-info {
      display: none;
  }
  header {
    ul {
      position: absolute;
      right: 25px;
      padding-right: 240px;
      margin-right: 0;
    } /* UL */
    
    .button-containment {
      gap: 10px;
    } /* BUTTON CONTAINMENT */
  }
  main {
    .content-cards {
      display: grid; 
      grid-template-rows: 1fr 1fr ;
      grid-template-columns: 1fr 2.7fr;
      
      gap: 10px;
      height: 100%;
    }
    .card {
      width: 100% !important;
      grid-row-start: 1;
      grid-column-start: 1;

      grid-row-end: 2;
      grid-column-end: 5;
      &:nth-child(2) {
        grid-row-start: 2;
        grid-column-start: 1;

        grid-row-end: 3;
        grid-column-end: 2;
        &::before {
          margin: 10px auto;
        }
      }
      &:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 2;

        grid-row-end: 3;
        grid-column-end: 5;
        &::after {
          display: none;
        }
      }
      &:nth-child(4) {
        grid-row-start: 3;
        grid-column-start: 1;

        grid-row-end: 5;
        grid-column-end: 5;
      }
        
    }
  }
}
 

@media screen and (max-width: 700px) {
  header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    left: 10px;
    right: 10px;
    .logo-brand {
      position: absolute;
      left: calc(55% - 80px);
    }
    .menu-icon {
      display: inline;
      position: absolute;
      left: 10px;
      &:after {
        position: absolute;
        left: 0;
        top: -4px;
        content: '';
        width: 20px;
        height: 2.5px;
        background: var(--color);
        border-radius: 8em;
      } /* AFTER */
      &:before {
        position: absolute;
        left: 0;
        bottom: -4px;
        content: '';
        width: 20px;
        height: 2px;
        background: var(--color);
        border-radius: 8em;
      } /* BEFORE */
    } /* MENU ICON */
    ul {
      display: none;
    } /* UL */
    .button-containment {
      display: none;
    } /* BUTTON CONTAINMENT */
  } /* HEADER */

  main {
    .content-text {
      
      h1 {
        font-size: 2.6em;
        margin: 20px 20px 20px 20px;
      }
      p {
        margin: 0 20px 0 20px;
      }
      .buttons {
        gap: 20px;
      } 
    }
    .assessmentsAndNetworks {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 30px 0 30px;
        margin: 20px auto;
        gap: 20px;
        .content-1 {
            width: 100%;
            display: flex;
            flex-direction: column;
            text-align: center;
            div {
                font-size: .7em;
                font-weight: 200;
                font-family: 'Stretch Pro', sans-serif;

            }
        }
        .content-2 {
            float: right;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            div {
                background: rgb(108, 108, 112);
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                i {
                    color: #ffffff;
                }
            }
        }
    }
  }

  .effectBlur1 {
      background: radial-gradient(circle at top, /*rgba(0, 126, 174, 0.81)*/ var(--white-color), transparent);
  }

  .effectBlur2 {
      display: none;
  }

}

@media screen and (max-width: 560px) {
  
}

@media (max-aspect-ratio: 16/9) { 
  
}

@media (min-aspect-ratio: 16/9) {
  
}