*{box-sizing:border-box;margin:0;padding:0}
body,html{
height:100vh;
width:100%;
background-color:#333333 ;
font-family: 'Serif', sans-serif;
color: white;
font-weight: 300;
font-size:1em;
line-height:1.6;
text-rendering: auto;
scroll-behavior: smooth;
}

h2 {
	font-size: 2em;
	color: yellow;
}
h3, h4{	font-size: 1.3em ;
	color: yellow;
}

img {
width: 100%;
height: auto;
}
a {
	color: white;
}


/* COLORS PALETTE BROWNS
Hex 	RGB
	#a47864 	(164,120,100)
	#b58670 	(181,134,112)
	#a7887a 	(167,136,122)
	#957c71 	(149,124,113)
	#a67057 	(166,112,87)
Cream: #FDFBD4
Light Blue: #90D5FF
Sage Green: #98A869
Dusty Rose: #DCA1A1
Soft Beige: #D2B4A4
Charcoal Grey: #333333
Muted Gold: #BDB78D
Terracotta: #C35A26
*/

.master-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
"header"
"hero-main"
"services"
"hero"
"pain-points"
"process"
"faq"
"rev-hero"
"review"
"vision"
"footer"

}

/* DESKTOP SCREEN */
@media only screen and (min-width:1281px){
.master-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
"header     header      header      header  "
" hero-main  hero-main  hero-main  hero-main"
" .     services  services  . "
"hero       hero         hero        hero"
" .  pain-points    pain-points    . "
"  . process  process  . "
" .   faq  faq  ."
" rev-hero   rev-hero  rev-hero  rev-hero"
"  review    review   review    review "
"  .  vision   vision   . "
" footer   footer    footer   footer"
}
}

.hero-main{
grid-area: hero-main;
width: 100%;
height: 600px; 
background-image: url('pixeltime-web-design.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}


.hero-main h1{
color: white;
font-size: 2.5vw;
margin-top: 80px;
font-weight: 900;
text-align: center;
}

.hero-main h2{
color: white;
font-size: 2em;
margin-top: 10px;
font-weight: 900;
text-align: center;
}


/*  FOR LEFT SIDE */
.container-info {
display: inline-block;
position: relative;
width: 100%;
min-height: 490px;
background-color: #957c71; 
}


@media (min-width: 768px) {
.container-info {
float: left;
/*position: fixed;*/
left: 0;
top: 0;
height: 100%;
width: 50%; } }

/* FOR RIFGT SIDE */
.container-main {
display: inline-block;
position: relative;
width: 100%;
min-height: 490px;
background-color: rgb(85, 128, 202);
padding: 80px;

}
@media (min-width: 768px) {
.container-main {
float: right;
/*position: fixed;*/
right: 0;
top: 0;
height: 100%;
width: 50%; } }


/* ENDS HERE */
/* WHATSAPP */
.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: #25d366;
  border-radius: 50%;
  padding: 12px;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-icon {
  width: 32px;
  height: 32px;
  display: block;
  filter: invert(1);
}



/* ENDS */
/* SERICE SECTION */
#services{	
grid-area:services;
margin-top: 80px;
margin-bottom: 60px;
}

#services h2 {
	font-size: 1.5em;
}
#services li{
padding: 20px 20px;
list-style: square;
}

