@font-face {
  font-family: "Abel-Regular";
  src: url("../fonts/Abel-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: "CenturyGothic-Regular";
  src: url("../fonts/CenturyGothic-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: "CenturyGothic-Bold";
  src: url("../fonts/CenturyGothic-Bold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "CenturyGothic-BoldItalic";
  src: url("../fonts/CenturyGothic-BoldItalic.ttf");
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #eaeaea;
}

.vh-100 {
  height: 100vh !important;
  min-height: 100vh !important;
}

.w-40 {
  width: 40%;
}

.b-0 {
  bottom: 0px;
}

.container-overlay {
  position: relative;
  overflow: hidden;
}

.border-bottom-light {
  border-bottom: 1px solid rgba(222, 226, 230, 0.6) !important;
}

.border-left-light {
  border-left: 1px solid rgba(222, 226, 230, 0.6) !important;
}

.whatsapp-follow {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 1rem;
  z-index: 500;
}

.whatsapp-follow img {
  height: 90px;
  width: 90px;
  transition: width 1s, height 1s;
}

.whatsapp-follow img:hover {
  cursor: pointer;
  height: 100px;
  width: 100px;
}

@media (min-width: 0px) and (max-width: 806px) {
  .whatsapp-follow {
    bottom: 0.25rem !important;
    right: 0.25rem !important;
  }

  .whatsapp-follow img:hover,
  .whatsapp-follow img {
    height: 70px;
    width: 70px;
  }
}

header {
  background-image: url("../img/banner.png"),
    linear-gradient(0deg, #284168 0%, #284168 50%, #284168 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 0px) and (max-width: 768px) {
  header {
    background-image: url("../img/banner_mobile.png"),
      linear-gradient(0deg, #284168 0%, #284168 50%, #284168 100%);
  }

  .pt-7-mobile {
    padding-top: 3rem !important;
  }
}

@keyframes upDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#bg-navbar,
header img {
  animation: upDown 1.5s ease-in-out forwards; /* assign animation to monitor with 'monitorIn' as keyframe name */
  opacity: 0;
}

#bg-navbar .main-nav {
  background-color: transparent;
  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
  display: flex;
  justify-content: space-between;
}

#bg-navbar .container-lg {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#bg-navbar.navbar-shrink {
  background: rgba(40, 65, 104, 0.7);
  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out,
    max-height 0.15s ease-out;
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
  display: flex;
  justify-content: space-between;
}

@media (min-width: 0px) and (max-width: 992px) {
  #bg-navbar.navbar-shrink {
    background: transparent
      linear-gradient(
        0deg,
        #00000000 0%,
        rgba(40, 65, 104, 0.4) 10%,
        rgba(40, 65, 104, 0.5) 16%,
        rgba(40, 65, 104, 0.7) 100%
      )
      0% 0% no-repeat padding-box;
    justify-content: initial !important;
  }

  #bg-navbar {
    background: transparent
      linear-gradient(
        0deg,
        #00000000 0%,
        rgba(40, 65, 104, 0.4) 10%,
        rgba(40, 65, 104, 0.5) 16%,
        rgba(40, 65, 104, 0.7) 100%
      )
      0% 0% no-repeat padding-box;
  }

  #bg-navbar .container-lg .main-nav {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 1rem 1rem;
  }

  #bg-navbar .container-lg {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }

  .border-bottom-light,
  .border-left-light {
    border: none !important;
  }
}

.navbar {
  padding: 0rem !important;
}

.nav-item {
  padding: 0rem 2.5rem;
}

.nav-link {
  font-family: "Abel-Regular";
  color: #ffffff !important;
}

.navbar-dark .navbar-toggler {
  border-color: transparent !important;
}

