.bg {
  position: relative;
  overflow: visible; /* Ensure the skewed background does not overflow */
  height: 50vh;
}

.bg::before {
  content: "";
  position: absolute;
  top: -50px; /* Adjust as needed */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1e1e1e;
  transform: skewY(-3deg); /* Skew the background color */
  z-index: -1; /* Place the pseudo-element behind the content */
  transform-origin: top left; /* Ensure the skew starts from the top left corner */
}



.title {
  position: relative;
}

.title h2,
.title h4 {
  color: white;
  background-color: #000; /* Background color matching the image */
  padding: 10px 20px;
}

.title h2 {
  font-size: larger !important;
  border: 2px solid white;
  background-color: white;
  margin: 0;
  color: black;
  border-radius: 0; /* Square border */
}

.title h4 {
  margin: 0;
  border: 2px solid #f36c22; /* Orange border matching the image */
  background-color: #f36c22;
  border-radius: 0; /* Square border */
  margin-top: 8px; 
}
.passengerLogo {
  width: 50%;
}
.title-section {
  border-bottom: 3px solid #f36e21; /* Apply border color only to the top */
}


  .small-icon{

 width: 40px ;
 padding: 1px !important;
 margin: 5px !important;


  }
  .shield{

    width: 50%;


  }
  .large-icon{

    width: 55px;
    margin-bottom: 20px;

  }
  .fa-square{

    font-size: 15px;
  }

  .main p {
    padding: 20px 0;
  }
  
  
  
  .main p::after{
  
    content: "";
    animation-name: moveletters ;
    animation-duration:  5s;
   animation-iteration-count: infinite;
  }
  @keyframes moveletters {
    1%{content: "❯ج";}
    2%{content: "❯جد";}
     3%{content: "❯جدو";}
     4%{content: "❯جدولة";}
    5%{content: "❯جدولة و ";}
    6%{content: "❯جدولة و خ";}
    7%{content: "❯جدولة و خط";}
     8%{content: "❯جدولة و خطط";}
     9%{content: "❯جدولة و خطط ل";}
    10%{content: "❯جدولة و خطط لل";}
    11%{content: "❯جدولة و خطط للص";}
    12%{content: "❯جدولة و خطط للصي";}
    13%{content: "❯جدولة و خطط للصي";}
    14%{content: "❯جدولة و خطط للصيا";}
     15%{content: "❯جدولة و خطط للصيان";}
     16%{content: "❯جدولة و خطط للصيانة";}
     17%{content: "❯جدولة و خطط للصيانة ا";}
    18%{content: "❯جدولة و خطط للصيانة ال";}
    19%{content: "❯جدولة و خطط للصيانة الش";}
    20%{content: "❯جدولة و خطط للصيانة الشا";}
    21%{content: "❯جدولة و خطط للصيانة الشام";}
     22%{content: "❯جدولة و خطط للصيانة الشامل";}
     23%{content: "❯جدولة و خطط للصيانة الشاملة";}
     24%{content: "❯جدولة و خطط للصيانة الشاملة و";}
     25%{content: "❯جدولة و خطط للصيانة الشاملة و ا";}
     26%{content: "❯جدولة و خطط للصيانة الشاملة و ال";}
     27%{content: "❯جدولة و خطط للصيانة الشاملة والد";}
     28%{content: "❯جدولة و خطط للصيانة الشاملة والدو";}
      29%{content: "❯جدولة و خطط للصيانة الشاملة و الدور";}
      30%{content: "❯جدولة و خطط للصيانة الشاملة و الدورية";}
      31%{content: "❯ إ";}
     32%{content: " ❯ إج";}
      33%{content: "❯ إجر";}
      34%{content: "❯ إجراء ";}
      35%{content: "❯ إجراء ال";}
      36%{content: "❯ إجراء التر";}
      37%{content: "❯ إجراء الترقيا";}
      38%{content: "❯ إجراء الترقيات ";}
      39%{content: "❯ إجراء الترقيات و";}
      40%{content: "❯ إجراء الترقيات وا";}
      41%{content: "❯ إجراء الترقيات وال";}
      42%{content: "❯ إجراء الترقيات والتح";}
      43%{content: "❯ إجراء الترقيات والتحديثات";}
      44%{content: "❯ إجراء الترقيات والتحديثات ل";} 
     45%{content: "❯ إجراء الترقيات والتحديثات لتح";}
     46%{content: "❯ إجراء الترقيات والتحديثات لتحسي";}
     47%{content: "❯ إجراء الترقيات والتحديثات لتحسين";}
     48%{content: "❯ إجراء الترقيات والتحديثات لتحسين ا";}
     49%{content: "❯ إجراء الترقيات والتحديثات لتحسين ال";}
     50%{content: "❯ إجراء الترقيات والتحديثات لتحسين الأد";}
     51%{content: "❯ إجراء الترقيات والتحديثات لتحسين الأدا";}
     52%{content: "❯ إجراء الترقيات والتحديثات لتحسين الأداء";}
  
      
  }

  .titles p {
    font-size: 1rem;
    position: relative;
    align-self: center;
    margin-top: 15px;
  }
  
  .titles p::after {
    content: "";
    width: 25%;
    height: 3px;
    background-color:  #f26522;
    position: absolute;
    left: 37%;
    top: 90px;
    border-radius: 9px;
  }
  
  /* Remove underline on small screens */
  @media (max-width: 768px) {
    .titles p::after {
      content: none;
    }
  }
  
  .custom-button {
    background-color: #f26522; /* Orange background color */
    color: white; /* White text color */
    border-radius: 10px; /* Rounded corners */
    padding: 15px 30px; /* Padding inside the button */
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text */
    cursor: pointer; /* Pointer cursor on hover */
    position: relative; /* For positioning the shadow */
    display: inline-block; /* Make the button inline-block */
    border-bottom: 3px solid black; /* Apply border color only to the top */
  }
  
  .custom-button .icon {
    margin-left: 10px; /* Space between text and icon */
  }
  

  
  .custom-button:hover {
    background-color: #e5531b; /* Darker shade on hover */
  }
  
  
  h4 ul li {
    list-style-type: square;
  }
  .maintenance{

    background: #eaeaeab9;
    padding: 10px; 


  }

  .logo {
    width: 60px !important;
  }
