/*
	Author: Team90Degree.
	Template Name: Maks - Onepage Multipurpose Responsive HTML5 Template
	Version      : 1.0

*/
/*--------------------------
    CSS INDEX
 ---------------------------
    01. Typography
    02. Preloader
    03. Section Title
    04. Menu
    05. Slider
    06. About
    07. Services
    08. Work
    09. Team
    10. Skill
    11. Video
    12. Pricing
    13. Testmonial
    14. Counter
    15. Blog
    16. Client
    17. Contact
    18. Footer

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



/* ===== 1. Google Fonts Import  ====*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans:400,700');

/* Typography */

h1, h2, h3, h4, h5, h6 {
  color: #E22829;
  font-family: "PT Sans",sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  margin-bottom: 20px;
  margin-top: 0;
}

body {
	font-family: "Open Sans",sans-serif;
	font-weight: 400;
	color: #2b2a2a;
	font-size: 15px;
	line-height: 26px;
	letter-spacing:0.4px;
	overflow-x: hidden;
}

p {
	margin-bottom: 10px;
	
}

img {
    max-width: 100%;
    height: auto;
	vertical-align: middle;
	border-style: none;
}
a{
	color:#2E3192;
    transition: .5s;
    text-decoration: none;
}
a:hover,
a:active {
	color:transparent;
	outline: 0 none;
	text-decoration: none;
	color:#2E3192;
}

ul, ol{
    list-style: outside none none;
    margin: 0;
    padding: 0
}



/* Preloader*/

.preloader {
    background: #18ba6e;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.status-mes {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -35px;
    font-size: 10px;
    text-indent: -12345px;
    z-index: 10000;
}


.loader {
  position: relative;
  width: 75px;
  height: 100px;
}
.loader__bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: #fff;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.loader__bar:nth-child(1) {
  left: 0px;
  -webkit-transform: scale(1, 0.2);
          transform: scale(1, 0.2);
  -webkit-animation: barUp1 4s infinite;
          animation: barUp1 4s infinite;
}
.loader__bar:nth-child(2) {
  left: 15px;
  -webkit-transform: scale(1, 0.4);
          transform: scale(1, 0.4);
  -webkit-animation: barUp2 4s infinite;
          animation: barUp2 4s infinite;
}
.loader__bar:nth-child(3) {
  left: 30px;
  -webkit-transform: scale(1, 0.6);
          transform: scale(1, 0.6);
  -webkit-animation: barUp3 4s infinite;
          animation: barUp3 4s infinite;
}
.loader__bar:nth-child(4) {
  left: 45px;
  -webkit-transform: scale(1, 0.8);
          transform: scale(1, 0.8);
  -webkit-animation: barUp4 4s infinite;
          animation: barUp4 4s infinite;
}
.loader__bar:nth-child(5) {
  left: 60px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-animation: barUp5 4s infinite;
          animation: barUp5 4s infinite;
}
.loader__ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation: ball 4s infinite;
          animation: ball 4s infinite;
}

