/**
 *	@package	 PW Base
 *	@copyright	 Copyright (C) 2024 7Studio www.7studio.eu. All rights reserved.
 *	@license	 commercial
**/

/**
 * Basic styles
 */
:root {
	/* ---- colors ---- */
	--background: #15223F;
	--background-header: rgba(21, 34, 63, 0);
	--background-footer: #15223F;
	--background-lightbox: rgba(21, 34, 63, 0.94);
	--color-link: #D7B56D;
	--color-accent-light: var(--color-link);
	--color-accent-dark: var(--color-link);
	--color-dark-gold: #bb9f67;
	--color-text: rgba(255, 255, 255, 0.87);

	--color-dark: #030E20;
	--color-gray: rgba(255, 255, 255, 0.6);
	--color-light-gray: rgba(255, 255, 255, 0.8);
	--color-light: rgba(255, 255, 255, 0.15);
	--color-extra-light: rgba(255, 255, 255, 0.1);
	--color-yellow: #efd818;
	--color-orange: #df2d0a;
	--color-blue: #017acc;
	--color-red: #e00000;
	--color-green: #7bbd38;
	--color-gold: #d3b574;
	--color-aqua: #1ED8CF;
	
	--color-white: rgba(255, 255, 255, 1);
	--color-white-0: rgba(255, 255, 255, 0);
	--color-white-05: rgba(255, 255, 255, 0.05);
	--color-white-08: rgba(255, 255, 255, 0.05);
	--color-white-10: rgba(255, 255, 255, 0.10);
	--color-white-16: rgba(255, 255, 255, 0.16);
	--color-white-20: rgba(255, 255, 255, 0.20);
	--color-white-30: rgba(255, 255, 255, 0.30);
	--color-white-35: rgba(255, 255, 255, 0.35);
	--color-white-40: rgba(255, 255, 255, 0.40);
	--color-white-50: rgba(255, 255, 255, 0.50);
	--color-white-55: rgba(255, 255, 255, 0.55);
	--color-white-56: rgba(255, 255, 255, 0.56);
	--color-white-60: rgba(255, 255, 255, 0.60);
	--color-white-70: rgba(255, 255, 255, 0.70);
	--color-white-80: rgba(255, 255, 255, 0.80);
	--color-white-84: rgba(255, 255, 255, 0.84);
	--color-white-90: rgba(255, 255, 255, 0.90);
	--color-white-96: rgba(255, 255, 255, 0.96);
	
	--color-black: rgba(0, 0, 0, 1);
	--color-black-0: rgba(0, 0, 0, 0);
	--color-black-04: rgba(0, 0, 0, 0.04);
	--color-black-08: rgba(0, 0, 0, 0.08);
	--color-black-10: rgba(0, 0, 0, 0.10);
	--color-black-15: rgba(0, 0, 0, 0.15);
	--color-black-20: rgba(0, 0, 0, 0.20);
	--color-black-25: rgba(0, 0, 0, 0.25);
	--color-black-30: rgba(0, 0, 0, 0.30);
	--color-black-35: rgba(0, 0, 0, 0.35);
	--color-black-40: rgba(0, 0, 0, 0.40);
	--color-black-45: rgba(0, 0, 0, 0.45);
	--color-black-50: rgba(0, 0, 0, 0.50);
	--color-black-55: rgba(0, 0, 0, 0.55);
	--color-black-60: rgba(0, 0, 0, 0.60);
	--color-black-65: rgba(0, 0, 0, 0.65);
	--color-black-70: rgba(0, 0, 0, 0.70);
	--color-black-75: rgba(0, 0, 0, 0.75);
	--color-black-80: rgba(0, 0, 0, 0.80);
	--color-black-85: rgba(0, 0, 0, 0.85);
	--color-black-90: rgba(0, 0, 0, 0.90);
	--color-black-95: rgba(0, 0, 0, 0.95);

	--light-mask: rgba(21, 34, 63, 0.12);

	--image-mask-0: rgba(21, 34, 63, 0);
	--image-mask-15: rgba(21, 34, 63, 0.15);
	--image-mask-30: rgba(21, 34, 63, 0.30);
	--image-mask-50: rgba(21, 34, 63, 0.50);
	
	--image-mask-top-15: linear-gradient(180deg, rgba(21, 34, 63, 0.15) 0%, rgba(21, 34, 63, 0) 100%);
	--image-mask-top-30: linear-gradient(180deg, rgba(21, 34, 63, 0.3) 0%, rgba(21, 34, 63, 0) 100%);
	--image-mask-top-50: linear-gradient(180deg, rgba(21, 34, 63, 0.5) 0%, rgba(21, 34, 63, 0) 100%);
	--image-mask-bottom-15: linear-gradient(180deg, rgba(21, 34, 63, 0) 0%, rgba(21, 34, 63, 0.15) 100%);
	--image-mask-bottom-30: linear-gradient(180deg, rgba(21, 34, 63, 0) 0%, rgba(21, 34, 63, 0.3) 100%);
	--image-mask-bottom-50: linear-gradient(180deg, rgba(21, 34, 63, 0) 0%, rgba(21, 34, 63, 0.5) 100%);
	--image-mask-bottom-100: linear-gradient(180deg, rgba(21, 34, 63, 0) 0%, rgba(21, 34, 63, 0.96) 90%, rgba(21, 34, 63, 1) 100%);
	
	--plyr-color-main: var(--color-link);
}

