/* Animated roller coaster styling */

:root {
	--durrr: 1.5s;
	--colorrr1: #17181c;
	--colorrr2: #e3e4e8;
	
}

.Preparation-coaster {
	color: var(--colorrr1);
	font: 1em/1 "Kalpurush", Helvetica, sans-serif;
	font-size: calc(12px + (36 - 12) * (100vw - 320px) / (1280 - 320));
	margin: 3em auto 0;
	width: 20.5em;
}

div.Preparation-coaster {
	margin-bottom: 2em;
}
.b-arm,.b-head,.b-table,.b-wheel,.b-belt {
	display: inline-block;
}

/* Emoticon parts */

.b-head {
	animation: b-headMove var(--durrr) linear infinite;
	transform-origin: 25% 25%;
}
.b-arm {
	animation: b-armMove var(--durrr) linear infinite;
	transform-origin: 25% 25%;
  margin-right:25px;
}
.b-belt,
.b-belt:before {
	background: repeating-linear-gradient(
			90deg,
			transparent,
			transparent 0.25em,
			currentColor 0.25em,
			currentColor 3.3em
		)
		0 0 / 100% 0.1em repeat-x;
}
.b-belt {
	animation: b-beltL var(--durrr) linear infinite;
	position: relative;
	width: 13.2em;
	height: 0.8em;
	vertical-align: middle;
}
.b-realbelt {
	color: transparent;
}
.b-belt:before {
	animation: b-beltR var(--durrr) linear infinite;
	background-position: 0 100%;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.b-table:nth-of-type(3) {
	animation: b-tableFlip var(--durrr) linear infinite;
}
.b-table:nth-of-type(n + 4) {
	animation: b-tableMove var(--durrr) linear infinite;
}
.b-wheel {
	animation: b-rotate var(--durrr) linear infinite;
	transform-origin: 50% 60%;
}



/* Animations */
@keyframes b-headMove {
	from,
	to {
		transform: rotate(1deg);
	}
	10%,
	80% {
		transform: rotate(-11deg);
	}
}

@keyframes b-armMove {
	from,
	to {
		transform: rotate(90deg);
	}
	10%,
	80% {
		transform: rotate(0deg);
	}
}
@keyframes b-beltL {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -3.3em 0;
	}
}
@keyframes b-beltR {
	from {
		background-position: 0 100%;
	}
	to {
		background-position: 3.3em 100%;
	}
}
@keyframes b-rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(-1turn);
	}
}
@keyframes b-tableFlip {
	from {
		transform: translate(0) rotate(0);
	}
	12.5% {
		transform: translate(0.5em, -2em) rotate(45deg);
		opacity:.7;
	}
	25% {
		transform: translate(2em, -3.5em) rotate(90deg);
		opacity:.3;
	}
	37.5% {
		transform: translate(3.25em, -4em) rotate(135deg);
		opacity:.1;
	}
	50% {
		transform: translate(4.5em, -4em) rotate(180deg);
		opacity:0.01;
	}
	62.5% {
		transform: translate(5.75em, -4em) rotate(225deg);
		opacity:.4;
	}
	87.5% {
		transform: translate(8.75em, -2em) rotate(315deg);
		opacity:.9;
	}
	to {
		transform: translate(9.85em, 0) rotate(360deg);
		opacity:1;
	}
}
@keyframes b-tableMove {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-3.3em);
	}
}




/* End of Animated roller coaster */



/* My custom-made css will go here */
.fttheme-cd-content h2{
    font-size:32px;
}

.bg-fttheme-section-bg-2 {
    background-color: var(--fttheme-section-bg-2);
}

.container-md>.fttheme-course-filter{
  display: block;
}

/**----------------------------------------
    Border animation CSS
----------------------------------------*/
.gradient-border {
  background: #ffffff;
  border-radius: 120px;
  position: relative;
}
@media screen and (max-width: 768px){
.gradient-border {
  background: #ffffff;
  border-radius: 1px;
  position: relative;
}
}
@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gradient-border::after, .gradient-border::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), transparent 70%, #FF5D33, #fff7b7);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  /* border-radius: 10px; */
  animation: 7s spin linear infinite;
}
.gradient-border::before{
  filter: blur(1.7rem);
  opacity: 0.7;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}


/* +---------------------------------------- 
Live Enrolling course pulse css
-------------------------------------------- */
.course-live-pulse {
  margin:0 7px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d3272d;
  box-shadow: 0 0 0 rgba(204, 44, 65, 0.4);
  animation: pulse 2s infinite;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 97, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204, 44, 87, 0);
      box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
      box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
  }
}
/* End live enrolling course pulse css */

