

:root {

	--color-white: #fff;

  --color-black:#000; 

  --color-eb1d25: #eb1d25;

  --color-2e2e2e: #2e2e2e;

  --color-e72121: #e72121;

  --color-3d6ed2: #3d6ed2;

  --color-bcbcbc: #bcbcbc;

  --color-00163c: #00163c;

  --color-f8f8f8: #f8f8f8;

  --color-676767: #676767;

  --color-353131: #353131;

  --color-2d2d2d: #2d2d2d;

  --color-717171: #717171;

  --color-aaaaaa: #aaaaaa;

  --color-cbcbcb: #cbcbcb;

  --color-141414: #141414;

	--transition: all .5s ease-in-out;

	--transition-2: all .8s ease-in-out;

  }

*{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}

html{scroll-behavior: smooth;overflow-x: hidden;}

body{

	animation: transitions 0.75s ;

	font-family: 'Montserrat', sans-serif;

}

@keyframes transitions {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.btn,

.btn:focus,

button,

button:focus,

.form-control:focus

{

	outline: none;

	box-shadow: none;

}

a,a:hover{text-decoration: none;}ul,li{list-style: none;margin: 0;padding: 0;}

.sec-pad

{

	padding: 4.5rem 0;

}

.primary-hdr

{

  font-size: 2rem;

  font-weight: 800;

  color: var(--color-00163c);

  text-transform: uppercase;

}

.primary-hdr span 

{

  color: var(--color-eb1d25);

}

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

scroll bar

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

::-webkit-scrollbar-track 

{

	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

	border-radius: 0px;

	background-color: #F5F5F5;

	width: 6px;

}



::-webkit-scrollbar {

	width: 6px;

	background-color: #F5F5F5;



}



::-webkit-scrollbar-thumb {

	border-radius: 0px;

	box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

	background-color: var(--color-e72121);

}



/*header start*/

.top-header

{
  display: none;
  background: var(--color-eb1d25);

}

.top-header ul  

{

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

}

.top-header ul li 

{

  padding: 0.6rem 0.8rem;

}

.top-header ul li a, .top-header ul li

{

  font-size: 0.9rem;

  color: var(--color-white);

}

.top-header ul li img 

{

  margin-right: 0.3rem;

}

.main-header
{
  padding: 0.5rem 0;
  background: var(--color-white);
}

.main-header ul li a 

{

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--color-2e2e2e);

  padding-left: 0.8rem !important;

  padding-right: 0.8rem !important;

  text-transform: uppercase;

  transition: var(--transition);

}

.main-header .dropdown-toggle::after

{

  display: none;

}

.main-header ul li a:hover,

.main-header ul li.active a

{

  color: var(--color-e72121);

}

.dropdown-menu

{

  top: 3rem;

  padding: 0;

  border: none;

  border-radius: 0.4rem;

  width: 13rem;

  background: var(--color-white);

  position: relative;

  box-shadow: 0px 6px 16px 0px rgba(237, 237, 237, 0.45);

}



.dropdown-menu:before

{

  content: '';

  position: absolute;

  top: -0.8rem;

  left: 1rem;

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 0 8px 13px 8px;

  border-color: transparent transparent var(--color-e72121) transparent;

}

.dropdown-menu a 

{

  padding: 0.5rem 1rem;

  border-bottom: 0.02rem solid rgba(193,198,205,0.5);

  font-size: 0.85rem;

  font-weight: 500;

  transition: var(--transition);

}

.dropdown-menu a:hover

{

  background: var(--color-e72121);

  border-color: var(--color-e72121);

  color: var(--color-white) !important;

}

.dropdown-menu a:last-child

{

  border-bottom: none;

  border-bottom-left-radius: 0.4rem;

  border-bottom-right-radius: 0.4rem;

}

.dropdown-menu a:first-child

{

  border-top-left-radius: 0.4rem;

  border-top-right-radius: 0.4rem;

}

.header-social

