@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --colorp1: #003653;
    --colorp2: #042f46;
    --colorp3: #1c9e9a;
    --colorp4: #29cca3;
    --colorp5: #FFFFFF;
    --colorp6: #797979;
    --colorp7: #D4D4D4;
    --colorp8: #ACB9BF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background: var(--colorp3);
    color: var(--colorp5);
}

body {
    background: #ffffff;
    /*background-image: url("../img/grieta_4.2.png");*/
    font-family: 'Montserrat', sans-serif;
}

a:hover {
    color: var(--colorp5);
    text-decoration: none;
}

.txtInput {
    border: none;
}

.txtInput:focus {
    outline: 0;
    box-shadow: none;
    border: none;
}

.form-control-2 {
    height: 45px;
    border: 1px solid #ececec;
}

.form-control-2::placeholder {
    color: #c3c7cc;
}

.form-control-2:focus {
    border-color: #00aa9f;
}

.form-control:focus {
    box-shadow: none;
}

.nav-pills .nav-link {
    border-bottom: 2px solid #FFFFFF;
    background: #ffffff;
    padding: 60px 15px;
    border-radius: 0px;
    color: #212121;
}

.nav-pills .nav-link:hover {
    background: #ececec;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: #c3c7cc;
    color: #ffffff;
}

.c-zoom-image {
    position: relative;
}

.colorp1 {
    color: var(--colorp1);
}

.colorp2 {
    color: var(--colorp2);
}

.colorp3 {
    color: var(--colorp3);
}

.colorp4 {
    color: var(--colorp4);
}

.colorp5 {
    color: var(--colorp5);
}

.colorp6 {
    color: var(--colorp6);
}

.colorp7 {
    color: var(--colorp7);
}

.colorp8 {
    color: var(--colorp8);
}

.font-s-32-desktop {
    font-size: 32px;
}

.font-s-24-desktop {
    font-size: 24px;
}

.font-s-20-desktop {
    font-size: 20px;
}

.font-s-16-desktop {
    font-size: 16px;
}

.padding-tb-80 {
    padding: 80px 0px;
}

.container-background {
    background: linear-gradient(45deg, #ffffff, #e4e4e4);
}

.container-background-2 {
    background: linear-gradient(45deg, #eaeaea, #dedede);
}

.container-background-img {
    background: url('../img/sitrak-1.webp');
}

.container-background-img-2 {
    background: url('../img/sitrak-2.webp');
}

.container-background-img, .container-background-img-2 {
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    padding: 150px 0px;
    position: relative;
}

.container-background-img:before, .container-background-img-2:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.8);
}

.card-white {
    padding: 60px 40px;
    background: #ffffff;
}

.title-1, .title-2 {
    text-align: center;
    color: var(--colorp4);
    font-weight: 800;
    letter-spacing: 5px;
    position: relative;
    font-size: 60px;
    transform: skew(
            -20deg
    );
}

.title-1 {
    color: var(--colorp3);
}

.title-2 {
    color: var(--colorp3);
}

.title-1:before,
.title-2:before {
    content: '';
    position: absolute;
    width: 240px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--colorp3), transparent);
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.title-1:after,
.title-2:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--colorp3);
    border-radius: 50%;
    bottom: -29px;
    left: 50%;
    transform: translateX(-50%);
}

.title-1:after {
    border: 4px solid var(--colorp5);
}

.title-2:after {
    border: 4px solid #b6e0d5;
}

.title-2 span {
    color: transparent;
    -webkit-text-stroke: 2px #618598;
}

.title-color, .title-color-2 {
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
}

.title-color {
    color: var(--colorp3);
    font-size: 60px;
}

.title-color-2 {
    color: var(--colorp3);
    font-size: 40px;
}

.title-color span, .title-color-2 span, .title-1 span {
    color: transparent;
    -webkit-text-stroke: 2px var(--colorp3);
}

