/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
    --bs-table-bg: transparent;
}

/* @link https://utopia.fyi/type/calculator?c=360,16,1.125,1400,16,1.25,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Step -3: 11.2373px → 8.192px */
  --f-size--3: clamp(0.512rem, 0.7682rem + -0.2928vw, 0.7023rem);
  /* Step -2: 12.642px → 10.24px */
  --f-size--2: clamp(0.64rem, 0.8421rem + -0.231vw, 0.7901rem);
  /* Step -1: 14.2222px → 12.8px */
  --f-size--1: clamp(0.8rem, 0.9197rem + -0.1368vw, 0.8889rem);
  /* Step 0: 16px → 16px */
  --f-size-0: clamp(1rem, 1rem + 0vw, 1rem);
  /* Step 1: 18px → 20px */
  --f-size-1: clamp(1.125rem, 1.0817rem + 0.1923vw, 1.25rem);
  /* Step 2: 20.25px → 25px */
  --f-size-2: clamp(1.2656rem, 1.1629rem + 0.4567vw, 1.5625rem);
  /* Step 3: 22.7813px → 31.25px */
  --f-size-3: clamp(1.4238rem, 1.2406rem + 0.8143vw, 1.9531rem);
  /* Step 4: 25.6289px → 39.0625px */
  --f-size-4: clamp(1.6018rem, 1.3112rem + 1.2917vw, 2.4414rem);
  /* Step 5: 28.8325px → 48.8281px */
  --f-size-5: clamp(1.802rem, 1.3694rem + 1.9227vw, 3.0518rem);
  /* Step 6: 32.4366px → 61.0352px */
  --f-size-6: clamp(2.0273rem, 1.4086rem + 2.7499vw, 3.8147rem);
  /* Step 7: 36.4912px → 76.2939px */
  --f-size-7: clamp(2.2807rem, 1.4196rem + 3.8272vw, 4.7684rem);
  /* Step 8: 41.0526px → 95.3674px */
  --f-size-8: clamp(2.5658rem, 1.3907rem + 5.2226vw, 5.9605rem);
  /* Step 9: 46.1841px → 119.2093px */
  --f-size-9: clamp(1.8865rem, 1.3066rem + 6.0217vw, 7.4506rem);
}
html {
  font-size: 16px;
}

body {
  font-family: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  background: #f6f9ff;
  color: #1A1F2A;
}

html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

img {
  overflow-x: clip;
}

.form-control{
  font-size: 1rem !important;
}
.form-floating input[type="text"]:after,
.form-floating input[type="password"]:after{
  padding:50px 10px 20px 10px;
}
.form-floating label:after{
  font-size: 0.725rem !important;
  line-height: 1.25rem;
  background: transparent !important;
}

a {
  color: #4154f1;
  text-decoration: none;
}

a:hover {
  color: #717ff5;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
}
.welcome-page p{
  font-size: var(--f-size-1);
}
.organization-page p{
  font-size: var(--f-size-0);
}
/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: 60px;
  padding: 20px 30px;
  transition: all 0.3s;
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 10px;
}

.pagetitle h1 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 600;
  color: #012970;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #4154f1;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f6f9ff;
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

/* Light Backgrounds */
.bg-primary-light {
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}

.bg-secondary-light {
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

.bg-success-light {
  background-color: #d1e7dd;
  border-color: #d1e7dd;
}

.bg-danger-light {
  background-color: #f8d7da;
  border-color: #f8d7da;
}

.bg-warning-light {
  background-color: #fff3cd;
  border-color: #fff3cd;
}

.bg-info-light {
  background-color: #cff4fc;
  border-color: #cff4fc;
}

.bg-dark-light {
  background-color: #d3d3d4;
  border-color: #d3d3d4;
}

/* Card */
.card {
  margin-bottom: 30px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
  border-color: #ebeef4;
  background-color: #fff;
  color: #798eb3;
  padding: 15px;
}

.card-title {
  padding: 20px 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: #012970;
  font-family: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
}

.card-title span {
  color: #899bbd;
  font-size: 14px;
  font-weight: 400;
}

.card-body {
  padding: 0 20px 20px 20px;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 25%;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

/* Accordion */
.accordion-item {
  border: 1px solid #ebeef4;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #012970;
  background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: #4154f1;
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  font-family: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  color: #899bbd;
  font-weight: 600;
}

.breadcrumb a {
  color: #899bbd;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
  color: #899bbd;
}

.breadcrumb .active {
  color: #51678f;
  font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
  background-color: #fff;
  color: #4154f1;
  border-bottom: 2px solid #4154f1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
    .logo {
      line-height: 1;
    }

    .logo img {
      max-height: 40px;
      margin-right: 6px;
    }

    .logo span {
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      font-family: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
    }
/* **************** */

.header {
  transition: all 0.5s;
  z-index: 9997;
  height: 60px;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background-color: #1E3464;
  color:#fff;
  padding-left: 20px;
  border-bottom: 2px solid #3C65BD;
  /* Toggle Sidebar Button */
  /* Search Bar */
}

.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: #fff;
}

.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  font-size: 14px;
  color: #012970;
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: #012970;
}

#header-menu a {
    /*color: #899bbd;*/
    color: #FCB750;
}
#header-menu a.active {
    color: #1E3464;
    background-color: #FCB750;
    font-weight: 600;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav>ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: #012970;
  margin-right: 25px;
  position: relative;
}