{

  margin-left: 1rem;
  
}
.header-social ul
{
  display: flex;
}
.header-social ul li
{
  margin: 0 0.2rem;
}
.header-social ul li a

{

  padding: 0.3rem 0.6rem !important;

  background: #00386b;

  color: var(--color-white);

}

/*header end*/



/*banner start*/

.banner

{

  position: relative;

}

.banner-text

{

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  transform: translateY(-50%);

  z-index: 999;

}

.banner-comntent

{

  background: rgba(0,11,29,0.8);

  padding: 3rem 2.5rem 4rem;

}

.banner-comntent h2

{

  font-size: 3.2rem;

  font-weight: 700;

  color: var(--color-white);

  text-transform: uppercase;

}

.banner-comntent p

{

  font-size: 0.8rem;

  font-weight: 500;

  color: var(--color-white);

  margin-bottom: 1.5rem;

}

.banner-comntent a 

{

  padding: 0.8rem 1.8rem;

  font-size: 0.8rem;

  font-weight: 700;

  border-radius: 0;

  text-transform: uppercase;

  margin-right: 0.2rem;

  transition: var(--transition);

}

.banner-comntent a.btn-Services,

.banner-comntent a.btn-more:hover

{

  background: transparent;

  border: 0.01rem solid var(--color-white);

  color: var(--color-white);

}

.banner-comntent a.btn-more,

.banner-comntent a.btn-Services:hover

{

  background: var(--color-eb1d25);

  border: 0.01rem solid var(--color-eb1d25);

  color: var(--color-white);

}

.owl-banner .owl-dots {

    position: absolute;

    bottom: 20%;

    z-index: 9999;

    left: 16%;

    display: block;

}

.owl-banner .owl-dot span {

    width: 0.6rem;

    height: 0.6rem;

    border-radius: 50%;

    display: block;

    background: var(--color-bcbcbc);

}

.owl-banner .owl-dot.active span {

    background: var(--color-eb1d25);

}

.owl-banner .owl-dot {

    margin: 0 0.2rem !important;

}

/*banner end*/



/*why choose start*/

.why-choose

{

  background: var(--color-f8f8f8);

  background-position: center;

  background-size: cover;

  background-repeat: repeat;

}

.why-choose-box

{
  padding: 2rem 1.8rem;
  background: var(--color-white);
  height: 100%;
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.why-choose-box:before
{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  z-index: -1;
  background: var(--color-eb1d25);
  transition: var(--transition);
}
.why-choose-box:hover:before
{
  height: 100%;
  background: var(--color-676767);
}
.why-choose-box:hover * 
{
  color: var(--color-white);
}
.why-choose-box:hover h4:before
{
  background: var(--color-white);
}

/*.why-choose-box:hover,

.why-choose .col-md-4:nth-child(2) .why-choose-box

{

  background: var(--color-white);

}*/
.why-choose-box figure
{
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 50%;
  border: 0.01rem solid var(--color-eb1d25);
  text-align: center;
  display: flex;
	align-items: center;
	justify-content: center;
  margin: 0 auto 1.5rem;
  transition: var(--transition);
}
.why-choose-box img 

{
  width: 2.5rem;
  transition: var(--transition);
}
.why-choose-box:hover figure
{
  border-color: var(--color-white);
}
.why-choose-box:hover figure img 
{
  filter: brightness(0) invert(1);
}
.why-choose-box h4 

{

  font-size: 1rem;

  font-weight: 600;

  color: var(--color-00163c);

  position: relative;

  min-height: 3.2rem;

  margin-bottom: 1.2rem;

}

.why-choose-box h4:before

{

  content: '';

  position: absolute;

  bottom: 0;

  width: 40%;

  left: 50%;

  height: 0.01rem;

  background: var(--color-00163c);

  transform: translateX(-50%);

}

.why-choose-box p 

{

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--color-676767);

  margin-bottom: 0;

}

/*why choose end*/



/*safety supplies start*/

