body,html {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins",sans-serif!important;
    overflow-x: clip; /* Use 'clip' instead of 'hidden'. This allows sticky to work! */
}

.blogs-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(17,24,39,25);
    margin-top: 0;
    height: fit-content;
    padding: 50px 50px 35px
}

.blogs-page-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15%
}

.blogs-page-description h2 {
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff
}

.blogs-page-description h2::after {
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    background-color: #f53;
    margin: 8px auto 8px
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff
}

.breadcrumb .breadcrumb-item a {
    color: var(--dark-accent-color);
    text-decoration: none;
    cursor: pointer
}

.breadcrumb .breadcrumb-item.active {
    color: grey
}

.blogs-view-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15%
}

.blogs-view-description h1 {
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center
}

.blogs-view-description p {
    font-size: 16px;
    margin-bottom: 0;
    text-align: center
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    font-family: 'Poppins',sans-serif;
    /* REMOVE clip-path and overflow from here */
}

.g-main-blogs-main-categories-main-container {
    width: 100%
}

.g-main-blogs-main-title {
    font-family: 'Poppins',sans-serif;
    filter: drop-shadow(0 0 0 black);
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    color: #000
}

.g-main-blogs-main-title-img {
    width: 45px
}

@media screen and (max-width: 600px) {
    .g-main-blogs-main-title {
        font-size:25px!important
    }

    .g-main-blogs-main-title-img {
        width: 38px
    }
}

@media screen and (max-width: 500px) {
    .g-main-blogs-main-title {
        font-size:18px!important
    }

    .g-main-blogs-main-title-img {
        width: 38px
    }
}

.g-main-blogs-main-section {
    max-width: 1600px;
    width: 100%
}

.g-main-blogs-main-categories-img-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.g-main-blogs-main-categories-img-main-container {
    max-width: 1600px;
    display: flex
}

.g-main-blogs-main-categories-main-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
    margin-top: 40px
}

.g-main-blogs-main-categories {
    display: flex;
    align-items: center;
    font-family: 'Poppins',sans-serif;
    font-weight: 600!important;
    transition: 0.3s ease-in-out;
    color: #fff;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center
}

.g-main-blogs-main-categories-img {
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    font-family: 'Poppins',sans-serif;
    font-weight: 600!important;
    gap: 20px;
    padding: 10px 10px;
    transition: 0.3s ease-in-out;
    color: #000;
    width: 190px
}

.g-main-blogs-main-categories-img:hover {
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: #000
}

.g-main-blogs-main-container {
    max-width: 1600px;
    margin: auto;
    padding: 45px 15px 80px
}

.g-main-blogs-layout {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px 30px;
    margin-top: 40px
}

@media screen and (max-width: 800px) {
    .g-main-blogs-layout {
        grid-template-columns:repeat(1,1fr)
    }
}

.g-main-blogs-card {
    display: flex;
    grid-template-columns: repeat(2,1fr);
    border: 1px solid #ebebeb;
    border-radius: 24px;
    background-color: #f7f7f7;
    transition: 0.3s ease-in-out;
    flex-direction: row
}

.g-main-blogs-card-img-div {
    width: 400px;
}

.g-main-blogs-card-img {
    height: 100%;
    max-width: 400px;
    object-fit: cover;
    object-position: left;
    border-radius: 24px 0 0 24px
}

.g-main-blogs-card-content-div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px;
    max-width: 400px;
}

.g-main-blogs-card-title {
    font-family: 'Poppins',sans-serif;
    text-transform: capitalize!important;
    font-weight: 600!important;
    font-size: 18px!important;
    margin-bottom: 7px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.g-main-blogs-card-desc {
    font-family: 'Poppins',sans-serif;
    font-weight: 400!important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 15px
}

.g-main-blogs-card-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px
}

.g-main-blogs-card-header {
    display: none;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 7px
}

.g-main-blogs-card-link {
    background-color: #000;
    color: #fff;
    padding: 3px 14px 2px;
    font-weight: 500!important;
    font-family: 'Poppins',sans-serif;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    border-bottom: 3px solid transparent!important;
    border: 1px solid #000
}

.g-main-blogs-card-link:hover {
    background-color: #fff0;
    color: #000;
    border-bottom: 3px solid #000!important;
    transition: 0.3s ease-in-out
}

.g-main-blogs-card-read-more {
    display: flex;
    text-decoration: none;
    color: #000;
    padding: 0;
    font-weight: 500!important;
    font-family: 'Poppins',sans-serif;
    border-radius: 16px;
    transition: 0.3s ease-in-out;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    gap: 5px
}

.g-main-blogs-card-read-more:hover {
    color: #000
}

.g-main-blogs-card-time {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #7a7a7a;
    font-weight: 400!important;
    font-family: 'Poppins',sans-serif;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 180px;
    font-size: 14px
}

.g-main-blogs-card-category-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end
}