:root {
	/* ---- fonts ---- */
	--font: 'Poppins-Variable', sans-serif;
	--font-sans: var(--font);
	--font-decorative: var(--font);
	--font-size: 1.125rem;
	--font-weight: 400;
	--line-height: 1.875em;

	--font: "Satoshi-Variable", sans-serif;
	--font-size: 1.2rem;
	--font-weight: 400;
	--line-height: 1.75em;
	
	--heading-font: 'Poppins-Variable', sans-serif;
	--heading-font-weight: 520;
	--heading-text-transform: none;
	--heading-letter-spacing: -0.02em;
	--color-headings: #ffffff;
	
	--small-font: 0.8750rem;
	--tiny-font: 0.750rem;

	/* ---- menu ---- */
	--menu-font: var(--font-sans);
	--menu-font-size: 12px;
	--menu-font-weight: 500;
	--menu-text-transform: uppercase;
	--menu-color: var(--color-white);
	--menu-active-color: var(--color-link);
		
	/* ---- grid ---- */
	--container-xl: 100%;
	--container: 100%;
	--container-l: 1440px;
	--container-m: 1200px;
	--container-s: 1040px;
	--container-xs: 780px;
	--container-xxs: 640px;
	
	--content-width-small: 480px;
	--content-width-medium: 640px;
	--content-width-large: 940px;
	
	--container-gap: 100px;
	--grid-gap: 10px;
	--column-gap: 10px;
	
	--spacing-10: 0.625rem;
	--spacing-15: 0.938rem;
	--spacing-16: 1rem;
	--spacing-20: 20px;
	--spacing-30: 30px;
	--spacing-40: 40px;
	--spacing-45: 45px;
	--spacing-50: 50px;
	--spacing-60: 60px;
	--spacing-70: 70px;
	--spacing-75: 75px;
	--spacing-80: 80px;
	--spacing-90: 90px;
	--spacing-100: 100px;
	--spacing-110: 110px;
	--spacing-120: 120px;
	--spacing-140: 140px;
	
	--section-space: 12vh;
	--section-space-mobile: 60px;
	
	/* ---- buttons ---- */
	--button-border-radius: 60px;
	--button-font-family: var(--font-sans);
	--button-font-size: 12px;
	--button-font-weight: 550;
	--button-text-transform: uppercase;
	--button-letter-spacing: 0.1em;
	--color-button-primary: var(--color-link);
	--color-button-secondary: var(--color-white);
	
	/* ---- easing ---- */
	--ease-fast: .2s ease;
	--ease-base: .3s ease;
	--ease-expo-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media screen and (max-width: 1600px) {
	:root {
		--container-gap: 50px;
	}
}

@media screen and (max-width: 980px) {
	:root {
		--section-space: 90px;
		--grid-gap: 20px;
		--column-gap: 20px;
		--container-gap: 20px;
		--spacing-40: 30px;
		--spacing-45: 35px;
		--spacing-50: 40px;
		--spacing-60: 45px;
		--spacing-70: 50px;
		--spacing-75: 60px;
		--spacing-80: 65px;
		--spacing-90: 70px;
		--spacing-100: 75px;
		--spacing-110: 80px;
		--spacing-120: 90px;
		--spacing-140: 100px;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--font-size: 1rem;
	}
}