/*
	Theme Name: قالب زوس
*/

@import 'assets/css/bootstrap-rtl-4.5.3.min.css';
@import 'assets/css/fontawesome-6.4.2.min.css';
@import 'assets/css/helper-4.0.0.min.css?v=1.2';
@import 'assets/css/magnific-popup-1.1.0.min.css';
@import 'assets/css/animate.min.css';
:root {
	color-scheme: light only;
	color: #14b5bc;
	color: #0C474D;
}
::selection {
	background-color: #14b5bc;
	color: #fff;
	-webkit-text-fill-color: #fff;
}
header{
    min-height: 70px;
}
.sliderindex{
	margin-top: -70px;
}
.headerbg{
	z-index: 1000;
	position: relative;
    transition: .8s;
	background-color: transparent;
	padding: 15px 0;
}
.headerbg .navbar-brand img{
	height: 35px;
	transition: .6s;
}
@media(min-width: 992px){
	.headerbg.sticky .navbar-nav > .nav-item + .nav-item{
		margin-right: 25px;
    }
	.headerbg .navbar-nav > .nav-item + .nav-item{
		margin-right: 25px;
    }
}
.headerbg .navbar .navbar-nav .nav-item .nav-link {
	font-size: 17px;
	padding: 0;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
	display: flex;
	align-items: center;
}
.headerbg .navbar .navbar-nav .nav-item{
	position: relative;
}
.headerbg .navbar .navbar-nav .nav-link span{
	position: relative;
}
.headerbg .navbar .navbar-nav .nav-item .nav-link:hover,
.headerbg .navbar .navbar-nav .nav-item.active .nav-link,
.headerbg .navbar .navbar-nav .nav-item .nav-link.active{
    color: #fff;
}
.full-dropdown {
	position: static;
}
.full-screen-menu {
	position: fixed !important;
	top: 70px;
	left: 0;
	width: 100vw;
	height: calc(100vh - 70px);
	margin: 0;
	border: none;
	border-radius: 0 !important;
	padding: 50px 0 !important;
	overflow-y: auto;
	display: none;
	z-index: 9999;
	background: #fff !important;
}
.headerbg .sharesocial li a{
	width: 35px;
	height: 35px;
	line-height: 35px;
}
.styledropdown .dropdown-toggle::after{
	font-size: 14px;
	top: 4px;
}
.styledropdown .dropdown-toggle{
	padding-left: 27px !important;
}
.headerbg.sticky{
	position: fixed;
	top: 0;
    right: 0;
	background-color: #1a4345cc;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.headerbg.sticky .wow{
    visibility: visible !important;
}
.sliderindex{
	z-index: 1;
}
.sliderindex.sliderindex__fullheight,
.sliderindex.sliderindex__fullheight .sliderindex__slide{
	min-height: 100dvh;
}
.sliderindex.sliderindex__fullheight .sliderindex__slide{
	padding-top: 70px;
}
.sliderindex.sliderindex__pages,
.sliderindex.sliderindex__pages .sliderindex__slide{
	min-height: 350px;
}
.sliderindex__down{
	bottom: 40px;
	right: 40px;
}
.sliderindex__slide__content-list li{
	position: relative;
	padding-right: 35px;
	margin-bottom: 8px;
}
.sliderindex__slide__content-list li::before{
	position: absolute;
	content: '\f061';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	right: 0;
	top: 0;
	color: #14b5bc;
}
.iconbars{
	min-width: 30px;
	min-height: 19px;
}
.iconbars span + span{
	margin-top: 5px;
}
.iconbars span{
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 50px;
	background-color: #fff;
	transition: .4s;
}
.iconbars span:nth-child(2){
	width: 20px;
}
.sidenav {
	z-index: 1001;
	transition: 0.3s;
	top: 0;
	left: -350px;
	width: 350px;
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.sidenav::-webkit-scrollbar {
	display: none;
}
.sidenav.active{
	left: 0;
}
.sidenav .navbar-nav > .nav-item .nav-link,
.sidenav a{
	color: #fff;
	font-weight: 500;
}
.sidenav .navbar-nav > .nav-item .nav-link:hover,
.sidenav a:hover{
	color: #14b5bc;
}
.sidenav .navbar-nav .nav-item .nav-link{
	font-size: 18px;
	padding: 15px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sidenav .navbar-nav .nav-item{
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidenav .border-bottom{
	border-color: #ffffff20 !important;
}
.sidenav .navbar-nav .nav-item .nav-link.dropdown-toggle::after{
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    border: 0;
}
.sidenav .navbar-nav .dropdown-menu{
    display: block;
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: .1s;
    transform: translateY(-10px) !important;
    position: relative !important;
    background-color: #1b1b1b;
    margin: 0;
    padding: 0;
    border-radius: 0;
    width: 100%;
}
.sidenav .navbar-nav .dropdown-menu.show{
    visibility: visible;
    opacity: 1;
    height: 100%;
    transform: translateY(0) !important;
}
.sidenav .navbar-nav .dropdown-menu .dropdown-item{
    padding: 10px 30px;
}
.sidenav .navbar-nav .dropdown-menu .dropdown-item:hover{
    background-color: #14b5bc;
    color: #fff;
}
#sidebody{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: rgba(21, 21, 21, 0.8);
	transition: .45s;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
}
#sidebody.active{
	z-index: 1000;
	opacity: 1;
	visibility: visible;
}
body.stop{
	overflow: hidden;
}
.breadcrumb{
    background-color: #ffffff20;
	padding: 8px 20px;
}
.breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item.active{
    color: #fff;
}
.breadcrumb-item a:hover{
    color: #e4d7d5;
}
.breadcrumb-item + .breadcrumb-item{
    padding-right: 8px;
}
.breadcrumb-item + .breadcrumb-item::before{
    content: '\f060';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    padding-left: 10px;
	padding-top: 2px;
}
.boxshadow{
	box-shadow: 0 10px 30px 0 rgb(225 223 255 / 40%);
}
.boxshadow2{
	box-shadow: 0px 0px 25px rgb(0 0 0 / 12%);
}
.boxshadow3{
	box-shadow: 0px 10px 35px 0 rgb(0 0 0 / 12%);
}
.boxshadow4{
	box-shadow: 0 0.25rem 1.75rem rgba(30,34,40,.07)
}
.boxshadow5{
	box-shadow: 0px 2px 8px rgb(0 0 0 / 8%);
}
.boxshadow2hover:hover{
	box-shadow: 0px 0px 45px rgb(0 0 0 / 10%);
}
.btn{
    font-weight: 700;
}
.text-white-70{
	color: rgba(255, 255, 255, 0.7);
}
.slidertitle{
	min-height: 190px;
	padding-bottom: 30px;
}
@media (min-width: 992px){
	.custom-cursor__cursor {
		width: 35px;
		height: 35px;
		border-radius: 100%;
		border: 1px solid #14b5bc;
		-webkit-transition: all 200ms ease-out;
		transition: all 200ms ease-out;
		position: fixed;
		pointer-events: none;
		left: 0;
		top: 0;
		-webkit-transform: translate(calc(-50% + 5px), -50%);
		transform: translate(calc(-50% + 5px), -50%);
		z-index: 999991;
	}
	.custom-cursor__cursor-two {
		width: 10px;
		height: 10px;
		border-radius: 100%;
		background-color: #14b5bc;
		opacity: .3;
		position: fixed;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		pointer-events: none;
		-webkit-transition: width .3s, height .3s, opacity .3s;
		transition: width .3s, height .3s, opacity .3s;
		z-index: 999991;
	}
	.custom-cursor__hover {
		background-color: #14b5bc;
		width: 120px;
		height: 120px;
		opacity: 0.4;
	}
	.custom-cursor__innerhover {
		width: 25px;
		height: 25px;
		opacity: .4;
	}
}
.customsliderslick__2{
    margin-bottom: 80px !important;
}
.customsliderslick__2 .slick-next,
.customsliderslick__2 .slick-prev {
    top: inherit;
    bottom: -80px;
}
.customsliderslick__2 .slick-prev {
    right: inherit;
    left: 50%;
}
.customsliderslick__2 .slick-next {
    left: calc(50% - 45px);
}
.customsliderslick__2 .slick-next:before,
.customsliderslick__2 .slick-prev:before {
    border-radius: 4px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}
.boxpartners{
	padding: 20px;
    height: 100px;
}
.boxpartners img{
    max-height: 100px;
}
.boxpartners__pages .boxpartners{
	padding: 40px;
    height: 180px;
}
.boxpartners__pages .boxpartners img{
    max-height: 100px;
}
.fa.img-h30{
	flex: 0 0 30px;
	max-width: 30px;
}
.loaderlodging {
	height: 100vh;
	z-index: 10000;
	transition: .8s;
}
.loaderlodging__body {
	overflow: hidden;
}
.loaderlodging__body.afterloading {
	overflow: inherit;
}
.loaderlodging.remove {
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #cecece;
    border-bottom-color: #14b5bc;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
	}
    100% {
        transform: rotate(360deg);
	}
}
aside{
	position: relative;
	z-index: 2;
}
.footerbg{
	bottom: 0;
	right: 0;
	z-index: 1;
}
.footerbg .border-bottom{
	border-color: rgba(255, 255, 255, 0.1) !important;
}
.footerbg .sharesocial li + li{
	margin-right: 4px;
}
.footerbg .sharesocial li a{
	width: 45px;
	height: 45px;
	line-height: 45px;
	font-size: 22px;
}
.footerbg a{
	color: rgba(255, 255, 255, 0.7);
}
.footerbg a:hover{
	color: #14b5bc;
}
.footerbg__links li{
	margin: 0 0 15px;
}
.footerbg__links li a{
	display: block;
	padding: 0;
}
.footerbg__links.d-flex li{
	margin-bottom: 0;
}
.footerbg__links.d-flex li + li{
	margin-right: 30px;
}
svg{
	display: block;
}
.singlecontentbg h1,
.singlecontentbg h2,
.singlecontentbg h3,
.singlecontentbg h4,
.singlecontentbg h5,
.singlecontentbg h6{
	color: #14b5bc;
	margin-bottom: 30px;
}
.singlecontentbg h1{
	font-size: 30px;
}
.singlecontentbg h2{
	font-size: 28px;
}
.singlecontentbg h3{
	font-size: 26px;
}
.singlecontentbg h4{
	font-size: 24px;
}
.singlecontentbg h5{
	font-size: 22px;
}
.singlecontentbg h6{
	font-size: 20px;
}
.singlecontentbg p{
    line-height: 1.6;
}
.singlecontentbg p,
.singlecontentbg ul,
.singlecontentbg ol{
	font-size: 20px;
}
.singlecontentbg ul,
.singlecontentbg ol{
    line-height: 1.4;
}
.singlecontentbg.font-bigger p,
.singlecontentbg.font-bigger ul,
.singlecontentbg.font-bigger ol{
	font-size: 28px;
}
.singlecontentbg.font-sm p,
.singlecontentbg.font-sm ul,
.singlecontentbg.font-sm ol{
	font-size: 18px;
    line-height: 1.4;
}
.singlecontentbg.font-sm ul,
.singlecontentbg.font-sm ol{
    margin: 15px 0;
}
.singlecontentbg.font-sm p + h1,
.singlecontentbg.font-sm p + h2,
.singlecontentbg.font-sm p + h3,
.singlecontentbg.font-sm p + h4,
.singlecontentbg.font-sm p + h5,
.singlecontentbg.font-sm p + h6{
	margin-top: 15px;
}
.singlecontentbg.font-sm p{
    margin-bottom: 10px;
}
.singlecontentbg p + h1,
.singlecontentbg p + h2,
.singlecontentbg p + h3,
.singlecontentbg p + h4,
.singlecontentbg p + h5,
.singlecontentbg p + h6{
	margin-top: 30px;
}
.singlecontentbg h1,
.singlecontentbg h2,
.singlecontentbg h3,
.singlecontentbg h4,
.singlecontentbg h5,
.singlecontentbg h6{
	margin-bottom: 15px;
}
.singlecontentbg li::marker{
    color: #14b5bc;
    font-size: 24px;
}
.singlecontentbg a:not(.btn){
	font-weight: 500;
	color: #14b5bc;
}
.singlecontentbg a:hover:not(.btn){
	color: #14b5bc;
}
.singlecontentbg img{
    margin-top: 30px;
    margin-bottom: 30px;
}
.singlecontentbg *:last-child{
    margin-bottom: 0;
}
.singlecontentbg.text-light2 strong{
    color: #20252a;
}
.singlecontentbg strong{
    font-weight: 700;
}
.sectionwithsvg{
	padding: 70px 0 calc(70px + 50px);
}
.svgblock2{
	z-index: 2;
	margin-top: -50px;
}
.fa-30{
	flex: 0 0 30px;
	max-width: 30px;
	width: 30px;
}
.font-12{
	font-size: 11px;
}
.addanimation{
	animation: float 4s ease-in-out infinite;
}

