/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;0,800;1,400;1,700;0,300&display=swap');

/* RESET */
*, *::before, *::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    font-family: var(--main-font);
}
/* VARIABLES */
:root{
    /* spacing */
    --spacer-sm: 0.5em;
    --spacer-md: calc(var(--spacer-sm)*2);
    --spacer-lg: calc(var(--spacer-md)*2);
    /* corners */
    --rounded: .5rem;
    /* colors */
    --color-text1: #152856;
    --color-text2: var(--color-accent1);
    --color-text3: rgb(242, 242, 242);
    --color-main: #457F9F;
    --color-secondary: #69A28F;
    --color-accent1: #0b4c58;
    --color-accent2: #45aede;
    --color-works: #FAFAF9;
    --color-shadow: rgba(36,1,1,.8);
    --input-bg: rgba(255, 255, 255, 1);
    --input-invalid-clr: firebrick;
    --hero-text-color: #e2fbff;
    --dark-color: #0e173e;
    /* ani */
    --tranny-speed: 125ms;
    /* radius */
    --radius: 8px;
    /* fonts */
    --main-font:  'Rubik', sans-serif;
}

/* ANIMATIONS */
/* @keyframes marqueeL {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
@keyframes marqueeR {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
*/
@keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}

/* GLOBAL */
html {
    scroll-behavior: smooth;
}
body{
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--dark-color);
    color: var(--hero-text-color);
    font-size: 19px;
    font-family: var(--main-font);
    overflow-x: hidden;
}

body.no-scroll{
    overflow: hidden;
}
a{
    cursor: pointer;
    color: inherit;
    text-decoration: underline;
}
.container{

    position: relative;
    width: 92vw;
    margin: 0 auto;
    max-width: 2222px;
}
.flex{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer-md);
}
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: var(--spacer-lg);
}
.hidden{
    display: none !important;
}
ul,ol{
    list-style: none;
}

.pass-window{
    min-width: 40vw;
    min-height: 40vh;
    padding: calc(var(--spacer-lg)*2);
    background-color: var(--color-accent2);
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    color: var(--color-accent1);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius);
    box-shadow: 0 0 1.5em .4em var(--color-shadow);
}
.pass-window.active{
    display: flex;
}
.pass-window form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#pass{
    font-size: 1.3rem;
}
.window-close{
    position: absolute;
    right: 3%;
    top: 4%;
    font-size: 1.5rem;
    cursor: pointer;
}
/* .pass-window::after{
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: red;
} */
/* TEXT */
h1{
    font-size: 3rem;
    margin-bottom: calc(var(--spacer-sm)/2);
}
h2{
    font-size: 2.4rem;
    line-height: 2.25rem;
    margin-bottom: calc(var(--spacer-sm)/8);
    margin-bottom: var(--spacer-sm);
}
h3{
    font-size: 2.1rem;
    margin-bottom: calc(var(--spacer-sm)/8);
}
h4{
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer-sm)/8);
}
h5{
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .3rem;
    opacity: 0.4;
}
em{
    color: var(--color-accent2);
}
/* BUTTONS */
a,
button{
    cursor: pointer;
}
.btn.text-only{
    border: none;
    text-decoration: underline;
    text-underline-offset: .3rem;
}
.btn.text-only:hover{
    text-decoration: underline;
    text-underline-offset: .3rem;
    background: none;
    border: none;
    color: var(--color-accent2);
}
.btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer-md);
}
a[class^="btn"],
button[class^="btn"]{
    border: 2px solid currentColor;
    font-size: 1rem;
    cursor: pointer;
    /* z-index: 10; */
    background-color: transparent;
    margin: var(--spacer-md) 0;
    display: block;
    width: fit-content;
    padding: 0.5em 1em;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}
