/* ## Fonts
--------------------------------------------- */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Light.eot");
  src:
    url("../fonts/Roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Roboto/Roboto-Light.woff2") format("woff2"),
    url("../fonts/Roboto/Roboto-Light.woff") format("woff"),
    url("../fonts/Roboto/Roboto-Light.svg#Roboto-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Regular.eot");
  src:
    url("../fonts/Roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Roboto/Roboto-Regular.woff2") format("woff2"),
    url("../fonts/Roboto/Roboto-Regular.woff") format("woff"),
    url("../fonts/Roboto/Roboto-Regular.svg#Roboto-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Bold.eot");
  src:
    url("../fonts/Roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Roboto/Roboto-Bold.woff2") format("woff2"),
    url("../fonts/Roboto/Roboto-Bold.woff") format("woff"),
    url("../fonts/Roboto/Roboto-Bold.svg#Roboto-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald/Oswald-Bold.eot");
  src:
    url("../fonts/Oswald/Oswald-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Oswald/Oswald-Bold.woff2") format("woff2"),
    url("../fonts/Oswald/Oswald-Bold.woff") format("woff"),
    url("../fonts/Oswald/Oswald-Bold.svg#Oswald-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

/* ## Global
--------------------------------------------- */
:root {
  --base-font-family: "Roboto", sans-serif;
  --heading-font-family: "Oswald", sans-serif;

  --white: #fff;
  --light: #f3f3f3;

  --dark: #000000;
  --black: #383838;

  --yellow: #fec218;
  --light-yellow: #fdd048;

  --red: #ec2d33;
  --light-red: #f2565c;

  --blue: #498cf3;

  --h1-font-size: 36px;
  --h1-line-height: 1.2;

  --h2-font-size: 35px;
  --h2-line-height: 1.3;

  --h3-font-size: 23px;
  --h3-line-height: 1.6;

  --base-font-size: 18px;
  --base-line-height: 1.6;
  --base-font-weight: 300;

  /* --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 1024px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px; */
}

body,
body > div {
  font-size: var(--base-font-size);
}

body {
  background-color: var(--light);
  color: var(--black);
  font-family: var(--base-font-family);
  font-weight: var(--base-font-weight);
  line-height: var(--base-line-height);
  margin: 0;
}

section {
  padding: 80px 0;
}

.container {
  --bs-gutter-x: 30px;
}

.row {
  --bs-gutter-x: 32px;
  --bs-gutter-y: 32px;
}

p {
  margin: 0 0 20px;
  padding: 0;
}

p:last-of-type {
  margin-bottom: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black);
  font-family: var(--heading-font-family);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
}

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
}

a {
  text-decoration: none;
  color: var(--blue);
}

a:hover,
a:focus {
  color: var(--blue);
  transition: ease-in-out 0.15s;
}

.btn {
  color: var(--black);
  font-family: var(--heading-font-family);
  font-size: 20px;
  line-height: 1.6;
  padding: 16px 28px;
}

/* ## Container max-widths
--------------------------------------------- */

/* @media only screen and (min-width: 576px) {
    .container {
        max-width: var(--bs-breakpoint-sm);
    }
}

@media only screen and (min-width: 768px) {
    .container {
        max-width: var(--bs-breakpoint-md);
    }
}

@media only screen and (min-width: 1024px) {
    .container {
        max-width: var(--bs-breakpoint-lg);
    }

    .navbar .navbar-collapse {
        display: flex;
        flex-basis: auto;
    }

    .navbar .navbar-nav {
        display: flex;
        flex-direction: row;
    }

    .navbar .navbar-nav:last-child {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: var(--bs-breakpoint-xl);
    }
}
@media only screen and (min-width: 1400px) {
    .container {
        max-width: var(--bs-breakpoint-xxl);
    }
} */

/* ## Header/Navbar
--------------------------------------------- */
.header {
  background: var(--light);
  padding: 14px 0;
  z-index: 999;
}

.header .nav-link,
.header .dropdown-item {
  font-family: var(--heading-font-family);
  font-size: 20px;
  color: var(--black);
  letter-spacing: 1px;
  transition: ease-in-out 0.15s;
}

.header .dropdown-toggle::after {
  color: #676c71;
  transition: ease-in-out 0.15s;
}

.header .dropdown-item,
.header .nav-email {
  background: var(--white);
}

.header .nav-link.active,
.header .nav-link.active::after,
.header .nav-link.show,
.header .nav-link.show::after {
  color: var(--yellow);
}

.header .nav-link:not(.nav-email):hover,
.header .nav-link:not(.nav-email):focus,
.header .nav-link:hover::after,
.header .nav-link:focus::after {
  color: var(--yellow);
}

.header .nav-email:hover,
.header .nav-email:focus,
.header .nav-email.active,
.header .dropdown-item:hover,
.header .dropdown-item:focus,
.header .dropdown-item.active {
  background: var(--yellow);
}

.header .email {
  font-family: var(--base-font-family);
  font-size: 16px;
}

/* ## Get A Quote Modal
--------------------------------------------- */
.modal .modal-dialog {
  max-width: 788px;
}

.modal .modal-header {
  padding: 40px 60px 0px;
}

