eng.vidok.com/layout/style-scss/contact.scss

@import '_mixins';
@import '_variables';

.box-01 {
  margin-bottom: 35px;

  .contact-sections {
    display: grid;
    grid-template-columns: 500px 1fr;
    grid-template-areas:
      's0 s4'
      'sw1 s5'
      'sw1 s6'
      'sw1 s7';

    .sections-wrapper {
      grid-area: sw1;
    }

    .sections_2_3 {
      @include respond-above(md) {
        position: relative;
        padding-top: 260px;
        padding-bottom: 100px;
        background-color: #010101;
        background-image: url('/upload/filemanager/Pages/Contact/contact-bg.png');

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg,
              rgba(0, 0, 0, 1) 0%,
              rgba(102, 102, 102, 0) 100%);
        }
      }
    }

    section {
      position: relative;

      &.section_0 {
        grid-area: s0;

        @include respond-above(md) {
          background-color: $cBlack;
        }
      }

      &.section_1 {
        grid-area: s1;
        text-align: right;
        padding: 75px 50px 75px;

        @include respond-below(md) {
          padding: 75px 50px 30px;
        }

        @include respond-above(md) {
          background-color: $cBlack;
        }

        h2 {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 75px;

          @include respond-above(md) {
            color: $cTxtWhite;
          }

          @include respond-below(md) {
            margin-bottom: 20px;
          }
        }

        p {
          font-size: 14px;
          font-weight: 200;

          @include respond-above(md) {
            color: $cTxtWhite;
          }

          strong {
            font-weight: 700;
          }
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

          li {
            &:not(:last-child) {
              margin-bottom: 10px;
            }

            a {
              font-size: 18px;

              @include respond-above(md) {
                color: $cTxtWhite;
              }

              @include respond-below(md) {
                color: $cTxtBlack;
              }
            }
          }
        }

        @include respond-below(md) {
          text-align: center;
        }
      }

      &.section_2 {
        grid-area: s2;
        text-align: right;
        padding: 0 50px 90px 50px;

        // @include respond-above(md) {
        // 	background-color: $cBlack;
        // }

        img {
          margin-bottom: 20px;

          @include respond-below(md) {
            filter: invert(1);
          }
        }

        p {
          font-size: 15px;
          font-weight: 700;
          margin-bottom: 0;

          @include respond-above(md) {
            color: $cTxtWhite;
          }
        }

        @include respond-below(md) {
          text-align: center;
          padding: 50px 0 20px;
        }
      }

      &.section_3 {
        grid-area: s3;
        text-align: right;
        padding: 0 50px;

        // @include respond-above(md) {
        // 	background-color: $cBlack;
        // }

        h2 {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 60px;

          @include respond-above(md) {
            color: $cTxtWhite;
          }

          @include respond-below(md) {
            font-size: 22px;

            br {
              display: none;
            }
          }
        }

        p {
          color: #fff;
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 0;
          line-height: 30px;
        }

        @include respond-below(md) {
          text-align: center;
          margin-bottom: 10px;

          p {
            color: #000;
          }
        }
      }

      &.section_4 {
        grid-area: s4;
        padding: 80px 50px;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 25px;

        p {
          color: $cTxtGrayDarker;
          font-size: 25px;
          font-weight: 200;
          margin-bottom: 0;
        }

        a {
          width: 100%;
          max-width: 50px;

          img {
            width: 100%;
          }
        }

        @include respond-below(md) {
          flex-direction: column-reverse;
          align-items: center;
          text-align: center;
        }
      }

      &.section_5 {
        grid-area: s5;
        padding: 75px 50px 0;

        h2 {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 75px;
          text-transform: uppercase;

          @include respond-below(md) {
            margin-bottom: 20px;
          }
        }

        p {
          font-size: 12px;
          font-weight: 300;
          margin-bottom: 20px;
        }

        @include respond-below(md) {
          text-align: center;
        }

        #contact_form {
          .agreement {
            display: flex;
            flex-direction: row;
            gap: 40px;

            .agreement-container {
              .form_group_2 {
                input[type='checkbox'] {
                  background: #fff;
                  border: 1px solid #000000;

                  &::before {
                    background: #000;
                  }

                  &::after {
                    background: #000;
                  }
                }
              }
            }

            .buttons-container {
              button {
                width: 180px;

                &::before,
                &::after {
                  right: 40px;
                }
              }
            }
          }
        }
      }

      &.section_6 {
        grid-area: s6;
        padding: 100px 50px 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
          font-size: 21px;
          font-weight: 300;
          margin-bottom: 0;

          span {
            display: inline-block;
            min-width: 44px;
          }
        }

        @include respond-below(md) {
          text-align: center;
          padding: 50px;
        }
      }

      &.section_7 {
        grid-area: s7;
        padding: 0 50px;

        iframe {
          width: 100%;
          height: 535px;
        }
      }
    }

    @include respond-below(lg) {
      grid-template-columns: 350px 1fr;
    }

    @include respond-below(md) {
      grid-template-columns: 1fr;
      grid-template-areas:
        's0'
        'sw1'
        // 's2'
        's6'
        's5'
        's4'
        's3'
        's7';
      padding-top: 50px;
    }
  }
}

.box-02 {
  margin-bottom: 35px;

  .box-2-data {
    position: relative;
    padding: 30px 150px;
    background: #f4f4f4;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;

    h2 {
      color: #000;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0;
      margin-bottom: 0;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 15px;

      li {
        img {
          width: 100%;
          max-width: 24px;
          filter: brightness(0) saturate(100%) invert(0%) sepia(98%) saturate(0%) hue-rotate(47deg) brightness(98%) contrast(101%);
        }
      }
    }

    >img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }
}