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

  Theme Name: Rooftek - Roofing Services WordPress Theme
  Author: Gramentheme
  Support: https://gramentheme.com/
  Description: Rooftek - Roofing Services WP Theme
  Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

1	THEME DEFAULT CSS START
2	TYPOGRAPHY CSS START 
3	BOOTSTRAP CUSTOMIZE
4	COMMON CLASSES CSS START 
5	MFP CUSTOMIZE
6	BODY OVERLAY 
7	OFFCANVAS CSS START
8	SECTION TITLE CSS START
9	SECTION SUB TITLE CSS START
10	SPACE CSS START
11	BACKTOTOP CSS START
12	PRELOADER CSS START
13	MEAN MENU CSS START
14	SEARCH CSS START
15	MENU CSS START
16	HEADER CSS START
17	BUTTON CSS START
18	FOOTER CSS START
19	BANNER CSS START
20	ABOUT US CSS START
21	SERVICE SLIDER CSS START
22	CTA 1 CSS START
23	PROJECT SLIDER CSS START
24	TEAM CSS START
25	CHOOSE CSS START
26	TESTIMONIALS CSS START
27	BLOG STYLE ONE CSS START
28	BRAND CSS START
29	BANNER TWO CSS START
30	FEATURES CSS START
31	ABOUT US 2 CSS START
32	SERVICE TAB CSS START
33	WORK PROCESS CSS START
34	TEXT SLIDER CSS START
35	PROJECT SLIDER CSS START
36	TESTIMONIALS TWO CSS START
37	ICON BOX COUNTER CSS START
38	HELP FORM CSS START
39	BLOG STYLE TWO CSS START
40	FOOTER STYLE TWO CSS START
41	BANNER STYLE THREE CSS START
42	ABOUT THREE CSS START
43	HELP FORM THREE CSS START
44	SERVICE THREE CSS START
45	CHOOSE THREE CSS START
46	FAQ CSS START
47	DARK VERSION CSS START
48	PAGE TITLE CSS START
49	MAP CSS START
50	SERVICE PAGE CSS START
51	PROJECTS PAGE CSS START
52	TEAM DETAILS CSS START
53	PAGINATION CSS START
54	BLOG DETAILS CSS START
55	CONTACT PAGE CSS START
56	ANIMATION CSS START


**********************************************/

/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/

