@font-face { font-family: 'Golden Hopes'; src: url('/font/GoldenHopes.woff2') format('woff2'), url('/font/GoldenHopes.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

/* ==========================================================================
   Global
============================================================================= */
/* Font Styles
============================================================================= */
h1, h2, .display-1 { font-size: 48px; margin: 0 0 35px; font-weight: bold; letter-spacing: 0.01em; text-transform: none; }
h1 + h2, h2 + h3, .display-2 { font-family: var(--secondary-font); font-size: 24px; margin: -20px 0 25px; font-weight: 400; text-transform: none; letter-spacing: 0.01em; line-height: 1.2; }
h3, .display-3 { font-size: 24px; font-weight: bold; margin: 25px 0 20px; line-height: 1.2; }
h4, .display-4 { font-size: 17px; margin: 25px 0 5px; font-weight: bold; line-height: 1.2; }
p { margin-bottom: 25px; }
a, a:link, a:visited { color: var(--primary); text-decoration: none; transition: all 0.5s; }
a:hover, a:active { color: var(--secondary); }
@media (max-width:991px) {
	h1, h2, .display-1 { font-size: 40px; }
	h1 + h2, h2 + h3, .display-2 { font-size: 20px; }
	h3, .display-3 { font-size: 20px; }
}
@media (max-width:575.98px) {
	h1, h2, .display-1 { font-size: 35px; }
	h1 + h2, h2 + h3, .display-2 { font-size: 18px; }
	h3, .display-3 { font-size: 18px; }
}

html { }
body { font-family: var(--primary-font); color: var(--body-text); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }


/* Text Colors */
.text-primary, .text--primary { color: var(--primary)!important; }
.text-secondary, .text--secondary { color: var(--secondary)!important; }
.text-light, .text--light { color: var(--light)!important; }
.text-dark, .text--dark { color: var(--dark)!important; }
.text-white, .text--white { color: #fff!important; }

/* Font Styles */
.font-cursive { font-family: 'Golden Hopes', cursive; font-family: var(--cursive-font); text-transform: none; font-weight: normal; }

/* Buttons
============================================================================= */
.btn { position: relative; background-color: transparent; color: #fff !important; border: 1px solid var(--primary); height: 67px; line-height: 67px; border-radius: 0; padding: 0 20px; font-size: 20px; letter-spacing: .01em; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; min-width: 330px; overflow: hidden; z-index: 3; white-space: nowrap; }
.btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: #000; }
.btn::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: calc(200% + 1px); z-index: -1; transform: translateX(-50%); transition: transform 0.4s ease-out; transform-origin: left; background: rgb(255, 255, 255); background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--primary) 50%, var(--primary) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--primary) 50%, var(--primary) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--primary) 50%, var(--primary) 100%); }
.btn:hover { color: var(--primary) !important; }
.btn:hover::before { transform: translateX(0); transform-origin: left; transition: transform 0.4s ease-out; }
/* .btn.focus, .btn:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb),.25); } */

