.btn-theme {
  background-color: #0c82b9;
  color: #fff;
  border: medium none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  height: 50px;
  letter-spacing: 0.6px;
  margin-top: 10px;
  text-transform: uppercase;
  width: auto;
  transition: all 0.4s;
  border-radius: 0;
  position: static;
}

.btn-theme:hover {
  background: #f22282;
  color: #fff;
}

.btn-theme-2 {
  background-color: #f22282;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 14px 32px;
  display: inline-block;
  border-radius: 50px;
}

.btn-theme:hover {
  background: #0c82b9;
  color: #fff;
}

.btn-black {
  background-color: #000000;
  color: #ffffff !important;
}

.btn-white {
  background-color: white;
  padding: 2px 10px;
  border-radius: 3px;
}

.strong {
  font-weight: bold !important;
}

.underlined {
  text-decoration: underline;
}

.sortable {
  padding: 0;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.sortable li {
  border: 1px solid #ddd;
  list-style: none outside none;
  margin: 4px;
  padding: 8px;
}

.sortable .handle {
  cursor: move;
}

.redactor-editor ul,
div.pagecontent ul {
  list-style: none;
  padding-left: 15px;
}

.redactor-editor ul > li,
div.pagecontent ul > li {
  padding-bottom: 15px;
  padding-left: 2.3em;
  text-indent: -0.9em;
}

.redactor-editor ul > li:before,
div.pagecontent ul > li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  color: #035077;
  margin-left: -12px;
  margin-right: 3px;
  vertical-align: middle;
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;
  height: 18px;
  width: 5px;
  display: inline-block;
  /*text-align: center;*/
  left: -32px;
  top: 9px;
}

ul.list-styled {
  list-style: none;
  padding-left: 2em;
  text-indent: -2em;
  margin-bottom: 15px;
  margin-left: 5px;
  list-style-position: outside;
}

ul.list-styled li {
  padding-bottom: 5px;
}

.list-group-item {
  border: none;
}

ul.list-styled > li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  color: #0c82b9;
  margin-left: -12px;
  margin-right: 3px;
  vertical-align: middle;
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;
  height: 18px;
  width: 5px;
  display: inline-block;
  /*text-align: center;*/
  left: -32px;
  top: 9px;
}

div.pagecontent img {
  max-width: 100%;
}

.red-bg {
  background-color: #d9534f;
  color: #fafafa;
}

.bg-red {
  background-color: #d9534f;
  color: #fafafa;
}

.text-pink {
  color: #ff3399 !important;
}

.bg-pink {
  background-color: #ff3399 !important;
}

.text-white {
  color: #ffffff !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.text-black {
  color: #282c3d !important;
}

.bg-black {
  background-color: #282c3d !important;
}

.text-green {
  color: #00953a !important;
}

.bg-green {
  background-color: #00953a !important;
}

.text-orange {
  color: #e87722 !important;
}

.bg-orange {
  background-color: #e87722 !important;
}

.text-purple {
  color: #823794 !important;
}

.bg-purple {
  background-color: #823794 !important;
}

.text-blue {
  color: #0c82b9 !important;
}

.bg-blue {
  background-color: #0c82b9 !important;
}

.text-darkblue {
  color: #00008b !important;
}

.bg-darkblue {
  background-color: #00008b !important;
}

.text-red {
  color: #d9534f !important;
}

.bg-red {
  background-color: #d9534f !important;
}

.text-teal {
  color: #009ca6 !important;
}

.bg-teal {
  background-color: #009ca6 !important;
}

.text-gray {
  color: #8a8b8c !important;
}

.bg-gray {
  background-color: #8a8b8c !important;
}

.text-gold {
  color: #b26d00 !important;
}

.bg-gold {
  background-color: #b26d00 !important;
}

.text-yellow {
  color: #ffdd00 !important;
}

.bg-yellow {
  background-color: #ffdd00 !important;
}

.text-maroon {
  color: #8d0b56 !important;
}

.bg-maroon {
  background-color: #8d0b56 !important;
}

.text-theme {
  color: #0c82b9 !important;
}

.opacity50 {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

.opacity60 {
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

.opacity70 {
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

.row-same-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row-same-height > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.gray-transparent-bg-for-text {
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
}

.white-transparent-bg-for-text {
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
}

.vendor-image,
.kv-file-content {
  position: relative;
  overflow: hidden;
  padding-bottom: 66.7%; /* here the desired aspect ratio ... Calculate height / width * 100*/
}

.vendor-image img,
.kv-file-content img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.vendor-top-image {
  position: absolute;
  overflow: hidden;
  padding-bottom: 66.7%; /* here the desired aspect ratio ... Calculate height / width * 100*/
}

.vendor-top-image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.news-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 44.9%; /* here the desired aspect ratio ... Calculate height / width * 100*/
}

.news-image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.file-preview-image {
  height: 140px;
}

.img120 {
  height: 120px !important;
  width: auto;
}

.img294 {
  height: 294px;
  width: 100%;
}

.img380 {
  height: 380px;
  width: auto;
}

.img-center {
  margin: 0 auto;
}

.pl-10 {
  padding-left: 10px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.g-recaptcha {
  display: inline-block;
}

.has-error .help-block {
  color: #ff3333;
}

.redactor-editor {
  border: 1px solid #bbb;
}

.redactor-toolbar {
  position: relative;
  top: 0;
  left: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
  background: #fff;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.select2-container--krajee-bs4 .select2-selection {
  border: 1px solid #bbb;
}

.form-group textarea {
  border-color: #999;
  /* font-size: 14px !important; */
}

.krajee-default .file-caption-info,
.krajee-default .file-size-info {
  height: 25px;
}

.file-preview-image {
  height: 140px;
}

.card .card-badge {
  position: absolute;
  top: -10px;
  left: -15px;
  padding: 3px;
  transform: rotate(-15deg);
  border-radius: 4px;
}

.card .card-badge.lowest {
  background: indianred;
  color: white;
}

.card .card-badge.highest {
  background: seagreen;
  color: white;
}
.card .card-badge.median {
  background: darkorange;
  color: white;
}

/* ------------------------------------------ */

.glyphicon {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.glyphicon-pencil::before {
  content: "\f044";
}

.glyphicon-trash::before {
  content: "\f2ed";
}

.glyphicon-eye-open::before {
  content: "\f06e";
}
.fas {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-calendar-alt:before {
  content: "\f073";
}

/* CAROUSEL LIGHTBOX CAROUSEL LIGHTBOX CAROUSEL LIGHTBOX */
.pb-images-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  z-index: 9999;
}
.pb-modal-back {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000d9;
}
.pb-cropper-edit-lightbox {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 20px;
}

.pb-image-modal {
  cursor: zoom-in;
  max-height: 60vh;
  min-width: 400px;
  object-fit: cover;
  z-index: 2;
}

.pb-modal-container {
  width: fit-content;
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 20px;
}

.pb-modal-container a {
  cursor: pointer;
  color: white !important;
  height: fit-content;
}

.pb-light-info {
  color: white !important;
}

.pb-light-info h4 {
  color: white !important;
  width: 80%;
}

.pb-light-info p {
  color: white !important;
}

.pb-images-lightbox {
  flex-wrap: nowrap;
  overflow-x: hidden;
  padding: 20px 0;
}

.pb-images-lightbox img {
  cursor: pointer;
  flex-basis: auto;
}

.individual-image-container {
  transition: 0.3s;
  display: flex;
  background-color: black;
}

.individual-image-container:hover {
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.3s;
}

.individual-image-container img {
  min-height: 100%;
  object-fit: cover;
  width: 100%;
}

#pb-container-dots {
  gap: 5px;
}

.pb-row-dots {
  width: 10px;
  height: 10px;
  background-color: #c8c8c8;
  border-radius: 10px;
  transition: 0.2s;
  cursor: pointer;
}

.pb-row-dots:hover {
  transition: 0.2s;
  background-color: #6c6c6c;
}

.pb-active-dot {
  background-color: #6c6c6c;
}

.pb-arrow-m {
  display: none;
}

@media only screen and (max-width: 600px) {
  .pb-images-modal {
    width: 100vw;
  }

  .pb-modal-container {
    width: 80%;
  }

  .pb-modal-container-info {
    width: 100%;
  }

  .pb-image-modal {
    width: 100%;
    object-fit: cover;
    min-width: 100%;
    max-height: 350px;
  }

  .pb-arrow-m {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    bottom: 100px;
    width: 100%;
    color: white;
  }

  .pb-arrow-m a {
    color: white;
  }

  .pb-arrow-modal-d {
    display: none;
  }
}

/* CAROUSEL LIGHTBOX CAROUSEL LIGHTBOX CAROUSEL LIGHTBOX */

/* ------------------------------------*/
/* add custom styles here..  */

del {
  background-color: #fa6b84;
}
ins,
ins * {
  background-color: #aabf67 !important;
}

/* * Summernote styles */
.note-editable {
  height: 400px;
  overflow: scroll;
}
div.note-editor.note-frame.panel.panel-default
  > div.note-editing-area
  > div.note-editable
  > ul,
div.note-editor.note-frame.panel.panel-default
  > div.note-editing-area
  > div.note-editable
  > blockquote
  > ul {
  list-style: none;
}
div.note-editor.note-frame.panel.panel-default
  > div.note-editing-area
  > div.note-editable
  > ul
  > li,
div.note-editor.note-frame.panel.panel-default
  > div.note-editing-area
  > div.note-editable
  > blockquote
  > ul
  > li {
  padding-bottom: 15px;
  padding-left: 1.3em;
  text-indent: -0.9em;
  margin-left: 1.3rem;
}
div.note-editor.note-frame.panel.panel-default
  > div.note-editing-area
  > div.note-editable
  > ul
  > li:before,
div.note-editor.note-frame.panel.panel-default
  > div.note-editing-area
  > div.note-editable
  > blockquote
  > ul
  > li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  color: #035077;
  margin-left: -12px;
  margin-right: 3px;
  vertical-align: middle;
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;
  height: 18px;
  width: 5px;
  display: inline-block;
  /* text-align: center; */
  left: -32px;
  top: 9px;
}

.note-editor .dropdown-toggle::after {
  all: unset;
}
.note-editor .note-dropdown-menu {
  box-sizing: content-box;
}
.note-editor .note-modal-footer {
  box-sizing: content-box;
}

.note-dropdown-menu a {
  text-decoration: none;
  color: black;
}

.note-toolbar {
  border-bottom: 1px solid rgb(195, 195, 195);
}

/* * ----------------------------------------------------- */
/* * Datatables custom CSS */
.dataTables_wrapper {
  width: 100%;
  overflow-x: scroll;
}
.dataTables_wrapper .dataTables_paginate ul li {
  background: none;
  border-radius: 4px;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate ul li:hover {
  background: #0d6efd;
  border-radius: 4px;
  border: 1px solid white;
  padding: 5px;
  margin: 5px;
}

.dataTables_wrapper .dataTables_paginate ul li:hover a {
  color: white;
}

.dataTables_wrapper .dataTables_paginate ul li.disabled {
  background: none;
  border-radius: 4px;
  border: 1px solid gray;
  padding: 5px;
  margin: 5px;
  cursor: default;
}

.dataTables_wrapper .dataTables_paginate ul li a {
  color: black;
  padding: 10px;
}

.dataTables_wrapper .dataTables_paginate ul li a:hover {
  color: white;
  padding: 10px;
}

.dataTables_wrapper .dataTables_paginate ul li.disabled a {
  color: gray;
  cursor: default;
}

.dataTables_wrapper .dataTables_paginate li.active {
  background: #0d6efd;
  border: 1px solid white;
}

.dataTables_wrapper .dataTables_paginate li.active a {
  color: white;
}
/* Datatable copntrols Custom CSS */
.dataTables_filter input {
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
  margin: 5px;
  background-color: #f5f5f5;
  color: #333;
  transition: box-shadow 0.3s ease;
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border: 1px solid #ccc;
}

.dataTables_filter input:hover {
  border: 1px solid #888;
  background-color: #f9f9f9;
}

.dataTables_filter input:focus {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.dataTables_length select {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
  margin: 5px;
  background-color: #f5f5f5;
  color: #333;
  transition: box-shadow 0.3s ease;
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border: 1px solid #ccc;
}

.dataTables_length option {
  background-color: #f5f5f5;
  color: #333;
  padding: 5px 10px;
}

.dataTables_filter {
  float: left !important;
}

.dataTables_length {
  float: right !important;
}

table.dataTable tbody tr {
  background-color: transparent;
}
table {
  width: 100%;
}
table tbody tr {
  border-bottom: 1px solid #616161;
}
.audit {
  width: 60%;
}
.audit .attribute {
  width: 20%;
}
.audit .from {
  width: 40%;
}
.audit .to {
  width: 40%;
}

.pb-form-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  height: fit-content;
}

/* * Icons modal on form */
#icon_modal_body {
  overflow-y: scroll;
  height: 70vh;
}

div:has(.icon_selected) {
  grid-area: selected;
}

.current_icon {
  font-size: 2.5rem;
  padding: 0;
  margin: 0 0.5rem;
}

#icon_modal_body > div:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "selected none none none none none";
}

#icon_modal_body > div:nth-child(2) > div {
  text-align: center;
}

