.page-social {
  // -----------------------------------------------------------------------------
  // ABA - PROGRAMAS SOCIAIS
  // -----------------------------------------------------------------------------
  .section-programas-sociais {
    padding: 90px 0 150px 0;

    .img-wrapper {
      img {
        position: absolute;
        left: -22%;

        // Telas até MD
        @include media($sm-max) {
          position: relative;
          left: 50%;
          transform: translateX(-50%) !important;
          width: 130%;
        }
      }
    }

    .img-wrapper-dois-wrapper {
      padding-top: 90px;

      // Telas até MD
      @include media($sm-max) {
        padding-top: 0px;
        margin-top: -18px;
      }

      // Telas à partir de XXL
      @include media($xxl-min) {
        padding-top: 125px;
      }
    }

    .img-wrapper-dois {
      height: 650px;

      img {
        position: absolute;
        left: -16%;
        top: -3%;
      }

      // Telas até MD
      @include media($sm-max) {
        height: unset;

        img {
          position: relative;
          left: 53%;
          transform: translateX(-50%) !important;
          width: 130%;
        }
      }
    }

    .card-wrapper {
      position: relative;
      background-color: #13455E;
      box-shadow: 0px 20px 30px 0px #13455E80;
      width: 477px;
      max-width: 100%;
      height: auto;
      aspect-ratio: 477 / 456;
      border-radius: 20px;
      z-index: 10;
      padding: 120px 100px 100px 40px;


      h3 {
        color: #65D98B;
        letter-spacing: -6px;
      }

      // Telas à partir de XXL
      @include media($xxl-min) {
        left: -30px;
        top: 50px;
      }

      // Telas até MD
      @include media($sm-max) {
        padding: 45px 40px;
        aspect-ratio: 290/290;
      }
    }

    // Telas até SM
    @include media($xs-max) {
      padding-bottom: 70px;
    }
  }

  // -----------------------------------------------------------------------------
  // ABA - INSTITUTO MELO CORDEIRO
  // -----------------------------------------------------------------------------
  .section-melo-cordeiro {
    display: none;

    .triangle-wrapper {
      padding: 90px 0 75px 0;

      .zigue {
        display: flex;
        flex-direction: column;
        gap: 50px;

        &>div {
          width: 556px;
          max-width: 100%;
        }

        div:nth-child(2) {
          margin-left: 100px;
        }

        div:nth-child(3) {
          margin-left: 200px;
        }

        // Telas até XL
        @include media($lg-max) {
          gap: 20px;

          div {
            width: 100%;
            margin-left: 0 !important;
          }
        }
      }

      .card {
        padding: 56px 70px;
        background-color: #1D9E9A;
        border-radius: 5px;
        border: 0;
        @extend.font24;
        font-weight: 600;
        color: #fff;
        font-family: 'Montserrat Alternates', sans-serif;


        // Telas até XL
        @include media($lg-max) {
          padding: 40px 30px;
        }
      }
    }

    .editor {
      margin-top: 70px;

      // Telas até SM
      @include media($xs-max) {
        margin-top: 40px;
      }
    }

    .img-wrapper {
      img {
        position: relative;
        left: -39%;

        // Telas até XL
        @include media($lg-max) {
          max-width: 100%;
          left: 0;
        }

        // Telas à partir de XXL
        @include media($xxl-min) {
          left: -32%;
        }
      }
    }

    .bg-blue {
      background-color: #052845;
      padding: 100px 0 85px 0;

      h2 {
        margin-bottom: 70px;

        // Telas até SM
        @include media($xs-max) {
          font-size: 28px;
        }
      }

      .swiper-button-prev {
        left: 50%;
        transform: translateX(-50%);
        width: 134px;
        min-width: 134px;
        height: 67px;
        top: -75px;
        background-image: url("data:image/svg+xml,%3csvg width='134' height='67' viewBox='0 0 134 67' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M67 1.05581e-05C29.9969 1.21755e-05 -1.61746e-06 29.9969 0 67C44.6667 66.9984 89.3333 67 134 67C134 29.9969 104.003 8.9406e-06 67 1.05581e-05Z' fill='%2300559C'/%3e%3cpath d='M75 38L67 30L59 38' stroke='white' stroke-width='3' stroke-linecap='round'/%3e%3c/svg%3e");
      }

      .swiper-button-next {
        top: unset;
        left: 50%;
        transform: translateX(-50%);
        width: 134px;
        min-width: 134px;
        height: 67px;
        bottom: -75px;
        background-image: url("data:image/svg+xml,%3csvg width='134' height='67' viewBox='0 0 134 67' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M67 67C29.9969 67 -1.61746e-06 37.0031 0 -5.85733e-06C44.6667 0.00157947 89.3333 -1.95244e-06 134 0C134 37.0031 104.003 67 67 67Z' fill='%2300559C'/%3e%3cpath d='M75 29L67 37L59 29' stroke='white' stroke-width='3' stroke-linecap='round'/%3e%3c/svg%3e");
      }

      .swiper-itens {
        height: 352px !important;
        overflow-x: visible;

        .swiper-slide {
          display: flex;
          align-items: center;
          width: 352px;
          max-width: 100%;
          height: 64px !important;
          background-color: #1D9E9A;
          font-size: 20px;
          font-weight: 700;
          font-family: 'Montserrat Alternates';
          border-radius: 5px;
          padding: 0 24px;
          color: #fff;
          cursor: pointer;
          transition: all ease-in-out .3s;
          margin: 0 auto;

          &:hover,
          &.active {
            background-color: #65D98B;
          }
        }
      }

      .swiper-imagens {

        .swiper-slide {
          &::before {
            display: block;
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 285px;
            background: linear-gradient(360deg, rgba(16, 51, 81, 0.8) 0%, rgba(16, 51, 81, 0) 100.21%);
            z-index: 5;
            border-radius: 5px;
          }
        }
        .text-wrapper {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 25px;
          text-transform: uppercase;
          z-index: 10;

          h4 {
            font-size: 14px;
          }

          // Telas até SM
          @include media($xs-max) {
            position: relative;
            left: unset;
            bottom: 0;
            transform: none;
            padding: 40px 0 20px 0;
          }
        }

        img {
          width: 100%;
          max-width: 100%;
          height: auto;
          aspect-ratio: 827/482;
          object-fit: cover;
        }
      }

      // Telas até MD
      @include media($sm-max) {
        padding: 90px 0 120px 0;

        h2 {
          margin-bottom: 30px;
        }

        .swiper-itens {
          margin-top: 120px;
        }
      }
    }
  }

  // -----------------------------------------------------------------------------
  // ABA - PROJETO E-DUKA E PROJETO COSTURA CRIATIVA
  // -----------------------------------------------------------------------------
  .section-projeto-eduka,
  .section-costura-criativa {
    padding: 90px 0 140px 0;
    display: none;

    .card-wrapper {
      width: 477px;
      max-width: 100%;
      height: auto;
      aspect-ratio: 477 / 456;
      padding: 77px;

      // Telas até LG
      @include media($md-max) {
        padding: 60px 40px;
      }
    }

    .row:has(.card-wrapper) {
      margin-top: 70px;
    }

    .img-wrapper {
      position: relative;

      img {
        position: absolute;
        left: -37%;

        // Telas até LG
        @include media($md-max) {
          position: relative;
          max-width: 100%;
          left: 0;
          margin-top: 50px;
        }
      }
    }

    // Telas até LG
    @include media($md-max) {
      padding-bottom: 0;
    }
  }

  // -----------------------------------------------------------------------------
  // ABA - TURMA DO JILÓ  
  // -----------------------------------------------------------------------------
  .section-turma-jilo {
    display: none;

    .drawings-wrapper {
      position: relative;

      .text-wrapper {
        width: 543px;
        max-width: 100%;
        margin: 0 auto;
      }

      // Telas até MD
      @include media($sm-max) {
        padding-top: 90px;
      }
    }

    .volumes {
      position: relative;
      padding: 135px 0 13vw 0;
      background: linear-gradient(90deg, #1D9E9A 0%, #103351 100%);

      &::before {
        display: block;
        content: url("data:image/svg+xml,%3csvg width='66' height='73' viewBox='0 0 66 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M-3.04389e-06 62.6361C-3.3808e-06 70.3438 8.35208 75.1538 15.0187 71.2856L60.0872 45.1351C66.7303 41.2805 66.7286 31.6866 60.0841 27.8344L15.0156 1.70548C8.34898 -2.15959 -4.21844e-07 2.65065 -7.58685e-07 10.3567L-3.04389e-06 62.6361Z' fill='%2365D98B'/%3e%3c/svg%3e");
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -37.5px;
      }

      h2 {
        max-width: 850px;
        margin: 0 auto;
      }

      // Telas até MD
      @include media($sm-max) {
        padding: 70px 0;
      }
    }

    .imagem-turma-jilo {
      padding: 95px 0;

      .img-wrapper {
        img {
          position: absolute;
          left: -23vw;
          top: 50%;
          transform: translateY(-50%)
        }
      }

      .editor {
        p {
          @extend.font18;
          font-weight: 400;
          color: #5a5a5a;
          font-family: 'Montserrat Alternates', sans-serif;
        }

        strong {
          @extend.font24;
          font-weight: 700;
          color: #1D9E9A;
          font-family: 'Montserrat Alternates', sans-serif;
        }
      }

      // Telas até MD
      @include media ($sm-max) {
        padding: 70px 0;
      }
    }

  }
}