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

:root{
    --primary-color:#8bcee1;
    --secondary-color:#707271;
    --alt-color:#00ff94;
    --dark-color:#283b6a;
    --light-color:#e5f7fa;
    --primary-font:"Rubik",sans-serif;
    --secondary-font:"Roboto",sans-serif;
    --zeta-font:var(--secondary-font);
    --zeta-theme-color-text:#999;
    --swiper-theme-color:#fff;
}

nav{
    top:-100%;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--primary-font);
    font-weight:500;
}

a{
    width:auto;
    text-decoration:none;
    position:relative;
}

a.underline::after{
    content:"";
    display:block;
    width:0;
    height:2px;
    position:absolute;
    bottom:-3px;
    left:0;
    background-color:var(--primary-color);
    transition:width 0.3s ease-in-out;
}

a.underline:hover::after,
a.underline:focus:after,
a.underline:active::after{
    width:100%;
}

figure{
    margin:0;
    padding:0;
}

header{
    margin-top:3rem;
}

header h1{
    margin-top:5rem;
    margin-bottom:1rem;
    font-weight:400;
    color:#fff;
    text-transform: capitalize;
}

header h1 span{
    border-bottom:3px solid var(--primary-color);
}

header p{
    font-size:1rem;
    color:#fff;
}

header .buttons{
    margin-top:1.5rem;
}

header .buttons a{
    margin:0 0.25rem;
}

header .buttons a:first-child{
    margin-left:0;
}

header .buttons a:last-child{
    margin-right:0;
}

header .solar{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    overflow:hidden;
}

header #particles{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
}

section h2 span{
    border-bottom:3px solid var(--primary-color);
}

section.bg-white h2{
    color:var(--secondary-color);
}

section.bg-white h6{
    color:var(--primary-color);
}

section.bg-white ul{
    list-style-type:none;
    margin:2rem 0 0 0;
    padding:0;
}

section.bg-white ul li{
    margin:0.75rem 0;
    padding-left:5px;
    font-weight:500;
    color:var(--zeta-theme-color-text);
}

section.bg-white ul li span{
    position:relative;
    margin-right:0.75rem;
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    background-color:var(--primary-color);
}

section.bg-white ul li span::after{
    content:'';
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    z-index:-1;
    transform:translateX(-50%) translateY(-50%);
    width:22px;
    height:22px;
    background-color:#cff3f7;
}

map{
    display:block;
    width:100%;
    height:100%;
    min-height:500px;
    background-color:#efefef;
}

form input,
form select,
form textarea{
    padding:0 1rem;
    height:70px;
    border-width:2px;
    border-color:#eee;
    background-color:transparent;
    font-weight:500;
    font-size:0.9rem;
    color:var(--secondary-color);
}

form input::placeholder,
form textarea::placeholder{
    color:var(--secondary-color);
}

form input.error,
form select.error,
form textarea.error{
    border-color:var(--alt-color);
}

form textarea{
    padding:1rem;
    resize:none;
}

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

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

.title{
    display:inline-block;
    width:auto;
}

.title > *:first-child{
    margin:0;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:3px;
}

.title > *:last-child{
    margin:0;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:5px;
}

.title hr{
    margin:0.25rem 0 0.5rem 0;
    height:3px;
}

.background{
    width:100%;
    height:100%;
    overflow:hidden;
}

.background > img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:all 0.3s ease-in-out;
}

.bg-primary{
    background-color:var(--primary-color);
}

.bg-secondary{
    background-color:var(--secondary-color);
}

.bg-secondary p{
    color:#fff;
}

.bg-secondary p a{
    color:var(--primary-color);
}

.bg-dark{
    background-color:var(--dark-color);
}

.bg-dark p{
    color:#fff;
}

.bg-dark .title > *:first-child,
.bg-dark .title > *:last-child{
    color:#fff;
}

.bg-dark .title > hr{
    background-color:var(--primary-color);
    opacity:1;
}

.bg-light{
    background-color:var(--light-color);
}

.bg-alt{
    background-color:var(--alt-color);
}

