:root {
    --navy:    #0B405B;
    --navy2:   #155575;
    --blue:    #21749F;
    --accent:  #4AA4D2;
    --pale:    #BED9E9;
    --bg-soft: #F4FBFF;
    --white:   #ffffff;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif;
    color: var(--navy);
    background: #fff;
    overflow-x: hidden;
  }

  /* ── HEADER ─────────────────────────────────────────────── */
  header {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 25px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 28px;
    width: 480px;
  }

  nav { display: flex; align-items: center; gap: 24px; }

  nav a {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: var(--navy);
    transition: opacity .2s;
    line-height: 120.926%; /* 18.139px */
    padding: 15px 8px 14px 8px;
  }

  nav a:hover { opacity: 0.6; }

  nav a.active {
    background: var(--navy);
    color: #fff;
    padding: 15px 20px 14px 20px;
    border-radius: 16px;
  }

  /* ── HERO ────────────────────────────────────────────────── */
  section {
    max-width: 1920px;
    margin: 0 auto;
  }
  .hero {
    position: relative;
    background: url(img/big-bg.png);
    width: 100%;
    height: 1024px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    text-align: center;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 280px;
  }

  .hero-badge {
    gap: 8px;
    border-radius: 18.5px;
    margin-bottom: 30px;
    width: 434px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #BEDCEB;
    background: rgba(74, 164, 210, 0.15);
    visibility: hidden;
  }

  .hero-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }

  .hero-badge span {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--navy);
  }

  .hero-logo {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .hero-headline {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--navy);
    margin-top: 72px;
    margin-bottom: 61px;
    letter-spacing: -1.44px;
  }

  .hero-sub {
    color: var(--navy);
    max-width: 582px;
    margin-bottom: 54px;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: -0.48px;
  }

  .hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .btn-primary {
    background: var(--navy);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 22px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    width: 227px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.48px;
    transition: opacity .2s, transform .2s;
  }

  .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }

  .btn-outline {
    background: transparent;
    color: var(--navy);
    font-size: 16px;
    font-weight: 700;
    border-radius: 22px;
    cursor: pointer;
    text-decoration: none;
    width: 201px;
    height: 61px;
    box-shadow: inset 0 0 0 1px var(--blue);
    letter-spacing: -0.48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
  }

  .btn-outline:hover { background: rgba(33,116,159,0.06); transform: translateY(-1px); }

  /* ── SECTIONS COMMON ─────────────────────────────────────── */

  .container {
    max-width: 1188px;
    margin: 0 auto;
    padding: 0;
    z-index: 1;
    position: relative;
  }
  .container.contact-inner {
    max-width: 1002px;
  }

  .section-header {
    text-align: center;
    margin-bottom: 60px;
  }

  .section-title {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--navy);
    margin-bottom: 16px;
  }

  .section-sub {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: var(--navy);
    max-width: 548px;
    margin: 0 auto;
  }

  /* ── HISTORY ─────────────────────────────────────────────── */
  #about {     
    background: #fff;
    padding: 82px 0 0;
    box-sizing: border-box;
    height: 1299px;
    position: relative;
  }


  .tl-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 52px;
    pointer-events: all;
    position: relative;
  }

  /* connecting line behind dots */
  .tl-row::after {
    content: '';
    position: absolute;
    top: 72px; /* year height + gap + half dot */
    left: calc(12.5% - 1px);
    right: calc(12.5% - 1px);
    height: 1px;
    background: #A4CFE9;
    z-index: 0;
  }

  .tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: opacity .3s;
    user-select: none;
  }
  .tl-item:not(.tl-active) .tl-year-label { opacity: 0.3; }
  .tl-item:hover:not(.tl-active) .tl-year-label { opacity: 0.7; }
  .tl-item.tl-active .tl-dot-wrap {
    background-image: url("data:image/svg+xml,%3Csvg width='51' height='51' viewBox='0 0 51 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f_124_54)'%3E%3Ccircle cx='25.1847' cy='25.1845' r='13.0689' transform='rotate(90 25.1847 25.1845)' fill='%234AA4D2' fill-opacity='0.5'/%3E%3C/g%3E%3Ccircle cx='25.185' cy='25.1833' r='7.85672' transform='rotate(90 25.185 25.1833)' fill='%234AA4D2'/%3E%3Ccircle cx='25.185' cy='25.1833' r='10.2798' transform='rotate(90 25.185 25.1833)' stroke='%234AA4D2' stroke-opacity='0.25' stroke-width='4.84625'/%3E%3Cdefs%3E%3Cfilter id='filter0_f_124_54' x='9.91821e-05' y='7.62939e-06' width='50.3692' height='50.3691' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='6.05781' result='effect1_foregroundBlur_124_54'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
    transform: scale(1.2);
  }
  .tl-year-label {
    font-size: 32px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 20px;
    transition: color .3s;
    line-height: 28.354px;
    letter-spacing: -0.96px;
  }

  .tl-dot-wrap {
    position: relative;
    width: 51px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg width='51' height='51' viewBox='0 0 51 51' fill='none' opacity='0.3' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f_124_54)'%3E%3Ccircle cx='25.1847' cy='25.1845' r='13.0689' transform='rotate(90 25.1847 25.1845)' fill='%234AA4D2' fill-opacity='0.5'/%3E%3C/g%3E%3Ccircle cx='25.185' cy='25.1833' r='7.85672' transform='rotate(90 25.185 25.1833)' fill='%234AA4D2'/%3E%3Ccircle cx='25.185' cy='25.1833' r='10.2798' transform='rotate(90 25.185 25.1833)' stroke='%234AA4D2' stroke-opacity='0.25' stroke-width='4.84625'/%3E%3Cdefs%3E%3Cfilter id='filter0_f_124_54' x='9.91821e-05' y='7.62939e-06' width='50.3692' height='50.3691' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='6.05781' result='effect1_foregroundBlur_124_54'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
  }
  .tl-item:not(.tl-active) .tl-dot-wrap::after {
     content: '';
     width: 15.713px;
    height: 15.713px;
    background: #C9E4F1;
    border-radius: 50%;
  }
    .tl-content-area {
    margin-top: 70px;
    max-width: 980px;
    pointer-events: none;
  }

  .tl-content-panel {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease;
    position: absolute;
    width: 980px;
  }
