/*-----------------------------------*\
  #COMPONENTS
\*-----------------------------------*/

/**
 * FORMS
 */
.form-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: 100%;
}

.form-box .form-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  max-width: max-content !important;
  display: inline !important;
  margin: 0 !important;
}

.form-box .form-control {
  border: 2px solid var(--border-color) !important;
  background-color: var(--bg-color);
  font-size: 14px;
  font-weight: 500;
  padding-inline: 12px;
  border-radius: 8px;
  min-height: 40px;
  max-height: 40px;
  transition: all 0.4s;
}

.form-box .form-control:where(:hover, :focus-visible) { background-color: var(--border-color) !important; }

.form-box .form-control.error {
  border: 2px solid #dc2626 !important;
  background-color: #dc262615;
}

.form-box .form-control.textarea {
  min-height: 180px;
  max-height: 180px;
}

.form-box .messages {
  color: red;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  max-width: max-content !important;
  display: inline !important;
  margin: 0 !important;
  display: none;
}

.form-box .messages.active { display: block; }

/**
 * LOGO
 */
.logo { transition: all 0.4s; }

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

.logo .img-logo {
  min-width: max-content;
  max-width: max-content;
  min-height: 65px;
  max-height: 65px;
}

/**
 * ALERTS
 */

/**
 * MODAL
 */
.modal { background-color: rgba(0, 0, 0, 0.5) !important; }

.modal .modal-content { 
  overflow: hidden;
  border-radius: 12px; 
}

/**
 * ASIDES
 */
.offcanvas {
  background-color: var(--blue-color) !important;
  color: var(--bg-color) !important;
  overflow-y: scroll;
  overflow-x: hidden;
}

.offcanvas::-webkit-scrollbar { display: none; }

.offcanvas .aside-item {
  background-color: transparent !important;
  color: var(--bg-color) !important;
  display: flex;
  align-items: center;
  min-height: 36px;
  max-height: 36px;
  padding: 0 16px;
  transition: all 0.4s;
}

.offcanvas .aside-item:hover {
  background-color: var(--orange-color) !important;
  color: var(--text-color) !important;
}

.offcanvas .aside-item.active {
  background-color: var(--orange-color) !important;
  color: var(--text-color) !important;
}

/**
 * SEPARATOR
 */
.separator {
  border: 1px solid var(--border-color);
  width: 100%;
}

.separator.blue { border: 1px solid var(--blue-color); }

.separator.blue-dark { border: 1px solid var(--blue-dark-color); }

.separator.yellow { border: 1px solid var(--yellow-color); }

.separator.orange { border: 1px solid var(--orange-color); }

/**
 * COLLAPSE
 */

/**
 * BUTTONS
 */
.btn { 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  text-transform: capitalize;
  font-size: 15px !important;
  font-weight: 500 !important;
  width: max-content;
  min-height: 36px;
  max-height: 36px;
  border-radius: 4px !important;
  padding-inline: 16px !important;
  text-wrap: nowrap;
  outline-color: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 !important;
  position: relative !important;
  border: 0 !important;
  z-index: 1;
  overflow: hidden;
  transition: all 0.4s !important; 
}

.btn-blue {
  background-color: var(--blue-color) !important;
  color: var(--bg-color) !important;
}

.btn-blue::before {
  content: "";
  background-color: var(--orange-color) !important;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: -500px;
  bottom: 0;
  z-index: -1;
  width: 100%;
  min-height: 36px;
  max-height: 36px;
  transition: all 0.69s;
}

.btn-blue:hover::before { right: 0; }

html[dir="ltr"] .btn-blue::before {
  right: auto;
  left: -500px;
}

html[dir="ltr"] .btn-blue:hover::before { 
  right: auto; 
  left: 0;
}

.btn-main {
  background-color: var(--orange-color) !important;
  color: var(--text-color) !important;
}

.btn-main:hover { opacity: 0.7; }

/**
 * TYPOGRAPHY
 */
.h1 {
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: normal !important;
  max-width: max-content !important;
  display: inline !important;
}

.h2 {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: normal !important;
  max-width: max-content !important;
  display: inline !important;
}

.h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  max-width: max-content !important;
  display: inline !important;
}

.h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  max-width: max-content !important;
  display: inline !important;
}

.p {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  max-width: max-content !important;
  display: inline !important;
}

.blockquote {
  border-left: 3px solid var(--border-color) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  margin: 0 !important;
  padding-left: 24px !important;
  max-width: max-content !important;
  display: inline !important;
}

