:root{
    --section-bg-1:#F7F5EB;
}
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: none;
}
.bg-light{
    background-color: #fff !important;
}
.navbar-brand{
    width: 180px;
    margin-left: 0 !important;
    margin-bottom: 0px !important;
    padding: 0 !important;
}
.navbar-collapse{
    align-self: flex-end;
}

@media(min-width:768px){
    .navbar-brand{
        width: 240px;
    }
    nav .container-fluid{
    padding: 0 100px !important;
    }
}
/* =================================================== */
    /* CAROUSEL STYLE */
/* =================================================== */

/* .carousel-inner{
    width:100%;
    background-color: bisque;
    height: 500px !important;
  }
  .carousel-inner img{
      width: 100%;
      height:500px;
      object-fit: cover;
    object-position: top right;
  }
  .carousel-item{
      position:relative;
  }
  .slide-container{
      position: absolute;
      top:0;
      margin: 0 auto;
      width:100%;    
  }
  .slide-content-wrapper{
      opacity: 0;
      position: relative;
  }
  .slide-tag{
      position: absolute;
      background-color: #0b753b;
      color:#fff;
      top: -2rem;
      padding: .6rem 1rem;
      left: 2rem;
      font-size:1.2rem;
      letter-spacing: 2px;
      font-weight: 600;
  }
  .slide-content{
      padding: 2rem 1.6rem;
      background-color: rgba(255,255,255, .8);
  }
  .slide-content p{
      letter-spacing: 2px;
      font-size:1rem;
      color:#111763;
  }
  .carousel li{
      color:black
  }
  .carousel-indicators li{
      padding: 5px;
      border-radius: 50%;
      border: 2px solid green;
      width: 0;
      height:0;
  }
  .carousel-control-prev:hover{
      background-color: rgba(0,0,0, .1);
  }
  .carousel-control-next:hover{
    background-color: rgba(0,0,0, .1);
} */


/* ============================================================== */
    /* ANIMATIN STYLE */
/* ============================================================== */

@keyframes animation-up{
    from{
        opacity: 0;
        transform: translateY(100px);
    }

    to{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes animation-down{
    from{
        opacity: 0;
        transform: translateY(-100px);
    }

    to{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes animation-left{
    from{
        opacity: 0;
        transform: translateX(100px);
    }

    to{
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes animation-right{
    from{
        opacity: 0;
        transform: translateX(-200px);
    }

    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.animation-up{
    animation: animation-up .6s ease forwards var(--u);
}
.animation-left{
    animation: animation-left .8s ease forwards var(--l);
}
.animation-right{
    animation: animation-right .6s ease forwards var(--r);
}
.animation-down{
    animation: animation-down .6s ease forwards var(--d);
}