@media (max-width: 991.98px) {
    .navbar-nav .nav-link, .dropdown-item, .mega-menu-content a {
        padding-top: 0.1 !important;
        padding-bottom: 0 !important;
    }
}
#biodescription { text-align: left !important } 
.nav-item a {
  font-size: 0.7rem !important;
}
.badge-info {
  background-color: rgb(98, 58, 255) !important;
  font-size: 0.6rem !important;
}
.badge {
  font-size: 0.6rem !important;
}
.collapse > div > p {
  text-align: left !important;
}
h5.card-title {
  font-size: 20px !important;
}
.timeline-heading, .obstacle-title, .benefit-title, .faq-title, th {
  # text-transform: uppercase;
  font-family: 'Sora' !important;
  font-weight: 700 !important;
}
.accordion-wrapper .card-header button.collapsed, th, td {
  color: white !important;
}
#quotepayment {
  text-align: center !important;
}
.paymentbenefits p, .paymentbenefits h1 {
  text-align: left !important;
}
.paymentbenefits p {
  font-size: 16px !important;
  line-height: 24px !important;
}
.paymentbenefits h1 {
  font-size: 20px !important;
  line-height: 24px !important;
}
#payment-form {
  margin-left: 25px !important;
  margin-right: 25px !important;
}
.StripeElement {
  background: white !important;
}
.form-group label, .form-group input, .col-form-label {
  font-size: 16px !important;
  text-align: left !important;
  padding-bottom: 0px !important;
  color: white !important;
}
.form-group input {
  padding-top: 5px !important;
}
.close, label {
  color: white !important;
}
.page-loading h1, .page-loading h2 {
  color: black !important;
}
.info h6 {
  text-align: left !important;
}
.social li a i {
  color: rgba(255, 255, 255, 1) !important;
}
.arrow_block { 
  display: none !important;
}
label {
  font-family: Sans-serif !important;
  color: white !important;
  font-weight: 500 !important;
}
.dropdown-menu {
  top: 75px !important;
}
.white-wrapper, .light-wrapper, .bg-white {
  background: none !important;
}
.sm-collapsible {
  margin-top: 30px;
}
hr {
  border-color: rgb(187, 40, 169) !important;
}
.accordion-wrapper .card-header>* {
    line-height: 1.3rem !important;
}
.btn {
    font-family: "Rubik", Sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    background-color: rgb(187, 40, 169) !important;
    # background-image: linear-gradient(120deg, #C127A2 0%, #623AFF 100%) !important; 
    line-height: 18px !important;
    text-transform: uppercase;
}
#wrapper_1 {
  background-image: url('/assets/img/themes/madness/background.jpg') !important;
  background-position: top center !important;
  background-size: cover !important;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s !important;
  padding: 4% 0% 6% 0% !important;
}
#wrapper_2 {
    background-color: #010101 !important;
    background-size: cover !important;
    background-position: top center !important;
}
body {
  background-color: #010101 !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
.breadcrumb {
  background-color: transparent !important;
}
input, select {
  border-radius: 8px !important;
}
.availability h2 {
  color: #BF27A3 !important;
  font-family: "Sora", Sans-serif !important;
  text-transform: uppercase !important;
}
# .availability h4 {
#   color: #623AFF !important;
# }
#monthYear {
  color: #623AFF !important;
  font-family: "Sora", Sans-serif !important;
  text-transform: uppercase !important;
}
.selected-day {
  background: #623AFF !important;
  color: white !important;
}
.available {
  background: #623AFF !important;
  color: white !important;
}
.card, .box, .banner--stick {
  background-color: #1a1a1a !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
.modal-content {
  background-color: transparent !important;
}
.modal-content h5 {
  text-align: left !important;
}
.modal-content .close {
  margin-right: 30px !important;
  margin-top: 10px !important;
}
.modal-content .box {
  padding-top: 20px !important;
}
strong, h1 span, h2 span, h3 span, .info span, .owl-dot span {
  background-color: #6a38f7 !important;
  color: white !important;
}
.color-gray, .color-default {
  color: #6a38f7 !important;
}
h2 { 
  font-family: "Sora", Sans-serif !important;
  font-size: 35px !important;
  font-weight: 500 !important;
  color: white !important;
  letter-spacing: none !important;
}
h1, h2, h3, h4, h5, h6, .meta, label {
  color: white !important;
  text-align: center !important;
  line-height: 2.1rem !important; 
  font-family: "Sora", Sans-serif !important;
}
label, select, .form-control {
  line-height: 1.4rem !important;
  font-size: 0.7rem !important;
}
.inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.plyr__control--overlaid {
  background: rgb(191, 39, 163) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) { 
  thead {
    display: none !important;
  }
  #titular {
    font-size: 28px !important;
    line-height: 20px !important;
  }
  .inner {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  h2, .display-3 {
    font-size: 24px !important;
    line-height: 36px !important;
  }
  h1.display-3, h2.display-3, h2#warranty, h2#benefits, h2#obstacles, h2#steps, h2#testimonials, h2#biotitle, h2#schedule, h2#formtitle {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  h1, h4, h5, h6 {
    line-height: 38px !important;
  }
  h3 {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  h3.color-default {
    font-size: 32px !important;
    line-height: 36px !important;
  }
  h4 {
    font-size: 18px !important; 
    line-height: 26px !important;
  }

  #titular {
    font-size: 24px !important;
  }
}
a {
  color: white !important;
}
.post-title {
  font-family: "Sora", Sans-serif !important;
  font-size: 21px !important;
  line-height: 28px !important;
  color: #BF27A3 !important;
  font-weight: 700 !important;
}
.post-title a {
  font-family: "Sora", Sans-serif !important;
  font-weight: 700 !important;
}
.post-content {
  font-size: 0.8rem !important;
  line-height: 24px !important;
  margin-top: 15px !important;
  margin-left: 30px !important;
  margin-right: 30px !important;
}
blockquote p {
  text-align: left !important;

  padding: 30px;
}
#titular {
  margin-bottom: 40px;
}