.main-menu ul li.has-dropdown > a::after, .main-menu ul li .submenu, .main-menu ul li .mega-menu, .main-menu ul li .mega-menu li ul li a::before, .df-search-area, .mean-container .mean-nav ul li > a > i, .mean-container .mean-nav ul li a.mean-expand.mean-clicked i, .offcanvas__contact-icon i, .offcanvas__overlay, .fill-btn.has-border i, a,
.btn,
button,
span,
svg,
p,
input,
select,
textarea,
li,
img,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6, i[class^=flaticon-], .body__overlay {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

/* variables */

:root { 
  --primary-font: 'Inter', sans-serif;
  --secondary-font: 'Roboto', sans-serif;
 
  --theme-color: #EA1826;
  --theme-color-1: #102039;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

/*---------------------------------
    Typography css start 
---------------------------------*/
body {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-weight: normal;
  color: var(--theme-color-1);
  line-height: 26px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--primary-font);
  color: var(--theme-color-1);
  margin-top: 0px;
  line-height: 1.3;
  margin-bottom: 0;
  font-weight: 600;
}

h1 {
  font-size: 64px;
}

h2 {
  font-size: 55px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 18px;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  color: #787878;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 26px;
}

a {
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

hr:not([size]) {
  margin: 0;
  border-color: rgba(22, 22, 22, 0.1);
  opacity: 1;
  border-width: 1px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
textarea {
  outline: none;
  background-color: #fff;
  height: 65px;
  width: 100%;
  line-height: 65px;
  font-size: 16px;
  color: var(--theme-color);
  padding-left: 21px;
  padding-right: 21px;
  border-radius: 5px;
  border: 1px solid var(--theme-color-1);
}

*::-moz-selection {
  background: #151515;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #151515;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #151515;
  color: #fff;
  text-shadow: none;
}

*::-moz-placeholder {
  color: #787878;
  opacity: 1;
  font-size: 14px;
}

*::placeholder {
  color: #787878;
  opacity: 1;
  font-size: 14px;
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}

.row {
  --bs-gutter-x: 3rem;
}

figure{
  margin: 0 !important;
}

@media (min-width: 1441px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1350px;
  }
}
.large-container {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 15px;
}

.large-container-1 {
  max-width: 1740px;
  margin: 0 0 0 auto;
  padding: 0 15px;
}

.small-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.g-40,
.gx-40 {
  --bs-gutter-x: 40px;
}

.g-40,
.gy-40 {
  --bs-gutter-y: 40px;
}

.g-50,
.gx-50 {
  --bs-gutter-x: 50px;
}

.g-50,
.gy-50 {
  --bs-gutter-y: 50px;
}

.g-60,
.gy-60 {
  --bs-gutter-y: 60px;
}

.g-0, .gy-0 {
  --bs-gutter-y: 0;
}

.g-0, .gx-0 {
  --bs-gutter-x: 0;
}

.g-15 {
  --bs-gutter-y: 15px;
  --bs-gutter-x: 15px;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.m-img img {
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hr-1 {
  border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
  overflow-x: clip;
}

.bg-color-1{
  background: var(--theme-color-1);
}

.bg-color-2{
  background: #F1F7FD;
}

.bg-color-3{
  background: #0F1D34 !important;
}

.bg-color-4{
  background: var(--theme-color);
}

/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 1280px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 850px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 820px;
  }
}

.mfp-close {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mfp-close:hover {
  color: #fff;
}
.mfp-close::after {
  position: absolute;
  content: "\f00d";
  height: 100%;
  width: 100%;
  font-family: "Font Awesome 6 Pro";
  font-size: 31px;
  font-weight: 200;
  right: -20px;
  margin-top: -25px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .mfp-close::after {
    right: 15px;
    margin-top: -30px;
  }
}

.body__overlay {
  background-color: #151515;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.body__overlay {
  background-color: #151515;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.body__overlay.opened {
  opacity: 0.7;
  visibility: visible;
}

.bd-sticky {
  position: sticky;
  top: 120px;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body-overlay {
  background-color: #151515;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

.body-overlay.opened {
  opacity: 0.7;
  visibility: visible;
}


/*----------------------------------------*/
/* OFFCANVAS CSS START
/*----------------------------------------*/
.offcanvas__close button {
  height: 45px;
  width: 45px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background-color: var(--theme-color-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.offcanvas__close button i {
  color: #fff;
}
.offcanvas__info {
  background: #191919 none repeat scroll 0 0;
  border-left: 2px solid var(--theme-color);
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.offcanvas__info ::-webkit-scrollbar {
  display: none;
}
@media (max-width:450px) {
  .offcanvas__info {
    width: 300px;
  }
}
.offcanvas__info.info-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.offcanvas__logo a img {
  width: 150px;
}
.offcanvas__wrapper {
  position: relative;
  height: 100%;
  padding: 30px 30px;
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.offcanvas__top {
  padding-bottom: 20px;
}
.offcanvas__search {
  position: relative;
}
.offcanvas__search input {
  width: 100%;
  height: 50px;
  line-height: 40px;
  padding-right: 20px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #CECECE;
  font-size: 14px;
  color: #fff;
  padding-left: 0;
}
.offcanvas__search input::placeholder {
  color: #fff;
}
.offcanvas__search input:focus {
  border-color: #fff;
}
.offcanvas__search button {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
}
.offcanvas__search button:hover {
  color: var(--theme-color);
}
.offcanvas__text p {
  margin-bottom: 25px;
}
.offcanvas__contact h4 {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: var(--bd-fw-bold);
  color: #fff;
}
.offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas__contact ul li:hover i {
  color: #fff;
  border-color: var(--theme-color-1);
  background-color: var(--theme-color-1);
}
.offcanvas__contact-icon i {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  border: 1px solid var(--clr-border-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  position: relative;
  z-index: 5;
}
.offcanvas__contact-text a {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.offcanvas__contact-text a:hover {
  color: var(--theme-color);
}
.offcanvas__social {
  margin-bottom: 30px;
}
.offcanvas__social ul li {
  display: inline-block;
}
.offcanvas__social ul li:not(:last-child) {
  margin-right: 5px;
}
.offcanvas__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  background-color: transparent;
}
.offcanvas__social ul li a:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
  background-color: var(--theme-color-1);
}
.offcanvas__notification-icon a {
  font-size: 14px;
  color: #fff;
  position: relative;
}
.offcanvas__notification-icon a .notification-count {
  position: absolute;
  top: -4px;
  right: -13px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 600;
  background-color: var(--theme-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
.offcanvas__notification-text p {
  margin-bottom: 0;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
}
.offcanvas__notification-text p .notification-number {
  color: var(--theme-color);
}
.offcanvas__notification-text p a {
  color: var(--theme-color);
}
.offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #151515;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}
.offcanvas__overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}

.sidebar__toggle {
  cursor: pointer;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease-in-out;
}

.sidebar__toggle:hover {
  color: var(--theme-color);
}

.sidebar__toggle:hover .bar-icon span,
.sidebar__toggle:hover .bar-icon span small {
  background: #fff;
}

@media (max-width: 992px) {
  .app__offcanvas-overlay.overlay-open {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
  }
}

.offcanvas__contact-icon {
  margin-inline-end: 15px;
}



/*----------------------------------------*/
/*  SECTION TITLE CSS START
/*----------------------------------------*/


.section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .section-title {
    font-size: 48px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-title {
    font-size: 42px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-title {
    font-size: 36px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    font-size: 45px !important;
  }
  .section-title br {
    display: none;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section-title {
    font-size: 32px !important;
  }
  .section-title br {
    display: none;
  }
}
@media (max-width:450px) {
  .section-title {
    font-size: 28px !important;
  }
}

/*----------------------------------------*/
/*  SECTION SUB TITLE CSS START
/*----------------------------------------*/

.section-sub-title{
  position: relative;
  font-family: var(--primary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
  margin-left: 45px;
}

.section-sub-title:before {
  content: "\e92c";
  font-family: 'icomoon';
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  position: absolute;
  top: 2px;
  left: -45px;
  height: 16px;
  width: 36px;
  padding: 2px 1px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 50px;
}

.section-sub-title.no-border:before {
  border: none;
}

/*----------------------------------------*/
/*  SPACE CSS START
/*----------------------------------------*/


.section-space {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.section-space-top {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-top {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-top {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-top {
    padding-top: 70px;
  }
}

.section-space-bottom {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-bottom {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-bottom {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-bottom {
    padding-bottom: 70px;
  }
}

.section-space-medium {
  padding: 100px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-medium {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-medium {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-medium {
    padding: 60px 0;
  }
}

.section-space-medium-top {
  padding-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-medium-top {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-medium-top {
    padding-top: 60px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section-space-medium-top {
    padding-top: 60px;
  }
}

.section-space-medium-bottom {
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-medium-bottom {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-medium-bottom {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-medium-bottom {
    padding-bottom: 60px;
  }
}

.section-space-small {
  padding: 80px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-small {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-small {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-small {
    padding: 60px 0;
  }
}

.section-space-small-top {
  padding-top: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-small-top {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-small-top {
    padding-top: 60px;
  }
}


/*----------------------------------------*/
/*  BACKTOTOP CSS START
/*----------------------------------------*/
.backtotop-wrap {
  position: fixed;
  bottom: 35px;
  right: 30px;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
  color: #151515;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.backtotop-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
}
.backtotop-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.backtotop-wrap::after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  content: "\f062";
  text-align: center;
  line-height: 44px;
  font-size: 16px;
  font-weight: 900;
  left: 0;
  top: 0;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.backtotop-wrap svg path {
  fill: none;
}
.backtotop-wrap svg.backtotop-circle path {
  stroke: #ccc;
  stroke-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}


/*----------------------------------------*/
/*  PRELOADER CSS START
/*----------------------------------------*/
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  background-color: #102039;
  z-index: 999;
}
.rooftek-three-bounce {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #102039;
}
.rooftek-three-bounce .rooftek-child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--theme-color);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: rooftek-three-bounce 1.4s ease-in-out 0s infinite both;
  animation: rooftek-three-bounce 1.4s ease-in-out 0s infinite both;
}
.rooftek-three-bounce .rooftek-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.rooftek-three-bounce .rooftek-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.rooftek-three-bounce.style_2.rooftek-three-bounce .rooftek-child {
  background-color: var(--theme-color);
}
@-webkit-keyframes rooftek-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes rooftek-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*----------------------------------------*/
/*  MEAN MENU CSS START
/*----------------------------------------*/

.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: capitalize;
  border-top: 1px solid #414141;
}
.mean-container .mean-nav ul li a:last-child {
  border-bottom: 0;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--theme-color);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
  height: 30px;
  width: 30px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 30px;
  top: 0;
  font-weight: 400;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.mean-container .mean-nav ul li .mega-menu li a {
  height: 200px;
  width: 100%;
  padding: 0;
  border-top: 0;
  margin-bottom: 20px;
}

/*----------------------------------------*/
/*  SEARCH CSS START
/*----------------------------------------*/
.df-search-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  padding: 40px 15px;
  visibility: visible;
  opacity: 0;
  transform: translateY(-120%);
}
.df-search-area.opened {
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
}
.df-search-input {
  position: relative;
}
.df-search-input button {
  position: absolute;
  top: 54%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 24px;
}
.df-search-input button:hover {
  color: var(--tp-theme-primary);
}
.df-search-category span {
  color: var(--clr-common-black);
}
.df-search-category a {
  font-size: 14px;
  margin-left: 5px;
  color: #787878;
}
.df-search-category a:hover {
  color: var(--theme-color-1);
}

.df-search-input input[type="text"] {
  border: 1px solid #e5e5e5;
}

.df-search-category a:hover {
  color: #151515;
}

.df-search-close {
  display: none;
}
.df-search-close-btn {
  border-radius: 50%;
  background: #ECECEC;
  border: 9px solid transparent;
  color: var(--clr-common-black);
  width: 36px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.df-search-close-btn::after, .df-search-close-btn::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 90%;
  top: 46%;
  left: 1px;
  transform-origin: 50% 50%;
  background-color: var(--clr-common-black);
  opacity: 1;
  -moz-transition: -moz-transform ease 0.25s;
  -webkit-transition: -webkit-transform ease 0.25s;
  -o-transition: -o-transform ease 0.25s;
  -ms-transition: -ms-transform ease 0.25s;
  transition: transform ease 0.25s;
}
.df-search-close-btn::before {
  transform: rotate(45deg);
}
.df-search-close-btn::after {
  transform: rotate(-45deg);
}
.df-search-close-btn:hover::before {
  transform: rotate(-45deg);
}
.df-search-close-btn:hover::after {
  transform: rotate(45deg);
}

/*----------------------------------------*/
/*  MENU CSS START
/*----------------------------------------*/
.main-menu ul {
  margin-bottom: 0;
}
.main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 30px;
}
.main-menu ul li:last-child {
  margin-inline-end: 0;
}
.main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #151515;
  padding: 40px 0;
  text-align: left;
  position: relative;
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
/* .main-menu ul li.has-dropdown > a::after {
  content: "\e122";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -o-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 5px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  margin-inline-start: 5px;
  display: inline-block;
} */
.main-menu ul li.has-mega-menu {
  position: static;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 240px;
  background: #fff;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  color: var(--theme-color);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  inset-inline-end: 25px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #151515;
}
.main-menu ul li .submenu li a {
  position: relative;
  z-index: 11;
  color: #151515;
  font-weight: 600;
  font-size: 14px;
  padding: 0 25px;
  padding-bottom: 11px;
  padding-top: 11px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}

.main-menu ul li .submenu li:last-child a {
  border: none;
}

.main-menu ul li .submenu li .submenu {
  inset-inline-start: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  background: var(--theme-color);
  color: #fff;
}
.main-menu ul li .submenu li:hover > a::after {
  color: #fff;
}
.main-menu ul li .submenu li:hover > .submenu {
  -webkit-transform: translateY(1);
  -moz-transform: translateY(1);
  -ms-transform: translateY(1);
  -o-transform: translateY(1);
  transform: translateY(1);
  visibility: visible;
  opacity: 1;
}
.main-menu ul li .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 40px 225px;
  background: #fff;
  box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1);
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  z-index: 99;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li .mega-menu {
    padding: 40px 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li .mega-menu {
    padding: 25px 25px;
    padding-inline-start: 80px;
  }
}
.main-menu ul li .mega-menu li {
  float: left;
  width: 25%;
  margin-inline-end: 0;
  text-align: left;
}
[dir=rtl] .main-menu ul li .mega-menu li {
  float: right;
  margin-left: 0;
  text-align: right;
}
.main-menu ul li .mega-menu li .mega-menu-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #151515;
  cursor: text;
  padding: 0;
  display: inline-block;
  margin-bottom: 15px;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 5px;
}
.main-menu ul li .mega-menu li .mega-menu-title::before {
  display: none;
}
.main-menu ul li .mega-menu li ul li {
  width: 100%;
  float: none;
  margin-bottom: 5px;
}
.main-menu ul li .mega-menu li ul li:last-child {
  margin-bottom: 0;
}
.main-menu ul li .mega-menu li ul li a {
  font-weight: 500;
  font-size: 15px;
  color: #5D636A;
  padding: 0;
  position: relative;
}
.main-menu ul li .mega-menu li ul li a::before {
  position: absolute;
  content: "";
  left: 0;
  right: auto;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 1.2px;
  background-color: var(--theme-color-1);
}
[dir=rtl] .main-menu ul li .mega-menu li ul li a::before {
  right: 0;
  left: auto;
}
.main-menu ul li .mega-menu li ul li:hover > a {
  color: var(--theme-color-1);
}
.main-menu ul li .mega-menu li ul li:hover > a::before {
  background-color: var(--theme-color-1);
}
.main-menu ul li .mega-menu li:hover > .mega-menu-title {
  color: var(--theme-color-1);
  padding-inline-start: 0;
}
.main-menu ul li .mega-menu li:hover > a {
  color: var(--theme-color-1);
}
.main-menu ul li .mega-menu li a:hover {
  padding-inline-start: 18px;
}
[dir=rtl] .main-menu ul li .mega-menu li a:hover {
  padding-inline-start: 18px;
  padding-inline-end: 0px;
}
.main-menu ul li .mega-menu li a:hover::before {
  width: 12px;
}
.main-menu ul li:hover > a {
  color: var(--theme-color);
}

.main-menu ul li.active > a {
  color: var(--theme-color);
  font-weight: 600;
}

.main-menu ul li:hover > a::after {
  color: var(--theme-color-1);
}
/* .main-menu ul li:hover.has-dropdown > a::after {
  content: "\e122";
} */
.main-menu ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
}
.main-menu ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
}
.main-menu-2 ul li a {
  color: #fff;
  position: relative;
}
.main-menu-2 ul li:hover > a {
  color: #fff;
}
.main-menu-2 ul li:hover > a::after {
  color: #fff;
}


/*----------------------------------------*/
/*  HEADER CSS START
/*----------------------------------------*/
.header-transparent {
  position: absolute;
  inset-inline-start: 0;
  margin: auto;
  width: 100%;
  z-index: 99;
}

.bar-icon {
  /* width: 22px;
  height: 15px; */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  font-size: 40px;
  transform: scaleX(-1);
}
.bar-icon span {
  width: 100%;
  height: 2px;
  background: var(--theme-color-1);
  display: inline-block;
}
.bar-icon span:nth-child(2) {
  position: relative;
  width: 6.56px;
}
.bar-icon span:nth-child(2) small {
  position: absolute;
  height: 100%;
  background: var(--theme-color-1);
  left: 12.56px;
  width: 18.06px;
  z-index: 555;
}
.bar-icon.is-white span {
  background: #fff;
}
.bar-icon.is-white span:nth-child(2) small {
  background: #fff;
}

.bar-icon span:nth-child(3) {
  position: relative;
  width: 10px;
  margin: 0 0 0 auto;
}

.header-top-notice > p {
  margin-bottom: 0;
  color: #fff;
  font-weight: var(--bd-fw-medium);
  font-size: 14px;
}

.header-area {
  position: relative;
  z-index: 2;
  padding: 0 50px;
  overflow-x: clip;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area {
    padding: 0 15px;
  }
}
.header-area .fill-btn {
  height: 50px;
}

.header-logo {
  max-width: 170px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-logo {
    max-width: 145px;
  }
}
@media (max-width:450px) {
  .header-logo {
    max-width: 130px;
  }
}
.header-logo img {
  width: 100%;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 80px;
}

.header-right {
  gap: 40px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 150px;
  background: var(--theme-color-1);
}

.header-top-contact-info span {
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 14px;
}

.header-top-contact-info {
  display: inline-flex;
  gap: 50px;
}

.header-top-contact-info span.email:before {
  content: "\e90a";
  font-family: 'icomoon';
  position: absolute;
  top: 0;
  left: -25px;
}

.header-top-contact-info span.time:before {
  content: "\e92b";
  font-family: 'icomoon';
  position: absolute;
  top: 0;
  left: -25px;
}

.header-top-socials {
  color: #fff;
  display: inline-flex;
  gap: 20px;
  font-size: 14px;
}

.header-top-socials span:hover > a{
  color: var(--theme-color);
}

.header-style-two {
  background: transparent;
  position: absolute;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}


.header-style-two .sidebar__toggle .bar-icon {
  color: #fff;
}

/* .header-style-two .sidebar__toggle,
.header-style-two .bar-icon span,
.header-style-two .bar-icon span:nth-child(2) small
 {
  border: 1px solid #fff;
} */

.header-style-two .main-menu ul li a,
.header-style-two .search-toggle-open.header-search .search-icon,
.header-style-two .header-shopping-cart .cart-icon,
.header-style-two .header-link-1 .content span,
.header-style-two .header-link-1 .content h6
{
  color: #fff;
}

.header-style-two .main-menu ul li a{
  padding: 45px 0;
}

.header-style-two .main-menu ul li.active > a{
  color: var(--theme-color);
  font-weight: 600;
}

.header-style-two .main-menu ul li:hover > a{
  color: var(--theme-color);
}

.header-style-two.sticky {
  background: #151515;
}

/* rooftek css */
@media only screen and (max-width: 1399px){  

  .header-action .header-link-1 {
    display: none;
}
        
}
/* rooftek css */
@media only screen and (max-width: 991px){ 
  .header-top,
  .header-shopping-cart.my-auto,
  .search-toggle-open.header-search {
    display: none;
    } 
     
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-left {
    gap: 45px;
  }
}

.header-action {
  display: flex;
  align-items: center;
}

.header-2 {
  padding: 0 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-2 {
    padding: 0 30px;
  }
}

@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .header-2 {
    padding: 20px 0;
  }
}

.bar-icon-2 {
  width: 35px;
  height: 20px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bar-icon-2 span {
  width: 100%;
  height: 2px;
  background: var(--clr-text-secondary);
  display: inline-block;
}
.bar-icon-2 span:nth-child(1) {
  margin-inline-start: -10px;
}
.bar-icon-2:hover span:nth-child(2) {
  margin-inline-start: 0;
}
.bar-icon-2.is-white span {
  background: #fff;
}

.header-main-3 {
  display: grid;
  grid-template-columns: 40% auto 40%;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .header-main-3 {
    grid-template-columns: 50% auto 35%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-main-3 {
    grid-template-columns: 50% auto 38%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-main-3 {
    grid-template-columns: auto auto;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .header-main-3 {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
  }
}

.header-contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-contact-text span {
  font-size: 13px;
  color: var(--clr-text-body);
}
.header-contact-text h6 a:hover {
  color: var(--theme-color-1);
}

.sticky {
  position: fixed !important;
  top: 0;
  z-index: 111;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  background: #fff;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}

.header-area.sticky .main-menu-2 ul li a {
  color: #151515;
}
.header-area.sticky .main-menu-2 ul li:hover > a::after {
  color: #151515;
}
.header-area.sticky .bar-icon-2.is-white span {
  background: #151515;
}


.search-toggle-open.header-search .search-icon,
.header-shopping-cart .cart-icon {
  color: var(--theme-color-1);
  cursor: pointer;
}

.search-toggle-open.header-search .search-icon:hover,
.header-shopping-cart .cart-icon:hover {
  color: var(--theme-color);
}

.header-link-1{
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-link-1 .icon {
  position: relative;
  height: 47px;
  width: 47px;
  border-radius: 50%;
  background: red;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transform: rotate(-45deg);
}

.header-link-1 .icon:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  height: 57px;
  width: 57px;
  border: 1px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-link-1 .content span {
  color: var(--theme-color-1);
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}

.header-link-1 .content h6 {
  color: var(--theme-color-1);
}

.header-link-1:hover .content h6 {
  color: var(--theme-color);
}

/*----------------------------------------*/
/*  BUTTON CSS START
/*----------------------------------------*/

.primary-btn-1{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 20px 24px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-1:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1:active {
  background-color: #fff
}

/* button style two */

.primary-btn-2{
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 15px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-2 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-2:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-2:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-2:active {
  background-color: #fff
}

/* button style 3 */

.primary-btn-3 {
  color: var(--theme-color);
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  border: 1px solid var(--theme-color-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  white-space: nowrap;
  padding: 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s;
  border-radius: 30% 70% 67% 33% / 30% 30% 70% 70%;
  flex-direction: column;
  height: 125px;
  width: 145px;   
  animation: morphing 10s infinite;
}

.primary-btn-3 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-3:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-3:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-3:active {
  background-color: #fff
}

.primary-btn-3 i {
  margin-top: 10px;
}

.primary-btn-3:hover i {
  animation: wobble-vertical 1s ease-in-out 1;
}


/* button style Four */

.primary-btn-4{
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color-1);
  border: 1px solid var(--theme-color-1);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 15px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-4 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-4:hover {
  color: #fff;
  border: 1px solid var(--theme-color);
}

.primary-btn-4:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-4:active {
  background-color: #fff
}


/* button style five */

.primary-btn-5{
  color: var(--theme-color-1);
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #ECECEC;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 15px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  transition: all .6s
}

.primary-btn-5 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-5:hover {
  color: #fff;
  border: 1px solid var(--theme-color);
}

.primary-btn-5:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-5:active {
  background-color: #fff
}

/*----------------------------------------*/
/*  FOOTER CSS START
/*----------------------------------------*/

.footer-top{
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-widget-1 p {
  color: #8f8d9d;
}

.footer-widget-1 .footer-socials span {
  color: #fff;
  height: 36px;
  width: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease;
}

.footer-widget-1 .footer-socials {
  display: inline-flex;
  gap: 10px;
}

.footer-widget-1 .footer-socials span:hover {
  background: var(--theme-color);
  color: #fff;
  border: 1px solid var(--theme-color);
}

.footer-title{
  color: #fff;
}

.footer-widget-2 .service-list li {
  position: relative;
  color: #8f8d9d;
  margin-bottom: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-left: 30px;
}

.footer-widget-2 .service-list li::before {
  content: "\e902";
  font-family: 'icomoon';
  position: absolute;
  top: 0;
  left: -30px;
  transition: all 500ms ease;
}

.footer-widget-2 .service-list li:hover {
 color: var(--theme-color);
}

.footer-widget-3 .content .date {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  margin-left: 20px;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}

.footer-widget-3 .content h6 {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
}

.footer-widget-3 .content h6:hover {
  color: var(--theme-color);
}

.footer-widget-3 .content .date:before {
  content: "\e905";
  font-family: 'icomoon';
  color: var(--theme-color);
  position: absolute;
  top: 0;
  left: -20px;
}

.footer-widget-3 .footer-blog-post-box {
  display: flex;
  gap: 16px;
}

.footer-widget-3 .footer-blog-post-box img {
  width: 78px;
  height: 78px;
}

.footer-widget-4 p{
  color: #8f8d9d;
}

.footer-subscribe input[type=email] {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  height: inherit;
  border-radius: 0;
  margin-bottom: 10px;
  height: 60px;
}

.footer-subscribe button {
  width: 100%;
  justify-content: center;
}

.footer-bottom span {
  color: #fff;
}

.footer-bottom span {
  color: #fff;
}

.footer-bottom span:hover a {
  color: var(--theme-color);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom .right-area {
  display: inline-flex;
  gap: 30px;
}


ul.footer-contact-info-widget h6 {
  color: #fff;
  font-size: 16px;
}
ul.footer-contact-info-widget p {
  color: #8f8d9d;
}

ul.footer-contact-info-widget li {
  display: flex;
  align-items: self-start;
  gap: 20px;
  color: #fff;
  margin-bottom: 20px;
}

ul.footer-contact-info-widget .icon {
  font-size: 24px;
  color: #fff;
}

ul.footer-contact-info-widget .info-details a{
  color: #8f8d9d;
}

.footer-main .footer-shape-3 {
  position: absolute;
  top: -25px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}



@media only screen and (max-width: 991px){ 
  .footer-widget-2,
  .footer-widget-4{
    padding: 0;
  }
     
}

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

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
}
     
}

/*----------------------------------------*/
/*  BANNER CSS START
/*----------------------------------------*/

.banner-main {
padding: 210px 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.banner-main:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(16, 32, 57, 0.90) 0%, rgba(11, 21, 38, 0.60) 56.25%, rgba(0, 0, 0, 0.00) 97.81%);
}

.banner-area {
  max-width: 720px;
  padding-left: 70px;
}

.banner-sub-title {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 9px;
  text-transform: uppercase;
  margin-left: 56px;
}

.banner-sub-title:before {
  content: "\e92c";
  font-family: 'icomoon';
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  position: absolute;
  top: 0px;
  left: -56px;
  height: 20px;
  width: 40px;
  padding: 2px 1px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 50px;
}

.banner-sub-title.no-border:before {
  border: none;
}

h1.banner-title {
  color: #FFF;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 77px;
  padding: 20px 0;
}

p.banner-text {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  padding-bottom: 40px;
  padding-right: 29px;
}

.banner-btn-area {
  display: flex;
  justify-content: start;
  gap: 30px;
}

.banner-btn-area .icon-1 {
  position: relative;
  height: 56px;
  width: 56px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-btn-area .play-btn {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #fff;
  gap: 22px;
}

.banner-btn-area .icon-1:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  transform: scale(0);
  transition: all 500ms ease;
}

.banner-btn-area .icon-1:hover:before {
  transform: scale(1,1);
}

.banner-btn-area .icon-1 i {
  position: relative;
  z-index: 1;
}

.banner-shape-area .shape-1 {
  position: absolute;
  top: 87px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 2;
  animation: slide-right-sm 5000ms ease 1;
}

.banner-shape-area .shape-2 {
  position: absolute;
  z-index: 1;
  top: 90px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: slide-right-sm 5000ms ease 1;
}

.banner-shape-area .shape-3 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.banner-shape-area .shape-4 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 97px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.banner-shape-area .shape-5 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5000ms ease 1;
}

.banner-dot {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.banner-dot-inner {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  z-index: 1;
}

.banner-dot-inner span.swiper-pagination-bullet {
  background: #fff;
  position: relative;
  width: 10px;
  height: 10px;
}

.banner-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color);
  position: relative;  
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  content: "";
  position: absolute;    
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.banner-three-section .banner-btn-area-2,
.banner-three-section .banner-text,
.banner-three-section .banner-sub-title,
.banner-three-section .banner-title{
  opacity: 1;
  transform: inherit;
}

.banner-btn-area-2,
.banner-btn-area,
.banner-sub-title{
  position: relative;
  opacity: 0;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.swiper-slide-active .banner-btn-area-2,
.swiper-slide-active .banner-btn-area,
.swiper-slide-active .banner-sub-title{
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  transition-delay: 1000ms;
}


.banner-title,
.banner-text {
  opacity: 0;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.swiper-slide-active .banner-title,
.swiper-slide-active .banner-text{
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  transition-delay: 1000ms;
}


@media only screen and (max-width: 1650px){ 
 
  .banner-dot-inner {
    left: 20px;
  }
     
}

@media only screen and (max-width: 991px){
  
.banner-dot-inner {
  display: none;
}
  .banner-shape-area .shape-5{
    display: none;
  }
     
}

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

.banner-main {
  padding: 120px 0px;
}
 
.banner-area {
  padding-left: 0;
}

h1.banner-title {
  font-size: 42px;
  line-height: 62px;
  padding: 15px 0;
}

.banner-shape-area .shape-1 {
  top: 30px;
}

.banner-shape-area .shape-2 {
  top: 35px;
}

     
}

@media only screen and (max-width: 425px){ 
 
.banner-btn-area {
  display: inline-flex;
  gap: 20px;
  flex-direction: column;
}

h1.banner-title {
  font-size: 32px;
  line-height: 52px;
}
     
}

/*----------------------------------------*/
/*  ABOUT US CSS START
/*----------------------------------------*/

.about-us-content-area .icon-box {
  display: flex;
  align-items: self-start;
  gap: 35px;
}

.about-us-content-area .content h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

.about-us-content-area .content h5:hover a {
  color: var(--theme-color);
}

.about-us-content-area .content p {
  font-family: 'Roboto';
}

.about-us-content-area .icon {
  position: relative;
  font-size: 50px;
  padding: 15px;
  background: rgba(234, 24, 38, 0.06);
  color: var(--theme-color);
}

.about-us-content-area .icon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  color: #fff;
  transform: scale(0);
  transition: all 500ms ease;
}

.about-us-content-area .icon-box:hover .icon:before {
  transform: scale(1,1);
}

.about-us-content-area .icon-box:hover .icon i {
  position: relative;
  z-index: 1;
  color: #fff;
}

.about-us-image-area .image-2 {
  display: inline-block;
  border: 10px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.about-us-image-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.about-us-image-area .play-btn a {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.about-us-image-area .video_player_btn:before,
.about-us-image-area .video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}
.video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.about-us-image-area .image-2-area {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 71px;
}

.about-us-image-area .border-shape {
  position: absolute;
  top: -11px;
  right: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  z-index: -1;
}

.about-us-image-area .working-area {
  background: var(--theme-color);
  display: inline-block;
  padding: 25px 16px 10px;
  text-align: center;
  position: absolute;
  top: 86px;
  left: -50px;
}

.about-us-image-area .icon-box i {
  color: #fff;
  font-size: 50px;
}

.about-us-image-area .icon-box h4 {
  color: #fff;
  margin-top: 14px;
  margin-bottom: 1px;
}

.about-us-image-area .icon-box p {
  font-family: var(--secondary-font);
  color: #fff;
  position: relative;
}

.about-us-image-area .inner:before {
  content: "";
  position: absolute;
  bottom: -54px;
  left: -16px;
  width: 50px;
  height: 30px;
  background: #c3141f;
  clip-path: polygon(50% 0%, 100% 0, 100% 100%, 48% 47%, 0 0);
}

.about-us-section .shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.about-us-section .shape-2 {
  position: absolute;
  top: 236px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
  z-index: 1;
}

.about-us-section .shape-3 {
  position: absolute;
  top: 352px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

/* shine start */
.about-us-image-area figure.image-1 {
  position: relative;
  display: block;
  overflow: hidden;
}

.about-us-image-area figure.image-1:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.about-us-section:hover figure.image-1:before {
  animation: shine 1.5s;
}
/* shine end */

@media only screen and (max-width: 1400px){ 
 
  .about-us-section .shape-2,
  .about-us-section .shape-3 {
    display: none;
  }

}

@media only screen and (max-width: 1280px){ 
 
  .about-us-image-area .working-area {
    left: 0;
    top: 0;
}

}

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

.about-us-image-area figure.image-1 img {
  width: 100%;
}

.about-us-image-area .image-2-area{
  bottom: 0;
}
.about-us-section .shape-1,
.about-us-image-area .border-shape{
  display: none;
}
}

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

.about-us-content-area{
  padding-left: 0;
}

.about-us-content-area .icon-box{
  gap: 20px;
}
}


/*----------------------------------------*/
/*  SERVICE SLIDER CSS START
/*----------------------------------------*/

.service-slider-section h3.section-title {
  color: #fff;
}

.service-slider-area {
  background: #fff;
}

.service-slider-area figure {
  overflow: hidden;
}

.service-slider-area:hover figure img {
  transform: scale(1.1);
}

.service-slider-area .content {
  position: relative;
  padding: 25px 30px 30px;
}

.service-slider-area .content h4:hover{
  color: var(--theme-color);
  transition: inherit;
}

.service-slider-area .icon-box {
  padding: 15px;
  font-size: 50px;
  border: 1px dashed var(--theme-color);
  display: inline-block;
  color: var(--theme-color);
  position: absolute;
  right: 30px;
  top: -45px;
  background: #fff;
}

.service-slider-area .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  background: var(--theme-color);
  transition: all 500ms ease;
}

.service-slider-area:hover .icon-box:before {
  width: 100%;
  left: 0;
}

.service-slider-area:hover .icon-box i {
  color: #fff;
  position: relative;
  transition: all 500ms ease;
}

.service-slider-area:hover .icon-box {
  border: 1px solid var(--theme-color);
}

.service-slider-area .service-btn {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 6px;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.service-slider-area .service-btn:hover {
  color: var(--theme-color);
}

.service_1_navigation__wrapprer button {
  color: #fff;
  height: 50px;
  width: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.service_1_navigation__wrapprer button:hover {
  border: 1px solid #fff;
}

.service-slider-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.service-slider-section .shape-2 {
  position: absolute;
  bottom: 120px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.service-slider-section .shape-3 {
  position: absolute;
  bottom: -80px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}

@media only screen and (max-width: 1400px){ 
.service_1_navigation__wrapprer {
  text-align: left !important;
  margin-top: 0;
  margin-bottom: 30px;
}
.service_1_navigation__wrapprer button{
  margin: 0 20px 0 0;
}

}

/*----------------------------------------*/
/*  CTA 1 CSS START
/*----------------------------------------*/

.cta-1-section:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50%;
  width: 100%;
  background: #fff;
}

.cta-1-section figure.image {
  clip-path: polygon(0% 0%, 100% 0, 100% 0, 89% 100%, 0% 100%);
  background: #fff;
}

.cta-1-section .icon-box {
  width: 58px;
  height: 58px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transform: rotate(-45deg);
  position: absolute;
  left: -60px;
  top: 70px;
  z-index: 1;
  transition: all 700ms ease;
}

.cta-1-section:hover .icon-box {
  transform: rotate(360deg);
}

.cta-1-section .content {
  padding: 53px 30px;
  background: #fff;
}

.cta-1-section .content:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -33px;
  width: 5px;
  height: 208px;
  background: var(--theme-color);
  transform: rotate(18deg);
}

.cta-1-section .content h5{
  position: relative;
  z-index: 1;
}

.cta-1-section .content h5:hover{
  color: var(--theme-color);
}

.cta-1-section .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.1;
}

.box-shadow-1{
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

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

  .cta-1-section .content {
    padding: 36px 30px;
  }
    
  }

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

  .cta-1-section figure.image {
    clip-path: content-box;
}
.cta-1-section .content:before{
  background: none;
}
    
}


/*----------------------------------------*/
/*  Project Slider CSS START
/*----------------------------------------*/

.project-slider-area .title-area {
  background: #fff;
  padding: 17px 24px;
  width: 413px;
  clip-path: polygon(0% 0%, 0 0, 94% 0, 100% 100%, 0% 100%);
}

.project-slider-area .title-area h5:hover{
  color: var(--theme-color);
}

.project-slider-area .title-area h6{
  text-transform: capitalize;
}

.project-slider-area .icon-area {
  background: var(--theme-color);
  color: #fff;
  padding: 30px;
  font-size: 31px;
  width: 113px;
  text-align: right;
  clip-path: polygon(0% 0%, 0 0, 100% 0, 100% 100%, 20% 100%);
}

.project-slider-area .content-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  opacity: 0;
  transition: all 800ms ease;
}

.project-slider-area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(16, 32, 57, 0.00) -19.59%, rgba(16, 32, 57, 0.80) 92.89%);
  transform: scale(0);
  transition: all 700ms ease;
}

.project-slider-area:hover:before {
  transform: scale(1,1);
}

.project-slider-area:hover .content-area {
  opacity: 1;
}

.project-slider-section .project-active-1 {
  margin-left: -250px;
  margin-right: -250px
}

.project_1_navigation__wrapprer button {
  color: var(--theme-color);
  height: 50px;
  width: 50px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.project_1_navigation__wrapprer button:hover {
  background: var(--theme-color);
  color: #fff;
}


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

  .project-slider-section .project-active-1 {
    margin-left: inherit;
    margin-right: inherit
  }
    
}

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

  .project_1_navigation__wrapprer {
    margin-top: 0;
    margin-bottom: 30px;
    text-align: left !important;
}

.project_1_navigation__wrapprer button {
    margin-left: 0;
    margin-right: 20px;
}
    
}

/*----------------------------------------*/
/*  Team CSS START
/*----------------------------------------*/

.team-area-box figure.image:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 0;
  width: 100%;
  background: linear-gradient(3deg, #222328 3.05%, rgba(34, 35, 40, 0.00) 67.67%);
  transition: all 800ms ease;
}

.team-area-box:hover figure.image:before {
  height: 100%;
  top: 0;
}

.team-area-box .content {
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: -58px;
  left: 24px;
  right: 24px;
}

.team-area-box .content .author-info h5:hover{
  color: var(--theme-color);
}

.team-area-box .content .author-info span{
  font-family: var(--secondary-font);
  color: #787878;
}

.team-area-box .social-links span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--theme-color);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 700ms ease;
}

.team-area-box .social-links:hover span {
  background: var(--theme-color-1);
}

.team-area-box .social-links ul {
  position: absolute;
  top: -150px;
  right: 0;
  opacity: 0;
  transition: all 700ms ease;
}

.team-area-box .social-links:hover ul {
  opacity: 1;
}

.team-area-box .social-links ul li {
  width: 40px;
  height: 40px;
  background: var(--theme-color);
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team-area-box .social-links ul li:hover {
  background: var(--theme-color-1);
}

.team-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.team-section .shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
}


/*----------------------------------------*/
/*  Choose CSS START
/*----------------------------------------*/

.choose-section hr {
  background: rgb(255 255 255 / 20%) !important;
  margin-bottom: 15px !important;
}

.choose-section hr:nth-last-child(1) {
  display: none;
}

.choose-section .bg-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.choose-section .shape-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
}

.choose-section figure.image {
  position: relative;
  padding-top: 60px;
}

.choose-section .section-title {
  color: #fff;
}

.choose-area-icon-box {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.choose-area-icon-box .icon-box {
  color: var(--theme-color);
  background: #fff;
  padding: 20px;
  font-size: 50px;
  display: inline-block;
}

.choose-area-icon-box h5 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 18px;
}

.choose-area-icon-box h5:hover {
  color: var(--theme-color);
}

.choose-area-icon-box p {
  color: #fff;
  margin: 0;
}

.choose-area-icon-box .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  background: var(--theme-color);
  transition: all 700ms ease;
}

.choose-area-icon-box:hover .icon-box:before {
  transform: scale(1,1);
}

.choose-area-icon-box:hover .icon-box i {
  color: #fff;
  position: relative;
  z-index: 1;
}


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

  .choose-section .bg-image{
    display: none;
  }

.choose-section figure.image {
    padding-right: 120px;
}
    
}

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

.choose-section figure.image {
    display: none;
    padding: 0;
}

    
}

/*----------------------------------------*/
/*  TESTIMONIALS CSS START
/*----------------------------------------*/

.contact-from {
  padding: 60px;
  background: var(--theme-color);
}

.contact-from .section-sub-title:before{
  color:#fff;
  border: 1px solid #fff;
}
.contact-from label {
  color: #fff;
  margin-bottom: 10px;
}

.contact-from .section-title{
  font-size: 30px;
}

.contact__from-input input {
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  font-size: 15px;
  border: none;
  border-radius: 0;
  outline: none;
}

.contact__select{
  position: relative;
}

.contact__select select {
  height: 60px;
  padding: 0 23px;
  line-height: 60px;
  width: 100%;
  border: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: "";
  text-indent: 0.01px;
  text-overflow: "";
  color: rgba(120, 120, 120, 1);
}

.contact__select:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid rgba(120, 120, 120, 1);
  right: 15px;
  cursor: pointer;
}

.testimonials_btn .primary-btn-4{
  width: 100%;
  justify-content: center;
  background: var(--theme-color-1);
}

.testimonials-area{
  padding: 30px;
}

.testimonials-box {
  padding: 25px 40px;
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.testimonials-box figure.image img {
  border-radius: 50%;
}

.testimonials-box .image {
  width: 118px;
  height: 118px;
}

.testimonials-box .autor-upper {
  display: flex;
  justify-content: start;
  gap: 10px;
  align-items: center;
}

.testimonials-box .icon-1 {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 50px;
  color: var(--theme-color);
}

.testimonials-box h5 {
  font-size: 20px;
}

.testimonials-box span {
  color: #787878;
}

.testimonials-box ul.rating-list {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  color: var(--theme-color);
}

.testimonials_1_navigation__wrapprer button {
  color: var(--theme-color);
  height: 50px;
  width: 50px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.testimonials_1_navigation__wrapprer button:hover {
  background: var(--theme-color);
  color: #fff;
}

.testimonial-1-button-prev:before {
  content: "";
  position: absolute;
  top: 23px;
  left: -190px;
  background: #787878;
  width: 168px;
  height: 1px;
}

.testimonial-1-button-next:before {
  content: "";
  position: absolute;
  top: 23px;
  left: 73px;
  background: #787878;
  width: 168px;
  height: 1px;
}

.testimonials-section .bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.testimonials-section .bg-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.testimonials-section .bg-shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.testimonials-section .bg-shape-3 {
  position: absolute;
  bottom: 92px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}


.testimonials-section .contact-from p {
  margin: 0;
}

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

  .testimonials-section .bg-shape,
  .testimonials-section .bg-shape-1{
    display: none;
  }
      
  }

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

  .testimonial-1-button-prev:before,
  .testimonial-1-button-next:before,
  .testimonials-box .icon-1,
  .testimonials-section .bg-shape-3{
    display: none;
  }

  .testimonials-box{
    padding: 20px;
  }
  .contact-from{
    padding: 35px;
  }
      
  }


/*----------------------------------------*/
/*  BLOG STYLE ONE CSS START
/*----------------------------------------*/

.blog-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-style-one .blog-content {
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.blog-style-one .post-meta span {
  font-size: 14px;
}

.blog-style-one .post-meta span:hover {
 color: var(--theme-color);
}

.blog-style-one .post-meta span i {
  color: var(--theme-color);
  margin-right: 8px;
}

.blog-style-one .post-meta {
  display: inline-flex;
  gap: 26px;
}

.blog-style-one hr {
  margin: 15px 0 !important;
}

.blog-style-one .blog-content .blog-title:hover{
 color: var(--theme-color);
}

/* shine start */
.blog-style-one .blog-image {
  position: relative;
  display: block;
  overflow: hidden;
}

.blog-style-one .blog-image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.blog-style-one:hover .blog-image:before {
  animation: shine 1.5s;
}
/* shine end */


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

.blog-title-box {
  align-items: self-start;
  flex-direction: column;
  gap: 20px;
}
    
}

/*----------------------------------------*/
/*  BRAND CSS START
/*----------------------------------------*/

.brand-section img{
  filter: grayscale(1);
  opacity: 0.75;
}

.brand-section img:hover{
  filter: grayscale(0);
  opacity: 1;
}

/*----------------------------------------*/
/*  BANNER TWO CSS START
/*----------------------------------------*/

.banner-main-2 {
  padding-top: 312px;
  padding-bottom: 225px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.banner-main-2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 32, 57, 0.7);
}

.banner-area-2 {
  max-width: 775px;
  padding-left: 70px;
}

.banner-btn-area-2{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.banner-btn-area-2 h6{
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
}

.banner-main-2 .socials-area {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.banner-main-2 .socials-area li {
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  color: #fff;
  transition: all 500ms ease;
}

.banner-main-2 .socials-area li:hover {
  background: var(--theme-color);
  border: 1px solid  var(--theme-color);
}

.banner-main-2 .socials-area span {
  color: #fff;
  transform: rotate(-90deg);
  display: block;
  margin-top: 24px;
  position: relative;
  top: 24px;
  right: 20px;
}

.banner-section-2 .shape-1 {
  position: absolute;
  top: 117px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: slide-right-sm 5s ease 1;
}

.banner-section-2 .shape-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  z-index: 1;
  animation: slide-right-sm 5s ease 1;
}

.banner-section-2 .shape-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  animation: slide-right-sm 5s ease 1;
}

.banner-section-2 .shape-4 {
  position: absolute;
  top: 4px;
  right: 175px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5s ease 1;
}

.banner-section-2 .shape-5 {
  position: absolute;
  top: 4px;
  right: 360px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5s ease 1;
}

.banner-section-2 .shape-6 {
  position: absolute;
  top: 4px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5s ease 1;
}

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

  .banner-main-2 {
  padding-top: 200px;
  padding-bottom: 150px;
}
      
}

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

.banner-btn-area-2 {
  flex-direction: column;
}

.banner-area-2 {
  padding-left: 0;
}
.banner-main-2 .socials-area,
.banner-section-2 .shape-1,
.banner-section-2 .shape-4,
.banner-section-2 .shape-6{
  display: none;
}
      
}

/*----------------------------------------*/
/* FEATURES CSS START
/*----------------------------------------*/

.features-section .bg-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.features-section .bg-shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.features-box-area {
  padding: 30px 30px 25px 30px;
  background: #fff;
}

.features-box-area .icon-box {
  font-size: 50px;
  color: var(--theme-color);
}

.features-box-area .shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.features-box-area .shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.features-box-area .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: top right;
}

.features-box-area:hover .shape-3 {
  opacity: 1;
}

.features-box-area:hover .shape-2 {
  opacity: 0;
}

.features-box-area:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--theme-color);
  transition: all 700ms ease;
}

.features-box-area:hover h5 {
  color: #fff;
  position: relative;
}

.features-box-area:hover p {
  color: #fff;
  position: relative;
}

.features-box-area:hover .icon-box {
  color: #fff;
  position: relative;
}

.features-box-area:hover:before {
  width: 100%;
  left: 0;
}

/*----------------------------------------*/
/* ABOUT US 2 CSS START
/*----------------------------------------*/

.about-2-image-area .main-image{
  text-align: center;
  padding-left: 20px;
}

.about-2-image-area .main-image img {
  border-radius: 0 100px 0 0;
}

.about-2-image-area .small-image {
  position: absolute;
  display: inline-block;
  bottom: 40px;
  right: -10px;
  border: 12px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.about-2-image-area .icon-box {
  background: var(--theme-color);
  display: flex;
  padding: 20px 10px;
  justify-content: flex-start;
  align-items: center;
  gap: 26px;
  position: absolute;
  transform: rotate(270deg);
  top: 50%;
  left: -87px;
  max-width: 322px;
}

.about-2-image-area .icon-box .icon {
  color: var(--theme-color);
  font-size: 60px;
  padding: 25px 30px;
  background: #fff;
  display: inline-block;
  transform: rotate(90deg);
}

.about-2-image-area .icon-box h3 {
  color: #fff;
}

.about-2-image-area .icon-box p {
  color: #fff;
  font-family: 'Roboto';
  margin: 0;
}

.about-2-image-area .shape-1 {
  position: absolute;
  top: 55px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.about-2-content-area ul.list-area li {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin-left: 10px;
}

.about-2-content-area ul.list-area li:before {
  content: "\e921";
  font-family: 'icomoon';
  color: var(--theme-color);
  position: relative;
  top: 2px;
  left: -10px;
  font-size: 16px;
}

.about-2-content-area .call-us {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.about-2-content-area .icon-1 {
  position: relative;
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 24px;
  transform: rotate(-45deg);
  transition: all 700ms ease;
}

.about-2-btn-area:hover .icon-1 {
  transform: rotate(0deg);
}

.about-2-content-area .content span {
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}

.about-2-content-area .content h5 {
  font-size: 18px;
}

.about-2-content-area .content:hover h5 {
  color: var(--theme-color);
}

.about-2-content-area .icon-1:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  height: 58px;
  width: 58px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
}

.about-2-content-area .about-2-btn-area {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
}

.about-2-section .bg-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.about-2-section .bg-shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

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

  .about-2-section .bg-shape-2,
  .about-2-section .bg-shape-1{
    display: none;
  }
        
}

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

  .about-2-image-area .small-image{
    right: 0;    
  }
  .about-2-image-area .icon-box{
    left: -87px;
  }
      
}

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

  .about-2-image-area .main-image img{
    width: 100%;
    margin-bottom: 50px;
  }
  .about-2-content-area{
    padding-left: 0;
  }
        
}

  @media only screen and (max-width: 470px){ 
  .about-2-image-area .shape-1,
  .about-2-image-area .small-image{
    display: none;
  }

  .about-2-content-area .about-2-btn-area{
    display: inline;
  }
  .about-2-content-area .about-2-btn-area .primary-btn-1{
    margin-bottom: 20px;
  }

  .about-2-image-area .icon-box{
    top: 40%;
  }
          
  }


/*----------------------------------------*/
/* SERVICE TAB CSS START
/*----------------------------------------*/

.service-tab-btn-area ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
}

.service-tab-btn-area ul .nav-link {
  position: relative;
  font-family: var(--primary-font);
  color: var(--theme-color-1);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 27px;
  padding: 24px;
  background: #fff;
  width: 298px;
  border-radius: 0 !important;
  border: none !important;
}

.service-tab-btn-area ul .nav-link:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -35px;
  width: 35px;
  height: 60px;
  background: #fff;
  clip-path: polygon(100% 49%, 0 0, 0 100%);
}


.service-tab-btn-area ul .nav-link .icon-box {
  font-size: 50px;
  color: var(--theme-color);
}

.service-tab-btn-area ul .nav-link.active {
    background: var(--theme-color);
    color: #fff;
}

.service-tab-btn-area ul .nav-link.active:before {
  background: var(--theme-color);
}

.service-tab-btn-area ul .nav-link.active .icon-box {
    color: #fff;
}

.service-tab-content {
  background: #fff;
  padding: 28px;
  display: grid;
  gap: 50px;
  grid-template-columns: 330px auto;
  margin-top: 10px;
}

.service-tab-content .content h4 {
  font-weight: 700;
  line-height: 46px;
}

.service-tab-content ul.tab-list-content li {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 15px;
  margin-left: 10px;
}

.service-tab-content ul.tab-list-content li:before {
  content: "\e921";
  font-family: 'icomoon';
  color: var(--theme-color);
  position: relative;
  top: 2px;
  left: -10px;
  font-size: 16px;
}

.service-tab-content .tab-bg-shape {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.service-tab-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-tab-title-area .primary-btn-4 {
  text-transform: uppercase;
  border: 1px solid #fff;
  background: transparent;
}

.service-tab-section .bg-shape-1 {
  position: absolute;
  bottom: -120px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.service-tab-section .bg-shape-2 {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

.service-tab-section .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

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

.service-tab-title-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
            
  }

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

.service-tab-content{
  display: flex;
  flex-direction: column;
}

.service-tab-btn-area {
  margin-bottom: 50px;
}

.service-tab-content figure.image img {
width: 100%;
}
          
}

/*----------------------------------------*/
/* WORK PROCESS CSS START
/*----------------------------------------*/

.work-process-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.work-process-box .icon-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 40px;
  background: #fff;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
  color: var(--theme-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.work-process-box .icon-box span {
  position: absolute;
  top: -3px;
  left: -5px;
  width: 34px;
  height: 34px;
  background: #fff;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  font-size: 16px;
  font-family: var(--primary-font);
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-process-box {
  padding: 20px;
  position: relative;
}

.work-process-box .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border-radius: 50%;
  transform: scale(0);
  transition: all 500ms ease;
}

.work-process-box:hover .icon-box:before {
  transform: scale(1,1);
}

.work-process-box:hover .icon-box i {
  color: #fff;
  position: relative;
}

.work-process-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/*----------------------------------------*/
/* TEXT SLIDER CSS START
/*----------------------------------------*/

.text-slider-box {
  display: flex;
  position: relative;
  animation: aspro-scroller 27s linear infinite;
  will-change: transform;
  white-space: nowrap;
  gap: 10px;
}

.text-slider-box .slide-box {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.text-slider-box .slide-box h1 {
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px; /* 57.5% */
  text-transform: uppercase;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--theme-color-1);
  color: transparent;
}


@keyframes aspro-scroller {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

@keyframes aspro-scroller-reverse {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}


/*----------------------------------------*/
/* PROJECT SLIDER CSS START
/*----------------------------------------*/

.project-slider-two-section .bg-shape {
  position: absolute;
  top: 65px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.project-two-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-slider-two-box .content {
  padding: 16px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: all 700ms ease;
}

.project-slider-two-box:hover .content {
  opacity: 1;
  transform: scale(1,1);
}

.project-slider-two-box .inner-box span {
  color: var(--theme-color);
  text-transform: capitalize;
  font-weight: 500;
}

.project-slider-two-box .inner-box h5 {
  margin-top: 5px;
}

.project-slider-two-box .icon-1 {
  background: var(--theme-color);
  font-size: 30px;
  color: #fff;
  padding: 15px;
}

.project-slider-two-box figure.image:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(16, 32, 57, 0.00) -19.59%, rgba(16, 32, 57, 0.80) 92.89%);
  transition: all 500ms ease;
}

.project-slider-two-box:hover figure.image:before {
  width: 100%;
  left: 0;
}

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

.project-two-title-area {
  align-items: start;
  flex-direction: column;
  gap: 20px;
}
              
  }

/*----------------------------------------*/
/* TESTIMONIALS TWO CSS START
/*----------------------------------------*/

.testimonials-two-section .testimonials-video-area .play-btn a {
  color: #fff;
}

.testimonials-video-area {
  margin-right: -209px;
}

.testimonials-video-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.testimonials-video-area .play-btn a {
  border-radius: 50%;
  color: var(--theme-color);
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.testimonials-video-area .video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.testimonials-video-area .video_player_btn:before, .video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
  border-radius: 50%;
}

.testimonials-video-area .video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

.testimonials-video-area .video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.testimonials-two-area .section-title {
  color: #fff;
}

.testimonials-two-area {
  padding-left: 100px;
  padding-right: 60px;
  margin-left: 70px;
  margin-top: 66px;
}

.testimonials-two-box {
  background: #fff;
  padding: 40px 30px 40px 67px;
  border-left: 4px solid var(--theme-color);
  position: relative;
  margin-left: 45px;
}

.testimonials-two-box h4 {
  font-size: 20px;
}

.testimonials-two-box span {
  color: #787878;
}

.testimonials-two-box ul.ratings {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 17px;
  color: var(--theme-color);
}

.testimonials-two-box .author-image img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.testimonials-two-box .author-image {
  position: absolute;
  left: -50px;
  top: 75px;
  bottom: 75px;
}

.testimonials-two-box .icon-1 {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 50px;
  color: var(--theme-color);
}

.testimonials-two-area .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.testimonial-dot-inner span.swiper-pagination-bullet {
  background: #fff;
  position: relative;
}

.testimonial-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color);
  position: relative;  
}

