public/frontend/css/style.css

@@ -74,8 +74,8 @@ h2{
 }
 
 .mobile-nav-icon {
-    width: 3rem;
+    width: 2.5rem;
-    height: 2rem;
+    height: 2.5rem;
     color: #212529;
 }
 
@@ -102,12 +102,41 @@ h2{
     font-size: 3.2rem;
 }
 
+.dropdown:hover .dropdown-menu{
+    display: block;
+    transition: all .5s, .5s linear;
+    top: 100%;
+    width: calc(100% + 3rem);
+    animation: fadeInUp 500ms;
+    padding: 0;
+}
+.dropdown-menu a{
+    font-size: 1rem;
+    font-weight: 500;
+    color: #000000;
+    padding: 0.5em 1em;
+}
+.dropdown-item:focus, .dropdown-item:hover{
+    background-color: #326CBF;
+    color: #FFFFFF;
+}
+@keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 30px, 0);
+    }
+  
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
 /* ===========================================
 Responsive Codes
 ======================================= */
 
-/* 980px  */
+/* 1200px  */
-@media (max-width: 62em) {
+@media (max-width: 75em) {
     html {
         overflow-x: hidden;
     }
@@ -116,7 +145,6 @@ Responsive Codes
         z-index: 999;
     }
 
-
     .header .logo {
         width: 40%;
     }
@@ -181,7 +209,6 @@ Responsive Codes
 /* top bar */
 #topbar{
     background: #FFFFFF;
-    height: 50px;
     font-size: 14px;
     transition: all 0.5s;
     color: #fff;
@@ -224,7 +251,7 @@ Responsive Codes
 .slider-content{
     padding: 3rem 6rem;
     position: absolute;
-    top: 30%;
+    top: 20%;
     width: 60%;
 }
 .slider-content h2{
@@ -245,13 +272,97 @@ Responsive Codes
 .slider-content p{
     margin-bottom: 3rem;
 }
+.slider-content p,
+.slider-content h2, 
+.slideDown, 
+.slideUp{
+    position: relative;
+    opacity: 0;
+}
 .slider-content a{
     background: rgba(216, 51, 162, 0.8);
-    border: 2px solid #EC3AB0;
     border-radius: 25px;
     padding: 10px 20px;
     text-decoration: none;
     color: #FFFFFF;
+    display: inline-block;
+    align-items: center;
+    position: relative;
+    transition: 0.5s;
+}
+.slider-content a::after,
+.services-content a::after,
+.why-us-desc a::after{
+    content: '\f101';
+    font-weight: 900;
+    font-family: "Font Awesome 5 Free";
+    position: absolute;
+    opacity: 0;  
+    top: 10px;
+    right: -20px;
+    transition: 0.5s;
+}
+.slider-content a:hover,
+.services-content a:hover{
+    background: #326CBF;
+    padding-right: 2rem;
+    padding-left: 1rem;
+}
+.why-us-desc a:hover{
+    background: #E22899;
+    padding-right: 2rem;
+    padding-left: 1rem;
+}
+.slider-content a:hover::after,
+.services-content a:hover::after,
+.why-us-desc a:hover::after{
+    opacity: 1;
+    right: 10px;
+}
+.slideUp {
+    top:40px;
+    left:10px;
+    animation: slideUp ease 1s forwards 1.6s;
+}
+.slideDown {
+    top:-40px;
+    left:5px;
+    animation: slideDown ease 1s forwards .6s;
+}
+@keyframes slideUp {
+    0% {transform: translateY(0);opacity:0.6;}
+    100% {transform: translateY(-40px);opacity:1;}
+}
+@keyframes slideDown {
+    0% {transform: translateY(0);opacity:0.6;}
+    100% {transform: translateY(40px);opacity:1;}
+}
+
+.carousel-control-next, .carousel-control-prev {
+    width: 5% !important;
+}
+.carousel-indicators [data-bs-target]:hover {
+    background:rgb(100%, 100%, 100%);
+}
+.carousel-indicators [data-bs-target]{
+    position:relative;
+    width:10px !important;
+    height:10px !important;
+    background: none !important;
+    border-radius:100% !important;
+    border: 2px solid #FFFFFF  !important;
+    display:inline-block;
+    margin-right:7px;
+    cursor:pointer;
+    overflow:hidden;
+}
+.carousel-indicators [data-bs-target].active{
+    background:#326CBF !important;
+}
+
+.carousel-control-prev-icon, .carousel-control-next-icon {
+    opacity: 0;
+    filter:alpha(opacity=0); /* IE support */
 }
 /* banner slider css */
 
@@ -356,6 +467,10 @@ Responsive Codes
     color: #FFF1FC;
     border-radius: 0 20px 0 20px;
     text-decoration: none;
+    display: inline-block;
+    align-items: center;
+    position: relative;
+    transition: 0.5s;
 }
 .services-slider{
     display: flex !important;
@@ -370,7 +485,7 @@ Responsive Codes
     text-align: center;
     padding: 20px;
     width: 90%;
-    min-height: 300px;
+    min-height: 350px;
     background: #FFFFFF;
     box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
     border-radius: 16px;
@@ -539,11 +654,11 @@ Responsive Codes
     line-height: 1.8rem;
     letter-spacing: 0.001em;
     color: #000000;
-    transition: color 2s;
+    transition: color 1.5s;
 }
 .blog-card:hover h2,
 .blog-card:hover p{
-    color: #326CBF;
+    color: #E22899;
 }
 .blog-desc p{
     font-weight: 400;
@@ -946,6 +1061,12 @@ Responsive Codes
     text-align: center;
     border-radius: 6px;
     padding: 10px 40px;
+    transition: .6s;
+}
+.lets-chat-section a:hover{
+    background: #326CBF;
+    border: 1px solid #326CBF;
+    color: #FFFFFF;
 }
 .our-values-section{
     padding: 3rem 6rem;
@@ -1088,6 +1209,10 @@ Responsive Codes
     text-decoration: none;
     padding: 10px 20px;
     border-radius: 25px;
+    display: inline-block;
+    align-items: center;
+    position: relative;
+    transition: 0.5s;
 }
 
 .blog-banner{
@@ -1381,9 +1506,6 @@ Responsive Codes
     background: #296AC7;
 }
 .footer-text{
-    margin-top: 4px;
-    margin-left: 56px;
-    margin-bottom: -16px;
     color: #FFFFFF;
 }
 .footer-text p{
@@ -1394,3 +1516,388 @@ Responsive Codes
     text-decoration: none;
 }
 /* Footer Css */
+
+/* mobile view css */
+@media only screen and (min-width: 320px) and (max-width: 480px) {
+    h1{
+        font-size: 28px;
+        line-height: 38px;
+    }
+    h2 {
+        font-weight: 600;
+        font-size: 22px;
+        line-height: 38px;
+    }
+    #topbar{
+        padding: 0.5rem 0;
+    }
+    .contact-info,
+    .article-card,
+    .blog-banner-content{
+        flex-direction: column;
+        gap: 10px;
+    }
+    .slider-content h2,
+    .slider-content h1,
+    .blog-banner-content h2,
+    .contact-offices h2{
+        font-size: 22px;
+        line-height: 2rem;
+    }
+    .blog-banner h5,
+    .studyabroad-banner-header h5{
+        font-size: 18px;
+        margin-top: 1rem;
+        line-height: 1.8rem;
+        text-align: center;
+    }
+    .slider-content {
+        padding: 1.3rem;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+    .slider-content h1{
+        margin-bottom: 1rem;
+    }
+    .slider-image img {
+        height: 200px;
+    }
+    .slider-content p,
+    .overseas-img{
+        display: none;
+    }
+    .slider-content a{
+        font-size: 14px;
+        padding: 5px 10px;
+    }
+    .services-content h1,
+    .why-us-desc h1,
+    .testimonials-desc h1, 
+    .blog-header h1,
+    .our-values-section h1,
+    .studyabroad-banner-header h1,
+    .contact-left-top h1{
+        font-size: 28px;
+        line-height: 38px;
+        margin-bottom: 0.8rem;
+    }
+    .about-icons-section{
+        grid-template-columns: 1fr 1fr;
+    }
+    .services-section, 
+    .blog-section, 
+    .study-australia-desc, 
+    .study-sydney-section, 
+    .study-melbourne-section, 
+    .study-detail-section, 
+    .scholarship-section, 
+    .student-visa-section, 
+    .about-header-section, 
+    .why-et, 
+    .student-visa-section, 
+    .blogs-section, .why-et, 
+    .faq-section,
+    .why-us-section,
+    .testimonials-section,
+    .footer-top,
+    .our-values-section,
+    .lets-chat-section,
+    .blog-banner{
+        padding: 2rem;
+    }
+    .contact-form-section{
+        padding: 0;
+    }
+    .contact-form,
+    .form-sec {
+        border-radius: 0;
+        padding: 1rem 0.8rem;
+    }
+    .blog-detail-section{
+        padding: 3rem;
+    }
+    .services-content,
+    .testimonials-desc,
+    .contact-offices {
+        margin-right: 0;
+        margin-bottom: 1rem;
+    }
+    .footer-description{
+        margin: 1rem 0 !important;
+        /* margin-bottom: 0 !important; */
+    }
+    .why-us-section::before{
+        display: none;
+    }
+    .why-us-img,
+    .blog-header p,
+    .lets-chat-section p,
+    .sydney-img{
+        padding: 0;
+        margin-bottom: 1rem;
+    }
+    .service-card{
+        width: 100%;
+    }
+    .footer-text,
+    .footer-links{
+        margin: 0 !important;
+    }
+    .our-values-section .row{
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .values-lists a{
+        padding: 5px 5px 5px 0;
+    }
+    .values-lists h2{
+        font-size: 18px;
+        line-height: 1.8rem;
+    }
+    .about-header-section {
+        height: 60vh;
+    }
+    .about-banner-img{
+        top: 85%;
+    }
+    .breadcrumb{
+        display: none;
+    }
+    .article-img{
+        width: 100%;
+    }
+    .blog-banner-desc{
+        margin: 0;
+    }
+    .blog-banner-content a{
+        padding: .5rem 2rem;
+        font-size: .8rem;
+    }
+    .contact-offices h5{
+        font-size: 15px;
+    }
+}
+/* mobile view css end */
+/* ipad, tablets screen css */
+@media only screen and (min-width: 481px) and (max-width: 768px) {
+    h2 {
+        font-weight: 600;
+        font-size: 28px;
+        line-height: 42px;
+    }
+    #topbar{
+        padding: 0.5rem 3rem;
+    }
+    .header{
+        padding: 0 3rem;
+    }
+    .slider-content {
+        padding: 2rem;
+        top: 0%;
+        width: 80%;
+    }
+    .slider-content h1,
+    .slider-content h2,
+    .blog-banner-content h2{
+        font-size: 32px;
+        line-height: 48px;
+    }
+    .blog-banner h5{
+        font-size: 24px;
+        margin-top: 1rem;
+        line-height: 1.8rem;
+        text-align: center;
+    }
+    .slider-content h1{
+        margin-bottom: 1.6rem;
+    }
+    .slider-content p{
+        display: none;
+    }
+    .why-us-img,
+    .blog-header p,
+    .lets-chat-section p{
+        padding: 0;
+        margin-bottom: 1rem;
+    }
+    .about-icons-section{
+        grid-template-columns: 1fr 1fr;
+    }
+    .services-section, 
+    .blog-section, 
+    .study-australia-desc, 
+    .study-sydney-section, 
+    .study-melbourne-section, 
+    .study-detail-section, 
+    .scholarship-section, 
+    .student-visa-section, 
+    .about-header-section, 
+    .why-et, 
+    .student-visa-section, 
+    .blogs-section, .why-et, 
+    .blog-detail-section, 
+    .faq-section,
+    .why-us-section,
+    .testimonials-section,
+    .footer-top,
+    .lets-chat-section,
+    .our-values-section,
+    .blog-banner{
+        padding: 3rem;
+    }
+    .service-card{
+        width: 100%;
+    }
+    .services-content h1,
+    .why-us-desc h1,
+    .testimonials-desc h1, 
+    .blog-header h1{
+        font-size: 32px;
+        line-height: 48px;
+        margin-bottom: 0.8rem;
+    }
+    .why-us-section::before{
+        display: none;
+    }
+    .services-content,
+    .testimonials-desc ,
+    .contact-offices {
+        margin-right: 0;
+        margin-bottom: 1rem;
+    }
+    .our-values-section .row{
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .values-lists a{
+        padding: 5px 5px 5px 0;
+    }
+    .values-lists h2{
+        font-size: 18px;
+        line-height: 1.8rem;
+    }
+    .breadcrumb{
+        display: none;
+    }
+    .blog-banner-desc{
+        margin: 0;
+    }
+    .blog-banner-content{
+        flex-direction: column;
+        gap: 10px;
+    }
+    .contact-form-section{
+        padding: 0;
+    }
+    .contact-form,
+    .form-sec {
+        border-radius: 0;
+    }
+}
+/* ipad, tablets screen css ends */
+/* Small screens, laptops css */
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+    #topbar,
+    .header{
+        padding: 0 3rem;
+    }
+    .slider-content {
+        padding: 2rem;
+        top: 0%;
+        width: 80%;
+    }
+    .slider-content h1{
+        margin-bottom: 1.6rem;
+        font-size: 38px;
+        line-height: 58px;
+    }
+    .about-icons-section{
+        grid-template-columns: 1fr 1fr;
+    }
+    .services-section, 
+    .blog-section, 
+    .study-australia-desc, 
+    .study-sydney-section, 
+    .study-melbourne-section, 
+    .study-detail-section, 
+    .scholarship-section, 
+    .student-visa-section, 
+    .about-header-section, 
+    .why-et, 
+    .student-visa-section, 
+    .blogs-section, .why-et, 
+    .blog-detail-section, 
+    .faq-section,
+    .why-us-section,
+    .testimonials-section,
+    .footer-top,
+    .lets-chat-section,
+    .our-values-section{
+        padding: 3rem;
+    }
+    .why-us-section::before{
+        display: none;
+    }
+    .service-card{
+        width: 100%;
+    }
+    .services-content,
+    .testimonials-desc ,
+    .contact-offices {
+        margin-right: 0;
+        margin-bottom: 1rem;
+    }
+    .values-lists a{
+        padding: 5px 5px 5px 0;
+    }
+    .values-lists h2{
+        font-size: 18px;
+        line-height: 1.8rem;
+    }
+    .contact-form-section{
+        padding: 0;
+    }
+    .contact-form,
+    .form-sec {
+        border-radius: 0;
+    }
+    .contact-form .row{
+        display: flex;
+        flex-direction: column;
+    }
+    .contact-form .row .col-md-4,
+    .contact-form .row .col-md-8{
+        width: 100%;
+    }
+}
+/* Small screens, laptops css ends */
+/* Desktops, large screens css */
+@media only screen and (min-width: 1025px) and (max-width: 1200px) {
+    .slider-content {
+        padding: 3rem 6rem;
+        top: 0%;
+        width: 80%;
+    }
+    .footer-top{
+        padding: 3rem;
+    }
+    .header,
+    #topbar{
+        padding: 0 3rem;
+    }
+    .contact-form-section{
+        padding: 0;
+    }
+    .contact-form{
+        border-radius: 0;
+    }
+}
+/* Desktops, large screens css ends */
+/* Extra large screens, TV css */
+@media only screen and (min-width: 1201px) and (max-width: 1220px) {
+    .navbar-list{
+        gap: 1rem;
+    }
+}
+/* Extra large screens, TV css ends */

