/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

:root {
    --primary-color: #a6be0f;
    --primary-color-light: #c9ea1f;
    --primary-color-dark: #6f9a0a;

    --primary-font: "Sora", "Segoe UI", Arial, sans-serif;
    --secondary-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --body-color: #141714;
    --body-dark-color: #0e110e;
    --featured-card-color: #1c201b;
    --footer-color: #0e110e;
    --header-color: rgba(14, 17, 14, 0.94);

    --black-color: #0d130c;

    --text-color: #e6eae3;
    --title-color: #ffffff;
    --text-grey-color: #b6bdb2;
    --text-black-color: #0d130c;

    --separator-color: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.12);

    --primary-gradient: linear-gradient(100deg, var(--primary-color-light) 0%, var(--primary-color) 45%, var(--primary-color-dark) 100%);
    --primary-shadow-gradient: 0 10px 34px rgba(166, 190, 15, 0.35);
}

* {
    outline: none !important;
}


body #fl-main-content {
    background-color: var(--body-color);
}

@media (max-width: 640px) {
    #fl-main-content .fl-row-content-wrap {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/******************** HERO *********************************/
/**********************************************************/

#hero .fl-row-content-wrap::after {
    background: linear-gradient(180deg, rgba(14, 17, 14, 0.45) 0%, rgba(14, 17, 14, 0.25) 45%, var(--body-color) 100%), linear-gradient(90deg, rgba(14, 17, 14, 0.88) 0%, rgba(14, 17, 14, 0.15) 65%);
}

#hero .fl-heading {
    max-width: 840px;
}

#hero p {
    font-size: 18px;
    line-height: calc(18px * 1.8);
    max-width: 640px;
}

/*-------- DUAL HEADING --------*/

#fl-main-content .uabb-dual-color-heading {
  max-width: 840px;
}

#fl-main-content .uabb-dual-color-heading
.uabb-second-heading-text {
  color: var(--primary-color-light);
}

/******************** ALERTS *************************/
/****************************************************/

.custom-alert__info {
    background-color: rgba(166, 190, 15, 0.14);
    border-left: 2px solid #8bb80f;
    color: #aed6ff;
    padding: 16px;
    border-radius: 8px;
}

.custom-alert__info .fl-list-item-icon {
    color: var(--primary-color);
}

/******************* SECTION TITLE *********************/
/*******************************************************/

#fl-main-content .section-title {
    margin-bottom: 24px;
}

#fl-main-content .section-title h2.fl-heading {
    max-width: 720px;
}

#fl-main-content .section-title p {
    font-size: 18px;
    max-width: 640px;
    color: var(--text-grey-color);
    margin: 0px;
}

/***************** TEXTS AND TITLES ************************/
/**********************************************************/

#fl-main-content .fl-heading {
    font-family: var(--primary-font);
    color: var(--title-color);;
    font-weight: 700;
}

h1,
body h1,
body h1.fl-heading {
    font-size: 64px;
    line-height: calc(64px * 1.1);
    font-weight: 700;
}

@media (max-width: 640px) {
    h1,
    body h1,
    body h1.fl-heading {
        font-size: 28px;
        line-height: calc(32px * 1.1);
    }
}

h2,
body h2,
h2.fl-heading {
    font-size: 48px;
    line-height: calc(48px * 1.2);
}

@media (max-width: 640px) {
    h2,
    body h2,
    h2.fl-heading {
        font-size: 24px;
        line-height: calc(24px * 1.4);
    }
}

h3,
body h3,
h3 .fl-heading {
    font-size: 20px;
    color: var(--title-color);
}

/*------------- TEXTS -----------*/

body p {
    font-size: 16px;
    line-height: calc(16px * 1.8);
    color: #e6eae3;
    font-family: var(--secondary-font);
}

#fl-main-content span:not([class*="icon"]) {
    font-family: var(--secondary-font);
    color: var(--text-color);
}

body #fl-main-content .title-head p {
    margin: 0px;
    font-size: 14px !important;
    line-height: calc(14px * 1.6);
    letter-spacing: 0.02em;
    color: var(--primary-color);
    font-weight: 500;
}

@media (max-width: 640px) {
    body #fl-main-content .title-head p {
        font-size: 12px !important;
        line-height: calc(12px * 1.6);
    }
} 

/******************* BUTTONS **************************/
/*****************************************************/

/*------------ DUAL BUTTONS -------------*/

@media (max-width: 480px) {
    #fl-main-content .pp-dual-button-inner,
    #fl-main-content .pp-dual-button-inner .pp-dual-button,
    #fl-main-content .pp-dual-button-inner .pp-dual-button a {
        min-width: 100%;
    }
}

#fl-main-content .pp-dual-button-inner .pp-dual-button a {
    justify-content: center;
}

#fl-main-content .pp-dual-button-inner .primary-button {
  background: var(--primary-gradient);
  color: var(--text-black-color);
  padding: 16px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--secondary-font);
  border-radius: 255px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

#fl-main-content .pp-dual-button-inner .primary-button span {
    color: inherit;
}

#fl-main-content .pp-dual-button-inner .transparent-button {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 16px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: var(--secondary-font);
    border-radius: 255px;
    font-weight: 600;
    font-size: 16px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

#fl-main-content .pp-dual-button-inner .transparent-button  span {
    color: inherit;
}

/*--------------------------*/

#fl-main-content .fl-button-wrap a.fl-button,
#main_header .fl-button-wrap a.fl-button,
#main_footer .fl-button-wrap a.fl-button {
    padding: 16px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: var(--secondary-font);
    border-radius: 255px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

#fl-main-content .fl-button-wrap a.fl-button span,
#main_header .fl-button-wrap a.fl-button span,
#main_footer .fl-button-wrap a.fl-button span {
    color: inherit;
}

#fl-main-content .fl-button-wrap a.fl-button i.fl-button-icon,
#main_header .fl-button-wrap a.fl-button i.fl-button-icon,
#main_footer .fl-button-wrap a.fl-button i.fl-button-icon {
    color: inherit;
    font-size: inherit;
}

#fl-main-content .fl-button-wrap a.fl-button:hover,
#main_header .fl-button-wrap a.fl-button:hover,
#main_footer .fl-button-wrap a.fl-button:hover {
    -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
            transform: translateY(-4px);
}

/*---------- PRIMARY BUTTON -----------*/

#fl-main-content .primary-button a.fl-button,
#main_header .primary-button a.fl-button,
#main_footer .primary-button a.fl-button {
    background: var(--primary-gradient);
    color: var(--text-black-color);
}

#fl-main-content .primary-button a.fl-button:hover,
#main_header .primary-button a.fl-button:hover,
#main_footer .primary-button a.fl-button:hover {
    -webkit-box-shadow: var(--primary-shadow-gradient);
            box-shadow: var(--primary-shadow-gradient);
    -webkit-filter: brightness(1.06);
            filter: brightness(1.06);
}

/*------------ TRANSPARENT BUTTON -----------*/

#fl-main-content .transparent-button a.fl-button,
#main_header .transparent-button a.fl-button,
#main_footer .transparent-button a.fl-button {
    background: transparent;
    border: 1px solid var(--border-color);
}
    
#fl-main-content .transparent-button a.fl-button:hover,
#main_header .transparent-button a.fl-button:hover,
#main_footer .transparent-button a.fl-button:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/*------------ DEFAULT BUTTON -----------*/

#fl-main-content .default-button a.fl-button {
  background: none;
  padding: 0px;
  color: var(--primary-color);
}