:root {

  --primary-color: #b70100;

  --secondary-color: #020b15;

  --black-color: #292929;

  --light-black-color: #343536;

  --dark-color: #313131;

  --body-color: #5A5A5A;

  --gray-color: #777F81;

  --light-color: #fdfdfd;



  /* Bootstrap Theme Color  */

  --bs-gray-100: #F6F6F6;

  --bs-gray-300: #DCDCDC;

  --bs-primary-text-emphasis: var(--primary-color);

  --bs-body-color-rgb: 90, 90, 90;

  --bs-light-rgb: rgba(255, 255, 255, 1);

  --bs-dark-rgb: 41, 41, 41;

  --bs-primary-rgb: 178, 142, 113;

}







.hamburger-lines {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 30px;

  height: 22px;

  margin: 20px;

}



.hamburger-lines .line {

  height: 3px;

  background-color: #fff;

  border-radius: 2px;

  width: 100%;

}



.blog__item {
	margin-bottom: 40px;
	background: #ffffff;
	-webkit-box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.blog__item:hover {
	-webkit-box-shadow: 0px 5px 35px rgba(0, 61, 85, 0.15);
	box-shadow: 0px 5px 35px rgba(0, 61, 85, 0.15);
}

.blog__item:hover .blog__item__text h5 a {
	text-decoration: underline;
}

.blog__item__pic img {
	min-width: 100%;
}

.blog__item__text {
	padding: 25px 30px 25px;
}

.blog__item__text h5 {
	margin-bottom: 18px;
}

.blog__item__text h5 a {
	color: #111111;
	font-weight: 600;
	line-height: 24px;
}

.blog__item__text ul li {
	list-style: none;
	display: inline-block;
	font-size: 13px;
	margin-right: 22px;
	color: #888888;
	position: relative;
	font-weight: 300;
}

.blog__item__text ul li:after {
	position: absolute;
	right: -16px;
	top: 12px;
	height: 5px;
	width: 5px;
	background: #888888;
	border-radius: 50%;
	content: "";
}

.blog__item__text ul li img {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 5px;
}

.blog__item__text ul li:last-child {
	margin-right: 0;
}

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

.blog__details__related h3 {
	color: #111111;
	font-weight: 600;
	margin-bottom: 35px;
	text-align: center;
}

.blog__details__related .blog__item__text {
	padding: 25px 25px 20px;
}

.blog__details__related .blog__item__text h5 {
	font-size: 15px;
	line-height: 19px;
	margin-bottom: 0;
}

.blog__details__related .blog__item__text span {
	font-size: 13px;
	color: #888888;
	font-weight: 300;
}



li{

  list-style: none;

}
.article li{
  list-style: disc;
}
img {
  max-width: 100%;
}

#subscribe .modal-dialog.modal-lg img, #quote .modal-sheet.position-static.d-block.bg-body-secondary img{

  width: 100%;

}

.navbar-toggler {

  background-color: transparent;

  transition: all 0.3s ease;

}



.navbar-toggler .navbar-icon {

  fill: #333;

  transition: transform 0.3s ease, fill 0.3s ease;

}



/* Hover effect */

.navbar-toggler:hover .navbar-icon {

  fill: #0d6efd; /* Bootstrap primary color */

  transform: scale(1.1);

}



/* When navbar is open */

.navbar-toggler[aria-expanded="true"] .navbar-icon {

  fill: #dc3545; /* Change color when active */

  transform: rotate(90deg);

}

.navbar-toggler[aria-expanded="true"] {

  background-color: rgba(13, 110, 253, 0.1); /* light blue */

}

.paddimg-small{

  padding: 50px 0px 50px;

  

}



section.padding-small{

  background: url(/imgs/header_pages.svg) repeat-x center bottom;

  background-size: cover;













  

}

#faq.padding-small{

  background: none;

}

.navbar-toggler {

  background: #b70100;

}

.paddimg-small.home{

  padding: 50px 0px 50px;

  background: #f1f1f1;

}

div.row.align-items-center.g-0{

  position: relative;



}



#footer{

  background:#DCDCDC;

  margin-top: 100px;

}

.service_price{

position: relative;

width: 100%;

z-index: 2;

}

#modalForgot .modal-dialog{

  max-width: 500px;

}

.bg-primary h2, .bg-success h4, .bg-primary h4, .bg-danger h5, .btn-close{

  color: #fff !important;

}

.modal.show .modal-dialog {

  margin-top: 50px;

}

