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

:root {
  --clr-primary: #0059a7;
  --clr-primary-alpha: #0059A748;
  --clr-text:#0A334BFF;
  --clr-btn:#12547AFF;
  --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: 105px ;
  --size-navbar-mobile: 90px ;
  --btn-radius: 15px ;
}

/* ===================== Utils ===================== */
/* primary */
.bg-primary {
  background: var(--clr-primary);
}
.bg-primary-alpha {
  background: var(--clr-primary-alpha);
}
.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);
}

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

/*  */
.container-my-card{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  padding: 0 2rem;
  &{
    @media screen and (max-width:1390px){
      display: grid;
      grid-template-columns: repeat(2,1fr);
      /* grid-template-rows: repeat(3,1fr); */
    }
    @media screen and (max-width:665px){
      display: grid;
      grid-template-columns: repeat(1,1fr);
    }
  }
}
.my-card{
  position: relative;
  background: var(--clr-primary);
  min-width: 280px;
  width: 100%;
  /* max-width: 280px; */
  min-height: 320px;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.219);
  border-radius: 10px;
  padding: 1rem;


}
.my-card h3 {
text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: white;
    @media (max-width:850px){
      font-size: 1.5rem;
    }
}
.my-card div {
  display: flex;
  justify-content: center;
  width: 100%;

}
.my-card div p {
font-size: 1.5rem;
    color: white;
    @media (max-width:850px){
      font-size: 1.08rem;
    }
}
/*  */
.menu-burguer{
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;

}
.menu-burguer::after{
  content: '';
  width: 30px;
  height: 3px;
  background: white;
  border-radius: 5px;
}
.menu-burguer div {
  content: '';
  width: 30px;
  height: 3px;
  background: white;
  border-radius: 5px;
}
.menu-burguer::before{
  content: '';
  width: 30px;
  height: 3px;
  background: white;
  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;
  min-height: fit-content;
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
}
.service-ribbon{
  position: relative;
  top: 0;
  left: 0;
  transform: scaleY(2.25) ;
  min-width: 15%;
  height: 100px;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  &{
    @media (max-width:680px){
      min-width: 100px;
      /* transform: scaleY(2) ; */
    }
    @media (max-width:500px){
      min-width: 100px;
      /* transform: scaleY(1.8) ; */
    }
    @media (max-width:400px){
      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);
    }
  }
}