@font-face {
    font-family: "PoppinsBold";
    src: url('fonts/Poppins-Medium.ttf') format("truetype");
}
@font-face {
    font-family: "Poppins";
    src: url('fonts/Poppins-Light.ttf') format("truetype");
}

:root {
  --magenta: #ed174f;
  --blue: #074a8e;
  --white: #fff;
  --max:1240px
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color: #000;
  background: #fff;
  font-family:Poppins,Arial,sans-serif;
  font-size: 16px;
  background: url('../images/mt-shape.png') no-repeat 0 180px;
}

img {
  max-width:100%;
  display:block
}

img.scroll-reveal {
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s ease,transform .7s ease
}

img.scroll-reveal.is-visible {
  opacity:1;
  transform:translateY(0)
}

@media(prefers-reduced-motion:reduce) {
  img.scroll-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
}

a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--magenta);
  text-decoration:none
}

h1 {
  font-size: 2em;
  margin:0;
  font-family: PoppinsBold;
}
h2 {
  font-size: 1.8em;
  margin:0;
  font-family: PoppinsBold;
}
h3 {
  font-size: 1.5em;
  margin:0;
}

.section-inside {
  width: 60%;
  margin: 0 auto;
}
.container {
  margin-inline:auto
}
.blue {
  font-family: PoppinsBold;
  color: var(--blue);
}
.magenta {
  font-family: PoppinsBold;
  color: var(--magenta);
}
.white {
  color: #fff;
}
.b {
  font-family: PoppinsBold; 
}
.w50 {
  position: relative;
  width: 50%;
  margin: 0 25%;
  margin-bottom: 60px;
}

.site-header {
  padding-top:20px;
  left:0;
  width: 70%;
  margin: 0 auto;  
}

.header-inner {
  height:104px;
  display:flex;
  align-items:center;
  gap:50px
}

.logo img {
  width:158px;
}

.desktop-nav {
  display:flex;
  gap:34px;
  margin-left:auto;
  background: #fff;
}

.desktop-nav a {
  padding: 10px 0
}

.self-service {
  border:1px solid rgba(255,255,255,.6);
  border-radius:8px;
  padding:12px 20px;
}

.self-service span {
  margin-left:14px
}

.menu-button {
  display:none;
  background:none;
  border:0;
}

.hero {
  display: grid;
  grid-template-columns:55% 45%;
  margin-top: 20px;
}

.hero-copy {
  position:relative;
  z-index:1;
  margin-right: 20%;
  margin-top: 60px;
}
.hero-copy p {
  margin-right: 20%;
  margin-top: 30px;
}

.hero-bottom {
  margin-top: 50px;
}

.button {
  border-radius: 6px;
  background: var(--magenta);
  color: var(--white);
  padding: 15px 20px;
  font-weight: bold;
  transition: 0.3s;
}
.button:hover {
  background: var(--blue);
  transition: 0.3s;
  color: var(--white);
}
.button-round {
  border: 1px solid #333;
  border-radius: 16px;
  transition: 0.3s;
  padding: 5px 10px;
}
.button-round:hover {
  background: var(--white);
  transition: 0.3s;
}
.button-blue {
  border-radius: 6px;
  background: var(--blue);
  color: var(--white);
  padding: 15px 20px;
  font-weight: bold;
  transition: 0.3s;
}
.button-blue:hover {
  background: var(--magenta);
  transition: 0.3s;
  color: var(--white);  
}
.hero-image-wrap {
  position:relative
}

.hero-image {
  object-fit:cover;
  top: 0;
}

.split-heading {
  display:grid;
  grid-template-columns:31% 69%;
  margin-bottom:85px
}

.why {
  margin-top: 100px;
  background: url('../images/20.png') no-repeat;  
}

.lead {
  max-width:650px;
  margin-top:32px
}

.feature-art {
  width:100%;
  object-fit:cover;
}

.feature-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px
}

.feature-list article {
  display:grid;
  align-content:start;
  gap:18px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line)
}

.feature-list article:last-child {
  border-bottom:1px solid var(--line)
}