#icon_modal_body > div:nth-child(2) > div > button {
  font-size: 2rem;
  text-align: center;
}

.ribbon-underline {
  text-decoration: none;
}

/* CLIENT PARAMS */
.pb-table-params thead tr th {
  background-color: #212529;
  color: white;
  padding: 8px 10px;
}

.pb-table-params td {
  background-color: #f8f9fa;
}

.pb-table-params tr:first-child th:first-child {
  border-top-left-radius: 15px;
}

.pb-table-params tr:first-child th:last-child {
  border-top-right-radius: 15px;
}

.pb-table-params tr:last-child td:first-child {
  border-bottom-left-radius: 15px;
}

.pb-table-params tr:last-child td:last-child {
  border-bottom-right-radius: 15px;
}

.pb-table-params tbody tr {
  border-bottom: unset;
}

.pb-array-card-param {
  position: absolute;
  background: #f8f9fa;
  width: 470px;
  padding: 20px;
  border-radius: 12px;
  margin-top: -60px;
  margin-left: 13px;
  box-shadow: 2px 10px 20px 15px #00000012;
  z-index: 999 !important;
}

.pb-card-params {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  height: 100%;
}

.pb-card-params label {
  color: #1d1b20;
  margin-bottom: 10px;
}

.pb-card-params .form-check-input {
  width: 60px;
  height: 30px;
}

.pb-close-icon {
  padding: 0;
  border-radius: 10px;
  color: #6750a4;
}

.pb-plus-icon {
  background-color: #ece6f0;
  padding: 10px 13px;
  border-radius: 10px;
  color: #6750a4;
  transition: all 0.2s;
}

.pb-plus-icon:hover {
  transition: all 0.2s;
  background-color: #f7ecff;
}

.pb-add-buttons {
  display: flex;
  gap: 10px;
}

.pb-update-param-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border-radius: 50px;
  gap: 10px;
  background: rgba(103, 80, 164, 0.08);
  border-color: #ffffff00;
  color: #6750a4;
  transition: all 0.2s;
}

.pb-update-param-button:hover {
  transition: all 0.2s;
  background-color: #f7ecff;
}

.pb-create-param-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border-radius: 50px;
  gap: 10px;
  background: rgb(40 255 3 / 18%);
  border-color: #ffffff00;
  color: #2e5733d6;
  transition: all 0.2s;
}

.pb-create-param-button:hover {
  transition: all 0.2s;
  background-color: #78ff7e8f;
}

/* CLIENT PARAMS */

.fs-big {
  font-size: 4em;
}

.far {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.fa-clock:before {
  content: "\f017";
}

.fl-gap {
  gap: 15px;
}

.grid {
  display: grid;
  gap: 1em;
  grid-template-rows: min-content minmax(0, 1fr) min-content;
  grid-template-columns: 1fr minmax(0, 3fr);
  grid-template-areas:
    "a h"
    "a c"
    "a f";
  height: calc(50vh - 1em);
  width: calc(95vw - 2em); /* not necessary, but just to be explicit */
  margin: 1em;
}

/* dataTables_wrapper  */

/* Admin Log Start */
.pb-table-log thead tr th {
  background-color: #212529;
  color: white;
  padding: 8px 10px;
}

.pb-table-log td {
  background-color: #f8f9fa;
}

.pb-table-log tr:first-child th:first-child {
  border-top-left-radius: 15px;
}

.pb-table-log tr:first-child th:last-child {
  border-top-right-radius: 15px;
}

.pb-table-log tr:last-child td:first-child {
  border-bottom-left-radius: 15px;
}

.pb-table-log tr:last-child td:last-child {
  border-bottom-right-radius: 15px;
}

.pb-table-log .dataTables_wrapper .dataTables_paginate a {
  background: none;
  border-radius: 4px;
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  box-sizing: border-box;
}

.pb-table-log .dataTables_wrapper .dataTables_paginate a.current {
  background: #0d6efd;
  border: 1px solid white;
  color: white;
}

.pb-table-log .dataTables_wrapper .dataTables_paginate a {
  color: black;
  padding: 10px;
}
.pb-table-log .dataTables_wrapper .dataTables_paginate a.disabled {
  background: none;
  border-radius: 4px;
  border: 1px solid gray;
  padding: 10px;
  margin: 5px;
  cursor: default;
  color: gray;
}

.pb-table-log .dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
}

.pb-table-log .dataTables_wrapper {
  width: 100%;
  overflow-x: unset !important;
}

/* admin ribbon styles */
#admin_ribbon_open_button {
  background-color: #628db6;
  position: fixed;
  font-size: 1rem;
  bottom: 3vh;
  width: auto;
  z-index: 997;
}

#admin_ribbon_open_button #open-ribbon {
  margin: 0;
  padding: 0;
  margin-right: 0.8rem;
}

#admin_ribbon {
  background-color: #628db6;
  font-size: 1rem;
  bottom: 3vh;
  left: -200%;
  z-index: 1000;
}

#admin_ribbon div div ul li {
  list-style: none;
  padding: 0 8px;
  margin: 0;
}

#admin_ribbon div div ul .list-group-item {
  margin-bottom: 0.5rem;
}

#admin_ribbon div div ul li a {
  color: black;
  text-decoration: none;
}

#admin_ribbon div div ul li .fa-check {
  color: green;
}

#admin_ribbon div div ul li .fa-exclamation {
  color: red;
}

#admin_ribbon div div ul li button {
  margin: 0;
  padding: 0;
}

#errors-table {
  position: fixed;
  width: 80%;
  margin-left: 10%;
  margin-top: 10vh;
  padding: 1rem;
  z-index: 999;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content-right {
  right: 0 !important;
}

.dropdown-menu {
  inset: auto auto 0px;
  transform: translate(0px, -30px);
}

.dropdown-content li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dropdown-content li:hover {
  background-color: #f4f4f4;
}