@-webkit-keyframes ball {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  5% {
    -webkit-transform: translate(8px, -14px);
            transform: translate(8px, -14px);
  }
  10% {
    -webkit-transform: translate(15px, -10px);
            transform: translate(15px, -10px);
  }
  17% {
    -webkit-transform: translate(23px, -24px);
            transform: translate(23px, -24px);
  }
  20% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  27% {
    -webkit-transform: translate(38px, -34px);
            transform: translate(38px, -34px);
  }
  30% {
    -webkit-transform: translate(45px, -30px);
            transform: translate(45px, -30px);
  }
  37% {
    -webkit-transform: translate(53px, -44px);
            transform: translate(53px, -44px);
  }
  40% {
    -webkit-transform: translate(60px, -40px);
            transform: translate(60px, -40px);
  }
  50% {
    -webkit-transform: translate(60px, 0);
            transform: translate(60px, 0);
  }
  57% {
    -webkit-transform: translate(53px, -14px);
            transform: translate(53px, -14px);
  }
  60% {
    -webkit-transform: translate(45px, -10px);
            transform: translate(45px, -10px);
  }
  67% {
    -webkit-transform: translate(37px, -24px);
            transform: translate(37px, -24px);
  }
  70% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  77% {
    -webkit-transform: translate(22px, -34px);
            transform: translate(22px, -34px);
  }
  80% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px);
  }
  87% {
    -webkit-transform: translate(7px, -44px);
            transform: translate(7px, -44px);
  }
  90% {
    -webkit-transform: translate(0, -40px);
            transform: translate(0, -40px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes ball {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  5% {
    -webkit-transform: translate(8px, -14px);
            transform: translate(8px, -14px);
  }
  10% {
    -webkit-transform: translate(15px, -10px);
            transform: translate(15px, -10px);
  }
  17% {
    -webkit-transform: translate(23px, -24px);
            transform: translate(23px, -24px);
  }
  20% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  27% {
    -webkit-transform: translate(38px, -34px);
            transform: translate(38px, -34px);
  }
  30% {
    -webkit-transform: translate(45px, -30px);
            transform: translate(45px, -30px);
  }
  37% {
    -webkit-transform: translate(53px, -44px);
            transform: translate(53px, -44px);
  }
  40% {
    -webkit-transform: translate(60px, -40px);
            transform: translate(60px, -40px);
  }
  50% {
    -webkit-transform: translate(60px, 0);
            transform: translate(60px, 0);
  }
  57% {
    -webkit-transform: translate(53px, -14px);
            transform: translate(53px, -14px);
  }
  60% {
    -webkit-transform: translate(45px, -10px);
            transform: translate(45px, -10px);
  }
  67% {
    -webkit-transform: translate(37px, -24px);
            transform: translate(37px, -24px);
  }
  70% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  77% {
    -webkit-transform: translate(22px, -34px);
            transform: translate(22px, -34px);
  }
  80% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px);
  }
  87% {
    -webkit-transform: translate(7px, -44px);
            transform: translate(7px, -44px);
  }
  90% {
    -webkit-transform: translate(0, -40px);
            transform: translate(0, -40px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes barUp1 {
  0% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  40% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  90% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
}
@keyframes barUp1 {
  0% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  40% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  90% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
}
@-webkit-keyframes barUp2 {
  0% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  40% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  50% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  90% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  100% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
}
@keyframes barUp2 {
  0% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  40% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  50% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  90% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  100% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
}
@-webkit-keyframes barUp3 {
  0% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
  100% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
}
@keyframes barUp3 {
  0% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
  100% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
}
@-webkit-keyframes barUp4 {
  0% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  40% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  50% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  90% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  100% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
}
@keyframes barUp4 {
  0% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  40% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  50% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  90% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  100% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
}
@-webkit-keyframes barUp5 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  90% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes barUp5 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  90% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}


/*----- Section Title -----*/

.section_title{
	margin-bottom: 50px;
}
.section_title {
  display: inline-block;
  position: relative;
}
.section_title h2 {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 20px;
  text-transform: capitalize;
}
.section_title::after {
  background-image: url("img/separator.png");
  bottom: -14px;
  content: "";
  height: 4px;
  left: 50%;
  margin-left: -73px;
  position: absolute;
  width: 144px;
}
.section_title p {
	margin-top: 10px;
}
.section_padding{
	padding:80px 0;
}
.section_gray{
	background: #f8f8f8;
}

/*----- button -----*/

.main_bg_btn {
  background: #2E3192 none repeat scroll 0 0;
  border: 1px solid #2E3192;
  border-radius: 30px;
  box-shadow: 0 0 5px #ddd;
  color: #fff;
  display: inline-block;
  font-family: "PT Sans",sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 20px;
  overflow: hidden;
  padding: 14px 27px;
  position: relative;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
  z-index: 1;
}
.main_bg_btn:hover,
.main_bg_btn:focus {
	color: #2E3192;
	border-color: #2E3192;
	background:transparent;
}
    

/*----- Menu -----*/

#header {
	top: 0;
	width: 100%;
	position: fixed;
	z-index: 999;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	padding: 16px 0;

}
.logo_area {
	float: left;
}
.logo_area img{
	margin-left: 0;
}
#header.menu-shrink {
    background-color: #fff;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
}
#main_menu{
	margin-top: 10px;
}

.nav > li {
	padding: 7px 12px;
	border: 1px solid transparent;
	transition: .5s;
}

.nav > li > a {
  color: #fff;
  font-family: "PT Sans",sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
}

#header.menu-shrink .nav > li > a{
	color: #757575;
}
.nav > li > a:hover,
#header.menu-shrink .nav > li > a:hover {

	color: #2E3192;
}

.nav > li > a:hover, 
.nav > li > a:focus {
	text-decoration: none;
	background-color: transparent;
}
.navbar-toggle {
	position: relative;
	float: right;
	margin-right: 15px;
	padding: 9px 10px;
	margin-top: 19px;
	margin-bottom: 0;
}
.navbar-toggle .icon-bar{
	background-color: #2E3192;
}


/* ====navbar languages==== */
.navbar-nav {
  display: flex;
  align-items: center;
}

.navbar-nav > li {
  display: inline-block;
  margin-right: 15px;
}

.navbar-nav .dropdown {
  position: relative;
}

.navbar-nav .dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 120px;
}



/*----- Slider -----*/

/* Default Slider Animations */

