apply in section 9

index.html

@@ -475,32 +475,43 @@
   <section class="py-16 px-4 sm:px-6 lg:px-8 bg-[var(--vlc-tint)]">
     <div class="max-w-6xl mx-auto">
       <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-8 text-center" data-aos="fade-up">Resources</h2>
-      <div class="grid md:grid-cols-4 gap-6">
-        <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up">
-          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Questions-1.png" alt="Essential Questions to Ask" class="w-full h-40 object-cover rounded mb-4 hovered-element">
-<h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-2">Essential Questions to Ask</h4>
-          <p class="text-gray-600 mb-4">With a cloud-based solution, these are some of the main questions that should be asked to potential providers.</p>
-<button class="btn-primary w-full py-2 rounded-md font-medium" onclick="document.getElementById('downloadResource').value='Essential Questions to Ask'; openDownloadModal('Ask_sendEmailToCustomer.php')">Download</button>
-</div>
-        <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
-          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Migration-2.png" alt="Migrating From GP to dynamics 365 business central" class="w-full h-40 object-cover rounded mb-4 hovered-element">
-<h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-2">Migration of GP to Dynamics 365 Business Central</h4>
-          <p class="text-gray-600 mb-4">The shift towards the new ERP is now easier with the professional advice of VLC.</p>
-<a href="https://www.vlcsolutions.com/migrating-from-microsoft-gp-to-dynamics-365-business-central.html" class="btn-primary w-full py-2 rounded-md font-medium inline-block text-center">Learn More</a>
+      <div class="grid md:grid-cols-4 gap-8">
+        <div class="resource-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg" data-aos="fade-up">
+          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Questions-1.png" alt="Essential Questions to Ask" class="w-full mb-4 hovered-element">
+          <div class="resource-card-content">
+            <h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Essential Questions to Ask</h4>
+            <p class="text-gray-600 mb-5">With a cloud-based solution, these are some of the main questions that should be asked to potential providers.</p>
+            <button class="resource-card-btn btn-primary w-full py-3 rounded-lg font-medium" onclick="document.getElementById('downloadResource').value='Essential Questions to Ask'; openDownloadModal('Ask_sendEmailToCustomer.php')">Download</button>
+          </div>
+        </div>
+        
+        <div class="resource-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg" data-aos="fade-up" data-aos-delay="100">
+          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Migration-2.png" alt="Migrating From GP to dynamics 365 business central" class="w-full mb-4 hovered-element">
+          <div class="resource-card-content">
+            <h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Migration of GP to Dynamics 365 Business Central</h4>
+            <p class="text-gray-600 mb-5">The shift towards the new ERP is now easier with the professional advice of VLC.</p>
+            <a href="https://www.vlcsolutions.com/migrating-from-microsoft-gp-to-dynamics-365-business-central.html" class="resource-card-btn btn-primary w-full py-3 rounded-lg font-medium inline-block text-center">Learn More</a>
+          </div>
+        </div>
+        
+        <div class="resource-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg" data-aos="fade-up" data-aos-delay="150">
+          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Enhance-3.png" alt="Enhance Your Organization in the Cloud" class="w-full mb-4 hovered-element">
+          <div class="resource-card-content">
+            <h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Enhance Your Organization in the Cloud</h4>
+            <p class="text-gray-600 mb-5">Learn how the cloud-based ERP in Microsoft can enable your business to be efficient and grow.</p>
+            <button class="resource-card-btn btn-primary w-full py-3 rounded-lg font-medium" onclick="document.getElementById('downloadResource').value='Enhance Your Organization in the Cloud'; openDownloadModal('empower_organization.php')">Download</button>
+          </div>
+        </div>
+        
+        <div class="resource-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg" data-aos="fade-up" data-aos-delay="200">
+          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Make-4.png" alt="Make intelligent Business Decisions" class="w-full mb-4 hovered-element">
+          <div class="resource-card-content">
+            <h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Make intelligent Business Decisions</h4>
+            <p class="text-gray-600 mb-5">Transform data into insights with Business Central, empowering smart, quick decisions for admins and employees.</p>
+            <button class="resource-card-btn btn-primary w-full py-3 rounded-lg font-medium" onclick="document.getElementById('downloadResource').value='Make intelligent Business Decisions'; openDownloadModal('sendEmailtoABD.php')">Download</button>
+          </div>
         </div>
-        <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="150">
-          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Enhance-3.png" alt="Enhance Your Organization in the Cloud" class="w-full h-40 object-cover rounded mb-4 hovered-element">
-<h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-2">Enhance Your Organization in the Cloud</h4>
-          <p class="text-gray-600 mb-4">Learn how the cloud-based ERP in Microsoft can enable your business to be efficient and grow.</p>
-<button class="btn-primary w-full py-2 rounded-md font-medium" onclick="document.getElementById('downloadResource').value='Enhance Your Organization in the Cloud'; openDownloadModal('empower_organization.php')">Download</button>
-</div>
-        <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
-          <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Make-4.png" alt="Make intelligent Business Decisions" class="w-full h-40 object-cover rounded mb-4 hovered-element">
-<h4 class="text-xl font-bold text-[var(--vlc-navy)] mb-2">Make intelligent Business Decisions</h4>
-          <p class="text-gray-600 mb-4">Transform data into insights with Business Central, empowering smart, quick decisions for admins and employees.</p>
-<button class="btn-primary w-full py-2 rounded-md font-medium" onclick="document.getElementById('downloadResource').value='Make intelligent Business Decisions'; openDownloadModal('sendEmailtoABD.php')">Download</button>
 </div>
-      </div>
     </div>
   </section>
   <!-- Download Modal -->

style.css

@@ -1,10 +1,46 @@
 
 .hovered-element:hover {
-  transform: translateY(-2px);
-  transition: transform 0.3s ease;
+  transform: translateY(-2px) scale(1.02);
+  transition: all 0.3s ease;
+  box-shadow: 0 10px 20px rgba(0, 32, 96, 0.1);
+}
+
+.resource-card {
+  transition: all 0.3s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
+.resource-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 32, 96, 0.15);
+}
+
+.resource-card img {
+  transition: all 0.3s ease;
+  border-radius: 8px;
+  object-fit: cover;
+  height: 200px;
+}
 
+.resource-card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.resource-card-content p {
+  flex-grow: 1;
+}
+
+.resource-card-btn {
+  transition: all 0.2s ease;
+}
+
+.resource-card-btn:hover {
+  transform: translateY(-2px);
+}
 body {
 	padding: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;