:root{
    --color-blue: #1F2E4A;
    --color-orange: #D35418;
    --color-light:  #E5E5E5;
    --color-body: #333333;
}

body{font-family: "Onest", sans-serif; color: var(--color-body); line-height: 1.5;}
h1{font-weight: 700;}
h2{font-weight: 600;}


a:hover{color: var(--color-orange);}

.bg-blue{background-color: var(--color-blue) !important;}
.bg-light{background-color: var(--color-light) !important;}

.text-orange{color: var(--color-orange) !important;}
.text-body{color: var(--color-body) !important;}

 .fs-12{font-size: 0.75rem !important;}

.img-orange{filter: brightness(0) saturate(100%) invert(44%) sepia(95%) saturate(2608%) hue-rotate(353deg) brightness(86%) contrast(92%);}

.py-100{padding-block: 6.25rem;}

/*=== Buttons ===*/
.btn {border-radius: var(--bs-border-radius-pill); font-weight: 700; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.375rem; --bs-btn-border-width: 2px; white-space: nowrap;}
.btn-lg{--bs-btn-padding-x: 2rem; --bs-btn-padding-y: 0.5rem;}

.btn-primary {--bs-btn-bg: var(--color-orange); --bs-btn-border-color: var(--color-orange); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--color-orange); --bs-btn-hover-border-color: var(--color-orange); --bs-btn-active-bg: var(--color-orange);
--bs-btn-active-border-color: var(--color-orange);}
.btn-primary:hover img{filter: brightness(0) saturate(100%) invert(44%) sepia(95%) saturate(2608%) hue-rotate(353deg) brightness(86%) contrast(92%);}

.btn-white {--bs-btn-bg: var(--bs-white); --bs-btn-color: var(--color-blue); --bs-btn-border-color: var(--bs-white); --bs-btn-hover-border-color: var(--bs-white);}

.btn-outline-dark{--bs-btn-color: var(--color-blue); --bs-btn-border-color: var(--color-blue); --bs-btn-hover-bg: var(--color-blue); --bs-btn-hover-border-color: var(--color-blue); --bs-btn-active-bg: var(--color-blue); --bs-btn-active-border-color: var(--color-blue); --bs-btn-disabled-color: var(--color-blue); --bs-btn-disabled-border-color: var(--color-blue);}

.btn-link{text-decoration: none; --bs-btn-color: var(--color-orange); --bs-btn-hover-color: var(--color-orange); font-weight: 500;}

.form-check-input:checked {background-color: var(--color-blue); border-color: var(--color-blue);}

/*=== Header ===*/
.header-top .nav li + li, .footer .nav li + li{position: relative;}
.header-top .nav li + li:before, .footer .nav li + li:before{content: ''; position: absolute; left: 0; height: 1.25rem; top: 0.5rem; border-left: 1px solid var(--bs-white);}
.header-top .nav .nav-link, .footer .nav .nav-link{color: var(--bs-white); padding: 0.5rem 1.25rem; line-height: 1;}
.header-top .nav .nav-link:hover, .footer .nav .nav-link:hover{color: var(--color-orange);}

.main-nav .nav-link{color: var(--color-body); text-transform: uppercase; font-size: 1.125rem; padding: 0.5rem 1.25rem !important;} 
.main-nav .nav-link:hover, .main-nav .nav-link.active, .main-nav .nav-link.show{color: var(--color-orange);}

.home-hero{background: url("../images/hero-bg.jpg") no-repeat center center;}
.hero-search{background-color: #FFFFFF80; box-shadow: 0 0 0 8px #FFFFFF20;}

.card-img-hover .card-img{border-radius: 0.75rem;}
.card-img-hover .card-img-top{transition: 0.5s all;}
.card-img-hover:hover .card-img-top{transform: scale(1.2);}
.card-img-hover .text-bg-primary{background-color: var(--color-orange) !important; top: 0.625rem; right: 0.625rem; --bs-badge-padding-x: 0.75rem; --bs-badge-padding-y: 0.375rem; z-index: 1;}

.latest-blog-post .card-img-hover:hover h3 a{color: var(--color-orange) !important; }

.sidebar-widget .badge{--bs-badge-padding-x: 0.75rem; --bs-badge-padding-y: 0.375rem; font-size: 0.813rem; cursor: pointer;}
.sidebar-widget .badge:hover{background-color: var(--color-orange) !important; color: var(--bs-white) !important; border-color: var(--color-orange) !important;}

@media (min-width: 1200px){}
@media (min-width: 992px){
    .w-lg-auto{width: auto !important}
}
@media (min-width: 768px){
    .w-md-auto{width: auto !important}
}
@media (max-width: 1400px) {
    .footer .nav .nav-link{padding: 0.5rem 1rem;}
    .footer .nav li + li:before {top: 0.375rem;}
}
@media (max-width: 1200px) {
    section.py-100{padding-block: 5rem;}
    
    .navbar-brand img{max-height: 3rem; width: auto;}
    .main-nav .nav-link{padding: 0.5rem 0.75rem !important;}

}
@media (max-width: 992px) {
    section.py-100{padding-block: 4rem;}

    .home-hero{background-size: cover;}
    .hero-banner .hero-search{border-radius: 0.5rem !important; padding: 1rem !important;}

    .footer .nav .nav-link{padding: 0.5rem 1rem;}
}
@media (max-width: 768px) {

}
@media (max-width: 576px) {}