.quiz p {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 30px;
    color: #000
}


    .quiz-card {
      background-color: #fff; /* Darker card */
      border-radius: 12px;
      padding: 20px;
    }
    .option {
      background-color: #88cc14;
      border: 1px solid #88cc14;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s;
          color: #fff;
    }
    .option:hover {
      background-color: #334155;
    }
    .form-check-input {
      display: none;
    }
    .form-check-label {
      display: block;
      width: 100%;
    }
    .mathts-real {
    padding: 10px;
    background: #ff00002e;
    border: 1px solid #ff000078;
  
}
.mathts-real h4 {
    font-size: 18px;
    color: #ff0000;
}
.realty-real {
    padding: 10px;
    background: #00800059;
    margin-top: 10px;
    border: 1px dashed #008000;
    margin-bottom: 10px;
}
.realty-real h4 {
    font-size: 18px;
    color: #88cc14;
}
.explain-real {
    background: #3976d638;
    padding: 10px;
   
    border: 1px solid #4f8dec;
}
.explain-real h4 {
    font-size: 18px;
    color: #4f8dec;
}
.solution-myth {
    background: #39383d;
    padding: 10px;
    border-radius: 9px;
}
.solution-real {
    background: #39383d;
    padding: 10px;
    border-radius: 9px;
}
.solution-exp {
    background: rgb(57, 56, 61);
    padding: 10px;
    border-radius: 10px;
    margin-top: 30px;
}
ul.tools-showcase {
    list-style: circle;
    padding: 5px 0px 0px 18px;
}
.aitools-bg {
    background: #88cc14;
    padding: 15px;
    border-radius: 10px;
}
.aitools-content {
    background: #d8d8d857;
    padding: 10px;
}
.aitools-des {
    background: #00000008;
    padding: 5px;
        border-radius: 10px;
}
.aitools-des span {
    color: #fff;
}
.aitools-content p {
    background: #d8d8d857;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    color: #fff;
    border-radius: 5px;
}
.aitools-des ul {
    margin-top: 5px;
}
.finalkon-content {
    padding: 30px;
    background: #88cc14;
    border-radius: 10px;
}
.single-approach-box.finkon h4 {
    font-size: 17px;
    color: #cc3714;
}
.single-approach-box.finkonw h4 {
    font-size: 17px;
    color: #f17e15;
}
.single-approach-box.finkonwl h4 {
    font-size: 17px;
    color: #88cc14;
}
.finalkon-content h3 {
    font-size: 25px !important;
}
.qs-ans {
    padding: 10px;
    background: #00800059;
    margin-top: 10px;
    border: 1px dashed #008000;
    margin-bottom: 10px;
}
.realty-real h4 {
    font-size: 18px;
    color: #88cc14;
}
.qs-ans-wrong {
    padding: 10px;
    background: #e88e2859;
    margin-top: 10px;
    border: 1px dashed #e6a456;
    /* margin-bottom: 10px; */
}
.qs-ans-wrong h4 {
    font-size: 18px;
    color: #f17e15;
}
.aitools-content1 {
    background: #ffffff2e;
    padding: 10px;
}
.aitools-content1 h3 {
    font-size: 18px !important;
    /* margin: 0px !important; */
}
.aitools-content1 p {
    color: #fff;
    line-height: 20px;
}
code.language-python.demo-excer {
    color: #88cc14;
}
.solution-myth.livecode h3 {
    color: #fff;
    margin-top: 10px;
}
.solution-exp.realworld h3 {
    color: #e4c100;
}
.solution-real.work {
    margin-top: 30px;
}
.solution-real.work h3 {
    color: #88cc14;
}
ul.livedeo-mod {
    list-style: decimal;
    padding: 0px 0px 0px 25px;
    font-size: 23px;
    color: #88cc14;
}
ul.livedeo-mod p {
    color: #ccccd1;
}
ul.livedeo-mod h5 {
    color: #fff;
}
.solution-details-area.solutions-content1 {
    border: 2px dashed #88cc14;
    margin: 5px 0px 6px;
    padding: 20px;
}
.solution-details-area.solutions-content1:hover {
    border: 2px dashed #ec6868;
}
.solution-content1 h6 {
    border: 1px solid #88cc14;
    padding: 5px 10px 5px 10px;
    text-align: center;
    /* font-size: 16px; */
    cursor: move;
    min-height: 90%;
    /* line-height: 104px; */
    align-items: center;
    text-align: -webkit-center;
    justify-content: center;
}
.solution-content1 h6:hover {
    transform: scale(1.1);
}
.single-counter1 {
    border: 1px solid #202132;
    padding: 15px 25px 20px 150px;
    position: relative;
    margin-bottom: 30px;
}
.single-counter1 i {
    font-size: 55px;
    color: #88cc14;
    position: absolute;
    top: 5px;
    left: 30px;
    line-height: 1;
    border-right: 1px solid #202132;
    padding-right: 30px;
        padding-top: 15px;
}
.single-counter1 h2 {
    color: #88cc14;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1;
}
.btn.enterprise h5 {
      font-size: 16px;
}
.btn.enterprise {
    background: #5b5d62;
    margin-bottom: 10px;
    text-align: left;
}
.btn.malware {
    background: #5b5d62;
    margin-bottom: 10px;
    text-align: left;
}
.btn.malware h5 {
    font-size: 16px;
}
.btn.malware p {
    font-size: 14px;
   color: #fff;
    margin: 0px;
}
.btn.enterprise p {
    font-size: 14px;
    /* line-height: 20px; */
    margin: 0px;
    color:#fff;
}
.btn.enterprise .holedata i {
    color: #88cc14;
}
.btn.malware .holedata i {
    color: #cc2014;
}
.alert-card {
      background-color: #88cc1469;
      border-radius: 10px;
      padding: 15px 20px;
      color: #fff;
    }
    .status-badge {
      font-size: 0.75rem;
      font-weight: bold;
      padding: 4px 8px;
      border-radius: 6px;
      background-color: #0f5132; /* green for LOW */
      color: #00ff88;
    }
    .blocked-btn {
      font-size: 0.75rem;
      font-weight: bold;
      padding: 4px 12px;
      border-radius: 12px;
      background-color: #00bfff;
      color: #000;
      border: none;
    }
    .time-text {
      font-size: 0.8rem;
      color: #bbb;
    }
    
     .threat-card {
      background-color: #36373b;
      border-radius: 10px;
      padding: 20px;
      color: #fff;
      max-width: 400px;
    }
    .threat-title {
      color: #b266ff; /* purple title */
      font-weight: bold;
      margin-bottom: 20px;
    }
    .threat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 1rem;
    }
    .trend-up {
      color: #ff4444;
    }
    .trend-down {
      color: #00ff66;
    }
    .trend-warning {
      color: #ffaa33;
    }
    
    .system-health-card {
    background-color: #1a1a2e;
    color: white;
    padding: 20px;
    
    border-radius: 8px;
    width: 100%;
    max-width: 500px; /* Max width for better presentation */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.system-health-title {
    color: #00BFFF;
    font-weight: bold;
    margin-bottom: 20px;
  
}

.metric-container {
    margin-bottom: 20px;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.metric-header h5 {
    color: #fff;
}
.metric-value {
    font-size: 1.1em;
}

.progress-bar-background {
    width: 100%;
    background-color: #333;
    height: 15px;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 5px;
}

.cpu-progress .progress-bar-fill {
    background-color: #28a745; /* Green for CPU */
}

.memory-progress .progress-bar-fill {
    background-color: #ffc107; /* Orange for Memory */
}


      
   .subscribe-content1 span {
    background: #88cc14;
    border-radius: 50px;
    padding: 5px;
    margin: 0px 0px 0px 5px;
}
        .progress-section {
            background-color: #0d0d1a;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .progress-bar-container {
            flex-grow: 1;
            display: flex;
            align-items: center;
            margin: 0 15px;
        }
        .progress-dot {
            width: 12px;
            height: 12px;
            background-color: #00BFFF;
            border-radius: 50%;
            margin: 0 5px;
        }
        .progress-line {
            height: 2px;
            background-color: #333;
            flex-grow: 1;
        }
        .progress-dot.active {
            background-color: #00BFFF;
        }
        .progress-dot.inactive {
            background-color: #555;
        }
        .progress-line.active {
            background-color: #00BFFF;
        }
        .step-info {
            font-weight: bold;
        }
        .code-panel, .output-panel {
            background-color: #0d0d1a;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 20px;
            min-height: 350px;
            display: flex;
            flex-direction: column;
        }
        .panel-header {
            color: #00BFFF;
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        .panel-header i {
            margin-right: 8px;
        }
        .code-description {
            color: #b0b0b0;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        .code-editor {
            background-color: #2a2a4a;
            border: 1px solid #00BFFF; /* Changed border color */
            border-radius: 5px;
            padding: 15px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9rem;
            white-space: pre-wrap;
            word-break: break-all;
            flex-grow: 1;
            margin-bottom: 15px;
            overflow-y: auto;
            color: #ADFF2F; /* Greenish color for code */
            position: relative;
        }
        .code-editor::before {
            content: "> security_lab.py"; /* File name */
            color: #00BFFF;
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.8em;
        }
        .code-editor pre {
            margin: 15px 0 0 0; /* Adjust margin for file name */
        }

        .output-content {
            flex-grow: 1;
            color: #b0b0b0;
            margin-bottom: 15px;
            overflow-y: auto;
        }
        .btn-action {
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn-execute {
            background-color: #28a745;
            color: white;
        }
        .btn-execute:hover {
            background-color: #218838;
        }
        .btn-reset {
            background-color: #ffc107;
            color: #333;
        }
        .btn-reset:hover {
            background-color: #e0a800;
        }
        .btn-previous {
            background-color: #6c757d;
            color: white;
        }
        .btn-previous:hover {
            background-color: #5a6268;
        }
        .btn-reset-all {
            background-color: #dc3545;
            color: white;
        }
        .btn-reset-all:hover {
            background-color: #c82333;
        }
        .btn-next-step {
            background-color: #00BFFF;
            color: white;
        }
        .btn-next-step:hover {
            background-color: #0099cc;
        }
        .code-explanation {
            background-color: #0d0d1a;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }
        .explanation-header {
            color: #00BFFF;
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        .explanation-header i {
            margin-right: 8px;
        }
        .explanation-text {
            color: #b0b0b0;
        }
        li.nav-item {
    color: #88cc14;
}
.nav-link:focus, .nav-link:hover {
    color: #88cc14;
}
.nav-link {
    color: #88cc14;
}