@charset "utf-8";

main > .company-section, main > .clients-section { background: rgb(17, 17, 17); border-radius: 0px; }

main > .company-section { padding: 55px 0px 25px !important; }

.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.company-title-card, .company-mission-card { border-radius: 25px; min-height: 315px; padding: 42px; position: relative; overflow: hidden; }

.company-title-card { background: rgb(52, 32, 43); border: 1px solid rgb(97, 51, 72); }

.company-title-card > img { width: 180px; height: auto; filter: brightness(0) invert(1); margin-bottom: 26px; }

.company-title-card h2 { font: 500 clamp(30px, 3vw, 43px) / 1.12 Eesti, sans-serif; letter-spacing: -0.025em; color: rgb(255, 255, 255); }

.company-mission-card { background: rgb(33, 29, 32); border: 1px solid rgb(73, 49, 61); display: flex; flex-direction: column; justify-content: center; }

.company-mission-card p { position: relative; z-index: 1; color: rgb(228, 214, 222); font-size: 22px; line-height: 1.45; max-width: 470px; }

.company-mission-card a { color: rgb(255, 118, 173); margin-top: 25px; font-size: 18px; position: relative; z-index: 1; align-self: start; }

.company-mission-card a span { margin-left: 10px; }

.company-shape { position: absolute; right: -70px; bottom: -70px; opacity: 0.12; transform: rotate(-14deg); pointer-events: none; }

.company-shape img { max-width: none; }

main > .clients-section { padding: 28px 0px 55px; }

.clients-section h2 { font: 500 38px / 1.15 Eesti, sans-serif; color: white; letter-spacing: -0.02em; }

.client-logos { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); list-style: none; gap: 30px; margin: 26px 0px 0px; padding: 24px 20px; border-top: 1px solid rgb(74, 48, 60); border-bottom: 1px solid rgb(74, 48, 60); align-items: center; }

.client-logos li { display: grid; place-items: center; min-width: 0px; height: 100px; }

.client-logos img { width: 100%; height: 80px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.8; }

@media (max-width: 1000px) {
  .company-title-card, .company-mission-card { padding: 30px; min-height: 290px; }
  .company-mission-card p { font-size: 20px; }
  .client-logos { gap: 20px; padding: 20px 0px; }
}

@media (max-width: 760px) {
  main > .company-section { padding: 25px 0px 10px !important; }
  .company-grid { grid-template-columns: 1fr; gap: 15px; }
  .company-title-card, .company-mission-card { padding: 28px; min-height: 0px; }
  .company-title-card h2 { font-size: 32px; }
  .company-title-card > img { width: 145px; margin-bottom: 24px; }
  .company-mission-card p { font-size: 19px; }
  .company-mission-card a { font-size: 18px; margin-top: 20px; }
  main > .clients-section { padding: 24px 0px 35px; }
  .clients-section h2 { font-size: 32px; }
  .client-logos { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 15px 25px; padding: 20px 5px; margin-top: 20px; }
  .client-logos li { height: 80px; }
  .client-logos img { height: 65px; }
  .client-logos li:last-child { grid-column: 1 / -1; width: 145px; justify-self: center; }
}

.company-grid { gap: 20px; align-items: stretch; }

.company-title-card, .company-mission-card { min-height: 330px; border: 0px; border-radius: 25px; padding: 40px 55px; }

.company-title-card { background: rgb(255, 255, 255); display: flex; align-items: center; }

.company-title-card h2 { font: 500 clamp(32px, 3.65vw, 52px) / 1.19 Eesti, sans-serif; letter-spacing: -0.025em; color: rgb(0, 0, 0); position: relative; z-index: 1; }

.company-title-card > .company-lightning { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: fill; filter: none; margin: 0px; pointer-events: none; }

.company-mission-card { background: rgb(236, 235, 235); justify-content: center; padding: 55px 65px; }

.company-mission-card p { font-size: 23px; line-height: 1.2; color: rgb(47, 47, 47); max-width: 390px; font-weight: 400; }

.company-ring, .company-sphere { position: absolute; pointer-events: none; object-fit: contain; }

.company-ring { width: 240px; height: 240px; left: -32px; bottom: -8px; opacity: 0.25; }

.company-sphere { width: 145px; height: 145px; top: 3px; right: 65px; opacity: 0.65; }

@media (max-width: 1000px) {
  .company-title-card, .company-mission-card { min-height: 300px; padding: 35px; }
  .company-title-card h2 { font-size: 36px; }
  .company-mission-card p { font-size: 20px; }
  .company-sphere { width: 120px; height: 120px; right: 15px; }
}

@media (max-width: 760px) {
  .company-grid { gap: 16px; }
  .company-title-card, .company-mission-card { min-height: 265px; padding: 32px 38px; border-radius: 22px; }
  .company-title-card h2 { font-size: 35px; }
  .company-mission-card { min-height: 260px; padding: 45px 34px; }
  .company-mission-card p { font-size: 20px; max-width: 270px; }
  .company-sphere { width: 115px; height: 115px; top: -15px; right: 10px; }
  .company-ring { width: 210px; height: 210px; left: -45px; bottom: -15px; }
}

@media (max-width: 360px) {
  .company-title-card, .company-mission-card { padding: 28px; min-height: 245px; }
  .company-title-card h2 { font-size: 31px; }
  .company-mission-card p { font-size: 19px; }
}

.client-logos { background: rgb(236, 235, 235); border: 0px; border-radius: 24px; grid-template-columns: 1.15fr 0.8fr 1.2fr 1.45fr 1.1fr; gap: 32px; padding: 22px 48px; margin-top: 30px; }

.client-logos li { height: 90px; }

.client-logos img { filter: grayscale(1); opacity: 1; height: 80px; width: 100%; }

.client-logos li:first-child img { transform: scale(1.2); }

.client-logos li:nth-child(2) img { height: 85px; }

.client-logos li:nth-child(3) img { height: 65px; }

.client-logos li:nth-child(4) img { height: 65px; }

.client-logos li:nth-child(5) img { height: 70px; }

@media (max-width: 1000px) {
  .client-logos { gap: 22px; padding: 18px 30px; }
  .client-logos li { height: 75px; }
  .client-logos img { max-height: 70px; }
}

@media (max-width: 760px) {
  .client-logos { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px 30px; padding: 26px 25px; border-radius: 22px; }
  .client-logos li { height: 70px; }
  .client-logos li:first-child img { transform: scale(1.12); }
  .client-logos img { max-height: 65px; }
  .client-logos li:last-child { width: 145px; }
}

@media (min-width: 761px) {
  .client-logos li:first-child img { transform: scale(1.8); }
  .client-logos li:nth-child(2) img { transform: scale(1.3); }
}