/* Your custom css code goes here */

:root {
    --app-header-color-1: #34495e;
    --app-header-color-2: #f1c40f;
}

a {
    color: var(--app-header-color-2);
}

.h-500 {
    min-height: 500px;
}

.probootstrap-section.probootstrap-section-extra {
    margin-bottom: 6em;
}

.probootstrap-mobile-menu-active .probootstrap-nav {
  background: var(--app-header-color-2);
}

.probootstrap-header {
    background: var(--app-header-color-1);
    background: -webkit-gradient(linear, left top, right top, from(var(--app-header-color-1)), to(var(--app-header-color-2)));
    background: linear-gradient(to right, var(--app-header-color-1) 0, var(--app-header-color-2) 100%);
}

.probootstrap-box .icon i {
    color: var(--app-header-color-2);
}

.probootstrap-pricing h3>span {
    color: var(--app-header-color-2);
}

.probootstrap-pricing .probootstrap-price-wrap .probootstrap-price {
    color: var(--app-header-color-2);
}

.btn.btn-primary {
    border: 1px solid var(--app-header-color-2);
    background: var(--app-header-color-2);
}

.btn.btn-primary:active, .btn.btn-primary:focus {
    border: 1px solid var(--app-header-color-1);
}

.btn.btn-primary:active, .btn.btn-primary:focus {
    outline: 0;
    border: 1px solid var(--app-header-color-1);
}
.btn.btn-primary:active, .btn.btn-primary:focus, .btn.btn-primary:hover {
    background: var(--app-header-color-1);
    border: 1px solid var(--app-header-color-1);
}

.probootstrap-section.probootstrap-section-colored, .probootstrap-section.probootstrap-section-dark {
    background: var(--app-header-color-2);
}

.probootstrap-section.probootstrap-section-colored .heading-with-icon i, .probootstrap-section.probootstrap-section-dark .heading-with-icon i {
    color: var(--app-header-color-1);
}

.probootstrap-footer .probootstrap-footer-widget {
    margin-bottom: 0;
}