.owl-item.active .slider-animated-1 .sl_heading {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.owl-item.active .slider-animated-1 h2 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.owl-item.active .slider-animated-1 p {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.owl-item.active .slider-animated-1 a {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  -webkit-animation-name: bounceInLeft;
  animation-name: fadeInLeft;
}

/* animation 2 */
.owl-item.active .slider-animated-2 .sl_heading {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.owl-item.active .slider-animated-2 h2 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.owl-item.active .slider-animated-2 p {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.owl-item.active .slider-animated-2 a {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* animation 3 */
.owl-item.active .slider-animated-3 .sl_heading {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.owl-item.active .slider-animated-3 h2 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.owl-item.active .slider-animated-3 p {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.owl-item.active .slider-animated-3 a {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.main_logo {
  display: none;
}
.menu-shrink .main_logo {
  display: block;
}
.menu-shrink .white_logo {
  display: none;
}

/* Default styles for larger screens */
/* Default styles for larger screens */
#slider_area, .single_slide, .single-slide-item-table {
  height: 810px; /* Default height for desktops */
}

.single_slide {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  z-index: 1;
}

/* Background images for each slide */
.slider_item1 {
  background-image: url(img/slider/sld1-3.webp);
}

.slider_item2 {
  background-image: url(img/slider/sld2-3.webp);
}

.slider_item3 {
  background-image: url(img/slider/sld3-3.webp);
}

/* Overlay effect */
.single_slide::after {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.31;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* Navigation styles */
.slider_active .owl-nav .owl-next, .slider_active .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fceb05;
  opacity: 1;
  font-size: 19px;
  transition: all 0.4s ease-in-out;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}
.slider_active .owl-nav .owl-prev {
  left: 15px;
}
.slider_active .owl-nav .owl-next {
  right: 15px;  
}
.slider_active .owl-nav .owl-next:hover, .slider_active .owl-nav .owl-prev:hover {
  background: #2E3192;
  color: #fff;
}

/* Table alignment for text */
.single-slide-item-table {
  display: table;
  width: 100%;
}
.single-slide-item-tablecell {
  display: table-cell;
  vertical-align: middle;
}

/* Text styles */
.slider_content .sl_heading {
  color: #fff;
  font-size: 27px;
  margin-bottom: 0;
  font-weight: 400;
  display: block;
  text-transform: capitalize;
  font-family: 'PT Sans', sans-serif;
}

.slider_content h2 {
  color: #fceb05;
  font-size: 57px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
  margin-top: 10px;
  line-height: normal;
}

.slider_content p {
  color: #fff;
  font-weight: 400;
  margin-bottom: 35px;
  width: 100%; /* Full width for better responsiveness */
  max-width: 600px; /* Optional: Limit width for larger screens */
  margin-left: auto;
  margin-right: auto;
}

.slider_content .main_bg_btn {
  box-shadow: inherit;
}
.slider_content .main_bg_btn:hover,
.slider_content .main_bg_btn:focus {
  color: #fff;
}
.slider_content h2 span {
  color: #fff;
}

#slider_area .main_bg_btn {
  background: #2E3192;
  border-color: #2E3192;
  color: #fff;
  text-transform: uppercase;
}
#slider_area .main_bg_btn:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

/* Specific styles for slide 3 */
.slider-animated-3 {
  animation: fadeInUp 1s ease-in-out;
}

.slider_item3 .slider_content h2 {
  color: #ffcc00;
  font-size: 60px;
  text-transform: capitalize;
}

.slider_item3 .slider_content p {
  font-size: 18px;
  color: #fff;
}

.slider_item3 .main_bg_btn {
  background: #ffcc00;
  border-color: #ffcc00;
  color: #000;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  /* Adjust height for tablets */
  #slider_area, .single_slide, .single-slide-item-table {
    height: 600px;
  }

  /* Adjust font sizes for tablets */
  .slider_content h2 {
    font-size: 40px;
  }

  .slider_content p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  /* Adjust height for mobile devices */
  #slider_area, .single_slide, .single-slide-item-table {
    height: 400px;
  }

  /* Adjust font sizes for mobile devices */
  .slider_content h2 {
    font-size: 30px;
    line-height: 1.2; /* Better line height for mobile */
  }

  .slider_content p {
    font-size: 14px;
    margin-bottom: 20px; /* Reduce margin for compact layout */
  }

  /* Center align content on mobile */
  .slider_content {
    text-align: center;
    padding: 0 15px; /* Add padding to prevent text from touching edges */
  }

  /* Adjust navigation buttons for mobile */
  .slider_active .owl-nav .owl-next,
  .slider_active .owl-nav .owl-prev {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }

  /* Specific adjustments for slide 3 */
  .slider_item3 .slider_content h2 {
    font-size: 32px; /* Slightly larger for emphasis */
  }

  .slider_item3 .slider_content p {
    font-size: 14px;
  }

  .slider_item3 .main_bg_btn {
    font-size: 14px; /* Smaller button text for mobile */
    padding: 10px 20px; /* Adjust button padding */
  }
}
/*----- about css  -----*/
.single_about {
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  padding: 65px 46px 59px;
  position: relative;
  text-align: center;
  transition: all 0.3s ease 0s;
  z-index: 1;
}

.single_about:hover{

}
.single_about .about_icon {
  margin-bottom: 22px;
}
.single_about .about_icon i {
  color: #2E3192;
  font-size: 61px;
  line-height: 70px;
  transition: all 0.3s ease 0s;
}
.single_about .about_content h3 {
  font-size: 25px;
  margin-bottom: 15px;
  text-transform: capitalize;
}
.about_areas.bg_white {
  padding-bottom: 90px;
}
.single_about:hover,.single_about.active{
  background: #2E3192;
}
.single_about:hover .about_icon i,.single_about:hover .about_content,.single_about:hover .about_content h3,.single_about.active i,.single_about.active .about_content h3,.single_about.active .about_content {
  color: #fff;
}
.single_about .about_content p{
  line-height: 26px;
}
.why-chooseus.section_gray {
  padding: 85px 0 0;
}
.why-choose-text {
  margin-bottom: 0;
  margin-top: 67px;
  position: relative;
}
.why-chooseus.section_gray {
  padding-top: 30px;
}
.why-choose-text .title h2 {
  color: #000;
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 30px;
}
.why-choose-text .title h2 span {
  color: #2E3192;
}
.why-choose-text .text {
    margin-bottom: 25px;
}
.list-style-three {
  margin-bottom: 15px;
  position: relative;
}
.list-style-three li {
  color: #666;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}
.list-style-three li::before {
  color: #2E3192;
  content: "";
  font-family: "FontAwesome";
  left: 0;
  position: absolute;
  top: 0;
}





.single-content {
  flex: 1; /* Ensures content takes up remaining space */
}

.feature-section .single-item {
  margin-bottom: 30px;
  position: relative;
  transition: all 500ms ease 0s;
}
.img-box img {
  width: 100%;
}
.feature-section .single-item:hover {
    box-shadow: 0 0 10px 5px rgba(231, 231, 231, 0.6);
    transition: all 500ms ease 0s;
}
.feature-section .single-item .single-content {
  background: #fafafa none repeat scroll 0 0;
  border: 0 none;
  padding: 48px 22px 22px 22px;
  position: relative;
  transition: all 500ms ease 0s;
}
.feature-section .single-item .single-content .icon-box {
  background: #2E3192 none repeat scroll 0 0;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(231, 231, 231, 0.95);
  height: 60px;
  left: 30px;
  line-height: 73px;
  position: absolute;
  text-align: center;
  top: -30px;
  transition: all 0.5s ease 0s;
  width: 60px;
}
.feature-section .single-item:hover .single-content .icon-box {
  background: #444 none repeat scroll 0 0;
}
.feature-section .single-item .single-content .icon-box i::before {
    color: #fff;
    font-size: 30px;
    margin: 0;
}
.feature-section .single-item h4 {
  font-size: 18px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

@media screen and (max-width: 990px){
    .single_about{
        margin-bottom:10px;
    }
}
.welcome__text {
  color: #000000;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.4em;
  margin-bottom: 70px;
  position: relative;
  text-align: center;
}
/*----- Work css -----*/
#work_area{

	overflow: hidden;
}
.mix{
	display: none;
}
.portfolio_item .mix{
	display: none;
}
.portfolio_filter ul {
	margin: 0px 0 40px;
	padding: 0;
	list-style: none;
}
.portfolio_filter ul li {
	font-weight: 400;
	text-transform: capitalize;
	display: inline-block;
	cursor: pointer;
	padding: 6px 22px;
	font-size: 14px;
	transition: .5s;
	letter-spacing: 1px;
	border-radius: 20px;
}
.portfolio_filter .filter.active {
	color: #fff;
	background: #2E3192;
	box-shadow: 0 0 5px #ddd;
}
.single_portfolio{
    text-align: center;
    overflow: hidden;
    position: relative;
	margin-bottom: 30px;
	
}
.single_portfolio:before,
.single_portfolio:after{
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease 0s;
}
.single_portfolio::after {
  background: rgba(24, 186, 96, 0.6) none repeat scroll 0 0;
  opacity: 1;
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px);
  transition: transform 0.6s ease 0s;
}
.single_portfolio:hover:before{ opacity: 1; }
.single_portfolio:hover:after{ transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px); }
.single_portfolio img{
    width: 100%;
    height: auto;
}
.single_portfolio .box-content{
    width: 100%;
    height: 100%;
    padding-top: 27%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.single_portfolio:hover .box-content{ opacity: 1; }
.single_portfolio .title{
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
}
.single_portfolio .post{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.single_portfolio .icon{
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}
.single_portfolio .icon li{ display: inline-block; }
.single_portfolio .icon li a{
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    font-size: 18px;
    transition: all 0.3s ease 0s;
	display: inline-block;
	border-radius: 50%;
}
	.single_portfolio .icon li a:hover{
	background: #2E3192;
	color: #fff;
}
@media only screen and (max-width:990px){
    .single_portfolio{ margin-bottom: 30px; }
}
/*----- Skill css -----*/

#skill_area{
    overflow: hidden;
}
.progressbar-title{
    font-size: 13px;
    text-transform: uppercase;
}
.progress{
    height: 5px;
    overflow: visible;
    background: #fff;
    margin-bottom: 40px;
}
.progress .progress-bar{
    position: relative;
    animation: animate-positive 2s;
	background: #2E3192;
}
.progress .progress-icon{
    width: 30px;
    height: 30px;
    line-height: 25px;
    border-radius: 50%;
    font-size: 13px;
    position: absolute;
    top: -14px;
    right: 0;
    background: #fff;
    border-width: 3px;
    border-style: solid;
	border-color:#2E3192; 
	color:#2E3192;
}
.progress-value{
    font-size: 13px;
    color: #848484;
    position: absolute;
    top: 16px;
    right: 0;
}
@-webkit-keyframes animate-positive {
    0% { width: 0%; }
}
@keyframes animate-positive {
    0% { width: 0%; }
}

/*----- team css  -----*/
/* Adjust column spacing for better responsiveness */
.row.justify-content-center > [class*="col-"] {
  padding: 0 30px; /* Reduced padding */
}

/* Our Team Section */
.our-team {
  text-align: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 3px #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px; /* Adds a smooth rounded border */
}

/* Team Member Image */
.our-team img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 10px 10px 0 0; /* Rounded top corners */
}

/* Team Content */
.our-team .team-content {
  background: #2E3192;
  color: #fff;
  left: -100%;
  bottom: 50%;
  width: 100%;
  padding: 20px;
  position: absolute;
  transform: translateY(50%);
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

.our-team:hover .team-content {
  background: rgba(24, 186, 96, 0.85);
  left: 0;
}

/* Title & Role */
.our-team .title {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0 0 7px;
  color: #fff;
}

.our-team .post {
  font-size: 13px;
  text-transform: capitalize;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* Social Links */
.our-team .social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.our-team .social-links li {
  display: inline-block;
}

.our-team .social-links li a {
  color: #fff;
  font-size: 17px;
  transition: color 0.3s ease;
}

.our-team .social-links li a:hover {
  color: #222;
}

/* Responsive Adjustments */
@media only screen and (max-width: 990px) {
  .our-team {
    margin-bottom: 30px;
  }
  .our-team .team-content {
    padding: 15px;
  }
  .our-team .title {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .our-team .team-content {
    padding: 12px;
  }
  .our-team .title {
    font-size: 14px;
  }
}

@media only screen and (max-width: 480px) {
  .our-team .team-content {
    position: relative;
    left: 0;
    bottom: 0;
    transform: translateY(0);
    padding: 10px;
  }
}

/*----- service css -----*/

.serviceBox{
	position: relative;
	text-align: left;
    padding: 30px;
    transition: all 0.4s ease-in-out 0s;
	border: 1px solid rgba(0,0,0,0.03);
	background: #fff;
	overflow: hidden;
	margin-bottom: 30px;
}
.serviceBox:hover{
	background: #2E3192;
	box-shadow: 0 0 20px rgba(0,0,0,0.088);
	color: #fff;
}
.serviceBox:hover .title{
	color: #fff;
}
.serviceBox .service-icon{
    font-size: 30px;
    color: #2E3192;
    z-index: 1;
	transition: all 0.4s ease-in-out 0s;
	text-align: left;
}
.serviceBox:hover .service-icon{
	color: #fff;
	transform: rotateY(360deg);
}
.serviceBox .service-content{
	float: left;
}
.serviceBox .title{
    font-size: 18px;
    margin-bottom: 15px;
	margin-top: 17px;
    text-transform: capitalize;
    transition: all 0.4s ease-in-out 0s;
}
.serviceBox .description{
    margin: 0;
}
@media only screen and (max-width:990px){
    .serviceBox{ margin-bottom: 50px; }
}
#team_area.section_padding.section_gray {
  padding-bottom: 111px;
}
/*----- pricing css -----*/
#pricing_area.section_padding.section_gray {
  background: #fff none repeat scroll 0 0;
}
.pricingTable .heading > h3 {
  font-size: 18px;
  text-transform: uppercase;
}
.pricingTable {
  background: #f8f8f8 none repeat scroll 0 0;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.02);
  text-align: center;
}
.pricingTable:hover .price-value,.pricingTable.active .price-value{
	border: 3px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 3px #2E3192;
	-moz-box-shadow: 0px 0px 0px 3px #2E3192;
	box-shadow: 0px 0px 0px 3px #2E3192;
}
.pricingTable > .pricingTable-header{

    padding-top: 40px;
}
.pricingTable-header > .price-value {
  background: #2E3192 none repeat scroll 0 0;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  display: block;
  font-size: 32px;
  font-weight: 700;
  height: 140px;
  margin: 0 auto;
  padding: 44px 0;
  transition: all 0.4s ease 0s;
  width: 140px;
}
.price-value > .mo {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 3px;
}
.pricingTable-header > .heading{
    display: block;
    padding-top: 20px;
}
.heading > h3{
    margin: 0;
    text-transform: capitalize;
    font-weight: 700;
	font-size: 18px;
}
.pricingTable > .pricingContent{
    margin-top: 30px;
}
.pricingTable > .pricingContent > ul{
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}
.pricingTable > .pricingContent > ul > li {
  border-top: 0 none;
  padding: 5px 0;
}
.pricingTable-sign-up{
    padding: 40px 0;
}
.pricingTable:hover .main_bg_btn{
	background: transparent;
	color: #2E3192;
}
li.linethro {
  color: #aaa;
  text-decoration: line-through;
}
@media screen and (max-width: 990px){
    .pricingTable{
        margin-bottom: 20px;
    }
}
/*----- testimonial css  -----*/
#testimonial_area.section_padding.bg_white {
  padding-bottom: 111px;
  padding-top: 0;
}
.testimonial{
    padding: 20px;
    margin: 20px 10px;
}
.testimonial .pic{
    width: 122px;
    height: 122px;
    float: left;
    margin-right: 50px;
    position: relative;
}
.testimonial .pic::before, .testimonial .pic::after {
  content: "";
  display: block;
  height: 50%;
  position: absolute;
  width: 100%;
}
.testimonial .pic:before{
    bottom: -10%;
    left: -10%;
    border-bottom: 3px solid #2E3192;
    border-left: 3px solid #2E3192;
}
.testimonial .pic:after{
    top: -10%;
    right: -10%;
    border-top: 3px solid #2E3192;
    border-right: 3px solid #2E3192;
}
.testimonial .pic img{
    width: 100%;
    height: auto;
}
.testimonial .testimonial-content{
    display: table;
    position: relative;
}
.testimonial .testimonial-content::before {
  color: #f6f6f6;
  content: "\f10d";
  font-family: fontawesome;
  font-size: 112px;
  margin-right: 20px;
  position: absolute;
  right: 50%;
  top: 54px;
  transform: rotate(180deg);
  z-index: -1;
}
.testimonial .testimonial-title{
    font-size: 18px;
    color: #2E3192;
    text-transform: capitalize;
}
.testimonial .post{
    font-size: 13px;
    font-weight: 600;
    color: #585f62;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 5px;
    padding-left: 5px;
}
.testimonial .description{
    color: #7c7c7c;
    margin-top: 12px;
    font-style: italic;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    background-color: #2E3192;
}
@media only screen and (max-width: 980px){
    .testimonial{
        padding: 20px 0;
        margin: 20px 15px;
    }
    .testimonial .pic{
        float: none;
    }
    .testimonial .testimonial-content{
        display: block;
        margin-top: 30px;
    }
    .testimonial .testimonial-content:before{
        z-index: 1;
        top: -200px;
    }
}




/*----- testimonial css  -----*/
#testimonial-slider .owl-dots {
	text-align: center;
}
#testimonial-slider .owl-dots {
	text-align: center;
	bottom: -32px;
	left: 0;
	position: absolute;
	right: 0;
	margin-bottom: 50px;
}
#testimonial-slider .owl-dot {
  border: 1px solid #2E3192;
  border-radius: 3px;
  display: inline-block;
  height: 6px;
  margin: -25px 5px;
  width: 19px;
}
#testimonial-slider .owl-dot.active {
	background: #2E3192;
}