.img-newsletter {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-newsletter {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.datepicker-dropdown {
  height: fit-content;
  padding: 20px;
}

div.dataTables_length label,
div.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

@media (min-width: 768px) {
  div.dataTables_filter {
    text-align: right !important;
  }
}

@media print {
  div.dataTables_length,
  div.dataTables_filter,
  div.dataTables_info,
  div.dataTables_paginate {
    display: none !important;
  }
  .pagination {
    display: none !important;
  }
}

.header-section,
.header-section.header-fixed {
  background-color: rgba(0, 0, 0, 1);
  padding-bottom: 0.6rem;
}

.header-bottom-area .navbar-collapse .main-menu li a {
  color: white;
}

a {
  font-weight: bold;
}

a:hover {
  color: var(--main-color);
}

/* ==========================================================================
   Fixed Level-by-Level Dropdown Display
   ========================================================================== */

/* 1. Only show the IMMEDIATE Level 2 menu when hovering over the Level 1 item */
.header-section-two
  .header-bottom-area
  .navbar-collapse
  .main-menu
  > li:hover
  > .sub-menu {
  top: 230%;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure the link creates a boundary for the absolute positioning */
.main-menu li.menu_has_children > a {
  position: relative;
  display: inline-block; /* Or inline-flex / block depending on your layout, ensures spacing works */
}

/* Add the red mark indicator */
.main-menu > li.menu_has_children > a::after {
  position: absolute;
  content: "";
  top: 6px;
  right: -22px;
  width: 2px;
  height: 12px;
  background-color: var(--main-color);
}

/* 2. Style Level 2 list items cleanly so they can contain the Level 3 flyouts */
.main-menu .sub-menu li {
  position: relative;
}

/* 3. Set the Level 3 sub-menus aside cleanly and pull them out of the vertical stack */
.main-menu .sub-menu li .sub-menu {
  position: absolute;
  top: 0 !important; /* Align with the row of the link you are hovering on */
  left: 100% !important; /* Pop it out to the right */
  display: none !important; /* Hide it so it doesn't open prematurely */
  opacity: 0;
  visibility: hidden;
}

/* 4. Only show the IMMEDIATE Level 3 menu when hovering over its specific Level 2 item */
.main-menu .sub-menu li:hover > .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.language-switcher-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* Keeps it on top of all other elements */
}

/* Optional: Smooth hover effect for your .btn--base class if you don't already have one */
.language-switcher-fixed .btn--base {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.language-switcher-fixed .btn--base:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.language-switcher-fixed a:hover {
  background-color: #ffffff;
}

.client-thumb-overlay .title,
.banner-section .section-logo-text,
.banner-section .banner-content {
  background-color: rgba(0, 0, 0, 0.001) !important;
}

.about-section--style .about-list li,
.about-list li,
.pagecontent ul li,
.blog_post ul li {
  font-weight: 500;
  padding-bottom: 20px;
  position: relative;
  padding-left: 30px;
}
.about-section--style .about-list li::before,
.about-list li::before,
.pagecontent ul li::before,
.blog_post ul li::before {
  position: absolute;
  content: "\f061" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  top: 3px !important;
  left: 0 !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  background-color: var(--main-color) !important;
  font-size: 11px !important;
  border-radius: 50% !important;
  padding-left: 2px !important;
  color: white !important;
}

.gallery-thumb .gallery-overlay {
  bottom: -35%;
}

.gallery-overlay h3 {
  padding: 0.3rem;
  background-color: var(--main-color) b2 !important;
  margin-bottom: 1.7rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.gallery-overlay:hover h3 {
  background-color: transparent !important;
}

/* 1. Force ALL links inside the list to behave like normal, fluid sentence text */
ul.about-list li a,
.pagecontent ul li a {
  display: inline !important;
  position: static !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  /* This overrides the 'fw-bold' class on the inline links */
  font-weight: bold;
}

/* 2. EXCEPT for the main header links inside the <b> tag at the very start */
ul.about-list li b a {
  font-weight: bold; /* Keeps "Catastrophic Injuries" bold */
}

/* 3. Global structural breathing room for lines and items */
ul.about-list li {
  display: block !important;
  position: relative !important;
  line-height: 1.8 !important; /* Keeps wrapped text from crushing vertically */
  height: auto !important;
}

ul.about-list li b {
  display: inline !important;
  font-weight: bold;
}

.plan-header {
  margin-bottom: 0rem;
  padding-bottom: 0rem;
}

.navbar .navbar-toggler span {
  color: white;
}

.badge.url-badge {
  background-color: var(--main-color);
  color: white;
}

.select2 .selection .select2-selection {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  min-height: 50px;
  max-height: 10rem;
  overflow-y: auto;
}

.banner-thumb img {
  max-width: 704px;
  aspect-ratio: 704/807;
  object-fit: cover;
}

.banner-widget-btn a {
  padding-left: 5rem;
  padding-right: 5rem;
}

.text-start {
  text-align: left !important;
}

/* Container positioning */
.language-switcher-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* Button Base Styles */
.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background-color: var(--main-color); /* Match your Kennedy Law Red */
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
  overflow: hidden;
  max-width: 50px; /* Initially narrow enough for just "En" / "Es" */
}

/* Text Element control */
.lang-toggle-btn .lang-short {
  display: inline-block;
}

.lang-toggle-btn .lang-full {
  max-width: 0;
  opacity: 0;
  display: inline-block;
  transition: all 0.3s ease;
  padding-left: 0;
}

/* Hover State Expand Action */
.lang-toggle-btn:hover {
  max-width: 250px; /* Expands smoothly to make space for the phrase */
  background-color: #000000; /* Subtle background color shift on hover */
  color: var(--main-color);
}

.lang-toggle-btn:hover .lang-short {
  display: none; /* Hide the short code when hovering */
}

.lang-toggle-btn:hover .lang-full {
  max-width: 200px;
  opacity: 1;
  padding-left: 8px; /* Pushes the full phrase away from the short code text */
}

.header .navbar ul.main-menu > li > a {
  white-space: nowrap !important;
}

.header-action {
  flex-wrap: nowrap;
}

:has(> .sidebar) {
  height: -webkit-fill-available;
  height: stretch;
}

:root {
  --main-color: #ba0009;
  --box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
}

.bg-overlay-red:after {
  background-color: #545454 !important;
}

.blog-area div[class*="col"]:nth-of-type(3n + 2) .blog-item > a {
  display: flex !important;
  flex-direction: column-reverse !important;
}

.video-section .section-logo-text {
  display: none !important;
}

.faq-wrapper .faq-item.open {
  border: none;
  box-shadow: var(--box-shadow);
}

.gallery-thumb a {
  width: 100%;
  aspect-ratio: 16/9;
}

.gallery-thumb::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.gallery-thumb h3 {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  background-color: rgba(0, 0, 0, 0.7) !important;
  padding: 0.4rem 0.6rem;
}

.gallery-thumb:hover h3 {
  background-color: transparent !important;
}

.testimonial-full-text {
  display: none;
}

.training-section--style .training-item {
  box-shadow: var(--box-shadow) !important;
}

.plan-badge {
  color: black !important;
}

#cookie-consent-spacer {
  display: block;
  width: 100%;
  flex: 0 0 var(--cookie-banner-height, 46px);
  height: var(--cookie-banner-height, 46px);
  min-height: var(--cookie-banner-height, 46px);
}

.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 99999;
  background: #000000;
  color: #ffffff;
  display: none;
}

.cookie-consent-bar {
  width: 100%;
  min-height: 46px;
  background: #000000;
  color: #ffffff;
  padding: 12px 54px 12px 14px;
  font-size: 16px;
  line-height: 1.35;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cookie-consent-bar span {
  display: block;
  width: 100%;
}

.cookie-inline-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 2px;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
}

.cookie-inline-link:hover {
  color: #cccccc;
}

.cookie-bar-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  padding: 0;
}

.cookie-bar-close:hover {
  color: #cccccc;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.cookie-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #ffffff;
  color: #222222;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.cookie-modal-dialog h3 {
  margin: 0 40px 10px 0;
  color: #111111;
  font-size: 26px;
  font-weight: 700;
}

.cookie-modal-dialog > p {
  margin: 0 0 18px;
  color: #444444;
  line-height: 1.55;
  font-size: 15px;
}

.cookie-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f2f2;
  color: #111111;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.cookie-modal-close:hover {
  background: #e5e5e5;
}

.cookie-choice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 28px 0 14px;
  padding: 20px;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.cookie-choice-label-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
  white-space: nowrap;
}

.cookie-choice-label-btn:hover {
  text-decoration: underline;
}

.cookie-main-switch {
  position: relative;
  display: inline-block;
  width: 76px;
  height: 38px;
  flex: 0 0 auto;
}

.cookie-main-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-main-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #bdbdbd;
  border-radius: 999px;
  transition: 0.2s ease;
}

.cookie-main-slider::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 4px;
  top: 4px;
  background: #ffffff;
  border-radius: 50%;
  transition: 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.cookie-main-switch input:checked + .cookie-main-slider {
  background: #18a558;
}

.cookie-main-switch input:checked + .cookie-main-slider::before {
  transform: translateX(38px);
}

.cookie-choice-help {
  margin: 0 0 18px;
  color: #555555;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.cookie-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cookie-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.cookie-btn.primary {
  background: #111111;
  color: #ffffff;
}

.cookie-btn.primary:hover {
  background: #333333;
}

.cookie-links {
  margin: 18px 0 0;
  color: #555555;
  font-size: 13px;
  line-height: 1.5;
}

.cookie-links a {
  color: #111111;
  text-decoration: underline;
}

.cookie-modal-open {
  overflow: hidden;
}

@media (max-width: 576px) {
  .cookie-consent-bar {
    min-height: 58px;
    font-size: 14px;
    padding: 10px 46px 10px 10px;
  }

  .cookie-modal {
    align-items: flex-end;
    padding: 12px;
  }

  .cookie-modal-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 14px;
    padding: 22px;
  }

  .cookie-modal-dialog h3 {
    font-size: 22px;
  }

  .cookie-choice-row {
    gap: 10px;
    padding: 16px 10px;
  }

  .cookie-choice-label-btn {
    font-size: 13px;
  }

  .cookie-main-switch {
    width: 66px;
    height: 34px;
  }

  .cookie-main-slider::before {
    width: 26px;
    height: 26px;
  }

  .cookie-main-switch input:checked + .cookie-main-slider::before {
    transform: translateX(32px);
  }

  .cookie-modal-actions {
    justify-content: stretch;
  }

  .cookie-btn {
    width: 100%;
  }
}

#cookie-open-preferences {
  color: #8a8a8a !important;
  font-size: 1rem !important;
  text-decoration: none;
}

.plan-item.active {
  box-shadow: var(--box-shadow) !important;
}

.header-section.header-fixed .header-action a {
  background-color: white !important;
  color: black !important;
}

.header-section.header-fixed .header-action a:hover {
  background-color: transparent !important;
  color: white !important;
}

.banner-content h1,
.section-logo-text span,
.language-switcher-fixed .lang-full {
  background-color: rgba(0, 0, 0, 0.01) !important;
}

.banner-section .banner-thumb-area .banner-thumb-element-one,
.banner-section .banner-thumb-area .banner-thumb-element-two {
  animation: none;
}

.spotlight-card {
  /*background: linear-gradient(135deg, #111827 0%, #1f2937 100%);*/
  border-left: 4px solid #ba0009 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: -webkit-fill-available;
  background-color: #1f2937;
  color: white;
}

