@charset "UTF-8";
/* CSS Document */
html {
	scroll-behavior: smooth;
  }
.overflow{ 
overflow-x: hidden;
}
body{ 
	background-color: rgba(245,245,245,1.00);
}
*{ 
margin: 0; 
padding: 0; 
}

h6{ 
	font-family: warnock-pro-display, serif;
	font-weight:700;
	font-size: 27pt; 
	font-style: normal;
	color: white; 
	letter-spacing: 2px; 
	text-align: center; 
}
.hero-section-subheading-color{ 
	color: rgba(116,116,116,1); 
}

.hero-section-heading{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 900; 
	font-size: 80pt;
	letter-spacing: 2px; 
	line-height: 1em; 
}
.hero-section-subheading{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 400; 
	font-size: 30pt;
	letter-spacing: 2px; 
	margin: 15px 0 30px 0;
	line-height: 1em; 
	
}
.call-to-action-button{ 
	background-color: rgba(1,191,154,1.00); 
	padding: 10px 30px; 
	border-radius: 30px; 
	box-shadow: 5px 5px 5px rgba(0,0,0,0.16);
	color: white; 
	text-decoration: none; 
	font-family: 'Roboto', sans-serif;
	font-size: 16pt; 
	width: 115px;
}
.call-to-action-button:hover{ 
	box-shadow:  0 0 0 0; 
	filter: saturate(150%); 
}
.button-text{ 
	font-family: 'Roboto', sans-serif;
}

.section-heading-color{ 
	color: rgba(116,116,116,1); 
}
.section-heading{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 400; 
	font-size: 60pt;
	letter-spacing: 2px; 
	line-height: 1em; 
	text-align: center; 
	margin-top: 150px; 
	margin-bottom: 50px; 
	padding: 0 10px; 
}

.usp-heading{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 900; 
	font-size: 40pt;
	letter-spacing: 2px; 
	line-height: 1em; 
	color:rgba(172,135,73,1); 
}

.paragraph-color{ 
	color:rgba(88,88,88,1); 
}
.paragraph-color-white{ 
	color:rgba(215,215,215,1.00); 
}
.paragraph{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 300; 
	font-size: 15pt;
	letter-spacing: 1px; 
	line-height: 1.2em; 
	margin-top: 15px; 
}

.small-heading{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 900; 
	font-size: 20pt;
	letter-spacing: 1px; 
	line-height: 1.2em; 
	margin-top: 10px; 
}

.prices-color{ 
	color: rgba(195,195,195,1); 
}
.prices{ 
	font-family: "Roboto", sans-serif; 
	font-weight: 400; 
	font-size: 20pt;
	letter-spacing: 1px; 
}

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

.background-box-white{ 
	max-width: 1400px;
	width: 90%; 
	height: 80vh; 
	border-radius: 30px;
	box-shadow: 10px 10px 9px rgba(0,0,0,0.16), -10px -10px 9px rgba(255,255,255,0.76); 
}

.background-box-black{ 
	max-width: 1400px;

	background-color: rgba(59,59,59,1.00); 
	border-radius: 30px;
	box-shadow: 10px 10px 10px rgba(26,26,26,0.49), -3px -3px 3px rgba(116,116,116,0.21); 
}
/*font-color*/ 
.golden-fonts{ 
	color:rgba(172,135,73,1);
}
/*desktop-header-----*/ 
.desktop-header{
	background-color: rgba(68,69,73,1);
	display: flex; 
	justify-content:space-around; 
	 padding: 15px 0;
	height: 40px; 
	position: fixed; 
	top: 0; 
	left: 0; 
	right: 0;
	z-index: 10; 
	
}

.desktop-header img{ 
	position: relative; 
	bottom: 10px; 
}
.desktop-navbar{ 
	display: flex; 
}
/*.desktop-navbar .background-box-black{ 
	box-shadow: 5px 5px 9px rgba(0,0,0,1);
}*/ 

