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



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

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

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


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

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


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


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

/* variables */

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

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

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

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

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

h1 {
  font-size: 64px;
}

h2 {
  font-size: 55px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 18px;
}

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

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

a {
  text-decoration: none;
}

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

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

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

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

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

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

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

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

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

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

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

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

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

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

figure{
  margin: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
  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: var(--theme-color-1);
}

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

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

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

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

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

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

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

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



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


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

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

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

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

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

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


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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

@keyframes bd-loader-aim {
  0% {
    height: 2px;
    margin-top: 0;
    transform: rotate(0deg);
  }
  100% {
    height: 80px;
    transform: rotate(0deg);
  }
}
/*----------------------------------------*/
/*  MEAN MENU CSS START
/*----------------------------------------*/

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

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

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

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

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

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: capitalize;
  border-top: 1px solid #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
/*----------------------------------------*/
.df-search-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  padding: 40px 15px;
  visibility: visible;
  opacity: 0;
  transform: translateY(-120%);
}
.df-search-area.opened {
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
}
.df-search-input {
  position: relative;
}
.df-search-input button {
  position: absolute;
  top: 54%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 24px;
}
.df-search-input button:hover {
  color: var(--tp-theme-primary);
}
.df-search-category span {
  color: var(--clr-common-black);
}
.df-search-category a {
  font-size: 14px;
  margin-left: 5px;
  color: #787878;
}
.df-search-category a:hover {
  color: var(--theme-color-1);
}

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

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

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

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

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

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

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

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


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

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

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

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

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

.header-logo {
  max-width: 300px;
}
@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: 195px;
  }
}
@media (max-width:450px) {
  .header-logo {
    max-width: 130px;
  }
}
.header-logo img {
  width: 100%;
}

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

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

.header-right {
  gap: 40px;
}

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

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

.header-top-contact-info span a:hover {
  color: var(--theme-color-1);
}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* button style two */

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

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

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

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

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

/* button style 3 */

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

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

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

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

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

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

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


/* button style Four */

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

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

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

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

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


/* button style five */

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

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

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

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

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

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

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

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

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

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

.footer-title{
  color: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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



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

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

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

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

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

}

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

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

.banner-sub-title {
  color: #ffffff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 9px;
  text-transform: uppercase;
  margin-left: 50px;
}

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

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

h1.banner-title {
  color: #FFF;
  font-size: 50px;
  font-style: normal;
  font-weight: 500;
  line-height: 60px;
  padding: 30px ;
}

p.banner-text {
  color: #ffffff;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  padding-bottom: 40px;
  padding-right: 29px;
  margin-left: 30px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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



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

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

     
}

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

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

/* Para resoluciones de 1368 x 768 o menores */
@media (max-width: 1368px) {
  .banner-main {
     background-size: cover; /* Ajustar la imagen para que se contenga dentro del banner */
     padding: 20px;
     background-position: center;/
     
    
     
  }

  .banner-area {
    padding: 10px; /* Reducir el espacio de padding en pantallas pequeñas para mantener los elementos visibles */
}

  .banner-title {
     font-size: 15px; /* Reducir el tamaño de la tipografía */
  
  }

  h1.banner-title {
    color: #f7f7f7;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    padding: 30px ;
  }

  .banner-text {
     font-size: 12px;
  }

  .banner-btn-area a {
     font-size: 14px; /* Ajusta el tamaño de los botones */
     padding: 10px 15px; /* Ajusta el padding de los botones */
   
  }

  /* Ajuste para el background gradient */
    .banner-main::before {
        background-size: cover; /* Asegurar que el gradiente cubra el mismo tamaño que la imagen */
        background-position: center; /* Centrar el gradiente */
    }
}

