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

    Theme Name: Donafund - NonProfit Charity Html Template
    Author: Theme_Pure
    Support: basictheme@gmail.com
    Description: Donafund - NonProfit Charity Html Template
    Version: 1.0

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

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

    01. THEME DEFAULT CSS
    02. HEADER CSS
    03. MEAN MENU CSS
	04. SLIDER CSS
	05. TEAM CSS
	06. SERVICE  CSS
	07. ABOUT CSS
	08. CARD CSS
	09. FEATURES CSS
	10. FACT CSS
	11. VOLUNTEERS CSS
	12. STATICK CSS
	13. GALLERY CSS
	14. TESTIMONIAL CSS
	15. BRAND CSS
	16. PORTFOLIO CSS
	17. PROJECT CSS
	18. MISSION CSS
	19. DONATION CSS
	20. BLOG CSS
	21. CONTACT CSS
	22. FAQ CSS
	23. FOOTER CSS


**********************************************/
/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap");
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: "Outfit", sans-serif;
  --tp-ff-heading: "Playfair Display", serif;
  --tp-ff-p: "Outfit", sans-serif;
  --tp-ff-fontawesome: Font Awesome 6 Pro;
  /**
  @color declaration
  */
  --tp-common-white: #ffffff;
  --tp-common-black-solid: #000;
  --tp-common-black: #121212;
  --tp-heading-primary: #666666;
  --tp-heading-1: #121212;
  --tp-grey-1: #f1f1f1;
  --tp-grey-2: #f5f6f8;
  --tp-text-body: #121212;
  --tp-text-1: #000;
  --tp-theme-primary: #eb9309;
  --tp-theme-2: #121212;
  --tp-border-1: #000;
  /**
  @font weight declaration
  */
  --tp-fw-normal: normal;
  --tp-fw-elight: 200;
  --tp-fw-light: 300;
  --tp-fw-regular: 400;
  --tp-fw-medium: 500;
  --tp-fw-sbold: 600;
  --tp-fw-bold: 700;
  --tp-fw-ebold: 800;
  --tp-fw-black: 900;
  /**
  @font size declaration
  */
  --tp-fz-body: 14px;
  --tp-fz-p: 14px;
  --tp-fz-h1: 40px;
  --tp-fz-h2: 36px;
  --tp-fz-h3: 24px;
  --tp-fz-h4: 20px;
  --tp-fz-h5: 16px;
  --tp-fz-h6: 14px;
}

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

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--tp-ff-body);
  font-size: var(--tp-fz-body);
  font-weight: normal;
  color: var(--tp-text-body);
  line-height: 26px;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tp-ff-heading);
  color: var(--tp-heading-1);
  margin-top: 0px;
  font-weight: var(--tp-fw-sbold);
  line-height: 1.2;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: var(--tp-fz-h1);
}

h2 {
  font-size: var(--tp-fz-h2);
}

h3 {
  font-size: var(--tp-fz-h3);
}

h4 {
  font-size: var(--tp-fz-h4);
}

h5 {
  font-size: var(--tp-fz-h5);
}

h6 {
  font-size: var(--tp-fz-h6);
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  font-family: var(--tp-ff-p);
  font-size: var(--tp-fz-p);
  font-weight: var(--tp-fw-normal);
  color: var(--tp-text-body);
  margin-bottom: 15px;
  line-height: 26px;
}

a,
.btn,
button,
p,
i,
input,
select,
textarea,
li,
img,
svg path,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

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

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input {
  outline: none;
}

input[type="color"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}

*::placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

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

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body-overlay {
  background-color: var(--tp-common-black);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.body-overlay:hover {
  cursor: pointer;
}

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

/*----------------------------------------
    Progress Wrap
-----------------------------------------*/
@media (max-width: 575px) {
  .progress-wrap {
    right: 15px;
    bottom: 15px;
  }
}

.basic-pagination ul li {
  display: inline-block;
}
.basic-pagination ul li:not(:last-child) {
  margin-right: 10px;
}
.basic-pagination ul li a,
.basic-pagination ul li span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 46px;
  text-align: center;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  border: 2px solid #f1f1f1;
  font-size: 18px;
  font-weight: 600;
}
.basic-pagination ul li a:hover,
.basic-pagination ul li a.current,
.basic-pagination ul li span:hover,
.basic-pagination ul li span.current {
  background: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

.nice-select::after {
  border: none;
  background-color: transparent;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: 0;
  right: 0;
  content: "\f107";
  font-family: var(--tp-ff-fontawesome);
  transform-origin: center;
  color: var(--tp-common-black);
  font-weight: 500;
  height: auto;
  width: auto;
}
.nice-select.open::after {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}

/* cart plus minus default style css */
.cart-plus,
.cart-minus {
  width: 25px;
  height: 30px;
  border: 2px solid var(--tp-border-1);
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
}
.cart-plus:hover,
.cart-minus:hover {
  cursor: pointer;
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
}

.cart-input {
  height: 30px;
  width: 32px;
  text-align: center;
  font-size: 14px;
  border: none;
  border-top: 2px solid var(--tp-border-1);
  border-bottom: 2px solid var(--tp-border-1);
  display: inline-block;
  vertical-align: middle;
  margin: 0 -3px;
  padding-bottom: 0px;
}
.cart-input:focus {
  outline: none;
}

.tp-gx-15 {
  --bs-gutter-x: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-gx-15 {
    --bs-gutter-x: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-gx-15 {
    --bs-gutter-x: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-gx-15 {
    --bs-gutter-x: 10px;
  }
}
@media (max-width: 575px) {
  .tp-gx-15 {
    --bs-gutter-x: 5px;
  }
}
.tp-gx-15 [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.tp-gx-20 {
  --bs-gutter-x: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-gx-20 {
    --bs-gutter-x: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-gx-20 {
    --bs-gutter-x: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-gx-20 {
    --bs-gutter-x: 15px;
  }
}
@media (max-width: 575px) {
  .tp-gx-20 {
    --bs-gutter-x: 10px;
  }
}
.tp-gx-20 [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.tp-gx-40 {
  --bs-gutter-x: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-gx-40 {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-gx-40 {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-gx-40 {
    --bs-gutter-x: 20px;
  }
}
@media (max-width: 575px) {
  .tp-gx-40 {
    --bs-gutter-x: 10px;
  }
}
.tp-gx-40 [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.grayscale {
  filter: grayscale(100%);
}
main {
  background-image: url(https://www.area83.in/assets/img/new-bgs/bg-6.jpg);
  background-repeat: repeat;
  background-size: contain;
  background-position: center;
}
.hf_bkh {
  background-image: url(https://www.area83.in/assets/img/new-bgs/bg-6.jpg);
  background-repeat: repeat;
  background-size: contain;
  background-position: center;
}
/*--
    - Spacing
-----------------------------------------*/
/*----------------------------------------*/
/*  ALL CSS START
/*----------------------------------------*/
/* theme btn */
.tp-btn {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--tp-common-white);
  background: var(--tp-theme-primary);
  text-align: center;
  padding: 14px 35px;
  text-transform: uppercase;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tp-btn.home-3:hover {
  background: #121212;
  color: #fff;
}
.tp-btn i {
  padding-left: 5px;
}
.tp-btn:focus {
  color: var(--tp-common-white);
}

.tp-btn-shine-effect:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg)
    translate3d(0, -150%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg)
    translate3d(0, -160%, 0);
}
.tp-btn-shine-effect:hover {
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
}
.tp-btn-shine-effect:hover:after {
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg)
    translate3d(0, 150%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg)
    translate3d(0, 150%, 0);
}

.tp-btn-black {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--tp-common-white);
  background: var(--tp-theme-2);
  text-align: center;
  padding: 15px 33px;
  text-transform: uppercase;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tp-btn-black i {
  padding-left: 5px;
}
.tp-btn-black:hover {
  color: var(--tp-common-white);
  background: var(--tp-theme-primary);
}
.tp-btn-black:focus {
  color: var(--tp-common-white);
}

/* pulse btn */
.pulse-btn {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: var(--tp-common-white);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: var(--tp-common-black);
  animation: pulse 2s infinite;
}
.pulse-btn:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-black);
}
.pulse-btn i {
  padding-left: 2px;
}

/* hambur btn */
.hamburger-btn {
  width: 30px;
  height: 30px;
  position: relative;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: 0;
}
.hamburger-btn span {
  display: inline-block;
  width: 100%;
  background: var(--tp-common-black);
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  opacity: 1;
  left: 0;
  z-index: 1;
}
.hamburger-btn span:nth-child(1) {
  top: 0;
}
.hamburger-btn span:nth-child(2) {
  top: 10px;
}
.hamburger-btn span:nth-child(3) {
  top: 20px;
}

/* link btn style 1 */
.link-btn {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: var(--tp-text-3);
  background: transparent;
  border: 1px solid var(--tp-border-2);
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 48px;
  padding-right: 25px;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  overflow: hidden;
}
.link-btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn i:last-child {
  left: 0%;
  visibility: hidden;
  opacity: 0;
}
.link-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
}
.link-btn:hover i {
  left: 100%;
  visibility: hidden;
  opacity: 0;
}
.link-btn:hover i:last-child {
  left: 50%;
  visibility: visible;
  opacity: 1;
}

/* link btn style 2 */
.link-btn-2 {
  position: relative;
  font-size: 16px;
  color: var(--tp-text-1);
  font-weight: 500;
  padding-right: 21px;
  display: inline-block;
}
.link-btn-2 i {
  font-size: 14px;
  position: absolute;
  top: 12px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn-2 i:first-child {
  right: 10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2 i:last-child {
  right: 0;
}
.link-btn-2:hover {
  color: var(--tp-theme-1);
}
.link-btn-2:hover i:first-child {
  right: 0;
  visibility: visible;
  opacity: 1;
}
.link-btn-2:hover i:last-child {
  right: -10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2.link-prev {
  padding-right: 0;
  padding-left: 21px;
}
.link-btn-2.link-prev i:first-child {
  left: 10%;
  right: auto;
}
.link-btn-2.link-prev i:last-child {
  left: 0;
  right: auto;
}
.link-btn-2.link-prev:hover i:first-child {
  left: 0%;
  right: auto;
}
.link-btn-2.link-prev:hover i:last-child {
  left: -10%;
  right: auto;
}

/* pulse effect animation */
@-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);
  }
}
/*----------------------------------------*/
/*  PRELOADER CSS START
/*----------------------------------------*/
#loading {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999;
  margin-top: 0px;
  top: 0px;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  transform: translate(-50%, -50%);
}

.tp-preloader-animation {
  display: inline-block;
  animation: tp-preloader-animation 1s linear infinite alternate;
}

@-webkit-keyframes tp-preloader-animation {
  0% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes tp-preloader-animation {
  0% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes tp-preloader-animation {
  0% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes tp-preloader-animation {
  0% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #loading-center-absolute {
    width: 40%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #loading-center-absolute {
    width: 40%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #loading-center-absolute {
    width: 45%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  #loading-center-absolute {
    width: 50%;
  }
}
@media (max-width: 575px) {
  #loading-center-absolute {
    width: 60%;
  }
}
#loading {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999;
  margin-top: 0px;
  top: 0px;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.object {
  width: 20px;
  height: 20px;
  background-color: #5f3afc;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  margin-right: 20px;
  margin-bottom: 20px;
  position: absolute;
}

#object_one {
  -webkit-animation: object 2s linear infinite;
  animation: object 2s linear infinite;
}

#object_two {
  -webkit-animation: object 2s linear infinite -0.4s;
  animation: object 2s linear infinite -0.4s;
}

#object_three {
  -webkit-animation: object 2s linear infinite -0.8s;
  animation: object 2s linear infinite -0.8s;
}

#object_four {
  -webkit-animation: object 2s linear infinite -1.2s;
  animation: object 2s linear infinite -1.2s;
}

#object_five {
  -webkit-animation: object 2s linear infinite -1.6s;
  animation: object 2s linear infinite -1.6s;
}

@-webkit-keyframes object {
  0% {
    left: 100px;
    top: 0;
  }
  80% {
    left: 0;
    top: 0;
  }
  85% {
    left: 0;
    top: -20px;
    width: 20px;
    height: 20px;
  }
  90% {
    width: 40px;
    height: 15px;
  }
  95% {
    left: 100px;
    top: -20px;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 100px;
    top: 0;
  }
}
@keyframes object {
  0% {
    left: 100px;
    top: 0;
  }
  80% {
    left: 0;
    top: 0;
  }
  85% {
    left: 0;
    top: -20px;
    width: 20px;
    height: 20px;
  }
  90% {
    width: 40px;
    height: 15px;
  }
  95% {
    left: 100px;
    top: -20px;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 100px;
    top: 0;
  }
}
.loading-icon .loading-logo {
  width: 64px;
  height: 64px;
  -webkit-animation: ghurche 4s linear infinite -1.2s;
  animation: ghurche 4s linear infinite -1.2s;
}

@media (max-width: 575px) {
  .loading-icon .loading-logo {
    margin-bottom: 10px;
  }
}
@-webkit-keyframes ghurche {
  0% {
    left: 100px;
    top: 0;
  }
  100% {
    left: 100px;
    top: 0;
  }
}
@keyframes ghurche {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--
    - Background color
-----------------------------------------*/
.grey-bg {
  background: var(--tp-grey-1);
}

.grey-bg-2 {
  background: var(--tp-grey-2);
}

.white-bg {
  background: var(--tp-common-white);
}

.black-bg {
  background: var(--tp-common-black);
}

/* tp range slider css */
.tp-range-slider .inside-slider {
  padding-left: 7px;
  padding-right: 17px;
}
.tp-range-slider .noUi-target {
  background-color: #191c3c;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -o-border-radius: 12px;
  -ms-border-radius: 12px;
  border-radius: 12px;
  border: 0;
  box-shadow: none;
}
.tp-range-slider .noUi-connect {
  background-color: var(--tp-theme-1);
}
.tp-range-slider .noUi-horizontal {
  height: 6px;
}
.tp-range-slider .noUi-handle {
  height: 24px;
  width: 24px;
  background-color: var(--tp-theme-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 4px solid var(--tp-common-white);
  box-shadow: 0px 4px 10px rgba(5, 9, 43, 0.3);
  top: -9px;
}
.tp-range-slider .noUi-handle:hover {
  cursor: pointer;
}
.tp-range-slider .noUi-handle::before,
.tp-range-slider .noUi-handle::after {
  display: none;
}
.tp-range-slider-dark .noUi-handle {
  border: 4px solid #2d314b;
}

/* tp swiper slider dot */
.tp-swiper-dot .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: var(--tp-grey-1);
  opacity: 1;
  margin: 0 9px;
  position: relative;
}
.tp-swiper-dot .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.tp-swiper-dot .swiper-pagination-bullet button {
  font-size: 0;
}
.tp-swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--tp-theme-1);
}
.tp-swiper-dot
  .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  border-color: var(--tp-theme-1);
  transform: translate(-50%, -50%) scale(1);
}

.tp-swiper-arrow {
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  text-align: center;
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}
.tp-swiper-arrow:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

