/*----------------Banner -------------------*/
/* .container {
    height: auto;
    margin: auto;
    position: relative;
    text-align: center;
    width: 1440px;
} */
#header-bar{
    position: relative;
}
#header-bar .logo{
    position: absolute;
    background: rgb(255,196,4);
    background: linear-gradient(90deg, rgba(255,196,4,1) 0%, rgba(255,234,143,1) 53%, rgba(255,234,143,1) 100%);
    padding: 1%;
    -webkit-border-bottom-right-radius: 35px;
    -webkit-border-bottom-left-radius: 35px;
    -moz-border-radius-bottomright: 35px;
    -moz-border-radius-bottomleft: 35px;
    border-bottom-right-radius: 35px;
    border-bottom-left-radius: 35px;
    z-index: 9;
}
#banner {
    width: 100%;
    position: relative;
    /* background: url(../images/banner.jpg) no-repeat center top;
    height: 400px; */
    background-size: cover;
    background-attachment: fixed;
    /* overflow: hidden; */
}
#banner .heart {
    /* width: 1400px;
    height: 651px; */
    /* background: url(../images/heart.png); */
    text-align: center;
    background-repeat: no-repeat;
    position: absolute;
    margin: auto;
    z-index: 33;
    scale: .7;
    left: 0;
    right: 0;
    top: 20px;
    transition: all 0.4s ease-in-out;
    animation: animate 2.2s infinite;
}

@keyframes animate { 
    0% {
        transform: scale(.8);
        -webkit-transform: scale(.8);
    }
    50% {
        ransform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        ransform: scale(.8);
        -webkit-transform: scale(.8);
    }
  }

#banner:after {
    /* background: url(../images/kv3.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -99px;
    content: "";
    height: 367px;
    position: absolute;
    right: 338px;
    width: 365px; */
}

#banner .item {
    width: max-content;
    position: relative;
    top: 50px;
    left: 100px;
    width: 380px;
}
#banner .layer {
    position: inherit !important;
}
#banner .item2 {
    position: absolute;
    /* width: max-content; */
    right: 15%;
    /* bottom: -65px; */
    width: 280px;
    top: -277px;
}

#banner .item3 {
    position: absolute;
    width: max-content;
    left: 10%;
    /* bottom: -30%; */
    width: 250px;
}

#banner .ball1 {
    position: absolute;
    width: 100px;
    left: 11%;
    top: -315px;
}

#banner .ball2 {
    position: absolute;
    width: 80px;
    left: 8%;
    top: -241px;
}

#banner .ball3 {
    position: absolute;
    width: 70px;
    right: 40%;
    bottom: -34px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.layer.ball2-depth {
    z-index: -1;
}

#banner .cloud1 {
    position: absolute;
    width: 30%;
    top: -30%;
    z-index: -1;
    animation: move 55s linear infinite;
}

#banner .cloud2 {
    position: absolute;
    width: 50%;
    top: -30%;
    z-index: -1;
    animation: move 35s linear infinite;
}
#banner .wave{
    position: absolute;
    width: 100%;
    bottom: -60px;
    left: 0;
    z-index: -1;
}
#banner .kv-m{
    display: none;
}
@keyframes move { 
    from {left: -100%;}
    to {left: 100%;}
  }

  /* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
   
 }

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
    #header-bar .logo{
        padding: 5%;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    #banner .heart {
        top: -3%;
    }
    #banner .heart img{
        width: 400px;
    }
    #banner .item {
        display: none;
    }
    #banner .item2 {
        display: none;
    }
    #banner:after {
        display: none;
    }
    #banner .kv-m{
        display: block;
    }
    #banner .wave{
        z-index: 9;
        bottom: 0px;
    }
 }

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    
 }

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {  }

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {  }

/* // XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width */