/* html {
    scroll-behavior: auto;
} */
body {
    /*background: #D7DDE8 !important;*/
    font-family: 'Ubuntu', sans-serif !important;
    color: #465A7B !important;
}
/* body {
    
    position: relative;
    background-image: url("../video/dlb-sea-rocks-graphic2.webp");
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	color: #fff;
	text-align: center;
	padding: 7.5em 0 2em 0;
	cursor: default;
  } */

.accentText {
    color: rgba(219,255,1,1) !important;
    background-color: #46587C !important;
    padding: 10px;
    /* border-radius: 25px;*/
    text-align: center;
    /* color: #C63F6E !important;*/
    /*    color: #4990AF !important;*/
}

.altText {
    color: white !important;
    background-color: rgba(70,90,123,.9) !important;
    padding: 10px;
    /* border-radius: 25px;*/
    /* text-align: center;*/
    /* color: #C63F6E !important;*/
    /*    color: #4990AF !important;*/
}

.scroll-snap-container {
    overflow-y: scroll;
    scroll-snap-type: y proximity;
}

.toast-success {
    color: #155724 !important;
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    position: fixed;
    top: 10px;
    right: 0;
    width: 100%;
    z-index: 1000
}


.scroll-snap-element {
    scroll-snap-align: start;
}

.hide {
    display: none !important;
}

.fullscreen {
    min-height: 100vh;
    width: 100%
}

.tooltip-inner {
    background-color: rgba(70,90,123,.95) !important;
    color: rgba(219,255,1,1) !important;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: rgba(70,90,123,.95) !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: rgba(70,90,123,.95) !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: rgba(70,90,123,.95) !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: rgba(70,90,123,.95) !important;
}

/*.zoom:hover {
    transform: scale(1.5);
}*/

/* [1] The container */
.img-hover-zoom {
    height: 100%; /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    /* [2] Transition property for smooth transformation of images */
    .img-hover-zoom img {
        transition: transform .5s ease-in-out;
        transform: scale(1.0);
        transform-origin: top left;
    }

    /* [3] Finally, transforming the image when container gets hovered */
    .img-hover-zoom:hover img {
        transform: scale(1.5);
        transform-origin: top left;
    }

.adaptive-section {
    min-height: 100vh;
    position: relative;
    background-image: url("../images/about-us.jpg");
    /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
    /*  animation: gradient 15s ease infinite;*/
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #465A7B;
    text-align: center;
    /*padding: 7.5em 0 2em 0;*/
    cursor: default;
}

.fixed-top {
    right: auto !important;
}

.navbar-collapse {
    /*margin-top: 5px;*/
    margin-left: 5px;
    flex-basis: 0% !important;
}

.navbar-dark .navbar-toggler-icon {

    
}

.menu-inactive {
    background-image: url(../logo/DLB_logo_light_grey.svg) !important;
    transform: rotate(0deg);
    transition: transform 1s ease;
}

.menu-active {
    background-image: url(../logo/DLB_logo_accent.svg) !important;
    transition: transform 1s ease;
    transform: rotate(90deg);
}

.navbar-toggler-icon:focus, .navbar-toggler-icon:hover, .navbar-toggler-icon:active {
    background-image: url(../logo/DLB_logo_accent.svg) !important;
    transition: transform 1s ease;
    transform: rotate(90deg);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(219,255,1,1);
}

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
    color: rgba(219,255,1,1)
}

svg.navbar-toggler-icon {
    transform: rotate(180deg);
}

.navbar-nav {
    background-color: rgba(70,90,123,.95) !important;
    border-radius: 5px !important;
}

.navbar {
    /* background-color: rgba(70,90,123,1) !important*/
}

.navbar-dark .navbar-toggler {
    color: rgba(70,90,123,.1) !important;
    border-color: rgba(70,90,123,1) !important;
    background-color: rgba(70,90,123,.9) !important;
}

.navbar-nav .nav-link {
    /*color: rgba(70,90,123,1) !important;*/
    /* margin-left: 20px !important;*/
    margin-left: 15px !important;
    margin-right: 10px !important;
    font-weight: bold !important;
    font-family: 'Ubuntu', sans-serif !important;
    /* text-decoration-line: underline !important;*/
}

