/* zauwlHeader */
* {
	margin:0px;
}
a {
	text-decoration: none;
}
#topBar {
	background:linear-gradient(to right, rgb(0, 38, 77),rgb(30, 46, 80), rgb(0, 38, 77));
	font-family: 'Libre Caslon Text', serif;
	padding:0px 30px;
	width: 100%;
	position:sticky;
	top:0;
	z-index:22;
box-shadow: rgba(50, 50, 93, 0.9) 0px 50px 100px -20px, rgba(0, 0, 0, 0.9) 0px 30px 60px -30px, rgba(10, 37, 64, 0.9) 0px -2px 6px 0px inset;

color:white;
}

#topBar:hover {
	background:linear-gradient(to right, rgb(0, 40, 77),rgb(0, 0, 128),rgb(0, 40, 77));
}

#topBar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display:flex;
	align-items: center;
}

#topBar li {
	cursor:pointer;
	font-size:15px;
}

#topBar i {
	margin: 0px 6px 0px 30px;
	font-size:15px;
}
.top-btn {
	margin-left:5px;
	padding: 0px 10px;
	box-shadow: rgba(50, 50, 93, 0.9) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.9) 0px 18px 36px -18px inset;
	display:flex;
	align-items: center;
	background:#1affff;
}

.top-btn:hover {
	background:#1aff1a;
}

.top-btn a {
	padding-top:2px;
}

.ephone a{
  color: inherit;
}

#topBar a:visited, a:active{
  color: white;
  text-decoration: none;
}

.ephone:hover {
	color:#b3c6ff;
}

@media screen and (max-width: 700px) {
	#topBar{
		padding:0px 10px;
	}
	
	#topBar li {
		font-size:10px;
	}
	
	#topBar i {
		margin: 0px 0px 0px 5px;
		font-size:10px;
	}
}

.logo-box {
	display:flex;
	background:linear-gradient(to right, rgb(237, 242, 249, 0.5), rgb(211, 214, 219, 0.5)), url("/images/nice.png");
	object-fit:cover;
	padding:5px 2% 5px 4%;
}

.logo-box svg {
	height: 100px;
	width: 400px;
	font: 80px Montserrat;
}

.text-copy {
	fill: none;
	stroke: white;
	stroke-dasharray: 6% 15%;
	stroke-width: 3px;
	stroke-dashoffset: 0%;
	animation: stroke-offset 6.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #003366;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke:#000033;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke:black;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke:#000099;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke:#008080;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -21%;}
}

.logo-box p {
	margin:0 0 0 10%;
	font-family: 'El Messiri', sans-serif;
	white-space: nowrap;
	font-size: 30px;
	overflow:hidden;
	color: #12253b;
	animation: animated-text 1s steps(30,end) 0.5s 1 normal both;
}

@keyframes animated-text{
  from{width: 0;}
  to{width:90%;}
}

.solution-text {
	margin-left:70%;
}

.solution-text h1 {
	font-family: 'Libre Caslon Text', serif;
	color: #fff;
	font-size:30px;
	position: absolute;
}
.solution-text h1:nth-child(1) {
	  color:white;
	  -webkit-text-stroke: 1px black;
}

.solution-text h1:nth-child(2) {
	  color:#003d99;
	  animation: animate 8s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 25%,
      16% 30%,
      33% 35%,
      54% 45%,
      70% 48%,
      84% 46%,
      100% 40%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 35%,
      15% 40%,
      34% 42%,
      51% 38%,
      67% 30%,
      84% 25%,
      100% 28%,
      100% 100%,
      0% 100%
    );
  }
}
#fcLogo {
	float:right;
	width:180px;
	height:180px;
	position: relative;
	animation:fc-rotation 5s infinite cubic-bezier(0.3, 0.27, 0.07, 0) ;
}

@keyframes fc-rotation{
  0% { transform: rotateY(0deg);}
  48% { transform:rotateY(170deg);}
  50% { transform:rotateY(180deg);}
  52% { transform:rotateY(170deg);}
  100% { transform: rotateY(0deg);}
}

.text-svg-zauwl{
	transform: translate(0px, 70px); /* move right 10px, down 20px */
}

