body{
    color: #111;
}
h2
{
    color: #111;
    font-family: 'usb';
    font-weight: normal;
}
#pname_photo_father{
    height: auto;
}
#pname_expli{
    height: auto;
    display: flex;
    text-align: left;
    justify-content: space-between;
    padding-bottom: 50px;
    padding-top: 50px;
}
#small_titre_header_r640
{
    font-size: 16px;
    margin-bottom: 10px;
    color: #fff;
    display:flex;
    justify-items: center;

    .label-new
    {
        background-color: #23A0D9;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 10px;
        text-transform: uppercase;
    }
}
#titre_header_r640{
    margin-top: 0px;
    font-size: 28px;
}

#contenu_header_vps{
    margin-top: 30px;
}
.pname_photo{
    height: auto;
}

#div_header_explanation{
    display: flex;
    flex-direction: column;
    gap:20px;
    font-size:18px;
    color:#fff;
    > div{
        display: flex;
        align-items: center;
        gap:10px;
    }
}

.div_discover_and_price
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}


.table-r640{
    width:100%;margin-top:40px;
    font-family: 'ubr' !important;
thead
    {

        tr th{
            padding: 15px 10px;
            font-family: 'usb';
            border: 1px solid #CFD1D24D;
            background-color: #23A0D918;
            text-align: left;

            border-left: none;
            border-right: none;

            &:first-child
            {
                /*width: 80px;*/
                border-left: 1px solid #CFD1D24D;
                padding-left: 15px;
                border-top-left-radius: 8px;
            }
            &:last-child
            {
                border-right: 1px solid #CFD1D24D;
            }

            &.col_price
            {
                text-align: center;
            }
            &.col_availability
            {
                text-align: center;
            }
            &.col_benchmark
            {
                text-align: center;
            }
        }

        /*tr th:first-child {*/
        /*    border-top-left-radius: 8px;*/
        /*}*/
        tr th:last-child {
            border-top-right-radius: 8px;
            width: 180px;
        }
    }
    tbody{

        tr:nth-child(odd) td {
            background-color: #FFFFFF;
        }
        tr:nth-child(even) td {
            background-color: #F6F9FF;
        }

        tr:hover td {
            background-color: #E8F0FF !important;
            transition: background-color 0.2s ease;
        }

        tr:last-child td:first-child {
            border-bottom-left-radius: 8px;
        }
        tr:last-child td:last-child {
            border-bottom-right-radius: 8px;
        }

        tr td{
            padding: 15px 10px;
            border-bottom: 1px solid #CFD1D24D;
            &:first-child
            {
                /*width: 80px;*/
                border-left: 1px solid #CFD1D24D;
                padding-left: 15px;
            }
            &:last-child
            {
                border-right: 1px solid #CFD1D24D;
            }

            &.col_availability
            {
                text-align: center;
            }
            &.col_benchmark
            {
                text-align: center;
            }
            &.col_price
            {
                text-align: right;
                font-size: 24px;
                & small
                {
                    font-size: 12px;
                    color: #666;
                }

                .price_from_txt {
                    text-transform: uppercase;
                    font-size: 11px;
                    color: #666;
                    font-family: 'ubr';
                }

                .price_amount_wrapper {
                    display: inline-block;
                    margin-bottom: 10px;
                }

                .price_amount_monthly {
                    font-size: 24px;
                    font-family: 'ubb';
                }

                .price_amounth_periodicity {
                    font-size: 11px;
                    color: #666;
                    font-family: 'ubr';
                }
            }

            .info_cpu_model
            {
                font-family: 'ubb';
                font-size: 14px;
            }
            .info_cpu_cores
            {
                font-family: 'ubr';
                font-size: 13px;
                color: #3D3D3D;
            }

            .info_ram_size
            {
                font-family: 'ubb';
                font-size: 14px;
            }

            .info_ram_type
            {
                font-family: 'ubr';
                font-size: 13px;
                color: #3D3D3D;
            }

            .info_storage_size
            {
                font-family: 'ubb';
                font-size: 14px;
            }

            .info_storage_type
            {
                font-family: 'ubr';
                font-size: 13px;
                color: #3D3D3D;
            }

            .benchmark-score {
                font-family: 'ubb';
                font-size: 16px;
                color: #003276;
            }

            .benchmark-link {
                text-decoration: none;
                color: inherit;
                transition: all 0.2s ease;

                &:hover {
                    opacity: 0.7;

                    .benchmark-score {
                        text-decoration: underline;
                    }
                }
            }

            .buttonb {
                transition: all 0.2s ease;

                &:hover {
                    opacity: 0.85;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                }

            }
        }

    }

}

