@import url("//fonts.googleapis.com/css?family=Montserrat:400,400i,500,700");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
html {
  font-size: 62.5%;
}

body {
  font-family: "Montserrat", Verdana, Helvetica, Arial, sans-serif;
}

.aw-menu {
  border: none;
  background: transparent;
  margin-bottom: 0;
}

h1 {
  font-family: "Noto Sans SC", sans-serif;
}

h2 {
  font-family: "Noto Sans SC", sans-serif;
}

h3 {
  font-family: "Noto Sans SC", sans-serif;
}

h4 {
  font-family: "Noto Sans SC", sans-serif;
}

h5 {
  font-family: "Noto Sans SC", sans-serif;
}

h6 {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 18px;
}
h6::before {
  background-color: #101D23;
  content: ""; /* Necessary to create the pseudo-element */
  display: inline-flex; /* Makes the line appear on a new line */
  width: 23px; /* Full width of the container */
  height: 2px; /* Thickness of the line */
  background-color: #000; /* Color of the line (black in this case) */
  margin-bottom: 10px; /* Space between the line and the h2 */
}

h6.light {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 18px;
}
h6.light::before {
  background-color: #101D23;
  content: ""; /* Necessary to create the pseudo-element */
  display: inline-flex; /* Makes the line appear on a new line */
  width: 23px; /* Full width of the container */
  height: 2px; /* Thickness of the line */
  background-color: #fff; /* Color of the line (black in this case) */
  margin-bottom: 10px; /* Space between the line and the h2 */
}

.flex {
  display: flex;
}
@media (max-width: 668px) {
  .flex {
    flex-direction: column;
  }
}

p {
  font-family: "Noto Sans SC", sans-serif;
}

h2 span.big {
  font-size: 72px;
  font-weight: 900;
}

h2 span.small {
  font-weight: 100;
  font-size: 54px;
}

.cta {
  background-color: #FDBE3F;
  color: #101D23;
  font-size: 22px;
  display: inline-flex;
  padding: 8px 20px;
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 900;
}

.w-100 {
  width: 100%;
}

.full-width {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
}

.navbar-default .aw-logo {
  font-weight: 700;
  color: #2661F7;
}

.navbar-default .aw-logo:hover {
  color: #F6901E;
  transition: 1s all ease;
}

.border {
  border: 1px solid #dddddd;
}

.top-hero {
  background: #F1F6F8;
  display: flex;
  gap: 20px;
}
.top-hero .img-container {
  background-image: url(../sunshifu/images/worktop-renovation.jpg);
  background-position: center right;
  background-size: cover;
}
@media (max-width: 668px) {
  .top-hero .img-container {
    min-height: 220px;
  }
}
.top-hero .hero-content-center {
  justify-content: center;
}

.information-box {
  min-height: 560px;
  justify-content: space-between;
  flex-direction: column;
  display: flex;
  box-sizing: border-box;
  padding: 60px 0px;
}
.information-box h2 {
  line-height: 72px;
}
.information-box h2 span.yellow-title {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, #FDBE3F 50%);
  border-radius: 0px 0px 0px 0px;
}

.flex {
  display: flex;
}

.col-half {
  display: flex;
  flex: 1;
}

.hero-image {
  height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image .hero-image-intro p {
  padding-top: 1rem;
  font-size: 2.2rem;
  color: #9297a3;
}

.hero-image .hero-image-intro .down-arrow {
  animation-duration: 2s;
  padding-top: 2.5rem;
  font-size: 3rem;
}

.trusted-service {
  box-sizing: border-box;
  padding: 90px 0;
  color: #F1F6F8;
  gap: 40px;
  background-color: #101D23;
}
.trusted-service .container {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping of items onto the next line */
  gap: 20px; /* Optional: space between flex items */
}
.trusted-service .col-half {
  flex: 1; /* This allows each .col-half to take up 45% width */
  box-sizing: border-box;
}
.trusted-service .service-card {
  background-color: #1D2A30;
  padding: 50px 20px;
  margin: 10px;
  border-radius: 8px;
  width: 100%;
}
.trusted-service .service-card .service-icon {
  width: 60px;
  color: #FDBE3F;
}
.trusted-service .service-card h4 {
  margin-bottom: 40px;
}

.fe-list {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 24px;
  line-height: 1.35;
}

.featured-work {
  padding: 60px 0 30px 0;
}

.work {
  padding: 2rem 0;
}

.work h4 {
  color: #2661F7;
}

.work p {
  color: #9297a3;
}

.work-image {
  padding: 2rem 0;
}

.btn-main {
  padding: 1.2rem 4rem;
  background: #2661F7;
}

.sample-work {
  padding: 25px 0;
  background-color: #1D2A30;
}
.sample-work h2 {
  color: #F1F6F8;
}
.sample-work img {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.about-me {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: url("images/aurelien-about-dare-bk.jpg") no-repeat center center;
  min-height: 80rem;
}

.about-me .innertext {
  width: 60%;
}

.about-me .innertext p {
  color: #757677;
}

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