/*----- Blog css -----*/
#blog_area.section_padding.section_gray {
  padding-bottom: 112px;
}
a:hover, a:focus {
  color: #000;
  text-decoration: none;
}
.single_blog img {
	width: 100%;
}
.blog_details {
	padding: 25px;
	background: #fff;
	border: 1px solid #f1f1f1;
	display: inline-block;
}
.blog_details h1 {
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 2px;
  text-transform: capitalize;
  transition: all 0.6s ease 0s;
}
.single_blog:hover .blog_details h1 {
	color:#2E3192;
}
.blog_details span {
	display: block;
	font-size: 13px;
	color: #a0a8ad;
}
.blog_details p {
	margin-top: 10px;
	margin-bottom: 0px;
}
.post_comments {
	float: left;
	margin-top: 15px;
}
.post_like {
	float: left;
	margin-top: 15px;
	margin-left: 20px;
}
.blog_media a {
	float: right;
}
.post_comments a, .post_like a {
	color: #757575;
	font-size: 17px;
}
.post_comments i, .post_like i {
	color: #2E3192;
	margin-right: 5px;
}
.b_red_more {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  text-transform: capitalize;
}
.b_red_more i {
  font-size: 11px;
  position: relative;
  top: -1px;
  vertical-align: middle;
}
/*----- Counter css -----*/
#counter_area{
	position: relative;
	padding: 80px 0;
	color: #fff;
}
#counter_area::after {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.counter-items {
	position: relative;
	z-index: 10;
}
.counter_icon i {
	display: block;
	font-size: 50px;
	margin-bottom: 25px;
	color: #2E3192;
}
.counter {
  color: #fff;
  display: inline-block;
  font-family: "PT Sans",sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  padding: 0 3px;
}
.number-desc {
	font-weight: 400;
	text-transform: capitalize;
	font-size: 14px;
	margin: 0;
	letter-spacing: 1px;
}
/*----- contact css -----*/
.contact_area {
  background: #0e0e0e none repeat scroll 0 0;
}
.single_contact_info {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}
.single_contact_info i {
  display: inline-block;
  float: left;
  font-size: 36px;
  height: auto;
  line-height: 60px;
  margin-bottom: 20px;
  width: auto;
}
.single_contact_info p {
  float: left;
  margin-bottom: 0;
  margin-top: 4px;
  padding-left: 16px;
}
#main_form .form-group{
	margin-bottom: 30px;
}
.cform_box {
	width: 100%;
	background: #fff;
	padding: 40px;
	border: 1px solid #fafafa;
	box-shadow: 0 0 20px rgba(0,0,0,0.02);
}
#main_form .form-control {
	font-size: 15px;
	line-height: 20px;
	padding: 12px;
	display: block;
	width: 100%;
	border: 1px solid #ddd;
	padding: 10px 15px;
	outline: none;
	box-shadow: none;
	height: 50px;
	line-height: 50px;
	transition: .5s;
	border-radius: 0;
}
#main_form .form-control:focus{
    border-color: #2E3192;
	box-shadow:none;
}
#main_form textarea.form-control{
	height: 140px;
	line-height: 25px;
}
/*----- Client css -----*/
/* Client Area Styling */
#clients_area {
  padding: 80px 0; /* Add padding for spacing */
  background-color: #f9f9f9; /* Light gray background */
}

