:root {
    --blue: #292251; /*241F47*/
    --red: #EB3E4E;
    --gray: #d8d8d8;
  }
.bg-blue{
    background-color: var(--blue);
}
.bg-red {
    background-color: var(--red);
}
.bg-gray {
    background-color: var(--gray);
}
.text-blue{
    color: var(--blue);
}
.text-red {
    color: var(--red);
}
.text-gray {
    color: var(--gray);
}
.py-7{
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.p-6{
    padding:6rem;
}
.text-size-4{ font-size:45px}
.form-control {border-radius:0}


  body{
    background-color: var(--blue);
    color:#FFF;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
  }
  html {
    scroll-behavior: smooth;
  }
  h2{font-size:54px}
  h3{font-size:29px}
  .main-navbar {
      background: var(--blue);
  }
  .main-navbar .navbar-brand,
  .main-navbar .navbar-text,
  .main-navbar .nav-link {
      color: var(--gray);
  }
  .main-navbar .nav-link.active {
    color: var(--gray);
    }
    .main-navbar .nav-link:hover{
        color:var(--red);
    }
    .main-navbar .nav-link:active{
        color:var(--red);
    }

    .bar {
        background: url(../images/bar.png) no-repeat;
        background-position: bottom;
        background-size: 95%;
    }
    .bar-blue {
        background: url(../images/bar-blue.png) no-repeat;
        background-position: bottom;
        background-size: 95%;
    }
#videoDiv { position: relative;}
#video1 { margin: auto; display: block; width:100%}
#nosotros img{ height:100px;}

/*moble*/
@media only screen and (max-width: 600px) {
    #hagamos{
        background:var(--red)
    }
    #hagamos h2{font-size:20px; text-align:center}
    #enfoque h2{font-size:20px;}
}
/*desktop*/
@media only screen and (min-width: 768px) {
section#servicios li{ padding:10px 10px 10px 20px}
section#servicios li:hover {
    color:var(--blue);
}

section#servicios li:hover .star{
    width:25px; height: 25px; display: inline-block;margin-right:10px;
    background: url('../images/star.png') no-repeat;
    background-size:cover
}
}

.form-control {border:none; background:none; border-bottom:1px solid #241F47;color:var(--gray)}
.form-control:focus{ background-color: var(--red); }
footer a{
    color:#FFF; text-decoration:none
}
footer a:hover{
    color: var(--red)
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .navbar-toggler {
    border: 2px solid white;
  }

  .btn-send {
   border-bottom:1px solid white
  }
  .btn-send:hover{
    background:var(--blue);

  }
 #link-contact a:hover {
    color:#FFF
  }
#link-contact:hover {
    background: url(../images/bar-hover.png) no-repeat;
    background-position: bottom;
        background-size: 95%;
  }

.icon {
    width:25px; height:25px; display:inline-block;
}
.icon-facebook {
    background: url(../images/social-facebook.png);
    background-size: cover;
}
.icon-facebook:hover{
    background: url(../images/social-facebook-hover.png);
    background-size: cover;
}
.icon-instagram {
    background: url(../images/social-instagram.png);
    background-size: cover;
}
.icon-instagram:hover {
    background: url(../images/social-instagram-hover.png);
    background-size: cover;
}


.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }

  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }
  .company{padding:0 10px}



  .nosotros-container{
    background:url(../images/bg-bicolor.jpg);
    background-size: contain;
  }



  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

#servicios h3 { font-size:30px}
#servicios-items ul .p-6 { padding: 3rem;}
#contacto { padding: 3rem;}
#contacto label{ font-size:14px}
}
footer li {font-size:24px}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}