* {
    box-sizing: border-box;
}

:root {
    --primary-color: #0d6efd;
    --secondary-color: #ffa500;
    --light-color: #e0e0e0;
    --first-color-light: #afa5d9;
    --white-color: #ffffff;
    --dark-color: #000000;
    --z-fixed: 100;
  }

html {
    /*start---> to Keep ALWAYS the Footer at the Bottom of A Page */
    height: 100%;
    /* end */
    font-family: 'Inter', sans-serif;
}

h1, h2,h3,h4,h5,h6 {
    font-family: 'Work Sans', sans-serif;
}

a {
    color: var(--dark-color);
}

body {
    /*start---> to Keep ALWAYS the Footer at the Bottom of A Page */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* end */
}

main {
    /*start--> to Keep ALWAYS the Footer at the Bottom of A Page */
    flex: 1;
    /* end */
}

/* Navbar */
.navbar-brand {
    font-family: 'Peralta', cursive;
    font-weight: bold;
    font-size: 24px;
    color: var(--secondary-color) !important;
}

#home-hero {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)),  url('../assets/img-1.jpg'); 
    height: 75vh; 
}

#visit-hero {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0)), url('../assets/img-13.jpg');
    height: 75vh;
}

/* #featuredExhibits .carousel-inner img {
    object-fit: cover;
    object-position: center;
    height: 20vh;
    overflow: hidden;
} */

.carousel-inner .carousel-nms-item {
    width: 75vw;
}

#forum-hero {
    background: url('../assets/forum.png');
    height: 75vh;
}

#home-hero,
#visit-hero,
#forum-hero {
    position: relative;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 50vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

.title-panel {
    position: relative;
}

.page-name {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

#products {
    margin-bottom: 100px;
}

/* Carousel */

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

footer {
    /*start--> to Keep ALWAYS the Footer at the Bottom of A Page */
    margin-top: auto;
    /* end */
}

.logo {
    width: 100px;
  }

.search-form {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1);
}

.search-form input{
    height: 55px;
    text-indent: 7px;
    border: 2px solid #d6d4d4;
}

.search-form input:focus{
     box-shadow: none;
     border: 2px solid var(--secondary-color);  
}

.search-form button{
     position: absolute;
     top: 1px;
     right: 1px;
     height: 53px;
     width: 60px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}

.fa-search {
    font-size: 18px; 
}

#search_btn > .fa-search {
    color: var(--dark-color);
}

#underline {
    background-color: var(--secondary-color);
    width: 50px;
    height: 5px;
    display: block;
    margin-top: 10px;
  }

/* Tabs */
.nav-tabs {
    border-bottom: none !important;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover,
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: 1px solid transparent;
}

.login-reg-nav-link {
    border-bottom: 3px solid transparent;
    text-decoration: none;
    background: none;
    display: inline-block;
    padding-bottom: 5px; 
}

.login-reg-nav-link:hover,
.login-reg-nav-link.active {
    border-bottom: 3px solid var(--secondary-color);
    background: none;
    display: inline-block;
    padding-bottom: 5px;  
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
    background-color: var(--primary-color);
   color: var(--secondary-color) !important;
   border-color: var(--primary-color);
}

.nav-tabs .nav-link:hover {
   background-color: var(--light-color); 
   color: var(--dark-color) !important;
   border-color: transparent
}

/* Navbar */
.navbar .navbar-nav .nav-item {
    position: relative;
}

.navbar .navbar-nav .nav-item:hover::after {
    width: 0;
}

.nav-link {
    color: var(--light-color);
}

.nav-link .fa-caret-down {
    width: 16px;
	text-align: center;
	margin-right: 5px;
	float:right;
}

.navbar .navbar-nav .nav-item .nav-link.active{
    border-bottom: 4px solid var(--secondary-color);
    background: none;
    display: inline-block;
    padding-bottom: 5px;  
}

nav ul li a .cartDown {
	width: 16px;
	text-align: center;
	margin-right: 5px;
	float:right;
}

nav ul ul {
	background: rgba(0, 0, 0, 0.2);
}

nav ul li ul li a {
	border-left: 4px solid transparent;
	padding: 10px 20px;
}

nav ul li ul li a:hover,
nav ul li ul li a.active {
	border-left: 4px solid var(--secondary-color);
}

nav ul li ul li a.active {
    border-bottom: 4px solid transparent !important;
	border-left: 4px solid var(--secondary-color);
}

.sub-menu {
    color: var(--light-color) !important;
}

.sub-menu:hover {
    color: var(--secondary-color);
}

.offcanvas .navbar .navbar-nav .offcanvas-nav-item .nav-link.active{
    background-color: #00388c;
    width: 100%;
}