.section_title h2 {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.section_title h2 span {
  color: #2E3192; /* Blue color for the "Clients" part */
}

.section_title p {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
}

.client_slide_area {
  margin-top: 30px;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center logos */
  justify-content: center; /* Horizontally center logos */
  flex-wrap: wrap; /* Allow logos to wrap to the next line */
  gap: 20px; /* Add spacing between logos */
}

.single_client {
  text-align: center;
  padding: 10px;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center logos */
  justify-content: center; /* Horizontally center logos */
  height: 170px; /* Set a fixed height for all logo containers */
}

.client-logo {
  max-width: 180px; /* Adjust logo size */
  max-height: 140px; /* Set a fixed height for logos */
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  filter: grayscale(100%); /* Make logos grayscale */
  transition: all 0.3s ease; /* Smooth transition */
  object-fit: contain; /* Ensure logos fit within the container */
}

.single_client:hover .client-logo {
  filter: grayscale(0%); /* Remove grayscale on hover */
  transform: scale(1.1); /* Slightly enlarge on hover */
}


/*----- Footer css -----*/
#footer_area {
  background: #2E3192 none repeat scroll 0 0;
  color: #fff;
  padding: 30px 0;
  width: 100%;
}
.copyright {
  margin-top: 5px;
}
.ftr_social_list li {
    display: inline-block;
    margin: 0 7px;
}