.modal-content .modal-body{

  background: #fff;;

}



#about-us .imageblock img, .service_price img{

  width: 100%;

}















  .accordion-button::after {

    order: -1;

    margin-left: 0;

    margin-right:0.5em;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='primary-color' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");

    background-color: white;

}





.video-header {

  position: relative;

  overflow: hidden;

  height: 80vh; /* Full screen height */



}



.video-header iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none; /* Prevent interactions with the video */

}





.video-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */

  z-index: 1;

}



.header-content {

  position: absolute;

  z-index: 2;

  text-align: center;

  color: white;

  top: 0px;

  width: 100%;

}

/* Fonts */

:root {

  --heading-font: "Poppins", sans-serif;

  --body-font: "Poppins", sans-serif;

}



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

/* 2 GENERAL TYPOGRAPHY

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



/* 2.1 General Styles

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

*,

*::before,

*::after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



html {

  box-sizing: border-box;

}

.header-content h1, .header-content .lead {

  color: #fff;

}

#toggleActionButtons{

top: -81px;

  position: absolute;

  right: 0px;



}





.call-action {

    position: fixed;

    right: 0px;



    display: flex;

    height: 58px;

    align-items: center;

    justify-content: center;

    z-index: 99;

    bottom: 0px;

  }



 #livesite_action_buttons .dropdown-menu.show {

  width: 100%;

 }

  



body {

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

  font-family: var(--body-font);

  font-size: 16px;

  font-weight: 400;

  line-height: 164%;

  letter-spacing: 0.32px;

  color: var(--body-color);

  margin: 0;

}

.offcanvas{

    z-index: 2000;

}

p {

  color: var(--body-color);

}



a {

  color: inherit;

  text-decoration: none;

  transition: 0.3s ease-in-out;

}



a:hover {

  color: var(--primary-color);

}



.text-light {

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

}



.text-primary {

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

}



.text-black {

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

}



/* 2.2 Background Color

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

.bg-light {

  background-color: var(--light-color) !important;

}



.bg-primary {

  background-color: var(--primary-color) !important;

}



.bg-secondary {

  background-color: var(--secondary-color) !important;

}



.bg-gray {

  background-color: var(--bs-gray-100) !important;

}





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

/** 2.3 Section

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

/* - Section Padding

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

.padding-small {

  padding-top: 4em;

  padding-bottom: 4em;

}



.padding-medium {

  padding-top: 10em;

  padding-bottom: 10em;

}

.img-fluid.header_img{

  height: 100%;

}



.padding-large {

  padding-top: 12em;

  padding-bottom: 12em;

}

#actionButtonList{

    background: #fff;



}

#actionButtonList .btn{

    text-align: left;

}

#actionButtonList .btn:hover{

    background: #0d6efd;

    color: #fff;

}





@media only screen and (max-width: 990px) {

  .padding-small {

    padding-top: 6em;

    padding-bottom: 6em;

  }







  #subscribe .p-5.pb-4.border-bottom-0{

    padding: 15px 20px !important;

  }



  a.navbar-brand span{

    display:none;

  }



  



  

}



/* - Section Margin

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

.margin-small {

  margin-top: 8.125em;

  margin-bottom: 8.125em;

}



.margin-medium {

  margin-top: 10em;

  margin-bottom: 10em;

}



.margin-large {

  margin-top: 12em;

  margin-bottom: 12em;

}





/* - Section Title

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

h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--dark-color);

  font-family: var(--heading-font);

  text-transform: capitalize;

  font-weight: 600;

  letter-spacing: 0.84px;

  line-height: 115%;

}



h6 {

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.3rem;

}



/* - Content width

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

.container-md {

  max-width: 1465px;

}



.container-lg {

  max-width: 1750px;

}



/* Animation */

@media (min-width: 200px) {

  .animate {

    animation-duration: 0.3s;

    -webkit-animation-duration: 0.3s;

    animation-fill-mode: both;

    -webkit-animation-fill-mode: both;

  }

}



/* Animate Slide */

@keyframes slide {

  0% {

    transform: translateY(1rem);

    opacity: 0;

  }



  100% {

    transform: translateY(0rem);

    opacity: 1;

  }



  0% {

    transform: translateY(1rem);

    opacity: 0;

  }

}



@-webkit-keyframes slide {

  0% {

    -webkit-transform: transform;

    -webkit-opacity: 0;

  }



  100% {

    -webkit-transform: translateY(0);

    -webkit-opacity: 1;

  }



  0% {

    -webkit-transform: translateY(1rem);

    -webkit-opacity: 0;

  }

}



