/** << ======================================^^^=================================== >> */
/**                                         GLOBAL                                     */
/** << ======================================***=================================== >> */
*{font-family: Arial, cursive, sans-serif;}
/* @media (min-width: 1260px){
	.container{max-width: 1248px;}
} */
h1{font-size: 2rem;}
h2{font-size: 1.75rem;}
h3{font-size: 1.5rem;}
.font_b {font-weight: bold;}
.a_black a, .a_black{color: #333; text-decoration: none;}
.a_black a:hover, .a_black:hover{color: #920707;}
.bg-banner{background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%); color: #fff;}
.radius-1{border-radius: 1rem;}
/** << ======================================^^^=================================== >> */
/**                                        HEADER                                      */
/** << ======================================***=================================== >> */
header{position: relative; z-index: 1001; padding-top: 0.75rem; padding-bottom: 0.75rem;}
header .nav-link{
	color: #333;
}
header .nav-link:hover{
	color: #ccc;
}

#menu{
	position: relative;
}
#menu a{
	padding: .75rem 1rem;
	font-size: 18px;
}
#menu a:hover{
	color: #888;
}
.navbar{
	padding: 0;
}
header .dropdown-menu{
	max-width: 300px;
	min-width: 200px;
}
header .dropdown-menu a{
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}
#headlogo{
	display: inline-block;
	margin: .25rem 0;
	color: #021038;
}
#headlogo:hover{color: #eb601e;}
#headlogo img{max-height: 40px;}
#headsearch{
	margin-top: .5rem;
}
#headsearch input{
	height: 42px;
}
.avatar-sm{
	width: 24px;
	display: inline-table;
	border: 1px solid #eee;
	border-radius: 50%;
	overflow: hidden;
}
.avatar-sm img{width: 100%;}

#page-menu{
	border: 1px solid #ddd;
	background: #fff;
}
#page-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: justify;
}
#page-menu li{
	display: inline-block;
}
#page-menu li a{
	display: block;
	line-height: 3.6em;
	padding: 0 1rem;
	font-weight: bold;
	color: #000;
	font-size: 18px;
	text-decoration: none;
}
#page-menu li a:hover{
	color: #3f51b5;
}
.page-item{
	padding: 1.5rem 1.25rem;
}
.page-item h3{
	font-size: 20px;
	font-weight: bold;
}
#mb-btn{font-size: 20px; color: #333;padding-left: 0px; padding-right: 5px;}
#menu_mobi{position: fixed; top: 0; bottom: 0; left:0; z-index: 9999; background: #000; width: 100%; display: none;}
#menu_mobi .list-group-item{background: #000; color: #fff;}
/** << ======================================^^^=================================== >> */
/**                                         MAIN                                       */
/** << ======================================***=================================== >> */
.title-main{font-size: 2.75rem!important;}
.title-meta{font-size: 1.5rem!important;}
.text-desc{font-size: 1rem;}

#banner{
	position: relative;
}
#info{
	position: absolute;
	width: 100%;
	bottom: 15px;
}

#aboutpage{
	background: #fff;
	position: relative;
	border-radius: 10px;
	padding: 3rem;
}
#filter select{text-align: center;}
#filter option{padding:0; text-align: center;}
#main{
	min-height: 80vh;
	padding: 18px 0;
	position: relative;
}

#page{
	margin-top: -38px;
	position: relative;
	z-index: 999;
}
#featured .card a{text-decoration: none;}
#featured .card b{
	font-size: 18px;
	font-weight: bold;
	color: #ed5050;
}
#featured small{color: #888;}
#featured .card:hover{box-shadow: 0 0 6px #0000005d;}
#featured .card:hover h3{color: #3f51b5;}
.btn-theme{
	border-radius: 50rem!important; 
	padding-left: 3rem!important; 
	padding-right: 3rem!important; 
	padding-bottom: 1rem!important;
	padding-top: 1rem!important;
}
#featured img{width: 50%; margin-bottom: 1rem;}
#newsfeed .col-btn{text-align: right;}
#newsfeed h3{font-size: 20px; font-weight: bold;}
#newsfeed h2{font-size: 24px;}

