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

1	Theme Default Css
2	Typography Css
3	Bootstrap Customize
4	Common Classes
5	Mfp Customize
6	Body Overlay
7	Offcanvas
8	Header Css
9	Header Style Two
10	Section Title
11	Space Css
12	Backtotop
13	Animation
14	Preloader
15	Mean Menu
16	Search
17	Menu Css
18	Button Css
19	Footer Css
20	Banner Css
21	Portfolio Css
22	Service Css
23	Testimonials Css
24	Features Css
25	Video Css
26	Project Contact Css
27	Brand Css
28	Banner Two Css
29	Service Two Css
30	About Me Css
31	Portfolio Two Css
32	Counter Css
33	Testimonials Css
34	Blog Css
35	Banner Three
36	Banner Slider Css
37	Portfolio Filter Css
38	Service Section 3 Css
39	Team Section 3 Css
40	Testimonials Section 3 Css
41	Contact Cta Css
42	Page Title Css
43	Bout Page Css
44	Team Page Css
45	Price Page Css
46	Faqs Page Css
47	Error Page Css
48	Contact Page Css

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

/*----------------------------------------*/
/*  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, .vw-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: 'DM Sans', sans-serif;
  --secondary-font: 'Inter', sans-serif;
 
  --theme-color: #222;
  --primary-color: #FF7C44;
}

* {
  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);
  line-height: 26px;
  cursor: url(../img/resources/cursor.svg), auto;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background-color: #e5e5e5;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: var(--primary-color); 
}

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

h1 {
  font-size: 150px;
}

h2 {
  font-size: 80px;
}

h3 {
  font-size: 60px;
}

h4 {
  font-size: 40px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

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

p {
  font-size: 16px;
  font-weight: 500;
  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);
}

*::-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: #AFAFAF;
  opacity: 1;
  font-size: 16px;
}

*::placeholder {
  color: #AFAFAF;
  opacity: 1;
  font-size: 16px;
}

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

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

.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;
}

.medium-container {
  max-width: 1590px;
  margin: 0 auto;
  padding: 0 15px;
}

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

  .medium-container {
    max-width: 1000px;
  }
      
}

@media (min-width: 1441px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1350px;
  }
}

.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%;
  height: 100%;
  object-fit: cover;
}

.m-img img {
  max-width: 100%;
  height: 100%;
  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: #F9F8F4;
}

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

.bg-color-3{
  background: #292929;
}

/*----------------------------------------
   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(--primary-color);
  -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(--primary-color);
  background-color: var(--primary-color);
}
.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(--primary-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(--primary-color);
  background-color: var(--primary-color);
}
.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: 1px solid var(--primary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease-in-out;
}

.sidebar__toggle:hover {
  background: var(--primary-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;
}


/*----------------------------------------*/
/*  Header Style Two CSS START
/*----------------------------------------*/

.header-one {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.header-style-two,
.header-style-two.sticky,
.header-style-three,
.header-style-three.sticky
{
  background: var(--theme-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header-area.header-style-three{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.header-style-three,
.header-style-three.primary-btn-2 {
  background: transparent;
}

.header-style-two .main-menu ul li a,
.header-style-three .main-menu ul li a {
  color: #fff;
}

.header-style-two .sidebar__toggle,
.header-style-three .sidebar__toggle {
  border: 1px solid #fff;
}

.header-style-two .bar-icon span,
.header-style-two .bar-icon span:nth-child(2) small,
.header-style-three .bar-icon span,
.header-style-three .bar-icon span:nth-child(2) small {
  background: #fff;
}

.header-style-two .primary-btn-2,
.header-style-three .primary-btn-2 {
  border: 1px solid #fff;
}

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

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


.section-title {
  font-size: 52px;
}
@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;
  }
}


/*----------------------------------------*/
/*  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;
}

/*----------------------------------------*/
/* 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%);
  }
}
/*======================================
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 0; }
}


@-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%;
    }
}


@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);
  }
}


/*----------------------------------------*/
/*  PRELOADER CSS START
/*----------------------------------------*/
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #121212;
  z-index: 999;
}

.vw-loader-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.vw-loader-inner {
  position: fixed;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.vw-loader {
  margin-left: 92px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .vw-loader {
    transform: scale(0.8);
    margin-left: 66px;
  }
}

.vw-loader-item {
  position: absolute;
  width: 6px;
  height: 80px;
  margin-top: -45px;
  border-radius: 0px;
  background-color: var(--primary-color);
  animation: vw-loader-aim 0.8s infinite;
  animation-direction: alternate-reverse;
}

.vw-loader .vw-loader-item:nth-child(1) {
  margin-left: 0px;
}
.vw-loader .vw-loader-item:nth-child(2) {
  margin-left: -14px;
  animation-delay: 0.1s;
}
.vw-loader .vw-loader-item:nth-child(3) {
  margin-left: -28px;
  animation-delay: 0.2s;
}
.vw-loader .vw-loader-item:nth-child(4) {
  margin-left: -42px;
  animation-delay: 0.3s;
}
.vw-loader .vw-loader-item:nth-child(5) {
  margin-left: -56px;
  animation-delay: 0.4s;
}
.vw-loader .vw-loader-item:nth-child(6) {
  margin-left: -70px;
  animation-delay: 0.5s;
}
.vw-loader .vw-loader-item:nth-child(7) {
  margin-left: -84px;
  animation-delay: 0.6s;
}
.vw-loader .vw-loader-item:nth-child(8) {
  margin-left: -98px;
  animation-delay: 0.7s;
}

@keyframes vw-loader-aim {
  0% {
    height: 2px;
    margin-top: 0;
    transform: rotate(0deg);
  }
  100% {
    height: 80px;
    transform: rotate(0deg);
  }
}
/*----------------------------------------*/
/*  MEAN MENU CSS START
/*----------------------------------------*/
/* Mean menu customize */
.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 #CECECE;
}
.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
/*----------------------------------------*/
.vw-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%);
}
.vw-search-area.opened {
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
}
.vw-search-input {
  position: relative;
}
.vw-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;
}
.vw-search-input button:hover {
  color: var(--tp-theme-primary);
}
.vw-search-category span {
  color: var(--clr-common-black);
}
.vw-search-category a {
  font-size: 14px;
  margin-left: 5px;
}
.vw-search-category a:hover {
  color: var(--primary-color);
}
.vw-search-close {
  display: none;
}
.vw-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;
}
.vw-search-close-btn::after, .vw-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;
}
.vw-search-close-btn::before {
  transform: rotate(45deg);
}
.vw-search-close-btn::after {
  transform: rotate(-45deg);
}
.vw-search-close-btn:hover::before {
  transform: rotate(-45deg);
}
.vw-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: 80px;
}
.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: #ECECEC;
  color: var(--theme-color);
}
.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(--primary-color);
}
[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(--primary-color);
}
.main-menu ul li .mega-menu li ul li:hover > a::before {
  background-color: var(--primary-color);
}
.main-menu ul li .mega-menu li:hover > .mega-menu-title {
  color: var(--primary-color);
  padding-inline-start: 0;
}
.main-menu ul li .mega-menu li:hover > a {
  color: var(--primary-color);
}
.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(--primary-color);
}

