.form-data,.contact-address-data{
	font-weight: bold;
	color:#200246;
	font-size: 16px;
}

.work-title{
 text-align: center;
 margin-top: 10px;
 font-weight: bold;
 
}
.work-title a{
color:#493a47;
}

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

.work-image{
	width:100%;
}
.portfolio-image{
width: 100%;
height: 250px;
}
.img-content{
	width: 95%;
	margin: 10px auto;
	height:400px;
	border: 4px solid #ccd3cc;
	border-radius: 5px;
}
.link-content {
	color: #0d7c20;
}

#footer{
	width:100%;
	background-color: #302e2e;
	padding:1px;
}

.link-content:visited, .link-content:active,.link-content:hover {
	color: #69836d;
}
.footer-section{line-height:1.6;color:#fff;display: flex;
  justify-content: center;}
.footer-section a{color:#188129;}
.contact-box {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  padding: 5px;
  border: 2px solid #007BFF;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 10px;
}

    .contact-box svg {
      width: 22px;
      height: 22px;
      stroke: #007BFF;
    }

    .contact-box a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      font-size: 16px;
    }

    .contact-box a:hover {
      color: #007BFF;
    }

.contact-address-data,.contact-address-content{
  display: inline-block;
  vertical-align: top; 
  width:40%;
}

.form-content{
  border: 1px solid #cada72;
  border-radius: 5px;
  padding:10px;
}

.page-header{
	position:relative; 
	top:0; 
}
.error-Div{
    background-color: #EE4B2B;
    color:#fff;
    padding:2px;
    font-size: 14px;
    display: none;
}
.success-Div{
    background-color: #2b59ee;
    color:#fff;
    padding:2px;
    font-size: 14px;
    display: none;
}

.spinner-container{
	 display: none;
}

#spinner {
	   width: 20px;
	   height: 20px;
	   border: 5px solid #f3f3f3;
	   border-top: 5px solid #3498db;
	   border-radius: 50%;
	   animation: spin 1s linear infinite;
   }
   .spinner-text { 
	   font-size: 16px; color: #333;
	   
	}
	#spinner,.spinner-text { 
	   display:inline-block;
	}
   

.button-1 a{
	color:#fff;
}

.button-1:hover{
	background-color: #9a81b3;
	border: 2px solid #626275;
}



textarea{
height:120px;
border-radius:5px;
border-color: #8ae25e;
}

input{
	height: 25px;
	border-radius:5px;
	border-color: #8ae25e;
}

button{
	height: 35px;
	border-radius:5px;
	background-color: #287720;
	color: #fff;
	cursor: pointer;
}

.form{
	width:100%;
}

.contact-data,.contact-form{
   display: inline-block;
}


#content-1{
	width:100%;
	background-color: #fff;
}

a{
 text-decoration: none;
 color:#000;
}

#header-main{
   width:100%;
	margin: 0;
    padding: 0;
}

#header-fixed{
 width:100%;
 margin: 0 auto;
 height: 100px;
 border-top: 5px solid #726a6a;
 border-bottom: 5px solid #68418d;
 background: linear-gradient(to right, #eeebeb, #a08bd1);
/*background-image: repeating-linear-gradient(
    25deg,             
    #c3cfb6,              
    #cae6b1 2px,          
    transparent 1px, 
    transparent 5px   
  );*/
}

#content-area{
	width:100%;
}

@media (max-width: 768px) { /* Styles for mobile devices */ 
	body {
		font-family:'Poppins','Georgia', Verdana, Geneva, Tahoma, sans-serif; 
		font-size: 11px; 
		Line-height: 160%;
		padding: 0px;
		margin: 0px 0px 0px 0px;
		height: 100%; /* 100% of the viewport height */
		background-color: #fff;
}

#portfolio-div{
	width:100%;
	height: auto;
}

.portfolio-work{
	width:100%;
	border-radius:3px;
	margin: 15px auto;
	border: 1px solid #706858;
	border-radius: 5px;
	background-color: #d5d8e7;
}
 /* CSS for heading tags on mobile devices */
h1 {
    font-size: 1.4em; /* Smaller than the default to fit mobile screens better */
}