@media screen and (max-width: 700px) {
	.logo-box svg {
		height: 50px;
		width: 200px;
		font: 40px Montserrat;
	}
	
	.text-svg-zauwl{
		transform: translate(0px, 30px); /* move right 10px, down 20px */
	}
  
	.text-copy {
		stroke-width: 1px;
	}

	.logo-box p {
		margin:0 0 0 10%;
		font-size: 8px;
	}

	.solution-text {
		margin-left:50%;
	}
	.solution-text h1 {
		font-size:15px;
	}

	 #fcLogo{
		width:80px;
		height:80px;
	 }
}

#pageBtnBar {
	display:flex;
	justify-content:center;
	background:linear-gradient(to right, rgb(0, 26, 77),rgb(30, 46, 80, 0.8),rgb(0, 255, 255,0.5),rgb(30, 46, 80, 0.8), rgb(0, 26, 77));
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#pageBtnBar ul{
	display:flex;
	padding: 0;
	margin: 0;
	align-items: center;
}

#pageBtnBar li{
	display:flex;
	align-items:center;
	border-right:solid silver;
	list-style-type:none;
	font-size:20px;
	color:white;
	padding:0px 20px;
	font-family: 'El Messiri', sans-serif;
	margin:0px;
	height:100%;
}

#pageBtnBar li:hover {
	color:#004d4d;
	background:white;
	font-family: 'Libre Caslon Text', serif;
	border:none;
	box-shadow:2px 2px 5px 5px white;
	cursor:pointer;
}

#pageBtnBar a{
	padding:3px 0px;
	display: block;
	color:white;
}
#pageBtnBar a:hover{
	color:#004d4d;
	background:white;
	font-family: 'Libre Caslon Text', serif;
	border:none;
	cursor:pointer;
}


@media screen and (max-width: 700px) {
	#pageBtnBar li{
		font-size:10px;
		padding:0px 4px;
	}
	#pageBtnBar a {
		padding:0px 2px;
	}
}


/* zauwlCarousel */
#demo{
	height:380px;
}

#demo .carousel-inner,
#demo .carousel-item {
  height: 100%;
}

#demo .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
	background-color:rgb(255, 173, 51);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.carousel-caption {
	margin: 0px;
	padding:0px;
	top:100px;
	right:5%;
	left:5%;
	overflow: hidden;
	animation: animate-text 2s steps(30,end) 1s 1 normal both;
}

.carousel-caption h3 {
	margin: 0 auto;
	padding:0px 10px;
	background: rgb(0, 38, 77, 0.5);
	box-shadow: rgba(50, 50, 93, 0.9) 0px 50px 100px -20px, rgba(0, 0, 0, 0.9) 0px 30px 60px -30px, rgba(10, 37, 64, 0.9) 0px -2px 6px 0px inset;
	font-size:40px;
	color:white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color:#cce5ff	;
	font-family: 'Gelasio', serif;
	white-space: nowrap;
	width: fit-content;
	border-radius:1px;
}
@keyframes animate-text{
  from{width: 0;}
  to{width:90%;}
}



@media screen and (max-width: 700px) {
	.carousel-caption h3{
		font-size: 12px;
		padding:0px 2px;
	}
}

