/* Responsive styles
================================================== */




/* Large Devices, Wide Screens */
@media (min-width: 1200px) {
	.dropdown i {
		display: none;
	}
}

/* Medium Devices, Desktops */
@media (min-width: 992px) {
	.navbar-brand i {
		margin-right: 0;
		font-size: 16px;
		line-height: 16px;
	}

	/* Features */
	.feature-box h5 {
		font-size: 13px !important;
	}

	.owl-carousel.portfolio-item img {
		max-height: 500px;
		max-width: 500px;
	}
}


@media (min-width: 768px) {
	.navbar-custom {
		padding: 20px 0;
		border-bottom: 0;
		letter-spacing: 1px;
		background: transparent;
		transition: background 0.3s ease-in-out, padding 0.3s ease-in-out;
	}

	.navbar-custom.top-nav-collapse {
		box-shadow: 0px 0px 2px #111;
		/* background: var(--color-dark); */
		background: linear-gradient(-90deg, #003366 0%, #00162c 100%);
	}

	.navbar-custom.top-nav-collapse .nav li a {
		color: var(--color-grey);
		font-weight: bold;
	}

	.navbar-custom.top-nav-collapse .nav li.active a {
		background-color: transparent;
		color: #cccccc !important;
	}

	.navbar-custom.top-nav-collapse .navbar-brand {
		color: white;
	}

	.navbar-nav>li>.dropdown-menu {
		/* background-color: var(--color-dark); */
		background: linear-gradient(-90deg, #003366 0%, #00162c 100%);
		padding-left: 0rem;
	}

	.bg-hero::before {
		display: none;
		/* Hide the overlay */
	}


}





/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
	.navbar-default .navbar-nav>li>a {
		padding: 23px 10px;
		letter-spacing: 0;
	}

	.navbar-brand i {
		margin-right: 0;
		font-size: 16px;
		line-height: 16px;
	}

	.bg-hero::before {
		display: none;
		/* Hide the overlay */
	}

	/* #section-intro {
		height: 100%;
		background: #222 url("../images/bg/banner2_small.webp") no-repeat fixed 50% 50% / cover;
		padding: 0;
		position: relative;
		overflow: hidden;
	}
 */
	/* Features */
	.feature-box h5 {
		font-size: 13px !important;
	}

	/* Service */
	.service-box {
		margin-bottom: 30px;
	}

	/* Testimonial */
	#testimonial {
		padding-bottom: 100px;
	}

	#testimonial-carousel .item p {
		width: 100%;
	}

	#testimonial-carousel .item h5 {
		margin-top: 20px;
	}


}

/* Extra Small Devices, Phones */
@media (min-width: 480px) and (max-width: 767px) {

	/* Background */
	#section-intro {
		height: 450px;
	}

	.intro-caption {
		padding: 125px 15px;
	}

	.intro-caption h1 {
		font-size: 25px;
		line-height: 35px;
	}

	.mid-title {
		font-size: 30px;
	}

	.navbar-custom {
		margin-top: 0;
		/* background: var(--color-dark); */
		background: linear-gradient(-90deg, #003366 0%, #00162c 100%);
		border-right: 0;
	}

	/* Portfolio */
	.btn-custom {
		padding: 10px;
	}

	/* Header Title */
	.element {
		font-size: 50px;
	}

	/* Service */
	.service-box {
		margin-bottom: 30px;
	}

	/* Testimonial */
	#testimonial {
		padding-bottom: 100px;
	}

	#testimonial-carousel .item p {
		width: 100%;
	}

	#testimonial-carousel .item h5 {
		margin-top: 20px;
	}

	#testimonial-carousel .carousel-indicators {
		margin-top: 30px;
	}

	#testimonial-carousel .carousel-indicators li img {
		width: 45px;
		height: 40px;
		border-radius: 0;
		border: 0;
	}

	#testimonial-carousel .carousel-indicators {
		top: 90%;
	}

	/* Contact */
	.contact-info-wrap {
		margin-bottom: 60px;
	}
}

/* Custom, iPhone Retina */
@media (min-width: 320px) and (max-width: 478px) {

	/* Background */
	.intro-caption {
		padding: 125px 15px;
		text-align: left;
		padding-top: 185px;
		padding-left: 14px;
	}

	.intro-caption h1 {
		font-size: 25px;
		line-height: 35px;
		text-align: center;
	}

	.mid-title {
		font-size: 30px;
	}

	.navbar-custom {
		margin-top: 0;
		/* background: #333; */
		background: linear-gradient(-90deg, #003366 0%, #00162c 100%);
		border-right: 0;
	}

	/* Portfolio */
	ul.work {
		margin-left: 0;
	}

	ul.work li {
		padding: 6px 25px;
		margin-top: 5px;
	}

	/* Testimonial */
	#testimonial {
		padding-bottom: 100px;
	}

	#testimonial-carousel .item p {
		width: 100%;
	}

	#testimonial-carousel .item h5 {
		margin-top: 20px;
	}

	#testimonial-carousel .carousel-indicators {
		margin-top: 30px;
	}

	#testimonial-carousel .carousel-indicators li img {
		width: 45px;
		height: 40px;
		border-radius: 0;
		border: 0;
	}

	#testimonial-carousel .carousel-indicators {
		top: 90%;
	}

	/* Contact */
	.contact-info-wrap {
		margin-bottom: 60px;
	}
}