@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --light-clr: hsla(255, 100%, 100%, 1);
  --dark-text-clr: hsla(227, 100%, 23%, 1);
  --dark-clr: hsla(217, 98%, 16%, 1);
  --accent-clr: hsla(202, 100%, 66%, 1);
  --primary-clr: hsla(217, 95%, 6%, 1);
  --gray-clr: hsla(0, 0%, 77%, 1);
  --info-clr: hsla(203, 100%, 61%, 0.954);
  --success-clr: hsla(128, 69%, 50%, 1);
  --error-clr: hsla(0, 100%, 50%, 0.8);

  --gap: 2rem;
  --font-size: 16px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  font-family: Inter, Arial, sans-serif;
  font-size: var(--font-size);
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  min-width: 381px;
}

@media screen and (min-width: 968px) {
  :root {
    --font-size: 14px;
  }
}

img,
figure {
  display: block;
  object-fit: cover;
}

div,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
  line-height: 1.2;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: var(--light-clr);
}

.wrapper {
  --wrapper-width: 1200px;
  --wrapper-padding: var(--gap);
  width: min(var(--wrapper-width), 100% - var(--wrapper-padding) * 2);
  margin-inline: auto;
}

.header {
  background-color: var(--primary-clr);

  .header-content {
    display: grid;
    padding: 2.75rem 0;
    align-items: center;
    justify-items: space-between;

    grid-template:
      " logo nav "
      / 1fr;

    .logo {
      grid-area: logo;

      margin-inline-end: 2rem;

      img {
        max-width: 128px;
      }
    }

    .menu__button-mobile {
      display: none;
    }

    .nav {
      grid-area: nav;

      display: contents;

      .menu {
        --items-gap: 2em;

        align-items: center;
        gap: var(--items-gap);
        display: flex;
        font-size: 1.375rem;
        height: 4.25rem;
        list-style: none;
        padding: 0;
        text-transform: uppercase;
        height: auto;

        li {
          height: 4rem;
          display: grid;
          align-items: center;
        }

        li:has(a[href="#contacts"]) {
          border-left: 2px solid #fff;
          padding-inline-start: var(--items-gap);
        }

        a {
          text-decoration: none;
        }
      }
    }

    @media screen and (width < 1200px) {
      grid-template:
        " logo button "
        " menu menu "
        / auto 1fr;

      .menu__button-mobile {
        grid-area: button;

        justify-self: end;
        align-items: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: space-between;
        width: 24px;
        height: 48px;

        .dot {
          width: 8px;
          height: 8px;
          background-color: var(--light-clr);
          border-radius: 50%;
        }
      }

      .nav {
        .menu {
          grid-area: menu;

          flex-flow: column;

          li:has(a[href="#contacts"]) {
            border-left: none;
            padding-inline-start: 0;
          }
        }

        .menu[data-menu="closed"] {
          display: none;
        }
      }
    }
  }
}

.button {
  align-items: center;
  border-radius: 100vh;
  background-color: var(--light-clr);
  color: var(--dark-clr);
  cursor: pointer;
  display: flex;
  height: 4rem;
  padding-inline-start: 2rem;
  padding-inline-end: 0.4375rem;
  white-space: nowrap;

  .circle-button {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--accent-clr);
    border-radius: 50%;
    display: grid;
    font-size: 1rem;
    font-weight: 900;
    height: 3.125rem;
    justify-items: center;
    margin-inline-start: 2rem;
    width: 3.125rem;
    vertical-align: baseline;
  }
}

.hero {
  --padding-top: 8em;
  --padding-bottom: 3em;
  --padding-left: 1em;
  --text-size: 1.75rem;
  align-items: center;
  background: url(/assets/images/hero-background.webp) center center no-repeat
    var(--dark-clr);
  background-size: cover;
  color: var(--light-clr);
  font-size: var(--text-size);

  .hero-content {
    padding-block-start: var(--padding-top);
    padding-block-end: var(--padding-bottom);
    padding-inline-start: var(--padding-left);
    max-width: 50ch;

    .logo {
      width: 296px;
    }

    p {
      margin-block-start: 3em;
    }
  }

  @media screen and (width < 768px) {
    --text-size: 1rem;
    --padding-top: 3em;
    --padding-left: 0;

    .hero-content {
      .logo {
        width: auto;
      }
    }

    p {
      margin-block-start: 1em;
    }
  }
}

