/**
 * Hailingmeng Global Styles
 */

/* ==========================================
   Playfair Font - Local
   ========================================== */
@font-face {
  font-family: 'Playfair';
  src:
    url('./Playfair/PlayfairDisplay-Regular.woff2') format('woff2'),
    url('./Playfair/PlayfairDisplay-Regular.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair';
  src: url('./Playfair/PlayfairDisplay-Bold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: 'Playfair';
  src: url('./Playfair/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
} */

/* ==========================================
   CSS Variables
   ========================================== */
:root {
  --header-height: max(100px, 9.25rem);
  --section-padding: 5rem;
  --font-family: 'Montserrat';
  --title-font-family: 'Playfair';
  --root-container-spacing: 8.125rem;
  --font-size-h1: 3.75rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.625rem;
  --font-size-h4: 1.125rem;
  --font-size-subtitle: 2rem;
  --font-size-sm: max(0.75rem, 12px);
  --font-size-md: max(1rem, 16px);
  --font-size-lg: max(1.125rem, 18px);
  --font-size-xl: max(1.5rem, 18px);
  --font-weight-md: 400;
  --font-weight-lg: 800;
  --font-weight-xl: 800;
  --font-weight-xxl: 800;
}

/* ==========================================
   Page Loading State
   ========================================== */
html.hailingmeng-loading body {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s linear 0.6s,
    opacity 0.6s ease-out;
}

/* ==========================================
   Container
   ========================================== */
.container {
  margin: 0 auto;
  padding-left: var(--root-container-spacing);
  padding-right: var(--root-container-spacing);
  max-width: 1920px;
  width: 100%;
}

/* ==========================================
   Headings
   ========================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--title-font-family);
  font-style: normal;
  line-height: 1.3;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-xl);
  line-height: 108%;
}

h2 {
  font-size: max(var(--font-size-h2), 18px);
  font-weight: 400;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-lg);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: 500;
}

/* ==========================================
   Playfair Display Font Styles
   ========================================== */
.font-playfair {
  font-family: var(--font-family);
}

h1.font-playfair,
h2.font-playfair,
h3.font-playfair,
h4.font-playfair {
  font-family: var(--font-family);
  font-weight: 500;
}

.text-playfair {
  font-family: var(--font-family);
}

.title-playfair {
  font-family: var(--font-family);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Playfair italic style */
.font-playfair-italic {
  font-family: var(--font-family);
  font-style: italic;
  font-weight: 400;
}

/* ==========================================
   Buttons
   ========================================== */

.hailingmeng-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #616161;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.3s ease;
  padding-bottom: 4px;
  border-bottom: 1px solid #616161;
}

.hailingmeng-text-btn svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* ==========================================
   Inquiry Form Overrides
   ========================================== */
.inqury-form .input-wrap .inqury_submit:hover {
  background: #3b945b;
}

.custom-pop-inquiry .container {
  padding: 0px !important;
}

/* ==========================================
   Responsive Breakpoints
   ========================================== */

@media screen and (max-width: 1440px) {
  :root {
    --root-container-spacing: 5rem;
    --section-padding: 4rem;
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 14px;
  }
  :root {
    --root-container-spacing: 60px;

    --font-size-h1: 3.75rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.625rem;
    --font-size-h4: 1.125rem;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 12px;
  }
  :root {
    --root-container-spacing: 30px;
    --section-padding: 3rem;

    --font-size-h1: 2.75rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.625rem;
    --font-size-h4: 1.125rem;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --root-container-spacing: 20px;
    --section-padding: 2rem;

    --font-size-h1: 2.4rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.625rem;
    --font-size-h4: 1.125rem;
  }
}

@media screen and (max-width: 320px) {
  :root {
    --root-container-spacing: 20px;
  }
}