/* =========================================
   Google Fonts
========================================= */

/* =========================================
   Reset / Normalize & Base styles
========================================= */
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   
}

html{
   scroll-behavior: smooth;
}

li{
   list-style: none;
}

a{
   text-decoration: none;
}

body{
   min-height: 100vh;
   background: #f8f9fc;
}

/* =========================================
   Bottom navigation menu
========================================= */
.bottom-menu-container{
   position: relative;
}

.bottom-menu{
   position: fixed;
   left: 50%;
   bottom: 50px;
   opacity: 1;
   transform: translateX(-50%);
   /* display: none; */
   transition-property: bottom, opacity;
   transition: .5s ease, .3s ease;
}

.bottom-menu.hide{
   bottom: -75px;
   opacity: 0;
   transition-property: bottom, opacity;
   transition: .5s ease, .3s ease;
}

.bottom-menu-inner{
   position: relative;
}

.bottom-menu .menu{
   background: rgba(78, 78, 78, 0.4);
   backdrop-filter: blur(4px);
   display: flex;
   justify-content: center;
   align-items: center;
   column-gap: 25px;
   padding: 16px 35px;
   border: 1px solid hsla(218, 39%, 78%, 0.5);
   border-radius: 50px;
    
}



.bottom-menu .menu-item a{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.bottom-menu .menu-item a i{
   color: #ffffff;
   font-size: 1.4rem;
   /* background: blue; */
     width: 44px;
   height: 44px;
      display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: .3s ease;
}

.bottom-menu .menu-item:hover a i{
   color: #f8f9fc;
   background: hsla(0, 0%, 0%, 0.13);
}

.bottom-menu .menu-item .current i{
   background: rgba(255, 255, 255, 0.1);
}

.bottom-menu .menu-item a span{
   position: absolute;
   transform: translateY(-53px);
   color: rgb(255, 255, 255);
   background: #3A0CA3;
   padding: 3px 10px;
   border-radius: 5px;
   pointer-events: none;
   opacity: 0;
}

.bottom-menu .menu-item:hover a span{
   opacity: 1;
}

.bottom-menu .menu-item a span:before{
   content: "";
   position: absolute;
   background: #3A0CA3;
   width: 10px;
   height: 10px;
   left: 50%;
   bottom: -8px;
   transform: rotate(45deg) translateX(-50%);
}

.bottom-menu .menu-hide-btn{
   z-index: 999;
   position: absolute;
   background: #3A0CA3;
   color: #ffffff;
   font-size: 1.52rem;
      width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   top: -5px;
   right: 0;
   cursor: pointer;
   transition: .3s ease;
   opacity: 0;
   pointer-events: none;
}

.bottom-menu .menu-hide-btn.show{
   opacity: 1;
   pointer-events: all;
}

.bottom-menu .menu-hide-btn:hover{
   color: #f8f9fc;
   background: #3A0CA3;
}

.menu-show-btn{
   position: fixed;
   background: rgba(78, 78, 78, 0.3);
   backdrop-filter: blur(10px);
   width: 85px;
   height: 50px;
   left: 50%;
   bottom: -75px;
   opacity: 0;
   translate: -50% 0;
   border-bottom: 1px solid hsl(217 26% 12% / .1);
   border-left: 1px solid hsl(217 26% 12% / .1);
   border-radius: 5px;
   display: grid;
   place-content: center;
   gap: 5px;
   animation: wiggle 2s linear infinite;
   animation-delay: 1s;
   transition-property: bottom, opacity;
   transition: .5s ease, .3s ease;
   cursor: pointer;
}

.menu-show-btn.show{
   bottom: 50px;
   opacity: 1;
   transition-property: bottom, opacity;
   transition: .5s ease, .3s ease;
}

@keyframes wiggle {
   0%,
   5%{
      transform: rotateZ(0);
   }
   15%{
      transform: rotateZ(-15deg);
   }
   20%{
      transform: rotateZ(10deg);
   }
   25%{
      transform: rotateZ(-10deg);
   }
   30%{
      transform: rotateZ(6deg);
   }
   35%{
      transform: rotateZ(-4deg);
   }
   40%,
   100%{
      transform: rotateZ(0);
   }
}

.menu-show-btn .bar-01,
.menu-show-btn .bar-02{
   background: #ffffff;
   width: 40px;
   height: 5px;
   transition: .15s ease;
}

.menu-show-btn:hover .bar-01,
.menu-show-btn:hover .bar-02{
   background: #ffffff;
}

/* =========================================
   Page section
========================================= */
.page-section{
   min-height: 100vh;
   display: flex;
   justify-content: center;
   padding-top: 125px;
}

.section-title{
   color: #172627;
   font-size: 3rem;
   font-weight: 600;
}

/* =========================================
   Media Queries (max-width: 768px)
========================================= */
@media screen and (max-width: 768px){
   .bottom-menu {
      bottom: 30px;
   }

   .bottom-menu .menu-item a i {
      font-size: 1.3rem;
   }
}

/* =========================================
   Media Queries (max-width: 480px)
========================================= */
@media screen and (max-width: 480px){
   .bottom-menu {
      width: 100%;
      padding: 0 20px;
   }

   .bottom-menu .menu {
      width: 100%;
      justify-content: space-between;
      padding: 15px 20px;
      column-gap: 7px;
   }

   .bottom-menu .menu-item a i {
      font-size: 1.15rem;
      padding: 8px;
   }

   .bottom-menu .menu-item a span {
      padding: 2px 10px;
      font-size: .85rem;
   }

   .bottom-menu .menu-hide-btn {
      font-size: 1.25rem;
   }

   .menu-show-btn {
      width: 75px;
      height: 45px;
   }

   .menu-show-btn .bar-01, .menu-show-btn .bar-02 {
      width: 37px;
      height: 4px;
   }

   .section-title{
      font-size: 2.5rem;
   }
}

.neo-badge {
        background: #ffffff; /* mesmo tom do fundo */
        color: #3A0CA3; /* ajuste pro seu primary */
        

        box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.04),
          6px 6px 12px rgba(0, 0, 0, 0.08),
        -6px -6px 12px rgba(255, 255, 255, 0.9);

        transition: all 0.25s ease;
      }

      /* hover elegante */
      .neo-badge:hover {
        box-shadow:
          inset 4px 4px 8px rgba(0, 0, 0, 0.08),
          inset -4px -4px 8px rgba(255, 255, 255, 0.9);
      }