changed mobile breakpoint

_breakpoints.scss

@@ -1,4 +1,4 @@
-$breakpoints: ("mobile":450px);
+$breakpoints: ("mobile":500px);
 @mixin mobile {
     @media (max-width: map-get($breakpoints, "mobile")) {
         @content;

style.css

@@ -76,7 +76,7 @@ a {
   z-index: 5;
   display: none;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .hamburger-menu {
     display: block;
   }
@@ -112,7 +112,7 @@ a {
 header {
   position: relative;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header {
     display: flex;
     flex-direction: column;
@@ -125,7 +125,7 @@ header .top-bar .container {
   display: flex;
   flex-direction: row;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .top-bar .container {
     width: 100%;
     justify-content: space-between;
@@ -136,7 +136,7 @@ header .top-bar .container .top-bar-button {
   width: 10%;
   justify-content: center;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .top-bar .container .top-bar-button {
     display: none;
   }
@@ -152,7 +152,7 @@ header .top-bar .container h5 {
   text-align: left;
   width: 75%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .top-bar .container h5 {
     width: 70%;
     text-align: center;
@@ -165,7 +165,7 @@ header .top-bar .container #lang {
   width: 5%;
   margin-right: 2%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .top-bar .container #lang {
     display: none;
   }
@@ -178,7 +178,7 @@ header .top-bar .container .social {
   border-left: 1px solid lightgrey;
   margin: 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .top-bar .container .social {
     width: 30%;
   }
@@ -190,7 +190,7 @@ header .top-bar .container .social figure {
 header .mid-bar {
   padding: 3rem 0 5rem;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .mid-bar {
     padding: 2rem 0;
     background-color: white;
@@ -201,7 +201,7 @@ header .mid-bar .container {
   flex-direction: row;
   justify-content: space-between;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .mid-bar .container {
     display: flex;
     flex-direction: column;
@@ -211,7 +211,7 @@ header .mid-bar .container .logo {
   width: 25%;
   margin-right: 10%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .mid-bar .container .logo {
     width: 60%;
     margin-left: 5%;
@@ -222,7 +222,7 @@ header .mid-bar .container .contact-details {
   justify-content: flex-end;
   width: 22%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .mid-bar .container .contact-details {
     display: none;
   }
@@ -256,7 +256,7 @@ header .navbar {
   position: absolute;
   bottom: -2rem;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .navbar {
     display: flex;
     flex-direction: column;
@@ -275,7 +275,7 @@ header .navbar .menu {
   margin: 0;
   width: 75%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .navbar .menu {
     display: flex;
     flex-direction: column;
@@ -295,7 +295,7 @@ header .navbar .menu a {
   padding: 0 1.6rem;
   transition: background-color 0.5s;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .navbar .menu a {
     padding: 1rem 0;
   }
@@ -311,7 +311,7 @@ header .navbar .search {
   display: flex;
   justify-content: flex-end;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .navbar .search {
     width: 80%;
     position: absolute;
@@ -340,7 +340,7 @@ header .navbar a.cart {
   background-color: transparent;
   transition: background-color 0.5s;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   header .navbar a.cart {
     position: absolute;
     top: 0;
@@ -363,7 +363,7 @@ header .navbar a.cart:hover {
      object-position: bottom;
   height: 65vh;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .upfold {
     height: auto;
   }
@@ -380,7 +380,7 @@ header .navbar a.cart:hover {
   top: 30%;
   width: 100%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .upfold .upfold-text {
     top: auto;
     bottom: 0;
@@ -396,7 +396,7 @@ header .navbar a.cart:hover {
   margin-bottom: 5%;
   color: #103660;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .upfold .upfold-text .container h1 {
     font-size: 2rem;
     text-align: center;
@@ -405,7 +405,7 @@ header .navbar a.cart:hover {
     margin-bottom: 10%;
   }
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .upfold .upfold-text .container .upfold-links {
     display: flex;
     flex-direction: row;
@@ -423,7 +423,7 @@ header .navbar a.cart:hover {
   font-weight: 500;
   transition: background-color 0.5s, color 0.5s;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .upfold .upfold-text .container .upfold-links a {
     display: flex;
     justify-content: center;
@@ -456,7 +456,7 @@ header .navbar a.cart:hover {
   display: flex;
   flex-direction: row;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .get-quote .container {
     display: flex;
     flex-direction: column;
@@ -468,7 +468,7 @@ header .navbar a.cart:hover {
 .get-quote .container .get-quote-text {
   width: 90%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .get-quote .container .get-quote-text {
     width: 100%;
   }
@@ -502,7 +502,7 @@ header .navbar a.cart:hover {
   padding: 5% 0;
   text-align: center;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .about {
     padding: 3rem 0;
     padding-bottom: 0;
@@ -512,7 +512,7 @@ header .navbar a.cart:hover {
   display: flex;
   flex-direction: column;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .about .container .about-text {
     width: 90%;
     margin: 0 auto;
@@ -545,7 +545,7 @@ header .navbar a.cart:hover {
   margin-top: 5%;
   box-shadow: 0rem 0 2rem rgba(0, 0, 0, 0.361);
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .about .container .services-short {
     margin-top: 4rem;
     display: flex;
@@ -557,7 +557,7 @@ header .navbar a.cart:hover {
   position: relative;
   border-right: 1px solid rgba(196, 196, 196, 0.361);
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .about .container .services-short .content-box {
     border: none;
   }
@@ -566,7 +566,7 @@ header .navbar a.cart:hover {
   opacity: 0;
   transition: opacity 0.5s;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .about .container .services-short .content-box:nth-child(2) {
     background-image: url(images/pexels-karolina-grabowska-5882705.jpg);
     background-position: center;
@@ -639,7 +639,7 @@ header .navbar a.cart:hover {
   text-align: center;
   color: white;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .progress-report .container .progress-report-text {
     width: 90%;
     margin-left: 5%;
@@ -658,7 +658,7 @@ header .navbar a.cart:hover {
   flex-direction: row;
   justify-content: space-between;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .progress-report .container .progress-report-blocks {
     flex-wrap: wrap;
     justify-content: space-between;
@@ -673,7 +673,7 @@ header .navbar a.cart:hover {
   color: white;
   margin-top: 5%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .progress-report .container .progress-report-blocks .progress-box {
     width: 50%;
   }
@@ -692,7 +692,7 @@ header .navbar a.cart:hover {
 .industries {
   margin: 5% 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .industries {
     margin: 3rem 0;
   }
@@ -708,7 +708,7 @@ header .navbar a.cart:hover {
   font-size: 2.5rem;
   text-align: center;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .industries .container .heading {
     padding-bottom: 5rem;
   }
@@ -722,7 +722,7 @@ header .navbar a.cart:hover {
   left: 47.5%;
   top: 60%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .industries .container .heading::after {
     width: 20%;
     left: 40%;
@@ -739,7 +739,7 @@ header .navbar a.cart:hover {
   display: flex;
   margin-bottom: 5%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .industries .container .industry-list li {
     width: 50%;
     display: flex;
@@ -754,7 +754,7 @@ header .navbar a.cart:hover {
 .industries .container .industry-list li:nth-child(4), .industries .container .industry-list li:nth-child(5), .industries .container .industry-list li:nth-child(6) {
   margin-bottom: 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .industries .container .industry-list li:nth-child(4) {
     margin-bottom: 2rem;
   }
@@ -769,7 +769,7 @@ header .navbar a.cart:hover {
   border-radius: 3rem;
   background-color: #652EE1;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .industries .container .industry-list li figure {
     width: 4rem;
     height: 4rem;
@@ -793,7 +793,7 @@ header .navbar a.cart:hover {
   background-color: #EEEFF3;
   padding: 5% 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team {
     padding: 3rem 0;
   }
@@ -818,7 +818,7 @@ header .navbar a.cart:hover {
   flex-direction: row;
   justify-content: space-between;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team .container .staffs {
     flex-wrap: wrap;
     justify-content: space-around;
@@ -831,7 +831,7 @@ header .navbar a.cart:hover {
   height: 40vh;
   overflow: hidden;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team .container .staffs li {
     width: 45%;
     margin: 2.5%;
@@ -843,7 +843,7 @@ header .navbar a.cart:hover {
 .team .container .staffs li:last-child {
   margin: 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team .container .staffs li:last-child {
     margin: 2.5%;
   }
@@ -853,7 +853,7 @@ header .navbar a.cart:hover {
   height: 100%;
   overflow: hidden;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team .container .staffs li .staff-photo img {
     margin-top: 4rem;
   }
@@ -870,7 +870,7 @@ header .navbar a.cart:hover {
   background-color: #221543;
   color: white;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team .container .staffs li .staff-details {
     bottom: auto;
     top: 0;
@@ -889,7 +889,7 @@ header .navbar a.cart:hover {
   color: white;
   transition: bottom 0.5s;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .team .container .staffs li .staff-social-media {
     bottom: 0;
     padding: 1rem;
@@ -934,7 +934,7 @@ header .navbar a.cart:hover {
   padding-bottom: 0;
   margin-bottom: 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .quick-enquiry-form .container .heading-2 {
     width: 90%;
     margin-left: 5%;
@@ -954,7 +954,7 @@ header .navbar a.cart:hover {
   display: flex;
   width: 100%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .quick-enquiry-form .container form {
     flex-wrap: wrap;
     justify-content: space-around;
@@ -970,7 +970,7 @@ header .navbar a.cart:hover {
   border: none;
   font-size: 0.9rem;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   .quick-enquiry-form .container form select,
 .quick-enquiry-form .container form input,
 .quick-enquiry-form .container form button {
@@ -1011,7 +1011,7 @@ footer {
   background-color: #221543;
   padding: 4% 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   footer {
     padding: 3rem 0;
   }
@@ -1020,7 +1020,7 @@ footer .container {
   display: flex;
   flex-direction: row;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   footer .container {
     display: flex;
     flex-direction: column;
@@ -1036,7 +1036,7 @@ footer .container .newsletter {
   color: white;
   margin-top: 1rem;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   footer .container .company-details,
 footer .container .quick-links,
 footer .container .recent-news,
@@ -1082,7 +1082,7 @@ footer .container .company-details ul li:nth-child(3)::before {
 footer .container .quick-links {
   width: 25%;
 }
-@media (max-width: 450px) {
+@media (max-width: 500px) {
   footer .container .quick-links {
     width: 100%;
   }