/* =================================== */
/*	Basic Style 
/* =================================== */

body {
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    line-height: 21px;
    font-size: 16px;
    color: #6a737b;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

figure,
p {
    margin: 0;
}

a {
    color: #3003fa;

    -webkit-transition: all .3s ease-in 0s;
    -moz-transition: all .3s ease-in 0s;
    -ms-transition: all .3s ease-in 0s;
    -o-transition: all .3s ease-in 0s;
    transition: all .3s ease-in 0s;
}

iframe {
    border: 0;
}

a,
a:focus,
a:hover {
    text-decoration: none;
    outline: 0;
}

a:focus,
a:hover {
    color: #6CB670;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

span.color {
    color: #0feb9e;
}

body>section,
.footer {
    padding: 70px 0;
}

.sec-title {}

.sec-title h2 {
    color: #0eb493;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
}

.sec-sub-title {
    margin: 35px 0 45px;
}

.sec-sub-title p {
    font-weight: 600;
    line-height: 24px;
    font-size: 18px;
    color: #5b646e;
}

.devider {
    margin-top: 30px;
}

.devider i {
    color: #cccccc;
}

.devider:before,
.devider:after {
    content: "______________________";
    color: #e6e8ea;
    position: relative;
    bottom: 6px;
}

.devider:before {
    right: 10px;
}

.devider:after {
    left: 10px;
}

.mb50 {
    margin-bottom: 50px;
}

#preloader {
    background-color: #fff;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 1100;
}

#preloader>img {
    left: 47%;
    position: absolute;
    top: 48%;
}


/*=========================================
	Header
==========================================*/
/* Estilos generales para la barra de navegación */
.navbar {
    background-color: #fff;
    border: 0 none;
    height: 80px;
}

/* Estilos para el ícono del menú desplegable en dispositivos móviles */
.navbar-toggle i {
    color: #3003fa;
}

/* Estilos para la marca del sitio (logo) en la barra de navegación */
.navbar-brand {
    padding: 0;
}

/* Estilos para los enlaces en la barra de navegación */
.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-nav li {
    margin-right: 10px;
}

.navbar-nav li a {
    font-weight: bold; /* Peso de la fuente */
}

/* Estilos para los enlaces activos, enfocados y al pasar el cursor */
.navbar-nav li a.current,
.navbar-nav li a:focus,
.navbar-nav li a:hover {
    border-top: 1px solid #062033;
    color: #e20707;
}

/* Ajusta el logo en la barra de navegación */
.navbar-brand #logo img {
    width: 250px;
    height: 55px;
}

/* Estilos para dispositivos móviles (ajuste vertical) */
/* Añade estilos para dispositivos móviles (ajuste vertical) */
@media (max-width: 767px) {
    .navbar-nav {
        flex-direction: column; /* Apila los elementos verticalmente */
        background-color: #fff;
    }

    .navbar-nav li {
        margin-right: 0; /* Elimina el margen derecho */
        margin-bottom: 10px; /* Agrega espacio entre los elementos */
    }

    .navbar-nav li a {
        /* Establece un color de fondo sólido para los enlaces en dispositivos móviles */
        color: #01137e; /* Color de texto de los enlaces */
        font-weight: bold; /* Peso de la fuente */
    }
}


/*=========================================
	Slider
==========================================*/

#slider {
    padding: 0;
}

#slider .carousel-inner .item {
    background-size: cover;
}

#slider .carousel-inner .item img {
    width: 100%;
    height: 100vh;
}

.carousel-caption {
    top: 50%;
}

.carousel-caption h2 {
    font-size: 62px;
    font-weight: 300;
}

.carousel-caption h2 span {
    font-weight: 800;
}

.carousel-caption h3 {
    font-size: 48px;
    font-weight: 300;
    margin: 6px 0 20px;
}

.carousel-caption p {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
}

.carousel-caption p:before,
.carousel-caption p:after {
    color: #0feb9e;
    content: "___";
    position: relative;
    top: -8px;
}

.carousel-caption p:before {
    right: 20px;
}

.carousel-caption p:after {
    left: 20px;
}

.social-links {
    margin-top: 5%;
}

.social-links li {
    display: inline-block;
}

.social-links li a {
    color: rgba(255, 255, 255, 0.3);
    display: block;
    margin: 0 6px;
}

.social-links li a:hover {
    color: #fff;
}

.carousel-indicators {
    bottom: 10px;
    left: inherit;
    margin: 0;
    right: 30px;
    top: 49%;
    width: 0;
}

.carousel-indicators li {
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 8px;
    width: 8px;
}

.carousel-indicators .active {
    height: 8px;
    width: 8px;
}



/*=========================================
	about
==========================================*/
.about {
    background-color: #062033;
}

.about-title {
    text-align: center;
    position: relative;
}

