:root {
    --primary-bg-color: #f6f4ef;
    --secondary-bg-color: #ffffff38;

    --color-text: #000;

    --padd-ver: 1vh;
    --padd-hor: 1vw;

    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
    --yelorange: rgb(255, 191, 0);
    --orange: rgb(255, 170, 51);
    --yellow: rgb(255, 235, 16);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: none;
    margin-block-start: 0;
    margin-block-end: 0;
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: var(--color-text);
    cursor: none;
    /* background-color: var(--primary-bg-color); */
    background: url("../assets/svg/background.svg");
}

.montaga {
    font-family: "Montaga", sans-serif;
}

.cyan {
    color: #85b4d3;
}

.green {
    color: #85d3a1;
}

.gold {
    color: #e6b70e;
}

/* NAVBAR */

nav {
    position: fixed;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 2vw;
    top: 0;
    z-index: 10000;
}

a {
    text-decoration: none;
    color: inherit;
}

nav p {
    position: relative;
    color: black;
    text-transform: uppercase;
    background: linear-gradient(to left, transparent, black 70%);
    background-position: 0% 100%;
    background-size: 0% 5%;
    background-repeat: no-repeat;
    padding: 0.5vh 0.5vw;
    z-index: 10000;
    mix-blend-mode: difference;
    opacity: 0;
    transform: translate3d(0,110%,0) rotate(2deg);
    transition: transform 1.2s cubic-bezier(.15,.85,.45,1),opacity .8s cubic-bezier(.32,.94,.6,1), background-size 0.3s ease-in-out;
}

nav p:hover {
    background-size: 100% 5%;
}

nav p.visible {
    opacity: 1;
    transform: translateZ(0) rotate(0deg);
}

div#cursor {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    min-width: 2vw;
    max-width: 2vw;
    min-height: 2vw;
    max-height: 2vw;
    background-color: #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    z-index: 10000;
    transition: all 0.3s ease-in-out;
}

div#cursor.cursor-over {
    transform: translate(-50%, -50%) scale(2);
}

footer {
    width: 100vw;
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3vh 3vw;
}

footer div.columnFooter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    padding: 2vh 1.5vw;
    max-width: 20vw;
}

footer div.columnFooter:first-of-type {
    max-width: 15vw;
    align-items: center;
}

footer div.columnFooter:last-of-type {
    /* max-width: 15vw; */
    align-items: center;
}

footer div.columnFooter img {
    width: 70%;
}

footer div.columnFooter h3.titleColumn{
    text-align: left;
    margin-bottom: 1vh;
}

footer div.columnFooter ul {
    list-style: none;
    text-align: left;
}

footer div.columnFooter ul li {
    margin-bottom: 0.5vh;
    color: #ffffffb1;
    transition: all 0.3s ease-in-out;
}

footer div.columnFooter ul li:hover {
    color: #ffffff;
}

footer div.columnFooter button.getInTouch {
    background-color: #ffffff52;
    border: 1px solid #ffffff7a;
    color: #ffffff;
    padding: 1.5vh 2vw;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

footer div.columnFooter button.getInTouch:hover {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color: black;
}