/* Ajustes para pantallas menores de 768px (móviles y tablets pequeñas) */
@media (max-width: 768px) {
  .banner-main {
      background-size: cover;
      background-position: center;
      height: 68vh; /* Ajustar el alto automáticamente para que la imagen no se desborde */
  }

  .banner-area {
      padding: 10px; /* Reducir el padding aún más */
      text-align: center; /* Centrar el texto para pantallas pequeñas */
  }

  /* Ajustar el tamaño del título */
  .banner-title {
      font-size: 24px; /* Título más pequeño */
  }

  .banner-sub-title {
      font-size: 14px; /* Subtítulo más pequeño */
  }

  .banner-text {
      font-size: 12px; /* Reducir el tamaño del texto */
  }

  /* Botones */
  .banner-btn-area .primary-btn-1 {
      font-size: 12px; /* Reducir el tamaño de los botones */
      padding: 8px 10px; /* Ajustar el padding del botón */
      margin-bottom: 10px; /* Añadir margen inferior para espacio entre botones */
      display: block; /* Los botones se colocarán en bloque, uno debajo del otro */
      width: 100%; /* Ajustar el ancho al 100% para pantallas pequeñas */
  }

  .play-btn {
      font-size: 12px; /* Reducir el tamaño del botón de video */
      margin-top: 10px; /* Añadir margen superior para dar espacio al botón */
      justify-content: center; /* Centrar el botón */
      display: block; /* Asegurar que el botón se muestre en pantalla completa */
      width: 100%; /* Botón de video ocupa el ancho total */
  }

  .play-btn .icon-1 {
      width: 30px; /* Reducir el tamaño del icono */
      height: 30px; /* Reducir el tamaño del icono */
      margin-bottom: 5px; /* Añadir margen para dar espacio entre el icono y el texto */
  }

  /* Ajustar el tamaño del background gradient */
  .banner-main::before {
      background-size: cover;
      background-position: center;
      height: auto; /* Ajuste automático para pantallas pequeñas */
  }
}

/* Ajustes para pantallas menores de 576px (celulares) */
@media (max-width: 576px) {
  .banner-main {
     
      background-size: cover;
      background-position: center;
      height: 70vh;
  }

  .banner-area {
      padding: 5px; /* Reducir el padding en móviles */
      text-align: center; /* Centrar el contenido */
  }

  /* Ajustar el tamaño del título */
  .banner-title {
      font-size: 20px; /* Título más pequeño en móviles */
  }

  .banner-sub-title {
      font-size: 12px; /* Subtítulo más pequeño en móviles */
  }

  .banner-text {
      font-size: 10px; /* Texto más pequeño en móviles */
  }

  /* Botones */
  .banner-btn-area .primary-btn-1 {
      font-size: 14px;
      padding: 5px 8px;
      margin-bottom: 8px;
      width: 100%; /* Ancho completo para que los botones se vean bien en móviles */
      display: block;
  }

  .play-btn {
      font-size: 14px;
      margin-top: 5px;
      justify-content: center;
      display: block;
      width: 100%;
  }

  .play-btn .icon-1 {
      width: 25px;
      height: 25px;
      margin-bottom: 4px;
  }

  /* Background gradient ajuste */
  .banner-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:  linear-gradient(90deg, rgba(16, 32, 57, 0.90) 0%, rgba(11, 21, 38, 0.60) 56.25%, rgba(58, 58, 58, 0) 97.81%); /* Ajustar el gradiente */
      z-index: 1;
  }
}

/* Para pantallas menores o iguales a 768px en orientación vertical */
@media (max-width: 768px) and (orientation: portrait) {
  .background-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
    height: 100vh;
    background-size: cover;
    background-position: center center;
  }
}

/* Para pantallas menores o iguales a 768px en orientación horizontal */
@media (max-width: 768px) and (orientation: landscape) {
  .background-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
    height: 100vh;
    background-size: cover;
    background-position: center center;
  }
}

/* Para pantallas menores o iguales a 576px, en orientación vertical y horizontal */
@media (max-width: 576px) {
  .background-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
    height: 100vh;
    background-size: cover;
    background-position: center center;
  }
}


/* Para pantallas menores a 576px en orientación horizontal */
@media (max-width: 576px) and (orientation: landscape) {
  .background-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
    height: 100vh;
    background-size: cover;
    background-position: center center;
  }
}
  /* Imágenes Para pantallas desktop */

@media (min-width: 769px) {
  .banner-slide-1 {
    background-image: url('../imgs/banner/files_banner/portada_internacional_1920_800.jpg');
  }
  .banner-slide-2 { 
    background-image: url('../imgs/banner/files_banner/refratermic-aislamiento-termico_portada-1920-800.jpg');
}
  .banner-slide-3 {
    background-image: url('../imgs/banner/files_banner/refratermic-refractario_portada-1920-800.jpg');
  }
  .banner-slide-4 {
    background-image: url('../imgs/banner/files_banner/refratermic-metalmecanica-Portada-1920-800.jpg');
  }
  .banner-slide-5 {
    background-image: url('../imgs/banner/files_banner/refratermic-aislamiento-termico-chaquetas_flexin-Portada-1920-800.jpg');
  }
}

