/* Be Vietnam Pro font class */
.be-vietnam-pro {
    font-family: 'BeVietnamPro' !important;
}

/* Apply Arabic font when content is in Arabic */
:lang(ar) {
  font-family: 'Times-New-Roman', serif;
}

/* Apply English font when content is in English */
:lang(en) {
  font-family: 'BeVietnamPro', sans-serif; /* Replace Montserrat with Aktiv Grotesk Ex */
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #818286;
    border-radius: 20px;
}
body{
    overflow-x:hidden !important;
}
div#page-content {
    overflow-x: hidden;
}

/*START product carosel*/
.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
}

.product-card {
    position: relative;
    width: 500px; /* For desktop */
    height: 500px;
    flex-shrink: 0;
    overflow: hidden;
}

.product-card {
    position: relative;
    background-color: black; /* Black background */
}

    .product-card img {
        width: 100%;
        height: 70%;
        object-fit: cover;
        opacity: 0.7; /* 50% opacity */
    }


.text-area {
    height: 30%;
    padding: 1.5rem 1rem;
    background-color: #fff;
    text-align: left;
}

.prev-btn, .next-btn {
    color: white;
    border: none;
    padding: 10px 0px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    width: fit-content;
    height: 40px;
}

.flex-css {
    display: flex; /* Flexbox layout for centering */
    justify-content: center; /* Center buttons horizontally */
    position: absolute; /* Position the buttons absolutely */
    width: 100%; /* Full width */
    bottom: -2rem; /* Add some space from the bottom */
}

@media (max-width: 768px) {
    .product-card {
        width: 100%; /* Adjust for mobile: make it take up the full screen width */
        height: 560px; /* Optional: adjust height for mobile */
    }

    .text-area {
        padding: 0.8rem 1rem;
    }


    .prev-btn, .next-btn {
        width: 50px; /* Smaller buttons on mobile */
        height: 50px;
    }
}

/*start popup animation*/

.message-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.actual-message {
    font-size: 1.5em;
    line-height: 1.5em;
    max-width: 500px;
    width: 100%;
    background: white;
    padding: 50px;
    text-align: center;
    opacity: 1;
    flex: 0;
    margin-top: 0;
    position: relative;
}

.modal {
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}

.close-button {
    position: absolute;
    top: -20px;
    right: -20px;
    color: #545454;
    background: #ed1b24;
    color: white;
    padding: 1.2rem;
    border: 10px solid white;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-family: cursive;
    line-height: 0;
    cursor: pointer;
    font-size: 1.5em;
}

.message-container p {
    line-height: 2em;
    font-weight: 400;
}

.message-container h2 {
    text-transform: none;
    margin-top: 20px;
}

.message-container .free {
    color: #ed1b24;
    font-size: 1.5em;
    font-weight: bold;
}

.message-container .link-button-dark {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .actual-message {
        width: 90%;
    }
}



/*start about us logo css*/
.logo-container {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.logo-logos {
    display: flex;
    transition: transform 0.5s ease;
}

    .logo-logos img {
        height: auto;
        width: auto;
        margin-right: 12px;
        margin: 0rem;
        padding: 0rem 3rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
        padding-top: 10px;
        padding-bottom: 10px;
    }

/* Desktop version: Show 8 logos */
@media (min-width: 1024px) {
    .logo-logos img {
        width: calc(100% / 8); /* Ensure 8 logos are fully visible */
    }
}

/* Mobile version: Show 2 logos */
@media (max-width: 768px) {
    .logo-logos img {
        width: calc(100% / 2); /* Ensure 2 logos are fully visible */
        height: auto;
        width: 10rem;
    }
}

/*start industry svg code*/
.industry-svg {
    height: 180px;
    width: 188px;
}

@media (max-width: 768px) {
    .industry-svg {
        height: 70px;
        width: 73px;
    }
    /* 
  .group-company-svg-1{
    width: 120px;
    height: 33px;
  }
  .group-company-svg-2{
    width: 90px;
    height: auto;
  }*/
    #mobile-menu {
        overflow-x: hidden;
        overflow-y: hidden;
        position: fixed;
        z-index: 999999;
    }
}

@media (max-width: 390px) {
    .group-company-svg-1 {
        width: 170px;
        height: auto;
    }

    .group-company-svg-2 {
        width: 120px;
        height: auto;
    }
}
/*sweeping scroll css*/
@media (max-width: 768px) {
    #scroll-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        #scroll-container > * {
            flex: 0 0 calc((100% - 20%) / 1) !important; /* 3 columns with gap */
            scroll-snap-align: start;
            box-sizing: border-box; /* Ensures padding/borders are considered */
        }
}

.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#scroll-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-left: 0;
    padding-right: 10%;
    gap: 1.5%;
    width: 100%; /* Ensures the container spans full width */
    padding-bottom: 1rem;
}

    #scroll-container > * {
        flex: 0 0 calc((100% - -12%) / 3); /* 3 columns with gap */
        scroll-snap-align: start;
        box-sizing: border-box; /* Ensures padding/borders are considered */
    }


.scroll-item {
    flex: 0 0 auto;
    scroll-snap-align: start; /* Align items to the left */
    /**padding: 8px;/ 
    border-radius: 50%;
    margin-left: 0; /* Remove negative margins */
    margin-right: 0; /* Remove negative margins */
    width: 90%; /* Keep the width consistent */
}

    .scroll-item:first-child {
        margin-left: 0; /* Ensure the first item is aligned correctly */
    }

    .scroll-item:last-child {
        margin-right: 0; /* Remove extra margin for the last item */
    }
/*sweeping scroll css*/
@media (max-width: 768px){
  #scroll-container {
  
    padding-left: 0 !important;
    padding-right: 0 !important;
   
}
  #scroll-container > * {
    flex: 0 0 calc((100% - 20%) / 1) !important; /* 3 columns with gap */
    scroll-snap-align: start;
    box-sizing: border-box; /* Ensures padding/borders are considered */
}
}
  .slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  #scroll-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-left: 0;
    padding-right: 10%;
    gap: 1.5%;
    width: 100%; /* Ensures the container spans full width */
    padding-bottom: 1rem;
}

#scroll-container > * {
    flex: 0 0 calc((100% - -12%) / 3); /* 3 columns with gap */
    scroll-snap-align: start;
    box-sizing: border-box; /* Ensures padding/borders are considered */
}


  .scroll-item {
    flex: 0 0 auto;
    scroll-snap-align: start; /* Align items to the left */
   /**padding: 8px;/ 
    border-radius: 50%;
    margin-left: 0; /* Remove negative margins */
    margin-right: 0; /* Remove negative margins */
    width: 90%; /* Keep the width consistent */
  }

  .scroll-item:first-child {
    margin-left: 0; /* Ensure the first item is aligned correctly */
  }

  .scroll-item:last-child {
    margin-right: 0; /* Remove extra margin for the last item */
  }

/*start team slider csss*/