html[dir="rtl"] .blockquote { 
  border-right: 3px solid var(--border-color) !important;
  border-left: transparent !important;
  padding-left: 0 !important;
  padding-right: 24px !important;
  display: inline !important;
  max-width: max-content !important;
}

.list-ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.list-ul .list-li {
  display: flex !important;
  align-items: start !important;
  gap: 12px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  max-width: max-content !important;
  display: inline !important;
}

.list-ul .list-li .style {
  background-color: var(--text-color) !important;
  border-radius: 1000px !important;
  min-width: 6px !important;
  max-width: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  margin-top: 11px !important;
}

.inline-code { 
  color: var(--orange-color) !important; 
  max-width: max-content !important;
  display: inline !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
}

.inline-link {
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--text-color) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  display: inline !important;
  max-width: max-content !important;
  transition: all 0.4s;
}

.inline-link:hover { opacity: 0.7; }

.lead {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  display: inline !important;
  max-width: max-content !important;
}

.large {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  display: inline !important;
  max-width: max-content !important;
}

.small {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  display: inline !important;
  max-width: max-content !important;
}

.muted { 
  color: var(--second-color) !important; 
  max-width: max-content !important;
}

/**
 * DROPDOWN
 */

/**
 * PAGINATION
 */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block-start: 35px !important;
}

.pagination .paginate-link {
  border: 2px solid var(--border-color) !important;
  background-color: var(--second-bg-color) !important;
  color: var(--second-color) !important;
  border-radius: 1000px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.4s;
}

.pagination .paginate-link:hover {
  border: 2px solid var(--orange-color) !important;
  background-color: var(--orange-color) !important;
  color: var(--text-color) !important;
}

.pagination .paginate-link.active {
  border: 2px solid var(--orange-color) !important;
  background-color: var(--orange-color) !important;
  color: var(--text-color) !important;
}

.pagination .paginate-btn { color: var(--text-color) !important; }

/**
 * CARDS
 */
.card-primary { 
  background-color: var(--bg-color) !important;
  transition: all 0.6s; 
}

.card-primary p {
  color: var(--blue-color) !important;
  transition: all 0.4s;
}

.card-primary:hover { transform: translateY(-20px); }

.card-primary:hover p { color: var(--orange-color) !important; }

.card-news {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  transition: all 0.4s;
}

.card-news .img-card { 
  max-height: 250px; 
  min-height: 250px; 
  transition: all 0.4s;
}

.card-news:hover .img-card { transform: rotate(10deg) scale(1.1); }

.card-news .content {
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--bg-color);
  padding: 16px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.card-news .hover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: #ffffff35;
  width: 120px;
  height: 250px;
  margin-right: -120px;
  transition: all 0.8s;
}

.card-news:hover .hover { margin-right: 500px; }

.card-photo {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  width: 100%;
  max-height: 222px;
}

.card-photo .img-card {
  width: 100%;
  height: 222px;
}

.card-photo .hover {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 222px;
  opacity: 0;
  transition: all 0.4s;
}

.card-photo:hover .hover { opacity: 1; }

.card-project { transition: all 0.4s; }

.card-project:hover { transform: translateY(-10px); }

.card-project .img-card {
  border-radius: 8px;
  width: 100%;
  height: 250px;
}

.card-project .card-body {
  margin-block-start: 12px;
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

/**
 * line 2
 */
.line-clamp-1 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 1 !important;
}

.line-clamp-2 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
}

.line-clamp-3 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 3 !important;
}

.line-clamp-4 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 4 !important;
}

.line-clamp-5 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 5 !important;
}

.line-clamp-6 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 6 !important;
}

.line-clamp-7 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 7 !important;
}

.line-clamp-8 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 8 !important;
}

.line-clamp-9 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 9 !important;
}

.line-clamp-10 { 
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 10 !important;
}

/**
 * SCROLLBAR NONE
 */
.scrollbar-none::-webkit-scrollbar { display: none; }

/**
 * MARKDOWN
 */
.markdown h2 {
  font-size: 36px !important;
  font-weight: 700 !important;
}

.markdown h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
}

.markdown h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.markdown p {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.markdown blockquote {
  padding: 16px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--orange-color) !important;
}

html[dir="rtl"] .markdown blockquote {
  border-left: transparent !important;
  border-right: 3px solid var(--orange-color) !important;
}

.markdown ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline: 20px !important;
}

.markdown ul li { list-style: disc !important; }

.markdown ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline: 20px !important;
}

.markdown ol li { list-style: decimal !important; }

.markdown a {
  color: var(--orange-color) !important;
  transition: all 0.4s;
}

.markdown a:hover { opacity: 0.7; }

.markdown img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}