:root {
  --main-font: "Lexend";

  --height-header: 71px;
  --height-navbar: 42px;
  --find-a-locksmith-header-height: 91px;

  --main-page-introduction-img: url(/MainPage/introduction.webp);

  --BlueArrowIcon: url(/Icons/BlueArrow.svg);
  --BlueArrowLeftIcon: url(/Icons/BlueArrowLeft.svg);
  --WhiteArrowLikeTriangleIcon: url(/Icons/WhiteArrowLikeTriangle.svg);
  --BulbIcon: url(/Icons/bulb.svg);
  --CheckIcon: url(/Icons/checkIcon.svg);
  --DotLightBlueIcon: url(/Icons/dotLightBlue.svg);
  --DropDownLightBlueIcon: url(/Icons/dropDownIconLightBlue.svg);
  --GoogleMapsPinIcon: url(/Icons/GoogleMapsPin.svg);
  --ListMarkIcon: url(/Icons/listMark.svg);
  --LogoIcon: url(/Icons/logo.svg);
  --LogoShieldIcon: url(/Icons/logoShield.svg);
  --MagnifyingGlassIcon: url(/Icons/magnifyingGlass.svg);
  --LongYellowArrowIcon: url(/Icons/longYellowArrow.svg);
  --Phone24Icon: url(/Icons/phone24.svg);
  --PhoneCallIcon: url(/Icons/phoneCall.svg);
  --PhoneCallYellowIcon: url(/Icons/phoneCallYellow.svg);
  --QuestionMarkIcon: url(/Icons/questionMark.svg);
  --RedPinIcon: url(/Icons/RedPin.svg);
  --LoadMoreIcon: url(/Icons/LoadMore.svg);
  --ExternalLinkIcon: url(/Icons/external-link.svg);
  --ListLightBlue: url(/Icons/ListLightBlue.svg);
  --GoogleTestimonialsIcon: url(/Icons/SocialsTestimonials/Active/Google.svg);
  --FacebookTestimonialsIcon: url(/Icons/SocialsTestimonials/Active/Facebook.svg);
  --YelpTestimonialsIcon: url(/Icons/SocialsTestimonials/Active/Yelp.svg);
  --GoogleDisabledIcon: url(/Icons/SocialsTestimonials/Disabled/GoogleDisabled.svg);
  --FacebookDisabledIcon: url(/Icons/SocialsTestimonials/Disabled/FacebookDisabled.svg);
  --YelpDisabledIcon: url(/Icons/SocialsTestimonials/Disabled/YelpDisabled.svg);
  --main-blue: #0876e0;
  --white: #ffffff;
  --light-grey: #f4f4f4;
  --header-underline: #f0cb3a;
  --grey: #e6e6e6;
  --description: #6a7478;
  --main-dark: #0c2935;
  --stroke: #d7def9;
  --light-blue: #dbeaf9;
  --bg: #f9faff;
  --dark-grey: #838383;
  --yellow: #f1bf3c;
  --dark-yellow: #ecb21d;
}

html {
  height: 100%;
}

body {
  --type-screen: desktop;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
}

main {
  /* margin-top: var(--height-header); */
  margin-bottom: var(--height-header);
}

* {
  box-sizing: border-box;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: 0 none;
  text-decoration: none;
  outline: 0;
  padding: 0;
  margin: 0;
}
b {
  font-weight: bold;
}

.headline-line {
  padding-bottom: 6px;
  background: linear-gradient(90deg, #f1bf3c, #f1bf3c) no-repeat center bottom /
    100px 2px;
}

.noscroll {
  overflow: hidden;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.headline-line.left {
  background-position: left bottom;
}

.headline-font {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 700;
  font-size: 60px;
  line-height: 140%;

  text-transform: capitalize;
}

.headline-font-two {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  line-height: 140%;

  text-transform: capitalize;
}

.headline-font-three {
  font-family: "Lexend";
  font-style: normal;
  font-size: 22px;
  line-height: 140%;
}

.headline-font-four {
  font-family: "Lexend";
  font-style: normal;
  font-size: 20px;
  line-height: 140%;
}

.button-font {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 500;
  font-size: 19px;
  line-height: 130%;
}

.small-text {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 140%;
}

.body-text-font {
  font-family: "Lexend";
  font-style: normal;
  font-weight: inherit;
  font-size: 18px;
  line-height: 150%;
}

.label-font {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
}

.button-font.bg-grey-yellow {
  background: #eacf68;
}

.image-frame {
  box-shadow: -30px -30px 0px -1px #ffffff, -30px -30px 0px 0px #d7def9;
  margin: 30px 0px 0px 30px;
}

.align-center {
  text-align: center;
}

.blue {
  color: #0876e0;
}

.white {
  color: #ffffff;
}

.black {
  color: #000000;
}

.body-text-font.regular.grey,
.grey {
  color: #6a7478;
}

.dark-blue {
  color: #0c2935;
}

.yellow-grey {
  color: #f2c94c;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.section-content {
  max-width: 1300px;
  margin: 0px auto;
}

.scroll-bar::-webkit-scrollbar {
  width: 4px;
}

.scroll-bar::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-bar::-webkit-scrollbar-thumb {
  background: #0876e0;
  border-radius: 10px;
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-135 {
  transform: rotate(135deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-225 {
  transform: rotate(225deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.rotate-315 {
  transform: rotate(315deg);
}

.rotate-360 {
  transform: rotate(360deg);
}

@media screen and (max-width: 1024px) {
  body {
    --height-navbar: 0px;
    --find-a-locksmith-header-height: 70px;
    --type-screen: mobile;
  }

  main {
    margin-bottom: 60px;
  }

  .headline-font {
    font-size: 32px;
    line-height: 130%;
  }

  .headline-font-two {
    font-size: 24px;
    line-height: 130%;
  }

  .headline-font-three {
    font-size: 20px;
    line-height: 130%;
  }

  .headline-font-four {
    font-size: 18px;
    line-height: 140%;
  }

  .body-text-font {
    font-size: 16px;
    line-height: 150%;
  }

  .image-frame {
    box-shadow: unset;
    margin: unset;
  }
}
.text-center {
  text-align: center;
}
.landing-builder {
  display: grid;
}
.landing-builder > div:has([data-partners]) {
  grid-row: 4;
}