/* tp slick arrow */
.tp-slick-dot .slick-arrow {
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  text-align: center;
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}
.tp-slick-dot .slick-arrow:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  OFFCANVAS CSS START
/*----------------------------------------*/
.offcanvas__area {
  position: fixed;
  right: -490px;
  top: 0;
  width: 450px;
  height: 100%;
  background: var(--tp-common-white) none repeat scroll 0 0;
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 1s;
  z-index: 9999;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
}
.offcanvas__area::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.offcanvas__area.offcanvas-opened {
  right: 0px;
}
@media (max-width: 575px) {
  .offcanvas__area {
    width: 290px;
  }
}
.offcanvas__wrapper {
  position: relative;
  padding: 45px;
  background-color: var(--tp-common-white);
  overflow: auto;
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.offcanvas__close-btn {
  display: inline-block;
  font-size: 16px;
  height: 40px;
  width: 40px;
  line-height: 36px;
  background: var(--tp-common-black);
  color: #fff;
}
.offcanvas__close-btn:hover {
  background: var(--tp-theme-1);
}
.offcanvas__top {
  padding-bottom: 20px;
  border-bottom: 1px solid #d5d5d5;
}
.offcanvas__color {
  margin-bottom: 40px;
}
.offcanvas__color h5 {
  font-size: 22px;
  margin-bottom: 15px;
}
.offcanvas__color input {
  display: none;
}
.offcanvas__color label {
  width: 100%;
  height: 60px;
  background-color: var(--tp-theme-1);
}
.offcanvas__color label:hover {
  cursor: pointer;
}
.offcanvas__search {
  position: relative;
}
.offcanvas__search input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-right: 20px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #d5d5d5;
  font-size: 14px;
  color: var(--tp-common-black);
}
.offcanvas__search input::placeholder {
  color: var(--tp-text-1);
}
.offcanvas__search input:focus {
  border-color: var(--tp-theme-1);
}
.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: 14px;
  color: var(--tp-text-1);
}
.offcanvas__text p {
  margin-bottom: 25px;
}
.offcanvas__contact h4 {
  font-size: 22px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: var(--tp-common-black);
}
.offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas__contact ul li:hover i {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
.offcanvas__contact ul li:hover a {
  color: var(--tp-theme-1);
}
.offcanvas__contact-icon i {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--tp-border-1);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
.offcanvas__contact-text a {
  font-size: 18px;
  font-weight: 500;
  color: var(--tp-text-1);
}
.offcanvas__contact-text a:hover {
  color: var(--tp-theme-1);
}
.offcanvas__map iframe {
  width: 100%;
  height: 200px;
  border: none;
}
.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;
  line-height: 42px;
  text-align: center;
  background: var(--tp-grey-1);
  color: var(--tp-theme-1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
.offcanvas__social ul li a:hover {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.offcanvas__notification-icon a {
  font-size: 14px;
  color: var(--tp-common-black);
  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(--tp-theme-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: var(--tp-common-white);
  text-align: center;
}
.offcanvas__notification-text p {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--tp-common-black);
  font-size: 14px;
}
.offcanvas__notification-text p .notification-number {
  color: var(--tp-theme-1);
}
.offcanvas__notification-text p a {
  color: var(--tp-theme-1);
}
.offcanvas__btn a {
  margin-bottom: 20px;
}

/*----------------------------------------*/
/*  BREADCRUMB CSS START
/*----------------------------------------*/
.breadcrumb__title {
  letter-spacing: -0.01em;
  font-weight: 800;
  font-size: 62px;
  margin-bottom: 30px;
  color: var(--tp-common-white);
}
@media (max-width: 575px) {
  .breadcrumb__title {
    font-size: 50px;
  }
}
.breadcrumb__list span {
  color: var(--tp-common-white);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 5px;
}
.breadcrumb__list span a:hover {
  color: var(--tp-theme-1);
}
.breadcrumb__list span i {
  font-size: 14px;
}
.breadcrumb__list span.underline {
  text-decoration: underline;
}

/*----------------------------------------*/
/*  ACCORDION CSS START
/*----------------------------------------*/
.tp-accordion .accordion-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tp-accordion .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.tp-accordion .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.tp-accordion .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.tp-accordion .accordion-button {
  padding: 30px 0;
  padding-right: 15px;
  font-size: 24px;
  font-weight: 500;
  color: var(--tp-common-white);
  background-color: transparent;
}
.tp-accordion .accordion-button::after {
  position: absolute;
  content: "\f107";
  font-family: var(--tp-ff-fontawesome);
  background-image: none;
  top: 28%;
  right: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  color: var(--tp-theme-1);
  width: auto;
  height: auto;
  font-weight: 500;
}
.tp-accordion .accordion-button.collapsed::after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  color: var(--tp-common-white);
}
.tp-accordion .accordion-button:not(.collapsed) {
  color: var(--tp-theme-1);
  background-color: transparent;
  box-shadow: none;
}
.tp-accordion .accordion-button:focus {
  box-shadow: none;
  border: 0;
}
.tp-accordion .accordion-button:hover {
  color: var(--tp-theme-1);
}
.tp-accordion .accordion-button:hover::after {
  color: var(--tp-theme-1);
}
.tp-accordion .accordion-body {
  padding: 0 0 25px;
}
.tp-accordion .accordion-body p {
  font-size: 16px;
  color: var(--tp-text-1);
}

/*----------------------------------------*/
/*  NAV TAB CSS START
/*----------------------------------------*/
.tp-tab .nav-tabs {
  padding: 0;
  margin: 0;
  border: 0;
}
.tp-tab .nav-tabs .nav-link {
  padding: 0;
  margin: 0;
  border: 0;
}

/*----------------------------------------*/
/*  MODAL CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  SECTION TITLE CSS START
/*----------------------------------------*/
.section-sub-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: block;
}
.section-sub-title.has-before {
  position: relative;
}
.section-sub-title.has-before::before {
  content: "";
  width: 12px;
  height: 3px;
  margin-right: 3px;
  display: inline-block;
  background-color: var(--tp-theme-primary);
}

.section-sub-title.has-after::after {
  content: "";
  width: 12px;
  height: 3px;
  display: inline-block;
  background-color: var(--tp-theme-primary);
}

.section-title {
  font-weight: 800;
  font-size: 42px;
  line-height: 1.25;
  margin-bottom: 50px;
}

/*----------------------------------------*/
/*  02. HEADER CSS START
/*----------------------------------------*/
.header__space {
  margin-left: 228px;
  margin-right: 228px;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .header__space {
    margin-left: 120px;
    margin-right: 120px;
  }
}
@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__space {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .header__space {
    padding: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
  }
}
@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__space {
    margin-left: 15px;
    margin-right: 15px;
  }
}