footer p, footer li, footer h6 {
  font-size: 0.75rem !important;
  line-height: 24px !important;
  text-align: left !important;
}

footer#wrapper_1 {
  padding-bottom: 0px !important;
}

p {
  text-align: center !important;
}
p, li {
  margin-block-start: 0 !important;
  font-family: "Inter", Sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1rem !important;
  color: white !important;
}
#obstaclesdescription, #bio, #testimonialsdescription {
  color: white !important;
  font-family: "Sora", Sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 42px !important;
}
.btn-ok, .btn-start {
  background-color: #6a38f7 !important;
  color: white !important;
}

/* Mobile adjustments for text content */
@media (max-width: 768px) {
  p, li, a {
    font-size: 18px !important;
    line-height: 24px !important;
  }
  #obstaclesdescription, #bio, #testimonialsdescription {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}
#benefit, #obstacle {
  color: white !important;
  font-family: "Sora", Sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 42px !important;
}
#logos {
  margin-bottom: 100px !important;
}
#roles, #steps, #medios, #programa, #opiniones, #faq, #customerstitle, #logos, #benefits, #biotitle, #warranty, #schedule, #formtitle, #obstacles, #testimonials {
  color: #BF27A3 !important;
  font-family: "Sora", Sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.9rem !important;
}

/* Mobile adjustments for section titles */
@media (max-width: 768px) {
  #logos {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  #benefit, #obstacle {
    font-size: 20px !important;
    line-height: 28px !important;
  }
  #roles, #steps, #medios, #programa, #opiniones, #faq, #customerstitle, #logos, #benefits, #biotitle, #warranty, #schedule, #formtitle, #obstacles, #testimonials {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}
button.hamburger:before, button.hamburger span, button.hamburger:after {
  background: white !important;
}
td a {
  font-size: 26px !important;
}
.box h4, .box h2, .box h6, .box p {
  text-align: left !important;
}
.box p {
  font-size: 0.7rem !important;
  line-height: 22px !important;
}
.bloque, .box {
  color: #623AFF !important;
  font-family: "Bebas Neue", Sans-serif !important;
  font-weight: 100 !important;
  /* text-shadow: 0px 0px 10px #6A38F7 !important; */
  /* margin: 10% 1% 1% 1%; */
  padding-left: 40px; 
  border-style: solid !important;
  border-width: 1px 1px 1px 1px !important;
  border-color: #623AFF !important;
  border-radius: 31px 31px 31px 31px !important;
}
#bloques {
  padding: 20px;
  border-color: #623AFF !important;
  border-style: solid !important;
  border-width: 2px 2px 2px 2px !important;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s !important;
}
.icon-list li {
  color: white !important;
  transition: color 0.3s;
}
.icon-list li i, .icofont-verification-check {
  font-size: 24px;
  color: #623AFF !important;
  transition: color 0.3s !important;
}

blockquote p {
  font-size: 0.8rem !important;
  line-height: 1.2rem !important;
  margin: 0px !important;
}

input:not([type="range"]):not([type="submit"]), select, textarea {
  background: white !important;
  font-family: Sans-serif !important;
  color: black !important;
  font-weight: 500 !important;
}

/* Testimonial styles to match opiniones.ejs */
.testimonial-item .box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-item .box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.person-avatar img, .avatar-placeholder {
  transition: transform 0.3s ease;
}
.person-avatar:hover img, .person-avatar:hover .avatar-placeholder {
  transform: scale(1.05);
}