h2 {
    font-size: 1.3em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 0.9em;
}

label.error {
    color: red;
    font-size: 12px;
    margin-bottom: 1px;
    display: block;
}

#header{
 width:100%;
 margin: 0 auto;
 height: 80px;
 position: relative;
}

#header-main-content-1{
	width:100%;
	padding:30px 0px;
	background-image: linear-gradient(to bottom, #eff0ee, #8d8e92);
}

#header-content-1{
	width:90%;
	margin: 0 auto;
	color: #fff;
}


#Logo{
	margin:0 auto;
    font-size: 22px;
	position: absolute;
	top:0px;
	float: left;
	height: 80px;
}

#Logo,.navigation{
	display: inline-block;
}
.navigation {
   list-style: none;
   padding: 0;
   margin-top:70px;
   text-align: right;
   float: right; /* Aligns the navigation to the right */
}

.navigation li {
   display: inline-block; /* Or use display: inline */
   margin-right: 1px; /* Adjust spacing as needed */
   background-color: #fff;
   padding:4px;
   border-bottom: 4px solid #a772da;
}

.navigation li.active {
   border-bottom: 8px solid #5398d1;
}

.navigation li a{
	text-decoration: none;
	color: #0d4118;
	font-size: 12px;
	padding:4px;
}

.navigation li a:hover {
   text-decoration: none;
}

.navigation li:hover .sub-menu {
            display: block; /* Shows sub-menu on hover */
}

.sub-menu {
   list-style: none;
   display: none;
   padding: 0;
   margin: 0;
   margin-left: 0;
   margin-top:10px;
   position: absolute;
   background-color: white;
   width: 120px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
   z-index: 1000;
}

.sub-menu li {
   display: block;
   background-color: #fff;
   padding:5px;
   border-bottom: 4px solid #000;
}

.sub-menu li.active {
   border-bottom: 4px solid #65f07c;
}

.sub-menu li a{
	text-decoration: none;
	color: #000;
	display: block;
}

.sub-menu li a:hover {
   text-decoration: none;
}

.loading-header{
	font-size:18px;
	color:#fff;
	font-weight: bold;
	display: none;
}

.logo-header{
 width:120px;
 height:60px;
 margin-left:5px;
border-style: solid;
border-width: 0px 4px 0px 4px; /* top right bottom left */
border-color: #aab2c4;
}

.logo-small{
  width: 20px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
   margin:4px;
}

.footer-icons{
	margin:2px;
	padding:0px 1px;
	width:30px;
	height:30px;
}

.header-title{
  font-size: 30px;
  color:#fff;
  line-height: 32px;
}

.header-title-1{
  font-size:20px;
  color:#fff;
  margin:10px;
  padding:5px;
  line-height: 32px;
}

.content-description-2{
  font-size: 14px;
  color:#fff;
  margin:10px;
  line-height: 25px;
}

.content-description-header{
  font-size: 14px;
  color:#000;
  margin:10px;
}

.header-body-1{
  font-size: 14px;
  color:#000;
  margin:10px;
}

.button-1{
	padding:5px 10px;
	background-color: #985ed3;
	color: #fff;
	margin:10px;
	display: inline-block; 
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}

.button-2{
	padding:5px 10px;
	background-color: #fff;
	color: #000;
	margin:10px;
	display: inline-block; 
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}

.button-2:hover{
	background-color: #ebe895;
}


.header-content-2{
	text-align:center;
	font-size: 12px;
	font-weight: bold;
	margin: 5px;
}

.header-content-3{
	text-align:left;
	font-size: 12px;
	font-weight: bold;
	margin: 5px;
	color:#200246;
}

.header-content-5{
	text-align:left;
	font-size: 14px;
	font-weight: bold;
	color:#200246;
}


#services-section{
 width:90%;
 margin: 0 auto;
 padding:20px;
}

#blog-content-1{
  width:90%;
 margin: 0 auto;	
 padding:10px;
}

#blog-content-2{ 
  width:90%;
 margin: 0 auto;	
 padding:10px;
}

