@charset "utf-8";
/* CSS Document */

    body{
      margin: 0;
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;
		font-size: 20px;
	overflow-x: hidden;
gap: 20px;
		 font-family: 'Poppins', sans-serif;


    }

h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* Uses the bold weight imported in Step 1 */
}
    .desktop-div {
      display: flex;
		 width: 100%;
		height: 100%;
      flex-direction: column;
     gap: 20px;

		align-items: center;
    }

    .top {
     position: flex;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      z-index: 1000;
      box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.3);
	
    }

    .topline {
      background-color: lightblue;
      padding: 5px 15px;
      text-align: right;
      font-size: 14px;
    }

    .topmid {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px 45px;
    }

    .logo {
		display: flex;
	width: auto;
		height: auto;
flex-direction: column;
      font-size: 5vh;
      font-weight: bold;
	
    }
.logobottom{
	font-size: 16px;
	text-decoration: none;
}

    .nav {
      display: flex;
      gap: 15px;
		background-color: limegreen;
	
    }

    .nav .link {
      cursor: pointer;
		padding: 10px;
			color: #fff;
		font-weight: 400;
			 border: 1px solid transparent;
		border-radius: 4px;
		
    }

 .nav .link:hover{
      cursor: pointer;
	 background-color: gold;
	 border: 1px solid #ddd;
    }

  

    .container {
		
      display: flex;
		width: 100%;
		height: auto;
      gap: 10px;
      padding: 20px;
		align-content: center;
		justify-content: space-around;
		background-color: #f3f3f3;
		margin-top: 10%;
    }

    .left{
		display: flex;
		
      width: auto;
      min-height: calc(100vh - 140px);
		
		flex-direction: column;
      padding: 15px;
		gap: 20px;
		
    }
	  .lleft{
		display: flex;
		position:fixed;
		left: 0;
      width: auto;
      min-height: calc(100vh - 140px);
		
		flex-direction: column;
      padding: 15px;
		gap: 20px;
    } 
	  .right{
		display: flex;
      width: 20%;
      min-height: calc(100vh - 140px);
		
		flex-direction: column;
   color: #fff;
      padding: 15px;
		gap: 20px;
    }
.page-top{
	display: flex;
	width: 100%;
	height: auto;
	
}



.guides-page-sections {
     
      display: flex;
		width: 65%;
	height: auto;
	background-color: #FFF;
      flex-direction: column;
				box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
		gap: 20px;
	
    }


    .sections {
     
      display: flex;
		width: 100%;
		background-color: #FFF;
      flex-direction: column;
				box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
		gap: 20px;
		
	
border-radius: 3px;
    }

.guide-row{
	display: flex;
	width: 65%;
	height: auto;
	justify-content: space-between;
	align-items: center;
margin-top: 50px;	
	
}
.section-one{
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	padding: 20px;
	
	
}
.section-onee{}
    .section-two {
		display: flex;
     
      padding: 20px;
    
      
		text-align: center;
		flex-direction: column;
		justify-content: center;
      align-items: center;
    }
	  .info{
		  background-color: #f3f3f3;
		  font-size: 22px;
		  color: darkslategray;
		  font-weight: bold;
		  padding: 10px;
		  
}
.back{
	
	background-color: #f3f3f3;
	border-radius: 50% 50%;
	border: 1px solid #ddd;
	padding: 20px;
}
	  .adv{width: 900px;
	  height: 90px;
		  border: 1px solid #000;
		  border-radius: 6px;
	  }
    

    .about-page {
		
      text-align: center;
      font-size: 18px;
      
      padding: 10px;
    }

    .main-blog-img{
		
      max-width: 100%;
		height: auto;
		
      
     
      
    }
	  .social{display: flex;
	  width: auto;
		  height: auto;
		  padding: 10px;
		  gap: 20px;
		 
	  }
	  .social-icon{width: 30px;
	  height: 30px;
		  background-color: #fff;
		  border: 1px solid #000;
		  border-radius: 20px;
		  padding: 10px;
	  }
	  .blog-intro{width: 40%;}
	  
	 .steps{
		  display: flex;
		  width: 85%;
	  height: auto;
		  padding: 10px;
		  gap: 10px;
		  flex-direction: column;
		  align-items: center;
		  
		  /*background-color: #F3F3F3;*/
		  background-color: #f8f8f8;
		 
	  }
	  .step-block{display: block;
	  max-width: 100%;
		  height: auto;
		  
		  padding: 10px;
		   background-color: #Fff;
		  border: 1px solid #ddd;
		  border-radius: 6px;
		  
	  }
	  .step-number{
		 text-align: left;
		  max-width: 100%;
		  font-size: 2.5vh;
		  font-weight: 1000;
		  background-color: lightblue;
	  border: 1px solid #ddd;
		 padding: 20px;
		
		 
		  
	  }
	  .step-instructions{
		  
		width: 100%;
		  background-color: #fff;
		  border-radius: 6px;
		  text-align: left;
		 
		 
	  }
	  .post-block,.guides-block{
		  display: flex;
		  width: 60%;
		  height: auto;
		  background-color: #fff;
		  flex-direction: column;
		  padding: 10px;
		  gap: 20px;
		  border: 1px solid #ddd;
		  border-radius: 8px;
		
	  }  .post-block-left{
		  display: flex;
		  width: 100%;
		  height: auto;
		  background-color: #fff;
		  flex-direction: column;
		  padding: 10px;
		  gap: 20px;
		  border: 1px solid #ddd;
		  border-radius: 8px;
		
	  }
	
	  .pb-cont{}
	  .gbcont{}
	  .section-title{
		  font-size: 16px;
		  font-weight: bold;
	  }
	  .post-title{font-weight: bold;}
	  .disclaimer{background-color: palegoldenrod;
	  width: auto;
		  height: auto;
		  padding: 20px;
		  
	  }
