@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

:root {
    --blue-primary: #2467eb;
    --blue-dark: #0c163c;
    --blue-dark-secondary: #142050;
    --bg-light: ##f6f7f9;
    --bg-black: #000;
}

body {
    font-family: "Nunito", sans-serif;
}

/* Navbar */
.nav-item .nav-link {
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    margin-right: 10px;
}

.bg-light-blue {
    background-color: #f4f7fd;
}

.scroll-y-600 {
    height: 800px;
    overflow-y: scroll;
}

#hero {
    background: url(../illustrations/il-hero-2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Background */
.bg-blue-dark {
    background-color: var(--blue-dark);
}

.bg-light {
    background-color: var(--bg-light);
}
/* Background */

/* Animasi Whide Scale */
.wide {
    border: 3px solid rgb(237, 246, 248);
    transition: all 0.2s ease-in-out;
}

.wide:hover {
    transform: scale(1.1);
}
/* Animasi wide scale */

/* Scroll Aimasi */
/* Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    }
}

/*  Styling  */
#logos-home-page .slider {
    height: auto;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#logos-home-page .slider:before,
#logos-home-page .slider:after {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

#logos-home-page .slider:after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

#logos-home-page .slider:before {
    left: 0;
    top: 0;
}
#logos-home-page .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}

#logos-home-page div.slide {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Image Zoom */
.image-link {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.img-fit {
    object-fit: cover;
    width: 100%;
    height: 250px;
    vertical-align: middle;
}

/* This block of CSS adds opacity transition to background */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
    padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
    padding: 0;
}

/* aligns caption to center */
.mfp-title {
    text-align: center;
    padding: 6px 0;
}
.image-source-link {
    color: #ddd;
}

/* Animasi Typing */

/* Guru Penggerak */
#gurupenggerak {
    background-color: var(--blue-primary);
}