/* Nesting CSS 
  |--------------------------- Nomenclature ------------------------------------------|
  | Class                 | Type                    | Description                     |
  |-----------------------|-------------------------|---------------------------------|
  | psh# | psv2h# | Header Componentes      | Paid Search Header #                    |
  | psb# | psv2b# | Body Componentes        | Paid Search Body #                      |
  | psc# | psv2c# | Card Componentes        | Paid Search Card #                      |
  | psq# | psv2q# | Quote Componentes       | Paid Search Quote #                     |
  | pss# | psv2s# | Sponsor Componentes     | Paid Search Sponsor #                   |
  |                                                                                   |
  |-----------------------------------------------------------------------------------|                                                                                   | 
  |    ## Pillar Schemes                                                              |
  |-----------------------------------------------------------------------------------|  
  | Class              | Theme (Color)          |                                     |  
  |--------------------|------------------------|                                     |     
  |                    | Default (OCI Neutral)  |                                     |  
  |theme-neutral-SCM   | SCM (Neutral)          |                                     | 
  |--------------------|------------------------|-------------------------------------| 
*/   
/*-----------------------------------
          DEFAULT VARIABLES         
-----------------------------------*/
:root .psv2 {
  /* Global Variables */
  --Oracle-Font: "Oracle Sans", sans-serif;
  --OracleBold-Font: "Oracle Sans Bold", sans-serif;

  /* FORM */
  --form-links: #0773ac;

  /* Strip */
  --bg-strip: url('https://www.oracle.com/webfolder/dms/prod/images2/green-color-strip.png');

  /* Footer */
  --bg-footer: #312D2A;
  --footer-text: #fff;

  /* CTA buttons */
  --ps2-btn-fontSize: 18px;
  --ps2-btn-lineheight: 22px;
  --ps2-btn-bg: #F0A957;
  --ps2-btn-text: #161513;
  --ps2-btn-bg-hover: #F6C792;
  --ps2-btn-text-hover: #000;
  --ps2-btn-bg-active: #E18212;
  --ps2-btn-text-active: #000;
  --ps2-btn-bg-disabled: #312d2a29;
  --ps2-btn-text-disabled: #16151366;

  /* Default Theme Components variables */
  .ps2h1 {
    --ps2h1-bg: linear-gradient(180deg, #e4e1ddcc 0%, #e4e1dd00 100%),#FBF9F8;
    --ps2h1-logo: #C74634;
    --ps2h1-title: #201E1C;
    --ps2h1-desc: #201E1C;
    --ps2h1-bg-form-section: #ffffff;
    --ps2h1-form-h2: #33553C;
    --ps2h1-form-p: #201E1C;

    --ps2h1-btn-fontSize: var(--ps2-btn-fontSize);
    --ps2h1-btn-lineheight: var(--ps2-btn-lineheight);
    --ps2h1-form-bg-btn: var(--ps2-btn-bg);
    --ps2h1-form-btn-text: var(--ps2-btn-text);
    --ps2h1-form-bg-btn-hover: var(--ps2-btn-bg-hover);
    --ps2h1-form-btn-text-hover: var(--ps2-btn-text-hover);
    --ps2h1-form-bg-btn-active: var(--ps2-btn-bg-active);
    --ps2h1-form-btn-text-active: var(--ps2-btn-text-active);
    --ps2h1-form-bg-btn-disabled: var(--ps2-btn-bg-disabled);
    --ps2h1-form-btn-text-disabled: var(--ps2-btn-text-disabled);
  }

  .ps2c1 {
    --ps2c1-bg: #FBF9F8;
    --ps2c1-title: #201E1C;
    --ps2c1-desc: #201E1C;
    --ps2c1-bg-card: #fff;
    --ps2c1-bs-card: calc(0px 8px 16px rgba(0, 0, 0, 0.239));
    --ps2c1-icon-color: #4C825C;
    --ps2c1-title-card: #312D2A;
    --ps2c1-desc-card: #312D2A;
    --ps2c1-bg-strip: url(https://www.oracle.com/webfolder/dms/prod/images2/green-card-strip.png);
  }
  .ps2c5 {
    --ps2c1-bg: #FBF9F8;
    --ps2c1-title: #201E1C;
    --ps2c1-desc: #201E1C;
    --ps2c1-bg-card: #fff;
    --ps2c1-bs-card: calc(0px 8px 16px rgba(0, 0, 0, 0.239));
    --ps2c1-icon-color: #4C825C;
    --ps2c1-title-card: #312D2A;
    --ps2c1-desc-card: #312D2A;
    --ps2c1-bg-strip: url(https://www.oracle.com/webfolder/dms/prod/images2/green-card-strip.png);
  }
  .ps2b1 { 
    --ps2b1-bg: #FBF9F8;
    --ps2b1-title: #312D2A;
    --ps2b1-desc: #312D2A;
    /* --ps2b1-form-bg-btn: #E8840F;
    --ps2b1-form-bg-btn-hover: #E8840F;
    --ps2b1-form-btn-text: #ffffff; */
  }

  .ps2s1 {
    --ps2s1-bg: #F1EFED;
    --ps2s1-title: #312D2A;

    --ps2s1-btn-fontSize: var(--ps2-btn-fontSize);
    --ps2s1-btn-lineheight: var(--ps2-btn-lineheight);
    --ps2s1-form-bg-btn: var(--ps2-btn-bg);
    --ps2s1-form-btn-text: var(--ps2-btn-text);
    --ps2s1-form-bg-btn-hover: var(--ps2-btn-bg-hover);
    --ps2s1-form-btn-text-hover: var(--ps2-btn-text-hover);
    --ps2s1-form-bg-btn-active: var(--ps2-btn-bg-active);
    --ps2s1-form-btn-text-active: var(--ps2-btn-text-active);
    --ps2s1-form-bg-btn-disabled: var(--ps2-btn-bg-disabled);
    --ps2s1-form-btn-text-disabled: var(--ps2-btn-text-disabled);
  }
  
}


/*-----------------------------------
      THEME COMPONENTS VARIABLES     
-----------------------------------*/
.psv2 {
  &.theme-neutral-SCM {

    .ps2h1 {
      --ps2h1-form-h2: #315357;
    }
  
    .ps2c1 {
      --ps2c1-bg-strip: url(https://www.oracle.com/webfolder/dms/prod/images2/green-card-strip.png);
    }
  
    /* Strip */
    --bg-strip: url('https://www.oracle.com/webfolder/dms/prod/images2/green-color-strip.png');

  }
}

/*-----------------------------------
              STYLES              
-----------------------------------*/
.psv2 {
  /* -----------COMPONENTS----------- */
  .ps2h1 {
    background: var(--ps2h1-bg);
    padding: 40px 0 20px 0;

    @media (width >= 768px ){
      padding-top: 60px;
    }
  
    & > .main-container {
      @media only screen and (min-width: 992px) {
        width: 1080px;
      }
  
      & > div {
        letter-spacing: normal;
        padding-inline-end: 10px;
        
        @media (width >= 768px ){
          display: grid;
          grid-template-columns: 1fr 38%;
          gap: 5.5%;
          margin-inline: 36px;
          max-width: fit-content;
        }

        @media (width >= 1152px ){
          grid-template-columns: 612px 1fr;
          gap: 60px;
          margin-inline: 0;
        }

        & .header-left {
          width: 100%;
          margin-inline: 15px;

          @media (width >= 476px) {
            margin-inline: 30px;
          }

          @media (width >= 768px) {
            margin-inline: 0;
          }

          & div {
            .header-logo {
              color: var(--ps2h1-logo);
              line-height: 0;

              img, svg {
                max-width: 138px;
                height: auto;
              }
            }
            .header-title {
              color: var(--ps2h1-title);
              font-family: var(--Oracle-Font);
              font-style: normal;
              font-weight: 600;
              font-size: 37px;
              line-height: 40px;
              margin: 0;
              margin-top: 30px;
              text-wrap: balance;

              @media (width >= 768px) {
                font-size: 48px;
                line-height: 52px;
              }
            }
            .header-desc {
              color: var(--ps2h1-desc);
              font-family: var(--Oracle-Font);
              font-style: normal;
              font-weight: 400;
              font-size: 16px;
              line-height: 23px;
              margin: 0;
              margin-top: 5px;
              text-wrap: balance;
            }
          }
  
          & .header-primary-img {
            width: 100%;
            max-width: 612px;
            margin-inline: auto;
            margin: 40px auto 0 auto;
            
            img {
              width: 100%;
            }
          }
  
          & .header-primary-yt {
            display: block;
            width: auto;
            max-width: 575px;
            text-align: center;
            margin: 0px;
            @media only screen and (max-width: 1024px) {
              margin-bottom: 25px;
            }
          }
        }
  
        & .header-right {
          width: 100%;
          margin-top: 40px;

          @media (width >= 768px) {
              margin-top: 0;
            }
          
          & .form-section {
            display: block;
            width: fit-content;
            max-width: 100%;
            margin: 0 15px;
            padding: 25px;
            padding-bottom: 40px;
            border-radius: 14px;
            background-color: var(--ps2h1-bg-form-section);
            box-shadow: 0px 6px 12px 0px #00000033;

            @media (436px <= width) {
              width: 406px;
              margin: 0 auto;
            }

            @media only screen and (min-width: 767px) {
              width: auto;
              padding: 40px;
            }
  
            .form-heading {
              h2 {
                color: var(--ps2h1-form-h2);
                font-family: 'Georgia';
                font-weight: 700;
                font-size: 20px;
                line-height: 22.72px;
                margin-block-end: 5px;
              }
              p {
                color: var(--ps2h1-form-p);
                font-family: var(--Oracle-Font);
                font-weight: 400;
                font-size: 14px;
                line-height: 18.27px;
                margin-block-end: 8px;
              }
            }
  
            form {
              input[type=submit] {
                color: var(--ps2h1-form-btn-text) !important;
                background: var(--ps2h1-form-bg-btn) !important;
                font-family: var(--Oracle-Font);
                font-style: normal;
                font-weight: 700;
                font-size: var(--ps2h1-btn-fontSize);
                line-height: var(--ps2h1-btn-lineheight);
                border-radius: 6px;
                height: auto;
                float: none;
                max-width: 326px;
                width: 100%;
                align-items: center;
                text-align: center;
                padding-top: 18px;
                padding-bottom: 18px;
                margin-top: 0;

                &:hover {
                  background-color: var(--ps2h1-form-bg-btn-hover) !important;
                  color: var(--ps2h1-form-btn-text-hover) !important;
                }

                &:active {
                  background-color: var(--ps2h1-form-bg-btn-active) !important;
                  color: var(--ps2h1-form-btn-text-active) !important;
                }

                &:disabled {
                  background-color: var(--ps2h1-form-bg-btn-disabled) !important;
                  color: var(--ps2h1-form-btn-text-disabled) !important;
                }
              }
            }
          }
        }
      }
    }
  }
  
  .ps2h2 {
    position: relative;
    background: #FBF9F8;
    padding: 47px 0 20px 0;

    @media (width >= 768px ){
      background: #f1efed;
      padding-top: 23.5px;
      padding-bottom: 53px;

      &::before, &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        top: 0;
      }

      &::before {
        background: url('https://www.oracle.com/webfolder/dms/prod/i1/ps2h2-bg-cloud1.png');
        background-repeat: no-repeat;
        background-position: top right;
        top: -40px;
      }

      &::after {
        background: url('https://www.oracle.com/webfolder/dms/prod/i1/ps2h2-bg-cloud2.png');
        background-repeat: no-repeat;
        background-position: bottom left;
      }
    }

    .main-container {
      position: relative;
      z-index: 1;
      max-width: 445px;
      padding-inline: 10px;

      @media (width >= 600px ){
        max-width: fit-content;
        margin-inline: 32px;
        padding-inline: 0;
      }

      @media only screen and (min-width: 992px) {
        width: 1123px; 
      }

      @media (width >= 1080px ){
        margin-inline: auto;
      }

      > div {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 15px;

        @media (min-width: 640px) {
          gap: 30px;
        }

        @media (min-width: 768px) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 15px;
        }

        .header-left {
          width: 100%;
          padding-inline-start: 5px;

          @media (min-width: 1024px) {
            padding-inline-start: 15px;
          }

          .header-body {
            margin-bottom: 35px;

            @media (width >= 768px ){
              margin-bottom: 0;
            }

            .header-logo {
              color: #C74634;

              img {
                height: 19px;
              }
            }

            .header-title {
              margin-bottom: 3%;
              margin-top: 38px;
              font-family: "Meiryo UI", var(--Oracle-Font);
              font-size: 35px;
              line-height: 56px;
              font-weight: 700;
              text-align: start;
              color: #161513;

              @media (min-width: 1024px) {
                font-size: 48px;
                line-height: 52px;
                margin-bottom: 25px;
              }
            }

            .header-metrics {
              display: flex;
              gap: 24px;
              margin-bottom: 7px;

              @media (min-width: 1024px) {
                margin-bottom: 16px;
              }

              img {
                aspect-ratio: 138 / 104;
                width: 138px;
              }
            }

            sub {
              display: block;
              font-family: "Meiryo UI", var(--Oracle-Font);
              font-size: 12px;
              font-weight: 400;
              font-style: italic;
              margin-bottom: 6px;
              color: #312D2A;
            }

            .header-subtitle {
              font-size: 16px;
              font-family: var(--Oracle-Font);
              font-weight: 400;
              color: #312D2A;
              text-wrap: pretty;
              margin: 0;
            }
          }

          .header-img-mob {
            width: 100%;
            text-align: center;

            img {
              max-width: 100%;
            }

            @media (width >= 768px ){
              display: none;
            }
          }

          .header-btn {
            padding-top: 48px;
            text-align: center;

            @media (min-width: 768px) {
              padding-top: 33px;
            }

            a {
              margin: auto;
              font-family: "Meiryo UI", var(--Oracle-Font); 
              font-size: 18px;
              font-weight: 700;
              background-color: #F0A957;
              padding: 15px;
              border: 0;
              border-radius: 7px;
              cursor: pointer;
              text-decoration: none;
              display: block;
              max-width: 100%;
              width: 330px;
              text-align: center;
              color: #161513 !important;

              &:hover {
                background-color: #F6C792;
              }

              @media (min-width: 768px) {
                margin-inline-start: 0;
              }
            }
          }
        }

        .header-right {
          display: flex;
          align-items: center;
          width: 100%;
          display: none;

          @media (width >= 768px ) {
            display: flex;
          }

          img {
            max-width: 100%;
            margin: 0 auto;
          }
        }
      }
    }
  }

  .ps2c1 {
    background: var(--ps2c1-bg);
    padding-block: 20px;
  
    @media (width >= 768px) {
      padding-block: 40px;
    }

    & .main-container{
      padding-inline: 15px;

      @media (width >= 476px) {
        padding-inline: 30px;
      }

      @media (width >= 768px) {
        padding-inline: 36px;
      }

      @media (width >= 992px) {
        width: 1080px;
      }

      @media (width >= 1152px) {
        padding-inline: 0;
      }
  
      & .head-sec{
        text-align: center;
  
        & h2{
          font-family: var(--Oracle-Font);
          font-size: 30px;
          line-height: 39px;
          color: var(--ps2c1-title);
          font-weight: 700;
          font-style: normal;
          margin: 0 0 13px 0;
          text-align: start;
          text-wrap: balance;
          @media (width >= 768px) {
            text-align: center;
          }
        }
        & p{
          font-family: var(--Oracle-Font);
          font-size: 18px;
          line-height: 23px;
          color: var(--ps2c1-title);
          font-weight: 400;
          font-style: normal;
          margin: 0 0 40px 0;
          text-align: start;
          text-wrap: balance;
          @media (width >= 768px) {
            text-align: center;
          }
        }
      }
      
      & .feat-list-sec{
        max-width: 100%;
        display: block;
        margin: 0 auto;
        position: relative;
  
        & .feat-list{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          letter-spacing: normal;
          flex-wrap: wrap;
          gap: 26px;
  
          & .feat-item{
            display: block;
            width: 340px;
            max-width: 100%;
            padding: 33px 25px 39px;
            border-radius: 14px;
            box-shadow: var(--ps2c1-bs-card);
            text-align: left;
            background: var(--ps2c1-bg-card);
            position: relative;
            overflow: hidden;
            box-shadow: -4px 6px 12px 0px #00000033;

            @media only screen and (min-width: 992px) {
              width: 248px;
            }
  
            & .feat-img {
              display: flex;
              justify-content: center;
              color: var(--ps2c1-icon-color);
  
              img, svg{
                margin: 0;
                width: 60px;
                aspect-ratio: 1 / 1;
              }
            }
            
            & h3{
              font-weight: 600;
              line-height: 23px;
              font-size: 18px;
              margin: 26px 0 0 0;
              font-style: normal;
              font-family: var(--Oracle-Font);
              color: var(--ps2c1-title-card);
              text-align: center;
              text-wrap: balance;
            }
            
            & p{
              font-family: var(--Oracle-Font);
              font-weight: 400;
              line-height: 22px;
              font-size: 14px;
              font-style: normal;
              color: var(--ps2c1-desc-card);
              margin: 22px 0 0 0;
              text-align: center;
              text-wrap: balance;
            }
            > img.card-strip, > div.card-strip {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 8px;
              background-image: var(--ps2c1-bg-strip);
              background-size: cover;
            }
          }
        }
      }
    }
  }

  .ps2c2 {
    background: #253D2C;
    padding: 36px 0 64px 0;

    @media (width >= 768px ){
      padding-top: 36px;
      padding-bottom: 61px;
    }

    .main-container {
      width: auto;
      margin-inline: 5px;

      @media (width >= 445px ){
        margin-inline: 32px;
        margin-inline-start: 37px;
      }

      @media (min-width: 1080px) {
        margin-inline: auto;
      }

      h2 {
        font-family: "Meiryo UI", var(--Oracle-Font);
        font-weight: 700;
        font-size: 30px;
        text-align: center;
        color: #fff;
        padding-bottom: 49px;
        margin: 0;

        @media (width >= 768px ){
          padding-bottom: 62px;
        }
      }

      .cards-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;

        .card {
          border-radius: 12px 12px 0 0;
          position: relative;
          width: 271px;
          background: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 30px;

          @media (width >= 768px ){
            padding-bottom: 60px;
          }

          &:after {
            position: absolute;
            content: '';
            background: #86B596;
            width: 100%;
            height: 6px;
            bottom: 0;
          }

          h3 {
            font-family: "Meiryo UI", var(--Oracle-Font);
            font-size: 18px;
            font-weight: 700;
            margin-block: 13px;
          }

          p {
            font-family: "Meiryo UI", var(--Oracle-Font);
            font-size: 16px;
            font-weight: 400;
            margin: 0;
          }

          .feat-img {
            width: 73px;
          }
        }
      }
    }
  }
  
  .ps2c3 {
    position: relative;
    background: #FBF9F8;
    padding: 22px 0 40px 0;

    @media (width >= 768px ){
      padding-top: 41px;
      padding-bottom: 50px;

      &::before {
        position: absolute;
        content: '';
        background-image: url('https://www.oracle.com/webfolder/dms/prod/i1/ps2c3-bg.png');
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        top: 0px;
        opacity: 3%;
      }
    }

    

    .main-container {
      width: auto;
      margin-inline: 5px;
      position: relative;
      z-index: 1;

      @media (width >= 445px ){
        margin-inline: 32px;
        margin-inline-start: 37px;
      }

      @media (min-width: 1080px) {
        margin-inline: auto;
      }

      h2 {
        font-family: "Meiryo UI", var(--Oracle-Font);
        font-weight: 700;
        font-size: 30px;
        text-align: center;
        color: #161513;
        margin: 0;
        text-wrap: pretty;
      }

      p {
        font-family: "Meiryo UI", var(--Oracle-Font);
        font-weight: 400;
        font-size: 18px;
        text-align: center;
        color: #161513;
        padding-bottom: 5px;
        margin: 0;
        text-wrap: pretty;

        @media (width >= 768px ){
          font-size: 30px;
          padding-bottom: 25px;
        }
      }

      .cards-container {
        display: flex;
        justify-content: center;

        & > div {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          width: min-content;
          
          @media (width >= 768px ){
            column-gap: 20px;
            justify-content: center;
            width: auto;
          }
          .card {
            /* max-width: 302px; */
            display: flex;
            flex-direction: row;
            padding: 16.5px 18px;
            color: #312D2A;
            overflow: hidden;

            @media (width >= 768px ){
              padding: 40px 18px;
            }

            .icon {
              padding-inline-end: 20px;
              border-right: 3px solid #D9D9D9;
            }

            .card_info {
              padding-inline-start: 20px;

              h3 {
                font-family: "Meiryo UI", var(--Oracle-Font);
                font-size: 65px;
                line-height: 65px;
                font-weight: 700;
                margin-bottom: 10px;
                color: #000;
              }

              h4 {
                font-family: "Meiryo UI", var(--Oracle-Font);
                font-size: 20px;
                font-weight: 700;
                line-height: 25px;
                color: #312D2A;
                margin: 0;
              }

              p {
                font-family: "Meiryo UI", var(--Oracle-Font);
                font-size: 20px;
                font-weight: 400;
                line-height: 25px;
                color: #312D2A;
                padding: 0;
                text-align: center;

                @media (width >= 430px ){
                  width: max-content;
                }
              }
            }                
          }
        }
      }
    }
  }
  
  .ps2c4 {
    background: #FBF9F8;
    padding: 22px 0 40px 0;

    @media (width >= 768px ){
      padding-top: 41px;
      padding-bottom: 57px;
    }

    .main-container {
      width: auto;
      margin-inline: 5px;

      @media (width >= 445px ){
        margin-inline: 32px;
        margin-inline-start: 37px;
      }

      @media (min-width: 1080px) {
        margin-inline: auto;
      }

      h2 {
        font-family: "Meiryo UI", var(--Oracle-Font);
        font-weight: 700;
        font-size: 30px;
        text-align: center;
        color: #161513;
        padding-bottom: 35px;
        margin: 0;

        @media (width >= 768px ){
          padding-bottom: 40px;
        }
      }

      .cards-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;

        .card {
          border-radius: 18px;
          position: relative;
          width: 302px;
          background: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 33px 25px;
          color: #312D2A;
          overflow: hidden;

          @media (width >= 768px ){
            width: 240px;
            padding-top: 52px;
            padding-bottom: 60px;
          }

          &:after {
            position: absolute;
            content: '';
            background: url('https://www.oracle.com/webfolder/dms/prod/images2/green-card-strip.png');
            width: 100%;
            height: 7px;
            bottom: 0;
          }

          h3 {
            font-family: "Meiryo UI", var(--Oracle-Font);
            font-size: 18px;
            font-weight: 700;
            margin-block: 13px;
          }

          p {
            font-family: "Meiryo UI", var(--Oracle-Font);
            font-size: 15px;
            font-weight: 400;
            margin: 0;
          }
        }
      }

      .btn {
        padding-top: 45px;
        text-align: center;
        float: none;

        @media (width >= 768px ){
          padding-top: 63px;
        }

        a {
          margin: auto;
          font-family: "Meiryo UI", var(--Oracle-Font); 
          font-size: 18px;
          font-weight: 700;
          background-color: #F0A957;
          padding: 15px;
          border: 0;
          border-radius: 7px;
          cursor: pointer;
          text-decoration: none;
          display: block;
          max-width: 100%;
          width: 330px;
          text-align: center;
          color: #161513 !important;

          &:hover {
            background-color: #F6C792;
          }

        }
      }
    }
  }
  .ps2c5 {
    --ps2c5-card-btn-fontSize: 14px;
    --ps2c5-card-btn-lineheight: var(--ps2-btn-lineheight);
    --ps2c5-card-bg-btn: var(--ps2-btn-bg);
    --ps2c5-card-btn-text: var(--ps2-btn-text);
    --ps2c5-card-bg-btn-hover: var(--ps2-btn-bg-hover);
    --ps2c5-card-btn-text-hover: var(--ps2-btn-text-hover);
    --ps2c5-card-bg-btn-active: var(--ps2-btn-bg-active);
    --ps2c5-card-btn-text-active: var(--ps2-btn-text-active);
    --ps2c5-card-bg-btn-disabled: var(--ps2-btn-bg-disabled);
    --ps2c5-card-btn-text-disabled: var(--ps2-btn-text-disabled);

    background: var(--ps2c1-bg);
    padding-block: 20px;
  
    @media (width >= 768px) {
      padding-block: 40px;
    }

    & .main-container{
      padding-inline: 15px;

      @media (width >= 476px) {
        padding-inline: 30px;
      }

      @media (width >= 768px) {
        padding-inline: 36px;
      }

      @media (width >= 992px) {
        width: 1080px;
      }

      @media (width >= 1152px) {
        padding-inline: 0;
      }
  
      & .head-sec{
        text-align: center;
  
        & h2{
          font-family: var(--Oracle-Font);
          font-size: 30px;
          line-height: 39px;
          color: var(--ps2c1-title);
          font-weight: 700;
          font-style: normal;
          margin: 0 0 13px 0;
          text-align: start;
          text-wrap: balance;
          @media (width >= 768px) {
            text-align: center;
          }
        }
        & p{
          font-family: var(--Oracle-Font);
          font-size: 18px;
          line-height: 23px;
          color: var(--ps2c1-title);
          font-weight: 400;
          font-style: normal;
          margin: 0 0 40px 0;
          text-align: start;
          text-wrap: balance;
          @media (width >= 768px) {
            text-align: center;
          }
        }
        
      }
      
      & .feat-list-sec{
        max-width: 100%;
        display: block;
        margin: 0 auto;
        position: relative;
  
        & .feat-list{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          letter-spacing: normal;
          align-items: stretch;
          flex-wrap: wrap;
          gap: 26px;
  
          & .feat-item{
            display: flex;
            flex-direction: column;
            width: 340px;
            max-width: 100%;
            padding: 33px 25px 39px;
            border-radius: 14px;
            box-shadow: var(--ps2c1-bs-card);
            text-align: left;
            background: var(--ps2c1-bg-card);
            position: relative;
            overflow: hidden;
            box-shadow: -4px 6px 12px 0px #00000033;
            min-height: 250px;

            @media only screen and (min-width: 992px) {
              width: 248px;
            }
            & .feat-content-wrapper{
              flex-grow: 1;
              margin-bottom: 15px;
            }
            & .feat-img {
              display: flex;
              justify-content: center;
              color: var(--ps2c1-icon-color);
  
              img, svg{
                margin: 0;
                width: 60px;
                aspect-ratio: 1 / 1;
              }
            }
            
            & h3{
              font-weight: 600;
              line-height: 23px;
              font-size: 18px;
              margin: 26px 0 0 0;
              font-style: normal;
              font-family: var(--Oracle-Font);
              color: var(--ps2c1-title-card);
              text-align: center;
              text-wrap: balance;
            }
            
            & p{
              font-family: var(--Oracle-Font);
              font-weight: 400;
              line-height: 22px;
              font-size: 14px;
              font-style: normal;
              color: var(--ps2c1-desc-card);
              margin: 22px 0 0 0;
              text-align: center;
              text-wrap: balance;
            }
            & a{
              color: var(--ps2c5-card-btn-text)!important;;
              margin: 16px 0px 0px;
              width: auto;
              padding-block:8px;
              padding-inline:8px;
              text-align: center;
              background-color: var(--ps2c5-card-bg-btn);
              width:100%;
              font-family: var(--Oracle-Font);
              font-style: normal;
              font-weight: 700;
              font-size: var(--ps2c5-card-btn-fontSize);
              line-height: var(--ps2c5-card-btn-lineheight);
              border-radius: 6px;
              height: auto;
              align-items: center;
              text-align: center;
              cursor: pointer;
              max-width: 100%;
              text-decoration: none;
              display: block;
            
              &:hover {
                background-color: var(--ps2c5-card-bg-btn-hover) !important;
                color: var(--ps2c5-card-btn-text-hover) !important;
              }
              &:active {
                background-color: var(--ps2c5-card-bg-btn-active) !important;
                color: var(--ps2c5-card-btn-text-active) !important;
              }

              &[aria-disabled="true"] {
                background-color: var(--ps2c5-card-bg-btn-disabled) !important;
                color: var(--ps2c5-card-btn-text-disabled) !important;
              }
              > img.card-strip, > div.card-strip {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 8px;
                background-image: var(--ps2c1-bg-strip);
                background-size: cover;
              }
            }
          }
        }
      }
    }
  }
  
  .ps2b1 {
    background: var(--ps2b1-bg);
    padding: 20px 0;

    @media (width >= 992px) {
      padding-block: 40px;
    }
  
    .main-container {
      padding-inline: 15px;

      @media (width >= 476px) {
        padding-inline: 30px;
      }

      @media (width >= 768px) {
        padding-inline: 36px;
      }

      @media (width >= 992px) {
        width: 1080px;
      }

      @media (width >= 1152px) {
        padding-inline: 0;
      }
  
      > div:first-child {
        letter-spacing: normal;
        gap: 40px;

        @media (width >= 768px) {
          display: grid;
          grid-template-columns: 1fr 49.44%;
          gap: 60px;
        }
          
        .left-block {
          width: 100%;
          margin: 0;
          text-align: center;
  
          @media only screen and (min-width: 768px) {
            text-align: start;
          }
  
          h2 {
            font-family: var(--Oracle-Font);
            font-style: normal;
            font-weight: 700;
            font-size: 23px;
            line-height: 30px;
            color: var(--ps2b1-title);
            margin-top: 0;
            margin-bottom: 14px;
            text-align: start;
            text-wrap: balance;
          }
  
          p {
            font-family: var(--Oracle-Font);
            font-style: normal;
            font-weight: 400;
            font-size: 20px;
            line-height: 31px;
            color: var(--ps2b1-desc);
            margin-bottom: 0;
            text-align: start;
            text-wrap: balance;
          }
        }
  
        .right-block {
          width: 100%;
          padding-left: 0;
          margin: 0;
          display: flex;
          align-items: center;
  
          @media (width >= 768px) {
            max-width: 534px;

          }
  
          img.img-resp {
            margin: 0 auto;
            width: inherit;
            max-width: 534px ;
            aspect-ratio: 89/53;
          }
        }
      }
  
      /* .bottom-btn {
        padding-top: 10px;
        text-align: center;
  
        @media only screen and (min-width: 992px) {
          padding-top: 30px;
        }
  
        .cta {
          color: var(--ps2b1-form-btn-text) !important;
          font-size: 22px;
          white-space: unset;
          font-family: var(--Oracle-Font);
          font-weight: 700;
          line-height: 1em;
          background: var(--ps2b1-form-bg-btn);
          margin: 0 auto;
          padding: 20px 15px;
          border: 0;
          border-radius: 7px;
          cursor: pointer;
          text-decoration: none;
          display: block;
          max-width: 100%;
          width: 330px;
          text-align: center;
          
          &:hover {
            background: var(--ps2b1-form-bg-btn-hover) !important;
          }
        }
      } */
    }
  }
  
  .ps2b2 {
    background: #F1EFED;
    padding: 30.5px 0 66px 0;

    @media (width >= 768px ){
      padding-top: 11px;
      padding-bottom: 69px;
    }

    .main-container {
      margin-inline: 10px;

      @media (width >= 445px ){
        max-width: fit-content;
        margin-inline: 32px;
        margin-inline-start: 37px;
      }

      @media (width >= 768px) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 61px;
      }

      @media only screen and (min-width: 992px) {
        width: 1123px; 
      }


      @media (min-width: 1080px) {
        margin-inline: auto;
      }

      .cont-left {
        display: flex;
        flex-direction: column;
        justify-content: center;

        @media (width >= 768px) {
          padding-block-start: 40px;
        }

        @media (min-width: 1024px) {
          padding-inline-start: 15px;
        }

        .body-title{
          font-family: "Meiryo UI", var(--Oracle-Font);
          font-weight: 700;
          font-size: 30px;
          text-align: center;
          color: #161513;
          margin-bottom: 20px;

          @media (width >= 768px) {
            text-align: start;
            margin-bottom: 38px;
          }
        }

        .body-desc{
          font-family: "Meiryo UI", var(--Oracle-Font);
          font-weight: 400;
          font-size: 18px;
          text-align: center;
          color: #312D2A;
          margin-bottom: 13.5px;
          text-wrap: balance;

          @media (width >= 768px) {
            text-align: start;
            margin-bottom: 61px;
          }
        }

        img {
          margin-bottom: 51px;
          margin-inline: auto;
          
          @media (width >= 550px) {
            max-width: 509px;
          }

          @media (width >= 768px) {
            display: none;
          }
        }

        .body-btn{
          a {
            margin: auto;
            font-family: "Meiryo UI", var(--Oracle-Font); 
            font-size: 18px;
            font-weight: 700;
            background-color: #F0A957;
            padding: 15px;
            border: 0;
            border-radius: 7px;
            cursor: pointer;
            text-decoration: none;
            display: block;
            max-width: 100%;
            width: 330px;
            text-align: center;
            color: #161513 !important;

            &:hover {
              background-color: #F6C792;
            }

            @media (min-width: 768px) {
              margin-inline-start: 0;
            }
          }
        }
      }

      .cont-right {
        display: none;

        @media (width >= 768px) {
          display: flex;
          align-items: center;
        }

        > img {
          width: 100%;
        }
      }
    }
  }

  .ps2b3 {
    background: #FBF9F8;
    padding: 40px 0 63px 0;

    @media (width >= 768px ){
      padding-top: 56px;
      padding-bottom: 59px;
    }

    .main-container {
      width: auto;
      margin-inline: 10px;

      @media (width >= 445px ){
        margin-inline: 32px;
        margin-inline-start: 37px;
      }

      @media (min-width: 1080px) {
        margin-inline: auto;
      }

      .title {
        font-family: "Meiryo UI", var(--Oracle-Font);
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px;

        @media (width >= 768px ){
          margin-bottom: 40px;
        }
      }

      .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto repeat(2, 1fr) auto repeat(2, 1fr) auto repeat(2, 1fr) auto auto;
        max-width: 913px;
        margin-inline: auto;
        
        @media (width >= 768px ){
          grid-template-columns: repeat(6, 1fr);
          grid-template-rows: auto repeat(2, 1fr) auto auto;
        }

        .table {
          grid-area: 1 / 1 / 11 / 3;
          display: grid;
          grid-template-columns: subgrid;
          grid-template-rows: subgrid;
          gap: 8.3px;

          @media (width >= 768px ){
            grid-area: 1 / 1 / 5 / 7;
          }
          
          .cards1, .cards2, .cards3 {
            display: grid;
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;
          }
          .title1, .title2, .title3 {
            border: 2px solid #467553;
            border-radius: 16px;
            background: #FBF9F8;
            color: #000;
            padding: 16px 8px;
            font-size: 17px;
            font-family: "Meiryo UI", var(--Oracle-Font);
            margin: auto;
            width: 100%;
            text-align: center;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .title1 {
            grid-area: 1 / 1 / 2 / 3;
            @media (width >= 768px ){
              grid-area: 1 / 1 / 2 / 3;
            }
          }
          .cards1 {
            grid-area: 2 / 1 / 4 / 3;
            @media (width >= 768px ){
              grid-area: 2 / 1 / 4 / 3;
            }
          }
          .title2 {
            grid-area: 4 / 1 / 5 / 3;
            @media (width >= 768px ){
              grid-area: 1 / 3 / 2 / 5;
            }
          }
          .cards2 {
            grid-area: 5 / 1 / 7 / 3;
            @media (width >= 768px ){
              grid-area: 2 / 3 / 4 / 5;
            }
          }
          .title3 {
            grid-area: 7 / 1 / 8 / 3;
            @media (width >= 768px ){
              grid-area: 1 / 5 / 2 / 7;
            }
          }
          .cards3 {
            grid-area: 8 / 1 / 10 / 3;
            @media (width >= 768px ){
              grid-area: 2 / 5 / 4 / 7;
            }
          }

          .card {
            border-radius: 16px;
            background: #5C926D;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            color: #FFF;
            font-size: 17px;
            font-weight: 700;
            font-family: "Meiryo UI", var(--Oracle-Font);
            padding: 16px 8px;
            text-align: center;

            img {
              height: 32px;
            }

            p {
              margin: 0;
              margin-top: 11px;
              font-size: 12.5px;
            }
          }

          .big-t {
            grid-area: 10 / 1 / 11 / 3;

            
            @media (width >= 768px ){
              grid-area: 4 / 1 / 5 / 7;
            }
          }
        }

        .desc {
          grid-area: 11 / 1 / 12 / 3;
          margin-top: 20px;
          font-family: "Meiryo UI", var(--Oracle-Font);
          font-weight: 400;
          font-size: 20px;
          text-wrap: pretty;

          @media (width >= 768px ){
            grid-area: 5 / 1 / 6 / 7;
            margin-top: 30px;
          }

          p {}

          ul {
            padding-inline-start: 30px;

            li {
              list-style: disc;
            }
          }
        }
      }

    }
  }

  .ps2b4 {
    background: #FBF9F8;
    padding: 40px 0 0px 0;

    @media (width >= 768px ){
      padding-top: 56px;
    }

    .main-container {
      width: auto;
      margin-inline: 5px;

      @media (width >= 445px ){
        margin-inline: 32px;
        margin-inline-start: 37px;
      }

      @media (min-width: 1080px) {
        margin-inline: auto;
      }

      .title {
        font-family: "Meiryo UI", var(--Oracle-Font);
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px;

        @media (width >= 768px ){
          margin-bottom: 40px;
        }
      }

      table {
        margin-inline: auto;
        box-shadow: 0px 6px 12px 0px #00000033;
        border-spacing: 0;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
        max-width: 992px;

        th {
          --th-background: #F5F4F2;
          background: var(--th-background);
          padding: 25px 10px;
          font-family: "Meiryo UI", var(--Oracle-Font);
          font-weight: 700;
          font-size: 23px;
          text-align: start;

          @media (width >= 400px ){
            padding-inline: 33px;
          }
        }
        tbody {
          tr {
            td {
              font-family: "Meiryo UI", var(--Oracle-Font);
              font-weight: 400;
              font-size: 20px;
              padding: 10px;
              border-bottom: 1px dashed #6F6964;

              
              @media (width >= 400px ){
                padding-inline: 33px;
              }

              .icn-img {
                font-size: 51px;
              }

              &:has(.icn-img) {
                background: #F5F4F2;
                padding-block: 0;
                --icn-color: #467553;
                color: var(--icn-color);
              }
            }

            &:last-child {
              td {
                border: 0;
              }
            }
          }
          
        }
      }
    }
  }

  .ps2s1 {
    padding: 60px 0;
    background-color: var(--ps2s1-bg);
    display: block;
    /* margin-inline: auto; */
  
    & .main-container {
      margin-block: auto;
      padding-inline: 15px;

      @media (width >= 476px) {
        padding-inline: 30px;
      }

      @media (width >= 768px) {
        padding-inline: 36px;
      }

      @media (width >= 992px) {
        width: 1200px;
      }

      @media (width >= 1152px) {
        padding-inline: 0;
      }
  
      & h3{
        font-weight: 700;
        font-style: normal;
        font-size: 32px;
        line-height: 46px;
        text-align: center;
        margin-bottom: 31px;
        font-family: var(--oracle-Font);
        color: var(--ps2s1-title);
      }
  
      & .container-customers {
        display: flex;
        margin-bottom: 40px;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 15px;
  
        & img{
          max-height: 48px;
          height: 48px;
        } 
      } 
  
      & .cta {
        color: var(--ps2s1-form-btn-text) !important;
        background: var(--ps2s1-form-bg-btn) !important;
        font-family: var(--Oracle-Font);
        font-style: normal;
        font-weight: 700;
        font-size: var(--ps2s1-btn-fontSize);
        line-height: var(--ps2s1-btn-lineheight);
        border-radius: 6px;
        height: auto;
        float: none;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        cursor: pointer;
        display: block;
        padding-block: 18px;
        width: 326px;
        max-width: 100%;
        box-sizing: border-box;
        text-decoration: none;

        &:hover {
          background-color: var(--ps2s1-form-bg-btn-hover) !important;
          color: var(--ps2s1-form-btn-text-hover) !important;
        }

        &:active {
          background-color: var(--ps2s1-form-bg-btn-active) !important;
          color: var(--ps2s1-form-btn-text-active) !important;
        }

        &[aria-disabled="true"] {
          background-color: var(--ps2s1-form-bg-btn-disabled) !important;
          color: var(--ps2s1-form-btn-text-disabled) !important;
        }
      }
    }
  }
  
  /* -------COMMON COMPONENTS--------- */
  form.elq-form {
    & table#form-fields td input,
    & input[type=text],
    & .CCPPInputTextField,
    & select.elq-item-select {
      /* border-radius: 0 !important; */
      /* border-width: 0px !important; */
      /* border-bottom-width: 2px !important; */
      /* border-style: solid !important; */
      /* border-color: rgb(139 133 128 / 1) !important;*/
      --tw-shadow: 0 0 #0000 !important;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000; 
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  
      background-color: #F5F4F2;
      border: none !important;
      border-radius: 6px !important;
      font-size: 14px !important;
      line-height: 22px !important;
      font-weight: 600;
      height: auto;
      margin-block: 7px !important;
    }
  
    & select.elq-item-select:first-child{
      color: #6F6964;
    }
    
    & .elq-item-input,
    & .elq-item-select {
      font-family: var(--Oracle-Font);
      font-size: 13px;
      font-weight: 400;
      line-height: 18px
    }
    
    .elq-item-input:focus {
      background-color: #F5F4F2;
    }
  
    & input[type=text] {
      padding-block: 5px !important;
      padding-inline-start: 10px !important;
    }
    
    & .elq-item-select {
      --tw-text-opacity: 1;
      color: rgb(0 0 0 / var(--tw-text-opacity));
      padding: 8px 0 !important;
      padding-inline-start: 6px !important;
      -webkit-appearance: auto
    }
    
    & .flex-col-50 .elq-item-select {
      padding-top: 3px !important;
      padding-bottom: 3px !important;
    }
    
    & .cform36 {
      font-size: 13px !important;
      font-weight: 400;
      --tw-text-opacity: 1;
      color: rgb(139 133 128 / var(--tw-text-opacity));
    }
    
    & p {
      line-height: 18px;
    }
    
    & .link {
      font-size: 11px !important;
      line-height: 18px;
      color: var(--form-links) !important;
    }
    
    & label.label-checkbox,
    & label.label-checkbox-checked {
      background-image: none;
    }
    
    & input[type=radio],
    & input[type=checkbox] {
      visibility: visible !important;
    }
    
    & input[type=checkbox] {
      margin: 0;
      margin-inline-start: -1px;
      height: 18px !important;
      width: 18px !important;
    }
    & input[type=checkbox] .LV_valid_field{
      color: red;
    }
    & input[type=checkbox] .LV_invalid_field{
      color: blue;
    }
    
    & .field-control-wrapper {
      /* margin-left: 5px;
      margin-right: 5px; */
      margin: 0;
    }
    
    & ::-moz-placeholder {
      color: #6F6964 !important;
      opacity: 1;
    }
    
    & ::placeholder {
      /* color: #000 !important; */
      opacity: 1;
    }
  
    & table#form-fields td input::placeholder, 
    & input[type="text"]::placeholder{
      color: #6F6964;
      font-weight: 400;
    }
    
    & :-ms-input-placeholder {
      color: #000 !important;
    }
    
    & ::-ms-input-placeholder {
      color: #fff !important;
    }
    
    & ::-webkit-input-placeholder:after {
      content: "*";
    }
    
    & :-moz-placeholder:after {
      content: "*";
    }
    
    & ::-moz-placeholder:after {
      content: "*";
    }
    
    & :-ms-input-placeholder:after {
      content: "*";
    }

    & .grid-layout-col:has(#OptinDIV) {
      margin: 9px 0 16px 0;
      /* Disclaimer Scroll */
      max-height: 140px;
      overflow-y: auto;
      padding-inline-end: 8px;
      
      & .layout-col > div {
        margin-left: 0px !important;

        &#OptinDIV {
          & input[type=checkbox] {
            margin-inline-start: 0px;
          }
        }
      }
      &:has(.LV_invalid){
        outline: 1px solid red;
        outline-offset: 8px;
        border-radius: 4px;
      }
    }
    &.grid-layout-col {
      &:has(#OptinDIV):has(.LV_invalid) {
        outline: 1px solid red;
        outline-offset: 8px;
        border-radius: 4px;
      }
    }  

    & .grid-layout-col:has(.parent-outline) {
        outline: 1px solid red;
        outline-offset: 8px;
        border-radius: 4px;
    }
   
    #OptinDIV {
      ~ br, br {
        display: none;
      }
    }

    hr {
      height: 0px;
      margin: 0em;
    }
  }
  &.safari {
    & form.elq-form{
      select {
        -webkit-appearance: none !important;
        padding-block: 5px !important;
        padding-inline-start: 10px !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath fill='black' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px 5px;
      }
    }
  }
  &.is-valid .LV_invalid {
    display: block; /* O 'inline', 'flex', etc. */
  }
  div.bg-strip {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 19px;
    background-image: var(--bg-strip)
  }
  
  footer {
    color: var(--footer-text);
    font-size: 14px;
    background: var(--bg-footer);
  
    & .main-container{
      padding: 0;
      padding-left: 15px;
      padding-right: 15px;
      margin: 0 auto;
      width: 1200px;
      max-width: 100%;
      height: auto;
      display: block;
  
  
      @media only screen and (min-width: 479px) {
        padding-left: 30px;
        padding-right: 30px;
      }
      
      & > div{
        padding: 55px 0;
  
        & .tbg-container-fluid.tp-footer {
          text-align: center;
          float: none !important;
        }
  
        & .rev-tagline-div{
          display: none;
        }
  
        & a, & .cleanFooterLinks a {
          color: var(--footer-text) !important;
          text-decoration: none !important;
        }
      }
    }
  
    .u10w5 {
      ul {
  
        &.u10-links>li:first-child a {
          padding-left: 0 !important;
        }
  
        li {
          a {
            font-size: 14px;
            line-height: 18px;
            font-family: var(--Oracle-Font);
            color: var(--footer-text) !important;
            padding-inline-start: 8px !important;
            padding-inline-end: 8px !important;
          }
          
          > a {
            border-right: 1px solid var(--footer-text);
          }
        }
      }
  
      .footer-disclaimer {
        display: block;
        width: 100%;
        padding-top: 5px;
        font-size: 14px;
        line-height: 18px;
        font-family: var(--Oracle-Font);
      }
    }
  }
  
  /* -------COMMON STYLES--------- */
  [dir='rtl'] .ochat_slideout {
    right: initial;
    left: 1em;
  
    & .ochat_slidew2 .ochat_flyout {
      & #ochat-flyoutclose {
        left: 10px;
        right: initial;
      }
      & .chatcta, & .callcta {
        padding: 0px 0px 0px 3.5em;
      }
      & .callcta::before {
          left: initial;
          right: -35px;
      }
    }
  }
}