@font-face {
    font-family: 'merriweatherblack';
    src: url('../fonts/merriweather/merriweather-black-webfont.woff2') format('woff2'),
         url('../fonts/merriweather/merriweather-black-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Rubik-Black';
  src: url('../fonts/rubik/Rubik-Black.woff2') format('woff2'),
       url('../fonts/rubik/Rubik-Black.woff') format('woff'),
       url('../fonts/rubik/Rubik-Black.ttf')  format('truetype');
}

@font-face {
  font-family: 'Rubik-Bold';
  src: url('../fonts/rubik/Rubik-Bold.woff2') format('woff2'),
       url('../fonts/rubik/Rubik-Bold.woff') format('woff'),
       url('../fonts/rubik/Rubik-Bold.ttf')  format('truetype');
}

@font-face {
  font-family: 'Rubik-Light';
  src: url('../fonts/rubik/Rubik-Light.woff2') format('woff2'),
       url('../fonts/rubik/Rubik-Light.woff') format('woff'),
       url('../fonts/rubik/Rubik-Light.ttf')  format('truetype');
}

@font-face {
  font-family: 'Rubik-Medium';
  src: url('../fonts/rubik/Rubik-Medium.woff2') format('woff2'),
       url('../fonts/rubik/Rubik-Medium.woff') format('woff'),
       url('../fonts/rubik/Rubik-Medium.ttf')  format('truetype');
}

@font-face {
  font-family: 'Rubik-Regular';
  src: url('../fonts/rubik/Rubik-Regular.woff2') format('woff2'),
       url('../fonts/rubik/Rubik-Regular.woff') format('woff'),
       url('../fonts/rubik/Rubik-Regular.ttf')  format('truetype');
}

@font-face {
  font-family: 'Rubik-SemiBold';
  src: url('../fonts/rubik/Rubik-SemiBold.woff2') format('woff2'),
       url('../fonts/rubik/Rubik-SemiBold.woff') format('woff'),
       url('../fonts/rubik/Rubik-SemiBold.ttf')  format('truetype');
}

html {
	height: 100%;
}

body {
	min-height: 100%;
	position: relative;
	font-family: 'Rubik-Regular';
}

:focus,
button:focus,
a:focus {
	border: 0;
	outline: 0;
}

a {
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
}

a:hover {
	text-decoration: none;
}

p {
	color: #646464;
}

.padding-0 {
	padding: 0;
}

.float-none {
	float: none;
}

.inline-block {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}

.btn-white {
	color: #00045f;
	padding: 10px 0;
	min-width: 180px;
	border-radius: 4px;
	background-color: #ffffff;
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
}

.btn-transparent {
    font-weight: 500;
    padding: 8px 26px;    
    border-radius: 4px;
    align-items: center;
    display: inline-flex;
    border: 1px solid #d7d7d7;
}

.btn-white:hover,
.btn-transparent:hover {
    background-color: #e83a15;
    border-color: #e83a15;
    color: #ffffff;
}

.section-title {
	margin: 0 0 50px;
}

.section-title h3 {
	color: #333;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Rubik-Medium';
}

.section-title h3 span {
	display: block;
	color: #e83a15;
	font-size: 18px;
	margin: 0 0 15px;
}


/**** Navbar Start ****/

.sealant-nav .navbar-brand img {
	height: 95px;
}

.sealant-nav .nav-item {
    margin: 0 20px;
}

.sealant-nav .nav-item:last-child {
	margin-right: 0;
}

.sealant-nav .nav-link {
	color: #fff;
	font-family: 'Rubik-Medium';
}

.stickey-header:after {
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 100%;
	height: 95px;
	position: absolute;
	background-color: #000;	
}

/**** Navbar End ****/

/**** Home page Start ****/

.main-header {
	height: 700px;
	overflow: hidden;
	text-align: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.main-header h3 {
	color: #111;
	font-size: 36px;
	margin: 0 0 20px;
	text-transform: uppercase;
	font-family: 'Rubik-Bold';
}

.main-header h3 span {
	color: #fff;
	display: block;
	font-size: 20px;
	margin: 0 0 15px;
	text-transform: none;
	font-family: 'Rubik-Medium';
}

.certified-by {
	transform: translateY(-100px);
}

.certified-by h5 {
	color: #fff;
	margin: 0 0 20px;
	text-transform: uppercase;
	font-family: 'Rubik-Medium';
}

.accredited {
	padding: 30px;
	border-radius: 4px;
	background-color: #fff;
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
}

.what-do {
	padding: 70px 0;
}

.about-content h3 {
	color: #333;
	font-size: 30px;
	margin: 0 0 30px;
	font-family: 'Rubik-Bold';
}

.about-content h3 span {
	color: #e83a15;
	display: block;
	font-size: 20px;
	text-transform: uppercase;
	font-family: 'Rubik-Medium';
}

.about-content p {
	color: #646464;
	margin: 0 0 30px;
}

.about-box-layout {
	margin-bottom: 30px;
}

.about-box-layout .item-img {
    position: relative;
    z-index: 1;
}

.about-box-layout .item-img .main-img {
    position: relative;
    z-index: 1;
    text-align: right;
}

.about-box-layout .item-img .sub-img {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: -65px;
    border: 10px solid #ffffff;
    border-radius: 4px;
}

.services {
	padding: 90px 0 70px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.expert-serve {
	height: 265px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.expert-serve:before {
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;	
	position: absolute;
	background-color: rgba(0,0,0,0.5);
}

.expert-serve h5 {
	left: 0;
	right: 0;
	top: 50%;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	font-family: 'Rubik-Bold';
	transform: translateY(-50%);
}

.projects {
	padding: 70px 0;
}

.project-img {
	margin: 0 0 20px;
}

.project-img img {
	border-radius: 4px;
}

.project-list span {
	color: #e83a15;
	display: block;
	margin: 0 0 10px;
	font-family: 'Rubik-Medium';
}

.project-list h4 {
	color: #111;
	font-size: 24px;
	margin-bottom: 12px;
	font-family: 'Rubik-SemiBold';
}

.call-us {
	padding: 60px 0;
}

.call-us h4 {
	color: #333;
	font-size: 30px;
	font-family: 'Rubik-Medium';
}

.call-us h4 img {
	margin-right: 20px;
}

.call-us .btn-white {
	margin: 0 0 20px;
	float: right;
}

.site-footer {
	padding: 70px 0;
	background-color: #000;
}

.footer-links img {
	margin: 0 0 20px;
}

.footer-links p,
.footer-links p a {
	color: #d6d6d6;
	font-size: 16px;
}

.footer-links p span {
	font-family: 'Rubik-Medium';
}

.footer-links h5 {
	color: #fff;
	position: relative;
	margin: 30px 0 40px;
	font-family: 'Rubik-Bold';
}

.footer-links h5:after {
	left: 0;
	width: 40px;
	height: 2px;
	content: '';
	bottom: -20px;
	position: absolute;
	background-color: #fff;
}

.footer-links ul {
	padding-left: 0;
	list-style-type: none;
}

.footer-links ul li {
	margin: 0 0 15px;
}

.footer-links ul li a {
	color: #fff;
}

/**** Home page End ****/

/**** Service page Start ****/

.inner-header {
	height: 370px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.inner-header h3 {
	color: #fff;
	margin-top: 70px;
	font-family: 'Rubik-Bold';
	text-transform: capitalize;
}

.inner-header ul li {
	color: #ccc;
	position: relative;
	margin-right: 15px !important;
}

.inner-header ul li:after {
	top: 0;
	right: -15px;
	color: #fff;
	content:"\f101";
	position: absolute;
	font-family: 'FontAwesome';
}

.inner-header ul li:last-child:after {
	display: none;
}

.inner-header ul li a {
	color: #fff;
}

.service-list {
	padding: 70px 0;
}

.service-list-in {
	margin: 0 0 30px;
}

.service-list-in h4 {
	color: #010101;
	font-size: 30px;
	margin: 0 0 20px;
	font-family: 'Rubik-Bold';	
}

.service-list-in p {
	margin: 0 0 20px;
}

/**** Service page End ****/


/**** Portfolid page Start ****/

.portfolio {
	padding: 70px 0;
}

.portfolio-content {
	text-align: center;	
    transform: translateY(-50px);
    background-color: #ffffff;
    border-radius: 4px;
    padding: 35px 40px 36px;
    margin: 0 20px;
    box-shadow: 0px 1px 0px 0px rgb(212 212 212 / 75%);
    border: 1px solid #e6e6e6;
}

.portfolio-content h3 {
	font-size: 22px;
	margin: 0 0 25px;	
	font-family: 'Rubik-Bold';	
}

.portfolio-content p {
	margin: 0 0 25px;
}

/**** Portfolid page End ****/

/**** Career page start ****/

.career {
	padding: 70px 0;
}

.career .card-header {
	padding: 0;
}

.career .card-header .btn {
	color: #333;
	font-size: 18px;
	width: 100%;
    text-align: left;
    padding: 0 0 0 15px;
    height: 68px;
    display: flex;
    align-items: center;
    flex: 0 0 100%;
}

.career .card-header .btn:hover {
	text-decoration: none;
}

.career .card-header .btn span {
	margin-left: auto;
    width: 68px;
    height: 68px;
    text-align: center;
    display: flex;
    align-items: center;
    background-color: #E7EAF2;
    justify-content: center;
    color: #333;
    font-size: 36px;
}

.career .card-header .btn[aria-expanded="true"] span i {
	transition: all 0.3s ease-in;
}

.career .card-header .btn[aria-expanded="true"] span i{
	transform: rotate(90deg);
}

.career .card-header .btn[aria-expanded="false"] span i{
	transform: rotate(0deg);
}

.career .card-body .btn-white {
	margin: 0 auto;
	display: block;
	max-width: 180px;
}

/**** Career page End ****/


/**** Contact page Start ****/

.contact-form {
	padding: 70px 0;
}

.contact-form h3 {
	color: #333;
	font-size: 30px;
	margin: 0 0 30px;
	font-family: 'Rubik-Bold';
	text-transform: uppercase;
}

.talk {
	margin: 0 0 30px;
}

.talk h6 {
	text-transform: uppercase;
	font-family: 'Rubik-Medium';
}

.talk a {
	color: #646464;
	display: block;
}

.contact-form ul li a {
	width: 50px;
	color: #000;
	height: 50px;
	display: block;
	line-height: 50px;
	text-align: center;
	border-radius: 100%;
	background-color: #F2F2F2;
}

.contact-form ul li a:hover {
	color: #F2F2F2;
	background-color: #000;
}

/**** Contact page End ****/

/*
font-family: 'Rubik-Black';
font-family: 'Rubik-Bold';
font-family: 'Rubik-Light';
font-family: 'Rubik-Medium';
font-family: 'Rubik-Regular';
font-family: 'Rubik-SemiBold';
*/


/* Large desktops and laptops */
@media (min-width: 1024px) {

}

@media (min-width: 1366px) {

}

@media (min-width: 1440px) {

}

@media (min-width: 1920px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

@media (max-width: 991px) {
	
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
	
}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}