/* CSS */
#main div,
#main a {
    transition: 1s all ease-in-out;
}

#overlay {
    pointer-events: auto; /* This makes the div block mouse events */
    background-color: rgba(0, 0, 0, 0); /* This ensures the div is invisible but you can change the color and opacity for debugging purposes */
}

.bg {
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    background: url('../assets/BKGND-01-DWS-2880x1620.png') no-repeat padding-box;
    position: absolute;
    z-index: -2;
}

.full-body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    background-color: black;
    height: 100vh;
    opacity: 1; /* Here we set body to 0, then 1 on main function to add a smooth fadein */
    /* background-size: cover; */
    width: 2880vw;
    overflow: hidden;
    z-index: 0;
}

/*.opacityZero{*/
/*    opacity: 0;*/
/*}*/

/*.opacityZero div,*/
/*.opacityZero a {*/
/*    opacity: 0;*/
/*}*/

.oz {
    opacity: 0;
    transition: opacity 0.3s ease;
    /*pointer-events: none; !* This will ensure it's non-interactable *!*/
}

.invisible {
    visibility: hidden;
}

.opacityOne {
    opacity: 1;
}

.transition {
    transition: 1.5s all ease-in-out;
}

.transition-fast {
    transition: 1s all ease-in-out;
}

.transition-slow {
    transition: 2s all ease-in-out;
}

.transition-slower {
    transition: 4s all ease-in-out;
}

.transition-menu {
    transition: 1.5s all ease;
}

/** Navigation **/

a {
    cursor: pointer;
}

/* POPUP MENU */

#popupMenu .menu-btn.out {
    top: 655px;
    left: -9px;
    width: 178px;
    height: 141px;
    background: transparent url('../assets/navigation-menu.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 10;
}

#popupMenu .menu-btn.home {
    top: 662px;
    left: 19px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Home-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

#popupMenu .menu-btn.menu {
    top: 662px;
    left: 85px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Menu-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

#popupMenu .menu-btn.left-arrow {
    top: 729px;
    left: 19px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Back-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

#popupMenu .menu-btn.right-arrow {
    top: 729px;
    left: 85px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Forward-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

.popup-menu {
    width: 178px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0; /* This will stretch it vertically to the height of its parent container */
    transition: transform 0.5s ease-out; /* Animation to smoothly slide the menu */
    z-index: 10;
}

.popup-menu.popup-left {
    transform: translateX(-82%); /* Initially, 80% of the menu will be off-screen to the left */
    z-index: 10;
}

#popupMenu {
    transition: transform 0.5s ease-out !important; /* Animation to smoothly slide the menu */
}

/* DROPDOWN MENU */
.drop {
    top: 657px;
    left: 189px;
    width: 338px;
    height: 465px;
    position: absolute;
    z-index: 3;

    background-color: rgba(102, 127, 165, 0.4); /* #667FA5 with 40% opacity */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* horizontal, vertical, blur, color */
    /*border-radius: 10px; !* Optional: softens the corners for a more modern look *!*/
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.drop:hover {
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25); /* Increased shadow depth on hover */
    transform: translateY(-5px); /* Slight upward shift to enhance the "floating" effect on hover */
}

#popupMenu .home-drop {
    top: 20px;
    left: 20px;
    width: 47px;
    height: 18px;
    position: absolute;
    z-index: 4;
}

#popupMenu .main-menu {
    top: 160px;
    left: 20px;
    width: 91px;
    height: 18px;
    position: absolute;
    z-index: 4;
}

#popupMenu .drop a:hover {
    transition: 0.2ms !important;
}

#popupMenu .drop a {
    text-align: left;
    font: normal normal normal 24px/25px HelveticaNeueLt;
    position: absolute;
    z-index: 4;
    text-decoration: none;
    outline: none;
    color: #FFFFFF;
}

/* Progressive underline effect on hover */
#popupMenu .drop a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px; /* offsetting by the height of the underline, to not disturb positioning */
    left: 0;
    background-color: #28E6FF;
    transition: width 0.2s;
}

#popupMenu .drop a:hover::after {
    width: 100%;
}

#popupMenu span {
    text-align: left;
    font: normal normal normal 16px/45px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    text-transform: uppercase;
    text-decoration: none;
}

#popupMenu .drop span:hover {
    /*color: #28E6FF;*/
    transition: 0.2ms !important;
    font-weight: bold;
}

#popupMenu .drop a::after {
    content: none;
}

#popupMenu .drop a:not(:has(span))::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #28E6FF;
    transition: width 0.2s;
}

#popupMenu .drop a:not(:has(span)):hover::after {
    width: 100%;
}


#popupMenu .employee {
    top: 80px;
    left: 40px;
    width: 252px;
    height: 28px;
}

#popupMenu .future {
    top: 120px;
    left: 40px;
    width: 158px;
    height: 28px;
}

#popupMenu .key {
    top: 220px;
    left: 40px;
    width: 139px;
    height: 28px;
}

#popupMenu .design {
    top: 260px;
    left: 40px;
    width: 186px;
    height: 28px;
}

#popupMenu .life {
    top: 300px;
    left: 40px;
    width: 242px;
    height: 28px;
}

#popupMenu .closer {
    top: 340px;
    left: 40px;
    width: 152px;
    height: 28px;
}

#popupMenu .success {
    top: 380px;
    left: 40px;
    width: 173px;
    height: 28px;
}

/* RIGHT POPUP MENU */

#popupMenuRight .menu-btn.out {
    top: 655px;
    right: -5px;
    width: 178px;
    height: 141px;
    background: transparent url('../assets/navigation-menu.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    transform: scaleX(-1);
    z-index: 10;
}

#popupMenuRight .menu-btn.home {
    top: 662px;
    left: 94px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Home-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

#popupMenuRight .menu-btn.menu {
    top: 662px;
    left: 28px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Menu-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

#popupMenuRight .menu-btn.left-arrow {
    top: 729px;
    left: 28px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Back-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

#popupMenuRight .menu-btn.right-arrow {
    top: 729px;
    left: 94px;
    width: 61px;
    height: 61px;
    background: transparent url('../assets/Forward-LEFT.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 20;
}

.popup-menu-right {
    width: 178px;
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0; /* This will stretch it vertically to the height of its parent container */
    transition: transform 0.5s ease-out; /* Animation to smoothly slide the menu */
    z-index: 10;
}

.popup-menu-right.popup-right {
    transform: translateX(82%); /* Initially, 80% of the menu will be off-screen to the right */
    z-index: 10;
}

#popupMenuRight {
    transition: transform 0.5s ease-out !important; /* Animation to smoothly slide the menu */
}

/* DROPDOWN MENU */
.dropRight {
    top: 657px;
    right: 189px;
    width: 338px;
    height: 465px;
    position: absolute;
    z-index: 3;

    background-color: rgba(102, 127, 165, 0.4); /* #667FA5 with 40% opacity */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* horizontal, vertical, blur, color */
    /*border-radius: 10px; !* Optional: softens the corners for a more modern look *!*/
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.dropRight:hover {
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.25); /* Increased shadow depth on hover */
    transform: translateY(-5px); /* Slight upward shift to enhance the "floating" effect on hover */
}

#popupMenuRight .home-drop {
    top: 20px;
    left: 20px;
    width: 47px;
    height: 18px;
    position: absolute;
    z-index: 4;
}

#popupMenuRight .main-menu {
    top: 160px;
    left: 20px;
    width: 91px;
    height: 18px;
    position: absolute;
    z-index: 4;
}

#popupMenuRight .dropRight a:hover {
    transition: 0.2ms !important;
}

#popupMenuRight .dropRight a {
    text-align: left;
    font: normal normal normal 24px/25px HelveticaNeueLt;
    position: absolute;
    z-index: 4;
    text-decoration: none;
    outline: none;
    color: #FFFFFF;
}

/* Progressive underline effect on hover */
#popupMenuRight .dropRight a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px; /* offsetting by the height of the underline, to not disturb positioning */
    left: 0;
    background-color: #28E6FF;
    transition: width 0.2s;
}

#popupMenuRight .drop a:hover::after {
    width: 100%;
}

#popupMenuRight span {
    text-align: left;
    font: normal normal normal 16px/45px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    text-transform: uppercase;
    text-decoration: none;
}

#popupMenuRight .dropRight span:hover {
    /*color: #28E6FF;*/
    transition: 0.2ms !important;
    font-weight: bold;
}

#popupMenuRight .dropRight a::after {
    content: none;
}

#popupMenuRight .dropRight a:not(:has(span))::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #28E6FF;
    transition: width 0.2s;
}

#popupMenuRight .dropRight a:not(:has(span)):hover::after {
    width: 100%;
}

#popupMenuRight .employee {
    top: 80px;
    left: 40px;
    width: 252px;
    height: 28px;
}

#popupMenuRight .future {
    top: 120px;
    left: 40px;
    width: 158px;
    height: 28px;
}

#popupMenuRight .key {
    top: 220px;
    left: 40px;
    width: 139px;
    height: 28px;
}

#popupMenuRight .design {
    top: 260px;
    left: 40px;
    width: 186px;
    height: 28px;
}

#popupMenuRight .life {
    top: 300px;
    left: 40px;
    width: 242px;
    height: 28px;
}

#popupMenuRight .closer {
    top: 340px;
    left: 40px;
    width: 152px;
    height: 28px;
}

#popupMenuRight .success {
    top: 380px;
    left: 40px;
    width: 173px;
    height: 28px;
}

/** Main Wrapper **/

#main-wrapper {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    background: url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    background-size: cover;
    transform-origin: top left;
    z-index: 0;
}

#home video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    background: url('../assets/BKGND-01-DWS-2880x1620.png') no-repeat;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.25;
    z-index: 0;
}

#home video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url('../assets/BKGND-01-DWS-2880x1620.png') no-repeat;
    background-size: cover;
}

@media screen and (max-device-width: 800px) {
    html {
        background: url('../assets/BKGND-01-DWS-2880x1620.png') #000 no-repeat center center fixed;
    }

    #bgvid {
        display: none;
    }
}

