.elementor-1213 .elementor-element.elementor-element-5104226{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1213 .elementor-element.elementor-element-d588683{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1213 .elementor-element.elementor-element-2e8c247{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-ec49dc7 *//* ==========================================
   ROOT
========================================== */

:root {

  --header-bg: #F7F2E8;

  --header-text: #211F1B;

  --header-gold: #C9A227;

  --header-border: #D8C39A;

  --header-black: #0B0A08;

}


/* ==========================================
   HEADER
========================================== */

.lela-header {

  position: relative;

  width: 100%;

  z-index: 9999;

  background:
    var(--header-bg);

  border-bottom:
    1px solid
    rgba(
      216,
      195,
      154,
      0.7
    );

  color:
    var(--header-text);

}


.lela-header *,
.lela-header *::before,
.lela-header *::after {

  box-sizing:
    border-box;

}


/* ==========================================
   CONTAINER
========================================== */

.header-container {

  width:
    min(
      1380px,
      92%
    );

  min-height:
    88px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    30px;

}


/* ==========================================
   LOGO
========================================== */

.header-logo {

  display:
    inline-flex;

  align-items:
    center;

  flex-shrink:
    0;

  text-decoration:
    none !important;

}


.header-logo-image {

  display:
    block;

  width:
    220px !important;

  height:
    auto;

  max-width:
    100%;

  object-fit:
    contain;

}


/* ==========================================
   NAVIGATION
========================================== */

.header-nav {

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    clamp(
      14px,
      1.5vw,
      27px
    );

}


.nav-link {

  position:
    relative;

  padding:
    8px 0;

  color:
    var(--header-text);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  letter-spacing:
    1.2px;

  text-decoration:
    none !important;

  white-space:
    nowrap;

  transition:
    color 0.3s ease;

}


/* ==========================================
   NAV UNDERLINE
========================================== */

.nav-link::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    0;

  height:
    1px;

  background:
    var(--header-gold);

  transition:
    width 0.3s ease;

}


.nav-link:hover,
.nav-link.active {

  color:
    var(--header-gold);

}


.nav-link:hover::after,
.nav-link.active::after {

  width:
    100%;

}


/* ==========================================
   HEADER CTA
========================================== */

.header-cta {

  min-height:
    43px;

  padding:
    0 17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  flex-shrink:
    0;

  color:
    var(--header-black);

  background:
    var(--header-gold);

  border:
    1px solid
    var(--header-gold);

  border-radius:
    7px;

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.1px;

  text-decoration:
    none !important;

  white-space:
    nowrap;

  transition:
    background 0.3s ease,
    transform 0.3s ease,
    gap 0.3s ease;

}


.header-cta strong {

  font-size:
    15px;

  font-weight:
    400;

  transition:
    transform 0.3s ease;

}


.header-cta:hover {

  color:
    var(--header-black);

  background:
    #E0C15A;

  border-color:
    #E0C15A;

  transform:
    translateY(-2px);

  gap:
    14px;

}


.header-cta:hover strong {

  transform:
    translateX(3px);

}


/* ==========================================
   MOBILE MENU BUTTON
========================================== */

.mobile-menu-button {

  display:
    none;

  width:
    42px;

  height:
    42px;

  padding:
    9px;

  margin-left:
    auto;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    5px;

  background:
    transparent;

  border:
    1px solid
    rgba(
      33,
      31,
      27,
      0.25
    );

  cursor:
    pointer;

}


.mobile-menu-button span {

  width:
    20px;

  height:
    1px;

  background:
    var(--header-text);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;

}


/* ==========================================
   MOBILE MENU OPEN ICON
========================================== */

.mobile-menu-button.menu-open
span:nth-child(1) {

  transform:
    translateY(6px)
    rotate(45deg);

}


.mobile-menu-button.menu-open
span:nth-child(2) {

  opacity:
    0;

}


.mobile-menu-button.menu-open
span:nth-child(3) {

  transform:
    translateY(-6px)
    rotate(-45deg);

}


/* ==========================================
   MOBILE MENU
========================================== */

.mobile-menu {

  display:
    none;

  max-height:
    0;

  overflow:
    hidden;

  background:
    var(--header-bg);

  border-top:
    1px solid
    transparent;

  transition:
    max-height 0.45s ease,
    border-color 0.3s ease;

}


.mobile-menu.menu-visible {

  max-height:
    700px;

  border-top-color:
    rgba(
      216,
      195,
      154,
      0.6
    );

}


.mobile-menu nav {

  width:
    88%;

  margin:
    0 auto;

  padding:
    15px 0 25px;

  display:
    flex;

  flex-direction:
    column;

}


/* ==========================================
   MOBILE LINKS
========================================== */

.mobile-nav-link {

  padding:
    16px 4px;

  color:
    var(--header-text);

  border-bottom:
    1px solid
    rgba(
      216,
      195,
      154,
      0.5
    );

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    1.5px;

  text-decoration:
    none;

  transition:
    color 0.3s ease,
    padding-left 0.3s ease;

}


.mobile-nav-link:hover {

  color:
    var(--header-gold);

  padding-left:
    10px;

}


/* ==========================================
   MOBILE COMMUNITY BUTTON
========================================== */

.mobile-community-button {

  margin-top:
    22px;

  padding:
    15px 20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--header-black);

  background:
    var(--header-gold);

  border-radius:
    7px;

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1.4px;

  text-decoration:
    none;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1150px) {

  .header-container {

    gap:
      20px;

  }


  .header-logo-image {

    width:
      145px;

  }


  .header-nav {

    gap:
      13px;

  }


  .nav-link {

    font-size:
      8px;

    letter-spacing:
      0.8px;

  }


  .header-cta {

    padding:
      0 13px;

    font-size:
      7px;

  }

}


/* ==========================================
   MOBILE / SMALL TABLET
========================================== */

@media (max-width: 900px) {

  .header-container {

    min-height:
      76px;

  }


  .header-logo-image {

    width:
      150px;

  }


  .header-nav,
  .header-cta {

    display:
      none;

  }


  .mobile-menu-button {

    display:
      flex;

  }


  .mobile-menu {

    display:
      block;

  }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

  .header-container {

    width:
      90%;

    min-height:
      70px;

  }


  .header-logo-image {

    width:
      135px;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9cc4547 *//* =========================================================
   LE'LA C. JACKSON — JOIN THE COMMUNITY
   Scoped Prefix: lela-community-
   ========================================================= */


/* ---------- SECTION ---------- */

.lela-community-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #F7F2E8;
    color: #0B0A08;
    padding: 125px 0 130px;
    box-sizing: border-box;
}


/* ---------- CONTAINER ---------- */

.lela-community-container {
    width: min(1120px, 90%);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}


/* ---------- HEADER ---------- */

.lela-community-header {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}


/* ---------- EYEBROW ---------- */

.lela-community-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 27px;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C9A227;
}


.lela-community-line {
    display: block;
    width: 42px;
    height: 1px;
    background: #C9A227;
    opacity: 0.75;
}


/* ---------- MAIN HEADING ---------- */

.lela-community-heading {
    margin: 0;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1.6px;

    color: #0B0A08;
}


.lela-community-heading em {
    display: block;

    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-style: italic;

    color: #C9A227;
}


/* ---------- INTRO ---------- */

.lela-community-intro {
    width: min(650px, 100%);
    margin: 28px auto 0;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 400;

    color: #4A443B;
}


/* =========================================================
   MEMBERSHIP GRID
   ========================================================= */

.lela-community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    width: 100%;
    align-items: stretch;
}


