body {
        font-family: 'Arial', sans-serif;
        background-color: #f8f9fa;
    }
    
    .nav-test {
        font-size: small;
        justify-content: center;
        letter-spacing: 0.1rem;
        font-weight: 600;
        font-family: 'Gill Sans';
    }
    
    .video-container video {
        top: 0;
        left: 0;
        width: 100%;
        height: 35rem;
        margin-bottom: -8px;
        padding: 0;
        object-fit: cover;
    }
    
    .navbar {
        position: sticky;
        z-index: 10;
        top: 0;
    }
    
    nav {
        margin-top: -1rem !important;
        background-color: #fff !important;
    }
    
    .navbar-light .navbar-nav .nav-link {
        color: black !important;
    }
    
    .nav-image {
        width: 5rem;
        margin-left: -15px;
        height: 5rem;
    }
    /* video */
    
    #myVideo {
        position: relative;
        right: 0;
        bottom: 2px;
        min-width: 100%;
        min-height: 100%;
        background-size: cover;
        background: no-repeat center center;
    }
    
    .header-section {
        position: absolute;
        bottom: -5rem;
        display: block;
        margin-left: auto;
        width: 100%;
        height: 100%;
    }
    
    .kint-color {
        background-color: #6b9cf682;
        width: 47%;
        padding-right: 32px;
        height: 32.3rem;
        margin-left: 3px;
    }
    
    .nav-item {
        margin-right: 0.5rem;
        padding: 5px;
    }
    
    .nav-item a {
        position: relative;
    }
    
    .nav-item a::after {
        content: '';
        position: absolute;
        background-color: #ff0000;
        height: 3px;
        width: 0;
        left: 0;
        bottom: 0px;
        transition: 0.3s;
    }
    
    .nav-item a:hover::after {
        width: 100%;
    }
    
    .header-image {
        position: relative;
        margin-left: 10rem;
    }
    
    .headerImage2 {
        padding: 0;
        position: absolute;
        top: 5.5rem;
        text-align: end;
        right: 0;
        height: 50%;
        width: 50%;
    }
    
    .header-test h1 {
        font-size: 66px;
        line-height: 142px;
        margin-left: -10px;
        color: transparent;
        -webkit-text-stroke: 1px #fff;
        background: url(../image/bgImage/back.png);
        background-position-x: 0%;
        background-position-y: 0%;
        background-clip: border-box;
        -webkit-background-clip: text;
        background-position: 0 0;
        animation: back 20s linear infinite;
    }
    /* Keyframes for the background animation */
    
    @keyframes back {
        0% {
            background-position: 100% 100%;
        }
        100% {
            background-position: 0% 0%;
        }
    }
    
    header h1 {
        font-family: 'Gill Sans';
        font-size: 3rem;
    }
    
    .header-test2 {
        font-size: 16px;
        line-height: 1.3;
        width: 85%;
        text-align: center;
        display: inline-block;
    }
    
    @media screen and(max-width: 980px) {
        .header-test2 {
            margin: 0 0 10px;
            font-size: 16px;
            line-height: 1.3;
        }
    }
    
    @media screen and (max-width: 768px) {
        .header-test2 {
            position: absolute;
            top: 17rem;
            font-size: 12px;
        }
    }
    
    @media screen and(max-width: 480px) {
        .header-test2 {
            position: absolute;
            top: 17rem;
            font-size: 12px;
        }
    }
    /* Responsive navber manu */
    
    @media screen and(max-width: 980px) {
        .header-image {
            padding: 0;
            margin-left: 0rem;
            top: 9rem;
        }
    }
    
    @media screen and (max-width: 768px) {
        .header-image {
            margin-left: 0;
            top: 0rem;
        }
    }
    
    @media screen and(max-width: 480px) {
        .header-image {
            margin-left: 0rem;
            top: 0rem;
        }
    }
    /* Image2 */
    
    @media screen and(max-width: 980px) {
        .headerImage2 {
            margin-left: 5rem;
            position: absolute;
            top: 7rem;
            font-size: 2rem;
        }
    }
    
    @media screen and (max-width: 768px) {
        .headerImage2 {
            margin-left: 5rem;
            position: absolute;
            top: 7rem;
            font-size: 2rem;
        }
    }
    
    @media screen and(max-width: 480px) {
        .headerImage2 {
            margin-left: 5rem;
            position: absolute;
            top: 7rem;
            font-size: 2rem;
        }
    }
    /* header text */
    
    @media screen and(max-width: 980px) {
        .header-test h1 {
            margin: 0;
            position: absolute;
            top: 17rem;
            font-size: 2rem;
        }
    }
    
    @media screen and (max-width: 768px) {
        .header-test h1 {
            margin: 0;
            position: absolute;
            top: 21rem;
            font-size: 2rem;
        }
    }
    
    @media screen and(max-width: 480px) {
        .header-test h1 {
            margin: 0;
            position: absolute;
            top: 21rem;
            font-size: 2rem;
        }
    }
    /* company-section */
    
    .company-bgimg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 15, 15, 0.3);
        z-index: 0;
        pointer-events: none;
    }
    
    .aboutCompany h3 {
        position: relative;
        font-size: small;
        font-weight: 900;
        color: rgb(241, 44, 44);
        padding-bottom: 1rem;
        margin-left: 4rem;
    }
    
    .aboutCompany h3::after {
        content: '';
        background: red;
        height: 0.1rem;
        width: 12%;
        position: absolute;
        padding-left: 1rem !important;
        top: 0.4rem;
        left: 8.438rem;
    }
    
    .aboutCompany h2 {
        font-size: 2rem;
        font-weight: 600;
        color: rgba(29, 25, 25, 0.842);
        padding-bottom: 1rem;
        margin-left: 4rem;
    }
    
    .aboutCompany p {
        font-weight: 600;
        color: rgb(22 20 20 / 40%);
        padding-bottom: 1rem;
        margin-left: 4rem;
    }
    
    .aboutCompany2 h2 {
        font-size: 1rem;
        font-weight: 600;
        font: sans-serif;
        color: rgba(29, 25, 25, 0.842);
        padding-left: 1.25rem;
        position: relative;
        margin-left: 4rem;
    }
    
    .aboutCompany2 h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: rgba(29, 25, 25, 0.842);
        padding-left: 1.25rem;
        position: relative;
        margin-left: 4rem;
    }
    
    .aboutCompany2 h2::after {
        content: '';
        background: rgba(255, 0, 0, 0.747);
        height: 100%;
        width: 3px;
        margin-top: 8px;
        position: absolute;
        padding-left: 0 !important;
        top: 0;
        left: 0;
    }
    
    .slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 50px;
        border-radius: 4px;
        background-color: #ff0000;
    }
    
    .range {
        width: 100%;
        height: 20px;
        color: red;
    }
    
    .aboutCompany2 span {
        color: rgb(22 20 20 / 40%);
        margin-left: 0.5rem;
    }
    
    .content-button {
        margin-left: 5rem;
    }
    
    .content h1 {
        font-size: 1rem;
        font-weight: 600;
        color: rgba(29, 25, 25, 0.842);
        background-color: #343a406c;
        background-color: #343a4000;
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 2rem !important;
        height: 12rem;
    }
    
    @media screen and (max-width: 768px) {
        .content h1 {
            height: 100%;
            width: 75%;
        }
    }
    
    @media screen and(max-width: 480px) {
        .header-test2 {
            height: 100%;
            width: 87%;
        }
    }
    
    .content1 h1 {
        font-size: 1rem;
        font-weight: 600;
        color: rgba(29, 25, 25, 0.842);
        background-color: #343a4000;
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 3.8rem !important;
        margin-top: 0rem;
    }
    
    @media screen and (max-width: 768px) {
        .content1 h1 {
            margin-top: 2rem;
            height: 100%;
            width: 75%;
        }
    }
    
    @media screen and(max-width: 480px) {
        .content1 h1 {
            margin-top: 2rem;
            height: 100%;
            width: 75%;
        }
    }
    
    .content3 h1 {
        font-size: 1rem;
        font-weight: 600;
        background-color: #343a4000;
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 1rem !important;
    }
    
    @media screen and (max-width: 768px) {
        .content3 h1 {
            height: 100%;
            width: 75%;
        }
    }
    
    @media screen and(max-width: 480px) {
        .content3 h1 {
            height: 100%;
            width: 75%;
        }
    }
    
    .content img {
        height: 8.8rem;
        width: 18rem;
        margin-top: 0rem;
        margin-bottom: -3rem;
        margin-left: -1rem;
    }
    
    .content1 img {
        height: 12rem;
        width: 18rem;
        margin-top: -10px;
        margin-bottom: -23px;
        margin-left: -15px;
    }
    
    .content3 img {
        width: 17.9rem;
        height: 11.5rem;
        margin-bottom: -2rem;
        margin-top: -48px;
        margin-left: -1rem;
    }
    /* our consept */
    
    .concept-section {
        position: relative;
    }
    /* Responsive ::after element */
    
    .concept-section::after {
        content: '';
        background-color: #6a6666b2;
        display: block;
        height: 96%;
        width: 4px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }
    /* Additional media query for responsiveness */
    
    @media (max-width: 768px) {
        .concept-section::after {
            left: 5%;
            transform: none;
            height: 96%;
        }
    }
    
    .concept-section {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        margin-top: 8rem;
    }
    
    @media (max-width: 768px) {
        .concept-section {
            flex-direction: column;
            align-items: center;
        }
    }
    
    .circle-icone {
        display: block;
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 5px solid #6a6666;
        font-size: 13px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -16px;
    }
    
    .circle-icone2 {
        display: block;
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 5px solid #6a6666;
        font-size: 13px;
        position: absolute;
        transform: translateX(-50%);
        margin-top: -45px;
        margin-left: 34.6rem;
    }
    /* Responsive handling for smaller screens */
    
    @media (max-width: 768px) {
        .circle-icone {
            width: 40px;
            height: 40px;
            border-width: 6px;
            left: 23px;
            top: 10px;
        }
    }
    /* Responsive handling for smaller screens */
    
    @media (max-width: 768px) {
        .circle-icone2 {
            width: 40px;
            height: 40px;
            border-width: 6px;
            left: 23px;
            margin-top: -55px;
        }
    }
    
    .concept-item {
        position: relative;
        padding-left: 110px;
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.5s ease-in-out;
    }
    /* Responsive handling for smaller screens */
    
    @media (max-width: 768px) {
        .concept-item {
            left: 2rem;
            font-size: 14px;
            width: 88%;
            height: auto;
        }
    }
    
    @media (max-width: 480px) {
        .concept-item {
            left: 2rem;
            font-size: 14px;
            width: 88%;
            height: auto;
        }
    }
    
    .concept-item.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .concept-item:last-child {
        margin-bottom: 0;
        /* margin-top: -7rem; */
        margin-top: -10.5rem;
    }
    
    .concept-icon {
        position: absolute;
        top: -11px;
        left: 100px;
        width: 50px;
        height: 50px;
        /* border: 3px solid #ddd; */
        border-radius: 50%;
        line-height: 45px;
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .concept-icon .dot {
        left: -9.2rem;
        top: 35px;
        display: inline-block;
        text-align: center;
        height: 19%;
        width: 19%;
    }
    
    .concept-icon .dot1 {
        left: -9.3rem;
        top: 35px;
        display: inline-block;
        text-align: center;
        height: 19%;
        width: 19%;
    }
    
    .concept-icon .dot3 {
        left: -10.4rem;
        top: 35px;
        display: inline-block;
        text-align: center;
        height: 19%;
        width: 19%;
    }
    
    .new .new-circle {
        border: 2px solid #4169E1;
        border-radius: 50%;
        padding: 1rem;
        position: relative;
        top: -4rem;
    }
    
    @media (max-width: 768px) {
        .new .new-circle {
            top: -3.5rem;
            left: 2rem;
        }
    }
    
    .new-circle1 {
        border: 2px solid #4169E1;
        border-radius: 50%;
        padding: 1rem;
        position: relative;
        background-color: lightgray;
        top: 7rem;
    }
    
    @media (max-width: 768px) {
        .new-circle1 {
            left: 2rem;
        }
    }
    
    .new-circle1::after {
        content: '\f0da';
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: -7px;
        left: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #4169E1;
        z-index: -2;
    }
    
    .new {
        position: relative;
    }
    
    .new-circle {
        width: 100px;
        height: 100px;
        background-color: lightgray;
        border-radius: 50%;
        /* Additional styles for .new-circle */
        position: relative;
    }
    
    .new-circle::after {
        content: "\f0da";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        height: 100%;
        width: 100%;
        bottom: -7px;
        left: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #4169E1;
        z-index: -1;
    }
    
    .circle {
        display: inline-block;
        width: 35px;
        height: 35px;
        line-height: 34px;
        border-radius: 50%;
        font-size: 13px;
    }
    /* whychose1 video*/
    
    #ChoseVideo {
        position: relative;
        right: 0;
        bottom: 2px;
        min-width: 100%;
        min-height: 70%;
        background-size: cover;
        background: no-repeat center center;
    }
    /* Style for the video container */
    
    .video-container1 {
        position: relative;
        /* Changed to relative to keep content positioned within it */
        width: 100%;
        height: 40vh;
        /* Full viewport height */
        overflow: hidden;
    }
    /* Style for the video element */
    
    .video-container1 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        /* Keep the video behind the content */
    }
    /* Style for the overlay text */
    
    .chooseText {
        position: absolute;
        top: 50%;
        /* Center vertically */
        left: 50%;
        /* Center horizontally */
        transform: translate(-50%, -50%);
        /* Center the content */
        color: #fff;
        /* White text for better contrast */
        text-align: center;
        background: rgba(182, 209, 147, 0.37);
        /* Optional: Adds a semi-transparent background for readability */
        padding: 20px;
        border-radius: 10px;
        /* Optional: Adds rounded corners */
        z-index: 1;
        /* Ensures the text is above the video */
    }
    /* Main container */
    
    .ch-item {
        width: 100%;
        height: 300px;
        position: relative;
        perspective: 1000px;
    }
    
    .ch-info {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform 0.6s ease-in-out;
        transform-style: preserve-3d;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .ch-info-front,
    .ch-info-back {
        width: 54%;
        height: 62%;
        position: absolute;
        backface-visibility: hidden;
    }
    /* Front side with the image, now scaled to 50% of the container */
    
    .ch-info-front {
        background: url(../image/bgImage/image.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
    }
    
    .ch-info-front1 {
        background: url(../image/bgImage/image1.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front2 {
        background: url(../image/bgImage/image2.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front3 {
        background: url(../image/bgImage/image3.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front4 {
        background: url(../image/bgImage/image8.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front5 {
        background: url(../image/bgImage/image5.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front6 {
        background: url(../image/bgImage/image7.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front7 {
        background: url(../image/bgImage/image4.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .ch-info-front8 {
        background: url(../image/bgImage/image4.JPG) no-repeat center;
        border-radius: 50%;
        border: 10px solid RoyalBlue;
        height: 62%;
        width: 52%;
    }
    
    .itemli h3 {
        font-weight: 600;
        font-size: 1.5rem;
    }
    
    .itemli p {
        font-weight: 600;
        font-size: 0.8rem;
        margin-left: 2rem;
    }
    /* Back side of the card */
    
    .ch-info-back {
        background-color: #4169E1;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotateX(180deg);
        opacity: 0;
        transition: opacity 0.6s ease;
        border-radius: 50%;
    }
    /* On hover, flip the card vertically from bottom to top */
    
    .ch-item:hover .ch-info {
        transform: rotateX(-180deg);
    }
    
    .ch-item:hover .ch-info-back {
        opacity: 1;
    }
    /* whyChoose */
    
    .chooseText h2 {
        font-weight: 600;
        color: #4169E1;
    }
    
    .chooseText p {
        font-size: 1rem;
        font-weight: 600;
    }
    
    .whyChoose h3 {
        font-size: 1.2rem;
        font-weight: 600;
        margin-top: 0.5rem;
    }
    
    .whyChoose p {
        font-weight: 600;
        font-size: 0.8rem;
    }
    /* Initially hide the h3 */
    
    .hover-text {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    /* Image hover: rotate the image and reveal the h3 */
    
    .hover-image {
        transition: transform 1s ease;
        border-radius: 35%;
    }
    
    .hover-image:hover {
        transform: rotate(360deg);
    }
    
    .whyChoose .hover-text {
        opacity: 1;
        transform: translateY(0);
        /* Move the h3 to its original position */
    }
    /* /////////// */
    
    .concept-content {
        margin-bottom: -2rem;
    }
    
    .concept-content h4 {
        margin-top: 70px;
        font-weight: bold;
        margin-left: 3rem;
    }
    
    @media (max-width: 768px) {
        .concept-content h4 {
            margin-top: 70px;
            font-weight: bold;
            margin-left: 3rem;
            font-size: 18px;
            padding: 2px
        }
    }
    
    @media (max-width: 480px) {
        .concept-content h4 {
            margin-top: 70px;
            font-weight: bold;
            margin-left: 3rem;
            font-size: 18px;
            padding: 2px
        }
    }
    
    .concept-content p {
        margin-bottom: 0;
    }
    
    .dot {
        height: 15px;
        width: 15px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        display: inline-block;
        position: absolute;
        top: 2rem;
        left: 18rem;
        margin-left: 0rem;
    }
    
    .dot1 {
        height: 15px;
        width: 15px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        display: inline-block;
        position: absolute;
        top: 2rem;
        left: 19rem;
        margin-left: 1rem;
    }
    
    .dot2 {
        height: 15px;
        width: 15px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        display: inline-block;
        position: absolute;
        top: 2rem;
        left: 20rem;
        margin-left: 2rem;
    }
    
    .dot3 {
        height: 15px;
        width: 15px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        display: inline-block;
        position: absolute;
        top: 2rem;
        left: 21rem;
        margin-left: 3rem;
    }
    
    .dot4 {
        height: 15px;
        width: 15px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        display: inline-block;
        position: absolute;
        top: 2rem;
        left: 22rem;
        margin-left: 4rem;
    }
    /* dot responsive */
    
    @media screen and (max-width: 480px) {
        .dot {
            left: 7rem;
        }
    }
    
    @media screen and (max-width: 480px) {
        .dot1 {
            left: 8rem;
        }
    }
    
    @media screen and (max-width: 480px) {
        .dot2 {
            left: 9rem;
        }
    }
    
    @media screen and (max-width: 480px) {
        .dot3 {
            left: 10rem;
        }
    }
    
    @media screen and (max-width: 480px) {
        .dot4 {
            left: 11rem;
        }
    }
    /*  */
    
    .boderStyle {
        margin-left: 5rem;
    }
    
    .boderStyle h2 {
        color: #4169E1;
    }
    
    .boderStyle h4 {
        border-style: outset;
        border-width: 5px;
        padding: 17px;
        width: 85px;
        margin: auto;
        margin-top: 26.8rem;
        font-size: 25px;
        border-color: #ff0000 #F8F9FA #f0ed36 #0000ff;
        border-radius: 50%;
        font-weight: 600;
        margin-left: 10rem;
    }
    /* responsive */
    
    @media screen and (max-width: 768px) {
        .boderStyle h4 {
            margin-left: 0rem;
            margin-top: -7rem;
        }
    }
    
    @media screen and (max-width: 480px) {
        .boderStyle h4 {
            margin-left: 0rem;
            margin-top: -7rem;
        }
    }
    
    .boderStyle h2 {
        font-size: 2rem;
        font-weight: 800;
        padding: 15px;
        position: relative;
    }
    
    .boderStyle h2::after {
        content: '';
        background: #4169E1;
        height: 4px;
        width: 23%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%)
    }
    /* Optional: If you want to adjust the width on smaller screens */
    
    @media (max-width: 768px) {
        .boderStyle h2::after {
            width: 70%;
        }
    }
    
    .chooseText h2 {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    
    .chooseText p {
        font-size: 600;
        margin-bottom: 2rem;
    }
    
    .values h1 {
        font-weight: 600;
        margin-bottom: 5rem;
    }
    
    .valusImg:hover {
        background-color: #ff00007d;
    }
    /************* value video section ************************/
    /* Style for the background video wrapper */
    /* Style for the background video wrapper inside the valueContiner */
    
    .background-video-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
        /* Places the video behind the content */
    }
    /* Style for the background video */
    
    #backgroundVideo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures the video covers the container without stretching */
    }
    /* Style for the content container */
    
    .swiper1 {
        max-width: 100%;
        /* Keeps it within the parent container */
        margin: auto
    }
    
    .valueContiner {
        position: relative;
        z-index: 1;
        /* Ensures the content is on top of the background video */
        color: #fff;
        /* Sets text color for better visibility if needed */
        padding: 10px 20px;
    }
    /* Style for the Swiper elements */
    
    .swiper1 .slider-wrapper {
        background: rgba(0, 0, 0, 0.5);
        bottom: 5rem;
        /* Semi-transparent background for better readability */
        padding: 20px;
        border-radius: 10px;
        /* Optional: Rounded corners */
    }
    
    .swiper1 .card-item img {
        width: 100%;
        height: auto;
    }
    /* Optional: Additional styles for Swiper controls */
    
    .swiper1 .swiper-slide-button {
        color: #fff;
    }
    
    .card-item:hover {
        transform: scale(1.1);
        /* Zoom effect */
        transition: transform 0.3s ease-in-out;
        /* Smooth transition */
    }
    /* Adjusting the h2 heading styles */
    
    .valueContiner h2 {
        color: #28a745;
        /* Consistent with the existing text-success class */
        margin-bottom: 20px;
    }
    /* Optional: Styling for individual card items */
    
    .valusImg {
        border-radius: 7px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
        display: inline-block;
        width: 65%;
        height: 60%;
        margin-left: 2rem;
    }
    /********************** value video section end *****************************/
    /* map */
    
    #map {
        height: 100vh;
        width: 100%;
        z-index: -5;
    }
    
    .station-label {
        font-size: 9px;
        /* Control the font size */
        font-weight: bold;
        /* Make the text bold */
        color: #000;
        /* Change the text color */
        background-color: rgba(255, 255, 255, 0.8);
        /* Optional: Set a background color with transparency */
        padding: 2px 4px;
        /* Optional: Add padding around the text */
        border-radius: 4px;
        /* Optional: Round the corners */
        border: 1px solid #ccc;
        /* Optional: Add a border around the label */
    }
    /* Ensure the background is behind the map */
    
    .leaflet-container {
        background: url("../image/map/worldmap.png") #9a9ec5 no-repeat center !important;
        /* Your map image URL */
        background-size: cover;
        background-position: center;
    }
    /* map */
    
    @keyframes pulse {
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(2.5);
        }
    }
    
    @media screen and (max-width:600px) {
        .world-map {
            font-size: 13px;
        }
    }
    /* contact us particles js*/
    
    canvas {
        display: block;
        vertical-align: bottom;
    }
    /* Particles.js container styling */
    
    #particles-js {
        position: absolute;
        width: 100%;
        height: 80vh;
        /* Viewport height for a more responsive design */
        background-color: #fff;
        background-image: url("");
        /* Add your image URL here */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        /* Center the background */
        overflow: hidden;
    }
    /* Optional: Add media queries for additional responsiveness on smaller screens */
    
    @media only screen and (max-width: 1300px) {
        #particles-js {
            height: 80vh;
            /* Reduce the height for smaller screens */
        }
    }
    
    @media only screen and (max-width: 768px) {
        #particles-js {
            height: 60vh;
            /* Reduce the height for smaller screens */
        }
    }
    
    @media only screen and (max-width: 480px) {
        #particles-js {
            height: 50vh;
            /* Further reduce height on very small screens */
        }
    }
    /* Align the form above particles */
    
    .from-section {
        position: relative;
        z-index: 1;
        background: rgba(255, 255, 255, 0.9);
        padding: 20px;
        margin: 50px auto;
        max-width: 600px;
        border-radius: 10px;
        top: 55px;
    }
    /* crosul */
    
    .slider-wrapper {
        max-width: 100%;
        /* Keeps it within the parent container */
        margin: auto;
        /* Center the content if needed */
        font-size: 2rem;
    }
    /* .fixt {
        overflow: hidden;
        width: 100%;
        max-width: 1200px;
        height: 100%;
        margin: auto;
        background-color: #f0f0f00e;
    } */
    
    .card-list .card-item {
        height: auto;
        color: #fff;
        user-select: none;
        padding: 35px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        /* margin-top: 8rem; */
        /* padding-bottom: 8rem; */
        top: 7rem;
        backdrop-filter: blur(30px);
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    
    .card-item2 {
        height: auto;
        color: #fff;
        user-select: none;
        padding: 30px;
        /* Reduced padding */
        padding-left: 3rem;
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
        /* Reduced bottom margin */
        margin-top: 3.5rem;
        /* Reduced top margin */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        /* Slightly reduced border radius */
        backdrop-filter: blur(20px);
        /* Reduced blur for a more subtle effect */
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
        /* Smaller font size */
    }
    
    .card-list .card-item .user-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 40px;
        border: 3px solid #fff;
        padding: 4px;
    }
    
    .card-list .card-item .user-profession {
        font-size: 1.15rem;
        color: #e3e3e3;
        font-weight: 500;
        margin: 14px 0 40px;
    }
    
    .card-list .card-item .message-button {
        font-size: 1.25rem;
        position: absolute;
        padding: 10px 35px;
        color: #030728;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        background: #fff;
        border: 1px solid transparent;
        transition: 0.2s ease;
    }
    
    .card-list .card-item .message-button:hover {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #fff;
        color: #fff;
    }
    
    .slider-wrapper .swiper-pagination-bullet {
        background: #fff;
        height: 13px;
        width: 13px;
        opacity: 0.5;
    }
    
    .slider-wrapper .swiper-pagination-bullet-active {
        opacity: 1;
    }
    
    .slider-wrapper .swiper-slide-button {
        color: #fff;
        /* margin-top: 8px; */
        transition: 0.2s ease;
        /* padding-top: 5rem; */
        padding-bottom: 0;
    }
    
    .slider-wrapper .swiper-slide-button:hover {
        color: #4658ff;
    }
    
    .swiper {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        min-height: 68vh;
        background: url("../image/bgImage/background-2.png") #030728 no-repeat center;
    }
    
    @media (max-width: 768px) {
        .slider-wrapper {
            margin: 0 10px 40px;
        }
        .slider-wrapper .swiper-slide-button {
            display: none;
        }
    }
    /* crosul end*/
    /* ---- particles.js container ---- */
    
    .circle-button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #4169E1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }
    
    .circle-button i {
        font-size: 20px;
    }
    
    .icone-text h1 {
        font-size: 1rem;
        margin-top: 0.8rem;
        font-weight: 600;
    }
    
    .icone-text span {
        font-size: 0.8rem;
    }
    
    .footer-test h1 {
        position: relative;
    }
    
    .footer-test h1::after {
        content: '';
        position: absolute;
        bottom: 0;
        top: 30px;
        width: 78%;
        height: 8%;
        left: 0;
        background: red;
    }
    
    .footer-test h1 {
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .footer-test h3 {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 0.9rem;
        margin-bottom: 1px;
    }
    
    .footer-test p {
        font-size: 12px;
        margin-bottom: 0 !important;
        line-height: 20px;
        margin-left: 25px;
        font-weight: 600;
    }
    
    .footerLogo img {
        font-size: 17px;
        width: 61px;
        height: auto;
    }
    
    .footerLogo {
        margin-left: 100px;
    }
    
    .footer-test1 h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: 3rem;
        text-align: center;
        margin-left: -5rem;
    }
    
    .footer-test1 p {
        font-size: 0.8rem;
        font-weight: 500;
        margin-top: 0rem;
        margin-bottom: 0px;
        display: inline-block;
        text-align: start;
        margin-left: 8rem;
    }
    
    .footer-test1 h3 {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 6px;
        width: 100%;
        line-height: 22px;
        margin-left: 0px;
    }
    
    .footer-test p::before {
        content: "\f424";
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: -.125em;
        -webkit-font-smoothing: antialiased;
        margin-left: -26px;
        padding-right: 4px;
        font-size: 20px;
    }
    
    .quickView h1 {
        font-weight: 600;
        font-size: 18px;
        margin-top: 55px;
    }
    
    .quickView {
        margin-left: 8rem;
    }
    
    .quickView p {
        font-weight: 600;
        font-size: 12px;
        line-height: 12px;
    }
    
    .footer-test1 p::before {
        content: "\f424";
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: -.125em;
        -webkit-font-smoothing: antialiased;
        margin-left: -26px;
        padding-right: 4px;
        font-size: 20px;
    }
    
    .footer-icone {
        width: 70px;
        height: 64px;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        border: 3px solid #0f0f0f;
        margin: auto;
        margin-top: -50px;
        font-size: 2rem;
        cursor: pointer;
        z-index: 20;
        margin-top: 17px;
    }
    
    @media only screen and (max-width: 768px) {
        .footer-icone {
            margin-top: 0px;
            /* Reduce the height for smaller screens */
        }
    }
    
    @media only screen and (max-width: 480px) {
        .footer-icone {
            height: 0vh;
            /* Further reduce height on very small screens */
        }
    }
    
    .contact-info span {
        font-size: 14px;
        font-weight: 600;
    }
    
    .contact-info h4 {
        font-size: 16px;
        font-weight: 600;
        margin-top: 10px;
    }
    
    .scole-icone {
        display: inline-block;
        margin: auto;
        color: black !important;
        font-size: 25px;
    }
    
    .scole-icone a {
        margin-left: 20px;
        color: #4169E1;
    }
    
    .scole-icone a:hover {
        color: rgb(252, 248, 248);
    }
    
    footer {
        background-color: rgba(10, 10, 10, 0.938);
        color: rgb(255, 253, 253);
        margin-top: 7rem;
        height: 100%;
    }