#blog-content-3{
  width:90%;
 margin: 0 auto;
 padding:10px;
}

.services-1{
	width:28%;
	margin:1px;
	padding:1%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-2{
	width:28%;
	margin:1px;
	padding:1%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-3{
	width:28%;
	margin:1px;
	padding:1%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-4{
	width:28%;
	margin:1px;
	padding:1%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-5{
	width:28%;
	margin:1px;
	padding:1%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-6{
	width:28%;
	margin:1px;
	padding:1%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.blog-services-1{
	width:25%;
	margin:5px;
	padding:5px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f0ebeb, #e09ad1);
}

.blog-services-2{
	width:25%;
	margin:5px;
	padding:5px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f0ebeb, #e09ad1);
}

.blog-services-3{
	width:25%;
	margin:5px;
	padding:5px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f0ebeb, #e09ad1);
}
.services-1,.services-2,.services-3{
	display: inline-block;
}

.services-4,.services-5,.services-6{
	display: inline-block;
}

.blog-services-1,.blog-services-2,.blog-services-3{
	display: inline-block;
}

.content-description-1{
   color:#000;
	font-size: 14px;
	line-height: 25px;
	margin:10px;
}

#about-us-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#webdesign-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#webdevelopment-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}


#logodesign-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#seo-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#wordpress-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#ecommerce-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#blog-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}

#contact-us-section{
	width: 90%;
	margin: 0 auto;
	padding:10px;
}


#footer-content{
	width: 80%;
	margin:0 auto;
}

.contact-data{
	vertical-align: top; 
	width:150px;
	font-weight: bold;
}

.contact-form{
 width:200px;
}

.contact-us-div{
	margin:5px;
}

.form-data{
 width:100%;
}

.form-content{
  vertical-align: top; 
  width:60%;
  margin-left:20%;
}


#site-map
{
	font-size: 11px;
	color: #b1acac;
	margin-left:1%;
	margin-top:1%;
}
#site-map ul {
    list-style: none;
}

#site-map ul li{
	cursor: pointer;
}

#site-map ul li a{
	color:#b1acac;
}
#site-map li::before {
    content: "➤"; /* Unicode arrow */
    margin-right: 8px;
}

#follow-us
{	font-size: 11px;
	color: #b1acac;
	margin-left: 1%;
	margin-top:1%;
}

#follow-us a{
	color:#b1acac;
}

#follow-us ul {
    list-style: none;
}

#follow-us ul li{
	cursor: pointer;
}
#follow-us li::before {
    content: "➤"; /* Unicode arrow */
    margin-right: 8px;
}

#our-services
{
	font-size: 11px;
	color: #b1acac;
	margin-left: 1%;
	margin-top:1%;
}

#our-services ul {
    list-style: none;
}

#our-services ul li{
	cursor: pointer;
}

#our-services ul li a{
	color:#b1acac;
}

#our-services li::before {
    content: "➤"; /* Unicode arrow */
    margin-right: 8px;
	cursor: pointer;
}

#site-map, #follow-us, #our-services,#follow-us-icons{
	display: inline-block;
}

#follow-us-icons{
	font-size:15px;
	color: #b1acac;
	vertical-align: top;
	margin-top:1%;
}

.follow-us-logo li{
	vertical-align: top;
	display: inline-block;
	cursor: pointer;
}

}
@media (min-width: 769px) {
body {
		font-family:'Poppins','Georgia', Verdana, Geneva, Tahoma, sans-serif; 
		font-size: 14px; 
		Line-height: 160%;
		padding: 0px;
		margin: 0px 0px 0px 0px;
		height: 100%; /* 100% of the viewport height */
		background-color: #fff;
}

#portfolio-div{
	width:100%;
	height:auto;
}

.portfolio-work{
	width:45%;
	display: inline-block;
	margin:20px;
	border: 1px solid #706858;
	border-radius: 5px;
	background-color: #d5d8e7;
}



label.error {
    color: red;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

#header{
 width:80%;
 margin: 0 auto;
 height: 80px;
 position: relative;
}

#header-main-content-1{
	width:100%;
	padding:30px 0px;
	background-image: linear-gradient(to bottom, #eff0ee, #8d8e92);
}