.spotlight-badge {
  background-color: white;
  font-size: 1.1rem !important;
  letter-spacing: 1px;
  font-size: 0.7rem;
  color: #1f2937 !important;
}

.spotlight-card .display-5 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
}

.banner-section {
  padding-bottom: 100px;
}

.btn--box-shadow {
  box-shadow: var(--box-shadow) !important;
  border: 2px solid white !important;
}

.btn--box-shadow:hover {
  box-shadow: var(--box-shadow) !important;
  border: 2px solid white !important;
  color: white !important;
}

.form-control[readonly] {
  background-color: #f8f9fa !important;
  opacity: 1 !important;
}

.btn.btn-file {
  position: relative;
  background: var(--main-color) !important;
  border: 2px solid white !important;
  color: #fff;
  padding: 8px 30px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

@media print {
  /* ==========================================
     1. Page & Body Reset
     ========================================== */
  @page {
    size: A4 portrait;
    margin: 1cm 1.5cm;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.4;
  }

  /* ==========================================
     2. Hide Web-Only Elements
     ========================================== */
  nav,
  footer,
  header,
  .d-print-none,
  .trainer-details-element-one,
  .trainer-details-element-two,
  .my-paroller,
  .cc-window,
  .cookie-banner,
  [class*="cookie"],
  [id*="cookie"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  }

  .trainer-about-header .title::before,
  .trainer-about-header .title::after,
  .trainer-about-header::before,
  .trainer-about-header::after {
    display: none !important;
    content: none !important;
  }

  /* ==========================================
     3. Containers & Global Scaffolding
     ========================================== */
  .trainer-section,
  .trainer-details-section,
  .ptb-120 {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ==========================================
     4. Bio Header (Top 2-Column Section)
     ========================================== */
  .trainer-section > .container > .row:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-bottom: 20px !important;
  }

  .col-xl-4,
  .col-lg-4 {
    width: 30% !important;
    flex: 0 0 30% !important;
    max-width: 30% !important;
    padding-right: 15px !important;
  }

  .about-thumb img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    object-fit: cover;
  }

  .col-xl-6,
  .col-lg-6 {
    width: 70% !important;
    flex: 0 0 70% !important;
    max-width: 70% !important;
    padding-left: 10px !important;
  }

  .trainer-about-header {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    margin-bottom: 10px !important;
  }

  /* Fixed Missing Title "James Kennedy" */
  .trainer-about-header .title,
  h2.title {
    display: block !important;
    visibility: visible !important;
    font-size: 22pt !important;
    font-weight: 800 !important;
    color: #000 !important;
    margin: 0 0 5px 0 !important;
    margin-top: 3rem !important;
    line-height: 1.1 !important;
  }

  .trainer-about-header .sub-title {
    font-size: 12pt !important;
    font-weight: 600 !important;
    color: #444 !important;
    display: block !important;
    margin-bottom: 12px !important;
  }

  .trainer-about-body p {
    font-size: 10pt !important;
    color: #222 !important;
    margin-bottom: 0 !important;
  }

  /* ==========================================
     5. Best Skills Section
     ========================================== */
  .skill-widget-area {
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    display: block !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .skill-widget-area .widget-title {
    font-size: 13pt !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
    border-bottom: 2px solid #333;
    padding-bottom: 3px;
  }

  .skill-widget-area .row {
    display: block !important;
    margin: 0 !important;
  }

  .skill-widget-area .row > [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }

  .choose-item {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .choose-item .title {
    font-size: 10.5pt !important;
    font-weight: bold !important;
    margin-bottom: 3px !important;
  }

  .choose-item p {
    font-size: 9.5pt !important;
    margin-bottom: 0 !important;
    color: #333 !important;
  }

  /* ==========================================
     6. Credentials (100% Full Width Stack)
     ========================================== */
  /* Target the updated row class */
  .row.mt-5 {
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  /* Force Bootstrap columns to stack vertically at full width */
  .row.mt-5 > .col-md-6,
  .row.mt-5 > .col-lg-4,
  .row.mt-5 > [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;

    /* Prevents an individual list block from breaking awkwardly across pages */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Style the updated <h3> headings */
  .row.mt-5 h3 {
    display: block !important;
    width: 100% !important;
    font-size: 12pt !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-bottom: 2px solid #333 !important;
    padding-bottom: 4px !important;

    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  .about-list {
    width: 100% !important;
    padding-left: 18px !important;
    margin-bottom: 0 !important;
    list-style-type: disc !important;
  }

  .about-list li {
    font-size: 9.5pt !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* =========================================================
   KENNEDY LAW - HERO
   ========================================================= */

.kennedy-hero {
  --kl-red: #e10600;
  --kl-red-dark: #8f0000;
  --kl-black: #050505;
  --kl-black-soft: #0d0d0d;
  --kl-white: #ffffff;
  --kl-gray: #a8a8a8;

  position: relative;
  min-height: calc(100vh - 90px);
  background:
    radial-gradient(circle at 70% 35%, rgba(177, 0, 0, 0.24), transparent 30%),
    linear-gradient(105deg, #050505 0%, #080808 52%, #120303 100%);

  color: #fff;
  margin-top: 45px;
  overflow: hidden;
  isolation: isolate;
}

/* =========================================================
   BACKGROUND
   ========================================================= */

.kennedy-hero__noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.045;

  background-image: repeating-radial-gradient(
    circle at 0 0,
    transparent 0,
    #fff 1px,
    transparent 2px
  );

  background-size: 12px 12px;

  pointer-events: none;
}

.kennedy-hero__glow {
  position: absolute;

  width: 650px;
  height: 650px;

  right: 5%;
  top: 5%;

  background: var(--kl-red);

  border-radius: 50%;

  filter: blur(180px);

  opacity: 0.12;

  pointer-events: none;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.kennedy-hero__container {
  position: relative;
  z-index: 5;

  max-width: 1660px;

  min-height: calc(100vh - 130px);

  padding-left: clamp(25px, 6vw, 110px);
  padding-right: clamp(25px, 5vw, 90px);
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.kennedy-hero__content {
  position: relative;

  max-width: 760px;

  padding-top: 90px;
  padding-bottom: 120px;

  z-index: 10;
}

.kennedy-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;

  margin-bottom: 20px;

  font-size: 14px;
  font-weight: 800;

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: var(--kl-red);
}

.kennedy-hero__eyebrow-line {
  display: block;

  width: 50px;
  height: 3px;

  background: var(--kl-red);
}

/* =========================================================
   TITLE
   ========================================================= */

.kennedy-hero__title {
  margin: 0;

  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: -0.05em;

  line-height: 0.78;
}

.kennedy-hero__title-small {
  color: #fff;
  display: block;

  margin-bottom: 4px;

  font-size: clamp(52px, 5vw, 88px);

  font-weight: 300;

  letter-spacing: -0.03em;
}

.kennedy-hero__title-main {
  display: block;

  font-size: clamp(105px, 10vw, 178px);

  color: var(--kl-white);

  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.kennedy-hero__title-outline {
  position: relative;

  display: block;

  width: max-content;

  margin-top: 13px;

  font-size: clamp(55px, 5.8vw, 105px);

  color: #fff;

  -webkit-text-stroke: 0;
  paint-order: stroke fill;

  letter-spacing: -0.035em;
}

/* short red line beside law firm */
.kennedy-hero__title-outline::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 4px;

  right: -120px;
  top: 50%;

  transform: translateY(-50%);

  background: var(--kl-red);
}

/* =========================================================
   SUBTITLE
   ========================================================= */

.kennedy-hero__subtitle {
  margin: 34px 0 0;

  max-width: 600px;

  font-size: clamp(22px, 2vw, 32px);

  line-height: 1.1;

  font-weight: 700;

  letter-spacing: -0.025em;

  text-transform: uppercase;
  color: #fff;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.kennedy-hero__description {
  max-width: 670px;

  margin-top: 22px;

  font-size: 16px;
  line-height: 1.8;

  color: rgba(255, 255, 255, 0.68);
}

.kennedy-hero__description p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   CTA
   ========================================================= */

.kennedy-hero__actions {
  display: flex;
  align-items: center;
  gap: 35px;

  margin-top: 35px;
}

.kennedy-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  min-width: 300px;

  padding: 9px 9px 9px 28px;

  border-radius: 100px;

  text-decoration: none;

  font-size: 14px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.kennedy-btn--primary {
  color: #fff;

  background: linear-gradient(90deg, #c90000, #ed1108);

  box-shadow: 0 15px 45px rgba(225, 6, 0, 0.23);
}

.kennedy-btn--primary:hover {
  color: #fff;

  transform: translateY(-3px);

  box-shadow: 0 22px 55px rgba(225, 6, 0, 0.4);
}

.kennedy-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 49px;
  height: 49px;

  flex: 0 0 49px;

  margin-left: 25px;

  border-radius: 50%;

  color: #111;

  background: #fff;

  transform: rotate(-45deg);

  transition: transform 0.3s ease;
}

.kennedy-btn:hover .kennedy-btn__icon {
  transform: rotate(0deg);
}

/* =========================================================
   PHONE
   ========================================================= */

.kennedy-hero__phone {
  display: flex;
  align-items: center;
  gap: 14px;

  color: #fff;

  text-decoration: none;
}

.kennedy-hero__phone:hover {
  color: #fff;
}

.kennedy-hero__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}

.kennedy-hero__phone:hover .kennedy-hero__phone-icon {
  border-color: var(--kl-red);
  background: var(--kl-red);
}

.kennedy-hero__phone small {
  display: block;

  margin-bottom: 3px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.5);
}

.kennedy-hero__phone strong {
  display: block;

  font-size: 17px;

  letter-spacing: 0.02em;
}

/* =========================================================
   BOTTOM INFORMATION
   ========================================================= */

.kennedy-hero__bottom-line {
  display: flex;
  align-items: center;
  gap: 17px;

  margin-top: 43px;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.5);
}

.kennedy-hero__bottom-line > div {
  display: flex;
  align-items: center;
}

.kennedy-hero__dot {
  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 10px;

  border-radius: 50%;

  background: var(--kl-red);

  box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.15);
}

.kennedy-hero__separator {
  width: 35px;
  height: 1px;

  background: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   RIGHT SIDE
   ========================================================= */

.kennedy-hero__visual-col {
  align-self: stretch;
}

.kennedy-hero__visual {
  position: relative;

  height: 100%;
  min-height: 760px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  z-index: 2;
}

/* red graphic behind attorney */
.kennedy-hero__red-block {
  position: absolute;

  width: 72%;
  height: 78%;

  right: 2%;
  bottom: 0;

  background: linear-gradient(145deg, #ed0c05, #930000);

  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 20%);

  opacity: 0.88;

  z-index: -2;
}

/* ring-like circle */
.kennedy-hero__circle {
  position: absolute;

  width: 540px;
  height: 540px;

  left: 50%;
  top: 49%;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  z-index: -1;
}

.kennedy-hero__circle::before,
.kennedy-hero__circle::after {
  content: "";

  position: absolute;

  border-radius: 50%;
}

.kennedy-hero__circle::before {
  inset: 35px;

  border: 1px solid rgba(255, 255, 255, 0.11);
}

.kennedy-hero__circle::after {
  inset: 75px;

  border: 1px dashed rgba(255, 255, 255, 0.14);
}

/* =========================================================
   CROSS HAIRS - SUBTLE BOXING POSTER FEEL
   ========================================================= */

.kennedy-hero__crosshair {
  position: absolute;

  width: 520px;
  height: 520px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%) rotate(45deg);

  z-index: -1;

  opacity: 0.12;
}

.kennedy-hero__crosshair span {
  position: absolute;

  background: #fff;
}

.kennedy-hero__crosshair span:first-child {
  width: 100%;
  height: 1px;

  top: 50%;
  left: 0;
}

.kennedy-hero__crosshair span:last-child {
  width: 1px;
  height: 100%;

  top: 0;
  left: 50%;
}

/* =========================================================
   BACKGROUND SURNAME
   ========================================================= */

.kennedy-hero__surname {
  position: absolute;

  right: -30px;
  top: 100px;

  writing-mode: vertical-rl;

  font-size: clamp(70px, 7vw, 130px);

  line-height: 1;

  font-weight: 900;

  letter-spacing: -0.06em;

  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);

  z-index: -1;
}

/* =========================================================
   ATTORNEY
   ========================================================= */

.kennedy-hero__attorney {
  position: relative;
  height: min(82vh, 830px);
  z-index: 4;
}

.kennedy-hero__attorney img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(-20px 22px 35px rgba(0, 0, 0, 0.45));
}

.kennedy-hero__attorney-glow {
  position: absolute;
  width: 65%;
  height: 60%;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  background: rgba(240, 0, 0, 0.38);
  filter: blur(110px);
  border-radius: 50%;
  z-index: -1;
}

/* =========================================================
   READY TO FIGHT BADGE
   ========================================================= */

.kennedy-hero__badge {
  position: absolute;

  right: 4%;
  bottom: 115px;

  width: 135px;
  height: 135px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  text-align: center;

  background: #fff;

  color: #111;

  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.35);

  transform: rotate(-7deg);

  z-index: 7;
}

.kennedy-hero__badge::before {
  content: "";

  position: absolute;

  inset: 8px;

  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

.kennedy-hero__badge-top,
.kennedy-hero__badge-bottom {
  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.18em;
}

.kennedy-hero__badge strong {
  display: block;

  margin: 3px 0;

  font-size: 25px;
  line-height: 1;

  color: var(--kl-red);
}

/* =========================================================
   BOXING ROPES
   ========================================================= */

.kennedy-hero__rope {
  position: absolute;

  left: -5%;
  width: 110%;

  height: 6px;

  z-index: 3;

  pointer-events: none;
}

.kennedy-hero__rope::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 20px;

  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.6),
    inset 0 1px rgba(255, 255, 255, 0.3);
}

