* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.imgContainer{
    z-index: 1;
    width: 180px;
    height: 180px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;      
    background-color: #fff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.imgContainer img{
    width: 100px;
}
#chart-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: url(https://www.cranerailclips.com/wp-content/uploads/2025/04/index_05_01.jpg);
    background-size: cover;
    background-repeat: no-repeat !important;
}
.innerChartContainerContent{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.leftSideChartContent{
    position: absolute;
    left: 2%; bottom: 0%;
}
.rightSideChartContent{
    position: absolute;
    left: 70%; bottom: 100%;
}
.bottomSideChartContent{
    position: absolute;
    left: 35%; margin-top: 250px;
}

.leftSideChartContent h1,
.rightSideChartContent h1,
.bottomSideChartContent h1{
    color: #fff;
    font-size: 24px;
}
.leftSideChartContent p,
.rightSideChartContent p,
.bottomSideChartContent p{
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(211, 211, 211, 0.63);
}


.leftSideAnimationContent{
    position: absolute;
    left: -75%; padding-top: 10px;
}
.leftSideAnimationImgPlucIcon{
    display: flex;
    align-items: center;
}
.leftSideAnimationContent .line{
    width: 200px;
    height: 2px;
    z-index: -1;
    background-color: #DA3D25;
}
.leftSideAnimationContent p{
    width: 20%;
    color: gray;
    font-size: 14px;
    padding-top: 10px;
}
.leftSideAnimationContent a{
    opacity: 0;
    color: #DA3D25;
    pointer-events: none;
    text-decoration: none;
    display: inline-block;
    transition: all 1s ease;
    transform: translateY(20px);
}
.leftSideAnimationContent:hover a{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    text-decoration: underline;
}


.rightSideAnimationContent{
    position: absolute;
    right: -65%; bottom: 20px;
}
.rightSideAnimationImgPlucIcon{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.rightSideAnimationContent .line{
    width: 200px;
    height: 2px;    
    z-index: -1;
    background-color: #E35A45;
}
.rightSideOtherContent{
    position: absolute;
    left: 80%;
}
.rightSideAnimationContent p{
    width: 150% !important;
    color: gray;
    font-size: 14px;
}
.rightSideAnimationContent a{
    font-size: 14px;
    opacity: 0;
    color: #DA3D25;
    pointer-events: none;
    text-decoration: none;
    display: inline-block;
    transition: all 1s ease;
    transform: translateY(20px);
}
.rightSideAnimationContent:hover a{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    text-decoration: underline;
}


.bottomSideAnimationContent{
    margin-top: 80px;
    position: absolute;
    left: 70%; top: 100%;
}
.bottomSideAnimationImgPlucIcon{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.bottomSideAnimationContent .line{
    width: 200px;
    height: 2px;    
    z-index: -1;
    background-color: #FF7C66;
}
.bottomSideOtherContent{
    position: absolute;
    right: -40%;
}
.bottomSideAnimationContent p{
    width: 50%;
    color: gray;
    font-size: 14px;
    margin: 0;
}
.bottomSideAnimationContent a{
    opacity: 0;
    color: #DA3D25;
    pointer-events: none;
    text-decoration: none;
    display: inline-block;
    transition: all 1s ease;
    transform: translateY(20px);
}
.bottomSideAnimationContent:hover a{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    text-decoration: underline;
}


.innerChartContainerContent img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}


.leftSideAnimationContent > div{
    visibility: hidden;
}
.leftSideChartContent h1,
.leftSideChartContent p{
    visibility: hidden;
}
.rightSideChartContent h1,
.rightSideChartContent p{
    visibility: hidden;
}
.bottomSideChartContent h1,
.bottomSideChartContent p{
    visibility: hidden;
}


.leftSideAnimationImgPlucIcon svg{
    width: 80px;
    height: 80px;
    padding: 15px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.rightSideAnimationImgPlucIcon svg{
    width: 80px;
    height: 80px;
    padding: 15px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}
.bottomSideAnimationImgPlucIcon svg{
    width: 80px;
    height: 80px;
    padding: 15px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}
svg path{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 3s ease-in-out;
}
.leftSideAnimationContent:hover svg{
    opacity: 1;
    transform: scale(1.2);
}
.leftSideAnimationContent:hover svg path{
    animation: draw 3s ease-in-out forwards;
}
.rightSideAnimationContent:hover svg{
    opacity: 1;
    transform: scale(1.2);
}
.rightSideAnimationContent:hover svg path{
    animation: draw 3s ease-in-out forwards;
}
.bottomSideAnimationContent:hover svg{
    opacity: 1;
    transform: scale(1.2);
}
.bottomSideAnimationContent:hover svg path{
    animation: draw 3s ease-in-out forwards;
}
@keyframes draw{
    0%{
        stroke-dashoffset: 1000;
    }
    100%{
        stroke-dashoffset: 0;
    }
}
svg path:nth-child(1){
    animation-delay: 0s;
}
svg path:nth-child(2){
    animation-delay: 1s;
}
svg path:nth-child(3){
    animation-delay: 1s;
}
svg path:nth-child(4){
    animation-delay: 1s;
}
svg path:nth-child(5){
    animation-delay: 1s;
}
svg path:nth-child(6){
    animation-delay: 1s;
}
svg path:nth-child(7){
    animation-delay: 1.2s;
}
svg path:nth-child(8){
    animation-delay: 1.4s;
}
svg path:nth-child(9){
    animation-delay: 1.6s;
}
svg path:nth-child(10){
    animation-delay: 1.8s;
}


/**  Media Query */


@media (max-width:981px){
    .imgContainer{
        width: 100px;
        height: 100px;
    }
    .imgContainer img{
        width: 70px;
    }
    .leftSideChartContent h1,
    .rightSideChartContent h1,
    .bottomSideChartContent h1{
        font-size: 14px;
}
    .leftSideChartContent p,
    .rightSideChartContent p,
    .bottomSideChartContent p{
        font-size: 10px;

}
    .leftSideChartContent{
        left: -20%;
    }
    .rightSideChartContent{
        left: 85%;
    }
    .bottomSideChartContent{
        margin-top: 150px;
    }
    .bottomSideOtherContent{
        left: 70%;
    }
    .line{
        display: none;
    }
    .leftSideAnimationContent{
        top: 100%; left: -70%;
        width: 50%;
        margin-top: 150px;
    }
    .rightSideAnimationContent{
        top: 100%; right: 40%;
        margin-top: 170px;
    }
    .leftSideAnimationContent p,
    .rightSideAnimationContent p,
    .bottomSideAnimationContent p{
        width: 70%;
        padding: 0;
        font-size: 10px;
    }
    .rightSideOtherContent{
        left: 20%;
    }
    .bottomSideAnimationContent{
        width: 50%;
        top: 100%; left: 90%;
        margin-top: 150px;
    }
    .bottomSideOtherContent{
        left: 30%;
    }
    .leftSideAnimationContent a,
    .rightSideAnimationContent a,
    .bottomSideAnimationContent a{
        font-size: 10px;
    }
}
@media (min-width:1300px) and (max-width:1440px){
    .leftSideChartContent{
        left: 0%;
    }
    .rightSideChartContent{
        left: 72%;
    }
    .leftSideAnimationContent{
        left: -70%;
    }
    .rightSideAnimationContent{
        right: -65%;
    }
    .bottomSideChartContent{
        left: 43%;
    }
    .bottomSideAnimationContent{
        left: 80%;
        margin-top: 140px;
    }
}
@media (min-width:1441px) and (max-width:1700px){
    .leftSideChartContent{
        left: 0%;
    }
    .rightSideChartContent{
        left: 72%;
    }
    .leftSideAnimationContent{
        left: -70%;
    }
    .rightSideAnimationContent{
        right: -65%;
    }
    .bottomSideChartContent{
        left: 43%;
    }
    .bottomSideAnimationContent{
        left: 90%;
        margin-top: 140px;
    }
}
@media (min-width:1701px) and (max-width:2100px){
    .leftSideChartContent{
        left: 6%;
    }
    .rightSideChartContent{
        left: 72%;
    }
    .leftSideAnimationContent,
    .rightSideAnimationContent{
        left: -65%;
    }
    .bottomSideAnimationContent{
        left: 90%;
        margin-top: 150px;
    }
}
@media (min-width:2101px){
    .leftSideChartContent{
        left: 14%;
    }
    .rightSideChartContent{
        left: 66%;
    }
    .leftSideAnimationContent{
        left: -60%;
    }
    .rightSideAnimationContent{
        right: -60%;
    }
    .bottomSideAnimationContent{
        left: 80%;
        margin-top: 250px;
    }
}