#SearchList .item{margin-bottom: 1.5rem;}
#SearchList .img{border: 1px solid #eee;}
#SearchList h3{font-size: 18px;}
#SearchList h5{font-size: 16px;}
#SearchList h3 a{color: #1a0dab;}
#SearchList p{margin-bottom: .25rem;}
#SearchList .item .link a{color: #006621;}
#SearchList .item .link-more a{color: #1a0dab;}
#mypages h5 a{color: #666; text-transform: uppercase; text-decoration: none;}
#mypages h5 a:hover{color: #a5460f;}
#user-bar h2{font-size: 24px;}

.img-thumb {
    position: relative;
    display: inline-block;
    max-height: 380px;
    overflow: hidden;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 37px rgba(12, 31, 41, 0.21);
    box-shadow: 0 1px 37px rgba(12, 31, 41, 0.21);
}
.img-thumb img{
	width: 100%;
}
.demo-img {
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    /* -webkit-transform: translate3d(0,0,0); */
}
.demo-img:hover {
    -webkit-transform: translate3d(0, -36%, 0);
    transform: translate3d(0, -36%, 0);
}
.text-center .pagination{
	margin: 0;
	display: inline-flex;
}

.theme{
	border-radius: .75rem;
	overflow: hidden;
}
.theme .handle {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: justify;
	display: none;
	padding: 35px 20px 25px;
	z-index: 1000;
	color: #fff;
}
.theme:hover .handle {
    display: block;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.theme .handle .btn {
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
.theme .handle .price{font-size: 16px;}
.theme .handle img {
	height: 36px;
	background: #fff;
}

.modal-nm{max-width: 430px;}

#idnav>li>.nav-link{font-size: 20px; font-weight: bold;}
.btn-avatar:hover img{box-shadow: 0 0px 8px 0 #ddd;}
.btn-avatar img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.dropdown-toggle.btn-avatar::after{
	display: none;
}

#Content img{max-width: 100%;}

#form h1{font-size: 32px; line-height: 1;}
#form_item{min-height: 100vh; background: #333; color: #eee;}
#form_item #FrmPage{width: 100%; max-width: 550px; padding: 2rem;}
#form_item #FrmPage .form-control{border-radius: 30px; background: #111; border-color: #222; color: #888;}
#form_item #FrmPage .btn{border-radius: 30px;}

.item-center{ display: flex; -webkit-box-align: center; align-items: center; }
.fea_item h3{font-size: 36px; font-weight: bold; margin-bottom: 1.5rem;}
.fea_item p{font-size: 18px;}

#account{position: relative;}
#account .bar{width: 300px; height:calc(100vh - 75px); background: #333; float: left;}
#account .bar{position: fixed; padding: 2rem 1.5rem;}
#account .bar ul{list-style: none; margin: 0; padding: 0;}
#account .bar li{display: block;}
#account .bar li i{font-size: 24px; margin-right: .5rem;}
#account .bar li a{color: #fff; line-height: 3em; display: block; font-size: 18px; font-weight: bold;}
#account .bar li a:hover{color: #ccc; text-decoration: none;}
#account .main{padding: 2rem; margin-left: 300px; max-width: 1000px;}

.page-lg .pagination{box-shadow: 0 2px 16px 0 #ccc; border-radius: 2.5rem;}
.page-lg a{font-weight: bold; font-size: 1.25rem; padding: 1rem 1.5rem;}
.page-lg li:first-child a{border-radius: 2.5rem 0 0 2.5rem;}
.page-lg li:last-child a{border-radius: 0 2.5rem 2.5rem 0;}

#Support{position: relative;}
#spbar{position: absolute; width: 230px; top: 0; left: 0;}
#spbar a{color: #333;}
#spmain{width: 100%; max-width: 680px; margin-left: 260px;}
#spmain a{color:#007185;}
#spmain a:hover, #spbar a:hover{color: #e47911;}

.line-end::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: #ccc;
}

#feature i{font-size: 80px;}
#feature .card:hover i{color: #d6dce7;}
#feature .card:hover{background: #d6dce7;}
.card.shadow-sm:hover{box-shadow: 0 .25rem .75rem rgba(0,0,0,.175)!important;}

#home-banner{position: relative;}
#home-banner .text-item{position: relative; z-index: 101; font-size: 3rem;}
#home-banner-bg{position: absolute; top:0; z-index: 100; width: 100%; height: 80%; background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%); z-index: 100; border-radius: 1rem}
#home-banner img{position: relative; z-index: 101;}

#Service{position: relative;}
#ServiceLeft{
	width: 63.6896046852%;
    position: relative;
    -webkit-transform: translateX(-22.9885057471%);
    transform: translateX(-22.9885057471%);
    padding: 300px 15%;
    z-index: 2;
    color: #fff;
}
#ServiceLeft:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%);
    border-radius: 140px;
    transform: rotate(8deg);
    z-index: -1;
}
#ServiceRight{
	width: 62.2254758419%;
    position: absolute;
    right: 0;
    top: 55%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
}