.header-nav .nav-profile {
  /*color: #012970;*/
  color: #fff;
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: -2px -5px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 20px 0 10px;
  font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .notifications .notification-item:hover {
  background-color: #f6f9ff;
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444444;
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .messages .message-item:hover {
  background-color: #f6f9ff;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: 60px;
  left: -300px;
  bottom: 0;
  width: 300px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}


@media (max-width: 1199px) {
  .toggle-sidebar .sidebar {
    left: 0;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li, .topbar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #899bbd;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link, .topbar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #1E3464;
  transition: 0.3;
  padding: 10px 15px;
  border-radius: 4px;
}
.sidebar-nav .nav-link i{
  font-size: 16px;
  margin-right: 10px;
  color: #1E3464;
}

.topbar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: #FCB750;
}

.sidebar-nav .nav-link.collapsed, .topbar-nav .nav-link.collapsed {
  color: #012970;
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i, .topbar-nav .nav-link.collapsed i {
  color: #899bbd;
}

.sidebar-nav .nav-link:hover {
  color: #1E3464;
  background: #f6f9ff;
}
/*.sidebar-nav .nav-link:hover i{*/
/*  color: #fff;*/
/*}*/
.topbar-nav .nav-link:hover i {
  color: #FCB750;
}
.topbar-nav .nav-link.active i,
.topbar-nav .nav-link.active:hover i,
.topbar-nav i.bi-person-plus{
  color: #1E3464;
}
.sidebar-nav .nav-link .bi-chevron-down, .topbar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down, .topbar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content, .topbar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.topbar-nav .nav-content {
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px rgba(1, 41, 112, 0.1);
}
.topbar-nav#header-menu.nav{
  gap: 10px;
}

.sidebar-nav .nav-content a, .topbar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #012970;
  padding: 10px 0 10px 40px;
  transition: 0.3s;
}

.topbar-nav .nav-content a {
    padding: 10px 40px;
}

.sidebar-nav .nav-content a i, .topbar-nav .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.topbar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active,
.topbar-nav .nav-content a.active {
  color: #4154f1;
}

.sidebar-nav .nav-content a.active i, .topbar-nav .nav-content a.active i {
  background-color: #4154f1;
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: #4154f1;
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
  padding-bottom: 10px;
}

.dashboard .info-card h6 {
  font-size: 28px;
  color: #012970;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.dashboard .card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.dashboard .sales-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

/* Activity */
.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item+.post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.dashboard .news h4 a:hover {
  color: #4154f1;
}

.dashboard .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
  font-size: 14px;
}

.dashboard .recent-sales .table thead {
  background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
  border: 0;
}

.dashboard .recent-sales .dataTable-top {
  padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
  padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding-top: 15px;
}

.iconslist .icon {
  background-color: #fff;
  border-radius: 0.25rem;
  text-align: center;
  color: #012970;
  padding: 15px 0;
}

.iconslist i {
  margin: 0.25rem;
  font-size: 2.5rem;
}

.iconslist .label {
  font-family: var(--bs-font-monospace);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

/*--------------------------------------------------------------
# Profile Page
--------------------------------------------------------------*/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c384e;
  margin: 10px 0 0 0;
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: #012970;
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: #012970;
}

.profile .profile-overview .label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 600;
  color: #4154f1;
}

.faq .basic p {
  color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 28px 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #4154f1;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
  background: #4154f1;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #5969f3;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
  padding: 30px;
}

.error-404 h1 {
  font-size: 80px;
  font-weight: 700;
  color: #4154f1;
  margin-bottom: 0;
  line-height: 150px;
}

.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 30px;
}

.error-404 .btn {
  background: #51678f;
  color: #fff;
  padding: 8px 30px;
}

.error-404 .btn:hover {
  background: #3e4f6f;
}