.content {
  font-size: 1.125rem;
  padding-block: 3rem;
}

.light {
  background-color: var(--light-clr);
  color: var(--dark-text-clr);
}

.dark {
  color: var(--light-clr);
  background-color: var(--dark-clr);
}

.divider {
  border: solid 1px var(--dark-clr);
  margin-inline: 0;
  margin-block: 2rem;
}

.divider.accent {
  border: solid 1px var(--accent-clr);
}

.h2 {
  font-size: 6.1875rem;
  margin-block-end: 2rem;
}

.h3,
.h4 {
  font-size: 2.125rem;
  margin-block-end: 2rem;
}

.h6 {
  font-size: 1.625rem;
  margin-block-end: 2rem;
}

.p {
  margin-block-end: 2rem;
}

.w-70 {
  width: 70%;
}

.t-600 {
  font-weight: 600;
}

.image {
  border-radius: var(--gap);

  &:not(:last-child) {
    margin-block-end: var(--gap);
  }

  height: auto;
  width: 100%;
}

.column {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;

  & > * {
    flex: 1;
  }

  & > .image {
    flex: 0;
  }
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @media screen and (width < 992px) {
    grid-template-columns: 1fr;
  }
}

.about {
  gap: 6rem;

  .accent {
    color: var(--accent-clr);
  }

  @media screen and (width < 992px) {
    gap: var(--gap);
  }
}

.services {
  gap: var(--gap);
  text-wrap: pretty;

  .h4,
  .p {
    margin-block-end: 1rem;
  }

  .item {
    margin-block-end: 1rem;
    border-bottom: solid 1px var(--primary-clr);
  }

  .box {
    display: grid;
    place-content: center;
  }

  .box:not(:last-child) {
    margin-block-end: var(--gap);
  }

  .rounded-box {
    padding: var(--gap);
    border-radius: var(--gap);
  }

  .accent-box {
    background-color: var(--accent-clr);
    color: var(--primary-clr);
  }

  .starred-box {
    background: url(/assets/images/star-1.svg) no-repeat;
    background-position: top 2rem right 1rem;
    display: grid;
    grid-template-columns: 1fr 100px;
    padding: 1rem;

    .item {
      border-bottom: none;
    }

    .item:not(:last-child) {
      font-size: 1.25rem;
      padding-block-end: 1rem;
      margin-block-end: 1rem;
      border-bottom: solid 1px var(--light-clr);
    }
  }

  .starred-box-2 {
    background: url(/assets/images/star-2.svg) no-repeat;
    background-position: top 2rem right 1rem;
    @media screen and (width < 992px) {
      grid-template-columns: 1fr 67px;
      background-size: 60px;
    }
  }

  @media screen and (width < 992px) {
    .starred-box,
    .starred-box-2 {
      grid-template-columns: 1fr 67px;
      background-size: 60px;
    }
  }

  @media screen and (width < 768px) {
    .starred-box,
    .starred-box-2 {
      grid-template-columns: 100%;
      background: none;
    }
  }

  .starred-list {
    list-style: none;

    li {
      display: flex;
      position: relative;
    }

    li::before {
      content: "";
      background: url(/assets/images/star-white.svg) no-repeat;
      background-size: contain;
      list-style-type: none;
      position: absolute;
      top: 0.3rem;
      left: -2.5rem;
      width: 1.275rem;
      height: 1.275rem;
    }

    li:not(:last-child) {
      border-bottom: solid 1px var(--primary-clr);
      margin-block-end: 1rem;
      padding-block-end: 1rem;
    }
  }
}