/* zauwlPricing */
				#pricing {
					display: flex;
					flex-direction: column;
					justify-content:center;
					align-items:center;
				}
				.pricehead{
					font-size:40px;
					margin-top:10px;
					text-align:center;
					font-family: 'El Messiri', sans-serif;	
					color:#003366;					
				}

				.pricetag {
					height:70px;
					font-size:25px;
					text-align:center;
					padding:0px;
					font-family: 'El Messiri', sans-serif;
					color:#005580;					
				}
				#pricing #line {
					border-top:solid grey;
					width:250px;
					padding:0px;
				}
				
				
			.flex-container  {
				display:flex;
				flex-wrap: wrap;
				justify-content:center;				
			}

			.pricing-card {
			  overflow: hidden;
			  position:relative;
			  width: 300px;
			  margin:15px;
			  background: #ffffff;
			  border-radius: 14px;
			  padding: 20px 20px 3px;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			  text-align: center;
			  transition: all 0.3s ease;
			  border-top: 10px solid #00b3b3; /* accent color */
			  border-bottom: 5px solid grey; /* accent color */
				font-family: 'El Messiri', sans-serif;
				}

			.pricing-card:hover {
			  border-top: 10px solid #99c2ff; /* accent color */
				transform: translateY(-6px);
				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-subtitle {
				font-size: 15px;
				color: #00334d;
				margin-bottom: 10px;
			}
			.divider {
			  width: 200px;
			  height: 1px;
			  background: #b3ffff;
			  margin: 10px 40px 10px;
			}
			.plan-title {
			  font-size: 30px;
			  font-weight: 600;
			  color: #005580;
			  margin:0px;
			}
			.pricing-card:hover .plan-title{
				color:#3385ff;
			}
			.pricing-card:hover .amount{
				color:#0047b3;
				font-size:29px;
			}
			

			.currency {
			  font-size: 25px;
			  vertical-align: top;
			  color: #4b5563;
			}

			.amount {
			  font-size: 25px;
			  font-weight: 700;
			  color: #111827;
			}

			.duration {
			  font-size: 23px;
			  color: #6b7280;
			}
			.plan-desc {
				font-size: 15px;
				color: #4b5563;
				padding:0px;
				margin:0px;
			}
			
			.ribbon {
			  position: absolute;
			  top: 16px;
			  right: -50px;
			  background: rgb(0, 153, 204,0.8);
			  color: white;
			  text-shadow: 2px 2px 4px white;
			  padding: 6px 48px;
			  font-size: 13px;
			  transform: rotate(45deg);
			  box-shadow: 0 6px 18px rgba(153, 230, 255, 0.4);
			  z-index: 10;
			}
			.pricing-card:hover .ribbon {
			  transform: rotate(45deg) scale(1.05);
			}
			
			.tick-list {
				list-style:none;
				text-align:left;
				padding:0px;
				font-size:12px;
			}
			.tick-list i{
				margin:5px 10px 0px ;
			}
			
			.card-subtitle.with-logos {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  gap: 10px;
			  flex-wrap: wrap;
			  text-align: center;
			}

			.logo-wrap {
			  display: flex;
			  gap: 8px;
			}

			.logo-wrap img {
			  height: 25px;   /* adjust as needed */
			  width: auto;
			}
			.p-size{
				font-size:12px;
			}


/* zauwlFeatures */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
	margin:0px 30px;
  }

  .feature-item {
    position: relative;
    padding: 10px 22px 5px 22px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    box-shadow:
      0 10px 25px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.35s ease;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.5;
 font-family: 'El Messiri', sans-serif;

  }

  .feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
  }

  .feature-item:hover {
	border-top: 5px solid #99c2ff; /* accent color */
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.18);
  }

  .feature-item:hover::before {
    opacity: 1;
  }

  .feature-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }












/* zauwlCounter */
#counter{
	text-align: center;
	display: flex;
	flex-grow:1;
	justify-content: center;
	background: #e6e6e7;
	margin-top:20px;
	width: 100%;
}
#counter .item{
	background: #fff;
	width: 200px;
	padding: 35px 35px;
	margin: 10px;
	text-align: center;
	border-radius: 20px;
	-webkit-box-shadow: 0px 0px 38px -8px rgb(115, 115, 115);
} 
#counter .item .count{
	font-family: 'El Messiri', sans-serif;
	color:rgb(0, 102, 153, 0.7);
	margin-bottom: 5px;
	font-size: 40px;
}
#counter .item .text{
	color:#bfbfbf;
	font-family: 'El Messiri', sans-serif;
	margin-bottom: 5px;
	font-size: 20px;
}
#counter .item .texter{
	font-family: 'El Messiri', sans-serif;
	color:rgb(15, 15, 10,0.6);
	margin-bottom: 5px;
	font-size: 22px;
} 


@media screen and (max-width: 700px) {
	#counter .item{
		width: 100px;
		padding: 18px 18px;
		margin: 5px;
	}
	
	#counter .item .count{
		margin-bottom: 5px;
		font-size: 20px;
	}

	#counter .item .text{
		margin-bottom: 5px;
		font-size: 12px;
	}
	#counter .item .texter{
		margin-bottom: 5px;
		font-size: 12px;
	} 
}