.g-main-blogs-card-categroy {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
    padding: 4px 8px;
    border-radius: 25px;
    background-color: #f53;
    text-transform: capitalize
}

#ResultNone {
    display: none;
    padding: 10px 20px;
    background-color: #ffe6dd;
    font-family: 'Poppins',sans-serif;
    font-weight: 600!important;
    border-left: 7px solid #000;
    border-radius: 3px
}

@media screen and (max-width: 1420px) {
    .g-main-blogs-card {
        grid-template-columns:repeat(1,1fr)
    }

    .g-main-blogs-card-img {
        width: 100%
    }

    .g-main-blogs-card-content-div {
        align-items: center;
        text-align: center
    }

    .g-main-blogs-card-footer {
        flex-direction: column-reverse
    }
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.g-blogs-content-main-section {
    width: 100%
}

body.specialbody .content#subpage .intro .copy {
    padding: 2rem 2rem 0 2rem;
    font-size: 1.5rem;
    font-weight: 300;
    backdrop-filter: blur(3px) brightness(.8);
    border-radius: 30px;
    margin-left: 4rem
}

.g-blog-article-main-copy {
    backdrop-filter: blur(0) brightness(1)!important;
    margin-left: 0px!important;
    display: flex;
    flex-direction: column;
    text-align: center
}

@media screen and (max-width: 1400px) {
    .g-blog-article-main-copy {
        padding:2rem 3rem 2rem 3rem!important
    }

    .g-blogs-content-main-section {
        height: max-content
    }
}

.g-text-white {
    color: #fff!important
}

.g-blog-banner-navigator {
    color: #ff5533!important;
    font-family: 'Poppins',sans-serif;
    font-weight: 500;
    text-align: center;
    font-size: 18px
}

.g-blog-article-main-container {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 0
}

.g-blog-article-content-part {
    grid-column: span 9
}

@media screen and (max-width: 1150px) {
    .g-blog-article-content-part {
        grid-column:span 9
    }

    .g-blog-article-sidebar {
        grid-column: span 3
    }
}

@media screen and (max-width: 992px) {
    .g-blog-article-content-part {
        grid-column:span 12
    }

    .g-blog-article-sidebar {
        max-height: 100%!important;
        grid-column: span 12!important;
        position: static!important;
        overflow: auto;
        grid-column: span 12
    }
}

.g-tutorial-contents-main-container {
    padding: 40px 15px;
    max-width: 1330px;
    margin: auto
}

.g-tutorial-contents {
    font-family: 'Poppins',sans-serif;
    padding: 10px 0
}

.g-light-speed-performance-content-title {
    font-family: 'Poppins',sans-serif!important;
    font-size: 30px!important;
    font-weight: 600!important
}

.g-light-speed-performance-content-sub-title {
    font-family: 'Poppins',sans-serif!important;
    font-size: 23px!important;
    font-weight: 600!important;
    margin-top: 15px;
    margin-bottom: 5px
}

@media screen and (max-width: 900px) {
    .g-light-speed-performance-container {
        grid-template-columns:repeat(1,1fr);
        gap: 20px
    }

    .g-light-speed-performance-content {
        padding: 0 15px
    }

    .g-light-speed-performance-content-title {
        text-align: center;
        padding-bottom: 20px
    }
}

.g-def-title-color {
    color: #f53
}

.g-top-pad-10 {
    padding-top: 10px;
    font-weight: 400
}

/* 1. Make the Grid Column itself sticky */
.g-blog-article-sidebar {
    grid-column: span 3;
    padding: 0 15px 20px 15px;
    background-color: #ffe6dd;
    
    /* THE CSS GRID SILVER BULLET */
    align-self: start; 
    
    /* Sticky Positioning */
    position: sticky !important;
    top: 120px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scroll-behavior: smooth;
    
    /* Visually hide the inner scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome/Safari */
.g-blog-article-sidebar::-webkit-scrollbar {
    display: none;
}

/* 2. Remove sticky from the inner container so they don't fight */
.g-blog-extracted-card-main-container {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Removed all position, height, and overflow rules from here */
}

/* Ensure the cards look right */
.g-blog-extracted-card {
    padding: 20px 25px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
    display: block; /* Ensure it's block, not none */
    border-radius: 5px;
}

.g-blog-extracted-card-image {
    border: 1px solid #ccc;
    height: auto;
    width: 100%;
    max-height: 270px;
    object-fit: cover;
}

.pagination-controls {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    padding-bottom: 50px;
    font-family: 'Poppins',sans-serif;
    font-weight: 500
}

.g-blog-extracted-card-main-container::-webkit-scrollbar {
    width: 8px
}

.g-blog-extracted-card-main-container::-webkit-scrollbar-track {
    background: #fff0;
    border-radius: 10px
}

.g-blog-extracted-card-main-container::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 10px
}

.g-blog-extracted-card-main-container::-webkit-scrollbar-thumb:hover {
    background-color: #555
}

