/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 version
*/

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary-bg: rgb(243, 247, 249);
  --white: rgb(255, 255, 255);
  --blue: rgb(56, 182, 255);
  --dark-gray: rgb(36, 36, 36);
  --black: rgb(0, 0, 0);
  --footer-gray-bg: rgb(23, 24, 24);
  --dark-blue: rgb(23, 80, 113);
  --violet: #cb6ce6;

  --small-mobile-titles-font: 1.3rem;
  --small-mobile-text-font: 1rem;
  --small-mobile-button-font: 0.9rem;

  --medium-mobile-title-font: 1.6rem;
  --medium-mobile-text-font: 1.4rem;
  --medium-mobile-button-font: 1.3rem;

  --avarage-tablets-title-font: 2.7rem;
  --avarage-tablets-text-font: 2.3rem;
  --avarage-tablets-button-font: 1.9rem;

  --large-tablets-title-font: 3.4rem;
  --large-tablets-text-font: 3rem;
  --large-tablets-button-font: 2.5rem;

  --small-desktop-title-font: 1.9rem;
  --small-desktop-text-font: 1.4rem;
  --small-desktop-button-font: 1.3rem;
}

html {
  overflow-x: hidden !important;
}

body {
  overflow: hidden !important;
}

.blue-text {
  color: var(--blue);
}

.white-text {
  color: var(--white);
}

.violet-text {
  color: var(--violet);
}

.title-uppercase {
  text-transform: uppercase;
}

article > p,
p,
span,
li {
  font-family: "Montserrat", sans-serif;
  font-size: var(--small-mobile-text-font) !important;
}

h1,
h1 > .title-uppercase,
h1 > .blue-text,
h1 > .white-text,
h2,
h2 > .title-uppercase,
h2 > .blue-text,
h2 > .white-text,
h3,
h3 > .title-uppercase,
h3 > .blue-text,
h3 > .white-text,
h2 > span,
h3 > span,
h2 > span > span {
  font-family: "Montserrat", sans-serif;
  font-size: var(--small-mobile-titles-font) !important;
  font-weight: 500;
}

.hero-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* margin top need to be same height as navbar-mobile */
  margin-top: 70px;
  height: 50vh;
  background-image: url(../media/about-us/images/zespol-ekspertow-ai.png);
  background-position: center;
  background-size: cover;
  padding: 20px;
}

.team-member {
  background-color: black !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--dark-blue);
}

.hero-content h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-content .separator,
#about-us-intro .wrapper .separator {
  height: 2px;
  width: 111px;
  background-color: var(--blue);
  margin: 10px;
}

#about-us-intro .wrapper .separator {
  width: 222px;
}

#about-us-intro .wrapper,
#about-us-intro {
  text-align: center;
  background-color: var(--primary-bg) !important;
}

#founders .wrapper {
  margin-top: 30px;
}

#about-us-intro {
  padding: 15px 5px;
}

.hero-content p {
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#team-section > div > div.text-container > p > span {
  color: var(--white) !important;
}

.text-container {
  text-align: left !important;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100vw;
  overflow-x: hidden;
  background-color: var(--black);
}

/* GLOBAL CONTAINER SETTINGS ON MOBILE */
#founders .wrapper,
#history .wrapper,
#ai-future .wrapper,
#team-section .wrapper,
#about-us-intro .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  padding: 15px 10px;
  overflow-x: hidden;
  background-color: var(--primary-bg);
  overflow: hidden;
  gap: 10px;
}

#team-section,
#team-section .wrapper {
  background-color: var(--black);
  overflow: hidden;
}

#team-section > div > div.text-container > p > span {
  color: var(--black);
}

#founders h2 {
  margin-bottom: 10px;
}

#founders,
#founders .wrapper {
  background-color: var(--white) !important;
}

.founder-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 90vw;
  background-color: var(--white);
  padding: 5px;
  gap: 15px;
  overflow: hidden;
  margin-bottom: 30px;
  padding-bottom: 1px !important;
}

/* TODO: Desktop only can habe this effect, on mobile its causing troubles. */
.founder-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
    0 6px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.15);
  /* transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; */
}

/* .founder-card:hover {
   transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2); 
} */

