html {
   overflow-y: inherit !important;
}
html {
   overflow-y: inherit !important;
}
.worknstay-main {
   color: #383838;
   font-size: 16px;
   line-height: 26px;
   font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-text-stroke: 1px transparent;
   -moz-osx-font-smoothing: grayscale;
   background-image: url("../../images/case-study/workn-stay/bgpattern1.png");
}
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: normal;
   margin-bottom: 20px;
}
h1,
h2 {
   line-height: 48px;
}
img {
   max-width: 100%;
}
figure {
   margin: 0;
}
.flex-row {
   display: flex;
   flex-wrap: wrap;
}
section {
   position: relative;
}
.ovr-hidden {
   overflow: hidden;
}
p:last-child {
   margin-bottom: 0;
}
:focus {
   outline: none !important;
}
/*-----------------------------------*/
.section-title {
   margin-bottom: 13px;
   font-size: 50px;
   line-height: 55px;
   color: #232e63;
   font-weight: 700;
   text-align: center;
}
.section-title.st-white {
   color: white;
}
.section-title.st-left {
   text-align: left;
}
.paragraphtitle-36 {
   position: relative;
   margin-bottom: 13px;
   font-size: 36px;
   line-height: 40px;
   color: #000000;
   font-weight: 600;
}
.paragraphtitle-36::after {
   content: "";
   display: table;
   width: 80px;
   height: 2px;
   margin-top: 5px;
   margin-bottom: 15px;
   background-color: #000000;
   clear: both;
}
@media screen and (max-width: 767px) {
   .section-title {
      margin-bottom: 5px;
      font-size: 30px;
      line-height: 35px;
   }
   .paragraphtitle-36 {
      font-size: 20px;
      line-height: 25px;
   }
}
/*---------------------------------------------*/
.worknstay-banner::after {
   content: "";
   display: block;
   padding-bottom: 35px;
   background: url("../../images/case-study/workn-stay/banner-bottom.png") repeat-x left bottom;
}
.worknstay-banner .banner-inner {
   padding-bottom: 350px;
   text-align: center;
   animation: bannermoved 130s infinite linear;
}
.worknstay-banner .banner-inner {
   background: url("../../images/case-study/workn-stay/banner-city.webp") repeat-x left bottom,
      linear-gradient(0deg, #77a9c6 0%, #ffffff 100%);
}
@keyframes bannermoved {
   0% {
      background-position: 0 bottom, left bottom;
   }
   100% {
      background-position: -6000px bottom, left bottom;
   }
}
.worknstay-banner .container {
   overflow: visible;
}
.worknstay-banner-logo {
   padding-top: 29px;
   padding-bottom: 20px;
}
.worknstay-banner-content {
   margin: 0 auto;
}
.worknstay-banner-content .font24 {
   padding-top: 7px;
   padding-bottom: 8px;
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
}
.bannerMan-wrap {
   position: relative;
}
.bannerMan-wrap .bannerMan {
   position: absolute;
   left: 20px;
   top: -52px;
}
@media screen and (max-width: 1025px) {
   .bannerMan-wrap .bannerMan {
      top: 40px;
      width: 200px;
   }
}
@media screen and (max-width: 1022px) {
   .worknstay-banner-content br {
      display: none;
   }
}
/*----------------------------------------------------*/
.features-sect {
   padding-top: 6px;
}
.features-sect .section-title {
   margin-bottom: 48px;
}
.card-features {
   position: relative;
   width: 100%;
   max-width: 967px;
   border-radius: 31px;
   background-color: #c3d9e6;
}
.card-features .count {
   position: absolute;
   top: 0;
   left: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 69px;
   font-size: 36px;
   color: #000000;
   font-weight: 600;
   border-radius: 0 0 50px 50px;
   background-color: #fcfcfc;
}
.card-features .paragraphtitle-36::after {
   margin-top: 21px;
   margin-bottom: 23px;
}
.card-features .card-body {
   position: relative;
   min-height: 537px;
   padding: 95px 10px 31px 38px;
}
.card-features .card-body .col-content {
   width: 100%;
   max-width: 387px;
}
.card-features .figuregroup {
   position: absolute;
   right: -302px;
   top: 28px;
   width: 91%;
}
.card-features .figuregroup img:not(.sahp) {
   position: relative;
}
.card-features .figuregroup .sahp {
   position: absolute;
}
.card-features .figuregroup .sahp.sp1 {
   left: 56%;
   top: -41px;
}
.card-features .figuregroup .sahp.sp2 {
   left: 54%;
   top: 1px;
}
.card-features .figuregroup .sahp.sp3 {
   bottom: 31px;
   left: 4%;
}
.card-features .figuregroup .sahp.sp4 {
   left: 16%;
   top: 33px;
}
/* .features-slider .slick-slide.slick-active .figuregroup{ animation:  slidezoomin 0.4s ease-in-out; }
@keyframes slidezoomin { 0%{ transform: scale(0); } 100%{ transform: scale(1); } } */
.features-slider .slick-arrow {
   top: 8px;
   background-color: transparent !important;
   z-index: 1;
}
.features-slider .slick-dots li button {
   background-color: transparent !important;
}
.features-slider .slick-arrow::before {
   color: black;
   font-size: 48px;
   font-family: inherit;
}
.features-slider .slick-dots li button:before {
   font-size: 26px;
}
.features-slider .slick-next {
   right: inherit;
   left: 89px;
   animation: arrowmoved 1.2s infinite linear;
}
.features-slider .slick-prev {
   left: -12px;
}
@keyframes arrowmoved {
   50% {
      left: 100px;
   }
}
@media screen and (max-width: 1180px) {
   .card-features {
      max-width: inherit;
   }
   .card-features .figuregroup {
      right: 0;
      top: 28%;
      width: 56%;
   }
}
@media screen and (max-width: 850px) {
   .card-features .paragraphtitle-36 br {
      display: none;
   }
   .card-features .card-body {
      min-height: inherit;
   }
   .card-features .card-body .col-content {
      max-width: inherit;
      margin-bottom: 5rem;
   }
   .card-features .figuregroup {
      right: 0;
      top: 0;
      width: 95%;
      position: inherit;
   }
   .card-features .figuregroup .sahp.sp3 {
      width: 15%;
   }
}
/*----------------------------------------------------*/
.flowchart-sect {
   padding-top: 66px;
   padding-bottom: 79px;
}
.flowchart-sect figure.flowchart {
   margin-top: 4.2rem;
}
@media screen and (max-width: 767px) {
   .flowchart-sect {
      padding-top: 33px;
      padding-bottom: 33px;
   }
   .flowchart-sect figure.flowchart {
      margin-top: 2.2rem;
   }
}
/*----------------------------------------------------*/
.designs-section {
   padding-top: 85px;
   padding-bottom: 85px;
   background: url("../../images/case-study/workn-stay/designs-bootom-shap.png") repeat-x left bottom,
      linear-gradient(0deg, #77a9c6 0%, #ffffff 100%);
}
.designs-section .container {
   overflow: visible;
}
.designs-section .inner-container {
   position: relative;
   margin-top: 54px;
   margin-left: -180px;
   margin-right: -180px;
}
.designs-section .desktop-mac {
   position: absolute;
   top: 0;
   left: 50%;
   display: block;
   width: 61%;
   padding-top: 35%;
   background: url("../../images/case-study/workn-stay/desktop-mac.png") no-repeat center center / 100% 100%;
   pointer-events: none;
   z-index: 1;
   transform: translateX(-50%);
}
.designs-section .deskotop-slider .slick-list {
   padding: 7.2% 0;
}
.designs-section .deskotop-slider .slick-slide {
   position: relative;
   transition: transform 0.5s linear;
   padding-top: 4.89%;
   overflow: hidden;
}
.designs-section .deskotop-slider .slick-slide:not(.slick-center) {
   cursor: pointer;
   z-index: 0;
   filter: blur(2px);
}
.designs-section .deskotop-slider .slick-center {
   transform: scale(1.43);
   z-index: 1;
}
.designs-section .deskotop-slider .slick-slide img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
@media screen and (max-width: 1200px) {
   .designs-section .inner-container {
      margin-left: -30px;
      margin-right: -30px;
   }
}
@media screen and (max-width: 767px) {
   .designs-section {
      padding-top: 30px;
      padding-bottom: 30px;
   }
   .designs-section .inner-container {
      margin-top: 34px;
   }
}
/*----------------------------------------------------*/
.benefits-sec {
   padding-top: 34px;
   padding-bottom: 50px;
   background-color: white;
}
.benefits-sec .section-title {
   margin-bottom: 111px;
}
.benefits-sec .paragraphtitle-36::after {
   margin-top: 18px;
   margin-bottom: 23px;
}
.benefits-sec .col-content:not(:last-child) {
   margin-bottom: 38px;
}
@media screen and (min-width: 992px) {
   .benefits-sec .col-content .inner {
      padding-left: 70px;
   }
   .benefits-sec .counter {
      position: relative;
      counter-increment: countnm;
   }
   .benefits-sec .counter::before,
   .benefits-sec .counter::after {
      content: "";
      position: absolute;
   }
   .benefits-sec .counter::before {
      top: 0;
      bottom: 0;
      right: 0;
      width: 1px;
      background-color: #d9d9d9;
   }
   .benefits-sec .counter::after {
      content: counter(countnm);
      top: 50%;
      right: 0;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 39px;
      height: 39px;
      font-size: 24px;
      color: #000000;
      font-weight: 600;
      border-radius: 50px;
      filter: drop-shadow(0px 12px 9px rgba(0, 0, 0, 0.18));
      background-image: linear-gradient(0deg, #77a9c6 0%, #ffffff 100%);
      border: 3px solid #ffffff;
      transform: translate(50%, -50%);
   }
}
/*----------*/
@media screen and (max-width: 991px) {
   .benefits-sec .flex-row {
      display: inherit;
   }
   .benefits-sec .col-figure {
      margin-bottom: 1rem;
      text-align: center;
   }
   .benefits-sec .flex-row .col-content{
      width: 100%;
      max-width: 100%;
      padding-top: 30px;
      padding-bottom: 30px;
   }
}
/*----------------------------------------------------*/
.technologies-sec {
   padding-top: 135px;
   padding-bottom: 90px;
   text-align: center;
   background: url("../../images/case-study/workn-stay/Technologies-shap-top.png") repeat-x left top,
      linear-gradient(0deg, #77a9c6 0%, #ffffff 100%);
}

.technologies-sec .index-client-speaks-row .index-client-content {
   width: 100%;
   background-color: #fff;
   margin: 0;
   padding: 35px;
   position: relative;
   border-radius: 0 13px 13px 13px;
}
.technologies-sec .index-client-speaks-row::after {
   content: "";
   border-radius: 10px;
   filter: drop-shadow(0 0 12.5px rgba(0, 0, 0, 0.15));
   background-color: rgba(255, 255, 255, 0.6);
   position: absolute;
   top: -30px;
   left: 33px;
   right: -30px;
   height: 90%;
   width: 100%;
}
.technologies-sec .index-client-speaks-row .index-client-content::before {
   content: "";
   border: 15px solid transparent;
   border-left-color: #fff;
   border-bottom-color: #fff;
   position: absolute;
   left: 0;
   top: -30px;
}
.technologies-sec .index-client-speaks-row {
   padding: 0;
   position: relative;
   margin-left: 90px;
}
.technologies-sec .index-client-speaks-row::before {
   content: "";
   width: 69px;
   height: 69px;
   border-radius: 10px;
   filter: drop-shadow(0 0 12.5px rgba(0, 0, 0, 0.15));
   background: #ffffff url("../../images/case-study/workn-stay/hangout_icon_blue.png") no-repeat center center;
   position: absolute;
   left: -90px;
   top: -30px;
}
.technologies-sec .section-title {
   margin-bottom: 60px;
}
.technologies-sec .AllTestmonialVideoWrap .AllVideoPlayBtn {
   right: 100%;
   bottom: 50%;
   transform: translate(38px, 50%);
}
.diagram-wrap {
   max-width: 582px;
   margin-left: auto;
   margin-right: auto;
}
.diagram-wrap .lbl-diagram {
   position: relative;
   display: inline-flex;
   justify-content: center;
   padding: 5px 16px;
   font-size: 18px;
   line-height: 30px;
   color: #232e63;
   text-align: center;
   font-family: "Open Sans";
   font-weight: 400;
   border-radius: 5px;
   filter: drop-shadow(0px 12px 9px rgba(0, 0, 0, 0.18));
   background-image: linear-gradient(0deg, #77a9c6 0%, #ffffff 100%);
   border: 1px solid #ffffff;
}
.diagram-wrap .frame {
   padding: 15px;
   border-radius: 5px;
   box-shadow: 0px 1px 14px rgba(0, 0, 0, 0.31);
   background-color: #ffffff;
}
.diagram-wrap .outline {
   padding: 10px 8px;
   text-align: center;
   border-radius: 5px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 7.713px 9.193px 24px rgba(0, 0, 0, 0.12);
   background-color: #ffffff;
}
.diagram-wrap .outline .h5 {
   font-size: 16px;
   line-height: 20px;
   color: #0576b9;
   font-weight: 600;
}
.diagram-wrap .outline .h6 {
   font-size: 14px;
   line-height: 18px;
   color: #798389;
   font-weight: normal;
}
.diagram-wrap .item-1 {
   display: flex;
   flex-wrap: wrap;
   margin-top: 38px;
   padding-right: 17%;
   padding-left: 20%;
}
.diagram-wrap .item-1 .lbl-diagram {
   flex-grow: 1;
   min-width: 160px;
   margin-right: 16px;
   margin-bottom: 16px;
}
.diagram-wrap .item-2 {
   margin-top: 29px;
   padding: 0 15px;
}
.diagram-wrap .flex-row.r2 .frame {
   height: 100%;
}
.diagram-wrap .flex-row.r2 > .col-left {
   position: relative;
   width: 68%;
   padding: 0 15px 15px;
}
.diagram-wrap .flex-row.r2 > .col-left .lbl-diagram {
   position: absolute;
   left: 50%;
   top: -17px;
   min-width: 175px;
   transform: translateX(-50%);
}
.diagram-wrap .flex-row.r2 > .col-right {
   position: relative;
   width: 32%;
   padding: 0 15px 15px;
}
.diagram-wrap .flex-row.r2 > .col-right .lbl-diagram {
   position: absolute;
   left: 50%;
   top: -17px;
   transform: translateX(-50%);
}
.diagram-wrap .flex-row.r2 > .col-right ul {
   margin-top: 25px;
   list-style: none;
   padding: 0;
}
.diagram-wrap .flex-row.r3 > .col-left {
   position: relative;
   width: 50%;
   padding: 34px 29px 16px 19px;
}
.diagram-wrap .flex-row.r3 > .col-right {
   position: relative;
   align-self: flex-start;
   width: 50%;
   padding: 34px 24px 16px 25px;
}
.diagram-wrap .arrow-group {
   position: relative;
   width: 100%;
}
.diagram-wrap .arrow-group span {
   position: absolute;
   display: inline-flex;
}
.diagram-wrap .arrow-group .h-line {
   height: 1px;
   background-color: #738695;
}
.diagram-wrap .arrow-group .v-line {
   width: 1px;
   background-color: #738695;
}
.diagram-wrap .arrow-group .angle3d {
   width: 12px;
   height: 20px;
   background: url("../../images/case-study/teachers-australia/Angle3d.svg") no-repeat center / 100% 100%;
}
.diagram-wrap .arrow-group.ag1 {
   height: 51px;
   margin-top: -15px;
}
.diagram-wrap .arrow-group.ag1 .h-line.element-1 {
   left: 22%;
   width: 6%;
   top: 23px;
}
.diagram-wrap .arrow-group.ag1 .h-line.element-2 {
   left: 37%;
   width: 45%;
   top: 23px;
}
.diagram-wrap .arrow-group.ag1 .v-line.element-1 {
   left: 37%;
   height: 15px;
   top: 23px;
}
.diagram-wrap .arrow-group.ag1 .v-line.element-2 {
   left: 40.3%;
   height: 48px;
   top: 11px;
}
.diagram-wrap .arrow-group.ag1 .v-line.element-3 {
   left: 21.8%;
   height: 13px;
   top: 11px;
}
.diagram-wrap .arrow-group.ag1 .v-line.element-4 {
   left: 28%;
   height: 14px;
   top: 23px;
}
.diagram-wrap .arrow-group.ag1 .v-line.element-5 {
   left: 82%;
   height: 9px;
   top: 15px;
}
.diagram-wrap .arrow-group.ag1 .angle3d.element-1 {
   left: 80.4%;
   top: 2px;
}
.diagram-wrap .arrow-group.ag1 .angle3d.element-2 {
   left: 35.55%;
   top: 29px;
   transform: rotate(182deg);
}
.diagram-wrap .arrow-group.ag1 .angle3d.element-3 {
   left: 39.3%;
   top: 48px;
   transform: rotate(182deg);
}
.diagram-wrap .arrow-group.ag1 .angle3d.element-4 {
   left: 26.6%;
   top: 30px;
   transform: rotate(182deg);
}
.diagram-wrap .arrow-group.ag2 {
   height: 40px;
}
.diagram-wrap .arrow-group.ag2 .v-line.element-1 {
   left: 37%;
   height: 15px;
   top: 15px;
}
.diagram-wrap .arrow-group.ag2 .v-line.element-2 {
   left: 59%;
   height: 15px;
   top: 9px;
}
.diagram-wrap .arrow-group.ag2 .angle3d.element-1 {
   left: 55%;
   top: 15px;
   transform: rotate(182deg);
}
.diagram-wrap .arrow-group.ag2 .angle3d.element-2 {
   left: 33%;
   top: 3px;
   transform: none;
}
.diagram-wrap .arrow-group.ag3 {
   height: 15px;
   position: absolute;
   right: 100%;
   width: 43px;
   top: 40px;
   transform: translateX(19px);
}
.diagram-wrap .arrow-group.ag3 .h-line.element-1 {
   left: 5px;
   top: 10px;
   right: 5px;
}
.diagram-wrap .arrow-group.ag3 .angle3d.element-1 {
   left: 0;
   top: 0;
   transform: rotate(267deg);
}
.diagram-wrap .arrow-group.ag3 .angle3d.element-2 {
   right: 0;
   top: 0;
   transform: rotate(94deg);
}
.diagram-wrap .arrow-group.ag4 {
   height: 15px;
   position: absolute;
   right: 100%;
   width: 56px;
   top: 23px;
   transform: translateX(12px);
}
.diagram-wrap .arrow-group.ag4 .h-line.element-1 {
   left: 6px;
   right: 6px;
   top: 9px;
}
.diagram-wrap .arrow-group.ag4 .angle3d.element-1 {
   left: 0;
   top: 0;
   transform: rotate(266deg);
}
.diagram-wrap .arrow-group.ag4 .angle3d.element-2 {
   right: 0;
   top: 0;
   transform: rotate(92deg);
}
@media screen and (max-width: 991px) {
   .technologies-sec {
      padding-top: 48px;
      padding-bottom: 46px;
   }
   .technologies-sec .col-diagram,
   .technologies-sec .col-video {
      width: 100%;
   }
   .technologies-sec .col-video {
      margin-top: 53px;
   }
}
@media screen and (max-width: 767px) {
   .technologies-sec .index-client-speaks-row {
      margin-left: 0;
   }
   .technologies-sec .index-client-speaks-row::before {
      left: 0;
      top: -110px;
   }
   .diagram-wrap .item-1 {
      padding-right: 0;
      padding-left: 0;
   }
   .diagram-wrap .arrow-group.ag1 .angle3d.element-1 {
      left: 80.95%;
   }
   .diagram-wrap .arrow-group.ag1 .angle3d.element-2 {
      left: 35.99%;
   }
   .diagram-wrap .arrow-group.ag1 .angle3d.element-4 {
      left: 26.9%;
   }
}
@media screen and (max-width: 580px) {
   .technologies-sec .AllTestmonialVideoWrap .AllVideoPlayBtn {
      right: 7px;
      bottom: 0;
      transform: inherit;
   }
}
@media screen and (max-width: 480px) {
   .diagram-wrap .flex-row.r2 > .col-left {
      width: 100%;
   }
   .diagram-wrap .flex-row.r2 > .col-right {
      width: 100%;
      margin-top: 20px;
   }
   .diagram-wrap .arrow-group.ag4 {
      right: 15px;
      top: -26px;
      width: 88px;
      transform: rotate(89deg);
   }
   .diagram-wrap .arrow-group.ag1 .angle3d.element-2 {
      left: 56.6%;
   }
   .diagram-wrap .arrow-group.ag1 .angle3d.element-4 {
      left: 45.9%;
   }
   .diagram-wrap .arrow-group.ag1 .v-line.element-4 {
      left: 47%;
   }
   .diagram-wrap .arrow-group.ag1 .v-line.element-1 {
      left: 58%;
   }
   .diagram-wrap .arrow-group.ag1 .h-line.element-1 {
      left: 22%;
      width: 25%;
   }
   .diagram-wrap .arrow-group.ag1 .h-line.element-2 {
      left: 58%;
      width: 24%;
   }
}
/**********************************************************
*                 RESPONSIVE  general section      
* ********************************************************/
@media screen and (max-width: 767px) {
   .features-sect .section-title {
      margin-bottom: 18px;
   }
   .benefits-sec .section-title {
      margin-bottom: 36px;
   }
}