#services ul{
margin-left: 20px;
}
#services a{
	text-decoration: none;
	color: white;
}
/* ENDS HERE */
.hero {
	grid-area: hero;
	min-height:600px;
	background-image: url(pixelime.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	}

.icon{
	max-width: 20px;
}
.logo-1{
	max-width: 200px;
	position: absolute;
top: 9%;
left: 6%;
}
.logo-main{
width: 200px;
height: auto;
margin: auto;
display:flex;
align-items:center;
justify-content:center;
}

.button-container-flex {
display: flex;
gap: 10px; /* Space between buttons */
justify-content: center;
align-items: center;
margin-bottom: 40px;
}

.button-flex {
padding: 10px 20px;
}




.btn-m  {
display: flex;
background-color: rgb(85, 128, 202);
width: 200px;
height: 50px;
justify-content: center;
align-items: center;
line-height: 20px;
border: 1px solid;
border-radius: 10px;
text-align: center;
font-size: 16px;
color: white;
text-decoration: none;
transition: all 0.35s;
box-sizing: border-box;
text-decoration: none;
}
.btn-m:hover {
  transform: translateY(-0.25em);
  border-color: white;
  color: white;
		cursor: pointer;
}

.btn-cta-top  {
display: flex;
background-color: #98A869;
width: 150px;
height: 50px;
justify-content: center;
align-items: center;
line-height: 15px;
border: 1px solid;
border-radius: 10px;
text-align: center;
font-size: 16px;
color: white;
text-decoration: none;
transition: all 0.35s;
box-sizing: border-box;
}
.btn-cta-top:hover {
transform: translateY(-0.25em);
border-color: white;
color: white;
background-color:#333333;
cursor: pointer;
}


.vision{
grid-area: vision;
margin: 10px  auto;
padding: 80px;

}

.logo-top{
	max-width: 40px;
	height: auto;
}
/* TO TOP BUTTON */

.back-to-top {
	bottom: 1em;
	opacity: 0.9;
	position: fixed;
	right: 1em;
	transition: opacity 200ms ease;
	z-index: 1;
	color: white;
	border: 1px solid white;
	border-radius: 50%;
	padding: 5px;
}

.back-to-top:hover {
	opacity: 1;
	background-color: #E94823;
}

.at-top .back-to-top,
.at-bottom .back-to-top {
	opacity: 0;
	pointer-events: none;
}
/* END */


.serv-card{
width: 250px;
height: 300px;
margin: 5px;
background-color: #9EA791;
padding: 20px;
border-radius: 12px;
text-align: left;
color:black;
border: 2px #333333 solid;
font-size: 1.08em;
}

#pain-points{
	grid-area: pain-points;
	margin: 10px 10px;
	padding: 60px;
	justify-content: center;
	justify-items: center;
	justify-self: center;
}
#pain-points li {
	padding: 10px 20px;
}
#pain-points ul {
	padding-left: 20px;
}
#pain-points p{
	font-size: 1.2em;
	padding: 20px;
	text-align: center;
}

#pain-points h3{
color: white;
	font-size: 1.4em;
	padding: 20px;
}
#pain-points span{
	font-size: 1.1em !important;
}

#pain-points a{
	text-decoration: none;
}
.pain-card{
	background-color:#E94823;
	justify-content: center;
	justify-self:center;
	padding: 40px;
	border-radius: 12px;
	border: 2px white solid;
}
input{
	border: 2px solid black;
	height: 40px;
	padding: 5px 10px;
	width: 100%;
	background-color: rgb(247,247,247);
	color: black !important;
	margin-bottom: 40px;
width: 400px;
border-radius: 12px;
}
label{
	color: white;
	padding: 10px;
}
.process{
	grid-area: process;
		margin: 40px 10px;
	justify-content: center;
	justify-items: center;
	justify-self: center;
	padding: 20px;
}
	.process li{
		padding-bottom: 20px;
	}
.process ul{
	padding-left: 40px;
}
.faq{
grid-area: faq;
margin: 10px 10px;
justify-content: center;
justify-items: center;
justify-self: center;
margin: 60px 0;
}

	.faq li{
		padding-bottom: 20px;
	}
.faq-item{
	padding: 10px;
}

	
/* PRODUCTS */
.products{
	grid-area: products;
	margin: 20px 20px;
	padding: 80px;
}
.products li{
	padding: 20px 20px;
}
.products ol{
	padding-left: 20px;
}
.works-img{
	grid-area: works-img;
	min-height:980px;
	background-image: url(how-it-works.webp);
	background-repeat: no-repeat;
	background-position: right -100px  top 50%;
	background-size: contain;
	padding: 10px;
}

.features{
	grid-area: features;
	margin-top: 60px;
	padding: 30px;
}
.features li{
	padding: 10px 10px;
}
.features p{
	font-size: 1.2em;
}


.img-contain{
	max-width: 600px;
height: auto;
}
/* ENDS */

/* TESTIMONIALS */
.review{
	grid-area: review;
	display: grid;
	grid-template-columns:  repeat(3, 1fr) ;
	grid-gap: 1em;
	margin: 10px  20px;
justify-content: center;
justify-self: center;
}
.review a{
	color:white;
}

