* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Preloader styling */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure the preloader is on top of everything */
}
.animate-on-scroll{
    opacity: 0;
}
/* Spinner animation */
.spinner {
  border: 6px solid #f3f3f3; /* Light grey */
  border-top: 2px solid #ddd; 
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Percentage Counter styling */
#loading-percentage {
  margin-top: 20px;
  font-size: 3rem;
  font-weight: bold;
  color: #ddd; 
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* END Preloader styling */
	html,body{
		font-family: 'Poppins', sans-serif;
		font-weight: 400;
		height:100%;
		width:100%;
		color:#777;
		background-color: #333;
		user-select: none; /* supported by Chrome and Opera */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
	}
    :dir(rtl) html,body{
        font-family: "IBM Plex Sans Arabic", sans-serif;
    }
	html {
		box-sizing: border-box;
		margin-right: 0px!important;
		overflow: visible!important;
		scroll-behavior: smooth;
	}
	
	body {
		overflow-x:hidden;
		-webkit-transition: opacity 0.2s ease-in-out 0.2s;
		transition: opacity 0.2s ease-in-out 0.2s;
	}
	body.smooth-scroll {
		overflow:hidden;
	}
    a{
        text-decoration: none;
        color: #F3F3F3;
    }
/* Helper styles */
	.one_half {
    	width: 48%!important;
	}	

	.one_third {
		width: 30.6%!important;
	}	

	.one_fourth {
		width: 22%!important;
	}	

	.one_fifth {
		width: 16.8%!important;
	}	

	.one_half, .one_third , .one_fourth, .one_fifth {
		float: left!important;
		margin-bottom: 1px!important;
		/* margin-right: 4%!important; */
		position: relative!important;
	}

	.last {
		margin-right:0px!important;
	}


    h1, h2, h3, h4, h5, h6 {
		font-family: 'Poppins';
		color: #f3f3f3;
	}
    :dir(rtl) h1, h2, h3, h4, h5, h6 {
        font-family: "Tajawal", sans-serif;
        font-weight: 100;
    }
    h1, h2, h3 {
        font-weight: 100;
        text-transform:uppercase;
 }
	     h4, h5, h6 {		
        font-weight: 300;
             text-transform:uppercase;
	}
	.uppercase-titles h1, .uppercase-titles h2, .uppercase-titles h3, .uppercase-titles h4, .uppercase-titles h5, .uppercase-titles h6,.uppercase-titles p  {
		text-transform:uppercase;
	}
	
	.primary-font-title {
		font-family: 'mona-sansextrabold_wide';
	}
	
	.secondary-font-title, em {
		font-family: 'mona-sanslight_wide';
		font-style:normal;
	}
	.logo{
		font-size: calc(1rem + 1.2vw);
		line-height: calc(1rem + 1.5vw);
		margin: 0;
	}
	h1{
		font-size: calc(1.5rem + 1.15vw);
		line-height: calc(1.5rem + 1.5vw);
	}
	h2{
		font-size: calc(1rem + 1vw);
		line-height: calc(1rem + 1.5vw);
	}
	h3{
		font-size: calc(1rem + 2vw);
		line-height: calc(1rem + 2.5vw);
	}
	h4{
		font-size: calc(1rem + .5vw);
		line-height: calc(1rem + .6vw);
	}
	h5{
		font-size: calc(1rem + 0.6vw);
		line-height: calc(1rem + 1.5vw);
	}
	h6 {
		font-size: calc(.77rem + .3vw);
		line-height: calc(1rem + .6vw);
	}
	p {
    font-size: calc(.5rem + .5vw);
    line-height: calc(.8rem + .8vw);
    font-weight: 200;
    color: #b6b6b6;
    }
	small {
    /* color: #777; */
    }
    .sub-title{
    font-size: calc(.5rem + .5vw);
    line-height: calc(.5rem + 1.5vw);
    font-weight: 500;
    margin-bottom: 5px;
    color: #aaa;
    }
    .flex{
        display: flex;
        align-items: start; /* Align items vertically */
    }
    .flex-in{
        display: inline-flex;
        align-items: center; /* Align items vertically */
    }
    .flex-f{
        display: flex;
        flex-flow: wrap;
        justify-content: center;
    }
    .flex-c{flex-direction: column;}
    .flex-j-b{
        justify-content: space-between; /* Distribute the items evenly */
    }
    .flex-a-c {
        align-items: center;
    }
    .p-abs {
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 1rem;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }
    .p-abs-l {
        position: absolute;
        left: 20px;
        top: 20px;
        padding: 1rem;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }
    .gap-1{gap: 2rem;}
    .gap-2{gap:1rem;}
    .gap-3{gap:.5rem;}
    .w-100{width: 100%;}
    .w-50{width: 50%;}
    .w-70{width: 70%;}
    .w-30{width: 25%;}
    .t-center{text-align: center;}
    .r-lg{
        border-radius: 2rem;
    }
    .r-md{
        border-radius: .9rem;
    }
    .r-sm{
        border-radius: .5rem;
    }
    .btn {
      background: none;
      border:none;
      cursor: pointer;
      transition: background-color 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
	.btn-lg{
		font-size: calc(1rem + 2vw);
		line-height: calc(1rem + 2.5vw);
	}
	.btn-md{
		font-size: calc(.8rem + .3vw);
		line-height: calc(1rem + .3vw);
		font-weight: 200;
	}
	.btn-sm{
		font-size: calc(.5rem + 0.2vw);
		line-height: calc(.7rem + .2vw);
	}
    .liner{
        border:1px solid #333;
        color: #717171;
    }
    .liner-light{
        border:1px solid #F3F3F3;
        color: #F3F3F3;
    }
    .fill{
        background: #F3F3F3;
        color: #333;
    }
    .fill-d{
        background: #333;
        color: #F3F3F3;
    }
    .fill-g{
        background: linear-gradient(135deg, #d8d8d8 23%, #daf8ff70 100%);
        color: #333;
    }
    .underliner{
        border-bottom:2px solid #333;
    }
    .py-1{padding-top:2rem;padding-bottom:2rem;}
    .px-1{padding-left: 1.4rem;padding-right: 1.4rem;}
    .py-2{padding-top: 1.1rem;padding-bottom: 1.1rem;}
    .px-2{padding-left: calc(1.5rem + .3vw););););););padding-right: calc(1.5rem + .3vw);}
    .py-3{padding-top: .8rem;padding-bottom: .8rem;}
    .px-3{padding-left: .6rem;padding-right: .6rem;}
    .py-4{padding-top: 0.4rem;padding-bottom: .4rem;}
    .px-4{padding-left:.3rem;padding-right:.3rem;}
    .mt-1{margin-top:2rem;}
    .mb-1{margin-bottom:2rem;}
    .mt-2{margin-top:1.2rem;}
    .mb-2{margin-bottom:1.2rem;}
    .mt-3{margin-top:.5rem;}
    .mb-3{margin-bottom: .5rem;}
    .m-2{margin:1.2rem;}
    .m-3{margin:.8rem;}
    .sub-badge{
    display: inline-block;
    /* margin-bottom: 20px; */
    vertical-align: middle;
    }
    .img-logo{
        height: 50px;
    }
    .img-client{
        width: 160px;
        max-height: 90px;
    }
    .img-icon{
        width: 100%;
    }
    .img-full {
        width: 100%;
        height: 100%;
        max-height: 360px;
        object-fit: cover;
    }
