@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap');

:root {
  --color-cocoa-500: rgba(111, 102, 95, 1);
  --color-cocoa-200: rgba(135, 122, 117, 1);
  --color-cocoa-300: rgba(62, 56, 51, 1);
  --color-cream-200: rgba(243, 239, 232, 1);
  --color-cream-100: rgba(111, 102, 95, 1);
  --color-cream-50: rgba(244, 243, 238, 1);
  --color-blush-500: rgba(217, 138, 112, 1);
  --color-blush-300: rgba(233, 167, 148, 1);
  --color-blush-200: rgba(242, 196, 180, 1);
  --color-blush-100: rgba(251, 239, 233, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-black-80: rgba(24, 21, 19, 0.8);
  --color-gray-300: rgba(135, 122, 117, 1);
  --color-gray-200: rgba(227, 220, 211, 1);
  --color-gray-100: rgba(255, 255, 255, 0.702);
  --color-gray-50: rgba(255, 255, 255, 0.102);


  /* text */
  --text-heading: var(--color-cocoa-300);
  --text-black: var(--color-black);
  --text-white: var(--color-white);
  --text-body: var(--color-cocoa-500);
  --text-accent: var(--color-blush-500);
  --text-brand: var(--color-white);
  --text-on-primary: var(--color-white);
  --text-on-secondary: var(--color-gray-100);
  --text-on-tertiary: var(--color-gray-50);

  /* brand*/
  --brand-primary-strong: var(--color-blush-500);
  --brand-primary: var(--color-blush-300);
  --brand-neutral: var(--color-cocoa-200);

  /* menu navigation */
  --nav-active: var(--color-blush-500);
  --nav-default: var(--color-cream-100);

  /* background */
  --bg-page: var(--color-cream-200);
  --bg-section: var(--color-white);
  --bg-card: var(--color-white);
  --bg-popup: var(--color-black-80);
  --border-color: var(--color-gray-300);
  --border-subtle: var(--color-gray-200);
  --border-card: var(--color-blush-200);
  --bg-image-placeholder: var(--color-blush-100);

  --font-heading: 'Cormorant', serif;
  --font-body: 'Nunito', sans-serif;

  --font-size-h1: 80px;
  --line-height-h1: 1.1;

  --heading-style-h1: 60px;
  --heading-line-height-h1: 1.13;

  --font-size-h2: 60px;
  --line-height-h2: 1.13;

  --heading-style-h2: 40px;
  --heading-line-height-h2: 1.2;

  --font-size-h3: 20px;
  --line-height-h3: 1.4;

  --font-size-body-large: 18px;
  --line-height-body-large: 1.6;

  --font-size-body: 16px;
  --line-height-body: 1.75;

  --font-size-body-medium: 16px;
  --line-height-body-medium: 1.75;

  --font-size-small: 14px;
  --line-height-small: 1.6;

  --font-size-label: 16px;
  --line-height-label: 1.5;

  --font-size-button: 16px;
  --line-height-button: 1.5;

  --font-size-heading-small: 25px;
  --line-height-heading-small: 1.2;
}

html {
  scroll-behaviour: smooth;
}

ul li,
ol li {
  list-style: none;
}

body p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--text-body);
  margin-bottom: 0;
}

body a {
  color: var(--nav-default);
}

body a:hover {
  color: var(--nav-active);
}

.title-60 {
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.2;
  margin-bottom: 0px;
  color: var(--text-heading);
}

.title-40 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--text-heading);
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-64 {
  margin-bottom: 64px;
}

.mt-40 {
  margin-top: 40px !important;
}

.bg-page {
  background-color: var(--bg-page);
}

.bg-section {
  background-color: var(--bg-section);
}

.col {
  padding-bottom: 0 !important;
}

.row::after {
  display: none !important;
}

.section-no {
  padding: 0px;
}

.section-large {
  padding: 96px 0px !important;
}

.section-medium {
  padding: 40px 0px !important;
}


.social-links {
  margin: 0 !important;
}

.social-links > .col {
    padding: 0;
}

.social-links .col-inner {
    display: flex;
    gap: 12px;
    padding: 0;
}

.social-links .img {
    width: auto !important;
    margin: 0 !important;
}

.social-links .img img {
    display: block;
    width: auto;
    height: 24px;
}

.col-inner>.img:not(:last-child),
.col>.img:not(:last-child) {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .section-large {
    padding: 72px 0px !important;
  }

  .section-medium {
    padding: 32px 0px !important;
  }
}

@media (max-width: 767px) {
  .section-large {
    padding: 56px 0px !important;
  }

  .section-medium {
    padding: 24px 0px !important;
  }
}