.kennedy-hero__rope--one {
  top: 41%;

  background: linear-gradient(90deg, #640000, #f00, #8f0000);

  transform: rotate(-0.5deg);
}

.kennedy-hero__rope--two {
  top: 73%;

  height: 5px;

  background: linear-gradient(90deg, #555, #e6e6e6, #555);

  opacity: 0.4;

  transform: rotate(0.3deg);
}

/* =========================================================
   MASSIVE BACKGROUND TOUGH
   ========================================================= */

.kennedy-hero__background-type {
  position: absolute;

  left: 49%;
  top: 48%;

  transform: translate(-50%, -50%);

  z-index: 0;

  pointer-events: none;
}

.kennedy-hero__background-type span {
  display: block;

  font-size: clamp(180px, 23vw, 440px);

  line-height: 0.8;

  font-family: Impact, "Arial Narrow", sans-serif;

  font-weight: 900;

  letter-spacing: -0.06em;

  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.025);

  white-space: nowrap;
}

/* =========================================================
   BOTTOM MOVING MARQUEE
   ========================================================= */

.kennedy-hero__marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 50px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: var(--kl-red);

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  z-index: 20;

  justify-content: center;
}

/* Entire moving track */
.kennedy-hero__marquee-track {
  display: flex;
  align-items: center;

  width: max-content;

  flex-shrink: 0;
}

/* Each duplicate set */
.kennedy-hero__marquee-group {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  white-space: nowrap;
}

/* Text */
.kennedy-hero__marquee-group span {
  display: inline-block;

  padding: 0 24px;

  color: #fff;

  font-size: 11px;
  font-weight: 900;

  line-height: 50px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  white-space: nowrap;
}

/* Separator dots */
.kennedy-hero__marquee-group i {
  display: block;

  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  border-radius: 50%;

  background: #fff;
}

/* Actual movement */
@keyframes kennedyMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   ENTRANCE ANIMATIONS
   ========================================================= */