/* Button Colors */
.btn--secondary { background-color: var(--secondary); color: #fff !important; border: 1px solid var(--secondary); }
.btn--secondary::before { background: rgb(255, 255, 255); background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--primary) 50%, var(--secondary) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--secondary) 50%, var(--secondary) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--secondary) 50%, var(--secondary) 100%); }
.btn--secondary:hover { background-color: #fff; color: var(--secondary) !important; }

/* Dark */
/* Button Colors */
.btn--dark { background-color: var(--dark); color: #fff !important; border: 1px solid var(--dark); }
.btn--dark::before { background: rgb(255, 255, 255); background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--primary) 50%, var(--dark) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--dark) 50%, var(--dark) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--dark) 50%, var(--dark) 100%); }
.btn--dark:hover { background-color: #fff; color: var(--dark) !important; }

/*  */
.btn--white { background-color: #fff; color: var(--primary) !important; border: 1px solid #fff; }
.btn--white:hover { background-color: var(--primary); color: #fff !important; border: 1px solid var(--primary); }
.btn--arrow::after { content: '\f061'; font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 300; -webkit-font-smoothing: antialiased; padding-left: 8px; font-size: 1.1em; }

/* Inverted Buttons - Outline Only */
.btn--outline-primary { }
.btn--outline-primary:hover { }
.btn--outline-secondary { }
.btn--outline-secondary:hover { }

/* Button Sizes */
.btn--lg { }
.btn--sm { min-width: 165px; line-height: 54px; height: 54px; }

/* Button Lists */
.btn-list { display: inline-flex; flex-wrap: wrap; margin: 0 -8px 15px; }
.btn-list .btn { margin: 0 8px 15px; }


/* ==========================================================================
  Pricing Page
============================================================================= */
#pricing {}
#pricing table { box-shadow: var(--box-shadow); margin: 0 auto 130px; }

/* Table Header */
#pricing table thead { border-bottom: 1px solid var(--gray-dark); }
#pricing table thead th { font-size: 16px; color: #fff; padding: 25px 15px; text-align: center; min-width: 290px; vertical-align: middle; font-weight: 400; border: 1px solid var(--gray-dark); font-family: var(--secondary-font); }
#pricing table thead th h3 { display: block; font-size: 30px; line-height: 1.2em; color: inherit; margin: 0; }
#pricing table thead th h4 { font-size: 16px; font-style: italic; margin: 5px 0 10px; font-family: var(--primary-font);  }
#pricing table thead th p { margin: 0; }
#pricing table thead th:nth-child(1) { width: 350px; color: var(--gray-dark); text-transform: uppercase!important; font-size: 30px;}
#pricing table thead th:nth-child(2) { background-color: var(--secondary); text-transform: lowercase!important; font-size: 24px;}
#pricing table thead th:nth-child(3) { background-color: var(--gray-dark); text-transform: uppercase!important; font-size: 30px;}
#pricing table thead th:nth-child(4) {background-color: var(--secondary); text-transform: lowercase!important; font-size: 24px;}

/* Table Body */
#pricing table tbody { background-color: var(--gray); border-bottom: 1px solid var(--gray-dark); }
#pricing table tbody th { position: relative; font-size: 16px; text-align: left; padding: 8px 35px 8px 15px; min-width: 285px; font-weight: 400; border-left: 1px solid var(--gray-dark); border-right: 1px solid #000;}
#pricing table tbody th small { display: block; }
#pricing table tbody td { font-size: 18px; padding: 8px 15px; text-align: center; font-weight: 500; height: 52px; vertical-align: middle; overflow: auto; border-right: 1px solid var(--gray-dark); border-left: 1px solid var(--gray-dark); }
/* #pricing table tbody tr:nth-child(odd) { background-color: rgba(0,0,0,.04); } */
#pricing table tbody td:nth-child(2), #pricing table tbody td:nth-child(4) { color: var(--secondary); }
#pricing table tbody td:nth-child(3) { color: var(--gray-dark); }
#pricing table tbody td i { font-size: 30px; }

/* Buttons */
#pricing table tbody .table-footer { }
#pricing table tbody .table-footer td { padding: 0; height: 0; border: 0; position: relative; overflow: visible; }
#pricing table tbody .table-footer td .btn { min-width: 0; width: 100%; max-width: 80%; height: 51px; line-height: 51px; position: absolute; left: 50%; top: 35px; transform: translateX(-50%); font-size: 14px;}
#pricing table tbody td .btn { min-width: 0; width: 100%; max-width: 80%; height: 51px; line-height: 51px; font-size: 14px;}
#pricing table tbody tr.row-header {background-color: rgba(0,0,0,.09);}
#pricing table tbody tr.row-header th {font-weight: bold; text-transform:uppercase;}
#pricing table tbody tr.row-header td {border: none;}
#pricing table tbody tr.row-header td:last-child {border-right:1px solid var(--gray-dark);}
#pricing table tbody tr.row-header th:first-child {border-left:1px solid var(--gray-dark); border-right:none;}
#pricing table tbody th i {font-size: 15px;background: var(--dark);width: 25px;height: 25px;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: #fff; display: inline-flex;}

@media(min-width:992px) {
	#pricing table tbody th {padding-left: 40px; padding-right: 15px;}
	#pricing table tbody th i {position: absolute;top: 12px;left: 5px;}
}

/* Mobile Table v2 */
@media (max-width: 1199px){
	#pricing table tbody tr.row-header:first-of-type ~ tr.row-header :where(th,td){ display: none;}
	#pricing table, #pricing thead, #pricing tbody, #pricing th, #pricing td, #pricing tr { display: block; border: 0!important; }
	#pricing thead tr { display: flex; }
	#pricing thead tr th:first-child { display: none; }
	#pricing thead tr th { flex: 1 1 33.33%; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
	#pricing table tbody td { display: flex; flex-direction: column; justify-content: center; font-size: 16px; overflow: visible; padding: 15px 8px; height: auto; }
	#pricing table tbody td::before { text-align: left; min-width: 50%; font-size: 15px; }
	#pricing table tbody td:nth-child(2), #pricing table tbody .fees td:nth-child(2) { background-color: var(--secondary) }
	#pricing table tbody td:nth-child(3), #pricing table tbody .fees td:nth-child(3) { background-color: var(--gray-dark); color: #fff;}
	#pricing table tbody td:nth-child(4), #pricing table tbody .fees td:nth-child(4) {background: var(--secondary); }
	#pricing table tbody td:first-child { font-size: 20px; font-weight: 500; padding: 15px 8px; margin: 30px 0 0; text-align: center; justify-content: center; background: #fff; }
	#pricing table tbody td.not-included::after, #pricing table tbody .footer td .btn { margin: 0; }
	#pricing table tbody tr { display: flex; flex-wrap: wrap; border: 1px solid #ccc!important; border-bottom: 0!important; }
	#pricing table tbody td { flex: 1 1 33.33%; margin: 0; }
	#pricing table tbody td:first-child { flex: 1 0 100%; margin: 0; }
	#pricing table tbody tr:last-child { border-bottom: 1px solid #ccc!important; }
	#pricing table tbody th { text-align: center; flex: 1 1 100%; padding: 15px 8px; }
	#pricing table tbody td:nth-child(2), #pricing table tbody td:nth-child(3), #pricing table tbody td:nth-child(4) { color: #fff; }
	#pricing table tbody td > .btn {background-color: transparent;}
	#pricing table tbody td .btn {max-width: 100%; margin: 0px; padding:0px;}
	#pricing table thead th small {font-size: 12px;}
	#pricing table tbody td:nth-child(2) .display-2 {margin: 0px; font-weight: bold;}
	#pricing table tbody tr.questions td {background-color: #fff;}
	#pricing table tbody tr.questions th:first-child {display: none;}
	#pricing table thead th h3 {font-size: 24px;}
}
@media (max-width: 475px){
	#pricing table tbody td:first-child, #pricing table tbody th small, #pricing table tbody td small { font-size: 18px; }
	#pricing table tbody td, #pricing thead tr th { font-size: 14px; line-height: 1.1; }
	#pricing table tbody .table-footer td:not(:last-child){ display: none; }
}