/*--------------------------------------------------------------
# General
color rgba(25, 37, 90, 1)
--------------------------------------------------------------*/

 @font-face {
     font-family: 'Gotham-Book';
     src: url('../font/GothamBook/GothamBook.ttf');
 }

 @font-face {
     font-family: 'texgyretermesbold';
     src: url('../font/TeXGyre/texgyretermesbold.otf') format("woff");
 }

 @font-face {
     font-family: 'Gotham-Medium';
     src: url('../font/GothamMedium/Gotham-Medium.ttf');
 }

 body {
     background: rgba(25, 37, 90, 1);
     color: #444;
     font-family: "Open Sans", sans-serif;
 }

 a {
     color: #007bff;
     text-decoration: none;
     transition: 0.5s;
 }

 a:hover,
 a:active,
 a:focus {
     color: #0b6bd3;
     outline: none;
     text-decoration: none;
 }

 p {
     padding: 0;
     margin: 0 0 30px 0;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     /*font-family: "Montserrat", sans-serif;*/
     /*font-weight: 400;*/
     margin: 0 0 20px 0;
     padding: 0;
 }

 /*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

 .back-to-top {
     position: fixed;
     visibility: hidden;
     opacity: 0;
     right: 15px;
     bottom: 15px;
     z-index: 996;
     background: white;
     width: 40px;
     height: 40px;
     border-radius: 50px;
     transition: all 0.4s;
 }

 .back-to-top i {
     font-size: 28px;
     color: rgba(25, 37, 90, 1);
     line-height: 0;
 }

 .back-to-top:hover {
     background: rgba(25, 37, 90, 1);
     color: white;
     border: 1px solid white;
 }

 .back-to-top:hover i {
     background: transparent;
     color: white;
 }

 .back-to-top.active {
     visibility: visible;
     opacity: 1;
 }

 /*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

 #header {
     /*height: 80px;*/
     z-index: 997;
     transition: all 0.5s;
     background: transparent;
     /*box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);*/
 }

 #header.header-scrolled {
     height: 60px;
     background: rgba(25, 37, 90, 1);
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
     opacity: 1 !important;
 }

 #header .logo h1 {
     font-size: 36px;
     margin: 0;
     padding: 0;
     font-weight: 400;
     letter-spacing: 3px;
     text-transform: uppercase;
 }

 @media (max-width: 991px) {
     #header .logo h1 {
         font-size: 28px;
     }
 }

 #header .logo h1 a,
 #header .logo h1 a:hover {
     color: #00366f;
     text-decoration: none;
 }

 #header .logo img {
     padding: 0;
     max-height: 72px;
 }

 /*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
 /**
* Desktop Navigation 
*/

 .navbar {
     padding: 0;
 }

 .navbar ul {
     margin: 0;
     padding: 0;
     /*display: flex;
     display: -webkit-flex;*/
     list-style: none;
     align-items: center;
 }

 .navbar li {
     position: relative;
 }

 .navbar a,
 .navbar a:focus {
     display: flex;
     display: -webkit-flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 0 10px 10px;
     font-family: 'Gotham-Book';
     font-size: 17px;
     color: #fff;
     font-weight: 500;
     white-space: nowrap;
     transition: 0.3s;
 }

 .navbar a i,
 .navbar a:focus i {
     font-size: 12px;
     line-height: 0;
     margin-left: 5px;
 }

 .navbar ul li a img,
 .breadcrumbs li a img {
     width: 20px;
 }

 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a {
     color: #fffe;
 }

 .navbar .dropdown ul {
     display: block;
     position: absolute;
     left: 14px;
     top: calc(100% + 30px);
     margin: 0;
     padding: 10px 0;
     z-index: 99;
     opacity: 0;
     visibility: hidden;
     background: #fff;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
     transition: 0.3s;
 }

 .navbar .dropdown ul li {
     min-width: 200px;
 }

 .navbar .dropdown ul a {
     padding: 10px 20px;
     font-size: 14px;
     text-transform: none;
 }

 .navbar .dropdown ul a i {
     font-size: 12px;
 }

 .navbar .dropdown ul a:hover,
 .navbar .dropdown ul .active:hover,
 .navbar .dropdown ul li:hover>a {
     color: #fff;
 }

 .navbar .dropdown:hover>ul {
     opacity: 1;
     top: 100%;
     visibility: visible;
 }

 .navbar .dropdown .dropdown ul {
     top: 0;
     left: calc(100% - 30px);
     visibility: hidden;
 }

 .navbar .dropdown .dropdown:hover>ul {
     opacity: 1;
     top: 0;
     left: 100%;
     visibility: visible;
 }

 @media (max-width: 1366px) {
     .navbar .dropdown .dropdown ul {
         left: -90%;
     }

     .navbar .dropdown .dropdown:hover>ul {
         left: -100%;
     }
 }

 /**
* Mobile Navigation 
*/

 .mobile-nav-toggle {
     color: white;
     font-size: 28px;
     cursor: pointer;
     display: none;
     line-height: 0;
     transition: 0.5s;
 }

 .mobile-nav-toggle.bi-x {
     color: #fff;
 }

 /*
 @media (max-width: 991px) {
     .mobile-nav-toggle {
         display: block;
     }

     .navbar ul {
         display: none;
     }
 }*/

 .navbar-mobile {
     position: fixed;
     overflow: hidden;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     background: rgba(23, 35, 46, 0.9);
     transition: 0.3s;
     z-index: 999;
 }

 .navbar-mobile .mobile-nav-toggle {
     position: absolute;
     top: 15px;
     right: 15px;
 }

 .navbar-mobile ul {
     display: block;
     position: absolute;
     top: 55px;
     right: 15px;
     bottom: 15px;
     left: 15px;
     padding: 10px 0;
     background-color: rgba(25, 37, 90, 1);
     overflow-y: auto;
     transition: 0.3s;
     color: white;
 }

 .navbar-mobile a,
 .navbar-mobile a:focus {
     padding: 10px 20px;
     font-size: 15px;
     color: white;
 }

 .navbar-mobile a:hover,
 .navbar-mobile .active,
 .navbar-mobile li:hover>a {
     color: white;
 }

 .navbar-mobile .dropdown ul {
     position: static;
     display: none;
     margin: 10px 20px;
     padding: 10px 0;
     z-index: 99;
     opacity: 1;
     visibility: visible;
     background: #fff;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 }

 .navbar-mobile .dropdown ul li {
     min-width: 200px;
 }

 .navbar-mobile .dropdown ul a {
     padding: 10px 20px;
 }

 .navbar-mobile .dropdown ul a i {
     font-size: 12px;
 }

 .navbar-mobile .dropdown ul a:hover,
 .navbar-mobile .dropdown ul .active:hover,
 .navbar-mobile .dropdown ul li:hover>a {
     color: #007bff;
 }

 .navbar-mobile .dropdown>.dropdown-active {
     display: block;
 }

 /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 .hero {
     padding: 0;
 }

 .hero .carousel {
     width: 100%;
     min-height: 87vh;
     padding: 0;
     margin: 0;
     background-color: var(#ffffff);
     position: relative;
 }

 .hero #hero-carousel-subtitle {
     min-height: 13vh;
     background: #eaeaea;
     padding: 15px;
 }

 .hero #hero-carousel-subtitle span {
     font-weight: bold;
     color: #0C163A;
 }

 .hero #hero-carousel-subtitle p {
     color: #0C163A;
     font-size: 20px;
     font-family: 'Gotham-Book';
 }


 .hero .logo img {
     padding: 0;
     width: 100%;
 }

 .hero .logo {
     text-align: center;
     padding-left: 15px;
 }

 .hero .logo2 img {
     padding: 0 25px 0px 25px;
     width: 80%;
 }

 .hero .logo2 {
     text-align: center;
 }

 .hero .logoContainer {
     display: flex;
     justify-content: space-around;
     flex-direction: column;
 }

 @media (max-width: 991px) {
     .hero .logoContainer {
         display: none;
     }
 }

 .hero #hero-carousel-subtitle {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .hero #hero-carousel-subtitle p {
     padding: 0px;
     margin: 0px;
 }


 .hero .imgCarousel {
     position: absolute;
     inset: 0;
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 1;
 }


 .hero .carousel-item {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     overflow: hidden;
 }

 .hero .carousel-item:before {
     content: "";
     background: rgba(0, 0, 0, 0.25);
     position: absolute;
     inset: 0;
     z-index: 2;
 }



 .hero .carousel-container {
     position: absolute;
     inset: 120px 64px 64px 64px;
     display: flex;
     justify-content: end;
     align-items: end;
     flex-direction: column;
     z-index: 3;
 }

 .hero .carousel-container p {
     font-size: 25px;
     text-align: center;
 }

 .hero .carousel-container p span {
     font-weight: bold;
 }


 @media (max-width: 991px) {
     .hero .carousel-container p {
         font-size: 15px;
     }
 }

 .hero h2 {
     margin-bottom: 30px;
     font-size: 48px;
     font-weight: 700;
     animation: fadeInDown 1s both;
 }

 @media (max-width: 768px) {
     .hero h2 {
         font-size: 30px;
     }
 }

 .hero p {
     animation: fadeInDown 1s both 0.2s;
     color: #EAEAEA;
 }

 @media (min-width: 1024px) {

     .hero h2,
     .hero p {
         max-width: 60%;
     }
 }

 .hero .btn-get-started {
     color: var(--contrast-color);
     background: var(--accent-color);
     font-family: var(--heading-font);
     font-weight: 500;
     font-size: 15px;
     letter-spacing: 1px;
     display: inline-block;
     padding: 8px 32px;
     border-radius: 50px;
     transition: 0.5s;
     margin: 10px;
     animation: fadeInUp 1s both 0.4s;
 }

 .hero .btn-get-started:hover {
     background: color-mix(in srgb, var(--accent-color), transparent 20%);
 }

 .hero .carousel-control-prev,
 .hero .carousel-control-next {
     width: 10%;
     transition: 0.3s;
     opacity: 0.5;
 }

 .hero .carousel-control-prev:focus,
 .hero .carousel-control-next:focus {
     opacity: 0.5;
 }

 .hero .carousel-control-prev:hover,
 .hero .carousel-control-next:hover {
     opacity: 0.9;
 }

 @media (min-width: 1024px) {

     .hero .carousel-control-prev,
     .hero .carousel-control-next {
         width: 5%;
     }
 }

 .hero .carousel-control-next-icon,
 .hero .carousel-control-prev-icon {
     background: none;
     font-size: 32px;
     line-height: 1;
 }

 .hero .carousel-indicators {
     list-style: none;
 }

 .hero .carousel-indicators li {
     cursor: pointer;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translate3d(0, 100%, 0);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 }

 /*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

 section {
     overflow: hidden;
 }

 /* Sections Header
--------------------------------*/

 .section-header h3 {
     font-size: 30px;
     font-weight: normal;
     color: white;
     text-align: left;
     position: relative;
     /*font-family: 'Gotham-Medium';*/
 }

 .section-header h3::after {
     content: "";
     position: absolute;
     display: block;
     width: 80px;
     height: 3px;
     background: #d43076;
     bottom: 0;
     left: 0;
 }

 .section-header p {
     text-align: left;
     margin: auto;
     font-size: 20px;
     padding-bottom: 60px;
     color: white;
     width: 50%;
     font-family: 'Gotham-Book';
 }

 @media (max-width: 767px) {
     .section-header p {
         width: 100%;
     }
 }

 /* Section with background
--------------------------------*/

 .section-bg {
     background: #ecf5ff;
 }

 /*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

 .breadcrumbs {
     padding: 20px 0;
     background: #E1E1E1;
     min-height: 40px;
     margin-top: 00px;
     color: #0C163A;
 }

 .breadcrumbs h2::after {
     content: "";
     position: absolute;
     display: block;
     width: 75px;
     height: 3px;
     background: #d43076;
     bottom: 0;
     left: 0;
 }

 .breadcrumbs a {
     font-family: 'Gotham-Book';
     color: #0C163A;
 }

 @media (max-width: 992px) {
     .breadcrumbs {
         margin-top: 0px;
     }
 }

 .breadcrumbs h2 {
     font-size: 24px;
     font-weight: 300;
     margin: 0;
     font-family: 'Gotham-Book';
 }

 @media (max-width: 992px) {
     .breadcrumbs h2 {
         margin: 0 0 10px 0;
     }
 }

 .breadcrumbs ol {
     display: flex;
     display: -webkit-flex;
     flex-wrap: wrap;
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 14px;
 }

 .breadcrumbs ol li+li {
     padding-left: 10px;
 }

 .breadcrumbs ol li+li::before {
     display: inline-block;
     padding-right: 10px;
     color: white;
     content: "/";
 }

 @media (max-width: 768px) {
     .breadcrumbs .d-flex {
         display: block !important;
     }

     .breadcrumbs ol {
         display: block;
     }

     .breadcrumbs ol li {
         display: inline-block;
     }
 }

 /* About Us Section
--------------------------------*/

 #about {
     background: #E1E1E1;
     background-size: cover;
     background-position: top;
     background-repeat: no-repeat;
 }

 #about .section-header {
     text-align: center;
 }

 #about .section-header h3 {
     color: black;
     text-align: center;
 }

 #about .section-header h3::after {
     content: "";
     position: absolute;
     display: block;
     width: 120px;
     height: 3px;
     background: #d43076;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }

 #about .icon-box img {
     width: 25%;
 }

 #about .section-header p {
     width: 100%;
 }

 #about .about-container .background {
     margin: 20px 0;
     padding: 0 30px
 }



 #about .about-container .bordes {
     position: relative;
 }

 #about .about-container .bordes::before,
 #about .about-container .bordes::after {
     content: "";
     position: absolute;
     top: 40%;
     transform: translateY(-50%);
     height: 70%;
     width: 3px;
     background-color: #0C163A;
 }

 #about .bordes::before {
     left: 0;
 }

 #about .bordes::after {
     right: 0;
 }


 @media (max-width: 991px) {

     #about .about-container .bordes::before,
     #about .about-container .bordes::after {
         content: none;
     }
 }


 #about .about-container .content {
     /*background: rgba(25, 37, 90, 1);*/
     background: transparent;
 }

 #about .about-container .title {
     color: white;
     font-weight: 700;
     font-size: 32px;
 }


 #about .about-container p:last-child {
     margin-bottom: 0;
 }

 #about .about-container .icon-box {
     /*background: rgba(25, 37, 90, 1);*/
     background: transparent;
     background-size: cover;
     padding: 0 0 0px 0;
     font-family: 'Gotham-Book';
 }

 #about .about-container .icon-box .icon {
     float: left;
     background: rgba(25, 37, 90, 1);
     width: 64px;
     height: 64px;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     border: 2px solid #007bff;
     transition: all 0.3s ease-in-out;
 }

 #about .about-container .icon-box .icon i {
     color: #007bff;
     font-size: 24px;
     line-height: 0;
 }

 #about .about-container .icon-box:hover .icon {
     background: #007bff;
 }

 #about .about-container .icon-box:hover .icon i {
     color: #fff;
 }

 #about .about-container .icon-box .title {
     margin-left: 0px;
     font-weight: 600;
     margin-bottom: 5px;
     font-size: 25px;
 }

 #about .about-container .icon-box .title a {
     color: #283d50;
 }

 #about .about-container .icon-box .description {
     margin-left: 0px;
     margin-bottom: 10px;
     /*line-height: 24px;*/
     font-size: 20px;
     color: black;
     text-align: center;
 }

 #about .about-extra {
     padding-top: 60px;
 }

 #about .about-extra h4 {
     font-weight: 600;
     font-size: 24px;
 }

 #about .img-fluid {
     height: 100% !important;
 }

 /* Services Section
--------------------------------*/
 #services {
     position: relative;
     /*padding: 60px 0 0 0;*/
     width: 100%;
     z-index: 1;
     overflow: hidden;
 }


 #services .practicasDetalladas::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(234, 234, 234, 0.7);
     z-index: -1;
 }

 #services .practicasDetalladas {
     position: relative;
     background-image: url('../img/Fotos para web/experiencias.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 1;
     overflow: hidden;
 }

 #services .practicasDetalladas .practicasDetalladas-items {
     width: 100%;
     padding: 60px;
     margin: 0px;
 }


 @media (max-width: 991px) {
     #services .practicasDetalladas .practicasDetalladas-items {
         padding: 10px;
     }
 }


 #services .about-container .background {
     /*margin: 20px 0;*/
     padding: 0 30px
 }


 #services .section-header p,
 #services .section-header h3 {
     color: #EAEAEA;
 }

 #services .section-header p {
     padding-bottom: 5px !important;
     font-size: 15px;
 }

 #services .punto {
     width: 1px;
     /*color: black !important;*/
     font-size: 50px !important;
 }

 #services .section-header p {
     width: 100%;
 }

 #services .about-container .icon-box {
     /*background: rgba(25, 37, 90, 1);*/
     background: transparent;
     display: flex;
     display: -webkit-flex;
     justify-content: start;
     align-items: baseline;
 }

 #services .about-container .icon-box .icon {
     float: left;
     background: rgba(25, 37, 90, 1);
     width: 50px;
     height: 25px;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     align-items: end;
 }

 #services .about-container .icon-box .icon i {
     color: white;
     font-size: 24px;
     line-height: 0;
 }


 #services .about-container .icon-box .title {
     margin-left: 0px;
     font-weight: 600;
     margin-bottom: 5px;
     font-size: 18px;
 }

 #services .about-container .icon-box .title a {
     color: #283d50;
 }

 #services .about-container .icon-box .description {
     font-size: 18px;
     color: black;
 }

 #services .about-container {
     min-height: 450px;
 }

 #services .box {
     padding: 30px;
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     margin: 0 10px 40px 10px;
     background: #fff;
     box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
     transition: all 0.3s ease-in-out;
 }

 #services .box:hover {
     transform: translateY(-5px);
 }

 #services .icon {
     position: absolute;
     left: -15px;
     top: calc(50% - 32px);
 }

 #services .icon i {
     font-size: 64px;
     line-height: 0;
     transition: 0.5s;
 }

 #services .title {
     margin-left: 40px;
     font-weight: 700;
     margin-bottom: 15px;
     font-size: 18px;
 }

 #services .title a {
     color: #111;
 }

 #services .box:hover .title a {
     color: #007bff;
 }

 #services .description {
     font-size: 14px;
     margin-bottom: 0;
     font-family: 'Gotham-Book';
 }

 #services .img-fluid {
     height: 100% !important;
 }


 #services .slogan {
     background: #0C163A;
     color: #EAEAEA !important;
     text-align: center;
     margin-left: 60px;
     position: absolute;
     bottom: 30px;
     left: 100px;
     width: 100%;
     z-index: 10;
     border-radius: 0px;
 }

 #services .slogan .sloganText {
     font-size: 15px;
     padding: 35px 90px;
     width: 50%;
     margin-left: auto;
     margin-right: auto;
     word-wrap: break-word;
     text-align: center;
     margin-bottom: 0;
 }

 #services .slogan .sloganText p {
     margin: 0;
 }

 @media (max-width: 991px) {
     #services .slogan {
         margin-left: 0;
         /*left: 0px;
         bottom: 0px;*/
         position: unset;
     }

     #services .slogan .sloganText {
         padding: 20px 0px;
     }


     #services .about-container {
         min-height: auto;
     }
 }

 @media (max-width: 768px) {
     #services .slogan .sloganText {
         width: 100%;
     }
 }

 @media (max-width: 576px) {
     #services .slogan .sloganText {
         padding: 35px 13px;
     }
 }

 #why-us {
     padding: 60px 0;
     background: #004a99;
 }

 #why-us .section-header h3,
 #why-us .section-header p {
     color: white;
 }

 #why-us .card {
     background: #00458f;
     border-color: #00458f;
     border-radius: 10px;
     margin: 0 15px;
     padding: 15px 0;
     text-align: center;
     color: #fff;
     transition: 0.3s ease-in-out;
     height: 100%;
 }

 @media (max-width: 991px) {
     #why-us .card {
         margin: 0;
     }
 }

 #why-us .card:hover {
     background: #003b7a;
     border-color: #003b7a;
 }

 #why-us .card i {
     font-size: 48px;
     padding-top: 15px;
     color: #EAEAEA;
 }

 #why-us .card h5 {
     font-size: 22px;
     font-weight: 600;
 }

 #why-us .card p {
     font-size: 15px;
     color: #d8eafe;
 }

 #why-us .card .readmore {
     color: #fff;
     font-weight: 600;
     display: inline-block;
     transition: 0.3s ease-in-out;
     border-bottom: #00458f solid 2px;
 }

 #why-us .card .readmore:hover {
     border-bottom: #fff solid 2px;
 }

 #why-us .counters {
     padding-top: 40px;
 }

 #why-us .counters span {
     font-family: "Montserrat", sans-serif;
     font-weight: bold;
     font-size: 48px;
     display: block;
     color: #fff;
 }

 #why-us .counters p {
     padding: 0;
     margin: 0 0 20px 0;
     font-family: "Montserrat", sans-serif;
     font-size: 14px;
     color: #cce5ff;
 }

 /* Portfolio Section
--------------------------------*/

 #portfolio {
     padding: 60px 0;
     box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 }

 #portfolio #portfolio-flters {
     padding: 0;
     margin: 5px 0 35px 0;
     list-style: none;
     text-align: center;
 }

 #portfolio #portfolio-flters li {
     cursor: pointer;
     margin: 15px 15px 15px 0;
     display: inline-block;
     padding: 6px 20px;
     font-size: 12px;
     line-height: 20px;
     color: #007bff;
     border-radius: 50px;
     text-transform: uppercase;
     background: #ecf5ff;
     margin-bottom: 5px;
     transition: all 0.3s ease-in-out;
 }

 #portfolio #portfolio-flters li:hover,
 #portfolio #portfolio-flters li.filter-active {
     background: #007bff;
     color: #fff;
 }

 #portfolio #portfolio-flters li:last-child {
     margin-right: 0;
 }

 #portfolio .portfolio-item {
     position: relative;
     overflow: hidden;
     margin-bottom: 30px;
 }

 #portfolio .portfolio-item .portfolio-wrap {
     overflow: hidden;
     position: relative;
     border-radius: 6px;
     margin: 0;
 }

 #portfolio .portfolio-item .portfolio-wrap:hover img {
     opacity: 0.4;
     transition: 0.3s;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
     opacity: 0;
     transition: 0.2s linear;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 {
     font-size: 22px;
     line-height: 1px;
     font-weight: 700;
     margin-bottom: 14px;
     padding-bottom: 0;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 a {
     color: #fff;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 a:hover {
     color: #007bff;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info p {
     padding: 0;
     margin: 0;
     color: #e2effe;
     font-weight: 500;
     font-size: 14px;
     text-transform: uppercase;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview,
 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     width: 36px;
     height: 36px;
     background: #007bff;
     border-radius: 50%;
     margin: 10px 4px 0 4px;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i,
 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i {
     font-size: 22px;
     color: #fff;
     line-height: 0;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview:hover,
 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details:hover {
     background: #3395ff;
 }

 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview:hover i,
 #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details:hover i {
     color: #fff;
 }

 #portfolio .portfolio-item .portfolio-wrap:hover {
     background: #003166;
 }

 #portfolio .portfolio-item .portfolio-wrap:hover .portfolio-info {
     opacity: 1;
 }

 /*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
 .body-portafolio-detail {
     background: #E1E1E1;
 }

 #portfolio-details .portfolio-details-img {
     padding: 30px 0;
     /*border-radius: 50%;*/
     /*float: left;*/
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
 }

 #portfolio-details .circular--portrait-details {
     width: 100%;
     text-align: center;
 }

 .portfolio-details {
     /*padding-top: 40px;*/
     color: white;
 }

 .portfolio-details .swiper-slide {
     display: flex;
     display: -webkit-flex;
     justify-content: center;
 }

 .portfolio-details .portfolio-details-slider img {
     width: 80%;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
 }

 .portfolio-details .portfolio-details-slider .swiper-pagination {
     margin-top: 20px;
     position: relative;
 }

 .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background-color: #fff;
     opacity: 1;
     border: 1px solid #007bff;
 }

 .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
     background-color: #007bff;
 }

 .portfolio-details .portfolio-info {
     padding: 30px 30px 0 30px;
 }

 .portfolio-details .portfolio-info h3 {
     font-size: 22px;
     font-weight: 700;
     font-family: 'Montserrat';
     color: #0C163A;
 }

 .portfolio-details .portfolio-info ul {
     list-style: none;
     padding: 0;
     font-size: 15px;
     font-family: 'Gotham-Book';
 }

 .portfolio-details .portfolio-info ul li+li {
     margin-top: 10px;
 }

 .portfolio-details .portfolio-description {
     padding: 0px 30px 0 30px;
 }

 .portfolio-details .portfolio-description h2 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 20px;
     font-family: 'texgyretermes-bold';
 }

 .portfolio-details .portfolio-description p {
     padding: 0;
     font-family: 'Gotham-Book';
     text-align: justify;
     color: #0C163A;
 }

 /* Testimonials Section
--------------------------------*/

 #testimonials {
     /*padding: 60px 0;*/
     background-color: rgba(25, 37, 90, 1);
     font-family: 'Gotham-Book' !important;
 }

 #testimonials .section-header {
     margin-bottom: 40px;
 }

 #testimonials .testimonials-carousel,
 #testimonials .testimonials-slider {
     overflow: hidden;
 }

 .testimonial-item {
     display: flex;
     display: -webkit-flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 @media (max-width: 767px) {
     #testimonials .testimonial-item {
         text-align: center;
     }
 }

 #testimonials .testimonial-item .testimonial-img {
     width: 200px;
     /*border-radius: 50%;*/
     /*float: left;*/
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
 }

 .circular--portrait {
     position: relative;
     width: 200px;
     height: 200px;
     overflow: hidden;
 }

 .circular--portrait img {
     width: 100%;
     height: auto;
 }

 @media (max-width: 767px) {
     #testimonials .testimonial-item .testimonial-img {
         /*float: none;*/
         margin: auto;
     }
 }

 #testimonials .testimonial-item h3 {
     font-size: 15px;
     margin: 10px 0 5px 0;
     color: white;
     margin-left: 10px;
 }

 #testimonials .testimonial-item h4 {
     font-size: 12px;
     color: white;
     margin: 0 0 15px 0;
     margin-left: 10px;
 }

 #testimonials a {
     color: #0C163A;
     margin: 0 0 15px 0;
     margin-left: 10px;
 }


 #testimonials .testimonial-item p {
     font-style: italic;
     margin: 0 0 15px 140px;
     color: white;
 }

 @media (min-width: 992px) {
     #testimonials .testimonial-item p {
         width: 80%;
     }
 }

 @media (max-width: 767px) {

     #testimonials .testimonial-item h3,
     #testimonials .testimonial-item h4,
     #testimonials .testimonial-item p {
         margin-left: 0;
     }
 }

 #testimonials .swiper-pagination {
     margin-top: 20px;
     position: relative;
 }

 #testimonials .swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background-color: white;
     opacity: 1;
     border: 1px solid #007bff;
 }

 #testimonials .swiper-pagination .swiper-pagination-bullet-active {
     background-color: #007bff;
 }

 #testimonials .swiper-button-next,
 #testimonials .swiper-button-prev {
     width: 10%;
     opacity: 0.5;
     color: #fff;
 }

 #testimonials .swiper-button-next:focus,
 #testimonials .swiper-button-prev:focus {
     opacity: 0.5;
 }

 #testimonials .swiper-button-next:hover,
 #testimonials .swiper-button-prev:hover {
     opacity: 0.9;
 }

 #testimonials .swiper-button-next:after,
 #testimonials .swiper-button-prev:after {
     font-size: 32px;
     line-height: 1;
 }

 @media (min-width: 1024px) {

     #testimonials .swiper-button-next,
     #testimonials .swiper-button-prev {
         width: 5%;
     }
 }

 /*
 #testimonials .carousel-control-next-icon,
 #testimonials .carousel-control-prev-icon {
     background: none;
     font-size: 32px;
     line-height: 1;
 }*/

 /* Team Section
--------------------------------*/

 #team {
     background: #fff;
     padding: 60px 0;
     box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 }

 #team .member {
     text-align: center;
     margin-bottom: 20px;
     position: relative;
     border-radius: 50%;
     overflow: hidden;
 }

 #team .member .member-info {
     opacity: 0;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     bottom: 0;
     top: 0;
     left: 0;
     right: 0;
     transition: 0.2s;
 }

 #team .member .member-info-content {
     margin-top: 50px;
     transition: margin 0.2s;
 }

 #team .member:hover .member-info {
     background: rgba(0, 62, 128, 0.7);
     opacity: 1;
     transition: 0.4s;
 }

 #team .member:hover .member-info-content {
     margin-top: 0;
     transition: margin 0.4s;
 }

 #team .member h4 {
     font-weight: 700;
     margin-bottom: 2px;
     font-size: 18px;
     color: #fff;
 }

 #team .member span {
     font-style: italic;
     display: block;
     font-size: 13px;
     color: #fff;
 }

 #team .member .social {
     margin-top: 15px;
 }

 #team .member .social a {
     transition: 0.3s;
     color: rgba(255, 255, 255, 0.7);
 }

 #team .member .social a:hover {
     color: #fff;
 }

 #team .member .social i {
     font-size: 18px;
     margin: 0 2px;
 }

 /* Clients Section
--------------------------------*/

 #clients {
     padding: 60px 0;
     background: white;
 }

 #clients .section-header h3 {
     color: rgba(25, 37, 90, 1);
 }

 #clients .clients-wrap {
     /*border-top: 1px solid #d6eaff;
     border-left: 1px solid #d6eaff;*/
     margin-bottom: 30px;
 }

 #clients .client-logo {
     padding: 64px;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     background: #fff;
     height: 200px;
 }

 #clients .client-logo:hover img {
     /*transform: scale(0.9);*/
 }

 #clients img {
     transition: all 0.4s ease-in-out;
 }

 /* Contact Section
--------------------------------*/

 #contact {
     padding: 20px 0;
     overflow: hidden;
     background: rgba(25, 37, 90, 1);
 }

 #contact .section-header {
     padding-bottom: 30px;
 }

 #contact .contact-about h3 {
     font-size: 36px;
     margin: 0 0 10px 0;
     padding: 0;
     line-height: 1;
     font-family: "Montserrat", sans-serif;
     font-weight: 300;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: #007bff;
 }

 #contact .contact-about p {
     font-size: 14px;
     line-height: 24px;
     font-family: "Montserrat", sans-serif;
     color: #888;
 }

 #contact .social-links {
     padding-bottom: 20px;
 }

 #contact .social-links a {
     font-size: 18px;
     display: inline-block;
     background: #fff;
     color: #007bff;
     line-height: 1;
     padding: 8px 0;
     margin-right: 4px;
     border-radius: 50%;
     text-align: center;
     width: 36px;
     height: 36px;
     transition: 0.3s;
     border: 1px solid #007bff;
 }

 #contact .social-links a:hover {
     background: #007bff;
     color: #fff;
 }

 #contact .info {
     color: white;
 }

 #contact .info i {
     font-size: 32px;
     color: white;
     float: left;
     line-height: 0;
 }

 #contact .info p {
     padding: 0 0 10px 36px;
     line-height: 28px;
     font-size: 14px;
     font-family: 'Gotham-Book';
 }

 #contact .php-email-form .error-message {
     display: none;
     color: #fff;
     background: #ed3c0d;
     text-align: left;
     padding: 15px;
     font-weight: 600;
 }

 #contact .php-email-form .error-message br+br {
     margin-top: 25px;
 }

 #contact .php-email-form .sent-message {
     display: none;
     color: #fff;
     background: #18d26e;
     text-align: center;
     padding: 15px;
     font-weight: 600;
 }

 #contact .php-email-form .loading {
     display: none;
     background: #fff;
     text-align: center;
     padding: 15px;
 }

 #contact .php-email-form .loading:before {
     content: "";
     display: inline-block;
     border-radius: 50%;
     width: 24px;
     height: 24px;
     margin: 0 10px -6px 0;
     border: 3px solid #18d26e;
     border-top-color: #eee;
     -webkit-animation: animate-loading 1s linear infinite;
     animation: animate-loading 1s linear infinite;
 }

 #contact .php-email-form input,
 #contact .php-email-form textarea {
     border-radius: 0;
     box-shadow: none;
     font-size: 14px;
 }

 #contact .php-email-form input:focus,
 #contact .php-email-form textarea:focus {
     border-color: #007bff;
 }

 #contact .php-email-form input {
     padding: 10px 15px;
 }

 #contact .php-email-form textarea {
     padding: 12px 15px;
 }

 #contact .php-email-form button[type=submit] {
     background: white;
     border: 0;
     border-radius: 20px;
     padding: 8px 30px;
     color: rgba(25, 37, 90, 1);
     transition: 0.3s;
 }

 #contact .php-email-form button[type=submit]:hover {
     background: rgba(25, 37, 90, 1);
     cursor: pointer;
     color: white;
     border: 1px solid white;
 }

 @-webkit-keyframes animate-loading {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes animate-loading {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

 #footer {
     background: #C1374B;
     padding: 0 0 30px 0;
     color: #eee;
     font-size: 14px;
     font-family: 'Gotham-Book';
 }

 #footer .footer-top {
     background: #004a99;
     padding: 60px 0 30px 0;
 }

 #footer .footer-top .footer-info {
     margin-bottom: 30px;
 }

 #footer .footer-top .footer-info h3 {
     font-size: 34px;
     margin: 0 0 20px 0;
     padding: 2px 0 2px 0;
     line-height: 1;
     font-family: "Montserrat", sans-serif;
     color: #fff;
     font-weight: 400;
     letter-spacing: 3px;
     text-transform: uppercase;
 }

 #footer .footer-top .footer-info p {
     font-size: 13px;
     line-height: 24px;
     margin-bottom: 0;
     font-family: "Montserrat", sans-serif;
     color: #ecf5ff;
 }

 #footer .footer-top .social-links a {
     font-size: 18px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #007bff;
     color: #fff;
     margin-right: 4px;
     border-radius: 50%;
     text-align: center;
     width: 36px;
     height: 36px;
     transition: 0.3s;
 }

 #footer .footer-top .social-links a i {
     line-height: 0;
 }

 #footer .footer-top .social-links a:hover {
     background: #0067d5;
     color: #fff;
 }

 #footer .footer-top h4 {
     font-size: 14px;
     font-weight: bold;
     color: #fff;
     text-transform: uppercase;
     position: relative;
     padding-bottom: 10px;
 }

 #footer .footer-top .footer-links {
     margin-bottom: 30px;
 }

 #footer .footer-top .footer-links ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 #footer .footer-top .footer-links ul li {
     padding: 8px 0;
 }

 #footer .footer-top .footer-links ul li:first-child {
     padding-top: 0;
 }

 #footer .footer-top .footer-links ul a {
     color: #ecf5ff;
 }

 #footer .footer-top .footer-links ul a:hover {
     color: #74b5fc;
 }

 #footer .footer-top .footer-contact {
     margin-bottom: 30px;
 }

 #footer .footer-top .footer-contact p {
     line-height: 26px;
 }

 #footer .footer-top .footer-newsletter {
     margin-bottom: 30px;
 }

 #footer .footer-top .footer-newsletter input[type=email] {
     border: 0;
     padding: 6px 8px;
     width: 65%;
 }

 #footer .footer-top .footer-newsletter input[type=submit] {
     background: #007bff;
     border: 0;
     width: 35%;
     padding: 6px 0;
     text-align: center;
     color: #fff;
     transition: 0.3s;
     cursor: pointer;
 }

 #footer .footer-top .footer-newsletter input[type=submit]:hover {
     background: #0062cc;
 }

 #footer .copyright {
     text-align: center;
     padding-top: 30px;
 }

 #footer .credits {
     text-align: center;
     font-size: 13px;
     color: #f1f7ff;
 }

 #footer .credits a {
     color: #EAEAEA;
 }

 #footer .credits a:hover {
     color: #0C163A;
 }

 /*CSS PERSONAL*/

 .language-select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     padding: 4px 28px 4px 8px;
     background-size: 16px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }

 .language-select option {
     padding-left: 24px;
     background-repeat: no-repeat;
     background-position: 4px center;
 }


 #contact .mapLogo {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
 }

 #contact .social-links2 {
     display: flex;
     justify-content: start;
 }

 #contact .social-links2 .info i {
     color: rgba(25, 37, 90, 1);
     font-size: 40px;
     font-weight: bold;
 }

 #contact .social-links2 .info {
     background: #EAEAEA;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     margin: 10px;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     align-items: center;
     transition: 0.3s;
 }

 /**
 * Menu
 */
 .menu-wrapper {
     position: absolute;
     top: 40px;
     right: 40px;
     z-index: 1001;
 }

 .menu-toggle {
     background-color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     font-size: 24px;
     line-height: 40px;
     text-align: center;
 }

 .menu-container {
     position: absolute;
     top: 50px;
     right: 0;
     background-color: rgba(180, 41, 56, 0.95);
     padding: 20px 30px;
     min-width: 200px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
 }

 .menu-container.show {
     opacity: 1;
     visibility: visible;
 }

 .menu-container a {
     display: block;
     color: white;
     text-decoration: none;
     margin: 8px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.4);
     padding-bottom: 4px;
 }

 .menu-container a:hover {
     color: #ffe3e3;
 }