*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* My Style (Patya Style) START */

.div-the_btn{
	text-align: center;
	margin: 20px 0;
}

.the_btn{
	position: relative;
	display: inline-block;
	color: black;
	background-color: transparent;
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
	border: 2px solid black;
	border-radius: 2px;
	padding: 4px 20px;
	transition: .3s;
}

.the_btn span{
	position: absolute;
	top: 100%;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: -1;
	color: white;
	background-color: black;
	transition: .3s;
}

.the_btn:hover{
	color: white !important;
}

.the_btn:hover span{
	top: -1px;
}

.color-red{
	color: #fd3f30;
}

.bg-red{
	background-color: #fd3f30;
}

.cc-b{
	color: #4591d6;
}

.cc-lb{
	color: #9cdcfe;
}

.cc-r{
	color: #ce7e4b;
}

.cc-y{
	color: #d7ba7d;
}

.cc-g{
	color: #70c891;
}

.tdu{
	text-decoration: underline;
}

.tdn{
	text-decoration: none !important;
}

.fw500{
	font-weight: 500;
}

.fw600{
	font-weight: 600;
}

.code-box{
	max-height: 300px;
	background: #1e1e1e;
	padding: 20px;
	overflow-y: auto;
}

.fosi13{
	font-size: 13px;
}.fosi14{
	font-size: 14px;
}.fosi15{
	font-size: 15px;
}.fosi16{
	font-size: 16px;
}.fosi18{
	font-size: 18px;
}.fosi20{
	font-size: 20px;
}






/* THE MENU */

.menu-sticky{
	position: relative;
	background-color: #fff;
	z-index: 1000;
	transition: .3s;
}

@media (min-width: 992px){
	.menu-width .container, .container-lg, .container-md, .container-sm {
    	max-width: 960px;
		transition: .5s;
	}
}

.menu-sticky.sticky {
	position: fixed;
	width: 100%;
	z-index: 999;
	top: 0px !important;
	box-shadow: 0px 3px 6px 3px rgb(0 0 0 / 6%);
	animation: fadeInDown 1s both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.logobar{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.div-logo img{
	position: relative;
	z-index: 1001;
	width: 80px;
	margin-bottom: -20px;
	padding: 4px 0;
}

.menubar .nav-link{
	display: block;
	color: #212529 !important;
	font-weight: 400;
	padding: 10px 15px !important;
}

.menubar .nav-link:hover{
	background: rgba(0, 0, 0, 0.05);
}

.nav-link.active{
	color: #000 !important;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.05);
}


@media (max-width:992px) {

	.menubar .navbar{
		position: static;
	}

	.menubar .navbar .navbar-toggler,
	.menubar .navbar .navbar-toggler:focus{
		border: 0;
		outline: 0;
		box-shadow: none;
	}
	
	.menubar .navbar-collapse{
		position: absolute;
		top: 100%;
		right: 0;
		width: 300px;
		background-color: #fff;
		box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
	}

	.menubar .nav-link{
		padding: 8px 20px !important;
	}
	
}

@media (max-width:400px){

	.menubar .navbar-collapse{
		width: 100%;
	}

	.menubar ul{
		padding: 20px 0 8px;
	}
	
}




/* My Style (Patya Style) END */

/* .header_menu{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	height: 76px;
	background-color: #fff;
	padding-bottom: 10px;
}

.menu-height{
	height: 80px;
}

.menu{	
	background-color: #fff;
	border: 1px solid #aaa;
	border-width: 1px 0;
	margin-top: 10px;
}

.menu ul{
	display: flex;
	justify-content: center;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.menu ul li a{
	display: inline-block;
	color: black !important;
	font-weight: 500;
	text-align: center;
	text-decoration: none !important;
	padding: 15px;
	transition: .3s;
}

.menu ul li a:hover{
	border-bottom: 3px solid black;
	padding-bottom: 12px;
	border-radius: 2px;
} */



/* Home Page Website Designs ----------------------------------------------------------------------------------- */

.h-webs img{
	width: 100%;
	height: 280px;
	object-fit: cover;
	border: 1px solid #ddd;
	padding: 5px;
}





/* Footer ========================================================================= */

footer{
	background: #000;
}

.footer{
	position: relative;
	padding: 70px 0 20px;
}

.footer-logo{
	width: 150px;
	border-radius: 22px;
	box-shadow: 0 0 2px #fff;
	margin: auto;
}

.footer-logo img{
	width: 100%;
	background-color: #fff;
	border-radius: 22px;
}

.footer-head{
	color: white;
	font-size: 48px;
	font-weight: 600;
	text-align: center;
	padding: 20px 0;
	margin: 0;
}

.copyright{
	color: white;
	font-size: 13px;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding: 8px 0;
}

.copyright a:hover{
	color: #fd3f30;
	text-decoration: underline !important;
}

.footer-icon {
	position: absolute;
	top: 40px;
	right: 0;
	background-color: #fff;
	padding: 4px 20px;
}

.footer-icon::before{
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	border: 16px solid #fff;
	border-color: transparent #fff transparent transparent;
}