.degrade-alpha{
    background-image:linear-gradient(-90deg, #13C1D9BF 18%, var(--primary-color) 70%);
}

.social a{
    margin:0 0.15rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:5px;
    border:2px solid #fff;
    background-color:transparent;
    color:#fff;
    font-size:1rem;
    text-decoration:none;
    transition:all 0.3s ease-in-out;
}

.social a:first-child{
    margin-left:0;
}

.social a:last-child{
    margin-right:0;
}

.social a:hover,
.social a:focus,
.social a:active{
    background-color:rgba(255,255,255,0.3);
}

.button{
    padding:0 1rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:200px;
    height:70px;
    border-style:solid;
    border-width:2px;
    border-radius:5px;
    font-family:var(--primary-font);
    font-size:1rem;
    font-weight:500;
    text-decoration:none;
    transition:all 0.3s ease-in-out;
    text-transform:capitalize;
}

.button span{
    margin-left:0.5rem;
    font-size:1.8rem;
}

.button.md{
    height:60px;
}

.button.sm{
    padding:0 0.5rem;
    min-width:160px;
    height:50px;
}

.button.primary{
    background-color:var(--primary-color);
    border-color:var(--primary-color);
    color:#fff;
}

.button.primary:hover,
.button.primary:focus,
.button.primary:active{
    background-color:transparent;
    color:var(--primary-color);
}

.button.primary.outline{
    background-color:transparent;
    color:var(--primary-color);
}

.button.primary.outline:hover,
.button.primary.outline:focus,
.button.primary.outline:active{
    background-color:var(--primary-color);
    color:#fff;
}

.button.secondary{
    background-color:var(--secondary-color);
    border-color:var(--secondary-color);
    color:#fff;
}

.button.secondary:hover,
.button.secondary:focus,
.button.secondary:active{
    background-color:transparent;
    color:var(--secondary-color);
}

.button.secondary.outline{
    background-color:transparent;
    color:var(--secondary-color);
}

.button.alt{
    background-color:var(--alt-color);
    border-color:var(--alt-color);
    color:#fff;
}

.button.alt:hover,
.button.alt:focus,
.button.alt:active{
    background-color:transparent;
    color:var(--alt-color);
}

.button.alt.outline{
    background-color:transparent;
    color:var(--alt-color);
}

.button.alt.outline:hover,
.button.alt.outline:focus,
.button.alt.outline:active{
    background-color:var(--alt-color);
    color:#fff;
}

.button.white{
    background-color:#fff;
    border-color:#fff;
    color:var(--dark-color);
}

.button.white.outline{
    background-color:transparent;
    border-color:#fff;
    color:#fff;
}

.button.white:hover,
.button.white:focus,
.button.white:active{
    background-color:rgba(255,255,255,0.3);
    color:#fff;
}

.button.dark{
    background-color:var(--dark-color);
    border-color:var(--dark-color);
    color:#fff;
}

.button.dark:hover,
.button.dark:focus,
.button.dark:active{
    background-color:var(--secondary-color);
    border-color:var(--secondary-color);
    color:#fff;
}

.box-data .box-info{
    border-top:1px solid #f5f5f5;
    border-right:1px solid #f5f5f5;
    transition:all 0.3s ease-in-out;
    position:relative;
}

.box-data .box-info:last-child{
    border-right:0;
}

.box-data .box-info::after{
    width:0;
    height:5px;
    content:'';
    position:absolute;
    top:0;
    left:0;
    background-color:var(--alt-color);
    transition:width 0.3s ease-in-out;
}

.box-data .box-info h2{
    margin-bottom:2rem;
    font-weight:300;
    color:#ddd;
}

.box-data .box-info .icon{
    margin-bottom:1rem;
    height:50px;
    text-align:center;
    font-size:3rem;
    color:var(--primary-color);
    display:flex;
    align-items:center;
}

.box-data .box-info .icon span{
    line-height:0;
}

.box-data .box-info h4{
    font-weight:500;
    color:var(--secondary-color);
}

.box-data .box-info:hover,
.box-data .box-info:focus,
.box-data .box-info:active{
    box-shadow:0px 5px 83px 0px rgba(9, 29, 62, 0.15);
    border-top-color:var(--primary-color);
}

.box-data .box-info:hover::after,
.box-data .box-info:focus::after,
.box-data .box-info:active::after{
    width:100%;
}

.box-data .social a{
    border-color:var(--primary-color);
    background-color:var(--primary-color);
}

.box-data .social a:hover,
.box-data .social a:focus,
.box-data .social a:active{
    background-color:transparent;
    color:var(--primary-color);
}

.buttons a{
    margin:0 0.25rem;
}

.buttons a:first-child{
    margin-left:0;
}
.buttons a:last-child{
    margin-right:0;
}

.separator{
    margin:0.5rem 0;
    display:inline-block;
    width:50px;
    height:3px;
}

.box-product{
    background-color:#fff;
    box-shadow:0px 5px 83px 0px rgba(40, 40, 40, 0.06);
    border-radius:5px;
}

.box-product .background{
    height:250px;
}

.box-product .background > img{
    object-fit:cover;
}

.box-product .box-product-body{
    padding:2rem 1rem;
    position:relative;
}

.box-product .box-product-body h4{
    color:var(--secondary-color);
}

.box-product .box-product-body::after{
    content:'';
    display:block;
    width:85%;
    height:3px;
    background-color:var(--alt-color);
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}

.owl-theme .owl-dots button{
    width:auto;
}

.owl-theme .owl-dots .owl-dot span{
    transition:all 0.3s ease-in-out;
}

.owl-theme .owl-dots .owl-dot span{
    background-color:var(--secondary-color);
    position:relative;
}

.owl-theme .owl-dots .owl-dot span::after{
    content:'';
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    z-index:-1;
    transform:translateX(-50%) translateY(-50%);
    width:22px;
    height:22px;
}

.owl-theme .owl-dots .owl-dot.active span{
    background-color:var(--alt-color);
}

.owl-theme .owl-dots .owl-dot.active span::after{
    background-color:#cff3f7;
}

#preloader{
    width:100%;
    height:100vh;
    background-color:var(--primary-color);
    position:fixed;
    top:0;
    left:0;
    z-index:9;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99;
    transition:all 0.3s ease-in-out;
}

