:root{
    --berr-gray:#595758;

    --lgc-white: #fff;
    --lgc-blue-1: #3966fd;
    --lgc-blue-2: #223c95;
    --lgc-blue-3: #162559;
}

html, body{
    height: 100%;
}

#desktopTopMenu .nav-link, #offcanvasMobileTopMenu .nav-link{
    /*font-size: 1.1rem;*/
    font-size: .95rem;
    font-weight: 500;
}

#desktopTopMenu .navbar{
    padding: 0;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--lgc-blue-2);
}

.btn-lgc-1 {
    --bs-btn-color: var(--lgc-white);
    --bs-btn-bg: var(--lgc-blue-1);
    --bs-btn-border-color: var(--lgc-blue-1);
    --bs-btn-hover-color: var(--lgc-white);
    --bs-btn-hover-bg: var(--lgc-blue-1);
    --bs-btn-hover-border-color: var(--lgc-blue-1);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--lgc-white);
    --bs-btn-active-bg: var(--lgc-blue-1);
    --bs-btn-active-border-color: var(--lgc-blue-1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--lgc-white);
    --bs-btn-disabled-bg: var(--lgc-blue-1);
    --bs-btn-disabled-border-color: var(--lgc-blue-1);
}

.btn-lgc-2 {
    --bs-btn-color: var(--lgc-white);
    --bs-btn-bg: var(--lgc-blue-2);
    --bs-btn-border-color: var(--lgc-blue-2);
    --bs-btn-hover-color: var(--lgc-white);
    --bs-btn-hover-bg: var(--lgc-blue-3);
    --bs-btn-hover-border-color: var(--lgc-blue-3);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--lgc-white);
    --bs-btn-active-bg: var(--lgc-blue-2);
    --bs-btn-active-border-color: var(--lgc-blue-2);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--lgc-white);
    --bs-btn-disabled-bg: var(--lgc-blue-2);
    --bs-btn-disabled-border-color: var(--lgc-blue-2);
}

.btn-lgc-3 {
    --bs-btn-color: var(--lgc-white);
    --bs-btn-bg: var(--lgc-blue-3);
    --bs-btn-border-color: var(--lgc-blue-3);
    --bs-btn-hover-color: var(--lgc-white);
    --bs-btn-hover-bg: var(--lgc-blue-3);
    --bs-btn-hover-border-color: var(--lgc-blue-3);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--lgc-white);
    --bs-btn-active-bg: var(--lgc-blue-3);
    --bs-btn-active-border-color: var(--lgc-blue-3);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--lgc-white);
    --bs-btn-disabled-bg: var(--lgc-blue-3);
    --bs-btn-disabled-border-color: var(--lgc-blue-3);
}

.bg-lgc-blue-1{
    background-color: var(--lgc-blue-1);
}
.bg-lgc-blue-2{
    background-color: var(--lgc-blue-2);
}
.bg-lgc-blue-3{
    background-color: var(--lgc-blue-3);
}

.text-lgc-blue-1{
    color: var(--lgc-blue-1);
}
.text-lgc-blue-2{
    color: var(--lgc-blue-2);
}
.text-lgc-blue-3{
    color: var(--lgc-blue-3);
}

.slider-title {
    font-size: calc(1.525rem + 3.3vw);
    font-weight: 300;
    line-height: 1.2;
}

.carousel-item .btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: 0.5rem;
}

@media (max-width: 767.98px) { 
    
    .slider-title {
        font-size: calc(1.375rem + 1.5vw);
    }

    .carousel-item .btn {
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-font-size: 0.875rem;
        --bs-btn-border-radius: 0.25rem;
    }

}

@media (min-width: 992px){

    .navbar-expand-lg .navbar-nav .nav-item:first-child .nav-link {
        padding-left: 0;
    }

}

.fixed-top {
    top: -40px;
    transform: translateY(40px);
    transition: transform .5s;
    z-index: 1044;
}

#headerSliders .carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    z-index: 1;
}

.breadcrumb-berr{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.breadcrumb-item.active, .breadcrumb-item+.breadcrumb-item::before{
    color: var(--lgc-white) !important;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 90px;
    bottom: 30px;
    z-index: 99;
}

.btn-whatsapp{
    position : fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    background-color: #25d366;
    border-color: #25d366;
    color: #ffffff;
}

.btn-whatsapp:hover{
    background-color: #075E54;
    border-color: #075E54;
    color: #ffffff;
}

footer{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1)), url('../images/footer-bg.jpg');
}

footer a{
    text-decoration: none;
}

footer a:hover{
    text-decoration: underline;
}

footer hr{
    opacity: 1;
    color:#fff;
}

.dropdown-item.active, .dropdown-item:active{
    background-color: var(--lgc-blue-2);
}

.element{
    color: var(--bs-dark);
    text-decoration: none;
}

.element:hover{
    color: var(--lgc-blue-2);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

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

.required::after{
    content: '*';
    color: red;
}

.pswp{
    z-index: 5001 !important;
}

.modal-backdrop{
    z-index: 5002 !important;
}

.modal{
    z-index: 5003 !important;
}

.slick-slide:hover{
    cursor: pointer !important;
}

.slick-prev:before, .slick-next:before{
    color: var(--berr-gray) !important;
    font-size: 30px !important;
}

.slick-prev{
    z-index: 1000 !important;
    top: 45% !important;
    left: -13px !important;
}

.slick-next{
    z-index: 1000 !important;
    top: 45% !important;
    right: -5px !important;
}

.buttonFullscreen{
    position:absolute;
    z-index: 1000;
    right: 10px;
    top:10px;
}

/* loader CSS */
.loader {
    display: block;
    --height-of-loader: 4px;
    --loader-color: #0071e2;
    width: 100%;
    height: var(--height-of-loader);
    border-radius: 30px;
    background-color: rgba(0,0,0,0.2);
    position: relative;
  }
  
  .loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: moving 1s ease-in-out infinite;
    ;
  }
  
  @keyframes moving {
    50% {
      width: 100%;
    }
  
    100% {
      width: 0;
      right: 0;
      left: unset;
    }
  }