@import url("colors.css");

.homepage {
  font-family: inherit;
}

h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--partner-nnsk-heading);
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  h1 {
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
  }
}

h2 {
  color: var(--partner-nnsk-heading);
  font-size: 40px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.01em;
  text-align: center;
}

@media (max-width: 767px) {
  h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.01em;
    text-align: left;
  }
}

h3 {
  color: var(--partner-nnsk-heading);
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  text-align: left;
}

.special-offer,
.vote,
.specialists {
  max-width: 1280px;
  margin: auto;
}

/*
  the background image is in the .introduction and needs to be stretched to full width
  also the background color in the specialists section
  this is fixed with css instead of rewriting the html structure
*/
.homepage>div {
  width: 100%;
  padding-left: unset;
  padding-right: unset;

  &>div {
    display: flex;
    flex-flow: column;
    align-items: center;

    &>div {
      width: 1170px;
      padding-left: 15px;
      padding-right: 15px;
    }

    @media (max-width: 767px) {
      &>div {
        width: unset;
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }
}

/*introduction*/

.introduction {
  background: url('./homepage/nn-hero-web.jpg');
  background-size: cover;
  background-position: center right;
  margin: auto;
  min-height: 560px;
}

@media (max-width: 767px) {
  .introduction {
    background: url('./homepage/nn-hero-mobile.jpg');
    background-size: cover;
    background-position: top center;
    min-height: unset;
  }
}

.introduction .header {
  padding-top: 120px;
  padding-bottom: 90px;
}

@media (max-width: 767px) {
  .introduction .header {
    padding: 300px 24px 16px 24px;
    display: flex;
    align-items: flex-end;
  }
}

.introduction .header .header-container {
  max-width: 480px;
  margin: 0;
  background: white;
  border-radius: 12px;
  padding: 32px;
}

@media (max-width: 767px) {
  .introduction .header .header-container {
    max-width: unset;
    border-radius: 12px;
    padding: 24px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .introduction .header .header-container {
    max-width: 420px;
  }
}

.introduction h1 {

  font-size: 48px;
  font-weight: 800;
  line-height: 56px;
  color: #414141;
}

@media (max-width: 767px) {
  .introduction h1 {
    font-size: 32px;
    line-height: 40px;
    padding-bottom: 4px;
  }
}

.introduction p {

  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
  color: #414141;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .introduction p {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 24px;
  }
}

.continue-button {
  display: inline-block;
  padding: 16px 32px;
  background: var(--partner-nnsk-secondary);
  border-radius: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: white !important;
  text-align: center;
}

@media (max-width: 767px) {
  .continue-button {
    font-size: 18px;
    line-height: 28px;
    padding: 14px 24px;
    width: 100%;
    box-sizing: border-box;
  }
}

.introduction .header .button-section {
  display: flex;
}

/*services section*/

.services-section {
  padding: 96px 0 80px 0;
}

@media (max-width: 767px) {
  .services-section {
    padding: 48px 0;
  }

  .services-section .services-content,
  .specialist-info-section .specialist-info-content {
    padding: 0 16px;
  }

  .services-section .services-content > *,
  .specialist-info-section .specialist-info-content > * {
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
}

.services-section h2,
.specialist-info-section h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 64px;
  color: #414141;
  text-align: left;
}

@media (max-width: 767px) {

  .services-section h2,
  .specialist-info-section h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

.services-section .header {
  text-align: left;
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .services-section .header {
    margin-bottom: 32px;
  }
}

.services-section .header p,
.specialist-info-section .header p {
  font-size: 20px;
  font-weight: 400;
  line-height: 34px;
  color: #6D6D6D;
  margin: 0;
}

@media (max-width: 767px) {

  .services-section .header p,
  .specialist-info-section .header p {
    font-size: 16px;
    line-height: 26px;
  }
}

.services-section .cards,
.specialist-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 767px) {

  .services-section .cards,
  .specialist-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.services-section .card {
  background: white;
  border: 1px solid var(--partner-nnsk-border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.specialist-cards .card {
  background: white;
  border: 1px solid var(--partner-nnsk-border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 767px) {

  .services-section .card,
  .specialist-cards .card {
    padding: 24px;
  }
}

.services-section .card .icon,
.specialist-cards .card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

.services-section .card h3,
.specialist-cards .card h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #414141;
  margin: 0 0 12px 0;
}

@media (max-width: 767px) {

  .services-section .card h3,
  .specialist-cards .card h3 {
    font-size: 20px;
    line-height: 28px;
  }
}

.services-section .card p,
.specialist-cards .card p {

  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #6D6D6D;
  margin: 0;
  flex: 1;
}

.services-section .card .card-button {
  display: flex;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 4px;
  background: var(--partner-nnsk-primary);
  color: white;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  margin-top: 24px;
}

.services-section .card .card-button img {
  width: 16px;
  height: 16px;
}

/*specialist cards*/

.specialist-cards {
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .specialist-cards {
    margin-bottom: 32px;
  }
}

/*specialist info section*/

.specialist-info-section {}

@media (max-width: 767px) {
  .specialist-info-section {
    padding: 0;
  }
}

.specialist-info-section .header {
  text-align: left;
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .specialist-info-section .header {
    margin-bottom: 32px;
  }
}

/*specialists*/

.specialists-container .specialists .header {
  text-align: left;
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .specialists-container .specialists .header {
    margin-bottom: 32px;
  }
}

.specialists-container .specialists .header h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 64px;
  color: #414141;
  text-align: left;
}

@media (max-width: 767px) {
  .specialists-container .specialists .header h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

.specialists-container .specialists .header p {
  font-size: 20px;
  font-weight: 400;
  line-height: 34px;
  color: #6D6D6D;
  margin: 0;
}

@media (max-width: 767px) {
  .specialists-container .specialists .header p {
    font-size: 16px;
    line-height: 26px;
  }
}

.specialists-container .container {
  margin: 0;
  padding: 0 !important;
}

.specialists-container {
  & .specialists {
    padding: 5rem;

    @media (max-width: 768px) {
      padding: 5rem 0;
    }

    &>div {
      &>.container {
        padding-left: 0;
        padding-right: 0;
        width: unset;

        @media (max-width: 767px) {
          padding-left: 0;
          padding-right: 0;
        }

        & .row {
          display: flex;
          gap: 30px;
          flex-wrap: wrap;
          margin-left: 0;
          margin-right: 0;

          @media (max-width: 767px) {
            gap: 0;
            flex-direction: column;
          }

          &::before {
            content: unset;
            display: unset;
          }

          & .col-sm-4 {
            width: unset;
            padding-left: 0;
            padding-right: 0;
            flex: 0 0 calc((100% / 3) - (60px / 3));
            /* 2 x gap / 3 */

            @media (max-width: 767px) {
              flex: 0 0 100%;
            }
          }

          & .col-sm-12 {
            padding-left: 0;
          }
        }
      }
    }
  }
}

.specialists-container .container {
  margin: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.fill-button-secondary-light {
  fill: #FDF0E7 !important;
  fill-opacity: 1 !important;
}

.fill-button-secondary {
  fill: var(--partner-nnsk-primary) !important;
}

.button {
  cursor: auto !important;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  all: unset;
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
  border: none;
}