#preloader #css3-spinner-svg-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -105px;
	margin-left: -275px;
    filter:grayscale() brightness(100);
}

#preloader #css3-spinner-pulse {
	stroke-dasharray: 281;
	animation:dash 5s infinite linear forwards;
}

#preloader.hide{
    visibility:hidden;
    opacity:0;
}

#topBar{
    position:absolute;
    top:0;
    left:0;
    z-index:3;
}

#topBar #infoBar p{
    margin-bottom:0;
    color:#fff;
}

#topBar #infoBar p span{
    margin-right:0.25rem;
}

#topBar #menuBar .menu{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:end;
    height:80px;
}

#topBar #menuBar .menu ul{
    margin:0 1rem 0 0;
    padding:0;
    list-style-type:none;
    display:flex;
    align-items:center;
    height:inherit;
}

#topBar #menuBar .menu ul li{
    height:inherit;
}

#topBar #menuBar .menu ul li a{
    margin:0;
    padding:0 0.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    height:inherit;
    font-family:var(--primary-font);
    font-size:1rem;
    font-weight:500;
    text-decoration:none;
    text-transform:capitalize;
    color:#fff;
    position:relative;
    transition:color 0.3s ease-in-out;
}

#topBar #menuBar .menu ul li a::after{
    content:'';
    display:block;
    width:0;
    height:3px;
    background-color:var(--alt-color);
    position:absolute;
    top:0;
    left:0;
    transition:width 0.3s ease-in-out;
}

#topBar #menuBar .menu ul li.current a::after,
#topBar #menuBar .menu ul li a:hover::after,
#topBar #menuBar .menu ul li a:focus::after,
#topBar #menuBar .menu ul li a:active::after{
    width:100%;
}

#topBar #menuBar .menu ul li a span{
    margin-right:0.5rem;
    font-size:1.8rem;
    line-height:0;
    color:var(--primary-color);
}

#topBar #menuBar .menu ul li.current a span,
#topBar #menuBar .menu ul li a:hover span,
#topBar #menuBar .menu ul li a:focus span,
#topBar #menuBar .menu ul li a:active span{
    color:var(--alt-color);
}

#topBar #menuBar .menu .button.primary.outline{
    color:#fff;
}

#topBar #menuBar .menu .launch-navi{
    margin-left:0.5rem;
    width:50px;
    height:inherit;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:2.8rem;
    text-decoration:none;
    color:var(--alt-color);
}

#sidenav{
    width:300px;
    height:100vh;
    position:fixed;
    top:0;
    right:-100%;
    z-index:var(--zeta-index-1);
    background-image:linear-gradient(360deg, #13C1D9BF 18%, var(--primary-color) 70%);
    box-shadow:0px 5px 83px 0px rgba(9, 29, 62, 0.15);
    transition:right 0.3s ease-in-out;
}

#sidenav.active{
    right:0;
}

#sidenav > img{
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:0;
    filter:grayscale() brightness(100);
    z-index:1;
}

#sidenav .sidenav-wrapper{
    width:inherit;
    height:inherit;
    padding:2rem;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    overflow-y:auto;
}

#sidenav .sidenav-wrapper figure{
    text-align:center;
}

#sidenav .sidenav-wrapper ul{
    margin:2rem 0 0.5rem 0;
    padding:0;
    list-style-type:none;
}

#sidenav .sidenav-wrapper ul li a{
    width:100%;
    height:100px;
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
    border-radius:5px;
    font-size:1rem;
    color:#fff;
    transition:background-color 0.3s ease-in-out;
}

