/* ********************* General CSS ***************************** */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden; /* Allow vertical scrolling */
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  ul, ol {
    list-style: none;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }





/* ===== Preloader Container ===== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #000053, #000035);
    z-index: 9999;
    opacity: 1;
    transition: opacity 1.5s ease-out;
}

.preloader.fade-out {
    opacity: 0;
}

/* ===== Animated Server Rack ===== */
.server-rack {
    position: relative;
    width: 200px;
    height: 300px;
    margin-bottom: 30px;
}

.rack-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
}

.server-unit {
    position: absolute;
    left: 10px;
    width: calc(100% - 20px);
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.server-unit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.8), transparent);
    animation: server-loading 4s infinite ease-in-out;
}

.server-unit:nth-child(2) {
    top: 40px;
    animation-delay: 0.4s;
}

.server-unit:nth-child(3) {
    top: 80px;
    animation-delay: 0.8s;
}

.server-unit:nth-child(4) {
    top: 120px;
    animation-delay: 1.2s;
}

.server-unit:nth-child(5) {
    top: 160px;
    animation-delay: 1.6s;
}

.server-unit:nth-child(6) {
    top: 200px;
    animation-delay: 2.0s;
}

.server-unit:nth-child(7) {
    top: 240px;
    animation-delay: 2.4s;
}

@keyframes server-loading {
    0% {
        width: 0;
        left: 0;
    }
    30% {
        width: 100%;
        left: 0;
    }
    60% {
        width: 0;
        left: 100%;
    }
    100% {
        width: 0;
        left: 100%;
    }
}

/* ===== Logo & Text ===== */
.logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    animation: logo-pulse 3s infinite ease-in-out;
}

@keyframes logo-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.logo-icon {
    font-size: 2.5rem;
    color: #2563eb;
    margin-right: 10px;
    text-shadow: 0 0 15px rgba(37, 99, 235, 0.7);
}

.logo-text {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #2563eb, #4cc9f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

/* ===== Loading Text ===== */
.loading-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-top: 20px;
    position: relative;
}

.loading-text::after {
    content: '...';
    position: absolute;
    animation: loading-dots 2s infinite steps(4);
}

@keyframes loading-dots {
    0%, 25% { content: '.'; }
    50% { content: '..'; }
    75%, 100% { content: '...'; }
}

/* ===== Progress Bar ===== */
.progress-container {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 30px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2563eb, #4cc9f0);
    border-radius: 2px;
    animation: progress-loading 6s infinite ease-in-out;
}

@keyframes progress-loading {
    0% { width: 0; }
    40% { width: 80%; }
    80% { width: 100%; }
    100% { width: 100%; }
}

/* ===== Status Lights ===== */
.status-lights {
    display: flex;
    margin-top: 30px;
}

.status-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: status-pulse 3s infinite ease-in-out;
}

.status-light:nth-child(1) {
    background: #f72585;
    animation-delay: 0s;
}

.status-light:nth-child(2) {
    background: #4cc9f0;
    animation-delay: 0.4s;
}

.status-light:nth-child(3) {
    background: #7209b7;
    animation-delay: 0.8s;
}

.status-light:nth-child(4) {
    background: #3a86ff;
    animation-delay: 1.2s;
}

.status-light:nth-child(5) {
    background: #4361ee;
    animation-delay: 1.6s;
}

@keyframes status-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 15px currentColor; }
}



  /* ***************************** Top NavBar ***************************** */

  /* General Navbar Styles */
.top-navbar {
    background-color: #000053; /* Dark blue background */
    padding: 10px 0;
    color: #ffffff; /* White text */
    font-family: 'Poppins', sans-serif; /* Modern font */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Left Section: Contact Info */
.navbar-contact-info {
    display: flex;
    gap: 20px;
}

.contact-link {
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #3498db; /* Blue on hover */
}

/* Center Section: Promotional Text */
.navbar-promo-text {
    display: flex;
    gap: 30px;
    font-size: 14px;
    font-weight: 500;
}

.promo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.promo-item:hover {
    color: #3498db; /* Blue on hover */
}

.promo-item .bi {
    font-size: 16px;
}

/* Right Section: Navigation Links */
.navbar-links {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-link:hover {
    color: #3498db; /* Blue on hover */
    transform: translateY(-2px); 
}

/* Responsive Design  */
/* Mobile Devices (max-width: 991.98px) */
@media (max-width: 991.98px) {
    .navbar-contact-info,
    .navbar-promo-text {
        display: none;
    }

    /* Ensure navigation links are in a single row */
    .navbar-links {
        display: flex;
        justify-content: center;
        gap: 15px; 
        width: 100%;
        padding: 10px 0; 
    }

    /* Adjust font size and spacing for mobile */
    .nav-link {
        font-size: 14px; 
        gap: 5px; 
    }


    .nav-link .bi {
        font-size: 14px; 
    }
}

/* Very Small Screens (max-width: 576px) */
@media (max-width: 576px) {
    
    .navbar-links {
        gap: 10px;
    }

    
    .nav-link {
        font-size: 12px;
    }

    .nav-link .bi {
        font-size: 12px;
    }
}


/* *************************** */

.contact-link {
    text-decoration: none;  /* removes underline */
    color: inherit;         /* keeps same color as parent */
}


/* ************************** Main NavBar ********************************* */

/* ************************ Main Navbar Styles ************************** */

/* Custom Navbar */
.main-navbar {
    background-color: #ffffff; /* White background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    z-index: 1000; /* Ensure it stays above other content */
    width: 100%; /* Full width */
}

/* Ensure the navbar container is sticky */
.main-navbar .container-fluid {
    position: sticky;
    top: 0;
}

/* Logo */
.main-navbar .navbar-brand img {
    height: 40px; /* Adjust logo height */
    transition: transform 0.3s ease;
}

.main-navbar .navbar-brand img:hover {
    transform: scale(1.1); /* Logo hover effect */
}

/* Navbar Links */
.main-navbar .nav-link {
    color: #2c3e50 !important; /* Dark blue text */
    font-weight: 600; /* Increased font weight */
    font-size: 16px; /* Increased font size */
    margin: 0 15px; /* Spacing between links */
    padding: 8px 12px; /* Added padding for better click area */
    transition: color 0.3s ease, transform 0.3s ease;
}

.main-navbar .nav-link:hover {
    color: #3498db !important; /* Blue text on hover/active */
    transform: translateY(-2px); /* Lift effect */
}

/* Dropdown Menu */
.main-navbar .dropdown-menu {
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-top: 0;
    padding: 10px 0;
    border-radius: 10px; /* Rounded corners */
}

.main-navbar .dropdown-item {
    color: #2c3e50;
    font-size: 14px;
    font-weight: 500; /* Medium font weight */
    padding: 10px 20px; /* Increased padding */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-navbar .dropdown-item:hover {
    background-color: #3498db;
    color: #fff !important; /* White text on hover */
}

/* Dropdown Toggle Arrow */
.main-navbar .dropdown-toggle::after {
    margin-left: 8px; /* Space between text and arrow */
    vertical-align: middle; /* Align arrow properly */
}

/* Primary Button */
.primary-btn {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.primary-btn:hover {
    background-color: #2980b9; 
    transform: translateY(-2px);
}

/* Mobile Responsive Styles */
@media (max-width: 991.98px) {
    .main-navbar .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%; 
        height: 100vh; 
        background-color: #fff; 
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); 
        padding: 20px;
        transition: left 0.3s ease; 
    }

    .main-navbar .navbar-collapse.show {
        left: 0; 
    }

    .main-navbar .navbar-nav {
        margin-top: 50px; 
    }

    .main-navbar .nav-link {
        margin: 10px 0;
        padding: 10px 0; 
    }

    .main-navbar .dropdown-menu {
        background-color: #f8f9fa; 
        margin-top: 10px; 
    }

    .main-navbar .dropdown-item {
        color: #2c3e50 !important; 
    }

    .main-navbar .dropdown-item:hover {
        background-color: #3498db; 
        color: #fff !important; 
    }

    /* Close Button for Mobile */
    .navbar-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 24px;
        color: #2c3e50;
        cursor: pointer;
    }

    .navbar-close-btn:hover {
        color: #3498db; /* Blue on hover */
    }
}



/* ****************************** Hero Slider ******************************* */

/* Hero Slider */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slider-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 1;
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
    padding: 0 10px;
}

/* Image Blur Effect */
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
    backdrop-filter: blur(5px); /* Blur effect */
}

.slide-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
}

.slide-content h1,
.slide-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Text shadow */
    animation: fadeInUp 1s ease-in-out;
    color: white;
}

.slide-content h1 {
    font-size: 3.5rem; /* Larger font for h1 */
}

.slide-content p {
    font-size: 1.25rem;
    margin-bottom: 20px;
    animation: fadeInUp 1.5s ease-in-out;
    color: white;
}

.slide-content p i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 1.2rem; /* Icon size */
}

.slide-content .button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    animation: fadeInUp 2s ease-in-out;
}

/* Buttons */
.btn {
    font-size: 1rem;
    padding: 10px 30px;
    border-radius: 25px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #3498db;
    color: #fff;
    border: 2px solid #3498db;
}

.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-outline:hover {
    background-color: #fff;
    color: #3498db;
    transform: translateY(-2px);
}

/* Slider Controls */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.slider-control:hover {
    background: rgba(255, 255, 255, 1);
}

.slider-control.prev {
    left: 20px;
}

.slider-control.next {
    right: 20px;
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider-dots .dot.active {
    background: #fff;
}

.slider-dots .dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .slide-content h1 {
        font-size: 2rem; /* Smaller font size for h1 */
    }

    .slide-content h2 {
        font-size: 1.75rem; /* Smaller font size for h2 */
    }

    .slide-content p {
        font-size: 1rem; /* Smaller font size for paragraphs */
        margin-bottom: 15px; /* Reduced margin */
    }

    .slide-content .button-group {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px; /* Reduced gap between buttons */
    }

    .btn {
        font-size: 0.9rem; /* Smaller font size for buttons */
        padding: 8px 20px; /* Smaller padding for buttons */
    }

    /* Slider Controls */
    .slider-control {
        width: 40px; /* Smaller width */
        height: 40px; /* Smaller height */
        font-size: 1.2rem; /* Smaller icon size */
        padding: 10px; /* Adjust padding */
    }

    /* Slider Dots */
    .slider-dots {
        bottom: 10px; /* Move dots up slightly */
    }

    .slider-dots .dot {
        width: 8px; /* Smaller dots */
        height: 8px; /* Smaller dots */
    }
}

/* Mobile Adjustments for Slider Controls */
@media (max-width: 767px) {
    .slider-control {
        width: 30px; /* Smaller width */
        height: 30px; /* Smaller height */
        font-size: 1rem; /* Smaller icon size */
        padding: 8px; /* Adjust padding */
    }
}



/* ***************************** About Us ********************************** */

/* About Us Section */
.about-us-section {
    padding: 100px 20px;
    background-color: #f3f6f9;
}

.about-us-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Full Width Heading */
.about-us-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-us-header .about-us-subtitle {
    font-size: 1.5rem;
    color: #3498db;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-us-header .about-us-line-animation {
    width: 150px; /* Increased width */
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.about-us-header .about-us-line-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.about-us-header .about-us-main-title {
    font-size: 2.5rem;
    color: #2e3b4e;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Images and Features Side by Side */
.about-us-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* Images on the Left */
.about-us-image-container {
    flex: 1;
    position: relative;
    max-width: 50%;
}

.about-us-image-container .about-us-main-image {
    width: 100%;
    height: 600px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
}

.about-us-image-container .about-us-overlay-image {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 60%;
    height: 250px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border: 5px solid #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
}

.about-us-image-container:hover .about-us-main-image {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.about-us-image-container:hover .about-us-overlay-image {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Features on the Right */
.about-us-features {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 50%;
}

.about-us-feature-card {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-us-feature-card::before,
.about-us-feature-card::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #3498db;
    transition: width 0.3s ease;
}

.about-us-feature-card::before {
    top: 0;
    left: 0;
}

.about-us-feature-card::after {
    bottom: 0;
    right: 0;
}

.about-us-feature-card:hover::before,
.about-us-feature-card:hover::after {
    width: 100%;
}

.about-us-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.about-us-feature-card .about-us-feature-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.about-us-feature-card .about-us-feature-title {
    font-size: 1.25rem;
    color: #2e3b4e;
    margin-bottom: 10px;
    font-weight: 600;
}

.about-us-feature-card .about-us-feature-description {
    font-size: 1rem;
    color: #777;
}

/* Button */
.about-us-button-container {
    text-align: center;
    margin-top: 40px;
}

.about-us-primary-button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.about-us-primary-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    color: #000053;
}

/* Responsive Design */
@media (max-width: 991px) {
    .about-us-content-wrapper {
        flex-direction: column;
    }

    .about-us-image-container,
    .about-us-features {
        max-width: 100%;
    }

    .about-us-image-container .about-us-overlay-image {
        right: 0;
        bottom: -30px;
    }
}

@media (max-width: 767px) {
    .about-us-header .about-us-main-title {
        font-size: 2rem;
    }

    .about-us-features {
        grid-template-columns: 1fr;
    }

    .about-us-image-container .about-us-main-image {
        height: 400px;
    }
}




/* ************************* Our Dedicated Server **********************************  */

/* Dedicated Servers Section */
.dedicated-servers-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
}

.dedicated-servers-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.dedicated-servers-heading {
    text-align: center;
    margin-bottom: 50px;
}

.dedicated-servers-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dedicated-servers-scrolling-line {
    width: 250px; /* Increased width */
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.dedicated-servers-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.dedicated-servers-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: white;
}

/* Servers Grid */
.dedicated-servers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dedicated-server-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.dedicated-server-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff; /* White border on hover */
}

.dedicated-server-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
}

.dedicated-server-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.dedicated-server-description {
    font-size: 1rem;
    color: #ddd;
    margin-bottom: 20px;
}

/* Arrow Link */
.dedicated-server-link {
    display: inline-block;
    font-size: 2rem;
    color: #3498db;
    transition: color 0.3s ease;
}

.dedicated-server-link:hover {
    color: #fff;
}

/* Responsive Design */
@media (max-width: 991px) {
    .dedicated-servers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .dedicated-servers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dedicated-servers-main-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .dedicated-servers-grid {
        grid-template-columns: 1fr;
    }
}


/* *************************** Our Price Plan ********************************* */

/* Price Plan Section */
.price-plans-section {
    padding: 80px 20px;
    background-color: #fff;
}

.price-plans-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.price-plans-heading {
    text-align: center;
    margin-bottom: 50px;
}

.price-plans-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.price-plans-scrolling-line {
    width: 200px; /* Increased width */
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.price-plans-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.price-plans-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #2c3e50;
}

/* Plan Buttons */
.price-plans-buttons {
    text-align: center;
    margin-bottom: 40px;
}

.price-plan-button {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #3498db;
    background-color: transparent;
    border: 2px solid #3498db;
    border-radius: 25px;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.price-plan-button.active,
.price-plan-button:hover {
    background-color: #3498db;
    color: #fff;
}

/* Plans Grid */
.price-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 plans in one row */
    gap: 20px;
    display: none;
}

.price-plans-grid.active {
    display: grid;
}

/* Plan Card */
.price-plan-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.price-plan-header i {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
}

.price-plan-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: black;
}

.price-plan-pricing {
    margin-bottom: 20px;
}

.price-plan-pricing .price-plan-start-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3498db;
}

.price-plan-pricing .price-plan-cut-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
}

.price-plan-pricing .price-plan-new-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3498db;
}

.price-plan-specs {
    text-align: left;
    margin-bottom: 20px;
}

.price-plan-specs p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
}

.price-plan-specs i {
    color: #3498db;
    margin-right: 10px;
}

/* Details Button */
.price-plan-details-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.price-plan-details-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 991px) {
    .price-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .price-plans-grid {
        grid-template-columns: 1fr;
    }
}




/* ********************* Our Features *********************************** */

/* Our Features Section */
.features-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.features-heading {
    text-align: center;
    margin-bottom: 50px;
}

.features-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.features-scrolling-line {
    width: 200px; /* Increased width */
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.features-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.features-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: white;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before,
.feature-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #3498db;
    transition: all 0.3s ease;
}

.feature-card::before {
    top: 0;
    transform: scaleX(0);
}

.feature-card::after {
    bottom: 0;
    transform: scaleX(0);
}

.feature-card:hover::before,
.feature-card:hover::after {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.feature-description {
    font-size: 1rem;
    color: #ddd;
}

/* Responsive Design */
@media (max-width: 991px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}



/* ****************************** More Prices and Plans ******************************* */


/* Pricing Table Section */
.server-pricing-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
  }
  
  .server-pricing-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Section Heading */
  .server-pricing-heading {
    text-align: center;
    margin-bottom: 50px;
  }
  
  .server-pricing-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  
  .server-pricing-scrolling-line {
    width: 150px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
  }
  
  .server-pricing-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
  }
  
  @keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
  }
  
  .server-pricing-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #2e3b4e;
  }
  
  /* Table Wrapper */
  .server-pricing-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Table Styling */
  .server-pricing-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
  }
  
  .server-pricing-header {
    background-color: #3498db;
  }

  #server-type{
    color: white;
  }
  
  .server-pricing-header th {
    padding: 15px;
    text-align: left;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
  }
  
  /* Table Body */
  .server-pricing-body td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    color: #555;
  }
  
  /* Server Type Cell */
  .server-type-cell {
    position: relative;
  }
  
  .server-type-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .server-type-icon {
    font-size: 1.5rem;
    color: #3498db;
  }
  
  .server-type-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .server-type-name span {
    font-weight: 600;
  }
  
  /* Badges */
  .server-badge {
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 15px;
    font-weight: 600;
    color: #fff;
    background-color: #e74c3c; /* Red for Top Deal */
    width: fit-content;
  }
  
  /* Specifications Cell */
  .specifications-cell {
    font-size: 0.95rem;
  }
  
  .specifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .specifications-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .specifications-list i {
    color: #3498db;
  }
  
  /* Price Cell */
  .price-cell {
    font-size: 1rem;
  }
  
  .cut-price {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
  }
  
  .new-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3498db;
  }
  
  /* Action Cell */
  .action-cell {
    text-align: center;
  }
  
  .details-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
  }
  
  .details-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
  }
  
  /* See More Button */
  .server-pricing-see-more {
    text-align: center;
    margin-top: 20px;
  }
  
  #see-more-plans-button {
    background-color: #3498db;
    color: #fff;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
  }
  
  #see-more-plans-button:hover {
    background-color: #2980b9;
  }
  
  #see-more-plans-button i {
    font-size: 1.2rem;
  }

  /* Hide additional rows by default */
.server-pricing-table tbody tr:nth-child(n+6) {
    display: none;
}

/* Show all rows when "show-all" class is added */
.server-pricing-table.show-all tbody tr {
    display: table-row;
}
  
  /* Responsive Design */
  @media (max-width: 767px) {
    .server-pricing-header th,
    .server-pricing-body td {
        padding: 10px;
        font-size: 0.9rem;
    }
  
    .server-type-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
  
    .details-button {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
  
    .server-pricing-main-title {
        font-size: 2rem;
    }
  
    .server-pricing-subtitle {
        font-size: 1.2rem;
    }
  
    .specifications-list li {
        flex-direction: column;
        align-items: flex-start;
    }
  }



/* ************************ Security Section ******************************** */

/* Security Features Section */
.security-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
}

.security-container {
    max-width: 1200px;
    margin: 0 auto;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.security-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.security-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
}

.security-card:hover .security-border {
    opacity: 1;
    transform: scaleX(1);
}

.security-icon {
    width: 80px;
    height: 80px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #3498db;
    transition: all 0.3s ease;
}

.security-card:hover .security-icon {
    transform: scale(1.1);
    background: rgba(52, 152, 219, 0.2);
}

.security-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #fff;
}

.security-card p {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
}

.security-border {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    opacity: 0;
    transition: all 0.4s ease;
}

.security-border:nth-child(1) {
    top: 0;
    transform: scaleX(0);
}

.security-border:nth-child(2) {
    bottom: 0;
    transform: scaleX(0);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .security-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .security-grid {
        grid-template-columns: 1fr;
    }
    
    .security-card {
        padding: 25px;
    }
}



/* *************************** Integration Section *********************************** */


/* Integration Section */
.integration-section {
    padding: 80px 20px;
    background: #f9fafb; /* Plain background */
    color: #2c3e50;
}

.integration-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* Integrations Grid */
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.integration-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.integration-card:hover {
    transform: translateY(-10px);
}

.integration-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
}

.integration-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.integration-card p {
    font-size: 1rem;
    color: #718096;
    line-height: 1.6;
}

/* API Access Section */
.api-access {
    background: white;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.api-title {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 20px;
}

.api-description {
    font-size: 1.1rem;
    color: #718096;
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.api-button {
    background: #3498db;
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.api-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    color: black;
}

.api-button i {
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .integrations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .integrations-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .api-title {
        font-size: 1.8rem;
    }

    .api-description {
        font-size: 1rem;
    }
}



/* Add ons  */

.version-matrix {
    margin: 40px 0;
    width: 100%;
    overflow-x: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #fff;
    padding: 20px;
}

.version-matrix h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.25rem;
    font-weight: 600;
}

.version-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.version-matrix th {
    background-color: #f8f9fa;
    color: #495057;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.version-matrix td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    color: #212529;
}

.version-matrix tr:nth-child(even) {
    background-color: #f8f9fa;
}

.version-matrix tr:hover {
    background-color: #f1f3f5;
}

@media (max-width: 768px) {
    .version-matrix {
        padding: 15px;
    }
    .version-matrix th, 
    .version-matrix td {
        padding: 8px 10px;
    }
}


/* ********************************** FAQs ********************************* */

/* FAQ Section - Matching Features Section Header */
.faq-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* FAQ Accordion Styling */
.faq-accordion {
    max-width: 1000px;
    margin: 40px auto 0;
}

.faq-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.faq-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #3498db;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    text-align: left;
    background: none;
    border: none;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question i {
    font-size: 1.2rem;
    color: #3498db;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.03);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 25px;
}

.faq-answer p {
    padding: 15px 0 25px;
    color: #ddd;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Active State */
.faq-item.active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-item.active:before {
    transform: scaleY(1);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #fff;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-question {
        padding: 15px 20px;
    }
    
    .faq-answer p {
        font-size: 0.95rem;
    }
}


/* ************************************ Testimonials *************************** */

/* Testimonials Section */
.testimonials-section {
    padding: 100px 20px;
    background: #f9fafb;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: #3498db;
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% { left: -100px }
    100% { left: 100% }
}

.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.quote-icon {
    color: #3498db;
    font-size: 2rem;
    margin-bottom: 20px;
}

blockquote {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 25px;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.client-details h4 {
    color: #2c3e50;
    margin-bottom: 5px;
}

.client-details p {
    color: #718096;
    font-size: 0.9rem;
}

/* Case Studies Grid */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.case-study-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.case-header {
    text-align: center;
    margin-bottom: 30px;
}

.case-icon {
    width: 60px;
    height: 60px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #3498db;
    margin: 0 auto 20px;
}

.case-header h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.case-header p {
    color: #718096;
}

.case-point {
    margin-bottom: 25px;
}

.case-point h4 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.case-point p, .case-point li {
    color: #4a5568;
    line-height: 1.6;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.result-item {
    text-align: center;
    padding: 15px;
    background: rgba(52, 152, 219, 0.05);
    border-radius: 8px;
}

.result-item i {
    color: #3498db;
    margin-bottom: 10px;
}

.result-item span {
    display: block;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .case-studies-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
}


/* ***************************** CTA Action ************************************ */

/* CTA Section */
.cta-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Content Section */
.cta-content {
    position: relative;
    z-index: 2;
}

#cta-action-live h3{
    color: black;
}

#cta-action-live p{
    color: black;
}

#cta-now h3{
    color: black;
}

#cta-now p{
    color: black;
}

.cta-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    line-height: 1.3;
    color: white;
}

