@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #35424a;
  --secondary-color: #e8491d;
  --background-color: #f9f9f9;
  --font-color: #333;
  --heading-color: #fff;
  --border-radius: 4px;
  --container-width: 90%;
  --border-radius: 8px;
  --icon-size: 4rem;
}

/* 图片和媒体 */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 链接 */
a {
  text-decoration: none;
  color: var(--secondary-color);
}

/* 列表 */
ul, ol {
  list-style: none;
}

/* 表单元素 */
button, input, textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

p {
  color: var(--font-color);
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
}

form div:not(:last-child) {
  margin-bottom: 1rem;
}
form label, form input, form textarea, form button {
  display: block;
  width: 100%;
}
form label {
  margin-bottom: 0.5rem;
}
form input, form textarea {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 5px 10px;
}
form input:focus, form input:hover, form textarea:focus, form textarea:hover {
  border-color: var(--secondary-color);
}

#header {
  background: var(--primary-color);
  position: relative;
  border-bottom: 5px solid var(--secondary-color);
}
#header nav.navbar {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header nav.navbar a.nav-logo {
  color: var(--heading-color);
}
#header nav.navbar a.nav-logo h1 {
  font-size: 2rem;
  letter-spacing: 5px;
}
#header nav.navbar a.nav-logo p {
  color: var(--heading-color);
}
#header nav.navbar ul.nav-menu {
  position: absolute;
  width: 0%;
  right: 0;
  overflow: hidden;
  top: 100%;
  background: var(--secondary-color);
  transition: all 0.3s ease-out;
  z-index: 100;
}
#header nav.navbar ul.nav-menu.active {
  width: 100%;
}
#header nav.navbar ul.nav-menu li.nav-item {
  width: var(--container-width);
  margin: 0 auto;
}
#header nav.navbar ul.nav-menu li.nav-item a.nav-link {
  padding: 10px;
  color: #fff;
  display: block;
  transition: all 300;
}
#header nav.navbar ul.nav-menu li.nav-item:not(:last-child) a {
  border-bottom: 1px solid var(--primary-color);
}
#header nav.navbar .hamburger .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
}
#header nav.navbar .hamburger.active .bar, #header nav.navbar .hamburger:hover .bar {
  background-color: var(--secondary-color);
}
@media (min-width: 1024px) {
  #header nav.navbar {
    padding-top: unset;
    padding: 10px 0;
  }
  #header nav.navbar .hamburger {
    display: none;
  }
  #header nav.navbar a.nav-logo p {
    margin-bottom: unset;
  }
  #header nav.navbar ul.nav-menu {
    position: static;
    background: unset;
    width: auto;
    z-index: unset;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  #header nav.navbar ul.nav-menu li.nav-item {
    width: unset;
  }
  #header nav.navbar ul.nav-menu li.nav-item:not(:last-child) a {
    border-bottom: unset;
  }
  #header nav.navbar ul.nav-menu li.nav-item a.nav-link {
    border: 1px solid transparent;
  }
  #header nav.navbar ul.nav-menu li.nav-item a.nav-link:hover, #header nav.navbar ul.nav-menu li.nav-item a.nav-link.active {
    border: 1px solid var(--secondary-color);
  }
}

.button {
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  padding: 10px 5px;
  line-height: 1;
  border-radius: 4px;
  transition: all 1s ease-out;
}
.button:hover {
  background: unset;
  color: var(--secondary-color);
}

main #service .service-grid .service-card, main #why div.why-grid div.why-card {
  padding: 20px;
  background: var(--background-color);
  border-radius: var(--border-radius);
}
main #service .service-grid .service-card .icon, main #why div.why-grid div.why-card .icon {
  margin-bottom: 2rem;
}
main #service .service-grid .service-card .icon i, main #why div.why-grid div.why-card .icon i {
  font-size: var(--icon-size);
  color: var(--primary-color);
}
main #service .service-grid .service-card h3, main #why div.why-grid div.why-card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

/* HTML 和 Body */
html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

main section, footer section {
  padding: 3rem 0;
}
main section:not(:last-child), footer section:not(:last-child) {
  margin-bottom: 3rem;
}
main section h2, footer section h2 {
  color: var(--primary-color);
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
main section p, footer section p {
  line-height: 1.8;
}
@media (min-width: 1024px) {
  main section h2, footer section h2 {
    text-align: left;
  }
}

main #hero {
  padding: unset;
  position: relative;
}
main #hero .container {
  width: 100%;
}
main #hero div.hero-content {
  margin: 0 auto;
}
main #hero div.hero-content div.hero-image {
  width: 100%;
}
main #hero div.hero-content div.hero-text {
  z-index: 10;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 90%;
  right: 5%;
}
main #hero div.hero-content div.hero-text h1 {
  font-size: 3rem;
  font-weight: bolder;
  letter-spacing: 5px;
}
main #hero div.hero-content div.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  color: white;
}
@media (min-width: 1024px) {
  main #hero {
    background: var(--primary-color);
  }
  main #hero .container {
    width: 90%;
  }
  main #hero div.hero-content {
    display: flex;
    gap: 1rem;
  }
  main #hero div.hero-content div.hero-text {
    z-index: unset;
    position: static;
    transform: unset;
    align-self: center;
  }
}
main #service .service-grid .service-card:not(:last-child) {
  margin-bottom: 1.5rem;
}
main #service .service-grid .service-card .icon, main #service .service-grid .service-card h3 {
  text-align: center;
}
@media (min-width: 768px) {
  main #service .service-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: max-content;
  }
  main #service .service-grid .service-card:not(:last-child) {
    margin-bottom: unset;
  }
}
main #about {
  position: relative;
  background: var(--background-color);
}
main #about .about-image img {
  width: 100%;
}
@media (min-width: 768px) {
  main #about div.about-content {
    display: flex;
    gap: 1rem;
  }
  main #about div.about-content div.about-text, main #about div.about-content div.about-image {
    flex: 1 1 50%;
  }
}
main #why div.why-grid div.why-card {
  display: flex;
  gap: 10px;
}
main #why div.why-grid div.why-card:not(:last-child) {
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  main #why div.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  main #why div.why-grid div.why-card:not(:last-child) {
    margin-bottom: unset;
  }
}
main #call {
  background: var(--primary-color);
  color: #fff;
}
main #call h2 {
  color: #fff;
}

footer .info ul li {
  display: flex;
  align-items: center;
}
footer .info ul li i {
  flex: 0 0 2rem;
}

/*# sourceMappingURL=style.css.map */