#header-content-1{
	width:80%;
	margin: 0 auto;
	color: #fff;
}

#header-content-4{
	width:80%;
	margin: 0 auto;
	padding:50px 0px;
}


#decoration-main{
	/* display: none;*/
	padding:10px;
}

.decoration-1{
	width:18%;
    height:100px;
	background-color: #c5c9fa;
	border: .5px solid #fff;
	margin:2px;
	border-radius:50%;
}

.decoration-2{
	width:18%;
    height:100px;
	background-color: #c5c9fa;
	border: .5px solid #fff;
	margin:2px;
	border-radius:50%;
}

.decoration-3{
	width:18%;
    height:100px;
	background-color: #c5c9fa;
	border: .5px solid #fff;
	margin:2px;
	border-radius:50%;
}

.decoration-4{
	width:18%;
    height:100px;
	background-color: #c5c9fa;
	border: .5px solid #fff;
	margin:2px;
	border-radius:50%;
}

.decoration-5{
	width:18%;
    height:100px;
	background-color: #c5c9fa;
	border: .5px solid #fff;
	margin:2px;
	border-radius:50%;
}

.decoration-1,.decoration-2,.decoration-3,
 .decoration-4,.decoration-5
 {
	display: inline-block;
}

/* CSS for heading tags */
h1 {
    font-size: 1.5em; /* Default: 2em */
}

h2 {
    font-size: 1.3em; /* Default: 1.5em */
}

h3 {
    font-size: 1.1em; /* Default: 1.17em */
}

h4 {
    font-size: 1em; /* Default: 1em */
}

h5 {
    font-size: 0.9em; /* Default: 0.83em */
}

h6 {
    font-size: 0.8em; /* Default: 0.67em */
}

#Logo{
	margin:0 auto;
    font-size: 40px;
	padding: 0px;
	position: absolute;
	top:0px;
	float: left;
	height: 80px;
}

#Logo,.navigation{
	display: inline-block;
}
.navigation {
   list-style: none;
   padding: 0;
   margin-top:63px;
   text-align: right;
   float: right; /* Aligns the navigation to the right */
}

.navigation li {
   display: inline-block; /* Or use display: inline */
   margin-right: 15px; /* Adjust spacing as needed */
   background-color: #fff;
   border-bottom: 4px solid #a772da;
   padding:6px 4px;
}

.navigation li.active {
   border-bottom: 8px solid #5398d1;
}

.navigation li a{
	text-decoration: none;
	color: #0a0a0a;
	padding:6px 4px;
}

.navigation li a:hover {
   text-decoration: none;
}

.navigation li:hover .sub-menu {
    display: block; /* Shows sub-menu on hover */
}

.sub-menu {
   list-style: none;
   display: none;
   padding: 0;
   margin: 0;
   margin-left: 0;
   margin-top:10px;
   position: absolute;
   background-color: white;
   width: 150px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
   z-index: 1000;
}

.sub-menu li {
   display: block;
   background-color: #fff;
   padding:5px;
   border-bottom: 4px solid #000;
}

.sub-menu li.active {
   border-bottom: 4px solid #65f07c;
}

.sub-menu li a{
	text-decoration: none;
	color: #000;
	display: block;
}

.sub-menu li a:hover {
   text-decoration: none;
}

.loading-header{
	font-size:18px;
	color:#fff;
	font-weight: bold;
	display: none;
}

.logo-header{
 width:140px;
 height:60px;
 border-style: solid;
border-width: 0px 4px 0px 4px; /* top right bottom left */
border-color: #aab2c4;
}

.logo-small{
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin:4px;
}

.footer-icons{
	margin:2px;
	padding:0px 1px;
	width:40px;
	height:40px;
}

.header-title{
  font-size: 30px;
  color:#fff;
  line-height: 32px;
}
.header-title-1{
  font-size:20px;
  color:#fff;
  margin:10px;
  padding:5px;
  line-height: 32px;
}

.content-description-2{
  font-size: 14px;
  color:#fff;
  margin:10px;
  line-height: 25px;
}