/* Imágenes Para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .banner-slide-1 {
    background-image: url('../imgs/banner/files_banner/portada_internacional_1920_800_mobile.jpg');
  }
  .banner-slide-2 { 
    background-image: url('../imgs/banner/files_banner/refratermic-aislamiento-termico_portada-1920-800_mobile.jpg');
  }
  .banner-slide-3 {
    background-image: url('../imgs/banner/files_banner/refratermic-refractario_portada-1920-800_mobile.jpg');
  }
  .banner-slide-4 {
    background-image: url('../imgs/banner/files_banner/refratermic-metalmecanica-Portada-1920-800_mobile.jpg');
  }
  .banner-slide-5 {
    background-image: url('../imgs/banner/files_banner/refratermic-aislamiento-termico-chaquetas_flexin-Portada-1920-800_mobile.jpg');
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.project-slider-area .content-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

    
}

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

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

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

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

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

.contact__select{
  position: relative;
}

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

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

.testimonials_btn .primary-btn-4{
  width: 100%;
  justify-content: center;
}

.testimonials-area{
  padding: 30px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.brand-section img{
 
  opacity: 0.75;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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


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

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

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

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

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

/* faq start */

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

.breadcrumb__wrapper .breadcrumb__title {
  color: #fff;
  text-shadow: 2px 2px 5px rgb(46, 46, 46);
  text-shadow: 2px 2px 5px rgb(46, 46, 46);
}

.breadcrumb__wrapper ul {
  color: #fff;
  text-shadow: 2px 2px 5px rgb(46, 46, 46);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}


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

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

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



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

.breadcrumb__thumb_2,
.breadcrumb__thumb_3{
  display: none;
}

.breadcrumb__wrapper {
  text-align: center;
}

.breadcrumb__wrapper ul {
justify-content: center;
}

.breadcrumb__area {
  padding: 80px 0;
}

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

}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.blog-widget-title:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--theme-color);
}

.blog-widget-1 button {
  position: absolute;
  top: 50%;
  right: 20px;
  font-size: 20px;
  transform: translateY(-50%);
}

.blog-widget-1 input[type="text"] {
  width: 100%;
  height: 60px;
  border: none;
  padding: 15px 20px;
  outline: none;
}

.blog-widget-2 ul.blog-categories-list li a {
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-widget-2 ul.blog-categories-list li:hover a {
  background: var(--theme-color);
  color: #fff;
}

.blog-widget-2 ul.blog-categories-list li {
  margin-bottom: 16px;
}

.blog-widget-2 ul.blog-categories-list li:last-child {
  margin-bottom: 0;
}

.blog-widget-3 .blog-post-sidebar {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 80px auto;
  gap: 15px;
}

.blog-widget-3 .blog-post-sidebar:last-child {
  margin-bottom: 0px;
}

.blog-widget-3 .content span {
  font-size: 14px;
  color: #787878;
}

.blog-widget-3 .content span i {
  color: var(--theme-color);
  margin-right: 5px;
}

.blog-widget-3 .content h6 {
  font-size: 16px;
}

.blog-widget-4 .tagcloud a {
  display: inline-block;
  font-size: 14px;
  padding: 12px;
  background: #fff;
  margin-right: 8px;
  margin-bottom: 6px;
  line-height: 1;
}

.blog-widget-4 .tagcloud a:hover {
  color: #fff;
  background: var(--theme-color);
}

.blog-widget-4 .tagcloud a:nth-last-child(1),
.blog-widget-4 .tagcloud a:nth-last-child(2),
.blog-widget-4 .tagcloud a:nth-last-child(3)
{
  margin: 0;
}


.blog-details-page ul.blog-post-meta {
  display: flex;
  justify-content: flex-start;
  gap: 26px;
  font-size: 14px;
  color: #787878;
}

.blog-details-page ul.blog-post-meta li i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--theme-color);
}