.navbar-item{ 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	margin: 0 20px;
}
.navbar-item:hover{ 
box-shadow: 0px 0px 0px rgba(0,0,0,0.5), -0px -0px 0px rgba(0,0,0,1); 
}
.navbar-item a{ 
	color:rgba(242,242,242,1.00); 
	text-decoration: none; 
	width: 170px; 
	text-align: center; 
	padding: 14px 0;
	font-family: 'roboto', sans-serif; 
	letter-spacing: 1px; 
}
.navbar-item a:hover{ 
	color: rgba(1,191,154,1.00); 
	
}

/*mobile-navbar--------*/ 

.mobile-navbar{ 
	position: fixed; 
	z-index: 10; 
	width: 100%;
	top: 0; 
	display: none; 
}

.mobile-navbar-stripe{
	background-color:rgba(68,69,73,1);
}

.hamburger-menu{ 
	padding: 10px 0 8px 12px; 
}

.mobile-navbar-stripe img{ 
	position: absolute; 
	top: 6px; 
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}
.mobile-navbar-stripe object{ 
	width: 35px; 
	height: auto; 
	margin-right: 10px;
}


.mobile-navbar-stripe a{  /*phone icon postioning*/ 
	position: absolute; 
	top: 0; 
	right: 0; 
	padding: 12px 10px 0 0; 
}

.menu-list{ 
	background-color: rgba(68,69,73,1);
	height: 100vh; 
	display: none; 
}
.mobile-navbar-list a{ 
	width: 100%; 
}
.menu-list .close-icon{ 
	padding: 10px 0 8px 12px;
}

.mobile-navbar-list .background-box-black{ 
	margin-top: 20px;
}

.contact-svg{ 
	fill:#01BF9A  !important;; 
}
	

/*hero-section------/ 


/*hero section amimation*/ 
.hero-section{ 
	display: grid; 
	grid-template-columns: repeat(20,1fr); 
	grid-template-rows: repeat(20,5vh); 
	max-width: 1400px;
	margin: 0 auto;
}
.hero-section-text{ 
	grid-column: 2/11; 
	grid-row: 5/19; 	
}
.hero-section-green-rectangle{ 
	grid-column: 9/21;
	grid-row: 1/21; 
	position: relative; 
	bottom: 400px; 
	z-index: -1; 
}
.hero-section-svg{ 
	grid-column:12/16; 
	grid-row: 4/6;
	 width:571px;  
	height:443px; 
}

.gear{ 
	animation-name: small-gear-rotation; 
	animation-duration: 4s; 
	animation-iteration-count: infinite; 
	animation-direction: alternate; 
	animation-timing-function:ease;
	 transform-box: fill-box;
  transform-origin: center;
}


@keyframes small-gear-rotation{ 
	0%{ transform: rotate(0deg); }
	100%{transform: rotate(360deg);}
}

.large-gear{ 
	animation-name: large-gear-rotation; 
	animation-duration: 4s; 
	animation-iteration-count: infinite; 
	animation-direction:alternate; 
	animation-timing-function: ease;
	 transform-box: fill-box;
  transform-origin: center;
}


@keyframes large-gear-rotation{ 
	0%{ transform: rotate(360deg); }
	100%{transform: rotate(0deg);}
}

.html-tag-svg-box, #Path_721{ 
	animation-name: html-tag-box; 
	animation-duration: 4s; 
	animation-iteration-count:infinite; 
	animation-direction:alternate; 
	animation-timing-function: ease;
	
	transform-origin: 188px 290px;
}

@keyframes html-tag-box{ 
	0%{ transform: scale(0.5,0.5); }
	100%{transform: scale(1.2,1.2);}
	
	}

.div-tag-svg, #Path_722{ 
	/*
width="115.245" height="54.781" transform="translate(297.456 316.891)*/ 
	animation-name: div-tag-box; 
	animation-duration: 4s; 
	animation-iteration-count:infinite; 
	animation-direction:alternate; 
	animation-timing-function: ease;
	transform-origin: 355.07px 344.28px;
}
@keyframes div-tag-box{ 
	0%{ transform: scale(0.5,0.5); }
	100%{transform: scale(1.2,1.2);}
	
	}

