html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'Lama Sans';
  src: url('fonts/LamaSans-Regular.woff2') format('woff2'),
       url('fonts/LamaSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lama Sans';
  src: url('fonts/LamaSans-SemiBold.woff2') format('woff2'),
       url('fonts/LamaSans-SemiBold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Lama Sans';
  src: url('fonts/LamaSans-Bold.woff2') format('woff2'),
       url('fonts/LamaSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: 'Lama Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;

}

/** Header **/

header {
  background-color: #4f059f;
  height: 150px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

img.logos {
  height: 100px;
}

/** Hero **/

.hero {
  padding: 120px 0;
  position: relative;
}

.hero .price{
  font-size: 1.5em;
  font-weight: bold;
  color: #e85c00;
}

.title {
  margin-bottom: 60px;
  font-size: 60px;
  font-weight: 700;
}

.title-white {
  color: white;
  font-size: 50px;
}

.sub-title {
  margin-bottom: 40px;
  font-size: 35px;
  font-weight: 400;
}

.text-700 {
  font-weight: 700;
  font-size: 35px;
  text-align: justify;
}

.text-500 {
  font-weight: 500;
  font-size: 35px;
  text-align: justify;
}

.text-400 {
  font-weight: 400;
  font-size: 35px;
  text-align: justify;
}

.container {
  max-width: 1024px !important;
  margin: 0 auto;
}

.lang {
  position: absolute;
  top: 120px;
  right: 10px;
}

.lang a{
  text-align: right;
  text-decoration: none;
  font-weight: 700;
  color:#4f059f;
  background-color: whitesmoke;
  margin-bottom: 8px;
  overflow: hidden;
  width: 32px;
  white-space: nowrap;
  direction : rtl;
  display: inline-block;
  transition: all .3s ease-in .1s;
}

.lang a.ar:hover {
  width: 82px;
  transition: all .3s ease-out .1s;
}

.lang a.active {
  width: fit-content !important;
}

.lang a.fr:hover {
  width: 100px;
  transition: all .3s ease-out .1s;
}

.hero .video {
  max-width: 1024px;
  border: 0px solid #ccc;
  margin-top: 50px;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 1024px; /* Max width for the video */
  margin: 0 auto;   /* Center the video */
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero .steps{
  /* max-width:728px; */
  margin: 70px auto;
}

.hero .steps .icon-32 {
  width: 32px;
  height: 32px;
  margin-top: 10px;
}

.steps .icon-90 {
  width: auto;
  height: 90px !important;
  margin-bottom: 20px;
}

.call-to-action {
  background-color: #e85b00 !important;
  color: white !important;
  display: inline-block;
  padding: 8px 40px;
  margin-top: 50px;
  border-radius: 40px 40px 0px 40px;
  box-shadow: 5px 5px 0px 0px #5914a5;
  cursor: pointer;
  font-size: 30px;
  font-weight: 700;
}


.call-to-action:hover {
  box-shadow: 6px 6px 0px 0px #5914a5;
  transition: all 2s ease; /* Hover delay effect */
}


.call-to-action:active {
  box-shadow: 0px 0px 0px 0px #5914a5;
  transform: translateY(4px); /* Push the button down slightly */
  transition: all 0.2s ease;
  outline: none;
}


/** idea **/

.idea {
  padding: 120px 0;
  background-color: #ede8f4;
}

/** processus **/
.processus {
  padding: 120px 0;
  background-color: #4f059f;
}

.processus .container{
  position: relative;
}

.processus h3 {
  color: white;
  font-size: 20;
  font-weight: 700;
}

.processus p {
  color: white;
  font-size: 20px;
  font-weight: 500;
}

.processus .lamp, .processus .bubble {
  position: absolute;
  width: 200px;

}

.processus .lamp {
  top: -290px;
  right: -140px;
  transform: rotate(10deg);
}

.processus .bubble {
  bottom: -220px;
  left: -140px;
}

.proces-step-item, .proces-step-item-ar {
  position: relative;
}

.proces-step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 30%; /* Adjust as needed to align vertically */
  right: -50px; /* Adjust based on the image size */
  transform: translateY(-50%);
  width: 100px; /* Adjust to your image width */
  height: 100px; /* Adjust to your image height */
  background-image: url('img/Arrow.svg'); /* Replace with your image path */
  background-size: contain;
  background-repeat: no-repeat;
}

/* RTL Adjustments */
.processus:dir(rtl) .proces-step-item:not(:last-child)::after {
  left: -50px; /* Adjust position for RTL */
  right: auto;
  transform: translateY(-50%) scaleX(-1); /* Flip image horizontally */
}

/** almouwakib **/
.almouwakib {
  padding: 120px 0;
  background-color: #f7f7ff;
}

.form-almouwakib {
  padding: 120px 0;
  background-color: #fff9f4;
}

.form-almouwakib form {
  background-color: #f3d300;
  padding: 20px;
  border-radius: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.form-almouwakib  #alert-container {
  max-width: 640px;
  margin: 0 auto;

}

.form-almouwakib form label{
  font-weight: 500;

}

.form-almouwakib form .form-group{
  margin-bottom: 20px;
}

.form-almouwakib form input[type="text"], .form-almouwakib form input[type="email"], .form-almouwakib form input[type="date"], .form-almouwakib form select{
  padding: 10px;
  border: 1px solid #a58900;
  height: 50px;
}

.form-almouwakib .container {
  position: relative;
}

.form-almouwakib .rocket {
  position: absolute;
  top: -200px;
  right: -140px;
  width: 200px;
}

footer {
  background-color: #4f059f;
  color: white;
}

footer img  {
    max-width: 200px;

}

footer .contact-info {
  margin-top: 30px;
}

footer .contact-info a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}

footer .cpoyright {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 500;
  background-color: #ede8f4;
  padding: 10px;
  color: #743ab3;
}



/*--------------------------------------------------------------
3. Animsition preloader
--------------------------------------------------------------*/
body {
	overflow: hidden;
}

.loader:before,
.loader:after {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	background: #4f059f;
    -webkit-transition: 1s cubic-bezier(.858, .01, .068, .99); 
    	-o-transition: 1s cubic-bezier(.858, .01, .068, .99); 
			transition: 1s cubic-bezier(.858, .01, .068, .99);
}

.loader:before {
	left: 100%;
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	        transform: translateX(-100%);
	visibility: visible;
}

.loader:after {
	left: -100%;
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
    visibility: hidden;
    -webkit-transition-delay: .5s;
        -o-transition-delay: .5s;
            transition-delay: .5s;
}

/* 3.2. Loading animation */
.loading {
  	position: fixed;
  	top: calc(50% - 200px);
  	left: calc(50% - 100px);
  	visibility: visible;
  	-webkit-transition: .5s cubic-bezier(.76, .06, .85, .07);
  		-o-transition: .5s cubic-bezier(.76, .06, .85, .07);
  			transition: .5s cubic-bezier(.76, .06, .85, .07);
  	z-index: 101;
  	width: 200px;
  	height: 200px;
}

.loading:before {
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid #4f059f;
	border-left-color: white;
	-webkit-animation: 1.2s loading-anim cubic-bezier(.767, .01, .18, 1.01) infinite both;
  	    animation: 1.2s loading-anim cubic-bezier(.767, .01, .18, 1.01) infinite both;
  	border-radius: 50%;        
  	display: block;
}

.logo-loading {
	width: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  	    -ms-transform: translate(-50%, -50%);
  	        transform: translate(-50%, -50%);
}

@-webkit-keyframes loading-anim {
	
  	0% {
    	-webkit-transform: rotate(0deg);
    	    transform: rotate(0deg);
  	}
  	
  	100% {
    	-webkit-transform: rotate(360deg);
    	    transform: rotate(360deg);
  	}
  	
}

@keyframes loading-anim {
	
  	0% {
    	-webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  	}
  	
  	100% {
    	-webkit-transform: rotate(360deg);
   	        transform: rotate(360deg);
  	}
  	
}

/* 3.3. Add class after preloader */
body.in {
	overflow: visible;
	overflow-x: hidden;
}

.loader.in:before {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
    visibility: hidden;
}

.loader.out:after {
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	        transform: translateX(100%);
    visibility: visible;
}

body.in .loading {
	opacity: 1;
  	visibility: visible;
}


@media (max-width: 768px) {
  img.logos {
    width: 45%;
  } 

  .processus .proces-step-item::after {
    background: none !important;
  }

  .title {
    font-size: 40px;
  }

  .sub-title, .text-700, .text-500, .text-400 {
    font-size: 25px;
  } 
  
  .lang {
    top: 40px;
  }

  .hero .video {
    max-width: 100%;
  }

  .hero .steps {
    max-width: 100%;
  }

  .hero .steps .icon-32 {
    width: 32px;
    height: 32px;
    margin-top: 10px;
  }

  .steps .icon-90 {
    width: auto;
    height: 90px !important;
    margin-bottom: 10px;
  }

  .call-to-action {
    font-size: 20px;
  }

  


  .processus h3 {
    font-size: 20px;
  } 

  .processus p {
    font-size: 20px;
  }
  
  .lamp {
    display: none;
  }

  .bubble {
    display: none;
  }


  .almouwakib img {
    max-width: 100%;
  }

  .form-almouwakib form {
    max-width: 100%;
  }

  .form-almouwakib .rocket {
    display: none;
  }

  footer img  {
    max-width: 150px;
  }

  footer .contact-info a {
    font-size: 14px;
  }

  footer .cpoyright {
    font-size: 12px;
  }
  
}