#world {
    --color-yellow: #fdc50e;
    --color-brown: #4a2e20;
    --color-dark-brown: #3a1c0e;
    --color-orange: #ff8400;

    font-family: "Roboto";
    color: #4a2e20;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
}

#world .cta-btn {
    background-color: var(--color-orange);
    color: var(--color-dark-brown);
    font-family: 'Knofedt', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: clamp(1rem, 5.5vw, 3rem);
    padding: 0px 65px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 30px;
}

#world .cta-btn:hover {
    background-color: #e67300;
}

.grid {
    --tile-h: clamp(180px, 22vw, 320px);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, var(--tile-h));
    grid-template-areas:
    "v1 v2 v2"
    "lg lg lg"
    "v3 v3 ar"
    "nv nv ar";
}

.item {
    padding:0px;
    border-radius:10px;
    overflow: hidden;
    position: relative;
}

.item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.v1 { grid-area: v1; }
.v2 { grid-area: v2; }
.v3 { grid-area: v3; }
.lg { grid-area: lg; }
.nv { grid-area: nv; }
.ar { grid-area: ar; }

@media (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, var(--tile-h));
        grid-template-areas:
      "v1 v2 v2 v3 v3 ar"
      "lg lg lg nv nv ar";
    }
}


@media (max-width: 768px) {
    #world .grid-layout {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
    }

    #world .ar-top,
    #world .ar-bottom {
        grid-column: span 1;
        grid-row: auto;
    }

    #world .wide-2 {
        grid-column: span 2;
    }

    #world .item img {
        width: 100%;
    }
}


#world .hp-carousel-section {
    position: relative;
    max-width: 100%;
    margin: 40px auto;
}

#world .hp-carousel-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 650px;
    margin: 0 auto 60px;
    padding: 0 50px;
    width: 355px;
}

#world .hp-carousel-container {
    overflow: hidden;
}

#world .hp-carousel-track {
    /*display: flex;*/
    /*transition: transform 0.3s ease;*/
    /*align-items: center;*/
}

#world .hp-carousel-item {
    /*min-width: 16.666%;*/
    /*padding: 0 3px;*/
    /*box-sizing: border-box;*/
    /*flex-shrink: 0;*/
    text-align: center;
    margin: 0 auto;
}

#world .hp-carousel-item img {
    height: 100px;
    display: block;
    margin: 0 auto;
}

#world .hp-carousel-item a {
    display: block;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

#world .hp-carousel-nav-btn {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    background: transparent;
    color: #333;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    transition: opacity 0.3s;
    padding: 0;
    line-height: 1;
    z-index: 10;
}

#world .hp-carousel-nav-btn:hover {
    opacity: 0.6;
}

#world .hp-carousel-nav-btn.prev {
    left: 10px;
}

#world .hp-carousel-nav-btn.next {
    right: 10px;
}

/*body.in-lifelike-world .grid {*/
/*    grid-template-columns: 0.2fr 0.3fr !important;*/
/*    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr !important;*/
/*}*/


/** NEW **/

#world .row.banners-row p:nth-child(2) {
    padding: 0 20px;
}

#world > .grid-wrapper {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
}

#world > .grid-wrapper > .grid-new {
    display: grid;
    gap: 10px;
}

#world > .grid-wrapper > .grid-new.grid-top > .v1 { grid-column: 1; grid-row: 1; }
#world > .grid-wrapper > .grid-new.grid-top > .v2 { grid-column: 2; grid-row: 1; }
#world > .grid-wrapper > .grid-new.grid-top > .lg { grid-column: 1 / span 2; grid-row: 2; }

#world > .grid-wrapper > .grid-new.grid-bottom > .v3 { grid-column: 1; grid-row: 1; }
#world > .grid-wrapper > .grid-new.grid-bottom > .nv { grid-column: 1; grid-row: 2; }
#world > .grid-wrapper > .grid-new.grid-bottom > .ar { grid-column: 2 ; grid-row: 1 / span 2; }

#world > .grid-wrapper > .grid-new.grid-top {
    grid-template-columns: 0.4fr 0.6fr;
}
#world > .grid-wrapper > .grid-new.grid-bottom {
    grid-template-columns: 0.65fr 0.39fr;
    padding-top: 10px;
}

#world > .grid-wrapper > .grid-new.grid-top > .v1 {
    margin-bottom: -25px;
}

#world > .grid-wrapper > .grid-new.grid-bottom > .ar {
    transform: scale(1.03);
    transform-origin: top;
}

#world .ready h2 {
    font-size: 50px;
}

#world .ready h2 span {
    font-size: 90px;
}

#world .ready {
    margin-top: -40px;
}

#world .hp-carousel-section {
    margin-top: -20px;
}

#world .hp-carousel-track {
    /*gap: 10px;*/
}

#world h2.cyan-heading {
    line-height: 1.2;
    font-size: 46px;
}

#world h2.cyan-heading .ll-news {
    font-size: 42px;
    padding: 0 25px
}

#world .ll-news-container {
    flex-direction: column;
    gap: 10px;
    padding: 0 30px;
}

#world .ll-news-container img {
    max-width: 100%;
}

#world .LL-point-desktop {
    display: none;
}

#world #podporujeme {
    flex-direction: column;
}

