@charset "utf-8";
/* ----------------------------------
Name: style.css
Version: 1.0
----------------------------------
Table of contents
    Google Font
    Body and Default Transitions
    Typography
    Icon
    Background Color
    Border Color
    Margin
    Padding
    Custom
    OWL Carousel
    Button
    Form Control
    Portfolio and Photo Gallery
    Video and Sound
    Navbar
    Header
    Hero Section
    Slider
    Feature Box 
    Content
    Team
    Pricing Table
    Contact
    Blog
    Subscribe
    Counter
    Clients
    Timer
    Testimonial 
    Footer
*/

/* ===================================
    Google Font
====================================== */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&display=swap&subset=cyrillic,latin-ext,vietnamese');


/* ===================================
    Typography
====================================== */
body{
    font-family:'Poppins', sans-serif;
    font-size:14px;
    line-height:normal;
    font-weight: 400;
    letter-spacing: 0.5px;
    color:#aeaeae;
}
body,
html{
    height:100%;
}

/* heading */
h1, h2, h3, h4, h5, h6{
    font-family:'Poppins', sans-serif;
    margin:0;
    padding:0;
    color:#333333;
    font-weight: 600;
    line-height: normal;
}

a{
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
a:hover{
    text-decoration: none;
    color: #13b5ea;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}

.btn-style{
    padding: 10px 20px;
    background-color: #13b5ea;
    border: 2px solid #13b5ea;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.btn-style:hover{
    color: #13b5ea;
    background-color: transparent;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.btn-style:focus{
    outline: none;
    box-shadow: none;
}

.landing-page{
    padding: 80px 0;
}
.landing-page:nth-child(odd){
    background-color: #f7f7f7;
}
.landing-page h3{
    font-size: 30px;
    text-align: center;
    margin-bottom: 40px;
}
/* ===================================
    Custom
====================================== */

/* animation css start */
.ani-icon{
    position: fixed;
    z-index: 0;
    width: 100%;
}
.ani-icon .animation-wrap{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.ani-icon .animation-wrap a{
    display: inline-block;
    -webkit-animation: fadeOutDown 10s linear infinite;
    animation: fadeOutDown 10s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(2){
    -webkit-animation: fadeOutDown 15s linear infinite;
    animation: fadeOutDown 15s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(3){
    -webkit-animation: fadeOutDown 20s linear infinite;
    animation: fadeOutDown 20s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(4){
    -webkit-animation: fadeOutDown 15s linear infinite;
    animation: fadeOutDown 15s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(5){
    -webkit-animation: fadeOutDown 20s linear infinite;
    animation: fadeOutDown 20s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(6){
    -webkit-animation: fadeOutDown 25s linear infinite;
    animation: fadeOutDown 25s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(7){
    -webkit-animation: fadeOutDown 20s linear infinite;
    animation: fadeOutDown 20s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(8){
    -webkit-animation: fadeOutDown 25s linear infinite;
    animation: fadeOutDown 25s linear infinite;
}
.ani-icon .animation-wrap a:nth-child(9){
    -webkit-animation: fadeOutDown 30s linear infinite;
    animation: fadeOutDown 30s linear infinite;
}
@keyframes fadeOutDown {
  from {
    top: 0;
    opacity: 1;
  }

  to {
    top: 100%;
    opacity: 0;
    transform: translate3d(0, 100vh, 0);
  }
}
.ani-icon .animation-wrap a img{
    opacity: 0.5;
}
/* side-cart icon css start */
.web-tool .cart-side-icon{
    position: fixed;
    right: -80px;
    bottom: 50%;
    transform: translateY(49%);
    z-index: 2;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.web-tool:hover .cart-side-icon{
    right: -2px;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.web-tool .cart-side-icon a{
    background-color: #13b5ea;
    color: #fff;
    border: 2px solid #13b5ea;
    padding: 10px 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-radius: 5px 0 0 5px;
}
.web-tool:hover .cart-side-icon a{
    background-color: transparent;
    color: #13b5ea;
}
.web-tool .cart-side-icon a i{
    font-size: 17px;
}
.web-tool .cart-side-icon a span{
    margin-left: 15px;
}

/* header css start */
.landing-header .land-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.landing-header .land-header nav ul.nav li{
    padding-right: 15px;
}
.landing-header .land-header nav ul.nav li:last-child{
    padding-right: 0px;
}
.landing-header .land-header nav ul.nav li a{
    color: #fff;
    font-weight: 600;
}
.landing-header.sticky .land-header nav ul.nav li a{
    color: #aeaeae;
}
.landing-header .land-header nav ul.nav li:hover a{
    color: #13b5ea;
}
.landing-header .buy-button a{
    display: flex;
    align-items: center;
}
.landing-header .buy-button a i{
    margin-left: 5px;
    font-size: 17px;
}

/* main image css start */
.landing-image{
    position:relative;
}
.landing-image .bg-img{
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    position: relative;
}
.landing-image .bg-img::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    z-index: 1;
}
.landing-text{
    text-align:center;
    position:absolute;
    z-index:2;
    margin-left:auto;
    margin-right:auto;
    left:0;
    right:0;
    bottom:50%;
    width:50%;
    transform:translateY(50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-text .landing-dg{
    position: relative;
    padding: 30px;
    height: 600px;
    width: 600px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.landing-text .landing-dg::after{
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 50%;
}
.landing-text h2{
    color: #fff;
    font-size: 24px;
    line-height: normal;
}
.landing-text h2 span.fashion{
    color: #13b5ea;
    font-size: 30px;
}
.landing-text h3{
    font-family:'Fredoka One', cursive;
    font-size:60px;
    color: #fff;
    margin: 30px 0;
    line-height: normal;
}
.landing-text h3 span{
    display: block;
}
.landing-text h3 span.replace{
    color: #13b5ea;
    text-transform: uppercase;
}
.landing-text p{
    color: #fff;
    font-size: 16px;
    margin-bottom: 0;
}
.landing-header{
    position: fixed;
    width: 100%;
    z-index: 3;
    background-color: transparent;
    padding: 30px 0;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.landing-header.sticky{
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 16px 26px -10px rgba(19, 181, 234, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 181, 234, 0.2);
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.landing-text .fashion,
.shop-button{
    animation:flash 2s linear infinite;
}
.shop-button:hover{animation:unset;}

/* homepage css */
.home-demo{
    text-align: center;
}
.home-demo .land-theme{
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 500px;
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    transition: all .9s ease;
}
.home-demo .column:hover .land-theme{
    background-position: left bottom;
    box-shadow: 0 16px 26px -10px rgba(19, 181, 234, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 181, 234, 0.2);
}
.home-demo .product-text{
    margin-top: 30px;
}
.home-demo .product-text a{
    padding: 10px 40px;
}

/* responsive look css */
.res-home-look{
    justify-content: center;
}
.res-demo .smartphone {
    position: relative;
    width: 420px;
    height: 100%;
    margin: auto;
    border: 15px solid rgba(183, 108, 119, 0.5);
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 30px;
    box-shadow: 0 16px 26px -10px rgba(219, 181, 186, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(219, 181, 186, 0.2);
}
.res-demo .smartphone:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(183, 108, 119, 0.5);
    border-radius: 10px;
}
.res-demo .smartphone:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translate(-50%, -50%);
    background-color: rgba(183, 108, 119, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}
.res-demo .smartphone .content {
    width: 100%;
    height: 640px;
    background-color: #fff;
}
.res-demo .smartphone .content iframe{
    width: 100%;
    height: 100%;
    border: none;
}


/* portfolio css start */
.landing-page ul.filtering li{
    border: 2px solid #eee;
    border-right: none;
    width: 16.66%;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.landing-page ul.filtering li:last-child{
    border-right: 2px solid #eee;
}
.landing-page ul.filtering li.active,
.landing-page ul.filtering li:hover{
    background-color: #13b5ea;
    border: 2px solid #13b5ea;
    border-right: none;
    -webkit-font-smoothing: subpixel-antialiased;
    box-shadow: 0 16px 26px -10px rgba(19, 181, 234, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 181, 234, 0.2);
    transform: translate3d(0px, 0px, 0px);
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.landing-page ul.filtering li.active:last-child,
.landing-page ul.filtering li:hover:last-child{
    border-right: 2px solid #13b5ea;
}
.landing-page ul.filtering li span{
    padding: 10px 15px;
    color:#aeaeae;
    opacity: 0.6;
    cursor:pointer;
    position:relative;
    display:inline-block;
    width: 100%;
    font-weight:600;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.landing-page ul.filtering li:hover span,
.landing-page ul.filtering li.active span{
    color: #fff;
    opacity: 1;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}

.landing-page .gallery .items{
    margin-top: 60px;
}
.landing-page .desktop {
    position: relative; 
    width: 100%;
    border-radius: 5px;
    border-style: solid;
    border-color: #A3AAAE;
    border-width: 15px 15px 30px;
    background-color: #000;
    cursor: pointer;
}
.landing-page .desktop::before {
    content: 'Spacing Tech';
    display: block;
    position: absolute;
    width: 50%;
    height: 85px;
    bottom: -90px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #fff;
    font-weight: 600;
    text-align: center;
    background-color: transparent;
    z-index: 1;
    border-left: 15px solid #A3AAAE;
    border-right: 15px solid #A3AAAE;
    transform: rotateY(45deg);
}
.landing-page .desktop::after {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 100px;
    margin: 0 auto;
    background: #A3AAAE;
    bottom: -150px;
    border-radius: 40%;
    left: 0;
    right: 0;
    transform: rotateX(60deg);
}
.landing-page .desktop .land-theme{
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    -webkit-transition:.9s ease-in-out;
    transition:.9s ease-in-out;
}
.landing-page .desktop:hover .land-theme{
    background-position: left bottom;
    -webkit-transition:.9s ease-in-out;
    transition:.9s ease-in-out;
}

.landing-page .item-img .product-text{
    margin-top: 117px;
    text-align: center;
}
.landing-page .product-text h6 a.btn-style{
    width: 100%;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.landing-page .product-text h6 a.btn-style:hover{
    box-shadow: 0 16px 26px -10px rgba(19, 181, 234, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 181, 234, 0.2);
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}

/* theme store css with cube view*/
.cube-view {
    margin: 150px -15px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    /*background-image: linear-gradient(135deg,#eee 25%,#13b5ea 25%,#13b5ea 50%, #eee 50%, #eee 75%,#13b5ea 75%,#13b5ea 100%);
    background-size: 40px 40px;
    animation: bganim 3s linear 2s infinite;*/
}
@keyframes bganim {
    from {
        background-position: 0px;
    }
    to {
        background-position: 80px;
    }
}

.cube-view .store {
    margin: auto;
    position: relative;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
}

.cube-view .store .theme {
    position: absolute;
    padding: 15px;
    height: 300px;
    width: 300px;
    background-color: #000;
    border: 1px solid #eee;
    transition: transform 0.2s ease-in;
}

.cube-view .store .front {
    transform: translateZ(200px);
}
.cube-view .store .back {
    transform: translateZ(-100px) rotateY(180deg);
}
.cube-view .store .right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.cube-view .store .left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.cube-view .store .top {
    transform: rotateX(-270deg) translateY(-100px);
    transform-origin: top center;
}
.cube-view .store .bottom {
    transform: rotateX(270deg) translateY(100px) ;
    transform-origin: bottom center;
}
.cube-view .store {
    animation: rotate 20s infinite linear;
}
@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.cube-view .store:hover .front {
    transform: translateZ(300px);
}
.cube-view .store:hover .back {
    transform: translateZ(-200px) rotateY(180deg);
}
.cube-view .store:hover .right {
    transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}
.cube-view .store:hover .left {
    transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}
.cube-view .store:hover .top {
    transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}
.cube-view .store:hover .bottom {
    transform: rotateX(270deg) translateZ(100px) translateY(100px);
}

.cube-view .store .theme a{
    display: inline-block;
}
.cube-view .store .theme a.btn-style{
    margin-top: 15px;
    width: 100%;
}

.landing-page .port-folio{
    text-align: center;
}
.landing-page .port-folio a{
    width: 25%;
}

/* feature css */
.feature-wrapper{
    display: flex;
    max-width: 33.33%;
    flex: 0 0 33.33%;
}
.feature-wrapper .feature-wrap{
    padding: 30px;
    width: 100%;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.feature-wrapper .feature-wrap:hover{
    box-shadow: 0 16px 26px -10px rgba(19, 181, 234, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 181, 234, 0.2);
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.feature-wrap .provide-service{
    display: flex;
    align-items: center;
    margin: 30px 0;
}
.feature-wrap .provide-service .service-img{
    width: 25%;
    animation: slide 2s linear infinite alternate;
}
@keyframes slide {
    0% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(-15px);
    }
}
.feature-wrap .provide-service .service-img a{
    display: inline-block;
}
.feature-wrap .provide-service .serv-desc{
    width: 75%;
}
.feature-wrap .provide-service .serv-desc h2{
    font-size: 18px;
    margin-bottom: 5px;
}
.feature-wrap .provide-service .serv-desc p{
    margin-bottom: 0;
}

/* feedback cs start */
.theme-back{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.theme-back::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
}
.main-title{
    margin-bottom: 30px;
}
.main-title h2{
    font-size: 24px;
    color: #fff;
}
.main-title h2 .replace{
    color: #13b5ea;
    font-size: 30px;
    display: flex;
    align-items: center;
}
.main-title h2 .replace img{
    margin-left: 15px;
}
.feedback h2{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #fff;
}
.rating{
    line-height: 0;
    margin-bottom: 45px;
    display: flex;
}
.rating a{
    color: #ffa500;
    font-size: 30px;
    margin-right: 5px;
}
.rating a:last-child{
    margin-right: 0px;
}
.landing-page .buy-button a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
}
.landing-page .buy-button a i{
    margin-left: 5px;
    font-size: 17px;
}

/* footer css start */
.footer-top{
    text-align: center;
}
.footer-top .footer-title h2{
    font-size: 18px;
    margin-bottom: 15px;
}
.land-social{
    display: flex;
    justify-content: center;
}
.land-social a{
    margin-right: 5px;
}
.land-social a:last-child{
    margin-right: 0;
}
.land-social a i{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
    color: #fff;
    font-size: 20px;
    border-radius: 5px;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.land-social a i.fa-facebook-f{
    background-color: #3b5998;
    border: 2px solid #3b5998;
}
.land-social a i.fa-linkedin-in{
    background-color: #0e76a8;
    border: 2px solid #0e76a8;
}
.land-social a i.fa-twitter{
    background-color: #00acee;
    border: 2px solid #00acee;
}
.land-social a i.fa-instagram{
    background-color: #e4405f;
    border: 2px solid #e4405f;
}
.land-social a:hover i{
    background-color: transparent;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
}
.land-social a:hover i.fa-facebook-f{
    color: #3b5998;
}
.land-social a:hover i.fa-linkedin-in{
    color: #0e76a8;
}
.land-social a:hover i.fa-twitter{
    color: #00acee;
}
.land-social a:hover i.fa-instagram{
    color: #e4405f;
}

.land-email a{
    color: #13b5ea;
}
.footer-bottom{
    padding: 15px 0;
    background-color: #13b5ea;
}
.footer-bottom .copyright{
    text-align: center;
    margin-bottom: 0;
    color: #fff;
}

/* landing-page css end */