.featured-guides{
	display: flex;
	width: 65%;
	height: auto;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
    padding: 10px;
	align-items: center;
	
	
}
.featured-right{
	
	display: flex;
	width: 100%;
	height: auto;
	justify-content: space-between;
	padding: 10px;
}
.featured-left{display: flex;
	width: 40%;
	height: auto;
	align-items: flex-start;
}
.fgc{
	display: flex;
	width: 200px;
	height: 60px;
	background-color: #fff;
	flex-direction: column;
	 border: 1px solid #ddd;
	padding: 20px;
	gap: 10px;
	
}
.featured-title{
	display: flex;
	width: 100%;
	font-size: 1.5em;
	font-weight: bold;
}


.contact-section{display: flex;

width: 500px;
	height: 500px;
	border: 1px solid #ddd;
}

.contact-us-section{
	width: 100%;
	height: 300px;
	justify-content: space-between;
	border: 1px solid #ddd;
	border-radius: 5px;
	
	
}

.contact-us-section-left{
	width: 30%;
	height: 300px;
	border: 1px solid #ddd;
	
}

.contact-us-section-right{
	
	width: 65%;
height: 300px;
}



.hc-index-sections{
	display: flex;
	width: 100%;
	height: auto;
	background-color: #f3f3f3;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	gap: 20px;
}
.hc-container{display: flex;
		width: 100%;
			height: 100%;
			background-color: #f3f3f3;
	flex-direction: column;
	gap: 20px;
			
		}
		.hc-top{display: flex;
		width: 100%;
			height: auto;
			background-color: #000;
			padding: 20px;
			flex-direction: column;
			justify-content: center;
		}
		.hc-logo{
			font-size: 2.5em;
			color: #fff;
		
		}
		.hc-body{display: flex;
		width: 100%;
			height: 90vh;
			background-color: #CCCCCC;
			flex-direction: column;
			align-items: center;
			gap: 50px;
			
		}
.row{
	display: grid;
		width: 65%;
			height: auto;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-auto-rows: auto;
	padding: 20px;
	gap: 20px;
	
}
.row > a{
	display: flex;
    text-decoration: none; /* Removes default underline */
    color: inherit;        /* Keeps your text color */
	
}
.item-container{
	
	border: 1px solid #ddd;
	transition: box-shadow 0.3s;
	background-color: #fff;
	border-radius: 5px;
	padding: 20px;
	
}
.item-container:hover{
	
	
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
	
	
	
}
.item-img{}
.item-name{font-size: 18px;
font-weight: bold;
}
		.guides{display: flex;
		width: 40%;
			height: auto;
			
			flex-direction: column;
			gap: 20px;
		}
		
		
		.guides-page-container{
			display: flex;
		width: 100%;
			height: auto;
			flex-direction: column;
align-items: center;
			background-color: #f3f3f3;
			box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);	
}



.guides-sections {
     
      display: grid;
		width: 65%;
	height: auto;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
      justify-content: center;
			padding: 20px;
		gap: 20px;
	
    }
.gpt{
	display: flex;
	width: 100%;
	height: 300px;
	align-items: center;
	background-color: lightblue;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
	
}
.gpb{
	display: flex;
	width: 100%;
	height: auto;
}