/* =========================================================
   MEMBERSHIP CARD
   ========================================================= */

.lela-community-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 520px;

    padding: 38px 40px 40px;

    box-sizing: border-box;

    background: #EFE6D5;

    border: 1px solid rgba(201, 162, 39, 0.32);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        background-color 0.45s ease;

    overflow: hidden;
}


/* subtle editorial line */

.lela-community-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: #C9A227;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.5s ease;
}


.lela-community-card:hover {
    transform: translateY(-7px);

    border-color: rgba(201, 162, 39, 0.72);

    background: #F1E9DB;
}


.lela-community-card:hover::before {
    transform: scaleX(1);
}


/* ---------- PREMIUM CARD ---------- */

.lela-community-premium {
    background: #E9DFCF;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.lela-community-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;

    padding-bottom: 26px;

    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}


.lela-community-number {
    font-family: "Playfair Display", Georgia, serif;

    font-size: 48px;
    line-height: 0.9;
    font-weight: 500;

    color: rgba(201, 162, 39, 0.22);
}


.lela-community-card-label {
    padding-top: 5px;

    font-family: "DM Sans", Arial, sans-serif;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    color: #8A7966;

    text-align: right;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.lela-community-card-content {
    flex: 1;

    padding-top: 42px;
}


/* ---------- ICON ---------- */

.lela-community-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 25px;

    border: 1px solid rgba(201, 162, 39, 0.55);

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.lela-community-icon svg {
    width: 21px;
    height: 21px;

    stroke: #C9A227;
    stroke-width: 1.25;

    transition: transform 0.35s ease;
}


.lela-community-card:hover .lela-community-icon {
    background: rgba(201, 162, 39, 0.08);
    border-color: #C9A227;

    transform: translateY(-2px);
}


.lela-community-card:hover .lela-community-icon svg {
    transform: scale(1.08);
}


/* ---------- TIER ---------- */

.lela-community-tier {
    display: block;

    margin-bottom: 12px;

    font-family: "DM Sans", Arial, sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #C9A227;
}


/* ---------- CARD TITLE ---------- */

.lela-community-card-title {
    margin: 0 0 20px;

    max-width: 450px;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(30px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -0.6px;

    color: #0B0A08;
}


/* ---------- CARD DESCRIPTION ---------- */

.lela-community-card-description {
    max-width: 460px;

    margin: 0;

    font-family: "DM Sans", Arial, sans-serif;

    font-size: 15px;
    line-height: 1.85;

    color: #5D554B;
}


/* =========================================================
   CARD BOTTOM
   ========================================================= */

.lela-community-card-bottom {
    width: 100%;

    padding-top: 30px;
    margin-top: 35px;

    border-top: 1px solid rgba(201, 162, 39, 0.25);
}


/* ---------- PRICE ---------- */

.lela-community-price {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin-bottom: 25px;
}


.lela-community-price-free {
    font-family: "Playfair Display", Georgia, serif;

    font-size: 25px;
    font-weight: 600;

    color: #0B0A08;
}


.lela-community-price-amount {
    font-family: "Playfair Display", Georgia, serif;

    font-size: 38px;
    line-height: 1;

    font-weight: 600;

    color: #0B0A08;
}


.lela-community-price-period {
    font-family: "DM Sans", Arial, sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.8px;

    color: #8A7966;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.lela-community-button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 56px;

    padding: 0 20px;

    box-sizing: border-box;

    text-decoration: none !important;

    font-family: "DM Sans", Arial, sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


/* ---------- OUTLINE BUTTON ---------- */

.lela-community-button-outline {
    color: #0B0A08;

    background: transparent;

    border: 1px solid rgba(11, 10, 8, 0.42);
}


.lela-community-button-outline:hover {
    color: #0B0A08;

    background: #D8C39A;

    border-color: #C9A227;

    transform: translateY(-2px);
}


/* ---------- GOLD BUTTON ---------- */

.lela-community-button-gold {
    color: #0B0A08;

    background: #C9A227;

    border: 1px solid #C9A227;
}


.lela-community-button-gold:hover {
    color: #0B0A08;

    background: #D8C39A;

    border-color: #D8C39A;

    transform: translateY(-2px);
}


/* ---------- ARROW ---------- */

.lela-community-arrow {
    font-size: 17px;
    font-weight: 400;
    line-height: 1;

    transition:
        transform 0.35s ease;
}


.lela-community-button:hover .lela-community-arrow {
    transform: translateX(5px);
}


/* =========================================================
   FOOTER STATEMENT
   ========================================================= */

.lela-community-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 85px;

    text-align: center;
}


.lela-community-footer-line {
    display: block;

    width: 70px;
    height: 1px;

    margin-bottom: 27px;

    background: #C9A227;
}


.lela-community-footer p {
    margin: 0;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.4;

    font-style: italic;

    color: #211F1B;
}


.lela-community-footer em {
    color: #C9A227;
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.lela-community-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.lela-community-reveal.lela-community-visible {
    opacity: 1;

    transform: translateY(0);
}


/* stagger */

.lela-community-grid
.lela-community-card:nth-child(1) {
    transition-delay: 0.05s;
}


.lela-community-grid
.lela-community-card:nth-child(2) {
    transition-delay: 0.15s;
}


/* =========================================================
   ELEMENTOR EDITOR FIX
   ========================================================= */

body.elementor-editor-active
.lela-community-reveal {
    opacity: 1 !important;
    transform: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .lela-community-section {
        padding: 100px 0;
    }


    .lela-community-container {
        width: min(92%, 760px);
    }


    .lela-community-header {
        margin-bottom: 55px;
    }


    .lela-community-heading {
        font-size: clamp(42px, 7vw, 58px);
    }


    .lela-community-card {
        min-height: 500px;
        padding: 32px 30px 34px;
    }


    .lela-community-card-title {
        font-size: 34px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .lela-community-section {
        padding: 80px 0 85px;
    }


    .lela-community-container {
        width: 90%;
    }


    .lela-community-header {
        margin-bottom: 45px;
    }


    .lela-community-eyebrow {
        gap: 10px;

        font-size: 9px;
        letter-spacing: 2.4px;
    }


    .lela-community-line {
        width: 25px;
    }


    .lela-community-heading {
        font-size: 43px;

        letter-spacing: -1px;
    }


    .lela-community-intro {
        margin-top: 23px;

        font-size: 14px;
        line-height: 1.8;
    }


    .lela-community-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .lela-community-card {
        min-height: auto;

        padding: 30px 25px 28px;
    }


    .lela-community-card-top {
        padding-bottom: 22px;
    }


    .lela-community-number {
        font-size: 40px;
    }


    .lela-community-card-label {
        font-size: 8px;
        letter-spacing: 1.7px;
    }


    .lela-community-card-content {
        padding-top: 34px;
    }


    .lela-community-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 21px;
    }


    .lela-community-card-title {
        font-size: 31px;

        margin-bottom: 16px;
    }


    .lela-community-card-description {
        font-size: 14px;
        line-height: 1.8;
    }


    .lela-community-card-bottom {
        padding-top: 25px;
        margin-top: 30px;
    }


    .lela-community-price {
        margin-bottom: 20px;
    }


    .lela-community-button {
        min-height: 54px;

        padding: 0 17px;

        font-size: 9px;
        letter-spacing: 1.6px;
    }


    .lela-community-footer {
        margin-top: 60px;
    }


    .lela-community-footer p {
        font-size: 21px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .lela-community-heading {
        font-size: 38px;
    }


    .lela-community-card-title {
        font-size: 28px;
    }


    .lela-community-card {
        padding-left: 21px;
        padding-right: 21px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9acc53d *//* ==========================================
   ROOT
========================================== */
/* ==========================================
   FOOTER LOGO IMAGE
========================================== */

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}


.footer-logo-image {
  display: block;
  width: 190px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}


/* Mobile */

@media (max-width: 650px) {

  .footer-logo-image {
    width: 165px;
  }

}
:root {

  --footer-black: #0B0A08;

  --footer-ivory: #F7F2E8;

  --footer-gold: #C9A227;

  --footer-text: #D8CFC0;

  --footer-muted: rgba(
    216,
    207,
    192,
    0.58
  );

}


/* ==========================================
   FOOTER
========================================== */

.lela-footer {

  position: relative;

  overflow: hidden;

  background:
    var(--footer-black);

  color:
    var(--footer-ivory);

  padding:
    90px 0 28px;

}


.lela-footer *,
.lela-footer *::before,
.lela-footer *::after {

  box-sizing:
    border-box;

}


/* ==========================================
   CONTAINER
========================================== */

.footer-container {

  width:
    min(
      1180px,
      90%
    );

  margin:
    0 auto;

  position:
    relative;

  z-index:
    3;

}


/* ==========================================
   MAIN GRID
========================================== */

.footer-main {

  display:
    grid;

  grid-template-columns:
    1.45fr
    0.8fr
    0.8fr
    1.15fr;

  gap:
    55px;

}


/* ==========================================
   BRAND
========================================== */

.footer-brand {

  padding-right:
    25px;

}


.footer-logo {

  display:
    inline-block;

  color:
    var(--footer-ivory);

  text-decoration:
    none !important;

}


.footer-logo-text {

  display:
    flex;

  flex-direction:
    column;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    31px;

  line-height:
    0.95;

  font-weight:
    500;

  letter-spacing:
    -0.5px;

}


.footer-logo-text strong {

  color:
    var(--footer-gold);

  font-size:
    25px;

  font-style:
    italic;

  font-weight:
    500;

  margin-top:
    5px;

}


.footer-statement {

  max-width:
    350px;

  margin:
    25px 0 22px;

  color:
    var(--footer-text);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    13px;

  line-height:
    1.85;

}


/* ==========================================
   ROLES
========================================== */

.footer-roles {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    9px;

  color:
    var(--footer-muted);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    1.5px;

}


.footer-roles i {

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    var(--footer-gold);

}


/* ==========================================
   BRAND LINE
========================================== */

.footer-brand-line {

  width:
    70px;

  height:
    1px;

  margin-top:
    28px;

  background:
    var(--footer-gold);

}


/* ==========================================
   FOOTER TITLES
========================================== */

.footer-title {

  margin:
    3px 0 25px;

  color:
    var(--footer-gold);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    2.5px;

  text-transform:
    uppercase;

}


/* ==========================================
   LINKS
========================================== */

.footer-links {

  list-style:
    none;

  padding:
    0;

  margin:
    0;

}


.footer-links li {

  margin-bottom:
    13px;

}


.footer-links a {

  position:
    relative;

  display:
    inline-block;

  color:
    var(--footer-ivory);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    12px;

  line-height:
    1.4;

  text-decoration:
    none !important;

  transition:
    color 0.3s ease,
    padding-left 0.3s ease;

}


.footer-links a::before {

  content:
    "";

  position:
    absolute;

  left:
    -13px;

  top:
    50%;

  width:
    0;

  height:
    1px;

  background:
    var(--footer-gold);

  transition:
    width 0.3s ease;

}


.footer-links a:hover {

  color:
    var(--footer-gold);

  padding-left:
    5px;

}


.footer-links a:hover::before {

  width:
    8px;

}


/* ==========================================
   SOCIAL ICONS
========================================== */

.footer-socials {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    28px;

}


.footer-social {

  width:
    35px;

  height:
    35px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--footer-gold);

  border:
    1px solid
    rgba(
      201,
      162,
      39,
      0.42
    );

  text-decoration:
    none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;

}


.footer-social:hover {

  color:
    var(--footer-black);

  background:
    var(--footer-gold);

  border-color:
    var(--footer-gold);

  transform:
    translateY(-3px);

}


.footer-social svg {

  width:
    16px;

  height:
    16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.4;

}


.footer-social .social-dot {

  fill:
    currentColor;

  stroke:
    none;

}


.footer-social .youtube-play {

  fill:
    currentColor;

  stroke:
    none;

}


.footer-social-letter {

  font-family:
    Arial,
    sans-serif;

  font-size:
    14px;

  font-weight:
    600;

}


.footer-social.linkedin {

  font-size:
    11px;

}


/* ==========================================
   CONNECT
========================================== */

.footer-connect-text {

  max-width:
    300px;

  margin:
    0 0 20px;

  color:
    var(--footer-text);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    12px;

  line-height:
    1.75;

}


/* ==========================================
   FORM
========================================== */

.footer-form {

  width:
    100%;

}


.footer-input-wrap {

  display:
    flex;

  width:
    100%;

  height:
    48px;

  border:
    1px solid
    rgba(
      201,
      162,
      39,
      0.4
    );

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  transition:
    border-color 0.3s ease;

}


.footer-input-wrap:focus-within {

  border-color:
    var(--footer-gold);

}


.footer-input-wrap input {

  flex:
    1;

  min-width:
    0;

  padding:
    0 14px;

  border:
    none;

  outline:
    none;

  background:
    transparent;

  color:
    var(--footer-ivory);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    11px;

}


.footer-input-wrap input::placeholder {

  color:
    rgba(
      216,
      207,
      192,
      0.5
    );

}


.footer-input-wrap button {

  width:
    48px;

  flex-shrink:
    0;

  border:
    none;

  border-left:
    1px solid
    rgba(
      201,
      162,
      39,
      0.35
    );

  background:
    var(--footer-gold);

  color:
    var(--footer-black);

  font-size:
    18px;

  cursor:
    pointer;

  transition:
    background 0.3s ease;

}


.footer-input-wrap button:hover {

  background:
    #E0C15A;

}


/* ==========================================
   FORM MESSAGE
========================================== */

.footer-form-message {

  min-height:
    18px;

  margin-top:
    8px;

  color:
    var(--footer-gold);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    9px;

}


/* ==========================================
   SMALL NOTE
========================================== */

.footer-small-note {

  margin:
    3px 0 0;

  color:
    rgba(
      216,
      207,
      192,
      0.38
    );

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    8px;

  line-height:
    1.5;

}


/* ==========================================
   DIVIDER
========================================== */

.footer-divider {

  width:
    100%;

  height:
    1px;

  margin:
    65px 0 25px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        201,
        162,
        39,
        0.45
      ),
      transparent
    );

}


/* ==========================================
   BOTTOM BAR
========================================== */

.footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

}


.footer-copyright {

  color:
    rgba(
      216,
      207,
      192,
      0.5
    );

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    9px;

  letter-spacing:
    0.3px;

}


.footer-legal {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

}


.footer-legal a {

  color:
    rgba(
      247,
      242,
      232,
      0.65
    );

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    9px;

  text-decoration:
    none !important;

  transition:
    color 0.3s ease;

}


.footer-legal a:hover {

  color:
    var(--footer-gold);

}


.footer-legal span {

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    rgba(
      201,
      162,
      39,
      0.5
    );

}


/* ==========================================
   DECORATIVE GLOW
========================================== */

.footer-glow {

  position:
    absolute;

  width:
    400px;

  height:
    400px;

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(
        201,
        162,
        39,
        0.045
      ),
      transparent 70%
    );

}


.footer-glow-left {

  left:
    -250px;

  bottom:
    -220px;

}


.footer-glow-right {

  right:
    -250px;

  top:
    -250px;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

  .footer-main {

    grid-template-columns:
      1.2fr 1fr 1fr;

    gap:
      40px;

  }


  .footer-brand {

    grid-column:
      1 / -1;

    padding-right:
      0;

    max-width:
      600px;

  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 650px) {

  .lela-footer {

    padding:
      70px 0 25px;

  }


  .footer-container {

    width:
      88%;

  }


  .footer-main {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .footer-brand {

    grid-column:
      auto;

  }


  .footer-title {

    margin-bottom:
      20px;

  }


  .footer-divider {

    margin:
      50px 0 25px;

  }


  .footer-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      15px;

  }


  .footer-legal {

    flex-wrap:
      wrap;

    gap:
      10px;

  }


  .footer-statement {

    font-size:
      12px;

  }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

  .footer-social,
  .footer-links a,
  .footer-input-wrap,
  .footer-input-wrap button {

    transition:
      none !important;

  }

}/* End custom CSS */