/*
* Theme: Infosys Chat Bot 
* Author: http://www.getmorph.com
* Version: 1.0.0
* Updated: 27/12/2021 (DD/MM/YYY)
*/
/*FONTS*/
@font-face {
  font-family: MYRIADPRO;
  src: url("../fonts/MYRIADPRO-BOLD.OTF");
}
@font-face {
  font-family: MYRIADPRO-SEMI;
  src: url("../fonts/MYRIADPRO-SEMIBOLD.OTF");
}
@font-face {
  font-family: Tungsten-Medium;
  src: url("../fonts/Tungsten-Medium.ttf");
}
@font-face {
  font-family: MyriadPro-Light;
  src: url("../fonts/MyriadPro-Light.otf");
}
/* BASE STYLES */
:root {
  --theam: #00F2FE;
}

* {
  text-transform: capitalize;
  text-align: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: auto;
}

html {
  /* ratio of font size for responsiveness */
  font-size: calc(1vh + 0.9vw);
  font-style: normal;
  overflow: hidden;
}

.container-fluid {
  display: none;
}

body {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: white;
  overflow: hidden;
}
body #UNDERSTANDIMPLICATIONS path, body #LETSGET path, body #ANALYZEIMPACT path, body #FIND path, body #Make path, body #go_for path, body #MONTH_anl path, body #Graph path, body #TWOBUTT_3 path, body #GCLOSE_12 path, body #SIX_12 path, body #SUMM_12 path, body #VIEW path, body #APPROVE path, body #CCLOSE path, body #WEIV path, body #YP path, body #ACCEPT path, body #PAYMENT path, body #VGR path, body #Marvel path, body #marvel3 path, body #New6 path, body #TASKNew path, body #Marvel path, body #marvel3 path, body #marvel_std12 path, body #marvel_std456 path, body #sendtoanotherapprover123 path, body #White1 rect, body #white2 rect, body #white3 rect, body #white4 rect, body #white5 rect, body #white6 rect, body #YesA path, body #YesB path, body #YesC path, body #Yesddd path, body #yesshowmemoredetails path {
  cursor: pointer;
}
body .trans {
  transition: ease-in 0.2s;
}
body section {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
body #updates {
  display: flex;
  justify-content: center;
}
body .closeing {
  border-radius: 50%;
  border: 0.1rem solid;
  width: 0.3rem;
  height: 0.3rem;
}
body .loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .loader img {
  width: 5rem;
  height: -moz-fit-content;
  height: fit-content;
  -o-object-fit: contain;
     object-fit: contain;
}
body button {
  font-family: MYRIADPRO-SEMI;
  font-style: normal;
  background: none;
  border: none;
  outline: none;
  transition: ease-in 0.2s;
  color: var(--theam);
  font-size: 0.7rem;
  font-weight: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
body button i {
  font-size: 1rem;
}
body button span {
  color: white;
}
body button:hover {
  background: var(--theam);
  color: rgb(98, 98, 98);
}
body button:hover span {
  color: rgb(98, 98, 98);
}
body .btn-blink {
  animation: blinking 1s infinite forwards;
}
body .btn-blink span {
  animation: blinking_12 1s infinite forwards;
}
body .heading-2 {
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  position: absolute;
  top: 1rem;
  border: 0.1rem solid var(--theam);
}
body .heading_animation {
  animation: op 1s ease-in-out forwards;
}
body .heading {
  display: flex;
  opacity: 0;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 1rem;
}
body .heading span {
  font-family: Tungsten-Medium;
  font-size: 2rem;
  color: #ffffff;
}
body .heading #start {
  font-family: MYRIADPRO;
  width: 6rem;
  padding: 0.1rem 0;
  font-size: 1rem;
  border: 0.1rem solid;
  border-color: var(--theam);
  border-radius: 1rem;
  color: white;
  margin-top: 0.5rem;
  animation: bounce 1s infinite;
  margin-right: 2.6rem;
}
body .heading #start:hover {
  background: var(--theam);
  color: rgb(98, 98, 98);
}
@keyframes op {
  100% {
    opacity: 1;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.2rem);
  }
  100% {
    transform: translateY(0);
  }
}
body #Video, body #Video2, body #Video3, body #Video4, body #Video5, body #Video6, body #Video7, body #Video8 {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 0;
  z-index: -1;
}
body .bell {
  top: 27%;
  left: 2.5rem;
}
body .bell, body .rayan_mail {
  display: block;
  position: absolute;
  background: rgba(173, 173, 173, 0.247);
  width: 18rem;
  height: 4.5rem;
  border-radius: 3rem;
  border: 0.1rem solid white;
  font-family: MYRIADPRO;
  font-size: 0.8rem;
  line-height: 1rem;
  text-align: left;
  animation: bellbox 1s ease-in-out forwards;
}
body .bell span, body .rayan_mail span {
  text-transform: none;
  text-transform: none;
  opacity: 0;
  font-size: 1rem;
  position: relative;
  top: 1rem;
  right: -1rem;
  animation: bell 0.7s ease-in-out 1.2s forwards;
  color: #ffffff;
}
body .bell .bell-box, body .rayan_mail .bell-box {
  position: relative;
  width: 8.5rem;
  height: 7rem;
  border-radius: 50%;
  top: -4.6rem;
  right: -11rem;
  box-sizing: border-box !important;
}
body .bell .bell-box .one, body .rayan_mail .bell-box .one {
  opacity: 0;
  animation: bell 0.7s ease-in-out infinite 1.8s;
}
body .bell .bell-box .two, body .rayan_mail .bell-box .two {
  opacity: 0;
  animation: bell 0.7s ease-in-out infinite 1.7s;
}
body .temp {
  display: block !important;
  z-index: 111111111111;
}
@keyframes bellbox {
  0% {
    opacity: 0%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes bell {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 1;
  }
}
body #lottie_9_1, body #lottie_9_2, body #lottie_4 {
  position: absolute;
}
body #lottie_9_1, body #lottie_4 {
  top: 4rem;
  right: 3rem;
}
body #lottie_9_2 {
  top: 4rem;
  left: 3rem;
}
body .coordinator {
  display: none;
  width: 8rem;
  height: 100vh;
  position: absolute;
  left: 0rem;
  justify-content: center;
  align-items: center;
}
body .coordinator button {
  white-space: nowrap;
  text-align: center;
  border-radius: 100%;
}
body .coordinator .coordinators-img {
  font-family: MyriadPro-Light;
  width: 3rem;
  padding: 0.1rem 0.1rem;
  margin: 1rem 0;
  position: relative;
}
body .coordinator .coordinators-img:hover {
  background: transparent !important;
}
body .coordinator .coordinators-img img {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 100%; /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
body .coordinator .coordinators-img span {
  font-size: 0.5rem;
  position: absolute;
  bottom: -1.7rem;
  z-index: 11;
  font-weight: 100 !important;
  line-height: 0.8rem;
}
body .coordinator .coordinators-img span::first-line {
  font-family: MYRIADPRO-SEMI;
}
body .coordinator .coordinators-img:hover span {
  color: white !important;
}
body .coordinator .active img { /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  outline: 0.12rem solid var(--theam);
}
body .carousel {
  display: flex;
  width: 75%;
  height: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11111;
}
body .carousel img {
  border-radius: 1rem;
  z-index: -1;
}
body .carousel i {
  font-size: 0.8rem;
  color: white;
  opacity: 1;
}
body .carousel button {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: black;
  padding: 0.5rem;
  color: rgb(68, 68, 68);
  position: absolute;
}
body .carousel #carousel-prev, body .carousel #carousel-prev-1, body .carousel #carousel-prev-2, body .carousel #carousel-prev-4, body .carousel #carousel-prev-5, body .carousel #carousel-prev-6 {
  left: -0.5rem;
  top: 45%;
}
body .carousel #carousel-next, body .carousel #carousel-next-1, body .carousel #carousel-next-2, body .carousel #carousel-next-4, body .carousel #carousel-next-5, body .carousel #carousel-next-6 {
  right: -0.5rem;
  top: 45%;
}
body .carousel #carousel-back, body .carousel #carousel-back-1, body .carousel #carousel-back-2, body .carousel #carousel-back-4, body .carousel #carousel-back-5, body .carousel #carousel-back-6 {
  right: -1.5rem;
  top: 0rem;
  right: -2rem;
  border-radius: 1rem;
  font-size: 1rem;
  color: white;
  background: none !important;
  cursor: pointer;
}
body .carousel #carousel-back i, body .carousel #carousel-back-1 i, body .carousel #carousel-back-2 i, body .carousel #carousel-back-4 i, body .carousel #carousel-back-5 i, body .carousel #carousel-back-6 i {
  font-size: 1.3rem;
}
body .carousel #carousel-back i:hover, body .carousel #carousel-back-1 i:hover, body .carousel #carousel-back-2 i:hover, body .carousel #carousel-back-4 i:hover, body .carousel #carousel-back-5 i:hover, body .carousel #carousel-back-6 i:hover {
  color: red !important;
}
body .muteAudio {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  z-index: 999;
}
body .muteAudio img {
  cursor: pointer;
}
body .muteAudio:hover {
  background: transparent;
}
body #next-btn, body #back-btn, body #next-btn-2, body #back-btn-2, body #backend-btn, body #live, body .home_mute {
  position: fixed;
  border: 0.1rem solid;
  border-color: var(--theam);
  z-index: 111;
}
body #home-btn, body #muteAudio {
  border: 0.1rem solid;
  border-color: var(--theam);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #ffffff;
  border-color: white;
  font-weight: bolder;
  margin: 0 0.2rem;
}
body #home-btn:hover, body #muteAudio:hover {
  color: var(--theam);
  background: white !important;
}
body .home_mute {
  top: 1rem;
  left: 1.5rem;
  border: none !important;
}
body .mute_active {
  color: var(--theam) !important;
  border-color: var(--theam) !important;
}
body #logo {
  position: fixed;
  z-index: 111;
  right: 1.5rem;
  top: 1.5rem;
}
body #logo img {
  width: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: pointer;
}
body #back-btn-2, body #next-btn-2 {
  width: 5rem;
  padding: 0.1rem 0.3rem !important;
  bottom: 1.5rem;
  border-radius: 1rem;
}
body #back-btn-2 {
  left: 1.5rem;
}
body #next-btn-2 {
  right: 1.5rem;
}
body #back-btn-2 i {
  position: absolute;
  font-size: 0.5rem;
  left: 0.4rem;
}
body #back-btn-2 span {
  margin-left: 0.5rem;
}
body #next-btn-2 i {
  position: absolute;
  font-size: 0.5rem;
  right: 0.4rem;
}
body #next-btn-2 span {
  margin-left: 0.5rem;
}
body #next-btn, body #back-btn, body #live {
  width: 5rem;
  padding: 0.1rem 0.3rem;
  bottom: 1.5rem;
  border-radius: 1rem;
}
body #next-btn i, body #back-btn i, body #live i {
  position: absolute;
  font-size: 0.5rem;
}
body #back-btn {
  left: 1.5rem;
}
body #back-btn i {
  left: 0.4rem;
}
body #back-btn span {
  margin-left: 0.5rem;
}
body #next-btn {
  right: 1.5rem;
}
body #next-btn i {
  right: 0.4rem;
}
body #next-btn span {
  margin-right: 0.2rem;
}
body .backend-buttons {
  position: absolute;
  right: 2rem;
  bottom: 5rem;
  display: flex;
  flex-direction: column;
}
body .backend-buttons .backend-btn {
  width: 2.5rem;
  height: 2.5rem;
  bottom: 6rem;
  right: 2rem;
  border-radius: 50%;
  margin: 1.2rem auto;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  cursor: pointer;
  z-index: 9999;
}
body .backend-buttons .backend-btn img {
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  border: 0.1rem solid;
  border-color: var(--theam);
  border-radius: 50%;
}
body .backend-buttons .backend-btn:hover {
  background: none;
  color: var(--theam);
}
body #live {
  width: 7rem;
  right: 1.5rem;
  bottom: 5rem;
}
body .backend-btn::after {
  font-size: 0.5rem !important;
  font-family: MYRIADPRO;
  color: white;
  position: relative;
  margin-top: 0.2rem;
}
body .cct::after {
  content: "CATEGORY CONTROL TOWER";
}
body .pi::after {
  content: "PROCUREMENT INTELLIGENCE ";
}
body .ca::after {
  content: "CONTRACT ANALYTICS";
}
body .pa::after {
  content: "pa";
}
body .apoc::after {
  content: "Account Payable on Cloud";
}
body .bpo::after {
  content: "Buy Price Optimization ";
}
body .ri::after {
  content: "Risk Intelligence";
}
body .steper, body .steper-2 {
  display: flex;
  width: 35rem;
  position: absolute;
  bottom: 0.5rem;
  z-index: 11111111111;
}
body .steper .steper-btns, body .steper .steper-btns-last, body .steper-2 .steper-btns, body .steper-2 .steper-btns-last {
  width: 0.6rem;
  height: 0.6rem;
  background-color: white;
  border-radius: 50%;
  border: 0.3rem solid rgb(92, 95, 102);
  box-sizing: content-box;
  position: relative;
}
body .steper .steper-btns:hover, body .steper .steper-btns-last:hover, body .steper-2 .steper-btns:hover, body .steper-2 .steper-btns-last:hover {
  background-color: var(--theam);
}
body .steper #steper-end::before, body .steper #steper-5_2::before, body .steper-2 #steper-end::before, body .steper-2 #steper-5_2::before {
  position: absolute;
  right: 0.58rem;
  content: "";
  background: rgba(255, 254, 254, 0.568);
  height: 0.1rem;
  width: 2700%;
  z-index: -111;
}
body .steper #steper-4::before, body .steper #steper-2::before, body .steper #steper-3::before, body .steper #steper-5::before, body .steper-2 #steper-4::before, body .steper-2 #steper-2::before, body .steper-2 #steper-3::before, body .steper-2 #steper-5::before {
  position: absolute;
  right: 0.58rem;
  content: "";
  background: rgba(255, 254, 254, 0.568);
  height: 0.1rem;
  width: 1400%;
  z-index: -111;
}
body .steper #steper-1::after, body .steper #steper-2::after, body .steper #steper-3::after, body .steper #steper-4::after, body .steper #steper-5::after, body .steper-2 #steper-1::after, body .steper-2 #steper-2::after, body .steper-2 #steper-3::after, body .steper-2 #steper-4::after, body .steper-2 #steper-5::after {
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  white-space: nowrap;
  top: -1.5rem;
}
body .steper #steper-1::after, body .steper-2 #steper-1::after {
  content: "Sugar Dilemma";
}
body .steper #steper-2::after, body .steper-2 #steper-2::after {
  content: "Extend Contract";
}
body .steper #steper-3::after, body .steper-2 #steper-3::after {
  content: "Review Contract";
}
body .steper #steper-4::after, body .steper-2 #steper-4::after {
  content: "Invoice Payment";
}
body .steper #steper-5::after, body .steper #steper-5_2::after, body .steper-2 #steper-5::after, body .steper-2 #steper-5_2::after {
  content: "Infosys Live Enterprise" !important;
}
body .steper #steper-start::after, body .steper-2 #steper-start::after {
  content: "Evaluate Alternate Supplier";
  white-space: nowrap;
  top: -1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
}
body .steper #steper-end::after, body .steper #steper-5_2::after, body .steper-2 #steper-end::after, body .steper-2 #steper-5_2::after {
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  content: "Invoice Payment";
  white-space: nowrap;
  top: -1.5rem;
}
body .steper-temp {
  background: var(--theam) !important;
}
body .steper-temp::after {
  color: var(--theam) !important;
}
body .sections {
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
}
body .dynamic-heading {
  display: block;
  position: absolute;
  top: 1rem;
  text-transform: uppercase !important;
}
body .dynamic-heading h2 {
  font-family: Tungsten-Medium;
  border: 0.1rem solid var(--theam);
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 0.2rem 5rem;
  font-size: 2rem;
  color: #ffffff;
  text-transform: uppercase !important;
}

