/* popup link buttons */
.open-btn{
display:inline-block;
/* padding:12px 20px;
margin:10px;
background:#007bff; */
color:#fff;
/* text-decoration:none;
border-radius:6px; */
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
.search-btn{color: #2e2e2e; font-size: 20px;}
/* popup overlay */
.popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:9999;
}

/* active popup */
.popup-overlay.active{
opacity:1;
visibility:visible;
}

/* popup box */
.popup-box{
background-color:#fff;
padding:25px;
border-radius:10px;
max-width:500px;
width:90%;
transform:scale(.8);
transition:0.3s;
position:relative;
}
.popup-box h3{
    color: var(--black);
    text-align: center;
    font-size: 28px;
    margin-bottom: 5px;
    font-family: var(--font-demi);
}
.popup-box p{
    color: var(--black);
    text-align: center;
    margin-bottom: 15px;
}
/* animation */
.popup-overlay.active .popup-box{
transform:scale(1);
}

/* close button */
.popup-close{
    position: absolute;
    top: -4px;
    right: 9px;
    font-size: 35px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--black);
        z-index: 11;
}
.popup-menu-wrap{    overflow-y: auto; background-image: url(../images/menu-bg.jpg);
background-position: top center; background-repeat: no-repeat; background-size: cover;}

.popup-menu-wrap .popup-box{   
   max-width: 100%;
    height: 100%;
    width: 100%;
    border-radius: 0; background-color: transparent;
  
padding: 0px;}
.popup-menu-wrap .popup-close{ color: var(--white);}

/*************** search ***************/
.input-container {
	display: flex;
	gap: 0 10px;
	align-items: center;
	border-radius: 10px;
	padding: 12px;
	background-color: rgba(255, 255, 255, 0.8);
	position: relative;
	align-items: center;
	justify-content: space-between;
}

.search-input {
	flex-grow: 1;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 7px;
	color: var(--black) !important;
	background-color: transparent !important;
	outline: none;
	vertical-align: middle;
	line-height: 50%;
	height: 50px;
	padding: 0 25px;
	font-size: 14px;
}

.search-button {
	background-color: var(--primary-color);
	color: var(--white);
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 0;
	outline: none;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.search-button:hover {
	background-color: var(--secondary-color);
	color: var(--white);
}


@media only screen and (max-width: 767px) {

.search-btn {
 
    position: absolute;
    top: 10px;
    right: 50px;}
}