header .logo .right
{
    filter: invert(0);
}

.home {
    width: 100vw;
    min-height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    overflow-y: hidden;
}


/*  Hero Section  */

.home .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
}

.home .hero .text
{
    position: absolute;
    top: 50%;
    left: 7.5vw;
    transform: translate(0%, -50%);
    max-width: 50vw;
    text-align: left;
    color: white;
    mix-blend-mode: exclusion;
    font-family: "Poppins", sans-serif;
    letter-spacing: normal;
}
.home .hero .text .relative
{
    display: flex !important;
    flex-direction: column;
}

.home .hero .text .title {
    font-size: 5em;
    line-height: .85;
    font-weight: bold;
    text-align: center;
}
.home .hero .text p {
    font-size: 1.145em;
    margin-top: 1em;
    margin-left: 0.15em;
}
.home .hero .text p.tr
{
    font-size: 1.275em;
    order: 2;
    margin-top: 0.6em;
}
.home .hero .text p.tr + .title
{
    order: 1;
}

.home .hero .image
{
    position: absolute;
    right: 7.5%;
    top: 50%;
    transform: translateY(-50%);
    --images-size: 33.33vw;
    width: var(--images-size);
    height: fit-content;
}
.home .hero .image img
{
    position: relative;
    z-index: 1;
}

.home .hero .image .relative .light {
    content: "";
    width: 4px;
    height: 4px;
    opacity: 0;
    position: absolute;
    z-index: 0;
    display: flex;
    background-color: #46fbd1;
    border-radius: 9px;
    box-shadow: #46fbd1 0 0 10px, #46fbd1 0 0 10px;
    transform: translate(-50%, -50%);
    will-change: top, left, width, height, ;
}



/*  services Section  */


/* STICKY serviceS SECTION - YOUR EXACT STRUCTURE */
.home .services {
    position: relative;
    margin-top: 100vh;
    width: 100vw;
    height: 450vh;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #221F1F;
    color: white;
}
.home .services .animation-triggers
{
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background-color: rgb(255, 23, 0);
}
.home .services .animation-triggers .relative div
{
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: red;
    width: 100%;
    opacity: 1;
}
.home .services .animation-triggers .relative div:nth-child(1)
{
    top: 50vh;
}
.home .services .animation-triggers .relative div:nth-child(2)
{
    top: 150vh;
}
.home .services .animation-triggers .relative div:nth-child(3)
{
    top: 250vh;
}
.home .services .animation-triggers .relative div:nth-child(4)
{
    top: 350vh;
}

.home .services .left-side {
    flex: 1;
    max-width: 50vw;
    position: absolute;
    top: 50vh;
    left: 7.5vw;
    transform: translate(0%, -50%);
    
    display: flex;
    flex-direction: column;
}

.home .services .title {
    font-size: 2.8em;
    color: #333;
    margin-bottom: 24px;
    line-height: 1.1;
    font-weight: 700;
    transition: all 0.8s ease;
}

.home .services .text {
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
    transition: all 0.8s ease;
}

.home .services .right-side {
    flex: 1;
    position: absolute;
    --service-size: 25vw;
    --service-right: 7.5vw;
    width: calc(var(--service-size) + var(--service-right));
    height: 400vh;
    right: 0;
    top: 0;
}

.home .services .all-services {
    position: relative;
    width: calc(var(--service-size) + var(--service-right));
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 50vh;
    height: 400vh;
}

.home .services .service {
    position: sticky;
    width: var(--service-size);
    height: 33.3333vh;

    top: 150vh;
    right: var(--service-right);
    transform-origin: center center;
    transform: translate(-50%, -50%);

    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
    color: #221F1F;
}
.home .services .service-content
{
    display: flex;
    flex-direction: column;
}

.home .services .service .link,
.home .services .service .price
{
    background: linear-gradient(90deg, #F15322 0%, #FF1700 100%);
    color: white;
    padding: 10px 55px;
    border-radius: 20px;
    position: absolute;
    font-family: Roboto;
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 140%;
    letter-spacing: 0%;
}
.home .services .service a.link {
    text-decoration: none;
}
.home .services .service .price
{
    top: 0;
    left: 50%;
    transform: translate(-50%, -25%);
}
.home .services .service .link
{
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 25%);
}
.home .services .service .service-title
{
    font-family: Roboto;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
}
.home .services .service .service-text
{
    font-family: Roboto;
    font-weight: 300;
    font-style: Light;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
}


.home .services .service:nth-child(1),
.home .services .service:nth-child(3)
{
    background-color: #221F1F;
    color: white;
    .service-title
    {
        color: #F15722;
    }
}

