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

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Common Classes
		1.3 Default Spacing

	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Back to top
		2.2 Theme Settings
		2.3 Buttons
		2.4 Animations
		2.5 Preloader
		2.6 Background 
		2.7 Carousel
		2.8 Nice Select
		2.9 Pagination
		2.10 Offcanvas
		2.11 Breadcrumb
		2.12 Accordion
		2.13 Tab
		2.14 Modal
		2.15 Section Title
		2.16 Search
		2.17 Hotspot
		2.18 Ragne Slider

	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1
		3.2 Header Style 2
		3.3 Header Style 3
		3.4 Header Style 4
		3.5 Header Style 5
		3.6 Header Style 6
		3.7 Header Style 7
		3.9 Header Style 9
		3.10 Header Style 10
		3.11 Header Style 10


    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main menu css

	---------------------------------
	05. BLOG CSS
	---------------------------------
	    5.1 blog css start
		5.2 Postbox css
		5.3 Recent Post css
		5.4 Sidebar css

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer Style 1
		6.2 Footer Style 2
		6.3 Footer Style 3
		6.4 Footer Style 4
		6.5 Footer Style 5
		6.6 Footer Style 6


	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 about css start 
		7.2 award css start 
		7.3 brand css start
		7.4 cart css start 
		7.5 checkout css start
		7.6 contact css start 
		7.7 cta css start 
		7.8 error css start 
		7.9 funfact css start
		7.10 gallery css start 
		7.11 Hero css start 
		7.12 instagram css start 
		7.13 liko-dark css start 
		7.14 Login CSS 
		7.15 order css start 
		7.16 price css start 
		7.17 Profile CSS 
		7.18 project css start
		7.19 service css start
		7.20 shop css start 
		7.21 social css start 
		7.22 team css start 
		7.23 testimonial css start 
		7.24 tp custom css 
		7.25 video css start



**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;200;300;400;500;600;700;800;900&family=Marcellus&family=Syne:wght@400;500;600;700;800&family=Aladin&display=swap");

.tp-product-tab-2 .nav-tabs .nav-link .tp-product-tab-tooltip,
.tp-tab-line,
.tp-offcanvas-area,
.tp-offcanvas-social ul li a,
.tp-offcanvas-2-left,
.tp-offcanvas-2-right,
.tp-offcanvas-2-close,
.tp-offcanvas-2-close-btn .text,
.tp-offcanvas-2-close-btn .text span,
.tpoffcanvas__logo,
.tpoffcanvas__right-info,
.tpoffcanvas__social-link ul li a::before,
.tp-swiper-dot .swiper-pagination-bullet,
.tp-swiper-dot-border .swiper-pagination-bullet,
.tp-swiper-scrollbar,
.back-to-top-wrapper,
a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.tp-hotspot svg,
.tp-pagination ul li a svg,
.tp-pagination ul li span svg,
.tp-swiper-arrow button svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.tp-offcanvas-2-close-btn {
  font-family: var(--tp-ff-dmsans);
}

/* transform */
.tp-product-tab-2 .nav-tabs .nav-link:not(:first-child)::after {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

@font-face {
  font-family: "gallery_modernregular";
  src: url("../fonts/gallerymodern-webfont.woff2") format("woff2"), url("../fonts/gallerymodern-webfont.woff") format("woff"), url("../fonts/gallerymodern-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'Syne', sans-serif;
  --tp-ff-heading: 'Syne', sans-serif;
  --tp-ff-p: 'Syne', sans-serif;
  --tp-ff-syne: 'Syne', sans-serif;
  --tp-ff-gallery: 'gallery_modernregular', sans-serif;
  --tp-ff-shoulders: 'Big Shoulders Display', cursive;
  --tp-ff-marcellus: 'Marcellus', sans-serif;
  --tp-ff-aladin: 'Aladin', system-ui;
  --tp-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tp-common-white: #F5F7F5;
  --tp-common-white-solid: #fff;
  --tp-common-black: #1E1E1E;
  --tp-common-black-2: #1E1E1E;
  --tp-common-black-3: #141414;
  --tp-common-dark: #121212;
  --tp-common-orange: #EB5939;
  --tp-grey-1: #262626;
  --tp-grey-2: #F4F4F4;
  --tp-grey-3: #5D5D63;
  --tp-grey-4: #F7F7F7;
  --tp-text-body: #5D5D63;
  --tp-theme-1: #336EF9;
  --tp-border-1: #EAEAEB;
}

@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1200px;
  }

  .container-1630 {
    max-width: 1630px;
  }

  .container-1400 {
    max-width: 1400px;
  }

  .container-1480 {
    max-width: 1480px;
  }

  .container-1740 {
    max-width: 1740px;
  }

  .container-1770 {
    max-width: 1770px;
  }

  .container-1330 {
    max-width: 1330px;
  }

  .container-1380 {
    max-width: 1380px;
  }

  .container-1800 {
    max-width: 1800px;
  }

  .container-1300 {
    max-width: 1300px;
  }

  .container-1720 {
    max-width: 1720px;
  }

  .container-1480 {
    max-width: 1480px;
  }

  .container-1430 {
    max-width: 1430px;
  }

  .container-1870 {
    max-width: 1870px;
  }

  .container-1775 {
    max-width: 1775px;
  }

  .container-1840 {
    max-width: 1840px;
  }

  .container-1650 {
    max-width: 1650px;
  }

  .container-1560 {
    max-width: 1560px;
  }

  .container-1500 {
    max-width: 1500px;
  }

  .container-1530 {
    max-width: 1530px;
  }

  .container-1550 {
    max-width: 1550px;
  }
}

.container-1685 {
  max-width: 1685px;
}

@media only screen and (min-width: 1400px) and (max-width: 1920px) {
  .container-1685 {
    padding: 0px 100px;
  }
}

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

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--tp-ff-body);
  font-size: 14px;
  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-common-black);
  margin-top: 0px;
  font-weight: 500;
  line-height: 1.2;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

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

.table {
  --bs-table-bg: unset;
}

p {
  font-family: var(--tp-ff-p);
  color: var(--tp-text-body);
  margin-bottom: 15px;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

img {
  max-width: 100%;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

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

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

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

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
  outline: none;
  background-color: #fff;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 14px;
  color: var(--tp-common-black);
  padding-left: 26px;
  padding-right: 26px;
  border: 1px solid #E0E2E3;
}

input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #95999D;
}

input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: #95999D;
}

input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder {
  /* Firefox 4-18 */
  color: #95999D;
}

input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #95999D;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder {
  /* MODERN BROWSER */
  color: #95999D;
}

[dir=rtl] input[type=text],
[dir=rtl] input[type=email],
[dir=rtl] input[type=tel],
[dir=rtl] input[type=number],
[dir=rtl] input[type=password],
[dir=rtl] input[type=url],
[dir=rtl] textarea {
  text-align: right;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--tp-common-black);
}

input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

textarea {
  line-height: 1.4;
  padding-top: 17px;
  padding-bottom: 17px;
}

textarea:focus {
  border-color: var(--tp-common-black);
}

textarea:focus::placeholder {
  opacity: 0;
}

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: 14px;
  opacity: 1;
}

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

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

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

.z-index-3 {
  position: relative;
  z-index: 3;
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

.z-index-5 {
  position: relative;
  z-index: 5;
}

.z-index-6 {
  position: relative;
  z-index: 6;
}

.z-index-7 {
  position: relative;
  z-index: 7;
}

.z-index-8 {
  position: relative;
  z-index: 8;
}

.z-index-9 {
  position: relative;
  z-index: 9;
}

.gx-5 {
  --bs-gutter-x: 5px;
}

.gx-10 {
  --bs-gutter-x: 10px;
}

.gx-15 {
  --bs-gutter-x: 15px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.gx-25 {
  --bs-gutter-x: 25px;
}

.gx-30 {
  --bs-gutter-x: 30px;
}

.gx-35 {
  --bs-gutter-x: 35px;
}

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

.gx-45 {
  --bs-gutter-x: 45px;
}

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

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .gx-50 {
    --bs-gutter-x: 30px;
  }
}

.gx-60 {
  --bs-gutter-x: 60px;
}

.gx-75 {
  --bs-gutter-x: 75px;
}

.gx-80 {
  --bs-gutter-x: 80px;
}

.gx-140 {
  --bs-gutter-x: 140px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gx-140 {
    --bs-gutter-x: 40px;
  }
}

.gx-90 {
  --bs-gutter-x: 90px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .gx-90 {
    --bs-gutter-x: 50px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gx-90 {
    --bs-gutter-x: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .gx-90 {
    --bs-gutter-x: 50px;
  }
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.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;
}

.demo {
  -webkit-transition: color 0.3s linear;
  -moz-transition: color 0.3s linear;
  -ms-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  transition: color 0.3s linear;
  -webkit-transition: color 0.3s linear, transform 0.2s ease;
  -moz-transition: color 0.3s linear, transform 0.2s ease;
  -ms-transition: color 0.3s linear, transform 0.2s ease;
  -o-transition: color 0.3s linear, transform 0.2s ease;
  transition: color 0.3s linear, transform 0.2s ease;
}

[dir=rtl] .demo {
  margin-left: 0;
  margin-right: 15px;
}

div.demo img {
  margin-left: 10px;
}

[tp-theme=tp-theme-dark] .demo {
  color: yellow;
}

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

.body-overlay:hover {
  cursor: url("../img/icon/cross-out.png"), pointer;
}

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

/* dropcap */
.tp-dropcap::first-letter {
  padding-left: 100px;
}

.class {
  stroke-dasharray: 189px, 191px;
  stroke-dashoffset: 0px;
}

/* gutter for x axis */
.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: 767px) {
  .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);
}

/* gutter for x axis */
.tp-gx-30 {
  --bs-gutter-x: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-gx-30 {
    --bs-gutter-x: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-gx-30 {
    --bs-gutter-x: 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-gx-30 {
    --bs-gutter-x: 15px;
  }
}

@media (max-width: 767px) {
  .tp-gx-30 {
    --bs-gutter-x: 10px;
  }
}

.tp-gx-30 [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);
}

/* gutter for x axis */
.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: 30px;
  }
}

@media (max-width: 767px) {
  .tp-gx-40 {
    --bs-gutter-x: 15px;
  }
}

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

@media (min-width: 1400px) {
  .container-large {
    max-width: 1325px;
  }
}

/*---------------------------------
    1.3 Default Spacing
---------------------------------*/
/*----------------------------------------*/
/*  2.1 Back to top
/*----------------------------------------*/
.back-to-top-wrapper {
  position: fixed;
  right: 50px;
  bottom: 0;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .back-to-top-wrapper {
    right: 20px;
    bottom: 20px;
  }
}

.back-to-top-wrapper.back-to-top-btn-show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

.back-to-top-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: var(--tp-common-white);
  box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
  color: var(--tp-common-black);
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.back-to-top-btn svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.back-to-top-btn:hover {
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
}

/*----------------------------------------*/
/*  2.2 Theme Settings
/*----------------------------------------*/
.tp-theme-settings-area {
  position: fixed;
  top: 50%;
  right: 0;
  width: 240px;
  background-color: #fff;
  border: 1px solid #EAEAEF;
  -webkit-transform: translateY(-50%) translateX(100%);
  -moz-transform: translateY(-50%) translateX(100%);
  -ms-transform: translateY(-50%) translateX(100%);
  -o-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
  z-index: 991;
  direction: ltr;
  border-bottom-left-radius: 4px;
}

.tp-theme-settings-area.settings-opened {
  -webkit-transform: translateY(-50%) translateX(0%);
  -moz-transform: translateY(-50%) translateX(0%);
  -ms-transform: translateY(-50%) translateX(0%);
  -o-transform: translateY(-50%) translateX(0%);
  transform: translateY(-50%) translateX(0%);
}

.tp-theme-settings-area.settings-opened .tp-theme-settings-gear {
  opacity: 0;
}

.tp-theme-settings-area.settings-opened .tp-theme-settings-close {
  opacity: 1;
}

.tp-theme-settings-open {
  position: absolute;
  top: -1px;
  right: 100%;
}

.tp-theme-settings-open button {
  background-color: var(--tp-common-white);
  border: 1px solid #EAEAEF;
  border-left: 0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  color: var(--tp-common-black);
  position: relative;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.tp-theme-settings-gear {
  display: inline-block;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.tp-theme-settings-close {
  display: inline-block;
  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%);
  opacity: 0;
}

.tp-theme-header-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
}

.tp-theme-wrapper {
  padding: 20px 30px 30px;
}

.tp-theme-toggle {
  text-align: center;
}

.tp-theme-toggle-main {
  display: inline-block;
  width: 160px;
  margin: auto;
  position: relative;
  z-index: 1;
  background-color: #f0f0f5;
  padding: 4px;
  border-radius: 20px;
}

.tp-theme-toggle-light,
.tp-theme-toggle-dark {
  display: inline-block;
  width: 48%;
  height: 26px;
  line-height: 26px;
}

.tp-theme-toggle input {
  display: none;
}

.tp-theme-toggle:hover {
  cursor: pointer;
}

.tp-theme-toggle label {
  color: var(--tp-common-black);
  font-size: 14px;
  font-weight: 500;
}

.tp-theme-toggle label:hover {
  cursor: pointer;
}

.tp-theme-toggle #tp-theme-toggler {
  display: none;
}

.tp-theme-toggle #tp-theme-toggler:checked+i {
  right: calc(50% - 4px);
}

.tp-theme-toggle-slide {
  position: absolute;
  top: 50%;
  right: 4px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50%;
  height: 26px;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  border-radius: 30px;
  -webkit-transform: translate3d(0, 0);
  transform: translate3d(0, 0);
  -webkit-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  -o-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
}

.tp-theme-dir {
  text-align: center;
}

.tp-theme-dir-main {
  display: inline-block;
  width: 160px;
  margin: auto;
  position: relative;
  z-index: 1;
  background-color: #f0f0f5;
  padding: 4px;
  border-radius: 20px;
}

.tp-theme-dir-ltr,
.tp-theme-dir-rtl {
  display: inline-block;
  width: 48%;
  height: 25px;
  line-height: 27px;
}

.tp-theme-dir input {
  display: none;
}

.tp-theme-dir:hover {
  cursor: pointer;
}

.tp-theme-dir label {
  color: var(--tp-common-black);
  font-size: 14px;
  font-weight: 500;
}

.tp-theme-dir label:hover {
  cursor: pointer;
}

.tp-theme-dir #tp-dir-toggler {
  display: none;
}

.tp-theme-dir #tp-dir-toggler:checked+i {
  right: calc(50% - 4px);
}

.tp-theme-dir-slide {
  position: absolute;
  top: 50%;
  right: 4px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50%;
  height: 26px;
  color: var(--tp-common-black);
  background-color: #fff;
  border-radius: 30px;
  -webkit-transform: translate3d(0, 0);
  transform: translate3d(0, 0);
  -webkit-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  -o-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
}

.tp-theme-color-item.active button::before {
  opacity: 1;
  visibility: visible;
}

.tp-theme-color-btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: relative;
}

.tp-theme-color-btn::before {
  position: absolute;
  content: "\f00c";
  font-weight: 600;
  font-family: var(--tp-ff-fontawesome);
  color: var(--tp-common-white);
  font-size: 16px;
  left: 50%;
  top: 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%);
  opacity: 0;
  visibility: hidden;
}

.tp-theme-color-input {
  margin-top: 15px;
}

.tp-theme-color-input h6 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.tp-theme-color-input label {
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: var(--tp-theme-1);
}

.tp-theme-color-input label:hover {
  cursor: pointer;
}

.tp-theme-color-input input {
  display: none;
}

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/
.tp-btn-black {
  height: 60px;
  line-height: 60px;
  border-radius: 40px;
  padding: 0 42px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
  transition-duration: 800ms;
}

.tp-btn-black::before {
  position: absolute;
  width: 200%;
  height: 200%;
  content: "";
  top: -200%;
  left: 50%;
  z-index: 1;
  border-radius: 50%;
  transition-duration: 800ms;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  background: var(--tp-common-white);
  webkit-transition-duration: 800ms;
}

.tp-btn-black-wrap {
  position: relative;
  z-index: 1;
  float: left;
  overflow: hidden;
  display: inline-block;
}

.tp-btn-black-wrap .text-1 {
  position: relative;
  display: block;
  color: var(--tp-common-white);
  transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.tp-btn-black-wrap .text-2 {
  position: absolute;
  top: 100%;
  display: block;
  color: var(--tp-common-black);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (max-width: 767px) {
  .tp-btn-black {
    height: 50px;
    line-height: 50px;
    padding: 0px 30px;
  }
}

.tp-btn-black:hover {
  color: var(--tp-common-white);
  background-color: transparent;
}

.tp-btn-black:hover::before {
  top: -40%;
}

.tp-btn-black:hover .tp-btn-black-wrap .text-1 {
  -webkit-transform: translateY(-150%);
  -ms-transform: translateY(-150%);
  transform: translateY(-150%);
}

.tp-btn-black:hover .tp-btn-black-wrap .text-2 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tp-btn-black-animated span {
  font-size: 26px;
  font-weight: 700;
  border-radius: 100px;
  display: inline-block;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  font-family: var(--tp-ff-shoulders);
  position: relative;
}

.tp-btn-black-animated span.btn-1 {
  padding: 0px 80px;
  height: 140px;
  line-height: 140px;
  transition: all 0.5s ease-in-out 0s;
}

.tp-btn-black-animated span.btn-2 {
  padding: 0px 36px;
  height: 140px;
  line-height: 140px;
  position: relative;
  left: -5px;
  transition: all 0.5s ease-in-out 0s;
}

.tp-btn-black-animated span.btn-3 {
  height: 60px;
  line-height: 60px;
  padding: 0px 43px;
  transform: rotate(-90deg);
  position: relative;
  left: -44px;
  transition: all 0.5s ease-in-out 0s;
}

.tp-btn-black-animated span.btn-expand {
  position: absolute;
  left: 0;
  height: 100%;
  width: 172px;
  border-radius: 100px;
  background-color: var(--tp-common-black);
  transition: all 0.5s ease-in-out 0s;
}

.tp-btn-black-animated:hover span.btn-expand {
  width: 295px;
}

.tp-btn-black-animated:hover span.btn-2 {
  left: -65px;
  padding: 0;
}

.tp-btn-black-animated:hover span.btn-3 {
  left: -53px;
  padding: 0;
  transform: rotate(0deg);
}

.tp-btn-black-2 {
  height: 60px;
  line-height: 55px;
  border-radius: 40px;
  padding: 0 18px 0 24px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
  border: 2px solid transparent;
}

@media (max-width: 767px) {
  .tp-btn-black-2 {
    height: 50px;
    line-height: 43px;
    padding: 0px 30px;
  }
}

.tp-btn-black-2:hover {
  background-color: transparent;
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-btn-black-2:hover span .svg-icon {
  color: var(--tp-common-white);
}

.tp-btn-black-2:hover span .svg-bg {
  animation: rotate2 10s linear infinite;
}

.tp-btn-black-2 span {
  margin-left: 12px;
}

.tp-btn-black-2 span .svg-icon {
  position: absolute;
  top: 7px;
  left: -2px;
  right: 0;
  z-index: 2;
  margin: 0 auto;
  transition: 0.3s;
  color: var(--tp-common-black);
}

.tp-btn-black-square {
  height: 66px;
  line-height: 66px;
  padding: 0 35px;
  font-weight: 500;
  letter-spacing: -0.18px;
  font-size: 20px;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  border: 1.5px solid rgba(18, 18, 18, 0.2);
  color: var(--tp-common-black);
}

.tp-btn-black-square span {
  margin-left: 10px;
}

.tp-btn-black-square:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-btn-black-sm {
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  padding: 0 27px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  border: 2px solid transparent;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.tp-btn-black-sm:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  background-color: transparent;
}

.tp-btn-black-md {
  height: 50px;
  line-height: 46px;
  padding: 0 27px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
  border: 2px solid transparent;
}

.tp-btn-black-md span {
  margin-left: 10px;
}

.tp-btn-black-md.white-bg {
  color: var(--tp-common-black-2);
}

.tp-btn-black-md.white-bg:hover {
  color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  background-color: transparent;
}

.tp-btn-black-md:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  background-color: transparent;
}

.tp-btn-white {
  height: 48px;
  line-height: 40px;
  border-radius: 10px;
  padding: 0 20px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  background-color: #FAF3E3;
  color: #42332A;
}

.tp-btn-white span {
  padding-left: 3px;
  padding-top: 3px;
  color: var(--tp-common-black);
  transform: translateY(-1px);
  display: inline-block;
  transition: 0.3s;
}

.tp-btn-white:hover {
  background-color: #786456;
  color: var(--tp-common-white);
}

.tp-btn-white:hover span {
  color: var(--tp-common-white);
}

.tp-btn-white.background-black {
  background-color: #786456;
  color: var(--tp-common-white);
  border: 2px solid transparent;
  transition: 0.3s;
}

.tp-btn-white.background-black span {
  color: var(--tp-common-white);
}

.tp-btn-white.background-black:hover {
  background-color: transparent;
  border-color: #786456;
  color: var(--tp-common-black);
}

.tp-btn-white.background-black:hover span {
  color: var(--tp-common-black);
}

.tp-btn-white-lg {
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-size: 16px;
  z-index: 9;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  transition: 0.4s;
}

.tp-btn-white-lg:hover {
  transform: scale(1.2);
  color: var(--tp-common-black);
}

.tp-btn-white-sm {
  z-index: 9;
  height: 30px;
  line-height: 30px;
  padding: 0 17px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  white-space: nowrap;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
}

.tp-btn-white-sm svg {
  margin-left: 5px;
  margin-top: -1px;
  width: 18px;
}

.tp-btn-white-sm:hover svg {
  -webkit-animation: iconMove ease-out 0.35s;
  animation: iconMove ease-out 0.35s;
}

.tp-btn-white-sm.border-style {
  height: 40px;
  line-height: 37px;
  font-size: 17px;
  background-color: transparent;
  color: var(--tp-common-white);
  border: 1px solid #fff;
  border-radius: 0;
}

.tp-btn-white-sm.border-style:hover {
  background-color: #fff;
  color: var(--tp-common-black);
}

.tp-btn-white-shape {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  padding: 32px 52px;
  text-align: center;
  transition: all 0.3s;
  border-radius: 100%;
  border: 2px solid transparent;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white-solid);
}

.tp-btn-white-shape:hover {
  background-color: transparent;
  color: var(--tp-common-white);
  border-color: var(--tp-common-white-solid);
}

.tp-btn-zikzak {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.18px;
  color: var(--tp-common-black);
  z-index: 1;
}

.tp-btn-zikzak .zikzak-content {
  position: absolute;
  top: -17px;
  left: 43px;
  padding-left: 0;
}

.tp-btn-zikzak .zikzak-content svg {
  display: block;
  margin-top: 7px;
  transition: 0.7s;
}

.tp-btn-zikzak svg.anim {
  position: relative;
  z-index: -1;
}

.tp-btn-zikzak:hover {
  color: var(--tp-common-black);
}

.tp-btn-zikzak:hover svg.anim {
  animation: rotate2 10s linear infinite;
}

.tp-btn-zikzak:hover .zikzak-content svg {
  transform: translateX(60px);
}

.tp-btn-zikzak.zikzak-inner {
  color: var(--tp-common-white);
}

.tp-btn-zikzak.zikzak-inner .zikzak-content {
  left: 37px;
}

.tp-btn-zikzak.zikzak-inner:hover .zikzak-content svg {
  transform: translateX(40px);
}

.tp-btn-zikzak-sm {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.18px;
  color: var(--tp-common-black);
  text-align: left;
  transition: 0.3s ease-in-out;
}

.tp-btn-zikzak-sm .zikzak-content {
  position: absolute;
  top: -20px;
  left: 43px;
  z-index: 2;
}

.tp-btn-zikzak-sm .zikzak-content svg {
  display: block;
  margin-top: 7px;
  transition: 0.7s;
}

.tp-btn-zikzak-sm span .svg-bg {
  color: var(--tp-common-white-solid);
  transition: 0.3s ease-in-out;
}

.tp-btn-zikzak-sm:hover .zikzak-content {
  color: var(--tp-common-white-solid);
}

.tp-btn-zikzak-sm:hover .zikzak-content svg {
  transform: translateX(30px);
}

.tp-btn-zikzak-sm:hover span .svg-bg {
  color: var(--tp-common-black);
  animation: rotate2 10s linear infinite;
}

.tp-btn-project-sm {
  height: 32px;
  line-height: 32px;
  border-radius: 20px;
  padding: 0 22px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  transition: all 0.3s;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tp-btn-project-sm:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.tp-btn-animation {
  border-top: 1px solid rgba(18, 18, 18, 0.1);
  border-bottom: 1px solid rgba(18, 18, 18, 0.1);
  height: 45px;
  line-height: 45px;
  padding: 0 17px;
  display: inline-block;
  white-space: nowrap;
  animation: scrollText 20s infinite linear;
}

.tp-btn-animation:hover {
  animation-play-state: paused;
}

.tp-btn-animation span {
  font-weight: 500;
  font-size: 16px;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s;
  color: var(--tp-common-black);
}

.tp-btn-animation span::before {
  height: 5px;
  width: 5px;
  background-color: var(--tp-common-black);
  display: inline-block;
  content: "";
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 50%;
  transform: translateY(-3px);
}

.tp-btn-circle {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-block;
  width: 149px;
  height: 149px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-btn-circle.style-2 {
  border-color: rgba(25, 25, 26, 0.14);
  color: var(--tp-common-black);
}

.tp-btn-circle-icon {
  transform: translateY(10px);
  margin-left: 8px;
}

.tp-btn-circle .tp-btn-circle-dot {
  position: absolute;
  bottom: 0;
  left: 32px;
  width: 20px;
  height: 20px;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: var(--tp-common-white);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.tp-btn-circle:hover {
  border: 1px solid transparent;
}

.tp-btn-circle:hover .tp-btn-circle-dot {
  width: 420px;
  height: 420px;
}

.tp-btn-circle:hover span {
  color: var(--tp-common-black);
}

.tp-btn-circle-2 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: inline-block;
  width: 149px;
  height: 149px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.tp-btn-circle-2 span {
  text-align: center;
}

.tp-btn-circle-2 .tp-btn-circle-dot {
  position: absolute;
  bottom: 0;
  left: 32px;
  width: 20px;
  height: 20px;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: var(--tp-common-white);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.tp-btn-circle-2:hover {
  border: 1px solid transparent;
}

.tp-btn-circle-2:hover .tp-btn-circle-dot {
  width: 420px;
  height: 420px;
}

.tp-btn-circle-2:hover span {
  color: var(--tp-common-black);
}

.tp-btn-orange {
  height: 50px;
  line-height: 50px;
  padding: 0 43px;
  font-size: 16px;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  color: var(--tp-common-white);
  background-color: var(--tp-common-orange);
  z-index: 9;
}

.tp-btn-orange:hover {
  color: var(--tp-common-white);
}

.tp-btn-border {
  height: 80px;
  line-height: 80px;
  border-radius: 40px;
  padding: 0 70px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  color: var(--tp-common-black);
  border: 1px solid var(--tp-border-1);
  transition-duration: 800ms;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-btn-border {
    height: 60px;
    line-height: 60px;
    border-radius: 40px;
    padding: 0 40px;
  }
}

.tp-btn-border::before {
  position: absolute;
  width: 200%;
  height: 200%;
  content: "";
  top: -200%;
  left: 50%;
  z-index: 1;
  border-radius: 50%;
  transition-duration: 800ms;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  background: var(--tp-common-black);
  webkit-transition-duration: 800ms;
}

.tp-btn-border-wrap {
  position: relative;
  z-index: 1;
  float: left;
  overflow: hidden;
  display: inline-block;
}

.tp-btn-border-wrap .text-1 {
  position: relative;
  display: block;
  color: var(--tp-common-black);
  transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.tp-btn-border-wrap .text-2 {
  position: absolute;
  top: 30%;
  display: block;
  color: var(--tp-common-white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .tp-btn-border {
    height: 60px;
    line-height: 60px;
    padding: 0px 50px;
  }
}

.tp-btn-border:hover {
  border-color: var(--tp-common-black);
}

.tp-btn-border:hover::before {
  top: -40%;
}

.tp-btn-border:hover .tp-btn-border-wrap .text-1 {
  -webkit-transform: translateY(-150%);
  -ms-transform: translateY(-150%);
  transform: translateY(-150%);
}

.tp-btn-border:hover .tp-btn-border-wrap .text-2 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
}

.tp-btn-border-lg {
  height: 60px;
  line-height: 58px;
  border-radius: 40px;
  padding: 0 30px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
  border: 2px solid transparent;
}

@media (max-width: 767px) {
  .tp-btn-border-lg {
    height: 50px;
    line-height: 50px;
    padding: 0px 30px;
  }
}

.tp-btn-border-lg:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  background-color: transparent;
}

.tp-btn-border-lg span {
  margin-left: 12px;
}

.tp-btn-border-lg span .svg-icon {
  position: absolute;
  top: 7px;
  left: -3px;
  right: 0;
  z-index: 2;
  margin: 0 auto;
}

.tp-btn-border-sm {
  height: 44px;
  line-height: 42px;
  border-radius: 100px;
  padding: 0 30px;
  z-index: 9;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.16px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-white);
  border: 1px solid var(--tp-common-white);
}

.tp-btn-border-sm:hover {
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
}

.tp-shop-btn {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  height: 50px;
  line-height: 50px;
  padding: 0px 45px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tp-shop-btn:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.tp-shop-btn.border-style {
  border: 1px solid rgba(30, 30, 30, 0.2);
  color: var(--tp-common-black);
}

.tp-shop-btn.border-style:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-btn-shop-category {
  font-size: 16px;
  font-weight: 400;
  height: 46px;
  line-height: 46px;
  padding: 0px 30px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-white-solid);
}

.tp-btn-shop-category:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white-solid);
}

.tp-btn-shop-category.black-bg {
  color: var(--tp-common-white);
}

.tp-filter-btn {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  display: inline-block;
  padding: 13px 35px 9px;
  border: 1px solid var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-filter-btn {
    padding: 13px 32px 9px;
  }
}

.tp-btn-subscribe {
  font-size: 16px;
  font-weight: 400;
  height: 54px;
  line-height: 54px;
  padding: 0px 27px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  background-color: #fff;
}

.tp-btn-cart {
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  padding: 0px 65px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  text-transform: capitalize;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-black);
  flex: 0 0 auto;
  border: 2px solid transparent;
}

.tp-btn-cart:hover {
  background-color: transparent;
  border-color: var(--tp-common-black);
  color: var(--tp-common-black);
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-btn-cart {
    padding: 0px 35px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-btn-cart {
    font-size: 14px;
    padding: 0px 15px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-btn-cart {
    padding: 0px 20px;
  }
}

.tp-btn-cart span {
  margin-right: 10px;
}

.tp-btn-cart.sm {
  height: 50px;
  line-height: 45px;
  padding: 0px 30px;
}

.tp-btn-submit {
  font-size: 17px;
  font-weight: 400;
  height: 50px;
  line-height: 48px;
  padding: 0px 35px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-black);
  flex: 0 0 auto;
}

.tp-btn-submit span {
  margin-right: 10px;
}

.tp-btn-wishlist {
  font-weight: 400;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: 20px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.12);
}

.tp-btn-wishlist:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  2.4 Animations
/*----------------------------------------*/
/* pulse effect animation */
.tp-zoom-in-out {
  -webkit-animation: tp_zoom_in_out 3s infinite linear;
  -moz-animation: tp_zoom_in_out 3s infinite linear;
  -ms-animation: tp_zoom_in_out 3s infinite linear;
  -o-animation: tp_zoom_in_out 3s infinite linear;
  animation: tp_zoom_in_out 3s infinite linear;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes scroll-up-down {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  100% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}

.tp-zoom-in-out {
  -webkit-animation: tp_zoom_in_out 3s infinite linear;
  -moz-animation: tp_zoom_in_out 3s infinite linear;
  -ms-animation: tp_zoom_in_out 3s infinite linear;
  -o-animation: tp_zoom_in_out 3s infinite linear;
  animation: tp_zoom_in_out 3s infinite linear;
}

@-webkit-keyframes tp_zoom_in_out {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@-moz-keyframes tp_zoom_in_out {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@-ms-keyframes tp_zoom_in_out {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@keyframes tp_zoom_in_out {
  0% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

.tp-zoom-in-out-2 {
  -webkit-animation: tp_zoom_in_out_2 3s infinite linear;
  -moz-animation: tp_zoom_in_out 3s infinite linear;
  -ms-animation: tp_zoom_in_out_2 3s infinite linear;
  -o-animation: tp_zoom_in_out_2 3s infinite linear;
  animation: tp_zoom_in_out_2 3s infinite linear;
}

.tp-zoom-in-out-2 {
  -webkit-animation: tp_zoom_in_out_2 3s infinite linear;
  -moz-animation: tp_zoom_in_out_2 3s infinite linear;
  -ms-animation: tp_zoom_in_out_2 3s infinite linear;
  -o-animation: tp_zoom_in_out_2 3s infinite linear;
  animation: tp_zoom_in_out_2 3s infinite linear;
}

@-webkit-keyframes tp_zoom_in_out_2 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@-moz-keyframes tp_zoom_in_out_2 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@-ms-keyframes tp_zoom_in_out_2 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes tp_zoom_in_out_2 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }

  100% {
    margin-top: 0;
  }
}

@keyframes float {

  0%,
  to {
    transform: translateY(-2rem);
  }

  50% {
    transform: translateY(3rem);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes circle-animations {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

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

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

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

@-webkit-keyframes tp-pulse-2 {
  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);
  }
}

@-moz-keyframes tp-pulse-2 {
  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);
  }
}

@-ms-keyframes tp-pulse-2 {
  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);
  }
}

@keyframes tp-pulse-2 {
  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);
  }
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes scrollText-2 {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes tfLeftToRight {
  49% {
    transform: translateX(30%);
  }

  50% {
    opacity: 0;
    transform: translateX(-30%);
  }

  51% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes sliderShape {

  0%,
  100% {
    border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }

  34% {
    border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
  }

  50% {
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }

  67% {
    border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
  }
}

@keyframes iconMove {
  0% {
    transform: translateX(0);
    transform: translateX(0);
  }

  30% {
    opacity: 0;
  }

  31% {
    transform: translateX(1.25rem);
    transform: translateX(1.25rem);
  }

  32% {
    transform: translateX(-1.25rem);
    transform: translateX(-1.25rem);
  }

  84% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes iconMove {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  30% {
    opacity: 0;
  }

  31% {
    -webkit-transform: translateX(1.25rem);
    transform: translateX(1.25rem);
  }

  32% {
    -webkit-transform: translateX(-1.25rem);
    transform: translateX(-1.25rem);
  }

  84% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bar_anim {

  0%,
  100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }

  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }

  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}

/*----------------------------------------*/
/*  2.5 Preloader
/*----------------------------------------*/
.preloader-wrap {
  background-color: #000000;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999;
  margin-top: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preloader-2 {
  display: inline-block;
}

.loader-text {
  font-size: 20px;
  color: var(--tp-common-white);
  margin-top: 10px;
  opacity: 0.6;
}

.preloader-2 .line {
  width: 2px;
  height: 40px;
  background: #fff;
  margin: 0 4px;
  display: inline-block;
  animation: opacity-2 1000ms infinite ease-in-out;
}

.preloader-2 .line-1 {
  animation-delay: 800ms;
}

.preloader-2 .line-2 {
  animation-delay: 600ms;
}

.preloader-2 .line-3 {
  animation-delay: 400ms;
}

.preloader-2 .line-4 {
  animation-delay: 200ms;
}

.preloader-2 .line-6 {
  animation-delay: 200ms;
}

.preloader-2 .line-7 {
  animation-delay: 400ms;
}

.preloader-2 .line-8 {
  animation-delay: 600ms;
}

.preloader-2 .line-9 {
  animation-delay: 800ms;
}

@keyframes opacity-2 {
  0% {
    opacity: 1;
    height: 40px;
  }

  50% {
    opacity: 0;
    height: 24px;
  }

  100% {
    opacity: 1;
    height: 40px;
  }
}

/*----------------------------------------*/
/*  2.6 Background
/*----------------------------------------*/
.white-bg {
  background-color: var(--tp-common-white);
}

.black-bg {
  background-color: rgb(245, 243, 237);
}

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

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

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

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

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

.grey-bg-3 {
  background-color: rgba(25, 25, 26, 0.1);
}

/*----------------------------------------*/
/*  2.7 Carousel
/*----------------------------------------*/
/* tp range slider css */
.tp-range-slider .inside-slider {
  padding-left: 7px;
  padding-right: 17px;
}

.tp-range-slider .noUi-target {
  background-color: #191C3C;
  border-radius: 12px;
  border: 0;
  box-shadow: none;
}

.tp-range-slider .noUi-connect {
  background-color: var(--tp-theme-primary);
}

.tp-range-slider .noUi-horizontal {
  height: 6px;
}

.tp-range-slider .noUi-handle {
  height: 24px;
  width: 24px;
  background-color: var(--tp-theme-primary);
  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 {
  line-height: 1;
}

.tp-swiper-dot .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--tp-grey-3);
  opacity: 1;
  margin: 0 3px;
  position: relative;
}

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

.tp-swiper-dot.tp-swiper-dot-style-darkRed .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--tp-theme-secondary);
}

.tp-swiper-dot-border {
  line-height: 1;
}

.tp-swiper-dot-border .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: transparent;
  opacity: 1;
  margin: 0 3px;
  position: relative;
  border: 1px solid rgba(2, 6, 38, 0.4);
}

.tp-swiper-dot-border .swiper-pagination-bullet button {
  font-size: 0;
}

.tp-swiper-dot-border .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-swiper-dot-border .swiper-pagination-bullet:hover {
  border-color: var(--tp-common-black);
}

.tp-swiper-dot-border.tp-swiper-dot-style-darkRed .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--tp-theme-secondary);
}

.tp-swiper-arrow button {
  width: 40px;
  height: 40px;
  line-height: 38px;
  font-size: 20px;
  text-align: center;
  background-color: transparent;
  color: var(--tp-text-2);
  border: 1px solid rgba(2, 6, 38, 0.1);
  border-radius: 50%;
}

.tp-swiper-arrow button:hover {
  background-color: var(--tp-theme-primary);
  color: var(--tp-common-white);
}

/* tp swiper scrollbar */
.tp-swiper-scrollbar {
  background-color: #EDEFF2;
  height: 2px;
}

.tp-swiper-scrollbar .tp-swiper-scrollbar-drag {
  background-color: var(--tp-common-black);
  height: 100%;
}

.tp-swiper-scrollbar .tp-swiper-scrollbar-drag:hover {
  cursor: pointer;
}

.tp-swiper-scrollbar:hover,
.tp-swiper-scrollbar:focus {
  -webkit-transform: scaleY(3);
  -moz-transform: scaleY(3);
  -ms-transform: scaleY(3);
  -o-transform: scaleY(3);
  transform: scaleY(3);
}

/* tp slick arrow */
.tp-slick-dot .slick-dots li {
  display: inline-block;
  margin: 0 4px;
}

.tp-slick-dot .slick-dots li.slick-active button {
  background-color: var(--tp-common-white);
}

.tp-slick-dot .slick-dots li button {
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

.tp-slick-dot-blue .slick-dots li.slick-active button {
  background-color: var(--tp-theme-primary);
}

.tp-slick-dot-blue .slick-dots li button {
  background-color: var(--tp-grey-3);
}

/*----------------------------------------*/
/*  2.8 Nice Select
/*----------------------------------------*/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border-radius: 5px;
  border: solid 1px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
}

.nice-select:hover {
  border-color: #dbdbdb;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
  border-color: #999;
}

.nice-select::after {
  position: absolute;
  content: "\f107";
  top: 50%;
  right: 0;
  font-family: var(--tp-ff-fontawesome);
  color: var(--tp-common-black);
  font-weight: 500;
  pointer-events: none;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  margin-top: 0;
  transform-origin: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}

.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}

.nice-select.disabled::after {
  border-color: #cccccc;
}

.nice-select.wide {
  width: 100%;
}

.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}

.nice-select.right {
  float: right;
}

.nice-select.right .list {
  left: auto;
  right: 0;
}

.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}

.nice-select.small::after {
  height: 4px;
  width: 4px;
}

.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}

.nice-select .list {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
  -ms-transform: scale(0.75) translateY(-21px);
  transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
}

.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.nice-select .option.selected {
  font-weight: bold;
}

.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

/*----------------------------------------*/
/*  2.9 Pagination
/*----------------------------------------*/
.tp-pagination ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.tp-pagination ul li {
  display: inline-block;
}

.tp-pagination ul li:not(:last-child) {
  margin-right: 6px;
}

.tp-pagination ul li a,
.tp-pagination ul li span {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  border: 1px solid rgba(2, 6, 38, 0.1);
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-text-body);
}

.tp-pagination ul li a:hover,
.tp-pagination ul li a.current,
.tp-pagination ul li span:hover,
.tp-pagination ul li span.current {
  background: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  2.10 Offcanvas
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
  background: rgba(24, 24, 24, 0.4);
}

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

.tp-offcanvas-logo img {
  width: 85px;
  height: 100%;
}

.tp-offcanvas-area {
  position: fixed;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  z-index: 99;
  z-index: 99999;
  padding: 50px 50px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  background: #FFF;
  overscroll-behavior-y: contain;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
}

@media (max-width: 767px) {
  .tp-offcanvas-area {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-offcanvas-area {
    width: 450px;
  }
}

.tp-offcanvas-area.opened {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.tp-offcanvas-area .tp-homemenu-wrapper {
  margin-top: 20px;
}

.tp-offcanvas-area .tp-homemenu-wrapper .gx-25 {
  --bs-gutter-x: 10px;
}

.tp-offcanvas-area .homemenu-thumb-wrap {
  margin-bottom: 0;
  margin-bottom: 10px;
}

.tp-offcanvas-area .homemenu {
  margin-bottom: 15px;
}

.tp-offcanvas-area .homemenu-title {
  font-size: 13px;
}

.tp-offcanvas-area .tp-megamenu-list-box {
  padding: 0;
}

.tp-offcanvas-area .tp-megamenu-wrapper {
  padding: 20px 0px;
}

.tp-offcanvas-area .tp-megamenu-title {
  margin-bottom: 15px;
}

.tp-offcanvas-area .tp-megamenu-list-wrap ul {
  margin-left: 0;
}

.tp-offcanvas-area .tp-megamenu-list-wrap ul li a::before {
  top: 17px;
}

.tp-offcanvas-area .tp-main-menu-mobile ul li>a {
  font-size: 15px;
}

.tp-offcanvas-area .tp-megamenu-shop-style .tp-shop-banner-thumb {
  margin-bottom: 20px;
}

.tp-offcanvas-area .tp-megamenu-portfolio {
  padding-top: 20px;
}

.tp-offcanvas-area .tp-megamenu-portfolio-banner {
  display: none;
}

.tp-offcanvas-area .tp-megamenu-list-2 {
  padding-left: 0;
}

.tp-offcanvas-top {
  margin-bottom: 90px;
}

.tp-offcanvas-close-btn {
  color: black;
}

.tp-offcanvas-close-btn:hover {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.tp-offcanvas-content {
  margin-bottom: 45px;
}

.tp-offcanvas-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #414144;
}

.tp-offcanvas-title {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.8px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--tp-common-black);
}

.tp-offcanvas-title.sm {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

.tp-offcanvas-gallery {
  margin-bottom: 65px;
}

.tp-offcanvas-contact {
  margin-bottom: 55px;
}

.tp-offcanvas-contact ul li {
  list-style: none;
}

.tp-offcanvas-contact ul li:not(:last-child) {
  margin-bottom: 2px;
}

.tp-offcanvas-contact ul li a {
  display: inline-block;
  color: #414144;
  font-size: 18px;
  position: relative;
}

.tp-offcanvas-contact ul li a::after {
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: #1e1e1e;
}

.tp-offcanvas-contact ul li a:hover {
  color: var(--tp-common-black);
}

.tp-offcanvas-contact ul li a:hover::after {
  width: 100%;
  right: auto;
  left: 0;
}

.tp-offcanvas-social ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.tp-offcanvas-social ul li {
  list-style: none;
}

.tp-offcanvas-social ul li:not(:last-child) {
  margin-right: 8px;
}

.tp-offcanvas-social ul li a {
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 40px;
  color: var(--tp-common-black);
  border: 1px solid rgba(2, 11, 24, 0.1);
}

.tp-offcanvas-social ul li a:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-offcanvas-social ul li a svg {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}

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

.tp-offcanvas-2-area.opened .animated-text>nav>ul>li a::after {
  visibility: visible;
  opacity: 1;
  bottom: 35px;
}

.tp-offcanvas-2-area.opened .animated-text>nav>ul>li a::before {
  width: 100%;
}

.tp-offcanvas-2-area.opened .animated-text>nav>ul>li a .tp-text-hover-effect-word .single-char span {
  -webkit-transform: translateZ(0.1px);
  -moz-transform: translateZ(0.1px);
  -ms-transform: translateZ(0.1px);
  -o-transform: translateZ(0.1px);
  transform: translateZ(0.1px);
}

.tp-offcanvas-2-area.opened .tp-offcanvas-2-left,
.tp-offcanvas-2-area.opened .tp-offcanvas-2-right {
  visibility: visible;
  opacity: 1;
}

.tp-offcanvas-2-area.opened .tp-offcanvas-2-wrapper {
  visibility: visible;
  opacity: 1;
}

.tp-offcanvas-2-area.opened .tp-offcanvas-2-bg.is-left,
.tp-offcanvas-2-area.opened .tp-offcanvas-2-bg.is-right {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  transition-delay: 0s;
}

.tp-offcanvas-2-area.opened .tp-offcanvas-2-menu {
  transition-delay: 0s;
}

.tp-offcanvas-2-area.opened .tp-offcanvas-2-close {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 0.9s;
}

.tp-offcanvas-2-area.opened .tpoffcanvas__right-info,
.tp-offcanvas-2-area.opened .tpoffcanvas__social-link,
.tp-offcanvas-2-area.opened .tpoffcanvas__logo {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.tp-offcanvas-2-area.opened .tpoffcanvas__right-info {
  transition-delay: 0.9s;
}

.tp-offcanvas-2-area.opened .tpoffcanvas__social-link {
  transition-delay: 0.7s;
}

.tp-offcanvas-2-area.opened .tpoffcanvas__logo {
  transition-delay: 0.3s;
}

.tp-offcanvas-2-area.opened .tpoffcanvas__logo img {
  flex: 0 0 auto;
}

.tp-offcanvas-2-area .tp-main-menu-mobile {
  padding-top: 80px;
  padding-left: 90px;
  padding-right: 130px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile {
    padding: 30px;
  }
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul {
  margin-bottom: 10px;
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li>a {
  padding: 23px 0;
  font-size: 62px;
  font-weight: 700;
  padding-left: 85px;
  position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li>a {
    font-size: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li>a {
    font-size: 40px;
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li>a {
    font-size: 30px;
    padding-left: 0;
  }
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li>a::after {
  left: 30px;
  top: 35px;
  font-size: 18px;
  font-weight: 400;
  position: absolute;
  content: "0" counter(count);
  counter-increment: count;
  color: var(--tp-common-black);
  transform: rotate(270deg) translateY(100%);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li>a::after {
    display: none;
  }
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul {
  padding-top: 20px;
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul li {
  padding-left: 85px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul li {
    padding-left: 30px;
  }
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul li a {
  width: 100%;
  font-size: 26px;
  font-weight: 500;
  border-bottom: 0;
  padding: 12px 0;
  text-transform: uppercase;
  transition: 0.4s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul li a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul li a {
    font-size: 18px;
  }
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul li a:hover {
  padding-left: 20px;
}

.tp-offcanvas-2-area .tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
  top: 0;
  right: 0;
  padding: 44px 20px;
  padding-left: 200px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
    padding: 28px 20px;
    padding-left: 200px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
    padding: 33px 20px;
    padding-left: 200px;
  }
}

@media (max-width: 767px) {
  .tp-offcanvas-2-area .tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
    padding: 28px 20px;
    padding-left: 200px;
  }
}

.tp-offcanvas-2-area .tp-main-menu-mobile nav>ul>li {
  border-bottom: 1px solid rgba(6, 7, 40, 0.1);
}

.tp-offcanvas-2-area .tp-main-menu-mobile nav ul li:not(:last-child) a {
  border-bottom: 0;
}

.tp-offcanvas-2-area .tp-main-menu-mobile>nav>ul>li ul.submenu {
  border-top: 1px solid rgba(6, 7, 40, 0.1);
}

.tp-offcanvas-2-area .tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
  font-size: 22px;
}

.tp-offcanvas-2-bg.left-box {
  position: fixed;
  top: 0;
  height: 100%;
  width: 60%;
  -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1111;
}

@media (max-width: 767px) {
  .tp-offcanvas-2-bg.left-box {
    width: 100%;
  }
}

.tp-offcanvas-2-bg.right-box {
  position: fixed;
  top: 0;
  height: 100%;
  width: 40%;
  -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1111;
}

@media (max-width: 767px) {
  .tp-offcanvas-2-bg.right-box {
    width: 100%;
  }
}

.tp-offcanvas-2-bg.is-left {
  left: 0;
  -webkit-transform: scale(1, 0);
  -moz-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  transform: scale(1, 0);
  transform-origin: top center;
  background: #E9E3D6;
  transition-delay: 1s;
}

.tp-offcanvas-2-bg.is-right {
  right: 0;
  transform-origin: bottom center;
  -webkit-transform: scale(1, 0);
  -moz-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  transform: scale(1, 0);
  background-color: #E9E3D6;
  transition-delay: 1s;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-2-left {
  overflow-y: scroll;
}

.tp-offcanvas-2-wrapper .left-box {
  position: fixed;
  top: 0;
  width: 60%;
  height: 100vh;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  z-index: 9999;
  padding-bottom: 50px;
}

.tp-offcanvas-2-wrapper .left-box::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .tp-offcanvas-2-wrapper .left-box {
    width: 100%;
  }
}

.tp-offcanvas-2-wrapper .right-box {
  position: fixed;
  top: 0;
  width: 40%;
  height: 100vh;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  z-index: 9999;
  padding-bottom: 50px;
}

.tp-offcanvas-2-wrapper .right-box::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .tp-offcanvas-2-wrapper .right-box {
    width: 100%;
  }
}

.tp-offcanvas-2-left {
  visibility: hidden;
  opacity: 0;
  left: 0;
  transition-delay: 1.2s;
}

.tp-offcanvas-2-right {
  visibility: hidden;
  opacity: 0;
  right: 0;
  transition-delay: 1.2s;
}

.tp-offcanvas-2-right-inner {
  padding: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-offcanvas-2-right-inner {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-offcanvas-2-right-inner {
    padding: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-offcanvas-2-right-inner {
    padding: 30px;
  }
}

.tp-offcanvas-2-close {
  padding-top: 30px;
  padding-right: 90px;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  transition-delay: 0.9s;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-offcanvas-2-close {
    padding-right: 30px;
  }
}

.tp-offcanvas-2-close-btn {
  color: var(--tp-common-black);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.tp-offcanvas-2-close-btn .text {
  width: 60px;
  height: 20px;
  overflow: hidden;
  color: var(--tp-common-black);
  display: inline-block;
  transform: translateY(4px);
}

.tp-offcanvas-2-close-btn .text span {
  display: inline-block;
  -webkit-transform: translateX(120%);
  -moz-transform: translateX(120%);
  -ms-transform: translateX(120%);
  -o-transform: translateX(120%);
  transform: translateX(120%);
}

.tp-offcanvas-2-close-btn:hover .text span {
  transform: translateX(0%);
}

.tp-offcanvas-2-close-btn:hover span svg {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.tp-offcanvas-2-text {
  right: 0;
  bottom: 0;
  position: absolute;
  transform: rotate(-90deg) translateY(100%);
}

.tp-offcanvas-2-text span {
  font-size: 320px;
  font-weight: 700;
  color: rgba(33, 35, 41, 0.3);
  font-family: var(--tp-ff-shoulders);
}

.tpoffcanvas__logo {
  opacity: 0;
  padding-left: 90px;
  padding-top: 28px;
  visibility: hidden;
  transition-delay: 0s;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tpoffcanvas__logo {
    padding-left: 13px;
  }
}

.tpoffcanvas__logo img {
  width: 250px;
  height: 100%;
}

.tpoffcanvas__right-wrap {
  height: 100%;
  padding: 100px;
  padding-right: 60px;
}

.tpoffcanvas__right-info {
  opacity: 0;
  text-align: right;
  visibility: hidden;
  transition-delay: 0.6s;
  -webkit-transform: translateY(60px);
  -moz-transform: translateY(60px);
  -ms-transform: translateY(60px);
  -o-transform: translateY(60px);
  transform: translateY(60px);
}

.tpoffcanvas__tel a,
.tpoffcanvas__mail a,
.tpoffcanvas__text p {
  padding: 8px 0px;
  font-weight: 300;
  font-size: 22px;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: var(--tp-common-black);
  display: inline-block;
}

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

  .tpoffcanvas__tel a,
  .tpoffcanvas__mail a,
  .tpoffcanvas__text p {
    font-size: 18px;
  }
}

.tpoffcanvas__social-link {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(60px);
  -moz-transform: translateY(60px);
  -ms-transform: translateY(60px);
  -o-transform: translateY(60px);
  transform: translateY(60px);
  transition-delay: 0.9s;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.tpoffcanvas__social-link ul li {
  list-style: none;
}

.tpoffcanvas__social-link ul li:not(:last-child) {
  margin-bottom: 10px;
}

.tpoffcanvas__social-link ul li a {
  display: inline-block;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  padding-left: 16px;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpoffcanvas__social-link ul li a {
    font-size: 22px;
  }
}

.tpoffcanvas__social-link ul li a::before {
  position: absolute;
  content: "";
  left: 16px;
  bottom: 3px;
  width: 0;
  height: 1px;
  background-color: var(--tp-common-black);
}

.tpoffcanvas__social-link ul li a:hover::before {
  width: calc(100% - 16px);
}

.tp-offcanvas-gallery-img {
  position: relative;
}

.tp-offcanvas-gallery-img::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  transition: 0.4s;
}

.tp-offcanvas-gallery-img img {
  transition: 0.4s;
  width: 100%;
}

.tp-offcanvas-gallery-img:hover img {
  transform: scale(1.2);
}

.tp-offcanvas-gallery-img:hover::after {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------*/
/*  2.11 Breadcrumb
/*----------------------------------------*/
.breadcrumb__padding {
  padding-left: 80px;
  padding-right: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb__padding {
    padding-left: 40px;
    padding-right: 40px;
  }
}

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

.breadcrumb__title {
  font-weight: 500;
  font-size: 100px;
  line-height: 1;
  margin-bottom: 6px;
}

.breadcrumb__title-pre {
  display: inline-block;
  height: 24px;
  line-height: 26px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  background: var(--tp-theme-primary);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 0 7px;
  margin-bottom: 12px;
}

.breadcrumb__list span {
  font-weight: 400;
  font-size: 16px;
  position: relative;
}

.breadcrumb__list span:not(:last-child) {
  padding-right: 12px;
  margin-right: 5px;
}

.breadcrumb__list span:not(:last-child)::after {
  position: absolute;
  content: "";
  right: 0;
  top: 55%;
  width: 4px;
  height: 4px;
  transform: translateY(-2px);
  background-color: #A8ACB0;
  border-radius: 50%;
}

.breadcrumb__list span a:hover {
  color: var(--tp-theme-primary);
}

/*----------------------------------------*/
/*  2.12 Accordion
/*----------------------------------------*/
.tp-service-2-accordion-box .accordion-items {
  border-bottom: 1px solid rgba(25, 25, 26, 0.1);
  position: relative;
}

.tp-service-2-accordion-box .accordion-header .accordion-buttons {
  padding: 20px 0;
  padding-left: 30px;
  padding-right: 50px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  width: 100%;
  text-align: left;
}

.tp-service-2-accordion-box .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.tp-service-2-accordion-box .accordion-header .accordion-buttons .accordion-icon {
  position: absolute;
  top: 40px;
  right: 0;
}

.tp-service-2-accordion-box .accordion-header .accordion-buttons .accordion-icon::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #525258;
  border-radius: 2px;
  transition: 0.4s;
}

.tp-service-2-accordion-box .accordion-header .accordion-buttons .accordion-icon::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #525258;
  border-radius: 2px;
}

.tp-service-2-accordion-box .accordion-header span {
  margin-right: 20px;
}

.tp-service-2-accordion-box .accordion-body {
  padding: 0px 10px 40px 85px;
}

@media (max-width: 767px) {
  .tp-service-2-accordion-box .accordion-body {
    padding: 0px 10px 40px 50px;
  }
}

.tp-service-2-accordion-box .accordion-body p {
  margin-bottom: 40px;
}

.fq-faq-wrapper .tp-service-2-accordion-box .accordion-header .accordion-buttons {
  padding: 35px 0;
  padding-left: 0px;
  padding-right: 50px;
  font-size: 30px;
  font-weight: 600;
  color: var(--tp-common-black);
}

@media (max-width: 767px) {
  .fq-faq-wrapper .tp-service-2-accordion-box .accordion-header .accordion-buttons {
    font-size: 20px;
  }
}

.fq-faq-wrapper .tp-service-2-accordion-box .accordion-body {
  padding: 0;
  padding-right: 100px;
}

@media (max-width: 767px) {
  .fq-faq-wrapper .tp-service-2-accordion-box .accordion-body {
    padding: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-2-accordion-box {
    margin-bottom: 60px;
  }
}

.fq-faq-bdr {
  border-top: 1px solid rgba(25, 25, 26, 0.1);
}

.fq-faq-sidebar {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .fq-faq-sidebar {
    padding-left: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .fq-faq-sidebar {
    padding-left: 0px;
  }
}

.fq-faq-sidebar-title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 15px;
  color: var(--tp-common-black-2);
}

.fq-faq-sidebar-content p {
  color: #5D5D63;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 45px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .fq-faq-sidebar-content p br {
    display: none;
  }
}

.fq-faq-sidebar-input input {
  border: none;
  padding-left: 9px;
  background-color: transparent;
  border-bottom: 2px solid #D9D9D9;
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.fq-faq-sidebar-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.fq-faq-sidebar-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.fq-faq-sidebar-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.fq-faq-sidebar-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.fq-faq-sidebar-input input::placeholder {
  /* MODERN BROWSER */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.fq-faq-sidebar-thumb {
  margin-bottom: 40px;
}

.fq-faq-sidebar-search {
  position: absolute;
  top: 15px;
  right: 0;
}

/*----------------------------------------*/
/*  2.13 Tab
/*----------------------------------------*/
.tp-tab .nav-tabs {
  padding: 0;
  margin: 0;
  border: 0;
}

.tp-tab .nav-tabs .nav-link {
  padding: 0;
  margin: 0;
  border: 0;
}

.tp-product-tab-2 .nav-tabs .nav-link {
  font-size: 20px;
  color: #A0A2A4;
  position: relative;
}

@media (max-width: 767px) {
  .tp-product-tab-2 .nav-tabs .nav-link {
    font-size: 15px;
  }
}

.tp-product-tab-2 .nav-tabs .nav-link:not(:first-child) {
  margin-left: 28px;
}

.tp-product-tab-2 .nav-tabs .nav-link:not(:first-child)::after {
  position: absolute;
  left: -17px;
  top: 50%;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #CED2D6;
}

.tp-product-tab-2 .nav-tabs .nav-link.active {
  color: var(--tp-theme-secondary);
}

.tp-product-tab-2 .nav-tabs .nav-link.active .tp-product-tab-tooltip {
  opacity: 1;
  visibility: visible;
}

.tp-product-tab-2 .nav-tabs .nav-link .tp-product-tab-tooltip {
  position: absolute;
  top: -24px;
  right: 0;
  background-color: var(--tp-theme-secondary);
  color: var(--tp-common-white);
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 4px 9px;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  font-weight: 700;
}

.tp-product-tab-2 .nav-tabs .nav-link .tp-product-tab-tooltip::after {
  position: absolute;
  content: "";
  bottom: 0;
  bottom: -5px;
  left: 7px;
  width: 13px;
  height: 6px;
  background-color: var(--tp-theme-secondary);
  clip-path: polygon(100% 0, 0 0, 28% 100%);
}

.tp-product-tab-3 .nav-tabs .nav-link {
  font-size: 16px;
  padding: 0 0;
}

@media (max-width: 767px) {
  .tp-product-tab-3 .nav-tabs .nav-link {
    font-size: 15px;
  }
}

.tp-product-tab-3 .nav-tabs .nav-link:not(:first-child) {
  margin-left: 23px;
}

.tp-product-tab-3 .nav-tabs .nav-link:not(:first-child)::after {
  width: 4px;
  height: 4px;
  left: -14px;
}

.tp-product-tab-3 .nav-tabs .nav-link.active {
  color: var(--tp-common-black);
}

.tp-product-tab-3 .nav-tabs .nav-link.active .tp-product-tab-tooltip {
  opacity: 1;
  visibility: visible;
}

.tp-product-tab-3 .nav-tabs .nav-link .tp-product-tab-tooltip {
  background-color: var(--tp-theme-primary);
}

.tp-product-tab-3 .nav-tabs .nav-link .tp-product-tab-tooltip::after {
  background-color: var(--tp-theme-primary);
}

.tp-product-tab-5 .nav-tabs .nav-link {
  padding: 0 5px;
}

@media (max-width: 767px) {
  .tp-product-tab-5 .nav-tabs .nav-link {
    font-size: 15px;
  }
}

.tp-product-tab-5 .nav-tabs .nav-link:not(:last-child)::after {
  left: -15px;
}

.tp-product-tab-5 .nav-tabs .nav-link:not(:first-child) {
  margin-left: 22px;
}

.tp-product-tab-5 .nav-tabs .nav-link.active {
  color: var(--tp-common-black);
}

.tp-product-tab-5 .nav-tabs .nav-link.active .tp-product-tab-tooltip {
  opacity: 1;
  visibility: visible;
}

.tp-product-tab-5 .nav-tabs .nav-link .tp-product-tab-tooltip {
  background-color: var(--tp-theme-green);
}

.tp-product-tab-5 .nav-tabs .nav-link .tp-product-tab-tooltip::after {
  background-color: var(--tp-theme-green);
}

.tp-tab-line {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  width: 38%;
  height: 2px;
  background-color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  2.14 Modal
/*----------------------------------------*/
.modal .modal-dialog {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.modal-wrapper {
  position: relative;
  z-index: 999999999;
}

.modal {
  overflow-y: scroll;
  overflow-x: hidden;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 0;
}

.btn-close {
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 99999999999;
  padding: 0;
  margin: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  color: var(--tp-common-black);
  background-color: #fff !important;
  border: 1px solid rgba(25, 25, 26, 0.2);
  opacity: 1;
  transition: 0.3s;
}

.btn-close:hover {
  border-color: var(--tp-common-black) !important;
  transform: rotate(180deg);
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
  opacity: 1;
}

.modal-body {
  padding: 0;
}

.modal-header {
  padding: 0;
  border-bottom: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tp-product-modal .modal-dialog {
  width: 1200px;
}

.tp-product-modal .modal-content {
  padding: 50px;
}

.tp-product-modal .tp-product-modal-close-btn {
  position: absolute;
  right: 30px;
  top: 30px;
}

.tp-product-details-content {
  position: relative;
  padding: 50px 25px 40px;
}

.tp-product-details-category span {
  font-size: 16px;
  line-height: 1;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 15px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-reviews span {
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-stock {
  margin-right: 12px;
}

.tp-product-details-stock span {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  padding: 4px 12px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  background-color: rgba(9, 137, 255, 0.06);
}

.tp-product-details-rating {
  margin-right: 11px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.tp-product-details-rating span {
  font-size: 12px;
  color: #FFB21D;
}

.tp-product-details-rating span:not(:last-child) {
  margin-right: 3px;
}

.tp-product-details-price {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--tp-common-black);
}

.tp-product-details-price.new-price {
  color: var(--tp-common-black);
}

.tp-product-details-price.old-price {
  font-weight: 400;
  font-size: 16px;
  text-decoration-line: line-through;
  color: #767A7D;
}

.tp-product-details-wrapper>p {
  font-size: 15px;
  line-height: 1.7;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-wrapper>p span {
  font-weight: 500;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-price {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-price.old-price {
  font-weight: 400;
  font-size: 16px;
  text-decoration-line: line-through;
  color: #767A7D;
}

.tp-product-details-action-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 13px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-action-wrapper {
  margin-bottom: 17px;
}

.tp-product-details-action-sm {
  padding-bottom: 9px;
  border-bottom: 1px solid #EAEBED;
  margin-bottom: 25px;
}

.tp-product-details-action-sm-btn {
  font-size: 16px;
  margin-bottom: 10px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-action-sm-btn:not(:last-child) {
  margin-right: 10px;
}

.tp-product-details-action-sm-btn i,
.tp-product-details-action-sm-btn svg {
  margin-right: 2px;
}

.tp-product-details-action-sm-btn:hover {
  color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  2.15 Section Title
/*----------------------------------------*/
.tp-section-title {
  font-weight: 500;
  font-size: 100px;
  line-height: 0.9;
  color: var(--tp-common-black);
  margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title {
    font-size: 85px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title {
    font-size: 70px;
  }
}

@media (max-width: 767px) {
  .tp-section-title {
    font-size: 50px;
  }
}

.tp-section-title span {
  font-weight: 400;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
}

.tp-section-title.fs-160 {
  font-size: 160px;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -6.4px;
  color: var(--tp-common-white);
  margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-section-title.fs-160 {
    font-size: 140px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title.fs-160 {
    font-size: 110px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-section-title.fs-160 {
    font-size: 90px;
  }
}

.tp-section-title-90 {
  font-size: 90px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.8px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title-90 {
    font-size: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-90 {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .tp-section-title-90 {
    font-size: 45px;
  }
}

.tp-section-title-90 span {
  font-size: 36px;
  transform: translateY(-23px);
  display: inline-block;
}

.tp-section-title-80 {
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.8px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title-80 {
    font-size: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-80 {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .tp-section-title-80 {
    font-size: 45px;
  }
}

.tp-section-title-80 span {
  font-size: 36px;
  transform: translateY(-23px);
  display: inline-block;
}

.tp-section-title-200 {
  font-size: 200px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-section-title-200 {
    font-size: 150px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-section-title-200 {
    font-size: 140px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title-200 {
    font-size: 135px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-200 {
    font-size: 160px;
  }
}

@media (max-width: 767px) {
  .tp-section-title-200 {
    font-size: 90px;
  }
}

.tp-section-title-200 span {
  padding-left: 175px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
(max-width: 767px) {
  .tp-section-title-200 span {
    padding-left: 0;
  }
}

.tp-section-title-40 {
  color: var(--tp-common-black);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-40 {
    font-size: 37px;
  }
}

@media (max-width: 767px) {
  .tp-section-title-40 {
    font-size: 34px;
  }
}

.tp-section-title-40.font-style-2 {
  font-family: var(--tp-ff-marcellus);
}

.tp-section-title-220 {
  font-size: 220px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-gallery);
}

.tp-section-title-220 .text-1 {
  position: relative;
  z-index: 2;
  margin-right: 250px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-section-title-220 .text-1 {
    margin-right: 190px;
  }
}

.tp-section-title-160 {
  font-weight: 600;
  font-size: 160px;
  line-height: 104%;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-section-title-160 {
    font-size: 125px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title-160 {
    font-size: 110px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-160 {
    font-size: 90px;
  }
}

@media (max-width: 767px) {
  .tp-section-title-160 {
    font-size: 60px;
  }
}

.tp-section-subtitle {
  font-weight: 400;
  font-size: 20px;
  line-height: 16px;
  color: var(--tp-common-black);
  display: inline-block;
}

.tp-section-subtitle.subtitle-position {
  position: absolute;
  right: 80px;
  bottom: 17px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-subtitle.subtitle-position {
    right: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-subtitle.subtitle-position {
    right: 10px;
  }
}

@media (max-width: 767px) {
  .tp-section-subtitle.subtitle-position {
    right: -20px;
    bottom: 9px;
  }
}

.tp-section-subtitle-2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 25px;
  display: inline-block;
  margin-left: 70px;
}

@media (max-width: 767px) {
  .tp-section-subtitle-2 {
    margin-left: 0;
  }
}

.tp-section-subtitle-2 .tp-subtitle-text {
  padding: 0px 15px;
  display: inline-block;
}

.tp-section-subtitle-3 {
  color: var(--tp-common-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.4px;
  margin-bottom: 20px;
  display: inline-block;
}

.tp-section-subtitle-3 span svg {
  margin-right: 8px;
  transform: translateY(-2px);
  color: var(--tp-common-black);
  animation: rotate2 3s linear infinite;
}

/*----------------------------------------*/
/*  2.16 Search css start
/*----------------------------------------*/
.search__popup {
  padding: 70px;
  padding-top: 70px;
  padding-bottom: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  -webkit-transform: translateY(calc(-100% - 80px));
  -moz-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  -o-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  -moz-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transition-delay: 0.7s;
}

.search__popup.search-opened {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  transition-delay: 0s;
}

.search__popup.search-opened .search__input {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.3s;
}

.search__popup.search-opened .search__input::after {
  width: 100%;
  transition-delay: 0.5s;
}

.search__popup-2 {
  background-color: var(--tp-common-black-13);
}

.search__popup-2 .search__input .search-input-field~.search-focus-border {
  background-color: var(--tp-theme-8);
}

.search__popup-3 .search__input .search-input-field~.search-focus-border {
  background-color: var(--tp-theme-10);
}

.search__top {
  margin-bottom: 80px;
}

.search__input {
  position: relative;
  height: 80px;
  transition: all 0.3s ease-out 0s;
  transition-delay: 0.5s;
  opacity: 0;
}

.search__input::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease-out 0s;
  transition-delay: 0.3s;
}

.search__input input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 24px;
  color: var(--tp-common-white);
  border-bottom: 1px solid transparent;
  padding: 0;
  padding-right: 30px;
}

.search__input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}

.search__input input::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}

.search__input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}

.search__input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}

.search__input input::placeholder {
  /* MODERN BROWSER */
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}

.search__input 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: 18px;
  color: var(--tp-common-white);
}

.search__input .search-input-field~.search-focus-border {
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 1px;
  background-color: var(--tp-common-orange);
  -webkit-transition: 0.5s 0.3s ease-out;
  -moz-transition: 0.5s 0.3s ease-out;
  -ms-transition: 0.5s 0.3s ease-out;
  -o-transition: 0.5s 0.3s ease-out;
  transition: 0.5s 0.3s ease-out;
}

.search__input .search-input-field:focus~.search-focus-border {
  width: 100%;
  left: 0;
  right: auto;
  -webkit-transition: 0.5s 0.3s ease-out;
  -moz-transition: 0.5s 0.3s ease-out;
  -ms-transition: 0.5s 0.3s ease-out;
  -o-transition: 0.5s 0.3s ease-out;
  transition: 0.5s 0.3s ease-out;
}

.search__close-btn {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.3);
}

.search__close-btn:hover {
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  2.17 Hostspot css start
/*----------------------------------------*/
.tp-hotspot {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  color: var(--tp-common-black);
  border-radius: 50%;
  background-color: var(--tp-common-white);
  position: absolute;
  z-index: 1;
}

.tp-hotspot:hover {
  cursor: pointer;
}

/*----------------------------------------*/
/*  2.178 Range Slider css start
/*----------------------------------------*/
.ui-button-icon-only,
.ui-controlgroup-vertical .ui-controlgroup-item {
  box-sizing: border-box;
}

.ui-checkboxradio-disabled,
.ui-state-disabled {
  pointer-events: none;
}

.ui-datepicker .ui-icon,
.ui-icon {
  text-indent: -99999px;
  background-repeat: no-repeat;
}

.ui-helper-reset,
.ui-menu {
  outline: 0;
  list-style: none;
}

.ui-helper-hidden,
.ui-resizable-autohide .ui-resizable-handle,
.ui-resizable-disabled .ui-resizable-handle {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
}

.ui-helper-clearfix:after,
.ui-helper-clearfix:before {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

.ui-state-disabled {
  cursor: default !important;
}

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.25em;
  position: relative;
  overflow: hidden;
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
}

.ui-autocomplete,
.ui-menu .ui-menu {
  position: absolute;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  top: 0;
  left: 0;
  cursor: default;
}

.ui-menu {
  padding: 0;
  margin: 0;
  display: block;
}

.ui-button,
.ui-controlgroup {
  display: inline-block;
  vertical-align: middle;
}

.ui-button,
.ui-menu-icons,
.ui-resizable {
  position: relative;
}

.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0;
}

.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
  margin: -1px;
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em;
}

.ui-button,
.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}

.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}

.ui-button {
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: visible;
}

.ui-button,
.ui-button:active,
.ui-button:hover,
.ui-button:link,
.ui-button:visited {
  text-decoration: none;
}

.ui-button-icon-only {
  width: 2em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-button-icon-only {
  text-indent: 0;
}

.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  padding: 0;
  width: 2.1em;
  height: 2.1em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  text-indent: 0;
  white-space: normal;
  padding: 0.4em 1em;
}

button.ui-button::-moz-focus-inner,
input.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-controlgroup>.ui-controlgroup-item {
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.ui-controlgroup>.ui-controlgroup-item.ui-visual-focus,
.ui-controlgroup>.ui-controlgroup-item:focus {
  z-index: 9999;
}

.ui-controlgroup-vertical>.ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}

.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}

.ui-controlgroup-horizontal .ui-controlgroup-label+.ui-controlgroup-item {
  border-left: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label+.ui-controlgroup-item {
  border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
  border-right: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
  border-bottom: none;
}

.ui-controlgroup-vertical .ui-spinner-input {
  width: 75%;
  width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  box-shadow: inset 1px 1px 1px #ccc;
  border-radius: 0.12em;
  border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  overflow: visible;
  border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  background-image: none;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: 700;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-multi .ui-datepicker-group,
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-datepicker .ui-icon {
  display: block;
  overflow: hidden;
  left: 0.5em;
  top: 0.3em;
}

.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: 0 0;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-n {
  height: 2px;
  top: 0;
}

.ui-dialog .ui-resizable-e {
  width: 2px;
  right: 0;
}

.ui-dialog .ui-resizable-s {
  height: 2px;
  bottom: 0;
}

.ui-dialog .ui-resizable-w {
  width: 2px;
  left: 0;
}

.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw,
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw {
  width: 7px;
  height: 7px;
}

.ui-dialog .ui-resizable-se {
  right: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-sw {
  left: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-ne {
  right: 0;
  top: 0;
}

.ui-dialog .ui-resizable-nw {
  left: 0;
  top: 0;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle,
.ui-selectable,
.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
  height: 100%;
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted #000;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-text {
  display: block;
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
  text-align: left;
  white-space: nowrap;
  width: 14em;
}

.ui-selectmenu-icon.ui-icon {
  float: right;
  margin-top: 0;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min,
.ui-spinner-down {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max,
.ui-spinner-up {
  top: 0;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: 0 0;
  color: inherit;
  padding: 0.222em 0;
  margin: 0.2em 2em 0.2em 0.4em;
  vertical-align: middle;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

.ui-spinner a.ui-spinner-button {
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
}

.ui-tabs {
  position: relative;
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: 0 0;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
}

body .ui-tooltip {
  border-width: 2px;
}

.ui-widget,
.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
}

.ui-widget-content a,
.ui-widget-header a {
  color: #333;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: #e9e9e9;
  color: #333;
  font-weight: 700;
}

.ui-button,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:active,
html .ui-button.ui-state-disabled:hover {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: 400;
  color: #454545;
}

.ui-button,
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-button:focus,
.ui-button:hover,
.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
  border: 1px solid #ccc;
  background: #ededed;
  font-weight: 400;
  color: #2b2b2b;
}

.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
a.ui-button:focus,
a.ui-button:hover {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px #5e9ed6;
}

.ui-button.ui-state-active:hover,
.ui-button:active,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: 400;
  color: #fff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #fff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error a,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error a,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: 700;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  font-weight: 400;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
}

.ui-icon {
  width: 16px;
  height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-button:focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-hover .ui-icon {
  background-image: url("images/ui-icons_555555_256x240.png");
}

.ui-button:active .ui-icon,
.ui-state-active .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-button .ui-state-highlight.ui-icon,
.ui-state-highlight .ui-icon {
  background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
  background-image: url("images/ui-icons_777777_256x240.png");
}

.ui-icon-blank {
  background-position: 16px 16px;
}

.ui-icon-caret-1-n {
  background-position: 0 0;
}

.ui-icon-caret-1-ne {
  background-position: -16px 0;
}

.ui-icon-caret-1-e {
  background-position: -32px 0;
}

.ui-icon-caret-1-se {
  background-position: -48px 0;
}

.ui-icon-caret-1-s {
  background-position: -65px 0;
}

.ui-icon-caret-1-sw {
  background-position: -80px 0;
}

.ui-icon-caret-1-w {
  background-position: -96px 0;
}

.ui-icon-caret-1-nw {
  background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-first,
.ui-icon-seek-start {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

.ui-corner-all,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-top {
  border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-right,
.ui-corner-top,
.ui-corner-tr {
  border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bl,
.ui-corner-bottom,
.ui-corner-left {
  border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-br,
.ui-corner-right {
  border-bottom-right-radius: 3px;
}

.ui-widget-overlay {
  background: #aaa;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
  -webkit-box-shadow: 0 0 5px #666;
  box-shadow: 0 0 5px #666;
}

body.tp-magic-cursor #magic-cursor {
  display: block;
}

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  top: 0;
  left: 0;
}

#ball {
  position: fixed;
  display: flex;
  align-items: center;
  pointer-events: none;
  background-color: var(--tp-common-black);
  border-radius: 50%;
  justify-content: center;
  mix-blend-mode: difference;
  color: transparent;
}

/* Ball view 
============= */
#ball .ball-view {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  line-height: 1.3;
  text-align: center;
  transform: scale(0);
}

/* Ball drag 
============= */
#ball .ball-drag {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  text-align: center;
  transition: all 0.3s;
}

#ball .ball-drag::before,
#ball .ball-drag::after {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  font-size: 19px;
  color: #FFF;
  height: 10px;
  line-height: 10px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#ball .ball-drag::before {
  content: "\f104";
  /* Font Awesome */
  left: 0;
  transform: translate3d(-30px, 0, 0);
  transition: all 0.25s;
}

#ball .ball-drag::after {
  content: "\f105";
  /* Font Awesome */
  right: 0;
  transform: translate3d(30px, 0, 0);
  transition: all 0.25s;
}

#ball.with-blur {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Ball close 
============== */
#ball.ball-close-enabled {
  opacity: 1 !important;
}

#ball .ball-close {
  position: absolute;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  line-height: 1;
  text-align: center;
}

.tp-magnetic-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* HEADER CSS */
/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
.container {
  transition: all 1s;
}

.tp-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  z-index: 999;
  visibility: visible;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 1px 3px 0px rgba(18, 20, 32, 0.14);
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
}

.header-sticky .ab-logo-1 {
  display: none;
}

.header-sticky .ab-logo-2 {
  display: block;
}

.header-sticky::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  z-index: -1;
}

.ab-logo-2 {
  display: none;
}

.tp-header-style-9 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.logo-2 {
  display: none;
}

.tp-header-logo img {
  width: 250px;
  height: 100%;
}

.tp-header-area.header-sticky .container {
  max-width: 100%;
}

.tp-header-area.header-sticky .tp-header-menu>nav>ul>li>a {
  padding: 27px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-header-mob-space {
    padding: 20px 0px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-header-area {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-header-area {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.tp-header-menu>nav>ul>li {
  display: inline-block;
  list-style-type: none;
  margin: 0px 25px;
}

.tp-header-menu>nav>ul>li>a {
  padding: 40px 0;
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

.tp-header-bar {
  line-height: 0;
}

.tp-header-bar button span {
  height: 2px;
  width: 40px;
  background-color: var(--tp-common-black);
  display: block;
  margin: 6px 0;
}

.tp-header-bar button:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}

.tp-header-bar button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}

/*----------------------------------------*/
/*  3.2 Header Style 2
/*----------------------------------------*/
.tp-header-2-area.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  z-index: 999;
  visibility: visible;
  background: #FFF8ED;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
}

.tp-header-2-area.header-sticky::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(4px);
  z-index: -1;
}

.tp-header-2-ptb {
  padding: 15px 0;
}

.tp-header-2-space {
  padding: 35px 0;
}

.tp-header-2-menu-bar {
  line-height: 0;
}

.tp-header-2-menu-bar button span {
  height: 2px;
  width: 80px;
  background-color: var(--tp-common-black);
  display: block;
  margin: 8px auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-header-2-menu-bar button span {
    width: 45px;
  }
}

.tp-header-2-menu-bar button:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}

.tp-header-2-menu-bar button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}

.tp-header-2-button {
  overflow: hidden;
  width: 180px;
  margin-left: auto;
  line-height: 0;
}

.tp-header-2-cart button {
  font-size: 18px;
  font-weight: 400;
  line-height: 14px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-body);
}

.tp-header-2-cart button span {
  height: 45px;
  width: 45px;
  line-height: 37px;
  border: 1px solid;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin-left: 7px;
}

/*----------------------------------------*/
/*  3.3 Header Style 3
/*----------------------------------------*/
.tp-header-3-area.header-sticky {
  box-shadow: none;
  background: none;
}

.tp-header-3-area.header-sticky::after {
  backdrop-filter: initial;
}

.tp-header-3-area.header-sticky .tp-header-3-logo {
  display: none;
}

.tp-header-3-area.header-sticky .tp-header-3-right {
  display: none !important;
}

.tp-header-3-menu-box {
  display: inline-block;
  padding: 0px 15px;
  padding-right: 30px;
}

.menu-bg {
  position: absolute;
  top: 0;
  display: inline-block;
  backdrop-filter: blur(8px);
  background: rgba(46, 46, 46, 0.9);
  border-radius: 100px;
  z-index: -1;
}

.tp-header-3-bar {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-black);
  border: 1px solid var(--tp-common-black);
  transition: 0.3s;
  margin-left: 15px;
  border-radius: 50%;
}

.tp-header-3-bar:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-header-3-menu>nav>ul>li {
  list-style: none;
  display: inline-block;
  margin: 0px 15px;
}

.tp-header-3-menu>nav>ul>li>a {
  font-size: 17px;
  font-weight: 500;
  padding: 12px 0;
  transition: 0.3s;
  display: inline-block;
  color: var(--tp-common-white);
}

.tp-header-3-menu>nav>ul>li>a span {
  margin-left: 5px;
}

.tp-header-3-menu>nav>ul>li:hover {
  color: var(--tp-common-white);
}

.tp-header-3-cart button span {
  margin-left: 7px;
  display: inline-block;
}

.tp-header-3-cart button em {
  position: absolute;
  right: -12px;
  top: -1px;
  color: var(--tp-common-black);
  font-size: 18px;
  font-weight: 400;
  height: 18px;
  width: 18px;
  line-height: 16px;
  border-radius: 50%;
  text-align: center;
  background-color: var(--tp-common-white);
  font-style: normal;
}

.tp-header-3-social a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50%;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  background-color: var(--tp-grey-2);
  color: var(--tp-common-black);
  margin-left: 5px;
  transition: 0.3s;
}

.tp-header-3-social a:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  3.4 Header Style 4
/*----------------------------------------*/
.tp-header-4-area.header-sticky {
  background-color: rgba(25, 25, 26, 0.85);
}

.tp-header-4-area.header-sticky .tp-header-4-menu>nav>ul>li>a {
  padding: 32px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-header-4-mob-space {
    padding: 15px 0;
  }
}

.tp-header-4-bar {
  height: 44px;
  width: 44px;
  line-height: 44px;
  font-size: 20px;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-white);
  border: 1px solid var(--tp-common-white);
  transition: 0.3s;
}

.tp-header-4-bar:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.tp-header-4-menu>nav>ul>li {
  list-style-type: none;
  display: inline-block;
  margin-right: 45px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-header-4-menu>nav>ul>li {
    margin-right: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-header-4-menu>nav>ul>li {
    margin-right: 25px;
  }
}

.tp-header-4-menu>nav>ul>li>a {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 43px 0;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-white);
}

.tp-header-4-btn {
  line-height: 0;
}

/*----------------------------------------*/
/*  3.5 Header Style 5
/*----------------------------------------*/
.tp-header-5-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  height: 100%;
  z-index: 99;
  padding: 50px 60px;
  background-color: var(--tp-common-black);
}

.tp-header-5-logo {
  padding-bottom: 115px;
}

.tp-header-5-menu {
  margin-bottom: 220px;
}

.tp-header-5-menu nav ul li {
  list-style-type: none;
  line-height: 0;
  padding: 15px 0;
}

.tp-header-5-menu nav ul li:last-child {
  padding-bottom: 0;
}

.tp-header-5-menu nav ul li a {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.34px;
  color: var(--tp-common-white);
  display: inline-block;
}

.tp-header-5-search-box {
  margin-bottom: 55px;
}

.tp-header-5-search-input input {
  background-color: transparent;
  border: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--tp-common-white);
  border-bottom: 1px solid rgba(245, 247, 245, 0.1);
  padding: 0;
  padding-right: 30px;
}

.tp-header-5-search-input input:focus {
  border-color: var(--tp-common-white);
}

.tp-header-5-search-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
}

.tp-header-5-search-input input::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
}

.tp-header-5-search-input input:-moz-placeholder {
  /* Firefox 4-18 */
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
}

.tp-header-5-search-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
}

.tp-header-5-search-input input::placeholder {
  /* MODERN BROWSER */
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
}

.tp-header-5-search-input button {
  position: absolute;
  top: 14px;
  right: 0;
}

.tp-header-5-cart {
  display: inline-block;
}

.tp-header-5-cart a {
  height: 54px;
  width: 54px;
  line-height: 49px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}

.tp-header-5-cart a span {
  height: 18px;
  width: 18px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  position: absolute;
  top: 0;
  right: 0;
}

.tp-header-5-cart-price {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.36px;
  color: var(--tp-common-white);
  margin-left: 10px;
}

/*----------------------------------------*/
/*  3.6 Header Style 6
/*----------------------------------------*/
.tp-header-6-menu-box span {
  font-size: 18px;
  font-weight: 400;
  line-height: 14px;
  color: var(--tp-common-white);
}

.tp-header-6-menubar {
  margin-left: 18px;
}

.tp-header-6-menubar span {
  height: 2px;
  width: 36px;
  display: inline-block;
  background-color: var(--tp-common-white);
  display: table;
  margin: 8px 0;
}

/*----------------------------------------*/
/*  3.7 Header Style 7
/*----------------------------------------*/
.tp-header-7-area {
  position: fixed;
  width: 80px;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}

.tp-header-7-wrap {
  padding: 30px 25px;
  padding-bottom: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--tp-common-black);
  box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.tp-header-7-menubar {
  line-height: 0;
}

.tp-header-7-menubar button {
  line-height: 0;
}

.tp-header-7-menubar button span {
  height: 2px;
  width: 36px;
  display: inline-block;
  background-color: var(--tp-common-white);
  display: table;
  margin: 8px 0;
}

.tp-header-7-menubar button:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}

.tp-header-7-menubar button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}

.tp-header-7-btn-box {
  transform: rotate(-90deg);
  line-height: 0;
  padding-left: 60px;
}

.tp-header-7-lg-area.tp-header-7-area {
  position: relative;
  width: 100%;
}

.tp-header-7-lg-area .tp-header-7-wrap {
  flex-direction: row;
  padding: 20px 25px;
}

.tp-header-7-lg-area .tp-header-7-btn-box {
  transform: rotate(0deg);
  padding-left: 0;
}

/*----------------------------------------*/
/*  3.9 Header Style 9
/*----------------------------------------*/
.tp-header-style-9 .tp-header-6-menu-box span {
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-header-style-9 .tp-header-6-menubar span {
  background-color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  3.10 Header Style 10
/*----------------------------------------*/
.tp-header-10-menubar button span {
  height: 2px;
  width: 36px;
  display: table;
  margin: 8px 0;
  transform: translateY(5px);
  background-color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  3.11 Header Style 11
/*----------------------------------------*/
.tp-inner-header-style-2 .tp-inner-header-menu nav>ul>li>a {
  color: var(--tp-common-black);
}

.tp-inner-header-style-2 .tp-inner-header-right-action ul li .tp-inner-bar {
  color: var(--tp-common-black);
}

.tp-inner-header-style-2 .tp-inner-header-right-action ul li .tp-inner-cart {
  color: var(--tp-common-black);
}

.tp-inner-header-style-2 .tp-inner-header-right-action ul li .tp-inner-cart a span i {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.tp-inner-header-style-3 .tp-inner-header-right-action ul::after {
  display: none;
}

.tp-inner-header-menu>nav>ul>li {
  text-decoration: none;
  display: inline-block;
  margin: 0px 25px;
}

.tp-inner-header-menu>nav>ul>li>a {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 45px 0px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-syne);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-inner-header-mob-space {
    padding: 20px 0;
  }
}

.tp-inner-header-right-action ul {
  position: relative;
  margin-left: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-inner-header-right-action ul {
    margin-left: 0;
  }
}

.tp-inner-header-right-action ul li {
  display: inline-block;
  margin-left: 40px;
}

.tp-inner-header-right-action ul li .tp-inner-cart {
  color: var(--tp-common-white);
}

.tp-inner-header-right-action ul li .tp-inner-cart a span i {
  position: absolute;
  top: -10px;
  right: -13px;
  height: 22px;
  width: 22px;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  font-style: normal;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
}

.tp-inner-header-right-action ul li .tp-inner-bar {
  color: var(--tp-common-white);
}

.tp-inner-header-border {
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}

.tp-inner-header-height .tp-inner-header-menu nav ul li a {
  padding: 32px 0px;
}

.tp-inner-header-2-bg {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.tp-inner-header-2-bg .tp-shop-mob-search span {
  color: var(--tp-common-black);
}

.tp-inner-header-2-menu>nav>ul>li {
  list-style-type: none;
  display: inline-block;
  margin: 0px 22px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-inner-header-2-menu>nav>ul>li {
    margin: 0px 15px;
  }
}

.tp-inner-header-2-menu>nav>ul>li>a {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  padding: 41px 0;
  display: inline-block;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-inner-header-2-right button,
.tp-inner-header-2-right a {
  margin-left: 30px;
}

@media (max-width: 767px) {

  .tp-inner-header-2-right button,
  .tp-inner-header-2-right a {
    margin-left: 20px;
  }
}

.tp-inner-header-2-cart {
  height: 42px;
  width: 42px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #EEE;
  flex: 0 0 auto;
}

.tp-inner-header-2-cart span {
  color: var(--tp-common-white);
}

.tp-inner-header-2-cart:hover {
  border-color: var(--tp-common-white);
  background-color: var(--tp-common-white);
}

.tp-inner-header-2-cart:hover span {
  color: var(--tp-common-black);
}

.tp-inner-header-2-wishlist i {
  position: absolute;
  top: -4px;
  right: -8px;
  height: 16px;
  width: 16px;
  line-height: 14px;
  border-radius: 50%;
  text-align: center;
  font-style: normal;
  display: inline-block;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.tp-inner-header-2-wishlist span {
  color: var(--tp-common-black);
}

.tp-inner-header-2-search input {
  height: 42px;
  border-radius: 30px;
  background-color: transparent;
  border: 1px solid #EEE;
  padding: 0px 30px;
  padding-left: 45px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  font-weight: 400;
}

.tp-inner-header-2-search input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  font-weight: 400;
}

.tp-inner-header-2-search input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  font-weight: 400;
}

.tp-inner-header-2-search input:-moz-placeholder {
  /* Firefox 4-18 */
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  font-weight: 400;
}

.tp-inner-header-2-search input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  font-weight: 400;
}

.tp-inner-header-2-search input::placeholder {
  /* MODERN BROWSER */
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  font-weight: 400;
}

.tp-inner-header-2-search input:focus {
  border-color: 1px solid var(--tp-common-black);
}

.tp-inner-header-2-search span {
  position: absolute;
  top: 48%;
  left: 20px;
  transform: translateY(-50%);
  color: var(--tp-common-black);
}

.tp-inner-header-white .tp-inner-header-2-menu>nav>ul>li>a {
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-wishlist span {
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-wishlist i {
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-bar span {
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-cart span {
  color: var(--tp-common-white);
  transition: 0.3s;
}

.tp-inner-header-white .tp-inner-header-2-cart:hover span {
  color: var(--tp-common-black);
}

.tp-inner-header-white .tp-inner-header-2-search input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search input:-moz-placeholder {
  /* Firefox 4-18 */
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search input::placeholder {
  /* MODERN BROWSER */
  color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search input:focus {
  border-color: var(--tp-common-white);
}

.tp-inner-header-white .tp-inner-header-2-search span {
  color: var(--tp-common-white);
}

.tp-inner-header-2-bg .tp-inner-header-2-cart span {
  color: var(--tp-common-black);
}

.header-sticky.tp-inner-header-area .tp-inner-header-menu>nav>ul>li>a {
  padding: 25px 0px;
  color: var(--tp-common-black);
}

.header-sticky.tp-inner-header-area .tp-inner-header-right-action ul li .tp-inner-cart {
  color: var(--tp-common-black);
}

.header-sticky.tp-inner-header-area .tp-inner-header-right-action ul li .tp-inner-cart a span i {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.header-sticky.tp-inner-header-area .tp-inner-header-right-action ul li .tp-inner-bar {
  color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/
.header-main-menu>nav>ul>li>.submenu {
  position: absolute;
  width: 330px;
  z-index: 999;
  padding: 35px 0px;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  text-align: left;
  margin-left: 0;
  overflow: hidden;
  transform-origin: top;
  transition-duration: 0.1s;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1);
  -webkit-transform: perspective(300px) rotateX(-18deg);
  -moz-transform: perspective(300px) rotateX(-18deg);
  -ms-transform: perspective(300px) rotateX(-18deg);
  -o-transform: perspective(300px) rotateX(-18deg);
  transform: perspective(300px) rotateX(-18deg);
}

.header-main-menu>nav>ul>li>.submenu>li {
  list-style: none;
  display: block;
  padding: 0 45px;
}

.header-main-menu>nav>ul>li>.submenu>li:not(:last-child) {
  margin-bottom: 13px;
}

.header-main-menu>nav>ul>li>.submenu>li>a {
  color: #575758;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  position: relative;
}

.header-main-menu>nav>ul>li>.submenu>li>a::before {
  position: absolute;
  top: 10px;
  left: 0;
  content: "";
  height: 2px;
  width: 0px;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  transition: all 0.3s ease-out 0s;
  background-color: var(--tp-common-black);
}

.header-main-menu>nav>ul>li>.submenu>li:hover>a {
  padding-left: 25px;
  color: var(--tp-common-black);
}

.header-main-menu>nav>ul>li>.submenu>li:hover>a::before {
  width: 20px;
  visibility: visible;
  opacity: 1;
}

.header-main-menu>nav>ul>li>.submenu .submenu {
  left: 100%;
  top: 0;
}

.header-main-menu>nav>ul>li:hover>.submenu {
  visibility: visible;
  opacity: 1;
  transition-duration: 0.2s;
  -webkit-transform: perspective(300px) rotateX(0deg);
  -moz-transform: perspective(300px) rotateX(0deg);
  -ms-transform: perspective(300px) rotateX(0deg);
  -o-transform: perspective(300px) rotateX(0deg);
  transform: perspective(300px) rotateX(0deg);
}

.header-main-menu>nav>ul>li.has-homemenu {
  position: static;
}

.header-main-menu>nav>ul>li.has-homemenu .tp-mega-menu {
  width: 100%;
}

.header-main-menu>nav>ul>li>.tp-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0;
  width: 1170px;
  margin: 0 auto;
}

.header-main-menu>nav>ul>li>.tp-mega-menu .tp-homemenu-wrapper {
  padding: 70px 70px 20px 70px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-main-menu>nav>ul>li>.tp-mega-menu .tp-homemenu-wrapper {
    padding: 50px 50px 20px 50px;
  }
}

.header-main-menu>nav>ul>li>.tp-mega-menu .tp-homemenu-wrapper .homemenu {
  margin-bottom: 40px;
}

.header-main-menu>nav>ul>li>.tp-mega-menu .tp-megamenu-portfolio {
  padding: 20px 0px 25px 70px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-main-menu>nav>ul>li>.tp-mega-menu .tp-megamenu-portfolio {
    padding: 20px 0px 25px 20px;
  }
}

.homemenu-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.15px;
  color: var(--tp-common-black);
  text-transform: uppercase;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .homemenu-title {
    font-size: 13px;
    letter-spacing: normal;
  }
}

.homemenu-thumb img {
  width: 100%;
  transition: 1s;
}

.homemenu-thumb-wrap {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.homemenu-thumb:hover img {
  transform: scale(1.1);
}

.tp-megamenu-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: block;
  padding-bottom: 20px;
  margin-bottom: 30px;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border-bottom: 1px solid rgba(58, 57, 54, 0.1);
  padding-left: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-megamenu-title {
    font-size: 15px;
  }
}

.tp-megamenu-title a {
  padding-left: 20px;
}

.tp-megamenu-list-box {
  padding: 25px 0px 30px 20px;
}

.tp-megamenu-list-wrap ul {
  margin-left: 20px;
  display: inline-block;
}

.tp-megamenu-list-wrap ul li {
  list-style: none;
  width: 50%;
  float: left;
}

.tp-megamenu-list-wrap ul li:not(:last-child) {
  margin-bottom: 15px;
}

.tp-megamenu-list-wrap ul li a {
  color: #575758;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  position: relative;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-megamenu-list-wrap ul li a {
    font-size: 13px;
    letter-spacing: normal;
  }
}

.tp-megamenu-list-wrap ul li a::before {
  position: absolute;
  top: 10px;
  left: 0;
  content: "";
  height: 2px;
  width: 0px;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  transition: all 0.3s ease-out 0s;
  background-color: var(--tp-common-black);
}

.tp-megamenu-list-wrap ul li:hover a {
  padding-left: 25px;
  color: var(--tp-common-black);
}

.tp-megamenu-list-wrap ul li:hover a::before {
  width: 20px;
  visibility: visible;
  opacity: 1;
}

.tp-megamenu-list-2 .tp-megamenu-list-wrap ul li {
  float: inherit;
  width: 100%;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px),
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),
(max-width: 767px) {
  .tp-megamenu-list-2 {
    margin-left: 0;
  }
}

.tp-megamenu-shop-style {
  height: 100%;
}

.tp-megamenu-shop-style .tp-shop-banner-left {
  height: 100%;
}

.tp-megamenu-shop-style .tp-shop-banner-thumb {
  height: 100%;
  overflow: hidden;
}

.tp-megamenu-shop-style .tp-shop-banner-thumb img {
  height: 371px;
  width: 100%;
}

.tp-megamenu-shop-style .tp-shop-banner-content {
  margin: 25px;
}

.tp-megamenu-shop-style .tp-shop-banner-title {
  font-size: 50px;
  margin-bottom: 10px;
}

.tp-megamenu-shop-style .tp-shop-banner-content span {
  font-size: 14px;
  margin-bottom: 18px;
}

.tp-megamenu-shop-style .tp-shop-btn {
  font-size: 13px;
  height: 30px;
  line-height: 29px;
  padding: 0px 18px;
  transition: 0.3s;
}

.tp-megamenu-shop-style .tp-shop-btn:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
  border-color: var(--tp-common-white);
}

.tp-megamenu-portfolio-banner {
  position: absolute;
  top: 0;
  right: 0px;
  height: 100%;
}

.tp-megamenu-portfolio-banner img {
  height: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-megamenu-portfolio-banner {
    right: -130px;
  }
}

.tp-megamenu-wrapper {
  padding: 20px;
}

.tp-megamenu-portfolio-text {
  position: relative;
  z-index: 99;
  bottom: -35px;
  transform: rotate(-90deg) translateY(-110%);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-megamenu-portfolio-text {
    bottom: -40px;
  }
}

.tp-megamenu-portfolio-text h4 {
  font-size: 160px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0;
  letter-spacing: -1.6px;
  -webkit-text-stroke-width: 1px;
  font-family: var(--tp-ff-shoulders);
  -webkit-text-stroke-color: rgba(25, 25, 26, 0.1);
  color: transparent;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-megamenu-portfolio-text h4 {
    font-size: 120px;
  }
}

.tp-megamenu-portfolio-text span {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
  color: rgba(25, 25, 26, 0.4);
  font-family: var(--tp-ff-shoulders);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-megamenu-portfolio-text span {
    font-size: 21px;
  }
}

.tp-main-menu-mobile .tp-submenu {
  display: none;
}

.tp-main-menu-mobile .header-icon {
  display: none;
}

.tp-main-menu-mobile nav ul {
  position: static;
  display: block;
  box-shadow: none;
  margin-bottom: 50px;
}

.tp-main-menu-mobile nav ul li {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
}

.tp-main-menu-mobile nav ul li:not(:last-child)>a {
  border-bottom: 1px solid rgba(6, 7, 40, 0.1);
}

.tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  font-size: 18px;
  color: #7F8387;
  font-family: "Font Awesome 5 Pro";
  transition: all 0.3s ease-in-out;
  text-align: center;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
  padding: 15px 20px;
  padding-left: 100px;
}

@media (max-width: 767px) {
  .tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn {
    right: 0;
  }
}

.tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn i {
  transition: all 0.3s ease-in-out;
}

.tp-main-menu-mobile nav ul li.has-dropdown>a .dropdown-toggle-btn.dropdown-opened i {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.tp-main-menu-mobile nav ul li.has-dropdown>a.expanded {
  color: var(--tp-common-black);
}

.tp-main-menu-mobile nav ul li.has-dropdown>a.expanded .dropdown-toggle-btn.dropdown-opened {
  color: var(--tp-common-black);
}

.tp-main-menu-mobile nav ul li.has-dropdown>a.expanded .dropdown-toggle-btn.dropdown-opened i {
  color: var(--tp-common-black);
}

.tp-main-menu-mobile nav ul li:last-child a span {
  border-bottom: 0;
}

.tp-main-menu-mobile nav ul li>a {
  display: block;
  position: relative;
  padding: 15px 0;
  padding-right: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.15px;
  color: var(--tp-common-black);
  text-transform: uppercase;
}

.tp-main-menu-mobile nav ul li>a svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.tp-main-menu-mobile nav ul li>a>i {
  display: inline-block;
  width: 11%;
  margin-right: 13px;
  -webkit-transform: translateY(4px);
  -moz-transform: translateY(4px);
  -ms-transform: translateY(4px);
  -o-transform: translateY(4px);
  transform: translateY(4px);
  font-size: 21px;
  line-height: 1;
}

.tp-main-menu-mobile nav ul li>a .menu-text {
  font-size: 16px;
  line-height: 11px;
  border-bottom: 1px solid #EAEBED;
  width: 82%;
  display: inline-block;
  padding: 19px 0 17px;
}

.tp-main-menu-mobile nav ul li img {
  width: 100%;
}

.tp-main-menu-mobile nav ul li ul {
  padding: 0;
}

.tp-main-menu-mobile nav ul li ul li {
  padding: 0;
}

.tp-main-menu-mobile nav ul li ul li a {
  margin-left: auto;
  width: 93%;
  padding: 10px 5%;
  text-shadow: none !important;
  visibility: visible;
  padding-left: 0;
  padding-right: 20px;
}

.tp-main-menu-mobile nav ul li ul li li a {
  width: 88%;
  padding: 10px 7%;
  padding-left: 0;
  padding-right: 20px;
}

.tp-main-menu-mobile nav ul li ul li li li a {
  width: 83%;
  padding: 10px 9%;
  padding-left: 0;
  padding-right: 20px;
}

.tp-main-menu-mobile nav ul li ul li li li li a {
  width: 68%;
  padding: 10px 11%;
  padding-left: 0;
  padding-right: 20px;
}

.tp-main-menu-mobile nav ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}

.tp-main-menu-mobile nav ul li .mega-menu,
.tp-main-menu-mobile nav ul li .submenu {
  position: static;
  min-width: 100%;
  padding: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  display: none;
}

.tp-main-menu-mobile nav ul li .mega-menu li,
.tp-main-menu-mobile nav ul li .submenu li {
  float: none;
  display: block;
  width: 100%;
  padding: 0;
}

.tp-main-menu-mobile nav ul li .mega-menu li:hover a .dropdown-toggle-btn,
.tp-main-menu-mobile nav ul li .submenu li:hover a .dropdown-toggle-btn {
  color: var(--tp-theme-1);
}

.tp-main-menu-mobile .tp-main-menu-content ul li:not(:last-child) .home-menu-title a {
  border-bottom: none;
}

.tp-main-menu-mobile * ul,
.tp-main-menu-mobile * li {
  transition: none !important;
}

.tp-portfolio-menu-style.tp-megamenu-list-wrap ul li {
  width: 100%;
  float: inherit;
}

/*----------------------------------------*/
/*  5.2 Postbox css
/*----------------------------------------*/
.postbox__thumb {
  position: relative;
}

.postbox__thumb .play-btn {
  position: absolute;
  top: 38%;
  left: 44%;
  z-index: 1;
}

.postbox__thumb .play-btn a {
  height: 85px;
  width: 85px;
  line-height: 87px;
}

.postbox__thumb .play-btn a::after {
  display: none;
}

.postbox__item-single:hover {
  box-shadow: none;
}

.postbox__tag {
  position: absolute;
  bottom: 0px;
  left: 0;
}

.postbox__tag p {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.135em;
  background: var(--tp-theme-1);
  clip-path: polygon(0px 0px, 100% 0px, 92.7% 53.45%, 100% 100%, 0px 100%, 0px 50%);
  width: 130px;
}

.postbox__content {
  padding-top: 28px;
}

.postbox__content-single {
  padding-left: 0;
  padding-right: 0;
  border: none;
}

.postbox__title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2.24px;
  color: var(--tp-common-black);
  margin-bottom: 10px;
}

@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) {
  .postbox__title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .postbox__title {
    font-size: 25px;
  }
}

.postbox__title a {
  background-image: -webkit-radial-gradient(#000, #000), -webkit-radial-gradient(#000, #000);
  background-image: -moz-radial-gradient(#000, #000), -moz-radial-gradient(#000, #000);
  background-image: -ms-radial-gradient(#000, #000), -ms-radial-gradient(#000, #000);
  background-image: -o-radial-gradient(#000, #000), -o-radial-gradient(#000, #000);
  background-image: radial-gradient(#000, #000), radial-gradient(#000, #000);
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 91%;
  background-repeat: no-repeat;
}

.postbox__title a:hover {
  background-size: 0 1px, 100% 1px;
}

.postbox__meta {
  margin-bottom: 5px;
}

.postbox__meta span {
  color: #414145;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.postbox__blockquote {
  background: #F4F6F8;
  padding: 50px 65px;
}

@media (max-width: 767px) {
  .postbox__blockquote {
    padding: 20px;
  }
}

.postbox__blockquote-icon {
  margin-bottom: 20px;
  display: inline-block;
}

.postbox__blockquote p {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  margin-bottom: 15px;
}

@media (max-width: 767px) {
  .postbox__blockquote p {
    font-size: 19px;
    font-weight: 28px;
  }
}

.postbox__blockquote-info {
  color: #5D5D63;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
}

.postbox-details-desc-thumb-caption {
  font-size: 18px;
  font-weight: 500;
  color: #807A7A;
  font-style: italic;
  text-align: center;
  display: block;
  margin-top: 30px;
  margin-bottom: 50px;
}

.postbox__list {
  margin-bottom: 60px;
}

.postbox__list-title {
  font-weight: 600;
  font-size: 28px;
  color: #121D2C;
  margin-bottom: 50px;
}

.postbox__list-content ul li {
  list-style: none;
  font-weight: 400;
  font-size: 16px;
  color: #445658;
  margin-bottom: 24px;
  position: relative;
  padding-left: 40px;
}

.postbox__list-content ul li span {
  height: 27px;
  width: 27px;
  line-height: 25px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  background-color: var(--tp-common-white);
  color: var(--tp-theme-1);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.06);
  position: absolute;
  top: 0;
  left: 0;
}

.postbox__list-content ul li span.active {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

.postbox__details-share-wrapper {
  padding-top: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid #F7F7F7;
}

.postbox__details-share span {
  font-size: 20px;
  font-weight: 500;
  color: #121416;
  margin-right: 15px;
}

.postbox__details-share a {
  height: 37px;
  width: 37px;
  text-align: center;
  line-height: 37px;
  display: inline-block;
  background-color: #F2F6F7;
  color: var(--tp-common-black);
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__details-share a {
    margin-bottom: 10px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    margin-right: 8px;
  }
}

.postbox__details-share a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

.postbox__details-tag span {
  font-size: 20px;
  font-weight: 500;
  color: #121416;
  margin-right: 6px;
}

.postbox__read-more .postbox-btn {
  position: relative;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #132047;
}

.postbox__read-more .postbox-btn span {
  margin-left: 5px;
}

.postbox__read-more .postbox-btn span::before {
  position: absolute;
  content: "";
  top: 1px;
  right: -10px;
  border: 1px solid #E8F2F9;
  height: 28px;
  width: 28px;
  display: inline-block;
  border-radius: 50%;
}

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

.postbox__text p {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 30px;
}

.postbox__text-single p {
  margin-bottom: 15px;
}

.postbox__slider button {
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  font-size: 30px;
  color: var(--tp-common-white);
}

.postbox__slider button.postbox-slider-button-next {
  left: auto;
  right: 50px;
}

@media (max-width: 767px) {
  .postbox__slider button.postbox-slider-button-next {
    right: 10px;
  }
}

@media (max-width: 767px) {
  .postbox__slider button {
    left: 10px;
  }
}

.postbox__comment ul li {
  margin-bottom: 45px;
  list-style: none;
}

.postbox__comment ul li.children {
  margin-left: 65px;
}

@media (max-width: 767px) {
  .postbox__comment ul li.children {
    margin-left: 15px;
  }
}

.postbox__comment-form {
  margin-bottom: 40px;
  padding: 65px 45px 80px 45px;
  background: #F8F8F9;
}

@media (max-width: 767px) {
  .postbox__comment-form {
    padding: 20px;
  }
}

.postbox__comment-form-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
}

.postbox__comment-input {
  position: relative;
  margin-bottom: 20px;
}

.postbox__comment-input span {
  font-weight: 600;
  color: var(--tp-common-black);
  margin-bottom: 12px;
  display: block;
}

.postbox__comment-input input,
.postbox__comment-input textarea {
  height: 55px;
  padding: 0 20px;
  width: 100%;
  font-size: 14px;
  color: var(--tp-common-black);
  outline: none;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 15px 10px rgba(242, 242, 242, 0.18);
}

.postbox__comment-input input:focus,
.postbox__comment-input textarea:focus {
  border: 1px solid var(--tp-theme-1);
}

.postbox__comment-input input:focus::placeholder,
.postbox__comment-input textarea:focus::placeholder {
  font-size: 0;
}

.postbox__comment-input textarea {
  height: 175px;
  resize: none;
  padding-top: 20px;
  padding-bottom: 20px;
}

.postbox__comment-title {
  font-size: 28px;
  color: #121416;
  font-weight: 600;
  margin-bottom: 20px;
}

.postbox__comment-box {
  padding-top: 20px;
}

@media (max-width: 767px) {
  .postbox__comment-box {
    flex-wrap: wrap;
  }
}

.postbox__comment-info {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .postbox__comment-avater {
    margin-right: 0;
  }
}

.postbox__comment-avater img {
  width: 90px;
  height: 90px;
}

@media (max-width: 767px) {
  .postbox__comment-avater img {
    margin-bottom: 30px;
  }
}

.postbox__comment-name {
  margin-bottom: 17px;
}

.postbox__comment-name h5 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--tp-common-black);
  margin-bottom: 0;
}

.postbox__comment-name span {
  color: #414144;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.postbox__comment-text p {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
}

.postbox__comment-reply a {
  color: #19191A;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 20px;
  border: 1px solid #E0E2E3;
}

.postbox__comment-reply a:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
  border-color: var(--tp-common-white);
}

.postbox__comment-agree {
  padding-left: 5px;
}

.postbox__comment-agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 16px;
  height: 16px;
  background: var(--tp-common-white);
  border: 1px solid #949392;
  outline: none;
  flex: 0 0 auto;
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}

.postbox__comment-agree input:checked {
  position: relative;
  background-color: var(--tp-theme-1);
  border-color: transparent;
}

.postbox__comment-agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 10px;
  color: var(--tp-common-white);
  top: 47%;
  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%);
}

.postbox__comment-agree input:hover {
  cursor: pointer;
}

.postbox__comment-agree label {
  padding-left: 8px;
  color: #838383;
  line-height: 1;
}

.postbox__comment-agree label a {
  color: var(--tp-common-black);
  font-weight: 600;
  padding-left: 4px;
}

.postbox__comment-agree label a:hover {
  color: var(--tp-theme-1);
}

.postbox__comment-agree label:hover {
  cursor: pointer;
}

.postbox__tag span {
  font-size: 16px;
  margin-bottom: 17px;
  color: var(--tp-common-black);
  margin-right: 10px;
}

.postbox__play-btn a {
  height: 66px;
  width: 66px;
  line-height: 66px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  border-radius: 50%;
  animation: pulse 2s infinite;
  transform: translate(-50%, -50%);
  color: var(--tp-common-white);
  border: 2px solid var(--tp-common-white);
}

@media (max-width: 767px) {
  .postbox__area {
    padding-top: 60px;
  }
}

.postbox__link-post-wrap {
  background-color: #F9F9F9;
  padding: 60px;
}

@media (max-width: 767px) {
  .postbox__link-post-wrap {
    padding: 20px;
    flex-wrap: wrap;
  }
}

.postbox__link-post-wrap p {
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__link-post-wrap p br {
    display: none;
  }
}

@media (max-width: 767px) {
  .postbox__link-post-wrap p {
    font-size: 19px;
    font-weight: 28px;
  }

  .postbox__link-post-wrap p br {
    display: none;
  }
}

.postbox__link-post-icon {
  margin-right: 40px;
  display: inline-block;
}

@media (max-width: 767px) {
  .postbox__link-post-icon {
    margin-bottom: 10px;
    margin-right: 0;
  }
}

.postbox__slider-arrow-wrap button {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 50%;
  color: var(--tp-common-white);
  border: 1px solid var(--tp-common-white);
  transition: 0.3s;
}

.postbox__slider-arrow-wrap button:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.postbox__slider-arrow-wrap .postbox-arrow-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  z-index: 9;
}

.postbox__slider-arrow-wrap .postbox-arrow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  z-index: 9;
}

.basic-pagination {
  margin-bottom: 40px;
}

.basic-pagination ul li {
  list-style: none;
  display: inline-block;
  margin-right: 14px;
}

@media (max-width: 767px) {
  .basic-pagination ul li {
    margin-right: 5px;
  }
}

.basic-pagination ul li a {
  height: 46px;
  width: 30px;
  border-radius: 200px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  color: var(--tp-common-black);
}

.basic-pagination ul li a .current {
  height: 100%;
  width: 100%;
  display: inline-block;
  border-radius: 200px;
  border: 2px solid var(--tp-common-black);
}

.basic-pagination ul li a .icon {
  height: 46px;
  width: 46px;
  line-height: 46px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  border-radius: 100px;
  border: 1px solid rgba(25, 25, 26, 0.2);
  transition: 0.3s;
}

.basic-pagination ul li a .icon:hover {
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.tp-postbox-details-remeber {
  display: flex;
  align-items: start;
}

.tp-postbox-details-form p {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
}

@media (max-width: 767px) {
  .tp-postbox-details-form p {
    font-size: 16px;
  }
}

.tp-postbox-details-form-title {
  color: #19191A;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.68px;
}

.tp-postbox-details-input input {
  height: 50px;
  line-height: 50px;
  border: none;
  border: 1px solid rgba(25, 25, 26, 0.1);
  font-size: 17px;
  font-weight: 400;
  color: var(--tp-common-black);
  margin-bottom: 20px;
}

.tp-postbox-details-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input input::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input input:-moz-placeholder {
  /* Firefox 4-18 */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input input::placeholder {
  /* MODERN BROWSER */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input input::focus {
  border-color: var(--tp-common-black);
}

.tp-postbox-details-input textarea {
  height: 160px;
  font-size: 17px;
  font-weight: 400;
  resize: none;
  margin-bottom: 20px;
  color: var(--tp-common-black);
}

.tp-postbox-details-input textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input textarea::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input textarea:-moz-placeholder {
  /* Firefox 4-18 */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input textarea::placeholder {
  /* MODERN BROWSER */
  font-size: 17px;
  font-weight: 400;
  color: #707072;
}

.tp-postbox-details-input textarea::focus {
  border-color: var(--tp-common-black);
}

.tp-postbox-details-remeber input {
  margin-right: 10px;
  transform: translateY(7px);
}

.tp-postbox-details-remeber label {
  color: #5D5D63;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  cursor: pointer;
}

/*----------------------------------------*/
/*  5.3 Recent Post css
/*----------------------------------------*/
.rc__post ul li:not(:last-child) {
  margin-bottom: 15px;
}

.rc__post-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  color: var(--tp-common-black);
}

.rc__post-title a {
  background-image: -webkit-radial-gradient(#000, #000), -webkit-radial-gradient(#000, #000);
  background-image: -moz-radial-gradient(#000, #000), -moz-radial-gradient(#000, #000);
  background-image: -ms-radial-gradient(#000, #000), -ms-radial-gradient(#000, #000);
  background-image: -o-radial-gradient(#000, #000), -o-radial-gradient(#000, #000);
  background-image: radial-gradient(#000, #000), radial-gradient(#000, #000);
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 91%;
  background-repeat: no-repeat;
}

.rc__post-title a:hover {
  background-size: 0 1px, 100% 1px;
}

.rc__meta span {
  color: #414145;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 15px;
  display: inline-block;
}

.rc__post-thumb {
  flex: 0 0 auto;
}

/*----------------------------------------*/
/*  5.4 Sidebar css
/*----------------------------------------*/
.sidebar__wrapper {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar__wrapper {
    padding-left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .sidebar__wrapper {
    margin-top: 40px;
    padding-left: 0;
  }
}

.sidebar__widget-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  margin-bottom: 25px;
}

.sidebar__widget ul li {
  list-style: none;
  margin-bottom: 20px;
  line-height: 0;
}

.sidebar__widget ul li:last-child {
  margin-bottom: 0;
}

.sidebar__widget ul li a {
  color: #414145;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  background-image: -webkit-radial-gradient(#414145, #414145), -webkit-radial-gradient(#414145, #414145);
  background-image: -moz-radial-gradient(#414145, #414145), -moz-radial-gradient(#414145, #414145);
  background-image: -ms-radial-gradient(#414145, #414145), -ms-radial-gradient(#414145, #414145);
  background-image: -o-radial-gradient(#414145, #414145), -o-radial-gradient(#414145, #414145);
  background-image: radial-gradient(#414145, #414145), radial-gradient(#414145, #414145);
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 91%;
  background-repeat: no-repeat;
}

.sidebar__widget ul li a:hover {
  background-size: 0 1px, 100% 1px;
}

.sidebar__about {
  padding: 37px 0 38px 0;
}

.sidebar__thumb img {
  border-radius: 50%;
  margin-bottom: 20px;
}

.sidebar__content-title {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  margin-bottom: 6px;
}

.sidebar__content-designation {
  font-weight: 400;
  font-size: 14px;
  color: #727A7D;
  display: block;
  margin-bottom: 13px;
}

.sidebar__content p {
  font-size: 16px;
  color: #838383;
  margin-bottom: 27px;
}

.sidebar__content-social a {
  height: 37px;
  width: 42px;
  line-height: 37px;
  text-align: center;
  display: inline-block;
  border: 1px solid #E8E8E8;
  margin-right: 12px;
}

.sidebar__content-social a i {
  transition: 0.3s;
}

.sidebar__content-social a:hover {
  border: 1px solid var(--tp-theme-1);
  background-color: var(--tp-theme-1);
}

.sidebar__content-social a:hover i {
  color: var(--tp-common-white);
}

.sidebar__search {
  position: relative;
}

.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 25px;
  outline: none;
  border: none;
  padding-right: 50px;
  background: transparent;
  border: 1px solid #D9D9D9;
}

.sidebar__search input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.sidebar__search input::-moz-placeholder {
  /* Firefox 19+ */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.sidebar__search input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.sidebar__search input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.sidebar__search input::placeholder {
  /* MODERN BROWSER */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.sidebar__search button {
  position: absolute;
  top: 0;
  right: 25px;
  height: 100%;
  line-height: 60px;
  color: var(--tp-common-black);
}

.sidebar__banner::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(65, 65, 69, 0.5);
}

.sidebar__banner-content {
  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%);
  z-index: 1;
  background: var(--tp-common-white);
}

.sidebar__banner-content h4 {
  padding: 15px 20px;
  font-size: 24px;
  color: var(--tp-common-black);
  text-transform: uppercase;
  margin-bottom: 0;
}

.sidebar__author {
  border: 1px solid #19191A;
  padding: 50px 30px;
}

.sidebar__author-thumb img {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  margin-bottom: 30px;
}

.sidebar__author-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-common-black);
  margin-bottom: 10px;
}

.sidebar__author-content p {
  color: #5D5D63;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 0;
}

.sidebar__social a {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  display: inline-block;
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.14);
  margin-right: 8px;
  font-size: 18px;
}

.sidebar__social a:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

@media (max-width: 767px) {
  .sidebar__banner-img img {
    width: 100%;
  }
}

.tagcloud a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 15px;
  margin-right: 5px;
  margin-bottom: 14px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tagcloud a {
    padding: 6px 12px;
  }
}

.tagcloud a:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.blog-sidebar-slider-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.blog-sidebar-slider-height {
  height: 930px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-sidebar-slider-height {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .blog-sidebar-slider-height {
    height: 700px;
  }
}

.blog-sidebar-slider-title {
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--tp-common-white);
  margin-bottom: 45px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-sidebar-slider-title {
    font-size: 75px;
  }
}

@media (max-width: 767px) {
  .blog-sidebar-slider-title {
    font-size: 52px;
  }
}

.blog-sidebar-slider-link {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.36px;
  color: var(--tp-common-white);
  position: relative;
  margin-left: 20px;
}

.blog-sidebar-slider-link:hover {
  color: var(--tp-common-white);
}

.blog-sidebar-slider-link::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  bottom: -4px;
  left: 0;
}

.blog-sidebar-slider-link::before {
  content: "";
  height: 1px;
  width: 0;
  position: absolute;
  bottom: -4px;
  right: 0;
  background-color: #fff;
  transition: 0.4s;
}

.blog-sidebar-slider-link:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.blog-sidebar-slider-meta {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-white);
  margin-bottom: 25px;
  display: inline-block;
}

.blog-sidebar-content-box {
  height: 100%;
  padding-left: 100px;
}

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

.blog-sidebar-avatar-box {
  padding-bottom: 150px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-sidebar-avatar-box {
    padding-bottom: 120px;
  }
}

@media (max-width: 767px) {
  .blog-sidebar-avatar-box {
    padding-bottom: 60px;
  }
}

.blog-sidebar-avatar-box span {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-common-white);
}

.blog-sidebar-avatar-box img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-sidebar-arrow-box {
  position: absolute;
  top: 55%;
  right: 22%;
  z-index: 9;
  transform: translateY(-50%);
}

.blog-sidebar-arrow-box button {
  height: 100px;
  width: 100px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50%;
  line-height: 1;
  backdrop-filter: blur(7px);
  color: var(--tp-common-white);
  background-color: rgba(255, 255, 255, 0.14);
}

.blog-sidebar-scrollbar {
  position: absolute;
  bottom: 130px;
  right: 50px;
  z-index: 99;
}

@media (max-width: 767px) {
  .blog-sidebar-scrollbar {
    bottom: 40px;
    right: auto;
    left: 15px;
  }
}

.blog-sidebar-scrollbar a {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.36px;
  color: rgba(255, 255, 255, 0.7);
}

.blog-sidebar-scrollbar a span svg {
  margin-left: 20px;
  display: inline-block;
  color: var(--tp-common-white);
  animation: scroll-up-down 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
  animation-delay: 0s;
  animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
  margin-top: -25px;
}

/*----------------------------------------*/
/*  5.1 blog css start
/*----------------------------------------*/
.tp-blog-meta {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: right;
  margin: 25px;
}

.tp-blog-meta span {
  font-size: 16px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
  padding: 0px 14px;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  display: inline-block;
}

.tp-blog-content span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #5D5D63;
  margin-bottom: 10px;
  display: inline-block;
}

.tp-blog-title-sm {
  font-size: 31px;
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.62px;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-blog-title-sm {
    font-size: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-blog-title-sm {
    font-size: 24px;
  }
}

.tp-blog-title-sm a {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-blog-title-sm:hover a {
  background-size: 0% 1px, 100% 1px;
}

.tp-blog-thumb {
  margin-bottom: 25px;
}

.tp-blog-thumb img {
  width: 100%;
  transition: 0.9s;
}

.tp-blog-item:hover .tp-blog-thumb img {
  transform: scale(1.2) rotate(-2deg);
}

.tp-blog-6-meta {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  margin-bottom: 15px;
  display: inline-block;
}

.tp-blog-6-title-sm {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-gallery);
  margin-bottom: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-blog-6-title-sm {
    font-size: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-6-title-sm {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .tp-blog-6-title-sm {
    font-size: 27px;
  }
}

.tp-blog-6-link a {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--tp-common-white);
}

.tp-blog-6-link a i {
  margin-left: 10px;
}

.tp-blog-6-item {
  position: relative;
}

.tp-blog-6-item::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 26, 32, 0.62);
  content: "";
}

.tp-blog-6-item:hover .tp-blog-6-content {
  transform: translateY(0);
}

.tp-blog-6-content-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 55;
  margin: 40px;
  overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-6-content-wrap {
    margin: 25px;
  }
}

.tp-blog-6-thumb img {
  width: 100%;
}

.tp-blog-6-content {
  transform: translateY(45px);
  transition: 0.3s;
}

.tp-blog-6-category {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 55;
  margin: 25px;
}

.tp-blog-6-category span {
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  color: var(--tp-common-white);
  background: rgba(255, 255, 255, 0.24);
  padding: 0px 10px;
}

@media (max-width: 767px) {
  .blog-details-bg {
    padding-bottom: 140px;
  }
}

.blog-details-bg-height {
  height: 800px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-bg-height {
    height: 700px;
  }
}

@media (max-width: 767px) {
  .blog-details-bg-height {
    height: 600px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-bg-height {
    height: 700px;
  }
}

.blog-details-overlay {
  position: relative;
}

.blog-details-overlay::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.36);
}

.blog-details-overlay-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-details-overlay-shape img {
  height: 100%;
}

.blog-details-meta {
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-white);
  margin-bottom: 10px;
  display: inline-block;
}

.blog-details-meta i {
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  font-style: normal;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.blog-details-title {
  font-size: 100px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 30px;
  color: var(--tp-common-white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-title {
    font-size: 85px;
  }
}

@media (max-width: 767px) {
  .blog-details-title {
    font-size: 60px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-title {
    font-size: 80px;
  }
}

.blog-details-top-author img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin-right: 20px;
}

.blog-details-top-author span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
}

.blog-details-top-author span i {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
}

.blog-details-top-text p {
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: var(--tp-common-black);
  margin-bottom: 50px;
}

.blog-details-left-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--tp-common-black);
  margin-bottom: 20px;
}

.blog-details-left-content {
  margin-bottom: 70px;
}

.blog-details-left-content p {
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.blog-details-left-content p i {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black);
}

.blog-details-thumb-box {
  margin-bottom: 75px;
}

.blog-details-blockquote {
  margin-left: 100px;
  position: relative;
  margin-bottom: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-blockquote {
    margin-left: 40px;
  }
}

@media (max-width: 767px) {
  .blog-details-blockquote {
    margin-left: 30px;
  }
}

.blog-details-blockquote p {
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.88px;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-blockquote p {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .blog-details-blockquote p {
    font-size: 30px;
  }
}

.blog-details-blockquote .quote-icon {
  position: absolute;
  top: -30px;
  left: -35px;
}

.blog-details-blockquote .blockquote-info {
  color: #5D5D63;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.32px;
  text-transform: uppercase;
}

.blog-details-tag a,
.blog-details-share a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  margin-left: 20px;
  position: relative;
}

.blog-details-tag a::after,
.blog-details-share a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: var(--tp-common-black);
}

.blog-details-tag a:hover::after,
.blog-details-share a:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

@media (max-width: 767px) {

  .blog-details-tag a,
  .blog-details-share a {
    margin-left: 10px;
  }
}

.blog-details-tag span,
.blog-details-share span {
  transform: translateY(-2px);
  display: inline-block;
}

.blog-details-author {
  background-color: #F7F7F7;
}

@media (max-width: 767px) {
  .blog-details-author {
    flex-wrap: wrap;
  }
}

.blog-details-author-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black);
  margin-bottom: 15px;
}

.blog-details-author-content-wrap {
  padding: 40px;
}

@media (max-width: 767px) {
  .blog-details-author-content-wrap {
    padding: 20px;
  }
}

.blog-details-author-content p {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 0;
}

.blog-details-author-img {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .blog-details-author-img {
    width: 100%;
  }
}

.blog-details-author-img img {
  height: 100%;
  width: 100%;
}

.blog-details-author-social a {
  color: var(--tp-common-black);
  margin-left: 20px;
}

.blog-details-navigation-style .project-details-1-navigation {
  border-top: 1px transparent;
  padding: 0;
  padding-top: 0;
}

.blog-details-realated-title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--tp-common-black);
}

.blog-details-thumb-wrap {
  border-top: 1px solid #D9D9D9;
}

.blog-details-top-meta {
  padding: 55px 0;
}

@media (max-width: 767px) {
  .blog-details-top-meta {
    padding: 20px 0;
  }
}

.blog-details-top-meta span {
  color: #414145;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  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) {
  .tp-blog-standard-area {
    padding-top: 120px;
  }
}

@media (max-width: 767px) {
  .tp-blog-standard-area {
    padding-top: 100px;
  }
}

.tp-blog-standard-title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2.4px;
  color: var(--tp-common-white);
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-standard-title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .tp-blog-standard-title {
    font-size: 30px;
  }

  .tp-blog-standard-title br {
    display: none;
  }
}

.tp-blog-standard-title-box {
  background-color: var(--tp-common-black);
  display: inline-block;
  padding: 45px;
  position: absolute;
  bottom: 30px;
  left: 30px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-blog-standard-title-box {
    bottom: 0;
    left: 0;
  }
}

.tp-blog-standard-meta {
  position: absolute;
  top: 30px;
  left: 30px;
}

.tp-blog-standard-meta span {
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  text-align: center;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.tp-blog-standard-thumb-box {
  overflow: hidden;
  height: 750px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-blog-standard-thumb-box {
    height: 600px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-standard-thumb-box {
    height: 470px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-standard-thumb-box {
    height: 335px;
  }
}

@media (max-width: 767px) {
  .tp-blog-standard-thumb-box {
    height: 135px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-blog-standard-thumb-box {
    height: 270px;
  }
}

.tp-blog-standard-thumb-box img {
  margin-top: -180px;
}

@media (max-width: 767px) {
  .tp-blog-standard-thumb-box img {
    margin-top: -120px;
  }
}

.tp-blog-list-bg {
  padding-top: 230px;
  padding-bottom: 430px;
  background-repeat: no-repeat;
  background-size: cover;
}

.tp-blog-list-bg-overlay {
  position: relative;
}

.tp-blog-list-bg-overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.3);
}

.tp-blog-list-text span {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.96px;
  display: inline-block;
  color: var(--tp-common-white);
  transform: translateY(-20px);
}

@media (max-width: 767px) {
  .tp-blog-list-text span {
    transform: translateY(0px);
  }
}

.tp-blog-list-content {
  height: 100%;
}

.tp-blog-list-content-wrap {
  height: 100%;
}

.tp-blog-list-meta span {
  color: #5D5D63;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-blog-list-meta span {
    margin-bottom: 20px;
  }
}

.tp-blog-list-thumb {
  margin-right: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-list-thumb {
    margin-right: 30px;
  }
}

@media (max-width: 767px) {
  .tp-blog-list-thumb {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

.tp-blog-list-thumb img {
  flex: 0 0 auto;
  width: 100%;
}

.tp-blog-list-title-sm {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.68px;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-list-title-sm {
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-list-title-sm {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .tp-blog-list-title-sm {
    font-size: 30px;
  }
}

.tp-blog-list-link {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.36px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  position: relative;
  margin-left: 20px;
}

.tp-blog-list-link-wrap {
  margin-top: auto;
}

.tp-blog-list-link::before {
  height: 8px;
  width: 8px;
  content: "";
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--tp-common-black);
  position: absolute;
  top: 8px;
  left: -20px;
}

.tp-blog-list-link::after {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 0;
  display: inline-block;
  content: "";
  background-color: var(--tp-common-black);
  transition: 0.4s;
}

.tp-blog-list-link:hover {
  color: var(--tp-common-black);
}

.tp-blog-list-link:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

.tp-blog-list-item {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(25, 25, 26, 0.12);
}

.tp-blog-list-item:last-child {
  margin-bottom: 0;
}

.tp-blog-list-wrap {
  padding: 50px 155px;
  background-color: #FFFFFF;
  margin-top: -355px;
  position: relative;
  z-index: 22;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-blog-list-wrap {
    padding: 50px 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-list-wrap {
    padding: 50px 55px;
  }
}

@media (max-width: 767px) {
  .tp-blog-list-wrap {
    padding: 50px 20px;
  }
}

.tp-flex-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.tp-flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.blog-details-without-sidebar .blog-details-thumb {
  height: 740px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-without-sidebar .blog-details-thumb {
    height: 550px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-without-sidebar .blog-details-thumb {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-without-sidebar .blog-details-thumb {
    height: 300px;
  }
}

@media (max-width: 767px) {
  .blog-details-without-sidebar .blog-details-thumb {
    height: 150px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-without-sidebar .blog-details-thumb {
    height: 200px;
  }
}

.blog-details-without-sidebar .blog-details-thumb img {
  margin-top: -300px;
}

@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) {
  .blog-details-without-sidebar .blog-details-thumb img {
    margin-top: -100px;
  }
}

@media (max-width: 767px) {
  .blog-details-without-sidebar .blog-details-thumb img {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/
.counter-row {
  counter-reset: count;
}

.tp-footer-2-widget-logo img {
  width: 200px;
  height: 100%;
}

.tp-footer-dark .logo-2 {
  display: none;
}

.tp-copyright-logo img {
  width: 85px;
  height: 100%;
}

.tp-footer-wrap {
  padding: 0px 50px;
  padding-bottom: 90px;
}

@media (max-width: 767px) {
  .tp-footer-wrap {
    padding: 0;
  }
}

.tp-footer-middle-wrap {
  padding-left: 55px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-footer-middle-wrap {
    padding-left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-middle-wrap {
    padding-left: 0;
  }
}

.tp-footer-menu {
  margin-right: 110px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-menu {
    margin-right: 0;
    margin-bottom: 60px;
  }
}

.tp-footer-menu ul li {
  list-style-type: none;
  padding-bottom: 30px;
  padding-top: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

.tp-footer-menu ul li::before {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  left: 0;
  width: 0%;
  height: 1px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s ease-out 0s;
  background-color: var(--tp-common-white);
}

.tp-footer-menu ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.tp-footer-menu ul li:last-child::before {
  display: none;
}

.tp-footer-menu ul li:first-child {
  padding-top: 0;
}

.tp-footer-menu ul li.active a {
  color: var(--tp-common-white);
}

.tp-footer-menu ul li.active a::after {
  color: var(--tp-common-white);
}

.tp-footer-menu ul li a {
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  position: relative;
  padding-left: 50px;
  transition: 0.3s;
  display: block;
  color: rgba(245, 247, 245, 0.3);
  font-family: var(--tp-ff-gallery);
}

.tp-footer-menu ul li a .tp-menu-text {
  display: inline-flex;
  overflow: hidden;
  text-shadow: 0 80px 0 var(--tp-common-white);
  height: 55px;
}

.tp-footer-menu ul li a .tp-menu-text span {
  display: block;
  backface-visibility: hidden;
  font-style: normal;
  transition: transform 0.4s ease;
  transform: translateY(var(--m)) translateZ(0);
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(1) {
  transition-delay: 0.0333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(2) {
  transition-delay: 0.0666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(3) {
  transition-delay: 0.1s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(4) {
  transition-delay: 0.1333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(5) {
  transition-delay: 0.1666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(6) {
  transition-delay: 0.2s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(7) {
  transition-delay: 0.2333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(8) {
  transition-delay: 0.2666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(9) {
  transition-delay: 0.3s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(10) {
  transition-delay: 0.3333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(11) {
  transition-delay: 0.3666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(12) {
  transition-delay: 0.4s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(13) {
  transition-delay: 0.4333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(14) {
  transition-delay: 0.4666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(15) {
  transition-delay: 0.5s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(16) {
  transition-delay: 0.5333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(17) {
  transition-delay: 0.5666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(18) {
  transition-delay: 0.6s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(19) {
  transition-delay: 0.6333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(20) {
  transition-delay: 0.6666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(21) {
  transition-delay: 0.7s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(22) {
  transition-delay: 0.7333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(23) {
  transition-delay: 0.7666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(24) {
  transition-delay: 0.8s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(25) {
  transition-delay: 0.8333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(26) {
  transition-delay: 0.8666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(27) {
  transition-delay: 0.9s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(28) {
  transition-delay: 0.9333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(29) {
  transition-delay: 0.9666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(30) {
  transition-delay: 1s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(31) {
  transition-delay: 1.0333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(32) {
  transition-delay: 1.0666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(33) {
  transition-delay: 1.1s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(34) {
  transition-delay: 1.1333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(35) {
  transition-delay: 1.1666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(36) {
  transition-delay: 1.2s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(37) {
  transition-delay: 1.2333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(38) {
  transition-delay: 1.2666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(39) {
  transition-delay: 1.3s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(40) {
  transition-delay: 1.3333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(41) {
  transition-delay: 1.3666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(42) {
  transition-delay: 1.4s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(43) {
  transition-delay: 1.4333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(44) {
  transition-delay: 1.4666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(45) {
  transition-delay: 1.5s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(46) {
  transition-delay: 1.5333333333s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(47) {
  transition-delay: 1.5666666667s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(48) {
  transition-delay: 1.6s;
}

.tp-footer-menu ul li a .tp-menu-text span:nth-child(49) {
  transition-delay: 1.6333333333s;
}

.tp-footer-menu ul li a::after {
  content: "0" counter(count);
  counter-increment: count;
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  bottom: 22px;
  color: rgba(245, 247, 245, 0.2);
  font-family: var(--tp-ff-body);
  transition: 0.3s;
}

.tp-footer-menu ul li:hover a {
  --y: -0px;
  background-color: transparent;
  color: var(--tp-common-white);
}

.tp-footer-menu ul li:hover a span {
  --m: calc(80px * -1);
}

.tp-footer-menu ul li:hover a::after {
  color: var(--tp-common-white);
}

.tp-footer-menu ul li:hover::before {
  opacity: 1;
  visibility: visible;
  width: 100%;
  left: 0;
  right: 0;
}

.tp-footer-big-title {
  font-weight: 400;
  font-size: 170px;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-gallery);
  margin-bottom: 45px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-footer-big-title {
    font-size: 130px;
  }
}

@media (max-width: 767px) {
  .tp-footer-big-title {
    font-size: 85px;
  }
}

.tp-footer-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--tp-common-white);
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .tp-footer-widget {
    margin-bottom: 40px;
  }
}

.tp-footer-widget-info-mail {
  display: inline-block;
}

.tp-footer-widget-info-mail a {
  position: relative;
  margin-bottom: 15px;
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--tp-common-white);
}

.tp-footer-widget-info-mail a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  content: "";
}

.tp-footer-widget-info-mail a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--tp-common-white);
  content: "";
  transition: 0.4s;
}

.tp-footer-widget-info-mail:hover a::before {
  width: 100%;
}

.tp-footer-widget-info-location a {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.7);
}

.tp-footer-widget-info-location a:hover {
  color: var(--tp-common-white);
}

.tp-footer-widget-social {
  display: inline-block;
}

.tp-footer-widget-social li {
  list-style-type: none;
  width: 50%;
  float: left;
  margin-bottom: 13px;
}

.tp-footer-widget-social li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--tp-common-white);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-footer-widget-social li a:hover {
  background-size: 0% 1px, 100% 1px;
  color: var(--tp-common-white);
}

.tp-footer-shape-wrap {
  position: fixed;
  right: 70px;
  bottom: 70px;
}

.tp-footer-shape {
  display: inline-block;
}

.tp-footer-shape span {
  height: 106px;
  width: 106px;
  border-radius: 50%;
  background-color: #333333;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tp-footer-shape .img-1 {
  animation: rotate2 15s linear infinite;
}

.tp-footer-shape .img-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.tp-copyright-wrap {
  padding: 30px 0px;
  margin: 0px 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
  .tp-copyright-wrap {
    margin: 0;
  }
}

.tp-copyright-logo img {
  margin-bottom: 20px;
}

.tp-copyright-text p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  color: rgba(245, 247, 245, 0.8);
}

@media (max-width: 767px) {
  .tp-copyright-text p {
    font-size: 14px;
  }
}

/*----------------------------------------*/
/*  6.2 Footer Style 2
/*----------------------------------------*/
.tp-footer-2-widget-text p {
  color: rgba(0, 0, 0, 0.8);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 40px;
}

.tp-footer-2-widget-title {
  color: var(--tp-common-black);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.26px;
  margin-bottom: 30px;
}

.tp-footer-2-widget-menu ul li {
  list-style-type: none;
  margin-bottom: 7px;
}

.tp-footer-2-widget-menu ul li:last-child {
  margin-bottom: 0;
}

.tp-footer-2-widget-menu ul li a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  background-image: linear-gradient(#000000, #fff), linear-gradient(#000000, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: 0.3s linear;
}

.tp-footer-2-widget-menu ul li a:hover {
  background-size: 0% 1px, 100% 1px;
  color: var(--tp-common-black);
}

.tp-footer-2-contact-item {
  margin-bottom: 15px;
}

.tp-footer-2-contact-item span {
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
  display: inline-block;
  margin-bottom: 4px;
}

.tp-footer-2-contact-item span:hover a {
  color: rgba(0, 0, 0, 0.9);
}

.tp-footer-2-input input {
  background-color: transparent;
  border: none;
  height: 100%;
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 14px;
  padding: 0;
  padding-bottom: 20px;
  padding-right: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tp-footer-2-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 14px;
}

.tp-footer-2-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 14px;
}

.tp-footer-2-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 14px;
}

.tp-footer-2-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 14px;
}

.tp-footer-2-input input::placeholder {
  /* MODERN BROWSER */
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 14px;
}

.tp-footer-2-input input:focus {
  border-color: var(--tp-common-black);
}

.tp-footer-2-input button {
  position: absolute;
  top: 0;
  right: 20px;
}

.footer-col-2-2 {
  padding-left: 35px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-col-2-2 {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .footer-col-2-2 {
    padding-left: 0;
  }
}

.footer-col-2-3 {
  padding-left: 60px;
  padding-right: 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-2-3 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-col-2-3 {
    padding-left: 0px;
  }
}

@media (max-width: 767px) {
  .footer-col-2-3 {
    padding-left: 0;
    padding-right: 0;
  }
}

.footer-col-2-4 {
  padding-left: 70px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-2-4 {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .footer-col-2-4 {
    padding-left: 0px;
  }
}

.tp-copyright-2-left p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-copyright-2-left p {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .tp-copyright-2-left p {
    font-size: 17px;
    margin-bottom: 20px;
  }
}

.tp-copyright-2-social a {
  height: 35px;
  line-height: 35px;
  padding: 0px 35px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.14px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  margin-left: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-copyright-2-social a {
    padding: 0px 30px;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .tp-copyright-2-social a {
    padding: 0px 20px;
    font-size: 12px;
  }
}

.tp-copyright-2-social a:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-white);
  color: var(--tp-common-white);
}

.tp-copyright-2-bdr-top {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 35px 0;
  padding-bottom: 25px;
}

.tp-footer-white .tp-footer-2-widget-text p {
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-widget-title {
  color: var(--tp-common-black-2);
}

.tp-footer-white .tp-footer-2-widget-menu ul li a {
  color: #5D5D63;
  background-image: linear-gradient(#5D5D63, #5D5D63), linear-gradient(#5D5D63, #5D5D63);
}

.tp-footer-white .tp-footer-2-contact-item span {
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-input input {
  color: #5D5D63;
  border-bottom: 1px solid #5D5D63;
}

.tp-footer-white .tp-footer-2-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-input input::placeholder {
  /* MODERN BROWSER */
  color: #5D5D63;
}

.tp-footer-white .tp-footer-2-contact-item span:hover a {
  color: var(--tp-common-black-2);
}

.tp-copyright-white .tp-copyright-2-left p {
  color: #5D5D63;
}

.tp-copyright-white .tp-copyright-2-social a {
  color: var(--tp-common-black);
  border: 1.5px solid rgba(25, 25, 26, 0.2);
}

.tp-copyright-white .tp-copyright-2-social a:hover {
  background-color: var(--tp-common-black-2);
  color: var(--tp-common-white);
  border-color: var(--tp-common-black-2);
}

.tp-copyright-white.tp-copyright-2-bdr-top {
  border-top: 1px solid rgba(25, 25, 26, 0.2);
}

/*----------------------------------------*/
/*  6.3 Footer Style 3
/*----------------------------------------*/
.tp-footer-3-logo img {
  height: 100%;
  width: 85px;
}

.tp-footer-3-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 30px;
}

.tp-footer-3-menu ul {
  display: inline-block;
}

.tp-footer-3-menu ul li {
  list-style-type: none;
  width: 50%;
  float: left;
  margin-bottom: 10px;
}

.tp-footer-3-menu ul li a {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-footer-3-menu ul li a:hover {
  background-size: 0% 1px, 100% 1px;
  color: var(--tp-common-white);
}

.tp-footer-3-btn .icon-1 {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 2;
}

.tp-footer-3-btn:hover .icon-2 svg {
  animation: rotate2 10s linear infinite;
}

.tp-footer-3-input-box input {
  background-color: transparent;
  margin-right: 10px;
  border-radius: 30px;
  height: 60px;
  line-height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}

.tp-footer-3-input-box input:focus {
  border-color: var(--tp-common-white);
}

.tp-footer-3-input-box input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}

.tp-footer-3-input-box input::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}

.tp-footer-3-input-box input:-moz-placeholder {
  /* Firefox 4-18 */
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}

.tp-footer-3-input-box input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}

.tp-footer-3-input-box input::placeholder {
  /* MODERN BROWSER */
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}

.tp-footer-3-logo {
  margin-bottom: 105px;
  display: inline-block;
}

.tp-footer-3-bg-text {
  position: absolute;
  top: 0;
  left: 0;
}

.tp-footer-3-logo-box p {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}

.tp-footer-3-copyright {
  font-size: 18px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.tp-footer-3-social a {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.3s;
}

.tp-footer-3-social a:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.footer-col-3-1 {
  padding-right: 53px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .footer-col-3-1 {
    padding-right: 0;
  }
}

.footer-col-3-2 {
  padding-left: 80px;
  margin-left: 33px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-3-2 {
    padding-left: 30px;
    margin-left: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .footer-col-3-2 {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}

.footer-col-3-3 {
  padding-left: 130px;
  margin-left: 33px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-3-3 {
    margin-left: 0;
    padding-left: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .footer-col-3-3 {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}

.tp-reveal-line {
  overflow: hidden;
  padding-bottom: 18px;
}

/*----------------------------------------*/
/*  6.4 Footer Style 4
/*----------------------------------------*/
.tp-footer-4-big-title {
  font-size: 149px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -4.5px;
  text-transform: uppercase;
  font-family: var(--tp-ff-marcellus);
  color: var(--tp-common-white);
  margin-bottom: 70px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-footer-4-big-title {
    font-size: 125px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-footer-4-big-title {
    font-size: 108px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-footer-4-big-title {
    font-size: 92px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-footer-4-big-title {
    font-size: 75px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-footer-4-big-title {
    font-size: 101px;
  }
}

@media (max-width: 767px) {
  .tp-footer-4-big-title {
    font-size: 50px;
  }
}

.tp-footer-4-big-title span {
  display: inline-block;
  line-height: 0;
  transform: translateX(20px);
}

.tp-footer-4-top {
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tp-footer-4-top-left p {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

/*----------------------------------------*/
/*  6.5 Footer Style 5
/*----------------------------------------*/
.tp-footer-5-subtitle {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  display: inline-block;
  margin-left: 15px;
  margin-bottom: 25px;
}

@media (max-width: 767px) {
  .tp-footer-5-subtitle {
    margin-left: 0;
    margin-bottom: 0;
  }
}

.tp-footer-5-title {
  font-size: 230px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -4.6px;
  color: var(--tp-common-white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-footer-5-title {
    font-size: 200px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-footer-5-title {
    font-size: 160px;
  }
}

@media (max-width: 767px) {
  .tp-footer-5-title {
    font-size: 75px;
  }
}

.tp-footer-5-title .tp-reveal-line-2 {
  padding-bottom: 0;
}

.tp-footer-5-mail {
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  margin-right: 15px;
  display: inline;
  color: var(--tp-common-white);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

@media (max-width: 767px) {
  .tp-footer-5-mail {
    font-size: 35px;
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.tp-footer-5-mail:hover {
  color: var(--tp-common-white);
  background-size: 0% 2px, 100% 2px;
}

.tp-footer-5-link {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  background-color: var(--tp-common-white);
  display: inline-block;
}

@media (max-width: 767px) {
  .tp-footer-5-link {
    margin-left: 15px;
    transform: translateY(-7px);
  }
}

.tp-footer-5-content-wrap {
  padding-left: 60px;
  padding-right: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-5-content-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .tp-footer-5-info {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .tp-copyright-5-left-info {
    margin-bottom: 30px;
  }
}

.tp-copyright-5-left-info span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  display: block;
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-copyright-5-style-2 .tp-copyright-2-social a {
    padding: 0px 23px;
  }
}

@media (max-width: 767px) {
  .tp-copyright-5-style-2 .tp-copyright-2-social a {
    margin-left: 0;
    margin-right: 10px;
  }

  .tp-copyright-5-style-2 .tp-copyright-2-social {
    margin-bottom: 30px;
  }
}

.tp-copyright-6-text p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.tp-copyright-6-text p a {
  color: #F58156;
}

/*----------------------------------------*/
/*  6.6 Footer Style 6
/*----------------------------------------*/
.tp-footer-6-widget-title {
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 22px;
  color: #bbb;
  font-family: var(--tp-ff-marcellus);
}

.tp-footer-6-widget.footer-col-6-2 {
  padding-left: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-6-widget.footer-col-6-2 {
    padding-left: 0;
  }
}

.tp-footer-6-widget.footer-col-6-3 {
  padding-left: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-6-widget.footer-col-6-3 {
    padding-left: 0;
  }
}

.tp-footer-6-widget.footer-col-6-4 {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-footer-6-widget.footer-col-6-4 {
    padding-left: 0;
  }
}

.tp-footer-6-widget-wrap {
  margin-bottom: 20px;
}

.tp-footer-6-logo {
  margin-bottom: 25px;
}

.tp-footer-6-talk {
  margin-bottom: 25px;
}

.tp-footer-6-talk span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

.tp-footer-6-talk h4 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

.tp-footer-6-contact-item {
  margin-bottom: 10px;
}

.tp-footer-6-contact-icon span {
  margin-right: 10px;
  transform: translateY(-2px);
  display: inline-block;
}

.tp-footer-6-contact-content a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--tp-ff-marcellus);
}

.tp-footer-6-list ul li {
  list-style-type: none;
  position: relative;
  padding-left: 15px;
  margin-bottom: 9px;
}

.tp-footer-6-list ul li::after {
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 50%;
  background-color: #BBBBBB;
}

.tp-footer-6-list ul li a {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--tp-ff-marcellus);
}

.tp-footer-6-input-box {
  margin-bottom: 25px;
}

.tp-footer-6-input-box label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 20px;
}

.tp-footer-6-input input {
  color: #7D7F82;
  font-size: 14px;
  font-weight: 400;
  background-color: transparent;
  font-family: var(--tp-ff-marcellus);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 1px 2px 0px rgba(1, 15, 28, 0.1);
  padding-right: 140px;
}

.tp-footer-6-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #7D7F82;
  font-size: 14px;
  font-weight: 400;
}

.tp-footer-6-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #7D7F82;
  font-size: 14px;
  font-weight: 400;
}

.tp-footer-6-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #7D7F82;
  font-size: 14px;
  font-weight: 400;
}

.tp-footer-6-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #7D7F82;
  font-size: 14px;
  font-weight: 400;
}

.tp-footer-6-input input::placeholder {
  /* MODERN BROWSER */
  color: #7D7F82;
  font-size: 14px;
  font-weight: 400;
}

.tp-footer-6-input input:focus {
  border-color: #7D7F82;
}

.tp-footer-6-input .tp-btn-subscribe {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.tp-footer-6-social-title {
  color: #BBB;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 15px;
  font-family: var(--tp-ff-marcellus);
}

.tp-footer-6-social a {
  color: #BBB;
  height: 38px;
  width: 38px;
  margin-right: 4px;
  line-height: 38px;
  text-align: center;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 1px 2px 0px rgba(1, 15, 28, 0.1);
}

.tp-footer-6-social a:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
  border-color: var(--tp-common-white);
}

.tp-footer-6-logo img {
  width: 85px;
  height: 100%;
}

/*----------------------------------------*/
/*  7.11 Hero css start
/*----------------------------------------*/
.tp-layout-right {
  width: calc(100% - 280px);
  margin-left: auto;
  border-left: 1px solid #343434;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-layout-right {
    width: calc(100% - 0px);
    border-left: 0;
  }
}

.tp-layout-plr {
  padding-left: 40px;
  padding-right: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-layout-plr {
    padding-left: 0;
    padding-right: 0;
  }
}

.tp-hero-ptb {
  padding-top: 200px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-ptb {
    padding-top: 140px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-ptb {
    padding-top: 130px;
  }
}

@media (max-width: 767px) {
  .tp-hero-ptb {
    padding-top: 120px;
  }
}

.tp-hero-title-wrap {
  display: flex;
  justify-content: center;
}

.tp-hero-shape-1 {
  position: absolute;
  top: -13%;
  left: 27%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-shape-1 {
    left: 15%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-shape-1 {
    left: 9%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-shape-1 {
    left: 0;
  }
}

.tp-hero-shape-2 {
  position: absolute;
  top: -6px;
  right: -80px;
  z-index: -1;
}

.tp-hero-shape-2 img {
  animation: rotate2 5s linear infinite;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-shape-2 {
    right: -24px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-shape-2 {
    right: -30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-shape-2 {
    right: -25px;
  }
}

.tp-hero-title {
  font-weight: 400;
  font-size: 220px;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-title {
    font-size: 175px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-title {
    font-size: 150px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-title {
    font-size: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-title {
    font-size: 135px;
  }
}

@media (max-width: 767px) {
  .tp-hero-title {
    font-size: 70px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-title {
    font-size: 110px;
  }
}

.tp-hero-title-img {
  margin: 0px 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-title-img img {
    width: 27%;
    transform: translateY(-10px);
  }
}

@media (max-width: 767px) {
  .tp-hero-title-img img {
    width: 60%;
    margin: 15px 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-title-img img {
    width: 22%;
    margin: 0;
  }
}

.tp-hero-subtitle {
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  position: absolute;
  top: 45px;
  left: -17%;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-body);
  text-align: left;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-subtitle {
    left: -23%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-subtitle {
    left: -26%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-subtitle {
    left: -33%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-subtitle {
    left: -27%;
  }
}

.tp-hero-content {
  max-width: 570px;
  margin: 0 auto;
  margin-bottom: 120px;
}

@media (max-width: 767px) {
  .tp-hero-content {
    margin-bottom: 60px;
  }
}

.tp-hero-content p {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .tp-hero-content p {
    font-size: 17px;
  }
}

.tp-hero-content p span {
  margin-left: 95px;
  display: inline-block;
}

@media (max-width: 767px) {
  .tp-hero-content p span {
    margin-left: 0;
  }
}

.tp-hero-bottom-img {
  background-position: top center;
  background-size: cover;
  object-fit: cover;
  width: 670px;
  height: 890px;
  margin: 0 auto;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-bottom-img {
    height: 700px;
  }
}

@media (max-width: 767px) {
  .tp-hero-bottom-img {
    height: 500px;
  }
}

.tp-hero-bottom-img video {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-position: center center;
  background-size: cover;
  object-fit: cover;
}

.tp-hero-2-pt {
  padding-top: 75px;
}

.tp-hero-2-wrapper {
  padding-left: 120px;
  height: 820px;
  border-radius: 12px;
  padding-right: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-2-wrapper {
    height: 660px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-2-wrapper {
    height: 660px;
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .tp-hero-2-wrapper {
    padding-left: 20px;
    height: 270px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-2-wrapper {
    padding-left: 60px;
    height: 560px;
  }
}

.tp-hero-2-bg {
  border-radius: 20px;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-hero-2-bg img {
  border-radius: 20px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tp-hero-2-title {
  font-size: 95px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -5.2px;
  color: #FAF3E3;
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-2-title {
    font-size: 90px;
  }
}

@media (max-width: 767px) {
  .tp-hero-2-title {
    font-size: 37px;
  }
}

.tp-hero-2-title span {
  margin-left: 160px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-2-title span {
    margin-left: 60px;
  }
}

@media (max-width: 767px) {
  .tp-hero-2-title span {
    margin-left: 0px;
  }
}

.tp-hero-2-content {
  margin-left: 160px;
}

@media (max-width: 767px) {
  .tp-hero-2-content {
    margin-left: 20px;
  }
}

.tp-hero-2-content p {
  max-width: 520px;
  color: #FAF3E3;
  font-size: 25px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 35px;
  text-wrap: nowrap;
}

.tp-hero-3-ptb {
  padding-top: 210px;
  padding-bottom: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-3-ptb {
    padding-top: 200px;
  }
}

@media (max-width: 767px) {
  .tp-hero-3-ptb {
    padding-top: 140px;
  }
}

.tp-hero-3-title {
  font-size: 140px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -5.6px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-3-title {
    font-size: 115px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-3-title {
    font-size: 95px;
  }
}

@media (max-width: 767px) {
  .tp-hero-3-title {
    font-size: 60px;
  }
}

.tp-hero-3-category {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: block;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 20px;
}

.tp-hero-3-circle-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.tp-hero-3-circle-shape span {
  height: 480px;
  width: 460px;
  display: inline-block;
  filter: blur(35px);
  border-radius: 62% 47% 82% 35%/45% 45% 80% 66%;
  background: linear-gradient(220deg, rgba(148, 254, 98, 0.5) 0.77%, rgba(255, 226, 122, 0.5) 55.4%, rgba(234, 94, 94, 0.5) 100%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-3-circle-shape span {
    height: 400px;
    width: 400px;
  }
}

.tp-hero-4-content-wrap {
  padding-top: 220px;
  padding-left: 230px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-hero-4-content-wrap {
    padding-left: 150px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-4-content-wrap {
    padding-left: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-4-content-wrap {
    padding-left: 0px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-4-content-wrap {
    padding-top: 200px;
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-4-content-wrap {
    padding-top: 150px;
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .tp-hero-4-content-wrap {
    padding-top: 120px;
    padding-left: 0;
  }
}

.tp-hero-4-content {
  margin-bottom: 135px;
  padding-left: 125px;
  display: inline-block;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-hero-4-content {
    padding-left: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-4-content {
    margin-bottom: 80px;
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .tp-hero-4-content {
    margin-bottom: 50px;
    padding-left: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-4-content {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-4-content .tp-section-title-200 {
    font-size: 95px;
  }
}

@media (max-width: 767px) {
  .tp-hero-4-content .tp-section-title-200 {
    font-size: 65px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-4-content .tp-section-title-200 {
    font-size: 100px;
  }
}

.tp-hero-4-text {
  position: absolute;
  top: 50px;
  right: 16%;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-4-text {
    top: 11px;
    right: 7%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-4-text {
    top: 6px;
    right: 5%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-4-text {
    top: 2px;
    right: 5%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-4-text {
    top: -33px;
    right: -11%;
  }
}

@media (max-width: 767px) {
  .tp-hero-4-text {
    position: static;
    margin-top: 30px;
  }
}

.tp-hero-4-text p {
  max-width: 235px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--tp-ff-marcellus);
}

.tp-hero-4-achievement {
  position: absolute;
  right: 120px;
  bottom: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-4-achievement {
    right: 30px;
    bottom: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-4-achievement {
    right: 20px;
  }
}

.tp-hero-4-achievement::after {
  position: absolute;
  top: -15%;
  left: -55%;
  width: 241px;
  height: 120px;
  transform: rotate(-19.838deg);
  opacity: 0.200000003;
  content: "";
  border: 1px solid #fff;
  border-radius: 50%;
}

.tp-hero-4-achievement span {
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 10px;
  display: inline-block;
}

.tp-hero-4-achievement span i {
  font-style: normal;
}

.tp-hero-4-achievement p {
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

.tp-hero-4-star-1 {
  position: absolute;
  top: -55px;
  left: 30px;
}

.tp-hero-4-star-2 {
  position: absolute;
  bottom: -20px;
  left: -65px;
}

.tp-hero-4-thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 755px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-4-thumb {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-4-thumb {
    height: 320px;
  }
}

@media (max-width: 767px) {
  .tp-hero-4-thumb {
    height: 200px;
  }
}

@media (max-width: 767px) {
  .tp-hero-4-thumb img {
    height: 300px;
    object-fit: cover;
  }
}

.tp-overlay-bg {
  background-size: cover;
}

.tp-hero-5-title {
  font-size: 190px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -11.4px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-body);
  white-space: nowrap;
  margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-5-title {
    font-size: 150px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-5-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-5-title {
    font-size: 115px;
  }
}

@media (max-width: 767px) {
  .tp-hero-5-title {
    font-size: 50px;
    letter-spacing: 1px;
    white-space: inherit;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-5-title {
    font-size: 70px;
    letter-spacing: 1px;
  }
}

.tp-hero-5-title span {
  color: #ACACAC;
}

.tp-hero-5-content-box {
  padding-left: 170px;
  margin-bottom: 95px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-5-content-box {
    padding-left: 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-5-content-box {
    padding-left: 0px;
  }
}

@media (max-width: 767px) {
  .tp-hero-5-content-box {
    padding-left: 0px;
    margin-bottom: 35px;
  }
}

.tp-hero-5-content-box p {
  color: #5D5D63;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  margin-bottom: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-5-content-box p {
    font-size: 22px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-5-content-box p {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .tp-hero-5-content-box p {
    font-size: 20px;
    line-height: 30px;
  }

  .tp-hero-5-content-box p br {
    display: none;
  }
}

.tp-hero-5-space {
  padding-top: 200px;
  padding-bottom: 100px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-5-space {
    padding-top: 150px;
  }
}

@media (max-width: 767px) {
  .tp-hero-5-space {
    padding-top: 120px;
  }
}

.tp-hero-6-bg {
  height: 930px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-6-bg {
    height: 720px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-hero-6-bg {
    height: 650px;
  }
}

.tp-hero-6-blur-circle span {
  height: 600px;
  width: 600px;
  border-radius: 600px;
  background: rgba(136, 65, 30, 0.7);
  filter: blur(250px);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.tp-hero-6-thumb {
  position: absolute;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .tp-hero-6-thumb {
    position: static;
    transform: translate(0);
  }
}

.tp-hero-6-title-box .tp-btn-zikzak {
  margin-left: 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-6-title-box .tp-btn-zikzak {
    margin-left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-6-title-box .tp-btn-zikzak {
    margin-left: 0;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-6-title-box .tp-section-title-220 {
    font-size: 185px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-6-title-box .tp-section-title-220 {
    font-size: 145px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-6-title-box .tp-section-title-220 {
    font-size: 100px;
  }
}

@media (max-width: 767px) {
  .tp-hero-6-title-box {
    margin-top: 140px;
  }

  .tp-hero-6-title-box .tp-section-title-220 {
    font-size: 70px;
    margin-bottom: 20px;
  }

  .tp-hero-6-title-box .tp-section-title-220 .text-1 {
    margin-right: 0px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-6-title-box {
    margin-top: 400px;
  }
}

.tp-hero-6-text {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 290px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.18px;
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-6-text {
    max-width: 220px;
    right: -40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-6-text {
    right: -22px;
    max-width: 220px;
  }
}

@media (max-width: 767px) {
  .tp-hero-6-text {
    position: static;
  }
}

.tp-hero-6-bar {
  position: absolute;
  top: 60px;
  right: 60px;
  z-index: 99;
}

@media (max-width: 767px) {
  .tp-hero-6-bar {
    top: 30px;
    right: 30px;
  }
}

.tp-hero-6-bar.tp-header-bar button span {
  background-color: var(--tp-common-white);
}

.tp-hero-6-info-box {
  background-color: var(--tp-common-orange);
  position: absolute;
  bottom: 0;
  right: 225px;
  padding: 40px 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-6-info-box {
    padding: 20px 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-6-info-box {
    right: 100px;
    padding: 20px;
  }
}

.tp-hero-6-social-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32px;
  color: var(--tp-common-white);
  margin-bottom: 16px;
}

.tp-hero-6-social {
  padding-right: 70px;
  margin-right: 70px;
  border-right: 1px solid #E47045;
}

.tp-hero-6-social a {
  height: 36px;
  width: 36px;
  margin-right: 4px;
  border-radius: 50%;
  line-height: 36px;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tp-hero-6-video a {
  position: relative;
  display: inline-block;
  margin-right: 13px;
}

.tp-hero-6-video a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--tp-common-black);
}

.tp-hero-6-video-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.26px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  display: inline-block;
}

.tp-studio-right-layout {
  width: calc(100% - 80px);
  margin-left: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-right-layout {
    width: calc(100% - 0px);
  }
}

.tp-studio-height {
  height: 100vh;
  width: 1920px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-height {
    height: auto;
    width: 100%;
  }
}

.tp-studio-plr {
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 40px;
}

@media (max-width: 767px) {
  .tp-studio-plr {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-hero-space {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .tp-studio-hero-space {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.tp-studio-hero-title {
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-shoulders);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-hero-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-hero-title {
    font-size: 125px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-hero-title {
    font-size: 120px;
    margin-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .tp-studio-hero-title {
    font-size: 65px;
    margin-bottom: 50px;
  }
}

.tp-studio-hero-shape-1 {
  position: absolute;
  right: 31%;
  top: 3%;
  animation: rotate2 5s linear infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-hero-shape-1 {
    top: -31%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-hero-shape-1 {
    top: -45%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-hero-shape-1 {
    right: -2%;
  }
}

.tp-studio-hero-img-1 {
  position: absolute;
  top: 100px;
  left: -15px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-hero-img-1 {
    top: 40px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-hero-img-1 {
    top: 0px;
  }
}

.tp-studio-hero-img-2 {
  position: absolute;
  bottom: -1px;
  left: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-hero-thumb {
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .tp-studio-hero-thumb {
    margin-bottom: 30px;
  }
}

.tp-studio-hero-thumb img {
  max-width: inherit;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .panels-container-2 {
    flex-wrap: wrap;
  }
}

.panel-width {
  width: 100%;
}

/*----------------------------------------*/
/*  7.3 brand css start
/*----------------------------------------*/
.brand-wrapper {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.tp-brand-area {
  padding-top: 600px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-brand-area {
    padding-top: 450px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-brand-area {
    padding-top: 640px;
  }
}

@media (max-width: 767px) {
  .tp-brand-area {
    padding-top: 0;
  }
}

.tp-brand-ptb {
  padding-top: 85px;
}

.tp-brand-brd-top {
  border-top: 1px solid var(--tp-border-1);
}

.tp-brand-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  margin-bottom: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-brand-title {
    font-size: 14px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-brand-title {
    margin-bottom: 40px;
  }
}

.tp-brand-item {
  text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-brand-item {
    text-align: center;
  }
}

.tp-brand-slider-active .swiper-wrapper {
  display: flex;
  align-items: center;
}

.tp-brand-3-slider-active .swiper-wrapper {
  display: flex;
  align-items: center;
}

.tp-brand-3-slider-active .tp-brand-item {
  text-align: center;
}

.tp-brand-4-area {
  display: block;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 9999;
  margin-bottom: -3px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-brand-4-area {
    padding-top: 0;
  }
}

.tp-brand-4-item {
  border: 1px solid rgba(25, 25, 26, 0.1);
  text-align: center;
  margin: -1px 0 0 -1px;
  padding: 60px 30px;
  height: 150px;
  overflow: hidden;
}

.tp-brand-4-item img {
  transition: 0.3s;
}

.tp-brand-4-item:hover .tp-brand-4-line-text {
  opacity: 1;
  visibility: visible;
}

.tp-brand-4-item:hover img {
  opacity: 0;
  visibility: hidden;
}

.tp-brand-4-line-text {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  animation: scrollText-2 25s infinite linear;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.tp-brand-4-line-text span {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  white-space: nowrap;
  margin: 0px 15px;
}

@media (max-width: 767px) {
  .bd-brand-item {
    margin-bottom: 20px;
  }
}

.bd-brand-item img {
  width: 100%;
}

/*----------------------------------------*/
/*  7.19 service css start
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-area {
    padding-top: 100px;
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .tp-service-area {
    padding-top: 80px;
    padding-bottom: 0;
  }
}

.tp-service-title-box {
  display: inline-block;
  margin-bottom: 30px;
}

.tp-service-title-sm {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--tp-common-black);
}

.tp-service-title-sm a {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  display: inline;
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-service-title-sm a:hover {
  background-size: 0% 2px, 100% 2px;
}

.tp-service-icon {
  flex: 0 0 auto;
}

.tp-service-icon img {
  flex: 0 0 auto;
  margin-right: 42px;
  transform: translateY(-10px);
}

@media (max-width: 767px) {
  .tp-service-icon img {
    margin-right: 0;
    margin-bottom: 30px;
    transform: translateY(0);
  }
}

.tp-service-content p {
  padding-right: 100px;
  margin-bottom: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-service-content p {
    padding-right: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-content p {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .tp-service-item {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-left-btn {
    margin-bottom: 60px;
  }
}

.tp-service-2-area {
  margin-bottom: 60px;
}

@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),
(max-width: 767px) {
  .tp-service-2-area {
    margin-top: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-service-2-area {
    padding-bottom: 60px;
  }
}

.tp-service-2-shape-img {
  padding-left: 90px;
}

.tp-service-2-shape-img img {
  animation: rotate2 8s linear infinite;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-2-shape-img {
    padding-left: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-2-shape-img {
    padding-left: 0;
    margin-bottom: 50px;
  }
}

.tp-about-2-section-title {
  font-size: 60px;
  font-family: "Qanelas-Regular", sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: #42332A;
  margin: 0 0 50px;
}

.tp-service-2-title-box p {
  font-size: 22px;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 50px;
  color: #5A493E;
}

.tp-service-3-wrap {
  padding-top: 65px;
  padding-bottom: 70px;
  border-top: 1px solid rgba(25, 25, 26, 0.1);
}

.tp-service-3-wrap:last-child {
  border-bottom: 1px solid rgba(25, 25, 26, 0.1);
}

@media (max-width: 767px) {
  .tp-service-3-btn-box {
    margin-top: 30px;
  }

  .tp-service-2-title-box p {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    margin: 0 0 50px;
    color: #5A493E;
  }
}

.tp-service-3-icon {
  position: absolute;
  top: 33%;
  left: 41%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-3-icon {
    top: 31%;
    left: 35%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-3-icon {
    top: 28%;
    left: 37%;
  }
}

@media (max-width: 767px) {
  .tp-service-3-icon {
    top: 24%;
    left: 58%;
  }
}

.tp-service-3-icon img {
  animation: rotate2 5s linear infinite;
}

.tp-service-3-title {
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-3-title {
    font-size: 28px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-3-title {
    margin-bottom: 20px;
  }
}

.tp-service-3-title a {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  display: inline;
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-service-3-title:hover a {
  background-size: 0% 2px, 100% 2px;
}

.tp-service-3-content {
  padding: 0px 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-3-content {
    padding: 0px 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-3-content {
    padding: 0;
    padding-right: 100px;
  }
}

@media (max-width: 767px) {
  .tp-service-3-content {
    padding: 0;
  }
}

.tp-service-3-content p {
  color: #48484D;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
(max-width: 767px) {
  .tp-service-3-content p br {
    display: none;
  }
}

.tp-service-3-category span {
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 20px;
  padding: 0px 20px;
  line-height: 30px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1px solid #E4E4E8;
  margin-right: 8px;
}

@media (max-width: 767px) {
  .tp-service-3-category span {
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .tp-service-4-area {
    padding-bottom: 70px;
    padding-top: 70px;
  }
}

.tp-service-4-title-wrap {
  margin-bottom: 80px;
}

.tp-service-4-title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-4-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .tp-service-4-title {
    font-size: 33px;
  }
}

.tp-service-4-shape-1 {
  margin-right: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-4-shape-1 {
    margin-right: 0;
  }
}

.tp-service-4-item {
  background-color: var(--tp-common-black);
  padding: 65px 40px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-service-4-item {
    padding: 40px 30px;
    margin-right: 0;
  }
}

@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),
(max-width: 767px) {
  .tp-service-4-item {
    margin-right: 0;
  }
}

.tp-service-4-title-sm {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 15px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-service-4-title-sm {
    font-size: 27px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-service-4-title-sm {
    font-size: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-4-title-sm {
    font-size: 23px;
  }
}

@media (max-width: 767px) {
  .tp-service-4-title-sm {
    font-size: 26px;
  }
}

.tp-service-4-title-sm a {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-service-4-title-sm a:hover {
  background-size: 0% 1px, 100% 1px;
}

.tp-service-4-content p {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 45px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
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),
(max-width: 767px) {
  .tp-service-4-content p br {
    display: none;
  }
}

.tp-service-4-link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  position: relative;
}

.tp-service-4-link::after {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 20px;
  height: 1px;
  background-color: var(--tp-common-white);
  content: "";
  transition: 0.3s;
}

.tp-service-4-link:hover {
  color: var(--tp-common-white);
}

.tp-service-4-link:hover::after {
  width: 100%;
}

.tp-service-4-icon {
  margin-bottom: 65px;
}

.tp-service-4-icon img {
  min-height: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-5-area {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .tp-service-5-area {
    padding-top: 100px;
  }

  .tp-service-5-area.sv-service-style {
    padding-top: 0;
  }
}

.tp-service-5-title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-5-title br {
    display: none;
  }
}

.tp-service-5-title .text-space {
  padding-left: 155px;
}

.tp-service-5-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  position: absolute;
  top: 0;
  left: 0;
}

.tp-service-5-item .tp-service-4-content p {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
}

.tp-service-5-item .tp-service-4-icon {
  margin-bottom: 30px;
}

.tp-service-5-item.space-1 {
  padding-left: 30px;
  padding-right: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-5-item.space-1 {
    padding-left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-5-item.space-1 {
    padding: 0;
  }
}

.tp-service-5-item.space-2 {
  padding-left: 0;
  padding-right: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-5-item.space-2 {
    padding-right: 50px;
  }
}

@media (max-width: 767px) {
  .tp-service-5-item.space-2 {
    padding-right: 0px;
  }
}

.tp-service-5-item.space-3 {
  padding-left: 10px;
  padding-right: 90px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-service-5-item.space-3 {
    padding-right: 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-5-item.space-3 {
    padding-right: 0px;
    padding-left: 0;
  }
}

.tp-service-5-wrap {
  margin-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-5-wrap {
    margin-left: 0;
  }
}

.tp-service-6-left-box {
  min-width: 530px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-6-left-box {
    min-width: 400px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-6-left-box {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .tp-service-6-left-box {
    margin-bottom: 30px;
    min-width: 100%;
  }
}

@media (max-width: 767px) {
  .tp-service-6-section-title-box {
    margin-bottom: 30px;
  }
}

.tp-service-6-count-number span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
  margin-right: 65px;
  min-width: 10px;
  display: inline-block;
}

@media (max-width: 767px) {
  .tp-service-6-count-number span {
    margin-right: 15px;
  }
}

.tp-service-6-line::before {
  margin-top: 10px;
  margin-right: 20px;
  content: "";
  height: 1px;
  width: 0px;
  background-color: var(--tp-common-black);
  display: inline-block;
  transition: 0.4s;
}

.tp-service-6-title-sm {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
}

@media (max-width: 767px) {
  .tp-service-6-title-sm {
    font-size: 20px;
  }

  .tp-service-6-title-sm br {
    display: none;
  }
}

.tp-service-6-title-box:hover .tp-service-6-line::before {
  width: 60px;
}

.tp-service-6-text p {
  max-width: 350px;
  color: #5D5D63;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .tp-service-6-text p {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-service-6-text p {
    margin-right: 51px;
  }
}

.tp-service-6-category {
  min-width: 150px;
  margin-left: 160px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-service-6-category {
    margin-left: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-6-category {
    margin-left: 100px;
  }
}

@media (max-width: 767px) {
  .tp-service-6-category {
    margin-left: 0px;
  }
}

.tp-service-6-category span {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-black);
  display: block;
  margin-bottom: 15px;
}

.tp-service-6-category span:last-child {
  margin-bottom: 0;
}

.tp-service-6-item {
  padding: 48px 0;
  border-bottom: 1px solid rgba(25, 25, 26, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-service-6-item {
    flex-wrap: wrap;
  }
}

.tp-service-6-item:first-child {
  border-top: 1px solid rgba(25, 25, 26, 0.1);
}

.tp-service-6-section-title-box .tp-section-subtitle {
  text-transform: uppercase;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .tp-service-6-right-box {
    flex-wrap: wrap;
  }
}

.sv-hero-title-box {
  margin-bottom: 90px;
  padding-left: 165px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sv-hero-title-box {
    padding-left: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .sv-hero-title-box {
    padding-left: 0px;
    margin-bottom: 45px;
  }
}

.sv-hero-title-box p {
  color: #5D5D63;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

.sv-hero-title {
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -4.8px;
  color: var(--tp-common-black-2);
  transform: translateX(-8px);
  margin-bottom: 12px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sv-hero-title {
    font-size: 90px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sv-hero-title {
    font-size: 110px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sv-hero-title {
    font-size: 90px;
  }
}

@media (max-width: 767px) {
  .sv-hero-title {
    font-size: 60px;
  }
}

.sv-hero-ptb {
  padding-top: 225px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sv-hero-ptb {
    padding-top: 170px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sv-hero-ptb {
    padding-top: 140px;
  }
}

@media (max-width: 767px) {
  .sv-hero-ptb {
    padding-top: 110px;
    padding-bottom: 60px;
  }
}

.sv-hero-thumb-shape {
  position: absolute;
  top: -70px;
  right: 165px;
}

.sv-hero-thumb-box {
  height: 700px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sv-hero-thumb-box {
    height: 550px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sv-hero-thumb-box {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sv-hero-thumb-box {
    height: 200px;
  }
}

@media (max-width: 767px) {
  .sv-hero-thumb-box {
    height: 200px;
  }
}

.sv-hero-thumb-box img {
  margin-top: -250px;
}

@media (max-width: 767px) {
  .sv-hero-thumb-box img {
    height: 400px;
  }
}

.sv-service-content-wrap {
  height: 100%;
  width: 100%;
  padding: 110px;
  background-color: var(--tp-common-black-2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sv-service-content-wrap {
    padding: 80px;
  }
}

@media (max-width: 767px) {
  .sv-service-content-wrap {
    padding: 80px 30px;
  }
}

.sv-service-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
  display: inline-block;
}

.sv-service-subtitle i {
  font-style: normal;
}

.sv-service-subtitle i::after {
  content: "";
  height: 1px;
  width: 40px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  margin: 0px 11px;
}

.sv-service-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.6px;
  color: var(--tp-common-white);
}

.sv-service-text p {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 435px;
  margin-bottom: 40px;
}

.sv-service-list {
  margin-bottom: 50px;
}

.sv-service-list ul li {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 15px;
  position: relative;
  padding-left: 15px;
  list-style-type: none;
  color: rgba(255, 255, 255, 0.9);
}

.sv-service-list ul li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  height: 4px;
  width: 4px;
  background-color: rgba(255, 255, 255, 0.9);
}

.sv-service-space-wrap {
  padding-left: 50px;
}

@media (max-width: 767px) {
  .sv-service-space-wrap {
    padding-left: 0;
  }
}

.sv-service-title-box {
  margin-bottom: 32px;
}

.sv-service-thumb {
  height: 100%;
}

.sv-service-thumb img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sv-port-thumb.port-thumb-1 img {
  border-radius: 300px;
}

.sv-port-thumb.port-thumb-2 img {
  border-radius: 40px;
}

.sv-small-text-box span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  color: var(--tp-common-black-2);
}

.sv-big-text {
  font-size: 199px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -12px;
  text-transform: uppercase;
  color: var(--tp-common-black-2);
  white-space: nowrap;
  margin-bottom: 0;
  transform: translateX(-12px);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sv-big-text {
    font-size: 182px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sv-big-text {
    font-size: 151px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sv-big-text {
    font-size: 129px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sv-big-text {
    font-size: 101px;
  }
}

@media (max-width: 767px) {
  .sv-big-text {
    font-size: 84px;
    white-space: break-spaces;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sv-big-text {
    font-size: 80px;
    white-space: nowrap;
  }
}

.service-details__subtitle {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--tp-common-black);
}

.service-details__title {
  font-weight: 500;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--tp-common-black);
  text-transform: capitalize;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-details__title {
    font-size: 85px;
  }
}

@media (max-width: 767px) {
  .service-details__title {
    font-size: 58px;
  }
}

.service-details__banner-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-details__banner-text p br {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-details__banner-text p {
    font-size: 17px;
  }

  .service-details__banner-text p br {
    display: none;
  }
}

@media (max-width: 767px) {
  .service-details__banner-text p {
    font-size: 17px;
  }

  .service-details__banner-text p br {
    display: none;
  }
}

.service-details__tab-btn ul li button {
  font-weight: 500;
  font-size: 17px;
  line-height: 42px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tp-ff-didoneright);
  color: var(--tp-common-white);
  padding: 0px 50px;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  margin: 0 5px;
  transition: 0.3s;
  margin-bottom: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-details__tab-btn ul li button {
    padding: 0px 45px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-details__tab-btn ul li button {
    padding: 0px 25px;
  }
}

.service-details__tab-btn ul li button:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.service-details__tab-btn ul li button.active {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
  border-color: var(--tp-common-white);
}

.service-details__left-text .text-1 {
  font-weight: 400;
  font-size: 30px;
  line-height: 38px;
  padding-bottom: 20px;
  color: var(--tp-common-black);
}

.service-details__left-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--tp-common-black);
}

.service-details__fea-list {
  margin-bottom: 90px;
}

.service-details__fea-list ul li {
  font-weight: 500;
  font-size: 18px;
  line-height: 35px;
  color: var(--tp-common-black);
  list-style-type: none;
  position: relative;
  padding-left: 17px;
  margin-bottom: 10px;
}

.service-details__fea-list ul li:last-child {
  margin-bottom: 0;
}

.service-details__fea-list ul li::after {
  position: absolute;
  top: 15px;
  left: 0;
  width: 5px;
  height: 5px;
  content: "";
  display: inline-block;
  background-color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-details__space {
    padding-top: 160px;
  }
}

@media (max-width: 767px) {
  .service-details__space {
    padding-top: 130px;
  }
}

.service-details__sm-thumb img {
  width: 100%;
}

.service-details__right-wrap {
  padding: 100px 30px;
  margin-left: 70px;
  background-color: var(--tp-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .service-details__right-wrap {
    margin-left: 0;
    margin-top: 60px;
  }
}

.service-details__right-category {
  margin-bottom: 200px;
}

.service-details__right-category a {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1px solid var(--tp-common-black);
  padding: 0px 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 100px;
  transition: 0.3s;
  margin-bottom: 10px;
  display: table;
}

.service-details__right-category a.active {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.service-details__right-text-box h4 {
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

.service-details__right-text-box p {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--tp-common-black);
}

.service-details__rotate-text {
  position: absolute;
  top: 20%;
  right: -119px;
}

.service-details__rotate-text span {
  transform: rotate(90deg);
  padding: 5px 30px;
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  background-color: #fff;
  letter-spacing: 1.2px;
}

.service-details__tab-thumb {
  overflow: hidden;
  position: relative;
  width: auto;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .service-details__tab-thumb {
    height: 340px;
  }

  .service-details__tab-thumb img {
    height: 500px;
    object-fit: cover;
  }
}

.tp-studio-service-ptb {
  padding-top: 120px;
  padding-bottom: 310px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-service-ptb {
    padding-bottom: 190px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-service-ptb {
    padding-bottom: 230px;
  }
}

@media (max-width: 767px) {
  .tp-studio-service-ptb {
    padding: 100px 15px;
  }
}

.tp-studio-service-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  color: var(--tp-common-white);
}

.tp-studio-service-title {
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  margin-bottom: 15px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-service-title {
    font-size: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-service-title {
    font-size: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-service-title {
    font-size: 35px;
  }
}

@media (max-width: 767px) {
  .tp-studio-service-title {
    font-size: 30px;
  }
}

.tp-studio-service-content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-service-content p {
    font-size: 16px;
  }
}

.tp-studio-service-icon span {
  margin-right: 40px;
  display: inline-block;
}

@media (max-width: 767px) {
  .tp-studio-service-icon span {
    margin-right: 0;
    margin-bottom: 30px;
  }
}

.tp-studio-service-item {
  padding-bottom: 50px;
  margin-bottom: 50px;
  position: relative;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-service-item {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-service-item {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .tp-studio-service-item {
    flex-wrap: wrap;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
}

.tp-studio-service-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.tp-studio-service-item:last-child .tp-studio-border::after {
  display: none;
}

.tp-studio-service-item .tp-studio-border::after {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  width: calc(100% - 170px);
  background-color: rgba(255, 255, 255, 0.12);
  content: "";
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-service-item .tp-studio-border::after {
    width: calc(100% - 0px);
  }
}

.tp-studio-service-item.space-ml-2 {
  margin-left: 175px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-service-item.space-ml-2 {
    margin-left: 0;
  }
}

.tp-studio-service-item.space-ml-3 {
  margin-left: 345px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-service-item.space-ml-3 {
    margin-left: 0;
  }
}

.tp-studio-service-linetext-wrap {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  text-align: center;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-service-linetext-wrap {
    bottom: -7px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-service-linetext-wrap {
    bottom: 0px;
  }
}

.tp-studio-service-linetext {
  font-size: 250px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-service-linetext {
    font-size: 150px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-service-linetext {
    font-size: 125px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-service-linetext {
    font-size: 160px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-service-linetext {
    font-size: 150px;
  }
}

@media (max-width: 767px) {
  .tp-studio-service-linetext {
    font-size: 100px;
  }
}

.tp-studio-service-linetext span {
  font-weight: 200;
}

/*----------------------------------------*/
/*  7.18 project css start
/*----------------------------------------*/
.tp-line-content span {
  font-size: 180px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -8px;
  text-transform: uppercase;
  color: #DCDDDF;
  font-family: var(--tp-ff-marcellus);
}

@media (max-width: 767px) {
  .tp-line-content span {
    font-size: 65px;
  }
}

.tp-line-text-wrap .swiper-wrapper {
  transition-timing-function: linear;
}

.tp-line-text-wrap .swiper-slide {
  width: auto;
}

.tp-line-text-wrap .swiper,
.tp-line-text-wrap .swiper-container {
  direction: rtl;
}

.tp-line-text-wrap-2 .swiper,
.tp-line-text-wrap-2 .swiper-container {
  direction: ltr;
}

.tp-project-textline {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .tp-project-textline {
    margin-bottom: 60px;
  }
}

.tp-project-textline-1 {
  margin-right: 50px;
}

.tp-project-textline span {
  font-weight: 400;
  font-size: 200px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-textline span {
    font-size: 150px;
  }
}

@media (max-width: 767px) {
  .tp-project-textline span {
    font-size: 70px;
  }
}

.tp-project-textline span img {
  margin: 0 50px;
  transform: translateY(-15px);
  animation: rotate2 15s linear infinite;
  margin-top: -40px;
}

.tp-project-textline span.textline-1 {
  margin-right: 50px;
  flex: 0 0 auto;
  font-family: var(--tp-ff-gallery);
}

@media (max-width: 767px) {
  .tp-project-textline span.textline-1 {
    margin-right: 20px;
  }
}

.tp-project-textline span.textline-2 {
  margin-right: 50px;
}

.tp-project-left-wrap {
  padding-right: 100px;
  margin-top: 190px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-left-wrap {
    padding-right: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-left-wrap {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .tp-project-left-wrap {
    padding-right: 0px;
    margin-top: 0;
  }
}

.tp-project-right-wrap {
  padding-left: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-right-wrap {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-right-wrap {
    padding-left: 0px;
  }
}

.tp-project-mr {
  margin-right: 90px;
}

@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),
(max-width: 767px) {
  .tp-project-mr {
    margin-right: 0;
  }
}

.tp-project-ml {
  margin-left: 90px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-ml {
    margin-left: 0;
  }
}

.tp-project-img {
  overflow: hidden;
  position: relative;
  height: 100%;
  display: inline-block;
}

.tp-project-img.height-1 {
  height: 450px;
  width: 100%;
}

@media (max-width: 767px) {
  .tp-project-img.height-1 {
    height: 300px;
    width: 100%;
  }
}

.tp-project-img.height-2 {
  height: 580px;
}

@media (max-width: 767px) {
  .tp-project-img.height-2 {
    height: 300px;
    width: 100%;
  }
}

.tp-project-img.height-3 {
  height: 820px;
  width: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-img.height-3 {
    height: 700px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-img.height-3 {
    height: 500px;
  }
}

@media (max-width: 767px) {
  .tp-project-img.height-3 {
    height: 300px;
    width: 100%;
  }
}

.tp-project-img.height-4 {
  height: 830px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-img.height-4 {
    height: 600px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-img.height-4 {
    height: 500px;
  }
}

@media (max-width: 767px) {
  .tp-project-img.height-4 {
    height: 300px;
    width: 100%;
  }
}

.tp-project-img.height-5 {
  height: 400px;
}

@media (max-width: 767px) {
  .tp-project-img.height-5 {
    height: 300px;
    width: 100%;
  }
}

.tp-project-img.height-6 {
  height: 450px;
  width: 100%;
  margin-top: 80px;
}

@media (max-width: 767px) {
  .tp-project-img.height-6 {
    height: 300px;
    width: 100%;
    margin-top: 0;
  }
}

.tp-project-img img {
  width: auto;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
}

@media (max-width: 767px) {
  .tp-project-img img {
    width: 100%;
  }
}

.tp-project-img:hover .tp-project-content span {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0.4s;
}

.tp-project-img:hover .tp-project-content .tp-project-title-sm {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

.tp-project-full-img-wrap {
  height: 100vh;
}

.tp-project-full-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  background-position: top;
  background-repeat: no-repeat;
  object-fit: cover;
}

.tp-project-content span {
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  display: inline-block;
  transform: translateX(20px);
  transition: all 0.5s ease-out 0s;
  transition-delay: 0.2s;
}

.tp-project-title-sm {
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
  margin-bottom: 0;
  color: var(--tp-common-black);
  transform: translateX(20px);
  transition: all 0.3s ease-out 0s;
  transition-delay: 0.2s;
}

.tp-project-btn {
  margin-bottom: 100px;
}

@media (max-width: 767px) {
  .tp-project-item {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .panels-container {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .panels-container .panel {
    width: 100%;
  }
}

.tp-project-2-area {
  margin: 0px -15px;
  transition: 0.3s;
}

.tp-project-2-area.addclass {
  background-color: #e9e3d6;
}

.tp-project-2-content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-2-content {
    padding: 0 50px;
    bottom: 100px;
  }
}

@media (max-width: 767px) {
  .tp-project-2-content {
    padding: 30px;
  }
}

.tp-project-2-content span {
  color: #5A493E;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
}

.tp-project-2-title-sm {
  color: #42332A;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.8px;
  margin-bottom: 0;
  font-family: 'QanelasDEMO-Thin';
}

.tp-project-2-title-sm a {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-project-2-title-sm a:hover {
  background-size: 0% 2px, 100% 2px;
  color: #FFF8ED;
}

@media (max-width: 767px) {
  .tp-project-2-title-sm {
    font-size: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-2-thumb {
    width: 100%;
  }
}

.tp-project-2-thumb img {
  max-width: inherit;
  object-fit: cover;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-2-thumb img {
    width: 100%;
    height: 100%;
  }
}

.tp-project-2-item {
  padding: 0px 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-2-item {
    width: 100%;
    margin-bottom: 30px;
  }
}

.tp-project-3-title-box .tp-section-title-200 {
  margin-bottom: 40px;
}

.tp-project-3-btn-box {
  position: absolute;
  right: 26%;
  top: 25px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-project-3-btn-box {
    right: 22%;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-project-3-btn-box {
    right: 25%;
    top: 15px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-3-btn-box {
    right: -6%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-3-btn-box {
    position: static;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-3-btn-box {
    right: 18%;
    top: 0;
  }
}

@media (max-width: 767px) {
  .tp-project-3-btn-box {
    position: static;
  }
}

.tp-project-3-wrap {
  margin-bottom: 220px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-3-wrap {
    margin-bottom: 130px;
  }
}

@media (max-width: 767px) {
  .tp-project-3-wrap {
    margin-bottom: 100px;
  }
}

.tp-project-3-thumb img {
  border-radius: 20px;
  width: 100%;
}

@media (max-width: 767px) {
  .tp-project-3-thumb.pro-img-1 {
    margin-bottom: 30px;
  }
}

.tp-project-3-thumb.pro-img-1 img {
  transform-origin: bottom left;
  transform: rotate(-2deg);
  position: relative;
  z-index: 2;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-3-thumb.pro-img-1 img {
    transform: rotate(0);
  }
}

.tp-project-3-thumb.pro-img-2 img {
  transform-origin: bottom right;
  transform: rotate(2deg);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-3-thumb.pro-img-2 img {
    transform: rotate(0);
  }
}

.tp-project-3-meta {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 120px;
  display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-3-meta {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-3-meta {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .tp-project-3-meta {
    margin-bottom: 25px;
  }
}

.tp-project-3-title-sm {
  font-size: 90px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.9px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-3-title-sm {
    font-size: 65px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-3-title-sm {
    font-size: 70px;
  }
}

@media (max-width: 767px) {
  .tp-project-3-title-sm {
    font-size: 40px;
  }
}

.tp-project-3-content {
  margin-bottom: 105px;
  margin-top: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-3-content {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-3-content {
    margin-bottom: 55px;
  }
}

@media (max-width: 767px) {
  .tp-project-3-content {
    margin-bottom: 60px;
  }
}

.tp-project-3-border span {
  width: 240px;
  height: 20px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(76, 73, 104, 0.7) 0%, rgba(115, 3, 192, 0.7) 33.33%, rgba(236, 56, 188, 0.7) 66.67%, rgba(253, 239, 249, 0.7) 100%);
  display: inline-block;
}

.tp-project-3-border.color-2 span {
  background: linear-gradient(90deg, rgba(26, 42, 108, 0.7) 0%, rgba(178, 31, 31, 0.7) 50%, rgba(253, 187, 45, 0.7) 100%);
}

.tp-project-3-border.color-3 span {
  background: linear-gradient(90deg, rgba(255, 75, 31, 0.7) 0%, rgba(31, 221, 255, 0.7) 100%);
}

.tp-reveal-line-2 {
  overflow: hidden;
  padding-bottom: 40px;
}

.tp_img_reveal {
  visibility: hidden;
  overflow: hidden;
}

.tp_img_reveal img {
  transform-origin: left;
  overflow: hidden;
}

@media (max-width: 767px) {
  .tp-project-4-area {
    padding-bottom: 90px;
  }
}

.tp-project-4-bg {
  position: relative;
  height: 950px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-4-bg {
    height: 850px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-4-bg {
    height: 700px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-4-bg {
    height: 600px;
  }
}

@media (max-width: 767px) {
  .tp-project-4-bg {
    height: 300px;
  }
}

@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),
(max-width: 767px) {
  .tp-project-4-bg a {
    height: 100%;
  }
}

.tp-project-4-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.tp-project-4-thumb {
  overflow: hidden;
  height: 100%;
}

.tp-project-4-overlay {
  position: relative;
  overflow: hidden;
}

.tp-project-4-overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(9, 9, 11, 0.2);
  content: "";
  z-index: 2;
}

.tp-project-4-content {
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
  display: inline-block;
}

.tp-project-4-content p {
  font-size: 16px;
  font-weight: 500;
  line-height: 11px;
  color: var(--tp-common-white);
}

.tp-project-4-title {
  font-size: 300px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -12px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-4-title {
    font-size: 200px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-4-title {
    font-size: 190px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-4-title {
    font-size: 170px;
  }
}

@media (max-width: 767px) {
  .tp-project-4-title {
    font-size: 90px;
  }
}

.tp-project-4-title span {
  color: #FFF;
  text-align: center;
  font-family: Marcellus;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  /* 125% */
}

.tp-project-5-wrap {
  margin-right: -3%;
}

@media (max-width: 767px) {
  .tp-project-5-wrap {
    flex-wrap: wrap;
    margin-right: 0;
  }
}

.tp-project-5-text {
  line-height: 0;
  flex: 0 0 auto;
}

.tp-project-5-text span {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  margin-right: 50px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-project-5-text span {
    font-size: 16px;
    margin-right: 40px;
  }
}

@media (max-width: 767px) {
  .tp-project-5-text span {
    margin-right: 0;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .tp-project-5-thumb-wrap {
    flex-wrap: wrap;
  }
}

.tp-project-5-thumb {
  flex: 0 0 auto;
  margin-right: 30px;
}

@media (max-width: 767px) {
  .tp-project-5-thumb {
    flex: initial;
    margin-bottom: 30px;
    margin-right: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-project-5-thumb {
    width: 100%;
  }
}

.tp-project-5-thumb img {
  display: inline-block;
  flex: 0 0 auto;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-project-5-thumb img {
    width: 100%;
    margin-right: 0;
  }
}

.tp-project-5-2-title {
  font-size: 190px;
  font-weight: 600;
  letter-spacing: -5.6px;
  color: rgba(245, 247, 245, 0.0784313725);
  white-space: nowrap;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-5-2-title {
    font-size: 210px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-5-2-title {
    font-size: 200px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-5-2-title {
    font-size: 140px;
  }
}

@media (max-width: 767px) {
  .tp-project-5-2-title {
    font-size: 85px;
  }
}

.tp-project-5-2-thumb {
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-5-2-thumb {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .tp-project-5-2-thumb {
    margin-bottom: 30px;
  }
}

.tp-project-5-2-thumb img {
  width: 100%;
}

.tp-project-5-2-category {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40px;
}

.tp-project-5-2-category span {
  font-size: 18px;
  font-weight: 400;
  line-height: 13px;
  color: var(--tp-common-white);
}

.tp-project-5-2-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  z-index: 2;
}

.tp-project-5-2-meta {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  z-index: 2;
}

.tp-project-5-2-title-sm {
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.8px;
  color: var(--tp-common-white);
  margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-5-2-title-sm {
    font-size: 30px;
  }
}

.portfolio-bg {
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .portfolio-bg {
    background-position: center;
  }
}

.portfolio-nav-slider-wrap {
  position: absolute;
  top: 140px;
  left: 160px;
  height: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-nav-slider-wrap {
    left: 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-nav-slider-wrap {
    left: 80px;
  }
}

@media (max-width: 767px) {
  .portfolio-nav-slider-wrap {
    left: 30px;
  }
}

.portfolio-nav-item {
  cursor: pointer;
}

.portfolio-nav-item.slick-current .portfolio-nav-title {
  background-size: 200% 100%;
}

.portfolio-nav-item .portfolio-nav-title {
  font-size: 180px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -3.6px;
  text-transform: uppercase;
  color: transparent;
  color: transparent;
  transition: 0.3s;
  cursor: pointer;
  display: inline-block;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  font-family: var(--tp-ff-shoulders);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--tp-common-white);
  transition: background-size 0.7s cubic-bezier(0.67, 0.01, 0.15, 0.98);
  background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-nav-item .portfolio-nav-title {
    font-size: 120px;
  }
}

@media (max-width: 767px) {
  .portfolio-nav-item .portfolio-nav-title {
    font-size: 70px;
  }
}

.portfolio-nav-item .portfolio-nav-title:hover {
  background-size: 200% 100%;
  color: var(--tp-common-white);
}

.portfolio-nav-item.slick-current .portfolio-nav-title {
  color: var(--tp-common-white);
}

.portfolio-nav-item.slick-slide {
  padding: 20px 0;
  display: inline-block;
}

@media (max-width: 767px) {
  .portfolio-nav-item.slick-slide {
    padding: 10px 0;
  }
}

.portfolio-bg {
  position: relative;
}

.portfolio-bg .portfolio-slider-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

.portfolio-bg .portfolio-slider-thumb img {
  transform: scale(1.2);
  transition: 6s;
}

.portfolio-bg.slick-current .portfolio-slider-thumb img {
  transform: scale(1);
}

.tp-portfolio-9-slider-active .swiper-slide {
  background-color: #fff;
}

.tp-portfolio-9-slider-active .swiper-slide.swiper-slide-active .tp-portfolio-9-slider-thumb img {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.tp-portfolio-9-slider-active .swiper-slide.swiper-slide-active .tp-portfolio-9-slider-title {
  transform: translateY(0);
  opacity: 1;
}

.tp-portfolio-9-slider-item {
  display: inline-block;
}

.tp-portfolio-9-slider-title {
  font-size: 180px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -5.4px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  transform: translateY(-200px);
  display: inline-block;
  transition: 0.6s;
  opacity: 0;
  padding: 15px 0;
}

@media only screen and (min-width: 1700px) and (max-width: 1850px),
only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-9-slider-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-9-slider-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-portfolio-9-slider-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-9-slider-title {
    font-size: 110px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-9-slider-title {
    font-size: 100px;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-9-slider-title {
    font-size: 70px;
  }
}

.tp-portfolio-9-slider-title-box {
  position: absolute;
  bottom: -80px;
  left: -75px;
  z-index: 9;
}

@media only screen and (min-width: 1700px) and (max-width: 1850px),
only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-9-slider-title-box {
    bottom: -58px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-9-slider-title-box {
    bottom: -60px;
    left: -76px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-portfolio-9-slider-title-box {
    bottom: -66px;
    left: -82px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-9-slider-title-box {
    bottom: -57px;
    left: -30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-9-slider-title-box {
    bottom: -52px;
    left: 0;
    right: 0;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-9-slider-title-box {
    bottom: -55px;
    left: 0;
  }
}

.tp-portfolio-9-slider-count {
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  top: -35px;
  right: -45px;
  position: absolute;
  letter-spacing: -1.6px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  z-index: 9;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-9-slider-count {
    font-size: 60px;
    top: -25px;
    right: -42px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-9-slider-count {
    font-size: 48px;
    top: -35px;
    right: 0px;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-9-slider-count {
    font-size: 40px;
    right: 0;
  }
}

.tp-portfolio-9-slider-height {
  height: 100vh;
  padding-top: 170px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 1700px) and (max-width: 1850px),
only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-9-slider-height {
    padding-top: 105px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-9-slider-height {
    padding-top: 120px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-portfolio-9-slider-height {
    padding-top: 140px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-9-slider-height {
    padding-top: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-9-slider-height {
    padding-top: 135px;
  }
}

.tp-portfolio-9-slider-thumb {
  overflow: hidden;
}

.tp-portfolio-9-slider-thumb img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 2500ms ease-in, -webkit-transform 10000ms ease;
  transition: opacity 2500ms ease-in, -webkit-transform 10000ms ease;
  transition: transform 10000ms ease, opacity 2500ms ease-in;
  transition: transform 10000ms ease, opacity 2500ms ease-in, -webkit-transform 10000ms ease;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-9-slider-thumb img {
    width: 850px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-9-slider-thumb img {
    width: 800px;
  }
}

.tp-portfolio-9-social-wrap {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 99;
}

.tp-portfolio-9-social-info span {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-portfolio-9-social-info span svg {
  transform: translateY(-2px);
  display: inline-block;
}

.tp-portfolio-9-scroll {
  position: relative;
  z-index: 99;
}

.tp-portfolio-9-scroll a {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 1200px) and (max-width: 1800px) {
  .tp-porfolio-10-area .container-1380 {
    padding: 0px 80px;
  }
}

.tp-porfolio-10-title-wrap ul li {
  list-style-type: none;
  display: inline-block;
  padding-right: 30px;
  padding-bottom: 25px;
  transition: 0.4s;
}

@media (max-width: 767px) {
  .tp-porfolio-10-title-wrap ul li {
    padding: 16px;
  }
}

.tp-porfolio-10-title-wrap ul li.active {
  transition: 0.4s;
}

.tp-porfolio-10-title-wrap ul li.active a .tp-porfolio-10-title {
  color: var(--tp-common-white);
  opacity: 1;
}

.tp-porfolio-10-title-wrap ul li.active a .tp-porfolio-10-category {
  color: var(--tp-common-white);
  opacity: 1;
}

.tp-porfolio-10-title {
  font-size: 130px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0;
  letter-spacing: -2.6px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  transition: 0.4s;
  opacity: 0.06;
}

@media only screen and (min-width: 1700px) and (max-width: 1850px),
only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-porfolio-10-title {
    font-size: 110px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-porfolio-10-title {
    font-size: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-porfolio-10-title {
    font-size: 90px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-porfolio-10-title {
    font-size: 85px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-porfolio-10-title {
    font-size: 61px;
  }
}

@media (max-width: 767px) {
  .tp-porfolio-10-title {
    font-size: 45px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-porfolio-10-title {
    font-size: 58px;
  }
}

.tp-porfolio-10-title-box {
  transition: 0.4s;
}

.tp-porfolio-10-category {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  margin-left: 15px;
  transform: translateY(-12px);
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  transition: 0.4s;
  opacity: 0.06;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-porfolio-10-category {
    font-size: 23px;
  }
}

@media (max-width: 767px) {
  .tp-porfolio-10-category {
    font-size: 18px;
  }
}

.tp-porfolio-10-height {
  height: 100vh;
  padding-top: 190px;
  padding-bottom: 100px;
}

@media only screen and (min-width: 1700px) and (max-width: 1850px),
only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-porfolio-10-height {
    padding-top: 140px;
  }
}

@media (max-width: 767px) {
  .tp-porfolio-10-height {
    padding-top: 120px;
  }
}

.tp-porfolio-10-bg-1,
.tp-porfolio-10-bg-2,
.tp-porfolio-10-bg-3,
.tp-porfolio-10-bg-4,
.tp-porfolio-10-bg-5,
.tp-porfolio-10-bg-6,
.tp-porfolio-10-bg-7,
.tp-porfolio-10-bg-8 {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04, 1.04);
  transition: all 0.9s;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-1 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-1 .tp-porfolio-10-bg-1 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-2 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-2 .tp-porfolio-10-bg-2 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-3 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-3 .tp-porfolio-10-bg-3 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-4 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-4 .tp-porfolio-10-bg-4 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-5 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-5 .tp-porfolio-10-bg-5 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-6 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-6 .tp-porfolio-10-bg-6 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-7 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-7 .tp-porfolio-10-bg-7 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-8 {
  opacity: 1;
}

#tp-porfolio-10-bg-box.tp-porfolio-10-bg-8 .tp-porfolio-10-bg-8 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.portfolio-logo-2 {
  display: none;
  transition: 0.3s;
}

.portfolio-logo-1 {
  transition: 0.3s;
}

.tp-porfolio-10-main.header-white .portfolio-logo-1 {
  display: none;
}

.tp-porfolio-10-main.header-white .portfolio-logo-2 {
  display: block;
}

.tp-porfolio-10-main.header-white .tp-header-6-menu-box span {
  color: var(--tp-common-white);
}

.tp-porfolio-10-main.header-white .tp-header-6-menu-box .tp-header-6-menubar span {
  background-color: var(--tp-common-white);
}

.tp-portfolio-11-slider-bg {
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.tp-portfolio-11-slider-bg.slick-active .tp-portfolio-11-slider-link {
  opacity: 1;
}

.tp-portfolio-11-slider-bg.slick-active .tp-portfolio-11-slider-subtitle {
  opacity: 1;
}

.tp-portfolio-11-slider-bg.slick-active .tp-portfolio-11-slider-title {
  opacity: 1;
}

.tp-portfolio-11-slider-content {
  padding-left: 180px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-portfolio-11-slider-content {
    padding-left: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-11-slider-content {
    padding-left: 40px;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-11-slider-content {
    padding: 0 15px;
  }
}

.tp-portfolio-11-slider-link {
  margin-bottom: 30px;
  opacity: 0;
}

.tp-portfolio-11-slider-subtitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 20px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-white);
  opacity: 0;
}

.tp-portfolio-11-slider-title {
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.4px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  opacity: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-11-slider-title {
    font-size: 90px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-11-slider-title {
    font-size: 90px;
  }

  .tp-portfolio-11-slider-title br {
    display: none;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-11-slider-title {
    font-size: 90px;
  }

  .tp-portfolio-11-slider-title br {
    display: none;
  }
}

.tp-portfolio-11-slider-active button {
  left: 40px;
  bottom: 60px;
  width: 55px;
  height: 56px;
  line-height: 53px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  color: var(--tp-common-white);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: 0.3s;
  z-index: 99;
}

@media only screen and (min-width: 992px) {
  .tp-portfolio-11-slider-active button {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-11-slider-active button {
    left: 15px;
  }
}

.tp-portfolio-11-slider-active button.slick-next {
  margin-left: 70px;
}

.tp-portfolio-11-slider-active button i {
  font-weight: 500;
}

.tp-portfolio-11-slider-active button:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-white);
  background-color: var(--tp-common-white);
}

.tp-portfolio-11-slider-nav-item {
  cursor: pointer;
}

.tp-portfolio-11-slider-nav-thumb img {
  border-radius: 14px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.2);
}

.tp-portfolio-11-slider-nav-wrap {
  width: 1260px;
  position: absolute;
  bottom: 110px;
  right: -65px;
  z-index: 99;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-11-slider-nav-wrap {
    right: -280px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-11-slider-nav-wrap {
    right: -80px;
    width: 900px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-11-slider-nav-wrap {
    right: -80px;
    width: 600px;
  }
}

.tp-portfolio-11-slider-nav-wrap .slides-numbers {
  position: absolute;
  right: 12%;
  bottom: -10%;
  z-index: 99;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers {
    right: 39%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers {
    right: 16%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers {
    right: 19%;
  }
}

.tp-portfolio-11-slider-nav-wrap .slides-numbers span {
  text-align: center;
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  min-width: 50px;
}

.tp-portfolio-11-slider-nav-wrap .slides-numbers .slider-line {
  height: 1px;
  width: 850px;
  margin-right: 45px;
  background-color: rgba(255, 255, 255, 0.2);
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers .slider-line {
    width: 500px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers .slider-line {
    width: 520px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers .slider-line {
    width: 240px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-11-slider-nav-wrap .slides-numbers .slider-line {
    width: 215px;
  }
}

.tp-portfolio-11-slider-nav-active button {
  left: 0;
  width: 55px;
  bottom: -45px;
  height: 56px;
  line-height: 53px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  color: var(--tp-common-white);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: 0.3s;
}

.tp-portfolio-11-slider-nav-active button.slick-next {
  margin-left: 70px;
}

.tp-portfolio-11-slider-nav-active button i {
  font-weight: 500;
}

.tp-portfolio-11-slider-nav-active button:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-white);
  background-color: var(--tp-common-white);
}

.tp-portfolio-11-slider-nav-active .slick-list {
  padding: 50px 0;
}

.tp-portfolio-11-slider-nav-content-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.tp-portfolio-11-slider-nav-content {
  height: 100%;
  padding: 30px;
}

.tp-portfolio-11-slider-nav-year span {
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0px 12px;
  line-height: 30px;
  display: inline-block;
  backdrop-filter: blur(5px);
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  background: rgba(255, 255, 255, 0.2);
}

.tp-portfolio-11-slider-nav-subtittle {
  font-size: 13px;
  font-weight: 600;
  line-height: 10px;
  margin-bottom: 10px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-white);
}

.tp-portfolio-11-slider-nav-tittle {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  margin-bottom: 0;
}

.tp-portfolio-12-height {
  height: 100%;
}

.tp-portfolio-12-slider-thumb img {
  margin-bottom: 20px;
  max-width: inherit;
}

.tp-portfolio-12-slider-item {
  cursor: pointer;
  margin: 0px 50px;
}

.tp-portfolio-12-slider-item:hover .tp-portfolio-12-slider-title-sm {
  color: var(--tp-common-black);
}

.tp-portfolio-12-slider-title {
  font-size: 100px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-12-slider-title {
    font-size: 77px;
  }
}

.tp-portfolio-12-slider-title span {
  display: inline-block;
}

.tp-portfolio-12-slider-title span.text-2 {
  padding-left: 80px;
}

.tp-portfolio-12-slider-title span.text-3 {
  padding-left: 190px;
}

.tp-portfolio-12-slider-title span.shape-img {
  position: absolute;
  top: -12%;
  right: 45%;
}

.tp-portfolio-12-slider-title-box {
  left: 0;
  position: absolute;
  bottom: 125px;
  max-width: 690px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-portfolio-12-slider-title-box {
    max-width: 535px;
  }
}

.tp-portfolio-12-slider-title-sm {
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: #AFAFB1;
  transition: 0.3s;
  display: inline-block;
}

.tp-portfolio-12-social a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black);
  margin-right: 15px;
}

.tp-portfolio-12-copyright p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
}

.tp-portfolio-12-bottom-wrap {
  position: absolute;
  bottom: -70px;
  left: 0;
  right: 0;
}

.portfolio__title-11 {
  font-weight: 700;
  font-size: 180px;
  line-height: 1.4;
  transition: all 0.3s;
  padding-bottom: 10px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  height: 150px;
}

.tp-port-slider-main {
  height: 100vh;
  overflow: hidden;
}

.tp-port-slider-content-wrap {
  position: absolute;
  top: 0;
  left: 170px;
  height: 100%;
  width: 50%;
  overflow-y: scroll;
  scrollbar-width: none;
  padding-top: 100px;
}

@media (max-width: 767px) {
  .tp-port-slider-content-wrap {
    left: 20px;
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-port-slider-content-wrap {
    left: 120px;
    width: 100%;
  }
}

.tp-port-slider-title {
  font-size: 180px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -3.6px;
  text-transform: uppercase;
  color: transparent;
  color: transparent;
  transition: 0.3s;
  cursor: pointer;
  display: block;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  font-family: var(--tp-ff-shoulders);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
  transition: background-size 0.6s cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s, 0.6s -webkit-clip-path cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s;
  background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%);
  padding: 20px 0;
  mix-blend-mode: luminosity;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-port-slider-title {
    font-size: 120px;
  }
}

@media (max-width: 767px) {
  .tp-port-slider-title {
    font-size: 70px;
  }
}

.tp-port-slider-title:hover {
  background-size: 200% 100%;
  color: var(--tp-common-white);
}

.tp-port-1,
.tp-port-2,
.tp-port-3,
.tp-port-4,
.tp-port-5,
.tp-port-6,
.tp-port-7,
.tp-port-8,
.tp-port-9 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  object-fit: cover;
  transform: scale(1.04, 1.04);
  transform-origin: 50% 50%;
  transition: all 0.9s;
}

.tp-port-1 img,
.tp-port-2 img,
.tp-port-3 img,
.tp-port-4 img,
.tp-port-5 img,
.tp-port-6 img,
.tp-port-7 img,
.tp-port-8 img,
.tp-port-9 img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  transition: none;
}

#tp-port-slider-wrap.tp-port-1 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-1 .tp-port-1 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-2 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-2 .tp-port-2 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-3 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-3 .tp-port-3 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-4 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-4 .tp-port-4 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-5 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-5 .tp-port-5 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-6 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-6 .tp-port-6 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-7 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-7 .tp-port-7 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-8 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-8 .tp-port-8 {
  opacity: 1;
  transform: scale(1);
}

#tp-port-slider-wrap.tp-port-9 {
  opacity: 1;
}

#tp-port-slider-wrap.tp-port-9 .tp-port-9 {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 767px) {
  .portfolio-filter {
    flex-wrap: wrap;
  }
}

.portfolio-filter button {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 500;
  line-height: 13px;
  text-transform: uppercase;
  margin: 0px 21px;
  position: relative;
  transition: 0.3s;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .portfolio-filter button {
    margin: 0px 15px;
    margin-bottom: 20px;
  }
}

.portfolio-filter button::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  width: 0%;
  content: "";
  opacity: 0;
  visibility: hidden;
  background-color: var(--tp-common-black);
  transition: 0.4s;
}

.portfolio-filter button:hover {
  color: var(--tp-common-black);
}

.portfolio-filter button:hover::after {
  opacity: 1;
  visibility: visible;
  width: 100%;
}

.portfolio-filter button.active {
  color: var(--tp-common-black);
}

.portfolio-filter button.active::after {
  opacity: 1;
  visibility: visible;
  width: 100%;
}

.tp-project-text-slide .tp-footer-4-big-title {
  color: var(--tp-common-black);
  font-family: var(--tp-ff-syne);
  text-transform: capitalize;
}

.tp-project-text-slide .tp-footer-4-big-title span {
  color: var(--tp-common-black);
}

.rm-project-contact-item {
  padding-bottom: 35px;
  margin-bottom: 35px;
  border-bottom: 1px solid #D9D9D9;
  position: relative;
}

.rm-project-contact-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  content: "";
  background-color: var(--tp-common-black);
  transition: 0.4s;
}

.rm-project-contact-item span {
  font-size: 70px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.4px;
  color: rgba(20, 20, 20, 0.2);
  transition: 0.3s;
}

@media (max-width: 767px) {
  .rm-project-contact-item span {
    font-size: 40px;
  }
}

.rm-project-contact-item svg {
  transform: rotate(-45deg);
  transition: 0.4s;
  color: #D9D9D9;
}

.rm-project-contact-item:hover span {
  color: var(--tp-common-black);
}

.rm-project-contact-item:hover svg {
  transform: rotate(0);
  color: var(--tp-common-black);
}

.rm-project-contact-item:hover::after {
  width: 100%;
}

.pw-project-style .tp-project-3-title-sm {
  color: var(--tp-common-black);
}

.pw-project-style .tp-project-3-meta {
  color: var(--tp-common-black);
}

.pw-project-style .tp-btn-project-sm {
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.1);
}

.pm-project-masonary-item {
  height: 100%;
}

.pm-project-masonary-item img {
  width: 100%;
  height: 100%;
  transition: 0.9s;
}

.pm-project-masonary-item:hover .pm-project-masonary-title {
  transform: translateX(0);
  transition: all 0.7s ease;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-delay: 0ms;
  transition-duration: 0.5s;
}

.pm-project-masonary-item:hover .pm-project-masonary-subtitle {
  transform: translateX(0);
  transition: all 0.7s ease;
  transition-duration: 0.7s;
  transition-delay: 0s;
  transition-delay: 50ms;
  transition-duration: 0.5s;
}

.pm-project-masonary-item:hover img {
  transform: scale(1.1);
}

.pm-project-masonary-content {
  position: absolute;
  width: auto;
  max-width: calc(100% - 80px);
  height: auto;
  top: auto;
  right: auto;
  bottom: 60px;
  left: 60px;
  padding: 0;
  background-color: transparent;
  overflow: hidden;
}

.pm-project-masonary-subtitle {
  color: #494949;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 5px;
  transform: translateX(-101%);
  transition: all 0.3s;
  transition-duration: 0.3s;
  transition-delay: 0s;
  transition-delay: 50ms;
  transition-duration: 0.3s;
  display: inline-block;
  background-color: var(--tp-common-white);
  padding: 13px 20px;
}

.pm-project-masonary-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.44px;
  padding: 20px;
  transform: translateX(-101%);
  transition: all 0.3s;
  transition-duration: 0.3s;
  transition-delay: 0s;
  transition-duration: 0.3s;
  transition-delay: 0ms;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  margin-bottom: 0;
  margin-top: 2px;
}

.port-showcase-slider-item {
  height: 100vh;
}

.tp-slider__thumb-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.parallax-slider-active .swiper-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.parallax-slider-active .swiper-container {
  width: 100%;
  height: 100vh;
}

.port-showcase-slider-space {
  padding: 100px;
}

.port-showcase-slider-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.port-showcase-slider-subtitle {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
}

.port-showcase-slider-title {
  font-size: 160px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -9.6px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .port-showcase-slider-title {
    font-size: 120px;
  }
}

@media (max-width: 767px) {
  .port-showcase-slider-title {
    font-size: 90px;
  }
}

.port-showcase-slider-social {
  position: absolute;
  bottom: 90px;
  right: 90px;
  z-index: 9;
}

.port-showcase-slider-social a {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-white);
  padding-left: 25px;
}

.parallax-slider-active .tp-slider-dot {
  position: absolute;
  bottom: 90px;
  left: 90px;
  z-index: 9;
}

.parallax-slider-active .tp-slider-dot .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  display: inline-block;
  border-radius: 50%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.52);
  opacity: 1;
  transition: 0.3s;
  position: relative;
}

.parallax-slider-active .tp-slider-dot .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  top: -40px;
  left: 6px;
  width: 2px;
  height: 20px;
  border-radius: 10px;
  background-color: var(--tp-common-white);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.parallax-slider-active .tp-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-radius: 10px;
  width: 14px;
  height: 2px;
  background-color: var(--tp-common-white);
}

.parallax-slider-active .tp-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  opacity: 1;
  visibility: visible;
  top: -30px;
}

.tp-showcase-arrow-box {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.tp-showcase-arrow-box button {
  color: rgba(255, 255, 255, 0.7);
  margin: 0px 17px;
  transition: 0.3s;
}

.tp-showcase-arrow-box button:hover {
  color: var(--tp-common-white);
}

.project-details-1-left .project-details-1-thumb:last-child {
  margin-bottom: 0;
}

.project-details-1-pt {
  padding-top: 107px;
}

.project-details-1-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  color: var(--tp-common-black);
}

.project-details-1-subtitle i {
  font-style: normal;
}

.project-details-1-subtitle i::after {
  content: "";
  height: 1px;
  width: 40px;
  margin: 0px 10px;
  display: inline-block;
  transform: translateY(-4px);
  background-color: rgba(20, 20, 20, 0.14);
}

.project-details-1-title {
  font-size: 60px;
  font-family: 'QanelasDEMO-Thin';
  font-weight: 600;
  line-height: 1;
  letter-spacing: -3.2px;
  margin-bottom: 20px;
  color: var(--tp-common-black);
}

@media (max-width: 767px) {
  .project-details-1-title {
    font-size: 50px;
  }
}

.project-details-1-title.fs-100 {
  font-size: 100px;
  margin-bottom: 30px;
  font-family: var(--tp-ff-shoulders);
}

@media (max-width: 767px) {
  .project-details-1-title.fs-100 {
    font-size: 70px;
  }
}

.project-details-1-title.fs-100.fw-700 {
  font-weight: 700;
}

.project-details-1-right {
  padding: 70px 90px;
  height: 725px;
  overflow: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

@media (max-width: 767px) {
  .project-details-1-right {
    padding: 70px 15px;
  }
}

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

.project-details-1-title-box p {
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  padding-right: 150px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .project-details-1-title-box p {
    padding-right: 0;
  }
}

.project-details-1-info {
  margin-bottom: 32px;
}

.project-details-1-info span {
  color: #97979D;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
}

.project-details-1-info h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0;
  letter-spacing: -0.4px;
  color: var(--tp-common-black);
}

.project-details-1-social {
  position: absolute;
  bottom: 14%;
  right: 8%;
}

.project-details-1-social a {
  display: table;
  height: 44px;
  width: 44px;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  margin-top: 10px;
  display: block;
  border: 1px solid rgba(25, 25, 26, 0.14);
}

.project-details-1-social a.share-icon {
  height: 60px;
  width: 60px;
  line-height: 60px;
  transform: translateX(-6px);
}

.project-details-1-navigation {
  border-top: 1px solid rgba(20, 20, 20, 0.1);
  padding: 33px 60px;
  padding-top: 20px;
}

@media (max-width: 767px) {
  .project-details-1-navigation {
    padding: 33px 0px;
  }
}

.project-details-1-navigation a i {
  height: 44px;
  width: 44px;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  margin-top: 10px;
  display: inline-block;
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.14);
}

.project-details-1-navigation a span {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black);
}

.project-details-1-navigation a span svg {
  transform: translateY(5px);
}

.project-details-1-prev {
  line-height: 0;
}

.project-details-1-prev i {
  margin-right: 10px;
  transition: 0.3s;
}

.project-details-1-prev:hover i {
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.project-details-1-next {
  line-height: 0;
}

.project-details-1-next i {
  margin-left: 10px;
  transition: 0.3s;
}

.project-details-1-next:hover i {
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.project-details-1-social-inner {
  display: none;
}

.project-details-2-arrow-box .project-details-2-prev {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  z-index: 9;
}

.project-details-2-arrow-box .project-details-2-next {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  z-index: 9;
}

.project-details-2-arrow-box button {
  height: 44px;
  width: 44px;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  transition: 0.3s;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.project-details-2-arrow-box button:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.project-details-2-info-style {
  padding: 0px 115px;
  padding-top: 90px;
}

@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) {
  .project-details-2-info-style {
    padding: 0px 15px;
    padding-top: 90px;
  }
}

@media (max-width: 767px) {
  .project-details-2-info-style {
    padding: 0px 0px;
    padding-top: 60px;
  }
}

.project-details-2-info-style .project-details-1-info {
  width: 50%;
  float: left;
}

.project-details-2-social a {
  height: 44px;
  width: 44px;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin-right: 9px;
  position: relative;
  transition: 0.3s;
  border: 1px solid rgba(25, 25, 26, 0.14);
}

@media (max-width: 767px) {
  .project-details-2-social a {
    height: 35px;
    width: 35px;
    line-height: 35px;
    margin-right: 5px;
  }
}

.project-details-2-social a span {
  color: var(--tp-common-black);
  transition: 0.3s;
}

.project-details-2-social a:hover {
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.project-details-2-social a:hover span {
  color: var(--tp-common-white);
}

.beforeAfter img {
  max-width: inherit;
  object-fit: cover;
}

.beforeAfter {
  z-index: 1 !important;
}

.beforeAfter div div div {
  background: transparent !important;
  height: 80px !important;
  width: 80px !important;
  line-height: 74px !important;
  border: 2px solid #FFFFFF !important;
  z-index: -1 !important;
}

.beforeAfter div div div i {
  border-color: #fff !important;
  padding: 5px !important;
  margin: 0 5px !important;
}

.project-details-video video {
  height: 850px;
  width: 100% !important;
  object-fit: cover;
  overflow: hidden;
}

@media (max-width: 767px) {
  .project-details-video video {
    height: 400px;
  }
}

.project-details-video figcaption {
  align-items: center;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50px auto 115px;
  padding: 0.5rem;
}

.project-details-video button {
  border: 0;
  display: inline;
  color: white;
  order: 1;
  padding: 0.5rem;
  transition: opacity 0.25s ease-out;
  width: 100%;
  font-size: 24px;
}

.project-details-video button:hover {
  cursor: pointer;
  opacity: 0.8;
}

.project-details-video label {
  order: 2;
  text-align: center;
  font-size: 20px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  font-size: 700;
}

.project-details-video progress[value] {
  position: relative;
  appearance: none;
  border: none;
  display: inline;
  height: 3px;
  order: 1;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.project-details-video progress[value]::-webkit-progress-bar {
  background-color: whiteSmoke;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}

.project-details-video progress[value]::-webkit-progress-value {
  background-color: var(--tp-common-white);
  position: relative;
  transition: width 1s linear;
}

.project-details-video progress[value]::-moz-progress-bar {
  background-color: var(--tp-common-white);
  position: relative;
  transition: width 1s linear;
}

.video-progress-btn-wrap {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 80px;
}

.project-details-video-overlay {
  position: relative;
  z-index: 1;
}

.project-details-video-overlay::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 106%;
  content: "";
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 1.63%, #fff 26.67%);
  z-index: -1;
  bottom: 0;
}

.project-details-custom-link {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  letter-spacing: -0.36px;
  color: var(--tp-common-black-2);
}

.project-details-custom-link::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: rgba(30, 30, 30, 0.3);
}

.project-details-custom-link::before {
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: #000;
}

.project-details-custom-link span {
  margin-left: 8px;
}

.project-details-custom-link:hover {
  color: var(--tp-common-black-2);
}

.project-details-custom-link:hover::before {
  width: 100%;
  right: auto;
  left: 0;
}

.pd-custom-info-wrap {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .pd-custom-info-wrap {
    padding-left: 0;
  }
}

.pd-custom-full-img {
  overflow: hidden;
  height: 740px;
  padding-left: 200px;
  padding-right: 200px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pd-custom-full-img {
    height: 530px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pd-custom-full-img {
    height: 400px;
  }
}

@media (max-width: 767px) {
  .pd-custom-full-img {
    height: 200px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pd-custom-full-img {
    height: 300px;
  }
}

.pd-custom-full-img img {
  width: 100%;
}

.pd-custom-full-img-2 {
  overflow: hidden;
  height: 640px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pd-custom-full-img-2 {
    height: 400px;
  }
}

@media (max-width: 767px) {
  .pd-custom-full-img-2 {
    height: 200px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pd-custom-full-img-2 {
    height: 300px;
  }
}

.pd-custom-full-img-2 img {
  width: 100%;
  margin-top: -400px;
}

@media (max-width: 767px) {
  .pd-custom-full-img-2 img {
    margin-top: -100px;
  }
}

.pd-visual-subtitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-shoulders);
}

.pd-visual-title-box {
  margin-bottom: 75px;
}

.pd-visual-left-text span {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-shoulders);
}

.pd-visual-right-list ul li {
  list-style-type: none;
  color: #414145;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 15px;
}

.pd-visual-right-list ul li:last-child {
  margin-bottom: 0;
}

.pd-visual-right-list ul li::before {
  height: 5px;
  width: 5px;
  content: "";
  background-color: #414145;
  display: inline-block;
  transform: translateY(-3px);
  margin-right: 14px;
}

.pd-visual-right-content p {
  color: #414145;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 40px;
}

.pd-visual-slider-active {
  margin: 0px -250px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .pd-visual-slider-active {
    margin: 0;
  }
}

.pd-visual-slider-thumb img {
  width: 100%;
  transition: 0.9s;
}

.pd-typography-left {
  padding-left: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .pd-typography-left {
    padding-left: 0;
  }
}

.pd-typography-left span {
  display: block;
}

.pd-typography-left span.text-1 {
  color: #97979D;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 45px;
}

.pd-typography-left span.text-2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-shoulders);
  margin-bottom: 20px;
}

.pd-typography-left span.text-3 {
  color: #414145;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.96px;
  font-family: var(--tp-ff-shoulders);
  margin-bottom: 20px;
}

.pd-typography-left span.text-4 {
  color: #414145;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.96px;
  font-family: var(--tp-ff-shoulders);
  margin-bottom: 30px;
}

.pd-typography-left span.text-5 {
  font-size: 230px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-shoulders);
}

.pd-typography-middle {
  margin-top: 65px;
  padding-left: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .pd-typography-middle {
    padding-left: 0;
  }
}

.pd-typography-middle .pd-typography-left {
  padding-left: 0px;
}

.pd-typography-middle .pd-typography-left span {
  font-family: var(--tp-ff-syne);
}

.pd-typography-color {
  padding-left: 160px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .pd-typography-color {
    padding-left: 0;
  }
}

.pd-typography-color span {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  line-height: 100px;
  font-size: 22px;
  font-weight: 600;
  display: block;
  text-align: center;
  letter-spacing: 0.44px;
  text-transform: uppercase;
  border: 6px solid #FDFDFD;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  background-color: var(--tp-common-black-2);
  box-shadow: 0px 1px 3px 0px rgba(25, 25, 26, 0.14);
}

.pd-typography-color span.color-2 {
  background-color: #5D5D63;
  margin-top: -35px;
}

.pd-typography-color span.color-3 {
  background-color: #ECECEA;
  color: var(--tp-common-black-2);
  margin-top: -35px;
}

.pd-typography-color .text-1 {
  color: #97979D;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-bottom: 45px;
}

.tp-showcase-details-bg {
  height: 100vh;
}

.tp-showcase-details-bg .port-showcase-slider-social {
  position: absolute;
  right: 60px;
  bottom: 60px;
}

@media (max-width: 767px) {
  .tp-showcase-details-bg .port-showcase-slider-social {
    right: 15px;
  }
}

.tp-showcase-details-scroll {
  position: absolute;
  bottom: 60px;
  left: 60px;
}

@media (max-width: 767px) {
  .tp-showcase-details-scroll {
    left: 15px;
  }
}

.tp-showcase-details-scroll a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
}

.tp-showcase-details-scroll a i {
  font-weight: 700;
  margin-right: 10px;
}

.tp-showcase-details-copyright {
  position: absolute;
  right: 60px;
  bottom: 60px;
}

.tp-showcase-details-copyright p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-white);
  margin-bottom: 0;
}

.showcase-details-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-black-2);
}

.showcase-details-subtitle.fs-40 {
  font-size: 40px;
}

.showcase-details-overview-right {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .showcase-details-overview-right {
    padding-left: 0;
  }
}

.showcase-details-overview-right p {
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-marcellus);
  padding-bottom: 30px;
}

.showcase-details-overview-info-item {
  border-bottom: 1px solid rgba(25, 25, 26, 0.14);
  padding: 19px 0;
}

.showcase-details-overview-info-left span {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-marcellus);
}

.showcase-details-overview-info-right {
  padding-left: 60px;
}

.showcase-details-overview-info-right span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black-2);
  font-family: var(--tp-ff-marcellus);
}

.showcase-details-thumb img {
  width: 100%;
}

.showcase-details-2-bg {
  padding-top: 400px;
  padding-bottom: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase-details-2-bg {
    padding-top: 300px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase-details-2-bg {
    padding-top: 250px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase-details-2-bg {
    padding-top: 240px;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-bg {
    padding-top: 200px;
    padding-bottom: 120px;
  }
}

.showcase-details-2-title {
  font-size: 200px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -8px;
  color: var(--tp-common-white);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase-details-2-title {
    font-size: 180px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase-details-2-title {
    font-size: 135px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase-details-2-title {
    font-size: 105px;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-title {
    font-size: 100px;
  }
}

.showcase-details-2-title-box {
  margin-bottom: 180px;
}

.showcase-details-2-subtitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  color: var(--tp-common-white);
}

.showcase-details-2-content p {
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -0.8px;
  padding-bottom: 100px;
  color: var(--tp-common-white);
}

@media (max-width: 767px) {
  .showcase-details-2-content p {
    font-size: 32px;
  }
}

.showcase-details-2-info span {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
}

.showcase-details-2-info h5 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.44px;
  color: var(--tp-common-white);
}

.showcase-details-2-link {
  position: absolute;
  top: 50%;
  right: 200px;
  transform: translateY(-50%);
  z-index: 2;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase-details-2-link {
    top: 42%;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-link {
    top: 38%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .showcase-details-2-link {
    top: 44%;
  }
}

.showcase-details-2-link .project-details-custom-link {
  color: var(--tp-common-white);
}

.showcase-details-2-link .project-details-custom-link::after {
  background-color: rgba(255, 255, 255, 0.3);
}

.showcase-details-2-link .project-details-custom-link::before {
  background-color: var(--tp-common-white);
}

.showcase-details-2-section-title-box {
  margin-bottom: 85px;
}

.showcase-details-2-section-title {
  font-size: 150px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -6px;
  margin-bottom: 85px;
  color: var(--tp-common-black-2);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase-details-2-section-title {
    font-size: 110px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase-details-2-section-title {
    font-size: 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase-details-2-section-title {
    font-size: 90px;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-section-title {
    font-size: 60px;
    margin-bottom: 20px;
  }
}

.showcase-details-2-content-right p {
  color: #414145;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  max-width: 670px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .showcase-details-2-content-right p {
    font-size: 20px;
  }
}

.showcase-details-2-slider-item {
  margin: 0px 10px;
  display: inline-block;
}

.showcase-details-2-slider-item img {
  max-width: inherit;
}

@media (max-width: 767px) {
  .showcase-details-2-slider-item img {
    max-width: 100%;
    margin-bottom: 30px;
  }
}

.showcase-details-2-grid-img img {
  max-width: inherit;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .showcase-details-2-grid-img img {
    max-width: 100%;
    width: 100%;
  }
}

.showcase-details-2-grid-img img.img-left {
  margin-left: -50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .showcase-details-2-grid-img img.img-left {
    margin-left: 0;
  }
}

.showcase-details-2-grid-img img.img-right {
  margin-right: -20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .showcase-details-2-grid-img img.img-right {
    margin-right: 0;
  }
}

.rm-project-tab-wrap {
  position: absolute;
  bottom: 5%;
  right: 23%;
}

.rm-project-tab-wrap ul {
  display: flex;
  flex-direction: column;
}

.rm-project-tab-wrap ul li {
  margin-bottom: 5px;
}

.rm-project-tab-wrap ul li:last-child {
  margin-bottom: 0;
}

.rm-project-tab-wrap ul li button {
  color: #626265;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  position: relative;
  transition: 0.3s;
}

.rm-project-tab-wrap ul li button::before {
  position: absolute;
  top: 9px;
  left: -50px;
  content: "";
  height: 1.5px;
  width: 40px;
  margin-right: 15px;
  display: inline-block;
  background-color: var(--tp-common-black-2);
  width: 0;
  transition: 0.4s;
}

.rm-project-tab-wrap ul li button.active {
  color: var(--tp-common-black-2);
}

.rm-project-tab-wrap ul li button.active::before {
  width: 40px;
}

.rm-project-tab-wrap ul li button:hover::before {
  width: 40px;
}

#canvas-slider {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  overflow: hidden;
  -webkit-transition: width 0.5s ease-in-out 0;
  transition: width 0.5s ease-in-out 0s;
  z-index: 1;
}

#showcase-slider-holder {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  opacity: 1;
  z-index: 1033;
}

#canvas-slider .slider-img {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-color: #222;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* SLIDER */
.tp-perspective-slider {
  width: 100%;
  overflow: hidden;
  padding: 2vw 3vw 0;
  box-sizing: border-box;
  margin-bottom: 80px;
}

.tp-perspective-slider .tp-slide-inner {
  width: 100%;
  height: 90vh;
  position: relative;
  display: inline-block;
}

.tp-perspective-slider .tp-slide-inner .tp-slider-content {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.tp-perspective-slider .tp-slide-inner .tp-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
  display: inline-block;
}

.tp-perspective-slider .tp-slide-inner .tp-image:before {
  content: "";
  width: 40px;
  height: 103%;
  background: #fff;
  position: absolute;
  left: -20px;
  top: -1.5%;
  z-index: 10;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.tp-perspective-slider .tp-slide-inner .tp-image:after {
  content: "";
  width: 40px;
  height: 103%;
  background: #fff;
  position: absolute;
  right: -20px;
  top: -1.5%;
  z-index: 10;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.tp-portfolio-9-category {
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 0px;
}

.tp-portfolio-9-category.tp_reveal_anim {
  padding-bottom: 0;
}

.tp-portfolio-9-category.tp_reveal_anim .tp-reveal-line {
  padding-bottom: 10px;
}

.tp-portfolio-9-title {
  font-weight: 400;
  font-size: 180px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-portfolio-9-title {
    font-size: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-portfolio-9-title {
    font-size: 100px;
  }
}

@media (max-width: 767px) {
  .tp-portfolio-9-title {
    font-size: 45px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-portfolio-9-title {
    font-size: 80px;
  }
}

.showcase-details-2-fullwidth-img {
  height: 900px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase-details-2-fullwidth-img {
    height: 745px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase-details-2-fullwidth-img {
    height: 520px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase-details-2-fullwidth-img {
    height: 380px;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-fullwidth-img {
    height: 200px;
  }
}

.showcase-details-thumb {
  height: 730px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase-details-thumb {
    height: 500px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase-details-thumb {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase-details-thumb {
    height: 370px;
  }
}

@media (max-width: 767px) {
  .showcase-details-thumb {
    height: 190px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .showcase-details-thumb {
    height: 370px;
  }
}

.tp-project-details-3-ptb {
  padding-top: 220px;
  padding-bottom: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-details-3-ptb {
    padding-top: 180px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-details-3-ptb {
    padding-top: 150px;
  }
}

.tp-project-details-3-scroll a {
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  color: #515155;
}

.tp-project-details-3-scroll a span {
  margin-right: 10px;
  transform: translateY(-3px);
  display: inline-block;
}

.tp-project-details-3-link a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  position: relative;
}

.tp-project-details-3-link a span {
  margin-left: 5px;
  transform: translateY(-2px);
}

.tp-project-details-3-link a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--tp-common-black);
  content: "";
}

#myline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--tp-common-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  #myline {
    display: none !important;
  }
}

.tp-studio-portfolio-shape {
  position: absolute;
  top: 180px;
  left: 110px;
  animation: rotate2 5s linear infinite;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-portfolio-shape {
    left: auto;
    right: 125px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-portfolio-shape {
    left: auto;
    right: 80px;
    top: 100px;
  }
}

.tp-studio-portfolio-title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-shoulders);
  margin-bottom: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-portfolio-title {
    font-size: 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-portfolio-title-box {
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .tp-studio-portfolio-title-box {
    margin-bottom: 30px;
  }
}

.tp-studio-portfolio-title-box p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #5D5D63;
  padding-right: 20px;
  margin-bottom: 35px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-portfolio-title-box p {
    font-size: 16px;
    padding-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-portfolio-title-box p {
    font-size: 17px;
    padding-right: 0;
  }
}

.tp-studio-portfolio-inner-title {
  font-size: 100px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
  position: relative;
  display: inline-block;
  background-size: 200% 100%;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-shoulders);
  mix-blend-mode: difference;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-portfolio-inner-title {
    font-size: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-portfolio-inner-title {
    font-size: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-portfolio-inner-title {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-portfolio-inner-title {
    font-size: 50px;
  }
}

@media (max-width: 767px) {
  .tp-studio-portfolio-inner-title {
    font-size: 30px;
  }
}

.tp-studio-portfolio-inner-title span {
  color: #5D5D63;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  top: -1px;
  right: -25px;
  font-family: var(--tp-ff-syne);
}

.tp-studio-portfolio-inner-title-box {
  position: relative;
  z-index: 5;
}

.tp-studio-portfolio-inner-title-box .tp-hover-reveal-bg {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: -1;
  width: 220px;
  height: 270px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.tp-studio-portfolio-item {
  padding-top: 43px;
  padding-bottom: 43px;
  padding-left: 40px;
  border-bottom: 1px solid #E4E4E5;
  border-left: 1px solid #E4E4E5;
  position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-portfolio-item {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-portfolio-item {
    padding-top: 30px;
    padding-bottom: 30px;
    border-right: 1px solid #E4E4E5;
  }
}

@media (max-width: 767px) {
  .tp-studio-portfolio-item {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    border-right: 1px solid #E4E4E5;
  }
}

.tp-studio-portfolio-item:first-child {
  border-top: 1px solid #E4E4E5;
}

.tp-studio-portfolio-item:hover .tp-hover-reveal-bg {
  opacity: 1;
}

.tp-studio-portfolio-wrap {
  transform-origin: bottom left;
  transform: rotate(-90deg) translateY(100%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-portfolio-wrap {
    transform: rotate(0) translateX(0);
  }
}

/* SLIDER */
.tp-project-details-3-full-width-thumb {
  height: 840px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-details-3-full-width-thumb {
    height: 510px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-details-3-full-width-thumb {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-details-3-full-width-thumb {
    height: 400px;
  }

  .tp-project-details-3-full-width-thumb img {
    height: 500px;
  }
}

.tp-project-details-3-thumb-box {
  height: 740px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-project-details-3-thumb-box {
    height: 460px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-project-details-3-thumb-box {
    height: 480px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-project-details-3-thumb-box {
    height: 340px;
  }
}

@media (max-width: 767px) {
  .tp-project-details-3-thumb-box {
    height: 340px;
  }

  .tp-project-details-3-thumb-box img {
    height: 400px;
  }
}

.portfolio-random-bg {
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: difference;
  background-color: #fff;
}

.pd-custom-main-wrap {
  width: calc(100% - 80px);
  margin-left: auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .pd-custom-main-wrap {
    padding: 0px 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .pd-custom-main-wrap {
    padding: 0px 30px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .pd-custom-main-wrap {
    width: 100%;
    padding: 0;
  }
}

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

.project-details-video {
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .showcase-details-2-info-wrap {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-info {
    margin-right: 20px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .showcase-details-2-slider-wrap {
    flex-wrap: wrap;
  }
}

.parallax-slider-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.parallax-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 3800px;
  height: 100%;
}

.parallax-slider-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 80%;
  width: 100%;
  display: flex;
  gap: 30px;
  left: 70px;
  margin-top: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .parallax-slider-inner {
    left: 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .parallax-slider-inner {
    left: 25px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .parallax-slider-inner {
    left: 35px;
  }
}

@media (max-width: 767px) {
  .parallax-slider-inner {
    left: 0px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .parallax-slider-inner {
    left: 30px;
  }
}

.parallax-item {
  position: relative;
  width: 500px;
  height: 100%;
  overflow: hidden;
}

.parallax-item:hover .parallax-content {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}

.parallax-item:hover .parallax-img::after {
  opacity: 1;
  height: 100%;
  visibility: visible;
}

.parallax-content {
  position: absolute;
  bottom: -100px;
  left: 0;
  z-index: 55;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  margin: 40px 40px 30px 35px;
  transition: 0.4s;
}

.parallax-content span {
  font-size: 24px;
  line-height: 1;
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  text-transform: capitalize;
}

.parallax-content h4 {
  font-size: 50px;
  line-height: 1;
  padding-bottom: 7px;
  display: inline-block;
  letter-spacing: -3px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

.parallax-img {
  position: absolute;
  height: 100%;
  width: 800px;
  background-size: cover;
  background-position: center;
  margin-left: -100px;
}

.parallax-img::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  background-color: rgba(0, 0, 0, 0.3);
}

.tp-studio-portfolio-img {
  position: absolute;
  bottom: -40%;
  left: 35%;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  transform: rotate(90deg);
}

.tp-studio-portfolio-img img {
  border-radius: 54% 45% 56% 44%/61% 60% 40% 39%;
  will-change: border-radius, transform, opacity;
  display: block;
  -webkit-animation: sliderShape 5s linear infinite;
  height: 350px;
  width: 350px;
}

.tp-studio-portfolio-item:hover {
  position: relative;
  z-index: 555;
}

.tp-studio-portfolio-item:hover .tp-studio-portfolio-img {
  left: 40%;
  opacity: 1;
  visibility: visible;
}

.tp-studio-portfolio-item:hover .tp-studio-portfolio-inner-title {
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-size 0.4s cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s, 0.4s -webkit-clip-path cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s;
  background-image: linear-gradient(270deg, #000 0%, #000 50%, transparent 50.1%);
  -webkit-text-stroke: 1px rgba(30, 30, 30, 0.4901960784);
  background-position: 100% 0%;
  background-size: 0% 100%;
  mix-blend-mode: difference;
}

.tp-project-horigontal-style .tp-studio-height {
  height: 100vh;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-project-horigontal-style .tp-studio-height {
    height: 100%;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-project-horigontal-style .tp-studio-portfolio-item {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-portfolio-img {
    transform: rotate(0deg);
    bottom: -100%;
  }
}

@media (max-width: 767px) {
  .tp-studio-portfolio-img img {
    height: 250px;
    width: 250px;
  }
}

.tp-project-5-video {
  line-height: 0;
}

.tp-project-5-video video {
  height: 230px;
  width: 400px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .tp-project-5-video video {
    width: 100%;
  }
}

.tp-project-4-bg.project-panel a {
  height: 100%;
}

/*----------------------------------------*/
/*  7.2 award css start
/*----------------------------------------*/
.tp-award-title-box {
  margin-bottom: 75px;
}

.tp-award-list-thumb-wrap {
  height: 80%;
  width: 90%;
  margin-left: 80px;
  transform: scale(0.8);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-award-list-thumb-wrap {
    height: 70%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-award-list-thumb-wrap {
    height: 55%;
  }
}

.tp-award-list-thumb-1,
.tp-award-list-thumb-2,
.tp-award-list-thumb-3,
.tp-award-list-thumb-4,
.tp-award-list-thumb-5,
.tp-award-list-thumb-6 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  position: absolute;
}

.tp-award-list-wrap {
  margin-left: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-award-list-wrap {
    margin-left: 0;
  }
}

.tp-award-list-wrap .tp-award-list-item:first-child {
  padding-top: 0;
}

.tp-award-list-item {
  padding-bottom: 25px;
  padding-top: 25px;
  border-bottom: 1px solid var(--tp-border-1);
  position: relative;
  cursor: pointer;
}

.tp-award-list-item::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--tp-common-black);
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s ease-out 0s;
}

.tp-award-list-item:hover::after {
  opacity: 1;
  visibility: visible;
  width: 100%;
  left: 0;
  right: 0;
}

.tp-award-list-content-left span {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  margin-right: 115px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-award-list-content-left span {
    margin-right: 45px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-award-list-content-left span {
    margin-right: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-award-list-content-left span {
    margin-right: 60px;
  }
}

@media (max-width: 767px) {
  .tp-award-list-content-left span {
    margin-right: 15px;
  }
}

.tp-award-list-content-left p {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-award-list-content-left p {
    font-size: 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-award-list-content-left p {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .tp-award-list-content-left p {
    font-size: 16px;
  }
}

.tp-award-list-content-right span {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

#tp-award-thumb.tp-award-list-thumb-1 .tp-award-list-thumb-1 {
  opacity: 1;
  visibility: visible;
  transform: scale(0.9);
}

#tp-award-thumb.tp-award-list-thumb-2 .tp-award-list-thumb-2 {
  opacity: 1;
  visibility: visible;
}

#tp-award-thumb.tp-award-list-thumb-3 .tp-award-list-thumb-3 {
  opacity: 1;
  visibility: visible;
}

#tp-award-thumb.tp-award-list-thumb-4 .tp-award-list-thumb-4 {
  opacity: 1;
  visibility: visible;
}

#tp-award-thumb.tp-award-list-thumb-5 .tp-award-list-thumb-5 {
  opacity: 1;
  visibility: visible;
}

#tp-award-thumb.tp-award-list-thumb-6 .tp-award-list-thumb-6 {
  opacity: 1;
  visibility: visible;
}

.tp-award-2-area {
  transition: 0.3s;
}

.tp-award-2-area.addclass {
  background-color: var(--tp-common-black);
}

.tp-award-2-space {
  margin-top: -100px;
  padding: 80px 90px;
  padding-bottom: 320px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-award-2-space {
    padding: 140px 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-award-2-space {
    margin-top: 0;
    padding: 140px 30px;
  }
}

@media (max-width: 767px) {
  .tp-award-2-space {
    margin-top: 0;
    padding: 140px 15px;
  }
}

.tp-award-2-title {
  font-size: 180px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -8px;
  color: var(--tp-common-white);
}

@media only screen and (min-width: 1700px) and (max-width: 1850px) {
  .tp-award-2-title {
    font-size: 170px;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-award-2-title {
    font-size: 160px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-award-2-title {
    font-size: 145px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-award-2-title {
    font-size: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-award-2-title {
    font-size: 95px;
  }
}

@media (max-width: 767px) {
  .tp-award-2-title {
    font-size: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-award-2-title {
    font-size: 70px;
  }
}

.tp-award-2-title span {
  padding-left: 200px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-award-2-title span {
    padding-left: 120px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-award-2-title span {
    padding-left: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-award-2-title span {
    padding-left: 0px;
  }
}

.tp-award-2-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  padding-left: 110px;
  margin-bottom: 100px;
  display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-award-2-subtitle {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .tp-award-2-subtitle {
    padding-left: 0;
    margin-bottom: 40px;
  }
}

.tp-award-2-title-box {
  margin-bottom: 60px;
}

.tp-award-2-title-box p {
  margin-bottom: 0;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: 0;
  right: 140px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-award-2-title-box p {
    right: 0;
  }
}

@media (max-width: 767px) {
  .tp-award-2-title-box p {
    position: static;
    margin-bottom: 50px;
  }
}

.tp-award-2-shape {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
}

.tp-award-2-circle {
  height: 400px;
  width: 400px;
  border-radius: 400px;
  background: rgba(244, 213, 74, 0.7);
  filter: blur(200px);
  display: inline-block;
}

.tp-award-2-img {
  position: absolute;
  top: -150px;
  left: -50px;
  animation: float 5s ease-in-out infinite forwards;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-award-2-img {
    top: -200px;
  }
}

@media (max-width: 767px) {
  .tp-award-2-img {
    left: 50px;
  }
}

.tp-award-2-img img {
  max-width: inherit;
}

@media (max-width: 767px) {
  .tp-award-2-img img {
    max-width: 80%;
  }
}

.tp-award-2-btn-box {
  margin-right: 290px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-award-2-btn-box {
    margin-right: 0;
  }
}

.tp-line-text {
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-white);
  white-space: nowrap;
  animation: scrollText 20s infinite linear;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-line-text {
    font-size: 100px;
  }
}

@media (max-width: 767px) {
  .tp-line-text {
    font-size: 50px;
  }
}

.tp-line-text span {
  color: transparent;
  -webkit-text-stroke: 2px #BABABA;
}

.tp-line-text-2 {
  animation: scrollText-2 20s infinite linear;
}

.tp-line-text-space {
  padding-top: 60px;
  padding-bottom: 220px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-line-text-space {
    padding-bottom: 130px;
  }
}

@media (max-width: 767px) {
  .tp-line-text-space {
    padding-top: 0;
    padding-bottom: 130px;
  }
}

/*----------------------------------------*/
/*  7.22 team css start
/*----------------------------------------*/
.tp-team-item {
  position: relative;
  text-align: center;
}

.tp-team-item img {
  width: 100%;
  transition: 0.7s;
  transform: scale(1);
  object-fit: cover;
}

.tp-team-item:hover img {
  transform: scale(1.3);
}

.tp-team-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  content: "";
  background: linear-gradient(178.92deg, rgba(29, 29, 29, 0) 27.4%, #1D1D1D 108.05%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.tp-team-item:hover::after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

.tp-team-item:hover .tp-team-content span {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

.tp-team-item:hover .tp-team-title-sm {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

.tp-team-content {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  padding-bottom: 20px;
}

.tp-team-content span {
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease-out 0s;
  transition-delay: 0.2s;
  display: inline-block;
}

.tp-team-title-sm {
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-gallery);
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.5s ease-out 0s;
  transition-delay: 0.2s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-team-title-sm {
    font-size: 40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-team-title-sm {
    font-size: 30px;
  }
}

.tp-team-slider-active {
  margin: 0px -260px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-team-slider-active {
    margin: 0;
  }
}

.tp-team-4-item {
  border-radius: 10px;
  transition: 0.3s;
  overflow: hidden;
  border: 1px solid rgba(25, 25, 26, 0.1);
}

.tp-team-4-item img {
  width: 100%;
  transition: 0.7s;
  transform: scale(1);
  object-fit: cover;
}

.tp-team-4-item:hover img {
  transform: scale(1.3);
}

.tp-team-4-thumb {
  overflow: hidden;
  position: relative;
}

.tp-team-4-thumb img {
  transition: 0.3s;
  border-radius: 4px;
}

.tp-team-4-social a {
  height: 36px;
  width: 36px;
  line-height: 36px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.1);
  margin: 0px 4px;
  transition: 0.3s;
}

.tp-team-4-social a:hover {
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.tp-team-4-content {
  padding: 30px 70px 20px 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-team-4-content {
    padding: 30px 50px 20px 50px;
  }
}

@media (max-width: 767px) {
  .tp-team-4-content {
    padding: 30px 40px 20px 40px;
  }
}

.tp-team-4-content span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: #5D5D63;
  letter-spacing: 0.26px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
}

.tp-team-4-title-sm {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 20px;
  padding-bottom: 15px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  border-bottom: 1px solid rgba(25, 25, 26, 0.1);
}

.tm-hero-ptb {
  padding-top: 200px;
  padding-bottom: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-hero-ptb {
    padding-top: 150px;
  }
}

@media (max-width: 767px) {
  .tm-hero-ptb {
    padding-top: 140px;
  }
}

.tm-hero-subtitle {
  color: #5D5D63;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.tm-hero-subtitle::after {
  content: "";
  height: 1px;
  width: 40px;
  background-color: #5D5D63;
  display: inline-block;
  transform: translateY(-3px);
  margin-left: 14px;
}

.tm-hero-title {
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -7.2px;
  color: var(--tp-common-black-2);
  padding-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-hero-title {
    font-size: 110px;
  }
}

@media (max-width: 767px) {
  .tm-hero-title {
    font-size: 65px;
  }
}

.tm-hero-title.fs-220 {
  font-size: 220px;
  letter-spacing: -8.8px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tm-hero-title.fs-220 {
    font-size: 180px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-hero-title.fs-220 {
    font-size: 140px;
  }
}

@media (max-width: 767px) {
  .tm-hero-title.fs-220 {
    font-size: 105px;
  }
}

.tm-hero-title-big {
  font-size: 200px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -12px;
  color: var(--tp-common-black-2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tm-hero-title-big {
    font-size: 180px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-hero-title-big {
    font-size: 140px;
  }
}

@media (max-width: 767px) {
  .tm-hero-title-big {
    font-size: 100px;
  }
}

.tm-hero-text {
  padding-left: 200px;
}

@media (max-width: 767px) {
  .tm-hero-text {
    padding-left: 0;
  }
}

.tm-hero-text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #5D5D63;
  max-width: 460px;
}

@media (max-width: 767px) {
  .tm-hero-text p br {
    display: none;
  }
}

.tm-details-content-wrap {
  padding-top: 300px;
  padding-bottom: 130px;
}

@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),
(max-width: 767px) {
  .tm-details-content-wrap {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.tm-details-title {
  color: #000;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.2px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-details-title {
    font-size: 55px;
  }
}

@media (max-width: 767px) {
  .tm-details-title {
    font-size: 40px;
  }
}

.tm-details-social-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-black-2);
  display: block;
  margin-bottom: 15px;
}

.tm-details-text p {
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tm-details-text p {
    font-size: 16px;
  }
}

.tm-details-portfolio a {
  font-size: 14px;
  font-weight: 500;
  height: 35px;
  line-height: 35px;
  border-radius: 40px;
  padding: 0px 27px;
  display: inline-block;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  margin-right: 10px;
  color: var(--tp-common-black-2);
  border: 1.5px solid rgba(25, 25, 26, 0.2);
  transition: 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tm-details-portfolio a {
    padding: 0px 25px;
  }
}

@media (max-width: 767px) {
  .tm-details-portfolio a {
    margin-bottom: 5px;
  }
}

.tm-details-portfolio a:hover {
  color: var(--tp-common-white);
  border-color: var(--tp-common-black-2);
  background-color: var(--tp-common-black-2);
}

.tm-details-social a {
  height: 45px;
  width: 45px;
  line-height: 45px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-black-2);
  border: 1.5px solid rgba(25, 25, 26, 0.2);
  transition: 0.3s;
  margin-right: 8px;
}

.tm-details-social a:hover {
  border-color: var(--tp-common-black-2);
}

.tm-details-thumb img {
  max-width: inherit;
  margin-left: -100px;
  margin-bottom: -20px;
  position: relative;
  z-index: 2;
}

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

@media (max-width: 767px) {
  .tm-details-thumb img {
    display: none;
  }
}

.tm-details-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
}

.tm-details-shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

.tm-details-wrapper {
  height: 100vh;
  overflow: hidden;
}

.tm-testimonial-height {
  height: 100vh;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tm-testimonial-height {
    height: 100%;
  }
}

/*----------------------------------------*/
/*  7.23 testimonial css start
/*----------------------------------------*/
.tp-testimonial-item p {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.4;
  text-align: center;
  color: var(--tp-common-black);
  padding: 0px 35px;
  margin-bottom: 25px;
}

@media (max-width: 767px) {
  .tp-testimonial-item p {
    font-size: 23px;
    padding: 0;
  }
}

.tp-testimonial-item span {
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.tp-testimonial-item span em {
  color: var(--tp-common-black);
  font-style: normal;
}

.tp-testimonial-arrow-box button {
  height: 60px;
  width: 60px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--tp-border-1);
  transition: 0.3s;
}

.tp-testimonial-arrow-box button span {
  color: var(--tp-common-black);
  transition: 0.3s;
}

.tp-testimonial-arrow-box button:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-testimonial-arrow-box button:hover span {
  color: var(--tp-common-white);
}

.tp-testimonial-prev {
  position: absolute;
  left: -80px;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-testimonial-prev {
    left: 0;
  }
}

.tp-testimonial-next {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-testimonial-next {
    right: 0;
  }
}

@media (max-width: 767px) {
  .tp-studio-testimonial-xs-space {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-testimonial-wrap {
    padding-top: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-testimonial-wrap {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.tp-studio-testimonial-shape img {
  animation: rotate2 8s linear infinite;
}

.tp-studio-testimonial-top-title span {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  margin-right: 100px;
  display: inline-block;
  transform: translateY(6px);
  color: var(--tp-common-white);
}

@media (max-width: 767px) {
  .tp-studio-testimonial-top-title span {
    margin-right: 0;
    margin-bottom: 30px;
  }
}

.tp-studio-testimonial-title-box {
  position: absolute;
  bottom: -9%;
  left: 0;
  right: 0;
  text-align: center;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-testimonial-title-box {
    bottom: -2%;
  }
}

.tp-studio-testimonial-title {
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.03);
  font-family: var(--tp-ff-shoulders);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-testimonial-title {
    font-size: 150px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-testimonial-title {
    font-size: 170px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-testimonial-title {
    font-size: 150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-testimonial-title {
    font-size: 120px;
  }
}

.tp-studio-testimonial-text {
  margin-bottom: 50px;
}

.tp-studio-testimonial-text p {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-testimonial-text p {
    font-size: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-testimonial-text p {
    font-size: 27px;
  }
}

@media (max-width: 767px) {
  .tp-studio-testimonial-text p {
    font-size: 25px;
  }
}

@media (max-width: 767px) {
  .tp-studio-testimonial-user-info-box {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .tp-studio-testimonial-user-info {
    margin-right: 30px;
  }
}

.tp-studio-testimonial-user-name {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
}

.tp-studio-testimonial-user span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(245, 247, 245, 0.7);
}

.tp-studio-testimonial-line span {
  height: 1px;
  width: 150px;
  margin: 0px 25px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.12);
}

.tp-studio-testimonial-item {
  padding-right: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-studio-testimonial-item {
    padding-right: 0;
  }
}

.tp-studio-testimonial-arrow {
  position: absolute;
  bottom: 3%;
  left: -29%;
}

@media (max-width: 767px) {
  .tp-studio-testimonial-arrow {
    bottom: -25%;
    left: 0;
  }
}

.tp-studio-prev span,
.tp-studio-next span {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 1.8px;
  background: var(--tp-common-white);
  font-size: 0;
  transition: all 0.25s;
}

.tp-studio-prev:hover span,
.tp-studio-next:hover span {
  width: 50px;
}

.tp-studio-next span {
  left: 0;
}

.tp-studio-prev span {
  right: 0;
}

.tp-studio-prev {
  margin-right: 30px;
}

.tp-studio-prev span svg {
  left: 0;
}

.tp-studio-next span svg {
  right: 0;
}

.tp-studio-prev svg,
.tp-studio-next svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.tp-studio-prev,
.tp-studio-next {
  position: relative;
  width: 30px;
  height: 40px;
  font-size: 0;
}

/*----------------------------------------*/
/*  7.1 about css start
/*----------------------------------------*/

.tp-about-2-area {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  height: 70vh;
  /* or adjust as needed */
  padding: 0;
  /* remove top/bottom padding if not needed */
}

.tp-about-2-title-box {
  max-width: 800px;
  margin: 0 auto;
}

.tp-about-2-section-wrapper {
  overflow: visible;
  /* prevent parent clipping */
  width: 100%;
  text-align: center;
  /* optional: center align */
}


.tp-about-2-subtext {
  font-family: 'qanelas-light';
  font-size: 18px;
  line-height: 1.4;
  color: #555;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .tp-about-2-section-title {
    font-size: clamp(20px, 2vw + 18px, 60px);
    letter-spacing: -1.2px;
    white-space: normal;
    /* allow wrapping on small screens */
    font-family: "Qanelas-Medium", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
    padding: 0 20px 0px;
  }

}

.tp-about-2-thumb-box {
  margin-right: 35px;
}

@media (max-width: 767px) {
  .tp-about-2-thumb-box {
    margin-right: 0;
  }
}

.tp-about-2-thumb-main img {
  transform-origin: top left;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .tp-about-2-thumb-main img {
    width: 100%;
    transform: rotate(0);
    margin-bottom: 20px;
  }
}

.tp-about-2-thumb-inner {
  position: absolute;
  bottom: -40px;
  left: 153px;
  transform-origin: left bottom;
}

@media (max-width: 767px) {
  .tp-about-2-thumb-inner {
    transform: rotate(0);
    position: static;
    margin-bottom: 20px;
  }
}

.tp-about-2-thumb-inner img {
  border-radius: 12px;
  width: 100%;
  margin-bottom: 10px;
}

.tp-about-2-thumb-text {
  color: #37373D;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  display: inherit;
}

.tp-about-2-content {
  padding-left: 40px;
  padding-right: 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-about-2-content {
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-about-2-content {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 80px;
  }
}

.tp-about-2-content span {
  color: var(--tp-common-black);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 30px;
  display: inline-block;
}

.tp-about-2-content p {
  color: #3E3E44;
}

.tp-about-2-right-thumb {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 230px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-2-right-thumb {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .tp-about-2-area {
    padding-top: 40px;
    height: 60vh;
    /* or adjust as needed */
  }
}

.tp-about-3-content {
  padding-right: 230px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-about-3-content {
    padding-right: 0;
  }
}

.tp-about-3-shape {
  margin-right: 160px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-3-shape {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .tp-about-3-shape {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

.tp-about-3-shape img {
  animation: rotate2 5s linear infinite;
}

.tp-about-4-title {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #F5F7F5;
  font-family: var(--tp-ff-marcellus);
  padding-right: 45px;
  margin-bottom: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-4-title {
    padding-right: 0;
    font-size: 35px;
  }
}

@media (max-width: 767px) {
  .tp-about-4-title {
    padding-right: 0;
    font-size: 33px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-about-4-content {
    margin-bottom: 40px;
  }
}

.tp-about-4-content.item-1 p {
  padding-right: 50px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-about-4-content.item-1 p {
    padding-right: 0;
  }
}

.tp-about-4-content.item-2 p {
  padding-right: 30px;
}

.tp-about-4-content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.7);
}

.tp-about-4-content a {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.16px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

.tp-about-4-content a:hover {
  background-size: 0% 1px, 100% 1px;
}

.tp-about-4-content-wrap {
  margin-right: -90px;
}

@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),
(max-width: 767px) {
  .tp-about-4-content-wrap {
    margin-right: 0;
  }
}

.tp-about-4-shape-1 {
  padding-left: 25px;
}

@media (max-width: 767px) {
  .tp-about-4-shape-1 {
    padding-left: 0;
    margin-bottom: 30px;
  }
}

.tp-about-4-shape-1 img {
  animation: animationglob 5s cubic-bezier(1, 0.99, 0.03, 0.01) infinite;
}

.tp-about-4-shape-2 {
  position: absolute;
  top: 120px;
  right: 250px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-4-shape-2 {
    right: 70px;
  }
}

@media (max-width: 767px) {
  .tp-about-4-shape-2 {
    top: 10px;
    right: 10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-about-5-area {
    padding-bottom: 30px;
  }
}

.tp-about-5-title {
  color: #F5F7F5;
  font-size: 70px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -2.8px;
  text-transform: uppercase;
  display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-about-5-title {
    font-size: 55px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-5-title {
    font-size: 38px;
  }

  .tp-about-5-title br {
    display: none;
  }

  .tp-about-5-title span svg {
    width: 70px;
  }
}

@media (max-width: 767px) {
  .tp-about-5-title {
    font-size: 34px;
  }

  .tp-about-5-title br {
    display: none;
  }

  .tp-about-5-title span svg {
    width: 70px;
  }
}

.tp-about-5-title .text-space {
  padding-left: 285px;
}

@media (max-width: 767px) {
  .tp-about-5-title .text-space {
    padding-left: 0;
  }
}

.tp-about-5-subtitle {
  top: 14px;
  left: 0;
  position: absolute;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  text-transform: lowercase;
  font-family: var(--tp-ff-body);
  letter-spacing: normal;
}

@media (max-width: 767px) {
  .tp-about-5-subtitle {
    position: static;
    display: block;
    margin-bottom: 20px;
  }
}

.tp-about-5-category {
  padding-left: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-5-category {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .tp-about-5-category {
    padding-left: 0;
    margin-bottom: 40px;
  }
}

.tp-about-5-category span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  padding: 8px 17px;
  border-radius: 20px;
  display: table;
  color: var(--tp-common-white);
  border: 1px solid rgba(245, 247, 245, 0.2);
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .tp-about-5-category span {
    font-size: 17px;
  }
}

.tp-about-5-category span:last-child {
  margin-bottom: 0;
}

.tp-about-5-text {
  padding-left: 70px;
  padding-right: 110px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-about-5-text {
    padding-left: 0;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-about-5-text {
    padding-left: 0;
    padding-right: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-about-5-text {
    padding-left: 0;
    padding-right: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-about-5-text {
    padding-left: 0;
    padding-right: 0px;
  }
}

.tp-about-5-text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(245, 247, 245, 0.7);
}

.tp-mission-content {
  padding-left: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-mission-content {
    padding-left: 0;
  }
}

.tp-mission-content p {
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(245, 247, 245, 0.7);
  max-width: 375px;
  margin-bottom: 50px;
}

.tp-mission-thumb {
  height: 370px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .tp-mission-thumb {
    margin-bottom: 40px;
  }

  .tp-mission-thumb img {
    width: 100%;
  }
}

.tp-mission-right-thumb {
  position: absolute;
  bottom: -13%;
  right: 0;
  height: 260px;
  overflow: hidden;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-mission-right-thumb {
    bottom: -17%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-mission-right-thumb {
    position: static;
    margin-top: 50px;
    text-align: center;
  }
}

.tp-about-6-title {
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
}

@media (max-width: 767px) {
  .tp-about-6-title {
    font-size: 45px;
  }
}

.tp-about-6-tab-btn {
  padding: 7px;
  background-color: #F5F5F5;
  display: inline-block;
  border-radius: 40px;
  margin-bottom: 90px;
}

@media (max-width: 767px) {
  .tp-about-6-tab-btn {
    padding: 20px;
    margin-bottom: 50px;
  }
}

.tp-about-6-tab-btn ul li:last-child button {
  margin-right: 0;
}

.tp-about-6-tab-btn ul li button {
  height: 40px;
  font-size: 16px;
  font-weight: 600;
  line-height: 14px;
  padding: 0px 40px;
  border-radius: 40px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-6-tab-btn ul li button {
    padding: 0px 30px;
  }
}

@media (max-width: 767px) {
  .tp-about-6-tab-btn ul li button {
    font-size: 14px;
    padding: 0px 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-about-6-tab-btn ul li button {
    padding: 0px 18px;
  }
}

.tp-about-6-tab-btn ul li button.active {
  background-color: var(--tp-common-orange);
  color: var(--tp-common-white);
}

.tp-about-6-pragraph-text p {
  font-size: 46px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 50px;
  text-align: left;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery);
}

@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),
(max-width: 767px) {
  .tp-about-6-pragraph-text p br {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-6-pragraph-text p {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .tp-about-6-pragraph-text p {
    font-size: 30px;
  }
}

.tp-about-6-personal-info {
  margin-bottom: 60px;
}

.tp-about-6-personal-info ul li {
  list-style: none;
  line-height: 0;
  margin-bottom: 15px;
}

.tp-about-6-personal-info ul li span {
  font-size: 18px;
  font-weight: 400;
  color: var(--tp-common-black);
}

.tp-about-6-personal-info ul li span p {
  color: #5D5D63;
  min-width: 130px;
  display: inline-block;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .tp-about-6-personal-info ul li span p {
    min-width: 100px;
  }
}

.tp-about-6-personal-info ul li span i {
  font-style: normal;
  margin-right: 40px;
}

@media (max-width: 767px) {
  .tp-about-6-btn-box {
    margin-bottom: 40px;
  }
}

.breadcurmb-site h6 {
  color: var(--tp-common-white);
  transform: rotate(-90deg);
  position: absolute;
  top: 58.5%;
  left: 10px;
}

.breadcurmb-site h6::before {
  content: "";
  height: 1px;
  width: 50px;
  display: inline-block;
  background-color: var(--tp-common-white);
  transform: translateY(-4px);
  margin-right: 12px;
}

.ab-inner-hero-scroll {
  position: absolute;
  right: 60px;
  top: 62%;
}

@media (max-width: 767px) {
  .ab-inner-hero-scroll {
    top: 61%;
  }
}

.ab-inner-hero-scroll span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.36px;
  color: rgba(255, 255, 255, 0.7);
}

.ab-inner-hero-scroll span svg {
  margin-left: 20px;
  display: inline-block;
  color: var(--tp-common-white);
  animation: scroll-up-down 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
  animation-delay: 0s;
  animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
  margin-top: -25px;
}

.ab-inner-hero-bg {
  padding-top: 290px;
  padding-bottom: 110px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ab-inner-hero-bg {
    padding-top: 210px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-inner-hero-bg {
    padding-top: 200px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .ab-inner-hero-bg {
    padding-top: 160px;
  }
}

.ab-inner-hero-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.ab-inner-hero-subtitle {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tp-common-white);
  display: inline-block;
  position: relative;
  padding-left: 14px;
  margin-bottom: 20px;
}

.ab-inner-hero-subtitle::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 2px;
  height: 40px;
  content: "";
  background-color: var(--tp-common-white);
}

.ab-inner-hero-title {
  font-size: 180px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -9px;
  color: var(--tp-common-white);
  transform: translateX(-12px);
  margin-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ab-inner-hero-title {
    font-size: 160px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-inner-hero-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-inner-hero-title {
    font-size: 115px;
  }
}

@media (max-width: 767px) {
  .ab-inner-hero-title {
    font-size: 85px;
    transform: translateX(-3px);
  }
}

.ab-inner-hero-title-box {
  margin-bottom: 205px;
}

.ab-inner-hero-title-box p {
  font-size: 22px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.44px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
  .ab-inner-hero-title-box p {
    font-size: 20px;
  }
}

.ab-inner-hero-content p {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--tp-common-white);
  margin-bottom: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-inner-hero-content p {
    font-size: 33px;
  }
}

@media (max-width: 767px) {
  .ab-inner-hero-content p {
    font-size: 30px;
  }
}

.ab-inner-hero-content span {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.36px;
  color: var(--tp-common-white);
  position: relative;
  margin-left: 20px;
  display: inline-block;
}

.ab-inner-hero-content span::before {
  position: absolute;
  top: 6px;
  left: -18px;
  height: 8px;
  width: 8px;
  content: "";
  border-radius: 50%;
  border: 1px solid var(--tp-common-white);
}

.ab-inner-hero-content span::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background-color: var(--tp-common-white);
}

.ab-about-mt {
  margin-top: -110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .ab-about-mt {
    margin-top: 0;
    margin-top: 100px;
  }
}

.ab-about-left-thumb {
  height: 690px;
  width: 600px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ab-about-left-thumb {
    width: 500px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-about-left-thumb {
    height: 550px;
    width: 450px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-about-left-thumb {
    height: 550px;
    width: 330px;
  }
}

@media (max-width: 767px) {
  .ab-about-left-thumb {
    height: 400px;
    width: 100%;
  }
}

.ab-about-left-thumb img {
  display: inline-block;
}

@media (max-width: 767px) {
  .ab-about-left-thumb img {
    width: 100%;
  }
}

.ab-about-right-thumb .inner-img {
  position: absolute;
  bottom: -44%;
  right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-about-right-thumb .inner-img {
    position: static;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .ab-about-right-thumb .inner-img {
    position: static;
    margin: 30px 0;
    width: 100%;
  }
}

.ab-about-content {
  margin-bottom: 80px;
}

.ab-about-content span {
  height: 60px;
  line-height: 60px;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black-2);
  padding: 0px 20px;
  display: inline-block;
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  top: -55px;
  left: 20px;
  transform: rotate(-24deg);
}

.ab-about-content span svg {
  transform: translateY(-5px) rotate(25deg);
  margin-left: -5px;
}

.ab-about-content P {
  font-size: 54px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.08px;
  color: var(--tp-common-black-2);
  padding-right: 25px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-about-content P {
    font-size: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-about-content P {
    font-size: 33px;
  }
}

@media (max-width: 767px) {
  .ab-about-content P {
    font-size: 30px;
  }
}

.ab-about-category-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.88px;
  text-transform: uppercase;
  color: var(--tp-common-black-2);
  display: inline-block;
}

.ab-about-category-title span {
  color: #141414;
  font-size: 18px;
  font-weight: 500;
}

.ab-about-category-title-box {
  display: inline-block;
  padding-left: 100px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .ab-about-category-title-box {
    padding-left: 0;
  }
}

.ab-about-category-list ul li {
  color: #5D5D63;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  position: relative;
  list-style-type: none;
  padding-left: 18px;
  margin-bottom: 18px;
}

.ab-about-category-list ul li::after {
  position: absolute;
  top: 6px;
  left: 0;
  height: 6px;
  width: 6px;
  background-color: #5D5D63;
  content: "";
}

.ab-about-category-list.category-space-1 {
  padding-left: 10px;
}

@media (max-width: 767px) {
  .ab-about-category-list.category-space-1 {
    padding-left: 0;
  }
}

.ab-about-category-list.category-space-2 {
  padding-left: 45px;
}

@media (max-width: 767px) {
  .ab-about-category-list.category-space-2 {
    padding-left: 0;
  }
}

.ab-about-shape-1 {
  position: absolute;
  bottom: -85px;
  right: 5%;
}

.ab-award-style .tp-award-list-thumb-wrap {
  margin-top: 50px;
}

.ab-award-title-sm {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-black-2);
  transform: translateY(20px);
}

.ab-award-title-sm span svg {
  transform: translateY(-1px);
  margin-right: 5px;
  display: inline-block;
}

.ab-inner-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-black-2);
  display: inline-block;
}

.ab-inner-subtitle svg {
  transform: translateY(-2px);
  margin-right: 5px;
  display: inline-block;
}

.ab-inner-funfact-title {
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.08px;
  color: var(--tp-common-black-2);
}

.ab-funfact-item {
  padding-bottom: 50px;
  border-bottom: 1px solid #D9D9D9;
}

.ab-funfact-item span {
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--tp-common-black-2);
  margin-bottom: 10px;
  display: inline-block;
}

.ab-funfact-item span i {
  font-size: 100px;
  font-style: normal;
}

.ab-funfact-item p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  color: var(--tp-common-black-2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-funfact-title-box {
    margin-bottom: 40px;
  }
}

.ab-brand-title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--tp-common-white);
}

.ab-brand-slide-wrap {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.ab-brand-content p {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tp-common-white);
  margin-bottom: 45px;
}

.ab-brand-content span {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.36px;
  color: var(--tp-common-white);
  position: relative;
  margin-left: 20px;
  display: inline-block;
}

.ab-brand-content span::before {
  position: absolute;
  top: 6px;
  left: -18px;
  height: 8px;
  width: 8px;
  content: "";
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ab-brand-content span::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background-color: var(--tp-common-white);
}

.ab-2-hero-ptb {
  padding-top: 200px;
  padding-bottom: 300px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-2-hero-ptb {
    padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .ab-2-hero-ptb {
    padding-top: 150px;
    padding-bottom: 0px;
  }
}

.ab-2-hero-subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: rgba(23, 23, 23, 0.5);
  margin-bottom: 15px;
  display: inline-block;
}

.ab-2-hero-title {
  font-size: 160px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -6.4px;
  color: var(--tp-common-black-2);
  transform: translateX(-7px);
  margin-bottom: 32px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ab-2-hero-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-2-hero-title {
    font-size: 140px;
  }
}

@media (max-width: 767px) {
  .ab-2-hero-title {
    font-size: 80px;
  }
}

.ab-2-hero-thumb-wrap {
  margin-top: -48px;
  padding-left: 70px;
  display: inline-block;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-2-hero-thumb-wrap {
    margin-top: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-2-hero-thumb-wrap {
    margin-top: 60px;
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .ab-2-hero-thumb-wrap {
    margin-top: 60px;
    padding-left: 0;
  }

  .ab-2-hero-thumb-wrap img {
    margin-bottom: 60px;
  }
}

.ab-2-hero-thumb-wrap .ab-2-hero-title {
  position: absolute;
  right: -78%;
  top: 9%;
  z-index: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ab-2-hero-thumb-wrap .ab-2-hero-title {
    right: -70%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-2-hero-thumb-wrap .ab-2-hero-title {
    right: -60%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ab-2-hero-thumb-wrap .ab-2-hero-title {
    right: -45%;
  }
}

@media (max-width: 767px) {
  .ab-2-hero-thumb-wrap .ab-2-hero-title {
    position: static;
  }

  .ab-2-hero-thumb-wrap .ab-2-hero-title br {
    display: none;
  }
}

.ab-2-hero-shape-1 {
  position: absolute;
  top: 20%;
  right: -55%;
  animation: animationglob 5s cubic-bezier(1, 0.99, 0.03, 0.01) infinite;
}

.ab-2-hero-shape-2 {
  position: absolute;
  bottom: -65%;
  left: 10%;
}

.ab-2-hero-social-wrap {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  left: 45px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ab-2-hero-social-wrap {
    top: 65%;
  }
}

.ab-2-hero-social a {
  display: table;
  color: #5D5D63;
  font-size: 20px;
  margin-bottom: 10px;
}

.ab-2-hero-social a:last-child {
  margin-bottom: 0;
}

.ab-2-hero-social-text span {
  color: #5D5D63;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.56px;
  position: relative;
  display: inline-block;
  transform: rotate(90deg);
  top: 65px;
  left: -64px;
}

.ab-2-hero-social-text span::before {
  content: "";
  height: 1px;
  width: 50px;
  margin-right: 14px;
  display: inline-block;
  background-color: #5D5D63;
  transform: translateY(-4px);
}

.ab-2-portfolio-thumb-wrap {
  padding: 0 5px;
}

.ab-2-portfolio-thumb img {
  transition: 0.9s;
}

.ab-2-portfolio-thumb:hover img {
  transform: scale(1.1) rotate(-2deg);
}

.ab-2-about-title-style .ab-about-category-title span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-transform: capitalize;
  color: rgba(23, 23, 23, 0.5);
}

.ab-2-work-title-box {
  display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .ab-2-work-title-box {
    margin-bottom: 60px;
  }
}

.ab-2-work-title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2.4px;
  margin-bottom: 20px;
  color: var(--tp-common-black-2);
}

@media (max-width: 767px) {
  .ab-2-work-title {
    font-size: 55px;
  }
}

.ab-2-work-subtitle {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: rgba(23, 23, 23, 0.5);
}

.ab-2-work-shape {
  position: absolute;
  bottom: -65%;
  right: 30%;
}

.ab-2-work-item {
  margin-bottom: 50px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.14);
}

.ab-2-work-item .sv-service-space-wrap {
  padding-left: 0px;
}

.ab-2-work-item .sv-service-subtitle {
  color: #5D5D63;
}

.ab-2-work-item .sv-service-subtitle i::after {
  background: rgba(23, 23, 23, 0.14);
}

.ab-2-work-item .sv-service-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.6px;
  color: var(--tp-common-black-2);
}

@media (max-width: 767px) {
  .ab-2-work-item .sv-service-title {
    font-size: 30px;
  }
}

.ab-2-work-item .sv-service-text p {
  color: #5D5D63;
}

/*----------------------------------------*/
/*  7.25 video css start
/*----------------------------------------*/
.tp-video-wrap {
  line-height: 0;
  position: relative;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
  height: 850px;
  width: calc(100% - 30px);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-video-wrap {
    height: 700px;
    margin-bottom: 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-video-wrap {
    margin-bottom: 100px;
    height: 600px;
  }
}

@media (max-width: 767px) {
  .tp-video-wrap {
    margin: 0;
    margin-bottom: 40px;
    height: 300px;
    width: 100%;
  }
}

.tp-video-wrap::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(16, 16, 17, 0.2);
  border-radius: 12px;
}

.tp-video-wrap .play-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
}

.tp-video-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px;
  z-index: 2;
}

@media (max-width: 767px) {
  .tp-video-content {
    padding: 30px;
  }
}

.tp-video-subtitle {
  color: var(--tp-common-white);
  font-size: 20px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.4px;
}

.tp-video-subtitle span svg {
  color: var(--tp-common-white);
  margin-right: 8px;
  transform: translateY(-2px);
  animation: rotate2 3s linear infinite;
}

.tp-video-title {
  color: var(--tp-common-white);
  font-size: 150px !important;
  font-weight: 400;
  line-height: 150px;
  letter-spacing: -2px;
  margin-bottom: 0;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-video-title {
    font-size: 160px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-video-title {
    font-size: 150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-video-title {
    font-size: 120px;
  }
}

@media (max-width: 767px) {
  .tp-video-title {
    font-size: 75px;
  }
}

.tp-video-content {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}

.tp-video-content p {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: var(--tp-common-white);
  max-width: 410px;
  margin: 0 auto;
}

.tp-video-3-wrap {
  line-height: 0;
  overflow: hidden;
}

.tp-video-3-wrap video {
  height: 920px;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-video-3-wrap video {
    height: 700px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-video-3-wrap video {
    height: 600px;
  }
}

/*----------------------------------------*/
/*  7.10 gallery css start
/*----------------------------------------*/
.tp-gallery-slider-active {
  margin: 0px -15px;
}

.tp-gallery-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

@media (max-width: 767px) {
  .tp-gallery-shape-1 {
    top: -6px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-gallery-shape-1 {
    top: 0px;
  }
}

.tp-gallery-shape-1 .img-2 {
  display: none;
}

.tp-gallery-shape-2 {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 2;
}

@media (max-width: 767px) {
  .tp-gallery-shape-2 {
    bottom: -6px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-gallery-shape-2 {
    bottom: -1px;
  }
}

.tp-gallery-shape-2 .img-2 {
  display: none;
}

.tp-gallery-titming {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.tp-gallery-6-tab-btn button {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-gallery-6-tab-btn button {
    margin: 0 15px;
  }
}

@media (max-width: 767px) {
  .tp-gallery-6-tab-btn button {
    font-size: 14px;
    margin: 0 10px;
  }
}

.tp-gallery-6-tab-btn button:hover {
  color: var(--tp-common-orange);
}

.tp-gallery-6-tab-btn button.active {
  color: var(--tp-common-orange);
}

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

.tp-gallery-6-item .tp-hover-wrapper {
  background-color: var(--tp-theme-1);
  border-radius: 10px;
  display: inline-block;
  padding: 45px 75px;
}

.tp-gallery-6-item .tp-img-reveal-wrapper {
  width: auto;
  height: auto;
}

/*----------------------------------------*/
/*  7.12 instagram css start
/*----------------------------------------*/
.footer-top {
  margin-top: 400px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-top {
    margin-top: 170px;
  }
}

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

@media (max-width: 767px) {
  .footer-top {
    margin-top: 100px;
  }
}

.tp-instagram-area {
  height: 100vh;
}

@media (max-width: 767px) {
  .tp-instagram-area {
    height: 100%;
  }
}

.tp-instagram-thumb {
  height: 100%;
  margin: 0 auto;
  position: relative;
  background-size: cover;
  background-position: center;
}

.tp-instagram-thumb img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
}

.tp-instagram-thumb-wrap {
  display: inline-block;
  margin: 0 auto;
}

.tp-instagram-thumb-inner-1 {
  position: absolute;
  top: -41%;
  left: 50px;
}

.tp-instagram-thumb-inner-1 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-2 {
  position: absolute;
  top: -41%;
  right: 0px;
}

.tp-instagram-thumb-inner-2 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-3 {
  position: absolute;
  bottom: 0;
  right: -74%;
}

.tp-instagram-thumb-inner-3 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-4 {
  position: absolute;
  bottom: -42%;
  right: -42%;
}

.tp-instagram-thumb-inner-4 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-5 {
  position: absolute;
  bottom: -26%;
  right: 0%;
}

.tp-instagram-thumb-inner-5 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-6 {
  position: absolute;
  bottom: 0%;
  left: -25%;
}

.tp-instagram-thumb-inner-6 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-7 {
  position: absolute;
  bottom: 25%;
  left: -59%;
}

.tp-instagram-thumb-inner-7 img {
  border-radius: 10px;
}

.tp-instagram-thumb-inner-8 {
  position: absolute;
  top: 7%;
  right: -25%;
}

.tp-instagram-thumb-inner-8 a {
  height: 96px;
  width: 96px;
  font-size: 24px;
  line-height: 96px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-white);
  background-color: #786456;
}

.tp-instagram-subtitle {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #42332A;
}

.tp-instagram-title {
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2.4px;
  color: #42332A;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .tp-instagram-title {
    font-size: 50px;
  }
}

.tp-instagram-content-wrap {
  position: absolute;
  bottom: -340px;
  left: -150px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-instagram-content-wrap {
    left: 60px;
  }
}

@media (max-width: 767px) {
  .tp-instagram-content-wrap {
    position: static;
    margin-top: 40px;
    margin-left: 20px;
  }
}

.tp-instagram-content {
  padding-left: 100px;
}

.tp-instagram-content p {
  color: #42332A;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.tp_text_invert>div {
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 50%);
}

/*----------------------------------------*/
/*  7.7 cta css start
/*----------------------------------------*/
.tp-cta-title-box {
  padding-left: 70px;
}

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

.tp-cta-title-box p {
  max-width: 465px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-cta-title-box p {
    margin: 0;
    margin-bottom: 30px;
    display: inline-block;
  }
}

.tp-cta-title {
  font-size: 200px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-cta-title {
    font-size: 130px;
  }
}

@media (max-width: 767px) {
  .tp-cta-title {
    font-size: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-cta-title {
    font-size: 110px;
  }
}

.tp-cta-title span {
  padding-left: 315px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-cta-title span {
    padding-left: 0;
  }
}

.tp-cta-btn-box {
  position: absolute;
  bottom: 5%;
  left: 12%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-cta-btn-box {
    bottom: 16%;
    left: 25%;
    transform: scale(0.7);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-cta-btn-box {
    position: static;
  }
}

@media (max-width: 767px) {
  .tp-cta-btn-box {
    position: static;
    margin-top: 20px;
  }
}

.tp-cta-icon {
  position: absolute;
  top: 14%;
  right: 19%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-cta-icon {
    top: 8%;
    right: 29%;
  }
}

@media (max-width: 767px) {
  .tp-cta-icon {
    top: -21%;
  }
}

.tp-cta-icon img {
  animation: rotate2 5s linear infinite;
}

.tp-cta-circle span {
  height: 400px;
  width: 400px;
  border-radius: 50%;
  background: linear-gradient(-90deg, rgba(3, 0, 30, 0.5) 0%, rgba(115, 3, 192, 0.5) 33.33%, rgba(236, 56, 188, 0.5) 66.67%, rgba(253, 239, 249, 0.5) 100%);
  filter: blur(15px);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

@media (max-width: 767px) {
  .tp-studio-cta-title-box {
    margin-bottom: 30px;
  }
}

.tp-studio-cta-title {
  font-size: 220px;
  font-weight: 300;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-shoulders);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-cta-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-cta-title {
    font-size: 140px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-cta-title {
    font-size: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-cta-title {
    font-size: 110px;
  }
}

@media (max-width: 767px) {
  .tp-studio-cta-title {
    font-size: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-studio-cta-title {
    font-size: 70px;
  }
}

.tp-studio-cta-title span {
  font-weight: 700;
}

@media (max-width: 767px) {
  .tp-studio-cta-btn-box {
    margin-bottom: 30px;
  }
}

.tp-studio-cta-subscribe-link a {
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  display: inline;
  color: var(--tp-common-black);
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}

@media (max-width: 767px) {
  .tp-studio-cta-subscribe-link a {
    font-size: 20px;
  }
}

.tp-studio-cta-subscribe-link a span {
  margin-left: 10px;
}

.tp-studio-cta-subscribe-link a:hover {
  background-size: 0% 2px, 100% 2px;
}

/*----------------------------------------*/
/*  7.6 contact css start
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-contact-6-title-box .tp-section-title-80 {
    font-size: 70px;
  }
}

.tp-contact-6-title-box p {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: rgba(245, 247, 245, 0.5);
}

@media (max-width: 767px) {
  .tp-contact-6-title-box p {
    font-size: 18px;
  }
}

.tp-contact-6-info-item {
  margin-bottom: 20px;
}

.tp-contact-6-info-item:last-child {
  margin-bottom: 0;
}

.tp-contact-6-info-icon a {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  line-height: 46px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-block;
  margin-right: 20px;
}

.tp-contact-6-info-text span {
  display: block;
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.tp-contact-6-info-text a {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-gallery);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-contact-6-info-text a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .tp-contact-6-info-text a {
    font-size: 18px;
  }
}

.tp-contact-6-input label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-white);
  margin-bottom: 12px;
}

.tp-contact-6-input input,
.tp-contact-6-input textarea {
  background-color: #242427;
  border: 1px solid transparent;
  color: var(--tp-common-white);
}

.tp-contact-6-input input::-webkit-input-placeholder,
.tp-contact-6-input textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #84848B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.tp-contact-6-input input::-moz-placeholder,
.tp-contact-6-input textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: #84848B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.tp-contact-6-input input:-moz-placeholder,
.tp-contact-6-input textarea:-moz-placeholder {
  /* Firefox 4-18 */
  color: #84848B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.tp-contact-6-input input:-ms-input-placeholder,
.tp-contact-6-input textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #84848B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.tp-contact-6-input input::placeholder,
.tp-contact-6-input textarea::placeholder {
  /* MODERN BROWSER */
  color: #84848B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.tp-contact-6-input input:focus,
.tp-contact-6-input textarea:focus {
  border-color: var(--tp-common-white);
}

.tp-contact-6-input textarea {
  resize: none;
  height: 160px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-contact-6-info-wrap {
    margin-bottom: 70px;
  }
}

@media (max-width: 767px) {
  .tp-contact-6-info-wrap {
    margin-bottom: 50px;
  }
}

.cn-contactform-style .ab-about-category-title-box {
  padding-left: 0px;
}

.cn-contactform-style .ab-2-hero-social-wrap {
  top: 31%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contactform-style .ab-2-hero-social-wrap {
    top: 43%;
  }
}

.cn-contactform-input label {
  color: #414144;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.cn-contactform-input input,
.cn-contactform-input textarea {
  border: none;
  background-color: transparent;
  color: #B2B2B2;
  font-size: 22px;
  font-weight: 400;
  padding-left: 0;
  height: 45px;
  border-bottom: 1px solid rgba(25, 25, 26, 0.24);
}

@media (max-width: 767px) {

  .cn-contactform-input input,
  .cn-contactform-input textarea {
    font-size: 18px;
  }
}

.cn-contactform-input input::-webkit-input-placeholder,
.cn-contactform-input textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #B2B2B2;
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 767px) {

  .cn-contactform-input input::-webkit-input-placeholder,
  .cn-contactform-input textarea::-webkit-input-placeholder {
    font-size: 18px;
  }
}

.cn-contactform-input input::-moz-placeholder,
.cn-contactform-input textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: #B2B2B2;
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 767px) {

  .cn-contactform-input input::-moz-placeholder,
  .cn-contactform-input textarea::-moz-placeholder {
    font-size: 18px;
  }
}

.cn-contactform-input input:-moz-placeholder,
.cn-contactform-input textarea:-moz-placeholder {
  /* Firefox 4-18 */
  color: #B2B2B2;
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 767px) {

  .cn-contactform-input input:-moz-placeholder,
  .cn-contactform-input textarea:-moz-placeholder {
    font-size: 18px;
  }
}

.cn-contactform-input input:-ms-input-placeholder,
.cn-contactform-input textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #B2B2B2;
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 767px) {

  .cn-contactform-input input:-ms-input-placeholder,
  .cn-contactform-input textarea:-ms-input-placeholder {
    font-size: 18px;
  }
}

.cn-contactform-input input::placeholder,
.cn-contactform-input textarea::placeholder {
  /* MODERN BROWSER */
  color: #B2B2B2;
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 767px) {

  .cn-contactform-input input::placeholder,
  .cn-contactform-input textarea::placeholder {
    font-size: 18px;
  }
}

.cn-contactform-input textarea {
  resize: none;
  height: 100px;
}

.cn-contactform-input textarea:focus {
  border-color: var(--tp-common-black);
}

.cn-contactform-wrap {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .cn-contactform-wrap {
    padding-left: 0;
  }
}

.cn-contactform-support-bg {
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  height: 385px;
}

.cn-contactform-support-text span {
  font-size: 44px;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: -0.88px;
  color: var(--tp-common-black-2);
  max-width: 755px;
  margin: 0 auto;
  display: inline-block;
}

.cn-contact-info-bg {
  padding: 120px 150px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contact-info-bg {
    padding: 120px 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cn-contact-info-bg {
    padding: 120px 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cn-contact-info-bg {
    padding: 120px 30px;
  }
}

@media (max-width: 767px) {
  .cn-contact-info-bg {
    padding: 120px 30px;
  }
}

.cn-contact-info-bg .cn-contact-info-item:first-child {
  padding-top: 0;
}

.cn-contact-info-bg .cn-contact-info-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cn-contact-info-thumb {
  margin-right: 140px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contact-info-thumb {
    margin-right: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cn-contact-info-thumb {
    margin-right: 50px;
  }
}

@media (max-width: 767px) {
  .cn-contact-info-thumb {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cn-contact-info-thumb {
    margin-right: 20px;
    margin-bottom: 30px;
  }
}

.cn-contact-info-thumb img {
  width: 320px;
}

.cn-contact-info-item {
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .cn-contact-left {
    margin-bottom: 90px;
  }
}

.cn-contact-left-title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  margin-bottom: 160px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contact-left-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .cn-contact-left-title {
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .cn-contact-left-info {
    margin-bottom: 30px;
  }
}

.cn-contact-left-info span {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cn-contact-left-info span i {
  padding-right: 5px;
}

.cn-contact-location {
  margin-bottom: 115px;
}

@media (max-width: 767px) {
  .cn-contact-location {
    margin-bottom: 50px;
  }
}

.cn-contact-location-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-common-white);
  display: block;
  margin-bottom: 15px;
}

.cn-contact-location a {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.6);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contact-location a {
    font-size: 16px;
  }
}

.cn-contact-map a {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  position: relative;
}

@media (max-width: 767px) {
  .cn-contact-map a {
    margin-bottom: 20px;
    display: inline-block;
  }
}

.cn-contact-map a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: rgba(255, 255, 255, 0.3);
}

.cn-contact-map a::before {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 0;
  content: "";
  background: var(--tp-common-white);
  transition: 0.4s;
}

.cn-contact-map a:hover::before {
  right: auto;
  left: 0;
  width: 100%;
}

.cn-contact-right {
  padding-left: 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),
(max-width: 767px) {
  .cn-contact-right {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .cn-contact-right-wrap {
    flex-wrap: wrap;
  }
}

.cn-contact-right-info a {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--tp-common-white);
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contact-right-info a {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .cn-contact-right-info a {
    margin-bottom: 15px;
  }
}

.cn-contact-right-info a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: rgba(255, 255, 255, 0.3);
}

.cn-contactform-2-bg .cn-contactform-wrap {
  padding-left: 0px;
  padding: 140px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cn-contactform-2-bg .cn-contactform-wrap {
    padding: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cn-contactform-2-bg .cn-contactform-wrap {
    padding: 70px;
  }
}

@media (max-width: 767px) {
  .cn-contactform-2-bg .cn-contactform-wrap {
    padding: 30px;
  }
}

.cn-contactform-2-bg .cn-contactform-input label {
  color: rgba(255, 255, 255, 0.8);
}

.cn-contactform-2-bg .cn-contactform-input input,
.cn-contactform-2-bg .cn-contactform-input textarea {
  color: var(--tp-common-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cn-contactform-2-bg .cn-contactform-input input::-webkit-input-placeholder,
.cn-contactform-2-bg .cn-contactform-input textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #5F5F65;
}

.cn-contactform-2-bg .cn-contactform-input input::-moz-placeholder,
.cn-contactform-2-bg .cn-contactform-input textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: #5F5F65;
}

.cn-contactform-2-bg .cn-contactform-input input:-moz-placeholder,
.cn-contactform-2-bg .cn-contactform-input textarea:-moz-placeholder {
  /* Firefox 4-18 */
  color: #5F5F65;
}

.cn-contactform-2-bg .cn-contactform-input input:-ms-input-placeholder,
.cn-contactform-2-bg .cn-contactform-input textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #5F5F65;
}

.cn-contactform-2-bg .cn-contactform-input input::placeholder,
.cn-contactform-2-bg .cn-contactform-input textarea::placeholder {
  /* MODERN BROWSER */
  color: #5F5F65;
}

.cn-contactform-2-bg .cn-contactform-input input:focus,
.cn-contactform-2-bg .cn-contactform-input textarea:focus {
  border-bottom: 1px solid var(--tp-common-white);
}

.cn-contactform-2-map {
  height: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .cn-contactform-2-map {
    height: 500px;
  }
}

.cn-contactform-2-map iframe {
  width: 100%;
  height: 100%;
  list-style: 0;
}

.cn-contactform-2-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  margin-bottom: 90px;
}

@media (max-width: 767px) {
  .cn-contactform-2-title {
    margin-bottom: 40px;
    font-size: 25px;
  }
}

.cn-contact-2-content {
  background-color: #f5f5f5;
  padding: 90px 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cn-contact-2-content {
    margin-top: 0;
    padding: 30px 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .cn-contact-2-content {
    margin-top: 0;
    padding: 40px 30px;
  }
}

.cn-contact-2-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3.6px;
  color: var(--tp-common-black-2);
  margin-bottom: 45px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cn-contact-2-title {
    font-size: 45px;
  }
}

.cn-contact-2-thumb {
  margin-bottom: 40px;
}

.cn-contact-2-thumb img {
  margin: 0px 8px;
}

.cn-contact-2-info-details a,
.cn-contact-2-info-details span {
  color: #414147;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  max-width: 200px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

/*----------------------------------------*/
/*  7.21 social css start
/*----------------------------------------*/
.tp-social-6-item a {
  font-size: 14px;
  font-weight: 600;
  line-height: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  background: #242427;
  display: inline-block;
  padding: 25px 45px;
  transition: 0.3s;
}

.tp-social-6-item a i {
  padding-right: 17px;
  margin-right: 17px;
  position: relative;
}

.tp-social-6-item a i::after {
  position: absolute;
  top: -8px;
  right: 0;
  width: 1px;
  height: 30px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  content: "";
  transition: 0.3s;
}

.tp-social-6-item a:hover {
  background-color: var(--tp-common-orange);
  color: var(--tp-common-white);
}

.tp-social-6-item a:hover i::after {
  background: rgba(255, 255, 255, 0.2);
}

/*----------------------------------------*/
/*  7.16 price css start
/*----------------------------------------*/
.tp-price-item {
  border: 1px solid rgba(25, 25, 26, 0.24);
  background: #FFF;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.tp-price-item.active .tp-price-monthly {
  color: var(--tp-common-white);
}

.tp-price-item.active .tp-price-list ul li {
  color: var(--tp-common-white);
}

.tp-price-item.active .tp-price-list ul li i {
  border: 1px solid var(--tp-common-white);
}

.tp-price-head {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 35px;
}

.tp-price-head span {
  color: var(--tp-common-white);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.tp-price-head h5 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.16px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  margin-bottom: 0;
}

.tp-price-body {
  padding: 35px 40px;
}

.tp-price-monthly {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 40px;
  display: inline-block;
  color: var(--tp-common-black-2);
}

.tp-price-monthly i {
  font-size: 60px;
  font-weight: 700;
  font-style: normal;
}

.tp-price-list {
  margin-bottom: 30px;
}

.tp-price-list ul li {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  list-style-type: none;
  position: relative;
  color: var(--tp-common-black-2);
  padding-left: 40px;
  padding-bottom: 28px;
}

.tp-price-list ul li:last-child {
  margin-bottom: 0;
}

.tp-price-list ul li i {
  position: absolute;
  top: -5px;
  left: 0;
  height: 28px;
  width: 28px;
  line-height: 28px;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  border: 1px solid var(--tp-common-black-2);
}

.tp-price-inner-faq .tp-service-2-shape-img {
  padding-left: 0px;
}

.tp-price-inner-faq-wrap {
  padding-left: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-price-inner-faq-wrap {
    padding-left: 70px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-price-inner-faq-wrap {
    padding-left: 0px;
  }
}

/*----------------------------------------*/
/*  7.9 funfact css start
/*----------------------------------------*/
.slide-funfact-overlay {
  position: relative;
}

.slide-funfact-overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(30, 30, 30, 0.6) 0.12%, rgba(30, 30, 30, 0.86) 51.83%, rgba(30, 30, 30, 0.6) 99.87%);
  content: "";
}

.slide-funfact-height {
  position: relative;
  overflow: hidden;
  height: 545px;
  background-color: var(--tp-common-black);
  z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slide-funfact-height {
    height: 400px;
  }
}

.slide-funfact:after {
  content: "";
  z-index: 1;
  width: 100%;
  height: 1px;
  max-width: 80rem;
  background: linear-gradient(64deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 51.22%, rgba(255, 255, 255, 0) 100%);
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.slide-funfact:before {
  content: "";
  z-index: 1;
  width: 100%;
  height: 1px;
  max-width: 80rem;
  background: linear-gradient(64deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 51.22%, rgba(255, 255, 255, 0) 100%);
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: auto;
  top: 0%;
  left: 0%;
  right: 0%;
}

.slide-funfact .img-marq {
  z-index: -1;
  opacity: 0.7;
  -webkit-perspective: 1412px;
  perspective: 1412px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.slide-funfact .img-marq .slide-img-right {
  z-index: -1;
  -webkit-transform-origin: 100%;
  -ms-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: auto;
  right: -10%;
  -webkit-transform: rotateX(0) rotateY(-80deg) rotate(0);
  transform: rotateX(0) rotateY(-80deg) rotate(0);
}

.slide-funfact .img-marq .slide-img-right .box {
  -webkit-transform: translate(0%, 0px);
  -ms-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
  -webkit-animation-name: bgshotsright;
  animation-name: bgshotsright;
  -webkit-animation-duration: 45s;
  animation-duration: 45s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.slide-funfact .img-marq .slide-img-left {
  z-index: -1;
  -webkit-transform-origin: 0%;
  -ms-transform-origin: 0%;
  transform-origin: 0%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: -10%;
  right: auto;
  -webkit-transform: rotate3d(0, 1, 0.00009, 80deg);
  transform: rotate3d(0, 1, 0.00009, 80deg);
}

.slide-funfact .img-marq .slide-img-left .box {
  -webkit-transform: translate(0%, 0px);
  -ms-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
  -webkit-animation-name: bgshots;
  animation-name: bgshots;
  -webkit-animation-duration: 45s;
  animation-duration: 45s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.slide-funfact .img-marq img {
  width: 50vw;
  -webkit-perspective: 100px;
  perspective: 100px;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  margin-left: 3rem;
  margin-right: 3rem;
  -webkit-transform: perspective(100px);
  transform: perspective(100px);
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

.slide-funfact .img-marq .box {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

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

.middle-shadow span {
  height: 230px;
  width: 350px;
  display: inline-block;
  background: linear-gradient(90deg, rgba(25, 25, 26, 0) 0%, #19191A 14.76%, #19191A 84.25%, rgba(25, 25, 26, 0) 100%);
}

.slide-funfact-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.slide-funfact-item h4 {
  font-size: 90px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.8px;
  color: var(--tp-common-white);
  font-family: var;
}

.slide-funfact-item h4 i {
  font-style: normal;
}

.slide-funfact-item span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--tp-common-white);
}

@-webkit-keyframes bgshots {
  from {
    -webkit-transform: translate(0%, 0px);
    transform: translate(0%, 0px);
  }

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

@keyframes bgshots {
  from {
    -webkit-transform: translate(0%, 0px);
    transform: translate(0%, 0px);
  }

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

@-webkit-keyframes bgshotsright {
  from {
    -webkit-transform: translate(0%, 0px);
    transform: translate(0%, 0px);
  }

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

@keyframes bgshotsright {
  from {
    -webkit-transform: translate(0%, 0px);
    transform: translate(0%, 0px);
  }

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

.tp-studio-funfact-wrap {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
  .tp-studio-funfact-wrap {
    border-bottom: 0;
  }
}

.tp-studio-funfact-item {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding: 150px 20px 50px 20px;
  height: 100%;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-funfact-item {
    padding: 50px 20px 50px 20px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-studio-funfact-item {
    padding: 30px 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-funfact-item {
    padding: 20px 15px;
  }
}

@media (max-width: 767px) {
  .tp-studio-funfact-item {
    padding: 20px 15px;
    border-right: 0;
  }
}

.tp-studio-funfact-item span {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.66);
  margin-left: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-funfact-item span {
    margin-left: 0;
    font-size: 12px;
  }
}

.tp-studio-funfact-title i {
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-shoulders);
  font-style: normal;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-funfact-title i {
    font-size: 70px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-funfact-title i {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-funfact-title i {
    font-size: 50px;
  }
}

@media (max-width: 767px) {
  .tp-studio-funfact-title i {
    font-size: 50px;
  }
}

.tp-studio-funfact-title span {
  font-style: normal;
  font-size: 30px;
  font-weight: 400;
  display: inline-block;
  transform: translateY(-52px);
  color: rgba(255, 255, 255, 0.6);
  margin-right: 7px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-studio-funfact-title span {
    transform: translateY(-38px);
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-studio-funfact-title span {
    transform: translateY(-30px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-studio-funfact-title span {
    transform: translateY(-20px);
  }
}

@media (max-width: 767px) {
  .tp-studio-funfact-title span {
    transform: translateY(-22px);
  }
}

.tp-studio-funfact-wrap .row [class*=col-]:last-child .tp-studio-funfact-item {
  border-right: 0;
}

/*----------------------------------------*/
/*  7.20 shop css start
/*----------------------------------------*/
.tp-shop-slider-bg {
  padding-top: 330px;
  padding-bottom: 230px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-shop-slider-bg {
    padding-top: 250px;
    padding-bottom: 150px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-shop-slider-bg {
    padding-top: 200px;
    padding-bottom: 140px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-shop-slider-bg {
    padding-top: 170px;
    padding-bottom: 140px;
  }
}

.tp-shop-slider-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 2500ms ease-in, -webkit-transform 10000ms ease;
  transition: opacity 2500ms ease-in, -webkit-transform 10000ms ease;
  transition: transform 10000ms ease, opacity 2500ms ease-in;
  transition: transform 10000ms ease, opacity 2500ms ease-in, -webkit-transform 10000ms ease;
}

.tp-shop-slider-subtitle {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-slider-title {
  font-size: 150px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -6px;
  margin-bottom: 35px;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-shop-slider-title {
    font-size: 130px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-shop-slider-title {
    font-size: 120px;
  }
}

@media (max-width: 767px) {
  .tp-shop-slider-title {
    font-size: 90px;
  }
}

.tp-shop-slider-ovarlay {
  position: relative;
}

.tp-shop-slider-ovarlay::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.34);
}

.tp-shop-slider-arrow-box button {
  top: 50%;
  z-index: 99;
  left: 60px;
  position: absolute;
  transform: translateY(-50%);
  font-size: 45px;
  color: var(--tp-common-white);
}

.tp-shop-slider-arrow-box button:hover {
  color: rgba(245, 245, 245, 0.7);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-shop-slider-arrow-box button {
    left: auto;
    right: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-shop-slider-arrow-box button {
    top: auto;
    transform: translateY(0);
    bottom: 50px;
    left: auto;
    right: 120px;
  }
}

.tp-shop-slider-arrow-box button.tp-shop-prev {
  left: auto;
  right: 60px;
}

.tp-shop-slider-title-box {
  opacity: 0;
  transform: translateY(-150px);
}

.tp-shop-slider-btn-box {
  opacity: 0;
  transform: translateY(150px);
}

.tp-shop-slider-active .swiper-slide.swiper-slide-active .tp-shop-slider-thumb {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.tp-shop-slider-active .swiper-slide.swiper-slide-active .tp-shop-slider-title-box {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2500ms ease;
}

.tp-shop-slider-active .swiper-slide.swiper-slide-active .tp-shop-slider-btn-box {
  opacity: 1;
  transform: translatey(0px);
  transition: all 2500ms ease;
}

.fraction-wrapper {
  position: absolute;
  bottom: 90px;
  left: 50%;
  width: 355px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
  height: 12px;
}

.fraction-wrapper #paginations span {
  font-family: var(--tp-ff-marcellus);
  font-size: 16px;
  color: var(--tp-common-white);
}

.fraction-wrapper #paginations span:last-child {
  float: right;
}

.shop-slider-progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 11;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.shop-slider-progress-bar span {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: 100%;
  background-color: #fff;
  transform: scaleX(1);
  transform-origin: left;
}

#paginations {
  position: absolute;
  bottom: -7px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
}

.tp-shop-category-item img {
  transition: 0.9s;
}

.tp-shop-category-item:hover img {
  transform: scale(1.1) rotate(-2deg);
}

.tp-shop-category-item .tp-btn-shop-category {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 20px;
}

.tp-shop-banner-title {
  font-size: 120px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--tp-ff-aladin);
  color: var(--tp-common-white-solid);
  margin-bottom: 0;
}

.tp-shop-banner-title.sm {
  font-size: 70px;
  margin-bottom: 15px;
}

.tp-shop-banner-content {
  position: absolute;
  top: 0;
  left: 0;
  margin: 70px 60px;
}

.tp-shop-banner-content span {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-white-solid);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 40px;
}

.tp-shop-banner-content span.text-color-black {
  color: var(--tp-common-black);
}

.tp-shop-banner-right .tp-shop-banner-content {
  position: static;
  margin: 0;
}

.tp-shop-banner-right .tp-shop-banner-content span {
  margin-bottom: 0;
  margin-bottom: 35px;
}

.tp-shop-banner-thumb img {
  width: 100%;
  transition: 0.9s;
}

.tp-shop-banner-thumb:hover img {
  transform: scale(1.1);
}

.tp-shop-left-thumb {
  overflow: hidden;
}

.tp-shop-left-thumb img {
  transition: 0.9s;
}

.tp-shop-left-thumb:hover img {
  transform: scale(1.1);
}

.tp-shop-right-thumb img {
  transition: 0.9s;
}

.tp-shop-right-thumb:hover img {
  transform: scale(1.1) rotate(-2deg);
}

.tp-shop-right-title-box span {
  color: #5D5D63;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.52px;
  text-transform: uppercase;
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 5px;
  display: inline-block;
}

.tp-shop-right-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-shop-right-title {
    font-size: 18px;
  }
}

.tp-shop-right-price span {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-right-content {
  margin: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.tp-shop-banner-anim {
  height: 700px;
  overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-shop-banner-anim {
    height: 400px;
  }
}

@media (max-width: 767px) {
  .tp-shop-banner-anim {
    height: 200px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-shop-banner-anim {
    height: 300px;
  }
}

.tp-shop-banner-anim img {
  margin-top: -300px;
}

@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),
(max-width: 767px) {
  .tp-shop-banner-anim img {
    margin-top: 0px;
  }
}

.tp-shop-insta-title-box span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-insta-title {
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-brand-item {
  text-align: center;
  border: 1px solid #EDEFF2;
  height: 120px;
  line-height: 120px;
}

.tp-shop-widget-title {
  font-weight: 400;
  font-size: 18px;
  padding-bottom: 10px;
  margin-bottom: 25px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  border-bottom: 1px solid #EEE;
}

.tp-shop-widget-title.no-border {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}

.tp-shop-widget-filter .ui-widget.ui-widget-content {
  height: 3px;
  background-color: #EDEDED;
  border: 0;
}

.tp-shop-widget-filter .ui-slider-horizontal .ui-slider-range {
  background-color: var(--tp-common-black);
}

.tp-shop-widget-filter .ui-slider .ui-slider-handle {
  top: -7px;
  width: 5px;
  height: 17px;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background-color: var(--tp-common-black);
}

.tp-shop-widget-filter-info .input-range input {
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 400;
  background-color: transparent;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-widget-filter-info .tp-shop-widget-filter-btn {
  font-weight: 400;
  font-size: 14px;
  padding: 2px 21px;
  background-color: #F5F5F5;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-widget-filter-info .tp-shop-widget-filter-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.tp-shop-widget-checkbox ul li {
  list-style: none;
}

.tp-shop-widget-checkbox ul li:not(:last-child) {
  margin-bottom: 4px;
}

.tp-shop-widget-checkbox ul li input {
  display: none;
}

.tp-shop-widget-checkbox ul li input .single-widget-category input:checked+label::after {
  opacity: 1;
  visibility: visible;
}

.tp-shop-widget-checkbox ul li input:checked~label::after {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-shop-widget-checkbox ul li input:checked~label::before {
  visibility: visible;
  opacity: 1;
}

.tp-shop-widget-checkbox ul li label {
  font-size: 16px;
  font-weight: 400;
  position: relative;
  padding-left: 26px;
  color: #55585B;
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-widget-checkbox ul li label::after {
  position: absolute;
  content: "";
  top: 5px;
  left: 0;
  width: 16px;
  height: 16px;
  line-height: 12px;
  text-align: center;
  border: 2px solid #DADADA;
  z-index: -1;
  transition: 0.2s;
}

.tp-shop-widget-checkbox ul li label::before {
  position: absolute;
  content: url("../img/inner-shop/check.svg");
  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
  line-height: 12px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-common-white);
  transition: 0.2s;
}

.tp-shop-widget-checkbox ul li label:hover {
  cursor: pointer;
}

.tp-shop-widget-categories {
  height: 288px;
  overflow-y: scroll;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  padding-right: 10px;
}

.tp-shop-widget-categories ul li {
  list-style: none;
  width: 100%;
}

.tp-shop-widget-categories ul li:not(:last-child) {
  margin-bottom: 10px;
}

.tp-shop-widget-categories ul li a {
  font-weight: 400;
  font-size: 16px;
  color: #55585B;
  position: relative;
  padding-left: 16px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--tp-ff-marcellus);
  width: 100%;
}

.tp-shop-widget-categories ul li a::after {
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  width: 6px;
  height: 6px;
  text-align: center;
  background-color: #E7E7E7;
  border-radius: 50%;
  transition: 0.3s;
}

.tp-shop-widget-categories ul li a:hover {
  color: var(--tp-common-black);
}

.tp-shop-widget-categories ul li a:hover::after {
  background-color: var(--tp-common-black);
}

.tp-shop-widget-categories ul li a:hover span {
  border-color: var(--tp-common-black);
}

.tp-shop-widget-categories ul li a span {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  padding: 5px 6px 3px;
  transition: 0.3s;
}

.tp-shop-widget-checkbox-circle {
  position: relative;
}

.tp-shop-widget-checkbox-circle span.red {
  background-color: #FF401F;
}

.tp-shop-widget-checkbox-circle span.dark_blue {
  background-color: #4666FF;
}

.tp-shop-widget-checkbox-circle span.oragnge {
  background-color: #FF9E2C;
}

.tp-shop-widget-checkbox-circle span.purple {
  background-color: #B615FD;
}

.tp-shop-widget-checkbox-circle span.yellow {
  background-color: #FFD747;
}

.tp-shop-widget-checkbox-circle span.green {
  background-color: #41CF0F;
}

.tp-shop-widget-checkbox-circle-list ul li {
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tp-shop-widget-checkbox-circle-list ul li:not(:last-child) {
  margin-bottom: 5px;
}

.tp-shop-widget-checkbox-circle-list ul li:hover .tp-shop-widget-checkbox-circle-number {
  border-color: var(--tp-common-black);
}

.tp-shop-widget-checkbox-circle-number {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  border-radius: 8px;
  padding: 5px 6px 3px;
  transition: 0.3s;
  border: 1px solid #EAEAEA;
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-widget-checkbox-circle .tp-shop-widget-checkbox-circle-self {
  position: absolute;
  content: "";
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  z-index: -1;
  border-radius: 50%;
  transition: 0.2s;
}

.tp-shop-widget-checkbox-circle input {
  display: none;
}

.tp-shop-widget-checkbox-circle input .single-widget-category input:checked+label::after {
  opacity: 1;
  visibility: visible;
}

.tp-shop-widget-checkbox-circle input:checked~label::before {
  visibility: visible;
  opacity: 1;
}

.tp-shop-widget-checkbox-circle label {
  font-size: 16px;
  color: #55585B;
  position: relative;
  padding-left: 26px;
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-widget-checkbox-circle label::before {
  position: absolute;
  content: url("../img/product/icons/check-2.svg");
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-common-white);
  transition: 0.1s;
}

.tp-shop-widget-checkbox-circle label:hover {
  cursor: pointer;
}

.tp-shop-widget-brand {
  margin-right: 40px;
}

.tp-shop-widget-brand-item {
  width: 50%;
  flex: 0 0 50%;
  margin-bottom: 30px;
}

.tp-shop-widget-size-item button {
  color: #5D5D63;
  margin-right: 3px;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 400;
  height: 60px;
  width: 60px;
  transition: 0.3s;
  line-height: 60px;
  text-align: center;
  font-family: var(--tp-ff-marcellus);
  border: 1px solid rgba(25, 25, 26, 0.1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-shop-widget-size-item button {
    font-size: 15px;
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-shop-widget-size-item button {
    height: 55px;
    width: 55px;
    line-height: 55px;
  }
}

.tp-shop-widget-size-item button:focus {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-shop-widget-size-item:hover button {
  border-color: var(--tp-common-black);
}

.tp-shop-top {
  position: relative;
}

.tp-shop-top-select .nice-select {
  border-radius: 0;
  font-size: 14px;
  height: 40px;
  line-height: 38px;
  padding: 0 25px;
  min-width: 204px;
  float: none;
  background-color: #F9F9F9;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  border: 1px solid rgba(2, 6, 38, 0.1);
}

@media (max-width: 767px) {
  .tp-shop-top-select .nice-select {
    max-width: 280px;
  }
}

.tp-shop-top-select .nice-select::after {
  right: 20px;
  color: #767A7D;
}

.tp-shop-top-select .nice-select.open .list {
  -webkit-transform: scale(1) translateY(0px);
  -moz-transform: scale(1) translateY(0px);
  -ms-transform: scale(1) translateY(0px);
  -o-transform: scale(1) translateY(0px);
  transform: scale(1) translateY(0px);
}

.tp-shop-top-select .nice-select .list {
  margin-top: 0;
  border-radius: 0;
  transform-origin: center center;
  -webkit-transform: scale(0.9) translateY(0px);
  -moz-transform: scale(0.9) translateY(0px);
  -ms-transform: scale(0.9) translateY(0px);
  -o-transform: scale(0.9) translateY(0px);
  transform: scale(0.9) translateY(0px);
  width: 100%;
  padding: 10px 0;
}

.tp-shop-top-select .nice-select .list .option {
  line-height: 1.2;
  min-height: inherit;
  padding-top: 5px;
  padding-bottom: 5px;
}

.tp-shop-top-filter {
  margin-left: 16px;
}

@media (max-width: 767px) {
  .tp-shop-top-filter {
    margin-left: 0;
    margin-top: 15px;
  }
}

@media (max-width: 767px) {
  .tp-shop-top-filter {
    margin-left: 15px;
    margin-top: 0;
  }
}

.tp-shop-top-result p {
  font-weight: 400;
  font-size: 16px;
  color: #818487;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--tp-ff-marcellus);
}

@media (max-width: 767px) {
  .tp-shop-top-result p {
    margin-bottom: 20px;
  }
}

.tp-shop-top-tab {
  margin-right: 22px;
}

@media (max-width: 767px) {
  .tp-shop-top-tab {
    margin-right: 10px;
  }
}

.tp-shop-top-tab .nav-tabs .nav-item .nav-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  color: #818487;
  border: 1px solid rgba(2, 6, 38, 0.1);
  border-radius: 0;
  margin-right: 6px;
}

.tp-shop-top-tab .nav-tabs .nav-item .nav-link svg {
  transform: translateY(2px);
}

.tp-shop-top-tab .nav-tabs .nav-item .nav-link.active {
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-product-action {
  position: absolute;
  right: 0px;
  top: 30px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .tp-product-action {
    top: 30px;
  }
}

.tp-product-action-blackStyle .tp-product-action-btn:hover {
  background-color: var(--tp-common-black);
}

.tp-product-action-btn {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 18px;
  color: var(--tp-common-black);
  background-color: white;
  border-bottom: 0;
  box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.2);
  border-radius: 50%;
  margin-bottom: 6px;
}

.tp-product-action-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.tp-product-action-btn:hover .tp-product-tooltip {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateX(-8px) translateY(-50%);
  -moz-transform: translateX(-8px) translateY(-50%);
  -ms-transform: translateX(-8px) translateY(-50%);
  -o-transform: translateX(-8px) translateY(-50%);
  transform: translateX(-8px) translateY(-50%);
}

.tp-product-tooltip {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 100%;
  font-weight: 500;
  font-size: 12px;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  display: inline-block;
  width: max-content;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: 0.3s;
}

.tp-product-tooltip::before {
  position: absolute;
  content: "";
  right: -4px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 8px solid var(--tp-common-black);
  border-bottom: 8px solid transparent;
}

.tp-product-tooltip-right {
  left: auto;
  right: 100%;
}

.tp-product-tooltip-right::before {
  left: auto;
  right: -4px;
  border-right: 0;
  border-left: 8px solid var(--tp-common-black);
}

.tp-shop-right-content {
  transition: 0.3s;
}

.tp-shop-right-item {
  overflow: hidden;
}

.tp-shop-right-item .tp-product-btn-box {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.tp-shop-right-item:hover .tp-shop-right-content {
  opacity: 0;
  visibility: hidden;
}

.tp-shop-right-item:hover .tp-product-btn-box {
  bottom: 0px;
}

.tp-shop-right-item:hover .tp-product-action {
  right: 30px;
  opacity: 1;
  visibility: visible;
}

.tp-shop-details-btn-box .tp-btn-cart {
  height: 60px;
  line-height: 60px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-shop-details-area {
    padding-top: 70px;
  }
}

.tp-shop-details-right-wrap {
  padding: 90px 100px 0px 40px;
}

@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-shop-details-right-wrap {
    padding: 90px 40px 0px 40px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-shop-details-right-wrap {
    padding: 50px 40px 0px 40px;
  }
}

@media (max-width: 767px) {
  .tp-shop-details-right-wrap {
    padding: 90px 15px 0px 15px;
  }
}

.tp-shop-details-scroll-height .tp-shop-details-right-wrap {
  height: 960px;
  overflow: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.tp-shop-details-categories span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #5D5D63;
  margin-bottom: 5px;
  display: inline-block;
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-details-title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  margin-bottom: 25px;
  letter-spacing: -0.4px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
(max-width: 767px) {
  .tp-shop-details-title {
    font-size: 35px;
  }
}

.tp-shop-details-price {
  padding-right: 160px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-shop-details-price {
    padding-right: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-shop-details-price {
    padding-right: 50px;
  }
}

@media (max-width: 767px) {
  .tp-shop-details-price {
    padding-right: 50px;
  }
}

.tp-shop-details-price span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-details-ratting span {
  color: var(--tp-common-black);
}

.tp-shop-details-reviews span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #5D5D63;
  padding-left: 10px;
  margin-left: 10px;
  font-family: var(--tp-ff-marcellus);
  position: relative;
}

.tp-shop-details-reviews span::after {
  position: absolute;
  top: 2px;
  left: 0;
  height: 18px;
  width: 1px;
  content: "";
  background-color: #D9D9D9;
}

.tp-shop-details-inventory {
  margin-bottom: 35px;
}

.tp-shop-details-msg {
  margin-bottom: 25px;
}

.tp-shop-details-msg p {
  color: #5D5D63;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-right: 10px;
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-details-title-sm {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-details-variation-button {
  white-space: none;
}

.tp-shop-details-variation-button img {
  width: 100%;
}

.tp-shop-details-size-list button {
  height: 50px;
  width: 85px;
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 5px;
  margin-right: 5px;
  line-height: 50px;
  text-align: center;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  border: 1px solid rgba(25, 25, 26, 0.1);
}

.tp-shop-details-size-list button:focus {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-shop-details-size-list button:hover {
  border-color: var(--tp-common-black);
}

.tp-shop-details-query-item {
  margin-bottom: 10px;
}

.tp-shop-details-query-item span {
  font-weight: 400;
  line-height: 1;
  margin-right: 10px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-details-query-item p {
  margin-bottom: 0;
  color: #55585B;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--tp-ff-marcellus);
}

@media (max-width: 767px) {
  .tp-shop-details-action-box {
    flex-wrap: wrap;
  }
}

.tp-shop-details-quantity {
  position: relative;
  width: 140px;
  margin-right: 10px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .tp-shop-details-quantity {
    margin-right: 0px;
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-shop-details-quantity {
    margin-right: 10px;
    margin-bottom: 0px;
  }
}

.tp-shop-details-quantity .tp-cart-plus,
.tp-shop-details-quantity .tp-cart-minus {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  left: 14px;
}

.tp-shop-details-quantity .tp-cart-plus:hover,
.tp-shop-details-quantity .tp-cart-minus:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-theme-primary);
}

.tp-shop-details-quantity .tp-cart-plus {
  left: auto;
  right: 14px;
}

.tp-shop-details-quantity .tp-cart-input[type=text] {
  height: 60px;
  line-height: 60px;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  background-color: transparent;
  color: var(--tp-common-black);
  border: 1px solid rgba(25, 25, 26, 0.12);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-plus,
.tp-cart-minus {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  color: var(--tp-common-black);
  position: absolute;
  top: 50%;
  left: 16px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tp-cart-plus svg,
.tp-cart-minus svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.tp-cart-plus:hover,
.tp-cart-minus:hover {
  cursor: pointer;
  color: var(--tp-theme-1);
}

.tp-cart-plus.tp-cart-plus,
.tp-cart-minus.tp-cart-plus {
  left: auto;
  right: 16px;
}

.tp-cart-plus.tp-cart-plus::after,
.tp-cart-minus.tp-cart-plus::after {
  left: 0;
  right: auto;
}

.tp-cart-input[type=text] {
  height: 34px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #DADCE0;
  background-color: var(--tp-common-white);
  padding: 0 30px;
  border-radius: 20px;
}

.tp-cart-input[type=text]:focus {
  outline: none;
}

.tp-product-details-tab-nav .nav-tabs {
  padding-bottom: 12px;
  border-bottom: 1px solid #E0E2E3;
}

@media (max-width: 767px) {
  .tp-product-details-tab-nav .nav-tabs {
    padding-bottom: 0;
  }
}

.tp-product-details-tab-nav .nav-tabs .nav-link {
  font-size: 20px;
  color: #A0A2A4;
  padding-left: 9px;
  padding-right: 7px;
  position: relative;
  font-family: var(--tp-ff-marcellus);
  background: none;
}

@media (max-width: 767px) {
  .tp-product-details-tab-nav .nav-tabs .nav-link {
    font-size: 15px;
  }
}

.tp-product-details-tab-nav .nav-tabs .nav-link:not(:first-child) {
  margin-left: 40px;
}

@media (max-width: 767px) {
  .tp-product-details-tab-nav .nav-tabs .nav-link:not(:first-child) {
    margin-left: 15px;
  }
}

.tp-product-details-tab-nav .nav-tabs .nav-link.active,
.tp-product-details-tab-nav .nav-tabs .nav-link:hover {
  color: var(--tp-common-black);
}

.tp-product-details-tab-nav .nav-tabs .nav-link.active::after,
.tp-product-details-tab-nav .nav-tabs .nav-link:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

@media (max-width: 767px) {
  .tp-product-details-tab-nav .nav-tabs .nav-link::after {
    position: absolute;
    content: "";
    left: auto;
    right: 0;
    bottom: -1px;
    width: 0%;
    height: 2px;
    background-color: var(--tp-common-black);
  }
}

@media (max-width: 767px) {
  .tp-product-details-tab-nav .nav-tabs span#productTabMarker {
    display: none !important;
  }
}

.tp-product-details-tab-line {
  position: absolute;
  bottom: 0;
  height: 1px;
  display: block;
  transition: 0.3s;
  background-color: var(--tp-common-black);
}

.tp-product-details-review-number {
  border: 1px solid #E0E2E3;
  padding: 35px 43px 33px 40px;
}

@media (max-width: 767px) {
  .tp-product-details-review-number {
    padding: 35px 25px 33px 25px;
  }
}

.tp-product-details-review-number-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 14px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-summery {
  margin-bottom: 12px;
}

.tp-product-details-review-summery-value span {
  font-size: 40px;
  font-weight: 500;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  margin-right: 8px;
}

.tp-product-details-review-summery-rating {
  margin-right: 3px;
}

.tp-product-details-review-summery-rating span {
  color: var(--tp-common-black);
  margin: 0px 1px;
}

.tp-product-details-review-summery-rating p {
  margin-left: 4px;
  font-size: 14px;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-rating-item>span {
  color: #A0A2A4;
  font-size: 15px;
  margin-right: 10px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-rating-bar {
  width: 260px;
  background-color: #EDEEEE;
  height: 10px;
  position: relative;
  margin-right: 12px;
}

@media (max-width: 767px) {
  .tp-product-details-review-rating-bar {
    width: 130px;
  }
}

.tp-product-details-review-rating-bar-inner {
  height: 100%;
  background-color: var(--tp-common-black);
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.tp-product-details-review-rating-percent span {
  font-size: 14px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-title {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 30px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-product-details-review-list {
    margin-bottom: 70px;
  }
}

@media (max-width: 767px) {
  .tp-product-details-review-list {
    padding-right: 0;
    margin-bottom: 70px;
  }
}

.tp-product-details-review-avater:not(:last-child) {
  margin-bottom: 35px;
}

.tp-product-details-review-avater-thumb {
  flex: 0 0 auto;
}

.tp-product-details-review-avater-thumb img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 20px;
}

.tp-product-details-review-avater-rating {
  line-height: 1;
  margin-bottom: 5px;
}

.tp-product-details-review-avater-rating span {
  font-size: 13px;
  margin-right: 2px;
  color: var(--tp-common-black);
}

.tp-product-details-review-avater-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 9px;
  display: inline-block;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-avater-meta {
  font-size: 14px;
  position: relative;
  padding-left: 11px;
  margin-left: 3px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-avater-meta::after {
  position: absolute;
  content: "";
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #A8ACB0;
}

.tp-product-details-review-avater-comment p {
  font-size: 14px;
  margin-bottom: 0;
  line-height: 1.4;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-form-title {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-form p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #5D5D63;
  margin-bottom: 25px;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-review-form-rating {
  margin-bottom: 40px;
}

.tp-product-details-review-form-rating p {
  margin-right: 8px;
  margin-bottom: 0;
}

.tp-product-details-review-form-rating-icon {
  line-height: 0;
}

.tp-product-details-review-form-rating-icon span {
  color: var(--tp-common-black);
  margin: 0px 1px;
}

.tp-product-details-review-input-wrapper {
  margin-bottom: 11px;
}

.tp-product-details-review-input-box {
  position: relative;
  margin-bottom: 20px;
}

.tp-product-details-review-input input {
  height: 56px;
  background: #FFFFFF;
  border: 1px solid #E0E2E3;
  font-size: 14px;
  color: var(--tp-common-black);
}

.tp-product-details-review-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #95999D;
}

.tp-product-details-review-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #95999D;
}

.tp-product-details-review-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #95999D;
}

.tp-product-details-review-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #95999D;
}

.tp-product-details-review-input input::placeholder {
  /* MODERN BROWSER */
  color: #95999D;
}

.tp-product-details-review-input textarea {
  height: 140px;
  resize: none;
}

.tp-product-details-review-input-title label {
  font-size: 14px;
  color: var(--tp-common-black);
}

.tp-product-details-review-remeber input {
  display: none;
}

.tp-product-details-review-remeber input:checked~label::after {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-product-details-review-remeber input:checked~label::before {
  visibility: visible;
  opacity: 1;
}

.tp-product-details-review-remeber label {
  font-size: 15px;
  color: #55585B;
  position: relative;
  padding-left: 26px;
  z-index: 1;
}

.tp-product-details-review-remeber label::after {
  position: absolute;
  content: "";
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #C3C7C9;
  z-index: -1;
  transition: 0.3s;
}

.tp-product-details-review-remeber label::before {
  position: absolute;
  content: url("../img/inner-shop/check.svg");
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-common-black);
  transition: 0.3s;
}

.tp-product-details-review-remeber label a:hover {
  color: var(--tp-theme-primary);
}

.tp-product-details-review-remeber label:hover {
  cursor: pointer;
}

.tp-product-details-dsc {
  padding-right: 30px;
}

@media (max-width: 767px) {
  .tp-product-details-dsc {
    padding-right: 0;
  }
}

.tp-product-details-dsc-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 15px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-dsc-title.sm {
  font-size: 22px;
}

.tp-product-details-dsc-content p {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  font-family: var(--tp-ff-marcellus);
}

.tp-product-details-dsc-list {
  margin-bottom: 50px;
}

.tp-product-details-dsc-list ul {
  margin-left: 30px;
}

.tp-product-details-dsc-list ul li {
  color: #5D5D63;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  list-style-type: none;
  font-family: var(--tp-ff-marcellus);
  padding-left: 15px;
  position: relative;
}

.tp-product-details-dsc-list ul li:not(:last-child) {
  margin-bottom: 20px;
}

.tp-product-details-dsc-list ul li::after {
  content: "";
  height: 4px;
  width: 4px;
  top: 6px;
  left: 0;
  position: absolute;
  border-radius: 50%;
  background-color: #5D5D63;
}

.tp-product-details-size-wrap .tp-product-details-size-row:nth-child(2n+1) {
  background-color: #F5F5F5;
}

.tp-product-details-size-wrap .tp-product-details-size-row:first-child ul li {
  color: var(--tp-common-black);
  font-size: 18px;
}

.tp-product-details-size-row ul li {
  width: 100%;
  height: 48px;
  line-height: 48px;
  list-style-type: none;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  color: #5D5D63;
  font-family: var(--tp-ff-marcellus);
  border-right: 5px solid #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-product-details-2-style {
    padding-top: 140px;
  }
}

@media (max-width: 767px) {
  .tp-product-details-2-style {
    padding-top: 130px;
  }
}

.tp-product-details-2-style .tp-shop-details-right-wrap {
  padding-top: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-product-details-2-style .tp-shop-details-right-wrap {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .tp-product-details-2-style .tp-shop-details-right-wrap {
    padding: 0;
  }
}

.tp-product-details-2-style .tp-btn-cart {
  padding: 0px 35px;
  height: 60px;
  line-height: 56px;
}

.tp-product-details-thumb-wrapper {
  margin-right: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-product-details-thumb-wrapper {
    margin-right: 0;
    margin-bottom: 70px;
  }
}

.tp-product-details-thumb-wrapper .nav-tabs {
  margin-right: 10px;
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link {
  width: 90px;
  height: 100px;
  position: relative;
  margin: 0px 4px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-product-details-thumb-wrapper .nav-tabs .nav-link {
    width: 75px;
    height: 85px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-product-details-thumb-wrapper .nav-tabs .nav-link {
    width: 80px;
    height: 90px;
  }
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link img {
  background-color: #F3F3F3;
}

@media (max-width: 767px) {
  .tp-product-details-thumb-wrapper .nav-tabs .nav-link {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link:not(:last-child) {
  margin-bottom: 10px;
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  top: 0;
  left: 0;
  transition: 0.3s;
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link.active::after,
.tp-product-details-thumb-wrapper .nav-tabs .nav-link:hover::after {
  border-color: var(--tp-common-black);
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #F3F3F3;
}

@media (max-width: 767px) {
  .tp-product-details-size-wrap {
    overflow-x: scroll;
  }
}

@media (max-width: 767px) {
  .tp-product-details-wrap-width {
    width: 840px;
  }
}

.tp-shop-top-text span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-shop-top-text-wrap {
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(25, 25, 26, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-shop-mob-space {
    padding: 15px 0px;
  }
}

.tp-shop-mob-search span {
  color: var(--tp-common-white);
}

.tp-shop-mob-search span svg {
  height: 20px;
  width: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-shop-sidebar {
    margin-right: 0;
  }
}

.tp-shop-sidebar-wrap {
  padding-left: 40px;
}

@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),
(max-width: 767px) {
  .tp-shop-sidebar-wrap {
    padding-left: 0;
  }
}

.tp-shop-popup-wrap {
  height: 500px;
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-shop-popup-wrap {
    width: 700px;
  }
}

@media (max-width: 767px) {
  .tp-shop-popup-wrap {
    width: 360px;
  }
}

.tp-shop-popup-content {
  padding: 40px;
}

.tp-shop-popup-img {
  position: relative;
  height: 100%;
  flex: 0 0 auto;
}

.tp-shop-popup-img img {
  height: 100%;
}

.tp-shop-popup-logo {
  margin-bottom: 60px;
}

.tp-shop-popup-text h4 {
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  margin-bottom: 13px;
  text-transform: uppercase;
  font-family: var(--tp-ff-aladin);
}

.tp-shop-popup-text p {
  font-weight: 400;
  font-size: 28px;
  color: #19191a;
  text-transform: uppercase;
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-shop-popup-text p {
    font-size: 20px;
  }
}

.tp-shop-popup-text span {
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #19191a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 55px;
  display: inline-block;
}

.tp-shop-popup-inputbox input {
  height: 50px;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #6e6e74;
  border: 1px solid rgba(25, 25, 26, 0.1);
  font-family: var(--tp-ff-marcellus);
  margin-bottom: 10px;
}

.tp-shop-popup-inputbox input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--tp-common-black);
}

.tp-shop-popup-inputbox input::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--tp-common-black);
}

.tp-shop-popup-inputbox input:-moz-placeholder {
  /* Firefox 4-18 */
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--tp-common-black);
}

.tp-shop-popup-inputbox input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--tp-common-black);
}

.tp-shop-popup-inputbox input::placeholder {
  /* MODERN BROWSER */
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--tp-common-black);
}

.tp-shop-popup-inputbox .tp-btn-black-square {
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-black);
  border: 2px solid transparent;
}

.tp-shop-popup-inputbox .tp-btn-black-square:hover {
  background-color: transparent;
  border-color: var(--tp-common-black);
  color: var(--tp-common-black);
}

.subscribe-popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1099;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  margin: 0 auto;
  text-align: center;
}

.subscribe-popup.show {
  visibility: visible;
  opacity: 1;
}

.subscribe-popup .close i {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 20px;
  cursor: pointer;
  font-weight: 400;
  color: var(--tp-common-black);
  transition: 0.3s;
}

.subscribe-popup .close:hover i {
  transform: rotate(180deg);
}

@keyframes zoomInOut {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.tp-shop-popup-logo img {
  width: 85px;
  height: 100%;
}

/*----------------------------------------*/
/*  7.4 cart css start
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-cart-area {
    padding-top: 150px;
  }
}

.tp-cart-header-product {
  padding-left: 30px !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-cart-list {
    overflow-x: scroll;
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .tp-cart-list {
    overflow-x: scroll;
    margin-right: 0;
  }
}

.tp-cart-list .table> :not(caption)>*>* {
  padding: 20px 0;
  box-shadow: none;
  vertical-align: middle;
}

@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: 767px) {
  .tp-cart-list table {
    width: 950px;
  }
}

.tp-cart-list thead {
  background-color: #f5f5f5;
}

.tp-cart-list thead th {
  font-weight: 500;
  font-size: 18px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  border: 0 !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.tp-cart-list tr td {
  border-color: #E0E2E3;
}

.tp-cart-list tr td .tp-cart-action-btn {
  font-weight: 400;
  font-size: 14px;
  color: #818487;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-list tr td .tp-cart-action-btn svg {
  transform: translateY(-1px);
}

.tp-cart-list tr td .tp-cart-action-btn:hover {
  color: #FF1826;
}

.tp-cart-list tr td.tp-cart-add-to-cart .tp-btn {
  border-radius: 0;
}

.tp-cart-list tbody tr:first-child td {
  padding-top: 30px !important;
}

.tp-cart-img {
  width: 78px;
  margin-right: 20px;
}

.tp-cart-img img {
  width: 78px;
  height: 100px;
  object-fit: cover;
}

.tp-cart-title a {
  margin-left: 20px;
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-price {
  width: 126px;
}

.tp-cart-price span {
  font-size: 16px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-quantity {
  width: 180px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .tp-cart-coupon {
    margin-bottom: 20px;
  }
}

.tp-cart-coupon-input-box label {
  font-size: 14px;
  margin-bottom: 7px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input input {
  background: #FFFFFF;
  border: 1px solid #D6D9DC;
  height: 46px;
  line-height: 46px;
  margin-right: 4px;
  max-width: 282px;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #818487;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #818487;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #818487;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #818487;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input input::placeholder {
  /* MODERN BROWSER */
  color: #818487;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-coupon-input button {
  font-weight: 500;
  font-size: 16px;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  padding: 9px 30px;
  border: 2px solid transparent;
}

.tp-cart-coupon-input button:hover {
  background-color: transparent;
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-cart-update-btn {
  font-weight: 500;
  font-size: 16px;
  padding: 9px 29px;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  border: 1px solid rgba(2, 6, 38, 0.1);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-update-btn:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-cart-checkout-wrapper {
  background: #f5f5f5;
  padding: 36px 24px 28px;
  margin-left: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .tp-cart-checkout-wrapper {
    margin-top: 50px;
    margin-left: 0;
  }
}

.tp-cart-checkout-top {
  padding-bottom: 13px;
  margin-bottom: 19px;
  border-bottom: 1px solid #E0E2E3;
}

.tp-cart-checkout-top span {
  font-size: 20px;
  font-weight: 500;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-checkout-shipping {
  padding-bottom: 16px;
  border-bottom: 1px solid #E0E2E3;
  margin-bottom: 15px;
}

.tp-cart-checkout-shipping-title {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 7px;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-checkout-shipping-option:not(:last-child) {
  margin-bottom: 4px;
}

.tp-cart-checkout-shipping-option input {
  display: none;
}

.tp-cart-checkout-shipping-option input:checked+label::after {
  border-color: var(--tp-common-black);
}

.tp-cart-checkout-shipping-option input:checked+label::before {
  opacity: 1;
  visibility: visible;
}

.tp-cart-checkout-shipping-option label {
  font-weight: 400;
  font-size: 14px;
  color: #161C2D;
  position: relative;
  padding-left: 25px;
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-checkout-shipping-option label:hover {
  cursor: pointer;
}

.tp-cart-checkout-shipping-option label span {
  color: var(--tp-common-black);
}

.tp-cart-checkout-shipping-option label::after {
  position: absolute;
  content: "";
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #BCBCBC;
  transition: 0.3s;
}

.tp-cart-checkout-shipping-option label::before {
  position: absolute;
  content: "";
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tp-common-black);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

.tp-cart-checkout-total {
  margin-bottom: 25px;
}

.tp-cart-checkout-total span {
  font-weight: 500;
  font-size: 18px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-cart-checkout-btn {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-black);
  display: inline-block;
  padding: 10px 30px;
  text-align: center;
  border: 2px solid transparent;
}

.tp-cart-checkout-btn:hover {
  background-color: transparent;
  color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-product-quantity {
  width: 100px;
  position: relative;
  border-radius: 20px;
}

.tp-cart-plus,
.tp-cart-minus {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  color: var(--tp-common-black);
  transition: 0.3s;
  position: absolute;
  top: 50%;
  left: 16px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tp-cart-plus svg,
.tp-cart-minus svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.tp-cart-plus:hover,
.tp-cart-minus:hover {
  cursor: pointer;
  color: var(--tp-theme-1);
}

.tp-cart-plus.tp-cart-plus,
.tp-cart-minus.tp-cart-plus {
  left: auto;
  right: 16px;
}

.tp-cart-plus.tp-cart-plus::after,
.tp-cart-minus.tp-cart-plus::after {
  left: 0;
  right: auto;
}

.tp-cart-input[type=text] {
  height: 34px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #f5f5f5;
  background-color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  padding: 0 30px;
  border-radius: 20px;
}

[dir=rtl] .tp-cart-input[type=text] {
  text-align: center;
}

.tp-cart-input[type=text]:focus {
  outline: none;
}

.cartmini__area {
  position: fixed;
  right: 0;
  top: 0;
  width: 320px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  background: var(--tp-common-white) none repeat scroll 0 0;
  z-index: 99999;
  scrollbar-width: none;
  transition: 0.3s;
}

.cartmini__area::-webkit-scrollbar {
  display: none;
}

.cartmini__area.cartmini-opened {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cartmini__wrapper {
  position: relative;
  min-height: 100%;
  padding-left: 25px;
  padding-right: 25px;
}

.cartmini__top-title {
  padding: 20px 0;
  border-bottom: 1px solid #E0E2E3;
}

.cartmini__top-title h4 {
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 0;
}

.cartmini__close {
  position: absolute;
  top: 17px;
  right: 0;
}

.cartmini__close-btn {
  background: transparent;
  color: var(--tp-common-black);
  font-size: 22px;
}

.cartmini__close-btn:hover {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.cartmini__shipping {
  padding: 15px 0;
  border-bottom: 1px solid #E0E2E3;
}

.cartmini__shipping .progress {
  height: 10px;
  border-radius: 0;
}

.cartmini__shipping .progress-bar {
  background-color: var(--tp-theme-1);
}

.cartmini__shipping p {
  margin-bottom: 5px;
  font-size: 16px;
}

.cartmini__shipping p span {
  color: red;
  font-weight: 600;
}

.cartmini__widget {
  height: calc(100vh - 380px);
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.cartmini__widget::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

.cartmini__widget-item {
  position: relative;
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid rgba(129, 129, 129, 0.2);
}

.cartmini__widget-item:last-child {
  border-bottom: 0;
}

.cartmini__thumb {
  border: 1px solid #E0E2E3;
  margin-right: 15px;
}

.cartmini__thumb img {
  width: 70px;
  height: auto;
}

.cartmini__title {
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 500;
}

.cartmini__title a:hover {
  color: var(--tp-theme-1);
}

.cartmini__content {
  padding-right: 15px;
}

.cartmini__content .tp-product-quantity {
  width: 75px;
  padding: 0;
}

.cartmini__content .tp-product-quantity .tp-cart-input[type=text] {
  height: 30px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #E0E2E3;
  background-color: var(--tp-common-white);
  padding: 0;
}

.cartmini__content .tp-product-quantity .tp-cart-plus,
.cartmini__content .tp-product-quantity .tp-cart-minus {
  width: 20px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  font-size: 13px;
  left: 3px;
}

.cartmini__content .tp-product-quantity .tp-cart-plus svg,
.cartmini__content .tp-product-quantity .tp-cart-minus svg {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
  width: 10px;
}

.cartmini__content .tp-product-quantity .tp-cart-plus::after,
.cartmini__content .tp-product-quantity .tp-cart-minus::after {
  display: none;
}

.cartmini__content .tp-product-quantity .tp-cart-plus {
  left: auto;
  right: 3px;
}

.cartmini__del {
  position: absolute;
  top: 15px;
  right: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: var(--tp-common-black);
  font-size: 14px;
}

.cartmini__del:hover {
  color: var(--tp-theme-1);
}

.cartmini__checkout {
  padding-top: 15px;
  padding-bottom: 85px;
  width: 100%;
  border-top: 2px solid #E0E2E3;
}

.cartmini__checkout-title h4 {
  font-size: 15px;
  display: inline-block;
  font-weight: 500;
  margin-bottom: 0;
  text-transform: capitalize;
}

.cartmini__checkout-title span {
  float: right;
  font-size: 15px;
  color: var(--tp-common-black);
  font-weight: 500;
}

.cartmini__price {
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-common-black);
}

.cartmini__quantity {
  font-size: 12px;
  font-weight: 500;
}

.cartmini__empty {
  margin-top: 150px;
}

.cartmini__empty img {
  margin-bottom: 30px;
}

.cartmini__empty p {
  font-size: 16px;
  color: var(--tp-common-black);
  margin-bottom: 15px;
}

.tp-cart-list .table tbody tr {
  border-bottom: 1px solid #d9d9d9;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-style: none;
}

/*----------------------------------------*/
/*  7.5 checkout css start
/*----------------------------------------*/
.tp-checkout-verify-item {
  margin-bottom: 40px;
}

.tp-checkout-verify-item:not(:last-child) {
  margin-bottom: 24px;
}

.tp-checkout-verify-reveal {
  font-size: 14px;
  margin-bottom: 0;
  display: inline-block;
  border: 1px dashed #AAB0B2;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  padding: 8px 26px;
  width: 100%;
}

.tp-checkout-verify-reveal button {
  color: var(--tp-common-black);
  position: relative;
}

.tp-checkout-verify-reveal button::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background-color: var(--tp-common-black);
}

.tp-checkout-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
  background-color: var(--tp-theme-primary);
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  text-align: center;
}

.tp-checkout-btn:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-checkout-input {
  margin-bottom: 20px;
}

.tp-checkout-input label {
  font-weight: 500;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-input label span {
  color: red;
}

.tp-checkout-input input,
.tp-checkout-input textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D5D8DB;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  height: 50px;
}

.tp-checkout-input input::-webkit-input-placeholder,
.tp-checkout-input textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-input input::-moz-placeholder,
.tp-checkout-input textarea::-moz-placeholder {
  /* Firefox 19+ */
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-input input:-moz-placeholder,
.tp-checkout-input textarea:-moz-placeholder {
  /* Firefox 4-18 */
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-input input:-ms-input-placeholder,
.tp-checkout-input textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-input input::placeholder,
.tp-checkout-input textarea::placeholder {
  /* MODERN BROWSER */
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-input input:focus,
.tp-checkout-input textarea:focus {
  border-color: var(--tp-common-black);
}

.tp-checkout-input textarea {
  height: 200px;
  resize: none;
}

.tp-checkout-input .nice-select {
  height: 50px;
  line-height: 48px;
  border-radius: 0;
  border: 1px solid #D5D8DB;
  color: var(--tp-common-black);
  float: none;
  padding: 0 26px;
}

.tp-checkout-input .nice-select::after {
  right: 26px;
}

.tp-checkout-input .nice-select.open .list {
  -webkit-transform: scale(1) translateY(0px);
  -moz-transform: scale(1) translateY(0px);
  -ms-transform: scale(1) translateY(0px);
  -o-transform: scale(1) translateY(0px);
  transform: scale(1) translateY(0px);
}

.tp-checkout-input .nice-select .list {
  margin-top: 0;
  border-radius: 0;
  transform-origin: center center;
  -webkit-transform: scale(0.9) translateY(0px);
  -moz-transform: scale(0.9) translateY(0px);
  -ms-transform: scale(0.9) translateY(0px);
  -o-transform: scale(0.9) translateY(0px);
  transform: scale(0.9) translateY(0px);
  width: 100%;
  padding: 12px 0;
}

.tp-checkout-input .nice-select .list .option {
  line-height: 1.2;
  min-height: inherit;
  padding-top: 5px;
  padding-bottom: 5px;
}

.tp-checkout-input .nice-select .list .option:hover {
  color: var(--tp-common-black);
}

.tp-checkout-option {
  margin-bottom: 4px;
}

.tp-checkout-option-wrapper {
  margin-top: 10px;
  margin-bottom: 17px;
}

.tp-checkout-option input {
  display: none;
}

.tp-checkout-option input:checked~label::after {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-checkout-option input:checked~label::before {
  visibility: visible;
  opacity: 1;
}

.tp-checkout-option label {
  font-size: 15px;
  color: #55585B;
  position: relative;
  padding-left: 26px;
  z-index: 1;
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-option label::after {
  position: absolute;
  content: "";
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #C3C7C9;
  z-index: -1;
  transition: 0.2s;
}

.tp-checkout-option label::before {
  position: absolute;
  content: url("../img/inner-shop/check.svg");
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-common-white);
  transition: 0.2s;
}

.tp-checkout-option label a:hover {
  color: var(--tp-common-black);
}

.tp-checkout-option label:hover {
  cursor: pointer;
}

.tp-checkout-bill-area {
  padding: 45px 40px 24px;
  background-color: #f5f5f5;
}

@media (max-width: 767px) {
  .tp-checkout-bill-area {
    padding: 45px 25px 24px;
  }
}

.tp-checkout-bill-title {
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 35px;
}

.tp-checkout-place {
  padding: 44px 50px 50px;
  background-color: #f5f5f5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-checkout-place {
    padding: 35px 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .tp-checkout-place {
    margin-top: 50px;
    padding: 44px 40px 40px;
  }
}

.tp-checkout-place-title {
  font-size: 26px;
  font-weight: 600;
  margin-right: 37px;
  margin-bottom: 30px;
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-payment {
  padding-bottom: 26px;
  margin-bottom: 24px;
  border-bottom: 1px solid #E0E2E3;
}

.tp-checkout-payment-item:not(:last-child) {
  margin-bottom: 10px;
}

.tp-checkout-payment-item.paypal-payment label {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.tp-checkout-payment-item input {
  display: none;
}

.tp-checkout-payment-item input:checked~label::after {
  border-color: var(--tp-common-black);
}

.tp-checkout-payment-item input:checked~label::before {
  opacity: 1;
  visibility: visible;
}

.tp-checkout-payment-item label {
  font-size: 14px;
  position: relative;
  padding-left: 27px;
  font-weight: 500;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-payment-item label:hover {
  cursor: pointer;
}

.tp-checkout-payment-item label::after {
  position: absolute;
  content: "";
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #BCBCBC;
  transition: 0.2s;
}

.tp-checkout-payment-item label::before {
  position: absolute;
  content: "";
  left: 3px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--tp-common-black);
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}

.tp-checkout-payment-item label img {
  margin-left: 14px;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.tp-checkout-payment-item label a {
  margin-left: 20px;
  position: relative;
}

.tp-checkout-payment-item label a::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 1px;
  background-color: var(--tp-common-black);
}

.tp-checkout-payment-desc {
  position: relative;
  padding-top: 10px;
  display: none;
}

.tp-checkout-payment-desc::after {
  position: absolute;
  content: "";
  left: 57px;
  top: 0;
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-transform: translateY(3px) rotate(45deg);
  -moz-transform: translateY(3px) rotate(45deg);
  -ms-transform: translateY(3px) rotate(45deg);
  -o-transform: translateY(3px) rotate(45deg);
  transform: translateY(3px) rotate(45deg);
}

.tp-checkout-payment-desc p {
  background-color: #fff;
  padding: 19px 30px;
  margin-left: 27px;
  font-size: 14px;
  line-height: 1.57;
  color: #55585B;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.tp-checkout-agree {
  margin-bottom: 24px;
}

@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),
(max-width: 767px) {
  .tp-checkout-area {
    padding-top: 150px;
  }
}

.tp-return-customer {
  display: none;
  margin-top: 14px;
  padding: 40px 40px;
  background-color: #f5f5f5;
}

.tp-return-customer-input {
  margin-bottom: 20px;
}

.tp-return-customer-input label {
  font-weight: 500;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-input label span {
  color: red;
}

.tp-return-customer-input input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D5D8DB;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  height: 50px;
}

.tp-return-customer-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-input input::-moz-placeholder {
  /* Firefox 19+ */
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-input input:-moz-placeholder {
  /* Firefox 4-18 */
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-input input::placeholder {
  /* MODERN BROWSER */
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-remeber input {
  display: none;
}

.tp-return-customer-remeber input:checked~label::after {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-return-customer-remeber input:checked~label::before {
  visibility: visible;
  opacity: 1;
}

.tp-return-customer-remeber label {
  font-size: 15px;
  color: #55585B;
  position: relative;
  padding-left: 26px;
  z-index: 1;
  font-family: var(--tp-ff-marcellus);
}

.tp-return-customer-remeber label::after {
  position: absolute;
  content: "";
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #C3C7C9;
  z-index: -1;
  transition: 0.2s;
}

.tp-return-customer-remeber label::before {
  position: absolute;
  content: url("../img/inner-shop/check.svg");
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-common-white);
  transition: 0.2s;
}

.tp-return-customer-remeber label a:hover {
  color: var(--tp-common-black);
}

.tp-return-customer-remeber label:hover {
  cursor: pointer;
}

.tp-return-customer-forgot a {
  font-weight: 400;
  font-size: 15px;
  color: var(--tp-common-black);
  position: relative;
  display: inline-block;
}

.tp-return-customer-forgot a::after {
  position: absolute;
  content: "";
  left: auto;
  right: 0;
  bottom: 4px;
  width: 0%;
  height: 1px;
  background-color: var(--tp-common-black);
  transition: 0.2s;
}

.tp-return-customer-forgot a:hover::after {
  left: 0;
  right: auto;
  width: 100%;
}

/*----------------------------------------*/
/*  7.15 order css start
/*----------------------------------------*/
.tp-order-details {
  padding: 70px 100px 55px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-order-details {
    padding: 70px 70px 55px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-order-details {
    padding: 70px 30px 55px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-order-details {
    padding: 70px 50px 55px;
  }
}

@media (max-width: 767px) {
  .tp-order-details {
    padding: 40px 30px 45px;
  }
}

.tp-order-details-icon {
  margin-bottom: 22px;
}

.tp-order-details-icon span {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 118px;
  text-align: center;
  font-size: 55px;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.tp-order-details-icon span svg {
  transform: translateY(-2px);
}

.tp-order-details-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--tp-common-white);
  margin-bottom: 7px;
}

.tp-order-details-content p {
  font-size: 16px;
  color: var(--tp-common-white);
  line-height: 1.38;
}

.tp-order-details-item {
  margin-bottom: 38px;
}

.tp-order-details-item-wrapper .row [class*=col-]:nth-child(2n) .tp-order-details-item {
  padding-left: 40px;
}

@media (max-width: 767px) {
  .tp-order-details-item-wrapper .row [class*=col-]:nth-child(2n) .tp-order-details-item {
    padding-left: 0;
  }
}

.tp-order-details-item h4 {
  font-size: 18px;
  color: var(--tp-common-white);
  margin-bottom: 0;
  font-weight: 400;
}

.tp-order-details-item p {
  font-weight: 700;
  font-size: 18px;
  color: var(--tp-common-white);
  margin-bottom: 0;
}

.tp-order-info-wrapper {
  padding: 42px 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-order-info-wrapper {
    padding: 42px 40px;
  }
}

@media (max-width: 767px) {
  .tp-order-info-wrapper {
    padding: 42px 30px;
  }
}

.tp-order-info-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
}

.tp-order-info-list ul li {
  list-style: none;
  padding: 15px 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tp-order-info-list ul li:not(:last-child) {
  border-bottom: 1px solid #E0E2E3;
}

.tp-order-info-list ul li span {
  font-size: 15px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-order-info-list ul li.tp-order-info-list-header {
  padding-top: 0;
  padding-bottom: 12px;
}

.tp-order-info-list ul li.tp-order-info-list-header h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.tp-order-info-list ul li.tp-order-info-list-desc p {
  font-size: 15px;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.tp-order-info-list ul li.tp-order-info-list-desc p span {
  font-size: 15px;
  font-weight: 500;
}

.tp-order-info-list ul li.tp-order-info-list-subtotal span:last-child {
  color: var(--tp-common-black);
}

.tp-order-info-list ul li.tp-order-info-list-shipping span input {
  display: none;
}

.tp-order-info-list ul li.tp-order-info-list-shipping span input:checked~label::after {
  border-color: var(--tp-common-black);
}

.tp-order-info-list ul li.tp-order-info-list-shipping span input:checked~label::before {
  opacity: 1;
  visibility: visible;
}

.tp-order-info-list ul li.tp-order-info-list-shipping span label {
  font-size: 14px;
  position: relative;
  padding-right: 27px;
}

.tp-order-info-list ul li.tp-order-info-list-shipping span label span {
  color: var(--tp-common-black);
}

.tp-order-info-list ul li.tp-order-info-list-shipping span label:hover {
  cursor: pointer;
}

.tp-order-info-list ul li.tp-order-info-list-shipping span label::after {
  position: absolute;
  content: "";
  right: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #BCBCBC;
  transition: 0.3s;
}

.tp-order-info-list ul li.tp-order-info-list-shipping span label::before {
  position: absolute;
  content: "";
  right: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tp-common-black);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

.tp-order-info-list ul li.tp-order-info-list-total {
  padding: 14px 0;
}

.tp-order-info-list ul li.tp-order-info-list-total span {
  font-size: 16px;
  font-weight: 500;
}

.tp-order-inner {
  background-color: var(--tp-common-white);
  box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .tp-wishlist-area {
    padding-top: 150px;
  }
}

/*----------------------------------------*/
/*  7.17 Profile CSS
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px),
only screen and (min-width: 576px) and (max-width: 767px) {
  .profile__tab {
    margin-right: 0;
    margin-bottom: 50px;
  }
}

.profile__tab nav .nav-tabs {
  padding: 0;
  border: 0;
  margin: 0;
  border: 1px solid #E0E2E3;
  padding: 20px 0;
}

.profile__tab nav .nav-tabs .nav-link {
  font-weight: 400;
  font-size: 16px;
  padding: 14px 0px;
  margin: 0px 30px;
  position: relative;
  border-radius: 0;
  text-align: left;
  border: 0;
  color: #5D5D63;
  font-family: var(--tp-ff-marcellus);
}

.profile__tab nav .nav-tabs .nav-link::after {
  position: absolute;
  top: 14px;
  left: -31px;
  height: 25px;
  width: 2px;
  content: "";
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
  background-color: var(--tp-common-black);
}

.profile__tab nav .nav-tabs .nav-link:not(:last-child) {
  border-bottom: 1px dashed #E0E2E3;
}

.profile__tab nav .nav-tabs .nav-link span {
  margin-right: 7px;
}

.profile__tab nav .nav-tabs .nav-link.active {
  color: var(--tp-common-black);
}

.profile__tab nav .nav-tabs .nav-link.active::after {
  opacity: 1;
  visibility: visible;
}

.profile__tab .tp-tab-menu {
  position: relative;
}

.profile__tab-content {
  padding: 35px 40px 40px;
  background-color: #f5f5f5;
}

.profile__info-title {
  font-size: 20px;
  margin-bottom: 25px;
  font-family: var(--tp-ff-marcellus);
}

.profile__input {
  margin-bottom: 25px;
  position: relative;
}

.profile__input-box h4 {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--tp-common-black-solid);
  margin-bottom: 10px;
}

.profile__input-box h4 span {
  color: var(--tp-theme-primary);
}

.profile__input-box p {
  font-size: 13px;
  color: var(--tp-common-white);
  opacity: 0.7;
  margin-bottom: 10px;
}

.profile__input>span {
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

[dir=rtl] .profile__input>span {
  left: auto;
  right: 20px;
}

.profile__input>span svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.profile__input input,
.profile__input textarea {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 25px;
  padding-left: 50px;
  border: 0;
  outline: 0;
  border: 1px solid #EAEAEF;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.profile__input input:focus,
.profile__input textarea:focus {
  border-color: var(--tp-theme-primary);
}

.profile__input textarea {
  line-height: 1.5;
  padding: 20px;
  resize: none;
  height: 200px;
  resize: none;
}

.profile__input .nice-select {
  width: 100%;
  float: none;
  height: 60px;
  border: 1px solid #EAEAEF;
  border-radius: 0;
  line-height: 58px;
  padding-left: 27px;
}

[dir=rtl] .profile__input .nice-select {
  padding-left: 0;
  padding-right: 27px;
}

.profile__input .nice-select .current {
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.profile__input .nice-select::after {
  right: 25px;
  color: var(--tp-common-black);
}

[dir=rtl] .profile__input .nice-select::after {
  left: 25px;
  right: auto;
}

.profile__input .nice-select.open .list {
  -webkit-transform: scale(1) translateY(0px);
  -moz-transform: scale(1) translateY(0px);
  -ms-transform: scale(1) translateY(0px);
  -o-transform: scale(1) translateY(0px);
  transform: scale(1) translateY(0px);
}

.profile__input .nice-select .list {
  width: 100%;
  border-radius: 0;
  margin-top: 0;
  padding: 13px 8px;
  transform-origin: center center;
  -webkit-transform: scale(0.9) translateY(0px);
  -moz-transform: scale(0.9) translateY(0px);
  -ms-transform: scale(0.9) translateY(0px);
  -o-transform: scale(0.9) translateY(0px);
  transform: scale(0.9) translateY(0px);
  font-family: var(--tp-ff-marcellus);
}

.profile__input .nice-select .list .option:hover {
  color: var(--tp-common-black);
}

.profile__password input {
  padding: 0 20px;
}

.profile__ticket {
  border: 1px solid #E0E2E3;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .profile__ticket {
    overflow-x: scroll;
  }
}

.profile__ticket table thead tr {
  background-color: transparent;
}

.profile__ticket table th {
  color: var(--tp-common-black);
  border-color: #E0E2E3;
  box-shadow: none;
  font-family: var(--tp-ff-marcellus);
}

.profile__ticket table td {
  color: var(--tp-common-black);
}

.profile__ticket table tbody>tr:first-child {
  background-color: transparent;
}

.profile__ticket table tbody>tr:not(:last-child) {
  border-bottom: 1px solid #E0E2E3;
}

.profile__ticket table tbody>tr td,
.profile__ticket table tbody>tr th {
  color: var(--tp-common-black);
  vertical-align: middle;
  font-family: var(--tp-ff-marcellus);
}

.profile__ticket table tbody>tr>th {
  padding-left: 15px;
  padding-right: 15px;
}

.profile__ticket table tbody>tr th[scope=row] {
  color: var(--tp-common-black);
}

.profile__ticket table tbody>tr td[data-info="status done"] {
  color: #08AF5C;
}

.profile__ticket table tbody>tr td[data-info="status pending"] {
  color: #6364DB;
}

.profile__ticket table tbody>tr td[data-info="status reply"] {
  color: #D93D1E;
}

.profile__ticket table tbody>tr td[data-info="status hold"] {
  color: #FFB422;
}

.profile__ticket table tbody>tr .tp-btn {
  padding: 7px 18px;
  background-color: #E0E2E3;
  color: var(--tp-common-black);
  font-weight: 500;
  min-width: 90px;
}

.profile__ticket table tbody>tr .tp-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.profile__ticket .table {
  margin-bottom: 0;
  --bs-table-bg: none;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .profile__ticket .table {
    width: 700px;
  }
}

.profile__ticket .table> :not(:first-child) {
  border-color: #EAEAEF;
  border-top-width: 1px;
}

.profile__ticket .table> :not(caption)>*>* {
  padding: 1rem 1.5rem;
  border: 0;
  box-shadow: none;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .profile__address-item {
    margin-bottom: 40px;
  }
}

.profile__address-title {
  font-size: 22px;
  margin-bottom: 20px;
  font-family: var(--tp-ff-marcellus);
}

.profile__address-icon span {
  display: inline-block;
  min-width: 45px;
  margin-right: 20px;
}

[dir=rtl] .profile__address-icon span {
  margin-right: 0;
  margin-left: 20px;
}

@media (max-width: 767px) {
  .profile__address-icon span {
    margin-bottom: 20px;
  }
}

.profile__address-icon span svg {
  width: 45px;
}

.profile__address-icon span svg path {
  fill: var(--tp-common-black);
}

.profile__address-content p {
  font-size: 14px;
  margin-bottom: 10px;
  font-family: var(--tp-ff-marcellus);
}

.profile__address-content p span {
  font-weight: 600;
  margin-right: 7px;
  color: var(--tp-common-black);
}

.profile__notification-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.profile__notification p {
  font-family: var(--tp-ff-marcellus);
}

.profile__notification-item .form-check-input {
  margin-top: 0;
  width: 40px;
  height: 20px;
  box-shadow: none;
}

.profile__notification-item .form-check-label {
  font-size: 16px;
  margin-left: 10px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

[dir=rtl] .profile__notification-item .form-check-label {
  margin-left: 0;
  margin-right: 10px;
}

.profile__notification-item .form-check-label:hover {
  cursor: pointer;
  color: var(--tp-common-black);
}

.profile__notification-item .form-check-input:checked {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.profile__btn .tp-btn {
  padding: 14px 39px;
  border: 1px solid #EAEAEF;
}

@media (max-width: 767px) {
  .profile__main-inner {
    margin-bottom: 20px;
  }
}

.profile__main-thumb {
  position: relative;
}

.profile__main-thumb img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 16px;
}

[dir=rtl] .profile__main-thumb img {
  margin-right: 0;
  margin-left: 16px;
}

@media (max-width: 767px) {
  .profile__main-thumb img {
    margin-bottom: 20px;
  }
}

.profile__main-thumb-edit input {
  display: none;
}

.profile__main-thumb-edit label {
  position: absolute;
  bottom: 2px;
  right: 12px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: var(--tp-common-black);
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0px 1px 2px rgba(25, 25, 26, 0.2);
}

[dir=rtl] .profile__main-thumb-edit label {
  right: 0;
  bottom: 0;
}

.profile__main-thumb-edit label i {
  margin-left: 2px;
}

.profile__main-thumb-edit label:hover {
  cursor: pointer;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

.profile__main-title {
  font-size: 24px;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.profile__main-content p {
  font-size: 14px;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.profile__main-content p span {
  color: var(--tp-common-black);
  font-weight: 500;
}

.profile__main-info-item {
  background-color: #FFF;
  text-align: center;
  padding: 27px 30px 25px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 767px) {
  .profile__main-info-item {
    margin-bottom: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .profile__main-info-item {
    padding: 22px 0 20px;
  }
}

.profile__main-info-icon {
  position: relative;
  margin-bottom: 15px;
}

.profile__main-info-icon>span {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.profile__main-info-icon>span svg {
  width: 60px;
}

.profile__main-info-icon>span svg path {
  fill: var(--tp-common-black);
}

.profile__main-info-icon .profile-icon-count {
  position: absolute;
  top: 2px;
  right: -8px;
  width: 26px;
  height: 26px;
  line-height: 21px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid #fff;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-black);
}

.profile__main-info-title {
  font-size: 18px;
  margin-bottom: 0;
  font-family: var(--tp-ff-marcellus);
}

.tp-logout-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 18px;
  text-align: center;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  border: 1px solid rgba(2, 6, 38, 0.12);
}

.tp-logout-btn:hover {
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
  background-color: var(--tp-common-black);
}

.tp-profile-input-wrapper {
  margin-bottom: 8px;
}

.tp-profile-input-box {
  position: relative;
  margin-bottom: 30px;
}

.tp-profile-input input {
  height: 56px;
  background: #FFFFFF;
  border: 1px solid #E0E2E3;
  font-size: 14px;
  color: var(--tp-common-black);
}

.tp-profile-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #95999D;
}

.tp-profile-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #95999D;
}

.tp-profile-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #95999D;
}

.tp-profile-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #95999D;
}

.tp-profile-input input::placeholder {
  /* MODERN BROWSER */
  color: #95999D;
}

.tp-profile-input textarea {
  height: 165px;
  resize: none;
}

.tp-profile-input-title label {
  font-size: 14px;
  padding: 0 5px;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-profile-input-eye {
  position: absolute;
  right: 26px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tp-profile-input-eye .open-eye {
  display: none;
}

.tp-profile-input-eye span {
  transition: 0.3s;
}

.tp-profile-input-eye:hover {
  cursor: pointer;
}

.tp-profile-input-eye:hover span {
  color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  7.14 Login CSS
/*----------------------------------------*/
.tp-login-wrapper {
  padding: 50px 60px 70px;
  background-color: #f5f5f5;
}

@media (max-width: 767px) {
  .tp-login-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.tp-login-title {
  font-weight: 500;
  font-size: 30px;
  margin-bottom: 4px;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-top p {
  font-weight: 400;
  font-size: 16px;
  color: #49535B;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-top p a {
  color: var(--tp-common-black);
  position: relative;
  display: inline-block;
}

.tp-login-top p a::after {
  position: absolute;
  content: "";
  left: auto;
  right: 0;
  bottom: 4px;
  width: 0%;
  height: 1px;
  background-color: var(--tp-common-black);
  transition: 0.3s;
}

.tp-login-top p a:hover::after {
  left: 0;
  right: auto;
  width: 100%;
}

.tp-login-option-item {
  margin-bottom: 10px;
}

.tp-login-option-item:not(:last-child) {
  margin-right: 10px;
}

.tp-login-option-item.has-google a {
  width: 240px;
}

.tp-login-option-item.has-google a img {
  margin-right: 7px;
}

.tp-login-option-item a {
  display: inline-block;
  width: 98px;
  height: 56px;
  line-height: 54px;
  text-align: center;
  border: 1px solid #E0E2E3;
  font-size: 16px;
  color: #041226;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-option-item a img {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

.tp-login-option-item a img.apple {
  -webkit-transform: translateY(-3px);
  -moz-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  -o-transform: translateY(-3px);
  transform: translateY(-3px);
}

.tp-login-option-item a:hover {
  border-color: var(--tp-common-black);
}

.tp-login-mail {
  position: relative;
  z-index: 1;
}

.tp-login-mail p {
  font-size: 15px;
  color: #55585B;
  margin-bottom: 0;
  padding: 0 20px;
  position: relative;
  display: inline-block;
  background-color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
}

.tp-login-mail p a:hover {
  color: var(--tp-common-black);
}

.tp-login-mail::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 12px;
  width: 100%;
  height: 1px;
  background-color: #E0E2E3;
  transition: 0.3s;
  z-index: -1;
}

.tp-login-input-wrapper {
  margin-bottom: 20px;
}

.tp-login-input-box {
  position: relative;
}

.tp-login-input-box:not(:last-child) {
  margin-bottom: 15px;
}

.tp-login-input input {
  height: 56px;
  background: #FFFFFF;
  border: 1px solid #E0E2E3;
  font-size: 14px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #95999D;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input input::-moz-placeholder {
  /* Firefox 19+ */
  color: #95999D;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input input:-moz-placeholder {
  /* Firefox 4-18 */
  color: #95999D;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input input:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: #95999D;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input input::placeholder {
  /* MODERN BROWSER */
  color: #95999D;
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input-title label {
  font-size: 14px;
  padding: 0 5px;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-login-input-eye {
  position: absolute;
  right: 26px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tp-login-input-eye .open-eye {
  display: none;
}

.tp-login-input-eye span {
  transition: 0.3s;
}

.tp-login-input-eye:hover {
  cursor: pointer;
}

.tp-login-input-eye:hover span {
  color: var(--tp-common-black);
}

.tp-login-remeber input {
  display: none;
}

.tp-login-remeber input:checked~label::after {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
}

.tp-login-remeber input:checked~label::before {
  visibility: visible;
  opacity: 1;
}

.tp-login-remeber label {
  font-size: 15px;
  position: relative;
  padding-left: 26px;
  z-index: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
}

.tp-login-remeber label::after {
  position: absolute;
  content: "";
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #C3C7C9;
  z-index: -1;
  transition: 0.3s;
}

.tp-login-remeber label::before {
  position: absolute;
  content: url("../img/inner-shop/check.svg");
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-common-white);
  transition: 0.3s;
}

.tp-login-remeber label a:hover {
  color: var(--tp-theme-primary);
}

.tp-login-remeber label:hover {
  cursor: pointer;
}

.tp-login-forgot a {
  font-weight: 400;
  font-size: 15px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-marcellus);
  position: relative;
  display: inline-block;
}

.tp-login-forgot a::after {
  position: absolute;
  content: "";
  left: auto;
  right: 0;
  bottom: 4px;
  width: 0%;
  height: 1px;
  background-color: var(--tp-common-black);
  transition: 0.3s;
}

.tp-login-forgot a:hover::after {
  left: 0;
  right: auto;
  width: 100%;
}

.tp-login-btn {
  font-weight: 500;
  font-size: 16px;
  padding: 14px 30px;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-marcellus);
  background-color: var(--tp-common-black);
  border: 2px solid var(--tp-common-black);
}

.tp-login-btn:hover {
  background-color: #fff;
  color: var(--tp-common-black);
}


/*----------------------------------------*/
/*  7.24 tp custom css
/*----------------------------------------*/
.tp-text-black {
  color: var(--tp-common-black);
}

.tp-text-white {
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  7.24 update-css css
/*----------------------------------------*/
.tp-about-2-right-thumb {
  border-radius: 10px;
}

/*----------------------------------------*/
/*  7.8 error css start
/*----------------------------------------*/
.tp-error-title {
  font-weight: 700;
  font-size: 64px;
  margin-bottom: 50px;
  color: var(--tp-common-black);
}

.tp-error-title-sm {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tp-common-black);
}

.tp-error-content p {
  font-weight: 400;
  font-size: 18px;
  color: #57575a;
  margin-bottom: 30px;
}

.tp-error-wrapper img {
  margin-bottom: 55px;
}

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

.button-group {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  /* aligns buttons to the right */
  align-items: center;
}

.custom-btn {
  background-color: #786456;
  color: #FAF3E3 !important;
  border: 2px solid transparent;
  /* reserve space for hover border */
  padding: 16px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Segoe UI', sans-serif;
  cursor: pointer;
  line-height: 1.2;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.custom-btn:hover {
  transform: translateY(-1px);
  background-color: #FFF8ED;
  color: #786456 !important;
  border-color: #786456;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}


.custom-btn2 {
  background-color: #d2ad7b;
  /* or #e1c49a */
  color: #FAF3E3;
  border: none;
  padding: 12px 40px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600 !important;
  font-family: 'QanelasDEMO-Thin';
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 100px;
  /* Center the button in its container */
}

.custom-btn3 {
  background-color: #d2ad7b;
  /* or #e1c49a */
  color: #FAF3E3;
  border: none;
  padding: 12px 40px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600 !important;
  font-family: 'QanelasDEMO-Thin';
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 580px;
  /* Center the button in its container */
}


.custom-btn2:hover {
  background-color: #b9905f;
  /* slightly darker */
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .custom-btn3 {
    margin-right: 230px !important;
  }
}

@media (max-width: 767px) {
  .custom-btn2 {
    padding: 10px 30px !important;
    margin-right: 200px !important;
  }
}



.custom-btn3:hover {
  background-color: #b9905f;
  /* slightly darker */
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.anim-fill {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
}

.anim-fill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: #786456;
  z-index: -1;
  transition: width 0.4s ease;
}

.anim-fill:hover {
  color: #fff;
}

.anim-fill:hover::before {
  width: 100%;
}




.logo {
  font-size: 35px;
  color: black;
}

@media (max-width: 768px) {
  .logo {
    font-size: 20px;
    color: black;
  }
}

@font-face {
  font-family: 'Caviar_Dreams_Bold';
  src: url('../fonts/Caviar_Dreams_Bold.ttf') format('truetype');
}

.logo2 {
  width: 85px;
}

.footer-bg-text {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 200px;
  font-weight: 500;
  font-family: 'QanelasDEMO-Thin';
  color: rgba(0, 0, 0, 0.1);
  /* Light black */
  letter-spacing: 20px;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .footer-bg-text {
    font-size: 25px;
    bottom: 90px;
    color: rgba(0, 0, 0, 0.4);
    /* Light black */
  }
}

.tp-copyright-2-social {
  display: flex;
  justify-content: center;
  /* center horizontally */
  gap: 16px;
  /* space between buttons */
  flex-wrap: wrap;
  /* allow wrap if absolutely needed */
  margin-top: 20px;
}

.footer-social-link {
  color: #fff;
  border: 1px solid #666;
  padding: 10px 20px;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  /* keep words in one line */
}

.footer-social-link:hover {
  background-color: #fff;
  color: #000;
}

.cladding-section {
  padding: 0px 0px !important;
  max-width: 1300px;
  margin: auto;
  margin-top: 0px !important;
}

.cladding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.titles h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: #42332A;
}

.titles p {
  font-size: 24px;
  color: #777;
  margin: 5px 0 0;
}

.label-and-swatches {
  text-align: right;
}

.cladding-label {
  display: inline-block;
  background-color: #FAF3E3;
  border: 1.5px solid #42332A;
  border-radius: 20px;
  padding: 10px 24px;
  font-size: 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cladding-swatches {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.swatch {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  border: none;
}

.swatch:hover {
  transform: scale(1.05);
}

.swatch.active {
  border: 5px solid white;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
  z-index: 1;
}



.cladding-image-slider {
  position: relative;
  width: 80%;
  overflow: hidden;
}

.slider-inner {
  position: relative;
  width: 100%;
  height: auto;
}

.slider-inner img {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 1;
  z-index: 1;
  margin-top: 20px;
}

.cladding-image-slider,
.slider-inner {
  height: auto;
  min-height: 500px;
  /* or adjust to whatever your images need */
  position: relative;
}

html {
  scroll-behavior: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rotatelogo {
  width: 150px;
}

.price-wrap {
  display: flex;
  flex-direction: column;
  /* Stack vertically */
  align-items: flex-end;
  /* Align everything to the right */
  gap: 10px;
  margin-bottom: 25px;
  margin-right: 170px;
}

.price-tag {
  background: #fff;
  padding: 8px 25px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
}

.monthly {
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
}

.currency-icon {
  width: 17px;
  height: auto;
}

.color-gray {
  color: #999;
}

@media (max-width: 767px) {
  .price-wrap {
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    align-items: flex-end;
    /* Align everything to the right */
    gap: 10px;
    margin-bottom: 25px;
    margin-right: 252px;
  }
}

/* Apply margin-left only on screens 1200px and up */
@media (min-width: 1200px) {
  .tp-footer-2-area {
    margin-left: -80px;
  }

  .logo2 {
    margin-left: 80px;
  }

  .tp-footer-2-widget-text {
    margin-left: 80px;
  }
}

/* For smaller screens, no margin */
@media (max-width: 1199px) {
  .tp-footer-2-area {
    margin-left: 0;
  }

  .logo2 {
    margin-left: 0px;
  }

  .tp-footer-2-widget-text {
    margin-left: 0px;
  }
}





@media (max-width: 768px) {

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  .first-col {
    width: auto;
  }
}


.pod-use-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.use-tag {
  background-color: #b3ac9c;
  /* Adjusted to match your style */
  color: #e9e3d6;
  border: 1px solid #8b7f6b;
  padding: 10px 25px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.use-tag:hover {
  background-color: white;
  color: #393939;
}


@media (max-width: 768px) {
  .pod-use-tags {
    justify-content: center;
  }
}

.accordion-buttons span img {
  width: 45px;
  /* Adjust width */
  height: 45px;
  /* Adjust height */
  object-fit: contain;
  margin-right: 10px;
  /* Optional: add spacing between icon and text */
  vertical-align: middle;
}

.price-number {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  /* Adjust size as needed */
  letter-spacing: 0.5px;
}



.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  /* spacing between the logos */
}

.logo-wrapper img {
  height: 50px;
  /* Adjust height as needed */
  width: auto;
}

.logo-right-img {
  /* Optional specific styling */
  height: 40px;
}

@media (min-width: 992px) {
  .footer-col-2-1 {
    margin-top: -20px;
    margin-left: -10px;
  }

}

@media (max-width: 767px) {
  .tp-instagram-thumb {
    display: none !important;
  }
}

@media (max-width: 767px) {

  .tp-hero-2-title.text-1,
  .tp-hero-2-title.text-2 {
    font-size: 34px;
    letter-spacing: 0.5px;
  }

  .tp-hero-2-title.text-1 {
    margin-top: 50px;
  }

  .tp-hero-2-title.text-2 {
    padding-left: 20px !important;
  }

  .tp-hero-2-content p {
    font-size: 11px;



  }

  .tp-btn-white.anim-fill {
    font-size: 11px;
    padding: 1px 12px !important;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
  }

  .tp-btn-white svg {
    width: 16px;
    height: 16px;
    margin-left: 6px;
  }

  .tp-video-title {
    font-size: 50px !important;
  }
}

.tp-video-wrap {
  will-change: transform;
}


@media (max-width: 768px) {
  .pods-heading {
    font-size: 15px;
  }

  .pods-subheading {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .pods-heading {
    font-size: 10px;
  }

  .pods-subheading {
    font-size: 8px;
  }
}

@media (max-width: 768px) {

  .project-details-1-right,
  .project-details-1-right-wrap {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}



.cladding-section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.cladding-image-slider {
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
  height: auto;
}

.slider-inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.slider-inner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ========== POD Cladding Section ========== */
.pod-cladding-section {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: 1280px;
  box-sizing: border-box;
}

.pod-cladding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.pod-cladding-titles h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.pod-cladding-titles p {
  font-size: 14px;
  color: #555;
}

.pod-cladding-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pod-cladding-label {
  font-weight: bold;
  font-size: 16px;
}

.pod-cladding-swatches {
  display: flex;
  gap: 10px;
}

.pod-swatch {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border 0.3s ease;
}

.pod-swatch.active {
  border-color: #000;
}

.pod-cladding-slider {
  position: relative;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  border-radius: 10px;
}

.pod-slider-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.pod-slider-inner img {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}


/* Responsive */
@media (max-width: 768px) {
  .pod-cladding-section {
    padding: 30px 15px;
  }

  .pod-cladding-header {
    gap: 15px;
  }

  .pod-cladding-titles h2 {
    font-size: 22px;
  }

  .pod-cladding-label {
    font-size: 14px;
  }

  .pod-swatch {
    width: 36px;
    height: 36px;
  }
}

.footer-top1 {
  margin-top: 100px !important;
  /* Ensures no extra space above the footer */
}

.popular-uses-section {
  padding: 60px 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 200px;
}

.popular-uses-header h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 5px;
}

.popular-uses-header p {
  font-size: 24px;
  color: #666;
  margin-bottom: 25px;
}

.popular-uses-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.popular-uses-tags button {
  padding: 10px 18px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 50px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.popular-uses-tags button:hover {
  border-color: #000;
  background-color: #f5f5f5;
}

.popular-uses-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* Make first column taller if needed */
.gallery-item.tall {
  grid-row: span 2;
}

.discover-section {
  padding: 60px 20px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.discover-header h2 {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #42332A;
}

.discover-header span {
  color: #5A493E;
  font-weight: 400;
}

.discover-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  justify-content: center;
}

.discover-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 25px;
  border: 2px solid #786456;
  border-radius: 16px;
  text-decoration: none;
  color: #FAF3E3;
  font-weight: 500;
  font-size: 25px;
  background-color: #786456;
  transition: all 0.3s ease;
}


.discover-card:hover {
  background-color: #FAF3E3;
  color: #786456;
  border-color: #786456;
}


.pd-custom-area {
  padding-top: 250px !important;
  padding-bottom: 80px !important;
}

.roof-card-grid {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
  margin-left: 110px;
}

.roof-card {
  background-color: #E9E3D6 !important;
  border: 1px solid #e6e4df;
  border-radius: 12px;
  text-align: center;
  width: 175px;
  height: 140px;
  padding: 15px 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: box-shadow 0.3s ease;
}

.roof-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.roof-card img {
  max-width: 70px;
  margin-top: 13px;
}

.roof-card1 {
  background-color: #E9E3D6;
  border: 1px solid #e6e4df;
  border-radius: 12px;
  text-align: center;
  width: 175px;
  height: 140px;
  padding: 15px 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: box-shadow 0.3s ease;
}

.roof-card1:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.roof-card1 img {
  max-width: 75px;
  margin-top: 10px;
}

.roof-card1 span {
  font-family: 'Qanelas', sans-serif;
  /* Update font-family to match your brand */
  font-size: 15px;
  display: block;
  padding-top: 5px;
}

.roof-card2 {
  background-color: #E9E3D6;
  border: 1px solid #e6e4df;
  border-radius: 12px;
  text-align: center;
  width: 175px;
  height: 140px;
  padding: 15px 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: box-shadow 0.3s ease;
}

.roof-card2:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.roof-card2 img {
  max-width: 105px;
  margin-top: 15px;
}

.roof-card2 span {
  font-family: 'Qanelas', sans-serif;
  /* Update font-family to match your brand */
  font-size: 15px;
  display: block;
  padding-top: 10px;
}

.roof-card3 {
  background-color: #E9E3D6;
  border: 1px solid #e6e4df;
  border-radius: 12px;
  text-align: center;
  width: 175px;
  height: 140px;
  padding: 15px 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: box-shadow 0.3s ease;
}

.roof-card3:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.roof-card3 img {
  max-width: 85px;
  margin-top: 4px;
}

.roof-card3 span {
  font-family: 'Qanelas', sans-serif;
  /* Update font-family to match your brand */
  font-size: 15px;
  display: block;
  padding-top: 5px;
}

.roof-card4 {
  background-color: #E9E3D6;
  border: 1px solid #e6e4df;
  border-radius: 12px;
  text-align: center;
  width: 175px;
  height: 140px;
  padding: 15px 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: box-shadow 0.3s ease;
}

.roof-card4:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.roof-card4 img {
  max-width: 65px;
  margin-top: 6px;
}

.roof-card4 span {
  font-family: 'Qanelas', sans-serif;
  /* Update font-family to match your brand */
  font-size: 15px;
  display: block;
  padding-top: 20px;
}

.roof-card span {
  font-family: 'Qanelas', sans-serif;
  /* Update font-family to match your brand */
  font-size: 15px;
  display: block;
  padding-top: 10px;
}

@media (max-width: 768px) {
  .roof-card-grid {
    display: none;
  }
}


@media (max-width: 480px) {
  .roof-card-grid {
    display: none;
  }
}

.section-title-wrapper {
  margin-bottom: 60px;
}

.section-title-wrapper h1.main-heading {
  font-size: 60px;
  color: #42332A;
}

.section-title-wrapper .description {
  font-size: 22px;
  color: #5A493E;
  line-height: 1.6;
}

.section-title-wrapper {
  font-size: 32px;
  font-family: 'QanelasDEMO-Thin';
  font-weight: 400;
  color: #a0a0a0;
  margin-top: 20px;
}

/* 🔻 Responsive Font Scaling for Mobile */
@media (max-width: 768px) {
  .section-title-wrapper h1.main-heading {
    font-size: 28px;
    padding: 0 20px 14px;
  }

  .section-title-wrapper .description {
    font-size: 15px;
    text-align: justify;
  }

  .section-title-wrapper {
    font-size: 20px;
    padding: 0 20px 0px;
  }
}

.tp-service-2 img {
  border-radius: 20px;
  /* Change the value as needed */
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {

  /* Reduce bottom spacing on accordion section */
  .tp-service-2-area {
    padding-bottom: 0px !important;
    /* was probably pb-150 */
  }

  /* Reduce top margin of section-title-wrapper if it's pushing down */
  .section-title-wrapper {
    margin-top: 0 !important;
    margin-bottom: 30px;
    /* Adjust as needed */
  }
}

/* Mobile override */
@media (max-width: 768px) {
  .pod-model-viewer {
    height: 400px;
    /* or any height that suits mobile */
  }
}

.options-section {
  font-family: 'QanelasDEMO-Thin';
  padding: 60px 20px;
  background-color: #FFF8ED;
  color: #444;
  padding-right: 150px;
}

.section-title {
  font-size: clamp(30px, 2vw + 18px, 60px);
  margin-bottom: 30px;
  font-weight: 300;
  text-align: center;
  align-items: center;

}

.section-title .bold {
  font-weight: 400;
  color: #42332A;
  font-family: "Qanelas", "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: clamp(20px, 2vw + 18px, 60px);
}

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  background-color: #E9E3D6;
}

.accordion-toggle {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 45px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
}

.accordion-toggle .label {
  flex: 1;
  font-weight: 600;
  font-size: 25px;
  color: #42332A;
  font-family: 'Qanelas-UltraLight';
}

.accordion-toggle .description {
  flex: 2;
  font-weight: 400;
  color: #5A493E;
  margin-left: 20px;
  font-size: 16px;
  font-family: 'qanelas-light';
}

.accordion-toggle .icon {
  font-size: 20px;
  color: #5A493E;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 14px;
  color: #5A493E;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  padding: 15px 10px;
}

.accordion-item.active .icon {
  transform: rotate(180deg);
}

/* Center Section Container */
.feature-highlight {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  text-align: center;
}

/* Header */
.feature-header h1 {
  font-size: clamp(30px, 2vw + 18px, 60px);
  font-weight: 500;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-family: "Qanelas", "Montserrat", system-ui, -apple-system, sans-serif;
}

.feature-header h2 {
  font-size: 22px;
  color: #888;
  margin-bottom: 30px;
  font-family: "Qanelas", "Montserrat", system-ui, -apple-system, sans-serif;
}

/* Button */
.cta-btn-2 {
  background-color: #786456;
  color: white;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-bottom: 50px;
}

.cta-btn span {
  font-weight: 400;
  color: #ccc;
  margin-left: 5px;
}

/* Image & Hotspot Container */
.image-container {
  position: relative;
  display: inline-block;
  border-radius: 16px;
  overflow: hidden;

  padding: 20px;
}

.image-container img {
  width: 100%;
  max-width: none;
  /* removes restriction */
  display: block;
  border-radius: 12px;
}


/* Hotspots */
.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
  color: black;
  font-weight: bold;
  font-size: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hotspot::before {
  content: "+";
}

/* Tooltip */
.hotspot-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #E9E3D6;
  border-radius: 12px;
  padding: 20px 25px;
  max-width: 320px;
  z-index: 10;
  display: none;
  text-align: left;
}

.hotspot-tooltip h4 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.hotspot-tooltip p {
  font-size: 14px;
  color: #555;
}

.close-tooltip {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .responsive-3d-model {
    height: 60px !important;
  }

  .cladding-section {
    height: 20vh !important;
  }
}


@media (max-width: 480px) {
  .cladding-section {
    height: 90vh !important;
  }
}

.btn-3d-toggle {
  background-color: #786456;
  /* or #e1c49a if that matches your palette */
  color: #FFF8ED;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
}

.btn-3d-toggle:hover {
  transform: translateY(-3px) scale(1.015);
}

.pods-range {
  padding-top: 180px;
  padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .pods-range {
    padding-top: 80px;
    padding-bottom: 10px;
  }
}

.section-title {
  font-size: 56px;
  font-weight: 600;
  margin: 0 0 4px;
}

.section-subtitle {
  font-size: 48px;
  font-weight: 400;
  color: var(--text-light);
  margin: 0 0 48px;
}

.pods-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ───────────────── Card ───────────────── */
.pod-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.pod-card:hover {
  transform: translateY(-4px);
}

.card-image {
  position: relative;
  height: 360px;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
}

.pod-name {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--brand-beige);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  z-index: 2;
}

.card-action {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--brand-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 2;
}

.card-action svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.card-action:hover {
  background: #b89056;
}

.card-body {
  padding: 32px;
  border-top: 1px solid #f1f1f1;
}

.price-tag {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 40px;
  background: #f7f7f7;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.monthly {
  display: block;
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 20px;
}

.pod-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
}

/* ───────────────── Responsiveness ───────────────── */
@media (max-width: 768px) {

  .pods-range {
    padding: 120px 0;
  }

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

  .section-subtitle {
    font-size: 28px;
  }

  .card-image {
    height: 340px;
  }

  .pod-name {
    font-size: 36px;
  }
}

.pods-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.pod-card-link {
  width: calc(50% - 15px);
  /* Two per row with gap accounted */
  text-decoration: none;
  color: inherit;
}

/* 🔽 For mobile devices (max-width 768px), 1 card per row */
@media screen and (max-width: 768px) {
  .pod-card-link {
    width: 100%;
  }
}

/* Targeting all nav links inside .tp-main-menu-content */
.tp-main-menu-content ul li a {
  font-size: 40px !important;
  /* adjust as needed */
}


/* The main section container */
.bespoke-section {
  /* Use flexbox to center content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  /* Adjust height as needed */
  padding: 40px 20px;
  text-align: center;
}

/* Content wrapper for controlling width */
.content-wrapper {
  max-width: 700px;
  /* Prevents text from becoming too wide on large screens */
}

/* Styling for the main heading */
.bespoke-section h1 {
  font-size: 3.5rem;
  /* Large font size */
  font-weight: 700;
  /* Bold */
  font-family: 'QanelasDEMO-Thin';
  color: #42332A;
  /* Dark grey, almost black */
  margin-top: 0;
  margin-bottom: 20px;
}

/* Styling for the paragraph text */
.bespoke-section p {
  font-size: 25px;
  font-family: 'QanelasDEMO-Thin';
  color: #5A493E;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* Styling for the button */
.cta-button {
  display: inline-block;
  background-color: #786456;
  color: #FAF3E3;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  /* reserve space so border doesn't jump */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.cta-button:hover {
  transform: translateY(-1px);
  background-color: #FFF8ED;
  color: #786456;
  border-color: #786456;
}


/* Media query for smaller screens */
@media (max-width: 768px) {
  .bespoke-section h1 {
    font-size: 26px;
    margin-top: 0px;
  }

  .bespoke-section p {
    font-size: 0.9rem;
  }
}

@font-face {
  font-family: 'QanelasDEMO-Thin';
  src: url('../fonts/qanelas-light.ttf') format('truetype');
}

@font-face {
  font-family: 'Caviar_Dreams_Bold';
  src: url('../fonts/Caviar_Dreams_Bold.ttf') format('truetype');
}


/* Avoid expensive 'transition: all' on a big section */
#viewerSection {
  transition: none;
}

/* Let the browser skip painting off-screen subtree (Chrome/Edge/Safari) */
#viewerSection {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
  /* reserve space; prevent layout shift */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  model-viewer {
    --model-viewer-auto-rotate-speed: 0;
  }
}

@font-face {
  font-family: 'Qanelas-UltraLight';
  font-display: swap !important;
  /* prevents invisible text */
  src: url('../fonts/Qanelas-UltraLight.otf') format('truetype');
}


.exterior-finish {
  font-family: 'QanelasDEMO-Thin';
  font-weight: 600 !important;
  line-height: 1.8;
}

.price-title {
  font-family: 'QanelasDEMO-Thin';
  font-size: 50px !important;
  padding-bottom: 20px;
}




:root {
  --nook-bg: #f9f8f4;
  --nook-ink: #0f0f10;
  --nook-muted: #e9e7e7;
  /* tab background */
  --nook-accent: #0c2142;
  /* subtle dark blue like screenshot */
  --nook-border: #efefef;
}

.nook {
  background: var(--nook-bg);
  padding: 56px 0 80px;
}

.nook * {
  box-sizing: border-box
}

.nook__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1024px) {
  .nook__title {
    white-space: nowrap;
    display: inline-block;
  }
}

.nook__title {
  font-family: "Qanelas", "Montserrat", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.35em;
  text-align: center !important;
  font-weight: 500;
  font-size: clamp(22px, 3.3vw, 45px);
  color: #42332A;
  margin: 0 0 48px;
}

.nook__title {
  display: block;
  width: 100%;
  text-align: center !important;
  margin: 0 auto !important;
  transform: none !important;
}


/* Tabs */
.nook__tabs {
  display: flex;
  justify-content: center;
  /* keeps them centered */
  gap: 16px;
  /* spacing between tabs */
  margin: 0 auto 28px;
  max-width: 100%;
  /* let it stretch */
  flex-wrap: nowrap;
  /* prevent wrapping to a new line */
}

.nook__tab {
  appearance: none;
  border: 0;
  border-radius: 4px;
  padding: 16px 18px;
  background: var(--nook-muted);
  color: var(--nook-ink);
  font-family: "Qanelas", "Montserrat", system-ui, -apple-system, sans-serif;
  letter-spacing: .3em;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  flex: 1;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
  opacity: .9;
  text-align: center;
}

.nook__tab:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.nook__tab.is-active {
  background: #f4f2f2;
  box-shadow: inset 0 0 0 1px #dedcdc;
}

/* Panels */
.nook__panel {
  border-top: 1px solid var(--nook-border);
  padding-top: 36px;
}

.nook__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.nook__speclist {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  font-family: "Qanelas", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 2.2;
  font-size: 18px;
  color: #333;
  letter-spacing: .06em;
}

.nook__speclist span {
  color: #666;
  margin-right: 10px;
}

.nook__price {
  margin: 12px 0 0;
}

.nook__price-from {
  font-family: "Qanelas", "Inter", sans-serif;
  letter-spacing: .35em;
  color: #6d6d6d;
  font-size: 14px;
}

.nook__price-amount {
  display: inline-block;
  font-size: clamp(32px, 4.4vw, 48px);
  letter-spacing: .12em;
  margin: 6px 8px 0 0;
  font-weight: 600;
  font-family: 'QanelasDEMO-Thin';
}

.nook__price-note {
  text-transform: uppercase;
  letter-spacing: .35em;
  color: #1a1a1a;
}

.nook__image {
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
}

.nook__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/9;
  /* keeps a clean letterbox feel */
}

/* Bespoke */
.nook__grid--bespoke {
  grid-template-columns: 0.95fr 1.6fr;
  align-items: start;
}

.nook__copy {
  color: #333;
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .02em;
}

.nook__slice img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

/* Extras */
.nook__extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(18px, 4vw, 42px) clamp(18px, 4vw, 64px);
  padding-block: 8px;
}

.nook-extra {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}

.nook-extra__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--nook-accent);
}

.nook-extra__label {
  font-family: "Qanelas", "Montserrat", sans-serif;
  letter-spacing: .18em;
  font-size: 16px;
}

/* Visibility helpers */
.nook__panel[hidden] {
  display: none;
}

.nook__panel.is-visible {
  display: block;
}

/* Responsive */
@media (max-width: 1024px) {
  .nook__grid {
    grid-template-columns: 1fr;
  }

  .nook__grid--bespoke {
    grid-template-columns: 1fr;
  }

  .nook__image img {
    aspect-ratio: 3/2;
  }
}

@media (max-width: 640px) {
  .nook__tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .nook__title {
    letter-spacing: .38em
  }
}



.currency-icon-price {
  width: 45px;
  height: 45px;
  vertical-align: middle;
  padding-bottom: 9px;
}



@font-face {
  font-family: 'Qanelas-Medium';
  font-display: swap;
  /* prevents invisible text */
  src: url('../fonts/Qanelas-Medium.ttf') format('truetype');
}
html {
  background-color: var(--bg-color);
}

body {
  height: auto;          /* important */
  min-height: 100vh;     /* ok for full-screen sections */
  display: block;        /* important */
  overflow-x: hidden;
}

/* --- General Styles & Fonts (Unchanged) --- */

:root {
  --bg-color: #FFF8ED;
  --text-color: #333;
  --timeline-color: #e0e0e0;
  --accent-color: #333;
  --card-bg: #ffffff;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}

body {
  font-family: 'QanelasDEMO-Thin' !important;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  overflow-x: hidden;
}

/* --- Main Process Timeline Container --- */
.process-container {
  width: 90%;
  max-width: 1300px;
  margin: 50px auto;
  position: relative;

}

/* --- Timeline Bar Elements --- */
/* NEW: Container for the timeline bars */
.timeline {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  z-index: 1;
}

/* NEW: The grey background track */
.timeline-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #747474;
}

/* NEW: The black progress bar that animates */
.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  /* Initially 0, will be set by JS */
  background-color: #42332A;
}

/* --- Individual Step Styling --- */
.process-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
  width: 100%;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.process-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.step-content,
.step-image-container {
  width: calc(50% - 40px);
  box-sizing: border-box;
}

/* MODIFIED: Changed from pseudo-element to a real element for JS targeting */
.timeline-dot {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #42332A;
  border: 2px solid var(--timeline-color);
  z-index: 2;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  /* NEW: transition for active state */
}

/* NEW: Active state for the dot when it's passed */
.timeline-dot.active {
  background-color: #42332A;
  border-color: #42332A;
}

.step-content {
  padding-right: 40px;
  text-align: right;
}

.step-number {
  display: inline-block;
  background-color: #786456;
  color: #FFF8ED;
  padding: 8px 15px;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 12px;
  margin-bottom: 15px;
}

.step-content h2 {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #42332A;
  font-family: 'QanelasDEMO-Thin' !important;
}

.step-content p {
  font-size: 1.20rem;
  margin: 25px 0 0 0;
  line-height: 1.6;
  color: #5A493E;
  font-family: 'QanelasDEMO-Thin' !important;
}

.step-image-container {
  padding-left: 40px;
}

.step-image-container img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: var(--shadow);
}

/* All other sections (Payment, CTA) and responsive styles remain the same */
.payment-section,
.cta-section,
.payment-grid,
.payment-card,
.cta-content {
  /* Styles from previous answer are unchanged */
  text-align: center;
  padding: 48px 5%;
}

.payment-section h2 {
  font-size: 2.8rem;
  font-weight: 600;
  font-family: 'QanelasDEMO-Thin' !important;
  color: #42332A;
}

.payment-card {
  background-color: #E9E3D6;
  padding: 45px;
  border-radius: 16px;
  flex-basis: 400px;
  text-align: left;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: var(--delay);
}

.payment-card.is-visible,
.cta-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.payment-card span {
  font-size: 0.6rem;
  font-weight: 600;
  color: #FAF3E3;
  background-color: #786456;
  padding: 9px 9px;
  border-radius: 6px;
}

.payment-card h3 {
  font-size: 1.1rem;
  margin: 20px 0 10px 0;
  font-weight: 600;
  font-family: 'QanelasDEMO-Thin' !important;
  color: #42332A;
}

.payment-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5A493E;
  font-family: 'QanelasDEMO-Thin' !important;
}

.cta-section {
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  border-radius: 20px;
  padding: 80px;
  box-sizing: border-box;
  background-image: url('https://images.unsplash.com/photo-1600585152225-358b5c1e0ae8?q=80&w=2070&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  color: white;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-size: 3rem;
  margin: 0 0 15px 0;
  font-family: 'QanelasDEMO-Thin' !important;
}

.cta-content p {
  font-size: 1.2rem;
  margin: 0;
  font-family: 'QanelasDEMO-Thin' !important;
}

@media (max-width: 992px) {
  .timeline {
    left: 20px;
    transform: translateX(-50%);
  }

  /* keep line centered with dot */
  .process-step {
    flex-direction: column;
  }

  .process-step .step-content {
    order: 1;
    text-align: left;
    padding: 20px 0 0 40px;
  }

  .process-step .step-image-container {
    order: 2;
    padding-left: 40px;
    padding-top: 12px;
  }

  .timeline-dot {
    left: 20px;
    transform: translate(-50%, -50%);
    top: 1px;
  }

  /* center dot on the line */
  .step-content,
  .step-image-container {
    width: 100%;
  }
}

@media (max-width: 768px) {

  .process-content h2,
  .payment-section h2,
  .cta-content h2 {
    font-size: 24px;
  }

  .payment-grid {
    display: grid;
    gap: 22px;
  }

  /* add vertical spacing between stacked cards */
}




/* Apply only on desktop screens (≥1200px, you can adjust breakpoint) */
@media (min-width: 1200px) {

  .payment-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: nowrap;
  }

  .tp-video-area {
    margin-bottom: 200px !important;
  }

  .tp-service-2-index {
    margin-top: 200px !important;
  }

  .accordion-item {
    padding-left: 30px !important;
  }

  .accordion {
    padding-top: 30px !important;
    margin-left: 150px !important;
  }

  .section-title .bold {
    margin-left: 150px !important;
    font-family: "Qanelas-Medium", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(20px, 2vw + 18px, 60px)
  }

  .footer-bg-text {
    padding-right: 120px !important;
  }
}


/* ===== Pods Pricing (SCOPED) ===== */
.pods-pricing {
  --text: #121212;
  --sub: #838383;
  --line: #e9e9e9;
  --bg: #FFF8ED;
  background: #FFF8ED;
  /* <-- put this line back */
  color: var(--text);
  font-family: 'QanelasDEMO-Thin' !important;
}

.pods-pricing * {
  box-sizing: border-box;
}

.pods-pricing .pod-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.pods-pricing .section-title {
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 0 18px;
  font-size: 44px;
  text-align: left;
  align-items: left;
  color: #393939;
}

.pods-pricing .section-title em {
  font-style: italic;
  color: var(--sub);
}

/* Grid */
.pods-pricing .price-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  border-top: 1px solid var(--line);
  align-items: center;
  min-height: 72px;
}

.pods-pricing .price-grid:last-of-type {
  border-bottom: 1px solid var(--line);
}

.pods-pricing .price-grid--head {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  min-height: 94px;
  align-items: flex-start !important;
}

.pods-pricing .price-grid--head .cell {
  padding: 18px 16px 22px;
}

.pods-pricing .price-grid--head .cell .th {
  font-weight: 600;
  color: #3A3A3A;
}

.pods-pricing .price-grid--head .cell .sub {
  color: var(--sub);
  line-height: 1.2;
  font-size: 13px;
}

/* Cells */
.pods-pricing .cell {
  padding: 16px;
  font-size: 16px;
}

.pods-pricing .cell--range {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
  color: #3A3A3A;
}

.pods-pricing .range-ico {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 28px;
  opacity: .85;
}

/* Prices with AED icon */
.pods-pricing .price {
  font-weight: 500;
  white-space: nowrap;
}

.pods-pricing .aed {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  display: inline-block;
  object-fit: contain;
  /* If your SVG is single-color and you need solid black, keep this: */
  filter: contrast(0) brightness(0);
}

/* Row hover */
.pods-pricing .price-grid:not(.price-grid--head):hover {
  background: #FFF8ED;
}

/* Bottom note */
.pods-pricing .note {
  color: var(--sub);
  font-size: 22px;
  line-height: 1.5;
  margin: 28px 0 0;
}

/* Responsive */
@media (max-width: 900px) {

  .pods-pricing .price-grid,
  .pods-pricing .price-grid--head {
    grid-template-columns: 1.2fr repeat(2, 1fr);
  }

  .pods-pricing .price-grid>.cell:nth-child(4),
  .pods-pricing .price-grid>.cell:nth-child(5),
  .pods-pricing .price-grid--head>.cell:nth-child(4),
  .pods-pricing .price-grid--head>.cell:nth-child(5) {
    display: none;
  }
}

@media (max-width: 560px) {
  .pods-pricing .section-title {
    font-size: 26px;
  }

  .pods-pricing .price-grid,
  .pods-pricing .price-grid--head {
    grid-template-columns: 1fr 1fr;
  }

  .pods-pricing .price-grid--head .cell:first-child {
    display: none;
  }

  /* hide "Range" on tiny screens */
  .pods-pricing .cell {
    padding: 14px;
  }

  .pods-pricing .cell--range {
    padding-left: 0;
  }

  .pods-pricing .price-grid--head>.cell:nth-child(n+3) {
    display: none;
  }

  /* keep only first size group */
}


/* ===== HERO (scoped) ===== */
.pods-hero {
  background: #FFF8ED;
  font-family: 'QanelasDEMO-Thin';
}

.pods-hero .pod-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 64px 20px 24px;
}

.pods-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.pods-hero__copy {
  flex: 1 1 auto;
}

/* Title & strapline */
.pods-hero__title {
  margin: 0 0 40px;
  font-family: 'Qanelas-Medium', Arial, sans-serif;
  font-weight: 500;
  /* adjust to your loaded weights */
  font-size: 72px;
  /* desktop */
  line-height: 1.25em;
  color: #42332A;
}

.pods-hero__strapline {
  margin: 0 0 28px;
  font-weight: 300;
  font-size: 44px;
  /* big grey line */
  font-family: 'Qanelas-Medium', Arial, sans-serif;
  line-height: 1.05;
  color: #716862;
}

.pods-hero__strapline2 {
  margin: 0 0 28px;
  font-weight: 300;
  font-size: 44px;
  /* big grey line */
  font-family: 'Qanelas-Medium', Arial, sans-serif;
  line-height: 1.05;
  color: #42332A;
}

.pods-hero__desc {
  margin: 0;
  font-size: 22px;
  font-family: 'Qanelas-Regular', Arial, sans-serif;
  line-height: 1.5;
  color: #5A493E;
  max-width: 720px;
  text-align: justify;
}

/* Responsive */
@media (max-width: 1100px) {
  .pods-hero__title {
    font-size: 60px;
  }

  .pods-hero__strapline {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .pods-hero__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pods-hero__share {
    text-align: left;
    margin-top: 16px;
  }

  .pods-hero__title {
    font-size: 44px;
  }

  .pods-hero__strapline {
    font-size: 32px;
  }

  .pods-hero__desc {
    font-size: 18px;
  }
}

/* Make BOTH sections pure white and remove any gaps showing parent bg */
.pods-hero,
.pods-pricing {
  background: #FFF8ED !important;
  /* <-- key line for pricing */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* keep your internal spacing with padding instead of outer margins */
.pods-hero .pod-container {
  padding: 64px 20px 24px;
}

.pods-pricing .pod-container {
  padding: 32px 20px 64px;
}

/* if your theme adds spacing between consecutive sections, kill it */
.pods-hero+.pods-pricing {
  margin-top: 0 !important;
}

/* (optional) if a wrapper is adding background peeks via margin collapsing */
#smooth-content> :first-child {
  margin-top: 0 !important;
}


/* kill the gap color between pricing and footer */
.pods-pricing {
  margin-bottom: 0 !important;
  background: #fff;
}

.pods-pricing+.footer-top1 {
  margin-top: 0 !important;
}

/* many themes add top margins to footer or generic sections */
.footer-top1 {
  margin-top: 0 !important;
}

.tp-footer-2-area {
  margin-top: 0 !important;
}

/* if your theme uses a generic rule like section + section { margin-top: ... } */
.pods-hero+.pods-pricing,
.pods-pricing+.tp-footer-2-area,
.pods-hero+.tp-footer-2-area {
  margin-top: 0 !important;
}

/* keep breathing room with padding instead of margins */
.pods-pricing .pod-container {
  padding-bottom: 64px;
}



/* Meta row under card titles */
.tp-project-2-area .pods-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  /* space between items */
  margin: 10px 0 0;
  /* sit right under the h4 */
  padding: 0;
  list-style: none;
  color: #c8c8c8;
  /* light grey like screenshot */
  font: 500 16px/1.2 'QanelasDEMO-Thin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}

.tp-project-2-area .pods-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.tp-project-2-area .pods-meta .ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.tp-project-2-area .pods-meta .ico svg {
  width: 100%;
  height: 100%;
  display: block;
  color: currentColor;
  /* icons follow text color */
}

/* If your cards are on a dark image, brighten on hover */
.tp-project-2-item:hover .pods-meta {
  color: #e9e9e9;
}

/* Responsive tweak */
@media (max-width:768px) {
  .tp-project-2-area .pods-meta {
    gap: 18px;
    font-size: 14px;
  }

  .tp-project-2-area .pods-meta .ico {
    width: 20px;
    height: 20px;
  }
}



/* PANEL */
.pods-included__panel {
  background: #EDE6DB;
  /* slightly lighter like your screenshot */
  padding: 80px 0;
  padding-bottom: 15px;
}

/* CENTERED CONTAINER (keeps heading + grid aligned on same center line) */
.pod-container {
  width: 100%;
  max-width: 1400px;
  /* tune this to match your site width */
  margin: 0 auto;
  padding: 0 28px;
  /* small horizontal padding for small screens */
  box-sizing: border-box;
}

/* HEADING */
.nook__title {
  font-family: "Qanelas", "Montserrat", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  /* smaller than original to visually center */
  text-align: center;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 48px);
  color: #42332A;
  margin: 0 0 48px;
  display: block;
  width: 100%;
}

/* GRID: centered block and centered cells */
.pods-included__grid {
  list-style: none;
  margin: 65px auto;
  /* center the grid inside .pod-container */
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  /* 8 columns */
  gap: 36px 52px;
  /* row gap / column gap */
  justify-items: center;
  /* center content inside each cell */
  align-items: start;
  text-align: center;
}

/* FEATURE (icon + label) */
.pods-included__grid .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 160px;
  /* constrains each cell so labels wrap nicely */
  box-sizing: border-box;
}

/* ICON */
.pods-included__grid .ico-img {
  display: block;
  width: 68px;
  /* icon size used in screenshot */
  height: 68px;
  object-fit: contain;
}

/* LABEL style */
.pods-included__grid .label {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: #8e8a88;
  /* muted grey text */
}

/* RESPONSIVE: reduce columns on smaller screens */
@media (max-width: 1200px) {
  .pods-included__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 40px;
  }

  .pods-included__grid .feature {
    max-width: 180px;
  }
}

@media (max-width: 800px) {
  .pods-included__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 36px;
  }

  .nook__title {
    font-size: clamp(24px, 5.5vw, 34px);
    letter-spacing: 0.14em;
    margin-bottom: 36px;
    font-family: 'Qanelas-Medium', sans-serif;
  }
}

@media (max-width: 420px) {
  .pods-included__grid {
    grid-template-columns: 1fr;
    gap: 20px 10px;
    padding: 0 12px;
  }

  .pods-included__grid .ico-img {
    width: 45px;
    height: 45px;
  }

  .pods-included__grid .label {
    font-size: 14px !important;
  }
}





/* Labels */
.pods-included .label {
  color: #5A493E;
  font-size: 15px;
  line-height: 1.35;
}

/* Wood strip image */
.pods-included__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .pods-included__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .pods-included__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 16px;
  }
}

@media (max-width: 480px) {
  .pods-included__grid {
    grid-template-columns: 1fr;
  }

  .pods-included__title {
    letter-spacing: .28em;
    font-size: 18px;
  }
}


.tp-subsidiaries-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  /* spacing between logos */
  flex-wrap: wrap;
}

.subsidiary-logo-link {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.subsidiary-logo-link:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

.subsidiary-logo {
  max-height: 90px;
  /* adjust size */
  width: auto;
}


/* ===== EXACT Pods by tér footer ===== */
.pods-footer-exact {
  --bg: #E9E3D6;
  /* the beige in your screenshot */
  --ink: #232323;
  /* title/primary */
  --muted: #5F5954;
  /* menu/secondary */
  --line: #00000033;
  /* hairline color */
  background: #E9E3D6;
  color: var(--ink);
  padding: 95px 0 28px !important;
  /* vertical spacing to match shot */
  font-family: "Qanelas", "AvenirLTStd-Light", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pfx-brand {
  text-align: center;
}

.pfx-brand img {
  display: block;
  margin: 0 auto;
  width: clamp(520px, 62vw, 940px);
  /* big logo */
  height: auto;
}

/* hairline with ~120px side insets exactly */
.pfx-line {
  width: calc(100% - 240px);
  height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(to right, transparent 0, var(--ink) 12%, var(--ink) 88%, transparent 100%);
  opacity: .35;
}

/* centered wide-spaced menu */
.pfx-menu {
  width: clamp(560px, 62vw, 980px);
  margin: 34px auto 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pfx-menu a {
  font-weight: 400;
  text-decoration: none;
  color: var(--muted);
  font-size: clamp(16px, 1.15vw, 19px);
  letter-spacing: .01em;
  transition: color .2s ease;
}

.pfx-menu a:hover {
  color: var(--ink);
}

/* bottom row: left legal + right social */
.pfx-bottom {
  width: calc(100% - 240px);
  /* aligns with hairline edges */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pfx-legal {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pfx-privacy {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
}

.pfx-privacy:hover {
  color: var(--ink);
}

.pfx-copy {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1;
}

.pfx-copy b {
  font-weight: 500;
  color: var(--ink);
}

/* social icons bottom-right */
.pfx-social {
  display: flex;
  align-items: center;
  gap: 28px;
}

.pfx-social a {
  color: var(--ink);
  opacity: .92;
  transition: opacity .2s, transform .15s;
}

.pfx-social a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.pfx-social svg {
  display: block;
}

/* mobile tweaks while preserving look */
/* ===== Pods by tér footer — MOBILE EXACT (<=680px) ===== */
@media (max-width: 680px) {

  .pods-footer-exact {
    padding: 48px 0 64px;
    /* extra bottom so the FAB doesn't overlap */

  }

  /* Logo */
  .pfx-brand img {
    width: clamp(280px, 68vw, 560px);
    margin: 0 auto 12px;
  }

  /* Hairline + bottom row inset equally */
  .pfx-line,
  .pfx-bottom {
    width: calc(100% - 64px);
    /* ~32px inset each side like your shot */
    margin-left: auto;
    margin-right: auto;
  }

  /* Menu: single row, evenly spaced, centered band */
  .pfx-menu {
    width: calc(100% - 64px);
    margin: 20px auto 26px;
    display: flex;
    justify-content: space-between;
    /* even spacing like the screenshot */
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    text-align: center;
    font-family: Qanelas-Regular, sans-serif;
  }

  .pfx-menu a {
    font-size: 16px;
  }

  /* Bottom: stack + center everything */
  .pfx-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }

  .pfx-legal {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .pfx-privacy,
  .pfx-copy {
    font-size: 14px;
    font-family: Qanelas-Regular, sans-serif;
  }

  /* Social icons centered */
  .pfx-social {
    align-self: center;
    gap: 20px;
    margin-top: 6px;
  }

  .pfx-social a {
    width: 40px;
    height: 40px;
  }
}


.tp-hero-2-area,
.tp-about-2-area,
.tp-service-2-index,
.tp-video-area,
.tp-project-2-area,
.tp-instagram-area,
.tp-subsidiaries-area,
.discover-section {
  background: #FFF8ED !important;
}

.custom-btn.anim-fill,
.custom-btn.anim-fill:hover,
.custom-btn.anim-fill:focus,
.custom-btn.anim-fill:active {
  color: #FAF3E3 !important;
}

/* New Fonts Added */

@font-face {
  font-family: qanelas-light;
  font-display: swap;
  src: url('../fonts/qanelas-light.ttf') format('truetype')
}

@font-face {
  font-family: Qanelas-UltraLight;
  font-display: swap;
  src: url('../fonts/Qanelas-UltraLight.otf') format('opentype')
}


@font-face {
  font-family: Qanelas-Regular;
  font-display: swap;
  src: url('../fonts/Qanelas-Regular.otf') format('opentype')
}

/* Center wrapper */
.tp-about-2-cta {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  /* space below the paragraph */
}

/* Button style to match your screenshot */
.btn-pricing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 10px;
  /* adjust to 12–14px if you want more pill */
  background: #7B624F;
  /* your brown */
  color: #fff !important;
  font-family: 'QanelasDEMO-Thin', sans-serif;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Icon: make the black SVG appear white on the brown bg */
.btn-pricing .btn-icon {
  width: 20px;
  height: 20px;
  filter: invert(1) brightness(2);
}

/* Hover/focus */
.btn-pricing:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  opacity: .95;
}

.btn-pricing:focus {
  outline: 2px solid rgba(123, 98, 79, .4);
  outline-offset: 2px;
}

/* Optional: hide the old tiles if they’re still in DOM */
.roof-card-grid {
  display: none !important;
}


/* spacing to match your layout */
.section-pad {
  padding: 125px 0 40px;
}

/* center everything and prevent external layout/animations from interfering */
.pods-intro__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* <-- hard center */
  text-align: center;
  /* <-- align text center */
  padding: 0 24px;
}

/* ONE-LINE, perfectly centered title on desktop */
.pods-intro__title {
  margin: 0 0 12px 0;
  font-family: 'Qanelas-Medium', sans-serif;
  font-display: swap;
  font-weight: 500;
  color: #42332A;
  letter-spacing: -2.8px;
  line-height: 1.1;
  transform: none !important;
  /* neutralize split/scroll transforms */
  position: static !important;
  left: auto !important;
  right: auto !important;

  /* sizing: keep it on one line on wide screens, scale down as needed */
  font-size: clamp(35px, 4.2vw, 60px);
}

/* force single line on ≥1200px (desktop); allow wrap below */
@media (min-width:1200px) {
  .pods-intro__title {
    white-space: nowrap !important;
  }
}

/* description */
.pods-intro__desc {
  max-width: 980px;
  margin: 10px auto 28px;
  color: #5A493E;
  font-size: 22px;
  font-family: 'qanelas-light', sans-serif;
}

/* button */
.pods-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 22px 33px;
  border-radius: 10px;
  background: #7B624F;
  color: #FAF3E3;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  transition: transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: 18px;
  line-height: 1;
  border: 2px solid transparent;
  /* so hover border doesn't jump layout */
}

.pods-intro__icon {
  width: 20px;
  height: 20px;
  filter: invert(95%) sepia(12%) saturate(330%) hue-rotate(330deg) brightness(103%) contrast(93%);
  transition: filter .2s ease;
}

.pods-intro__btn:hover {
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  opacity: 1;
  /* optional: keep it solid instead of .95 */
}

/* icon tint on hover – so it matches the dark text */
.pods-intro__btn:hover .pods-intro__icon {
  filter: invert(34%) sepia(9%) saturate(851%) hue-rotate(347deg) brightness(94%) contrast(86%);
}

.pods-intro__btn:focus {
  outline: 2px solid rgba(123, 98, 79, .4);
  outline-offset: 2px;
}


/* === Page background (everything except the footer) === */
:root {
  /* set your new page background color here */
  --page-bg: #FFF8ED;
  /* <- change me */
}

/* your layout uses GSAP smooth scroll wrappers + <main>, target them all */
html,
body,
#smooth-wrapper,
#smooth-content,
main {
  background: #FFF8ED !important;
}

/* make sure the footer keeps its own background */
footer,
.tp-footer-2-area,
.tp-footer-area,
.footer-top1 {
  background: inherit;
  /* keep whatever it already has in theme */
  /* or hard-set it if you prefer:
  background: #121212 !important;
  */
}



/* Pods row (top) */
.pfx-pods {
  background: var(--page-bg);
}

.pfx-pods-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px) 12px;
}

.pfx-pod {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
}

/* Band around your existing footer content */
.pfx-band {
  background: var(--footer-bg);
  padding: clamp(42px, 5vw, 84px) 0 clamp(28px, 3vw, 48px);
}

/* Optional responsive tweaks */
@media (max-width: 991.98px) {
  .pfx-pods-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pfx-pod {
    max-width: 560px;
  }
}


/* Remove the space between the renders and the footer band */
.pfx-pods-wrap {
  padding-bottom: 0 !important;
  /* was adding the visible gap */
  align-items: end !important;
  /* keep all three images bottom-aligned */
}

.pfx-pods {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Make sure the band starts immediately (no extra space/border) */
.pfx-band {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* If you still see a tiny hairline from sub-pixel rounding, use this: */
.pfx-band {
  margin-top: -1px !important;
}

/* optional anti-alias seam fix */



/* Make the overlay text sit perfectly centered on the image */
.tp-hero-2-wrapper {
  position: relative;
}

.hero-title-center {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  /* vertical center */
  justify-content: center;
  /* horizontal center */
  pointer-events: none;
  /* clicks pass through to hero if needed */
  padding: 0 4vw;
  /* a bit of left/right safety on small screens */
}

.hero-title {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  font-family: 'Qanelas-Medium', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 9vw, 95px);
  /* scales beautifully */
  color: #FAF3E3;
  /* warm off-white on photo */
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  /* contrast on busy areas */
}



/* ===== Pods Range (exact layout) ===== */
:root {
  --page-bg: #FFF8ED;
  /* page color you already use */
  --panel-bg: #DED7C8;
  /* card panel beige (matches mock) */
  --text-dark: #42332A;
  --text-mute: #7B756F;
  --brown: #7B624F;
  /* buttons */
}

/* section spacing similar to mock */
.pods-range {
  background: var(--page-bg);
  padding: 36px 0 8px;
  /* above cards / below cards */
}

/* === GRID ===
   Desktop spec: 2 columns, fixed row gap & column gap for a tight masonry look. */
.pods-grid {
  width: min(1000px, 100%);
  margin-top: 90px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 62px;
  row-gap: 36px;
  margin: 0 auto;
}

/* === CARD ===
     Fixed visual height at desktop so every card matches exactly like the image. */
.pods-card {
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  padding: 26px 28px 22px;
  display: grid;
  grid-template-rows:
    24px
    /* brand */
    240px
    /* render area (fixed) */
    auto
    /* title */
    1fr
    /* text flexes */
    auto;
  /* button */
  min-height: 560px;
  /* exact desktop height for parity */
}

/* brand row */
.pods-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.brand-pods {
  height: 35px;
  width: auto;
  display: block;
}

.brand-okra {
  height: 25px;
  width: auto;
  display: block;
}

.brand-x {
  font-size: 18px;
  line-height: 1;
  color: var(--text-mute);
}

/* render area (centered, consistent) */
.pods-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 16px;
  overflow: visible;
}

.pods-card__media img {
  width: min(360px, 92%);
  /* same visual scale across cards */
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .12));
  margin-top: 50px;
}

/* title */
.pods-card__title {
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-family: 'Qanelas-Medium', sans-serif;
  font-weight: 500;
  font-size: 28px;
  /* fixed at desktop for exact look */
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--text-dark);
  text-align: center;
  padding-top: 50px;
}

/* body text */
.pods-card__text {
  margin: 0 0 14px 0;
  color: #5A493E;
  font-size: 18.5px;
  font-family: 'qanelas-light', sans-serif;
  line-height: 1.7;
  max-width: 28ch;
  text-align: left;
  text-align: justify;
}

/* CTA pinned to bottom */
.pods-card__btn {
  justify-self: start;
  display: inline-block;
  padding: 10px 16px;
  background: #786456;
  color: #FAF3E3;
  /* light text */
  border: 2px solid transparent;
  /* reserve border space so it doesn't jump */
  border-radius: 8px;
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.pods-card__btn:hover {
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}


/* ==== EXACT CARD SIZE (desktop ≥1200px) ==== */
:root {
  /* Tweak these 3 values if you want tiny changes */
  --card-w: 620px;
  /* card width in the screenshot */
  --card-h: 760px;
  /* total card height in the screenshot */
  --media-h: 315px;
  /* height of the render area */
}

@media (min-width:1200px) {

  /* two fixed-width columns centered, with an exact gap */
  .pods-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, var(--card-w)) !important;
    justify-content: center;
    /* center the two columns */
    column-gap: 48px !important;
    /* gap between cards */
    row-gap: 48px !important;
    /* vertical gap between rows */
  }

  /* lock the card’s box size and internal layout */
  .pods-card {
    width: var(--card-w) !important;
    min-height: var(--card-h) !important;
    height: var(--card-h) !important;
    /* fix total height */
    border-radius: 16px !important;
    padding: 36px 40px 28px !important;
    display: grid !important;
    grid-template-rows:
      26px
      /* brand row */
      var(--media-h)
      /* image area */
      auto
      /* title */
      1fr
      /* body text flexes */
      auto
      /* button */
      !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    background: var(--panel-bg);
  }

  /* render area: exact height; image scales to fit */
  .pods-card__media {
    margin: 10px 0 18px !important;
    height: var(--media-h) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .pods-card__media img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .12));
  }

  .discover-section {
    padding: 60px 20px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
  }

  /* typography sizing to match the look */
  .pods-card__title {
    font-size: 56px !important;
    /* big headline like mock */
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 12px 0 !important;
  }

  .pods-card__text {
    font-size: 18px;
    line-height: 1.35;
    max-width: 350px;

    /* center the block + the text */
    margin: 8px auto 20px;
    /* <— auto left/right centers the block */
    text-align: center !important;
    /* center lines */
    text-align: justify !important;

    /* if the card uses CSS grid, this centers the item itself */
    justify-self: center !important;
  }

  .pods-card__btn {
    justify-self: center !important;
    /* centers in the card grid */
    text-align: center;
    align-self: end;
    /* stays near bottom consistently */
    min-width: 190px;
    /* width like the mock */
    padding: 20px 122px;
    margin-bottom: 30px;
    border-radius: 12px;
    font-size: 20px;
  }

  /* brand row heights (logo sizes) */
  .pods-card__brand {
    min-height: 26px !important;
  }

  .brand-pods {
    height: 38px !important;
  }

  .brand-okra {
    height: 22px !important;
  }

  .brand-x {
    font-size: 18px !important;
    line-height: 1;
  }
}

/* keep your existing responsive rules for <1200px; cards will stack to one column */


/* === RESPONSIVE === */
@media (max-width: 1199.98px) {
  .pods-grid {
    width: min(1100px, 100%);
    column-gap: 24px;
    row-gap: 28px;
  }

  .pods-card {
    grid-template-rows: 24px 220px auto 1fr auto;
    min-height: 520px;
  }

  .pods-card__media img {
    width: min(340px, 94%);
  }

  .pods-card__title {
    font-size: 26px;
  }
}

@media (max-width: 991.98px) {
  .pods-grid {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
  }

  .pods-card {
    grid-template-rows: 24px 210px auto 1fr auto;
    min-height: 500px;
  }

  .pods-card__title {
    font-size: 24px;
  }
}



/* ===== Pricing section panel ===== */
:root {
  --pricing-bg: #EAE3D6;
  /* the beige panel like your screenshot */
}

/* Make only the content inside the section look like a card/panel */
.pods-pricing .pod-container {
  background: var(--pricing-bg);
  border-radius: 18px;
  padding: 42px 48px 36px;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .04),
    0 10px 28px rgba(0, 0, 0, .06);
}

/* spacing above/below the panel (optional) */
.pods-pricing {
  margin: 20px 0 60px;
  /* tweak to taste */
}

/* Responsive padding/radius */
@media (max-width: 991.98px) {
  .pods-pricing .pod-container {
    border-radius: 14px;
    padding: 28px 24px 24px;
  }
}

@media (max-width: 575.98px) {
  .pods-pricing .pod-container {
    border-radius: 12px;
    padding: 22px 16px 18px;
  }
}



/* Bigger center pod only (desktop/tablet) */
.pfx-pods-wrap {
  /* give the middle track more room */
  grid-template-columns: 1.55fr 2.85fr 1.55fr !important;
}

/* (optional) nudge if you want it even more dominant: 1fr 1.6fr 1fr */

/* keep it neat: bottom-aligned & centered */
.pfx-pod--center {
  justify-self: center;
  align-self: end;
}


/* ───────────────── Tablets (≤ 1024px) ───────────────── */
@media (max-width: 1024px) {
  .pfx-podstrip {
    max-width: 92vw;
    margin-inline: auto;
    padding-inline: min(3vw, 16px);
    gap: min(4vw, 18px);
  }

  /* Percentage widths (sum ~100%) so they always fit one line */
  .pfx-pod--left {
    flex: 0 0 54%;
    max-width: 124%;
  }

  .pfx-pod--center {
    flex: 0 0 52%;
    max-width: 150%;
  }

  /* center is biggest */
  .pfx-pod--right {
    flex: 0 0 54%;
    max-width: 124%;
  }

  .pfx-pod {
    width: 100%;
  }
}

/* ───────────────── Phones (≤ 600px) ───────────────── */
@media (max-width: 600px) {
  .pfx-podstrip {
    max-width: 92vw;
    padding-inline: min(2vw, 10px);
    gap: min(1vw, 5px);
  }

  /* Tighter split on small screens to prevent wrapping */
  .pfx-pod--left {
    flex-basis: 54%;
    max-width: 144%;
  }

  .pfx-pod--center {
    flex-basis: 52%;
    max-width: 150%;
  }

  /* stays largest */
  .pfx-pod--right {
    flex-basis: 54%;
    max-width: 144%;
  }

  .pfx-pod {
    width: 100%;
  }
}


/* === Inclusions section (matches screenshot) === */
.pods-keypoints {
  background: #FFF8ED;
  /* page tone you're using */
  padding: 64px 0 0px;
}

.pod-container--narrow {
  max-width: 1280px;
  /* narrow, elegant column */
  margin-inline: auto;
  padding: 0 24px;
}

.k-title {
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: clamp(24px, 2.2vw, 44px);
  line-height: 1.28;
  letter-spacing: .1px;
  color: #42332A;
  margin: 0 0 16px;
}

.k-lead {
  font-family: 'Qanelas-Regular', sans-serif;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1.85;
  color: #42332A;
  margin: 0 0 44px;
}

.k-sub {
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: clamp(20px, 2vw, 48px);
  line-height: 1.3;
  color: #42332A;
  margin: 0 0 10px;
}

.k-sub .by-ter {
  font-family: 'qanelas-light', sans-serif;
  color: #42332A;
  /* softer, like the mock */
  font-weight: 400;
}

.k-intro {
  font-family: 'Qanelas-Regular', sans-serif;
  font-size: clamp(20px, 2vw, 22px);
  color: #42332A;
  line-height: 1.8;
  margin: 0 0 14px;
}

.k-list {
  list-style: disc;
  padding-left: 22px;
  /* classic bullet indent */
  margin: 0;
}

.k-list li {
  font-family: 'QanelasDEMO-Thin', sans-serif;
  color: #42332A;
  line-height: 1.85;
  font-size: clamp(15px, 1.6vw, 22px);
  margin: 0 0 18px;
}

.k-list b {
  font-family: 'Qanelas-Medium', sans-serif;
  color: #42332A;
  font-weight: 500;
}


/* ===== WHY US ===== */
.tp-video-area+.whyus {
  margin-top: clamp(24px, 5vw, 72px);
}

.whyus {
  --panel-bg: #E5DED1;
  /* inner card */
  --panel-bd: #D9D0C2;
  /* subtle borders */
  --img-radius: 12px;
  --panel-radius: 20px;
  padding-bottom: 120px;
}

.whyus__head {
  max-width: 1480px;
  margin: 0 auto clamp(24px, 5vw, 36px);
  text-align: left;
}

.whyus__head h2 {
  letter-spacing: .02em;
  margin: 0 0 10px;
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: clamp(37px, 4.2vw, 60px);
  color: #42332A;
}

.whyus__head p {
  opacity: .9;
  line-height: 1.5;
  font-family: 'qanelas-light', sans-serif;
  font-size: 22px;
  color: #5A493E;
}

.whyus__grid {
  display: grid;
  grid-template-columns: 1.05fr 1.1fr;
  /* image | panel */
  align-items: start;
  gap: clamp(20px, 4vw, 36px);
}

/* Left: image card */
.whyus__figure {
  margin: 0;
}

.whyus__img {
  width: 100%;
  display: block;
  border-radius: var(--img-radius);
  box-shadow: var(--shadow);
}

.whyus__caption {
  margin-top: clamp(14px, 2.2vw, 18px);
}

.whyus__caption h3 {
  margin: 0 0 20px;
  font-weight: 400;
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: 36px;
  color: #42332A;
}

.whyus__caption p {
  margin: 0px;
  line-height: 1.5;
  color: #5A493E;
  font-family: 'qanelas-light', sans-serif;
  font-size: 22px;
  text-align: justify;
}

/* Right: panel + accordion */
.whyus__panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: var(--panel-radius);
  padding: clamp(12px, 2vw, 118px);
}

/* One item */
.whyus__item {
  border-bottom: 1px solid var(--panel-bd);
  padding: 2px 2px;
}

.whyus__item:last-child {
  border-bottom: 0;
}

/* clickable bar */
.whyus__item>summary {
  list-style: none;
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  /* icon | label | chevron */
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: clamp(12px, 1.6vw, 16px);
  border-radius: 12px;
  position: relative;
}

.whyus__item>summary::-webkit-details-marker {
  display: none;
}

.whyus__icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.whyus__icon-1 img {
  width: 23px;
  height: 23px;
  display: block;
}

.whyus__label {
  font-weight: 500;
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: 22px;
  letter-spacing: .01em;
}

/* chevron */
.whyus__chev {
  width: 14px;
  height: 14px;
  transform: rotate(0deg);
  transition: transform .25s ease;
}

.whyus__item[open]>summary .whyus__chev {
  transform: rotate(180deg);
}

/* collapsed content */
.whyus__content {
  padding: 0 clamp(16px, 2vw, 20px) clamp(12px, 1.6vw, 14px) 60px;
  /* align under label */
  color: #5D574F;
  line-height: 1.6;
  font-size: 18px;
}

/* Hover / focus feedback */
.whyus__item>summary:hover {
  background: rgba(0, 0, 0, .035);
}

.whyus__item>summary:focus-visible {
  outline: 2px solid rgba(0, 0, 0, .25);
  outline-offset: 2px;
  background: rgba(0, 0, 0, .035);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .whyus__grid {
    grid-template-columns: 1fr;
  }

  .whyus__panel {
    order: 2;
  }

  .whyus__figure {
    order: 1;
  }
}

@media (max-width: 575.98px) {
  .whyus__item>summary {
    grid-template-columns: 28px 1fr 14px;
    gap: 10px;
    padding: 12px;
  }

  .whyus__content {
    padding-left: 56px;
  }
}



.ids {
  --panel-bg: #E9E3D6;
  /* inner card */
  --panel-bd: #D8D0C4;
  /* subtle border */
  --ink: #3F372F;
  /* text color */
  --muted: #6E675F;
  --radius: 18px;
  color: var(--ink);
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius);
  padding: clamp(58px, 4vw, 48px);
}

/* Heading */
.ids__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(20px, 4vw, 36px);
}

.ids__head h2 {
  margin: 0 0 6px;
  letter-spacing: .02em;
  font-family: 'Qanelas-Medium', sans-serif;
  font-size: 60px;
  color: #42332A;
}

.ids__sub {
  margin: 20px;
  font-style: italic;
  color: #5A493E;
  font-family: 'qanelas-light', sans-serif;
  font-size: 28px;
}

/* Layout */
.ids__grid {
  display: grid;
  grid-template-columns: 1.05fr 1.1fr;
  /* copy | images */
  align-items: start;
  gap: clamp(20px, 4vw, 40px);
}

/* Copy side */
.ids__eyebrow {
  margin: 0 0 12px;
  font-weight: 400;
  font-family: 'qanelas-light', sans-serif;
  color: #5A493E;
}

.ids__copy p {
  color: #5A493E;
  line-height: 1.75;
  margin: 35px 0 35px;
  font-family: 'qanelas-light', sans-serif;
  font-size: 20px;
}

.ids__ctas {
  display: flex;
  gap: 12px;
  margin-top: clamp(25px, 2vw, 18px);
}

.ids__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 56px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  text-decoration: none;
}

.ids__btn {
  border: 2px solid transparent;
}

.ids__btn--primary,
.ids__btn--primary:link,
.ids__btn--primary:visited {
  /* ensure white text even after visiting */
  background: #6C5A4C;
  color: #FAF3E3;
  border-color: #6C5A4C;
}

.ids__btn--primary:hover {
  /* your current hover */
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456;
  /* keep border width consistent to avoid shift */
}

/* when pressed, snap back to primary */
.ids__btn--primary:active,
.ids__btn--primary:focus {
  background: #6C5A4C;
  color: #fff;
  border-color: #6C5A4C;
  transform: translateY(0);
}

.ids__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 90, 76, .35);
}

/* Media side */
.ids__media {
  margin: 35px;
}

.ids__hero {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.ids__thumbs {
  margin-top: clamp(10px, 2vw, 14px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.6vw, 12px);
}

.ids__thumb {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  transition: transform .2s ease;
}

.ids__thumb:hover {
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .ids__grid {
    grid-template-columns: 1fr;
  }

  .ids__head {
    margin-bottom: clamp(10px, 3vw, 20px);
  }
}

@media (max-width: 575.98px) {
  .ids {
    padding: 0px;
    border-radius: 14px;
  }

  .ids__thumbs {
    gap: 8px;
  }

  .ids__btn {
    padding: 10px 14px;
  }
}



/* Card radius + horizontal space */
.ids {
  border-radius: 22px;
  /* rounded corners (match screenshot) */
  overflow: hidden;
  /* clip inner images to the curve */
  margin-inline: clamp(16px, 5vw, 40px);
  /* left & right space from page edge */
  /* keep whatever background/border you already set */
}

/* (optional) slightly larger radius on big screens */
@media (min-width: 1440px) {
  .ids {
    border-radius: 24px;
  }
}





:root {
  --pods-cream: #F4EDE2;
}

/* warm cream from the mock */

/* stack + center the two lines */
.tp-hero-2-area .hero-title-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1.2vw, 16px);
}

/* kill any global uppercase */
.tp-hero-2-area .hero-title,
.tp-hero-2-area .hero-title * {
  text-transform: none !important;
}

/* heading row: PODS + by tér */
.tp-hero-2-area .hero-title {
  display: flex;
  align-items: baseline;
  gap: .28em;
  margin: 0;
  line-height: .88;
  letter-spacing: .01em;
  white-space: nowrap;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .35));
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* PODS — bold uppercase */
.tp-hero-2-area .hero-title .pods-main {
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--pods-cream);
  letter-spacing: .02em;
  font-size: clamp(44px, 9.5vw, 140px);
}

/* by tér — very thin + slightly lower to tuck nicely */
.tp-hero-2-area .hero-title .pods-tail {
  font-family: 'Qanelas-UltraLight', sans-serif;
  opacity: .92;
  letter-spacing: .005em;
  font-size: clamp(40px, 9vw, 136px);
}

/* subtitle */
.tp-hero-2-area .hero-subtitle {
  margin: 55px;
  ;
  color: var(--pods-cream);
  text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  font-family: "Qanelas-Regular", "AvenirLTStd-Book", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  font-size: clamp(18px, 3.4vw, 44px);
}

/* lock exact desktop sizes + keep subtitle on one line like the mock */
@media (min-width:1200px) {
  .tp-hero-2-area .hero-title .pods-main {
    font-size: 140px;
  }

  .tp-hero-2-area .hero-title .pods-tail {
    font-size: 136px;
  }

  .tp-hero-2-area .hero-subtitle {
    font-size: 68px;
    white-space: nowrap;
  }
}


/* Make the hero text sit perfectly centered over the image */
.tp-hero-2-wrapper {
  position: relative;
}

/* anchor for absolute child */

.hero-title-center {
  text-align: center;
  width: 100%;
}

/* ====== Minimal & luxe (scoped) ====== */
:root {
  --pods-cream: #F4EDE2;
  /* page bg tone */
  --pods-text: #5B5149;
  /* paragraph text */
  --pods-head: #4F443B;
  /* headings */
  --pods-accent: #6C5A4C;
  /* bullets */
  --pods-card: #EFE6DB;
  /* card bg */
  --pods-card-b: #E6D8C8;
  /* card border */
}

.pods-minlux {
  padding: clamp(56px, 9vw, 90px) 0;
  background: transparent;
  /* page already cream; keep as-is */
}

.pods-minlux .container {
  max-width: 1480px;
}

/* Head / intro */
.pods-minlux__head {
  max-width: 1070px;
  margin: 0 auto clamp(36px, 6vw, 60px);
  text-align: center;
}

.pods-minlux__title {
  margin: 30px 0 clamp(14px, 2vw, 18px);
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 60px);
  color: var(--pods-head);
  letter-spacing: .02em;
}

.pods-minlux__lead {
  margin: 0 auto clamp(8px, 1.8vw, 18px);
  font-family: 'qanelas-light', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 25px);
  line-height: 1.7;
  color: var(--pods-text);
  text-align: justify;
}

/* 3-col layout */
.pods-minlux__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px) 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

/* Lists */
.pods-minlux__h3 {
  margin: 0 0 30px;
  font-family: "Qanelas-Regular", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 22x);
  color: var(--pods-head);
}

.pods-minlux__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pods-minlux__list li {
  position: relative;
  padding-left: 18px;
  margin: 10px 0;
  font-family: "qanelas-light", system-ui, sans-serif;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--pods-text);
}

.pods-minlux__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pods-accent);
  opacity: .9;
}

/* Layout stays the same */
.pods-minlux__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  /* center column width */
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

/* Center image column (no card) */
.pods-minlux__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pods-minlux__image {
  width: clamp(240px, 28vw, 480px);
  /* responsive size */
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  /* optional softness like the mock:
     filter: drop-shadow(0 8px 24px rgba(0,0,0,.06)); */
}

/* Mobile stacking keeps image in the middle */
@media (max-width: 991.98px) {
  .pods-minlux__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pods-minlux__col:nth-child(1) {
    order: 1;
  }

  .pods-minlux__img {
    order: 2;
  }

  .pods-minlux__col:nth-child(3) {
    order: 3;
  }

  .pods-minlux__image {
    width: min(82vw, 520px);
  }
}


/* Responsive */
@media (max-width: 991.98px) {
  .pods-minlux__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Keep the image in the middle on tablet/mobile */
  .pods-minlux__col:nth-child(1) {
    order: 1;
  }

  .pods-minlux__imgwrap {
    order: 2;
  }

  .pods-minlux__col:nth-child(3) {
    order: 3;
  }

  .pods-minlux__card {
    max-width: 420px;
    margin-inline: auto;
  }
}


/* Pull the two lists closer to the PNG in the middle */
.pods-minlux__grid {
  display: grid;
  /* side columns sized to their content, center column sized to the PNG */
  grid-template-columns: minmax(260px, 420px) minmax(320px, 520px) minmax(260px, 420px);
  justify-content: center;
  /* center the whole 3-col cluster */
  align-items: center;
  /* vertically align with the image */
  column-gap: clamp(16px, 1.8vw, 32px);
  /* tighter spacing */
}

/* Center image sizing (no card) */
.pods-minlux__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pods-minlux__image {
  width: clamp(300px, 50vw, 520px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* Optional: on very wide screens keep things tight */
@media (min-width: 1600px) {
  .pods-minlux__grid {
    column-gap: 32px;
  }
}


/* === Pull the lists close to the center PNG (override any earlier 1fr rules) === */
.pods-minlux .pods-minlux__grid {
  /* make the whole 3-col cluster a fixed, centered band */
  width: min(1500px, 100%);
  margin: 0 auto;

  /* narrow side cols + sized center col */
  grid-template-columns: minmax(260px, 380px) minmax(340px, 520px) minmax(260px, 380px) !important;

  /* small gap between each column */
  column-gap: clamp(12px, 1.4vw, 24px) !important;

  align-items: center;
  justify-content: center;
}

/* Nudge the lists toward the image edges */
.pods-minlux__col:nth-child(1) {
  justify-self: end;
}

.pods-minlux__col:nth-child(3) {
  justify-self: start;
}

/* Move "Exterior Materials" up a bit (desktop/tablet only) */
@media (min-width: 992px) {
  .pods-minlux__grid>.pods-minlux__col:first-child {
    align-self: start;
    /* top-align within the row */
    transform: translateY(58px);
    /* tweak amount as needed */
  }
}


/* ===== EXACT MOBILE LOOK (<= 768px) ===== */
@media (max-width: 767.98px) {

  /* Stack everything and center the block under the image */
  .pods-minlux .pods-minlux__grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
    row-gap: 24px;
    width: 100%;
  }

  /* Order: image → Exterior → Interior */
  .pods-minlux .pods-minlux__img {
    order: 1 !important;
  }

  .pods-minlux .pods-minlux__col:nth-child(1) {
    order: 2 !important;
  }

  .pods-minlux .pods-minlux__col:nth-child(3) {
    order: 3 !important;
  }

  /* Image size & spacing like the mock */
  .pods-minlux .pods-minlux__image {
    width: min(92vw, 420px);
    height: auto;
    display: block;
    margin: 12px auto 18px;
  }

  /* Center the headings; keep list text readable (left) */
  .pods-minlux .pods-minlux__col {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    /* headings */
  }

  .pods-minlux .pods-minlux__h3 {
    font-size: 20px;
    /* close to your screenshot */
    margin: 8px 0 10px;
  }

  /* List block centered, items left-aligned */
  .pods-minlux .pods-minlux__list {
    width: min(82vw, 420px);
    margin: 0 auto;
    padding: 0 0 0 18px;
    /* small indent like the mock */
    text-align: left;
    list-style: disc;
    /* native bullets */
  }

  /* Kill any desktop custom bullets */
  .pods-minlux .pods-minlux__list li {
    padding-left: 0 !important;
    margin: 10px 0;
  }

  .pods-minlux .pods-minlux__list li::before {
    display: none !important;
    content: none !important;
  }

  /* Tighten section spacing on mobile */
  .pods-minlux {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .pods-minlux .pods-minlux__head {
    margin-bottom: 28px;
    padding: 0 16px;
    /* comfy side gutters */
  }

  .pods-minlux .pods-minlux__title {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .pods-minlux .pods-minlux__lead {
    font-size: 14px;
    line-height: 1.55;
  }

  /* center the whole list block */
  .pods-minlux .pods-minlux__list {
    width: min(82vw, 480px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    /* we'll draw bullets */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center each <li> row */
    gap: 12px;
  }

  /* each row auto-sizes to its content and is centered */
  .pods-minlux .pods-minlux__list li {
    display: inline-flex;
    /* inline width = content width */
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    /* space between bullet and text */
    margin: 0;
    text-align: center;
    /* wrap lines centered */
    max-width: 100%;
  }

  /* custom bullet */
  .pods-minlux .pods-minlux__list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pods-accent);
    margin-top: .55em;
    /* vertically align dot with first line */
    flex: 0 0 6px;
  }
}




/* ===== Exterior & Interior Materials (scoped) ===== */
:root {
  /* tweak if you want the band a touch darker/lighter */
  --pods-band: #E9E3D6;
  --pods-pill-bg: #FFF8ED;
  --pods-pill-bd: #DCCFBE;
}

.pods-exint {
  background: var(--pods-band);
  padding: clamp(48px, 7vw, 90px) 0;
}

.pods-exint__title {
  text-align: center;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  padding-bottom: 20px;
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 60px);
  letter-spacing: .01em;
  color: var(--pods-head);
}

.pods-exint__copy p {
  font-family: 'qanelas-light', sans-serif !important;
  max-width: 1060px;
  margin: 0 auto clamp(28px, 4vw, 40px);
  color: var(--pods-text);
  font-size: clamp(14px, 1.25vw, 22px);
  line-height: 1.72;
}

.pods-exint__copy b {
  font-family: "Qanelas-Regular", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 600;
  color: var(--pods-head);
}

/* Pills */
.pods-exint__badges {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 16px);
  justify-items: center;
}

.pods-exint__badges li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 18px;
  min-height: 44px;
  width: 100%;
  max-width: 240px;
  background: var(--pods-pill-bg);
  border: 1px solid var(--pods-head);
  border-radius: 10px;
  font-family: "Qanelas-Regular", system-ui, sans-serif;
  font-size: clamp(13px, 1.20vw, 20px);
  color: var(--pods-head);
  text-align: center;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .pods-exint__badges {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767.98px) {
  .pods-exint {
    padding: 40px 0;
  }

  .pods-exint__copy {
    padding: 0 16px;
  }

  .pods-exint__badges {
    grid-template-columns: repeat(2, 1fr);
    max-width: 560px;
    gap: 12px;
  }

  .pods-exint__badges li {
    max-width: none;
    padding: 6px 12px;
    font-size: 13px;
  }
}





/* ===== Pods by tér – Panels (scoped) ===== */
:root {
  --pp-text: var(--pods-text, #5B5149);
  --pp-head: var(--pods-head, #4F443B);
  --pp-card: var(--pods-card, #EFE6DB);
  --pp-card-b: var(--pods-card-b, #E9E3D6);
  --pp-pill-bg: var(--pods-pill-bg, #F6EFE6);
  --pp-pill-bd: var(--pods-pill-bd, #DCCFBE);
}

.pods-panels {
  padding: clamp(20px, 8vw, 56px) 0;
  background: transparent;
}

.pp-title {
  margin: 0 0 60px clamp(18px, 2.4vw, 28px);
  text-align: center;
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 6vw, 72px) !important;
  color: var(--pp-head);
  letter-spacing: .01em;
}

.pp-title .pp-brand {
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
}

.pp-brand-highlight {
  font-family: "Qanelas-UltraLight", "AvenirLTStd-Light", system-ui, sans-serif;
  font-weight: 200;
}

.pp-title .pp-name {
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
}

.pp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  /* copy | image */
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

.pp-copy {
  color: var(--pp-text);
  font-family: "Qanelas-Regular", "AvenirLTStd-Book", system-ui, sans-serif;
  font-size: clamp(14px, 1.25vw, 22px);
  line-height: 1.72;
}

.pp-lead {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: 'qanelas-light', sans-serif !important;
  font-size: clamp(14px, 1.45vw, 22px);
  line-height: 1.72;
  margin: 14px 0 85px;
  text-align: justify;
  padding: 0 20px 10px;
}

.pp-pills {
  list-style: none;
  padding: 0;
  margin: clamp(8px, 1.6vw, 16px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 40px 50px;
  max-width: 520px;
}

.pp-pills li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 14px;
  min-height: 40px;
  background: #E9E3D6;
  border-radius: 10px;
  font-size: clamp(13px, 1.60vw, 25px);
  color: var(--pp-head);
  white-space: nowrap;
}



/* Right image card */
.pp-fig {
  margin: 0;
}

.pp-card {
  background: #E9E3D6;
  border-radius: 20px;
  padding: clamp(8px, 1.2vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-card img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Long wall strip */
.pp-strip {
  margin: clamp(18px, 3vw, 28px) 0 0;
}

.pp-strip-card {
  background: #E9E3D6;
  border-radius: 20px;
  padding: clamp(6px, 1vw, 10px);
}

.pp-strip-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 1199.98px) {
  .pp-grid {
    grid-template-columns: 1fr;
    /* stack */
    gap: 18px;
  }

  .pp-title {
    text-align: center;
  }

  .pp-copy {
    text-align: left;
  }

  .pp-pills {
    max-width: 520px;
    grid-template-columns: repeat(2, 1fr);
  }

  .pp-fig {
    order: 2;
  }
}

@media (max-width: 767.98px) {
  .pp-title {
    font-size: 24px;
  }

  .pp-pills {
    grid-template-columns: 1fr 1fr;
  }

  .pp-lead {
    margin: 0 0 clamp(14px, 2vw, 20px);
    font-family: 'qanelas-light', sans-serif !important;
    font-size: clamp(14px, 1.25vw, 22px);
    line-height: 1.72;
    margin: 14px 0 25px;
    text-align: justify;
  }

  .pp-pills {
    gap: 10px 10px;
    padding: 2px 2px;
  }

  .pp-title {
    margin: 0 0 0px clamp(18px, 2.4vw, 28px);
  }
}




/* ===== Complete & Ready (scoped) ===== */
:root {
  --cr-band: var(--pods-band, #EAE0D4);
  --cr-head: var(--pods-head, #4F443B);
  --cr-text: var(--pods-text, #5B5149);
  --cr-card-bg: var(--pods-pill-bg, #F6EFE6);
  --cr-card-bd: var(--pods-pill-bd, #DCCFBE);
}

.pods-complete {
  padding: clamp(26px, 1.5vw, 0px) 0;
}

.cr-title {
  text-align: center;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-size: clamp(26px, 3.2vw, 60px);
  letter-spacing: .01em;
  color: var(--cr-head);
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
}

.cr-title .cr-brand {
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
}

.cr-brand-highlight {
  font-family: "Qanelas-UltraLight", "AvenirLTStd-Light", system-ui, sans-serif;
  font-weight: 200;
}

.cr-title .cr-name {
  font-family: "Qanelas-Medium", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 400;
}

.cr-intro p {
  max-width: 1200px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
  text-align: justify;
  color: var(--cr-text);
  font-family: 'qanelas-light', sans-serif !important;
  font-size: clamp(14px, 1.25vw, 22px);
  line-height: 1.72;
  padding: 0 16px;
}

/* Cards grid */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 24px) clamp(18px, 3vw, 28px);
}

.cr-card {
  background: var(--cr-card-bg);
  border: 1px solid var(--cr-head);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 32px);
}

.cr-card h3 {
  margin: 0 0 8px;
  font-family: "Qanelas-Regular", "AvenirLTStd-Heavy", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--cr-head);
  letter-spacing: .01em;
}

.cr-card p {
  margin: 0;
  font-family: 'qanelas-light', sans-serif !important;
  font-size: clamp(13px, 1.1vw, 18px);
  padding-top: 10px;
  line-height: 1.65;
  color: var(--cr-text);
}

/* Responsive */
@media (max-width: 1199.98px) {
  .cr-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767.98px) {
  .pods-complete {
    padding: 20px 0;
  }

  .cr-grid {
    grid-template-columns: 1fr;
  }
}






/* ========== Variables (same palette you've used) ========== */
:root {
  --pc-cream: #FFF8ED;
  --pc-cream-2: #EFE5D8;
  --pc-text: #5B5149;
  --pc-head: #4F443B;
  --pc-accent: #6C5A4C;
  --pc-card: #F6EFE6;
  --pc-card-b: #E2D6C8;
  --pc-band: #E6DED2;
  --pc-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

/* Base */
.pods-contact {
  color: var(--pc-text);
  font-family: "Qanelas-Regular", system-ui, sans-serif;
}

.pods-contact .pc-kicker {
  letter-spacing: 1px;
  font-size: 25px;
  color: #42332A;
  font-family: "Qanelas-Regular", system-ui, sans-serif;
  font-weight: 600;
}

.pods-contact .pc-h2 {
  font: 600 clamp(22px, 3.5vw, 50px) "Qanelas-Regular", sans-serif;
  color: var(--pc-head);
  margin: 56px 0 56px;
}

.pods-contact .pc-h3 {
  font: 600 clamp(18px, 2.0vw, 40px) "Qanelas-Regular", sans-serif;
  color: var(--pc-head);
  line-height: 1.6;
  margin: 0 0 30px;
}

.pods-contact .pc-body {
  font-size: clamp(14px, 1.6vw, 20px);
  font-family: 'qanelas-light', sans-serif !important;
  color: #5A493E;
  line-height: 1.75;
  margin: 0 0 56px;
  text-align: justify;
}

.pc-hero {
  padding: 120px 0 24px;
}

.pc-hero__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.pc-hero__bg {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  filter: contrast(.98) saturate(.95);
}

.pc-hero__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-cream);
  font: 600 clamp(28px, 5.6vw, 95px) "Qanelas-Medium", sans-serif;
  letter-spacing: 3px;
}

/* ========== Intro ========== */
.pc-intro {
  padding: clamp(28px, 6vw, 56px) 0;
}

.pc-intro__grid{
  display: grid;
  grid-template-columns: 1fr; /* full width */
  gap: 0;                    /* no empty spacing since image is removed */
  align-items: start;
}

.pc-intro__media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.pc-intro__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.pc-card {
  background: #E9E3D6;
  border-radius: 20px;
  padding: 42px;
}

.pc-card__hd {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 20px;
  color: var(--pc-head);
  margin-bottom: 22px;
}

.pc-card__list {
  margin: 0;
  padding-left: 18px;
}

.pc-card__list li {
  margin: 16px 0;
  font-size: 16px;
}

.pc-ic {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.pc-cc {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.pc-link {
  color: #42332A;
  font-size: 16px;
}

/* ========== CTA band ========== */
.pc-cta {
  background: #E9E3D6;
  padding: clamp(28px, 10vw, 164px) 0;
  font-family: 'QanelasDEMO-Thin';
}

.pc-cta__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 4vw, 70px);
  align-items: start;
}

.pc-contacts {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 82px;
}

.pc-contacts li {
  display: flex;
  align-items: center;
  gap: 50px;
  font-size: 20px;
  letter-spacing: 3px;
}

.pc-contacts a {
  color: var(--pc-head);
  text-decoration: none;
}

.pc-form {
  width: min(100%, 650px);
  margin: 0 0 0 auto;
  background: #FFF8ED;
  border: 1px solid var(--pc-head);
  border-radius: 18px;
  padding: 32px 56px;
  position: relative;
}

.pc-form__title {
  font: 600 30px "Qanelas-Regular", sans-serif;
  color: var(--pc-head);
  margin: 0 0 10px;
}

.pc-form__hint {
  font-size: 16px;
  font-family: qanelas-light, sans-serif;
  color: rgba(66, 51, 42, 0.7);
  margin: 0 0 20px;
  line-height: 1.5;
}

.pc-form__row {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
}

.pc-form__row--2>* {
  flex: 1;
  min-width: 0;
}

.pc-form input,
.pc-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: #FFF8ED;
  border: 1px solid var(--pc-head);
  border-radius: 10px;
  font: 15px/1.45 inherit;
  color: var(--pc-head);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pc-form input::placeholder,
.pc-form textarea::placeholder {
  color: rgba(66, 51, 42, 0.55);
}

.pc-form textarea {
  min-height: 150px;
  resize: vertical;
}

.pc-form input:focus,
.pc-form select:focus,
.pc-form textarea:focus {
  outline: none;
  border-color: #E9E3D6;
  box-shadow: 0 0 0 3px #E9E3D6;

}

.pc-btn {
  background: #786456;
  color: #FAF3E3;
  border: 2px solid transparent;
  /* reserve the space so hover border doesn't shift layout */
  border-radius: 10px;
  padding: 14px 28px;
  letter-spacing: 2px;
  font: 600 14px/1 "Qanelas-Medium", sans-serif;
  cursor: pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.pc-btn:hover,
.pc-btn:focus-visible {
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456;
  outline: none;
}


.pc-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ========== Map ========== */
.pc-map {
  padding: clamp(24px, 5vw, 48px) 0;
}

.pc-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 10px;
  display: block;
}

/* ========== FAQ ========== */
.pc-faq {
  padding: clamp(36px, 7vw, 80px) 0;
}

.pc-faq__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: start;
}

.pc-faq__desc {
  opacity: .9;
}

.pc-accordion {
  display: block;
}

.pc-acc {
  border-bottom: 1px solid #d8ccbe;
  padding: 14px 0;
}

.pc-acc:first-of-type {
  border-top: 1px solid #d8ccbe;
}

.pc-acc>summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 28px;
  font: 500 16px/1.6 "Qanelas-Regular", sans-serif;
  color: var(--pc-head);
}

.pc-acc>summary::-webkit-details-marker {
  display: none;
}

.pc-acc>summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--pc-head);
}

.pc-acc[open]>summary::after {
  content: "–";
}

.pc-acc__body {
  padding: 8px 0 2px;
  color: var(--pc-text);
  font-size: 15px;
  line-height: 1.65;
}

/* ========== Responsive ========== */
@media (max-width: 1199.98px) {
  .pc-intro__grid {
    grid-template-columns: 1fr;
  }

  .pc-intro__cards {
    grid-template-columns: 1fr 1fr;
  }

  .pc-cta__grid {
    grid-template-columns: 1fr;
  }

  .pc-faq__grid {
    grid-template-columns: 1fr;
  }

  .pc-form {
    width: 100%;
    max-width: 550px;
    padding: 28px 24px;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .pc-hero__bg {
    height: 150px;
  }

  .pc-intro__cards {
    grid-template-columns: 1fr;
  }

  .pc-form__row--2 {
    flex-direction: column;
  }

  .pc-form {
    padding: 24px 20px;
    margin: 0;
    box-shadow: 0 12px 28px rgba(80, 64, 50, 0.12);
  }
}


/* Custom select that matches .pc-form fields */
.pc-select {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  font: 15px/1.45 inherit;
  color: rgba(66, 51, 42, 0.55);
}

/* Closed state (the beige box) */
.pc-select__btn {
  width: 100%;
  text-align: left;
  background: #FFF8ED;
  border: 1px solid var(--pc-head);
  border-radius: 10px;
  padding: 12px 40px 12px 14px;
  font: inherit;
  color: inherit;
  line-height: 1.45;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Arrow */
.pc-select__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: 14px 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2l5 4 5-4' stroke='%23664530' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* The dropdown menu */
.pc-select__list {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  box-sizing: border-box;
  background: #FFF8ED;
  /* same beige as inputs */
  border: 1px solid var(--pc-head);
  /* same border */
  border-radius: 10px;
  /* same radius */
  padding: 14px;
  margin: 0;
  list-style: none;
  z-index: 9999;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .12);
  display: none;
  /* hidden by default */
}

/* show dropdown when open */
.pc-select[data-open="true"] .pc-select__list {
  display: block;
}

/* each option */
.pc-select__option {
  font: inherit;
  color: rgba(66, 51, 42, 0.55);
  line-height: 1.45;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 6px;
}

/* hover effect */
.pc-select__option:hover {
  background: #E9E3D6;
  /* light tan you already use in cards/CTA. :contentReference[oaicite:3]{index=3} */
  padding-left: 10px;
}

/* focus ring same as .pc-form focus */
.pc-select__btn:focus,
.pc-select[data-open="true"] .pc-select__btn {
  outline: none;
  border-color: #E9E3D6;
  box-shadow: 0 0 0 3px #E9E3D6;
}



/* Full-width background block for the process/timeline section */
.process-section-bg {
  background-color: #E6E2D6;
  /* soft grey-beige like your screenshot */
  padding: 40px 0 60px;
  /* top/bottom breathing room */
}

/* Keep your inner content aligned like in the screenshot */
.process-section-bg .process-container {
  max-width: 1280px;
  /* match your site container width */
  margin: 0 auto;
  padding: 0 20px;
  /* side gutter so content isn't touching edges */
}


/* ===========================
   Privacy & Policy Section
   =========================== */

.privacy-section {
  background-color: #FFF8ED;
  /* same warm beige as screenshot */
  color: #3B2C23;
  /* deep brown body text */
  padding: 200px 16px 5px;
  font-family: "Qanelas-Regular", "QanelasDEMO-Thin", system-ui, sans-serif;
  line-height: 1.6;
}

.privacy-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* pill-style back button */
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* visual */
  background-color: transparent;
  border: 2px solid #3B2C23;
  border-radius: 10px;
  padding: 5px 15px;
  color: #3B2C23;
  text-decoration: none !important;
  /* type */
  font-family: "Qanelas-Medium", sans-serif;
  font-size: clamp(12px, 1vw + 14px, 12px);
  line-height: 1.2;
  /* interaction */
  transition:
    background-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    border-color .22s ease,
    color .22s ease;

  /* optional spacing under it */
  margin-bottom: 32px;
}

/* arrow */
.pp-back svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;

  color: #42332A;
  /* that softer grey arrow color from screenshot */
  transition: transform .22s ease, color .22s ease;
}

/* no underline ever */
.pp-back span {
  text-decoration: none !important;
}

/* hover / focus look */
.pp-back:hover,
.pp-back:focus-visible {
  background-color: #FFF8ED;
  /* same page tone, feels pressed */
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
  border-color: #42332A;
  color: #42332A;
  outline: none;
  text-decoration: none !important;
}

.pp-back:hover svg,
.pp-back:focus-visible svg {
  color: #3B2C23;
  /* arrow darkens to match text */
  transform: translateX(-4px);
  /* tiny slide left */
}




/* main title */
.pp-title {
  font-family: "Qanelas-Medium", sans-serif;
  font-size: clamp(28px, 2vw + 20px, 36px);
  line-height: 1.2;
  color: #3B2C23;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
}

.privacy-section .pp-title {
  text-align: left !important;
  margin-left: 0;
}

/* intro / paragraph body */
.pp-body,
.pp-body p {
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-size: 22px;
  line-height: 1.7;
  color: #5A493E;
  margin: 0 0 24px;
  max-width: 1200px;
}

.pp-body p+p {
  margin-top: 16px;
}

/* section headings inside policy */
.pp-heading {
  margin-top: 48px;
  margin-bottom: 36px;
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 40px;
  line-height: 1.4;
  color: #3B2C23;
  letter-spacing: -0.015em;
}

/* bullet list */
.pp-list {
  margin: 0 0 24px;
  padding-left: 20px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-size: 22px;
  line-height: 1.7;
  color: #3B2C23;
}

.pp-list li {
  margin-bottom: 16px;
}

/* company block at bottom */
.pp-company-block {
  margin-top: 48px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3B2C23;
}

.pp-company-name {
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #3B2C23;
  letter-spacing: -0.02em;
  text-transform: none;
}

.pp-byter {
  font-family: "Qanelas-UltraLight", sans-serif;
}

/* make phone/email links match body text */
.privacy-section a {
  color: #3B2C23;
  text-decoration: none;
}

.privacy-section a:hover {
  text-decoration: underline;
}

/* spacing tweaks on mobile */
@media (max-width: 480px) {
  .privacy-section {
    padding-top: 120px;
    padding-bottom: 5px;
  }

  .pp-title {
    font-size: 28px;
  }

  .pp-heading {
    font-size: 18px;
  }
}



/* ============================
   "Start designing Your Pod" CTA block
   ============================ */

.pods-design-cta {
  background-color: #FFF8ED;
  /* same page bg tone */
  padding: 10px 16px 10px;
  /* top gap under payments + bottom breathing */
  font-family: "QanelasDEMO-Thin", sans-serif;
  color: #FFF8ED;
}

.pods-design-cta__wrap {
  position: relative;
  max-width: 1270px;
  /* similar width to your screenshot card */
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  /* swap this image URL to your pod background image */
  background-image: url("/assets/img/55.jpg")!important;
  background-size: cover;
  background-position: center;
  min-height: 580px;
  display: flex;
  align-items: center;
}

/* subtle dark gradient on the left so text is readable */
.pods-design-cta__overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.28) 40%,
      rgba(0, 0, 0, 0.05) 70%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* text block */
.pods-design-cta__inner {
  position: relative;
  /* sit above overlay */
  z-index: 2;
  padding: 32px 32px 40px;
  max-width: 520px;
  /* keep text on the left half just like screenshot */
  color: #FFF8ED;
}

/* heading */
.pods-design-cta__title {
  margin: 0 0 44px;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 400;
  line-height: 1.15;
  color: #FFF8ED;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2.2vw + 22px, 70px);
}

.pods-design-cta__title span {
  display: block;
  /* forces the line break: "Start designing" / "Your Pod" */
}

/* sub text */
.pods-design-cta__desc {
  margin: 0;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-weight: 300;
  line-height: 1.4;
  color: #FFF8ED;
  letter-spacing: -0.02em;
  font-size: clamp(10px, 0.5vw + 14px, 30px);
  opacity: 0.9;
  white-space: nowrap;
  /* keep it on one line */
}

/* responsive tweaks */
@media (max-width: 600px) {
  .pods-design-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pods-design-cta__wrap {
    min-height: 300px;
  }

  .pods-design-cta__inner {
    padding: 24px 20px 32px;
    max-width: 90%;
  }

  .pods-design-cta__desc {
    white-space: wrap;
    /* keep it on one line */
  }
}




/* ===========================
   Pod Showcase Card Section
   =========================== */

.pod-showcase {
  background-color: #FFF8ED;
  /* remove the side padding so the card can sit where it wants */
  padding: 120px 0 48px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  color: #4A3A31;
}

.pod-showcase__card {
  background-color: #E9E3D6;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .06);
  padding: 32px 24px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;

  /* card sizing / gutter logic */
  width: calc(100vw - 32px);
  /* 16px gutter left + 16px gutter right */
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  box-sizing: border-box;
}

/* optional tweak for tiny screens */
@media (max-width: 480px) {
  .pod-showcase__card {
    width: calc(100vw - 24px);
    /* 12px gutters on very small screens */
  }
}




/* LEFT COLUMN */
.pod-showcase__left {
  flex: 1 1 380px;
  max-width: 640px;
  color: #4A3A31;
  padding-left: 60px;
}

/* MAIN TITLE "PODS by tér – DUAL PITCH" */
.pod-showcase__title {
  font-size: clamp(28px, 3.5vw + 20px, 70px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 400;
  font-family: "Qanelas-Medium", sans-serif;
  color: #2D241E;
  white-space: nowrap !important;
  align-items: baseline;
  gap: 8px 6px;
}

.pod-showcase__title-main {
  font-family: "Qanelas-Regular", sans-serif;
  font-size: clamp(34px, 3.5vw + 20px, 70px);
  font-weight: 600;
  color: #2D241E;
  /* darker */
}

.pod-showcase__title-sub {
  font-family: "Qanelas-UltraLight", sans-serif;
  font-size: clamp(34px, 3.5vw + 20px, 70px);
  font-weight: 300;
  color: #4A3A31;
}

.pod-showcase__title-dash {
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-weight: 300;
  color: #4A3A31;
  padding-top: 40px;
}

.pod-showcase__title-variant {
  font-family: "Qanelas-Regular", sans-serif;
  font-size: clamp(14px, 1.5vw + 20px, 54px);
  font-weight: 400;
  color: #6C5A4C;
  /* slightly lighter brown/gray tone */
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* "Popular Uses of the Dual Pitch Pod" */
.pod-showcase__intro {
  margin: 0 0 36px;
  font-size: 35px;
  line-height: 1.4;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 400;
  color: #2D241E;
  letter-spacing: -0.02em;
  white-space: nowrap !important;
}

.pod-showcase__highlight {
  color: #6C5A4C;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-weight: 300;
}

/* Bullets */
.pod-showcase__list {
  margin: 0 0 54px;
  padding: 0;
  list-style: none;
  font-size: 22px;
  line-height: 1.6;
  color: #786456;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 300;
  white-space: nowrap !important;
}

.pod-showcase__list li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 26px;
}

.pod-showcase__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: #4A3A31;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-weight: 300;
}

/* BUTTONS WRAP */
.pod-showcase__buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  margin-bottom: 40px;
}

/* BUTTON STYLE (same hover behavior you asked everywhere) */
.pod-showcase__btn {
  background-color: #786456;
  color: #FAF3E3;
  border-radius: 8px;
  padding: 15px 60px;
  font-size: 18px;
  line-height: 1.2;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
  text-wrap: nowrap;
}

.pod-showcase__btn:hover,
.pod-showcase__btn:focus-visible {
  transform: translateY(-1px);
  background-color: #FFF8ED;
  color: #786456;
  border-color: #786456;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  outline: none;
}

/* RIGHT COLUMN */
.pod-showcase__right {
  flex: 1 1 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pod-showcase__img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .pod-showcase__card {
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  .pod-showcase__card {
    flex-direction: column;
  }

  .pod-showcase__right {
    order: 2;
  }

  .pod-showcase__left {
    order: 1;
  }

  .pod-showcase__title {
    font-size: clamp(26px, 2vw + 18px, 34px);
  }

  .pod-showcase__intro {
    font-size: 18px;
  }

  .pod-showcase__list {
    font-size: 15px;
    line-height: 1.55;
  }

  .pod-showcase__btn {
    font-size: 15px;
    padding: 11px 18px;
  }
}


/* make this section behave like the design screenshot */
.pod-showcase {
  background-color: #FFF8ED;
  /* page background */
  padding: 100px 0 48px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  color: #4A3A31;
}

/* override the normal .container just for THIS section */
.pod-showcase .container {
  max-width: 100%;
  /* no centering cap */
  padding-left: 32px;
  /* gutter like your reference */
  padding-right: 32px;
  margin-left: 0;
  margin-right: 0;
}

/* the beige rounded card */
.pod-showcase__card {
  width: 100%;
  background-color: #E9E3D6;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .06);
  padding: 58px 24px 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;

  /* kill the previous centering constraints if you added them */
  max-width: none;
  margin: 0;
  height: auto;
}

/* left column (text) and right column (image) */
.pod-showcase__left {
  flex: 1 1 400px;
  max-width: 560px;
  color: #4A3A31;
}

.pod-showcase__right {
  flex: 1 1 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pod-showcase__img {
  max-width: 80%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* responsive: stack on mobile like your earlier design */
@media (max-width: 768px) {
  .pod-showcase__card {
    flex-direction: column;
  }

  .pod-showcase__left {
    max-width: 100%;
  }

  .pod-showcase__right {
    justify-content: flex-start;
  }

  .pod-showcase__title {
    margin: 0px 0 8px;
    font-size: clamp(28px, 3.5vw + 20px, 70px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 400;
    font-family: "Qanelas-Medium", sans-serif;
    color: #2D241E;
    white-space: wrap !important;

  }

  .pod-showcase__left {
    flex: 1 1 380px;
    max-width: 640px;
    color: #4A3A31;
    padding-left: 0px;
  }

  .tp-service-2-text-content p {
    font-size: 15px !important;
    font-family: 'QanelasDEMO-Thin', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
  }
}

/* ============================
   Lifestyle Feature Block (no card)
   ============================ */

.pod-feature {
  background-color: #FFF8ED;
  /* same overall page bg */
  padding: 0px 0 80px !important;
  font-family: "QanelasDEMO-Thin", sans-serif;
  color: #3B2C23;
}

/* full-width row with nice 32px gutters */
.pod-feature__row {
  max-width: 100%;
  padding-left: 80px;
  padding-right: 0px;
  margin-left: 0;
  margin-right: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

/* LEFT COLUMN */
.pod-feature__text {
  flex: 1 1 460px;
  max-width: 750px;
  color: #3B2C23;
  margin-right: 50px;
}

/* headline: "Classic Design, / Peak Performance." */
.pod-feature__headline {
  margin: 0 0 24px;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-size: clamp(28px, 2.2vw + 22px, 60px);
  color: #3B2C23;
}

.peak {
  color: #6C5A4C;
  /* slightly lighter brown/gray tone */
  font-family: "qanelas-light", sans-serif;
  font-weight: 400;
}

.pod-feature__headline span {
  display: block;
  /* force two lines exactly like screenshot */
}

/* body copy */
.pod-feature__body {
  font-family: "qanelas-light", sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.015em;
  margin: 0 0 54px;
  max-width: 550px;
  text-align: justify;
}

.pod-feature__body p {
  margin: 0 0 15px;
  font-family: "qanelas-light", sans-serif;
  font-size: 22px;
  line-height: 1.6;
  color: #4A3A31;
}

/* RIGHT IMAGE COLUMN */
.pod-feature__image {
  flex: 1 1 800px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pod-feature__img {
  display: block;
  margin-right: 20px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* reuse your brown -> cream hover button */
.pod-showcase__btn {
  background-color: #786456;
  color: #FAF3E3;
  border-radius: 8px;
  padding: 12px 50px;
  font-size: 16px;
  line-height: 1.2;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid transparent;
}

.pod-showcase__btn:hover,
.pod-showcase__btn:focus-visible {
  transform: translateY(-1px);
  background-color: #FFF8ED;
  color: #786456;
  border-color: #786456;
  outline: none;
}


.pod-showcase__btn2 {
  background-color: #786456;
  color: #FAF3E3;
  border-radius: 8px;
  padding: 12px 90px;
  font-size: 22px;
  line-height: 1.2;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid transparent;
}

.pod-showcase__btn2:hover,
.pod-showcase__btn2:focus-visible {
  transform: translateY(-1px);
  background-color: #FFF8ED;
  color: #786456;
  border-color: #786456;
  outline: none;
}

/* responsive stack on mobile */
@media (max-width: 768px) {
  .pod-feature__row {
    flex-direction: column;
  }

  .pod-feature__text {
    max-width: 100%;
  }

  .pod-feature__image {
    justify-content: flex-start;
  }

  .pod-feature__headline {
    font-size: clamp(30px, 2vw + 18px, 60px);
    line-height: 1.25;
    text-align: justify;
    padding: 0 20px 10px;
  }

  .pod-feature__body {
    font-size: 15px;
    line-height: 1.55;
  }

  .pod-showcase__btn {
    font-size: 15px;
    padding: 11px 18px;
  }

}


.tp-service-2-text-content p {
  font-size: 22px;
  font-family: 'QanelasDEMO-Thin', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}





/* ============================
   DESIGN RANGE CARD
   ============================ */

.design-range {
  background: #FFF8ED;
  padding: 0 16px 80px;
  color: #3B2C23;
  font-family: "QanelasDEMO-Thin", sans-serif;
}

.design-range__card {
  max-width: 1500px;
  margin: 0 auto;
  background-color: #E9E3D6;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 20px;
  padding: 100px 24px 100px;
  text-align: center;
  line-height: 1.5;
  color: #3B2C23;
}


/* "DESIGN RANGE" */
.design-range__heading {
  margin: 0 0 8px;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(20px, 2vw + 18px, 60px);
  line-height: 1.3;
  color: #42332A;
}

/* "Designed by us, for you" */
.design-range__sub {
  margin: 0 0 24px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.4;
  color: #5A493E;
}

/* "Standard Collections" pill button */
.design-range__mode-btn {
  display: inline-block;
  margin: 0 auto 24px;
  padding: 15px 60px;
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: #3B2C23;
  text-align: center;
  background: #FAF3E3;
  border: 1px solid #3B2C23;
  border-radius: 6px;
}

/* body paragraphs under Standard Collections + Custom Creations */
.design-range__copy {
  max-width: 1100px;
  margin: 0 auto 36px;
  color: #4A3A31;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: -0.015em;
  text-align: justify;
  font-family: "qanelas-light", sans-serif;
}

.design-range__copy--bold {
  font-weight: 600;
  color: #3B2C23;
  word-spacing: 6px;
}


/* size pill row: SMALL / MEDIUM / ... */
.design-range__size-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 58px;
  margin: 24px auto 32px;
  max-width: 680px;
}

.design-range__size-btn {
  background: #CFC9BD;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 15px 70px;
  text-wrap: nowrap;
}


/* specs row */
.design-range__specgrid {
  max-width: 1100px;
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
  color: #4A3A31;
}

/* left side (dimensions / price) */
.design-range__specs {
  flex: 1 1 320px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  color: #4A3A31;
}

.design-range__spec-line {
  margin: 50px 0 70px;
  font-size: 12px;
  line-height: 1.5;
  color: #4A3A31;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.design-range__spec-line span {
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .05em;
  color: #3B2C23;
}

/* price block */
.design-range__price {
  margin-top: 16px;
}

.design-range__price-label {
  line-height: 1.4;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4A3A31;
  margin-bottom: 28px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-size: 15px;
}

.design-range__price-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  color: #3B2C23;
  margin-bottom: 12px;
}

.currency-icon-price {
  width: 46px;
  height: auto;
  display: inline-block;
}

.design-range__price-note {
  font-size: 14px;
  line-height: 1.4;
  color: #4A3A31;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: "Qanelas-Regular", sans-serif;
  font-weight: 300;
  margin-top: 28px;
}


/* right side (little preview square) */
.design-range__render {
  flex: 0 0 auto;
}


.design-range__render-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}


/* divider line before "Custom Creations" */
.design-range__divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
  max-width: 680px;
  margin: 0 auto 32px;
}


/* "Custom Creations" button */
.design-range__custom-btn {
  display: inline-block;
  margin: 0 auto 24px;
  padding: 15px 60px;
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: #3B2C23;
  text-align: center;
  background: #FAF3E3;
  border: 1px solid #3B2C23;
  border-radius: 6px;
}

/* "Have a specific vision?" */
.design-range__sub-alt {
  margin: 0 0 24px;
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.4;
  color: #5A493E;
}


/* roof chips */
.design-range__roofchips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 58px;
  margin: 24px auto 32px;
  max-width: 680px;
}

.design-range__chip {
  background: #786456;
  color: #FFF8ED;
  border: none;
  border-radius: 4px;
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 15px 60px;
  text-wrap: nowrap;
}


/* responsive layout tweaks */
@media (max-width: 480px) {
  .design-range__specgrid {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .design-range__render {
    order: -1;
    /* show the little preview square above specs on mobile */
    margin-bottom: 16px;
  }

  .design-range__render-box {
    width: 96px;
    height: 96px;
  }
}




/* ============================
   "A Space Specifically Tailored..." band
   ============================ */

/* full-width beige band */
.pods-tailor {
  background-color: #E9E3D6;
  /* slightly darker than page bg */
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  /* enough vertical space */
  padding: 20px 0;
  font-family: "QanelasDEMO-Thin", sans-serif;
  color: #3B2C23;
}

/* inner row */
.pods-tailor__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* LEFT SIDE TEXT */
.pods-tailor__text {
  flex: 1 1 360px;
  max-width: 420px;
  color: #3B2C23;
  margin: 30px 0 0px;
}

/* small label "TIMELESS DESIGN" */
.pods-tailor__eyebrow {
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6F6A63;
  margin-bottom: 20px;
}

/* main heading */
.pods-tailor__headline {
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 400;
  text-wrap: wrap;
  color: #3B2C23;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 24px;
  font-size: clamp(24px, 2vw + 20px, 48px);
}

/* body paragraph under heading */
.pods-tailor__body {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 300;
  color: #4A3A31;
  letter-spacing: -0.015em;
  max-width: 460px;
  font-family: "qanelas-light", sans-serif;
  text-align: justify;
}

/* button (brown -> cream hover, squared corners like screenshot) */
.pods-tailor__btn {
  display: inline-block;
  background-color: #786456;
  color: #FAF3E3;
  border-radius: 4px;
  border: 2px solid transparent;
  padding: 13px 35px;
  font-size: 14px;
  line-height: 1.2;
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.pods-tailor__btn:hover,
.pods-tailor__btn:focus-visible {
  background-color: #FFF8ED;
  color: #786456;
  border-color: #786456;
  transform: translateY(-1px);
  outline: none;
}

/* RIGHT SIDE IMAGE */
.pods-tailor__media {
  flex: 1 1 600px;
  min-width: 740px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pods-tailor__img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* responsive stacking */
@media (max-width: 768px) {
  .pods-tailor__wrap {
    flex-direction: column;
    align-items: center !important;
  }

  .pods-tailor__eyebrow {
    padding-left: 25px;
  }

  .pods-tailor__media {
    justify-content: flex-start;
  }

  .pods-tailor__headline {
    max-width: 300px;
    font-size: clamp(25px, 3vw + 18px, 28px);
    line-height: 1.3;
    padding-left: 25px;
  }

  .pods-tailor__body {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.55;
    text-align: justify;
    padding-left: 25px;
  }

  .pods-tailor__btn {
    font-size: 14px;
    padding: 10px 16px;
    margin-left: 25px;
  }
}


.bbq-wrap {
  text-wrap: wrap;
}


/* the wrapper that was holding the inline SVG */
.pods-included__grid .feature .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  /* match whatever size you want for the icon circle/box */
  height: 58px;
  background-color: transparent;
  /* or keep a subtle bg if you were using one */
  border-radius: 6px;
  /* soften if you like */
  flex-shrink: 0;
}

/* make sure external icons scale cleanly inside */
.pods-included__grid .feature .ico-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}



/* "PODS" */
.pod-brand-main {
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 500;
  color: #2D241E;
  /* slightly deeper for PODS */
}

/* "by tér" */
.pod-brand-sub {
  font-family: "Qanelas-Ultralight", sans-serif;
  color: #42332A;
}

/* the small "x" between brands */
.pod-partner-x {
  font-family: "Qanelas-Medium", sans-serif;
  font-size: 30px;
  font-weight: 200 !important;
  color: #786456;
  margin: 0 4px 0 4px;
}

/* "OKRA" */
.pod-partner-name {
  /* use your OKRA font here */
  font-family: "Caviar_Dreams_Bold", sans-serif;
  /* <- your custom font family */
  font-weight: 500;
  color: #550000;
  /* deep red / burgundy like screenshot */
  letter-spacing: 0.02em;
}

/* the dash " - " */
.pod-dash {
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-weight: 300;
  color: #786456;
  margin: 0 4px 0 4px;
}

/* "FLAT ROOF PETS POD" */
.pod-variant {
  font-family: "Qanelas-Regular", sans-serif;
  font-size: clamp(14px, 1.5vw + 20px, 54px);
  font-weight: 400;
  color: #786456;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}



/* the whole card */
.pods-card {
  background-color: #E6E2D6;
  /* assuming you're already using this beige */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centers children like title, text, button */
  text-align: center;
  /* makes text itself centered */
  color: #3B2C23;
}

/* title: DUAL PITCH / FLAT ROOF / etc */
.pods-card__title {
  font-family: "Qanelas-Medium", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 1vw + 28px, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #3B2C23;
  margin: 24px 0 24px;
  text-align: center;
  /* make sure it's centered even if overridden elsewhere */
  width: 100%;
}

/* paragraph under the title */
.pods-card__text {
  font-family: "QanelasDEMO-Thin", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: #4A3A31;
  max-width: 700px;
  /* keeps line length nice, like your screenshot */
  margin: 0 auto 32px;
  /* centers block and gives space before button */
  text-align: center;
  /* force center */
}

/* button */
.pods-card__btn {
  background: #786456;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 16px 24px;
  font: 400 20px/1.3 "Qanelas-Regular", sans-serif;
  text-decoration: none;
  min-width: min(90%, 520px);
  /* gives that wide button look */
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease,
    background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pods-card__btn:hover,
.pods-card__btn:focus-visible {
  background-color: #FFF8ED;
  color: #786456;
  border: 2px solid #786456;
  transform: translateY(-1px);
  outline: none;
}


.pods-card__title {
  margin: 0 0 18px;
  display: inline-block;
  /* allow inline subtitle */
}

/* small italic subtitle next to the heading */
.pods-card__subtitle {
  display: inline-block;
  font-size: clamp(18px, 2.2vw, 24px);
  /* smaller than the title */
  font-style: italic;
  font-family: 'qanelas-light', sans-serif;
  font-weight: 300;
  color: #5e4f4a;
  margin-left: 18px;
  /* space between title and subtitle */
  transform: translateY(-12%);
  /* lift it a little to align with top */
  white-space: nowrap;
  text-transform: capitalize;
}



/* --- HERO VIDEO: lock stacking + stop overlaying below content --- */

/* 1) The whole video section is a low layer, isolated */
.tp-video-area {
  position: relative;
  z-index: 0;
  /* behind anything that follows */
  isolation: isolate;
  /* contains its own stacking context */
}

/* 2) Wrapper & video: no accidental promotion */
.tp-video-wrap {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* keeps rounded corners clean */
  will-change: auto;
  /* undo promote-to-layer */
  transform: none !important;
}

.tp-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* video won't capture clicks below */
}

/* 3) Overlay and text only sit above the video, not the next sections */
.tp-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* above video only */
  pointer-events: none;
}

.tp-video-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* text above overlay + video only */
  pointer-events: none;
}

/* 4) The next sections: ensure they naturally paint above */
.pods-tailor,
.whyus,
.tpproject,
.tp-subsidiaries-area,
.discover-section {
  position: relative;
  z-index: 1;
  /* above the hero block */
}

/* 5) Safari/ScrollSmoother edge-case guard */
#smooth-content {
  transform-style: flat;
}

/* Remove accidental pull-up that slips under the video */
.pods-tailor,
.whyus,
.tpproject,
.tp-subsidiaries-area,
.discover-section {
  margin-top: clamp(24px, 4vw, 80px);
}



/* === Header layout: reserve a right slot for the burger === */
:root {
  --nav-edge: 58px;
  /* gutter from the right edge */
  --burger-w: 42px;
  /* visual width to reserve for the icon */
}

/* make the container the positioning context + reserve space on the right */
#header-sticky .container-1870 {
  position: relative;
  padding-right: calc(var(--nav-edge) + var(--burger-w));
  /* keeps CTAs away from the burger */
}

/* pin the burger to the far-right, vertically centered */
#header-sticky .tp-header-2-menu-bar .tp-offcanvas-open-btn {
  position: absolute;
  right: var(--nav-edge);
  top: 50%;
  transform: translateY(-50%);
  width: var(--burger-w);
  height: 28px;
  margin: 0;
  z-index: 5;
}

/* nudge the two CTA buttons a bit left so they never collide with the burger */
#header-sticky .tp-header-2-cart .button-group {
  display: inline-flex;
  gap: 18px;
  padding-right: 28px;
}

/* responsive tweaks */
@media (max-width: 991.98px) {
  #header-sticky .container-1870 {
    padding-right: 16px;
  }

  #header-sticky .tp-header-2-menu-bar .tp-offcanvas-open-btn {
    right: 16px;
  }

  #header-sticky .tp-header-2-cart .button-group {
    padding-right: 20px;
  }
}



/* responsive stacking */
@media (max-width: 768px) {
  .section-pad {
    padding: 70px 0 10px;
  }

  .pods-intro__title {
    line-height: 1.3;
    font-size: 28px !important;
    letter-spacing: -0.02em;
    text-align: justify;
  }

  .pods-intro__desc {
    font-size: 14px;
    text-align: justify;
  }

  .pods-tailor {
    padding: 30px 0;
  }

  .whyus__head h2 {
    margin-top: 30px;
    font-size: 28px;
    text-align: center;
  }

  .whyus__head p {
    line-height: 1.6;
    font-size: 14px;
    text-align: justify;
  }

  .whyus__caption h3 {
    margin: 35px 0 20px;
    font-weight: 400;
    font-family: 'Qanelas-Regular', sans-serif;
    font-size: 28px;
    color: #42332A;
  }

  .whyus__caption p {
    margin: 0px 0 20px;
    line-height: 1.5;
    font-size: 14px;
    text-align: justify;
  }

  .whyus__label {
    font-weight: 500;
    font-family: 'Qanelas-Medium', sans-serif;
    font-size: 16px;
    letter-spacing: .01em;
  }

  .whyus__content {
    color: #5D574F;
    line-height: 1.5;
    font-size: 14px;
    text-align: left;
    text-justify: inter-word;
    /* tell browser to adjust spaces between words */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* allow breaking long words */
  }


  .whyus {
    padding-bottom: 60px;
  }

  .tp-project-2-content span {
    color: #5A493E;
    font-size: 15px;
    line-height: 1;
    margin-top: 30px;
  }

  .ids__head h2 {
    margin: 25px 0 6px;
    letter-spacing: .02em;
    font-family: 'Qanelas-Medium', sans-serif;
    font-size: 28px;
    color: #42332A;
  }

  .ids__sub {
    margin: 20px;
    font-style: italic;
    color: #5A493E;
    font-family: 'qanelas-light', sans-serif;
    font-size: 15px;
  }

  .ids__eyebrow {
    margin: 0 0 12px;
    font-weight: 400;
    font-family: 'qanelas-light', sans-serif;
    color: #5A493E;
    font-size: 18px;
    line-height: 1.6;
  }

  .ids__copy p {
    color: #5A493E;
    line-height: 1.75;
    margin: 0px 0 20px;
    font-family: 'qanelas-light', sans-serif;
    font-size: 14px;
    text-align: justify;
  }

  .discover-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 2px;
    border: 2px solid #786456;
    border-radius: 10px;
    text-decoration: none;
    color: #FAF3E3;
    font-weight: 500;
    font-size: 16px;
    background-color: #786456;
    transition: all 0.3s ease;
  }

  .discover-header h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #42332A;
  }

  .hero-title {
    font-size: 30px;
    text-wrap: wrap !important;
  }

  .pods-card__title {
    font-size: 28px;
  }

  .pods-card__text {
    font-size: 15px;
    /* force center */
    text-align: justify;
    padding: 0 20px 4px;
  }

  .pod-showcase__list {
    font-size: 15px;
    line-height: 1.6;
    white-space: wrap !important;
  }

  .subsidiary-logo {
    max-height: 50px;
    /* adjust size */
    width: auto;
  }

  .pp-body p {
    font-family: "QanelasDEMO-Thin", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5A493E;
    margin: 0 0 24px;
    max-width: 1200px;
  }

  .pp-list {
    margin: 0 0 24px;
    padding-left: 20px;
    font-family: "QanelasDEMO-Thin", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #3B2C23;
  }

  .pod-feature {
    background-color: #FFF8ED;
    /* same overall page bg */
    padding: 0px 0px 0px !important;
    font-family: "QanelasDEMO-Thin", sans-serif;
    color: #3B2C23;
  }

  .pod-feature__row {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
  }

  .pod-feature__body p {
    margin: 0 0 15px 20px;
    font-family: "qanelas-light", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4A3A31;
  }

  .titles h2 {
    font-size: clamp(30px, 2vw + 18px, 60px);
    font-weight: 700;
    margin: 0;
    color: #42332A;
  }

  .titles p {
    font-size: 15px;
    color: #777;
    margin: 5px 0 0;
  }

  .cladding-label {
    display: center;
    background-color: #FAF3E3;
    border: 1.5px solid #42332A;
    border-radius: 15px;
    padding: 4px 8px;
    font-size: 12px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .design-range__sub {
    margin: 0 0 24px;
    font-family: "QanelasDEMO-Thin", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.4;
    color: #5A493E;
  }

  .design-range__sub-alt {
    margin: 0 0 24px;
    font-family: "QanelasDEMO-Thin", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.4;
    color: #5A493E;
  }

  .design-range__mode-btn {
    display: inline-block;
    margin: 0 auto 24px;
    padding: 10px 10px;
    font-family: "Qanelas-Medium", sans-serif;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    color: #3B2C23;
    text-align: center;
    background: #FAF3E3;
    border: 1px solid #3B2C23;
    border-radius: 6px;
  }

  .design-range__custom-btn {
    display: inline-block;
    margin: 0 auto 24px;
    padding: 10px 10px;
    font-family: "Qanelas-Medium", sans-serif;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    color: #3B2C23;
    text-align: center;
    background: #FAF3E3;
    border: 1px solid #3B2C23;
    border-radius: 6px;
  }

}


/* ===== Pods – Tailored Space / Timeless Design ===== */
.pods-tailor {
  /* remove any theme min-heights that cause tall sections */
  min-height: auto !important;
}

.pods-tailor__wrap {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1.95fr;
  align-items: center;
  /* desktop only */
  gap: 48px;
  padding: 52px 14px;
}

/* tighten default element margins so spacing is intentional */
.pods-tailor__eyebrow {
  margin: 0 0 10px;
  letter-spacing: .12em;
}

.pods-tailor__headline {
  margin: 0 0 24px;
}

.pods-tailor__body {
  margin: 0 0 18px;
}

.pods-tailor__btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* image: block so it can’t create extra line-height space */
.pods-tailor__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ===== Tablet & down: stack, remove vertical centering & extra padding ===== */
@media (max-width: 1024px) {
  .pods-tailor__wrap {
    grid-template-columns: 1fr;
    align-items: start;
    /* stop vertical centering that makes gaps */
    gap: 24px;
    padding: 40px 20px !important;
    /* smaller vertical padding */
    min-height: auto !important;
    /* just in case */
  }

  .pods-tailor__text {
    order: 1;
  }

  .pods-tailor__media {
    order: 2;
    margin: 0 !important;
  }
}

/* ===== Phones: even tighter spacing, clamp image width ===== */
@media (max-width: 575.98px) {
  .pods-tailor__wrap {
    padding: 8px 6px !important;
    gap: 16px;
  }

  .pods-tailor__img {
    width: min(620px, 120%);
    /* prevents huge empty area below */
  }
}

/* PODS card — mobile & iPad */
@media (max-width: 1024px) {
  .pod-showcase .container {
    max-width: 1680px;
    /* keeps the card nicely centered */
    margin-inline: auto;
  }

  .pod-showcase__card {
    display: flex;
    flex-direction: column;
    /* stack */
    gap: 16px;
    background: #E9E3D6;
    /* card fill like mock */
    border: 1px solid rgba(120, 100, 86, .15);
    border-radius: 10px;
    padding: 18px 18px 22px;
  }

  /* Image first */
  .pod-showcase__right {
    order: -1;
  }

  .pod-showcase__img {
    display: block;
    width: 95%;
    max-width: 440px;
    margin: 0px auto 0px;
    border-radius: 12px;
  }

  /* Title line: "PODS by tér – DUAL PITCH" */
  .pod-showcase__title {
    margin: 0px 0 10px;
    font-family: "Qanelas", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #3E3128;
    text-wrap: balance;
  }

  .pod-showcase__title-main {
    font-weight: 600;
  }

  .pod-showcase__title-sub {
    font-weight: 400;
  }

  .pod-showcase__title-variant {
    font-weight: 600;
    color: #786456;
  }

  /* Subheading */
  .pod-showcase__intro {
    margin: 22px 0 22px;
    font-size: 16px;
    color: #42332A;
  }

  /* Dashed list like the mock */
  .pod-showcase__list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
  }

  .pod-showcase__list li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #6A594F;
  }

  .pod-showcase__list li::before {
    content: "–";
    position: absolute;
    left: 0;
    top: 0;
  }

  /* Buttons row (pills) */
  .pod-showcase__buttons {
    display: flex;
    gap: 20px;
    justify-content: left;
  }

  .pod-showcase__btn {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 42px;
    font-size: 13px;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid #786456;
    color: #FAF3E3;
    background: #786456;
    transition: transform .15s ease;
  }

  .pod-showcase__btn:first-child {
    background: #786456;
    /* primary pill */
    color: #FAF3E3;
    border-color: #6C5A4C;
  }

  .pod-showcase__btn:active {
    transform: translateY(1px);
  }
}

/* Super-small phones: stack the buttons */
@media (max-width: 390px) {
  .pod-showcase {
    --gutter: 12px;
  }

  /* side padding (phones) */
  @media (min-width: 768px) {
    .pod-showcase {
      --gutter: 20px;
    }

    /* a bit more space on iPad */
  }

  .pod-showcase .container {
    max-width: none;
    /* remove 640px cap */
    width: 100%;
    margin: 0;
    padding-left: calc(var(--gutter) + env(safe-area-inset-left));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  }

  .pod-showcase__card {
    margin-inline: 0;
    /* let it stretch */
    padding: 16px 16px 22px;
    /* tighten inner padding */
    border-radius: 16px;
  }
}

/* Make the card wider on mobile & iPad */
@media (max-width: 1024px) {
  .pod-showcase {
    --gutter: 12px;
  }

  /* side padding (phones) */
  @media (min-width: 768px) {
    .pod-showcase {
      --gutter: 20px;
    }

    /* a bit more space on iPad */
  }

  .pod-showcase .container {
    max-width: none;
    /* remove 640px cap */
    width: 100%;
    margin: 0;
    padding-left: calc(var(--gutter) + env(safe-area-inset-left));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  }

  .pod-showcase__card {
    margin-inline: 0;
    /* let it stretch */
    padding: 0px 16px 22px;
    /* tighten inner padding */
    border-radius: 16px;
  }

  /* keep image nicely centered inside the wider card */
  .pod-showcase__img {
    width: 100%;
    max-width: 700px;
    margin: 0px auto 0px;
  }
}



/* Center everything on ≤1024px */
@media (max-width: 1024px) {

  /* stack the header and center it */
  .cladding-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* overrides space-between */
    gap: 12px;
    text-align: center;
  }

  .titles {
    text-align: center;
  }

  .label-and-swatches {
    width: 100%;
    text-align: center !important;
  }

  .cladding-label {
    margin: 14px auto 12px;
  }

  .cladding-swatches {
    justify-content: center !important;
    gap: 14px;
    margin: 17px auto 12px;
  }

  .cladding-image-slider,
  .slider-inner {
    min-height: unset;
  }

  .slider-inner {
    display: flex;
    justify-content: center;
  }

  .slider-inner img {
    position: static !important;
    /* from absolute -> normal flow */
    width: 80%;
    height: auto;
    margin: 18px auto 0 !important;
  }
}


/* --- FIX mobile/iPad cladding gap --- */
@media (max-width: 1024px) {
  .cladding-section {
    height: auto !important;
    /* override 20–90vh */
  }

  .cladding-image-slider,
  .slider-inner {
    min-height: 0 !important;
    /* override 600px */
    height: auto !important;
  }

  .slider-inner img {
    position: static !important;
    /* let image define height */
    width: 80%;
    margin: 18px auto 0 !important;
  }

  .pod-feature__img {
    display: block;
    margin-right: 115px;
    max-width: 115%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }
}





/* ===== Cinema Pod — Intro (standalone, safe to paste) ===== */
:root {
  /* tweak these to match your brand */
  --cin-ink: #42332A;
  /* rich brown for heading */
  --cin-ink-2: #6F625A;
  /* softer copy color */
  --cin-max: 1200px;
  /* container width */
}

.cinema-intro {
  color: var(--cin-ink);
  padding-block: clamp(36px, 6vw, 96px);
}

.cinema-intro__container {
  max-width: var(--cin-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  text-align: center;
}

.cinema-intro__heading {
  font-family: "Qanelas-Regular", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.5vw, 44px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* subtle luxury spacing */
  margin: 0;
  color: var(--cin-ink);
}

.cinema-intro__sub {
  font-family: "Qanelas-Regular", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 2.15vw, 22px);
  line-height: 1.6;
  max-width: 760px;
  /* readable measure */
  margin: 18px auto 0;
  color: var(--cin-ink-2);
}

/* Optional: tighten top/bottom spacing on very small phones */
@media (max-width: 380px) {
  .cinema-intro {
    padding-block: 70px;
    padding: 60px 10px 30px;
  }

  .cinema-intro__sub {
    margin-top: 16px;
    text-align: justify;
  }
}




/* ===== Cinema Feature Section ===== */
:root {
  --cf-ink: #42332A;
  /* headings */
  --cf-muted: #6F625A;
  /* body copy */
  --cf-accent: #7E6A5A;
  /* CTA */
  --cf-accent-ink: #FFFFFF;
  --cf-max: 1350px;
  --cf-radius: 18px;
}

.cinema-feature {
  padding-block: clamp(18px, 2vw, 6px);
}

.cf-container {
  max-width: var(--cf-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}


/* Grid: copy | hero */
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
}

/* Typography */
.cf-title {
  font-family: "Qanelas-Regular", Arial, sans-serif;
  color: #42332A;
  margin: 0 0 14px 0;
  line-height: 1.8;
  letter-spacing: .01em;
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 600;
  /* first line heavy */
}

.cf-title-light {
  font-weight: 300;
  /* second line slightly lighter, like the design */
  font-family: "Qanelas-Regular", Arial, sans-serif;
  color: #42332A;
}

.cf-text {
  font-family: "qanelas-light", Arial, sans-serif;
  color: var(--cf-muted);
  font-size: clamp(14px, 2.15vw, 21px);
  line-height: 1.8;
  margin: 0 20px 14px 0;
  max-width: 44ch;
  text-align: justify;
}

/* CTA */
.cf-cta {
  display: inline-block;
  margin-top: 8px;
  background: #786456;
  color: #FFF8ED;
  text-decoration: none;
  font-family: "Qanelas-Regular", Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 50px;
  border-radius: 10px;
  border: 2px solid transparent;
  border-color: #786456;
  box-shadow: 0 2px 8px rgba(66, 51, 42, .12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.cf-cta:hover {
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456 !important;
}

.cf-cta:active {
  background: #6C5A4C;
  color: #fff;
  border-color: #786456;
  transform: translateY(0);
}

/* Images */
.cf-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(66, 51, 42, .12);
  object-fit: cover;
}

/* Thumbnails row */
.cf-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 24px);
  margin-top: clamp(18px, 3.4vw, 32px);
}

.cf-thumb {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.cf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Decorative folded-corner accent (like the screenshot) */
.cf-thumb::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 46px;
  height: 28px;
  transform: rotate(20deg);
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0% 100%);
  opacity: .9;
  pointer-events: none;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
  .cf-grid {
    grid-template-columns: 1fr;
  }

  .cf-copy {
    order: 2;
  }

  .cf-hero {
    order: 1;
  }

  .cf-text {
    max-width: 60ch;
  }
}

@media (max-width: 640px) {
  .cf-thumbs {
    grid-template-columns: 1fr;
  }

  .cf-thumb::after {
    transform: rotate(16deg);
    top: 8px;
    right: 8px;
    width: 38px;
    height: 24px;
  }

  .cinema-feature {
    padding: 0 20px 60px;
  }
}

/* Desktop: keep the hero image height matched to the copy column */
@media (min-width: 1025px) {
  .cf-hero {
    display: flex;
  }

  .cf-hero img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}






/* ===== Interior Options — Compare at a Glance ===== */
:root {
  --ic-ink: #42332A;
  /* headings */
  --ic-muted: #6F625A;
  /* body */
  --ic-stroke: #E7D9C8;
  /* subtle border */
  --ic-shadow: 0 10px 28px rgba(66, 51, 42, .10);
  --ic-radius: 18px;
  --ic-max: 1350px;
}

.interior-compare {
  padding-block: clamp(36px, 6vw, 32px);
  color: var(--ic-ink);
  font-family: "Qanelas", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

.ic-container {
  max-width: var(--ic-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Head */
.ic-head {
  text-align: center;
  max-width: 1040px;
  margin: 0 auto clamp(24px, 5vw, 40px);
}

.ic-heading {
  margin: 0 0 8px 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.6;
  font-size: clamp(22px, 3.5vw, 44px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  color: #42332A;
}

.ic-tagline {
  margin: 24px 0 24px 0;
  color: var(--ic-muted);
  font-size: clamp(13px, 2.2vw, 25px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
}

.ic-lead {
  margin: 0 0 10px 0;
  color: var(--ic-muted);
  line-height: 1.8;
  font-size: clamp(14px, 2.05vw, 20px);
  font-family: "qanelas-light", Arial, sans-serif;
  text-align: justify;
}

/* 3-column cards */
.ic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}

.ic-card-title {
  margin: 18px 0 22px 0;
  font-size: clamp(16px, 1.6vw, 20px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  color: #42332A;
  text-align: center;
}

.ic-card-note {
  margin: 0 0 25px 0;
  color: #5A493E;
  font-size: clamp(12px, 2vw, 18px);
  font-family: "qanelas-light", Arial, sans-serif;
  text-align: center;
}

/* Image frame */
.ic-frame {
  background: #E9E3D6;
  border: 1px solid var(--ic-stroke);
  border-radius: 16px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.ic-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* === OPTION B (middle column): 1 big, 2 wides, 1 big === */
.option-B {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hero  hero"
    "s1    s2"
    "hero2 hero2";
  gap: 12px;
}

.option-B .hero {
  grid-area: hero;
  aspect-ratio: 3/2;
}

.option-B .s1 {
  grid-area: s1;
  aspect-ratio: 16/10;
}

.option-B .s2 {
  grid-area: s2;
  aspect-ratio: 16/10;
}

.option-B .hero2 {
  grid-area: hero2;
  aspect-ratio: 3/2;
}

/* stack cards on mobile like your previous CSS */
@media (max-width:1024px) {
  .ic-grid {
    grid-template-columns: 1fr;
  }
}



/* ===== DAY → NIGHT ===== */
:root {
  --dn-ink: #42332A;
  /* heading color */
  --dn-muted: #6F625A;
  /* body copy */
  --dn-max: 1350px;
  --dn-radius: 0px;
  --dn-gap: 22px;
}

.daynight {
  background: var(--dn-bg);
  color: var(--dn-ink);
  padding-block: clamp(2px, 3vw, 2px);
  font-family: "Qanelas", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  padding-top: 40px;
}

.dn-wrap {
  max-width: var(--dn-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Heading + tagline */
.dn-head {
  text-align: center;
  margin-bottom: clamp(18px, 5.5vw, 52px);
}

.dn-title {
  margin: 0 0 28px 0;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.1;
  font-size: clamp(22px, 3.5vw, 44px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  color: #42332A;
}

.dn-arrow {
  display: inline-block;
  transform: translateY(-1px);
}

.dn-sub {
  margin: 0;
  color: #5A493E;
  font-size: clamp(13px, 2.05vw, 22px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  line-height: 1.7;
}

/* Images row */
.dn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dn-gap);
  align-items: start;
  justify-items: center;
  margin-top: clamp(18px, 3.5vw, 28px);
}

.dn-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 17 / 12;
  /* matches the mockup proportions */
  object-fit: cover;
  border-radius: 10px;
}

/* Responsive: stack images on small screens */
@media (max-width: 900px) {
  .dn-grid {
    grid-template-columns: 1fr;
  }
}




/* ===== Cinematic After Dark ===== */
:root {
  --ad-ink: #42332A;
  /* headings */
  --ad-muted: #6F625A;
  /* body copy */
  --ad-tint: #E9E3D6;
  /* inner frame tint */
  --ad-max: 1350px;
  --ad-radius: 16px;
}

.after-dark {
  color: var(--ad-ink);
  padding-block: clamp(36px, 6vw, 72px);
  font-family: "Qanelas", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

.ad-wrap {
  max-width: var(--ad-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Headings */
.ad-head {
  text-align: center;
}

.ad-title {
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(22px, 3.5vw, 44px);
  font-family: "Qanelas-Medium", Arial, sans-serif;
  line-height: 1.1;
  color: #42332A;
}

.ad-lead {
  margin: 50px 0 50px 0;
  color: var(--ad-muted);
  font-size: clamp(13px, 2.05vw, 22px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  line-height: 1.8;
}

.ad-subtitle {
  margin: 8px 0 42px 0;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  font-family: "Qanelas-Medium", Arial, sans-serif;
  color: #42332A;
}

/* Cards grid */
.ad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}

/* Card */
.ad-card {
  background: #E9E3D6;
  border-radius: calc(var(--ad-radius) + 6px);
  padding: clamp(10px, 1.6vw, 14px);
  text-align: center;
}

/* Image frame inside the card */
.ad-frame {
  background: var(--ad-tint);
  border: 1px solid var(--ad-stroke);
  border-radius: var(--ad-radius);
  padding: 8px;
  margin-bottom: 12px;
}

.ad-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  /* matches your mockup shape */
  object-fit: cover;
  border-radius: calc(var(--ad-radius) - 4px);
}

/* Captions */
.ad-card-title {
  margin: 0 0 6px 0;
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 17px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  color: var(--ad-ink);
}

.ad-card-copy {
  margin: 0;
  color: var(--ad-muted);
  font-size: clamp(12px, 1.05vw, 14px);
  font-family: "qanelas-light", Arial, sans-serif;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 980px) {
  .ad-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ad-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Designed for Immersion (self-contained) ===== */
.immersion {
  --card: #E9E3D6;
  /* card fill */
  --ink: #42332A;
  /* primary text */
  --muted: #7B6F63;
  /* secondary text */
  --radius: 10px;
  --gap: 22px;
  --maxw: 1250px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.immersion__container {
  max-width: var(--maxw);
  margin-inline: auto;
}

.immersion__header {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.immersion__header h2 {
  margin: 20px 0 40px;
  font-size: clamp(22px, 3.5vw, 44px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
  color: #42332A;
  line-height: 1.6;
}

.immersion__subtitle {
  margin: 0 auto;
  max-width: 880px;
  font-size: clamp(14px, 2vw, 22px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  line-height: 1.7;
  color: var(--muted);
  text-align: justify;
}

/* Grid: 3 small on top, 2 wide below (12-col) */
.immersion__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}

.immersion-card {
  background: var(--card);
  border: 1px solid;
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 .5px 0 rgba(0, 0, 0, .03);
}

.immersion-card h3 {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  font-weight: 700;
  color: #42332A;
}

.immersion-card p {
  margin: 0;
  color: #5A493E;
  font-size: 17px;
  font-family: "qanelas-light", Arial, sans-serif;
  line-height: 1.65;
}

/* sizes in grid */
.immersion-card--sm {
  grid-column: span 4;
}

.immersion-card--lg {
  grid-column: span 6;
}

.immersion-list {
  margin: 6px 0 0 1.2em;
  padding: 0;
  line-height: 1.7;
  color: #5A493E;
  font-size: 17px;
}

.immersion-list li {
  margin: .25em 0;
}

.immersion-note {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}

.immersion-note {
  margin-top: 22px !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .immersion__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .immersion-card--sm {
    grid-column: span 3;
  }

  .immersion-card--lg {
    grid-column: span 6;
  }

}

@media (max-width: 640px) {
  .immersion__grid {
    grid-template-columns: 1fr;
  }

  .immersion-card--sm,
  .immersion-card--lg {
    grid-column: 1 / -1;
  }

  .immersion {
    padding: 40px 16px;
  }

  .pod-feature__img {
    display: block;
    margin-bottom: 50px !important;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }

}


/* ===== Cinema Pod CTA (self-contained) ===== */
.cinema-cta {
  --ink: #5A4A3F;
  --muted: #75665B;
  --btn: #7A6457;
  --btn-hover: #FFF8ED;
  --radius: 10px;
  --maxw: 1250px !important;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  font-family: var(--font);
}

.cinema-cta__container {
  max-width: var(--maxw);
  margin-inline: auto;
}

.cinema-cta h2 {
  margin: 100px 0 12px;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: clamp(28px, 4.8vw, 48px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  color: #42332A;
}

.cinema-cta__sub {
  margin: 20px auto;
  max-width: 760px;
  font-size: clamp(14px, 2.6vw, 18px);
  font-family: "Qanelas-Regular", Arial, sans-serif;
  line-height: 1.7;
  color: var(--muted);
}

.cinema-cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-block;
  padding: 18px 50px;
  border-radius: var(--radius);
  background: var(--btn);
  color: #FFF8ED;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .01em;
  border: 2px solid rgba(0, 0, 0, .05);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.cta-btn:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
  border-color: #786456;
}

.cta-btn:focus-visible {
  outline: 2px solid #0000;
  box-shadow: 0 0 0 3px rgba(90, 74, 63, .2);
}

/* Mobile stacking */
@media (max-width: 520px) {
  .cinema-cta__actions {
    gap: 18px;
  }

  .cta-btn {
    width: 80%;
    max-width: 260px;
    display: inline-block;
    font-size: 13px !important;
    text-align: center;
  }

  /* RIGHT IMAGE COLUMN */
  .pod-feature__image {
    flex: 1 1 280px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .pod-feature__img {
    display: block;
    margin-right: 0px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }

  .design-range__copy {
    max-width: 1100px;
    margin: 0 auto 36px;
    color: #4A3A31;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 300;
    letter-spacing: -0.015em;
    text-align: justify;
    font-family: "qanelas-light", sans-serif;
  }
}




/* --- Design Range : mobile fixes --- */
@media (max-width: 768px) {

  .design-range__card {
    padding: 24px 16px;
  }

  /* size buttons – 2x2 grid on phones */
  .design-range__size-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
  }

  .design-range__size-btn {
    width: 100%;
  }

  /* stack the grid and remove reserved height */
  .design-range__specgrid {
    display: grid;
    /* ensure it's a grid on mobile */
    grid-template-columns: 1fr;
    /* single column */
    grid-auto-rows: auto;
    gap: 6px;
    align-items: start;
    min-height: 0 !important;
    height: auto !important;
  }

  /* show the image first on mobile */
  .design-range__render {
    order: -1;
    /* image above specs */
    min-height: 0 !important;
    height: auto !important;
  }

  /* kill any fixed heights/aspect hacks that create the gap */
  .design-range__render-box {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  -box img {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: contain;
  }

  /* tidy copy for small screens */
  .design-range__copy {
    font-size: 14px;
    line-height: 1.6;
  }

  .design-range__divider {
    margin: 24px 0;
  }

  .design-range__spec-line span {
    font-family: "Qanelas-Medium", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    color: #3B2C23;
  }
}


/* --- Design Range: make size pills fit on phones --- */
@media (max-width: 480px) {

  .design-range__card {
    padding-inline: 16px;
  }

  .design-range__size-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* allows shrink */
    gap: 12px;
    width: 100%;
  }

  .design-range__size-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    /* prevent overflow from long text */
    box-sizing: border-box;
    /* padding won't push width over 100% */
    padding: 12px 10px;
    border-radius: 8px;
    text-align: center;
    white-space: normal;
    /* let “EXTRA LARGE” wrap to 2 lines */
    line-height: 1.2;
    font-size: clamp(12px, 3.6vw, 14px);
  }
}


/* ===== Design Range: non-desktop layout ===== */
@media (max-width: 1023.98px) {

  .design-range__card {
    padding: 24px 16px;
  }

  /* 2×2 pills that always fit */
  .design-range__size-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* shrinkable columns */
    gap: 12px;
    width: 100%;
  }

  .design-range__size-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    /* prevents overflow */
    box-sizing: border-box;
    padding: 12px 10px;
    border-radius: 10px;
    text-align: center;
    white-space: normal;
    /* “EXTRA LARGE” can wrap */
    line-height: 1.2;
    font-size: clamp(12px, 3.4vw, 14px);
  }

  /* Stack image + specs and remove any fixed heights */
  .design-range__specgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    align-items: start;
  }

  .design-range__render {
    order: 1;
  }

  .design-range__render-box {
    display: flex;
    justify-content: center;
    /* horizontal center */
    align-items: center;
    /* vertical center   */
  }

  .design-range__render-box img {
    width: 50%;
    height: auto !important;
    object-fit: contain;
    display: block;
  }


  /* Comfortable copy on tablets/phones */
  .design-range__copy {
    font-size: clamp(14px, 1.9vw, 16px);
    line-height: 1.6;
  }
}

/* Optional: tiny phones */
@media (max-width: 390px) {
  .design-range__size-btn {
    padding: 10px 8px;
    font-size: 12px;
    border-radius: 8px;
  }
}

/* Desktop keeps your original row layout */
@media (min-width: 1024px) {
  .design-range__size-tabs {
    display: flex;
    gap: 16px;
  }

  .design-range__size-btn {
    white-space: nowrap;
  }
}


/* Desktop/Laptop: align tabs to the same centered width as the copy */
@media (min-width: 1024px) {
  .design-range__size-tabs {
    /* Set this to the exact max-width your paragraphs use */
    --tabs-width: 1100px;
    /* tweak to match your copy */
    max-width: var(--tabs-width);
    margin-inline: auto;
    /* center exactly like the text */

    display: grid !important;
    /* force 1 row, 4 equal cells */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    /* adjust spacing if needed */
  }

  .design-range__size-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 54px;
    padding: 0 16px;
    white-space: nowrap;
    /* keep “EXTRA LARGE” on one line */
    border-radius: 5px;
  }
}



/* ===== Roof chips: non-desktop (tablet/phone) ===== */
@media (max-width: 1023.98px) {
  .design-range__roofchips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .design-range__chip {
    display: flex;
    /* turn span into a block pill */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 10px;
    border-radius: 10px;
    line-height: 1.2;
    white-space: normal;
    /* allow wrap if needed */
    font-size: clamp(12px, 3.4vw, 14px);
  }
}

/* ===== Roof chips: desktop/laptop – align to text width ===== */
@media (min-width: 1024px) {
  .design-range__roofchips {
    --tabs-width: 1100px;
    /* ← set to the SAME max-width as your paragraph block */
    max-width: var(--tabs-width);
    margin-inline: auto;
    /* center to match the copy */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    /* adjust to taste */
  }

  .design-range__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 54px;
    padding: 0 16px;
    white-space: nowrap;
    /* keep labels on one line */
    border-radius: 8px;
  }
}


/* =========================
   PROJECT CARDS – MOBILE
   ========================= */

/* 1) General mobile (≤ 575px) */
@media (max-width: 575.98px) {
  .tpproject .tp-project-2-content {
    padding: 14px 34px 20px;
  }

  .tpproject .tp-project-2-content span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-top: 10px;
  }

  .tpproject .tp-project-2-title-sm {
    margin-top: 6px;
    /* scales with screen width, but has min & max */
    font-size: clamp(14px, 4.4vw, 18px);
    line-height: 1.25;
    letter-spacing: 0.12em;
  }

  .tpproject .tp-project-2-title-sm a {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    /* wrap text */
    word-break: break-word;
    /* never overflow */
  }
}

/* 2) Extra-small phones (≤ 380px) */
@media (max-width: 380px) {
  .tpproject .tp-project-2-content {
    padding: 12px 32px 18px;
  }

  .tpproject .tp-project-2-title-sm {
    font-size: clamp(18px, 4vw, 15px);
    line-height: 1.2;
    letter-spacing: 0.12em;
  }

  .tpproject .tp-project-2-content span {
    font-size: 10px;
    margin-top: 110px;
  }
}




/* MOBILE + IPAD OVERRIDES ONLY
   (desktop / laptop styles stay as you already have them) */
@media (max-width: 1024px) {

  /* make cards breathe inside the beige area */
  .options-section .container {
    padding-inline: 16px;
  }

  .options-section .accordion-item {
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
  }

  /* stack content nicely, keep everything left aligned */
  .options-section .accordion-toggle {
    position: relative;
    display: block;
    /* override any flex-row from desktop */
    width: 100%;
    text-align: left;
    padding: 16px 42px 22px 18px;
    /* extra right padding for arrow */
    border: none;
    background: transparent;
    box-sizing: border-box;
  }

  .options-section .accordion-toggle .label {
    display: block;
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.4;
  }

  .options-section .accordion-toggle .description {
    display: block;
    font-size: 13px;
    line-height: 1.7;
  }

  /* arrow locked to bottom-right, same position on all cards */
  .options-section .accordion-toggle .icon {
    position: absolute;
    right: 16px;
    bottom: 14px;
    margin: 0;
  }

  /* accordion content spacing for mobile/ipad */
  .options-section .accordion-content {
    padding: 0 18px 18px;
  }
}


/* ===== MOBILE + IPAD ONLY (desktop untouched) ===== */
@media (max-width: 1024px) {

  .options-section {
    padding: 0px 0 48px;
  }

  .options-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Cards full-width and centered inside beige area */
  .options-section .accordion-item {
    width: 100%;
    background-color: #E9E3D6;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  /* Header layout */
  .options-section .accordion-toggle {
    position: relative;
    display: block;
    /* ignore desktop flex row */
    width: 100%;
    padding: 16px 44px 22px 18px;
    /* right space for arrow */
    text-align: left;
    border: none;
    background: transparent;
    box-sizing: border-box;
  }

  .options-section .accordion-toggle .label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-family: 'Qanelas-Regular', sans-serif;
    line-height: 1.4;
  }

  /* IMPORTANT: stop text from being clipped/truncated */
  .options-section .accordion-toggle .description {
    display: block !important;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Arrow pinned bottom-right, same for all cards */
  .options-section .accordion-toggle .icon {
    position: absolute;
    right: 16px;
    bottom: 14px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
  }

  /* Accordion body text (inside the <ul>) */
  .options-section .accordion-content {
    padding: 0 18px 18px;
    font-size: 13px !important;
    line-height: 1.8;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .options-section .accordion-toggle {
    padding: 14px 40px 20px 16px;
  }
}


/* MOBILE + IPAD ONLY: make open accordion show ALL text */
@media (max-width: 1024px) {

  /* collapsed state */
  .options-section .accordion-content {
    display: none;
    /* hidden when closed */
  }

  /* OPEN state – nothing is cut */
  .options-section .accordion-item.active .accordion-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


.design-range__size-btn.is-active {
  background-color: #786456;
  color: #FAF3E3;
}


/* Mobile only – adjust breakpoint if you want */
@media (max-width: 768px) {

  /* Outer slider wrapper */
  .cladding-image-slider {
    min-height: 0 !important;
    height: auto !important;
    width: 80%;
    /* same as old img width */
    margin: 18px auto 0;
    /* center + top spacing */
  }

  /* Inner slider container */
  .cladding-image-slider .slider-inner {
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    /* fill the 80% wrapper */
  }

  /* Image now fills slider exactly */
  .cladding-image-slider .slider-inner img {
    position: static !important;
    width: 100%;
    /* same width as slider-inner */
    height: auto;
    display: block;
    margin: 0;
    /* no extra spacing */
  }
}




@media (max-width: 768px) {

  /* whole block */
  .pod-specs-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* center horizontally */
    justify-content: center;
  }

  /* the two lines */
  .pod-specs-block .pod-spec-line {
    text-align: center !important;
    margin: 4px 0 !important;
    /* small gap between them */
  }

  .design-range__heading {
    margin: 30px 0 8px;
    font-family: "Qanelas-Medium", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(20px, 2vw + 18px, 60px);
    line-height: 1.3;
    color: #42332A;
  }
}



/* ===== CINEMA POD SECTION ===== */

.cinema-hero {
  padding: 90px 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #42332a;
}

.cinema-hero__container {
  max-width: 1330px;
  margin: 0 auto;
}

.cinema-hero__grid {
  display: flex;
  gap: 40px;
  align-items: center;
}

/* LEFT GALLERY */
.cinema-hero__gallery {
  flex: 1.25;
  border-radius: 10px;
  overflow: hidden;
}

.cinema-hero__gallery-main img,
.cinema-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cinema-hero__gallery-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.cinema-hero__gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.cinema-hero__thumb {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
}

/* RIGHT CONTENT */
.cinema-hero__content {
  flex: 0.95;
}

.cinema-hero__title {
  margin: 0 0 16px;
}

.cinema-hero__title-main {
  display: block;
  color: #42332A;
  font-size: 43px;
  font-family: "Qanelas-Regular", sans-serif;
  letter-spacing: 0.18em;
  font-weight: 600;
  white-space: nowrap;
}

.cinema-hero__title-sub {
  display: block;
  margin-top: 6px;
  color: #42332A;
  font-size: 43px;
  font-weight: 500;
  font-family: "Qanelas-Regular", sans-serif;
}

.cinema-hero__intro {
  max-width: 620px;
  font-size: 22px;
  font-family: "qanelas-light", sans-serif;
  text-align: justify;
  line-height: 1.6;
  margin: 22px 0 18px;
  color: #5A493E;
}

/* Bullet list styled like design */
.cinema-hero__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  max-width: 420px;
  font-family: "qanelas-light", sans-serif;
  white-space: nowrap;
}

.cinema-hero__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.5;
  color: #5A493E;
}

.cinema-hero__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

/* Buttons */
.cinema-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cinema-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  font-family: "qanelas-light", sans-serif;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.cinema-hero__btn--primary {
  background: #6C5A4C;
  color: #FAF3E3;
  border-color: #6C5A4C;
}

.cinema-hero__btn--primary:hover {
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456;
}

.cinema-hero__btn--ghost {
  background: #6C5A4C;
  color: #FAF3E3;
  border-color: #6C5A4C;
}

.cinema-hero__btn--ghost:hover {
  transform: translateY(-1px);
  background: #FFF8ED;
  color: #786456;
  border-color: #786456;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .cinema-hero__grid {
    flex-direction: column;
  }

  .cinema-hero__content {
    width: 90%;
  }
}

@media (max-width: 640px) {
  .cinema-hero {
    padding: 40px 16px;
  }

  .cinema-hero__title-main {
    font-size: 24px;
    letter-spacing: 0.15em;
  }

  .cinema-hero__title-sub {
    font-size: 24px;
  }

  .cinema-hero__intro,
  .cinema-hero__list li {
    font-size: 13px;
  }

  .cinema-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .cinema-hero__btn {
    width: 100%;
    justify-content: center;
  }
}


/* Mobile: PODS by tér - BARBECUE POD in one line */
@media (max-width: 767px) {

  .pod-showcase__title {
    display: block !important;
    /* kill any flex/other layout */
    white-space: nowrap;
    /* no line breaks */
    font-size: 24px;
    /* adjust if you want */
  }

  .pod-showcase__title-main,
  .pod-showcase__title-sub,
  .pod-showcase__title-variant {
    display: inline !important;
    /* override display:block */
    font-size: inherit;
    letter-spacing: normal;
  }

  .pod-showcase__title-main {
    margin-right: 4px;
  }

  .pod-showcase__title-sub {
    margin-right: 4px;
  }

}


/* Mobile: center pod image + add space above */
@media (max-width: 575.98px) {

  .pods-tailor__wrap {
    display: block;
    max-width: 400px;
    margin: 0 auto;
    padding: 8px 0px 2px;
  }

  .pods-tailor__media {
    min-width: 0;
    /* override 740px */
    margin: 40px auto 0;
    /* <<< space above the pod */
    display: flex;
    justify-content: center;
  }

  .pods-tailor__img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    padding-top: 40px;
  }
}

/* Mobile width for WHY US section */
@media (max-width: 575.98px) {
  .whyus {
    padding: 0 20px 60px;
  }
}

/* Hide extra <br> on mobiles */
@media (max-width: 575.98px) {
  .desktop-space {
    display: none;
  }
}

/* Hero button – smaller vertically on mobile */
@media (max-width: 575.98px) {
  .viewrange-btn {
    height: 36px;
    line-height: 36px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* keep the arrow centered */
  .viewrange-btn svg {
    margin-top: 0 !important;
  }

  .interior-compare {
    padding: 0 20px 60px;
    color: var(--ic-ink);
    font-family: "Qanelas", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  }

  .daynight {
    background: var(--dn-bg);
    color: var(--dn-ink);
    padding: 0 20px 20px;
    font-family: "Qanelas", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  }

  .after-dark {
    color: var(--ad-ink);
    padding: 0 20px 0px;
    font-family: "Qanelas", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  }
}


.cinema-ter {
  font-family: 'Qanelas-UltraLight', Arial, sans-serif !important;
}


/* Center Cinema hero title + subtitle on mobile only */
@media (max-width: 575.98px) {

  /* make the text block sit over the image and fill the hero */
  .tp-hero-2-content-material {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    z-index: 2;
  }

  .tp-hero-2-content-material .hero-title {
    margin: 0 0 6px;
  }

  .tp-hero-2-content-material .hero-subtitle {
    margin: 0;
  }

  .immersion {
    --maxw: 270px;
  }

  .immersion-card p {
    margin: 0;
    color: #5A493E;
    font-size: 12px;
    font-family: "qanelas-light", Arial, sans-serif;
    line-height: 1.65;
  }

  .immersion-list {
    margin: 6px 0 0 1.2em;
    padding: 0;
    line-height: 1.7;
    color: #5A493E;
    font-size: 12px;
  }

  .cinema-cta h2 {
    margin: 0px 0 12px;
    font-weight: 700;
    letter-spacing: .01em;
    font-size: clamp(24px, 2.8vw, 48px);
    font-family: "Qanelas-Regular", Arial, sans-serif;
    color: #42332A;
    padding: 0 20px 10px;
  }

  .cinema-cta__sub {
    margin: 20px auto;
    padding: 0 20px 0px;
  }

  .cinema-cta {
    --maxw: 300px !important;
    text-align: justify;
  }

  .cta-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--radius);
    background: var(--btn);
    color: #FFF8ED;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .01em;
    border: 2px solid rgba(0, 0, 0, .05);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  }
}


/* Dual-Pitch pod card – mobile image tweak */
@media (max-width: 480px) {
  .pod-showcase__right {
    align-items: center;
    /* center image vertically in the card */
  }

  .pod-showcase__img {
    width: 95%;
    max-width: 320px;
    margin: 12px auto -28px;
    height: auto;
    object-fit: contain;
  }
}

/* Dual-Pitch buttons – mobile layout */
@media (max-width: 575.98px) {
  .pod-showcase__buttons {
    flex-direction: column;
    /* stack vertically */
    align-items: stretch;
    /* full width inside the card */
    gap: 10px;
    margin-top: 20px;
  }

  .pod-showcase__btn2 {
    width: 100%;
    padding: 13px 70px;
    /* smaller left/right padding */
    font-size: 14px;
    text-align: center;
    white-space: normal;
    /* allow text to wrap if needed */
    text-wrap: normal;
    margin-left: 16px;
  }

  .pod-showcase {
    background-color: #FFF8ED;
    /* remove the side padding so the card can sit where it wants */
    padding: 90px 0 48px;
    font-family: "QanelasDEMO-Thin", sans-serif;
    color: #4A3A31;
  }

}

/* Accordion list – smaller text on mobile */
@media (max-width: 575.98px) {
  .accordion-content ul {
    font-size: 13px !important;
    /* adjust 12–14px as you like */
    line-height: 2 !important;
    /* tighter line spacing */
  }
}


/* ───────── POD HOTSPOT SECTION (stacked, centered) ───────── */

.pod-hotspot {
  padding: 60px 0;
}

.pod-hotspot__container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* top copy */

.pod-hotspot__copy {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 28px;
}

.pod-hotspot__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A7A6B;
  margin-bottom: 8px;
}

.pod-hotspot__heading {
  font-size: 45px;
  font-family: 'Qanelas-Medium', sans-serif;
  line-height: 1.2;
  color: #42332A;
  margin-bottom: 10px;
}

.pod-hotspot__body {
  font-size: 22px;
  font-family: 'qanelas-light', sans-serif;
  line-height: 1.6;
  color: #5A493E;
  text-align: center;
}

/* image + hotspots */

.pod-hotspot__visual {
  position: relative;
  width: 100%;
  max-width: 1120px;
  overflow: hidden;
}

.pod-hotspot__image {
  display: block;
  width: 100%;
  height: auto;
}

/* hotspot dot */

.pod-hotspot__dot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pod-hotspot__dot::before {
  content: "+";
  font-size: 15px;
  font-weight: 600;
  color: #786456;
  position: relative;
  z-index: 2;
}

.pod-hotspot__dot:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* pulsing ring */

.pod-hotspot__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  z-index: 1;
  animation: pod-hotspot-pulse 2s infinite;
}

@keyframes pod-hotspot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* active state */

.pod-hotspot__dot.is-active {
  background-color: #786456;
}

.pod-hotspot__dot.is-active::before {
  color: #fff;
}

/* tooltip card */

.pod-hotspot__tooltip {
  position: absolute;
  background-color: #E9E3D6;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  padding: 15px 18px 18px;
  max-width: 280px;
  font-size: 13px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.pod-hotspot__tooltip--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pod-hotspot__tooltip-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Qanelas-Regular', sans-serif;
  color: #333;
}

.pod-hotspot__tooltip-text {
  margin: 0;
  font-size: 14px;
  font-family: 'qanelas-light', sans-serif;
  line-height: 1.45;
  color: #555;
}

.pod-hotspot__tooltip-close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* responsive */

@media (max-width: 575.98px) {
  .pod-hotspot {
    padding: 40px 0;
  }

  .pod-hotspot__heading {
    font-size: 28px;
  }

  .pod-hotspot__tooltip {
    max-width: 240px;
    font-size: 12px;
    padding: 12px 14px 14px;
  }

  .pod-hotspot__visual {
    position: relative;
    width: 100%;
    height: 260px;
  }

  .pod-hotspot__tooltip-title {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Qanelas-Regular', sans-serif;
    color: #333;
  }

  .pod-hotspot__tooltip-text {
    margin: 0;
    font-size: 10px;
    font-family: 'qanelas-light', sans-serif;
    line-height: 1.45;
    color: #555;
  }

}


/* Center Cinema Pod title + subtitle on DESKTOP only */
@media (min-width: 992px) {
  .hero-title-center {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    pointer-events: none;
    /* clicks pass through to hero if needed */
    padding: 0 4vw;
    /* a bit of left/right safety on small screens */
    padding-left: 250px;
  }
}


/* Hide header CTA buttons on tablets (iPad widths) */
@media (min-width: 768px) and (max-width: 1024px) {
  .tp-header-2-cart .button-group {
    display: none !important;
  }
}


/* Mobile: make Discover buttons narrower & centered */
@media (max-width: 575.98px) {
  .discover-links {
    grid-template-columns: 1fr;
    /* single column */
    justify-items: center;
    /* center the cards */
  }

  .discover-card {
    width: 100%;
    max-width: 280px;
    /* controls left/right beige margin */
    padding: 10px 16px;
    /* inner padding for the text */
    font-size: 14px;
  }
}


/* Adjust 3D viewer height on small mobiles only */
@media (max-width: 575.98px) {
  .pod-3d-viewer {
    height: 380px !important;
    /* pick the height you like: 360–450px */
  }

  .btn-3d-toggle {
    background-color: #786456;
    /* or #e1c49a if that matches your palette */
    color: #FFF8ED;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
  }

  .pods-card__btn {
    padding: 10px 24px;
  }

  .tp-main-menu-content ul li a {
    font-size: 32px !important;
    /* adjust as needed */
  }

  .tpoffcanvas__logo img {
    width: 200px;
    height: 100%;
  }
}


/* Mobile: keep layout same, just make images wider */
@media (max-width: 767.98px) {
  .ids__media {
    width: 100%;
    max-width: 100% !important;
    /* 🔥 fill the card */
    margin-left: auto;
    margin-right: auto;
  }

  .ids__hero {
    width: 100% !important;
    /* main image full width of card */
    height: auto;
  }

  .ids__thumbs {
    width: 100%;
  }
}

.cinema-hero__tag {
  display: none;
}

.cinema-hero__tag {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  margin-bottom: 32px;
  border-radius: 15px;
  background: #E9E3D6;
  /* soft highlight (adjust to your palette) */
  color: #5A493E;
  /* text color */
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: "qanelas-light", system-ui, -apple-system, sans-serif;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Center the "Featured Build" tag on mobile */
@media (max-width: 767.98px) {

  .cinema-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin-bottom: 32px;
    border-radius: 10px;
    background: #E9E3D6;
    /* soft highlight (adjust to your palette) */
    color: #5A493E;
    /* text color */
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: "qanelas-light", system-ui, -apple-system, sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .cinema-hero__tag {
    display: block;
    /* block so auto margins work */
    margin: 0 auto 12px;
    /* horizontally center */
    width: fit-content;
    /* shrink to its text */
    margin-bottom: 10px !important;
  }
}

/* Mobile: keep layout same, just make images wider */
@media (max-width: 767.98px) {
  .ids__media {
    width: 100%;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    order: -1;
    /* 🔥 move image block above the text on mobile */
  }

  .ids__hero {
    width: 100% !important;
    height: auto;
  }

  .ids__thumbs {
    width: 100%;
  }

  .ids__ctas {
    margin-bottom: 30px;
  }

  .pod-hotspot__body {
    font-size: 12px;
    font-family: 'qanelas-light', sans-serif;
    line-height: 1.6;
    color: #5A493E;
    text-align: center;
  }

}


/* iPad / tablet: also move images above the text */
@media (min-width: 768px) and (max-width: 1024px) {
  .ids__media {
    order: -1;
    /* only changes the order, nothing else */
  }
}


.pod-hotspot__visual {
  position: relative;
  width: 100%;
  height: 700px;
  /* overflow: hidden;  /* optional: keep tooltip inside image area */
}

.pod-hotspot__visual-2 {
  position: relative;
  width: 100%;
  height: 400px;
  /* overflow: hidden;  /* optional: keep tooltip inside image area */
}

.pod-hotspot__tooltip {
  position: absolute;
  /* required for dragging */
  cursor: grab;
  touch-action: none;
  /* allow touch dragging */
  max-width: 240px;
  font-size: 12px;
  padding: 12px 14px 14px;
}

.pod-hotspot__tooltip.dragging {
  cursor: grabbing;
}


/* ============================
   CONTACT CTA – MOBILE LAYOUT
   ============================ */
@media (max-width: 767.98px) {

  /* Stack copy + form nicely */
  .pc-cta__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .pc-cta .container {
    padding-inline: 18px;
    /* a bit more breathing room left/right */
  }

  .pc-cta__copy {
    padding: 0 20px 10px;
  }

  /* Form fills the width */
  .pc-form {
    width: 100%;
  }

  /* 2-column rows become 1-column */
  .pc-form__row--2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Inputs, textarea & custom select all full-width */
  .pc-form input,
  .pc-form textarea,
  .pc-select__btn {
    width: 100%;
    box-sizing: border-box;
    padding: 1px 4px;
  }

  /* Make the textarea a bit taller on mobile */
  .pc-form textarea {
    min-height: 120px;
  }

  /* Button aligned to left, full width if you prefer */
  .pc-form__actions {
    margin-top: 12px;
    justify-content: flex-start;
  }

  /* Uncomment if you want full-width button:
  .pc-form__actions .pc-btn {
    width: 100%;
    text-align: center;
  }
  */
}

/* Contact icons + text – mobile sizing */
@media (max-width: 767.98px) {

  .pc-contacts {
    gap: 20px;
    /* less vertical space between rows */
    margin-top: 12px;
  }

  .pc-contacts li {
    gap: 12px;
    /* icon ↔ text spacing */
    font-size: 14px;
    /* smaller text */
    letter-spacing: 0.08em;
    align-items: center;
  }

  .pc-contacts a {
    font-size: 14px;
    word-break: break-word;
    /* email won’t overflow */
  }

  .pc-cc {
    width: 28px;
    /* smaller icons */
    height: 28px;
  }

  .pc-intro__media img {
    width: 350px;
    height: 350px;
    border-radius: 12px;
    display: block;
  }

  .pc-card__hd {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 20px;
    color: var(--pc-head);
    margin-bottom: 22px;
  }

  .pc-ic {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  .pc-card__list li {
    margin: 16px 0;
    font-size: 14px;
    white-space: nowrap;
  }

  .pc-link {
    color: #42332A;
    font-size: 15px;
  }

  .pc-intro {
    padding: 0 20px 40px;
  }

  .pods-contact .pc-h2 {
    font: 600 clamp(22px, 3.5vw, 50px) "Qanelas-Regular", sans-serif;
    color: var(--pc-head);
    margin: 26px 0 26px;
  }

  .pc-form__title {
    font-size: 23px;
  }

  .pc-form__hint {
    font-size: 14px;
  }
}



/* SUPER-compact form fields on mobile */
@media (max-width: 767.98px) {

  .pc-form input,
  .pc-select__btn {
    padding: 14px 8px;
    /* very small padding */
    height: 32px;
    /* 🔥 much shorter fields */
    line-height: 1.2;
    font-size: 10px;
  }

  .pc-form textarea {
    padding: 14px 8px;
    min-height: 80px;
    /* smaller message box */
    line-height: 1.3;
    font-size: 10px;
  }

  .pc-form__row {
    margin-bottom: 8px;
    /* tighten vertical gaps */
  }
}


/* Fix Location + dropdown + Message height on mobile */
@media (max-width: 767.98px) {

  /* Location field, custom select, and message box */
  .pc-form input[name="location"],
  .pc-select__btn,
  .pc-form textarea {
    height: auto;
    /* cancel any fixed 32px height */
    min-height: 40px;
    /* make them a bit taller */
    padding: 6px 10px;
    /* more vertical padding */
    line-height: 1.4;
    box-sizing: border-box;
    font-size: 11px;
  }
}

/* Make "Your Message" box taller on mobile */
@media (max-width: 767.98px) {
  .pc-form textarea[name="message"] {
    min-height: 140px;
    /* ⬅ increase this value if you want it even taller */
  }
}


/* Desktop / general size */
.pc-form input::placeholder,
.pc-form textarea::placeholder {
  color: rgba(66, 51, 42, 0.55);

  /* ← change this to whatever you like */
}

/* Optional: make them a bit smaller on mobile */
@media (max-width: 767.98px) {

  .pc-form input::placeholder,
  .pc-form textarea::placeholder {
    font-size: 11px;
    /* smaller placeholder on phones */
  }

  .pc-select__option {
    font-size: 11px;
  }

  .pc-card {
    padding: 20px;
  }

  .pod-hotspot__visual {
    position: relative;
    width: 100%;
    height: 300px;
    /* overflow: hidden;  /* optional: keep tooltip inside image area */
  }

  .pod-hotspot__visual-2 {
    position: relative;
    width: 100%;
    height: 150px;
    /* overflow: hidden;  /* optional: keep tooltip inside image area */
  }

  .swatch {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    border: none;
  }

  .swatch.active {
    border: 2px solid white;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .tp-hero-2-area .tp-hero-2-wrapper {
    position: relative;
  }

  .tp-hero-2-area .hero-title-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4vw;
    /* remove the desktop left offset */
  }
}

@media (max-width: 767.98px) {
  .bespoke-section {
    padding-top: 24px;
    /* less top space */
    padding-bottom: 36px;
  }

  .bespoke-section .content-wrapper {
    margin-top: -18px;
    /* lift the heading/copy/button a bit */
  }
}

@media (max-width: 767.98px) {
  .bespoke-section {
    min-height: auto;
    /* remove the forced tall height */
    padding: 12px 16px 38px;
    /* tighter top/bottom */
  }

  .bespoke-section .content-wrapper {
    margin: 0;
    /* prevent extra offset inside */
  }

  .step-content h2 {
    font-size: 22px;
    margin: 0 0 10px 0;
    font-weight: 600;
    color: #42332A;
    font-family: 'QanelasDEMO-Thin' !important;
  }

  .step-content p {
    font-size: 0.9rem;
    margin: 25px 0 25px 0;
    line-height: 1.6;
    color: #5A493E;
    font-family: 'QanelasDEMO-Thin' !important;
  }
}

/* --- FIX: align mobile timeline line with dot --- */
@media (max-width: 992px) {

  /* Same X for the vertical line */
  .process-section-bg .process-container .timeline {
    left: 20px !important;
    /* move both together left/right */
    transform: translateX(-50%) !important;
  }

  /* Same X for the dot, centered on the line */
  .process-section-bg .process-step .timeline-dot {
    left: 0rem !important;
    transform: translate(-50%, -50%) !important;
    top: 1px;
    /* keep your “near top” position */
  }

  .process-section-bg .process-step {
    flex-direction: column;
  }

  .process-section-bg .process-step .step-content {
    order: 1;
    text-align: left;
    padding: 20px 0 0 40px;
  }

  .process-section-bg .process-step .step-image-container {
    order: 2;
    padding-left: 40px;
    padding-top: 12px;
  }

  .process-section-bg .step-content,
  .process-section-bg .step-image-container {
    width: 100%;
  }

  .pods-design-cta__wrap {
    position: relative;
    max-width: 700px;
    /* similar width to your screenshot card */
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    /* swap this image URL to your pod background image */
    background-image: url("/assets/img/55.jpg");
    background-size: cover;
    background-position: center;
    min-height: 180px;
    display: flex;
    align-items: center;
  }

  .payment-card {
    background-color: #E9E3D6;
    padding: 20px;
    border-radius: 16px;
    flex-basis: 400px;
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: var(--delay);
  }

  .pc-hero {
    padding: 85px 0 24px;
  }

  .step-number {
    display: inline-block;
    background-color: #786456;
    color: #FFF8ED;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 12px;
    margin-bottom: 15px;
  }

  .cta-button {
    display: inline-block;
    color: #FAF3E3;
    padding: 8px 12px;
  }

  .design-range__spec-line {
  margin: 20px 0 20px;
}
.privacy-inner {
padding: 0 25px 0px;
text-align: justify;
}

.pp-back {
  padding: 4px 4px;
  border-radius: 5px;
  margin-bottom: 20px
}
.pp-back svg {
  width: 10px;
  height: 10px;
}
.cladding-image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

}


/* Desktop / laptop – make all form boxes the same thin height */
@media (min-width: 768px) {

  /* All one-line fields (First/Last/Email/Phone/Location + custom select) */
  .pc-form input,
  .pc-select__btn {
    height: 40px;          /* thinner box */
    padding: 8px 16px;     /* less vertical padding */
    line-height: 1.3;
  }

  /* keep extra room for the arrow on the custom select */
  .pc-select__btn {
    padding: 8px 40px 8px 16px;
  }

  /* Message box – same style but taller */
  .pc-form textarea {
    height: auto;
    min-height: 120px;
    padding: 10px 16px;
    line-height: 1.4;
  }
}

/* Extra right padding for Email field so it clears the purple "t" block */
@media (min-width: 768px) {
  .pc-form input[name="email"] {
    padding-right: 80px;   /* tweak this value until it matches perfectly */
  }
  .pc-form input[name="phone"] {
    padding-right: 80px;   /* tweak this value until it matches perfectly */
  }
}


/* Small laptop screens: make pods section fully visible */
@media (min-width: 992px) and (max-width: 1440px) {

  /* Don’t force full viewport height */
  .tp-project-2-area .panels {
    height: auto;
  }

  .tp-project-2-area .panel {
    height: auto;
    padding: 20px 30px;         /* reduce empty space around image */
  }

  /* Make the pod image fit comfortably */
  .tp-project-2-area .tp-project-2-thumb img {
    width: 90%;
    max-height: 55vh;           /* key: never taller than ~half–2/3 of screen */
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    display: block;
  }

  /* Optional: slightly tighten section padding */
  .tp-project-2-area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* increase panel height */
.whyus__panel {
  min-height: 780px !important;   /* increase this number as needed */
  /* or use viewport-based sizing:
     min-height: 60vh;
  */
}

/* Base: hide spinner + icons */
.pc-btn .btn-spinner,
.pc-btn .btn-icon {
  display: none;
}

/* While sending */
.pc-btn.is-sending .btn-spinner {
  display: inline-block;
}

/* After success */
.pc-btn.is-success .btn-icon.success {
  display: inline-block;
}

/* After error */
.pc-btn.is-error .btn-icon.error {
  display: inline-block;
}



/* 4K / ultra-wide screens – use more width */
@media (min-width: 1920px) {

  /* make all main sections wider */
  .container-1870,
  .container-1480,
  .container-1300 {
    max-width: 92vw;      /* almost edge-to-edge, still with a small margin */
    margin-left: auto;
    margin-right: auto;
  }

  /* hero: push even closer to full width */
  .tp-hero-2-area > .container.container-1870 {
    max-width: 100vw;
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
/* 4K / ultra–wide – widen Cinema + WHY US section */
@media (min-width: 1920px) {

  /* hero + global containers (from previous fix) */
  .container-1870,
  .container-1480,
  .container-1300 {
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
  }

  /* C I N E M A  P O D block */
  .cinema-hero__container {
    max-width: 92vw;        /* make the whole block wider */
    margin-left: auto;
    margin-right: auto;
    padding-left: 3vw;      /* small breathing room from edges */
    padding-right: 3vw;
  }

  /* WHY US? wrapper – the container inside that section */
  .whyus .container-1300 {
    max-width: 92vw;
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
/* Tighten space between "Return to Home" pill and heading on pricing page */
section.pods-hero {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.pods-hero .pp-back {
  margin-bottom: 8px;           /* make this 0 if you want them almost touching */
}

section.pods-keypoints {
  margin-top: -4px !important;  /* pulls the next section up slightly */
  padding-top: 0 !important;    /* no extra top padding */
}
.k-highlight {
  padding: 24px 28px;
  border-radius: 18px;
  background: #E9E3D6;
  margin-bottom: 32px;
}

@media (min-width: 1200px) {
  .pods-hero {
    padding-top: 120px !important;
  }
}

/* Mobile & small tablets */
@media (max-width: 991.98px) {
  .pods-hero {
    padding-top: 50px !important;
  }
}

/* Shell */
  .pods-faq-main {
    background-color: #E9E3D6;
    color: #42332A;
    padding: 120px 0 20px;
  }
  .pods-faq-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Intro */
  .pods-faq-intro {
    margin-bottom: 16px;
  }
  .pods-faq-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 22px;
    margin-bottom: 10px;
    font-family: "QanelasDEMO-Thin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  .pods-faq-title {
    font-family: "Qanelas-Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 52px;
    margin-bottom: 10px;
  }
  .pods-faq-lead {
    max-width: 640px;
    font-size: 15px;
    line-height: 1.7;
    font-family: "QanelasDEMO-Thin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  /* Pills */
  .pods-faq-filters {
    margin-bottom: 24px;
  }
  .faq-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 18px 0;
    border-radius: 10px;
    background-color: #E9E3D6;
  }
  .faq-pill {
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 7px 18px;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    font-family: "QanelasDEMO-Thin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #7b6a5a;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .18s ease;
  }
  .faq-pill:hover {
    transform: translateY(-1px);
  }
  .faq-pill.is-active {
    background-color: #E9E3D6;
    border-color: #42332A;
    color: #3f3329;
  }

  /* Cards */
  .pods-faq-list {
    margin-top: 10px;
  }
  .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-card {
    background-color: #E9E3D6;
    border-radius: 18px;
    border: 1px solid #e0d2bf;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
  }
  .faq-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .faq-card__header {
    width: 100%;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-family: "Qanelas-Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: inherit;
  }
  .faq-card__chevron {
    position: relative;
    width: 16px;
    height: 16px;
  }
  .faq-card__chevron::before,
  .faq-card__chevron::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.4px;
    background-color: #7b6a5a;
    transform-origin: center;
    transition: transform .22s ease;
  }
  .faq-card__chevron::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .faq-card__chevron::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .faq-card.is-open .faq-card__chevron::before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .faq-card.is-open .faq-card__chevron::after {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .faq-card__body {
    padding: 0 22px 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .26s ease;
  }
  .faq-card__body p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    font-family: "QanelasDEMO-Thin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #5b4a3e;
  }
  .faq-card.is-open .faq-card__body {
    padding-bottom: 14px;
  }

  /* Responsive */
  @media (max-width: 767.98px) {
    .pods-faq-main {
      padding: 100px 0 10px;
    }
    .faq-pills {
      justify-content: flex-start;
      overflow-x: auto;
      padding: 14px 12px;
    }
    .faq-pills::-webkit-scrollbar {
      display: none;
    }
    .faq-card__header {
      padding: 14px 16px;
    }
    .faq-card__body {
      padding: 0 16px;
    }

    .pods-faq-eyebrow {
    font-size: 14px;
  }
  .pods-faq-title {
    font-size: 26px;

  }
  }


  /* Center FAQ hero text */
.pods-faq-intro .pods-faq-shell {
  text-align: center;
}

.pods-faq-title {
  margin-bottom: 10px;
}

.pods-faq-lead {
  margin-left: auto;
  margin-right: auto;
}
/* Cleaner FAQ pills row – no big capsule background */
.pods-faq-filters {
  margin: 24px 0 24px;
}

/* simple row with top/bottom hairline, no filled background */
.faq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  padding: 14px 0;
  background: transparent;          /* remove beige capsule */
  border-radius: 0;                 /* no huge rounded block */
  border-top: 1px solid #e0d2bf;
  border-bottom: 1px solid #e0d2bf;
}

/* === Fix header burger hover animation (tp-offcanvas-open-btn) === */

/* Reset the button itself */
.tp-header-2-menu-bar .tp-offcanvas-open-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* Base lines */
.tp-header-2-menu-bar .tp-offcanvas-open-btn span {
  height: 2px;
  width: 80px;                /* keep your current width */
  background-color: var(--tp-common-black);
  display: block;
  margin: 8px auto;
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    background-color 0.25s ease;
}

/* Disable the old clip-path animation JUST for this button */
.tp-header-2-menu-bar .tp-offcanvas-open-btn:hover span {
  animation: none !important;
  background-color: #786456;   /* subtle pods-by-tér color on hover */
}

/* Tiny movement for a premium feel */
.tp-header-2-menu-bar .tp-offcanvas-open-btn:hover span:nth-child(1) {
  transform: translateY(-1px);
}

.tp-header-2-menu-bar .tp-offcanvas-open-btn:hover span:nth-child(3) {
  transform: translateY(1px);
}

/* === Mobile & iPad burger fix === */
@media (max-width: 991.98px) {
  /* keep the burger aligned to the right on small screens */
  .tp-header-2-menu-bar {
    text-align: right !important;
  }

  .tp-header-2-menu-bar .tp-offcanvas-open-btn {
    width: auto;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /* shorter, tighter lines on mobile / iPad */
  .tp-header-2-menu-bar .tp-offcanvas-open-btn span {
    width: 36px;            /* was 80px */
    height: 2px;
    margin: 4px 0 4px auto; /* pushes lines to the right edge */
    border-radius: 999px;
  }
}


/* ===== Pods by tér footer — MOBILE EXACT (<=680px) ===== */
@media (max-width: 680px) {

  /* Menu: make 4 equal columns so all items align perfectly */
  .pfx-menu{
    width: calc(100% - 64px);
    margin: 20px auto 26px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;

    align-items: start;     /* all start at same top line */
    text-align: center;
  }

  .pfx-menu a{
    display: block;
    padding: 6px 0;
    line-height: 1.15;
    font-size: 15px;        /* slightly smaller so "Material" fits nicely */
    white-space: normal;    /* allow “Pricing & Warranty” to wrap cleanly */
  }

  /* Optional: very small screens */
  @media (max-width: 380px){
    .pfx-menu a{ font-size: 14px; }
  }
}

/* Center only the intro heading texts (not the cards) */
.pods-contact .pc-intro__content > .pc-h2,
.pods-contact .pc-intro__content > .pc-body{
  text-align: center;
}

/* Keep the paragraph nicely centered with a readable width */
.pods-contact .pc-intro__content > .pc-body{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


/* Remove extra top gap above "Your space, your way" */
.pods-contact .pc-intro{
  padding-top: 16px;   /* was clamp(28px, 6vw, 56px) */
  padding-bottom: 56px;
}

.pods-contact .pc-intro__content > .pc-h2{
  margin-top: 0;       /* was 56px */
  margin-bottom: 26px; /* keep a nice gap before the paragraph */
}

/* Desktop only: narrow + center the 2 cards (do NOT affect iPad/mobile) */
@media (min-width: 1200px){
  .pods-contact .pc-intro__cards{
    max-width: 980px;                 /* total block width */
    margin: 16px auto 0;              /* center it */
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 24px;
  }
}

/* Extra-small phones: keep "BOOK A CONSULTATION" in ONE line + centered */
@media (max-width: 480px){
  .pods-contact .pc-hero__title{
    white-space: nowrap;          /* never break line */
    text-align: center;           /* keep centered */
    letter-spacing: 1px;          /* was 3px (too wide for small screens) */
    padding: 0 12px;              /* breathing space from edges */
    line-height: 1;
    font-size: clamp(18px, 6.2vw, 26px);  /* allow it to shrink */
  }
}

/* Mobile only: center the "Elevate The Interior..." line */
@media (max-width: 767.98px){
  .ids__eyebrow{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
  }
}


@media (max-width: 575.98px){
  .ids__ctas{
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* Single Pitch Pets page only: center the cladding title */
.cladding-section--sp-pet .cladding-header{
  justify-content: center; /* overrides space-between */
  align-items: center;
}

.cladding-section--sp-pet .titles{
  width: 100%;
  text-align: center;
}


/* Burger: pointer works in gaps + lines stay visible (fits inside 42px icon area) */
#header-sticky .tp-header-2-menu-bar .tp-offcanvas-open-btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;   /* right aligned like your design */
  gap: 8px;                /* gap is clickable */
  padding: 0;              /* IMPORTANT: no padding (button height is fixed) */
  border: 0;
  background: transparent;
  cursor: pointer;
  width: var(--burger-w);  /* stays inside your reserved burger area */
  height: 28px;
}

#header-sticky .tp-header-2-menu-bar .tp-offcanvas-open-btn span{
  display: block;
  width: 36px;             /* MUST be <= burger-w, so it won’t go behind CTAs */
  height: 2px;
  margin: 0 !important;    /* remove old margin gaps */
  border-radius: 999px;
  background: #1E1E1E;     /* visible always */
}

/* Mobile/iPad */
@media (max-width: 991.98px){
  #header-sticky .tp-header-2-menu-bar .tp-offcanvas-open-btn{
    gap: 6px;
    height: 24px;
  }
  #header-sticky .tp-header-2-menu-bar .tp-offcanvas-open-btn span{
    width: 32px;
  }
}

/* Offcanvas v2: don't force scrolling when not needed */
.tp-offcanvas-2-wrapper .tp-offcanvas-2-left{
  overflow-y: auto !important;  /* override overflow-y: scroll */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* When menu is open, lock page scrolling */
html.offcanvas-open,
body.offcanvas-open{
  overflow: hidden !important;
  height: 100%;
}

/* =========================================================
   Dual Pitch HERO — full width card for desktop + 4K
   Paste at the VERY BOTTOM of main.css so it wins
   ========================================================= */

@media (min-width: 1025px){

  /* Make this section container fluid (no bootstrap max-width cap) */
  .pod-showcase .container{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: clamp(18px, 2.5vw, 120px) !important;
    padding-right: clamp(18px, 2.5vw, 120px) !important;
  }

  /* The beige card should span the available width */
  .pod-showcase__card{
    width: 100% !important;
    max-width: none !important;     /* kills the 1400px cap */
    margin: 0 !important;

    border-radius: clamp(18px, 1.2vw, 28px);
    padding: clamp(34px, 2.6vw, 90px);
    gap: clamp(18px, 3vw, 80px);
    align-items: center;            /* keeps image vertically centered */
  }

  /* Let left column grow a bit on big screens */
  .pod-showcase__left{
    padding-left: 0 !important;
    max-width: clamp(640px, 36vw, 980px);
    flex: 0 1 auto;
  }

  /* Push image to the right side */
  .pod-showcase__right{
    align-items: center;
    justify-content: flex-end;      /* was centered before */
    flex: 1 1 auto;
  }

  /* Scale image for wide screens (without exploding) */
  .pod-showcase__img{
    width: min(44vw, 1700px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Optional: slightly nicer spacing only on true ultra-wide / 4K */
@media (min-width: 1920px){
  .pod-showcase{
    padding-top: 140px; /* keep the hero breathing on 4K */
  }
}

/* ===== Dual Pitch: keep image on the same row (no dropping down) ===== */
@media (min-width: 1200px){

  /* stop the right column from wrapping under the left */
  .pod-showcase__card{
    flex-wrap: nowrap !important;     /* overrides your flex-wrap: wrap */
    align-items: center !important;   /* nicer vertical alignment */
  }

  /* allow text to wrap normally so it doesn't force huge width */
  .pod-showcase__intro,
  .pod-showcase__list{
    white-space: normal !important;   /* overrides your nowrap */
  }

  /* balanced columns (so +gap doesn't push it to next line) */
  .pod-showcase__left{
    flex: 0 1 56% !important;
    min-width: 520px;
  }
  .pod-showcase__right{
    flex: 1 1 0 !important;
    min-width: 0;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  /* keep your "slightly left" nudge but without breaking layout */
  .pod-showcase__img{
    max-width: 100% !important;
    height: auto !important;
    transform: translateX(-180px) !important; /* adjust: -25px to -70px */
  }
}

/* =========================================================
   FINAL Dual Pitch Desktop Layout (no blank center + big text)
   Paste at the VERY BOTTOM of main.css
   ========================================================= */
@media (min-width: 1200px){

  /* keep 2 columns always (no wrap) */
  .pod-showcase .pod-showcase__card{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(18px, 1.6vw, 44px) !important;
    padding: clamp(44px, 3.2vw, 86px) clamp(26px, 2vw, 60px) !important;
  }

  /* LEFT side takes more space + bigger typography */
  .pod-showcase .pod-showcase__left{
    flex: 0 1 52% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: clamp(34px, 2.8vw, 90px) !important;
  }

  /* IMPORTANT: remove forced nowrap that breaks layout */
  .pod-showcase .pod-showcase__title,
  .pod-showcase .pod-showcase__intro,
  .pod-showcase .pod-showcase__list{
    white-space: normal !important;
  }

  /* Bigger title */
  .pod-showcase .pod-showcase__title-main,
  .pod-showcase .pod-showcase__title-sub{
    font-size: clamp(72px, 3.8vw, 120px) !important;
    line-height: 1.03 !important;
  }
  .pod-showcase .pod-showcase__title-variant{
    font-size: clamp(40px, 2.4vw, 82px) !important;
    line-height: 1.05 !important;
  }

  /* Bigger intro + list */
  .pod-showcase .pod-showcase__intro{
    font-size: clamp(28px, 1.8vw, 48px) !important;
    line-height: 1.25 !important;
    margin-bottom: clamp(14px, 1.2vw, 26px) !important;
  }
  .pod-showcase .pod-showcase__list{
    font-size: clamp(18px, 1.15vw, 30px) !important;
    line-height: 1.9 !important;
    max-width: 70ch !important;
  }

  /* RIGHT side: make image fill area + move it a bit LEFT */
  .pod-showcase .pod-showcase__right{
    flex: 0 1 48% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .pod-showcase .pod-showcase__img{
    width: min(48vw, 1500px) !important;
    max-width: 100% !important;
    height: auto !important;

    /* this is the “bring image left” control */
    transform: translateX(calc(-1 * clamp(18px, 1.3vw, 55px))) !important;
  }
}

/* ===== Keep "PODS by tér × OKRA" on ONE line (big screens) ===== */
@media (min-width: 1200px){

  .pod-showcase__title{
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: baseline !important;
    gap: 14px !important;          /* spacing between parts */
  }

  /* If you accidentally have a <br> in the title, hide it on desktop */
  .pod-showcase__title br{
    display: none !important;
  }

  /* Make sure each piece can't drop to next line */
  .pod-showcase__title > *,
  .pod-showcase__title span,
  .pod-showcase__title strong,
  .pod-showcase__title em{
    display: inline-block !important;
    flex: 0 0 auto !important;
  }
}

/* ===== Sticky Chat Dock (always visible) ===== */
.pbt-sticky-chat{
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 9999;

  display: grid;
  place-items: center;
}

/* Circle buttons */
.pbt-sticky-chat__btn{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  display: grid;
  place-items: center;

  text-decoration: none;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.pbt-sticky-chat__btn i{ font-size: 22px; line-height: 1; }

.pbt-sticky-chat__btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.pbt-sticky-chat__btn:active{ transform: translateY(0); }

/* Toggle (chat) */
.pbt-sticky-chat__btn--toggle{
  background: #3f4248;
  color: #fff;
}

/* WhatsApp + Call */
.pbt-sticky-chat__btn--wa{ background:#25D366; color:#fff; }
.pbt-sticky-chat__btn--call{ background:#fff; color:#111; }

/* Menu opens upward */
.pbt-sticky-chat__menu{
  position: absolute;
  right: 0;
  bottom: calc(64px + 12px);

  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;

  pointer-events: none;
}

/* Hidden state */
.pbt-sticky-chat__menu .pbt-sticky-chat__btn{
  opacity: 0;
  transform: translateY(10px) scale(.98);
}

/* Open state */
.pbt-sticky-chat.is-open .pbt-sticky-chat__menu{ pointer-events: auto; }

.pbt-sticky-chat.is-open .pbt-sticky-chat__menu .pbt-sticky-chat__btn{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pbt-sticky-chat.is-open .pbt-sticky-chat__btn--call{ transition-delay: .04s; }
.pbt-sticky-chat.is-open .pbt-sticky-chat__btn--wa{ transition-delay: .08s; }

/* Hide if your offcanvas menu is open */
.offcanvas-open .pbt-sticky-chat{ display:none !important; }

/* Mobile sizing */
@media (max-width: 575.98px){
  .pbt-sticky-chat__btn{ width: 58px; height: 58px; }
  .pbt-sticky-chat__menu{ bottom: calc(58px + 12px); }
}