#Rectangle_1401,#Rectangle_1402,#Rectangle_1403,#Rectangle_1404{ 
		animation-name: write-tag-box; 
	animation-duration: 4s; 
	animation-iteration-count:infinite; 
	animation-direction:alternate; 
	animation-timing-function: ease;
}
@keyframes write-tag-box{ 
	0%{ width: 0; }
	100%{width: 72px;}
	
	}


/*usp section-----*/ 
.usp>div:nth-child(even){
	margin: 0 auto 100px auto;
	display: flex; 
	justify-content: center; 
	align-items:center; 
}
.usp>div:nth-child(odd){
	margin: 0 auto 100px auto;
	display: flex; 
	flex-direction: row-reverse; 
	justify-content: center; 
	align-items:center; 
}
.svg-container{ 
	width: 50%; 
}
.usp-text{
	width: 40%; 
}

/*secure site---------*/ 
.ssl-svg{ 
	width:400px; 
	height: auto; 
}
/*fast website-------------*/ 
.spiceness{ 
	position: relative; 
	z-index: -10; 
}

.spice-flex{ 
	width: 100%; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-wrap: wrap; 
}
 .spiceMedium, .spiceHot{ 
 position: relative; 
	padding: 100px 0 100px 0; 
	width: 300px;
	z-index: -3;
	margin: 30px 0; 
}
.spiceMedium p{ 
	position: relative; 
	top: 160px; 
	text-align: center; 
	z-index: 100; 
	font-size: 18pt; 
	font-weight: 500; 
}
.spiceMedium p span{ 
	font-size: 12pt; 
	color: rgba(29,30,34,1.00);
}
.spiceHot p{ 
	position: relative; 
	top: 160px; 
	text-align: center; 
	z-index: 100; 
	font-size: 18pt; 
	font-weight: 500; 
}
.spiceHot p span{ 
	font-size: 12pt; 
	color: rgba(29,30,34,1.00);
}



 #circleMedium, #circleHot{
    height: 165px;
    width: 165px;
   box-shadow: 10px 10px 9px rgba(0,0,0,0.16), -10px -10px 9px rgba(255,255,255,0.76); 
    border-radius: 50%;
    position: absolute;
    top:50%;
    left: 50%;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1;
}

 #circleMedium2, #circleHot2{
    height: 196px;
    width: 196px;
	border: solid 20px rgba(245,245,245,1.00); ; 
	box-shadow: 10px 10px 9px rgba(0,0,0,0.16), -10px -10px 9px rgba(255,255,255,0.76);
    border-radius: 50%;
    position: absolute;
    top:50%;
    left: 50%;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1;
}
#counterMedium{
    position: absolute;
    top:50%;
    left: 50%;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 9;
}

#counterHot{
    position: absolute;
    top:50%;
    left: 50%;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 9;
}

/*portfolio-------*/ 
.portfolio>div{ 
	width: 100%; 
	display: flex; 
	justify-content: center; 
	flex-direction: row; 
	flex-wrap: wrap; 
	margin-top: -20px; 
}
.portfolio-container{ 
	padding: 20px 20px 60px 20px; 
	width: 95%; 
	max-width: 300px;
	height: auto; 
	position: relative; 
	margin: 40px 40px; 
	transition: transform 0.5s; 
	transition-timing-function: ease-in-out; 
}

@media (max-width: 300px){ 
	.portfolio-container{ 
	
		margin: 40px 5px; 
	}
}
.portfolio-container:hover{ 
	transform: scale(1.1,1.1); 
}
.portfolio-container>*{ 
	width: 100%; 
	display: block; 
	margin: 0 auto; 
}
.portfolio-container img{ 
	max-width: 300px; 
	width: 100%;
	height: 200px; 
	object-fit: cover; 
}
.portfolio h3{ 
	margin-top: 20px; 
	

}
.portfolio-container svg{ 
	position: relative; 
	top: 7px; 
}
.portfolio-container a{ 
	display: inline; 
	padding: 10px 70px; 
	position: relative; 
	left:0%;
	top: 30px; 
}