a[class^="btn"]:hover,
button[class^="btn"]:hover{
    border: 2px solid var(--color-secondary);
    color: inherit;
    background-color: var(--color-secondary);
    transition: all var(--tranny-speed) ease-in-out;
}
/* SCROLLOUT */
[data-scroll]{
    transition: opacity 1.6s;
}
[data-scroll="in"] {
    opacity: 1;
}
[data-scroll="out"] {
    opacity: 0;
}
.about-section .sig-path{
    visibility: hidden;
}
.about-section[data-scroll="in"] .sig-path{
    visibility: visible;
    stroke: var(--hero-text-color);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    animation: dash 2.8s ease-in forwards;
    animation-delay: .2s;
    animation-iteration-count: 1;
}
.about-section em{
    color: inherit;
}
article.project {
    position: relative;
    border-radius: 52px;
    margin: 1rem;
}
article.project[data-scroll="in"]::after{
    left: 97%;
    width: 0;
}
article.project::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 52px;
    background-blend-mode: difference;
    background-color: inherit;
    transition: all 1s ease;
}
section:not(".hero-section"){
    scroll-padding-top: 2em;
}

/* HEADER-NAV */

header{
    display: flex;
    z-index: 9999;
    width: 100%;
    position: absolute;
    top: 1em;
    font-size: 85%;
}
header.header-scrolled{
    position: fixed;
    background-color: rgba(36,1,1,.3);
    backdrop-filter: blur(5px);
    top: 0;
    transition: all 0.2s;
    border-bottom: 1px solid white;
}
header.header-scrolled img{
    scale: 0.75;
}
header .main-links{
    display: flex;
    margin-right: auto;
    gap: var(--spacer-md);
}
header .alt-links img{
    width: 2rem;
    aspect-ratio: 1/1;
}
header .alt-links li:hover,
#header-logo:hover{
    filter: invert(63%) sepia(88%) saturate(947%) hue-rotate(168deg) brightness(91%) contrast(91%);
    transition: filter var(--tranny-speed) linear;
}
header li:hover{
    color: var(--color-accent2);
    transition: color 0.2s;
    cursor: pointer;
}
header li a{
    text-decoration: none;
    color: inherit;
}
header>.has-dropdown:hover>.dropdown{
    display: block;
    opacity: 1;
}
header .dropdown{
    opacity: 0;
    position: absolute;
    background-color: var(--dark-color);
    padding: 1em;
    margin-left: -1em;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    transition: opacity 0.3s;
}
header .dropdown li{
    display: block;
    margin: 6px 0;
}
#hamburger-icon{
    display: none;
    cursor: pointer;
}
#header-logo{
    width: 1.9rem;
    filter: invert(1);
    margin-right: 1.5em;
}
#header-logo path{
    fill: white;
}
header .alt-links{
    display: flex;
    gap: var(--spacer-md);
}

/* HOVER MENU */
ul.hover-menu li:hover::after {
    width: 100%;
}
ul.hover-menu li::after{
    content: '';
    display: block;
    width: 0;
    margin-top: 2px;
    height: 2px;
    background-color: var(--color-accent2);
    transition: width .3s;
    }
ul.hover-menu li.current::after{
    width: 100%;
}
/* HERO SECTION */
.hero-section {
    position: relative;
    min-height: 100vh;
}
.hero-section .container{
    margin-top: 5rem;
}
.hero-overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
    /* transform: scaleX(-1); */
    object-fit: cover;
    z-index: -1;
}
.overlay-fadeout{
    display: none;
    height: 30%;
    width: 100%;
    background: linear-gradient(transparent, var(--dark-color) 90%);
    position: absolute;
    bottom: 0;
    left: 0;
}
/* @keyframes hero-slide-inR {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes hero-slide-inL {
    to {
        transform: translateX(0);
        opacity: 1;
    }
} */
/* .hero-section .col{
    padding-top: 4rem;
    transform: translateX(-1000px);
    
    width: 75%;
    animation-iteration-count: 1;
} */
.hero-section h1{
    font-size: 5.6rem;
    line-height: 5.0rem;
    word-spacing: -0.1ch;
}
.hero-section em{
    font-style: normal;
}
.hero-section h4{
    max-width: 70%;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 2ch;
    margin-bottom: var(--spacer-sm);
}
.hero-section .btn-group{
    margin: var(--spacer-lg) 0;
    justify-content: flex-start;
}
.hero-section a[class*="btn"]{
    color: var(--color-accent2);
    border: 2px solid white;
    background: rgba(0, 0, 0, 0.35);
    font-weight: 500;
    z-index: 10;
}
.hero-section a[class*="btn"]:hover{
    color: var(--color-accent1);
    border: 2px solid var(--color-accent1);
    background-color: var(--color-accent2);
}
.hero-section .btn.cta{
    color: var(--color-accent1);
    border: 2px solid var(--color-accent1);
    background-color: var(--color-accent2);
}
.hero-section .btn.cta:hover{
    color: var(--color-accent2);
    border: 2px solid white;
    background: rgba(0, 0, 0, 0.35);
}
.hero-text{
    transform: translateX(-100%);
    opacity: 0;
    animation-name: hero-text-anim;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
}
@keyframes hero-text-anim {
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}



