@charset "UTF-8";
/*
Theme Name: Arez Landscaping, LLC
Theme URI: 
Author: Arez Landscaping, LLC
Author URI: 
Description: A theme for WordPress 6.
Requires at least: WordPress 6.8.3
Version: 1.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wp5default
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Arez Landscaping, LLC is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@import url('https://fonts.googleapis.com/css2?family=Aguafina+Script&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --bg-primary: #F7F8F2;
  --bg-primary-dark: #333333;
  --bg-secondary: #EFF1E6;
  --bg-accent: #E03C31;
  --text-primary: #333333;
  --text-secondary: #019E4F;
  --text-accent: #FFFFFF;
  --font-primary: 'DM Sans', sans-serif;
  --font-secondary: 'Aguafina Script', cursive;
}

/*###################################
# General Styles
###################################*/
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
html {overflow: auto; line-height: 1.15; -webkit-text-size-adjust: 100%;}
body {font-family: var(--font-primary); margin: 0 auto; width: 100%; min-width: 320px; background: var(--bg-primary); }
a, a:visited {color: inherit; text-decoration: none; transition: all .5s ease; -webkit-transition: all .5s ease; text-decoration: none !important;}
a:hover {}
a:focus {outline: none !important;}
img {transition: all ease 0.5s;display: block;}
p { margin-bottom: 20px; font-size: 20px;}
p:has(> a) { margin-bottom: 0; line-height: 1 !important; }
p:has(> a) a { display: inline-block; }
p, li { color: #333; line-height: 1.6;}
h1, h2, h3, h4, h5 {line-height: 1.2; margin-bottom: 20px;}
h1, h2, h3, h4, h5, .h1, .h2, .h3, p, li  {margin-top: 0;}
h3, h4 { font-family: var(--font-secondary); color: var(--text-secondary); font-weight: 400; letter-spacing: 2px; }
h1 { font-size: 80px; }
h2 { font-size: 60px; }
h3 { font-size: 35px; }
h4 { font-size: 25px; }
h5 { font-size: 18px; }

/*###################################
## Typography
###################################*/
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/*###################################
## Layouts
###################################*/
.site {margin: 0 auto;}
.full {width: 100%;}
.main {max-width: 100%;}
.entry-content {margin: 0;}
.hentry, .so-panel, .panel-grid {margin-bottom: 0!important;}
.has-1-columns .wp-block-column {flex-basis: 100%;}
.wp-block-column, .blocks-gallery-item {margin: 0 !important;}
.wp-block-gallery.is-cropped .blocks-gallery-item img {height: auto; width: auto; object-fit: contain;}
.screen-reader-text {border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;}
.row {width: 100%; max-width: 1396px; margin: 0 auto; padding: 0 15px; }
.clearfix {clear: both;}

/*###################################
## Forms
###################################*/
.wpcf7-form {margin: 0 auto; text-align: center; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea {font-family: var(--font-primary); font-size: 16px; color:#000; height:45px; display: block; width: 100%; border:1px solid #ddd; border-radius: unset !important; padding: 5px 10px; box-sizing: border-box; margin: 0 auto; }
.wpcf7-form textarea {height: 120px; padding-top:10px; }
.wpcf7-form button { margin: 20px auto 0; }
.wpcf7-form span.ctc-hide,
.wpcf7-form br { display: none; }
.wpcf7-form p { display: inline !important; }
.wpcf7-form .g-recaptcha > div { margin: 0 auto; }
.wpcf7-form .consents label { display: block; }
.wpcf7-list-item { margin: 0; }

/*###################################
## Buttons
###################################*/
.btn { background: var(--bg-accent); display: inline-block; width: 250px; padding: 39px 5px; text-align: center; line-height: 1; overflow: hidden; cursor: pointer; font-size: 18px; z-index: 1; color: var(--text-accent) !important; border: 2px solid var(--bg-accent); position: relative; border-top-left-radius: 15px; border-bottom-right-radius: 15px; font-weight: 700; }
.btn::before { position: absolute; content: ""; background: var(--bg-secondary); width: 340px; height: 250px; z-index: -1; border-radius: 50%; }
.btn:hover { color: var(--text-primary) !important; }
.btn:before { top: 100%; left: 100%; transition: 0.3s all; }
.btn:hover::before { top: -50px; left: -30px; }

/*###################################
## Menus
###################################*/
/*Main Menu*/
.main-navigation { clear: both; display: block; width: 100%; max-width: 545px; }
.main-navigation a { color: var(--text-accent); display: block; text-decoration: none; font-size: 18px; font-weight: 700; }
.main-navigation ul { list-style: none; margin: 0; padding-left: 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.main-navigation li {float: none; display: inline-block; position: relative;}
.main-navigation li.menu-item-has-children a:after {font-family: "FontAwesome"; content: "\f0d7"; margin-left: 10px;}
.main-navigation li.menu-item-has-children:hover a:after {content: "\f0d8";}
/* .main-navigation a:hover, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {  } */
.main-navigation a:hover, .header-info a:hover, .header-info a:hover .icon { color: var(--text-secondary); }

/* Sub Menu */
.main-navigation li.menu-item-has-children .sub-menu a:after {display: none;}
.main-navigation ul li.menu-item-has-children:hover ul {top: 100%; opacity: 1;width: fit-content;}
.main-navigation ul ul {background: var(--bg-secondary); opacity: 0; text-align: left; top: 50%; display: block; transition: all ease 0.5s; border-top-left-radius: 25px; border-bottom-right-radius: 25px; overflow: hidden; }
.main-navigation ul ul li.menu-item-has-children:hover ul {top: 50%!important; opacity: 1!important; z-index: 1!important;}
.main-navigation ul ul ul { left: 100%; top: -100%!important; transition: all ease 0.5s; opacity: 0!important; z-index: -1!important;}
.main-navigation .sub-menu li {display: block; text-align: left; margin-right: 0; margin-left: 0;}
.main-navigation .sub-menu a {color: var(--text-primary); width: 400px; padding: 10px 15px!important; font-size: 16px;}
/* .main-navigation .sub-menu a:hover, .main-navigation .sub-menu .current-menu-item > a, .main-navigation .sub-menu .current-menu-ancestor > a {color: #000; background: rgba(255,255,255,0.7)!important;} */
.main-navigation .sub-menu a:hover, .main-navigation .sub-menu .current-menu-item > a, .main-navigation .sub-menu .current-menu-ancestor > a { color: #fff; background: var(--text-secondary) !important; }
.main-navigation ul li.menu-item-has-children .sub-menu li { padding: 0; }
.main-navigation ul li.menu-item-has-children .sub-menu li a::before { display: none; }

/*Footer Menu*/
.footer-navigation ul, .service-menu { margin: 0; padding: 0; list-style: none;}
.service-menu { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 15px; }
.footer-navigation li, .service-menu li { display: block; float: none; }
.footer-navigation ul > li.menu-item-has-children { position: relative; }
.service-menu li { flex: 1 1 calc(50% - 15px); }
/* .footer-navigation li:not(:last-of-type), .service-menu li:not(:last-of-type) { margin-bottom: 15px; } */
.footer-navigation li:last-of-type, .service-menu li:last-of-type { margin-bottom: 0; }
.footer-navigation li a, .service-menu li a { color: #fff; display: inline-block; font-size: 15px; font-weight: 400; }
.footer-navigation li a:hover, .service-menu li a:hover { color: var(--text-secondary); }
.footer-navigation a:hover, .footer-navigation .current_page_item a, .footer-navigation .current-menu-item a {}

/* Footer Sub Menu */
.footer-navigation li.menu-item-has-children .sub-menu a:after {display: none;}
.footer-navigation ul.menu-footer > li:not(:last-of-type) { margin-bottom: 15px; }
.footer-navigation ul li.menu-item-has-children:hover ul.sub-menu {top: 100%; opacity: 1;width: fit-content; z-index: 10;}
.footer-navigation ul ul.sub-menu {background: var(--bg-secondary); opacity: 0; text-align: left; top: 50%; display: block; transition: all ease 0.5s; border-top-left-radius: 25px; border-bottom-right-radius: 25px; overflow: hidden; z-index: -1; position: absolute; }
/* .footer-navigation ul ul li.menu-item-has-children:hover ul {top: 50%!important; opacity: 1!important; z-index: 1!important;} */
.footer-navigation ul ul ul { left: 100%; top: -100%!important; transition: all ease-in-out 0.5s; opacity: 0!important; z-index: -1!important;}
.footer-navigation .sub-menu li {display: block; text-align: left; margin-right: 0; margin-left: 0;}
.footer-navigation .sub-menu a {color: var(--text-primary); width: 400px; padding: 10px 15px!important; font-size: 16px;}
/* .footer-navigation .sub-menu a:hover, .footer-navigation .sub-menu .current-menu-item > a, .footer-navigation .sub-menu .current-menu-ancestor > a {color: #000; background: rgba(255,255,255,0.7)!important;} */
.footer-navigation .sub-menu a:hover, .footer-navigation .sub-menu .current-menu-item > a, .footer-navigation .sub-menu .current-menu-ancestor > a { color: #fff; background: var(--text-secondary) !important; }
.footer-navigation ul li.menu-item-has-children .sub-menu li { padding: 0; }
.footer-navigation ul li.menu-item-has-children .sub-menu li a::before { display: none; }

/*Social Menu*/
.social-navigation ul {margin-bottom: 0;}
.social-navigation li {margin: 0 10px;}
.social-navigation li.sm-loc a:before {content: "\f041";}
.social-navigation li:first-of-type {margin-left: 0px;}
.social-navigation li:last-of-type {margin-right: 0px;}
.social-navigation a {font-size: 13px; color: #fff; display: inline-block; height: auto!important; width: auto!important;}
.social-navigation a:before {width: 30px!important; height: 30px!important; line-height: 30px!important; background: #eee; border-radius: 50%; transition: all ease 0.5s;}
.social-navigation a:hover:before {transform: rotate(360deg); border-radius: 0px; background: #ddd; box-shadow: 0 0 10px #333;}

/*###################################
## Header
###################################*/
#masthead .row { max-width: 1630px; }
.site-header { position: absolute; top: 10px; left: 0; right: 0; width: 100%; z-index: 10; }
.header-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.header-menu, .header-info { width: 44%; padding-top: 20px; }
.header-logo { width: 12%; }
.hdLogo { width: 100%; max-width: 195px; margin: 0 auto; }
.hdLogo img { width: 100%; object-fit: cover; object-position: center center; }
.header-info p { margin-bottom: 0; font-size: 18px; font-weight: 700; color: var(--text-accent); }
.header-info-inner { display: flex; justify-content: space-between; align-items: center; gap: 15px; width: 100%; max-width: 545px; margin-left: auto; }
.hdPhone .icon, .hdEmail .icon { color: var(--text-accent); font-size: 18px; }
.header-info .socials .icon { color: var(--text-accent); font-size: 30px; }
/* .site-header .custom-logo {width: 100%; max-width: 320px;} */

/*###################################
## Banner
###################################*/
#banner { position: relative; padding: 0; margin: 0; z-index: 1; }
#banner .metaslider { padding-bottom: 0 !important; }
#banner .metaslider .caption-wrap { opacity: unset; color: var(--text-accent); background: unset !important; position: absolute; left: 0; right: 0; bottom: 150px; z-index: 10; }
#banner .metaslider .caption { width: 100%; max-width: 970px; margin: 0 auto; padding: 0 15px; }
#banner .metaslider .flexslider::before, .inner #banner::before, .banner-slider-container::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 3; }
#banner .metaslider .flexslider .slides li { z-index: unset !important; }
#banner .metaslider .slides img { height: 100vh; object-fit: cover; object-position: center center; }
#banner .metaslider .flexslider .slides p { color: var(--text-accent); margin-bottom: 30px; }
#banner .metaslider .flexslider .slides p:not(:has(> a)) { width: 100%; max-width: 640px; margin: 0 auto 30px; }
#banner .metaslider .flexslider .slides p:last-of-type { margin-bottom: 0; }
/* .banner-slider-container img { width: 100%; height: 100vh; } */
.banner-slider-container div#n2-ss-2 .n2-ss-slider-1 { height: 100vh; }
.inner #banner img { width: 100%; height: 450px; object-fit: cover; object-position: center center; }
/* If the page has custom banner text contents */
.banner-text { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 10; }
.banner-text .banner-socials { width: 100%; max-width: 200px; margin: 0 auto; padding-top: 30px; } 
.inner .banner-text { transform: translateY(-50%); bottom: unset; top: 65%; }
.banner-text-inner { width: 100%; max-width: 970px; margin: 0 auto; text-align: center; }
.banner-text-inner, .banner-text-inner p { color: var(--text-accent); }

/*###################################
## Content
###################################*/
.site-content {  }
.inner .site-content { background: var(--bg-secondary) url('https://staging8.dynaserverx.com/arezlandscapingllc.com/wp-content/uploads/2025/11/leaves-1.png') bottom right no-repeat; background-size: auto auto; }

/*###################################
## Welcome
###################################*/
#welcome { padding-top: 160px; background-repeat: no-repeat !important; background-position: 100% 480px; border-bottom-right-radius: 50px; }
.welcome-text-inner { gap: 30px; padding-bottom: 100px; }
.welcome-text-inner .title-section h2 { margin-bottom: 0; }
.welcome-text-inner .content-section { padding-top: 60px; }
.welcome-text-inner .content-section p:not(:last-of-type) { margin-bottom: 40px; }
.welcome-image-inner { gap: 150px; margin-bottom: -570px; }
.welcome-image-inner img { border-top-left-radius: 50px; border-bottom-right-radius: 50px; }
.welcome-image-sm { padding-top: 100px; }

/*###################################
## Service
###################################*/
#service { padding: 710px 0 225px; }
.service-inner { gap: 150px; }
.service-list { flex-wrap: wrap !important; gap: 20px; }
.service-list > div { flex: 1 1 calc(25% - 20px); }
.service-thumbnail .sow-image-container { background: #FFFFFF; padding: 44px 5px; border-top-left-radius: 17px; border-bottom-right-radius: 17px; }
.service-thumbnail .sow-image-container img { transition: all ease-in 0.3s; }
.service-thumbnail .sow-image-container img:hover { transform: scale(1.2); }
.service-list h2 { font-size: 18px; margin: 10px 0 20px !important; font-weight: 700; line-height: 1.2; }
.service-list h2:hover { color: var(--text-secondary); }

/*###################################
## Portfolio
###################################*/
#portfolio { margin: 0; padding-bottom: 900px; position: relative; }
#portfolio::after { content: ""; position: absolute; bottom: 85%; left: 0; right: 0; background: url('https://staging8.dynaserverx.com/arezlandscapingllc.com/wp-content/uploads/2025/11/leaves-1.png') no-repeat center center; background-size: 100% 100%; width: 743px; height: 541px; margin: 0 auto; z-index: -1; }
#portfolio .row { max-width: 1850px; }
.portfolio-inner { border-bottom-right-radius: 30px; border-top-left-radius: 30px; position: relative; z-index: 1; }
.portfolio-inner::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,158,78,0.7); z-index: -1; border-bottom-right-radius: 30px; border-top-left-radius: 30px; }
.portfolio-text { padding: 170px 0; width: 100%; max-width: 600px; margin: 0 auto; text-align: center; }
.portfolio-text, .portfolio-text p, .portfolio-text h3 { color: var(--text-accent); }
.portfolio-text h2 { font-size: 80px; }
.portfolio-text p:last-of-type { margin-bottom: 0; }
.portfolio-image-inner { width: 100%; max-width: 1366px; margin: 0 auto; gap: 30px; margin-bottom: -750px; }
.portfolio-image-inner .img-sm > div:first-of-type { padding-bottom: 30px; }
.portfolio-image-inner .img-sm > div:last-of-type { padding-bottom: 0; }
.portfolio-image img { border-top-left-radius: 15px; border-bottom-right-radius: 15px; }

/*###################################
## Contact Us
###################################*/
#contact-us { padding: 200px 0; background-repeat: no-repeat !important; background-position: 0 90%; }
.contact-us-inner { position: relative; }
.contact-us-inner .text-section { width: 100%; max-width: 445px; }
.contact-us-inner .text-section h2 { margin-bottom: 0; }
.contact-us-inner .text-section.ml-c { margin: 0 auto; }
.contact-us-inner .text-section.ml-a { margin: 60px 0 0 auto; }
.contact-us-inner .text-section.ml-a p:not(:has(> a)) { margin-bottom: 60px; }
/* .cu-image { position: relative; } */
.cu-image img { border-top-right-radius: 50px; border-bottom-left-radius: 50px; }
.cu-image.float-image { position: absolute; bottom: 0; left: 0; width: 60%; z-index: 1; }
.cu-image.has-logo::before { content: ""; position: absolute; bottom: 85%; right: 65px; background: url('https://staging8.dynaserverx.com/arezlandscapingllc.com/wp-content/uploads/2025/11/arez-text-lg.png') no-repeat center center; background-size: 100% 100%; width: 628px; height: 250px; }

/*###################################
## Footer
###################################*/
/* .site-footer {background: #9A9A9A; padding: 20px 0;}
.ftCopy {text-align: center;}
.ftCopy p, .ftCopy a {margin-bottom: 0; color: #000; font-size: 14px;}
.ftCopy .silver img {display: inline-block;vertical-align: middle;max-width: 50px} */
.site-footer { background: var(--bg-secondary); padding-bottom: 50px; } 
.site-footer .row { max-width: 1850px; }
.site-footer-inner { width: 100%; background: var(--bg-primary-dark); border-top-left-radius: 50px; border-bottom-right-radius: 50px; padding: 0 15px; }
.footer-inner { display: flex; justify-content: space-between; align-items: stretch; padding: 100px 0; width: 100%; max-width: 1630px; margin: 0 auto; gap: 15px; }
/* .ftNav, .ftService, .ftContact { width: 100%; } */
/* .footer-inner > div { flex-grow: 1; padding-left: 60px; padding-right: 60px; }
.footer-inner > div:first-of-type { padding-left: 0; }
.footer-inner > div:last-of-type { padding-right: 0; } */
.footer-inner > div:not(:last-of-type) { border-right: 1px solid #444444; }
.ftNav { width: 10%;; }
.ftService { width: 47%; }
.ftService .wrapper { width: 100%; max-width: 610px; margin: 0 auto; }
.ftContact { width: 18%; }
.ftContact .wrapper { width: 100%; max-width: 185px; margin: 0 auto; }
.ftContact p { margin-bottom: 15px; font-size: 15px; color: var(--text-accent); }
.ftContact a:hover { color: var(--text-secondary); }
.ftContact p:last-of-type { margin-bottom: 0; }
.ftContact p.socials { font-size: 30px; padding-top: 15px; }
.ftContact .icon { color: var(--text-secondary); }
.footer-logo { width: 25%; }
.ftLogo { width: 100%; max-width: 300px; margin-left: auto; }
.ftLogo img { width: 100%; object-fit: cover; object-position: center center; }
.ftCopy { width: 100%; max-width: 1630px; padding: 40px 0; margin: 0 auto; border-top: 1px solid #444444; }
.ftCopy p { margin-bottom: 0; font-size: 15px; font-weight: 400; color: var(--text-accent); }

/*###################################
## Sidebar
###################################*/
#primary.sideMain {float:left; width: 70%;}
#secondary {float:right; width: 30%; padding: 20px; box-sizing: border-box; border: 1px solid #535353; box-sizing: border-box;}
.search-form {display: flex;}
.search-form .search-submit {width: 100%; max-width: 85px;}

/*###################################
## Inner Pages
###################################*/
.inner #content { text-align: left; min-height: 600px; padding: 40px 0;}
.inner #content h1 {text-align: center;}
.page-section-inner { gap: 100px; }
.page-section-inner .text-section { padding-bottom: 30px; }
.page-section-inner .video-section { position: relative; width: 100%; max-width: 350px; margin: 0 auto; }
.page-section-inner .video-section video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.page-section-inner .image-section { width: 100%; max-width: 700px; margin: 0 auto; }
/* .page-section-inner .image-section img { width: 100%; } */

/* contact form */
.inner .contact-form .wpcf7-form > p:nth-of-type(1) { display: flex !important; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.inner .contact-form .wpcf7-form > p:nth-of-type(1) label { flex: 1 1 calc(50% - 8px); }

/* contact */
.inConBox {max-width: 550px; margin: 0 auto;}

/* error404 */
.inner #content .error-404 h1 {font-size: 35px;}
.inner #content .error-404 h2 {font-size: 70px;}
.error-404 .search-form {margin: 0 auto 20px;}
.error-404 {text-align: center;}

/*###################################
## Responsive
###################################*/
@media screen and (max-width: 1200px){

  /* h tags */
  h1 { font-size: 60px; }
  h2 { font-size: 40px; }
  h3 { font-size: 25px; }
  .service-list h2 { font-size: 16px; }

  /* p tags */
  p { font-size: 16px; }

  /* Header */
  .header-inner { flex-wrap: wrap; gap: 15px; }
  .header-logo { order: -1; width: 100%; }
  .header-menu, .header-info { padding-top: 0; }
  .header-info-inner { max-width: 400px; }
  .main-navigation a, .header-info p, .hdPhone .icon, .hdEmail .icon { font-size: 16px; }

  /* banner */
  #banner .metaslider .caption-wrap { bottom: 50px; }

  /* welcome */
  .welcome-image-inner { gap: 50px; width: 100%; max-width: 800px; margin: 0 auto -200px; }
  .welcome-image-sm { padding-top: 50px; }

  /* service */
  #service { padding: 350px 0 225px; }
  .service-inner { gap: 50px; }

  /* portfolio */
  #portfolio { padding-bottom: 750px; }
  #portfolio::after { width: 563px; height: 361px; }
  .portfolio-text { padding: 100px 0; }
  .portfolio-text h2 { font-size: 60px; }

  /* contact us */
  #contact-us { padding: 100px 0; }
  .cu-image.has-logo::before { width: 450px; height: 179px; }

  /* footer */
  .site-footer { padding-bottom: 15px; }
  .footer-inner { flex-wrap: wrap; padding: 50px 0; }
  .footer-logo { order: -1; width: 100%; }
  .ftLogo { margin: 0 auto; max-width: 250px; }
  .ftContact { border-right: none !important; }
  .ftNav { width: calc(15% - 15px); }
  .ftService { width: calc(60% - 15px); }
  .ftContact { width: calc(25% - 15px); }

}

@media screen and (max-width: 1024px){

  /* header */
  .header-inner { flex-direction: column; justify-content: center; align-items: center; }
  .header-menu { order: 1; width: 100%; max-width: 600px; }
  .header-info { width: 100%; }
  .header-info-inner { margin: 0 auto; width: 100%; max-width: 450px; }
  .main-navigation { max-width: 100%; }

  /* welcome */
  #welcome { padding-top: 100px; }
  .welcome-text-inner { flex-direction: column; text-align: center; }
  .welcome-text-inner > div { width: 100% !important; }
  .welcome-text-inner .content-section { padding-top: 0; }

  /* service */
  .service-inner { flex-direction: column; text-align: center; }
  .service-inner > div { width: 100% !important; }

  /* portfolio */
  .portfolio-text { padding: 100px 15px; max-width: 100%; }
  .portfolio-image-inner { gap: 15px; }
  .portfolio-image-inner .img-sm > div:first-of-type { padding-bottom: 15px; }

  /* contact us */
  .cu-image.has-logo::before { width: 250px; height: 99px; left: 0; right: 0; margin: 0 auto; }
  .cu-image.float-image { width: 50%; }

  /* footer */
  .footer-inner { flex-direction: column; justify-content: center; align-items: center; gap: 30px; text-align: center; }
  .footer-inner > div { border: none !important; }
  .footer-logo { padding-bottom: 50px; }
  .ftService, .ftService .wrapper { width: 100%; max-width: 100%; }
  .service-menu { gap: 10px; }
  .ftContact .icon { display: block; margin-bottom: 10px; }
  .ftCopy { text-align: center; }

}

@media screen and (max-width: 800px){

  /* button */
  .btn { width: 200px; padding: 20px 5px; }

  /* h tags */
  h1 { font-size: 50px; }
  h2 { font-size: 35px; }

  /* header */
  #wprmenu_bar { padding: 0 15px !important; display: flex; justify-content: space-between; align-items: center; width: 100% !important; }
  #wprmenu_bar div.hamburger { margin: 0 !important; padding: 0 !important; }
  #wprmenu_bar .menu_title { top: 0 !important; order: -1; }
  #wprmenu_bar .bar_logo { height: 120px !important; }
  #mg-wprm-wrap li.menu-item a { font-size: 18px; font-family: var(--font-primary); font-weight: 700; letter-spacing: 2px;; }
  .site-header { display: none; }

  /* banner */
  #banner .metaslider .slides img { height: 600px; }

  /* welcome */
  .welcome-image-inner { flex-direction: column; }
  .welcome-image-inner img { border-radius: unset; }

  /* service */
  .service-list { justify-content: center !important; }
  .service-list > div { flex: 0 1 calc(33.33% - 20px); }
  .service-menu { flex-direction: column; justify-content: center; align-items: center; }

  /* portfolio */
  #portfolio::after { bottom: 100%; width: 463px; height: 261px; }
  .portfolio-image-inner { flex-direction: column; }
  .portfolio-image-inner > div { width: 100% !important; }
  .portfolio-image img { border-radius: unset; }
  
  /* contact us */
  .contact-us-inner { flex-direction: column; text-align: center; justify-content: center; align-items: center; gap: 50px; }
  .contact-us-inner > div, .contact-us-inner .text-section { width: 100% !important; max-width: 100%; }
  .contact-us-inner .text-section { padding-bottom: 50px; }
  .contact-us-inner .text-section.ml-a { padding-bottom: 0 !important; }
  .cu-image.float-image { position: static; width: 100%; }
  .cu-image { width: 100%; max-width: 500px; margin: 0 auto; }
  .cu-image > div > div { justify-content: center; align-items: center; }
  .cu-image img { border-radius: unset; }
  .cu-image.has-logo::before { display: none; }

  /* footer */
  .ftLogo { max-width: 200px; }
  .ftNav, .ftContact { width: 100%; }

  .inner .contact-form .wpcf7-form > p:nth-of-type(1) label { flex: 1 1 100%; }

}

@media screen and (max-width: 570px){

  /* service */
  .service-list > div { flex: 1 1 100%; }

  /* portfolio */
  #portfolio::after { width: 263px; height: 191px; }

}