/**
 * Author: Shadow Themes
 * Author URL: https://shadow-themes.com
 */

:root {
  /* ============
       COLOR SCHEME
       ============ */

  /* --- BASE COLORS --- */

  /* Body Background Color */
  --anita-s-bg-body: #0e0e10;

  /* Headings and Accents Color */
  --anita-s-heading: #e6e6e6;

  /* Content Text color. Also is used for Input borders and Text */
  --anita-s-content: #a6a6a6;

  /* Meta Text Color */
  --anita-s-meta: #e6e6e6c0;

  /* Background Color for Containers and Sub-menus */
  --anita-s-bg-container: #212224;

  /* --- UI ELEMENTS --- */

  /* Spotlight Top Gradient */
  --anita-s-spotlight01: radial-gradient(circle, #84abd5 0%, #84abd500)
    no-repeat center center;

  /* Spotlight Bottom Gradient */
  --anita-s-spotlight02: radial-gradient(circle, #ffebd3 0%, #ffebd300)
    no-repeat center center;

  /* Carousel Gradient Overlay gradient */
  --anita-s-overlay-gradient: linear-gradient(
    0deg,
    #0e0e10 0%,
    #0e0e1080 50%,
    #0e0e1000 100%
  );

  /* Interractive Cursor Color */
  --anita-s-cursor: var(--anita-s-heading);

  /* --- FORMS FIELDS --- */

  /* Default Input field border color */
  --anita-s-input-border: var(--anita-s-content);

  /* Default Input field Background color */
  --anita-s-input-background: var(--anita-s-bg-container);

  /* Default Input field Text color */
  --anita-s-input-text: var(--anita-s-content);

  /* Focused Input field Border color */
  --anita-s-input-focus-border: var(--anita-s-heading);

  /* Focused Input field Background color */
  --anita-s-input-focus-background: var(--anita-s-bg-container);

  /* Focused Input field Text color */
  --anita-s-input-focus-text: var(--anita-s-heading);

  /* Normal Button Border color */
  --anita-s-button-border: var(--anita-s-content);

  /* Normal Button Text color */
  --anita-s-button-text: var(--anita-s-heading);

  /* Normal Button Background color */
  --anita-s-button-bg: #e6e6e600;

  /* Hover Button Border color */
  --anita-s-button-hover-border: var(--anita-s-heading);

  /* Hover Button Text color */
  --anita-s-button-hover-text: var(--anita-s-heading);

  /* Hover Button Background color */
  --anita-s-button-hover-bg: #e6e6e610;

  /* Input field Error Border color */
  --anita-s-input-border-error: #f22727;

  /* Input field Error Text color */
  --anita-s-input-color-error: #f22727;

  /* --- TYPOGRAHY COLORS --- */

  /* Link Color */
  --anita-s-link: var(--anita-s-heading);

  /* Hover Link Color */
  --anita-s-link-hover: var(--anita-s-heading);

  /* --- NAVIGATION MENU --- */

  /* Main Menu Normal link color */
  --anita-s-menu-link: var(--anita-s-meta);

  /* Main Menu Hover link color */
  --anita-s-menu-link-hover: var(--anita-s-heading);

  /* Main Menu Active link color */
  --anita-s-menu-link-active: var(--anita-s-heading);

  /* Sub-Menu Background color (for Simple Menu only) */
  --anita-s-sub-menu-bg: var(--anita-s-bg-container);

  /* Sub-Menu Normal Link color */
  --anita-s-sub-menu-link: var(--anita-s-meta);

  /* Sub-Menu Hover Link color */
  --anita-s-sub-menu-link-hover: var(--anita-s-heading);

  /* Sub-Menu Active Link color */
  --anita-s-sub-menu-link-active: var(--anita-s-heading);

  /* --- FOOTER --- */

  /* Copyright Text Color */
  --anita-s-footer-copyright: var(--anita-s-content);

  /* Footer Link color (Social Links) */
  --anita-s-footer-link: var(--anita-s-heading);

  /* Footer Link Hover color (Social Links) */
  --anita-s-footer-link-hover: var(--anita-s-heading);

  /* ==========
       TYPOGRAPHY
       ========== */

  /* --- FONT FAMILIES --- */

  /* Headings Font Family */
  --anita-t-heading-ff: "Rajdhani", sans-serif;

  /* Content Font Family */
  --anita-t-content-ff: "Open Sans", sans-serif;

  /* --- HEADINGS FONT VALUES --- */

  /* Page Title font size */
  --anita-t-title-fs: 96px;

  /* Fullscreen Galleries Caption font size */
  --anita-t-caption-fs: 64px;

  /* H1 Heading font size */
  --anita-t-h1-fs: 64px;

  /* H2 Heading font size */
  --anita-t-h2-fs: 45px;

  /* H3 Heading font size */
  --anita-t-h3-fs: 40px;

  /* H4 Heading font size */
  --anita-t-h4-fs: 33px;

  /* H5 Heading font size */
  --anita-t-h5-fs: 28px;

  /* H6 Heading font size */
  --anita-t-h6-fs: 24px;

  /* Heading line height */
  --anita-t-heading-lh: 1.25em;

  /* Heading Font Weight */
  --anita-t-heading-fw: 700;

  /* H1 Heading bottom spacing */
  --anita-t-h1-spacing: 0.7em;

  /* H2 Heading bottom spacing */
  --anita-t-h2-spacing: 0.75em;

  /* H3 Heading bottom spacing */
  --anita-t-h3-spacing: 0.85em;

  /* H4 Heading bottom spacing */
  --anita-t-h4-spacing: 1em;

  /* H5 Heading bottom spacing */
  --anita-t-h5-spacing: 1em;

  /* H6 Heading bottom spacing */
  --anita-t-h6-spacing: 1.65em;

  /* Headings SUP opacity */
  --anita-o-heading-sup: 0.25;

  /* --- CONTENT FONT VALUES --- */

  /* Content text Font Size */
  --anita-t-content-fs: 16px;

  /* Content text Line Height */
  --anita-t-content-lh: 1.8em;

  /* Content text Font Weight */
  --anita-t-content-fw: 600;

  /* Bold text Font Weight (For tag <strong>) */
  --anita-t-content-strong-fw: 800;

  /* Meta text Font Size */
  --anita-t-meta-fs: 14px;

  /* Footer text Font Size */
  --anita-t-footer-fs: 14px;

  /* --- MENU FONT VALUES --- */

  /* Fullscreen Main menu Font Size */
  --anita-t-fullscreen-menu-fs: 64px;

  /* Fullscreen Sub-menu Font Size */
  --anita-t-fullscreen-sub-menu-fs: 16px;

  /* Simple Main menu Font Size */
  --anita-t-simple-menu-fs: 14px;

  /* Simple Sub-menu Font Size */
  --anita-t-sub-menu-fs: 14px;

  /* --- FORMS FONT VALUES --- */

  /* Input field Font Size */
  --anita-t-input-fs: 14px;

  /* Button Font Size */
  --anita-t-button-fs: 18px;

  /* =================
       GRID AND SPACINGS
       ================= */

  /* Maximum Content Width */
  --anita-container-width: 1400px;

  /* Page TOP spacing */
  --anita-container-top-spacing: 200px;

  /* Page BOTTOM spacing */
  --anita-container-bottom-spacing: 200px;

  /* Grid items Normal spacing */
  --anita-grid-gap: 40px;

  /* Grid items Small spacing */
  --anita-grid-small-gap: 20px;

  /* Section Bottom spacing */
  --anita-section-gap: 240px;

  /* Small bottom spacing (for blocks custom class) */
  --anita-bottom-gap-small: 40px;

  /* Medium bottom spacing (for blocks custom class) */
  --anita-bottom-gap-medium: 80px;

  /* Large bottom spacing (for blocks custom class) */
  --anita-bottom-gap-large: 120px;

  /* Header inner spacing */
  --anita-header-spacing: 40px 50px 40px 50px;

  /* Footer inner spacing */
  --anita-footer-spacing: 41px 50px 42px 50px;

  /* Button Inner Spacing */
  --anita-button-padding: 17px 32px 17px 32px;
}

/* =================
   RESPONSIVE VALUES
   ================= */

/* --- Medium Screens --- */
@media only screen and (max-width: 1680px) {
  :root {
    --anita-container-width: 1280px;
  }
}

/* --- Laptop --- */
@media only screen and (max-width: 1366px) {
  :root {
    --anita-container-width: 1100px;
    --anita-container-top-spacing: 100px;
    --anita-container-bottom-spacing: 120px;
    --anita-section-gap: 100px;

    --anita-t-title-fs: 80px;
    --anita-t-caption-fs: 48px;
    --anita-t-h1-fs: 50px;
    --anita-t-h2-fs: 40px;
    --anita-t-h3-fs: 35px;
    --anita-t-h4-fs: 30px;
    --anita-t-h5-fs: 24px;
    --anita-t-h6-fs: 20px;
    --anita-t-fullscreen-menu-fs: 48px;

    --anita-header-spacing: 30px 30px 30px 30px;
    --anita-footer-spacing: 31px 50px 32px 50px;
  }
}

/* --- Tablet: Landscape --- */
@media only screen and (max-width: 1200px) {
  :root {
    --anita-container-width: 940px;
    --anita-grid-gap: 30px;

    --anita-t-title-fs: 64px;
    --anita-t-caption-fs: 40px;
    --anita-t-h1-fs: 40px;
    --anita-t-h2-fs: 36px;
    --anita-t-h3-fs: 32px;
    --anita-t-h4-fs: 28px;
    --anita-t-h5-fs: 24px;
    --anita-t-h6-fs: 20px;
    --anita-t-fullscreen-menu-fs: 40px;

    --anita-header-spacing: 30px 30px 30px 30px;
    --anita-footer-spacing: 31px 30px 32px 30px;
  }
}

/* --- Tablet: Portrait --- */
@media only screen and (max-width: 960px) {
  :root {
    --anita-container-width: calc(100vw - 2 * var(--anita-grid-gap));

    --anita-t-title-fs: 48px;
    --anita-t-caption-fs: 40px;
    --anita-t-h1-fs: 32px;
    --anita-t-h2-fs: 28px;
    --anita-t-h3-fs: 26px;
    --anita-t-h4-fs: 24px;
    --anita-t-h5-fs: 20px;
    --anita-t-h6-fs: 18px;
    --anita-t-fullscreen-menu-fs: 32px;
  }
}

/* --- Mobile Phones --- */
@media only screen and (max-width: 739px) {
  :root {
    --anita-container-bottom-spacing: 100px;

    --anita-grid-gap: 20px;
    --anita-bottom-gap-small: 20px;
    --anita-bottom-gap-medium: 40px;
    --anita-bottom-gap-large: 60px;
    --anita-section-gap: 80px;

    --anita-t-title-fs: 36px;
    --anita-t-caption-fs: 32px;

    --anita-header-spacing: 20px 20px 20px 20px;
    --anita-footer-spacing: 19px 20px 18px 20px;
  }
}