:root{
  --padding-v: clamp(3rem, 4.505vw + 0.847rem, 7rem);
  --padding-h: clamp(1rem, 1.126vw + 0.462rem, 2rem);
  --padding-s: clamp(1rem, 1.126vw + 0.462rem, 2rem);
  --padding-m: clamp(2rem, 1.126vw + 1.462rem, 3rem);
  --padding-l: clamp(3rem, 2.252vw + 1.923rem, 5rem);

  /* content font */
  --h1: clamp(3.8rem, 2.928vw + 2.4rem, 6.4rem);
  --h2: clamp(3.5rem, 3.266vw + 1.939rem, 6.4rem);
  --h3: clamp(2.8rem, 0.434vw + 2.593rem, 3.2rem);
  --h4: clamp(2rem, 0.434vw + 1.793rem, 2.4rem);
  --h5: 1.8rem;
  --h6: 1.6rem;
  --body-m: clamp(1.8rem, 0.676vw + 1.477rem, 2.4rem);
  --body-s: clamp(1.6rem, 0.45vw + 1.385rem, 2rem);
  --body-xs: clamp(1.4rem, 0.217vw + 1.296rem, 1.6rem);
  
  /* buttons */
  --button-text: clamp(1.6rem, 0.217vw + 1.496rem, 1.8rem);
  --button-radius: 57px;
  --button-icon-size: 1.5rem;

  /* misc */
  --transition: 0.5s;
  --icon-size-m: clamp(1.5rem, 0.563vw + 1.231rem, 2rem);
}

path{
  transition: var(--transition);
}

.text-gradient{
      -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(85deg, #4651fb 0%, #868DFF);
}

.gap-s{
  gap:var(--padding-s);
}

.gap-m{
  gap:var(--padding-m);
}

.gap-l{
  gap:var(--padding-l);
}

.grid-2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media only screen and (max-width: 767px){
  
.grid-2{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.phone-order-1{
  order: -1;
}
  
}

/* animations */

@keyframes rotate {
  from { transform: translateX(-50%) translateY(-50%) rotateZ(0deg); }
  to { transform: translateX(-50%) translateY(-50%) rotateZ(360deg); }
}

@keyframes scaleInOut {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}