@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  font-family: "bilo", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 1180px;
  display: block;
  padding: 0 20px;
}

.container-sm {
  max-width: 880px;
  display: block;
}

.container-xs {
  max-width: 680px;
  display: block;
}

.bg-dark {
  background-color: #0b0c0f;
}

.bg-mid-dark {
  background-color: #1b2028;
}

.bg-light-dark {
  background-color: #2a303e;
}

.bg-red {
  background-color: #ed2524;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-group {
  @apply mb-4;
}
.label {
  @apply font-semibold leading-none text-gray-300 mb-2 block;
}
.input {
  @apply leading-none text-gray-50 p-3 focus:outline-none focus:border-blue-700 border-0 bg-gray-800 rounded block w-full;
}

.button {
  @apply inline-block rounded-lg bg-red-500 py-3 px-6 font-bold uppercase text-white shadow-md  transition-all hover:shadow-lg;
}

.button.small {
  @apply text-sm py-2 px-4;
}

.button.primary {
  @apply bg-blue-500 hover:bg-blue-600;
}

.button.secondary {
  @apply bg-gray-800 hover:bg-gray-700;
}

.button.tertiary {
  @apply bg-green-500 hover:bg-green-600;
}

.button.disabled {
  @apply bg-gray-400 cursor-not-allowed;
}
#main-logo img {
  @apply mx-auto;
}
#main-title {
  display: block;
  text-align: center;
  @apply mb-12;
}

#main-title h4 {
  @apply text-xl font-light mb-3;
}

#main-title h1 {
  @apply text-6xl sm:text-8xl font-extrabold;
}

#main-sidebar {
  @apply bg-gray-900 text-slate-100 border-r border-gray-800 h-screen;
  flex: none;
  z-index: 9999;
  width: 225px;
}

#sidebar-inner {
  border-right: 1px solid #0000006a;
  box-shadow: 0 1px 0 1px #ffffff1c;
}

#main-sidebar a,
#main-sidebar button {
  @apply block w-full text-left py-1 px-2 rounded hover:bg-red-600 hover:text-white;
}

#main-logo {
  z-index: 9999;
}
#main-sidebar h3 {
  @apply block py-2 px-2 font-medium text-sm uppercase mt-12;
}

.highlight {
  @apply bg-red-600 text-white font-medium p-1 rounded -mx-1;
}

#transcript-container {
  @apply rounded p-8 border border-slate-800 bg-slate-900;
  max-height: 400px;
  overflow-y: scroll;
}

.transcript-entry {
  margin-bottom: 15px;
}

#audiobook {
  @apply px-2 md:px-20;
}

#audiobook audio {
  @apply mb-6 w-full;
}

#audiobook p {
  @apply text-center font-medium leading-8;
}

.progress-container {
  width: 100%; /* Adjust this if you want a specific width other than full width */
  background-color: #101727;
  height: 10px; /* Adjust the height if necessary */
  border-radius: 3px; /* Optional for rounded corners */
  overflow: hidden; /* This ensures the inner bar stays inside the container */
  margin-bottom: 5px;
}

/* Progress Bar Style */
.progress-bar {
  height: 100%;
  width: 0%; /* You can adjust this to represent the actual progress */
  background-color: #dc2726;
}

#tenet-steps h3 {
  font-family: "cubano-sharp", sans-serif;

  font-style: normal;
  @apply text-white text-xl;
}

.secondary-font {
  font-family: "liebegerda", sans-serif;
}

.third-font {
  font-family: "salted", sans-serif;
  font-style: normal;
}

.text-font {
  font-family: "bilo", sans-serif;
}

.text-font * {
  font-family: "bilo", sans-serif;
}

.content-font,
.content-font * {
  font-family: "scotch-text", sans-serif;
}

.subheader-font {
  font-family: "cubano-sharp", sans-serif;
  font-style: normal;
}