.kennedy-hero__eyebrow,
.kennedy-hero__title,
.kennedy-hero__subtitle,
.kennedy-hero__description,
.kennedy-hero__actions,
.kennedy-hero__bottom-line,
.kennedy-hero__attorney {
  opacity: 1;
  transform: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {
  .kennedy-hero {
    min-height: auto;
  }

  .kennedy-hero__container {
    min-height: auto;

    padding-left: 45px;
    padding-right: 45px;
  }

  .kennedy-hero__content {
    padding-top: 95px;
    padding-bottom: 100px;
  }

  .kennedy-hero__title-main {
    font-size: 120px;
  }

  .kennedy-hero__visual {
    min-height: 680px;
  }

  .kennedy-hero__attorney {
    height: 670px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {
  .kennedy-hero {
    min-height: auto;
  }

  .kennedy-hero__container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .kennedy-hero__content {
    max-width: 720px;

    padding-top: 75px;
    padding-bottom: 40px;
  }

  .kennedy-hero__title-main {
    font-size: clamp(85px, 18vw, 135px);
  }

  .kennedy-hero__title-outline {
    font-size: clamp(48px, 10vw, 82px);
  }

  .kennedy-hero__title-outline::after {
    display: none;
  }

  .kennedy-hero__visual {
    min-height: 620px;

    margin-top: -20px;
  }

  .kennedy-hero__attorney {
    height: 620px;
  }

  .kennedy-hero__red-block {
    width: 78%;
    right: 11%;
  }

  .kennedy-hero__badge {
    right: 10%;
    bottom: 80px;
  }

  .kennedy-hero__rope--one {
    top: 54%;
  }

  .kennedy-hero__rope--two {
    top: 80%;
  }

  .kennedy-hero__surname {
    right: 5%;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {
  .kennedy-hero__container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kennedy-hero__content {
    padding-top: 55px;
  }

  .kennedy-hero__eyebrow {
    font-size: 11px;
  }

  .kennedy-hero__title {
    line-height: 0.84;
  }

  .kennedy-hero__title-small {
    font-size: 45px;
  }

  .kennedy-hero__title-main {
    font-size: 83px;
  }

  .kennedy-hero__title-outline {
    font-size: 49px;

    -webkit-text-stroke-width: 1px;
  }

  .kennedy-hero__subtitle {
    margin-top: 27px;

    font-size: 22px;
  }

  .kennedy-hero__description {
    font-size: 14px;
    line-height: 1.65;
  }

  .kennedy-hero__actions {
    flex-direction: column;
    align-items: stretch;

    gap: 20px;

    margin-top: 28px;
  }

  .kennedy-btn {
    width: 100%;
    min-width: 0;
  }

  .kennedy-hero__phone {
    padding-left: 3px;
  }

  .kennedy-hero__bottom-line {
    flex-wrap: wrap;

    gap: 10px;

    font-size: 9px;
  }

  .kennedy-hero__separator {
    width: 15px;
  }

  .kennedy-hero__visual {
    min-height: 500px;

    margin-left: -20px;
    margin-right: -20px;
  }

  .kennedy-hero__attorney {
    height: 505px;
  }

  .kennedy-hero__red-block {
    width: 90%;
    height: 80%;

    right: 0;
  }

  .kennedy-hero__circle {
    width: 390px;
    height: 390px;
  }

  .kennedy-hero__crosshair {
    width: 380px;
    height: 380px;
  }

  .kennedy-hero__badge {
    width: 105px;
    height: 105px;

    right: 2%;
    bottom: 65px;
  }

  .kennedy-hero__badge strong {
    font-size: 20px;
  }

  .kennedy-hero__badge-top,
  .kennedy-hero__badge-bottom {
    font-size: 6px;
  }

  .kennedy-hero__surname {
    display: none;
  }

  .kennedy-hero__marquee {
    height: 42px;
  }

  .kennedy-hero__marquee span {
    font-size: 9px;

    padding: 0 18px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kennedy-hero *:not(.kennedy-hero__marquee-track),
  .kennedy-hero *:not(.kennedy-hero__marquee-track)::before,
  .kennedy-hero *:not(.kennedy-hero__marquee-track)::after {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 991.98px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .kennedy-hero {
    margin-top: 85px;
  }

  .blog-section h3,
  .blog-section h2 {
    margin-top: 2rem;
  }

  .blog-section .blog-item h2,
  #article_text > h2 {
    font-size: 26px !important;
  }

  .training-details-section .learn-widget-wrapper {
    background: transparent;
  }

  .learn-widget-item,
  .training-details-section .learn-widget-item:last-child {
    background-color: #e9e9e9;
    margin: 1rem;
    padding: 1rem 2.5rem;
    border-bottom: 2px dashed rgba(232, 0, 0, 0.8) !important;
    box-shadow: var(--box-shadow);
  }
}

/* =========================================================
   COOKIE CONSENT
   ========================================================= */

/* ---------------------------------------------------------
   COOKIE BANNER
   --------------------------------------------------------- */

.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;

  z-index: 99999;

  background: #000000;
  color: #ffffff;

  display: block;
}

.cookie-banner-dismiss {
  display: none;
}

/*
 * Hide banner when user clicks the X.
 * No JavaScript needed.
 */
#cookie-banner-dismiss:checked + .cookie-consent-banner {
  display: none;
}

.cookie-consent-bar {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 46px;

  box-sizing: border-box;

  padding: 12px 54px 12px 14px;

  background: #000000;
  color: #ffffff;

  font-size: 16px;
  line-height: 1.35;
}

.cookie-consent-bar span {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------
   INLINE LINKS / BUTTONS
   --------------------------------------------------------- */

.cookie-inline-link {
  background: none;
  border: 0;

  padding: 0;
  margin: 0 2px;

  color: #ffffff;

  text-decoration: underline;

  cursor: pointer;

  font: inherit;
}

.cookie-inline-link:hover {
  color: #cccccc;
}

/*
 * Footer button uses Bootstrap primary color
 * instead of the white banner color.
 */
#footer-cookie-preferences {
  color: var(--bs-primary);
}

#footer-cookie-preferences:hover {
  color: var(--bs-primary);

  text-decoration: underline;
}

/* ---------------------------------------------------------
   COOKIE BANNER CLOSE BUTTON
   --------------------------------------------------------- */

.cookie-bar-close {
  position: absolute;

  top: 50%;
  right: 14px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;

  background: transparent;
  color: #ffffff;

  font-size: 34px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  opacity: 1;
}

.cookie-bar-close:hover {
  color: #cccccc;
}

/* =========================================================
   COOKIE MODAL - NATIVE POPOVER
   ========================================================= */

/*
 * Critical:
 * Keep the popover completely hidden until the browser
 * opens it through popovertarget.
 */
.cookie-modal[popover]:not(:popover-open) {
  display: none !important;
}

/*
 * Visible only while the native popover is open.
 */
.cookie-modal[popover]:popover-open {
  display: block;
}

/*
 * Native popover container.
 */
.cookie-modal[popover] {
  border: 0;

  padding: 0;
  margin: auto;

  width: min(620px, calc(100vw - 40px));
  max-width: none;

  background: transparent;

  overflow: visible;
}

/*
 * Browser-generated modal backdrop.
 */
.cookie-modal::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

/* ---------------------------------------------------------
   MODAL DIALOG
   --------------------------------------------------------- */

.cookie-modal-dialog {
  position: relative;

  width: 100%;

  max-height: calc(100vh - 40px);

  box-sizing: border-box;

  overflow-y: auto;

  padding: 28px;

  background: #ffffff;
  color: #222222;

  border-radius: 14px;

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.cookie-modal-dialog h3 {
  margin: 0 40px 10px 0;

  color: #111111;

  font-size: 26px;
  font-weight: 700;
}

.cookie-modal-dialog > p {
  margin: 0 0 18px;

  color: #444444;

  font-size: 15px;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   MODAL CLOSE BUTTON
   --------------------------------------------------------- */

.cookie-modal-close {
  position: absolute;

  top: 18px;
  right: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #f2f2f2;
  color: #111111;

  font-size: 28px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;
}

.cookie-modal-close:hover {
  background: #e5e5e5;
}

/* ---------------------------------------------------------
   COOKIE CHOICE ROW
   --------------------------------------------------------- */

.cookie-choice-row {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 18px;

  margin: 28px 0 14px;

  padding: 20px;

  background: #f7f7f7;

  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.cookie-choice-label-btn {
  padding: 0;

  color: #111111;

  font-size: 15px;
  font-weight: 700;

  white-space: nowrap;
}

/* ---------------------------------------------------------
   ANALYTICS SWITCH
   --------------------------------------------------------- */

.cookie-main-switch {
  position: relative;

  display: inline-block;

  width: 76px;
  height: 38px;

  flex: 0 0 auto;
}

.cookie-main-switch input {
  position: absolute;

  opacity: 0;

  width: 0;
  height: 0;
}

.cookie-main-slider {
  position: absolute;

  inset: 0;

  cursor: pointer;

  background: #bdbdbd;

  border-radius: 999px;

  transition: 0.2s ease;
}

.cookie-main-slider::before {
  content: "";

  position: absolute;

  width: 30px;
  height: 30px;

  left: 4px;
  top: 4px;

  background: #ffffff;

  border-radius: 50%;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  transition: 0.2s ease;
}

.cookie-main-switch input:checked + .cookie-main-slider {
  background: #18a558;
}

.cookie-main-switch input:checked + .cookie-main-slider::before {
  transform: translateX(38px);
}

.cookie-main-switch input:disabled + .cookie-main-slider {
  opacity: 0.5;

  cursor: not-allowed;
}

/* ---------------------------------------------------------
   HELP / GPC TEXT
   --------------------------------------------------------- */

.cookie-choice-help {
  margin: 0 0 18px;

  color: #555555;

  font-size: 14px;
  line-height: 1.5;

  text-align: center;
}

.cookie-gpc-notice {
  margin: 15px 0;

  padding: 10px 15px;

  background: #f5f5f5;

  border-radius: 6px;

  color: #555555;

  font-size: 13px;
  line-height: 1.5;

  text-align: center;
}

/* ---------------------------------------------------------
   SAVE BUTTON
   --------------------------------------------------------- */

.cookie-modal-actions {
  display: flex;

  justify-content: flex-end;

  margin-top: 20px;
}

.cookie-btn {
  border: 0;
  border-radius: 999px;

  padding: 10px 22px;

  cursor: pointer;

  font-size: 14px;
  font-weight: 700;
}

.cookie-btn.primary {
  background: #111111;
  color: #ffffff;
}

.cookie-btn.primary:hover {
  background: #333333;
}

/* ---------------------------------------------------------
   POLICY LINKS
   --------------------------------------------------------- */

.cookie-links {
  margin: 18px 0 0;

  color: #555555;

  font-size: 13px;
  line-height: 1.5;
}

.cookie-links a {
  color: #111111;

  text-decoration: underline;
}

.cookie-links a:hover {
  color: #333333;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {
  .cookie-consent-bar {
    min-height: 58px;

    padding: 10px 46px 10px 10px;

    font-size: 14px;
  }

  .cookie-modal[popover] {
    width: calc(100vw - 24px);
  }

  .cookie-modal-dialog {
    width: 100%;

    max-height: calc(100vh - 24px);

    padding: 22px;

    border-radius: 14px;
  }

  .cookie-modal-dialog h3 {
    font-size: 22px;
  }

  .cookie-choice-row {
    gap: 10px;

    padding: 16px 10px;
  }

  .cookie-choice-label-btn {
    font-size: 13px;
  }

  .cookie-main-switch {
    width: 66px;
    height: 34px;
  }

  .cookie-main-slider::before {
    width: 26px;
    height: 26px;
  }

  .cookie-main-switch input:checked + .cookie-main-slider::before {
    transform: translateX(32px);
  }

  .cookie-modal-actions {
    justify-content: stretch;
  }

  .cookie-btn {
    width: 100%;
  }
}

/* wrapper for badge + gloves */
.kennedy-hero__badge-wrap {
  position: absolute;
  right: 4%;
  bottom: 115px;
  z-index: 7;
}

/* small hanging gloves */
.kennedy-hero__badge-gloves {
  position: absolute;
  top: -34px;
  left: -26px;
  width: 84px;
  z-index: 9;
  transform: rotate(-10deg);
}

/* hanger line */
.kennedy-hero__badge-gloves::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(-50%);
}

/* gloves image */
.kennedy-hero__badge-gloves img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}

/* existing badge */
.kennedy-hero__badge {
  position: relative;
  width: 135px;
  height: 135px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  text-align: center;

  background: #fff;
  color: #111;

  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.35);

  transform: rotate(-7deg);
}

.kennedy-hero__badge::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

.kennedy-hero__badge-top,
.kennedy-hero__badge-bottom {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.kennedy-hero__badge strong {
  display: block;
  margin: 3px 0;
  font-size: 25px;
  line-height: 1;
  color: var(--kl-red);
}

@media (max-width: 575.98px) {
  .kennedy-hero__badge-wrap {
    right: 2%;
    bottom: 68px;
  }

  .kennedy-hero__badge {
    width: 105px;
    height: 105px;
  }

  .kennedy-hero__badge strong {
    font-size: 20px;
  }

  .kennedy-hero__badge-top,
  .kennedy-hero__badge-bottom {
    font-size: 6px;
  }

  .kennedy-hero__badge-gloves {
    width: 82px;
    top: 20px;
    left: -18px;
  }

  .kennedy-hero__badge-gloves::before {
    height: 12px;
    top: -11px;
  }
}

.area-served-badge {
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: "Kanit", sans-serif;
  margin: 5px;
  background-color: rgba(232, 0, 0, 0.14);
  color: #e80000;
}

.about-icon::before {
  position: absolute;
  content: "";
  top: 5px;
  right: -7px;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border-radius: 50%;
  z-index: -1;
}

#article_text > h2 {
  font-size: 28px !important;
}

.training-details-section .client-item::before {
  border: none;
}

.training-details-section .btn--base {
  padding: 0.2rem 1rem;
}

.control-label {
  color: #fdfdfd;
}

.subscribe-area .subscribe-content {
  padding-top: 0;
}

#footer-cookie-preferences {
  color: #8a8a8a !important;
  font-weight: bold;
}

#footer-cookie-preferences:hover {
  color: var(--main-color) !important;
}
/* =========================================================
   EXTRA LARGE / ULTRAWIDE HERO
   Keep same visual proportions as regular desktop
   ========================================================= */

@media (min-width: 1800px) {
  /*
     * IMPORTANT:
     * Stop constraining the entire hero to 1660px.
     */
  .kennedy-hero__container {
    width: 100%;
    max-width: none;

    min-height: calc(100vh - 120px);

    padding-left: 12vw;
    padding-right: 9vw;
  }

  /* =====================================================
       LEFT CONTENT
       ===================================================== */

  .kennedy-hero__content {
    max-width: 48vw;

    padding-top: 6vh;
    padding-bottom: 9vh;
  }

  .kennedy-hero__eyebrow {
    font-size: clamp(14px, 0.8vw, 20px);
    gap: clamp(15px, 1vw, 25px);
    margin-bottom: clamp(20px, 1.5vw, 35px);
  }

  .kennedy-hero__eyebrow-line {
    width: clamp(50px, 3vw, 85px);
  }

  /* =====================================================
       MAIN TITLE
       Remove the old 178px cap
       ===================================================== */

  .kennedy-hero__title-small {
    font-size: clamp(88px, 5vw, 160px);
  }

  .kennedy-hero__title-main {
    font-size: clamp(178px, 10vw, 320px);
  }

  .kennedy-hero__title-outline {
    margin-top: clamp(10px, 0.6vw, 20px);

    font-size: clamp(105px, 5.8vw, 185px);

    -webkit-text-stroke-width: clamp(2px, 0.11vw, 3px);
  }

  .kennedy-hero__title-outline::after {
    width: clamp(90px, 5vw, 160px);

    right: clamp(-200px, -6vw, -120px);

    height: clamp(4px, 0.2vw, 6px);
  }

  /* =====================================================
       SUBTITLE / COPY
       ===================================================== */

  .kennedy-hero__subtitle {
    max-width: 40vw;

    margin-top: clamp(30px, 1.8vw, 55px);

    font-size: clamp(32px, 1.8vw, 52px);
  }

  .kennedy-hero__description {
    max-width: 39vw;

    margin-top: clamp(20px, 1.3vw, 35px);

    font-size: clamp(16px, 0.9vw, 24px);
    line-height: 1.7;
  }

  /* =====================================================
       CTA
       ===================================================== */

  .kennedy-hero__actions {
    gap: clamp(35px, 2vw, 65px);

    margin-top: clamp(35px, 2vw, 60px);
  }

  .kennedy-btn {
    min-width: clamp(300px, 18vw, 500px);

    padding: clamp(9px, 0.5vw, 14px) clamp(9px, 0.5vw, 14px)
      clamp(9px, 0.5vw, 14px) clamp(28px, 1.8vw, 50px);

    font-size: clamp(14px, 0.8vw, 21px);
  }

  .kennedy-btn__icon {
    width: clamp(49px, 3vw, 75px);
    height: clamp(49px, 3vw, 75px);

    flex-basis: clamp(49px, 3vw, 75px);

    margin-left: clamp(25px, 1.4vw, 40px);
  }

  /* =====================================================
       PHONE
       ===================================================== */

  .kennedy-hero__phone {
    gap: clamp(14px, 0.8vw, 24px);
  }

  .kennedy-hero__phone-icon {
    width: clamp(50px, 3vw, 76px);
    height: clamp(50px, 3vw, 76px);
  }

  .kennedy-hero__phone small {
    font-size: clamp(10px, 0.55vw, 15px);
  }

  .kennedy-hero__phone strong {
    font-size: clamp(17px, 1vw, 27px);
  }

  /* =====================================================
       SMALL BOTTOM INFO
       ===================================================== */

  .kennedy-hero__bottom-line {
    margin-top: clamp(40px, 2.5vw, 70px);

    font-size: clamp(11px, 0.65vw, 17px);
  }

  .kennedy-hero__dot {
    width: clamp(7px, 0.4vw, 11px);
    height: clamp(7px, 0.4vw, 11px);
  }

  .kennedy-hero__separator {
    width: clamp(35px, 2.5vw, 70px);
  }

  /* =====================================================
       RIGHT SIDE / PERSON
       IMPORTANT: remove the old 830px maximum
       ===================================================== */

  .kennedy-hero__visual {
    min-height: calc(100vh - 120px);
  }

  .kennedy-hero__attorney {
    height: 82vh;

    /* Override min(82vh, 830px) */
    max-height: none;
  }

  /* =====================================================
       RED BACKGROUND BLOCK
       ===================================================== */

  .kennedy-hero__red-block {
    width: 72%;
    height: 79%;

    right: 2%;
  }

  /* =====================================================
       CIRCLES
       ===================================================== */

  .kennedy-hero__circle {
    width: clamp(540px, 30vw, 950px);
    height: clamp(540px, 30vw, 950px);
  }

  .kennedy-hero__crosshair {
    width: clamp(520px, 29vw, 920px);
    height: clamp(520px, 29vw, 920px);
  }

  /* =====================================================
       VERTICAL KENNEDY TEXT
       ===================================================== */

  .kennedy-hero__surname {
    right: 0;

    top: 7vh;

    font-size: clamp(130px, 7vw, 230px);
  }

  /* =====================================================
       READY TO FIGHT + GLOVES
       ===================================================== */

  .kennedy-hero__badge-wrap {
    right: 2%;
    bottom: 12vh;
  }

  .kennedy-hero__badge {
    width: clamp(135px, 7.5vw, 215px);
    height: clamp(135px, 7.5vw, 215px);
  }

  .kennedy-hero__badge strong {
    font-size: clamp(25px, 1.4vw, 40px);
  }

  .kennedy-hero__badge-top,
  .kennedy-hero__badge-bottom {
    font-size: clamp(8px, 0.45vw, 13px);
  }

  .kennedy-hero__badge-gloves {
    width: clamp(110px, 6vw, 180px);

    top: clamp(-95px, -0.5vw, -24px);
    left: clamp(-95px, 0vw, -38px);
  }

  /* =====================================================
       MARQUEE
       ===================================================== */

  .kennedy-hero__marquee {
    height: clamp(50px, 3vw, 78px);
  }

  .kennedy-hero__marquee-group span {
    padding-left: clamp(24px, 1.5vw, 45px);
    padding-right: clamp(24px, 1.5vw, 45px);

    font-size: clamp(11px, 0.65vw, 18px);

    line-height: clamp(50px, 3vw, 78px);
  }

  .kennedy-hero__marquee-group i {
    width: clamp(5px, 0.3vw, 8px);
    height: clamp(5px, 0.3vw, 8px);

    flex-basis: clamp(5px, 0.3vw, 8px);
  }
}

/* =========================================================
   KENNEDY HERO - MOBILE REBUILD
   Put this at the VERY END of your CSS
   ========================================================= */

@media (max-width: 575.98px) {
  /* =====================================================
       REMOVE WHITE GAP BELOW HEADER
       ===================================================== */

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  header,
  .header-section,
  .navbar,
  .navbar-area {
    margin-bottom: 0 !important;
  }

  .kennedy-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;

    min-height: auto;

    background:
      radial-gradient(
        circle at 85% 65%,
        rgba(180, 0, 0, 0.34),
        transparent 38%
      ),
      linear-gradient(140deg, #080808 0%, #0d0808 45%, #220505 100%);

    overflow: hidden;
  }

  /* =====================================================
       MAIN HERO CONTAINER
       ===================================================== */

  .kennedy-hero__container {
    width: 100%;
    max-width: 100%;

    min-height: 0;

    padding-left: 22px;
    padding-right: 22px;
  }

  .kennedy-hero__container > .row {
    margin-left: 0;
    margin-right: 0;
  }

  .kennedy-hero__content-col,
  .kennedy-hero__visual-col {
    padding-left: 0;
    padding-right: 0;
  }

  /* =====================================================
       LEFT CONTENT
       ===================================================== */

  .kennedy-hero__content {
    width: 100%;
    max-width: none;

    padding-top: 52px;
    padding-bottom: 20px;
  }

  /* James Kennedy eyebrow */
  .kennedy-hero__eyebrow {
    margin-bottom: 15px;

    gap: 10px;

    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .kennedy-hero__eyebrow-line {
    width: 35px;
    height: 2px;
  }

  /* =====================================================
       TITLE
       ===================================================== */

  .kennedy-hero__title {
    line-height: 0.82;
    letter-spacing: -0.045em;
  }

  .kennedy-hero__title-small {
    margin-bottom: 7px;

    font-size: 50px;
    line-height: 1;

    font-weight: 300;
  }

  .kennedy-hero__title-main {
    font-size: clamp(82px, 22vw, 98px);

    line-height: 0.8;

    letter-spacing: -0.055em;
  }

  .kennedy-hero__title-outline {
    margin-top: 14px;

    font-size: clamp(45px, 12vw, 55px);

    line-height: 0.9;

    -webkit-text-stroke: 1.5px var(--kl-red);
  }

  .kennedy-hero__title-outline::after {
    display: none;
  }

  /* =====================================================
       SUBTITLE
       ===================================================== */

  .kennedy-hero__subtitle {
    margin-top: 31px;
    margin-bottom: 0;

    max-width: 100%;

    font-size: 22px;
    line-height: 1.05;

    letter-spacing: -0.025em;
  }

  /* =====================================================
       DESCRIPTION
       ===================================================== */

  .kennedy-hero__description {
    max-width: 100%;

    margin-top: 24px;

    font-size: 14px;
    line-height: 1.72;

    color: rgba(255, 255, 255, 0.72);
  }

  .kennedy-hero__description p {
    margin-bottom: 0;
  }

  /* =====================================================
       CTA AREA
       ===================================================== */

  .kennedy-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 18px;

    margin-top: 31px;
  }

  .kennedy-btn {
    width: 100%;
    min-width: 0;

    min-height: 65px;

    padding: 8px 8px 8px 25px;

    font-size: 13px;
  }

  .kennedy-btn__icon {
    width: 49px;
    height: 49px;

    flex: 0 0 49px;

    margin-left: 12px;
  }

  /* =====================================================
       PHONE
       ===================================================== */

  .kennedy-hero__phone {
    width: max-content;

    gap: 14px;

    padding-left: 2px;
  }

  .kennedy-hero__phone-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;
  }

  .kennedy-hero__phone small {
    font-size: 9px;
    letter-spacing: 0.2em;
  }

  .kennedy-hero__phone strong {
    font-size: 19px;
    line-height: 1.1;
  }

  /* =====================================================
       PERSONAL INJURY / EL PASO LINE
       ===================================================== */

  .kennedy-hero__bottom-line {
    display: flex;
    align-items: center;

    margin-top: 31px;
    margin-bottom: 0;

    gap: 10px;

    font-size: 8px;

    letter-spacing: 0.08em;

    white-space: nowrap;
  }

  .kennedy-hero__separator {
    width: 18px;
    flex: 0 0 18px;
  }

  .kennedy-hero__dot {
    width: 7px;
    height: 7px;

    margin-right: 7px;

    flex: 0 0 7px;
  }

  /* =====================================================
       PERSON SECTION
       Bring James MUCH closer to the content
       ===================================================== */

  .kennedy-hero__visual-col {
    margin-top: 0;
  }

  .kennedy-hero__visual {
    position: relative;

    min-height: 475px;
    height: 475px;

    margin-top: 12px;
    margin-left: -22px;
    margin-right: -22px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: visible;
  }

  /* =====================================================
       JAMES
       ===================================================== */

  .kennedy-hero__attorney {
    position: absolute;

    left: 50%;
    bottom: 0;

    height: 455px;

    transform: translateX(-50%);

    opacity: 1;

    z-index: 5;
  }

  .kennedy-hero__attorney img {
    display: block;

    width: auto;
    height: 100%;

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    transform: none !important;

    filter: drop-shadow(-12px 20px 28px rgba(0, 0, 0, 0.42));
  }

  /* =====================================================
       RED SHAPE BEHIND JAMES
       ===================================================== */

  .kennedy-hero__red-block {
    position: absolute;

    width: 82%;
    height: 76%;

    left: 50%;
    right: auto;

    bottom: 0;

    transform: translateX(-50%);

    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 18%);
  }

  /* =====================================================
       CIRCLE GRAPHICS
       ===================================================== */

  .kennedy-hero__circle {
    width: 350px;
    height: 350px;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);
  }

  .kennedy-hero__crosshair {
    width: 340px;
    height: 340px;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%) rotate(45deg);
  }

  .kennedy-hero__surname {
    display: none;
  }

  /* =====================================================
       READY TO FIGHT BADGE
       ===================================================== */

  .kennedy-hero__badge-wrap {
    position: absolute;

    right: 12px;
    bottom: 68px;

    z-index: 9;
  }

  .kennedy-hero__badge {
    width: 102px;
    height: 102px;

    transform: rotate(-7deg);
  }

  .kennedy-hero__badge strong {
    font-size: 20px;
  }

  .kennedy-hero__badge-top,
  .kennedy-hero__badge-bottom {
    font-size: 6px;
  }

  /* Gloves */
  .kennedy-hero__badge-gloves {
    width: 76px;

    top: -42px;
    left: -38px;

    z-index: 5;
  }

  /* =====================================================
       MARQUEE
       ===================================================== */

  .kennedy-hero__marquee {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    width: calc(100% + 44px);

    margin-left: -22px;
    margin-right: -22px;

    height: 42px;

    z-index: 20;
  }

  .kennedy-hero__marquee-group span {
    padding-left: 18px;
    padding-right: 18px;

    font-size: 8px;
    line-height: 42px;

    letter-spacing: 0.15em;
  }

  .kennedy-hero__marquee-group i {
    width: 4px;
    height: 4px;

    flex: 0 0 4px;
  }
}