resources/views/about.blade.php

@@ -11,21 +11,21 @@
 @section('content')
     <section class="about-header-section">
         <div class="about-banner-header">
-            {!!$about->description!!}
+            {!!$about->description ?? '' !!}
         </div>
         <div class="about-banner-img">
             <img src="{{url('frontend/images/about-banner.png')}}" class="img-fluid" alt="">
         </div>
     </section>
     <section class="overseas-section">
-        {!!$about->sub_description!!}
+        {!!$about->sub_description ?? '' !!}
             <div class="overseas-img">
                 <img src="{{url('frontend/images/australia-map.png')}}" class="img-fluid" alt="">
             </div>
     </section>
     <section class="why-et">
         <div class="why-et-header">
-        {!!$about->bottom_description!!}
+        {!!$about->bottom_description ?? '' !!}
         </div>
         <div class="et-cards">
             <!-- <div class="et-card">
@@ -75,7 +75,7 @@
                         high-performing talent. We connect that talent with our partners, providing mutual growth opportunities.
                     </p>
                     <div class="values-img">
-                        <img src="{{url('frontend/images/attractive-man.png')}}" id="values-img" alt="">
+                        <img src="{{url('frontend/images/attractive-man.png')}}" class="img-fluid" id="values-img" alt="">
                     </div>
                 </div>
             </div>
