/*===========Common========*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}
body
{
	font-family: 'Poppins', sans-serif;
	position:relative;
}

	.modal_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}
	#modal_wrapper_hire_me{display: none;}
	.modal_popup_wrapper{display: none;}
	#modal_wrapper_question{display: none;}
	.modal_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 4em 4em 4em;
	border-radius: 10px;}
	.modal_form{width:100%;display: flex;
		flex-direction: column;
		row-gap: 1em;
		justify-content: center;
		align-items: center;
		text-align: center;}
	.modal_form>h2{text-align:center;font-size: 25px;font-weight: 400;}
	.modal_form>form{display: flex;
	flex-direction: column;font-size: 20px;
	margin-top: 0em;width: 80%;}
	.modal_form>form>label{font-size: 18px; margin-top: 15px;}
	.modal_form>form>input,select,textarea{font-size: 18px;
	padding: 5px;
	margin: 10px 0;
	border: 1px solid #c7c7d0;
	border-radius: 5px;}
	#ask-question-form{width:100%;}
	#ask-question-input{height: 6em;}
	.success_message{margin:2em auto;}
	#subject{height:100px;}
	#submit-detail{margin-top:1.5em;}
	.blog-content>ul>li:before {
	margin-right: 7px;
	content: "";
	background: #169fcc;
	color: white;
	width: 1.8em;
	height: 1.8em;
	text-align: center;
	display: inline-block;
	font-size: 5px;
	font-weight: bold;
	padding: 2px 1px 1px 1px; }
	.close_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 20px; top: 20px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_modal:before{ content: "x"; position: relative; top: -3px; }

	.header
	{
	  width:100%; background-color:#e2ece9; position:absolute;
	  display:flex;
	  justify-content: center;
	  border-bottom:0px solid black; z-index:1;
	}
	.header-navbar
	{
	  width:60%; display:flex; justify-content: space-between;
	  margin:40px 0px 20px 0px;
	}
	.sticky{  width:100%;position:fixed; left:0; top:0; background-color:#e2ece9; z-index:10;
	  display:flex;
	  justify-content: center;
	  border-bottom:0px solid black;
	}
	.navbar-left{ display: flex; justify-content: space-between; background: transparent; }
	.navbar-right{width:auto; display: flex; justify-content: space-between; }
	.navbar-left .fa-bars {font-size: 35px;}
	.menu{padding:10px 10px 10px 10px; margin:0px 25px 0px 0px;}
	.connect{margin:10px 0px 0px 0px;}
	.tgme_widget_login_button{width:90% !important;}
	.menu ul
	{
	  display:flex;
	  align-item:center;
	  justify-content: space-evenly;
	}
	.menu ul li
	{
	  padding:0px 10px 0px 10px;
	  list-style:none;
	}
	.menu ul li a
	{
	  text-decoration:none;
	  padding:3px 10px 3px 10px; color:black;
	}
	#hide{display:none;}
	#show{display:none;}

	.center{text-align:center;}

	.hs-light-yellow {background-color:#ffffb3;}
	.hs-header-color{background-color:#e2ece9;}
	.hs-green {background-color:#fff1e6;}
	.hs-blue {background-color:#eef;}

	.warning{color:orange;}
	.danger{color:red;}
	.success{color:green;}
	.btn{
	border: 1px solid black;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-align: center;
	text-decoration: none;
	}
	.column{display:flex;width: 100%;flex-direction:column;}
	.column-50{display:flex;width: 50%;flex-direction:column;}
	.row{display:flex;flex-direction:row;width: 100%;column-gap: 1em;align-items: center;}
	.js-center{justify-content: center;}

	.line-break{ height: 2px; width: 50%; background:black;margin:10px 0;}
	.btn:hover{background:grey;}
	.btn-small{font-size: 13px;padding: 1px 10px 1px 10px;margin: 0px 5px 5px 0px;height: fit-content;}
	.btn-medium{font-size: 15px; padding: 2px 10px 2px 10px;height: fit-content;}
	.btn-large{font-size: 17px;padding: 10px 20px 10px 20px;height: fit-content;}
	.buttons-tab>.active{background:black;color:white;}

	.home-section-footer{display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;background: #caefca;
	}
	.footer-wrapper{display: flex; flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 90%;
		margin: 2em auto; padding:50px 0px 0px 0px}
	.footer-top{display: grid;grid-template-columns: 1fr 1fr 1fr;width: 100%;}
	.footer-top .about{display: flex; flex-direction: column;padding:1em;row-gap: 15px;}
	.footer-top .links{display: flex; flex-direction: column;text-align: center;padding:1em;border-left: 2px solid black;}
	.footer-top .links a{text-decoration: none;}
	.footer-top .links a:hover{color: blue;}
	.footer-top .links a:visited{text-decoration:initial;color: black;}
	.footer-top .social{display: flex; flex-direction: column;padding:1em;border-left: 2px solid black;text-align: center;}
	.footer-bottom{
		padding: 2em 0 1em 0;    display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-direction: column;
		row-gap:0em;}

	/*=======End of Common=====*/

	/*===========Common Popup Modal========*/
	.modal_popup_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}

	.modal_popup_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 4em 4em 4em;
	border-radius: 10px;}

	.modal_popup{width:100%;}
	.modal_popup>h2{font-size: 25px;text-align:center;font-weight: 400;}
	.modal_popup>p{margin:1em auto;}
	.modal_popup>ol{padding-left:2em;}

	.success_popup_message{margin:2em auto;}
	#subject{height:100px;}

	.close_popup_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 40px; top: 40px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_popup_modal:before{ content: "x"; position: relative; top: -3px; }

	/*===========End of Notification Modal========*/


	/*===========Modal========*/
	.modal_notification_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}

	.modal_notification_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 4em 4em 4em;
	border-radius: 10px;}

	.modal_notification{width:100%;}
	.modal_notification>h2{font-size: 25px;text-align:center;font-weight: 400;}
	.modal_notification>p{margin:1em auto;}
	.modal_notification>ol{padding-left:2em;}

	.success_notification_message{margin:2em auto;}
	#subject{height:100px;}

	.close_notification_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 40px; top: 40px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_notification_modal:before{ content: "x"; position: relative; top: -3px; }

	/*===========End of Notification Modal========*/


	/*===========Images in blog========*/
	.images-container-box{display:flex;    flex-direction: row;
		column-gap: 1em;}
	.images-container-box .image-container{display: flex;flex-direction: column;flex-grow: 1;flex-basis: 0;text-align: center;margin: 30px 0px 10px 0px;width: 100%;}
	.images-container-box .image-photo{display: flex; flex-direction: column;width: 100%; height: 300px;}
	.images-container-box .image-caption{width: 100%;padding: 10px 0 10px 0; position: relative; top: -2em;border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 1px solid white;
	background: white;
	-webkit-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	-moz-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	.images-container-box img{border-top-left-radius: 10px;
		border-top-right-radius: 10px;}
	}
	.blog-content .image-photo>img{object-fit: cover; width: 100%; height: 100%;border-top-left-radius: 10px; border-top-right-radius: 10px;
	border: 1px solid white; -webkit-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	-moz-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);

	}


