@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0; }

body {
  font-size: 16px;
  font-family: "Karla", sans-serif; }

h1,
h2,
h3,
h4,
h5 {
  font-family: "DM Serif Display", serif; }

header {
  font-family: "Karla", sans-serif; }
  header a {
    font-weight: 700; }

.header-view-plans {
  font-weight: 600;
  text-transform: uppercase;
  background: white;
  font-size: 16px;
  color: black;
  border: 2px solid black;
  padding: 7px 35px; }
  .header-view-plans:hover {
    background: black;
    color: white; }

main {
  background-color: #2d2640;
  color: white;
  height: 550px; }
  main h1 {
    font-size: 4rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1em; }
    main h1::before {
      content: "";
      display: block;
      width: 150px;
      height: 2px;
      margin-bottom: 50px;
      background: white; }

#main-hero {
  background-image: url("../images/bg-pattern-intro-right-desktop.svg");
  background-repeat: no-repeat;
  background-position: right; }

.main-view-plans {
  font-weight: 600;
  text-transform: uppercase;
  background: transparent;
  font-size: 16px;
  color: white;
  border: 2px solid white;
  padding: 10px 35px; }
  .main-view-plans:hover {
    background: white;
    color: black; }

.bg-different {
  margin: 300px 0 150px 0; }
  .bg-different::before {
    content: "";
    display: block;
    width: 150px;
    height: 2px;
    margin-bottom: 50px;
    background: #c9c9c9; }

.bg-dark-violet {
  background: #2d2640;
  padding: 50px 100px;
  color: white; }

#find {
  background-image: url("../images/bg-pattern-how-we-work-desktop.svg");
  background-repeat: no-repeat;
  background-position: right; }

.footer-insure a {
  color: #2b272f;
  font-weight: 600; }

.footer-tittle {
  color: #837d87 !important; }

.attribution a {
  color: #3e52a3; }

@media (max-width: 767px) {
  header.container {
    max-width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin: 0; }
  main {
    height: auto; }
    main h1 {
      font-size: 2.8em; }
      main h1::before {
        content: "";
        display: none; }
  #main-hero {
    background-image: url("../images/bg-pattern-intro-right-mobile.svg");
    background-repeat: no-repeat;
    background-position: top right; }
  .header-view-plans {
    background: #2b272f;
    color: white;
    border: 2px solid white;
    padding: 7px 50px; }
    .header-view-plans:hover {
      background: white;
      color: black; }
  .navbar-collapse .collapse .show {
    background-color: black; }
  .bg-different {
    margin: 150px 0; }
    .bg-different::before {
      content: "";
      display: none; }
  .show {
    background-color: #2b272f;
    width: 100%;
    height: 600px;
    padding-top: 50px;
    background-image: url(../images/bg-pattern-mobile-nav.svg);
    background-repeat: no-repeat;
    background-position: bottom right; }
    .show li {
      margin: 5px 0; }
  .navbar-light .navbar-nav .nav-link {
    color: white;
    letter-spacing: 0.1em; }
    .navbar-light .navbar-nav .nav-link:hover {
      color: #a5a5a5; }
  .bg-dark-violet {
    width: 400px;
    padding: 50px; }
  #find {
    background-image: url("../images/bg-pattern-how-we-work-mobile.svg");
    background-repeat: no-repeat;
    background-position: top right; } }

#hamburgerClose {
  position: absolute;
  display: none;
  top: 10px;
  right: 60px;
  cursor: pointer; }