@@ -109,7 +109,7 @@
             We’re here to help. We work with US based companies to help them grow!
         </p>
         <div class="text-center">
-            <a href="">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
+            <a href="contact">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
         </div>
     </section>
 @endsection

resources/views/blogs.blade.php

@@ -26,7 +26,7 @@
             <img src="{{url('frontend/icons/side-bars.svg')}}" class="me-2" alt=""> 
             Latest Articles
         </h2>
-        <div class="row">
+        <div class="row g-5">
             <div class="col-md-5">
                 <div class="featured-article">
                     <img src="{{url('frontend/images/sydney-opera-house.png')}}" class="w-100" alt="">

resources/views/contact.blade.php

@@ -70,21 +70,21 @@
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="">Email address</label>
-                                        <input type="email" name = "email" class="form-control" placeholder="Your email address" value="" onkeyup="contactEmail()">
+                                        <input type="email" name = "email" class="form-control" placeholder="Your email address" value="" id="contact-email" onkeyup="contactEmail()">
                                     </div>
                                     <span class="error" id='contact-email-error'></span>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="">Phone number</label>
-                                        <input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" onkeyup="contactPhone()">
+                                        <input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" id="contact-phone" onkeyup="contactPhone()">
                                     </div>
                                     <span class="error" id='contact-phone-error'></span>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="">Nationality</label>
