/*   
Theme Name: Good Job 2026
*/

html {scroll-behavior: smooth; margin: 0 auto; background: #fff;}
.content-wrapper {background: #fefefe !important;}
.bg-offwhite {background: #fbfaf9;}
.bg-primary-dark {background: #343f52;}
.whitespace-wrap {white-space: normal;}
.keyline {width: 20px; height: 2px; background: var(--bs-orange); margin: 0.2rem auto 0.8rem auto;}
.keyline-left {width: 20px; height: 2px; background: var(--bs-orange); margin: 0.2rem 0 0.8rem 0;}
.keyline-white {width: 40px; height: 2px; background: #fff; margin: 0.2rem 0 0.8rem 0;}
a[href^=tel] {color: #fff !important;}

/* Animated Gradients */

.bg-animated-gradient {background: linear-gradient(90deg, #204e72, #5a3a8a, #204e72);background-size: 400% 400%;animation: gradient 15s ease infinite;}
@keyframes gradient {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}

/* Header */

.navbar-stick:not(.navbar-dark) {box-shadow: 0rem 0rem 1.25rem rgba(30, 34, 40, 0.25);}
button.hamburger {color: #343f52 !important;}
.nav-link, .dropdown-item {font-weight: 500;}
.navbar-expand-lg .navbar-nav .nav-link {padding-right: 0.6rem;padding-left: 0.6rem;}
.navbar.navbar-bg-dark button.hamburger, .navbar.navbar-dark button.hamburger, .navbar.position-absolute:not(.fixed):not(.navbar-light) button.hamburger {color: #fff !important;}
body.page-template-template-about .navbar-expand-lg.transparent:not(.fixed) {padding-top: 0; background: rgba(84,168,199,0.7) !important;}

/* Buttons */

.btn-sm, .btn-group-sm>.btn {padding: 0.3rem 1rem;}
.btn-xs, .btn-group-xs>.btn {padding: 0.2rem 0.8rem;}

/* Home */

.display-1, 
.display-2, 
.display-3, 
.display-4, 
.display-5, 
.display-6, 
.display-7, 
.display-8 {font-family: 'Joan', sans-serif; font-weight: 400;}


/* Swiper Slide Equal Height Fix */

.slide-inner {display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 2rem 1.5rem 2.5rem;}

/* Footer */

.widget .list-unstyled:not(.tag-list) li+li {margin-top: 0;}
.progress-wrap:after {color: orange !important;}
.progress-wrap svg.progress-circle path {stroke: orange !important;}

/* Responsive */

@media (max-width: 991.98px) {
    .keyline-left.kl-c-mob {margin: 0.2rem auto 0.8rem auto;}
    .offcanvas.offcanvas-end {top: 50%; right: 50%; bottom: auto; left: auto; transform: translate(50%, -50%) !important; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important; overflow: hidden;}
    .offcanvas.offcanvas-end.show {opacity: 1; visibility: visible; transform: translate(50%, -50%) !important;}
    .offcanvas.offcanvas-end .offcanvas-body {overflow-y: auto; -webkit-overflow-scrolling: touch;}
    .offcanvas.offcanvas-end {transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;}
    .offcanvas-backdrop.fade {transition: opacity 0.5s ease-in-out !important;}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas.offcanvas-end {transition: none !important;}
}