.home .services .service:nth-child(2),
.home .services .service:nth-child(4)
{
    background-color: #EEEEEE;
    color: #221F1F;
    .service-title
    {
        color: #F15722;
    }
}

.home .services .service:nth-child(4) .link,
.home .services .service:nth-child(4) .price
{
    background: #221F1F;
}

.home .services .service:nth-child(2)
{
    top: 250vh;
}
.home .services .service:nth-child(3)
{
    top: 350vh;
}
.home .services .service:nth-child(4)
{
    top: 450vh;
}

/* PLANS */

.plans
{
    z-index: 30;
    position: relative;
    background-color: white;
    color: #221F1F;
    width: 100vw;
    height: 300vh;
}

.plans > .title,
.plans .pin-spacer .title
{
    position: relative;
    top: 25vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: var(--secondary-color);
    width: fit-content;
}
.plans > .animation-trigger
{
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
    position: absolute;
    background-color: transparent;
}

.plans > .plan
{
    --items-per-view: var(--total-plans);
    --gap: 5vw;

    /* Calculate width based on items per view instead of total items */
    --width: calc((94vw - (var(--items-per-view)) * var(--gap)) / var(--items-per-view));

    width: var(--width);
    min-height: calc(var(--width) * 1.45);

    /* Positioning emains mostly the same */
    left: calc(var(--index) * (var(--gap) + var(--width)) + 5vw);
    position: fixed;
    bottom: -95vh;

    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 2em 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    
}


.plans .plan:hover {
    transform: scale(1.025);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}

.plans .plan .plan-icon {
    width: 50px;
    height: auto;
    object-fit: contain;
    margin-bottom: 2em;
}

.plans .plan .title {
    font-size: 1.25em;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1.5em;
}

.plans .plan ul {
    list-style: none;
    margin-bottom: 2em;
    flex-grow: 1;
    padding-left: 0;
}

.plans .plan li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75em;
    gap: 0.75em;
}


.plans .plan li {
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.1em;
}

.plans .plan .price {
    font-size: 1.5em;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 1.5em;
    text-align: left;
}

.plans .plan a {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    text-decoration: none;
    padding: 0.75em 1.5em;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    transition: background 0.2s ease;
    display: block;
}

.plans .plan a:hover {
    background: linear-gradient(135deg, #ee5a52, #e53e3e);
}


.plans .plan:last-child .price {
    color: #8b5cf6;
}

.plans .plan:last-child a {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.plans .plan:last-child a:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.burger div
{
    background-color: white;
}
/* Responsive */
@media (max-width: 960px) {
    .home .hero .text {
        left: 50%;
        top: 33.33333%;
        transform: translate(-50%, -50%);
        max-width: 100vw;
        width: max-content;
    }
    .home .hero .image {
        top: 66.666%;
        right: 49%;
        transform: translate(50%, -50%);
        width: 80vw;
    }
    .home .hero .image .relative .light
    {
        width: 6px;
        height: 6px;
    }
    
    .home .services .left-side {
        max-width: 95vw;
        width: max-content;
        top: 33.333vh;
        left: 50vw;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .home .services .right-side
    {
        --service-size: 95vw;
        --service-right: 50vw;

        width: 95vw;

        right: 2.5vw;
    }
    .home .services .all-services
    {
        width: 95vw;
    }
    .home .services .service {
        right: var(--service-right);
        transform: translate(50%, calc(-50% + 25vh));
    }
    .animation-triggers
    {
        visibility: hidden;
    }
    .plans > .plan {
        --items-per-view: 2 !important;
        left: calc(mod(var(--index), var(--items-per-view)) * (var(--gap) + var(--width)) + 5vw);
        min-height: calc(var(--width) * 1.1);
        height: calc(var(--width) * 1.1);
    }
    .plans > .plan:nth-child(-n+4):not(:nth-child(-n+2))
    {
        transform: translateY(calc(-100% - var(--gap)));
    }
}
@media (max-width: 896px) {
    
    .plans > .title, .plans .pin-spacer .title {
        position: relative;
        top: 20vh;
        left: 50vw;
        transform: translate(-50%, -50%);
        font-size: 32px;
        font-weight: bold;
        color: var(--secondary-color);
        width: fit-content;
    }
    .plans > .plan {
        --items-per-view: 2 !important;
        left: calc(mod(var(--index), var(--items-per-view)) * (var(--gap) + var(--width)) + 5vw);
        min-height: calc(var(--width) * 1.3333);
        height: calc(var(--width) * 1.3333);
    }
}
@media (max-width: 768px) {
    
}
@media (max-width: 640px) {
}
@media (max-width: 512px) {
    .plans > .plan
    {
        min-height: calc(var(--width) * 1.5);
        height: calc(var(--width) * 1.75);
    }
    
}