.g-blog-extracted-card-main-title {
    font-size: 25px!important;
    font-weight: 600!important;
    font-family: 'Poppins'!important;
    text-align: center;
    color: #000;
    display: flex;
    gap: 20px;
    justify-content: center
}

.g-blog-extracted-card-main-title-img {
    width: 40px
}

.g-blog-extracted-card-title {
    font-family: 'Poppins',sans-serif;
    text-transform: capitalize!important;
    font-weight: 600!important;
    font-size: 19px!important;
    margin-top: 15px;
    text-align: center;
    margin-bottom: 12px
}

.g-blog-extracted-card-desc {
    font-family: 'Poppins',sans-serif;
    font-weight: 400!important;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.g-blog-extracted-card-footer {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px
}

.g-blog-extracted-card-link {
    background-color: #f53;
    color: #fff;
    padding: 8px 20px;
    font-weight: 500;
    font-family: 'Poppins',sans-serif;
    border-radius: 15px;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid #f53
}

.g-blog-extracted-card-link:hover {
    background-color: var(--white-color);
    color: #f53
}

.g-main-blogs-card-time {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #7a7a7a;
    font-weight: 400!important;
    font-family: 'Poppins',sans-serif
}

.pagination-controls button {
    padding: 8px 12px;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: 'Poppins',sans-serif;
    background-color: #000;
    font-weight: 600
}

.pagination-controls button:disabled {
    background-color: #ccc;
    cursor: not-allowed
}

#trending-icon {
    width: 52px
}

#trending-title {
    gap: 14px;
    width: 100%
}

.g-tutorial-table {
    border: 1px solid #ebebeb;
    border-bottom: none
}

.g-tutorial-table ul {
    margin-bottom: 0;
    padding: 10px 0 10px 30px
}

.g-tutorial-table-header-row {
    display: flex;
    justify-content: space-between;
    padding: 0
}

.table-top-header {
    display: flex;
    min-width: 200px;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 0;
    border-right: 1px solid #fff
}

.table-top-header-1 {
    width: 200px
}

.table-top-header-2 {
    min-width: 550px
}

.table-side-header {
    display: flex;
    width: 200px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0;
    padding-left: 20px
}

.g-tutorial-table-data-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #ebebeb
}

.table-data {
    display: flex;
    width: 550px;
    justify-content: flex-start;
    align-items: flex-start;
    border-left: 1px solid #ebebeb
}

.blogs-view {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-top: 0;
    height: fit-content;
    padding: 50px;
    background-color: #034c91;
    width: 100%
}

.blogs-view * {
    position: relative;
    z-index: 2
}

#pleck-vs-cpanel {
    background-image: url(https://t4.ftcdn.net/jpg/04/38/93/15/360_F_438931535_DhZaUQHbGvGUxLzPNzT4inocmtABLBoO.jpg);
    background-position: center center
}

#pleck-vs-cpanel::after {
    background-color: rgb(0 0 0 / .7)
}

.site-links {
    text-decoration: underline;
    color: #000;
    font-weight: 700
}

.g-main-blogs-main-categories-main-container ul {
    gap: 5px;
    list-style-type: none;
    margin: 0;
    margin-top: 20px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row
}

.g-main-blogs-main-categories-main-container ul li {
    float: left
}

.g-main-blogs-main-categories-main-container ul li a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 16px;
    font-family: "Arial Black";
    text-decoration: none;
    text-transform: uppercase
}

.g-main-blogs-main-categories-main-container ul li a:hover {
    background-color: #111
}

.list-no {
    list-style: auto!important;
    margin-left: 35px;
    font-weight: 700
}

.list-no-link {
    display: flex;
    flex-wrap: wrap;
    list-style: none!important;
    padding: 0;
    margin: 0;
    margin-left: 35px;
    font-weight: 700;
    justify-content: flex-start;
    align-content: center
}

.font-size-23::marker {
    font-size: 23px!important
}

.dot-ul {
    list-style-type: disc!important;
    margin-left: 40px
}

.no-desc {
    list-style-type: none!important;
    margin-left: 45px
}

.no-bold {
    font-weight: 400!important
}

.light-color-main-point {
    font-size: 20px!important;
    color: #7a7a7a!important
}

.mini-sub-heading {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0 0
}

.img-des-div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-left: -20px
}

.img-des-div-2 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 10px
}

.blog-site-link {
    color: #f53;
    font-weight: 500
}

.g-main-blogs-main-categories-img-section {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1600px;
    padding: 40px 15px 0
}

.g-main-blogs-main-container-box {
    display: flex;
    border-bottom: 5px solid #ff5533!important
}

.g-main-blogs-main-container-box .select-menu {
    width: 500px;
    cursor: pointer;
    position: relative
}

