@import url("https://fonts.cdnfonts.com/css/sf-pro-display");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.cdnfonts.com/css/satoshi");

@import url("layout/header.css");
@import url("layout/footer.css");
@import url("layout/slider.css");
@import url("layout/banner.css");
@import url("layout/accordion.css");
@import url("layout/appeal-form.css");

@import url("pages/homepage.css");
@import url("pages/about.css");
@import url("pages/customers.css");
@import url("pages/works.css");
@import url("pages/contact.css");
@import url("pages/services-detail.css");
@import url("pages/carrier.css");

:root {
  color-scheme: light;
  --color-lightgreen: #3dad8f;
  --color-darkgreen: #0c3c2f;
  --color-teal: #13604b;
  --color-pink: #fc9fe4;
  --color-darkblue: #020715;
  --color-darkgrey: #4a4a4a;
  --color-grey: #bbb;
  --color-white: #fff;
  --color-black: #000;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "SF Pro Display", sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--color-lightgreen);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-darkgreen);
}

.custom-container {
  padding: 0 4vw;
}

.custom-padding {
  padding: 0 9vw;
}

.submit-btn {
  width: 100%;
  height: 60px;
  border: 1px solid var(--color-lightgreen);
  background-image: -webkit-linear-gradient(30deg, var(--color-lightgreen) 50%, #fff 50%);
  background-image: linear-gradient(30deg, var(--color-lightgreen) 50%, #fff 50%);
  background-size: 2000px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: 500ms ease all;
  transition: 500ms ease all;
  color: #fff;
  text-align: center;
  font-family: SF Pro Display;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 25.2px */
}

.submit-btn:hover {
  background-position: 100%;
  color: var(--color-lightgreen);
}

.inspect-btn {
  display: flex;
  align-items: center;
  justify-content: end;
}

.other-blogs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspect-btn > a,
.other-blogs > a {
  width: 230px;
  height: 60px;
  border-radius: 90px;
  border: 1px solid var(--color-darkgreen);
  color: var(--color-darkgreen);
  font-family: SF Pro Display;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.4px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-decoration: none;
  transition: 0.3s ease all;
}

.inspect-btn > a:hover,
.other-blogs > a:hover {
  box-shadow: 0 0 10px 0 var(--color-darkgreen) inset, 0 0 20px 2px var(--color-darkgreen);
  background: var(--color-darkgreen);
  color: var(--color-white);
}

.inspect-btn > a:hover > svg > path,
.other-blogs > a:hover > svg > path {
  stroke: var(--color-white);
}

@media (max-width: 1600px) {
  .inspect-btn > a,
  .other-blogs > a {
    width: 200px;
    height: 55px;
    font-size: 18px;
  }
}

@media (max-width: 1200px) {
  .inspect-btn > a,
  .other-blogs > a {
    width: 160px;
    height: 50px;
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .inspect-btn > a,
  .other-blogs > a {
    width: 140px;
    height: 45px;
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .custom-padding {
    padding: 0 3vw;
  }
}

/* #layout-header-absolute,
#section-hero-top,
#section-hero-bottom,
#section-customers-slider,
#section-services,
#section-works-slider,
#section-blogs,
#section-prizes,
#section-end,
#layout-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
} */