@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
/*
font-family: 'Bebas Neue', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: "Amatic SC", sans-serif;
font-family: "Amatic SC", sans-serif;
*/

/* Global Styles */

*{
    box-sizing: border-box;
}

body {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	width: 98%;
	background-color: rgb(46, 46, 46);
}
/* Header */

header{
	position: sticky;
	top: 0;
	padding: 0 0.5rem;
    height: 40px;
	background-color: rgb(211, 185, 160);
	border-radius: 5px;
}


.navbar{
	width: 100%;
	height: 40px;
	margin: 0 auto;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	backdrop-filter: blur(15px) ;
}

.navbar .logo img{
   width: 40px;
   height: auto;
   float: left;
}

.navbar .logo-txt{
	color: rgb(0, 0, 0);
	text-align: center;
	font-family: "Amatic SC", sans-serif;
}

.navbar .toggle_btn{
	color: rgb(3, 3, 3);
	font-size: 1.5rem;
	cursor: pointer;
	display: none;
}

/*menu*/

.toggle_btn{
    cursor: pointer;
	align-items: center;
    justify-content: center;
}

.navbar .list-items{
	display: flex;
	gap: 2rem;
	
}

.list-items{
	list-style: none;
}

a{
	color: rgb(255, 255, 255);
	text-decoration: none;
	
}

a:hover {
	color: rgb(255, 212, 102);
}

/*DROPDOWN MENU*/

.dropdown_menu{
	display: none;
	position: absolute;
	right: 0.1rem;
	top: 40px;
	height: 0;
	width: 400px;
	background: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(15px);
	border-radius: 10px;
	overflow: hidden;
	transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open{
	height: 950px;
}

.dropdown_menu li{
	padding: 0.5rem;
	top: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*RESPONSIVE DESIGN*/

@media(max-width: 992px){
	.navbar .list-items,
	.navbar .logo-txt{
		display: none;
	}

    .navbar .toggle_btn{
		display: block;
	}
    
	.dropdown_menu{
		display: block;
	}
}


@media(max-width: 576px){
	.dropdown_menu{
		left: 0.1rem;
		width: unset;
	}

}

/*contenido*/

.main-content{
	padding-top: 30px;
	padding-left: 2.275%;
	padding-right: 2.275%;
}


.foto-portada{
	display: flex;
	flex-direction: column;
	align-items: center;
	clear: both;
}

.foto-portada img{
	width: 70%;
	border-radius: 10px;
	
}

.about h3{
	color: bisque;
}

.about p{
	color: aliceblue;
}


/*ofertas diseño*/

.ofertas-txt{
	justify-content: center;
	text-align: center;
}

.ofertas-txt h3{
	color: bisque;
}

.ofertas{
	display: flex;
	padding: 5px 10px;
	align-items: center;
	gap: 1em;
	justify-content: center;
	flex-grow: 1;

}

@media(max-width:800px){

.ofertas{
	height: 90%;
	flex-direction: column;
}

.column-ofertas{
	max-width: 80%;
	height: 90%;
	padding: 10px;
}

}

.column-ofertas{
	background-color: rgb(99, 99, 99);
	border-width: 3px;
	border-color: #fff;
	outline: auto;
	border-radius: 10px;
	text-align: center;
	justify-content: center;
	padding: 10px 10px;
	width: 80%;
	margin-top: 10px;
	flex: 33%;
}

.column-ofertas-cont{
	padding-bottom: 10px;
}

.column-ofertas-cont .pqtbas{
	color: bisque;
}

.column-ofertas-cont .pqtest{
	color: bisque;
}

.column-ofertas-cont .pqtamp{
	color: bisque;
}

.action_btn{
	background-color: rgb(211, 185, 160);
	color: #000000;
	padding: 0.5rem 1rem;
	margin-bottom: 5px;
	border: none;
	outline: none;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: bold;
	cursor: pointer;
}

.action_btn:hover{
	scale: 1.05;
	color: #fff;
}

.nota-ofertas h4{
	color:#fff;
	font-weight: bold;
}

/*galeria*/

.galery-txt{
	text-align: center;
}

.galery-txt h3{
color: bisque;
}

img{
	width: 100%;
}

.galery{
	display: flex;
	padding: 5px;
	flex-wrap: wrap;
}

.column{
flex: 50%;
padding: 5px;
}

.column img{
	margin-top: 5px;
	border-radius: 10px;
}

@media (max-width: 500px){
	.column{
		flex: 50%;
		}
}

@media (max-width: 300px){
	.column{
		flex: 100%;
		}
}

.oferta p{
	color: #fff;
}
.oferta a{
	color: bisque;
}

.oferta a:hover{
	color: darkgoldenrod;
}

footer{
	bottom: 0;
	padding: 0;
	align-items: center;
	width: 100%;
}

.socialnetworknavbar{
	display: flex;
	justify-content: center;
}

.socialnetworknavbar a{
	text-decoration: none;
	padding: 10px;
	background-color: bisque;
	margin: 10px;
	border-radius: 50%;
}

.socialnetworknavbar a i{
	font-size: 1.5em;
	color: black;
	opacity: 0.9;
}

footer p{
	text-align: center;
	color: #fff;
}

footer b{
	color: crimson;
}

hr{
	background-color: black;
	height: 1px;
}