/* --------------------------------------------------
   GLOBAL STYLES
-------------------------------------------------- */

@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7afnpV-BGlaFfdAhLEY67FIEjg&skey=a1029226f80653a8&v=v15) format('woff2');
  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: 'Calibri';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aanpV-BGlaFfdAjAo9_pxqHxIZrCE&skey=cd2dd6afe6bf0eb2&v=v15) format('woff2');
  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;
}


/* --------------------------------------------------
   ARMENIAN FLAG COLOR PALETTE
-------------------------------------------------- */

:root {
  --armenian-red: #d90012;
  --armenian-blue: #0033a0;
  --armenian-orange: #f2a800;
  --pico-color: #d6e0f9;
}

/* --------------------------------------------------
   ARMENIAN FLAG TINT PALETTE
   5 Variants per color: light → dark
-------------------------------------------------- */

/* RED TINTS */
:root {
  --red-1: #f9d6d6; /* very light */
  --red-2: #f1a8a8;
  --red-3: #e87a7a; /* medium */
  --red-4: #d94c4c;
  --red-5: #b22424; /* dark */
}

/* BLUE TINTS */
:root {
  --blue-1: #d6e0f9; /* very light */
  --blue-2: #a8c0f1;
  --blue-3: #7a9ae8; /* medium */
  --blue-4: #4c74d9;
  --blue-5: #243cb2; /* dark */
}

/* ORANGE TINTS */
:root {
  --orange-1: #f9eed6; /* very light */
  --orange-2: #f3d8a8;
  --orange-3: #ebc080; /* medium */
  --orange-4: #e5a84c;
  --orange-5: #b27224; /* dark */
}



body {
  background: #000;
  color: var(--blue-5);

  font-family: "Calibri", "Segoe UI", system-ui, sans-serif;
  --pico-font-family: "Calibri", "Segoe UI", system-ui, sans-serif;

  text-align: center;  
}

/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

header h1 {
  color: var(--blue-1);
  margin-bottom: 0.2em;
  letter-spacing: 0.05em;
}

.tagline {
  color: var(--armenian-orange);
}

/* --------------------------------------------------
   VIDEO
-------------------------------------------------- */

.video-wrapper {
  position: relative;
  /* padding-bottom: 65%; */
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  border-radius: 0;
}

/* --------------------------------------------------
   CTA BUTTON
-------------------------------------------------- */

.watch-button {
  background: var(--armenian-orange);
  color: #000;

  font-weight: bold;

  border-radius: 6px;

  padding: 1em 1.5em;

  margin-top: 1.5rem;
  margin-bottom: 1.5rem;

  display: inline-block;
}

.watch-button:hover {
  background: var(--armenian-red);
  color: #fff;
}

/* --------------------------------------------------
   SYNOPSIS
-------------------------------------------------- */

.synopsis {
  margin-top: 2rem;
  text-align: left;
  font-size: 1.2rem;
  color: var(--blue-2);  
}

.synopsis h2 {
  color: var(--blue-4);
}

.synopsis p {
  color: var(--pico-color) !important;
}

/* --------------------------------------------------
   BILLING BLOCK
-------------------------------------------------- */

.billing {
  margin-top: 3rem;

  /* padding: 2rem 1rem; */

  background: #050505;

  font-size: 0.9rem;

  color: #bbb;
}

.billing .container {
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .synopsis {
    padding: 0 5rem;
  }
}