.cta-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Button Styles */
.cta-btn {
    padding: 18px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cta-btn i {
    font-size: 1.2rem;
}

.cta-btn.primary {
    background: #3498db;
    color: white;
}

.cta-btn.primary:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.cta-btn.secondary {
    background: #2ecc71;
    color: white;
}

.cta-btn.secondary:hover {
    background: #27ae60;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
}

.cta-btn.outline {
    border: 2px solid #3498db;
    color: #3498db;
    background: transparent;
}

.cta-btn.outline:hover {
    background: rgba(52, 152, 219, 0.1);
    transform: translateY(-3px);
}

/* Image Section */
.cta-image {
    position: relative;
    z-index: 1;
}

.main-image {
    width: 100%;
    max-width: 500px;
    animation: float 4s ease-in-out infinite;
}

.floating-image {
    position: absolute;
    animation: float 6s ease-in-out infinite;
}

.floating-image.globe {
    width: 120px;
    top: -20px;
    left: -30px;
    animation-delay: 1s;
}

.floating-image.chart {
    width: 100px;
    bottom: -20px;
    right: -30px;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .cta-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .cta-buttons {
        justify-content: center;
    }
    
    .cta-image {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
    
    .floating-image {
        display: none;
    }
}




/* ************************************ Data Center Section **************************** */

/* Data Center Section */
.data-center-section {
    padding: 80px 20px;
    background: #f9fafb; /* Plain background */
    color: #2c3e50;
}

.data-center-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* Data Center Grid */
.data-center-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.data-center-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.data-center-card:hover {
    transform: translateY(-10px);
}

.card-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 20px;
}

.data-center-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.data-center-card p {
    font-size: 1rem;
    color: #718096;
    margin-bottom: 20px;
}

.data-center-features {
    list-style: none;
    padding: 0;
    text-align: left;
}

.data-center-features li {
    font-size: 0.95rem;
    color: #2c3e50;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.data-center-features i {
    color: #3498db;
}

/* Network Infrastructure Section */
.network-infrastructure {
    background: white;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.network-title {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.network-description {
    font-size: 1.1rem;
    color: #718096;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.network-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.stat {
    background: #f9fafb;
    padding: 30px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.stat:hover {
    transform: translateY(-10px);
}

.stat i {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 15px;
}

.stat h3 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.stat p {
    font-size: 1rem;
    color: #718096;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .data-center-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .network-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .data-center-grid {
        grid-template-columns: 1fr;
    }

    .network-stats {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .network-title {
        font-size: 1.8rem;
    }

    .network-description {
        font-size: 1rem;
    }
}



/* *********************************** Newsletter Section ****************************** */
/* Contact Dedicated Server Section */
.contact-dedicated-server-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    text-align: center;
}

.contact-dedicated-server-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-dedicated-server-content {
    background: rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-dedicated-server-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: white;
    line-height: 1.3;
}

.contact-dedicated-server-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Contact Button */
.contact-dedicated-server-actions {
    margin-bottom: 20px;
}

.contact-dedicated-server-btn {
    background: #3498db;
    color: white;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.contact-dedicated-server-btn:hover {
    background: #f6f6f6;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.contact-dedicated-server-btn i {
    font-size: 1.2rem;
}

.contact-dedicated-server-note {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 15px;
}

/* Responsive Design */
@media (max-width: 767px) {
    .contact-dedicated-server-title {
        font-size: 1.8rem;
    }

    .contact-dedicated-server-subtitle {
        font-size: 1rem;
    }

    .contact-dedicated-server-btn {
        width: 100%;
        justify-content: center;
    }
}



/* *********************************** Social Proof Section ***************************** */

/* Social Proof Section */
.social-proof-section {
    padding: 80px 20px;
    background: #f9fafb; /* Plain background */
    text-align: center;
}

.social-proof-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Heading */
.social-proof-heading {
    text-align: center;
    margin-bottom: 60px;
}

.social-proof-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.social-scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.social-scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.social-proof-main-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* Client Logos Scrolling Section */
.client-logos-scroll {
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
    z-index: 1; /* Ensures logos are above other content */
}

.client-logos-track {
    display: flex;
    animation: scroll-logos 40s linear infinite; /* Increased duration for smoother scroll */
    padding-right: 100px; /* Prevents logos from being cut off */
}

.logo-box {
    width: 160px; /* Fixed width for each logo box */
    height: 100px; /* Fixed height for each logo box */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px; /* Spacing between logos */
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex-shrink: 0; /* Prevents logos from shrinking */
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure logos fit perfectly */
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%); /* Ensure it moves the full width */
    }
}

/* Trust Badges Section */
.common-trust-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.common-trust-badge {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.common-trust-badge:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.trust-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #6c5ce7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.trust-icon i {
    font-size: 1.8rem;
    color: #ffffff;
}

.trust-title {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
}

.trust-description {
    font-size: 0.95rem;
    color: #718096;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .logo-box {
        width: 140px;
        height: 90px;
        margin: 0 15px;
    }

    .social-proof-main-title {
        font-size: 2.2rem;
    }

    .social-proof-subtitle {
        font-size: 1.1rem;
    }

    .common-trust-badges {
        gap: 20px;
    }

    .common-trust-badge {
        padding: 25px;
        max-width: 240px;
    }

    .trust-icon {
        width: 50px;
        height: 50px;
    }

    .trust-icon i {
        font-size: 1.5rem;
    }

    .trust-title {
        font-size: 1.2rem;
    }

    .trust-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .social-proof-main-title {
        font-size: 1.8rem;
    }

    .social-proof-subtitle {
        font-size: 1rem;
    }

    .social-scrolling-line {
        width: 150px;
    }

    .logo-box {
        width: 120px;
        height: 80px;
        margin: 0 10px;
    }

    .common-trust-badges {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .common-trust-badge {
        max-width: 100%;
        width: 100%;
        padding: 20px;
    }

    .trust-icon {
        width: 50px;
        height: 50px;
    }

    .trust-icon i {
        font-size: 1.5rem;
    }

    .trust-title {
        font-size: 1.2rem;
    }

    .trust-description {
        font-size: 0.9rem;
    }
}




/* ************************************** Blog Section ***************************************** */

/* Blog/Resources Section */
.blog-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.blog-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.blog-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-date {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(52, 152, 219, 0.9);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-content {
    padding: 25px;
}

.blog-content h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #fff;
    line-height: 1.4;
}

.blog-content p {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.blog-link i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.blog-link:hover {
    color: #fff;
}

.blog-link:hover i {
    transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-image {
        height: 200px;
    }
}


/* ********************************* Team Message *************************** */


/* Team Message Section */
.team-message-section {
    padding: 80px 20px;
    background: #f9fafb; /* Plain background */
    color: #2c3e50;
}

.team-message-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* Team Message Content */
.team-message-content {
    max-width: 800px;
    margin: 0 auto 80px;
    text-align: center;
}

.team-message-text {
    font-size: 1.1rem;
    color: #718096;
    line-height: 1.8;
    margin-bottom: 20px;
}

.team-message-signature {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-top: 30px;
    font-style: italic;
}

.team-message-signature strong {
    color: #3498db;
}

/* Support Features */
.support-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.support-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.support-card:hover {
    transform: translateY(-10px);
}

.support-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 20px;
}

.support-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.support-card p {
    font-size: 1rem;
    color: #718096;
    margin-bottom: 20px;
    line-height: 1.6;
}

.support-button {
    background: #3498db;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.support-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.support-button i {
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .support-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .section-title {
        font-size: 2rem;
    }

    .team-message-text {
        font-size: 1rem;
    }

    .support-features {
        grid-template-columns: 1fr;
    }

    .support-card {
        padding: 25px;
    }

    .support-card h3 {
        font-size: 1.3rem;
    }

    .support-card p {
        font-size: 0.95rem;
    }
}


/* ******************************* Footer Section ********************************* */

/* Footer Section */
.footer-section {
    background: #000053;
    color: white;
    font-size: 0.95rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer Top */
.footer-top {
    padding: 80px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

.footer-column {
    margin-bottom: 40px;
}

.footer-title {
    color: #3498db;
    font-size: 1.2rem;
    margin-bottom: 25px;
    padding-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-title i {
    font-size: 1.4rem;
}

/* Fixed Scrolling Lines Below Section Titles */
.footer-column .footer-scrolling-line {
    width: 220px; /* Adjusted width */
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    margin: -15px 0px 15px 0px; /* Centered with proper spacing */
    position: relative;
    overflow: hidden;
}

.footer-column .footer-scrolling-line::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        #3498db,
        transparent
    );
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Footer Links */
.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links a i {
    width: 20px;
    color: #3498db;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: #3498db;
    transform: translateX(5px);
}

/* Newsletter Section */
.newsletter-column {
    max-width: 350px;
}

.newsletter-form {
    display: flex;
    margin-bottom: 40px;
}

.newsletter-form input {
    flex: 1;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: white;
    border-radius: 4px 0 0 4px;
}

.newsletter-form button {
    background: #3498db;
    color: white;
    border: none;
    padding: 0 25px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background 0.3s ease;
}

.newsletter-form button:hover {
    background: #2980b9;
}

/* Payment Methods */
.payment-methods {
    margin-top: 40px;
}

.payment-methods h5 {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.payment-icons {
    display: flex;
    gap: 20px;
}

.payment-icons img {
    width: 50px;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.payment-icons img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Footer Bottom */
.footer-bottom {
    padding: 50px 0;
}

.social-media {
    display: flex;
    gap: 25px;
    justify-content: center;
    margin-bottom: 40px;
}

.social-icon {
    color: white;
    font-size: 1.4rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #3498db;
    transform: translateY(-5px);
}

.legal-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-links a:hover {
    color: #3498db;
}

/* Wide Scrolling Line for Bottom Footer */
.footer-bottom .footer-scrolling-line.wide-line {
    width: 300px;
    height: 3px;
    margin: 30px auto;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.footer-bottom .footer-scrolling-line.wide-line::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        #3498db,
        transparent
    );
    animation: scrolling-line 3s linear infinite;
}

/* Copyright */
.copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-column .footer-scrolling-line {
        width: 200px;
    }
}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-column {
        text-align: center;
    }

    .footer-title {
        justify-content: center;
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-column .footer-scrolling-line {
        width: 200px;
        margin: 10px auto 20px;
    }

    .footer-bottom .footer-scrolling-line.wide-line {
        width: 200px;
    }

    .newsletter-form {
        max-width: 100%;
    }

    .payment-icons {
        justify-content: center;
    }

    .social-media {
        gap: 15px;
    }

    .legal-links {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}









/* ******************************************************************************** */
                              /* /* Managed Dedicated Servers  */
/* *********************************************************************************** */

/* Hero Section */
.managed-hero-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
}

.managed-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.managed-hero-content {
    flex: 0.6; /* 60% width */
    text-align: left;
}

.managed-hero-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    line-height: 1.3;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

.managed-hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.managed-hero-cta-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.managed-hero-cta-buttons a {
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.managed-hero-primary-cta {
    background: #3498db;
    color: white;
}

.managed-hero-primary-cta:hover {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.managed-hero-secondary-cta {
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
}

.managed-hero-secondary-cta:hover {
    background: rgba(52, 152, 219, 0.1);
    transform: translateY(-3px);
}

.managed-hero-features ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.managed-hero-features li {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 10px;
}

.managed-hero-features i {
    color: #3498db;
    font-size: 1.2rem;
}

.managed-hero-pricing {
    margin-top: 30px;
    font-size: 1.2rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.managed-hero-pricing p {
    color: white;
}

.managed-hero-pricing strong {
    color: #3498db;
}

/* Image Section (40%) */
.managed-hero-image {
    flex: 0.4; /* 40% width */
    position: relative;
}

.hero-main-image {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    border: 4px solid #3498db;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-main-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.5);
}

.hero-icon-container {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.hero-icon {
    width: 60px; /* Increased size */
    height: 60px; /* Increased size */
    border-radius: 50%;
    border: 2px solid #3498db;
    padding: 10px;
    background: rgba(52, 152, 219, 0.1);
    transition: transform 0.3s ease, background 0.3s ease;
}

.hero-icon:hover {
    transform: scale(1.2);
    background: rgba(52, 152, 219, 0.2);
}


/* Responsive Design */
@media (max-width: 1200px) {
    .managed-hero-container {
        flex-direction: column;
        text-align: center;
    }

    .managed-hero-content {
        text-align: center;
    }

    .managed-hero-image {
        order: -1;
    }
}

@media (max-width: 767px) {
    .managed-hero-title {
        font-size: 1.5rem;
    }

    .managed-hero-subtitle {
        font-size: 1rem;
    }

    .managed-hero-cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .managed-hero-features ul {
        align-items: center;
    }

    .hero-icon-container {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 20px;
    }
}

/* ********************************** Managed Price Plan *********************************** */

/* Managed Server Plans Section */
.managed-server-plans {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.managed-server-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.managed-server-heading {
    text-align: center;
    margin-bottom: 50px;
}

.managed-server-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.managed-server-scrolling-line {
    width: 200px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.managed-server-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.managed-server-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #2c3e50;
}

/* Plan Buttons */
.managed-server-buttons {
    text-align: center;
    margin-bottom: 40px;
}

.managed-server-button {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #3498db;
    background-color: transparent;
    border: 2px solid #3498db;
    border-radius: 25px;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.managed-server-button.active,
.managed-server-button:hover {
    background-color: #3498db;
    color: #fff;
}

/* Plans Grid */
.server-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 plans in one row */
    gap: 20px;
    display: none;
}

.server-plans-grid.active {
    display: grid;
}

/* Plan Card */
.server-plan-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.server-plan-card.recommended-plan {
    border-top: 4px solid #3498db;
}

.recommended-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3498db;
    color: #fff;
    padding: 5px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 15px;
}

.server-plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.server-plan-header i {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
}

.server-plan-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: black;
}

.server-plan-pricing {
    margin-bottom: 20px;
}

.server-plan-pricing .server-plan-start-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3498db;
}

.server-plan-pricing .server-plan-cut-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
}

.server-plan-pricing .server-plan-new-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3498db;
}

.server-plan-specs {
    text-align: left;
    margin-bottom: 20px;
}

.server-plan-specs p {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.server-plan-specs i {
    color: #3498db;
    margin-right: 10px;
}

/* Select Plan Button */
.server-plan-select-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.server-plan-select-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Compare All Plans Section */
.compare-plans-section {
    text-align: center;
    margin-top: 40px;
}

.compare-plans-text {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 20px;
}

.compare-plans-button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.compare-plans-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .server-plans-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 plans in one row for smaller screens */
    }
}

@media (max-width: 767px) {
    .server-plans-grid {
        grid-template-columns: 1fr; /* 1 plan in one row for mobile */
    }
    .managed-server-main-title {
    font-size: 1.5rem;
}
}


/* ****************************************** Discounts **************************************** */


/* Discounts Marquee Section */
.discounts-marquee-section {
    padding: 60px 0; /* No horizontal padding for full width */
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .discounts-marquee-container {
    width: 100%; /* Full width */
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Marquee Wrapper */
  .marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 40px;
    position: relative;
  }
  
  .marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 20s linear infinite;
  }
  
  /* Reverse Marquee Animation */
  .marquee-reverse .marquee-content {
    animation: marquee-scroll-reverse 20s linear infinite;
  }
  
  @keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
  }
  
  @keyframes marquee-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
  }
  
  /* Discount Items */
  .discount-item {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px; /* Increased padding for better spacing */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px; /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(5px); /* Adds a subtle blur effect */
  }
  
  .discount-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    background: rgba(255, 255, 255, 0.1);
  }
  
  .discount-icon {
    font-size: 1.8rem; /* Larger icons */
    color: #3498db;
    animation: icon-float 2s ease-in-out infinite; /* Floating icon animation */
  }
  
  @keyframes icon-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
  }
  
  .discount-text {
    font-size: 1.2rem; /* Slightly larger text */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
  }
  
  /* Gradient Background Animation */
  .discounts-marquee-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(231, 76, 60, 0.1));
    z-index: 1;
    animation: gradient-shift 10s infinite alternate;
  }
  
  @keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .discounts-marquee-section {
        padding: 40px 15px;
    }
  
    .discount-item {
        padding: 10px 20px;
    }
  
    .discount-text {
        font-size: 1rem;
    }
  
    .discount-icon {
        font-size: 1.5rem;
    }
  }



/* ********************************************* Why Choose 99Server **************************************** */



/* Why Choose 99Server Section */
.why-choose-99server-section {
    padding: 120px 20px;
    background: #f9f9f9; /* Plain background */
    color: #333; /* Dark text for contrast */
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .why-choose-99server-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Top Paragraph */
  .why-choose-99server-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
    animation: fadeInDown 1s ease-in-out;
  }
  
  /* Scrolling Line */
  .why-choose-99server-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
  }
  
  .why-choose-99server-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
  }
  
  @keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
  }
  
  /* Heading */
  .why-choose-99server-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-in-out;
  }
  
  /* Content Layout */
  .why-choose-99server-content {
    display: flex;
    align-items: center;
    gap: 50px;
    text-align: left;
    animation: fadeIn 1.5s ease-in-out;
  }
  
  /* Image (Left Side) */
  .why-choose-99server-image {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .why-choose-99server-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  }
  
  .why-choose-99server-server-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .why-choose-99server-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
  }
  
  .why-choose-99server-image:hover .why-choose-99server-server-image {
    transform: scale(1.1);
  }
  
  .why-choose-99server-image:hover .why-choose-99server-image-overlay {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .why-choose-99server-image-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 30px;
  }
  
  .why-choose-99server-image-icons i {
    font-size: 2.5rem;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .why-choose-99server-image-icons i:hover {
    opacity: 1;
    transform: translateY(-5px);
  }
  
  /* Text (Right Side) */
  .why-choose-99server-text {
    flex: 1;
  }
  
  .why-choose-99server-intro {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    animation: fadeInLeft 1s ease-in-out;
  }
  
  .why-choose-99server-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  
  .why-choose-99server-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    animation: fadeInRight 1s ease-in-out;
  }
  
  .why-choose-99server-list i {
    font-size: 2rem;
    color: #3498db;
    margin-top: 5px;
    transition: transform 0.3s ease;
  }
  
  .why-choose-99server-list i:hover {
    transform: rotate(360deg);
  }
  
  .why-choose-99server-text-content {
    flex: 1;
  }
  
  .why-choose-99server-list strong {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 5px;
    display: block;
  }
  
  .why-choose-99server-list p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  
  /* Call-to-Action Button */
  .why-choose-99server-cta {
    margin-top: 40px;
    animation: fadeInUp 1s ease-in-out;
  }
  
  .why-choose-99server-cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .why-choose-99server-cta-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  }
  
  /* Animations */
  @keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
  
  @keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  @keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
  }
  
  @keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 1200px) {
    .why-choose-99server-content {
        flex-direction: column;
        text-align: center;
    }
  
    .why-choose-99server-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
  
    .why-choose-99server-list i {
        margin-bottom: 10px;
    }
  }
  
  @media (max-width: 768px) {
    .why-choose-99server-title {
        font-size: 2.2rem;
    }
  
    .why-choose-99server-top-para {
        font-size: 1.2rem;
    }
  
    .why-choose-99server-intro {
        font-size: 1rem;
    }
  
    .why-choose-99server-list strong {
        font-size: 1.2rem;
    }
  
    .why-choose-99server-list p {
        font-size: 0.9rem;
    }
  
    .why-choose-99server-cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
  }



/* ********************************** Service Inclusions *********************************** */

/* Detailed Service Inclusions Section */
.service-inclusions-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035); /* Gradient background */
    color: white;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.service-inclusions-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Paragraph */
.service-inclusions-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Scrolling Line */
.service-inclusions-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db; /* Accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.service-inclusions-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* H2 Heading */
.service-inclusions-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Service Grid */
.service-inclusions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-inclusion-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.service-inclusion-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #3498db; /* Accent color */
}

.service-inclusion-icon {
    font-size: 2.5rem;
    color: #3498db; /* Accent color */
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.service-inclusion-card:hover .service-inclusion-icon {
    transform: rotate(360deg);
}

.service-inclusion-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.service-inclusion-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .service-inclusions-grid {
        grid-template-columns: 1fr;
    }

    .service-inclusions-title {
        font-size: 2rem;
    }

    .service-inclusions-top-para {
        font-size: 1rem;
    }
}


/* ********************************** Use Cases ****************************** */


/* Integration Options Section */
.integration-options-section {
    padding: 100px 20px;
    background: #ffffff; /* White background */
    color: #333; /* Dark text for contrast */
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .integration-options-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Top Paragraph */
  .integration-options-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
    animation: fadeInDown 1s ease-in-out;
  }
  
  /* Scrolling Line */
  .scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
  }
  
  .scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
  }
  
  @keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
  }
  
  /* Heading */
  .integration-options-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-in-out;
  }
  
  /* Introduction */
  .integration-options-intro {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 50px;
    animation: fadeIn 1s ease-in-out;
  }
  
  /* Integration Options Grid */
  .integration-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
  }
  
  .integration-option {
    padding: 30px;
    background: #ffffff;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  
  .integration-option:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border-color: #3498db;
  }
  
  .icon-wrapper {
    width: 80px;
    height: 80px;
    background: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: transform 0.3s ease, background 0.3s ease;
  }
  
  .integration-option:hover .icon-wrapper {
    transform: scale(1.1);
    background: #2980b9;
  }
  
  .icon-wrapper i {
    font-size: 2.5rem;
    color: white;
    transition: transform 0.3s ease;
  }
  
  .integration-option:hover .icon-wrapper i {
    transform: rotate(15deg);
  }
  
  .integration-option h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
  }
  
  .integration-option p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  
  /* Call-to-Action */
  .integration-options-cta {
    margin-top: 50px;
    animation: fadeInUp 1s ease-in-out;
  }
  
  .integration-options-cta p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
  }
  
  .cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .cta-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  }
  
  /* Animations */
  @keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
  
  @keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .integration-options-title {
        font-size: 2.2rem;
    }
  
    .integration-options-intro {
        font-size: 1rem;
    }
  
    .integration-options-grid {
        grid-template-columns: 1fr;
    }
  
    .integration-option {
        padding: 20px;
    }
  
    .integration-options-cta p {
        font-size: 1rem;
    }
  
    .cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
  }
  
  


/* ********************************** Use Cases ****************************** */


/* Use Cases Section */
.use-cases-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035); /* Gradient background */
    color: white;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.use-cases-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Paragraph */
.use-cases-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Scrolling Line */
.use-cases-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db; /* Accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.use-cases-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* H2 Heading */
.use-cases-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.use-case-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.use-case-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #3498db; /* Accent color */
}

.use-case-icon {
    font-size: 2.5rem;
    color: #3498db; /* Accent color */
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.use-case-card:hover .use-case-icon {
    transform: scale(1.2);
}

.use-case-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.use-case-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .use-cases-title {
        font-size: 2rem;
    }

    .use-cases-top-para {
        font-size: 1rem;
    }
}

/* *********************************** Scalability Options ****************************** */

/* Scalability Options Section */
.scalability-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f9f9f9, #e0e0e0); /* Gradient background */
    color: #333333; /* Dark text for contrast */
    text-align: center;
    overflow: hidden;
    position: relative;
}

.scalability-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Paragraph */
.scalability-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
    animation: fadeInDown 1s ease-in-out;
}

/* Scrolling Line */
.scalability-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: rgba(52, 152, 219, 0.3); /* Light accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.scalability-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* H2 Heading */
.scalability-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #333333; /* Dark text for contrast */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: fadeInUp 1s ease-in-out;
}

.scalability-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: #3498db; /* Accent color */
    border-radius: 2px;
    animation: scaleIn 1s ease-in-out;
}

/* Scalability Timeline */
.scalability-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
    position: relative;
}

.scalability-step {
    text-align: center;
    max-width: 600px;
    position: relative;
    padding: 20px;
    background: #ffffff; /* White background */
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scalability-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.3);
}

.scalability-step::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 30px;
    background-color: #3498db; /* Accent color */
}

.scalability-icon {
    font-size: 2.5rem;
    color: #3498db; /* Accent color */
    margin-bottom: 15px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.scalability-step-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333333; /* Dark text for contrast */
}

.scalability-step-description {
    font-size: 1rem;
    color: #666666; /* Medium gray text */
    line-height: 1.6;
}

.scalability-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0; /* Light gray background */
    border-radius: 4px;
    margin-top: 20px;
    overflow: hidden;
}

.scalability-progress-bar .progress {
    height: 100%;
    background-color: #3498db; /* Accent color */
    border-radius: 4px;
    animation: progressBar 1.5s ease-in-out;
}

@keyframes progressBar {
    0% {
        width: 0;
    }
    100% {
        width: var(--progress-width);
    }
}

/* Upgrade Path Comparison */

.upgrade-path-comparison {
    margin-top: 60px;
    animation: fadeInUp 1s ease-in-out;
}

.comparison-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333333; /* Dark text for contrast */
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff; /* White background */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    animation: fadeInUp 1.5s ease-in-out;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: center;
}

.comparison-table th {
    background-color: #3498db; /* Accent color */
    color: white;
    font-weight: 600;
}

.comparison-table td {
    border-bottom: 1px solid #e0e0e0; /* Light gray border */
    color: black;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

/* Animations */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    0% {
        transform: translateX(-50%) scaleX(0);
    }
    100% {
        transform: translateX(-50%) scaleX(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .scalability-timeline {
        gap: 40px;
    }

    .scalability-step {
        max-width: 100%;
    }

    .scalability-title {
        font-size: 2rem;
    }

    .scalability-top-para {
        font-size: 1rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
    }
}

/* Make the table responsive on smaller screens */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        overflow-x: auto; /* Allow horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .comparison-table {
        width: 100%;
        min-width: 600px; /* Set a minimum width to avoid squishing the table */
        table-layout: fixed; /* Ensures consistent column widths */
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
        word-wrap: break-word; /* Allow text wrapping in cells */
        white-space: nowrap; /* Prevent text from overflowing */
    }

    .comparison-table th {
        font-size: 14px; /* Smaller text on mobile */
    }

    .comparison-table td {
        font-size: 12px; /* Smaller text on mobile */
    }
}