.card-section{
    display: none;
}
.card-section>.container{
    /* padding: var(--spacer-lg) 0; */
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-md);
    justify-content: space-between;
    align-content: flex-start;
}
.card-section .card{
    padding: var(--spacer-sm) var(--spacer-md);
    border-radius: var(--rounded);
    border: 2px solid var(--color-secondary);
    display: flex;
    height: 20rem;
    overflow: hidden;
    flex-direction: column;
    flex: 1 0 20%;
    box-shadow: 5px 5px 5px var(--color-shadow);
    position: relative;
    isolation: isolate;
}
.card p{
    z-index: -1 
}
.card-section .card::after{
    content: "";
    display: block;
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
    background-color: var(--color-accent2);
}
.card-section .card.card-full{
    flex: 0 0 100%;
    order: 1;
}
.card-section .card.card-full::after{
    opacity: 0;
    transition: opacity .8s;
}
.card-section:has(.card-full) .card{
    height: fit-content;
}
.card-section:has(.card-full) .card:not(.card-full){
    order: 3;
    align-self: self-start;
}
.card-section
/* .card::after{
    content: "\2192";
    width: fit-content;
    height: fit-content;
    color: var(--color-secondary);
    font-size: 2em;
    position: absolute;
    top: 5.3em;
    right: -.9em;
    transform: scaleX(1);
} */
/* .card:last-of-type::after{
    display: none;
}
.card:hover::after{
    transform: scaleX(2);
    transform-origin: left;
    transition: transform 300ms ease-in-out ;
} */
.card .card-icon{
    width: 2em;
    aspect-ratio: 1;
    background-color: var(--color-accent2);
    color: var(--color-text1);
    font-weight: 400;
    border-radius: var(--rounded);
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 1.7em;
    margin:  var(--spacer-sm) 0;
}
.card .view-more p:first-of-type{
    margin-top: 0;
}
.card p:last-of-type{
    margin: var(--spacer-md) 0;
}
.card blockquote{
    font-style: italic;
    margin-left: var(--spacer-md);
    position: relative;
}
blockquote::before{
    content: '"';
    color: var(--color-secondary);
    opacity: 0.6;
    display: block;
    /* font-family: "Times New Roman", serif; */
    left: -.3em;
    top: -.3em;
    width: fit-content;
    font-size: 6em;
    aspect-ratio: 1;
    position: absolute;
    z-index: -1;
}
.card ul{
    margin-left: var(--spacer-md);
    margin-top: -.6em;
}
.card li::before {
    content: "\2022";
    color: var(--color-accent2);
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}
.card button{
    margin-top: auto;
    align-self: self-end;
    z-index: 100;
    position: absolute;
    bottom: 2%;
    right: 5%;
}
.card .view-more{
    display: none;
    background-color: rgba(255,255,255,.15);
    border-radius: var(--rounded);
    padding: var(--spacer-md);
}
.card .view-more-pressed{
    margin: var(--spacer-md) 0;
}
.view-more-pressed.view-more{
    display: block;
}
.service-list{
    position: absolute;
    z-index: -1;
    margin: 0;
    gap: 1em;
    height: 100%;
    user-select: none;
    font-size: 17rem;
    line-height: .8em;
    letter-spacing: -3px;
    mix-blend-mode: color-dodge;
    opacity: .2;
}
.service-list.listA{
    right: 5%;
    top: 5%;
    align-items: flex-start;
    animation: marqueeR 175s linear infinite alternate;
}
.service-list.listB{
    left: 5%;
    top: -5%;
    align-items: flex-end;
    animation: marqueeL 175s linear infinite alternate;
}
.service-list li{
    text-align: center;
    font-weight: 700;
    list-style: none;
}
.mouse{
    width: 1.3em;
    position: fixed;
    bottom: 7vh;
    right: 4vw;
    z-index: 1;
    transition: all 1s linear;
}
.mouse .mouse-scrolled{
    opacity: 1;
}
.mouse-icon{
    opacity: 0;
    width: 25px;
    height: 45px;
    border: 2px solid var(--hero-text-color);
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    text-align: center;
    z-index: 999;
}
.mouse-icon .mouse-scrolled{
    opacity: 1;
}
.mouse:hover .mouse-icon,
.mouse .mouse-scrolled{
    background-color: var(--color-accent2);
    border: 3px solid var(--hero-text-color);
    transition: all 0.2s ease;
}
.mouse:hover .mouse-wheel{
    background-color: rgba(36,1,1,1);
    scale: 1.4;
}
.mouse-wheel{
    height: 6px;
    margin: 2px auto 0;
    display: block;
    width: 3px;
    background-color: white;
    border-radius: 50%;
    animation: 2.5s ease infinite wheel-up-down;
    animation-direction: reverse;
}

