/* Styles */
/* html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    background-color: #1C4DFA;
    position: absolute;
} */
:root {
    --container-width: 100%;
    --bs-primary-dark: #32428c;
}

.text-primary-dark {
    color: var(--bs-primary-dark);
}

#fp-nav {
    /* max-width: var(--container-width); */
    right: calc((100% - var(--container-width)) / 2) !important;
    display: flex;
    justify-content: end;
}

#fp-nav ul li .fp-tooltip {
    text-transform: uppercase;
    color: var(--bs-primary-dark);
}

#eye_section {
    background: rgb(18, 64, 244);
    background: linear-gradient(90deg, rgba(18, 64, 244, 1) 0%, rgba(45, 107, 249, 1) 50%, rgba(29, 74, 252, 1) 100%);
}

#about_us_section {
    background: rgb(223, 171, 31);
    background: linear-gradient(90deg, rgba(223, 171, 31, 1) 0%, rgba(236, 190, 72, 1) 50%, rgba(225, 174, 36, 1) 100%);
}

#clients_section {
    background: rgb(229, 228, 225);
    background: linear-gradient(90deg, rgba(229, 228, 225, 1) 0%, rgba(245, 244, 243, 1) 50%, rgba(229, 228, 225, 1) 100%);
}

#references_section {
    background: rgb(195, 71, 69);
    background: linear-gradient(90deg, rgba(195, 71, 69, 1) 0%, rgba(225, 95, 93, 1) 35%, rgba(195, 71, 69, 1) 100%);
}

#contact_section {
    background: rgb(16, 53, 254);
    background: linear-gradient(90deg, rgba(16, 53, 254, 1) 0%, rgba(41, 99, 255, 1) 35%, rgba(16, 53, 254, 1) 100%);
}

.site-logo {
    position: absolute;
    top: calc(45% + 80px);
    left: calc(50% - 220px);
    width: 90%;
    max-width: 440px;
    height: auto;
}

.eyelid {
    position: absolute;
    width: 120px;
    height: 120px;
    top: calc(45% - 60px);
    left: calc(50% - 60px);
}

.eyelid img {
    width: 140px;
    height: auto;
    position: relative;
    left: -11px;
    top: -11px;
    opacity: 1;
}

.eyelid-shadow {
    background: radial-gradient(50% 50%, rgba(0, 0, 0, .5) 0%, transparent 100%);
    height: 13px;
    width: 250px;
    position: absolute;
    left: calc(50% - 105px);
    top: calc(45% + 60px);
}

.eyeball {
    position: absolute;
    width: 120px;
    height: 120px;
    top: calc(45% - 60px);
    left: calc(50% - 60px);
    background-color: #ffefe2;
    box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    perspective: 500px;
    overflow: hidden;
}

.eyeball .iris {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
    transform: rotateX(-30deg) rotateY(15deg) translateZ(68px) scale(0.6);
    /* background: radial-gradient(ellipse at center, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, transparent 71%); */
    background: radial-gradient(ellipse at center, #eee 18%, #1f2c4c 15%, #1f2c4c 15%, #2b395d 25%, #34446e 44%, #303f63 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, transparent 71%);
    border-radius: 100%;
}

.eyeball .iris.anim {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: iris;
    animation-name: iris;
}

@-webkit-keyframes iris {

    0%,
    100% {
        transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
    }

    10% {
        transform: rotateX(-30deg) rotateY(15deg) translateZ(68px) scale(0.6);
    }

    30% {
        transform: rotateX(-25deg) rotateY(-5deg) translateZ(68px) scale(0.6);
    }

    45% {
        transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
    }

    55%,
    60% {
        transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
    }

    90% {
        transform: rotateX(25deg) rotateY(5deg) translateZ(68px) scale(0.6);
    }
}

@keyframes iris {

    0%,
    100% {
        transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
    }

    10% {
        transform: rotateX(-30deg) rotateY(15deg) translateZ(68px) scale(0.6);
    }

    30% {
        transform: rotateX(-25deg) rotateY(-5deg) translateZ(68px) scale(0.6);
    }

    45% {
        transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
    }

    55%,
    60% {
        transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
    }

    90% {
        transform: rotateX(25deg) rotateY(5deg) translateZ(68px) scale(0.6);
    }
}

.slide-in-left {
    -webkit-animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}


.roll-in-left {
    -webkit-animation: roll-in-left 1.5s ease-out both;
    animation: roll-in-left 1.5s ease-out both;
}

@-webkit-keyframes roll-in-left {
    0% {
        -webkit-transform: translateX(-200px) rotate(-140deg);
        transform: translateX(-200px) rotate(-140deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes roll-in-left {
    0% {
        -webkit-transform: translateX(-200px) rotate(-140deg);
        transform: translateX(-200px) rotate(-140deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

.scale-up-center {
    -webkit-animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

#fullpage .section:not(:nth-child(1)) .fp-tableCell {
    vertical-align: top !important;
}

#clients_section .clients a img {
    max-height: 30px;
}

#clients_section .clients a {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

#contact_section a {
    text-decoration: none;
}

#contact_section a:hover {
    text-decoration: underline;
}

#contact_section .contact-title {
    min-width: 65px;
}

@media (min-width: 576px) {
    :root {
        --container-width: 540px;
    }
}

@media (min-width: 768px) {
    :root {
        --container-width: 720px;
    }
}

@media (min-width: 992px) {
    :root {
        --container-width: 960px;
    }


    #clients_section .clients a {
        width: 20%;
    }

    #clients_section .clients a img {
        max-height: 45px;
    }
}

@media (min-width: 1200px) {
    :root {
        --container-width: 1140px;
    }

    #clients_section .clients a img {
        max-height: 45px;
    }
}

@media (min-width: 1400px) {
    :root {
        --container-width: 1320px;
    }

    #clients_section .clients a img {
        max-height: 45px;
    }
}

@media (min-width: 1685px) {
    :root {
        --container-width: 1625px;
    }

    .container {
        max-width: var(--container-width);
    }

    #clients_section .clients a img {
        max-height: 45px;
    }
}

#references_section .container-fluid {
    padding-left: calc((100% - var(--container-width)) / 2) !important;
}

.references-nav .nav-link::after {
    content: "";
    display: flex;
    width: 15px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    right: -25px;
    bottom: 12px;
    transition: all .2s;
}

.references-nav .nav-link:hover {
    opacity: .8;
}

.references-nav .nav-link:hover::after {
    width: 30px;
    right: -40px;
}

.references-nav .nav-link.active::after {
    width: 70px;
    right: -80px;
}

#references_section #v-pills-tabContent {
    margin-left: 100px;
    height: calc(100vh - 163px);
    background-color: #d1d2cd;
}