/*--------------------------------------------------------------
# Custom Header and Nav
--------------------------------------------------------------*/
.topbar-nav #tennessee-operated > span{
  font-size: 16px !important;
  line-height: 1em !important;
  color:#fff;
}
.topbar-nav #tennessee-operated img{
  height: 48px;
  width: 48px;
}
.topbar-nav .nav-link{
  border:1px solid #FCB750;
  padding:8px 20px;
  border-radius: 8px;
  line-height: 1rem;
  font-weight: bold;
  font-size:  var(--f-size-0);
  vertical-align: middle;
}
.topbar-nav #login-nav-item,
.topbar-nav #login-nav-item .bi-box-arrow-in-right{
  color: #FCB750;
}
.topbar-nav #signup-nav-item{
  background-color: #FCB750;
  color: #1E3464;
}
.topbar-nav #signup-nav-item:hover{
  background-color: #1E3464;
  color: #FCB750;
  border:1px solid #FCB750;
}
.topbar-nav #signup-nav-item:hover > i{
  color: #FCB750;
}
#login-nav-item:hover{
  background-color: #FCB750;
  color: #1E3464;
  border:1px solid #1E3464;
}
.topbar-nav #login-nav-item:hover > i{
  color: #1E3464;
}
/*--------------------------------------------------------------
# Section 1 - Lifetime commission
--------------------------------------------------------------*/
h2 span{
  background-color:#FEDDAC;
  border-radius: 10px;
}
#lifetime-commission{text-align: center;}
#lifetime-commission{
  background-color: #1E3464;
  background-image:
          radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 1px);
  background-size: 16px 16px; /* spacing of the dots */
  background-position: 0 0;
  color: #fff;
  padding: 5rem 1rem 0;
  position: relative;
  z-index: 1;
  min-height: 935px;
  overflow: hidden;
}
#lifetime-commission .bg-green-gradient {
  position: absolute;
  top: 65%;
  left: 50%;
  width: 1200px;
  height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
          circle at center,
          rgba(61,131,136,0.9) 0%,
          rgba(61,131,136,0.6) 20%,
          rgba(61,131,136,0.1) 50%,
          rgba(61,131,136,0) 60%
  );
}
#lifetime-commission p#green-text{
  background-color: #75F841;
  color:#000000;
  font-size:var(--f-size-1);
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid #000000;
  border-radius: 4px;
  box-shadow: -4px 4px 0 #111;
  position: absolute !important;
  top:115px;
  left:50%;
  transform: translateX(-50%) rotate(-8deg);
  z-index: 2000;
}
#lifetime-commission h1 {
  font-size: var(--f-size-9);
  line-height: clamp(3rem, 6vw + 1rem, 7rem); /* min: ~40px, max: 112px */
  font-weight: 800;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
  z-index: 1000;
}
#lifetime-commission p {
  font-size: var(--f-size-2);
  margin-bottom: 3rem;
  margin-top: 40px;
  position: relative;
  z-index: 1000;
}
#lifetime-commission p span{
  color:#FEDDAC;
}
#lifetime-commission .btn-cta-main {
  background-color: #fcb750;
  color: #1A1F2A;
  font-size: 18px;
  font-weight: 700;
  padding: 0.875rem 2rem;
  margin-bottom:1rem;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 4px 4px 1px #1A1F2A;
  position: relative;
  z-index: 1000;
}
@media (max-width: 991px){
  #div-cta-get-started{
    background: #3D8388;
    padding:0 30px 30px;
    margin-top: -20px;
    z-index: 1000;
  }
  #lifetime-commission p {
    margin-bottom: 1.5rem;
  }
}
@keyframes ctaShake {
  0%   { transform: rotate(0deg); }
  2%  { transform: rotate(-2deg); }
  4%  { transform: rotate(2deg); }
  6%  { transform: rotate(-2deg); }
  8%  { transform: rotate(2deg); }
  10%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.btn-cta-main,
.btn-cta-org-join,
.link-cta-club{
  animation: ctaShake 0.4s ease-in-out 0s infinite;
  animation-delay: 8s;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/*--------------------------------------------------------------
# Section 2 - Get Paid
--------------------------------------------------------------*/
#get-paid {
  background-color: #F2F6FF; /* #F2F6FF */
  padding: 5rem 1rem;
  position: relative;
  z-index: 2;
  clip-path: polygon(
          0 120px,
          60px 60px,
          100% 0px,
          100% 100%,
          0 100%
  );
  border-top-right-radius: 1rem;
  margin-top: -120px;
}
#get-paid #getpaid-lightblue-circle,
#get-paid #getpaid-lightblue-curly-1,
#get-paid #getpaid-orange-star{
  position: absolute;
}
#get-paid #getpaid-lightblue-circle{
  top:40px;
  right:8%;
}
#get-paid #getpaid-lightblue-curly-1{
  top:94px;
  left:8%;
}
#get-paid #getpaid-orange-star{
  top:160px;
  right:10%;
}

#get-paid h2 {
  font-size: var(--f-size-6);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.4rem;
  color: #172B55;
}
#get-paid h3.lead {
  font-size: var(--f-size-3);
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 0;
  color: #3C65BD;
}
#get-paid p{
  font-size: var(--f-size-1);
  line-height: 2rem;
}
.shadow-left-blue{
  box-shadow: -10px 10px 0px #172B55 !important;
}
#get-paid .card {
  border: 2px solid #172B55;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
  padding: 0;
}
#get-paid .card img {
  margin-bottom: 0;
  padding: 20px 0 0;
  max-height: 190px;
  width: auto;
}
#get-paid .card-title {
  font-size: var(--f-size-2);
  line-height: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
#get-paid .card-text {
  font-size: var(--f-size-0);
  line-height: 1.25rem;
  color: #444;
}
#get-paid p#bonus-tag,
#get-paid #ico-tdd-discount,
#get-paid #ico-double-rewards{
  position: absolute !important;
  z-index: 2000;
}
#get-paid p#bonus-tag{
  background-color: #F8AB41;
  color:#000000;
  font-size:14px;
  font-weight: bold;
  display: inline-block;
  padding: 0px 8px;
  border: 2px solid #000000;
  border-radius: 4px;
  box-shadow: -4px 4px 0 #111;
  top:-8px;
  left:14px;
  transform: translateX(-50%) rotate(-24deg);
}
#get-paid #ico-tdd-discount{
  top:120px;
  left:-14px;
}
#get-paid #ico-double-rewards{
  top:-20px;
  right:-4px;
}
/*--------------------------------------------------------------
# Section 3 - Trusted since
--------------------------------------------------------------*/
#trusted-since {
  background-color: #FFF;
}
#trusted-since h2 {
  font-size:  var(--f-size-6);
  line-height: clamp(4rem, 6vw + 1rem, 6rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.4rem;
  color: #172B55;
}
#trusted-since p{
  font-size: var(--f-size-1);
}
#container-sloth{height: 850px}