.main-menu ul li.active > a {
  color: var(--primary-color);
}

.main-menu ul li:hover > a::after {
  color: var(--primary-color);
}
.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;
}
.bar-icon span {
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  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(--primary-color);
  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: 1;
  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: 50px;
}

@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(--primary-color);
}

.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;
}

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

.primary-btn-1{
  color: var(--theme-color);
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #CECECE;
  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-1 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--primary-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

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

.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(--primary-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

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

.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(--primary-color);
  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(--primary-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

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

.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(--primary-color);
  border: 1px solid var(--primary-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-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
}

.primary-btn-1,
.primary-btn-2,
.primary-btn-3,
.primary-btn-4{
  border-radius: 5px;
}

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

.footer-main .footer-area {
  border-radius: 10px;
}

.footer-main .footer-grid-1 {
  display: grid;
  grid-template-columns: repeat(1,1fr) 425px;
  gap: 214px;
}

.footer-main .footer-widget-1 .footer-widget-title h3 {
  font-style: normal;
  line-height: normal;
  font-weight: 400;
}

.footer-main .footer-widget-1 .footer-widget-title h3 span {
  color: var(--primary-color);
  position: relative;
}

.footer-main .footer-widget-1 .footer-widget-title h3 span:before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--primary-color);  
}

.footer-main .footer-widget-1 .subscribe-box input[type="email"] {
  height: 60px;
  border-radius: 5px;
  border: 1px solid var(--theme-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
}


.footer-main .footer-widget-1 .subscribe-box {
  position: relative;
  max-width: 415px;
}

.footer-main .footer-widget-1 .subscribe-box button {
  position: absolute;
  top: 3px;
  right: 3px;
  height: 54px;
  border-radius: 0px 5px 5px 0px;
}

.footer-main .footer-grid-2 {
  display: grid;
  grid-template-columns: 31% repeat(3, 130px);
  gap: 115px;
}

.footer-main .footer-widget-title h4 {
  font-size: 30px;
  font-style: normal;
  line-height: normal;
  margin-bottom: 20px;
}

.footer-main .social-links span {
  color: var(--theme-color);
  font-family: var(--secondary-font);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
}

.footer-main .social-links span:hover{
  color: var(--primary-color);
}

.footer-main .social-links {
  display: inline-flex;
  gap: 44px;
}

.footer-main .footer-link ul li {
  margin-bottom: 13px;
  color: var(--theme-color);
  font-family: var(--secondary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer-main .footer-link ul li:hover > a{
  color: var(--primary-color);
}

.footer-main .footer-bottom {
  display: flex;
  justify-content: space-between;
}

.footer-main ul.terms-link {
  display: flex;
  justify-content: start;
  gap: 25px;
}

.footer-main ul.terms-link li {
  color: var(--theme-color);
  font-family: var(--secondary-font);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 29px;
}

.footer-main ul.terms-link li:hover > a {
  color: var(--primary-color);
}

.footer-main .copy-right span {
  font-family: var(--secondary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
}

.footer-main .copy-right span a {
  color: var(--primary-color);
}


.footer-main .bg-image {
  position: absolute;
  bottom: 0;
  right: -200px;
}

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

.footer-style-2{
  background: var(--theme-color);
}

.footer-style-2 .footer-area{
  background: var(--theme-color);
  border-radius: 0;
}

.footer-style-2 * {
  color: #fff;
}

.footer-main.footer-style-2 .bg-image{
  right: 0;
}

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

  .footer-main .shape-1  {
    display: none;
  }

  .footer-main.footer-style-2 .bg-image {
    right: -150px;
}

}

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

  .footer-main .footer-grid-1 {
    gap: 100px;
  }

  .footer-main {
    padding-right: 30px;
    padding-left: 30px;
}

.footer-main .footer-grid-2 {
  gap: 60px;
}



}

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

  .footer-main .footer-grid-1,
  .footer-main .footer-grid-2 {
    gap: 40px;
  }

  .footer-main .bg-image {
    right: -75px;
    width: 300px;
}

}

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

  .footer-main .footer-grid-1 {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }

  .footer-main .footer-widget-1 .subscribe-box {
    margin: 0 auto;
}

.footer-main .footer-widget-1 .footer-widget-title h3{
  text-align: center;
}

.footer-main .bg-image {
  display: none;
}


}


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

  .footer-main .footer-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 50px;
  }

  .footer-main .footer-widget-1 .footer-widget-title h3{
   font-size: 40px;
  }

  .footer-grid-main {
    padding-top: 40px;
}


}

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

.footer-main .footer-grid-2 {
  grid-template-columns: repeat(1, 1fr);
}

  .footer-main .footer-bottom {
    flex-direction: column;
}

.footer-main{
  padding: 0 20px 0 20px;
}

.footer-main .bg-image {
  display: inherit;
  right: 0;
}

.footer-style-2 .bg-image{
  display: none;
}

.footer-style-2 .footer-area {
  padding: 0;
}

}

@media only screen and (max-width: 520px){ 
  
  .footer-main .bg-image {
    display: none;
  }  
  
  }

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


.banner-section h1.banner-title {
  font-weight: 400;
}

.banner-section .shape-1 {
  position: absolute;
  top: 0px;
  right: 50px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  animation: shape-rotate 30s linear 0s infinite alternate;
}

.banner-section .image-1 {
  position: absolute;
  bottom: -35px;
  right: -120px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50px;
}