.cards {
  --cards-gap: var(--gap);
  display: grid;
  row-gap: calc(var(--cards-gap) / 2);
  column-gap: var(--cards-gap);
  margin-block-start: calc(var(--gap) * 2);
  grid-template-areas:
    "c1 c2 c3"
    "c4 c2 . "
    "c5 c6 . "
    ".  c6 . "
    ".  c7 c8"
    ".  c7 c9";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 220px);

  .card {
    align-items: center;
    display: grid;
  }

  .c1 {
    grid-area: c1;
  }

  .c2 {
    grid-area: c2;
    background: url(/assets/images/content/6.webp) no-repeat;
  }

  .c3 {
    grid-area: c3;
  }

  .c4 {
    grid-area: c4;
    background: url(/assets/images/content/5.webp) no-repeat;
  }

  .c5 {
    grid-area: c5;
  }

  .c7 {
    grid-area: c7;
    background: url(/assets/images/content/9.webp) no-repeat;
  }

  .c8 {
    grid-area: c8;
  }

  .c9 {
    grid-area: c9;
    background: url(/assets/images/content/10.webp) no-repeat;
  }

  .c6 {
    grid-area: c6;

    align-content: center;
    aspect-ratio: 1;
    background-color: var(--gray-clr);
    border-radius: var(--gap);

    position: relative;

    .image-float-left {
      position: absolute;
      transform: scale(0.7) translateX(-45%);
    }

    .image-float-right {
      position: absolute;
      transform: scale(0.75) translateX(45%);
    }
  }

  .card__image {
    transform-origin: center;
    background-size: cover;
    background-position: center;
    border-radius: var(--gap);
  }

  .star {
    margin-block-end: 1rem;
  }

  @media screen and (width < 992px) {
    overflow: hidden;

    --cards-gap: 1rem;
    grid-template-areas:
      "c1 c1"
      "c4 c2"
      "c5 c5"
      "c7 c9"
      "c8 c8"
      "c6 c6"
      "c3 c3";
    grid-template-columns: calc(50% - var(--cards-gap) / 2) calc(
        50% - var(--cards-gap) / 2
      );
    grid-template-rows: 0.5fr 220px 0.5fr 220px 0.5fr 220px 0.5fr;
    gap: var(--cards-gap);

    .c6 {
      grid-area: c6;

      background-color: transparent;
      display: grid;
      justify-self: center;
      align-items: center;
      justify-items: center;
      height: 100%;
      width: 100%;

      .image-float-left {
        transform: scale(0.8) translate(-50%, 10%);
      }

      @media screen and (width < 768px) {
        grid-template-columns: 50% 50%;
        .image-float-left,
        .image-float-right {
          position: relative;
          transform: scale(0.6);
        }
      }
    }
  }
}

