/**
 *   MAKE ELECTRON APP FEEL MORE NATIVE
 *
 *   * Prevent dragging all HTML elements, specially:
 *   	- images
 *   	- links (anchors)
 *
 */

*, *::after, *::before {
	-webkit-user-drag: none;
	cursor: default;
}

img {
	pointer-events: none;
}

::selection {
	background: #fff;
	color: #333;
}

/* Links */
a {
	color: #b04b5a;
}

a:hover {
	color: #fff;

}


#how-it-works::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.70)
    );
z-index: 0;
}
	
#how-it-works .container {
position: relative;
z-index: 1;
}
	

.text-shadow-dark-1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
	 
.text-4 {
    font-size: 1.3em !important;
}


.system-label {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.12em;
	line-height: 1.4;
}
	 
.card-body-spacious {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 2rem;
	padding-right: 2rem;
	  
.card ul li {
  line-height: 1.8;
  margin-bottom: 2px;
}
.custom-list {
  display: table;          /* key change */
  margin: 0 auto;          /* centers the block */
  padding-left: 1rem;    /* space for bullets */
  list-style-type: disc;
  max-width: 320px; /* controls width so it looks balanced */
}

.custom-list li {
  text-align: left;        /* keeps text clean */
  line-height: 1.7;
  margin-bottom: 10px;
}
 
.custom-cta-btn {
    transition: all .2s ease;
}

/* default state already white via btn-light */

.custom-cta-btn:hover {
    background-color: #f2f2f2; /* subtle shift, not inversion */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}	

@media (min-width: 768px) and (max-width: 991px) {
  	#how-it-works .col-md-6,
  	#how-it-works .col-lg-5 {
    flex: 0 0 auto;
    width: 50%;
  }
}