.founder-card .frame {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#000000),
    to(#555555)
  );
  background: -o-linear-gradient(left, #000000, #555555);
  background: linear-gradient(to right, #000000, #555555);
  width: 100%;
  border-radius: 15px;
}

.founder-image img {
  position: relative;
  width: 100%;
  bottom: -5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.founder-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  gap: 3px;
  /* border-bottom: solid 1px var(--blue); */
  padding-bottom: 5px;
  /* width: 66%; */
}

.founder-info h3 {
  font-size: var(--small-mobile-titles-font);
}

/* All need to be in one line! */
.founder-info p {
  font-size: 0.7rem !important;
}

.founder-contact {
  font-family: "Montserrat", "sans-serif";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.founder-contact .phone,
.founder-contact .mail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.founder-contact .phone a,
.founder-contact .mail a {
  text-decoration: none;
  color: var(--black);
  font-size: 0.8rem !important;
}

.founder-contact img {
  width: 30px;
  margin-right: 5px;
}

.founder-social img {
  width: 30px;
}

.btn-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  font-family: "Montserrat", sans-serif;
  background-color: var(--blue);
  text-decoration: none;
  width: auto;
  padding: 10px;
  color: var(--white);
  border-radius: 25px;
  height: 30px;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

/* buttons not in the card-member */
#ai-future > div > .btn-primary {
  margin: 10px 0px;
}

body > main > .btn-primary {
  margin-bottom: 30px;
}

/* text in buttons */
.btn-primary > span {
  font-size: var(--small-mobile-button-font) !important;
}

#history,
#history .wrapper {
  font-size: var(--small-mobile-text-font);
  background-color: var(--black);
  gap: 25px;
}

.history-header {
  width: 100%;
}

.history-header h2 {
  font-size: var(--small-mobile-titles-font);
  margin-bottom: 10px;
}

.history-header p {
  font-size: var(--small-mobile-titles-font);
  color: var(--white);
}

.history-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}

.history-video {
  width: 100%;
  overflow: hidden;
}

.history-video video {
  width: 100%;
}

.history-text {
  color: var(--white);
}

.history-team {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 25px;
  color: var(--white);
}

.history-team img {
  width: 300px;
}

.history-expertise {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 25px;
  color: var(--white);
}

.expertise-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

.expertise-item img {
  width: 85px;
}

#ai-future,
#ai-future .wrapper {
  background-color: black !important;
  color: white;
  font-size: var(--small-mobile-text-font);
  gap: 25px;
}

#history,
#history .wrapper {
  background-color: black !important;
}

.text-container h2 {
  margin-bottom: 10px;
}

.ai-industries {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.industry-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.industry-item img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.ai-description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

#team-section,
#team-section .wrapper {
  background-color: var(--black);
  overflow: hidden;
}

.text-container {
  text-align: center;
}

.team-members {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 15px;
  gap: 25px;
  overflow: hidden;
}

.team-member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  position: relative;
  background-color: var(--primary-bg);
  overflow: hidden;
}

.image-container {
  position: relative;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 3;
  overflow: hidden;
}

/* .background-frame {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgb(90, 9, 122),
    rgb(12, 78, 177)
  ) !important;
  z-index: -1;
} */

.background-frame {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgb(0, 0, 0)),
    to(rgb(0, 0, 0))
  ) !important;
  background: -o-linear-gradient(left, rgb(0, 0, 0), rgb(0, 0, 0)) !important;
  background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0)) !important;
  z-index: -1;
}

.image-container img {
  width: 100%;
}

.info-container {
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.info-container img {
  /* width: 50px; */
  height: 70px;
  margin-right: 3px;
}

.info-container .name {
  width: 100%;
}

.info-container .member-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.info-container a img {
  width: 28px;
  height: 28px;
  -webkit-transform: translateX(-2px);
  -ms-transform: translateX(-2px);
  transform: translateX(-2px);
}

.team-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.team-logo img {
  width: 35px;
}

/* iPhone 6/7/8 Portrait */
@media (min-width: 375px) and (orientation: portrait) {
  article > p,
  p,
  span,
  li {
    font-size: var(--medium-mobile-text-font) !important;
  }

  h1,
  h1 > .title-uppercase,
  h1 > .blue-text,
  h1 > .white-text,
  h2,
  h2 > .title-uppercase,
  h2 > .blue-text,
  h2 > .white-text,
  h3,
  h3 > .title-uppercase,
  h3 > .blue-text,
  h3 > .white-text,
  h2 > span,
  h3 > span,
  h2 > span > span {
    font-size: var(--medium-mobile-title-font) !important;
  }

  .founder-info p {
    margin-top: 5px;
    font-size: var(--small-mobile-button-font) !important;
  }

  /* all must stay in 1 lane */
  .founder-contact .phone a,
  .founder-contact .mail a {
    font-size: 1rem !important;
  }

  .founder-contact img {
    width: 35px;
    margin-right: 8px;
  }

  .founder-social img {
    width: 35px;
  }

  #history {
    gap: 30px;
  }

  #ai-future {
    gap: 50px;
  }

  .ai-industries {
    gap: 50px;
  }

  .history-team {
    gap: 30px;
  }

  /* four guys table - TODO: here might be a problem, test on mobile!*/
  .history-team img {
    /* width: 100%; */
    margin: 20px 0px;
  }

  .history-expertise {
    gap: 30px;
  }

  .expertise-item {
    gap: 20px;
  }

  /* blue icons above members */
  .expertise-item img {
    margin-top: 10px;
    width: 100px;
  }

  /* text in buttons */
  .btn-primary > span {
    font-size: var(--medium-mobile-button-font) !important;
    padding: 10px;
  }

  /* mini blue icon in the second container with members */
  /* last name must be in 1 lane */
  .info-container img {
    width: 85px;
    height: 85px;
    margin-right: 10px;
  }

  /* these white small logos on left */
  .industry-item img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }

  .info-container {
    margin-bottom: 20px;
  }

  /* 'U' on the same end of member's cars */
  .team-logo img {
    width: 45px;
  }

  /* edge-case in button in main card */
  #founders > div > a > span {
    font-size: 1rem !important;
  }
}

