/* HERO SECTION */
.hero-wrapper {
    background-image: url(../images/hero-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 430px;
}
.hero-container {
    display: flex;
    justify-content: space-around;
}
.hero-image {
    width: 52%;
    max-width: 730px;
    text-align: center;
    margin: auto;
}
.hero-content {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-title {
    font-size: 34px;
    font-weight: 500;
}
.hero-subtext {
    font-size: 26px;
    font-weight: 500;
}
.page-button-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 40px;
}


.section-wrapper {
    position: relative;
    z-index: 5;
}
.section-container {
    padding-top: 2.1875rem;
}
.section-title {
    position: relative;
    height: 36px;
    line-height: 36px;
    font-size: 24px;
    font-weight: 500;
    margin-left: 13px;
    isolation: isolate;
}
.section-title:before {
    content: "";
    position: absolute;
    left: 225px;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    z-index: -1;
}
.section-module-container {
    padding-top: 20px;
    justify-content: center;
    gap: 1rem;
}
.section-item {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    border: 2px solid rgba(184, 184, 192, 0.25);
    padding: 0px;
    max-width: 408px;
}
.section-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 15px rgba(184, 184, 192, 0.5),
        0 0 35px rgba(184, 184, 192, 0.3),
        inset 0 0 12px rgba(184, 184, 192, 0.25);
}
.section-img {
    width: 100%;
    max-width: 302px;
    max-height: 195px;
}
.section-item-container {
    justify-content: space-between;
    gap: 0.5rem;
}
.section-item-image,
.section-item-image .section-img {
    max-width: 130px;
}
.section-btn-container {
    padding-top: 1.625rem;
    justify-content: center;
}
.section-btn {
    width: auto;
}



/* FEATURED MODULES */
.featured-modules-content {
    padding: 25px 0;
}
/* clickable card */
.module-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
/* card styling */
.module-card {
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(184, 184, 192, 0.25);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    height: 268px;
    box-shadow:
        0 0 10px rgba(184, 184, 192, 0.4),
        0 0 30px rgba(184, 184, 192, 0.25),
        inset 0 0 12px rgba(184, 184, 192, 0.2);
    transition: all 0.25s ease;
}
#module-disney .module-card {
    background-image: url('../images/module-background-1-blur.png');
    background-size: cover;
}
#module-projects .module-card {
    background-image: url('../images/module-background-2-blur.png');
    background-size: cover;
}
#module-collections .module-card {
    background-image: url('../images/module-background-3-blur.png');
    background-size: cover;
}
#module-tesla .module-card {
    background-image: url('../images/module-background-4-blur.png');
    background-size: cover;
}
#module-blog .module-card {
    background-image: url('../images/module-background-5-blur.png');
    background-size: cover;
}
#module-gaming .module-card {
    background-image: url('../images/module-background-6-blur.png');
    background-size: cover;
}
/* hover lift + glow */
.module-link:hover .module-card {
    transform: translateY(-4px);
    box-shadow:
        0 0 15px rgba(184, 184, 192, 0.5),
        0 0 35px rgba(184, 184, 192, 0.3),
        inset 0 0 12px rgba(184, 184, 192, 0.25);
}
/* images */
.module-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 0px;
    max-height: 138px;
    box-shadow:
        0 0 15px rgba(184, 184, 192, 0.35),
        0 0 30px rgba(184, 184, 192, 0.2);
}
/* titles */
.module-title {
    font-size: 1.375rem;
    margin-bottom: 10px;
    letter-spacing: -1px;
    font-weight: 700;
    text-shadow: 2px 2px 2px var(--tk-void-purple);
}
.image-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    
}
.image1of2,
.image2of2 {
    width: 100%;
    height: 100%;
    max-height: 138px;
    max-width: 128px;
    overflow: hidden;
}
.module-btn-wrapper {
    align-items: baseline;
}
/* Remove Bootstrap default icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none;
}
/* Arrow button container */
.custom-arrow {
    width: 60px;
    height: 60px;
    background: rgba(35, 13, 2, 0.45);
    border-radius: 50%;
    border: 2px solid rgba(184, 184, 192, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: all 0.25s ease;
}
/* Arrow icon */
.arrow-icon {
    font-size: 32px;
    color: rgba(184, 184, 192, 0.9);
    text-shadow:
        0 0 8px rgba(184, 184, 192, 0.8),
        0 0 15px rgba(184, 184, 192, 0.6);
}
/* Hover glow */
.custom-arrow:hover {
    background: rgba(35, 13, 2, 0.65);
    box-shadow:
        0 0 12px rgba(184, 184, 192, 0.5),
        0 0 25px rgba(184, 184, 192, 0.35),
        inset 0 0 10px rgba(184, 184, 192, 0.25);
    transform: translateY(-50%) scale(1.08);
}
/* Positioning */
.carousel-control-prev {
    left: -30px;
}
.carousel-control-next {
    right: -30px;
}
/* Hide static layout on desktop/tablet */
.featured-modules-static {
    display: none;
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .custom-arrow {
        width: 48px;
        height: 48px;
    }

    .arrow-icon {
        font-size: 26px;
    }

    .carousel-control-prev {
        left: -20px;
    }

    .carousel-control-next {
        right: -20px;
    }
 /* Mobile: disable carousel, stack 2 items */
    #featuredModulesCarousel {
        display: none;
    }

    .featured-modules-static {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 10px;
    }

    .featured-modules-static .module-card {
        flex: 0 0 48%;
        background: rgba(0, 0, 0, 0.45);
        border: 2px solid rgba(184, 184, 192, 0.25);
        border-radius: 12px;
        padding: 15px;
        text-align: center;
        box-shadow:
            0 0 10px rgba(184, 184, 192, 0.4),
            0 0 30px rgba(184, 184, 192, 0.25),
            inset 0 0 12px rgba(184, 184, 192, 0.2);
    }

    .featured-modules-static .module-img {
        width: 100%;
        border-radius: 10px;
        margin-bottom: 10px;
        box-shadow:
            0 0 15px rgba(184, 184, 192, 0.35),
            0 0 30px rgba(184, 184, 192, 0.2);
    }

    .featured-modules-static .module-title {
        font-size: 1rem;
        margin-bottom: 5px;
    }
}