#Service .card-img-overlay{opacity: 0.7; background: #000000e8; color: #fff;}
#Service .card-img-overlay:hover{opacity: 1; background: #000000d1; transition: opacity 0.8s ease; color: #fff;}

.scroll-text {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-text.active {
	opacity: 1;
	transform: translateY(0);
}

.scroll-effect-left {
	opacity: 0;
	transform: translateX(-100px); /* Move to the left initially */
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.scroll-effect-right {
	opacity: 0;
	transform: translateX(100px); /* Move to the left initially */
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.scroll-effect-left.active, .scroll-effect-right.active {
	opacity: 1;
	transform: translateX(0); /* Move to original position */
}

/** << ======================================^^^=================================== >> */
/**                                        FOOTER                                      */
/** << ======================================***=================================== >> */
footer{
	border-top: 1px solid #e3e7ee;
	position: relative;
	background: #f2f2f2;
}
footer p{margin-bottom: .75rem!important;}
#footer-main{background: #666;}
#footer-main, #footer-main a{color: #888;}
#footer-btm{background: #000; color: #999;}
.icon-social{font-size: 24px;}
.icon-social a{font-size: 24px; color: #666!important; display: inline-block; margin-right: .5rem;}
.icon-social a:hover{color: #000!important;}

.line-end::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(0,0,0,.1);
}

@media (max-width: 750px){
	#headlogo{
		margin-top: .5rem;
		margin-bottom: .5rem;
	}
	#headlogo img{max-height: 32px;}
	#aboutpage{padding: 1rem;}
	#aboutpage h1{font-size: 24px; font-weight: bold;}
	.mb-btn{color: #fff; display: inline-block;font-size: 20px;}
	#featured .card-body{padding: 0.5rem;}
	#featured img{width: 80%}
	#featured h3{font-size: 20px;}
	#featured p{display: none;}
	#newsfeed .col-btn{text-align: center;}
	#newsfeed h2{font-size: 20px;}
	#newsfeed h3{font-size: 18px;}
	.btn-theme{
		border-radius: 10rem!important; 
		padding-left: 1.5rem!important; 
		padding-right: 1.5rem!important; 
		padding-bottom: 1rem!important;
		padding-top: 1rem!important;
		line-height: 1.2;
	}
	#idnav>li>.nav-link{padding-right: 0;}
	
	.bg-banner h1{font-size: 24px;}
	.bg-banner h3{font-size: 18px;}
	.fea_item h3{font-size: 20px; margin-bottom: 1rem;}
	.fea_item p{font-size: 16px; margin-bottom: .5rem;}
	#account .bar{display: none;}
	#account .main {margin-left: 0; padding: 1rem;}
	#spbar{display: none;}
	#spmain{margin-left: 0;}
	h2{font-size: 24px;}
	.bg-banner a b.text-lg{font-size: 20px;}
	.title-main {
	    font-size: 1.75rem!important;
	    padding-right: 0;
	}	
	.img-thumb {max-height: 240px;}
	.theme .handle {padding: 25px 7px 12px;}
	#support.card{border: none!important;}
	#support.shadow-sm{box-shadow: none!important;}
	#support .card-body{padding: 0!important;}
	
	#ServiceLeft{
	width: 100%;
    position: relative;
    transform: initial;
    padding: 30px 1rem;
	}
	#ServiceLeft:before {
	    position: absolute;
	    left: 0;
	    top: 0;
	    content: "";
	    width: 100%;
	    height: 100%;
	    background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%);
	    border-radius: 0px;
	    transform: rotate(0deg);
	    z-index: -1;
	}
	#ServiceRight{
		width: 100%;
	    position: relative;
	    transform: initial;
	    padding: 1rem;
	    margin: 0 auto;
	}
	#home-banner .text-item{font-size: 2rem;}
}