#section-001
{
    .carousel-container
    {
        --item-width: 260px;
        --item-height: 360px;
        --item-offset: 100%;
        height: 840px;

        .slide
        {
            .item
            {
                width: var(--item-width);
                height: var(--item-height);
                background-position: 50% 50%;
                display: inline-block;
                transition: all 500ms ease-in-out;
                background-size: cover;
                position: absolute;
                z-index: 1;
                top: calc(100% - 16px);
                transform: translate(0, calc(-100% - 16px));
                border-radius: 20px;
                box-shadow:  0 32px 64px #505050;
                overflow: hidden;

                .content
                {
                    display: flex;
                    flex-direction: column;
                    justify-content: end;
                    position: relative;
                    padding: 32px 32px 32px 32px;
                    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(255,255,255,0) 50%);
                    height: 100%;
                    transition: opacity ease-in-out 500ms;
                }
            }
            .item:nth-child(1), .item:nth-child(2)
            {
                left: 0;
                top: 0;
                transform: translate(0,0);
                border-radius: 0;
                width: 100%;
                height: 100%;
                box-shadow: none;

                .content
                {
                    opacity: 0;
                }
            }
            .item:nth-child(3)
            {
                left: calc(var(--item-offset) - (3 * (var(--item-width) + 16px)));
            }
            .item:nth-child(4)
            {
                left: calc(var(--item-offset) - (2 * (var(--item-width) + 16px)));
            }
            .item:nth-child(5)
            {
                left: calc(var(--item-offset) - (1 * (var(--item-width) + 16px)));
            }
            .item:nth-child(n+6)
            {
                left: var(--item-offset);
                opacity: 0;
            }
        }

        .buttons
        {
            bottom: 128px;
            z-index: 3;
        }
        .buttons > div
        {
            width: 50px;
            height: 50px;
            border: 2px solid white;
            border-radius: 8px;
            transition: 0.5s;
        }
        .buttons > div:hover
        {
            background-color: rgba(255, 255, 255, 0.5);
        }
    }
    .global-container
    {
        inset: 0 0 0 0;
        z-index: 2;

        .title
        {
            font-size: 128px;
            width: 828px;
            text-shadow: 0px 0px 64px rgba(0, 0, 0, 0.5);
        }
    }

    @media screen and (max-width: 1600px)
    {
        .carousel-container
        {
            --item-width: 228px;
            --item-height: 316px;
        }
    }
    @media screen and (max-width: 960px)
    {
        .carousel-container
        {
            --item-width: 212px;
            --item-height: 294px;
            --item-offset: calc(100% + var(--item-width) + 16px);
        }
        .global-container
        {
            .title
            {
                font-size: 96px;
            }
        }
    }
    @media screen and (max-width: 640px)
    {
        .global-container
        {
            .title
            {
                font-size: 15vw;
                width: 100%;
            }
        }
    }
    @media screen and (max-width: 600px)
    {
        .carousel-container
        {
            --item-width: 196px;
            --item-height: 270px;
            --item-offset: calc(100% + (var(--item-width) + 16px) * 2);
        }
        .global-container
        {
            top: -128px;
        }
    }
    @media screen and (max-width: 400px) {
        .carousel-container
        {
            height: calc(100vh - 64px);
            min-height: 480px;

            .slide
            {
                .item
                {
                    .content > h3
                    {
                        font-size: 16px !important;
                    }
                }
            }
        }
    }
}

