@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,700;1,400&display=swap');

:root {
    --kulugroup-primary-color: #383b3b;
    --kulugroup-secondary-color: #fcb514;
    --kulugroup-primary-color-light: #90caf9;
    --kulugroup-font-family: 'Montserrat', sans-serif;
    --color-black-subtle: #121212;
}

* {
    font-family: var(--kulugroup-font-family);
}

html {
    scroll-behavior: smooth;
}

body {
    background-size: 200% 200%;
    background-image: linear-gradient(45deg, #121212 60%, var(--kulugroup-primary-color) 100%, #121212 100%);
    animation: Gradient 10s ease infinite;
}


.bg-black-subtle {
    background-color: var(--color-black-subtle) !important;
}

/* Brand Styles */
.kulugroup-text-primary {
    color: var(--kulugroup-primary-color) !important;
}

.kulugroup-text-secondary {
    color: var(--kulugroup-secondary-color) !important;
}

.kulugroup-bg-primary {
    background-color: var(--kulugroup-primary-color) !important;
}

.kulugroup-bg-secondary {
    background-color: var(--kulugroup-secondary-color) !important;
}

.kulugroup-border {
    border-color: var(--kulugroup-secondary-color) !important;
}

/* Buttons */
.btn-yellow {
    background-color: var(--kulugroup-secondary-color) !important;
    border: none !important;
}

.btn-yellow:hover {
    background-color: var(--color-black-subtle) !important;
    color: var(--kulugroup-secondary-color) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Text */
.extra-small {
    font-size: 0.8rem !important;
}

/* Carousel Backgrounds  */
.kulugroup-product-elff-games-bg {
    background-color: #456d0dcf;
}

.kulugroup-product-elff-plus {
    background-color: #121212;
}

.kulugroup-product-mehaleye-bg {
    background-color: #f66527d4;
}

.kulugroup-product-nablix-air-bg {
    background-color: #3a1f5f;
}

@media (max-width: 991px) {
    .navbar {
        background-image: url('../assets/img/kulu_group_pattern_grey_1080_2.png');
        background-color: #121212;
        background-blend-mode: overlay;
    }
}

@media (max-width: 500px) {
    .partners_title {
        font-size: 1.3rem !important;
    }
}

/* Carousel */
.carousel-caption {
    transform: translateY(-50%) !important;
    bottom: initial !important;
    top: 50% !important;
    right: 45% !important;
}

.carousel-inner {
    border-radius: 25px !important;
    border-color: var(--kulugroup-secondary-color);
}

.carousel-item img {
    border-radius: 25px !important;
    /* filter: blur(20px); */
    /* opacity: 0.6; */
    /* mix-blend-mode: color;  */
}

.carousel-control-next,
.carousel-control-prev {
    mix-blend-mode: difference;
}

/* 
.carousel-caption {
    z-index: 1; 
}
.carousel-caption > p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);    
} */

/* Margin Top */
.mt-50px {
    margin-top: 50px !important;
}

.nav-link:hover {
    border-bottom: 1px solid var(--kulugroup-secondary-color);
    width: fit-content !important;
    color: var(--kulugroup-secondary-color) !important;
    transition: border-bottom 0.7s ease-in-out;
}

.pattern_bg {
    background-image: url('../assets/img/kulu_group_pattern_grey_1080_2.png');
    background-color: #121212;
    background-blend-mode: overlay;
}

.pattern_bg_black {
    background-image: url('../assets/img/kulu_group_pattern_black_1080_2.png');
    background-color: #121212;
    background-blend-mode: overlay;
}


#footer {
    /* background-image: url('../img/pattern_wide.png');  */
    background-color: #121212;
    background-blend-mode: overlay;
}

.vh-80 {
    height: 80vh !important;
}

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

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;

    }
}

.yellow-blop {
    width: 50px;
    height: 50px;
    background-color: var(--kulugroup-secondary-color);
    border-radius: 50%;
    position: absolute;
    animation: floatAnimation 5s ease-in-out infinite alternate;
}

@keyframes floatAnimation {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100px, 100px);
    }
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(0);
    transition: backdrop-filter 0.5s ease;
}

.header-blur {
    backdrop-filter: blur(10px);
    background-color: #12121257;
}

#loadingScreen {
    z-index: 1001;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 20px var(--kulugroup-secondary-color);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 10px rgba(252, 181, 20, 0.8);
    }

    100% {
        box-shadow: 0 0 20px var(--kulugroup-secondary-color);
    }
}

.glowing-border {
    border-radius: 25px !important;
    animation: glow 3s infinite;
}

/* Rotating  */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotate-infinite {
    animation: rotate 3s linear infinite;
}