/* custom new hero section */

.new-hero {
    height: 100vh;
    background: url(../images/hero-1.png);
    background-position: right 50% top 50%;
    background-size: cover;
    display: flex;
    flex-flow: column wrap;
    align-items: end;
    justify-content: start;
  }
  
  .hero-content {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
  }
  
  .hero-logo-section {
    display: flex;
    flex-direction: column;
    align-self: center;
  }
  
  .hero-logo-section .logo-first {
    min-width: 10vw;
    max-width: 25vw;
  }
  
  .hero-logo-extras-section {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
  }
  
  .hero-logo-extras-section .hero-logo-extras {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 1rem;
    padding: 6px;
    border-radius: 5px;
    /* background: #ffffff; */
    /* box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 0 5px 15px 0 rgba(0, 0, 0, 0.19); */
  }
  
  .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
    min-height: 4vh;
    max-height: 11vh;
  }
  
  .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
    min-height: 4vh;
    max-height: 13vh;
  }
  
  .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
    min-height: 4vh;
    max-height: 11vh;
  }
  
  .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
    min-height: 3vh;
    max-height: 9vh;
  }
  
  /* 4K 2560px orientation landscape */
  
  @media only screen and (min-width: 2560px) {
    .hero-content {
      padding: 5rem 4rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 25vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 13vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 9vh;
    }
  }
  
  /* Laptop L & Desktop 1440px orientation landscape */
  
  @media only screen and (min-width: 1440px) and (max-width: 2559px) {
    .hero-content {
      padding: 1rem 4rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 23vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 8vh;
    }
  }
  
  /* Laptop & Desktop 1024px orientation landscape */
  
  @media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .hero-content {
      padding: 3rem 4rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 22vw;
    }
  
    .hero-logo-extras-section {
      padding: 0 0 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 8vh;
    }
  }
  
  /* Laptop Small 1000px orientation landscape || potrait */
  
  @media only screen and (orientation: landscape) and (min-width: 992px) and (max-width: 1199px) {
    .hero-content {
      padding: 6rem 4rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 20vw;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 6vh;
    }
  }
  
  @media only screen and (orientation: portrait) and (min-width: 992px) and (max-width: 1199px) {
    .new-hero {
      height: 100vh;
      background: url(../images/hero-1.png);
      background-position: left 45% top 50%;
      background-size: cover;
    }
  
    .hero-content {
      padding: 30rem 1rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 30vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 6vh;
    }
  }
  
  /* Tablet 768px orientation landscape || potrait */
  
  @media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 991px) {
    .hero-content {
      padding: 5rem 2rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 22vw;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 9vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 6vh;
    }
  }
  
  @media only screen and (orientation: portrait) and (min-width: 768px) and (max-width: 991px) {
    .new-hero {
      height: 100vh;
      background: url(../images/hero-1.png);
      background-position: left 45% top 50%;
      background-size: cover;
      align-items: center;
      justify-content: center;
    }
  
    .hero-content {
      padding: 10rem 0 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 30vw;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 6vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 8vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 6vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 5vh;
    }
  }
  
  /* Mobile large 426px orientation landscape || potrait */
  
  @media only screen and (orientation: landscape) and (min-width: 426px) and (max-width: 767px) {
    .hero-content {
      padding: 5rem 2rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 25vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 8vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 10vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 8vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 7vh;
    }
  }
  
  @media only screen and (orientation: portrait) and (min-width: 426px) and (max-width: 767px) {
    .new-hero {
      height: 100vh;
      background: url(../images/hero-1.png);
      background-position: left 40% top 50%;
      background-size: cover;
      align-items: center;
      justify-content: center;
    }
  
    .hero-content {
      padding: 10rem 0 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 37vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 5vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 7vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 5vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 4vh;
    }
  }
  
  /* Mobile medium 300 orientation landscape || potrait */
  
  @media only screen and (orientation: landscape) and (min-width: 301px) and (max-width: 425px) {
    .hero-content {
      padding: 10rem 4rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 25vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 13vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 10vh;
    }
  }
  
  @media only screen and (orientation: portrait) and (min-width: 301px) and (max-width: 425px) {
    .new-hero {
      height: 100vh;
      background: url(../images/hero-1.png);
      background-position: left 45% top 50%;
      background-size: cover;
      align-items: center;
      justify-content: center;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 37vw;
    }
  
    .hero-logo-extras-section .hero-logo-extras {
      gap: 15px;
      margin-top: 1rem;
      padding: 3px;
      border-radius: 3px;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 3vh;
      max-height: 3vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 3vh;
      max-height: 5vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 3vh;
      max-height: 3vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 2vh;
      max-height: 2vh;
    }
  }
  
  /* Mobile small under 300px orientation landscape || potrait */
  
  @media only screen and (orientation: landscape) and (max-width: 300px) {
    .hero-content {
      padding: 10rem 4rem 0 0;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 25vw;
    }
  
    .hero-logo-extras-section {
      padding: 0.5rem 1rem 0 0;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 4vh;
      max-height: 13vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 4vh;
      max-height: 11vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-four img {
      min-height: 3vh;
      max-height: 10vh;
    }
  }
  
  @media only screen and (orientation: portrait) and (max-width: 300px) {
    .new-hero {
      height: 100vh;
      background: url(../images/hero-1.png);
      background-position: left 40% top 50%;
      background-size: cover;
      align-items: center;
      justify-content: center;
    }
  
    .hero-logo-section .logo-first {
      min-width: 10vw;
      max-width: 20vw;
    }
  
    .hero-logo-extras-section .hero-logo-extras {
      gap: 15px;
      margin-top: 1rem;
      padding: 3px;
      border-radius: 3px;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-first img {
      min-height: 3vh;
      max-height: 3vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-second img {
      min-height: 3vh;
      max-height: 5vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 3vh;
      max-height: 3vh;
    }
  
    .hero-logo-extras-section .hero-logo-extras .item-logo-extra-third img {
      min-height: 2vh;
      max-height: 2vh;
    }
  }