blockquote {
  border-left: 4px solid var(--theme-color);
  background: var(--Bg_Color, #F8F8F8);
  padding: 32px 70px 32px 40px;
}

blockquote p {
  font-weight: 600;
  font-style: italic;
  color: #102039;
  text-transform: capitalize;
}

blockquote i {
  font-size: 36px;
  color: var(--theme-color);
  position: absolute;
  bottom: -20px;
  right: -10px;
}

.tagcloud.tagcloud-sm span {
  font-weight: 600;
}

.tagcloud.tagcloud-sm a {
  font-size: 14px;
  padding: 12px 16px;
  background: #F8F8F8;
  margin-left: 10px;
}

.tagcloud.tagcloud-sm a:hover {
 background: var(--theme-color);
 color: #fff;
}

.postbox__share span {
  font-weight: 600;
}

.postbox__share a {
  font-size: 16px;
  color: #787878;
  margin-left: 10px;
}

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

.postbox__share-wrapper {
  padding: 25px 0;
  border-top: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
}

.postbox__comment-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.post-box-comments-box {
  display: grid;
  grid-template-columns: 100px auto;
  gap: 20px;
}

.postbox__comment-name h5 {
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 20px;
}

.postbox__comment-name span {
  color: #787878;
}

.postbox__comment-reply a {
  border-radius: 20px;
  background: rgba(234, 24, 38, 0.06);
  padding: 10px 16px;
  color: var(--theme-color);
  font-size: 14px;
}

ul.postbox__comment_ratings {
  display: flex;
  gap: 5px;
  position: absolute;
  top: 35px;
  right: 0;
  color: var(--theme-color);
}

.postbox__comment-form label {
  font-weight: 500;
  font-family: var(--primary-font);
  margin-bottom: 15px;
}

.postbox__comment-form input[type="text"],
.postbox__comment-form input[type="email"]{
  border-radius: 4px;
  border: 1px solid #ECECEC;
  padding: 18px 20px;
  height: 55px;
  margin-bottom: 30px;
}

.postbox__comment-form textarea{
  border-radius: 4px;
  border: 1px solid #ECECEC;
  height: 200px;
  resize: none;
  margin-bottom: 30px;
}


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

  .postbox__comment-form{
    margin-bottom: 30px;
  }
    
  }

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

.post-box-comments-box {
  display: flex;
  gap: 0;
  flex-direction: column;
}

ul.postbox__comment_ratings {
  right: 100px;
}
    
}

/*----------------------------------------*/
/* CONTACT PAGE CSS START
/*----------------------------------------*/

.contact-p-info-area .contact-box {
  padding: 50px 40px 40px 40px;
  background: #F8F8F8;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.contact-p-info-area .contact-box .icon-1 {
  font-size: 38px;
  color: var(--theme-color);
}

.contact-p-info-area .info span {
  color: var(--theme-color);
}

.contact-p-info-area .info h4 {
  margin-top: 10px;
}


.contact-page-form-area {
  padding: 60px;
  background: #F8F8F8;
}

.contact-page-form label {
  font-weight: 500;
  margin-bottom: 15px;
}

.contact-page-form input {
  height: 55px;
  margin-bottom: 30px;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}

.contact-page-form textarea {
  height: 136px;
  margin-bottom: 30px;
  resize: none;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}

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

.contact-page-form-area{
  margin-top: 30px;
  padding: 30px;
}

.error-page h2 {
  font-size: 32px;
}
  
}





