/*
    Template Name    : Electrical Plus
	Description		 : Responsive Electrical Template
    Version          : 1.0
*/

/*
================================================
/* Table of Content
==================================================

1. Fonts - Roboto and Opensans
2. Common CSS
3. Loader CSS
4. Top Wrapper
5. Logo Bar 
6. Navigation
7. Slider Area
8. Home Services
9. Call to Action
10. Home About Us
11. Counters
12. Our Team Wrapper
13. Client Testimonials
14. Our Blog
15. Breadcrumb Wrapper
16. Inner page Wrapper
17. About Wrapper
18. Services Wrapper
19. FAQ Wrapper
20. Oops Wrapper
21. Gallery Wrapper
22. Contact Wrapper
23. Footer Wrapper
24. Media Quires 

/*
================================================
1. Fonts - Roboto and Opensans
================================================
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400,600,700");

/*
================================================
2. Common CSS
================================================
*/
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.57143;
  font-weight: 400;
  color: #2d2e2e;
}
  .blog-wrapper {
            position: relative;
        }
.blog-wrapper::before {
  background-image: url(/images/bg-08-update.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  background-blend-mode: multiply;
  content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  margin-top: 0;
}

a {
  color: #666666;
  transition: all 0.3s ease 0s;
}

a:hover {
  color: #f25d06;
  text-decoration: none;
}

a,
a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: none;
}

.btn,
.btn * {
  transition: all 0.3s ease 0s;
}

.btn {
  border-width: 2px;
  margin-bottom: 7px;
  margin-top: 7px;
  padding: 8px 22px;
  z-index: 1;
}

.btn:hover {
  color: #2d2e2e;
}

.light-bg {
  background: #f5f5f5;
}

i {
  transition: all 0.4s ease-in-out 0s;
}

.transition3s {
  transition: all 0.3s ease-in-out 0s;
}

ul,
li {
  list-style: outside none none;
}

.space-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.m-bot-40 {
  margin-bottom: 40px;
}

.m-top-40 {
  margin-top: 40px;
}

.pad-bottom-0 {
  padding-bottom: 0 !important;
}

div.title {
  text-align: center;
  margin: 0 0 40px;
}

div.title h2 {
  color: #002752;
  font-weight: 600;
  font-size: 35px;
  margin: 0 0 20px;
}

div.title span {
  border-color: #494949;
  border-style: solid;
  border-width: 2px 0;
  display: inline-block;
  font-size: 30px;
  padding: 20px;
}

div.title img {
  left: 50%;
  margin-left: -34px;
  padding: 12px 0 0;
  position: absolute;
}

#scrollUp {
  background: #f25d06;
  border-radius: 50%;
  bottom: 100px;
  color: #fff;
  display: block;
  font-size: 25px;
  height: 40px;
  line-height: 0;
  position: fixed;
  right: 20px;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.5s cubic-bezier(0, 0, 0, 1) 0s;
  width: 40px;
  z-index: 1000;
}

#scrollUp:hover {
  background: #000;
  color: #fff;
}

#scrollUp i {
  display: block;
  padding-top: 5px;
}

.fix:after,
.fix:before {
  content: "";
  display: table;
}

.fix:after {
  clear: both;
}

.btn:before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0 50% 0 0;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
  background: #ffba00;
  border: 1px solid #ffba00;
  border-radius: 30px;
}

.btn {
  color: #000000;
  display: inline-block;
  font-weight: 400;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  padding: 14px 50px;
  transition: 0.5s;
  text-transform: uppercase;
  position: relative;
  transition: all 0.5s linear 0s;
  border: 1px solid #f25d06;
  background: #f25d06;
  border-radius: 30px;
}

.btn:hover {
  color: #000;
}

.btn:hover:before,
.btn:active::before {
  transform: scaleY(1);
}

/*
================================================
3. Loader CSS
================================================
*/
#dvLoading {
  background: url(../images/loader-01.gif) no-repeat center center #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999999;
}

/*
================================================
4. Top Wrapper
================================================
*/
header {
  width: 100%;
  z-index: 99;
}

.top-wrapper {
  padding: 10px 0;
  background: #f25d06;
  color: #fff;
}

.affix .top-wrapper {
  margin-top: -55px;
}

.affix.fadeInDown {
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: fadeInDown !important;
  animation-play-state: running;
  animation-timing-function: ease;
}

.fadeInDown {
  animation-name: none !important;
}

.swingOutX {
  animation-name: none !important;
}

.top-wrapper ul.header-social-icons {
  float: right;
  margin: 0;
  padding: 2px 0 0;
}

.top-wrapper .top-wraper-left ul li:first-child {
  padding-left: 0;
}

.top-wrapper .header-social-icons li {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 10px;
  transition: all 0.3s ease-in-out 0s;
}

.top-wrapper .header-social-icons li a {
  color: #fff;
}

.top-wraper-left .header-social-icons li i {
  padding: 0 6px 0 0;
}

/*** Top header add ***/
.top-header-add ul {
  margin: 0;
}

.top-header-add li {
  float: left;
  list-style: outside none none;
  margin-right: 30px;
  width: auto;
  font-size: 14px;
}

.top-header-add li:last-child {
  margin-right: 0;
}

.top-header-add li a {
  color: #fff;
}

.top-header-add li i {
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin-right: 10px;
  text-align: center;
}

/*
================================================
5. Logo Bar 
================================================
*/
.logo-bar {
  float: left;
  padding: 0;
  width: 100%;
  background: #fff;
  height: 75px;
}

.affix .logo-bar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.118);
}

/*
================================================
6. Navigation
================================================
*/
div.logo-bar .mainmenu-area {
  padding: 0;
}

.navbar-header {
  display: block;
}

.navbar-header .navbar-toggle {
  display: none;
}

.mainmenu-area {
  position: relative;
}

.mainmenu-area ul.nav.navbar-nav li a {
  color: #002752;
  display: inline-block;
  font-weight: 600;
  line-height: 20px;
  padding: 18px 15px 14px;
  text-transform: uppercase;
  border-bottom: 4px solid #fff;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: #002752;
  background: none;
  border-bottom: 4px solid #ffba00;
}

.mainmenu-area ul.nav.navbar-nav li a:hover,
.mainmenu-area ul.nav.navbar-nav li.active a {
  color: #002752;
  background: none;
  border-bottom: 4px solid #ffba00;
}

.mainmenu-area ul.nav.navbar-nav li {
  display: inline-block;
  float: none;
}

.navbar-default {
  background-color: inherit;
  border-color: inherit;
}

.navbar {
  border-radius: 0;
  min-height: auto;
  margin: 0;
  border: none;
}

.navbar-collapse {
  float: right;
  padding: 0;
}

.navbar-header.inner:after {
  border-left: 40px solid rgba(0, 0, 0, 0);
  border-right: 40px solid rgba(0, 0, 0, 0);
  border-top: 20px solid #ffffff;
  bottom: -45px;
}

.navbar-header {
  float: left;
  padding: 0;
  position: absolute;
  top: 0px;
  z-index: 10;
}

