@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --main1: rgba(92, 188, 235, 1);
    --main2: rgba(56, 130, 196, 1);
    --main3: rgba(38, 69, 151, 1);
    --main4: rgba(49, 62, 136, 1);
}

@font-face {
    font-family: GilroyBold;
    src: url("assets/fonts/Gilroy-ExtraBold.otf") format("opentype");
}

@font-face {
    font-family: GilroyLight;
    src: url("assets/fonts/Gilroy-Light.otf") format("opentype");
}

@font-face {
    font-family: QuickBold;
    src: url("assets/fonts/Quicksand-Bold.ttf") format("opentype");
}

@font-face {
    font-family: QuickLight;
    src: url("assets/fonts/Quicksand-Light.ttf") format("opentype");
}

@font-face {
    font-family: QuickMedium;
    src: url("assets/fonts/Quicksand-Medium.ttf") format("opentype");
}

@font-face {
    font-family: QuickRegular;
    src: url("assets/fonts/Quicksand-Regular.ttf") format("opentype");
}

@font-face {
    font-family: QuickSemiBold;
    src: url("assets/fonts/Quicksand-SemiBold.ttf") format("opentype");
}

@font-face {
    font-family: QuickOther;
    src: url("assets/fonts/Quicksand-VariableFont_wght.ttf") format("opentype");
}

/** BUTTONS */
.btn-primary {
    background-color: var(--main4) !important;
    border-color: var(--main4) !important;
    transition: 0.7 all;
}

.btn-primary:hover {
    background-color: var(--main2) !important;
    border-color: var(--main2) !important;
}

/** SECTION TITLES */
.titulo1 {
    font-family: QuickSemiBold;
    color: var(--main4) !important;
}

.titulo2 {
    font-family: QuickRegular;
    color: var(--main2) !important;
}

/** MENU STYLE */

.nav-link {
    padding: 5px 10px !important;
    transition: all 0.5s;
    color: var(--main4) !important;
    font-family: QuickSemiBold;
}

@media only screen and (min-width: 992px) {
    .nav-link {
        padding: 25px 10px !important;
    }
}

.nav-link:hover {
    background-color: var(--main4);
    color: white !important;
}

/** BANNER STYLE */

.banner-text {
    z-index: 9999;
    color: #191F2A;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform: translate(-50%, -50%);
    left: 50%;
}

.banner-text .subtext {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

/** SERVICIOS */
.div-servicio {
    margin-bottom: 20px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: rgba(38, 69, 151, 0.1) !important;
    position: relative !important;
    margin-left: 0 !important;
    color: var(--main3) !important;
}

.div-servicio .icon {
    position: absolute !important;
    font-size: 25px !important;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
}

/** Clientes */
.slick-track {
    align-items: center;
    display: flex;
  }

.img-cliente {
    filter: grayscale(100%);
    transition: all 0.5s ease;
  }
  
  .img-cliente:hover {
    filter: grayscale(0%);
    transition: all 0.5s ease;
  }