.banner-section .image-2 {
  position: absolute;
  bottom: 20px;
  right: 10%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

.banner-section p.banner-text:before {
  content: "\f621";
  font-family: 'Font Awesome 6 Pro';
  margin-right: 10px;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  /* animation: card-bounce 10s both infinite; */
  /* animation: shape-rotate 30s linear 0s infinite; */
}

.banner-section .round-shape {
  position: absolute;
  bottom: -30px;
  left: -16px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.banner-section p.banner-text {
  max-width: 590px;
}

@media only screen and (max-width: 1740px){ 
  
  .banner-section .image-2 {
    right: 0;
  }
  
  
}

@media only screen and (max-width: 1399px){ 
  
  .banner-section h1.banner-title {
    font-size: 100px;
  }

  .banner-section .image-1 {
    bottom: 15px;
    right: 0;
}

.banner-section .shape-1 {
    top: -100px;
    right: -160px;
}
  
}

@media only screen and (max-width: 1199px){ 
  
  .banner-section .image-2{
    display: none;
  }

  .banner-section .image-1 {
    right: -120px;
}

.banner-section .shape-1 {
  right: 40px;
  top: 0;
}
  
}

@media only screen and (max-width: 991px){ 
  
.banner-section h1.banner-title {
  font-size: 55px;
  margin-bottom: 150px;
}

.banner-section .image-1 {
  right: 225px;
}

.banner-section .shape-1 {
  top: -135px;
}
  
}

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

  .banner-section .image-1 {
    right: 140px;
}
  
  .banner-section .shape-1 {
    top: -120px;
    right: 0;
  } 
    
}

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

  .banner-section .image-1 {
    right: 0;
}

.banner-section .shape-1 {
  right: -100px;
} 
    
}

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

.banner-section h1.banner-title {
  font-size: 44px;
  margin-bottom: 150px;
} 

.banner-section .image-1 {
  top: 0;
  left: -60px;
}

.theme-btn-box{
  padding-left: 20px;
}

.banner-section .round-shape {
  left: 0;
}

.banner-section .shape-1 {
  right: -30px;
  top: -100px;
}

.banner-section p.banner-text {
  margin-bottom: 35px;
}
    
}


/* New */

.hero-title {
  font-size: 100px;
}

.hero-title span {
  font-weight: 400;
  color: var(--primary-color);
}

.hero-content-area p{
  color: #707070;
  font-size: 18px;
  font-weight: 600;
}

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

.hero-content-area .shape-1 {
  position: absolute;
  bottom: -40px;
  right: 55px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-content-area .shape-2 {
  position: absolute;
  bottom: -45px;
  right: -150px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-btn-box a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--theme-color);
  font-weight: 600;
  transition: all 500ms ease;
}

.hero-btn-box {
  display: inline-block;
}

.hero-btn-box a .icon-1 {
  position: relative;
  width: 45px;
  height: 45px;
  background: #707070;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: all 500ms ease;
}

.hero-btn-box a:hover .icon-1 i{
  color: #fff;
  position: relative;
}

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

.hero-btn-box a:hover .icon-1:before {
  transform: scale(1);
}

.hero-image-area {
  position: absolute;
  bottom: 90px;
  margin-right: -55px;
  margin-left: -170px;
}

/* hover effects */
.hero-section .image {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  mix-blend-mode: darken;
}

.hero-section .image img {
  position: relative;
  width: 100%;
  display: block;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.hero-section .image img:first-child {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  transform: scale(0.5);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.hero-section:hover .image {
  position: relative;
  overflow: hidden;
}

.hero-section:hover .image img:first-child {
  transform: scale(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}


/* hover effects end*/

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

.hero-title {
  font-size: 66px;
}

.hero-content-area p {
  font-size: 14px;
}

.hero-content-area .shape-1 {
  bottom: 8px;
  right: 0;
}

.hero-image-area {
  margin-left: -90px;
}

.hero-content-area .shape-2 {
  bottom: -20px;
  right: -185px;
}

.hero-section {
  padding: 150px 0 50px 0;
}
      
}

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

  .hero-content-area .shape-1,
  .hero-content-area .shape-2 {
    display: none;
  } 
  
}

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

  .hero-section {
    padding: 120px 0 0 0;
}

.hero-image-area {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
}

.hero-title {
  font-size: 50px;
  margin-bottom: 15px;
}

.hero-btn-box {
  margin-top: 15px;
}
  
}

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

  .hero-content-area p br {
    display: none;
}

.hero-title {
  font-size: 40px;
}
  
}



/*----------------------------------------*/
/*  Portfolio CSS START
/*----------------------------------------*/


.portfolio-main {
  padding: 36px;
  border: 2px solid var(--theme-color);
  transition: all 500ms ease;
  border-image: conic-gradient(from var(--border-angle), #151515 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg) 1;
  animation: border-spin 5s linear infinite;
}

@keyframes border-spin {
  from {
    --border-angle: 0turn;
  }
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}


.portfolio-main:hover {
  border: 2px solid var(--primary-color);
}

.portfolio-main:hover .image img {
  transform: rotate(1deg);
}

.swiper-slide-active .portfolio-main .image img {
  transform: rotate(1deg);
}

.portfolio-main .content {
  margin-top: 20px;
}

.portfolio-main .content h5:hover a{
  color: var(--primary-color);
}

.swiper-slide-active .portfolio-main .content h5 a{
  color: var(--primary-color);
}

.portfolio-main .icon a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: var(--primary-color);
  border-radius: 50%;
  font-size: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 500ms ease;
}

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

.portfolio-main .icon:hover a:before{
  transform: scale(1,1);
}

.portfolio-main:hover .icon a{
  opacity: 1;
  top: 50%;
}

.swiper-slide-active .portfolio-main .icon a{
  opacity: 1;
  top: 50%;
}

.portfolio-main .icon a i{
  position: relative;
  color: #fff;
  z-index: 1;
  opacity: 0;
  transition: all 2s ease;
}

.portfolio-main:hover .icon a i{
  opacity: 1;
  animation: wobble-vertical 1s ease-in-out 1;
}

.swiper-slide-active .portfolio-main .icon a i{
  opacity: 1;
  animation: wobble-vertical 1s ease-in-out 1;
}

.portfolio-section .row .col-xxl-4:nth-child(1) .portfolio-main{
  margin-top: 140px;
}

.portfolio-section .row .col-xxl-4:nth-child(2) .portfolio-main{
  margin-top: 70px;
}

.portfolio-section .row .col-xxl-4:nth-child(3) .portfolio-main{
  margin-top: 0px;
}

.portfolio-section .row .col-xxl-4:nth-child(5) .portfolio-main{
  margin-top: -70px;
}

.portfolio-section .row .col-xxl-4:nth-child(6) .portfolio-main{
  margin-top: -140px;
}


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

  .portfolio-section .row .col-xxl-4:nth-child(1) .portfolio-main,
  .portfolio-section .row .col-xxl-4:nth-child(2) .portfolio-main,
  .portfolio-section .row .col-xxl-4:nth-child(3) .portfolio-main,
  .portfolio-section .row .col-xxl-4:nth-child(5) .portfolio-main,
  .portfolio-section .row .col-xxl-4:nth-child(6) .portfolio-main {
    margin-top: inherit;
  } 

  .portfolio-section {
    padding-bottom: 60px;
  }

      
  }