@media (orientation: landscape) {
  .hero-content {
    height: calc(100vh - 70px);
  }

  .founder-card {
    width: 50%;
  }

  h2,
  #history > div.history-header > p {
    text-align: center;
  }

  .history-content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .history-video {
    width: 50%;
  }

  .team-member {
    width: 50%;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  /* GLOBAL CONTAINER SETTINGS ON MOBILE */
  #founders .wrapper,
  #history .wrapper,
  #ai-future .wrapper,
  #team-section .wrapper,
  #about-us-intro .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    padding: 30px 40px;
    overflow-x: hidden;
    background-color: var(--primary-bg);
    overflow: hidden;
    gap: 30px;
  }

  article > p,
  p,
  span,
  li {
    font-size: var(--avarage-tablets-text-font) !important;
  }

  h1,
  h1 > .title-uppercase,
  h1 > .blue-text,
  h1 > .white-text,
  h2,
  h2 > .title-uppercase,
  h2 > .blue-text,
  h2 > .white-text,
  h3,
  h3 > .title-uppercase,
  h3 > .blue-text,
  h3 > .white-text,
  h2 > span,
  h3 > span,
  h2 > span > span {
    font-size: var(--avarage-tablets-title-font) !important;
  }

  .hero-content {
    height: 70vh;
  }

  .founder-card {
    width: 77%;
    padding: 40px;
  }

  .btn-primary {
    height: 55px;
  }

  .btn-primary span {
    font-size: var(--avarage-tablets-button-font) !important;
  }

  .btn-primary img {
    width: 45px !important;
  }

  .founder-info p {
    font-size: 1.5rem !important;
  }

  .founder-contact {
    gap: 5px;
  }

  .founder-contact .phone,
  .founder-contact .mail {
    font-size: 1.8rem !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .founder-contact .phone a,
  .founder-contact .mail a {
    font-size: 1.6rem !important;
  }

  .founder-contact img,
  .founder-social img {
    width: 60px;
    height: 60px;
  }

  .history-team img {
    width: 444px;
  }

  .history-expertise {
    margin-top: 50px;
    gap: 65px;
  }

  .expertise-item img {
    width: 150px;
    height: 150px;
  }

  #ai-future,
  .ai-industries,
  .ai-description {
    padding-top: 30px;
  }

  #ai-future > div > a {
    margin-top: 30px;
  }

  #ai-future .text-container {
    text-align: left !important;
  }

  .ai-industries {
    gap: 60px;
  }

  .industry-item img {
    width: 100px;
    height: 100px;
    margin-right: 30px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
  }

  .industry-item img:nth-child(1) {
    width: 90px;
    height: 90px;
  }

  #team-section .wrapper {
    background-color: var(--black);
  }

  #team-section .wrapper .team-member {
    padding-top: 50px;
  }

  .team-member {
    margin-top: 30px;
    width: 100%;
    padding: 50px;
  }

  .info-container {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .info-container img {
    width: 140px;
    height: 140px;
  }

  .info-container a img {
    width: 65px;
    height: 65px;
  }

  .team-logo img {
    margin-top: 30px;
    width: 99px;
    height: 99px;
  }
}