#resource{
    color: white;
}


/* *************************************** Pricing *************************************** */

/* Pricing Plan Section */
.pricing-plan-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    text-align: center;
    overflow: hidden;
  }
  
  .pricing-plan-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Top Paragraph */
  .pricing-plan-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
  }
  
  /* Scrolling Line */
  .pricing-plan-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
  }
  
  .pricing-plan-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
  }
  
  @keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
  }
  
  /* Heading */
  .pricing-plan-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  /* Toggle Buttons */
  .pricing-plan-toggle-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .pricing-plan-toggle-btn {
    padding: 15px 30px;
    border-radius: 8px;
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .pricing-plan-toggle-btn.active {
    background: #3498db;
    color: white;
  }
  
  .pricing-plan-toggle-btn:hover {
    background: rgba(52, 152, 219, 0.1);
    transform: translateY(-3px);
  }
  
  /* Pricing Plan Table */
  .pricing-plan-table {
    display: none;
    /* overflow-x: auto; */
  }
  
  .pricing-plan-table.active {
    display: block;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  
  th, td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  th {
    background: rgba(52, 152, 219, 0.1);
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  td {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    /* color: black; */
  }
  
  /* Plan Name Styling */
  th:first-child,
  td:first-child {
    font-weight: 700;
    color: #3498db;
    text-transform: uppercase;
  }
  
  /* Order Now Button */
  .order-now-row td {
    padding: 20px 15px;
  }
  
  .order-now-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .order-now-btn:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .pricing-plan-title {
        font-size: 2rem;
    }
  
    .pricing-plan-toggle-buttons {
        flex-direction: column;
    }
  
    .pricing-plan-toggle-btn {
        width: 100%;
    }
  
    table {
        font-size: 0.9rem;
    }
  
    .order-now-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
  }

  /* Responsive Design for Tables */
  @media (max-width: 768px) {
      .pricing-plan-table {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          /* For smooth scrolling on iOS */
      }

      table {
          min-width: 600px;
          /* Ensure that the table can be scrolled horizontally */
      }

      th,
      td {
          font-size: 0.9rem;
          /* Smaller text size for mobile */
          padding: 10px;
          /* Reduce padding for mobile */
      }

      .order-now-btn {
          padding: 8px 16px;
          font-size: 0.9rem;
      }
  }



/* *********************************** Security Features ****************************** */

/* Security Features Section */
.security-features-section {
    padding: 100px 20px;
    background: #ffffff; /* Plain white background */
    color: #333333; /* Dark text for contrast */
    text-align: center;
    overflow: hidden;
    position: relative;
}

.security-features-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Paragraph */
.security-features-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Scrolling Line */
.security-features-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db; /* Accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.security-features-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* H2 Heading */
.security-features-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #333333; /* Dark text for contrast */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.security-features-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: #3498db; /* Accent color */
    border-radius: 2px;
}

/* Security Features Grid */
.security-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.security-feature-card {
    background: #f9f9f9; /* Light gray background */
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.security-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    background: #ffffff; /* White background on hover */
    border: 2px solid #3498db; /* Accent color */
}

.security-feature-icon {
    font-size: 2.5rem;
    color: #3498db; /* Accent color */
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.security-feature-card:hover .security-feature-icon {
    transform: scale(1.2);
}

.security-feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333333; /* Dark text for contrast */
}

.security-feature-description {
    font-size: 1rem;
    color: #666666; /* Medium gray text */
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .security-features-grid {
        grid-template-columns: 1fr;
    }

    .security-features-title {
        font-size: 2rem;
    }

    .security-features-top-para {
        font-size: 1rem;
    }
}




  /* ****************************************** Free Trial/Demo ****************************************** */

/* Free Trial/Demo Section */
.free-trial-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035); /* Gradient background */
    color: white;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .free-trial-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Heading */
  .free-trial-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    animation: fadeInDown 1s ease-in-out;
    color: white;
  }
  
  /* Subheading */
  .free-trial-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    line-height: 1.6;
    animation: fadeIn 1s ease-in-out;
  }
  
  /* Call-to-Action */
  .free-trial-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    animation: fadeInUp 1s ease-in-out;
  }
  
  .cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .cta-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  }
  
  .cta-button-outline {
    display: inline-block;
    padding: 15px 30px;
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .cta-button-outline:hover {
    background: rgba(52, 152, 219, 0.1);
    transform: translateY(-3px);
  }
  
  /* Features List */
  .free-trial-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    animation: fadeIn 1s ease-in-out;
  }
  
  .feature {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .feature i {
    font-size: 1.5rem;
    color: #3498db;
    transition: transform 0.3s ease;
  }
  
  .feature:hover i {
    transform: scale(1.2);
  }
  
  .feature p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
  }
  
  /* Animations */
  @keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
  
  @keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .free-trial-title {
        font-size: 2.2rem;
    }
  
    .free-trial-subtitle {
        font-size: 1rem;
    }
  
    .free-trial-cta {
        flex-direction: column;
        gap: 15px;
    }
  
    .cta-button, .cta-button-outline {
        width: 100%;
        text-align: center;
    }
  
    .free-trial-features {
        gap: 20px;
    }
  
    .feature p {
        font-size: 0.9rem;
    }
  }



  /* *************** Extra Streaming server *********************** */

  /* Policy Highlights Section */
.policy-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
    padding: 0 15px;
}

.highlight-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e1e5ee;
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.highlight-card h3 {
    color: #2a3042;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.highlight-card h3 i {
    color: #4f46e5;
    font-size: 1.2rem;
}

.highlight-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.highlight-card ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #4a5568;
    line-height: 1.5;
}

.highlight-card ul li:before {
    content: "•";
    color: #4f46e5;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .policy-highlights {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .highlight-card {
        padding: 20px;
    }
}



/* ********************************** Boost Your Business ******************************* */


/* Boost Your Business Section */
.boost-business-section {
    padding: 80px 20px;
    background: #f9f9f9; /* Plain background */
    text-align: center;
}

.boost-business-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Top Paragraph */
.boost-business-top-para {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 10px;
}

/* Scrolling Line */
.boost-business-scrolling-line {
    width: 200px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.boost-business-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* H2 Heading */
.boost-business-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #333;
}

/* Features Grid */
.boost-business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.boost-business-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boost-business-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.boost-business-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
}

.boost-business-feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.boost-business-feature-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .boost-business-grid {
        grid-template-columns: 1fr;
    }

    .boost-business-title {
        font-size: 2rem;
    }

    .boost-business-top-para {
        font-size: 1rem;
    }
}




/* *********************************** Common FAQs Section ****************************** */
/* *********************************** FAQ Section ****************************** */
/* *********************************** Common FAQs Section ****************************** */

/* Common FAQs Section */
.common-faqs {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.common-faqs-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Section Heading */
.common-faqs-heading {
    margin-bottom: 60px;
}

.common-faqs-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
    animation: fadeInDown 1s ease-in-out;
}

.common-faqs-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: rgba(52, 152, 219, 0.3); /* Light accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.common-faqs-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.common-faqs-main-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #fff; /* White text for contrast */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: fadeInUp 1s ease-in-out;
}

.common-faqs-main-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: #3498db; /* Accent color */
    border-radius: 2px;
    animation: scaleIn 1s ease-in-out;
}

/* FAQ Accordion */
.common-faqs-accordion {
    max-width: 1000px;
    margin: 0 auto;
}

.common-faqs-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.common-faqs-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #3498db;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.common-faqs-item:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
}

.common-faqs-question {
    width: 100%;
    padding: 20px 25px;
    text-align: left;
    background: none;
    border: none;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    font-weight: 500;
}

.common-faqs-question i {
    font-size: 1.2rem;
    color: #3498db;
    transition: all 0.3s ease;
}

.common-faqs-question:hover {
    background: rgba(255, 255, 255, 0.03);
}

.common-faqs-question:hover i {
    color: #fff;
}

.common-faqs-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 25px;
}

.common-faqs-answer p {
    padding: 15px 0 25px;
    color: #ddd;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 1rem;
    margin: 0;
}

/* Active State */
.common-faqs-item.active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.common-faqs-item.active:before {
    transform: scaleY(1);
}

.common-faqs-item.active .common-faqs-question i {
    transform: rotate(180deg);
    color: #fff;
}

.common-faqs-item.active .common-faqs-answer {
    max-height: 500px;
    padding: 0 25px 20px;
}

/* Animations */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    0% {
        transform: translateX(-50%) scaleX(0);
    }
    100% {
        transform: translateX(-50%) scaleX(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .common-faqs {
        padding: 60px 15px;
    }

    .common-faqs-question {
        padding: 15px 20px;
        font-size: 1rem;
    }

    .common-faqs-answer p {
        font-size: 0.95rem;
    }
}





/* Performance Guarantees Section */
.performance-guarantees-section {
    padding: 100px 20px;
    background: #ffffff; /* Plain white background */
    color: #333333; /* Dark text for contrast */
    text-align: center;
    overflow: hidden;
    position: relative;
}

.performance-guarantees-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Paragraph */
.performance-guarantees-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Scrolling Line */
.performance-guarantees-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db; /* Accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.performance-guarantees-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* H2 Heading */
.performance-guarantees-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #333333; /* Dark text for contrast */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.performance-guarantees-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: #3498db; /* Accent color */
    border-radius: 2px;
}

/* Performance Metrics Grid */
.performance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.performance-metric {
    text-align: center;
}

/* Circular Progress Bar */
.circular-progress-bar {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0 auto 20px;
}

.circular-progress-bar .progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: conic-gradient(#3498db var(--progress), #e0e0e0 0deg);
    transition: --progress 1s ease;
}

.circular-progress-bar .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: #333333; /* Dark text for contrast */
}

/* Performance Metric Title */
.performance-metric-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333333; /* Dark text for contrast */
}

/* Performance Metric Description */
.performance-metric-description {
    font-size: 1rem;
    color: #666666; /* Medium gray text */
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .performance-metrics-grid {
        grid-template-columns: 1fr;
    }

    .performance-guarantees-title {
        font-size: 2rem;
    }

    .performance-guarantees-top-para {
        font-size: 1rem;
    }
}

.circular-progress-bar .progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: conic-gradient(#3498db var(--progress), #e0e0e0 0deg);
    transition: --progress 1s ease;
}


/* ******************************** Trust Badges ******************************** */


/* Trust Badges Section */
.trust-badges-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035); /* Gradient background */
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .trust-badges-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Heading */
  .trust-badges-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 50px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    animation: fadeInDown 1s ease-in-out;
  }
  
  /* Trust Badges Row */
  .trust-badges-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Reduced gap between badges */
    flex-wrap: wrap;
  }
  
  /* Trust Badge */
  .trust-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%; /* Circular shape */
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    padding: 10px; /* Adds padding inside the circle */
    box-sizing: border-box; /* Ensures padding does not affect overall size */
  }
  
  .trust-badge:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.2);
  }
  
  .trust-badge-icon {
    width: 80px; /* Adjusted size for better fit */
    height: 80px;
    object-fit: contain; /* Ensures the image fits inside the circle */
    transition: transform 0.3s ease;
  }
  
  .trust-badge:hover .trust-badge-icon {
    transform: scale(1.2) rotate(10deg); /* Slight rotation on hover */
  }
  
  /* Animations */
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .trust-badges-title {
      font-size: 2.2rem;
    }
  
    .trust-badges-row {
      gap: 20px;
    }
  
    .trust-badge {
      width: 100px;
      height: 100px;
    }
  
    .trust-badge-icon {
      width: 60px;
      height: 60px;
    }
  }
  
  @media (max-width: 480px) {
    .trust-badges-row {
      gap: 15px;
    }
  
    .trust-badge {
      width: 80px;
      height: 80px;
    }
  
    .trust-badge-icon {
      width: 50px;
      height: 50px;
    }
  }
  



/* *********************************** Testimonials Section ****************************** */

/* Testimonials Section */
.common-testimonial-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f9f9f9, #e0e0e0); /* Gradient background */
    text-align: center;
    overflow: hidden;
    position: relative;
}

.common-testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Subtitle */
.common-testimonial-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
    animation: fadeInDown 1s ease-in-out;
}

/* Scrolling Line */
.common-testimonial-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: rgba(52, 152, 219, 0.3); /* Light accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.common-testimonial-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Heading */
.common-testimonial-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #333; /* Dark text for contrast */
    margin-bottom: 50px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-in-out;
}

.common-testimonial-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 20px; /* Space for scrollbar */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    scroll-snap-type: x mandatory; /* Snap to each card */
}

.common-testimonial-slider::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