#section-004, #section-006
{
    .container > div:nth-of-type(1) > div:nth-of-type(2)
    {
        width: 50%;
    }
    .card-container
    {
        align-items: stretch;
    }
    .card
    {
        min-height: 512px;
        width: calc((100% - (3 * 32px)) / 4);
        box-shadow: 0 0 16px 1px rgb(240, 240, 240);
        transition: width 500ms ease-in-out 0ms;

        >img
        {
            height: 100%;
            width: 100%;
            border-radius: 10px;
        }
    }
    .card:nth-of-type(2)
    {
        transition-delay: 200ms;
    }
    .card:nth-of-type(3)
    {
        transition-delay: 400ms;
    }
    .card:nth-of-type(4)
    {
        transition-delay: 600ms;
    }

    @media screen and (max-width: 1200px)
    {
        .container
        {
            >div:nth-of-type(1)
            {
                flex-direction: column;
                align-items: start;
                justify-content: left;

                >div:nth-of-type(1)
                {
                    h2
                    {
                        font-size: 48px;
                        line-height: normal;
                    }
                }
                >div:nth-of-type(2)
                {
                    width: 100%;
                }
                p
                {
                    
                    text-align: left;
                }
            }
        }
        .card
        {
            width: calc((100% - (1 * 32px)) / 2);
        }
    }
    @media screen and (max-width: 720px)
    {
        .card
        {
            width: 100%;
        }
    }
}

#section-008
{
    .rotator-panel
    {
        width: 50%;
    }
    .rotator-featured-image
    {
        height: 256px;
        width: 100%;
    }
    .carousel-container
    {
        width: 100%;
    }
    .carousel-item
    {
        overflow: hidden;
        flex: 0.5;
        height: 360px;
    }
    .rotator-description
    {
        margin-bottom: 46px;
    }
    .dot
    {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 3px solid #fff;
        cursor: pointer;
        transition: all 300ms ease-in-out;

        &:hover
        {
            background-color: #9ca3af;
            transform: scale(1.15);
        }

        &.active
        {
            background-color: #1a202c;
            transform: scale(1.25);
        }
    }
    
    @media screen and (max-width: 1200px)
    {
        .rotator-container
        {
            flex-direction: column;
        }
        .rotator-featured-image
        {
            width: 100%;
        }
        .rotator-panel
        {
            width: 100%;
        }
        .carousel-item
        {
            &:nth-of-type(1)
            {
                height: 100%;
            }

            &:nth-of-type(2)
            {
                height: 100%;
            }
        }
    }

    @media screen and (max-width: 720px)
    {
        .rotator-title > h1
        {
            font-size: 48px;
        }
    }
}

#section-010
{
    >div
    {
        padding-top: 64px;
        padding-bottom: 196px;
        background-color: #F0EBFE;    
    }
    .tab
    {
        cursor: pointer;
        border-radius: 8px;
        transition: all 250ms ease-in-out;
    }
    .tab:hover
    {
        background-color: hsl(256, 90%, 94%);
    }
    .tab.active
    {
        background-color: hsl(256, 90%, 98%);
    }
    .tab-content
    {
        display: none;
    }
    .tab-content.active
    {
        display: block;
    }
    #au-questions
    {
        width: 60%;
    }
    #au-heading
    {
        width: 65%;
    }
    #au-stats
    {
        bottom: -260px;
        div
        {
            width: 260px;
        }
    }
    
    @media screen and (max-width: 1200px)
    {
        #au-heading, #au-questions
        {
            width: 100%;
        }
        #au-image
        {
            display: none;
        }
        #au-image-mobile
        {
            display: block;
        }
        #au-stats
        {
            div
            {
                width: 200px;
            }
            h3
            {
                font-size: 32px; 
            }
            h6
            {
                font-size: 16px;
            }
        }
    }
    @media screen and (max-width: 720px)
    {
        padding-bottom: 360px;
        >div
        {
            padding-bottom: 32px; 
        }
        #au-heading > h6
        {
            font-size: 16px;
        }
        #au-heading > h1
        {
            font-size: 48px;
        }
        #au-heading > p
        {
            font-size: 20px;
        }
        #au-questions > div:nth-of-type(1)
        {
            flex-direction: column;
            gap: 8px;
        }
        #au-questions > div:nth-of-type(1) > div
        {
            font-size: 16px;
        }
        #au-stats
        {
            flex-direction: column;
            top: calc(100% + 64px);
            bottom: unset;
            left: 0px;
            right: 0px;
            
            >div
            {
                width: 100%;
                box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.05);
            }
        }
    }
}