/* IDENTITY SECTION */
#identity .section-wrapper {
    width: 100%;
    height: 100%;
    max-height: 150px;
    background-image:
        radial-gradient(circle, var(--tk-slate-gray) 0 2px, transparent 5px),
        radial-gradient(circle, var(--tk-blue) 0 1.5px, transparent 4px),
        radial-gradient(circle, var(--tk-plum) 0 1.5px, transparent 4px),
        radial-gradient(circle, var(--tk-void-purple) 0 1px, transparent 2px),
        radial-gradient(circle, var(--tk-lavender) 0 1px, transparent 2px),
        radial-gradient(circle, var(--tk-slate-gray)0 0.5px, transparent 1px),
        radial-gradient(circle, var(--tk-blue) 0 0.5px, transparent 3px);
    background-size:
        350px 235px,
        150px 120px,
        120px 195px,
        145px 110px,
        138px 70px,
        140px 45px,
        135px 110px;
    background-position:
        0 0,
        80px -20px,
        20px 40px,
        20px 40px,
        50px 10px,
        -30px 70px,
        58px 10px;
    margin-bottom: 32px;
}
.identity-container {
    margin-top: 15px;
    text-align: center;
}
.identity-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 57px;
    line-height: 70px;
    font-family: var(--tk-font-logo);
    color: var(--tk-lavender);
}
.swipe-left {
    width: 36%;
}
.identity-title .toxic {
    color: var(--tk-toxic);
}
.identity-title .kaluci {
    color: var(--tk-kaluchi);
}
.identity-title .norm-font {
    font-size: 36px;
    font-weight: 700;
}
.identity-title-text {
    position: relative;
    top: 8px;
}
.identity-about {
    display: flex;
    justify-content: center;
    line-height: 56px;
    font-size: 14px;
    background-color: var(--tk-void-purple);
}
.identity-about-toxic {
    color: var(--tk-toxic);
    padding-right: 30px;
    width: 50%;
    text-align: right;
}
.identity-about-kaluchi {
    color: var(--tk-kaluchi);
    padding-left: 20px;
    width: 50%;
    text-align: left;
}
.identity-together {
    font-weight: 700;
    font-size: 14px;
}
.identity-together .icon {
    width: 30px;
    margin-top: -10px;
}