.testimonial-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  content: "";
  position: absolute;    
  top: -12px;
  left: -12px;
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.testimonial-dot-inner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px;
}

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

  .testimonials-video-area {
    margin-right: 0;
}
.testimonials-two-area {
  margin-left: 0;
  margin-top: 0;
}
            
}

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

.testimonials-two-area {
  padding-left: 25px;
  padding-right: 25px;
}
            
}

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

.testimonials-two-box .icon-1{
  display: none;
}
            
}

/*----------------------------------------*/
/* Icon box counter CSS START
/*----------------------------------------*/

.icon-box-counter-area .icon-box {
  font-size: 70px;
  color: var(--theme-color);
}

.icon-box-counter-area h3 {
  font-weight: 700;
}

.icon-box-counter-area {
  display: flex;
  justify-content: start;
  gap: 20px;
  align-items: center;
}

.icon-box-counter-area .text-1 {
  color: #787878;
  font-family: var(--secondary-font);
}

/*----------------------------------------*/
/* HELP FORM CSS START
/*----------------------------------------*/

.help-form-section .image-area {
  position: absolute;
  bottom: 0;
  left: 0;
}

.help-form-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.help-form-area input[type="text"],
.help-form-area input[type="tel"]{
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  color: #fff;
  padding-left: 30px
}

