@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*
// <weight>: Use a value from 100 to 900
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;

// <weight>: Use a value from 100 to 900
font-family: "Jost", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
*/

:root {
	--font-h: "Jost", sans-serif;
	--font-p: "Montserrat", sans-serif;
	--color-i: #851413; 
}

.bg-i { background-color: var(--color-i); }
.txt-i { color: var(--color-i); }
.brdr-i { border-color: var(--color-i); }

.br { margin-bottom: 15px; }

html, body {
	width: 100%;
	height: 100%;
	margin:0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* To make the page fade-in on load. Make sure below script is added in load_end.php for it to work else the page will be blank */
/* <script>window.addEventListener("load", function () { document.body.classList.add("loaded"); });</script> */
body { opacity: 0; transition: opacity 1s ease-in-out; }
body.loaded { opacity: 1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-h);
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 500;
	margin: 0;
	line-height: 1.2;
}
h1 { font-size: 45px; }
h2 { font-size: 40px; }
h3 { font-size: 33px; }
h4 { font-size: 27px; }
h5 { font-size: 23px; }
h6 { font-size: 18px; }

p {
	font-family: var(--font-p);
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	margin: 0;
}

ol, li, ul {
	font-family: var(--font-p);
	font-style: normal;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
}

li { margin-bottom: 5px; }

a, a:visited {
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	color: var(--color-i);
	transition: all 0.2s;
}
a:hover, a:focus, a:active { text-decoration: none; color: #000; outline: none; }



/* CUST_AMINATION
============================================================================================================================== */

@-webkit-keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } }
@keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } }



/* HEADER
============================================================================================================================== */