#chad-dad-image{
  position: absolute;
  top: -40px;
  left: 0px;
  width: 125px;
  height: 125px;
  z-index: 2000;
}
#img-trusted_since-2006{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 366px;
  height: 477px;
  z-index: 1;
}
#myVideo{
  position: relative;
  z-index: 1000;
  border: 8px solid #1E1E1E;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 10px 10px 0 #1A1F2A;
}
@media (max-width: 480px){
  #trusted-since #container-sloth{
    height: 400px !important;
  }
  #img-trusted_since-2006{
    width: 216px;
    height: 257px;
    z-index: 1;
  }
  #chad-dad-image{
    width: 60px !important;
    height: 60px !important;
  }
}
/*--------------------------------------------------------------
# Section 4 - Why love us
--------------------------------------------------------------*/
#why-love-us{
  background: linear-gradient(to right, #F8AB41 0%, #FEDDAC 100%);
  padding: 5rem 1rem;
  position: relative;
  z-index: 2;
  clip-path: polygon(
          100% 120px,
          calc(100% - 60px) 60px,
          0 0,
          0 100%,
          100% 100%
  );
  border-top-left-radius: 1rem;
  margin-top: -120px;
}
#why-love-us h2,
#them-vs-us h2{
  font-size: var(--f-size-6);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.4rem;
  color: #1A1F2A;
}
#why-love-us h3{
  position: relative;
  font-size: var(--f-size-2);
  line-height: 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 0;
  color: #1A1F2A;
  z-index: 1000;
}
#why-love-us p{
  position: relative;
  font-size: var(--f-size-1);
  line-height: 1.375rem;
  z-index: 1000;
}
#why-love-us ul{
    list-style: none;
    padding-left: 0;
    margin: 120px 0 0 0;
}
@media (max-width: 576px) {
  #why-love-us ul {
    margin: 20px 0 40px !important;
  }
}
#why-love-us li{
  border-bottom: 1px solid #111;
  line-height: 3.5rem;
  text-align: left;
  text-transform: uppercase;
  font-size: var(--f-size-2);
  font-weight: bold;
}
#why-love-us span{}
#why-love-us #white-circle,
#why-love-us #white-star,
#why-love-us #img-hands{
  position: absolute;
  z-index: 2;
}
#why-love-us #img-hands{
  top:50%;
  right:85%;
}
#why-love-us #white-circle{
  top:20%;
  left:15%;
}
@media (max-width: 768px){
  #why-love-us #white-circle{
    display: none;
  }
}
#why-love-us #white-star{
  top:8%;
  right:5%;
}
.bi-professional-content,
.bi-winning-platform,
.bi-usa-owned,
.bi-accurate-tracking,
.bi-unlimited-paychecks{
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}
.bi-professional-content{
  background: url("../../../../images/ico-list-1.png") no-repeat center center;
}
.bi-winning-platform{
  background: url("../../../../images/ico-list-2.png") no-repeat center center;
}
.bi-usa-owned{
  background: url("../../../../images/ico-list-3.png") no-repeat center center;
}
.bi-accurate-tracking{
  background: url("../../../../images/ico-list-4.png") no-repeat center center;
}
.bi-unlimited-paychecks{
  background: url("../../../../images/ico-list-5.png") no-repeat center center;
}
/*--------------------------------------------------------------
# Section 5 - Them vs. us
--------------------------------------------------------------*/
#them-vs-us{
  background-color: #fff;
  padding-bottom: 180px;
}
.them-vs-us-cards{
  border: 2px solid #091B25;
  border-radius: 10px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.them-vs-us-cards > h3{
  text-transform: uppercase;
  font-weight: bold;
  color:#fff;
  padding: 20px 0 20px 10px;
  border-bottom: 2px solid #091B25;
  margin: 0;
}
.them-vs-us-cards h4{
  font-size: var(--f-size-1);
  background-color: #ECECEC;
  margin: 0;
}
.them-vs-us-cards p{
  font-size: var(--f-size-1);
}
.them-vs-us-cards h4,
.them-vs-us-cards p{
  line-height: 30px;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #ccc;
}
.them-vs-us-cards h5 {
  line-height: 40px;
  padding: 10px;
}
.them-vs-us-cards h5 span{
  text-transform: uppercase;
  float: right;
  font-weight: 800;
}
#card-other-programs h5 span{color: #FF3E6E}
#card-our-program h5 span{color: #00D192}
#card-other-programs h3{
  background-color: #FF3E6E;
  border-radius: 8px 8px 0 0;
}
#card-our-program h3{
  background-color: #3C65BD;
  border-radius: 8px 8px 0 0;
}
@media (max-width: 767px){
  #them-vs-us .col-md-6{padding: 20px 0;}
}
@media (min-width: 768px){
  #them-vs-us .card-left{padding-right: 25px;}
  #them-vs-us .card-right{padding-left: 25px;}
}