-                                        <input type="text" name = "nationality" class="form-control" placeholder="Your nationality">
+                                        <input type="text" name = "nationality" class="form-control" placeholder="Your nationality" id="contact-nationality" onkeyup="contactNationality()">
                                     </div>
                                     <span class="error" id='contact-nationality-error'></span>
                                 </div>
@@ -109,7 +109,7 @@
         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.0069665910596!2d151.10355791583234!3d-33.966660431577246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12b9bd323606ad%3A0xf85fba58b6ff7bd6!2sSuite%20132%20%26%20133%2C%20Level%2F3%20Park%20Rd%2C%20Hurstville%20NSW%202220%2C%20Australia!5e0!3m2!1sen!2snp!4v1674634288627!5m2!1sen!2snp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
     </section>
 @endsection
-
+@section('script')
 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
@@ -135,9 +135,52 @@
             }
        }
 
+       function contactEmail(){
+            var email = document.getElementById('contact-email').value;
+            if(email.length == 0){
+                $('#contact-email').focus();
+                emailError.innerHTML = "Email field is required !";
+                return false;
+            }
+            else{
+                emailError.innerHTML = '';
+                return true;
+            }
+        }
+
+        function contactPhone(){
+            var phone = document.getElementById('contact-phone').value;
+            if(phone.length == 0){
+                $('#contact-phone').focus();
+                phoneError.innerHTML = "Phone number is required !";
+                return false;
+            }
+            if(!phone.match(/^\d{10}$/)){
+                phoneError.innerHTML = "Please provide valid 10 digit number";
+                return false;
+            }
+            else{
+                phoneError.innerHTML = '';
+                return true;
+            }
+        }
+
+        function contactNationality(){
+            var nationality = document.getElementById('contact-nationality').value;
+            if(nationality.length == 0){
+                $('#contact-nationality').focus();
+                nationalityError.innerHTML = "Nationality field is required !";
+                return false;
+            }
+            else{
+                nationalityError.innerHTML = '';
+                return true;
+            }
+        }
 
        function validateContact(){
-            if(!contactFullname()){
+            if(!contactFullname() || !contactEmail() || !contactPhone() ||
+            !contactNationality()){
                 return false;
             }
             else{
@@ -161,3 +204,4 @@
               })
         }
         </script>