.guide-cont{
			
			border: 1px solid #ddd;
			background-color: #fff;
			border-radius: 4px;
			align-items: center;
	padding: 10px;
			margin-bottom: 20px;
	transition: background-color 0.3s;
		}
.guide-cont:hover{
			
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4);

		}




		.guides-page-left{width: 20%;
		height: auto;
			
		}
.guide-cont-right{flex-direction: column;}
		.guides-page-right{width: 55%;
		height: auto;
		}
		
		.guide-img{
			
			font-size: 4vh;
			padding: 10px;
		}
		.guide-title{
			font-size: 18px;
			font-weight: bold;
		}


.bar,.guides-bar,.contact-us-bar,.faq-bar{display: flex;
	width: 100%;
	height: 150px;
	background: linear-gradient(to bottom right, #667eea, #764ba2);
	justify-content: center;
	align-items: center;
	padding: 20px;
}
.guide-bar{
	display: flex;
	max-width: 100%;
	height: 150px;
	
	background: linear-gradient(to bottom right, #667eea, #764ba2);
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 20px;
	
}
.guide-bar-mid{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	align-content: center;
	
	align-items: center;
	
	
}
		.page-title{
			
			font-size: 5vh;
		font-weight: bold;
			color: #FFF;
		}
		footer{width: 100%;
		height: auto;
		background-color: #000;
			color: #fff;
			text-align: center;
		}
		
		.post-block-left{
		  display: flex;
		  width: 100%;
		  height: auto;
		  background-color: #fff;
		  flex-direction: column;
		  padding: 10px;
		  gap: 20px;
		  border: 1px solid #ddd;
		  border-radius: 8px;
		
	  }



	  p{
		 
		  line-height: 1;
		 
		 
	  }
	  a{text-decoration: none;
	  color: navy;
	  }


/* how to page container start */
.how-to-customize-page-container{
	display: flex;
	width: 100%;
	height: auto;
	margin-top: 50px;
	
}

/* how to page container end */


/* contact us page start*/


.contact-form{display: flex;+

width: 100%;
height: auto;
	flex-direction: column;
	padding: 10px;
	gap: 20px;
}
/* contact us page end*/


/* faq page start*/
.faq-container{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	
	
}
.faq-sections{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	align-items: center;
	
}
.faq-section-one{
	display: flex;
width: 100%;
	height: auto;
	justify-content: center;
}
.faq-section-two{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	gap: 20px;
}
.block{
	display: flex;
	width: 700px;
height: auto;
	flex-direction: column;
	padding: 10px;
	gap: 10px;
	
}
.upq{
	
	background-color: gray;
	padding: 10px;

}
.downa{
	background-color: lightgray;
padding: 10px;

}
/* faq page end*/





/* contact us page start*/


.contact-us-container{
	
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	
	

}
.contact-us-form-container{
	
	display: flex;
	width: 65%;
	height: auto;
	background-color: #fff;
	flex-direction: column;
	
	

	

}
.contact-us-sections{
	display: flex;
	width: 100%;
	height: auto;
	background-color: #fff;
	justify-content: space-around;
	margin-top: 20px;
	
	
}
.contact-us-left{
	display: flex;
	width: 40%;
	background-color: #f3f3f3;
	border: 1px solid #ddd;
	justify-content: center;
	align-items: center;
	
	
}
.contact-us-right{
	display: flex;
	width: 40%;
	background-color: #f3f3f3;
flex-direction: column;
	align-items: center;
	border: 1px solid #ddd;
	
	
}
.cu-right{
	
	background-color: #fff;
	border-color: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
}

/* contact us page end*/







/* footer start*/


.footer{display: flex;
	width: 100%;
		align-items: center;
		background-color: #000;
		color: #fff;
		padding: 10px;
		gap: 20px;
		
		
	}
	.company{display: flex;
	width: 500px;
		align-content: center;
		align-items: center;
		flex-direction: column;
	}
	.company-logo{display: flex;
	width: 200px;
		height: 200px;
		align-content: center;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		border: 1px solid #000;
	
	
	}
		.company-link{
			display: flex;
			width: auto;
			height: auto;
			padding: 10px;
			gap: 100px;
			
		}
	.footer-links{display: flex;
	
		gap:20px;
	
	}ƒ
	.bfl{display: flex;
		width: auto;
		flex-direction: column;

	}
	.fl-title{display: flex;
	
	
	}

/* footer end*/


/* porting out page start*/
.dept{
	
	font-size: 16px;
	font-weight: bold;
}
/* porting out page end*/