/*----------------------------------------*/
/*  Service CSS START
/*----------------------------------------*/

.service-section {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.service-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, rgba(78, 60, 60, 0.85) 0%, rgba(78, 60, 60, 0.85) 100%);
}

.section-sub-title {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 29px;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-title {
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 35px;
  text-transform: capitalize;
}

.service-icon-box {
  display: grid;
  grid-template-columns: 17% 76%;
  gap: 20px;
  margin-bottom: 40px;
  padding: 0 25px;
}

.service-icon-box .icon {
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  transition: all 500ms ease;
}

.service-icon-box:hover .icon {
  background: var(--primary-color);
  color: #fff;
}

.service-icon-container .content h5:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 40px;
  height: 1px;
  background: #707070;
  transition: all 500ms ease;
}

.service-icon-container .content h5 {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 25px;
  position: relative;
}

.service-icon-box .content h5:hover a{
  color: var(--primary-color);
}

.service-icon-box:hover .content h5:before {
  width: 100px;
  background: var(--primary-color);
}

.service-icon-container .content p {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
}

.service-btn-box .primary-btn-3 {
  background: transparent;
}

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

  .service-icon-box {
    grid-template-columns: 20% 100%;
    margin-bottom: 0;
}
      
}

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

  .service-icon-box {
    padding: 0 5px;
    grid-template-columns: 20% 80%;
}
      
}

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

  .section-title {
    font-size: 54px;
  }

  .title-box{
    margin-bottom: 40px;
  }

      
  }

/*----------------------------------------*/
/*  Testimonials CSS START
/*----------------------------------------*/

.testimonials-box {
  max-width: 915px;
}

.testimonials-box .inner {
  display: grid;
  grid-template-columns: 15% 84%;
  gap: 37px;
}

.testimonials-box .content p {
  font-family: var(--primary-font);
  font-size: 28px;
  font-style: normal;
  line-height: 38px;
}

.testimonials-box .content h5 {
  font-family: var(--secondary-font);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px; 
}

.testimonials-box .content h5 span{
  font-family: var(--secondary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
}

.testimonials-box .image-box {
    position: relative;
}

.testimonials-box .image-box img {
  border-radius: 75% 75% 95% 95%;
  border: 1px solid var(--theme-color);
  height: 134px;
  width: 132px;
}

.testimonials-box .icon-1 {
  position: absolute;
  bottom: 15px;
  right: 0;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  color: var(--primary-color);
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonials-container.fix h1 {
  text-align: center;
  font-size: 265px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 27px;
}

.testimonials-container.fix h1 span {
  color: var(--primary-color);
}

.testimonials-container .shape-1 {
  position: absolute;
  top: 92px;
  right: 21%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  animation: wobble-vertical 1s ease-in-out infinite;
}

.testimonial.common-slider-navigation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

button.testimonial-button-prev,
button.testimonial-button-next {
  font-size: 24px;
}


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

  .testimonials-container.fix h1{
    font-size: 200px;
  }

  .testimonials-box .content p{
    font-size: 18px;
    line-height: 28px;
  }

  .testimonials-container .shape-1{
    right: 7%;
  }
      
}

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

  .testimonials-container .shape-1{
    display: none;
  }
      
}

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

  .testimonials-container.fix h1{
    font-size: 100px;
    margin-bottom: 30px;
  }

  .testimonials-box .content p {
  font-family: var(--primary-font);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}
      
}

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

  .testimonials-box .inner {
    display: flex;
    grid-template-columns: 15% 84%;
    gap: 37px;
    flex-direction: column;
  }

  .testimonials-box .icon-1 {
    right: inherit;
    left: 0;
  }

  .testimonials-container.fix h1 {
    font-size: 65px;
    margin-bottom: 20px;
    letter-spacing: 10px;
}
      
}

/*----------------------------------------*/
/*  Features CSS START
/*----------------------------------------*/

.features-box h2 {
  color: var(--primary-color);
  font-weight: 400;
}

.features-section .row .col-xxl-3:nth-child(1) .features-box{
  margin-top: 0px;
}

.features-section .row .col-xxl-3:nth-child(2) .features-box{
  margin-top: 70px;
}

.features-section .row .col-xxl-3:nth-child(3) .features-box{
  margin-top: 140px;
}

.features-section .row .col-xxl-3:nth-child(4) .features-box{
  margin-top: 210px;
}

.features-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* animation: slide 60s linear infinite;
  -webkit-animation: slide 60s linear infinite; */
}

.features-section .shape-2 {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center left;
  animation: wobble-vertical 1s ease-in-out infinite;
}

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

  .features-section .row .col-xxl-3:nth-child(1) .features-box,
  .features-section .row .col-xxl-3:nth-child(2) .features-box,
  .features-section .row .col-xxl-3:nth-child(3) .features-box,
  .features-section .row .col-xxl-3:nth-child(4) .features-box{
    margin-top: 0;
  }
  .features-section .shape-2{
    display: none;
  }
      
}

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

  .features-section .shape-1{
    display: none;
  }
  .features-section{
    padding: 0 0 60px 0;
  }
      
}

/*----------------------------------------*/
/*  Video CSS START
/*----------------------------------------*/

.video-section {
  padding: 400px 0;
}

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

.play-btn a {
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  z-index: 2;
  position: relative;
  font-size: 80px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
  text-transform: uppercase;
}

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

.valorwide_player_btn:before, .valorwide_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(--primary-color);
  opacity: 1;
  border-radius: 50%;
}
.valorwide_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.valorwide_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}


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

  .video-section {
    padding: 200px 0;
  }
      
}


/*----------------------------------------*/
/*  Project Contact CSS START
/*----------------------------------------*/

.project-contact-left h4 {
  color: #707070;
  font-family: var(--secondary-font);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 29px;
  letter-spacing: 5px;
}