.div_inner_r640_functions
{
    /** GRADIANT FORM 0% 003276 to 100% 06111D **/
    background: linear-gradient(-180deg, #003276 0%, #06111D 100%);

    color: #fff;
    font-family: 'ubr';
    display: flex;
    flex-direction: column;
    gap: 20px;
    .h2_barre_center
    {
        h2
        {
            font-family: 'usb';
            color: #fff;
        }
    }
}
.r640-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;

    .r640-feature-tabs {
        display: flex;
        gap: 5px;

        .r640-feature-tab {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: calc(100% / 3);
            padding-bottom: 15px;
            color: #cfeff9;
            transition: border-color .18s ease, color .18s ease, background-color .18s ease;
            outline: none;
            border-bottom: 3px solid #c5c5c529;
            cursor: pointer;

            &:hover,
            &:focus,
            &:focus-visible {
                border-bottom: 3px solid #06A7E6;
                color: #ffffff;

                .r640-feature-tab__icon {
                    border-color: #06A7E6;
                    background: rgba(6,167,230,0.08);
                }
            }

            &.is-active {
                border-bottom: 3px solid #0B86C2;
                color: #ffffff;

                .r640-feature-tab__icon {
                    border-color: #0B86C2;
                    background: rgba(11,134,194,0.10);
                }

                &:hover {
                    border-bottom: 3px solid #19B7EE;
                }
            }

            .r640-feature-tab__icon {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                transition: border-color .18s ease, background-color .18s ease;

                img {
                    width: 24px;
                    height: 24px;
                }
            }

            .r640-feature-tab__title {
                font-family: 'usb';
            }
        }
    }

    .r640-feature-panels {
        margin-top: 20px;
        position: relative;
        min-height: 400px;

        .r640-feature-panel {
            display: none;
            opacity: 0;
            transform: scale(0.98);
            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

            &.is-active {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
                opacity: 1;
                animation: smoothFadeIn 1.2s ease-in-out forwards;
            }

            &.is-hiding {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s ease-out;
            }
        }
    }

    @keyframes smoothFadeIn {
        0% {
            opacity: 0;
        }
        20% {
            opacity: 0.15;
        }
        40% {
            opacity: 0.35;
        }
        60% {
            opacity: 0.6;
        }
        80% {
            opacity: 0.85;
        }
        100% {
            opacity: 1;
        }
    }

.r640-feature-item {
        display: flex;
        flex-direction: row;
        gap: 15px;
        padding: 30px;
        background: #23A0D91A;
        border-radius: 15px;
        transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;

        &:hover {
            background: #23A0D933;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(6,167,230,0.07), 0 2px 8px rgba(3,9,28,0.06);
            -webkit-font-smoothing: antialiased;
            will-change: transform;
        }

        .r640-feature-item__icon {
            flex-shrink: 0;

            img {
                width: 48px;
                height: 48px;
                object-fit: contain;
            }
        }

        .r640-feature-item__body {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .r640-feature-item__title {
                font-family: 'usb';
                font-size: 16px;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 15px;
                img {
                    width: 26px;
                    height: 26px;
                    border-radius: 4px;
                }
            }

            .r640-feature-item__desc {
                font-family: 'ubr';
                font-size: 14px;
                line-height: 1.5;
                color: #cfeff9;
            }
        }
    }
}