/* TABS */
.tabs-section{
    margin: calc(var(--spacer-lg)*2) 0;
}

.tabs-section>.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-md);
}
.tabs-section em{
    font-style: italic;
    color: inherit;
}
.tabs-section img{
    border-radius: 50%;
    background: white;
    outline: none;
}
.tabs-section .tabs{
    display: flex;
    cursor: pointer;
    gap: var(--spacer-lg);
    align-items: center;
    font-size: 1.4rem;
    margin-bottom: var(--spacer-md);position: relative;
}
.tabs-section .tabs::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    bottom: -.5em;
    border-radius: 10px;
    position: absolute;
    background-color: var(--color-accent2);
}
.tab{
    position: relative;
}
.tabs li.current{
    color: var(--color-accent2);
    transition: color 0.3s;
}
.tabs-section .tab-content{
    display: none;
}
.tabs-section img{
    max-width: 100%;
}
.tabs-section .tab-content.current{
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}
.tabs-section .service-writeup{
    max-width: 75ch;
    padding: var(--spacer-md);
}
.tabs-section .service-img{
    width: 20%;
}
.tab-content p:not(:last-of-type){
    margin-bottom: var(--spacer-sm);
}



/* WORKS */
.works-section{
    color: var(--color-text1);
}
.works-section p:not(:first-of-type),
.about-section p:not(:first-of-type){
    margin-top: .9rem;
}
.works-section .project-intro:nth-child(even){
    flex-direction: row-reverse;
} 
.works-section h1{
    line-height: 3rem;
    margin-bottom: .1em;
}
.works-section .project{
    padding: var(--spacer-lg) 0;
    background: var(--color-accent1);
}
.works-section .project.fitfare{
    background-color: #6A9C41;
}
.works-section .project.spotless{
    background-color: #252625;
}
.works-section .project.spotless{
    color: whitesmoke;
}
.works-section .project.sfpp{
    background: #006286;
    color: white;
}
.works-section .project.systics{
    background: #be8d31;
}
.works-section .project.outthebox{
    background: #3b5f50;
    color: white;
}
.works-section .project-intro>.project-img{
    overflow: hidden !important;
    background-color: transparent;
    border: none;
}
.works-section .project-img img{
    padding-right: var(--spacer-md);
    max-width: 100%;
}