#sidenav .sidenav-wrapper ul li a:hover,
#sidenav .sidenav-wrapper ul li a:focus,
#sidenav .sidenav-wrapper ul li a:active{
    background-color:rgba(255,255,255,0.3);
}

#sidenav .sidenav-wrapper ul li a span{
    font-size:2.25rem;
    color:#fff;
    line-height:1.1;
}

#sidenav .sidenav-wrapper ul li.current a{
    background-color:rgba(255,255,255,0.3);
}

#sidenav .sidenav-wrapper .button{
    width:100%;
}

#sidenav .sidenav-wrapper .social{
    margin:2rem 0;
    text-align:center;
}

#sidenav .sidenav-wrapper p{
    margin-bottom:0;
    color:#fff;
    text-align:center;
}

#btnSidenav{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--alt-color);
    border:0;
    border-radius:50%;
    font-size:2.25rem;
    color:#fff;
    position:fixed;
    bottom:1rem;
    right:1rem;
    transform:scale(0);
    z-index:var(--zeta-index-2);
    transition:all 0.3s ease-in-out;
}

#btnSidenav.active{
    transform:scale(1);
}

footer .title h4,
footer .title h6{
    color:#fff;
}

footer .title hr{
    background-color:#fff;
    opacity:1;
}

footer p{
    color:#fff;
}

footer ul{
    margin:2rem 0 0 0;
    padding:0;
    list-style-type:none;
}

footer ul li a{
    width:auto;
    display:inline-block;
    font-size:1rem;
    text-decoration:none;
    color:#fff;
    position:relative;
    overflow:hidden;
    transition:color 0.3s ease-in;
}

footer ul li a:hover,
footer ul li a:focus,
footer ul li a:active{
    color:#fff;
}

footer ul li a::after{
    content:"";
    display:block;
    width:0;
    height:2px;
    position:absolute;
    bottom:0;
    left:32px;
    background-color:#fff;
    transition:width 0.3s ease-in-out;
}

footer ul li a:hover::after,
footer ul li a:focus::after,
footer ul li a:active::after{
    width:100%;
}

footer ul li a > span{
    margin-right:0.25rem;
    color:#fff;
    font-size:1.5rem;
    line-height:1;
}

footer .info-box{
    padding:2rem 0;
    width:auto;
    height:auto;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    border:2px solid rgba(255,255,255,0.3); 
}

footer .info-box > img{
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:0;
    filter:grayscale() brightness(100);
}

footer .info-box > .wrapper{
    padding:0 2rem;
    width:100%;
    height:100%;
    position:relative;
    top:0;
    left:0;
}

footer .info-box .title{
    margin-bottom:2rem;
}

footer .info-box h5{
    margin-bottom:1rem;
    font-weight:500;
    color:#fff;
}

footer .info-box p:last-child{
    margin-bottom:0;
}

footer .info-box p span{
    margin-right:0.15rem;
}

footer #copyright p{
    margin-bottom:0;
}

footer #copyright .col:last-child p a{
    margin:0 0.25rem;
    color:#fff;
}

footer #copyright .col:last-child p a:first-child{
    margin-left:0;
}

footer #copyright .col:last-child p a:last-child{
    margin-right:0;
}

.window figure{
    text-align:center;
    height:300px;
}

.window h6{
    color:var(--primary-color);
}

.window h3{
    color:var(--secondary-color);
}

.window p{
    text-align:justify;
}

.window p:last-child{
    margin-bottom:0;
}

.window .close button{
    min-width:50px;
    position:absolute;
    top:0;
    right:0;
    width:50px;
    height:50px;
    border-radius:0;
    border-bottom-left-radius:5px;
}

.window .close button span{
    margin-left:0;
}

@media(max-width:1199px){}

@media(max-width:991px){
    #topBar #infoBar p,
    #topBar #infoBar .social.right-align{
        text-align:center;
    }

    #topBar #menuBar .menu ul{
        display:none;
    }

    #topBar #menuBar .menu .launch-navi{
        display:flex;
    }

    header{
        margin-top:5rem;
    }

    footer #copyright p{
        text-align:center;
    }
}

@media(max-width:575px){
    #topBar #menuBar .menu .button{
        display:none;
    }

    #topBar #menuBar .menu .launch-navi{
        color:var(--alt-color);
    }

    header h1{
        margin-top:10rem;
    }
}

@-webkit-keyframes dash {
	from {
		stroke-dashoffset:814;
	}

	to {
		stroke-dashoffset:-814;
	}
}

@keyframes dash {
	from {
		stroke-dashoffset:814;
	}

	to {
		stroke-dashoffset:-814;
	}
}