.navbar-header .navbar-brand {
  padding: 0;
}

.affix .navbar-header .navbar-brand {
  display: none;
}

.affix .navbar-collapse {
  float: left;
}

/* .navbar-header img {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.118);
} */
.affix .navbar-header:after {
  display: none;
}

.affix .navbar-brand > img {
  width: 79%;
}

/* DropDown Menu Css */
ul.nav.navbar-nav li ul {
  left: 0;
  position: absolute;
  top: 250%;
  width: 220px;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
  background: #000;
  padding: 0;
}

ul.nav.navbar-nav li ul.sub-menu li a {
  color: #fff !important;
}

ul.nav.navbar-nav li:hover ul {
  top: 100%;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}

.mainmenu-area ul.nav.navbar-nav li ul li {
  border-bottom: 1px solid #3a3a3a;
  display: block;
  position: relative;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.mainmenu-area ul.nav.navbar-nav li ul li:hover:after {
  width: 100%;
}

.mainmenu-area ul.nav.navbar-nav li ul li a {
  color: #fff;
  width: 100%;
  padding: 17px 15px 13px;
  border: none;
}

.mainmenu-area ul.nav.navbar-nav li ul li:last-child:after {
  display: none;
}

.mainmenu-area ul.nav.navbar-nav li ul li:last-child {
  border: 0px solid;
}

.mainmenu-area ul.nav.navbar-nav li ul li a:hover {
  background: #000;
  color: #f25d06;
  border: none;
}

.mainmenu-area ul.nav.navbar-nav li ul li:after {
  background: #f25d06;
  bottom: -1px;
  content: "";
  height: 1px;
  position: absolute;
  right: 0;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 0;
}

.mainmenu-area ul.nav.navbar-nav li a i {
  margin-left: 7px;
  position: relative;
  top: -1px;
}

/*
================================================
7. Slider Area
================================================
*/
.home-slider-area {
  float: left;
  width: 100%;
  position: relative;
}

.single-slide-item-table-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.single-slide-item-table {
  display: table;
  width: 100%;
  height: 550px;
}

a.slide-btn:before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0 50% 0 0;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
  background: #ffba00;
  border: 1px solid #ffba00;
  border-radius: 30px;
}

a.slide-btn {
  color: #fff;
  display: inline-block;
  font-weight: 400;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  padding: 14px 50px;
  transition: 0.5s;
  text-transform: uppercase;
  position: relative;
  transition: all 0.5s linear 0s;
  border: 1px solid #f25d06;
  background: #f25d06;
  border-radius: 30px;
}

a.slide-btn:hover {
  color: #000;
}

a.slide-btn:hover:before,
a.slide-btn:active::before {
  transform: scaleY(1);
}

.home-slider-area .carousel-fade .carousel-inner .active h2 {
  animation-delay: 300ms;
}

.home-slider-area .carousel-fade .carousel-inner .active p {
  animation-delay: 1000ms;
}

.home-slider-area .carousel-fade .carousel-inner .active .slide-btn {
  animation-delay: 2000ms;
}

.single-slide-item h2,
.single-slide-item p,
.single-slide-item .slide-btn {
  animation: 2500ms ease-in-out 0s normal both 1 running bounceInUp;
}

.single-slide-item h2 {
  font-size: 50px;
  color: #f25d06;
  line-height: 50px;
  margin-bottom: 20px;
  font-weight: 600;
}

.single-slide-item h2 span {
  color: #ffba00;
}

.single-slide-item p {
  color: #fff;
  margin-bottom: 20px;
}

.fixed-bg {
  background-attachment: fixed !important;
}

.slide-1,
.text-slide {
  background: url(../images/banner1.jpg);
  background-size: cover;
}

.slide-2 {
  background: url(../images/banner4.jpeg);
  background-size: cover;
}

.slide-3 {
  background: url(../images/banner3.jpg);
  background-size: cover;
}

.single-slide-item {
  position: relative;
  z-index: 1;
}