/* ----------------------------------------
Front-page course card more info section css
-----------------------------------------*/
.fttheme-course-card-more-info{
    margin: 20px 20px 0 0;
    border-top:1px solid #ddd;
    border-left: 1px solid #ddd;
    padding:10px;
}
.fttheme-course-card-more-info> *:not(:last-child){
    border-right: 1px solid #ddd;
    padding-right:10px;
}
.fttheme-course-card-more-info:first-child{
  padding-left:15px;
}
@media screen and (max-width: 768px) { 
  .fttheme-course-card-more-info {
    flex-direction: column; 
    align-items: flex-start;
    gap: 1px;
  }
  .fttheme-course-card-more-info> *:not(:last-child){
    border-right: none;
    padding-right:0px;
    border-bottom: 1px solid #ddd;
    padding-bottom:1px;
    flex:none;
    float:left;
}
}
/* End of front-page course card more info section css */


/* ---------------------------------------- 
Some Extra css for animated pulse things  
-----------------------------------------*/
.animate-pulse-thing {
	animation: animate-pulse-thing 3s linear infinite;
}
@keyframes animate-pulse-thing {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7),
			0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	40% {
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0),
			0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	80% {
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0),
			0 0 0 9px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0),
			0 0 0 9px rgba(255, 255, 255, 0);
	}
}

/* End of animate pulse */


/* LifterLMS custom styles */
 .llms-form-field.llms-cols-6 {
    width: 100%; /* My correction */
  }

  .llms-form-field.llms-cols-3 {
    width: 100%;
  }
 
  /* Hiding lifterLMS meta info from Not-logged users course page */
.llms-meta-info{
  display:none;
} 

/* LifterLMS access plan styling */
.llms-access-plan .llms-access-plan-content,
.llms-access-plan .llms-access-plan-footer {
  background: #F9F8FF;
}
  
  /* lifter lms student dashboard styling */

  .llms-sd-nav {
    max-width: 30%;
    float: left;
    overflow: none;
    min-height: auto;
    padding:0 50px 0 20px;
  }
.llms-sd-nav ul li {
    min-width:100%;
    list-style: none;
    background:#ddd;
}
.llms-sd-nav ul li a{
    text-decoration: none;
    margin-left:20px;
    font-size: calc(0.2666 * 6vw);
}
.llms-sep{
    display:none;
}

.llms-sd-tab {
    max-width: 70%;
    overflow: hidden;
}
 
.llms-sd-item.current {
  background-color: #9360ea; /* Default active background color */
  color: white; /* Text color */
  border-radius: 8px;
  /* Apply the animation */
  animation: bg-pulse-color 4s ease-in-out infinite alternate;
}
.llms-sd-item.my-endpoint{
  background-color: rgb(239, 212, 212);
} 

/* Define the animation keyframes */
@keyframes bg-pulse-color {
  0% {
    background-color: #c193f2; /* A standard blue */
    box-shadow: 0 0 0px rgba(112, 142, 226, 0.4); /* Subtle glow effect start */
  }
  100% {
    background-color: #d8b0f2; /* A slightly darker blue */
    box-shadow: 0 0 15px rgba(210, 173, 243, 0.704); /* Subtle glow effect end */
  }
}
.llms-sd-notification-center{
    max-width: 70%;
    float:left;
}
.llms-sd-section.llms-sd-grades>.llms-table{
    max-width: 70%;
    float:left;
}
/* The footer was interfering with the layout */
.fttheme-footer-content-wrap{
  clear:both;
}
/* End of footer interference */
.llms-person-form-wrapper{
  max-width: 70%;
  float:left;
}
.orders-table{
  max-width: 70%;
  float:left;
}
.llms-single-course-grades{
  max-width: 70%;
}

/* LLMS progress bar animation - color pulse */
.llms-progress .progress-bar-complete {
  animation: progress-bar-pulse 4s ease-in-out infinite alternate;
}

@keyframes progress-bar-pulse {
  0% {
    background-color: #ee3482;
    box-shadow: 0 0 0px rgba(246, 114, 213, 0.369);
  }
  100% {
    background-color: #e7eb5d;
    box-shadow: 0 0 15px rgba(251, 243, 153, 0.372);
  }
}


/* LLMS lost pasword page css */
.llms-lost-password-form {
  max-width: 60%;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  overflow: hidden;
}

/* Responsive adjustments for small screens */
@media screen and (max-width: 600px){
  .llms-sd-items {
  display: none;
  }
  .llms-sd-header h2{
    padding-top:25px;
  }
  .llms-lost-password-form {
  max-width: 70%;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  overflow: hidden;
}
}



/* LifterLMS Accordion Custom Styles  */
/* Container Styles */
/* Container */
.llms-accordion-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

/* Header Trigger */
.llms-accordion-trigger {
    background: #F9F8FF;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

/* Animation Grid - Keeps it closed on load */
.llms-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
}

