/* CSS by Actward */

#app {
    color: #de6f0c;
    background: #020202;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bitter', serif;
}
#content {
    flex: 0 0 100%;
    text-align: center;
}
#content .gt{
    color:#616D3D;
    animation: color-change 2s ease infinite;
}
@keyframes color-change{
    0%,100%{
        color:#616D3D;
    }
    25%,75%{
        color:#2F4D2A;
    }
    50%{
        color:#000;
    }
}
.card-rounded{
    height: 220px;
    border-radius: 16px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}
.card-rounded img{
    object-fit: cover;
    border-radius: 16px;
}
.card-rounded.double-h img{
    height: 460px;
}
.double-h{
    height: 460px;
}
.card-rounded.double-80 img{
    height: 320px;
}
.double-80{
    height: 340px;
}
.card-rounded.double-20 img{
    height: 100px;
}
.double-20{
    height: 100px;
}

.action-hover:hover{
    position: relative;
    top: -5px;
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.gradient{
    background: rgb(33,33,33);
    background: linear-gradient(207deg, rgba(33,33,33,1) 0%, rgba(11,11,11,1) 100%);
    border: 2px solid #161616;
}

.v-center{
    height: 100%;
    position: relative;
    top:34%;
}
.ig-tainer{
    text-align: center;
    padding: 45px 40px;
}
.ig-tainer p{
    color:#fff!important;
    font-weight: lighter;
    text-align: justify;
}
.ig-tainer img{
    width: 130px!important;
    height: 130px!important;
    object-fit: contain;
}
.img-spot {
    background-image: url(https://observerward.solutions/images/obsward.png);
    height: 100px;
    width: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    bottom: -35px;
    opacity: 0.5;
    transition: 1s ease;
}
.card-rounded:hover .img-spot{
    opacity: 1;
    transition: 0.8s ease;
}

.btn.btn-act{
    border: 1px solid #de6f0c;
    color: #de6f0c;
    transition: 0.5s ease;
}
.btn.btn-act:hover{
    border: 1px solid #de6f0c;
    color: #020202;
    background-color: #de6f0c;
    transition: 0.5s ease;
}
/* owl */
button.owl-prev {
    position: absolute;
    top: 40%;
    left:-10px;
    background: #2d2c2c!important;
    width: 25px;
    border-radius: 7px 0px 0px 7px;
}
button.owl-prev span,button.owl-next span{
    font-size: 36px;
}
button.owl-next {
    position: absolute;
    top: 40%;
    right: -10px;
    background: #2d2c2c!important;
    width: 25px;
    border-radius: 0 7px 7px 0;
}
.web-bg{
    z-index: 0;
}
.web-bg:hover:after{
    opacity: 0.9;
    transition: 0.8s ease;
    filter: brightness(0.5);
}
.web-bg:after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../img/web.png);
    background-size: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -5px;
    z-index: -1;
    opacity: 0.35;
    transition: 0.8s ease;
    filter: brightness(0.5);
}

.logo-side:after {
    content: '';
    width: 100%;
    height: 104%;
    background-image: url(../img/logo-inver.png);
    background-size: 120px;
    background-position: center 235px;
    background-repeat: no-repeat;
    position: absolute;
    top: -5px;
    z-index: -1;
    opacity: 0.1;
    transition: 0.8s ease;
}
.logo-side:hover:after {
    content: '';
    width: 100%;
    height: 104%;
    background-image: url(../img/logo-inver.png);
    background-size: 100px;
    background-position: center 155px;
    background-repeat: no-repeat;
    position: absolute;
    top: -5px;
    z-index: -1;
    opacity: 0.9;
    transition: 0.8s ease;
}
.logo-side:hover .text-light{
    color: #009759!important;
    transition: 0.5s ease-in-out;
}

/* loading */
div#load {
    position: absolute;
    z-index: 1;
    background: #020202db;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 40vh;
}

div#load img{
    animation: loading 1s ease infinite;
}

.action-hover .highlight{
    transition: 0.7s ease;
}

.action-hover:hover .highlight{
    color:#ff9b00!important;
    transition: 0.7s ease;
    font-weight: 600;
}

@keyframes loading {
    0,100%{
        opacity:1;
        transform: scale(1);
    }
    60%{
        opacity: 0.8;
        transform: scale(0.91);
    }
}

@media screen and (max-width: 991px) {
    div#load {
        padding: 40vh 0;
    }
  }