body {
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden;
}

.navbar-brand .logo {
	width: 150px;
}

/* .first-section {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #f47629;
} */

/* main {
	position: sticky;
	top: 0;
	z-index: 3;
	width: 100%;
	transition: top 0.5s;
} */

/* header {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 3;
	transition: top 0.2s;
}

header .carousel-inner .item {
	height: 100%;
}

.carousel-inner .item .transparent-layer {
	position: absolute;
	width: 100%;
	height: 100vh;

	background: linear-gradient(180deg, rgba(0,0,0,0.8015581232492998) 25%, rgba(255,255,255,0) 89%);
}

.navbar-inverse {
	background-color: transparent;
	border-color: transparent;
}

.navbar-inverse .navbar-brand {
	color: #fff;
	font-size: 40px;
	padding: 40px 15px;
	font-weight: 900;
}

.nav.navbar-nav.navbar-right {
	margin: 25px 0;
}

.navbar-inverse .navbar-nav>li>a {
	color: #fff;
	text-transform: uppercase;
}

.banner {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
}

.carousel-caption {
	padding-bottom: 250px;
	font-family: poppins;
}

.carousel-caption h2 {
	font-size: 70px;
	text-transform: uppercase;
	font-weight: bold;
}

.carousel-caption h2 span {
	color: #f47629;
}

.carousel-caption a {
	background: #f47629;
	padding: 15px 35px;
	display: inline-block;
	margin-top: 15px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 25px;
}

.carousel-control.right {
	background-image: none;
}

.carousel-control.left {
	background-image: none;
}

.carousel-indicators .active {
	background-color: #f47629;
	border-color: #f47629;
}

.navbar-header .navbar-brand {
	position: relative;
	width: 180px;
	padding: 0;
	object-fit: cover;
}

.navbar-header img {
	position: relative;
	width: 100%;
	object-position: center;
} */

nav {
	width: 100%;
}

.about-us-section {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #F2F2F2;
	gap: 50px;
}

.about-us-section h1 {
	font-size: 4.3rem;
	font-weight: 700;
}

.about-text-information {
	font-size: 1.3rem;
	width: 1000px;
	text-align: center;
}

.about-us-section h1 span {
	color: #f47629;
}

.section-prueba {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #EDBB00;
}

.about-us-section .advantages {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
}

.about-us-section .advantages .advanteges-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.about-us-section .advantages .advanteges-item p {
	font-size: 1.1rem;
	font-weight: 400;
	color: #000;
	margin-top: 15px;
}

.about-us-section .advantages ion-icon {
	font-size: 1rem;
	color: #f47629;
	font-weight: bold;
	border-radius: 50%;
	background-color: #fff;
	width: 70px;
	height: 70px;
	padding: 20px;
}

.content-solutions-section {
	position: relative;
	z-index: 60;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}


.solutions-section {
	width: 100%;
	height: 100vh;
	background: url(assets/img/city2.jpeg);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	gap: 80px;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 50;
}

.solutions-section h1 {
	color: #fff;
	font-size: 5rem;
	font-weight: 900;
}

.solutions-section h1 span {
	color: #f47629;
}

.solutions-section i {
	font-size: 5rem;
	color: #f47629;
}

/* .smart-places {
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-x: hidden;
	padding: 25px;
}

.transparent-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
}

.smart-place-item1 {
	width: 50%;
	height: 100%;
	background: url(assets/img/Ciudades\ Inteligentes-1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: end;
	align-items: center;
	position: relative;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	z-index: 40;
	transition: opacity 0.3s;
	overflow: hidden;
}

.smart-place-item1 .transparent-layer {
	display: flex;
	justify-content: end;
	align-items: center;
	padding-right: 15px;
}


.smart-place-item2 {
	width: 50%;
	height: 100%;
	background: url(assets/img/Ciudades\ Inteligentes-2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: start;
	align-items: center;
	position: relative;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	z-index: 40;
	transition: opacity 0.3s;
	overflow: hidden;
}

.smart-place-item2 .transparent-layer {
	display: flex;
	justify-content: start;
	align-items: center;
	padding-left: 15px;
}

.smart-places h1 {
	color: #fff;
	font: 5rem;
	font-family: 'Poppins', sans-serif;
}

.smart-place-item2 h1 {
	color: #f47629;
} */

