/* Adjustments for docs content area */
.md-content__inner {
    .about-section,
    .roadmap-section,
    .latest-features-section {
        .custom-container {
            width: 100%;
            max-width: none;
            padding: 0;
        }
    }
}

.info-boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-top: 32px;

    .info-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
        padding: 24px;
        gap: 24px;

        background: rgba( 255, 255, 255, 0.1 );
        box-shadow: 0 4px 12px 0 rgba( 31, 38, 135, 0.15 );
        backdrop-filter: blur( 3px );
        -webkit-backdrop-filter: blur( 3px );
        border-radius: 20px;

        .content {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;

            .header {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 12px;
            
                img {
                    width: 32px;
                    height: 32px;
                }
    
                h3 {
                    font-size: var(--int-font-size-h4);
                    font-weight: 700;
                    margin: 0;
                    color: var(--int-dark-100);
                }
            }
            
            p {
                font-size: var(--int-font-size-p);
                font-weight: 400;
                margin: 0;
                color: var(--int-dark-100);
            }
        }
    }
}

.latest-features.swiper {
    width: 100%;
    height: auto;
    overflow: hidden !important;
    position: relative !important;
    padding: 32px 48px 48px 48px !important;
    border-radius: 20px;
    color: var(--int-dark-100);
    box-shadow: 0 4px 12px 0 rgba( 31, 38, 135, 0.15 );

    .swiper-wrapper {
        height: auto;
        position: relative;
        z-index: 1;

        .swiper-slide {
            height: auto;
            display: flex;
            align-items: stretch;
        }
    }

    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 18px;
        height: 12px;

        .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
        }
    }

    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: var(--int-font-size-h3);
    }

    .swiper-button-next, .swiper-button-prev {
        z-index: 10;
        width: 48px;
    }

    .swiper-button-next {
        right: 0;
    }

    .swiper-button-prev {
        left: 0;
    }

    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 48px;
        background: linear-gradient(to right, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
        z-index: 2;
        pointer-events: none;
    }

    &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 48px;
        background: linear-gradient(to left, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
        z-index: 2;
        pointer-events: none;
    }


    h4 {
        font-size: var(--int-font-size-h4);
        font-weight: 700;
        margin: 0;
    }

    .main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        flex: 1;
        
        img,
        iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: contain;
            grid-area: 1 / 2 / 2 / 3;
            box-shadow: 0 4px 12px 0 rgba( 31, 38, 135, 0.15 );

            @media (max-width: 1024px) {
                grid-area: 2 / 1 / 3 / 1;
                height: 100%;
            }
        }

        @media (max-width: 480px) {
            iframe {
                height: 127px;
            }
        }

        .main-content-text-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            grid-area: 1 / 1 / 2 / 2;

            .main-content-text {
                margin: 0 !important;
                padding-left: 24px !important;
            }
        }

        .try-it-now-button {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 16px;
            background-color: var(--int-white);
            border: 2px solid var(--int-light-blue);
            box-sizing: border-box;
            border-radius: 32px;
            padding: 8px 10px 8px 26px;
            overflow: hidden;
            position: relative;
            z-index: 10;
            cursor: pointer;
            width: max-content;
            box-shadow: inset 2px 2px 4px 0 rgba(31, 38, 135, 0.10);

            span {
                color: var(--int-light-blue);
                font-size: var(--int-font-size-p);
                font-weight: 500;
                text-decoration: none !important;
            }

            .icon-background {
                padding: 6px 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                aspect-ratio: 1 / 1;
                background-color: var(--int-light-blue);
                border-radius: 50%;
                box-shadow: 0 3px 8px 0 rgba( 31, 38, 135, 0.15 );

                svg {
                    color: var(--int-white);
                    transform: rotate(180deg);
                    transition: all 0.3s ease-in;
                }
            }

            &::after {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                width: calc(100% + 4px);
                height: calc(100% + 4px);
                background-color: var(--int-light-blue);
                transform: translateX(-100%);
                transition: all 0.4s ease-in-out;
                z-index: -1;
                border-radius: 32px;
            }

            &:hover {
                border: 2px solid transparent;
                padding: 8px 10px 8px 26px;
                transition: color 0.3s ease-in-out;

                span {
                    color: var(--int-white);
                }

                .icon-background {
                    background-color: var(--int-white);
                    transition: all 0.3s ease-in-out;

                    svg {
                        color: var(--int-light-blue);
                    }
                }

                &::after {
                    transform: translateX(0);
                }
            }
        }

        ul {
            list-style-type: disc;
            padding-left: 30px;
        }

        p, li {
            font-size: var(--int-font-size-p);
            font-weight: 400;
            margin: 0;
            line-height: 1.5;
        }

        p strong,
        li strong {
            font-size: var(--int-font-size-p);
            font-weight: 700;
            line-height: 1.5;
        }

        .text-without-heading {
            padding-top: 35px;

            @media (max-width: 1024px) {
                padding-top: 0;
            }
        }

        ul {
            list-style-type: disc;

            li {
                margin-block: 12px;
            }
        }
    }
}