.help-form-area .primary-btn-1 {
  border-radius: 50px;
  font-size: 16px;
  padding: 22px 50px;
}

.help-form-section .bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-position: top right;
  background-size: contain;
}

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

.help-form-section .image-area {
  left: -270px;
}
              
}

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

  .help-form-section .image-area {
    left: -370px;
  }
  .help-form-area .primary-btn-1{
    padding: 22px;
  }
                
}

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

  .help-form-section .image-area {
    display: none;
  }
  .help-form-area .primary-btn-1{
    width: 100%;
    justify-content: center;
  }
                
}

/*----------------------------------------*/
/* BLOG STYLE TWO CSS START
/*----------------------------------------*/

.blog-two-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-style-two {
  display: grid;
  grid-template-columns: auto 370px;
}

.blog-style-two .blog-content-area {
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 30px 25px 30px 30px;
}

.blog-style-two .blog-title{
  padding-top: 20px;
}

.blog-style-two .blog-title:hover{
  color: var(--theme-color);
}

.blog-style-two .post-meta {
  display: inline-flex;
  gap: 26px;
  color: #787878;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  padding-bottom: 20px;
}

.blog-style-two .post-meta span i {
  margin-right: 10px;
  font-size: 16px;
  color: var(--theme-color);
}

.blog-style-two .blog-text {
  padding: 25px 0;
  margin: 0;
}

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

