.lecture-access {
   padding: 40px 0;
   background: #f8f9fa;
}

/* ===== Lecture Content Card ===== */
.lecture-content {
   background: #ffffff;
   padding: 35px;
   border-radius: 16px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
   text-align: center;
}

/* ===== Icons ===== */
.success-icon i,
.lock-icon i {
   font-size: 3rem;
   color: #667eea;
}

.lock-icon i {
   color: #f5576c;
}

/* ===== Typography ===== */
.lecture-content h3 {
   color: #2d3748;
   font-weight: 600;
   font-size: 1.75rem;
}

.subtitle {
   color: #718096;
   font-size: 0.95rem;
}

.secure-text {
   color: #48bb78;
   font-size: 0.9rem;
   margin: 0;
}

/* ===== Steps Container (Stepper) ===== */
.steps-container {
   margin: 30px 0;
}

.step-item {
   display: flex;
   gap: 20px;
   margin-bottom: 0;
   position: relative;
}

.step-indicator {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0;
}

.step-circle {
   width: 40px !important;
   height: 40px !important;
   aspect-ratio: 1/1;
   background: #667eea;
   color: white;
   border-radius: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 1.1rem;
   box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
   z-index: 1;
}

.step-line {
   width: 2px;
   height: 100%;
   background: linear-gradient(to bottom, #667eea 0%, #e2e8f0 100%);
   margin-top: 8px;
   min-height: 60px;
}

.step-item:last-child .step-line {
   display: none;
}

.step-content {
   flex: 1;
   padding-bottom: 30px;
}

.step-title {
   color: #2d3748;
   font-weight: 600;
   font-size: 1.15rem;
   margin-bottom: 8px;
}

.step-desc {
   color: #718096;
   font-size: 0.9rem;
   margin-bottom: 15px;
}

.install-note {
   display: inline-flex;
   align-items: center;
   padding: 10px 16px;
   background: #edf2f7;
   border-radius: 8px;
   color: #4a5568;
   font-size: 0.85rem;
}

.install-note i {
   color: #667eea;
}

/* ===== Action Boxes (Old - Keeping for compatibility) ===== */
.action-box {
   background: #f7fafc;
   border: 2px solid #e2e8f0;
   border-radius: 12px;
   padding: 20px;
}

.action-header {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-weight: 600;
   color: #2d3748;
   margin-bottom: 15px;
   font-size: 1.05rem;
}

.badge-number {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   background: #667eea;
   color: white;
   border-radius: 50%;
   font-size: 0.9rem;
   font-weight: 700;
}

/* ===== Download Buttons ===== */
.download-buttons {
   display: flex;
   gap: 12px;
   justify-content: center;
}

.download-btn {
   padding: 12px 24px;
   background: white;
   border: 2px solid #e2e8f0;
   border-radius: 8px;
   text-decoration: none;
   color: #4a5568;
   font-weight: 500;
   transition: all 0.3s ease;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.download-btn i {
   font-size: 1.3rem;
}

.download-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   border-color: #667eea;
   color: #667eea;
}

/* ===== Primary Button ===== */
.btn-primary {
   background: #667eea;
   border: none;
   padding: 12px 32px;
   font-size: 1rem;
   font-weight: 500;
   border-radius: 8px;
   color: white;
   transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
   background: #5568d3;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

/* ===== Alerts ===== */
.alert {
   border-radius: 8px;
   border: none;
   padding: 12px 16px;
   font-size: 0.9rem;
   text-align: right;
}

.alert-danger {
   background: #fff5f5;
   color: #c53030;
   border-left: 3px solid #fc8181;
}

.alert-success {
   background: #f0fff4;
   color: #2f855a;
   border-left: 3px solid #68d391;
}

/* ===== Info Note ===== */
.info-note {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px;
   background: #edf2f7;
   border-radius: 8px;
   color: #4a5568;
   font-size: 0.85rem;
   margin-top: 20px;
}

.info-note i {
   color: #667eea;
}

/* ===== Video Wrapper ===== */
.video-wrapper {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
   .lecture-content {
      padding: 25px 20px;
   }

   .lecture-content h3 {
      font-size: 1.5rem;
   }

   .download-buttons {
      flex-direction: column;
   }

   .download-btn {
      width: 100%;
      justify-content: center;
   }
}

.btn-orange {
   color: white;
   background: orange;
   text-decoration: none;
}

.btn-orange:hover {
   color: white;
}

.card-statics {
   background: #013b4b !important;
   color: white;
   /* border-radius: 25px; */
}

.card-radius {
   border-radius: 76px !important;
   width: 85%;
   height: 100%;
   padding: 1%;
}

.user-circle {
   width: 160px; /* Adjust the size of the circular user image */
   height: 160px;
   border-radius: 50%;
}

.img-title {
   /* position: absolute; */
   /* top:40vh; */
   /* z-index: 3; */
   color: black;
   /* left:49%; */
}

.img-p {
   color: black;
   /* transform: translate(-50%, -50%); */
   /* z-index: 3; */
   width: 100%;
   /* overflow: hidden; */
   display: flex;
   justify-content: center;
}

.box {
   position: absolute;
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: center; /* Center items horizontally */
   justify-content: center; /* Center items vertically */
   top: 50%; /* Center vertically */
   left: 50%; /* Center horizontally */
   width: 100%;
   transform: translate(-50%, -50%);
}

.banner {
   margin-top: 7% !important;
}

.item {
   transition: transform 0.5s ease-in-out;
}

.item:hover {
   transform: scale(1.1);
}

#layer1 {
   position: absolute;
   width: 760px;
   height: 32vh;
   /* background-color: green; */
   z-index: 999; /* Place it above layer2 */
}

.container-responsive {
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding: 15% 15% 10% 15%;
   padding-top: 0;
}

@media (max-width: 768px) {
   /* Apply styles for screens with a maximum width of 768px (typical tablet and mobile sizes) */
   .container-responsive {
      padding: 0; /* Adjust padding for smaller screens */
   }

   #layer2 iframe {
      width: 80%; /* Set the width to 100% for responsiveness */
      height: auto; /* Maintain aspect ratio */
      max-width: 745px; /* Set a maximum width if needed */
   }

   #layer1 {
      display: none;
   }

   .hidden_shadow {
      /* background-color: red; */
      position: relative;
      z-index: 999;
      width: 760px;
      height: 34px;
   }
}

/* @media (max-width: 1024px) {
            .container-responsive {
                padding-left: 0;
            }
            #layer1 {
                position: relative;
                width: 760px;
                height: 370px;
                z-index: -1; 
            }
            .hidden_shadow{
                position: relative;
                z-index: -1;
                width: 760px;
                height: 37px;
            }
        } */
.hidden_shadow {
   /* background-color: red; */
   position: relative;
   z-index: 999;
   width: 760px;
   height: 34px;
}

#layer2 {
   position: relative;
   width: 100%;
   height: 100%;
   max-width: 745px;
   height: 419px;
   display: block;
   /* z-index: 9999;  */
}

/* Style for the iframes inside the second layer */
/* #layer2 iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        border: none;
        } */

/* Style for the new iframe (frame1) */
#frame1 {
   width: 100%;
   height: 100%;
   border: none;
}

a.text-dark:hover,
a.text-info:hover {
   text-decoration: none;
   color: #0d6efd !important;
}

.card-trans {
   display: flex;
}

.card-trans .card {
   flex: 1;
   border-radius: 18px;
}