@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  --clr-primary: #0097ff;
  --clr-primary-alpha: #0099FF75;
  --clr-text:#0A334BFF;
  --clr-btn:#004fb3;
  --clr-foreground: #fff;
  /*  */
  --blue-50: #eaf2f8;
  --blue-100: #d6e5f1;
  --blue-200: #a4c4e0;
  --blue-300: #71a2cd;
  --blue-400: #397ebb;
  --blue-500: #0059a7;
  --blue-600: #004785;
  --blue-700: #003664;
  --blue-800: #002c52;
  --blue-900: #002342;
  --blue-950: #001426;
  /* size */
  --size-navbar: 122px ;
  --size-navbar-mobile: 117px ;
  --btn-radius: 15px ;
}

/* ===================== Utils ===================== */
/* primary */
.bg-primary {
  background: var(--clr-primary);
}
.bg-primary-alpha {
  background: var(--clr-primary-alpha) !important;
}
.text-primary {
  color: var(--clr-primary);
}
/* foreground */
.bg-foreground {
  background: var(--clr-foreground);
}
.text-foreground {
  color: var(--clr-foreground);
}
.text-alt {
  color: var(--clr-text);
  
}


/* ===================== Scroll ===================== */
/* html {
  scroll-behavior: smooth;
} */
::-webkit-scrollbar{
  width: 10px;
  background: var(--clr-foreground);
  box-shadow: inset 3px 1px 2px 1px #00000017;
}

::-webkit-scrollbar-thumb{
  background:  #cfcfcf;
  border-radius: 10px;
}
/* ===================== Sections ===================== */
.h-section-hero {
  height: 100vh;
  padding-top: var(--size-navbar);
  @media (max-width: 640px) {
    height: 100vh;
    padding-top: var(--size-navbar-mobile);
  }
}
.h-section {
  height: min-content;
  min-height: fit-content;
  padding-top: var(--size-navbar);
}
[id="transparencia"],[id="contato"],[id="faq"],[id="servicos"]{
  scroll-margin-top: var(--size-navbar);
}

.container-nav{
  margin: auto;
  width: 100%;
  max-width: 1200px;
}

/*  */

/*  */
.menu-burguer{
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;

}
.menu-burguer::after{
  content: '';
  width: 30px;
  height: 3px;
  background: black;
  border-radius: 5px;
}
.menu-burguer div {
  content: '';
  width: 30px;
  height: 3px;
  background: black;
  border-radius: 5px;
}
.menu-burguer::before{
  content: '';
  width: 30px;
  height: 3px;
  background: black;
  border-radius: 5px;
}

.ul-mobile{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  & li{
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    color: var(--clr-text);
    &:last-child{
      color: white;
      font-weight: 400;
    }
  }
}

.menu-list{
  transition: all .25s ease-in-out;
  transform: translateY(100%);
}
.menu-list.close{
  transform: translateY(0%);
}
/* ==================================== */
.service-card{
  background: white;
  position: relative;
  display: flex;
  gap: 1rem;
  width: 100%;
  height: min-content ;
  max-height: min-content;
  /* min-height: fit-content; */
  padding: 1rem 1rem;
  display: flex;
  justify-content: center;  
}
.service-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height:100%;
}
.service-content .service-content-body{
  color: #5C7C99FF;
}
@media screen and (min-width:680px){
  .service-content p{
    font-size: .8rem;
  }
}
.service-ribbon{
  position: relative;
  top: -35px;
  left: 0;
  transform: scaleY(2) ;
  min-width: 15%;
  height: 70px;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width:680px){
  .service-ribbon{
    min-width: 100px;
    /* transform: scaleY(2) ; */
  }
}
@media (max-width:500px){
  .service-ribbon{
    min-width: 100px;
    /* transform: scaleY(1.8) ; */
  }
}
@media (max-width:400px){
  .service-ribbon{
    min-width: 100px;
    /* transform: scaleY(120%) ; */
  }
}
.service-card-shadow{
  z-index: -50;
  position: absolute;
  top: 0;
  margin:0 auto;
  width: 90%;
  height: 100%;
  /* box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

h2 {
  scroll-margin-top: 300px;
  &{
    @media (min-width:680px){
      scroll-margin-top: var(--size-navbar-mobile);
    }
  }
}

@media screen and (max-height:895px){
  .hero-img{
    max-height: 550px;
  }
}
@media screen and (max-height:700px){
  .hero-img{
    max-height: 380px;
  }
}