footer {
    transition: 2s;
    z-index: 10;
}

#copy-text {
    top: 1563px;
    left: 32px;
    width: 426px;
    height: 31px;
    text-align: center;
    float: left;
    font: normal normal normal 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 999;
    opacity: .7;
}

/* HOME START */

#home a {
    cursor: pointer;
}

h1 {
    font: bold normal normal 118px/110px HelveticaNeue;
    letter-spacing: 2px;
}

h2 {
    font: normal normal normal 40px/46px HelveticaNeue;
}

#home .title {
    top: 704px;
    left: 111px;
    width: 1470px;
    height: 140px;
    color: #FFFFFF;
    line-height: 50%;
    letter-spacing: 4.5px;
    position: absolute;
    z-index: 6;
}

#home .sub-title {
    top: 869px;
    left: 116px;
    width: 1640px;
    height: 43px;
    letter-spacing: 1px;
    color: #F9F7D1;
    position: absolute;
    z-index: 6;
}

#hero .rec {
    position: absolute;
    top: 725px;
    left: 0;
    width: 1615px;
    height: 260px;
    background-color: #5C7498;
    opacity: 0.45;
    z-index: 5;
}

#main .bg {
    background: url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: -1;
    opacity: 1;
}

#home .bg {
    background: url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
    opacity: 0;
}

#home .title-ring-inner {
    position: absolute;
    top: -13px;
    left: 1150px;
    width: 1654px;
    height: 1654px;
    background: transparent url('../assets/ring-inner-HOMEPAGE.png') 0 0 no-repeat padding-box;
    z-index: 2;
}

#home .title-ring-outer {
    position: absolute;
    top: -129px;
    left: 1061px;
    width: 1837px;
    height: 1837px;
    background: transparent url('../assets/ring-outer-HOMEPAGE.png') 0 0 no-repeat padding-box;
    z-index: 3;
}

#home .title-circle {
    position: absolute;
    top: 95px;
    left: 1265px;
    width: 1426px;
    height: 1426px;
    background: transparent url('../assets/circle-photo-HOMEPAGE.png') 0 0 no-repeat padding-box;
    z-index: 4;
}

#home .title-circle {
    transition: transform 0.1s; /* For a smooth transition effect */
}

#home .title-circle:active {
    transform: translateY(4px); /* Pushes the element down by 4 pixels when clicked */
}


/* HOME END */

/* DEMO/VIDEO CONTAINER */
#demoFrame {
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    /*background: transparent url('../assets/BKGND-01.png') 0 0 no-repeat padding-box;*/
    position: absolute;
    z-index: 11;
}

#demoFrame .demo-container {
    top: 86px;
    left: 183px;
    width: 2515px;
    height: 1534px;
    /*background: transparent url('../assets/FRAME-video-demo.svg') 0% 0% no-repeat padding-box;*/
    background-size: cover;
    background-position: center;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

#demoFrame .demo-container iframe {
    width: 2425px;
    height: 1364px;
    position: absolute;
    top: -100px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 11;
}

/* #menu-list  */
.nav-box-left {
    top: 657px;
    left: 189px;
    width: 407px;
    height: 638px;
    /*background: transparent url('../assets/menu-box-01.svg') 0% 0% no-repeat padding-box;*/
    position: absolute;
    z-index: 999;
    /* background: rgba(93, 117, 153, 0.75);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    border: 1px solid rgba(93, 117, 153, 0.11); */
}

/* #menu-list  */
.nav-box-right {
    top: 657px;
    left: 2285px;
    width: 407px;
    height: 638px;
    /*background: transparent url('../assets/menu-box-01.svg') 0% 0% no-repeat padding-box;*/
    position: absolute;
    z-index: 999;
    /* background: rgba(93, 117, 153, 0.75);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    border: 1px solid rgba(93, 117, 153, 0.11); */
}

ul {
    list-style-type: none;
}

.nav-list ul {
    padding-left: 1em;
}

