@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
:root{
  --font-primary: "Outfit", sans-serif;  
}
html{
  --nav-links-color: #adacac;
  --bg-light: rgba(0, 0, 0, 0.171);
  --bg-white: #ffffff;
  --bg-black: #232020;
  --text-white: #ffffff;
  --text-black: #232020;
  --border-black: #232020;
  --text-light: #a0a2a3;
  --border-light: #e3e8ec;
  --border-black: #232020;
}

.font-outfit{font-family: "Outfit", sans-serif;}
.border-dark{border-color: var(--border-black) !important;}
.text-black{color: var(--text-black) !important;}
.btn-dark{
  background-color: var(--bg-black) !important;
  color: var(--text-white) !important;
  border-color: var(--border-black);
}
.btn-dark:hover{
  filter: brightness(1.2);
}
.bg-white{background-color: var(--bg-white) !important;}

body{font-family: var(--font-primary);background-color: var(--bg-white);color: var(--text-black);}

header{padding: 50px 0 00px 0;}
header img{position: absolute;z-index: 0;right: 0;width: 100%;max-height: 250px;object-fit: contain;object-position: right;top: 0;}
header nav{position: relative;z-index: 1;}
header nav.navbar .nav-item{}
header nav.navbar .nav-item .nav-link{color: var(--nav-links-color);padding: 2px 25px;}

header nav.navbar .nav-item .nav-link:focus,
header nav.navbar .nav-item .nav-link:hover,
header nav.navbar .nav-item .nav-link.active{background-color: var(--bg-light);color: var(--text-light);}
header nav.navbar .dropdown-menu 
{background-color: var(--bg-light);}
header nav.navbar .dropdown-menu a
{color: var(--text-light);}
header nav.navbar .dropdown-menu a:hover{background-color: var(--bg-light);color: var(--text-light);}
header nav.navbar .dropdown-menu .active{background-color: var(--bg-light);color: var(--text-light);}

.fs-18{font-size: 18px;}

.hero-section{margin-top: 150px;}
.imgs-together{}
.imgs-together img{border-radius: 10px;}
.imgs-together .col-12 img{height: 100%;}

.form-control{border-color: #000000 !important;border-radius: 0;}

.proyecto-item{}
.proyecto-item img{height: 300px;object-fit: cover;object-position: center;width: 100%;border-radius: 20px}
.proyecto-item .img-wrapper{position: relative;}
.proyecto-item .img-wrapper span{position: absolute;right: 0;top: 20px;padding: 10px 25px;font-weight: 300;}




.espresa-section{}
.espresa-section .row img{}



.servicios-item{}
.servicios-item img{height: 270px;object-fit: cover;object-position: center;width: 100%;border-radius: 20px}
.servicios-item .img-wrapper{position: relative;}
.servicios-item .img-wrapper span{position: absolute;right: 0;top: 20px;padding: 10px 25px;font-weight: 300;}








.contacto-form{}
.contacto-form .form-label{margin-bottom: 2px;display: block;}
.contacto-form .form-control{border: 1px solid var(--border-light);padding: 10px 15px;}
.contacto-form .form-control:focus
{box-shadow: none !important;border-color: var(--border-black);border-width: 2px;}
.contacto-form .form-control::placeholder{color: var(--text-light);}
.contact-infos{}
.contact-infos svg path,
.contact-infos svg{fill: #000;stroke: #000;color: #000;}
.contact-infos a{color: #000;text-decoration: none;}





@media(max-width:1200px){
  header nav.navbar .navbar-nav{
    background-color: var(--text-black);
    padding: 10px;
    border-radius: 5px;
  }
  header nav.navbar .nav-item .nav-link{
    color: var(--text-white);
    padding: 10px 10px;
    border-radius: 5px;
  }
  .hero-section {
    margin-top: 50px;
}
}


.espresa-section{}
.espresa-section .logo-img{position: absolute;right: 40px;top: 100px;}