@charset "UTF-8";

:root{
    --primary-color:#e31c79;
    --secondary-color:#ff8674;
    --secondary-color-rgb:255,134,116;
    --dark-color:#041c2c;
    --dark-color-rgb:4,28,44;
    --light-color:#b8dde1;
    --light-color-rgb:184,221,225;
    --alt-color:#5d7975;
    --zeta-font:'Cerebri Sans',sans-serif;
    --zeta-font-weight:400;
    --zeta-theme-color-text:rgb(34,54,69);
    --title-font:"Handel Gothic";
    --alt-font:"Formation Sans";
}

::selection{
    background-color:var(--secondary-color);
    color:#fff;
}

h1,h2{
    margin:1.5rem 0;
    font-family:var(--title-font);
    font-weight:400;
    color:var(--dark-color);
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:1;

    & > b{
        color:var(--primary-color);
    }
}

h6{
    font-family:var(--alt-font);
    font-size:1.25rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:4px;
    text-indent:4px;
    color:var(--alt-color);
}

figure{
    margin:0;
    padding:0;
}

p{
    &:last-child{
        margin-bottom:0;
    }

    & > span[class^="fi-rr"]{
        font-size:1rem;
        line-height:0;
        color:var(--primary-color);
    }

    & > a{
        display:inline-block;
        font-weight:500;
        text-decoration:none;
        position:relative;

        &::before{
            content:"";
            width:100%;
            height:2px;
            background-color:var(--primary-color);
            position:absolute;
            bottom:0;
            left:0;
        }
    }
}

.fab{
    font:var(--fa-font-brands);
}

.row,
.nav-wrapper{
    margin-right:auto;
    margin-left:auto;
    max-width:1400px;
}

.solar{
    align-content:center;
}

.background{
    &.color{
        --alpha:1;
        --color:'255,255,255';

        background-color:rgba(
            var(--color),
            var(--alpha)
        );

        &.secondary{
            --color:var(--secondary-color-rgb);
        }

        &.dark{
            --color:var(--dark-color-rgb);
        }

        &.light{
            --color:var(--light-color-rgb);
        }
    }

    &.image{
        height:100%;
        position:relative;
        overflow:hidden;
        
        & > img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
        }
    }
}

.align{
    &.right{
        text-align:right;
    }
}

.button{
    --size:60px;

    padding:0 2rem;
    width:fit-content;
    height:var(--size);
    display:inline-flex;
    align-items:center;
    border-radius:calc(var(--size) / 2);
    font-weight:600;
    font-size:1.2rem;
    text-transform:capitalize;
    text-decoration:none;
    line-height:1.1;
    color:#fff;
    transition:.3s ease;

    & > span{
        margin-left:1rem;

        &.icon{
            width:calc(var(--size) - 10px);
            height:calc(var(--size) - 10px);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:50%;
            transition:inherit;

            & > i{
                margin-top:.25rem;
            }
        }
    }

    & [class^="fi-rr"]{
        display:block;
        line-height:0;
    }

    &.primary{
        background-color:var(--primary-color);
        
        & > span{
            &.icon{
                background-color:#fff;
                color:var(--dark-color);
            }
        }
    }

    &.dark{
        background-color:var(--dark-color);

        & > span{
            &.icon{
                background-color:var(--primary-color);
                color:#fff;
            }
        }
    }

    &:has(.icon){
        padding-right:5px;
    }

    &:hover,
    &:focus,
    &:active{
        &.primary{
            background-color:var(--dark-color);

            & > span{
                &.icon{
                    background-color:var(--primary-color);
                    color:#fff;
                }
            }
        }

        &.dark{
            background-color:var(--primary-color);

            & > span{
                &.icon{
                    background-color:#fff;
                    color:var(--dark-color);
                }
            }
        }
    }
}

.social{
    --size:35px;

    & > a{
        margin:0 .1rem;
        width:var(--size);
        height:var(--size);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background-color:var(--dark-color);
        text-decoration:none;
        color:#fff;

        & > span[class^="fi-rr"]{
            line-height:0;
        }

        &:first-child{
            margin-left:0;
        }

        &:last-child{
            margin-right:0;
        }
    }

    &.large{
        --size:45px;

        & > a{
            margin:0 .25rem;
            font-size:1.25rem;
        }
    }

    &.primary{
        & > a{
            background-color:var(--primary-color);
        }
    }

    &.secondary{
        & > a{
            background-color:var(--secondary-color);
        }
    }

    &.degrade{
        & > a{
            background: linear-gradient(45deg,rgba(227, 28, 121, 1) 0%, rgba(255, 134, 116, 1) 100%);
        }
    }
}

.bio-icon{
    --size:80px;

    width:var(--size);
    height:var(--size);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:transparent;
    border:1px dashed var(--primary-color);
    position:relative;

    &::before{
        content:"";
        width:10px;
        height:10px;
        border-radius:50%;
        background-color:var(--primary-color);
        position:absolute;
        bottom:8px;
        left:4px;
    }

    &::after{
        content:"";
        width:5px;
        height:5px;
        border-radius:50%;
        background-color:var(--primary-color);
        position:absolute;
        top:3px;
        right:15px;
    }

    & > span{
        width:calc(var(--size) - 20px);
        height:calc(var(--size) - 20px);
        border-radius:inherit;
        background-color:var(--primary-color);
        background: linear-gradient(45deg,rgba(227, 28, 121, 1) 0%, rgba(255, 134, 116, 1) 100%);
        display:flex;
        align-items:center;
        justify-content:center;

        & > i{
            margin-top:.45rem;
            display:block;
            font-size:1.8rem;
            line-height:0;
            color:#fff;
        }
    }
}