.header__sticky.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #121212;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  z-index: 9;
}
.header__sticky.header-sticky .header__space {
  padding-top: 0;
  padding-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .header__sticky.header-sticky .header__space {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.header__sticky.header-sticky .main-menu > ul > li > a {
  padding: 32px 0 32px;
}
.header__sticky.header-3-sticky.header-sticky {
  background-color: #fff;
  box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1);
}

/* main menu css */
.menu__space {
  margin-left: 46px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .menu__space {
    margin-left: 60px;
  }
}

.main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-right: 65px;
}
.main-menu ul li:last-child {
  margin-right: 0;
}
.main-menu ul li.has-dropdown > a::after {
  padding-left: 5px;
  content: "+";
  font-family: var(--tp-ff-fontawesome);
  transition: 0.3s ease;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .main-menu ul li {
    margin-right: 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .main-menu ul li {
    margin-right: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li {
    margin-right: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li {
    margin-right: 20px;
  }
}
.main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  padding: 23px 0;
  font-weight: 600;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 200px;
  background: var(--tp-common-white);
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -ms-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -o-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  padding: 16px 0;
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li a {
  padding: 2px 25px;
  font-size: 13px;
  position: relative;
  z-index: 1;
  color: #03041c;
  width: 100%;
}
.main-menu ul li .submenu li .submenu {
  left: 120%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  color: var(--tp-theme-primary);
}
.main-menu ul li .submenu li:hover > a::after {
  color: var(--tp-theme-primary);
}
.main-menu ul li .submenu li:hover > a::before {
  left: 0;
  right: auto;
  width: 100%;
}
.main-menu ul li .submenu li:hover > .submenu {
  left: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu ul li:hover > .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}

.header-icon li {
  display: inline-block;
  margin-left: 27px;
  position: relative;
  transition: 0.3s ease;
}
.header-icon li .header_search-open {
  visibility: hidden;
  opacity: 0;
}
.header-icon li .header_search-open .search-form {
  visibility: visible;
  opacity: 1;
}
.header-icon li:hover a {
  color: #eb9309;
  cursor: pointer;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-icon li {
    margin-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-icon li {
    margin-left: 25px;
  }
}
.header-icon a {
  font-size: 16px;
}
.header-icon .search-form {
  position: absolute;
  right: 6%;
  width: 200px;
  background: #efefef;
  opacity: 0;
  z-index: 9;
  visibility: hidden;
  transition: 0.3s;
}
.header-icon .search-btn-wrap.header_search-open .search-form {
  visibility: visible;
  opacity: 1;
}
.header-icon .search-btn-wrap.header_search-open .header_search-close {
  visibility: visible;
  opacity: 1;
}
.header-icon .search-btn-wrap.header_search-open .header-search-open {
  visibility: hidden;
  opacity: 0;
}
.header-icon .search-btn-wrap .header-search-open {
  position: absolute;
  top: 6px;
  left: -6px;
}
.header-icon .search-btn-wrap .header_search-close {
  visibility: hidden;
  opacity: 0;
}
.header-icon input {
  height: 48px;
  width: 82%;
  background: none;
  border: 0;
  padding: 0 14px;
  transition: 0.3s;
}
.header-icon input::placeholder {
  color: #747474;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-icon {
    margin-right: 30px;
  }
}

.language {
  position: relative;
}
.language span {
  display: inline-block;
  color: #121212;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.05em;
  transition: 0.3s ease;
  padding: 23px 0px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .language span {
    margin-right: 10px;
  }
}
.language span:hover {
  cursor: pointer;
}
.language:hover span {
  color: #eb9309;
}
.language::before {
  content: "";
  border-left: 2px solid #efefef;
  padding-left: 35px;
}
.language ul {
  position: absolute;
  background: #fff;
  top: 120%;
  list-style: none;
  text-align: start;
  transition: 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  border-radius: 5px;
  padding: 8px 28px;
}
.language ul li:hover a {
  color: #eb9309;
}
.language .bg-hover {
  box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.12);
}
.language:hover ul {
  opacity: 1;
  visibility: visible;
  top: 110%;
}

.header-btn {
  margin-left: 38px;
  line-height: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .header-btn {
    margin-left: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-btn {
    margin-left: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-btn {
    margin-left: 25px;
    margin-right: 80px;
  }
}
.header-btn .tp-btn {
  padding: 14px 37px;
  line-height: 26px;
}

.header-area {
  position: relative;
}

.hamburger-btn {
  width: 34px;
  height: 24px;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: 0;
}
.hamburger-btn:hover span {
  background: #e1a13d;
}
.hamburger-btn span {
  display: inline-block;
  position: absolute;
  left: 0;
  background: var(--tp-common-white);
  height: 2px;
  width: 25px;
  opacity: 1;
  z-index: 1;
  border-radius: 10px;
  transition: 0.3s ease;
}
.hamburger-btn span:nth-child(1) {
  top: 0;
}
.hamburger-btn span:nth-child(2) {
  top: 10px;
  width: 14px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.hamburger-btn span:nth-child(3) {
  top: 20px;
  right: 0;
  left: auto;
}
.hamburger-btn:hover span:nth-child(1) {
  left: 10px;
}
.hamburger-btn:hover span:nth-child(3) {
  right: 10px;
}
.hamburger-btn-black {
  height: 15px;
  width: 30px;
  top: -4px;
}
.hamburger-btn-black span {
  background-color: var(--tp-common-black);
}
.hamburger-btn-black span:nth-child(1) {
  top: 0;
}
.hamburger-btn-black span:nth-child(2) {
  top: 7px;
}
.hamburger-btn-black span:nth-child(3) {
  top: 14px;
}
.hamburger-btn-black:hover span {
  background-color: var(--tp-theme-primary);
}

.tp-side-info {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background: #f6f6f4;
  padding: 30px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  right: -100%;
  transition: 0.3s;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
@media (max-width: 575px) {
  .tp-side-info {
    width: 100%;
  }
}
.tp-side-info.tp-side-info-open {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.tp-side-logo {
  margin-bottom: 50px;
  position: relative;
}
.tp-side-social li {
  list-style: none;
  margin-left: 10px;
}
.tp-side-close {
  position: absolute;
  top: 50px;
  right: 35px;
  font-size: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-side-close {
    top: 40px;
  }
}
.tp-side-close button:hover i {
  color: #e1a13d;
}
.tp-side-action {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.tp-side-content__inner-btn .tp-btn {
  padding: 12px 42px;
  width: 100%;
}
.tp-side-content__inner-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

.tpfooter__social.tpside-social a {
  background: #000;
}
.tpfooter__social.tpside-social a:hover {
  background: #eb9309;
}

.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 8;
  opacity: 0.7;
  top: 0;
  left: 0;
  transition: 0.8s;
  opacity: 0;
  visibility: hidden;
}

.offcanvas-overlay.offcanvas-overlay-open {
  opacity: 0.7;
  visibility: visible;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  background: #eb9309;
}

/*----------------------------------------*/
/*  01. HEADER CSS START
/*----------------------------------------*/
.tp-side-action span {
  color: white;
}
.tp-side-action span:hover {
  color: #eb9309;
}

.transparent-header {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
}

.main-menu.main-menu-2 ul li a {
  color: var(--tp-common-white);
}
.main-menu.main-menu-2 ul li:hover > a {
  color: var(--tp-theme-primary);
}

.header-area-2 .language span {
  color: #fff;
}
.header-area-2 .language:hover span {
  color: #eb9309;
}
.header-area-2 .language::before {
  content: "";
  border-left-color: #eb9309;
}
.header-area-2 .header-icon a {
  color: #fff;
}

/*----------------------------------------*/
/*  03. MEAN MENU CSS START
/*----------------------------------------*/
.mean-container a.meanmenu-reveal {
  display: none !important;
}
.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}
.mean-container .mean-nav ul li.dropdown-opened > a {
  color: var(--tp-theme-1);
}
.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: var(--tp-common-black);
  border-top: 1px solid #c7c5c5;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--tp-theme-primary);
}
.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
  line-height: 14px;
  border: 1px solid #c7c5c5;
  height: 30px;
  width: 30px;
  line-height: 30px;
  color: var(--tp-common-black);
  line-height: 30px;
  top: 0;
  font-weight: 400;
  transition: 0.2s ease;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--tp-heading-1);
  color: var(--tp-common-white);
}
.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  background: var(--tp-heading-1);
  color: var(--tp-common-white);
}
.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  color: var(--tp-common-white);
}
.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-bar {
  padding: 0;
  min-height: auto;
  background: none;
  margin-bottom: 40px;
}

/*----------------------------------------*/
/*  04. SLIDER CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .hero-area {
    padding-top: 60px;
  }
}

@media (max-width: 575px) {
  .tpslider__content .tphero__title br {
    display: none;
  }
}
.tpslider__subtitle {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 18px;
  letter-spacing: 0.06em;
  margin-bottom: 9px;
  display: block;
}
.tpslider__subtitle.has-before {
  position: relative;
}
.tpslider__subtitle.has-before::before {
  content: "";
  width: 12px;
  height: 2px;
  display: inline-block;
  background-color: var(--tp-theme-primary);
}
.tpslider__title {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #121212;
}
.tpslider__title span {
  color: #eb9309;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpslider__title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpslider__title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpslider__title {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .tpslider__title {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .tpslider__title br {
    display: none;
  }
}

.tphero__subtitle.has-before-hero::before {
  content: "";
  width: 19px;
  height: 3px;
  display: inline-block;
  background-color: var(--tp-theme-primary);
  position: relative;
}

.tpslider__comment {
  background: #000;
  width: 282px;
  height: 127px;
  padding: 23px 30px;
  border-radius: 6px;
  top: 28%;
  position: relative;
}
.tpslider__comment::before {
  width: 13px;
  height: 13px;
  clip-path: polygon(0 5%, 0 100%, 99% 5%);
  content: "";
  bottom: -12px;
  background: #000;
  border-radius: 2px;
  position: absolute;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpslider__comment {
    padding: 23px 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpslider__comment {
    top: 0;
    width: 270px;
    padding: 23px 26px;
  }
}
.tpslider__peragraph {
  font-weight: 400;
  font-size: 15px;
  line-height: 19px;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 1px;
}
.tpslider__name {
  color: #ffe24a;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.06em;
  margin-right: 8px;
}
.tpslider__country {
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.06em;
  color: #8d8383;
}

.slider__img {
  overflow: hidden;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .slider__img img {
    width: 100%;
  }
}
.slider__img img:hover {
  transform: scale(1.05);
}

.hero-down__button {
  margin-top: 40px;
}
.hero-down__button a {
  background: #eb9309;
  color: #fff;
  width: 107px;
  height: 107px;
  border-radius: 100%;
  line-height: 107px;
  font-size: 25px;
  display: block;
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s ease;
}
.hero-down__button a:hover {
  background: #121212;
  color: #fff;
}
.hero-down__button a:hover i {
  transform: translateY(6px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-down__button a {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-down__button {
    margin-top: 0;
  }
}
.hero-down__title span {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #121212;
  margin-bottom: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-down__title span {
    margin-bottom: 60px;
  }
}
@media (max-width: 575px) {
  .hero-down__title span {
    margin-bottom: 40px;
  }
}
.hero-down__social a {
  margin: 0 14px;
  font-size: 17px;
}
.hero-down__social a:hover i {
  color: #eb9309;
}
@media (max-width: 575px) {
  .hero-down__social a {
    margin-bottom: 20px;
  }
}

.slider-active.hero-style .slick-dots button {
  height: 8px;
  width: 8px;
  border: none;
  background: #e2e2e2;
}

.slider-active.hero-style .slick-dots li {
  list-style: none;
  margin-bottom: 7px;
}

.slider-active.hero-style .slick-dots > li.slick-active button {
  background: #eb9309;
}

.hero-style .slick-dots {
  position: absolute;
  left: -130px;
  bottom: 0px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-style .slick-dots {
    left: -115px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-style .slick-dots {
    left: -100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-style .slick-dots {
    left: -80px;
  }
}

.hero-style .slick-dots button {
  font-size: 0;
  padding: 0;
  border-radius: 50%;
}

.hero-style .slick-dots > li.slick-active button {
  background: #646464;
}

.hero-slider.hero-style-2 .slick-dots button {
  height: 8px;
  width: 8px;
  border: none;
  background: #e2e2e2;
}

.hero-slider.hero-style-2 .slick-dots li {
  list-style: none;
  margin-bottom: 17px;
  line-height: 1;
}

.hero-slider.hero-style-2 .slick-dots > li.slick-active button {
  background: #eb9309;
  transform: scale(2);
}

.hero-style-2 .slick-dots {
  position: absolute;
  bottom: 90px;
  right: 240px;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .hero-style-2 .slick-dots {
    right: 55px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero-style-2 .slick-dots {
    right: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-style-2 .slick-dots {
    right: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-style-2 .slick-dots {
    right: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .hero-style-2 .slick-dots {
    right: 30px;
  }
}

.hero-style-2 .slick-dots button {
  font-size: 0;
  padding: 0;
  border-radius: 50%;
}

.hero-style-2 .slick-dots > li.slick-active button {
  background: #646464;
}

/*----------------------------------------*/
/*  01. SLIDER CSS START
/*---------------------------------------*/
.hero-slider .slick-active .tphero__title,
.hero-slider .slick-active .tphero__subtitle,
.hero-slider .slick-active .tpslider__content,
.hero-slider .slick-active .hero-btn {
  animation-name: fadeInUp;
  animation-fill-mode: both;
}

.hero__space {
  margin-left: 228px;
  margin-right: 228px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__space {
    margin-left: 40px;
    margin-right: 40px;
  }
}

.hero-btn {
  margin-bottom: -7px;
  animation-delay: 0.7s;
  animation-duration: 1s;
}

.hero-area-2 {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-area-2::before {
  content: "";
  position: absolute;
  /*background: #161719;*/
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  left: 0;
}

.tphero__title {
  color: #ffffff;
  font-size: 70px;
  font-weight: 800;
  margin-bottom: 50px;
  animation-delay: 0.5s;
  animation-duration: 1s;
}
.tphero__title span {
  color: var(--tp-theme-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tphero__title {
    font-size: 59px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tphero__title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tphero__title {
    font-size: 44px;
  }
}
.tphero__title.index-2 {
  margin-bottom: 148px;
  font-size: 60px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__title.index-2 {
    margin-bottom: 50px;
  }
}
@media (max-width: 575px) {
  .tphero__title.index-2 {
    margin-bottom: 50px;
    font-size: 42px;
  }
}
.tphero__subtitle {
  display: inline-block;
  color: #ffffff;
  margin-bottom: 22px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  animation-delay: 0.3s;
  animation-duration: 1s;
}

.hero-height {
  min-height: 720px;
  z-index: 1;
  position: relative;
  display: flex !important;
  align-items: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-height {
    min-height: 700px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .hero-height {
    min-height: 600px;
  }
}

.hero-item-box {
  width: 100%;
}

.tpslider__thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  height: 100%;
  z-index: -1;
  width: auto;
}
.tpslider__thumb img {
  display: inline-block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-plr-225 {
  padding-left: 225px;
  padding-right: 255px;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .hero-plr-225 {
    padding-left: 120px;
    padding-right: 120px;
  }
}
@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) {
  .hero-plr-225 {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 575px),
  only screen and (min-width: 576px) and (max-width: 767px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-plr-225 {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.hero-area-3 {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-area-3::before {
  content: "";
  position: absolute;
  background: #161719;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  left: 0;
}

.hero-item-box-3 {
  min-height: 809px;
  z-index: 1;
  position: relative;
  display: flex !important;
  align-items: center;
}
@media (max-width: 575px) {
  .hero-item-box-3 {
    min-height: 700px;
  }
}
.hero-item-box-3 .tphero__subtitle {
  margin-bottom: 20px;
  display: block;
}
.hero-item-box-3 .tphero__play-btn a {
  background: #eb9309;
  color: #fff;
  width: 109px;
  height: 109px;
  border-radius: 100%;
  text-align: center;
  line-height: 109px;
  font-size: 20px;
  font-weight: 900;
  display: inline-block;
  animation: pulse 2s infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item-box-3 .tphero__play-btn a {
    width: 90px;
    height: 90px;
    line-height: 4.5;
  }
}
@media (max-width: 575px) {
  .hero-item-box-3 .tphero__play-btn a {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
.hero-item-box-3 .tphero__play-btn a:hover {
  background: #fff;
  color: #121212;
}
.hero-item-box-3 .tphero__play-btn a i {
  margin-left: 5px;
}
.hero-item-box-3 .tphero__play-btn.has-before-3::before {
  content: "";
  width: 164px;
  height: 1px;
  display: inline-block;
  background-color: var(--tp-common-white);
  position: absolute;
  top: 54px;
  right: 145px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item-box-3 .tphero__play-btn.has-before-3::before {
    right: 105px;
    width: 120px;
    top: 46px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-item-box-3 .tphero__play-btn.has-before-3::before {
    right: 220px;
  }
}
@media (max-width: 575px) {
  .hero-item-box-3 .tphero__play-btn.has-before-3::before {
    left: 105px;
    width: 120px;
    top: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .hero-item-box-3 .tphero__play-btn {
    margin-bottom: 30px;
  }
}

/*----------------------------------------*/
/*  05. TEAM CSS START
/*----------------------------------------*/
.team-section .section-title {
  color: #fff;
  margin-bottom: 60px;
}
@media (max-width: 575px) {
  .team-section .section-title {
    margin-bottom: 0;
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .team-section .section-title br {
    display: none;
  }
}
.team-section .section-sub-title {
  color: #fff;
}
.team__wrapper {
  padding: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
  border-radius: 15px;
}
.team__wrapper:hover .team-social a {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  .team__wrapper:hover .team-social a {
    transform: translateY(-70%);
  }
}
.team__wrapper:hover .team__img::before {
  height: 100%;
  top: 0;
  bottom: auto;
}
.team__img {
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.team__img img {
  width: 100%;
  border-radius: 15px;
}
.team__authur p {
  font-weight: 500;
  font-size: 14px;
  color: #8a8a8a;
  text-align: center;
}
.team__title {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 7px;
  display: block;
  text-align: center;
  color: #282f3b;
}
.team__title a:hover {
  color: #eb9309;
}
.team-bg-left {
  background-color: #161719;
  position: absolute;
  width: 50%;
  height: 632px;
  top: 0;
  left: 0;
  z-index: -2;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team-bg-left {
    height: 585px;
  }
}
@media (max-width: 575px) {
  .team-bg-left {
    width: 100%;
  }
}
.team-bg-right {
  position: absolute;
  background: #eb9309;
  height: 632px;
  width: 50%;
  right: 0;
  top: 0;
  z-index: -2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team-bg-right {
    height: 585px;
  }
}
@media (max-width: 575px) {
  .team-bg-right {
    width: 0;
  }
}
.team-social {
  position: absolute;
  top: 59%;
  right: 0;
  left: 0;
}
.team-social a {
  color: #ffffff;
  height: 36px;
  width: 36px;
  margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-radius: 2px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  transition: 0.3s;
  line-height: 32px;
  opacity: 0;
  visibility: hidden;
}
.team-social a svg {
  transform: translateY(-2px);
}
.team-social a:hover {
  background: #fff;
  color: #121212;
}
.team__img::before {
  position: absolute;
  content: "";
  height: 0;
  top: auto;
  left: 0px;
  background: #121212;
  opacity: 0.7;
  transition: 0.3s ease;
  width: 100%;
  bottom: 0;
  border-radius: 15px;
}

@media (max-width: 575px) {
  .team-btn .tp-btn-black {
    margin-left: -10px;
  }
}
.team-btn .tp-btn-black:hover {
  background: #fff;
  color: #121212;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team-btn {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team-box {
    top: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team-box {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team-box {
    top: 60px;
    margin-top: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .team-box {
    margin-top: 30px;
  }
}

/*----------------------------------------*/
/*  06. SERVICES CSS START
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .service-details-area {
    padding-top: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-details-area-2 {
    padding-top: 30px;
  }
}

.service-section {
  padding-right: 5px;
}
.service-text {
  padding-left: 53px;
  margin-bottom: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-text {
    padding-left: 0;
    margin-bottom: 40px;
  }
}
.service-title {
  font-weight: 800;
  font-size: 50px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #121212;
  margin-bottom: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-title {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-title {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .service-title {
    font-size: 29px;
  }
}
.service-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #666666;
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-img {
    margin-bottom: 30px;
  }
}
.service-img img {
  border-radius: 20px;
  max-width: 100%;
}
.service-play-btn a {
  background: #ffffff;
  color: #121212;
  width: 109px;
  height: 109px;
  border-radius: 100%;
  line-height: 109px;
  font-size: 20px;
  display: block;
  text-align: center;
  position: absolute;
  top: 245px;
  left: 582px;
  animation: pulse 2s infinite;
}
.service-play-btn a:hover {
  background: var(--tp-theme-primary);
  color: #fff;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-play-btn a {
    top: 200px;
    left: 510px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-play-btn a {
    top: 140px;
    left: 430px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-play-btn a {
    width: 95px;
    height: 95px;
    line-height: 95px;
    top: 120px;
    left: 316px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-play-btn a {
    width: 80px;
    height: 80px;
    line-height: 80px;
    top: 80px;
    left: 216px;
  }
}
@media (max-width: 575px) {
  .service-play-btn a {
    display: none;
  }
}

.service-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-thumb {
    padding-bottom: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-details {
    padding-bottom: 60px;
  }
}

/*----------------------------------------*/
/*  07. ABOUT CSS START
/*----------------------------------------*/
.bg-color {
  background-color: #f6f6f4;
  border-radius: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-area {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about-area {
    padding-bottom: 20px;
  }
}

.tp-about__left {
  padding-right: 132px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__left {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__left {
    margin-bottom: 20px;
  }
}
.tp-about__left p {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tp-heading-primary);
}
.tp-about__section-title {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 26px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-about__section-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__section-title {
    font-size: 25px;
  }
}
.tp-about__btn .tp-btn {
  background: #000;
}
.tp-about__play-btn {
  margin-top: 30px;
  margin-left: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__play-btn {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__play-btn {
    margin-top: 0;
  }
}
.tp-about__play-btn a {
  background: #eb9309;
  color: #fff;
  width: 109px;
  height: 109px;
  border-radius: 100%;
  text-align: center;
  line-height: 105px;
  font-size: 20px;
  font-weight: 900;
  border: 3px solid #fff;
  display: inline-block;
  box-shadow: 0px 4px 19px #eaeaea;
}
.tp-about__play-btn a:hover {
  background: #121212;
  color: #fff;
}

.tp-video-about-box {
  padding-top: 100px;
  padding-left: 215px;
  padding-bottom: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-video-about-box {
    padding-left: 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-video-about-box {
    padding-left: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-video-about-box {
    padding-top: 50px;
    padding-left: 30px;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-video-about-box {
    padding-top: 30px;
    padding-left: 30px;
    padding-bottom: 0px;
    padding-right: 30px;
  }
}

.tp-video-img {
  position: absolute;
  bottom: -120px;
  right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-video-img {
    width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-video-img {
    position: static;
    margin-top: 30px;
  }
}

.about-img {
  position: relative;
  display: inline-block;
}
.about-img::before {
  content: "";
  position: absolute;
  border: 2px dashed #eb9309;
  width: 100%;
  height: 100%;
  top: 12px;
  right: 12px;
  color: #cfa284;
  border-radius: 8px;
}
.about-img .back-border {
  position: relative;
  z-index: 8;
}
.about-img .back-border img {
  max-width: 100%;
}

.about-area-2 {
  position: relative;
  z-index: 1;
}

.about-bg::after {
  position: absolute;
  content: "";
  width: 100%;
  background: #f6f6f4;
  height: 165px;
  bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-bg::after {
    height: 145px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-bg::after {
    height: 172px;
    top: 106px;
    z-index: -1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-bg::after {
    height: 192px;
    top: 106px;
    z-index: -1;
  }
}
@media (max-width: 575px) {
  .about-bg::after {
    height: 300px;
    top: 106px;
    z-index: -1;
  }
}

.about__play-btn a {
  background: #eb9309;
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  text-align: center;
  line-height: 4;
  font-size: 14px;
  font-weight: 900;
  display: inline-block;
}
.about__play-btn a:hover {
  transform: scale(1.1);
}

.tp-about-box {
  padding: 67px 118px;
  background: #ffffff;
  border-radius: 16px;
  position: relative;
}
.tp-about-box::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: -5px;
  width: calc(100% - 120px);
  height: 100%;
  border-radius: 16px;
  margin: auto;
  background-color: #eb9309;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-about-box {
    padding: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-box {
    padding: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about-box {
    padding: 35px;
  }
}

.tp-about-box-translate {
  margin-top: -106px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-about-box-translate {
    margin-top: -82px;
  }
}

.tp-about__left .section-sub-title {
  margin-bottom: 16px;
}
.tp-about__left .section-title {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about__left .section-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__left .section-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-about__right {
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  .tp-about__right .tp-btn-black {
    padding: 15px 8px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-about__right .tp-btn-black {
    padding: 15px 14px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-about__right .tp-btn-black {
    padding: 15px 20px;
  }
}

.about-area-wrapper {
  padding-right: 35px;
}
@media (max-width: 575px) {
  .about-area-wrapper {
    padding-right: 0;
  }
}
.about-area-wrapper .has-before::before {
  background: #000;
}
.about-area-wrapper .section-title {
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .about-area-wrapper .section-title {
    font-size: 33px;
  }
}

.about-bg-3 {
  background-color: #eb9309;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-bg-3 {
    height: 925px;
  }
}

.about-area-text {
  padding-left: 10px;
  margin-top: 33px;
}
.about-area-text p {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #121212;
}

.about-3-img {
  margin-top: -299px;
  position: relative;
  margin-bottom: 148px;
}
.about-3-img img {
  border-radius: 20px;
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-3-img {
    margin-top: -200px;
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-3-img {
    margin-top: -155px;
    margin-bottom: 75px;
  }
}
@media (max-width: 575px) {
  .about-3-img {
    margin-top: -120px;
    margin-bottom: 65px;
  }
}

.about-card-box {
  position: relative;
  /* top: 68px; */
}
.about-card-box .tpcard__wrapper {
  /* padding: 15px 15px 0; */
}
.about-card-box .tpcard__content {
  position: absolute;
  bottom: -37px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 3%) 0, #000000c4 100%);
  width: 100%;
}
.about-card-box .tpcard__title {
  margin-bottom: 46px;
  padding-right: 36px;
  color: #fff;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-card-box {
    top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-card-box {
    top: 122px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about-card-box .card-item {
    margin-top: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 575px) {
  .about-comment {
    margin-top: 40px;
  }
}

.about-bg-3-bottom::after {
  position: absolute;
  content: "";
  width: 100%;
  background: #f6f6f4;
  /* height: 235px; */
  bottom: -74px;
  left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-bg-3-bottom::after {
    height: 766px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about-bg-3-bottom::after {
    height: 1560px;
  }
}

.breadcrumb-bg {
  position: absolute;
  height: 415px;
  width: 100%;
  background: #161719;
  z-index: -1;
}
@media (max-width: 575px) {
  .breadcrumb-bg {
    height: 415px;
  }
}

.left-align {
  margin-left: -23px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .left-align {
    margin-left: -12px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .left-align {
    margin-left: 0px;
  }
}

.left-align-2 {
  margin-left: -40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .left-align-2 {
    margin-left: 0;
    height: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .left-align-2 {
    margin-left: 14px;
    height: 100%;
  }
}

.about-1 {
  margin-bottom: 19px;
}
.about-1 img {
  border-radius: 5px;
  object-fit: cover;
}

.about-2 {
  margin-bottom: 19px;
}
.about-2 img {
  border-radius: 5px;
}

.about-3 img {
  border-radius: 5px;
}

.right-align {
  margin-left: 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .right-align {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .right-align {
    margin-left: -12px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .right-align {
    margin-left: 32px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .right-align {
    margin-left: 0px;
  }
}
@media (max-width: 575px) {
  .right-align {
    margin-left: 56px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-4 {
    height: 100%;
  }
}
.about-4 img {
  border-radius: 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-4 img {
    height: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.about-5 {
  margin-bottom: 18px;
}
.about-5 img {
  border-radius: 5px;
}

.about-6 img {
  border-radius: 5px;
}

@media (max-width: 575px) {
  .about-me-area {
    padding-top: 130px;
  }
}

@media (max-width: 575px) {
  .about-text-area {
    padding-bottom: 70px;
  }
}

.about-me-bg {
  background: #121212;
  height: 100%;
  width: 100%;
  z-index: -1;
  border: 1px solid #f3f3f3;
  border-radius: 10px;
}
.about-me-wrapper {
  padding: 52px 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-me-wrapper {
    padding: 52px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about-me-wrapper {
    padding: 30px 30px;
  }
}
.about-me-wrapper:hover .about-me-img::before {
  right: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-me-wrapper:hover .about-me-img::before {
    right: 80px;
  }
}
.about-me-img {
  z-index: 1;
}
.about-me-img img {
  border-radius: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-me-img img {
    max-width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about-me-img img {
    max-width: 100%;
    margin-bottom: 40px;
  }
}
.about-me-img::before {
  position: absolute;
  background: #fff;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: -11px;
  border-radius: 100%;
  z-index: -1;
  transition: 0.3s ease;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-me-img::before {
    height: 93%;
    width: 100%;
    top: 0px;
    right: -10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-me-img::before {
    height: 88%;
    width: 80%;
    top: 5px;
    right: 65px;
  }
}
@media (max-width: 575px) {
  .about-me-img::before {
    display: none;
  }
}
.about-me-content {
  padding-left: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about-me-content {
    padding-left: 64px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-me-content {
    padding-left: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-me-content {
    padding-left: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-me-content {
    padding-left: 30px;
  }
}
@media (max-width: 575px) {
  .about-me-content {
    padding-left: 0px;
  }
}
.about-me-title {
  font-weight: 800;
  font-size: 30px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.about-me-description {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: #2ca2fb;
  margin-bottom: 35px;
  display: block;
}
.about-me-list ul {
  list-style: none;
}
.about-me-list ul li {
  font-weight: 400;
  font-size: 18px;
  color: #acacac;
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .about-me-list ul li {
    font-size: 17px;
  }
}
.about-me-list ul li span {
  font-weight: 500;
  color: var(--tp-common-white);
}
.about-me-social {
  margin-top: 35px;
}
.about-me-social .facebook a {
  font-weight: 400;
  font-size: 15px;
  color: #4267b2;
  background: #2e2e2e;
  border-radius: 3px;
  height: 46px;
  width: 46px;
  text-align: center;
  line-height: 3;
  display: inline-block;
}
.about-me-social .facebook a:hover {
  background: #fff;
}
.about-me-social .pinterest a {
  font-weight: 400;
  font-size: 15px;
  color: #e40028;
  background: #2e2e2e;
  border-radius: 3px;
  height: 46px;
  width: 46px;
  text-align: center;
  line-height: 3;
  display: inline-block;
}
.about-me-social .pinterest a:hover {
  background: #fff;
}
.about-me-social .twitter a {
  font-weight: 400;
  font-size: 15px;
  color: #1da1f2;
  background: #2e2e2e;
  border-radius: 3px;
  height: 46px;
  width: 46px;
  text-align: center;
  line-height: 3;
  display: inline-block;
}
.about-me-social .twitter a:hover {
  background: #fff;
}
.about-me-social .youtube a {
  font-weight: 400;
  font-size: 15px;
  color: #e40028;
  background: #2e2e2e;
  border-radius: 3px;
  height: 46px;
  width: 46px;
  text-align: center;
  line-height: 3;
  display: inline-block;
}
.about-me-social .youtube a:hover {
  background: #fff;
}
.about-me-personal-experience {
  padding-right: 38px;
  margin-bottom: 55px;
}
.about-me-personal-experience p {
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 28px;
}
.about-me-personal-title {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.about-me-skills {
  margin-bottom: 55px;
  /* padding-right: 56px; */
  border: solid 1px #a6a2a25c;
  border-radius: 10px;
  padding: 18px;
}
@media (max-width: 575px) {
  .about-me-skills {
    margin-bottom: 0;
  }
}
.about-me-skills p {
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  text-align: center;
}
.about-me-skills-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-bottom: 65px;
  text-align: center;
}
.about-me-awards {
  margin-bottom: 55px;
  padding-right: 56px;
}
.about-me-awards p {
  font-weight: 400;
  font-size: 16px;
  color: #666666;
}
.about-me-awards-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.about-me-education {
  margin-bottom: 55px;
  padding-right: 56px;
}
.about-me-education p {
  font-weight: 400;
  font-size: 16px;
  color: #666666;
}
.about-me-education-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.about-me-send-message .contact-form {
  background: #f6f6f4;
  padding: 70px 125px 60px;
  border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about-me-send-message .contact-form {
    padding: 60px 40px;
  }
}
.about-me-send-message .contact-form input,
.about-me-send-message .contact-form textarea {
  width: 100%;
  height: 65px;
  padding: 0 18px;
  border: 2px solid transparent;
  background: #ffffff;
  box-shadow: 0px 10px 21px rgba(118, 118, 118, 0.03);
  border-radius: 10px;
  outline: none;
  resize: none;
}
.about-me-send-message .contact-form input::placeholder,
.about-me-send-message .contact-form textarea::placeholder {
  color: #747474;
}
.about-me-send-message .contact-form input:focus,
.about-me-send-message .contact-form textarea:focus {
  border-color: #eb9309;
}
.about-me-send-message .contact-form textarea {
  height: 184px;
  padding: 20px 18px;
}
.about-me-send-message .contact-form .contact-input {
  margin-bottom: 18px;
}
.about-me-send-message-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #121212;
  padding-top: 100px;
  margin-bottom: 35px;
}
.about-me-send-message::before {
  position: absolute;
  content: "";
  width: 1068px;
  height: 1px;
  background: #eeeeee;
  border-radius: 10px;
  top: 56px;
  left: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about-me-send-message::before {
    width: 920px;
    left: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-me-send-message::before {
    width: 770px;
    left: 96px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-me-send-message::before {
    width: 680px;
    left: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-me-send-message::before {
    width: 510px;
    left: 15px;
  }
}
@media (max-width: 575px) {
  .about-me-send-message::before {
    width: 280px;
    left: 15px;
  }
}

/*----------------------------------------*/
/*  08. CARD CSS START
/*----------------------------------------*/
.card-area {
  margin-bottom: -342px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .card-area {
    margin-bottom: -368px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .card-area {
    margin-bottom: -399px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .card-area {
    margin-bottom: -368px;
  }
}

.next-btn {
  text-align: end;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .next-btn {
    text-align: start;
  }
}
.next-btn .cause-slider-nav {
  margin-top: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .next-btn .cause-slider-nav {
    margin-top: 0;
    margin-bottom: 40px;
  }
}

.cause-slider-nav .slick-next.slick-arrow i {
  background: #eb9309;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
}
.cause-slider-nav .slick-next.slick-arrow i:hover {
  background: #000;
}

.cause-slider-nav .slick-prev.slick-arrow i {
  background: #eb9309;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  margin-right: 12px;
}
.cause-slider-nav .slick-prev.slick-arrow i:hover {
  background: #000;
}

.tpcard__wrapper {
  position: relative;
  z-index: 2;
  /* border: 1px solid #f1f1f1; */
  /* box-shadow: 0px 10px 15px rgba(221, 221, 221, 0.15); */
  border-radius: 15px;
  overflow: hidden;
}
.tpcard__content {
  padding: 28px 24px 25px;
}
.tpcard__content p {
  font-weight: 400;
  font-size: 15px;
  color: #666666;
  margin-bottom: 42px;
}
.tpcard__img {
  overflow: hidden;
  border-radius: 15px 15px 0px 0px;
}
.tpcard__img img {
  width: 100%;
  border-radius: 15px 15px 0px 0px;
}
.tpcard__img img:hover {
  transform: scale(1.05);
}
.tpcard__title {
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpcard__title {
    font-size: 19px;
  }
}
.tpcard__title a:hover {
  color: #eb9309;
}
.tpcard__details {
  padding-right: 35px;
}
@media (max-width: 575px) {
  .tpcard__details {
    padding-right: 20px;
  }
}
.tpcard__details .subtitle {
  font-weight: 500;
  font-size: 10px;
  line-height: 30px;
  text-transform: uppercase;
  color: #9a9a9a;
}
.tpcard__details .sale {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 30px;
  text-transform: uppercase;
  color: #0d0d0d;
  margin-top: -12px;
  display: block;
}

.progress-bar span {
  text-align: right;
  transform: translateY(-20px);
  color: #0d0d0d;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
}

.progress-bar {
  position: relative;
}
.progress-bar::after {
  content: "";
  position: absolute;
  border: 4px solid #eb9309;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  bottom: -5px;
  right: 0;
  background: #fff;
}

.progress-bar {
  overflow: inherit;
  background-color: #eb9309;
}

.progress {
  overflow: inherit;
  height: 4px;
  margin-bottom: 17px;
  border-radius: 0;
}

.slick-20 {
  margin: 0 -10px;
  z-index: 5;
}

.slick-20 .slick-slide {
  padding: 0 10px;
}

.progress.donation-details {
  height: 12px;
  margin-bottom: 28px;
}

.tpcard__wrapper.donation-details {
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.tpcard__title.donation-details {
  font-weight: 800;
  font-size: 40px;
  color: #0d0d0d;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpcard__title.donation-details {
    font-size: 30px;
  }
}

.tpcard__content.donation-details {
  padding: 40px 0px 30px;
}

.donation-card-box.donaion-details .tpcard__title {
  margin-bottom: 60px;
}
@media (max-width: 575px) {
  .donation-card-box.donaion-details .tpcard__title {
    font-size: 27px;
  }
}

.progress-bar.donation-details::after {
  border: 10px solid #eb9309;
  width: 37px;
  height: 37px;
  bottom: -11px;
  right: -15px;
}
@media (max-width: 575px) {
  .progress-bar.donation-details::after {
    width: 33px;
    height: 33px;
  }
}

.progress-bar.donation-details span {
  font-weight: 700;
  font-size: 15px;
  color: #eb9309;
  position: absolute;
  right: -8px;
  top: -15px;
}

.tpcard__thumb.donation-details img {
  border-radius: 10px;
  min-width: 100%;
}
@media (max-width: 575px) {
  .tpcard__thumb.donation-details img {
    max-width: 100%;
  }
}

.tpcard__details.donation-details span {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: -18px;
  display: block;
  color: #666666;
}

.tpcard__details.donation-details .sale {
  font-weight: 600;
  font-size: 24px;
  color: #0d0d0d;
}
@media (max-width: 575px) {
  .tpcard__details.donation-details .sale {
    font-size: 18px;
  }
}

.card-area.card-area-2 {
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .card-area.card-area-2 {
    padding-bottom: 80px;
  }
}
@media (max-width: 575px) {
  .card-area.card-area-2 .tpcard-btn {
    margin-top: 40px;
  }
}

.tpcard-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

.tpcard__wrapper.tpcard__wrappr-2 h4 {
  margin-bottom: 45px;
  padding-right: 15px;
}

.card-area-2 {
  /* background: #f6f6f4; */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .card-area-2 {
    padding-top: 70px;
  }
}

.tpcta-3-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

/*----------------------------------------*/
/*  09. FEATURES CSS START
/*----------------------------------------*/
.features-area::before {
  content: "";
  position: absolute;
  background: #121212;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
  z-index: -1;
}

.box-90 {
  margin: 0 92px;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .box-90 {
    margin: 0 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .box-90 {
    margin: 0 45px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .box-90 {
    margin: 0 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .box-90 {
    margin: 0 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .box-90 {
    margin: 0;
  }
}

.tp-z-index {
  position: relative;
  z-index: 2;
}

.features-btn {
  margin-bottom: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features-btn {
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features-btn {
    margin-bottom: 65px;
  }
}
@media (max-width: 575px) {
  .features-btn {
    margin-bottom: 50px;
  }
}

.features-sep {
  border-bottom: 2px solid rgba(255, 255, 255, 0.29);
  margin-bottom: 50px;
}

.features-area {
  padding-top: 342px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features-area {
    padding-top: 357px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-area {
    padding-top: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features-area {
    padding-top: 360px;
  }
}

.features-details__img {
  margin-bottom: 26px;
  height: 63px;
}
.features-details__title {
  color: #fff;
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -0.02em;
  margin-bottom: 17px;
  font-family: "Outfit";
}
.features-details__content p {
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #e1e1e1;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .features-details {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-details.last-detail {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .features-details {
    padding-left: 0;
    padding-bottom: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .features-area-2 {
    padding-top: 70px;
  }
}

.tpfeatures-section__wrapper {
  padding-right: 65px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpfeatures-section__wrapper {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpfeatures-section__wrapper {
    padding-right: 20px;
  }
}
@media (max-width: 575px) {
  .tpfeatures-section__wrapper {
    padding-right: 0px;
  }
}
.tpfeatures-section__wrapper .section-title {
  margin-bottom: 35px;
}
@media (max-width: 575px) {
  .tpfeatures-section__wrapper .section-title {
    font-size: 30px;
  }
}

.tpfeatures__icon {
  margin-right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpfeatures__icon {
    margin-right: 25px;
  }
}
.tpfeatures img {
  display: inline-block;
  width: 60px;
  height: 60px;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
}
.tpfeatures__title {
  font-weight: 700;
  font-size: 24px;
  color: #0b1c2a;
  margin-bottom: 16px;
}
.tpfeatures__title:hover {
  color: #eb9309;
}
.tpfeatures p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #666666;
}
.tpfeatures:hover img {
  -webkit-transform: translateY(0) translate3d(0, -5px, 0);
  -moz-transform: translateY(0) translate3d(0, -5px, 0);
  -ms-transform: translateY(0) translate3d(0, -5px, 0);
  -o-transform: translateY(0) translate3d(0, -5px, 0);
  transform: translateY(0) translate3d(0, -5px, 0);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpfeatures {
    margin-left: 0;
    margin-bottom: 40px;
  }
}

.ml-36 {
  margin-left: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ml-36 {
    margin-left: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .ml-36 {
    margin-left: 0px;
  }
}

.tpfeatures.tpfeatures-2 {
  border: 1px solid #f6f6f4;
  border-radius: 10px;
  padding: 40px 40px 15px;
  margin-bottom: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .features-area-3 {
    padding-top: 100px;
    padding-bottom: 30px;
  }
}

/*----------------------------------------*/
/*  10. FACT CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .fact-area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.fact-wrap .section-title {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .fact-wrap .section-title {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .fact-wrap .section-title br {
    display: none;
  }
}

.tp-fact {
  background: #ffffff;
  border: 1px solid #f6f6f4;
  box-shadow: 0px 6px 7px rgba(172, 172, 172, 0.08);
  border-radius: 8px;
  padding: 22px;
}
.tp-fact__visit h3 {
  font-family: "Outfit";
  font-weight: 600;
  font-size: 60px;
  line-height: 88px;
  color: #eb9309;
  margin-right: 28px;
}
@media (max-width: 575px) {
  .tp-fact__visit h3 {
    font-size: 50px;
  }
}
.tp-fact__title {
  font-weight: 400;
  font-size: 28px;
  line-height: 88px;
  color: #000000;
  margin-bottom: -50px;
  margin-top: -17px;
}
.tp-fact__subtitle {
  font-size: 14px;
  color: #666666;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .md-margin {
    margin-top: 15px;
  }
}

/*----------------------------------------*/
/*  11. VOLUNTEERS CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .volunteers-area {
    padding-bottom: 60px;
  }
}

.tpvolunteers-section-wrapper p {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #666666;
  margin-bottom: 29px;
}
.tpvolunteers-section-wrapper .section-title {
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .tpvolunteers-section-wrapper .section-title {
    font-size: 37px;
  }
}

.tp-volunteers__img1 {
  margin-left: 13px;
  margin-right: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-volunteers__img1 {
    margin-left: 0;
  }
}
.tp-volunteers__img1 img {
  border-radius: 8px;
  max-width: 100%;
}
.tp-volunteers__img2 img {
  border-radius: 8px;
  max-width: 100%;
}

.volunteers-shape {
  position: absolute;
}

.top {
  top: -9px;
  left: 600px;
  z-index: -1;
}
@media (max-width: 575px) {
  .top {
    top: 0;
    left: 0;
  }
}

.bottom {
  left: 78px;
  top: 308px;
  z-index: -1;
}

.volunteers-area-2 {
  background-color: #161719;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 575px) {
  .volunteers-area-2 {
    padding-bottom: 180px;
  }
}
.volunteers-area-2 .tp-volunteers-2 {
  padding-left: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-area-2 .tp-volunteers-2 {
    padding-left: 0;
  }
}
.volunteers-area-2 .tp-volunteers-2__img2 {
  margin-left: 27px;
}
@media (max-width: 575px) {
  .volunteers-area-2 .tp-volunteers-2__img2 {
    margin-left: 10px;
  }
}
.volunteers-area-2 .tp-volunteers-2__img2 img {
  border-radius: 10px;
  max-width: 100%;
}
.volunteers-area-2 .tp-volunteers-2__img1 img {
  border-radius: 10px;
  max-width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-2-section__wrapper {
    padding-left: 0;
  }
}
.volunteers-2-section__wrapper p {
  font-weight: 400;
  font-size: 20px;
  color: #e1e1e1;
  line-height: 30px;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .volunteers-2-section__wrapper p br {
    display: none;
  }
}
.volunteers-2-section__wrapper .section-sub-title {
  color: #fff;
}
.volunteers-2-section__wrapper .section-title {
  color: #fff;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .volunteers-2-section__wrapper .section-title {
    font-size: 32px;
  }
}
.volunteers-2-section__wrapper ul {
  list-style: none;
  margin-bottom: 42px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .volunteers-2-section__wrapper ul {
    margin-bottom: 30px;
  }
}
.volunteers-2-section__wrapper ul li {
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 7px;
}
.volunteers-2-section__wrapper ul li span i {
  color: #eb9309;
  font-size: 16px;
  margin-right: 20px;
  font-weight: 900;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-2-section__wrapper.tpvolunteers-2 {
    padding-left: 0;
  }
}

.volunteers-area-3 {
  position: relative;
  background-repeat: no-repeat;
}

.volunteers-bg {
  background-color: #161719;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  z-index: -1;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-bg {
    width: 100%;
  }
}

.volunteers-section-3__wrapper {
  padding-left: 105px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-section-3__wrapper {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-section-3__wrapper {
    padding-right: 170px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-section-3__wrapper {
    padding-bottom: 40px;
  }
}
.volunteers-section-3__wrapper p {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #e1e1e1;
  margin-bottom: 26px;
}
.volunteers-section-3__wrapper .section-sub-title {
  color: #fff;
}
.volunteers-section-3__wrapper .section-title {
  color: #fff;
  margin-bottom: 24px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .volunteers-section-3__wrapper .section-title {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-section-3__wrapper .section-title {
    margin-bottom: 30px;
  }
}
.volunteers-section-3__wrapper ul {
  list-style: none;
  margin-bottom: 42px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .volunteers-section-3__wrapper ul {
    margin-bottom: 30px;
  }
}
.volunteers-section-3__wrapper ul li {
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 7px;
}
.volunteers-section-3__wrapper ul li span {
  color: #eb9309;
  font-size: 16px;
  margin-right: 20px;
}

.tpvolunteers-3__img-1 img {
  border-radius: 100%;
  margin-left: 285px;
  border-left: 12px solid #eb9309;
  height: 563px;
  width: 577px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tpvolunteers-3__img-1 img {
    margin-left: 135px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpvolunteers-3__img-1 img {
    margin-left: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpvolunteers-3__img-1 img {
    margin-left: 20px;
    height: 530px;
    width: 530px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpvolunteers-3__img-1 img {
    margin-left: 115px;
  }
}

.tpvolunteers-3__img-2 img {
  position: absolute;
  top: 100px;
  left: 85px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpvolunteers-3__img-2 img {
    left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpvolunteers-3__img-2 img {
    left: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpvolunteers-3__img-2 img {
    left: 5px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpvolunteers-3__img-2 img {
    left: 0;
    top: 15px;
    width: 75%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-area-4 {
    padding-top: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-area-4 {
    padding-top: 240px;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .volunteers-area-4 {
    padding-top: 160px;
    padding-bottom: 0;
  }
}
@media (max-width: 575px) {
  .volunteers-area-4 {
    padding-top: 150px;
    padding-bottom: 0;
  }
}
@media (max-width: 575px) {
  .volunteers-area-4 p br {
    display: none;
  }
}

.volunteers-bg-4 {
  background-color: #f6f6f4;
  position: absolute;
  width: 100%;
  height: 1060px;
  top: -150px;
  left: 0;
  z-index: -1;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .volunteers-bg-4 {
    height: 1000px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-bg-4 {
    height: 1465px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .volunteers-bg-4 {
    height: 1388px;
  }
}
@media (max-width: 575px) {
  .volunteers-bg-4 {
    height: 1782px;
  }
}

.volunteers-section-4 .section-title {
  margin-bottom: 24px;
}
@media (max-width: 575px) {
  .volunteers-section-4 .section-title {
    font-size: 34px;
  }
}
.volunteers-section-4 p {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #666666;
  margin-bottom: 26px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .volunteers-section-4 p {
    font-size: 19px;
  }
}
.volunteers-section-4 .volunteers-list ul {
  list-style: none;
  margin-bottom: 35px;
}
.volunteers-section-4 .volunteers-list ul li {
  color: #121212;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 7px;
}
.volunteers-section-4 .volunteers-list ul li span {
  color: #eb9309;
  font-size: 16px;
  margin-right: 20px;
}

.volunteers-box {
  min-height: 580px;
}

.volunteers-item {
  background: #fff;
  height: 270px;
  width: 270px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  box-shadow: 0px 4px 4px rgba(163, 163, 163, 0.25);
  transition: 0.3s;
}
.volunteers-item:hover {
  transform: scale(1.05);
}
.volunteers-item img {
  margin-bottom: 26px;
}
.volunteers-item span {
  font-weight: 700;
  font-size: 42px;
  margin-bottom: 13px;
}
.volunteers-item p {
  font-weight: 400;
  font-size: 16px;
  color: #727885;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .volunteers-item {
    height: 250px;
    width: 250px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-item {
    height: 200px;
    width: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-item {
    height: 240px;
    width: 240px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .volunteers-item {
    height: 200px;
    width: 200px;
  }
}

.vol-item-top {
  position: absolute;
  top: -50px;
  left: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .vol-item-top {
    left: 155px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vol-item-top {
    top: 60px;
    left: 155px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .vol-item-top {
    top: 40px;
    left: 250px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .vol-item-top {
    top: 30px;
    left: 0px;
  }
}
@media (max-width: 575px) {
  .vol-item-top {
    position: static;
    margin-top: 30px;
  }
}

.vol-item-left {
  position: absolute;
  top: 95px;
  left: -60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .vol-item-left {
    left: -72px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vol-item-left {
    top: 200px;
    left: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .vol-item-left {
    top: 177px;
    left: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .vol-item-left {
    top: 265px;
    left: 0;
  }
}
@media (max-width: 575px) {
  .vol-item-left {
    position: static;
    margin-top: 30px;
  }
}

.vol-item-bottom {
  position: absolute;
  top: 252px;
  left: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .vol-item-bottom {
    left: 155px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vol-item-bottom {
    top: 332px;
    left: 155px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .vol-item-bottom {
    top: 320px;
    left: 250px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .vol-item-bottom {
    top: 265px;
    left: 250px;
  }
}
@media (max-width: 575px) {
  .vol-item-bottom {
    position: static;
    margin-top: 30px;
  }
}

.vol-item-right {
  position: absolute;
  top: 95px;
  right: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .vol-item-right {
    right: 5px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .vol-item-right {
    top: 200px;
    right: -15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .vol-item-right {
    top: 177px;
    right: -28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .vol-item-right {
    top: 30px;
    right: 62px;
  }
}
@media (max-width: 575px) {
  .vol-item-right {
    position: static;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.tpvoluntrees-3-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

.tpcta-3-btn .tp-btn:hover {
  background: #fff;
  color: #121212;
}

.tpcta-4-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

.volunteers-section-3__wrapper.volunteers-breadcrumb .section-sub-title {
  color: var(--tp-theme-2);
}
.volunteers-section-3__wrapper.volunteers-breadcrumb .section-title {
  color: var(--tp-theme-2);
}
.volunteers-section-3__wrapper.volunteers-breadcrumb p {
  color: var(--tp-theme-2);
}
.volunteers-section-3__wrapper.volunteers-breadcrumb ul li {
  color: var(--tp-theme-2);
}

@media (max-width: 575px) {
  .our-volunteers-area {
    padding-top: 40px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .our-volunteers-area {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .our-volunteers-area {
    padding-top: 60px;
  }
}

/*----------------------------------------*/
/*  12. STATICK CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .statick-area {
    padding-bottom: 60px;
  }
}

.statick-title h2 {
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.01em;
  color: #121212;
}

.statick-img img {
  margin-left: -50px;
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .statick-img img {
    margin-left: 0;
  }
}

/*----------------------------------------*/
/*  13. GALLERY CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .tp-gallery-area {
    padding-bottom: 70px;
  }
}

.tp-gallery img {
  width: 100%;
  height: 100%;
}

.tpgallery__content {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: translateY(50px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpgallery__content {
    padding: 20px;
  }
}
.tpgallery__content p {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  color: #eb9309;
}
.tpgallery__title {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpgallery__title {
    font-size: 18px;
  }
}
.tpgallery__title a:hover {
  color: #eb9309;
}

.tpgallery-btn {
  position: absolute;
  text-align: center;
  transform: translateY(50px);
  color: #fff;
  width: 156px;
  height: 156px;
  border: 1px solid #eb9309;
  background: #eb9309;
  border-radius: 100%;
  font-weight: 500;
  font-size: 30px;
  line-height: 5;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 50%;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpgallery-btn {
    width: 140px;
    height: 140px;
    line-height: 140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpgallery-btn {
    width: 100px;
    height: 100px;
    line-height: 5;
    font-size: 20px;
  }
}

.tpgallery-wrapper:hover .tpgallery__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition-delay: 0.3s;
}

.tpgallery-wrapper:hover .tpgallery-btn {
  opacity: 1;
  visibility: visible;
  color: #fff;
  transform: translateY(-50%) scale(1);
  transition-delay: 0.2s;
}

.tpgallery-wrapper {
  height: 100%;
}
.tpgallery-wrapper:hover .tp-gallery::before {
  opacity: 1;
}

.tp-gallery {
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: 100%;
}
.tp-gallery::before {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    0.76deg,
    #121212 19.4%,
    rgba(18, 18, 18, 0) 97.43%
  );
  opacity: 0;
  transition: 0.3s;
}

.tpgallery-bg {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
}

.tpgallery-2-img img {
  max-width: 100%;
}

.tpgallery-shape .tpgallery-shape-1 {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #121212;
  border-radius: 10px;
  top: 130px;
  left: 485px;
  display: block;
}
.tpgallery-shape .tpgallery-shape-2 {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #eb9309;
  border-radius: 10px;
  top: 115px;
  right: 880px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpgallery-shape .tpgallery-shape-2 {
    top: 18px;
    right: 890px;
  }
}
.tpgallery-shape .tpgallery-shape-3 {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #121212;
  border-radius: 10px;
  top: 30px;
  right: 405px;
}
.tpgallery-shape .tpgallery-shape-4 {
  position: absolute;
  width: 12px;
  height: 12px;
  bottom: 150px;
  background: #eb9309;
  right: 330px;
  border-radius: 10px;
}
.tpgallery-shape .tpgallery-shape-5 {
  position: absolute;
  background: #121212;
  width: 9px;
  height: 9px;
  border-radius: 10px;
  bottom: 105px;
  right: 860px;
}
.tpgallery-shape .tpgallery-shape-6 {
  position: absolute;
  background: #eb9309;
  height: 9px;
  width: 9px;
  border-radius: 10px;
  bottom: 135px;
  left: 275px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpgallery-shape .tpgallery-shape-6 {
    left: 180px;
  }
}

/*----------------------------------------*/
/*  14. TESTIMONIAL CSS START
/*----------------------------------------*/
.tptestimonial__content {
  padding-bottom: 78px;
  margin-bottom: 78px;
}
.tptestimonial__img {
  margin-bottom: 68px;
  filter: drop-shadow(0px 15px 40px rgba(237, 160, 168, 0.3));
  margin-top: -100px;
}
.tptestimonial__img.img-border img {
  /* border-bottom: 7px solid #ffffff; */
  border-radius: 50%;
}
.tptestimonial__img img {
  border-radius: 50%;
  width: 194px;
  height: 194px;
  object-fit: cover;
}
.tptestimonial__tlitle {
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  margin-bottom: 35px;
}
.tptestimonial__tlitle span {
  color: #eb9309;
}
@media (max-width: 575px) {
  .tptestimonial__tlitle {
    font-size: 27px;
  }
}
.tptestimonial__authur span {
  color: #ffffff;
  display: block;
  font-weight: 600;
  font-size: 26px;
  line-height: 36px;
  text-align: center;
  text-transform: capitalize;
}
.tptestimonial__authur p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: #969aab;
}

.shape1 {
  position: absolute;
  top: 84px;
  left: -70px;
}
@media (max-width: 575px) {
  .shape1 {
    left: -100px;
  }
}

.shape2 {
  position: absolute;
  right: -57px;
  bottom: 40px;
}
@media (max-width: 575px) {
  .shape2 {
    right: -100px;
  }
}

.testimonial-active .slick-list {
  overflow: visible;
}

.testimonial-active .slick-dots {
  position: absolute;
  text-align: center;
  bottom: 90px;
  left: 0;
  right: 0;
}

.testimonial-active .slick-dots li {
  display: inline-block;
  margin: 0 5px;
  line-height: 0;
}

.testimonial-active .slick-dots button {
  font-size: 0;
  height: 4px;
  width: 24px;
  background: #ffffff;
  padding: 0;
  border-radius: 5px;
}

.testimonial-active.dots-style .slick-dots button {
  height: 7px;
  width: 24px;
  border-radius: 2px;
}

.testimonial-active .slick-dots > li.slick-active button {
  background: #eb9309;
  border: #eb9309;
}

.testimonial-space {
  padding: 0 40px;
}
@media (max-width: 575px) {
  .testimonial-space {
    padding: 0;
  }
}

.testimonial-top-white-space-2 {
  margin-top: -100px;
}
.ghfg_ytr {
  background-color: rgb(24 69 46) !important;
}
.tptestimonial__avater {
  padding-top: 50px;
  padding-bottom: 282px;
  padding-left: 52px;
  padding-right: 52px;
  z-index: 2;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tptestimonial__avater {
    padding-bottom: 220px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tptestimonial__avater {
    padding-bottom: 0;
  }
}
@media (max-width: 575px) {
  .tptestimonial__avater {
    padding-left: 0;
    padding-right: 0;
  }
}
.tptestimonial__avater-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  margin-top: 38px;
  color: var(--tp-common-white);
}
.tptestimonial__avater-designation {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-common-white);
  margin-bottom: 37px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tptestimonial__avater {
    padding-bottom: 242px;
  }
}
.tptestimonial__avater-thumb img {
  border-radius: 50%;
}
.tptestimonial__content-3 p {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.8;
  text-align: center;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tptestimonial__content-3 p {
    font-size: 20px;
    padding-bottom: 35px;
  }
}

.testimonial-area-3 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 575px) {
  .testimonial-area-3 {
    padding-top: 0;
  }
}

.testimonial-bg {
  content: "";
  position: absolute;
  background: #121212;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  left: 0;
  z-index: -1;
}

.testimonial-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  margin: auto;
  z-index: 0;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial-thumb {
    left: 43%;
  }
}
.testimonial-thumb::before {
  position: absolute;
  background: #121212;
  width: 100%;
  height: 100%;
  top: 0;
  content: "";
  z-index: 1;
  opacity: 0.5;
}

.testimonial-active-3 .slick-list {
  overflow: visible;
}
.testimonial-active-3 .slick-dots {
  position: absolute;
  text-align: center;
  bottom: 150px;
  left: 0;
  right: 0;
}
.testimonial-active-3 .slick-dots li {
  display: inline-block;
  margin: 0 5px;
  line-height: 0;
}
.testimonial-active-3 .slick-dots li.slick-active button {
  background: #eb9309;
  transform: scale(1.9);
}
.testimonial-active-3 .slick-dots button {
  font-size: 0;
  width: 11px;
  height: 11px;
  background: #ffffff;
  padding: 0;
  border-radius: 50%;
}

.testimonial-slide-nav .slick-next {
  position: absolute;
  content: "";
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  width: 55px;
  height: 55px;
  top: 365px;
  right: 307px;
}
.testimonial-slide-nav .slick-next span {
  color: #eb9309;
  position: absolute;
  top: 12px;
  right: 26px;
}
.testimonial-slide-nav .slick-next:hover {
  background: #eb9309;
  border-color: #eb9309;
}
.testimonial-slide-nav .slick-next:hover span {
  color: #ffffff;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .testimonial-slide-nav .slick-next {
    right: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-slide-nav .slick-next {
    right: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .testimonial-slide-nav .slick-next {
    right: 10px;
  }
}
@media (max-width: 575px) {
  .testimonial-slide-nav .slick-next {
    top: 285px;
  }
}
.testimonial-slide-nav .slick-prev {
  position: absolute;
  content: "";
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  width: 55px;
  height: 55px;
  top: 365px;
  left: 307px;
}
.testimonial-slide-nav .slick-prev span {
  color: #eb9309;
  position: absolute;
  top: 12px;
}
.testimonial-slide-nav .slick-prev:hover {
  background: #eb9309;
  border-color: #eb9309;
}
.testimonial-slide-nav .slick-prev:hover span {
  color: #ffffff;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .testimonial-slide-nav .slick-prev {
    left: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-slide-nav .slick-prev {
    left: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .testimonial-slide-nav .slick-prev {
    left: 10px;
  }
}
@media (max-width: 575px) {
  .testimonial-slide-nav .slick-prev {
    top: 285px;
  }
}

/*----------------------------------------*/
/*  15. BRAND CSS START
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .brand-area {
    padding-top: 80px;
  }
}
@media (max-width: 575px) {
  .brand-area {
    padding-top: 100px;
  }
}

.brand-title {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: block;
}

.brand-title.has-before::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 5px;
  display: inline-block;
  background-color: var(--tp-theme-primary);
  border-radius: 50%;
}

.brand-title.has-after::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 5px;
  display: inline-block;
  background-color: var(--tp-theme-primary);
  border-radius: 50%;
}

/*----------------------------------------*/
/*  16. PORTFOLIO CSS START
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio-area {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio-area {
    padding-top: 140px;
  }
}
@media (max-width: 575px) {
  .portfolio-area {
    padding-top: 80px;
  }
}

.portfolio-slider .slick-list {
  margin-left: -15px;
  margin-right: -10px;
}

.portfolio-item {
  margin: 0px 10px;
}
.portfolio-item img {
  border-radius: 15px;
}

.portfolio-slider .slick-prev.slick-arrow i {
  background: #fff;
  color: #090909;
  position: absolute;
  z-index: 5;
  top: 415px;
  left: 603px;
  transition: 0.3s;
  height: 72px;
  width: 72px;
  border-radius: 50%;
  line-height: 4;
  font-size: 18px;
}
.portfolio-slider .slick-prev.slick-arrow i:hover {
  background: #eb9309;
  color: #fff;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .portfolio-slider .slick-prev.slick-arrow i {
    left: 450px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .portfolio-slider .slick-prev.slick-arrow i {
    left: 350px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio-slider .slick-prev.slick-arrow i {
    left: 245px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-slider .slick-prev.slick-arrow i {
    left: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .portfolio-slider .slick-prev.slick-arrow i {
    left: 15px;
  }
}

.portfolio-slider .slick-next.slick-arrow i {
  background: #fff;
  color: #090909;
  position: absolute;
  z-index: 5;
  top: 415px;
  right: 603px;
  transition: 0.3s;
  height: 72px;
  width: 72px;
  border-radius: 50%;
  line-height: 4;
  font-size: 18px;
}
.portfolio-slider .slick-next.slick-arrow i:hover {
  background: #eb9309;
  color: #fff;
}
@media only screen and (min-width: 1601px) and (max-width: 1850px) {
  .portfolio-slider .slick-next.slick-arrow i {
    right: 450px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .portfolio-slider .slick-next.slick-arrow i {
    right: 350px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio-slider .slick-next.slick-arrow i {
    right: 245px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-slider .slick-next.slick-arrow i {
    right: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .portfolio-slider .slick-next.slick-arrow i {
    right: 15px;
  }
}

.portfolio-btn {
  margin-top: 32px;
  margin-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .portfolio-btn {
    margin-bottom: 80px;
  }
}

.our-portfolio-wrapper {
  background: #f6f6f4;
  border-radius: 20px;
}
.our-portfolio-thumb {
  overflow: hidden;
  border-radius: 20px;
}
.our-portfolio-thumb img {
  border-radius: 20px;
  min-width: 100%;
}
.our-portfolio-thumb img:hover {
  transform: scale(1.05);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .our-portfolio-thumb img {
    max-width: 100%;
  }
}
.our-portfolio-content {
  padding: 40px 46px;
}
@media (max-width: 575px) {
  .our-portfolio-content {
    padding: 30px;
  }
}
.our-portfolio-content .portfolio-title {
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: #292930;
  margin-bottom: 30px;
}
.our-portfolio-content p {
  font-weight: 400;
  font-size: 18px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .our-portfolio-content p br {
    display: none;
  }
}
.our-portfolio-content .portfolio-title:hover {
  color: #eb9309;
}
.our-portfolio-btn a {
  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 17px 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  color: #121212;
  display: inline-block;
  transition: 0.3s;
}
@media (max-width: 575px) {
  .our-portfolio-btn a {
    padding: 17px 18px;
  }
}
.our-portfolio-btn a i {
  margin-left: 10px;
}
.our-portfolio-btn a:hover {
  background: var(--tp-theme-primary);
  color: var(--tp-common-white);
}
.our-portfolio-btn a:hover i {
  transform: translateX(5px);
}
.our-portfolio-pagination {
  margin-top: 40px;
}

.portfolio-details {
  margin-bottom: 32px;
}
.portfolio-details-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 14px;
  color: #121212;
  margin-bottom: 10px;
  display: block;
}
.portfolio-details p {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #666666;
}
.portfolio-details-wrapper p {
  font-weight: 400;
  font-size: 16px;
  color: #525258;
}
.portfolio-details-wrapper.portfolio-margin {
  margin-left: -23px;
}
@media (max-width: 575px) {
  .portfolio-details-wrapper.portfolio-margin {
    margin-left: 0;
  }
}
.portfolio-details-name {
  font-weight: 500;
  font-size: 18px;
  line-height: 14px;
  color: #03041c;
}
.portfolio-details-img {
  margin-top: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .portfolio-details-img {
    margin-top: 30px;
  }
}
.portfolio-details-img img {
  border-radius: 20px;
  max-width: 100%;
}
.portfolio-details-thumb {
  overflow: hidden;
  border-radius: 20px;
}
.portfolio-details-thumb img {
  border-radius: 20px;
  max-width: 100%;
  margin-top: 15px;
}

@media (max-width: 575px) {
  .portfolio-section .section-title br {
    display: none;
  }
}

@media (max-width: 575px) {
  .portfolio-details-area-2 {
    padding-top: 0px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .portfolio-details-area {
    padding-top: 60px;
  }
}

.portfolio-section .service-title {
  margin-bottom: 0;
}

.service-text.portfolio-detail {
  margin-bottom: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .service-text.portfolio-detail {
    margin-bottom: 40px;
    padding-left: 0;
    margin-top: 30px;
  }
}

/*----------------------------------------*/
/*  17. PROJECT CSS START
/*----------------------------------------*/
.tpproject-section__wrapper {
  position: relative;
  z-index: 1;
}
.tpproject-section__wrapper .sub-title {
  margin-bottom: 0;
  color: var(--tp-theme-2);
}
.tpproject-section__wrapper .section-title {
  margin-bottom: 30px;
  color: var(--tp-theme-2);
}
@media (max-width: 575px) {
  .tpproject-section__wrapper .section-title {
    font-size: 35px;
  }
}
.tpproject-section__wrapper .has-before::before {
  background: #121212;
}

.tpproject {
  position: relative;
}
.tpproject__thumb {
  position: absolute;
  left: 90%;
  top: -210px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpproject__thumb {
    left: 82%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpproject__thumb {
    left: 70%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpproject__thumb img {
    width: 370px;
  }
}
.tpproject__wrapper {
  border-bottom: 1px solid #ae6b02;
  padding: 46px 42px;
  transition: 0.3s ease;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpproject__wrapper {
    padding: 40px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpproject__wrapper {
    padding: 35px 30px;
  }
}
.tpproject__wrapper::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: var(--tp-theme-2);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: -1;
}
.tpproject__wrapper:hover {
  border-color: transparent;
}
.tpproject__wrapper:hover::after {
  visibility: visible;
  opacity: 1;
}
.tpproject__wrapper:hover .tpproject__title {
  color: #fff;
}
.tpproject__wrapper:hover .tpproject__thumb {
  opacity: 1;
  visibility: visible;
  top: -260px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpproject__wrapper:hover .tpproject__thumb {
    top: -200px;
  }
}
.tpproject__wrapper:hover .tpproject__icon a {
  color: var(--tp-common-white);
}
.tpproject__title {
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.01em;
  text-decoration: underline;
}
@media (max-width: 575px) {
  .tpproject__title {
    font-size: 28px;
  }
}
.tpproject__shape span {
  background: #fff;
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 12px;
}
.tpproject__shape .tpproject-shape1 {
  position: absolute;
  top: 130px;
  right: 107px;
}
.tpproject__shape .tpproject-shape2 {
  position: absolute;
  top: 265px;
  right: 770px;
}
.tpproject__shape .tpproject-shape3 {
  position: absolute;
  top: 195px;
  left: 148px;
}
.tpproject__shape .tpproject-shape4 {
  position: absolute;
  bottom: 196px;
  right: 64px;
}
.tpproject__shape .tpproject-shape5 {
  position: absolute;
  bottom: 190px;
  left: 205px;
}

.tpproject-bg {
  background-color: #eb9309;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-repeat: no-repeat;
}

.tpproject-btn {
  text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpproject-btn {
    text-align: start;
  }
}
.tpproject-btn .tp-btn-black:hover {
  background: #fff;
  color: #121212;
}

/*----------------------------------------*/
/*  18. MISSION CSS START
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .breadcrumb-area {
    padding-bottom: 160px;
  }
}

.our-mission-area {
  background-color: #f6f6f4;
  margin-bottom: 45px;
}
@media (max-width: 575px) {
  .our-mission-area {
    padding-top: 50px;
  }
}

.our-mission-tab .our-mission-tab-inner.tp-tab-menu {
  position: relative;
  margin-bottom: 122px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .our-mission-tab .our-mission-tab-inner.tp-tab-menu {
    margin-bottom: 60px;
  }
}
@media (max-width: 575px) {
  .our-mission-tab .our-mission-tab-inner.tp-tab-menu {
    margin-bottom: 40px;
  }
}
.our-mission-tab .our-mission-tab-inner .tp-tab-line {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  height: 4px;
  background-color: var(--tp-theme-primary);
  transition: 0.3s ease;
  z-index: 2;
}
.our-mission-tab .nav-tabs .nav-link {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666666;
  padding: 27px 85px;
  border-radius: 0;
  background: #fff;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .our-mission-tab .nav-tabs .nav-link {
    padding: 27px 66px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .our-mission-tab .nav-tabs .nav-link {
    padding: 25px 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .our-mission-tab .nav-tabs .nav-link {
    padding: 20px 28px;
  }
}
@media (max-width: 575px) {
  .our-mission-tab .nav-tabs .nav-link {
    padding: 20px 23px;
    margin-bottom: 5px;
    margin-right: 5px;
  }
}
.our-mission-tab .nav-tabs .nav-link::after {
  position: absolute;
  content: "";
  left: -1px;
  top: 0;
  width: calc(100% + 2px);
  height: 100%;
  background-color: #fff;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
.our-mission-tab .nav-tabs .nav-link.active {
  box-shadow: 0px 10px 10px rgba(21, 48, 73, 0.1);
}
.our-mission-tab .nav-tabs .nav-link.active::after {
  visibility: visible;
  opacity: 1;
}
.our-mission-tab .nav-tabs .nav-link::before {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 41px;
  background-color: #dfe3e9;
  z-index: -1;
}
@media (max-width: 575px) {
  .our-mission-tab .nav-tabs .nav-link::before {
    display: none;
  }
}
.our-mission-tab .nav-tabs .nav-link:first-child::after {
  left: 0;
}
.our-mission-tab .nav-tabs .nav-link:nth-last-child(2)::before {
  display: none;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .volunteers-area-4.about-foundation {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .volunteers-area-4.about-foundation {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .volunteers-area-4.about-foundation {
    padding-top: 100px;
    padding-bottom: 50px;
  }
}
@media (max-width: 575px) {
  .volunteers-area-4.about-foundation {
    padding-top: 95px;
  }
}

.volunteers-area-4 .volunteers-list.about-foundation ul {
  margin-bottom: 30px;
}

@media (max-width: 575px) {
  .volunteers-section-4.about-foundation p {
    font-size: 16px;
  }
}

.fact-wrap.about-foundation .section-title {
  margin-bottom: 16px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .our-mission-area {
    padding-top: 70px;
  }
}

.our-mission-tab-inner .border-position.active {
  box-shadow: 0px 10px 10px rgba(21, 48, 73, 0.1);
}

.our-mission-tab .nav-link {
  position: relative;
}

.our-mission-tab .nav-link:hover,
.our-mission-tab .nav-link.active {
  color: #171151;
}

.mission-box {
  padding: 15px;
  background: #fff;
  border-radius: 10px;
}

.bg-white-mission {
  background: #ffffff;
  border-radius: 10px;
}

.our-vission-wrapper {
  padding-left: 108px;
  padding-right: 86px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .our-vission-wrapper {
    padding-left: 88px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .our-vission-wrapper {
    padding-left: 20px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .our-vission-wrapper {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.our-vission-wrapper .section-title {
  font-weight: 800;
  font-size: 32px;
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: 38px;
  margin-top: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .our-vission-wrapper .section-title {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .our-vission-wrapper .section-title {
    margin-bottom: 20px;
    margin-top: 5px;
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .our-vission-wrapper .section-title {
    margin-bottom: 30px;
    margin-top: 25px;
    font-size: 25px;
  }
}
.our-vission-wrapper p {
  font-weight: 400;
  font-size: 15px;
  color: #666666;
  text-align: center;
}

.our-approch-img {
  margin-left: -40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .our-approch-img {
    margin-left: -76px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .our-approch-img {
    margin-left: 0px;
    margin-top: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .our-approch-img {
    margin-left: 0px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
.our-approch-img img {
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .our-approch-img img {
    max-width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .our-mission-img {
    justify-content: center;
    display: flex;
  }
}
.our-mission-img img {
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .our-mission-img img {
    max-width: 120%;
  }
}
@media (max-width: 575px) {
  .our-mission-img img {
    max-width: 100%;
  }
}

/*----------------------------------------*/
/*  19. DONATION CSS START
/*----------------------------------------*/
.donation-list-area {
  background: #f6f6f4;
}

.donation-card-box {
  margin-bottom: 40px;
}
.donation-card-box .tpcard__title {
  margin-bottom: 45px;
}

.donation-pagination .page-item {
  margin: 0 5px;
}

.donation-pagination ul li a:hover {
  background: #eb9309;
  color: #fff;
  border-color: #eb9309;
}

.donation-pagination .page-link {
  background: #fff;
  border-radius: 5px;
  color: #292930;
  height: 49px;
  width: 49px;
  line-height: 2.4;
  border: 1px solid #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  display: block;
  text-align: center;
  box-shadow: none;
}

.donation-pagination .page-item.active .page-link {
  background: #eb9309;
  border-color: #eb9309;
}

.donation-pagination.news-blog .page-item.active .page-link {
  background: #121212;
  border-color: #121212;
}

.donation-notice {
  position: relative;
  padding-top: 8px;
  margin-bottom: 60px;
}
.donation-notice span {
  font-weight: 600;
  font-size: 16px;
  color: #0d0d0d;
}
.donation-notice span svg {
  color: #f9a901;
  margin-right: 14px;
}
.donation-notice .notice {
  margin-bottom: -10px;
}
.donation-notice p {
  font-weight: 400;
  font-size: 16px;
  color: #a1a1a1;
  margin-bottom: -10px;
}
.donation-notice:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #f4f4f4;
  top: -10px;
}
.donation-notice::after {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #f4f4f4;
  bottom: -27px;
}

@media (max-width: 575px) {
  .right-padding {
    padding-left: 0;
  }
}

.donation-payment-title {
  font-weight: 800;
  font-size: 24px;
  line-height: 30px;
  color: #0d0d0d;
}
@media (max-width: 575px) {
  .donation-payment-check .form-check {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
.donation-payment-check .form-check-input {
  background: #f2f2f2;
  border: 1px solid #dadada;
  box-shadow: none;
  margin-top: 5px;
  width: 16px;
  height: 16px;
}
.donation-payment-check .form-check-input:checked {
  background: #fff;
  border: 4px solid #0084f8;
}
.donation-payment-check label {
  font-weight: 500;
  font-size: 16px;
  line-height: 170.23%;
  color: #001b36;
}
.donation-payment-check label:hover {
  cursor: pointer;
}

.donation-payment-method input {
  background: #fdfdfd;
  border: 1px solid #f1f1f1;
  box-shadow: 0px 10px 15px rgba(221, 221, 221, 0.15);
  border-radius: 143px;
  height: 60px;
  width: 220px;
  padding: 0 25px;
}
.donation-payment-method input::placeholder {
  font-weight: 600;
  font-size: 14px;
  line-height: 170.23%;
  color: #0d0d0d;
}
.donation-payment-method input:focus {
  border-color: #eb9309;
}
.donation-payment-method button {
  background: #fdfdfd;
  border: 1px solid #f1f1f1;
  border-radius: 143px;
  padding: 14px 30px;
  font-weight: 600;
  font-size: 14px;
  line-height: 170.23%;
  color: #a1a1a1;
  display: block;
  margin-right: 15px;
  transition: 0.3s;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .donation-payment-method button {
    margin-bottom: 15px;
  }
}
.donation-payment-method button:hover {
  background: #121212;
  border-color: #121212;
  color: #fff;
}

.donation-error-notification {
  padding-top: 30px;
}
.donation-error-notification i {
  color: #f05359;
  margin-right: 12px;
  font-size: 21px;
  margin-top: 4px;
}
.donation-error-notification span {
  font-weight: 400;
  font-size: 16px;
  line-height: 170.23%;
  color: #a1a1a1;
  display: flex;
  margin-bottom: 30px;
}

.donation-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

.donation-error-notification::before {
  position: absolute;
  content: "";
  background: #f4f4f4;
  width: 100%;
  height: 1px;
  top: 0px;
  left: 0;
}

.donation-error-notification::after {
  position: absolute;
  content: "";
  background: #f4f4f4;
  width: 100%;
  height: 1px;
  bottom: -28px;
  left: 0;
}

.donation-details-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #666666;
}
.donation-details-text .donation-payment-title {
  margin-bottom: 14px;
}

.sidebar__widget.donation-details {
  border-radius: 10px;
}

.sidebar__widget-title.donation-details {
  color: #0d0d0d;
  font-size: 20px;
  font-weight: 800;
}

.sidebar__widget-content.donation-details ul li a {
  border-radius: 5px;
  border: 1px solid #fff;
}
.sidebar__widget-content.donation-details ul li a:hover {
  border: 1px solid #e4e4e4;
}

.sidebar__widget-contact {
  background: #f6f6f4;
  border: 1px solid #f2f5fa;
  padding: 33px 28px;
  border-radius: 10px;
}

.sidebar__widget-contact input {
  border: none;
  background: #f6f6f4;
  border-bottom: 1px solid #e2e1df;
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 0;
}
.sidebar__widget-contact input:focus {
  border-bottom-color: #eb9309;
}
.sidebar__widget-contact input::placeholder {
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: #949392;
}

.sidebar__widget-title.donation-details.contact {
  margin-bottom: 15px;
}

.sidebar-btn .tp-btn {
  border-radius: 0;
  margin-top: 23px;
  padding: 15px 56px;
  border-radius: 10px;
}
.sidebar-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar-btn .tp-btn {
    padding: 15px 35px;
  }
}
@media (max-width: 575px) {
  .sidebar-btn .tp-btn {
    padding: 15px 45px;
  }
}

/*----------------------------------------*/
/*  20. BLOG CSS START
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpblog-area {
    padding-top: 80px;
  }
}
@media (max-width: 575px) {
  .tpblog-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

.tpblog .section-title {
  margin-bottom: 54px;
}
@media (max-width: 575px) {
  .tpblog .section-title {
    font-size: 35px;
  }
}

.tpblog__title:hover a {
  color: #eb9309;
}

.tpblog__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}
.tpblog__thumb img {
  width: 100%;
  border-radius: 15px 15px 0 0;
}
.tpblog__thumb img:hover {
  transform: scale(1.05);
}
.tpblog__thumb span {
  position: absolute;
  bottom: 20px;
  left: 40px;
  color: #fff;
  background: #eb9309;
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 5px;
  transition: 0.3s ease;
}
.tpblog__thumb span:hover {
  background: #fff;
  color: #121212;
}
.tpblog__content {
  padding: 40px 45px;
  border: 1px solid #f6f6f4;
  border-radius: 0 0 15px 15px;
}
.tpblog__content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #666666;
  margin-bottom: 25px;
}
@media (max-width: 575px) {
  .tpblog__content p {
    margin-bottom: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpblog__content {
    padding: 30px 30px;
  }
}
@media (max-width: 575px) {
  .tpblog__content {
    padding: 20px;
  }
}
.tpblog__title {
  font-weight: 700;
  font-size: 30px;
  line-height: 35px;
  color: #000000;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpblog__title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpblog__author {
    margin-top: 10px;
    margin-right: 10px;
  }
}
.tpblog__author img {
  margin-right: 9px;
  border-radius: 50%;
}
.tpblog__author span {
  font-weight: 600;
  font-size: 16px;
  color: #191b1e;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpblog__comments {
    margin-top: 10px;
  }
}
.tpblog__comments span {
  font-weight: 500;
  font-size: 16px;
  color: #a8a8a8;
  margin-right: 48px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpblog__comments span {
    margin-right: 24px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpblog__comments span {
    margin-right: 5px;
  }
}
@media (max-width: 575px) {
  .tpblog__comments span {
    margin-right: 25px;
  }
}
.tpblog__comments span i {
  font-weight: 400;
  font-size: 15px;
  color: #0d0d0d;
  margin-left: 5px;
}

.blog-details-thumb img {
  border-radius: 10px;
  max-width: 100%;
}
.blog-details-info {
  margin-top: 33px;
}
.blog-details-name {
  margin-right: 60px;
}
@media (max-width: 575px) {
  .blog-details-name {
    margin-right: 25px;
  }
}
.blog-details-name i {
  height: 14px;
  width: 14px;
  color: #eb9309;
  font-size: 14px;
  margin-right: 5px;
}
.blog-details-name span {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #666666;
}
.blog-details-date {
  margin-right: 60px;
}
@media (max-width: 575px) {
  .blog-details-date {
    margin-right: 25px;
  }
}
.blog-details-date i {
  height: 14px;
  width: 14px;
  color: #eb9309;
  font-size: 14px;
  margin-right: 5px;
}
.blog-details-date span {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #666666;
}
.blog-details-message i {
  height: 14px;
  width: 14px;
  color: #eb9309;
  font-size: 14px;
  margin-right: 5px;
}
.blog-details-message span {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #666666;
}
.blog-details-title {
  margin-top: 30px;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.3;
  margin-bottom: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-title {
    font-size: 34px;
  }
}
@media (max-width: 575px) {
  .blog-details-title {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .blog-details-title br {
    display: none;
  }
}
.blog-details-content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: #666666;
  margin-bottom: 24px;
}
.blog-details-content .details-title {
  margin-top: 42px;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 20px;
}
.blog-details-no-secret {
  padding-right: 56px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .blog-details-no-secret {
    padding-right: 0;
  }
}
.blog-details-no-secret .title {
  font-weight: 800;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 22px;
}
.blog-details-no-secret p {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #666666;
  margin-bottom: 24px;
}
.blog-details-no-secret ul {
  list-style: none;
}
.blog-details-no-secret ul li {
  font-weight: 500;
  font-size: 15px;
  color: #666666;
}
.blog-details-no-secret ul li span {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #eb9309;
  margin-right: 20px;
}

.no-secret-thumb img {
  max-width: 100%;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tagcloud {
    margin-bottom: 20px;
  }
}
.tagcloud span {
  font-family: "Playfair Display";
  font-weight: 800;
  font-size: 28px;
  line-height: 30px;
  margin-right: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tagcloud span {
    margin-right: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .tagcloud span {
    margin-right: 5px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tagcloud span {
    margin-right: 5px;
  }
}
.tagcloud a {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #8a879f;
  margin-right: 8px;
  background: #f6f6f4;
  padding: 4px 25px;
  border-radius: 5px;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .tagcloud a {
    padding: 4px 11px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tagcloud a {
    margin-bottom: 15px;
  }
}
.tagcloud a:hover {
  background: #eb9309;
  color: white;
}

.postbox__share span {
  font-size: 28px;
  font-weight: 800;
  font-family: "Playfair Display";
  margin-right: 20px;
}
.postbox__share .linkedin {
  font-weight: 400;
  font-size: 15px;
  color: #0072ac;
  margin-right: 20px;
}
.postbox__share .pinterest {
  font-weight: 400;
  font-size: 15px;
  color: #da0021;
  margin-right: 20px;
}
.postbox__share .facebook {
  font-weight: 400;
  font-size: 15px;
  color: #0072ac;
  margin-right: 20px;
}
.postbox__share .twitter {
  font-weight: 400;
  font-size: 15px;
  color: #3ac4ff;
}
.postbox__more-navigation {
  margin-top: 50px;
}
.postbox__more-right .postbox__more-content span {
  margin-right: 20px;
}
.postbox__more-icon h4 {
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 25px;
}
.postbox__more-icon h4:hover {
  color: #eb9309;
}
.postbox__more-content {
  overflow: hidden;
}
.postbox__more-content span {
  font-weight: 500;
  font-size: 16px;
  margin-left: 25px;
}
.postbox__more-content span:hover {
  color: #eb9309;
}

.blog-details-content-thumb img {
  max-width: 100%;
  margin-bottom: 75px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .blog-details-content-thumb img {
    margin-bottom: 0;
  }
}

.tag-box {
  position: relative;
  padding-top: 22px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tag-box {
    margin-top: 40px;
  }
}
.tag-box::before {
  content: "";
  position: absolute;
  background: #eceef3;
  height: 1px;
  width: 850px;
  top: -15px;
  left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tag-box::before {
    width: 740px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tag-box::before {
    width: 615px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tag-box::before {
    width: 695px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tag-box::before {
    width: 515px;
  }
}
@media (max-width: 575px) {
  .tag-box::before {
    width: 320px;
  }
}
.tag-box::after {
  content: "";
  position: absolute;
  background: #eceef3;
  height: 1px;
  width: 850px;
  bottom: -40px;
  left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tag-box::after {
    width: 740px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tag-box::after {
    width: 615px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tag-box::after {
    width: 695px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tag-box::after {
    width: 515px;
  }
}
@media (max-width: 575px) {
  .tag-box::after {
    width: 320px;
  }
}

.postbox__comment {
  margin-bottom: 40px;
  padding-bottom: 46px;
}
.postbox__comment ul li {
  list-style: none;
}
.postbox__comment-title {
  margin-top: 38px;
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 40px;
  color: #121212;
  padding-top: 40px;
}
.postbox__comment-name {
  margin-left: 30px;
}
.postbox__comment-name h3 {
  font-weight: 500;
  font-size: 16px;
  font-family: "Outfit";
  color: #121212;
  margin-bottom: 2px;
}
.postbox__comment-name .post-meta {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #8a879f;
  line-height: 1.1;
  text-transform: uppercase;
}
.postbox__comment-name p {
  font-weight: 400;
  font-size: 14px;
  color: #8a879f;
  margin-top: 13px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .postbox__comment-name p br {
    display: none;
  }
}
.postbox__comment-reply a::before {
  content: "\f122";
  font-family: "Font Awesome 5 Pro";
  top: 22px;
  right: 230px;
  position: absolute;
  font-weight: 300;
  font-size: 20px;
  color: #171151;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__comment-reply a::before {
    right: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__comment-reply a::before {
    right: 110px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__comment-reply a::before {
    right: 60px;
  }
}
@media (max-width: 575px) {
  .postbox__comment-reply a::before {
    right: 20px;
  }
}
.postbox__comment ul.children {
  margin-left: 100px;
  margin-top: 54px;
}
@media (max-width: 575px) {
  .postbox__comment ul.children {
    margin-left: 0;
    margin-top: 0;
  }
}
.postbox__comment ul.children .postbox__comment-reply a::before {
  right: 130px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__comment ul.children .postbox__comment-reply a::before {
    right: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__comment ul.children .postbox__comment-reply a::before {
    right: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__comment ul.children .postbox__comment-reply a::before {
    right: 30px;
  }
}
@media (max-width: 575px) {
  .postbox__comment ul.children .postbox__comment-reply a::before {
    right: 20px;
  }
}
.postbox__comment-text {
  margin-top: 13px;
}
.postbox__comment::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 848px;
  top: 0;
  background: #eceef3;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__comment::before {
    width: 740px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__comment::before {
    width: 615px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__comment::before {
    width: 695px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__comment::before {
    width: 515px;
  }
}
@media (max-width: 575px) {
  .postbox__comment::before {
    width: 320px;
  }
}
.postbox__comment::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 848px;
  bottom: 0;
  background: #eceef3;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__comment::after {
    width: 740px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__comment::after {
    width: 615px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__comment::after {
    width: 695px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__comment::after {
    width: 515px;
  }
}
@media (max-width: 575px) {
  .postbox__comment::after {
    width: 320px;
  }
}

.postbox-form-box .post-form .input,
.postbox-form-box .post-form .textarea {
  width: 100%;
  height: 65px;
  padding: 0 18px;
  border: 2px solid transparent;
  background: #f6f6f4;
  outline: none;
  border-radius: 5px;
  resize: none;
}
.postbox-form-box .post-form .input:focus,
.postbox-form-box .post-form .textarea:focus {
  border-color: #eb9309;
}
.postbox-form-box .post-form .input::placeholder,
.postbox-form-box .post-form .textarea::placeholder {
  color: #666666;
}
.postbox-form-box .post-form .textarea {
  height: 160px;
  padding: 20px 18px;
}
.postbox-form-box .post-form .contact-input {
  margin-bottom: 18px;
}
.postbox-form-box .post-form-title {
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 16px;
  color: #121212;
}
.postbox-form-box .post-form-btn button {
  padding: 14px 38px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .postbox-form-box .post-form-btn button {
    margin-bottom: 30px;
  }
}
.postbox-form-box .post-form-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}
.postbox-form-box p {
  font-weight: 400;
  font-size: 16px;
  color: #8a879f;
  margin-bottom: 60px;
}

.blog-details__search-box {
  background: #f6f6f4;
  border: 1px solid #f2f5fa;
  padding: 40px 30px;
  border-radius: 10px;
}
.blog-details__search-box h3 {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 20px;
}
.blog-details__search-box .search-form input {
  height: 61px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #f2f4f6;
  padding: 20px;
  padding-right: 50px;
}
.blog-details__search-box .search-form input:focus {
  border-color: #eb9309;
}
.blog-details__search-box .search-form input::placeholder {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: #8a879f;
}
.blog-details__search-box .search-form button {
  position: absolute;
  right: 30px;
  top: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #030a39;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .news-blog-right-wrapper {
    padding-left: 0;
    margin-top: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .news-blog-details-area .left {
    padding-bottom: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .blog-details-items {
    padding-bottom: 40px;
  }
}

.sidebar__widget {
  background: #f6f6f4;
  border: 1px solid #f2f5fa;
  padding: 33px 35px 25px 28px;
  border-radius: 10px;
}
.sidebar__widget-title {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 20px;
}
.sidebar__widget-content ul li {
  list-style: none;
  margin-bottom: 15px;
}
.sidebar__widget-content ul li a {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a879f;
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 9px 17px;
  display: inline-block;
  transition: 0.3s;
}
.sidebar__widget-content ul li a span {
  float: right;
}
.sidebar__widget-content ul li a:hover {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.04);
  color: #121212;
}
.sidebar__widget.sidebar-pages {
  background: #f6f6f4;
  border: 1px solid #f2f5fa;
  padding: 34px 42px 21px 47px;
}
.sidebar__widget.sidebar-pages ul li {
  list-style: none;
  margin-bottom: 0px;
}
.sidebar__widget.sidebar-pages ul li:hover a {
  color: #121212;
  box-shadow: none;
}
.sidebar__widget.sidebar-pages ul li a {
  background: none;
  padding-left: 0;
}
.sidebar__widget.sidebar-pages ul li a i {
  float: right;
  margin-top: 3px;
}

.rc__post-thumb {
  overflow: hidden;
  margin-right: 20px;
  border-radius: 6px;
}
.rc__post-thumb img {
  border-radius: 6px;
}
.rc__post-thumb img:hover {
  transform: scale(1.05);
}
.rc__post-content span {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a879f;
}
.rc__post-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #141515;
  font-family: "Outfit";
}
.rc__post-title a:hover {
  color: #eb9309;
}

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

.sidebar__post {
  margin-bottom: 20px;
}

.side__tagcloud {
  margin-top: 30px;
}
.side__tagcloud a {
  background: #fff;
  padding: 2px 27px;
  margin-bottom: 10px;
  display: inline-block;
  text-transform: uppercase;
  margin-right: 11px;
  font-weight: 600;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  color: #8a879f;
  transition: 0.3s;
  border-radius: 5px;
}
.side__tagcloud a:hover {
  background: #eb9309;
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .blog-details-area {
    padding-top: 150px;
  }
}

.news-blog-btn .tp-btn:hover {
  background: #121212;
  color: #fff;
}

.blog-details-name.news-blog i {
  color: #eb9309;
}

.blog-details-date.news-blog i {
  color: #eb9309;
}

.blog-details-message.news-blog i {
  color: #eb9309;
}

.blog-details-title.news-blog {
  margin-top: 16px;
  margin-bottom: 12px;
}
.blog-details-title.news-blog a:hover {
  color: #eb9309;
}

/*----------------------------------------*/
/*  21. CONTACT CSS START
/*----------------------------------------*/
.contact-form-box .contact-form {
  background: #f6f6f4;
  padding: 85px 100px 78px 100px;
  border-radius: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-form-box .contact-form {
    padding: 85px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .contact-form-box .contact-form {
    padding: 50px;
  }
}
@media (max-width: 575px) {
  .contact-form-box .contact-form {
    padding: 25px;
  }
}
.contact-form-box .contact-form .input,
.contact-form-box .contact-form .textarea {
  width: 100%;
  height: 65px;
  padding: 0 18px;
  border: 2px solid transparent;
  background: #ffffff;
  outline: none;
  resize: none;
  border-radius: 10px;
}
.contact-form-box .contact-form .input::placeholder,
.contact-form-box .contact-form .textarea::placeholder {
  color: #747474;
}
.contact-form-box .contact-form .input:focus,
.contact-form-box .contact-form .textarea:focus {
  border-color: #eb9309;
}
.contact-form-box .contact-form .textarea {
  height: 160px;
  padding: 20px 18px;
}
.contact-form-box .contact-form .contact-input {
  margin-bottom: 18px;
}
.contact-form-box-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #121212;
  padding-top: 100px;
  margin-bottom: 35px;
}
.contact-form-title {
  font-weight: 800;
  font-size: 32px;
  line-height: 24px;
  letter-spacing: -0.04em;
  margin-bottom: 38px;
}
.contact-form-btn button {
  padding: 12px 48px;
}
.contact-form-btn button:hover {
  background: #121212;
  color: #fff;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact-form-btn button {
    padding: 12px 32px;
  }
}
@media (max-width: 575px) {
  .contact-form-btn button {
    padding: 12px 30px;
  }
}

@media (max-width: 575px) {
  .tp-contact-info {
    margin-top: 25px;
  }
}

.contact-check {
  margin-bottom: 24px;
}
.contact-check .check-input {
  background: transparent;
  border: 1px solid #d9d9de;
  box-shadow: none;
  display: block;
  background: transparent;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
@media (max-width: 575px) {
  .contact-check .check-input {
    margin-right: 0;
  }
}
.contact-check .check-input:checked {
  background-color: #eb9309;
  border-color: #eb9309;
}
.contact-check .check-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 12px;
  color: #666666;
}

.tp-contact-info .call {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: #666666;
  display: block;
}
.tp-contact-info .mail {
  font-weight: 500;
  font-size: 18px;
  color: #121212;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 40px;
  transition: 0.3s;
}
.tp-contact-info .maila:hover {
  color: #eb9309;
}
.tp-contact-info a {
  margin-top: 5px;
  font-weight: 500;
  font-size: 16px;
  color: #121212;
  display: inline-block;
}
.tp-contact-info a i {
  margin-right: 5px;
}
.tp-contact-info a:hover {
  color: #eb9309;
}

.contact-us-wrapper {
  padding: 58px 80px;
  border: 1px solid #eaeaef;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-us-wrapper {
    padding: 58px 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-us-wrapper {
    padding: 30px;
  }
}
@media (max-width: 575px) {
  .contact-us-wrapper {
    padding: 40px 30px;
  }
}
.contact-us-wrapper-title {
  font-weight: 800;
  font-size: 22px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #000000;
  margin-bottom: 45px;
}
.contact-us-wrapper-title::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 270px;
  background: #eaeaef;
  top: 105px;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-us-wrapper-title::before {
    width: 175px;
    top: 80px;
  }
}
@media (max-width: 575px) {
  .contact-us-wrapper-title::before {
    width: 270px;
    top: 80px;
  }
}
.contact-us-wrapper a {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #525258;
}
.contact-us-wrapper a:hover {
  color: var(--tp-theme-primary);
}
.contact-us-btn a {
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #03041c;
  padding: 14px 50px;
  border: 1px solid #eaeaef;
  margin-top: 12px;
  display: inline-block;
  transition: 0.3s;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-us-btn a {
    padding: 14px 35px;
  }
}
.contact-us-btn a:hover {
  background: #121212;
  color: #fff;
}

/*----------------------------------------*/
/*  22. FAQ CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .faq-accordion-area {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.tp-custom-accordion .accordion-items:not(.collapsed) {
  background: #f6f6f4;
  border: 1px solid #f5f5f5;
  border-radius: 10px;
  margin-bottom: 20px;
}
.tp-custom-accordion .accordion-buttons {
  position: relative;
  width: 100%;
  font-family: "Outfit";
  text-align: left;
  font-weight: 500;
  font-size: 26px;
  line-height: 30px;
  color: #292930;
  padding: 40px 45px;
  border-radius: 10px 10px 0 0;
}
@media (max-width: 575px) {
  .tp-custom-accordion .accordion-buttons {
    font-size: 17px;
    padding: 28px 20px;
  }
}
.tp-custom-accordion .accordion-buttons::after {
  position: absolute;
  content: "\f063";
  font-family: "Font Awesome 5 Pro";
  background-image: none;
  top: 40px;
  right: 45px;
  width: auto;
  height: auto;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.05em;
  color: #121212;
}
@media (max-width: 575px) {
  .tp-custom-accordion .accordion-buttons::after {
    top: 30px;
    right: 18px;
  }
}
.tp-custom-accordion .accordion-buttons.collapsed {
  background-color: var(--tp-common-white);
}
.tp-custom-accordion .accordion-buttons.collapsed::after {
  color: #b8bcc8;
  content: "\f062";
}
.tp-custom-accordion .collapsed {
  border-radius: 10px 10px 10px 10px;
}
.tp-custom-accordion .accordion-body {
  padding: 20px 45px 37px;
  position: relative;
  z-index: 1;
  border-radius: 0 0 10px 10px;
  font-family: "Outfit";
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #666666;
}
@media (max-width: 575px) {
  .tp-custom-accordion .accordion-body {
    padding: 20px 25px;
  }
}
.tp-custom-accordion .accordion-body::before {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #ecedf3;
  top: 0;
  left: 45px;
  right: 45px;
}

.faq-accordion-border .accordion-items {
  background-color: #fff;
  border: 1px solid #f5f5f5;
  border-radius: 10px;
}

/*----------------------------------------*/
/*  23. FOOTER CSS START
/*----------------------------------------*/
.tpborder-bottom {
  border-bottom: 1px solid #2d2d2d;
}

@media (max-width: 575px) {
  .footer-social-area {
    padding-top: 50px;
  }
}

@media (max-width: 575px) {
  .tpfooter__social {
    text-align: left;
  }
}
.tpfooter__social a {
  color: #ffffff;
  border: 2px solid rgba(247, 247, 247, 0.15);
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 30px;
  text-align: center;
  line-height: 46px;
  font-size: 14px;
  margin-right: 8px;
  transition: 0.3s;
}
.tpfooter__social a:hover {
  background: #eb9309;
  color: #fff;
}
@media (max-width: 575px) {
  .tpfooter__social a {
    margin-bottom: 10px;
  }
}

.tpfooter-widget__title {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 28px;
}
.tpfooter-widget li {
  list-style: none;
}
.tpfooter-widget a {
  font-weight: 400;
  font-size: 15px;
  line-height: 31px;
  color: #969aab;
}
.tpfooter-widget a:hover {
  color: #fff;
}

.tpfooter-widget.tp-footer-col-2 {
  margin-left: -58px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 575px) {
  .tpfooter-widget.tp-footer-col-2 {
    margin-left: 0;
  }
}
.tpfooter-widget.tp-footer-col-3 {
  margin-left: -115px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpfooter-widget.tp-footer-col-3 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpfooter-widget.tp-footer-col-3 {
    margin-top: 50px;
  }
}
.tpfooter-widget.tp-footer-col-4 {
  margin-left: -70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tpfooter-widget.tp-footer-col-4 {
    margin-left: 0;
    margin-top: 50px;
  }
}

.tpfooter-subscribe input {
  height: 55px;
  width: 100%;
  background: #1e1e1e;
  border: 0;
  padding: 0 25px;
  padding-right: 170px;
  color: #fff;
  border-radius: 6px;
}
.tpfooter-subscribe input::placeholder {
  color: #fff;
}
.tpfooter-subscribe button {
  position: absolute;
  background: #eb9309;
  color: #fff;
  right: 0;
  top: 0;
  height: 100%;
  padding: 20px 40px;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0 6px 6px 0px;
}
.tpfooter-subscribe button:hover {
  background: #fff;
  color: #121212;
}

.tp-check-box label {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #969aab;
}
.tp-check-box input {
  border: 0;
  background: #484848;
  height: 14px;
  width: 14px;
}
.tp-check-box .form-check-input {
  margin-top: 7px;
  box-shadow: none;
  border-radius: 3px;
}
.tp-check-box .form-check-input:checked {
  background-color: #eb9309;
  box-shadow: none;
}

.tp-copyright p {
  font-weight: 500;
  font-size: 15px;
  line-height: 23px;
  margin: 0;
  color: #ffffff;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .tp-backtop {
    margin-top: 30px;
  }
}
.tp-backtop span {
  margin-right: 12px;
  font-weight: 500;
  font-size: 15px;
  line-height: 23px;
  text-transform: uppercase;
  color: #ffffff;
}
.tp-backtop i {
  width: 42px;
  height: 42px;
  display: inline-block;
  color: #eb9309;
  border-bottom: 2px solid #eb9309;
  border-radius: 100%;
  line-height: 2;
  text-align: center;
  font-size: 20px;
  border-left: 2px solid;
}

/*# sourceMappingURL=main.css.map */