/**********************************************************************************************************************/

/*     fonts     */

/**********************************************************************************************************************/



@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

@import url('https://fonts.googleapis.com/css?family=Almarai&display=swap');

@import url('https://fonts.googleapis.com/css?family=Vazirmatn&display=swap');



@font-face {

    font-family: 'biennaleblack';

    src: url('../webfonts/biennale_black-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_black-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalebold';

    src: url('../webfonts/biennale_bold-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_bold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalebook';

    src: url('../webfonts/biennale_book-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_book-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalehair';

    src: url('../webfonts/biennale_hair-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_hair-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennaleheavy';

    src: url('../webfonts/biennale_heavy-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_heavy-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalelight';

    src: url('../webfonts/biennale_light-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_light-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalemedium';

    src: url('../webfonts/biennale_medium-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_medium-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennaleregular';

    src: url('../webfonts/biennale_regular-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalesemibold';

    src: url('../webfonts/biennale_semibold-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_semibold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'biennalethin';

    src: url('../webfonts/biennale_thin-webfont.woff2') format('woff2'),

         url('../webfonts/biennale_thin-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}





/**********************************************************************************************************************/

/*     general     */

/**********************************************************************************************************************/



body, html {

	width: 100%;

	height: 100%;

	background: #3629b5 url("../images/bg3.webp") no-repeat center top;

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

}



.container-fluid {

	padding: 0!important;

	overflow: hidden!important;

}



#preloader {

	background: #1a2777 url("../images/loader.svg") no-repeat center center;

	background-size: 10%;

	height: 100vh;

	width: 100%;

	position: fixed;

	z-index: 8000000;

	overflow: hidden!important;

}



iframe {

	background: transparent!important;

	overflow: hidden!important;

	width: 100%!important;

	margin: 0!important;

	padding: 0!important;

	border: none!important;

}

.iframe {

	background: transparent!important;

	overflow: hidden!important;

	width: 100%!important;

	margin: 0!important;

	padding: 0!important;

	border: none!important;

}





/**********************************************************************************************************************/

/*     text & Headings     */

/**********************************************************************************************************************/





.ar {font-family: "Almarai", sans-serif!important;}



body, p {color: #fff; font: 400 1.2rem "Quicksand", sans-serif; letter-spacing: 0.5px; line-height: 1.7rem;}



a {color: #515867; text-decoration: underline; transition: all 0.5s ease;}

a:hover {color: #558dff; transition: all 0.5s ease; text-decoration: underline;}





h1 {

	color: #fff;

	font-size: 3rem;

	line-height: 3.5rem;

	font-family: "biennalesemibold", sans-serif!important;

}





h2 {

	color: #fff;

	font-size: 2.6rem;

	line-height: 3rem;

	font-family: "biennalesemibold", sans-serif!important;

}



h3 {

	color: #fff;

	font-weight: 400;

	font-size: 1.75rem;

	line-height: 2.375rem;

	letter-spacing: 0.5rem;

	text-align:center;

}

.h3 {

	color: #fff;

	font-weight: 400;

	font-size: 1.75rem;

	line-height: 2.375rem;

	letter-spacing: 0.5rem;

	text-align:center;

}




h4 {

	color: #fff;

	font-weight: 500;

	font-size: 1.1rem;

	line-height: 1.5rem;

	letter-spacing: 4px;

}



h5 {

	color: #fff;

	font-size: 1.6rem;

	line-height: 1.8rem;

	letter-spacing: -0.5px;

	font-family: "biennalesemibold", sans-serif!important;

}



h6 {

	color: #fff;

	font-size: 2rem;

	font-family: "biennalesemibold", sans-serif!important;

}



.h1-large {

	font-size: 2.75rem;

	line-height: 3.5rem;

	letter-spacing: -0.7px;

}



.p-large {

	font-size: 1.125rem;

	line-height: 1.75rem;

}



.p-small {

	font-size: 0.875rem;

	line-height: 1.5rem;

}







/**********************************************************************************************************************/

/*     bottons     */

/**********************************************************************************************************************/





.btn-solid-reg {

	display: inline-block;

	padding: 1.375rem 2.25rem 1.375rem 2.25rem;

	border: 1px solid #ff6c02;

	border-radius: 32px;

	background-color: #ff6c02;

	color: #ffffff;

	font-weight: 600;

	font-size: 0.875rem;

	line-height: 0;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-solid-reg:hover {

	border: 1px solid #ff6c02;

	background-color: transparent;

	color: #ff6c02; /* needs to stay here because of the color property of a tag */

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-solid-lg {

	display: inline-block;

	padding: 1.625rem 2.625rem 1.625rem 2.625rem;

	border-radius: 32px;

	color: #ffffff;

	font-weight: 600;

	font-size: 1rem;

	line-height: 0;

	text-decoration: none;

	transition: all 0.5s ease;

    background: linear-gradient(90deg, rgba(161,4,255,1) 0%, rgba(66,3,254,1) 61%, rgba(50,58,244,1) 100%);  

	background-size: 200% auto;



}



.btn-solid-lg:hover {

	background-position: right center;

	color: #fff; /* needs to stay here because of the color property of a tag */

	text-decoration: none;

	font-weight: 600;

	transition: all 0.5s ease;

	box-shadow: 0 2px 12px rgba(0, 96, 255, .5);

}



.btn-solid-sm {

	display: inline-block;

	padding: 1rem 1.5rem 1rem 1.5rem;

	border: 0px!important;

	border-radius: 32px;

    background: linear-gradient(90deg, rgba(161,4,255,1) 0%, rgba(66,3,254,1) 61%, rgba(50,58,244,1) 100%);      

	color: #ffffff;

	font-weight: 600;

	font-size: 0.875rem;

	line-height: 0;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-solid-sm:hover {

	background: #fff!important;

	color: #3a12fb;

	text-decoration: none;

	transition: all 0.5s ease;



}



.btn-outline-reg {

	display: inline-block;

	padding: 1.375rem 2.25rem 1.375rem 2.25rem;

	border: 1px solid #ff6c02;

	border-radius: 32px;

	background-color: transparent;

	color: #ff6c02;

	font-weight: 600;

	font-size: 0.875rem;

	line-height: 0;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-outline-reg:hover {

	background-color: #ff6c02;

	color: #ffffff;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-outline-lg {

	display: inline-block;

	padding: 1.625rem 2.625rem 1.625rem 2.625rem;

	border: 1px solid #ff6c02;

	border-radius: 32px;

	background-color: transparent;

	color: #ff6c02;

	font-weight: 600;

	font-size: 0.875rem;

	line-height: 0;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-outline-lg:hover {

	background-color: #ff6c02;

	color: #ffffff;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-outline-sm {

	display: inline-block;

	padding: 1rem 1.5rem 1rem 1.5rem;

	border: 1px solid #ff6c02;

	border-radius: 32px;

	background-color: transparent;

	color: #ff6c02;

	font-weight: 600;

	font-size: 0.875rem;

	line-height: 0;

	text-decoration: none;

	transition: all 0.5s ease;

}



.btn-outline-sm:hover {

	background-color: #ff6c02;

	color: #ffffff;

	text-decoration: none;

	transition: all 0.5s ease;

}





/**********************************************************************************************************************/

/*     menu / navigation     */

/**********************************************************************************************************************/





.navbar {

	background-color: transparent;

	font-weight: 600;

	font-size: 1.1rem;

}



.navbar.top-nav-collapse {

	backdrop-filter: blur(24px)!important;

    -webkit-backdrop-filter: blur(24px)!important;

    background: rgba(4,15,55,.47843137254901963)!important;

	border:0 !important;

	transition: all 0.2s ease;

}





.navbar .navbar-brand {

	padding-top: 1rem;

	padding-bottom: 1rem;

}



.navbar .logo-image img { width: 180px;}





.navbar .logo-text {

	color: #1e266d;

	font-weight: 700;

	font-size: 2rem;

	line-height: 1rem;

	text-decoration: none;

}



.offcanvas-collapse {

	position: fixed;

	top: 3.25rem; /* adjusts the height between the top of the page and the offcanvas menu */

	bottom: 0;

	left: 100%;

	width: 100%;

	padding-right: 1rem;

	padding-left: 1rem;

	overflow-y: auto;

	visibility: hidden;

	background-color: #ffffff;

	transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;

	transition: transform .3s ease-in-out, visibility .3s ease-in-out;

	transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;

}



.offcanvas-collapse.open {

	visibility: visible;

	-webkit-transform: translateX(-100%);

	transform: translateX(-100%);

}



.navbar .navbar-nav {

	margin-top: 0.75rem;

	margin-bottom: 0.5rem;

}



.navbar .nav-item .nav-link {

	padding-top: 0.625rem;

	padding-bottom: 0.625rem;

	color: #fff;

	text-decoration: none;

	transition: all 0.5s ease;

}



.navbar .nav-item.dropdown.show .nav-link,

.navbar .nav-item .nav-link:hover,

.navbar .nav-item .nav-link.active {

	color: #558dff;

	transition: all 0.5s ease;

	text-shadow: 0 2px 12px rgba(0, 96, 255, .5);

}



/* Dropdown Menu */

.navbar .dropdown .dropdown-menu {

	animation: fadeDropdown 0.2s; /* required for the fade animation */

}



@keyframes fadeDropdown {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

	}

}



.navbar .dropdown-menu {

	margin-top: 0.5rem;

	margin-bottom: 0.5rem;

	border: none;

	background-color: #ffffff;

}



.navbar .dropdown-item {

	padding-top: 0.5rem;

	padding-bottom: 0.5rem;

	color: #1e266d;

	font-weight: 600;

	font-size: 0.875rem;

	line-height: 0.875rem;

	text-decoration: none;

}



.navbar .dropdown-item:hover {

	background-color: #ffffff;

	color: #ff6c02;

}



.navbar .dropdown-divider {

	width: 100%;

	height: 1px;

	margin: 0.5rem auto 0.5rem auto;

	border: none;

	background-color: #e7e7e7;

}

/* end of dropdown menu */



.navbar .nav-item .btn-solid-sm {

	margin-top: 0.125rem;

	border: 1px solid #1e266d;

	background-color: #1e266d;

}



.navbar .nav-item .btn-solid-sm:hover {

	background-color: transparent;

	color: #1e266d;

}



.navbar .navbar-toggler {

	padding: 0;

	border: none;

	font-size: 1.25rem;

}





/**********************************************************************************************************************/

/*     header     */

/**********************************************************************************************************************/



	

.header {

	padding-top: 6rem!important;

	padding-bottom: 8rem!important;

	background: transparent!important;

	overflow: hidden!important;

}





.header .text-container {

	padding-top: 5rem!important;

	

}



.header p {max-width:400px;}





.header img {

	position: absolute;

	left: 3rem;

}



.ghost {

	position: absolute;

	top: 0px;

	left: 0px;

	animation: float 3s ease-out infinite;

}



@keyframes float {

	50% {

		transform: translate(0, 10px);

	}

}





/**********************************************************************************************************************/

/*     customers     */

/**********************************************************************************************************************/



.customers {

	padding-top: 2rem!important;

	padding-bottom: 3rem!important;

	background: transparent!important;

	overflow: hidden!important;

	text-align: center;

}



.customers h4 {

	margin-bottom: 0.25rem;

	color: #222222;

}



.customers .section-divider {

	margin-bottom: 1rem;

}



.customers .slider-container {

	margin-bottom: 0.5rem;

	padding: 1rem 0;

}





/**********************************************************************************************************************/

/*     about us     */

/**********************************************************************************************************************/



.about {

	padding-top: 3rem!important;

	padding-bottom: 6rem!important;

	background: transparent!important;

	overflow: hidden!important;

}



.about .text-container {

	margin-top: 2rem;

}



.about h2 {

	margin-bottom: 1.5rem;

}



.about p {

	margin-bottom: 1.875rem;

}



.about img {

	margin-bottom: 3.5rem;

	position: absolute;

	right: 4rem;

}





/**********************************************************************************************************************/

/*    services     */

/**********************************************************************************************************************/



.services {

		padding-top: 6rem!important;

		padding-bottom: 3rem!important;

		overflow: hidden!important;

        background: linear-gradient(0deg, rgba(174,103,241,1) 0%, rgba(54,41,181,1) 89%);}



.services iframe {height:600px;}



.iframe {height:600px;}





/**********************************************************************************************************************/

/*    pricing     */

/**********************************************************************************************************************/



.pricing {

padding-top: 3rem!important;

padding-bottom: 5rem!important;

overflow: hidden!important;

height:auto;

background: linear-gradient(0deg, rgba(209,135,248,1) 0%, rgba(174,103,241,1) 100%);

text-align: center;

}



.pricing h3 {padding-bottom:70px!important;}



.pricing .container {margin-bottom:40px;}



.card-body {padding:15px 0 15px 0!important; border:0 !important; background: transparent!important; margin: 0 auto; text-align: center;}



.perks {margin-left:-20px!important; margin-top:0px!important;}



.card {border-radius: 45px!important; border:0 !important; transition: all 0.5s ease!important;}



.card h4 {text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);}



.card ul {padding-top:15px;}



.card li {color: #797e8a!important; font: 500 1rem "Quicksand", sans-serif; letter-spacing: 0px; line-height: 1.5rem; text-align: left;}



.card:hover {

	transition: all 0.5s ease!important;

	background: radial-gradient(100% 100% at 50% 0%, rgb(78, 40, 183) 48.71%, rgb(172, 68, 229) 100%);

	color: #fff!important;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

}



.card:hover li, .card:hover h5{

	color: #fff!important;

}



.card-header {

	padding-top:40px!important;

	padding-bottom:30px!important;

    border-bottom: 0!important;

	background: transparent!important;

}



.card:hover .card-header {

    border-bottom: 1px solid #8d5dcb!important;

}



.pricing-card-title {padding-bottom:10px; padding-top:20px; background: transparent!important;}



.card1 {  

  background: url("../images/pricing-1.webp") no-repeat center top scroll; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  background-color:#fff!important;

}



.card2 {

  background: url("../images/pricing-2.webp") no-repeat center top scroll; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  background-color:#fff!important;

}



.card3 {

  background: url("../images/pricing-3.webp") no-repeat center top scroll; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  background-color:#fff!important;

}



.card4 {

  background: url("../images/pricing-4.webp") no-repeat center top scroll; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  background-color:#fff!important;

}





/**********************************************************************************************************************/

/*    portfolio     */

/**********************************************************************************************************************/



.portfolio {

		padding-top: 5rem!important;

		padding-bottom: 4rem!important;

		overflow: hidden!important;

	    height:auto;

        background: linear-gradient(0deg, rgba(239,166,254,1) 0%, rgba(209,135,248,1) 100%);

}



.portfolio iframe {height:600px;}





/**********************************************************************************************************************/

/*    team     */

/**********************************************************************************************************************/



.team {

	padding-top: 4rem!important;

	padding-bottom: 2rem!important;

	overflow: hidden!important;

	height: auto;

	background: url("../images/bg2.webp") no-repeat center center, linear-gradient(0deg, rgba(255, 199, 246, 1) 0%, rgba(239, 166, 254, 1) 100%);

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

}



.team iframe {

	height: 400px;

	position: relative;

	z-index: 12;

}



.team h3 {

	padding-bottom: 5rem;

}



.clouds {

	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

	opacity: 0.5;

	pointer-events: none;

	position: absolute;

	overflow: hidden;

	top: 0;

	left: 0;

	right: 0;

	height: 100%;

	z-index: 1;

}



.clouds-1, .clouds-2, .clouds-3 {

	background-repeat: repeat-x;

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	height: 500px;

}



@keyframes clouds-loop-1 {

	to {

		background-position: -1000px 0;

	}

}

.clouds-1 {

	background-image: url("../images/cloud1.webp");

	animation: clouds-loop-1 100s infinite linear;

}



@keyframes clouds-loop-2 {

	to {

		background-position: -1000px 0;

	}

}

.clouds-2 {

	background-image: url("../images/cloud2.webp");

	animation: clouds-loop-2 80s infinite linear;

}



@keyframes clouds-loop-3 {

	to {

		background-position: -1579px 0;

	}

}



.clouds-3 {

	background-image: url("../images/cloud3.webp");

	animation: clouds-loop-3 60s infinite linear;

}





/**********************************************************************************************************************/

/*     footer     */

/**********************************************************************************************************************/



.footer {

	padding-bottom: 0.3rem;

	color: #515867!important; 

	background: #fff;

}



.footer .container {padding-top:4rem; padding-bottom:1.5rem;}



.footer .inner {width: 100%; height: 100px; overflow: hidden;}



.logo-image2 img {width: 150px; margin-bottom:35px;}



.footer p {

	color: #515867!important;

}



.footer a {

	text-decoration: none;

}



.footer .footer-col {

	margin-bottom: 3rem;

}



.footer h6 {

	margin-bottom: 0.625rem;

	color: #054465;

}



.footer .li-space-lg li {

	margin-bottom: 0.375rem;

}



.footer .footer-col.third .fa-stack {

	width: 2em;

	margin-top: 1.5rem;

	font-size: 1.375rem;

	border-radius: 50px;

	transition: all 0.2s ease;

}



.footer .footer-col.third .fa-stack .fa-stack-2x {

	color: #ffffff;

	transition: all 0.2s ease;

	border-radius: 50px;

}



.footer .footer-col.third .fa-stack .fa-stack-1x {

    color: #b2b5bf;

	border-radius: 50px;

	transition: all 0.2s ease;

}



.footer .footer-col.third .fa-stack:hover .fa-stack-2x {

    color: #fff;

    background: linear-gradient(90deg, rgba(195,102,252,1) 0%, rgba(69,106,232,1) 100%);

	transition: all 0.2s ease;

}



.footer .footer-col.third .fa-stack:hover .fa-stack-1x {

	color: #ffffff;

    background: linear-gradient(90deg, rgba(195,102,252,1) 0%, rgba(69,106,232,1) 100%);

	transition: all 0.2s ease;

}



.footer .footer-col.third .fa-stack {

	margin-left: 0;

	margin-right: 0.375rem;

	transition: all 0.2s ease;

}





/**********************************************************************************************************************/

/*     copyright     */

/**********************************************************************************************************************/



.copyright {

	padding-bottom: 1rem;

	padding-top: 1.7rem;

	text-align: center;

	border-top:1px solid #d7dadd;

	color: #515867!important; 

	background: #fff;

}



.copyright p,

.copyright a {

	text-decoration: none;

	color: #515867!important; 



}



/**********************************************************************************************************************/

/*     backtoptop     */

/**********************************************************************************************************************/



a.back-to-top {

	position: fixed;

	z-index: 999;

	right: 22px;

	bottom: 22px;

	display: none;

	width: 42px;

	height: 42px;

	border-radius: 30px;

	background: rgba(0, 0, 0, 0.2) url("../images/up-arrow.png") no-repeat center 47%;

	background-size: 18px 18px;

	text-indent: -9999px;

	transition: all 0.2s;

}



a:hover.back-to-top {

	background-color: rgba(6, 13, 50, 0.5);

	transition: all 0.2s;

}





/**********************************************************************************************************************/

/*     animate     */

/**********************************************************************************************************************/



.animate {

	transform: scale(0.94);

	animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);

}

@keyframes scale {

	100% {

		transform: scale(1);

	}

}

span {

	display: inline-block;

	opacity: 0;

	filter: blur(4px);

}

span:nth-child(1) {

	animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(2) {

	animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(3) {

	animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(4) {

	animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(5) {

	animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(6) {

	animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(7) {

	animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(8) {

	animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(9) {

	animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(10) {

	animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(11) {

	animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(12) {

	animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(13) {

	animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(14) {

	animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(15) {

	animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(16) {

	animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(17) {

	animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

span:nth-child(18) {

	animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);

}

@keyframes fade-in {

	100% {

		opacity: 1;

		filter: blur(0);

	}

}





/**********************************************************************************************************************/

/*     rotator     */

/**********************************************************************************************************************/





#rotator {

  position: absolute;

  width: 24.4rem;

  height: 24.4rem;

  top:5rem;

  left:1.6rem;

  animation: rotations 6s linear infinite;

}



#rotator:before, #rotator:after {

  position: absolute;

  content: '';

  display: block;

  height: 0.4rem;

  width: 0.4rem;

  animation: inherit;

  animation-direction: reverse;

  border-radius: 50px;

}



#rotator:before {

  background-color: #7e85c2;

  top: -.25rem;

  left: -.25rem;

}



#rotator:after {

  background-color: #7e85c2;

  bottom: -.25rem;

  right: -.25rem;

}





@keyframes rotations {

  to { transform: rotate(360deg) }

}





/**********************************************************************************************************************/

/*     scroller     */

/**********************************************************************************************************************/





::-webkit-scrollbar {

  width: 12px;

}



/* Track */

::-webkit-scrollbar-track {

  background: #06041d; 

}

 

/* Handle */

::-webkit-scrollbar-thumb {

  background: #130f5a; 

  border-radius: 20px;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #241f80; 

}





/**********************************************************************************************************************/

/*     @media     */

/**********************************************************************************************************************/



@media (min-width: 992px) {

	



	.navbar {

		padding-top: 1.75rem;

		background-color: transparent;

		border-bottom: none;

		transition: all 0.2s;

	}



	.navbar.top-nav-collapse {

		padding-top: 0.5rem;

		padding-bottom: 0.5rem;

		border-bottom: 1px solid #e3e8ec;

		background-color: #ffffff;

	}



	.offcanvas-collapse {

		position: static;

		top: auto;

		bottom: auto;

		left: auto;

		width: auto;

		padding-right: 0;

		padding-left: 0;

		background-color: transparent;

		overflow-y: visible;

		visibility: visible;

	}



	.offcanvas-collapse.open {

		-webkit-transform: none;

		transform: none;

	}



	.navbar .navbar-nav {

		margin-top: 0;

		margin-bottom: 0;

	}

	

	.navbar .nav-item .nav-link {

		padding-right: 0.75rem;

		padding-left: 0.75rem;

	}



	.navbar .dropdown-menu {

		margin-top: 0.25rem;

		box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.05);

	}



	.navbar .dropdown-divider {

		width: 90%;

	}



	.navbar .nav-item .btn-solid-sm {

		margin-top: 0;

		margin-left: 1rem;

	}

	

	.footer .footer-col {

		margin-bottom: 2rem;

	}





	.footer .footer-col.first {

		display: inline-block;

		width: 300px;

		vertical-align: top;

                margin-right: 20px;



	}

	

	.footer .footer-col.second {

		display: inline-block;

		width: 320px;

		margin-right: 1.75rem;

		vertical-align: top;

	}

	

	.footer .footer-col.third {

		display: inline-block;

		width: 224px;

		text-align: left;

		vertical-align: top;

	}



	.footer .footer-col.third .fa-stack {

		margin-right: 0;

		margin-left: 0.375rem;

	}



	.ex-cards-1 .card {

		display: inline-block;

		width: 296px;

		vertical-align: top;

	}



	.ex-cards-1 .card:nth-of-type(3n+2) {

		margin-right: 1rem;

		margin-left: 1rem;

	}

}





@media (min-width: 1200px) {



	.footer .footer-col.first {

		width: 352px;

		margin-right: 6rem;

	}

	

	.footer .footer-col.second {

		margin-right: 6.5rem;

	}

	

	.footer .footer-col.third {

		text-align: left;

	}

}





@media only screen and (max-width: 499px) and (min-width: 1px)  {

.about h2 {padding-top: 1rem!important;}

h3 {padding-left:35px; padding-right:35px; font-size:22px!important; line-height:35px!important;}

}



@media only screen and (max-width: 768px) and (min-width: 500px)  {

.about h2 {padding-top: 9rem!important;}



}





@media only screen and (max-width: 768px) and (min-width: 1px)  {

.header {padding-top: 3.5rem!important; padding-bottom: 28rem!important;}

.header img {left: 1rem; padding-top: 2rem!important;}

	

.card {margin:2rem 0.5rem; padding:30px;}

	

.about .text-container {margin-top: 25rem;}

.about img {right: 0rem;}

		

}





@media only screen and (max-width: 991px) and (min-width: 769px)  {

.header {padding-top: 3.5rem!important; padding-bottom: 45rem!important;}

.header img {left: 1rem;}

	

.about .text-container {margin-top: 47rem;}

.about img {right: 0rem;}

}





@media only screen and (max-width: 991px) and (min-width: 1px)  {



.container { padding-left:35px; padding-right:35px;}

	

.navbar {

background: rgba(4,15,55,.7)!important;

text-align: center;

margin:0 auto;

}	

.navbar-collapse.offcanvas-collapse { 	

padding-top:20px;

backdrop-filter: blur(10px);

background: rgba(13,20,73,0.9);

border:0 !important;

height:1600px!important;

margin-top:20px;

position: absolute!important;

width: 1000px!important;

text-align: center;

left:50%;

margin-left:495px;

}

.navbar-toggler-icon {background-image: url( '../images/menu.svg' )!important;}

.navbar .logo-image img {width: 150px;}

	

.services h3 {padding-bottom:40px;}

.services iframe {height:1200px!important;}



}





@media only screen and (max-width: 1199px) and (min-width: 1px)  {

#rotator {display:none;}

}



@media only screen and (max-width: 1199px) and (min-width: 500px)  {

.card-deck .card {flex: 1 0 35%!important; margin:50px!important;}

}