.g-main-blogs-main-container-box .select {
    background-color: #201e1e;
    padding: 10px 20px;
    color: #fff;
    font-weight: 500;
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.g-main-blogs-main-container-box .options-list {
    position: absolute;
    top: 85%;
    width: 100%;
    background-color: #f9f9f9;
    border-radius: 6px;
    max-height: 250px;
    overflow-y: auto;
    -webkit-transition: .4s linear .2s;
    -o-transition: .4s linear .2s;
    transition: .4s linear .2s;
    height: 0;
    z-index: 1
}

.g-main-blogs-main-container-box .option {
    padding: 10px 8px;
    font-weight: 500;
    font-size: 14px;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%
}

.g-main-blogs-main-container-box .option:hover,.g-main-blogs-main-container-box .option.selected {
    color: #00a8ff
}

.g-main-blogs-main-container-box .options-list::-webkit-scrollbar {
    width: 4px;
    background-color: #eee
}

.g-main-blogs-main-container-box .options-list::-webkit-scrollbar-thumb {
    background-color: #00a8ff
}

.g-main-blogs-main-container-box .options-list.active {
    height: 250px
}

.com-img {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 50px
}

.com-img img {
    width: 400px;
    height: max-content
}

.ampere-images {
    width: 280px;
    height: auto
}

.ampere-types {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px
}

#altra-max-id {
    width: 260px;
    margin: 0 10px
}

.blog-internal-link {
    font-weight: 700;
    text-decoration: underline
}

.blog-internal-small-link {
    font-weight: 500;
    text-decoration: underline
}

.discover-servers {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    background-color: #034c91;
    color: #fff;
    padding: 35px 20px;
    margin: 20px 0;
    border-radius: 25px
}

.discover-servers-header {
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px
}

.discover-servers-desc {
    font-size: 16px;
    margin: 10px 0 20px;
    text-align: center
}

.discover-servers-continents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 15px
}

.discover-servers-continent-link {
    padding: 10px;
    border-radius: 15px
}

.discover-servers-continent-link:hover {
    background-color: #888;
    color: #fff
}

.blog-code-box {
    width: 100%;
    background-color: #201e1e;
    color: #fff;
    border-radius: 15px;
    margin: 10px 0
}

.blog-code-header {
    padding: 10px 20px;
    background-color: #000;
    border-radius: 15px 15px 0 0;
    font-weight: 700
}

.blog-code {
    padding: 10px 20px
}

.blog-code-line {
    padding: 0
}

.margin-left-10 {
    margin-left: 10px!important
}

.margin-left-20 {
    margin-left: 20px!important
}

.margin-left-30 {
    margin-left: 30px!important
}

.margin-left-40 {
    margin-left: 40px!important
}

.margin-left-50 {
    margin-left: 50px!important
}

.circle-ul {
    margin: 0 0 0 35px;
    list-style-type: circle
}

.g-light-speed-performance-content-mini-sub-title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 5px
}

.blog-code-line-2 {
    margin-left: 30px!important
}

.blog-code-line-3 {
    margin-left: 60px!important
}

.blog-code-line-4 {
    margin-left: 90px!important
}

.blog-code-line-5 {
    margin-left: 120px!important
}

.blog-code-line-6 {
    margin-left: 150px!important
}

.blog-code-line-7 {
    margin-left: 180px!important
}

.blog-code-line-8 {
    margin-left: 210px!important
}

.blog-code-line-9 {
    margin-left: 240px!important
}

.blog-code-line-10 {
    margin-left: 270px!important
}

.square-ul {
    list-style-type: square;
    margin-left: 60px
}

.blog-output-code-line code {
    color: #d19a66!important
}

.g-tutorial-contents table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px
}

.g-tutorial-contents .table-header {
    background-color: #6c757d;
    font-weight: 700;
    padding: 15px 10px;
    text-align: left;
    color: #fff;
    border: 1px solid #898989
}

.g-tutorial-contents .table-header-1 {
    background-color: #6c757d;
    font-weight: 700;
    padding: 15px 10px;
    text-align: left;
    color: #fff;
    border: 1px solid #898989
}

.g-tutorial-contents .table-cell {
    padding: 10px;
    border: 1px solid #ddd
}

.g-tutorial-contents .table-row:nth-child(even) {
    background-color: #f9f9f9
}

.g-tutorial-contents .table-row:hover {
    background-color: #f1f1f1
}

.g-tutorial-contents .feature-column {
    background-color: #e2f1ff;
    font-weight: 700;
    vertical-align: sub
}

.g-tutorial-contents th:first-child,.g-tutorial-contents td:first-child {
    width: max-content
}

.clickable-lis {
    width: 30%;
    margin-bottom: 10px;
    color: #246f8d!important;
    font-weight: 700!important;
    display: flex
}

.clickable-lis:hover {
    color: #2c3260!important
}

.clickable-links {
    font-weight: 700!important
}