/*--------------------------------------------------------------
# Section 6 - Earn commissions
--------------------------------------------------------------*/
#earn-commissions{
  background-color: #1e3464;
  color: #fff;
  margin-top: -80px;
  padding: 2rem;
  position: relative;
  clip-path: polygon(
          0 0,                   /* top-left corner */
          calc(100% - 80px) 0,   /* top edge to 80px before top-right */
          100% 80px,             /* diagonal cut into top-right */
          100% 100%,             /* bottom-right corner */
          80px 100%,             /* diagonal cut up from bottom-left */
          0 calc(100% - 60px)    /* cut from left into bottom-left */
  );
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: visible;
  height: 550px;
}
#earn-commissions h2{
  font-size: var(--f-size-5);
}
#earn-commissions-image{
  display: inline-block;
  top: -44px;
  right: 12px;
  height: 595px;
  width: auto;
}
#earn-commissions #commissions-lightblue-circle,
#earn-commissions #commissions-lightblue-curly-2{
  display: block;
  visibility: visible;
}
@media (max-width: 576px) {
  #earn-commissions-image {
    width: auto;
    max-height: 280px;
    right: 0;
    top: -40px;
  }
  #commission-text{
    margin-top: 260px!important;
  }
  #earn-commissions #commissions-lightblue-circle,
  #earn-commissions #commissions-lightblue-curly-2{
    display: none;
    visibility: hidden;
  }
}
#earn-commissions h2 span{
  background-color: #F8AB41;
  color: #1e3464;
}
#earn-commissions p{
  font-size: var(--f-size-1);
  line-height: 2rem;
}
#earn-commissions #commissions-lightblue-circle,
#earn-commissions #commissions-lightblue-curly-2,
#earn-commissions #commissions-orange-star{
  position: absolute;
}
#earn-commissions #commissions-lightblue-circle{
  top:500px;
  right:470px;
}
#earn-commissions #commissions-lightblue-curly-2{
  top:385px;
  right:408px;
}
#earn-commissions #commissions-orange-star{
  top:125px;
  right:255px;
}
@media (max-width: 991px){
  #earn-commissions{
    height: auto;
  }
  #commission-text{
    margin-top: 560px;
  }
}
.btn-orange{
  background-color: #FCB750;
  font-weight: 800;
}
#start-earning-btn{
  padding: 8px 24px;
  font-size: var(--f-size-1);
  margin-top: 10px;
}
#start-earning-btn:link,
#start-earning-btn:active,
#start-earning-btn:visited{
  background-color: #FCB750;
  font-weight: 800;
}
#start-earning-btn:hover,
a#start-earning-btn:hover{
  background: transparent;
  border: 1px solid #FCB750;
  color: #FCB750;
}

/*--------------------------------------------------------------
# Section 7 - Who should join us
--------------------------------------------------------------*/
#who-joins{
  background-color: #F2F6FF;
}
#who-joins p{
  font-size: var(--f-size-1);
}
#who-joins ul{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 40px 0;
}
#who-joins li{
  border-bottom: 1px solid #111;
  line-height: 3.5rem;
  text-align: left;
  font-size: var(--f-size-2);
  font-weight: bold;
}
#who-joins #who-joins-lightblue-circle,
#who-joins #who-joins-orange-star{
  position: absolute;
}
#who-joins #who-joins-lightblue-circle{
  bottom:92%;
  right:8%;
}
#who-joins #who-joins-orange-star{
  bottom:92%;
  left:20%;
}
/*--------------------------------------------------------------
# Section 8 - Creative Team
--------------------------------------------------------------*/
#creative-team{
  background-color: #3C65BD;
  color: #fff;
  padding: 5rem 1rem;
  position: relative;
  z-index: 2;
  clip-path: polygon(
          0 120px,
          60px 60px,
          100% 0px,
          100% 100%,
          0 100%
  );
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin-top: -120px;
}
#creative-team-img-wraper{margin-top: 80px}
@media (max-width: 767px){
  #creative-team-img-wraper{margin-top: 20px}
}
#creative-team h2{
  font-size: var(--f-size-5);
  font-weight: 800;
  text-align: left;
  margin-bottom: 0.4rem;
}
#creative-team h2 span{
  background-color: #233D76;
}
.sisters-w{
  margin-top: 80px;
}
@media (max-width: 767px){
  .sisters-w{
    margin-top: 10px;
  }
}
/*--------------------------------------------------------------
# Section 9 - Ratings and Reviews
--------------------------------------------------------------*/
#ratings-reviews{
  background-color: #F2F6FF;
}
#who-joins h2,
#ratings-reviews h2,
#join-the-club h2{
  font-size:  var(--f-size-5);
  font-weight: 800;
  text-align: left;
  margin-bottom: 0.4rem;
  color: #1A1F2A;
}
/*--------------------------------------------------------------
# Section 10 - Join the Club
--------------------------------------------------------------*/
#join-the-club{
  background-color: #fff;
  position: relative;
  padding-top: 80px;
  padding-bottom: 100px;
}

#join-the-club #arrow-form-image{
  position: absolute;
  right: 10px;
  top: 80%;
}

#signup-form-image{
  padding-bottom: 50px;
}

@media (max-width: 991px){
  #join-the-club #arrow-form-image{
    position: absolute;
    top: 365px;
    left: 95%;
  }
  .m-b-md-30{margin-bottom: 30px}
  #join-the-club #arrow-form-image{
    display: none;
    visibility: hidden;
  }
}
.link-cta-club{
   position: absolute;
   left:28%;
   bottom: 10rem;
   margin:0;
   background-color: #3C65BD;
   color: #FFFFFF;
   font-size:  var(--f-size-1);
   font-weight: 700;
   padding: 0.875rem 3rem;
   margin-bottom:1rem;
   border-radius: 0.5rem;
   border: none;
   box-shadow: 6px 6px 1px #1A1F2A;
   z-index: 1000;
 }
a.link-cta-club:hover{
  background-color: #4f7cdc;
  color: #FFFFFF;
  box-shadow: 4px 4px 1px #1A1F2A;
  border: none;
}/*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
.footer-login,
.footer-welcome{ /* only on login, register, reset pw pages */
  padding: 80px 0 40px !important;
}
.footer {
  padding: 20px 0 40px;
  font-size: var(--f-size--1);
  transition: all 0.3s;
  border-top: 1px solid #cddfff;
  vertical-align: middle;
}

