:root {
	--first-color: #000;
	--second-color: #1b263b;
	--third-color: #152a38;
	--fourth-color: #ffc900;

	--whitesmoke-color: #f9f9f9;
	--white-color: #FFF;
	--black-color: #000;
	--grey-color: #808080;
	--red-color: #ff0000;
	--green-color: #008000;


	--bs-body-font-family: "Roboto Mono", monospace;
	/* --bs-body-font-family: Brush Script MT; */
	/* --bs-body-font-family: "DynaPuff", system-ui; */
	/* --bs-body-font-family: Arial; */

	--navbar-height: 80px;
	--navbar-height-sm: 70px;
}


@font-face {
    font-family: 'Roboto Mono';
    src: url("../../fonts/Roboto_Mono/RobotoMono-VariableFont_wght-f01b1a76d9917ff866c90dafca0feb5e.ttf") format('truetype');
    font-weight: 100 900;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url("../../fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght-44594d8f04eb959e27c8afd10a502a63.ttf") format('truetype');
    font-weight: 100 900;
    font-style: italic;
	font-display: swap;
}


.main-container {
	flex: 1;
}

/*--------------------------------------------------------------
	FONT-SIZE
--------------------------------------------------------------*/
/*--------------------------------------------------------------
  XS < 576px
--------------------------------------------------------------*/
@media (min-width: 1px) {
	.ftz-xs-xxxxl { font-size: 4rem; }
	.ftz-xs-xxxl { font-size: 3rem; }
	.ftz-xs-xxl  { font-size: 2.5rem; }
	.ftz-xs-xl   { font-size: 2rem; }
	.ftz-xs-lg   { font-size: 1.65rem; }
	.ftz-xs-l    { font-size: 1.50rem; }
	.ftz-xs-mdl  { font-size: 1.40rem; }
	.ftz-xs-md   { font-size: 1.25rem; }
	.ftz-xs-mds  { font-size: 1.05rem; }
	.ftz-xs-s    { font-size: 0.95rem; }
	.ftz-xs-xs   { font-size: 0.85rem; }
	.ftz-xs-xxs  { font-size: 0.70rem; }
}
/*--------------------------------------------------------------
  SM ≥ 576px
--------------------------------------------------------------*/
@media (min-width: 576px) {
	.ftz-sm-xxxxl { font-size: 4rem; }
	.ftz-sm-xxxl { font-size: 3rem; }
	.ftz-sm-xxl  { font-size: 2.5rem; }
	.ftz-sm-xl   { font-size: 2rem; }
	.ftz-sm-lg   { font-size: 1.65rem; }
	.ftz-sm-mdl  { font-size: 1.40rem; }
	.ftz-sm-md   { font-size: 1.25rem; }
	.ftz-sm-mds  { font-size: 1.05rem; }
	.ftz-sm-s    { font-size: 0.95rem; }
	.ftz-sm-xs   { font-size: 0.85rem; }
	.ftz-sm-xxs  { font-size: 0.70rem; }
}
/*--------------------------------------------------------------
  MD ≥ 768px
--------------------------------------------------------------*/
@media (min-width: 768px) {
	.ftz-md-xxxxl { font-size: 4rem; }
	.ftz-md-xxxl { font-size: 3rem; }
	.ftz-md-xxl  { font-size: 2.5rem; }
	.ftz-md-xl   { font-size: 2rem; }
	.ftz-md-lg   { font-size: 1.65rem; }
	.ftz-md-l    { font-size: 1.50rem; }
	.ftz-md-mdl  { font-size: 1.40rem; }
	.ftz-md-md   { font-size: 1.25rem; }
	.ftz-md-mds  { font-size: 1.05rem; }
	.ftz-md-s    { font-size: 0.95rem; }
	.ftz-md-xs   { font-size: 0.85rem; }
	.ftz-md-xxs  { font-size: 0.70rem; }
}
/*--------------------------------------------------------------
  LG ≥ 992px
--------------------------------------------------------------*/
@media (min-width: 992px) {
	.ftz-lg-xxxxl { font-size: 4rem; }
	.ftz-lg-xxxl { font-size: 3rem; }
	.ftz-lg-xxl  { font-size: 2.5rem; }
	.ftz-lg-xl   { font-size: 2rem; }
	.ftz-lg-lg   { font-size: 1.65rem; }
	.ftz-lg-l    { font-size: 1.50rem; }
	.ftz-lg-mdl  { font-size: 1.40rem; }
	.ftz-lg-md   { font-size: 1.25rem; }
	.ftz-lg-mds  { font-size: 1.05rem; }
	.ftz-lg-s    { font-size: 0.95rem; }
	.ftz-lg-xs   { font-size: 0.85rem; }
	.ftz-lg-xxs  { font-size: 0.70rem; }
}
/*--------------------------------------------------------------
  XL ≥ 1200px
--------------------------------------------------------------*/
@media (min-width: 1200px) {
	.ftz-xl-xxxxl { font-size: 4rem; }
	.ftz-xl-xxxl { font-size: 3rem; }
	.ftz-xl-xxl  { font-size: 2.5rem; }
	.ftz-xl-xl   { font-size: 2rem; }
	.ftz-xl-lg   { font-size: 1.65rem; }
	.ftz-xl-l    { font-size: 1.50rem; }
	.ftz-xl-mdl  { font-size: 1.40rem; }
	.ftz-xl-md   { font-size: 1.25rem; }
	.ftz-xl-mds  { font-size: 1.05rem; }
	.ftz-xl-s    { font-size: 0.95rem; }
	.ftz-xl-xs   { font-size: 0.85rem; }
	.ftz-xl-xxs  { font-size: 0.70rem; }
}
/*--------------------------------------------------------------
  XXL ≥ 1400px
--------------------------------------------------------------*/
@media (min-width: 1400px) {
	.ftz-xxl-xxxxl { font-size: 4rem; }
	.ftz-xxl-xxxl { font-size: 3rem; }
	.ftz-xxl-xxl  { font-size: 2.5rem; }
	.ftz-xxl-xl   { font-size: 2rem; }
	.ftz-xxl-lg   { font-size: 1.65rem; }
	.ftz-xxl-l    { font-size: 1.50rem; }
	.ftz-xxl-mdl  { font-size: 1.40rem; }
	.ftz-xxl-md   { font-size: 1.25rem; }
	.ftz-xxl-mds  { font-size: 1.05rem; }
	.ftz-xxl-s    { font-size: 0.95rem; }
	.ftz-xxl-xs   { font-size: 0.85rem; }
	.ftz-xxl-xxs  { font-size: 0.70rem; }
}


