:root {	
  --color-card-1: #F2C94C;
  --color-card-2: #E9967A;
  --color-card-3: #DB7093;
  --color-card-4: #b966e7;
  --color-card-5: #1BA2DB;
  --color-card-6: #3EB75E;
  --gradient-card: radial-gradient(circle, rgba(255, 255, 255, 0.65), rgba(251, 199, 226, 0.35), rgba(220, 217, 254, 0.65));	
	
  --gradient-1: linear-gradient(rgb(255, 255, 255) 0%, rgb(239, 241, 255) 100%);
  --gradient-2: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(240, 242, 255) 100%);
  --gradient-3: linear-gradient(90deg, #8DA9FC 0%, #B48DD5 100%);
  --gradient-4: linear-gradient(180deg, #EFF1FF 0%, #FFFFFF 100%);
  --gradient-5: linear-gradient(rgb(239, 241, 255) 0%, rgb(239, 241, 255) 100%);
  --gradient-6: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(251, 199, 226, 0.15), rgba(220, 217, 254, 0.15));
  --gradient-7: linear-gradient(218.15deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --gradient-8: linear-gradient(270deg, #9e77ff 0%, #4460ff 100%);
  --gradient-9: linear-gradient(180deg, #6827FF 0%, #E3F0FF10 100%);
  --gradient-10: linear-gradient(180deg, #353e54d9 0%, #27304117 100%);	
	
}
@media only screen and (min-width:1199px) and (max-width: 1300px) {
	.hidden-logo {
		display: none;
	}
}
@media only screen and (max-width: 450px) {
	.hidden-logo {
		display: none;
	}
}
.ex-font {
	font-family: "Courier New", "monospace";
	color: var(--color-darker);
}
@media (min-width: 1200px) {
	.container-narrow {
		max-width: 1024px;
		width: 100%;
		margin-right: auto;
		margin-left: auto;	  
	}
}

.card-bg-1 {
  background: var(--gradient-1) !important;
}

.card-bg-2 {
  background: var(--gradient-2) !important;
}

.card-bg-3 {
  background: var(--gradient-8) !important;
}

.card-bg-4 {
  background: var(--gradient-4) !important;
}

.card-bg-5 {
  background: var(--gradient-5) !important;
}

.card-bg-6 {
  background: var(--gradient-6) !important;
}

.sidebar-list li {
	margin: 15px 0;
}		
.sidebar-list li strong{
	display: inline-block;
	margin: 0 15px;
	color: var(--color-secondary);
}	

.active-dark-mode .rbt-flipbox .rbt-flipbox-wrap .rbt-flipbox-front .rbt-list-style-3 li {
  color: var(--color-darker) !important;
}
.rbt-service.rbt-service-1 .rbt-flipbox-back.inner li {
  color: var(--color-white);
}		
.active-dark-mode .rbt-service.rbt-service-1 .rbt-flipbox-back.inner li {
  color: var(--color-darker);
}
.rbt-flipbox .rbt-flipbox-wrap .rbt-flipbox-back {
  /*background: linear-gradient(1turn, #e9dcfa, #d05aff);*/
	background: var(--color-pink);
}
.rbt-list-style-3 li {
  color: var(--color-darker);
}	
.front-number {
	text-align: center;
}
.front-number span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	background: var(--gradient-card);
	border-radius: 100%;
	color: var(--color-heading);
	font-size: 3em;
	margin-bottom: 50px;
}

.tab-presentation {
	background: var(--color-white);
	padding: 20px;
	border-radius: 10px;
}
.active-dark-mode .tab-presentation {
  background: var(--color-bodyest);
  box-shadow: var(--dark-shadow-3);
}
.page-work a {
	color: var(--color-secondary);
}
.narrow-block-goal {
	padding: 0 30px 30px;
}
.narrow-block {
	padding: 20px;
}
.iframe-box {
	width: 900px; 
	border-radius: 20px; 
	box-shadow: var(--ai-shadow);
	margin: 20px auto;
}
@media only screen and (max-width: 1199px) {
	.iframe-box {
		width: 98%;
	}
}
.video-box {
	padding: 10px;
}

span.balls {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: 600;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-secondary), var(--color-primary));
    color: var(--color-white);
    margin-right: 8px;
}

.faq-list {
	margin:0;
	list-style: none;
	
}
.faq-list li {
	margin:0;
	border-bottom: 1px dashed var(--color-gray);
	padding: 8px;
	font-size: 0.9em;
	transition: all 0.3s ease-out 0s;
}
.faq-list li:hover{
	padding-left: 13px;
	transition: all 0.3s ease-out 0s;
}
.faq-list li span{
	display: inline-flex;
	align-items: center;
    justify-content: center;	
	background: var(--color-violet);
	width:30px;
	height:30px;
	margin-right:10px;
	border-radius:100%;
	font-size: 1.3em;
	color:var(--color-white);
}
.faq-list li:hover span{
	transform: rotate(360deg);
}