.application-form {
  gap: calc(var(--gap) * 3);
  font-size: 1.25rem;

  input[type="text"],
  textarea {
    appearance: auto !important;
    display: block;
    border: none;
    border-block-end: 1px solid var(--light-clr);
    background-color: var(--dark-clr);
    color: var(--light-clr);
    font-size: 1em;
    margin-block-end: var(--gap);
    padding: 1rem 0;
    width: 100%;

    &::placeholder {
      color: var(--light-clr);
      opacity: 0.7;
    }

    &:focus {
      border: none;
      outline: 1px solid var(--light-clr);
      outline-offset: 0.5rem;
    }
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--light-clr);
    transition: background-color 5000s ease-in-out 0s;
  }

  .checkbox {
    display: flex;
    align-items: center;
    height: 2rem;
    margin-block-end: var(--gap);

    input[type="checkbox"] {
      appearance: none;
      aspect-ratio: 1;
      background-color: var(--dark-clr);
      border: 1px solid currentColor;
      color: currentColor;
      display: grid;
      place-content: center;
      width: 2rem;

      &::before {
        aspect-ratio: 1;
        background-color: var(--accent-clr);
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        content: "";
        width: 1.2rem;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
      }

      &:checked::before {
        transform: scale(1);
      }
    }

    span {
      padding-inline-start: 1rem;
    }
  }

  textarea {
    height: 12rem;
  }

  .button {
    font-size: 1.25rem;
  }

  .form__actions {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
  }

  .alert {
    color: white;
    font-weight: 500;
    padding: 1em 2em;
    position: relative;
    margin-block-end: 1rem;
    display: block;
  }

  .hidden {
    display: none;
  }

  .alert p {
    margin-block-end: 0;
  }

  .alert p:not(:last-child) {
    margin-block-end: 1rem;
  }

  .alert--info {
    background: var(--info-clr);
  }

  .alert--success {
    background: var(--success-clr);
  }

  .alert--error {
    background: var(--error-clr);
  }

  .alert > .close {
    position: absolute;
    top: 0.2em;
    right: 0.5em;
    font-weight: 700;
    cursor: pointer;
  }

  .alert > .close:hover {
    font-weight: 800;
  }

  .field--error input,
  .field--error textarea {
    outline: 1px solid var(--error-clr);
    outline-offset: 3px;
  }

  .field--error label {
    color: var(--error-clr);
  }

  .dots {
    position: relative;
    display: inline-block;
    width: 50px;
  }

  .dots__stage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 32px 0;
    margin: 0 -5%;
    overflow: hidden;
  }

  .dots--pulse {
    position: relative;
    left: -9999px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: white;
    color: white;
    box-shadow: 9999px 0 0 -5px;
    animation: dots--pulse 1.5s infinite linear;
    animation-delay: 0.25s;
  }

  .dots--pulse::before,
  .dots--pulse::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: white;
    color: white;
  }

  .dots--pulse::before {
    box-shadow: 9984px 0 0 -5px;
    animation: dots--pulse-before 1.5s infinite linear;
    animation-delay: 0s;
  }
  .dots--pulse::after {
    box-shadow: 10014px 0 0 -5px;
    animation: dots--pulse-after 1.5s infinite linear;
    animation-delay: 0.5s;
  }
}

.footer {
  display: grid;
  font-size: 1.5rem;
  grid-template:
    " logo title contacts-details . working-hours "
    / 0.6fr 1.2fr 1.4fr 3rem 0.8fr;
  padding-block: 6rem;

  .logo {
    box-sizing: border-box;
    grid-area: logo;
    margin-inline-end: 2rem;
    margin-block-end: 3rem;

    img {
      width: 100%;
      max-width: 260px;
    }
  }

  .title {
    grid-area: title;
  }

  .contacts-details {
    grid-area: contacts-details;
  }

  .h3,
  .item {
    border-bottom: 1px solid var(--dark-clr);
    line-height: 4rem;
  }

  h3 {
    padding-inline-end: 1rem;
  }

  .address {
    border-bottom: none;
    margin-block-start: 1rem;
    margin-block-end: 3rem;
    line-height: 2rem;
  }

  .working-hours {
    grid-area: working-hours;
    line-height: 2rem;
    margin-block-start: 1rem;

    h4 {
      margin-block-end: 1rem;
    }
  }

  @media screen and (width < 1200px) {
    grid-template:
      " logo . . . "
      " title contacts-details . working-hours "
      / 1fr 1.2fr 3rem 0.8fr;
  }

  @media screen and (width < 1028px) {
    grid-template:
      " logo "
      " title "
      " contacts-details "
      " working-hours ";

    .h3,
    .item {
      border-bottom: none;
    }
  }
}

@keyframes dots--pulse-before {
  0% {
    box-shadow: 9984px 0 0 -5px;
  }
  30% {
    box-shadow: 9984px 0 0 2px;
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px;
  }
}

@keyframes dots--pulse {
  0% {
    box-shadow: 9999px 0 0 -5px;
  }
  30% {
    box-shadow: 9999px 0 0 2px;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px;
  }
}

@keyframes dots--pulse-after {
  0% {
    box-shadow: 10014px 0 0 -5px;
  }
  30% {
    box-shadow: 10014px 0 0 2px;
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px;
  }
}