@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

h1{
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -2px;
}



.about{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--space-10);
    gap: 0px;
    width: 100%;
    overflow-x: hidden;
    background-color: var(--white200);
    width: 100%;
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
}

.about a{
    min-height: 48px;
}


.about h1{
    padding-bottom: var(--space-4);
}

.about_cover{
    width: 100%;
    height: 320px;
    gap: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.about_cover img{
    width: 140px;
    height: 140px;
    object-fit: cover;
}

.about_profit, .about_safe, .about_feedback, .about_space{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-5);
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.about_safe{
    padding-left: 0px;
    padding-right: 0px;
}

.about-scroll {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}


.about-safe-card{
    width: 140px;
    flex-shrink: 0;
    height: 150px;
    background-color: var(--white100);
    border-radius: var(--space-4);
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-left: 0;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}
.about-safe-card + .about-safe-card{
    margin-left: -16px;
}

#about-c1{
  transform-origin: center center;
  transform: rotate(-5deg);
}

#about-c2{
  transform-origin: center center;
  transform: rotate(3deg);
}

#about-c3{
  transform-origin: center center;
  transform: rotate(-3deg);
}

#about-c4{
  transform-origin: center center;
  transform: rotate(5deg);
}

#about-c5{
  transform-origin: center center;
  transform: rotate(-5deg);
}




.about-safe-card img{
    width: 80px;
    height: 80px;
}


.profit_icon{
    width: var(--space-7);
    height: var(--space-7);
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.about-scroll::-webkit-scrollbar {
  display: none;
}
.about-scroll {
  scrollbar-width: none;
}

.about-cta{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 88px;
    display: flex;
    padding: var(--space-5);
    background: linear-gradient(180deg, #fefefe00 0%, #fefefe 100%);
}