.title-stroke {
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 2px var(--colorp3);
}

.title-banner {
    font-size: 100px;
    font-weight: 900;
    color: var(--colorp5);
    /*-webkit-text-stroke: 2px #FFFFFF;*/
}

.c-boton-1 {
    display: block;
    background: var(--colorp3);
    color: var(--colorp5);
    width: 240px;
    height: 50px;
    border-radius: 40px;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    position: relative;
    /*overflow: hidden;*/
    z-index: 1;
}

.c-boton-1:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    background: #0b6494;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,-50%) scale(1.3);
    transition: .3s ease-in;
}

.c-boton-1:hover:before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,-50%) scale(1);
    animation: animateboton .5s ease-in;
}

.c-boton-2 {
    display: block;
    color: #ababab;
    width: 240px;
    height: 50px;
    background: none;
    border: 1px solid #ababab;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    /*overflow: hidden;*/
    z-index: 1;
}

.c-boton-2 i {
    color: #ababab;
}

.c-boton-circle {
    width: 80px;
    height: 80px;
    background: rgb(0 170 159 / 50%);
    border: none;
    color: #FFFFFF;
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 50%;
    font-weight: 700;
}

/*@keyframes animateboton {*/
/*    0% {*/
/*        width: 10px;*/
/*        left: 0;*/
/*    }*/
/*    50% {*/
/*        width: 100%;*/
/*        left: 100%;*/
/*    }*/
/*    100% {*/
/*        width: 100%;*/
/*        left: 0;*/
/*    }*/
/*}*/

.icon-social {
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid #c3c7cc;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 20px;
    color: var(--colorp3);
    position: relative;;
}

.icon-social:hover {
    color: var(--colorp3);
}

.icon-social:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 35px var(--colorp1);
    z-index: -1;
    transition: box-shadow .3s,transform .3s;
}

.icon-social:hover:before {
    box-shadow: inset 0 0 0 2px var(--colorp3);
}

.c-glass {
    background: rgb(0 54 83 / 25%);
    width: 50%;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    border: 1px solid rgb(0 54 83 / 18%);
}

.c-glass h2 {
    font-weight: 600;
    color: var(--colorp4);
}

.svg-icon {
    width: 60px;
    height: 48px;
}

.main-banner {
    /*background: url("../img/sowo_t5g.jpg");*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    height: 100vh;
    position: relative;
    width: 100%;
}

.main-banner:before {
    /*background: linear-gradient(to top, #FFFFFF 5%, transparent);*/
    /*background: linear-gradient(to top, var(--colorp1) 5%, transparent);*/
    background: rgba(0,0,0,.1);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.vertical-line, .vertical-line-left, .vertical-line-right {
    background: rgba(21, 97, 138, .2);
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
}

.vertical-line {
    left: 50%;
    transform: translateX(-50%);
}

.vertical-line-left {
    left: 15%;
}

.vertical-line-right {
    right: 15%;
}

.vertical-line-left:before, .vertical-line-right:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #15618a;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.vertical-line-left:before {
    top: 25%;
}

.vertical-line-right:before {
    bottom: 25%;
}

.main-header {
    width: 100%;
    /*background: #FFFFFF;*/
    /*background: var(--colorp1);*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

.c-width-90 {
    max-width: 90%;
    margin: auto;
}

.main-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*.main-header:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    background: rgba(255,255,255,.5);*/
/*    left: 0;*/
/*    bottom: -2px;*/
/*}*/

.m-logo img {
    width: 160px;
}

.nav-menu {
    display: flex;
}

.nav-menu li {
    list-style: none;
    /*margin-left: 40px;*/
}

.nav-menu li a {
    /*color: #212121;*/
    color: var(--colorp5);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 15px 20px;
    position: relative;
    z-index: 1;
}

.nav-menu li a:hover {
    color: var(--colorp3) !important;
}

.nav-menu li a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--colorp5);
    transform: scale(1.3);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in;
    z-index: -1;
}