.slide {

  -webkit-animation-name: slide;

  animation-name: slide;

}



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

/** 2.4 Buttons

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



.btn {

  --bs-btn-padding-x: 2rem;

  --bs-btn-padding-y: 1rem;

  --bs-btn-font-size: 1rem;

  --bs-btn-font-weight: 500;

  text-transform: uppercase;

  border-radius: 0px;

  transition: all 0.5s ease-in-out;

}



/* - Primary Buttons

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

.btn-primary {

  --bs-btn-color: var(--light-color);

  --bs-btn-bg: var(--primary-color);

  --bs-btn-border-color: var(--primary-color);

  --bs-btn-hover-color: var(--light-color);

  --bs-btn-hover-bg: var(--primary-color);

  --bs-btn-hover-border-color: var(--primary-color);

  --bs-btn-focus-shadow-rgb: 49, 132, 253;

  --bs-btn-active-color: var(--light-color);

  --bs-btn-active-bg: var(--primary-color);

  --bs-btn-active-border-color: var(--primary-color);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: var(--light-color);

  --bs-btn-disabled-bg: var(--primary-color);

  --bs-btn-disabled-border-color: var(--primary-color);

}



/* - Button Hover Effect

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

.btn-slide.btn-bg {

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

  border: 1px solid var(--primary-color);

}

#toggleActionButtons .bi.bi-telephone{

  left: 13px;

  position: absolute;



}



.btn-slide {

  position: relative;

  display: inline-block;

  border: none;

  cursor: pointer;

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

}



.btn-slide.hover-slide-right::before {

  top: 0;

  bottom: 0;

  left: 0;

  height: 100%;

  width: 3%;

  position: absolute;

  content: "";

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

  transition: 0.3s ease-in-out;

}







.btn-slide span {

  position: relative;

  display: inline-block;

  top: 0;

  left: 0;

  width: 100%;

  transition: 0.3s;

  font-weight: 600;

}



.blog-posts .btn-slide span {

  display: inline !important;

}

.blog-posts .btn-slide a i{

  padding-left: 15px;

}







.blog-posts article {

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

  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);

  transition: 0.3s;

}



.blog-posts .post-img img {

  transition: 0.5s;

}



.blog-posts .post-date {

  background-color: #ffffff99;

  color: #000;

  position: absolute;

  right: 0;

  bottom: 0;

  text-transform: uppercase;

  font-size: 13px;

  padding: 3px 8px;

  font-weight: 500;

}



.blog-posts .post-content {

  padding: 30px;

}



.blog-posts .post-title {

  font-size: 20px;

  color: var(--heading-color);

  font-weight: 700;

  transition: 0.3s;

  margin-bottom: 15px;

}



.blog-posts .meta i {

  font-size: 16px;

  color: var(--accent-color);

}



.blog-posts .meta span {

  font-size: 15px;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.blog-posts p {

  margin-top: 20px;

}



.blog-posts hr {

  color: color-mix(in srgb, var(--default-color), transparent 60%);

  margin-bottom: 15px;

}



.blog-posts .readmore {

  display: flex;

  align-items: center;

  font-weight: 600;

  line-height: 1;

  transition: 0.3s;

  color: color-mix(in srgb, var(--heading-color), transparent 20%);

}



.blog-posts .readmore i {

  line-height: 0;

  margin-left: 6px;

  font-size: 16px;

}



.blog-posts article:hover .post-title,

.blog-posts article:hover .readmore {

  color: var(--accent-color);

}



.blog-posts article:hover .post-img img {

  transform: scale(1.1);

}





.blog-pagination {

  padding-top: 0;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.blog-pagination ul {

  display: flex;

  padding: 0;

  margin: 0;

  list-style: none;

}



.blog-pagination li {

  margin: 0 5px;

  transition: 0.3s;

}



.blog-pagination li a {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  padding: 7px 16px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.blog-pagination li a.active,

.blog-pagination li a:hover {

  background: var(--accent-color);

  color: var(--contrast-color);

}



.blog-pagination li a.active a,

.blog-pagination li a:hover a {

  color: var(--contrast-color);

}





.blog-details {

  padding-bottom: 30px;

}



.blog-details .article {

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

  padding: 30px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}



.blog-details .post-img {

  margin: -30px -30px 20px -30px;

  overflow: hidden;

}



.blog-details .title {

  color: var(--heading-color);

  font-size: 28px;

  font-weight: 700;

  padding: 0;

  margin: 30px 0;

}



.blog-details .content {

  margin-top: 20px;

}



.blog-details .content h3 {

  font-size: 22px;

  margin-top: 30px;

  font-weight: bold;

}



.blog-details .content blockquote {

  overflow: hidden;

  background-color: color-mix(in srgb, var(--default-color), transparent 95%);

  padding: 60px;

  position: relative;

  text-align: center;

  margin: 20px 0;

}



.blog-details .content blockquote p {

  color: var(--default-color);

  line-height: 1.6;

  margin-bottom: 0;

  font-style: italic;

  font-weight: 500;

  font-size: 22px;

}



.blog-details .content blockquote:after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 3px;

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

  margin-top: 20px;

  margin-bottom: 20px;

}



.blog-details .meta-top {

  margin-top: 20px;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.blog-details .meta-top ul {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  align-items: center;

  padding: 0;

  margin: 0;

}



.blog-details .meta-top ul li+li {

  padding-left: 20px;

}



.blog-details .meta-top i {

  font-size: 16px;

  margin-right: 8px;

  line-height: 0;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.blog-details .meta-top a {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  font-size: 14px;

  display: inline-block;

  line-height: 1;

}



.blog-details .meta-bottom {

  padding-top: 10px;

  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.blog-details .meta-bottom i {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  display: inline;

}



.blog-details .meta-bottom a {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  transition: 0.3s;

}



.blog-details .meta-bottom a:hover {

  color: var(--accent-color);

}



.blog-details .meta-bottom .cats {

  list-style: none;

  display: inline;

  padding: 0 20px 0 0;

  font-size: 14px;

}



.blog-details .meta-bottom .cats li {

  display: inline-block;

}



.blog-details .meta-bottom .tags {

  list-style: none;

  display: inline;

  padding: 0;

  font-size: 14px;

}



.blog-details .meta-bottom .tags li {

  display: inline-block;

}



.blog-details .meta-bottom .tags li+li::before {

  padding-right: 6px;

  color: var(--default-color);

  content: ",";

}



.blog-details .meta-bottom .share {

  font-size: 16px;

}



.blog-details .meta-bottom .share i {

  padding-left: 5px;

}















.page-title .breadcrumbs ol {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  padding: 0;

  margin: 0;

  font-size: 14px;

  font-weight: 400;

}



.page-title .breadcrumbs ol li+li {

  padding-left: 10px;

}



.page-title .breadcrumbs ol li+li::before {

  content: "/";

  display: inline-block;

  padding-right: 10px;

  color: color-mix(in srgb, var(--default-color), transparent 70%);

}









.page-title {

  color: var(--default-color);

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

  padding: 25px 0;

  position: relative;

  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.page-title h1 {

  font-size: 24px;

  font-weight: 700;

}



.btn-slide.hover-slide-right:hover::before {

  width: 100%;

}



.btn-slide.hover-slide-right:hover span {

  color: var(--light-color);

}



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

/** 3.CONTENT ELEMENTS

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



/* Dropdown

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

.dropdown-item {

  text-transform: uppercase;

  font-weight: 500;

  color: var(--dark-color);

  font-family: var(--heading-font);

}



.dropdown-item.active,

.dropdown-item:hover,

.dropdown-item:active {

  color: var(--dark-color);

  background-color: var(--bs-gray-300);

}



.dropdown-toggle::after {

  border: none;

  margin-left: 0em;

  vertical-align: 0em;

}





/* Breadcrumb

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

.breadcrumb-item+.breadcrumb-item::before {

  color: var(--bs-light);

  position: relative;

}





/* Pagination

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

.pagination {

  --bs-pagination-color: var(--black-color);

  --bs-pagination-hover-color: #fff;

  --bs-pagination-hover-bg: var(--primary-color);

  --bs-pagination-hover-border-color: var(--primary-color);

  --bs-pagination-focus-color: #fff;

  --bs-pagination-focus-bg: var(--primary-color);

  --bs-pagination-focus-box-shadow: none;

  --bs-pagination-active-bg: var(--primary-color);

  --bs-pagination-active-border-color: var(--primary-color);

}





/* Accordion

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

.accordion {

  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');

  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');

  --bs-accordion-border-radius: 0px;

}



.accordion-button:focus {

  box-shadow: none;

}



.accordion-button:not(.collapsed) {

  background-color: transparent;

  box-shadow: none;

}







/* Form

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

.form-control:focus {

  border: 1px solid #acacac;

  box-shadow: none;

}





/* Swiper

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

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {

  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);

  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));

  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));

}



.swiper-pagination-bullet.swiper-pagination-bullet-active {

  background: var(--dark-color);

}





/* Modal Video

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

.modal-dialog {

  max-width: 800px;

  margin: auto;

  height: auto;

  display: block;

  align-items: center;

}







.modal-content {

  padding: 0;

  border: none;

  border-radius: 0

}







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

/* 4 SITE STRUCTURE */

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