.project-contact-right {
  padding: 70px 90px;
  border-radius: 20px;
  background: var(--white, #FFF);
  box-shadow: -5px 10px 40px 0px rgba(205, 205, 205, 0.25);
  max-width: 560px;
  margin: 0 0 0 auto;
}

.project-contact-right form {
  max-width: 363px;
  margin: 0 auto
}

.project-contact-right .contact-from-input {
  padding-bottom:20px;
}

.project-contact-right .contact-from-input textarea {
  height: 140px;
  resize: none;
  display: block;
}

.project-contact-right .btn-box button {
  width: 100%;
  justify-content: center;
  border-radius: 5px;
  
}

.project-contact.one figure.image {
  position: absolute;
  bottom: 0px;
  right: 37%;
}

.project-contact figure.image {
  position: absolute;
  bottom: 90px;
  right: 37%;
}

.project-contact-left {
  margin-right: 100px;
}

.project-contact-left h3:hover a{
  color: var(--primary-color);
}

.project-contact-right form {
  max-width: 363px;
  margin: 0 auto
}

.project-contact-right .contact-from-input label {
  color: #707070;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 12px;
}

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

.project-contact-left h4 {
  font-size: 18px;
  letter-spacing: 2px;
}

.project-contact-left h3 {
  font-size: 42px;
}

.project-contact-left {
  margin-right: 0px;
}

.project-contact figure.image {
  bottom: 60px;
}

}


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

  .project-contact figure.image img{
   width: 50%;
}  

.project-contact figure.image {
  position: absolute;
  bottom: 136px;
  right: 25%;
}

}

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

  .project-contact-right {
    padding: 40px;
}
.project-contact-left h3{
  font-size: 30px;
}


      
}

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

.project-contact figure.image {
  display: none;
}

.project-contact-right {
  margin: 20px auto;
}

.project-contact.one {
  padding-bottom: 0;
}

.project-contact-left.title-box {
  margin-bottom: 0;
}
      
}


/*----------------------------------------*/
/*  Brand CSS START
/*----------------------------------------*/

.brand-section h4 {
  text-align: center;
  font-family: var(--secondary-font);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 39px;
}

.brand-section h4 span{
  color: var(--primary-color);
}

.brand-section img:hover {
  filter: grayscale(1);
  transform: scale(1.1);
}

/*----------------------------------------*/
/*  Banner Two CSS START
/*----------------------------------------*/

section.banner-section-2 span.title-1 {
  font-family: var(--primary-font);
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  -webkit-text-stroke: 2px #222;
  color: #fff;
  padding-right: 50px;
}

section.banner-section-2 span.title-2 {
  font-family: var(--primary-font);
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

section.banner-section-2 h1 {
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

section.banner-section-2 h4 {
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

section.banner-section-2 h4 a {
  color: var(--primary-color);
  position: relative;
}

section.banner-section-2 h4 a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  height: 1px;
  width: 100%;
}

.banner-section-2 img.image-2 {
  position: absolute;
  bottom: 0px;
  right: 255px;
  z-index: 1;
  animation: shape-rotate 30s linear 0s infinite;
}

.banner-section-2 .shape-bg-1 {
  mask-size: 100% !important;
  -webkit-mask-size: 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  max-width: 460px;
  position: absolute;
  top: 135px;
  right: 234px;
  z-index: 1;
}

.banner-section-2 .shape-1 {
  position: absolute;
  top: 20px;
  right: 255px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

.banner-section-2 .shape-2 {
  position: absolute;
  top: 20px;
  right: 230px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  z-index: -1;
}

.banner-section-2 .shape-3 {
  position: absolute;
  top: 150px;
  right: -250px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (max-width: 1750px){  
  .banner-section-2 .shape-bg-1,
  .banner-section-2 .shape-2,
  .banner-section-2 .shape-1,
  .banner-section-2 .shape-bg {
    right: 0;
}
.banner-section-2 img.image-2 {
  right: 40px;
}

}

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

  section.banner-section-2 span.title-1,
  section.banner-section-2 h1{
    font-size: 100px;
  }
  section.banner-section-2 span.title-2{
    font-size: 40px;
  }


.banner-section-2 .shape-2 {
  right: 100px;
}


.banner-section-2 .shape-1 {
  right: 105px;
}

.banner-section-2 .shape-3{
  right: -135px;
  top: 190px;
}

.banner-section-2 .shape-bg {
  right: 130px;
}

.banner-section-2 .shape-bg-1{
  top: 95px;
  right: 90px;
}

.banner-section-2 img.image-2 {
  right: 155px;
}

}


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

  section.banner-section-2 span.title-1,
  section.banner-section-2 h1{
    font-size: 60px;
  }
  section.banner-section-2 span.title-2{
    font-size: 30px;
  }

  section.banner-section-2 span.title-1{
    padding-right: 15px;
  }

  section.banner-section-2 h4{
    font-size: 28px;
  }

.banner-section-2 .shape-bg-1 {
  top: 95px;
  right: 60px;
  width: 350px;
}

.banner-section-2 .shape-2,
.banner-section-2 .shape-1,
.banner-section-2 .shape-3,
.banner-section-2 img.image-2
{
  display: none;
}
        
}

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

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

  .banner-section-2 .content-area {
    padding-top: 60px;
}

.banner-section-2 {
    padding-bottom: 60px;
}
        
}

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

  section.banner-section-2 span.title-1, section.banner-section-2 h1 {
    font-size: 55px;
    line-height: 65px;
    padding-bottom: 15px;
}

section.banner-section-2 span.title-1{
  padding-right: 10px;
}

section.banner-section-2 span.title-2 {
  font-size: 34px;
}
section.banner-section-2 h4 {
  font-size: 24px;
}
        
}

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

  .banner-section-2 .shape-bg-1,
  .banner-section-2 .shape-bg {
    top: 40px;
}
  section.banner-section-2 {
    padding-bottom: 50px;
  }
        
}

/*----------------------------------------*/
/*  Service Two CSS START
/*----------------------------------------*/

.service-icon-box-2{
  padding: 90px 80px 100px 80px;
  border-top: 1px solid var(--theme-color);
  border-right: 1px solid var(--theme-color);
  border-bottom: 1px solid var(--theme-color);
}
.service-icon-box-2 .icon {
  width: 80px;
  height: 80px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-size: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  transition: all 500ms ease;
}

.service-icon-box-2:hover .icon {
  background: var(--primary-color);
  color: #fff;
  border: 1px solid var(--primary-color);
  transform: rotate(180deg);
}

.service-icon-box-2 h4:hover{
  color: var(--primary-color);
}

.service-icon-box-2 h4:before {
  position: absolute;
  bottom: -15px;
  left: 0px;
  width: 88px;
  height: 1px;
  content: "";
  background: #707070;
  transition: all 500ms ease;
}
.service-icon-box-2:hover h4:before{
  width: 150px;
  background: var(--primary-color);
}

.service-icon-box-2 .service-btn {
  text-decoration: underline;
  opacity: 0;
}
.service-icon-box-2:hover .service-btn {
  opacity: 1;
}