#world #podporujeme .pod-col:first-child {
    max-width: none;
    text-align: center;
}

#world #podporujeme .pod-col:first-child p {
    padding-top: 10px;
}

#world #podporujeme .pod-col:first-child .certifikat-mobil {
    max-width: 300px;
    margin-left: 15px;
}

#world #podporujeme .icons {
    max-width: 200px;
    margin: 0 auto;
}

#world #podporujeme h2 {
    font-size: 36px;
    padding: 0 25px;
}

#world #podporujeme .pod-col:last-child {
    display: none;
}

#world #podporujeme:before {
    height: 410px;
}

#world h2.gaming-heading {
    font-size: 38px;
    margin-top: 60px;
    margin-bottom: 20px;
}

#world h2.gaming-heading .ll-gaming {
    padding: 0 25px;
}

#world .gaming-container {
    flex-direction: column;
    gap: 10px;
    padding: 0 30px;
}

#world .gaming-container a {
    max-width: 100%;
}

#world .gaming-container .gaming-right {
    max-width: 100%;
}

#world .gaming-container a:nth-child(1) img {
    transform: scaleX(1.08);
    transform-origin: center;
}

#world .LL-AR-desktop {
    display: none;
}

#world .vc-carousel__nav-btn:nth-child(1) {
    margin-left: -40px;
}

#world .vc-carousel__nav-btn:nth-child(2) {
    margin-right: -40px;
}

#world .ll-news-container a {
    margin: 0 auto;
}

#world .ll-news-container img {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

#world .banner-desktop {
    display: none;
    padding: 0 20px;
}

#world .banner-mobil {
    padding: 0 20px;
}

.swiper-button-next, .swiper-button-prev {
    color: #4a2e20;
}


@media(min-width: 320px) {
    #world .hp-carousel-wrapper {
        width: 320px;
    }
}

@media(min-width: 550px) {
    @media(min-width: 320px) {
        #world .hp-carousel-wrapper {
            width: 100%;
        }
    }

}

@media(min-width: 768px) {
    #world > .grid-wrapper {
        flex-direction: row;
        gap: 10px;
        align-items: end;
    }

    #world > .grid-wrapper > .grid-new {
        flex: 0 0 50%;
    }

    #world > .grid-wrapper > .grid-new.grid-top > .v2 {
        transform: scaleY(0.96);
        transform-origin: bottom;
    }

    #world .hp-carousel-wrapper {
        /*width: 608px;*/
    }

    #world .ll-news-container {
        align-items: center;
        flex-direction: column;
    }

    #world .ll-news-container img {
        /*max-width: 33%;*/
    }

    #world .LL-point-desktop {
        display: block;
        padding: 0 30px;
    }

    #world .LL-point-mobil {
        display: none;
    }

    #world #podporujeme {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 0 75px;
        position: relative;
    }

    #world #podporujeme .pod-col:first-child {
        max-width: 70%;
        text-align: left;
    }

    #world #podporujeme .pod-col:last-child {
        max-width: 30%;
    }

    #world #podporujeme .pod-col:first-child .certifikat-mobil {
        display: none;
    }

    #world #podporujeme .pod-col:last-child {
        display: block;
        position: absolute;
        left: 250px;
        top: 23px;
        width: 500px;
        max-width: none;
    }

    #world #podporujeme .pod-col:first-child p {
        font-size: 44px;
    }

    #world #podporujeme:before {
        height: 265px;
    }

    #world #podporujeme .icons {
        margin: 0;
    }

    #world #podporujeme h2 {
        margin-top: 20px;
    }

    #world h2.gaming-heading {
        max-width: 500px;
        margin: 90px auto 0;
        font-size: 44px;
    }

    #world .gaming-container {
        flex-direction: row;
        gap: 10px;
        margin-top: 20px;
    }

    #world .gaming-container a:nth-child(1) img {
        transform: scale(1.06);
        transform-origin: top right;
    }

    #world .LL-AR-desktop {
        display: block;
        padding: 0 30px;
    }

    #world .LL-AR-mobil {
        display: none;
    }

    #world .banner-desktop {
        display: block;
    }

    #world .banner-mobil {
        display: none;
    }
}

@media(min-width: 1024px) {
    #world .hp-carousel-wrapper {
        width: 1080px;
    }

    #world #podporujeme .pod-col:last-child {
        left: 290px;
        top: -30px;
        width: 600px;
    }

    #world > .grid-wrapper > .grid-new.grid-top > .v1 {
        margin-bottom: -35px;
    }

    #world > .grid-wrapper {
        max-width: 1138px;
        margin: 100px auto 0;
    }

    #world .ll-news-container {
        max-width: 1138px;
        margin: 0 auto;
    }

    #world .LL-point-desktop {
        max-width: 1138px;
        margin: 0 auto;
    }

    #world #podporujeme {
        max-width: 1138px;
        margin: 0 auto;
    }

    #world .gaming-container {
        max-width: 1138px;
        margin: 20px auto 0;
    }

    #world .LL-AR-desktop {
        max-width: 1138px;
        margin: 0 auto;
    }

    #world .row.banners-row p:nth-child(1) {
        max-width: 1178px;
        margin: 0 auto 22px;
    }

}