.image-fade:before {
  content: "";
  background-image: linear-gradient(to top, #030304, rgb(16 23 39 / 0%));
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  left: 0;
  z-index: 9;
  @apply pointer-events-none;
}
.image-fade-bg:before {
  background-image: linear-gradient(to top, #030304, rgb(16 23 39 / 0%));
}
.image-fade:after {
  content: "";
  display: none;
  height: 9999px;
}
.image-fade img,
.image-fade video {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
  -ms-interpolation-mode: bicubic;
}

.image-fade.image-fade-right:before {
  background-image: linear-gradient(to right, #030304, rgb(16 23 39 / 0%));
}
.image-fade-bg.image-fade-right:before {
  background-image: linear-gradient(to right, #030304, rgb(16 23 39 / 0%));
}

.module-link-block {
  border-radius: 10px;
  overflow: hidden;
}

.module-link-block:hover {
  transition: all 0.23s ease-in;

  transform: scale(1.2);
  box-shadow: 0 0 0 3px #dc2726, 0 10px 20px #dc262685;
  z-index: 9999;
}

.module-link-block.completed-module:hover {
  box-shadow: 0 0 0 3px #ffd907, 0 10px 20px #ffda0798;
}

.form-block {
  @apply mb-2;
}

.form-block label {
  @apply block mb-1;
}

.form-block input,
.form-block textarea {
  @apply w-full border shadow-sm rounded block p-2 text-slate-900 bg-white;
}

#action-steps {
  @apply bg-black border-2 border-red-600 text-gray-100 p-12;
  font-family: "bilo", sans-serif;
}

#action-steps p,
#action-steps ol li,
#action-steps ol li strong,
#action-steps ol li em {
  font-family: "bilo", sans-serif;
}

#action-steps h2 {
  @apply mt-0 mb-2;
  font-family: "bilo", sans-serif;
}

.main-course-content > p:first-child {
  @apply text-2xl;
}

.main-course-content.dark * {
  @apply text-gray-200;
}

.main-quote {
  @apply flex pt-8 items-center justify-center text-center;
}

.main-quote.right div {
  @apply pr-12;
}

.main-quote.left div {
  @apply pl-12;
}

.main-quote img {
  width: 45px;
  border-radius: 100%;
  margin: 0;
  margin-right: 5px;
  display: inline-block;
}

.main-quote div {
  width: 100%;
}
.main-quote p {
  @apply text-2xl leading-8 my-0;
  font-family: "scotch-text", sans-serif;
}

.main-quote h4 {
  @apply text-xl font-bold  my-0 mt-2;
  font-family: "scotch-text", sans-serif;
}

.video-poster video {
  width: 100%; /* you can adjust as per your needs */
  height: auto;
  display: block;
}

#breadcrumb {
  border-bottom: 1px solid #0000006a;
  box-shadow: 0 0 1px 1px #ffffff1c;
}

#breadcrumb span.last {
  @apply text-gray-500;
}

.fadeout {
  animation: fadeout 8s ease-in-out;
}

.fadein {
  animation: fadein 4s ease-in-out;
}

.fadeoutfast {
  animation: fadeout 1s ease-in-out;
}

.fadeinfast {
  animation: fadein 1s ease-in-out;
}

.scaleup {
  animation: scaleup 8s ease-in-out;
}

.scaledown {
  animation: scaledown 4s ease-in-out;
}

.hover-scale {
  transition: transform 0.23s ease-in;
}

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

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

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

  100% {
    opacity: 1;
  }
}

@keyframes scaleup {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.3);
  }
}

@keyframes scaledown {
  10% {
    transform: scale(1.3);
  }

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

/* width */
::-webkit-scrollbar {
  width: 10px;
  transition: opacity 0.5s;
}

/* Track */
::-webkit-scrollbar-track {
  background: #111;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #444;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.prose-dark code {
  @apply bg-gray-800 py-1 px-2 rounded-xl text-sm font-bold text-gray-200;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */