@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root{
    --primary-color:#cca43b;
    --primary-color-rgb:204,164,59;
    --secondary-color:#2f4550;
    --secondary-color-rgb:47,69,80;
    --dark-color:#14213d;
    --dark-color-rgb:20,33,61;
    --light-color:#e5e5e5;
    --light-color-rgb:229,229,229;
    --zeta-font:"Lato",sans-serif;
    --title-font:"Geometos Neue",var(--zeta-font);
    --zeta-theme-color-text:#828282;
}

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

h1,h6{
    font-family:var(--title-font);
    font-size:.8rem;
    letter-spacing:.2rem;
    color:var(--primary-color);
}

h2{
    font-size:calc(1.5rem + 1.5vw);
    font-weight:600;

    &.light{
        font-weight:400;
    }
}

h3,h4,h5{
    font-weight:400;
    color:#232323;
}

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

    & a{
        width:auto;
        display:inline-block;
        text-decoration:none;
        position:relative;

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

figure{
    margin:0;
}

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

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

.background{
    display:block;

    &.image{
        width:100%;
        height:100%;
        overflow:hidden;

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

    &.color{
        --alpha:1;

        &.primary{
            background-color:rgb(var(--primary-color-rgb),var(--alpha));
        }

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

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

            &.degrade{
                --deg:0deg;

                background:linear-gradient(
                    var(--deg),
                    rgba(20, 33, 61, 1) 0%,
                    rgba(20, 33, 61, 0.15) 100%
                );

                &.horizontal{
                    --deg:90deg;
                }
            }
        }

        &.light{
            background-color:#f7f8fc;
        }

        &.white{
            background-color:rgb(255,255,255,var(--alpha));
        }
    }

    &.video{
        min-height:700px;
        position:relative;
        overflow:hidden;

        & video{
            width:100%;
            height:100%;
            min-height:100%;
            position:absolute;
            top:0;
            left:0;
            scale:1.05;
            object-fit:cover;
            object-position:center;
            z-index:-1;
        }

        & .solar{
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            align-content:center;
        }
    }
}

.parallax{
    & .solar{
        align-content:center;
    }
}

.button{
    padding:0 1.5rem;
    width:fit-content;
    height:55px;
    display:inline-block;
    align-content:center;
    border:1px solid rgba(255,255,255,1);
    font-weight:500;
    font-size:.8rem;
    font-family:var(--title-font);
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:1px;

    & > span{
        margin-left:.25rem;
        display:inline-block;
        line-height:0;
    }

    &.silver{
        border-color:#dbdbdb;
        color:#232323;
    }

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

    &.bold{
        border-width:2px;
        font-weight:600;
    }
}

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

.donut-chart{
    position:relative;

    & > span{
        position:absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%) translateY(-50%);
        font-family:var(--title-font);
        font-size:1.5rem;
        font-weight:600;
        color:#232323;
    }
}

.box{
    padding:4rem 2rem;
    border-radius:8px;

    &.white{
        background-color:#fff;

        &.shadow{
            box-shadow:0 0 15px rgba(0,0,0,.08);
        }

        & .icon{
            opacity:.25;
        }
    }
}

.product{
    & .product-image{
        height:250px;
        position:relative;

        & .solar{
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(20,20,20,.6) 150%);
            border-radius:8px;
            visibility:hidden;
            opacity:0;
            transition:all 0.4s ease-in-out;
        }

        & figure{
            padding:1rem;
            height:inherit;
            background-color:#f7f8fc;
            border-radius:8px;

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

    & .product-content{
        margin-top:1rem;
        text-align:center;
    }

    &:hover,
    &:focus,
    &:active{
        & .product-image{
            & .solar{
                visibility:visible;
                opacity:1;
            }
        }
    }
}

footer{
    & figure{
        text-align:center;
    }

    & h5{
        margin-bottom:1rem;
        display:flex;
        align-items:center;
        font-weight:500;
        color:#fff;

        & span{
            margin-top:.15rem;
            margin-right:.5rem;
            display:inline-block;
            line-height:0;
        }
    }

    & p{
        color:rgba(255,255,255,.75);
        text-align:justify;

        & a{
            color:#fff;
        }
    }

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

        & li{
            margin:0.75rem 0;
            & a{
                color:rgba(255,255,255,.75);
                text-decoration:none;
                transition:color .3s ease;

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

    & .row{
        &:first-child{
            & p{
                & span{
                    margin-right:.25rem;
                    line-height:0;
                }
            }
        }

        &:last-child{
            border-top:1px solid rgba(255,255,255,0.07);
        }
    }

    .social{
        text-align:right;

        & a{
            margin:0 .25rem;
            width:40px;
            height:40px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:1px solid rgba(255,255,255,0.07);
            color:rgba(255,255,255,.5); 
            text-decoration:none;
            transition:all .3s ease;

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

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

            &:hover,
            &:focus,
            &:active{
                border-color:rgba(255,255,255,.5);
                color:#fff;
            }
        }
    }
}

@media(min-width:992px){
    .row.axis-1 > .hol-lg-0{
        margin-left:0;
    }
}

@media(max-width:767px){
    footer{
        & .row{
            &:first-child{
                & > *:first-child{
                    & p{
                        text-align:center;
                    }
                }
            }

            &:last-child{
                & p{
                    text-align:center;
                }

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