aside,
footer,
.sliderManu__1,
.sliderManu__2 {
  section#rosita_widFour {
    padding: 7px !important;
    width: 100% !important;
    border-radius: 10px !important;

    & .continer {
      width: inherit !important;

      & .top {
        margin-bottom: 3rem !important;
      }

      & .box {
        flex-direction: column !important;

        & .left,
        & .right {
          gap: 0 !important;
          width: 100% !important;
          padding: 0 !important;
        }

        & .right {
          border-top: 1px solid #ffffff2e !important;
          padding-top: 3rem !important;
          display: flex !important;
          flex-direction: column;

          & .boxing {
            width: 100% !important;
          }

          & ul.img {
            display: flex !important;
            flex-direction: column !important;
            gap: 1rem !important;

            & li:nth-child(1) {
              margin: 0 !important;
            }
          }
        }
      }
    }
  }
}

section#rosita_widFour {
  margin: 3rem auto;
  position: relative;
  background: radial-gradient(
      1000px 600px at 0% -10%,
      rgb(236 86 86 / 27%),
      transparent 60%
    ),
    radial-gradient(900px 600px at 120% 0%, rgb(126 91 91 / 87%), #00000085 60%),
    #3e4e77;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: linear-gradient(
        to right,
        currentColor 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 32px 32px;
    color: #94a3b8;
  }

  & * {
    font-family: "Inria Sans", sans-serif;
    color: #fff;
  }

  & .continer {
    max-width: var(--premary_width);
    margin: 0 auto;

    & .top {
      padding: 2rem;
      justify-content: center;

      & p {
        padding-bottom: 5px;
        border-bottom: 3px solid #00b3ff;
        width: fit-content;
        font-size: 30px;
        font-family: lora;
      }
    }

    & .box {
      & .left,
      & .right {
        width: calc(100% / 2);
        height: 42rem;
        padding: 1rem;
        margin-left: 0px;

        & .boxing {
          height: 20rem;
          overflow: hidden;
          border-radius: 10px;
          position: relative;

          & .info {
            display: flex;
            position: absolute;
            bottom: 0;
            gap: 8px;
            width: 100%;
            padding: 1rem;
            padding-top: 6rem;
            background: linear-gradient(to top, black, transparent);
            flex-direction: column;

            & p.ftf {
              border: 1px dashed;
              width: fit-content;
              padding: 5px 8px;
              border-radius: 100px;
              font-size: 14px;
            }

            & ul li {
              font-size: 13px;
            }

            & h3:nth-child(2) {
              font-size: 19px;
            }

            & p:nth-child(3) {
              font-size: 12px;
              line-height: 22px;
              letter-spacing: 1px;
            }
          }
        }
      }

      & .left {
        ul.img {
          direction: ltr !important;
          margin: 1.5rem 0;
          overflow-x: clip;
          justify-content: flex-start;

          & li {
            width: 7rem;
            height: 7rem;
            border: 2px solid;
            transition: 0.5s;
            border-radius: 100%;
            cursor: pointer;
            position: relative;
            overflow: hidden;

            & p {
              position: absolute;
              font-size: 3rem;
              width: 0;
              height: 0;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #ffffff45;
              transition: 0.2s;
              border-radius: 100%;
              text-shadow: 0 0 11px black;
            }

            &:hover p {
              width: inherit;
              height: inherit;
              transition: 0.5s;
            }

            &:not(:first-child) {
              margin-left: -50px;
            }

            &:hover {
              transform: translateY(-1rem);
              transition: 0.5s;
            }

            &:focus-within ~ &,
            &:hover ~ & {
              transform: translateX(50px);
            }
          }
        }

        & ul.info {
          position: relative;

          & li {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            transform: translateY(40px);
            transition: 0.5s;

            & .info {
              & h3:nth-child(1) {
                font-size: 23px;
              }

              & div:nth-child(2) {
                margin: 10px 0;
                font-size: 12px;
                line-height: 22px;
                letter-spacing: 1px;
                display: flex;
                align-items: center;
                gap: 5px;
              }

              & p:nth-child(3) {
                font-size: 12px;
                line-height: unset;
                letter-spacing: 1px;
              }
            }

            &.rosMode {
              opacity: 1;
              visibility: visible;
              transform: translateY(0px);
              transition: 0.5s;
            }
          }
        }
      }

      & .right {
        & .boxing {
          & h3 {
            font-size: 19px;
          }

          & p:nth-child(2) {
            font-size: 12px;
            line-height: 22px;
            letter-spacing: 1px;
          }

          & p:nth-child(3) {
            letter-spacing: 1px;
            line-height: unset !important;
          }
        }

        & ul.img {
          margin-top: 27px;

          & li {
            align-items: center;
            gap: 1.5rem;
            justify-content: flex-start;

            & img {
              width: 7rem;
              min-width: 7rem;
              height: 7rem;
              min-height: 7rem;
              border-radius: 100%;
              border: 2px solid;
            }

            & .info {
              & h3:nth-child(1) {
                font-size: 16px;
              }

              & p:nth-child(2) {
                margin-top: 10px;
                font-size: 12px;
                line-height: 22px;
                letter-spacing: 1px;
              }
            }
          }

          & li:nth-child(1) {
            margin-bottom: 2rem;
          }
        }
      }
    }
  }
}

/*  */
@media (max-width: 576px) {
  section#rosita_widFour {
    padding: 7px;
    width: 100%;

    & .continer {
      width: inherit;

      & .top {
        margin-bottom: 3rem;
      }

      & .box {
        flex-direction: column;

        & .left,
        & .right {
          width: inherit;
          padding: 0;
        }

        & .right {
          border-top: 1px solid #ffffff2e;
          padding-top: 3rem;
        }
      }
    }
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  section#rosita_widFour {
    padding: 0 7px;

    & .continer {
      & .top {
        padding: 2rem 2rem 4rem 2rem;
      }

      & .box {
        flex-direction: column;

        & .left {
          padding: 0 !important;
          width: 100%;
        }

        & .right {
          height: auto !important;
          gap: 2rem;
          display: flex;
          width: 100% !important;
          padding: 2rem 0px;
          border-top: 1px solid #ffffff17;
          flex-direction: column;

          & ul.img {
            margin: 0;
            display: flex;
            align-items: center;

            & li {
              margin: 0 !important;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  section#rosita_widFour {
    padding: 0 7px;
    margin-bottom: 1rem;

    & .continer {
      & .top {
        padding: 2rem 2rem 4rem 2rem;
      }

      & .box {
        flex-direction: column;

        & .left {
          padding: 0 !important;
          width: 100%;
        }

        & .right {
          height: auto !important;
          gap: 2rem;
          display: flex;
          width: 100% !important;
          padding: 2rem 0px;
          border-top: 1px solid #ffffff17;
          flex-direction: row;

          & .boxing {
            width: 45rem;
            min-width: 26rem;
          }

          & ul.img {
            columns: 1;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 2rem;

            & li {
              margin: 0 !important;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  section#rosita_widFour {
    padding: 0 7px;
    margin-bottom: 1rem !important;
  }
}