.mg-t{
    margin-top: 100px;
}
.pd-side{
    padding: 0 5%;
}

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

.background{
	background-color: #002259;
}

.background-right{
	background: url(imagenes/Light-circle.svg) right bottom no-repeat;
	background-size: 70%;
}

.background-left{
	background: url(imagenes/Light-circle.svg) left bottom no-repeat;
	background-size: 50%;
}




/* Services Page */

#banner{
	position:relative;
	background:url(imagenes/banner5.webp) left center no-repeat;
	background-size: cover;
	height: 30em;
	box-shadow: #002259 0 -0.5em 0 0 inset;
	display:flex;
	justify-content: center;
}


#banner div{
	display:flex;
	justify-content: center;
	flex-direction: column;
	max-width: 1850px;
	width: 100%;
	height:100%;
	padding: 0 10%;
	
}

#banner h1{
	margin: 0 !important;
	font-size: 3.2em;
	line-height: 1.5em;
	color: #D5B973;
	font-weight: 600;
	z-index:3;
}

#banner div > span{
	margin: 0 !important;
	font-size: 2.2em;
	line-height: 32px;
	color: #fff;
	font-weight: 400;
	z-index:3;
}





/* contenedor intro */


.c-content{
	position: relative;
	
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: #002259 0 -0.5em 0 0 inset;
	padding-bottom: 10%;
	
}

.c-div {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	color: #002259;
}
.c-div div{
	padding: 10% 15% 5% 15%;
}

.c-div2 {
	width: 75%;
	display: flex;
	color: #002259;
	gap: 50px;
}
.c-div2 div{
	text-align: start;
}

.c-div2 div > img{
	width: 100%;
}

.c-div3 {
	width: 75%;
	display: flex;
	flex-direction: column;
	color: #002259;
	padding-top: 5%;
	padding-bottom: 5%
}

.c-div3 > div:nth-child(1){
	display: flex;
	justify-content: center;
}
.c-div3 > div:nth-child(2){
	display: flex;
	flex-direction: row;
	gap: 50px;
}

.c-div3 > div:nth-child(2) > div{
	display:flex;
	flex-direction: column;
	column-gap: 50px;
}


.c-div3 > div:nth-child(2) > div > div{
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: start;
	text-align: start;
	margin-top: 30px;
	overflow: hidden;
}

.c-div3 a{
	display:inline-block;
	width: 100%;
	color: #fff;
	background: #002259;
	padding: 10px;
		
}
.c-div3 button{
	position: absolute;
	top: 5px;
	right: 5px;
	
}

.c-div3 a ~ div{
	padding: 0 10px;
	
}


@media (min-width: 769px){
	#banner{
		background-position: top center;
	}
	
	#banner div{
		align-items: start;
	}
	#banner::before{
		position:absolute;
		width: 100%;
		height: 100%;
		content: '';
		top:0;
		left:0;
		background: linear-gradient(
			to right,
			rgba(0,34,89,0.5) 0%,
			transparent 100%);
	}


	.c-div2 {
		flex-direction: row;
	}

	.c-div2 div{
		width: 50%;
	}

	.c-div3 > div:nth-child(2){
		flex-direction: row;
		gap: 50px;
	}

	.c-div3 > div:nth-child(2) > div{
		width: 50%;
	}


	/* menu */

	.submenu {
    		position: absolute;
    		top: 0;
    		left: 100%;
    		width: 100%;
    		padding: 1em 2em;
    		background: #002259;
	}

	.over{
		overflow: hidden;
		display: none;
	}

	.aesthectic:hover .over{
		overflow: visible;
		display: block;
	}

	.aesthectic button {
    		display: block !important;
    		transform: rotate(270deg);
    		padding: 0 !important;
	}

}
@media (max-width: 768px){

	#banner{
		background-position: top right;
	
	}
	#banner div{
		align-items: center;
	}

	#banner::before{
		position:absolute;
		width: 100%;
		height: 100%;
		content: '';
		top:0;
		left:0;
		background: linear-gradient(
			to right,
			rgba(0,34,89,0.5) 0%,
			rgba(0,34,89,0.5) 100%);
	}

	.c-div div p{
		text-align:start;
	}
	.c-div2 {
		flex-direction: column;
	}
	.c-div2 div{
		width: 100%;
	}
	.c-div3 > div:nth-child(2){
		flex-direction: column;
		gap: 0px;
	}
	.c-div3 > div:nth-child(2) > div{
		width: 100%;
	}

	.over{
		width: 100%;
		padding: 0 30px;
	}
}


.formselect select {
    width: 100%;
    position: relative;
    margin: 0 0 10px 0;
    padding: 10px;
}



.grid-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 30px !important;
    column-gap: 30px;
    margin-bottom: 50px;
}

.grid-box span {
    position: relative;
    background-color: #fff !important;
    color: #000 !important;
    display: inline-flex !important;
    /* flex-wrap: wrap !important; */
    gap: 0px !important;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.grid-box span:hover {
    background-color: #002259 !important;
    color: #fff !important;
}

.grid-box span::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #002259;
    top: 0px;
    left: 0px;
}

.grid-box span:hover::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #D5B973;
    top: 3px;
    left: 3px;
}

/* FULL SCREEN */

@media (min-width: 2201px){
  .grid-box span {
    height: 350px !important;
    width: 20% !important;
  }

}

/* SCREEN DESKTOP XL */

@media (max-width: 2200px) and (min-width: 1751px){
  .grid-box span {
    height: 300px !important;
    width: 20% !important;
  }		
}

/* SCREEN DESKTOP L */

@media (max-width: 1750px) and (min-width: 1441px){
  .grid-box span {
    height: 250px !important;
    width: 20% !important;
  }
}

/* SCREEN DESKTOP */

@media (max-width: 1440px) and (min-width: 1025px){
  .grid-box span {
    height: 200px !important;
    width: 20% !important;
  }
}

/* SCREEN LAPTO */

@media (max-width: 1024px) and (min-width: 769px){
  .grid-box span {
    height: 200px !important;
    width: 32% !important;
  }
}

/* SCREEN TABLET */

@media (max-width: 768px) and (min-width: 451px){
  .grid-box span {
    height: 200px !important;
    width: 28% !important;
  }
}

/* SCREEN MOBIL */

@media (max-width: 450px){
  .grid-box span {
    height: 200px !important;
    width: 75% !important;
  }
}