From e6dc967c5394ec502176f843d0b197e4d944d8d8 Mon Sep 17 00:00:00 2001
From: tribikram <tribikram@extratechs.com.au>
Date: Fri, 9 Dec 2022 14:12:42 +0545
Subject: [PATCH] [add] mobile responsive design

---
 public/frontend/css/style.css            | 111 ++++++++++++++++++++++-
 resources/views/contact.blade.php        |   2 +-
 resources/views/service_detail.blade.php |   6 +-
 3 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/public/frontend/css/style.css b/public/frontend/css/style.css
index 9543465..179782c 100644
--- a/public/frontend/css/style.css
+++ b/public/frontend/css/style.css
@@ -628,6 +628,7 @@ Responsive Codes
     text-align: center;
     letter-spacing: 0.001em;
     color: #F54C5F;
+    line-height: 48px;
     display: inline-block;
 }
 .enquiry-header h2::after{
@@ -848,6 +849,10 @@ Responsive Codes
     background-size: cover!important;
     position: relative;
 }
+.contact-captcha{
+    display: flex;
+    gap: 2rem;
+}
 .get-in-touch-section{
     padding: 3rem 6rem;
     background: #F5F5F5;
@@ -979,7 +984,7 @@ Responsive Codes
 .news-banner-desc h2{
     font-weight: 700;
     font-size: 60px;
-    line-height: 3rem;
+    line-height: 4rem;
     color: #FFFFFF;
     text-align: center;
     text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
@@ -1064,6 +1069,7 @@ Responsive Codes
     border: none;
     box-shadow: none;
     outline: none;
+    width: 100%;
 }
 .captch-field p{
     font-weight: 400;
@@ -1323,6 +1329,109 @@ Responsive Codes
     width: 140%;
 }
 
+@media only screen and (min-width: 320px) and (max-width: 480px) {
+    /* contact us mobile view */
+    .about-banner-section .breadcrumb, 
+    .contact-us-section .breadcrumb, 
+    .need-chef-banner .breadcrumb{
+        display: none;
+    }
+    .get-in-touch-section, 
+    .our-services-header p{
+        padding: 0;
+    }
+    .get-in-card{
+        padding: 2rem;
+        border-radius: 0;
+    }
+    .get-in-card .col-md-7::before{
+        display: none;
+    }
+    .contact-form{
+        margin: 0;
+    }
+    .contact-captcha{
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 10px;
+    }
+    /* footer mobile css */
+    .footer, 
+    .news-update-section,
+    .bloghead-section, 
+    .related-article,
+    .hiring-chef,
+    .permanent-visa-section, 
+    .service-detail-second,
+    .service-detail-third,
+    .our-services-section,
+    .who-we-section,
+    .objectives-section,
+    .achievement-section,
+    .about-us-section,
+    .our-serivces-section,
+    .our-recruitment-section,
+    .news-and-update-section,
+    .clients-section,
+    .quick-enquiry-setion{
+        padding: 2rem;
+    }
+    .visa-services, 
+    .recruitment, 
+    .quick-links{
+        float: left;
+    }
+    .footer-bottom,
+    .blog-social{
+        display: flex;
+        flex-direction: column;
+    }
+    .footer-desc p{
+        margin-bottom: 20px;
+    }
+    .chef-banner-content h2, 
+    .about-banner-content h2, 
+    .contact-banner-content h2, 
+    .services-banner-content h2, 
+    .service-detail-desc h2, 
+    .news-banner-desc h2{
+        font-size: 48px;
+        line-height: 3.3rem;
+    }
+    .blog-header h2,
+    .enquiry-contacts h2{
+        text-align: center;
+        font-size: 32px;
+        line-height: 44px;
+        margin-bottom: 15px;
+    }
+    .chef-hire-form button{
+        padding: 15px;
+    }
+    .service-detail-secone h3{
+        font-size: 32px;
+        line-height: 44px;
+    }
+    .service-detail-secone{
+        padding-right: 0;
+    }
+    .achievement-items{
+        flex-direction: column;
+        align-items: center;
+        padding: 0;
+    }
+    .news-and-update-section .row{
+        gap: 20px;
+    }
+    .more-news{
+        grid-template-columns: 1fr;
+    }
+    .chef-hire-form{
+        padding: 20px;
+    }
+}
+
 /* large screen */
 @media screen and (min-width: 1600px){
     .our-service-card{
diff --git a/resources/views/contact.blade.php b/resources/views/contact.blade.php
index f962401..5c2a35e 100644
--- a/resources/views/contact.blade.php
+++ b/resources/views/contact.blade.php
@@ -102,7 +102,7 @@
                         @endphp
                     <div class="col-md-12">
                         <label for="">Enter Captcha</label>
-                            <div class="d-flex gap-3">
+                            <div class="contact-captcha">
                                 <div class="captcha-sec">
                                     <input id="captcha" type="text" name = "entered_captcha_code" class="form-control" placeholder="Enter Captcha as Shown" required>
                                     <input type = "hidden" id = "displayed_captcha_code" name = "displayed_captcha_code" value = "{{$code}}"/>
diff --git a/resources/views/service_detail.blade.php b/resources/views/service_detail.blade.php
index c63faf3..d3aac16 100644
--- a/resources/views/service_detail.blade.php
+++ b/resources/views/service_detail.blade.php
@@ -22,7 +22,8 @@
         <div class="row">
             <div class="col-md-6">
                 <div class="service-detail-secone">
-                    <h3>Employer Nomination <br> Scheme <br> Visa Subclass 186 <br> (Direct Entry Stream)</h3>
+                    <h3>Employer Nomination Scheme </h3> 
+                    <h3>Visa Subclass 186 (Direct Entry Stream)</h3>
                     <p>This visa lets skilled workers, who are nominated by an employer, live and work in Australia permanently.</p>
                 </div>
             </div>
@@ -45,7 +46,8 @@
         <div class="row">
             <div class="col-md-6">
                 <div class="service-detail-secone">
-                    <h3>Employer Nomination <br> Scheme <br> Visa Subclass 186 <br> (Temporary Residence Transition Stream)</h3>
+                    <h3>Employer Nomination Scheme </h3>
+                    <h3>Visa Subclass 186 (Temporary Residence Transition Stream)</h3>
                     <p>This visa lets skilled workers, who are nominated by an employer, live and work in Australia permanently.</p>
                 </div>
             </div>