.common-testimonial-card {
    flex: 0 0 calc(33.33% - 15px); /* Show 3 cards at once */
    scroll-snap-align: start; /* Snap each card to the start */
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.common-testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Testimonial Cards */
.common-testimonial-card {
    flex: 0 0 calc(33.33% - 15px); /* Show 3 cards at once */
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.common-testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.testimonial-content {
    text-align: left;
}

.testimonial-rating {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-stars {
    font-size: 1.5rem;
    color: #f1c40f; /* Gold color for stars */
}

.rating-number {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.testimonial-text {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.testimonial-author {
    font-size: 1rem;
    color: #333;
    font-weight: 600;
}

/* Navigation Buttons */
.common-testimonial-navigation {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-button {
    width: 50px;
    height: 50px;
    background: #3498db;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.nav-button:hover {
    background: #2980b9;
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .common-testimonial-card {
        flex: 0 0 calc(50% - 15px); /* Show 2 cards at once */
    }
}

@media (max-width: 768px) {
    .common-testimonial-title {
        font-size: 2.2rem;
    }

    .common-testimonial-card {
        flex: 0 0 100%; /* Show 1 card at once */
    }

    .testimonial-content {
        padding: 20px;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    .testimonial-author {
        font-size: 0.9rem;
    }

    .nav-button {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}









/* ****************************************************************************************** */
/* ********************************** Bare Metal Price Plan ********************************* */
/* ****************************************************************************************** */

/* ********************************** Bare Metal Price Plan *********************************** */

/* Add-Ons Table Styling */
.add-ons-section {
    margin-top: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-ons-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.add-ons-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-ons-table thead {
    background-color: #007bff;
    color: #fff;
}

.add-ons-table th,
.add-ons-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.add-ons-table th {
    font-weight: 600;
    font-size: 16px;
}

.add-ons-table tbody tr:hover {
    background-color: #f1f1f1;
}

.add-ons-table tbody tr:last-child td {
    border-bottom: none;
}

.add-ons-table td {
    font-size: 14px;
    color: #555;
}

.add-ons-table td:nth-child(2) {
    font-weight: 600;
    color: #007bff;
}

/* Responsive Table */
@media (max-width: 768px) {
    .add-ons-table thead {
        display: none;
    }

    .add-ons-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .add-ons-table tbody td {
        display: block;
        text-align: right;
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
    }

    .add-ons-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #333;
    }

    .add-ons-table tbody td:last-child {
        border-bottom: none;
    }
}








/* *************************************************************** */
/* Windows Dedicated Price */
/* *************************************************************** */

/* ********************************** Windows Dedicated Price Plan *********************************** */

/* Windows Dedicated Price Plan Section */
.linux-dedicated-plans {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.linux-dedicated-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.linux-dedicated-heading {
    text-align: center;
    margin-bottom: 50px;
}

.linux-dedicated-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.linux-dedicated-scrolling-line {
    width: 200px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.linux-dedicated-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.linux-dedicated-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #2c3e50;
}

/* Plans Grid */
.linux-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Plan Card */
.linux-plan-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.linux-plan-card.recommended-plan {
    border-top: 4px solid #3498db;
}

.recommended-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3498db;
    color: #fff;
    padding: 5px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 15px;
}

.linux-plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.linux-plan-header i {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 15px;
}

.linux-plan-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: black;
}

.linux-plan-pricing {
    margin-bottom: 20px;
}

.linux-plan-pricing .linux-plan-start-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3498db;
}

.linux-plan-pricing .linux-plan-cut-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
}

.linux-plan-pricing .linux-plan-new-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3498db;
}

.linux-plan-specs {
    text-align: left;
    margin-bottom: 20px;
}

.linux-plan-specs p {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.linux-plan-specs i {
    color: #3498db;
    margin-right: 10px;
}

.linux-plan-specs i.fa-star {
    color: #f1c40f;
}

/* Select Plan Button */
.linux-plan-select-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.linux-plan-select-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Compare All Plans Section */
.compare-plans-section {
    text-align: center;
    margin-top: 40px;
}

.compare-plans-text {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 20px;
}

.compare-plans-button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #3498db;
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.compare-plans-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .linux-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .linux-plans-grid {
        grid-template-columns: 1fr;
    }
    .linux-dedicated-main-title {
    font-size: 2rem;
}
}


/* ********************************************* Add Ons ********************************* */

/* Premium Add-Ons Section */
.linux-addons-section {
    margin: 40px 0;
    padding: 30px 0;
    border-top: 1px solid #2d3748;
    border-bottom: 1px solid #2d3748;
}

.addons-title {
    text-align: center;
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:#007BFF;
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.addon-card {
    background: #1a202c;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #2d3748;
}

.addon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-color: #4299e1;
}

.addon-card i {
    font-size: 40px;
    color: #4299e1;
    margin-bottom: 15px;
    display: block;
}

.addon-card h4 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.addon-card p {
    color: #a0aec0;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.addon-price {
    color: #48bb78;
    font-size: 18px;
    font-weight: 700;
}

.addon-price small {
    display: block;
    font-size: 13px;
    color: #718096;
    font-weight: 400;
    margin-top: 5px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .addons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .addons-grid {
        grid-template-columns: 1fr;
    }
    
    .addon-card {
        padding: 20px;
    }
}



/* ********************************* Compare add ons ********************* */

.common-plan-comparison-notes {
    margin-top: 40px;
    padding: 25px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3a86ff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.common-plan-comparison-notes p {
    font-size: 14px;
    line-height: 1.6;
    color: #495057;
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
}

.common-plan-comparison-notes p:before {
    content: "•";
    color: #3a86ff;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.common-plan-comparison-notes h3 {
    font-size: 18px;
    color: #212529;
    margin: 25px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
}

.common-plan-addons {
    margin-top: 25px;
}

.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.addon-item {
    background: white;
    padding: 12px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}

.addon-item:hover {
    transform: translateY(-3px);
}

.addon-item i {
    color: #3a86ff;
    margin-right: 10px;
    font-size: 16px;
}

.addon-item span {
    font-size: 14px;
    color: #495057;
}

.common-plan-promo {
    margin-top: 25px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #3a86ff 0%, #2667cc 100%);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.common-plan-promo i {
    margin-right: 10px;
    font-size: 18px;
}



/* *************************** Add Ons ********************** */


/* Add-Ons Section Styling */
.common-addons-section {
    margin-top: 50px;
    padding: 30px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.common-addons-title {
    text-align: center;
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 30px;
    font-weight: 600;
    position: relative;
}

.common-addons-title:after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #3498db;
    margin: 15px auto 0;
    border-radius: 2px;
}

.common-addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    padding: 0 30px;
}

.common-addon-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.common-addon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #3498db;
}

.common-addon-card i {
    font-size: 36px;
    color: #3498db;
    margin-bottom: 15px;
    display: block;
}

.common-addon-card h4 {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
}

.common-addon-card p {
    color: #7f8c8d;
    font-size: 15px;
    margin-bottom: 5px;
}

.common-addon-price {
    font-size: 18px;
    color: #27ae60;
    font-weight: 700;
    margin-top: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .common-addons-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
    
    .common-addon-card {
        padding: 20px;
    }
}




/* Common Plan Comparison Section */
.common-plan-comparison {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    text-align: center;
    overflow: hidden;
}

.common-plan-comparison-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.common-plan-comparison-heading {
    margin-bottom: 50px;
}

.common-plan-comparison-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.common-plan-comparison-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.common-plan-comparison-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.common-plan-comparison-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Plan Comparison Table */
.common-plan-comparison-table {
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

.common-plan-comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.common-plan-comparison-table th,
.common-plan-comparison-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.common-plan-comparison-table th {
    background: rgba(52, 152, 219, 0.1);
    font-size: 1.1rem;
    font-weight: 600;
}

.common-plan-comparison-table td {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Plan Name and Price */
.common-plan-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3498db;
    margin-bottom: 8px;
}

.common-plan-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

/* Order Now Button */
.common-plan-order-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.common-plan-order-btn:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/* Features List */
.common-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.common-plan-features li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive Design */
@media (max-width: 768px) {
    .common-plan-comparison-title {
        font-size: 2rem;
    }

    .common-plan-comparison-table {
        padding: 10px;
    }

    .common-plan-comparison-table th,
    .common-plan-comparison-table td {
        padding: 12px;
    }

    .common-plan-name {
        font-size: 1rem;
    }

    .common-plan-price {
        font-size: 1.2rem;
    }

    .common-plan-order-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}










/* Why Choose Us Section */
.common-why-choose {
    padding: 100px 20px;
    background: #f9f9f9;
    color: #333;
    text-align: center;
    overflow: hidden;
}

.common-why-choose-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.common-why-choose-heading {
    margin-bottom: 50px;
}

.common-why-choose-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.common-why-choose-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.common-why-choose-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.common-why-choose-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Content Layout */
.common-why-choose-content {
    display: flex;
    align-items: center;
    gap: 50px;
    text-align: left;
}

/* Image (Left Side) */
.common-why-choose-image {
    flex: 1;
    position: relative;
}

.common-why-choose-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.common-why-choose-image-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.common-why-choose-main-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.common-why-choose-image-border {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    pointer-events: none;
}

.common-why-choose-image-icons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.common-why-choose-icon {
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.common-why-choose-icon i {
    font-size: 2rem;
    margin-bottom: 5px;
}

.common-why-choose-icon span {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.common-why-choose-icon:hover {
    transform: translateY(-5px);
}

/* Text (Right Side) */
.common-why-choose-text {
    flex: 1;
}

.common-why-choose-intro {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.common-why-choose-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.common-why-choose-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.common-why-choose-list i {
    font-size: 2rem;
    color: #3498db;
    margin-top: 5px;
    transition: transform 0.3s ease;
}

.common-why-choose-list i:hover {
    transform: rotate(360deg);
}

.common-why-choose-text-content {
    flex: 1;
}

.common-why-choose-list strong {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

.common-why-choose-list p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Call-to-Action Button */
.common-why-choose-cta {
    margin-top: 40px;
}

.common-why-choose-cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.common-why-choose-cta-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .common-why-choose-content {
        flex-direction: column;
        text-align: center;
    }

    .common-why-choose-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .common-why-choose-list i {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .common-why-choose-title {
        font-size: 2.2rem;
    }

    .common-why-choose-subtitle {
        font-size: 1.2rem;
    }

    .common-why-choose-intro {
        font-size: 1rem;
    }

    .common-why-choose-list strong {
        font-size: 1.2rem;
    }

    .common-why-choose-list p {
        font-size: 0.9rem;
    }

    .common-why-choose-cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
}






/* Free Migration Offer Section */
.free-migration-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    text-align: center;
    overflow: hidden;
}

.free-migration-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.free-migration-heading {
    margin-bottom: 50px;
}

.free-migration-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.free-migration-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: rgba(52, 152, 219, 0.3);
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.free-migration-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.free-migration-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Content Layout */
.free-migration-content {
    display: flex;
    align-items: center;
    gap: 50px;
    text-align: left;
}

/* Image (Left Side) */
.free-migration-image {
    flex: 1;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.free-migration-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.free-migration-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.free-migration-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}

.free-migration-image:hover .free-migration-image-overlay {
    background: rgba(0, 0, 0, 0.2);
}

/* Text (Right Side) */
.free-migration-text {
    flex: 1;
}

.free-migration-intro {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 30px;
}

.free-migration-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.free-migration-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.free-migration-list i {
    font-size: 1.5rem;
    color: #3498db;
    margin-top: 5px;
}

.free-migration-list strong {
    font-size: 1.4rem;
    color: white;
    margin-bottom: 5px;
    display: block;
}

.free-migration-list p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* Call-to-Action Button */
.free-migration-cta {
    margin-top: 40px;
}

.free-migration-cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.free-migration-cta-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .free-migration-content {
        flex-direction: column;
        text-align: center;
    }

    .free-migration-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .free-migration-list i {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .free-migration-title {
        font-size: 2.2rem;
    }

    .free-migration-subtitle {
        font-size: 1.2rem;
    }

    .free-migration-intro {
        font-size: 1rem;
    }

    .free-migration-list strong {
        font-size: 1.2rem;
    }

    .free-migration-list p {
        font-size: 0.9rem;
    }

    .free-migration-cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
}









/* Performance Metrics Section */
.performance-metrics-section {
    padding: 100px 20px;
    background: #f9f9f9; /* Light background */
    text-align: center;
    overflow: hidden;
}

.performance-metrics-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Top Paragraph */
.performance-metrics-top-para {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Scrolling Line */
.performance-metrics-scrolling-line {
    width: 300px;
    height: 3px;
    background-color: rgba(52, 152, 219, 0.3); /* Light accent color */
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.performance-metrics-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Heading */
.performance-metrics-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #333; /* Dark text for contrast */
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Introduction */
.performance-metrics-intro {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Metrics Grid */
.performance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.performance-metric {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.performance-metric:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.icon-wrapper {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 20px;
}

.performance-metric h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 15px;
}

.performance-metric p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress {
    height: 100%;
    background: #3498db;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.progress-text {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
}

/* Call-to-Action */
.performance-metrics-cta {
    margin-top: 50px;
}

.performance-metrics-cta p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background: #2980b9;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .performance-metrics-title {
        font-size: 2.2rem;
    }

    .performance-metrics-intro {
        font-size: 1rem;
    }

    .performance-metric h3 {
        font-size: 1.3rem;
    }

    .performance-metric p {
        font-size: 0.9rem;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
}















/* **************************************************** Linux details plan comparision ********************************************* */

/* Linux Dedicated Server Plan Section */
.linux-dedicated-plan-comparison {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: white;
    text-align: center;
    overflow: hidden;
}

.linux-dedicated-plan-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Top Paragraph */
.linux-dedicated-plan-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Scrolling Line */
.linux-dedicated-plan-line {
    width: 300px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.linux-dedicated-plan-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Heading */
.linux-dedicated-plan-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Pricing Plan Table */
.linux-dedicated-plan-table {
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

th {
    background: rgba(52, 152, 219, 0.1);
    font-size: 1.1rem;
    font-weight: 600;
}

td {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Plan Name Styling */
th:first-child,
td:first-child {
    font-weight: 700;
    color: #3498db;
    text-transform: uppercase;
}

/* Order Now Button */
.linux-dedicated-order-now-row td {
    padding: 20px 15px;
}

.linux-dedicated-order-now-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.linux-dedicated-order-now-btn:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .linux-dedicated-plan-title {
        font-size: 2rem;
    }

    table {
        font-size: 0.9rem;
    }

    .linux-dedicated-order-now-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}




/* Scalability Section - With Original Classes - Enhanced Design */
.common-scalability-section-for-all {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f7ff 100%);
    position: relative;
    overflow: hidden;
}

.common-scalability-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Paragraph */
.common-scalability-subheading {
    font-size: 1.1rem;
    color: #3498db;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    animation: fadeInDown 0.8s ease-out;
}

/* Scrolling Line */
.common-scalability-divider-line {
    width: 150px;
    height: 4px;
    background: #e2e8f0;
    margin: 0 auto 25px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.scrolling-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    animation: scrollingGradient 3s infinite linear;
}

@keyframes scrollingGradient {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Heading */
.common-scalability-main-heading {
    font-size: 2.4rem;
    color: #2c3e50;
    text-align: center;
    margin: 0 auto 60px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 900px;
    position: relative;
    animation: fadeInUp 0.8s ease-out;
}


/* Features Grid */
.common-scalability-content-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.common-scalability-feature-card {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.common-scalability-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.15);
}

.highlighted-card {
    border-top: 4px solid #3498db;
    transform: translateY(-5px);
}

.highlighted-card:hover {
    transform: translateY(-15px);
}

/* Card Icon */
.common-scalability-icon-wrapper {
    font-size: 2.2rem;
    color: #3498db;
    margin-bottom: 25px;
    width: 70px;
    height: 70px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.common-scalability-feature-card:hover .common-scalability-icon-wrapper {
    background: #3498db;
    color: white;
    transform: rotate(15deg) scale(1.1);
}

/* Card Content */
.common-scalability-feature-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.common-scalability-feature-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #3498db;
}

.common-scalability-feature-desc {
    color: #7f8c8d;
    margin-bottom: 25px;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Benefits List */
.common-scalability-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.common-scalability-benefits-list li {
    margin-bottom: 12px;
    color: #34495e;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 25px;
}

.common-scalability-benefits-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2ecc71;
    font-weight: bold;
}

.common-scalability-benefits-list i {
    display: none; /* Hiding duplicate icons since we're using ::before */
}

/* Recommended Badge */
.recommended-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background: #3498db;
    color: white;
    padding: 5px 30px;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
}

/* Hover Effect */
.card-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.common-scalability-feature-card:hover .card-hover-effect {
    opacity: 1;
}

/* CTA Section */
.common-scalability-cta-wrapper {
    text-align: center;
    margin-top: 40px;
    animation: fadeIn 1s ease-out;
}

.common-scalability-cta-text {
    color: #7f8c8d;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.common-scalability-cta-button {
    display: inline-flex;
    align-items: center;
    padding: 16px 36px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
}

.common-scalability-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.4);
}

.common-scalability-cta-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0));
    transform: rotate(30deg);
    transition: all 0.3s ease;
}

.common-scalability-cta-button:hover::after {
    left: 100%;
}

.common-scalability-cta-button i {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

/* Responsive Design */
@media (max-width: 768px) {
    .common-scalability-main-heading {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .common-scalability-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .recommended-badge {
        right: -25px;
        padding: 5px 25px;
    }
    
    .common-scalability-feature-card {
        padding: 30px 25px;
    }
}




/* USPs Section - Preserved Classes with Enhanced Design */
.common-usps-section-for-all {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f9fbfd 0%, #f0f5ff 100%);
    position: relative;
    overflow: hidden;
}

.common-usps-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.common-usps-header {
    text-align: center;
    margin-bottom: 60px;
}

.common-usps-subtitle {
    font-size: 1.1rem;
    color: #3498db;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    animation: fadeInDown 0.8s ease-out;
}

/* Scrolling Line - Matching Previous Design */
.common-usps-divider {
    width: 150px;
    height: 4px;
    background: #e2e8f0;
    margin: 0 auto 25px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.scrolling-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    animation: scrollingGradient 3s infinite linear;
}

@keyframes scrollingGradient {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.common-usps-main-title {
    font-size: 2.4rem;
    color: #2c3e50;
    margin: 0 auto 20px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 900px;
    position: relative;
    animation: fadeInUp 0.8s ease-out;
}


.common-usps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.common-usps-card {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.common-usps-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.15);
}

.common-usps-card.highlight {
    border-top: 4px solid #3498db;
    transform: translateY(-5px);
}

.common-usps-card.highlight:hover {
    transform: translateY(-15px);
}

/* Card Icon */
.common-usps-icon-wrapper {
    font-size: 2.2rem;
    color: #3498db;
    margin-bottom: 25px;
    width: 70px;
    height: 70px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.common-usps-card:hover .common-usps-icon-wrapper {
    background: #3498db;
    color: white;
    transform: rotate(15deg) scale(1.1);
}

/* Card Content */
.common-usps-card-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.common-usps-card-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #3498db;
}

.common-usps-card-desc {
    color: #7f8c8d;
    margin-bottom: 0;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Recommended Badge */
.recommended-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background: #3498db;
    color: white;
    padding: 5px 30px;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
}

/* Hover Effect */
.card-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.common-usps-card:hover .card-hover-effect {
    opacity: 1;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

/* Responsive Design */
@media (max-width: 768px) {
    .common-usps-main-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .common-usps-grid {
        grid-template-columns: 1fr;
    }
    
    .recommended-badge {
        right: -25px;
        padding: 5px 25px;
    }
    
    .common-usps-card {
        padding: 30px 25px;
    }
}




/* ************************************************************** Enterprise Pricing ************************************************** */


/* Migration Assistance Section */
.migration-assistance-section {
    padding: 80px 20px;
    background: #f9fafb;
}

.migration-assistance-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.migration-assistance-heading {
    text-align: center;
    margin-bottom: 60px;
}

.migration-assistance-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.migration-scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.migration-scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.migration-assistance-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* Content Layout */
.migration-assistance-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.migration-assistance-image {
    flex: 1;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.migration-assistance-image img {
    width: 100%;
    height: auto;
    display: block;
}

.migration-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 152, 219, 0.1);
}

.migration-assistance-text {
    flex: 1;
}

.migration-assistance-intro {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.6;
}

.migration-assistance-list {
    list-style: none;
    padding: 0;
}

.migration-assistance-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.migration-assistance-list i {
    font-size: 1.5rem;
    color: #3498db;
    margin-right: 15px;
    margin-top: 5px;
}

.migration-assistance-list strong {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 5px;
    display: block;
}

.migration-assistance-list p {
    font-size: 0.95rem;
    color: #718096;
    line-height: 1.5;
}

/* CTA Button */
.migration-assistance-cta {
    margin-top: 30px;
}

.migration-cta-button {
    display: inline-block;
    padding: 12px 30px;
    background: #3498db;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease;
}

.migration-cta-button:hover {
    background: #2980b9;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .migration-assistance-content {
        flex-direction: column;
        gap: 30px;
    }

    .migration-assistance-image {
        width: 100%;
    }

    .migration-assistance-text {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .migration-assistance-title {
        font-size: 2rem;
    }

    .migration-assistance-subtitle {
        font-size: 1rem;
    }

    .migration-scrolling-line {
        width: 150px;
    }

    .migration-assistance-intro {
        font-size: 1rem;
    }

    .migration-cta-button {
        font-size: 0.9rem;
        padding: 10px 25px;
    }
}





/* SLA Section */
.sla-section {
    padding: 80px 20px;
    background: #f9fafb;
    text-align: center;
}

.sla-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.sla-heading {
    text-align: center;
    margin-bottom: 60px;
}

.sla-subtitle {
    font-size: 1.2rem;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.sla-scrolling-line {
    width: 200px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.sla-scrolling-line::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrolling-line 3s linear infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.sla-main-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-top: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* SLA Content */
.sla-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.sla-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sla-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.sla-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #6c5ce7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.sla-icon i {
    font-size: 1.8rem;
    color: #ffffff;
}

.sla-card h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

.sla-card p {
    font-size: 0.95rem;
    color: #718096;
    line-height: 1.5;
}

/* SLA CTA */
.sla-cta {
    text-align: center;
    margin-top: 40px;
}

.sla-cta p {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.sla-cta-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.sla-cta-link:hover {
    color: #2980b9;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sla-main-title {
        font-size: 2.2rem;
    }

    .sla-subtitle {
        font-size: 1.1rem;
    }

    .sla-card {
        padding: 25px;
    }

    .sla-icon {
        width: 50px;
        height: 50px;
    }

    .sla-icon i {
        font-size: 1.5rem;
    }

    .sla-card h3 {
        font-size: 1.2rem;
    }

    .sla-card p {
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .sla-main-title {
        font-size: 2rem;
    }

    .sla-subtitle {
        font-size: 1rem;
    }

    .sla-scrolling-line {
        width: 150px;
    }

    .sla-content {
        grid-template-columns: 1fr;
    }

    .sla-cta p {
        font-size: 1rem;
    }
}






/* Common Call-to-Action Section */
.common-call-to-action {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f9fafb, #eef2f6);
}

.common-cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

/* Left Side: Image */
.common-cta-image-wrapper {
    flex: 1;
    position: relative;
    min-height: 400px;
}

.common-cta-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;  /* Ensures the image covers the area without distorting */
}

/* Right Side: Content */
.common-cta-content {
    flex: 1;
    padding: 60px;
    position: relative;
    z-index: 2;
}

.common-cta-heading {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.common-cta-subheading {
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* CTA Buttons */
.common-cta-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.common-cta-primary {
    padding: 14px 30px;
    background: linear-gradient(135deg, #3498db, #6c5ce7);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.common-cta-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
    background: linear-gradient(135deg, #6c5ce7, #3498db);  /* Swap the gradient for a smoother hover effect */
}

.common-cta-secondary {
    padding: 14px 30px;
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.common-cta-secondary:hover {
    background: #3498db;
    color: #ffffff;
}

/* Trust Badges */
.common-cta-trust-badges {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.common-cta-trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.common-cta-trust-badge i {
    font-size: 1.8rem;
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    padding: 10px;
    border-radius: 50%;
}

.common-cta-trust-badge p {
    font-size: 0.95rem;
    color: #2c3e50;
    margin: 0;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .common-cta-container {
        flex-direction: column;
        gap: 0;
    }

    .common-cta-image-wrapper {
        width: 100%;
        min-height: 300px;
    }

    .common-cta-content {
        padding: 40px;
    }

    .common-cta-heading {
        font-size: 2.2rem;
    }

    .common-cta-subheading {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .common-cta-heading {
        font-size: 2rem;
    }

    .common-cta-subheading {
        font-size: 0.95rem;
    }

    .common-cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .common-cta-primary, .common-cta-secondary {
        width: 100%;
        text-align: center;
    }

    .common-cta-trust-badges {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}












/* ***************************************** High Performance Server ********************************* */

/* Final Combined Plan Table Section */
.combined-plans {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.combined-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Heading */
.combined-heading {
    text-align: center;
    margin-bottom: 50px;
}

.combined-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.combined-scrolling-line {
    width: 200px;
    height: 3px;
    background-color: #3498db;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.combined-scrolling-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: scrolling-line 3s infinite;
}

@keyframes scrolling-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.combined-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #2c3e50;
}

/* Pricing Toggle Buttons */
.pricing-toggle {
    text-align: center;
    margin-bottom: 40px;
}

.toggle-button {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #3498db;
    background-color: transparent;
    border: 2px solid #3498db;
    border-radius: 25px;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-button.active,
.toggle-button:hover {
    background-color: #3498db;
    color: #fff;
}

/* Plans Table */
.plans-table {
    display: none;
    overflow-x: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.plans-table.active {
    display: block;
}

.plans-table table {
    width: 100%;
    border-collapse: collapse;
}

.plans-table th,
.plans-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.plans-table th {
    background-color: #3498db;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.plans-table td {
    font-size: 0.9rem;
    color: #555;
}

.plans-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Plan Action Button Styling */
.plan-action-button {
    background-color: #3498db;
    color: white;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.plan-action-button:hover {
    background-color: #2980b9;
    transform: scale(1.05);
}

.plan-action-button:focus {
    outline: none;
}

/* Responsive Design */
@media (max-width: 767px) {
    .plans-table {
        overflow-x: scroll;
    }

    .plan-action-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}










/* ************************************** Common Blog ***************************************** */


/* Blog Section Styles */
.common-blog-section {
    padding: 80px 0;
    background-color: #f8fafc;
}

.common-blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Heading */
.common-blog-heading {
    text-align: center;
    margin-bottom: 50px;
}

.common-blog-subtitle {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.common-blog-divider {
    width: 60px;
    height: 3px;
    background: #3b82f6;
    margin: 0 auto 20px;
}

.common-blog-title {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
}

/* Blog Rows */
.common-blog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 25px;
}

.top-row .common-blog-box {
    flex: 1 1 calc(25% - 25px);
    min-width: 250px;
}

.middle-row .common-blog-box,
.bottom-row .common-blog-box {
    flex: 1 1 calc(33.33% - 25px);
    min-width: 250px;
}

/* Blog Box Styles */
.common-blog-box {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.common-blog-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.common-blog-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.common-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.common-blog-box:hover .common-blog-image img {
    transform: scale(1.03);
}

.common-blog-date {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.common-blog-date i {
    margin-right: 5px;
}

.common-blog-content {
    padding: 20px;
}

.common-blog-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}

.common-blog-content p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.common-blog-link {
    display: inline-flex;
    align-items: center;
    color: #3b82f6;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.common-blog-link:hover {
    color: #2563eb;
}

.common-blog-link i {
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.common-blog-link:hover i {
    transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .top-row .common-blog-box {
        flex: 1 1 calc(50% - 25px);
    }
}

@media (max-width: 768px) {
    .common-blog-section {
        padding: 60px 0;
    }
    
    .common-blog-title {
        font-size: 30px;
    }
    
    .top-row .common-blog-box,
    .middle-row .common-blog-box,
    .bottom-row .common-blog-box {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .common-blog-title {
        font-size: 26px;
    }
    
    .common-blog-subtitle {
        font-size: 14px;
    }
}









/* ********************************************** Unmanaged Dedicated Server ********************************************* */
/* *********************************************************************************************************************** */





/* **************************** Unmanaged vs Managed ************************************* */


/* ===== Base Styles ===== */
.ds-compare-section {
    background: linear-gradient(135deg, #000053, #000035);
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
}

.ds-compare-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

/* ===== Background Elements ===== */
.ds-compare-bg-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 25% 25%, #4a00e0 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, #8e2de2 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
}

.ds-compare-floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 2;
}

.ds-compare-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    animation: ds-float-animation 15s infinite linear;
}

.ds-orb-1 {
    width: 400px;
    height: 400px;
    background: #f72585;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.ds-orb-2 {
    width: 600px;
    height: 600px;
    background: #4cc9f0;
    bottom: -200px;
    right: -200px;
    animation-delay: 3s;
}

.ds-orb-3 {
    width: 300px;
    height: 300px;
    background: #7209b7;
    top: 50%;
    left: 30%;
    animation-delay: 6s;
}

@keyframes ds-float-animation {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(50px, 50px) rotate(90deg); }
    50% { transform: translate(100px, 0) rotate(180deg); }
    75% { transform: translate(50px, -50px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* ===== Header Styles ===== */
.ds-compare-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}

.ds-compare-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: relative;
    display: inline-block;
}

.ds-compare-scroll-line {
    width: 400px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #f72585, #4cc9f0, transparent);
    margin: 0 auto 25px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.ds-compare-scroll-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: ds-scroll-animation 3s infinite;
}

@keyframes ds-scroll-animation {
    0% { left: -100%; }
    100% { left: 100%; }
}

.ds-compare-subtitle {
    font-size: 1.2rem;
    color: #c7d2fe;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ===== Comparison Grid ===== */
.ds-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
}

@media (max-width: 768px) {
    .ds-compare-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Card Styles ===== */
.ds-compare-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.ds-compare-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
}

.ds-unmanaged-card::before {
    background: linear-gradient(90deg, #f72585, #b5179e);
}

.ds-managed-card::before {
    background: linear-gradient(90deg, #4cc9f0, #4361ee);
}

.ds-compare-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Card Header */
.ds-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-card-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-right: 25px;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.ds-unmanaged-card .ds-card-icon {
    background: linear-gradient(135deg, #f72585, #b5179e);
    color: white;
}

.ds-managed-card .ds-card-icon {
    background: linear-gradient(135deg, #4cc9f0, #4361ee);
    color: white;
}

.ds-card-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: white;
}

.ds-card-subtitle {
    color: #a5b4fc;
    font-size: 1rem;
    opacity: 0.9;
}

/* Price Styles */
.ds-price-container {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: #e2e8ff;
}

.ds-price-amount {
    font-weight: 700;
    font-size: 2.5rem;
}

.ds-unmanaged-card .ds-price-amount {
    background: linear-gradient(90deg, #f72585, #ff9a5a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ds-managed-card .ds-price-amount {
    background: linear-gradient(90deg, #4cc9f0, #4361ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Feature List */
.ds-features-box {
    margin-bottom: 40px;
}

.ds-feature-list {
    list-style: none;
}

.ds-feature-item {
    margin-bottom: 18px;
    position: relative;
    padding-left: 35px;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    color: white;
}

.ds-feature-item:hover {
    transform: translateX(5px);
}

.ds-feature-icon {
    position: absolute;
    left: 0;
    top: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.9rem;
}

.ds-unmanaged-card .ds-feature-icon {
    background: rgba(247, 37, 133, 0.2);
    color: #f72585;
}

.ds-managed-card .ds-feature-icon {
    background: rgba(76, 201, 240, 0.2);
    color: #4cc9f0;
}

/* CTA Styles */
.ds-cta-box {
    text-align: center;
}

.ds-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    color: white;
}

.ds-cta-arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.ds-cta-btn:hover .ds-cta-arrow {
    transform: translateX(5px);
}

.ds-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.ds-cta-btn:hover::before {
    left: 100%;
}

.ds-unmanaged-cta {
    background: linear-gradient(135deg, #f72585, #b5179e);
}

.ds-managed-cta {
    background: linear-gradient(135deg, #4cc9f0, #4361ee);
}

.ds-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}










/* ************************************ Specialized Servers ********************************* */
/* ******************************************************************************************* */




/* Why Choose Us Section - Premium Gaming Version */
.common-why-choose-section {
    padding: 120px 20px;
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.common-why-choose-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Label */
.common-why-choose-top-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3498db;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 2px;
    animation: commonFadeInDown 1s ease-in-out;
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
}

/* Scrolling Line */
.common-why-choose-scroll-line {
    width: 300px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.common-why-choose-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: commonScrollLine 2.5s infinite linear;
    border-radius: 3px;
}

@keyframes commonScrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.common-why-choose-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 40px;
    color: #fff;
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.7);
    animation: commonFadeInUp 1s ease-in-out;
    letter-spacing: 1px;
}

/* Content Wrapper */
.common-why-choose-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    text-align: left;
    animation: commonFadeIn 1.5s ease-in-out;
}

/* Visual Box (Image Area) */
.common-why-choose-visual-box {
    flex: 1;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.common-why-choose-image-frame {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.common-why-choose-feature-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
    border-radius: 15px;
    transform: translateZ(20px);
}

.common-why-choose-server-lights {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.common-why-choose-light-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: commonLightPulse 2s infinite ease-in-out;
}

.common-why-choose-light-indicator.red-light { 
    background: #ff3a3a; 
    animation-delay: 0s; 
}

.common-why-choose-light-indicator.blue-light { 
    background: #3498db; 
    animation-delay: 0.3s; 
}

.common-why-choose-light-indicator.green-light { 
    background: #2ecc71; 
    animation-delay: 0.6s; 
}

.common-why-choose-light-indicator.purple-light { 
    background: #9b59b6; 
    animation-delay: 0.9s; 
}

@keyframes commonLightPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 15px currentColor; }
}

.common-why-choose-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0,0,83,0.7) 0%, rgba(0,0,53,0.4) 100%);
    transition: all 0.3s ease;
}

.common-why-choose-visual-box:hover {
    transform: translateY(-5px) rotateX(5deg);
    box-shadow: 0 15px 50px rgba(52, 152, 219, 0.4);
}

.common-why-choose-visual-box:hover .common-why-choose-feature-image {
    transform: scale(1.05) translateZ(30px);
}

.common-why-choose-feature-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 40px;
    z-index: 3;
}

.common-why-choose-icon {
    font-size: 3rem;
    color: #3498db;
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.7);
    transition: all 0.3s ease;
    background: rgba(0,0,0,0.7);
    padding: 20px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(52, 152, 219, 0.5);
}

.common-why-choose-icon:hover {
    opacity: 1;
    transform: translateY(-10px) scale(1.1);
    text-shadow: 0 0 30px rgba(52, 152, 219, 1);
    background: rgba(0,0,0,0.9);
    border-color: #3498db;
}

/* Text Content Area */
.common-why-choose-text-content {
    flex: 1;
}

.common-why-choose-intro-text {
    font-size: 1.2rem;
    color: #bdc3d3;
    line-height: 1.7;
    margin-bottom: 40px;
    animation: commonFadeInLeft 1s ease-in-out;
    font-weight: 400;
}

.common-why-choose-feature-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.common-why-choose-feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    animation: commonFadeInRight 1s ease-in-out;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.common-why-choose-feature-item:hover {
    background: rgba(52, 152, 219, 0.1);
    transform: translateX(10px);
    border-left: 4px solid #3498db;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.common-why-choose-feature-icon {
    font-size: 2rem;
    color: #3498db;
    min-width: 50px;
    text-align: center;
    transition: transform 0.3s ease;
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
}

.common-why-choose-feature-item:hover .common-why-choose-feature-icon {
    transform: scale(1.2);
}

.common-why-choose-feature-details {
    flex: 1;
}

.common-why-choose-feature-title {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 8px;
    display: block;
    font-weight: 600;
}

.common-why-choose-feature-desc {
    font-size: 1.05rem;
    color: #bdc3d3;
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

.common-why-choose-promo-code {
    background: rgba(52, 152, 219, 0.2);
    padding: 3px 10px;
    border-radius: 5px;
    color: #3498db;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Action Area */
.common-why-choose-action-area {
    margin-top: 50px;
    animation: commonFadeInUp 1s ease-in-out;
    text-align: center;
}

.common-why-choose-cta-button {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(45deg, #3498db, #2c81ba);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 25px rgba(52, 152, 219, 0.4);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.common-why-choose-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.common-why-choose-cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(52, 152, 219, 0.6);
    background: linear-gradient(45deg, #3498db, #236fa1);
}

.common-why-choose-cta-button:hover::before {
    left: 100%;
}

.common-why-choose-discount-note {
    margin-top: 20px;
    font-size: 1.1rem;
    color: #3498db;
    font-weight: 600;
}

.common-why-choose-discount-code {
    color: #fff;
    background: rgba(52, 152, 219, 0.2);
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 700;
}

/* Animations */
@keyframes commonFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes commonFadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes commonFadeInDown {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes commonFadeInLeft {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes commonFadeInRight {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .common-why-choose-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .common-why-choose-feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px 20px;
    }

    .common-why-choose-feature-icon {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .common-why-choose-section {
        padding: 80px 20px;
    }
    
    .common-why-choose-main-title {
        font-size: 2.2rem;
    }

    .common-why-choose-top-label {
        font-size: 1.3rem;
    }

    .common-why-choose-intro-text {
        font-size: 1.1rem;
    }

    .common-why-choose-feature-title {
        font-size: 1.3rem;
    }

    .common-why-choose-feature-desc {
        font-size: 1rem;
    }

    .common-why-choose-cta-button {
        padding: 15px 30px;
        font-size: 1.1rem;
    }
    
    .common-why-choose-feature-icons {
        gap: 20px;
    }
    
    .common-why-choose-icon {
        font-size: 2rem;
        width: 60px;
        height: 60px;
        padding: 15px;
    }
}



/* ************************************ Features Section ************************************** */


/* Premium Game Server Features Section - Enhanced Design */
.game-features-section {
    padding: 120px 20px;
    /* background: radial-gradient(ellipse at top, #0a0a2e 0%, #000013 100%); */
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-bottom: 1px solid rgba(52, 152, 219, 0.1);
  }
  
  .game-features-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Decorative particles */
  .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.1);
    z-index: 1;
  }
  
  .particle-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    right: -150px;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.15) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
  }
  
  .particle-2 {
    width: 200px;
    height: 200px;
    bottom: 50px;
    left: -100px;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite 2s;
  }
  
  .particle-3 {
    width: 150px;
    height: 150px;
    top: 30%;
    left: 10%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%);
    animation: float 7s ease-in-out infinite 1s;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
  }
  
  /* Top Label */
  .game-features-top-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #bdc3d3;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 3px;
    animation: fadeInDown 0.8s ease-out;
  }
  
  .highlight-text {
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  }
  
  /* Scrolling Line */
  .game-features-scroll-line {
    width: 200px;
    height: 2px;
    background: rgba(52, 152, 219, 0.3);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }
  
  .game-features-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrollLine 2s infinite linear;
  }
  
  @keyframes scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Main Title */
  .game-features-main-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    line-height: 1.2;
  }
  
  .title-gradient {
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
  }
  
  .title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #3498db;
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
  }
  
  .game-features-main-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, transparent);
    margin: 15px auto 0;
    border-radius: 3px;
  }
  
  /* Features Grid */
  .game-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
  }
  
  .game-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(52, 152, 219, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    z-index: 1;
  }
  
  .game-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .game-feature-card:hover {
    transform: translateY(-10px);
    background: rgba(52, 152, 219, 0.05);
    border-color: rgba(52, 152, 219, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  
  .game-feature-card:hover::before {
    opacity: 1;
  }
  
  .card-bg-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  .game-feature-card:hover .card-bg-accent {
    opacity: 1;
  }
  
  .hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.7s;
    z-index: -1;
  }
  
  .game-feature-card:hover .hover-shine {
    left: 100%;
  }
  
  .game-feature-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 25px;
    transition: all 0.4s ease;
    display: inline-block;
    position: relative;
  }
  
  .game-feature-icon::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(52, 152, 219, 0.2);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.4s ease;
  }
  
  .game-feature-card:hover .game-feature-icon {
    transform: scale(1.2);
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.7);
  }
  
  .game-feature-card:hover .game-feature-icon::after {
    opacity: 1;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
  }
  
  .game-feature-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    font-weight: 700;
  }
  
  .game-feature-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    transition: all 0.4s ease;
  }
  
  .game-feature-card:hover .game-feature-title::after {
    width: 80px;
  }
  
  .game-feature-desc {
    color: #bdc3d3;
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 25px;
    min-height: 60px;
  }
  
  .game-feature-spec {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 25px;
  }
  
  .game-feature-spec span {
    font-size: 0.9rem;
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    padding: 8px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(52, 152, 219, 0.2);
  }
  
  .game-feature-card:hover .game-feature-spec span {
    background: rgba(52, 152, 219, 0.2);
    transform: translateY(-3px);
  }
  
  .game-feature-spec i {
    font-size: 0.9rem;
  }
  
  /* CTA Section */
  .game-features-cta {
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  .game-features-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  }
  
  .button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
  }
  
  .game-features-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.4);
  }
  
  .game-features-button:hover .button-shine {
    left: 100%;
  }
  
  .button-icon {
    transition: transform 0.4s ease;
  }
  
  .game-features-button:hover .button-icon {
    transform: translateX(5px);
  }
  
  .game-features-discount {
    margin-top: 25px;
    color: #bdc3d3;
    font-size: 1.05rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
  }
  
  .discount-flare {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.3), transparent, rgba(52, 152, 219, 0.3));
    transform: translateY(-50%) skewX(-20deg);
    z-index: -1;
    opacity: 0.5;
  }
  
  .game-features-discount strong {
    color: #3fd1ff;
    background: rgba(63, 209, 255, 0.1);
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(63, 209, 255, 0.2);
    transition: all 0.3s ease;
  }
  
  .game-features-discount:hover strong {
    background: rgba(63, 209, 255, 0.2);
    text-shadow: 0 0 10px rgba(63, 209, 255, 0.5);
  }
  
  /* Animations */
  @keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  /* Responsive Design */
  @media (max-width: 1200px) {
    .game-features-main-title {
        font-size: 2.5rem;
    }
  }
  
  @media (max-width: 768px) {
    .game-features-section {
        padding: 80px 20px;
    }
    
    .game-features-main-title {
        font-size: 2rem;
    }
    
    .game-features-grid {
        grid-template-columns: 1fr;
    }
    
    .game-feature-card {
        padding: 30px 20px;
    }
    
    .game-features-button {
        padding: 15px 30px;
        font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    .game-features-main-title {
        font-size: 1.8rem;
    }
    
    .game-features-top-label {
        font-size: 1.1rem;
    }
    
    .game-feature-spec {
        flex-direction: column;
        gap: 10px;
    }
  }





/* *************************** Specific Optimizations ************************* */




/* Game-Specific Optimizations Section - Enhanced */
.game-optimizations-section {
    padding: 120px 20px;
    /* background: radial-gradient(ellipse at top, #0a0a2e 0%, #000013 100%); */
    background: linear-gradient(135deg, #000053, #000035);
    color: #fff;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden;
  }
  
  .game-optimizations-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Decorative particles */
  .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.1);
    z-index: 1;
  }
  
  .particle-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.15) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
  }
  
  .particle-2 {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite 2s;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
  }
  
  /* Top Label */
  .game-optimizations-top-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #bdc3d3;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
    animation: fadeInDown 0.8s ease-out;
  }
  
  .highlight-text {
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  }
  
  /* Scrolling Line */
  .game-optimizations-scroll-line {
    width: 200px;
    height: 2px;
    background: rgba(52, 152, 219, 0.2);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }
  
  .game-optimizations-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrollLine 2s infinite linear;
  }
  
  @keyframes scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Main Title */
  .game-optimizations-main-title {
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    line-height: 1.2;
  }
  
  .title-gradient {
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
  }
  
  .title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #3498db;
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
  }
  
  .game-optimizations-main-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, transparent);
    margin: 15px auto 0;
    border-radius: 3px;
  }
  
  /* Game Optimizations Grid */
  .game-optimizations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
  }
  
  .game-optimization-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid rgba(52, 152, 219, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    z-index: 1;
  }
  
  .card-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  .game-optimization-card:hover {
    transform: translateY(-10px);
    background: rgba(52, 152, 219, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(52, 152, 219, 0.3);
  }
  
  .game-optimization-card:hover .card-bg-pattern {
    opacity: 1;
  }
  
  .card-hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.7s;
    z-index: -1;
  }
  
  .game-optimization-card:hover .card-hover-shine {
    left: 100%;
  }
  
  .game-optimization-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(52, 152, 219, 0.2);
    position: relative;
  }
  
  .game-logo-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .game-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    transition: transform 0.3s ease;
  }
  
  .logo-halo {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.1);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  .game-optimization-card:hover .logo-halo {
    transform: scale(1.2);
    opacity: 1;
  }
  
  .game-optimization-card:hover .game-logo {
    transform: scale(1.1);
  }
  
  .game-optimization-title {
    font-size: 1.6rem;
    margin: 0;
    font-weight: 700;
    transition: all 0.3s ease;
  }
  
  .game-optimization-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
  }
  
  .game-optimization-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #bdc3d3;
    font-size: 1rem;
    line-height: 1.6;
    transition: all 0.3s ease;
  }
  
  .game-optimization-card:hover .game-optimization-features li {
    color: #fff;
  }
  
  .feature-icon {
    color: #3498db;
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  
  .game-optimization-card:hover .feature-icon {
    transform: scale(1.2);
  }
  
  .game-optimization-spec {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
    font-size: 0.9rem;
  }
  
  .game-optimization-spec span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    padding: 8px 15px;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 1px solid rgba(52, 152, 219, 0.2);
  }
  
  .game-optimization-card:hover .game-optimization-spec span {
    background: rgba(52, 152, 219, 0.2);
    transform: translateY(-3px);
  }
  
  .game-optimization-spec i {
    width: 16px;
    text-align: center;
  }
  
  /* Game-Specific Colors */
  .minecraft-optimization .game-optimization-title { color: #5db556; }
  .minecraft-optimization:hover { border-color: rgba(93, 181, 86, 0.3); }
  .minecraft-optimization:hover .logo-halo { background: rgba(93, 181, 86, 0.1); }
  .minecraft-optimization .feature-icon { color: #5db556; }
  
  .rust-optimization .game-optimization-title { color: #c34f4f; }
  .rust-optimization:hover { border-color: rgba(195, 79, 79, 0.3); }
  .rust-optimization:hover .logo-halo { background: rgba(195, 79, 79, 0.1); }
  .rust-optimization .feature-icon { color: #c34f4f; }
  
  .csgo-optimization .game-optimization-title { color: #f7931a; }
  .csgo-optimization:hover { border-color: rgba(247, 147, 26, 0.3); }
  .csgo-optimization:hover .logo-halo { background: rgba(247, 147, 26, 0.1); }
  .csgo-optimization .feature-icon { color: #f7931a; }
  
  .ark-optimization .game-optimization-title { color: #5dadec; }
  .ark-optimization:hover { border-color: rgba(93, 173, 236, 0.3); }
  .ark-optimization:hover .logo-halo { background: rgba(93, 173, 236, 0.1); }
  .ark-optimization .feature-icon { color: #5dadec; }
  
  .valheim-optimization .game-optimization-title { color: #8b5a2b; }
  .valheim-optimization:hover { border-color: rgba(139, 90, 43, 0.3); }
  .valheim-optimization:hover .logo-halo { background: rgba(139, 90, 43, 0.1); }
  .valheim-optimization .feature-icon { color: #8b5a2b; }
  
  .gta-optimization .game-optimization-title { color: #f39c12; }
  .gta-optimization:hover { border-color: rgba(243, 156, 18, 0.3); }
  .gta-optimization:hover .logo-halo { background: rgba(243, 156, 18, 0.1); }
  .gta-optimization .feature-icon { color: #f39c12; }
  
  /* CTA Section */
  .game-optimizations-cta {
    text-align: center;
    margin-top: 50px;
    position: relative;
  }
  
  .game-optimizations-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  }
  
  .button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
  }
  
  .game-optimizations-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.4);
  }
  
  .game-optimizations-button:hover .button-shine {
    left: 100%;
  }
  
  .button-icon {
    transition: transform 0.4s ease;
  }
  
  .game-optimizations-button:hover .button-icon {
    transform: rotate(30deg);
  }
  
  .game-optimizations-note {
    margin-top: 25px;
    color: #bdc3d3;
    font-size: 1.05rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
  }
  
  .note-highlight {
    color: #3fd1ff;
    font-weight: 600;
  }
  
  /* Animations */
  @keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  /* Responsive Design */
  @media (max-width: 1200px) {
    .game-optimizations-main-title {
        font-size: 2.5rem;
    }
  }
  
  @media (max-width: 768px) {
    .game-optimizations-section {
        padding: 80px 20px;
    }
    
    .game-optimizations-main-title {
        font-size: 2rem;
    }
    
    .game-optimizations-grid {
        grid-template-columns: 1fr;
    }
    
    .game-optimization-card {
        padding: 25px;
    }
    
    .game-optimizations-button {
        padding: 15px 30px;
    }
  }
  
  @media (max-width: 480px) {
    .game-optimizations-main-title {
        font-size: 1.8rem;
    }
    
    .game-optimizations-top-label {
        font-size: 1.1rem;
    }
    
    .game-optimization-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .game-optimization-title {
        font-size: 1.4rem;
    }
  }






/* *********************************** Enhanced Backup ************************************* */




/* Enhanced Backup/Restore Section */
.backup-section {
    padding: 120px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #333;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden;
  }
  
  .backup-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Top Label */
  .backup-top-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
    animation: fadeInDown 0.8s ease-out;
  }
  
  .highlight-text {
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
  }
  
  /* Animated Divider */
  .backup-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .backup-divider-line {
    width: 100px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    position: relative;
    overflow: hidden;
    border-radius: 3px;
  }
  
  .backup-divider-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrollLine 2s infinite linear;
  }
  
  @keyframes scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Main Title */
  .backup-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  
  .title-gradient {
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
  
  .title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #3498db;
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.2);
  }
  
  .backup-subtitle {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 60px;
    font-size: 1.2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
  
  /* Process Timeline */
  .backup-process {
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
    padding-left: 60px;
  }
  
  .backup-process::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #3498db, #3fd1ff);
    z-index: 1;
    border-radius: 3px;
  }
  
  .backup-step {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 2;
  }
  
  .backup-step-number {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
    position: relative;
  }
  
  .step-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  
  .backup-step-content {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    transition: all 0.3s ease;
    border: 1px solid rgba(52, 152, 219, 0.1);
  }
  
  .backup-step:hover .backup-step-content {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(52, 152, 219, 0.3);
  }
  
  .backup-step-title {
    font-size: 1.6rem;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
  }
  
  .backup-step-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    border-radius: 3px;
  }
  
  .backup-step-desc {
    color: #7f8c8d;
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1.1rem;
  }
  
  .backup-step-features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .backup-step-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
  }
  
  .backup-step:hover .backup-step-features li {
    color: #2c3e50;
  }
  
  .backup-step-features i {
    color: #3498db;
    margin-top: 4px;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
  }
  
  .backup-step:hover .backup-step-features i {
    transform: scale(1.2);
  }
  
  /* Retention Grid */
  .backup-retention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 25px;
  }
  
  .retention-tier {
    background: linear-gradient(135deg, #f8fbfe 0%, #e6f2ff 100%);
    border: 1px solid #d6e9fb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .backup-step:hover .retention-tier {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
  }
  
  .retention-duration {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3498db;
    margin-bottom: 8px;
  }
  
  .retention-desc {
    font-size: 1rem;
    color: #7f8c8d;
  }
  
  /* Restore Options */
  .backup-restore-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 25px;
  }
  
  .restore-option {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
  }
  
  .restore-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .restore-option:hover {
    border-color: #3498db;
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  .restore-option:hover::before {
    opacity: 1;
  }
  
  .restore-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f1f8fe 0%, #d6e9fb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: #3498db;
    transition: all 0.3s ease;
  }
  
  .restore-option:hover .restore-icon {
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    transform: scale(1.1);
  }
  
  .restore-option h4 {
    margin: 0 0 12px 0;
    color: #2c3e50;
    font-size: 1.3rem;
  }
  
  .restore-option p {
    margin: 0;
    color: #7f8c8d;
    font-size: 1rem;
  }
  
  /* CTA */
  .backup-cta {
    margin-top: 80px;
  }
  
  .backup-cta-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(52, 152, 219, 0.1);
  }
  
  .backup-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.03) 0%, transparent 100%);
    z-index: 1;
  }
  
  .cta-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }
  
  .icon-halo {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.2);
    animation: pulse 2s infinite;
    z-index: -1;
  }
  
  .cta-content {
    flex-grow: 1;
    min-width: 300px;
    position: relative;
    z-index: 2;
  }
  
  .cta-content h3 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1.6rem;
  }
  
  .cta-content p {
    margin: 0;
    color: #7f8c8d;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  .backup-cta-button {
    padding: 16px 35px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
  }
  
  .backup-cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
  }
  
  .backup-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
  }
  
  .backup-cta-button:hover::after {
    left: 100%;
  }
  
  .backup-cta-button i {
    transition: transform 0.3s ease;
  }
  
  .backup-cta-button:hover i {
    transform: translateX(5px);
  }





  /* Compliance Standards Section */
