/* for entire page */
.tp-app a
{
    text-decoration: none;
}

.tp-app li
{
    list-style: none;
}


/* style app header bar */
.tp-navbar1 {
  overflow: hidden;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

.tp-app .tp-app-header
{
    margin:0;
    padding:0;
}
.tp-app .tp-app-header img
{
    border: 0px solid black;
    margin:0;
    padding:0;
    height: 45px;
}

/* style app content section */
.tp-app .tp-app-content
{
    position: absolute;
    top: 48px;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    margin:0;
}



@media screen and (max-width: 680px) 
{
    #callus{display: none;}
}


/* style app menu bar */
.tp-app .tp-app-menu {
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  bottom: 0; 
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

.tp-app .tp-app-menu > div > div:last-child{
    padding-top: 5px;
}

.tp-app .tp-app-menu > div:last-child{
  padding-top: 0px;
}

/* style app menu items */
.tp-app .tp-app-menu > ul li {
  padding: 0px 0px 30px 0px;
  list-style: none;
  text-decoration: none;
  font-size: 15px;
  color:aliceblue;
  display: block;
  transition: 0.3s;
  text-transform1: uppercase;
  margin: auto;
}

.tp-app .tp-app-menu ul li a{
  font-size: 18px!important;
}

.tp-app .tp-app-menu ul li i{
  margin: 0 10px 0 0;
  width: 32px;
  font-size: 25px!important;
}


.tp-app .tp-app-menu details summary{
  font-size: 18px!important;
}

.tp-app .tp-app-menu details ul{
  padding-top: 30px;
}


/********************/

/* Remove the default dropdown marker */
details summary::-webkit-details-marker {
  display: none;
}

/* Flexbox to align icon and text */
summary {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Change Icon when details open */
details[open] .icon {
  content: "";
}

details[open] .icon::before {
  content: "\f067"; /* Font Awesome Minus */
}

/* Rotate icon when open */
details[open] .icon {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* Default state */
details .icon {
  transition: transform 0.3s ease;
}





/***********/


/* Target the scrollbar itself */
::-webkit-scrollbar {
  width: 4px;  /* Adjust the width to make the scrollbar slim */
  height: 4px; /* For horizontal scrollbar, if needed */
}

/* Target the track (the background area of the scrollbar) */
::-webkit-scrollbar-track {
  background: transparent; /* Make the track transparent or add a color */
}

/* Target the thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* Add color and opacity to the thumb */
  border-radius: 10px; /* Optional: round the thumb's corners */
}

/* Hover effect for the scrollbar thumb (when user hovers over scrollbar) */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6); /* Darken the thumb on hover */
}