.review a:hover{
	color:rgb(12, 189, 248);
}

.review-img{
	max-width: 150px !important;
	max-height: 150px;

}
.rev-img{
	border-radius: 8px;
	width: 200px;
	height:auto;
}
.rev-card{
margin: 10px 10px;
padding: 10px;
border: 1px solid white;
border-radius: 12px;
max-width: 400px;
}
.rev-hero{
	grid-area: rev-hero;
	padding: 20px;
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 60px;
}
.rev-card:hover{
	margin: 10px 10px;
	padding: 10px;
	border: 1px solid white;
	border-radius: 12px;
	max-width: 400px;
	background-color: #333333;
	color: white;
		transform: translateY(-0.25em);
	}

/* ENDS */
#scrollToTopBtn {
	background-color: black;
	border: none;
	color: white;
	cursor: pointer;
	font-size: 18px;
	line-height: 48px;
	width: 48px;
}

/*NAVIGATION*/
header{
	grid-area: header;
	}
	
	.nav {
	height: 70px;
	width: 100%;
	background-color: #9ea791;
	position: fixed;
	z-index: 555;
	}
	
	.nav > .nav-header {
	display: inline;
	margin-right: 20px;
	}
	
	.nav > .nav-header > .nav-title {
	display: inline-block;
	font-size: 20px;
	color: #333333;
	padding: 10px 10px 10px 10px;
	}
	
	.nav > .nav-btn {
	display: none;
	}
	
	.nav > .nav-links {
	display: inline;
	float: right;
	font-size: 17px;
	}
	
	.nav > .nav-links > a {
	display: inline-block;
	padding: 10px 40px 5px 10px;
	text-decoration: none;
	color:black;
	}
	
	.nav > .nav-links > a:hover {
	background-color: #36454F;
	padding: 10px 40px 5px 10px;
	color: white ;
	z-index: 1;
	}
	.nav > #nav-check {
	display: none;
	}
	
	@media (max-width:1080px) {
	.nav > .nav-btn {
	display: inline-block;
	position: absolute;
	right: 40px;
	top: 10px;
	z-index: 1;
	}
	.nav > .nav-btn > label {
	display: inline-block;
	width: 50px;
	height: 50px;
	padding: 13px;
	}
	.nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
	background-color: rgba(0, 0, 0, 0.3);
	}
	.nav > .nav-btn > label > span {
	display: block;
	width: 25px;
	height: 10px;
	border-top: 2px solid #eee;
	}
	.nav > .nav-links {
	position: absolute;
	display: block;
	width: 100%;
	background-color: #999999;
	height: 0px;
	transition: all 0.3s ease-in;
	overflow-y: hidden;
	top: 50px;
	left: 0px;
	z-index: 1;
	color: white;
	}
	.nav > .nav-links > a {
	display: block;
	width: 100%;
	}
	.nav > #nav-check:not(:checked) ~ .nav-links {
	height: 0px;
	}
	.nav > #nav-check:checked ~ .nav-links {
	height: calc(100vh - 50px);
	overflow-y: auto;
	}
	}
	
	
	

.hero-logo{
	max-width: 300px;
	max-height: 200px;
}


.tech-img{
	width: 150px;height: 150px;
}


footer{
grid-area:footer;
padding:40px;
background-color: #333333;
min-height:400px;
bottom:0;
left:0;line-height:50px;
text-align:center;width:100%
}



.subitem5  li{
	padding-top: 0;

}
.subitem5 ul{
	margin: 0;
	padding: 0;
}