.fixed-top {
    top: 30px !important;
}

.spacer {
    height: 1rem;
}

#hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #D7DDE8;*/
}

    #hero::after {
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
    }

    #hero video {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        object-fit: cover;
    }

    #hero .logo {
        position: relative;
        text-align: center;
        z-index: 20;
        width: 50%;
    }


.burger-menu {
    position: relative;
    z-index: 30;
}

    .burger-menu button {
        /* position: absolute; */
        position: fixed;
        top: 0px;
        right: 0px;
    }

.logo-btn {
    border: none;
    background: none;
    width: 6rem;
    height: 6rem;
}

.burger-menu .b1 {
    position: fixed;
    top: 6.5rem;
    right: 10px;
    border-radius: 20px;
    width: 100px;
    background: #D7DDE8;
    border-color: #465A7B;
    color: #45597A;
    font-weight: bold;
}



.burger-menu .b2 {
    position: fixed;
    top: 9.5rem;
    right: 10px;
    border-radius: 20px;
    width: 100px;
    background: #D7DDE8;
    border-color: #465A7B;
    color: #45597A;
    font-weight: bold;
}

.burger-menu .b3 {
    position: fixed;
    top: 12.5rem;
    right: 10px;
    border-radius: 20px;
    width: 100px;
    background: #D7DDE8;
    border-color: #465A7B;
    color: #45597A;
    font-weight: bold;
}

.b1:active {
    background: #45597A;
    border-color: #465A7B;
    color: white;
    font-weight: bold;
}

#flt-btn-home, #flt-btn-about, #flt-btn-join {
    display: none;
}

.burger-menu a {
    position: relative;
    /* position: fixed; */
    top: 10px;
    right: 0px;
}

#hero-btn {
    background: none;
    border-radius: 75px;
    border-color: rgb(69,89,122);
    z-index:1000;

}

    #hero-btn:hover {
        background: rgb(69,89,122,1);
        border-color: rgb(69,89,122);
        color: rgba(219,255,1,1);
    }

#welcome-btn {
    background: none;
    color: #45597A;
    border-radius: 20px;
    border-color: rgb(69,89,122);
}

.dlb-btn {
    background: none;
    color: #45597A;
    border-radius: 20px;
    border-color: rgb(69,89,122);
}

    .dlb-btn:hover, .dlb-btn:active {
        background: rgb(69,89,122) !important;
        border-color: rgb(69,89,122) !important;
        /* color: white;*/
        color: rgba(219,255,1,1) !important;
    }

.link-btn {
    color: #45597A;
}

    .link-btn:hover {
        color: #45597A;
        font-weight: bolder;
        text-decoration: underline;
    }

#welcome-btn:hover {
    background: rgb(69,89,122);
    border-color: rgb(69,89,122);
    /*color: white;*/
    color: rgba(219,255,1,1)
}

#learn-more-btn {
    background: none;
    border-radius: 20px;
    border-color: rgb(69,89,122);
}

    #learn-more-btn:hover {
        background: rgb(69,89,122);
        border-color: rgb(69,89,122);
    }


.main-section {
    min-height: 100vh;
    width: 100%;
    background-color: #D7DDE8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    /*    font-size: 1.5rem;  */
    font-family: 'Ubuntu', sans-serif;
}

.main-section-item {
    width: 40%;
    height: 100%;
    margin-top: 10px;
}

.main-section-item-logo {
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.align-right {
    text-align: right;
}

h1 {
    font-family: 'Ubuntu', sans-serif;
    /* font-size: 3.5rem;*/
}

h2 {
    font-family: 'Ubuntu', sans-serif;
}

p {
    /* font-size: .75em;*/
    font-family: 'Ubuntu', sans-serif;
}

.card-section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    background-image: url("../video/dlb-sea-rocks-graphic2.webp");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
 /*   padding: 0em 0 2em 0;*/
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-around;
}



p.card-section {
    /*font-size: 1rem;*/
}

