/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Baumans&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playwrite+HU:wght@100..400&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Arizonia&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Allura&display=swap'); */

:root {
    /* ===================== Breakpoints ==================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ============= Grid Body Theme ============= */
    --bg-color-body: transparent;
    --text-color-body: hsl(210, 11%, 15%);
    --font-family-body: 'Montserrat', sans-serif;
    --bg-color-dark-body: hsl(221, 23%, 19%);
    --bg-color-light-body: hsl(221, 23%, 93%);
    /* ============= Font Size (400px to 1920px) ============= */
    --font-size-body: clamp(1rem, 0.9605rem + 0.1579vw, 1.15rem);
    --small-font-size: clamp(0.85rem, 0.7833rem + 0.2667vw, 1.05rem);
    --text-align-body: left;
    --font-weight-body: 300;
    --line-height-body: 1.5;
    --font-line-height: 1.2;
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --pre-color: hsl(0, 96%, 40%);
    --code-color: hsl(330, 67%, 52%);
    --white-color-body: hsl(0, 0%, 100%);
    --black-color-body: hsl(0, 0%, 0%);
    --border-color-body: hsl(210, 14%, 89%);
    --color-highlight-bg: hsl(46, 100%, 90%);

    /* ===================== GRID Colors ==================== */
    --clr-red-primary: #e60000;
    --clr-red-light: #fadede;
    --clr-orange-primary: #fcb001;
    --clr-orange-light: #fee7b2;
    --clr-gold-primary: #ffdf00;
    --clr-gold-light: #fff5b3;
    --clr-yellow-primary: #ffff00;
    --clr-yellow-light: #ffffb3;
    --clr-lemon-primary: #bffe28;
    --clr-lemon-light: #ecffbf;
    --clr-apple-primary: #5edc1f;
    --clr-apple-light: #caf4b5;
    --clr-fresh-primary: #10e509;
    --clr-fresh-light: #ccfaca;
    --clr-green-primary: #059c0c;
    --clr-green-light: #bdebc0;
    --clr-teal-primary: #029386;
    --clr-teal-light: #9ddfd9;
    --clr-default-primary: #24aea0;
    --clr-default-light: #b0e7e1;
    --clr-cyan-primary: #0dccf2;
    --clr-cyan-light: #b4effb;
    --clr-sky-primary: #10acf6;
    --clr-sky-light: #b6e6fc;
    --clr-azure-primary: #007fff;
    --clr-azure-light: #cce6ff;
    --clr-blue-primary: #0000ff;
    --clr-blue-light: #b3d9ff;
    --clr-navy-primary: #050372;
    --clr-navy-light: #a3c1da;
    --clr-night-primary: #02014f;
    --clr-night-light: #a6bded;
    --clr-indigo-primary: #4b0082;
    --clr-indigo-light: #d7cee8;
    --clr-purple-primary: #a819e6;
    --clr-purple-light: #eed1fa;
    --clr-pink-primary: #f433ff;
    --clr-pink-light: #fcc2ff;
    --clr-magenta-primary: #e3319d;
    --clr-magenta-light: #ffceef;
    --clr-rose-primary: #ff007f;
    --clr-rose-light: #ffcce6;
    --clr-velvet-primary: #750851;
    --clr-velvet-light: #e3b9d5;
    --clr-dream-primary: #580742;
    --clr-dream-light: #deb5d3;
    --clr-chocolate-primary: #5a2e2e;
    --clr-chocolate-light: #cdafaf;
    --clr-brown-primary: #592804;
    --clr-brown-light: #eee1d8;
    --clr-cream-primary: #fdfbd4;
    --clr-cream-light: #fefef2;
    --clr-unique-primary: #3f729b;
    --clr-unique-light: #cfdfeb;
    --clr-dark-primary: #212529;
    --clr-light-primary: #f7f9f7;
    --clr-gray-primary: #4d525c;
    --clr-gray-light: #d7dade;

    /* ====================== BS Colors ===================== */
    --clr-primary: #0d6efd;
    --clr-secondary: #6c757d;
    --clr-success: #29a745;
    --clr-info: #0dcaf0;
    --clr-warning: #ffc107;
    --clr-danger: #dc3545;
    --clr-action: #32a3c3;
    --clr-black: #000000;
    --clr-white: #ffffff;

    /* ===================== Gray Color ===================== */
    --clr-gray-900: hsl(220, 11%, 10%);
    --clr-gray-800: hsl(220, 10%, 21%);
    --clr-gray-700: hsl(220, 10%, 30%);
    --clr-gray-600: hsl(220, 10%, 40%);
    --clr-gray-500: hsl(220, 11%, 55%);
    --clr-gray-400: hsl(220, 14%, 65%);
    --clr-gray-300: hsl(220, 14%, 75%);
    --clr-gray-200: hsl(220, 16%, 87%);
    --clr-gray-100: hsl(220, 17%, 97%);

    --clr-slate-900: #0f172a;
    --clr-slate-800: #1e293b;
    --clr-slate-700: #334155;
    --clr-slate-600: #475569;
    --clr-slate-500: #64748b;
    --clr-slate-400: #94a3b8;
    --clr-slate-300: #cbd5e1;
    --clr-slate-200: #e2e8f0;
    --clr-slate-100: #f1f5f9;

    /* ================== Blue-Gray Colors ================== */
    --clr-steel-900: #020305;
    --clr-steel-800: #0f141f;
    --clr-steel-700: #232b3c;
    --clr-steel-600: #38445c;
    --clr-steel-500: #4e5e7e;
    --clr-steel-400: #6e7c97;
    --clr-steel-300: #919bb0;
    --clr-steel-200: #b4bcca;
    --clr-steel-100: #d9dde4;

    /* ===================== Blue Colors ==================== */
    --clr-blue-primary-900: #00134d;
    --clr-blue-primary-800: #001a66;
    --clr-blue-primary-700: #002699;
    --clr-blue-primary-600: #0033cc;
    --clr-blue-primary-500: #0070ff;
    --clr-blue-primary-400: #338bff;
    --clr-blue-primary-300: #66a8ff;
    --clr-blue-primary-200: #99c5ff;
    --clr-blue-primary-100: #cce2ff;

    --clr-blue-dark-900: #080b35;
    --clr-blue-dark-800: #0a0e46;
    --clr-blue-dark-700: #0d135c;
    --clr-blue-dark-600: #111771;
    --clr-blue-dark-500: #131a7f;
    --clr-blue-dark-400: #161e94;
    --clr-blue-dark-300: #1923aa;
    --clr-blue-dark-200: #1c27bf;
    --clr-blue-dark-100: #2632de;

    --clr-blue-light-900: #2196f3;
    --clr-blue-light-800: #379ff4;
    --clr-blue-light-700: #4ca9f5;
    --clr-blue-light-600: #62b3f6;
    --clr-blue-light-500: #78bef7;
    --clr-blue-light-400: #8ec9f9;
    --clr-blue-light-300: #a4d3fa;
    --clr-blue-light-200: #badefb;
    --clr-blue-light-100: #d1e9fc;

    --clr-azure-900: #00264d;
    --clr-azure-800: #003366;
    --clr-azure-700: #004c99;
    --clr-azure-600: #0066cc;
    --clr-azure-500: #007fff;
    --clr-azure-400: #3399ff;
    --clr-azure-300: #66b2ff;
    --clr-azure-200: #99ccff;
    --clr-azure-100: #cce5ff;

    --clr-cyan-900: #013e4b;
    --clr-cyan-800: #025e71;
    --clr-cyan-700: #05819a;
    --clr-cyan-600: #08a6c5;
    --clr-cyan-500: #0dccf2;
    --clr-cyan-400: #65d7f5;
    --clr-cyan-300: #93e2f8;
    --clr-cyan-200: #b9ecfb;
    --clr-cyan-100: #ddf6fd;

    /* ==================== Indigo Color ==================== */
    --clr-indigo-900: #2e004e;
    --clr-indigo-800: #35005b;
    --clr-indigo-700: #3d0068;
    --clr-indigo-600: #440075;
    --clr-indigo-500: #4b0082;
    --clr-indigo-400: #671f9b;
    --clr-indigo-300: #8748b4;
    --clr-indigo-200: #ab7bcd;
    --clr-indigo-100: #d3b8e6;

    /* ==================== Purple Color ==================== */
    --clr-purple-900: #320845;
    --clr-purple-800: #430a5c;
    --clr-purple-700: #650f8a;
    --clr-purple-600: #8714b8;
    --clr-purple-500: #a819e6;
    --clr-purple-400: #ba47eb;
    --clr-purple-300: #cb75f0;
    --clr-purple-200: #dca3f5;
    --clr-purple-100: #eed1fa;

    /* ===================== Pink Color ===================== */
    --clr-pink-900: #490f4d;
    --clr-pink-800: #621466;
    --clr-pink-700: #931f99;
    --clr-pink-600: #c429cc;
    --clr-pink-500: #f433ff;
    --clr-pink-400: #f75cff;
    --clr-pink-300: #f985ff;
    --clr-pink-200: #fbadff;
    --clr-pink-100: #fdd6ff;

    /* ==================== Magenta Color =================== */
    --clr-magenta-900: #440f2f;
    --clr-magenta-800: #5b143e;
    --clr-magenta-700: #881e5e;
    --clr-magenta-600: #b6287d;
    --clr-magenta-500: #e3319d;
    --clr-magenta-400: #e957af;
    --clr-magenta-300: #ee7fc2;
    --clr-magenta-200: #f4a8d5;
    --clr-magenta-100: #f9d2ea;

    /* ====================== Red Color ===================== */
    --clr-red-900: hsl(0, 100%, 18%);
    --clr-red-800: hsl(0, 100%, 27%);
    --clr-red-700: hsl(0, 100%, 36%);
    --clr-red-600: hsl(0, 100%, 45%);
    --clr-red-500: hsl(0, 100%, 50%);
    --clr-red-400: hsl(0, 100%, 67%);
    --clr-red-300: hsl(0, 100%, 77%);
    --clr-red-200: hsl(0, 100%, 88%);
    --clr-red-100: hsl(0, 100%, 95%);

    /* ==================== Orange Color ==================== */
    --clr-orange-900: hsl(21, 100%, 45%);
    --clr-orange-800: hsl(27, 100%, 47%);
    --clr-orange-700: hsl(33, 100%, 49%);
    --clr-orange-600: hsl(36, 100%, 50%);
    --clr-orange-500: hsl(36, 100%, 57%);
    --clr-orange-400: hsl(36, 100%, 65%);
    --clr-orange-300: hsl(36, 100%, 75%);
    --clr-orange-200: hsl(36, 100%, 85%);
    --clr-orange-100: hsl(37, 100%, 94%);

    /* ==================== Yellow Color ==================== */
    --clr-yellow-900: #feab11;
    --clr-yellow-800: #febf11;
    --clr-yellow-700: #fed211;
    --clr-yellow-600: #fee611;
    --clr-yellow-500: #fefa11;
    --clr-yellow-400: #fff84a;
    --clr-yellow-300: #fffa7e;
    --clr-yellow-200: #fffcb1;
    --clr-yellow-100: #fffee5;

    /* ===================== Gold Color ===================== */
    --clr-gold-900: #998500;
    --clr-gold-800: #b39b00;
    --clr-gold-700: #ccb100;
    --clr-gold-600: #e6c700;
    --clr-gold-500: #ffdf00;
    --clr-gold-400: #ffe433;
    --clr-gold-300: #ffeb66;
    --clr-gold-200: #fff199;
    --clr-gold-100: #fff5b3;

    /* ===================== Green Color ==================== */
    --clr-green-900: #012f04;
    --clr-green-800: #024e06;
    --clr-green-700: #036d09;
    --clr-green-600: #048c0b;
    --clr-green-500: #059c0c;
    --clr-green-400: #27af2e;
    --clr-green-300: #6acd6f;
    --clr-green-200: #a0e1a3;
    --clr-green-100: #ddf5de;

    --clr-teal-900: #002f2c;
    --clr-teal-800: #004e4a;
    --clr-teal-700: #007c76;
    --clr-teal-600: #008c85;
    --clr-teal-500: #009b94;
    --clr-teal-400: #33afa9;
    --clr-teal-300: #66c3bf;
    --clr-teal-200: #99d7d4;
    --clr-teal-100: #ccebea;

    /* ============= Blue-Green Color (#0BA1AF) ============= */
    --clr-blue-green-900: #004355;
    --clr-blue-green-800: #015e71;
    --clr-blue-green-700: #027a8e;
    --clr-blue-green-600: #0398ac;
    --clr-blue-green-500: #0ba1af;
    --clr-blue-green-400: #32b3c5;
    --clr-blue-green-300: #60ccd8;
    --clr-blue-green-200: #84e5eb;
    --clr-blue-green-100: #a6ffff;

    /* ==================== Brown Colors ==================== */
    --clr-brown-900: #241001;
    --clr-brown-800: #2d1402;
    --clr-brown-700: #361802;
    --clr-brown-600: #471f03;
    --clr-brown-500: #592804;
    --clr-brown-400: #7a441c;
    --clr-brown-300: #9c6742;
    --clr-brown-200: #cdab92;
    --clr-brown-100: #eee1d8;

    /* =================== Espresso Color =================== */
    --clr-espresso-900: #3c1b0f;
    --clr-espresso-800: #522a1b;
    --clr-espresso-700: #673c2b;
    --clr-espresso-600: #7d503e;
    --clr-espresso-500: #936655;
    --clr-espresso-400: #a88070;
    --clr-espresso-300: #be9c8e;
    --clr-espresso-200: #d4bab0;
    --clr-espresso-100: #e9dbd6;

    /* ================= Transparent Colors ================= */
    --clr-black-trans-900: rgba(0, 0, 0, 0.9);
    --clr-black-trans-800: rgba(0, 0, 0, 0.8);
    --clr-black-trans-700: rgba(0, 0, 0, 0.7);
    --clr-black-trans-600: rgba(0, 0, 0, 0.6);
    --clr-black-trans-500: rgba(0, 0, 0, 0.5);
    --clr-black-trans-400: rgba(0, 0, 0, 0.4);
    --clr-black-trans-300: rgba(0, 0, 0, 0.3);
    --clr-black-trans-200: rgba(0, 0, 0, 0.2);
    --clr-black-trans-100: rgba(0, 0, 0, 0.1);

    --clr-white-trans-900: rgba(255, 255, 255, 0.9);
    --clr-white-trans-800: rgba(255, 255, 255, 0.8);
    --clr-white-trans-700: rgba(255, 255, 255, 0.7);
    --clr-white-trans-600: rgba(255, 255, 255, 0.6);
    --clr-white-trans-500: rgba(255, 255, 255, 0.5);
    --clr-white-trans-400: rgba(255, 255, 255, 0.4);
    --clr-white-trans-300: rgba(255, 255, 255, 0.3);
    --clr-white-trans-200: rgba(255, 255, 255, 0.2);
    --clr-white-trans-100: rgba(255, 255, 255, 0.1);

    --clr-navy-trans-900: rgba(0, 0, 50, 0.9);
    --clr-navy-trans-800: rgba(0, 0, 50, 0.8);
    --clr-navy-trans-700: rgba(0, 0, 50, 0.7);
    --clr-navy-trans-600: rgba(0, 0, 50, 0.6);
    --clr-navy-trans-500: rgba(0, 0, 50, 0.5);
    --clr-navy-trans-400: rgba(0, 0, 50, 0.4);
    --clr-navy-trans-300: rgba(0, 0, 50, 0.3);
    --clr-navy-trans-200: rgba(0, 0, 50, 0.2);
    --clr-navy-trans-100: rgba(0, 0, 50, 0.1);

    --clr-blue-trans-900: rgba(0, 0, 255, 0.9);
    --clr-blue-trans-800: rgba(0, 0, 255, 0.8);
    --clr-blue-trans-700: rgba(0, 0, 255, 0.7);
    --clr-blue-trans-600: rgba(0, 0, 255, 0.6);
    --clr-blue-trans-500: rgba(0, 0, 255, 0.5);
    --clr-blue-trans-400: rgba(0, 0, 255, 0.4);
    --clr-blue-trans-300: rgba(0, 0, 255, 0.3);
    --clr-blue-trans-200: rgba(0, 0, 255, 0.2);
    --clr-blue-trans-100: rgba(0, 0, 255, 0.1);

    /* ==================== Hue Gradient ==================== */
    --hue-gradient-red: linear-gradient(to right in hsl longer hue, hsl(0, 100%, 50%), hsl(0, 100%, 50%));
    --hue-gradient-blue: linear-gradient(to right in hsl longer hue, hsl(240, 100%, 50%), hsl(240, 100%, 50%));
    --clr-red-blue-gradient: linear-gradient(90deg in lch, rgb(255, 0, 0), rgb(0, 0, 255));
    --clr-midnight-gradient: linear-gradient(45deg, #000033 30%, #2874fc 100%);
    --clr-blue-gradient: linear-gradient(110deg, var(--clr-blue-dark-900), var(--clr-blue-primary-800), var(--clr-blue-dark-900));
    --clr-blue-gradient-linear: linear-gradient(90deg, var(--clr-blue-dark-900) 15%, var(--clr-blue-primary-800) 49%, var(--clr-blue-primary-800) 51%, var(--clr-blue-dark-900) 85%);
    --clr-blue-gradient-radial: radial-gradient(50% 50% at 50% 50%, var(--clr-blue-primary-800) 0, var(--clr-blue-dark-900) 100%);
    --clr-gold-gradient-radial: radial-gradient(50% 50% at 50% 50%, #f1ca6e 0, #a57300 100%);

    /* ============= Font Family ============= */
    --montserrat-font: 'Montserrat', sans-serif;
    --raleway-font: 'Raleway', sans-serif;
    --comfortaa-font: 'Comfortaa', cursive;
    --poppins-font: 'Poppins', sans-serif;
    --roboto-font: 'Roboto', sans-serif;
    --google-font: 'Google Sans Flex', sans-serif;
    --quicksand-font: 'Quicksand', sans-serif;
    --headline: 'Great Vibes', cursive;
    --baumans-font: 'Baumans', cursive;
    --nunito-font: 'Nunito', sans-serif;
    --catamaran-font: 'Catamaran', sans-serif;
    --rajdhani-font: 'Rajdhani', sans-serif;
    --playwrite-font: 'Playwrite HU';
    --lato-font: 'Lato', sans-serif;
    --unbounded-font: 'Unbounded', sans-serif;
    --audiowide-font: 'Audiowide', sans-serif;
    --tangerine-font: 'Tangerine', cursive;
    --arizonia-font: 'Arizonia';
    --allura-font: 'Allura', cursive;

    /* ============= Text Size (400px to 1600px) ============= */
    --fs-100: clamp(0.75rem, 0.6833rem + 0.2667vw, 0.95rem);
    --fs-200: clamp(0.9rem, 0.8333rem + 0.2667vw, 1.1rem);
    --fs-300: clamp(1rem, 0.9333rem + 0.2667vw, 1.2rem);
    --fs-400: clamp(1.15rem, 1.1rem + 0.2vw, 1.3rem);
    --fs-500: clamp(1.25rem, 1.0833rem + 0.6667vw, 1.75rem);
    --fs-600: clamp(1.6rem, 1.3833rem + 0.8667vw, 2.25rem);
    --fs-700: clamp(1.95rem, 1.65rem + 1.2vw, 2.85rem);
    --fs-800: clamp(2.35rem, 1.9833rem + 1.4667vw, 3.45rem);
    --fs-900: clamp(2.85rem, 2.3833rem + 1.8667vw, 4.25rem);

    /* ============= Title Size (400px to 1600px) ============= */
    --h1-font: clamp(1.8rem, 1.5667rem + 0.9333vw, 2.5rem);
    --h2-font: clamp(1.65rem, 1.4833rem + 0.6667vw, 2.15rem);
    --h3-font: clamp(1.5rem, 1.3833rem + 0.4667vw, 1.85rem);
    --h4-font: clamp(1.35rem, 1.2667rem + 0.3333vw, 1.6rem);
    --h5-font: clamp(1.275rem, 1.2333rem + 0.1667vw, 1.4rem);
    --h6-font: clamp(1.15rem, 1.1333rem + 0.0667vw, 1.2rem);

    --display-1: clamp(3rem, 2.3333rem + 2.6667vw, 5rem);
    --display-2: clamp(2.75rem, 2.1667rem + 2.3333vw, 4.5rem);
    --display-3: clamp(2.5rem, 2rem + 2vw, 4rem);
    --display-4: clamp(2.25rem, 1.8333rem + 1.6667vw, 3.5rem);
    --display-5: clamp(2rem, 1.6667rem + 1.3333vw, 3rem);
    --display-6: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);

    --fs-responsive-1: clamp(2.75rem, 0.6667rem + 8.3333vw, 9rem);
    --fs-responsive-2: clamp(2.5rem, 0.6667rem + 7.3333vw, 8rem);
    --fs-responsive-3: clamp(2.25rem, 0.6667rem + 6.3333vw, 7rem);
    --fs-responsive-4: clamp(2rem, 0.6667rem + 5.3333vw, 6rem);
    --fs-responsive-5: clamp(1.8rem, 0.6667rem + 4.5333vw, 5.2rem);
    --fs-responsive-6: clamp(1.6rem, 0.6333rem + 3.8667vw, 4.5rem);

    /* ============== Title Size 500px - 1920px ============= */
    --title-size-1: clamp(2.5rem, 1.2676rem + 3.9437vw, 6rem);
    --title-size-2: clamp(2.3rem, 1.1732rem + 3.6056vw, 5.5rem);
    --title-size-3: clamp(2.1rem, 1.0789rem + 3.2676vw, 5rem);
    --title-size-4: clamp(1.9rem, 0.9845rem + 2.9296vw, 4.5rem);
    --title-size-5: clamp(1.7rem, 0.8901rem + 2.5915vw, 4rem);
    --title-size-6: clamp(1.5rem, 0.7958rem + 2.2535vw, 3.5rem);

    /* ===================== Font Weight ==================== */
    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;

    /* ==================== Font Shadows ==================== */
    --ts-thin: 2px 2px 2px rgba(0, 0, 0, 0.4);
    --ts-light: 2px 2px 3px rgba(0, 0, 0, 0.4);
    --ts-medium: 2px 2px 4px rgba(0, 0, 0, 0.5);
    --ts-semi-bold: 3px 3px 4px rgba(0, 0, 0, 0.5);
    --ts-bold: 3px 3px 5px rgba(0, 0, 0, 0.5);
    --ts-1: 1px 1px #212121, 1px -1px #212121, -1px 1px #212121, -1px -1px #212121, 3px 3px 6px rgba(57, 57, 57, 0.5);
    --white-text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.5), 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 0px 10px rgba(0, 0, 0, 0.1);

    /* ======================= Gutters ====================== */
    --grid-gutter-x: 1.5rem;
    --grid-gutter-y: 0;
    --gutter-1: 0.25rem;
    --gutter-2: 0.5rem;
    --gutter-3: 1rem;
    --gutter-4: 1.5rem;
    --gutter-5: 2rem;
    --gutter-6: 2.5rem;

    /* ============== Padding (375px - 1600px) ============== */
    --padding-2xs: clamp(0.625rem, 0.4337rem + 0.8163vw, 1.25rem);
    --padding-xs: clamp(1rem, 0.6173rem + 1.6327vw, 2.25rem);
    --padding-sm: clamp(1.75rem, 1.3305rem + 1.7945vw, 3.125rem);
    --padding-md: clamp(2.5rem, 1.7347rem + 3.2653vw, 5rem);
    --padding-lg: clamp(3.125rem, 2.1684rem + 4.0816vw, 6.25rem);
    --padding-xl: clamp(3.75rem, 2.602rem + 4.898vw, 7.5rem);
    --padding-xxl: clamp(4.375rem, 3.0357rem + 5.7143vw, 8.75rem);
    --padding-3xl: clamp(5rem, 3.4694rem + 6.5306vw, 10rem);

    /* ============== Padding (500px to 1920px) ============= */
    --gutter-center: clamp(0rem, -1.2676rem + 4.0563vw, 3.6rem);

    /* ============== Padding (600px to 1920px) ============= */
    --gutter-xs: clamp(0.75rem, -0.4091rem + 3.0909vw, 3.3rem);
    --gutter-sm: clamp(0.75rem, -1.7727rem + 6.7273vw, 6.3rem);
    --gutter-md: clamp(0.75rem, -3.2273rem + 10.6061vw, 9.5rem);
    --gutter-lg: clamp(0.75rem, -4.6364rem + 14.3636vw, 12.6rem);
    --gutter-xl: clamp(0.75rem, -6.0682rem + 18.1818vw, 15.75rem);
    --gutter-xxl: clamp(0.75rem, -7.4545rem + 21.8788vw, 18.8rem);
    --gutter-3xl: clamp(0.75rem, -8.9091rem + 25.7576vw, 22rem);

    /* ============== Padding (320px to 1440px) ============= */
    --header-padding-x: clamp(2rem, -0.7273rem + 7.2727vw, 8rem);
    --header-padding-y: clamp(3rem, 2.0909rem + 2.4242vw, 5rem);
    --header-padding: var(--header-padding-y) var(--header-padding-x);
    --base-padding: var(--padding-lg) var(--gutter-md);
    --cell-box-left: var(--padding-md) var(--grid-gutter-x) var(--padding-md) var(--gutter-md);
    --cell-box-right: var(--padding-md) var(--gutter-md) var(--padding-md) var(--grid-gutter-x);
    --cell-box-center: var(--padding-md) var(--gutter-md);

    /* ============= Gap Size (320px to 1200px) ============= */
    --gap-xxs: clamp(0.25rem, 0.1591rem + 0.4545vw, 0.5rem); /* 4px mobile, 8px desktop */
    --gap-xs: clamp(0.5rem, 0.4091rem + 0.4545vw, 0.75rem); /* 8px mobile, 12px desktop */
    --gap-sm: clamp(0.75rem, 0.6591rem + 0.4545vw, 1rem); /* 12px mobile, 16px desktop */
    --gap-md: clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem); /* 16px mobile, 20px desktop */
    --gap-lg: clamp(1.25rem, 1.1591rem + 0.4545vw, 1.5rem); /* 20px mobile, 24px desktop */
    --gap-xl: clamp(1.25rem, 0.9773rem + 1.3636vw, 2rem); /* 20px mobile, 32px desktop */
    --gap-xxl: clamp(1.25rem, 0.7955rem + 2.2727vw, 2.5rem); /* 20px mobile, 40px desktop */

    /* ====================== Grid Gap ====================== */
    --grid-gap-xxs: 0.5rem;
    --grid-gap-xs: 0.75rem;
    --grid-gap-sm: 1rem;
    --grid-gap-md: 1.25rem;
    --grid-gap-lg: 1.5rem;
    --grid-gap-xl: 2rem;
    --grid-gap-xxl: 2.5rem;

    /* ======================= Radius ======================= */
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-3: 0.75rem;
    --radius-4: 1rem;
    --radius-5: 1.25rem;
    --radius-6: 1.5rem;
    --radius-7: 1.75rem;
    --radius-8: 2rem;

    /* ===================== Menu Hight ===================== */
    --menu-height: 5rem; /*-- 80px ---*/
    --menu-height-xs: 3.75rem; /*-- 60px ---*/
    --menu-height-sm: 4.5rem; /*-- 72px ---*/
    --menu-height-md: 5rem; /*-- 80px ---*/
    --menu-height-lg: 5.65rem; /*-- 90px ---*/
    --menu-height-xl: 6.25rem; /*-- 100px ---*/

    /* =================== Container Widt =================== */
    --width-xs: calc(100% - var(--gutter-3xl) * 2);
    --width-sm: calc(100% - var(--gutter-xxl) * 2);
    --width-md: calc(100% - var(--gutter-xl) * 2);
    --width-lg: calc(100% - var(--gutter-lg) * 2);
    --width-xl: calc(100% - var(--gutter-md) * 2);
    --width-xxl: calc(100% - var(--gutter-sm) * 2);
    --width-3xl: calc(100% - var(--gutter-xs) * 2);

    /* ==================== Column Width ==================== */
    --col-1: calc(100% / 12);
    --grid-columns: 12;
}

