:root {
    --mainColor1: orange;
    --mainColor2: deepskyblue;
    --textColor1: rgb(17, 17, 17);
    --textColor2: rgb(236, 236, 236);
    --backgroundColor1: #272727;
    --backgroundColor2: #8e8e8e;
    --backgroundColor3: #434343;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background-color: var(--backgroundColor2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
}

header, main, footer {
    background-color: var(--backgroundColor1);
    max-width: inherit;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
    text-wrap: pretty;
}

/* !Header */

    /* *NavBar */

    header {
        background-color: var(--backgroundColor1);
    }

    .navBar {
        padding: 1rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        justify-items: center;
        row-gap: 1rem;
        flex-wrap: wrap;
        column-gap: 1rem;
    }

    .navBrand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .brandLogo {
        height: 3rem;
    }

    .brandName {
        color: var(--textColor2);
        font-size: 2rem;
    }

    .navLinks {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .navLink a {
        color: var(--textColor2);
        font-size: 1.25rem;

        &:hover {
            color: var(--mainColor2);
        transition: all ease-in-out 100ms;
        }

    }

    .navButtons {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .navButton {
        all: unset;
        padding: .5rem 1rem;
        border-radius: .25rem;
        background-color: var(--mainColor1);

        &:hover {
            background-color: var(--mainColor2);
            transition: all ease-in-out 100ms;
        }

        &:active {
            background-color: rgba(0, 191, 255, 0.826);
        }
    }

/* !Main */

main {
    padding: 2rem 0;
}

    .breathingText {
        max-width: 100%;
        max-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10rem 0;
        opacity: 90%;
    }

    .breathingText h1 {
        color: transparent;
        -webkit-text-stroke: .2vw var(--mainColor1);
        font-size: 18vw;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        filter: drop-shadow(var(--mainColor1) 0px 0px 10px);

        &::before {
            content: "CONNECT!!";
            position: absolute;
            width: 0%;
            height: 100%;
            overflow: hidden;
            color: var(--mainColor1);
            border-right: .3rem solid var(--mainColor1);
            animation: hoverTextMove 6000ms infinite ease-in-out;
        }
    }

    @keyframes hoverTextMove {
        0% {
            width: 0%;
        }
        50% {
            width: 100%;
        }
        100% {
            width: 0%;
        }
    }

    .sectionHeading {
        color: var(--mainColor1);
        margin-bottom: 2rem;
        padding: 0 0 0 1rem;
    }

    .servicesHeading {
        animation: fadeOutServices 2s forwards;
        animation-timeline: scroll();
    }
    .teamHeading {
        animation: fadeOutTeam 2s forwards;
        animation-timeline: scroll();
    }

    /* *Cards */

    .cardsContainer {
        display: flex;
        justify-content: space-around;
        align-content: space-between;
        align-items: start;
        flex-wrap: wrap;
    }

    .card {
        background-color: var(--backgroundColor3);
        scale: 90%;
        transition: all ease-in-out 200ms;
        padding: 1rem;
        display: flex;
        gap: .5rem;
        border: solid var(--mainColor2) 3px;

        &:hover {
            border: solid var(--mainColor1) 3px;
            box-shadow: var(--mainColor1) 0rem 0rem 1rem;
            scale: 100%;
        }

        &:hover .cardImage {
            filter: brightness(100%);
            transform: translateY(-40px);   
            border-radius: 50px;
        }

        &:hover .cardTitle {
            color: var(--mainColor1);
        }
    }

    .cardImage {
        max-width: 100%;
        height: auto;
        filter: brightness(80%);
        transition: all ease-in-out 200ms;
    }

    .cardTitle {
        color: var(--mainColor2);
        transition: all ease-in-out 200ms;
    }

    .cardDescription {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.717);
    }

    /* *Services */

    .serviceCards {
        display: flex;
        justify-content: space-around;
        align-content: space-between;
        align-items: start;
        flex-wrap: wrap;
        animation: fadeOutServices 2s forwards;
        animation-timeline: scroll();
    }

    .serviceCard {
        max-width: 24rem;
    }

    .serviceTitle {
        font-size: 2rem;
    }

    /* @keyframes fadeOutServices {

        0% {
            opacity: 0%;
        }
        50% {
            opacity: 100%;
        }
        100% {
            opacity: 0%;
        }
        
    } */

    /* *Team */

    .teamCard {
        max-width: 20rem;
        animation: fadeOutTeam 2s forwards;
        animation-timeline: scroll();
    }
    
    .teamTitle {
        font-size: 1.5rem;
    }

    /* @keyframes fadeOutTeam {

        0% {
            opacity: 100%;
        }
        50% {
            opacity: 0%;
        }
        100% {
            opacity: 100%;
        }
        
    } */
/* !Footer */

    footer {
        color: var(--textColor2);
        padding: 2rem 5rem;
        display: flex;
        align-items: top;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 2rem;
        column-gap: 1rem;
    }

    .footerSection {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .footerSectionHeading {
        color: var(--mainColor1);
    }

    /* ^Email Box */
    .textInputWrapper {
        position: relative;
        max-width: 100%;
        --accent-color: var(--mainColor1);
        border: solid var(--mainColor1) 1px;

        &::before {
            transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
            border-bottom: 1px solid rgba(0, 0, 0, 0.42);
        }

        &::before {
            content: "";
            left: 0;
            right: 0;
            position: absolute;
            pointer-events: none;
            bottom: -1px;
            z-index: 4;
            width: 100%;
        }

        &::after {
            content: "";
            left: 0;
            right: 0;
            position: absolute;
            pointer-events: none;
            bottom: -1px;
            z-index: 4;
            width: 100%;
        }

        &:focus-within:before {
            border-bottom: 3px solid var(--accent-color);
        }
        
        &::before {
            transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
            border-bottom: 3px solid rgba(0, 0, 0, 0.42);
        }
        
        &:focus-within:before {
            border-bottom: 3px solid var(--accent-color);
            transform: scaleX(1);
        }
        
        &:focus-within:after {
            border-bottom: 3px solid var(--accent-color);
            transform: scaleX(1);
        }
        
        &::after {
            content: "";
            transform: scaleX(0);
            transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
            will-change: transform;
            border-bottom: 3px solid var(--accent-color);
            border-bottom-color: var(--accent-color);
        }
    }
    
    .textInput::placeholder {
        transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
        opacity: 1;
        user-select: none;
        color: rgba(255, 255, 255, 0.582);
    }
    
    .textInputWrapper .textInput {
        border-radius: 5px 5px 0px 0px;
        box-shadow: 0px 2px 5px rgb(35 35 35 / 30%);
        max-height: 36px;
        background-color: #252525;
        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
        transition-duration: 200ms;
        transition-property: background-color;
        color: var(--textColor2);
        font-size: 14px;
        font-weight: 500;
        padding: 12px;
        width: 100%;
        border-left: none;
        border-bottom: none;
        border-right: none;

        &:active {
            outline: none;
        }

        &:focus {
            outline: none;
        }

    }
    
    .textInputWrapper:focus-within .textInput,
    .textInputWrapper .textInput:focus,
    .textInputWrapper .textInput:active {
        background-color: #353535;
    }
    
    .textInputWrapper:focus-within .textInput::placeholder {
        opacity: 0;
    }

    .footerButton {
        all: unset;
        width: max-content;
        background-color: var(--mainColor1);
        color: var(--textColor1);
        padding: .5rem 1rem;
        border-radius: .2rem;
        transition: all 100ms ease;

        &:hover {
            background-color: var(--mainColor2);
        }

        &:active {
            background-color: rgba(0, 191, 255, 0.867);
        }
    }

    .footerList {
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .footerList li a {
        color: var(--textColor2);

        &:hover {
            color: var(--mainColor2);
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .reachUsmap {
        position: relative;
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #ccc;
    }

    .reachUsMap iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* !Modals */

    #passwordValidMessage {
        font-size: 0.9em;
        color: #ffc107; /* Warning yellow color */
        margin-top: 5px;
    }

    #passwordValidMessage span {
        transition: color 0.3s ease;
    }

    .modal-content {
        background-color: #272727;
        color: var(--mainColor2);
    }

    .modal-header {
        border-bottom: solid var(--mainColor1) .1rem;

    }

    .btn-close {
        background-color: var(--mainColor1);
    }

    .modal-title {
        color: var(--mainColor1);
    }

    .form-text {
        color: lightgrey;
    }

    .form-control, .form-select {
        background-color: #343434;
        margin: 1rem 0 1rem 0;
        border: solid var(--mainColor1) .1rem;
        color: var(--textColor2);
    }

    .form-select, .form-control {
        appearance: menulist;
        -webkit-appearance: menulist;

        &:hover {
            background-color: #444444;
        }

        &:focus {
            background-color: #555555;
            border: solid var(--mainColor1) .1rem;
            color: var(--textColor2);
        }
    }

    .form-control {

        &::placeholder {
            color: lightgrey;
        }

        &:focus::placeholder {
            opacity: 0;
        }

    }

    .modalButton {
        padding: .5rem 1rem;
        border-radius: .25rem;
        background-color: var(--mainColor1);
        color: var(--textColor1);
        border: none;

        &:hover {
            background-color: var(--mainColor2);
            color: var(--textColor1);
        }
    
        &:active {
            background-color: rgba(0, 191, 255, 0.797);
        }

    }

    .emailValidMessage {
        color: rgb(246, 255, 0);
        font-size: .7rem;
    }

    .emailValidMessageLogin {
        color: rgb(246, 255, 0);
        font-size: .7rem;
    }