/*
====================================
Large Screen - Others
====================================
*/
@media screen and (min-width: 1200px) and (max-width: 1500px) {

	.container {
		max-width: 1320px;
	}

	.header-bg img {
		max-width: 700px;
	}

	.navbar-brand img {
		max-width: 125px;
	}

	.navbar-nav li {
		padding-left: 45px;
	}

	.navbar-nav li a {
		font-size: 24px;
	}

	.hero-area {
	  	padding-left: 60px;
	  	padding-top: 60px;
	}

	.hero-cnt p {
		font-size: 20px;
		margin: 65px 0;
	}

	.book-right p {
		font-size: 18px;
	}

	@media screen and (max-width: 1300px) {
		.header-area {
		    padding-top: 15px;
		}

		.hero-cnt p {
			margin: 40px 0 42px;
			font-size: 18px;
		}

		.hero-cnt {
			max-width: 542px;
		}

		.hero-cnt a {
			font-size: 19px;
			width: 186px;
			height: 48px;
		}

		.hero-area {
			padding-top: 50px;
		}

		.book-right p {
			font-size: 16px;
			margin-bottom: 18px;
		}

	}

	.book-area {
		margin-top: 120px;
	}

	.book-title h4 {
		font-size: 45px;
	}


}

/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {

	.container {
		max-width: 960px;
	}

	.header-area {
	    padding-top: 15px;
	    padding-left: 30px;
	}


	.header-bg img {
		max-width: 515px;
		opacity: 0.5;
	}

	.navbar-brand img {
		max-width: 90px;
	}

	.navbar-nav li {
		padding-left: 38px;
	}

	.navbar-nav li a {
		font-size: 20px;
	}

	.hero-area {
	  	padding-left: 40px;
	  	padding-top: 45px;
	}

	.hero-cnt p {
		font-size: 18px;
		margin: 30px 0;
	}

	.book-right p {
		font-size: 14.2px;
		margin-bottom: 15px;
	}

	.book-area {
		margin-top: 90px;
	}

	.book-title h4 {
		font-size: 42px;
	}

	.hero-cnt h1 {
		font-size: 52px;
	}

	.hero-cnt a {
		font-size: 18px;
		width: 186px;
		height: 48px;
		padding-top: 2px;
	}

	.book-right a {
		width: 132px;
		font-size: 18px;
		padding: 5px 10px;
		margin-top: 40px;
	}

	.book-right h6 {
		font-size: 20px;
		margin-bottom: 25px;
	}

	.contact-title h4 {
		font-size: 40px;
	}

	.contact-item input, 
	.contact-item textarea {
		font-size: 18px;
	}

	.contact-item {
		margin-bottom: 32px;
	}

	.contact-item button {
		font-size: 19px;
	}

	.footer-logo img {
		max-width: 110px;
	}

	.footer-item ul li img {
		max-width: 52px;
	}

	.footer-item p {
		font-size: 17px;
	}

	.footer-area {
		padding: 40px 0 32px;
	}


}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {

	.container {
		max-width: 720px;
	}

	.header-area {
	    padding-top: 15px;
	    padding-left: 25px;
	    padding-right: 25px;
	}


	.header-bg img {
		max-width: 500px;
		opacity: 0.4;
	}

	.navbar-brand img {
		max-width: 90px;
	}

	.navbar-nav li {
		padding-left: 35px;
	}

	.navbar-nav li a {
		font-size: 20px;
	}

	.hero-area {
	  	padding-left: 30px;
	  	padding-top: 45px;
	}

	.hero-cnt p {
		font-size: 18px;
		margin: 30px 0;
	}

	.book-right {
		margin-top: 35px;
	}

	.book-right p {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.book-area {
		margin-top: 85px;
	}

	.book-title h4 {
		font-size: 38px;
	}

	.hero-cnt h1 {
		font-size: 52px;
	}

	.hero-cnt a {
		font-size: 18px;
		width: 186px;
		height: 48px;
		padding-top: 2px;
	}

	.contact-title h4 {
		font-size: 40px;
	}

	.contact-item input, 
	.contact-item textarea {
		font-size: 18px;
	}

	.contact-item {
		margin-bottom: 32px;
	}

	.contact-item button {
		font-size: 19px;
	}

	.footer-logo img {
		max-width: 110px;
	}

	.footer-item ul li img {
		max-width: 52px;
	}

	.footer-item p {
		font-size: 17px;
	}

	.footer-area {
		padding: 40px 0 32px;
	}

	.book-left img {
		max-width: 300px;
		width: 100%;
		margin: 0 auto;
	}

	.book-title {
		border-width: 8px;
	}

	.contact-title {
		margin-bottom: 60px;
	}

	.contact-main {
		max-width: 600px;
	}

	.owl-nav img {
		width: 17px;
	}


}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (max-width: 767px) {

	.container {
		max-width: 540px;
	}

	.header-area {
	    padding-top: 12px;
	    padding-left: 25px;
	    padding-right: 20px;
	}

	.header-bg img {
		max-width: 340px;
		top: 110px;
		right: 0px;
		opacity: 0.3;
	}

	.navbar-brand img {
		max-width: 70px;
	}

	.navbar-nav li {
		padding-left: 38px;
	}

	.navbar-nav li a {
		font-size: 20px;
	}

	.hero-area {
	  	padding: 40px 20px 0;
	}

	.hero-cnt p {
		font-size: 18px;
		margin: 15px 0 30px;
	}

	.book-right {
		margin-top: 35px;
	}

	.book-right p {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.book-area {
		margin-top: 80px;
	}

	.book-title h4 {
		font-size: 30px;
	}

	.hero-cnt h1 {
		font-size: 45px;
		text-align: center;
	}

	.hero-cnt a {
		font-size: 18px;
		width: 186px;
		height: 48px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 2px;
	}

	.contact-title h4 {
		font-size: 36px;
	}

	.contact-item input, 
	.contact-item textarea {
		font-size: 18px;
		border: 1px solid #C1AA7F;
		padding: 7px 12px;
	}

	.contact-item {
		margin-bottom: 30px;
	}

	.contact-item button {
		font-size: 15px;
		margin: 0 2px;
	}

	.contact-main {
		max-width: 400px;
		width: 100%;
	}

	.contact-area {
		padding: 0 22px;
	}

	.footer-logo img {
		max-width: 90px;
	}

	.footer-item ul li img {
		max-width: 46px;
	}

	.footer-item p {
		font-size: 16px;
		margin-top: 30px;
	}

	.footer-item p br {
		display: block;
	}

	.footer-area {
		padding: 40px 0 32px;
	}

	.book-left img {
		max-width: 210px;
		width: 100%;
		margin: 0 auto;
	}

	.book-title {
		padding-bottom: 26px;
		border: none;
	}

	.contact-title {
		margin-bottom: 36px;
	}

	.book-main {
		background: rgba(20, 19, 18, 0.37);
		margin: 0 12px;
		padding-left: 9px;
		padding-right: 9px;
	}

	.footer-item h6 {
		font-size: 17px;
		margin-bottom: 30px;
	}

	.footer-item ul li {
		padding: 0 20px;
	}

	.owl-nav img {
		width: 16px;
		filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7464%) hue-rotate(316deg) brightness(95%) contrast(104%);
	}
}

@media screen and (max-width: 575px) {
	.container {
		max-width: 100%;
	}

	.modal-body p {
		font-size: 18px;
	}

}