/* CSS Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Fluid font-size: 1280px = 100vw baseline, scales proportionally */
  font-size: clamp(62.5%, 0.78125vw, 200%);
  scroll-behavior: smooth;
  overflow-x: hidden; /* Disable horizontal scrolling */
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Disable horizontal scrolling */

  background-image:
    linear-gradient(1.46deg, rgba(255, 219, 112, 0.3) -43.08%, rgba(202, 216, 219, 0.3) 82.53%),
    url('/public/common/primary-background.png');
  background-size: cover, 15%;
  background-repeat: no-repeat, repeat;
  background-position: center center, center center;
  background-attachment: fixed;
}


 
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:root {
  /* Baseline: 1280×720 viewport */
  --vw-base: 1280;
  --vh-base: 720;

  /* Fluid scaling functions */
  --fluid-xs: clamp(0.8rem, 0.625vw, 4rem);   /* 8px baseline */
  --fluid-sm: clamp(1.6rem, 1.25vw, 8rem);    /* 16px baseline */
  --fluid-md: clamp(2.4rem, 1.875vw, 12rem);  /* 24px baseline */
  --fluid-lg: clamp(3.2rem, 2.5vw, 16rem);    /* 32px baseline */
  --fluid-xl: clamp(4.8rem, 3.75vw, 24rem);   /* 48px baseline */

  --primary-color-1: #9C3236;
  --primary-color-2: #436E55;
  --primary-color-3: #C74A9B;
  --secondary-color: #C32921;
  --standard-section-bg: #CAD8DB;


  --font-primary: 'Nunito Sans', sans-serif;
  --font-secondary: 'Abhaya Libre', serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;


  /* Legacy spacers (will be replaced gradually) */
  --spacer-xs: var(--fluid-xs);
  --spacer-sm: var(--fluid-sm);
  --spacer-md: var(--fluid-md);
  --spacer-lg: var(--fluid-lg);
  --spacer-xl: var(--fluid-xl);
}


body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: clamp(1.6rem, 1.25vw, 8rem); /* Fluid 16px baseline */
  color: #333;
}


.section-standard {
  background-color: var(--standard-section-bg);
  padding: var(--spacer-md) var(--spacer-sm);
}


.text-primary-1 {
  color: var(--primary-color-1);
}

.text-primary-2 {
  color: var(--primary-color-2);
}

.text-primary-3 {
  color: var(--primary-color-3);
}

.text-secondary {
  color: var(--secondary-color);
}

.font-secondary {
  font-family: var(--font-secondary);
}

.fw-light {
  font-weight: var(--font-weight-light);
}

.fw-regular {
  font-weight: var(--font-weight-regular);
}

.fw-medium {
  font-weight: var(--font-weight-medium);
}

.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

.fw-bold {
  font-weight: var(--font-weight-bold);
}

/* ------------------------------------------
   Footer Social Icons Fix - Ensure Horizontal Layout
------------------------------------------ */
.footer_socials {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
  margin-bottom: 0.8rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.footer_socials picture {
  display: inline-block !important;
}

.footer_socials img {
  width: 45px !important;
  height: 45px !important;
  filter: brightness(0) invert(1) !important;
  transition: transform 0.3s ease !important;
  display: block !important;
}

.footer_socials img:hover {
  transform: scale(1.1) !important;
  cursor: pointer !important;
}