.footer .copyright {
  text-align: left;
  color: #fff;
}
.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: #012970;
}
#footer{
  background-color: #1E3464;
  color:#fff;
  position: relative;
}
#footer #tdd-footer-logo-img{
  vertical-align: middle;
}
#footer a:link,
#footer a:hover,
#footer a:visited,
#footer a:active{
  color:#FCB750;
}
.social-icons{
  text-align: right;
  margin-bottom: 10px;
}
@media (max-width: 767px){
  .social-icons{
    text-align: center;
  }
  #tdd-footer-logo-img{
    padding-bottom: 40px;
  }
  #footer,
  .footer{
    text-align: center;
  }
}
#footer #tdd-box-image{
  position: absolute;
  top: -190px;
  left: 15%;
  width: 242px;
  height: 260px;
}
@media (max-width: 767px){
  #footer #tdd-box-image{
    top: -124px;
    left: calc(50% - 80px);
    width: 154px;
    height: 170px;
  }
}
/*--------------------------------------------------------------
# Login Page/Template
--------------------------------------------------------------*/
#tdd-lifetime-login {
  background-color: #1E3464;
  background-image:
          radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 1px);
  background-size: 16px 16px; /* spacing of the dots */
  background-position: 0 0;
  color: #fff;
  text-align: center;
  padding-bottom: 150px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#tdd-lifetime-login .bg-green-gradient {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 1600px;
  height: 1200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
          circle at center,
          rgba(61,131,136,0.9) 0%,
          rgba(61,131,136,0.6) 20%,
          rgba(61,131,136,0.1) 50%,
          rgba(61,131,136,0) 60%
  );
}
#logo-affiliates{
  position: relative;
  z-index: 1000;
}
#login-content{z-index: 1000}

h2.login-title{
  font-size: var(--f-size-5);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin: 1.5rem auto;
  color: #172B55;
}
h2.login-title span{
  background-color:#FEDDAC;
  border-radius: 10px;
  color: #172B55;
  padding: 2px 8px;
  margin-left: 4px;
  text-wrap: normal;
}
.register h3.lead{
  color:#3C65BD;
  margin-bottom: 40px;
}

#tdd-box-footer{
  background-color: #fff;
  position: relative;
  z-index: 2000;
}
#tdd-box-footer #tdd-box-image{
  position: absolute;
  bottom: -60px;
  left: 15%;
  width: 242px;
  height: 250px;
}
@media (max-width: 767px){
  #tdd-box-footer #tdd-box-image{
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 173px;
    height: 170px;
  }
}
@media (max-width: 991px){
  .m-b-md-30{margin-bottom: 30px}
}

.btn-primary{
  background-color: #1E3464;
}
.btn-primary:hover{
  background-color: transparent;
  color: #1E3464;
  border: 1px solid #1E3464;
}
/*--------------------------------------------------------------
# Terms & conditions page
--------------------------------------------------------------*/
.terms-conditions h3{color: #FCB750;}
.terms-conditions h4{margin-top: 1.825rem; color: #1E3464}
.terms-conditions h5{margin-top: 1.825rem}
.terms-conditions hr{border-top: 1px solid #FCB750; margin: 40px 0 20px}


/* Review slider - Welcome page */
.review-slider {
  max-width: 1400px;
  margin: 2rem auto;
}

/* visible viewport */
.slider-window {
  overflow: hidden;
  width: 100%;
  padding: 1.4rem;   /* prevents clipping right */
  /*padding-bottom: 10px;   !* prevents clipping bottom *!*/
  box-sizing: border-box;
}

/* moving strip */
.slider-track {
  display: flex;
  gap: 3rem;
  position: relative;
  left: 0;
  transition: transform 0.6s ease-in-out;
  /* no gap here, we'll do padding inside cards for spacing */
}
.title-card{color:#272727}
/* each slide/card */
.review-card {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 2.25rem 2rem;
  text-align: justify-all;
  min-height: 250px;
  background: #fff;
  border: 1px solid #272727;
  border-radius: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  margin: 0;
  width: 47.5%;   /* desktop default: 2 cards visible */
}

.review-card p {
  margin-bottom: .75rem;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
}

.review-card h6 {
  margin-top: .75rem;
  margin-bottom: 0;
  font-weight: 600;
  color: #000;
}
.review-card .quote img{
  margin-bottom: 20px;
}
.review-card h6{
  /*margin-top:20px;*/
}
.review-card .reviews-stars{
  margin-top:40px;
}
.review-card .date-reviews{
  color: #999999;
}

/* mobile: show 1 per view, full width */
@media (max-width: 768px) {
  .review-card {
    width: 100%;
  }
}
/* /END - Review slider - Welcome page */

/*--------------------------------------------------------------
# ORGANIZATION PAGE
--------------------------------------------------------------*/
#lifetime-commission-organizations{
  background-color: #1E3464;
  background-image:
          radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 1px);
  background-size: 16px 16px; /* spacing of the dots */
  background-position: 0 0;
  color: #fff;
  padding: 5rem 1rem 0;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
#lifetime-commission-organizations h1 {
  font-size: var(--f-size-6);
  line-height: clamp(3rem, 5vw + 1rem, 5rem); /* min: ~40px, max: 112px */
  font-weight: 800;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1000;
}
img#img-lifetime-commissions-organization{
  width: 100%;
  text-align: center;
}
#lifetime-commission-organizations h1 span{
  background-color:#FCB750;
  color:#172B55;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
#lifetime-commission-organizations p {
  font-size: var(--f-size-1);
  margin-bottom: 3rem;
  margin-top: 40px;
  position: relative;
  z-index: 1000;
}
#lifetime-commission-organizations{text-align: left;}
@media (max-width: 991px){
  #lifetime-commission-organizations {text-align: center !important;}
}
#lifetime-commission-organizations .btn-cta-main {
  background-color: #fcb750;
  color: #1A1F2A;
  font-size: 18px;
  font-weight: 700;
  padding: 0.875rem 2rem;
  margin-bottom:1rem;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 4px 4px 1px #1A1F2A;
  position: relative;
  z-index: 1000;
}
/*--------------------------------------------------------------
# Section 2 - Video
--------------------------------------------------------------*/
#chads-video {
  background-color: #FFF;
}
#chads-video p{
  font-size: var(--f-size-1);
}
#chad-dad-image{
  position: absolute;
  top: -40px;
  left: 0;
  width: 125px;
  height: 125px;
  z-index: 2000;
}
#container-video-chad{
  padding: 100px 0 20px;
}
/*--------------------------------------------------------------
# Section 3 - The program Advantage
--------------------------------------------------------------*/
#program-advantage {
  background-color: #ffffff;
  position: relative;
}
#program-advantage h2{
  font-size: var(--f-size-5);
  line-height: clamp(3rem, 5vw + 1rem, 5rem); /* min: ~40px, max: 112px */
  font-weight: 800;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1000;
}
#program-advantage h2 span{
  background-color:#FCB750;
  color:#172B55;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