/* zauwlClients */
				#clients {
					height:140px;
					font-size:20px;
					text-align:center;
					padding-top:30px;
					font-family: 'El Messiri', sans-serif;
				}
				#clients h5 {
					color:#003366;					
					font-size:40px;
				}
				#line {
					border-top:solid grey;
					align:center;
					width:150px;
					margin:0px;
					padding:0px;
					display:inline-block;
				}
				.slideshow-container {
					width:100%;
					padding:0px;
					overflow:hidden;
					height:200%;
					position: relative;
					margin: auto;
				}
				.dot {
				  height: 15px;
				  width: 15px;
				  margin-bottom:15px;
				  background-color: #bbb;
				  border-radius: 50%;
				  display: inline-block;
				  transition: background-color 0.6s ease;
				}
				.doti .active {
				  background-color:#00b3b3;
				}
				.move{
				   transform: translateX(800px);
					animation:move 3s cubic-bezier(.05,1.73,0,.6);
				}
				
				@keyframes move {
				   100% {transform: translateX(0px); }
				}

				.mySlides img {
					height:150px;				
				}

@media screen and (max-width: 700px) {
	.mySlides img{
		width: 100%;
		height: 100%;
	}
}

/* zauwlWhatsapp */
				#gotop {
					width:50px;
					height:50px;
					background:#b3ffff;
					display: none;
					position: fixed;
					bottom: 20px;
					left: 30px;
					z-index: 99;
					cursor: pointer;
					padding-top:8px;				
					font-size:20px;
					text-align:center;
					border-radius:20px;
					box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
				}
				#gotop i {
					color:white;
				}
				#gotop:hover {
					background: orange;
				}
				#gotop:hover .arrow{
					animation: arrow 0.5s infinite;
				}
				@keyframes arrow {
					30% {transform: translateY(2px);}
					80% {transform: translateY(-2px);}
				}
				
				#hidden{
					display:flex;
					width:50px;
					height:55px;
					overflow:hidden;
					position: fixed;
					bottom:40px;
					right:0px;
					padding:0px;
					z-index: 99;
					border-radius: 30px 0px 0px 30px;
					cursor: pointer;
					background:rgb(0, 255, 85);
					transition: width 1s;
					transition-timing-function: ease-in-out;
					box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
				}
				#wap {
					height:30px;
					font-size:15px;
					color:white;
					padding:5px;
					margin:12px 0px 0px 0px;
					align:center;
					width:170px;
					font-family: 'Heebo', sans-serif;
					overflow:hidden;
				}
				#hidden:hover {
					width:220px;
				}
				#app {
					display:none;
					position: fixed;
					bottom:80px;
					right:20px;
					padding:0px;
					z-index: 99;
					width:300px;
					font-family: 'Heebo', sans-serif;
					height:250px;
				}
				#wp-header {
					color:white;
					background:linear-gradient(to right, rgb(0, 255, 0, 0.5), rgb(0, 255, 255,0.5));
					box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
					border-radius:10px 10px 0px 0px;
					font-size:15px;
					width:100%;
					height:50px;
					padding:8px;
				}
				#wp-main  {
					background:linear-gradient(to right, rgb(179, 255, 255, 0.9),rgb(255, 255, 255), rgb(153, 255, 153, 0.9));
					width:100%;
					padding:2px;
					height:110px;
				}
				#wp-footer {
					background:linear-gradient(to right, rgb(0, 255, 0, 0.8), rgb(0, 255, 255,0.8),  rgb(255, 255, 255));
					color:white;
					box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
					font-size:12px;
					padding:10px;
					text-align:justify;
					border-radius:0px 0px 0px 10px;
					width:100%;
					height:40px;
				}
				#wpi  {
					border:solid grey;
					border-radius:80px;
					 width:70px;
					 height:70px;
					background-image: url("/images/wp.png");
					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;					display:inline-block;
					background-size:cover;
					margin:10px 0px 0px 5px;
				}
				.wdiv  {
					display:inline-block;
					width:180px;
					height:60px;
					margin:0px;
				}
				.a {
					text-decoration:none;
					color: #804d00;
				}
				.cross {
					text-decoration:none;
					width:20px;
					height:20px;
					line-height:20px;
					background: yellow;
					font-size:20px;
					padding:0px;
					color:red;
					margin:5px 0px 0px 10px;
				}