.nav-menu li a:hover:before {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.active-menu {
    background: var(--colorp5);
    color: var(--colorp3) !important;
}

.btnmenu {
    cursor: pointer;
    display: none;
}

.btnmenu span {
    display: block;
    height: 3px;
    background: var(--colorp5);
    margin-bottom: 5px;
    border-radius: 10px;
    transition: .3s;
}

.btnmenu span:last-child {
    margin-bottom: 0px;
}

.line1 {
    width: 30px;
}

.line2 {
    width: 20px;
    margin-left: 10px;
}

.line3 {
    width: 30px;
    margin-left: 0px;
}

.rline1 {
    transform: translateY(8px) rotate(45deg) !important;
}

.sline2 {
    transform: scaleX(0) !important;
}

.rline3 {
    transform: translateY(-8px) rotate(-45deg) !important;
}

.c-tl-50p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.section-service {
    background: #f3f3f3;
    border-radius: 10px;
    padding: 40px 20px;
    height: 100%;
    position: relative;
}

.section-service:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background: #1C9E9A;
    transform: scale(1.1);
    transition: .3s ease-in;
}

.section-service:hover:before {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.section-service-2 {
    background: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    height: 100%;
}

.section-service h2 {
    color: var(--colorp3);
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 1;
}

.section-service:hover h2 {
    color: #FFFFFF;
}

.section-service-2 h2 {
    font-size: 180px;
    font-weight: 900;
    font-style: italic;
    color: var(--colorp8);
}

.section-service p {
    color: var(--colorp6);
    text-align: center;
    position: relative;
    z-index: 1;
}

.section-service:hover p {
    color: #ffffff;
}

.section-service-2 p {
    color: var(--colorp6);
}

.section-service-2 h3 {
    font-weight: 700;
    transform: skew(-20deg);
    color: var(--colorp3);
}

.c-section-service:nth-child(1) .section-service-2,
.c-section-service:nth-child(3) .section-service-2 {
    border-right: 1px solid var(--colorp7);
}

.c-section-service:nth-child(3) .section-service-2,
.c-section-service:nth-child(4) .section-service-2 {
    border-top: 1px solid var(--colorp7);
}

.c-img-circle {
    width: 90px;
    height: 80px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border-radius: 50%;*/
    /*background: #164970;*/
    position: relative;
    z-index: 1;
}

.c-img-circle:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #164970;
    z-index: -1;
    animation: animatebeforecircle 3.5s linear infinite;
}

@keyframes animatebeforecircle {
    0%{
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.section-service:hover .c-img-circle:before {
    background: rgb(19 136 132);
}

.section-img-gradient {
    position: relative;
    /*height: 100%;*/
    /*background-image: url('../img/sitrak-1.webp');*/
    /*background-attachment: fixed;*/
}

/*.section-img-gradient:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: linear-gradient(to top, var(--colorp1), transparent, var(--colorp1)),*/
/*    linear-gradient(to left, var(--colorp1), transparent, var(--colorp1));*/
/*}*/

.section-img-gradient img {
    width: 100%;
}

.section-text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
}

.c-img-enterprise img {
    width: 120px;
}

.c-table-list {
    width: 48%;
}

.c-table-list img {
    width: 80px;
    margin: auto;
    display: block;
}

.c-table-list h6 {
    font-weight: 700;
}

.c-table-list ul {
    border: 1px solid var(--colorp7);
}

.c-table-list ul li {
    color: var(--colorp1);
    list-style: none;
    padding: 10px 20px;
}

/* --------------------------------------- Trucks -----------------------------------------*/

.card-trucks {
    /*border-radius: 10px;*/
    display: block;
    padding: 15px;
    /*background: linear-gradient(45deg, #0a304e, #04375d, #134975);*/
    background: var(--colorp5);
    position: relative;
}

/*.card-trucks:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    border-radius: 10px;*/
/*    top: -2px;*/
/*    bottom: -2px;*/
/*    left: -2px;*/
/*    right: -2px;*/
/*    background: linear-gradient(45deg, #00aa9f, #16486d, #16486d, #16486d, #00acc1);*/
/*    z-index: -1;*/
/*}*/

.c-card-img {
    position: relative;
}

/*.c-card-img:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    top: 0;*/
/*    left: 0;*/
/*    background: linear-gradient(to top, #0b3b5f 10%, transparent);*/
/*    z-index: 1;*/
/*}*/

.c-card-img img {
    width: 100%;
}

.extra-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0);
    transition: .5s;
}