.safety-supplies figure

{

  position: relative;

  height: 27rem;

} 

.safety-supplies figure img 

{

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.years-of-experience

{

  width: 30rem;

  position: absolute;

  bottom: 0;

  left: 0;

  background:rgba(0, 0, 0, 0.6);

  padding: 2rem 1.2rem;


}

.years-of-experience-box

{

  width: 80%;

  position: relative;
  padding-left: 1rem;

}

.years-of-experience:before

{

  position: absolute;

  content: '';

  top: 5%;

  right: 5%;

  width: 90%;

  height: 90%;

  border: 0.3rem solid var(--color-white);


}

.years-of-experience-box h3 

{

  font-size: 1.2rem;

  color: var(--color-white);

  font-weight: 800;

  text-transform: uppercase;

}

.years-of-experience-box h2

{

  font-size: 3.5rem;

  color: var(--color-eb1d25);

  font-weight: 700;

  text-transform: uppercase;

}

.years-of-experience-box h4

{

  font-size: 1rem;

  color: var(--color-white);

  font-weight: 800;

  text-transform: uppercase;

}



.safety-supplies .primary-hdr

{

  padding-right: 10%;

}

.safety-supplies p, .bd_safety

{

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--color-676767);

}

.bd_safety h2, .bd_safety h3, .bd_safety h4{

  font-size: 2rem;

  font-weight: 800;

  color: var(--color-00163c);

  text-transform: uppercase;

}

.bd_safety h2 strong, .bd_safety h3 strong, .bd_safety h4 strong{

      color: var(--color-eb1d25);

}



.safety-supplies ul  

{

  display: flex;

  flex-wrap: wrap;

  margin: 2rem 0 0;

}

.safety-supplies ul li  

{

  width: 33.33%;

  padding-right: 1rem;

}

.safety-supplies ul li h5 

{

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--color-676767);

    line-height: 1.3;

}

.safety-supplies ul li h5 span 

{

  display: block;

  font-size: 2.1rem;

  font-weight: 700;

  color: var(--color-eb1d25);

}

.btn-learn

{

  padding: 0.8rem 1.5rem;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--color-353131);

  border: 0.01rem solid var(--color-353131);

  border-radius: 0;

  margin-top: 1.2rem;

  transition: var(--transition);

}

.btn-learn:hover

{

  background: var(--color-eb1d25);

  border-color: var(--color-eb1d25);

  color: var(--color-white);

}

/*safety supplies end*/



/*our service start*/

.our-service

{

  background: #00386b;

}
.our-service .primary-hdr
{
  color: var(--color-eb1d25);
}

.our-service-box

{
  padding: 2rem 1.5rem;
  background: var(--color-white);
  height: 100%;
  transition: var(--transition);
  position: relative;
  z-index: 1;
  text-align: center;
  box-shadow: 0px 0px 9.8px 0.2px rgba(0, 0, 0, 0.2);
}
.our-service-box:before
{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  background: var(--color-676767);
  transition: var(--transition);
  z-index: -1;
}
.our-service-box:hover:before
{
  height: 100%;
}
.our-service-box figure
{
  width: 8rem;
  height: 8rem;
  padding: 1rem;
  border: 0.01rem solid var(--color-eb1d25);
  display: block;
  transition: var(--transition);
  margin: 0 auto 24px;
}
.our-service-box figure img 
{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(0.9);
}
.our-service-box:hover figure
{
  border-radius: 50%;
  background: var(--color-white);
}
.our-service-box:hover * 
{
  color: var(--color-white);
}
.our-service-box:hover .btn-more
{
  color: var(--color-white);
  border-color: var(--color-white);
}
.our-service-box:hover .btn-more:hover
{
  border-color: var(--color-eb1d25);
}

.our-service-box h4

{

  font-size: 1.1rem;

  font-weight: 800;

  color: var(--color-2d2d2d);

  margin: 2rem 0 1rem;

}

.our-service-box p 