@media (min-width: 1023.8px) and (orientation: landscape) {
  .hero-content {
    margin-top: 0px;
    height: 50vh;
    background-image: url(../media/about-us/images/zespol-ekspertow-ai-landscape.jpg);
  }

  #founders .wrapper,
  #history .wrapper,
  #ai-future .wrapper,
  #team-section .wrapper {
    max-width: 1000px !important;
    overflow: hidden;
    margin: 0 auto;
  }

  #founders .wrapper,
  #founders {
    background-color: var(--primary-bg);
  }

  #founders .wrapper {
    margin-top: 50px;
  }

  #founders,
  #history,
  #ai-future,
  #team-section {
    width: 100vw;
  }

  article > p,
  p,
  span,
  li {
    font-size: var(--small-desktop-text-font) !important;
  }

  h1,
  h1 > .title-uppercase,
  h1 > .blue-text,
  h1 > .white-text,
  h2,
  h2 > .title-uppercase,
  h2 > .blue-text,
  h2 > .white-text,
  h3,
  h3 > .title-uppercase,
  h3 > .blue-text,
  h3 > .white-text,
  h2 > span,
  h3 > span,
  h2 > span > span {
    font-size: var(--small-desktop-title-font) !important;
  }

  .hero-content .separator {
    width: 222px;
  }

  #about-us-intro .wrapper .separator {
    width: 333px;
  }

  #founders .wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .founder-card {
    width: 48%;
    padding: 50px;
    padding-bottom: 25px !important;
    cursor: pointer;
    height: 780px;
  }

  .founder-card:hover {
    -webkit-transform: translateY(-5px) !important;
    -ms-transform: translateY(-5px) !important;
    transform: translateY(-5px) !important;
    -webkit-box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3),
      0 10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2);
  }

  .founder-info h3 span {
    font-size: var(--small-desktop-title-font) !important;
  }

  /* All need to be in one line! */
  .founder-info p {
    font-size: 1.1rem !important;
  }

  .founder-contact .phone a,
  .founder-contact .mail a {
    font-size: 1.1rem !important;
  }

  .founder-contact img {
    width: 35px;
    height: 35px;
    margin-right: 7px;
  }

  .founder-social img {
    width: 35px;
    height: 35px;
  }

  .btn-primary {
    height: 40px;
  }

  .btn-primary img {
    width: 35px !important;
  }

  .btn-primary span {
    font-size: var(--small-desktop-button-font) !important;
  }

  #history .wrapper {
    gap: 30px;
  }

  #history > div > div.history-header {
    border-bottom: 1px solid var(--blue);
    padding-bottom: 10px;
  }

  #history > div > div.history-header > h2,
  #history > div > div.history-header > h2 > span {
    text-align: left !important;
  }

  .history-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .history-content .history-video {
    width: 49%;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

  .history-content .history-text {
    width: 47%;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

  .history-team {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .history-team .team-image-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    width: 48%;
  }

  .history-team img {
    width: 80%;
  }

  .history-team p {
    width: 48%;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .history-expertise {
    gap: 40px;
    margin: 40px 0px;
  }
  .expertise-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  #ai-future .wrapper {
    gap: 40px;
  }

  .ai-industries {
    gap: 30px;
  }

  .ai-industries img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
  }

  .team-members {
    gap: 50px;
  }

  .team-member {
    background-color: black;
    color: white;
  }

  .image-container {
    width: 100%;
    left: 0%;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center;
  }

  .info-container img {
    width: 85px;
    height: 85px;
  }

  .member-info a img {
    width: 35px;
    height: 35px;
  }

  .mini-user-card {
    width: 260px;
    height: 440px;
    margin-right: 10px;
  }

  .team-member {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  /* in the middle, same width as .mini-user-card! */
  .team-member .description {
    width: calc(98% - 260px - 10px);
  }

  .team-logo img {
    width: 65px;
  }

  .info-container {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  #ai-future > div > .btn-primary {
    margin: 30px 0px;
  }

  body > main > .btn-primary {
    margin: 50px;
  }

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

  /* .image-container {
    width: 100%;
    left: 0;
    transform: translateX(0);
    align-self: center;
    justify-self: center;
  }

  .info-container img {
    width: 85px;
    height: 85px;
  }

  .member-info a img {
    width: 35px;
    height: 35px;
  }

  .team-member {
    width: 100%;
    display: block;
  }

  .mini-user-card {
    float: left;
    width: 250px;
    height: 410px;
    margin: 0px 15px 15px 0;
    margin: 35px !important;
  }

  .team-member::after {
    content: "";
    display: block;
    clear: both;
  }

  .team-member .description {
    width: auto;
    margin: 10px;
  } */
}