contactus-v2

contactus.html

@@ -16,7 +16,7 @@
              HERO
         ═══════════════════════════════════════════ -->
         <section class="hero-section">
-          <div class="container">
+          <div class="container-hero-section">
             <div class="hero-card">
               <div class="hero-circles" aria-hidden="true">
                 <div class="circle circle--1"></div>

src/assets/css/contactus-responsive.css

@@ -108,16 +108,23 @@
 ═══════════════════════════════════════════════════════ */
 @media screen and (max-width: 576px) {
   .hero-section {
-    padding-top: 24px;
-    padding-bottom: 32px;
+    padding-bottom: 50px;
   }
-
+.container-hero-section{
+  padding: 0 ;
+}
+.hero-card {
+  height: 400px;
+  border-radius: 0;
+}
   .hero-content {
     width: 100%;
   }
-
+.contact-form-wrapper{
+  padding: 0;
+}
   .hero-h1 {
-    font-size: 20px;
+    font-size: 24px;
     line-height: 32px;
   }
   .contact-social__icons {

src/assets/css/contactus.css

@@ -7,15 +7,15 @@
   margin: 0 auto;
 }
 
-main {
-  padding-bottom: 80px;
-}
-
 /* ═══════════════════════════════════════════════════════
    HERO
 ═══════════════════════════════════════════════════════ */
+.container-hero-section{
+    max-width: 1240px;
+  padding: 0 20px;
+  margin: 0 auto;
+}
 .hero-section {
-  padding-top: 80px;
   padding-bottom: 50px;
 }
 
@@ -853,9 +853,6 @@ textarea {
 /* ═══════════════════════════════════════════════════════
    MAP
 ═══════════════════════════════════════════════════════ */
-.map-section {
-  padding-bottom: 80px;
-}
 
 .map-card {
   position: relative;