@charset "UTF-8";
@-ms-viewport {
    width: device-width;
}

* {
    font-family: 'Roboto', sans-serif!important;
}

:root {
    --color-dark-gray: rgb(38, 38, 38);
    --color-background-gray: rgb(93 93 93);
    --color-bg-orange: rgb(205, 122, 29);
    --color-bg-gray: rgb(62, 62, 62);
}
.test {
    background-color: rgb(46, 46, 46);
}

.bg-gray {
    background-color: var(--color-bg-gray)
}

.bg-blue {
    background-color: rgb(69, 123, 208);
}

.bg-green {
    background-color: rgb(184, 255, 105);
}

.bg-green .text {
    color: var(--color-bg-gray)!important;
}

.bg-orange {
    background-color: var(--color-bg-orange);
}

.btnSlide {
    background-color: var(--color-bg-orange);
    border: none;
    padding: 20px;
    font-size: 17px;
    text-decoration:none!important;
    border-radius: 2px;
    color: white;
}
.btnSlide a{
    color:white!important;
    text-decoration:none!important;
}
.titleSlide {
    font-size: 40px;
}

.bg-orange .btnSlide {
    background-color: var(--color-bg-gray);
}

body {
    margin: 0;
}

.hero {
    height: 100vh;
    width: 100%;
}

#home {
    height: 100vh;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 80%;
}

.navbar-nav a {
    text-decoration: none;
}

.nav {
    z-index: 20;
}

.logo {
    width: 100px;
}

.menu {
    width: 50%;
    z-index: 10;
    background-color: var(--color-background-gray);
}

.fullH {
    border: 1px solid red;
    height: 100vh;
}

.half {
    border: 1px solid red;
    height: 50vh;
}

.info {
    text-align: center;
}

.contentCircle {
    margin-top: 50px!important;
}

.pBack {
    color: white;
}

.pGreen {
    background-color: rgb(144, 177, 49);
}

.pPurple {
    background-color: rgb(112, 56, 130);
}

.pBlue {
    background-color: rgb(84, 141, 127);
}

.pYellow {
    background-color: rgb(173, 139, 32);
}

.pRed {
    background-color: rgb(171, 23, 80);
}

.pPink {
    background-color: rgb(152, 74, 163);
}

.displayFlex {
    margin: 0 auto;
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.displayFlexSpace {
    margin: 0 auto;
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.clientes {
    text-align: center;
    color: rgb(99, 99, 99);
    margin-bottom: 100px!important;
}

.divTech {
    width: 25%;
    height: 200px;
    border: 1px solid rgb(225, 225, 225);
    padding: 10px;
    color: rgb(154, 154, 154);
    text-align: center;
}

.divTech img {
    width: 100px;
}

.divTech:nth-child(4n+4) {
    border-right: none;
}

.divTech:nth-child(1),
.divTech:nth-child(5) {
    border-left: none;
}

.divTech:nth-child(1),
.divTech:nth-child(2),
.divTech:nth-child(3),
.divTech:nth-child(4) {
    border-top: none;
}

.divTech:nth-child(5),
.divTech:nth-child(6),
.divTech:nth-child(7),
.divTech:nth-child(8) {
    border-bottom: none;
}

.clientes h3 {
    font-size: 30px;
}

.h4Gray {
    color: rgb(157, 157, 157);
    font-size: 20px;
    text-align: center;
}

.orange {
    color: coral;
}

.ourTeamTitle {
    width: 100px;
    text-align: center;
}

.infoDiv {
    width: 33.333%;
    height: 300px;
    padding: 20px;
}

.infoDiv img {
    width: 150px;
}

.clienteDiv {
    width: 300px;
    margin-top: 50px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.menu {
    width: 100%;
    position: fixed;
}

.imgSlide img {
    position: absolute;
    bottom: -60px;
    width: 380px;
}

.points {
    padding-top: 20px;
}

.mySlides .container {
    height: 100%;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.navbar-nav {
    display: flex;
    justify-content: space-between;
    width: 80%;
}

.navbar-nav li {
    list-style: none;
}

.navbar-nav a {
    color: white;
}

.mainServices {
    display: flex;
    justify-content: space-between;
}

.mainServices section:first-child {
    margin-right: 20px;
}

.servicesImg {
    margin-right: 10px;
}

.servicesImg img {
    width: 180px;
    border-radius: 10px;
    border-radius: 0;
}

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

.btnPlay {
    margin-right: 0;
}

.serviceRinro {}

.servicesInfo {
    text-align: right;
}

.servicesInfo p,
.servicesInfo h1 {
    text-align: left;
}

.secondServices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.secondServices section {
    text-align: center;
    margin: 20px 0;
    width: 350px;
}

.btn-contact {
    padding: 10px!important;
}

.secondServices img {
    width: 60%;
    padding-top: 10px;
}

.secondServices section:first-child {
    /*margin-right: 20px;*/
}

.secondServices section:last-child {
    /*margin-left: 20px;*/
}

infoSection img {
    width: 30px;
}

.infoSection {
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(215, 218, 220);
}

.infoSection button {
    background-color: rgb(224, 100, 29);
    color: white;
    border-radius: 3px;
    border: none;
    padding: 3px;
}

.servicesImg {
    text-align: center;
}

.servicesImg img,
.servicesImg button {
    padding: 10px;
}

#services h2 {
    text-align: center;
}

.btnPlay {
    background-color: crimson!important;
    border-radius: 5px;
    padding: 10px;
    width: 30px;
}

.parallax {
    /* The image used */
    background-image: url("./assets/parallax.jpg");
    /* Set a specific height */
    height: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ourTeam {
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
}

.ourTeam h2,
.ourTeam p {
    color: white;
    text-align: center;
}

.ourTeam {
    padding: 20px;
}

.circle {
    width: 100px;
    height: 100px;
    border: 1px solid white;
    border-radius: 100px;
    font-size: 20px;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ourTeamTitle {
    margin-top: 10px;
    color: white;
}

.bg-contact {
    background-color: black;
}

.contact {
    color: white;
    text-align: center;
    width: 100%;
    padding: 10px;
}

.contact h2 {
    font-size: 30px;
    text-transform: uppercase;
}

.contact input {
    width: 70%;
    height: 35px;
    border-radius: 5px;
}

.modal-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.modal-contact p {
    text-align: center;
}

#footer {
    background-color: var(--color-dark-gray);
}

.footer {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: white;
}

.footer p {
    text-align: center;
}

.img-proceso {
    width: 100%;
}

.clienteDiv img {
    width: 60%;
    filter: grayscale();
    cursor: pointer;
    transition: all 0.3s ease-in;
}

.clienteDiv img:hover {
    filter: grayscale(0);
}
.btnSlide a{
    color:white!important;
    text-decoration:none!important;
}