.ftr_social_list a {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #333;
    font-size: 15px;
	border-radius: 50%;
	position: relative;
	z-index: 1;
	background: #fff;
}
.ftr_social_list a:after{
	content: '';
	display: block;
	position: absolute;
	border-radius: 100%;
	width: 0;
	height: 0;
	transition: 0.3s;
	top: 0;
	left: 50%;	
	z-index: -1;
}
.ftr_social_list a:hover:after {
  width: 40px;
  height: 40px;
  margin-left: -20px;
}
.ftr_social_list a:hover{
	color: #fff;
}
.ftr_social_list a i {
}
.copyright p {
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #fff;
}
.copyright a {
	color:#fff;
}
.center-block{
	float: inherit;
}
a.f_facebook:after{
    background: #5D82D1;
}
a.f_whatsapp:after {
  background: #25D366; /* WhatsApp Green */
}
a.f_instagram:after {
  background: #E4405F; /* Instagram pink-red gradient */
}

a.f_twitter:after{
    background: #40BFF5;
}
a.f_google:after{
    background: #EB5E4C;
}
a.f_linkedin:after{
    background: #238CC8;
}
a.f_youtube:after{
    background: #CC181E;
}
a.f_skype:after{
    background: #00AFF0;
}
.no_padding{
	padding: 0;
}
.owl-item .slider-animated-2 p {
  margin: 0 auto 25px;
  width: 40%;
}
.purschase-banner {
  background: rgba(0, 0, 0, 0) url("img/banner__03.jpg") no-repeat fixed center center / cover ;
  padding: 101px 0;
  text-align: left;
}
.purschase-banner .container > p {
  margin-bottom: 28px;
}
.purschase-banner .container > h2 {
  font-size: 33px;
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.contact_area {
  background: #f9f9f9 none repeat scroll 0 0;
}
#module-maps {
  height: 450px;
  position: relative;
  width: 100%;
}
#map {
  height: 100%;
  width: 100%;
}
.content_left_title {
  margin-bottom: 30px;
}
.contact__infos {
  margin-top: 80px;
}
.contact__infos .col-sm-7.col-xs-12 {
  padding-left: 60px;
}



