@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(to bottom, rgba(0, 1, 22, 0.7), rgba(0, 1, 22, 0.7)), url('../images/Gallery/1.jpg');
    /* Change this to your image path */
    background-size: cover;
    /* Cover the entire viewport */
    background-attachment: fixed;
    /* Fix the background image */
    background-position: center;
    /* Center the background image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
}

.CSRContainer {
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-evenly;
    width: 95%;
    margin: 50px auto;
}

.containerr {
    width: 1000px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #0c4062, #008dda);
    padding: 4rem 5rem;
    position: relative;
    display: flex;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    -ms-border-radius: 25px !important;
    -o-border-radius: 25px !important;
}

.textblock .title {
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    margin-top: 30px;
    margin-bottom: 1.5rem;
    font-size: 30px;
}

.textblock {
    font-family: "Poppins", system-ui;
    font-weight: 400;
    font-style: normal;

}

.imageContainer {
    margin: auto;
    width: 65%;
}

.imageContainer .carousel-inner {
    border-radius: 35px !important;
    -webkit-border-radius: 35px !important;
    -moz-border-radius: 35px !important;
    -ms-border-radius: 35px !important;
    -o-border-radius: 35px !important;
    background: linear-gradient(to top, #000, #008dda, #0c4062);
    box-shadow: 4px 4px 8px rgba(23, 99, 146, 0.5);

}

.carousel-item .img1 {
    width: 65% !important;
    margin: auto;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    -ms-border-radius: 25px !important;
    -o-border-radius: 25px !important;
}

.carousel-inner h5 {
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(to left, #000, #008dda, #0c4062);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    width: fit-content;
    margin: auto;
    padding: 10px;
    font-size: 14px;
}

.textblock .subtitle {
    text-align: left;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1.8rem;
}

.textblock p {
    justify-content: center;
    margin-bottom: 1.3rem;
    color: #fff;
    display: flex;
    flex-direction: column;
}


.CSRContainer2 {
    margin: 0;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #0c4062, #008dda);

}

.containerr2 {
    width: 60%;
    margin: auto;
    height: fit-content;
    background-color: #fff;
    position: relative;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    max-width: 1500px;
    margin: auto;
}

.textblock2 .title2 {
    text-align: center;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 1.5rem;
    font-size: 30px;
}

.textblock2 {
    font-family: "Poppins", system-ui;
    font-weight: 400;
    font-style: normal;
    padding: 40px 80px;
}

.textblock2 .subtitle2 {
    text-align: left;
    font-size: 1.2rem;
    margin-bottom: 1.8rem;
}

.textblock2 p {
    margin-bottom: 1.3rem;
}

.listTrain {
    list-style: circle;
}

.listTrain li {
    color: #fff;
    text-wrap: wrap;
    width: fit-content;
}


.bold {
    font-weight: 500;
    display: contents;
}

@media only screen and (max-width:992px) {

    .wrapper,
    .wrapper2 {
        display: none !important;
    }

    .containerr,
    .containerr2,
    .containerr3,
    .containerrL {
        width: 100% !important;
    }

    .containerr .textblock,
    .containerr2 .textblock2,
    .containerrL .textblockL {
        width: 100% !important;
    }

    .containerr3 .textblock3 p {
        margin-left: 0 !important;
    }

    .containerr .textblock p,
    .containerr2 .textblock2 p,
    .containerr3 .textblock3 p,
    .containerr2 .textblock2 ul li,
    .containerr3 .textblock3 ul li,
    .containerrL .textblockL ul li,
    .containerrL .textblockL p {
        font-size: 100%;
        text-wrap: wrap;
        width: fit-content;
    }

    .containerr2 .textblock2 {
        width: 100%;
        position: relative;
        left: 0;

    }

    .cube,
    .cube2 {
        display: none;
    }
}

.main {
    width: min(1200px, 90vw);
    margin: auto;
}

.slider {
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(to right,
            transparent,
            #000 10% 90%,
            transparent);
}

.slider .list {
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
    align-items: center;
    justify-content: center;
}

.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc((10s / var(--quantity)) * (var(--position) - 1) - 10s) !important;
}

.slider .list .item img {
    width: 100%;
    height: 200px;
    background-color: #FFF;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

@keyframes autoRun {
    from {
        left: 100%;
    }

    to {
        left: calc(var(--width) * -1);
    }
}

.slider:hover .item {
    animation-play-state: paused !important;
    filter: grayscale(1);
}

.slider .item:hover {
    filter: grayscale(0);
}

.slider[reverse="true"] .item {
    animation: reversePlay 10s linear infinite;
}

@keyframes reversePlay {
    from {
        left: calc(var(--width) * -1);
    }

    to {
        left: 100%;
    }
}

/*3D Slider*/
.sliderContainer {
    margin: 0;
    padding: 0;
}