.service_2_navigation__wrapprer .icon {
  font-size: 24px;
}

.service_2_navigation__wrapprer button {
  font-size: 24px;
}

.service_2_navigation__wrapprer .common-slider-navigation {
  display: inline-flex;
  gap: 80px;
}

.service_2_navigation__wrapprer .service_active_2_dot {
  margin-top: -32px;
}

.service_2_navigation__wrapprer .service_active_2_dot span {
  margin: 0 3px;
  height: 10px;
  width: 10px;
}

.service_2_navigation__wrapprer .swiper-pagination-bullet-active {
  background: var(--primary-color);
}

@media only screen and (max-width: 1538px){  
  .service-icon-box-2 {
    padding: 40px;
}
        
}

@media only screen and (max-width: 1440px){  
  .service-icon-box-2 h4{
    font-size: 28px;
}
        
}

@media only screen and (max-width: 991px){  
  .service-icon-box-2 h4 {
    font-size: 28px;
}
        
}

@media only screen and (max-width: 768px){  
  .service-icon-box-2{
    border: 1px solid var(--theme-color);
  }
        
}

/*----------------------------------------*/
/*  About Me CSS START
/*----------------------------------------*/

.about-me-image-area .shape-1 {
  position: absolute;
  top: -245px;
  right: -140px;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(20%, -40%);
  animation: shape-rotate 30s linear 0s infinite;
}

.about-me-image-area .img-box:before {
  position: absolute;
  content: "";
  top: 40px;
  left: 35px;
  width: 100%;
  height: 100%;
  border: 1px solid #222;
  border-radius: 263px 263px 0px 0px;
}

.about-me-image-area .img-box img {
  border-radius: 263px 263px 0px 0px;
}

/* faq start */

.accordion-button {
  padding: 15px 12px;
  padding-inline-end: 50px;
  text-align: left;
  background: #fff;
  gap: 15px;
  color: #222;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-top: 1px solid var(--theme-color);
  border-bottom: 1px solid var(--theme-color);
 }
  .accordion-button::after {
    content: "\f067";
    background-image: none;
    font-family: "Font Awesome 6 Pro";
    font-size: 14px;
    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;
    border-top: 1px solid var(--theme-color);
    border-bottom: 1px solid var(--theme-color);
 }

  .accordion-button:not(.collapsed)::after {
    background: #fff;
    color: var(--primary-color);
    content: "\f068";
 }
  .accordion-button:focus {
    box-shadow: none;
 }
  .accordion-body {
    font-size: 16px;
    line-height: 28px;
    padding: 20px 0px 5px 0px;
 }
  .accordion-collapse {
    border: none;
    transition: all 0.5s;
 }
  .accordion-item {
    border: none;
 }
  .accordion-item:first-of-type .accordion-button {
    border-radius: 0px;
    
 }
  .accordion-item:last-of-type .accordion-button.collapsed {
    border-width: 1px;
    border-radius: 0px;
 }

.vw-faq-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.about-me-image-area .shape-1 {
  top: -175px;
  right: -115px;
}
        
}

@media only screen and (max-width: 1199px){  
 
  .about-me-image-area .img-box:before,
  .about-me-image-area .shape-1 {
    display: none;
}
        
}
@media only screen and (max-width: 991px){  
 
  .about-me-image-area {
  padding: 0;
  margin-bottom: 50px;
}
        
}

/*----------------------------------------*/
/*  Portfolio Two CSS START
/*----------------------------------------*/

.portfolio-section-2 .section-title {
  margin-bottom: 20px;
}
.portfolio-section-2 .portfolio-active {
  margin-right: -400px;
}

.portfolio_2_common-slider-navigation {
  display: inline-flex;
  gap: 50px;
  font-size: 30px;
}

@media only screen and (max-width: 991px){  
 
  .portfolio-section-2 .portfolio-active {
    margin-right: 0px;
  }
        
}

/*----------------------------------------*/
/*  Counter CSS START
/*----------------------------------------*/

.counter-section .inner h2, .inner span {
  color: var(--primary-color);
  font-size: 80px;
  font-style: normal;
  line-height: normal;
  display: inline-block;
}

.counter-section .inner span {
  font-size: 40px;
}

.counter-section .counter-grid {
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 991px){  
 
  .counter-section .counter-grid {
   flex-direction: column;
  }
        
}

/*----------------------------------------*/
/*  Testimonials CSS START
/*----------------------------------------*/

.testimonials-box-2 {
  padding: 41px 43px;
  background: #fff;
  border-radius: 10px;
}

.testimonials-box-2 .author-info {
  display: flex;
  gap: 20px;
  justify-content: start;
  align-items: center;
  margin-top: 32px;
}

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

.testimonials-box-2 .image-box img {
  height: 84px;
  width: 84px;
  border-radius: 50%;
}


.testimonial_2_navigation__wrapprer .icon {
  font-size: 24px;
}

.testimonial_2_navigation__wrapprer button {
  font-size: 24px;
}

.testimonial_2_navigation__wrapprer .common-slider-navigation {
  display: inline-flex;
  gap: 120px;
}

.testimonial_2_navigation__wrapprer .testimonial_dot {
  margin-top: -32px;
}

.testimonial_2_navigation__wrapprer .testimonial_dot span {
  margin: 0 3px;
  height: 10px;
  width: 10px;
}

.testimonial_2_navigation__wrapprer .swiper-pagination-bullet-active {
  background: var(--primary-color);
}


/*----------------------------------------*/
/*  Blog CSS START
/*----------------------------------------*/

.blog-area-1 {
  padding-bottom: 20px;
}

/* .blog-area-1:before {
  content: "";
  position: absolute;
  top: 29px;
  left: 0;
  background: var(--theme-color);
  height: 228px;
  width: 1px;
} */

.blog-area-1 .date-1 {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
}

.blog-area-1 .date-1:hover a {
  color: var(--primary-color);
}

.blog-area-1 .blog-title-1 {
  font-size: 30px;
  font-style: normal;
  line-height: normal;
  margin: 15px 0;
  padding-right: 50px;
}

.blog-area-1 .blog-title-1:hover {
 color: var(--primary-color);
}

.blog-area-1 a.blog-btn-1 {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
}

.blog-area-1 a.blog-btn-1:hover {
 color: var(--primary-color);
}

.blog-area-1 .image {
  overflow: hidden;
  position: relative;
  display: block;
  transition: all 900ms ease;
}

.blog-area-1:hover .image img {
  transform: scale(1.2);
  transition: all 900ms ease;
}