/*----------------------------------------*/
/* ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/*======================================
Animate slide-left 
========================================*/
@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slide-left-sm {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes slide-right-sm {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

/*======================================
Animate card-bounce
========================================*/
@keyframes card-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-circle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.quote-animation {
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: card-bounce;
}

/*======================================
Animate wobble-vertical
========================================*/
@-webkit-keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
/*======================================
Animate wobble-vertical
========================================*/
@keyframes shape-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate-circle {
  -webkit-animation-name: rotateCircle;
  animation-name: rotateCircle;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes circle {
0% {
  opacity: 1;
}
40% {
  opacity: 1;
}
100% {
  width: 200%;
  height: 200%;
  opacity: 0;
}
}
@keyframes circle {
0% {
  opacity: 1;
}
40% {
  opacity: 1;
}
100% {
  width: 200%;
  height: 200%;
  opacity: 0;
}
}


@-webkit-keyframes shine {
100% {
  left: 125%;
}
}
@keyframes shine {
100% {
  left: 125%;
}
}

@keyframes slide{
  from { background-position: 0 0; }
    to { background-position: 1920px 0; }
}

@-webkit-keyframes slide{
  from { background-position: 0 0; }
    to { background-position: 1920px 100px; }
}

@keyframes slide_up{
  from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}

@-webkit-keyframes slide_up{
  from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}


@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  }
  @keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  }


  @-webkit-keyframes pulse-border {
    0% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  @keyframes pulse-border {
    0% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }

  @keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}


@-webkit-keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
@keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes ring-animation {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  26%, 38%, 50%, 62%, 74% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  29%, 41%, 53%, 65%, 77% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.ring-animation {
  animation: ring-animation 1.5s ease-in-out infinite;
}

@keyframes scale-animation {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.scale-animation {
  animation: scale-animation 2s alternate infinite;
}



/* new */

.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.movingX {
  animation: movingX 8s linear infinite;
}
@keyframes movingX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

.moving {
  animation: moving 8s linear infinite;
}
@keyframes moving {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

.jump {
  animation: jumpAni 7s linear infinite;
}
.jump1 {
  animation: jumpAni 6s linear infinite;
}
.jump2 {
  animation: jumpAni 5s linear infinite;
}
.jump3 {
  animation: jumpAni 4s linear infinite;
}
@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}
@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

.spin {
  animation: spin 15s linear infinite;
}
.spin-slow {
  animation: spin 50s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.scalein.slider-animated {
  --animation-name: scalein;
}

.slidetopleft.slider-animated {
  --animation-name: slidetopleft;
}

.slidebottomright.slider-animated {
  --animation-name: slidebottomright;
}

.slideinleft.slider-animated {
  --animation-name: slideinleft;
}

.slideinright.slider-animated {
  --animation-name: slideinright;
}

.slideinup.slider-animated {
  --animation-name: slideinup;
}

.slideindown.slider-animated {
  --animation-name: slideindown;
}
.rollinleft.slider-animated {
  --animation-name: rollinleft;
}
.rollinright.slider-animated {
  --animation-name: rollinright;
}


.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.slider-animated {
  opacity: 1;
}

@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(100px) translateY(100px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}


@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to { 
      transform: rotate(360deg);
  }
  0% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }  
  75% {
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
  }
  100% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}
/*img-animation**********************/
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(.645,.045,.355,1) .4s;
  opacity: 0;
}
@keyframes img-anim-right {
  0% {
      transform: translateX(5%);
      clip-path: inset(0 0 0 100%);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(.645,.045,.355,1) .4s;
  opacity: 0;
}
@keyframes img-anim-left {
  0% {
      transform: translateX(-5%);
      clip-path: inset(0 100% 0 0);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}

.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(.645,.045,.355,1);
  opacity: 0;
}
@keyframes img-anim-top {
  0% {
      transform: translateY(-5%);
      clip-path: inset(0 0 100% 0);
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}

/*----------------------------------------*/
/* Modals Política de tratamiento
/*----------------------------------------*/
/* Personalización de Modal */
.modal-dialog {
  max-width: 80vw; /* Ajusta el ancho del modal según tus necesidades */
}

.modal-content {
  border-radius: 10px; /* Personaliza el borde del modal */
}

.modal-header {
  position: relative;
  background-color: #fc0101; /* Cambia el color de fondo del header */
  color: #fff; /* Cambia el color del texto del header */
}

.modal-title {
  font-size: 1.5rem; /* Ajusta el tamaño del título */
}

/* Estilo personalizado para el botón de cierre */


.btn-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 2rem; /* Ajusta el tamaño de la X */
  color: #fff; /* Cambia el color del icono */
  width: 40px; /* Ajusta el ancho del botón */
  height: 40px; /* Ajusta la altura del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Hacer el botón circular */
  opacity: 0.8; /* Opacidad del botón */
}

.btn-close:hover {
  opacity: 1; /* Opacidad completa en hover */
  background-color: #e0e0e0; /* Fondo gris claro en hover */
}

.btn-close::before {
  content: "x"; /* El carácter de la X */
  font-family: Arial, sans-serif; /* Fuente de la X */
  font-weight: bold;
}

.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.125); /* Cambia el color del borde superior */
}

.modal-body {
  padding: 20px; /* Ajusta el padding del cuerpo del modal */
}

.whatsapp-button {
  position: fixed;
  bottom: 30px;
  right:  50px;
  z-index: 1000;
 

  padding: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.whatsapp-button a {
  color: #25D366;
  font-size: 50px;
  text-align: center;
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 280px;
  background-color: #8d8c8c;
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 120%; /* Posición del tooltip por encima del ícono */
  left: 50%;
  margin-left: -190px; /* Centrar el tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

.whatsapp-button a:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Oculta el tooltip en pantallas móviles (menores a 768px) */
@media screen and (max-width: 768px) {
  .tooltip-text {
      display: none;
  }
}