/* 4.1 Header

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

a.nav-link {

  text-transform: capitalize;

  font-weight: 500;

  color: var(--dark-color);

  font-family: var(--heading-font);

  transition: all 0.3s ease-in-out;

}



a.nav-link::after {

  content: "";

  text-align: center;

  display: block;

  width: 0;

  height: 2px;

  background: var(--primary-color);

  transition: width 0.9s;

}



a.nav-link.active::after,

a.nav-link:focus::after,

a.nav-link:hover::after {

  width: 100%;

  transition: width 0.9s;

}

#primary-header {

    background: #f1f1f1;

}



#primary-header .dropdown .search::after {

  content: none;

}



#primary-header .search-dropdown .dropdown-menu {

  width: 260px;

}



#primary-header .search-dropdown .dropdown-menu input {

  min-width: 100%;

}



#primary-header .search-dropdown .dropdown-menu button {

  padding: 0 12px;

  min-height: -webkit-fill-available;

  border-radius: 0.25rem;

}



@media only screen and (max-width: 990px) { 

  a.nav-link {

    font-size: 1.5rem;

  }

 #subscribe .bg-light.rounded img{

  width: 100%;

 



  }

  .call-action {

    bottom: 80px;

  }



  a.nav-link.active::after,

  a.nav-link:focus::after,

  a.nav-link:hover::after {

    width: 0%;

  }



  a.nav-link.active,

  a.nav-link:focus,

  a.nav-link:hover {

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

  }

}





/* 4.2 Brand Section

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

img.brand-image {

  filter: contrast(0);

  transition: all 0.3s ease-in;

}



img.brand-image:hover {

  filter: contrast(1);

}





/* 4.3 About Section 

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

svg.play-icon {

  animation: play 1.5s alternate infinite ease-in;

}



@keyframes play {

  0% {

    transform: scale(.8);

  }



  100% {

    transform: scale(1.1);

  }

}







/* 4.4 Services Section

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

/* Jarallax */