.tl-content-panel::before {
  position: absolute;
  content: '';
  left: -30px;
  right: -30px;
  bottom: -30px;
  top: -30px;
  background: rgba(255, 255, 255, 0.7);
  mask-image:
    linear-gradient(to right,  transparent, black 30px, black calc(100% - 30px), transparent),
    linear-gradient(to bottom, transparent, black 30px, black calc(100% - 30px), transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right,  transparent, black 30px, black calc(100% - 30px), transparent),
    linear-gradient(to bottom, transparent, black 30px, black calc(100% - 30px), transparent);
  -webkit-mask-composite: source-in;
  pointer-events: none;
  z-index: -1;
}
  .tl-content-panel.tl-panel-active {
    opacity: 1;
    transform: translateY(0);
    position: static;
  }

  .tl-content-panel p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--navy);
    letter-spacing: -0.48px;
    /* max-width: 392px; */
  }
  .tl-content-panel strong {
    font-weight: 700;
  }
  .img-content-area {
    position: absolute;
    bottom: 0;
    z-index: 0;
}

.img-content-area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);

  pointer-events: none;
}

.img-content-area img.img-active {
  opacity: 1;
  transform: scale(1);
  position: relative; /* чтобы блок не схлопывался */
  pointer-events: auto;
}

  /* ── OPERATIONS ──────────────────────────────────────────── */
  #operations {
    position: relative;
    overflow: hidden;
    padding: 15px 0 122px;
  }
  #operations .section-header {
    margin-bottom: 92px;
  }

  .ops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
    max-width: 1382px;
    margin: 0 auto;
    height: 659px;
    position: relative;
    z-index: 1;
  }

  .ops-card {
    position: relative;
    cursor: pointer;
    transition: background .3s;
    padding: 52px 0 0 34px;
  }
  .ops-grid >:nth-of-type(1) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='659' viewBox='0 0 330 659' fill='none'%3E%3Cpath d='M0 0L329.714 25.3462V608.308L0 659V0Z' fill='%230B405B'/%3E%3C/svg%3E");

  }
  .ops-grid >:nth-of-type(2) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='659' viewBox='0 0 330 659' fill='none'%3E%3Cpath d='M0 0L329.714 25.3462V608.308L0 659V0Z' fill='%23155575'/%3E%3C/svg%3E");
  }
  .ops-grid >:nth-of-type(3) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='659' viewBox='0 0 330 659' fill='none'%3E%3Cpath d='M0 0L329.714 25.3462V608.308L0 659V0Z' fill='%2321749F'/%3E%3C/svg%3E");  }
  .ops-grid >:nth-of-type(4) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='659' viewBox='0 0 330 659' fill='none'%3E%3Cpath d='M0 0L329.714 25.3462V608.308L0 659V0Z' fill='%234AA4D2'/%3E%3C/svg%3E");
  }

  .ops-card:last-child { border-right: none; }

  .ops-card:hover { background: rgba(255,255,255,0.07); }

  .ops-card.active, .ops-card:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='659' viewBox='0 0 330 659' fill='none'%3E%3Cpath d='M0 0L329.714 25.3462V608.308L0 659V0Z' fill='%23fffff'/%3E%3C/svg%3E");   
}
  .ops-card.active::after, .ops-card:hover::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 779px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='779' viewBox='0 0 450 779' fill='none'%3E%3Cg filter='url(%23filter0_d_124_88)'%3E%3Cpath d='M72 60L401.714 85.3462V668.308L72 719V60Z' fill='url(%23paint0_linear_124_88)' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_124_88' x='0' y='0' width='449.714' height='779' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-12'/%3E%3CfeGaussianBlur stdDeviation='30'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.0442482 0 0 0 0 0.249315 0 0 0 0 0.356731 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_124_88'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_124_88' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_124_88' x1='401.714' y1='389.5' x2='72' y2='389.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    top: -60px;
    left: -72px;
    z-index: -1;
}

  .ops-icon {
    width: 55px;
    height: 55px;
  }
  .ops-card.active .ops-icon, .ops-card:hover .ops-icon {
    width: 34px;
    height: 34px;
  }
  .ops-card.active .ops-icon path, .ops-card:hover .ops-icon path {
    fill: #21749F;
  }

  .ops-icon svg { width: 100%; height: 100%; }

  .ops-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 34px;
    margin-bottom: 10px;
    margin-top: 26px;
    max-width: 225.85px;
    height: 68px;
  }
  .ops-link {
    color: #0B405B;
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 215.385% */
    letter-spacing: -0.39px;
    border-radius: 15.847px;
    border: 0.36px solid #21749F;
    width: 144.788px;
    height: 43.941px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    display: none;
  }
  .ops-card.active .ops-link, .ops-card:hover .ops-link {
    display: flex;
  }

  .ops-card.active:nth-child(1) .ops-title, .ops-card:hover:nth-child(1) .ops-title { color: var(--navy); }
  .ops-card.active:nth-child(2) .ops-title, .ops-card:hover:nth-child(2) .ops-title { color: var(--navy2); }
  .ops-card.active:nth-child(3) .ops-title, .ops-card:hover:nth-child(3) .ops-title { color: var(--blue); }
  .ops-card.active:nth-child(4) .ops-title, .ops-card:hover:nth-child(4) .ops-title { color: var(--accent); }

  .ops-card:not(.active) .ops-title {
    color: #fff;
    margin-top: 401px;
  }
  .ops-card.active .ops-title, .ops-card:hover .ops-title  {
      margin-top: 26px;
      color: #fff;
  } 

  .ops-desc {
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: var(--navy);
    opacity: 0;
    max-height: 0;
    display: none;
    overflow: hidden;
    transition: opacity .3s, max-height .4s;
    max-width: 263.262px;
  }

  .ops-card:hover .ops-desc,
  .ops-card.active .ops-desc {
    opacity: 1;
    max-height: 400px;
    display: block;
  }

  .ops-desc .intro {
    font-weight: 600;
  }

  /* ── TEAM ────────────────────────────────────────────────── */
  #team {
    background: #fff;
    padding: 0;
    position: relative;
    z-index: -1;
  }

  #team::before {
    content: '';
    position: absolute;
    bottom: 0;
    background: url('img/bg-team-big.png');
    width: 100%;
    height: 1886.689px;
    background-size: cover;
  }
  #team .section-header {
    position: relative;
    margin-bottom: 70px;
  }
  #team .section-header .section-title {
      margin-bottom: 39px;
  }
  #team .section-header .section-sub {
      max-width: 437.555px;
  }
  
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 23px;
    position: relative;
    z-index: 1;
    max-width: 851px;
    margin: 0 auto;
  }

  .team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(157deg, #FFF 0%, rgba(255, 255, 255, 0.00) 47.91%, #FFF 100%);
    width: auto;
    height: 590px;
    padding-top: 60px;
    box-sizing: border-box;
    margin-bottom: 90px;
  }
  .team-card::after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='414' height='5' viewBox='0 0 414 5' fill='none'%3E%3Cpath d='M0 0H413.391L0 4.9375V0Z' fill='%230B405B'/%3E%3C/svg%3E");
    width: 100%;
    height: 5px;
    bottom: -5px;
  }

  .team-photo {
    width: 100%;
    margin-bottom: 0;
    position: absolute;
    top: -88px;
    height: 431px;
    left: 0;
    right: 0;
  }
   .team-photo img {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    object-fit: contain;
   }

  /* Photo silhouettes */

  .team-info {
    width: 100%;
    padding: 0;
    text-align: center;
    position: relative;
    font-family: 'adineue PRO Cyr', sans-serif;
  }

  .team-name {
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: 1.44px;
    line-height: 99.92%; 
  }

  .team-role {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 28px;
    line-height: 99.92%; /* 11.99px */
    letter-spacing: 0.72px;
  }

  .team-bio {
    font-size: 15px;
    font-weight: 300;
    line-height: 110.92%; /* 13.989px */
    letter-spacing: 0.84px;
    color: var(--navy);
    text-align: center;
    max-width: 338.019px;
    margin: 0 auto;
  }

  /* ── FOOTER ──────────────────────────────────────────────── */
  #contact {
    background: #fff;
    padding: 100px 0 0;
    position: relative;
    overflow: hidden;
  }

  #contact::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
  }

  .contact-inner {
    position: relative;
    z-index: 1;
  }

  .contact-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 48px;
  }

  .contact-left h2 {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--navy);
    margin-bottom: 14px;
  }

  .contact-left p {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: var(--navy);
    max-width: 438px;
  }

  .footer-nav {
    display: flex;
    gap: 24px;
    padding-top: 8px;
  }

  .footer-nav a {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--navy);
    text-decoration: none;
    transition: opacity .2s;
  }

  .footer-nav a:hover { opacity: 0.6; }

  .contact-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 60px;

  }

  .contact-card {
    background: var(--bg-soft);
    border-radius: 25px;
    padding: 20px 22px;
    min-width: 185px;
    flex: 1;
    transition: all 0.3s ease;
  }

  .contact-card:hover {
    background: #0B405B;
  }

  .contact-card-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.4;
    transition: all 0.3s ease;
  }

  .contact-card a {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--navy);
    text-decoration: none;
    display: block;
    transition: opacity .2s;
    transition: all 0.3s ease;
  }
  .contact-card:hover .contact-card-title, .contact-card:hover a{
    color: #fff;
  }

  .contact-card a:hover { opacity: 0.65; }

  .footer-bar {
    border-top: 1px solid var(--pale);
    padding: 28px 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--navy);
  }

  .footer-logo .logo-bars { display: flex; gap: 2px; align-items: center; }
  .footer-logo .logo-bars span { display: block; width: 2.5px; height: 12px; border-radius: 1px; }
  .footer-logo .logo-bars span:nth-child(1) { background: #0B4059; }
  .footer-logo .logo-bars span:nth-child(2) { background: #155576; }
  .footer-logo .logo-bars span:nth-child(3) { background: #21749F; }
  .footer-logo .logo-bars span:nth-child(4) { background: #4AA4D1; }

  .footer-copy {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #a5bfce;
  }
  .team-desktop { display: grid; }
  .team-mobile  { display: none; }

  /* ── ACTIVE NAV SCROLL ───────────────────────────────────── */
  .content {
  max-width: 1920px;
  margin: 0 auto 0;
  position: relative;
  z-index: 2;
  padding: 157px 0 88px 0;
  animation: fadeUp 0.9s 0.3s ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content__title {
  text-align: center;
  margin-bottom: 55px;
  max-width: 502px;
  margin-left: auto;
  margin-right: auto;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 100% */
  letter-spacing: -1.44px;
}

.content__body {
  margin: 0 auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 150% */
  letter-spacing: -0.48px;
  max-width: 1258px;
}

.content__body p {
  margin-bottom: 24px;
  text-align: left;
}

.content__body .goal {
  font-weight: 400;
  font-style: italic;
}

.content__body h3 {
  margin-top: 40px;
  margin-bottom: 0;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.96px;
}

.content__body h4 {
  margin-top: 40px;
  margin-bottom: 22px;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.6px;
}
.content::before {
    content: '';
    position: absolute;
    bottom: 0;
    background: url(img/bg-team-big.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
}
.img-small {
  display: none;
}
@media (max-width: 1440px) {
  .img-small {
    display: block;
  }
  .img-large {
    display: none;
  }
  section {
    max-width: 1440px;
  }
  .hero {
    background: url(img/bg.png);
    height: 1024px;
  }
  .hero-content {
    margin-top: 200px;
}
  #about .container {
    margin-top: 0;
  }

  #team::before {
    background: url(img/bg-team.png);
  }
  .content::before {
    background: url(img/bg-content.png);
    background-size: cover;
  }
    
}