.works-section .project-text{
    /* width: 35%; */
    position: relative;
}
.project-text em{
    font-style: italic;
    color: var(--color-accent1);
}
.project-text ul{
    margin-left: 1rem;
}
.project-text h3{
    font-weight: 500;
    font-size: 1.7rem;
    margin-bottom: var(--spacer-sm);
}
.project.spotless .project-text em{
    color: #8fd4f7;
}
.project.fitfare .project-text em{
    color: #035196;
}
.works-section .project-img{
    max-width: 65%;
    background-color: white;
    max-height: 22em;
    overflow: auto;
    border-radius: var(--rounded);
    border: var(--spacer-md) solid white;
}
.modal-window.modal-window-open>*{
    position: fixed;
    object-fit: contain;
    height: 100vh;
    z-index: 1010;
    top: -50%;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
}
.modal-window.modal-window-open img{
    position: fixed;
    width: 92vw;
    height: 92vh;
    /* transform: translate(-50%, -50%); */
    background-color: white;
    /* max-height: max-content; */
    /* background: none; */
    z-index: 1010;
    padding: var(--spacer-lg);
}
.modal-window.modal-window-open img.white-bg{
    background-color: white;
    top: -40%;
    height: 90%;
    width: 90%;
}

.modal-window.modal-window-open img{
    width: 55vw;
    height: 55vh;
    max-height: 55vh;
    background-color: white;
    position: fixed;
    top: -10%;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    z-index: 1010;
    padding: var(--spacer-lg);
    border-radius: var(--rounded);
}
.modal-window-open::after{
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: flex;
    background: var(--color-text1);
    opacity: 0.85;
    z-index: 1000;
    align-content: center;
    align-items: center;
}
.project-details::before {
    content: "";
    width: 60%;
    height: 2px;
    border-radius: var(--rounded);
    display: block;
    background: var(--dark-color);
    margin: 0 auto;
    /* mix-blend-mode: color; */
    opacity: .4;
}
.project-details .project-img::-webkit-scrollbar {
    width: .5em;
}
.project-details .project-img::-webkit-scrollbar-track {
    background-color: transparent;
    border: 1px solid var(--color-text1);
    border-radius: var(--radius);
}
.project-details .project-img::-webkit-scrollbar-thumb {
    background-color: var(--color-text1);
    border-radius: var(--radius);
}
.project-intro .project-img img{
    width: 30em;
}
.project-details{
    display: none;
    margin: var(--spacer-md) 0;
}
.btn-view-details{
    border: 2px solid inherit;
    color: inherit;
    font-size: inherit;
}
.project-details .row.flex:nth-of-type(1) .project-text,
.project-details .row.flex:nth-of-type(2) .project-text{
    width: 100%;
}
.project-details .row.flex{
    align-items: flex-start;
    margin: var(--spacer-lg) 0;
    gap: var(--spacer-md);
}
.project-text h1 span{
    font-size: 2rem;
    position: absolute;
    top: 0.2em;
}
.project-text p{
    margin-bottom: var(--spacer-sm);
}
.project-tools.flex{
    align-items: flex-start;
    text-align: center;
    justify-content: space-evenly;
    gap: var(--spacer-sm);
    flex-wrap: wrap;
}
.project-tools li{
    width: 6em;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-sm);
    font-size: .8rem;
    position: relative;
}
.project-tools li>p{
    font-size: .8rem;
    font-weight: 700;
}
.project-tools li img{
    display: block;
    margin: 0.3em auto 0px;
    aspect-ratio: 1 / 1;
    width: 5rem;
    border-radius: 16px;
    box-shadow: rgb(0 0 0 / 30%) 3px 3px 3px;
    transition: box-shadow 0.3s ease 0s;
}
.project-tools-why{
    position: absolute;
    font-size: 1rem;
    text-align: left;
    top: -15%;
    left: -100%;
    width: 300%;
    height: fit-content;
    background-color: var(--color-text1);
    color: white;
    padding: var(--spacer-sm);
    border-radius: var(--rounded);
    margin: 0 auto;
    z-index: 999;
    opacity: 0;
    display: none;
    transition: opacity var(--tranny-speed) ease-in-out;
    border: 1px solid var(--color-text1);
}
.project-tools-why a{
    color: lightgrey;
    font-style: italic;
}
.project-tools li:hover .project-tools-why{
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.project .overview{
}
.project .overview video:first-of-type{
    box-shadow: none;
    width: 16em;
    display: block;
    margin: var(--spacer-lg) auto;
    border-radius: var(--rounded);
}
.project .video-wrapper{
    width: 10em;
    margin: 0 auto var(--spacer-sm) auto;
    height: 19em;
    background: black;
    border: 5px solid black;
    border-radius: 10px;
    box-shadow: 0 0 0 5px black;
    position: relative;
    z-index: 999;
}
.video-wrapper .camera-speaker{
    position: absolute;
    background-color: black;
    border-radius: 8px;
    height: 4%;
    width: 60%;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.video-wrapper .speaker{
    position: absolute;
    background-color: grey;
    border-radius: 8px;
    height: 1%;
    width: 38%;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    opacity: .4;
}
.project video{
    z-index: -1;
    width: 9.3em;
    margin-top: 1px;
    box-shadow: rgb(0 0 0 / 30%) 13px 15px 8px;
    transition: scale var(--tranny-speed) ease-in-out;
}
/* .project.fitfare video:hover{
    scale: 1.5;
    box-shadow: none;
} */
.project small{
    text-transform: uppercase;
    margin: var(--spacer-sm);
    text-align: center;
    font-size: 0.8rem;
    display: block;
}

.project.branding{
    background-color: #C7EFE8;
}
.project.branding .project-text{
    max-width: 75ch;
    margin-bottom: var(--spacer-lg);
}
.project.branding .scroll-logos{
    overflow-x: auto;
    padding-bottom: var(--spacer-md);
    grid-auto-flow: column;
    grid-column-gap: 5em;
    align-items: center;
}
.project.branding .scroll-logos::-webkit-scrollbar {
    width: .5em;
}
.project.branding .scroll-logos::-webkit-scrollbar-track {
    background-color: transparent;
    border: 1px solid var(--color-text1);
    border-radius: var(--radius);
}
.project.branding .scroll-logos::-webkit-scrollbar-thumb {
    background-color: var(--color-text1);
    border-radius: var(--radius);
}
.branding-img{
    position: relative;
}
.branding-img img{
    max-height: 10em;
    width: 15em;
    /* filter: grayscale(1) brightness(2); */
}

.branding-img .award{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 50px;
    background-color: red;
}



/* WEBSITES & GUI */
.project.gui{
    background: #C6B95D;
}
.project.gui .project-text{
    max-width: 75ch;
    margin-bottom: var(--spacer-lg);
}
.project.gui .scroll-gui{
    overflow-x: auto;
    padding-bottom: var(--spacer-md);
    grid-auto-flow: column;
    grid-column-gap: 3em;
    align-items: center;
    grid-template: none;
}
.project.gui .scroll-gui::-webkit-scrollbar {
    width: .5em;
}
.project.gui .scroll-gui::-webkit-scrollbar-track {
    background-color: transparent;
    border: 1px solid var(--color-text1);
    border-radius: var(--radius);
}
.project.gui .scroll-gui::-webkit-scrollbar-thumb {
    background-color: var(--color-text1);
    border-radius: var(--radius);
}
.gui-img{
    position: relative;
}
.gui-text{
    font-size: .9rem;
}
.gui-img img{
    width: 55vw;
    /* filter: grayscale(1) brightness(2); */
}


/* ABOUT SECTION */

.about-section{
    padding: var(--spacer-lg) 0;
    height: auto;
}
.about-section .container{
    gap: var(--spacer-lg);
}
.about .signature{
    margin-top: 1em;
    width: 6em;
}
.about>.col{
    align-self: flex-start;
}
/* RSS FEED - MEDIUM */
.rss-feed{
    /* display: none; */
}
#rtb > span{
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
}
#rtb a:first-of-type(1){
    display: none;
}

