:root {
 --color-0: #FFFFFF;
 --color-1: #49a52c; /* Verde */
 --color-2: #000000;
 --color-3: #f4d9a4;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600,700');

html {box-sizing: border-box;font-family:"Roboto", sans-serif;}
*, *:before, *:after {box-sizing: inherit;}

 body {
  font-family:"Roboto", sans-serif !important;
 }
 
 
 
 .modal-container{
   position: fixed;
  top: 0;
  background: #000000c4;
  left: 0;
  right: 0;
  border: 0;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-inline: 18px;
  align-items: center;
  gap: 24px;
  } 
  
 .modal-button{
  border: 1px solid white;
  width: 32px;
  height: 32px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 32px;

 }
 .modal-button:focus{
   outline: none !important;
 }
 
 .modal-photo{
     max-height: 80vh;
      max-width: 80vw;
      margin: auto;
 }
 #modal-photo-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
 }
 .scroll-wrapper {
    user-select: none;
    padding-top: 20px;
    padding-bottom: 20px;
    will-change: scroll-position;
    scrollbar-width: none;
    overflow: scroll;
    display: flex;
    gap: 1rem;
    
  }
  .scroll-container {
    display: flex;
    width: max-content;
    cursor: grab;
    scroll-behavior: smooth;
    gap: 8px;
   padding-inline: 8px;
    
  }
.scroll-container.dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

.scroll-container img {
    user-drag: none;         
    -webkit-user-drag: none;  
    -moz-user-drag: none;     
    -o-user-drag: none;      
    max-height: 350px;
    user-select: none;    
    border-radius: 8px   
}

 .hidden{
  display: none;
 }


 #menu-bit-bus{
  background-color: var(--color-1);
  padding: 0.7rem 1rem .5rem;
 }

 p, a {
  font-size: 1rem;
 }

 a:hover {
  text-decoration: underline;
 }

 h1 {
  color: var(--color-0);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
 }

 h2 {
  font-size: 1.6rem;
  font-weight: 600; 
  margin-bottom: 1.5rem;
 }

 h3.title {
  font-size: 1.3rem;
  font-weight: 600; 
  margin-top: 3rem;
  margin-left: 1rem;
  position: relative;
 }

 h3.title::before {
  content:'';
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: var(--color-1);
  left: -1rem;
 }
 
 section {
  margin: 3rem 0;
 }

 hr {
  margin: 1rem 0 2rem;
 }

 .btn-primary {
  padding: 2rem 0;
  background-color: #00a5f0;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 2rem 4rem;
 }

 .carousel-inner {
  border-radius: 8px;
 }

 .carousel-indicators li {
  width: 10px;
  height: 10px;
 }

#accordion #itens .card {
  margin-bottom: 15px;
  border: 0;
  border-radius: 8px;
}

#accordion #itens .card .card-header {
  border: 0;
  -webkit-box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
          box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
  border-radius: 2px;
  padding: 0;
}

#accordion #itens .card .card-header .btn-header-link {
  color: #fff;
  display: block;
  text-align: left;
  background: var(--color-1);
  color: #FFFFFF;
  padding: 20px;
  font-size: 18px;
  font-weight: 400;
}

#accordion #itens .card .card-header .btn-header-link:after {
  content: "\f106";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  float: right;
}

#accordion #itens .card .card-header .btn-header-link.collapsed {
  background: var(--color-1);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
}

#accordion #itens .card .card-header .btn-header-link.collapsed:after {
  content: "\f107";
}

#accordion #itens .card .collapsing {
  background: #FDF5EB;
  line-height: 30px;
  /* padding: 20px; */
}

#accordion #itens .card .collapse {
  border: 0;
}

#accordion #itens .card .collapse.show {
  background: #FDF5EB;
  line-height: 30px;
  color: #222;
  /* padding: 20px; */
  border-radius: 0 0 8px 8px;
}

.card-body {
 padding: 1.5rem 2.5rem;
}

.accordion-link {
 color: #2e6b1a;
 font-weight: bold;
}

.accordion-link:hover {
 color: #214c13;
}

.card-text {
 margin: 1rem;
}

button:focus {
 outline: 5px auto #c3ad84 !important;
}

.box {
  background: url('https://www.ucs.br/site/midia/arquivos/bg-bitbus_21.png');
  opacity: 0.3s;
  padding: 3rem;
  margin: 2rem 0;
  border: none;
  border-radius: 8px;
 }

.box-text {
  color: var(--color-0);
  background-color: var(--color-2);
  padding: 1rem;
  display: inline-block;
}

.box-link, .box-link:hover {
  color:var(--color-0);
}

.row.images {
  margin-top: 2rem;
}

.box-margin {
 margin: 1.5rem 1rem;
}

.box-margin h3 {
 color: #49A52C;
 font-size: 20px;
 text-transform: uppercase;
 font-style: normal;
 font-weight: 700;
 line-height: 40px;
 letter-spacing: 0.5px;
}

.gap-80 {
 gap: 80px;
}

/* MEDIA QUERIES */

 
@media (max-width: 767px) {
   
   .back-photo{
     position: absolute;
    background: #ffffff2e;
     left: 24px;
   }
   .next-photo{
     position: absolute;
    background: #ffffff2e;
     right: 24px;
   }
   
   .scroll-container img {
      max-height: 250px;
 
    }
    
     .modal-photo{
     max-width: 100%;
 }
}


@media (min-width: 0px) and (max-width: 320px) {
 #accordion #itens .card .card-header .btn-header-link.collapsed {
   display: grid;
   grid-template-columns: 22fr 1fr;
   gap: 2rem;
 }
 ul {
  padding: 0;
 }
}

@media (min-width: 320.01px) and (max-width: 375px) {
 #accordion #itens .card .card-header .btn-header-link.collapsed {
   display: grid;
   grid-template-columns: 22fr 1fr;
   gap: 2rem;
 }

 ul {
  padding: 0;
 }
}

@media (min-width: 375.01px) and (max-width: 425px) {
 ul {
  padding: 0;
 }
}

@media (min-width: 425.01px) and (max-width: 576px) {
 ul {
  padding: 0;
 }
}