.single-slide-item:after {
  background: rgba(0, 0, 0, 0.3);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right,
.carousel-fade .carousel-inner .item {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right,
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
  z-index: 2;
}

.welcome-control {
  background: #ffba00;
  border: 1px solid #f25d06;
  color: #333;
  font-size: 24px;
  height: 80px;
  left: 0;
  line-height: 75px;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 80px;
  z-index: 20;
  border-radius: 50%;
  font-size: 33px;
}

.service-icon i,
.single-featured i {
  border-radius: 50%;
  text-align: center;
}

.right.welcome-control {
  left: auto;
  right: -40px;
  padding-left: 20px;
  text-align: left;
}

.left.welcome-control {
  left: -40px;
  padding-right: 20px;
  text-align: right;
}

.home-slider-area:hover .right.welcome-control {
  right: -40px;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  border: 1px solid #fff;
}

.home-slider-area:hover .left.welcome-control {
  left: -40px;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  border: 1px solid #fff;
}

.featured-area {
  overflow: hidden;
}

.single-featured {
  cursor: pointer;
}

.single-featured h4 {
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 10px;
}

.single-featured i {
  background: #687074;
  color: #fff;
  display: block;
  font-size: 35px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto 10px;
  width: 80px;
}

.service-icon i,
a.about-btn,
a.get-start-btn,
ul.team-social > li,
ul.work li {
  display: inline-block;
}

.single-featured:hover i {
  background: #002b53;
  color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.home-slider-area .carousel-indicators li.active {
  background: url(../images/banner-icon-active.png) no-repeat center center;
  height: 35px;
  width: 35px;
}

.home-slider-area .carousel-indicators li {
  backface-visibility: visible;
  border-radius: 0;
  height: 35px;
  margin: 5px 7px;
  transition: opacity 0.2s ease 0s;
  width: 35px;
  border-radius: 50%;
  text-align: center;
  background: url(../images/banner-icon-normal.png) no-repeat center center;
}

/*
================================================
8. Home Services
================================================
*/
.home-services-wrapper {
  width: 100%;
  float: left;
  padding: 63px 0 70px;
}

.inner-page-wrapper.home-service-wrapper {
  padding: 30px 0 70px;
}

.home-services-wrapper .title {
  margin: 0;
}

/*** Single Services ***/
.serviceBox {
  background: #fff;
  border: 1px solid #eee;
  padding: 20px 25px;
  border-radius: 5px;
  margin-top: 40px;
  overflow: hidden;
  z-index: 1;
  position: relative;
}

.serviceBox:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: #f25d06;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: -1;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.serviceBox:hover:before {
  left: 0;
}

.serviceBox:after {
  content: "";
  width: 7px;
  height: 0;
  border-radius: 5px;
  background: #282827;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.serviceBox:hover:after {
  height: 100%;
}

.serviceBox .service-icon {
  color: #005bbc;
  margin-bottom: 10px;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.serviceBox .service-icon i {
  font-size: 40px;
}

.serviceBox .title {
  color: #333;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  margin-left: 10px;
  text-transform: capitalize;
}

.serviceBox:hover .title {
  color: #fff;
}

.serviceBox .description {
  color: #777;
  line-height: 25px;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.serviceBox:hover .service-icon,
.serviceBox:hover .description {
  color: #fff;
}

/*
================================================
9. Call to Action
================================================
*/
.call-to-action:before {
  background: #000000 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.75;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.call-to-action {
  height: 500px;
  /* Fixed height as per your original CSS */
  width: 100%;
  float: left;
  /* Keep float if necessary for your layout, otherwise consider flex/grid */
  position: relative;
  /* Needed for absolute positioning of video and overlay */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Hide any overflow from the video */
  color: #fff;
  /* Default text color for content */
}

.call-to-action video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  /* Place video behind the content */
  transform: translate(-50%, -50%);
  background-size: cover;
  background-attachment: fixed;
}

.call-to-action .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Dark overlay for better text readability */
  z-index: 2;
  /* Place overlay between video and content */
}

.call-to-action .container {
  position: relative;
  /* Ensure container content is above the overlay */
  z-index: 3;
  padding: 66px 0 67px;
  /* Maintain original padding for content */
}

.call-to-action h3 {
  font-size: 35px;
  font-weight: 700;
  line-height: 35px;
  margin: 0 0 16px;
  color: #ffba00;
}

.call-to-action p {
  color: #ffffff;
  margin: 0;
  font-size: 18px;
}

.call-to-action .btn {
  color: #ffffff;
  margin: 25px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.call-to-action .btn:hover,
.call-to-action .btn:focus {
  color: #000;
}

/*
================================================
10. Home About Us
================================================
*/
.home-aboutus-wrapper {
  width: 100%;
  float: left;
  padding: 150px 0 70px;
}

/*** About Heading ***/
.about-text h2 {
  color: #494949;
  font-size: 50px;
  line-height: 50px;
  font-weight: 300;
  text-transform: uppercase;
}

.about-text h2 span {
  color: #f25d06;
  display: block;
  font-weight: 700;
}

.about-text img {
  width: auto;
}

.about-text p {
  margin: 0 0 25px;
}

.about-text ul {
  width: 48%;
  display: inline-block;
}

.about-list li {
  color: #2d2d2d;
  font-size: 14px;
  padding: 0 0 8px;
}

.about-list li i {
  color: #f25d06;
  font-size: 18px;
  margin-right: 15px;
  vertical-align: middle;
}

.about-text .btn:before {
  background: #f25d06;
  border: 1px solid #f25d06;
}

.about-text .btn {
  background: none;
  color: #f25d06;
  font-size: 18px;
  font-weight: 600;
}

.about-text .btn:hover,
.about-text .btn:focus {
  color: #fff;
}

/*
================================================
11. Counters
================================================
*/
.counters {
  background: #f6f7f9;
  margin: 0;
  padding: 70px 0 24px;
  position: relative;
  width: 100%;
  float: left;
  text-align: center;
  z-index: 9;
}

.counter {
  margin: 0 0 40px;
}

.counters .counter i {
  transition: all 400ms linear 0s;
  width: 40px;
  height: 40px;
  line-height: 32px;
  border-radius: 50%;
  font-size: 40px;
  display: inline-block;
  color: #f25d06;
}

.counters .counter i img {
  width: auto;
}

.counters .counter .number {
  font-size: 40px;
  margin: 10px 0 5px;
  padding: 0;
  color: #f25d06;
  font-weight: 600;
  display: inline-block;
}

.counters .counter p {
  font-size: 15px;
  margin: 0;
  padding: 0;
  color: #494949;
  font-weight: 500;
}

/*
================================================
12. Our Team Wrapper
================================================
*/
.our-team-wrapper {
  width: 100%;
  float: left;
  padding: 64px 0;
}

.inner-page-wrapper.our-team-wrapper {
  padding: 30px 0 64px;
}

.our-team-wrapper .title {
  margin: 0;
}

/*** Single Section ***/
.single-team-member .img-box {
  position: relative;
  overflow: hidden;
  display: block;
}

.single-team-member .img-box img {
  transition: all 0.5s ease;
  transform: scale(1);
  width: 100%;
}

.our-team-wrapper .single-team-member {
  position: relative;
  display: inline-block;
  margin: 40px 0 0;
  width: 100%;
}

.our-team-wrapper .single-team-member:before {
  pointer-events: none;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 0%;
  right: 0;
  opacity: 0;
  background: #ffba00;
  transition: 0.7s ease;
}

.our-team-wrapper .single-team-member:hover:before {
  opacity: 1;
  height: 100%;
  transition: 0.7s ease;
}

.single-team-member .img-box .overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(0, 43, 83, 0.88);
  width: 100%;
  transform: scale(0.7, 0);
  transition: 0.5s ease-in-out;
}

.single-team-member:hover .img-box .overlay {
  transform: scale(1, 1);
  transition: 0.5s ease-in-out;
}

.single-team-member .inner-box {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

.single-team-member .social {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.single-team-member .social li {
  padding: 0;
  margin: 0 3px;
  display: inline-block;
}

.single-team-member .social li a {
  color: #ffffff;
  transition: color 0.4s ease;
  font-size: 14px;
  display: inline-block;
}

.single-team-member .img-box .overlay ul li a {
  height: 42px;
  width: 42px;
  color: #fff;
  border-radius: 50%;
  background: transparent;
  text-align: center;
  line-height: 44px;
  border: 1px solid #fff;
  transition: 0.5s ease;
}

.single-team-member .img-box .overlay ul li a:hover {
  background-color: #fff;
  border-color: #fff;
  color: #f25d06;
  transition: 0.5s ease;
}

.single-team-member h4 {
  color: #002752;
  margin-top: 0;
  margin-bottom: 6px;
  font-weight: 600;
}

.single-team-member .author-info {
  position: relative;
  overflow: hidden;
  border: 1px solid #ededed;
  padding: 15px 20px;
}

.single-team-member p {
  color: #282828;
  transition: 0.5s ease;
  margin-bottom: 8px;
}

.single-team-member .text {
  margin-top: 15px;
}

.single-team-member ul {
  border-top: 1px solid #ededed;
  padding-top: 12px;
  margin: 0;
}

.single-team-member ul li {
  color: #333;
  margin: 4px 0;
}

.single-team-member ul li a {
  color: #333;
}

.single-team-member .author-info ul li i {
  font-size: 11px;
  background: #f25d06;
  margin-right: 10px;
  color: #fff;
  border-radius: 1px;
  height: 15px;
  width: 15px;
  text-align: center;
  line-height: 15px;
}

/*
================================================
13. Client Testimonials
================================================
*/
.testimonials-wrapper {
  padding: 65px 0 39px;
  float: left;
  background: url(../images/bg-03.jpg) repeat left top;
  text-align: center;
  width: 100%;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.contact-us {
  padding: 65px 0 39px;
  float: left;
 
  text-align: center;
  width: 100%;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.testimonials-wrapper h2 {
  color: #fff;
}

/*** Testimonials Inner ***/
.testimonials-wrapper .owl-drag {
  padding: 0 0 20px;
}

.testimonials-wrapper .item blockquote p::before {
  content: "";
  float: left;
  font-family: "Fontawesome";
  margin-right: 10px;
}

.testimonials-wrapper .item blockquote {
  border-left: medium none;
  margin: 0;
  padding: 50px;
  background: #fff;
}

.testimonials-wrapper .item blockquote small {
  color: #363636;
  display: block;
  font-size: 80%;
  font-weight: 600;
  line-height: 1.42857;
}

.testimonials-wrapper .item blockquote p {
  font-size: 14px;
  color: #777;
  line-height: 25px;
}

.testimonials-wrapper .owl-carousel .owl-nav.disabled {
  display: block;
}

.testimonials-wrapper .owl-theme .owl-nav [class*="owl-"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  font-size: 25px;
  color: #cacaca;
}

.testimonials-wrapper .owl-prev {
  left: 0px;
  position: absolute;
  top: 35%;
}

.testimonials-wrapper .owl-next {
  right: 0px;
  position: absolute;
  top: 35%;
}

/*
================================================
14. Our Blog
================================================
*/
.blog-wrapper {
  padding: 150px 0 70px;
  float: left;
  width: 100%;
}

.blog-wrapper .title {
  margin: 0;
}

.inner-page-wrapper.blog-wrapper {
  padding: 28px 0 70px;
}

/*** Single blog section ***/
.blog-wrapper .single-blog-section {
  position: relative;
  margin-top: 40px;
  box-shadow: 0 10px 30px rgba(50, 50, 50, 0.2);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.blog-wrapper .single-blog-section img {
  width: 100%;
  background-color: #ffffff;
}

.single-blog-section:hover {
  transform: translateY(-10px);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.blog-wrapper.single-blog-section:hover.blog-wrapper .date-box .inner .date {
  color: red;
}

.blog-info > a {
  color: #002752;
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  font-style: italic;
}

.blog-wrapper .blog-info {
  padding: 20px;
  background: #ffffff;
}

.blog-wrapper .blog-info i {
  margin-right: 5px;
}

.blog-wrapper .blog-info .fa.fa-user {
  margin-left: 12px;
}

.blog-wrapper .blog-info h3 {
  border-bottom: 1px solid #f5f7f9;
  color: #2d2d2d;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 0 0 15px;
}

.blog-wrapper .blog-info p {
  color: #7d868c !important;
  font-size: 15px;
  line-height: 24px;
  padding-bottom: 20px;
  padding-top: 10px;
}

.blog-wrapper .blog-info .btn {
  margin: 0 0 20px;
}

.blog-wrapper .blog-info span {
  padding: 0 3px;
  font-size: 20px;
}

.blog-info > h6 {
  margin-top: 15px;
}

.date-box {
  left: 0;
  position: absolute;
  top: 185px;
}

.blog-wrapper .date-box .inner .date {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 1px;
  text-transform: uppercase;
}

.blog-info > h5 {
  color: #2a363f;
  display: inline-block;
  font-weight: 500;
  margin-right: 10px;
  font-style: italic;
}

.blog-wrapper .date-box .inner {
  background: #2a363f none repeat scroll 0 0;
  height: 55px;
  margin-bottom: 15px;
  text-align: center;
  width: 70px;
}

.blog-wrapper .date-box .inner .date b {
  display: block;
}

/*** Single Blog ***/
.blog-banner img {
  width: 100%;
}

.blog-image {
  overflow: hidden;
  display: block;
}

.image-scale {
  position: relative;
  transform: scale(1.1);
  display: block;
  transition: 0.5s;
}

.image-scale::after {
  position: absolute;
  content: "";
  background: rgba(0, 46, 91, 0.3);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.blog-content a h4 {
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 24px;
}

.blog-meta {
  position: relative;
  top: -40px;
  background: #002752;
  width: 168px;
  padding: 5px 10px;
  left: 10px;
}

.blog-meta span {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding-right: 10px;
}

.blog-title {
  margin-top: -10px;
}

.blog-search-option input {
  padding: 5px 15px;
  width: 70%;
  border: 1px solid #ccc;
  height: 42px;
  vertical-align: top;
}

.blog-search-option {
  margin-bottom: 30px;
  display: block;
}

.blog-search-option button {
  background: #002752;
  border: 1px solid #002752;
  font-size: 17px;
  padding: 0 10px;
  width: 28%;
  color: #fff;
  height: 42px;
  line-height: 40px;
  transition: all 0.3s ease 0s;
}

.blog-search-option button i {
  line-height: 16px;
  font-size: 20px;
  padding: 0px 10px;
}

.blog-search-option button:hover {
  color: #fff;
  background: #252525;
  border: 1px solid #252525;
}

.left-blog h4 {
  border-bottom: 1px solid #ddd;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 0;
  padding: 15px 10px;
  text-transform: uppercase;
  font-weight: 800;
}

.left-blog {
  background: #f9f9f9 none repeat scroll 0 0;
  overflow: hidden;
}

.left-blog ul {
  margin: 0;
}

.left-blog li {
  border-bottom: 1px solid #ddd;
  display: block;
}

.left-blog ul li a {
  color: #666;
  display: block;
  font-size: 14px;
  padding: 10px;
  text-transform: capitalize;
  position: relative;
}

.left-blog ul li a:after {
  position: absolute;
  content: "\f105";
  font-family: FontAwesome;
  right: 12px;
  top: 10px;
  font-size: 16px;
}

.popular-tag.left-blog ul li a:after {
  display: none;
}

.recent-post {
  padding: 0 10px;
}

.recent-single-post {
  border-bottom: 1px solid #ddd;
  display: block;
  overflow: hidden;
  padding: 15px 0px;
}

.recent-single-post:last-child {
  border-bottom: none;
}

.post-img {
  display: inline-block;
  float: left;
  padding: 0 5px;
  width: 35%;
  margin: 5px 0 0;
}

.post-img img {
  height: auto;
  max-width: 100%;
}

.pst-content {
  display: inline-block;
  float: left;
  width: 65%;
  padding-left: 10px;
}

.pst-content p a:hover,
.left-blog ul li a:hover {
  color: #002752;
}

.left-blog-page {
  margin-top: 30px;
}

.pst-content p a {
  color: #666;
  font-size: 15px;
}

.blog-tags {
  padding: 1px 0;
}

.left-blog li:last-child {
  border-bottom: 0;
}

.popular-tag.left-blog ul li a:hover {
  color: #fff;
}

.popular-tag.left-side-tags.left-blog ul {
  padding: 0 10px 10px;
}

.left-tags .left-side-tags ul li {
  border-bottom: 0;
  display: inline-block;
  margin: 5px 0px;
}

.left-tags .left-side-tags ul li a {
  padding: 3px 10px;
  width: auto;
  border: 1px solid #002752;
  background: #002752;
  color: #fff;
  border-radius: 2px;
  font-weight: 700;
  font-size: 14px;
}

.left-tags .left-side-tags ul li a:hover {
  border: 1px solid #252525;
  background: #252525;
}

.left-side-tags h4 {
  margin-bottom: 15px;
}

.comments-heading h3,
h3.comment-reply-title {
  border-bottom: 1px solid #e8e8e9;
  font-size: 18px;
  margin: 0 0 20px;
  padding: 0 0 5px;
  text-transform: capitalize;
  font-weight: 800;
}

.comments-list ul li {
  margin-bottom: 25px;
}

.comments-list-img {
  float: left;
  margin-right: 15px;
}

.comments-content-wrap {
  color: #666;
  font-size: 14px;
  margin: 0 0 15px 60px;
  padding: 10px;
  position: relative;
}

.blog-content p {
  font-size: 15px;
}

.blog-content blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 15px;
  border-left: 5px solid #002752;
  font-style: italic;
}

.blog-content blockquote p {
  font-size: 18px !important;
  line-height: 28px;
}

.author-avatar {
  display: inline-block;
  float: left;
  width: 10%;
}

.author-description h2 {
  color: #666;
  font-size: 20px;
  text-transform: uppercase;
}

.author-description h2 a {
  color: #333;
}

.comments-content-wrap span b {
  margin-right: 5px;
}

.comments-content-wrap span a:hover {
}

span.post-time {
  margin-right: 5px;
}

.comments-content-wrap p {
  color: #666;
  margin-top: 10px;
}

li.threaded-comments {
  margin-left: 50px;
}

.comment-respond {
  margin-top: 20px;
}

span.email-notes {
  color: #42414f;
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}

.comment-respond p {
  color: #666;
  margin-bottom: 5px;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"] {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  height: 32px;
  margin-bottom: 15px;
  padding: 0 0 0 10px;
  width: 100%;
}

.comment-respond textarea#message-box {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  max-width: 100%;
  padding: 10px;
  height: 130px;
  width: 100%;
}

.comments-content-wrap span a {
  color: #333;
}

.comments-content-wrap span a:hover {
  color: #002752;
}

.comment-respond .add-btn.contact-btn {
  background: #002752;
  color: #fff;
  display: block;
  font-size: 16px;
  margin-top: 5px;
  padding: 12px 20px;
  transition: 0.4s;
  width: auto !important;
  margin-top: 20px;
  border: 1px solid #002752;
  text-transform: uppercase;
  font-weight: 700;
}

.comment-respond .add-btn.contact-btn:hover {
  background: #252525;
  border: 1px solid #252525;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 40px 0 0px;
  border-radius: 4px;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #fff;
  background-color: #63c672;
  border: none;
  margin-left: -1px;
  border-radius: 5px;
}

.pagination > li {
  display: inline-block;
  margin: 0px 3px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #252525;
  border-color: #252525;
  cursor: default;
  border-radius: 5px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #fff;
  background-color: #252525;
  border-color: #252525;
  border-radius: 5px;
}

.blog-page-details .left-blog-page {
  margin-top: 0px;
  margin-bottom: 30px;
}

.single-post-comments {
  margin-top: 30px;
}

/*
================================================
15. Breadcrumb Wrapper
================================================
*/
.breadcromb-wrapper {
  background: rgba(0, 0, 0, 0) url("../images/breadcrumb-bg.jpg") no-repeat
    fixed center center / cover;
  position: relative;
  padding: 57px 0 0;
  float: left;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.breadcromb-overlay {
  background: rgba(23, 23, 23, 0.8) none repeat scroll 0 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.breadcromb-left {
  text-align: left;
}

.breadcromb-left > h3 {
  color: #ffffff;
  font-size: 25px;
  text-transform: capitalize;
  text-align: center;
}

.breadcromb-right {
  margin: 0 auto;
  text-align: center;
}

.breadcromb-right ul {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin: 0;
  padding: 10px 40px;
  display: inline-block;
}

.breadcromb-right li {
  color: #fff;
  display: inline-block;
  margin: 0 3px;
  text-transform: capitalize;
}

.breadcromb-right li:last-child {
  color: #f25d06;
}

.breadcromb-right li a {
  color: #fff;
}

.breadcromb-right li:first-child a i {
  color: #fff;
  margin-right: 5px;
}

/*
================================================
16. Inner page Wrapper
================================================
 */
.inner-page-wrapper {
  padding: 150px 0 70px;
  float: left;
  width: 100%;
}

/*
================================================
17. About Wrapper
================================================
 */
.about-wrapper .text {
  font-size: 15px;
}

.about-wrapper h3 {
  font-weight: 600;
  margin: 0 0 8px;
  color: #002752;
}

.about-wrapper .inner p {
  margin: 0 0 30px;
}

.about-wrapper img {
  
  padding: 3px;
  width: 100%;
  height: 515px;
  border-radius: 1rem;
}

/*
================================================
18. Services Wrapper
================================================
 */
.service-details-wrapper {
  padding: 70px 0;
}

.service-details-wrapper .widget {
  clear: both;
  margin-bottom: 0px;
}

.service-details-wrapper .category-nav {
  margin-bottom: 30px;
  margin-left: 0;
  padding: 0;
}

.service-details-wrapper .category-nav li {
  font-weight: 700;
  list-style: outside none none;
  margin: 0;
}

.service-details-wrapper .category-nav li.active a {
  border-color: #002752;
}

.service-details-wrapper .category-nav li a {
  background-color: #f7f7f7;
  border-left: 5px solid rgba(0, 0, 0, 0);
  color: #333333;
  display: block;
  margin-bottom: 5px;
  padding: 12px 20px;
}

.service-details-wrapper .widget.cta {
  background-color: #f5f5f5;
  padding: 30px;
}

.service-details-wrapper .widget.cta h4 {
  font-weight: 800;
}

.service-details-wrapper .widget .btn {
  background-color: #ffffff;
  border-color: #002752;
  border-radius: 0;
  border-width: 1px;
  color: #002752;
}

.service-details-wrapper .widget .btn:hover {
  background-color: #f25d06;
  border-color: #f25d06;
  color: #ffffff;
}

/*** single-wrapper slider ***/
.single-wrapper .owl-pagination {
  display: none;
}

.single-wrapper .item img {
  display: block;
  width: 500px;
  height: auto;
}

.single-wrapper .owl-theme .owl-controls {
  margin-top: 0;
}

.single-wrapper .owl-theme .owl-controls .owl-buttons div {
  width: 20px;
  height: 21px;
  border-radius: 0;
  opacity: 1;
  font-size: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 10px;
}

.single-wrapper .owl-theme .owl-controls.clickable .owl-buttons div:hover {
  opacity: 0.5;
}

.single-wrapper .owl-drag {
  padding: 5px;
  background: #fff;
  padding: 0;
  box-shadow: none;
}

.single-wrapper .owl-nav {
  text-align: center;
}

.single-wrapper .owl-nav div {
  background: #002752;
  border: 0 solid;
  border-radius: 0;
  color: #ffffff;
  font-size: 20px;
  height: 46px;
  line-height: 46px;
  margin: -23px 0 0;
  opacity: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  transition: all 0.4s ease 0s;
  width: 46px;
}

.single-wrapper .owl-nav div:hover {
  color: #fff;
}

.single-wrapper .owl-nav .owl-prev {
  left: 0;
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  transform-origin: left;
  -webkit-transform: perspective(600px) rotateY(90deg);
  -moz-transform: perspective(600px) rotateY(90deg);
  transform: perspective(600px) rotateY(90deg);
}

.single-wrapper :hover .owl-nav .owl-prev {
  -webkit-transform: perspective(600px) rotateY(0deg);
  -moz-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}

.single-wrapper .owl-nav .owl-next {
  right: 0;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  transform-origin: right;
  -webkit-transform: perspective(600px) rotateY(-90deg);
  -moz-transform: perspective(600px) rotateY(-90deg);
  transform: perspective(600px) rotateY(-90deg);
}

.single-wrapper :hover .owl-nav .owl-next {
  -webkit-transform: perspective(600px) rotateY(0deg);
  -moz-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}

/*** Services Content ***/
.services-content {
  float: left;
  width: 100%;
  padding: 20px;
  background: #f5f5f5;
}

.single-wrapper .services-content h2 {
  text-transform: none;
  font-size: 30px;
  margin: 0;
  font-weight: 800;
}

.single-wrapper .services-content p {
  margin-top: 15px;
}

.single-wrapper .img-right {
  overflow: hidden;
  margin-top: 15px;
}

.single-wrapper .img-right .text {
  float: left;
  width: 50%;
}

.single-wrapper .img-right .text h4 {
  margin-bottom: 10px;
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 800;
}

.single-wrapper .img-right ul {
  margin: 0;
}

.single-wrapper ul li::before {
  border-radius: 100%;
  content: "";
  height: 7px;
  left: 0;
  line-height: 9px;
  position: absolute;
  top: 7px;
  width: 7px;
  background: #002752;
}

.single-wrapper ul li {
  margin-right: 5px;
  position: relative;
  padding-left: 15px;
  padding-bottom: 8px;
}

.single-wrapper .img-right img {
  float: left;
  width: 50%;
  border: 5px solid #f6f6f6;
}

.single-wrapper.full .img-right .text {
  width: 100%;
}

/*
================================================
19. FAQ Wrapper
================================================
 */
.faq-wrapper {
  padding: 40px 0 55px;
}

.faq-wrapper .panel-group {
  margin: 30px 0 0;
}

.faq-wrapper .panel {
  border: 0px solid;
  border-radius: 0px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin: 0 0 15px;
}

.faq-wrapper .panel-heading {
  background: none;
}

.faq-wrapper .faq-title a {
  position: relative;
  color: #353535;
  width: 100%;
  display: block;
}

.faq-wrapper .faq-title {
  margin: 0;
  font-weight: 600;
}

.faq-wrapper .faq-title a::after {
  content: "\f068";
  font-family: "FontAwesome";
  top: -4px;
  right: 0;
  position: absolute;
  width: 22px;
  height: 22px;
  line-height: 22px;
  color: #fff;
  border-radius: 100%;
  text-align: center;
  font-size: 13px;
  background: #f25d06;
}

.faq-wrapper .faq-title a.collapsed::after {
  content: "\f067";
  color: #fff;
  background: #252525;
  border-color: transparent;
}

.faq-wrapper .faq-body {
  padding-top: 15px;
  font-size: 13px;
}

.faq-wrapper .faq-image {
  margin-top: 30px;
}

.faq-wrapper .faq-image img {
  border-bottom: 2px solid #eee;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 100%;
}

.faq-wrapper .collapse {
  display: none;
  background: none;
}

.faq-wrapper .collapse.in {
  display: block;
}

/*
================================================
20. Oops Wrapper
================================================
*/
.oops {
  padding: 35px 0;
}

.oops i {
  border-radius: 50%;
  color: #ffffff;
  font-size: 80px;
  height: 100px;
  line-height: 100px;
  margin: 0 0 20px;
  width: 100px;
  background: #002752;
}

.oops h2 {
  color: #000000;
  font-size: 80px;
}

.oops p {
  font-size: 15px;
  margin: 0 0 20px;
}

.oops .btn-home {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #cccccc;
  border-radius: 0;
  color: #333333;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: normal;
  padding: 8px 34px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out 0s;
}

.oops .btn-home:hover,
.oops .btn-home:focus {
  background: #002752;
  border-color: #002752;
  color: #fff;
}

/*
================================================
21. Gallery Wrapper
================================================
*/
.gallery-wrapper {
            padding: 70px 0 35px;
            display: flex;
            justify-content: center;
        }

        .gallery-wrapper .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 25px;
            overflow: hidden;
            width: 300px; /* Set a fixed width for demonstration */
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .gallery-wrapper .picture {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 350px;
            border: 1px solid;
            padding: 10px;
            
        }

        .gallery-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: scale(1);
            transition: 0.5s transform ease, 0.5s opacity ease;
        }

        .gallery-wrapper .item:hover img {
            opacity: 0.8;
            transform: scale(1.1);
            box-shadow: 0 0px 5px 2px #000;
        }

        .gallery-wrapper .text-info {
            width: 100%;
            padding: 15px;
            opacity: 0;
            transition: 0.3s opacity ease;
            background-color: white;
        }

        .gallery-wrapper .item:hover .text-info {
            opacity: 1;
        }

        .gallery-wrapper .text-info .category {
            font-weight: 400;
            font-size: 14px;
            font-style: italic;
            text-transform: uppercase;
            color: #6b7280;
            line-height: normal;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        .gallery-wrapper .text-info h1 {
            font-weight: 500;
            font-size: 20px;
            color: #1f2937;
            margin: 0;
            padding: 0;
        }

        .gallery-wrapper .text-info h1 a {
            color: #1f2937;
            text-decoration: none;
        }

        .gallery-wrapper .text-info h1 a:hover {
            color: #000;
        }
.gallery-wrapper .item-h2 {
  height: auto !important;
}


/*
================================================
22. Contact Wrapper
================================================
*/
.contact-wrapper {
  padding: 150px 0 40px;
}

.side-title {
  float: left;
  margin: 0 0 30px;
  width: 100%;
}

.side-title h2 {
  float: left;
  font-size: 30px;
  line-height: 1;
  margin: 0 0 10px;
  width: 100%;
  font-weight: 800;
}

.side-title > span {
  color: #737373;
  float: left;
  font-size: 15px;
  width: 100%;
}

.sun-contact-form {
  float: left;
  width: 100%;
}

.sun-contact-form > form {
  float: left;
  width: 100%;
}

.field {
  float: left;
  width: 100%;
}

.field label {
  color: #737373;
  float: left;
  font-size: 16px;
  line-height: 1;
  margin: 12px 0 0;
  width: 20%;
  font-weight: 500;
}

.field > input,
.field > textarea {
  background: #f3f3f3 none repeat scroll 0 0;
  float: left;
  height: 48px;
  width: 80%;
  margin: 0 0 10px;
  padding: 0 20px;
  border: 1px solid #f0f0f0;
}

.field > textarea {
  min-height: 238px;
  padding-top: 8px;
}

form .btn {
  float: right;
}

.contact-form .btn {
  background: none;
  margin-bottom: 30px;
}

.widget > ul {
  float: left;
  width: 100%;
}

.widget .contact-info li i {
  font-size: 16px;
}

.contact-info li i {
  margin-right: 10px;
}

.contact-infos {
  float: left;
  margin: 30px 0 0;
  width: 100%;
}

.contact-infos .widget p {
  float: left;
  margin: 0 0 10px;
  width: 100%;
}

.widget-title {
  color: #333333;
  float: left;
  font-size: 20px;
  margin: 0 0 20px;
  width: 100%;
  font-weight: 800;
}

.widget .contact-info li {
  border: 0 none;
  float: left;
  line-height: 2;
  margin: 0;
  padding: 0;
  width: 100%;
}

.social-links > a {
  border: 1px solid #eee;
  color: #7c7c7c;
  float: left;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-right: 10px;
  text-align: center;
  width: 30px;
}

.social-links > a:hover {
  border-color: #002752;
  color: #002752;
}

.widget {
  float: left;
  margin: 0 0 30px;
  width: 100%;
}

.google-map {
  float: left;
  pointer-events: none;
  width: 100%;
  filter: none;
}

.google-map iframe {
  border: medium none;
  height: 420px;
  margin: 0 0 -6px;
  width: 100%;
}

/*
================================================
23. Footer Wrapper
================================================
*/
.hg-footer {
    background-image: url(../images/banner1.jpg);
}
.bg-product{
  background-image: url(../images/bg-product.jpg);
  background-size: cover;
}

.footer-wrapper {
  float: left;
  width: 100%;
}

/*** Footer Top Area ***/
.footer-top-area {
  background: #171717;
  padding: 68px 0 60px;
  opacity: .9;
}

.footer-widget-heading h3 {
  color: #f25d06;
  font-size: 18px;
  padding-bottom: 10px;
  position: relative;
}

.footer-widget-heading h3:before {
  background: #f25d06;
  bottom: -11px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 50px;
}

.footer-widget-content p {
  color: #9fa4af;
}

.footer-about-info-area .footer-widget-content {
  margin-top: 35px;
}

.footer-widget-content {
  margin-top: 30px;
}

.footer-social-menu li a {
  background: #1c1f23 none repeat scroll 0 0;
  border-radius: 2px;
  color: #9fa4af;
  display: block;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}

.footer-social-menu li a:hover,
.footer-widget-menu li a:focus {
  background: #002752;
  color: #ffffff;
}

.footer-widget-menu {
  padding-top: 15px;
}

.footer-widget-menu li {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
}

.footer-widget-menu li a {
  border: 1px solid #363636;
  border-radius: 2px;
  color: #9fa4af;
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 5px 13px;
  text-align: center;
  text-transform: uppercase;
}

.footer-widget-menu li a:hover,
.footer-widget-menu li a:focus {
  background: #002752;
  color: #ffffff;
}

.footer-conatct-menu li a {
  color: #9fa4af;
  font-size: 13px;
}

.footer-conatct-menu li a i {
  padding-right: 10px;
}

.footer-instagram a {
  display: inline-block;
  float: left;
  margin-bottom: 5px;
  overflow: hidden;
  padding: 0 2.5px;
  width: 33.3333%;
}

.footer-instagram a img {
  width: 100%;
  padding: 0px;
  background: #fff;
  margin: 0 0 4px;
  border: 1px solid #f25d06;
}

/*** Copyright Wrapper ***/
.copyright-wrapper {
  background: #101010;
  width: 100%;
  float: left;
  padding: 15px 0;
}

.copyright-wrapper p {
  margin: 0;
  text-align: center;
  color: #b2b2b2;
}

/*
================================================
24. Media Quires 
================================================
*/
@media (min-width: 992px) and (max-width: 1024px) {
  /*** Top Wrapper ***/
  .top-header-add li {
    margin-right: 15px;
  }

  .top-header-add li i {
    height: 25px;
    line-height: 23px;
    margin-right: 5px;
    width: 25px;
  }

  /*** Home Services Wrapper ***/
  .serviceBox .title {
    font-size: 20px;
  }

  /*** Our Team Wrapper ***/
  .single-team-member .author-info {
    padding: 15px;
  }

  /*** Blog Wrapper ***/
  .date-box {
    top: 248px;
  }

  /*** Footer Wrapper ***/
  .footer-social-menu li a {
    height: 30px;
    line-height: 30px;
    width: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /*** Top Wrapper ***/
  .affix .navbar-brand > img {
    width: 78%;
  }

  .top-header-add li {
    margin-right: 15px;
  }

  .top-header-add li i {
    height: 25px;
    line-height: 20px;
    width: 25px;
    margin-right: 5px;
  }

  .navbar-nav {
    float: right;
  }

  .navbar-header .collapse {
    display: block;
  }

  .navbar-collapse {
    padding: 0;
    float: none;
  }

  .mainmenu-area ul.nav.navbar-nav li {
    padding: 0 0 0 20px;
  }

  .mainmenu-area ul.nav.navbar-nav li a {
    padding: 19px 0 21px;
  }

  /***** navigation ******/
  .navbar-header {
    padding: 0;
  }

  .collapse {
    display: block;
  }

  .navbar-collapse {
    padding: 0;
    float: none;
  }

  .navbar-header {
    width: auto;
  }

  /***** CTA ******/
  .call-to-action h3 {
    font-size: 23px;
    margin: 0 0 10px;
    line-height: 23px;
  }

  /*** Blog Wrapper ***/
  .date-box {
    top: 175px;
  }

  .blog-content blockquote {
    padding: 5px 20px;
  }

  .blog-content blockquote p {
    font-size: 16px !important;
    line-height: 24px;
  }

  /*** Footer Wrapper ***/
  .footer-contact {
    margin: 30px 0 0;
  }

  .footer-contact .footer-conatct-menu li {
    padding: 8px 0 0;
  }

  .footer-instagram {
    margin: 30px 0 0;
  }

  .footer-gallery {
    margin: 30px 0 0;
  }

  .footer-instagram a img {
    width: auto;
  }
}

@media (max-width: 767px) {
  /***** Common Styles ******/
  div.title h2 {
    font-size: 25px;
  }

  /***** logo ******/
  .logo-bar img {
    height: auto;
    margin: 0;
  }

  .top-wrapper .pull-right {
    float: none !important;
    text-align: center;
  }

  /***** navigation ******/
  .navbar-brand > img {
    padding-left: 15px;
  }

  .collapse {
    background: #333 none repeat scroll 0 0;
    border: medium none;
    display: block;
    margin: 0;
    padding: 0;
  }

  .navbar-collapse {
    float: none;
  }

  .top-wrapper {
    padding: 0;
  }

  .navbar-header::after {
    display: none;
  }

  .navbar-header {
    display: block;
    padding: 15px 0 14px;
    display: block;
    padding: 8px 0;
    float: none;
    position: inherit;
  }

  .navbar-brand > img {
    padding-left: 15px;
    width: 20%;
    box-shadow: none;
  }

  .navbar-header .collapse {
    background: #333 none repeat scroll 0 0;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
  }

  .hover-inn {
    display: none;
  }

  .navbar-brand {
    float: none;
  }

  ul.nav.navbar-nav li ul {
    margin-left: 5%;
    opacity: 1;
    position: static;
    visibility: visible;
  }

  ul.nav.navbar-nav li ul {
    width: 260px;
  }

  /***** Slider ******/
  .call-to-action {
    text-align: center;
  }

  .left.welcome-control,
  .right.welcome-control {
    display: none;
  }

  .single-slide-item-table {
    height: 400px;
  }

  .single-slide-item h2 {
    font-size: 30px;
    line-height: 30px;
  }

  /***** Call to action ******/
  .call-to-action a.btn {
    float: none !important;
    margin-top: 20px;
    width: auto;
  }

  /***** Home Services ******/
  .serviceBox .service-icon i {
    font-size: 25px;
  }

  .serviceBox .title {
    font-size: 20px;
  }

  /*** Counters ***/
  .counters .counter .number {
    line-height: 38px;
  }

  /*** Blog Wrapper ***/
  .date-box {
    top: 138px;
  }

  /*** Breadcromb Wrapper ***/
  .breadcromb-left {
    text-align: center;
  }

  .breadcromb-right {
    text-align: center;
  }

  .breadcromb-right ul {
    padding: 10px 5px;
  }

  /*** Service Details Wrapper ***/
  .services-content .img-right .text {
    margin-bottom: 20px;
    width: 100%;
  }

  /*** Home About Wrapper ***/
  .inner-page-wrapper .container .about-text h2 {
    font-size: 35px;
    line-height: 40px;
  }

  .inner .about-text {
    font-size: 20px;
    color: #ff4e00;
  }

  .about-text img {
    width: 80%;
  }

  .about-text ul {
    width: 100%;
    margin: 0;
  }

  /*** Testimonial Wrapper ***/
  .testimonials-wrapper .owl-theme .owl-nav {
    display: none;
  }

  .testimonials-wrapper .item blockquote {
    padding: 30px 20px 30px;
    margin: 0 0 20px;
  }

  /*** FAQ Wrapper ***/
  .faq-wrapper .faq-title a::after {
    top: -1px;
  }

  .faq-wrapper .faq-title a {
    padding-right: 30px;
    line-height: 22px;
  }

  /*** Blog Wrapper ***/
  .blog-details-wraper {
    padding: 67px 0 40px;
  }

  li.threaded-comments {
    margin-left: 0;
  }

  .left-head-blog {
    margin-top: 30px;
  }

  .blog-info > a {
    font-size: 12px;
  }

  .blog-content blockquote {
    padding: 5px 20px;
  }

  .blog-content blockquote p {
    font-size: 15px !important;
    line-height: 24px;
  }

  /*** Service Details ***/
  .single-wrapper {
    float: left;
    width: 100%;
  }

  /*** Contact Wrapper ***/
  .field label {
    width: 100%;
    margin: 0 0 10px;
  }

  .field > input,
  .field > textarea {
    width: 100%;
  }

  .contact-form .field {
    margin: 0 0 10px;
  }

  .contact-form .btn {
    margin-top: 0;
  }

  /*** Footer Wrapper ***/
  .footer-about-info-area .footer-widget-heading {
    margin: 0;
  }

  .footer-widget-heading {
    margin: 40px 0 0;
  }
}

/* Social media bar styling */
.social-bar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* Column layout by default */
  gap: 5px;
  padding: 10px 5px;
  background-color: rgba(0, 0, 0, 0.6);
  /* Semi-transparent dark background */
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  color: white;
  font-size: 2rem;
  transition: background-color 0.3s ease;
}

.social-icon-link.whatsapp {
  background-color: #25d366;
}

.social-icon-link.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

.social-icon-link.facebook {
  background-color: #1877f2;
}

.social-icon-link.youtube {
  background-color: #ff0000;
}

.social-icon-link.linkedin {
  background-color: #0a66c2;
}

.social-icon-link.twitter {
  background-color: #000000;
}

/* Using black for X/Twitter */

.social-icon-link:hover {
  opacity: 0.8;
}

/*Product css*/
.product-catalog {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Ensures rounded corners apply to inner content */
  margin-top: 20px;
}

.catalog-header {
  background-color: #f25d06;
  /* Red color similar to the image */
  color: #ffffff;
  padding: 15px 20px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #f25d06;
  /* Slightly darker red border */
}

.catalog-header.pro-series {
  background-color: #ffeb3b;
  /* Yellow color for PRO series header */
  color: #333;
  /* Dark text for yellow background */
  border-bottom: 2px solid #ffeb3b;
  /* Darker yellow border */
}

.catalog-header img {
  height: 1em;
  /* Adjust size as needed for the logo */
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
  width: 25px;
  height: 25px;
}

.table-responsive {
  margin-top: 0;
  /* Remove default margin */
}

.table {
  margin-bottom: 0;
  /* Remove default table margin */
}

.table thead tr {
  background-color: #e9ecef;
  /* Light grey for table header background */
  font-weight: bold;
  color: #333;
}

.table thead th {
  text-align: center;
  vertical-align: middle;
  padding: 12px;
  border-bottom: 2px solid #dee2e6;
}

.table tbody tr:nth-child(odd) {
  background-color: #fdfdfd;
  /* White for odd rows */
}

.table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
  /* Light grey for even rows, matching image */
}

.table tbody td {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  color: #333;
}

.table tbody td:first-child {
  font-weight: bold;
  /* Product code column is bold */
}

.table-footer {
  padding: 15px 20px;
  text-align: center;
  font-style: italic;
  color: #666;
  border-top: 1px solid #eee;
  background-color: #f8f9fa;
}

.table-footer p {
  margin-bottom: 0;
  color: #f25d06;
  /* Red color for the note */
  font-weight: bold;
}

/*For the pulse of your home*/
.text-container h1 {
  font-size: 3.5em;
  /* Adjust font size as needed */
  margin-bottom: 0;
  /* Remove default margin */
  line-height: 1.2;
  font-weight: normal;
  /* Default font weight */
}

.text-container h1 .highlight-yellow {
  color: #ffff00;
  /* Yellow color for specific letters */
}

.text-container p {
  font-size: 2.5em;
  /* Adjust font size as needed */
  margin-top: 5px;
  /* Small margin from the top line */
  line-height: 1.2;
  font-weight: normal;
  /* Default font weight */
}

.text-container p .highlight-yellow {
  color: #ffff00;
  /* Yellow color for specific letters */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .text-container h1 {
    font-size: 2.5em;
  }

  .text-container p {
    font-size: 1.8em;
  }

  .top-header-add li {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .text-container h1 {
    font-size: 1.8em;
  }

  .text-container p {
    font-size: 1.3em;
  }

  .logo-bar {
    float: left;
    padding: 0;
    width: 100%;
    background: #fff;
    height: 0px;
  }

  .mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 24px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
  }

  .navbar-brand {
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .navbar-brand img {
    width: 150px;
    box-shadow: none;
  }
}
/* End of product css */