/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

/**
 * Inter Typeface
 * @url https: //rsms.me
 * @author
 * Usage : Body
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../static/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../static/fonts/Inter-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../static/fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../static/fonts/Inter-BoldItalic.woff2") format("woff2");
}

/**
 * Nohemi
 * @url https: //rajputrajesh-448.gumroad.com/l/NOHEMI9
 * @author Rajput Rajesh
 * Usage : Titles
 */
@font-face {
  font-family: 'Nohemi';
  src: url('../static/fonts/Nohemi-Regular.woff2') format('woff2');
  /* Modern Browsers */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}
@font-face {
  font-family: 'Nohemi';
  src: url('../static/fonts/Nohemi-Medium.woff2') format('woff2');
  /* Modern Browsers */
  font-style: normal;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

/**
 * Inter Features
 */
@font-feature-values Inter {
  @character-variant {
    cv01: 1;
    cv02: 2;
    cv03: 3;
    cv04: 4;
    cv05: 5;
    cv06: 6;
    cv07: 7;
    cv08: 8;
    cv09: 9;
    cv10: 10;
    cv11: 11;
    cv12: 12;
    cv13: 13;
    alt-1: 1;
    /* Alternate one */
    alt-3: 9;
    /* Flat-top three */
    open-4: 2;
    /* Open four */
    open-6: 3;
    /* Open six */
    open-9: 4;
    /* Open nine */
    lc-l-with-tail: 5;
    /* Lower-case L with tail */
    simplified-u: 6;
    /* Simplified u */
    alt-double-s: 7;
    /* Alternate German double s */
    uc-i-with-serif: 8;
    /* Upper-case i with serif */
    uc-g-with-spur: 10;
    /* Capital G with spur */
    single-story-a: 11;
    /* Single-story a */
    compact-lc-f: 12;
    /* Compact f */
    compact-lc-t: 13;
    /* Compact t */
  }

  @styleset {
    ss01: 1;
    ss02: 2;
    ss03: 3;
    ss04: 4;
    ss05: 5;
    ss06: 6;
    ss07: 7;
    ss08: 8;
    open-digits: 1;
    /* Open digits */
    disambiguation: 2;
    /* Disambiguation (with zero) */
    disambiguation-except-zero: 4;
    /* Disambiguation (no zero) */
    round-quotes-and-commas: 3;
    /* Round quotes & commas */
    square-punctuation: 7;
    /* Square punctuation */
    square-quotes: 8;
    /* Square quotes */
    circled-characters: 5;
    /* Circled characters */
    squared-characters: 6;
    /* Squared characters */
  }
}

body {
  font-family: 'Inter', sans-serif;
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Nohemi', sans-serif;
  text-wrap: balance;
}

/* Header */
.header {
  padding: 0 24px;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 6rem;
  margin-bottom: 4rem;
}
.headline {
  font-weight: normal;
  line-height: 1.15;
  margin: 24px 0 8px;
}
.name {
  font-size: 28px;
}
.function {
  font-size: 36px;
}
.intro {
  font-family: 'Nohemi', sans-serif;
  font-size: 22px;
  line-height: 32px;
}

/* Sections */
.section__content {
  padding: 3rem 24px;
  max-width: 960px;
  margin: 0 auto;
}
.section__title {
  font-family: 'Nohemi', sans-serif;
  font-size: 28px;
  line-height: 38px;
  margin-bottom: 24px;
}
.section--works {
  background: #f2f4f8;
  overflow: hidden;
}


/* Swiper */
.swiper {
  overflow: visible;
}
.swiper-slide {
  width: 256px;
}
.card {
  position: relative;
  /* transform: scale(0.999);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); */
}
/* .card:hover {
  transform: scale(0.960);
} */
.card__img {
  border-radius: 20px;
  box-shadow: 0 32px 48px -8px rgba(85, 99, 132, 0.2);
  corner-shape: superellipse(1.5);
}
.card__title {
  font-size: 26px;
  line-height: 32px;
  font-weight: normal;
  margin: 16px 0 8px;
}
.card__date {
  font-size: 13px;
  line-height: 16px;
  color: #45556C;
}
.card__link {
  position: absolute;
  inset: 0;
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  padding-right: 16px;
}
.tag {
  display: inline-flex;
  padding: 7px 8px 5px;
  border-radius: 6px;
  font-family: 'Nohemi', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.1em;
  background-color: #f2f4f8;
  text-transform: uppercase;
}
.tag--web { background-color: #BEB2FE;}
.tag--app { background-color: #C8FFBC;}
.tag--ux { background-color: #A1C4FE;}
.tag--ui { background-color: #FFC6FF;}
.tag--brand { background-color: #FEACAE;}
.tag--artd { background-color: #FFD5A3;}
.tag--ds { background-color: #FDFDB5;}

/* Contact */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Nohemi', sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: #000;
  transition: color .2s ease-out;
  gap: 5px;
  position: relative;
}
.btn:hover {
  color: #0054ff;
}
.btn-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 1.5rem;
}
.btn-list li {
  display: inline-flex;
  align-items: center;
}
.btn-list li:not(:last-child)::after {
  display: inline-flex;
  content: '';
  width: 2px;
  height: 2px;
  background: #90A1B9;
  border-radius: 2px;
  margin-left: 1.5rem;
}
.btn svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.1s;
}
.btn svg.icon-check,
.btn.copied svg.icon-copy {
  visibility: hidden;
  opacity: 0.6;
  transform: scale(0.5);
}
.btn.copied svg.icon-check {
  visibility: visible;
  opacity: 0.99;
  transform: scale(1);
}
.btn svg.icon-check {
  position: absolute;
  right: 0
}

/* Footer */
.footer {
  font-size: 12px;
  line-height: 16px;
  color: #90A1B9;
}