.nav-list-left,
.nav-list-right {
    text-align: left;
    font: normal normal normal 24px/45px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.nav-list-left .heading,
.nav-list-right .heading {
    text-align: left;
    font: normal normal normal 16px/45px HelveticaNeue;
    letter-spacing: 0px;
    color: #FAF8D7;
    text-transform: uppercase;
}

.wrapper-left .home {
    top: 662px;
    left: 19px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-left .hamburger {
    top: 662px;
    left: 85px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-left .left {
    top: 729px;
    left: 19px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-left .right {
    top: 729px;
    left: 85px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-right .home {
    top: 662px;
    left: 2735px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-right .hamburger {
    top: 662px;
    left: 2801px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-right .left {
    top: 729px;
    left: 2735px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}

.wrapper-right .right {
    top: 729px;
    left: 2801px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 99;
}


/* ANIMATIONS */
.hide {
    display: none;
}

.show {
    display: block;
}

.slide-up {
    animation: slideUp 1.8s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.slide-down {
    animation: slideDown 1.8s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.slide-left {
    animation: slideLeft 1.8s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.slide-right {
    animation: slideRight 1.8s ease-in-out;
    /* animation-fill-mode: forwards; */

}

.zoom-in {
    animation: zoomIn 1.5s ease-in;
    /* animation-fill-mode: forwards; */
}

.zoom-out {
    animation: zoomOut 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.zoom-in-out {
    animation: zoomInOut 3.5s ease-in-out;
    animation-fill-mode: forwards;
}

.zoom-header {
    animation: zoomHeader 1.5s ease-in-out;
}

.rotate-circle {
    animation: rotateCircle 1.8s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.rotate-circle-reverse {
    animation: rotateCircleReverse 1.8s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.rotate-object {
    animation: rotateObject 1.8s ease-in-out;
}

.roll-in {
    animation: rollin 1.8s ease-in-out;
}

.roll-in-reverse {
    animation: rollinReverse 1.8s ease-in-out;
}

.slide-out-down {
    animation: slideOutDown 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.slide-out-up {
    animation: slideOutUp 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.slide-out-right {
    animation: slideOutRight 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.move-up {
    animation: moveUp 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.move-down {
    animation: moveDown 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.extendX {
    animation: extendX 1.5s ease-in-out;
    /* animation-fill-mode: forwards; */
}

.extendY {
    animation: extendY 1.5s ease-in-out;
}

.expand {
    animation: expand 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.zoom-spin {
    animation: zoomSpin 2s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes zoomSpin {
    0% {
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-90deg) scale(1.25);
        transform: rotate(-90deg) scale(1.25);
        /* opacity: 0; */
    }
}

@keyframes expand {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.35);
    }
}

@keyframes extendX {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

@keyframes extendY {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 100%;
        opacity: 1;
    }
}


@keyframes slideUp {
    0% {
        transform: translateY(200vh);
        /* opacity: 0; */
    }
    100% {
        transform: translateY(0);
        /* opacity: 1; */
    }
}


@keyframes slideDown {
    0% {
        transform: translateY(-200vh);
        /* opacity: 0; */
    }
    100% {
        transform: translateY(0);
        /* opacity: 1; */
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(200vw);
        /* opacity: 0; */
    }
    100% {
        transform: translateX(0);
        /* opacity: 1; */
    }
}


@keyframes slideRight {
    0% {
        transform: translateX(-200vw);
        /* opacity: 0; */
    }
    100% {
        transform: translateX(0);
        /* opacity: 1; */
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8, 0.8);
        tranform-origin: center;
    }
    100% {
        transform: scale(1, 1);
        transform-origin: center;
        /* opacity: 0;  */
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(0.8, 0.8);
        /* opacity: 0; */
    }
}

@keyframes zoomInOut {
    0% {
        transform: scale(0.4, 0.4);
        top: 0vh;
    }
    45% {
        transform: scale(1, 1);
        top: 0vh;
    }
    75% {
        transform: scale(1, 1);
        top: 0vh;
    }
    100% {
        transform: scale(0.6, 0.6);
        top: 750px;
    }
}

@keyframes zoomHeader {
    from {
        transform: scale(2, 2);
    }
    to {
        transform: scale(1, 1);
    }
}

@keyframes rotateCircle {
    from {
        transform: scale(0.7) rotate(-150deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes rotateCircleReverse {
    from {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: scale(0.7) rotate(-150deg);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes rotateObject {
    from {
        transform: scale(2) rotate(-90deg);
        /* opacity: 0; */
    }
    to {
        transform: scale(1) rotate(0deg);
        /* opacity: 1; */
    }
}

@keyframes rollin {
    from {
        transform: translate3d(-100%, 0, 0) rotate(-90deg);
        /* opacity: 0; */
    }
    to {
        transform: translateZ(0);
        /* opacity: 1; */
    }
}

@keyframes rollinReverse {
    from {
        transform: translate3d(100%, 0, 0) rotate(90deg);
        /* opacity: 0; */
    }
    to {
        transform: translateZ(0);
        /* opacity: 1; */
    }
}

@keyframes slideOutDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    60% {
        transform: translateY(-50%);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideOutUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    40% {
        transform: translateY(50%);
        opacity: 0;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
    }
    60% {
        transform: translateX(40%);
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes moveDown {
    from {
        top: 560px;
    }
    to {
        top: 723px;
    }
}

@keyframes moveUp {
    from {
        top: 723px;
    }
    to {
        top: 560px;
    }

}

.fade {
    animation: fade 2s ease;
    animation-fill-mode: forwards;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.45;
    }
}

.opacityHalf {
    opacity: 0.45;
    transition: opacity 0.4s ease-in-out;
}


.fade-up {
    animation: fadeUp 1.5s ease-in-out;
}

@keyframes fadeUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

.fade-down {
    animation: fadeDown 1.5s ease-in-out;
}

@keyframes fadeDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

.fade-left {
    animation: fadeLeft 1.5s ease-in-out;
}

@keyframes fadeLeft {
    0% {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

.fade-right {
    animation: fadeRight 1.5s ease-in-out;
}

@keyframes fadeRight {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        transform-origin: center;
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform-origin: center;
        opacity: 1;
    }
}

.fade-in {
    animation: fadein 1.5s ease-in-out;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* SLIDEOUT MENUS TOGGLING */

.right-retract {
    left: 2857px !important;
}

.left-retract {
    left: -156px !important;
}


/* NEW */

.rotate180 {
    transform: rotate(180deg);
    transition: transform 2s ease-in-out; /* Apply a smooth transition for the rotation */
}

.rotate-180 {
    transform: rotate(-180deg);
    transition: transform 2s ease-in-out; /* Apply a smooth transition for the rotation */
}

/* MAIN MENU */
.popAnimation {
    animation: popAnim 0.3s ease-in-out;
}

@keyframes popAnim {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#mainMenu .bg {
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    background: url('../assets/BKGND-01-DWS-2880x1620.png') no-repeat padding-box;
    position: absolute;
    z-index: 0;
}

#mainMenu .center-img {
    top: 380px;
    left: 990px;
    width: 900px;
    height: 900px;
    background: url('../assets/Main-Menu-Circle.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .ring {
    top: 290px;
    left: 901px;
    width: 1079px;
    height: 1080px;
    background: url('../assets/menu-ring.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .employee.img {
    top: 129px;
    left: 1291px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-what-users-expect.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .employee.txt {
    top: 256px;
    left: 1612px;
    width: 421px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

#mainMenu .future.img {
    top: 339px;
    left: 1720px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-next-normal.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .future.txt {
    top: 466px;
    left: 2042px;
    width: 263px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

#mainMenu .lifecycle.img {
    top: 800px;
    left: 1822px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-lifestyle-mgmt.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .lifecycle.txt {
    top: 927px;
    left: 2146px;
    width: 404px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

#mainMenu .key.img {
    top: 1172px;
    left: 1527px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-dws.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .key.txt {
    top: 1299px;
    left: 1848px;
    width: 232px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

#mainMenu .design.img {
    top: 1172px;
    left: 1053px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-design-principles.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .design.txt {
    top: 1299px;
    left: 718px;
    width: 310px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

#mainMenu .closer.img {
    top: 800px;
    left: 758px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-closer-look.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .closer.txt {
    top: 927px;
    left: 482px;
    width: 253px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

#mainMenu .success.img {
    top: 339px;
    left: 862px;
    width: 300px;
    height: 300px;
    background: url('../assets/icon-case-studies.png') no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#mainMenu .success.txt {
    top: 466px;
    left: 551px;
    width: 289px;
    height: 47px;
    text-align: left;
    font: normal normal normal 40px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

.pressed {
    transform: scale(0.9);
    transition: transform 1s ease-in-out !important;
}

/* Main Menu Hover Animations */
#mainMenu a.img:active {
    transform: scale(0.95); /* This will make the object scale down to 95% of its original size when clicked */
    transition: transform 0.1s; /* Quick transition for a responsive feedback */
}

#mainMenu a.img {
    border-radius: 50%;
    /*transition: box-shadow 0.3s, background-color 0.3s;*/
    transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s; /* added transform to the transition */
    position: relative;
    overflow: hidden; /* Hide overflowing parts of pseudo-elements */
    box-shadow: inset 0 0 0 30px transparent;
    display: block; /* Making sure anchor is block-level for pseudo-element positioning */
}

#mainMenu a.img:hover {
    transform: scale(1.05); /* This will make the object grow 5% larger on hover */
}

#mainMenu a.img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle closest-side, transparent 60%, transparent 100%);
    border-radius: 50%;
    transition: background 0.3s;
    pointer-events: none; /* Prevent the pseudo-element from interfering with mouse events */
}


/* Specific hover effects */

#mainMenu .employee.img:hover {
    box-shadow: inset 0 0 0 30px #276958, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.employee.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(38, 89, 89, 0.2) 60%, transparent 100%);
}

#mainMenu .future.img:hover {
    box-shadow: inset 0 0 0 30px #A67B4A, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.future.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(128, 98, 71, 0.2) 60%, transparent 100%);
}

#mainMenu .lifecycle.img:hover {
    box-shadow: inset 0 0 0 30px #5B5452, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.lifecycle.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(92, 83, 79, 0.2) 60%, transparent 100%);
}

#mainMenu .key.img:hover {
    box-shadow: inset 0 0 0 30px #671E3B, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.key.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(121, 48, 74, 0.2) 60%, transparent 100%);
}

#mainMenu .design.img:hover {
    box-shadow: inset 0 0 0 30px #834C73, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.design.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(128, 75, 114, 0.2) 60%, transparent 100%);
}

#mainMenu .closer.img:hover {
    box-shadow: inset 0 0 0 30px #5F7299, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.closer.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(91, 110, 150, 0.2) 60%, transparent 100%);
}

#mainMenu .success.img:hover {
    box-shadow: inset 0 0 0 30px #AA6918, 0 5px 15px rgba(0, 0, 0, 0.3);;
}

#mainMenu a.success.img:hover::after {
    background: radial-gradient(circle closest-side, rgba(162, 106, 24, 0.2) 60%, transparent 100%);
}

/* FUTURE OF WORK */

#future .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#future .bg-1 {
    background: url('../assets/02-full-page.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#future .bg-2 {
    background: url('../assets/photo-2.png') no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: relative;
    z-index: 1;
}

#future .rec {
    background: url('../assets/color-bar-05.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -413px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#future .title {
    top: 175px;
    left: 148px;
    width: 697px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#future .h-line {
    top: 459px;
    left: 0;
    width: 2880px;
    height: 21px;
    background: url('../assets/line-long-horizontal-2.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/* data-58 */
#future .circle-1.img {
    top: 597px;
    left: 646px;
    width: 900px;
    height: 900px;
    background: transparent url('../assets/circle-photo-1.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*#future .circle-1.out {*/
/*    top: 780px;*/
/*    left: 1231px;*/
/*    width: 559px;*/
/*    height: 544px;*/
/*    background: transparent url('../assets/percent-58.png') 0 0 no-repeat padding-box;*/
/*    !*box-shadow: -10px 3px 10px #00000029;*!*/
/*    position: absolute;*/
/*    z-index: 3;*/
/*}*/

#future .circle-1.out {
    top: 780px;
    left: 1231px;
    width: 559px;
    height: 544px;
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: conic-gradient(#538CC5 0% 58%, #323232 58% 100%);
}

#future .circle-1.out::before {
    content: "";
    display: block;
    position: absolute;
    top: 80px;
    left: 80px;
    right: 80px;
    bottom: 80px;
    border-radius: 50%;
    background-color: black;
}


#future .circle-1.data {
    top: 1030px;
    left: 1380px;
    width: 298px;
    height: 164px;
    text-align: center;
    font: normal normal normal 141px/36px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

#future .circle-1.info {
    top: 964px;
    left: 1816px;
    width: 626px;
    height: 106px;
    text-align: left;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#future .circle-1.sub-info {
    top: 1096px;
    left: 1818px;
    width: 316px;
    height: 59px;
    text-align: left;
    font: italic normal normal 22px/26px HelveticaNeueLt;
    letter-spacing: 0;
    color: #B5B1B1;
    position: absolute;
    z-index: 4;
}

/* data-56 */
#future .circle-2.img {
    top: 597px;
    left: 646px;
    width: 900px;
    height: 900px;
    background: transparent url('../assets/circle-photo-2.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*#future .circle-2.out {*/
/*    top: 780px;*/
/*    left: 1231px;*/
/*    width: 559px;*/
/*    height: 544px;*/
/*    background: transparent url('../assets/percent-56.png') 0 0 no-repeat padding-box;*/
/*    !*box-shadow: -10px 3px 10px #00000029;*!*/
/*    position: absolute;*/
/*    z-index: 3;*/
/*}*/

#future .circle-2.out {
    top: 780px;
    left: 1231px;
    width: 559px;
    height: 544px;
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: conic-gradient(#C07D36 0% 56%, #323232 56% 100%);
}

#future .circle-2.out::before {
    content: "";
    display: block;
    position: absolute;
    top: 80px;
    left: 80px;
    right: 80px;
    bottom: 80px;
    border-radius: 50%;
    background-color: black;
}

#future .circle-2.data {
    top: 1030px;
    left: 1380px;
    width: 298px;
    height: 164px;
    text-align: center;
    font: normal normal normal 141px/36px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

#future .circle-2.info {
    top: 940px;
    left: 1818px;
    width: 684px;
    height: 165px;
    text-align: left;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#future .circle-2.sub-info {
    top: 1126px;
    left: 1818px;
    width: 419px;
    height: 55px;
    text-align: left;
    font: italic normal normal 22px/26px HelveticaNeueLt;
    letter-spacing: 0;
    color: #B5B1B1;
    position: absolute;
    z-index: 4;
}

/* data-45 */
#future .circle-3.img {
    top: 597px;
    left: 646px;
    width: 900px;
    height: 900px;
    background: transparent url('../assets/circle-photo-3.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*#future .circle-3.out {*/
/*    top: 780px;*/
/*    left: 1231px;*/
/*    width: 559px;*/
/*    height: 544px;*/
/*    background: transparent url('../assets/percent-45.png') 0 0 no-repeat padding-box;*/
/*    !*box-shadow: -10px 3px 10px #00000029;*!*/
/*    position: absolute;*/
/*    z-index: 3;*/
/*}*/

#future .circle-3.out {
    top: 780px;
    left: 1231px;
    width: 559px;
    height: 544px;
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: conic-gradient(#229A49 0% 45%, #323232 45% 100%);
}

#future .circle-3.out::before {
    content: "";
    display: block;
    position: absolute;
    top: 80px;
    left: 80px;
    right: 80px;
    bottom: 80px;
    border-radius: 50%;
    background-color: black;
}

#future .circle-3.data {
    top: 1030px;
    left: 1380px;
    width: 298px;
    height: 164px;
    text-align: center;
    font: normal normal normal 141px/36px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

#future .circle-3.info {
    top: 899px;
    left: 1816px;
    width: 650px;
    height: 248px;
    text-align: left;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#future .circle-3.sub-info {
    top: 1145px;
    left: 1818px;
    width: 419px;
    height: 59px;
    text-align: left;
    font: italic normal normal 22px/26px HelveticaNeueLt;
    letter-spacing: 0;
    color: #B5B1B1;
    position: absolute;
    z-index: 4;
}

/* Modern Digital Workplace */
#future .center-txt {
    top: 1027px;
    left: 1308px;
    width: 188px;
    height: 127px;
    text-align: center;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#future .pic-1.img {
    top: 506px;
    left: 1050px;
    width: 692px;
    height: 650px;
    background: transparent url('../assets/pic-people.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#future .pic-1.title {
    top: 614px;
    left: 1742px;
    width: 146px;
    height: 44px;
    text-align: left;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

#future .pic-1.txt {
    top: 663px;
    left: 1743px;
    width: 439px;
    height: 78px;
    text-align: left;
    font: italic normal normal 22px/26px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#future .pic-2.img {
    top: 894px;
    left: 1256px;
    width: 692px;
    height: 650px;
    background: transparent url('../assets/pic-technology.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#future .pic-2.title {
    top: 1137px;
    left: 1984px;
    width: 260px;
    height: 44px;
    text-align: left;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

#future .pic-2.txt {
    top: 1191px;
    left: 1984px;
    width: 482px;
    height: 76px;
    text-align: left;
    font: italic normal normal 22px/26px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 4;
}

#future .pic-3.img {
    top: 858px;
    left: 854px;
    width: 528px;
    height: 692px;
    background: transparent url('../assets/pic-operations.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#future .pic-3.title {
    top: 1137px;
    left: 540px;
    width: 236px;
    height: 44px;
    text-align: right;
    font: normal normal normal 44px/55px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

#future .pic-3.txt {
    top: 1187px;
    left: 381px;
    width: 415px;
    height: 115px;
    text-align: right;
    font: italic normal normal 22px/26px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    /*color: #B5B1B1;*/
    position: absolute;
    z-index: 4;
}

/* EMPLOYEE EXPECTATIONS */

#employee .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#employee .bg-1 {
    background: url('../assets/01-full-page.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#employee .bg-2 {
    background: url('../assets/photo-1.png') no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: relative;
    z-index: 1;
}

#employee .rec {
    background: url('../assets/color-bar-06.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -33px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#employee .title {
    top: 170px;
    left: 129px;
    width: 1052px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#employee .h-line {
    top: 459px;
    left: 0;
    width: 2880px;
    height: 21px;
    background: url('../assets/line-long-horizontal-2.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-0 .card-1.out {
    top: 667px;
    left: 426px;
    width: 450px;
    height: 663px;
    background: transparent url('../assets/box-01-VERTICAL.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#section-0 .card-1.icon {
    top: 742px;
    left: 514px;
    width: 270px;
    height: 270px;
    background: transparent url('../assets/icon-CIRCLES-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-0 .card-1.txt {
    top: 1086px;
    left: 488px;
    width: 324px;
    height: 77px;
    text-align: center;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 2;
}

#section-0 .card-2.out {
    top: 667px;
    left: 954px;
    width: 450px;
    height: 663px;
    background: transparent url('../assets/box-02-VERTICAL.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#section-0 .card-2.icon {
    top: 742px;
    left: 1042px;
    width: 271px;
    height: 271px;
    background: transparent url('../assets/icon-CIRCLES-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-0 .card-2.txt {
    top: 1085px;
    left: 1063px;
    width: 230px;
    height: 77px;
    text-align: center;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 2;
}

#section-0 .card-3.out {
    top: 672px;
    left: 1480px;
    width: 449px;
    height: 662px;
    background: transparent url('../assets/box-03-VERTICAL.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#section-0 .card-3.icon {
    top: 742px;
    left: 1570px;
    width: 270px;
    height: 271px;
    background: transparent url('../assets/icon-CIRCLES-03.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-0 .card-3.txt {
    top: 1085px;
    left: 1605px;
    width: 198px;
    height: 77px;
    text-align: center;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 2;
}

#section-0 .card-4.out {
    top: 664px;
    left: 2006px;
    width: 459px;
    height: 677px;
    background: transparent url('../assets/box-04-VERTICAL.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#section-0 .card-4.icon {
    top: 742px;
    left: 2102px;
    width: 270px;
    height: 270px;
    background: transparent url('../assets/icon-CIRCLES-04.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-0 .card-4.txt {
    top: 1085px;
    left: 2062px;
    width: 364px;
    height: 77px;
    text-align: center;
    font: normal normal normal 34px/38px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 2;
}

#employee {
    transition: opacity 1.3s;
}

/* LIFECYCLE MANAGEMENT */

#lifecycle .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#lifecycle .bg-1 {
    background: url('../assets/04-full-page.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#lifecycle .bg-2 {
    background: url('../assets/photo-NTT-SOLUTION-VERTICAL.png') no-repeat padding-box;
    top: 0;
    left: 0;
    width: 1256px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#lifecycle .rec {
    background: url('../assets/color-bar-06.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -93px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#lifecycle .title {
    top: 170px;
    left: 116px;
    width: 1010px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#lifecycle .v-line {
    top: -870.5px;
    left: 1123px;
    width: 21px;
    height: 2880px;
    /*transform: matrix(0, -1, 1, 0, 0, 0);*/
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-0.icon {
    top: 354px;
    left: 1783px;
    width: 418px;
    height: 418px;
    background: url('../assets/circle-photo-NTTD-SOLUTIONS.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-0.txt {
    top: 780px;
    left: 1901px;
    width: 184px;
    height: 70px;
    text-align: center;
    font: normal normal normal 35px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-1.icon {
    top: 130px;
    left: 1879px;
    width: 226px;
    height: 225px;
    background: url('../assets/icon-REFRESH.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-1.txt {
    top: 97px;
    left: 1933px;
    width: 120px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-2.icon {
    top: 382px;
    left: 2208px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-TROUBLESHOOT.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-2.txt {
    top: 474px;
    left: 2430px;
    width: 202px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-3.icon {
    top: 772px;
    left: 2082px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-MANAGEMENT.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-3.txt {
    top: 981px;
    left: 2092px;
    width: 206px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-4.icon {
    top: 772px;
    left: 1684px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-BUSINESS-READY.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-4.txt {
    top: 981px;
    left: 1666px;
    width: 252px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-5.icon {
    top: 382px;
    left: 1560px;
    width: 226px;
    height: 225px;
    background: url('../assets/icon-CHANGE.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-5.txt {
    top: 460px;
    left: 1450px;
    width: 122px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .arrow.circle {
    top: 144px;
    left: 1627px;
    width: 751px;
    height: 751px;
    background: url('../assets/arrows-circle.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-5 .card-6.icon {
    top: 974px;
    left: 2383px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-RETIREMENT.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-6.txt {
    top: 1065px;
    left: 2605px;
    width: 170px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-7.icon {
    top: 1164px;
    left: 2082px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-US-MONITORING.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-7.txt {
    top: 1373px;
    left: 2044px;
    width: 302px;
    height: 84px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-8.icon {
    top: 1164px;
    left: 1684px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-PROCUREMENT.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-8.txt {
    top: 1372px;
    left: 1693px;
    width: 202px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .card-9.icon {
    top: 972px;
    left: 1390px;
    width: 225px;
    height: 225px;
    background: url('../assets/icon-DEPLOYMENT.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-5 .card-9.txt {
    top: 1057px;
    left: 1205px;
    width: 188px;
    height: 40px;
    text-align: center;
    font: normal normal normal 35px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-5 .arrow-rec {
    top: 861px;
    left: 1430px;
    width: 1126px;
    height: 450px;
    background: url('../assets/arrows-rectangle.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

/* KEY SERVICES */

#key .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#key .bg-1 {
    background: url('../assets/05-full-page.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#key .bg-2 {
    background: url('../assets/photo-04-HORIZONTAL.png') 0 0 no-repeat padding-box;
    top: -3px;
    left: 0;
    width: 2880px;
    height: 450px;
    position: absolute;
    z-index: 1;
}

#key .rec {
    background: url('../assets/color-bar-05.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -423px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#key .title {
    top: 170px;
    left: 148px;
    width: 580px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#key .h-line {
    top: 459px;
    left: 0;
    width: 2880px;
    height: 21px;
    background: url('../assets/line-long-horizontal.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/* CARDS */

#section-6 .card-0.line-1 {
    top: 536px;
    left: 490px;
    width: 322px;
    height: 18px;
    background: url('../assets/LINE_01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-0.line-2 {
    top: 545px;
    left: 1079px;
    width: 193px;
    height: 18px;
    background: url('../assets/LINE_02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-0.line-3 {
    top: 545px;
    left: 1620px;
    width: 193px;
    height: 18px;
    background: url('../assets/LINE_02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-0.line-4 {
    top: 536px;
    left: 2080px;
    width: 322px;
    height: 18px;
    background: url('../assets/LINE_04.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-0.txt-1 {
    top: 523px;
    left: 839px;
    width: 228px;
    height: 42px;
    text-align: center;
    font: normal normal normal 36px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-6 .card-0.txt-2 {
    top: 523px;
    left: 1277px;
    width: 326px;
    height: 42px;
    text-align: center;
    font: normal normal normal 36px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-6 .card-0.txt-3 {
    top: 523px;
    left: 1833px;
    width: 224px;
    height: 42px;
    text-align: center;
    font: normal normal normal 36px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 3;
}

#section-6 .card-1.out {
    top: 612px;
    left: 510px;
    width: 300px;
    height: 703px;
    background: url('../assets/workplace-experience_OVAL-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-1.in {
    top: 852px;
    left: 532px;
    width: 257px;
    height: 444px;
    background: url('../assets/workplace-experience_OVAL-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-1.icon {
    top: 869px;
    left: 548px;
    width: 226px;
    height: 226px;
    background: url('../assets/icon-workplace-experience.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#section-6 .card-1.txt.top {
    top: 694px;
    left: 563px;
    width: 190px;
    height: 115px;
    text-align: center;
    font: normal normal normal 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#section-6 .card-1.txt.bot {
    top: 1130px;
    left: 566px;
    width: 184px;
    height: 85px;
    text-align: center;
    font: normal normal normal 37px/42px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
}

#section-6 .card-2.out {
    top: 612px;
    left: 900px;
    width: 300px;
    height: 703px;
    background: url('../assets/workplace-platform_OVAL-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-2.in {
    top: 852px;
    left: 921px;
    width: 257px;
    height: 444px;
    background: url('../assets/workplace-platform_OVAL-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-2.icon {
    top: 869px;
    left: 937px;
    width: 226px;
    height: 226px;
    background: url('../assets/icon-workplace-platform.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#section-6 .card-2.txt.top {
    top: 694px;
    left: 942px;
    width: 218px;
    height: 115px;
    text-align: center;
    font: normal normal normal 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#section-6 .card-2.txt.bot {
    top: 1130px;
    left: 958px;
    width: 174px;
    height: 85px;
    text-align: center;
    font: normal normal normal 37px/42px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
}

#section-6 .card-3.out {
    top: 612px;
    left: 1290px;
    width: 300px;
    height: 703px;
    background: url('../assets/workplace-collaboration_OVAL-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-3.in {
    top: 852px;
    left: 1313px;
    width: 257px;
    height: 444px;
    background: url('../assets/workplace-collaboration_OVAL-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-3.icon {
    top: 868px;
    left: 1328px;
    width: 226px;
    height: 227px;
    background: url('../assets/icon-workplace-platform.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#section-6 .card-3.txt.top {
    top: 674px;
    left: 1337px;
    width: 208px;
    height: 143px;
    text-align: center;
    font: normal normal normal 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#section-6 .card-3.txt.bot {
    top: 1132px;
    left: 1337px;
    width: 210px;
    height: 80px;
    text-align: center;
    font: normal normal normal 37px/42px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
}

#section-6 .card-4.out {
    top: 612px;
    left: 1680px;
    width: 300px;
    height: 703px;
    background: url('../assets/workplace-device-support_OVAL-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-4.in {
    top: 858px;
    left: 1706px;
    width: 245px;
    height: 438px;
    background: url('../assets/workplace-device-support _OVAL-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-4.icon {
    top: 869px;
    left: 1717px;
    width: 226px;
    height: 226px;
    background: url('../assets/icon-workplace-device-support.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#section-6 .card-4.txt.top {
    top: 674px;
    left: 1749px;
    width: 160px;
    height: 115px;
    text-align: center;
    font: normal normal normal 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#section-6 .card-4.txt.bot {
    top: 1111px;
    left: 1748px;
    width: 166px;
    height: 120px;
    text-align: center;
    font: normal normal normal 37px/42px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
}

#section-6 .card-5.out {
    top: 612px;
    left: 2070px;
    width: 300px;
    height: 703px;
    background: url('../assets/workplace-omnichannel_OVAL-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

#section-6 .card-5.in {
    top: 858px;
    left: 2091px;
    width: 257px;
    height: 438px;
    background: url('../assets/workplace-omnichannel_OVAL-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-5.icon {
    top: 868px;
    left: 2108px;
    width: 226px;
    height: 226px;
    background: url('../assets/icon-automated-omnichannel.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 5;
}

#section-6 .card-5.txt.top {
    top: 674px;
    left: 2130px;
    width: 182px;
    height: 143px;
    text-align: center;
    font: normal normal normal 26px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
}

#section-6 .card-5.txt.bot {
    top: 1111px;
    left: 2112px;
    width: 216px;
    height: 120px;
    text-align: center;
    font: normal normal normal 37px/42px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
}

#section-6 .card-6.out.top {
    top: 1378px;
    left: 510px;
    width: 1860px;
    height: 61px;
    background: url('../assets/security_OVAL.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-6.txt.top {
    top: 1386px;
    left: 1187px;
    width: 552px;
    height: 42px;
    text-align: center;
    font: normal normal normal 36px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
    text-transform: uppercase;
}

#section-6 .card-6.out.bot {
    top: 1461px;
    left: 510px;
    width: 1860px;
    height: 62px;
    background: url('../assets/nucleus_OVAL.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

#section-6 .card-6.txt.bot {
    top: 1469px;
    left: 1128px;
    width: 700px;
    height: 42px;
    text-align: center;
    font: normal normal normal 36px/40px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 5;
    text-transform: uppercase;
}

/* DESIGN PRINCIPLES */

#design .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#design .bg-1 {
    background: url('../assets/03-full-page.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#design .bg-2 {
    background: url('../assets/photo-03-HORIZONTAL.png') 0 0 no-repeat padding-box;
    top: -3px;
    left: 0;
    width: 2880px;
    height: 450px;
    position: absolute;
    z-index: 1;
}

#design .rec {
    background: url('../assets/color-bar-05.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -213px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#design .title {
    top: 170px;
    left: 148px;
    width: 774px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#design .h-line {
    top: 459px;
    left: 0;
    width: 2880px;
    height: 21px;
    background: url('../assets/line-long-horizontal.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/* CARDS */
#section-7 .card-0.icon-out-left {
    top: 664px;
    left: 639px;
    width: 1659px;
    height: 514px;
    background: url('../assets/hex-line-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#section-7 .card-0.icon-out-right {
    top: 666px;
    left: 640px;
    width: 1659px;
    height: 514px;
    background: url('../assets/hex-line-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 1;
}

#section-7 .card-1.icon {
    top: 736px;
    left: 710px;
    width: 327px;
    height: 373px;
    background: url('../assets/hex-photo-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-1.line {
    top: 1180px;
    left: 872px;
    width: 2px;
    height: 64px;
    background: url('../assets/Rectangle 1.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-1.out {
    top: 1256px;
    left: 704px;
    width: 339px;
    height: 112px;
    background: url('../assets/Rectangle 4.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-1.txt {
    top: 1268px;
    left: 757px;
    width: 234px;
    height: 83px;
    text-align: center;
    font: normal normal normal 34px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-7 .card-2.icon {
    top: 736px;
    left: 1107px;
    width: 327px;
    height: 373px;
    background: url('../assets/hex-photo-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-2.line {
    top: 1180px;
    left: 1269px;
    width: 2px;
    height: 64px;
    background: url('../assets/Rectangle 1.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-2.out {
    top: 1256px;
    left: 1100px;
    width: 339px;
    height: 112px;
    background: url('../assets/Rectangle 2.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-2.txt {
    top: 1268px;
    left: 1135px;
    width: 270px;
    height: 83px;
    text-align: center;
    font: normal normal normal 34px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-7 .card-3.icon {
    top: 736px;
    left: 1503px;
    width: 327px;
    height: 373px;
    background: url('../assets/hex-photo-03.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-3.line {
    top: 1180px;
    left: 1666px;
    width: 2px;
    height: 64px;
    background: url('../assets/Rectangle 1.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-3.out {
    top: 1256px;
    left: 1497px;
    width: 339px;
    height: 112px;
    background: url('../assets/Rectangle 2.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-3.txt {
    top: 1268px;
    left: 1578px;
    width: 178px;
    height: 83px;
    text-align: center;
    font: normal normal normal 34px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-7 .card-4.icon {
    top: 736px;
    left: 1901px;
    width: 327px;
    height: 373px;
    background: url('../assets/hex-photo-04.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-4.line {
    top: 1180px;
    left: 2063px;
    width: 2px;
    height: 64px;
    background: url('../assets/Rectangle 1.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-4.out {
    top: 1256px;
    left: 1894px;
    width: 339px;
    height: 112px;
    background: url('../assets/Rectangle 2.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
}

#section-7 .card-4.txt {
    top: 1268px;
    left: 1958px;
    width: 212px;
    height: 83px;
    text-align: center;
    font: normal normal normal 34px/44px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}


/* CLOSER LOOK */

#closer .demo {
    top: 79px;
    left: 234px;
    width: 2415px;
    height: 1473px;
    position: absolute;
    z-index: 5;
    object-fit: cover;
    display: block;
    box-sizing: border-box; /* Added for more predictable size calculations */

    /* Existing styles */
    border: 10px solid #28E6FF; /* Adjusted color */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

#closer .demo::before,
#closer .demo::after {
    content: "";
    position: absolute;
    background-color: #28E6FF; /* The desired color */
    z-index: -1; /* Place behind the main content */
}

/* Thin rectangle on the top and bottom */
#closer .demo::before {
    top: -20px; /* Adjust as needed */
    left: 10%; /* Adjust as needed */
    width: 80%; /* Adjust as needed */
    height: 10px; /* Adjust as needed */
}

/* Thin rectangle on the left and right sides */
#closer .demo::after {
    top: 10%; /* Adjust as needed */
    left: -20px; /* Adjust as needed */
    width: 10px; /* Adjust as needed */
    height: 80%; /* Adjust as needed */
}


#closer .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#closer .bg-1 {
    background: url('../assets/video-menu-background.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#closer .rec {
    background: url('../assets/color-bar-06.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -415px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#closer .title {
    top: 170px;
    left: 148px;
    width: 652px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

/* CAROUSEL */

.left {
    top: 540px;
    left: 79px;
    width: 960px;
    height: 540px;
    position: absolute;
    z-index: 2;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    opacity: 0.2;
}

.left-txt {
    top: 1104px;
    left: 182px;
    width: 700px;
    height: 29px;
    position: absolute;
    z-index: 2;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    opacity: 0.2;
}

.mid {
    top: 444px;
    left: 790px;
    width: 1300px;
    height: 730px;
    position: absolute;
    z-index: 3;
    opacity: 1;
}

.mid-txt {
    top: 1210px;
    left: 725px;
    width: 1500px;
    height: 70px;
    position: absolute;
    z-index: 3;
    text-align: center;
    font: normal normal normal 60px/70px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    opacity: 1;
}

.right {
    top: 540px;
    left: 1838px;
    width: 960px;
    height: 540px;
    position: absolute;
    z-index: 2;
    opacity: 0.2;
}

.right-txt {
    top: 1104px;
    left: 2020px;
    width: 700px;
    height: 29px;
    position: absolute;
    z-index: 2;
    text-align: center;
    font: normal normal normal 25px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    opacity: 0.2;
}

.left, .mid, .right, .left-txt, .mid-txt, .right-txt {
    transition: all 0.5s ease;
}

.not-allowed {
    cursor: not-allowed !important;
}

/* Additional or modified CSS for the carousel behavior */
.mid-txt, .left-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Optional */
}

.off-left {
    left: -960px;
    opacity: 0;
    transition: left 0.5s, opacity 0.5s;
}

.off-right {
    left: 3848px;
    opacity: 0;
    transition: left 0.5s, opacity 0.5s;
}

.exit-left {
    transform: translateX(-100%);
    transition: transform 500ms;
}

.exit-right {
    transform: translateX(100%);
    transition: transform 500ms;
}

.animate-out-left {
    transform: translateX(-100%);
    transition: transform 500ms;
}

.animate-out-right {
    transform: translateX(100%);
    transition: transform 500ms;
}

/* NEW */
.animate-off-left {
    transform: translateX(-150%);
    transition: transform 0.5s;
}

.animate-off-right {
    transform: translateX(150%);
    transition: transform 0.5s;
}

/* NEW END */
.off-left-animate {
    transform: translateX(-150%);
    transition: transform 0.5s;
}

.off-right-animate {
    transform: translateX(150%);
    transition: transform 0.5s;
}

/*#section-8 a {*/
/*    transition: left 0.6s, opacity 0.6s, top 0.6s, width 0.6s, height 0.6s;*/
/*}*/
#section-8 a {
    transition: all 0.5s ease-out;
}

#section-8 .card-1.icon {
    background: url('../assets/video-digital human.png') 0 0 no-repeat padding-box;
    background-size: cover;
}

#section-8 .card-2.icon {
    background: url('../assets/video-MOBILE.png') 0 0 no-repeat padding-box;
    background-size: cover;
}

#section-8 .card-3.icon {
    background: url('../assets/video-INTELLIGENT.png') 0 0 no-repeat padding-box;
    background-size: cover;
}

#section-8 .card-4.icon {
    background: url('../assets/video-STOREFRONT.png') 0 0 no-repeat padding-box;
    background-size: cover;
}

#section-8 .card-5.icon {
    background: url('../assets/video-ENDPOINT.png') 0 0 no-repeat padding-box;
    background-size: cover;
}

#section-8 .card-6.icon {
    background: url('../assets/video-COMMAND.png') 0 0 no-repeat padding-box;
    background-size: cover;
}

/* SUCCESS STORIES */

#success .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

#success .bg-1 {
    background: url('../assets/06-full-page.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 1;
}

#success .bg-2 {
    background: url('../assets/header-success-stories.png') 0 0 no-repeat padding-box;
    top: -3px;
    left: 0;
    width: 2880px;
    height: 450px;
    position: absolute;
    z-index: 1;
}

#success .rec {
    background: url('../assets/color-bar-05.png') 0 0 no-repeat padding-box;
    top: 110px;
    left: -363px;
    width: 1361px;
    height: 180px;
    position: absolute;
    z-index: 2;
}

#success .title {
    top: 170px;
    left: 148px;
    width: 774px;
    height: 116px;
    text-align: left;
    font: bold normal normal 100px/42px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#success .h-line {
    top: 459px;
    left: 0;
    width: 2880px;
    height: 21px;
    background: url('../assets/line-long-horizontal.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/* CARDS */
#section-9 .card-0.out-left {
    /*top: 591px;*/
    /*left: 996px;*/
    /*width: 499px;*/
    /*height: 851px;*/
    top: 591px;
    left: 992px;
    width: 499px;
    height: 851px;
    background: url('../assets/Ovao-01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
    cursor: default;
}

#section-9 .card-0.out-right {
    /*top: 591px;*/
    /*left: 1320px;*/
    /*width: 499px;*/
    /*height: 851px;*/
    top: 591px;
    left: 1316px;
    width: 499px;
    height: 851px;
    background: url('../assets/oval-02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 2;
    cursor: default;
}

/*.shift-0-left {*/
/*    top: 591px !important;*/
/*    left: 992px !important;*/
/*    width: 499px !important;*/
/*    height: 851px !important;*/
/*    transform: matrix(1, 0, 0, -1, 0, 0) !important;*/
/*    transition: 1s ease-in-out!important;*/
/*}*/

/*.shift-0-right {*/
/*    top: 591px !important;*/
/*    left: 1316px !important;*/
/*    width: 499px !important;*/
/*    height: 851px !important;*/
/*    transform: matrix(1, 0, 0, -1, 0, 0) !important;*/
/*    transition: 1s ease-in-out!important;*/
/*}*/

#section-9 .card-1.icon {
    /*top: 698px;*/
    /*left: 1330px;*/
    /*width: 88px;*/
    /*height: 43px;*/
    top: 715px;
    left: 1080px;
    width: 88px;
    height: 43px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

/*.shift-1-icon {*/
/*    top: 698px !important;*/
/*    left: 1088px !important;*/
/*    width: 88px !important;*/
/*    height: 43px !important;*/
/*}*/

#section-9 .card-1.out {
    /*top: 612px;*/
    /*left: 1256px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 612px;
    left: 1014px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-90.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
    display: inline-block; /* this makes the a tag behave like a block-level element, which allows us to apply width, height, and other properties */
    border-radius: 50%;
    overflow: hidden;
}

/*.shift-1-out {*/
/*    top: 612px !important;*/
/*    left: 1014px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-1.txt.top {
    top: 679px;
    left: 479px;
    width: 503px;
    height: 63px;
    text-align: right;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-1.txt.bot {
    top: 751px;
    left: 605px;
    width: 397px;
    height: 26px;
    text-align: right;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-2.icon {
    /*top: 693px;*/
    /*left: 1650px;*/
    /*width: 76px;*/
    /*height: 49px;*/
    top: 693px;
    left: 1410px;
    width: 76px;
    height: 49px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    background: url('../assets/icon-fulfilling.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

/*.shift-2-icon {*/
/*    top: 693px !important;*/
/*    left: 1410px !important;*/
/*    width: 76px !important;*/
/*    height: 49px !important;*/
/*}*/

#section-9 .card-2.out {
    /*top: 612px;*/
    /*left: 1581px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 612px;
    left: 1341px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-icon 01.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-2-out {*/
/*    top: 612px !important;*/
/*    left: 1341px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-2.txt.top {
    top: 679px;
    left: 1595px;
    width: 757px;
    height: 63px;
    text-align: left;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-2.txt.bot {
    top: 751px;
    left: 1615px;
    width: 397px;
    height: 26px;
    text-align: left;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-3.icon {
    /*top: 894px;*/
    /*left: 1232px;*/
    /*width: 119px;*/
    /*height: 43px;*/
    top: 910px;
    left: 1146px;
    width: 119px;
    height: 43px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

/*.shift-3-icon {*/
/*    top: 894px !important;*/
/*    left: 1151px !important;*/
/*    width: 119px !important;*/
/*    height: 43px !important;*/
/*}*/

#section-9 .card-3.out {
    /*top: 806px;*/
    /*left: 1175px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 806px;
    left: 1094px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-998.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-3-out {*/
/*    top: 806px !important;*/
/*    left: 1094px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-3.txt.top {
    top: 869px;
    left: 501px;
    width: 539px;
    height: 63px;
    text-align: right;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-3.txt.bot {
    top: 941px;
    left: 663px;
    width: 397px;
    height: 26px;
    text-align: right;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-4.icon {
    /*top: 889px;*/
    /*left: 1580px;*/
    /*width: 57px;*/
    /*height: 56px;*/
    top: 889px;
    left: 1501px;
    width: 57px;
    height: 56px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    background: url('../assets/icon-personalized.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 4;
}

/*.shift-4-icon {*/
/*    top: 889px !important;*/
/*    left: 1501px !important;*/
/*    width: 57px !important;*/
/*    height: 56px !important;*/
/*}*/

#section-9 .card-4.out {
    /*top: 807px;*/
    /*left: 1501px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 807px;
    left: 1422px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-icon 02.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-4-out {*/
/*    top: 807px !important;*/
/*    left: 1422px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-4.txt.top {
    top: 859px;
    left: 1671px;
    width: 715px;
    height: 63px;
    text-align: left;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-4.txt.bot {
    top: 931px;
    left: 1691px;
    width: 488px;
    height: 26px;
    text-align: left;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-5.icon {
    /*top: 1092px;*/
    /*left: 1168px;*/
    /*width: 88px;*/
    /*height: 55px;*/
    top: 1106px;
    left: 1240px;
    width: 88px;
    height: 55px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

/*.shift-5-icon {*/
/*    top: 1092px !important;*/
/*    left: 1248px !important;*/
/*    width: 88px !important;*/
/*    height: 55px !important;*/
/*}*/

#section-9 .card-5.out {
    /*top: 1004px;*/
    /*left: 1096px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 1004px;
    left: 1176px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-75.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-5-out {*/
/*    top: 1004px !important;*/
/*    left: 1176px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-5.txt.top {
    top: 1071px;
    left: 655px;
    width: 466px;
    height: 63px;
    text-align: right;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-5.txt.bot {
    top: 1143px;
    left: 754px;
    width: 397px;
    height: 26px;
    text-align: right;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-6.icon {
    /*top: 1092px;*/
    /*left: 1497px;*/
    /*width: 88px;*/
    /*height: 55px;*/
    top: 1107px;
    left: 1568px;
    width: 88px;
    height: 55px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

/*.shift-6-icon {*/
/*    top: 1092px !important;*/
/*    left: 1578px !important;*/
/*    width: 88px !important;*/
/*    height: 55px !important;*/
/*}*/

#section-9 .card-6.out {
    /*top: 1005px;*/
    /*left: 1422px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 1005px;
    left: 1503px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-50.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-6-out {*/
/*    top: 1005px !important;*/
/*    left: 1503px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-6.txt.top {
    top: 1053px;
    left: 1752px;
    width: 511px;
    height: 63px;
    text-align: left;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-6.txt.bot {
    top: 1125px;
    left: 1772px;
    width: 397px;
    height: 26px;
    text-align: left;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-7.icon {
    /*top: 1284px;*/
    /*left: 1092px;*/
    /*width: 88px;*/
    /*height: 43px;*/
    top: 1300px;
    left: 1318px;
    width: 88px;
    height: 43px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    /*background: url('../assets/icon-personalized.png') 0 0 no-repeat padding-box;*/
    position: absolute;
    z-index: 4;
}

/*.shift-7-icon {*/
/*    top: 1284px !important;*/
/*    left: 1323px !important;*/
/*    width: 88px !important;*/
/*    height: 43px !important;*/
/*}*/

#section-9 .card-7.out {
    /*top: 1197px;*/
    /*left: 1019px;*/
    /*width: 215px;*/
    /*height: 215px;*/
    top: 1197px;
    left: 1250px;
    width: 215px;
    height: 215px;
    background: url('../assets/circle-60.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-7-out {*/
/*    top: 1197px !important;*/
/*    left: 1250px !important;*/
/*    width: 215px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-7.txt.top {
    top: 1259px;
    left: 732px;
    width: 466px;
    height: 63px;
    text-align: right;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-7.txt.bot {
    top: 1331px;
    left: 821px;
    width: 397px;
    height: 26px;
    text-align: right;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-8.icon {
    /*top: 1284px;*/
    /*left: 1400px;*/
    /*width: 119px;*/
    /*height: 43px;*/
    top: 1300px;
    left: 1627px;
    width: 119px;
    height: 43px;
    text-align: center;
    font: normal normal normal 37px/12px HelveticaNeueLt;
    letter-spacing: 0;
    color: #F9F7D1;
    position: absolute;
    z-index: 4;
}

/*.shift-8-icon {*/
/*    top: 1284px !important;*/
/*    left: 1632px !important;*/
/*    width: 119px !important;*/
/*    height: 43px !important;*/
/*}*/

#section-9 .card-8.out {
    /*top: 1197px;*/
    /*left: 1344px;*/
    /*width: 217px;*/
    /*height: 215px;*/
    top: 1197px;
    left: 1574px;
    width: 217px;
    height: 215px;
    background: url('../assets/circle-995.png') 0 0 no-repeat padding-box;
    position: absolute;
    z-index: 3;
}

/*.shift-8-out {*/
/*    top: 1197px !important;*/
/*    left: 1574px !important;*/
/*    width: 217px !important;*/
/*    height: 215px !important;*/
/*}*/

#section-9 .card-8.txt.top {
    top: 1239px;
    left: 1829px;
    width: 541px;
    height: 63px;
    text-align: left;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 .card-8.txt.bot {
    top: 1311px;
    left: 1849px;
    width: 397px;
    height: 50px;
    text-align: left;
    font: normal normal normal 22px/24px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    /*text-transform: uppercase;*/
}

#section-9 span {
    color: #F9F7D1;
    font-weight: bolder;
}

.title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* SUCCESS STORIES MENU */

#successStories .bg {
    background: transparent url('../assets/BKGND-01-DWS-2880x1620.png') 0 0 no-repeat padding-box;
    top: 0;
    left: 0;
    width: 2880px;
    height: 1620px;
    position: absolute;
    z-index: 0;
}

.challenge-grow {
    top: 1151px !important;
    left: 510px !important;
    width: 315px !important;
    height: 97px !important;
}

.solution-grow {
    top: 1151px !important;
    left: 835px !important;
    width: 315px !important;
    height: 97px !important;
}

.outcome-grow {
    top: 1151px !important;
    left: 1160px !important;
    width: 315px !important;
    height: 97px !important;
}

.op-60 {
    opacity: .6;
}

#successStories .btn.success {
    background: url('../assets/button-success.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 1152px;
    left: 160px;
    width: 254px;
    height: 68px;
    position: absolute;
    z-index: 3;
}

#successStories .btn.challenge {
    background: url('../assets/button-challenge.png') 0 0 no-repeat padding-box;
    background-size: cover;
    /*top: 1151px;*/
    /*left: 510px;*/
    /*width: 315px;*/
    /*height: 97px;*/
    top: 1151px;
    left: 557px;
    width: 221px;
    height: 68px;
    position: absolute;
    z-index: 3;
}

#successStories .btn.solution {
    background: url('../assets/button-solution.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 1151px;
    left: 882px;
    width: 221px;
    height: 68px;
    position: absolute;
    z-index: 3;
}

#successStories .btn.outcome {
    background: url('../assets/button-outcome.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 1152px;
    left: 1208px;
    width: 221px;
    height: 68px;
    position: absolute;
    z-index: 3;
}

@keyframes growFromBottom {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

#successStories .challenge.line {
    background: url('../assets/line-challenge.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 972px;
    left: 668px;
    width: 2px;
    height: 160px;
    position: absolute;
    z-index: 3;

    /*transform-origin: bottom;*/
    /*animation: growFromBottom 1s forwards;*/
}

#successStories .solution.line {
    background: url('../assets/line-solution.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 999px;
    left: 993px;
    width: 2px;
    height: 133px;
    position: absolute;
    z-index: 3;
}

#successStories .outcome.line {
    background: url('../assets/line-outcome.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 979px;
    left: 1314px;
    width: 2px;
    height: 152px;
    position: absolute;
    z-index: 3;
}

#successStories span {
    color: #F9F7D1;
    font-weight: bold;
}

/* SECTION-10 */

/* CARD-1 */
#section-10 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-10 .card-bg {
    background: url('../assets/pic-case-study-BKGND-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-10 .title {
    top: 97px;
    left: 128px;
    width: 1613px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-10 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-01-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-10 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 538px;
    left: 557px;
    width: 873px;
    height: 408px;
    position: absolute;
    z-index: 2;
}

#section-10 .card-1.txt.pg-title {
    top: 585px;
    left: 575px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-10 .card-1.txt.pg {
    top: 646px;
    left: 621px;
    width: 741px;
    height: 263px;
    text-align: left;
    font: normal normal normal 28px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-10 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-01-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-10 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 430px;
    left: 557px;
    width: 873px;
    height: 560px;
    position: absolute;
    z-index: 2;
}

#section-10 .card-2.txt.pg-title {
    top: 477px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-10 .card-2.txt.pg {
    top: 523px;
    left: 621px;
    width: 735px;
    height: 471px;
    text-align: left;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-10 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-01-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-10 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 485px;
    left: 557px;
    width: 873px;
    height: 460px;
    position: absolute;
    z-index: 2;
}

#section-10 .card-3.txt.pg-title {
    top: 532px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-10 .card-3.txt.pg {
    top: 578px;
    left: 621px;
    width: 763px;
    height: 329px;
    text-align: left;
    font: normal normal normal 28px/30px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* SECTION-11 */

/* CARD-1 */
#section-11 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-11 .card-bg {
    background: url('../assets/pic-case-study-UCL.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-11 .title {
    top: 97px;
    left: 128px;
    width: 1513px;
    height: 78px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-11 .icon {
    top: 87px;
    left: 1138px;
    width: 360px;
    height: 106px;
    background: url('../assets/logo-ucl.png') 0 0 no-repeat padding-box;
    background-size: cover;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

#section-11 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-07-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-11 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 595px;
    left: 557px;
    width: 956px;
    height: 345px;
    position: absolute;
    z-index: 2;
}

#section-11 .card-1.txt.pg-title {
    top: 660px;
    left: 579px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-11 .card-1.txt.pg {
    top: 730px;
    left: 621px;
    width: 741px;
    height: 137px;
    text-align: left;
    font: normal normal normal 28px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-11 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-07-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-11 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 413px;
    left: 557px;
    width: 860px;
    height: 565px;
    position: absolute;
    z-index: 2;
}

#section-11 .card-2.txt.pg-title {
    top: 460px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-11 .card-2.txt.pg {
    top: 490px;
    left: 621px;
    width: 735px;
    height: 424px;
    text-align: left;
    font: normal normal normal 28px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-11 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-07-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-11 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    top: 392px;
    left: 556px;
    width: 860px;
    height: 575px;
    position: absolute;
    z-index: 2;
}

#section-11 .card-3.txt.pg-title {
    top: 439px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-11 .card-3.txt.pg {
    top: 480px;
    left: 621px;
    width: 763px;
    height: 466px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* SECTION-12 */

/* CARD-1 */
#section-12 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-12 .card-bg {
    background: url('../assets/pic-case-study-BKGND-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-12 .title {
    top: 97px;
    left: 128px;
    width: 1201px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-12 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-02-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-12 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 522px;
    left: 557px;
    width: 873px;
    height: 437px;
    position: absolute;
    z-index: 2;
}

#section-12 .card-1.txt.pg-title {
    top: 570px;
    left: 575px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-12 .card-1.txt.pg {
    top: 630px;
    left: 621px;
    width: 760px;
    height: 261px;
    text-align: left;
    font: normal normal normal 28px/34px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-12 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-02-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-12 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 420px;
    left: 557px;
    width: 873px;
    height: 570px;
    position: absolute;
    z-index: 2;
}

#section-12 .card-2.txt.pg-title {
    top: 467px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-12 .card-2.txt.pg {
    top: 513px;
    left: 621px;
    width: 735px;
    height: 411px;
    text-align: left;
    font: normal normal normal 28px/31px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-12 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-02-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-12 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 435px;
    left: 557px;
    width: 900px;
    height: 536px;
    position: absolute;
    z-index: 2;
}

#section-12 .card-3.txt.pg-title {
    top: 484px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-12 .card-3.txt.pg {
    top: 530px;
    left: 621px;
    width: 814px;
    height: 380px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

@keyframes fadeTo41 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.41;
    }
}

.fade-to-41 {
    animation: fadeTo41 1s forwards; /* or any other suitable duration */
}

/* SECTION-13 */

/* CARD-1 */
#section-13 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-13 .card-bg {
    background: url('../assets/pic-case-study-BKGND-06.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-13 .title {
    top: 97px;
    left: 128px;
    width: 1201px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-13 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-06-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-13 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 380px;
    left: 557px;
    width: 873px;
    height: 572px;
    position: absolute;
    z-index: 2;
}

#section-13 .card-1.txt.pg-title {
    top: 420px;
    left: 579px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-13 .card-1.txt.pg {
    top: 460px;
    left: 621px;
    width: 762px;
    height: 421px;
    text-align: left;
    font: normal normal normal 28px/34px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-13 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-06-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-13 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 383px;
    left: 557px;
    width: 873px;
    height: 612px;
    position: absolute;
    z-index: 2;
}

#section-13 .card-2.txt.pg-title {
    top: 430px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-13 .card-2.txt.pg {
    top: 460px;
    left: 621px;
    width: 770px;
    height: 458px;
    text-align: left;
    font: normal normal normal 28px/31px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-13 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-06-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-13 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 435px;
    left: 557px;
    width: 900px;
    height: 536px;
    position: absolute;
    z-index: 2;
}

#section-13 .card-3.txt.pg-title {
    top: 484px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-13 .card-3.txt.pg {
    top: 530px;
    left: 621px;
    width: 814px;
    height: 380px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* SECTION-14 */

/* CARD-1 */
#section-14 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-14 .card-bg {
    background: url('../assets/pic-case-study-BKGND-05.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-14 .icon {
    top: 115px;
    left: 1538px;
    width: 208px;
    height: 89px;
    background: url('../assets/logo-independent_health.png') 0 0 no-repeat padding-box;
    background-size: cover;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

#section-14 .title {
    top: 97px;
    left: 128px;
    width: 1201px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-14 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-03-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-14 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 700px;
    left: 557px;
    width: 873px;
    height: 250px;
    position: absolute;
    z-index: 2;
}

#section-14 .card-1.txt.pg-title {
    top: 747px;
    left: 579px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-14 .card-1.txt.pg {
    top: 808px;
    left: 621px;
    width: 741px;
    height: 101px;
    text-align: left;
    font: normal normal normal 28px/34px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-14 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-03-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-14 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 650px;
    left: 557px;
    width: 873px;
    height: 324px;
    position: absolute;
    z-index: 2;
}

#section-14 .card-2.txt.pg-title {
    top: 697px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-14 .card-2.txt.pg {
    top: 763px;
    left: 621px;
    width: 735px;
    height: 168px;
    text-align: left;
    font: normal normal normal 28px/31px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-14 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-03-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-14 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 435px;
    left: 557px;
    width: 900px;
    height: 536px;
    position: absolute;
    z-index: 2;
}

#section-14 .card-3.txt.pg-title {
    top: 484px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-14 .card-3.txt.pg {
    top: 530px;
    left: 621px;
    width: 814px;
    height: 380px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* SECTION-15 */

/* CARD-1 */
#section-15 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-15 .card-bg {
    background: url('../assets/pic-case-study-BKGND-05.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-15 .icon {
    top: 127px;
    left: 1490px;
    width: 286px;
    height: 75px;
    background: url('../assets/logo-jensen hughes.png') 0 0 no-repeat padding-box;
    background-size: cover;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

#section-15 .title {
    top: 97px;
    left: 128px;
    width: 1380px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-15 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-05-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-15 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 395px;
    left: 557px;
    width: 873px;
    height: 665px;
    position: absolute;
    z-index: 4;
}

#section-15 .card-1.txt.pg-title {
    top: 442px;
    left: 579px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 5;
}

#section-15 .card-1.txt.pg {
    top: 503px;
    left: 621px;
    width: 762px;
    height: 557px;
    text-align: left;
    font: normal normal normal 28px/34px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 5;
}

/* CARD-2 */

#section-15 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-05-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-15 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 443px;
    left: 557px;
    width: 873px;
    height: 552px;
    position: absolute;
    z-index: 2;
}

#section-15 .card-2.txt.pg-title {
    top: 490px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-15 .card-2.txt.pg {
    top: 556px;
    left: 621px;
    width: 753px;
    height: 397px;
    text-align: left;
    font: normal normal normal 28px/31px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-15 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-05-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-15 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 512px;
    left: 556px;
    width: 873px;
    height: 450px;
    position: absolute;
    z-index: 2;
}

#section-15 .card-3.txt.pg-title {
    top: 578px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-15 .card-3.txt.pg {
    top: 644px;
    left: 621px;
    width: 763px;
    height: 234px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* SECTION-16 */

/* CARD-1 */
#section-16 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-16 .card-bg {
    background: url('../assets/pic-case-study-BKGND-04.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-16 .icon {
    top: 127px;
    left: 1490px;
    width: 286px;
    height: 75px;
    background: url('../assets/logo-jensen hughes.png') 0 0 no-repeat padding-box;
    background-size: cover;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

#section-16 .title {
    top: 97px;
    left: 128px;
    width: 1390px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-16 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-04-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-16 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 455px;
    left: 557px;
    width: 873px;
    height: 500px;
    position: absolute;
    z-index: 2;
}

#section-16 .card-1.txt.pg-title {
    top: 505px;
    left: 579px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-16 .card-1.txt.pg {
    top: 540px;
    left: 621px;
    width: 741px;
    height: 305px;
    text-align: left;
    font: normal normal normal 28px/34px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-16 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-04-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-16 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 413px;
    left: 557px;
    width: 873px;
    height: 580px;
    position: absolute;
    z-index: 2;
}

#section-16 .card-2.txt.pg-title {
    top: 460px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-16 .card-2.txt.pg {
    top: 526px;
    left: 621px;
    width: 735px;
    height: 425px;
    text-align: left;
    font: normal normal normal 28px/31px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-16 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-04-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-16 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 382px;
    left: 556px;
    width: 873px;
    height: 600px;
    position: absolute;
    z-index: 2;
}

#section-16 .card-3.txt.pg-title {
    top: 429px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-16 .card-3.txt.pg {
    top: 495px;
    left: 621px;
    width: 763px;
    height: 466px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}


/* SECTION-17 */

/* CARD-1 */
#section-17 .v-line {
    top: -870.5px;
    left: 1826px;
    width: 21px;
    height: 2880px;
    background: url('../assets/line-long-vertical.png') 0 0 no-repeat padding-box;
    background-size: cover;
    position: absolute;
    z-index: 3;
}

#section-17 .card-bg {
    background: url('../assets/pic-case-study-BELGIAN.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 318px;
    left: -301px;
    width: 3200px;
    height: 868px;
    position: absolute;
    z-index: 1;
}

#section-17 .icon {
    top: 77px;
    left: 1351px;
    width: 314px;
    height: 120px;
    background: url('../assets/logo-onaf-ziek.png') 0 0 no-repeat padding-box;
    background-size: cover;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
}

#section-17 .title {
    top: 97px;
    left: 128px;
    width: 1390px;
    height: 119px;
    text-align: left;
    font: bold normal normal 55px/55px HelveticaNeueLt;
    letter-spacing: 2px;
    color: #F6F6F6;
    position: absolute;
    z-index: 3;
}

#section-17 .card-1.img {
    background: url('../assets/pic-case-study-RIGHT-08-01.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-17 .card-1.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(140, 91, 52, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 445px;
    left: 557px;
    width: 873px;
    height: 520px;
    position: absolute;
    z-index: 2;
}

#section-17 .card-1.txt.pg-title {
    top: 490px;
    left: 579px;
    width: 326px;
    height: 52px;
    text-align: center;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-17 .card-1.txt.pg {
    top: 540px;
    left: 621px;
    width: 757px;
    height: 295px;
    text-align: left;
    font: normal normal normal 28px/34px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-2 */

#section-17 .card-2.img {
    background: url('../assets/pic-case-study-RIGHT-08-02.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-17 .card-2.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(89, 47, 108, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 453px;
    left: 557px;
    width: 873px;
    height: 490px;
    position: absolute;
    z-index: 2;
}

#section-17 .card-2.txt.pg-title {
    top: 500px;
    left: 621px;
    width: 326px;
    height: 52px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-17 .card-2.txt.pg {
    top: 546px;
    left: 621px;
    width: 735px;
    height: 326px;
    text-align: left;
    font: normal normal normal 28px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}

/* CARD-3 */

#section-17 .card-3.img {
    background: url('../assets/pic-case-study-RIGHT-08-03.png') 0 0 no-repeat padding-box;
    background-size: cover;
    top: 0;
    left: 1850px;
    width: 1111px;
    height: 1620px;
    position: absolute;
    z-index: 4;
}

#section-17 .card-3.out {
    /*background-color: rgba(140, 91, 52, 0.60); CHALLENGE */
    /*background-color: rgba(89, 47, 108, 0.60); SOLUTION */
    /*background-color: rgba(110, 26, 58, 0.60); OUTCOME */
    background-color: rgba(110, 26, 58, 0.60);
    border: 3px solid #6495AF;
    filter: brightness(1); /* Removed the blur and drop-shadow for now */
    backdrop-filter: blur(10px); /* This will create the frosted glass effect */
    border-radius: 20px;
    background-size: cover;
    top: 427px;
    left: 556px;
    width: 873px;
    height: 550px;
    position: absolute;
    z-index: 2;
}

#section-17 .card-3.txt.pg-title {
    top: 484px;
    left: 621px;
    width: 201px;
    height: 47px;
    text-align: left;
    font: bold normal normal 40px/32px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #F9F7D1;
    text-transform: uppercase;
    position: absolute;
    z-index: 3;
}

#section-17 .card-3.txt.pg {
    top: 530px;
    left: 621px;
    width: 763px;
    height: 341px;
    text-align: left;
    font: normal normal normal 28px/33px HelveticaNeueLt;
    letter-spacing: 1px;
    color: #FFFFFF;
    /*text-transform: uppercase;*/
    position: absolute;
    z-index: 3;
}