.blog-full-image-box {
    margin-top: 20px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.blog-full-image-box img {
    max-width: 750px;
    height: auto
}

.text-center {
    text-align: center
}

.image-container {
    flex: 1;
    max-width: 40%
}

.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.content-container {
    flex: 2;
    max-width: 60%;
    padding: 20px
}

@media (max-width: 768px) {
    .g-tutorial-contents {
        flex-direction:column;
        align-items: center
    }

    .image-container,.content-container {
        max-width: 100%
    }
}

@media (max-width: 768px) {
    .clickable-lis {
        width:100%
    }
}

.h5-ol {
    font-size: 20px
}

.h5-ol p {
    font-size: 16px!important
}

.h6-ol {
    font-size: 18px
}

.h6-ol p {
    font-size: 16px!important
}

.image-container-box {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
    row-gap: 50px;
    column-gap: 50px
}

.image-container-box img {
    max-width: 650px
}

.compare-isp {
    display: flex;
    align-items: center
}

.ul-no {
    list-style: none;
    margin-left: 25px
}

.suggest-blogs {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    background-color: #000;
    color: #fff;
    padding: 35px 20px;
    margin: 20px 0;
    border-radius: 25px
}

.related-images {
    display: flex;
    padding-top: 20px;
    color: #fff;
    padding: 35px 20px;
    margin: 20px 0;
    border-radius: 25px;
    justify-content: center;
    gap: 50px
}

.related-square-image {
    width: 200px;
    border: 1px solid #000
}

.suggest-blogs-header {
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px
}

.recommend-card-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 20px
}

.recommend-card-link {
    text-decoration: none;
    background-color: #fff;
    color: #000;
    border-radius: 15px
}

.recommend-card-link:hover {
    color: #000;
    transform: scale(1.05)
}

.recommend-card {
    max-width: 380px
}

.recommend-card-image {
    width: 100%;
    height: 150px
}

.recommend-card-image img {
    border-radius: 15px 15px 0 0;
    height: 150px;
    width: 100%;
    object-fit: cover
}

.recommend-card-content {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    width: 100%
}

.recommend-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 5px
}

.recommend-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    font-size: 14px
}

.recommend-card-datalabel {
    width: fit-content;
    padding: 2px 11px;
    border-radius: 25px;
    margin-bottom: 5px;
    background-color: #fdb9ab;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-card-content-heading {
    display: flex;
    justify-content: space-between
}

.recommend-card-content-heading-arrow {
    width: 25px;
    height: 27px
}

.recommend-card-content-details {
    display: flex;
    align-items: center;
    gap: 5px
}

.ded-img-con-box {
    display: flex;
    gap: 50px;
    align-items: center
}

.ded-img {
    margin-top: 10px;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 1675px) {
    .g-blog-extracted-card-footer {
        gap:5px;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: center;
        margin-top: 10px
    }

    .g-main-blogs-card-time {
        justify-content: center
    }
}

@media screen and (max-width: 1600px) {
    #blog-body .nav__list {
        column-gap:30px!important
    }

    #blog-body .header {
        padding-inline:0}
}

@media screen and (max-width: 1300px) {
    #blog-body .nav__list {
        column-gap:20px!important
    }

    #blog-body .container {
        max-width: 100%
    }

    #blog-body .dropdown__arrow {
        width: 20px
    }

    .g-blog-extracted-card-image {
        height: 150px
    }

    .g-blog-extracted-card-title {
        font-size: 18px!important
    }

    .g-blog-extracted-card-desc {
        font-size: 14px
    }
}

@media screen and (max-width: 1117px) {
    #blog-body .nav__data {
        width:100%
    }

    .blogs-view {
        margin-top: 56px
    }

    .blogs-view-description {
        padding: 10px 5%
    }
}

@media screen and (max-width: 992px) {
    .g-blog-extracted-card {
        min-width:300px;
        max-width: 400px
    }

    .g-blog-extracted-card-main-container {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center
    }

    .suggest-blogs {
        margin: 20px 20px
    }

    .g-blog-extracted-card-main-title {
        width: 100%
    }

    .pagination-controls {
        width: 100%
    }
}

@media screen and (max-width: 600px) {
    .list-no {
        margin-left:25px
    }

    .list-no .no-desc {
        margin-left: 0
    }

    .g-blog-extracted-card {
        min-width: 100px
    }
}

@media screen and (max-width: 1450px) {
    .ded-img-con-box {
        gap:0;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center
    }

    .ded-img {
        display: none
    }
}

.command-list-box {
    display: flex;
    margin-top: 10px;
    gap: 10px 0;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px
}

.command {
    display: flex;
    justify-content: center;
    min-width: 150px;
    background-color: #000;
    border-radius: 25px;
    color: #fff;
    gap: 3px
}

.command:hover {
    cursor: pointer
}

.up-button {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    border-radius: 50%;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out
}

.up-button.show {
    opacity: 1;
    visibility: visible
}

.author-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 0 25px 25px 0;
    background: #ffe9da;
    border-left: 3px solid #f9990c;
    border-bottom: 3px solid #fff0
}

.author-div:hover {
    border-bottom: 3px solid #f9990c;
    border-left: none;
    border-radius: 25px 25px 0 0
}

.author-icon {
    width: 20px;
    border-radius: 50%
}