/* =========================================================
   FINAL MOBILE HERO POLISH
   Must be AFTER all existing Kennedy hero mobile CSS
   ========================================================= */

@media (max-width: 575.98px) {
  /* -----------------------------------------------------
       1. CLEAR THE FIXED / ABSOLUTE MOBILE HEADER

       ONE is currently being hidden underneath the navbar.
       ----------------------------------------------------- */

  .kennedy-hero__content {
    padding-top: 92px !important;
    padding-bottom: 0 !important;
  }

  /* Hide eyebrow on mobile.
       We already have enough brand information in the header. */
  .kennedy-hero__eyebrow {
    display: none;
  }

  /* -----------------------------------------------------
       2. TIGHTER TITLE
       Keep the same impact without consuming half the screen.
       ----------------------------------------------------- */

  .kennedy-hero__title {
    margin: 0;

    line-height: 0.82;

    letter-spacing: -0.045em;
  }

  .kennedy-hero__title-small {
    margin: 0 0 3px;

    font-size: 43px;
    line-height: 0.95;

    font-weight: 300;
  }

  .kennedy-hero__title-main {
    font-size: clamp(76px, 21vw, 88px);
    line-height: 0.82;
  }

  .kennedy-hero__title-outline {
    margin-top: 12px;

    font-size: clamp(42px, 11.5vw, 49px);
    line-height: 0.9;

    -webkit-text-stroke: 1.25px var(--kl-red);
  }

  /* -----------------------------------------------------
       3. SUBTITLE
       ----------------------------------------------------- */

  .kennedy-hero__subtitle {
    margin-top: 29px;

    max-width: 100%;

    font-size: 20px;
    line-height: 1.08;

    letter-spacing: -0.03em;
  }

  /* -----------------------------------------------------
       4. DESCRIPTION
       Current version has too much vertical breathing room.
       ----------------------------------------------------- */

  .kennedy-hero__description {
    margin-top: 20px;

    font-size: 14px;
    line-height: 1.58;

    color: rgba(255, 255, 255, 0.72);
  }

  /* -----------------------------------------------------
       5. CTA
       ----------------------------------------------------- */

  .kennedy-hero__actions {
    gap: 16px;

    margin-top: 26px;
  }

  .kennedy-btn {
    min-height: 60px;

    padding: 6px 7px 6px 22px;

    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .kennedy-btn__icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;
  }

  /* -----------------------------------------------------
       6. PHONE
       ----------------------------------------------------- */

  .kennedy-hero__phone {
    margin-top: 0;
  }

  .kennedy-hero__phone-icon {
    width: 47px;
    height: 47px;

    flex: 0 0 47px;
  }

  .kennedy-hero__phone small {
    font-size: 8px;
  }

  .kennedy-hero__phone strong {
    font-size: 18px;
  }

  /* -----------------------------------------------------
       7. PERSONAL INJURY / EL PASO META
       ----------------------------------------------------- */

  .kennedy-hero__bottom-line {
    margin-top: 25px;

    gap: 8px;

    font-size: 7px;
    letter-spacing: 0.06em;
  }

  .kennedy-hero__separator {
    width: 16px;
    flex-basis: 16px;
  }

  /* -----------------------------------------------------
       8. BRING JAMES UP
       This is the biggest visual improvement.
       ----------------------------------------------------- */

  .kennedy-hero__visual-col {
    margin-top: -5px !important;
  }

  .kennedy-hero__visual {
    height: 385px;
    min-height: 385px;

    margin-top: -5px;
  }

  .kennedy-hero__attorney {
    height: 390px;

    bottom: 0;
  }

  /* Make James wider visually on mobile */
  .kennedy-hero__attorney img {
    height: 100%;
    width: auto;

    max-width: none;

    object-fit: contain;
    object-position: center bottom;
  }

  /* -----------------------------------------------------
       9. RED SHAPE
       ----------------------------------------------------- */

  .kennedy-hero__red-block {
    width: 88%;
    height: 76%;

    bottom: 0;
  }

  /* -----------------------------------------------------
       10. BACKGROUND CIRCLE
       ----------------------------------------------------- */

  .kennedy-hero__circle {
    width: 330px;
    height: 330px;

    top: 50%;
  }

  .kennedy-hero__crosshair {
    width: 320px;
    height: 320px;

    top: 50%;
  }

  /* -----------------------------------------------------
       11. READY TO FIGHT + GLOVES
       ----------------------------------------------------- */

  .kennedy-hero__badge-wrap {
    right: 9px;
    bottom: 48px;
  }

  .kennedy-hero__badge {
    width: 94px;
    height: 94px;
  }

  .kennedy-hero__badge strong {
    font-size: 18px;
  }

  .kennedy-hero__badge-top,
  .kennedy-hero__badge-bottom {
    font-size: 5.5px;
  }

  .kennedy-hero__badge-gloves {
    width: 72px;
    top: 7px;
    left: -20px;
  }

  /* -----------------------------------------------------
       12. MARQUEE
       ----------------------------------------------------- */

  .kennedy-hero__marquee {
    height: 39px;
  }

  .kennedy-hero__marquee-group span {
    padding-left: 16px;
    padding-right: 16px;

    font-size: 7.5px;
    line-height: 39px;
  }
}