/* WhatsApp Icon */
a#whatsappIcon {
  position: fixed; /* Fixed position */
  bottom: 80px; /* Position from bottom */
  right: 50px; /* Position from right */
  z-index: 1000; /* Ensure it stays on top */
  text-decoration: none; /* Remove underline */
  display: flex; /* Use flexbox for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

.whatsapp-logo {
  width: 50px; /* Adjust logo size */
  height: 50px; /* Adjust logo size */
  position: relative; /* Required for pseudo-elements */
  z-index: 1; /* Ensure the logo stays on top */
}

/* Pulsating effect using pseudo-elements */
a#whatsappIcon::before,
a#whatsappIcon::after {
  content: '';
  position: absolute;
  border: 2px solid #25D366; /* WhatsApp green */
  border-radius: 50%; /* Make it circular */
  width: 100%; /* Start with the same size as the logo */
  height: 100%;
  animation: pulse 2s infinite; /* Apply the pulse animation */
  opacity: 0; /* Start invisible */
}

a#whatsappIcon::after {
  animation-delay: 1s; /* Delay the second wave */
}

/* Keyframes for the pulsating effect */
@keyframes pulse {
  0% {
    transform: scale(1); /* Start at normal size */
    opacity: 0; /* Start invisible */
  }
  50% {
    opacity: 1; /* Fade in */
  }
  100% {
    transform: scale(2); /* Scale up */
    opacity: 0; /* Fade out */
  }
}


/*breadcrumb*/
.breadcrumb_area {
  background: rgba(0, 0, 0, 0);
  display: block;
  overflow: hidden;
  padding: 200px 0; /* Increase padding to make the section taller */
  position: relative;
  text-align: center;
  margin-bottom: 50px;
  min-height: 300px; /* Ensure a minimum height */
}

.breadcrumb_area::before {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.55;
  position: absolute;
  top: 0;
  width: 100%;
}

.breadcrumb_area h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  position: relative; /* Ensure the text is above the overlay */
  z-index: 1; /* Ensure the text is above the overlay */
}

@media (max-width: 768px) {
  .breadcrumb_area {
    padding: 150px 0; /* Smaller padding for mobile devices */
  }
}



