:root {
  --green: #003521;
  --yellow: #f5e300;

  --green-light: #196d4d;
  --yellow-dark: #c9b400;

  --white: #ffffff;
  --light-grey: #f2f2f2;
  --dark-grey: #333333;
}

::-moz-selection {
  color: #fff;
  background: var(--green);
}

::selection {
  color: #fff;
  background: var(--green);
}

.btn-branch {
    background-color: var(--green-light);
    border-color: var(--green-light);
}

.btn-branch:hover{
    background-color: var(--green);
    border-color: var(--green);
}

.header-bg-top{
    background-color: var(--yellow);
}

.header-bg-mid{
    background-color: var(--green);
}

.menu-bg{
  background-color: var(--green);
  top: 135px;
}

.category-slider-container {
  position: relative;
  overflow: hidden;
  padding: 5px 40px;
}

.category-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.category-slider::-webkit-scrollbar {
  display: none;
}

.category-btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  letter-spacing: 1px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #fff;
}

.category-btn:hover, .category-btn.active {
  color: #000;
  background-color: var(--yellow);
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff;
  z-index: 1;
  cursor: pointer;
}

.scroll-btn.left {
  left: 5px;
}

.scroll-btn.right {
  right: 5px;
}


#scroll {
    color: #fff;
    line-height: 35px;
    cursor: pointer;
    font-size: 13px;
    width: 35px;
    height: 35px;
    right: 30px;
    position: fixed;
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    bottom: 40px;
    z-index: 444;
    display: none;
    background: var(--green-light);
}

#scroll:hover {
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
    background-color:var(--green);
}


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

.fbox>h5{
  color: #fff;
}

.fbox>p{
  color: #fff;
}

.social .list-unstyled>li>a{
    text-decoration: none;
    font-size: 14px;
    border: 2px solid #a6a6a6;
    color: #fff;
    transition: .3s;
    border-radius: 50%;
    padding: 7px 10px;
    margin: 0px 5px;
    display: inline-flex;
}

.social .list-unstyled>li>.facebook:hover{
    border: 2px solid #365493;
    background-color: #365493;
}

.social .list-unstyled>li>.twitter:hover{
    border: 2px solid #3CF;
    background-color: #3CF;
}

.social .list-unstyled>li>.instagram:hover{
    border: 2px solid #dc2743;
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

.social .list-unstyled>li>.whatsapp:hover{
    border: 2px solid #25D366;
    background-color: #25D366;
}


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

.copyright, .copyright>a{
  color: var(--white);
  text-decoration: none;
}

.location{
  margin-top: 20px;
}

.btn-feedback{
  margin-top: 20px;
}

.table-light>tr>th{
  font-size: 12px;
}

@media only screen and (max-width: 480px) {
  .logo>a>img{
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .menu-bg {
    top: 222px;
  }

  .location{
  margin-top: 10px;
}

.btn-feedback{
    margin-top: 10px;
}

.card img.rounded-start{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

}