@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/font-awesome/css/font-awesome.min.css');
:root { --primary-font: Arial, Helvetica, serif; --brown: #844A1A; --light-brown: #c76e2a; --light-blue: #2989C3; --light-gray: #FCFCFC; --light-gray-1: #E9ECEF; --light-gray-2: #969696; }
body { color: var(--bs-black); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; position: relative; font-display: swap;}
a { color: var(--bs-blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
.clients img { display: inline-block; height: 50px; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--bs-black); font-family: var(--primary-font); font-weight: 700; text-transform: capitalize; }
h1 { font-size: 60px; }
h1 span { color: var(--light-blue); }
p, li { color: var(--bs-black); font: 400 16px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

.navbar .navbar-nav .nav-link { color: var(--light-brown); font-size: 16px; font-weight: 700; margin-left: 58px; }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--light-blue); }

.banner { clear: both; padding: 4% 0px; width: 100%; }
.banner h1 { color: var(--bs-black); margin-bottom: 1.3rem; }
.banner h1 span { border-bottom: 6px solid var(--light-brown); display: inline-block; padding: 0px 35px 3px 0px; }
.banner p.disc { max-width: 315px; }
.banner .info p { color: var(--light-brown); }
.banner .info a { border-bottom: 2px solid var(--light-brown); color: var(--light-brown); font-weight: 700; }
.banner .fa { color: rgba(0, 0, 0, 0.4); font-size: 20px; margin-right: 20px; }

.pointers { background-color: var(--light-blue); clear: both; padding: 4% 0px; width: 100%; }
.pointers h1, .pointers p { color: var(--bs-white); }
.pointers p { line-height: 25px; margin-right: 15px; }

.what { clear: both; padding: 5% 0px; width: 100%; }
.what .nav { border-bottom: 1px solid rgba(0, 0, 0, 0.1); max-width: 80%; }
.what .nav .nav-link { color: var(--bs-black); font-size: 16px; font-weight: 700; padding: 0.5rem 2rem; }
.what .nav .nav-item { margin: 0px 25px; }
.what .nav .nav-link.active { border-bottom: 3px solid var(--light-blue); color: var(--light-blue)}

.btn-primary { background-color: var(--light-brown); border-color: var(--light-brown); font-size: 14px; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brown) !important; border-color: var(--brown) !important; }

.btn-outline-light{ font-size: 14px; text-transform: uppercase; }
.btn-outline-light:hover { background-color: var(--bs-white) !important; border-color: var(--bs-white) !important; }
.btn-outline-light:hover img { filter: brightness(0); }