.author-p {
    font-family: 'Poppins',sans-serif;
    font-weight: 500!important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    margin-bottom: 0;
    font-size: 13px
}

.author-div .g-main-blogs-card-read-more {
    margin-top: 0;
    position: relative;
    z-index: 0;
}

.malware-attacks-box {
    display: flex;
    align-items: center;
    gap: 20px
}

.malware-attacks-box img {
    width: 80px;
    height: auto;
    padding: 10px;
    border-radius: 25px;
    background: wheat
}

@media screen and (max-width: 1117px) {
    .blogs-page {
        margin-top:0
    }

    .g-main-blogs-layout {
        grid-template-columns: repeat(1,1fr)
    }

    .g-main-blogs-main-container {
        max-width: 900px
    }

    .g-main-blogs-card-content-div {
        max-width: 60%
    }

    .g-main-blogs-card-title {
        text-align: left;
        width: 100%
    }

    .blogs-page .g-main-blogs-card-footer {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-top: 10px
    }
}

@media screen and (max-width: 670px) {
    .blogs-page-description {
        padding:0
    }

    .g-main-blogs-main-container-box {
        flex-direction: column
    }

    .g-main-blogs-main-container-box .select {
        width: 100%;
        margin-bottom: 20px
    }

    .g-main-blogs-card-content-div {
        max-width: 60%
    }

    .g-main-blogs-card {
        max-width: 100%
    }

    .g-main-blogs-card-img-div {
        width: 100%
    }

    .g-main-blogs-main-container {
        max-width: 670px
    }

    .g-main-blogs-main-container-box .select-menu {
        width: 100%
    }
}

@media screen and (max-width: 525px) {
    .g-main-blogs-layout {
        display:flex;
        flex-direction: column;
        width: 100%;
        padding: 10px;
        overflow: hidden
    }

    .g-main-blogs-card {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .g-main-blogs-card-img {
        height: 200px;
        width: 100%;
        object-fit: inherit;
        object-position: center center;
        border-radius: 24px 24px 0 0
    }

    .g-main-blogs-card-content-div {
        max-width: 100%
    }

    .g-main-blogs-card-footer {
        flex-direction: row-reverse;
        width: 100%;
        margin: 10px 0 0
    }
}

@media screen and (max-width: 525px) {
    .g-main-blogs-card-footer {
        flex-direction:column
    }

    .blogs-view {
        padding: 50px 20px
    }
}

@media screen and (max-width: 700px) {
    .ampere-types {
        gap:0;
        flex-direction: column;
        margin-bottom: 20px
    }
}

@media screen and (max-width: 850px) {
    .related-images {
        padding:20px 10px;
        gap: 20px
    }

    .related-square-image {
        width: 150px
    }
}

@media screen and (max-width: 600px) {
    .related-square-image {
        width:200px
    }

    .related-images {
        padding: 0;
        gap: 5px;
        background-color: #fff0;
        flex-wrap: wrap
    }

    #network-manager-table .table-header {
        word-wrap: break-word;
        width: 33.3%
    }

    #network-manager-table thead .table-row {
        display: flex;
        justify-content: flex-start;
        padding: 0
    }

    #network-manager-table th:first-child,#network-manager-table td:first-child {
        width: 33.3%
    }

    table tr {
        margin-bottom: none!important
    }

    .table-row {
        margin-bottom: -3px
    }

    #computing-table .table-header {
        word-wrap: break-word;
        width: 25%
    }

    #computing-table thead .table-row {
        display: flex;
        justify-content: flex-start;
        padding: 0
    }

    #computing-table th:first-child,#computing-table td {
        width: 25%
    }

    #computing-table tbody .table-row {
        max-width: 350px!important;
        display: flex;
        padding: 0
    }
}

@media screen and (max-width: 1300px) {
    .image-container-box {
        row-gap:10px;
        flex-direction: column;
        margin-bottom: 20px
    }
}

@media screen and (max-width: 700px) {
    .image-container-box img {
        max-width:100%
    }
}

.compare-bandwidth-image {
    width: 50%;
    height: fit-content
}

@media screen and (max-width: 1600px) {
    .compare-isp {
        flex-direction:column-reverse
    }
}

@media screen and (max-width: 750px) {
    .compare-bandwidth-image {
        width:75%
    }
}

@media screen and (max-width: 450px) {
    .compare-bandwidth-image {
        width:100%
    }
}

.data-centers-container {
    display: flex;
    gap: 20px;
    margin: 20px 0
}

.vertical-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1
}

.horizontal {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.data-center-section {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 50px;
    background-color: #f9f9f9
}

.data-centers-container .g-light-speed-performance-content-sub-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px
}

.location-link {
    text-decoration: none;
    color: #f53;
    font-weight: 700
}

.location-link:hover {
    color: #0056b3;
    text-decoration: none
}

.data-center-locations-ho {
    display: flex;
    column-gap: 60px;
    row-gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center
}

