/*
	Theme Name: Taxi Ninh Bình
	Theme URI: https://webthanhha.com/
	Description: Taxi Ninh Bình
	Version: 1.0
	Author: WebThanhHa
	Author URI: https://webthanhha.com
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
:root{
    --yellow: #ffc61a;
	--black: #040f4f;
    --bg: rgba(0,0,0,.2);
	--shadow: 1px 5px 10px rgba(0,0,0,.3);
    --border: .1rem solid rgba(255,255,255,.3);
}
*{
	margin: 0; padding: 0;
	border: 0; outline: 0;
	box-sizing: border-box;
    text-decoration: none;
	transition: all 0.3s linear;
	font-family: 'Roboto', sans-serif;;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 9rem;
}
html::-webkit-scrollbar{
    width: 1rem;
}
html::-webkit-scrollbar-track{
    background: transparent;
}
html::-webkit-scrollbar-thumb{
    background: linear-gradient(to top, #999, var(--yellow));
	opacity: 0.2;
    border-radius: 5rem;
}
ul, li{
	list-style: none;
}
img{
	max-width: 100%;
	height: auto;
	overflow: hidden;
	object-fit: cover;
}
header, section, footer{
	padding: 2rem 7%;
}
.d-none{
	display: none;
}
.btn{
    color: #fff;
    font-size: 2.0rem;
	margin-top: 2rem;
    padding: 1rem 3rem;
    cursor: pointer;
    display: inline-block; 
	border-radius: 0.5rem;
	background: var(--black);
}
.btn:hover{
    letter-spacing: .2rem;
}
.heading{
    color: var(--yellow);
    font-size: 3rem;
    text-align: center;
    padding-bottom: 3rem;
    text-transform: uppercase;
}
.flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
/*---------- Header ----------*/
.header{
    position: fixed;
    top:0; left: 0; right: 0;
    z-index: 1;
    align-items: center;
    padding: 1.5rem 7%;
    background: var(--bg);
    border-bottom: var(--border);
}
.header.active{
    padding: 1rem 7%;
    background: rgba(0,0,0,0.85);
}
.header .logo img{
    height: 5rem;
}
.header.active .logo img{
    height: 4rem;
}
.header .navbar li{
    display: inline-block;
}
.header .navbar a{
    color: var(--yellow);
    margin: 0 1rem;
	font-size: 1.8rem;
	text-transform: uppercase;
}
.header .navbar a:hover{
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--yellow);
}
#menu-btn{
	font-size: 2.5rem;
	color: #fff;
	border-radius: 3px;
	padding: 0.8rem 1.5rem;
	background: var(--yellow);
	display: none;
}
/*---------- Banner ----------*/
.banner{
	padding-top: 15rem;
	text-align: center;
	position: relative;
	background: url(img/bg.jpg) no-repeat 50% 100%;
}
.banner img{
	max-width: 65rem;
}
.banner .dialog{
	position: absolute;
    top: 10rem;
    right: 25rem;
    background: url(img/dialog.png) 50% 50% no-repeat;
    width: 178px;
    height: 207px;
}
.banner .dialog span{
    font-size: 3rem;
	color: var(--yellow);
    padding: 2rem 0 1rem 0;
}
.banner .dialog h4{
    font-size: 1.8rem;
    line-height: 2rem;
	margin: 0 0 1.5rem;
	color: var(--yellow);
}
.banner .dialog h3{
	font-size: 2.5rem;
	color: var(--yellow);
}
/*---------- About ----------*/
.about{
	gap: 3rem;
}
.about>div{
	flex: 1 1 35rem;;
}
.about .content .box p{
	font-size: 1.6rem;
	line-height: 2.5rem;
	margin-bottom: 1rem;
}
.about .content .box p i{
	font-size: 1.5rem;
}
.about .img{
	text-align: center;
}
/*---------- Services ----------*/
.services .flex{
	gap: 3rem;
}
.services .item{
	flex: 1 1 20rem;
	padding: 2rem;
	text-align: center;
    border: 1px dotted var(--bg);
}
.services .item:hover{
	box-shadow: var(--shadow);
}
.services .item .img{
	height: 70px;
    line-height: 70px;
}
.services .item h5{
    font-size: 1.8rem;
	font-weight: 700;
	padding: 3.5rem 0 2rem;
}
.services .item p{
    font-size: 1.4rem;
    line-height: 1.6rem;
}
/*---------- Price ----------*/
.price{
	background: #f1f2f3;
}
.price .flex{
	gap: 2rem;
}
.price .item{
	flex: 1 1 20rem;
	text-align: center;
	padding: 2rem 0;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow);
}
.price .item img:hover{
	transform: scale(1.2);
}
.price .item .content h3{
	font-size: 2.5rem;
    color: var(--black);
}
.price .item .content p{
    font-size: 1.6rem;
    padding: 0.5rem 0;
    color: var(--yellow);
}
.price .item .content p span{
    color: var(--black);
    font-size: 1.8rem;
    font-weight: 500;
}
.price .item .content .btn{
    font-size: 1.7rem;
    font-weight: 500;
}
/*---------- News ----------*/
.news .flex{
	gap: 2rem;
}
.news .item{
	flex: 1 1 20rem;
	overflow: hidden;
	background: #f1f2f3;
    box-shadow: var(--shadow);
}
.news .item img{
	height: 185px;
}
.news .item .content{
	padding: 1rem 0.5rem;
}
.news .item img:hover{
	transform: scale(1.1);
}
.news .item h4{
	margin-bottom: 1rem;
}
.news .item h4 a{
	color: var(--black);
	font-size: 1.6rem;
}
.news .item h4 a:hover{
	color: var(--yellow);
}
.news .item p{
	font-size: 1.4rem;
	font-style: italic;
    line-height: 1.5;
	height: 85px;
	overflow: hidden;
	margin-bottom: 1rem;
}
/*---------- Contact ----------*/
.contact{
	background: #f1f2f3;
}
.contact>div{
	width: 49%;
}
.contact h3{
	font-size: 2rem;
    color: var(--black);
	margin-bottom: 2rem;
}
.contact p{
	font-size: 1.5rem;
	margin-bottom: 1rem;
}
.contact p i{
	font-size: 1.7rem;
	color: var(--yellow);
	margin-right: 0.5rem;
}
.contact p span, .contact p a{
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--black);
}
.contact input, .contact textarea{
	width: 100%;
    height: 38px;
	font-size: 1.5rem;
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 0.5rem;
}
.contact input:focus, .contact textarea:focus{
	box-shadow: 1px 3px 5px var(--bg);
}
.contact textarea{
    height: 100px;
}
.contact input[type="submit"]{
	width: 150px;
	height: 40px;
	color: #fff;
	font-size: 1.6rem;
	cursor: pointer;
	background: var(--black);
}
.contact input[type="submit"]:hover{
    letter-spacing: 0.2rem;
}

