.navbar {
  box-shadow: 2px 2px 5px #5a306b;
  opacity: 0.9; 
  position: fixed;
  top: 0;
  z-index: 999;
}

.header-content { 
padding-top: 140px !important;
}

.navbar .nav-item .nav-link {
  color: #fff;
  padding: 8px 12px;
  display: flex;
  top: 50px;
  border-radius: 3px;
  max-width: 992px;
  margin: 0px auto; 
}

.navbar-brand {
  width: 100%;
  max-width: 70%;  
}

.navbar-brand_mobile {
  display: none; 
}

.logo {
  width: 50%;
}


.nav-link:hover {
  background-color: #c482f0;
  transition: 0.5s;
}


.background-overlay {
  background: rgba(77, 2, 121, 0.7);
  top: 0;
  left: 0;
  width: 100%;
 /* height: 100%;*/
}


.form-control, .btn{
  border-radius: 0;
}

.team ,footer {
    background: #5a306b;
}

.card-img-top {
  width: 60%;
  display: flex;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


.container .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap:15px;
}

.container .box-container .box{
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  border-radius: 5px;
  background: #fff;
  text-align: center;
  padding:30px 20px;
}

.container .box-container .box img{
  height: 80px;
}

.container .box-container .box h3{
  color:#444;
  font-size: 22px;
  padding:10px 0;
}

.container .box-container .box p{
  color:#777;
  font-size: 15px;
  line-height: 1.8;
}

.container .box-container .box .btn{
  margin-top: 10px;
  display: inline-block;
  background:#333;
  color:#fff;
  font-size: 17px;
  border-radius: 5px;
  padding: 8px 25px;
  justify-content: center;
  align-items: center;
  
}

.container .box-container .box .btn:hover{
  letter-spacing: 1px;
  
}

.container .box-container .box:hover{
  box-shadow: 0 10px 15px rgba(156, 21, 197, 0.582);
  transform: scale(1.03);
}


#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}

#contact textarea {
height:100px;
max-width:100%;
resize:none;
}

#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:rgba(212, 0, 255, 0.438);
color:#ffffff;
margin:0 0 5px;
font-size:18px;  
}

#contact button[type="submit"]:hover {
background:rgba(197, 0, 204, 0.445);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
color: #ffffff;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}

.flags, .flags_mobile{
width: 75px;
display: flex;
align-items:left;
justify-content: space-between;
}

.flags_mobile {
display: none;
}

.flags_item {
width: 30px;
}

.img-01{
display: flex;
justify-content: left;
padding: 25px;
width: 100px;

}

.img-02{
display: flex;
justify-content:right;
padding: 25px;
width: 100px;
} 


.img-03{
display: flex;
justify-content:right;
padding: 25px;
width: 100px;
} 

.btn,.download-btn {
font-family: "Roboto", sans-serif;
font-size: 15px;
font-weight: bold;
background: #5a306b;
width: 200px;
padding: 20px;
text-align: center;
align-items: center;
text-decoration: none;
text-transform: uppercase;
color: #fff;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.0.1);
}

.btn:hover, .btn:focus, .btn:active{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.0.5);
color: #fff;
background-color: blueviolet;

}


.download-btn:hover, .download-btn:focus, .download-btn:active {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.0.5);
background-color:blueviolet;
color:#fff;
}


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}


.body{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 100vh;
}


.card {
position: relative;
width: 300px;
height: 350px;
margin: 20px;
justify-content: center;
}

.card .face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
transition: .5s;
}


.card .front {
transform: perspective(600px) rotateY(0deg);
box-shadow: 0 5px 10px #000;

}


.card .front img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}


.card .front h3{
position: absolute;
bottom: 0;
width: 100%;
height: 45px;
line-height: 45px;
color: #000;
background: rgba(236, 218, 245, 0.959);
text-align: center;
}


.card .back{
transform: perspective(600px) rotateY(180deg);
background: rgb(82, 3, 102);
padding: 15px;
color: #f3f3f3;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
box-shadow: 0 5px 10px #000;
}

.card .back .link{
border-top: solid 1px #f3f3f3;
height: 50px;
line-height: 50px;
}

.card .back .link a{
color: #f3f3f3;
}

.card .back .h3{
font-size: 30px;
margin-top: 20px;
letter-spacing: 2px;
}

.card .back .p{
letter-spacing: 1px;

}


.card:hover .front{
transform: perspective(600px) rotateY(180deg);
}

.card:hover .back{
transform: perspective(600px) rotateY(360deg);
}

.description{
color: #620786;
font-size: 1.5rem;
font-weight: bold;
font-family: 'Secular One', sans-serif;
}

.about_title, .title_portfolio, 
.title_services,.title_contact{
  color: #000;
  font-size: 2.5rem;
  font-family: Poppins,sans-serif;
  justify-content: space-between;
  text-align: center;
  line-height: 50px;
  margin-top: 20px;
  font-weight: bold;
}

.description h3{
color: #000;
font-size: 1.3rem;
font-family: Raleway,sans-serif;
font-weight: 600;
}

.description p{
color: #000;
font-size: 1.1rem;
font-family: Raleway,sans-serif;
line-height: 40px;
}

.skills_title{
color: #000;
font-size: 1.3rem;
font-family: Raleway,sans-serif;
font-weight: 600;
}

.subtitle_portfolio, .subtitle_services, .subtitle_contact{
font-weight: 40px;  
font-size: 1.3rem;
justify-content: space-between;
text-align: center;

}

html{
scroll-behavior: smooth;
}

section[id]{
scroll-margin-top: 70px;
}


.form{
width: 500px;
margin: auto;
background: rgba(211, 160, 240, 0.7);
padding: 10px 20px;
box-sizing: border-box;
margin-top: 20px;
border-radius: 7px;

}

input, textarea{
width: 100%;
margin-bottom: 20px;
padding: 7px;
box-sizing: border-box;
font-size: 17px;
border: none;
}

textarea{
min-height: 100px;
height: 200px;
max-width: 100%;
}


.go_up{

position: fixed;
bottom: 20px;
right: 30px;
font-size: 30px;
font-family: Raleway,sans-serif;
color: #c482f0;
z-index: 99;
}

.message_sent, .message_error{
display: none;
color:  rgba(77, 2, 121, 0.7);
font-size: 1 rem;
font-weight: bold;
margin-top: 20px;
align-content:center;
}

@media (max-width:1024px){
.navbar-brand {
  max-width: 50%;
}

.logo{
  width: 200px;
  display: flex;
  left: 100%;
  top: 70px; 
}
}

@media (max-width: 768px) {
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.7); /* Ajusta según tus necesidades */
}

.navbar-brand {
  display: flex;
}

.navbar-brand_mobile {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.logo {
  width: 200px;
  display: flex;
  position: absolute; /* Mantener el logo en posición fija */
  top: 10px; /* Ajusta la posición vertical según sea necesario */
  left: 20px; /* Ajusta la posición horizontal según sea necesario */
}

.flags {
  display: none;
}

.flags_mobile {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between; /* Asegura que las banderas estén distribuidas */
}

#flag_es {
  justify-content: end;
}

#flag_en {
  justify-content: start;
}

.navbar-collapse {
  position: absolute;
  top: 60px; /* Ajusta según la altura de tu navbar */
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Ajusta según tus necesidades */
  z-index: 1;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-item, .nav-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.form {
  width: 100%;
}
}