@charset "utf-8";



:root {
 --fontDefaultFamily: 'Hind', sans-serif;
 --fontDefaultSize: 100%;
 --fontDefaultWeight: 300;
 --fontHeadingFamily: 'Montserrat', sans-serif;
 --fontHeadingSize: 90%; 
 --fontHeadingWeight: 800;
 --primary-color: #0d0b52;
 --secondary-color: #ffc107;
 --gold-color: #fcbf0f;
 --font-color: #424242;
 --bg-color: #ffffff;
 --heading-color: #212529;
 --white-color: #ffffff;
 --grey-background:#f8f8f8;
}



.pulse {
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}



img.logo {
    max-width: 100%;
    height: auto;
    width: auto; /* Use this if you want the logo to scale without distortion */
    max-height: 20vh; /* Adjust this value based on the desired maximum height relative to the viewport */
}



.btn-wide {
	min-width: 10rem;
}
.w-30 {
	width: 30% !important;
}
@media(max-width:820px){
	.w-30 {
		width: 100% !important;
	}
}


#booking-enq {
	background: var(--gold-color);
	margin-top: -140px;
	padding: 4em;
	z-index: 3;
	border-radius: 8px;
	box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1), 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

@media(max-width:820px){
	#booking-enq {
		padding: 2em;
	}	

	
}


#gal_image_results {
	display: grid;
	gap: 1rem;
	overflow: hidden;
	padding: 0.25rem;
}
#gal_image_results div {
  min-height: 200px;
}


#modGal .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.galModal {
	padding: 5rem;
	background-color: rgba(0,0,0,0.8);
}


/* Modal Content */
#modGal .modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 900px;
}

/* The Close Button */
#modGal .close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

#modGal .close:hover,
#modGal .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
#modGal .mySlides {
  display: none;
}

#modGal .cursor {
  cursor: pointer;
}

/* Next & previous buttons */
#modGal .prev,
#modGal .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


#modGal .next {
  right: 1rem;
  border-radius: 3px 0 0 3px;
}
#modGal .prev {
  left: 1rem;
  border-radius: 3px 0 0 3px;
}

#modGal .prev:hover,
#modGal .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


#modGal .row > .column {
  padding: 0 8px;
}

#modGal .row:after {
  content: "";
  display: table;
  clear: both;
}

#modGal .column {
	float: left;
	width: 23.8%;
	margin: 5px;
}



@media(min-width:70em){
	:root {
	 --formWidth: 40%;
	}

	#gal_image_results {
		grid-template-columns: 1fr 1fr 1fr;
	}

}
@media(max-width:70em){

#booking-enq {
margin-top: -40px;
}

	#gal_image_results {
		grid-template-columns: 1fr 1fr;
	}

	:root {
	 --formWidth: 80vw;
	}


}



#msgResp {
	padding: 15px;
}
.come-from-modal.left .modal-dialog,
.come-from-modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: var(--formWidth);
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.come-from-modal.left .modal-content,
.come-from-modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0px;
}

.come-from-modal.left .modal-body,
.come-from-modal.right .modal-body {
    padding: 15px 15px 80px;
}
.come-from-modal.right.fade .modal-dialog {
    right: -var(--formWidth);
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.come-from-modal.right.fade.show .modal-dialog {
    right: 0;
}

.come-from-modal.left.fade .modal-dialog {
    left: -var(--formWidth);
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.come-from-modal.left.fade.show .modal-dialog {
    left: 0;
}



.form-outline {
	border: 1px solid #ddc26f;
	padding: 1rem;
	background-color: #ffc1074f;
	border-radius: 15px;
}
.alphabet {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	border-bottom: 1px solid #ddd;
}
.alphabet__letter {
	background: #ececec;
	color: #000;
	line-height: 40px;
	text-align: center;
	width: 40px;
	margin: 0 2px 0px;
	text-decoration: none;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.alphabet__letter.view_all_btn {
	width: 150px;
	background-color: var(--secondary-color);
}
a.alphabet__letter:focus, 
a.alphabet__letter:hover {
    background-color: #272a38;
    color: #fff;
    text-decoration: none;
}
.alphabet__letter.active {
    background-color: #272a38;
    color: #fff;
}
@media only screen and (max-width: 70em) {

    .alphabet {
        flex-wrap:wrap;
        justify-content:center
    }
    .alphabet__button,
    .alphabet__letter {
        margin:0 5px 10px;
        height:40px;
        line-height:40px
    }
    .alphabet__letter {
        width:40px
    }

}


#paging {
	width: 100%;
}
.bm-img-top.pro {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 200px;
	display: flex;
	padding-top: 1rem;
	border-radius: 50%;
}
.bm-img-top {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 130px;
	display: flex;
	padding-top: 1rem;
	border-radius: 50%;
}

.text-muted {
	--bs-text-opacity: 1;
	color: var(--bs-secondary-color) !important;
	line-height: 1;
	padding: 7px;
}
body{
	font-family: var(--fontDefaultFamily);
	font-size: 	 var(--fontDefaultSize);
	font-weight: var(--fontDefaultWeight);
	line-height: inherit;	
}

h1, h2 {
	font-family: var(--fontHeadingFamily);
	font-weight: var(--fontHeadingWeight);
	line-height: inherit;
}
h3, h4, h5, h6{
	font-family: var(--fontDefaultFamily);

}
.h2pro{

}
.h2basic {
	font-size: 1.3em;
	font-weight: 300;
	text-align: center;
}
.main-body,
#mainSection {
	padding: 4rem;
	position: relative;
}
.bm_btn {
	background-color: var(--secondary-color);
	border-color: #d2b250;
}
.bm_btn_profile{
	background-color: var(--secondary-color);
	border-color: #d2b250;	
	position: absolute;
}
.bm-btn-group {
	border-radius: .375rem;
	position: absolute;
	bottom: 10px;
	left: 15%;
	right: 15%;
	width: auto;
}
.card{
	min-width: 100%;
}
.card.pro {
	background: linear-gradient(150deg,#fff6de,40%,#fff);
	text-align: center;
}
.noBanner {
	height: 40px;
}

.proBanner {
    position: relative;
    margin: 20px
}
.proBanner::before {
	content: "Pro Account";
	position: absolute;
	top: -24px;
	left: -30px;
	padding-right: 10px;
	color: #232323;
	font-weight: bold;
	height: 0px;
	border: 15px solid #ffc107;
	border-right-color: transparent;
	line-height: 0px;
	box-shadow: -0px 5px 5px -5px #000;
	z-index: 1;
	transform: rotate(-5deg);
}
.proBanner::after {
	content: "";
	position: absolute;
	top: 9px;
	left: -29px;
	border: 4px solid #9f7905;
	border-left-color: transparent;
	border-bottom-color: transparent;
}














@media (max-width:1200px){
	.main-body,
	#mainSection {
		padding: 2rem;
	}
}
@media (max-width:782px){

	#gal_image_results {
		grid-template-columns: 1fr;
	}

	.main-body,
	#mainSection {
		padding: 1rem;
	}
}