/* VARIABLES DE COLORES */
:root {
    --bg-light: #f8f9fa;
    --primaryGreen: #004BFF;
}

body {
    font-family: "Roboto Mono", monospace;
}

/* ESTILOS PREDEFINIDOS */
.text-justify {
    text-align: justify;
}

.text-green {
    color: var(--primaryGreen);
}

.dot-icon {
    width: 15px;
}

.c-item-banner {
    height: 400px;
}

.c-img-banner {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.35);
}


/* ---------------------------------------------------------------------------INICIO */
/* NAVBAR */
.nav-link {
    display: inline-block;
}

.nav-link::after {
    display: block;
    content: "";
    margin: auto;
    width: 0;
    height: 2px;
    background-color: var(--primaryGreen);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--primaryGreen);
}

.dropdown-item {
    display: inline-block;
}

.dropdown-item::after {
    display: block;
    content: "";
    margin: auto;
    width: 0;
    height: 2px;
    background-color: var(--primaryGreen);
    transition: width 0.3s ease;
}

.dropdown-item:hover::after {
    width: 100%;
}

.dropdown-item:hover {
    color: var(--primaryGreen);
}

.dropdown-menu {
    border: 1px solid var(--bg-light);
    background-color: var(--bg-light);
}

.dropdown-menu a:active {
    background-color: var(--bg-light);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.offcanvas {
    border-bottom: 15px solid var(--primaryGreen);
    display: flex;
    justify-content: end;
}

/* CAROUSEL */

.c-item {
    height: 100vh;
}

.c-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.35);
}

.carousel-caption {
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
}

.carousel-item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* ABOUT US */
.bg-trapezoid {
    width: 750px;
    background-color: var(--primaryGreen);
    margin-left: -400px;
    clip-path: polygon(0 0, 97% 0, 100% 100%, 0% 100%);
}

.bg-trapezoid p {
    margin-left: 400px;

}

.text-about-us {
    color: var(--primaryGreen);
}

/* SERVICES */
.linea {
    background-color: color;
    width: 80px;
    border-top: 4px solid var(--primaryGreen);
}

.item {
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item:hover p {

    cursor: pointer;
}

.item img {
    transition: 0.2s ease-in;
}

.item:hover img {
    cursor: pointer;
    width: 65px;
    filter: invert(13%) sepia(98%) saturate(7487%) hue-rotate(246deg) brightness(99%) contrast(105%);

}

/* MORE INFORMATION */
.col-about-1 {
    background: linear-gradient(rgba(5, 7, 12, 0.70), rgba(5, 7, 12, 0.70)), url(img/inicio/col\ banner\ 1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.col-about-2 {
    background: linear-gradient(rgba(5, 7, 12, 0.70), rgba(5, 7, 12, 0.70)), url(img/inicio/col\ banner\ 2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.col-about-3 {
    background: linear-gradient(rgba(5, 7, 12, 0.70), rgba(5, 7, 12, 0.70)), url(img/inicio/col\ banner\ 3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------------ABOUT US */
/* BANNER */
.c-item-3 {
    height: 380px;
}

.c-img-3 {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.35);
}

/* SERVICES */


/* MISION VISION VALORES */
.card-config {
    border: none;
}

.card-config img {
    width: 100px;
}

.card-text {
    text-align: justify;
}

.item-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
}

/* SEGMENT */
.c-item-2 {
    height: 400px;
}

/* CARDS */
.item-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
}

.mb-space-3 {
    margin-bottom: 100px;
}

.mb-space-5 {
    margin-bottom: 50px;
}

/* ---------------------------------------------------------------------------SERVICES */
/* INSTRUMENTATION */
.banner-instrumentation {
    background: linear-gradient(rgba(5, 7, 12, 0.60), rgba(5, 7, 12, 0.60)), url(img/services/instrumentation/banner\ instrumentation.jpg);
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.banner-instrumentation p {
    padding: 10px 0px 10px 100px;
}

/* AUTOMATION */
.banner-automation {
    background: linear-gradient(rgba(5, 7, 12, 0.70), rgba(5, 7, 12, 0.70)), url(img/services/automation/banner\ automation.jpg);
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.banner-automation p {
    padding: 10px 0px 10px 100px;
}

/* TELEMETRY */
.banner-telemetry {
    background: linear-gradient(rgba(5, 7, 12, 0.70), rgba(5, 7, 12, 0.70)), url(img/inicio/banner\ telemetry.jpg);
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.banner-telemetry p {
    padding: 10px 100px 10px 80px;
}

.item-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding-right: 50px;
    padding-left: 50px;
}

/* OBRAS */
.c-video-banner {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}

.video-col {
    width: 50%;
}

/* ---------------------------------------------------------------------------PROYECTS */
.c-img-banner-2 {}

/* ---------------------------------------------------------------------------MEDIA QUERYS */

/* LARGE BREAKPOINT */
@media (max-width: 992px) {

    /* NAVBAR */
    .dropdown-menu {
        border: 1px solid white;
        background-color: white;
        display: block;
    }

    .dropdown-menu a {
        background-color: white;
    }

    .dropdown-menu a:active {
        background-color: white;
    }

    .offcanvas-body {
        margin-top: 20px;
    }

    .banner-instrumentation p {
        padding: 0;
        margin: 0 auto;
    }

    .banner-automation p {
        padding: 0;
        margin: 0 auto;
    }

    .banner-telemetry p {
        padding: 0;
        margin: 0 auto;
    }

    .banner-electric p {
        padding: 0;
        margin: 0 auto;
    }

    .video-col {
        width: 100%;
    }

}

/* SMALL BREAKPOINT */
@media (max-width: 576px) {

    /* ABOUT US */
    .bg-trapezoid {
        width: 670px;
    }

    .padding-5 {
        padding-left: 50px;
        padding-right: 50px;
    }
}

/* LOADER */
.custom-loader {
    width: 100px;
    height: 24px;
    background:
        radial-gradient(circle closest-side at left 12px top 50%, #172672 90%, #0000),
        radial-gradient(circle closest-side, #172672 90%, #0000),
        radial-gradient(circle closest-side at right 12px top 50%, #172672 90%, #0000);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: d4 1s infinite alternate;
}

@keyframes d4 {
    to {
        width: 40px;
        height: 48px
    }
}

.loader {
    background-color: #004BFF;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 52%, 100% 100%, 0 100%);
    transition: clip-path 0.3s ease-in-out;
}

.loader2 {
    clip-path: polygon(0 0, 0 0, 0 54%, 0 100%, 0 100%);
}