.card-trucks:hover .c-card-img .extra-img {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
}

.card-trucks h4 {
    font-weight: 700;
}


/* -------------------------------------- Contacto ---------------------------------------*/

.c-form-contact {
    max-width: 1000px;
}

.c-contact {
    width: 70%;
}


.main-header-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 60px;
    background: #11334d;
    box-shadow: 0px 5px 10px rgba(0,0,0,.1);
    top: 0;
    left: 0;
    z-index: -1;
    transition: 1s;
    animation: animateheader .5s linear alternate;
}

@keyframes animateheader {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@media (max-width: 1199px) {
    .section-service-2 h2 {
        font-size: 120px;
    }
}

@media (max-width: 991px) {

    .title-1, .title-2 {
        transform: none;
    }

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

    .section-service-2 {
        padding: 15px;
    }

    .section-service-2 h2 {
        font-size: 80px;
    }

    .c-section-service:nth-child(1) .section-service-2,
    .c-section-service:nth-child(3) .section-service-2 {
        border-right: none;
    }

    .c-section-service:nth-child(2) .section-service-2,
    .c-section-service:nth-child(3) .section-service-2,
    .c-section-service:nth-child(4) .section-service-2 {
        border-top: 1px solid var(--colorp7);
    }

    .c-glass {
        width: 98%;
    }

    .font-s-24-movil {
        font-size: 24px;
    }

    .font-s-20-movil {
        font-size: 20px;
    }

    .font-s-18-movil {
        font-size: 18px;
    }

    .font-s-16-movil {
        font-size: 16px;
    }

    .font-s-14-movil {
        font-size: 14px;
    }

    .padding-tb-80 {
        padding: 40px 0px;
    }

    .padding-lr-15-movil {
        padding: 0px 15px;
    }

    .svg-icon {
        width: 40px;
        height: 28px;
    }

    /*.main-header {*/
    /*    padding: 0px 15px;*/
    /*}*/

    .main-navbar {
        padding: 0px 15px;
    }

    .btnmenu {
        display: block;
        position: relative;
        z-index: 2;
    }

    .m-navbar {
        width: 100%;
        position: absolute;
        height: 100vh;
        left: 0;
        top: 50vh;
        opacity: 0;
        visibility: hidden;
        background: var(--colorp1);
        overflow-y: auto;
        transition: .4s ease-in;
    }

    .mMenu {
        top: 0;
        opacity: 1;
        visibility: visible;
    }

    .nav-menu {
        display: block;
        transform: translateY(260px);
        opacity: 0;
        visibility: hidden;
        transition: .5s;
        transition-delay: .5s;
    }

    .animate-nav-menu {
        transform: translateY(60px);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu li {
        margin-left: 0px;
    }

    .nav-menu li a {
        padding: 20px 15px;
        display: block;
    }

    .nav-menu li a:before {
        transform: scale(0);
    }

    .nav-menu li a:hover:before {
        transform: scale(1);
    }

    /* ---------------------------------------------- Contacto ---------------------------------------------- */

    .c-form-contact {
        max-width: 100%;
    }

    .c-contact {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .c-width-90 {
        max-width: 100%;
    }

    .section-service p {
        text-align: justify;
    }

    .section-service-2 h2 {
        font-size: 40px;
    }

}