/*----------------------------------------*/
/*  Banner Three  CSS START
/*----------------------------------------*/

h1.banner-title-2 {
  color: #fff;
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.banner-section-3 {
  padding: 180px 0 550px;
  background: #222;
}

.banner-content p {
  color: #fff;
  padding-right: 280px;
}

.banner-content i {
  color: #fff;
}

.banner-content span {
  color: #fff;
}

.banner-content span a {
  color: var(--primary-color);
}

.banner-content span:hover a {
  color: #fff;
}

.banner-content .banner-btn-area i {
  margin: 0 30px;
  font-size: 8px;
}

.banner-content .banner-btn-area .primary-btn-4:hover {
  border: 1px solid #fff;
}

@media only screen and (max-width: 1399px){  
 
  .banner-content p {
    padding-right: 50px;
  }

  .banner-content .banner-btn-area .primary-btn-4 {
    margin: 0 15px 20px 0;
  }
        
}

@media only screen and (max-width: 768px){  
 
  .banner-content p {
    padding-right: 0px;
  }
  h1.banner-title-2 {
    font-size: 48px;
}
        
}

@media only screen and (max-width: 600px){  
 
  .banner-content .banner-btn-area i {
    display: none;
}

        
}


/*----------------------------------------*/
/*  Banner Slider CSS START
/*----------------------------------------*/

.banner-slider {
  margin-top: -480px;
}

.banner_slider_navigation__wrapprer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.banner-slider .common-slider-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1520px;
}

.banner-slider .common-slider-navigation button {
  height: 80px;
  width: 80px;
  background: #F9F8F4;
  border-radius: 50%;
  font-size: 9px;
}

.banner-slider .common-slider-navigation button:hover {
  background: var(--primary-color);
  color: #fff;
}

.banner-slider figure.image-1 {
  position: absolute;
  right: 35px;
  bottom: 0px;
  z-index: 1;
  animation: shape-rotate 30s linear 0s infinite;
}

.banner-slider .banner-active-3 {
  padding-bottom: 100px;
}

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

  .banner-section-3 {
    padding: 100px 0 100px;
}

.banner-slider {
  margin-top: -45px;
}

.banner-slider .banner-active-3 {
  padding-bottom: 0;
}

.banner-slider figure.image-1{
  display: none;
}

.banner-content span {
  font-size: 14px;
}

.banner-btn-area.mt-65 {
  margin-top: 30px;
}

}


@media only screen and (max-width: 600px){  
 
  .banner-slider figure.image-1{
    display: none;
  }
        
}


/*----------------------------------------*/
/*  Portfolio filter CSS START
/*----------------------------------------*/


.portfolio-filter-section .shape-1 {
  position: absolute;
  top: 200px;
  right: 220px;
  width: 220px;
  height: 211px;
  background-repeat: no-repeat;
  background-position: top right;
}

.portfolio-block-three figure.image-box img {
  width: 100%;
}

.portfolio-block-three .icon-box {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 500ms ease;
}

.portfolio-block-three .icon-box:hover{
  background: var(--theme-color);
  color: #fff;
}

.portfolio-block-three .content-box {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  opacity: 0;
  padding: 10px;
  background: #fff;
  transition: all 500ms ease;
}

.portfolio-block-three:hover .icon-box{
  opacity: 1;
} 

.portfolio-block-three:hover .content-box{
  opacity: 1;
  animation: wobble-vertical 1s ease-in-out 1;
} 

.portfolio-block-three:hover .content-box h5:hover{
  color: var(--primary-color);
} 

.portfolio-filter-section ul.post-filter{
  display: flex;
  gap: 90px;
}

.portfolio-filter-section li.filter {
  color: #222;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
  cursor: pointer;
}

.portfolio-filter-section li.active.filter {
  color: var(--primary-color);
  text-decoration: underline;
}

@media only screen and (max-width: 1024px){  
 
  .portfolio-filter-section .shape-1{
    display: none;
  }
        
}

@media only screen and (max-width: 676px){  
 
  .portfolio-filter-section ul.post-filter {
    gap: 10px;
    flex-direction: column;
}
        
}

/*----------------------------------------*/
/*  Service Section 3 CSS START
/*----------------------------------------*/

.service-section-3 {
  border-top: 1px solid var(--theme-color);
  border-bottom: 1px solid var(--theme-color);
}

.service-icon-box-3 {
  display: grid;
  grid-template-columns: 12% 83%;
  gap: 24px;
}

.service-icon-box-3 h4:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 88px;
  height: 1px;
  background: #707070;
  transition: all 500ms ease;
}
.service-icon-box-3 h4:hover{
  color: var(--primary-color);
}
.service-icon-box-3:hover h4:before {
  width: 120px;
  background: var(--primary-color);
}

.service-icon-box-3 img {
  transition: all 500ms ease;
}

.service-icon-box-3:hover img {
  transform: rotate3d(0, 1, .2, 3.142rad);
}

/*----------------------------------------*/
/*  Team Section 3 CSS START
/*----------------------------------------*/

.team-box-3 {
  padding: 30px 35px;
  border: 1px solid var(--theme-color);
}

.team-box-3:hover {
  border: 1px solid var(--primary-color);
}

.team-box-3 .content {
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
  background: #fff;
  padding-top: 20px;
  transition: all 500ms ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: scale(0);
}

.team-box-3:hover .content {
  opacity: 1;
  transform: scale(1,1);
}

.team-box-3 .content h5{
  font-family: var(--secondary-font);
  font-size: 16px;
}

.team-box-3 .content .designation{
  font-size: 14px;
}

.team-box-3 .social-links {
  display: inline-flex;
  gap: 20px;
  font-family: var(--secondary-font);
  font-weight: 600;
}

.team-box-3 .social-links span:hover > a {
  color: var(--primary-color);
}

.team_3_slider_navigation__wrapprer .common-slider-navigation {
  font-size: 20px;
  display: inline-flex;
  gap: 50px;
}

/*----------------------------------------*/
/*  Testimonials Section 3 CSS START
/*----------------------------------------*/

.testimonials-section-2{
  border-top: 1px solid var(--theme-color);
  border-bottom: 1px solid var(--theme-color);
}

.testimonials_3_dot span {
  height: 10px;
  width: 10px;
  margin-right: 10px;
}

.testimonials_3_dot span.swiper-pagination-bullet-active {
 background: var(--primary-color);
}

.testimonials_3_navigation__wrapprer {
  position: absolute;
  right: 225px;
  top: 50%;
  transform: rotate(90deg);
  z-index: 1;
}

