/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.revo-slider-emphasis-text {
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -1px;
	font-family: 'Poppins', sans-serif;
	padding: 15px 20px;
	border-top: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
}
.revo-slider-desc-text {
	font-size: 20px;
	font-family: 'Lato', sans-serif;
	width: 650px;
	text-align: center;
	line-height: 1.5;
}
.revo-slider-caps-text {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3px;
	font-family: 'Poppins', sans-serif;
}
.tp-video-play-button {
	display: none !important;
}
.tp-caption {
	white-space: nowrap;
}

.logo-dark {	margin-top: 10px;
	width: 100px !important;
	height: auto !important;
}
.logo-default {
	width: 100px !important;
	height: auto!important;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}



/*---------------------------------------------------*/

	.home-about { text-align: right; direction: rtl; font-family: cairo; }	
	.home-about h2 { font-size: 24px; font-weight: bold; color:#007b4f !important; font-family: cairo;}
	.home-about h4 { font-size: 22px;color:#007b4f !important; font-family: cairo;}
	.home-about-image img { width:100%; border-radius: 10px;}
	.home-about .content {color:#333 !important; font-size: 16px; margin-bottom: 15px; overflow: hidden;}
	.home-about a { background-color: #007b4f; width:100px; text-align: center;padding: 10px; border-radius: 8px; color:#fff; padding-left: 15px; padding-right: 15px; }
	
/*------------------------ shapes home ---------------*/

.yellow-box {
  display: flex;
  flex-direction: column;
  background: #f3f8ec;
  padding: 20px;
  border-radius: 10px;
  height: 260px;
  font-family: 'Cairo', sans-serif;
  direction: rtl; /* Right-to-left layout */
  text-align: right;
}

.yellow-box .header-row {
  display: flex;
  flex-direction: row-reverse; /* icon first, then title */
  align-items: center;
  justify-content: flex-end; /* push both to the far right */
  gap: 10px; /* space between icon and title */
  margin-bottom: 10px;
}

.yellow-box img {
  width: 70px;
  height: auto;
}

.yellow-box h2 {
  font-family: cairo;
  margin: 0;
  font-size: 25px;
  line-height: 1;
}

.yellow-box .text {
  font-size: 16px;
  line-height: 1.6;
}



/*-------------------------------------------*/
	  
section {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Between Section 1 and Section 2 (left shape) */
#section2::before {
  content: "";
  position: absolute;
  top: -340px; /* how much it overlaps upward into section1 */
  left: 0;
  width: 720px;
  height: 600px; /* adjust as needed */
  background: url("../images/line-bg-left.png") no-repeat left center;
  background-size: auto 60%;
  z-index: 999;
  pointer-events: none;
}

/* Between Section 2 and Section 3 (right shape) */
#section3::before {
  content: "";
  position: absolute;
  top: -250px; /* overlaps upward into section2 */
  right: 0;
  width: 600px;
  height: 600px;
  background: url("../images/line-bg-right.png") no-repeat right center;
  background-size: auto 60%;
  z-index: 999;
  pointer-events: none;
}

/*----------------- Our Values -------------------*/

	  .section-name { font-size: 22px; color:#fff; font-weight: bold; text-align: center;margin-bottom: 20px;}
	  .gray-box { direction: rtl; text-align: right; background-color: #f5f5f5; padding: 15px; border-radius: 10px; font-family: cairo; height: 225px;}
	  .gray-box img { width:50px;}
	  .gray-box  h2 { font-size: 18px; font-family: cairo}

/*---------------------------------- Footer ------------------------*/

	.footer-logo { width:95px;}	
	.footer-social a {color: #007b4f; font-size: 20px;}
	.green-line { width: 100%; color:#007b4f; border: 2px solid #007b4f;opacity: 1}
	
	.footer-menu { display: flex; list-style: none; flex-direction: row-reverse; position: relative; z-index: 9999}
	.footer-menu li { padding: 10px;}
	.footer-menu li a { text-decoration: none; color: #007b4f; font-size: 18px; font-family: cairo; }
	.footer-menu li a:hover { color:#333 !important;}
	
	.footer-box { text-align: right;font-family: cairo; }
	.footer-box h2 { font-size: 16px; font-weight: bold; color: #007b4f; font-family: cairo}
	.footer-box .text { font-size: 14px;; color:#333; }


/*------------------------------------------------------*/


	.timeline-container { margin-top: 35px; position: relative; width: 80%;
    padding-left: 165px; font-family: cairo}
	
	
	.timeline-line {
    position: absolute;
    right: -100px;
    top: 0;
    width: 3px;
    height: 100%;
    background: #4CAF50;	
	}
	
	.timeline-line-top {   
	position: absolute;
    right: -100px;
    top: 0;
    width: 50px;
    height: 2px;
    background: #4CAF50;}
	
	
	.timeline-line-bottom {   
	position: absolute;
    right: -100px;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #4CAF50;}
	
	
.timeline-item {
	font-family: cairo;
            display: flex;
            align-items: flex-start;
            margin-bottom: 120px;
            position: relative;
            opacity: 0.3;
            transition: opacity 0.5s ease;
	
        }

        .timeline-item.active {
            opacity: 1;
        }

        /* Alternating layout */
        .timeline-item:nth-child(odd) {
            flex-direction: row-reverse;
            text-align: right;
        }

        .timeline-item:nth-child(even) {
            flex-direction: row;
            text-align: left;
        }

        /* Dot on timeline */
        .timeline-dot {
            position: absolute;
            right: -109px !important;  /* Centered on the 3px line */
            top: 50px;
            width: 16px;
            height: 16px;
            background: #fff;
            border: 3px solid #4CAF50;
            border-radius: 50%;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .timeline-item.active .timeline-dot {
            background: #4CAF50;
            width: 20px;
            height: 20px;
            right: -11px;
            border: 3px solid #4CAF50;
            box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
        }

        /* Content wrapper */
        .timeline-content {
			font-family: cairo;
            flex: 1;
            padding: 0 80px;
			text-align: right; direction: rtl;
        }

        /* Image Circle */
        .timeline-image {
            position: relative;
            width: 280px;
            height: 280px;
            flex-shrink: 0;
        }

.timeline-title { font-family: Cairo;  color:#007b4f; font-weight: bold}
	
	

	@media (max-width: 768px) {
		
		.timeline-line { left:0;}
		.timeline-dot { left:-8px;}
		.timeline-content {    padding: 0 40px;}
		.timeline-container  { padding-left: 0px;}
		
.timeline-item {
    flex-direction: column !important;   /* Stack vertically */
    align-items: center;
    text-align: center;
  }

  .timeline-content {
    width: 100%;
            padding-left: 25px;
        padding-right: 25px;                        /* Remove side padding */
    margin-bottom: 30px;                 /* Add spacing before the image */
  }

  .timeline-image {
    width: 100%;                         /* Full width for image container */
    height: auto;
    display: flex;
    justify-content: center;
  }

  .image-circle {
    width: 240px;                        /* Keep nice round image on center */
    height: 240px;
  }

  .timeline-dot {
    left: 50%;
    transform: translateX(-50%);
  }
		
		.page-header { height: 210px;}
		.col-5 , .col-7{ width:100%}


		
	}

/*-------------- Green Box-------------------*/

.green-box {}
	
	.green-box h2 {
		font-size: 20px;
		font-weight: bold;
		color: #ffbd1a !important
	}
	
	.green-box h3 {
		font-size: 18px;
		color: #007b4f !important
	}
	
	.green-box-image img {
		width: 100%;
		border-radius: 10px;
	}
	
	.green-box .brief {
		color: #fff !important;
		font-size: 15px;
		margin-bottom: 15px;
		overflow: hidden;
	}
	
	.green-btn {
		background-color: #007b4f;
		width: 100px;
		text-align: center;
		padding: 10px;
		border-radius: 8px;
		color: #fff;
	}