@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
.btn-tertiary, .btn-secondary, .btn-primary {
  height: 50px;
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.75px;
  border-radius: 5px;
  border: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  transition: all 0.2 ease;
}
.btn-tertiary:hover, .btn-secondary:hover, .btn-primary:hover {
  background: #f0c502;
}
.btn-tertiary:active, .btn-secondary:active, .btn-primary:active {
  transform: scale(0.96);
}

.btn-primary {
  background: linear-gradient(#fdd623, #fdd419);
  width: 165px;
  color: #000;
}

.btn-secondary {
  background: linear-gradient(#fdd623, #fdd419);
  width: 200px;
  color: #000;
}

.btn-tertiary {
  background: #e0e0e0;
  width: 200px;
  color: #000;
}
.btn-tertiary:hover {
  background: #c6c6c6;
}

html .aboutus p, html .gallery2 p, html .services2 p, html .process p, html .services p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2.2rem;
  letter-spacing: 0.5px;
  text-align: left;
  line-height: 3rem;
  color: #000;
}

html .aboutus h1, html .gallery2 h1, html .services2 h1 {
  font-family: "Raleway", sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: 0.75px;
  text-align: center;
  color: #343434;
}

html .whyus h2, html .services2 .services-cards2 .card2 .incard h2, html .services2 .services-cards2 .card1 .incard h2 {
  font-family: "Raleway", sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.75px;
  color: #343434;
}

html .services2 .services-cards2 .card2 .incard p, html .services2 .services-cards2 .card1 .incard p {
  width: 550px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  letter-spacing: 0.4px;
  text-align: left;
  line-height: 3rem;
  color: #000;
}

html .gallery2 .container .gallery .row .row6, html .gallery2 .container .gallery .row .row5, html .gallery2 .container .gallery .row .row4, html .gallery2 .container .gallery .row .row3, html .gallery2 .container .gallery .row .row2, html .gallery2 .container .gallery .row .row1 {
  display: flex;
  flex-wrap: wrap;
  display: none;
  /* Animation */
  /* for hide */
}
html .gallery2 .container .gallery .row .row6 .gallery-item, html .gallery2 .container .gallery .row .row5 .gallery-item, html .gallery2 .container .gallery .row .row4 .gallery-item, html .gallery2 .container .gallery .row .row3 .gallery-item, html .gallery2 .container .gallery .row .row2 .gallery-item, html .gallery2 .container .gallery .row .row1 .gallery-item {
  width: 25%;
  padding: 15px;
}
html .gallery2 .container .gallery .row .row6 .gallery-item a .gallery-item-inner img, html .gallery2 .container .gallery .row .row5 .gallery-item a .gallery-item-inner img, html .gallery2 .container .gallery .row .row4 .gallery-item a .gallery-item-inner img, html .gallery2 .container .gallery .row .row3 .gallery-item a .gallery-item-inner img, html .gallery2 .container .gallery .row .row2 .gallery-item a .gallery-item-inner img, html .gallery2 .container .gallery .row .row1 .gallery-item a .gallery-item-inner img {
  width: 100%;
  /* height: 200px; */
  border: 4px solid #d4dad9;
}
html .gallery2 .container .gallery .row .row6 .gallery-item.show, html .gallery2 .container .gallery .row .row5 .gallery-item.show, html .gallery2 .container .gallery .row .row4 .gallery-item.show, html .gallery2 .container .gallery .row .row3 .gallery-item.show, html .gallery2 .container .gallery .row .row2 .gallery-item.show, html .gallery2 .container .gallery .row .row1 .gallery-item.show { /* for show*/
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html .gallery2 .container .gallery .row .row6 .gallery-item.hide, html .gallery2 .container .gallery .row .row5 .gallery-item.hide, html .gallery2 .container .gallery .row .row4 .gallery-item.hide, html .gallery2 .container .gallery .row .row3 .gallery-item.hide, html .gallery2 .container .gallery .row .row2 .gallery-item.hide, html .gallery2 .container .gallery .row .row1 .gallery-item.hide {
  display: none;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html footer .f-location, html footer .f-contact, html footer .f-services {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  color: #fff;
}

html footer .f-location h3, html footer .f-contact h3, html footer .f-services h3, html footer .f-socialmedia h3 {
  font-family: "Raleway", sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 2px;
}

html footer .f-contact address, html footer .f-services ul {
  display: flex;
  flex-direction: column;
  padding: 0;
}

html footer .f-services ul li {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  line-height: 3.5rem;
}

html .services2 .services-cards2 .card2 .incard, html .services2 .services-cards2 .card1 .incard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

html {
  font-size: 62.5%;
  /* tablet */
  /* mobile */
}
html header .contact-header {
  display: flex;
  height: 4rem;
  width: 100%;
  background-color: #fdd419;
}
html header .contact-header .quote {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  top: 5px;
  left: 125px;
  padding-left: 1.5rem;
}
html header .contact-header .quote p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  color: #000;
}
html header .contact-header .quote p strong {
  color: #000;
}
html header .contact-header .quote .phone {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-right: 1.5rem;
  letter-spacing: 0.15rem;
}
html header .contact-header a {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-weight: 425;
  font-style: normal;
  font-size: 1.5rem;
}
html header .contact-header .languages {
  display: flex;
  gap: 2rem;
  position: absolute;
  top: 10px;
  right: 300px;
}
html header .contact-header .languages a {
  text-decoration: none;
}
html header .contact-header .languages a img {
  width: 20px;
  height: 15px;
  position: relative;
  bottom: 1px;
  right: 1px;
  border: #000 1.5px solid;
  border-radius: 4px;
}
html header .contact-header ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  position: absolute;
  right: 125px;
  height: 4rem;
}
html header .contact-header ul li {
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0 1rem 0 1rem;
}
html header .contact-header ul li .bi-facebook,
html header .contact-header ul li .bi-instagram,
html header .contact-header ul li .bi-tiktok {
  height: 21px;
  width: 21px;
}
html header .contact-header ul li:hover {
  background: #fff;
}
html header .nav2 {
  display: flex;
  align-items: center;
  padding: 1rem;
}
html header .nav2 .logo {
  width: 15rem;
  height: 100%;
  position: relative;
  left: 125px;
}
html header .nav2 .phone2 {
  display: none;
}
html header .nav2 .navbar {
  position: absolute;
  right: 114px;
  height: 30px;
}
html header .nav2 .navbar .container-fluid {
  width: 100%;
  background-color: #fff;
  /* border: 1px black solid; */
}
html header .nav2 .navbar .container-fluid .navbar-brand {
  display: none;
}
html header .nav2 .navbar .container-fluid .collapse .navbar-nav {
  display: flex;
  gap: 4rem;
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.8rem;
  /* border: 1px black solid; */
}
html header .nav2 .navbar .container-fluid .collapse .navbar-nav li {
  margin: 0;
}
html header .nav2 .navbar .container-fluid .collapse .navbar-nav a {
  text-decoration: none;
  height: 32px;
  margin: 0;
  color: #000;
}
html header .nav2 .navbar .container-fluid .collapse .navbar-nav a:hover {
  border-bottom: #fdd419 solid 3px;
}
html .welcome {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.777), rgba(255, 255, 255, 0)), url(../images/welcome_2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 525px;
}
html .welcome h1 {
  width: 600px;
  margin: 7rem 0 0 125px;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 5rem;
  color: #fff;
}
html .welcome p {
  width: 600px;
  margin: 0 0 0 125px;
  font-family: "Roboto", sans-serif;
  font-weight: 350;
  font-style: normal;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  color: #fff;
}
html .welcome .intro_btn {
  display: flex;
  gap: 5rem;
  margin: 0 0 0 125px;
}
html .services {
  display: flex;
  flex-direction: column;
  gap: 13rem;
  align-items: center;
  margin: 15rem 0 15rem 0;
}
html .services h2 {
  font-size: 3.5rem;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  letter-spacing: 0.75px;
  text-align: center;
  color: #343434;
}
html .services p {
  width: 900px;
}
html .services p mark {
  color: #343434;
  background: #fff;
  font-weight: 600;
}
html .services .services-cards {
  display: flex;
  gap: 9rem;
  /* border: 1px black solid; */
}
html .services .services-cards .card {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  border: none;
}
html .services .services-cards .card img {
  width: 350px;
  height: 300px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
html .services .services-cards .card h3 {
  font-family: "Raleway", sans-serif;
  font-size: 2rem;
  color: #343434;
  font-weight: 800;
  letter-spacing: 0.75px;
}
html .services .services-cards .card p {
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
  text-align: left;
  line-height: 2.6rem;
  color: #000;
}
html .process {
  display: flex;
  flex-direction: column;
  gap: 13rem;
  align-items: center;
  padding: 15rem 125px 15rem 125px;
  background: #f4f4f4;
}
html .process h2 {
  font-size: 3.5rem;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  letter-spacing: 0.75px;
  text-align: center;
  color: #343434;
}
html .process p {
  width: 900px;
}
html .process p mark {
  color: #343434;
  background: #f4f4f4;
  font-weight: 600;
}
html .process .process-list {
  width: 100%;
  display: flex;
  gap: 8rem;
  padding: 0 6rem 0 5rem;
}
html .process .process-list img {
  width: 675px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  /* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
html .process .process-list ol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 5rem 0 3rem 0;
}
html .process .process-list ol li {
  /*font-family: $secondary_font_family;
  font-size: $fs-h3;
  font-weight: 800;
  letter-spacing: 0.75px;
  border-radius: 5px;
  color: $clr-secondary;*/
}
html .process .process-list ol li h3 {
  font-family: "Raleway", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.75px;
  border-radius: 5px;
  color: #343434;
}
html .process .process-list ol p {
  width: 400px;
  font-size: 1.8rem;
  margin-bottom: 3rem;
}
html .services2 {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  align-items: center;
  padding: 10rem 0 0 0;
  background: #f9f9f9;
}
html .services2 p {
  width: 1005px;
}
html .services2 p mark {
  color: #000;
  background: #f9f9f9;
  font-weight: 600;
}
html .services2 .services-cards2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15rem;
  justify-content: center;
  background: #fff;
  padding: 20rem 0 10rem 0;
}
html .services2 .services-cards2 .card1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15rem;
  padding: 0 0 12rem 13rem;
}
html .services2 .services-cards2 .card2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 15rem;
  padding: 0 12rem 12rem 0;
}
html .services2 .services-cards2 img {
  width: 500px;
  height: 450px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
html .gallery2 {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  align-items: center;
  padding: 10rem 0 0 0;
  background: #f9f9f9;
}
html .gallery2 h1 {
  margin: 0 0 0 0;
}
html .gallery2 p {
  width: 1005px;
}
html .gallery2 p mark {
  color: #000;
  background: #f9f9f9;
  font-weight: 600;
}
html .gallery2 a {
  padding: 0 0 10rem 0;
}
html .gallery2 .container {
  max-width: 1170px;
  margin: auto;
}
html .gallery2 .container .row .gallery-filter {
  padding: 0 15px;
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
  color: #000;
  font-size: 17px;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.3 ease;
  text-transform: uppercase;
}
html .gallery2 .container .row .gallery-filter .filter-item {
  color: #000;
  margin: 0 4px 13px 4px;
  font-size: 17px;
  border: 2px solid #000;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.3 ease;
  text-transform: uppercase;
}
html .gallery2 .container .row .gallery-filter .filter-item.active {
  color: #000;
  font-weight: 600;
  background: #fdda37;
  border: 2px solid #fdda37;
}
html .gallery2 .container .gallery .row {
  padding-bottom: 0;
}
html .gallery2 .container .gallery .row .row0 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 0 10rem 0;
  /* Animation */
  /* for hide */
}
html .gallery2 .container .gallery .row .row0 .gallery-item {
  width: 25%;
  padding: 15px;
}
html .gallery2 .container .gallery .row .row0 .gallery-item a .gallery-item-inner img {
  width: 100%;
  /* height: 200px; */
  border: 4px solid #d4dad9;
}
html .gallery2 .container .gallery .row .row0 .gallery-item.show { /* for show*/
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html .gallery2 .container .gallery .row .row0 .gallery-item.hide {
  display: none;
}
html .aboutus {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1.25fr 1.5fr 2fr 0.75fr;
  grid-column-gap: 10rem;
  grid-row-gap: 0;
  grid-template-areas: "a a b b b" "a a c c c" "a a d d d" "a a e e e";
  padding: 10rem 0 10rem 13rem;
  background: #f9f9f9;
}
html .aboutus .div1 {
  grid-area: a;
}
html .aboutus .div2 {
  grid-area: b;
}
html .aboutus .div3 {
  grid-area: c;
}
html .aboutus .div4 {
  grid-area: d;
}
html .aboutus .div5 {
  grid-area: e;
  text-align: center;
  padding: 0 13rem 0 0;
}
html .aboutus h1 {
  width: 100%;
  padding: 5rem 13rem 0 0;
}
html .aboutus p {
  width: 100%;
  padding: 0 13rem 0 0;
}
html .aboutus p mark {
  color: #343434;
  background: #f9f9f9;
  font-weight: 600;
}
html .aboutus img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
html .whyus {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  padding: 15rem 0 15rem 0;
  background: #fff;
}
html .whyus h3 {
  font-family: "Raleway", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.75px;
  text-align: center;
  color: #000;
}
html .whyus .whyus-list {
  margin-top: 4rem;
  width: 900px;
  display: flex;
  gap: 8rem;
}
html .whyus .whyus-list ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  margin: 3rem 0 3rem 0;
}
html .whyus .whyus-list ul li {
  font-family: "Roboto", sans-serif;
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: 0.75px;
  border-radius: 5px;
  color: #000;
}
html .whyus .whyus-list ul li strong {
  color: #343434;
  font-weight: 600;
}
html .contact {
  display: flex;
  margin: 5rem 13rem 10rem 13rem;
  gap: 5rem;
  border: 5px #fddd4c solid;
  border-radius: 10px;
}
html .contact .container {
  width: 100%;
  padding: 0;
}
html .contact .container form {
  background: #fddd4c;
  display: flex;
  flex-direction: column;
  padding: 50px;
}
html .contact .container form h1 {
  color: #555;
  font-weight: 800;
  margin-bottom: 20px;
  font-size: 3.5rem;
}
html .contact .container form input,
html .contact .container form select {
  border: 0;
  margin: 10px 0;
  width: 100%;
  height: 40px;
  outline: none;
  background: #fff;
  font-size: 1.6rem;
  padding: 6px 0 15px 10px;
  border-radius: 5px;
}
html .contact .container form textarea {
  border: 0;
  margin: 10px 0;
  width: 100%;
  height: 150px;
  outline: none;
  background: #fff;
  padding: 6px 0 15px 10px;
  font-size: 1.6rem;
  border-radius: 5px;
}
html .contact .container form button {
  width: 150px;
  margin: 20px auto 0;
}
html .contact .contact-info {
  width: 100%;
  display: flex;
}
html .contact .contact-info ul {
  display: flex;
  flex-direction: column;
  border: 5px #fddd4c solid;
}
html .contact .contact-info p {
  font-family: "Roboto", sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.75px;
}
html .contact .contact-info .contact-f {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}
html .contact .contact-info .contact-f a {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
html .contact .contact-info .contact-f img {
  display: flex;
  margin: auto;
  width: 80%;
  height: 100%;
}
html .contact .contact-info .contact-f .f {
  display: flex;
  gap: 2rem;
  align-items: start;
}
html .contact .contact-info .contact-f .f .bi-envelope,
html .contact .contact-info .contact-f .f .bi-telephone,
html .contact .contact-info .contact-f .f .bi-geo-alt {
  width: 3rem;
  height: 100%;
  color: #fddd4c;
}
html footer {
  background: #343434;
  display: flex;
  justify-content: center;
  gap: 12rem;
  padding: 9rem 0 9rem 0;
}
html footer .f-socialmedia {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
html footer .f-socialmedia h3 {
  color: #fff;
}
html footer .f-socialmedia ul {
  margin-left: 0;
  display: flex;
  gap: 4rem;
}
html footer .f-socialmedia ul .f-facebook,
html footer .f-socialmedia ul .f-instagram,
html footer .f-socialmedia ul .f-tiktok {
  height: 35px;
  width: 35px;
}
html footer .f-contact address p {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.6rem;
  letter-spacing: 1.2px;
  line-height: 3rem;
}
html footer .f-location p {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.6rem;
  letter-spacing: 1.2px;
  line-height: 3rem;
}
html footer a {
  color: #fff;
  text-decoration: none;
}
@media screen and (min-width: 768px) and (max-width: 1206px) {
  html {
    /* start styles header */
    /* end styles header */
    /* start styles headline */
    /* end styles headline */
    /* start main services styles headline */
    /* end main services styles headline */
    /* start process styles headline */
    /* end process styles headline */
    /* start services styles headline */
    /* end services styles headline */
    /* start gallery styles headline */
    /* end gallery styles headline */
    /* start about us styles headline */
    /* end about us styles headline */
    /* start contact styles headline */
    /* start footer styles headline */
  }
  html header .contact-header .quote {
    left: 70px;
    border-left: 1px #fff solid;
    top: 0;
  }
  html header .contact-header .quote p {
    position: relative;
    top: 5px;
  }
  html header .contact-header .languages {
    right: 230px;
  }
  html header .contact-header .nav-social-media {
    right: 70px;
  }
  html header .nav2 .logo {
    width: 11rem;
    top: 5px;
    left: 60px;
  }
  html header .nav2 .navbar {
    background: #fff;
    right: 50px;
    /* border: 1px black solid; */
  }
  html header .nav2 .navbar .container-fluid {
    background-color: #fff;
    border-radius: 3px;
  }
  html header .nav2 .navbar .container-fluid .navbar-toggler {
    position: relative;
    top: -15px;
    right: 12px;
    width: 50px;
    height: 45px;
    border: 1.5px #000 solid;
  }
  html header .nav2 .navbar .container-fluid .collapse {
    background: #fff;
  }
  html header .nav2 .navbar .container-fluid .collapse .navbar-nav {
    padding: 3rem;
    text-align: center;
  }
  html .welcome h1 {
    margin: 5rem 0 0 7rem;
  }
  html .welcome p {
    margin: 0 0 0 7rem;
  }
  html .welcome .intro_btn {
    margin: 0 0 0 7rem;
  }
  html .services {
    width: 100%;
    margin: 15rem 0 15rem 0;
    align-items: center;
    gap: 10rem;
  }
  html .services p {
    width: 80%;
  }
  html .services img {
    width: 400px;
    height: 350px;
  }
  html .services .services-cards {
    width: 100%;
    gap: 11rem;
    flex-direction: column;
    align-items: center;
  }
  html .services .services-cards .card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  html .services .services-cards .card p {
    width: 60%;
  }
  html .process {
    padding: 14rem 0 10rem 0;
    gap: 10rem;
  }
  html .process p {
    width: 90%;
  }
  html .process .process-list {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    text-align: center;
  }
  html .process .process-list ol {
    display: flex;
    flex-direction: column;
    width: 95%;
    gap: 3rem;
    margin: auto;
    padding: 0 0 0 0;
  }
  html .process .process-list ol p {
    width: 95%;
  }
  html .services2 {
    width: 100%;
    margin: 0 0 15rem 0;
    gap: 5rem;
  }
  html .services2 p {
    width: 85%;
  }
  html .services2 .services-cards2 {
    padding: 10rem 0 10rem 0;
    gap: 15rem;
  }
  html .services2 .services-cards2 .card1,
  html .services2 .services-cards2 .card2 {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 3rem;
  }
  html .services2 .services-cards2 .card1 .incard,
  html .services2 .services-cards2 .card2 .incard {
    width: 100%;
    gap: 3rem;
  }
  html .services2 .services-cards2 .card1 .incard p,
  html .services2 .services-cards2 .card2 .incard p {
    width: 70%;
  }
  html .gallery2 {
    padding: 5rem 3rem 0 3rem;
  }
  html .gallery2 .container .row .gallery-filter .filter-item {
    margin-bottom: 15px;
  }
  html .gallery2 .container .gallery {
    padding: 0 2rem 0 2rem;
  }
  html .gallery2 .container .gallery .row .row0 .gallery-item {
    width: 33.3333333333%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row1 .gallery-item {
    width: 33.3333333333%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row2 .gallery-item {
    width: 33.3333333333%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row3 .gallery-item {
    width: 33.3333333333%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row4 .gallery-item {
    width: 33.3333333333%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row5 .gallery-item {
    width: 33.3333333333%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row6 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .aboutus {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 6rem;
    grid-template-areas: "b" "a" "c" "d" "e";
    padding: 3rem 0 8rem 0;
    align-items: center;
    justify-content: center;
  }
  html .aboutus h1 {
    width: 100%;
    font-size: 3.5rem;
    padding: 7rem 0 2rem 0;
  }
  html .aboutus p {
    font-size: 2.2rem;
    padding: 0 75px 0 75px;
  }
  html .aboutus .div1 {
    display: flex;
    align-items: center;
  }
  html .aboutus .div1 img {
    margin: auto;
    width: 450px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 10% 10%;
       object-position: 10% 10%;
  }
  html .aboutus .div5 {
    padding: 0;
  }
  html .whyus .whyus-list {
    width: 80%;
  }
  html .contact {
    display: flex;
    margin: 5rem 7rem 10rem 7rem;
    gap: 5rem;
    border: 5px #fddd4c solid;
    border-radius: 10px;
  }
  html footer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    text-align: center;
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
    /* grid-template-areas: 
    "a a b b b"
    "a a c c c"
    "a a d d d"
    "a a e e e"
    ; */
    padding: 10rem 10rem 10rem 10rem;
  }
  html footer .f-socialmedia {
    grid-column: 1/2;
    grid-row: 1/2;
    /* border: 1px black solid; */
  }
  html footer .f-services {
    grid-column: 1/2;
    grid-row: 2/3;
    /* border: 1px black solid; */
  }
  html footer .f-contact {
    grid-column: 2/3;
    grid-row: 2/3;
    /* border: 1px black solid; */
  }
  html footer .f-location {
    grid-column: 2/3;
    grid-row: 1/2;
    margin: 5rem 0 0 0;
    /* border: 1px black solid; */
  }
}
@media screen and (min-width: 462px) and (max-width: 767px) {
  html {
    /* start styles header */
    /* end styles header */
    /* start styles headline */
    /* end styles headline */
    /* start main services styles headline */
    /* end main services styles headline */
    /* start process styles headline */
    /* end process styles headline */
    /* start services styles headline */
    /* end services styles headline */
    /* start gallery styles headline */
    /* end gallery styles headline */
    /* start about us styles headline */
    /* end about us styles headline */
    /* start contact styles headline */
    /* end contact styles headline */
    /* start footer styles headline */
    /* end footer styles headline */
  }
  html header .contact-header {
    width: 100%;
    position: fixed;
    z-index: 2;
  }
  html header .contact-header .quote {
    display: none;
    left: 15px;
    border: none;
  }
  html header .contact-header .languages {
    right: 170px;
  }
  html header .contact-header .nav-social-media {
    right: 15px;
  }
  html header .contact-header .nav-social-media li {
    border: none;
  }
  html header .nav2 {
    position: fixed;
    top: 39px;
    width: 100%;
    background: #f9f9f9;
    align-items: normal;
    z-index: 1;
  }
  html header .nav2 .logo {
    width: 11rem;
    top: 5px;
    left: 18px;
  }
  html header .nav2 a {
    text-decoration: none;
  }
  html header .nav2 .phone2 {
    display: block;
    position: relative;
    left: 45px;
    top: 18px;
    width: 175px;
    height: 45px;
    background: #f9f9f9;
    border: 1.5px #000 solid;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: #000;
  }
  html header .nav2 .navbar {
    top: 25px;
    right: 25px;
    background: #f9f9f9;
  }
  html header .nav2 .navbar .container-fluid {
    background-color: #f9f9f9;
    border-radius: 3px;
  }
  html header .nav2 .navbar .container-fluid .navbar-toggler {
    position: relative;
    right: -5px;
    width: 40px;
    height: 40px;
    border: 2.5px #000 solid;
    transition: ease-in-out 0.2s;
  }
  html header .nav2 .navbar .container-fluid .collapse {
    background: #f9f9f9;
  }
  html header .nav2 .navbar .container-fluid .collapse .navbar-nav {
    padding: 3rem;
    text-align: center;
  }
  html .welcome {
    width: 100%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.777), rgba(255, 255, 255, 0)), url(../images/welcome_2_small.jpg);
    top: 13.75rem;
    gap: 2.5rem;
  }
  html .welcome h1 {
    width: 100%;
    font-size: 4.5rem;
    margin: 0;
    padding: 4rem 3rem 0 3rem;
  }
  html .welcome p {
    width: 100%;
    font-size: 2.2rem;
    font-weight: 400;
    margin: 0;
    padding: 0 3rem 0.5rem 3rem;
  }
  html .welcome .intro_btn {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin: 0 0 0 3rem;
  }
  html .services {
    width: 100%;
    margin: 22rem 0 8rem 0;
    gap: 6rem;
  }
  html .services h2 {
    font-size: 2.8rem;
    width: 70%;
  }
  html .services p {
    width: 100%;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .services img {
    margin: auto;
    width: 350px;
    height: 300px;
  }
  html .services .services-cards {
    width: 100%;
    gap: 11rem;
    flex-direction: column;
    align-items: center;
  }
  html .services .services-cards .card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  html .services .services-cards .card p {
    width: 100%;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .process {
    padding: 8rem 0 2rem 0;
    gap: 5rem;
  }
  html .process h2 {
    font-size: 2.8rem;
    width: 70%;
  }
  html .process p {
    width: 100%;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .process .process-list {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 5rem 0 4rem;
  }
  html .process .process-list img {
    margin: auto;
    width: 350px;
    height: 300px;
  }
  html .process .process-list figure {
    display: flex;
    align-items: center;
  }
  html .process .process-list ol {
    width: 100%;
    gap: 3rem;
  }
  html .process .process-list ol p {
    width: 100%;
    margin: 0 0 3rem 0;
    padding: 0;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
  }
  html .services2 {
    width: 100%;
    gap: 6rem;
    background: #f9f9f9;
    padding: 20rem 0 0 0;
    margin: 0;
  }
  html .services2 h1 {
    width: 100%;
    font-size: 3rem;
  }
  html .services2 p {
    width: 100%;
    letter-spacing: 0.1px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .services2 img {
    width: 350px;
    height: 300px;
  }
  html .services2 .services-cards2 {
    width: 100%;
    padding: 10rem 0 10rem 0;
    gap: 15rem;
  }
  html .services2 .services-cards2 .card1,
  html .services2 .services-cards2 .card2 {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 4rem;
  }
  html .services2 .services-cards2 .card1 img,
  html .services2 .services-cards2 .card2 img {
    width: 350px;
    height: 300px;
  }
  html .services2 .services-cards2 .card1 .incard,
  html .services2 .services-cards2 .card2 .incard {
    width: 100%;
    gap: 4rem;
  }
  html .services2 .services-cards2 .card1 .incard h2,
  html .services2 .services-cards2 .card2 .incard h2 {
    font-size: 2rem;
    width: 70%;
  }
  html .services2 .services-cards2 .card1 .incard p,
  html .services2 .services-cards2 .card2 .incard p {
    width: 100%;
    font-size: 1.8rem;
  }
  html .gallery2 {
    padding: 18rem 0 0 0;
    margin: 0;
  }
  html .gallery2 h1 {
    width: 100%;
    font-size: 3rem;
    margin: 0 0 4rem 0;
  }
  html .gallery2 .container .row .gallery-filter .filter-item {
    margin-bottom: 15px;
  }
  html .gallery2 .container .gallery .row {
    padding: 0 0 10rem 0;
  }
  html .gallery2 .container .gallery .row .row0 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row1 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row2 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row3 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row4 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row5 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row6 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .aboutus {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 5rem;
    grid-template-areas: "b" "a" "c" "d" "e";
    padding: 12rem 0 8rem 0;
    align-items: center;
    justify-content: center;
  }
  html .aboutus h1 {
    width: 100%;
    font-size: 3rem;
    padding: 7rem 0 1rem 0;
  }
  html .aboutus p {
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .aboutus .div1 {
    grid-area: a;
    display: flex;
    align-items: center;
  }
  html .aboutus .div1 img {
    margin: auto;
    width: 350px;
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 10% 10%;
       object-position: 10% 10%;
  }
  html .aboutus .div5 {
    grid-area: e;
    padding: 0 0 0 0;
  }
  html .whyus {
    width: 100%;
    padding: 10rem 0 8rem 0;
    align-items: center;
  }
  html .whyus h2 {
    font-size: 2.8rem;
    width: 70%;
  }
  html .whyus h3 {
    width: 80%;
    font-size: 2rem;
  }
  html .whyus .whyus-list {
    width: 80%;
  }
  html .whyus .whyus-list ul li {
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 1.5rem 0 0;
  }
  html .contact {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 18rem 0 0 0;
    border: none;
  }
  html .contact .container {
    padding: 2rem;
  }
  html .contact .container form {
    width: 100%;
    border-radius: 10px;
  }
  html .contact .contact-info {
    margin: 0 0 5rem 0;
  }
  html .contact .contact-info .contact-f img {
    display: none;
  }
  html footer {
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 10rem;
  }
  html footer .f-socialmedia ul,
  html footer .f-services ul,
  html footer .f-contact ul,
  html footer .f-location ul {
    padding: 0;
  }
}
@media screen and (max-width: 461px) {
  html {
    /* start styles header */
    /* start styles headline */
    /* end styles headline */
    /* start main services styles headline */
    /* end main services styles headline */
    /* start process styles headline */
    /* end process styles headline */
    /* start services styles headline */
    /* end services styles headline */
    /* start gallery styles headline */
    /* end gallery styles headline */
    /* start about us styles headline */
    /* end about us styles headline */
    /* start contact styles headline */
    /* end contact styles headline */
    /* start footer styles headline */
    /* end footer styles headline */
  }
  html header .contact-header {
    width: 100%;
    position: fixed;
    z-index: 2;
  }
  html header .contact-header .quote {
    display: none;
    left: 15px;
    border: none;
  }
  html header .contact-header .languages {
    right: 170px;
  }
  html header .contact-header .nav-social-media {
    right: 15px;
  }
  html header .contact-header .nav-social-media li {
    border: none;
  }
  html header .nav2 {
    position: fixed;
    top: 39px;
    width: 100%;
    background: #f9f9f9;
    align-items: normal;
    z-index: 1;
  }
  html header .nav2 .logo {
    width: 11rem;
    top: 5px;
    left: 18px;
  }
  html header .nav2 a {
    text-decoration: none;
  }
  html header .nav2 .phone2 {
    display: block;
    position: relative;
    left: 45px;
    top: 18px;
    width: 175px;
    height: 45px;
    background: #f9f9f9;
    border: 1.5px #000 solid;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: #000;
  }
  html header .nav2 .navbar {
    top: 25px;
    right: 25px;
    background: #f9f9f9;
  }
  html header .nav2 .navbar .container-fluid {
    background-color: #f9f9f9;
    border-radius: 3px;
  }
  html header .nav2 .navbar .container-fluid .navbar-toggler {
    position: relative;
    right: -5px;
    width: 40px;
    height: 40px;
    border: 2.5px #000 solid;
    transition: ease-in-out 0.2s;
  }
  html header .nav2 .navbar .container-fluid .collapse {
    background: #f9f9f9;
  }
  html header .nav2 .navbar .container-fluid .collapse .navbar-nav {
    padding: 3rem;
    text-align: center;
  }
  html .welcome {
    width: 100%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.777), rgba(255, 255, 255, 0)), url(../images/welcome_2_small.jpg);
    top: 13.75rem;
    gap: 2.5rem;
  }
  html .welcome h1 {
    width: 100%;
    font-size: 4.5rem;
    margin: 0;
    padding: 4rem 3rem 0 3rem;
  }
  html .welcome p {
    width: 100%;
    font-size: 2.2rem;
    font-weight: 400;
    margin: 0;
    padding: 0 3rem 0.5rem 3rem;
  }
  html .welcome .intro_btn {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin: 0 0 0 3rem;
  }
  html .services {
    width: 100%;
    margin: 22rem 0 8rem 0;
    gap: 6rem;
  }
  html .services h2 {
    font-size: 2.8rem;
    width: 70%;
  }
  html .services p {
    width: 100%;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .services img {
    margin: auto;
    width: 350px;
    height: 300px;
  }
  html .services .services-cards {
    width: 100%;
    gap: 11rem;
    flex-direction: column;
    align-items: center;
  }
  html .services .services-cards .card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  html .services .services-cards .card p {
    width: 100%;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .process {
    padding: 8rem 0 2rem 0;
    gap: 5rem;
  }
  html .process h2 {
    font-size: 2.8rem;
    width: 70%;
  }
  html .process p {
    width: 100%;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .process .process-list {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 5rem 0 4rem;
  }
  html .process .process-list img {
    margin: auto;
    width: 350px;
    height: 300px;
  }
  html .process .process-list figure {
    display: flex;
    align-items: center;
  }
  html .process .process-list ol {
    width: 100%;
    gap: 3rem;
  }
  html .process .process-list ol p {
    width: 100%;
    margin: 0 0 3rem 0;
    padding: 0;
    letter-spacing: 0.25px;
    font-size: 1.8rem;
  }
  html .services2 {
    width: 100%;
    gap: 6rem;
    background: #f9f9f9;
    padding: 20rem 0 0 0;
    margin: 0;
  }
  html .services2 h1 {
    width: 100%;
    font-size: 3rem;
  }
  html .services2 p {
    width: 100%;
    letter-spacing: 0.1px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .services2 img {
    width: 350px;
    height: 300px;
  }
  html .services2 .services-cards2 {
    width: 100%;
    padding: 10rem 0 10rem 0;
    gap: 15rem;
  }
  html .services2 .services-cards2 .card1,
  html .services2 .services-cards2 .card2 {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 4rem;
  }
  html .services2 .services-cards2 .card1 img,
  html .services2 .services-cards2 .card2 img {
    width: 350px;
    height: 300px;
  }
  html .services2 .services-cards2 .card1 .incard,
  html .services2 .services-cards2 .card2 .incard {
    width: 100%;
    gap: 4rem;
  }
  html .services2 .services-cards2 .card1 .incard h2,
  html .services2 .services-cards2 .card2 .incard h2 {
    font-size: 2rem;
    width: 70%;
  }
  html .services2 .services-cards2 .card1 .incard p,
  html .services2 .services-cards2 .card2 .incard p {
    width: 100%;
    font-size: 1.8rem;
  }
  html .gallery2 {
    padding: 18rem 0 0 0;
    margin: 0;
  }
  html .gallery2 h1 {
    width: 100%;
    font-size: 3rem;
    margin: 0 0 4rem 0;
  }
  html .gallery2 .container .row .gallery-filter .filter-item {
    margin-bottom: 15px;
  }
  html .gallery2 .container .gallery .row {
    padding: 0 0 10rem 0;
  }
  html .gallery2 .container .gallery .row .row0 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row1 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row2 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row3 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row4 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row5 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .gallery2 .container .gallery .row .row6 .gallery-item {
    width: 100%;
    padding: 15px;
  }
  html .aboutus {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 5rem;
    grid-template-areas: "b" "a" "c" "d" "e";
    padding: 12rem 0 8rem 0;
    align-items: center;
    justify-content: center;
  }
  html .aboutus h1 {
    width: 100%;
    font-size: 3rem;
    padding: 7rem 0 1rem 0;
  }
  html .aboutus p {
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 3rem 0 3rem;
  }
  html .aboutus .div1 {
    grid-area: a;
    display: flex;
    align-items: center;
  }
  html .aboutus .div1 img {
    margin: auto;
    width: 350px;
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 10% 10%;
       object-position: 10% 10%;
  }
  html .aboutus .div5 {
    grid-area: e;
    padding: 0 0 0 0;
  }
  html .whyus {
    width: 100%;
    padding: 10rem 0 8rem 0;
    align-items: center;
  }
  html .whyus h2 {
    font-size: 2.8rem;
    width: 70%;
  }
  html .whyus h3 {
    width: 80%;
    font-size: 2rem;
  }
  html .whyus .whyus-list {
    width: 80%;
  }
  html .whyus .whyus-list ul li {
    letter-spacing: 0.25px;
    font-size: 1.8rem;
    padding: 0 1.5rem 0 0;
  }
  html .contact {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 18rem 0 0 0;
    border: none;
  }
  html .contact .container {
    padding: 2rem;
  }
  html .contact .container form {
    width: 100%;
    border-radius: 10px;
  }
  html .contact .contact-info {
    margin: 0 0 5rem 0;
  }
  html .contact .contact-info .contact-f img {
    display: none;
  }
  html footer {
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 10rem;
  }
  html footer .f-socialmedia ul,
  html footer .f-services ul,
  html footer .f-contact ul,
  html footer .f-location ul {
    padding: 0;
  }
}/*# sourceMappingURL=style.css.map */