/* Google Fonts Import (Signika & Roboto) */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Roboto:wght@400;500;600;700&family=Signika:wght@300..700&display=swap');

/* Tailwind CSS v4 Core Directives */
@import "tailwindcss";

@source "../../*.html";
@source "../js/**/*.js";
@theme {
  /* Brand Typography */
  --font-heading: 'Signika', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-sans: 'Arimo', sans-serif;

  /* Brand Colors */
  --color-brand-primary: #f69b94;
  --color-brand-secondary: #ffc2bf;
  --color-brand-light: #fff4f4;
  --color-brand-cream: #f7f1de;
  --color-brand-grey: #514e4e;
  --color-brand-grey: #262626;

  /* Custom Breakpoints */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1366px;
  --breakpoint-xl: 1600px;
}

/* Global Base Styles */
@layer base {
  body {
    font-family: var(--font-body);
    background-color: var(--color-brand-light);
    color: #000000;
    line-height: 1.8;
    letter-spacing: 0.2px; /* Updated line-height to 1.8 for spacious body text */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.25;
  }
}

/* Custom Reusable Utilities */
.wd-contained {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@keyframes infinite-scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

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

@media (min-width: 1024px) and (max-width: 1365px) {
  .wd-contained {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (min-width: 1366px) and (max-width: 1599px) {
  .wd-contained {
    max-width: 1200px;
  }
}

@media (min-width: 1600px) {
  .wd-contained {
    max-width: 1440px;
  }
}

@media (max-width:767px){
  .pd-100 {
  padding-top: 60px;
  padding-bottom: 60px;
}

 .pd-top{
padding-top:60px;
  }

  .pd-bottom{
padding-bottom:60px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pd-100 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

   .pd-top{
padding-top:80px;
  }

  .pd-bottom{
padding-bottom:80px;
  }
}

@media (min-width: 1024px) {
  .pd-100 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .pd-top{
padding-top:100px;
  }

  .pd-bottom{
padding-bottom:100px;
  }
}