body {
  --Oracle-Font: "Oracle Sans", sans-serif;
  --OracleBold-Font: "Oracle Sans Bold", sans-serif;

  --bg-footer: linear-gradient(0deg,rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
  --footer-text: #fff;
  --footer-txt-shadow: rgba(0, 0, 0, 0.8);

  height: auto;
  min-height: 100dvh;
  width: 100vw;
  position: relative;
  background: transparent;
  
  .view {
    height: auto;
    min-height: 100dvh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .active-view {
    opacity: 1;
    z-index: 1;
    position: relative;

    & > .container {
      padding-bottom: 128px;

      @media (width >= 360px){
        padding-bottom: 95px;
      }
    }
  }

  .logo-icon {
    padding-top: 48px;
    padding-inline-start: 12px;

    svg {
      height: 16px;
      width: auto;
    }
    @media (width >= 480px ) {
      padding-inline-start: 24px;
    }

    @media (width >= 992px ) {
      padding-inline-start: 72px;
    }
  }

  &:has(#home-view.active-view){
    --bg-footer: linear-gradient(0deg,rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 100%);
    --footer-text: #000;
    --footer-txt-shadow: rgba(255, 255, 255, 0.8);
  }
  
  #home-view {
    &.active-view {
      .container{
        display: flex;
      }
    }

    .bg-image {
      position: absolute;
      content: '';
      background: #F1EFED;
      width: 100%;
      height: 100%;
      z-index: -1;
      
      background-size: cover;
      background-position-x: center;

      &::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;

        @media (width >= 768px ) {
          background: linear-gradient(180deg,#ffffff 10%, #bfe1f900 110%);
        }
      }

      @media (width >= 768px ) {
        background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/home-bg-rtra.jpg');
      }
    }
    
    .container {
      width: 100%;
      height: 100%;
      min-height: 100dvh;
      max-width: 1360px;
      margin: auto;
      display: none;
      flex-direction: column;

      @media (height >= 560px) and (width < 992px){
        padding-bottom: 0;
      }

      .logo-icon {
        color: #C74634;
      }

      .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        padding-inline: 24px;
        
        @media (width >= 992px ) {
          align-items: center;
          text-align: center;
          padding-inline: 72px;
          padding-top: 50px;
        }

        p {
          color: #161513A6;
          padding-top: 30px;
          margin-bottom: 8px;
          font-family: var(--Oracle-Font);
          font-weight: 600;
          font-size: 18px;
          line-height: 22px;

          @media (width >= 992px ) {
            font-size: 1.8em;
            padding-top: 8px;
            margin-bottom: 30px;
          }
        }

        h1 {
          color: #161513;
          font-family: var(--Oracle-Font);
          font-weight: 300;
          font-size: 32px;
          line-height: 44px;
          margin-bottom: 8px;
          
          @media (width >= 992px ) {
            font-size: 4em;
            line-height: 52px;
            margin-bottom: 80px;
          }
        }
        
        span{
          font-family: var(--Oracle-Font);
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-shadow: 0px 0px 10px rgb(255 255 255 / 80%);

          @media (width >= 992px ) {
            font-size: 1.6em;
            line-height: 40px;
          }
        }
        
        button, a {
          margin-top: 50px;
          color: #fff !important;
          background-color: #312D2A;
          padding: 10px 16px;
          border-radius: 8px;
          font-family: var(--Oracle-Font);
          font-size: 16px;
          line-height: 24px;
          font-weight: 600;
          border: none;

          &:hover {
            background-color: #514B47;
            cursor: pointer;
            text-decoration: none;
          }
        }
      }

      .mobile-bg-image {
        flex: 1;
        position: relative;
        margin-top: 20px;
        background-image: url(https://www.oracle.com/webfolder/dms/prod/i2/home-bg-rtra.jpg);
        background-size: cover;
        background-position: top;
        mask-image: linear-gradient(0deg, #000 80%, #0000);
        
        @media (width >= 768px ) {
          display: none;
        }

        &::after {
          position: absolute;
          content: '';
          width: 100%;
          height: 100%;
          /* background: linear-gradient(180deg,#F1EFED 0%, #bfe1f900 110%); */

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

      .home-img {
        width: 100%;
        margin-top: auto;
        margin-bottom: 0;
        mask-image: linear-gradient(0deg, #000 80%, #0000);
        
        @media (width >= 768px ) {
          display: none;
        }
      }
    }
  }
  
  #form1-view {
    max-height: 100dvh;
    overflow: hidden;

    &.active-view {
      max-height: fit-content;
      overflow: visible;
    }

    .bg-image {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/form1-bg-rtra.jpg');
      /* background-position: center; */
      background-size: cover;

      &::after {
        position: absolute;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        content: '';
        height: 100%;
        width: 100%;
        backdrop-filter: blur(5px);
      }
    }

    .container {
      width: 100%;
      height: 100%;
      max-width: 1360px;
      margin: auto;

      .logo-icon {
        color: #FFFFFF;
      }

      .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        padding-inline: 24px;
        
        @media (width >= 992px ) {
          padding-inline: 72px;
        }

        h3 {
          color: #FFFFFF;
          font-family: var(--Oracle-Font);
          font-weight: 300;
          font-size: 30px;
          line-height: 42px;
          margin-top: 24px;
          margin-bottom: 32px;
        }
        
        .two-columns {
          width: 100%;
          display: grid;
          
          color: #FFFFFF;
          margin-bottom: 48px;

          @media (width >= 992px ) {
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
          }

          &:has(.form-container form#selectIndustryForm.active-form) {
            display: block;
          }

          &:has(.form-container form#diagnosticForm.active-form) {
            display: block;
            
            @media (width >= 1080px ) {
              display: grid;
              grid-template-columns: auto 300px;
            }
          }

          .form-container {

            --inline_padding_mob: 24px;
            --inline-padding-desk: 32px;

            width: 100%;
            max-width: 100%;
            border-radius: 6px;
            transition: all 0.5s ease;

            @media (width >= 992px) {
              max-width: 592px;
            }

            header {
              display: grid;
              grid-template-columns: auto, 1fr;
              grid-template-rows: repeat(2, auto);

              padding-inline: var(--inline_padding_mob);
              padding-block: 16px;

              border-bottom: 1px solid #949494;
              border-radius: 6px 6px 0 0;
              background-color: #464F4F;

              @media (width >= 430px ) {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: 1fr;
                padding-inline: var(--inline-padding-desk);
              }

              > div {
                display: flex;

                @media (width >= 430px ) {
                  grid-area: auto !important;
                }
              }

              .title {
                grid-area: 1 / 1 / 2 / 2;
                font-family: var(--Oracle-Font);
                font-weight: 600;
                font-size: 20px;
                line-height: 28px;
                justify-content: flex-start;
                align-items: center;
              }

              .lap {
                grid-area: 2/1/3/2;
                font-family: var(--Oracle-Font);
                font-weight: 400;
                font-size: 14px;
                line-height: 22px;
                justify-content: flex-start;
                align-items: center;
                
                @media (width >= 430px ) {
                  justify-content: center;
                }

                span {
                  display: none;
                }
              }

              .icn-close {
                grid-area: 1 / 2 / 3 / 3;
                justify-content: flex-end;
                align-items: center;
                width: 100% !important;
                height: 100% !important;

                &::before {
                  font-size: 22px !important;
                }
              }
            }

            form {
              opacity: 0;
              height: 0;
              display: flex;
            }
            
            form.active-form {
              opacity: 1;
              height: auto;
              transition: all 1s ease-out;
              background-color: #464F4F;
              
              padding-block: 24px;
              padding-inline: var(--inline_padding_mob);

              border-radius: 0 0 6px 6px;
              
              @media (width >= 430px ) {
                padding-inline: var(--inline-padding-desk);
              }
            }

            form#selectIndustryForm {
              flex-direction: column;

              .questions {
                display: flex;
                flex-direction: column;
                gap: 38px;
                
                div {
                  display: flex;
                  flex-direction: column;

                  label {
                    font-family: var(--Oracle-Font);
                    font-weight: 600;
                    font-size: 20px;
                    line-height: 28px;
                    margin-bottom: 8px;
                  }

                  select {
                    font-family: var(--Oracle-Font);
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 24px;
                    color: #161513B2;
                    padding-inline-start: 12px !important;
                    padding-block: 16px !important;
                  }
                  .LV_validation_message {
                    display: none;
                    
                    &.LV_invalid {
                      display: block;
                      line-height: 15px;
                    }
                  }

                }
              }

              input[type="submit"], a {
                width: fit-content;
                background-color: #FFFFFF;
                color: #161513 !important;
                border: none;
                margin: 38px 0 0 auto;
                padding: 10px 16px;
                border-radius: 4px;

                font-family: var(--Oracle-Font);
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;

                &:hover {
                  cursor: pointer;
                  text-decoration: none;
                } 
              }
            }

            &:has(form#diagnosticForm.active-form) {
              /* background-color: #464F4F; */
              max-width: fit-content;

              & + .results {
                @media (width >= 1080px ) {
                  display: block;
                }
              }

              header .lap span {
                display: block;
              }
            }

            form#diagnosticForm {
              flex-direction: column;
              overflow-y: hidden;

              .questions-container {
                display: flex;
                flex-direction: row;
                overflow: hidden;

                .question-group {
                  position: relative;
                  height: 0;
                  width: 0;
                  opacity: 0;
                  z-index: -1;
                  overflow: hidden;
                  transform: translate(100%);
                  transition: transform 0.5s ease-in-out;
  
                  &.active-question{
                    height: 100%;
                    width: 100%;
                    opacity: 1;
                    z-index: 1;
                    transform: translate(0);
                  }
  
                  h4 {
                    font-family: var(--Oracle-Font);
                    font-weight: 600;
                    font-size: 24px;
                    line-height: 32px;
                    margin-bottom: 24px;
                    color: #FFFFFF;
                  }
  
                  .options {
                    display: grid;
                    gap: 24px;
                    
                    @media (width >= 640px ) {
                      grid-template-columns: repeat(2, 1fr);
                    }
  
                    div {
                      label{
                        display: flex;
                        font-family: var(--Oracle-Font);
                        font-weight: 400;
                        font-size: 18px;
                        line-height: 28px;
                        background-color: #D4CFCA;
                        color: #161513;
                        border: 1px solid #FFFFFF33;
                        border-radius: 6px;
                        padding: 12px 24px;
                        height: 100%;
                        align-items: center;
  
                        &:hover {
                          cursor: pointer;
                          background-color: #aea8a2;
                        }
                      }
  
                      input[type="radio"]:checked + label{
                        background-color: #aea8a2;
                      }
                    }
                  }

                  span.LV_validation_message {
                    display: none;
                    
                    &.LV_invalid {
                      display: block;
                    }
                  }
                }
              }

              .ftr {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 24px;

                a {
                  text-decoration: none;
                  }
                .icn-img {
                  margin: 0;
                  height: 44px !important;
                  width: 44px !important;

                  background: #161513A6;
                  border-radius: 50%;
                  border: 1.5px solid #fff;
                  color: #fff !important;
                  opacity: 0;
                  pointer-events: none;
                  text-decoration: none;
                  
                  &::before {
                    font-size: 20px !important;
                    
                  }
                  
                  &.active-prev {
                    opacity: 1;
                    pointer-events: initial;

                    &:hover {
                      pointer-events: all;
                      cursor: pointer;
                      
                    }
                  }
                }

                .form-btn {
                  input, a {
                    display: none;
                    margin-top: 0;
                    background-color: #FFFFFF;
                    color: #161513 !important;
                    border: none;
                    padding: 10px 16px;
                    border-radius: 4px;

                    font-family: var(--Oracle-Font);
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 24px;

                    &:hover {
                      cursor: pointer;
                      text-decoration: none;
                    }

                    &.active-btn {
                      display: block;
                    }
                 
                    &:disabled {
                      background-color: #ffffff8a;
                    }
                  }
                }
              }
            }
          }

          .results {
            display: none;
            position: relative;

            .timeline-item {
              display: flex;
              align-items: center;
              opacity: 0;
              border-left: 2px solid transparent;
              transition: all 0.6s ease;
              position: relative;

              &::before {
                content: '';
                position: absolute;
                height: 0%;
                border-left: 2px solid rgba(255, 255, 255, 0.5);
                transition: height 0.6s cubic-bezier(.21,.21,.79,.8);
                top: -50%;
              }

              &::after {
                opacity: 0;
                transition: opacity 0.5s linear(-0.04 50%, 1 100%);
              }

              &.show {
                opacity: 1;
                
                &:first-child::before {
                  content: none;
                  --first_child-border-top: 37%;
                  top: var(--first_child-border-top);
                  height: calc(100% - var(--first_child-border-top));
                }

                &:nth-child(2)::before{
                  top: -44%;
                  height: 95%;
                }
                
                &:nth-child(3)::before{
                  top: -60%;
                  height: 110%;
                }

                &:nth-child(4)::before{
                  top: -50%;
                  height: 100%;
                }
                
                &:last-child::before {
                  top: -52%;
                  height: 100%;
                }

                &::before {
                  height: 100%;
                }
                
                &:first-child::after {
                  top: calc(50% - 15px);
                }

                &::after {
                  content: '';
                  position: absolute;
                  opacity: 1;
                  width: 6px;
                  height: 6px;
                  background: white;
                  border-radius: 50%;
                  position: absolute;
                  left: -2px;
                }
              }
              
              .card {
                background: #464F4F;
                color: #fff;
                padding: 24px;
                border: 1px solid #FFFFFF33;
                border-radius: 8px;
                max-width: 300px;
                margin: 20px;
                margin-right: 0;
                width: 100%;

                font-family: var(--Oracle-Font);
                font-weight: 400;
                font-size: 18px;
                line-height: 28px;
                
                strong {
                  font-weight: 700;
                  font-size: 20px;
                }
              }

              &:first-child .card {
                margin-top: 0;
              }
            }

          }
        }
      }
    }
    
  }

  #story-view {
    --inline_padding_mob: 24px;
    --inline-padding-desk: 32px;

    max-height: 100dvh;
    overflow: hidden;

    &.active-view {
      max-height: fit-content;
      overflow: visible;

      .container .video-two-columns .ftr .form-btn {
        animation: skip-btn 1s ease forwards;
        animation-delay: 0s;
      }
    }

    .bg-image {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/form1-bg-rtra.jpg');
      /* background-position: center; */
      background-size: cover;

      &::after {
        position: absolute;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        content: '';
        height: 100%;
        width: 100%;
        backdrop-filter: blur(5px);
      }
    }

    .container {
      width: 100%;
      height: 100%;
      max-width: 1360px;
      min-height: 100dvh;
      margin: auto;
      display: flex;
      flex-direction: column;

      .logo-icon {
        color: #FFFFFF;
      }

      .content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        padding-inline: 24px;
        margin-bottom: 40px;  
        
        @media (width >= 992px ) {
          padding-inline: 72px;
        }
        
        & > h3 {
          color: #FFFFFF;
          font-family: var(--Oracle-Font);
          font-weight: 300;
          font-size: 30px;
          line-height: 42px;
          margin-top: 24px;
          margin-bottom: 32px;
        }

        & > div {
          background-color: #464F4F;
          border-radius: 6px;

          header {
            justify-content: space-between;
            
            border-bottom: 1px solid #949494;
            border-radius: 6px 6px 0 0;
            background-color: #464F4F;
            padding-inline: var(--inline_padding_mob);
            padding-block: 16px;
            
            @media (width >= 430px ) {
              padding-inline: var(--inline-padding-desk);
            }
            
            a {
              display: none;
              color: #FFF !important;
              text-decoration: underline;

              h3 {
                font-family: var(--Oracle-Font);
                font-weight: 600;
                font-size: 1.5em;
                line-height: 28px;
                margin: 0;
              }
            }

            & > h3 {
              display: none;
              color: #FFF !important;
              font-family: var(--Oracle-Font);
              font-weight: 600;
              font-size: 1.5em;
              line-height: 28px;
              margin: 0;
            }

            img {
              height: 28px;
              width: auto;
            }
          }
          
          .two-columns {
            display: none;
            flex-direction: column;
            width: 100%;
            gap: 35px;

            background-color: #464F4F;
            padding-inline: var(--inline_padding_mob);
            padding-block: 16px;
            
            @media (width >= 430px ) {
              padding-inline: var(--inline-padding-desk);
            }
            
            @media (width >= 768px ) {
              flex-direction: row;
              padding-top: 32px;
              padding-inline-end: calc(var(--inline-padding-desk) + 25px);
            }
  
            .quote-section {
              width: 100%;
              font-family: var(--Oracle-Font);
              position: relative;
              color: #fff;
              
              border-radius: 6px;
              padding-inline-start: 45px;

              &::after {
                position: absolute;
                top: -33px;
                left: 0px;
                content: "\201C";
                font-family: var(--Oracle-Font);
                width: 30px;
                font-size: 100px;
              }

              blockquote {
                font-size: 1.4em;
                line-height: 1.2;
                text-wrap: pretty;
                font-style: italic;

                padding-top: 0;
                padding-bottom: 30px;

                /* span{
                  font-size: 100px;
                } */
              }

              figcaption {
                font-size: 1.1em;
                font-weight: 600;
              }

              img {
                height: 45px;
                margin-top: 25px;
              }
            }

            .details {
              color: #fff;
              width: 100%;

              p {
                font-family: var(--Oracle-Font);
                font-size: 1.2em;
                text-wrap: balance;
              }
            }
          }

          .ftr {
            background-color: #464F4F;
            border-radius: 0 0 6px 6px;
            padding-inline: var(--inline_padding_mob);
            padding-block: 16px;

            @media (width >= 430px ) {
              padding-inline: var(--inline-padding-desk);
            }

            @media (width >= 768px ) {
              padding-inline-end: calc(var(--inline-padding-desk) + 25px);
            }

            .form-btn {
              width: fit-content;
              margin-inline-end: 0;
              margin-inline-start: auto;

              button, a {
                display: inline-block;
                margin-top: 0px;
                background-color: #FFFFFF;
                color: #161513 !important;
                border: none;
                padding: 10px 16px;
                border-radius: 8px;
                
                font-family: var(--Oracle-Font);
                font-size: 16px;
                line-height: 24px;
                font-weight: 600;

                position: relative;

                &:hover {
                  background-color: #ffffffa6;
                  cursor: pointer;
                  text-decoration: none;
                }
              }
            }
          }
        }

        .video-two-columns {
          flex: 1 1 auto;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 20px;

          @media (width >= 992px) {
            flex-direction: row;
          }

          .video-container{
            width: 100%;
            height: initial;

            iframe {
              height: 100%;
              width: inherit;

              @media (width < 992px){
                aspect-ratio: 560 / 315;
              }
            }
          }

          .ftr {
            position: relative;

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

            .form-btn {
              opacity: 0;
              margin-right: 0;
              margin-left: auto;
              width: 113px;
              z-index: -3;

              @media (width >= 992px) {
                position: absolute;
                bottom: 0;
              }

              button {
                margin-top: 0px;
                background-color: #FFFFFF;
                color: #161513 !important;
                border: none;
                padding: 10px 16px;
                border-radius: 8px;
                
                font-family: var(--Oracle-Font);
                font-size: 16px;
                line-height: 24px;
                font-weight: 600;

                position: relative;

                &:hover {
                  background-color: #ffffffa6;
                  cursor: pointer;
                }
              }
            }

            
          }
        }
      }
    }
  }

  #benchmark-view {
    max-height: 100dvh;
    overflow: hidden;
    
    &.active-view {
      position: relative;
      max-height: fit-content;
      overflow: visible;

      .container {
        .content {
          display: flex;
  
          .tree-columns {
            & > div {
              header, div {
                height: auto;
              }
            }
          }
        }
      }
    }

    .bg-image {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/benchmark-bg-rtra.jpg');
      background-size: cover;

      &::after {
        position: absolute;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
        content: '';
        height: 100%;
        width: 100%;
        backdrop-filter: blur(5px);
      }
    }

    .container {

      height: 100%;
      min-height: 100dvh;
      width: 100%;
      max-width: 1360px;
      /* max-width: 100vw; */
      margin-inline: auto;
      display: flex;
      flex-direction: column;

      .logo-icon {
        flex: 0 0 auto;
        color: #FFFFFF;
      }

      .content {
        flex: 1 1 auto;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        padding-inline: 12px;
        height: 100%;
     
        @media (width >= 480px ) {
          padding-inline-start: 24px;
        }
        @media (width >= 992px ) {
          padding-inline: 72px;
        }

        h3 {
          flex: 0 0 auto;
          color: #FFFFFF;
          font-family: var(--Oracle-Font);
          font-weight: 300;
          font-size: 30px;
          line-height: 42px;
          margin-top: 24px;
          margin-bottom: 32px;
        }

        .tree-columns {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(6, 1fr);
          width: 100%;
          max-width: 100vw;

          & > div {
            display: grid;
            grid-row: 1 / 7;
            grid-template-rows: subgrid;

            &:first-child, &:last-child {
              header {
                background-color: #464F4F;
              }

              div {
                background-color: #FFFFFF;
                color: #161513;
                border-bottom: 1px solid #D4CFCA;
              }
            }

            &.benchmark-column {
              & > div {
                position: relative;

                .icn-img {
                  position: absolute;
                  top: 0;
                  right: 0;
                  border: 0;
                  
                  &:hover + .tooltiptext {
                    z-index: 1;
                    opacity: 1;
                  }
                }

                .tooltiptext {
                  opacity: 0;
                  background-color: #464F4F;
                  box-shadow: 1px 1px 15px 0px rgba(255,255,255,0.52);
                  color: #fff;
                  left: 0;
                  text-align: center;
                  border-radius: 6px;
                  padding: 5px;
                  position: absolute;
                  z-index: -5;
                  transition: opacity 0.5s;
                  
                  font-size: 15px;
                  line-height: 20px;

                  width: 80vw;
                  bottom: 100%;

                  @media (width > 768px) {
                    width: calc(100% - 48px);
                    bottom: initial;
                  }
                }
              }
            }

            &.titles-column div {
              font-weight: 600;
            }

            header {
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: transparent;
              color: #FFFFFF;
              font-family: var(--Oracle-Font);
              font-weight: 600;
              font-size: 2.4rem;
              line-height: 3.2rem;
              text-align: center;
              padding: 10px;
              height: 0;

              @media (width >= 480px ) {
                font-size: 24px;
                line-height: 32px;
                padding: 24px;
              }
            }

            div {
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: transparent;
              color: #FFFFFF;
              font-family: var(--Oracle-Font);
              font-weight: 400;
              font-size: 2.0rem;
              line-height: 2.8rem;
              text-align: center;
              padding: 10px;
              height: 0;

              @media (width >= 480px ) {
                font-size: 20px;
                line-height: 28px;
                padding: 24px;
              }
            }
          }   
        }

        .ftr {
          width: 100%;
          color: #fff;
          margin-bottom: 59px;
          margin-top: 32px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          gap: 16px;

          @media (width >= 480px ) {
            flex-direction: row;
          }

          .opt-btn {
            display: flex;
            gap: 16px;
            height: 100%;
            justify-content: space-around;

            @media (width >= 480px){
              justify-content: flex-start;
            }


            #btnPrint {
              border: none;
            }

            .share-btn {
              border: 1px solid #FFF;
              color: #FFF !important;
            }
          }

          .next-btn button{
            border: 1px solid #FFF;
            background-color: transparent;
            color: #FFFFFF;

            .icn-img {
              padding-inline-start: 16px;
            }
          }

          button, a {
            font-family: var(--Oracle-Font);
            font-size: 16px;
            line-height: 24px;
            font-weight: 600;
            padding: 10px 16px;
            border-radius: 4px;
            color: #161513 !important;
            background: #f0f0f0;
            border: none;

            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              cursor: pointer;
              text-decoration: none;
            }

            .icn-img {
              width: 22px !important;
              height: 22px !important;
              padding-inline-start: 9px;

              &::before {
                font-size: 16px !important;
                line-height: 24px !important;
              }  
            }
          }

        }
      }
    }
  }

  #form2-view {
    max-height: 100dvh;
    overflow: hidden;

    &.active-view {
      max-height: fit-content;
      overflow: visible;

      .bg-image {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/form2-bg-rtra.jpg');
        background-size: cover;

        &::after {
          position: absolute;
          background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
          content: '';
          height: 100%;
          width: 100%;
          backdrop-filter: blur(5px);
        }
      }

      .container {
        height: 100%;

        .content {
          .container {
            .form-container{
              &.active-form{
                height: auto;
  
                form {
                  display: block;
                }
              }
            }
          }
        }
      }
    }

    .bg-image {
      height: 0;
    }

    .container {
      width: 100%;
      height: 0;
      max-width: 1360px;
      margin: auto;

      .logo-icon {
        color: #FFFFFF;
      }

      .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        padding-inline: 24px;
        
        @media (width >= 992px ) {
          padding-inline: 72px;
        }

        h3 {
          color: #FFFFFF;
          font-family: var(--Oracle-Font);
          font-weight: 300;
          font-size: 30px;
          line-height: 42px;
          margin-top: 24px;
          margin-bottom: 32px;
        }
        
        .form-section {
          width: 100%;
          display: flex;
          justify-content: center;
          
          color: #FFFFFF;
          margin-bottom: 48px;

          .container {

            --inline_padding_mob: 24px;
            --inline-padding-desk: 32px;

            width: 100%;
            background-color: #464F4F;
            max-width: 760px;
            border-radius: 6px;
            /* transition: all 0.5s ease; */

            header {
              display: grid;
              grid-template-columns: auto, 1fr;
              grid-template-rows: repeat(2, auto);

              padding-inline: var(--inline_padding_mob);
              padding-block: 16px;

              border-bottom: 1px solid #949494;

              /* @media (width >= 430px ) {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: 1fr;
                padding-inline: var(--inline-padding-desk);
              } */

              > div {
                display: flex;

                @media (width >= 430px ) {
                  grid-area: auto !important;
                }
              }

              .title {
                grid-area: 1 / 1 / 2 / 2;
                font-family: var(--Oracle-Font);
                font-weight: 600;
                font-size: 20px;
                line-height: 28px;
                justify-content: flex-start;
                align-items: center;

                &.buttonATitle {
                  display: none;
                }
              }

              .lap {
                grid-area: 2/1/3/2;
                font-family: var(--Oracle-Font);
                font-weight: 400;
                font-size: 14px;
                line-height: 22px;
                justify-content: flex-start;
                align-items: center;
                
                @media (width >= 430px ) {
                  justify-content: center;
                }
              }

              .icn-close {
                grid-area: 1 / 2 / 3 / 3;
                justify-content: flex-end;
                align-items: center;
                width: 100% !important;
                height: 100% !important;

                &::before {
                  font-size: 14.4px !important;
                }
              }
            }

            .form-container {
              opacity: 0;
              height: 0;
              overflow: hidden;
              transition: opacity 1s ease-out, height 1s ease-out ;

              &.active-form {
                opacity: 1;
                overflow: auto;
                padding-block: 24px;
                padding-inline: var(--inline_padding_mob);

                @media (width >= 430px) {
                  padding-inline: var(--inline-padding-desk);
                }
              }

              h4 {
                font-family: var(--Oracle-Font);
                font-weight: 600;
                font-size: 24px;
                line-height: 32px;
                margin-bottom: 24px;
                color: #FFFFFF;
              }
              form {
                display: none;
                .options {
                  display: grid;
                  gap: 24px;
                    
                  @media (width >= 640px ) {
                    grid-template-columns: repeat(2, 1fr);
                  }
  
                  div {
                    label{
                      display: flex;
                      font-family: var(--Oracle-Font);
                      font-weight: 400;
                      font-size: 18px;
                      line-height: 28px;
                      background-color: #D4CFCA;
                      color: #161513;
                      border: 1px solid #FFFFFF33;
                      border-radius: 6px;
                      padding: 24px;
                      height: 100%;
                      align-items: center;
  
                      &:hover {
                        cursor: pointer;
                        background-color: #aea8a2;
                      }
                    }
  
                    /* input[type="radio"]:checked + label{
                      background-color: #aea8a2;
                    } */
                  }
                }
              }
            }

            .sec2 {

              * {height: 0;}

              &.active-form {
                * {
                  height: auto;
                }
                form {
                  & hr {
                    height: 1px;
                    margin-block: 30px;
                  }
                }
              }
              
              #Join-Demo-text {
                display: none;
                h4 {
                  font-size: 20px;
                }

                ul{
                  padding-inline-start: 20px;

                  li{
                    list-style: disc;
                  }
                }
              }

              form {

                & hr {
                  height: 1px;
                  margin-block: 20px;
                }

                #formElement0, #formElement1, #formElement2, #formElement3, #formElement4, #formElement5, #formElement6, #formElement7   {
                  margin-top: 10px;
                }
                
                .field-control-wrapper {
                  margin-left: 0;
                }

                label, span {
                  font-family: var(--Oracle-Font);
                  font-weight: 600 !important;
                  font-size: 20px;
                  line-height: 28px;
                }

                select, input[type="text"], input[type="email"] {
                  font-family: var(--Oracle-Font);
                  font-weight: 600;
                  font-size: 16px;
                  line-height: 24px;
                  color: #161513B2;
                  padding-inline-start: 12px !important;
                  padding-block: 16px !important;
                  margin-top: 8px !important;
                }

                .schedule-questions {
                  display: none;

                  .list-order.one-column {
                    display: flex;
                    align-items: center;

                    input[type="checkbox"]{
                      visibility: visible;
                      margin-top: 0;
                      margin-inline-start: 0;
                    }

                    .checkbox-aligned {
                      margin-left: 30px !important;
                    }
  
                    &:has(input[value="NA"][name="whatTime"]){
                      display: none;
                    }
                  }

                  #fe138679.LV_invalid_field {
                    background-color: transparent;
                  }
                }

                input[type="submit"] {
                  width: fit-content;
                  background-color: #FFFFFF !important;
                  color: #161513 !important;
                  border: none;
                  margin: 38px 0 0 auto;
  
                  font-family: var(--Oracle-Font);
                  font-weight: 600;
                  font-size: 16px;
                  line-height: 24px;

                  float: right;
                }

                div.layout-col:has(#OptinDIV) {
                  margin-top: 20px;

                  div {
                    margin-inline-start: 0 !important;

                    &#OptinDIV br{
                      display: none;
                    }

                    span, b, p, a {
                      color: #c6c1bd !important;
                      font-size: 13px !important;
                      line-height: 20px;
                    }
                    
                    a, a:link, a:visited {
                      color: #fff !important;
                    }
                    

                    .LV_invalid {
                      font-size: 10px !important;
                      color: #E55844 !important;
                    }

                    .label-checkbox, .label-checkbox-checked {
                      background: none;

                      input {
                        visibility: visible;
                        margin: 0;
                      }
                    }
                  }

                  & > hr, & > br {
                    display: none;
                  }
                }

                .LV_invalid {
                  line-height: 15px !important;
                }

                .elq-required {
                  color: red !important;
                }

              }
            }
            
          }
        }
      }

      .tymessage {
        display: none ; /*Flex*/
        align-items: center;
        justify-content: center;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);

        div {
          background-color: #464F4F;
          padding: 20px;
          border-radius: 5px;
          color: #fff;
          max-width: 80%;
          width: 608px;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);

          p {
            margin: 0;
            font-size: 20px;
            text-wrap: balance;
          }
        }
      }
    }
  }

  #demo-view {
    --inline_padding_mob: 24px;
    --inline-padding-desk: 32px;

    max-height: 100dvh;
    overflow: hidden;

    &.active-view {
      max-height: fit-content;
      overflow: visible;

      .container .video-two-columns .ftr .form-btn {
        animation: skip-btn 1s ease forwards;
        animation-delay: 0s;
      }
    }

    .bg-image {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/form1-bg-rtra.jpg');
      background-size: cover;

      &::after {
        position: absolute;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        content: '';
        height: 100%;
        width: 100%;
        backdrop-filter: blur(5px);
      }
    }

    .container {
      width: 100%;
      height: 100%;
      max-width: 1360px;
      min-height: 100dvh;
      margin: auto;
      display: flex;
      flex-direction: column;

      @media (width >= 992px) {
        max-height: 100dvh;
      }

      .logo-icon {
        color: #FFFFFF;
      }

      .content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        padding-inline: 24px;
        margin-bottom: 60px;  
        
        @media (width >= 992px ) {
          padding-inline: 72px;
        }

        h3 {
          color: #FFFFFF;
          font-family: var(--Oracle-Font);
          font-weight: 300;
          font-size: 30px;
          line-height: 42px;
          margin-top: 24px;
          margin-bottom: 32px;
        }

        .video-two-columns {
          flex: 1 1 auto;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 20px;

          @media (width >= 992px) {
            flex-direction: row;
          }

          .video-container{
            width: 100%;
            height: initial;
              
            iframe {
              height: 100%;
              width: inherit;

              @media (width < 992px){
                aspect-ratio: 560 / 315;
              }

            }
  
            small {
              color: #fff;
              font-size: 1em;
            }
          }

          .ftr {
            position: relative;

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

            .form-btn {
              opacity: 0;
              margin-right: 0;
              margin-left: auto;
              width: 67px;
              z-index: -3;

              @media (width >= 992px) {
                position: absolute;
                bottom: 0;
              }

              button, a {
                margin-top: 0px;
                background-color: #FFFFFF;
                color: #161513 !important;
                border: none;
                padding: 10px 16px;
                border-radius: 8px;
                
                font-family: var(--Oracle-Font);
                font-size: 16px;
                line-height: 24px;
                font-weight: 600;

                position: relative;

                &:hover {
                  background-color: #ffffffa6;
                  cursor: pointer;
                  text-decoration: none;
                }
              }
            }

            
          }
        }
      }
    }
  }

  &:has(#ty-view.active-view){
    --bg-footer: linear-gradient(0deg,rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 100%);
    --footer-text: #000;
    --footer-txt-shadow: rgba(255, 255, 255, 0.8);
  }

  #ty-view {
    max-height: 0;

    .bg-image {
      height: 0;
    }
    .container {
      height: 0;
      
      .home-img{
        height: 0;
      }
    }

    &.active-view {
      max-height: 100dvh;

      .bg-image {
        position: absolute;
        content: '';
        background: #F1EFED;
        width: 100%;
        height: 100%;
        z-index: -1;
        
        background-size: cover;
        background-position-x: center;
  
        filter: blur(5px);
  
        &::after {
          position: absolute;
          content: '';
          width: 100%;
          height: 100%;
          @media (width >= 768px ) {
            background: linear-gradient(180deg, #F1EFED 0%, rgba(241, 239, 237, 0.7) 50%, rgba(241, 239, 237, 0) 100%);
          }
        }
        
        @media (width >= 768px ) {
          background-image: url('https://www.oracle.com/webfolder/dms/prod/i2/ty-bg-rtra.jpg');
        }
      }
      
      .container {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        max-width: 1360px;
        margin: auto;
        display: flex;
        flex-direction: column;
        
        padding-bottom: 0;
  
        .logo-icon {
          color: #C74634;
        }
  
        .content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: start;
          padding-inline: 24px;
          
          @media (width >= 992px ) {
            align-items: center;
            text-align: center;
            padding-inline: 72px;
            padding-top: 80px;
          }
  
          p {
            color: #161513A6;
            padding-top: 16px;
            margin-bottom: 8px;
            font-family: var(--Oracle-Font);
            font-weight: 600;
            font-size: 18px;
            line-height: 24px;
            text-wrap: pretty;
  
            @media (width >= 992px ) {
              padding-top: 8px;
              margin-bottom: 8px;
            }
          }
  
          h1 {
            color: #161513;
            font-family: var(--Oracle-Font);
            font-weight: 300;
            font-size: 40px;
            line-height: 52px;
            margin-bottom: 8px;
            text-wrap: pretty;
            margin-top: 20px;
            
            @media (width >= 992px ) {
              margin-top: 0;
              font-size: 48px;
              line-height: 60px;
            }
          }
          
          span{
            font-family: var(--Oracle-Font);
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
          }
          
          div.buttons {
            display: grid;
            gap: 16px;
            margin-top: 24px;
            margin-bottom: 20px;
            
            @media (width >= 480px ) {
              grid-template-columns: repeat(2, auto);
            }

            @media (width >= 980px) {
              margin-top: 70px;
            }
            
            button, a {
              margin-top: 0px;
              color: #fff !important;
              background-color: #312D2A;
              padding: 10px 16px;
              border-radius: 8px;
              font-family: var(--Oracle-Font);
              font-size: 16px;
              line-height: 24px;
              font-weight: 600;
              border: none;
    
              &:hover {
                background-color: #514B47;
                cursor: pointer;
                text-decoration: none;
              }
            }
          }
        }

        div.restart-section {
          margin-top: auto;
          padding-inline-start: 24px;
          
          @media (width >= 480px){
            padding-inline-start: 24px;
          }
          
          @media (width >= 768px ) {
            position: absolute;
            bottom: 140px;
            z-index: 2;
          }

          @media (width >= 992px) {
            padding-inline-start: 72px;
          }

          button, a {
            display: inline-block;
            margin-top: 0px;
            color: #000 !important;
            background-color: #312d2a00;
            border: 2px solid #312D2A;
            padding: 10px 16px;
            border-radius: 8px;
            font-family: var(--Oracle-Font);
            font-size: 16px;
            line-height: 24px;
            font-weight: 600;
  
            &:hover {
              color: #fff !important;
              background-color: #312d2a;
              cursor: pointer;
              text-decoration: none;
            }
          }
        }

        .home-img {
          width: 100%;
          height: auto;
          margin-top: 20px;
          margin-bottom: 0;
          mask-image: linear-gradient(0deg, #000 80%, #0000);
          
          @media (width >= 768px ) {
            display: none;
          }
        }

        .mobile-bg-image {
          flex: 1;
          position: relative;
          margin-top: 20px;
          background-image: url(https://www.oracle.com/webfolder/dms/prod/i2/ty-bg-rtra.jpg);
          background-size: cover;
          background-position: top;
          mask-image: linear-gradient(0deg, #000 80%, #0000);
          max-height: 425px;
          
          @media (width >= 768px ) {
            display: none;
          }

          &::after {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;

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

  }

  footer {
    color: var(--footer-text) !important;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;

    background: transparent;
    
    .u10 {
      background: var(--bg-footer);
      backdrop-filter: blur(10px); 
      transition: all 1s ease-in-out;

      .u10w1{
        max-width: 1360px;
        padding-inline-start: 12px;

        @media (width >= 480px ) {
          padding-inline-start: 24px;
        }

        @media (width >= 992px ) {
          padding-inline-start: 72px;
        }

        .u10w5 {
          justify-content: center;
          
          a {
            color: var(--footer-text) !important;
            text-shadow: 0px 0px 10px var(--footer-txt-shadow);
            text-decoration: none;
          }
        }
      }
    }
  }
  
}

@keyframes skip-btn {
  to {
    opacity: 1;
    z-index: 1;
  }
}


/* Print PDF Styles */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    margin: 0;
    padding: 0;
  }

  #home-view, #form1-view, #story-view { display: none;}
  #benchmark-view .ftr { display: none !important;}

  .bg-image {
    &::after {
      position: absolute;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
      content: '';
      height: 100%;
      width: 100%;
      backdrop-filter: blur(5px);
    }
  }
}