.jarallax {

  min-height: 350px;

  transition: all 0.5s ease-in-out;

}



.service-block {

  transition: all 0.5s ease-in-out;

}



.service-block:hover .jarallax {

  opacity: 0;

}



.service-btn {

  transition: all 0.5s ease-in-out;

}



.service-block:hover .service-btn {

  color: var(--dark-color);

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

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

}





/* 4.5 Project Section

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

.swiper-slide.swiper-width {

  width: auto !important;

}



.project-content .portfolio-img {

  transition: all 0.5s ease-in-out;

}



.project-content:hover .portfolio-img {

  opacity: 0.3;

}



.portfolio-description {

  opacity: 0;

  transition: all 0.5s ease-in-out;

}



.project-content:hover .portfolio-description {

  opacity: 1;

}







/* 4.6 CTA Section

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

.border-dotted {

  border: 2px dashed rgba(255, 255, 255, 0.5);

}













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

/* 5 PAGES STYLE */

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





/* 5.1 Projects Page

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



button.filter-button {

  border: 0;

  background: transparent;

  text-transform: uppercase;

  transition: all 0.5s ease-in-out;

  border-radius: 20px;

}



button.filter-button.active,

button.filter-button:hover {

  color: var(--bs-light);

  background: var(--primary-color);

}





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

 5.2 Pricing page 

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

.plan-post {

  border: 1px solid var(--secondary-color);

}



span.price-tick {

  color: var(--primary-color);

}



.price-option {

  height: 300px;

}





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

 5.3 Reviews page

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



.reviews-components {

  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);

}



iconify-icon.quote {

  font-size: 60px;

  color: var(--primary-color);

}



.rate {

  color: var(--primary-color);

}



.modal-content.border-danger {

  background-color: none !important;

  background: none !important;

}

.modal-footer{

  background: #fff;

}



.modal-content {

  background-color:none !important;

  background:none;

}

.col-lg-6 img.header_img{

  max-width: 100%;



}