/* zauwlTestimonial */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

	#what {
	background-image: linear-gradient(to right, rgb(0, 0, 0, 0.5),
						rgb(0, 102, 153,0.2)), url("/images/corpo.jpg");
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
				rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
				rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
				rgba(0, 0, 0, 0.06) 0px 2px 1px,
				rgba(0, 0, 0, 0.09) 0px 4px 2px,
				rgba(0, 0, 0, 0.09) 0px 8px 4px,
				rgba(0, 0, 0, 0.09) 0px 16px 8px,
				rgba(0, 0, 0, 0.09) 0px 32px 16px;
		background-size:50%;
		text-align:center;
		font-family: 'El Messiri', sans-serif;
		margin:0px;
		width:100%;
	}

	#what h2 {
		text-shadow: 2px 2px 4px #000000;
		color:white;
		font-size:55px;
		padding:10px 0px;				
	}
.wrapper{
	display: flex;
	height:400px;
	max-width: 1500px;
	overflow:hidden;
	position: relative;
	background-size:cover;
}
.wrapper i{
	z-index:99;
	top: 50%;
	height: 40px;
	width: 40px;
	color: white;
	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;
	cursor: pointer;
	font-size: 1.15rem;
	position: absolute;
	text-align: center;
	line-height: 40px;
	background:rgb(0, 51, 102,0.5);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: transform 0.1s linear;
}
.wrapper i:active{
	transform: translateY(-50%) scale(0.9);
}
.wrapper i:hover{
	background: rgb(0, 255, 255, 0.5);
}
.wrapper i:first-child{
	left: 2px;
	display: none;
}
.wrapper i:last-child{
	right:1px;
}
.wrapper .carousel{
	cursor: pointer;
	overflow: hidden;
	margin:30px 18px 0px 18px;
	white-space: nowrap;
	scroll-behavior: smooth;
}
.carousel.dragging{
	cursor: grab;
	scroll-behavior: auto;
}
.carousel.dragging .img{
	pointer-events: none;
}
.carousel .img{
	display:inline-block;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
				rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
				rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, 
				rgba(0, 0, 0, 0.06) 0px 2px 1px,
				rgba(0, 0, 0, 0.09) 0px 4px 2px, 
				rgba(0, 0, 0, 0.09) 0px 8px 4px, 
				rgba(0, 0, 0, 0.09) 0px 16px 8px, 
				rgba(0, 0, 0, 0.09) 0px 32px 16px;
	height: 340px;
	object-fit: cover;
	user-select: none;
	margin-left: 14px;
	width: 395px;
	    text-align: center; /* center text horizontally */

			}
			.carousel .img:first-child{
				margin-left: 0px;
			}

			@media screen and (max-width: 900px) {
			  .carousel .img{
				width: 400px;
			  }
			}
			@media screen and (max-width: 550px) {
			  .carousel .img{
				width: 100%;
			  }
			}
			.img .pic {
				opacity:0.95;
				height:70px;
				width:70px;
				border-radius:50px 0px 50px 0px;
				top: 5px;
				position: relative;
				left: 150px;
				background-size:cover;
				z-index:1;
				box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

			.img p {
				white-space: normal;
				position:relative;
				background:linear-gradient(to right, rgb(0, 102, 153, 0.5),rgb(0, 255, 204, 0.1), rgb(0, 255, 255,0.2));
				box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
				top:-5px;
				height:200px;
				margin:0px;
				color:#00334d;
				padding:40px 10px 0px 10px;
				text-align:justify;
				font-size:18px;
				font-family: 'El Messiri', sans-serif;
				font-style:italic;
			}
			.img .name {
				font-family: "Quintessential", serif;
				font-size:22px;
				color:rgb(0, 32, 128);
				margin:0px ;
			}
			.img .company{
				font-family: "Quintessential", serif;
				margin: 0px;
				font-size:18px;
				color:rgb(0, 77, 77);
				text-decoration:underline;
			}	
			.carousel .img:hover {
			box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
				 rgba(0, 0, 0, 0.12) 0px -12px 30px,
				rgba(0, 0, 0, 0.12) 0px 4px 6px,
				 rgba(0, 0, 0, 0.17) 0px 12px 13px,
				 rgba(0, 0, 0, 0.09) 0px -3px 5px;
		}



@media screen and (max-width: 700px) {
	#what h2 {
	    font-size: 30px;
		padding:10px 0px;				
	}
}


