/* ============ FONTS ============ */

p, a, textarea, ::placeholder, input, button {
    font-family: aesthet-nova, serif;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: gelica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.head-font {
	font-family: gelica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-semibold {
    font-weight: 500 !important;
}

/* ============ COLORS ============ */

.color-beige {
    color: rgb(243,228,209);
}

.color-black {
    color: rgb(0,0,0);
}

.color-aqua {
    color: rgb(27,77,104);
}

.color-ignis {
    color: rgb(109,42,43);
}

.color-caeli {
    color: rgb(74,49,94);
}

.color-terra {
    color: rgb(53,81,53);
}

.color-deserto {
    color: rgb(91,79,43)
}

.color-montibus {
    color: rgb(82,36,124)
}

.color-nubibus {
    color: rgb(20,81,129);
}

.color-flaming {
    color: rgb(120,50,49);
}

.color-aquatic {
    color: rgb(35,80,103);
}

.color-floral {
    color: rgb(80,56,95);
}

.color-woody {
    color: rgb(58,88,56);
}

.bg-beige {
    background-color: rgb(243,228,209);
}

.bg-black {
    background-color: rgb(0,0,0);
}

.bg-aqua {
    background-color: rgb(27,77,104);
}

.bg-ignis {
    background-color: rgb(109,42,43);
}

.bg-caeli {
    background-color: rgb(74,49,94);
}

.bg-terra {
    background-color: rgb(53,81,53);
}

.bg-deserto {
    background-color: rgb(91,79,43)
}

.bg-montibus {
    background-color: rgb(82,36,124)
}

.bg-nubibus {
    background-color: rgb(20,81,129);
}

.bg-flaming {
    background-color: rgb(120,50,49);
}

.bg-aquatic {
    background-color: rgb(35,80,103);
}

.bg-floral {
    background-color: rgb(80,56,95);
}

.bg-woody {
    background-color: rgb(58,88,56);
}

/* ============ BUTTONS ============ */

.button-main {
    padding: 10px 20px;
    background-color: rgb(0,0,0);
    border: 2px solid rgb(0,0,0);
    color: rgb(243,228,209);
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.button-broda {
    padding: 10px 20px;
    background-color: rgb(0,0,0);
    border: 2px solid rgb(0,0,0);
    color: rgb(243,228,209);
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.button-prestyler {
    padding: 10px 20px;
    background-color: rgb(0,0,0);
    border: 2px solid rgb(0,0,0);
    color: rgb(243,228,209);
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.button-main:hover {
    background-color: rgb(243,228,209);
    color: rgb(0,0,0);
}

.button-caeli {
    background-color: rgb(74,49,94);
    border: 2px solid rgb(74,49,94);
}

.button-elemental {
    background-color: rgb(37,45,66);
    border: 2px solid rgb(74,49,94);
}

.button-terra {
    background-color: rgb(53,81,53);
    border: 2px solid rgb(53,81,53);
}

.button-ignis {
    background-color: rgb(109,42,43);
    border: 2px solid rgb(109,42,43);
}

.button-aqua {
    background-color: rgb(27,77,104);
    border: 2px solid rgb(27,77,104);
}

.button-deserto {
    background-color: rgb(91,79,43);
    border: 2px solid rgb(91,79,43);
}

.button-montibus {
    background-color: rgb(82,36,124);
    border: 2px solid rgb(82,36,124);
}

.button-nubibus {
    background-color: rgb(20,81,129);
    border: 2px solid rgb(20,81,129);
}

.button-flaming {
    background-color: rgb(120,50,49);
    border: 2px solid rgb(120,50,49);
}

.button-aquatic {
    background-color: rgb(35,80,103);
    border: 2px solid rgb(35,80,103);
}

.button-floral {
    background-color: rgb(80,56,95);
    border: 2px solid rgb(80,56,95);
}

.button-woody {
    background-color: rgb(58,88,56);
    border: 2px solid rgb(58,88,56);
}

.button-white {
    padding: 10px 20px;
    background-color: rgb(255,255,255);
    border: 2px solid rgb(255,255,255);
    color: rgb(0,0,0);
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.button-white:hover {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
}

/* ============ NEW PRODUCTS ============ */

/* astrum */
.color-astrum {
    color: rgb(145, 18, 85);
}
.bg-astrum {
    background-color: rgb(145, 18, 85);
}
.button-astrum {
    background-color: rgb(145, 18, 85);
    border: 2px solid rgb(145, 18, 85);
}

/* aura */
.color-aura {
    color: rgb(163, 73, 39);
}
.bg-aura {
    background-color: rgb(163, 73, 39);
}
.button-aura {
    background-color: rgb(163, 73, 39);
    border: 2px solid rgb(163, 73, 39);
}

/* ether */
.color-ether {
    color: rgb(163, 73, 39);
}
.bg-ether {
    background-color: rgb(163, 73, 39);
}
.button-ether {
    background-color: rgb(163, 73, 39);
    border: 2px solid rgb(163, 73, 39);
}


/* ============ LINK ============ */

.underline-black {
    color: #000000;
    text-decoration: none;
    background-image: linear-gradient(#000000, #000000);
    background-size: 0% 2px;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out;
}

.underline-black:hover,
.underline-black:focus,
.underline-black:active {
    background-size: 100% 2px;
    background-position-x: 0%;
}

/* ============ CHANGING COLORS ============ */

#changing-colors {
    transition: color 0.5s ease-in-out;
}

/* ============ SOCIAL MEDIA ============ */

@media screen and (max-width: 1024px) {
    .footer-social {
        padding: 15px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid rgba(255, 255, 255, 0.41);
    }    
}

@media screen and (min-width: 1024px) {
    .footer-social {
        width: 50px;
        height: 50px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(0, 0, 0, 1);
    }    
}

.footer-social::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transform: translateY(100%);
    transition: transform 0.3s, background-color 0.3s;
}

.footer-social svg {
    position: relative;
    transition: color 0.3s;
    z-index: 1;
}

.footer-social svg path {
    fill: #000000;
}

.footer-social:hover::before {
    transform: translateY(0);
    background-color: #000000;
}

.footer-social:hover svg path {
    fill: rgb(243,228,209);
}