#section-011
{
    .tes-grid
    {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        width: 100%;
    }
    .tes-card
    {
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: relative;
        height: auto;
        min-height: 280px;
        padding: 32px 28px;
        border-radius: 16px;
        background-color: #F8F8F8;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .tes-card:hover
    {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }
    .tes-author
    {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 16px;
        border-top: 2px solid #E0E0E0;
    }

    @media screen and (max-width: 1024px)
    {
        .tes-grid
        {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media screen and (max-width: 720px)
    {
        .container
        {
            h1
            {
                font-size: 96px;
            }
        }
        .tes-grid
        {
            grid-template-columns: 1fr;
        }
    }

    @media screen and (max-width: 540px)
    {
        .container
        {
            h1
            {
                font-size: 16vw;
            }
        }
    }
}



/* Services Section - Modern Tabbed Design */
#section-012 {
    
}

.services-header {
    margin-bottom: 64px;
}

.services-tag {
    display: inline-block;
    background: var(--blue-600);
    color: white;
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 24px;
    font-weight: 500;
}

.services-title {
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-800) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-subtitle {
    max-width: 600px;
    line-height: 1.6;
}

.max-w-800 {
    max-width: 800px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Service Content Cards */
.services-grid {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.service-card-item {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* .service-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-800));
} */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.service-main-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.service-main-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.service-details {
    flex: 1;
}

.service-card-title {
    margin-bottom: 16px;
    color: #1a202c;
    line-height: 1.3;
}

.service-card-description {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
}

.service-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.feature-badge {
    background: #f1f5f9;
    color: var(--blue-800);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

.no-services-message {
    padding: 80px 32px;
    background: white;
    border-radius: 24px;
    border: 2px dashed #e2e8f0;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    #section-012 .container {
        padding: 0 32px;
    }
    
    .services-grid {
        gap: 24px;
    }
    
    .service-card-item {
        padding: 28px;
        min-width: 280px;
    }
}

@media screen and (max-width: 768px) {
    .services-title {
        font-size: 48px;
    }
    
    .services-grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .service-card-item {
        min-width: 100%;
        max-width: 100%;
    }
    
    .service-card-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .service-main-icon {
        width: 64px;
        height: 64px;
    }
    
    .service-main-icon img {
        width: 38px;
        height: 38px;
    }
}

@media screen and (max-width: 480px) {
    .services-header {
        margin-bottom: 40px;
    }
    
    .services-title {
        font-size: 36px;
    }
    
    .service-card-item {
        padding: 20px;
    }
    
    .service-main-icon {
        width: 56px;
        height: 56px;
    }
    
    .service-main-icon img {
        width: 32px;
        height: 32px;
    }
    
    .service-features {
        justify-content: center;
    }
    
    .feature-badge {
        font-size: 12px;
        padding: 6px 12px;
    }
}

#section-013
{
    .container
    {
        >div
        {
            >div:nth-of-type(2)
            {
                >div:nth-of-type(2)
                {
                    width: 640px;
                }
            }
        }
    }
    @media screen and (max-width: 1200px)
    {
        .container
        {
            >div
            {
                >div:nth-of-type(2)
                {
                    flex-direction: column;
                    >div:nth-of-type(2)
                    {
                        width: 100%;
                    }
                }
            }
        }
    }
}

#section-006
{
    --slide-width: 75%;

    .slider-global-content
    {
        left: 64px;
        bottom: 48px;
    }
    .slider-container
    {
        >div:nth-of-type(2)
        {
            padding-top: 72px;
            >div > div:nth-of-type(1)
            {
                width: 50%;
            }
        }
        .slide
        {
            height: 512px;
            min-width: var(--slide-width);
            object-fit: cover;
        }
        .mask-container
        {
            inset: 0 0 0 0;
            .ibeam
            {
                top: 0px;
                bottom: 0px;
                left: calc(75% - 16px);
                width: 32px;

                img
                {
                    height: 16px;
                    width: 16px;
                }
                img:nth-of-type(1)
                {
                    top: 0px;
                    left: -16px;
                    transform: rotate(0deg);
                }
                img:nth-of-type(2)
                {
                    top: 0px;
                    right: -16px;
                    transform: rotate(270deg);
                }
                img:nth-of-type(3)
                {
                    bottom: 0px;
                    left: -16px;
                    transform: rotate(90deg);
                }
                img:nth-of-type(4)
                {
                    bottom: 0px;
                    right: -16px;
                    transform: rotate(180deg);
                }

            }
        }
    }
    @media screen and (max-width: 1200px)
    {
        >div:nth-of-type(2)
        {
            >div:nth-of-type(1)
            {
                h2
                {
                    font-size: 48px;
                }
                h5
                {
                    font-size: 20px;
                }
            }
            >div:nth-of-type(2)
            {
                flex-direction: column;
            }
        }
        
    }
    @media screen and (max-width: 720px)
    {
        .slider-container
        {
            >div:nth-of-type(2)
            {
                padding-top: 96px;
                >div
                {
                    flex-direction: column;
                    align-items: start;
                    gap: 32px;

                    >div:nth-of-type(1)
                    {
                        width: 100%;
                    }
                }
            }
        }
        .slider-global-content
        {
            top: calc(100% + 16px);
            bottom: unset;
            left: 16px;
            h1
            {
                font-size: 48px;
            }
        }
    }
}

/*#region Section Two*/
#section-two > .container > div
{
    flex: 0.5;
}
.card-001
{
    flex: 0.4;
    position: relative;
    height: 640px;
    cursor: pointer;
    transition: flex 500ms ease-in-out, transform 750ms ease-out, opacity 700ms ease-out;
    overflow: hidden;
    border-radius: 16px;
}
@media screen and (max-width: 720px)
{
    .card-001
    {
        flex: 1 1 48%;
        height: 360px;
    }
    .card-001.card-001.card-001-active
    {
        flex: 1 1 48%;
    }
}
.card-001:nth-of-type(2)
{
    transition: flex 500ms ease-in-out, transform 750ms ease-out 200ms, opacity 700ms ease-out 200ms;
}
.card-001:nth-of-type(3)
{
    transition: flex 500ms ease-in-out, transform 750ms ease-out 400ms, opacity 700ms ease-out 400ms;
}
.card-001 > img
{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-001-content
{
    display: flex;
    align-items: end;
    gap: 16px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 24px 16px;
    z-index: 55;
}
.card-001-content > h6
{
    writing-mode: sideways-lr;
    color: white;
    line-height: 100%;
}
@media screen and (max-width: 720px)
{
    .card-001-content > h6
    {
        font-size: 36px;
    }
}
.card-001-content > p
{
    color: white;
    opacity: 0;
}  
.card-001.card-001-active > .card-001-content > p
{
    animation: fadeIn 250ms ease-in 350ms forwards;
}
@keyframes fadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
.card-001.card-001-active
{
    flex: 1;
}
@media screen and (max-width: 1200px)
{
    #section-two > .container
    {
        flex-direction: column;
    }
    #section-two > .container > div:nth-of-type(1)
    {
        order: 2;
    }
    #section-two > .container > div:nth-of-type(2)
    {
        order: 1;
    }
}
@media screen and (max-width: 600px)
{
    .pop-des > h1:nth-of-type(1)
    {
        font-size: 20vw
    }
    .pop-des > h1:nth-of-type(2)
    {
        font-size: 12vw;
    }
    
    .stats-container > div > p:nth-of-type(1)
    {
        font-size: 28px;
    }
    .stats-container > div > p:nth-of-type(2)
    {
        font-size: 18px;
    }
}
/*#endregion*/

/*#region Section Three*/
#section-three, #section-009
{
    height: calc(900px + 144px);

    @media screen and (max-width: 400px)
    {
        height: calc(400px);

        .magic-india
        {
            font-size: 32px;
        }
        
    }
}
#section-three > .container,
#section-009 > .container
{
    border-radius: 16px;
    overflow: hidden;
    transition: all 500ms ease-in-out;
}
@media (max-width: 840px)
{
    .magic-india
    {
        font-size: 108px;
    }
}
@media (max-width: 720px)
{
    .magic-india
    {
        font-size: 96px;
    }
}
@media (max-width: 600px)
{
    .magic-india
    {
        font-size: 64px;
    }
}
/*#endregion*/


/*#region Section Five*/
#section-five > .container
{
    transition: all 500ms ease-in-out;
}
.card-003
{
    position: relative;
    height: 900px;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    transition: width 500ms ease-in-out, transform 750ms ease-out, opacity 750ms ease-out;
}
.card-003:nth-of-type(2)
{
    transition-delay: 200ms;
}
.card-003:nth-of-type(3)
{
    transition-delay: 400ms;
}
.card-003 > img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-003-content
{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0 0 0 0;
    z-index: 55;
}
@media screen and (max-width: 1024px)
{
    #section-five > .container
    {
        flex-direction: column;
    }
    .card-003
    {
        height: 360px;
    }
}
@media screen and (max-width: 1400px)
{
    .card-003-content > h1
    {
        font-size: 72px;
    }
}

/*#endregion*/


/*#region Section Seven*/
@media screen and (max-width: 1024px)
{
    #section-seven > .container > h1
    {
        font-size: 96px;
    }
}
@media screen and (max-width: 720px)
{
    #section-seven > .container > h1
    {
        font-size: 22vw;
    }
}
/*#endregion*/

.service-card
{
    width: 360px;
    height: 300px;
    padding: 32px;
    background-color: #f3f4f6;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 250ms ease-in-out, transform 750ms ease-out, opacity 750ms ease-out;
}
.service-card:hover
{
    background-color: var(--blue-500);
}

.service-card.s6:nth-of-type(1)
{
    background-color: #dae6ff;
    transition: background-color 250ms ease-in-out, transform 750ms ease-out, opacity 750ms ease-out 200ms;
}
.service-card.service-card.s6:nth-of-type(1):hover
{
    background-color: hsl(221, 100%, 25%);
}

.service-card.s6:nth-of-type(2)
{
    background-color: #ffdaff;
    transition: background-color 250ms ease-in-out, transform 750ms ease-out, opacity 750ms ease-out 200ms;
}
.service-card.service-card.s6:nth-of-type(2):hover
{
    background-color: hsl(300, 100%, 25%);
}


.service-card.s6:nth-of-type(3)
{
    background-color: #e0ffda;
    transition: background-color 250ms ease-in-out, transform 750ms ease-out, opacity 750ms ease-out 400ms;
}
.service-card.service-card.s6:nth-of-type(3):hover
{
    background-color: hsl(110, 100%, 25%);
}

.service-card.s6:nth-of-type(4)
{
    background-color: #ffdada;
    transition: background-color 250ms ease-in-out, transform 750ms ease-out, opacity 750ms ease-out 600ms;
}
.service-card.service-card.s6:nth-of-type(4):hover
{
    background-color: hsl(0, 100%, 25%);
}

.service-card > div > h3,
.service-card > div > p
{
    transition: all 250ms ease-in-out;
}
.service-card:hover > div > h3,
.service-card:hover > div > p
{
    color: white;
}


.card-wrapper-s8
{
    opacity: 0;
    transition: opacity 1000ms ease-in-out;
}
.card-wrapper-s8.active
{
    opacity: 1;
}
.card-wrapper-s8 > .img-container-s9
{
    height: 0px;
    transition: height 1000ms ease-in-out;
}
.card-wrapper-s8.active > .img-container-s9
{
    height: 360px;
}
.img-container-s9 > img
{
    width: 256px;
    flex: 1;
}
.img-container-s9:nth-of-type(1) > img
{
    border-radius: 0px 0px 16px 16px;
}
.img-container-s9:nth-of-type(2) > img
{
    border-radius: 16px 16px 0px 0px;
}
.dotted-textbox
{
    border: 2px dashed rgb(65, 64, 64);
}