:root {
  --kbg-white: #ffffff;
  --kbg-gold: #c4ad64;
  --kbg-dkteal: #1e3b4f;
  --kbg-dk-blue: #2a3e7b;
  --kbg-black: #000000;
  --tn-border-width: 4px;
}

.com-sppagebuilder #sp-main-body {padding-top: 80px;}

@media (width < 992px) {
    .com-sppagebuilder #sp-main-body {padding-top: 60px;}
}

#sp-top-bar {padding: 50px 0px 0px 0px;}

#sp-header {
    background: var(--kbg-white);
    position: absolute;
    top: auto;
    box-shadow: none;
    
    &.header-sticky {top: 0px;}
}

.logo {
    margin: 0 auto;
    text-align: center;
}

.logo-image {
    height: 190px;
    margin: 0 auto;
}

@media (width < 992px) {
    #sp-top-bar {padding-top: 30px;}
    #sp-header {height: 60px!important;}
    .logo-image {height: 120px!important;}
}

@media (width < 768px) {
    #sp-top-bar {padding-top: 20px;}
    #sp-header {height: 60px!important;}
    .logo.logo-image {height: 100px!important;}
}
.justify-content-end {
    justify-content: center!important;
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    margin-left: 0px;
}
.sp-megamenu-parent > li:last-child > a {
    padding: 0px 15px;
}

.burger-icon > span {
    background-color: var(--kbg-dk-blue);
}

.offcanvas-menu {background: var(--kbg-white);}

.sp-megamenu-parent > li > a,
.offcanvas-menu {
    font-size: 1rem;
    font-weight: 500;
    color: color(from var(--kbg-dkteal) srgb r g b / 70%);

    .offcanvas-inner ul.menu > li > a,
    .offcanvas-inner ul.menu > li > span {
        font-size: 1rem;
        font-weight: 500;
        color: color(from var(--kbg-dkteal) srgb r g b / 70%);
    }
}

#sp-header a {
    &:hover,
    &:focus,
    &:focus-within {
        color: var(--kbg-dkteal);
        opacity:1;
    }
}

.sp-megamenu-parent > li.active {
    & > a,
    &:hover > a {
        color: var(--kbg-dkteal);
        opacity:1;
    }
}

.offcanvas-menu .offcanvas-inner ul.menu {
    & > li a:hover,
    & > li a:focus,
    & > li a:focus-within,
    & > li span:hover,
    & > li span:focus,
    & > li span:focus-within,
    & li.active a {
        color: var(--kbg-dkteal);
        opacity:1;
    }
}

body,
p,
a,
.montserrat-text {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.font-100 {font-weight: 100;}
.font-200 {font-weight: 200;}
.font-300 {font-weight: 300;}
.font-400 {font-weight: 400;}
.font-500 {font-weight: 500;}
b,
strong,
.font-600 {font-weight: 600;}
.font-700 {font-weight: 700;}
.font-800 {font-weight: 800;}
.font-900 {font-weight: 900;}

@media (width > 1399px) {
    .kbg-text-balance {text-wrap: balance;}
}

.kbg-link {
    font-size: 24px!important;
    text-transform: uppercase;
    color: var(--kbg-white);
    text-decoration: none;
    scale: 1;
    transition: 350ms scale ease-in-out;
    padding: 0px;
    margin: 0px;
    &:hover,
    &:focus,
    &focus-within {
        text-decoration: none;
        scale: 1.1;
        color: var(--kbg-white);
    }
}

@media (width < 991px) {
    .kbg-link {font-size: 22px!important;}
}
@media (width < 768px) {
    .kbg-link {font-size: 20px!important;}
}

.sppb-panel-title {
    font-size: 3rem;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;;
}

#login-form ul.unstyled {
    display: none;
}
.login-button {
    border-radius: 200px;
    padding: 5px 40px;
    color: var(--kbg-dk-blue);
    border: 2px solid var(--kbg-dk-blue);
    background: transparent;

    &:hover,
    &:active,
    &:focus {
        background: var(--kbg-dk-blue);
        color: var(--kbg-white);
        border: 2px solid var(--kbg-dk-blue);
    }
}
.kbg-image-link {
    max-width: 250px;
    margin: 0 auto;
    opacity: .5;
    filter: grayscale(1);
    transition: all .3s ease;

    &:hover,
    &:focus,
    &:focus-within {
      filter: grayscale(0);
      opacity: 1;
  }
}

.images-inset-text {
    color: var(--kbg-white);
    margin: -50px auto 0px auto;
    font-weight: 600;
    padding: 0px 5px 0px 0px;
    font-size: 40px;
}

div .images-inset-text {
    position: relative;
    width: fit-content;
}

.images-inset-background {
    background: color(from var(--kbg-black) srgb r g b / 30%);
    margin: 0 auto;
    line-height: 15px!important;
    padding-inline: 3px;
    outline: 1px solid color(from var(--kbg-black) srgb r g b / 50%);
    border-radius: 200px;
}

.mfp-close {
    font-size: 45px!important;
}
.mfp-close-btn-in .mfp-content .white-popup-block .mfp-close {
    color: var(--kbg-white);  
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: .8;
}

.kbg-highlight-gallery {
    cursor: pointer;
    position: relative;
    z-index: 1;

    &::before,
    &::after {
      content: '';
      position: absolute;
      transition: opacity 200ms ease-in;
    }
    &::before {
        height: calc(100% - calc(var(--tn-border-width) * 4));
        background: var(--kbg-dkteal);
        inset: var(--tn-border-width);
        width: calc(100% - calc(var(--tn-border-width) * 2));
        opacity: 0;
    }
    &:hover::before {
        background: var(--kbg-dkteal);
        opacity: .4;
    }
    &::after {
      transition: content 1000ms ease-in;
    }
}

.multiple-images img,
.single-image img {
    outline: 1px solid color(from var(--kbg-black) srgb r g b / 50%);
    border: 4px solid var(--kbg-white);
}
.multiple-images img {
    box-shadow: 5px 5px 10px 3px color(from var(--kbg-black) srgb r g b / 25%);
}
.sp-scroll-up {
    background: var(--kbg-gold);
    opacity: .4;
    &:hover,
    &:focus,
    &:focus-within,
    &:active {
        background: var(--kbg-gold);
        opacity: 1;
  }
}

.kbg-contact-logo img {max-width: 60%;}
  
@media (width < 768px) {
    .kbg-contact-logo img {max-width: 40%;}
}
.white-popup-block {
    padding: 0px;
    background: transparent;
}