.r640-idrac {
    display: flex;
    flex-direction: row;
    gap: 50px;
    margin-top: 40px;
    min-height: 580px;

    .r640-idrac__args {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-self: flex-start;
    }

    .r640-idrac__preview {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 500px;
    }

    .r640-idrac-arg {
        padding: 25px;
        border: 2px solid transparent;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, margin-left 0.3s ease;
        cursor: pointer;

        &:hover {
            border-color: #e0e0e0;
        }

        &.is-active {
            margin-left: 25px;
            border-left: 3px solid #0B86C2;
            box-shadow: 0 6px 20px rgba(11, 134, 194, 0.2);

            .r640-idrac-arg__content {
                max-height: 500px;
                opacity: 1;
                margin-top: 15px;
            }
        }

        .r640-idrac-arg__header {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .r640-idrac-arg__icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .r640-idrac-arg__title {
            font-family: 'ubr';
            font-size: 18px;
            color: #111;
            margin: 0;
        }

        .r640-idrac-arg__content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
        }

        .r640-idrac-arg__desc {
            font-family: 'ubr';
            font-size: 14px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 15px;
        }

        .r640-idrac-arg__points {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-left: 15px;
        }

        .r640-idrac-arg__point {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-family: 'ubr';
            font-size: 13px;
            color: #666;

            i {
                color: #23a0d9;
                margin-top: 2px;
                flex-shrink: 0;
            }
        }
    }

    .r640-idrac-preview__item {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease;

        &.is-active {
            display: block;
            opacity: 1;
            animation: fadeInPreview 0.6s ease-in-out forwards;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
    }

    .r640-idrac-preview__loading {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
    }

    @keyframes fadeInPreview {
        0% {
            opacity: 0;
            transform: scale(0.98);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

@media (max-width: 1320px) {
    .div_discover_and_price
    {
        img
        {
            width: 80%;
        }
    }

}

@media (max-width: 1080px) {

    .table-r640
    {
        .col_benchmark
        {
            display:none;
        }
        thead {
            .col_price {
                width: 100%;
            }
            .col_availability {
                width: 120px;
            }
            .col_network {
                display:none;
            }
        }
        tbody {
            td.col_price {
                width: 100%;

                .price_amount_wrapper {
                    .price_amount_monthly {
                        font-size: 20px;
                    }
                }
                display:flex;
                flex-direction: column;
            }
            .col_availability {
                width: 120px;
            }
            .col_network
            {
                display:none;
            }
        }
    }


    .div_discover_and_price
    {
        width: 60%;
    }

    .r640-feature-panels .r640-feature-panel.is-active
    {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    }

    .r640-idrac
    {
        flex-direction: column-reverse;
        gap: 20px;
        .r640-idrac__preview
        {
            min-height: 350px;
        }
    }
}

@media (max-width: 840px) {

    .table-r640 {
        /* Hide table header on mobile */
        thead {
            display: none;
        }

        tbody {
            display: block;

            tr {
                display: block;
                margin-bottom: 20px;
                border: 1px solid #CFD1D24D;
                border-radius: 8px;
                background-color: #FFFFFF !important;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                padding: 15px;

                /* Remove hover background on mobile cards */
                &:hover td {
                    background-color: #FFFFFF !important;
                }

                td {
                    display: block;
                    border: none !important;
                    padding: 10px 0 !important;
                    text-align: right !important;
                    background-color: transparent !important;
                    &:first-child {
                        text-align: left !important;
                    }

                    /* Add label before each cell */
                    &:before {
                        content: attr(data-label);
                        font-family: 'ubb';
                        display: block;
                        margin-bottom: 5px;
                        color: #003276;
                        font-size: 14px;
                        text-transform: uppercase;
                        text-align: left;
                    }

                    /* Hide benchmark column on mobile */
                    &.col_benchmark {
                        display: none;
                    }

                    /* Hide network column on mobile */
                    &.col_network {
                        display: none;
                    }

                    /* Special styling for specific columns */
                    &.col_price {
                        text-align: left !important;
                        border-top: 2px solid #E8F0FF !important;
                        padding-top: 15px !important;
                        margin-top: 10px;

                        .price_amount_wrapper {
                            margin-bottom: 15px;
                            display: block;
                            width: 100%;
                            text-align: center;

                            .price_amount_monthly {
                                font-size: 28px;
                            }

                            .price_amounth_periodicity {
                                font-size: 12px;
                            }
                        }

                        .buttonb {
                            width: 100% !important;
                            max-width: 100% !important;
                            text-align: center;
                            padding: 0px 20px !important;
                            font-size: 16px;
                            display: block !important;
                            margin: 10px 0 0 0 !important;
                            box-sizing: border-box;
                        }

                        /* Modify label for price */
                        &:before {
                            content: "";
                            display: none;
                        }
                    }

                    &.col_availability {
                        text-align: left !important;
                        i::before {
                            content: attr(data-label);
                            font-family: 'ubr';
                            font-size: 14px;
                            text-transform: uppercase;
                            color: #003276;
                            margin-right: 5px;
                        }
                        i {
                        margin-left: 0 !important;
                    }
                    }

                    /* First cell (name) - make it prominent */
                    &:first-child {
                        font-size: 18px;
                        font-family: 'ubb';
                        color: #003276;
                        padding-bottom: 15px !important;
                        border-bottom: 2px solid #E8F0FF !important;
                        margin-bottom: 10px;

                        &:before {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    .div_discover_and_price
    {
       display:none;
    }
    .r640-feature-panels .r640-feature-panel.is-active
    {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
}

@media (max-width: 680px) {

}


@media (max-width: 480px) {

}