@media screen and (min-device-width: 350px) and (max-device-width:767px)
{
	.modal_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}
	#modal_wrapper_hire_me{display: none;}
	#modal_wrapper_question{display: none;}
	.modal_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 2em 4em 2em;
	border-radius: 10px;}
	.modal_form{width:100%;display: flex;
		flex-direction: column;
		row-gap: 1em;
		justify-content: center;
		align-items: center;
		text-align: center;}
	.modal_form>h2{text-align:center;font-size: 25px;font-weight: 400;}
	.modal_form>form{display: flex;
	flex-direction: column;font-size: 20px;
	margin-top: 0em;width: 80%;}
	.modal_form>form>label{font-size: 18px; margin-top: 15px;}
	.modal_form>form>input,select,textarea{font-size: 18px;
	padding: 5px;
	margin: 10px 0;
	border: 1px solid #c7c7d0;
	border-radius: 5px;}
	#ask-question-form{width:100%;}
	#ask-question-input{height: 6em;}
	.success_message{margin:2em auto;}
	#subject{height:100px;}
	#submit-detail{margin-top:1.5em;}
	.blog-content>ul>li:before {
	margin-right: 7px;
	content: "";
	background: #169fcc;
	color: white;
	width: 1.8em;
	height: 1.8em;
	text-align: center;
	display: inline-block;
	font-size: 5px;
	font-weight: bold;
	padding: 2px 1px 1px 1px; }
	.close_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 20px; top: 20px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_modal:before{ content: "x"; position: relative; top: -3px; }

	.header{width:100%;}
	.header-navbar
	{
	  width:90%;flex-wrap: wrap;justify-content: right; margin: 20px 0px 10px 0px;
	}
	.sticky{  width:100%;position:fixed; left:0; top:0; background-color:#e2ece9; z-index:10;
	  display:flex;
	  justify-content: center;
	  border-bottom:0px solid black; margin: 0px 0px 0px 0px;
	}
	.nav-toggler{display:block;}
	.navbar-left{display: flex; justify-content: space-between; width:100%;padding: 0px 5px 0px 5px;}
	.navbar-right{display: flex; flex-direction:column; width:100%; display:none; background:white;z-index:1;border:1px solid black;border-radius:10px;width:50%;}
	.menu{margin:5px;width:auto;display: flex;
    justify-content: center;
    align-items: center;}
	.menu ul{ display: grid; grid-template-columns: 100%; justify-content: left;margin:5px 5px 5px 5px;}
	.menu ul li{display: block;margin: 5px auto;border-bottom: 2px solid black;padding-bottom:5px;}
	.menu ul li:last-child {
	  border-bottom: 0px solid black; padding-bottom:0px;
	}
	.menu ul li a {color:black;}
	.connect{margin:5px;width:auto;text-align: center;}
	.connect a{margin:5px;width:auto;}
	#hide{display:none;}
	#show{display:block;}

	/*===========Common========*/
	.center{text-align:center;}

	.light-yellow {background-color:#ffffb3;}
	.header-color{background-color:#e2ece9;}
	.green {background-color:#fff1e6;}
	.blue {background-color:#eef;}

	.btn{
	border: 1px solid black;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-align: center;
	text-decoration: none;
	}
	.btn:hover{background:grey;}
	.btn-small{font-size: 13px;padding: 1px 10px 1px 10px;margin: 0px 5px 5px 0px;}
	.btn-medium{font-size: 15px; padding: 2px 10px 2px 10px;}
	.btn-large {
		font-size: 13px;
		padding: 6px 12px 6px 12px;
	}
	.buttons-tab>.active{background:black;color:white;}
	/*=======End of Common=====*/



	/*===========Modal========*/
	.modal_notification_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}

	.modal_notification_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 4em 4em 4em;
	border-radius: 10px;}

	.modal_notification{width:100%;}
	.modal_notification>h2{font-size: 25px;text-align:center;font-weight: 400;}
	.modal_notification>p{margin:1em auto;}
	.modal_notification>ol{padding-left:2em;}

	.success_notification_message{margin:2em auto;}
	#subject{height:100px;}

	.close_notification_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 40px; top: 40px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_notification_modal:before{ content: "x"; position: relative; top: -3px; }

	/*===========End of Notification Modal========*/


	/*===========Images in blog========*/
	.images-container-box{display: flex;flex-direction: column;justify-content: center;
		align-items: center;}
	.images-container-box .image-container{display: flex;flex-direction: column;flex-grow: 1;flex-basis: 0;text-align: center;margin: 0 10px;}
	.images-container-box .image-photo{display: flex; flex-direction: column;width: 100%; height: 300px;}
	.images-container-box .image-caption{width: 100%;padding: 10px 0 10px 0; position: relative; top: -1em;border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 1px solid white;
	background: white;
	-webkit-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	-moz-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	height: 2em;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}
	.blog-content .image-photo img{object-fit: cover; width: 100%; height: 100%;border-top-left-radius: 10px; border-top-right-radius: 10px;
	border: 1px solid white; -webkit-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	-moz-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
	box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
}
/*===========Tablet========*/
@media screen and (min-device-width:768px) and (max-device-width:1024px)
{
}
/*===========Laptop-Old========*/
@media screen and (min-device-width:1025px) and (max-device-width:1349px)
{
	.modal_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}
	#modal_wrapper_hire_me{display: none;}
	#modal_wrapper_question{display: none;}
	.modal_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 4em 4em 4em;
	border-radius: 10px;}
	.modal_form{width:100%;display: flex;
		flex-direction: column;
		row-gap: 1em;
		justify-content: center;
		align-items: center;
		text-align: center;}
	.modal_form>h2{text-align:center;font-size: 25px;font-weight: 400;}
	.modal_form>form{display: flex;
	flex-direction: column;font-size: 20px;
	margin-top: 0em;width: 80%;}
	.modal_form>form>label{font-size: 18px; margin-top: 15px;}
	.modal_form>form>input,select,textarea{font-size: 18px;
	padding: 5px;
	margin: 10px 0;
	border: 1px solid #c7c7d0;
	border-radius: 5px;}
	#ask-question-form{width:100%;}
	#ask-question-input{height: 6em;}
	.success_message{margin:2em auto;}
	#subject{height:100px;}
	#submit-detail{margin-top:1.5em;}
	.blog-content>ul>li:before {
	margin-right: 7px;
	content: "";
	background: #169fcc;
	color: white;
	width: 1.8em;
	height: 1.8em;
	text-align: center;
	display: inline-block;
	font-size: 5px;
	font-weight: bold;
	padding: 2px 1px 1px 1px; }
	.close_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 20px; top: 20px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_modal:before{ content: "x"; position: relative; top: -3px; }

}
/*===========Laptop-New========*/
@media screen and (min-device-width:1350px) and (max-device-width:1600px)
{

	.modal_wrapper{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-content: center;}
	#modal_wrapper_hire_me{display: none;}
	#modal_wrapper_question{display: none;}
	.modal_container{position: relative;background: white;
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: auto;
	justify-content: center;
	align-content: center;
	height: auto;
	padding: 4em 4em 4em 4em;
	border-radius: 10px;}
	.modal_form{width:100%;display: flex;
		flex-direction: column;
		row-gap: 1em;
		justify-content: center;
		align-items: center;
		text-align: center;}
	.modal_form>h2{text-align:center;font-size: 25px;font-weight: 400;}
	.modal_form>form{display: flex;
	flex-direction: column;font-size: 20px;
	margin-top: 0em;width: 80%;}
	.modal_form>form>label{font-size: 18px; margin-top: 15px;}
	.modal_form>form>input,select,textarea{font-size: 18px;
	padding: 5px;
	margin: 10px 0;
	border: 1px solid #c7c7d0;
	border-radius: 5px;}
	#ask-question-form{width:100%;}
	#ask-question-input{height: 6em;}
	.success_message{margin:2em auto;}
	#subject{height:100px;}
	#submit-detail{margin-top:1.5em;}
	.blog-content>ul>li:before {
	margin-right: 7px;
	content: "";
	background: #169fcc;
	color: white;
	width: 1.8em;
	height: 1.8em;
	text-align: center;
	display: inline-block;
	font-size: 5px;
	font-weight: bold;
	padding: 2px 1px 1px 1px; }
	.close_modal{cursor:pointer; height: auto; position: absolute; float: right; right: 20px; top: 20px; font-weight: 500; background-color: black; border-radius: 50%; width: 20px; height: 20px; color: white; text-align: center;}
	.close_modal:before{ content: "x"; position: relative; top: -3px; }

	.footer-wrapper{display: flex; flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 90%;
		margin: 2em auto;padding:50px 0px 0px 0px}
	.footer-top{display: grid;grid-template-columns: 1fr 1fr 1fr;width: 100%;}
	.footer-top .about{display: flex; flex-direction: column;padding:1em;row-gap: 15px;}
	.footer-top .links{display: flex; flex-direction: column;text-align: center;padding:1em;border-left: 2px solid black;}
	.footer-top .links a{text-decoration: none;color: black;}
	.footer-top .links a:hover{text-decoration:initial;color: blue;}
	.footer-top .links a:visited{text-decoration:initial;color: black;}
	.footer-top .social{display: flex; flex-direction: column;padding:1em;border-left: 2px solid black;text-align: center;}
	.footer-bottom{
		padding: 2em 0 1em 0;    display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-direction: column;
		row-gap:0em;}
}
@media screen and (min-device-width: 1500px) and (max-device-width: 2000px)
{
	.header-navbar {  width: 70%;}

}