#bgVideo {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}

#lottie_13, #lottie_14, #lottie_16, #lottie_18, #lottie_19, #lottie_20, #lottie_21, #lottie_23, #lottie_24, #lottie_25, #lottie_25, #lottie_26 {
  position: absolute;
  top: -1.5rem;
  right: 8rem;
}

.mail {
  display: none;
  right: 2.5rem !important;
  top: 7rem;
}

/* screen rotate */
.screen-rotate {
  background: white;
  width: 100%;
  height: 100%;
  z-index: 1111111111;
  position: absolute;
  display: none;
  top: 0;
}

.cls-1 {
  opacity: 0.37;
}

.cls-14,
.cls-2,
.cls-3 {
  fill: #fff;
}

.cls-12,
.cls-2,
.cls-4 {
  opacity: 0.2;
}

.cls-3 {
  opacity: 0.08;
}

.cls-10,
.cls-11,
.cls-13,
.cls-4,
.cls-7,
.cls-8,
.cls-9 {
  fill: none;
}

.cls-10,
.cls-11,
.cls-13,
.cls-4,
.cls-5,
.cls-7,
.cls-8,
.cls-9 {
  stroke-miterlimit: 10;
}

.cls-4 {
  stroke-width: 5px;
  stroke: url(#linear-gradient);
}

.cls-10,
.cls-11,
.cls-13,
.cls-5,
.cls-7,
.cls-8,
.cls-9 {
  stroke: #fff;
  stroke-width: 0.5px;
}

.cls-5 {
  fill: url(#linear-gradient-2);
}

.cls-6 {
  opacity: 0.4;
}

.cls-10,
.cls-11,
.cls-13,
.cls-7,
.cls-8,
.cls-9 {
  stroke-linecap: round;
}

.cls-7 {
  stroke-dasharray: 2 2;
}

.cls-8 {
  stroke-dasharray: 2.01 2.01;
}

.cls-9 {
  stroke-dasharray: 2 2;
}

.cls-11 {
  stroke-dasharray: 2.01 2.01;
}

.cls-13 {
  stroke-dasharray: 2 2;
}

.section_7_text {
  position: absolute;
  right: 1.5rem;
  top: 3rem;
}

.section_8_lottie_box {
  z-index: -1;
}

.section_9_lottie_box {
  transform: scale(1.2, 1.2);
}

.section_11_lottie_box {
  width: 72%;
}

.section_28_lottie_box {
  margin-top: -1rem;
}

#lottie_0 {
  margin-top: -1rem;
}

.lottie_0_h2 {
  border: none;
}

.section_1_span {
  text-transform: uppercase;
}

.section_5_text {
  margin-top: -1rem;
}

#CCLOSE, #GCLOSE_12, #TWOBUTT_3 {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@media screen and (max-aspect-ratio: 1/1) {
  .screen-rotate {
    display: flex;
  }
}
@keyframes blinking {
  100% {
    background: var(--theam);
    color: rgb(98, 98, 98);
  }
}
@keyframes blinking_12 {
  100% {
    color: rgb(98, 98, 98);
  }
}/*# sourceMappingURL=style.css.map */