#program-advantage-slider {
  margin-top: 4rem;
  position: relative;
}
/* Optional: small responsive tweak */
@media (max-width: 991px) {
  #program-advantage-slider {
    margin-top: 1rem;
  }
}

#program-advantage-slider .sp-buttons {
  position: absolute;
  left: -40px;                 /* move dots to left side */
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}

#program-advantage-slider .sp-button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #1E3464;
  background: #fff;
  opacity: 1;
}

#program-advantage-slider .sp-button.sp-selected-button {
  background: #FBC875;
}

#program-advantage-slider .sp-buttons {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}

#program-advantage-slider .sp-button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #1E3464;
  background: #fff;
}

#program-advantage-slider .sp-selected-button {
  background: #FBC875;
}

#program-advantage-slider .sp-buttons {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
}

#program-advantage-slider .sp-button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #1E3464;
  background: #fff;
}

#program-advantage-slider .sp-selected-button {
  background: #FBC875;
}

/* 3) Cards */
.pa-step-card {
  position: relative;
  background: #FBC875;
  border-radius: 16px;
  padding: 30px 40px;
  margin-bottom: 40px;
  margin-left:8px;
  box-shadow: -6px 6px 0 #000000;
  border:1px solid #1E3464;
}

/* Last card different color (blue) */
.pa-step-card--orange {
  background: #FCB750;
}
.pa-step-card--light {
  background: #FFDCA8;
}
.pa-step-card--blue {
  background: #CADBFF;
}

/* Bullet for each card */
.pa-step-card::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 32px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1E3464;
}
.sp-slide {
  margin-top: 60px;
}




/*--------------------------------------------------------------
# Section 4 - Receive earnings
--------------------------------------------------------------*/
#receive-earnings {
  background-color: #FFFFFF; /* #F2F6FF */
  padding: 0 1rem 5rem;
  position: relative;
  z-index: 2;
}

#receive-earnings h2 {
  font-size: var(--f-size-5);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.4rem;
  color: #172B55;
}
#receive-earnings h3.lead {
  font-size: var(--f-size-3);
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 0;
  color: #3C65BD;
}
#receive-earnings p{
  font-size: var(--f-size-1);
  line-height: 2rem;
}
#receive-earnings .shadow-left-blue{
  box-shadow: -10px 10px 0 #172B55 !important;
}
#receive-earnings .card {
  border: 2px solid #172B55;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
  padding: 0;
}
#receive-earnings .card img {
  margin-bottom: 0;
  padding: 20px 0 0;
  max-height: 190px;
  width: auto;
}
#receive-earnings .card-title {
  font-size: var(--f-size-2);
  line-height: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
#receive-earnings .card-text {
  font-size: var(--f-size-0);
  line-height: 1.25rem;
  color: #444;
}
/*--------------------------------------------------------------
# Section 5 - Why organizations love this program
--------------------------------------------------------------*/
#organizations-program{
  background: linear-gradient(to left, #F8AB41 0%, #FEDDAC 100%);
  padding: 1rem 1rem 4rem;
  border-radius: 16px;
  position: relative;
  z-index: 2;
}
#organizations-program h2{
  font-size: var(--f-size-5);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.4rem;
  color: #1A1F2A;
}
#organizations-program h3{
  position: relative;
  font-size: var(--f-size-2);
  line-height: 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 0;
  color: #1A1F2A;
  z-index: 1000;
}
#organizations-program p{
  position: relative;
  font-size: var(--f-size-1);
  line-height: 1.375rem;
  z-index: 1000;
}
#organizations-program .organization-card{
  background: #FFE7C3;
  color:#1A1F2A;
  border-radius: 10px;
  padding: 30px;
  border:1px solid #1A1F2A;
  text-align: left;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#organizations-program .organization-card img{
  width: auto;
  height: 44px;
  margin: 0 auto 10px;
  text-align: left;
}
#organizations-program .organization-card h6{
  text-transform: uppercase;
  font-weight: bold;
  color:#000000;
  margin: 20px 0 10px;
}
#organizations-program .organization-card p{
  font-size: var(--f-size-0);
  color:#1e3464;
  margin: 0;
}