.about-title .line {
    width: 20%;
    border-top: 1px solid #ffffff;
    /* Color y estilo de línea deseado */
    display: inline-block;
    margin: 0 10px;
    /* Espacio entre el texto y las líneas */
    vertical-align: middle;
}

.about-title h2 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-card {
    background-color: #062033;
    /* Fondo azul */
    border: 1px solid #fff;
    /* Borde blanco */
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}

.about-card .about-icon {
    border: 1px solid #0eb493;
    border-radius: 50%;
    color: #0eb493;
    padding: 10px 13px;
    font-size: 30px;
    margin: 0 auto;
}

.about-card .about-desc {
    margin-top: 20px;
    text-align: center;
    /* Centrar el texto */
}

.about-card h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.about-card img.icon-image {
    display: block;
    margin: 0 auto;
    width: 100px;
    /* Ancho de la imagen */
    height: 100px;
    /* Alto de la imagen */
}


/*=========================================
	Services
==========================================*/
.services {
    background-color: #ffffff;
}

.service-title {
    text-align: center;
    position: relative;
}

.service-title .line {
    width: 20%;
    border-top: 2px solid #062033;
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
}

.service-title h2 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    color: #062033;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
}

.service-cards-container {
    display: flex;
    flex-wrap: wrap;
}

.service-card {
    background-color: #fff;
    border: 1px solid #062033;
    text-align: center;
    padding: 20px;
    margin: 0 15px 20px;
    min-height: 250px; /* Altura mínima para todos los cards */
    display: flex;
    flex-direction: column;
}

.service-card .service-icon {
    border: 1px solid #0eb493;
    border-radius: 50%;
    color: #0eb493;
    padding: 10px 13px;
    font-size: 30px;
    margin: 0 auto;
}

.service-card .service-desc {
    text-align: center;
    flex-grow: 1; /* Permite que el contenido se expanda verticalmente */
}

.service-card h3 {
    color: #062033;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.service-card img.icon-image {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 120px;
    padding-top: 30px;
}

/*team*/
.team {
    background-color: #062033;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
}

.team .col-lg-6 {
    max-width: 50%; /* Ajusta el ancho del primer div según tus necesidades */
    text-align: center;
    margin-bottom: 20px; /* Espacio entre el primer div y el siguiente */
}

.team h1 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    margin-top: 230px;
    margin-bottom: 40px;
}

.team p {
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
}

.team .devider_team {
    width: 80%;
    border-top: 2px solid #fff;
    margin: 20px auto;
}


.container__slider{
    max-width: 1000px;
    height: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
}

input[type=radio]{
    display: none;
}

.container_3d{
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 600px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards{
    position: relative;
    width: 100%;
    height: 100%;
}

.card{
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}


#item-2:checked ~ .cards #selector-1,
#item-1:checked ~ .cards #selector-3,
#item-3:checked ~ .cards #selector-2{
    transform: translateX(-40%) scale(0.8);
    opacity: 0.6;
    z-index: 0;
}

#item-3:checked ~ .cards #selector-1,
#item-1:checked ~ .cards #selector-2,
#item-2:checked ~ .cards #selector-3{
    transform: translateX(40%) scale(0.8);
    opacity: 0.6;
    z-index: 0;
}

#item-1:checked ~ .cards #selector-1,
#item-2:checked ~ .cards #selector-2,
#item-3:checked ~ .cards #selector-3{
    transform: translateX(0) scale(1);
    z-index: 1;
}

/* Register */
#register {
    padding: 70px 0; /* Ajusta el margen inferior según sea necesario */
}

.form-control {
    width: 100%; /* Haz que los elementos de formulario ocupen todo el ancho del contenedor */
    height: 51px;
    font-size: 18px;
    padding: 10px;
    border: 1px solid #062033;
    border-radius: 4px;
}

.btn {
    background-color: #062033;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 15px 30px;
    font-size: 16px;
    cursor: pointer;
    width: 100%; /* Haz que el botón ocupe todo el ancho del contenedor */
}

.btn:hover {
    background-color: #0056b3;
}

/* Footer*/
.footer {
    /* background: url('/img/patron.png') center/cover no-repeat, #0eb493; */
    background: linear-gradient(rgba(14, 180, 147, 0.5), rgba(14, 180, 147, 0.5)), url('/img/patron.png') center/cover no-repeat, #0eb493;
    
    /* background-color: #0eb493; */
    color: #fff;
    margin-top: 20px;
}

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 50px;
}

.centered-content ul.socila-list {
    display: flex;
    list-style: none;
    padding: 0;
}

.centered-content ul.socila-list li {
    margin: 0 10px; /* Espacio horizontal entre elementos de la lista */
}

.centered-content h3, .centered-content h5 {
    margin: 10px 0; /* Espacio vertical entre títulos y elementos de la lista */
}

.copyright { 
    margin-top: 30px;
}