.card-text {
    /* font-size: 1rem;*/
}

.dlb-bg-card {
    /* background: none; */
    background: rgba(0,0,0,.7);
    /*
    opacity: .50;                    /* Standard: FF gt 1.5, Opera, Safari, CSS3 
    filter: alpha(opacity=50);      /* IE lt 8 
    -ms-filter: "alpha(opacity=50)"; /* IE 8 
    -khtml-opacity: .50;             /* Safari 1.x 
    -moz-opacity: .50;               /* FF lt 1.5, Netscape 
    */
}

.services-section {
    display: block;
    /*  overflow: auto;*/
    background: #D7DDE8;
    min-height: 100vh;
}

.filter-btn-nav {
    height: 80px;
}

.footer-section {
    /*  background: #D7DDE8;*/
    /* height: 45px;*/
    font-family: 'Ubuntu', sans-serif;
}

.footer {
    position: fixed;
    /*    padding-top: 1%;*/
    left: 0;
    bottom: 0;
    width: 100%;
    /*    height: 2   em;*/
    background-color: #465A7B;
    color: white;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;

}

.footer-row {
    margin-right: 0px !important;
    margin-left: 0px !important;

}


.copy-right {
    font-size: 1rem;
    text-align: center;
}

.footer-btn {
    color: white;
}


/* CSS used here will be applied after bootstrap.css */
.ekko-lightbox-nav-overlay a {
    color: goldenrod;
}

.gallery-title {
    text-align: center;
    color: #465A7B;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    border-bottom: 1px dotted #465A7B;
    margin-top: 1em;
}

.card-header {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bolder;
}

.card-text {
    font-family: 'Ubuntu', sans-serif;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/*Boot Strap css class */
.row {
    /* width: 80%; */
}

.col {
    justify-content: center;
}

.container {
    color: #465A7B;
}

/*.container-fluid {
    color: #465A7B;
}*/

.btn {
    background: none;
}

    .btn:hover {
        background: rgb(69,89,122);
        border-color: rgb(69,89,122);
        /*color: white;*/
        color: rgba(219,255,1,1)
    }

.active-btn {
    border-color: black;
    background: #465A7B;
    /*color: white;*/
    color: rgba(219,255,1,1)
}

.scroll-down-btn {
    color: #465A7B
}

    .scroll-down-btn:hover {
        background-color: #465A7B;
    }

.scroll-down-btn-hero {
    color: white;
    position: absolute;
    top: 90vh;
    transform: translateY(-100%);
}

    .scroll-down-btn-hero:hover {
        background-color: #465A7B;

    }


.chat-btn {
    color: rgba(219,255,1,1);
    /* background-color: white;*/
    border-radius: 30px !important;
    background: rgb(69,89,122);
    border-color: rgb(69,89,122);
    position: fixed;
    bottom: 90px;
    right: 20px;
    /* transform: translateY(-100%);*/
    z-index: 10000;
}

/* Medium screens */
@media all and (max-width: 800px) {
    .main-section {
        /* When on medium sized screens, we center it by evenly distributing empty space around items */
        /* justify-content: center; */
        flex-direction: row;
        font-size: 1rem;
    }

    #hero-btn {
        padding: 2px 4px;
        font-size: 80%;
        line-height: 1;
    }
}


/* Small screens */
@media all and (max-width: 500px) {
    .main-section {
        /* On small screens, we are no longer using row direction but column */

        min-height: 100vh;
        width: 100%;
        background-color: #D7DDE8;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        font-size: 1rem;
    }

    h1 {
        font-size: 3rem;
    }

    #hero-btn {
        padding: 4px 9px;
        font-size: 90%;
        line-height: 1.2;
    }

    .main-section-item {
        width: 75%;
        height: 45%;
        margin-top: 12px;
        /* text-align: center;
        align-items: center;
        justify-content: center; */
    }


    .card-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .card {
        /* height: 45%;*/
    }

    .card-text {
        /* font-size: 12px;*/
    }

    .copy-right {
        font-size: .75rem;
        text-align: center;
    }
}