/*****************/
/** Theme Section */
/*****************/

:root {
  /* Sections  */
  --section-title-size: clamp(2.875rem, calc(2.27rem + 2.2vw), 4.25rem); /* min: 46px, max: 68px */
  --section-subtitle-size: clamp(1.125rem, calc(1.019rem + 0.396vw), 1.375rem); /* min: 18px, max: 22px */
}

/* Section Main */
.section {
  /* Check if multiple padding is needed or just per page or 2 to 3 custom padding. */
  --se-base-pd: clamp(6.75rem, calc(5.499rem + 4.653vw), 9.688rem); /* min: 108px, max: 155px */
  --se-short-pd: var(--space-m);
  --se-medium-pd: var(--space-xl);
  --se-large-pd: var(--space-5xl);
  --se-x-large-pd: var(--space-8xl);

  --sec--pd: var(--se-base-pd) 0;
  --sec--bg: var(--bg-light);
  /* --sec--mg: 0; */
  /* --sec--pos: relative; */
  /* --sec--zi: 1; */
  /* --sec--mxw: 100%; */
  /* --sec--w: 100%; */
  /* --sec--h: 100%; */

  /* .section-head */
  --se-head-mb: var(--space-section-head-mb);
  --se-hd--txt-ali: left;
  --se-hd--d: flex;
  --se-hd--flx-wrp: nowrap;
  --se-hd--ali-itm: start;
  --se-hd--jus-cnt: start;
  --se-hd--flx-dir: column;
  --se-hd--pd: 0;
  --se-hd--mg: 0 0 var(--se-head-mb);
  --se-hd--mxw: 100%;
  /* --se-hd--mnw: 100%; */

  /* .sec-hd-col */
  --se-hd-col--d: flex;
  --se-hd-col--txt-ali: left;
  --se-hd-col--flx-wrp: nowrap;
  --se-hd-col--ali-itm: start;
  --se-hd-col--jus-cnt: start;
  --se-hd-col--flx-dir: column;
  --se-hd-col--pd: 0;
  --se-hd-col--mg: 0;
  --se-hd-col--mxw: 100%;
  /* --se-hd-col--mnw: 100%; */

  --se-head-inside-col-mb: var(--space-section-head-inside-col-mb);
  --se-head-mb-sm: var(--space-xs); /* To be deleted */
  --se-head-wrap-mxw: 950px;
  --se-head-wrap-text-mxw: 950px;
  --se-head-wrap-mxw__on-l: 650px;
  --se-head-wrap-text-mxw__on-l: 850px;
  --se-head-wrap-mxw__on-m: 650px;
  --se-head-wrap-text-mxw__on-m: 850px;

  /* .sec-hd__icon */
  --se-hd-icon--clr: var(--accent);
  --se-hd-icon--size: var(--icon-m);
  --se-hd-icon--h: auto;
  --se-hd-icon--w: 58px;
  --se-hd-icon--mg: 0;
  --se-hd-icon--pd: 0;

  /* H4 .section-head__label */
  --se-head-label--color: var(--primary);
  --se-head-label--font-size: clamp(1rem, calc(0.857rem + 0.298vw), 1.125rem); /* min: 16px, max: 18px */
  --se-head-label--font-weight: 600;
  --se-head-label--tex-trans: uppercase;
  --se-head-label--let-spcing: 0.07em;
  --se-head-label--line-height: 1.25;
  --se-head-label--mxw: 100%;
  --se-head-label--mb: clamp(0.875rem, calc(0.715rem + 0.594vw), 1.25rem); /* min: 14px, max: 20px */

  /* H2 - .section-head__title */
  --se-head-title--color: var(--text-title);
  --se-head-title--font-size: var(--section-title-size); /* uncomment if custom */
  --se-head-title--font-weight: 700;
  --se-head-title--tex-trans: capitalize;
  --se-head-title--line-height: 0.92;
  --se-head-title--let-spcing: 0;
  --se-head-title--mb: 33px; 

  /* H3 - .section-head__subtitle */
  --se-head-subtitle--color: var(--text-title);
  --se-head-subtitle--font-size: var(--section-subtitle-size);
  --se-hd-subttl--ff: var(--font-heading);
  --se-head-subtitle--font-weight: 400;
  --se-head-subtitle--tex-trans: capitalize;
  --se-head-subtitle--line-height: var(--default-title-line-height);
  --se-head-subtitle--let-spcing: 0;
  --se-head-subtitle--mb: var(--space-xs);

  /* Text - .section-head--text-wrap */
  --se-head-text-wrap--mb: var(--space-m);
  --se-hd-txt-wra--txt-ali: left;
  --se-head-text--color: var(--text-body);
  --se-head-text--font-size: var(--font-p);
  /* // --se-head-text--font-size: var(--font-section-text); // Uncomment for custom */
  --se-head-text--font-weight: 400;
  --se-head-text--tex-trans: none;
  --se-head-text--let-spcing: 0;
  --se-head-text--mb: var(--space-xs);

  /* Btn Wrap */
  --se-head-btn-wrap--mt: var(--space-m);

  /* Section Content */
  --se-content-h3--color: var(--text-title);
  --se-content-h3--font-size: var(--font-h3);
  --se-content-h3--font-weight: 400;
  --se-content-h3--text-case: none;
  --se-content-h3--let-spcing: 0;
  --se-content-h3--mb: var(--space-xs);

  --se-content-p--mb: 34px;

  /* .sec-hd--btn-wrap */
  --sec-hd-btn-wrap--d: flex;
  --sec-hd-btn-wrap--w: 100%;
  --sec-hd-btn-wrap--mnw: 100%;
  --sec-hd-btn-wrap--mxw: auto;
  --sec-hd-btn-wrap--mg: var(--space-xs) 0 0;
  --sec-hd-btn-wrap--pd: 0;
  --sec-hd-btn-wrap--flx-wrp: wrap;
  --sec-hd-btn-wrap--flx-dir: column;
  --sec-hd-btn-wrap--ali-itm: start;
  --sec-hd-btn-wrap--jus-cnt: start;
  --sec-hd-btn-wrap--gap-col: var(--space-2xs);
  --sec-hd-btn-wrap--gap-row: var(--space-2xs);
  --sec-hd-btn-wrap--h: 100%;

  /* Section Body - Footer */ /* To be deleted */
  --se-footer-btn-mt: clamp(2.625rem, calc(2.465rem + 0.594vw), 3rem); /* min: 42px, max: 48px */
  --se-footer-btn-sbs-col-gap: var(--space-se-f-btn-sbs-col-gap);
  --se-footer-btn-sbs-row-gap: var(--space-se-f-btn-sbs-row-gap);

  &.se--head-wrap {
    --se-hd--mxw: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Section Main - Row */
.section {
  /* .section-row */
  --se-row--d: flex;
  --se-row--h: 100%;
  --se-row--w: 100%;
  --se-row--mxw: 100%;
  --se-row--mg: 0;
  --se-row--pd: 0;
  --se-row--flx-wrp: wrap;
  --se-row--flx-dir: column;
  --se-row--gap-col: 0;
  --se-row--gap-row: 0;
  --se-row--ali-itm: start;
  --se-row--jus-cnt: start;
  --se-row--ovf: visible;
}
/* Section Main - Row / Columns */
.section {
  /* .section-col */
  --se-col--d: flex;
  --se-col--h: 100%;
  --se-col--w: 100%;
  --se-col--mxw: 100%;
  --se-col--mg: 0;
  --se-col--pd: var(--se-base-pd) 0;
  --se-col--flx-wrp: wrap;
  --se-col--flx-dir: column;
  --se-col--ali-itm: start;
  --se-col--jus-cnt: start;
  /* --se-col--ali-self: start; */
  /* --se-col--grid-col: span 2; */
  --se-col--ovf: visible;

  /* .section-col--inner */
  --se-col-inner--d: flex;
  --se-col-inner--w: 100%;
  --se-col-inner--mxw: 100%;
  /* --se-col-inner--mnw: 100%; */
  --se-col-inner--mg: 0;
  --se-col-inner--pd: 0;
  --se-col-inner--flx-wrp: wrap;
  --se-col-inner--flx-dir: column;
  --se-col-inner--ali-itm: start;
  --se-col-inner--jus-cnt: start;
  --se-col-inner--grd-tpl-col: 1fr;
  --se-col-inner--gap-col: 0;
  --se-col-inner--gap-row: 0;
}
/* Section Main - Content */
.section {
  /* .section-content */
  --se-cnt--d: flex;
  --se-cnt--pd: 0;
  --se-cnt--mg: 0;
  --se-cnt--ali-ite: start;
  --se-cnt--jus-con: start;
  --se-cnt--gap-row: 0;
  --se-cnt--gap-col: 0;
  --se-cnt--w: 100%;
  --se-cnt--mxw: 100%;
  /* --se-cnt--mnw: 100%; */

  --se-content-base--display: flex;
  --se-content-base--padding: 0;
  --se-content-base--margin: 0 0 var(--space-xs);
  /* --se-content-base--align-items: ; */
  /* --se-content-base--justify-content: ; */
  --se-cnt-base--txt-ali: left;
  --se-cnt-base--gap-row: 0;
  --se-cnt-base--gap-col: 0;
  --se-content-base--width: 100%;
  --se-content-base--mxw: 100%;
  --se-cnt-base--flx-dir: column;
  /* --se-content-base--mnw: ; */

  --se-content-base-h3--color: var(--text-title);
  --se-content-base-h3--font-family: var(--font-heading);
  --se-content-base-h3--font-size: var(--font-h3);
  --se-content-base-h3--font-weight: 400;
  --se-content-base-h3--text-case: normal;
  --se-content-base-h3--line-height: var(--default-title-line-height);
  --se-content-base-h3--let-spcing: 0;
  --se-content-base-h3--margin: 0 0 var(--space-xs);

  --se-content-base-h4--color: var(--text-title);
  --se-content-base-h4--font-family: var(--font-heading);
  --se-content-base-h4--font-size: var(--font-h4);
  --se-content-base-h4--font-weight: 400;
  --se-content-base-h4--text-case: normal;
  --se-content-base-h4--line-height: var(--default-title-line-height);
  --se-content-base-h4--let-spcing: 0;
  --se-content-base-h4--margin: 0 0 var(--space-xs);

  --se-content-base-h5--color: var(--text-title);
  --se-content-base-h5--font-family: var(--font-heading);
  --se-content-base-h5--font-size: var(--font-h5);
  --se-content-base-h5--font-weight: 400;
  --se-content-base-h5--text-case: normal;
  --se-content-base-h5--line-height: var(--default-title-line-height);
  --se-content-base-h5--let-spcing: 0;
  --se-content-base-h5--margin: 0 0 var(--space-xs);

  --se-content-base-p--color: var(--text-title);
  --se-content-base-p--font-family: var(--font-p);
  --se-content-base-p--font-size: var(--font-p);
  --se-content-base-p--font-weight: 400;
  --se-content-base-p--text-case: normal;
  --se-content-base-p--line-height: var(--default-text-line-height);
  --se-content-base-p--let-spcing: 0;
  --se-content-base-p--margin: 0 0 var(--space-xs);
}
.section-content--base-wrap {
  --se-content-base-wrap--display: flex;
  --se-content-base-wrap--flex-direction: row;
  --se-content-base-wrap--grid-cols: 1fr;
  --se-content-base-wrap--justify-content: start;
  --se-content-base-wrap--align-items: start;
  --se-content-base-wrap--gap-col: var(--space-2xs);
  --se-content-base-wrap--gap-row: 0;
  --se-content-base-wrap--mxw: 100%;
  --se-content-base-wrap--mnw: ;
  --se-content-base-wrap--width: 100%;
}
/* Section Main - Body */
.section {
  /* .section--main */
  --se-main--d: flex;
  --se-main--w: 100%;
  /* --se-main--mnw: 100%; */
  --se-main--mxw: 100%;
  --se-main--mg: 0;
  --se-main--pd: 0;
  --se-main--flx-wrp: wrap;
  --se-main--flx-dir: column;
  --se-main--ali-itm: start;
  --se-main--jus-cnt: start;
  --se-main--grd-tpl-col: 1fr;
  --se-main--gap-col: 0;
  --se-main--gap-row: 0;
  --se-main--bg: transparent;
  --se-main--bd-clr: var(--border-light-gray);
  --se-main--bd-w: 0;
  --se-main--bd-rad: 0;
  --se-main--bx-sh: 0;

  --se-body--d: flex;
  --se-body--w: 100%;
  /* --se-body--mnw: 100%; */
  --se-body--mxw: 100%;
  --se-body--mg: 0;
  --se-body--pd: 0;
  --se-body--flx-wrp: wrap;
  --se-body--flx-dir: column;
  --se-body--ali-itm: start;
  --se-body--jus-cnt: start;
  --se-body--grd-tpl-col: 1fr;
  --se-body--gap-col: 0;
  --se-body--gap-row: 0;
  --se-body--bg: transparent;
  --se-body--bd-clr: var(--border-light-gray);
  --se-body--bd-w: 0;
  --se-body--bd-rad: 0;
  --se-body--bx-sh: 0;
}
/* Section Main - Base */
.section {
  /* .section-body--wrap */
  --sec-body-wrap--d: flex;
  --sec-body-wrap--w: 100%;
  /* --sec-body-wrap--mnw: 100%; */
  --sec-body-wrap--mxw: 100%;
  --sec-body-wrap--mg: 0;
  --sec-body-wrap--pd: 0;
  --sec-body-wrap--flx-wrp: wrap;
  --sec-body-wrap--flx-dir: column;
  --sec-body-wrap--ali-itm: start;
  --sec-body-wrap--jus-cnt: start;
  --sec-body-wrap--grd-tpl-col: 1fr;
  --sec-body-wrap--gap-col: 0;
  --sec-body-wrap--gap-row: 0;
  --sec-body-wrap--bg: transparent;
  --sec-body-wrap--border-color: var(--border-light-gray);
  --sec-body-wrap--border-width: 0;
  --sec-body-wrap--border-radius: 0;
  --sec-body-wrap--box-shadow: 0;
  /* --sec-body-wrap--h: 100%; */

  /* .section-footer */
  --sec-ftr-wrap--d: flex;
  --sec-ftr-wrap--w: 100%;
  --sec-ftr-wrap--mnw: 100%;
  /* --sec-ftr-wrap--mxw: auto; */
  --sec-ftr-wrap--mg: var(--space-l) 0 0;
  --sec-ftr-wrap--pd: 0;
  --sec-ftr-wrap--flx-wrp: wrap;
  --sec-ftr-wrap--flx-dir: column;
  --sec-ftr-wrap--ali-itm: start;
  --sec-ftr-wrap--jus-cnt: start;
  --sec-ftr-wrap--grd-tpl-col: 1fr;
  --sec-ftr-wrap--gap-col: var(--space-2xs);
  --sec-ftr-wrap--gap-row: var(--space-2xs);
  --sec-ftr-wrap--bg: transparent;
  --sec-ftr-wrap--bd-clr: var(--border-light-gray);
  --sec-ftr-wrap--bd-w: 0;
  --sec-ftr-wrap--bd-rad: 0;
  --sec-ftr-wrap--bx-sh: 0;
  /* --sec-ftr-wrap--h: 100%; */
}
.section-footer.sec-ftr--btn-sbs {
  --sec-ftr-wrap--flx-dir: row;
  --sec-ftr-wrap--gap-col: var(--space-2xs);
  --sec-ftr-wrap--gap-row: var(--space-2xs);
}
/* Section Template */
/* Section - Boxed */
.sec-body--boxed-v1 {
  --se-body--pd: var(--space-m);
  --se-body--bg: #fff;
  --se-body--mg: 0;
  --se-body--bx-sh: var(--def-card--bx-sh);
  --se-body--h: 100%;
}
/* Section Grid */
/* Section Grid - Single */
.section-col-single {
  /* --sec-col-single--col-no: 1fr; */
  --sec-col-single--col-gap: 0;
  --sec-col-single--row-gap: 0;
}
/* Section Grid - Column 2 */
.section-col-2 {
  --sec-col-2--col-no: repeat(2, 1fr);
  --sec-col-2--col-no__on-l: 1fr;
  --sec-col-2--col-no__on-m: var(--sec-col-2--col-no__on-l);
  --sec-col-2--col-gap: 0;
  --sec-col-2--row-gap: 0;
}
.section-col-2.sec-col--w-gap {
  --sec-col-2--col-gap: var(--space-xs);
  --sec-col-2--row-gap: 0;
}
.section-col-2.sec-col--w-gap-col {
  --sec-col-2--col-gap: 0;
}
.section-col-2.sec-col--w-gap-row {
  --sec-col-2--row-gap: 0;
}
/* Section Grid - Column 3 */
.section-col-3 {
  /* --sec-col-3--col-no: repeat(3, 1fr); */
  --sec-col-3--col-no__on-xl: repeat(3, 1fr);
  --sec-col-3--col-no__on-l: 1fr;
  --sec-col-3--col-no__on-m: var(--sec-col-3--col-no__on-l);
  --sec-col-3--col-gap: var(--space-se-col-2-col-gap);
  --sec-col-3--row-gap: var(--space-se-col-2-row-gap);
}
/* Section Grid - Column 4 */
.section-col-4 {
  /* --sec-col-4--col-no__on-xl: repeat(4, 1fr); */
  --sec-col-4--col-no__on-l: 1fr;
  --sec-col-4--col-no__on-m: var(--sec-col-4--col-no__on-l);
  --sec-col-4--col-gap: var(--space-se-col-2-col-gap);
  --sec-col-4--row-gap: var(--space-se-col-2-row-gap);
}
/* Section Grid - Column 5 */
.section-col-5 {
  /* --sec-col-5--col-no__on-xl: repeat(5, 1fr); */
  --sec-col-5--col-no__on-l: 1fr;
  --sec-col-5--col-no__on-m: var(--sec-col-5--col-no__on-l);
  --sec-col-5--col-gap: var(--space-se-col-2-col-gap);
  --sec-col-5--row-gap: var(--space-se-col-2-row-gap);
}
/* Section Grid - Column 6 */
.section-col-6 {
  /* --sec-col-6--col-no__on-xl: repeat(6, 1fr); */
  --sec-col-6--col-no__on-l: 1fr;
  --sec-col-6--col-no__on-m: var(--sec-col-6--col-no__on-l);
  --sec-col-6--col-gap: var(--space-se-col-2-col-gap);
  --sec-col-6--row-gap: var(--space-se-col-2-row-gap);
}