/* ====================================================== */
/*                          Reset                         */
/* ====================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    color: var(--text-color-body);
    text-align: var(--text-align-body);
    background-color: var(--bg-color-body);
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

header,
main,
footer,
section,
article {
    container-type: inline-size;
}

p {
    margin-top: var(--grid-gutter-y);
    margin-bottom: calc(var(--gutter-2) * 2);
    font-size: var(--font-size-body);
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-variant-numeric: proportional-nums;
}

a {
    color: hsl(211, 100%, 50%);
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: hsl(211, 100%, 35%);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

a:active,
a:hover {
    outline: 0;
}

a,
li {
    font-size: var(--font-size-body);
}

q {
    quotes: '\201D' '\201E';
    font-style: italic;
    font-weight: var(--fw-regular);
}

q::before {
    content: open-quote;
    margin-right: 5px;
}

q::after {
    content: close-quote;
    margin-left: 5px;
}

ol,
ul,
li {
    list-style: none;
}

ol {
    display: block;
    margin: 1.5rem 0rem;
    padding-inline-start: 2.5rem;
}

dl {
    display: block;
    margin: 1.5rem 0rem;
}

dt {
    font-weight: 600;
}

dd {
    display: block;
    margin-inline-start: 2.5rem;
}

sub,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

b,
strong {
    font-weight: var(--fw-semi-bold);
}

small,
.small {
    font-size: var(--small-font-size);
}

pre,
code,
kbd,
samp {
    font-family: var(--font-monospace);
    font-size: var(--font-size-body);
    margin-left: var(--grid-gutter-y);
}

pre {
    display: block;
    margin-top: var(--grid-gutter-y);
    margin-bottom: calc(var(--gutter-2) * 2);
    overflow: auto;
    font-size: var(--small-font-size);
    background: var(--bg-color-light-body);
    border-left: 5px solid var(--pre-color);
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

code {
    font-size: var(--small-font-size);
    color: var(--code-color);
    word-wrap: break-word;
}

a > code {
    color: inherit;
}

kbd {
    padding: 0.1875rem 0.375rem;
    font-size: var(--small-font-size);
    color: var(--white-color-body);
    background-color: var(--text-color-body);
    border-radius: var(--radius-1);
}

kbd kbd {
    padding: 0;
    font-size: var(--font-size-body);
}

mark,
.mark {
    padding: 0.1875em;
    background-color: var(--color-highlight-bg);
}

marquee {
    padding: 0.1875em;
    background-color: var(--bg-color-body);
}

iframe {
    border: 0;
}

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

section {
    position: relative;
}

[role='button'] {
    cursor: pointer;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin-top: calc(var(--gutter-2) * 2);
    margin-bottom: calc(var(--gutter-2) * 2);
    border: 0;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
}

/* ====================================================== */
/*                     Title Font Size                    */
/* ====================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: var(--grid-gutter-y);
    margin-bottom: var(--gutter-2);
    font-weight: var(--fw-medium);
    line-height: var(--font-line-height);
    text-wrap: balance;
    font-variant-numeric: lining-nums;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: var(--grid-gutter-y);
    margin-bottom: var(--gutter-2);
    font-weight: var(--fw-regular);
    line-height: var(--font-line-height);
}

h1,
.h1 {
    font-size: var(--h1-font);
}

h2,
.h2 {
    font-size: var(--h2-font);
}

h3,
.h3 {
    font-size: var(--h3-font);
}

h4,
.h4 {
    font-size: var(--h4-font);
}

h5,
.h5 {
    font-size: var(--h5-font);
}

h6,
.h6 {
    font-size: var(--h6-font);
}

[class*='display-'] {
    font-weight: var(--fw-light);
    line-height: var(--font-line-height);
    margin-bottom: var(--gutter-2);
}

.display-1 {
    font-size: var(--display-1);
}

.display-2 {
    font-size: var(--display-2);
}

.display-3 {
    font-size: var(--display-3);
}

.display-4 {
    font-size: var(--display-4);
}

.display-5 {
    font-size: var(--display-5);
}

.display-6 {
    font-size: var(--display-6);
}

/* ====================================================== */
/*                     Text Font Size                     */
/* ====================================================== */
[class*='title-size-'] {
    margin-bottom: var(--gutter-2);
    line-height: var(--font-line-height);
}
.title-size-1 {
    font-size: var(--title-size-1);
}