.img-full-2 {
    width: 100%;
    height: 100%;
    max-height: 240px;
    object-fit: cover;
}
    .img-md {
        width: auto;
        height: auto;
        max-height: 40vh;
        max-width: 70vw;
    }
.img-cust{
        width: 160px;
        height: 160px;
        min-width: 160px;
}
    .img-gallery {
        width: 100%;
        height: 100%;
        /* min-width: 300px; */
        /* min-height: 100%; */
        object-fit: cover;
    }
    .img-sm {
        width: 90px;
        height: 90px;
        min-width: 80px;
    }
    .img-thump {overflow: hidden;display: flex;/* background-color: #333; */position: relative;}
    .img-card {
        width: 100%;
        height: 180px;
        min-width: 160px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .img-mark {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }
    .image-background {
        position: fixed;
        top: 70vh;
        left: 0;
        width: 100%;
        height: 110vh;
        overflow: hidden;
        background-position: top center;
        -moz-background-size: cover;
        background-size: cover;
        object-fit: cover;
        background-repeat: no-repeat;
        z-index: -0;
        background-image: url(images/1.png);
    }
    .bg-logos {
        /* position: fixed; */
        /* top: 70vh; */
        /* left: 0; */
        /* width: 100%; */
        /* height: 110vh; */
        overflow: hidden;
        background-position: top center;
        -moz-background-size: cover;
        background-size: cover;
        object-fit: cover;
        background-repeat: no-repeat;
        z-index: -0;
        background-image: url(images/brands.svg);
    }
        /* Centering container */
        .container {
            display: block;
            max-width: 1100px;
            margin: 0 auto;
            width: 100%;
            min-height: 100vh;
            position: relative;
        }
.num{
    display: block;
    font-size: calc(1.5rem + .3vw);
    font-weight: 100;
    color: #e3e3e3;
    border-top: 1px solid #777;
}
        /* Sidebar inside the container */
        .sidebar {
            /* width: 280px; */
            /* height: 90vh; */
            background-color: #000;
            /* display: flex; */
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            /* position: fixed; */
            z-index: 100;
            flex-grow: 1;
            top: 6.5rem;
            gap: 2rem;
            padding: 1rem;
        }
        .img-side{
            width: 50%;
            height: auto
        }
        .logo-icon {
            max-width: 40px;
            height: auto;
        }
        .search-box {
            position: relative;
            width: 100%;
        }

        .search-box input[type="text"] {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 50px;
            padding: .8rem 60px .8rem 20px;
            background-color: #333;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            color: #333;
            outline: none;
            transition: 0.3s ease;
        }

        .search-box input[type="text"]:focus {
            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
        }

        .search-box i {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 24px;
            color: #888;
            cursor: pointer;
            transition: 0.3s ease;
        }
        :dir(rtl).search-box i {
            right: unset;
            left: 10px;
        }
        .search-box i:hover {
            color: #333;
        }
    .contact-form {
      max-width: 100%;
      margin: 5px 2rem;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    }

    .contact-form h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #ff9800;
    }

    .contact-form label {
      display: block;
      margin-bottom: 8px;
    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
      width: 100%;
      padding: 13px;
      margin-bottom: 15px;
      border-bottom: 2px solid #333;
      background-color: #212121;
      border-left: none;
      color: #fff;
      border-right: none;
      font-size: 14px;
      font-family: "IBM Plex Sans Arabic", sans-serif;
    }

    .contact-form input[type="text"]:focus,
    .contact-form input[type="email"]:focus,
    .contact-form textarea:focus {
      outline: none;
        background: #333;
      border-color: #725f90;
    }

    .contact-form .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
    }

    .contact-form .tags input[type="checkbox"] {
      display: none;
    }

    .contact-form .tags label {
      color: #e3e3e3;
      border: 2px solid #333;
      padding: 10px;
      border-radius: 1rem;
      cursor: pointer;
      font-size: calc(.8rem + .3vw);
      line-height: calc(1rem + .3vw);
    }

    .contact-form .tags input[type="checkbox"]:checked + label {
      background-color: #e3e3e3;
      color: #402668;
      border: 2px solid #725f90;
    }

    .contact-form button {
      /* width: 100%; */
      padding: 12px;
      /* background-color: #ff9800; */
      /* border: none; */
      /* border-radius: 5px; */
      font-size: 18px;
      color: #121212;
      cursor: pointer;
      font-family: "IBM Plex Sans Arabic", sans-serif;
    }

    .contact-form button:hover {
      background-color: #333;
    }
        /* Navbar styles */
        .navbar {
            color: white;
            width: 100%; /* Adjust to fit within container */
            /* min-width: 100%; */
            max-width: 1070px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            z-index: 1000;
            position: fixed;
            top: 1.5rem;
             /* Semi-transparent background */
        }
        :dir(rtl).navbar{
            /* margin-right: 290px; */
        }
        .navbar-ms {
            color: white;
            width: 100%; /* Adjust to fit within container */
            max-width: 1070px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            z-index: 1000;
            position: fixed;
            bottom: 1.5rem;
             /* Semi-transparent background */
        }
        .menu-toggle {
            cursor: pointer;
            color: #929292;
            background-color: rgb(0 0 0 / 30%);
            backdrop-filter: blur(10px);
            border-radius: 1rem;
            border: 1px solid #484848;
            display: flex;
            gap: 1rem;
            padding: .6rem 1.4rem;
            align-items: center;
            font-family: "Tajawal", sans-serif;
            font-weight: 100;
            box-shadow: 0px 4px 5rem rgb(0 0 0 / 26%);
        }

        /* App Drawer Menu */
        .drawer {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background-color: #222;
            transition: right 0.3s ease;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 50px 20px;
            gap: 20px;
        }

        .drawer.open {
            right: 0;
        }

        .drawer a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            padding: 10px;
            transition: background-color 0.3s ease;
        }

        .drawer a:hover {
            background-color: #555;
        }

        /* Main content */
        .main-content {
            padding-left: 0;
            /* padding-top: 7rem; */ /* Adjust for fixed navbar */
            /* width: 1100px; */
            /* margin-left: 0; */
            /* margin-right: 0; */
            padding-bottom: 2rem;
        }
        :dir(rtl).main-content{
            padding-right: 0;
            padding-left:0;
        }
        section {
            display: flex;
            padding: 5rem 3rem 3rem;
            position: relative;
            width: 100%;
            min-height: 80vh;
            justify-content: end;
            z-index: 10;
        }
        .bg-solid{
            background: #000;
        }
        .bg-white{
            background: #fff;
        }
        .bg-blur{
            background-color: rgb(0 0 0 / 30%); /* Semi-transparent background */
            backdrop-filter: blur(10px);
        }
        .mark-list {
            align-items: start;
            border-bottom: 1px solid #333;
            position: relative;
            border-left: 1px solid #333;
        }
        :dir(rtl).f-abs{

        }
        .f-abs{
            position: absolute;
            right: -1.5rem;
            top: 20px;
        }

        .mark-list:last-child {
            border-bottom: none; /* Remove the border from the last item */
        }

        /* Responsive handling */
        @media (max-width: 768px) {
            .contact-form {
    max-width: 100%;
    margin: 5px .5rem;
            }
            .w-30 {
                width: 45%;
            }
            .p-abs {
                right: 5px;
                top: 5px;
                padding: .5rem;
                border-radius: .7rem;
            }
            .p-abs-l {
                left: 5px;
                top: 5px;
                padding: .5rem;
                border-radius: .7rem;
            }
            .m-3 {
                margin: .3rem;
            }
            .img-full {
                max-height: 170px;
            }
            .img-full-2 {
                max-height: 90px;
            }
            .img-logo {
                height: 40px;
                margin: 10px 0;
            }
            .img-client {
                width: 70px;
                /* margin: 10px 0; */
            }
            .ms-hide{
                display: none;
            }
            .w-50 {
                width: 100%;
            }
            .w-50-ms {
                width: 50%;
            }
            .w-100-ms {
                width: 100%;
            }    
            .w-100-ms:last-child {
                width: 100%;
            }
            .img-thump {
                /* width: 100%; */
            }
            .flex-c-ms{
                flex-direction: column;
                align-items: center;
            }
            .flex-ms{
                display: flex;
                align-items: center;
            }
            .container {
                padding: 0;
                display: block;
                min-height: 100%;
                width: 100%;
                margin: 0;
            }

            .navbar {
                background-color: rgb(0 0 0 / 30%);
                backdrop-filter: blur(10px);
                border-radius: 2rem;
                max-width: 100%;
                position: fixed;
                top: 91%; /* Stay at the top */
                margin: 0;
                padding: 5px 20px;
            }
            :dir(rtl).navbar {
                /* width: 100%; */
                position: fixed;
                top: .5rem; /* Stay at the top */
                /* margin: 0; */
            }
            .main-content {
                margin: 0;
                padding: 30px 2.5rem; /* Adjust for fixed navbar */
            }
            :dir(rtl).main-content {
            }
            .sidebar {
                display: flex;
                position: relative;
                width: 100%;
                height: auto;
                flex-grow: 0;
            }
            .img-side{
            width: 25%;
            height: auto
            }
            .drawer {
                right: -100%;
            }

            .drawer.open {
                right: 0;
            }
        }
        @media (max-width: 500px) {
            section {
            padding: 3.2rem 1.5rem;
            }