@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #172033;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
  }

  h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  h5,
  h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.35;
  }

  p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.7;
  }

  a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }

  button {
    font-family: 'Inter', sans-serif;
  }

  input,
  textarea,
  select {
    font-family: 'Inter', sans-serif;
  }

  label {
    font-family: 'Inter', sans-serif;
  }

  span {
    font-family: 'Inter', sans-serif;
  }

  li {
    font-family: 'Inter', sans-serif;
  }
}
 :root{
  --navy:#071d33;
  --blue:#08a8e8;
  --pink:#f50067;
  --light:#f4faff;
  --muted:#64748b
}
 
 
 
 *{
  box-sizing:border-box;
  scroll-behavior:smooth
}
body{
  font-family:Inter,sans-serif;
  color:#17243a
}


  .brand-track {
    animation: brand-scroll 25s linear infinite;
  }

  #brandSlider:hover .brand-track{
     animation-play-state: paused;
    }

  @keyframes brand-scroll {
    from {  transform: translateX(0);}
    to {  transform: translateX(calc(-50% - 1.25rem));}
  }
  @media (max-width: 640px){
     .brand-track 
     {
       animation-duration: 20s;
      }
    }




 .btn-whatsapp{
  background:#25d366;
  color:#fff;
  border:0;
  font-weight:800;
  border-radius:9px
}

 .whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:29px;
  z-index:999;
  box-shadow:0 10px 25px #0003
}

 .whatsapp:hover{
  color:#fff
}

 @media(max-width:991px){
  .hero-content
  {
    padding:55px 0
  }
}