.blog-two-title-area {
  align-items: self-start;
  flex-direction: column;
  gap: 20px;
}

.blog-style-two {
  display: flex;
  flex-direction: column;
}
                
}

/*----------------------------------------*/
/* FOOTER STYLE TWO CSS START
/*----------------------------------------*/

.footer-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.footer-bottom .footer-socials span {
  color: #fff;
  height: 36px;
  width: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease;
}

.footer-bottom .footer-socials {
  display: inline-flex;
  gap: 10px;
}

.footer-bottom .footer-socials span > a{
  color: #fff !important;
}

.footer-bottom .footer-socials span:hover {
  background: var(--theme-color);
  color: #fff;
  border: 1px solid var(--theme-color);
}

.footer-main .footer-shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.footer-main .footer-shape-1 {
  position: absolute;
  bottom: 96px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.footer-main.three .footer-shape-1 {
  bottom: 88px;
}

.footer-main .footer-shape-3 {
  top: -43px;
}


/*----------------------------------------*/
/* BANNER STYLE THREE CSS START
/*----------------------------------------*/

.banner-3-content .banner-area-2 {
  padding: 235px 150px;
  max-width: inherit;
}

.banner-3-content .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  background-repeat: repeat-y;
  background-position: right;
  background-size: contain;
  animation: slide_up 50s linear infinite;
}

