cost calculator design

public/raffles/assets/css/utility.min.css

@@ -1493,6 +1493,10 @@
 .py-10 {
   padding-top: 10px;
 }
+.pt-12,
+.py-12 {
+  padding-top: 12px;
+}
 .pt-15,
 .py-15 {
   padding-top: 15px;
@@ -1855,6 +1859,10 @@
 .py-10 {
   padding-bottom: 10px;
 }
+.pb-12,
+.py-12 {
+  padding-bottom: 12px;
+}
 .pb-15,
 .py-15 {
   padding-bottom: 15px;

public/raffles/assets/js/style.js

@@ -1,112 +1,124 @@
-
-
 document.addEventListener("DOMContentLoaded", function () {
-    let intouchBtn = document.getElementById("get-in-touch");
+    const openButtons = document.querySelectorAll(".open-intouch");
+    // let intouchBtn = document.getElementById("get-in-touch");
     let intouchPopup = document.getElementById("get-in-touch-page");
     let closeBtns = document.getElementById("close-btn");
+    const mobileRedirectURL = "book-counsellor.php"; // Change to your desired mobile page URL
 
-
+    openButtons.forEach((button) => {
-    // Show login popup
+        button.addEventListener("click", function () {
-    intouchBtn.addEventListener("click", function () {
+            if (window.innerWidth > 992) {
+                // Desktop and tablets
                 intouchPopup.classList.add("active");
-        // alert("clicked ")
+            } else {
-
+                // Mobile – redirect to a page
+                window.location.href = mobileRedirectURL;
+            }
+        });
     });
 
     // Hide both popups when clicking any close button
     closeBtns.addEventListener("click", function () {
         intouchPopup.classList.remove("active");
-
     });
 
-
-
     // Hide popups when clicking outside them
     window.addEventListener("click", function (event) {
         if (event.target.classList.contains("get-in-touch-page")) {
             intouchPopup.classList.remove("active");
-
         }
     });
 });
 
-
 // university image animation
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener("DOMContentLoaded", () => {
-    const section = document.getElementById('animated-section');
+    const section = document.getElementById("animated-section");
-    const leftItems = document.querySelectorAll('.left-group .line-item');
+    const leftItems = document.querySelectorAll(".left-group .line-item");
-    const rightItems = document.querySelectorAll('.right-group .line-item');
+    const rightItems = document.querySelectorAll(".right-group .line-item");
 
-    const observer = new IntersectionObserver((entries) => {
+    const observer = new IntersectionObserver(
-        entries.forEach(entry => {
+        (entries) => {
+            entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     leftItems.forEach((item, i) => {
-                    setTimeout(() => item.classList.add('visible'), i * 300);
+                        setTimeout(
+                            () => item.classList.add("visible"),
+                            i * 300
+                        );
                     });
                     rightItems.forEach((item, i) => {
-                    setTimeout(() => item.classList.add('visible'), i * 300);
+                        setTimeout(
+                            () => item.classList.add("visible"),
+                            i * 300
+                        );
                     });
                 } else {
-                leftItems.forEach(item => item.classList.remove('visible'));
+                    leftItems.forEach((item) =>
-                rightItems.forEach(item => item.classList.remove('visible'));
+                        item.classList.remove("visible")
+                    );
+                    rightItems.forEach((item) =>
+                        item.classList.remove("visible")
+                    );
                 }
             });
-    }, { threshold: 0.5 });
+        },
+        { threshold: 0.5 }
+    );
 
     observer.observe(section);
-
 });
 
-
-
 // tabs in free resources
 function showTab(id) {
     // Remove active class from all buttons
-    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    document
+        .querySelectorAll(".tab-btn")
+        .forEach((btn) => btn.classList.remove("active"));
 
     // Hide all tab contents
-    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
+    document
+        .querySelectorAll(".tab-content")
+        .forEach((tab) => tab.classList.remove("active"));
 
     // Show the selected tab
-    document.getElementById(id).classList.add('active');
+    document.getElementById(id).classList.add("active");
 }
 
 // NEW: Attach click event on all tab buttons
-document.querySelectorAll('.tab-btn').forEach(button => {
+document.querySelectorAll(".tab-btn").forEach((button) => {
-    button.addEventListener('click', function () {
+    button.addEventListener("click", function () {
         // Remove active from all
-        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+        document
+            .querySelectorAll(".tab-btn")
+            .forEach((btn) => btn.classList.remove("active"));
 
         // Add active to clicked button
-        this.classList.add('active');
+        this.classList.add("active");
     });
 });
 
-
-
-
 // counter section
 
 document.addEventListener("DOMContentLoaded", function () {
     const counters = document.querySelectorAll(".counter");
 
-    const observer = new IntersectionObserver(entries => {
+    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
+        entries.forEach((entry) => {
             const counter = entry.target;
 
             if (entry.isIntersecting) {
-                if (!counter.classList.contains('started')) {
+                if (!counter.classList.contains("started")) {
                     startCounting(counter);
-                    counter.classList.add('started');
+                    counter.classList.add("started");
                 }
             } else {
                 resetCounter(counter);
-                counter.classList.remove('started');
+                counter.classList.remove("started");
             }
         });
     });
 
-    counters.forEach(counter => {
+    counters.forEach((counter) => {
         observer.observe(counter);
     });
 
@@ -132,19 +144,18 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 });
 
-
 // course finder ball bouncing
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener("DOMContentLoaded", () => {
-    const canvas = document.getElementById('flagCanvas');
+    const canvas = document.getElementById("flagCanvas");
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
-    const ballSection = document.getElementById('ball-section');
+    const ballSection = document.getElementById("ball-section");
 
     // Get responsive ball size
     function getBallSize() {
         const width = window.innerWidth;
         if (width < 480) return 20;
-        if (width < 768) return 30;
+        if (width < 768) return 25;
-        return 40;
+        return 35;
     }
 
     let ballSize = getBallSize();
@@ -156,12 +167,12 @@ window.addEventListener('DOMContentLoaded', () => {
         ballSize = getBallSize();
     }
     resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
+    window.addEventListener("resize", resizeCanvas);
 
-    const gravity = 0.25;
+    const gravity = 1;
     const friction = 0.8;
     const elasticity = 0.75;
-    const flags = ['us', 'gb', 'np', 'dk', 'ca', 'au'];
+    const flags = ["us", "gb", "np", "dk", "ca", "au"];
     let balls = [];
 
     class Ball {
@@ -193,9 +204,15 @@ window.addEventListener('DOMContentLoaded', () => {
             const sy = (img.height - size) / 2;
 
             ctx.drawImage(
-                img, sx, sy, size, size,
+                img,
-                this.x - this.radius, this.y - this.radius,
+                sx,
-                this.radius * 2, this.radius * 2
+                sy,
+                size,
+                size,
+                this.x - this.radius,
+                this.y - this.radius,
+                this.radius * 2,
+                this.radius * 2
             );
 
             ctx.restore();
@@ -280,7 +297,14 @@ window.addEventListener('DOMContentLoaded', () => {
             const flag = flags[i % flags.length];
             const x = Math.random() * (canvas.width - ballSize * 2) + ballSize;
             const y = -Math.random() * 300;
-            balls.push(new Ball(x, y, ballSize, `assets/images/logo/country/${flag}.png`));
+            balls.push(
+                new Ball(
+                    x,
+                    y,
+                    ballSize,
+                    `raffles/assets/images/logo/country/${flag}.png`
+                )
+            );
         }
     }
 
@@ -289,7 +313,7 @@ window.addEventListener('DOMContentLoaded', () => {
     let draggedBall = null;
     let lastMouse = { x: 0, y: 0 };
 
-    canvas.addEventListener('pointerdown', (e) => {
+    canvas.addEventListener("pointerdown", (e) => {
         const rect = canvas.getBoundingClientRect();
         const scaleX = canvas.width / rect.width;
         const scaleY = canvas.height / rect.height;
@@ -311,7 +335,7 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    canvas.addEventListener('pointermove', (e) => {
+    canvas.addEventListener("pointermove", (e) => {
         if (draggedBall) {
             const rect = canvas.getBoundingClientRect();
             const scaleX = canvas.width / rect.width;
@@ -327,7 +351,7 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    window.addEventListener('pointerup', () => {
+    window.addEventListener("pointerup", () => {
         if (draggedBall) {
             draggedBall.dragging = false;
             draggedBall = null;
@@ -340,13 +364,14 @@ window.addEventListener('DOMContentLoaded', () => {
 
     function animate() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        balls.forEach(ball => ball.update(balls));
+        balls.forEach((ball) => ball.update(balls));
         animationId = requestAnimationFrame(animate);
     }
 
     // Intersection Observer
-    const observer = new IntersectionObserver((entries) => {
+    const observer = new IntersectionObserver(
-        entries.forEach(entry => {
+        (entries) => {
+            entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     if (!isAnimating) {
                         createBalls();
@@ -360,35 +385,42 @@ window.addEventListener('DOMContentLoaded', () => {
                     }
                 }
             });
-    }, { threshold: 0.1 });
+        },
+        { threshold: 0.1 }
+    );
 
     observer.observe(ballSection);
 });
 
-
-
 // scroll detect in slider
 // JS script
 // JS for updating label on scroll
-window.addEventListener('load', () => {
+window.addEventListener("load", () => {
     console.log("Window loaded. Running scroll indicator script.");
 
-    const scrollLabel = document.getElementById('scroll-indicator-label');
+    const scrollLabel = document.getElementById("scroll-indicator-label");
     console.log("Scroll Label Element:", scrollLabel);
 
-    const sections = document.querySelectorAll('.scroll-section');
+    const sections = document.querySelectorAll(".scroll-section");
     console.log("Found Sections:", sections);
 
     if (!scrollLabel || sections.length === 0) {
-        console.error("Could not find scroll label or sections to observe. Exiting.");
+        console.error(
+            "Could not find scroll label or sections to observe. Exiting."
+        );
         return;
     }
 
     const observer = new IntersectionObserver(
         (entries) => {
             console.log("IntersectionObserver callback fired:", entries);
-            entries.forEach(entry => {
+            entries.forEach((entry) => {
-                console.log("Observing entry:", entry.target, "Is intersecting:", entry.isIntersecting);
+                console.log(
+                    "Observing entry:",
+                    entry.target,
+                    "Is intersecting:",
+                    entry.isIntersecting
+                );
                 if (entry.isIntersecting) {
                     // --- CHANGE IS HERE ---
                     const sectionId = entry.target.id; // Get the ID of the intersecting section
@@ -396,7 +428,8 @@ window.addEventListener('load', () => {
 
                     console.log("Intersecting section ID:", sectionId);
 
-                    if (sectionId) { // Check if ID exists
+                    if (sectionId) {
+                        // Check if ID exists
                         // Optional: Format the ID if needed (example: replace hyphens, capitalize)
                         // let displayText = sectionId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                         // scrollLabel.textContent = displayText;
@@ -404,23 +437,28 @@ window.addEventListener('load', () => {
                         // Simple version: Use the ID directly
                         scrollLabel.textContent = sectionId;
                         console.log("Updated scroll label text to:", sectionId);
-
                     } else {
-                        console.warn("Intersecting section is missing an ID attribute:", entry.target);
+                        console.warn(
+                            "Intersecting section is missing an ID attribute:",
+                            entry.target
+                        );
                     }
                 }
             });
         },
         {
-            threshold: 0.5 // Trigger when 50% of the section is visible
+            threshold: 0.5, // Trigger when 50% of the section is visible
             // Consider adjusting rootMargin if you have sticky headers/footers
             // rootMargin: "-50px 0px -50px 0px" // Example: ignore top/bottom 50px
         }
     );
 
-    sections.forEach(section => {
+    sections.forEach((section) => {
         if (!section.id) {
-            console.warn("Section is missing an ID, it won't update the label:", section);
+            console.warn(
+                "Section is missing an ID, it won't update the label:",
+                section
+            );
         }
         console.log("Observing section:", section);
         observer.observe(section);
@@ -432,7 +470,6 @@ window.addEventListener('load', () => {
 // Optional: Add a check outside the load event to see if the script file itself is loaded
 console.log("Scroll indicator script file loaded.");
 
-
 // aeroplane flying
 const plane = document.getElementById("plane");
 
@@ -510,7 +547,7 @@ function updatePosition() {
 
     planeX += vx;
 
-    // 🟢 Smoothly move downwardMovement towards targetDownwardMovement
+    //  Smoothly move downwardMovement towards targetDownwardMovement
     downwardMovement += (targetDownwardMovement - downwardMovement) * 0.05;
 
     // progress across screen
@@ -524,8 +561,8 @@ function updatePosition() {
 
     const finalY = planeYBase + downwardMovement + waveY + dodgeOffset;
 
-    plane.style.left = planeX + 'px';
+    plane.style.left = planeX + "px";
-    plane.style.top = finalY + 'px';
+    plane.style.top = finalY + "px";
 
     dodgeOffset *= dodgeDecay;
 
@@ -547,16 +584,14 @@ document.addEventListener("mousemove", function (e) {
 
 updatePosition();
 
-
-
 // gallery image
-const images = Array.from(document.querySelectorAll('.gallery img'));
+const images = Array.from(document.querySelectorAll(".gallery img"));
-const lightbox = document.getElementById('lightbox');
+const lightbox = document.getElementById("lightbox");
-const lightboxImg = document.getElementById('lightbox-img');
+const lightboxImg = document.getElementById("lightbox-img");
 let currentIndex = 0;
 
 images.forEach((img, index) => {
-    img.addEventListener('click', () => {
+    img.addEventListener("click", () => {
         currentIndex = index;
         showImage();
     });
@@ -564,11 +599,11 @@ images.forEach((img, index) => {
 
 function showImage() {
     lightboxImg.src = images[currentIndex].src;
-    lightbox.classList.add('active');
+    lightbox.classList.add("active");
 }
 
 function closeLightbox() {
-    lightbox.classList.remove('active');
+    lightbox.classList.remove("active");
 }
 
 function changeSlide(step) {
@@ -576,41 +611,37 @@ function changeSlide(step) {
     showImage();
 }
 
-document.addEventListener('keydown', e => {
+document.addEventListener("keydown", (e) => {
-    if (!lightbox.classList.contains('active')) return;
+    if (!lightbox.classList.contains("active")) return;
-    if (e.key === 'ArrowRight') changeSlide(1);
+    if (e.key === "ArrowRight") changeSlide(1);
-    if (e.key === 'ArrowLeft') changeSlide(-1);
+    if (e.key === "ArrowLeft") changeSlide(-1);
-    if (e.key === 'Escape') closeLightbox();
+    if (e.key === "Escape") closeLightbox();
 });
 
-
-// cost calculator progress
 // cost calculator progress
 
 let currentStep = 1;
-const totalSteps = 7; // updated to match HTML
+const totalSteps = 5;
-const monkey = document.getElementById('monkey').querySelector('img');
+const monkey = document.getElementById("monkey").querySelector("img");
-const monkeyContainer = document.getElementById('monkey');
+const monkeyContainer = document.getElementById("monkey");
-const nextBtn = document.getElementById('nextBtn');
+const nextBtn = document.getElementById("nextBtn");
-const doneBtn = document.getElementById('doneBtn');
+const prevBtn = document.getElementById("prevBtn");
-const bananalast = document.getElementById('b5');
+const doneBtn = document.getElementById("doneBtn");
 
 const monkeyImages = [
-    "/raffles/assets/images/icons/monkey1.png",
+    "raffles/assets/images/icons/monkey2.png",
-    "/raffles/assets/images/icons/monkey2.png",
+    "raffles/assets/images/icons/monkey2.png",
-    "/raffles/assets/images/icons/monkey3.png",
+    "raffles/assets/images/icons/monkey3.png",
-    "/raffles/assets/images/icons/monkey4.png",
+    "raffles/assets/images/icons/monkey4.png",
-    "/raffles/assets/images/icons/monkey5.png",
+    "raffles/assets/images/icons/monkey5.png",
-    "/raffles/assets/images/icons/monkey6.png",
+    "raffles/assets/images/icons/monkey6.png",
-    "/raffles/assets/images/icons/monkey7.png"
+    "raffles/assets/images/icons/monkey7.png",
 ];
 
-nextBtn.addEventListener('click', () => {
+// Function to update monkey position based on screen size
-    if (currentStep < totalSteps) {
+function updateMonkeyPosition() {
-        currentStep++;
-
-        // Calculate monkey position based on window width
     let percent;
+    
     if (window.innerWidth <= 540) {
         percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
     } else if (window.innerWidth <= 768) {
@@ -622,45 +653,97 @@ nextBtn.addEventListener('click', () => {
     } else {
         percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
     }
-        monkeyContainer.style.left = percent + '%';
     
-        // Update monkey image
+    monkeyContainer.style.left = percent + "%";
+}
+
+// Function to update button visibility
+function updateButtonVisibility() {
+    if (currentStep === 1) {
+        prevBtn.style.display = "none"; // Hide Previous on first step
+    } else {
+        prevBtn.style.display = "flex"; // Show Previous on other steps
+    }
+    
+    if (currentStep === totalSteps) {
+        nextBtn.style.display = "none";
+        doneBtn.style.display = "block";
+    } else {
+        nextBtn.style.display = "flex";
+        doneBtn.style.display = "none";
+    }
+}
+
+// Next button click event
+nextBtn.addEventListener("click", () => {
+    if (currentStep < totalSteps) {
+        currentStep++;
+        
+        // Update monkey position
+        updateMonkeyPosition();
+        
+        // Change monkey image
         monkey.src = monkeyImages[currentStep - 1];
         
-        // Switch step content
+        // Update step content
-        const currentContent = document.getElementById('step' + (currentStep - 1));
+        const currentContent = document.getElementById("step" + (currentStep - 1));
-        const nextContent = document.getElementById('step' + currentStep);
+        const nextContent = document.getElementById("step" + currentStep);
         if (currentContent && nextContent) {
-            currentContent.classList.remove('active');
+            currentContent.classList.remove("active");
-            nextContent.classList.add('active');
+            nextContent.classList.add("active");
         }
         
-        // Show done button on last step
+        // Update button visibility
-        if (currentStep === totalSteps) {
+        updateButtonVisibility();
-            nextBtn.style.display = 'none';
-            doneBtn.style.display = 'block';
-        }
     }
 });
 
-doneBtn.addEventListener('click', () => {
+// Previous button click event
-    bananalast.classList.add('active');
+prevBtn.addEventListener("click", () => {
+    if (currentStep > 1) {
+        // Update step content first
+        const currentContent = document.getElementById("step" + currentStep);
+        const prevContent = document.getElementById("step" + (currentStep - 1));
+        if (currentContent && prevContent) {
+            currentContent.classList.remove("active");
+            prevContent.classList.add("active");
+        }
+        
+        currentStep--;
+        
+        // Update monkey position
+        updateMonkeyPosition();
+        
+        // Change monkey image (go back to previous image)
+        monkey.src = monkeyImages[currentStep - 1];
+        
+        // Update button visibility
+        updateButtonVisibility();
+    }
+});
+
+// Initialize button visibility on page load
+updateButtonVisibility();
+
+// Update on window resize
+window.addEventListener("resize", updateMonkeyPosition);
+doneBtn.addEventListener("click", () => {
+    bananalast.classList.add("active");
 
     if (window.innerWidth <= 992) {
-        monkey.src = monkeyImages[6]; // last image
+        // On mobile: show 7th image and move down
-        monkeyContainer.style.top = '142%';
+        monkey.src = monkeyImages[6]; // 7th image (index 6)
-        monkeyContainer.style.left = '40%';
+        monkeyContainer.style.top = "142%";
+        monkeyContainer.style.left = "40%"; // Optional: keep it centered or adjust as needed
     } else {
-        monkey.src = monkeyImages[5];
+        // On desktop: show 6th image and move right
-        monkeyContainer.style.left = '110%';
+        monkey.src = monkeyImages[5]; // 6th image (index 5)
-        monkeyContainer.style.top = '-120%';
+        monkeyContainer.style.left = "110%";
+        monkeyContainer.style.top = "-120%"; // Reset top if changed previously
     }
 });
 
-
+// Final monkey image
-
-
-
 
 // document.addEventListener("DOMContentLoaded", function () {
 //   const animatedSections = document.querySelectorAll('[data-custom-animations="true"]');
@@ -684,4 +767,4 @@ doneBtn.addEventListener('click', () => {
 //   animatedSections.forEach(section => observer.observe(section));
 // });
 
-
+// free resources

resources/views/client/raffles/pages/cost-calculator.blade.php

@@ -131,9 +131,10 @@
 
         <section class="lqd-section pb-160">
             <div class="container">
+                <form id="cost-calculator">
                     <div class="row" id="interactiveSection">
 
-                    <div class="col col-lg-12">
+                        {{-- <div class="col col-lg-7">
 
                         <div class="wizard-container">
                             <div class="nav" id="step-nav">
@@ -248,11 +249,216 @@
 
                             </form>
                         </div>
+                    </div> --}}
+
+                        <div class="col col-lg-7">
+                            <div class="cost-choosing">
+
+                                <div class="step-content active" id="step1">
+                                    <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
+                                    <h5 class="text-ter text-18 font-medium pb-20">Where do you want to study</h5>
+
+                                    <div class="row flex flex-wrap py-20">
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="country" type="radio" id="country1">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="country1">UK</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="country" type="radio" id="country2">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="country2">Australia</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="country" type="radio" id="country3">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="country3">USA</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="country" type="radio" id="country4">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="country4">Newzealand</label>
+
+
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="step-content" id="step2">
+                                    <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
+                                    <h5 class="text-ter text-18 font-medium pb-20">Are you going alone or with a dependent?
+                                    </h5>
+
+                                    <div class="row flex flex-wrap py-20">
+                                        <div class="col col-sm-6">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="alone" type="radio" id="alone">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="alone">Alone</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-6">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="alone" type="radio" id="spouse">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="spouse">With Spouse</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-6">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="alone" type="radio" id="child">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="child">With Spouse and
+                                                    child</label>
+
+
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="step-content" id="step3">
+                                    <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
+                                    <h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
+                                    </h5>
+
+                                    <div class="row flex flex-wrap py-20">
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="services" type="radio" id="serviceYes">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="serviceYes">Yes</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="services" type="radio" id="serviceNo">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="serviceNo">No</label>
+
+
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                                <div class="step-content" id="step4">
+                                    <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
+                                    <h5 class="text-ter text-18 font-medium pb-20">Which Level are you applying for?</h5>
+
+                                    <div class="row flex flex-wrap py-20">
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="level" type="radio" id="bachelors">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="bachelors">Bachelors</label>
+
+
+                                            </div>
+                                        </div>
+                                        <div class="col col-sm-4">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <input name="level" type="radio" id="masters">
+
+                                                <label class="text-20 text-ter p-0 m-0" for="masters">Masters</label>
+
+
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                                <div class="step-content" id="step5">
+                                    <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
+                                    <h5 class="text-ter text-18 font-medium pb-20">Which Program are you applying for?</h5>
+
+                                    <div class="row flex py-20">
+                                        <div class="col col-sm-12">
+                                            <div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
+                                                <select name="" id="">
+                                                    <option value="">Select Program</option>
+                                                    <option value="">Masters in Information Technology</option>
+                                                </select>
+
+
+
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+
+
+                                <div class=" flex items-center justify-center next-btn">
+                                    <button id="prevBtn" type="button"
+                                        class="rounded-30 px-20 py-10  text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">
+                                        <i class="fa-solid fa-chevron-left"></i>
+                                        <p class="m-0 p-0">Previous</p>
+                                    </button>
+                                    <button id="nextBtn" type="button"
+                                        class="rounded-30 px-20 py-10  text-ter text-16 text-center border-0 flex items-center gap-10 justify-center">
+                                        <p class="m-0 p-0">Next</p> <i class="fa-solid fa-chevron-right"></i>
+                                    </button>
+                                    <button type="submit" id="doneBtn" style="display: none;"
+                                        class="rounded-30 px-20 py-10  text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">Done</button>
+
+
+                                </div>
+
+                                <div class="progress-line">
+                                    <div class="progress-track">
+                                        <span class="banana" id="b1">
+                                            <div class="dot"
+                                                style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
+                                        </span>
+                                        <span class="banana" id="b2">
+                                            <div class="dot"
+                                                style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
+                                        </span>
+                                        <span class="banana" id="b3">
+                                            <div class="dot"
+                                                style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
+                                        </span>
+                                        <span class="banana" id="b4">
+                                            <div class="dot"
+                                                style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
+                                        </span>
+                                        <span class="banana" id="b5"><img
+                                                src=" {{ asset('raffles/assets/images/icons/bananas.svg') }}"
+                                                alt=""></span>
+                                    </div>
+                                    <div class="monkey" id="monkey" style="left: 0%;"><img
+                                            src="{{ asset('raffles\assets\images\icons\monkey.png') }}" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+
+
+
                         </div>
 
                         <div class="col col-lg-1"></div>
 
-                    {{-- <div class="col col-lg-4">
+                        <div class="col col-lg-4">
                             <div class="total-cost">
                                 <h4>Total <span class="text-black">Cost</span> </h4>
                                 <table>
@@ -268,16 +474,18 @@
                                     </tbody>
                                 </table>
                             </div>
-                    </div> --}}
+                        </div>
 
                     </div>
+
+                </form>
             </div>
         </section>
 
     </section>
 @endsection
 @push('js')
-    <script>
+    {{-- <script>
         const form = document.getElementById('multiStepForm');
         const tabs = document.querySelectorAll('.tab-pane');
         const nextBtns = document.querySelectorAll('.btn-next');
@@ -346,5 +554,5 @@
         yesRadio.addEventListener('change', toggleProficiencySections);
         noRadio.addEventListener('change', toggleProficiencySections);
         toggleProficiencySections();
-    </script>
+    </script> --}}
 @endpush