body {
    font-family: "Inter", sans-serif;
    scroll-behavior: smooth;
    cursor: none;
}

.container-fluid {
    max-width: 1880px;
}

.montserrat {
    font-family: "Montserrat Alternates", sans-serif;
}

.text-green {
    background: #6ACF3F;
    background: linear-gradient(to bottom left, #6ACF3F 0%, #1D5523 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

button,
a {
    cursor: none !important;
}

.navbar .nav-link {
    font-weight: 500;
    color: white;
}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.hero-section-bg {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, rgba(24, 48, 30, 1) 100%), linear-gradient(337deg, rgba(2, 0, 36, 1) 0%, rgba(44, 90, 16, 0.5720413165266107) 59%, rgba(58, 121, 9, 0) 100%), url('../img/hero-section-bg-3-lower.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 48%;
}

@media(max-width: 992px) {
    .hero-section-bg {
        background: linear-gradient(0deg, rgba(31, 41, 34, 0) 0%, rgba(31, 41, 31, 1) 100%), url('../img/hero-section-bg-3-lower.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: 40%;
    }
}

.about-element {
    position: relative;
    background: rgb(17, 17, 17);
}

.sustainability-principles {
    position: relative;
    background: linear-gradient(0deg, rgba(31, 41, 34, 0) 0%, rgba(31, 41, 31, 1) 100%), url('../img/sustainability-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .sustainability-principles {
        position: relative;
        background-image: linear-gradient(0deg, rgba(31, 41, 34, 0) 0%, rgba(31, 41, 31, 1) 100%), url('../img/sustainability-bg.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.team {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(10, 29, 4, 0.85) 100%), url('../img/team-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .team {
        position: relative;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(10, 29, 4, 0.85) 100%), url('../img/team-bg.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.esl-globals {
    position: relative;
    background: linear-gradient(90deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/esl-global/hlavni.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .esl-globals {
        position: relative;
        background: linear-gradient(90deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/esl-global/hlavni.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.acer {
    position: relative;
    background: linear-gradient(270deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/acer/hlavni.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .acer {
        position: relative;
        background: linear-gradient(270deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/acer/hlavni.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.dell {
    position: relative;
    background: linear-gradient(90deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/dell/hlavni.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .dell {
        position: relative;
        background: linear-gradient(90deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/dell/hlavni.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.byd {
    position: relative;
    background: linear-gradient(270deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/byd/hlavni.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .byd {
        position: relative;
        background: linear-gradient(270deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/byd/hlavni.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.emirates {
    position: relative;
    background: linear-gradient(90deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/emirates/hlavni.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

@media(max-width: 992px) {
    .emirates {
        position: relative;
        background: linear-gradient(90deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 1) 40%), url('../img/stories/emirates/hlavni.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: unset;
        background-position: center;
    }
}

.vh-80 {
    min-height: 80vh;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg)
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.green {
    color: #469732;
}

@media(min-width:992px) {
    .cursor {
        position: fixed;
        background-color: #fff;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        z-index: 10000;
        transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
            0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
        user-select: none;
        pointer-events: none;
        transform: scale(1);
    }

    .cursor.active {
        opacity: 1;
        transform: scale(0);
    }

    .cursor.menu-active {
        opacity: 1;
        transform: scale(0);
    }

    .cursor.hovered {
        opacity: 1;
    }

    .cursor-follower {
        position: fixed;
        border: 1px solid #fff;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        z-index: 10000;
        transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
            0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
        user-select: none;
        pointer-events: none;
        transform: translate(2px, 2px);
    }

    .cursor-follower.active {
        opacity: 1;
        transform: scale(1.65);
    }

    .cursor-follower.menu-active {
        opacity: 1;
        transform: scale(1.65);
    }

    .cursor-follower.hovered {
        opacity: 1;
    }
}

.team-card img {
    height: 480px;
    width: 100%;
    object-fit: cover;
}

@media(min-width: 1921px) {
    .team-card img {
        height: 580px;
        width: 100%;
        object-fit: cover;
    }
}

/* animations */
/* CSS pro animaci */
.hero-section-bg img {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-section-bg img.visible {
    opacity: 1;
}

.hero-section-bg .display-3 {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 1s ease-in-out;
}

.hero-section-bg .display-3.visible {
    opacity: 1;
}

/* end */

.navbar-scrolled {
    background-color: rgba(0, 0, 0, 1) !important;
    /* Nastavení průhledného černého pozadí */
    transition: background-color 0.3s ease !important;
    /* Hladký přechod pro změnu barvy */
}


.stretched-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    background: transparent;
    /* Zajištění, že odkaz nezakrývá obsah */
}

:root {
    --swiper-theme-color: #45822b;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.bg-green {
    background: rgba(22, 54, 25, 1);
    color: white;
}

.btn.bg-green:hover {
    background: rgba(22, 54, 25, 1);
    color: white;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: white;
    background-color: rgba(22, 54, 25, 1);
    border-color: transparent;
}

.bg-dark {
    background: rgb(17, 17, 17) !important;
}


.sticky-top {
    top: 20px;
    /* Adjust this value as needed */
}

.sticky-wrapper {
    height: 100%;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .sticky-wrapper {
        height: auto;
        overflow-y: visible;
    }
}

@media(min-width: 1200px) {
    .main-image {
        height: 853px;
        width: 100%;
        object-fit: cover;
    }

    .thumb-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
}

img.option-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

@media(max-width: 768px){
    img.option-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
}