/* WATCHLISTS SECTION */
#watchlists .section-title:before {
    left: 130px;
    background: linear-gradient(135deg,
            var(--tk-toxic) 0%,
            var(--tk-void-purple) 25%,
            var(--tk-toxic) 50%,
            var(--tk-void-purple) 75%,
            var(--tk-toxic) 100%);
    /* Make the wave long and smooth */
    background-size: 400% 400%;
    /* Wave motion */
    animation: energy-wave 6s ease-in-out infinite;
    /* ToxicKaluchi neon glow */
    filter: brightness(1.4) saturate(1.5);
    box-shadow:
        0 0 10px var(--tk-toxic),
        0 0 18px var(--tk-void-purple),
        0 0 28px var(--tk-void-purple);
}
@keyframes energy-wave {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}
#watchlists .section-item {
    max-width: 306px;
}
#watchlist .section-iamge {
    
}
#watchlists .section-img {
    max-width: 302px;
}
.marvel img {
    background-image: url('../images/watchlist-toxic-marvel.png');
    background-size: cover;
    background-position: top;
}
.star-wars img {
    background-image: url('../images/watchlist-star-wars.png');
    background-size: cover;
    background-position: top;
}
.star-trek img {
    background-image: url('../images/watchlist-star-trek.png');
    background-size: cover;
    background-position: center;
}

/* PROJECTS */
#projects .section-title:before {
    left: 225px;
    /* Energy Wave Gradient */
    background: linear-gradient(135deg,
            var(--tk-blue) 0%,
            var(--tk-void-purple) 25%,
            var(--tk-blue) 50%,
            var(--tk-void-purple) 75%,
            var(--tk-blue) 100%);
    /* Make the wave long and smooth */
    background-size: 400% 400%;
    /* Wave motion */
    animation: energy-wave 6s ease-in-out infinite;
    /* ToxicKaluchi neon glow */
    filter: brightness(1.4) saturate(1.5);
    box-shadow:
        0 0 10px var(--tk-blue),
        0 0 18px var(--tk-void-purple),
        0 0 28px var(--tk-void-purple);
}
#projects .section-img {
    max-width: 410px;
}
#projects .section-item-text {
    background: linear-gradient(to top, var(--tk-plum), var(--tk-void-purple));
    text-align: center;
    line-height: 60px;
    font-size: 1.25rem;
}


/* BLOGS SECTION */
#blogs .section-title:before {
    left: 240px;
    /* Energy Wave Gradient */
    background: linear-gradient(135deg,
            var(--tk-orange) 0%,
            var(--tk-void-purple) 25%,
            var(--tk-orange) 50%,
            var(--tk-void-purple) 75%,
            var(--tk-orange) 100%);
    /* Make the wave long and smooth */
    background-size: 400% 400%;
    /* Wave motion */
    animation: energy-wave 6s ease-in-out infinite;
    /* ToxicKaluchi neon glow */
    filter: brightness(1.4) saturate(1.5);
    box-shadow:
        0 0 10px var(--tk-orange),
        0 0 18px var(--tk-void-purple),
        0 0 28px var(--tk-void-purple);
}
#blogs .section-item {
    background: linear-gradient(to bottom, var(--tk-void-purple), #2e1539);
}
#blogs .section-item-text {
    width: 67%; 
    margin-top: 8px; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
    padding-left: 0px;
}
#blogs p {
    margin-bottom: 0px;
}
h3.title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
p.subtext {
    margin-bottom: 0px;
}
p.pub-date {
    font-size: .75rem;
    vertical-align: baseline;
}


/* COLLECTIONS */
#collections .section-title:before {
    left: 136px;
    /* Energy Wave Gradient */
    background: linear-gradient(135deg,
            var(--tk-kaluchi) 0%,
            var(--tk-void-purple) 25%,
            var(--tk-kaluchi) 50%,
            var(--tk-void-purple) 75%,
            var(--tk-kaluchi) 100%);
    /* Make the wave long and smooth */
    background-size: 400% 400%;
    /* Wave motion */
    animation: energy-wave 6s ease-in-out infinite;
    /* ToxicKaluchi neon glow */
    filter: brightness(1.4) saturate(1.5);
    box-shadow:
        0 0 10px var(--tk-kaluchi),
        0 0 18px var(--tk-void-purple),
        0 0 28px var(--tk-void-purple);
}
#collections .section-item {
    max-width: 306px;
}
#collections .section-img {
    max-width: 302px;
}
#collections .section-item-text {
    background: linear-gradient(to top, var(--tk-royal-blue), var(--tk-void-purple));
    text-align: center;
    line-height: 60px;
    font-size: 1.25rem;
}