.compliance-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #333;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden;
}

.compliance-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Label */
.compliance-top-label {
    font-size: 1rem;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.highlight-text {
    color: #3498db;
    font-weight: 700;
}

/* Animated Divider */
.compliance-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.compliance-divider-line {
    width: 80px;
    height: 2px;
    background: rgba(52, 152, 219, 0.2);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.compliance-divider-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrollLine 2s infinite linear;
}

@keyframes scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.compliance-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.2;
}

.title-gradient {
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #3498db;
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.2);
}

.compliance-subtitle {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 60px;
    font-size: 1.1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Compliance Process */
.compliance-process {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    padding-left: 40px;
}

.compliance-process::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #3498db, #3fd1ff);
    z-index: 1;
    border-radius: 2px;
}

.compliance-step {
    display: flex;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.compliance-step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    position: relative;
}

.step-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.compliance-step-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    transition: all 0.3s ease;
    border: 1px solid rgba(52, 152, 219, 0.1);
}

.compliance-step:hover .compliance-step-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.compliance-step-title {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
}

.compliance-step-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    border-radius: 3px;
}

.compliance-step-desc {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Compliance Badges */
.compliance-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.badge-item {
    background: #f8fbfe;
    border: 1px solid #e0e9f5;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.badge-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: #3498db;
}

.badge-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e6f2ff, #cce5ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3498db;
    font-size: 1.2rem;
}

.badge-content h4 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 1rem;
}

.badge-content p {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* Compliance Features */
.compliance-features {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.compliance-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    color: #555;
}

.compliance-features i {
    color: #3498db;
    margin-top: 3px;
    font-size: 1rem;
}

/* Sovereignty Grid */
.sovereignty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.sovereignty-option {
    background: #f8fbfe;
    border: 1px solid #e0e9f5;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.sovereignty-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: #3498db;
}

.flag-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e6f2ff, #cce5ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: #3498db;
    font-size: 1.5rem;
}

.sovereignty-option h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1.1rem;
}

.sovereignty-option p {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* CTA */
.compliance-cta {
    margin-top: 60px;
}

.compliance-cta-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(52, 152, 219, 0.1);
}

.compliance-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.03) 0%, transparent 100%);
    z-index: 1;
}

.cta-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.icon-halo {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.2);
    animation: pulse 2s infinite;
    z-index: -1;
}

.cta-content {
    flex-grow: 1;
    min-width: 250px;
    position: relative;
    z-index: 2;
}

.cta-content h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.4rem;
}

.cta-content p {
    margin: 0;
    color: #7f8c8d;
    font-size: 1rem;
    line-height: 1.6;
}

.compliance-cta-button {
    padding: 14px 30px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.compliance-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
}

.compliance-cta-button i {
    transition: transform 0.3s ease;
}

.compliance-cta-button:hover i {
    transform: translateX(5px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .compliance-process {
        padding-left: 0;
    }
    
    .compliance-process::before {
        display: none;
    }
    
    .compliance-step {
        flex-direction: column;
        gap: 15px;
    }
    
    .compliance-step-number {
        align-self: flex-start;
    }
    
    .compliance-badges {
        grid-template-columns: 1fr;
    }
    
    .compliance-cta-card {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-content {
        min-width: 100%;
    }
    
    .compliance-cta-button {
        width: 100%;
        justify-content: center;
    }
}


#cta-content-live h3{
    color: black;
}

#cta-content-live p{
    color: black;
}


  
  /* Enhanced Mod Library Section */
  .mod-library-section {
    padding: 120px 20px;
    background: #0a0a2e;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden;
  }
  
  .mod-library-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Top Label */
  .mod-library-top-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #bdc3d3;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
  }
  
  /* Animated Divider */
  .mod-library-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .mod-library-divider-line {
    width: 100px;
    height: 3px;
    background: rgba(52, 152, 219, 0.2);
    position: relative;
    overflow: hidden;
    border-radius: 3px;
  }
  
  .mod-library-divider-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrollLine 2s infinite linear;
  }
  
  /* Main Title */
  .mod-library-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  
  .mod-library-subtitle {
    text-align: center;
    color: #bdc3d3;
    margin-bottom: 60px;
    font-size: 1.2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
  
  /* Filter Controls */
  .mod-library-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .mod-library-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .mod-library-filter-group label {
    font-size: 0.9rem;
    color: #bdc3d3;
  }
  
  .mod-library-filter {
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: red;
    font-family: inherit;
    font-size: 1rem;
    min-width: 200px;
    transition: all 0.3s ease;
  }
  
  .mod-library-filter:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  }
  
  .mod-library-search-button {
    padding: 12px 30px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .mod-library-search-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
  }
  


  
  /* Game Filter Chips */
  .game-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
  }
  
  .game-chip {
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #bdc3d3;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .game-chip img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  
  .game-chip.active {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
    color: white;
  }
  
  .game-chip:hover {
    background: rgba(52, 152, 219, 0.1);
    transform: translateY(-2px);
  }
  
  /* Mod Grid */
  .mod-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
  }
  
  .mod-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(52, 152, 219, 0.1);
    position: relative;
  }
  
  .mod-card:hover {
    transform: translateY(-10px);
    background: rgba(52, 152, 219, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(52, 152, 219, 0.3);
  }
  
  .mod-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
  }
  
  .minecraft-badge { background: #5db556; color: white; }
  .rust-badge { background: #c34f4f; color: white; }
  .cs2-badge { background: #f7931a; color: white; }
  .ark-badge { background: #5dadec; color: white; }
  .valheim-badge { background: #8b5a2b; color: white; }
  .gtarp-badge { background: #f39c12; color: white; }
  .other-badge { background: #9b59b6; color: white; }
  
  .mod-image-container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
  }
  
  .mod-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .mod-card:hover .mod-image {
    transform: scale(1.1);
  }
  
  .mod-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .mod-card:hover .mod-overlay {
    opacity: 1;
  }
  
  .mod-preview-button {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .mod-preview-button:hover {
    background: white;
    transform: translateY(-2px);
  }
  
  .mod-content {
    padding: 20px;
  }
  
  .mod-title {
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    color: white;
  }
  
  .mod-description {
    color: #bdc3d3;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    min-height: 60px;
  }
  
  .mod-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
  }
  
  .mod-rating, .mod-downloads {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #bdc3d3;
  }
  
  .mod-rating i {
    color: #f1c40f;
  }
  
  .mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
  }
  
  .mod-tag {
    padding: 4px 10px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 30px;
    font-size: 0.8rem;
    color: #3498db;
  }
  
  .mod-action-button {
    width: 100%;
    padding: 12px;
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border: none;
    border-top: 1px solid rgba(52, 152, 219, 0.2);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .mod-action-button:hover {
    background: rgba(52, 152, 219, 0.2);
    color: white;
  }
  
  /* Game-specific hover effects */
  .minecraft-mod:hover { border-color: rgba(93, 181, 86, 0.3); }
  .rust-mod:hover { border-color: rgba(195, 79, 79, 0.3); }
  .cs2-mod:hover { border-color: rgba(247, 147, 26, 0.3); }
  .ark-mod:hover { border-color: rgba(93, 173, 236, 0.3); }
  .valheim-mod:hover { border-color: rgba(139, 90, 43, 0.3); }
  .gtarp-mod:hover { border-color: rgba(243, 156, 18, 0.3); }
  .other-mod:hover { border-color: rgba(155, 89, 182, 0.3); }
  
  /* Footer */
  .mod-library-footer {
    text-align: center;
    margin-top: 40px;
  }
  
  .mod-library-view-all {
    padding: 15px 35px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
  }
  
  .mod-library-view-all:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
  }
  
  .mod-library-view-all i {
    transition: transform 0.3s ease;
  }
  
  .mod-library-view-all:hover i {
    transform: translateX(5px);
  }
  
  /* Responsive Design */
  @media (max-width: 1200px) {
    .backup-main-title, .mod-library-main-title {
        font-size: 2.5rem;
    }
  }
  
  @media (max-width: 768px) {
    .backup-section, .mod-library-section {
        padding: 80px 20px;
    }
    
    .backup-main-title, .mod-library-main-title {
        font-size: 2rem;
    }
    
    .backup-step {
        flex-direction: column;
        gap: 20px;
    }
    
    .backup-step-number {
        margin-left: -5px;
    }
    
    .backup-process {
        padding-left: 40px;
    }
    
    .mod-library-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mod-library-search-button {
        align-self: stretch;
        justify-content: center;
    }
  }
  
  @media (max-width: 480px) {
    .backup-main-title, .mod-library-main-title {
        font-size: 1.8rem;
    }
    
    .backup-step-content, .backup-cta-card {
        padding: 25px;
    }
    
    .backup-retention-grid, .backup-restore-options {
        grid-template-columns: 1fr;
    }
    
    .game-filter-chips {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    
    .game-chip {
        flex-shrink: 0;
    }
  }





/* ********************************** Migration Guide ******************************** */



  /* Enhanced Server Migration Guide Styles */
.server-migration-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
  }
  
  .migration-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* Header Styles */
  .migration-intro {
    text-align: center;
    margin-bottom: 70px;
  }
  
  .migration-preheading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
  }
  
  .migration-preheading::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: rgba(52, 152, 219, 0.3);
  }
  
  .migration-scroll-line {
    width: 150px;
    height: 2px;
    background: rgba(52, 152, 219, 0.2);
    margin: 0 auto 25px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }
  
  .scroll-line-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    animation: scrollLine 2.5s infinite linear;
  }
  
  @keyframes scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  .migration-heading {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.2;
  }
  
  .migration-subheading {
    color: #7f8c8d;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
  }
  
  /* Timeline Styles */
  .migration-timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 70px;
  }
  
  .migration-timeline::before {
    content: "";
    position: absolute;
    left: 39px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #3498db, #3fd1ff);
    z-index: 1;
    border-radius: 3px;
  }
  
  .timeline-step {
    display: flex;
    gap: 30px;
    position: relative;
    z-index: 2;
  }
  
  .step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  
  .step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
    position: relative;
    z-index: 2;
  }
  
  .step-connector {
    flex-grow: 1;
    width: 3px;
    background: linear-gradient(to bottom, #3fd1ff, #3498db);
    border-radius: 3px;
  }
  
  .step-card {
    background: white;
    border-radius: 15px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(52, 152, 219, 0.1);
    position: relative;
    overflow: hidden;
    
  }
  
  .step-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #3498db, #3fd1ff);
  }
  
  .step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(52, 152, 219, 0.3);
  }
  
  .step-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f1f8fe 0%, #d6e9fb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #3498db;
    margin-bottom: 25px;
    position: relative;
  }
  
  .icon-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.2);
    animation: pulse 2s infinite;
    z-index: -1;
  }
  
  @keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { opacity: 0; }
  }
  
  .step-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
    
  }

  #step-title-common{
    color: black;
  }
  
  .step-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #3fd1ff);
    border-radius: 3px;
  }
  
  .step-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
  }
  
  .step-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  
  .step-features i {
    color: #3498db;
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
  }
  
  .step-features span {
    color: #555;
    line-height: 1.6;
  }
  
  .step-tip {
    background: rgba(52, 152, 219, 0.1);
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #2c3e50;
  }
  
  .step-tip i {
    color: #f39c12;
  }
  
  /* Assistance CTA */
  .migration-assistance {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(52, 152, 219, 0.1);
  }
  
  .migration-assistance::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.03) 0%, transparent 100%);
    z-index: 1;
  }
  
  .assistance-card {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
  }
  
  .assistance-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    position: relative;
    flex-shrink: 0;
  }
  
  .icon-halo {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.2);
    animation: pulse 2s infinite;
    z-index: -1;
  }
  
  .assistance-content {
    flex-grow: 1;
    min-width: 300px;
  }
  
  .assistance-content h3 {
    font-size: 1.6rem;
    color: #2c3e50;
    margin: 0 0 10px 0;
  }
  
  .assistance-content p {
    color: #7f8c8d;
    margin: 0;
    line-height: 1.6;
    font-size: 1.1rem;
  }
  
  .assistance-button {
    padding: 16px 35px;
    background: linear-gradient(135deg, #3498db, #3fd1ff);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
    white-space: nowrap;
  }
  
  .assistance-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
  }
  
  .assistance-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
  }
  
  .assistance-button:hover::after {
    left: 100%;
  }
  
  .assistance-button i {
    transition: transform 0.3s ease;
  }
  
  .assistance-button:hover i {
    transform: translateX(5px);
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .migration-heading {
        font-size: 2.4rem;
    }
  }
  
  @media (max-width: 768px) {
    .server-migration-section {
        padding: 80px 20px;
    }
    
    .migration-timeline {
        padding-left: 40px;
    }
    
    .timeline-step {
        flex-direction: column;
        gap: 20px;
    }
    
    .step-indicator {
        flex-direction: row;
        align-items: center;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        margin-left: -5px;
    }
    
    .step-connector {
        width: 100%;
        height: 3px;
    }
    
    .assistance-card {
        flex-direction: column;
        text-align: center;
    }
    
    .assistance-button {
        width: 100%;
        justify-content: center;
    }
  }
  
  @media (max-width: 480px) {
    .migration-heading {
        font-size: 2rem;
    }
    
    .migration-subheading {
        font-size: 1.1rem;
    }
    
    .step-card {
        padding: 25px;
    }
    
    .step-title {
        font-size: 1.3rem;
    }
    
    .migration-assistance {
        padding: 30px;
    }
  }











