.main-resources {
  .resource-head {
    padding: 2rem 1.5rem;
    background-color: #ffe9e9;
    margin-bottom: 5rem;

    @media screen and (max-width: 1400px) {
      padding: 3rem;
    }

    @media screen and (max-width: 600px) {
      padding: 2rem 1rem;
    }

    .head-content {
      display: flex;
      justify-content: center;
      gap: 8rem;
      padding: 0 5%;
      align-items: center;

      @media screen and (max-width: 900px) {
        flex-direction: column;
        gap: 0rem;
        text-align: center;

        .desk {
          display: none;
        }

        .phone {
          display: block !important;
          margin-top: 2rem;
          width: 35%;
        }
      }

      @media screen and (max-width: 600px) {
        .phone {
          width: 68% !important;
        }
      }

      .phone {
        display: none;
      }

      h1 {
        font-size: 3rem;
        margin-bottom: 0.8rem;

        @media screen and (max-width: 1400px) {
          font-size: 2.5rem;
        }

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

        @media screen and (max-width: 600px) {
          font-size: 1.6rem;
        }
      }

      p {
        font-size: 1.1rem;
        margin: 0.5rem 0 3rem;

        @media screen and (max-width: 600px) {
          font-size: 1rem;
          line-height: 1.5;
          margin: 0.5rem 0 2rem;
        }
      }

      img {
        width: 30rem;

        @media screen and (max-width: 1200px) {
          width: 22rem;
        }

        @media screen and (max-width: 1000px) {
          width: 15rem;
        }
      }
    }
  }

  .resource-content {
    & > .title {
      text-align: center;
      margin-bottom: 4rem;
      padding: 0 2rem;

      @media screen and (max-width: 820px) {
        margin-bottom: 4rem;
      }

      @media screen and (max-width: 450px) {
        padding: 0 1rem;
      }
    }

    .grid {
      margin-bottom: 8rem;

      @media screen and (max-width: 820px) {
        margin-bottom: 5rem;
      }

      .grid-content {
        display: grid;
        grid-template-rows: repeat(2, 200px);
        grid-template-columns: repeat(3, minmax(300px, 400px));
        gap: 4rem;
        justify-content: center;
        padding: 0 2rem;

        @media screen and (max-width: 1380px) {
          gap: 2rem;
        }

        @media screen and (max-width: 1200px) {
          grid-template-columns: repeat(2, minmax(300px, 400px));
        }

        @media screen and (max-width: 820px) {
          grid-template-rows: 10px repeat(5, 200px);
          grid-template-columns: minmax(300px, 0.8fr);
        }

        @media screen and (max-width: 515px) {
          grid-template-rows: 10px repeat(5, 225px);
          grid-template-columns: minmax(300px, 1fr);
        }

        @media screen and (max-width: 370px) {
          grid-template-rows: repeat(5, 225px);

          .c0 {
            display: none !important;
          }
        }

        .ca:not(:first-child) {
          border-radius: 18px;
          border: 1px solid rgba(128, 128, 128, 0.558);
          flex-direction: column;
          gap: 0.8rem;
          padding: 1rem;
          position: relative;
          overflow: hidden;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

          span {
            background-color: #c2486e;
            color: white;
            font-weight: 700;
            padding: 0.5rem 1rem;
            border-radius: 50%;
            font-size: 1.5rem;
            display: inline-block;
            position: absolute;
            top: -5px;
            left: -5px;

            @media screen and (max-width: 515px) {
              position: relative;
              top: 0;
              left: 0;
              font-size: 1.2rem;
            }
          }

          h4 {
            color: #18024f;
            text-align: center;
          }

          p {
            text-align: center;
          }
        }

        .ca {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .why-us {
      margin-bottom: 6rem;

      .card_load_extreme_descripion {
        height: 30rem;
        width: 25rem;
        border-radius: 18px;
        background-image: url('../img/why-us.jpeg');
        background-size: cover;
        background-position: center;

        @media screen and (max-width:500px) {
          width: 70%;
          height: 20rem;
        }
      }

      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;

        @media screen and (max-width: 820px) {
          flex-direction: column-reverse;

          .text {
            padding: 0 5%;
            width: 100%;
          }
        }


      }

      .text {
        width: 33%;

        .title {
          margin-bottom: 2rem;
        }

        span {
          font-weight: 700;
          color: #18024f;
        }

        div:last-of-type {
          font-size: 1.1rem;

          p:not(:last-of-type) {
            margin-bottom: 1.5rem;
          }
        }
      }
    }

    .ct-us {
      margin-bottom: 4rem;

      .title {
        text-align: center;
        margin-bottom: 0.8rem;
        padding: 0 1rem;
      }

      .content {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: center;
        padding: 0 4%;

        @media screen and (max-width:600px) {
          font-size: 1rem;
          line-height: 1.5;
        }

        p {
          margin-bottom: 2rem;
        }
      }
    }
  }

  .custom-link2 {
    background-color: #f22c3b;
    border: none;
    transition: all 0.2s;

    &:hover {
      transform: scale(1.1);
      box-shadow: -3px -15px 20px #ffffff, -3px -10px 10px #ffffff,
      -10px 0px 15px #ffffff, 5px 15px 15px rgba(0, 0, 0, 0.3);
    }
  }

  .c0,
  .text > .title,
  .ct-us > .title {
    font-size: 1.2rem;
    color: green;
  }
}

@keyframes load89234 {
  100% {
    background-position: -100% 0;
  }
}