:root {
  /* JIC colors */
  --jic-gold: #D3A66E;
  --jic-gold-light: #ECBD89;
  --jic-gold-dark: #A3703D;
  --jic-blue: #208A89;
  --jic-blue-light: #4CC3C9;
  --jic-blue-dark: #195C63;
  --jic-cyan: #4bdfec;
  --jic-green: #00ae77;
  /* JIC gradients */
  --jic-gradient-gold: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
  --jic-gradient-blue: linear-gradient(310deg, #195C63 0%, #208A89 100%);
  --jic-gradient-red: linear-gradient(310deg, #a03232 0%, #a03232 100%);
  --gradient-cyan: linear-gradient(90deg, #1e656b, #4dbbbb 100%); 
}

@font-face {
  font-family: 'NewYork';
  src: url('../fonts/NewYork.ttf') format('embedded-opentype'), /* Internet Explorer */
       url('../fonts/NewYork.ttf') format('woff2'),             /* Super Modern Browsers */
       url('../fonts/NewYork.ttf') format('woff'),              /* Pretty Modern Browsers */
       url('../fonts/NewYork.ttf') format('truetype'),          /* Safari, Android, iOS */
       url('../fonts/NewYork.ttf') format('svg');               /* Legacy iOS */
}

.jic-brand-text-color {
  font-family: NewYork !important;
  font-weight:400 !important;
  color: #D3A66E !important;
}

.jic-brand-text {
  font-family: NewYork !important;
  font-weight:400 !important;
}


.jic-navigation-icon {
  max-height: 65px;
  padding-right: 5px;
}

.jic-capitilze-text {
  text-transform: capitalize;
}

.page-header .container {
  z-index: 1;
}

.section-height-75 {
  min-height: 75vh;
}

.section-height-100 {
  min-height: 100vh;
}

svg.text-primary .color-background {
  fill: #297992;
}

.text-gradient.text-primary {
  background-image: var(--jic-gradient-blue);
}

.bg-gradient-primary {
  background-image: linear-gradient(310deg, #297992 0%, #3eadcf 100%);
}

.card.card-background.card-background-mask-primary:after {
  background-image: linear-gradient(310deg, #297992 0%, #3eadcf 100%);
  opacity: 0.85;
}

.bg-gradient-primary {
  background-image: linear-gradient(310deg, #297992 0%, #3eadcf 100%);
}

.pagination.pagination-primary .page-item.active > .page-link,
.pagination.pagination-primary .page-item.active > .page-link:focus,
.pagination.pagination-primary .page-item.active > .page-link:hover {
  background-image: linear-gradient(310deg, #7928ca 0%, #ff0080 100%);
  border: none;
}

.ipad-section {
  height: 34.375rem;
}

@media (max-width: 400px) {
  .card-icon-hidden {
    display: none;
  }
  .text-custom-center {
    text-align: center;
  }
}

@media (min-width: 401px) {
  .info-custom-horizontal {
    text-align: left !important;
  }
  .info-custom-horizontal .icon {
    float: left;
  }
  .info-custom-horizontal .description {
    overflow: hidden;
  }
  .ps-custom-5 {
    padding-left: 3rem;
  }
}

@media (min-width: 992px) and (max-width: 1400px) {
  .ms-custom-0 {
    margin-left: 0;
  }
}

@media (min-width: 1401px) {
  .ms-custom-12 {
    margin-left: 21rem;
  }
}

@media (max-width: 449px) { /*392*/
  .lead-custom {
    font-size: 0.9rem;
  }

  .mt-custom-n3 {
    margin-top: -1rem !important;
  }
}

.mt-rem-9 {
  margin-top: -9rem !important;
}

@media (max-width: 336px) { /*322*/
  .text-smaller {
    font-size: 1.4rem;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .max-w-laptop {
    max-width: 965px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
    .text-medium-small {
        font-size: 2rem;
    }
}

.nav-link-custom {
    display: block;
    padding: 0.5rem 1rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    font-weight: 400;
    font-size: 0.875rem;
    padding-top: 0;
    padding-bottom: 0.25rem;  
  }

.nav-link-custom:hover {
    opacity: 1 !important;
    transition: opacity 0.3 ease;
  }

/* Insurance service styles below */

.insurance-text {
  text-shadow: #000 2px 2px 2px;
}

.insurance {
  height: 400px;
  /* background-image: url('{{ ASSETS_ROOT }}/img/jic/insurance-bg.jpg');
     padding: 120px 150px;
    background-size: cover;
    border-top: none;
    background-repeat: no-repeat;
    */
}

.service-header {
  font-size: 8rem;
}

.clickable-card:hover {
  cursor: pointer;
  border: 1px solid rgb(121, 117, 117);
}

.bg-section-heading {
  background-color: #274371 !important;
}

.bg-gradient-custom {
  background-image: linear-gradient(310deg, #626575 0%, #35a2c4 40%);
}

.accordion-button-white {
  color: white;
}

.accordion-body-custom {
  background: lightblue;
  color: black;
}

.bg-offwhite {
  background: #f5f5f5;
}

/* Company details styyles below */

.options-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 0.5rem;
}

.button-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.profile-banner {
}

.tabs-section li {
  width: 12%;
}

.avatar-xxxl {
  width: 150px !important;
  height: 150px !important;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-image, .attachment-image {
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
}

.help-block {
  color: #a94442 !important;
}

.select-class{
  border: solid 1px #a94442 !important;

}

i:hover {
  color: rebeccapurple;
  cursor: pointer;
}

.sticky-status-bar {
  position: sticky;
  z-index: 1019;
  top: 105px;
}

@media (max-width: 989px) {
  .sticky-status-bar {
    top: 183px !important;
  } 

  .breadcrumb-sticky {
    top: 124px !important;
  }
}

@media (max-width: 767px) {
  .breadcrumb-sticky {
    top: 148px !important;
  }
}

.sidebar-z-1040 {
  z-index: 1040;
}

.bg-new-gradient {
  background-image: linear-gradient(90deg, rgba(25,99,99,1) 99%, rgba(32,138,137,1) 100%) !important;
}

.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon {
  background-image: var(--jic-gradient-gold) !important;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-image: var(--jic-gradient-gold) !important;
  border-color: var(--jic-gold-light) !important;
}

.dataTable-wrapper .dataTable-bottom .dataTable-pagination .dataTable-pagination-list .active a {
  background: transparent;
  background-image: var(--jic-gradient-gold) !important;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.07);
  color: #fff;
  border: none;
  border-radius: 50% !important;
}

.bg-gradient-jic{
  background-image: var(--jic-gradient-gold);
}

button.bg-gradient-jic, button.bg-gradient-jic:hover, button.bg-gradient-jic > i{
  color: white;
}

/* Test */

.focused {
  box-shadow: 0 0 0 2px var(--jic-blue-light) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.focused .form-control:focus {
  box-shadow: none;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: white;
  outline: 0;
  box-shadow: 0 0 0 2px var(--jic-blue-light);
}

/* Test above */

.link-primary {
  color: #3db6da;
}

.link-primary:hover, .link-primary:focus {
  color: #35a2c4;
}

.timeline:before {
  border-right: 0px solid #dee2e6;
}

.text-info {
  color: var(--jic-blue) !important;
}

.tab-active {
  background-image: var(--jic-gradient-blue) !important;
  box-shadow: 0px 1px 5px 1px #ddd;
  border-radius: 0.5rem;
  z-index: 1 !important;
  color: white !important;
}

.text-gold{
  color: var(--jic-gold) !important;
}

.text-gold-light {
  color: var(--jic-gold-light) !important;
}

.bg-jic-blue {
  background: var(--jic-blue);
}

.bg-jic-blue-light {
  background: var(--jic-blue-light);
}

.shadow-custom {
  box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.04) !important;
}

/* new classes */

.link-primary {
  color: var(--jic-gold-dark);
}

.link-primary:hover, .link-primary:focus {
  color: var(--jic-gold);
}

.navbar-main {
  background-image: var(--jic-gradient-blue);
}

.text-sm {
  font-size: 0.875rem !important;
  color: #67748e;
}

.text-md {
  font-size: 1rem !important;
  color: #67748e;
}

.navbar .sidenav-toggler-inner .sidenav-toggler-line {
  background: #ffffff;
}

.text-body {
  color: #ffffff !important;
}

.navbar .nav-link {
  color: #ffffff;
  /* font-size: 1rem; */
}

.bg-dark {
  background-color: #ffffff !important;
}

.bg-gradient-primary {
  background-image: var(--jic-gradient-gold)
}

.navbar-vertical.navbar-expand-xs.fixed-start {
  background-image: linear-gradient(310deg, #195C63 0%, #208A89 100%);
}

hr.horizontal.dark {
  background-image: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
}

.btn-primary {
  background-image: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
}

.navbar-vertical .navbar-brand .navbar-brand-img, .navbar-vertical .navbar-brand span {
  color: #ECBD89;
  font-family: -apple-system-ui-serif, ui-serif;
  font-size: 1.1rem;
  font-weight: 500 !important;
}

.navbar-vertical .navbar-nav .nav-link {
  color: #ffffff;
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
  color: #ECBD89;
}

.text-dark {
  color: #A3703D !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-image: linear-gradient(310deg, #195C63 0%, #208A89 100%);
  color: #fff;
}

.form-switch .form-check-input:checked {
  border-color: #A3703D;
  background-color: #ECBD89;
}

.badge-success {
  color: #ffffff;
  background-color: #208A89;
}

.bg-gradient-dark {
  background-image: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
}

.badge-danger {
  color: #a03232;
}

.text-success {
  color: #208A89 !important;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link.active, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link.active {
  color: #ffffff;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link {
  color: #ffffff;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link.active:before, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link.active:before {
  background: #ffffff;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link:before, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link:before {
  background: #ffffff;
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
  color: #ECBD89;
}

.form-check-input:checked[type=checkbox] {
  background-image: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
}

.btn-outline-primary {
  color: #A3703D;
  border-color: #A3703D;
}

.btn-outline-dark {
  color: #208A89;
  border-color: #208A89;
}

.btn-outline-info {
  color: #A3703D;
  border-color: #A3703D;
}

.bg-info {
  background-color: #D3A66E !important;
}


.multisteps-form__progress-btn.js-active {
  color: #208A89;
}

input[type="checkbox"] {
  accent-color: #A3703D;
}

input[type="radio"] {
  accent-color: #A3703D;
}

.bg-gradient-success {
  background-image: var(--jic-gradient-blue);
}

.text-gradient.text-success {
  background-image: linear-gradient(310deg, #195C63 0%, #4CC3C9 100%);
}

.bg-gradient-info {
  background-image: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
}

.text-gradient.text-info {
  background-image: linear-gradient(310deg, #A3703D 0%, #ECBD89 100%);
}

.fs-5 {
  color: #D3A66E;
}

/* Extra */
.bg-gradient-blue {
  background-image: var(--jic-gradient-blue);
}

nav.bg-gradient-blue {
  background-attachment: fixed;
}

button.bg-gradient-blue, button.bg-gradient-blue:hover{
  color: white;
}

a.bg-gradient-blue, a.bg-gradient-blue:hover, a.bg-gradient-blue > i {
  color: white;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--jic-gold) !important;
}
.breadcrumb-item.active {
  color: var(--jic-gold) !important;
}

h5.mb-0, .card-body h5, .card-header h5 {
  color: var(--jic-gold) !important;
}

.text-black {
  color: #636E88 !important;
  font-weight: 550 !important;
}

.bg-gradient-danger {
  background-image: var(--jic-gradient-red);
}

.is-focused .choices__inner, .is-open .choices__inner {
  box-shadow: 0 0 0 2px var(--jic-blue-light) !important;
  border-color: white;
}

.sidebar-logo{
  max-width: 100% !important;
  max-height: 9rem !important;
  transition: all 0.2s ease-in-out;
}

i.text-gold:hover {
  color: var(--jic-gold);
}

.text-green {
  color: #208A89 !important;
}

.doughnut-percentage {
    position: absolute;
    Top: 77%;
    display: block;
    width: 100%;
    text-align: center;
}

.card-header h6 {
  color: var(--jic-gold) !important;
}

.choices-sm > .choices {
  width: 80% !important;
}

.numbers > p, .more-info span, .more-info i, .icon-shape i:hover {
  color: white;
}

.input-group-text {
  z-index: 500 !important;
}

.z-index-max {
  z-index: 1040 !important;
}

.btn-outline-dark {
  color: var(--jic-gold) !important;
  border-color: var(--jic-gradient-gold) !important;
}

.btn-outline-dark.dropdown-toggle.show {
  color: white !important;
  background: var(--jic-gradient-gold) !important;
  border-color: var(--jic-gold) !important;
}

.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
  box-shadow: none !important;
}

.btn-outline-dark:hover:not(.active) {
  opacity: 1 !important;
}

a.bg-gradient-primary {
  color: white !important;
}

.text-gold-dark {
  color: var(--jic-gold-dark) !important;
}

.btn-icon-only > i:hover {
  color: inherit !important;
}

@media (max-width: 992px) { 
  .mb-xs-4 {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 352px) {
  .text-rem-8 {
    font-size: 0.8rem;
  }
}

@media (max-width: 509px) {
  .text-quote-event {
    font-size: 0.8rem;
  }
}

@media (max-width: 1200px) {
  .sidenav-mini-icon {
    display: none !important;
  }
}

@media(max-width: 520px) {
  .file-text-xxs {
    font-size: 0.65rem !important;
  }
}


@media(max-width: 389px) {
  .attachment-text-sm {
      font-size: 0.875rem !important;
  }
}

/* 
@media(max-width: 991px) {
.multisteps-form__progress-btn:before {
  left: 0% !important;
}

.multisteps-form__progress-btn:after {
  left: calc(-95% - 1.5px) !important;
}

.text-status-start {
  text-align: left !important;
}
} */

.bell-superscript {
  position: absolute;
  top: 0.5rem; 
  right: 0.4rem;
  font-size: 0.75rem; 
  color: red; 
  background-color: var(--jic-gold);
}

.bell-superscript:hover {
  color: red;
}

@media(max-width: 819px) {
  .header-btn{
    font-size: 0.65rem !important;
    padding: 0.65rem !important;
  }
}

.breadcrumb-sticky {
  position: sticky;
  top: 71px;
  z-index: 1019;
  background: #f8f9fa;
}

.navbar-text {
  color: #ECBD89;
  font-family: -apple-system-ui-serif, ui-serif;
}

.logo-minimized {
  max-height: 2.5rem !important;
  transition: all 0.2s ease-in-out;
}

.sidenav:hover .logo-minimized {
  max-width: 100% !important;
  max-height: 9rem !important;
}

.d-analytics-options {
  display: none;
}

.sidenav:hover .d-analytics-options.show {
  display: block;
}

/* Make custom tabs take full column width on small screens */
@media(max-width: 485px) {
  .tabs-section .nav.nav-pills .nav-item {
    width: 100% !important;
  }
}

.navbar input::placeholder {
  font-size: 0.7rem !important;
}

@media(max-width: 500px) {
  aside.sidenav {
    width: 50% !important;
  }

  .sidenav .nav-link-text {
    font-size: 0.75rem !important;
  }
}

.card.card-alert {
  box-shadow: 0px 0px 27px 0 rgb(206, 41, 41) !important;
}

.text-jic-blue {
  color: var(--jic-blue);
}

.text-success-green {
  color: #82d616;
}

.text-violet {
  color: #1e1f86;
}

.text-warning-dark {
  color: #c4c41a;
}

.quick-links a {
  flex-grow: 1;
  border-radius: 0.25rem;
  background-color: white;
  color: white;
  font-size: 0.8rem;
  background-image: var(--jic-gradient-blue);
  font-size: 0.8rem;
  text-align: center;
}


@media (min-width: 428px) {    
  @media (max-width: 891px) {
    .quick-links a {
      font-size: 0.65rem;
    }
  }
  
  @media (max-width: 801px) {
    .quick-links a {
      font-size: 0.55rem;
    }
  }

  @media (max-width: 711px) {
    .quick-links a {
      font-size: 0.45rem;
    }
  }
}

.quick-links a:hover{
  color: white;
  background-image: var(--jic-gradient-gold);
}

.quick-links i{
  color: inherit;
}

span.d-custom {
  display: none;
}

@media (min-width: 620px) and (max-width: 768px) {
  .quick-links span.d-custom {
    display: inline;
  }
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  #navbar-home {
    background: var(--jic-gradient-blue); /* Set solid background for mobile */
  }
}

.border-gold {
  border-color: var(--jic-gold) !important;
}

.card.card-highlight {
  box-shadow: 0px 0px 27px 0 rgb(42, 185, 128) !important;
}

.bg-violet {
  background-color: #1e1f86;
}

.bg-success-green {
  background-color: #82d616;
}

.bg-warning-dark {
  background-color: #c4c41a;
}  

.icon-flip {
  transform: scaleX(-1) !important;
}

.icon-flip:hover {
  color: inherit !important;
}

.file-icon {
  font-size: 12.5rem;
}

.w-33 {
  width: 33%;
}

a.attachment-delete > i {
  transition: transform 0.3s ease;
}

a.attachment-delete > i:hover {
  transform: scale(1.2);
}

.text-right {
  text-align: right!important;
}

.carousel-item {
 margin-right: 0;
}

.accordion-button:not(.collapsed) {
  color: #A3703D;
}

.card-discussion {
  background-color: #f6efe7 !important;
}

/* 
  QUOTE DETAIL SIDEPANEL STYLES
*/
.quote-side-panel > .card,
.salvage-side-panel > .card {
  position: fixed !important;
  right: -620px;
  top: 0;
  height: 100%;
  left: auto!important;
  transform: unset !important;
  width: 620px;
  border-radius: 0;
  padding: 0 10px;
  transition: .2s ease;
  z-index: 1040;
}

.quote-side-panel.show > .card,
.salvage-side-panel.show > .card {
  right: 0;
}

.quote-side-panel i,
.salvage-side-panel i {
  color: inherit;
}

span.custom-font-size {
  font-size: 0.92rem;
}

@media (max-width: 992px) {
  .quote-side-panel > .card,
  .salvage-side-panel > .card {
    width: 55vw;
  }

  .communications button {
    width: auto !important;
  }

  .delivery button {
    width: auto !important;
  }
}

@media (max-width: 600px) {
  .quote-side-panel > .card,
  .salvage-side-panel > .card {
    width: 100%;
  }
}

.header-container {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between !important;
}

.title-container {
  display: flex;
  flex-direction: row !important;
  justify-content: start !important;
  align-items: center !important;
  column-gap: 0.75rem !important;
  color: var(--jic-gold);
}

.quote-side-panel input,
.salvage-side-panel input {
  font-size: 0.85rem;
}

.quote-side-panel label,
.salvage-side-panel label {
  font-weight: normal;
}
.shipping-id a {
  color: var(--jic-gold-light);
  cursor: pointer;
}

.shipping-id a:hover {
  color: var(--jic-gold-dark);
}

.border-jic-blue {
  border-image: var(--jic-gradient-gold) 4 !important;
}

a.text-gold:hover {
  color: var(--jic-gold-dark);
}

i.rotate-90 {
  transform: rotate(90deg);
}

i.rotate-90:hover {
  transform: rotate(90deg) scale(1.2);
}

/* ==========================================================================
   HOME PAGE ENHANCEMENTS STYLING
   =========================================================================== */
.text-cyan {
  color: var(--jic-cyan);
}

.bg-cyan {
  background: var(--jic-cyan);
}

.border-cyan {
  border-color: var(--jic-cyan) !important;
}

.bg-black {
  background: black;
}

.ls-wide {
  letter-spacing: 0.25rem;
}

.ls-wide-sm {
  letter-spacing: 0.15rem;
}

.footer-icon {
  max-height: 70px;
  padding-right: 5px;
}

.section-2 > .nav-link {
  color: white;
}

.section-2 > .nav-link:hover, .nav-options a:hover {
  color: var(--jic-gold-light);
}

.nav-options a {
  letter-spacing: 0.15rem;
}

.section-3 a:hover {
  color: var(--jic-gold-dark) !important;
}

.bg-gradient-cyan {
  background-image: var(--gradient-cyan);
}

.p-header {
  padding-top: 10rem;
  padding-bottom: 3.5rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

@media (max-width:629px) {
  .p-header {
      text-align: center;
    }
  }

@media (min-width: 630px) and (max-width: 1024px) {
  .p-header {
    text-align: center;
  }
}

@media (max-width: 1029px) {
  div.section-2 {
    gap: 0px !important; 
  }
}

.top-image {
  height: 400px;
}

.object-cover {
  object-fit: cover;
}

.p-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.service-card {
  background-color: #e3f1e5; 
  color: #333333;
}

.service-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.w-custom {
  width: 3.6rem;
}

.bg-icon-green {
  background: var(--jic-green);
}

.accordion i.fa-plus, .accordion i.fa-times {
  color: var(--jic-blue)
}

.accordion-item {
  background: #fafbfc !important;
  border-radius: 10px !important;
  border: 1px solid #d5dae0 !important;
}

.font-jic {
  font-family: NewYork !important;
}

.overlay-wrapper {
  position: relative !important;
}

.overlay-image {
  position: absolute;
  top: 140px;
  height: 400px;
  z-index: 0;
  right: 10%;
}

@media (max-width:629px) {
.overlay-image {
    position: static;
    top: 250px;
    height: auto;
  }

  .center-image {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Style for the image (adjust as needed) */
  .center-image img {
    max-width: 100%; /* Ensure the image doesn't exceed its container */
  }

}

@media (min-width: 630px) and (max-width: 1024px) {
  .overlay-image {
    top: 400px;
  }
}

  
.bg-light-green {
  background-color: #e3f1e5; 
}

.ui-image {
  transform: translateY(-15%);
}

.services-overlay-image {
  position: absolute;
  /* top: 100%;
  right: 0;
  z-index: 0;
  max-height: 100%; */
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.grid-item-full {
  grid-column: 1 / -1; 
}


@media (min-width: 956px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}


@media (max-width: 376px) {
  p.ls-wide-sm {
    letter-spacing: normal;
  }

  p.ls-wide {
    letter-spacing: normal;
  }

}

@media (max-width: 1105px) {
  .nav-options a {
    letter-spacing: normal;
  }  
}


/* ==========================================================================
   CUSTOME CSS FOR HOME PAGE 
   =========================================================================== */

/* ===========================================================================
   01. GENERAL & BASIC STYLES
   =========================================================================== */ 

   html {
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
  } 
   
/*------------------------------------------------------------------*/
/*   IE10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/

  @-webkit-viewport { width: device-width; }
  @-moz-viewport { width: device-width; }
  @-ms-viewport { width: device-width; }
  @-o-viewport { width: device-width; }
  @viewport { width: device-width; }

  /*------------------------------------------*/
  /*  PAGE CONTENT
  /*------------------------------------------*/
  
  #page { overflow: hidden; }
  
  /*------------------------------------------*/
  /*  ONSCROLL ANIMATIONS
  /*------------------------------------------*/
  
  .animated { visibility: hidden; }
  .visible { visibility: visible; } 
  
  /*------------------------------------------*/
  /*  SPACING & INDENTS
  /*------------------------------------------*/
  
  .ind-60 { padding-right: 60px; padding-left: 60px; }
  .ind-50 { padding-right: 50px; padding-left: 50px; }
  .ind-45 { padding-right: 45px; padding-left: 45px; }
  .ind-35 { padding-right: 35px; padding-left: 35px; }
  .ind-30 { padding-right: 30px; padding-left: 30px; }
  .ind-25 { padding-right: 25px; padding-left: 25px; }
  .ind-20 { padding-right: 20px; padding-left: 20px; }
  .ind-15 { padding-right: 15px; padding-left: 15px; }
  .ind-10 { padding-right: 10px; padding-left: 10px; }
  .ind-5  { padding-right: 5px; padding-left: 5px; }
  
  .wide-160 { padding-top: 160px; padding-bottom: 160px; }
  .wide-150 { padding-top: 150px; padding-bottom: 150px; }
  .wide-140 { padding-top: 140px; padding-bottom: 140px; }
  .wide-130 { padding-top: 130px; padding-bottom: 130px; }
  .wide-120 { padding-top: 120px; padding-bottom: 120px; }
  .wide-110 { padding-top: 110px; padding-bottom: 110px; }
  .wide-100 { padding-top: 100px; padding-bottom: 100px; }
  .wide-90 { padding-top: 100px; padding-bottom: 90px; }
  .wide-80 { padding-top: 100px; padding-bottom: 80px; }
  .wide-70 { padding-top: 100px; padding-bottom: 70px; }
  .wide-60 { padding-top: 100px; padding-bottom: 60px; }
  .wide-50 { padding-top: 100px; padding-bottom: 50px; }
  .wide-40 { padding-top: 100px; padding-bottom: 40px; }
  .wide-30 { padding-top: 100px; padding-bottom: 30px; }
  
  /*------------------------------------------*/
  /*    Margin Top
  /*------------------------------------------*/
  
  .m-top-160 { margin-top: 160px; }
  .m-top-150 { margin-top: 150px; }
  .m-top-140 { margin-top: 140px; }
  .m-top-130 { margin-top: 130px; }
  .m-top-120 { margin-top: 120px; }
  .m-top-110 { margin-top: 110px; }
  .m-top-100 { margin-top: 100px; }
  .m-top-90 { margin-top: 90px; }
  .m-top-80 { margin-top: 80px; }
  .m-top-70 { margin-top: 70px; }
  .m-top-60 { margin-top: 60px; }
  .m-top-50 { margin-top: 50px; }
  .m-top-45 { margin-top: 45px; }
  .m-top-40 { margin-top: 40px; }
  .m-top-35 { margin-top: 35px; }
  .m-top-30 { margin-top: 30px; }
  .m-top-25 { margin-top: 25px; }
  .m-top-20 { margin-top: 20px; }
  .m-top-15 { margin-top: 15px; }
  .m-top-10 { margin-top: 10px; }
  .m-top-5 { margin-top: 5px; }
  
  /*------------------------------------------*/
  /*    Margin Bottom
  /*------------------------------------------*/
  
  .m-bottom-160 { margin-bottom: 160px; }
  .m-bottom-150 { margin-bottom: 150px; }
  .m-bottom-140 { margin-bottom: 140px; }
  .m-bottom-130 { margin-bottom: 130px; }
  .m-bottom-120 { margin-bottom: 120px; }
  .m-bottom-110 { margin-bottom: 110px; }
  .m-bottom-100 { margin-bottom: 100px; }
  .m-bottom-90 { margin-bottom: 90px; }
  .m-bottom-80 { margin-bottom: 80px; }
  .m-bottom-70 { margin-bottom: 70px; }
  .m-bottom-60 { margin-bottom: 60px; }
  .m-bottom-50 { margin-bottom: 50px; }
  .m-bottom-45 { margin-bottom: 45px; }
  .m-bottom-40 { margin-bottom: 40px; }
  .m-bottom-35 { margin-bottom: 35px; }
  .m-bottom-30 { margin-bottom: 30px; }
  .m-bottom-25 { margin-bottom: 25px; }
  .m-bottom-20 { margin-bottom: 20px; }
  .m-bottom-15 { margin-bottom: 15px; }
  .m-bottom-10 { margin-bottom: 10px; }
  .m-bottom-5 { margin-bottom: 5px; }
  .m-bottom-0 { margin-bottom: 0; }
  
  /*------------------------------------------*/
  /*    Margin Left
  /*------------------------------------------*/
  
  .m-left-70 { margin-left: 70px; }
  .m-left-60 { margin-left: 60px; }
  .m-left-50 { margin-left: 50px; }
  .m-left-45 { margin-left: 45px; }
  .m-left-40 { margin-left: 40px; }
  .m-left-35 { margin-left: 35px; }
  .m-left-30 { margin-left: 30px; }
  .m-left-25 { margin-left: 25px; }
  .m-left-20 { margin-left: 20px; }
  .m-left-15 { margin-left: 15px; }
  .m-left-10 { margin-left: 10px; }
  .m-left-5 { margin-left: 5px; }
  
  /*------------------------------------------*/
  /*    Margin Right
  /*------------------------------------------*/
  
  .m-right-70 { margin-right: 70px; }
  .m-right-60 { margin-right: 60px; }
  .m-right-50 { margin-right: 50px; }
  .m-right-45 { margin-right: 45px; }
  .m-right-40 { margin-right: 40px; }
  .m-right-35 { margin-right: 35px; }
  .m-right-30 { margin-right: 30px; }
  .m-right-25 { margin-right: 25px; }
  .m-right-20 { margin-right: 20px; }
  .m-right-15 { margin-right: 15px; }
  .m-right-10 { margin-right: 10px; }
  .m-right-5 { margin-right: 5px; }
  
  /*------------------------------------------*/
  /*    Padding Top
  /*------------------------------------------*/
  
  .p-top-160 { padding-top: 160px; }
  .p-top-150 { padding-top: 150px; }
  .p-top-140 { padding-top: 140px; }
  .p-top-130 { padding-top: 130px; }
  .p-top-120 { padding-top: 120px; }
  .p-top-110 { padding-top: 110px; }
  .p-top-100 { padding-top: 100px; }
  .p-top-90 { padding-top: 90px; }
  .p-top-80 { padding-top: 80px; }
  .p-top-70 { padding-top: 70px; }
  .p-top-60 { padding-top: 60px; }
  .p-top-50 { padding-top: 50px; }
  .p-top-45 { padding-top: 45px; }
  .p-top-40 { padding-top: 40px; }
  .p-top-35 { padding-top: 35px; }
  .p-top-30 { padding-top: 30px; }
  .p-top-25 { padding-top: 25px; }
  .p-top-20 { padding-top: 20px; }
  .p-top-15 { padding-top: 15px; }
  .p-top-10 { padding-top: 10px; }
  
  /*------------------------------------------*/
  /*    Padding Bottom
  /*------------------------------------------*/
  
  .p-bottom-160 { padding-bottom: 160px; }
  .p-bottom-150 { padding-bottom: 150px; }
  .p-bottom-140 { padding-bottom: 140px; }
  .p-bottom-130 { padding-bottom: 130px; }
  .p-bottom-120 { padding-bottom: 120px; }
  .p-bottom-110 { padding-bottom: 110px; }
  .p-bottom-100 { padding-bottom: 100px; }
  .p-bottom-90 { padding-bottom: 90px; }
  .p-bottom-80 { padding-bottom: 80px; }
  .p-bottom-70 { padding-bottom: 70px; }
  .p-bottom-60 { padding-bottom: 60px; }
  .p-bottom-50 { padding-bottom: 50px; }
  .p-bottom-45 { padding-bottom: 45px; }
  .p-bottom-40 { padding-bottom: 40px; }
  .p-bottom-35 { padding-bottom: 35px; }
  .p-bottom-30 { padding-bottom: 30px; }
  .p-bottom-25 { padding-bottom: 25px; }
  .p-bottom-20 { padding-bottom: 20px; }
  .p-bottom-15 { padding-bottom: 15px; }
  .p-bottom-10 { padding-bottom: 10px; }
  .p-bottom-0 { padding-bottom: 0; }
  
  /*------------------------------------------*/
  /*    Padding Left
  /*------------------------------------------*/
  
  .p-left-100 { padding-left: 100px; }
  .p-left-90 { padding-left: 90px; }
  .p-left-80 { padding-left: 80px; }
  .p-left-70 { padding-left: 70px; }
  .p-left-60 { padding-left: 60px; }
  .p-left-50 { padding-left: 50px; }
  .p-left-45 { padding-left: 45px; }
  .p-left-40 { padding-left: 40px; }
  .p-left-35 { padding-left: 35px; }
  .p-left-30 { padding-left: 30px; }
  .p-left-25 { padding-left: 25px; }
  .p-left-20 { padding-left: 20px; }
  .p-left-15 { padding-left: 15px; }
  .p-left-10 { padding-left: 10px; }
  .p-left-5 { padding-left: 5px; }
  .p-left-0 { padding-left: 0px; }
  
  /*------------------------------------------*/
  /*    Padding Right
  /*------------------------------------------*/
  
  .p-right-100 { padding-right: 100px; }
  .p-right-90 { padding-right: 90px; }
  .p-right-80 { padding-right: 80px; }
  .p-right-70 { padding-right: 70px; }
  .p-right-60 { padding-right: 60px; }
  .p-right-50 { padding-right: 50px; }
  .p-right-45 { padding-right: 45px; }
  .p-right-40 { padding-right: 40px; }
  .p-right-35 { padding-right: 35px; }
  .p-right-30 { padding-right: 30px; }
  .p-right-25 { padding-right: 25px; }
  .p-right-20 { padding-right: 20px; }
  .p-right-15 { padding-right: 15px; }
  .p-right-10 { padding-right: 10px; }
  .p-right-5 { padding-right: 5px; }
  .p-right-0 { padding-right: 0px; }
  
  /*------------------------------------------*/
  /*   BACKGROUND SETTINGS
  /*------------------------------------------*/
  
  .bg-scroll {
    width: 100%;
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
  }
  
  .bg-fixed {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
  }
  
  /*------------------------------------------*/
  /*   Background Colors for Sections
  /*------------------------------------------*/
  
  .bg-lightgrey { background-color: #f0f0f0; }
  .bg-grey { background-color: #e8e8e8 }
  .bg-red { background-color: #e35029; }
  .bg-yellow { background-color: #feca16; }
  .bg-green { background-color: #42a045; }
  .bg-blue { background-color: #242d4d; }
  .bg-lightblue { background-color: #1e88e5; }
  .bg-purple { background-color: #783bb1; }
  .bg-lightpurple { background-color: #208A89; }
  
  /*------------------------------------------*/
  /*   BORDER SETTINGS FOR DEMOS
  /*------------------------------------------*/
  
  .b-top { border-top: 1px solid #ddd; }
  .b-bottom { border-bottom: 1px solid #ddd; }
  .b-left { border-left: 1px solid #ddd; }
  .b-right { border-right: 1px solid #ddd; }
  
  
  
  
  /* ==========================================================================
     02.  TYPOGRAPHY
     =========================================================================== */  
  
  /*------------------------------------------*/
  /*  HEADERS
  /*------------------------------------------*/
  
  h1, h2, h3, h4, h5, h6 {
    color: #195C63;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.025rem;
  }
  
  /* Header H5 */
  h5.h5-xs { font-size: 1.125rem; }  /* 18px */
  h5.h5-sm { font-size: 1.1875rem; } /* 19px */
  h5.h5-md { font-size: 1.25rem; }   /* 20px */
  h5.h5-lg { font-size: 1.375rem; }  /* 22px */
  h5.h5-xl { font-size: 1.5rem; }    /* 24px */
  
  /* Header H4 */
  h4.h4-xs { font-size: 1.625rem; }  /* 26px */
  h4.h4-sm { font-size: 1.75rem; }   /* 28px */
  h4.h4-md { font-size: 1.875rem; }  /* 30px */
  h4.h4-lg { font-size: 2rem; }      /* 32px */
  h4.h4-xl { font-size: 2.125rem; }  /* 34px */
  
  /* Header H3 */
  h3.h3-xs { font-size: 2.375rem; }  /* 38px */
  h3.h3-sm { font-size: 2.5rem; }    /* 40px */
  h3.h3-md { font-size: 2.625rem; }  /* 42px */
  h3.h3-lg { font-size: 2.75rem; }   /* 44px */
  h3.h3-xl { font-size: 3rem; }      /* 48px */
  
  /* Header H2 */
  h2.h2-xs { font-size: 3.25rem; }   /* 52px */
  h2.h2-sm { font-size: 3.375rem; }  /* 54px */
  h2.h2-md { font-size: 3.5rem; }    /* 56px */
  h2.h2-lg { font-size: 3.75rem; }   /* 60px */
  h2.h2-xl { font-size: 4rem; }      /* 64px */
  
  /*------------------------------------------*/
  /*   PARAGRAPHS
  /*------------------------------------------*/
  p.p-xxs { font-size: 0.75rem; }    /* 12px */
  p.p-xs { font-size: 0.85rem; }     /* 13.6px */
  p.p-sm { font-size: 0.95rem; }     /* 15.2px */
  p { font-size: 1rem; }             /* 16px */
  p.p-md { font-size: 1.125rem; }    /* 18px */
  p.p-lg { font-size: 1.25rem; }     /* 20px */
  p.p-xl { font-size: 1.3175rem; }   /* 22px */
  
  /*------------------------------------------*/
  /*   LISTS
  /*------------------------------------------*/
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  /*------------------------------------------*/
  /*   LINK SETTINGS
  /*------------------------------------------*/
  
  a {
    color: #333;
    text-decoration: none;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  a:hover {
    color: #666;
    text-decoration: none;
  }
  
  a:focus {
    outline: none;
    text-decoration: none;
  }
  
  /*------------------------------------------*/
  /*   BUTTON SETTINGS
  /*------------------------------------------*/
  
    .btn-white:before,
  .btn-tra-black:before {  
    background-color: rgba(0, 0, 0, 0.75);
  }
  
  /*------------------------------------------*/
  /*   Button Color
  /*------------------------------------------*/
  
  .btn-black {
    color: #fff;
    background-color: #333;
    border-color: #333;
  }
  
  .btn-white {
    color: #333;
    background-color: #fff;
    border-color: #fff;
  }
  
  .btn-tra-white {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
  }
  
  .btn-tra-black {
    color: #333;
    background-color: transparent;
    border-color: #333;
  }
  
  .btn-yellow {
    color: #333;
    background-color: #feca16;
    border-color: #feca16;
  }
  
  .white-color .btn-yellow {
    color: #333;
  }
  
  .btn-lightblue {
    color: #fff;
    background-color: #42a5f5;
    border-color: #42a5f5;
  }
  
  .btn-green {
    color: #fff;
    background-color: #56a959;
    border-color: #56a959;
  }
  
  .btn-lightgreen {
    color: #fff;
    background-image: var(--jic-gradient-blue);
  }
  
  .btn-purple {
    color: #fff;
    background-color: #513c97;
    border-color: #513c97;
  }
  
  .btn-lightpurple {
    color: #fff;
    background-color: #715fef;
    border-color: #715fef;
  }
  
  .btn-teal {
    color: #fff;
    background-color: #2c95ce;
    border-color: #2c95ce;
  }
  
  /*------------------------------------------*/
  /*   Button Hover
  /*------------------------------------------*/
  
  .btn:hover {
    color: #fff;
  }
  
  .btn-tra-yellow:hover,
  .btn-yellow:hover {
    color: #333;
  }
  
  .btn-white:hover {
    border-color: #444;
  }
  
  .btn:hover::before {
    left: 0;
    right: 0;
    opacity: 1;
    -webkit-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    transition: 0.5s all ease;
  }
  
  /*------------------------------------------*/
  /*   Button Focus
  /*------------------------------------------*/
  
  .btn:focus {
    color: #fff; 
    -webkit-box-shadow: none;
    box-shadow: none; 
  }
  
  /*------------------------------------------*/
  /*    STORE BAGE ICONS
  /*------------------------------------------*/
  
  a.store {
    margin-right: 15px;
  }
  
  .btn:last-child, 
  a.store:last-child {
    margin-right: 0;
  } 
  
  /*------------------------------------------*/
  /*   Video Link
  /*------------------------------------------*/
  
  .modal-video {
    display: inline-block;
    vertical-align: middle;
    line-height: 2.15rem;
  }
  
  .modal-video a span {
    font-size: 2.15rem;
    line-height: 2.15rem;
    margin-right: 4px;
    vertical-align: middle;
  }
  
  .modal-video a {
    font-size: 1.05rem;
    line-height: 2.15rem;
    font-weight: 400;
  }
  
  /*------------------------------------------*/
  /*   Video Popup Icon
  /*------------------------------------------*/
  
  .play-icon-green {
    width: 120px;
    height: 120px;
    background: url(../img/home/play-icon-green.png);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px; 
    opacity: .85;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .play-icon-green:hover {
    opacity: 1;
  }
  
  /*------------------------------------------*/
  /*  BOX ICONS
  /*------------------------------------------*/
  
  .box-icon span { font-size: 4rem; }
  .box-icon-xs span { font-size: 3rem; }
  .box-icon-sm span { font-size: 3.5rem; }
  .box-icon-md span { font-size: 4.5rem; }
  .box-icon-lg span { font-size: 5rem; }
  .box-icon-xl span { font-size: 5.5rem; }
  
  /*------------------------------------------*/
  /*   BOX ICON COLOR
  /*------------------------------------------*/
  
  .grey-icon span {   
    color: #757575;
  }
  
  .red-icon span {   
    background: -webkit-gradient(linear, left top, left bottom, from(#ee041a), to(#ff8212));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .green-icon span {   
    background: -webkit-gradient(linear, left top, left bottom, from(#195C63), to(#208A89));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .blue-icon span {   
    background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#37a7fc));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .skyblue-icon span {   
    color: #42a5f5;
  }
  
  .purple-icon span {   
    background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#f402b8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /*------------------------------------------*/
  /*    QUOTE
  /*------------------------------------------*/ 
  
  .quote p {
    color: #666;
    font-style: italic;
    border-left: 3px solid #6bbb28;
    padding-left: 20px;
    margin-top: 25px;
    margin-bottom: 20px;
  }
  
  /*------------------------------------------*/
  /*    Quote Avatar 
  /*------------------------------------------*/ 
  
  .quote-avatar {
    display: inline-block;
    margin: 0 auto; 
  }
  
  .quote-avatar img {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  .quote-author {
    display: inline-block;
    padding: 0 0 0 15px;
    text-align: left;
    position: relative;
    top: 10px;
  }  
  
  /*------------------------------------------*/
  /*    Quote Avatar 
  /*------------------------------------------*/ 
     
  .quote-author h5 {
    margin-bottom: 0;
  }
  
  .quote-author span {
    font-size: 1rem; 
    font-weight: 300;
    display: block;
  }
  
  /*------------------------------------------*/
  /*   APP DEVICES
  /*------------------------------------------*/  
  
  .app-devices {
    padding: 15px 0 0 5px;
  }
  
  /*------------------------------------------*/
  /*   App Devices Icons
  /*------------------------------------------*/  
  
  .app-devices .svg-inline--fa {
    color: rgba(50, 50, 50, 0.3);
    font-size: 2.6rem;
    line-height: 1!important; 
    float: left;
    margin-right: 0.65rem;  
  }
  
  .bg-green .app-devices .svg-inline--fa,
  .bg-lightpurple .app-devices .svg-inline--fa,
  .bg-lightblue .app-devices .svg-inline--fa {
    color: rgba(240, 240, 240, 0.5);
  }
  
  .app-devices .svg-inline--fa.f-tablet {
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    transform: rotate(90deg); 
  }
  
  .app-devices .svg-inline--fa.f-phone {
    margin-right: 1.25rem;
  }
  
  .app-devices-desc p {
    font-style: italic;
    line-height: 1.25;
    padding-right: 20%;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*   BOX LIST
  /*------------------------------------------*/ 
  
  .box-list-icon {
    font-size: 0.9rem;
    line-height: 1.5rem;
    float: left;
    margin-right: 10px;
  }
  
  .box-list p {
    overflow: hidden;
    margin-bottom: 8px;
  }
  
  /*------------------------------------------*/
  /*   SECTION TITLE
  /*------------------------------------------*/
  
  .section-title {
    position: relative;
    text-align: center;
    margin-bottom: 60px;     
  }
  
  .section-title h2 {
    letter-spacing: -1.5px;
  }
  
  .section-title p {
    font-size: 1.3125rem;    /* 21px */
    padding: 0 15%;
  }
  
  #content-7 .section-title p,
  #content-8 .section-title p {
    margin-top: 20px;
    padding: 0 5%;
  }
  
  #content-8 .section-title {
    margin-bottom: 20px;
  }
  
  /*------------------------------------------*/
  /*   TEXT WEIGHT
  /*------------------------------------------*/
  
  .txt-300 { font-weight: 300; }
  .txt-400 { font-weight: 400; }
  .txt-500 { font-weight: 500; }
  .txt-600 { font-weight: 600; }
  .txt-700 { font-weight: 700; }
  .txt-800 { font-weight: 800; }
  .txt-900 { font-weight: 900; }
  
  .txt-upper { text-transform: uppercase; }
  
  /*------------------------------------------*/
  /*   TEXT SETTINGS FOR DEMOS
  /*------------------------------------------*/
   
  .white-color,
  .white-color h2, 
  .white-color h3, 
  .white-color h4, 
  .white-color h5, 
  .white-color h6, 
  .white-color p, 
  .white-color a, 
  .white-color li,
  .white-color i, 
  .white-color span { color: #fff; }
  
  .grey-color,
  .grey-color h2, 
  .grey-color h3, 
  .grey-color h4, 
  .grey-color h5, 
  .grey-color h6, 
  .grey-color p, 
  .grey-color a,
  .grey-color li, 
  .grey-color span  { color: #666; }
  
  .lightgrey-color,
  .lightgrey-color h2, 
  .lightgrey-color h3, 
  .lightgrey-color h4, 
  .lightgrey-color h5, 
  .lightgrey-color p, 
  .lightgrey-color a,
  .lightgrey-color li, 
  .lightgrey-color span  { color: #ccc; }
  
  .yellow-color,
  .yellow-color h2, 
  .yellow-color h3, 
  .yellow-color h4, 
  .yellow-color h5, 
  .yellow-color h6, 
  .yellow-color p, 
  .yellow-color a, 
  .yellow-color li,
  .yellow-color i, 
  .yellow-color span { color: #f4c744; }
  
  .green-color,
  .green-color h2, 
  .green-color h3, 
  .green-color h4, 
  .green-color h5, 
  .green-color h6, 
  .green-color p, 
  .green-color a, 
  .green-color li,
  .green-color i, 
  .green-color span { color: #42a045; }
  
  .blue-color,
  .blue-color h2, 
  .blue-color h3, 
  .blue-color h4, 
  .blue-color h5, 
  .blue-color h6, 
  .blue-color p, 
  .blue-color a, 
  .blue-color li,
  .blue-color i, 
  .blue-color span { color: #01b7de; }
  
  .red-color,
  .red-color h2, 
  .red-color h3, 
  .red-color h4, 
  .red-color h5, 
  .red-color h6, 
  .red-color p, 
  .red-color a, 
  .red-color li,
  .red-color i, 
  .red-color span { color:  #e35029; }
  
  

/* ==========================================================================
   03.  PRELOAD SPINNER
   =========================================================================== */

   #loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fff;
  }
  
  #loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
  }
  
  .cssload-flex-container li {
    height: 100px;
    width: 100px;
    position: relative;
    text-align: center;
  }
  
  .cssload-loading {
    display: inline-block;
    position: relative;
    width: 83px;
    height: 83px;
    border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border: 5px solid transparent;
    border-bottom: 5px solid rgb(40,40,40);
    border-left: 5px solid rgb(40,40,40);
    animation: cssload-spinR 2.3s linear infinite;
    -o-animation: cssload-spinR 2.3s linear infinite;
    -ms-animation: cssload-spinR 2.3s linear infinite;
    -webkit-animation: cssload-spinR 2.3s linear infinite;
    -moz-animation: cssload-spinR 2.3s linear infinite;
  }
  
  .cssload-loading:before, .cssload-loading:after {
    content: '';
    display: block;
    border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
  }
  
  .cssload-loading:before {
    height: 49px;
    width: 49px;
    border: 3px solid transparent;
    border-top: 3px solid rgb(40,40,40);
    border-right: 3px solid rgb(40,40,40);
    animation: cssload-spinL 0.86s linear infinite;
    -o-animation: cssload-spinL 0.86s linear infinite;
    -ms-animation: cssload-spinL 0.86s linear infinite;
    -webkit-animation: cssload-spinL 0.86s linear infinite;
    -moz-animation: cssload-spinL 0.86s linear infinite;
    transform-origin: center center;
    -o-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    top: 11%;
    left: 11%;
  }
  .cssload-loading:after {
    height: 10px;
    width: 10px;
    background: transparent;
    border: 2px solid rgb(40,40,40);
    top: 35.5%;
    left: 35.5%;
  }
  
  @keyframes cssload-spinR {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @-o-keyframes cssload-spinR {
    from {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(360deg);
    }
  }
  
  @-ms-keyframes cssload-spinR {
    from {
      -ms-transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes cssload-spinR {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes cssload-spinR {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }
  
  @keyframes cssload-spinL {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
  
  @-o-keyframes cssload-spinL {
    from {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(-360deg);
    }
  }
  
  @-ms-keyframes cssload-spinL {
    from {
      -ms-transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(-360deg);
    }
  }
  
  @-webkit-keyframes cssload-spinL {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(-360deg);
    }
  }
  
  @-moz-keyframes cssload-spinL {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(-360deg);
    }
  }
    
  
  /* ==========================================================================
     04.  HERO 
     =========================================================================== */
  
  .hero-section .container {
    position: relative;
    z-index: 10;
  }
  
  #hero-home {  
    background:  url(../img/home/jic-background-header.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  @media screen and (max-width: 768px) {
    #hero-home {  
      background: url(../img/home/jic-background-header-mobile.jpg), var(--jic-gradient-blue) no-repeat center center fixed;
      background-size: cover;
      background-blend-mode: soft-light;
    }
  }
  
  #hero-about-us { 
    background: url(../img/home/jic-team.jpg), var(--jic-gradient-blue) no-repeat center center fixed;
    background-size: cover;
    background-blend-mode: soft-light;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #hero-services { 
    background: url(../img/home/jic-services.jpg), var(--jic-gradient-blue) no-repeat center center fixed;
    background-size: cover;
    background-blend-mode: soft-light;
    display: flex;
    align-items: center;
    justify-content: center;    
  }

  #hero-why-us { 
    background: url(../img/home/jic-why-us.jpg), var(--jic-gradient-blue) no-repeat center center fixed;
    background-size: cover;
    background-blend-mode: soft-light;
    display: flex;
    align-items: center;
    justify-content: center;    
  }

  #hero-faq { 
    background: url(../img/home/jic-faq.jpg), var(--jic-gradient-blue) no-repeat center center fixed;
    background-size: cover;
    background-blend-mode: soft-light;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #hero-shipping {
    background: url('../img/home/shipping-instructions.png') no-repeat center top, var(--jic-gradient-blue);
    background-size: contain;
    background-blend-mode: soft-light;
    display: flex;
    align-items: center;
    justify-content: center;
  }



  #hero-7 {  
    background:  var(--jic-gradient-blue), url(../img/home/jic-background-header.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
    background-blend-mode: hard-light;
  }

  #hero-8 { 
    background-image: url(../img/home/jic-hero-service-bg-4.jpg);
    background-position: bottom center;
    padding-top: 150px;
    padding-bottom: 100px;
  }
  
  #hero-9 { 
    background-image: url(../img/home/jic-hero-faq.jpg);
    background-position: bottom center;
    padding-top: 800px;
    padding-bottom: 100px;    
  }

  #hero-10 { 
    background: url(../img/home/jic-team.jpg), var(--jic-gradient-blue) no-repeat center center fixed;
    background-size: cover;
    background-blend-mode: soft-light;
  }

  /*------------------------------------------*/
  /*   HERO SPACING & ALIGNMENT
  /*------------------------------------------*/
  
  .hero-row-200 {
    padding-top: 220px;
    padding-bottom: 180px;
  }
  
  .hero-row-180 {
    padding-top: 200px;
    padding-bottom: 160px;
  }
  
  .hero-row-160 {
    padding-top: 180px;
    padding-bottom: 140px;
  }
  
  .hero-row-140 {
    padding-top: 160px;
    padding-bottom: 140px;
  }
  
  .hero-row-120 {
    padding-top: 150px;
    padding-bottom: 120px;
  }
  
  .hero-row-100 {
    padding-top: 130px;
    padding-bottom: 100px;
  }
  
  /*------------------------------------------*/
  /*  HERO APP LOGO
  /*------------------------------------------*/ 
  
  .hero-app-logo {
    margin-bottom: 25px;
  }
  
  #hero-4 .hero-app-logo {
    margin-bottom: 30px;
  }
  
  #hero-8 .hero-app-logo {
    margin-bottom: 40px;
  }
  
  /*------------------------------------------*/
  /*  HERO APP BIG TITLE
  /*------------------------------------------*/ 
  
  .hero-app-logo span {
    font-size: 4.25rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -3px;
    padding-left: 20px;
  }
  
  /*------------------------------------------*/
  /*  HERO TEXT
  /*------------------------------------------*/  
  
  #hero-1 .hero-txt {
    margin-top: 120px;
  }
  
  #hero-9-content {
    padding-top: 180px;
    padding-bottom: 380px;
  }
  
  /*------------------------------------------*/
  /*   Hero Headers
  /*------------------------------------------*/ 
  
  .hero-section h4,
  .hero-section h3,
  .hero-section h2 { 
    margin-bottom: 20px;
  }
  
  #hero-1.hero-section h2 { 
    margin-bottom: 25px;
  }
  
  #hero-10.hero-section h2 { 
    margin-bottom: 35px;
  }
  
  .hero-section h4 span,
  .hero-section h3 span,
  .hero-section h2 span { 
    font-weight: 700;
  }
  
  /*------------------------------------------*/
  /*   Hero Paragraph
  /*------------------------------------------*/ 
  
  #hero-1 .hero-txt p,
  #hero-11 .hero-txt p { 
    padding-right: 5%;
  }
  
  #hero-5 .hero-txt p { 
    padding-right: 15%;
  }
  
  #hero-8 .hero-txt p { 
    padding-bottom: 30px;
  }
  
  #hero-9 .hero-txt p { 
    padding: 0 10%;
    margin-bottom: 30px;
  }
  
  #hero-12 .hero-txt p { 
    padding-bottom: 10px;
  }
  
  /*------------------------------------------*/
  /*    HERO LINKS 
  /*------------------------------------------*/
  
  .hero-links {
    margin-top: 10px;
  }
  
  .hero-links span {
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 25px;
  }
  
  .hero-links span:last-child {
    margin-right: 0
  }
  
  .hero-links span a {
    text-decoration: underline;
  }
  
  .hero-links span a:hover {
    color: #444;
  }
  
  /*------------------------------------------*/
  /*    HERO BUTTONS
  /*------------------------------------------*/
  
  #hero-4 .btn {
    margin-top: 25px;
    margin-bottom: 50px;
  }
  
  /*------------------------------------------*/
  /*    HERO STORE BADGES
  /*------------------------------------------*/
  
  .hero-stores-badge {
    margin-top: 40px;
  }
  
  #hero-12 .hero-stores-badge {
    margin-top: 30px;
  }
  
  .hero-stores-badge p {
    font-weight: 500;
    margin-bottom: : 10px;
  }
  
  .hero-stores-badge span {
    display: block;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1; 
    margin-top: 20px; 
  }
  
  /*------------------------------------------*/
  /*    HERO BOX
  /*------------------------------------------*/
  
  .hero-boxes {
    margin-top: 70px;
  }
  
  .hbox {
    width: 20%;
    display: inline-block;
    float: left;
    text-align: center;
  }
  
  .hbox span {
    display: block;
    margin-bottom: 14px;
  }
  
  /*------------------------------------------*/
  /*   HERO IMAGE
  /*------------------------------------------*/
  
  .hero-img {
    text-align: center;
  }
  
  .hero-3-img { 
    background-image: url(../img/home/hero-3-img.png);
    background-repeat: no-repeat;
    background-position: left bottom;   
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 2%;
    width: 50%;
    left: 50%;
  }
  
  .hero-9-image img {
    margin-top: -320px;
  }
  
  .hero-11-img { 
    background-image: url(../img/home/hero-11-img.jpg);
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: 60%;
  }
  
  /*------------------------------------------*/
  /*    HERO NEWSLETTER FORM
  /*------------------------------------------*/
  
  #hero-2 .newsletter-form {
    margin-top: 40px;
    margin-right: 10%;
  }
  
  /*------------------------------------------*/
  /*    Newsletter Form Input
  /*------------------------------------------*/
  
  #hero-2 .newsletter-form .form-control {
    height: 54px;
    background-color: #fff;
    border: 1px solid #eee;
    border-right: none;
    color: #222;
    font-size: 1.05rem;
    font-weight: 400;
    padding: 0 1.4rem;
    box-shadow: none;
    -webkit-border-radius: 20px 0 0 20px;
    -moz-border-radius: 20px 0 0 20px;
    -o-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;   
  }
  
  #hero-2 .newsletter-form .form-control:focus {
    border: 1px solid #eee;
    border-right: none;
    outline: 0;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*    Newsletter Form Placeholder
  /*------------------------------------------*/
  
  #hero-2 .newsletter-form .form-control::-moz-placeholder { color: #999; } 
  #hero-2 .newsletter-form .form-control:-ms-input-placeholder { color: #999; }
  #hero-2 .newsletter-form .form-control::-webkit-input-placeholder { color: #999; }
  
  /*------------------------------------------*/
  /*    Newsletter Form Button
  /*------------------------------------------*/
  
  #hero-2 .newsletter-form .btn {
    width: 100%; 
    height: 54px;
    background-color: #fff;
    border-color: #fff;
    color: #f4c744;
    font-size: 1.25rem;
    margin-top: 0;
    padding: 0 1.4rem;
    -webkit-border-radius: 0 20px  20px 0;
    -moz-border-radius: 0 20px  20px 0;
    -o-border-radius: 0 20px  20px 0;
    border-radius: 0 20px  20px 0;
  }
  
  #hero-2 .newsletter-form .btn:hover {
    color: #444;
  }
  
  
  
  
  /* ==========================================================================
     05.  FEATURES
     =========================================================================== */
  
  #features-4 .bg-inner {
    background-image: url(../img/home/tra-bg-1.png);
    background-position: center center;  
    position: relative;
    z-index: 1;
  }
  
  #features-5 {
    position: relative;
    z-index: 1;
    padding-top: 120px;
    padding-bottom: 90px;
    margin-bottom: 50px;
    margin-top: 50px;
  }
  
  .features-6-content {
    position: relative;
    z-index: 1;
  }
  
  /*------------------------------------------*/
  /*   FEATURES TEXT
  /*------------------------------------------*/
  
  #features-2 .col-md-6 {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  /*------------------------------------------*/
  /*   FEATURE BOX
  /*------------------------------------------*/
  
  .fbox-1 {
    text-align: center;
    margin-bottom: 40px;
  } 
  
  .fbox-2 {
    background-color: #fff; 
    text-align: center;
    padding: 50px 30px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
  } 
  
  .fbox-3 {
    position: relative;
    text-align: center;
    background-color: #fff;   
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 50px 30px;
    margin-bottom: 30px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;  
  }
  
  .fbox-3 .box-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    opacity: 0; 
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .fbox-3 span { 
    color: #555;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .fbox-3:hover {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  
  .fbox-3:hover h5 {
    color: #222;
  }
  
  .fbox-3.rose-hover:hover { border-top: 1px solid #f402b8; }
  .fbox-3.rose-hover:hover .box-line { background-color: #f402b8; opacity: 1; }
  .fbox-3.rose-hover:hover > span { color: #f402b8; }
  
  .fbox-3.red-hover:hover { border-top: 1px solid #ee041a; }
  .fbox-3.red-hover:hover .box-line { background-color: #ee041a; opacity: 1; }
  .fbox-3.red-hover:hover > span { color: #ee041a; }
  
  .fbox-3.orange-hover:hover { border-top: 1px solid #ff8212; }
  .fbox-3.orange-hover:hover .box-line { background-color: #ff8212; opacity: 1; }
  .fbox-3.orange-hover:hover > span { color: #ff8212; }
  
  .fbox-3.green-hover:hover { border-top: 1px solid #D3A66E; }
  .fbox-3.green-hover:hover .box-line { background-color: #D3A66E; opacity: 1; }
  .fbox-3.green-hover:hover > span { color: #D3A66E; } 
  
  .fbox-3.blue-hover:hover { border-top: 1px solid #1d07f4; }
  .fbox-3.blue-hover:hover .box-line { background-color: #1d07f4; opacity: 1; }
  .fbox-3.blue-hover:hover > span { color: #1d07f4; }
  
  .fbox-3.skyblue-hover:hover { border-top: 1px solid #01b7de; }
  .fbox-3.skyblue-hover:hover .box-line { background-color: #01b7de; opacity: 1; }
  .fbox-3.skyblue-hover:hover > span { color: #01b7de; }
  
  .fbox-3.purple-hover:hover { border-top: 1px solid #783bb1; }
  .fbox-3.purple-hover:hover .box-line { background-color: #783bb1; opacity: 1; }
  .fbox-3.purple-hover:hover > span { color: #783bb1; }
  
  .fbox-5 {
    margin-bottom: 30px;
  } 
  
  .fbox-6 {
    margin-bottom: 40px;
  } 
  
  /*------------------------------------------*/
  /*   FEATURE BOX TYPOGRAPHY
  /*------------------------------------------*/
  
  .fbox-5-txt, .fbox-6-txt {
    overflow: hidden;
    padding-left: 20px;
  }
  
  .fbox-1 h5, .fbox-2 h5, .fbox-3 h5 {
    margin-top: 15px;
    margin-bottom: 10px;  
  }
  
  .fbox-4 h5 {
    margin-top: 8px;
    margin-bottom: 8px;  
  }
  
  .fbox-3 h5 {
    color: #757575;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .fbox-1 p, .fbox-2 p, .fbox-3 p, 
  .fbox-4 p, .fbox-5 p, .fbox-6 p {
    line-height: 1.5;
    margin-bottom: 0;
  } 
  
  .fbox-1 p {
    padding: 0 5%;
  }
  
  /*------------------------------------------*/
  /*   FEATURE BOX ICON
  /*------------------------------------------*/
  
  .fbox-5 span, .fbox-6 span {   
    width: 65px;
    height: 65px;
    text-align: center;
    float: left;
  }
  
  /*------------------------------------------*/
  /*   FEATURES IMAGE
  /*------------------------------------------*/
  
  .fbox-4-img {
    margin-top: -60px;
    margin-bottom: -60px;
    position: relative;
    z-index: 999;
    position: relative;
  }
  
  .features-5-img,
  .features-6-img { 
    background-image: url(../img/home/features-5-img.png);
    background-repeat: no-repeat;
    background-position: left center;   
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    left: 50%;
  }
  
  .features-6-img { 
    background-image: url(../img/home/features-6-img.png);
  }
  
  
  
  
  /* ==========================================================================
     05.  CONTENT
     =========================================================================== */
  
   #content-1 {
    background-image: url(../img/home/tra-waves.png); 
    background-position: center bottom;
  }
  
  #content-5 .bg-inner {
    position: relative;
    z-index: 1;
  }
  
  .content-7-image {
    background-image: url(../img/home/content-7.png);
    background-position: bottom bottom; 
    padding-bottom: 60px;
  }
  
  #content-7 .content-img {
    margin-top: -80px;
    margin-bottom: 50px;
  }

  .content-process-image {
    background-image: url(../img/home/jic-process.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 800px;
  }

  
  /*------------------------------------------*/
  /*   CONTENT SECTION TITLE 
  /*------------------------------------------*/
  
  #content-7 .section-title {
    margin-bottom: 120px;
  }
  
  /*------------------------------------------*/
  /*   CONTENT TEXT
  /*------------------------------------------*/ 
  
  .content-txt { 
    margin-bottom: 40px; 
  }
  
  .cbox-1-txt {
    overflow: hidden;
    margin-left: 85px;
  }
  
  /*------------------------------------------*/
  /*   CONTENT TEXT TYPOGRAPHY
  /*------------------------------------------*/
  
  .content-txt h2.h2-xs {
    margin-bottom: 25px;
  }
  
  .content-txt h5.h5-md {
    margin-top: 25px;
    margin-bottom: 10px;
  }
  
  .content-txt .cbox-1 h5.h5-md {
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 12px;
  }
  
  .content-txt .btn {
    margin-top: 20px;
  }
  
  /*------------------------------------------*/
  /*   CONTENT BOX ICON
  /*------------------------------------------*/ 
  
  .cbox-1 {
    margin-bottom: 20px;
  }
  
  .cbox-1 span {
    width: 70px;
    height: 70px;
    text-align: center;
    float: left;
  }
  
  /*------------------------------------------*/
  /*   CONTENT IMAGE
  /*------------------------------------------*/ 
  
  .content-img {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .content-5-img {
    text-align: center;
    margin-bottom: -80px;
    position: relative;
    z-index: 999;
    position: relative;
  }
  
  /*------------------------------------------*/
  /*   CONTENT TABS
  /*------------------------------------------*/ 
  
  #pills-tab {
    margin: 0 auto 80px;
  }
  
  .nav-pills .nav-link.active, 
  .nav-pills .show > .nav-link {
    background-color: #e35029;
    border-color: #e35029;
    color: #fff;
    box-shadow: 0 0 3px rgba(10, 10, 10, 0.05); 
  }
  
  .nav-pills.yellow-navi .nav-link.active {
    background-color: #feca16;
    border-color: #feca16;
    color: #333;
  }
  
  .nav-pills.green-navi .nav-link.active {
    background-color: #41bf2b;
    border-color: #41bf2b;
  }
  
  .nav-pills.blue-navi .nav-link.active {
    background-color: #42a5f5;
    border-color: #42a5f5;
  }
  
  .nav-pills .nav-link {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #999;
    font-size: 1rem;
    padding: 10px 30px;
    margin-right: 10px;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  
  
  
  /* ==========================================================================
     06.  STATISTIC
     =========================================================================== */
  
  #statistic-1 {
    background-image: url(../img/home/tra-bg-2.png);
  }
  
  /*------------------------------------------*/
  /*    STATISTIC BLOCK
  /*------------------------------------------*/
  
  .statistic-block {
    text-align: center;
    margin-bottom: 30px;
  }
  
  #statistic-2 .statistic-block {
    padding: 40px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*    Statistic Block Number
  /*------------------------------------------*/
  
  .statistic-number {
    font-size: 4.25rem;
    line-height: 1; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #D3A66E;
  }
  
  #statistic-2 .statistic-number {
    font-size: 4rem;
    letter-spacing: -0.5px;
    margin-top: 12px;
    margin-bottom: 6px;
  }
  
  /*------------------------------------------*/
  /*    Statistic Text
  /*------------------------------------------*/
  
  .statistic-txt {
    margin-top: 10px;
  }
  
  .statistic-txt p {
    padding: 0 2%;
    margin-bottom: 0;
  }
  
  #statistic-2 .b-bottom { border-bottom: 1px solid #ccc; }
  #statistic-2 .b-right { border-right: 1px solid #ccc; }
  
  
  
  
  /* ==========================================================================
     07.  VIDEO
     =========================================================================== */
  
  #video-1 {  
    background-image: url(../img/home/tra-bg-1.png);
  }
  
  #video-3 {  
    background-image: url(../img/home/tra-bg-2.png);
    padding-top: 100px; 
    padding-bottom: 150px;
  }
  
  #video-4 {  
    padding-top: 150px; 
    padding-bottom: 100px;
  }
  
  .video-inner-bg { 
    background-color: rgba(255, 255, 255, .6);
    position: relative;
    z-index: 1;
    margin-right: 40px;
    margin-left: 40px;
  }
  
  #video-4 .video-inner-bg { 
    margin-right: 30px;
    margin-left: 30px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  #video-3 .section-title { 
    margin-bottom: 6.25rem;
  }
  
  /*------------------------------------------*/
  /*   VIDEO CONTENT
  /*------------------------------------------*/
  
  .video-content {
    background-color: #fff;
    padding: 100px 80px;
    position: relative;
    z-index: 999;
    margin-top: -50px;
    margin-bottom: -50px;
  }
  
  #video-4 .video-content {
    background-color: transparent;
    padding: 0;
    margin: -50px 70px;
  }
  
  /*------------------------------------------*/
  /*   VIDEO TYPOGRAPHY
  /*------------------------------------------*/
  
  #video-2 h2 {
    margin-bottom: 25px;
  }
  
  #video-3 h4 {
    margin-bottom: 25px;
  }
  
  #video-1 p {  
    padding: 0 5%;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  
  .video-section .btn {  
    margin-top: 20px;
  }
  
  /*------------------------------------------*/
  /*   VIDEO PREVIEW
  /*------------------------------------------*/
  
  .video-preview {
    text-align: center;
  }
  
  #video-1 .video-preview {
    position: relative;
    margin-top: 60px;
  }

 .jic-video {
  margin-top: 10px;
  padding: 10px;
  background: #d4a76e;
  border-radius: 20px;
  overflow: hidden;
  border: 4px solid #000;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .jic-video {
      width: 100%; /* Adjust as needed */
  }
  
  .jic-video iframe {
      width: 100%;
  }
}

  
  
  
  /* ===================================================================================
     08.  SCREENSHOTS
     =================================================================================== */  
  
  #screens-1 {
    background-image: url(../img/home/tra-bg-2.png);
    padding-top: 100px;
    padding-bottom: 150px;
  }
  
  /*------------------------------------------*/
  /*   SCREENSHOTS CAROUSEL
  /*------------------------------------------*/ 
  
  .screenshots-wrap {
    position: relative;
    margin-bottom: 100px;
  }
  
  #screens-1 .screenshots-wrap {
      margin-top: 78px;
  }
  
  .slick-slide {
    width: 298px;
  }
  
  .carousel-item {
    opacity: 0.25;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  #screens-2 .carousel-item {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }
  
  .carousel-item.slick-current {
      opacity: 1;
  }
  
  #screens-2 .carousel-item.slick-current {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  /*------------------------------------------*/
  /*   IPHONE FRAME
  /*------------------------------------------*/  
  
  .iphone-frame {
    position: absolute;
    top: -79px;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  
  .iphone-frame img {
    max-width: 350px;
    margin: 0 auto;
    display: block;
  }
  
  .ipad-frame {
    position: absolute;
    top: -59px;
    width: 100%;
    height: 100%;
    z-index: 2;
  }  

  .ipad-frame img {
    max-width: 950px;
    margin: 0 auto;
    display: block;
  }  
  /*------------------------------------------*/
  /*   Screens Slick Carousel Dots
  /*------------------------------------------*/
  
  .screens-section .slick-dots {
    position: absolute;
    z-index: 4;
    bottom: -150px;
  }
  
  #screens-2.screens-section .slick-dots {
    bottom: -100px;
  }
  
  .screens-section .slick-dots li {
    margin: 0 2px;
    width: 15px;
    height: 15px;
  }
  
  .screens-section .slick-dots li button:before,
  .screens-section.bg-lightgrey .slick-dots li button:before {
    content: "";
    background: #aaa;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 1;
    width: 8px;
    height: 8px;
    left: auto;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
  }
  
  .no-bg.screens-section .slick-dots li button:before,
  .no-bg.screens-section.bg-lightgrey .slick-dots li button:before {
    background: #ccc;
  }
  
  .bg-green.screens-section .slick-dots li button:before,
  .bg-purple.screens-section .slick-dots li button:before,
  .bg-green.screens-section.bg-lightgrey .slick-dots li button:before,
  .bg-purple.screens-section.bg-lightgrey .slick-dots li button:before  {
    background: rgba(20, 20, 20, .2);
  }
  
  .screens-section .slick-dots li button:hover:before,
  .screens-section .slick-dots li.slick-active button:before {
    background: #fff;
  }
  
  .no-bg.screens-section .slick-dots li button:hover:before,
  .bg-lightgrey.screens-section .slick-dots li button:hover:before,
  .no-bg.screens-section .slick-dots li.slick-active button:before, 
  .bg-lightgrey.screens-section .slick-dots li.slick-active button:before {
    background: #555;
  }
  
  
  
  
  /* ===================================================================================
     09.  TEAM
     =================================================================================== */  
  
  #team-1 {
    background-position: bottom center; 
  }
  
  #team-1 .col-md-6 {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  /*------------------------------------------*/
  /*    TEAM MEMBER
  /*------------------------------------------*/
  
  .team-member {
    position: relative;
    background-color: #fff;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 50px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-bottom: 1px solid transparent;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .team-member .box-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    opacity: 0; 
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .team-member:hover {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  
  .team-member.rose-hover:hover { border-bottom: 1px solid #f402b8; }
  .team-member.rose-hover:hover .box-line { background-color: #f402b8; opacity: 1; }
  .team-member.rose-hover:hover .team-img-meta span { color: #f402b8; }
  
  .team-member.red-hover:hover { border-bottom: 1px solid #ee041a; }
  .team-member.red-hover:hover .box-line { background-color: #ee041a; opacity: 1; }
  .team-member.red-hover:hover .team-img-meta span { color: #ee041a; }
  
  .team-member.orange-hover:hover { border-bottom: 1px solid #ff8212; }
  .team-member.orange-hover:hover .box-line { background-color: #ff8212; opacity: 1; }
  .team-member.orange-hover:hover .team-img-meta span { color: #ff8212; }
  
  .team-member.green-hover:hover { border-bottom: 1px solid #4fcb36; }
  .team-member.green-hover:hover .box-line { background-color: #4fcb36; opacity: 1; }
  .team-member.green-hover:hover .team-img-meta span { color: #4fcb36; }
  
  .team-member.blue-hover:hover { border-bottom: 1px solid #1d07f4; }
  .team-member.blue-hover:hover .box-line { background-color: #1d07f4; opacity: 1; }
  .team-member.blue-hover:hover .team-img-meta span { color: #1d07f4; }
  
  .team-member.skyblue-hover:hover { border-bottom: 1px solid #01b7de; }
  .team-member.skyblue-hover:hover .box-line { background-color: #01b7de; opacity: 1; }
  .team-member.skyblue-hover:hover .team-img-meta span { color: #01b7de; }
  
  .team-member.purple-hover:hover { border-bottom: 1px solid #783bb1; }
  .team-member.purple-hover:hover .box-line { background-color: #783bb1; opacity: 1; }
  .team-member.purple-hover:hover .team-img-meta span { color: #783bb1; }
  
  /*------------------------------------------*/
  /*    TEAM MEMBER PHOTO
  /*------------------------------------------*/
  
  .team-member-photo {
    position: relative;
    z-index: 1;
    margin: 0 25px 25px;
  }
  
  .team-member-photo img {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  /*------------------------------------------*/
  /*    TEAM MEMBER TYPOGRAPHY
  /*------------------------------------------*/
  
  .team-img-meta span {
    color: #888;
    font-size: 1rem;
    line-height: 1;
    font-weight: 300;
    display: block;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  } 
  
  .join-team h4 {
    font-weight: 400;
    margin-bottom: 10px;
  }
  
  .join-team h4 span {
    font-weight: 700;
    margin-right: 5px;
  }
  
  .join-team p {
    margin-bottom: 25px;
    padding: 0 10%;
  }
  
  /*------------------------------------------*/
  /*    Team Member Social Links
  /*------------------------------------------*/
  
  .tm-social ul {
    display: inline-block; 
    padding-left: 0;
    margin: 25px auto 0;
  }
  
  .tm-social ul li {
    width: auto !important;
    display: inline-block !important;
    vertical-align: top;
    clear: none !important;
    padding: 0;
  }
  
  .tm-social a {
    color: #999;
    font-size: 1.1rem;
    line-height: 1;
    margin: 0 10px;
    display: block;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  .tm-social a.ico-facebook:hover { color: #3b5998; }
  .tm-social a.ico-twitter:hover { color: #00a9ed; }
  .tm-social a.ico-instagram:hover { color: #e44772 }
  .tm-social a.ico-dribbble:hover { color: #d92d84; }
  .tm-social a.ico-behance:hover { color: #2473f6; }
  .tm-social a.ico-pinterest:hover { color: #ac281a; }
  .tm-social a.ico-linkedin:hover { color: #015886; }
  .tm-social a.ico-google-plus:hover { color: #cd1111; }
  .tm-social a.ico-youtube:hover { color: #cd1b20; }
  .tm-social a.ico-tumblr:hover { color: #3a5976; }
  .tm-social a.ico-vk:hover { color: #3b5998; }
  
  
  
  
  /* ===================================================================================
     10. PRICING TABLES
     =================================================================================== */ 
  
  /*------------------------------------------*/
  /*   PRICING TABLE
  /*------------------------------------------*/  
   
  .pricing-table {
    background-color: #fff;   
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 50px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .pricing-table:hover {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  
  /*------------------------------------------*/
  /*    Pricing Table Price Plan
  /*------------------------------------------*/
  
  .pricing-plan h4 {
    color: #195C63;
    font-weight: 400;
    letter-spacing: -1px;
    margin-bottom: 25px;
  }
  
  .pricing-plan h4 span {
    color: #fff;
    font-weight: 700;
  }
  
  .pricing-table span.price {
    font-size: 50px;
    line-height: 50px;
    font-weight: 600;
    letter-spacing: -1px;
    color: #D3A66E;
  }
  
  .pricing-table sup {
    font-size: 34px;
    font-weight: 500;
    top: -6px;
    right: 3px;
    color: #D3A66E;
  }
  
  .pricing-table sup.validity {
    font-weight: 300;
    font-size: 1.25rem;
    top: 0px;
    left: 3px;
    color: #fff;
  }
  
  /*------------------------------------------*/
  /*    Pricing Table Body
  /*------------------------------------------*/
  
  ul.features {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 300;
    padding-top: 10px;
  }
  
  ul.features li {
      padding: 9px 0;
  } 
  
  ul.features li .svg-inline--fa {
      margin-right: 6px;
  } 
  
  ul.features li.disabled-option {
      color: #888;
  }
  
  /*------------------------------------------*/
  /*   Pricing Table Button
  /*------------------------------------------*/
  
  .pricing-table .btn {
    display: block;
    width: 100%;
    margin-top: 30px;
    font-size: 16px;
    color: #fff;
  }
  
  /*------------------------------------------*/
  /*   PRICING NOTICE TEXT
  /*------------------------------------------*/
  
  .pricing-notice p {
    margin-top: 10px;
    padding: 0 8%;
  }
  
  .pricing-notice p span {
    font-weight: 700;
    margin-right: 5px;
  }
  
  
  
  
  /* ===================================================================================
     11.  TESTIMONIALS
     =================================================================================== */ 
  
  /*------------------------------------------*/
  /*   TESTIMONIALS CAROUSEL
  /*------------------------------------------*/ 
  
  .review-1, .review-2 {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 30px;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  .review-2 {
    padding: 0;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
  }
  
  .review-2 .review-txt {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 45px 40px 55px;
    margin: 0 2px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .review-1, .review-2 {
    opacity: 0.3;
  }
  
  .review-1.slick-current,
  .review-2.slick-current {
      opacity: 1;
  }
  
  .review-2.slick-current {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
  }
     
  /*------------------------------------------*/
  /*    Testimonial Message Avatar 
  /*------------------------------------------*/ 
  
  .review-1 .testimonial-avatar img,
  .review-2 .testimonial-avatar img {
    width: 90px;
    height: 90px;
    display: inline-block;
    margin: 0 auto 15px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  .review-2 .testimonial-avatar img {
    margin: -45px auto 15px;  
  }
  
  /*------------------------------------------*/
  /*   Testimonial Message Text
  /*------------------------------------------*/
  
  .review-2 h5 {
    margin-bottom: 20px;
  }
  
  .review-1 p, .review-2 p {
    color: #666;
    font-size: 1.05rem;
    font-style: italic;
  } 
  
  p.testimonial-autor {
    color: #000;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 0;
  }
  
  .review-2 p.testimonial-autor {
    line-height: 1.2;
    margin-bottom: 0;
  }
  
  .testimonial-avatar span {
    font-size: 0.95rem;
    line-height: 1;
  }
  
  /*------------------------------------------*/
  /*   App Rating
  /*------------------------------------------*/
  
  .app-rating .svg-inline--fa {
    color: #ff8000;
    font-size: 0.8rem;
    line-height: 1;
    margin-right: 1px;
  }
  
  .app-rating .svg-inline--fa:last-child {
    margin-right: 0;
  }
  
  /*------------------------------------------*/
  /*   Reviews Slick Carousel Dots
  /*------------------------------------------*/
  
  .reviews-section .slick-dots {
    position: absolute;
    z-index: 4;
    bottom: -30px;
  }
  
  .reviews-section .slick-dots li {
    margin: 0 2px;
    width: 15px;
    height: 15px;
  }
  
  .reviews-section .slick-dots li button:before {
    content: "";
    background: #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 1;
    width: 8px;
    height: 8px;
    left: auto;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
  }
  
  .reviews-section .slick-dots li button:hover:before {
    background: #999;
  }
  
  .reviews-section .slick-dots li.slick-active button:before {
    background: #666;
  }
  
  
  
  
  /* ==========================================================================
     12.  FAQs
     =========================================================================== */
  
  #faqs-1 {   
    background-image: url(../img/home/tra-waves.png);
    background-position: center bottom; 
  }
  
  #valuation {   
    background-image: url(../img/home/tra-waves.png);
    background-position: center bottom; 
  }
  
  #replacement {   
    background-image: url(../img/home/tra-waves.png);
    background-position: center bottom; 
  }
  
  #support {   
    background-image: url(../img/home/tra-waves.png);
    background-position: center bottom; 
  }
    
  /*------------------------------------------*/
  /*    FAQs TYPOGRAPHY
  /*------------------------------------------*/
  
  .question {
    margin-bottom: 25px;
  }
  
  .question h5 {
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 8px;
  }
  
  .question p {
    color: #666;
  }
  
  .more-questions-btn {
    margin-top: 50px;
  }
  
  .more-questions-btn .btn {
    margin-top: 20px;
  }
  
  
  
  
  /* ==========================================================================
     13.  DOWNLOAD
     =========================================================================== */
  
  #download-1 {
    background-image: url(../img/home/tra-bg-1.png);
  }
  
  #download-2 .bg-inner {
    background-image: url(../img/home/download-2.jpg);
    position: relative;
    z-index: 1;
  }
  
  #download-3 .bg-inner {
    background-image: url(../img/home/download-3.jpg);
    position: relative;
    z-index: 1;
  }
  
  #download-4.bg-lightgrey {
    background-image: url(../img/home/tra-waves.png);
    background-position: bottom center; 
  }
  
  /*------------------------------------------*/
  /*   DOWNLOAD TEXT
  /*------------------------------------------*/
  
  #download-4 .download-txt {
    text-align: center;
    margin-bottom: 50px;
  }
  
  /*------------------------------------------*/
  /*   DOWNLOAD TYPOGRAPHY
  /*------------------------------------------*/
  
  .download-section h2 {
    margin-bottom: 15px;
  }
  
  #download-1 p, #download-4 p {
    padding: 0 10%;
  }
  
  .download-section .stores-badge {
    margin-top: 30px;
  }
  
  /*------------------------------------------*/
  /*   DOWNLOAD IMAGE
  /*------------------------------------------*/
  
  .download-2-img, 
  .download-3-img {
    margin-top: -60px;
    margin-bottom: -60px;
    position: relative;
    z-index: 999;
    position: relative;
  }
  
  
  
  
  /* ===================================================================================
     14.  MORE APPS
     =================================================================================== */ 
  
  .m-img {
    background-color: #f0f0f0;   
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px 10px;
  }
  
  /*------------------------------------------*/
  /*    MORE APPS TYPOGRAPHY
  /*------------------------------------------*/
  
  .more-app-box h5 {
    line-height: 1;
    margin-bottom: 5px;
    margin-top: 25px;
  }
  
  .more-app-box span.app-cat {
    color: #888;
    font-size: 0.95rem;
    line-height: 1;
    display: block;
    margin-bottom: 15px;
  }
  
  .more-app-box a {
    color: #888;
    margin-right: 12px;
  }
  
  .m-links a span {
    text-decoration: underline;
    margin-left: 1px;
  }
  
  .more-app-box a:hover {
    color: #222;
  }
  
  
  
  
  /* ==========================================================================
     15.  BRANDS
     =========================================================================== */
  
  #brands-1 {
    padding-top: 70px;
    padding-bottom: 40px;
  }
  
  #brands-1.brands-section-thin {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*    BRANDS LOGO HOLDER
  /*------------------------------------------*/ 
   
  #brands-1 .brand-logo {
    margin-bottom: 30px;
  } 
  
  #brands-1 .brand-logo img {
    padding: 0 15px;
  }
  
  
  
  
  /* ==========================================================================
     16.  PRESS
     =========================================================================== */
  
  /*------------------------------------------*/
  /*    PRESS LOGO
  /*------------------------------------------*/ 
   
  .press-logo {
    overflow: hidden;
    position: relative; 
    background-color: transparent;
    background-color: #fff;
    padding: 70px 30px;
    margin-bottom: 40px;
    text-align: center;
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  } 
  
  .press-logo img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    overflow: hidden;
    -webkit-transition: transform 450ms;
    -moz-transition: transform 450ms;
    -o-transition: transform 450ms;
    transition: transform 450ms;
  }
  
  .press-logo:hover {
    background-color: #fff;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  } 
  
  .press-logo:hover img {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
  }
  
  /*------------------------------------------*/
  /*    PRESS TEXT
  /*------------------------------------------*/ 
  
  .press-txt p {
    margin-bottom: 30px;
    padding: 0 10%;
  }
  
  
  
  
  /* ==========================================================================
     17.  NEWSLETTER
     =========================================================================== */
  
  #newsletter-1 {
    background-image: url(../img/home/tra-bg-1.png);
    padding-top: 120px;
    padding-bottom: 100px;
  }
  
  #newsletter-2 {
    background-image: url(../img/home/tra-bg-2.png);
    padding-top: 100px;
    padding-bottom: 100px;
  }
  
  #newsletter-1 .newsletter-form  {
    margin: 50px 15% 0;
  }
  
  /*------------------------------------------*/
  /*    Newsletter Form Input
  /*------------------------------------------*/
  
  .newsletter-section .newsletter-form .form-control {
    height: 60px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 400;
    padding: 0 0.5rem;
    margin-right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0; 
    -webkit-box-shadow: 0 0;
    -moz-box-shadow: 0 0;
    box-shadow: 0 0;  
  }
  
  .newsletter-section .newsletter-form .form-control:focus {
    border: none;
    border-bottom: 2px solid #fff;
    outline: 0;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*    Newsletter Form Placeholder
  /*------------------------------------------*/
  
  .newsletter-section .newsletter-form .form-control::-moz-placeholder { color: #eee; } 
  .newsletter-section .newsletter-form .form-control:-ms-input-placeholder { color: #eee; }
  .newsletter-section .newsletter-form .form-control::-webkit-input-placeholder { color: #eee; }
  
  /*------------------------------------------*/
  /*    Newsletter Form Button
  /*------------------------------------------*/
  
  .newsletter-section .newsletter-form .btn {
    height: 60px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    font-size: 1.35rem;
    padding: 0 1rem;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0; 
    -webkit-box-shadow: 0 0;
    -moz-box-shadow: 0 0;
    box-shadow: 0 0;
  }
  
  .newsletter-section .newsletter-form .btn:hover {
    padding: 0 1.25rem;
  }
  
  .newsletter-section .newsletter-form .btn:hover::before {
      opacity: 0;
  }
  
  
  
  
  /* ==========================================================================
     18.  BLOG
     =========================================================================== */
  
  #blog-page {
    margin-top: 160px;
    margin-bottom: 100px;
  }
  
  #single-post-page {
    margin-top: 160px;
    margin-bottom: 60px;
  }
  
  /*------------------------------------------*/
  /*    BLOG POST
  /*------------------------------------------*/ 
  
  .blog-post {
    margin-bottom: 40px;
  }
  
  .posts-holder .blog-post {
    margin-bottom: 60px;
  }
  
  /*------------------------------------------*/
  /*    BLOG TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .blog-post h5 {
    margin-bottom: 15px;
  }
  
  .blog-post-txt p {
    margin-bottom: 35px;
  }
  
  .blog-post-txt span,
  .sblog-post-txt span {
    font-size: 0.95rem;
    display: block;
    margin-bottom: 12px;
  }
  
  .posts-holder .blog-post-txt span {
    margin-bottom: 8px;
  }
  
  .blog-post-meta span {
    color: #888;
    font-size: 0.95rem;
    margin-right: 30px;
  }
  
  .blog-post a {
    color: #111;
    font-weight: 600;
    text-decoration: underline;
  }
  
  .blog-post a:hover {
    color: #888;
  }
  
  .post-inner-img p.p-sm {
    color: #999;
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 0;
  }
  
  .blog-post-img {
    position: relative;
  }
  
  /*------------------------------------------*/
  /*    BLOG PAGE RIGHT SIDEBAR 
  /*------------------------------------------*/ 
  
  #sidebar-right h5.h5-md {
    margin-bottom: 20px;
  }
  
  /*------------------------------------------*/
  /*   Blog Search Form
  /*------------------------------------------*/
  
  #search-field .btn {
    padding: 14px 18px;
    margin-top: 0;
    -webkit-box-shadow: 0 0 0;
    -moz-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
  }
  
  #search-field .form-control:focus {
    border-color: #999;
    outline: 0px none;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*   Blog Categories
  /*------------------------------------------*/
  
  ul.blog-category-list > li {
    padding: 10px 0;
    border-bottom: 1px dashed #c0c0c0;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;  
  }
  
  ul.blog-category-list > li:first-child {
    padding: 0 0 10px;
  }
  
  ul.blog-category-list > li:last-child {
    padding: 10px 0 0;
    border-bottom: none;
  }
  
  ul.blog-category-list > li a,
  ul.blog-category-list > li span {
    color: #555;
  }
  
  ul.blog-category-list li .svg-inline--fa {
    margin-right: 10px;
  }
  
  ul.blog-category-list li a:hover {
    color: #000;
    text-decoration: none;
  }
  
  /*------------------------------------------*/
  /*   Popular Posts
  /*------------------------------------------*/
  
  .popular-posts li { 
    padding: 14px 0;
    border-bottom: 1px dashed #c0c0c0;
  }
  
  .popular-posts li:first-child {
    padding: 0 0 14px;
  }
  
  .popular-posts li:last-child {
    padding: 14px 0 0;
    border-bottom: 0; 
  }
  
  /*------------------------------------------*/
  /*  Popular Post Typography
  --------------------------------------------*/
  
  .post-summary a { 
    color: #555;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .popular-posts .post-summary a:hover { 
    color: #000;
    text-decoration: underline;
  }
  
  .popular-posts p { 
    color: #888;  
    font-size: 0.875rem;
    margin-top: 6px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*   Blog Page Popular Tags
  /*------------------------------------------*/
  
  .badge {
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #ddd;
    background-color: #fbfbfb;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 5px 10px;
    margin-right: 2px;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;  
  }
  
  .badge a {
    color: #666!important;
    font-size: 0.75rem;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.42857;
  }
  
  .badge:hover {
    background-color: #444;
    border-color: #444;
    color: #fff;
  }
  
  .badge:hover a {
    color: #fff!important;
  }
  
  /*------------------------------------------*/
  /*    BLOG PAGE PAGINATION 
  /*------------------------------------------*/ 
  
  .page-link {
    color: #666;
    padding: .65rem .95rem;
  }
  
  .page-link:hover,
  .page-link:focus {
    color: #444;
    background-color: #f2f2f2;
    border-color: #dee2e6;
  }
  
  .page-item.active .page-link {
      z-index: 1;
      color: #fff;
      background-color: #444;
      border-color: #444;
  }
  
  /*------------------------------------------*/
  /*    SINGLE POST SHARE ICONS
  /*-----------------------------------------*/
  
  .share-social-icons {
    display: inline-block; 
    padding-left: 0;
  }
  
  .share-social-icons li {
    width: auto !important;
    display: inline-block !important;
    vertical-align: top;
    clear: none !important;
    padding: 0;
  }
  
  a.share-ico {
    width: 90px;
    height: 35px;
    font-size: 18px;
    line-height: 35px !important;
    text-align: center;
    margin-right: 3px;
    display: block;
    opacity: 0.75;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
  }
  
  a.share-ico.ico-facebook {background-color: #3b5998; border-color: #3b5998; color: #fff;}
  a.share-ico.ico-twitter {background-color: #00a9ed; border-color: #00a9ed; color: #fff;}
  a.share-ico.ico-behance {background-color: #00a8e7; border-color: #00a8e7; color: #fff;}
  a.share-ico.ico-google-plus {background-color: #cd1111; border-color: #cd1111; color: #fff;}
  a.share-ico.ico-linkedin {background-color: #015886; border-color: #015886; color: #fff;}
  a.share-ico.ico-dribbble{background-color: #d92d84; border-color: #d92d84; color: #fff;}
  a.share-ico.ico-instagram {background-color: #beb3a8; border-color: #beb3a8; color: #fff;}
  a.share-ico.ico-pinterest {background-color: #ac281a; border-color: #ac281a; color: #fff;}
  a.share-ico.ico-dropbox {background-color: #008ad2; border-color: #008ad2; color: #fff;}
  a.share-ico.ico-skype {background-color: #00a9ed; border-color: #00a9ed;color: #fff;}
  a.share-ico.ico-youtube {background-color: #cd1b20; border-color: #cd1b20;color: #fff;}
  a.share-ico.ico-tumblr {background-color: #3a5976; border-color: #3a5976;color: #fff;}
  a.share-ico.ico-vimeo {background-color: #00adee; border-color: #00adee; color: #fff;}
  a.share-ico.ico-flickr {background-color: #d2d2d2; border-color: #d2d2d2; color: #fff;}
  a.share-ico.ico-github {background-color: #222; border-color: #222; color: #fff;}
  a.share-ico.ico-renren {background-color: #364a83; border-color: #364a83; color: #fff;}
  a.share-ico.ico-vk {background-color: #3b5998; border-color: #3b5998; color: #fff;}
  a.share-ico.ico-xing {background-color: #015f5e; border-color: #015f5e; color: #fff;}
  a.share-ico.ico-weibo {background-color: #be4443; border-color: #be4443; color: #fff;}
  a.share-ico.ico-rss {background-color: #ff6600; border-color: #ff6600; color: #fff;}
  a.share-ico.ico-digg {background-color: #222; border-color: #222; color: #fff;}
  a.share-ico.ico-deviantart {background-color: #57675d; border-color: #57675d; color: #fff;}
  a.share-ico.ico-envelope {background-color: #999; border-color: #999; color: #fff;}
  a.share-ico.ico-delicious {background-color: #0A0A0A; border-color: #0A0A0A; color: #fff;}
  
  a.share-ico:hover {
    opacity: 1;
  }
  
  /*------------------------------------------*/
  /*    SINGLE POST META
  /*------------------------------------------*/
  
  .comment-meta {
      margin-bottom: 10px;
  }
  
  .comment-meta h5 {
    line-height: 1.1;
      margin-bottom: 0;
  }
  
  .comment-date {
    color: #888;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
      margin-bottom: 5px;
  }
  
  .btn-reply a {
    background-color: #888;
    color:  #fff;
    font-size: 12px;  
    font-weight: 400;
    padding: 3px 8px; 
    text-transform: uppercase;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  
  .btn-reply a:hover {
    color:  #fff;
    background-color: #48af4b;
  }
  
  .comment-reply {
      margin-left: 40px;
  }
  
  .single-post-comments hr { 
    margin-top: 20px; 
    margin-bottom: 20px; 
  }
  
  /*------------------------------------------*/
  /*    SINGLE POST COMMENT FORM
  /*------------------------------------------*/
  
  #leave-comment h4.h4-lg {
    margin-bottom: 5px;
  }
  
  .comment-form {
    position: relative;
  }
  
  .comment-form p {
    color: #333;
    font-size: 15px;
    line-height: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 5px;
    display: block;
  }
  
  .comment-form .form-control {
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    height: 46px;
    font-size: 15px;
    font-weight: 300;
    padding: 15px;
    margin-bottom: 20px;
      box-shadow: none; 
  }
  
  .comment-form .form-control:focus {
    border-color: #48af4b;
    outline: 0px none;
    box-shadow: none;
  }
  
  .comment-form textarea { 
    min-height: 200px; 
  }
  
  /*------------------------------------------*/
  /*    Forms Message
  /*------------------------------------------*/
  
  .comment-form label.error {
    color: #f6412d;
    font-size: 0.95rem;
    line-height: 1;
    margin-bottom: 20px;
  }
  
  .comment-form-msg {
    position: absolute;
    bottom: 10px;
    left: 350px;
  }
  
  .comment-form-msg .error,
  .comment-form-msg .loading {
    color: #45afff;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 600;
  }
  
  .comment-form-msg .error {
    color: #f6412d;
  }
  
  
  
  
  /* ==========================================================================
     19.  CONTACTS
     =========================================================================== */
  
  #contacts-1.bg-lightgrey {
    background-image: url(../img/home/tra-waves.png);
    background-position: bottom center; 
  }
  
  #contacts-2 {
    background-image: url(../img/home/tra-bg-5.png);
  }
  
  .contacts-section .form-holder {
    position: relative;
  }
  
  /*------------------------------------------*/
  /*    Contact Form Input
  /*------------------------------------------*/
  
  .contact-form .form-control {
    height: 54px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 0 0;
    color: #444;
    font-size: 1rem;
    font-weight: 300;
    padding: 0 20px;
    margin-bottom: 25px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  
  #contacts-2 .contact-form .form-control {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #666;
    color: #f5f5f5;
    font-size: 1.35rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    padding: 0 5px;
    margin-bottom: 35px;
  }
  
  .contact-form .custom-select {
    display: inline-block;
    width: 100%;
    height: 54px;
    line-height: 1;
    color: #444;
    font-size: 1rem;
    font-weight: 300;
    padding: 0 15px;
    margin-bottom: 25px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  
  .bg-lightgrey .contact-form .form-control {
    border: 1px solid #ddd;
  }
  
  /*------------------------------------------*/
  /*    Contact Form Textarea
  /*------------------------------------------*/
  
  .contact-form textarea { min-height: 220px; }
  .contact-form textarea.form-control { 
    padding: 20px;
  }
  
  #contacts-2 .contact-form textarea.form-control { 
    padding: 20px 5px;
  }
  
  /*------------------------------------------*/
  /*    Contact Form Placeholder
  /*------------------------------------------*/
  
  .contact-form .form-control::-moz-placeholder { color: #555; } 
  .contact-form .form-control:-ms-input-placeholder { color: #555; }
  .contact-form .form-control::-webkit-input-placeholder { color: #555; }
  
  #contacts-2 .contact-form .form-control::-moz-placeholder { color: #666; } 
  #contacts-2 .contact-form .form-control:-ms-input-placeholder { color: #666; }
  #contacts-2 .contact-form .form-control::-webkit-input-placeholder { color: #666; }
  
  /*------------------------------------------*/
  /*    Contact Form Input Focus
  /*------------------------------------------*/
  
  .contact-form .form-control:focus,
  .contact-form .custom-select:focus {
      outline: 0px none;
      box-shadow: none;
      border-color: #6bbb28;
  }
  
  #contacts-2 .contact-form .form-control:focus {
      outline: 0px none;
      box-shadow: none;
      border-color: #fff;
  }
  
  /*------------------------------------------*/
  /*    Contact Form Message
  /*------------------------------------------*/
  
  .contact-form label.error {
    color: #f6412d;
    font-size: 0.95rem;
    line-height: 1;
    margin-bottom: 20px;
    margin-left: 35px;
  }
  
  #contacts-2 .contact-form label.error {
    margin-left: 5px;
    margin-bottom: 30px;
  }
  
  .contact-form-msg {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
  
  .contact-form-msg .error,
  .contact-form-msg .loading {
    color: #45afff;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 600;
  }
  
  .contact-form-msg .error {
    color: #f6412d;
  }
  
  
  
  
  /* ==========================================================================
     20. FOOTER
     ========================================================================== */  
  
  .footer {   
    background-position: bottom center; 
  }
  
  /*------------------------------------------*/
  /*   FOOTER TYPOGRAPHY
  /*------------------------------------------*/
  
  .bg-dark.footer .white-color p {
    color: #ddd;
  }
  
  .bg-dark.footer .white-color h5 a {
    color: #ccc;
  }
  
  .footer h5 {
    margin-bottom: 20px;
  }
  
  .footer-info p {
    font-size: 1.05rem;
    line-height: 1.65;
    margin-top: 20px;
  }
  
  .footer-socials-links h5 {
    letter-spacing: 0;
    margin-bottom: 13px;
  }
  
  .footer-socials-links h5 a {
    text-decoration: underline;
  }
  
  a.foo-facebook:hover { color: #3b5998; }
  a.foo-twitter:hover { color: #00a9ed; }
  a.foo-instagram:hover { color: #e44772 }
  a.foo-dribbble:hover { color: #d92d84; }
  a.foo-behance:hover { color: #2473f6; }
  a.foo-pinterest:hover { color: #ac281a; }
  a.foo-linkedin:hover { color: #015886; }
  a.foo-google-plus:hover { color: #cd1111; }
  a.foo-youtube:hover { color: #cd1b20; }
  a.foo-tumblr:hover { color: #3a5976; }
  a.foo-vk:hover { color: #3b5998; }
  
  .bg-dark.footer .white-color h5 a:hover {
    color: #fff;
  }
  
  /*------------------------------------------*/
  /*   FOOTER LOGO
  /*------------------------------------------*/
  
  #footer-4 .footer-logo {
    margin-bottom: 40px;
  }
  
  /*------------------------------------------*/
  /*   FOOTER LINKS
  /*------------------------------------------*/
  
  .foo-links {
    display: inline-block; 
    padding-left: 0;
    margin: 0 auto;
  }
  
  .foo-links li {
    width: auto !important;
    display: block !important;
    vertical-align: top;
    clear: none !important;
    margin: 0 0 8px 0;
    padding: 0;
  }
  
  #footer-3 .foo-links li,
  #footer-4 .foo-links li,
  .bottom-footer .foo-links li {
      display: inline-block !important;
      margin-left: 22px;
  }
  
  .foo-links li a {
    font-size: 1.05rem;
    line-height: 1.5;
  }
  
  #footer-3 .foo-links li a,
  .bottom-footer .foo-links li a {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  .bg-dark .foo-links li a {
    color: #ddd;
  }
  
  .foo-links li a:hover {
    color: #000;
    text-decoration: underline;
  }
  
  .bg-dark .foo-links li a:hover {
    color: #ddd;
  }
  
  /*------------------------------------------*/
  /*   FOOTER STORE BADGES
  /*------------------------------------------*/
  
  .footer-stores-badge a.store {
    display: block;
    margin-bottom: 14px;
  }
  
  /*------------------------------------------*/
  /*   BOTTOM FOOTER
  /*------------------------------------------*/
  
  .bottom-footer {
    border-top: 1px solid #ddd;
    margin-top: 30px;
    padding-top: 50px;
  }
  
  .bg-grey .bottom-footer {
    border-color: #ccc;
  }
  
  .bg-dark .bottom-footer {
    border-color: #555;
  }
  
  /*------------------------------------------*/
  /*   FOOTER COPYRIGHT
  /*------------------------------------------*/
  
  .footer-copyright p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
  }
  
  #footer-2 .footer-copyright p {
    margin-bottom: 2px;
  }
  
  .footer-copyright p span {
    font-weight: 500;
  }
  
  
  
  
  /* ==========================================================================
     21. BOTTOM QUICK FORM
     ========================================================================== */  
  
  .bottom-form {
    background-color: #fff;
    min-width: 260px;
    max-width: 260px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    box-shadow: 0 1px 15px 0 rgba(0,0,0,.33);
    position: fixed;
    right: 6em;
    bottom: 0;
    z-index: 998;
  }
  
  /*------------------------------------------*/
  /*   QUICK FORM HEADER
  /*------------------------------------------*/
  
  .bottom-form-header {
    background-color: #41bf2b;
    border-color: #41bf2b;
    padding: 14px 20px;
    min-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    cursor: pointer;
  }
  
  .bottom-form-header span {
    color: #fff;
    font-size: 30px;
    line-height: 1;
    display: inline-block;
    float: left;
    margin-right: 8px;
  }
  
  .bottom-form-header p {
    color: #fff;
    font-size: 0.9rem;
    line-height: 30px!important;
    display: inline-block;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*   QUICK FORM FORM
  /*------------------------------------------*/
  
  .bottom-form-holder {
    height: 311px;
    padding-bottom: 30px;
  }
  
  .bottom-form-control {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    line-height: 1;
    padding: 18px;
  }
  
  .quick-contact-form textarea { 
    min-height: 60px; 
    border-bottom: none; 
  }
  
  .quick-contact-form .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.75rem;
    margin-right: 30px;
  }
  
  /*------------------------------------------*/
  /*    Quick Form Message
  /*------------------------------------------*/
  
  .quick-contact-form label.error {
    color: #f6412d;
    font-size: 0.95rem;
    line-height: 1;
    margin-bottom: 20px;
    margin-left: 35px;
  }
  
  .quick-contact-form .contact-form-msg {
    position: absolute;
    bottom: 80px;
    left: 20px;
  }
  
  .quick-contact-form .contact-form-msg .error,
  .quick-contact-form .contact-form-msg .loading {
    color: #45afff;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 300;
  }
  
  .quick-contact-form .contact-form-msg .error {
    color: #f6412d;
  }
  
  
  
  
  /* ==========================================================================
     22. TERMS PAGE
     ========================================================================== */  
  
  #terms-page {
    margin-top: 160px;
    margin-bottom: 60px;
  }
  
  /*------------------------------------------*/
  /*   TERMS PAGE TYPOGRAPHY
  /*------------------------------------------*/
  
  #terms-page p.p-notice {
    font-weight: 700;
  }
  
  .terms-box { 
    margin-bottom: 40px;
  }
  
  .terms-box h4 {
    margin-bottom: 15px;
  }
  
  .terms-box p span {
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700; 
    margin-right: 5px;
  }
  
  .terms-box p a {
    color: #333;
    font-weight: 700; 
    text-decoration: underline;
  }
  
  .terms-box p a:hover {
    color: #666;
  }
  
  /*------------------------------------------*/
  /*    Terms / Privacy Title
  /*------------------------------------------*/
  
  ul.terms-list {
    list-style: disc;
    margin: 20px 0 20px 25px;
  }
  
  ul.terms-list li {
    margin-bottom: 10px;
  }
  
  ul.terms-list li:last-child {
    margin-bottom: 0;
  }
  
  
  
  
  /* ===================================================================================
     23.  SCROLL TO TOP
     =================================================================================== */ 
  
  #scrollUp {
    display: none;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-image: url(../img/home/back-to-top.png);
    background-repeat: no-repeat;
    background-position: 50% 48%;
    background-color: rgba(35, 35, 35, 0.5);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 250ms linear;
    -moz-transition: all 250ms linear;
    transition: all 250ms linear; 
  }
  
  #scrollUp:hover {
    background-color: #666;
  }
  
  nav a#pull {  
      display: none;
  }
  
/* ===================================================================================
    24.  JIC CUSTOM TABLES
    =================================================================================== */ 
    
  .paginator-selector {
    border-color: #e9ecef;
    border-radius: 0.25rem;
    padding: 6px;
  }

  .paginator-label {
    margin-left: 0;
    color: #8392AB;
    font-weight: 400;
  }

  table thead th {
    cursor: pointer;
  }

  table thead th.nosort {
    cursor: initial;
  }

  .table_sortable thead th:after {
    display: inline-block;
    padding: 0 .25rem;
  }

  .table_sortable thead th.desc:after {
    content: '▴';
  }

  .table_sortable thead th.asc:after {
    content: '▾';
  }

  .table-sortable th .sortable {
    color: #d3d3d3;
  }

  .table-bottom-info{
      color: #8392AB;
      font-size: 0.875rem;
  }

  /* Button disable */
  .disabled-btn {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Spinner animation */
  .spinner-border {
    border: 4px solid #f3f3f3; /* Light gray */
    border-top: 4px solid #208A89;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Loading animation container */
  .loading-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }

  /* Click disable */
  .no-click {
    pointer-events: none;
    cursor: not-allowed;
  }

  input[type="radio"],
  input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25em;
  }

  .radio label {
    font-weight: normal;
  }

  .horizontal-bar {
    height: 5px;
    background-color: darkred;
    width: 100%;
  }

  /* DataTable JIC Custom Style */
  div.dt-container {
    border-color: #e9ecef;
    border-radius: 0.25rem;
    font-size: small;
  }

  div.dt-container .dt-input {
    border-color: #e9ecef;
    border-radius: 0.25rem;
    font-size: small;
  }

  label,
  .dt-info,
  .form-label {
    color: #8392AB;
    font-weight: 400;
  }

  div.dt-container .dt-search input {
    border: 1px solid #e9ecef;
  }

  div.dt-container .dt-length,
  div.dt-container .dt-search,
  div.dt-container .dt-processing {
    color: #8392AB;
    font-size: 0.875rem;
  }

  div.dt-container .dt-info,
  div.dt-container .dt-paging {
    color: #8392AB;
    font-size: small;
  }

  div.dt-container .dt-paging .dt-paging-button.current,
  div.dt-container .dt-paging .dt-paging-button.current:hover {
    border-radius: 50% !important;
    background: var(--jic-gradient-gold) !important;
    color: #ffff !important;
  }

  div.dt-container .dt-paging .dt-paging-button:hover {
    border: 1px solid rgba(97, 97, 97, 0.3);
    background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 50% !important;
    color: #8392AB !important;
  }

  table.dataTable>thead>tr>th,
  table.dataTable>thead>tr>td {
    padding: 8px;
    opacity: inherit;
    font-weight: 600;
    color: inherit;
    text-transform: none;
    font-size: 0.8rem;

  }

  .badge {
    margin-bottom: 0px;
    text-transform: none;
  }

  td.ps-2 p {
    font-size: 14px;
    margin-bottom: 0px;
  }

  .text-muted-light {
    color: #8392AB;
  }

  /* Make Button More Noticeable */
  .button-strong-cta {
      font-size: 14px;
      padding: 10px 16px;
      animation: pulseGlow 1.5s infinite alternate;
  }

  /* Hover Effect */
  .button-strong-cta:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
  
  /* Pulsating Glow Effect */
  @keyframes pulseGlow {
      0% {
          box-shadow: 0 0 10px rgba(255, 87, 34, 0.8);
      }
      100% {
          box-shadow: 0 0 20px rgba(255, 152, 0, 0.9);
      }
  }  

  /* Patch for Quill Editor Bullets Begin */
  .ql-editor ol li::before {
    content: "";
  }

  ol li[data-list='bullet']:not(.ql-editor ol li[data-list='bullet']) {
    list-style-type: disc;
  }
  /* Patch for Quill Editor Bullets End */


 .ul-with-bullets {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
  }


  .salvage-toggle {
    display: inline-flex;
    border-radius: 999px;
    background: #f6f9fc;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  }

  .salvage-toggle-btn {
    border-radius: 999px;
    padding: 0.55rem 1.8rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    border: none;
    background: transparent;
    transition: all 0.15s ease;
  }

  .salvage-toggle-btn i {
    font-size: 0.9rem;
  }

  .salvage-toggle-btn:hover {
    background: #e5edf7;
    color: #111827;
  }