/*  7.8 Work Css

/*----------------------------------------*/

@media (max-width: 767px) {

  .tp-work-area {

    padding-top: 60px;

    padding-bottom: 40px;

  }

}

.tp-work-item {

  border: 4px solid #fff;

  padding: 45px 40px 45px 50px;

  background-color: #F6F6F9;

}

@media (max-width: 767px) {

  .tp-work-item {

    padding: 45px 30px 45px 35px;

  }

}

.tp-work-item.about-us-3-bg {

  border-radius: 20px;

  border-color: #FFFFE6;

  background-color: #FFFFE6;

}

.tp-work-item.about-us-3-bg .tp-work-number span {

  background-color: #E7FF48;

}

.tp-work-item.about-us-3-bg .tp-work-number i {

  color: #2A4C3A;

}

.tp-work-item.about-us-3-bg .tp-work-title {

  color: #2A4C3A;

}

.tp-work-number {

  margin-bottom: 45px;

  display: inline-block;

}

.tp-work-number span {

  height: 80px;

  width: 60px;

  text-align: center;

  border-radius: 50%;

  display: inline-block;

  transform: rotate(30deg);

  background-color: var(--tp-common-red-3);

}

.tp-work-number i {

  position: absolute;

  top: 25px;

  left: 12px;

  font-style: italic;

  font-weight: 800;

  font-size: 30px;

  letter-spacing: -0.03em;

  color: var(--tp-common-white);

  font-family: var(--tp-ff-besley);

}

.tp-work-title {

  font-weight: 700;

  font-size: 30px;

  line-height: 1.2;

  letter-spacing: -0.04em;

  text-transform: uppercase;

  margin-bottom: 12px;

}

@media (max-width: 767px) {

  .tp-work-title {

    font-size: 25px;

  }

}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .tp-work-title-box {

    margin-bottom: 40px;

  }

}

.tp-work-content p {

  font-weight: 400;

  font-size: 16px;

  line-height: 1.5;

  margin-bottom: 0;

  letter-spacing: -0.02em;

  color: var(--tp-common-black);

}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .tp-work-content p br {

    display: none;

  }

}

.tp-work-wrapper {

  margin-left: 100px;

}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {

  .tp-work-wrapper {

    margin-left: 60px;

  }

}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .tp-work-wrapper {

    margin-left: 0px;

  }

}



.creative-work-content p {

  font-weight: 500;

  font-size: 16px;

  line-height: 1.5;

  margin-bottom: 0;

  color: var(--tp-common-white);

}

.creative-work-icon img {

  margin-bottom: 20px;

}

.creative-work-item {

  padding: 45px;

  border-radius: 20px;

  background-color: #0E0F11;

  border: 1px solid rgba(255, 255, 255, 0.1);

}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {

  .creative-work-item {

    padding: 35px;

  }

}

.creative-work-bg {

  padding: 110px 100px;

  padding-bottom: 80px;

  border-radius: 20px;

}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {

  .creative-work-bg {

    padding: 110px 70px;

    padding-bottom: 80px;

  }

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .creative-work-bg {

    padding: 110px 30px;

    padding-bottom: 80px;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .creative-work-bg {

    padding: 110px 50px;

    padding-bottom: 80px;

  }

}

@media (max-width: 767px) {

  .creative-work-bg {

    padding: 110px 20px;

    padding-bottom: 80px;

  }

}

.creative-work-square-box {

  position: absolute;

  top: 0;

  left: 0;

  height: 100px;

  width: 400px;

  display: inline-block;

  border-radius: 0 0 20px 0;

  background-color: #0E0F11;

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .creative-work-square-box {

    top: -50px;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .creative-work-square-box {

    display: none;

  }

}

.creative-work-square-box::after, .creative-work-square-box::before {

  content: "";

  position: absolute;

  bottom: 60px;

  right: -20px;

  height: 40px;

  width: 20px;

  border-top-left-radius: 20px;

  background-color: transparent;

  box-shadow: 0px -18px 0 0 #0e0f11;

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .creative-work-square-box::after {

    bottom: 10px;

  }

}

.creative-work-square-box::before {

  bottom: -40px;

  left: 0px;

}



@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .design-work-area {

    text-align: center;

    padding-bottom: 80px;

  }

}

.design-work-item img {

  width: 100%;

  border-radius: 30px;

}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {

  .design-work-item img {

    margin-bottom: 60px;

  }

}

@media (max-width: 767px) {

  .design-work-item img {

    margin-bottom: 30px;

  }

}

.design-work-content {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  margin: 0 auto;

  max-width: 420px;

  text-align: center;

  display: inline-block;

  transform: translateY(-50%);

}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .design-work-content {

    position: static;

    margin-bottom: 60px;

    transform: translateY(0);

  }

}

.design-work-content p {

  font-weight: 500;

  font-size: 24px;

  line-height: 1.25;

  color: #e0eeee;

  margin-bottom: 55px;

  letter-spacing: -0.02em;

}

@media (max-width: 767px) {

  .design-work-content p {

    font-size: 20px;

  }

}

.design-work-content img {

  margin-bottom: 30px;

}



/*----------------------------------------*/