#blog-post-no-sidebar .blog-post-no-sidebar .content article .article-content ul {
    margin: 27px 0 0;
    text-align: left;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content article .article-content ul li {
    display: inline-block;
    margin-right: 10px;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content article .article-content ul li i.fa {
  color: #2E3192;
  width: 20px;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content article .article-content h4 {
  font-size: 22px;
  margin: 19px 0 20px;
}
.leave-comment h5 {
  font-size: 22px;
  margin-bottom: 1px;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content article .article-content blockquote {
    border-left: 0 solid #bebebe;
    color: #080808;
    font-style: italic;
    font-weight: 600;
    margin-left: 40px;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content .leave-comment {
    margin-top: 50px;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content .leave-comment input {
    border: 1px solid #bebebe;
    height: 40px;
    margin: 1% 1% 1% 0;
    padding: 5px 10px;
    width: 32%;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content .leave-comment textarea {
    border: 1px solid #bebebe;
    height: 150px;
    margin: 10px 0 19px;
    padding: 5px 10px;
    width: 99%;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content .leave-comment button, #contact .contact .contact-form button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #bebebe;
    font-weight: 600;
    padding: 11px 34px;
    text-transform: uppercase;
    transition: all 0.6s ease-out 0s;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content .leave-comment button:hover, #contact .contact .contact-form button:hover {
    background: #3e3e3e none repeat scroll 0 0;
    border: 1px solid #3e3e3e;
    color: #fff;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content article .article-content blockquote {
  background: #2E3192 none repeat scroll 0 0;
  border-left: 3px solid #000;
  color: #fff;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 13px;
  margin-left: 40px;
}
.container.blog-post-no-sidebar {
  margin-bottom: 90px;
}
#blog-post-no-sidebar .blog-post-no-sidebar .content .leave-comment button, #contact .contact .contact-form button {
  background: #2E3192 none repeat scroll 0 0;
  border: 1px solid #2E3192;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 23px;
  padding: 12px 28px 11px;
  text-transform: capitalize;
  transition: all 0.6s ease-out 0s;
}
.article-content a {
  color: #757575;
}
.article-content a:hover {
  color: #2E3192;
}


/* Contact-message-modal  css start */
.cr-contact-message-modal {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: auto;
width: 100%;
background: rgba(25, 25, 25, 0.95);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
visibility: hidden;
opacity: 1;
z-index: -9;
-webkit-transition: 0.5s ease-out 0s;
-moz-transition: 0.5s ease-out 0s;
-ms-transition: 0.5s ease-out 0s;
-o-transition: 0.5s ease-out 0s;
transition: 0.5s ease-out 0s;
padding: 30px;
padding-right: 60px;
-webkit-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2); }
.cr-contact-message-modal .form-messege {
	font-size: 14px;
	margin-bottom: 0;
	line-height: 1.3;
}
.cr-contact-message-modal .form-messege.error {
  color: #f6644F; }
.cr-contact-message-modal .form-messege.success {
  color: #47BB8F; }
.cr-contact-message-modal.is-visible {
opacity: 1;
visibility: visible;
z-index: 99999;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.cr-contact-message-modal button {
position: absolute;
right: 25px;
top: 30px;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
background: transparent;
color: #ffffff;
outline: none;
border: none;
font-size: 20px; }

@media only screen and (max-width: 767px) {
.cr-contact-message-modal {
padding-right: 40px; }
.cr-contact-message-modal button {
	right: 14px;
	top: 24px;
} }



/* GOOGLE MAP */
#map {
  width: 100%;
  height: 400px; /* Adjust as needed */
}

  

/* BLOG CSS */
/* Full Background Image Section */
.background-image-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 0; /* Adjust padding as needed */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 1;
}

.container.blog-post-no-sidebar {
  position: relative;
  z-index: 2; /* Ensure content is above the overlay */
  color: #fff; /* Light text for contrast (for content outside boxes) */
}

/* Unique Background Images for Each Page */
.graphic-design-bg {
  background-image: url('img/blog/graphic-design-bg.jpg'); /* Background for Graphic Design */
}

.computer-maintenance-bg {
  background-image: url('img/blog/computer-maintenance-bg.jpg'); /* Background for Computer Maintenance */
}

.website-design-bg {
  background-image: url('img/blog/website-design-bg.jpg'); /* Background for Website Design */
}

/* 3-Column Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Columns */
  gap: 15px; /* Spacing between boxes */
  margin-bottom: 20px;
}

/* Small Info Boxes */
.small-info-box {
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease; /* Smooth transition */
}

.small-info-box h4 {
  margin-top: 0;
  font-size: 16px;
  color: #333; /* Dark text for headings */
}

.small-info-box p {
  margin-bottom: 0;
  font-size: 14px;
  color: #000000; /* Dark text for paragraphs */
  line-height: 1.5;
}

.small-info-box:hover {
  background-color: rgba(245, 245, 245, 0.9); /* Slightly darker on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px); /* Slight lift effect */
  border-color: #2E3192; /* Highlight border color */
}

.small-info-box-icon {
  font-size: 20px;
  color: #2E3192;
  margin-right: 12px;
  padding: 8px;
  background-color: rgba(249, 249, 249, 0.9); /* Semi-transparent background */
  border-radius: 50%;
  transition: all 0.3s ease;
}

.small-info-box:hover .small-info-box-icon {
  background-color: #2E3192; /* Change icon background on hover */
  color: #fff; /* Change icon color on hover */
}

/* Full-Width Boxes (Blockquote and Conclusion) */
.small-info-box.full-width {
  grid-column: 1 / -1; /* Span all 3 columns */
}

/* Blockquote Style */
.small-info-box blockquote {
  border-left: 4px solid #2E3192;
  padding-left: 12px;
  font-style: italic;
  color: #555; /* Dark text for blockquote */
  margin: 0;
  font-size: 14px;
}

/* Conclusion Style */
.small-info-box.conclusion {
  background-color: rgba(249, 249, 249, 0.9);
  border-color: #ddd;
}

/* Responsive Design */
@media (max-width: 992px) {
  .grid-container {
      grid-template-columns: repeat(2, 1fr); /* 2 Columns for tablets */
  }
}

@media (max-width: 768px) {
  .grid-container {
      grid-template-columns: 1fr; /* 1 Column for mobile */
  }
}

/* Change the color of the Admin link to yellow */
li a[href="https://wa.me/255752208208"] {
  color: yellow; /* Change to yellow */
  text-decoration: none; /* Optional: Remove underline */
}

/* Change the color of the Admin link on hover */
li a[href="https://wa.me/255752208208"]:hover {
  color: #ffcc00; /* Change to a darker yellow on hover */
}



/* Leave a Comments */
input, textarea {
  color: black; /* Rangi ya maandishi iwe nyeusi */
  background-color: white; /* Rangi ya background iwe nyeupe */
  border: 1px solid #ccc; /* Mstari wa nje kwa urembo */
  padding: 10px;
  width: 100%;
}

input::placeholder, textarea::placeholder {
  color: #888; /* Rangi ya maandishi ya placeholder */
}







/* end css */