@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #0f172a;
}

@theme {
  --font-playfair: var(--font-playfair);
  --font-poppins: var(--font-poppins);
  --font-roboto: var(--font-roboto);
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar hiding utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Paragraph color */
.para-colour {
  color: #000;
}

/* Language selector */
.spacing {
  height: 56px !important;
  width: 125px;
  align-items: center;
  justify-content: center;
}

/* Account box */
.spacing-account {
  height: 56px !important;
  align-items: center;
  justify-content: center;
}

/* Search bar */
.spacing-search {
  width: 662px;
  height: 56px;
}

/* Sign-in box */
.spacing-signin {
  width: 245px;
  height: 56px;
}

/* Inner section paragraph */
.inner-section-para {
  color: #6A7282;
}

/* Banner Image Ripple growAndFade Animation */
@keyframes growAndFade {
  0% {
    transform: scale(0.85);
    opacity: 0.85;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.grow-and-fade {
  animation: growAndFade 5s infinite ease-out;
}