.sliderContainer iframe {
    width: 100vw;
    height: 60vw;
}

@media only screen and (max-width:500px) {

    .trainContainer .traincontainerr .textblock p,
    .trainContainer .traincontainerr .trainContentList li {
        width: 100%;
        font-size: 80%;

    }

    .containerr .textblock p,
    .containerr2 .textblock2 p,
    .containerr2 .textblock2 ul li,
    .containerrL .textblockL ul li,
    .containerrL .textblockL p {
        font-size: 80%;
    }

    .containerr .textblock .title,
    .containerr2 .textblock2 .title2 {
        font-size: 100%;
    }

    .containerr .textblock .subtitle,
    .containerr2 .textblock2 .subtitle2 {
        font-size: 90%;
    }
}

.cube {
    width: 50%;
    position: absolute;
    top: 25%;
    right: -10%;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(30deg);
    animation: rotateCube 10s infinite linear;
    -webkit-animation: rotateCube 10s infinite linear;
}

.face {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

/* Front face */
.front {
    transform: rotateY(0deg) translateZ(150px);
    background: url("../images/Gallery/1.jpg");
    background-size: cover;
    -webkit-transform: rotateY(0deg) translateZ(150px);
    -moz-transform: rotateY(0deg) translateZ(150px);
    -ms-transform: rotateY(0deg) translateZ(150px);
    -o-transform: rotateY(0deg) translateZ(150px);
}

/* Back face */
.back {
    transform: rotateY(180deg) translateZ(150px);
    background: url("../images/Gallery/2.jpg");
    background-size: cover;
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    -ms-transform: rotateY(180deg) translateZ(150px);
    -o-transform: rotateY(180deg) translateZ(150px);
}

/* Left face */
.left {
    transform: rotateY(-90deg) translateZ(150px);
    background: url("../images/Gallery/3.jpg");
    background-size: cover;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    -ms-transform: rotateY(-90deg) translateZ(150px);
    -o-transform: rotateY(-90deg) translateZ(150px);
}

/* Right face */
.right {
    transform: rotateY(90deg) translateZ(150px);
    background: url("../images/Gallery/4.jpg");
    background-size: cover;
    -webkit-transform: rotateY(90deg) translateZ(150px);
    -moz-transform: rotateY(90deg) translateZ(150px);
    -ms-transform: rotateY(90deg) translateZ(150px);
    -o-transform: rotateY(90deg) translateZ(150px);
}

/* Top face */
.top {
    transform: rotateX(90deg) translateZ(150px);
    background: url("../images/Gallery/5.jpg");
    background-size: cover;
    -webkit-transform: rotateX(90deg) translateZ(150px);
    -moz-transform: rotateX(90deg) translateZ(150px);
    -ms-transform: rotateX(90deg) translateZ(150px);
    -o-transform: rotateX(90deg) translateZ(150px);
}

/* Bottom face */
.bottom {
    transform: rotateX(-90deg) translateZ(150px);
    background-color: transparent;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
    -moz-transform: rotateX(-90deg) translateZ(150px);
    -ms-transform: rotateX(-90deg) translateZ(150px);
    -o-transform: rotateX(-90deg) translateZ(150px);
}

.cube2 {
    width: 50%;
    position: absolute;
    top: 25%;
    left: -10%;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(30deg);
    animation: rotateCube 10s infinite linear;
    -webkit-animation: rotateCube 10s infinite linear;
}

.face2 {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

/* Front face */
.front2 {
    transform: rotateY(0deg) translateZ(150px);
    background: url("../images/Gallery/1.jpg");
    background-size: cover;
    -webkit-transform: rotateY(0deg) translateZ(150px);
    -moz-transform: rotateY(0deg) translateZ(150px);
    -ms-transform: rotateY(0deg) translateZ(150px);
    -o-transform: rotateY(0deg) translateZ(150px);
}

/* Back face */
.back2 {
    transform: rotateY(180deg) translateZ(150px);
    background: url("../images/Gallery/2.jpg");
    background-size: cover;
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    -ms-transform: rotateY(180deg) translateZ(150px);
    -o-transform: rotateY(180deg) translateZ(150px);
}

/* Left face */
.left2 {
    transform: rotateY(-90deg) translateZ(150px);
    background: url("../images/Gallery/3.jpg");
    background-size: cover;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    -ms-transform: rotateY(-90deg) translateZ(150px);
    -o-transform: rotateY(-90deg) translateZ(150px);
}

/* Right face */
.right2 {
    transform: rotateY(90deg) translateZ(150px);
    background: url("../images/Gallery/4.jpg");
    background-size: cover;
    -webkit-transform: rotateY(90deg) translateZ(150px);
    -moz-transform: rotateY(90deg) translateZ(150px);
    -ms-transform: rotateY(90deg) translateZ(150px);
    -o-transform: rotateY(90deg) translateZ(150px);
}

/* Top face */
.top2 {
    transform: rotateX(90deg) translateZ(150px);
    background: url("../images/Gallery/5.jpg");
    background-size: cover;
    -webkit-transform: rotateX(90deg) translateZ(150px);
    -moz-transform: rotateX(90deg) translateZ(150px);
    -ms-transform: rotateX(90deg) translateZ(150px);
    -o-transform: rotateX(90deg) translateZ(150px);
}

/* Bottom face */
.bottom2 {
    transform: rotateX(-90deg) translateZ(150px);
    background-color: transparent;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
    -moz-transform: rotateX(-90deg) translateZ(150px);
    -ms-transform: rotateX(-90deg) translateZ(150px);
    -o-transform: rotateX(-90deg) translateZ(150px);
}

/* Animation to rotate the cube */
@keyframes rotateCube {
    from {
        transform: rotateX(-30deg) rotateY(30deg);
    }

    to {
        transform: rotateX(-30deg) rotateY(390deg);
        -webkit-transform: rotateX(-30deg) rotateY(390deg);
        -moz-transform: rotateX(-30deg) rotateY(390deg);
        -ms-transform: rotateX(-30deg) rotateY(390deg);
        -o-transform: rotateX(-30deg) rotateY(390deg);
    }
}

.trainContainer {
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-evenly;
    width: 95%;
    margin: 50px auto;
}

.CSRContainerL {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.containerrL {
    width: 1000px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #0c4062, #008dda);
    padding: 4rem 5rem;
    position: relative;
    display: flex;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    -ms-border-radius: 25px !important;
    -o-border-radius: 25px !important;
}

.textblockL .title {
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    margin-top: 30px;
    margin-bottom: 1.5rem;
    font-size: 30px;
}

.textblockL {
    font-family: "Poppins", system-ui;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}

.wrapper {
    display: block;
    width: 400px;
    height: 400px;
    position: absolute;
    right: -20% !important;
    top: 10% !important;
}

.wrapper img {
    max-width: 350px !important;
    background-color: #FFF;
    max-height: 350px !important;
}

.wrapper2 {
    display: block;
    width: 400px;
    height: 400px;
    position: absolute;
    right: -20% !important;
    top: 10% !important;
}

.wrapper2 img {
    max-width: 350px !important;
    background-color: #FFF;
    max-height: 350px !important;
}

.textblockL .subtitle {
    text-align: left;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1.8rem;
}

.textblockL p {
    justify-content: center;
    margin-bottom: 1.3rem;
    color: #fff;
    display: flex;
    flex-direction: column;
}

section.charts {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1500px;
    margin: auto;
}

/* Individual Chart Container */
section.charts div {
    background-color: #0000007e;
    border-radius: 12px;
    padding: 20px;
    width: 45%;
    /* Responsive width */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section.charts div:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Chart Title Styling */
section.charts div p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
}

/* Canvas Styling */
section.charts canvas {
    width: 100% !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    section.charts {
        flex-direction: column;
        padding: 20px;
    }

    section.charts div {
        width: 100%;
    }

    section.charts canvas {
        height: 250px !important;
    }
}

.CSRContainer3 {
    margin-top: 50px;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #0c4062, #008dda);
    border-bottom: #ffffffa3 5px solid;
}

.containerr3 {
    width: 60%;
    margin: auto;
    background-color: #fff;
    position: relative;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    max-width: 1500px;
    margin: auto;
}

.textblock3 .title3 {
    text-align: center;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 1.5rem;
    font-size: 30px;
}

.textblock3 {
    font-family: "Poppins", system-ui;
    font-weight: 400;
    font-style: normal;
    padding: 40px 80px;
}

.textblock3 .subtitle3 {
    text-align: left;
    font-size: 1.2rem;
    margin-bottom: 1.8rem;
    color: #7e7f82;
}

.textblock3 p {
    margin-bottom: 1.3rem;
}

.titleTrain {
    background: transparent;
    padding: 0;
    margin: -150px 0 0 0 !important;
}

.trainContainerr div {
    width: 30%;
}

.traincontainer div {
    width: 100%;
}

.traincontainerr {
    width: 70%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #0c4062, #008dda);
    padding: 4rem 5rem;
    position: relative;
    display: flex;
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    -ms-border-radius: 25px !important;
    -o-border-radius: 25px !important;
}

.trainContentList {
    display: flex;
    justify-content: flex-start;
}

.banner-leganCSR {
    font-size: 30px;
    font-weight: 300;
    color: #fff;
    text-align: left;
    margin-left: 20%;
    font-family: "Playwrite CU", cursive;
    font-optical-sizing: auto;
    font-style: normal;
}

@media(max-width:1300px) {
    .titleTrain {
        margin: -100px 0 0 0 !important;
    }

    .trainContentList {
        flex-wrap: wrap;
    }
}

@media(max-width:1150px) {
    .trainContentList {
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }

    .trainContainer {
        flex-wrap: wrap;
    }

    .traincontainerr {
        width: 100%
    }
}

@media (max-width:850px) {
    .trainContentList {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .listTrain li {
        text-wrap: wrap;
    }
}

@media (max-width:570px) {
    .titleTrain {
        margin: 0 0 0 0 !important;
    }

    .banner-leganCSR {
        font-size: 18px !important;
    }
}

.vibrate-container {
    display: inline-block;
    overflow: hidden;
}

.vibrate-image {
    display: block;
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}

.vibrate-image:hover {
    animation: advanced-smooth-vibrate 1s ease-in-out;
    -webkit-animation: advanced-smooth-vibrate 1s ease-in-out;
}

@keyframes advanced-smooth-vibrate {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(-2px, 2px) rotate(-1deg) scale(1.02);
    }

    50% {
        transform: translate(2px, -2px) rotate(1deg) scale(1.01);
    }

    75% {
        transform: translate(-2px, -2px) rotate(-1deg) scale(1.02);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}