.about-item-area .swiper-wrapper .swiper-slide img {
  max-width: 150px !important;
}

.pb-form-card .control-label {
  color: black;
}

.breadcrumb-item.active {
  text-transform: capitalize;
}

.subscribe-area {
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 25%);
}

.subscribe-area label {
  color: #000;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.user-welcome-popup {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 70px rgba(6, 22, 38, 0.34) !important;
  overflow: hidden !important;
}

.user-welcome-html {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.user-welcome-modal {
  color: #333;
  font-family: Arial, sans-serif;
}

.user-welcome-header {
  background: #464e56;
  padding: 28px 32px 24px;
}

.user-welcome-header p {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.user-welcome-header h2 {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
}

.user-welcome-header span {
  color: #a8bfd4;
  display: block;
  font-size: 14px;
  line-height: 1.4;
}

.user-welcome-accent {
  background: #fff;
  height: 4px;
}

.user-welcome-body {
  padding: 30px 32px 28px;
  text-align: center;
}

.user-welcome-badge {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid #dde6ef;
  border-radius: 50%;
  color: #1a3a5c;
  display: inline-flex;
  font-size: 28px;
  height: 74px;
  justify-content: center;
  margin-bottom: 18px;
  width: 74px;
}

.user-welcome-message {
  color: #555;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 12px;
  max-width: 410px;
}

.user-welcome-message strong {
  color: #1a3a5c;
  font-weight: 700;
}

.user-welcome-note {
  color: #888;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 390px;
}

.user-welcome-confirm {
  background: #464e56 !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  margin: 0 0 28px !important;
  min-width: 170px;
  padding: 14px 24px !important;
}

.user-welcome-confirm:focus {
  outline: none !important;
}

.user-welcome-confirm:hover {
  background: #e79a1d !important;
}

@media (max-width: 575px) {
  .user-welcome-header {
    padding: 24px 22px 20px;
  }

  .user-welcome-header h2 {
    font-size: 21px;
  }

  .user-welcome-body {
    padding: 26px 22px 24px;
  }

  .user-welcome-message {
    font-size: 16px;
  }
}