/* ------------------------- */
/* CSS existente */
.smart-places {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: row; /* Alinear horizontalmente */
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    padding: 0; /* Quitar padding para maximizar espacio */
}

.transparent-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.smart-place-item1 {
    width: 50%;
    height: 100%;
    background: url(assets/img/Ciudades\ Inteligentes-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center; /* Alinear la mitad izquierda */
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    z-index: 40;
    transition: opacity 0.3s;
    overflow: hidden;
}

.smart-place-item1 .transparent-layer {
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 15px;
}

.smart-place-item2 {
    width: 50%;
    height: 100%;
    background: url(assets/img/Ciudades\ Inteligentes-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center; /* Alinear la mitad derecha */
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    z-index: 40;
    transition: opacity 0.3s;
    overflow: hidden;
}

.smart-place-item2 .transparent-layer {
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 15px;
}

.smart-places h1 {
    color: #fff;
    font-size: 5rem; /* Corregido: font-size en lugar de font */
    font-family: 'Poppins', sans-serif;
}

.smart-place-item2 h1 {
    color: #f47629;
}
.tranding-slide-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}
/* Media query para móviles */
@media (max-width: 768px) {

	    .tranding-slide-img video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 15px;
    }
    .smart-places {
        flex-direction: row; /* Mantener disposición horizontal */
        padding: 0;
        height: 100vh; /* Mantener altura completa */
    }

    .smart-place-item1, .smart-place-item2 {
        width: 50%; /* Cada imagen ocupa la mitad del ancho */
        height: 100%; /* Mantener altura completa */
        background-size: 200% 100%; /* Escalar para abarcar la imagen completa */
    }

    .smart-place-item1 {
        background-position: right center; /* Mostrar la mitad izquierda */
        border-top-right-radius: 0; /* Quitar borde derecho en móviles */
        border-bottom-right-radius: 0;
    }

    .smart-place-item2 {
        background-position: left center; /* Mostrar la mitad derecha */
        border-top-left-radius: 0; /* Quitar borde izquierdo en móviles */
        border-bottom-left-radius: 0;
    }

    .smart-place-item1 .transparent-layer,
    .smart-place-item2 .transparent-layer {
        justify-content: center; /* Centrar texto en móviles */
        padding: 0; /* Quitar padding para mejor ajuste */
    }

    .smart-places h1 {
        font-size: 1.5rem; /* Reducir tamaño de fuente en móviles */
    }
}
/* ------------------------- */