footer ul{
	list-style-type: none;
}
footer i{color:white}
footer a{color: white;text-decoration:none}
footer a:hover{color:#98A869;font-weight:500}


.grid2{display:grid;align-content:space-around;grid-gap:2em;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-template-rows:auto}

.subitem3{padding:40px;display:block;margin-bottom:5px;color: white;text-align:left}

.subitem4{padding:40px;display:block;margin-bottom:5px;color: white;text-align:left}

.subitem5{padding:40px;display:block;margin-bottom:5px;color:white;text-align:center}

footer h4{text-decoration:none;color:white;font-size:1.2em;font-weight:400}

.subitem4 a {
	font-size: 1.2em;
	color: rgb(118, 166, 249);
}

.subitem5 a:visited {
	color: rgb(118, 166, 249);
}

.subitem5 a:hover {
	color:#98A869;

}
/* FOOTER ENDS */


/* MEDIA - HAND HELDS */

@media  screen and (max-width: 480px){ 


.hero1 {
grid-area: hero1;
min-height:400px;
margin-top: 10px;
text-align: center;
}

.hero-main h1{
	font-size: 8vw;
	margin-top: 60px;
	font-weight: 900;
	text-align: center;
	margin-top: 80px;
	}
	
	.hero-main h2{
	font-size: 1.6em;
	margin-top: 5px;
	font-weight: 900;
	text-align: center;
	padding: 20px;
	}
/*  FOR LEFT SIDE */
.container-info {
	display: inline-block;
	position: relative;
	width: 100%;
	min-height: 350px;
	background-color: #957c71; 
	}
	
	/* FOR RIFGT SIDE */
	.container-main {
	display: inline-block;
	position: relative;
	width: 100%;
	min-height: 490px;
	background-color: rgb(85, 128, 202);
	padding: 40px;
	
	}

#services{	
grid-area:services;
padding: 40px;
justify-self: center;

}
	
.serv-card{
	width: 350px;
		height: 200px;
	background-color: #b3ac75;
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	}

#services p{
font-size: 1em !important;
}

.box{	position: absolute;	top: 75% ;	left: 51% ;	transform: translate(-50%, -50%);}
.container {display: flex;flex-direction: column;z-index: 9999;position: absolute;top: 2%;left: 3%  ;position: fixed;}
.container p{font-size: 0.7em;color: rgb(39, 228, 203);padding-left: 12px;}
header{grid-area: header;min-height: 100px;position: fixed; width: 100%; z-index: 5;}
header h2 {font-size: 0.8em;text-align: center;color: #bfbfc2;font-weight:400;letter-spacing:20px; margin-top: 80px; }
header h3 {font-size: 6vw; font-weight: 300 ; text-align: center;color: #93acb3; }

.review{
grid-area: review;
display: block;
grid-gap: 1em;
margin: 10px  20px;

}

.grid2{display:block;align-content:space-around;grid-gap:2em;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-template-rows:auto}
.subitem5{padding:40px;display:block;margin-bottom:5px;text-align:center; color: white; width: 100%;  }

.products{
	padding: 20px;
}

.review{
	padding: 20px;
}
#pain-points{
	grid-area: pain-points;
	margin: 20px 5px;
	padding: 20px;
}
	#pain-points li {
	padding: 20px 40px;
}
#pain-points ul {
	padding-left: 20px;
}
#pain-points p{
	font-size: 1.6em;
	padding: 40px;
}
#pain-points h3{
	margin-top: 60px;
	font-size: 1.8em;
	padding: 20px;
}
.pain-card{
	justify-content: center;
	justify-self:center;
	padding: 20px;
	border-radius: 12px;
	margin: 0 10px;
}
#pain-points h2{
	padding: 40px;
}
input{
	border: 1px solid grey;
	height: 40px;
	padding: 5px 10px;
	width: 100%;
	background-color: rgb(247,247,247);
	color: black !important;
	margin-bottom: 40px;
width: 250px;
border-radius: 12px;
}

.btn-m  {
display: flex;
background-color: rgb(85, 128, 202);
width: 150px;
height: 50px;
justify-content: center;
align-items: center;
line-height: 18px;
border: 1px solid;
border-radius: 10px;
text-align: center;
font-size: 16px;
color: white;
text-decoration: none;
transition: all 0.35s;
box-sizing: border-box;
}

.btn-m:hover {
transform: translateY(-0.25em);
border-color: white;
color: white;
background-color: teal;
cursor: pointer;
}

.button-container-flex {
display: flex;
flex-direction: column;
}

.button-flex {
cursor: pointer;
}

.btn-cta-top  {
display: flex;
background-color: #333333;
width: 150px;
height: 50px;
justify-content: center;
align-items: center;
line-height: 15px;
border: 1px solid;
border-radius: 10px;
text-align: center;
font-size: 16px;
color: white;
text-decoration: none;
transition: all 0.35s;
box-sizing: border-box;
}
.btn-cta-top:hover {
transform: translateY(-0.25em);
border-color: white;
color: white;
background-color:#A47864;

}.rev-hero{
	grid-area: rev-hero;
	padding: 20px;
	text-align: center;
	font-size: 4vw;
	margin-bottom: 60px;
}


}



