:root {
  --white: white;
  --black: black;
}

.section {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.section.uc {
  background-color: #ffd800;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  margin-left: -64px;
  margin-right: -64px;
  padding-left: 64px;
  padding-right: 64px;
}

.section-2 {
  flex-direction: column;
  display: flex;
}

.section-3 {
  display: flex;
}

.navbar {
  justify-content: space-around;
  display: flex;
}

.bold-text {
  color: #f9f9ec;
  -webkit-text-stroke-color: #f9f9ec;
  font-family: Inter, sans-serif;
  font-size: 96px;
  font-weight: 700;
}

.div-block {
  text-align: center;
  margin-top: 36px;
  margin-bottom: 72px;
}

.body {
  color: #333;
  background-color: #2b2929;
  padding-left: 64px;
  padding-right: 64px;
}

.heading {
  color: #fff;
}

.heading-2 {
  color: #f9f9ed;
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 48px;
}

.div-block-2 {
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  display: flex;
}

.div-block-2.uc {
  width: 100px;
  height: 40px;
  background-image: url('../images/SB-logo-mark2x.png');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 28px;
  margin-bottom: 28px;
}

.div-block-3 {
  display: flex;
}

.div-block-4 {
  min-height: 36px;
  min-width: 36px;
  background-image: url('../images/linkedin-4.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  transition: transform .2s;
  display: flex;
  overflow: auto;
}

.div-block-4:hover {
  transform: translate(0, -5px);
}

.div-block-4.uc {
  background-image: none;
}

.div-block-4.uc:hover {
  transform: translate(0, -5px);
}

.heading-3 {
  color: #f9f9ed;
  margin-top: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.heading-4 {
  color: #f9f9ec;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
}

.heading-4.uc {
  color: #2b2929;
  text-align: center;
  margin-top: 0;
  font-weight: 800;
}

.grid {
  grid-template: "Area Area-2 Area-3 Area-4"
                 "Area-5 Area-6 Area-7 Area-8"
                 "Area-9 Area-10 Area-11 Area-12"
                 "Area-13 Area-14 Area-15 Area-16"
                 "Area-17 Area-18 Area-19 Area-20"
                 "Area-21 Area-22 Area-23 Area-24"
                 "Area-25 Area-26 Area-27 Area-28"
                 "Area-29 Area-30 Area-31 Area-32"
                 "Area-33 Area-34 Area-35 Area-36"
                 "Area-37 Area-38 Area-39 Area-40"
                 "Area-41 Area-42 Area-43 Area-44"
                 "Area-45 Area-46 Area-47 Area-48"
                 "Area-49 Area-50 Area-51 Area-52"
                 "Area-53 Area-54 Area-55 Area-56"
                 "Area-57 Area-58 Area-59 Area-60"
                 "Area-61 Area-62 Area-63 Area-64"
                 "Area-65 Area-66 Area-67 Area-68"
                 "Area-69 Area-70 Area-71 Area-72"
                 "Area-73 Area-74 Area-75 Area-76"
                 "Area-77 Area-78 Area-79 Area-80"
                 "Area-81 Area-82 . Area-83"
                 "Area-84 Area-85 . ."
                 / 1fr 1fr 1fr 1fr;
}

.tab-pane-tab-1 {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.tab-link-tab-1 {
  background-color: rgba(200, 200, 200, 0);
}

.tab-link-tab-1.w--current {
  color: #ff7f02;
  background-color: #fff;
  font-weight: 700;
}

.tab-link-tab-2 {
  background-color: rgba(221, 221, 221, 0);
}

.tab-link-tab-2.w--current {
  color: #ff7f02;
  background-color: #fff;
  font-weight: 700;
}

.tab-non-selected {
  color: #ff7f02;
}

.tab-link-tab-3 {
  background-color: rgba(221, 221, 221, 0);
}

.tab-link-tab-3.w--current {
  color: #ff7f02;
  background-color: #fff;
  font-weight: 700;
}

.tab-link-tab-4 {
  background-color: rgba(221, 221, 221, 0);
}

.tab-link-tab-4.w--current {
  color: #ff7f02;
  background-color: #fff;
  font-weight: 700;
}

.tab-link-tab-5 {
  background-color: rgba(221, 221, 221, 0);
}

.tab-link-tab-5.w--current {
  color: #ff7f02;
  background-color: #fff;
  font-weight: 700;
}

.tab-selected {
  color: #fff;
  font-weight: 400;
}

.tabs-menu-2, .tab-text-non-selected, .tabs {
  color: #fff;
}

.lightbox-link {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.heading-5 {
  color: #fff;
  font-weight: 700;
}

.work {
  color: #f9f9ec;
  -webkit-text-stroke-width: 0px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 30px;
  font-family: Inter, sans-serif;
  font-size: 96px;
  transition: all .2s;
  transform: translate(0);
}

.div-block-5 {
  flex-direction: column;
  justify-content: space-between;
  margin-top: 100px;
  display: flex;
}

.div-block-6 {
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 24px;
  display: flex;
}

.div-block-6.category {
  border-bottom: 6px solid #fff;
  margin-top: 24px;
  padding-bottom: 48px;
}

.link-block {
  min-width: 36px;
  transition: transform .2s;
}

.btn-uc {
  background-color: #2b2929;
  border-radius: 20px;
  padding-bottom: 10px;
  padding-left: 31px;
  padding-right: 31px;
  font-family: Inter, sans-serif;
  font-weight: 500;
}

.btn-uc:hover {
  transform: translate(0);
}

.lightbox-link-2 {
  width: auto;
  height: auto;
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  background-image: url('../images/icon-eye-view.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 0 solid #fff;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding-left: 70px;
  text-decoration: none;
  transition: transform .2s;
  display: flex;
  transform: translate(0);
}

.lightbox-link-2:hover {
  pointer-events: auto;
  transform: translate(0, -5px);
}

.image {
  display: block;
}

.lightbox-link-3 {
  max-height: none;
  background-image: url('../images/icon-eye-view.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  justify-content: space-between;
  padding-left: 70px;
  text-decoration: none;
  transition: transform .2s;
  display: flex;
}

.lightbox-link-3:hover {
  transform: translate(0, -5px);
}

.lightbox-link-4 {
  background-image: url('../images/icon-eye-view.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 70px;
  text-decoration: none;
  transition: transform .2s;
  display: flex;
}

.lightbox-link-4:hover {
  transform: translate(0, -5px);
}

.lightbox-link-5 {
  background-image: url('../images/icon-eye-view.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 70px;
  text-decoration: none;
  transition: transform .2s;
  display: flex;
}

.lightbox-link-5:hover {
  transform: translate(0, -5px);
}

.lightbox-link-6 {
  background-image: url('../images/icon-eye-view.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 70px;
  text-decoration: none;
  transition: transform .2s;
  display: flex;
}

.lightbox-link-6:hover {
  transform: translate(0, -5px);
}

@media screen and (max-width: 991px) {
  .section {
    flex-direction: row;
    justify-content: space-between;
  }

  .section-2 {
    flex-direction: column;
  }

  .tabs-menu {
    justify-content: space-between;
    display: flex;
  }

  .bold-text {
    font-size: 72px;
  }

  .body {
    padding-left: 48px;
    padding-right: 48px;
  }

  .heading-2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
  }

  .div-block-2 {
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
  }

  .work {
    font-size: 72px;
  }

  .div-block-6.category {
    border-bottom-width: 6px;
    padding-bottom: 36px;
  }

  .lightbox-link-2, .lightbox-link-3, .lightbox-link-4, .lightbox-link-5, .lightbox-link-6 {
    padding-left: 50px;
  }
}

@media screen and (max-width: 767px) {
  .section {
    justify-content: space-between;
    align-items: center;
  }

  .menu-button {
    justify-content: flex-end;
    display: flex;
  }

  .nav-menu {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .bold-text {
    font-size: 64px;
  }

  .body {
    padding-left: 24px;
    padding-right: 24px;
  }

  .heading-2 {
    font-size: 18px;
    line-height: 24px;
  }

  .heading-4.uc {
    font-size: 16px;
  }

  .work {
    font-size: 48px;
  }

  .div-block-5 {
    margin-top: 50px;
  }

  .div-block-6.category {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-bottom: 24px;
  }

  .link-block {
    min-height: 36px;
  }
}

@media screen and (max-width: 479px) {
  .bold-text {
    font-size: 48px;
  }

  .body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .heading-2 {
    font-size: 14px;
    line-height: 18px;
  }

  .div-block-2.uc {
    width: 50px;
    height: 30px;
    margin-top: 11px;
    margin-bottom: 11px;
  }

  .div-block-3.uc {
    max-width: 12ch;
  }

  .heading-4.uc {
    font-size: 12px;
    line-height: 14px;
  }

  .work {
    padding-left: 0;
    font-size: 24px;
  }

  .work.nu {
    text-decoration: none;
  }

  .div-block-5 {
    margin-top: 50px;
  }

  .div-block-6.category {
    max-height: 100px;
    border-bottom-width: 3px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 12px;
  }

  .btn-uc {
    margin-top: 0;
    padding: 9px 15px;
  }

  .lightbox-link-2 {
    max-height: 30px;
    background-image: url('../images/icon-eye-view.svg');
    background-position: 0%;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 50px;
  }

  .lightbox-link-3, .lightbox-link-4, .lightbox-link-5, .lightbox-link-6 {
    max-height: 30px;
    padding-left: 50px;
  }
}