.section-animation {
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: #fafafa;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}



.telegestion .item-img {
	height: 100%;
}


.section-animation .section-animation-item1 {
	width: 50%;
}

.section-animation-text {
	width: 70%;
	margin: 0 auto;
}

.section-animation-text a {
	text-decoration: none;
	width: 200px;
	height: 60px;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: #EE5007;
	border: 1px solid #EE5007;
	transition: 0.2s;
}

.section-animation-text a:hover {
	background-color: #fff;
	color: #EE5007;
}

.section-animation .section-animation-item1 p {
	text-align: start;
	font-weight: 500;
	color: rgb(91, 99, 125);
	font-size: 1.5rem;
}

.section-animation .section-animation-item1 h1 {
	font-weight: 600;
	color: #0070C0;
	text-align: start;
	font-size: 3rem;
}

.section-animation .section-animation-item1 h1 span {
	color: #f47629;
}

.section-animation .section-animation-item2 {
	width: 50%;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.section-animation .section-animation-item2 img {
	width: 95%;
	border-radius: 20px;

}

.section-animation .section-animation-item-img {
	max-height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.telegestion {
	z-index: 30;
}

.smart-cities {
	z-index: 20;
}

.smart-house {
	z-index: 10;
}

/* ------------------------------------------ */


/* CSS existente */
.content-solutions-section2 {
    position: relative;
    z-index: 9;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.ilumination-solution {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: row; /* Mantener las imágenes alineadas horizontalmente */
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    padding: 0; /* Quitar padding para maximizar espacio */
}

.ilumination-item1 {
    width: 50%;
    height: 100%;
    background: url(assets/images/ilumination-section/2.2_Iluminacion-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center; /* Asegurar que la mitad izquierda encaje */
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    z-index: 9;
    transition: opacity 0.3s;
    overflow: hidden;
}

.ilumination-item1 .transparent-layer {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
}

.ilumination-item2 {
    width: 50%;
    height: 100%;
    background: url(assets/images/ilumination-section/2.2_Iluminacion-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center; /* Asegurar que la mitad derecha encaje */
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    z-index: 9;
    transition: opacity 0.3s;
    overflow: hidden;
}

.ilumination-item2 .transparent-layer {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
}

/* Media query para móviles */
@media screen and (max-width: 768px) {
    .section-animation {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding: 40px 20px;
    }

    .section-animation .section-animation-item1,
    .section-animation .section-animation-item2 {
        width: 100%;
        margin-bottom: 30px;
    }

    .section-animation-text {
        width: 100%;
        padding: 0 20px;
        text-align: center;
    }

    .section-animation .section-animation-item1 h1 {
        font-size: 2rem;
        margin-bottom: 20px;
        text-align: center;
    }

    .section-animation .section-animation-item1 p {
        font-size: 1rem;
        text-align: center;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .section-animation .section-animation-item-img {
        max-height: 400px;
        width: 100%;
        padding: 0 20px;
    }

    .section-animation .section-animation-item2 img {
        width: 100%;
        max-width: 350px;
        height: auto;
    }

    #tranding .tranding-slider {
        height: 300px;
        margin: 20px 0;
    }

    .tranding-slide {
        width: 80% !important;
        height: 250px !important;
    }

    .tranding-slide .tranding-slide-img {
        height: 200px;
    }

    .tranding-slide h3 {
        font-size: 1rem;
        margin-top: 10px;
        text-align: center;
    }

    .tranding-slider-control .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .tranding-slider-control .swiper-button-next {
        left: 75% !important;
        transform: translateX(-75%) !important;
    }

    .tranding-slider-control .swiper-button-prev {
        left: 25% !important;
        transform: translateX(-25%) !important;
    }

	    .tranding-slide .tranding-slide-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Cambiar de cover a contain */
        border-radius: 15px;
    }
    
    .tranding-slide .tranding-slide-img {
        height: 200px !important;
        background: #f0f0f0; /* Color de fondo para el espacio vacío */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ajustar el contenedor del slider */
    #tranding .tranding-slider {
        height: 320px !important; /* Aumentar altura total */
        margin: 20px 0;
    }
    
    .tranding-slide {
        width: 85% !important;
        height: 280px !important; /* Aumentar altura del slide */
    }
    
    /* Ajustar título del slide */
    .tranding-slide h3 {
        font-size: 0.9rem !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        text-align: center;
        padding: 0 10px;
        line-height: 1.2;
    }
}

@media screen and (max-width: 480px) {
	.tranding-slide .tranding-slide-img {
        height: 180px !important;
    }
    
    #tranding .tranding-slider {
        height: 280px !important;
    }
    
    .tranding-slide {
        width: 90% !important;
        height: 240px !important;
    }
    
    .tranding-slide h3 {
        font-size: 0.8rem !important;
    }

    .section-animation {
        padding: 30px 15px;
    }

    .section-animation .section-animation-item1 h1 {
        font-size: 1.8rem;
    }

    .section-animation .section-animation-item1 p {
        font-size: 0.9rem;
    }

    .section-animation-text {
        padding: 0 15px;
    }

    #tranding .tranding-slider {
        height: 280px;
    }

    .tranding-slide {
        width: 90% !important;
        height: 220px !important;
    }

    .tranding-slide .tranding-slide-img {
        height: 180px;
    }
}


/* ------------------------------- */

.ilumination-solution h1 {
	color: #fff;
	/* font: 5rem; */
	font-family: 'Poppins', sans-serif;
}

.ilumination-item2 h1 {
	color: #f47629;
}

.alumbrado-section .item-img {
	height: 100%;
}

.alumbrado-section {
	z-index: 8;
}

.industrial-section {
	z-index: 7;
}

.deportiva-section {
	z-index: 6;
}

.solar-section {
	z-index: 5;
}


/* -------------------------------------- */


.contact-section {
	position: relative;
	width: 100%;
	height: 500px;
}

.contact-section h1 {
	color: #0070C0;
}

.contact-section form {
	width: 500px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.contact-section input[type="text"] {
	height: 50px;
	background-color: #fafafa;
	border-radius: 10px;
	border: none;
	padding-left: 15px;
}

.contact-section input[type="text"]:focus {
	outline: #0070C0;
}

.contact-section .form-group input[type="text"] {
	width: 48%;
}

.contact-section input[type="submit"] {
	background-color: #0070C0;
	color: #fff;
	border-radius: 20px;
	height: 50px;
	border: 1px solid #0070C0;
	transition: 0.2s;
}

.contact-section input[type="submit"]:hover {
	color: #0070C0;
	background-color: #fff;
}

.contact-section .row {
	height: 100%;
}


.contact-section .col {
	height: 100%;
}

.contact-section .input-message {
	resize: none;
	padding: 10px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	border: 1px solid #ccc;
	background-color: #fafafa;
	border-radius: 10px;
	border: none;
	outline: none;
}

footer {
	position: relative;
	height: calc(70vh);
	background-color: #1a1a1a;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 0;
}

footer .social-media-section {
	width: 370px;
	display: flex;
	gap: 15px;
	margin: 0 auto;
	transition: 0.2s;
}

footer .social-media-item {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #5F5F5F;
	color: #fff;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

footer .social-media-item:hover {
	transform: scale(1.1);
}

footer .social-media-item a {
	color: #fff;
	text-decoration: none;
}

footer .footer-limks {
	width: 100%;
	display: flex;
	justify-content: center;
	color: #fff;
	max-width: 1200px;
	margin: 0 auto;
}

footer .footer-limks ul {
	padding: 0;
}

footer .footer-limks li {
	list-style: none;
	font-size: 1.3rem;
}

footer .footer-limks .info li {
	display: flex;
	gap: 15px;
}

footer .copyright-section {
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.1rem;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.about-us-section {
		height: auto;
	}

	.about-us-section h1 {
		font-size: 1.7rem;
		margin-top: 20px;
	}

	.about-text-information {
		width: 300px;
		font-size: 0.8rem;
	}

	.about-us-section .advantages {
		flex-direction: column;
	}

	footer {
		height: auto;
	}

	footer .footer-limks {
		flex-direction: column !important;
		padding: 0 auto;
	}
}

/*responsive css*/
/* 
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.carousel-caption {
		padding-bottom: 350px;
	}

	.carousel-caption h2 {
		font-size: 50px;
	}
}

@media only screen and (max-width: 767px) {
	.navbar-inverse .navbar-brand {
		font-size: 30px;
		padding: 20px 15px;
	}

	.navbar-collapse {
		background: rgba(0, 0, 0, 0.5);
	}

	.carousel-caption {
		padding-bottom: 120px;
	}

	.carousel-caption h2 {
		font-size: 25px;
	}

	.carousel-caption h3 {
		font-size: 18px;
	}

	.carousel-caption a {
		padding: 10px 25px;
	}
} */

/* Cambiar de #tranding a que funcione para todos */
#tranding-telegestion .tranding-slider,
#tranding-smart-cities .tranding-slider,
#tranding-smart-house .tranding-slider,
#tranding-alumbrado .tranding-slider,
#tranding .tranding-slider {
    height: 300px;
    margin: 20px 0;
}