@font-face {
    font-family: 'Poppins';
    src: url('/theme/EMG/fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('/theme/EMG/fonts/poppins-regular-webfont.woff') format('woff');
    
    font-style: normal;
   
}


/* 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: 'Poppins'; /* Replace Montserrat with Aktiv Grotesk Ex */
}
/* Styling the scrollbar button (the arrows at the top/bottom of the scrollbar) */

html, body {
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

/*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: 400px; /* Optional: adjust height for mobile */
    }



    .prev-btn, .next-btn {
        width: 50px; /* Smaller buttons on mobile */
        height: 50px;
    }
}
/*sticky header css*/
/* Sticky Header Style */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(245 246 255); /* Background turns white when sticky */
    z-index: 1000; /* Ensures the header stays on top of other content */
}

    /* Optional: Add some padding or style when header is sticky */
    .sticky .containerslider {
        padding-top: 5px; /* Adjust padding as needed */
        padding-bottom: 5px;
    }

/* Optional: Transition to make the background color change smoothly with delay */
header {
    transition: background-color 0.2s ease 0.2s; /* 0.5s delay before transition starts */
}

/*sticky logo*/
/* Default Header */
#header-sticky {
    transition: background 0.3s, height 0.3s, box-shadow 0.3s;
    will-change: transform;
}


#header-sticky {
    position: relative;
    top: 0;
    width: 100%;
    background-color: transparent;
    height: 80px; /* Default height */
    box-shadow: none; /* No shadow initially */
    transition: background 0.3s;
    z-index: 1000;
}

@media screen and (max-width: 767px) {
    #header-sticky {
        z-index: 40 !important;
    }

    div#mobile-menu {
        height: 100vh;
    }
}
/* Sticky Header (No Delay) */
#header-sticky.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px; /* Adjust height when sticky */
    background-color: white;
    margin-bottom: 10px;
}

@media (max-width : 768px) {
    #header-sticky.sticky {
        top: -5px;
        height: auto; /* Adjust height when sticky */
        z-index: 99999999 !important;
    }
}

/* Optionally, add a transition for the logo and other elements */
#header-sticky.sticky .logo svg {
    width: 80px; /* Reduced width */
    height: 50px; /* Reduced height */
}

/*sweeping scroll css*/
@media (max-width: 536px) {
    .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; /* Removed left padding */
        padding-right: 10%; /* Retain padding for visibility of next item */
        gap: 8%; /* Adjust gap for spacing */
    }

    .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 */
        }
}

.active-tab {
    border-bottom: 2px solid #EB232C; /* replace with your secondary color */
    color: #EB232C;
}

.active-nav span {
    width: 100%;
}
/*Strat Menu Dropdown menu css*/
/* Dropdown container */
.dropdown-nav {
    position: relative;
}

    /* Ensure the link is clickable and hoverable */
    .dropdown-nav > a {
        position: relative;
        z-index: 10;
        display: inline-flex;
        align-items: center;
    }

/* Dropdown menu */
.dropdown-nav-menu {
    z-index: 50; /* High z-index to ensure visibility */
    top: 100%; /* Position below the link */
    left: 0;
    display: none; /* Hidden by default */
    opacity: 0; /* Add opacity for smooth transition */
    visibility: hidden; /* Prevent interaction when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

    /* Show dropdown when .open class is added */
    .dropdown-nav-menu.open {
        display: block;
        opacity: 1;
        visibility: visible;
    }

/* Underline animation on hover */
.dropdown-nav > a:hover .absolute {
    width: 100%;
}

/* Rotate arrow when dropdown is open */
.dropdown-nav > a.open svg {
    transform: rotate(180deg);
}

/* Ensure dropdown menu items are clickable */
.dropdown-nav-menu a {
    display: block;
    width: 100%;
}
svg.emg-svg {
    height: 28px;
    width: 28px;
}
svg.emg-svg1 {
    height: 34px;
    width: 34px;
}
@media (max-width : 768px) {
    svg.emg-svg {
        height: 24px;
        width: 24px;
    }
    svg.emg-svg1 {
        height: 24px;
        width: 24px;
    }
	.cs-height {
    height: 8rem;
}
}
.row.ss-pager-row {
    display: none;
}
.box-shadow{
	box-shadow:0 4px 8px 0 rgb(147 141 141 / 10%), 0 10px 15px 0 rgb(255 255 255 / 19%);
}
.footer-logo {
  width: 286px;
  height: 56px;
}
.client-logo1{
	width:150px;
	height:150px;
}
.cs-height{
	padding:2rem 1rem 2rem 1rem ;
}
.email-icon{
	height:29px;
	width:29px;
}
.location-icon{
	height:26px;
	width:31px;
	margin-top:5px;
}
.phone-icon{
	width: 27px;
        height: 27px;
}
.cs-margin{
	margin-top:1.5rem;
}
.custom-gap{
	column-gap: 2rem;
}
/* Mobile (half size) */
@media (max-width: 767px) {
	.custom-gap{
	column-gap: 0rem;
}
	.cs-margin{
	margin-top:0.7rem;
}
  .footer-logo {
    width: 203px;
        height: 48px;
  }
  .client-logo1{
	width:100px;
	height:100px;
}
.email-icon{
	height:20px;
	width:20px;
	 margin-top: 5px;
}
.location-icon{
	    height: 21px;
        width: 23px;
        margin-top: 5px;
}
.phone-icon{
	width: 20px;
        height: 20px;
		 margin-top: 7px;
}
}