/*

Theme Name: Branchout Studios Theme
Theme URI: https://theme.co/pro/
Author: Branchout Studios
Author URI: https://branchoutstudios.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

:root {
	
	/* Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --max-width:     1920px;

	
	/* Color Variables */
	--white:            #ffffff;
	--black:            #000000;
	--dark:            	#0c0d10;
	--gray-100:         #f8f9fa;
	--gray-200:         #e9ecef;
	--gray-300:         #dee2e6;
	--gray-400:         #ced4da;
	--gray-500:         #adb5bd;
	--gray-600:         #6c757d;
	--gray-700:         #495057;
	--gray-800:         #343a40;
	--gray-900:         #212529;
	
	--brand-color-1: #e47c3a; /* Warm Orange */
	--brand-color-2: #4e3b97; /* Deep Violet */
	--brand-color-3: #0fd890; /* Soft Mint */
	--brand-color-4: #4fc2ba; /* Aqua Teal */
	--brand-color-5: #2578bc; /* Cool Blue */
	
	/* Color Mixins */
	--primary-color:          #ffffff;
	--primary-color-dark:     color-mix(in srgb, var(--primary-color) 80%, black); /* 80% primary colour + 20% black */
	--primary-color-light:    color-mix(in srgb, var(--primary-color) 80%, white); /* 80% primary colour + 20% white */
	--fullscreen-menu-bg:     hsl(from var(--primary-color) h s l / 0.95); /* primary colour RGB at 95% */

	/* Transitions */
	--transition-fast:      150ms ease-in-out;
	--transition-normal:    300ms ease-in-out;
	--transition-slow:      500ms ease-in-out;
	
	/* Fluid Typography Base  - 14px ~ 16px */
    --font-size-base:   clamp(0.875rem, 0.8036rem + 0.3571vw, 1rem);

    /* Type Scale */
    --type-scale:       clamp(1.2, 1.175 + 0.125vw, 1.25);

    /* Fluid Typography Scale */
    --font-size-xs:     calc(var(--font-size-base) / var(--type-scale) / var(--type-scale));
    --font-size-sm:     calc(var(--font-size-base) / var(--type-scale));
    --font-size:        var(--font-size-base);
    --font-size-lg:     calc(var(--font-size-base) * var(--type-scale));
    --font-size-xl:     calc(var(--font-size-base) * var(--type-scale) * var(--type-scale));
    --font-size-xxl:    calc(var(--font-size-base) * var(--type-scale) * var(--type-scale) * var(--type-scale));
    --font-size-xxxl:   calc(var(--font-size-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale));
	
	/* Line Heights */
    --leading-none:     1;
    --leading-tight:    1.25;
    --leading-snug:     1.375;
    --leading-normal:   1.5;
    --leading-relaxed:  1.625;
    --leading-loose:    2;

    /* Letter spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0em;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;
}


* {
    margin:             0;
    padding:            0;
    box-sizing:         border-box;
    text-shadow:        none !important;
}

body, html {
	overflow-x:         unset;
	overflow-y:         unset;
}

html {
	font-size:          16px;
    scroll-behavior:    smooth;
}

body {
    letter-spacing:     var(--tracking-wide);
    line-height:        var(--leading-relaxed);
}

/* * Color Mapping:
         * --c-0, --c-1: Dark Background Color
         * --c-2, --c-7: Warm Orange (#e47c3a)
         * --c-3, --c-8: Deep Violet (#4e3b97)
         * --c-4, --c-9: Soft Mint (#0fd890)
         * --c-5:       Aqua Teal (#4fc2ba)
         * --c-6:       Cool Blue (#2578bc)
        */

        @keyframes hero-gradient-animation {
            0% {
                --s-start-0: 14.49%; --s-end-0: 72%; --x-0: 93%; --y-0: 93%;
                --c-0: hsla(220, 11%, 5%, 1);

                --s-start-1: 0%; --s-end-1: 45%; --x-1: 26%; --y-1: 9%;
                --c-1: hsla(220, 11%, 5%, 1);

                --s-start-2: 2.92%; --s-end-2: 22.38%; --x-2: 15%; --y-2: 79%;
                --c-2: hsla(24, 78%, 56%, 0.45); /* Orange */

                --s-start-3: 3.98%; --s-end-3: 47.58%; --x-3: 40%; --y-3: 104%;
                --c-3: hsla(250, 44%, 41%, 0.5); /* Violet */
                
                --s-start-4: 2.39%; --s-end-4: 29.30%; --x-4: 0%; --y-4: 60%;
                --c-4: hsla(159, 88%, 45%, 0.4); /* Mint */

                --s-start-5: 2.92%; --s-end-5: 22.38%; --x-5: 92%; --y-5: 37%;
                --c-5: hsla(176, 49%, 54%, 0.5); /* Teal */

                --s-start-6: 13.17%; --s-end-6: 31.74%; --x-6: 101%; --y-6: 16%;
                --c-6: hsla(207, 67%, 44%, 0.4); /* Blue */

                --s-start-7: 1%; --s-end-7: 31%; --x-7: 90%; --y-7: 13%;
                --c-7: hsla(24, 78%, 56%, 0.35); /* Orange */

                --s-start-8: 3.98%; --s-end-8: 13.10%; --x-8: 104%; --y-8: 56%;
                --c-8: hsla(250, 44%, 41%, 0.4); /* Violet */

                --s-start-9: 18.59%; --s-end-9: 31%; --x-9: 97%; --y-9: 19%;
                --c-9: hsla(159, 88%, 45%, 0.3); /* Mint */
            }

            100% {
                --s-start-0: 2.39%; --s-end-0: 43.90%; --x-0: 7%; --y-0: 9%;
                --c-0: hsla(220, 11%, 5%, 1);
                
                --s-start-1: 9%; --s-end-1: 54.80%; --x-1: 96%; --y-1: 93%;
                --c-1: hsla(220, 11%, 5%, 1);

                --s-start-2: 3%; --s-end-2: 26.72%; --x-2: -2%; --y-2: 103%;
                --c-2: hsla(24, 78%, 56%, 0.3); /* Orange */

                --s-start-3: 2.39%; --s-end-3: 32.06%; --x-3: 33%; --y-3: 82%;
                --c-3: hsla(250, 44%, 41%, 0.35); /* Violet */

                --s-start-4: 4.40%; --s-end-4: 37.23%; --x-4: 37%; --y-4: 81%;
                --c-4: hsla(159, 88%, 45%, 0.5); /* Mint */

                --s-start-5: 3%; --s-end-5: 32.53%; --x-5: 54%; --y-5: 99%;
                --c-5: hsla(176, 49%, 54%, 0.3); /* Teal */

                --s-start-6: 6%; --s-end-6: 42.50%; --x-6: 104%; --y-6: 43%;
                --c-6: hsla(207, 67%, 44%, 0.5); /* Blue */

                --s-start-7: 5%; --s-end-7: 13.10%; --x-7: 104%; --y-7: -16%;
                --c-7: hsla(24, 78%, 56%, 0.45); /* Orange */

                --s-start-8: 2.39%; --s-end-8: 27.14%; --x-8: 97%; --y-8: 30%;
                --c-8: hsla(250, 44%, 41%, 0.25); /* Violet */

                --s-start-9: 5%; --s-end-9: 21.32%; --x-9: 78%; --y-9: 4%;
                --c-9: hsla(159, 88%, 45%, 0.4); /* Mint */
            }
        }
        
        /* The @property definitions tell the browser how to animate these custom values. */
        /* They are essential for the animation to work correctly. */
        @property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 14.49% }
        @property --s-end-0 { syntax: '<percentage>'; inherits: false; initial-value: 72% }
        @property --c-0 { syntax: '<color>'; inherits: false; initial-value: hsla(220, 11%, 5%, 1) }
        @property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 93% }
        @property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 93% }
        @property --c-1 { syntax: '<color>'; inherits: false; initial-value: hsla(220, 11%, 5%, 1) }
        @property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: 9% }
        @property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 0% }
        @property --s-end-1 { syntax: '<percentage>'; inherits: false; initial-value: 45% }
        @property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 26% }
        @property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 79% }
        @property --s-start-2 { syntax: '<percentage>'; inherits: false; initial-value: 2.92% }
        @property --s-end-2 { syntax: '<percentage>'; inherits: false; initial-value: 22.38% }
        @property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 15% }
        @property --c-2 { syntax: '<color>'; inherits: false; initial-value: hsla(24, 78%, 56%, 0.45) }
        @property --y-3 { syntax: '<percentage>'; inherits: false; initial-value: 104% }
        @property --x-3 { syntax: '<percentage>'; inherits: false; initial-value: 40% }
        @property --c-3 { syntax: '<color>'; inherits: false; initial-value: hsla(250, 44%, 41%, 0.5) }
        @property --s-start-3 { syntax: '<percentage>'; inherits: false; initial-value: 3.98% }
        @property --s-end-3 { syntax: '<percentage>'; inherits: false; initial-value: 47.58% }
        @property --s-start-4 { syntax: '<percentage>'; inherits: false; initial-value: 2.39% }
        @property --s-end-4 { syntax: '<percentage>'; inherits: false; initial-value: 29.30% }
        @property --c-4 { syntax: '<color>'; inherits: false; initial-value: hsla(159, 88%, 45%, 0.4) }
        @property --x-4 { syntax: '<percentage>'; inherits: false; initial-value: 0% }
        @property --y-4 { syntax: '<percentage>'; inherits: false; initial-value: 60% }
        @property --c-5 { syntax: '<color>'; inherits: false; initial-value: hsla(176, 49%, 54%, 0.5) }
        @property --y-5 { syntax: '<percentage>'; inherits: false; initial-value: 37% }
        @property --s-start-5 { syntax: '<percentage>'; inherits: false; initial-value: 2.92% }
        @property --s-end-5 { syntax: '<percentage>'; inherits: false; initial-value: 22.38% }
        @property --x-5 { syntax: '<percentage>'; inherits: false; initial-value: 92% }
        @property --c-6 { syntax: '<color>'; inherits: false; initial-value: hsla(207, 67%, 44%, 0.4) }
        @property --x-6 { syntax: '<percentage>'; inherits: false; initial-value: 101% }
        @property --y-6 { syntax: '<percentage>'; inherits: false; initial-value: 16% }
        @property --s-start-6 { syntax: '<percentage>'; inherits: false; initial-value: 13.17% }
        @property --s-end-6 { syntax: '<percentage>'; inherits: false; initial-value: 31.74% }
        @property --s-start-7 { syntax: '<percentage>'; inherits: false; initial-value: 1% }
        @property --s-end-7 { syntax: '<percentage>'; inherits: false; initial-value: 31% }
        @property --c-7 { syntax: '<color>'; inherits: false; initial-value: hsla(24, 78%, 56%, 0.35) }
        @property --x-7 { syntax: '<percentage>'; inherits: false; initial-value: 90% }
        @property --y-7 { syntax: '<percentage>'; inherits: false; initial-value: 13% }
        @property --x-8 { syntax: '<percentage>'; inherits: false; initial-value: 104% }
        @property --y-8 { syntax: '<percentage>'; inherits: false; initial-value: 56% }
        @property --s-start-8 { syntax: '<percentage>'; inherits: false; initial-value: 3.98% }
        @property --s-end-8 { syntax: '<percentage>'; inherits: false; initial-value: 13.10% }
        @property --c-8 { syntax: '<color>'; inherits: false; initial-value: hsla(250, 44%, 41%, 0.4) }
        @property --y-9 { syntax: '<percentage>'; inherits: false; initial-value: 19% }
        @property --s-start-9 { syntax: '<percentage>'; inherits: false; initial-value: 18.59% }
        @property --s-end-9 { syntax: '<percentage>'; inherits: false; initial-value: 31% }
        @property --x-9 { syntax: '<percentage>'; inherits: false; initial-value: 97% }
        @property --c-9 { syntax: '<color>'; inherits: false; initial-value: hsla(159, 88%, 45%, 0.3) }

        .site__mesh__gradient{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: fixed;
            background-color: hsl(220, 11%, 5%);
			opacity: 0.5;
        }
        

        .site__mesh__gradient::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            opacity: 0.1;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
        }
        
        .site__mesh__gradient_inner {
            width: 100%;
            height: 100%;
			opacity: 0.5;
            /* The initial values are set in the keyframes and @property rules */
            background-color: hsl(220, 11%, 5%);
            background-image: 
                radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), 
                radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), 
                radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), 
                radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), 
                radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), 
                radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), 
                radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)), 
                radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)), 
                radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)), 
                radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
            animation: hero-gradient-animation 10s linear infinite alternate;
        }