+@endsection

resources/views/layout/app.blade.php

@@ -77,6 +77,17 @@
             <li class="nav-item">
                 <a class="nav-link" href="/about">ABOUT US</a>
             </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="{{url('/study-abroad')}}" id="navbarDropdown" role="button" data-bs-hover="dropdown" aria-expanded="false">
+                  EDUCATION
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li>
+                      <a class="dropdown-item"  href="{{url('/study-abroad-detail')}}">Study in Australia</a>
+                      <a class="dropdown-item"  href="{{url('/study-abroad-detail')}}">Study in Melbourne</a>
+                  </li>
+              </ul>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" href="/study-abroad"> STUDY ABROAD </a>
             </li>
@@ -91,8 +102,10 @@
             </li>
         </ul>
         <div class="mobile-navbar-btn">
-            <ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>
+          <img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt="">
-            <ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon>
+          <img src="{{url('frontend/icons/close.png')}}" name="close-outline" class="mobile-nav-icon" alt="">
+            {{-- <ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon> --}}
+            {{-- <ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon> --}}
         </div>
     </header>
 
@@ -237,6 +250,9 @@
     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 
+    <!-- hamburger link -->
+    <script type="text/javascript" src="{{url('frontend/js/index.js')}}"></script>
+
     <!-- slick slider link -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