.header{
    & p{
        font-size:1rem;
    }
}

.box-product{
    --size:300px;

    & .product-image{
        padding:1.5rem;
        height:var(--size);
        background-color:rgba(var(--light-color-rgb),0.2);
        border-radius:8px;
        position:relative;
        overflow:hidden;

        &::before{
            content:"";
            width:calc(var(--size) - 100px);
            height:calc(var(--size) - 100px);
            border-radius:50%;
            position:absolute;
            top:50%;
            left:50%;
            transform:translateX(-50%) translateY(-50%);
            background-color:rgba(var(--light-color-rgb),0.25);
            z-index:-1;
            transition:.3s ease;
        }

        & .tag{
            padding:0.25rem 0.75rem;
            width:fit-content;
            height:fit-content;
            display:block;
            background-color:var(--secondary-color);
            border-radius:3px;
            font-weight:500;
            color:#fff;
            text-decoration:none;
            position:absolute;
            top:1rem;
            left:1rem;
            z-index:2;
            transition:.3s ease;
        }

        & .product-events{
            height:fit-content;
            position:absolute;
            bottom:-100%;
            left:0;
            text-align:center;
            opacity:0;
            visibility:hidden;
            transition:0.3s ease;

            & > * {
                margin:0 .1rem;
                width:50px;
                height:50px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                border-radius:50%;
                background-color:var(--primary-color);
                text-decoration:none;
                color:#fff;
                font-size:1.1rem;

                & > span{
                    margin-top:0.25rem;
                    display:block;
                    line-height:0;
                }
            }
        }

        & figure{
            width:100%;
            height:100%;

            & > img{
                width:100%;
                height:100%;
                object-fit:contain;
                object-position:center;
            }
        }
    }

    & .product-content{
        padding:2rem 1rem;
        text-align:center;

        & h5{
            color:var(--dark-color);
        }
    }

    &:hover,
    &:focus,
    &:active{
        & .product-image{
            & .tag{
                background-color:var(--dark-color);
            }

            &::before{
                transform:translateX(-50%) translateY(-50%) scale(1.1);
            }

            & .product-events{
                bottom:1.25rem;
                opacity:1;
                visibility:visible;
            }
        }
    }
}

#brandBar{
    & img.fluid{
        max-width:300px;
    }

    & p{
        display:flex;
        align-items:center;
        font-size:1.25rem;
        line-height:1;

        & b{
            margin-bottom:.2rem;
            display:block;
            font-weight:600;
            font-size:.85rem;
            color:var(--dark-color);
            text-transform: capitalize;
        }

        & .icon{
            margin-right:1rem;
            width:60px;
            height:60px;
            display:inline-block;
            align-content:center;
            border-radius:50%;
            text-align:center;

            & > i{
                margin-top:.65rem;
                display:inline-block;
                font-size:1.5rem;
                color:var(--primary-color);
            }
        }
    }
}

#menuBar{
    --height:70px;

    & menu{
        margin:0;
        padding:0;
        height:var(--height);
        display:block;
        list-style-type:none;

        & li{
            height:inherit;
            display:inline-block;

            & a{
                margin:0 .5rem;
                width:fit-content;
                height:inherit;
                display:inline-flex;
                align-items:center;
                font-weight:500;
                font-size:1.1rem;
                text-decoration:none;
                color:var(--dark-color);
            }
        }
    }

    & .menu-icons{
        text-align:right;

        & a{
            width:40px;
            height:var(--height);
            display:inline-block;
            align-content:center;
            font-size:1.5rem;
            text-align:center;
            text-decoration:none;
            color:var(--alt-color);

            & > span{
                margin-top:.5rem;
                display:block;
            }
        }
    }
}

footer{
    --text-color:rgba(255,255,255,.65);

    & figure{
        margin-bottom:2rem;

        & img.fluid{
            max-width:300px;
        }
    }

    & h3{
        margin-bottom:1.5rem;
        font-weight:500;
        color:#fff;

        & > b{
            color:var(--primary-color);
        }
    }

    & p{
        font-size:1rem;
        color:var(--text-color);

        & > b{
            font-family:var(--title-font);
            font-weight:400;
            text-transform:uppercase;
            color:#fff;
            letter-spacing:2px;
        }

        & > a{
            color:#fff;
        }
        & > span[class^="fi-rr"]{
            color:var(--secondary-color);
        }
    }

    & ul{
        padding:0;
        list-style-type:none;

        & li{
            & a{
                padding-left:1.25rem;
                display:flex;
                align-items:center;
                font-size:1rem;
                color:var(--text-color);
                text-decoration:none;
                transition:.3s ease;
                position:relative;

                &::before{
                    width:fit-content;
                    content:"\f12f";
                    font-family:"uicons-regular-rounded";
                    font-size:1rem;
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                    transition:.3s ease;
                }

                &:hover,
                &:focus,
                &:active{
                    color:#fff;

                    &::before{
                        color:var(--primary-color);
                    }
                }
            }
        }
    }

    & .social{
        margin-top:1.5rem;
    }

    & #copyright{
        background-color:#041928;
    }
}

@media(max-width:1199px){
    #brandBar{
        & figure{
            margin-bottom:1rem;
            text-align:center;
        }
    }

    & #menuBar{
        & .col:first-child{
            display:none;
        }
    }
}

@media(max-width:991px){
    #brandBar{
        & p{
            text-align:center;
            justify-content:center;
        }

        & .col:last-child{
            display:none;
        }
    }
}

@media(max-width:767px){
    #infoBar{
        & p{
            text-align:center;
        }

        & .social{
            text-align:center;
        }
    }
}