.banner-3-content .shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
}

.banner-3-content .shape-3 {
  position: absolute;
  top: 180px;
  left: -160px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.banner-3-image-area {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-3-experience {
  max-width: 288px;
  background: var(--theme-color);
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 16px;
  gap: 25px;
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.banner-3-experience .icon-box {
  font-size: 80px;
  background: #fff;
  height: 108px;
  width: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-color);
}

.banner-3-popup {
  cursor: pointer;
}

.banner-3-popup .icon-1 {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 10px;
  cursor: pointer;
}

.banner_popup_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.banner_popup_btn:before, .banner_popup_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}
.banner_popup_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.banner_popup_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.banner-3-image-area .content-1 {
  position: absolute;
  top: 74px;
  left: 39%;
}

.banner-3-image-area .content-2 {
  position: absolute;
  top: 433px;
  left: 82px;
}

.banner-3-image-area .content-3 {
  position: absolute;
  top: 306px;
  left: 85%;
}

.banner-3-popup:hover .best-quality {
  transform: scale(1,1);
  opacity: 1;
  visibility: visible;
}

.best-quality {
  background: var(--theme-color);
  color: #fff;
  padding: 5px 8px;
  border: 5px;
  font-size: 14px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  height: 50px;
  position: absolute;
  width: 92px;
  top: -55px;
  left: -60px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transform-origin: right;
  transition: all 500ms ease;
}


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

.banner-3-experience,
.banner-3-image-area .content-1,
.banner-3-image-area .content-2,
.banner-3-image-area .content-3,
.banner-3-content .shape-3{
  display: none;
}

.banner-3-content .banner-area-2 {
  padding: 150px 150px;
}
                  
}

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

.banner-3-content .banner-area-2{
  padding: 100px 20px;
}

.banner-3-content .banner-btn-area-2{
  align-items: self-start;
}
                    
}

/*----------------------------------------*/
/* ABOUT THREE CSS START
/*----------------------------------------*/

.about-three-section{
  padding-bottom: 240px;
}

.about-three-section .bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%;
  height: 100%;
}

ul.about-3-list {
  margin-left: 10px;
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 500;
}

ul.about-3-list li {
  margin-bottom: 10px;
}

ul.about-3-list li:before {
  content: "\e921";
  font-family: 'icomoon';
  position: relative;
  top: 1px;
  left: -10px;
  color: var(--theme-color);
}

.about-3-content-area .progress {
  max-width: 527px;
  height: 12px;
  border-radius: 0;
}

.about-3-content-area .progress-bar {
  background-color: var(--theme-color);
}

.about-3-progress-bar h6 {
  font-size: 14px;
  margin-bottom: 15px;
}

.about-3-content-area .progress-count {
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  top: 0;
  right: 15px;
}

.about-3-image-area .shape-1 {
  position: absolute;
  top: 0;
  right: 20px;
  background-repeat: repeat-y;
  background-position: right;
  width: 30px;
  height: 100%;
  animation: slide_up 50s linear infinite;
}


/* shine start */
.about-3-image-area figure.image {
  position: relative;
  display: block;
  overflow: hidden;
}

.about-3-image-area figure.image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.about-3-image-area:hover figure.image:before {
  animation: shine 1.5s;
}
/* shine end */

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

.about-3-content-area .progress {
  max-width: 100%;
}
                      
}

/*----------------------------------------*/
/* HELP FORM THREE CSS START
/*----------------------------------------*/

.help-3-form-section {
  margin-top: -120px;
}

.help-3-form-area {
  background: var(--theme-color);
  padding: 60px 80px;
  text-align: center;
}

.help-3-form-area h3 {
  color: #fff;
}

.help-3-form-area input[type="text"],
.help-3-form-area input[type="tel"]{
  background: transparent;
  border-radius: 50px;
  border: 1px solid #ECECEC;
  padding: 25px 30px;
  color: #fff;
}

.help-3-form-area ::placeholder {
color: #ECECEC;
opacity: 1;
font-size: 14px;
}

.help-3-form-area button.primary-btn-1 {
  width: 100%;
  background: #fff;
  color: var(--theme-color-1);
  justify-content: center;
  border-radius: 50px;
  font-size: 16px;
  padding: 23px 30px;
}

.help-3-form-area button.primary-btn-1:hover {
  color: #fff;
}

.help-3-form-area .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: left bottom;
  width: 100%;
  height: 100%;
}

.help-3-form-area .shape-2 {
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

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

  .help-3-form-area input[type="text"],
  .help-3-form-area input[type="tel"]{    
    margin-bottom: 20px;
  }

.help-3-form-area {
  padding: 60px 40px;
}

.help-3-form-area h3 {
  font-size: 24px;
}
                        
}


/*----------------------------------------*/
/* SERVICE THREE CSS START
/*----------------------------------------*/

.service-section-three {
  padding-top: 240px;
  margin-top: -120px;
}

.service-section-three .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.service-section-three .shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.service-section-three .shape-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.service-3-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-section-three .service-active-2 {
  margin-right: -366px;
}

.service-section-three .section-title {
  color: #fff;
}

.service-3-box-area .inner {
  background: #fff;
}

.service-3-box-area .content-box {
  padding: 70px 20px 0 20px;
}

.service-3-box-area .icon-box {
  width: 80px;
  height: 80px;
  font-size: 50px;
  color: var(--theme-color);
  border: 1px dashed var(--theme-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: -110px;
  background: #fff;
  position: relative;
  z-index: 1;
}

.service-3-box-area .content-box h4 {
  margin-top: 30px;
  margin-bottom: 15px;
}

.service-3-box-area .btn-area {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  font-family: var(--primary-font);
  background:#F8F8F8;
  padding: 12px 0;
  position: relative;
}

.service-3-box-area .btn-area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--theme-color);
  transition: all 700ms ease;
}

.service-3-box-area:hover .btn-area:before {
  width: 100%;
  right: 0;
}

.service-3-box-area:hover .btn-area a {
  position: relative;
  color: #fff;
}

.service-3-box-area .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--theme-color);
  transition: all 500ms ease;
}

.service-3-box-area:hover .icon-box:before {
  left: 0;
  width: 100%;    
}

.service-3-box-area:hover .icon-box i {
 color: #fff;
  position: relative
}

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

.service-section-three .service-active-2 {
  margin-right: inherit;
}
                        
}

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

.service-3-title-box {
  align-items: start;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
                        
}


/*----------------------------------------*/
/* CHOOSE THREE CSS START
/*----------------------------------------*/

.choose-3-image-area .image-3-area {
  position: absolute;
  bottom: 30px;
  right: -25px;
  border: 10px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.choose-3-image-area .image-3-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.choose-3-image-area .play-btn a {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.video_player_btn:before,
.video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}
.video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.choose-3-image-area .shape-1 {
  position: absolute;
  top: 40px;
  right: 30px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.choose-3-image-area h1 {
  font-size: 100px;
  text-transform: capitalize;
  opacity: 0.08;
  position: absolute;
  top: 36%;
  left: -280px;
  transform: rotate(270deg);
}

.choose-3-content-area .icon-box-area {
  background: #fff;
  border-bottom: 2px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  transition: all 500ms ease;
}

.choose-3-content-area .icon-box-area.active {
  border-bottom: 2px solid var(--theme-color);
}

.choose-3-content-area .icon-box {
  font-size: 40px;
  color: var(--theme-color);
}

.choose-3-content-area .icon-box-area h5 {
  font-size: 16px;
}

.choose-3-section .shape-1 {
  position: absolute;
  top: 71px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}


/* shine start */
.choose-3-section figure.image {
  position: relative;
  display: block;
  overflow: hidden;
}

.choose-3-section figure.image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.choose-3-section:hover figure.image:before {
  animation: shine 1.5s;
}
/* shine end */


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

  .choose-3-content-area{
    padding-left: 0;
    padding-top: 50px;
  }
                        
}

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

  .choose-3-image-area .image-3-area{
    display: none;
  }
                        
}


