/* ===================== Different pages styles =====================
===============================================================  */
.page-template-products {
  .media-content {
    .media-side {
      .img-card-logo {
        position: relative;

        .icon {
          position: absolute;
          z-index: 3;
          left: 20px;
          bottom: 100px;
          width: 135px;
          aspect-ratio: 1/1;
          object-fit: contain;

          @media (max-width: 900px) {
            left: 0;
          }

          @media (max-width: 600px) {
            bottom: 50px;
          }
        }

        .main_img {
          width: 487px;
          height: auto;
          border-radius: 0px;
          z-index: 2;
          transform: translateX(0px);

          @media (max-width: 900px) {
            width: 400px;
          }
        }

        .the-shield-card {
          position: absolute;
          z-index: 1;
          right: -50px;
          top: -50px;

          @media (max-width: 600px) {
            display: none;
          }
        }
      }
    }
  }
}

.page-template-partners {
  .media-content {
    .container {
      align-items: flex-start;
    }

    .content-side {
      .main-title {
        p {
          padding-top: 20px;
        }
      }
    }
  }
}

/* ===================== Generic media content styles =====================
===============================================================  */
.media-content {
  position: relative;

  &.calculator-layout {
    .container {
      @media(max-width: 1100px) {
        flex-direction: column !important;

        .media-side {
          display: block !important;
          margin-top: 0 !important;
        }
      }
    }
  }

  &.special {
    .container {
      padding-left: 85px !important;
      padding-right: 85px !important;

      @media (max-width: 1100px) {
        column-gap: 50px;
      }

      @media (max-width: 990px) {
        flex-direction: column;
      }

      @media (max-width: 630px) {
        padding-left: 35px !important;
        padding-right: 35px !important;
      }

      @media (max-width: 500px) {
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
    }

    .content-side {
      max-width: 419px;

      @media (max-width: 990px) {
        max-width: unset;
      }
    }

    .right {
      .media-side {
        justify-content: flex-end;
      }
    }

    .media-side {
      @media (max-width: 1100px) {
        justify-content: flex-start;
      }

      @media (max-width: 990px) {
        display: none;
      }
    }

    .img-card-logo {
      .the-card {
        @media (max-width: 1200px) {
          left: -110px !important;
          top: -70px !important;
        }

        @media (max-width: 1100px) {
          display: none;
        }
      }
    }
  }

  &.has-grey-bg {
    .container {
      /* background-color: var(--ccs-color-light-grey-2); */
      border: var(--ccs-border);
      padding-top: 80px;
      padding-bottom: 50px;
      border-radius: 77px;

      @media (max-width: 500px) {
        background-color: transparent;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
    }
  }

  .blue-side-c1 {
    right: 0;
    bottom: auto;
    top: 0px;
    z-index: -1;
  }

  .green-side-c1 {
    z-index: -1;
  }

  .container {
    display: flex;
    justify-content: space-evenly;
    column-gap: 20px;
    align-items: center;

    &.right {
      flex-direction: row;
      padding-left: 85px;

      @media (max-width: 1080px) {
        padding-left: 0;
      }

      @media (max-width: 900px) {
        flex-direction: column;
      }
    }

    &.left {
      flex-direction: row-reverse;
    }
  }

  .content-side {
    max-width: 483px;

    @media (max-width: 900px) {
      max-width: unset;
    }

    .main-title p {
      color: var(--ccs-color-main-blue);
      font-size: 29px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      margin: 0 0;
    }

    .sub-title {
      color: var(--ccs-color-light-grey);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
    }

    .desc {
      margin-top: 26px;
      margin-bottom: 48px;

      p {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
      }

      ul {
        margin: 0;
        padding-left: 30px;

        li {
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 18px;
        }
      }
    }

    .buttons {
      display: flex;
      justify-content: flex-start;
      column-gap: 13px;
      align-items: center;
    }
  }

  .media-side {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;

    @media (max-width: 900px) {
      width: 100%;
      margin-top: 70px;
    }

    .single-img {
      position: relative;

      @media (max-width: 900px) {
        width: 100%;
      }

      &.auto-height {
        .main_img {
          height: auto;

          @media (max-width: 900px) {
            height: 303px;
          }
        }
      }

      .main_img {
        border-radius: 30px;
        width: 475px;
        height: 303px;
        object-fit: cover;

        @media (max-width: 900px) {
          width: 100%;
        }
      }
    }

    .single-img-txt-box {
      position: relative;

      .main_img {
        width: 414px;
        height: 286px;
        border-radius: 30px;
        object-fit: cover;
      }

      .text_box {
        color: #fff;
        background-color: var(--ccs-color-main-blue);
        position: absolute;
        right: -22px;
        bottom: -20px;
        padding: 22px 25px;
        border-radius: 16px;

        p {
          margin: 0;
        }
      }
    }

    .card-three-img {
      @media (max-width: 1200px) {
        width: 319px;
        position: relative;
      }

      .circle.blue-home {
        top: -40px;
        z-index: -1;
        left: 50px;
        animation: bounceScale 8s ease-in-out infinite;

        @media (max-width: 1200px) {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(1.5);
        }
      }

      .icon {
        position: absolute;
        padding: 15px 20px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
      }

      .image-1,
      .image-2 {
        width: 133px;
        height: 134px;
        object-fit: contain;

        @media (max-width: 400px) {
          width: 103px;
          height: 103px;
        }
      }

      .image-1 {
        left: 115px;
        top: 35%;
        bottom: 0;

        @media (max-width: 1200px) {
          left: 0;
        }
      }

      .image-2 {
        right: 115px;
        top: 35%;
        bottom: 0;

        @media (max-width: 1200px) {
          right: 0;
        }
      }

      .image-3 {
        bottom: -40px;
        object-fit: contain;
        width: 230px;
        height: 108px;
        left: 50%;
        transform: translateX(-50%);

        @media (max-width: 400px) {
          width: 180px;
        }
      }
    }

    .img-card-logo {
      position: relative;

      .icon {
        position: absolute;
        z-index: 3;
        right: -40px;
        bottom: -23px;
        width: 135px;
        aspect-ratio: 1/1;
        object-fit: contain;
      }

      .main_img {
        position: relative;
        width: 323px;
        object-fit: cover;
        height: 391px;
        border-radius: 30px;
        z-index: 2;
        transform: translateX(10px);
      }

      .the-card {
        position: absolute;
        z-index: 1;
        left: -150px;
        top: -50px;
      }
    }

    #just-txt-boxes {
      .single-box {
        padding-top: 38px;
        padding-bottom: 38px;
      }

      .box-1 {
        width: 412px;
      }

      .box-2 {
        transform: translate(40px, -20px);
        width: 409px;
      }

      .box-3 {
        transform: translate(80px, -40px);
        width: 400px;
      }
    }

    .txt-box-area {
      position: relative;

      .single-box {
        border-radius: 20px;
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
        padding-left: 32px;
        padding-right: 32px;
        position: relative;
      }

      .txt-box-top {
        padding-top: 34px;
        padding-bottom: 37px;
        max-width: 376px;
      }

      .txt-box-bottom {
        padding-top: 40px;
        padding-bottom: 32px;
        max-width: 363px;
        transform: translate(100px, -20px);
      }

      .eyebrow {
        color: var(--ccs-color-light-grey) !important;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 13px;
        margin-top: 0;
        margin-bottom: 10px;
      }

      .box p {
        font-size: 16px;
        font-weight: 700 !important;
        line-height: 1;
        margin-bottom: 0;
      }

      .txt_icon {
        width: 88px;
        height: 88px;
        object-fit: contain;
        position: absolute;
        right: -24px;
        top: -50px;
      }

      .white {
        background: #FFF;
      }

      .blue {
        background: linear-gradient(330deg, #0E122F -19.38%, #415AA8 98.95%);

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
          color: #fff;
        }
      }
    }

    .calculator {
      padding: 40px 30px;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
      border: 2px solid var(--ccs-color-main-blue);
      max-width: 500px;
      width: 100%;

      .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;

        @media (max-width: 500px) {
          grid-template-columns: 1fr;
        }
      }

      .field {
        position: relative;

        label {
          display: block;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: var(--ccs-color-main-blue);
          margin-bottom: 6px;
          min-height: 37px;

          @media (max-width: 500px) {
            min-height: auto;
          }
        }

        input {
          width: 100%;
          padding: 12px 15px;
          border-radius: 10px;
          border: 1px solid #E5E5E5;
          background: #FFF;
          font-size: 16px;
          font-weight: 400;
          line-height: 18px;
          color: #000;

          &:focus {
            outline: none;
            border-color: var(--ccs-color-main-blue);
          }
        }
      }

      .totals {
        position: relative;
        margin-top: 20px;

        .total-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
          margin-bottom: 14px;

          @media (max-width: 500px) {
            grid-template-columns: 1fr;
          }

          .total-card {
            border-radius: 12px;
            padding: 10px 10px;
            text-align: center;

            @media (max-width: 500px) {
              padding: 10px 20px;
              text-align: left;
            }

            &.build-total {
              border: 2px solid var(--ccs-color-dark-grey);
            }

            &.traas-total {
              border: 2px solid var(--ccs-color-lime);
            }

            p {
              margin: 5px 0;
              font-size: 15px;
              line-height: 1;
            }

            .total-value {
              font-weight: 700;
            }
          }
        }

        .savings {
          border: 1px solid var(--ccs-color-lime);
          background-color: var(--ccs-color-lime);
          color: var(--ccs-color-dark-grey);
          border-radius: 12px;
          padding: 10px 10px;
          text-align: center;

          @media (max-width: 500px) {
            padding: 10px 20px;
            text-align: left;
          }

          p {
            margin: 5px 0;
            font-size: 18px;
            line-height: 1;
          }

          .savings-amount {
            font-weight: 700;
          }
        }
      }

    }
  }
}