/* Community Tools Section Styles */
.community-tools-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e8edf2 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
  }
  
  .community-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }
  
  /* Header Styles */
  .community-header {
    text-align: center;
    margin-bottom: 70px;
  }
  
  .community-pretitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: #5865F2;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
  }
  
  .community-pretitle::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: rgba(88, 101, 242, 0.3);
  }
  
  .community-scroll-line {
    width: 150px;
    height: 2px;
    background: rgba(88, 101, 242, 0.2);
    margin: 0 auto 25px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }
  
  .scroll-line-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #5865F2, transparent);
    animation: scrollLine 2.5s infinite linear;
  }
  
  @keyframes scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  .community-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 15px;
    line-height: 1.2;
  }
  
  .community-subtitle {
    color: #4a5568;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
  }
  
  /* Features Grid */
  .community-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
  }
  
  .community-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
  }
  
  .community-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }
  
  .card-icon-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    position: relative;
  }
  
  .icon-halo {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(88, 101, 242, 0.1);
    animation: pulse 2s infinite;
    z-index: -1;
  }
  
  @keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { opacity: 0; }
  }
  
  .discord-card .card-icon-container {
    background: rgba(88, 101, 242, 0.1);
    color: #5865F2;
  }
  
  .admin-card .card-icon-container {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
  }
  
  .management-card .card-icon-container {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
  }
  
  .card-title {
    font-size: 1.5rem;
    color: #1a202c;
    margin: 0 0 25px 0;
    position: relative;
    padding-bottom: 15px;
  }
  
  .card-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #5865F2, #3498db);
    border-radius: 3px;
  }
  
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
  }
  
  .feature-list li {
    padding: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }
  
  .feature-check {
    color: #2ecc71;
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
  }
  
  .feature-list span {
    color: #4a5568;
    line-height: 1.6;
  }
  
  .card-action-link {
    color: #5865F2;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
  }
  
  .card-action-link:hover {
    color: #4752C4;
    gap: 12px;
  }
  
  .card-action-link i {
    transition: transform 0.3s ease;
  }
  
  .card-action-link:hover i {
    transform: translateX(5px);
  }
  
  /* CTA Section */
  .community-cta-section {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
  }
  
  .cta-card {
    position: relative;
    z-index: 2;
  }
  
  .cta-content-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  
  .cta-text-content {
    flex: 1;
    min-width: 300px;
  }
  
  .cta-heading {
    font-size: 1.6rem;
    color: #1a202c;
    margin: 0 0 10px 0;
  }
  
  .cta-description {
    color: #4a5568;
    margin: 0;
    line-height: 1.6;
    font-size: 1.1rem;
  }
  
  .cta-action-button {
    padding: 16px 35px;
    background: linear-gradient(135deg, #5865F2, #4752C4);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(88, 101, 242, 0.3);
  }
  
  .button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
  }
  
  .cta-action-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
  }
  
  .cta-action-button:hover .button-shine {
    left: 100%;
  }
  
  .cta-action-button i {
    transition: transform 0.3s ease;
  }
  
  .cta-action-button:hover i {
    transform: translateX(5px);
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .community-main-title {
      font-size: 2.4rem;
    }
  }
  
  @media (max-width: 768px) {
    .community-tools-section {
      padding: 80px 0;
    }
    
    .community-features-grid {
      grid-template-columns: 1fr;
    }
    
    .community-card {
      padding: 30px;
    }
    
    .cta-content-wrapper {
      flex-direction: column;
      text-align: center;
    }
    
    .cta-action-button {
      width: 100%;
      justify-content: center;
    }
  }
  
  @media (max-width: 480px) {
    .community-main-title {
      font-size: 2rem;
    }
    
    .community-subtitle {
      font-size: 1.1rem;
    }
    
    .community-cta-section {
      padding: 30px;
    }
  }



/* *************************************** Technical Specifications *********************************** */



  /* Technical Specifications Section */
.tech-specs-section {
    background: linear-gradient(to bottom, #f9fbfd 0%, #f0f4f8 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
  }
  
  .tech-specs-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }
  
  /* Header Styles */
  .tech-specs-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
  }
  
  .tech-specs-badge {
    display: inline-block;
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  
  .tech-specs-divider {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.5), rgba(79, 70, 229, 0.1));
    margin: 0 auto 25px;
    position: relative;
    overflow: hidden;
  }
  
  .tech-divider-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #4f46e5, transparent);
    animation: techDividerScroll 3s infinite linear;
  }
  
  @keyframes techDividerScroll {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  .tech-specs-heading {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 15px;
    line-height: 1.2;
    background: linear-gradient(to right, #4f46e5, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .tech-specs-subhead {
    color: #64748b;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
  }
  
  /* Specifications Grid */
  .tech-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
  }
  
  .tech-spec-card {
    background: white;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    border: 1px solid rgba(226, 232, 240, 0.7);
    position: relative;
    overflow: hidden;
  }
  
  .tech-spec-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.3);
  }
  
  .tech-spec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
  }
  
  /* Card Specific Styles */
  .cpu-spec-card::before { background: linear-gradient(90deg, #4f46e5, #6366f1); }
  .storage-spec-card::before { background: linear-gradient(90deg, #10b981, #34d399); }
  .gpu-spec-card::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
  .codec-spec-card::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
  .network-spec-card::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
  .memory-spec-card::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
  
  .tech-spec-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    position: relative;
    color: white;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
  }
  
  .cpu-spec-card .tech-spec-icon { background: linear-gradient(135deg, #4f46e5, #6366f1); }
  .storage-spec-card .tech-spec-icon { background: linear-gradient(135deg, #10b981, #34d399); }
  .gpu-spec-card .tech-spec-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
  .codec-spec-card .tech-spec-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
  .network-spec-card .tech-spec-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
  .memory-spec-card .tech-spec-icon { background: linear-gradient(135deg, #ec4899, #f472b6); }
  
  .tech-icon-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: inherit;
    animation: techIconPulse 2s infinite;
    z-index: -1;
    opacity: 0.7;
  }
  
  @keyframes techIconPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { opacity: 0; }
  }
  
  .tech-spec-title {
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0 0 25px 0;
    font-weight: 700;
    position: relative;
  }
  
  .tech-spec-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 40px;
    height: 3px;
    background: currentColor;
    border-radius: 3px;
  }
  
  /* CPU Benchmarks */
  .cpu-benchmarks {
    margin-bottom: 20px;
  }
  
  .benchmark-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .cpu-model {
    width: 150px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
  }
  
  .benchmark-bar {
    flex: 1;
    height: 20px;
    background: #f1f5f9;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }
  
  .benchmark-fill {
    height: 100%;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 1s ease-out;
  }
  
  .cpu-spec-card .benchmark-fill {
    background: linear-gradient(90deg, #6366f1, #4f46e5);
  }
  
  .benchmark-score {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: white;
    font-weight: 600;
  }
  
  /* Storage Metrics */
  .storage-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
  }
  
  .storage-metric {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
  }
  
  .storage-spec-card:hover .storage-metric {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  
  .metric-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 5px;
  }
  
  .metric-label {
    font-size: 0.8rem;
    color: #64748b;
  }

  #metric-value{
    color: black;
  }
  


  /* GPU Comparison */
  .gpu-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .gpu-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .gpu-spec-card:hover .gpu-card {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  
  .gpu-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-bottom-left-radius: 8px;
  }
  
  .nvidia-card .gpu-badge {
    background: #76b900;
    color: white;
  }
  
  .amd-card .gpu-badge {
    background: #ED1C24;
    color: white;
  }
  
  .gpu-model {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0 0 15px 0;
    font-weight: 700;
  }
  
  .gpu-features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .gpu-features li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #475569;
  }
  
  .gpu-features li i {
    color: #4f46e5;
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 0.8rem;
  }
  
  /* Codec Table */
  .codec-table {
    border-radius: 10px;
    overflow: hidden;
  }
  
  .codec-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 12px 15px;
    font-size: 0.9rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease;
  }
  
  .codec-row:last-child {
    border-bottom: none;
  }
  
  .codec-row:hover {
    background: #f1f5f9;
  }
  
  .codec-name {
    font-weight: 600;
    color: #1e293b;
  }
  
  .codec-res {
    text-align: center;
    color: #64748b;
  }
  
  .codec-bitrate {
    text-align: right;
    color: #3b82f6;
    font-weight: 500;
  }
  
  /* Network Stats */
  .network-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .network-stat {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
  }
  
  .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #8b5cf6;
    margin-bottom: 5px;
  }
  
  .stat-label {
    font-size: 0.8rem;
    color: #64748b;
  }
  
  .network-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .network-feature {
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .network-feature i {
    color: #8b5cf6;
  }
  
  /* Memory Details */
  .memory-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .memory-spec {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
  }
  
  .spec-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ec4899;
    margin-bottom: 5px;
  }
  
  .spec-label {
    font-size: 0.8rem;
    color: #64748b;
  }
  
  .memory-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .memory-feature {
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .memory-feature i {
    color: #ec4899;
  }
  
  .tech-spec-note {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 20px;
    font-style: italic;
    text-align: center;
  }
  
  /* Responsive Design */
  @media (max-width: 1200px) {
    .tech-specs-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
  }
  
  @media (max-width: 768px) {
    .tech-specs-section {
      padding: 80px 0;
    }
    
    .tech-specs-heading {
      font-size: 2.2rem;
    }
    
    .gpu-comparison {
      grid-template-columns: 1fr;
    }
    
    .network-features, .memory-features {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 480px) {
    .tech-specs-heading {
      font-size: 1.8rem;
    }
    
    .tech-specs-subhead {
      font-size: 1rem;
    }
    
    .tech-spec-card {
      padding: 25px;
    }
    
    .storage-metrics, .network-stats, .memory-details {
      grid-template-columns: 1fr;
    }
    
    .codec-row {
      grid-template-columns: 1fr 1fr;
    }
    
    .codec-bitrate {
      display: none;
    }
  }
  
  /* Network and Memory Card Styles */
  .network-features,
  .memory-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 25px;
  }
  
  .network-feature,
  .memory-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.7);
    transition: all 0.3s ease;
  }
  
  .tech-spec-card:hover .network-feature,
  .tech-spec-card:hover .memory-feature {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: rgba(79, 70, 229, 0.2);
  }
  
  .feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
  }
  
  .network-spec-card .feature-icon {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  }
  
  .memory-spec-card .feature-icon {
    background: linear-gradient(135deg, #ec4899, #f472b6);
  }
  
  .feature-content {
    flex: 1;
  }
  
  .feature-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 3px;
  }
  
  .network-spec-card .feature-value {
    color: #8b5cf6;
  }
  
  .memory-spec-card .feature-value {
    color: #ec4899;
  }
  
  .feature-label {
    font-size: 0.85rem;
    color: #64748b;
  }
  
  .tech-spec-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
  }
  
  .tech-badge {
    background: white;
    border-radius: 50px;
    padding: 8px 15px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }
  
  .network-spec-card .tech-badge {
    color: #6d28d9;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
  }
  
  .memory-spec-card .tech-badge {
    color: #db2777;
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.2);
  }
  
  .tech-spec-card:hover .tech-badge {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .network-features,
    .memory-features {
      grid-template-columns: 1fr;
    }
    
    .tech-spec-note {
      flex-direction: column;
      align-items: center;
    }
    
    .tech-badge {
      width: 100%;
      justify-content: center;
    }
  }




/* ************************************** Streaming Servers ************************************* */


  /* Streaming Servers Section */
.streaming-servers-section {
    /* background: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%); */
    background: linear-gradient(135deg, #000053, #000035);
    padding: 100px 0;
    color: white;
    position: relative;
    overflow: hidden;
  }
  
  .streaming-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }
  
  /* Header Styles */
  .streaming-header {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .streaming-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  
  .streaming-divider {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.5), rgba(99, 102, 241, 0.1));
    margin: 0 auto 25px;
    position: relative;
    overflow: hidden;
  }
  
  .streaming-divider-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
    animation: streamingDividerScroll 3s infinite linear;
  }
  
  @keyframes streamingDividerScroll {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  .streaming-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    background: linear-gradient(to right, #818cf8, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .streaming-subtitle {
    color: #cbd5e1;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
  }
  
  /* Streaming Features Grid */
  .streaming-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
  }
  
  .streaming-column {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 16px;
    padding: 40px 30px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .streaming-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
  }
  
  .streaming-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 25px;
    position: relative;
    color: white;
    background: linear-gradient(135deg, #6366f1, #818cf8);
  }
  
  .video-streaming .streaming-icon {
    background: linear-gradient(135deg, #ec4899, #f472b6);
  }
  
  .audio-streaming .streaming-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
  }
  
  .protocols-column .streaming-icon {
    background: linear-gradient(135deg, #10b981, #34d399);
  }
  
  .icon-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: streamingIconPulse 2s infinite;
    z-index: -1;
    opacity: 0.7;
  }
  
  @keyframes streamingIconPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { opacity: 0; }
  }
  
  .streaming-column h3 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 30px;
    color: white;
    position: relative;
    padding-bottom: 15px;
  }
  
  .streaming-column h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    border-radius: 3px;
  }
  
  .video-streaming h3::after {
    background: linear-gradient(90deg, #ec4899, #f472b6);
  }
  
  .audio-streaming h3::after {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
  }
  
  .protocols-column h3::after {
    background: linear-gradient(90deg, #10b981, #34d399);
  }
  
  /* Video/Audio Specs */
  .streaming-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
  }
  
  .spec-item {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(100, 116, 139, 0.2);
  }
  
  .spec-value {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1;
  }
  
  .video-streaming .spec-value {
    color: #f472b6;
  }
  
  .audio-streaming .spec-value {
    color: #fbbf24;
  }
  
  .spec-label {
    font-size: 0.8rem;
    color: #cbd5e1;
    opacity: 0.8;
  }
  
  /* Benefits List */
  .streaming-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .streaming-benefits li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #e2e8f0;
  }
  
  .streaming-benefits li i {
    color: #818cf8;
    position: absolute;
    left: 0;
    top: 3px;
  }
  
  .video-streaming .streaming-benefits li i {
    color: #f472b6;
  }
  
  .audio-streaming .streaming-benefits li i {
    color: #fbbf24;
  }
  
  /* Protocol Grid */
  .protocol-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .protocol-card {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(100, 116, 139, 0.2);
    transition: all 0.3s ease;
  }
  
  .protocol-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(16, 185, 129, 0.5);
  }
  
  .protocol-card i {
    font-size: 1.8rem;
    color: #34d399;
    margin-bottom: 10px;
    display: block;
  }
  
  .protocol-card h4 {
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    color: white;
  }
  
  .protocol-card p {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin: 0;
  }
  
  /* CTA Section */
  .streaming-cta {
    background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .cta-content h3 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: white;
  }
  
  .cta-content p {
    color: #cbd5e1;
    margin: 0;
    font-size: 1.1rem;
  }
  
  .cta-buttons {
    display: flex;
    gap: 15px;
  }
  
  .cta-button {
    background: linear-gradient(90deg, #6366f1, #818cf8);
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
  }
  
  .cta-button-outline {
    background: transparent;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #818cf8;
  }
  
  .cta-button-outline:hover {
    background: rgba(129, 140, 248, 0.1);
    transform: translateY(-2px);
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .streaming-title {
        font-size: 2.4rem;
    }
    
    .streaming-specs {
        grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px) {
    .streaming-servers-section {
        padding: 80px 0;
    }
    
    .streaming-features {
        grid-template-columns: 1fr;
    }
    
    .protocol-grid {
        grid-template-columns: 1fr;
    }
    
    .streaming-cta {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .cta-buttons {
        width: 100%;
        flex-direction: column;
    }
  }
  
  @media (max-width: 480px) {
    .streaming-title {
        font-size: 2rem;
    }
    
    .streaming-subtitle {
        font-size: 1.1rem;
    }
    
    .streaming-column {
        padding: 30px 20px;
    }
    
    .cta-content h3 {
        font-size: 1.5rem;
    }
  }
  
  

/* ***************************************** Real-World Benchmarks ***************************************** */


  /* Real-World Benchmarks Section - HPC Optimized */
.hpc-benchmarks-section {
    padding: 120px 20px;
    background: linear-gradient(135deg, #000428, #070b34);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border-bottom: 1px solid rgba(0, 150, 255, 0.1);
}

.hpc-benchmarks-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.hpc-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.hpc-particle-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(0, 150, 255, 0.08) 0%, transparent 70%);
    animation: hpc-float 9s ease-in-out infinite;
}

.hpc-particle-2 {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
    background: radial-gradient(circle, rgba(100, 255, 218, 0.05) 0%, transparent 70%);
    animation: hpc-float 7s ease-in-out infinite 2s;
}

@keyframes hpc-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(3deg); }
}

/* Top Label */
.hpc-benchmarks-top-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #a0b3d6;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.hpc-highlight-text {
    color: #00c6ff;
    text-shadow: 0 0 12px rgba(0, 198, 255, 0.6);
}

/* Scrolling Line */
.hpc-scroll-line {
    width: 200px;
    height: 2px;
    background: rgba(0, 150, 255, 0.3);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.hpc-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #00c6ff, transparent);
    animation: hpc-scrollLine 2.5s infinite linear;
}

@keyframes hpc-scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.hpc-benchmarks-main-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.hpc-title-gradient {
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.hpc-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #00c6ff;
    text-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
}

.hpc-benchmarks-main-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #00c6ff, transparent);
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Benchmark Cards Grid */
.hpc-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.hpc-benchmark-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 150, 255, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    z-index: 1;
}

.hpc-benchmark-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hpc-benchmark-card:hover {
    transform: translateY(-10px);
    background: rgba(0, 150, 255, 0.05);
    border-color: rgba(0, 150, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hpc-benchmark-card:hover::before {
    opacity: 1;
}

.hpc-card-bg-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 150, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.hpc-benchmark-card:hover .hpc-card-bg-accent {
    opacity: 1;
}

.hpc-hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.7s;
    z-index: -1;
}

.hpc-benchmark-card:hover .hpc-hover-shine {
    left: 100%;
}

/* Benchmark Icon */
.hpc-benchmark-icon {
    font-size: 2.5rem;
    color: #00c6ff;
    margin-bottom: 25px;
    transition: all 0.4s ease;
    display: inline-block;
    position: relative;
}

.hpc-benchmark-icon::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(0, 150, 255, 0.2);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.4s ease;
}

.hpc-benchmark-card:hover .hpc-benchmark-icon {
    transform: scale(1.2);
    text-shadow: 0 0 20px rgba(0, 198, 255, 0.7);
}

.hpc-benchmark-card:hover .hpc-benchmark-icon::after {
    opacity: 1;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
}

/* Benchmark Title */
.hpc-benchmark-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: #fff;
    position: relative;
    font-weight: 700;
}

.hpc-benchmark-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    transition: all 0.4s ease;
}

.hpc-benchmark-card:hover .hpc-benchmark-title::after {
    width: 80px;
}

/* Benchmark Metrics */
.hpc-benchmark-metric {
    margin-bottom: 25px;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #a0b3d6;
}

.metric-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    background: rgba(0, 150, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    min-width: 80px;
    text-align: center;
}

.metric-comparison {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.85rem;
}

.vs-label {
    color: #7a8fb5;
}

.diff-value {
    color: #64ffaa;
    font-weight: 700;
}

.metric-bar {
    height: 6px;
    background: rgba(0, 150, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border-radius: 3px;
}

/* CTA Section */
.hpc-benchmarks-cta {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hpc-benchmarks-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 150, 255, 0.3);
}

.hpc-button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
}

.hpc-benchmarks-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 150, 255, 0.4);
}

.hpc-benchmarks-button:hover .hpc-button-shine {
    left: 100%;
}

.hpc-button-icon {
    transition: transform 0.4s ease;
}

.hpc-benchmarks-button:hover .hpc-button-icon {
    transform: translateX(5px);
}

.hpc-benchmarks-note {
    margin-top: 25px;
    color: #a0b3d6;
    font-size: 1rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.hpc-note-flare {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 150, 255, 0.2), transparent, rgba(0, 150, 255, 0.2));
    transform: translateY(-50%) skewX(-20deg);
    z-index: -1;
    opacity: 0.3;
}