.offcanvas-nav-item {
    margin: 5px 0;
}

.offcanvas-nav-item .nav-link {
    padding: 1em !important;
}

.offcanvas-nav-item .nav-link:hover{
    background-color: #00388c;
}

@media screen and (min-width: 992px) {
    .navbar {
        padding:  0;
        height: 80px;
    }
    .navbar .navbar-nav .nav-link {
        padding: 1em 0;
    }
    .navbar .navbar-nav .nav-item {
        margin: 0 1.2em;
    }
    .navbar .navbar-nav .nav-item:hover::after {
        width: 100%;
    }
}

.dropdown-toggle::after {
    content: none;
}

.card-img-top {
    width: 100%;
    height: 20vw;
    object-fit:cover;
}

.upcomingEvent_card,
.museum_card {
    background-color: var(--light-color);
}

.useful-links,
.opening-hours {
    text-align: start;
}

/* Apply this style when the screens size is 992px or less */
@media only screen and (max-width: 992px) {
    .card-img-top {
        height: 15vh;
    }
  
    .useful-links,
    .opening-hours {
        width: 40%;
        margin: auto;  
    }

    #map {
        width: 100% !important;
    }

    .carousel-inner .carousel-nms-item {
        width: 100vw;
    }
}
  
  /* Apply this style when the screens size is 768px or less */
  @media only screen and (max-width: 768px) {
    .card-img-top {
      height: 20vh;
    }

    .useful-links,
    .opening-hours {
        width: 50%;
        margin: auto;
    }
  }
  
  /* Apply this style when the screens size is 576px or less */
  @media only screen and (max-width: 576px) {
    .card-img-top {
      height: 25vh;
    }
    
    .useful-links,
    .opening-hours {
        width: 80%;
        margin: auto;
    }
  }

.remove_wishlist {
    position: absolute;
    top: -0.75em;
    right: 0em;
}

.btn-circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

#more {display: none;}

.collection_card {
	box-shadow: 0;
}

.collection_card:hover {
	box-shadow: 0 2px 2px 0 var(--secondary-color);
    transition: box-shadow 0s ease;
}

#map {
    width: 40%;
    height: 40vh;
    border: 1px solid rgba(0,0,0,.125);
  }

  .visit-map {
    width: 100% !important;
    height: 40vh;
    border: 1px solid rgba(0,0,0,.125);
  }


/* footer social links */
.social-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  i.fa-brands {
    font-size: 30px;
    display: inline-block;
    border-radius: 100%;
    box-shadow: 0 0 2px #888;
    padding: 0.1em 0.1em;
    border: 3px solid var(--primary-color);
  }
  
  i.fa-facebook-f {
    padding: 0.1em 0.3em;
  }
  
  i.fa-instagram {
    padding: 0.117em 0.2em;
  }
  
  i.fa-brands:hover {
    box-shadow: 0 0 5px 1px var(--secondary-color);
  }

  footer li a {
    color: var(--white-color) !important;
  }

  li a:hover,
  li a.active {
    color: var(--secondary-color) !important;
  }

  .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 250px;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--light-color);
    --bs-offcanvas-bg: var(--primary-color);
    --bs-offcanvas-border-width: 0px;
}

.btn-close {
    position: absolute !important;
    right: 15px;
    top: 15px;
}

.rounded-circle {
    width: 35%;
}

/* Vide play style start */
.video-container .main-video {
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.video-container .main-video .title {
color: black;
}

.video-container .video-list {
background-color: #fff;
height: 680px;
overflow-y: scroll;
}

.video-container .video-list::-webkit-scrollbar {
width: 7px;
}

.video-container .video-list::-webkit-scrollbar-track {
background-color: #ccc;
border-radius: 50px;
}

.video-container .video-list::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 50px;
}

.video-container .side-video {
    display: flex;

}

.video-container .video-list .side-video {
background-color: #f7f7f7;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin: 10px;
padding: 10px;
cursor: pointer;
}

.video-container .video-list .side-video:hover {
background-color: #ededed;
}

.video-container .video-list .side-video.active {
background-color: #479ed7;
}

.video-container .video-list .side-video.active .title {
color: #fff;
}

.video-container .video-list .side-video .title {
color: #3d3d3d;
font-size: 18px;
}

.video-container .video-list .side-video video {
width: 50%;
border-radius: 5px;
}

/* Video player end */

/* imagemap */
area {
    outline: none;
  }
  
  area:focus {
    outline: 2px solid var(--secondary-color);
  }
  
  .area-highlight {
    outline: 2px solid blue;
    background-color: #0000005d;
  }