last relase ,

css/templatemo-style.css

@@ -327,6 +327,10 @@ p{
     text-align: center;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
+    height: 400px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 #work .card:hover {
@@ -336,7 +340,13 @@ p{
 }
 
 #work .image-container {
+    flex: 4; /* 75% of the card height */
     position: relative;
+    max-width: 100%;
+    height: auto;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    overflow: hidden;
 }
 
 #work .soon-text {
@@ -352,17 +362,25 @@ p{
     border-radius: 5px;
 }
 
+#work .card-body {
+    flex: 1; /* 25% of the card height */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+}
+
 #work .card img {
     max-width: 100%;
     height: auto;
+    object-fit: cover;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
 }
 
-#work .app-name {
-    font-weight: bold;
-    margin-top: 20px;
-    margin-bottom: 20px;
+#work .app-name,
+#work .description {
+    margin: 0;
 }
 
 #work .description {

index.html

@@ -60,48 +60,64 @@ <h2>مشاريعنا</h2>
 				</div>
 				<div class="card-container">
 					<div class="card">
-						<a href="projects/rh_video_splitter/index.html" target="_blank"> <!-- Replace "rh-video-splitter.html" with the actual URL of the page -->
-							<img src="./images/projects/rh-video-splitter/main.jpg" alt="Project 1">
-							<h2 class="app-name">RH Video Splitter</h2>
-							<p class="description">تقسيم مقاطع الفيديو الطويلة إلى مقاطع صغيرة لنشرها على الحالة ووسائل التواصل</p>
+						<a href="projects/rh_video_splitter/home.html">
+							<div class="image-container">
+								<img src="./images/projects/rh-video-splitter/main.jpg" alt="Project 1">
+							</div>
+							<div class="card-body">
+								<h2 class="app-name">RH Video Splitter</h2>
+								<p class="description">تقسيم مقاطع الفيديو الطويلة ومشاركتها على وسائل التواصل</p>
+							</div>
 						</a>
 					</div>
 
 					<div class="card">
-						<img src="./images/projects/rh-video-downloader/main.jpg" alt="Project 2">
-						<h2 class="app-name">RH Video Downloader</h2>
-						<p class="description">تنزيل مقاطع الفيديو من المنصات المختلفة بسهولة</p>
+						<a href="https://play.google.com/store/apps/details?id=com.alqayim.btech">
+							<div class="image-container">
+								<img src="./images/projects/alqayimm-app/main.png" alt="Project 4">
+								<!-- <div class="soon-text">قريباً...</div> -->
+							</div>
+							<div class="card-body">
+								<h2 class="app-name">تطبيق الدين القيم</h2>
+								<p class="description">التطبيق الرسمي لمعهد الدين القيم للعلوم الشرعية</p>
+							</div>
+						</a>
 					</div>
 
 					<div class="card">
 						<div class="image-container">
-							<img src="./images/projects/rh-qr-scanner/main.jpg" alt="Project 3">
+							<img src="./images/projects/rh-video-downloader/main.png" alt="Project 2">
 							<div class="soon-text">قريباً...</div>
 						</div>
-						<h2 class="app-name">RH Wifi QR Scanner</h2>
-						<p class="description">الوصول إلى معلومات شبكة الوايفاي عبر مسح الرمز الشريطي، وحفظها ومشاركتها
-						</p>
+						<div class="card-body">
+							<h2 class="app-name">RH Video Downloader</h2>
+							<p class="description">تنزيل مقاطع الفيديو من المنصات المختلفة بسهولة</p>
+						</div>
 					</div>
 
 					<div class="card">
-						<img src="./images/projects/alqayimm-app/main.jpg" alt="Project 4">
-						<h2 class="app-name">تطبيق الدين القيم</h2>
-						<p class="description">التطبيق الرسمي لمعهد الدين القيم للعلوم الشرعية بإشراف الشيخ علي الرملي
-						</p>
+						<div class="image-container">
+							<img src="./images/projects/rh-qr-scanner/main.png" alt="Project 3">
+							<div class="soon-text">قريباً...</div>
+						</div>
+						<div class="card-body">
+							<h2 class="app-name">RH Wifi QR Scanner</h2>
+							<p class="description">حفظ ومشاركة كلمات مرور لشبكة الوايفاي</p>
+						</div>
 					</div>
-
 				</div>
 			</div>
 		</div>
 		<!-- end work -->
 
+
 		<!-- start contact -->
 		<div id="contact" class="section">
 			<div class="container">
 				<div class="row">
 					<h2>اتصل بنا</h2>
 					<div class="col-lg-6 col-md-6 col-xs-10 wow fadeInUp" data-wow-delay="0.6s">
-						<form role="form" method="post" action="mailto:[email protected]" enctype="text/plain"> 
+						<form role="form" method="post" action="mailto:[email protected]" enctype="text/plain">
 							<input name="name" type="text" class="form-control" id="name" placeholder="الاسم">
 							<input name="email" type="email" class="form-control" id="email" placeholder="الإيميل">
 							<textarea name="message" rows="5" class="form-control" id="message"
@@ -122,10 +138,12 @@ <h2>اتصل بنا</h2>
 					<div class="col-md-12 wow fadeIn" data-wow-delay="0.9s">
 						<hr>
 						<ul class="social-icon">
-							<li><a href="https://www.facebook.com/rahbadev/" class="fa fa-facebook" target="_blank"></a></li>
+							<li><a href="https://www.facebook.com/rahbadev/" class="fa fa-facebook" target="_blank"></a>
+							</li>
 							<li><a href="https://twitter.com/rahbadev" class="fa fa-twitter" target="_blank"></a></li>
 							<li><a href="https://github.com/rahbadev" class="fa fa-github" target="_blank"></a></li>
-							<li><a href="https://play.google.com/store/apps/dev?id=6736668226615202750" class="fa-brands fa-google-play" target="_blank"></a></li>
+							<li><a href="https://play.google.com/store/apps/dev?id=6736668226615202750"
+									class="fa-brands fa-google-play" target="_blank"></a></li>
 						</ul>
 					</div>
 				</div>