@import url("./fonts/amulya.css");
@import url("./fonts/synonym.css");

:root {
  /* 60% Neutral (backgrounds / big areas) */
  --neutral-light: #f8f9fa; /* light neutral text, borders */
  --neutral-dark: #1b3a4b; /* deep charcoal blue */

  /* 30% Primary (sections / buttons / headings) */
  --primary: #0b525b; /* midnight green */

  /* 10% Accent (links / CTA / hover) */
  --accent: #4d194d; /* palatinate purple */

  /* Accent Gradient (use ONLY for CTA buttons, highlights) */
  --accent-gradient: linear-gradient(
    135deg,
    #006466,
    #0b525b,
    #212f45,
    #4d194d
  );

  --accent-1: gold;
  --accent-2: #1d3557;
  --accent-3: ##f4acb7;
  --accent-4: ##627f61;
  --accent-5: royalblue;

  /* FONT FAMILIES */
  --font-body: "Synonym", sans-serif;
  --font-heading: "Amulya", sans-serif;

  /* FONT WEIGHTS */
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;

  /* FONT SIZES */
  --fs-base: 1rem;
  --fs-h6: 1.25rem;
  --fs-h5: 1.5625rem;
  --fs-h4: 1.953rem;
  --fs-h3: 2.441rem;
  --fs-h2: 3.052rem;
  --fs-h1: 3.815rem;

  /* DISPLAY SIZES - For hero sections and large displays */
  --fs-display-lg: 4.769rem;
  --fs-display-xl: 5.961rem;
  --fs-display-2xl: 7.451rem;

  /* LINE HEIGHTS */
  --lh-base: 1.5;
  --lh-h6: 1.5;
  --lh-h5: 1.5;
  --lh-h4: 1.3;
  --lh-h3: 1.2;
  --lh-h2: 1.1;
  --lh-h1: 1;

  /* DISPLAY LINE HEIGHTS */
  --lh-display-lg: 0.95;
  --lh-display-xl: 0.9;
  --lh-display-2xl: 0.85;

  /* LETTER SPACING */
  --ls-h6: -0.005rem;
  --ls-h5: -0.008rem;
  --ls-h4: -0.01rem;
  --ls-h3: -0.015rem;
  --ls-h2: -0.018rem;
  --ls-h1: -0.02rem;

  /* DISPLAY LETTER SPACING */
  --ls-display-lg: -0.025rem;
  --ls-display-xl: -0.03rem;
  --ls-display-2xl: -0.035rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--neutral-dark);
  background-color: var(--primary);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--primary);
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
}
h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  letter-spacing: var(--ls-h6);
}

.display-2xl {
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display-2xl);
  letter-spacing: var(--ls-display-2xl);
  font-family: var(--font-heading);
  color: var(--primary);
  font-weight: var(--fw-black);
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-family: var(--font-heading);
  color: var(--primary);
  font-weight: var(--fw-extra-bold);
}

.display-lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
  font-family: var(--font-heading);
  color: var(--primary);
  font-weight: var(--fw-bold);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Global fix - prevents layout breaking at all breakpoints */
@media (max-width: 1440px) {
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 820px) {
  .about-container,
  .service-content,
  .pricing-cards {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }
  
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Specific fix for 768px breakpoint */
@media (max-width: 768px) {
  * {
    box-sizing: border-box !important;
  }
  
  .about-container,
  .service-content,
  .pricing-cards {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}