.content-description-header{
  font-size: 14px;
  color:#000;
  margin:10px;
}

.header-body-1{
  font-size: 14px;
  color:#000;
  margin:10px;
}

.button-1{
	padding:5px 10px;
	background-color: #985ed3;
	color: #fff;
	margin:10px;
	display: inline-block; 
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}

.button-2{
	padding:5px 10px;
	background-color: #fff;
	color: #000;
	margin:10px;
	display: inline-block; 
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}

.button-2:hover{
	background-color: #ebe895;
}


.header-content-2{
	text-align:center;
	font-size: 20px;
	font-weight: bold;
	margin: 5px;
}

.header-content-3{
	text-align:left;
	font-size: 20px;
	font-weight: bold;
	margin: 5px;
	color:#200246;
}

.header-content-5{
	text-align:left;
	font-size: 16px;
	font-weight: bold;
	color:#200246;
}

#services-section{
 width:80%;
 margin: 0 auto;
 padding:20px;
}

#blog-content-1{
  width:80%;
 margin: 0 auto;	
 padding:10px;
}

#blog-content-2{ 
  width:80%;
 margin: 0 auto;	
 padding:10px;
}

#blog-content-3{
  width:80%;
 margin: 0 auto;
 padding:10px;
}

.services-1{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-2{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-3{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-4{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-5{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.services-6{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f7f6f0, #6f9b71);
}

.blog-services-1{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f0ebeb, #e09ad1);
}

.blog-services-2{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f0ebeb, #e09ad1);
}

.blog-services-3{
	width:25%;
	margin:5px;
	padding:15px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #f0ebeb, #e09ad1);
}
.services-1,.services-2,.services-3{
	display: inline-block;
}

.services-4,.services-5,.services-6{
	display: inline-block;
}

.blog-services-1,.blog-services-2,.blog-services-3{
	display: inline-block;
}

.content-description-1{
   color:#000;
	font-size: 14px;
	line-height: 25px;
	margin:10px;
}

#about-us-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#webdesign-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#webdevelopment-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}


#logodesign-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#seo-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#wordpress-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#ecommerce-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#blog-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}

#contact-us-section{
	width: 80%;
	margin: 0 auto;
	padding:10px;
}


#footer-content{
	width: 80%;
	margin:0 auto;
}

.contact-data{
	vertical-align: top; 
	width:150px;
	font-weight: bold;
}

.contact-form{
 width:200px;
}

.contact-us-div{
	margin:5px;
}


.form-data,.form-content{
  display: inline-block;
  vertical-align: top; 
  width:40%;
}

#site-map
{
	font-size: 15px;
	color: #b1acac;
	margin-left:10%;
	margin-top:1%;
}
#site-map ul {
    list-style: none;
}

#site-map ul li{
	cursor: pointer;
}

#site-map ul li a{
	color:#b1acac;
}

#site-map li::before {
    content: "➤"; /* Unicode arrow */
    margin-right: 8px;
	cursor: pointer;
}

#follow-us
{	font-size: 15px;
	color: #b1acac;
	margin-left: 10%;
	margin-top:1%;
}

#follow-us a{
	color:#b1acac;
}

#follow-us ul {
    list-style: none;
}

#follow-us ul li{
	cursor: pointer;
}
#follow-us li::before {
    content: "➤"; /* Unicode arrow */
    margin-right: 8px;
	cursor: pointer;
}

#our-services
{
	font-size: 15px;
	color: #b1acac;
	margin-left: 10%;
	margin-top:1%;
}

#our-services ul {
    list-style: none;
}

#our-services ul li{
	cursor: pointer;
}

#our-services ul li a{
	color:#b1acac;
}
#our-services li::before {
    content: "➤"; /* Unicode arrow */
    margin-right: 8px;
}

#site-map, #follow-us, #our-services,#follow-us-icons{
	display: inline-block;
}

#follow-us-icons{
	font-size:15px;
	color: #b1acac;
	vertical-align: top;
	margin-top:1%;
}

.follow-us-logo li{
	vertical-align: top;
	display: inline-block;
	cursor: pointer;
}

}