/* Read more link styles */
.read-more-link a:hover {
  color: rgb(191, 39, 163) !important;
  text-decoration: underline !important;
}

/* Blog item styles */
.blog-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}
.blog-item .btn:hover {
  background-color: rgb(171, 19, 143) !important;
  transform: scale(1.05);
}

/* Final mobile adjustments for remaining elements */
@media (max-width: 768px) {
  td a {
    font-size: 18px !important;
  }
  .post-title {
    font-size: 18px !important;
  }
  .post-content {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .bloque, .box {
    padding-left: 20px !important;
  }
  #bloques {
    padding: 15px !important;
  }
  blockquote p {
    padding: 15px !important;
  }
  .box p {
    font-size: 0.7rem !important;
    line-height: 1rem !important;
  }
  .icon-list li i {
    font-size: 20px !important;
  }
  .img-blob {
    max-width: 80% !important;
    margin: 0 auto !important;
  }
  .testimonial-item .person-avatar img, .testimonial-item .avatar-placeholder {
    width: 40px !important;
    height: 40px !important;
  }
  .testimonial-item .person-name {
    font-size: 0.9em !important;
  }
  .testimonial-item .badge {
    font-size: 0.65em !important;
  }
  .testimonial-item .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .testimonial-item .person-avatar {
    margin-bottom: 0.5rem !important;
    margin-right: 0 !important;
  }
  .testimonial-item .person-info {
    text-align: center !important;
  }
}

.card, .box {
  border: transparent !important;
  background: rgba(40, 167, 69, 0.1) !important;
  box-shadow: none;
  border-radius: 3px !important;
}

#titular {
  font-family: "Sora", Sans-serif !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  line-height: 48px !important;
  margin-bottom: 40px;
}

#subtitular {
  font-family: "Inter", Sans-serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 32px !important;
}

.formulario-paso > h1 {
  color: #BF27A3 !important;
  font-family: "Sora", Sans-serif !important;
  font-weight: 900 !important; 
  text-align: left !important;
  font-size: 1.3rem !important;
  line-height: 1.6rem !important;
} 

select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  height: 2.5rem !important;
}

*[type="submit"] {
    height: 2.5rem !important;
}

.StripeElement {
  height: 2.5rem !important;
  border-radius: 4px !important;
}

.formulario-paso > h2 {
    font-family: "Sora", Sans-serif !important;
    color: rgb(106, 56, 247) !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    text-align: left !important;
    line-height: 1.6rem !important;
}

.formulario-paso > p {
    text-align: left !important;
    font-size: 0.8rem !important;
    line-height: 1.1rem !important;
}

.arrow-btn {
  color: #BF27A3 !important;
}

.error-notification {
  background: #6a38f7 !important;
}

.progressbar:not(.circle) svg, .progressbar:not(.circle) svg path {
    border-radius: 0px;
}

.progressbar.blue svg path:last-child {
    stroke: #6a38f7 !important;
}

.mobile-time-slot {
  background:  #6a38f7 !important;
}

@media (max-width: 768px) { 
  #titular {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  p, li {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  a {
    font-size: 16px !important;
  }

  #subtitular {
    font-family: "Sora", Sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
  }

  #medios, #customerstitle, #roles {
    font-size: 24px !important;
    line-height: 24px !important;
  }
}
.btn-primary { background-color: #8214FF !important} 
.btn-primary { color: white !important}
/*
 img {
    filter: grayscale(100%);
  }
*/

/* Aplica bordes rectangulares a todos los elementos de formulario */
input,
textarea,
select {
    border-radius: 0 !important; /* Quita los bordes redondeados */
    -webkit-appearance: none; /* Remueve el estilo nativo en navegadores como Safari */
    -moz-appearance: none;
    appearance: none;
    padding: 0.5em; /* Espaciado interno uniforme */
    border: 1px solid #ccc; /* Borde sencillo y consistente */
    font-family: inherit; /* Usa la fuente heredada del contexto */
    font-size: 1rem; /* Tamaño de texto coherente */
    line-height: 1.5; /* Espaciado entre líneas */
}

/* Opcional: Ajusta los estilos del `select` específicamente */
select {
    background-color: #fff; /* Fondo blanco para consistencia */
    color: #333; /* Color del texto */
    cursor: pointer; /* Cambia el cursor a puntero */
}

/* Hover y focus para todos los elementos */
input:hover,
textarea:hover,
select:hover {
    border-color: #888; /* Cambia el color del borde al pasar el mouse */
}

input:focus,
textarea:focus,
select:focus {
    border-color: #0056b3; /* Color del borde al enfocar */
    outline: none; /* Remueve el borde adicional */
}
.bloque, .box  { border-radius: 0px 0px 0px 0px !important;  }