.feature-list article>span {
  color:#777
}

.feature-list article>img {
  width:140px;
  height:140px;
  object-fit: scale-down;
}

.feature-list p {
  margin:0;
  color:#58666b
}

#audience {
    background: #f7f7fc;
    margin-top: 100px;
}
.audience {
  position:relative;
  overflow:hidden;
  padding-bottom:0
}

.audience-grid {
  display:grid;
  grid-template-columns:40% 60%;
  position:relative;
  z-index:1
}
.big-text {
  font-size: 3em;
  font-family: PoppinsBold;
  line-height: 1em;
}
.stat {
  font-size:18px;
  text-transform: uppercase;
  font-family: PoppinsBold;
  color: #fff;
}

.audience-copy {
  padding:100px 100px 0px 100px;
  background: url('../images/ketvirciai.png') no-repeat 90% 10% #1e2024; 
  color: #fff;
}
.audience-copy p {
  font-size:20px;
  letter-spacing: -0.05em;
  color: #bbb;
  width: 60%;
}
.audience-left{
  padding-top: 200px;
}

.people-art {
  width:min(900px,72vw);
  margin:35px auto -2px;
  max-height:500px;
  object-fit:contain;
  object-position:bottom
}

.reach-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding: 50px 0;
}

.reach-articles {
  padding-top:50px;
  display:grid;
  grid-template-columns:1fr 1fr;  
}
.reach-articles p {
  padding-left: 40px;
  width: 70%;
  font-size: 0.9em;
  color: #666;
}
.reach-articles .b {
 font-size: 1.1em;
 color: #000;
}

.cta {
  background: #f1e9e3;
  padding:60px;
  border-radius: 8px;
}

.cta-inner {
  position:relative;
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  gap: 2%;
}

.site-footer {
  margin-top: 50px;
  padding:90px 0 28px;
  background:#f7f7fc;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr;
  gap:10%;
  padding-bottom:70px
}

.footer-logo {
  width:150px;
  margin-bottom:24px
}

.footer-grid p {
  max-width:430px;
}

.footer-grid a {
  display:block;
  margin:10px 0;
}

.copyright {
  border-top:1px solid #bbb;
  padding-top:24px;
  color:#8fa0a6
}

@media(max-width:800px) {
.section-inside {
  width: 95%;
  margin: 0 auto;
}

  .header-inner {
    height:82px
  }

  .desktop-nav,.self-service {
    display:none
  }

  .logo img {
    width:140px
  }

  .menu-button {
    display:block;
    margin-left:auto
  }

  .menu-open .desktop-nav {
    display:flex;
    position:absolute;
    top:82px;
    left:16px;
    right:16px;
    background:var(--ink);
    padding:25px;
    flex-direction:column;
    gap:8px;
    background: #fff;
    z-index: 303;
  }

  .hero {
    display: block;
  }

  .hero-shape {
    width:80%;
    opacity:.4
  }

  .hero h1 {
    font-size:40px
  }

  .hero-copy {
    width: 100%;
  }

  .round-link {
    justify-self:start;
    width:118px;
    height:118px;
    padding:18px
  }

  .hero-image {
    height:68vw
  }

  .why {
    width: 100%;
    padding-top: 80px;
  }
  .w50 {
    width: 95%;
    margin:0 auto;
  }
  .feature-layout {
    gap:45px
  }

.feature-list {
  display:block;
}

.feature-list article {
    width: 95%;
    margin:0 auto;
}

   .audience-grid {
    display: block;
  }
  .audience-left,.audience-copy {
    padding: 20px;
  }

  .stat{
    padding-top: 20px;
  }

  .audience-copy {
    padding-top:0
  }

  .reach-grid {
    display: block;
  }
  .people-art {
    width:105vw;
    max-width:none;
    margin-left:-5vw
  }

.cta-inner {
  position:relative;
  display: block;
}

  .cta .round-link {
    left:16px;
    right:auto;
    bottom:-130px
  }

  .footer-grid {
    display: block;
  }

  .footer-grid>div:first-child {
    margin-bottom:10px
  }

}