/*web design faq*/ 

.question-container{ 
	width: 80%; 
	margin: 30px auto; 
	position: relative; 
	height: auto; 
}
.question-container:hover{ 
	color: rgba(1,191,154,1.00);
	cursor: pointer; 
}
.question-container>div{ 
	display: flex; 
	flex-direction: row-reverse; 
	justify-content: space-between; 
	align-items: center; 
	
}
.question-container>div div:nth-child(2){ 
	width: 80%; 
} 
.question-container h5{ 
	font-weight: 500; 
	font-size: 20pt; 
	padding: 5px 0 15px 0; 
	margin-left: 30px; 
	
}
.question-container>div div:nth-child(1) { 
	width: 40px; 
}
.question-container>div:nth-child(1) svg:nth-child(1){ 
	position: absolute; 
	right: 30px; 
	top: 15px; 
	z-index: 3; 
}
.question-container>div:nth-child(1) svg:nth-child(2){ 
	position: absolute; 
	right: 30px; 
	top: 0px; 
	z-index: 3; 
	
}
.question-container p{ 
	margin-left: 30px; 
	width: 90%;
	max-width: 800px; 
	padding: 0 0 20px 0; 
	margin-top: -5px; 
}

/*footer------------*/ 
#footer{
	background-color: rgba(29,30,34,1.00); 
	padding: 30px 0; 
	display: flex; 
	justify-content: center; 
	align-items: flex-end; 
	flex-wrap: wrap-reverse; 
} 
#footer>div{ 
	margin: 20px 20px; 
	height: auto; 
}
.company{ 
	width: 400px;
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
}
.company img{ 
	display: block; 
	margin: 0 auto; 
}
.company h6{ 
}
.footer-section-subheading{ 
	color: white; 
	font-family: 'roboto', sans-serif; 
	font-size: 14pt; 
	font-weight: 400; 
	letter-spacing: 2px; 
	text-align: center; 
}

.contact{ 
	width: 400px; 
}

.contact div{ 
	margin: 0 auto 20px auto;  
	width: 320px; 

	
}
.contact h3{ 
	color: white; 
	font-size:18pt; 
	margin-bottom: 5px; 
}

.contact a{ 
	color: #c7c7c7; 
	text-decoration: none; 
	font-family: 'roboto', sans-serif; 
	letter-spacing: 1px; 
	display: block; 
	margin-bottom: 3px; 
}

.contact a:hover{ 
	color:rgba(1,191,154,1.00);  
}
.contact object{ 
	position: relative; 
	top: 6px; 
	right: 2px; 
}

.footer-quote-form {
	width: 400px; 
}
.footer-quote-form>div{ 
	
	width: 320px; 
	margin: 0 auto; 
}
.footer-quote-form h3{ 
	color: white; 
	font-size:18pt; 
	margin-bottom: 5px; 
}

.footer-quote-form form input{ 
	display: block; 
	margin: 10px 0; 
	width: 320px;
	height: 40px;
	background-color: #1D1E22; 
	border-bottom: solid 3px rgba(1,191,154,1.00); 
	border-top: none; 
	border-left: none; 
	border-right: none; 
	color: white; 
	font-size: 12pt; 
	letter-spacing: 1px; 
}
.footer-quote-form form textarea{ 
	display: block; 
	margin: 10px 0; 
	width: 320px;
	height: 70px;
	background-color: #1D1E22; 
	border-bottom: solid 3px rgba(1,191,154,1.00); 
	border-top: none; 
	border-left: none; 
	border-right: none; 
	color: white; 
	font-size: 12pt; 
	letter-spacing: 1px; 
}
.footer-quote-form form input:focus{ 
	border-bottom:solid 5px rgba(1,191,154,1.00); 
	color: white; 
	font-size: 12pt; 
	letter-spacing: 1px; 
}
.footer-quote-form form textarea:focus{ 
	border-bottom:solid 5px rgba(1,191,154,1.00); 
	color: white; 
	font-size: 12pt; 
	letter-spacing: 1px; 
}
.footer-quote-form form button{ 
	background-color: rgba(1,191,154,1.00); 
	padding: 10px 40px; 
	color: white;
	border: none; 
	border-radius: 30px; 
	margin: 5px 0 0 180px; 
	font-size: 12pt; 
	font-family: 'roboto', sans-serif; 
	letter-spacing: 2px; 
	box-shadow: 5px 5px 5px rgba(0,0,0,0.16);
	cursor: pointer;
}