/*--------------------------------------------------------------
	TITLES AND PARAGRAPHS
--------------------------------------------------------------*/
h1 {
	color: var(--first-color);
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 2rem;
	line-break: revert-layer;
}

h1:after {
	background-color: var(--fourth-color);
	content: '';
	display: block;
	height: 5px;
	width: 30px;
	border-radius: 10px;
	margin-top: 0.2%;
}

.h1-center {
	text-align: center;
}

.h1-center:after {
	margin-left: 45%;
}


h3 {
	color: var(--second-color);
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 1rem;
}

h3:after {
	background-color: var(--fourth-color);
	content: '';
	display: block;
	height: 3px;
	width: 20px;
	margin-top: -2px;
}

.h4,
h4 {
	letter-spacing: 2px;
	font-size: 15px;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
}

ul,
p {
	margin: 0;
}

/*--------------------------------------------------------------
	IMAGES
--------------------------------------------------------------*/
.img-responsive {
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
	COLORS
--------------------------------------------------------------*/
.first-color {color: var(--first-color) !important;}
.second-color {color: var(--second-color) !important;}
.third-color {color: var(--third-color) !important;}
.fourth-color {color: var(--fourth-color) !important;}
.white-color {color: var(--white-color) !important;}
.black-color {color: var(--black-color) !important;}
.grey-color {color: var(--grey-color) !important;}
.red-color {color: var(--red-color) !important;}
.green-color {color: var(--green-color) !important;}
.whitesmoke-color {color: var(--whitesmoke-color) !important;}

/*--------------------------------------------------------------
	BACKGROUND COLORS
--------------------------------------------------------------*/
.first-background-color {background-color: var(--first-color) !important;}
.second-background-color {background-color: var(--second-color) !important;}
.third-background-color {background-color: var(--third-color) !important;}
.fourth-background-color {background-color: var(--fourth-color) !important;}
.white-background-color {background-color: var(--white-color) !important;}
.black-background-color {background-color: var(--black-color) !important;}
.grey-background-color {background-color: var(--grey-color) !important;}
.whitesmoke-background-color {background-color: var(--whitesmoke-color) !important;}


/* --------------------------------------------------------------
	HR
-------------------------------------------------------------- */
.hr-first-background-color {
	background-color: var(--first-color);
	opacity: 0.80;
	height: 2px !important;
}


/*--------------------------------------------------------------
	PROGRESS BAR
--------------------------------------------------------------*/
.progress-container {
    width: 100%;
    background: var(--black-color);
    position: absolute;
    bottom: 0;
    left: 0;
}

.navbar-progress-bar {
    height: 3px;
    background: linear-gradient(90deg,rgb(255, 201, 0) 0%, rgb(247, 189, 248) 50%, rgb(255, 135, 9) 100%);
    width: 0%;
}


/*--------------------------------------------------------------
	BODY
--------------------------------------------------------------*/
body {
	font-family: var(--bs-body-font-family);
	color: var(--black-color);
	background-color: var(--white-color);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/*--------------------------------------------------------------
	NABVAR
--------------------------------------------------------------*/
.navbar-logo-img {
	height: auto;
	opacity: 0;
}



@media (min-width: 1px) and (max-width: 768px) {
	.navbar-logo-img {
		width: 50px;
		margin-left: 5%;
	}

	.my-navbar {
		height: var(--navbar-height-sm);
	}

	.factis-navbar{
		height: var(--navbar-height-sm);
	}
}


@media (min-width: 768px) {
	.navbar-logo-img {
		width: 60px;
		margin-left: 5%;
	}

	.my-navbar {
		height: var(--navbar-height);
	}

	.factis-navbar{
		height: var(--navbar-height);
	}
}


/* xl >= 1200px */
@media (min-width: 1200px) {
	.navbar-logo-img {
		width: 80px;
		margin-left: 10%;
	}
}


.my-navbar .nav-item,
.dropdown-menu {
	background-color: var(--first-color);
}


.dropdown-item:focus, 
.dropdown-item:hover {
	background-color: var(--first-color);
}

.dropdown-menu {
	border: 2px solid var(--fourth-color);

}

/*--------------------------------------------------------------
	FOOTER
--------------------------------------------------------------*/
.footer {

}

.footer .copyright {
	margin: 0;
	text-decoration: none;
}

.footer .footer-right {
	text-align: right;
}

.footer .footer-left {
	text-align: left;
}

.footer .social-medias a
{
	text-decoration: none;
}

/*--------------------------------------------------------------
	FONT WEIGHT, STYLE
--------------------------------------------------------------*/
.ftw-100 {font-weight: 100;}
.ftw-300 {font-weight: 300;}
.ftw-500 {font-weight: 500;}
.ftw-700 {font-weight: 700;}
.ftw-900 {font-weight: 900;}

.ft-italic {font-style: italic;}
.text-justify {text-align: justify;}
.text-align-right {text-align: right;}
.font-alt {text-transform: uppercase;}
.text-deco-no {text-decoration: none;}

.display-none {display: none;}


/*--------------------------------------------------------------
	SORTABLE ITEMS
--------------------------------------------------------------*/
.sortable-items {
	cursor: pointer;
}


/*--------------------------------------------------------------
	MODALS
--------------------------------------------------------------*/
.modal-header {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}


.nav-pills .nav-link {
	border-radius: 0px;
}


.accordion-button:not(.collapsed) {
	color: var(--first-color);
	background-color: var(--white-color);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

/*--------------------------------------------------------------
	IMAGES
--------------------------------------------------------------*/
img {
	max-width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
	PADDING
---------------------------------------------------------------*/
.p-6 {padding: 4.5rem !important;}
.p-7 {padding: 6rem !important;}
.p-8 {padding: 8rem !important;}



/*--------------------------------------------------------------
	Preloader
--------------------------------------------------------------*/
:root {
	--loader-logo-initial-width: 40px;
	--loader-logo-initial-margin: -20px 0 0 -20px;
	--loader-logo-initial-opacity: -0.3;

	--loader-logo-final-width: 80px;
	--loader-logo-final-margin: -40px 0 0 -40px;
	--loader-logo-final-opacity: 1;
}

.page-loader {
	position: fixed;
	background: var(--first-color);
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: 9998;
}

.loader {
	position: absolute;
	width: var(--loader-logo-initial-width);
	margin: var(--loader-logo-initial-margin);
	left: 50%;
	top: 40%;
	text-indent: -9999em;
	z-index: 9999;
	animation: load 2s infinite linear;
}

.loader,
.loader:after {
	border-radius: 50%;
}


@-webkit-keyframes load {
	0% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}

	50% {
		opacity: var(--loader-logo-final-opacity);
		width: var(--loader-logo-final-width);
		margin: var(--loader-logo-final-margin);
	}

	100% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}
}

@keyframes load {
	0% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}

	50% {
		opacity: var(--loader-logo-final-opacity);
		width: var(--loader-logo-final-width);
		margin: var(--loader-logo-final-margin);
	}

	100% {
		opacity: var(--loader-logo-initial-opacity);
		width: var(--loader-logo-initial-width);
		margin: var(--loader-logo-initial-margin);
	}
}


/*--------------------------------------------------------------
	BORDER RADIUS
--------------------------------------------------------------*/
.br-10 {border-radius: 10px;}
.br-15 {border-radius: 15px;}
.br-20 {border-radius: 20px;}
.br-30 {border-radius: 30px;}
.br-50 {border-radius: 50px;}


/*--------------------------------------------------------------
	SHADOW
--------------------------------------------------------------*/
.first-shadow {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}


/*--------------------------------------------------------------
	PAGES DETAIL
--------------------------------------------------------------*/
.img-pages-detail {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	border: 4px solid white;
}

.img-pages-detail:hover {
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
	border: 4px solid whitesmoke;
}


/*--------------------------------------------------------------
	HOME SECTION AND TITLES / SUBTITLES
--------------------------------------------------------------*/
.ml11 {
    font-weight: 700;
}

.ml11 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
}