.hpc-benchmarks-note strong {
    color: #64ffaa;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hpc-benchmarks-main-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hpc-benchmarks-section {
        padding: 80px 20px;
    }
    
    .hpc-benchmarks-main-title {
        font-size: 2rem;
    }
    
    .hpc-benchmarks-grid {
        grid-template-columns: 1fr;
    }
    
    .hpc-benchmark-card {
        padding: 30px 20px;
    }
    
    .hpc-benchmarks-button {
        padding: 15px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hpc-benchmarks-main-title {
        font-size: 1.8rem;
    }
    
    .hpc-benchmarks-top-label {
        font-size: 1.1rem;
    }
    
    .metric-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .metric-value {
        align-self: flex-end;
    }
}








/* ***************************************** Performance Guarantee ***************************** */


/* Performance Guarantee Section */
.perf-guarantee-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #0a0a2e, #1a1a4a);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.perf-guarantee-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.perf-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.perf-particle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(0, 255, 200, 0.1) 0%, transparent 70%);
}

.perf-particle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    background: radial-gradient(circle, rgba(100, 100, 255, 0.1) 0%, transparent 70%);
}

/* Top Label */
.perf-top-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #a0a8c0;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
}

.perf-highlight {
    color: #00ffc8;
    text-shadow: 0 0 10px rgba(0, 255, 200, 0.3);
}

/* Scrolling Line */
.perf-scroll-line {
    width: 180px;
    height: 2px;
    background: rgba(0, 255, 200, 0.2);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.perf-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #00ffc8, transparent);
    animation: perfScrollLine 3s infinite linear;
}

@keyframes perfScrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.perf-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 60px;
    text-align: center;
    line-height: 1.2;
}

.perf-title-gradient {
    background: linear-gradient(90deg, #00ffc8, #00a8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.perf-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #00ffc8;
    text-shadow: 0 0 20px rgba(0, 255, 200, 0.2);
}

/* Guarantee Grid */
.perf-guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.perf-guarantee-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 200, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    backdrop-filter: blur(5px);
}

.perf-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 255, 200, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.perf-guarantee-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 255, 200, 0.3);
}

.perf-guarantee-card:hover .perf-card-bg {
    opacity: 1;
}

.perf-hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.7s;
    z-index: -1;
}

.perf-guarantee-card:hover .perf-hover-shine {
    left: 100%;
}

/* Card Content */
.perf-guarantee-icon {
    font-size: 2.5rem;
    color: #00ffc8;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.perf-guarantee-card:hover .perf-guarantee-icon {
    transform: scale(1.2);
    text-shadow: 0 0 20px rgba(0, 255, 200, 0.5);
}

.perf-guarantee-title {
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: #fff;
    position: relative;
    font-weight: 700;
}

.perf-guarantee-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #00ffc8, #00a8ff);
    transition: all 0.4s ease;
}

.perf-guarantee-card:hover .perf-guarantee-title::after {
    width: 80px;
}

/* Benchmark List */
.perf-benchmark-list {
    margin: 30px 0;
}

.perf-benchmark-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 255, 200, 0.2);
}

.perf-benchmark-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.perf-metric {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00ffc8;
    min-width: 140px;
    display: inline-block;
}

.perf-desc {
    color: #b0b8d0;
    font-size: 1rem;
    flex-grow: 1;
}

/* Guarantee Badge */
.perf-guarantee-badge {
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid rgba(0, 255, 200, 0.3);
    padding: 12px 20px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.perf-guarantee-card:hover .perf-guarantee-badge {
    background: rgba(0, 255, 200, 0.2);
    transform: translateY(-3px);
}

/* Verification List */
.perf-verification-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.perf-verification-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    color: #b0b8d0;
}

.perf-verification-list i {
    position: absolute;
    left: 0;
    color: #00ffc8;
}

.perf-tech-specs {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.perf-tech-specs span {
    background: rgba(0, 168, 255, 0.1);
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 168, 255, 0.2);
}

/* CTA */
.perf-cta {
    text-align: center;
}

.perf-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 40px;
    background: linear-gradient(90deg, #00ffc8, #00a8ff);
    color: #0a0a2e;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 255, 200, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.perf-button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.7s;
}

.perf-cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 255, 200, 0.4);
}

.perf-cta-button:hover .perf-button-shine {
    left: 100%;
}

.perf-button-icon {
    transition: transform 0.4s ease;
}

.perf-cta-button:hover .perf-button-icon {
    transform: translateX(5px);
}

.perf-disclaimer {
    margin-top: 25px;
    color: #a0a8c0;
    font-size: 0.95rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.perf-disclaimer a {
    color: #00ffc8;
    text-decoration: none;
}

.perf-disclaimer-flare {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 255, 200, 0.1), transparent, rgba(0, 255, 200, 0.1));
    transform: translateY(-50%) skewX(-20deg);
    z-index: -1;
    opacity: 0.3;
}

/* Responsive */
@media (max-width: 768px) {
    .perf-guarantee-grid {
        grid-template-columns: 1fr;
    }
    
    .perf-main-title {
        font-size: 2.2rem;
    }
    
    .perf-guarantee-card {
        padding: 30px;
    }
    
    .perf-benchmark-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .perf-metric {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .perf-main-title {
        font-size: 1.8rem;
    }
    
    .perf-top-label {
        font-size: 1rem;
    }
    
    .perf-cta-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}





/* ******************************** Free PoC Testing ********************************* */


/* Free PoC Testing Section */
.poc-testing-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #0a0a2e, #1a1a4a);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.poc-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.poc-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.poc-particle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.1) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
}

.poc-particle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Top Label */
.poc-top-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #a0a8c0;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
}

.poc-highlight {
    color: #ff69b4;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}

/* Scrolling Line */
.poc-scroll-line {
    width: 180px;
    height: 2px;
    background: rgba(255, 105, 180, 0.2);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.poc-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #ff69b4, transparent);
    animation: pocScrollLine 3s infinite linear;
}

@keyframes pocScrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.poc-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 60px;
    text-align: center;
    line-height: 1.2;
}

.poc-title-gradient {
    background: linear-gradient(90deg, #ff69b4, #8a2be2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.poc-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #ff69b4;
    text-shadow: 0 0 20px rgba(255, 105, 180, 0.2);
}

/* Content Box */
.poc-content-box {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
}

.poc-left-col {
    flex: 1;
}

.poc-right-col {
    flex: 1;
}

/* Features */
.poc-feature {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 105, 180, 0.1);
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.poc-feature:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 105, 180, 0.3);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.1);
}

.poc-feature-icon {
    font-size: 1.8rem;
    color: #ff69b4;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.poc-feature:hover .poc-feature-icon {
    transform: scale(1.2);
    text-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
}

.poc-feature-title {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #fff;
    position: relative;
}

.poc-feature-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #ff69b4, #8a2be2);
    transition: all 0.3s ease;
}

.poc-feature:hover .poc-feature-title::after {
    width: 60px;
}

.poc-feature-desc {
    color: #b0b8d0;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Timeline */
.poc-timeline {
    position: relative;
    padding: 20px 0;
}

.poc-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, #ff69b4, #8a2be2);
}

.poc-timeline-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 30px;
}

.poc-timeline-item:last-child {
    margin-bottom: 0;
}

.poc-timeline-badge {
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 105, 180, 0.1);
    border: 2px solid #ff69b4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ff69b4;
    transition: all 0.3s ease;
}

.poc-timeline-item.active .poc-timeline-badge {
    background: rgba(255, 105, 180, 0.2);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
}

.poc-timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 105, 180, 0.1);
    transition: all 0.3s ease;
}

.poc-timeline-item.active .poc-timeline-content {
    border-color: rgba(255, 105, 180, 0.3);
    background: rgba(255, 105, 180, 0.05);
}

.poc-timeline-content h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #fff;
}

.poc-timeline-content p {
    color: #b0b8d0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* CTA Section */
.poc-cta-section {
    max-width: 800px;
    margin: 0 auto;
}

.poc-cta-card {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.1), rgba(138, 43, 226, 0.1));
    border-radius: 12px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 105, 180, 0.2);
    backdrop-filter: blur(5px);
}

.poc-hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.7s;
    z-index: -1;
}

.poc-cta-card:hover .poc-hover-shine {
    left: 100%;
}

.poc-cta-content {
    max-width: 500px;
}

.poc-cta-title {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #fff;
    background: linear-gradient(90deg, #ff69b4, #8a2be2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.poc-cta-desc {
    color: #b0b8d0;
    margin-bottom: 25px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.poc-cta-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.poc-cta-form input {
    flex: 1;
    min-width: 250px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 105, 180, 0.3);
    border-radius: 6px;
    padding: 15px 20px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.poc-cta-form input:focus {
    outline: none;
    border-color: #ff69b4;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}

.poc-cta-form button {
    background: linear-gradient(90deg, #ff69b4, #8a2be2);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.poc-cta-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 105, 180, 0.3);
}

.poc-cta-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

/* Responsive */
@media (max-width: 992px) {
    .poc-content-box {
        flex-direction: column;
    }
    
    .poc-timeline::before {
        left: 19px;
    }
}

@media (max-width: 768px) {
    .poc-main-title {
        font-size: 2.2rem;
    }
    
    .poc-cta-card {
        padding: 30px;
    }
    
    .poc-cta-title {
        font-size: 1.5rem;
    }
    
    .poc-cta-form {
        flex-direction: column;
    }
    
    .poc-cta-form button {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .poc-main-title {
        font-size: 1.8rem;
    }
    
    .poc-top-label {
        font-size: 1rem;
    }
    
    .poc-feature {
        padding: 25px;
    }
    
    .poc-timeline-item {
        padding-left: 50px;
    }
    
    .poc-timeline-badge {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}








/* Disaster Recovery Section */
.dr-section {
    padding: 120px 20px;
    background: linear-gradient(135deg, #000a2e, #0a0433);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.dr-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.dr-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.dr-particle-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(100, 255, 218, 0.08) 0%, transparent 70%);
    animation: dr-float 9s ease-in-out infinite;
}

.dr-particle-2 {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
    background: radial-gradient(circle, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
    animation: dr-float 7s ease-in-out infinite 2s;
}

@keyframes dr-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(3deg); }
}

/* Top Label */
.dr-top-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #a0b3d6;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.dr-highlight-text {
    color: #64ffda;
    text-shadow: 0 0 12px rgba(100, 255, 218, 0.6);
}

/* Scrolling Line */
.dr-scroll-line {
    width: 200px;
    height: 2px;
    background: rgba(100, 255, 218, 0.3);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.dr-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #64ffda, transparent);
    animation: dr-scrollLine 2.5s infinite linear;
}

@keyframes dr-scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.dr-main-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.dr-title-gradient {
    background: linear-gradient(90deg, #64ffda, #00c6ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.dr-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #64ffda;
    text-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}

.dr-main-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #64ffda, transparent);
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Features Grid */
.dr-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.dr-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(100, 255, 218, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    z-index: 1;
}

.dr-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #64ffda, #00c6ff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dr-feature-card:hover {
    transform: translateY(-10px);
    background: rgba(100, 255, 218, 0.05);
    border-color: rgba(100, 255, 218, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.dr-feature-card:hover::before {
    opacity: 1;
}

.dr-card-bg-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(100, 255, 218, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.dr-feature-card:hover .dr-card-bg-accent {
    opacity: 1;
}

.dr-hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.7s;
    z-index: -1;
}

.dr-feature-card:hover .dr-hover-shine {
    left: 100%;
}

/* Feature Icon */
.dr-feature-icon {
    font-size: 2.5rem;
    color: #64ffda;
    margin-bottom: 25px;
    transition: all 0.4s ease;
    display: inline-block;
    position: relative;
}

.dr-feature-icon::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(100, 255, 218, 0.2);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.4s ease;
}

.dr-feature-card:hover .dr-feature-icon {
    transform: scale(1.2);
    text-shadow: 0 0 20px rgba(100, 255, 218, 0.7);
}

.dr-feature-card:hover .dr-feature-icon::after {
    opacity: 1;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
}

/* Feature Title */
.dr-feature-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    font-weight: 700;
}

.dr-feature-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #64ffda, #00c6ff);
    transition: all 0.4s ease;
}

.dr-feature-card:hover .dr-feature-title::after {
    width: 80px;
}

/* Feature Description */
.dr-feature-desc {
    color: #bdc3d3;
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 25px;
    min-height: 60px;
}

/* Feature Specs */
.dr-feature-specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.dr-spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #64ffda;
    background: rgba(100, 255, 218, 0.1);
    padding: 8px 15px;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 1px solid rgba(100, 255, 218, 0.2);
}

.dr-feature-card:hover .dr-spec-item {
    background: rgba(100, 255, 218, 0.2);
    transform: translateY(-3px);
}

.dr-spec-item i {
    font-size: 0.9rem;
}

/* Metric Display */
.dr-metric-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.dr-metric {
    background: rgba(0, 198, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(0, 198, 255, 0.2);
    transition: all 0.3s ease;
}

.dr-feature-card:hover .dr-metric {
    background: rgba(0, 198, 255, 0.2);
    transform: translateY(-3px);
}

.dr-metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #00c6ff;
    margin-bottom: 5px;
}

.dr-metric-label {
    font-size: 0.85rem;
    color: #a0b3d6;
}

/* Backup Options */
.dr-backup-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.dr-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dr-feature-card:hover .dr-option {
    background: rgba(255, 255, 255, 0.1);
}

.dr-option-badge {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.dr-option-premium {
    background: linear-gradient(135deg, #ff6b6b, #ffa3a3);
}

.dr-option-enterprise {
    background: linear-gradient(135deg, #64ffda, #00c6ff);
}

.dr-option-custom {
    background: linear-gradient(135deg, #ffa502, #ffbe76);
}

/* DR Assurance */
.dr-assurance {
    background: rgba(100, 255, 218, 0.05);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 12px;
    padding: 25px;
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
    overflow: hidden;
}

.dr-assurance::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #64ffda, #00c6ff);
}

.dr-assurance-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #64ffda;
    background: rgba(100, 255, 218, 0.1);
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 15px;
    border: 1px solid rgba(100, 255, 218, 0.3);
}

.dr-assurance-text {
    color: #bdc3d3;
    font-size: 1.1rem;
    margin: 0;
}

.dr-assurance-text strong {
    color: #64ffda;
    font-weight: 600;
}

/* CTA */
.dr-cta {
    text-align: center;
    position: relative;
    z-index: 2;
}

.dr-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #64ffda, #00c6ff);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(100, 255, 218, 0.3);
}

.dr-button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
}

.dr-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(100, 255, 218, 0.4);
}

.dr-button:hover .dr-button-shine {
    left: 100%;
}

.dr-button-icon {
    transition: transform 0.4s ease;
}

.dr-button:hover .dr-button-icon {
    transform: translateX(5px);
}

.dr-cta-note {
    margin-top: 25px;
    color: #a0b3d6;
    font-size: 1.05rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.dr-note-flare {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(100, 255, 218, 0.2), transparent, rgba(100, 255, 218, 0.2));
    transform: translateY(-50%) skewX(-20deg);
    z-index: -1;
    opacity: 0.3;
}

.dr-cta-note strong {
    color: #64ffda;
    background: rgba(100, 255, 218, 0.1);
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(100, 255, 218, 0.2);
    transition: all 0.3s ease;
}

.dr-cta-note:hover strong {
    background: rgba(100, 255, 218, 0.2);
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dr-main-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .dr-section {
        padding: 80px 20px;
    }
    
    .dr-main-title {
        font-size: 2rem;
    }
    
    .dr-features-grid {
        grid-template-columns: 1fr;
    }
    
    .dr-feature-card {
        padding: 30px 20px;
    }
    
    .dr-button {
        padding: 15px 30px;
        font-size: 1rem;
    }
    
    .dr-metric-display {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dr-main-title {
        font-size: 1.8rem;
    }
    
    .dr-top-label {
        font-size: 1.1rem;
    }
    
    .dr-assurance {
        padding: 20px 15px;
    }
    
    .dr-assurance-text {
        font-size: 1rem;
    }
}









/* Support & Security Section */
.support-security-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #0a0a2e, #1a1a4a);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.ss-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.ss-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.ss-particle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(100, 200, 255, 0.1) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
}

.ss-particle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Top Label */
.ss-top-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #a0a8c0;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
}

.ss-highlight {
    color: #64c8ff;
    text-shadow: 0 0 10px rgba(100, 200, 255, 0.3);
}

/* Scrolling Line */
.ss-scroll-line {
    width: 180px;
    height: 2px;
    background: rgba(100, 200, 255, 0.2);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.ss-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #64c8ff, transparent);
    animation: ssScrollLine 3s infinite linear;
}

@keyframes ssScrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.ss-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
    line-height: 1.2;
}

.ss-title-gradient {
    background: linear-gradient(90deg, #64c8ff, #ffc864);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.ss-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #64c8ff;
    text-shadow: 0 0 20px rgba(100, 200, 255, 0.2);
}

/* Tab Navigation */
.ss-tab-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.ss-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(100, 200, 255, 0.2);
    border-radius: 50px;
    padding: 12px 25px;
    color: #a0a8c0;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.ss-tab-btn:hover {
    background: rgba(100, 200, 255, 0.1);
    color: #fff;
}

.ss-tab-btn.active {
    background: linear-gradient(90deg, #64c8ff, #ffc864);
    color: #0a0a2e;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(100, 200, 255, 0.3);
}

.ss-tab-btn i {
    font-size: 1.1rem;
}

/* Tab Content */
.ss-tab-pane {
    display: none;
    animation: fadeIn 0.5s ease;
}

.ss-tab-pane.active {
    display: block;
}

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

/* Support Tiers Grid */
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.support-tier {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid rgba(100, 200, 255, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.support-tier.highlighted {
    border: 1px solid #ffc864;
    box-shadow: 0 10px 30px rgba(255, 200, 100, 0.1);
}

.support-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #64c8ff, #ffc864);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.support-tier.highlighted::before {
    opacity: 1;
}

.support-tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(100, 200, 255, 0.1);
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.tier-title {
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
}

.tier-badge {
    background: rgba(100, 200, 255, 0.1);
    border: 1px solid rgba(100, 200, 255, 0.3);
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
}

.support-tier.highlighted .tier-badge {
    background: rgba(255, 200, 100, 0.2);
    border-color: #ffc864;
    color: #ffc864;
}

.tier-response-time {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed rgba(100, 200, 255, 0.2);
}

.tier-response-time i {
    font-size: 1.5rem;
    color: #64c8ff;
}

.support-tier.highlighted .tier-response-time i {
    color: #ffc864;
}

.time-metric {
    font-size: 1.8rem;
    font-weight: 700;
    color: #64c8ff;
}

.support-tier.highlighted .time-metric {
    color: #ffc864;
}

.time-label {
    color: #a0a8c0;
    font-size: 1rem;
}

.tier-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.tier-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b0b8d0;
}

.tier-features i {
    font-size: 1.1rem;
}

.tier-features .fa-check-circle {
    color: #64c8ff;
}

.support-tier.highlighted .tier-features .fa-check-circle {
    color: #ffc864;
}

.tier-features .fa-times-circle {
    color: #ff6b6b;
    opacity: 0.7;
}

.tier-escalation {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.tier-escalation h4 {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #64c8ff;
}

.support-tier.highlighted .tier-escalation h4 {
    color: #ffc864;
}

.tier-escalation p {
    font-size: 0.9rem;
    color: #b0b8d0;
    margin: 0;
}

/* Security Whitepapers Grid */
.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.security-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid rgba(100, 200, 255, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.security-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(100, 200, 255, 0.1);
}

.security-icon {
    font-size: 2.5rem;
    color: #64c8ff;
    margin-bottom: 20px;
}

.security-title {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 15px;
}

.security-desc {
    color: #b0b8d0;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 80px;
}

.security-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    font-size: 0.85rem;
    color: #a0a8c0;
}

.security-meta i {
    margin-right: 5px;
}

.security-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(100, 200, 255, 0.1);
    border: 1px solid rgba(100, 200, 255, 0.3);
    padding: 12px 20px;
    border-radius: 6px;
    color: #64c8ff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.security-download:hover {
    background: rgba(100, 200, 255, 0.2);
    transform: translateY(-3px);
}

.security-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(100, 200, 255, 0.1);
    border: 1px solid rgba(100, 200, 255, 0.3);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Compliance Badges */
.compliance-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.badge-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: grayscale(100%) brightness(2);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.badge-item:hover .badge-img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

.badge-label {
    font-size: 0.9rem;
    color: #a0a8c0;
    text-align: center;
}

/* Responsive */
@media (max-width: 992px) {
    .support-grid,
    .security-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .ss-main-title {
        font-size: 2.2rem;
    }
    
    .support-grid,
    .security-grid {
        grid-template-columns: 1fr;
    }
    
    .compliance-badges {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .ss-main-title {
        font-size: 1.8rem;
    }
    
    .ss-top-label {
        font-size: 1rem;
    }
    
    .ss-tab-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .support-tier,
    .security-card {
        padding: 25px;
    }
}











/* LLM Models Section Styles */
.llm-models-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #0a0a2e, #1a1a4a);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.llm-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.llm-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.llm-particle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(100, 200, 255, 0.1) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
}

.llm-particle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    background: radial-gradient(circle, rgba(255, 100, 200, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Top Label */
.llm-top-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #a0a8c0;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
}

.llm-highlight {
    color: #64c8ff;
    text-shadow: 0 0 10px rgba(100, 200, 255, 0.3);
}

/* Scrolling Line */
.llm-scroll-line {
    width: 180px;
    height: 2px;
    background: rgba(100, 200, 255, 0.2);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.llm-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #64c8ff, transparent);
    animation: llmScrollLine 3s infinite linear;
}

@keyframes llmScrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.llm-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.2;
}

.llm-title-gradient {
    background: linear-gradient(90deg, #64c8ff, #ff64c8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.llm-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #64c8ff;
    text-shadow: 0 0 20px rgba(100, 200, 255, 0.2);
}

.llm-subtitle {
    font-size: 1.2rem;
    color: #b0b8d0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

/* Model Grid */
.llm-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.llm-model-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid rgba(100, 200, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.llm-model-card.highlighted {
    border: 1px solid #ff64c8;
    box-shadow: 0 10px 30px rgba(255, 100, 200, 0.1);
}

.llm-model-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #64c8ff, #ff64c8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.llm-model-card.highlighted::before {
    opacity: 1;
}

.llm-model-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(100, 200, 255, 0.1);
}

.model-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.model-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
}

.model-badge {
    background: linear-gradient(90deg, #ff64c8, #ff9064);
    color: #0a0a2e;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
}

.model-name {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #fff;
}

.model-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #b0b8d0;
}

.model-meta i {
    margin-right: 5px;
    color: #64c8ff;
}

.model-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.model-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b0b8d0;
}

.model-features i {
    color: #64c8ff;
    font-size: 0.9rem;
}

.model-gpu-req {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 0.9rem;
}

.model-gpu-req i {
    color: #ff64c8;
    font-size: 1.2rem;
}

