@use '../../utils' as *;

/*----------------------------------------*/
/*  8.11 team-details
/*----------------------------------------*/
.teamdetail{
  &__media{
    img{
      max-width: 440px;
      height: 100%;
      border-radius: 20px;

      @media #{$sm} {
        max-width: 100%;
      }
    }
  }
  &__content{
    &-title{
      font-family: var(--rr-ff-heading);
      color: var(--rr-heading-primary);
      font-weight: var(--rr-fw-bold);
      font-size: var(--rr-fs-h2);
      line-height: var(--rr-lh-h2);
      font-style: normal;
      margin-bottom: 5px;
      @media #{$md, $sm} {
        font-size: 35px;
        line-height: 45px;
      }
      @media #{$xs} {
        font-size: 30px;
        line-height: 40px;
      }
    }
    b{
      font-family: var(--rr-ff-body);
      color: var(--rr-text-body);
      font-weight: var(--rr-fw-regular);
      line-height: var(--rr-lh-h5);
      font-size: 16px;
      font-style: normal;
      margin-bottom: 10px;
      position: relative;
      margin-left: 94px;

      &::before{
        position: absolute;
        content: '';
        width: 70px;
        top: 10px;
        right: 0;
        left: -94px;
        border: 1px solid #034833;
      }

    }
    p{
      font-family: var(--rr-ff-body);
      color: var(--rr-text-body);
      font-weight: var(--rr-fw-regular);
      line-height: var(--rr-lh-h5);
      font-size: 16px;
      margin-bottom: 0;
      font-style: normal;
    }
    &-text{
      ul{
        li{
          font-family: var(--rr-heading-primary);
          color: var(--rr-common-black);
          font-weight: var(--rr-fw-sbold);
          line-height: var(--rr-lh-h6);
          font-size: 18px;
          font-style: normal;
          list-style: none;
          margin-top: 15px;

          span{
            font-family: var(--rr-ff-body);
            color: var(--rr-text-body);
            font-weight: var(--rr-fw-regular);
            line-height: var(--rr-lh-h5);
            font-size: 16px;
            font-style: normal;
            margin-left: 15px;
          }
          a{
            font-family: var(--rr-ff-body);
            color: var(--rr-text-body);
            font-weight: var(--rr-fw-regular);
            line-height: var(--rr-lh-h5);
            font-size: 16px;
            font-style: normal;
            margin-left: 15px;

            &:hover{
              color: var(--rr-theme-primary);
            }
          }
        }
      }
    }
  }
  &__description{
    &-title{
      font-family: var(--rr-ff-heading);
      color: var(--rr-heading-primary);
      font-weight: var(--rr-fw-sbold);
      line-height: var(--rr-lh-h5);
      font-size: 29px;
      font-style: normal;
    }
    &-paragraph{
      margin-bottom: 30px !important;
    }
    p{
      font-family: var(--rr-ff-body);
      color: var(--rr-text-body);
      font-weight: var(--rr-fw-regular);
      line-height: var(--rr-lh-h5);
      font-size: 16px;
      font-style: normal;
      margin-bottom: 0;
    }
  }
  &__progress{
    margin-right: 62px;
    @media #{$xl, $lg, $md, $sm, $xs} {
      margin-right: 0;
    }
    &-wrapper{
      &-title{
        font-family: var(--rr-ff-heading);
        color: var(--rr-heading-primary);
        font-weight: var(--rr-fw-sbold);
        font-size: var(--rr-fs-h3);
        line-height: var(--rr-lh-h3);
        font-style: normal;
      }
      &-item{
        margin-bottom: 15px;
        &-content{
          margin-bottom: 10px;
          .span-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-text-body);
            font-weight: var(--rr-fw-regular);
            line-height: var(--rr-lh-h5);
            font-size: 16px;
            font-style: normal;
          }
          .left-side{
            font-family: var(--rr-ff-heading);
            color: var(--rr-text-body);
            font-weight: var(--rr-fw-regular);
            line-height: var(--rr-lh-h5);
            font-size: 16px;
            font-style: normal;
          }
        }
        .progress{
          border-radius: 5px;
          height: 8px;
          &-2{
            height: 6px;
          }
          .progress-bar{
            border-radius: 5px;
            background: var(--rr-theme-primary);
          }
        }
      }
    }
  }
  &__from{
    
    &-content{
      background: #F1F5EB;
      border-radius: 20px;
      padding: 40px;
      @media #{$xs} {
         padding: 20px 20px 30px 20px;
      }
      &-title{
        font-family: var(--rr-heading-primary);
        color: var(--rr-heading-primary);
        font-weight: var(--rr-fw-sbold);
        font-size: var(--rr-fs-h3);
        line-height: var(--rr-lh-h3);
        font-style: normal;
        margin-bottom: 20px;
      }
      p{
        font-family: var(--rr-ff-body);
        color: var(--rr-heading-primary);
        font-weight: var(--rr-fw-regular);
        line-height: var(--rr-lh-h5);
        font-size: 16px;
        font-style: normal;
        margin-bottom: 20px;
      }
      &-input{
        input{
          font-family: var(--rr-ff-body);
          color: var(--rr-text-body);
          font-weight: var(--rr-fw-regular);
          line-height: var(--rr-lh-h5);
          background: var(--rr-common-white);
          font-size: 16px;
          font-style: normal;
          margin-left: 0;
          padding: 10px 20px;
          border: none;
          border-radius: 20px;
          margin-bottom: 20px;
        }
      }
      &-textarea{
        textarea{
          font-family: var(--rr-ff-body);
          color: var(--rr-text-body);
          font-weight: var(--rr-fw-regular);
          line-height: var(--rr-lh-h5);
          background: var(--rr-common-white);
          font-size: 16px;
          font-style: normal;
          margin-left: 0;
          border-radius: 20px;
          padding: 10px 20px;
          height: 167px !important;
          border: none;
        }
      }
      &-button{
        flex-wrap: wrap;
        row-gap: 20px;
        .live-comment-widget__agree{
          display: flex;
          gap: 10px;
          align-items: center;
        }
        .form-check-label{
          font-family: var(--rr-ff-heading);
          color: var(--rr-heading-primary);
          font-weight: var(--rr-fw-regular);
          line-height: var(--rr-lh-h5);
          font-size: 16px;
          font-style: normal;
        }
        &-btn{
          color: var(--rr-common-white);
          background: var(--rr-theme-primary);
          border-radius: 30px;
          padding: 10px 51px;
          display: flex;
          align-items: center;
          transition: .3s;
          

          &:hover{
            background: var(--rr-heading-primary);
            color: var(--rr-common-white);
          }
        }
      }
    }
  }
}