/* zauwlContactForm */
#contacta {
		height:140px;
		font-size:20px;
		text-align:center;
		padding-top:30px;
		font-family: 'El Messiri', sans-serif;
	}

#contacta h5 {
			color:#003366;					
			font-size:40px;
		}


.contact-wrapper {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.15);
	padding: 20px;
	font-family: 'El Messiri', sans-serif;

}

/* 1st Box: Info */
.contact-info {
  flex: 1.5;
  background: #0f3d63;
  color: #ccffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover glow */
.contact-info:hover {
  transform: translateY(-3px);
  box-shadow:
    0 25px 40px rgba(15, 61, 99, 0.5),
    0 0 25px rgba(111, 183, 233, 0.4);
}

/* Heading */
.contact-info h3 {
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 10px;
}

/* Info rows */
.info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

/* Font Awesome icon */
.info-item .icon {
  font-size: 20px;
  color: #6fb7e9;
  margin-top: 4px;
  min-width: 20px;
}

/* Labels */
.info-item strong {
  display: block;
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 2px;
}

/* Values */
.info-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* 2nd Box: Map */
.contact-map {
	flex: 1; /* slightly smaller width */
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	filter: grayscale(100%) brightness(90%);

}

.map-box {
	  width: 100%;
	  height: 100%;
}

.map-box iframe {
	  width: 100%;
	  height: 100%;
	  border: none;
}


/* 3rd Box: Split Form */
.contact-form {
	background: linear-gradient(to right, rgb(0, 0, 0, 0.1),
						rgb(0, 102, 153,0.2));
	flex: 1.5; /* adjust width as needed */
	padding: 15px;
	border-radius: 6px;
	display: flex;
	flex-direction: column; /* vertical layout */
	height: 100%;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	box-sizing: border-box;
}

.contact-form h2 {
	  margin-bottom: 2px;
	  font-size: 25px;
	  color:rgb(0, 77, 77);
}

.contact-form .subtitle {
	color: #008080;
	font-size: 15px;
	margin-bottom: 10px;
}

.contact-form input,
.contact-form textarea {
	  width: 100%;
	  padding: 6px;
	  margin-bottom: 5px;
	  border: none;
	  background: #f1f5f8;
	  border-radius: 4px;
	  font-size: 15px;
	  box-sizing: border-box;
}

.contact-form textarea {
	resize: none;
}

.contact-form button {
	width:80px;
	padding: 6px 15px;
	background: #6fb7e9;
	border: none;
	border-radius: 20px;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	}

.contact-form button:hover {
	background:rgb(255, 92, 51,0.5);
}




/* zauwlFooter */
.app-footer {
	background:linear-gradient(to right, rgb(0, 38, 77,0.5),rgb(30, 46, 80, 0.5), rgb(0, 38, 77, 0.5),rgb(0, 38, 77,0.5)), url("/images/nice.png");
  color: #fff;
 	font-family: 'El Messiri', sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  padding:20px 0px 0px 0px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 40px;
  color:rgb(252, 246, 246);
}

/* Brand */
.footer-brand h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color:#adfaeb;
}

.footer-brand p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Links */
.footer-links h4 {
  margin-bottom: 15px;
  font-size: 16px;
  color:#f8c86e;
}

.footer-links a {
  display: block;
  color: #ffffffcc;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #92c7c2;
}

/* Newsletter */
.footer-newsletter h4 {
  margin-bottom: 10px;
    color:#f8c86e;
}

.footer-newsletter p {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 15px;
}

.newsletter-box {
  display: flex;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}

.newsletter-box input {
  flex: 1;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  outline: none;
}

.newsletter-box button {
  background: #45b0b8;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  border: none;
  padding: 0 22px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.newsletter-box button:hover {
  background: #5aa9e0;
}

/* Bottom */
.footer-bottom {
  text-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  opacity: 0.8;
  height: 30px;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .newsletter-box {
    flex-direction: column;
    border-radius: 10px;
  }

  .newsletter-box button {
    padding: 12px;
  }
  
  .footer-newsletter{
	  	margin:2px auto;
	  	width:80%
	}
}