@keyframes leftRight {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.bg-dark-blue {
  background-color: #284168;
}

.text-dark-blue {
  color: #284168;
}

.bg-blue {
  background-color: #4674b8;
}

hr {
  border-top: 10px solid #ffffff;
  opacity: 0.81;
}

h2 {
  font-family: "CenturyGothic-Bold";
}

p {
  font-family: "Abel-Regular";
  color: #ffffff;
  letter-spacing: 0px;
  font-size: 14pt;
}

.container-overlay {
  position: relative;
  overflow: hidden;
}

.overlay.swipe-left {
  left: -100%;
}

.container-overlay:hover .overlay.swipe-left {
  left: 0%;
}

.overlay.swipe-right {
  right: -100%;
}
.container-overlay:hover .overlay.swipe-right {
  right: 0%;
}

.overlay .mobile-overlay,
.container-overlay .overlay.always-hover {
  left: 0%;
}

.overlay {
  position: absolute;
  top: 0;
  background: rgba(40, 65, 104, 0.8);
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff !important;
  z-index: 2;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.img-back {
  width: 100%;
}

.d-desktop {
  display: block;
}

.d-mobile {
  display: none;
}

.pt-6,
.py-6 {
  padding-top: 4.5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 4.5rem !important;
}

.pt-7 {
  padding-top: 6.5rem !important;
}

@media (min-width: 769px) and (max-width: 1060px) {
  p {
    font-size: 12pt;
  }
}

@media (min-width: 0px) and (max-width: 768px) {
  .mobile-overlay.overlay {
    background: rgba(40, 65, 104, 0.35) !important;
  }

  .container-overlay .overlay.mobile-overlay {
    left: 0% !important;
  }

  .img-back {
    width: 160%;
  }

  #Nosotros p {
    font-size: 11pt !important;
  }

  .d-desktop {
    display: none !important;
  }

  .d-mobile {
    display: block !important;
  }

  .w-40 {
    width: 50%;
  }
}

#Tecnologicos h2 {
  text-align: right !important;
}

#Tecnologicos .overlay {
  align-items: center;
}

@media (min-width: 600px) and (max-width: 768px) {
  #Tecnologicos h2,
  .servicios p {
    text-align: center !important;
  }

  .servicios p,
  #Servicios p {
    font-size: 9pt !important;
  }

  #Servicios h4,
  .servicios h4 {
    font-size: 1rem;
    text-align: center !important;
  }
}

@media (min-width: 0px) and (max-width: 599px) {
  #Tecnologicos h2,
  .servicios p {
    text-align: center !important;
  }

  .servicios p,
  #Servicios p {
    font-size: 6pt !important;
  }

  #Servicios h4,
  .servicios h4 {
    font-size: 9pt;
    text-align: center !important;
  }
}

.owl-carousel img {
  max-width: 250px;
}

.owl-dots {
  display: flex;
  flex-wrap: wrap;
  padding-left: calc(55% - 48px - 48px);
}
.owl-dot {
  display: inline;
  height: 12px;
  width: 12px;
  border: 1px solid #4674b8;
  border-radius: 6px;
  margin: 0 6px;
}

.owl-dot.active {
  background-color: #4674b8;
}

@media (min-width: 0px) and (max-width: 599px) {
  .owl-dots {
    padding-left: calc(63% - 48px - 48px) !important;
  }
}

#big_diamond {
  /* position: absolute; */
  top: -75px !important;
  width: 70%;
  /* margin: 15% auto; */
  overflow: hidden;
  transform: rotate(45deg);
}

.diamond {
  position: relative;
  float: left;
  width: 31.33%;
  padding-bottom: 31.33%;
  transition: background-color 0.4s;
}

.diamond div {
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-contacto {
  width: 600px;
  max-width: 100%;
  padding: 1.5rem;
  border-radius: 1.5rem;
}

.form-control {
  font-family: "Abel-Regular";
  color: #1a242d;
  border-radius: 0px !important;
  border: none !important;
}

.btn-blue {
  background-color: #5b95ea;
  font-family: "CenturyGothic-Regular";
  color: #ffffff;
  font-size: 10pt;
  padding: 0.5rem 3rem;
  border-radius: 0px !important;
}

footer .icon {
  height: 25px;
  width: 25px;
}
@media (min-width: 0px) and (max-width: 768px) {
  #Tecnologicos .overlay {
    align-items: flex-start !important;
  }

  footer.pt-6 {
    padding-top: 0rem !important;
  }

  footer .col-md-6 {
    padding: 0px !important;
  }

  .center-mobile {
    display: flex;
    justify-content: center;
  }
}

.container-kimbo {
  max-width: 200px;
}