{

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--color-717171);

  min-height: 4rem;

  margin-bottom: 0;

}

.our-service-box .btn-more

{

  padding: 0.8rem 1.5rem;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--color-eb1d25);

  border: 0.01rem solid var(--color-eb1d25);

  border-radius: 0;

  margin-top: 1.2rem;

  transition: var(--transition);

}

.our-service-box .btn-more:hover

{

  background: var(--color-eb1d25);

  color: var(--color-white);

}

/*our service end*/





.monthly-specials

{

  padding: 5rem 0;

  background: var(--color-white);

}

.monthly-specials h2 

{

  font-size: 2rem;

  font-weight: 700;

  color: #00386B;

  text-transform: uppercase;

  margin-bottom: 2rem;

}
.monthly-specials h2 span 
{
  color: #EB1D25;
}
.monthly-specials h3 

{

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--color-white);

  text-transform: uppercase;

  margin: 0;

}

.monthly-specials h3 a 

{

  color: var(--color-white);

  margin: 0 1rem;

}
.monthly-specials h3 a.bd_btn
{
  border-color:#00386B;
  background: #00386B;
}
.monthly-specials h3 a img 

{
  width: 1.5rem;
  margin-right: 0.5rem;

}
.monthly-specials h3 a.bd_btn:hover
{
  border-color: var(--color-eb1d25);
}
.monthly-specials h3 a.bd_btn:first-child
{
  border-color:var(--color-eb1d25);
  background: var(--color-eb1d25);
}
.monthly-specials h3 a.bd_btn:first-child:hover
{
   border-color:#00386B;
  background: #00386B !important;
}


.customer-say

{

  background-size: cover !important;

  background-position: center !important;

  background-blend-mode: overlay !important;

  padding-bottom: 4rem;

}

.customer-say p 

{

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--color-white);

}

.customer-say .owl-dots

{

  margin-top: 2rem;

}

.customer-say .owl-dot {

    margin: 0 0.2rem !important;

}

.customer-say .owl-dot span {

    width: 0.6rem;

    height: 0.6rem;

    border-radius: 50%;

    display: block;

    background: var(--color-bcbcbc);

}

.customer-say .owl-dot.active span {

    background: var(--color-eb1d25);

}



.gallery p 

{

  font-size: 0.8rem;

  font-weight: 500;

  color: var(--color-717171);

}

.gallery figure

{

  margin-bottom: 0.5rem;

}

.gallery figure img 

{

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.gal-col-1 figure:nth-child(1)

{

  height: 16rem;

}

.gal-col-1 figure:nth-child(2)

{

  height: 20rem;

}

.gal-col-2 figure:nth-child(1)

{

  height: 21rem;

}

.gal-col-2 figure:nth-child(2)

{

  height: 15rem;

}

.gal-col-3 figure

{

  height: 18rem;

}



/*footer start*/

.footer-main

{
  padding: 4rem 0 3rem;
  position: relative;
  background-size: cover !important;
  background-position:top center !important;
}
.footer-main:before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 23 67 / 80%);
}

.footer-main h4 

{

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--color-aaaaaa);

  margin-bottom: 1.2rem;

}

.footer-main ul li a 

{

  font-size: 0.8rem;

  font-weight: 500;

  color: var(--color-cbcbcb);

  display: block;

  margin: 0.3rem 0;

}

.footer-main p 

{

  font-size: 0.8rem;

  font-weight: 500;

  color: var(--color-cbcbcb);

  display: block;

  margin: 0.3rem 0;

  display: flex;

}

.footer-main p span 

{

  width: 35%;

}

.copyright

{

  background: var(--color-141414);

  padding: 0.5rem 0;

}

.copyright p 

{

  margin: 0;

  font-size: 0.8rem;

  font-weight: 500;

  color: var(--color-white);

}

.copyright p span 

{

  color: var(--color-e72121);

}

.copyright p a 

{

  color: var(--color-white);

}

/*footer end*/