@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-12px); }
	100% { transform: translateY(0px); }
}
.font-title span{
	position: relative;
	display: inline-block;
	z-index: 3;
}
.font-title span::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 16px;
	bottom: 8px;
	left: 0;
	background-color: #14b5bc;
	transform: skewX(-10deg);
	z-index: -1;
}
.font-title-secondary span::before{
	background-color: #0C474D;
}
.font-10{
	font-size: 10px;
}
@media (min-width: 992px){
	.bgservices__pos{
		position: sticky;
		top: 0;
	}
	.bgservices__pos_pos{
		position: sticky;
		top: 15%;
	}
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices{
	background-color: #e7fbfc;
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices [class^="col"]:nth-child(1){
	background-color: #d3e8e9;
	border-radius: 40px;
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices .icon{
	background-color: #14b5bc;
	box-shadow: 0 0 0 10px #d3e8e9;
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices .btn{
	background-color: #14b5bc;
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices .btn:hover{
	background-color: #14b5bcdd;
}
.bgservices .btn{
	border: 0;
	color: #fff;
}
.icon{
	box-shadow: 0 0 0 10px #ddd1f0;
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices .title{
	color: #14b5bc;
}
.bgservices__pos .bgservices__pos_pos:nth-child(odd) .bgservices .des{
	color: #000;
	opacity: 0.35;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices{
	background-color: #eafdff;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices [class^="col"]:nth-child(1){
	background-color: #daf6f8;
	border-radius: 40px;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices .icon{
	background-color: #0C474D;
	box-shadow: 0 0 0 10px #daf6f8;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices .btn{
	background-color: #0C474D;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices .btn:hover{
	background-color: #0C474Ddd;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices .title{
	color: #0C474D;
}
.bgservices__pos .bgservices__pos_pos:nth-child(even) .bgservices .des{
	color: #000;
	opacity: 0.35;
}
.bgservices,
.bgservices [class^="col"]:nth-child(1){
	border-radius: 40px;
}
.bgservices__pos .bgservices__pos_pos:nth-child(1) .bgservices,
.bgservices__pos .bgservices__pos_pos:nth-child(3) .bgservices{
	flex-direction: row-reverse;
}
.rounded-16{
	border-radius: 18px;
}
.sliderslick__custom .slick-list{
	padding: 60px 50px !important;
}
.sliderslick__custom img{
	max-height: 500px;
}
.boxworks{
	padding: 15px;
	background-color: #e3eced;
	border: 2px solid rgba(20, 180, 188, 0.1);
	border-radius: 16px;
}
.boxworks:hover{
	transform: translateY(-4px);
	box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	border-color: rgba(20, 180, 188, 0.5);
}
.boxworks__scroll {
    height: 400px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}
.boxworks__scroll img {
    width: 100%;
    transition: transform 6s linear;
}
.boxworks__scroll:hover img {
    transform: translateY(calc(-100% + 400px));
}
.boxworking__numbers{
	counter-reset: numbers_counter;
}
.boxworking::before{
	position: absolute;
	counter-increment: numbers_counter;
	content: "0" counter(numbers_counter);
	font-family: "Poppins", sans-serif;
	color: #afafaf;
	top: 15px;
	right: 30px;
	font-size: 50px;
	font-weight: 500;
	z-index: 2;
	transition: .6s;
}
.boxworking__2 .boxworking::before{
	position: relative;
	top: auto;
	right: auto;
	width: 60px;
	height: 60px;
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	border: 2px solid #e3e3e3;
	border-radius: 50%;
}
.boxworking__2 .boxworking:hover::before{
	background-color: #14b5bc;
	border-color: #14b5bc;
	color: #fff;
}
.boxworking__nonumber .boxworking::before{
	display: none;
}
.boxworking:hover::before{
	color: #14b5bc;
	transform: scale(1.2);
}
.boxworking::after{
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: 100%;
	height: 0;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
	transition: .6s;
}
.boxworking__nonumber .boxworking{
	box-shadow: rgba(17, 12, 46, 0.05) 0px 28px 50px 0px;
}
.boxworking:hover{
	transform: translateY(-5px);
}
.boxworking:hover::after{
	height: 100%;
}
.boxworking__content{
	z-index: 3;
}
.bganimation__1{
	animation: bgMove 20s ease-in-out infinite alternate;
}
.bganimation__2{
	animation: zoomBg 20s ease-in-out infinite alternate;
}
.bganimation__dots::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(#8181813d 1px, transparent 1px);
	background-size: 20px 20px;
	animation: moveDots 20s linear infinite;
}
.bganimation__dots > *{
	position: relative;
	z-index: 2;
}
@keyframes bgMove {0% {background-position: center bottom;}100% {background-position: center top;}}
@keyframes zoomBg {0% {transform: scale(1);}100% {transform: scale(1.1);}}
@keyframes moveDots {from {transform: translateY(0);}to {transform: translateY(-200px);}}
.nav-tabs.customtabs__style-1 {
    border-bottom: none;
    padding: 0;
}
.nav-tabs.customtabs__style-1 .nav-item {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
	position: relative;
	width: 100%;
	margin-bottom: 0;
}
.nav-tabs.customtabs__style-1 .nav-link {
    display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	padding: 28px 10px;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	border: 0;
    border-radius: 0;
    text-align: center;
	background-color: #e2e6e9;
	color: #8b969f;
    position: relative;
}
.nav-tabs.customtabs__style-1 .nav-link::before{
    position: absolute;
    content: '';
    bottom: -20px;
    right: calc(50% - 20px);
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 20px solid #14b5bc;
    transition: .8s;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
}
.nav-tabs.customtabs__style-1 .nav-link.active::before{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.nav-tabs.customtabs__style-1 .nav-item + .nav-item .nav-link{
    border-right: 2px solid rgba(0, 0, 0, 0.06);
}
.nav-tabs.customtabs__style-1 .nav-item:first-child .nav-link{
    border-radius: 0 0.85rem 0 0;
}
.nav-tabs.customtabs__style-1 .nav-item:last-child .nav-link{
    border-radius: 0.85rem 0 0 0
}
.nav-tabs.customtabs__style-1 .nav-link.active,
.nav-tabs.customtabs__style-1 .nav-link.active:hover{
	background-color: #14b5bc;
    color: #fff;
}
.nav-tabs.customtabs__style-1 .nav-link:hover {
	background-color: #e2e6e9;
	color: #14b5bc;
}
.custommodal{
	top: 5%;
}
.custommodal .modal-dialog{
	max-width: 70%;
	height: 90%;
	margin: 0 auto;
}
.custommodal .modal-content{
	height: 100%;
	border-radius: 16px;
	border: 0;
	box-shadow: none;
}
.custommodal__boxright{
	border-radius: 0 15px 15px 0;
}
.custommodal .modal-body{
	padding: 0;
}
.custommodal .closefafa{
	top: 20px;
	left: 20px;
	border-radius: 50px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	background-color: #f4f4f4;
	color: #979797;
}
.custommodal .closefafa:hover{
	background-color: #14b5bc;
	color: #fff;
}
.modal-backdrop.show{
	opacity: 0.9;
}
.bg-gra{
	background: linear-gradient(0deg, #0C474D 0%, #14b5bc 100%);
}
.boxcats{
	perspective: 1000px;
}
.boxcats__inner{
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.boxcats:hover .boxcats__inner{
	transform: rotateY(180deg);
}
.boxcats,
.boxcats__inner,
.boxcats__front,
.boxcats__back{
	min-height: 120px;
}
.boxcats__front,
.boxcats__back{
	border-radius: 10px;
	backface-visibility: hidden;
}
.boxcats__front{
	background: linear-gradient(0deg, #f0f1f3 0%, #fff 100%);
}
.boxcats__back{
	background: #14b5bc;
	transform: rotateY(180deg);
}
.iconwhatsapp:hover{
	transform: scale(1.1)translateY(-4px);
}
.sharesocial__big li a{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 22px;
}
.dashboardbox{
	direction:ltr;
    text-align:left;
    unicode-bidi:isolate;
    position:relative;
    max-width:620px;
    border-radius:32px;
    overflow:hidden;
    background:rgb(49 120 123 / 58%);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
    0 0 60px rgba(0,0,0,.4),
    0 0 120px rgba(0,183,255,.12);
    backdrop-filter:blur(10px);
}
.dashboardbox__top{
    height:55px;
    padding:0 25px;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right:8px;
}
.red{background:#ff5f57}
.yellow{background:#febc2e}
.green{background:#28c840}
.dashboardbox__url{
    color:#293f42;
    font-size:13px;
}
.dashboardbox__content{
    height:500px;
    padding:25px;
}
.dashboardbox__shine{
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(255,255,255,.06);
    filter:blur(40px);
    border-radius:50%;
    top:70px;
    left:90px;
    animation:moveglow 7s ease-in-out infinite;
}
@keyframes moveglow{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(70px,30px)}
}
.floatingbadge{
    position:absolute;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:12px;
    padding:10px 15px;
    border-radius:40px;
    backdrop-filter:blur(10px);
    z-index:2;
}
.badge1{
    top:18px;
    right:18px;
}
.badge2{
    top:55px;
    right:90px;
}
.progresscard{
    position:absolute;
    top:90px;
    right:20px;
    width:180px;
    padding:20px;
    border-radius:24px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.08);
}
.progresscard small{
    color:#9fb0c8;
}
.progresscard h2{
    color:#fff;
    font-size:48px;
    font-weight:800;
    margin:5px 0 10px;
}
.progressline{
    height:8px;
    background:rgba(255,255,255,.08);
    border-radius:20px;
    overflow:hidden;
}
.progressline span{
    display:block;
    width:98%;
    height:100%;
    background:linear-gradient(90deg,#14b5bc,#bf4dff);
    animation:progressload 4s linear infinite;
}
@keyframes progressload{
    0%{width:0}
    100%{width:98%}
}
.sidewidget{
    position:absolute;
    right:20px;
    top:230px;
    width:150px;
    padding:20px;
    border-radius:24px;
    background:rgba(255,255,255,.1);
}
.sidewidget__line{
    width:70px;
    height:8px;
    background:rgba(255,255,255,.18);
    border-radius:20px;
    margin-bottom:12px;
}
.sidewidget__line.short{
    width:40px;
}
.sidewidget__box{
    height:55px;
    border-radius:16px;
    background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.12));
    margin-top:14px;
}
.mainwindow{
    width:70%;
    height:275px;
    border-radius:26px;
    padding:18px;
    background:linear-gradient(135deg, rgba(255, 255, 255, .08), rgb(38 156 175));
    border:1px solid rgba(255,255,255,.08);
}
.typingwindow__top{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}
.typingwindow__top span{
    width:14px;
    height:14px;
    background:#67e8ff;
    border-radius:30px;
    margin-right:10px;
    animation:pulse 1.5s infinite;
}
.typingwindow__top span:nth-child(2){
    width:50px;
    opacity:.3;
}
.typingwindow__top span:nth-child(3){
    width:80px;
    opacity:.2;
}
.line{
    height:10px;
    background:rgba(255,255,255,.18);
    border-radius:20px;
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
}
.line::after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:100%;
    background:#fff;
    border-radius:20px;
    animation:typingline 4s infinite;
}
.line1::after{animation-delay:.2s;width:85%}
.line2::after{animation-delay:.5s;width:65%}
.line3::after{animation-delay:.8s;width:75%}
.line4::after{animation-delay:1s;width:40%}
.line5::after{animation-delay:1.2s;width:55%}
@keyframes typingline{
    0%{transform:scaleX(0);transform-origin:left}
    50%,100%{transform:scaleX(1);transform-origin:left}
}
.codecard{
    background:rgba(255,255,255,.05);
    border-radius:20px;
    padding:20px;
}
.buttonline{
    width:80px;
    height:24px;
    border-radius:50px;
    background:linear-gradient(90deg,#14b5bc,#5b7cff);
    margin-top:20px;
    animation:pulse 2s infinite;
}
.bottomcards{
    position:absolute;
    left:25px;
    right:25px;
    bottom:80px;
}
.miniwidget{
    background:rgba(255,255,255,.1);
    border-radius:20px;
    padding:18px;
}
.miniwidget span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#67e8ff;
    display:block;
    margin-bottom:15px;
}
.miniwidget .line{
    margin-bottom:10px;
    height:7px;
}
.miniwidget .line.short{
    width:55%;
}
.dashboardtimeline{
    position:absolute;
    left:25px;
    right:25px;
    bottom:20px;
    height:50px;
    border-radius:50px;
    background:rgb(27 138 157 / 51%);
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.dashboardtimeline__line{
    position:absolute;
    left:50px;
    right:50px;
    height:2px;
    background:linear-gradient(90deg,#c52cff,#36ff91,#fff);
}
.dashboardtimeline__item{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:12px;
	display: flex;
	align-items: center;
	text-shadow: 0 0px 6px BLACK;
}
.dashboardtimeline__item span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;
    display:block;
	margin-right: 10px;
    box-shadow:0 0 12px #fff;
}
.floatcard{
    animation:floatcard 4s ease-in-out infinite;
}
.floatcard2{
    animation:floatcard 5s ease-in-out infinite;
}
.floatcard3{
    animation:floatcard 6s ease-in-out infinite;
}
.delay1{
    animation-delay:1s;
}
.delay2{
    animation-delay:2s;
}
@keyframes floatcard{
    0%,100%{transform:translateY(0px)}
    50%{transform:translateY(-10px)}
}
@keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.4}
}
@media(max-width:991px){
    .aihero{
        padding:80px 0;
    }
    .aihero__title{
        font-size:42px;
    }
    .dashboardbox__content{
        height:580px;
    }
    .mainwindow{
        width:100%;
    }
    .progresscard,
    .sidewidget{
        transform:scale(.8);
    }
}
.fakecursor{
    position:absolute;
    top:110px;
    left:180px;
    z-index:20;
    color:#fff;
    font-size:34px;
    filter:drop-shadow(0 0 12px rgba(255,255,255,.5));
    animation:cursorMove 8s ease-in-out infinite;
}
@keyframes cursorMove{
    0%{
        top:110px;
        left:180px;
        transform:scale(1);
    }
    20%{
        top:150px;
        left:430px;
    }
    40%{
        top:200px;
        left:350px;
    }
    60%{
        top:320px;
        left:520px;
    }
    80%{
        top:380px;
        left:260px;
    }
    100%{
        top:110px;
        left:180px;
    }
}
.glasscircle{
    position:absolute;
    width:160px;
    height:160px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.14),transparent);
    backdrop-filter:blur(20px);
    z-index:2;
    top:180px;
    left:240px;
    animation:glassMove 10s ease-in-out infinite;
}
@keyframes glassMove{
    0%,100%{top:180px;left:240px;}
    50%{top:330px;left:390px;}
}
.notifpill{
    position:absolute;
    background:rgba(255,255,255,.09);
    color:#fff;
    height:40px;
    line-height:37px;
    padding:0 18px;
    border-radius:60px;
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.08);
    z-index:10;
    box-shadow:0 0 30px rgba(0,0,0,.2);
}
.notif1{
    top:200px;
    right:120px;
    animation:floatingPill 4s ease-in-out infinite;
}
.notif2{
    bottom:90px;
    left:30px;
    animation:floatingPill 5s ease-in-out infinite;
}
@keyframes floatingPill{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
}
.dashboardbox::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:32px;
    padding:1px;
    background:linear-gradient(130deg, rgba(0,212,255,.7), rgba(133,92,255,.4), rgba(255,255,255,.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.dashboardtimeline__line{
    background:linear-gradient(90deg, #14b5bc, #9d4dff, #55ff8f, #ffffff);
    background-size:300% 100%;
    animation:timelineGlow 5s linear infinite;
}
@keyframes timelineGlow{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:100% 50%;
    }
}
.dashboardbox{
    animation:dashboardFloat 7s ease-in-out infinite;
}
@keyframes dashboardFloat{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-12px);
    }
}
.bgbox{
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(20, 180, 188, 0.2);
	transition: .4s;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.bgbox:hover{
	transform: scale(1.01);
	border: 2px solid rgba(20, 180, 188, 0.6);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}
.devicesanimation {
  position: relative;
  width: 100%;
  height: 500px;
  perspective: 1600px;
}

.devicesanimation--ltr {
  direction: ltr;
  text-align: left;
}

.devicesanimation__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25;
}

.devicesanimation__glow1 {
  width: 320px;
  height: 320px;
  background: #14b5bc;
  top: 40px;
  left: 120px;
}

.devicesanimation__glow2 {
  width: 280px;
  height: 280px;
  background: #7b4dff;
  bottom: 80px;
  right: 80px;
}

.devicelabel {
  direction: rtl;
  position: absolute;
  z-index: 30;
  padding: 11px 25px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  animation: floatingLabel 6s ease-in-out infinite;
}
.devicelabel.devicelabel1{
	color:#0d474d;
}

.devicelabel i {
  color: #14b5bc;
}

.devicelabel1 {
  top: 0;
  left: 20px;
}

.devicelabel2 {
  top: 80px;
  right: 10px;
  animation-delay: 1s;
}
.devicelabel3 {
  top: 310px;
  left: -10px;
  animation-delay: 2s;
}
.devicelabel4 {
  bottom: 140px;
  right: 20px;
  animation-delay: 3s;
}
.devicelabel5 {
  bottom: 0;
  left: 80px;
  animation-delay: 4s;
}

@keyframes floatingLabel {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

.laptop3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(12deg) rotateY(-12deg);
  z-index: 10;
  animation: laptopMove 8s ease-in-out infinite;
}

@keyframes laptopMove {
  0%,
  100% {
    transform: translate(-50%, -50%) rotateX(12deg) rotateY(-12deg) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) rotateX(8deg) rotateY(8deg) translateY(-16px);
  }
}
.laptop3d__top {
  height: 34px;
  background: #198398;
  border-radius: 26px 26px 0 0;
  display: flex;
  align-items: center;
  padding: 0 18px;
}
.laptop3d__top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}
.laptop3d__top span:nth-child(1) {
  background: #ff5f57;
}
.laptop3d__top span:nth-child(2) {
  background: #febc2e;
}
.laptop3d__top span:nth-child(3) {
  background: #28c840;
}
.laptop3d__screen{
    height:360px;
    border-radius:0 0 28px 28px;
    background:linear-gradient(180deg, #178d9f, #0d474d);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    padding:28px;
    position:relative;
    box-shadow: 0 40px 80px rgba(0,0,0,.4), 0 0 60px rgba(0,212,255,.08);
}
.laptop3d__screen::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(130deg, transparent, rgba(255,255,255,.05), transparent);
    animation:screenShine 6s linear infinite;
}
@keyframes screenShine{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(100%);
    }
}
.screenheader{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.screenheader__logo{
    width:120px;
    height:14px;
    border-radius:20px;
    background: linear-gradient(90deg, #14b5bc, #85faff);
}
.screenheader__menu{
    display:flex;
    gap:10px;
}
.screenheader__menu span{
    width:50px;
    height:10px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
}
.screenhero{
    height:120px;
    border-radius:26px;
    margin-top:28px;
    background: linear-gradient(135deg, rgb(20 181 188 / 22%), rgb(129 248 253 / 22%));
    animation:heroPulse 5s ease-in-out infinite;
}

@keyframes heroPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.02);
    }
}
.screenrow{
    display:flex;
    gap:16px;
    margin-top:22px;
}
.screenbox{
    flex:1;
    height:90px;
    border-radius:20px;
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.05);
    animation:cardFloat 4s ease-in-out infinite;
}
.screenbox:nth-child(2){
    animation-delay:.5s;
}
.screenbox:nth-child(3){
    animation-delay:1s;
}
@keyframes cardFloat{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
}
.screenfooter{
    height:55px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    margin-top:22px;
}
.mobile3d{
    position:absolute;
    top:140px;
    right:90px;
    width:185px;
    height:360px;
    border-radius:40px;
    background:#14b5bc;
    border:1px solid rgba(255,255,255,.08);
    padding:14px;
    z-index:20;
    transform: rotate(12deg);
    box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 40px rgba(0,212,255,.08);
    animation:mobileMove 7s ease-in-out infinite;
}

@keyframes mobileMove{
    0%,100%{

        transform:
        rotate(12deg)
        translateY(0px);

    }
    50%{

        transform:
        rotate(6deg)
        translateY(-16px);
    }
}
.mobile3d__camera{
    width:72px;
    height:8px;
    border-radius:20px;
    background:#0d474d;
    margin:0 auto 18px;
}
.mobile3d__screen{
    height:92%;
    border-radius:30px;
    background: linear-gradient(180deg, #179196, #0b373b);
    padding:20px 16px;
}
.mobileline{
    height:8px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
    margin-bottom:14px;
    overflow:hidden;
    position:relative;
}
.mobileline::after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    height:100%;
    border-radius:20px;
    background: linear-gradient(90deg,#14b5bc,#81f5f9);
    animation:lineMove 4s infinite;
}
.mobileline1::after{
    width:75%;
}
.mobileline2::after{
    width:50%;
}
@keyframes lineMove{
    0%{
        transform:scaleX(0);
        transform-origin:left;
    }
    50%,100%{
        transform:scaleX(1);
        transform-origin:left;
    }
}
.mobilecard{
    height:130px;
    border-radius:24px;
    margin-top:26px;
    background: linear-gradient(135deg, rgba(0, 212, 255, .22), rgb(102 192 204 / 22%));
    animation:mobileCard 4s ease-in-out infinite;
}
@keyframes mobileCard{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
}
.mobilebutton{
    width:95px;
    height:38px;
    border-radius:40px;
    margin:28px auto 0;
    background: linear-gradient(90deg,#14b5bc,#85faff);
    animation:buttonPulse 2s infinite;
}
@keyframes buttonPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}
@media(max-width:991px){
    .laptop3d{
        width:100%;
        max-width:400px;
    }
    .laptop3d__screen{
        height:290px;
    }
    .devicelabel{
        transform:scale(.82);
    }
}
.sticky-top-number-1{
	top: 90px;
	z-index: 90;
}
.bgbox__even .bg:nth-child(odd){
	background-color: #f3feff;
	border-color: #dbfdff !important;
}
.bgbox__even .bg:nth-child(even){
	background-color: #e3f1f2;
	border-color: #cee1e3 !important;
}
.bgbox__even .bg:hover{
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
	transform: scale(1.02);
}
.boxblog__time {
	bottom: -15px;
	left: 20px;
}
.listcategory__3 li {
	margin-bottom: 6px;
}
.listcategory__3 li+li {
	margin-right: 6px;
}
.listcategory__3 li a {
	font-size: 15px;
	display: block;
	background-color: #fff;
	border-radius: 4px;
	padding: 6px 10px;
}
.listcategory__3 li a:hover {
	color: #fff;
	background-color: #14b5bc;
}
.circle-wrapper {
    width: 400px;
    height: 400px;
    margin: auto;
}
.center-circle {
    background: rgba(0, 0, 0, 0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-15px); }
}
.service-box {
    width: 180px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: 0.4s;
    animation: float2 4s ease-in-out infinite;
}
.s1 { top: 0; left: -120px;animation: float2 4s ease-in-out infinite; }
.s2 { top: 0; right: -120px;animation: float3 4s ease-in-out infinite; }
.s3 { bottom: 0; left: -120px; animation: float3 4s ease-in-out infinite;}
.s4 { bottom: 0; right: -120px;animation: float2 4s ease-in-out infinite; }
@keyframes float2 {
  0%,100% { transform: translateX(0px) }
  50% { transform: translateX(10px); }
}
@keyframes float3 {
  0%,100% { transform: translateX(10px) }
  50% { transform: translateX(0px); }
}
.service-box:hover {
  transform: scale(1.05);
  background: rgba(20, 180, 188, 0.2);
}

.boxcontactfixed{
	z-index: 99;
	bottom: 15px;
	left: calc(40px + 15px + 5px);
	transition: .6s;
	display: none;
}
.boxcontactfixed_button::before{
	position: relative;
	content: "\f095";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	transition: .5s;
	transform: rotate(270deg);
}
.boxcontactfixed_button.active::before{
	content: "\f00d";
	transform: rotate(0deg);
}
.boxcontactfixed_buttons{
	bottom: 0;
	left: -50px;
	opacity: 0;
	visibility: hidden;
	transition: .6s;
}
.boxcontactfixed_buttons.active{
	opacity: 1;
	visibility: visible;
	left: calc(40px + 5px);
}
.boxcontactfixed.endpage,
.scroll-to-top.endpage{
	bottom: 105px;
}
/* Responsive */
@media (max-width: 992px) {
	header{min-height: 70px;}
	.headerbg{padding: 15px 0;}
	.headerbg .navbar-brand img{height: 40px;}
	.sliderindex{margin-top: -70px;}
	.sliderindex.sliderindex__fullheight,.sliderindex.sliderindex__fullheight .sliderindex__slide{min-height: 500px}
	.sliderindex.sliderindex__fullheight{background-size: 130% auto;}
	.sliderindex.sliderindex__fullheight .sliderindex__slide{padding-top: calc(70px + 20px);padding-bottom: 20px;}
	.svgblock2{margin-top: -20px;}
	.bg-custom-mobile-1{background-position: left -50px bottom -50px;background-attachment: inherit;background-size: 40%;}
	.card-columns.card-columns-custom{-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
}
@media (max-width: 768px) {
	.sliderindex.sliderindex__fullheight{background-size: 290% auto;}
	.nav-tabs.customtabs__style-1 .nav-link{font-size: 16px;padding: 16px 6px;}
	.card-columns.card-columns-custom{-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
	.sliderslick__custom .slick-list{padding: 25px !important;}
	.sliderindex.sliderindex__pages, .sliderindex.sliderindex__pages .sliderindex__slide{min-height: 250px;}
	.breadcrumb{font-size: 14px;padding: 5px 12px;}
}
@media (max-width: 500px) {
	.sliderindex.sliderindex__fullheight{background-size: 290% auto;}
}
@media (max-width: 375px) {
	.svgblock2{margin-top: -15px;}
	.sectionwithsvg{padding: 40px 0 calc(40px + 20px);}
}
@media (min-width: 1190px) {
	.container{max-width: 1130px;}
}
@media (min-width: 1340px) {
	.container{max-width: 1280px;}
}
@media (min-width: 1440px) {
	.container{max-width: 1240px;}
}
@media (min-width: 1500px) {
	.container{max-width: 1400px;}
}

/*hero Section animation*/
  .zos-live-preview-wrap {
    --zos-primary: #16bfc4;
    --zos-primary-2: #19d2d7;
    --zos-primary-dark: #0d7f88;
    --zos-dark: #092d34;
    --zos-soft: #aee0e0;
    --zos-white: #ffffff;

    position: relative;
    width: 100%;
    max-width: 760px;
    min-height: 610px;
    font-family: "Tajawal", "Cairo", Tahoma, Arial, sans-serif;
  }

  .zos-live-preview-wrap *,
  .zos-live-preview-wrap *:before,
  .zos-live-preview-wrap *:after {
    box-sizing: border-box;
  }

  .zos-chip {
    position: absolute;
    z-index: 6;
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    padding: 12px 16px;
    font-weight: 900;
    font-size: 13px;
    color: #fff;
    box-shadow: 0 16px 48px rgba(0,0,0,.20);
    animation: zosChipFloat 7s ease-in-out infinite;
    white-space: nowrap;
  }

  .zos-chip-a { top: 65px; left: -10px; }
  .zos-chip-b { right: 24px; top: 96px; animation-delay: 1.7s; }

  .zos-browser {
    position: relative;
    width: 100%;
    height: 610px;
    border-radius: 32px;
    background: rgba(8,35,62,.50);
    border: 1px solid rgba(174,224,224,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 38px 120px rgba(0,0,0,.34);
    backdrop-filter: blur(18px);
    overflow: hidden;
    animation: zosFloat 11s ease-in-out infinite;
  }

  .zos-browser-top {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(2,17,36,.38);
  }

  .zos-window-dots { display: flex; gap: 8px; }
  .zos-window-dots span { width: 10px; height: 10px; border-radius: 50%; }
  .zos-dot-red { background: #fb7185; }
  .zos-dot-yellow { background: #facc15; }
  .zos-dot-green { background: #4ade80; }

  .zos-browser-url {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
  }

  .zos-screen {
    position: relative;
    height: calc(100% - 64px);
    padding: 24px;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 22%, rgba(22,191,196,.18), transparent 28%),
      radial-gradient(circle at 80% 70%, rgba(174,224,224,.12), transparent 34%),
      linear-gradient(135deg, rgba(4,18,36,.88), rgba(13,79,87,.62));
  }

  .zos-stage {
    position: relative;
    z-index: 2;
    height: 100%;
  }

  .zos-phase {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zosSceneFlow 1.35s cubic-bezier(.16,1,.3,1) both;
  }

  .zos-scene-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 8;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 11px;
    font-weight: 900;
    color: #e6ffff;
    backdrop-filter: blur(12px);
  }

  .zos-big-shot {
    width: min(94%, 690px);
    height: 390px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg,#071b1f,#0d4f57);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }

  .zos-big-shot img,
  .zos-design-card img,
  .zos-desktop-screen img,
  .zos-mobile-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    border-radius: 16px;
    background: rgba(2,14,31,.42);
  }

  .zos-soft-glow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: rgba(22,191,196,.18);
    filter: blur(60px);
  }

  .zos-shot-caption {
    position: absolute;
    right: 28px;
    left: 28px;
    bottom: 28px;
    display: grid;
    gap: 7px;
    z-index: 5;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(to left, rgba(2,14,31,.78), rgba(2,14,31,.38));
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    text-align: right;
  }

  .zos-shot-caption strong {
    font-size: 19px;
    font-weight: 900;
    color: #fff;
  }

  .zos-shot-caption span {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
  }

  .zos-design-grid {
    position: relative;
    width: min(94%, 695px);
    height: 410px;
  }

  .zos-design-card {
    position: absolute;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    background: linear-gradient(135deg,#071b1f,#0d4f57);
    box-shadow: 0 26px 80px rgba(0,0,0,.30);
    animation: zosBoardIn 1.05s cubic-bezier(.16,1,.3,1) both;
    padding: 10px;
  }

  .zos-design-card span {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(2,14,31,.64);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 10px;
    font-weight: 900;
    color: #e6ffff;
    backdrop-filter: blur(12px);
  }

  .zos-design-large {
    width: 58%;
    height: 100%;
    right: 0;
    top: 0;
  }

  .zos-design-small {
    width: 38%;
    height: 47%;
    left: 0;
  }

  .zos-design-top { top: 0; animation-delay: .18s; }
  .zos-design-bottom { bottom: 0; animation-delay: .34s; }

  .zos-code-editor {
    width: min(94%, 640px);
    min-height: 380px;
    border-radius: 26px;
    overflow: hidden;
    background: #071b1f;
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 26px 80px rgba(0,0,0,.35);
    animation: zosEditorDrift 5.6s ease-in-out both;
  }

  .zos-code-top {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    direction: ltr;
  }

  .zos-code-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    opacity: .55;
  }

  .zos-code-top b {
    margin-left: 12px;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.48);
    font-weight: 900;
  }

  .zos-code-body {
    position: relative;
    padding: 28px;
    display: grid;
    gap: 16px;
    direction: ltr;
  }

  .zos-code-line {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 30px;
    color: #bffcff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    opacity: 0;
    transform: translateX(-10px);
    animation: zosCodeLine .72s ease forwards;
  }

  .zos-code-line:nth-child(1) { animation-delay: .35s; }
  .zos-code-line:nth-child(2) { animation-delay: .85s; }
  .zos-code-line:nth-child(3) { animation-delay: 1.35s; }
  .zos-code-line:nth-child(4) { animation-delay: 1.85s; }
  .zos-code-line:nth-child(5) { animation-delay: 2.35s; }

  .zos-code-line b {
    width: 18px;
    color: rgba(255,255,255,.35);
    font-weight: 700;
  }

  .zos-code-line code { color: #9ffcff; }

  .zos-typing-cursor {
    width: 9px;
    height: 22px;
    background: var(--zos-primary-2);
    border-radius: 99px;
    animation: zosBlink .8s steps(2,end) infinite;
    margin-left: 32px;
  }

  .zos-launch-showcase {
    position: relative;
    width: min(96%, 705px);
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .zos-desktop-device {
    position: absolute;
    right: 0;
    top: 30px;
    width: 540px;
    height: 335px;
    border-radius: 28px;
    overflow: hidden;
    background: #071b1f;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
    animation: zosDeviceIn 1.05s cubic-bezier(.16,1,.3,1) both;
  }

  .zos-device-header {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.08);
    direction: ltr;
  }

  .zos-launch-dots {
    display: flex;
    gap: 7px;
  }

  .zos-launch-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    opacity: .58;
  }

  .zos-launch-url {
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
  }

  .zos-desktop-screen {
    height: calc(100% - 46px);
    padding: 12px;
    background: linear-gradient(135deg,#071b1f,#0d4f57);
  }

  .zos-mobile-device {
    position: absolute;
    left: 8px;
    bottom: 58px;
    width: 145px;
    height: 275px;
    border-radius: 32px;
    background: #030b18;
    border: 1px solid rgba(255,255,255,.16);
    padding: 10px;
    box-shadow: 0 24px 75px rgba(0,0,0,.40);
    z-index: 4;
    animation: zosPhoneSlide 1.15s cubic-bezier(.16,1,.3,1) .28s both;
  }

  .zos-phone-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 15px;
    border-radius: 0 0 13px 13px;
    background: #020817;
    z-index: 5;
  }

  .zos-mobile-screen {
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg,#102746,#0b1f39);
    padding: 7px;
  }

  .zos-launch-caption {
    position: absolute;
    right: 18px;
    left: 18px;
    bottom: 0;
    z-index: 7;
    display: grid;
    gap: 6px;
    padding: 13px 16px;
    border-radius: 20px;
    background: rgba(2,14,31,.68);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    text-align: right;
  }

  .zos-launch-caption strong {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
  }

  .zos-launch-caption span {
    font-size: 12px;
    color: rgba(255,255,255,.75);
  }

  .zos-app-phone {
    position: relative;
    width: 235px;
    height: 475px;
    border-radius: 42px;
    background: #020b12;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 32px 95px rgba(0,0,0,.42);
    padding: 14px;
    animation: zosPhoneSlide 1.05s cubic-bezier(.16,1,.3,1) both;
  }

  .zos-app-phone.is-small {
    width: 165px;
    height: 330px;
    opacity: .9;
  }

  .zos-app-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 22px;
    border-radius: 0 0 16px 16px;
    background: #020817;
    z-index: 5;
  }

  .zos-app-screen {
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(180deg,#0f3b43,#071b1f);
    padding: 24px 18px 18px;
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
  }

  .zos-app-screen:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%,rgba(25,210,215,.28),transparent 42%);
    pointer-events: none;
  }

  .zos-app-topbar,
  .zos-app-hero-card,
  .zos-app-stats,
  .zos-app-list,
  .zos-app-nav {
    position: relative;
    z-index: 2;
  }

  .zos-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .zos-app-topbar span,
  .zos-app-topbar i {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.08);
  }

  .zos-app-topbar b { font-size: 12px; }

  .zos-app-hero-card {
    min-height: 150px;
    border-radius: 24px;
    background: linear-gradient(135deg,rgba(25,210,215,.22),rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.12);
    padding: 18px;
    display: grid;
    gap: 9px;
  }

  .zos-app-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--zos-primary-2),var(--zos-primary-dark));
    display: grid;
    place-items: center;
  }

  .zos-app-icon svg {
    width: 25px;
    height: 25px;
    stroke: #fff;
    stroke-width: 2.2;
  }

  .zos-app-hero-card strong {
    font-size: 18px;
    line-height: 1.35;
  }

  .zos-app-hero-card span {
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255,255,255,.72);
  }

  .zos-app-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .zos-app-stats div {
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px;
  }

  .zos-app-stats b {
    font-size: 18px;
    display: block;
  }

  .zos-app-stats span {
    font-size: 9px;
    color: rgba(255,255,255,.6);
  }

  .zos-app-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
  }

  .zos-app-list span {
    height: 34px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.06);
  }

  .zos-app-nav {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    height: 40px;
    border-radius: 18px;
    background: rgba(2,14,31,.55);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .zos-app-nav i {
    width: 18px;
    height: 18px;
    border-radius: 8px;
    background: var(--zos-primary-2);
    opacity: .8;
  }

  .zos-mobile-idea-wrap,
  .zos-mobile-launch-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
  }

  .zos-mobile-note,
  .zos-app-launch-panel {
    width: 250px;
    border-radius: 26px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    padding: 24px;
    display: grid;
    gap: 10px;
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
  }

  .zos-mobile-note strong,
  .zos-app-launch-panel strong {
    font-size: 22px;
  }

  .zos-mobile-note span,
  .zos-app-launch-panel span {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
  }

  .zos-mobile-board-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
  }

  .zos-app-ready {
    height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 900;
  }

  .zos-app-ready i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zos-primary-2);
    box-shadow: 0 0 14px rgba(25,210,215,.9);
  }

  .zos-status {
    position: absolute;
    top: 24px;
    left: 26px;
    z-index: 9;
    padding: 10px 15px;
    border-radius: 17px;
    background: rgba(255,255,255,.085);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    font-weight: 900;
    font-size: 12px;
    color: #e6ffff;
  }

  .zos-status:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zos-primary-2);
    box-shadow: 0 0 14px rgba(22,191,196,.85);
    margin-left: 8px;
    vertical-align: middle;
  }

  .zos-timeline {
    position: absolute;
    z-index: 0;
    left: 34px;
    bottom: 24px;
    right: 34px;
    height: 52px;
    border-radius: 19px;
    background: rgba(2,14,31,.58);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,.66);
    overflow: hidden;
  }

  .zos-timeline-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: rgba(255,255,255,.08);
    z-index: -1;
  }

  .zos-timeline-progress {
    position: absolute;
    left: 8%;
    top: 50%;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--zos-primary-2), var(--zos-soft), #fff);
    z-index: -1;
    transition: width 1.15s cubic-bezier(.16,1,.3,1);
  }

  .zos-timeline.is-mobile .zos-timeline-progress {
    background: linear-gradient(90deg, #fff, var(--zos-soft), var(--zos-primary-2));
  }

  .zos-step {
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: .58;
    transition: opacity .55s ease, transform .55s ease, color .55s ease;
  }

  .zos-step i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--zos-primary-2);
    box-shadow: 0 0 16px rgba(22,191,196,.45);
    transition: .55s ease;
  }

  .zos-step.is-done { opacity: .88; }

  .zos-step.is-active {
    opacity: 1;
    transform: scale(1.06);
    color: #fff;
  }

  .zos-step.is-active i {
    box-shadow: 0 0 22px rgba(22,191,196,.9);
    transform: scale(1.28);
  }

  @keyframes zosSceneFlow {
    from { opacity: 0; transform: translateX(18px) scale(.985); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }

  @keyframes zosBoardIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }

  @keyframes zosCodeLine { to { opacity: 1; transform: none; } }
  @keyframes zosBlink { 50% { opacity: 0; } }

  @keyframes zosEditorDrift {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }

  @keyframes zosDeviceIn {
    from { opacity: 0; transform: translateX(22px) scale(.96); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }

  @keyframes zosPhoneSlide {
    from { opacity: 0; transform: translateX(-26px) translateY(18px) scale(.94); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }

  @keyframes zosFloat {
    50% { transform: translateY(-10px) rotate(-.25deg); }
  }

  @keyframes zosChipFloat {
    50% { transform: translateY(-9px); }
  }

  @media (max-width: 991.98px) {
    .zos-live-preview-wrap {
      max-width: 100%;
      min-height: 650px;
    }

    .zos-browser { height: 650px; }
    .zos-chip { display: none; }
  }

  @media (max-width: 767.98px) {
    .zos-live-preview-wrap { min-height: 540px; }

    .zos-browser {
      height: 540px;
      border-radius: 24px;
    }

    .zos-browser-top { height: 54px; }

    .zos-screen {
      height: calc(100% - 54px);
      padding: 14px;
    }

    .zos-big-shot {
      width: 100%;
      height: 340px;
      border-radius: 22px;
      padding: 12px;
    }

    .zos-design-grid {
      width: 100%;
      height: 350px;
    }

    .zos-design-large { width: 62%; }
    .zos-design-small { width: 34%; }

    .zos-code-editor { min-height: 350px; }

    .zos-code-body {
      padding: 22px 18px;
    }

    .zos-code-line {
      font-size: 11px;
      gap: 10px;
    }

    .zos-status {
      top: 14px;
      left: 14px;
      font-size: 10px;
    }

    .zos-timeline {
      left: 14px;
      right: 14px;
      bottom: 14px;
      height: 48px;
      font-size: 10px;
    }

    .zos-launch-showcase { height: 370px; }

    .zos-desktop-device {
      width: 100%;
      height: 270px;
      right: 0;
      top: 35px;
    }

    .zos-mobile-device {
      width: 110px;
      height: 215px;
      left: 8px;
      bottom: 58px;
    }

    .zos-mobile-note,
    .zos-app-launch-panel {
      display: none;
    }

    .zos-app-phone {
      width: 210px;
      height: 420px;
    }

    .zos-app-phone.is-small {
      display: none;
    }
  }

  @media (max-width: 520px) {
    .zos-browser { height: 500px; }
    .zos-status { display: none; }
    .zos-mobile-device { display: none; }
    .zos-desktop-device { height: 260px; }
    .zos-timeline { font-size: 9px; }
    .zos-step i { width: 7px; height: 7px; }
	.devicesanimation{height: 380px;}
  }





/* تنسيق والالوان الأنميشن */
.zos-live-preview-wrap{min-height: 450px;}
.zos-browser{height: 450px;border-radius: 12px;background: rgb(20 181 188 / 50%);border: 0;}
.zos-browser-top{height: 40px;background: rgb(20 181 188 / 14%);}
.zos-screen{height: calc(100% - 40px);padding: 15px;background: radial-gradient(circle at 30% 22%, rgba(22, 191, 196, .18), transparent 28%), radial-gradient(circle at 80% 70%, rgba(174, 224, 224, .12), transparent 34%), linear-gradient(135deg, rgb(20 181 188 / 47%), rgb(34 73 75 / 34%));}
.zos-browser-url{color: #fff;}
.zos-chip{padding: 5px 15px;}
.zos-timeline{background: rgb(20 181 188 / 34%);left: 20px;right: 20px;bottom: 0;border-radius: 10px 10px 0 0;}
.zos-step{text-shadow: 0px 1px 5px #000;}
.zos-chip-a{bottom: -35px;left: -22px;top: auto;}
.zos-chip-b{right: -35px;bottom: 75px;top: auto;}
.zos-status{direction: ltr;}
.zos-status:before{margin-right: 8px;margin-left: 0;}
.zos-big-shot{background: linear-gradient(135deg, #14b5bc, #14b5bc);}
.zos-shot-caption{background: linear-gradient(to left, rgb(20 181 188 / 61%), rgb(20 181 188 / 31%));}
.zos-big-shot img, .zos-design-card img, .zos-desktop-screen img, .zos-mobile-screen img{object-fit: inherit;}
.zos-design-card{background: linear-gradient(135deg,#14b5bc,#14b5bc);}
.zos-device-header,.zos-code-top{height: 40px;}
.zos-big-shot{height: 300px;}
.zos-design-grid{height: 280px;}
.zos-code-editor{min-height: 280px;}
.zos-code-body{padding: 12px;}
.zos-scene-badge{right: 0;top: 0;}
.zos-desktop-device,.zos-code-editor{background: #0C474D;}
.zos-app-phone{height: 395px;background-color: #0b373b;}
.zos-app-screen,.zos-mobile-screen{background: linear-gradient(180deg,#14b5bc,#19858b);}
.zos-shot-caption{width: 65%;right: auto;padding: 5px 15px;gap: 0;}
.zos-shot-caption strong{font-size: 17px;}

/* =========================
SOFTWARE ANIMATION
========================= */

.softwareanimation {
    position: relative;
    width: 100%;
    height: 480px;
    perspective: 1600px;
}

.softwareanimation--ltr {
    direction: ltr;
    text-align: left;
}

/* =========================
GLOW
========================= */

.softwareglow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .24;
}

.softwareglow1 {
    width: 320px;
    height: 320px;
    background: #ff2d20;
    top: 40px;
    left: 100px;
}

.softwareglow2 {
    width: 260px;
    height: 260px;
    background: #00d4ff;
    bottom: 60px;
    right: 80px;
}

/* =========================
TECH PILLS
========================= */

.techpill {
    position: absolute;
    z-index: 30;
    padding: 5px 10px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
    animation: floatPill 6s ease-in-out infinite;
}

.techpill i {
    color: #67e8ff;
}

.techpill1 {
    top: 40px;
    left: 20px;
}

.techpill2 {
    top: 130px;
    right: 10px;
    animation-delay: 1s;
}

.techpill3 {
    top: 300px;
    left: -10px;
    animation-delay: 2s;
}

.techpill4 {
    bottom: 120px;
    right: 20px;
    animation-delay: 3s;
}

.techpill5 {
    bottom: 40px;
    left: 90px;
    animation-delay: 4s;
}

@keyframes floatPill {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* =========================
BROWSER
========================= */

.codebrowser {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 760px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(10deg) rotateY(-10deg);
    border-radius: 12px;
    overflow: hidden;
    background: #164b5b;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 45, 32, .08);
    animation: browserFloat 8s ease-in-out infinite;
}

@keyframes browserFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) rotateX(10deg) rotateY(-10deg) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) rotateX(6deg) rotateY(8deg) translateY(-14px);
    }
}

/* =========================
TOP BAR
========================= */

.codebrowser__top {
    height: 40px;
    background: #178fa182;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    padding: 0 24px;
}

.browserdots {
    display: flex;
    align-items: center;
}

.browserdots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.browserdots span:nth-child(1) {
    background: #ff5f57;
}

.browserdots span:nth-child(2) {
    background: #febc2e;
}

.browserdots span:nth-child(3) {
    background: #28c840;
}

.browserurl {
    margin-left: 25px;
    height: 42px;
    line-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    color: #8ea2bd;
    font-size: 14px;
}

/* =========================
BODY
========================= */

.codebrowser__body {
    display: flex;
    height: 400px;
}

/* =========================
SIDEBAR
========================= */

.codesidebar {
    width: 90px;
    background: #178fa182;
    border-right: 1px solid rgba(255, 255, 255, .05);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.codesidebar__logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14b5bc, #0d6468);
    margin-bottom: 30px;
}

.codesidebar__menu {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    margin-bottom: 14px;
    transition: .3s;
}

.codesidebar__menu.active {
    background: linear-gradient(135deg, rgb(20 181 188 / 40%), rgba(255, 255, 255, .08));
    box-shadow: 0 0 20px rgb(20 181 188 / 20%);
}
.codecontent {
    flex: 1;
}

.codecontent__top {
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background: #178fa169;
}

.codetab {
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    border-radius: 12px;
    margin-right: 12px;
    color: #8ea2bd;
    font-size: 14px;
    background: rgba(255, 255, 255, .03);
}

.codetab.active {
    background: linear-gradient(135deg, rgb(20 181 188 / 29%), rgba(255, 255, 255, .05));
    color: #fff;
}

/* =========================
CODE WINDOW
========================= */

.codewindow {
    height: calc(100% - 58px);
    padding: 30px;
    overflow: hidden;
    position: relative;
}

.codewindow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, transparent, rgba(255, 255, 255, .03), transparent);
    animation: shineMove 6s linear infinite;
}

@keyframes shineMove {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.codewindow pre {
    color: #d6deeb;
    font-size: 15px;
    line-height: 2;
    font-family: monospace;
    position: relative;
    z-index: 2;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px) {

    .codebrowser {
        width: 100%;
        max-width: 430px;
    }

    .codebrowser__body {
        height: 320px;
    }

    .codesidebar {
        width: 70px;
    }

    .codetab {
        font-size: 11px;
        padding: 0 10px;
    }

    .techpill {
        transform: scale(.82);
    }
}

/* =========================
ANALYTICS WIDGETS
========================= */

.analyticswidgets {
    position: absolute;
    right: 25px;
    top: 30px;
    width: 220px;
    z-index: 5;
}

.analyticscard {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
    animation: widgetFloat 5s ease-in-out infinite;
}

.analyticscard2 {
    animation-delay: 1s;
}

.analyticscard3 {
    animation-delay: 2s;
}

@keyframes widgetFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.analyticscard small {
    color: #8ea2bd;
    display: block;
    margin-bottom: 10px;
}

.analyticscard h3 {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
}

/* progress */

.analyticsprogress {
    height: 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
    margin-top: 15px;
}

.analyticsprogress span {
    display: block;
    width: 85%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #ff2d20, #00d4ff);
    animation: progressMove 4s linear infinite;
}

@keyframes progressMove {
    0% {
        width: 0%;
    }

    100% {
        width: 85%;
    }
}

/* lines */

.analyticslines span {
    display: block;
    height: 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}

.analyticslines span::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #00d4ff, #7d5dff);
    animation: lineLoad 4s infinite;
}

.analyticslines span:nth-child(1)::after {
    width: 90%;
}

.analyticslines span:nth-child(2)::after {
    width: 60%;
}

.analyticslines span:nth-child(3)::after {
    width: 75%;
}

@keyframes lineLoad {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    50%,
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* api circles */

.apicircles {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

.apicircles span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff2d20, #00d4ff);
    animation: circlePulse 2s infinite;
}

.apicircles span:nth-child(2) {
    animation-delay: .4s;
}

.apicircles span:nth-child(3) {
    animation-delay: .8s;
}
@keyframes circlePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: .5;
    }
}
.floatingui {
    position: absolute;
    border-radius: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
    z-index: 2;
}
.floatingui1 {
    width: 100px;
    height: 100px;
    left: 40px;
    bottom: 120px;
    animation: uiFloat 6s ease-in-out infinite;
}
.floatingui2 {
    width: 70px;
    height: 70px;
    left: 170px;
    bottom: 160px;
    animation: uiFloat 5s ease-in-out infinite;
}
.floatingui3 {
    width: 140px;
    height: 60px;
    left: 90px;
    bottom: 40px;
    animation: uiFloat 7s ease-in-out infinite;
}
@keyframes uiFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}
.bottomstats {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 25px;
    display: flex;
    justify-content: space-between;
    z-index: 5;
}
.bottomstats__item {
    text-align: center;
}
.bottomstats__item h4 {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 4px;
}
.bottomstats__item span {
    color: #8ea2bd;
    font-size: 13px;
}

/* =========================
MOBILE APPS ANIMATION
========================= */

.mobileappsanimation {
  position: relative;
  width: 100%;
  height: 500px;
  perspective: 1800px;
}

.mobileappsanimation--ltr {
  direction: ltr;
  text-align: left;
}

/* =========================
FLOATING PILLS
========================= */

.mobilepill {
  position: absolute;
  z-index: 30;
  padding: 5px 10px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
  animation: floatingPill 6s ease-in-out infinite;
}

.mobilepill i {
  color: #67e8ff;
}

.mobilepill1 {
  top: 40px;
  left: 10px;
}

.mobilepill2 {
  top: 130px;
  right: 10px;
  animation-delay: 1s;
}

.mobilepill3 {
  top: 320px;
  left: -10px;
  animation-delay: 2s;
}

.mobilepill4 {
  bottom: 130px;
  right: 20px;
  animation-delay: 3s;
}

.mobilepill5 {
  top: -11px;
  left: 210px;
  animation-delay: 4s;
}

@keyframes floatingPill {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* =========================
PHONES WRAPPER
========================= */

.phoneswrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 520px;
}

/* =========================
PHONE
========================= */

.appphone {
  position: absolute;
  width: 200px;
  height: 400px;
  border-radius: 42px;
  background: #0c1320;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
}

.appphone__camera {
  width: 72px;
  height: 8px;
  border-radius: 20px;
  background: #1d2a3f;
  margin: 0 auto 18px;
}

.appphone__screen {
  height: 93%;
  border-radius: 30px;
  background: linear-gradient(180deg, #14b5bc, #176b77);
  padding: 20px 16px;
  position: relative;
  overflow: hidden;
}

.appphone__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent, rgba(255, 255, 255, .04), transparent);
  animation: shineMove 6s linear infinite;
}

@keyframes shineMove {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* =========================
PHONE POSITIONS
========================= */

.appphone1 {
  left: 0;
  top: 60px;
  transform: rotate(-12deg);
  animation: phoneFloat1 6s ease-in-out infinite;
}

.appphone2 {
  left: 250px;
  top: 0;
  z-index: 10;
  transform: rotate(0deg);
  animation: phoneFloat2 6s ease-in-out infinite;
}

.appphone3 {
  right: 0;
  top: 60px;
  transform: rotate(12deg);
  animation: phoneFloat3 6s ease-in-out infinite;
}

@keyframes phoneFloat1 {
  0%,
  100% {
    transform: rotate(-12deg) translateY(0px);
  }
  50% {
    transform: rotate(-8deg) translateY(-14px);
  }
}

@keyframes phoneFloat2 {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes phoneFloat3 {
  0%,
  100% {
    transform: rotate(12deg) translateY(0px);
  }
  50% {
    transform: rotate(8deg) translateY(-14px);
  }
}

/* =========================
PHONE 1 UI
========================= */

.appheader {
  display: flex;
  align-items: center;
}

.appheader__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, #14b5bc, #14535d);
}

.appheader__content {
  flex: 1;
  margin-left: 12px;
}

.appheader__content span {
  display: block;
  height: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  margin-bottom: 8px;
}

.appheader__content span:first-child {
  width: 80%;
}

.appheader__content span:last-child {
  width: 50%;
}

.appbanner {
  height: 110px;
  border-radius: 24px;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(0, 212, 255, .25), rgba(125, 93, 255, .25));
  animation: bannerPulse 5s ease-in-out infinite;
}

@keyframes bannerPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

.appcards {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.appcard {
  flex: 1;
  height: 70px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  animation: miniCard 4s ease-in-out infinite;
}

.appcard:last-child {
  animation-delay: .5s;
}

@keyframes miniCard {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.appbutton {
  width: 100px;
  height: 38px;
  border-radius: 40px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, #14b5bc, #14535d);
  animation: buttonPulse 2s infinite;
}

/* =========================
CENTER PHONE
========================= */

.dashboardtop {
  display: flex;
  align-items: center;
}

.dashboardcircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b5bc, #14535d);
}

.dashboardlines {
  flex: 1;
  margin-left: 12px;
}

.dashboardlines span {
  display: block;
  height: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  margin-bottom: 8px;
}

.dashboardlines span:first-child {
  width: 80%;
}

.dashboardlines span:last-child {
  width: 55%;
}

.dashboardchart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px;
  margin-top: 28px;
}

.chartbar {
  width: 28px;
  border-radius: 20px 20px 8px 8px;
  background: linear-gradient(180deg, #14b5bc, #14535d);
  animation: chartMove 4s ease-in-out infinite;
}

.chartbar:nth-child(1) {
  height: 55px;
}

.chartbar:nth-child(2) {
  height: 100px;
  animation-delay: .3s;
}

.chartbar:nth-child(3) {
  height: 75px;
  animation-delay: .6s;
}

.chartbar:nth-child(4) {
  height: 120px;
  animation-delay: .9s;
}

@keyframes chartMove {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(.8);
  }
}

.dashboardbox {
  height: 70px;
  border-radius: 22px;
  margin-top: 24px;
  background: rgba(255, 255, 255, .06);
}

.dashboardstats {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.dashboardstats div {
  flex: 1;
  height: 60px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}

/* =========================
PHONE 3
========================= */

.storetop span {
  display: block;
  height: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  margin-bottom: 12px;
}

.storetop span:first-child {
  width: 85%;
}

.storetop span:last-child {
  width: 55%;
}

.storecard {
  height: 120px;
  border-radius: 24px;
  margin-top: 22px;
  background: linear-gradient(135deg, rgba(0, 212, 255, .25), rgba(125, 93, 255, .25));
}

.storelist {
  margin-top: 20px;
}

.storelist div {
  height: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  margin-bottom: 14px;
}

.storebutton {
  width: 110px;
  height: 40px;
  border-radius: 40px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, #14b5bc, #14535d);
  animation: buttonPulse 2s infinite;
}

/* =========================
STORE BADGES
========================= */

.storebadge {
  position: absolute;
  z-index: 30;
  padding: 16px 45px;
  border-radius: 60px;
  background: #14b5bc87;
  border: 1px solid #14b5bc;
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
  animation: badgeFloat 5s ease-in-out infinite;
}

.storebadge i {
  color: #67e8ff;
}

.storebadge1 {
  bottom: 20px;
  left: 75px;
}

.storebadge2 {
  bottom: 20px;
  right: 75px;
  animation-delay: 1s;
}

@keyframes badgeFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes buttonPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px) {
  .phoneswrapper {
    width: 100%;
    max-width: 420px;
    height: 420px;
  }
  .appphone {
    width: 140px;
    height: 290px;
  }
  .appphone2 {
    left: 140px;
  }
  .storebadge {
    transform: scale(.8);
  }
  .mobilepill {
    transform: scale(.82);
  }
  .storebadge{padding: 10px 25px;}
  .storebadge1{left: 0;}
  .storebadge2{right: 0;}
  .mobilepill5{top: 0;left: auto;right: 0;}
}