.footer-quote-form form button:hover{ 
	filter:saturate(150%); 
}
::placeholder, label{ 
	color: #C7C7C7;  
	font-size: 12pt; 
	font-family: 'roboto', sans-serif; 
	letter-spacing: 2px; 
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #C7C7C7;  
	font-size: 12pt; 
}
::-moz-placeholder { /* Firefox 19+ */
 color: #C7C7C7; 
	font-size: 12pt; 
}
.selection label{
	display: inline-block;
	margin-bottom: 10px;
}
.selection{	
	margin: 20px 0 0 0; 
	width: 320px;
	background-color: #1D1E22; 
	border-bottom: solid 3px rgba(1,191,154,1.00); 
	border-top: none; 
	border-left: none; 
	border-right: none; 
	color: white; 
	font-size: 12pt; 
	letter-spacing: 1px; 
}
.selection select { 
	width: 240px;
	font-size: 12pt;
	border: 0;
	color: rgba(1,191,154,1.00); 
	background-color: rgba(0,0,0,0);
}

/*copyright-----------------*/ 
.copyright{ 
background-color:black;
padding: 7px 0; }

.copyright p{ 
	color: white; 
	text-align: center; 
	font-family: 'roboto',sans-serif; 
	letter-spacing: 1px; 
}

/*rocket-------*/ 

.rocket{ 
	animation-name: rocket-animation; 
	animation-duration: 4s; 
	animation-iteration-count: infinite;
		transform-box: fill-box;
  transform-origin: center;
	position: absolute; 
	z-index: 10; 
}

@keyframes rocket-animation{ 
	4%{transform: translateX(-1px); }
	5%{ transform:translateX(1px);}
	6%{transform: translateX(-1px); }
	7%{ transform:translateX(1px);}
	8%{transform: translateX(-1px); }
	9%{ transform:translateX(1px);}
	10%{transform: translateX(-1px); }
	11%{transform: translateX(-1px); }
	12%{ transform:translateX(1px);}
	13%{transform: translateX(-1px); }
	14%{ transform:translateX(1px);}
	15%{transform: translateX(-1px); }
	16%{ transform:translateX(1px);}
	17%{transform: translateX(-1px); }
	18%{transform: translateX(-1px); }
	19%{transform: translateX(-1px); }
	20%{ transform:translateX(1px);}
	21%{transform: translateX(-1px); }
	22%{ transform:translateX(1px);}
	23%{transform: translateX(-1px); }
	24%{ transform:translateX(1px);}
	25%{transform: translateX(-1px); }
	100%{transform:translateY(-220px);}
}

.dollar-coins{ 
	animation-name: arrow-animation; 
	animation-duration: 4s; 
	animation-iteration-count: infinite;
	transform-box: fill-box;
  transform-origin: center;
}

@keyframes arrow-animation{ 
	0%{ opacity:0; }
	25%{ opacity:0; }
	100%{ opacity:1;}
}

.question-mark-seo{ 
	animation-name: question-mark-seo; 
	animation-duration: 10s; 
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform-box: fill-box;
  transform-origin: center;
}
@keyframes question-mark-seo{ 
	0%{ transform: rotate(0); }
	100%{ transform: rotate(360deg);}
}
.seo-progress-bar{ 
	x1:188;  y1:363;  x2:297.9; y2:363.2; 
}