* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  video#myVideo {
    width: 100vw;
    object-fit: cover;
    height: 100%;
  }
  @media (max-aspect-ratio: 16/9) {
    video {
      width: auto;
      height: 100%;
    }
  }
  @media (max-width: 635px) {
    video {
      display: none;
    }
  }
  .content {
    position: absolute;
    top: 170px;
    left: 0;
    right: 0;
    margin: auto;
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
    width: calc(90%);
  }
  .yellow-btn {
    background: #fcc727;
    color: #000;
    border: none;
    margin-right: 9px;
  }
  .transparent-btn {
    background: 0 0;
    color: #fff;
    width: 251px;
    height: 55px;
    border: 2px solid #fff;
    margin-left: 9px;
  }
  .banner-btn {
    width: 251px;
    height: 55px;
    text-align: center;
    font: normal normal bold 18px/21px Zoho Puvi;
    font-family: "Zoho_Puvi_Bold";
    letter-spacing: 0;
    outline: 0;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  cursor:pointer;
  }
  .banner-btn:hover {
    background: #fff;
    color: #000;
  }
  .white-triangle-border {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #f2f2f2;
    margin: auto;
  }
  .content h1 {
    width: 509px;
    height: 176px;
    text-align: left;
    font: normal normal 600 36px/46px Zoho Puvi;
    letter-spacing: 0;
    color: #fff;
    font-family: "Zoho_Puvi_Regular";
  }
  .content p {
    width: 670px;
    font: normal normal normal 16px/19px Zoho Puvi;
    font-family: "Zoho_Puvi_Regular";
    text-align: left;
    letter-spacing: 0;
    color: #fff;
    margin: 10px 0;
  }
  .two-main-btn {
    margin: 30px 0;
    display: flex;
  }
  .content-para,
  .digital-workplace-animation-video {
    width: 50%;
    text-align: center;
  }
  .content-para h2 {
    width: 670px;
    height: 70px;
    text-align: left;
    font: normal normal bold 32px/37px Zoho Puvi;
    font-family: "Zoho_Puvi_Bold";
    letter-spacing: 0;
    color: #222;
  }
  .content-para p {
    width: 533px;
    text-align: left;
    letter-spacing: 0;
    color: #222;
  }
  #digital-workplace-animation {
    width: 502px;
    height: 502px;
  }
  .application-box {
    width: calc(92% / 3);
    height: 100px;
    background: #f2f2f2 0 0 no-repeat padding-box;
    box-shadow: 0 3px 12px #0d024014;
    border-radius: 8px;
    margin: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
  }
  .application-box:hover {
    background: #f2f2f2 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 12px #0d024024;
    border-radius: 8px;
  }
  .flex-wrap-boxes {
    width: 80%;
    margin: auto;
    padding: 0 0 40px 0;
    display: flex;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .app-box1 {
    height: 31px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-92x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-box2 {
    width: 48px;
    height: 55px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-82x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-box3 {
    width: 50px;
    height: 55px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-72x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-box4 {
    width: 55px;
    height: 35px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-62x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-box5 {
    width: 55px;
    height: 53px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-52x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-box6 {
    width: 55px;
    height: 46px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-42x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-box7 {
    width: 55px;
    height: 42px;
    background: transparent
      url("https://cdn.manageengine.com/latam/digital-workplace/images/Recurso-32x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .What-is-banner {
    background: #f2f2f2 0 0 no-repeat padding-box;
    padding-bottom: 40px;
  }
  .What-is-banner p {
    font: normal normal normal 16px/19px Zoho Puvi;
    font-family: "Zoho_Puvi_Regular";
    font-size: 16px;
    line-height: 19px;
  }
  .application-box span {
    font-size: 11px;
  }
  .What-is-banner .container {
    width: calc(90%);
    margin: auto;
    height: 100%;
  }
  .two-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .application-box p {
    text-align: left;
    font: normal normal bold 16px/19px Zoho Puvi;
    font-family: "Zoho_Puvi_Bold";
    padding-left: 5px;
    letter-spacing: -0.24px;
    color: #6f6f6f;
  }
  .logo-app {
    padding: 10px;
    width: 74px;
  }
  strong {
    font: normal normal bold 16px/19px Zoho Puvi;
    letter-spacing: 0px;
    color: #222222;
    font-family: "Zoho_Puvi_Bold";
  }
  .application-box strong {
    text-align: left;
    font: normal normal bold 16px/11px Zoho Puvi;
    letter-spacing: 0px;
    color: #6f6f6f;
    font-family: "Zoho_Puvi_Bold";
  }
  section.DEX-What {
    position: relative;
    border: 0.1px solid transparent;
    background: #996d6d;
    background: transparent
      linear-gradient(180deg, #bbedf4 0%, #66d1f8 100%, #27bcfb 100%) 0% 0%
      no-repeat padding-box;
    z-index: 1;
  }
  .down-arrow {
    margin: auto;
    width: 0;
    height: 0;
  }
  
  .DEX-logo {
    position: relative;
    height: 525px;
    z-index: 1111;
  }
  .four-box-two .DEX1,
  .four-box-two .DEX2 {
    width: 50%;
  }
  .Drop-img1 {
    width: 650px;
    height: 550px;
    left: 0;
    top: -8px;
    z-index: 999;
    position: absolute;
    background: url("https://cdn.manageengine.com/latam/digital-workplace/images/Group-252.png");
    background-size: 100% 100%;
  }
  .Drop-img2 {
    position: absolute;
    background: url("https://cdn.manageengine.com/latam/digital-workplace/images/Path-24.png");
    background-repeat: no-repeat;
  }
  .Drop-img3 {
    position: absolute;
    background: url("https://cdn.manageengine.com/latam/digital-workplace/images/Path-25.png");
    background-repeat: no-repeat;
  }
  .Drop-img4 {
    position: absolute;
    background: url("https://cdn.manageengine.com/latam/digital-workplace/images/Path-26.png");
    background-repeat: no-repeat;
  }
  .Drop-img5 {
    position: absolute;
    background: url("https://cdn.manageengine.com/latam/digital-workplace/images/Digital-Workplace-vs-Digital-Workspace.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .DEX2 h2 {
    width: 533px;
    text-align: left;
    font: normal normal bold 32px/37px Zoho Puvi;
    font-family: "Zoho_Puvi_Bold";
    letter-spacing: 0;
    color: #222;
    margin: 18px 0;
  }
  .border-dex-h2 {
    height: 0;
    border: 3px solid #222;
    width: 30%;
    border-radius: 2px;
    margin: 20px 0;
  }
  .DEX2 p {
    width: 534px;
    margin: 5px 0;
    text-align: left;
    letter-spacing: 0;
    color: #222;
    font: normal normal normal 16px/19px Zoho Puvi;
    font-family: "Zoho_Puvi_Regular";
    font-size: 16px;
    line-height: 19px;
  }
  .DEX2-box p strong {
    font-family: "Zoho_Puvi_Bold";
    text-align: left;
    font-size: 16px;
    line-height: 19px;
  }
  #backToTop {
    display: none !important;
  }
  .four-box-two .two-box {
    max-width: 1300px;
    width: 95%;
  }
  .DEX2-box {
    width: 80%;
    margin: auto;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .DEX-logo img {
    position: absolute;
    left: 130px;
    top: -36px;
    width: 510px;
    height: 500px;
  }
  .two-box.final .DEX2 h2 {
    width: 650px;
  }
  #DW-footer {
    font: 400 15px / 24px Zoho_Puvi_Regular;
    font-family: "Zoho_Puvi_Regular";
    letter-spacing: 0.5px;
    line-height: 20px;
    color: #444;
  }
  /* #DW-footer p {
          text-align: center;
          font: normal normal normal 16px / 19px Zoho Puvi;
          font-family: "Zoho_Puvi_Regular";
          letter-spacing: 0px;
          color: #ffffff;
        } */
  .two-box.final {
    margin: 200px auto 100px auto;
  }
  .two-box.final .DEX2-box {
    width: initial;
  }
  .tac {
    text-align: center;
  }
  
  .marginlt {
    margin-left: 2%;
  }
  .marginrt {
    margin-right: 1%;
  }
  
  .DEX-logo img {
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
  }
  .DEX-logo {
    max-width: 600px;
  }
  
  .two-box.final {
    margin: 3vh auto;
  }
  
  .four-box-two .DEX1 {
    margin: 2vh auto;
    height: 100%;
  }
  
  section.blue-dw {
    background: transparent
      linear-gradient(180deg, #bbedf4 0%, #66d1f8 100%, #27bcfb 100%) 0% 0%
      no-repeat padding-box;
    padding-bottom: 20px;
  }
  
  .DEX-What,
  .What-is-banner {
    max-width: 1300px;
    margin: auto;
  }
  
  section.bg-grey {
    background: #f2f2f2 0 0 no-repeat padding-box;
  }
  
  .Drop-img5 {
    width: 1000px;
    height: 510px;
    right: 0;
    z-index: 999;
    top: 25px;
  }
  .Drop-img4 {
    width: 30px;
    height: 30px;
    background-size: 100%;
    z-index: 99;
    left: 60em;
    bottom: 0;
  }
  .Drop-img2 {
    width: 30px;
    height: 30px;
    background-size: 100%;
    z-index: 99;
    left: 43em;
  }
  
  .four-box-two .two-box {
    position: relative;
    margin: 35px auto 0;
  }
  
  .four-box-two .DEX1 {
    margin: 2vh auto;
    height: 100%;
  }
  
  section.blue-dw {
    background: transparent
      linear-gradient(180deg, #bbedf4 0%, #66d1f8 100%, #27bcfb 100%) 0% 0%
      no-repeat padding-box;
    padding-bottom: 20px;
  }
  
  .DEX-What,
  .What-is-banner {
    max-width: 1300px;
    margin: auto;
  }
  
  section.bg-grey {
    background: #f2f2f2 0 0 no-repeat padding-box;
  }
  .four-box-two {
    position: relative;
  }
  
  .two-box.final {
    margin: 0px auto 10px;
  }
  
  .four-box-two .two-box {
    height: 572px;
  }
  .two-box.final .DEX-logo img {
    width: 500px;
    height: 420px;
    position: absolute;
    right: 0px;
    bottom: 0;
    top: initial;
    left: auto;
    margin: initial;
  }
  .two-box.final .DEX1 {
    position: relative;
  }
  
  .two-box.final .DEX1 .DEX-logo {
    position: absolute;
    top: 0;
    right: 0;
  }
  .gap-design-box {
    height: 100px;
    position: relative;
  }
  
  .Drop-img3 {
    height: 55px;
    width: 85px;
    background-size: 100% 100%;
    left: 50em;
    top: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
  }
  
  @media (max-width: 1300px) {
    .two-box.final .DEX2 h2,
    .DEX2 p,
    .DEX2 h2,
    .content-para h2,
    .What-is-banner p,
    .content p {
      width: initial;
    }
    .content p {
      width: 100%;
      max-width: 750px;
    }
  }
  @media (max-width: 1200px) {
    .max-width {
      width: 95%;
    }
  }
  @media (max-width: 1126px) {
    .two-box.final .DEX2 h2,
    .DEX2 p,
    .DEX2 h2,
    .DEX-logo,
    .content-para h2,
    .What-is-banner p,
    .content p {
      width: initial;
    }
    .content-para h2 {
      height: initial;
      margin: 10px 0;
    }
    .flex-wrap-boxes {
      width: 100%;
    }
  }
  
  @media (max-width: 1008px) {
    .Drop-img1,
    .Drop-img2,
    .Drop-img3,
    .Drop-img4,
    .Drop-img5,
    .four-box-two .DEX1 {
      display: none;
    }
  
    .four-box-two .DEX2 {
      width: 100%;
    }
  
    .DEX2-box {
      width: 100%;
    }
  
    .four-box-two .two-box {
      height: auto;
    }
  
    .gap-design-box {
      height: 40px;
    }
  
    .flex-wrap-boxes {
      width: 100%;
      flex-direction: row;
    }
  
    .application-box {
      width: 40%;
      height: 110px;
    }
  
    .application-box strong {
      font-size: 0.8em;
    }
  
    .What-is-banner .two-box {
      flex-direction: column;
      padding-top: 20px;
      margin: auto;
    }
  
    .content-para {
      width: 100%;
      margin: auto;
    }
  
    .content-para h2 {
      margin: 20px 0;
    }
  
    #digital-workplace-animation {
      width: 100%;
      height: 100%;
      margin: auto;
    }
  }
  
  @media (max-width: 720px) {
    .application-box {
      width: 45%;
    }
  }
  @media (max-width: 635px) {
  
    .content h1,
    .content p {
      width: auto;
    }
  
    .application-box {
      width: 44%;
    }
  
    .content-para {
      margin-bottom: 20px;
    }
    .content h1 {
      font-size: 30px;
      height: auto;
      margin: 10px 0;
    }
  
    .content p {
      margin: 20px 0;
    }
  
    .main-home-banner {
      height: 650px;
    }
  
    .content {
      top: 0px;
    }
  
    .application-box {
      width: 90%;
    }
  }
  @media (max-width: 630px) {
    .banner-btn {
      margin: 10px auto;
    }
  
    .two-main-btn {
      display: flex;
      flex-direction: column;
    }
  }
  @media (min-width: 1200px) {
    .max-width {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 1400px;
      justify-content: space-between;
    }
  
    .DEX-What,
    .What-is-banner {
      max-width: 1400px;
      margin: auto;
    }
    .four-box-two .two-box {
      max-width: 1400px;
      width: 100%;
    }
    .What-is-banner .container {
      width: 100%;
      max-width: 1400px;
      margin: auto;
      height: 100%;
    }
    .content {
      width: 100%;
      padding: 20px 0px;
      max-width: 1400px;
    }
    .max-width {
      width: 100%;
      max-width: 1400px;
    }
    img.me-icon {
      margin: 0 10px 0 0 !important;
    }
  }
  .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .content,
  .max-width,
  .DEX-What,
  .What-is-banner {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    margin: auto;
  }
  .foot-copy.container a {
    text-decoration: none;
  }
  
  @media (min-width: 1010px) and (max-width: 1240px) {
    .Drop-img1 {
      width: 600px;
    }
    .DEX-What .four-box-two .two-box .DEX2 {
      width: 50%;
      padding: 0 2%;
  }
  }
    section.main-home-banner {
      background: #0b108d;
      height: 700px;
    }