@charset "utf-8";
/* CSS Document */
.icon-flag , .icon-chart{
	float: left;
	width: 46px;
	height: 59px;
	margin-right: 5px
	
}
.feature-box {
    width: 90%;
    background: #ffffff;
    padding: 10px;
    box-shadow:  0 0 40px 5px rgb(0 0 0 / 5% );
    display: flex;
    align-items: center;
    gap: 20px;
    direction: rtl; /* IMPORTANT for Arabic */
    position: relative;
    border-radius: 100px 100px 100px 0;
    margin-bottom: 30px;
    transition: all .5s 
ease-in-out;
}
.feature-box:hover {
    transform: translateY(4px);
}
.feature-number {
    
    position: absolute;
    top: -12px;
    right: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: var(--primary-color);
    line-height: 1;
    padding: 4px 10px;
    border-radius: 50px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.feature-iconv {
    width: 60px;
    height: 60px;
    text-align: center;
    background: var(--primary-color);
    border-radius: 50px;
}
.feature-content{
	width: 80%;
}
.feature-iconv img {
    width: 40px;
	height: 40px;
	filter: brightness(0) invert(1);
	margin-top: 10px
}

.feature-content h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    color: #1f2358;
	text-align: right
}

.feature-content p {
    margin: 5px 0 0 0;
    color: #666;
    line-height: 1.7;
	font-size: 16px;
	text-align: right
}

    .about-section {
      width: 100%;
      padding-left: 0%;
      padding-right: 0%;
		margin-top: 50px;
		margin-bottom: 20px;
		direction: rtl;
		  font-family: 'Cairo', 'Amiri', sans-serif;

    }

    .about-left {
      position: relative;
      float: right;
      height: 700px;
      width: 50%;
      padding-right: 5%
    }

    .about-right {
      width: 43%;
      float: left;
      padding-right: 2%;
      height: 700px;
		position: relative
    }
.makebottom{
	position: absolute;
	width: auto;
	bottom: 2%
}
    .about-left .image1 {
      width: 40%;
      height: 400px;
      z-index: 1;
      position: absolute;
      right: 15%;
			border-radius: 50% / 40% 40% 40% 40%;
border: 12px solid #ffffff;	top: 10%;

    }

    .about-left .image2 {
	width: 35%;
	height: 350px;
	z-index: 2;
	position: absolute;
	top: 15%;
	border: 12px solid #ffffff;
	left: 14%;
	border-radius: 50% / 40% 40% 40% 40%;
    }

    .about-left .circlepark {
      position: absolute;
      top: 0px;
      left: 0px;
      animation: topToBottom 4000ms ease-in-out infinite;
      animation-delay: 500ms;
		width: 35%;
    }

    .exp-box {
      position: absolute;
      bottom: 2%;
      right: 20%;
      background: #63ab45;
      color: #fff;
      padding: 25px 10px;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      z-index: 2;
      width: 30%;
      height: 100px
    }

    .exp-box img {
      float: left
    }

    .exp-box span {
      font-size: 26px
    }

    .about-right .abouthold {
      color: #ff6a00;
      margin: 0;
      font-size: 16px;
      width: 150px;
      background-color: rgba(247, 146, 30, 0.1);
      height: 30px;
      border-radius: 5px;
      text-align: center;
      overflow: hidden;
    }
	   .about-right .abouthold h6 {
		     font-family: 'Cairo', 'Amiri', sans-serif;
     line-height: 0px;
		   padding-top: 0px;
		   margin-top: 15px;
		   font-size: 24px;
		   font-weight: 400;
		   color: var(--secondary-color)
    }

    .about-features {
      display: flex;
      margin: 20px 0;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
    }

    .about-features div {
      flex: 1;
      margin-right: 20px;
    }

    .about-features div:last-child {
      margin-right: 0;
    }

    .about-features h4 {
      font-size: 16px;
      margin-bottom: 5px;
      color: #111;
    }

    .btn-discover {
      display: inline-block;
      background: var(--primary-color);
      color: #fff;
      padding: 12px 28px;
      border-radius: 30px;
      font-weight: bold;
      text-decoration: none;
      transition: 0.3s ease;
    }

    

    .about-two__element-one {
      position: absolute;
      left: 0;
      bottom: 5%;
      animation: topToBottom 4000ms ease-in-out infinite;
      z-index: -1;
      animation-delay: 500ms;
    }

    @keyframes topToBottom {
      0% { transform: translateY(0); }
      50% { transform: translateY(15px); }
      100% { transform: translateY(0); }
    }

    /* ---------- Animation Styles ---------- */
.about-right p{
	  font-family: 'Cairo', 'Amiri', sans-serif;

	color:rgb(89, 89, 89);
	font-weight: 400
}
.about-right h2{
	  font-family: 'Cairo', 'Amiri', sans-serif;
    line-height: 34px;
	font-size: 30px;
	color: rgb(29, 35, 31);
	font-weight: 800
}
    .about-right h6,
    .about-right h2 {
      opacity: 0;
    }

    .about-right h6.show {
      animation: fadeInRight 1s forwards;
    }

    .about-right h2.show {
      animation: slideInLeft 1s forwards;
      animation-delay: 0.3s;
    }

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
@media(max-width:992px){
	.about-left .image1 {
		      width: 60%;
      height: 300px;

		right:2%;
    }
	.about-left .image2 {
       width: 50%;
      height: 300px;
		left: 1%
    }
	.exp-box {
      position: absolute;
      bottom: 2%;
      left: 20%;
		right: auto;
      background: #63ab45;
      color: #fff;
      padding: 25px 10px;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      z-index: 2;
      width: 50%;
      height: 100px
    }
	.about-left {
      float: none;
      height: 500px;
      width: 95%;
      padding-left: 5%;
		margin-bottom: 10px
    }

    .about-right {
      width: 95%;
      float: none;
      padding-left: 5%;
      height: 800px
    }
	.about-right h2{
	font-size: 30px;
}
	
}