.data-center-locations {
    display: flex;
    justify-content: center
}

.data-center-locations-ho p {
    min-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center
}

.data-center-locations p {
    min-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px
}

#germany-blog {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

#germany-blog .data-center-section {
    flex: 1;
    min-width: 200px;
    margin: 0 10px
}

#germany-blog .g-light-speed-performance-content-sub-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center
}

#germany-blog .data-center-locations p {
    margin: 5px 0;
    text-align: center
}

#germany-blog .data-center-section {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9
}

.germany-data-centers {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.germany-data-centers-map {
    flex: 1;
    max-width: 600px
}

#germany-blog .data-center-locations {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 10px 10px
}

.g-tutorial-main-card-link {
    margin: 0;
    padding: 0;
    display: flex
}

.g-blogs-main-card {
    display: flex
}

.special-content {
    border-radius: 15px;
    background: #02073e;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 15px 0;
    box-shadow: 0 0 10px 5px rgb(0 0 0 / .2)
}

.special-content-p {
    text-align: center;
    margin-bottom: 10px
}

.quote-content {
    display: flex;
    flex-direction: column;
    text-align: center
}

.quote-content-i {
    background: antiquewhite;
    margin: 10px 0;
    padding: 5px;
    line-height: 1.8;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 15px
}

.image-content-nvidia {
    display: flex;
    justify-content: center;
    align-items: center
}

.image-content-nvidia-div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background: aliceblue;
    padding: 25px 15px;
    flex-direction: row-reverse
}

.image-content-nvidia-div img {
    width: 25%;
    height: auto;
    object-fit: contain;
    margin: 0 50px
}

.image-content-nvidia-div p {
    width: 75%;
    margin-left: 20px
}

@media screen and (max-width: 900px) {
    .image-content-nvidia-div {
        display:flex;
        flex-direction: column;
        gap: 40px;
        padding: 40px 25px
    }

    .image-content-nvidia-div img {
        width: 50%
    }

    .image-content-nvidia-div p {
        width: 100%
    }
}

.width-full-image {
    border-radius: 15px
}

.malware-attacks-box-content {
    display: flex;
    flex-direction: column
}

#malware-attacks-box img {
    width: 100px;
    margin-top: 15px
}

#malware-attacks-box {
    display: flex;
    align-items: flex-start
}

.blockchain-features {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0 50px
}

.blockchain-features h2 {
    font-size: 35px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 50px;
    text-align: center
}

.blockchain-features ul {
    --col-gap: 2rem;
    --barH: 1rem;
    --roleH: 2rem;
    --flapH: 2rem;
    width: 100%;
    margin-inline:auto;display: flex;
    flex-wrap: wrap;
    gap: var(--col-gap);
    padding-inline:calc(var(--col-gap) / 2);justify-content: center;
    align-items: flex-start;
    list-style: none
}

.blockchain-features ul li {
    width: 215px;
    display: grid;
    grid-template: "role" "icon" "title" "descr";
    align-items: flex-start;
    gap: 1rem;
    padding-block-end:calc(var(--flapH) + 1rem);text-align: center;
    background: var(--flag-color);
    background-image: linear-gradient(rgb(0 0 0 / .6) var(--roleH),rgb(0 0 0 / .4) calc(var(--roleH) + 0.5rem),#fff0 calc(var(--roleH) + 0.5rem + 5rem));
    clip-path: polygon(calc(var(--col-gap) / -2 - 5px) 0,calc(100% + var(--col-gap) / 2 + 5px) 0,calc(100% + var(--col-gap) / 2 + 5px) calc(100% - var(--flapH)),50% 100%,calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)))
}

.blockchain-features ul li::before {
    content: "";
    grid-area: role;
    height: var(--barH);
    width: calc(100% + var(--col-gap));
    margin-left: calc(var(--col-gap) / -2);
    margin-top: calc(var(--roleH) / 2 - var(--barH) / 2);
    background: grey;
    z-index: -1;
    background-image: linear-gradient(rgb(255 255 255 / .4),rgb(255 255 255 / .2) 30%,rgb(255 255 255 / .1) 40%,rgb(0 0 0 / .1) 60%,rgb(0 0 0 / .2) 70%,rgb(0 0 0 / .4))
}

.blockchain-features ul li::after {
    content: "";
    grid-area: role;
    background: var(--flag-color);
    background-image: linear-gradient(rgb(255 255 255 / .4),rgb(255 255 255 / .2) 30%,rgb(255 255 255 / .1) 40%,rgb(0 0 0 / .1) 60%,rgb(0 0 0 / .2) 70%,rgb(0 0 0 / .4));
    height: var(--roleH)
}

.blockchain-features ul li .icon,.blockchain-features ul li .title,.blockchain-features ul li .descr {
    padding-inline:1rem;color: #fff;
    text-shadow: 0 0 .5rem rgb(0 0 0 / .5)
}

.blockchain-features ul li .icon {
    font-size: 3rem
}