/*----------------------------------------*/
/* FAQ CSS START
/*----------------------------------------*/

.faq-container .section-title {
  color: #fff;
}

.faq-section .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.faq-section .shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center left;
}

.faq-section .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

/* faq start */

.accordion-button {
  padding: 20px 30px;
  text-align: left;
  background: #fff;
  gap: 15px;
  color: var(--theme-color-1);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
 }

  .accordion-button::after {
  content: "\f101";
  background-image: none;
  font-family: "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: 400;
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  line-height: 30px;
  border-radius: 50%;
  margin-inline-start: 0;
  text-align: center;
  position: absolute;
  right: 19px;
 }

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: var(--theme-color);
}

.accordion-button:not(.collapsed)::after {
  background: #fff;
  color: var(--primary-color);
  content: "\f102";
}
  .accordion-button:focus {
    box-shadow: none;
 }
  .accordion-body {
  font-size: 16px;
  line-height: 28px;
  padding: 0 30px 20px 30px;
  color: #787878;
 }
  .accordion-collapse {
    border: none;
    transition: all 0.5s;
 }

 .accordion-item {
  border: none;
  background: #fff;
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.10);
}

.accordion-item:first-of-type .accordion-button {
  border-radius: 0px;
  
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-width: 1px;
  border-radius: 0px;
}

 .bd-faq-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

  .faq-wrapper {
    padding-right: 0;
}
                        
}


/*----------------------------------------*/
/* DARK VERSION CSS START
/*----------------------------------------*/

.is-dark .features-box-area h5,
.is-dark .features-box-area p{
  color: #fff;
}

.is-dark .about-2-content-area .section-title {
  color: #fff;
}

.is-dark .about-2-content-area p {
  color: #fff;
}

.is-dark .about-2-content-area ul.list-area li {
  color: #fff;
}

.is-dark .about-2-content-area .content span {
  color: #fff;
}

.is-dark .about-2-content-area .content h5 {
  color: #fff;
}


.is-dark .service-tab-btn-area ul button,
.is-dark .service-tab-btn-area ul button::before {
  background: #0F1D34;
  color: #fff;
}
.is-dark .service-tab-content{
  background: #0F1D34;
}

.is-dark .service-tab-content *{
 color: #fff;
}

.work-process-section.is-dark .section-title{
  color: #fff;
}

.is-dark .work-process-box h4,
.is-dark .work-process-box p{
  color: #fff;
}

.is-dark .work-process-box .icon-box span,
.is-dark .work-process-box .icon-box{
  background: #0F1D34;
}

.text-slider-section.is-dark h1{
  -webkit-text-stroke-color: #fff;
}

.project-slider-two-section.is-dark .section-title{
  color: #fff;
}

.project-slider-two-section.is-dark .project-slider-two-box .content{
  background: #0F1D34;
}

.project-slider-two-section.is-dark .project-slider-two-box .inner-box h5{
  color: #fff;
}

.testimonials-two-section.is-dark .testimonials-two-box {
  background: #0F1D34;
}

.testimonials-two-section.is-dark .testimonials-two-box h4,
.testimonials-two-section.is-dark .testimonials-two-box span,
.testimonials-two-section.is-dark .testimonials-two-box p
{
  color: #fff;
}

.is-dark .icon-box-counter-area h3,
.is-dark .icon-box-counter-area span
 {
  color: #fff;
}

.blog-two-section.is-dark .section-title{
  color: #fff;
}

.blog-two-section.is-dark .blog-style-two .blog-content-area{
  background: #102039;
}


.blog-two-section.is-dark h5.blog-title,
.blog-two-section.is-dark p.blog-text,
.blog-two-section.is-dark .blog-style-two .post-meta{
  color: #fff;
}

.blog-two-section.is-dark a.primary-btn-5.btn-hover {
    background: transparent;
    color: #fff;
}


/*----------------------------------------*/
/* PAGE TITLE CSS START
/*----------------------------------------*/

.breadcrumb__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.breadcrumb__thumb_2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}

.breadcrumb__thumb_3 {
  position: absolute;
  top: 0;
  right: 415px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

.breadcrumb__wrapper .breadcrumb__title {
  color: #fff;
  margin-bottom: 20px;
}

.breadcrumb__wrapper ul {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}


.breadcrumb__wrapper ul span:before {
  content: "\e902";
  font-family: 'icomoon';
  color: #fff;
  position: relative;
  top: 1px;
  left: -6px;
}

.breadcrumb__wrapper ul li:first-child span:before{
  display: none;
}

.breadcrumb__wrapper ul li:last-child span{
  color: var(--theme-color);
}



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

.breadcrumb__thumb_2,
.breadcrumb__thumb_3{
  display: none;
}

.breadcrumb__wrapper {
  text-align: center;
}

.breadcrumb__wrapper ul {
justify-content: center;
}

.breadcrumb__area {
  padding: 80px 0;
}

.breadcrumb__wrapper .breadcrumb__title {
  font-size: 36px;
}

}


/*----------------------------------------*/
/* MAP CSS START
/*----------------------------------------*/
.contact-map iframe {
  width: 100%;
  height: 600px;
  mix-blend-mode: luminosity;
  margin-bottom: -8px;
}

/*----------------------------------------*/
/* SERVICE PAGE CSS START
/*----------------------------------------*/

.service-page-section .service-slider-area .content {
  background: #FFF;
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.10);
}

ul.service-details-page-list li:before {
  content: "\e921";
  font-family: 'icomoon';
  color: var(--theme-color);
  font-weight: 600;
  position: relative;
  top: 0;
  left: -10px;
}

ul.service-details-page-list li {
  margin-left: 10px;
  font-weight: 500;
  margin-bottom: 10px;
}

.service-widget-1 {
  background: #F8F8F8;
  padding: 40px 30px;
}

.service-widget-1 h5 {
  font-size: 22px;
  margin-bottom: 25px;
}

.service-widget-1 li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
}

.service-widget-1 li .active{
  background: var(--theme-color);
  color: #fff;
}

.service-widget-1 li {
  margin-bottom: 16px;
}

.service-widget-1 li:last-child {
  margin-bottom: 0px;
}

.service-widget-2 .icon-box {
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: -30px;
}

.service-widget-2 .icon-box:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 56px;
  height: 56px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  z-index: 1;
}

.service-widget-2 .icon-box:after {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 11px solid var(--theme-color-1);
}

.service-widget-2 .content h5 {
  color: #fff;
  margin: 24px 0;
}

.service-widget-2 .content .phone {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.service-widget-2 .btn-box {
  padding: 30px 0;
}

.service-widget-3 .company-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--theme-color);
  padding: 20px;
  color: #fff;
}

.service-widget-3 .company-file h6 {
  color: #fff;
}

.service-widget-3 .file-size a {
  margin-left: 10px;
}


/*----------------------------------------*/
/* PROJECTS PAGE CSS START
/*----------------------------------------*/

.project-details-page-content .project-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.project-details-page-content .project-info h6 {
  background: #F8F8F8;
  padding: 30px 65px 30px 80px;
  border-bottom: 1px solid #BABBBD;
  border-right: 1px solid #BABBBD;
}

.project-details-page-content .project-info h6 span{
  color: var(--theme-color);
}

.project-details-page-content .project-info h6:last-child {
  border: none;
}

.project-details-page-content .project-info h6:nth-child(2) {
  border-bottom: 1px solid #BABBBD;
  border-right: 0;
}

.project-details-page-content .project-info h6:nth-child(3) {
  border-bottom: 0;
  border-right: 1px solid #BABBBD;
}


.project-details-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.project-details-video .play-btn a {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.project-details-video .video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.project-details-video .video_player_btn:before,
.project-details-video .video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}

.project-details-video .video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}

.project-details-video .video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

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

.service-widget-1 {
  margin-top: 30px;
}
  
}

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

  .project-details-page-content .project-info h6 {
    padding: 10px 15px;
    font-size: 14px;
}
  
}

/*----------------------------------------*/
/* TEAM DETAILS CSS START
/*----------------------------------------*/

.team-member-info-image-area figure:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(3deg, #222328 3.05%, rgba(34, 35, 40, 0.00) 67.67%);
}

ul.team-member-socials-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
}

ul.team-member-socials-icon li {
  width: 40px;
  height: 40px;
  background: var(--theme-color);
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.team-member-socials-icon li:hover{
  background: var(--theme-color-1);
}

.team-member-info .designation {
  font-weight: 400;
  font-size: 16px;
}

.team-details-progress-bar h6 {
  font-size: 16px;
  margin-bottom: 15px;
}

.team-details-progress-bar .progress-count {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
}

.team-details-progress-bar .progress {
  height: 8px;
  border-radius: 0;
}

.team-details-progress-bar .progress-bar {
  background: var(--theme-color);
}

.team-member-info-details .edu-info {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.team-member-info-details .edu-info span {
  font-size: 14px;
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  padding: 5px 15px;
  border-radius: 50px;
}

/*----------------------------------------*/
/* Pagination CSS START
/*----------------------------------------*/

.bd-basic__pagination ul {
  display: flex;
  gap: 10px;
}

.bd-basic__pagination ul li {
  width: 53px;
  height: 50px;
  background: #F8F8F8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.bd-basic__pagination ul li.current {
  background: var(--theme-color);
  color: #fff;
}

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

.pagination__wrapper {
  margin-bottom: 50px;
}
  
}

/*----------------------------------------*/
/* BLOG DETAILS CSS START
/*----------------------------------------*/

.blog-widget-1,
.blog-widget-2,
.blog-widget-3,
.blog-widget-4 {
  background: #F8F8F8;
  padding: 40px 30px;
}

.blog-widget-title:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--theme-color);
}

.blog-widget-1 button {
  position: absolute;
  top: 50%;
  right: 20px;
  font-size: 20px;
  transform: translateY(-50%);
}

.blog-widget-1 input[type="text"] {
  width: 100%;
  height: 60px;
  border: none;
  padding: 15px 20px;
  outline: none;
}

.blog-widget-2 ul.blog-categories-list li a {
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-widget-2 ul.blog-categories-list li:hover a {
  background: var(--theme-color);
  color: #fff;
}

.blog-widget-2 ul.blog-categories-list li {
  margin-bottom: 16px;
}

.blog-widget-2 ul.blog-categories-list li:last-child {
  margin-bottom: 0;
}

.blog-widget-3 .blog-post-sidebar {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 80px auto;
  gap: 15px;
}

.blog-widget-3 .blog-post-sidebar:last-child {
  margin-bottom: 0px;
}

.blog-widget-3 .content span {
  font-size: 14px;
  color: #787878;
}

.blog-widget-3 .content span i {
  color: var(--theme-color);
  margin-right: 5px;
}

.blog-widget-3 .content h6 {
  font-size: 16px;
}

.blog-widget-4 .tagcloud a {
  display: inline-block;
  font-size: 14px;
  padding: 12px;
  background: #fff;
  margin-right: 8px;
  margin-bottom: 6px;
  line-height: 1;
}

.blog-widget-4 .tagcloud a:hover {
  color: #fff;
  background: var(--theme-color);
}

.blog-widget-4 .tagcloud a:nth-last-child(1),
.blog-widget-4 .tagcloud a:nth-last-child(2),
.blog-widget-4 .tagcloud a:nth-last-child(3)
{
  margin: 0;
}


.blog-details-page ul.blog-post-meta {
  display: flex;
  justify-content: flex-start;
  gap: 26px;
  font-size: 14px;
  color: #787878;
}

.blog-details-page ul.blog-post-meta li i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--theme-color);
}

