:root{
    --green: rgb(38, 174, 97);
    --green-low-opacity: rgba(38, 174, 97, 0.2);
    --green-lighter: #24d671;
    --green-darker: #1a9d53;
    --green-hover: #17683a;
    --soft-grey: rgba(33, 37, 41, 0.071);
    --grey: #6C6C6C;
}

/* scrollbar */
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background-color: var(--green); border-radius: 10px; border: 2px solid #f1f1f1;}
::-webkit-scrollbar-thumb:hover {background-color: #555;  /* Darker color on hover */}

/* extened bootstrap */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1480px;
    }
}
.bg-soft-grey{background-color: var(--soft-grey);}
.text-grey{color: var(--grey);}
.bg-green{background-color: var(--green) !important;}
.bg-light-green{background-color: var(--green-lighter) !important;}
.bg-dark-green{background-color: var(--green-hover) !important;}
.bg-half-dark-green{background-color: var(--green-darker)};
.bg-outline-green:hover{background-color: var(--green);}
.text-green{color: var(--green);}
.border-green{border-color: var(--green) !important;}
.border-double{border-style: double;}
.cursor-pointer{cursor: pointer;}
.form-control:focus, .form-select:focus{border-color: var(--green) !important; box-shadow: 0 0 0 .25rem rgba(38, 174, 97, .25)}
.form-check-input:checked {background-color: var(--green); border-color: var(--green);}
.h-unset{height: unset !important;}

/* links */
a{color: rgb(33,37,41); transition: color 0.1s linear;}
a:hover{color: var(--green);}

/* font sizes */
.fs-24{font-size: 24px;}
.fs-22{font-size: 22px;}
.fs-20{font-size: 20px;}
.fs-18{font-size: 18px;}
.fs-14{font-size: 14px;}
.fs-13{font-size: 13px;}

@media ( (min-width: 0px) and (max-width:575px) ) {
    .m-fs-22{font-size: 22px;}
}

/* svg */
.svg-hover{transition: transform .1s linear;}
.svg-hover:hover{transform:scale(1.2);}
.svg-hover:active{transform:scale(1);}

/* navbar */
#global_menubar{background-color: white !important;}
.menubar_link {font-size: 18px; font-weight: 500; color: rgba(0, 0, 0, 0.65);}
.menubar_link_sub {font-size: 16px; font-weight: 500; color: rgba(0, 0, 0, 0.65);}
@media ( (min-width: 0px) and (max-width:575px) ) {
    #logo_image{width: 230px;}
    .navbar-toggler-icon {width: 1em;height: 1.2em;}
}

/* breadcrumb */
.bg-breadcrumb{background-image: url('../images/breadcrumb.webp'); background-position: right; background-size: cover; background-repeat: no-repeat;}
.breadcrumb-title{font-size: 38px;}
.breadcrumb-subtitle{font-size: 20px;}

/* jobs cards */
.bg-tag{background-color: #f1f1f1;}
.bg-tag-2{background-color: #f5f7fc;}
.job-logo-container{width: 100%; padding-top: 80%;display: block;position: relative;overflow: hidden;box-sizing: border-box;}
.job-logo{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 100%;max-height: 100%;width: auto !important;height: auto !important;}
@media ( (min-width: 0px) and (max-width:575px) ) {
    .logo-mobile-container{position: absolute; right: 0; margin-right: .5rem; width: 22%;}
    .job-logo-container{padding-top: 50%;}
}
.job-cborder{border-bottom-width: 7px; border-bottom-color: #95dab1;}

/* breadcrumb */
@media ( (min-width: 0px) and (max-width:575px) ) {
    .breadcrumb-title{font-size: 30px;}
    .breadcrumb-subtitle{font-size: 16px;}
}

/* footer */
.footer{background-image: url('../images/bg-transparent-squares.webp'); background-size: cover; background-repeat: no-repeat; background-position: bottom center;}
.footer-title{font-size: 20px; position: relative; font-weight: normal;}
.footer-title:before {background: #26ae61;border: 0 none;content: "";height: 2px;left: 0;margin: 8px 0 10px;position: absolute;bottom: -20px;width: 35px;}
.footer-link{color: grey; font-size: 16px; font-weight: normal;}