@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-cyrillic.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Almarai';
  src: url('../assets/fonts/almarai-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}

:root {
  --color-black: #2F2C2C;
  --color-gray-1: #525252;
  --color-gray-2: #939393;
  --color-gray-3: #EDEDED;
  --color-white: #FFFFFF;

  --color-blue: #285FF5;
  --color-blue-2: #779AF8;
  --color-blue-chip: #2F54D8;
  --color-blue-bright: #4574F7;
  --color-blue-deep: #2A2FD4;
  --color-blue-chip-bg: #CCE8FF;

  --chip-peach-bg:   #FFF0D1;  --chip-peach-fg:   #FF5319;
  --chip-green-bg:   #D1FAD8;  --chip-green-fg:   #01410D;
  --chip-cyan-bg:    #CEF9FF;  --chip-cyan-fg:    #0A4183;
  --chip-blue-bg:    #CCE8FF;  --chip-blue-fg:    #2F54D8;
  --chip-pink-bg:    #FFCEE2;  --chip-pink-fg:    #8D176C;
  --chip-purple-bg:  #E6CEFF;  --chip-purple-fg:  #5237E6;
  --chip-magenta-bg: #FFE3F5;  --chip-magenta-fg: #FF197D;
  --chip-lime-bg:    #F4FFD1;  --chip-lime-fg:    #CEA500;
  --chip-mint-bg:    #CCFFE7;  --chip-mint-fg:    #305C39;
  --chip-violet-bg:  #EDCEFF;  --chip-violet-fg:  #8E1AA6;

  --tint-blue:  #E9F3FD;
  --tint-green: #EBFBF1;
  --color-green-check: #07D37D;
  --tint-pink:  #FDECF4;

  --color-blue-accent: #3066F5;
  --tint-sky:    #ECF2FE;
  --tint-sky-2:  #EEF4FE;
  --tint-peach:  #FEF5EA;
  --tint-cream:  #FDF8F1;
  --tint-circle: #DFECFD;
  --tint-sand:   #FDF0DD;
  --tint-cream-2: #FEF7E9;
  --tint-selago: #F7FBFE;
  --tint-cream-3: #FEF9EF;
  --tint-periwinkle: #E0E4FF;
  --color-violet: #5036CC;
  --tint-orchid: #F3D7FA;
  --color-plum: #8D176C;
  --tint-athens: #ECEDF0;
  --color-ink: #02120F;
  --color-mint: #22AE73;
  --tint-ice:     #F1F7FD;
  --tint-ice-deep:#DCEBFD;
  --color-blue-tile: #377AFC;
  --color-sky-blue: #3079FD;

  --color-error: #FF6E6E;
  --color-success: #1FAE55;
  --color-danger: #E5383B;
  --color-light-blue: #D9E3FC;
  --color-pink: #E73860;
  --color-pink-hl: #EF6C86;
  --color-hot-pink: #FF2A7F;
  --gradient-accent: linear-gradient(135deg, #3F74F7 0%, #285FF5 45%, #2117C4 100%);
  --gradient-accent-v: linear-gradient(180deg, #3F74F7 5%, #285FF5 29%, #2117C4 98%);

  --color-page-bg: #F8F8F8;
  --color-surface: #F8F8F8;

  --color-lilac: #EDE9FB;
  --color-lilac-tint: #FBFAFF;
  --color-lilac-line: #D0C6EF;

  --color-cream: #FFFBEC;
  --color-cream-line: #F0E7CC;

  --shadow-card: 0 4px 15px 0 rgba(40, 95, 245, 0.03);
  --shadow-bubble: 0 10px 24px 0 rgba(40, 95, 245, 0.28);
  --shadow-photo: 0 16px 34px 0 rgba(40, 95, 245, 0.16);
  --shadow-photo-accent: 0 22px 48px 0 rgba(40, 95, 245, 0.24);

  --font-main: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Almarai', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-h1:    clamp(42px, max(5.5vw - 24px, 10vw - 96px),     96px);
  --fs-h2:    clamp(32px, max(4vw - 16px, 4.375vw - 22px),    62px);
  --fs-h3:    clamp(28px, max(1vw + 16px, 5vw - 48px),        48px);
  --fs-h4:    clamp(20px, max(1vw + 8px, 1.25vw + 4px),       28px);
  --fs-btn:   clamp(14px, max(0.5vw + 8px, 1.25vw - 4px),     20px);
  --fs-text:  clamp(14px, max(0.5vw + 8px, 0.625vw + 6px),    18px);
  --fs-small: clamp(12px, 1.25vw - 8px,                       16px);

  --radius-btn:  clamp(10px, 3.125vw - 40px, 20px);
  --radius-card: clamp(20px, 2.5vw - 10px,   30px);
  --radius-pill: 999px;

  --page-gap: clamp(10px, 3.125vw - 40px, 20px);

  --gap-cards: clamp(10px, 3.125vw - 40px, 20px);

  --card-pad: clamp(20px, 12.5vw - 180px, 60px);
  --card-pad-top: calc(var(--card-pad) * 7 / 6);
}

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

* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--color-black);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

body.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

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

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-pink);
  outline-offset: 3px;
}

ul,
ol { list-style: none; padding: 0; }

p { text-wrap: pretty; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: 0.9; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 0.9; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 0.9; }
h4 { font-size: var(--fs-h4); line-height: 1.2; }

@media (max-width: 767px) {
  :root {
    --section-pad-x: 20px;
    --section-pad-y: 50px;
  }

  html { overflow-x: clip; }

  body {
    overflow-x: clip;
    overflow-wrap: break-word;
  }
}

.universities__hl,
.trial__hl,
.ege-banner__hl {
  --hl-r: 4px;
  background-image:
    linear-gradient(var(--hl-c), var(--hl-c)),
    linear-gradient(var(--hl-c), var(--hl-c)),
    linear-gradient(var(--hl-c), var(--hl-c)),
    radial-gradient(circle at 100% 100%, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r)),
    radial-gradient(circle at 0 100%, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r)),
    radial-gradient(circle at 100% 0, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r)),
    radial-gradient(circle at 0 0, var(--hl-c) calc(var(--hl-r) - 0.5px), transparent var(--hl-r));
  background-size:
    100% calc(0.9em - 2 * var(--hl-r)),
    calc(100% - 2 * var(--hl-r)) var(--hl-r),
    calc(100% - 2 * var(--hl-r)) var(--hl-r),
    var(--hl-r) var(--hl-r),
    var(--hl-r) var(--hl-r),
    var(--hl-r) var(--hl-r),
    var(--hl-r) var(--hl-r);
  background-position:
    0 50%,
    50% calc(50% + var(--hl-r) / 2 - 0.45em),
    50% calc(50% + 0.45em - var(--hl-r) / 2),
    0 calc(50% + var(--hl-r) / 2 - 0.45em),
    100% calc(50% + var(--hl-r) / 2 - 0.45em),
    0 calc(50% + 0.45em - var(--hl-r) / 2),
    100% calc(50% + 0.45em - var(--hl-r) / 2);
  background-repeat: no-repeat;
}