.blockchain-features ul li .title {
    font-size: 1.25rem;
    font-weight: 700
}

.blockchain-features ul li .descr {
    font-size: .9rem
}

.blockchain-features .credits {
    position: fixed;
    bottom: 1rem;
    right: 1rem
}

.blockchain-features .credits a {
    color: var(--color)
}

.g-tutorial-table-data-row {
    border: 1px solid!important
}

.g-tutorial-contents>p,.g-border-black-1 {
    font-weight: 400!important
}

.g-border-black-1 {
    padding: 15px
}

.g-tutorial-table td {
    border: 1px solid #000;
    padding: 15px;
    background-color: #fff;
    text-align: start
}

.amsterdam-blog-table {
    table-layout: auto!important;
    border: 2px solid #ff5533!important
}

.amsterdam-blog-table th:first-child {
    border-right: 2px solid #ff5533!important
}

.amsterdam-blog-table tr {
    border: 2px solid #ff5533!important
}

.bg-gray {
    background-color: #1f2937!important
}

#nvidia-unveils-rtx-50-series-gpus table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px
}

#nvidia-unveils-rtx-50-series-gpus table,#nvidia-unveils-rtx-50-series-gpus th,#nvidia-unveils-rtx-50-series-gpus td {
    border: 1px solid #ddd
}

#nvidia-unveils-rtx-50-series-gpus th,#nvidia-unveils-rtx-50-series-gpus td {
    padding: 10px;
    text-align: center
}

#nvidia-unveils-rtx-50-series-gpus th {
    background-color: #f4f4f4
}

#nvidia-unveils-rtx-50-series-gpus .vote-section {
    width: 80%;
    margin: 2rem auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(0 0 0 / .1)
}

#nvidia-unveils-rtx-50-series-gpus .options {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

#nvidia-unveils-rtx-50-series-gpus .options li {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease
}

#nvidia-unveils-rtx-50-series-gpus .options li:hover {
    background-color: #0056b3
}

#nvidia-unveils-rtx-50-series-gpus #results {
    margin-top: 20px
}

#nvidia-unveils-rtx-50-series-gpus #result-bars {
    margin-top: 10px
}

#nvidia-unveils-rtx-50-series-gpus .result-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

#nvidia-unveils-rtx-50-series-gpus .bar {
    height: 20px;
    background-color: #007bff;
    border-radius: 5px;
    transition: width 0.5s ease;
    margin-right: 10px
}

#nvidia-unveils-rtx-50-series-gpus .bar-label {
    font-weight: 700
}

#nvidia-unveils-rtx-50-series-gpus #reset-button {
    margin-top: 20px;
    background-color: #dc3545;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: center
}

#nvidia-unveils-rtx-50-series-gpus #reset-button:hover {
    background-color: #a71d2a
}

#nvidia-unveils-rtx-50-series-gpus .g-light-speed-performance-content-title {
    margin: 30px 0 20px
}

#blog-faq-accordion {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 20px
}

.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

/* 1. Give the parent wrapper a high z-index so it sits above the cards container */
.select-menu {
    position: relative;
    z-index: 99;
    /* Forces the entire dropdown area above the blog cards */
}

/* 2. Ensure the actual dropdown list has an even higher z-index */
.options-list {
    position: absolute;
    /* Assuming you already have this to make it drop down */
    z-index: 100;
    /* Keeps the list options above everything else */
}

/* Custom CSS for Data Tables in Blogs */
.table-responsive {
    overflow-x: auto;
    margin-top: 15px;
    margin-bottom: 25px;
}

.g-benchmark-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.95rem;
}

.g-benchmark-table th, .g-benchmark-table td {
    padding: 14px 18px;
    text-align: left !important;
    border-bottom: 1px solid #333333 !important;
}

.g-benchmark-table th {
    background-color: #2a2a2a;
    font-weight: 700;
    color: #ff6600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.g-benchmark-table tbody tr:last-child td {
    border-bottom: none;
}

.g-benchmark-table tbody tr:hover {
    background-color: #252525;
    transition: background-color 0.2s ease-in-out;
}

.g-benchmark-table tbody tr:hover td {
    color: #ffffff !important;
}

/* Code Block & Copy Button CSS */
.g-code-container {
    position: relative;
    margin: 15px 0 25px 0;
}

.g-code-block {
    background-color: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 35px 20px 15px 20px;
    /* Extra top padding for the button */
    overflow-x: auto;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

.g-code-block code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #e6e6e6;
    line-height: 1.5;
    white-space: pre;
}

.g-copy-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-weight: bold;
}

.g-copy-btn:hover {
    background-color: #ff6600;
    /* iDatam Orange */
    color: #fff;
}

.g-copy-btn.copied {
    background-color: #28a745;
    /* Green for success */
}

/* NUCLEAR STICKY FIX - Forces ancestors to allow sticky behavior */
body, html, .wrapper, main, .content, #subpage, #software {
    overflow-x: clip !important;
    overflow-y: visible !important;
}