.modal .btn-close {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.061 2.06097L21.939 -0.0610352L12 9.87896L2.06097 -0.0610352L-0.0610352 2.06097L9.87896 12L-0.0610352 21.939L2.06097 24.061L12 14.121L21.939 24.061L24.061 21.939L14.121 12L24.061 2.06097Z' fill='white'/%3E%3C/svg%3E")
    no-repeat center;
}

.modal .modal-body {
  padding: 30px 60px 70px;
}

.modal .modal-title {
  font-size: 44px;
}

.modal form {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  margin-top: 30px;
}

.modal .form-control,
.modal .form-select {
  font-size: 18px;
}

.modal .form-control,
.modal .form-select,
.modal label {
  padding: 14px 16px;
}

.modal label {
  color: #7e7e7e;
}

.modal .form-control:not(:placeholder-shown),
.modal .form-select:valid {
  padding: 24px 16px 10px;
}

.modal .form-control:focus ~ label,
.modal .form-control:not(:placeholder-shown) ~ label,
.modal .form-select:valid ~ label {
  font-size: 12px;
}

.modal .form-select:not(:placeholder-shown) {
  padding: 26px 16px 10px;
}

.modal .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg%20width%3D%2716%27%20height%3D%2710%27%20viewBox%3D%270%200%2016%2010%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M15.7443%200.78986L15.2202%200.262116C15.0552%200.0973018%2014.8358%200.00650427%2014.6012%200.00650427C14.3668%200.00650427%2014.1471%200.0973018%2013.9822%200.262116L8.00358%206.24096L2.0181%200.255482C1.85341%200.0906675%201.6337%200%201.3993%200C1.16489%200%200.945048%200.0906675%200.780234%200.255482L0.256002%200.779974C-0.085334%201.12105%20-0.085334%201.67663%200.256002%202.01771L7.38243%209.16976C7.54712%209.33445%207.76657%209.45048%208.00306%209.45048H8.00579C8.24033%209.45048%208.45978%209.33432%208.62446%209.16976L15.7443%202.03709C15.9092%201.87241%2015.9997%201.64632%2016%201.41191C16%201.17738%2015.9092%200.954414%2015.7443%200.78986Z%27%20fill%3D%27%23202021%27/%3E%3C/svg%3E");
  background-position: right 16px center;
}

.modal .form-select ~ label {
  transform: none;
}

.modal .form-select:valid ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.modal .btn {
  color: #383838;
  background: var(--yellow);
  padding: 16px;
}

.modal .btn:hover {
  background: #fecb3b;
}

/* ## Footer
--------------------------------------------- */
.footer {
  padding: 40px 0;
}

footer h2 {
  font-family: var(--base-font-family);
  font-size: 18px;
  line-height: 1.6;
}

.footer a {
  color: var(--white);
}

.footer a:hover,
.footer a:focus {
  color: var(--yellow);
}

.footer .footer-date {
  max-width: 165px;
}

/* ## Copyright
--------------------------------------------- */

.copyright {
  background: #111111;
  padding: 10px 0;
}

.copyright a,
.copyright p,
.copyright span {
  color: #686868;
  font-size: 16px;
}

/* ## Mobile Responsiveness
--------------------------------------------- */
@media only screen and (min-width: 992px) {
  .header .navbar-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 100px;
    height: 5px;
    margin-left: 16px;
    background: var(--yellow);
  }
}

@media only screen and (max-width: 992px) {
  body,
  body > div,
  footer h2 {
    font-size: 17px;
  }

  section {
    padding: 60px 0;
  }

  .row {
    --bs-gutter-y: 27px;
  }

  h1 {
    font-size: 33px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 21px;
  }

  .btn {
    font-size: 19px;
    padding: 13px 24px;
  }

  .footer {
    padding: 35px 0;
  }

  .header .nav-link,
  .header .dropdown-item {
    font-size: 19px;
  }

  .header .navbar-collapse {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    max-height: calc(100vh - 160%);
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
  }

  .modal .modal-header {
    padding: 35px 50px 0px;
  }

  .modal .modal-body {
    padding: 25px 50px 60px;
  }

  .modal .modal-title {
    font-size: 40px;
  }

  .modal form {
    --bs-gutter-x: 25px;
    --bs-gutter-y: 25px;
    margin-top: 25px;
  }

  .modal .form-control,
  .modal .form-select {
    font-size: 17px;
  }
}

@media only screen and (max-width: 768px) {
  body,
  body > div,
  footer h2 {
    font-size: 16px;
  }

  section {
    padding: 40px 0;
  }

  .row {
    --bs-gutter-y: 22px;
  }

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 19px;
  }

  .btn {
    font-size: 18px;
    padding: 10px 20px;
  }

  .footer {
    padding: 30px 0;
  }

  .header .nav-link,
  .header .dropdown-item {
    font-size: 18px;
  }

  .modal .modal-header {
    padding: 30px 40px 0px;
  }

  .modal .modal-body {
    padding: 20px 40px 50px;
  }

  .modal .modal-title {
    font-size: 34px;
  }

  .modal form {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
    margin-top: 20px;
  }

  .modal .form-control,
  .modal .form-select {
    font-size: 16px;
  }
}