.animation-section #canvas-container {
    width: 100vw;
    height: 730PX;
    position: relative;
}

.animation-section .case-studies-ui {
    width: calc(100vw - 160px);
    margin: 0 auto;
}




.animation-section canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 730px !important;
    -webkit-tap-highlight-color: transparent;
    /* remove tap highlight */
    -webkit-user-select: none;
    /* prevent selection */
    user-select: none;
    outline: none;
    /* remove focus outline */
}

.animatio-option2 {
    PADDING-BOTTOM: 200PX;
    POSITION: RELATIVE;
    padding: 0;
    padding-bottom: 190px;
    padding-top: 88px;
}

.animatio-option2 .left-div {
    position: absolute;
    margin: 0;
    margin-left: 40px;
    bottom: 18px;
    width: 100%;
}

.animatio-option2.top-section h2 {
    width: 100%;
}

.career-page .animatio-option2 .left-div,
.animatio-option2 .left-div.bottom-placement {
    bottom: 50px;
}

@media (max-width: 1536px) {
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        width: 100%;
        min-width: 100%;
        height: 560px !important;
    }
    .case-studies-page .animation-section #canvas-container,
    .case-studies-page .animation-section #canvas-container canvas,
    .aboutpage .animation-section #canvas-container,
    .aboutpage .animation-section #canvas-container canvas {
        height: 590px !important;
    }
   
    .homepage .animation-section #canvas-container,
    .homepage .animation-section #canvas-container canvas {
        height: 640px !important;
    }
    .case-studies-animation.animation-section #canvas-container canvas {
        height: 538px !important;
    }
    .animatio-option2 .left-div {
        bottom: 55px;
    }
    .animatio-option2 .left-div.bottom-placement {
        bottom: 90px;
    }
}

@media (max-width: 1366px) {
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        height: 480px !important;
    }
    .case-studies-page .animation-section #canvas-container,
    .case-studies-page .animation-section #canvas-container canvas,
    .aboutpage .animation-section #canvas-container,
    .aboutpage .animation-section #canvas-container canvas {
        height: 520px !important;
    }
    .homepage .animation-section #canvas-container,
    .homepage .animation-section #canvas-container canvas {
        height: 610px !important;
    }
}

@media (max-width: 1279px) {
    .case-studies-ui .d-flex {
        display: grid !important;
    }
    .case-studies-ui .left-div {
        order: 2;
        width: 100% !important;
        padding: 52px 52px 120px;
        margin: 0;
    }
    .case-studies-ui .left-div p {
        margin-bottom: 0 !important;
    }
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        width: 100%;
        /* height: 520px !important; */
    }
    .animatio-option2 .left-div {
        position: unset;
    }
    .animation-section .case-studies-ui {
        width: 100%;
        margin: 0 auto;
    }
    .animation-section {
        padding-right: 0 !important;
    }
}

@media (max-width: 1280px) {
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        height: 520px !important;
    }
    .animatio-option2 {
        padding-bottom: 0px;
    }
    .animatio-option2.header-animation-section {
        padding-bottom: 0px;
    }
}

@media (max-width: 1199px) {
    .case-studies-ui .left-div {
        padding: 32px 84px 80px;
    }
    .homepage .animation-section #canvas-container,
    .homepage .animation-section #canvas-container canvas {
        height: 485px !important;
    }
    .case-studies-page .animation-section #canvas-container,
    .case-studies-page .animation-section #canvas-container canvas,
    .aboutpage .animation-section #canvas-container,
    .aboutpage .animation-section #canvas-container canvas {
        height: 605px !important;
    }
}

@media (max-height: 820px) and (max-width: 1199px) {
    .homepage .animation-section #canvas-container,
    .homepage .animation-section #canvas-container canvas {
        height: 370px !important;
    }
    .case-studies-page .animation-section #canvas-container,
    .case-studies-page .animation-section #canvas-container canvas,
    .aboutpage .animation-section #canvas-container,
    .aboutpage .animation-section #canvas-container canvas,
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        height: 390px !important;
    }
}

@media (max-width: 991px) {
    
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        height: 600px !important;
    }
}

@media (max-width: 767px) {
    .case-studies-ui .left-div {
        padding: 32px;
        margin-top: -136px;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 140px;
    }
    .header-animation-section .case-studies-ui .left-div {
        margin-bottom: 86px;
    }
    .homepage .animation-section #canvas-container,
    .homepage .animation-section #canvas-container canvas {
        height: 440px !important;
    }
    .animation-section #canvas-container,
    .animation-section #canvas-container canvas {
        height: 540px !important;
    }
    .case-studies-page .animation-section #canvas-container,
    .case-studies-page .animation-section #canvas-container canvas,
    .aboutpage .animation-section #canvas-container,
    .aboutpage .animation-section #canvas-container canvas {
        height: 540px !important;
    }
    .animatio-option2.top-section h2 br {
        display: none;
    }
}

#animate-section {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#animate-section.visible {
    opacity: 1;
}