@media only screen and (max-width: 1199px){  
 
  .testimonials_3_navigation__wrapprer {
    right: 20px;
    top: 40%;
  }
        
}

/*----------------------------------------*/
/*  Contact CTA CSS START
/*----------------------------------------*/

.contact-cta-section {
  margin-bottom: -120px;
}

.contact-cta-main {
  border-radius: 15px;
  background: #fff;
  box-shadow: 0px -24px 107px 0px rgba(135, 135, 135, 0.1);
}

.contact-cta-main h5,
.contact-cta-main .phone {
  font-family: var(--secondary-font);
}

.contact-cta-main .contact-1 {
  padding: 68px 90px;
}

.vertical-line {
  position: absolute;
  top: 15px;
  left: 50%;
  right: 50%;
  background: rgba(112, 112, 112, 0.30);
  width: 1px;
  height: 309px;
}

@media only screen and (max-width: 991px){  
 
  .contact-cta-main .contact-1 {
    padding: 35px;
}

.vertical-line {
  display: none;
}
        
}

@media only screen and (max-width: 768px){  
 
  .contact-cta-section {
    margin-bottom: 50px;
  }

  .contact-cta-main h4 {
    font-size: 28px;
    line-height: 38px;
}
        
}


/*----------------------------------------*/
/*  Page TITLE CSS START
/*----------------------------------------*/

.page-title-section {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.page-title-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(34, 34, 34, 0.80) 0%, rgba(34, 34, 34, 0.80) 100%);
  background-repeat: no-repeat;
  background-position: center;
}
.contact__btn br {
  display: none;
}
.page-title {
  color: #fff;
  font-size: 80px;
  font-style: normal;
  line-height: normal;
  padding: 365px 0 245px;
  position: relative;
  text-transform: capitalize;
}

@media only screen and (max-width: 1024px){   
  .page-title {
    font-size: 40px;
    padding: 200px 0 125px;
  }
        
}

/*----------------------------------------*/
/* About Page CSS START
/*----------------------------------------*/

.team-section-3 .team-active-3.two {
  margin-right: -400px;
}

@media only screen and (max-width: 1024px){   
 
  .team-section-3 .team-active-3.two {
    margin-right: 0;
  }
        
}

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

.section-border-off{
  border: none;
}

/*----------------------------------------*/
/* Price Page CSS START
/*----------------------------------------*/

.price-table {
  padding: 62px 57px 46px 57px;
  border-radius: 10px;
  border: 1px solid rgba(34, 34, 34, 0.20);
  transition: all 500ms ease;
}

.price-table:hover {
  background: #F1F7FD;
  border: 1px solid #fff;
}

.price-table h5 {
  font-size: 24px;
  font-family: var(--secondary-font);
}

ul.price-list {
  margin-left: 30px;
}

.price-list li:before {
  content: "\f178";
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  top: 0;
  left: -30px;
  color: var(--primary-color);
}

.price-btn-box a {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
}

.price-btn-box a>i {
  font-size: 12px;
}

.price-btn-box a:hover {
  color: var(--primary-color);
}

/*----------------------------------------*/
/* Faqs Page CSS START
/*----------------------------------------*/

.faq-section .inner{
  padding: 20px;
}

.faq-section .accordion-button{
  font-size: 20px;
  font-family: var(--secondary-font);
}

/*----------------------------------------*/
/* Error Page CSS START
/*----------------------------------------*/

.error-section .content * {
  color: #fff;
}

@media only screen and (max-width: 425px){   
 
  .error-section .content,
  .error-section .image {
    padding: 0;
    text-align: center;
  }
        
}


/*----------------------------------------*/
/* Contact Page CSS START
/*----------------------------------------*/

.contact-info-box {
  padding: 35px 40px;
  text-align: center;
  border-radius: 10px;
}

.contact-info-box .icon {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  margin: 0 auto;
}

.contact-info-box a {
  display: block;
}

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

.contact-map iframe {
  height: 573px;
  width: 100%;
}
.contact__from-input {
  margin-bottom: 30px;
}
.contact__from-input input {
  width: 100%;
  height: 59px;
  align-items: center;
  justify-content: center;
  padding: 0 23px;
  background-color: #fff;
  font-size: 15px;
  border: none;
  outline: none;
}
.contact__from-input textarea {
  width: 100%;
  background-color: #fff;
  border: none;
  padding: 0px 25px;
  outline: 0;
  min-height: 185px;
  color: #777a7e;
  resize: none;
}
.contact__select {
  position: relative;
}
.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 var(--primary-color);
  right: 15px;
}
.contact__select select {
  height: 60px;
  padding: 0 23px;
  line-height: 60px;
  width: 100%;
  background-color: #fff;
  border: 0 !important;
 /*Removes border*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: '';
  text-indent: 0.01px;
 /* Removes default arrow from firefox*/
  text-overflow: "";
 /*Removes default arrow from firefox*/
  color: #151515;
}
.contact__select select::-ms-expand {
  display: none;
}
.contact__info-icon span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  background: var(--primary-color);
  border-radius: 5px;
}
.contact__info-item {
  text-align: center;
}
.contact__info-text {
  padding: 60px 27px 35px 27px;
  box-shadow: 0px 4.8px 24.4px 0px rgba(19, 16, 34, 0.1);
  margin-top: -25px;
  background: #fff;
  border-radius: 5px;
}
.contact__info-text h4 {
  font-weight: 700;
  margin-bottom: 5px;
}
.contact__info-text span {
  color: #151515;
  font-weight: 500;
}
.contact__info-text span a:hover {
  color: var(--clr-theme-primary);
}
.contact__info-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 11;
  max-width: 860px;
  margin: 0 auto;
}

.contact__btn button{
  border-radius: 5px;
}

.is-white .section-sub-title,
.is-white .section-title {
  color: #fff;
}

.service-icon-container .content h5,
.service-icon-container .content p {
  color: #fff;
}




/*----------------------------------------*/
/* TEXT SLIDE CSS START
/*----------------------------------------*/

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

.text-slider-box .slide-box h1 {
  font-family: var(--primary-font);
  text-transform: uppercase;
  color: var(--primary-color);
  font-size: 120px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 4.8px;
  text-transform: uppercase;
}

.text-slider-box .slide-box:nth-child(odd) h1{
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--primary-color);
  color: transparent;
}

@media only screen and (max-width: 425px){   
 
  .text-slider-box .slide-box h1 {
    font-size: 60px;
    letter-spacing: 2px;
  }
        
}

.contact__btn br {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450;
  color: #46b450 !important;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #ffb900;
  color: red !important;
}