.work { clear: both; padding: 4% 0px; width: 100%; }
.work h1, .work p { color: var(--bs-white); }
.work h4 { color: var(--bs-white); line-height: 25px; margin: 0px; }
.work h4 span { font-size: 16px; font-weight: 400; }
.work h4, .work p { font-size: 30px; }
.work hr { border-color: #1576B1; max-width: 250px; margin: 30px 0px; opacity: 1; }

.carousel-control-next, .carousel-control-prev { opacity: 1; width: 32px; }
.carousel-control-prev { margin-left: -60px; }
.carousel-control-next { margin-right: -60px; }
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23075F94'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); }
.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23075F94'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

.clients { clear: both; margin-top: 40px; text-align: center; width: 100%; }

.reviews { clear: both; overflow: hidden; padding: 5% 0px; width: 100%; }
.reviews .container-fluid { width: 2176px; }
.reviews .panel { margin: 20px 0px 0px -8%; width: 100%; }
.reviews .panel-02 { margin: 20px 0px 0px -20%; width: 100%; }
.reviews h1 span { border-bottom: 6px solid var(--light-brown); color: var(--light-blue); display: inline-block; padding: 0px 10px 3px 0px; }
.reviews .box { background-color: var(--bs-white); border-radius: 20px; box-shadow: 0px 0px 19px 9px rgba(0, 0, 0, 0.06); padding: 25px 35px; width: 520px; }
.reviews .box h4 { font-size: 16px; font-weight: 700; line-height: 18px; margin: 0px; }
.reviews .box h4 span { color: #9A9A9A; font-size: 10px; font-weight: 400; }
.reviews .box p { margin-bottom: 2rem; }

footer { background-color: var(--light-gray); border-top: 1px solid var(--light-gray-1); clear: both; padding: 5% 0px 10px; width: 100%; }
footer hr { border-color: var(--light-gray-2); margin: 25px auto; max-width: 175px; }
footer .fa { color: var(--bs-black); font-size: 20px; margin: 0px 8px; }
footer p a { color: var(--bs-black); }
footer .copy { border-color: var(--light-gray-1); color: var(--light-gray-2); font-size: 16px; }
footer .copy .col:last-child { text-align: right; }
footer .copy a { color: var(--light-gray-2); }
footer p a:hover, footer .copy a:hover { color: var(--light-blue); }

.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a { color: var(--light-blue); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--light-blue); }

.intro { clear: both; padding: 10px 0px 4%; width: 100%; }

.article { clear: both; padding: 7% 0px; width: 100%; }
.article .row { margin-bottom: 7%; }
.article .row:last-child { margin-bottom: 0px; }
.article h1, .article p { max-width: 554px; }
.article img { border-radius: 30px; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
	h1 { font-size: 32px; }
	p { font-size: 14px; }
    .col { flex-basis: auto; }
    .navbar-brand { max-width: 48px; }
    .navbar-toggler { border: inherit; }
    .navbar .navbar-nav .nav-link { border-bottom: 1px solid var(--light-gray-1); margin: 0px; }
	.pointers .col { width: 50%; }
	.pointers .col-6 { width: 100%; }
	.what .nav { max-width: 100%; }
	.what .nav .nav-item { margin: 0px 5px; }
	.what .nav .nav-link { font-size: 14px; padding: 0.5rem 1rem; }
	.work h1 br, .intro h1 br { display: none; }
	.work h4, .work p { font-size: 16px; }
	.carousel-control-prev, .carousel-control-next { margin: 0px; }
	.clients .col { margin: 15px 0px; width: 33.3333%; }
	.reviews .container-fluid { width: 1216px; }
	.reviews .col { flex-basis: 0; }
	.reviews .box { border-radius: 10px; padding: 12px 15px; width: 280px; }
	.reviews .box h4 { font-size: 14px; }
	.reviews .box p {font-size: 12px; margin-bottom: 1rem; }
	.reviews .text-end img { width: 15px; }
	footer .copy { font-size: 14px; }
	footer .copy, footer .copy .col:last-child { text-align: center; }
	.article .gx-5 { --bs-gutter-x: 0rem; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	h1 { font-size: 36px; }
	p { font-size: 14px; }
	.navbar-toggler { border: inherit; }
    .navbar .navbar-nav .nav-link { border-bottom: 1px solid var(--light-gray-1); margin: 0px; }
    .pointers .col { width: 50%; }
	.pointers .col-6 { width: 100%; }
	.work h4, .work p { font-size: 20px; }
	.carousel-control-prev {margin-left: -32px; }
	.carousel-control-next { margin-right: -32px; }
	.reviews .container-fluid { width: 1892px; }
	.reviews .box { border-radius: 17px; padding: 20px 25px; width: 449px; }
	footer .fa { margin: 0px 5px; }
	.article h1 { font-size: 35px; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
	h1 { font-size: 48px; }
	.pointers .col-6 { width: 100%; }
	.work h4, .work p { font-size: 24px; }
	.carousel-control-prev {margin-left: -40px; }
	.carousel-control-next { margin-right: -40px; }
	.article h1 { font-size: 48px; }
}

@media only screen and (min-width: 1200px) and (max-width: 1366px) {
	.article h1 { font-size: 57px; }
}