/* MEDIA SCREEN - TABLETS PORTRIAT --------------------------------------------------*/
@media (min-width: 481px) and (max-width: 810px){

h2{ font-size: 3vw; }
h3, h4{		font-size: 3vw ; }
.hero {
grid-area: hero;
height:600px;
background-repeat: no-repeat;
background-size: contain;
background-position:top 20%  right 5%;
background-color: #9ea791;
}
.hero h2{
position: absolute;
top: 16%;
font-size: 2.5vw;
}
.hero h1{
font-size: 5vw;
}

.hero p{
position: absolute;
top: 30%;
left: 50%;
font-size: 1.2em !important;
font-weight: 700;
}
.btn-cta-top-top{
	position: absolute;
	top:1.5%;
	right: 60%;

	}
.btn-cta-top{
position: absolute;
top:50%;
left: 60%;

}

.services{	
	grid-area:services;
		display: block;
	grid-gap: 1em;
	grid-template-columns: repeat(5, 1fr);
	margin: 100px 10px;
	text-align: center;
	justify-self: center;
	
	}
	
.serv-card{
	width: 350px;
		height: 200px;
	background-color: #b3ac75;
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	}
	.review{
		grid-area: review;
		display: block;
		grid-gap: 1em;
		margin: 10px  20px;
	
	}

}


@media (min-width: 811px) and (max-width: 930px){

	h2{ font-size: 3vw; }
	h3, h4{		font-size: 3vw ; }

	.hero {
		grid-area: hero;
		min-height:1180px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position:top 10%  right 5%;
		background-color: #9EA791;
		}
		.hero h1{
			font-size: 3.3vw;
				}
	
		
		.hero p{
			position: absolute;
			top: 60%;
			left: 50%;
			font-size: 1.2em !important;
			font-weight: 700;
			}
			.btn-cta-top-top{
				position: absolute;
				top:3%;
				right: 60%;
			
				}

				.review{
					grid-area: review;
					display: block;
					grid-gap: 1em;
					margin: 10px  20px;
				
				}

		}

@media (min-width: 931px) and (max-width: 1280px){

h2{ font-size: 3vw; }
h3, h4{		font-size: 3vw ; }
.hero {
	grid-area: hero;
	min-height:1180px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position:top 20%  right 5%;
	background-color: #d7d090;
	}

	.hero h1{
		font-size: 3.5vw;
	}
	
	.hero p{
		position: absolute;
		top: 38%;
		left: 50%;
		font-size: 1.2em !important;
		font-weight: 700;
		}
.service-header{
	grid-area: service-header;
	margin-top: 50px;
	text-align:center;
	padding: 20px;

	}
	.service-header h2{
		font-size: 3vw;
	}
	.services{	
	grid-area:services;
		display: block;
	grid-gap: 2em;
	grid-template-columns: repeat(3, 1fr);
	margin: 100px 10px;
	text-align: center;
	justify-self: center;
	
	}
	
.serv-card{
	width: 350px;
	height: 200px;
	background-color: #b3ac75;
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	}

	.btn-cta-top{
		position: absolute;
		top:70%;
		left: 60%;
		
		}
		
		.btn-cta-top-top{
			position: absolute;
			top:1.5%;
			right: 60%;
			text-align: center;
			background-color:  #E94823;
			color: white; 
			cursor: pointer;
			border-radius: 12px ;
			border: 1px solid white;
			text-decoration:none;
			font-size:1em;
			width:15em;
			padding:5px 0;
			margin:auto;
			z-index: 9999;
			position: fixed;
			transition: transform .2s;
			}
			.products{
				padding: 20px;
			}
			.works-img{
				background-size: contain;
				background-position:center center;
				margin-left: 22%;
			}
			.review{
				padding: 20px;
			}
			
			.review{
				grid-area: review;
				display: block;
				grid-gap: 1em;
				margin: 10px  20px;
			
			}
	
}
@media (max-width: 768px) {
	nav ul {
					text-align: center;
					padding: 10px;
	}
}