@keyframes dash {
    from {
        stroke-dashoffset: 800;
    }
    to {
        stroke-dashoffset: 0;
    }
                }


.contact-section{
    background-color: #5E2C5C;
    padding: var(--spacer-lg) 0;
    position: relative;
}
.contact-section .container{
    gap: var(--spacer-lg);
    justify-content: space-between;
}
.contact-text{
    max-width: 75ch;
}
.contact-section article{
    min-height: fit-content;
}

.contact-section .modal-btn.modal-window-open{
    display: block;
    position: absolute;
    width: 60vw;
    height: 60vh;
    background-color: green;
}
.design-form{
    display: none;
    width: 70%;
    margin: 0 auto;
}
.design-form input[type="range"]::--webkit-slider-thumb,
.design-form input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    padding: 2px;
    background: url(../images/mainLogo.svg) white no-repeat;
    cursor: ew-resize;
}
input[type="range"]:hover::--webkit-slider-thumb,
input[type="range"]:hover::-moz-range-thumb{
    filter: invert(80%) sepia(35%) saturate(5179%) hue-rotate(168deg) brightness(92%) contrast(89%);
    background: url(../images/mainLogo.svg) transparent no-repeat;
    transition: ease-in-out 300ms;
}
.design-form input[type="range"]:hover{
    background-color: var(--color-accent2) !important;
    transition: ease-in-out 300ms;
}
.design-form input[type="range"] {
    -webkit-appearance: none;
    margin: 1rem;
    height: 2px;
    background-color: var(--color-accent1) !important;
}
form{
    margin: var(--spacer-md) 0;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    background-color: transparent;
}
input[type="text"],
input[type="email"],
.pass-window input,
textarea,
select,
.input-container:has(.input-instruct){
    border: none;
    border-radius: var(--radius);
    padding: var(--spacer-sm);
    background-color: var(--input-bg);
    box-shadow: none;  
    outline: none;
    width: 100%;
    font-size: 1rem;
    margin-bottom: var(--spacer-sm);
    position: relative;
}
.input-container:has(.input-instruct){
    color: var(--color-text1);
}
.input-container:has(.input-instruct) p{
    margin-bottom: var(--spacer-md);
}
.input-container:has(.input-instruct) .input-container{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: var(--spacer-md) 0;
}
.input-container:has(.input-instruct) .input-container input[type=range]{
    width: 90%;
}   
.input-container:has(.input-instruct) .range{
    font-size: .8rem;
    min-width: 5rem;
    padding: 0 1rem;
    text-align: center;
}
.input-container:has(.input-instruct) .range:last-of-type{
    right: -.2em;
}
/* default label */
.input-container:has(input) label,
.input-container:has(select) label,
.input-container:has(textarea) label{
    font-size: 1rem;
    color: var(--color-text1);
    padding: var(--spacer-sm);
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    transition: var(--tranny-speed) all; 
    pointer-events: none;
}
/* focused label */
input:focus + label,
input:valid + label,
textarea:focus + label,
textarea:valid + label,
select:focus + label,
select:valid + label{
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: var(--rounded);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    top: -1rem;
    background-color: var(--input-bg);
}
input:is(:invalid){
    color: var(--input-invalid-clr);
}
.input-container{
    position: relative;
}
.input-container:last-of-type{
    justify-content: space-between;
    flex-direction: row-reverse;
}
form .btn{
    width: fit-content;
    margin: 0 auto;
}
.social-media div{
    gap: var(--spacer-md);
    flex-wrap: wrap;
}
.social-media>p{
    font-size: 1rem;
    padding-bottom: 1.5rem;
}
.social-media div>div{
    display: flex;
    margin-bottom: 0;
    flex-direction: column;
    align-items: center;
    transition: all .3s ease-in-out;
    position: relative;
}
.social-media div>div:hover{
    margin-bottom: 2em;
}
.link-name{
    opacity: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}
.social-media div>div:hover .link-name{
    opacity: 1;
    transition: opacity 1s;
}
.social-media div>div img{
    height: 6rem;
    aspect-ratio: .7;
    object-fit: contain;
}
.social-media .link-shadow{
    display: block;
    bottom: -1.2em;
    opacity: .3;
    border-radius: 50%;
    height: 8px;
    width: 50%;
    background-color: black;
    mix-blend-mode: multiply;
    filter: blur(2px);
}
.social-media div>div:hover .link-shadow{
    z-index: 1;
    opacity: .2;
    height: 10px;
    width: 90%;
    filter: blur(5px);
    transition: all .25s ease-in-out;
}
.social-media .resume img{
    filter: invert(1);
    scale: .8;
}