.title-size-2 {
    font-size: var(--title-size-2);
}

.title-size-3 {
    font-size: var(--title-size-3);
}

.title-size-4 {
    font-size: var(--title-size-4);
}

.title-size-5 {
    font-size: var(--title-size-5);
}

.title-size-6 {
    font-size: var(--title-size-6);
}

/* =================== Responsive Font ================== */
[class*='fs-'] {
    margin-bottom: var(--gutter-2);
    line-height: var(--font-line-height);
}

.fs-responsive-1 {
    font-size: var(--fs-responsive-1);
}

.fs-responsive-2 {
    font-size: var(--fs-responsive-2);
}

.fs-responsive-3 {
    font-size: var(--fs-responsive-3);
}

.fs-responsive-4 {
    font-size: var(--fs-responsive-4);
}

.fs-responsive-5 {
    font-size: var(--fs-responsive-5);
}

.fs-responsive-6 {
    font-size: var(--fs-responsive-6);
}

/* ================== Font Size 100-900 ================= */
.fs-100 {
    font-size: var(--fs-100);
}

.fs-200 {
    font-size: var(--fs-200);
}

.fs-300 {
    font-size: var(--fs-300);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-500 {
    font-size: var(--fs-500);
}

.fs-600 {
    font-size: var(--fs-600);
}

.fs-700 {
    font-size: var(--fs-700);
}

.fs-800 {
    font-size: var(--fs-800);
}

.fs-900 {
    font-size: var(--fs-900);
}

/* ====================================================== */
/*                       Font Weight                      */
/* ====================================================== */
.fw-thin {
    font-weight: var(--fw-thin);
}

.fw-extra-light {
    font-weight: var(--fw-extra-light);
}

.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semi-bold {
    font-weight: var(--fw-semi-bold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-extra-bold {
    font-weight: var(--fw-extra-bold);
}

.fw-black {
    font-weight: var(--fw-black);
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: '';
    background-color: rgba(0, 0, 0, 0);
}

/* ====================================================== */
/*                       Font Style                       */
/* ====================================================== */
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.italic {
    font-style: italic;
}

/* ====================================================== */
/*                       Image Style                      */
/* ====================================================== */
.wide-img {
    width: 100%;
    max-height: 45vh;
    object-fit: cover;
}

.full-width-img {
    display: block;
    width: 100vi;
    max-width: 100vi;
    margin: 1.5rem calc(50% - 50vi);
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-thumbnail {
    padding: var(--gutter-1);
    background-color: var(--white-color-body);
    border: 1px solid var(--border-color-body);
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

.img-responsive {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ====================================================== */
/*                        Parallax                        */
/* ====================================================== */
.parallax {
    min-height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
}

.header-parallax {
    background-attachment: fixed;
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
}

.hover-grayscale {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.hover-grayscale:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* ====================================================== */
/*                         Titles                         */
/* ====================================================== */
.section-title {
    position: relative;
    width: fit-content;
    letter-spacing: 2px;
    margin-bottom: calc(var(--gutter-3) * 2);
    color: var(--text-color-body);
}

.section-title-center {
    position: relative;
    width: fit-content;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: calc(var(--gutter-3) * 3);
    margin-inline: auto;
    color: var(--text-color-body);
}

.container-title {
    position: relative;
    width: fit-content;
    letter-spacing: 2px;
    margin-bottom: var(--gutter-3);
    margin-left: calc(var(--gutter-3) * 2);
    color: var(--text-color-body);
}

.container-title-italic {
    position: relative;
    letter-spacing: 2px;
    margin-bottom: var(--gutter-3);
    margin-left: calc(var(--gutter-3) * 2);
    font-style: italic;
    color: var(--text-color-body);
}

@media (max-width: 768px) {
    .section-title,
    .container-title,
    .container-title-italic {
        letter-spacing: normal;
        margin-bottom: var(--gutter-3);
    }

    .section-title-center {
        letter-spacing: normal;
        margin-bottom: calc(var(--gutter-3) * 2);
    }
}

.title-underline {
    position: relative;
    max-width: fit-content;
}

.title-underline::before {
    position: absolute;
    content: '';
    background-color: var(--clr-gray-700);
    bottom: -0.2rem;
    height: 2px;
    width: 100%;
    transition: 0.3s ease-in-out;
}

/* ======================= Colors ======================= */
.font-white {
    color: var(--white-color-body);
}
.font-dark {
    color: var(--text-color-body);
}
.bg-white {
    background: var(--white-color-body);
}
.bg-light {
    background: var(--bg-color-light-body);
}
.bg-dark {
    background: var(--bg-color-dark-body);
}
.bg-black {
    background: var(--clr-black);
}
.bg-primary {
    background-color: var(--clr-primary);
}
.bg-secondary {
    background-color: var(--clr-secondary);
}
.bg-success {
    background-color: var(--clr-success);
}
.bg-info {
    background-color: var(--clr-info);
}
.bg-warning {
    background-color: var(--clr-warning);
}
.bg-danger {
    background-color: var(--clr-danger);
}
.bg-action {
    background-color: var(--clr-action);
}

/* ====================================================== */
/*                        Gap Sizes                       */
/* ====================================================== */
.gap-xxs {
    gap: var(--gap-xxs);
}
.gap-xs {
    gap: var(--gap-xs);
}
.gap-sm {
    gap: var(--gap-sm);
}
.gap-md {
    gap: var(--gap-md);
}
.gap-lg {
    gap: var(--gap-lg);
}
.gap-xl {
    gap: var(--gap-xl);
}
.gap-xxl {
    gap: var(--gap-xxl);
}
.gap-3xl {
    gap: var(--gap-3xl);
}

/* ====================================================== */
/*                         Margins                        */
/* ====================================================== */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

/* ====================================================== */
/*                        Paddings                        */
/* ====================================================== */
.header-padding {
    padding: var(--header-padding);
}
.base-padding {
    padding: var(--base-padding);
}

.section-padding {
    padding: var(--padding-lg) calc(var(--grid-gutter-x) * 0);
}

.p-0 {
    padding: 0 0;
}
.px-0 {
    padding-inline: calc(var(--grid-gutter-x) * 0);
}

.py-0 {
    padding-block: var(--grid-gutter-y);
}

.padding-xs {
    padding: var(--padding-xs) calc(var(--grid-gutter-x) * 0);
}

.padding-sm {
    padding: var(--padding-sm) calc(var(--grid-gutter-x) * 0);
}

.padding-md {
    padding: var(--padding-md) calc(var(--grid-gutter-x) * 0);
}

.padding-lg {
    padding: var(--padding-lg) calc(var(--grid-gutter-x) * 0);
}

.padding-xl {
    padding: var(--padding-xl) calc(var(--grid-gutter-x) * 0);
}

.padding-xxl {
    padding: var(--padding-xxl) calc(var(--grid-gutter-x) * 0);
}

.padding-3xl {
    padding: var(--padding-3xl) calc(var(--grid-gutter-x) * 0);
}

/* ====================================================== */
/*                          Width                         */
/* ====================================================== */
[class^='width-'] {
    margin-inline: auto;
}
.width-xs {
    width: var(--width-xs);
}
.width-sm {
    width: var(--width-sm);
}
.width-md {
    width: var(--width-md);
}
.width-lg {
    width: var(--width-lg);
}
.width-xl {
    width: var(--width-xl);
}
.width-xxl {
    width: var(--width-xxl);
}
.width-3xl {
    width: var(--width-3xl);
}

/* [class^='width-'] p:last-child {
    margin-bottom: 0;
} */

/* ====================================================== */
/*                       Containers                       */
/* ====================================================== */
.container {
    width: min(100% - var(--gutter-xl) * 2, 1400px);
    margin-inline: auto;
}

.base-container {
    width: min(100% - var(--gutter-lg) * 2, 1500px);
    margin-inline: auto;
}

.main-container {
    width: min(100% - var(--gutter-md) * 2, 1600px);
    margin-inline: auto;
}

.extra-container {
    width: min(100% - var(--gutter-sm) * 2, 1700px);
    margin-inline: auto;
}

.container-fluid {
    width: 100%;
    padding-inline: calc(var(--grid-gutter-x) * 0.5);
}

.center-box {
    width: min(100% - var(--gutter-center) * 2, 1400px);
    margin-inline: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    width: min(100% - var(--gutter-md) * 2, 1600px);
    margin-inline: auto;
}

.bleed-container {
    --max-width: 1600px;

    display: grid;
    grid-template-columns:
        [margin-start] 1fr
        [content-start] min(100% - var(--gutter-md) * 2, var(--max-width))
        [content-end] 1fr
        [margin-end];
}

.bleed-container > * {
    grid-column: content-start / content-end;
}

.bleed-container > .full-bleed {
    grid-column: margin-start / margin-end;
    padding-inline: 0.75rem;
    margin: 1.5rem 0;
}

.full-bleed-content {
    grid-column: margin-start / margin-end;
    display: grid;
    grid-template-columns: inherit;
}
.full-bleed-content > * {
    grid-column: content-start / content-end;
}

.full-bleed-image {
    grid-column: margin-start / margin-end;
    width: 100%;
    max-height: 350px;
    margin-block: 1.5rem;
    object-fit: cover;
    object-position: bottom center;
}

/* ====================================================== */
/*                      Section Inner                     */
/* ====================================================== */
.section-inner-sm {
    width: min(100% - calc(var(--grid-gutter-x) / 2), 1920px);
    padding-inline: var(--gutter-xl);
    margin-inline: auto;
}

.section-inner-md {
    width: min(100% - calc(var(--grid-gutter-x) / 2), 1920px);
    padding-inline: var(--gutter-lg);
    margin-inline: auto;
}

.section-inner-lg {
    width: min(100% - calc(var(--grid-gutter-x) / 2), 1920px);
    padding-inline: var(--gutter-md);
    margin-inline: auto;
}

/* ====================================================== */
/*                          Flex                          */
/* ====================================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--grid-gutter-y));
    margin-left: calc(-0.5 * var(--grid-gutter-x));
    margin-right: calc(-0.5 * var(--grid-gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--grid-gutter-x) * 0.5);
    padding-left: calc(var(--grid-gutter-x) * 0.5);
    margin-top: var(--grid-gutter-y);
}

.row-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--grid-gutter-y));
}

.row-wrap > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--grid-gutter-x) * 0.5);
    padding-left: calc(var(--grid-gutter-x) * 0.5);
    margin-top: var(--grid-gutter-y);
}

.flex-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: var(--grid-gutter-y) calc(-0.5 * var(--grid-gutter-x));
}

.flex-wrap::after {
    content: '';
    display: table;
    clear: both;
}

.wrap-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.center-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
}

.center-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-items: center;
    justify-content: center;
}

.flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.center-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    text-align: center;
}

.evenly-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-evenly;
}

.around-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}

.between-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

.clearfix::after {
    display: block;
    clear: both;
    content: '';
}

.no-gutters-x {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters-y {
    margin-top: 0;
    margin-bottom: 0;
}

/* ====================================================== */
/*           Flexbox Media Querie Grid with calc          */
/* ====================================================== */
[class*='col-'] {
    position: relative;
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * var(--cols, 12));
    padding-left: calc(var(--grid-gutter-x) * 0.5);
    padding-right: calc(var(--grid-gutter-x) * 0.5);
}

.col-1 {
    --cols: 1;
}
.col-2 {
    --cols: 2;
}
.col-3 {
    --cols: 3;
}
.col-4 {
    --cols: 4;
}
.col-5 {
    --cols: 5;
}
.col-6 {
    --cols: 6;
}
.col-7 {
    --cols: 7;
}
.col-8 {
    --cols: 8;
}
.col-9 {
    --cols: 9;
}
.col-10 {
    --cols: 10;
}
.col-11 {
    --cols: 11;
}
.col-12 {
    --cols: 12;
}

/* Extra small devices (portrait phones, 320px and up) */
@media screen and (min-width: 20rem) {
    .col-xs-1 {
        --cols: 1;
    }
    .col-xs-2 {
        --cols: 2;
    }
    .col-xs-3 {
        --cols: 3;
    }
    .col-xs-4 {
        --cols: 4;
    }
    .col-xs-5 {
        --cols: 5;
    }
    .col-xs-6 {
        --cols: 6;
    }
    .col-xs-7 {
        --cols: 7;
    }
    .col-xs-8 {
        --cols: 8;
    }
    .col-xs-9 {
        --cols: 9;
    }
    .col-xs-10 {
        --cols: 10;
    }
    .col-xs-11 {
        --cols: 11;
    }
    .col-xs-12 {
        --cols: 12;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 36rem) {
    .col-sm-1 {
        --cols: 1;
    }
    .col-sm-2 {
        --cols: 2;
    }
    .col-sm-3 {
        --cols: 3;
    }
    .col-sm-4 {
        --cols: 4;
    }
    .col-sm-5 {
        --cols: 5;
    }
    .col-sm-6 {
        --cols: 6;
    }
    .col-sm-7 {
        --cols: 7;
    }
    .col-sm-8 {
        --cols: 8;
    }
    .col-sm-9 {
        --cols: 9;
    }
    .col-sm-10 {
        --cols: 10;
    }
    .col-sm-11 {
        --cols: 11;
    }
    .col-sm-12 {
        --cols: 12;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 48rem) {
    .col-md-1 {
        --cols: 1;
    }
    .col-md-2 {
        --cols: 2;
    }
    .col-md-3 {
        --cols: 3;
    }
    .col-md-4 {
        --cols: 4;
    }
    .col-md-5 {
        --cols: 5;
    }
    .col-md-6 {
        --cols: 6;
    }
    .col-md-7 {
        --cols: 7;
    }
    .col-md-8 {
        --cols: 8;
    }
    .col-md-9 {
        --cols: 9;
    }
    .col-md-10 {
        --cols: 10;
    }
    .col-md-11 {
        --cols: 11;
    }
    .col-md-12 {
        --cols: 12;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 62rem) {
    .col-lg-1 {
        --cols: 1;
    }
    .col-lg-2 {
        --cols: 2;
    }
    .col-lg-3 {
        --cols: 3;
    }
    .col-lg-4 {
        --cols: 4;
    }
    .col-lg-5 {
        --cols: 5;
    }
    .col-lg-6 {
        --cols: 6;
    }
    .col-lg-7 {
        --cols: 7;
    }
    .col-lg-8 {
        --cols: 8;
    }
    .col-lg-9 {
        --cols: 9;
    }
    .col-lg-10 {
        --cols: 10;
    }
    .col-lg-11 {
        --cols: 11;
    }
    .col-lg-12 {
        --cols: 12;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 75rem) {
    .col-xl-1 {
        --cols: 1;
    }
    .col-xl-2 {
        --cols: 2;
    }
    .col-xl-3 {
        --cols: 3;
    }
    .col-xl-4 {
        --cols: 4;
    }
    .col-xl-5 {
        --cols: 5;
    }
    .col-xl-6 {
        --cols: 6;
    }
    .col-xl-7 {
        --cols: 7;
    }
    .col-xl-8 {
        --cols: 8;
    }
    .col-xl-9 {
        --cols: 9;
    }
    .col-xl-10 {
        --cols: 10;
    }
    .col-xl-11 {
        --cols: 11;
    }
    .col-xl-12 {
        --cols: 12;
    }
}

/* Extra Extra large devices (extra large desktops, 1400px and up) */
@media screen and (min-width: 87.5rem) {
    .col-xxl-1 {
        --cols: 1;
    }
    .col-xxl-2 {
        --cols: 2;
    }
    .col-xxl-3 {
        --cols: 3;
    }
    .col-xxl-4 {
        --cols: 4;
    }
    .col-xxl-5 {
        --cols: 5;
    }
    .col-xxl-6 {
        --cols: 6;
    }
    .col-xxl-7 {
        --cols: 7;
    }
    .col-xxl-8 {
        --cols: 8;
    }
    .col-xxl-9 {
        --cols: 9;
    }
    .col-xxl-10 {
        --cols: 10;
    }
    .col-xxl-11 {
        --cols: 11;
    }
    .col-xxl-12 {
        --cols: 12;
    }
}

/* ====================================================== */
/*                       Row Columns                      */
/* ====================================================== */
[class*='row-cols-'] > * {
    flex: 0 0 auto;
    width: calc(100% / var(--row-cols, 1));
}

.row-cols-1 {
    --row-cols: 1;
}
.row-cols-2 {
    --row-cols: 2;
}
.row-cols-3 {
    --row-cols: 3;
}
.row-cols-4 {
    --row-cols: 4;
}
.row-cols-6 {
    --row-cols: 6;
}

/* Extra small devices (portrait phones, 320px and up) */
@media screen and (min-width: 320px) {
    .row-cols-xs-1 {
        --row-cols: 1;
    }
    .row-cols-xs-2 {
        --row-cols: 2;
    }
    .row-cols-xs-3 {
        --row-cols: 3;
    }
    .row-cols-xs-4 {
        --row-cols: 4;
    }
    .row-cols-xs-6 {
        --row-cols: 6;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .row-cols-sm-1 {
        --row-cols: 1;
    }
    .row-cols-sm-2 {
        --row-cols: 2;
    }
    .row-cols-sm-3 {
        --row-cols: 3;
    }
    .row-cols-sm-4 {
        --row-cols: 4;
    }
    .row-cols-sm-6 {
        --row-cols: 6;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .row-cols-md-1 {
        --row-cols: 1;
    }
    .row-cols-md-2 {
        --row-cols: 2;
    }
    .row-cols-md-3 {
        --row-cols: 3;
    }
    .row-cols-md-4 {
        --row-cols: 4;
    }
    .row-cols-md-6 {
        --row-cols: 6;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .row-cols-lg-1 {
        --row-cols: 1;
    }
    .row-cols-lg-2 {
        --row-cols: 2;
    }
    .row-cols-lg-3 {
        --row-cols: 3;
    }
    .row-cols-lg-4 {
        --row-cols: 4;
    }
    .row-cols-lg-6 {
        --row-cols: 6;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .row-cols-xl-1 {
        --row-cols: 1;
    }
    .row-cols-xl-2 {
        --row-cols: 2;
    }
    .row-cols-xl-3 {
        --row-cols: 3;
    }
    .row-cols-xl-4 {
        --row-cols: 4;
    }
    .row-cols-xl-6 {
        --row-cols: 6;
    }
}

/* Extra Extra large devices (extra large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    .row-cols-xxl-1 {
        --row-cols: 1;
    }
    .row-cols-xxl-2 {
        --row-cols: 2;
    }
    .row-cols-xxl-3 {
        --row-cols: 3;
    }
    .row-cols-xxl-4 {
        --row-cols: 4;
    }
    .row-cols-xxl-6 {
        --row-cols: 6;
    }
}

/* ====================================================== */
/*                     Offset & Order                     */
/* ====================================================== */
[class*='offset-'] {
    margin-left: calc((100% / var(--grid-columns, 12)) * var(--offset-cols, 0));
}

.order-first {
    order: -1;
}
.order-last {
    order: 13;
}
.order-0 {
    order: 0;
}
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 4;
}
.order-5 {
    order: 5;
}
.order-6 {
    order: 6;
}
.order-7 {
    order: 7;
}
.order-8 {
    order: 8;
}
.order-9 {
    order: 9;
}
.order-10 {
    order: 10;
}
.order-11 {
    order: 11;
}
.order-12 {
    order: 12;
}
/* ======================= Offset ======================= */
.offset-0 {
    --offset-cols: 0;
}
.offset-1 {
    --offset-cols: 1;
}
.offset-2 {
    --offset-cols: 2;
}
.offset-3 {
    --offset-cols: 3;
}
.offset-4 {
    --offset-cols: 4;
}
.offset-5 {
    --offset-cols: 5;
}
.offset-6 {
    --offset-cols: 6;
}
.offset-7 {
    --offset-cols: 7;
}
.offset-8 {
    --offset-cols: 8;
}
.offset-9 {
    --offset-cols: 9;
}
.offset-10 {
    --offset-cols: 10;
}
.offset-11 {
    --offset-cols: 11;
}

/* Extra small devices (portrait phones, 320px and up) */
@media screen and (min-width: 20rem) {
    .order-xs-first {
        order: -1;
    }
    .order-xs-last {
        order: 13;
    }
    .order-xs-0 {
        order: 0;
    }
    .order-xs-1 {
        order: 1;
    }
    .order-xs-2 {
        order: 2;
    }
    .order-xs-3 {
        order: 3;
    }
    .order-xs-4 {
        order: 4;
    }
    .order-xs-5 {
        order: 5;
    }
    .order-xs-6 {
        order: 6;
    }
    .order-xs-7 {
        order: 7;
    }
    .order-xs-8 {
        order: 8;
    }
    .order-xs-9 {
        order: 9;
    }
    .order-xs-10 {
        order: 10;
    }
    .order-xs-11 {
        order: 11;
    }
    .order-xs-12 {
        order: 12;
    }
    /* ======================= Offset ======================= */
    .offset-xs-0 {
        --offset-cols: 0;
    }
    .offset-xs-1 {
        --offset-cols: 1;
    }
    .offset-xs-2 {
        --offset-cols: 2;
    }
    .offset-xs-3 {
        --offset-cols: 3;
    }
    .offset-xs-4 {
        --offset-cols: 4;
    }
    .offset-xs-5 {
        --offset-cols: 5;
    }
    .offset-xs-6 {
        --offset-cols: 6;
    }
    .offset-xs-7 {
        --offset-cols: 7;
    }
    .offset-xs-8 {
        --offset-cols: 8;
    }
    .offset-xs-9 {
        --offset-cols: 9;
    }
    .offset-xs-10 {
        --offset-cols: 10;
    }
    .offset-xs-11 {
        --offset-cols: 11;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 36rem) {
    .order-sm-first {
        order: -1;
    }
    .order-sm-last {
        order: 13;
    }
    .order-sm-0 {
        order: 0;
    }
    .order-sm-1 {
        order: 1;
    }
    .order-sm-2 {
        order: 2;
    }
    .order-sm-3 {
        order: 3;
    }
    .order-sm-4 {
        order: 4;
    }
    .order-sm-5 {
        order: 5;
    }
    .order-sm-6 {
        order: 6;
    }
    .order-sm-7 {
        order: 7;
    }
    .order-sm-8 {
        order: 8;
    }
    .order-sm-9 {
        order: 9;
    }
    .order-sm-10 {
        order: 10;
    }
    .order-sm-11 {
        order: 11;
    }
    .order-sm-12 {
        order: 12;
    }
    /* ======================= Offset ======================= */
    .offset-sm-0 {
        --offset-cols: 0;
    }
    .offset-sm-1 {
        --offset-cols: 1;
    }
    .offset-sm-2 {
        --offset-cols: 2;
    }
    .offset-sm-3 {
        --offset-cols: 3;
    }
    .offset-sm-4 {
        --offset-cols: 4;
    }
    .offset-sm-5 {
        --offset-cols: 5;
    }
    .offset-sm-6 {
        --offset-cols: 6;
    }
    .offset-sm-7 {
        --offset-cols: 7;
    }
    .offset-sm-8 {
        --offset-cols: 8;
    }
    .offset-sm-9 {
        --offset-cols: 9;
    }
    .offset-sm-10 {
        --offset-cols: 10;
    }
    .offset-sm-11 {
        --offset-cols: 11;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 48rem) {
    .order-md-first {
        order: -1;
    }
    .order-md-last {
        order: 13;
    }
    .order-md-0 {
        order: 0;
    }
    .order-md-1 {
        order: 1;
    }
    .order-md-2 {
        order: 2;
    }
    .order-md-3 {
        order: 3;
    }
    .order-md-4 {
        order: 4;
    }
    .order-md-5 {
        order: 5;
    }
    .order-md-6 {
        order: 6;
    }
    .order-md-7 {
        order: 7;
    }
    .order-md-8 {
        order: 8;
    }
    .order-md-9 {
        order: 9;
    }
    .order-md-10 {
        order: 10;
    }
    .order-md-11 {
        order: 11;
    }
    .order-md-12 {
        order: 12;
    }
    /* ======================= Offset ======================= */
    .offset-md-0 {
        --offset-cols: 0;
    }
    .offset-md-1 {
        --offset-cols: 1;
    }
    .offset-md-2 {
        --offset-cols: 2;
    }
    .offset-md-3 {
        --offset-cols: 3;
    }
    .offset-md-4 {
        --offset-cols: 4;
    }
    .offset-md-5 {
        --offset-cols: 5;
    }
    .offset-md-6 {
        --offset-cols: 6;
    }
    .offset-md-7 {
        --offset-cols: 7;
    }
    .offset-md-8 {
        --offset-cols: 8;
    }
    .offset-md-9 {
        --offset-cols: 9;
    }
    .offset-md-10 {
        --offset-cols: 10;
    }
    .offset-md-11 {
        --offset-cols: 11;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 62rem) {
    .order-lg-first {
        order: -1;
    }
    .order-lg-last {
        order: 13;
    }
    .order-lg-0 {
        order: 0;
    }
    .order-lg-1 {
        order: 1;
    }
    .order-lg-2 {
        order: 2;
    }
    .order-lg-3 {
        order: 3;
    }
    .order-lg-4 {
        order: 4;
    }
    .order-lg-5 {
        order: 5;
    }
    .order-lg-6 {
        order: 6;
    }
    .order-lg-7 {
        order: 7;
    }
    .order-lg-8 {
        order: 8;
    }
    .order-lg-9 {
        order: 9;
    }
    .order-lg-10 {
        order: 10;
    }
    .order-lg-11 {
        order: 11;
    }
    .order-lg-12 {
        order: 12;
    }
    /* ======================= Offset ======================= */
    .offset-lg-0 {
        --offset-cols: 0;
    }
    .offset-lg-1 {
        --offset-cols: 1;
    }
    .offset-lg-2 {
        --offset-cols: 2;
    }
    .offset-lg-3 {
        --offset-cols: 3;
    }
    .offset-lg-4 {
        --offset-cols: 4;
    }
    .offset-lg-5 {
        --offset-cols: 5;
    }
    .offset-lg-6 {
        --offset-cols: 6;
    }
    .offset-lg-7 {
        --offset-cols: 7;
    }
    .offset-lg-8 {
        --offset-cols: 8;
    }
    .offset-lg-9 {
        --offset-cols: 9;
    }
    .offset-lg-10 {
        --offset-cols: 10;
    }
    .offset-lg-11 {
        --offset-cols: 11;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 75rem) {
    .order-xl-first {
        order: -1;
    }
    .order-xl-last {
        order: 13;
    }
    .order-xl-0 {
        order: 0;
    }
    .order-xl-1 {
        order: 1;
    }
    .order-xl-2 {
        order: 2;
    }
    .order-xl-3 {
        order: 3;
    }
    .order-xl-4 {
        order: 4;
    }
    .order-xl-5 {
        order: 5;
    }
    .order-xl-6 {
        order: 6;
    }
    .order-xl-7 {
        order: 7;
    }
    .order-xl-8 {
        order: 8;
    }
    .order-xl-9 {
        order: 9;
    }
    .order-xl-10 {
        order: 10;
    }
    .order-xl-11 {
        order: 11;
    }
    .order-xl-12 {
        order: 12;
    }
    /* ======================= Offset ======================= */
    .offset-xl-0 {
        --offset-cols: 0;
    }
    .offset-xl-1 {
        --offset-cols: 1;
    }
    .offset-xl-2 {
        --offset-cols: 2;
    }
    .offset-xl-3 {
        --offset-cols: 3;
    }
    .offset-xl-4 {
        --offset-cols: 4;
    }
    .offset-xl-5 {
        --offset-cols: 5;
    }
    .offset-xl-6 {
        --offset-cols: 6;
    }
    .offset-xl-7 {
        --offset-cols: 7;
    }
    .offset-xl-8 {
        --offset-cols: 8;
    }
    .offset-xl-9 {
        --offset-cols: 9;
    }
    .offset-xl-10 {
        --offset-cols: 10;
    }
    .offset-xl-11 {
        --offset-cols: 11;
    }
}

/* Extra Extra large devices (extra large desktops, 1400px and up) */
@media screen and (min-width: 87.5rem) {
    .order-xxl-first {
        order: -1;
    }
    .order-xxl-last {
        order: 13;
    }
    .order-xxl-0 {
        order: 0;
    }
    .order-xxl-1 {
        order: 1;
    }
    .order-xxl-2 {
        order: 2;
    }
    .order-xxl-3 {
        order: 3;
    }
    .order-xxl-4 {
        order: 4;
    }
    .order-xxl-5 {
        order: 5;
    }
    .order-xxl-6 {
        order: 6;
    }
    .order-xxl-7 {
        order: 7;
    }
    .order-xxl-8 {
        order: 8;
    }
    .order-xxl-9 {
        order: 9;
    }
    .order-xxl-10 {
        order: 10;
    }
    .order-xxl-11 {
        order: 11;
    }
    .order-xxl-12 {
        order: 12;
    }
    /* ======================= Offset ======================= */
    .offset-xxl-0 {
        --offset-cols: 0;
    }
    .offset-xxl-1 {
        --offset-cols: 1;
    }
    .offset-xxl-2 {
        --offset-cols: 2;
    }
    .offset-xxl-3 {
        --offset-cols: 3;
    }
    .offset-xxl-4 {
        --offset-cols: 4;
    }
    .offset-xxl-5 {
        --offset-cols: 5;
    }
    .offset-xxl-6 {
        --offset-cols: 6;
    }
    .offset-xxl-7 {
        --offset-cols: 7;
    }
    .offset-xxl-8 {
        --offset-cols: 8;
    }
    .offset-xxl-9 {
        --offset-cols: 9;
    }
    .offset-xxl-10 {
        --offset-cols: 10;
    }
    .offset-xxl-11 {
        --offset-cols: 11;
    }
}

/* ====================================================== */
/*                    Float & Position                    */
/* ====================================================== */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

/* ====================================================== */
/*                      Display Style                     */
/* ====================================================== */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: -ms-flexbox;
    display: flex;
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none;
    }
    .d-sm-block {
        display: block;
    }
    .d-sm-flex {
        display: -ms-flexbox;
        display: flex;
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display: none;
    }
    .d-md-block {
        display: block;
    }
    .d-md-flex {
        display: -ms-flexbox;
        display: flex;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none;
    }
    .d-lg-block {
        display: block;
    }
    .d-lg-flex {
        display: -ms-flexbox;
        display: flex;
    }
}

@media (min-width: 1200px) {
    .d-xl-none {
        display: none;
    }
    .d-xl-block {
        display: block;
    }
    .d-xl-flex {
        display: -ms-flexbox;
        display: flex;
    }
}

@media (min-width: 1400px) {
    .d-xxl-none {
        display: none;
    }
    .d-xxl-block {
        display: block;
    }
    .d-xxl-flex {
        display: -ms-flexbox;
        display: flex;
    }
}

/* ====================================================== */
/*                         Sticky                         */
/* ====================================================== */
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

@media (min-width: 576px) {
    .sticky-sm-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

@media (min-width: 768px) {
    .sticky-md-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

@media (min-width: 992px) {
    .sticky-lg-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

@media (min-width: 1200px) {
    .sticky-xl-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

@media (min-width: 1400px) {
    .sticky-xxl-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

/* ====================================================== */
/*                       Arrow Style                      */
/* ====================================================== */
.arrow {
    border: solid #212121;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
}

.arrow-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.arrow-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.arrow-curved {
    position: relative;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid #212121;
    transform: rotate(10deg);
}

.arrow-curved::after {
    content: '';
    position: absolute;
    border: 0 solid transparent;
    border-top: 3px solid #212121;
    border-radius: 20px 0 0 0;
    top: -12px;
    left: -9px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
}

/* ====================================================== */
/*                  Grid Max Column count                 */
/* ====================================================== */
[class*='grid-max-column-'] {
    --grid-gap: 1.5rem;
    --min-col-size: 20rem;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--min-col-size), (100% - (var(--max-cols) - 1) * var(--grid-gap)) / var(--max-cols))), 1fr));
}

.grid-max-column-4 {
    --max-cols: 4;
    --min-col-size: 16.5rem;
}
.grid-max-column-3 {
    --max-cols: 3;
}
.grid-max-column-2 {
    --max-cols: 2;
}

/* ====================================================== */
/*                        Auto GRID                       */
/* ====================================================== */
[class*='auto-grid'] {
    display: grid;
    gap: 1.5rem;
}

.auto-grid-1-1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auto-grid-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.auto-grid-1-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.auto-grid-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.auto-grid-2-3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.auto-grid-3-1 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.auto-grid-3-2 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

@media (max-width: 768px) {
    [class*='auto-grid'] {
        grid-template-columns: 1fr; /* Vagy minmax(0, 1fr) */
    }
}

/* ====================================================== */
/*                    GRID Column Style                   */
/* ====================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.grid-1 {
    grid-column: auto/span 1;
}

.grid-2 {
    grid-column: auto/span 2;
}

.grid-3 {
    grid-column: auto/span 3;
}

.grid-4 {
    grid-column: auto/span 4;
}

.grid-5 {
    grid-column: auto/span 5;
}

.grid-6 {
    grid-column: auto/span 6;
}

.grid-7 {
    grid-column: auto/span 7;
}

.grid-8 {
    grid-column: auto/span 8;
}

.grid-9 {
    grid-column: auto/span 9;
}

.grid-10 {
    grid-column: auto/span 10;
}

.grid-11 {
    grid-column: auto/span 11;
}

.grid-12 {
    grid-column: auto/span 12;
}

.gap-0 {
    gap: 0rem;
}

.grid-offset-1 {
    grid-column-start: 1;
}

.grid-offset-2 {
    grid-column-start: 2;
}

.grid-offset-3 {
    grid-column-start: 3;
}

.grid-offset-4 {
    grid-column-start: 4;
}

.grid-offset-5 {
    grid-column-start: 5;
}

.grid-offset-6 {
    grid-column-start: 6;
}

.grid-offset-7 {
    grid-column-start: 7;
}

.grid-offset-8 {
    grid-column-start: 8;
}

.grid-offset-9 {
    grid-column-start: 9;
}

.grid-offset-10 {
    grid-column-start: 10;
}

.grid-offset-11 {
    grid-column-start: 11;
}

@media (min-width: 320px) {
    .grid-xs-1 {
        grid-column: auto/span 1;
    }

    .grid-xs-2 {
        grid-column: auto/span 2;
    }

    .grid-xs-3 {
        grid-column: auto/span 3;
    }

    .grid-xs-4 {
        grid-column: auto/span 4;
    }

    .grid-xs-5 {
        grid-column: auto/span 5;
    }

    .grid-xs-6 {
        grid-column: auto/span 6;
    }

    .grid-xs-7 {
        grid-column: auto/span 7;
    }

    .grid-xs-8 {
        grid-column: auto/span 8;
    }

    .grid-xs-9 {
        grid-column: auto/span 9;
    }

    .grid-xs-10 {
        grid-column: auto/span 10;
    }

    .grid-xs-11 {
        grid-column: auto/span 11;
    }

    .grid-xs-12 {
        grid-column: auto/span 12;
    }

    .gap-xs-0 {
        gap: 0rem;
    }
}

@media (min-width: 576px) {
    .grid-sm-1 {
        grid-column: auto/span 1;
    }

    .grid-sm-2 {
        grid-column: auto/span 2;
    }

    .grid-sm-3 {
        grid-column: auto/span 3;
    }

    .grid-sm-4 {
        grid-column: auto/span 4;
    }

    .grid-sm-5 {
        grid-column: auto/span 5;
    }

    .grid-sm-6 {
        grid-column: auto/span 6;
    }

    .grid-sm-7 {
        grid-column: auto/span 7;
    }

    .grid-sm-8 {
        grid-column: auto/span 8;
    }

    .grid-sm-9 {
        grid-column: auto/span 9;
    }

    .grid-sm-10 {
        grid-column: auto/span 10;
    }

    .grid-sm-11 {
        grid-column: auto/span 11;
    }

    .grid-sm-12 {
        grid-column: auto/span 12;
    }

    .gap-sm-0 {
        gap: 0rem;
    }

    .grid-offset-sm-1 {
        grid-column-start: 1;
    }

    .grid-offset-sm-2 {
        grid-column-start: 2;
    }

    .grid-offset-sm-3 {
        grid-column-start: 3;
    }

    .grid-offset-sm-4 {
        grid-column-start: 4;
    }

    .grid-offset-sm-5 {
        grid-column-start: 5;
    }

    .grid-offset-sm-6 {
        grid-column-start: 6;
    }

    .grid-offset-sm-7 {
        grid-column-start: 7;
    }

    .grid-offset-sm-8 {
        grid-column-start: 8;
    }

    .grid-offset-sm-9 {
        grid-column-start: 9;
    }

    .grid-offset-sm-10 {
        grid-column-start: 10;
    }

    .grid-offset-sm-11 {
        grid-column-start: 11;
    }
}

@media (min-width: 768px) {
    .grid-md-1 {
        grid-column: auto/span 1;
    }

    .grid-md-2 {
        grid-column: auto/span 2;
    }

    .grid-md-3 {
        grid-column: auto/span 3;
    }

    .grid-md-4 {
        grid-column: auto/span 4;
    }

    .grid-md-5 {
        grid-column: auto/span 5;
    }

    .grid-md-6 {
        grid-column: auto/span 6;
    }

    .grid-md-7 {
        grid-column: auto/span 7;
    }

    .grid-md-8 {
        grid-column: auto/span 8;
    }

    .grid-md-9 {
        grid-column: auto/span 9;
    }

    .grid-md-10 {
        grid-column: auto/span 10;
    }

    .grid-md-11 {
        grid-column: auto/span 11;
    }

    .grid-md-12 {
        grid-column: auto/span 12;
    }

    .gap-md-0 {
        gap: 0rem;
    }

    .grid-offset-md-1 {
        grid-column-start: 1;
    }

    .grid-offset-md-2 {
        grid-column-start: 2;
    }

    .grid-offset-md-3 {
        grid-column-start: 3;
    }

    .grid-offset-md-4 {
        grid-column-start: 4;
    }

    .grid-offset-md-5 {
        grid-column-start: 5;
    }

    .grid-offset-md-6 {
        grid-column-start: 6;
    }

    .grid-offset-md-7 {
        grid-column-start: 7;
    }

    .grid-offset-md-8 {
        grid-column-start: 8;
    }

    .grid-offset-md-9 {
        grid-column-start: 9;
    }

    .grid-offset-md-10 {
        grid-column-start: 10;
    }
    .grid-offset-md-11 {
        grid-column-start: 11;
    }
}

@media (min-width: 992px) {
    .grid-lg-1 {
        grid-column: auto/span 1;
    }

    .grid-lg-2 {
        grid-column: auto/span 2;
    }

    .grid-lg-3 {
        grid-column: auto/span 3;
    }

    .grid-lg-4 {
        grid-column: auto/span 4;
    }

    .grid-lg-5 {
        grid-column: auto/span 5;
    }

    .grid-lg-6 {
        grid-column: auto/span 6;
    }

    .grid-lg-7 {
        grid-column: auto/span 7;
    }

    .grid-lg-8 {
        grid-column: auto/span 8;
    }

    .grid-lg-9 {
        grid-column: auto/span 9;
    }

    .grid-lg-10 {
        grid-column: auto/span 10;
    }

    .grid-lg-11 {
        grid-column: auto/span 11;
    }

    .grid-lg-12 {
        grid-column: auto/span 12;
    }

    .gap-lg-0 {
        gap: 0rem;
    }

    .grid-offset-lg-1 {
        grid-column-start: 1;
    }

    .grid-offset-lg-2 {
        grid-column-start: 2;
    }

    .grid-offset-lg-3 {
        grid-column-start: 3;
    }

    .grid-offset-lg-4 {
        grid-column-start: 4;
    }

    .grid-offset-lg-5 {
        grid-column-start: 5;
    }

    .grid-offset-lg-6 {
        grid-column-start: 6;
    }

    .grid-offset-lg-7 {
        grid-column-start: 7;
    }

    .grid-offset-lg-8 {
        grid-column-start: 8;
    }

    .grid-offset-lg-9 {
        grid-column-start: 9;
    }

    .grid-offset-lg-10 {
        grid-column-start: 10;
    }

    .grid-offset-lg-11 {
        grid-column-start: 11;
    }
}

@media (min-width: 1200px) {
    .grid-xl-1 {
        grid-column: auto/span 1;
    }

    .grid-xl-2 {
        grid-column: auto/span 2;
    }

    .grid-xl-3 {
        grid-column: auto/span 3;
    }

    .grid-xl-4 {
        grid-column: auto/span 4;
    }

    .grid-xl-5 {
        grid-column: auto/span 5;
    }

    .grid-xl-6 {
        grid-column: auto/span 6;
    }

    .grid-xl-7 {
        grid-column: auto/span 7;
    }

    .grid-xl-8 {
        grid-column: auto/span 8;
    }

    .grid-xl-9 {
        grid-column: auto/span 9;
    }

    .grid-xl-10 {
        grid-column: auto/span 10;
    }

    .grid-xl-11 {
        grid-column: auto/span 11;
    }

    .grid-xl-12 {
        grid-column: auto/span 12;
    }

    .gap-xl-0 {
        gap: 0rem;
    }

    .grid-offset-xl-1 {
        grid-column-start: 1;
    }

    .grid-offset-xl-2 {
        grid-column-start: 2;
    }

    .grid-offset-xl-3 {
        grid-column-start: 3;
    }

    .grid-offset-xl-4 {
        grid-column-start: 4;
    }

    .grid-offset-xl-5 {
        grid-column-start: 5;
    }

    .grid-offset-xl-6 {
        grid-column-start: 6;
    }

    .grid-offset-xl-7 {
        grid-column-start: 7;
    }

    .grid-offset-xl-8 {
        grid-column-start: 8;
    }

    .grid-offset-xl-9 {
        grid-column-start: 9;
    }

    .grid-offset-xl-10 {
        grid-column-start: 10;
    }

    .grid-offset-xl-11 {
        grid-column-start: 11;
    }
}

@media (min-width: 1400px) {
    .grid-xxl-1 {
        grid-column: auto/span 1;
    }

    .grid-xxl-2 {
        grid-column: auto/span 2;
    }

    .grid-xxl-3 {
        grid-column: auto/span 3;
    }

    .grid-xxl-4 {
        grid-column: auto/span 4;
    }

    .grid-xxl-5 {
        grid-column: auto/span 5;
    }

    .grid-xxl-6 {
        grid-column: auto/span 6;
    }

    .grid-xxl-7 {
        grid-column: auto/span 7;
    }

    .grid-xxl-8 {
        grid-column: auto/span 8;
    }

    .grid-xxl-9 {
        grid-column: auto/span 9;
    }

    .grid-xxl-10 {
        grid-column: auto/span 10;
    }

    .grid-xxl-11 {
        grid-column: auto/span 11;
    }

    .grid-xxl-12 {
        grid-column: auto/span 12;
    }

    .gap-xxl-0 {
        gap: 0rem;
    }

    .grid-offset-xxl-1 {
        grid-column-start: 1;
    }

    .grid-offset-xxl-2 {
        grid-column-start: 2;
    }

    .grid-offset-xxl-3 {
        grid-column-start: 3;
    }

    .grid-offset-xxl-4 {
        grid-column-start: 4;
    }

    .grid-offset-xxl-5 {
        grid-column-start: 5;
    }

    .grid-offset-xxl-6 {
        grid-column-start: 6;
    }

    .grid-offset-xxl-7 {
        grid-column-start: 7;
    }

    .grid-offset-xxl-8 {
        grid-column-start: 8;
    }

    .grid-offset-xxl-9 {
        grid-column-start: 9;
    }

    .grid-offset-xxl-10 {
        grid-column-start: 10;
    }

    .grid-offset-xxl-11 {
        grid-column-start: 11;
    }
}

/* ==========================================
# Cell-Container & Cell-Box
========================================== */
.cell-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cell-box {
    --cols: 12;
    width: calc(100% / var(--grid-columns) * var(--cols));
    flex-grow: 0;
    flex-shrink: 0;
}

@media (min-width: 576px) {
    .cell-box-sm {
        --cols: 6;
    }
}

@media (min-width: 768px) {
    .cell-box-md {
        --cols: 6;
    }
}

@media (min-width: 992px) {
    .cell-box-lg {
        --cols: 6;
    }
}

@media (min-width: 1200px) {
    .cell-box-xl {
        --cols: 6;
    }
}

@media (min-width: 1400px) {
    .cell-box-xxl {
        --cols: 6;
    }
}

/* ====================================================== */
/*                     Blink Animation                    */
/* ====================================================== */
.blink {
    animation: blinker 2.5s linear infinite;
    font-family: inherit;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* ====================================================== */
/*                      Button Style                      */
/* ====================================================== */
#button,
.button {
    position: relative;
    padding: 6px 20px;
    font-size: 14px;
    font-weight: var(--fw-regular);
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid transparent;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: transform all 0.4s;
    -moz-transition: transform all 0.4s;
    transition: transform all 0.4s;
}
#button:hover,
.button:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

#button.extra-small,
.button.extra-small {
    padding: 6px 20px;
    font-size: 14px;
}
#button.small,
.button.small {
    padding: 10px 30px;
    font-size: 14px;
}
#button.medium,
.button.medium {
    padding: 12px 40px;
    font-size: 16px;
}
#button.large,
.button.large {
    padding: 14px 50px;
    font-size: 18px;
}
#button.extra-large,
.button.extra-large {
    padding: 16px 80px;
    font-size: 20px;
}

/* ====================================================== */
/*                     Underline Style                    */
/* ====================================================== */
[class*='underline-'] {
    position: relative;
    width: fit-content;
}

[class*='underline-']::after {
    content: '';
    position: absolute;
    bottom: -0.2rem;
    display: flex;
    border-top: 2px solid #212529;
    transition: all 0.4s;
}

.underline-all::after {
    width: 100%;
}

.underline-animated::after {
    width: 0;
}

.underline-animated:hover::after {
    width: 100%;
}

@media (min-width: 576px) {
    .underline-sm::after {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .underline-md::after {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .underline-lg::after {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .underline-xl::after {
        width: 100%;
    }
}

@media (min-width: 1400px) {
    .underline-xxl::after {
        width: 100%;
    }
}

.underline-hr {
    position: relative;
    max-width: fit-content;
}

.underline-hr::before {
    content: '';
    background-color: #212529;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    transition: 0.3s ease-in-out;
}

.underline-hr:hover::before {
    content: '';
    background-color: #212529;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
}

.hover-underline {
    display: block;
    position: relative;
    width: fit-content;
}

.hover-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #212529;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.underline-link,
.underline-link:link,
.underline-link:visited {
    color: #fff;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
}

.underline-link::before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, #fff, #fff);
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease-in-out;
}

.underline-link:hover::before {
    background-size: 100% 2px;
}

/* ====================================================== */
/*                  Horizontal Rule Style                 */
/* ====================================================== */
.hr-line-top {
    width: 100%;
    height: 10px;
    background-image: linear-gradient(180deg, var(--clr-blue-dark-800) 50%, var(--clr-gray-200) 50%);
}

.hr-line-bottom {
    width: 100%;
    height: 10px;
    background-image: linear-gradient(180deg, var(--clr-gray-200) 50%, var(--clr-blue-dark-800) 50%);
}

.hr-1 {
    border: 0;
    height: 1px;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.hr-2 {
    border: 0;
    height: 2px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, hsla(0, 0%, 0%, 0)), color-stop(50%, hsla(0, 0%, 0%, 0.75)), color-stop(100%, hsla(0, 0%, 0%, 0)));
    background: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.75) 50%, hsla(0, 0%, 0%, 0) 100%);
    background: -moz-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.75) 50%, hsla(0, 0%, 0%, 0) 100%);
    background: -ms-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.75) 50%, hsla(0, 0%, 0%, 0) 100%);
    background: -o-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.75) 50%, hsla(0, 0%, 0%, 0) 100%);
    background: linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.75) 50%, hsla(0, 0%, 0%, 0) 100%);
}

.hr-blue-gradient {
    margin: 1rem auto;
    display: block;
    border: none;
    height: 1px;
    background: var(--clr-blue-primary-600);
    background: linear-gradient(to right, transparent, var(--clr-blue-primary-600), var(--clr-blue-primary-400), var(--clr-blue-primary-600), transparent);
}

.hr-gradient {
    display: block;
    height: 1px;
    margin: 1rem auto;
    background-color: var(--clr-gray-100);
    background: linear-gradient(to right, transparent, var(--clr-gray-300), var(--clr-gray-800), var(--clr-gray-300), transparent);
    border: none;
}

.hr-white {
    display: block;
    height: 1px;
    margin: 1rem auto;
    background-color: var(--white-color-body);
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), var(--white-color-body), rgba(255, 255, 255, 0.7), transparent);
    border: none;
}

.hr-rainbow {
    display: block;
    height: 2px;
    margin: 1rem auto;
    background: var(gray-100);
    background: linear-gradient(90deg, #ff0000, #ffa500, #ffff00, #008000, blue, indigo, violet);
    border: none;
}

/* ====================================================== */
/*                      Shadow Style                      */
/* ====================================================== */
.depth-shadow-1 {
    -webkit-box-shadow:
        0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow:
        0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.depth-shadow-2 {
    -webkit-box-shadow:
        0 5px 11px 0 rgba(0, 0, 0, 0.18),
        0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow:
        0 5px 11px 0 rgba(0, 0, 0, 0.18),
        0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.depth-shadow-3 {
    -webkit-box-shadow:
        0 8px 17px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow:
        0 8px 17px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.depth-shadow-4 {
    -webkit-box-shadow:
        0 12px 15px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow:
        0 12px 15px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.depth-shadow-5 {
    -webkit-box-shadow:
        0 16px 28px 0 rgba(0, 0, 0, 0.22),
        0 25px 55px 0 rgba(0, 0, 0, 0.21);
    box-shadow:
        0 16px 28px 0 rgba(0, 0, 0, 0.22),
        0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.depth-shadow-6 {
    -webkit-box-shadow:
        0 27px 24px 0 rgba(0, 0, 0, 0.2),
        0 40px 77px 0 rgba(0, 0, 0, 0.22);
    box-shadow:
        0 27px 24px 0 rgba(0, 0, 0, 0.2),
        0 40px 77px 0 rgba(0, 0, 0, 0.22);
}