.model-deploy-btn {
    width: 100%;
    background: linear-gradient(90deg, #64c8ff, #9064ff);
    color: #0a0a2e;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.model-deploy-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(100, 200, 255, 0.3);
}

.model-footer {
    text-align: center;
}

.model-docs-link {
    color: #64c8ff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
    border-bottom: 1px dashed rgba(100, 200, 255, 0.3);
    padding-bottom: 2px;
}

.model-docs-link:hover {
    color: #ff64c8;
    border-bottom-color: #ff64c8;
}

/* Enterprise Features */
.llm-enterprise-features {
    margin-bottom: 60px;
}

.enterprise-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 40px;
    border: 1px solid rgba(100, 200, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.enterprise-icon {
    font-size: 2.5rem;
    color: #ff64c8;
    margin-bottom: 20px;
    text-align: center;
}

.enterprise-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
    background: linear-gradient(90deg, #64c8ff, #ff64c8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.enterprise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.enterprise-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.enterprise-item:hover {
    transform: translateY(-5px);
    background: rgba(100, 200, 255, 0.1);
}

.enterprise-item i {
    font-size: 2rem;
    color: #64c8ff;
    margin-bottom: 15px;
}

.enterprise-item h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.enterprise-item p {
    color: #b0b8d0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* CTA */
.llm-cta {
    text-align: center;
}

.llm-cta-text {
    font-size: 1.2rem;
    color: #b0b8d0;
    margin-bottom: 20px;
}

.llm-cta-btn {
    background: transparent;
    border: 2px solid #64c8ff;
    color: #64c8ff;
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.llm-cta-btn:hover {
    background: rgba(100, 200, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(100, 200, 255, 0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .llm-model-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .llm-main-title {
        font-size: 2.2rem;
    }
    
    .llm-model-grid {
        grid-template-columns: 1fr;
    }
    
    .enterprise-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .llm-main-title {
        font-size: 1.8rem;
    }
    
    .llm-top-label {
        font-size: 1rem;
    }
    
    .enterprise-grid {
        grid-template-columns: 1fr;
    }
    
    .enterprise-card {
        padding: 30px 20px;
    }
    
    .llm-model-card {
        padding: 25px;
    }
}









/* Deployment & Web3 Tools Section */
.deployment-section {
    padding: 120px 20px;
    background: linear-gradient(135deg, #0f0c29, #1a1446);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.deployment-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Particles */
.deployment-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.deployment-particle-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(86, 204, 242, 0.08) 0%, transparent 70%);
    animation: deployment-float 9s ease-in-out infinite;
}

.deployment-particle-2 {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.05) 0%, transparent 70%);
    animation: deployment-float 7s ease-in-out infinite 2s;
}

@keyframes deployment-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(3deg); }
}

/* Top Label */
.deployment-top-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #a0b3d6;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 3px;
    text-align: center;
}

.deployment-highlight-text {
    color: #56ccf2;
    text-shadow: 0 0 12px rgba(86, 204, 242, 0.6);
}

/* Scrolling Line */
.deployment-scroll-line {
    width: 200px;
    height: 2px;
    background: rgba(86, 204, 242, 0.3);
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.deployment-scroll-inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, #56ccf2, transparent);
    animation: deployment-scrollLine 2.5s infinite linear;
}

@keyframes deployment-scrollLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Main Title */
.deployment-main-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

.deployment-title-gradient {
    background: linear-gradient(90deg, #56ccf2, #8a2be2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.deployment-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px #56ccf2;
    text-shadow: 0 0 20px rgba(86, 204, 242, 0.3);
}

.deployment-main-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #56ccf2, transparent);
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Two Column Layout */
.deployment-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* Deployment Process Column */
.deployment-process-column {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 40px;
    border: 1px solid rgba(86, 204, 242, 0.1);
    position: relative;
    overflow: hidden;
}

.deployment-subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.deployment-subtitle i {
    color: #56ccf2;
    font-size: 1.8rem;
}

.deployment-step {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    position: relative;
    padding-left: 15px;
}

.deployment-step::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 40px;
    bottom: -25px;
    width: 2px;
    background: rgba(86, 204, 242, 0.3);
}

.deployment-step:last-child::before {
    display: none;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #56ccf2, #8a2be2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.step-content {
    padding-top: 5px;
}

.step-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.step-description {
    color: #bdc3d3;
    line-height: 1.7;
    font-size: 1rem;
}

.deployment-features {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.deployment-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #56ccf2;
    background: rgba(86, 204, 242, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(86, 204, 242, 0.2);
}

.deployment-feature i {
    font-size: 1.1rem;
}

/* Web3 Tools Column */
.web3-tools-column {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 40px;
    border: 1px solid rgba(138, 43, 226, 0.1);
    position: relative;
    overflow: hidden;
}

.web3-tool-card {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(138, 43, 226, 0.1);
}

.web3-tool-card:hover {
    background: rgba(138, 43, 226, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.tool-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px;
}

.tool-icon img {
    max-width: 100%;
    max-height: 100%;
    filter: brightness(0) invert(1);
}

.tool-content {
    flex: 1;
}

.tool-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.tool-description {
    color: #bdc3d3;
    line-height: 1.7;
    font-size: 0.95rem;
}

.testnet-features {
    margin-top: 40px;
}

.features-title {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #a0b3d6;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.testnet-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.testnet-badge {
    background: rgba(138, 43, 226, 0.2);
    color: #d9a3ff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.features-note {
    color: #56ccf2;
    font-size: 0.9rem;
    font-style: italic;
}

/* CTA */
.deployment-cta {
    text-align: center;
    position: relative;
    z-index: 2;
}

.deployment-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #56ccf2, #8a2be2);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.1rem;
    border: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(86, 204, 242, 0.3);
}

.button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.7s;
}

.deployment-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(86, 204, 242, 0.4);
}

.deployment-button:hover .button-shine {
    left: 100%;
}

.button-icon {
    transition: transform 0.4s ease;
}

.deployment-button:hover .button-icon {
    transform: translateX(5px);
}

.deployment-cta-note {
    margin-top: 25px;
    color: #a0b3d6;
    font-size: 1.05rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.cta-flare {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(86, 204, 242, 0.2), transparent, rgba(138, 43, 226, 0.2));
    transform: translateY(-50%) skewX(-20deg);
    z-index: -1;
    opacity: 0.3;
}

.deployment-cta-note strong {
    color: #56ccf2;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .deployment-main-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 992px) {
    .deployment-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .deployment-section {
        padding: 80px 20px;
    }
    
    .deployment-main-title {
        font-size: 2rem;
    }
    
    .deployment-step {
        flex-direction: column;
        gap: 15px;
    }
    
    .deployment-step::before {
        left: 20px;
        top: 60px;
        bottom: -15px;
    }
    
    .web3-tool-card {
        flex-direction: column;
    }
    
    .tool-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }
    
    .deployment-button {
        padding: 15px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .deployment-main-title {
        font-size: 1.8rem;
    }
    
    .deployment-top-label {
        font-size: 1.1rem;
    }
    
    .deployment-step, 
    .web3-tool-card {
        padding: 15px;
    }
    
    .testnet-badges {
        justify-content: center;
    }
}









/* ************************************ Privacy Policy ************************ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.8;
    color: #ffffff;
    background: linear-gradient(135deg, #000053, #000035);
    background-attachment: fixed;
    overflow-x: hidden;
}

.nineserver-privacy-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Hero Section */
.nineserver-privacy-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nineserver-privacy-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(52, 152, 219, 0.1) 0%, transparent 30%);
    z-index: -1;
}

.nineserver-privacy-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle, rgba(52, 152, 219, 0.05) 0%, transparent 70%),
        radial-gradient(circle, rgba(46, 204, 113, 0.05) 0%, transparent 70%);
    animation: nineserver-rotate 120s linear infinite;
    z-index: -2;
}

.nineserver-hero-content {
    max-width: 800px;
    position: relative;
    padding: 40px;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 40, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.nineserver-hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
    line-height: 1.2;
}

.nineserver-hero-content p {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #ecf0f1;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.nineserver-hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #bdc3c7;
    font-size: 1.5rem;
    animation: nineserver-bounce 2s infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nineserver-hero-scroll:hover {
    color: #3498db;
    transform: translateX(-50%) scale(1.1);
}

/* Floating Particles */
.nineserver-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.3);
    filter: blur(1px);
    animation: nineserver-float-particle linear infinite;
    z-index: -1;
}

@keyframes nineserver-float-particle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* Policy Sections */
.nineserver-policy-section {
    background: rgba(0, 0, 40, 0.7);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(52, 152, 219, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* opacity: 0; */
    /* transform: translateY(30px); */
    opacity: 1 !important;
    transform: none !important;
}

.nineserver-policy-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.nineserver-policy-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #3498db, #2ecc71);
}

.nineserver-policy-section:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(52, 152, 219, 0.3);
}

.nineserver-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.nineserver-section-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nineserver-policy-section:hover .nineserver-section-icon {
    transform: rotate(10deg) scale(1);
}

.nineserver-section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
}

.nineserver-section-title .nineserver-section-subtitle {
    font-size: 1rem;
    color: #bdc3c7;
    margin-top: 8px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.nineserver-policy-content p {
    margin-bottom: 20px;
    color: #ecf0f1;
    font-size: 1.05rem;
}

.nineserver-policy-list {
    margin: 25px 0;
    padding-left: 20px;
    list-style-type: none;
}

.nineserver-policy-list li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 35px;
    color: #ecf0f1;
    font-size: 1.05rem;
}

.nineserver-policy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 50%;
    transform: translateY(-50%);
}

.nineserver-policy-list strong {
    color: #ffffff;
    font-weight: 500;
}

/* Highlight Cards */
.nineserver-highlight-card {
    background: rgba(0, 0, 40, 0.5);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    border: 1px solid rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.nineserver-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
    z-index: -1;
}

.nineserver-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(52, 152, 219, 0.5);
}

.nineserver-highlight-card .nineserver-card-icon {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.nineserver-highlight-card:hover .nineserver-card-icon {
    transform: scale(1.1);
    color: #2ecc71;
}

.nineserver-highlight-card h3 {
    color: #ffffff;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

/* Tags for important notes */
.nineserver-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
}

.nineserver-tag-info {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid #3498db;
}

.nineserver-tag-warning {
    background-color: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    border: 1px solid #f39c12;
}

.nineserver-tag-success {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

/* Last Updated */
.nineserver-last-updated {
    text-align: center;
    padding: 60px 0;
    position: relative;
    margin-top: 50px;
}

.nineserver-last-updated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(300px, 80%);
    height: 1px;
    background: linear-gradient(to right, transparent, #3498db, transparent);
}

.nineserver-last-updated p {
    color: #bdc3c7;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Toggleable Details */
.nineserver-details-toggle {
    margin: 20px 0;
}

.nineserver-details-toggle summary {
    font-weight: 600;
    color: #3498db;
    cursor: pointer;
    padding: 10px 15px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 8px;
    list-style: none;
    transition: all 0.3s ease;
}

.nineserver-details-toggle summary:hover {
    background: rgba(52, 152, 219, 0.2);
}

.nineserver-details-toggle summary::marker {
    display: none;
}

.nineserver-details-toggle summary::-webkit-details-marker {
    display: none;
}

.nineserver-details-toggle summary::after {
    content: '+';
    float: right;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nineserver-details-toggle[open] summary::after {
    content: '-';
}

.nineserver-details-toggle[open] summary {
    margin-bottom: 15px;
}

.nineserver-details-content {
    padding: 0 15px 15px;
}

/* Animations */
@keyframes nineserver-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes nineserver-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-20px) translateX(-50%); }
    60% { transform: translateY(-10px) translateX(-50%); }
}

@keyframes nineserver-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Responsive Design */
@media (max-width: 992px) {
    .nineserver-policy-section {
        padding: 40px;
    }
    
    .nineserver-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .nineserver-section-icon {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .nineserver-privacy-hero {
        min-height: 70vh;
        padding: 60px 0;
    }
    
    .nineserver-hero-content {
        padding: 30px;
    }
    
    .nineserver-policy-section {
        padding: 30px;
    }
    
    .nineserver-highlight-card {
        padding: 25px;
    }
}

@media (max-width: 576px) {
    .nineserver-privacy-hero {
        min-height: 60vh;
    }
    
    .nineserver-hero-content {
        padding: 20px;
    }
    
    .nineserver-policy-section {
        padding: 25px 20px;
    }
    
    .nineserver-section-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }
}








/* **************************** Term of Services ************************** */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.8;
    color: #ffffff;
    background: linear-gradient(135deg, #000053, #000035);
    background-attachment: fixed;
    overflow-x: hidden;
}

.nineserver-tos-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Hero Section */
.nineserver-tos-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nineserver-tos-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(52, 152, 219, 0.1) 0%, transparent 30%);
    z-index: -1;
}

.nineserver-tos-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle, rgba(52, 152, 219, 0.05) 0%, transparent 70%),
        radial-gradient(circle, rgba(46, 204, 113, 0.05) 0%, transparent 70%);
    animation: nineserver-rotate 120s linear infinite;
    z-index: -2;
}

.nineserver-hero-content {
    max-width: 800px;
    position: relative;
    padding: 40px;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 40, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.nineserver-hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
    line-height: 1.2;
}

.nineserver-hero-content p {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #ecf0f1;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.nineserver-hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #bdc3c7;
    font-size: 1.5rem;
    animation: nineserver-bounce 2s infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nineserver-hero-scroll:hover {
    color: #3498db;
    transform: translateX(-50%) scale(1.1);
}

/* Floating Particles */
.nineserver-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.3);
    filter: blur(1px);
    animation: nineserver-float-particle linear infinite;
    z-index: -1;
}

@keyframes nineserver-float-particle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* Section Styling */
.nineserver-tos-section {
    background: rgba(0, 0, 40, 0.7);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(52, 152, 219, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1 !important;
    transform: none !important;
}

.nineserver-tos-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.nineserver-tos-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #3498db, #2ecc71);
}

.nineserver-tos-section:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(52, 152, 219, 0.3);
}

.nineserver-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.nineserver-section-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nineserver-tos-section:hover .nineserver-section-icon {
    transform: rotate(10deg) scale(1.1);
}

.nineserver-section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
}

.nineserver-section-title .nineserver-section-subtitle {
    font-size: 1rem;
    color: #bdc3c7;
    margin-top: 8px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.nineserver-section-content p {
    margin-bottom: 20px;
    color: #ecf0f1;
    font-size: 1.05rem;
}

.nineserver-tos-list {
    margin: 25px 0;
    padding-left: 20px;
    list-style-type: none;
}

.nineserver-tos-list li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 35px;
    color: #ecf0f1;
    font-size: 1.05rem;
}

.nineserver-tos-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 50%;
    transform: translateY(-50%);
}

.nineserver-tos-list strong {
    color: #ffffff;
    font-weight: 500;
}

/* Highlight Cards */
.nineserver-highlight-card {
    background: rgba(0, 0, 40, 0.5);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    border: 1px solid rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.nineserver-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
    z-index: -1;
}

.nineserver-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(52, 152, 219, 0.5);
}

.nineserver-highlight-card .nineserver-card-icon {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.nineserver-highlight-card:hover .nineserver-card-icon {
    transform: scale(1.1);
    color: #2ecc71;
}

.nineserver-highlight-card h3 {
    color: #ffffff;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

/* Tags for important notes */
.nineserver-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
}

.nineserver-tag-info {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid #3498db;
}

.nineserver-tag-warning {
    background-color: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    border: 1px solid #f39c12;
}

.nineserver-tag-danger {
    background-color: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.nineserver-tag-success {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

/* Table Styling */
.nineserver-tos-table-container {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 10px;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.nineserver-tos-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 40, 0.5);
}

.nineserver-tos-table th {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 500;
}

.nineserver-tos-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(52, 152, 219, 0.3);
    color: #ecf0f1;
}

.nineserver-tos-table tr:nth-child(even) {
    background: rgba(0, 0, 40, 0.3);
}

.nineserver-tos-table tr:hover {
    background: rgba(52, 152, 219, 0.1);
}

/* Last Updated */
.nineserver-last-updated {
    text-align: center;
    padding: 60px 0;
    position: relative;
    margin-top: 50px;
}

.nineserver-last-updated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(300px, 80%);
    height: 1px;
    background: linear-gradient(to right, transparent, #3498db, transparent);
}

.nineserver-last-updated p {
    color: #bdc3c7;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Toggleable Details */
.nineserver-details-toggle {
    margin: 20px 0;
}

.nineserver-details-toggle summary {
    font-weight: 600;
    color: #3498db;
    cursor: pointer;
    padding: 10px 15px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 8px;
    list-style: none;
    transition: all 0.3s ease;
}

.nineserver-details-toggle summary:hover {
    background: rgba(52, 152, 219, 0.2);
}

.nineserver-details-toggle summary::marker {
    display: none;
}

.nineserver-details-toggle summary::-webkit-details-marker {
    display: none;
}

.nineserver-details-toggle summary::after {
    content: '+';
    float: right;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nineserver-details-toggle[open] summary::after {
    content: '-';
}

.nineserver-details-toggle[open] summary {
    margin-bottom: 15px;
}

.nineserver-details-content {
    padding: 0 15px 15px;
}

/* Animations */
@keyframes nineserver-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes nineserver-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-20px) translateX(-50%); }
    60% { transform: translateY(-10px) translateX(-50%); }
}

@keyframes nineserver-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Responsive Design */
@media (max-width: 992px) {
    .nineserver-tos-section {
        padding: 40px;
    }
    
    .nineserver-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .nineserver-section-icon {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .nineserver-tos-hero {
        min-height: 60vh;
        padding: 60px 0;
    }
    
    .nineserver-hero-content {
        padding: 30px;
    }
    
    .nineserver-tos-section {
        padding: 30px;
    }
    
    .nineserver-highlight-card {
        padding: 25px;
    }
}

@media (max-width: 576px) {
    .nineserver-tos-hero {
        min-height: 50vh;
    }
    
    .nineserver-hero-content {
        padding: 20px;
    }
    
    .nineserver-tos-section {
        padding: 25px 20px;
    }
    
    .nineserver-section-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }
}






/* ********************** Cookies-policy ******************************** */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.8;
    color: #ffffff;
    background: linear-gradient(135deg, #000053, #000035);
    background-attachment: fixed;
    overflow-x: hidden;
}

.nineserver-cookies-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Hero Section */
.nineserver-cookies-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nineserver-cookies-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(52, 152, 219, 0.1) 0%, transparent 30%);
    z-index: -1;
}

.nineserver-cookies-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle, rgba(52, 152, 219, 0.05) 0%, transparent 70%),
        radial-gradient(circle, rgba(46, 204, 113, 0.05) 0%, transparent 70%);
    animation: nineserver-rotate 120s linear infinite;
    z-index: -2;
}

.nineserver-hero-content {
    max-width: 800px;
    position: relative;
    padding: 40px;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 40, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.nineserver-hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
    line-height: 1.2;
}

.nineserver-hero-content p {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #ecf0f1;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.nineserver-hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #bdc3c7;
    font-size: 1.5rem;
    animation: nineserver-bounce 2s infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nineserver-hero-scroll:hover {
    color: #3498db;
    transform: translateX(-50%) scale(1.1);
}

/* Floating Particles */
.nineserver-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.3);
    filter: blur(1px);
    animation: nineserver-float-particle linear infinite;
    z-index: -1;
}

@keyframes nineserver-float-particle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* Policy Sections */
.nineserver-cookies-section {
    background: rgba(0, 0, 40, 0.7);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(52, 152, 219, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1 !important;
    transform: none !important;
}

.nineserver-cookies-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.nineserver-cookies-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #3498db, #2ecc71);
}

.nineserver-cookies-section:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(52, 152, 219, 0.3);
}

.nineserver-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.nineserver-section-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nineserver-cookies-section:hover .nineserver-section-icon {
    transform: rotate(10deg) scale(1.1);
}

.nineserver-section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
}

.nineserver-section-title .nineserver-section-subtitle {
    font-size: 1rem;
    color: #bdc3c7;
    margin-top: 8px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.nineserver-section-content p {
    margin-bottom: 20px;
    color: #ecf0f1;
    font-size: 1.05rem;
}

.nineserver-cookies-list {
    margin: 25px 0;
    padding-left: 20px;
    list-style-type: none;
}

.nineserver-cookies-list li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 35px;
    color: #ecf0f1;
    font-size: 1.05rem;
}

.nineserver-cookies-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 50%;
    transform: translateY(-50%);
}

.nineserver-cookies-list strong {
    color: #ffffff;
    font-weight: 500;
}

/* Highlight Cards */
.nineserver-highlight-card {
    background: rgba(0, 0, 40, 0.5);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    border: 1px solid rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.nineserver-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
    z-index: -1;
}

.nineserver-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(52, 152, 219, 0.5);
}

.nineserver-highlight-card .nineserver-card-icon {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.nineserver-highlight-card:hover .nineserver-card-icon {
    transform: scale(1.1);
    color: #2ecc71;
}

.nineserver-highlight-card h3 {
    color: #ffffff;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

/* Cookie Categories */
.nineserver-cookie-category {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 0, 40, 0.3);
    border-radius: 10px;
    border-left: 4px solid #3498db;
}

.nineserver-cookie-category h4 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}

.nineserver-cookie-category h4 i {
    margin-right: 10px;
    color: #3498db;
}

/* Tags for important notes */
.nineserver-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
}

.nineserver-tag-info {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid #3498db;
}

.nineserver-tag-warning {
    background-color: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    border: 1px solid #f39c12;
}

.nineserver-tag-success {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

/* Table Styling */
.nineserver-cookies-table-container {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 10px;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.nineserver-cookies-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 40, 0.5);
}

.nineserver-cookies-table th {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 500;
}

.nineserver-cookies-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(52, 152, 219, 0.3);
    color: #ecf0f1;
}

.nineserver-cookies-table tr:nth-child(even) {
    background: rgba(0, 0, 40, 0.3);
}

.nineserver-cookies-table tr:hover {
    background: rgba(52, 152, 219, 0.1);
}

/* Cookie Consent Banner */
.nineserver-cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000028;
    padding: 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(52, 152, 219, 0.3);
}

.nineserver-cookie-consent.active {
    display: block;
}

.nineserver-cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nineserver-cookie-consent-text {
    flex: 1;
    min-width: 300px;
    color: #ecf0f1;
}

.nineserver-cookie-consent-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nineserver-cookie-btn {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nineserver-cookie-btn-accept {
    background: #3498db;
    color: white;
    border: none;
}

.nineserver-cookie-btn-accept:hover {
    background: #2980b9;
}

.nineserver-cookie-btn-settings {
    background: transparent;
    color: #3498db;
    border: 1px solid #3498db;
}

.nineserver-cookie-btn-settings:hover {
    background: rgba(52, 152, 219, 0.1);
}

.nineserver-cookie-btn-reject {
    background: transparent;
    color: #bdc3c7;
    border: 1px solid #bdc3c7;
}

.nineserver-cookie-btn-reject:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Last Updated */
.nineserver-last-updated {
    text-align: center;
    padding: 60px 0;
    position: relative;
    margin-top: 50px;
}

.nineserver-last-updated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(300px, 80%);
    height: 1px;
    background: linear-gradient(to right, transparent, #3498db, transparent);
}

.nineserver-last-updated p {
    color: #bdc3c7;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Toggleable Details */
.nineserver-details-toggle {
    margin: 20px 0;
}

.nineserver-details-toggle summary {
    font-weight: 600;
    color: #3498db;
    cursor: pointer;
    padding: 10px 15px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 8px;
    list-style: none;
    transition: all 0.3s ease;
}

.nineserver-details-toggle summary:hover {
    background: rgba(52, 152, 219, 0.2);
}

.nineserver-details-toggle summary::marker {
    display: none;
}

.nineserver-details-toggle summary::-webkit-details-marker {
    display: none;
}

.nineserver-details-toggle summary::after {
    content: '+';
    float: right;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nineserver-details-toggle[open] summary::after {
    content: '-';
}

.nineserver-details-toggle[open] summary {
    margin-bottom: 15px;
}

.nineserver-details-content {
    padding: 0 15px 15px;
}

/* Animations */
@keyframes nineserver-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes nineserver-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-20px) translateX(-50%); }
    60% { transform: translateY(-10px) translateX(-50%); }
}

@keyframes nineserver-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Responsive Design */
@media (max-width: 992px) {
    .nineserver-cookies-section {
        padding: 40px;
    }
    
    .nineserver-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .nineserver-section-icon {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .nineserver-cookies-hero {
        min-height: 60vh;
        padding: 60px 0;
    }
    
    .nineserver-hero-content {
        padding: 30px;
    }
    
    .nineserver-cookies-section {
        padding: 30px;
    }
    
    .nineserver-highlight-card {
        padding: 25px;
    }

    .nineserver-cookie-consent-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .nineserver-cookie-consent-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .nineserver-cookie-btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .nineserver-cookies-hero {
        min-height: 50vh;
    }
    
    .nineserver-hero-content {
        padding: 20px;
    }
    
    .nineserver-cookies-section {
        padding: 25px 20px;
    }
    
    .nineserver-section-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .nineserver-cookie-consent-buttons {
        flex-direction: column;
        gap: 10px;
    }
}


/* Cookies setting  */


/* Cookie Modal Styles */
.nineserver-cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nineserver-cookie-modal-content {
    background: #000028;
    padding: 30px;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh; /* Limits height to 80% of viewport */
    overflow-y: auto; /* Enables vertical scrolling when needed */
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.nineserver-cookie-category {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(52, 152, 219, 0.2);
    min-height: 120px; /* Ensures consistent category height */
}

/* Better spacing for mobile */
@media (max-width: 768px) {
    .nineserver-cookie-modal-content {
        padding: 20px;
        max-height: 90vh; /* More height on small screens */
    }
}

.nineserver-cookie-category h4 {
    margin-bottom: 10px;
    color: #3498db;
}

.nineserver-cookie-category p {
    color: #bdc3c7;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.nineserver-cookie-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.nineserver-cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nineserver-cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2c3e50;
    transition: .4s;
    border-radius: 34px;
}

.nineserver-cookie-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .nineserver-cookie-slider {
    background-color: #2ecc71;
}

input:focus + .nineserver-cookie-slider {
    box-shadow: 0 0 1px #2ecc71;
}

input:checked + .nineserver-cookie-slider:before {
    transform: translateX(26px);
}

.nineserver-cookie-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.nineserver-cookie-modal-buttons button {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nineserver-cookie-modal-buttons button:first-child {
    background: #3498db;
    color: white;
    border: none;
}

.nineserver-cookie-modal-buttons button:first-child:hover {
    background: #2980b9;
}

.nineserver-cookie-modal-buttons button:last-child {
    background: transparent;
    color: #bdc3c7;
    border: 1px solid #bdc3c7;
}

.nineserver-cookie-modal-buttons button:last-child:hover {
    background: rgba(255, 255, 255, 0.05);
}








/* ****************************** All dedicated servers ******************************* */
/* ************************************************************************************ */