/*--------------------------------------------------------------
# Section 6 - Who can join
--------------------------------------------------------------*/
#who-can-join{
  background-color: #ffffff;
  padding: 2rem 0 0;
  position: relative;
}
#who-can-join h2{
  font-size: var(--f-size-5);
  color:#172B55;
}
#who-can-join-image{
  display: inline-block;
  position: absolute;
  right: 0;
  width: auto;
}
@media (max-width: 991px) {
  #who-can-join-image {
    position: relative;
    width: 100%;
  }
}
#who-can-join h2 span{
  background-color: #FEDDAC;
  color: #172B55;
  padding-left: 8px;
}
#who-can-join p{
  font-size: var(--f-size-1);
  line-height: 2rem;
}
#who-can-join ul{
  list-style: none;
  padding-left: 0;
  margin: 40px 0 100px 0;
}
@media (max-width: 768px) {
  #who-can-join ul {
    margin: 20px 0 20px !important;
  }
}
#who-can-join li{
  border-bottom: 1px solid #111;
  line-height: 5rem;
  text-align: left;
  text-transform: capitalize;
  font-size: var(--f-size-2);
  font-weight: 300;
}
#who-can-join li img{
  width: 40px;
  vertical-align: middle;
  line-height: 5rem;
  margin: -10px 10px 2px 0;
}
@media (max-width: 991px){
  #who-can-join{
    height: auto;
  }
  #commission-text{
    margin-top: 560px;
  }
}
/*--------------------------------------------------------------
# Section 7 - Marketing Team
--------------------------------------------------------------*/
#marketing-team{
  background: linear-gradient(135deg, #3C65BD 0%, #1E3464 100%);
  padding: 5rem 1rem;
  border-radius: 16px;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px){
  #marketing-team{
    padding-top: 0;
  }
}
#marketing-team h2{
  font-size: var(--f-size-5);
  color:#FFFFFF;
}
#marketing-team h2 span{
   background-color: #FCB750;
   color: #1E3464;
   padding-left: 8px;
 }
#marketing-text p{
  color:#ffffff;
}
.highlight{
  background-color: #fcb750;
  color: #1e3464;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}
#marketing-team .info-card{
  background: #FEDDAC;
  color:#1A1F2A;
  border-radius: 10px;
  padding: 30px;
  border:2px solid #1A1F2A;
  box-shadow: 6px 6px 0 #1A1F2A;
  text-align: center;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#marketing-team .info-card img{
  width: auto;
  height: 64px;
  margin: 0 auto 10px;
}
#marketing-team .info-card p{
  color:#1e3464;
  margin: 0;
}
.stagger-card {
  margin-top: 60px;
}

/*--------------------------------------------------------------
# Section 8 - Who can join
--------------------------------------------------------------*/
#who-joins{
  background-color: #F2F6FF;
}
#who-joins p{
  font-size: var(--f-size-0);
}
#who-joins ul{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 40px 0;
}
#who-joins li{
  border-bottom: 1px solid #111;
  line-height: 3.5rem;
  text-align: left;
  font-size: var(--f-size-2);
  font-weight: bold;
}
#who-joins #who-joins-lightblue-circle,
#who-joins #who-joins-orange-star{
  position: absolute;
}
#who-joins #who-joins-lightblue-circle{
  bottom:92%;
  right:8%;
}
#who-joins #who-joins-orange-star{
  bottom:92%;
  left:20%;
}

/*--------------------------------------------------------------
# Section 9 - Keep the giving going
--------------------------------------------------------------*/
#keep-going{
  background: linear-gradient(-45deg, #F8AB41 0%, #FEDDAC 100%);
  color: #172B55;
  padding: 2rem 3rem 0;
  position: relative;
  z-index: 2;
  text-align: center;
  border-radius: 20px;
}
#keep-going h2{
  font-size: var(--f-size-5);
  color: #172B55;
  font-weight: 800;
  margin-bottom: 0.4rem;
}
#keep-going h2 span{
  background-color: #FEDDAC;
  padding-left: 8px;
  white-space: nowrap;
}
a.btn-cta-org-join{
  background-color: #FCB750;
  color: #1A1F2A;
  font-size: 18px;
  font-weight: 700;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  border: 1px solid #1A1F2A;
  box-shadow: 4px 4px 1px #1A1F2A;
  position: relative;
  z-index: 1000;
}
a.btn-cta-org-join:hover{
  margin:2px auto auto 2px;
  border: 1px solid #1A1F2A;
  box-shadow: 2px 2px 1px #1A1F2A;
  background-color: #FFE7C3;
}
#keep-going-txt-wraper{
  padding-bottom: 2rem;
}
/*--------------------------------------------------------------
# Section 10 - Join the club organization
--------------------------------------------------------------*/
#join-the-club-organizations{
  background-color: #fff;
  position: relative;
  padding-top: 80px;
  padding-bottom: 0;
}
#join-the-club-organizations h2{
  font-size:  var(--f-size-5);
  font-weight: 800;
  text-align: left;
  margin-bottom: 0.4rem;
  color: #172B55;
}
#join-the-club-organizations #signup-form-image{
  padding-bottom: 0 !important;
}
.club-padding{
  padding-top:5rem;
}
@media (max-width: 991px){
  .club-padding{
    padding-top:0;
  }
}
/*--------------------------------------------------------------
# END - Organization page
--------------------------------------------------------------*/