blockquote {
  border-left: 4px solid var(--theme-color);
  background: var(--Bg_Color, #F8F8F8);
  padding: 32px 70px 32px 40px;
}

blockquote p {
  font-weight: 600;
  font-style: italic;
  color: #102039;
  text-transform: capitalize;
}

blockquote i {
  font-size: 36px;
  color: var(--theme-color);
  position: absolute;
  bottom: -20px;
  right: -10px;
}

.tagcloud.tagcloud-sm span {
  font-weight: 600;
}

.tagcloud.tagcloud-sm a {
  font-size: 14px;
  padding: 12px 16px;
  background: #F8F8F8;
  margin-left: 10px;
}

.tagcloud.tagcloud-sm a:hover {
 background: var(--theme-color);
 color: #fff;
}

.postbox__share span {
  font-weight: 600;
}

.postbox__share a {
  font-size: 16px;
  color: #787878;
  margin-left: 10px;
}

.postbox__share a:hover {
  color: var(--theme-color);
}

.postbox__share-wrapper {
  padding: 25px 0;
  border-top: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
}

.postbox__comment-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.post-box-comments-box {
  display: grid;
  grid-template-columns: 100px auto;
  gap: 20px;
}

.postbox__comment-name h5 {
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 20px;
  text-transform: capitalize;
}

.postbox__comment-name span {
  color: #787878;
}

.postbox__comment-reply a {
  border-radius: 20px;
  background: rgba(234, 24, 38, 0.06);
  padding: 10px 16px;
  color: var(--theme-color);
  font-size: 14px;
  display: inline-block;
  line-height: 0;
}

ul.postbox__comment_ratings {
  display: flex;
  gap: 5px;
  position: absolute;
  top: 35px;
  right: 0;
  color: var(--theme-color);
}

.postbox__comment-form label {
  font-weight: 500;
  font-family: var(--primary-font);
  margin-bottom: 15px;
}

.postbox__comment-form input[type="text"],
.postbox__comment-form input[type="email"]{
  border-radius: 4px;
  border: 1px solid #ECECEC;
  padding: 18px 20px;
  height: 55px;
  margin-bottom: 30px;
}

.postbox__comment-form textarea{
  border-radius: 4px;
  border: 1px solid #ECECEC;
  height: 200px;
  resize: none;
  margin-bottom: 30px;
}


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

  .postbox__comment-form{
    margin-bottom: 30px;
  }
    
  }

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

.post-box-comments-box {
  display: flex;
  gap: 0;
  flex-direction: column;
}

ul.postbox__comment_ratings {
  right: 100px;
}
    
}

/*----------------------------------------*/
/* CONTACT PAGE CSS START
/*----------------------------------------*/

.contact-p-info-area .contact-box {
  padding: 50px 40px 40px 40px;
  background: #F8F8F8;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.contact-p-info-area .contact-box .icon-1 {
  font-size: 50px;
  color: var(--theme-color);
}

.contact-p-info-area .info span {
  color: var(--theme-color);
}

.contact-p-info-area .info h4 {
  margin-top: 10px;
}


.contact-page-form-area {
  padding: 60px;
  background: #F8F8F8;
}

.contact-page-form label {
  font-weight: 500;
  margin-bottom: 10px;
}

.contact-page-form input {
  height: 55px;
  margin-bottom: 15px;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}

.contact-page-form textarea {
  height: 136px;
  margin-bottom: 30px;
  resize: none;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}

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

.contact-page-form-area{
  margin-top: 30px;
  padding: 30px;
}

.error-page h2 {
  font-size: 32px;
}
  
}





/*----------------------------------------*/
/* ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/*======================================
Animate slide-left 
========================================*/
@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slide-left-sm {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes slide-right-sm {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

/*======================================
Animate card-bounce
========================================*/
@keyframes card-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-circle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.quote-animation {
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: card-bounce;
}

/*======================================
Animate wobble-vertical
========================================*/
@-webkit-keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
/*======================================
Animate wobble-vertical
========================================*/
@keyframes shape-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate-circle {
  -webkit-animation-name: rotateCircle;
  animation-name: rotateCircle;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes circle {
0% {
  opacity: 1;
}
40% {
  opacity: 1;
}
100% {
  width: 200%;
  height: 200%;
  opacity: 0;
}
}
@keyframes circle {
0% {
  opacity: 1;
}
40% {
  opacity: 1;
}
100% {
  width: 200%;
  height: 200%;
  opacity: 0;
}
}


@-webkit-keyframes shine {
100% {
  left: 125%;
}
}
@keyframes shine {
100% {
  left: 125%;
}
}

@keyframes slide{
  from { background-position: 0 0; }
    to { background-position: 1920px 0; }
}

@-webkit-keyframes slide{
  from { background-position: 0 0; }
    to { background-position: 1920px 100px; }
}

@keyframes slide_up{
  from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}

@-webkit-keyframes slide_up{
  from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}


@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  }
  @keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  }


  @-webkit-keyframes pulse-border {
    0% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  @keyframes pulse-border {
    0% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }

  @keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}


@-webkit-keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
@keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes ring-animation {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  26%, 38%, 50%, 62%, 74% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  29%, 41%, 53%, 65%, 77% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.ring-animation {
  animation: ring-animation 1.5s ease-in-out infinite;
}

@keyframes scale-animation {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.scale-animation {
  animation: scale-animation 2s alternate infinite;
}



/* new */

.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.movingX {
  animation: movingX 8s linear infinite;
}
@keyframes movingX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

.moving {
  animation: moving 8s linear infinite;
}
@keyframes moving {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

.jump {
  animation: jumpAni 7s linear infinite;
}
.jump1 {
  animation: jumpAni 6s linear infinite;
}
.jump2 {
  animation: jumpAni 5s linear infinite;
}
.jump3 {
  animation: jumpAni 4s linear infinite;
}
@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}
@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

.spin {
  animation: spin 15s linear infinite;
}
.spin-slow {
  animation: spin 50s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.scalein.slider-animated {
  --animation-name: scalein;
}

.slidetopleft.slider-animated {
  --animation-name: slidetopleft;
}

.slidebottomright.slider-animated {
  --animation-name: slidebottomright;
}

.slideinleft.slider-animated {
  --animation-name: slideinleft;
}

.slideinright.slider-animated {
  --animation-name: slideinright;
}

.slideinup.slider-animated {
  --animation-name: slideinup;
}

.slideindown.slider-animated {
  --animation-name: slideindown;
}
.rollinleft.slider-animated {
  --animation-name: rollinleft;
}
.rollinright.slider-animated {
  --animation-name: rollinright;
}


.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.slider-animated {
  opacity: 1;
}

@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(100px) translateY(100px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}


@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to { 
      transform: rotate(360deg);
  }
  0% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }  
  75% {
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
  }
  100% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}
/*img-animation**********************/
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(.645,.045,.355,1) .4s;
  opacity: 0;
}
@keyframes img-anim-right {
  0% {
      transform: translateX(5%);
      clip-path: inset(0 0 0 100%);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(.645,.045,.355,1) .4s;
  opacity: 0;
}
@keyframes img-anim-left {
  0% {
      transform: translateX(-5%);
      clip-path: inset(0 100% 0 0);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}

.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(.645,.045,.355,1);
  opacity: 0;
}
@keyframes img-anim-top {
  0% {
      transform: translateY(-5%);
      clip-path: inset(0 0 100% 0);
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}

/* Wp Css */

.offcanvas__logo .sticky-logo,
.offcanvas__logo .retina-logo
{
  display: none;
}

/* -----For New Items ---------
-----------------------------*/

.header-top-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px 15px 50px;
}

.header-style-four .header-main {
  display: grid;
  grid-template-columns: 300px auto 400px;
  align-items: center;
  justify-content: inherit;
}

.header-style-four .header-left {
  padding-left: 120px;
}

.header-style-four .header-logo {
  max-width: 380px;
  background: var(--theme-color);
  padding: 25px 75px;
  position: relative;
  margin-left: -65px;
  margin-top: -50px;
  margin-bottom: -44px;
}

.header-style-four.sticky .header-logo {
  padding: 26px 30px;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 250px;
}

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

  .header-style-four .header-left {
    padding-left: 50px;
}

.header-style-four .header-main {
  grid-template-columns: 300px auto auto;
}
    
}


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

.header-style-four .header-search,
.header-style-four .header-shopping-cart,
.header-style-four .header-btn{
  display: none;
}

.header-style-four .header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-style-four .header-logo {
  margin-top: -54px;
}
    
}

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

  .header-style-four .header-left {
    padding-left: 0;
}
    
}


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

  .header-top-2 {
    display: none;
  }

  .header-style-four .header-logo {
    margin: 0;
    padding: 20px 25px;
    max-width: 220px;
}
    
}

.service-4-main-box:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #000000;
  border-radius: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-out;
  opacity: 0.6;
}

figure.sf-image.p-relative {
  z-index: -1;
}

.sf-title {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: #fff;
}

.sf-title:before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: 3px;
  height: 30px;
  background: var(--theme-color);
}

.service-4-main-box .hover-area {
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: bottom;
  opacity: 0;
  visibility: hidden;
  padding: 50px;
  transition: all 500ms ease;
}

.service-4-main-box:hover:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.3s ease-out;
  opacity: 0.9;
}

.service-4-main-box:hover .hover-area {
  transform: translateY(-20px);
  opacity: 1;
  visibility: visible;
}

.service-4-main-box:hover .front-area .sf-title{
  opacity: 0;
  visibility: hidden;
}


.blog-style-one .post-meta .date-meta {
  position: absolute;
  top: 15px;
  left: 15px;
  padding-right: 10px;
  background: #fff;
}

.blog-style-one .post-meta .date-meta i {
  padding: 10px;
  background: var(--theme-color);
  color: #fff;
}


.service-5-main-area {
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 35px 30px;
}

.s-5-front-area{
  position: relative;
  z-index: 1;
}

.s-5-front-area h4,
.s-5-front-area p,
.s-5-front-area a{
    color: #fff;
}

.s-5-front-area .icon-box {
  width: 125px;
  height: 125px;
  background: #fff;
  color: var(--theme-color);
  font-size: 77px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 61px;
  transition: all 500ms ease;
}

.s-5-front-area p {
  margin: 30px 0 40px 0;
}

.s-5-front-area .btn-area a {
  text-transform: capitalize;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.s-5-hover-area {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: all 500ms ease;
}

.s-5-hover-area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 29, 52, 0.70);
}

.service-5-main-area:hover .s-5-hover-area{
  opacity: 1;
}

.s-5-front-area:hover .icon-box{
  background: var(--theme-color);
  color: #fff;
}

.s-5-front-area h4:hover,
.s-5-front-area a:hover{
    color: var(--theme-color);
}


.header-style-four .standard-logo,
.header-style-four .retina-logo{
  display: none;
}

.header-style-four .sticky-logo {
  display: block !important;
}

/* search bar tags */

.df-search-category {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0px;
}

.df-search-category ul#menu-search-menu {
  display: flex;
}

.df-search-category .search-menu ul li a,
.df-search-category .search-menu ul li.active > a {
  padding: 0;
  font-size: 14px;
  margin-left: 10px;
  color: #787878;
  font-weight: 400;
}

.df-search-category .search-menu ul li {margin-inline-end: 0;}

.df-search-category .search-menu ul li:hover a {
  color: var(--theme-color);
}

.choose-3-section {
  background-repeat: no-repeat;
}


/* Search Tab Filter */

.filters .post-filter {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.filters .post-filter li {
  padding: 8px 15px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
}

.filters .post-filter li.filter.active {
  background: var(--theme-color);
  color: #fff;
  border: 1px solid var(--theme-color);
}

.brand-section {
  text-align: center;
}

.error-page figure {
  max-width: 600px;
  display: inline-block;
}

.project-slider-area .title-area h6 {
  font-size: 14px;
}

.footer-subscribe {
    position: relative;
}