.main-bg-icon{

width: 5%;


}
  


 



.arrow {
  animation: bounce 2s infinite;
}

.arrow:hover {
  animation: hover-bounce 1s infinite;
}
@keyframes hover-bounce {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-15px);
  }
  100% {
      transform: translateY(0);
  }
}







footer {
	background: #1E1E1E;
	padding: 20px 0;
}
.single-content {
	text-align: center;
	padding: 115px 0;
}
.single-box p {
	color: #fff;
	line-height: 1.9;
}
.single-box h3 {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}
.single-box .card-area i {
	color: #ffffff;
	font-size: 20px;
	margin-right: 10px;
}
.single-box ul {
	list-style: circle;
  color: white;
	padding: 0;
  margin: 15px;
}
.single-box ul li a {
	text-decoration: none;
	color: #fff;
	line-height: 2.5;
	font-weight: 100;
}
.single-box h2 {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
#basic-addon2 {
	background: #fe1e4f;
	color: #fff;
}
.socials i {
	font-size: 18px;
	margin-right: 15px;
}
@media (max-width: 767px) {
	.single-box {
		margin-bottom: 50px;
	}
  .single-box {
    text-align: center;
  }
  
  .single-box  a {
    display: inline-block;
    margin-top: 10px;

  } 
  .single-box ul {
    list-style: none;
  
  }
}
@media (min-width: 768px) and (max-width: 991px) {
	.single-box {
		margin-bottom: 50px;
	}

  .single-box {
    text-align: center;
  }
  
  .single-box  a {
    display: inline-block;
    margin-top: 10px;

  } 
  .single-box ul {
    list-style: none;
  
  }
  
}
.socials i {
  display: inline-block;
  width: 40px; /* Adjust the size as needed */
  height: 40px; /* Adjust the size as needed */
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc; /* Optional: Adds a border to the square */
  border-radius: 5px; /* Optional: Adjusts the corners (0px for a perfect square) */
  margin: 2px; /* Optional: Adds space between the icons */
  font-size: 20px;

}
 .call {
  text-align: center;
}

.call  a {
  display: inline-block;
  margin-top: 10px;
} 
.callus{
border: 2px solid #f36e21;
border-radius: 5px;
padding: 3px;
color: white;
text-decoration: none;


}
.callus:hover{
color: white;

}
.main-hr{

width: 80%;
border: solid 1px  #f36e21;
  
}
h2{
color: #f36e21 !important;
font-size: 16px !important;

}
 /* Default styling for large screens */
 .space {
  height: 20vh;
  width: 100%;
}

/* For tablets in portrait mode and small desktops */
@media (max-width: 992px) {
  .space {
    width: 100%;
    height:  70vh; /* Adjust the height as needed */
  }
}

/* For tablets in landscape mode and large phones */
@media (max-width: 768px) {
  .space {
    width: 100%;

    height: 70vh; /* Adjust the height as needed */
  }
}

/* For small phones */
@media (max-width: 576px) {
  .space {
    width: 100%;

    height: 50vh; /* Adjust the height as needed */
  }
}

/* For extra small devices */
@media (max-width: 375px) {
  .space {
    width: 100%;

    height: 200vh; /* Adjust the height as needed */
  }
}