/* A Custom Style Sheet */

@font-face {
    font-family: "Open Sans";
    src: url("CustomFont.eot");
    src: url("CustomFont.woff") format("woff"),
    url("CustomFont.otf") format("opentype"),
    url("CustomFont.svg#filename") format("svg");
    }
body{
    /*background: lightgrey;*/
    background-image: url('../images/home_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

header {
    /*background-color: #009900;*/
    background-color: #8b4513;
    color: #CCCC00;
	padding: 10px 0;
}
header h2 {
    text-decoration: none;
    text-transform: capitalize;
    font-style: normal;
    color: #FFFFFF;
    text-align: center;
    font-family: Georgia,Algerian,verdana,Arial, Helvetica, sans-serif;
}
header h4 {
    font-style: normal;
    font-family: Georgia,Palatino,times new roman,Vivaldi,sans-serif,Arial,Helvetica;
    color: #F8F8FF;
    text-align: center;
    font-stretch: wider;
}
header>.container-fluid{overflow: hidden;}
header>.container-fluid div{
    float:left;
}
header>.container-fluid>.bubble{
    /*background: rgb(255 255 255 / 30%);*/
    position: absolute;
}
.bubble-md{
    width: 100px;
    height: 100px;
    border-radius: 56px;
}
.bubble.bubble-sm{
    width: 50px;
    height: 50px;
    border-radius: 26px;
}
.bubble.bubble-xs{
    width: 25px;
    height: 25px;
    border-radius: 14px;
}
header>.container-fluid>.bubble:nth-child(1){
    left: 8%;
    top: 77px;
}
header>.container-fluid>.bubble:nth-child(2){
    left: 29%;
    top: -10px;
}
header>.container-fluid>.bubble:nth-child(3){
    left: 80%;
    top: 67px;
}
header>.container-fluid>.bubble:nth-child(4){
    left: 61%;
    top: 58px;
}
header>.container-fluid>.bubble:nth-child(5){
    left: 300px;
    top: -10px;
}
header>.container-fluid>.bubble:nth-child(6){
    left: 78%;
    top: 50px;
}
header>.container-fluid>.bubble:nth-child(7){
    left: 50%;
    top: 101px;
}
header>.container-fluid>.bubble:nth-child(8){
    left: 24%;
    top: 97px;
}
header>.container-fluid>.bubble:nth-child(9){
    left: 18%;
    top: 29px;
}
header>.container-fluid>.bubble:nth-child(10){
    left: 93%;
    top: 71px;
}
header>.container-fluid>.bubble:nth-child(11){
    left: 5%;
    top: 76px;
}
header>.container-fluid>.bubble:nth-child(12){
    left: 34%;
    top: -10px;
}
header>.container-fluid>.bubble:nth-child(13){
    left: 98%;
    top: 19px;
}
header>.container-fluid>.bubble:nth-child(14){
    left: 71%;
    top: 32px;
}
header>.container-fluid>.bubble:nth-child(15){
    left: 39%;
    top: 62px;
}
header>.container-fluid>.bubble:nth-child(16){
    left: 78%;
    top: 50px;
}
header>.container-fluid>.bubble:nth-child(17){
    left: 49%;
    top: -10px;
}
header>.container-fluid>.bubble:nth-child(18){
    left: 8%;
    top: -10px;
}
header>.container-fluid>.bubble:nth-child(19){
    left: 31%;
    top: 78px;
}
header>.container-fluid>.bubble:nth-child(20){
    left: 24%;
    top: 54px;
}
.text-justify{text-align:justify;}
.section_description h2{padding: 30px 0;}
.section_description{
    min-height: 550px;/*78vh;*/
    background: rgb(255 255 255 / 60%);
}
.section_description p{
    font-weight: 500;
}
footer{
    /*background: rgb(188 188 188 / 90%);*/
	background: rgb(255 255 255 / 60%);
    width: 100%;
}
footer>.owner p{margin: 10px 0;}
.ftop{
	background:#ffffff;
}
#frmLogin{
    width: 36%;
    border: 1px solid #737373;
    padding: 20px;
    margin: auto;
    border-radius: 5px;
    box-shadow: 2px 2px 2px;
    background: #FFFFFF;
}
#frmLogin>.form-group{padding-bottom: 20px;}
#frmLogin label{font-weight: 500;}
#btnReset{margin-left: 10px;}
#frmLogin>.btn{box-shadow: 2px 2px #000000;}
.link{text-decoration:none;color:#000000;font-weight: 500;}
.table>thead>tr>td{font-weight: 600;}
.table>thead{background: lightgrey;}
.hidden{display:none!important;}
.important-note{font-weight: bold;color:#d92550;}
#sizeModal h5{font-weight: 600;}
#sizeModal .table tr td{min-width: 216px;}
.btn-size-chart{padding: 0;font-size: 15px;font-weight:600;border: none;background: #fff;color: #1aa0ff;cursor: pointer;}
.lbl-sub{font-size: 13px;}
.email{text-transform: lowercase;}
.mandatory-field, .note{color:red;}
.bg-green{background:#065c06;}
.bg-grey{background:#4a4a4a;}
.bg-green tr td, .bg-grey tr td{color:#ffffff;}
#btnDepartmentLogin{margin-top: 10px;}
.table-condensed{border-collapse: inherit;
    width: -webkit-fill-available;}
.text_selected{background: #d2d2d2;}
#tblUnapprovedUserProfile tr td:nth-child(1){
    font-weight: 600;
}
.all-center, .all-center *{text-align: center!important;margin:auto 0px;}
#tblActiveUsers tr td:nth-child(5){min-width: 100px;}

/* Mobile Responsive */
@media screen and (max-width:699px) {
    #frmLogin{
        width:90%;
    }
    .loader-body{width: 70%;}
    .loader-icon{margin: auto 110px;}
	
}


/* Mobile Responsive */

/* Desktop Responsive */
@media screen and (min-width:1200px){
.section_description{min-height: 668px;}
}
/* Desktop Responsive */

/* Accessibility Options*/
#topBar{
    background: #076a1c;
    border-color: #198a05;
    border-bottom: 1px solid #198a05;
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;

}
#accessibility{padding-top: 10px;}
#accessibilityMenu{margin-bottom: 10px;}
#accessibilityMenu li{display: inline;float:left;}
#accessibilityMenu li a{color:#ffffff;}
.push-right{float:right!important;}
.accessiblelinks li{padding: 5px 7px;}
.accessiblelinks li:nth-child(1), .accessiblelinks li:nth-child(2), .accessiblelinks li:nth-child(3){border: 1px solid #ffffff;}
.accessiblelinks li:nth-child(1){border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
.accessiblelinks li:nth-child(3){border-top-right-radius: 5px;border-bottom-right-radius: 5px; margin-right: 5px;}
.accessiblelinks li:nth-child(4){border: 1px solid #000000;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
.accessiblelinks li:nth-child(5){border: 2px solid #ffaf03;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.accessiblelinks li:nth-child(4) a{color: #ffffff!important;}
.skipContent, .skipContent:hover, .accessiblelinks ul li a{text-decoration: none;color:#000000;}
.form-inline{display: inline-flex;}
.form-inline *{float: left!important;margin-left: 5px;}
.form-inline label{margin-top: 5px;}
.dark{background: #000000;color: #ffffff!important;}
.dark span a{color: #ffffff!important;}
.highContrast.light{background: #ffffff;}
.highContrast.light a span{color:#000000;}
/* Accessibility Options*/

/* Loader */
.loader-container{position: fixed;
    z-index: 10000;
    background: rgb(0 0 0 / 60%);
    width: 100%;
    height: 100%;
    /*display: none;*/
}
.loader-body{    width: 30%;
    height: 100%;
    margin: auto;
    text-align: center;}
.loader-message{font-size: 34px;
    color: #ffffff;
    margin-top: 200px;}
.loader-icon{margin: auto 186px;}
.loader>.ball-grid-pulse>div{background: #076a1c;}
/* Loader */
/*Menu*/
#menu{background:gray;height: 50px;}/*#0ac633*/
#menu ul{margin-bottom: 0;padding-top: 10px;}
#menu ul li{display:inline;list-style:none;padding-right:20px;}
#menu ul li a{text-decoration:none;font-size:18px;color:#000000;font-weight:600;}
#menu ul li ul.dropdown{display:none;}
#menu ul li:hover ul.dropdown{display:block;position:absolute;background:#ffffff;width:160px;margin-top:-1px;margin-left: 50px;z-index:10;}
#menu ul li:hover ul.dropdown li a{color:#000000;}
/*#menu ul li:last-child{float:right;}*/
/*Menu Ends*/
.table-condensed th, .table-condensed tr td{text-align: center;}
.pull-left{float: left !important;}
.pull-right{float: right !important;}
.bold{font-weight: bold;}
.underline{text-decoration: underline;}

/* Datatable export button alignment */
div.dt-top-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  
  div.dt-center-in-div {
    margin: 0 auto;
  }
  
  div.dt-filter-spacer {
    margin: 10px 0;
  }

  thead input {
    width: 100%;
  }
  .upper { text-transform: uppercase; }
  .prev_val{font-weight: 600;}
  
  
  /***************/
  /* Hover dropdown for desktop */
      @media (min-width: 992px) {
        .nav-item.dropdown:hover .dropdown-menu {
          display: block;
        }

        .dropdown-menu {
          display: none;
        }
      }
	  
	  @media (max-width: 991.98px) {
  .navbar {
    background: light; /* You can change this to bg-light or any light color */
  }
}

      /* Sidebar menu for mobile/tablets */
      @media (max-width: 991.98px) {
        .offcanvas-start {
          width: 250px;
        }
      }

      @media (min-width: 992px) {
        /* Hide offcanvas on desktop */
        .offcanvas {
          display: none !important;
        }

        .navbar-collapse {
          display: flex !important;
        }
      }
	  
	  #navbarScroll ul li a{text-decoration:none;font-size:18px;color:#101010d9;font-weight:600;border-block-end:2px solid #ffffff;}
	  #navbarScroll ul li a:hover{text-decoration:none;font-size:18px;color:#000000;font-weight:600;border-block-end:2px solid;border-block-start:2px solid;}  
	  
	  #offcanvasNavbarLabel{font-weight:700;} 
	  .offcanvas-body ul li a{text-decoration:none;font-size:20px;color:#101010d9;font-weight:600;border-block-end:2px solid #ffffff;}
	  
	  #navbarScroll ul li .active{
		  text-decoration:none;font-size:18px;color:#000000;font-weight:600;border-block-end:2px solid;border-block-start:2px solid; background: #98f57e24;
	  }
	  
		.offcanvas-body ul li .active{
		  text-decoration:none;font-size:18px;color:#000000;font-weight:600;border-block-end:2px solid;border-block-start:2px solid; background: #98f57e24;
	  }
	  
	.dropdown-item:active {
		color: #fff;
		text-decoration: none;
		background-color: #ffffff;
	}
	
	.infoAVM {
    background-color: #68c565;
}
.infoAVM li button, .infoNE li button {
    color: #ffffff;
}
.nav-pills .nav-link.active {
    color: #ffffff;
    background-color: #4ba940;
}

.nav-pills .nav-link:hover {
    color: #000000;
    background-color: #4ba940;
}

.element {
    
    background-color: rgba(255, 255, 255, 1);
    color: #000;
    border-radius: 10px;
    box-shadow: 0px 4px 8px -2px rgba(134,233,26,1),
0px 0px 0px 1px rgba(9,30,66,0.08);
  }
  
  .newslink {
	  color: #000000;
	  text-decoration: none;
  }
  
  .infoNE {
    background-color: #68c565;
	 display: flex;
        justify-content: space-between;
        width: 100%;
}

/*photo*/
.gallery-img {
            border-radius: 10px;
            transition: opacity 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        
        /* Hover effect with opacity and shadow */
        .gallery-img:hover {
            opacity: 0.8;  /* Slightly fade the image */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  /* Add a subtle shadow around the image */
        }

        .gallery-container {
            margin-top: 30px;
			    margin-bottom: 50px;
        }

        .modal-body {
            position: relative;
        }

        .modal-body img {
            max-width: 100%;
        }

        .modal-body .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            border-radius: 50%;
            font-size: 2rem;
        }

        .modal-body .prev-btn {
            left: 10px;
        }

        .modal-body .next-btn {
            right: 10px;
        }
		
		/* Ensures all cards have the same size */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
    border-radius: 10px; /* Optional: for rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: for a subtle shadow */
}

/* Set the image size inside the card */
.gallery-img {
    width: 100%; /* Ensure the image takes full width of the card */
    height: 250px; /* Fixed height for the image */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-top-left-radius: 10px; /* Optional: rounded top corners for the image */
    border-top-right-radius: 10px; /* Optional: rounded top corners for the image */
}

/* Styling for the card text */
.card-body {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
}

/* Optional: Styling for card text */
.card-text {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

/*photo*/

/*aboutus*/
        .about-section {
            background-color: #f8f9fa;
            padding: 50px 0;
        }

        .about-section h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }

        .about-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
        }

        .about-content img {
            width: 100%;
            max-width: 350px;
            border-radius: 10px;
            margin: 10px;
        }

        .about-description {
            flex: 1;
            padding: 20px;
        }

        .about-description p {
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .history-section {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 50px;
        }

        .history-section .history-text .museum-info {
            flex: 1;
            padding: 20px;
        }

        .history-section img {
            width: 100%;
            max-width: 400px;
            border-radius: 10px;
            margin: 10px;
        }

        .museum-section {
            background-color: #e9ecef;
            padding: 50px 0;
            margin-top: 50px;
        }

        .museum-section h3 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 30px;
        }

        .museum-description {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
        }

        .museum-description img {
            width: 100%;
            max-width: 400px;
            border-radius: 10px;
            margin: 10px;
        }

        .museum-description div {
            flex: 1;
            padding: 20px;
        }
		
		
		
.museum-section p {
    font-size: 1rem;
    line-height: 1.6;
}
@media (max-width: 576px) {
    .museum-section h3 {
        font-size: 1.5rem;
    }
}

/*aboutus*/

/* Optional: To make the icon button fit perfectly inside the input */
.input-group .btn {
    border-radius: 0; /* Ensure no rounded corners for the button */
    border-left: 1px solid #ccc; /* Add a border to the left of the button to make it visually part of the input */
}

.subject-link {
    color: black; /* Default color */
    text-decoration: none; /* No underline */
    transition: color 0.3s ease; /* Smooth transition effect */
}

.subject-link:hover {
    color: blue; /* Hover color */
    text-decoration: underline; /* Optional underline on hover */
}

/*photo*/
#photoGallery .card {
    height: 300px; /* Uniform height for all cards */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#photoGallery .card-img-top {
    height: 200px; /* Fixed height for images */
    object-fit: cover; /* Uniform image scaling */
}

#photoGallery .card-body {
    text-align: center;
    padding: 10px;
}

.col-md-3_photo {
    display: flex;
    justify-content: center; /* Center-align cards */
}

/*photo*/

/*password*/

/* Ensure the button is always above the input */
#togglePassword {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    height: auto; /* Ensures it adjusts to the content */
    z-index: 10; /* Keeps the button above the input field */
}
/* Remove click effects */
#togglePassword:focus,
#togglePassword:active {
    outline: none;
    box-shadow: none;
    background: transparent;
}

/* Add padding to the input to avoid overlap with the button */
#txtpassword {
    padding-right: 2.5rem; /* Enough space for the toggle icon */
    position: relative;
    z-index: 1; /* Ensure the input does not overlap the button */
}

/* Style for the eye icon */
#passwordIcon {
    font-size: 1.2rem; /* Adjust size as needed */
    color: #6c757d; /* Neutral color */
}

#passwordIcon:hover {
    color: #000; /* Change color on hover */
}

/*password*/

  .news-container {
    overflow: hidden;
    position: relative;
}

.news-scroll {
    position: absolute;
    width: 100%;
    animation: scrollUp 20s linear infinite;
}

/* Pause on hover */
.news-container:hover .news-scroll {
    animation-play-state: paused;
}

@keyframes scrollUp {
    0% {
        top: 100%;
    }
    100% {
        top: -100%;
    }
}