header .div-logo {
	position: absolute;
	max-width: 150px;
	top: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media only screen and (max-width: 1199.50px) { header .div-logo { max-width: 120px; } }
@media only screen and (max-width: 768.50px) { header .div-logo { max-width: 100px; } }


header .row-contact { background-color: var(--color-i); color: #FFF; padding: 20px 0 20px 0; }
header .row-contact p { font-size: 15px; }
header .bg-curv-top-left {
	background: url('../imgs/BGs/header-logo-BG.png');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: auto;
}
.breadcrumb {
	/* background: url('../imgs/BGs/bg-3.jpg'); */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../imgs/BGs/bg-3.jpg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}
.breadcrumb h1, .breadcrumb p, .breadcrumb a, .breadcrumb a:visited { color: #FFF; }
.breadcrumb a:hover, .breadcrumb a:focus, .breadcrumb a:active { text-decoration: underline; color: #FFF; }



/* NAVBAR
============================================================================================================================== */

.nav-main {
	border: 0;
	border-radius: 0;
	transition: all 0.3s ease-in-out;
	background: transparent;
}

.nav-main .navbar-nav .nav-link {
	font-family: var(--font-h);
	font-style: normal;
	font-size: 20px;
	font-weight: 600;
	color: var(--color-i);
	/* margin-left: 20px; */
	margin-right: 10px;
	transition: all 0.2s;
}
.nav-main .navbar-nav .nav-link:focus, .nav-main .navbar-nav .nav-link:hover { text-decoration: none; color: var(--color-ii); }
@media only screen and (max-width: 1199.50px) { .nav-main .navbar-nav .nav-link { font-size: 18px; margin-right: 3px; } }
@media only screen and (max-width: 991.50px) { .nav-main .navbar-nav .nav-link { font-size: 13px; margin-right: 3px; } }

.nav-main .dropdown-menu {
	background-color: #9bcbff;
	padding: 0;
	border: 0;
	margin-top: 20px;
	border-left: 3px solid #FFF;
	border-right: 3px solid #FFF;
	border-bottom: 3px solid #FFF;
	border-radius: 0 0 1rem 1rem;
}
.nav-main .dropdown-item {
	font-family: var(--font-h);
	font-style: normal;
	font-size: 24px;
	font-weight: 600;
	color: var(--color-i);
}
.nav-main .dropdown-item:focus, .dropdown-item:hover { text-decoration: none; color: #000; }
.nav-main .dropdown-menu li:last-child .dropdown-item, .dropdown-menu li:last-child .dropdown-item { margin-bottom: -5px; }
.nav-main .dropdown-menu li:last-child .dropdown-item:focus, .dropdown-menu li:last-child .dropdown-item:hover { border-radius: 0 0 1rem 1rem; }

.navbar-toggler { border: 3px solid #000; color: #000; margin-right: 30px; margin-top: 10px; margin-bottom: 10px; }
.wrap-logo { margin-left: 0; width: 100px; }
.nav-main .offcanvas-header .close-btn {
	margin: 10px 10px 10px auto;
	transform: scale(0.8);
	transition: all 0.2s;
} .nav-main .offcanvas-header .close-btn:hover { transform: scale(1.0); }
@media only screen and (max-width: 767.50px) {
	.nav-main .offcanvas {
		background-color: #FFF; 
		height: 100vh; /* Force full height. Using sticky-top (scrolled) somehow not displaying properly without this */
	}
	.nav-main .navbar-nav .nav-link { color: var(--color-i); font-size: 20px; }
	.nav-main .navbar-nav .nav-link:focus, .nav-main .navbar-nav .nav-link:hover { padding-left: 10px; color: var(--color-ii); }
	.nav-main .navbar-nav .nav-item.active { padding-left: 15px; margin-top: 10px; }
	.nav-main .dropdown-menu { margin-top: 0; background-color: #FFF; border: 0 !important; margin-left: 10px; box-shadow: none; }
	.nav-main .dropdown-item { text-decoration: none; font-size: 20px; color: var(--color-i); }
	.nav-main .dropdown-item:focus, .dropdown-item:hover { background-color: #FFF; text-decoration: none; color: var(--color-ii); }
}



/* CAROUSEL
============================================================================================================================== */

.carousel_main:hover { cursor: url('../imgs/icons/pause.png'), auto; }
.carousel-bg {
	background: url('../imgs/carousel/slider-BG.png');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
}



/* FORMS
============================================================================================================================== */

.form-control, .form-select {
	font-family: var(--font-p);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
	border: 3px solid var(--color-i);
	background-color: #FFF;
	border-radius: 20px;
	padding: 10px 15px 10px 15px;
   transition: all 0.2s;
}
.form-control.medium, .form-select.medium {
	padding: 5px 15px 5px 15px;
	font-size: 16px;
}

.form-control-sml, .form-select-sml {
	font-family: var(--font-p);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	color: #000;
	border: 3px solid var(--color-i);
	background-color: #FFF;
	border-radius: 20px;
	padding: 5px 15px 5px 15px;
}



/* BUTTONS
============================================================================================================================== */

.btn-main {
	font-family: var(--font-h);	
	letter-spacing: 0.04em;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	font-size: 18px;
	outline: none;
	color: #FFF;
	padding: 15px 30px 15px 30px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, #b45251, #851413);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: .1s ease-in-out, .8s color; /* the 1s color makes the text color to change slower, in 0.8s */
}
.btn-main .btn-icon { color: inherit; margin-right: 10px; }
.btn-main:hover { background: linear-gradient(135deg, #851413, #b45251); transform: scale(1.05); }
.btn-main:active { transform: translateY(0.15em); }
.btn-main.full { width: 100%; }

.btn-main.blue { background: linear-gradient(135deg, #48acd0, #167ea4); }
.btn-main.blue:hover { background: linear-gradient(135deg, #167ea4, #48acd0); }

.btn-main.white { background: #FFF; color: #000; }
.btn-main.white:hover { background: linear-gradient(135deg, #FFF, #c7f0ff); }

.btn-scrollTop {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	display: none;
	font-family: var(--font-h);	
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	outline: none;
	color: #FFF;
	padding: 20px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #b45251, #851413);
	transition: .1s ease-in-out, .8s color;
	transform: scale(0.8);
}
.btn-scrollTop:hover { transform: scale(1.0); }





/* FOOTER
============================================================================================================================== */

footer {
	/* background-color: var(--color-i); */
	/* background: url('../imgs/BGs/bg-2.jpg'); */
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../imgs/BGs/bg-2.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 100px;
	padding-bottom: 50px;
}

footer p, footer h5, footer a, footer a:visited { color: #FFF; }
footer a:hover, footer a:focus, footer a:active { text-decoration: underline; color: #FFF; }



/* OTHERS
============================================================================================================================== */

.ma-05 { margin: 5px; }
.mb-250 { margin-bottom: 250px; }
.bg-light-grey { background-color: #f9f9f9; }
.br-5-xmd { border-right: 5px solid var(--color-i); }
@media only screen and (max-width: 991.50px) { .br-5-xmd { border-right: 0; } }

.title p { letter-spacing: 2px; }
.title p::before {
	font: var(--fa-font-solid); /* Or --fa-font-regular, --fa-font-brands, etc. */
	content: "\f807";
	margin-right: 10px;
	color: var(--color-i);
}

/* -- */

.wrap-serv-home {
	background: url('../imgs/BGs/bg-1.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 600px;
}
.cont-serv-home { position: absolute; top: -130px; left: 0; right: 0; }
.accordion-serv { border-radius: 30px; }
.accordion-serv .accordion-button { background-color: var(--color-i); color:#FFF; }
.accordion-serv .accordion-button::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
} .accordion-serv .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.accordion-serv .accordion-item { background-color: #FFF; border-color: var(--color-i); }
.accordion-serv .accordion-item:first-child, .accordion-serv .accordion-item:first-child button { border-radius: 20px 20px 0 0; }
.accordion-serv .accordion-item:last-child, .accordion-serv .accordion-item:last-child button { border-radius: 0 0 20px 20px; }

/* -- */

.card-serv {
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card-serv:hover {
	background-color: var(--color-i);
	color: #FFF;
	cursor: pointer;
	box-shadow: none;
}
.card-serv:hover i { color: #FFF; }

/* -- */

.card-yrsExp {
	border-radius: 50%;
	width: 180px;
	bottom: 30px;
	left: -40px;
	padding: 30px;

	animation-name: floating;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.hov-up-10 {
	transition: transform 0.3s ease;
	will-change: transform;
}
.hov-up-10:hover { transform: translateY(-10px); }

.google-map {
	width: 100%;
	height: 450px;
	border: 0;
}