/* Rewards Section */
.rewards {
    background: linear-gradient(45deg, #0e1123, #111b2c);
    /* Gradient background */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
    /* Shadow effect */
}

.rewards .title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rewards .icon svg {
    fill: #0eff4e;
    width: 30px;
    height: 30px;
}

.rewards .section-title h4 {
    color: #0eff4e;
    font-size: 1.5rem;
}

/* Referral Program */
.promote_referrals {
    background: #2c2f33;
    /* Dark theme for the referral box */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    border: 2px solid #3498db;
    /* Gaming blue border */
}

.promote_referrals h2 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.promote_referrals h4 {
    color: #ff6347;
    /* Eye-catching color for commission info */
    font-weight: bold;
}

.promote_referrals a {
    background: #0e1123;
    /* Bright green button */
    color: #fff;
    border-radius: 25px;
    padding: 12px 20px;
 
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

.promote_referrals a:hover {
    background: #00cc00;
    /* Darker green on hover */
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

/* Streak Rewards */
.streak_rewards {
    background: #1e1e1e;
    /* Dark background for rewards */
    border-radius: 15px;
    padding: 20px;
    border: 2px solid #3498db;
}

.streak_rewards .d-flex {
    justify-content: space-between;
}

.streak_rewards h4 {
    font-size: 1.4rem;
    color: #0eff4e;
}

.streak_rewards .text_gray {
    color: #b0b0b0;
}

.streak_rewards .text_light_green {
    color: #0eff4e;
}

/* Reward Days */
.streak_rewards .day {
    background: #2c2f33;
    border: 2px solid #3498db;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.streak_rewards .day:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.streak_rewards .day .fa-regular {
    color: #ff6347;
    font-size: 30px;
}

.streak_rewards .day .fw-bold {
    color: #fff;
    font-size: 1.2rem;
}

.streak_rewards .day .btn {
    background: #ff6347;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
}

.streak_rewards .day .btn:hover {
    background: #ff4500;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Disabled Button Styles */
.streak_rewards .day .btn[disabled] {
    background: #999;
    cursor: not-allowed;
}

/* Icon Styling */
.streak_rewards i {
    font-size: 40px;
    margin-bottom: 10px;
    color: #00fa43;
}
 
table {
    width: 100%;
    border-collapse: collapse;
    background: linear-gradient(145deg, #1e1e2e, #2a2a3d);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

thead {
    background: #252542;
    color: #ffcc00;
    font-weight: bold;
}

th,
td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #3a3a4d;
    color: #fff;
}

tbody tr:hover {
    background: rgba(255, 204, 0, 0.1);
}

td {
    font-size: 14px;
}

td[colspan="4"] {
    text-align: center;
    font-weight: bold;
    color: #ff5555;
}

@media (max-width: 768px) {

    th,
    td {
        padding: 8px;
        font-size: 12px;
    }
}
 

.referral_link_card:hover {
    box-shadow: 0 0 20px #00ffcc, 0 0 40px #0099ff;
}

.p-3.dropdown_bg {
    background: rgb(14 17 35);
    border: 2px solid #0099ff;
    border-radius: 15px;
    padding: 15px;
}

 

.copyButton {
   
    border: none;
    color: #000;
    font-weight: bold;
    transition: 0.3s;
}

.copyButton:hover {
    background: linear-gradient(90deg, #0099ff, #00ffcc);
    box-shadow: 0 0 10px #00ffcc;
}

.socials .links {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.socials .links a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.socials .links.email {
    background: #ff4f4f;
    box-shadow: 0 0 10px #ff4f4f;
}

.socials .links.facebook {
    background: #1877f2;
    box-shadow: 0 0 10px #1877f2;
}

.socials .links.twitter {
    background: #1da1f2;
    box-shadow: 0 0 10px #1da1f2;
}

.socials .links.telegram {
    background: #0088cc;
    box-shadow: 0 0 10px #0088cc;
}

.socials .links:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
/* Gaming-Inspired Statistics Card */
.statistics {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0px 0px 10px rgba(0, 255, 255, 0.5);
    padding: 20px;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
}

.statistics:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 15px rgba(0, 255, 255, 0.7);
}

.statistics .title {
    display: flex;
    align-items: center;
    color: #00ffff;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
    padding-bottom: 10px;
}

.statistics .icon i {
    color: #00ffff;
    font-size: 1.8rem;
}

.statistics .info h3 {
    font-size: 1.5rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.statistics .info h3 img {
 
    margin-left: 8px;
}

.statistics .info span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive Styling */
@media (max-width: 768px) {
    .statistics {
        padding: 15px;
    }

    .statistics .info h3 {
        font-size: 1.2rem;
    }

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

/* Profile Card */
.profile_card {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border: 2px solid #00ff99;
    box-shadow: 0 0 20px rgba(0, 255, 153, 0.5);
    transition: 0.3s;
}

.profile_card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 153, 0.9);
}

/* Profile Image */
.profile_image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #00ff99;
    transition: transform 0.3s ease-in-out;
}

.profile_image img:hover {
    transform: scale(1.1);
}

/* Username */
.username h4 {
    color: #00ff99;
    font-size: 1.5rem;
    text-shadow: 0 0 10px #00ff99;
}

/* Labels */
.label span {
    font-size: 1.2rem;
    font-weight: bold;
}

.current_label span {
    color: #ffcc00;
}

/* Commission */
.commission svg {
    fill: #ffcc00;
}

/* Today's Earnings */
.today_earnings {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

 

.today_earnings span {
    font-size: 1rem;
    color: #ffffff;
    opacity: 0.8;
}

/* Icons */
.icon svg {
    filter: drop-shadow(0px 0px 5px #00ff99);
    transition: transform 0.3s ease-in-out;
}

.icon:hover svg {
    transform: scale(1.2);
}
/* Modal Styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0px;
    margin: 0px;
  
    color: #fff;
    font-weight: 400;
}
 
.login-signup-content__forgot-pass[data-v-b3fecbc3] {
    display: block;
    margin-top: 12px;
    width: -moz-fit-content;
    color: #ffffff;
    width: fit-content;
}
/* Modal Slide In Animation */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -100%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

 

/* Site Logo */
.site-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.site-logo img {
    max-width: 220px;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 1));
    /* Glowing logo effect */
}

 

.toggle-buttons {
    display: flex;
    gap: 15px;
}

.toggle-btn {
    font-size: 16px;
    padding: 12px 20px;
    background: linear-gradient(45deg, #ff7b00, #ff0066);
    /* Bright button colors */
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
}

.toggle-btn:hover {
    background: linear-gradient(45deg, #ff0066, #ff0077);
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(255, 0, 0, 0.5);
}

.close {
    font-size: 30px;
    color: #ff0066;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
}

.close:hover {
    color: #ff7b00;
}

 
/* Left Image Section */
.left-image {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 6px 15px rgba(0, 255, 255, 0.3);
}

.left-image img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 255, 255, 0.3);
}

/* Form Section */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 55%;
    
}

.input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group input {
    padding: 15px;
    border: 2px solid #444;
    border-radius: 10px;
    font-size: 16px;
    transition: 0.3s ease;
}

.input-group input:focus {
    border-color: #ff0066;
    outline: none;
}

.input-group label {
    position: absolute;
    top: -10px;
    left: 12px;
    font-size: 14px;
    color: #ff0066;
    background-color: #1b1b1b;
    padding: 0 5px;
}

/* Submit Button */
.submit-btn {
    padding: 15px;
    background: linear-gradient(45deg, #ff7b00, #ff0066);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
}

.submit-btn:hover {
    background: linear-gradient(45deg, #ff0066, #ff0077);
    transform: scale(1.05);
    box-shadow: 0 8px 18px rgba(255, 0, 0, 0.5);
}

/* Social login container */
.social-login {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 25px;
}

/* Social Button Styles */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 120px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.social-btn i {
    margin-right: 10px;
    font-size: 18px;
}

/* Google Button */
.social-btn.google {
    background: #ff0066;
}

.social-btn.google:hover {
    background: #ff7b00;
}

/* Facebook Button */
.social-btn.facebook {
    background: #3b5998;
}

.social-btn.facebook:hover {
    background: #2d4373;
}

/* Twitter Button */
.social-btn.twitter {
    background: #1da1f2;
}

.social-btn.twitter:hover {
    background: #1991c6;
}

/* GitHub Button */
.social-btn.github {
    background: #333;
}

.social-btn.github:hover {
    background: #444;
}

/* Responsive Design for Mobile */
@media screen and (max-width: 768px) {
    .modal-content {
        flex-direction: column;
    }

    .modal-body {
        flex-direction: column;
    }

    .left-image {
        width: 100%;
        margin-bottom: 20px;
    }

    .form-section {
        width: 100%;
    }

    .site-logo img {
        max-width: 150px;
    }
}

@media screen and (max-width: 480px) {
    .modal-body {
        flex-direction: column;
    }

    .toggle-btn {
        font-size: 14px;
        padding: 10px 14px;
    }

    .submit-btn {
        font-size: 16px;
        padding: 10px 14px;
    }
}
 :root {
     --main-color: #00eaff;
     /* Cyber Neon Blue */
     --secondary-color: #ff00ff;
     /* Futuristic Pink */
     --background-dark: #0c0c1e;
     --glass: rgba(255, 255, 255, 0.1);
 }

 /* ======= NAVBAR DESIGN ======= */
 .navbar {
     background: linear-gradient(145deg, var(--background-dark), #1a1a3d);
      
     border-bottom: 3px solid var(--main-color);
     box-shadow: 0px 0px 15px var(--main-color);
     font-family: 'Orbitron', sans-serif;
    
 }

 /* ======= LOGO DESIGN ======= */
 .navbar-brand img {
     height: 55px;
     transition: all 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 12px #000000);
 }

 .navbar-brand img:hover {
     transform: scale(1.1);
     filter: drop-shadow(0px 0px 18px var(--main-color));
 }

 /* ======= NAVBAR LINKS ======= */
 .navbar-nav .nav-link {
     color: white;
     font-size: 18px;
     padding: 12px 20px;
     position: relative;
     transition: 0.3s ease-in-out;
     letter-spacing: 2px;
     font-weight: bold;
 }

 /* Unique Glowing Hover Effect */
 .navbar-nav .nav-link::before {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     width: 0;
     height: 3px;
     background: var(--secondary-color);
     transition: all 0.3s ease-in-out;
     transform: translateX(-50%);
 }

 .navbar-nav .nav-link:hover::before {
     width: 100%;
 }

 .navbar-nav .nav-link:hover {
     color: var(--main-color);
     text-shadow: 0px 0px 10px var(--main-color);
 }

 /* ======= GLASS EFFECT BUTTONS ======= */
 .reg_log_buttons button+button {
     --_c: #17c18e;
     flex: calc(0.80 + var(--_s, 0));
     background: conic-gradient(from -90deg at calc(1.3* var(--b)) 100%, var(--_c) 119deg, #0000 121deg) border-box;
     clip-path: polygon(calc(0.577* var(--h)) 0, 100% 0, 100% 100%, 0 100%);
     margin: 0 0 0 calc(-0.250* var(--h));
     padding: 0 0 0 calc(0.350* var(--h));
 }
 .reg_log_buttons button {
     --_c: #00eaff;
     flex: calc(1.10 + var(--_s, 0));
     min-width: 0;
     font-size: 15px;
     font-weight: bold;
     height: var(--h);
     cursor: pointer;
     color: var(--_c);
     border: var(--b) solid var(--_c);
     background: conic-gradient(at calc(100% - 1.3* var(--b)) 0, var(--_c) 209deg, #0000 211deg) border-box;
     clip-path: polygon(0 0, 100% 0, calc(100% - 0.577* var(--h)) 100%, 0 100%);
     padding: 0 calc(0.280* var(--h)) 0 0;
     margin: 0 calc(-0.280* var(--h)) 0 0;
     box-sizing: border-box;
     -webkit-transition: flex .4s;
     transition: flex .4s;
 }

 .reg_log_buttons button:hover {
     transform: scale(1.1);
     border-color: var(--main-color);
     box-shadow: 0px 0px 18px var(--main-color);
 }

 /* ======= SUPPORT & CHAT ICONS ======= */
 .nav-item .icon {
     background: var(--glass);
     backdrop-filter: blur(12px);
     border: 2px solid var(--main-color);
     color: var(--main-color);
     width: 55px;
     height: 55px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 15%;
     transition: all 0.3s ease;
     box-shadow: 0px 0px 15px var(--main-color);
 }

 .nav-item .icon:hover {
     background: var(--main-color);
     color: black;
     box-shadow: 0px 0px 20px var(--main-color);
 }

 /* ======= LIVE CHAT BUTTON ======= */
 

 

 .nav-item.chat.active .icon .open {
     display: none;
 }

 .nav-item.chat.active .icon .close {
     display: block;
 }

 /* ======= MOBILE RESPONSIVENESS ======= */
 @media (max-width: 991px) {
     .navbar {
         padding: 10px;
     }

     .nav-item {
         margin: 5px 0;
     }

     .reg_log_buttons button {
         width: 100%;
         margin: 5px 0;
     }
 }
 .footer {
     border-top: 3px solid rgba(0, 153, 255, 0.7);
     /* Neon border at the top */
     background: linear-gradient(145deg, #0d111c, #161a38);
     /* Subtle gradient background */
     position: relative;
     border-radius: 20px;
     /* Smooth, rounded corners */
     box-shadow: 0 8px 20px rgba(0, 153, 255, 0.2), 0 4px 15px rgba(0, 0, 0, 0.6);
     /* Soft glowing shadows */
     padding: 20px;
     overflow: hidden;
     /* Ensures neat layout */
     z-index: 10;
 }

 /* Animated Border Glow Effect */
 .footer::before {
     content: '';
     position: absolute;
     top: -3px;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, #ff5733, #ff9100, #00ffff, #ff5733);
     /* Vibrant gradient */
     animation: border-glow 5s linear infinite;
     /* Smooth animation */
 }

 /* Keyframes for Animated Glow */
 @keyframes border-glow {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 /* Footer Input Fields */
 .footer input {
     background: rgba(0, 0, 50, 0.8);
     /* Dark blue background */
     border: 1px solid rgba(0, 153, 255, 0.7);
     /* Neon border */
     color: #fff;
     font-family: 'Orbitron', sans-serif;
     padding: 12px 15px;
     border-radius: 20px;
     outline: none;
     box-shadow: 0 4px 10px rgba(0, 255, 255, 0.5);
     /* Glowing effect */
     transition: box-shadow 0.3s ease, transform 0.2s ease;
     width: 85%;
     margin-right: 10px;
 }

 .footer input:focus {
     box-shadow: 0 8px 20px rgba(0, 255, 255, 0.8);
     /* Stronger glow on focus */
     transform: scale(1.02);
     /* Subtle zoom effect */
 }

 /* Footer Buttons */
 .footer button {
     background: linear-gradient(45deg, #ff5733, #ff9100);
     /* Bright gradient */
     border: none;
     color: #fff;
     font-size: 16px;
     padding: 12px 18px;
     border-radius: 20px;
     cursor: pointer;
     font-family: 'Press Start 2P', cursive;
     transition: transform 0.2s ease, box-shadow 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 145, 0, 0.7);
 }

 .footer button:hover {
     transform: scale(1.1);
     /* Slight zoom on hover */
     box-shadow: 0 6px 20px rgba(255, 145, 0, 1);
     /* Stronger glow */
 }

 /* Footer Text (Optional) */
 .footer .footer-text {
     color: #a9a9a9;
     font-family: 'Orbitron', sans-serif;
     margin-top: 10px;
     text-align: center;
     font-size: 14px;
 }

 /* Footer Dynamic Glow Animation */
 .footer::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 4px;
     background: linear-gradient(90deg, #ff5733, #ff9100, #00ffff, #ff5733);
     /* Matching gradient */
     animation: border-glow 5s linear infinite;
     /* Same animation for cohesiveness */
     border-radius: 50%;
     opacity: 0.7;
 }
 
#last_offers {
    background-color: var(--black);
    overflow: unset !important;
}
 

/* Container for the scrolling elements */
#last_offers {
    display: flex;
    flex-direction: row;
    gap: 20px;
    animation: scroll-left 40s linear infinite; /* Continuous scrolling */
}

@keyframes scroll-left {
    from {
        transform: translateX(0); /* Start from the initial position */
    }
    to {
        transform: translateX(-100%); /* Move left by 100% of the container width */
    }
}

/* Offer Wrapper */
 

/* Offer Header */
.offer_stat-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.offer_stat-header img {
 
    border-radius: 50%;
    border: 3px solid #4caf50; /* Green border */
    object-fit: cover;
}

.offer_stat-header h6 {
    font-size: 16px;
    color: #00ffff; /* Neon cyan text */
    margin: 0 0 5px 15px;
    font-weight: bold;
}

.offer_stat-header p {
    font-size: 12px;
    color: #aaa;
    margin: 0 0 0 15px;
}

/* Offer Amount Styles */
 

.offer-amount:hover {
    transform: scale(1.1);
    /* Slight zoom on hover */
    box-shadow: 0 6px 20px rgba(138, 43, 226, 1);
    /* Stronger glow on hover */
}

/* Offer Stat Footer Styles */
.offer_stat-footer {
   
    /* Dark translucent background */
   
    /* Subtle border */
    border-radius: 10px;
    /* Smooth edges */
  
    text-align: center;
    /* Center-align text */
     
}

offer_stat-footer h6 {
    color: #00fa43;
    font-weight: bold;
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 0 2px 4px rgb(0 255 255);
}
.offer_stat-footer p {
    color: #2ff43d;
    /* Subtle gray for secondary text */
    font-size: 14px;
    /* Smaller font size */
    margin: 5px 0 0;
    font-family: 'Orbitron', sans-serif;
    /* Futuristic font */
}

.offer_stat-footer h6:hover {
    color: #ff9100;
    /* Change to a brighter color on hover */
    text-shadow: 0 4px 8px rgba(255, 145, 0, 1);
    /* Stronger glow on hover */
}

/* Animation for Extra Style */
.offer_stat-footer,
.offer-amount {
    animation: pulse 3s infinite ease-in-out;
    /* Subtle pulsating animation */
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}
 

/* Responsive Design */
@media (max-width: 768px) {
    .main_content {
        padding: 10px;
    }

    .offer-wrapper {
        max-width: 100%;
    }
}

.blur_15px {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: unset !important;
}

.price_area {
    padding: 50px 0;
    background-color: #141414;
    text-align: center;
}

.price_area .section-title h2 {
    font-size: 2.5rem;
    color: #fff;
    text-transform: uppercase;
}

.price_area .section-title p span {
    color: #0ef;
    /* Neon Blue */
}

/* Layout of Payment Methods */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.pricing_design {
    perspective: 1000px;
    width: 100%;
}

.single-pricing {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* 3D Hover Effect */
.single-pricing:hover {
    transform: translateY(-10px) rotateY(15deg);
    box-shadow: 0 15px 50px rgba(0, 255, 255, 0.8);
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    /* Rounded corners for a modern look */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    /* Shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition */
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /* Ensure the image also has rounded corners */
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Smooth zoom-in effect */
}

/* 3D Effect on Hover */
.image-container:hover {
    transform: scale(1.05) rotateY(15deg) rotateX(5deg);
    /* Slight zoom and rotation */
    box-shadow: 0 25px 60px rgba(0, 255, 255, 0.8);
    /* Glowing shadow effect */
}

.image-container:hover img {
    transform: scale(1.1);
    /* Zoom effect */
    filter: brightness(1.2);
    /* Brighten image on hover */
}

/* Neon Glowing Border Effect */
.image-container::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(0, 255, 255, 0.7);
    /* Neon glow border */
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover::after {
    opacity: 1;
    /* Glow border on hover */
}

/* Add this for responsiveness on mobile */
@media (max-width: 768px) {
    .image-container {
        border-radius: 10px;
        /* Adjust border radius on smaller screens */
    }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .col-lg-3 {
        flex: 1 1 45%;
        /* 2 cards per row on medium screens */
    }
}

@media (max-width: 768px) {
    .col-lg-3 {
        flex: 1 1 100%;
        /* 1 card per row on small screens */
    }

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

/* Neon Glow Effect for Titles and Hover */
.single-pricing:hover img {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.section-title h2,
.section-title p {
    text-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.8);
}

/* Add subtle animation to image on load */
.single-pricing img {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* General Sidebar Styling */
.sidebar_nav {
    width: 12rem;
    height: 100vh;
    background: #131731;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

/* Hidden by default on smaller screens */
.sidebar_nav.hidden {
    transform: translateX(-100%);
}

/* Button to toggle sidebar */
.sidebar_toggle {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1100;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 18px;
}

/* Sidebar Content */
.nav_items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav_item {
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.nav_item:hover {
    transform: translateX(10px);
    box-shadow: 0px 4px 20px rgba(255, 255, 255, 0.3);
}

.nav_link {
    display: flex !important;
    align-items: center;
    text-decoration: none;
    padding: 10px 15px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border-radius: 12px;
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav_link:hover {
    background: linear-gradient(135deg, #ff512f, #dd2476);
    color: #fff;
}

.nav_icon {
    font-size: 22px;
    margin-right: 15px;
}

.nav_text {
    font-size: 16px;
}

/* Footer Styling */
.sidebar_footer {
    margin-top: auto;
}

.country-flag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .sidebar_nav {
        width: 200px;
        transform: translateX(-100%);
    }

    .sidebar_nav.visible {
        transform: translateX(0);
    }

    .sidebar_toggle {
        display: flex;
    }

    .nav_text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sidebar_nav {
        width: 180px;
    }

    .nav_icon {
        font-size: 20px;
    }

    .nav_text {
        display: none;
        /* Hide text for smaller screens */
    }
}

/* Sticky slider container */
.cards-slider {
    position: sticky;
    top: 20px;
    /* Adjust to where you want the slider to stick */
    z-index: 10;

    padding: 20px;

    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: nowrap;
}

/* Card wrapper - animates horizontally */
.card-item {
    display: inline-block;
    min-width: 250px;
    /* Adjust card size */
    animation: slide-left 20s linear infinite;
}

 
/* Animation for moving cards */
@keyframes slide-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-item {
        min-width: 200px;
    }

    
 
}

 

/* General styles for the navbar */
#desktop-nav {
    background: linear-gradient(135deg, #282f57, #2c3569);
    border-bottom: 2px solid #444;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}



.left_sidebar .inner_sidebar ul {
    list-style: none;
    padding: 40px 0 !important;
    width: 100%;
}

/* Style for the widget items */
.widget-wrapper {
    border-radius: 12px;
    background: linear-gradient(145deg, #6a0dad, #8a2be2);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;

}

.widget-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.7);
}

.widget .icon i {
    font-size: 1.4rem;
    color: #fff;
    transition: transform 0.3s ease;
}

.widget .widget-content {
    color: #fff;
    padding: 5px;
}

.widget .widget-content .head {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 2px;
}

.widget .widget-content .title {
    font-size: 0.9rem;
    margin: 0;
}

 

 


/* Responsive design for smaller screens */
@media (max-width: 991px) {
    #desktop-nav {
        padding: 10px;
    }

 

    .widget-wrapper {
        margin: 3px;
    }

    .widget .widget-content .head {
        font-size: 0.9rem;
    }

    .widget .widget-content .title {
        font-size: 0.8rem;
    }
}




.topbar {
    max-width: 300px;
}

.topbar_content .title i {
    font-size: 22px;
}

.topbar .tabs {
    max-width: 200px;
    padding: 2px;
}

.topbar .tabs button {
    padding: 2px 25px;
}

.topbar .tabs button.active {
    background: var(--green);
}

.top_3 .user_card {
    -webkit-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
}

.top_3 .topOne {
    width: 200px;
    height: 183px;
}

.top_3 .second,
.top_3 .third {
    width: 190px;
    height: 155px;
    margin-bottom: -29px;
}

@media (max-width: 740px) {
    .top_3 .topOne {
        width: 160px;
    }

    .top_3 .second,
    .top_3 .third {
        width: 150px;
    }
}

@media (max-width: 600px) {
    .top_3 .topOne {
        width: 140px;
    }

    .top_3 .second,
    .top_3 .third {
        width: 130px;
        height: 154px;
    }

    .top_3 .box {
        padding: 0 !important;
    }
}

@media (max-width: 485px) {
    .leaderboard {
        padding: 0 !important;
    }

    .top_3 .topOne {
        width: 130px;
    }

    .top_3 .second,
    .top_3 .third {
        width: 120px;
    }
}

.top_3 .user_image {
    width: 75px;
    height: 75px;
    top: -67px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top_3 .topOne .user_image {
    width: 80px;
    height: 80px;
}

.topOne .details {
    padding-top: 5.1rem;
}

.top_3 .details .username,
.top_3 .details span {
    width: 98px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.top_3 .star_icon {
    width: 30px;
    top: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top_3 .crown_icon {
    top: -85px;
    right: 30px;
    width: 45px;
    transform: rotate(28deg);
}

@media (max-width: 740px) {
    .top_3 .crown_icon {
        top: -90px;
        right: 5px;
        width: 50px;
    }
}

@media (max-width: 485px) {
    .top_3 .crown_icon {
        top: -87px;
        right: 0px;
        width: 43px;
    }
}

.rank_data .you_earned .currency_icon {
    height: 12px;
}

.rank_data .user_info {
    width: 300px;
}

@media (max-width: 900px) {
    .rank_data .user_info {
        width: 250px;
    }
}

@media (max-width: 550px) {
    .rank_data .user_info {
        width: 200px;
    }
}

.rank_data .user_info .username h3 {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.rank_data .completed_offers {
    width: 200px;
}

.rank_data .border_bottom:last-of-type {
    -webkit-border-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0 !important;
}

.rank_data .rank_user .count_box {
    width: 35px;
    height: 35px;
}

.rank_data .rank_user .user_img img {
    width: 35px;
    height: 35px;
}

.widget-content h6 {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.widget-content p {
    font-size: 14px;
    color: #aaa;
}

.widget-wrapper {
    margin-top: 20px;
    padding: 10px;
    background: linear-gradient(145deg, #272760, #31316e);
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.widget-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.2);
}

 

/* Sidebar Styling */
.sidebar_nav {
    position: fixed;
    /* Keep sidebar fixed */
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    z-index: 1000;
    /* Ensure sidebar stays on top */
    background: linear-gradient(145deg, #1f1f3f, #272760);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
 

/* Responsive Adjustments */
 

@media (max-width: 576px) {
   
}
.price_area {
    padding: 50px 0;
    background-color: #141414;
    text-align: center;
}

.price_area .section-title h2 {
    font-size: 2.5rem;
    color: #fff;
    text-transform: uppercase;
}

.price_area .section-title p span {
    color: #0ef;
    /* Neon Blue */
}

/* Layout of Payment Methods */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.pricing_design {
    perspective: 1000px;
    width: 100%;
}

.single-pricing {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* 3D Hover Effect */
.single-pricing:hover {
    transform: translateY(-10px) rotateY(15deg);
    box-shadow: 0 15px 50px rgba(0, 255, 255, 0.8);
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    /* Rounded corners for a modern look */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    /* Shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition */
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /* Ensure the image also has rounded corners */
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Smooth zoom-in effect */
}

/* 3D Effect on Hover */
.image-container:hover {
    transform: scale(1.05) rotateY(15deg) rotateX(5deg);
    /* Slight zoom and rotation */
    box-shadow: 0 25px 60px rgba(0, 255, 255, 0.8);
    /* Glowing shadow effect */
}

.image-container:hover img {
    transform: scale(1.1);
    /* Zoom effect */
    filter: brightness(1.2);
    /* Brighten image on hover */
}

/* Neon Glowing Border Effect */
.image-container::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(0, 255, 255, 0.7);
    /* Neon glow border */
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover::after {
    opacity: 1;
    /* Glow border on hover */
}

/* Add this for responsiveness on mobile */
@media (max-width: 768px) {
    .image-container {
        border-radius: 10px;
        /* Adjust border radius on smaller screens */
    }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .col-lg-3 {
        flex: 1 1 45%;
        /* 2 cards per row on medium screens */
    }
}

@media (max-width: 768px) {
    .col-lg-3 {
        flex: 1 1 100%;
        /* 1 card per row on small screens */
    }

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

/* Neon Glow Effect for Titles and Hover */
.single-pricing:hover img {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.section-title h2,
.section-title p {
    text-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.8);
}

/* Add subtle animation to image on load */
.single-pricing img {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* General Sidebar Styling */
.sidebar_nav {
    width: 12rem;
    height: 100vh;
    background: #131731;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

/* Hidden by default on smaller screens */
.sidebar_nav.hidden {
    transform: translateX(-100%);
}

/* Button to toggle sidebar */
.sidebar_toggle {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1100;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 18px;
}

/* Sidebar Content */
.nav_items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav_item {
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.nav_item:hover {
    transform: translateX(10px);
    box-shadow: 0px 4px 20px rgba(255, 255, 255, 0.3);
}

.nav_link {
    display: flex !important;
    align-items: center;
    text-decoration: none;
    padding: 10px 15px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border-radius: 12px;
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav_link:hover {
    background: linear-gradient(135deg, #ff512f, #dd2476);
    color: #fff;
}

.nav_icon {
    font-size: 22px;
    margin-right: 15px;
}

.nav_text {
    font-size: 16px;
}

/* Footer Styling */
.sidebar_footer {
    margin-top: auto;
}

.country-flag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .sidebar_nav {
        width: 200px;
        transform: translateX(-100%);
    }

    .sidebar_nav.visible {
        transform: translateX(0);
    }

    .sidebar_toggle {
        display: flex;
    }

    .nav_text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sidebar_nav {
        width: 180px;
    }

    .nav_icon {
        font-size: 20px;
    }

    .nav_text {
        display: none;
        /* Hide text for smaller screens */
    }
}

/* Sticky slider container */
.cards-slider {
    position: sticky;
    top: 20px;
    /* Adjust to where you want the slider to stick */
    z-index: 10;

    padding: 20px;

    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: nowrap;
}

/* Card wrapper - animates horizontally */
.card-item {
    display: inline-block;
    min-width: 250px;
    /* Adjust card size */
    animation: slide-left 20s linear infinite;
}
 

 
/* General styles for the navbar */
#desktop-nav {
    background: linear-gradient(135deg, #282f57, #2c3569);
    border-bottom: 2px solid #444;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}


.left_sidebar .inner_sidebar ul {
    list-style: none;
    padding: 40px 0 !important;
    width: 100%;
}

/* Style for the widget items */
.widget-wrapper {
    border-radius: 12px;
    background: linear-gradient(145deg, #6a0dad, #8a2be2);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;

}

.widget-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.7);
}

.widget .icon i {
    font-size: 1.4rem;
    color: #fff;
    transition: transform 0.3s ease;
}

.widget .widget-content {
    color: #fff;
    padding: 5px;
}

.widget .widget-content .head {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 2px;
}

.widget .widget-content .title {
    font-size: 0.9rem;
    margin: 0;
}

 
 



/* Responsive design for smaller screens */
@media (max-width: 991px) {
    #desktop-nav {
        padding: 10px;
    }

  

    .widget-wrapper {
        margin: 3px;
    }

    .widget .widget-content .head {
        font-size: 0.9rem;
    }

    .widget .widget-content .title {
        font-size: 0.8rem;
    }
}




.topbar {
    max-width: 300px;
}

.topbar_content .title i {
    font-size: 22px;
}

.topbar .tabs {
    max-width: 200px;
    padding: 2px;
}

.topbar .tabs button {
    padding: 2px 25px;
}

.topbar .tabs button.active {
    background: var(--green);
}

.top_3 .user_card {
    -webkit-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
}

.top_3 .topOne {
    width: 200px;
    height: 183px;
}

.top_3 .second,
.top_3 .third {
    width: 190px;
    height: 155px;
    margin-bottom: -29px;
}

@media (max-width: 740px) {
    .top_3 .topOne {
        width: 160px;
    }

    .top_3 .second,
    .top_3 .third {
        width: 150px;
    }
}

@media (max-width: 600px) {
    .top_3 .topOne {
        width: 140px;
    }

    .top_3 .second,
    .top_3 .third {
        width: 130px;
        height: 154px;
    }

    .top_3 .box {
        padding: 0 !important;
    }
}

@media (max-width: 485px) {
    .leaderboard {
        padding: 0 !important;
    }

    .top_3 .topOne {
        width: 130px;
    }

    .top_3 .second,
    .top_3 .third {
        width: 120px;
    }
}

.top_3 .user_image {
    width: 75px;
    height: 75px;
    top: -67px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top_3 .topOne .user_image {
    width: 80px;
    height: 80px;
}

.topOne .details {
    padding-top: 5.1rem;
}

.top_3 .details .username,
.top_3 .details span {
    width: 98px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.top_3 .star_icon {
    width: 30px;
    top: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top_3 .crown_icon {
    top: -85px;
    right: 30px;
    width: 45px;
    transform: rotate(28deg);
}

@media (max-width: 740px) {
    .top_3 .crown_icon {
        top: -90px;
        right: 5px;
        width: 50px;
    }
}

@media (max-width: 485px) {
    .top_3 .crown_icon {
        top: -87px;
        right: 0px;
        width: 43px;
    }
}

.rank_data .you_earned .currency_icon {
    height: 12px;
}

.rank_data .user_info {
    width: 300px;
}

@media (max-width: 900px) {
    .rank_data .user_info {
        width: 250px;
    }
}

@media (max-width: 550px) {
    .rank_data .user_info {
        width: 200px;
    }
}

.rank_data .user_info .username h3 {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.rank_data .completed_offers {
    width: 200px;
}

.rank_data .border_bottom:last-of-type {
    -webkit-border-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0 !important;
}

.rank_data .rank_user .count_box {
    width: 35px;
    height: 35px;
}

.rank_data .rank_user .user_img img {
    width: 35px;
    height: 35px;
}

.widget-content h6 {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.widget-content p {
    font-size: 14px;
    color: #aaa;
}

.widget-wrapper {
    margin-top: 20px;
    padding: 10px;
    background: linear-gradient(145deg, #272760, #31316e);
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.widget-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.2);
}

.widget .icon i {
    font-size: 1.4rem;
    color: #fff;
    transition: transform 0.3s ease;
}

.widget .widget-content {
    color: #fff;
    padding: 5px;
}

.widget .widget-content .head {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 2px;
}

.widget .widget-content .title {
    font-size: 0.9rem;
    margin: 0;
}
.arti_content span {
    display: inline-block;
    white-space: nowrap;
    /* Prevent text from breaking into multiple lines */
}
.ssd_icon img {
    display: inline-block;
    margin-bottom: 30px;
    background: url(../img/dot.png);
    /* width: 80px; */
    height: 80px;
}

.single-pricing img {
    width: 100%;
    /* Set a fixed width of 222px */

    border-radius: 15px;
    object-fit: cover;
    /* Ensure the image fills the container without stretching */
}
.status_btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4caf50;
    /* Green button for "Paid" */

    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}
/* Sidebar Styling */
.sidebar_nav {
    position: fixed;
    /* Keep sidebar fixed */
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    z-index: 1000;
    /* Ensure sidebar stays on top */
    background: linear-gradient(145deg, #1f1f3f, #272760);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.accordion-item {
    border: 1px solid #151a32 !important;
    margin-bottom: 15px;
    -webkit-box-shadow: 0px 0px 150px 0px rgba(78, 67, 250, 0.06);
    box-shadow: 0px 0px 150px 0px rgba(78, 67, 250, 0.06);
    background: #151a32;
    border-radius: 30px;
    margin-bottom: 20px;
}
.text_gradient_2 {
    color: transparent;
    background: linear-gradient(92deg, rgb(0 255 78) 4.72%, rgb(0 239 144) 103.94%) text;
    letter-spacing: 0.8px;
    white-space: nowrap;
}
/* Main Content Styling */
.main_content {
    margin-left: 250px;
    /* Push content to the right of the sidebar */
    position: relative;
    z-index: 1;
    /* Ensure it's below the sidebar */
    overflow: hidden;
    /* Hide any overlapping content */
    padding: 20px;
}

/* Content Header */
.content_header {
    top: 0;
    z-index: 999;
}

 
/* Individual Cards */
 

/* Responsive Adjustments */
@media (max-width: 768px) {
    .main_content {
        margin-left: 0;
        /* Allow content to take full width on small screens */
    }

     

    

    .widgets_section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px;
    }

    .widget-wrapper {
        width: 90%;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
     
}

/* offer popularity toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--light-green);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--light-green);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    -webkit-border-radius: 34px;
    border-radius: 34px;
}

.slider.round:before {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.arti_content span {
    display: inline-block;
    white-space: nowrap;
    /* Prevent text from breaking into multiple lines */
}

.status_btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4caf50;
    /* Green button for "Paid" */

    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}