resources/views/welcome.blade.php

@@ -9,19 +9,52 @@
     <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
 @endsection
 @section('content')
-    <section class="slider-section">
+    <!-- Slider -->
+    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+            @foreach($sliders as $slider)
+                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{$loop->index}}" class="{{$loop->first ? 'active' : ''}}" aria-current="{{$loop->first ? 'true' : ''}}"></button>
+            @endforeach
+        </div>
+        <div class="carousel-inner">
+            @foreach($sliders as $slider)
+            <div class="carousel-item {{$loop->first ? 'active' : ''}}">
+                <div class="slider-image">
+                    <img src="{{url($slider->image)}}" class="d-block w-100" alt="...">
+                </div>
+                <div class="slider-content">
+                    <h2 class="slideDown">{{$slider->title1}}</h2>
+                    <h1>{{$slider->title2}}</h1>
+                    <p class="slideUp">{{strip_tags($slider->description)}}</p>
+                    <a href="{{$slider->link}}">Book an Appointment</a>
+                </div>
+            </div>
+            @endforeach
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+        </button>
+    </div>
+    <!-- Slider -->
+
+    {{-- <section class="slider-section">
         <div class="slider-banner">
             @foreach($sliders as $slider)
             <img src="{{url($slider->image)}}" class="w-100" alt="">
             <div class="slider-content">
-                <h2>{{$slider->title1}}</h2>
+                <h2 class="slideDown">{{$slider->title1}}</h2>
                 <h1>{{$slider->title2}}</h1>
-                <p>{{strip_tags($slider->description)}}</p>
+                <p class="slideUp">{{strip_tags($slider->description)}}</p>
                 <a href="{{$slider->link}}">Book an Appointment</a>
             </div>
             @endforeach
         </div>
-    </section>
+    </section> --}}
 
     <section class="about-icons-section">
         <div class="high-visa">
@@ -158,7 +191,7 @@
                         </div>
                     </div>
                     <div class="mt-4">
-                        <a href="">Learn More</a>
+                        <a href="about">Learn More</a>
                     </div>
                 </div>
             </div>
@@ -311,7 +344,7 @@
                     {
                         breakpoint: 1024,
                         settings: {
-                            slidesToShow: 2,
+                            slidesToShow: 1,
                             slidesToScroll: 1,
                             infinite: true,
                             dots: false
@@ -320,7 +353,7 @@
                     {
                         breakpoint: 600,
                         settings: {
-                            slidesToShow: 2,
+                            slidesToShow: 1,
                             slidesToScroll: 1
                         }
                     },