/*---------- Footer ----------*/
.footer{
	gap: 5%;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.5;
	background: var(--black);
}
.footer .box-1{
	width: 35%;
}
.footer .box-2{
	width: 25%;
}
.footer .box-3{
	width: 30%;
}
.footer h3{
	font-size: 1.7rem;
	margin: 1.5rem 0;
	text-transform: uppercase;
}
.footer a{
	color: var(--yellow);
}
.footer a:hover{
	letter-spacing: 0.2rem;;
}

/*---------- Breadcrumb ----------*/
.breadcrumb{
    padding: 1rem;
    font-size: 1.5rem;
    color: var(--black);
	background: var(--bg);
}
/*---------- Category ----------*/
.category .news{
    margin-bottom: 3rem;
}
/*---------- Single ----------*/
.single{
	font-size: 1.6rem;
	background: #f7f8f9;
}
.single section.flex{
	align-items: flex-start;
}
.heading a{
	color: var(--yellow);
}
.single h1{
	font-size: 2.5rem;
    color: var(--black);
    margin-bottom: 2rem;
}
.single .main{
	width: 68%;
	padding: 1rem;
	line-height: 1.6;
	background: #fff;
	text-align: justify;
	
}
.single .main p, .single .main h3, .single .main h4{
	margin-bottom: 1rem;
}
.single .sidebar{
	width: 30%;
	background: #fff;
}
.single .sidebar h2{
    padding: 1rem;
    color: var(--yellow);
	background: var(--black);
}
.single .sidebar .news{
	padding: 1rem;
	border-radius: 0 0 4px 4px;
	border: 1px solid var(--bg);
}
.single .sidebar .item{
	margin-bottom: 2rem;
}
.single .sidebar img{
	width: 100%;
}
.single .sidebar .content{
	background: #fff;
}







@media (max-width:991px){
    html{
        font-size: 60%;
    }
    .header{
        padding: 1.5rem 2rem;
    }
    section, footer{
        padding: 2rem;
    }
	.banner .dialog{
		right: 10rem;
	}
}

@media (max-width:767px){
	.hidden-xs{
		display: none;
	}
    #menu-btn{
		display: block;
		cursor: pointer;
	}
	.header .navbar{
        position: absolute;
        top: 99%; left: 0; right: 0;
        background: rgba(0,0,0,0.85);
        border-top: var(--border);
        clip-path: polygon(0 0,100% 0,100% 0,0 0);
    }
    .header .navbar.active{
        clip-path: polygon(0 0,100% 0,100% 100%,0% 100%);
    }
    .header .navbar li{
        padding: 1rem;
        display: block;
		text-align: center;
		border-bottom: var(--border);
    }
    .header .navbar li a{
		color: #fff;
		text-transform: none;
    }
	.banner .dialog{
		top: 11rem;
		right: 1rem;
		width: 160px;
		height: 190px;
		background-size: 160px;
	}
	.banner img{
		max-width: 80%;
	}
	.footer .box{
		width: 45%;
	}
	.single .main{
		width: 55%;
	}
	.single .sidebar{
		width: 43%;
	}
}

@media (max-width:500px){
    html{
        font-size: 55%;
    }
	.banner .dialog{
		top: 7rem;
		right: 1rem;
		width: 150px;
		height: 175px;
		background-size: 150px;
	}
	.contact>div{
		width: 100%;
	}
	.footer .box{
		width: 90%;
	}
	.single .main, .single .sidebar{
		width: 100%;
	}
}
/*---------- Back to Top ----------*/
.copyright{
	color: #fff;
	padding: 1rem;
	font-size: 14px;
	background: var(--yellow);
}
.go-top{
	position: fixed;
	right: 4%;
	bottom: 5%;
	padding: 20px;
	display: none;
	cursor: pointer;
	border-radius: 3px;
}
.go-top:after{
	content: "\f106";
	position: absolute;
	bottom: 10px;
	font-family: FontAwesome;
	color: #fff;
	font-size: 28px;
	padding: 10px 15px;
	background: var(--yellow);
}
.go-top:hover{
	transform: scale(1.1);
	transition: all .4s linear;
}