/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
#sec-banner {
  position: relative;
  overflow: hidden;
  padding: 178px 0 160px 0;
  min-height: 415px; }
  @media screen and (min-width: 1025px) {
    #sec-banner {
      min-height: 460px;
      padding: 215px 0 150px 0; } }
  #sec-banner .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    max-height: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover; }
    @media screen and (min-width: 641px) {
      #sec-banner .bg-img {
        object-position: 70% center; } }
    @media screen and (min-width: 769px) {
      #sec-banner .bg-img {
        object-position: 70% center; } }
    @media screen and (min-width: 1025px) {
      #sec-banner .bg-img {
        object-position: 58% center; } }
    @media screen and (min-width: 1141px) {
      #sec-banner .bg-img {
        object-position: 60% center; } }
    @media screen and (min-width: 1317px) {
      #sec-banner .bg-img {
        object-position: 50% center; } }
  #sec-banner .content h1 {
    margin-bottom: 0; }

#sec-intro {
  padding-top: 80px;
  padding-bottom: 80px; }
  @media screen and (min-width: 1025px) {
    #sec-intro {
      padding-top: 108px;
      padding-bottom: 108px; } }
  #sec-intro picture,
  #sec-intro img {
    border-radius: 20px;
    max-height: 100% !important;
    height: 100% !important;
    object-fit: cover; }

#sec-people {
  padding-top: 0;
  padding-bottom: 80px; }
  @media screen and (min-width: 1025px) {
    #sec-people {
      padding-top: 0;
      padding-bottom: 108px; } }
  @media screen and (min-width: 1025px) {
    #sec-people .content ul {
      margin-top: 2.5rem;
      max-width: 626px; } }
  #sec-people .content ul li {
    margin-bottom: 1rem; }
    #sec-people .content ul li:last-of-type {
      margin-bottom: 0; }
  #sec-people picture,
  #sec-people img {
    border-radius: 20px;
    max-height: 100% !important;
    height: 100% !important;
    object-fit: cover; }

#sec-values {
  background-color: #f6f6f6;
  padding-top: 80px;
  padding-bottom: 80px; }
  @media screen and (min-width: 1025px) {
    #sec-values {
      padding-top: 108px;
      padding-bottom: 108px; } }
  #sec-values .card {
    min-height: 557px;
    position: relative;
    display: block;
    padding: 208px 26px 45px 26px;
    border-radius: 20px; }
    @media screen and (max-width: 641px) {
      #sec-values .card {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; } }
    @media screen and (min-width: 1025px) {
      #sec-values .card {
        padding: 265px 26px 45px 26px; } }
    #sec-values .card .card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
      border-radius: 20px; }
      #sec-values .card .card-bg::after {
        content: "";
        background: transparent linear-gradient(180deg, #44504c00 0%, #242222bf 100%) 0% 0% no-repeat padding-box;
        position: absolute;
        inset: 0;
        mix-blend-mode: multiply;
        border-radius: 20px; }
      #sec-values .card .card-bg .img {
        max-height: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: top;
        transition: all 110ms linear; }
    #sec-values .card .content {
      position: relative;
      z-index: 1; }
      #sec-values .card .content h2 {
        border-bottom: 2px solid #ffffff;
        padding-bottom: 22px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        line-height: 1.2; }
      #sec-values .card .content p {
        font-size: 16px; }
        #sec-values .card .content p:last-of-type {
          margin-bottom: 0; }

#sec-opportunities {
  padding-top: 80px;
  padding-bottom: 80px; }
  @media screen and (min-width: 1025px) {
    #sec-opportunities {
      padding-top: 108px;
      padding-bottom: 108px; } }
  #sec-opportunities .right-line h2 {
    flex-wrap: wrap;
    display: flex;
    width: 100%; }
    #sec-opportunities .right-line h2 .head-span {
      flex-grow: 1; }
  #sec-opportunities .opportunities-box {
    border-radius: 20px;
    background-color: #f6f6f6;
    padding: 2rem; }
    @media screen and (min-width: 1025px) {
      #sec-opportunities .opportunities-box {
        padding: 3rem 3rem 2rem 3rem; } }
    #sec-opportunities .opportunities-box h3 {
      font-weight: 600;
      margin-bottom: 5px; }
    #sec-opportunities .opportunities-box .subtitle {
      margin-bottom: 1rem; }
    #sec-opportunities .opportunities-box .description-area {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end; }
      #sec-opportunities .opportunities-box .description-area .description {
        margin-bottom: 1.5rem;
        width: 100%; }
        @media screen and (min-width: 1025px) {
          #sec-opportunities .opportunities-box .description-area .description {
            width: 75%;
            margin-bottom: 0; } }
      #sec-opportunities .opportunities-box .description-area .btn-area {
        width: 100%; }
        @media screen and (min-width: 1025px) {
          #sec-opportunities .opportunities-box .description-area .btn-area {
            text-align: right;
            width: 25%; } }
        #sec-opportunities .opportunities-box .description-area .btn-area a {
          font-size: 16px;
          text-transform: uppercase;
          font-weight: 600;
          letter-spacing: 1.6px;
          display: inline-flex;
          align-items: center;
          color: #242222; }
          #sec-opportunities .opportunities-box .description-area .btn-area a span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #3ec1f0;
            color: white;
            width: 48px;
            height: 48px;
            margin-left: 1rem; }
            @media screen and (1025px) {
              #sec-opportunities .opportunities-box .description-area .btn-area a span {
                width: 58px;
                height: 58px; } }
            #sec-opportunities .opportunities-box .description-area .btn-area a span i {
              font-size: 24px; }
          #sec-opportunities .opportunities-box .description-area .btn-area a:hover {
            color: #a8d26f; }
            #sec-opportunities .opportunities-box .description-area .btn-area a:hover span {
              background-color: #a8d26f; }