.ml11 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: var(--fourth-color);
    transform-origin: 100% 100%;
}

.ml11 .line1 { 
    top: 0; 
    left: 0;
}

.ml11 .letter {
    display: inline-block;
    line-height: 1em;
}

.new-home-section {
    position: relative;
    height: calc(100vh - var(--navbar-height));
    background-color: #000;
}

@media (min-width: 1px) and (max-width: 768px) {
	.new-home-section {
		height: calc(100vh - var(--navbar-height-sm));
	}
}

.new-home-title {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 700;
    color: var(--white-color);
    z-index: 999;
}

.first-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height));
    background-color: #000;
}

@media (min-width: 1px) and (max-width: 768px) {
	.first-wrapper {
		min-height: calc(100vh - var(--navbar-height-sm));
	}
}

.first-transition {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* xs < 576px */
@media (min-width: 1px) 
{
	.subtitle {font-size: 18px;}
	h1 {font-size: 2rem;}
	h3 {font-size: 1.2rem;}
}

/* lg >= 992px */
@media (min-width: 992px) 
{
	.subtitle {font-size: 20px;}
	h1 {font-size: 2.4rem;}
	h3 {font-size: 1.5rem;}
}

/* xl >= 1200px */
@media (min-width: 1200px) {
	.subtitle {font-size: 22px;}
	h1 {font-size: 2.8rem;}
	h3 {font-size: 1.7rem;}
}

/* xxl >= 1400px */
@media (min-width: 1400px) {
	.subtitle {font-size: 24px;}
}


/*--------------------------------------------------------------
	BUTTONS
--------------------------------------------------------------*/
.btn-white {
	background-color: var(--white-color);
	color: var(--black-color);
}

.btn-white:hover {
	background-color: var(--whitesmoke-color);
	color: var(--black-color);
}

.btn.btn-round {
	border-radius: 10px;
}

.btn.btn-d {
	background: rgba(17, 17, 17, 0.8);
	color: #fff;
}

.btn.btn-d:hover,
.btn.btn-d:focus {
	background: #111111;
}


/*--------------------------------------------------------------
	LINKS
--------------------------------------------------------------*/
a {color: #111;}

a:hover,
a:focus {
	text-decoration: none;
	color: #aaa;
	outline: 0;
}

/*--------------------------------------------------------------
	Price Table
--------------------------------------------------------------*/
.price-table {
	background: #fff;
	border: 1px solid #eaeaea;
	padding: 25px 20px;
	margin: 15px 0 30px;
	text-align: center;
}

.price-table:hover {
	background-color: #EAEAEA;
}

.price-table.best {
	border: 4px solid var(--fourth-color);
}

.borderline {
	position: relative;
	background: var(--fourth-color);
	display: block;
	height: 2px;
	width: 100%;
	margin: 20px 0 15px;
}

.borderline:before {
	position: absolute;
	background: var(--fourth-color);
	content: "";
	bottom: -7px;
	left: 50%;
	height: 14px;
	width: 14px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	margin-left: -7px;
}

.borderline:after {
	position: absolute;
	background: var(--fourth-color);
	content: "";
	bottom: -5px;
	left: 50%;
	height: 10px;
	width: 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	margin-left: -8px;
}

.price-table p.price {
	font-size: 60px;
	margin: 0 0 0 -10px;
}

.price-table p.price span {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	padding-top: 25px;
}

.price-details {
	list-style: none;
	padding: 0;
}

.price-details li {
	padding: 6px 0;
}

.price-details li>span {
	text-decoration: line-through;
	color: #555555;
}


/*--------------------------------------------------------------
	Testimonial
--------------------------------------------------------------*/
.testimonial:before {
	background: rgba(2, 2, 2, 0.4);
}

#testimonials-slider {
	position: relative;
}

.flex-control-nav {
	margin-top: 15px !important;
}