.llms-accordion-item.is-open .llms-accordion-content {
    grid-template-rows: 1fr;
}

.llms-accordion-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 15px;
}

/* Lesson Styling */
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #eee;
}
.no-lessons{font-style: italic;}
.lesson-left { display: flex; align-items: center; gap: 10px; }
.lesson-right { display: flex; align-items: center; gap: 15px; }

/* Labels & Icons */
.free-label {
    background: #e8f5e9;
    color: #27ae60;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
}
.duration { font-size: 0.85em; color: #777; }
.icon { transition: transform 0.3s; font-size: 20px; }
.llms-accordion-item.is-open .icon { transform: rotate(180deg); }
/* End of LifterLMS Accordion Custom Styles */


.ytp-impression-link{
  display:none;
}
.watch-on-youtube-button-wrapper{
  display:none;
}
.ytp-chrome-top-buttons{
  display:none;
}







/* --- LifterLMS Custom Lesson Page Layout --- */

/* --- Dashboard Wrapper & Layout --- */
#ft-dash-isolation {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Sidebar Container */
.lesson-sidebar-container {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04) !important;
}

.sidebar-header {
    background: #0f172a !important; /* Premium Midnight Navy */
    padding: 1.25rem !important;
}

/* --- Course Outline (Syllabus) --- */
.dashboard-outline .llms-course-outline {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Section Header Styles */
.dashboard-outline .section-header {
    padding: 14px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.dashboard-outline .section-header:hover {
    background: #f1f5f9 !important;
}

.dashboard-outline .section-title {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #334155 !important;
    flex-grow: 1;
}

/* Accordion Caret Icon */
.llms-collapse-caret {
    margin-right: 12px;
    color: #94a3b8;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.llms-section--closed .llms-collapse-caret {
    transform: rotate(-90deg);
}

/* Lesson Items */
.dashboard-outline .llms-lesson {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff;
    border-bottom: 1px solid #f8fafc;
}

.dashboard-outline .llms-lesson li {
    display: flex;
    align-items: center;
    padding: 10px 20px !important;
    transition: all 0.2s ease;
}

.dashboard-outline .llms-lesson:hover {
    background: #f0f7ff !important;
}

.dashboard-outline .llms-lesson a {
    text-decoration: none !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: block;
    width: 100%;
}

/* Active Lesson Highlight */
.dashboard-outline .current-lesson {
    background: #eff6ff !important;
    border-left: 4px solid #4f46e5 !important;
}

.dashboard-outline .current-lesson a {
    color: #2563eb !important;
    font-weight: 700 !important;
}

/* Completed Lesson Checkmark */
.llms-lesson-complete.done {
    color: #10b981 !important;
    margin-right: 10px;
    font-size: 14px;
}

/* --- Content Area Styling --- */
#ft-main-scope {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

.fttheme-lesson-content-header h1 {
    letter-spacing: -0.025em;
    color: #0f172a;
}

/* Video Wrapper */
.llms-video-wrapper {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Favorite Button */
.llms-favorite-btn {
    background: #fff5f5 !important;
    border: 1px solid #feb2b2 !important;
    color: #e53e3e !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s;
}

/* Navigation Buttons (Prev/Next) */
.llms-course-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
    border-top: 1px solid #f1f5f9;
    padding-top: 30px;
}

.llms-lesson-preview section a {
    all: unset;
    cursor: pointer;
    display: block;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease;
    background: #fff;
}

.llms-lesson-preview section a:hover {
    border-color: #4f46e5 !important;
    background: #f8fafc !important;
    transform: translateY(-2px);
}

.llms-pre-text {
    font-size: 11px;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
}

.llms-lesson-title {
    font-weight: 700;
    color: #1e293b;
}

/* Footer Toggles */
.llms-syllabus-footer {
    padding: 15px !important;
    text-align: center;
    background: #f8fafc !important;
    font-size: 12px;
}

.llms-collapse-toggle {
    color: #6366f1 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}


#ft-sidebar-scope{
  max-width: 30%;
}
@media screen and (max-width: 1000px){
  #ft-sidebar-scope{
    max-width: 100%;
  }
  
}
/* --- End of LifterLMS Custom Lesson Page Layout --- */

/* Course search dropdown styles */
.fttheme-header-top-search {
    position: relative; /* Keep results attached to this box */
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.search-results-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results-dropdown li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.search-results-dropdown li a:hover {
    background-color: #f8f8f8;
}
.no-results-msg {
    padding: 12px 15px;
    color: #888;
    font-size: 14px;
    background: #fff;
    text-align: center;
    border-bottom: 1px solid #eee;
}
/* End of course search dropdown styles */