@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Template Name: Landor – Modern Real Estate & Property Listing HTML Template
    Author: Theme_Pure
    Support: help.themepure.net
    Description: Landor – Modern Real Estate & Property Listing HTML Template
    Version: 1.0.0

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

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

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Common Css Here

	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Back to top
		2.2 Accordion Css Here
		2.3 Button Css Here
		2.4 Pagination Css Here
		2.5 Offcanvas Css Here
		2.6 Breadcrumb Css Here
		2.7 Nice Select
		2.8 Magic Cursor css start
		2.9 Preloader Css Here

	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1
		3.2 Mobile Menu Css Here

	---------------------------------
	04. BLOG CSS
	---------------------------------
		4.1 Blog Css Here
		4.2 Sidebar Css Here

	---------------------------------
	05. FOOTER CSS
	---------------------------------
		5.1 Footer Css Here

	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 Hero Css Here
		7.2 Abou Css Here
		7.3 Floting Css Here
		7.4 Contact Css Here
		7.5 Cta Css Here
		7.6 Fact Css Here
		7.7 Portfolio Css Here
		7.8 Service Css Here
		7.9 Team Css Here
		8.0 Testimonial Css Here
		8.1 Video Css Here
		8.2 Faq Css Here
		8.3 Brand Css Here
		8.4 Project Css Here
		8.5 Error Css Here
		8.6 Feature Css Here
		8.7 Misson Css Here
		8.8 Choose Css Here
		8.9 Value Css Here
		9.0 Award Css Here
		9.1 Career Css Here

**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:wght@400;500;600;700;800&family=Sora:wght@100..800&display=swap");
:root {
  --tp-theme-color: #10365b;
  --tp-secoundery-color: #e18825;
  --tp-orange-color: #E6641C;
  --tp-body-color: #404038;
  --tp-white-color: #FFFFFF;
  --tp-gray-color: #F5F5F5;
}

:root {
  --tp-theme-font: "Manrope", sans-serif;
  --tp-playfair-font: "Playfair Display", serif;
  --tp-poppins-font: "Poppins", sans-serif;
  --tp-sora-font: "Sora", sans-serif;
}

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

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--tp-theme-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-body-color);
  line-height: 28px;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tp-theme-font);
  color: var(--tp-theme-color);
  margin-top: 0px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 {
  font-size: 69px;
}

h2 {
  font-size: 55px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 19px;
}

h6 {
  font-size: 15px;
}

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

p {
  font-family: var(--tp-theme-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-body-color);
  margin-bottom: 10px;
  line-height: 28px;
}

a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

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

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
textarea {
  resize: none;
  outline: none;
  background-color: transparent;
  height: 58px;
  width: 100%;
  line-height: 56px;
  font-size: 15px;
  color: var(--tp-body-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 58px;
  font-weight: 500;
  padding: 0 30px;
}
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=search]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--tp-body-color);
}
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=search]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder {
  color: var(--tp-body-color);
}
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=search]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--tp-body-color);
}
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=search]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--tp-body-color);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--tp-black-color);
}
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=search]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

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

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

*::-moz-placeholder {
  color: var(--tp-body-color);
  opacity: 1;
  font-weight: 500;
}

*::placeholder {
  color: var(--tp-body-color);
  opacity: 1;
  font-weight: 500;
}

/*----------------------------------------*/
/*  1.2 Common Css Here
/*----------------------------------------*/
img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.z-index-1 {
  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;
}
.z-index-10 {
  position: relative;
  z-index: 10;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.br-5 > img {
  border-radius: 5px;
}
.br-10 > img {
  border-radius: 10px;
}
.br-15 {
  border-radius: 15px;
}
.br-15 > img, .br-15 > a img {
  border-radius: 15px;
}
.br-20 {
  border-radius: 20px;
}
.br-20 > img, .br-20 > a img {
  border-radius: 20px;
}
.br-30 {
  border-radius: 20px;
}
.br-30 > img, .br-30 > a img {
  border-radius: 30px;
}

.tp-upper {
  text-transform: uppercase;
}

.tp-cap {
  text-transform: capitalize;
}

.tp-text-white {
  color: var(--tp-white-color);
}
.tp-text-black {
  color: var(--tp-theme-color);
}
.tp-text-orange {
  color: var(--tp-orange-color);
}
.tp-text-secoundery {
  color: var(--tp-secoundery-color);
}
.tp-text-body {
  color: var(--tp-body-color);
}

.tp-bg-white {
  background-color: var(--tp-white-color);
}
.tp-bg-black {
  background-color: var(--tp-theme-color);
}
.tp-bg-orange {
  background-color: var(--tp-orange-color);
}
.tp-bg-secoundery {
  background-color: var(--tp-secoundery-color);
}
.tp-bg-gray {
  background-color: var(--tp-gray-color);
}

.tp-flex {
  display: flex;
}

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

.tp-text-end {
  text-align: right;
}

.tp-flex-center {
  display: flex;
  align-items: center;
}

.tp-align-center {
  align-items: center;
}

.tp-align-end {
  align-items: end;
}

.tp-justify-center {
  justify-content: center;
}

.tp-justify-end {
  justify-content: end;
}

.tp-justify-between {
  justify-content: space-between;
}

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

.tp-slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.tp-brand-slide-element {
  width: auto;
}

.flex-auto {
  flex: 0 0 auto;
}

.tp-w-100 {
  width: 100%;
}

.tp-h-100 {
  height: 100%;
}

.fw-500 {
  font-weight: 500;
}

.tp-in-block {
  display: inline-block;
}

.lh-1 {
  line-height: 1;
}

.bg-linear {
  background: linear-gradient(180deg, #F5F5F5 69.91%, #FFFFFF 100%);
}

.mb-12 {
  margin-bottom: 12px;
}

.tp-bg-overlay, .tp-bg-overlay-2 {
  position: relative;
  z-index: 1;
}
.tp-bg-overlay::before, .tp-bg-overlay-2::before {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33.58%, #000000 100%);
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.tp-bg-overlay-2::before {
  background: rgba(0, 0, 0, 0.75);
}

.margin-0 {
  margin: 0;
}

.slider-width {
  width: auto !important;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .slider-width {
    width: 100% !important;
  }
}

.slider-wrap {
  align-items: center;
}

.pt-150 {
  padding-top: 150px;
}

.pb-150 {
  padding-bottom: 150px;
}

.tp-linear-bg, .tp-linear-bg-2, .tp-linear-bg-3, .tp-linear-bg-5 {
  position: relative;
  z-index: 1;
}
.tp-linear-bg::before, .tp-linear-bg-2::before, .tp-linear-bg-3::before, .tp-linear-bg-5::before {
  position: absolute;
  content: "";
  background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 74%);
  border-radius: 20px 20px 0px 0px;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.tp-linear-bg-2::before {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.tp-linear-bg-3::before {
  background: linear-gradient(180deg, #FFFFFF 25%, rgba(255, 255, 255, 0) 80%);
}

.tp-linear-bg-5::before {
  background: linear-gradient(87.95deg, rgba(0, 0, 0, 0.6) 2.25%, rgba(0, 0, 0, 0) 98.79%);
}

.tp-linear-bg-4, .tp-linear-bg-6, .tp-linear-bg-7 {
  position: relative;
  z-index: 2;
}
.tp-linear-bg-4::after, .tp-linear-bg-6::after, .tp-linear-bg-7::after {
  position: absolute;
  content: "";
  background: linear-gradient(360deg, #D9D813 0%, rgba(0, 0, 0, 0) 64.42%);
  border-radius: 20px 20px 0px 0px;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.tp-linear-bg-6::after {
  background: linear-gradient(360deg, #D9D813 0%, rgba(0, 0, 0, 0.55) 75%);
}

.tp-linear-bg-7::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 2.22%, rgba(0, 0, 0, 0.8) 100%);
}

.tp-overlay, .tp-overlay-2, .tp-overlay-3, .tp-overlay-4, .tp-overlay-5 {
  position: relative;
  z-index: 1;
}
.tp-overlay::before, .tp-overlay-2::before, .tp-overlay-3::before, .tp-overlay-4::before, .tp-overlay-5::before {
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.tp-fs-15 {
  font-size: 15px;
}
.tp-fs-20 {
  font-size: 20px;
}
.tp-fs-24 {
  font-size: 24px;
}

.tp-overlay-2::before {
  background: rgba(0, 0, 0, 0.65);
}

.tp-overlay-3::before {
  background: rgba(0, 0, 0, 0.55);
}

.tp-overlay-4::before {
  background: rgba(0, 0, 0, 0.15);
}

.tp-overlay-5::before {
  background: rgba(0, 0, 0, 0.25);
}

.tp-bluer-bg {
  background: linear-gradient(239.18deg, rgba(255, 255, 255, 0.22) 17.93%, rgba(255, 255, 255, 0.055) 81.51%);
  backdrop-filter: blur(20px);
}

.container-wide {
  max-width: 1860px;
  margin: 0 auto;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .container-wide {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .container-wide {
    padding: 0;
  }
}

.default-margin {
  margin: 0 30px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .default-margin {
    margin: 0 20px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .default-margin {
    margin: 0;
  }
}

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

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

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

.white-rgba {
  color: rgba(255, 255, 255, 0.65);
}

.tp-badge-circle a {
  font-size: 30px;
  width: 240px;
  height: 240px;
  background: linear-gradient(239.18deg, rgba(0, 0, 0, 0.0825) 17.93%, rgba(0, 0, 0, 0.0525) 81.51%);
  backdrop-filter: blur(20px);
  color: var(--tp-white-color);
  border-radius: 280px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-badge-circle a {
    font-size: 25px;
    width: 200px;
    height: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-badge-circle a {
    font-size: 20px;
    width: 160px;
    height: 160px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-badge-circle a {
    font-size: 18px;
    width: 120px;
    height: 120px;
  }
}
.tp-badge-circle a:hover {
  filter: brightness(1.5);
  color: var(--tp-theme-color);
}

.fixed_attachment {
  background-attachment: fixed;
}

samp {
  font-family: var(--tp-theme-font);
}

/*----------------------------------------*/
/*  2.2 Accordion Css Here
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.3 Section Title Css Here
/*----------------------------------------*/
.tp-section-sub-title {
  display: inline-block;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 30px;
  line-height: 1;
  padding: 5px 14px;
}
@media (max-width: 574.98px) {
  .tp-section-sub-title {
    font-size: 15px;
    padding: 6px 10px;
  }
}
.tp-section-sub-title-sec {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--tp-secoundery-color);
}
.tp-section-sub-title-trd {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}
.tp-section-sub-title-land {
  font-size: 20px;
}
.tp-section-title {
  font-size: 55px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-section-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-section-title {
    font-size: 40px;
  }
  .tp-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-section-title {
    font-size: 35px;
  }
  .tp-section-title br {
    display: none;
  }
}
.tp-section-title span {
  font-family: var(--tp-playfair-font);
  font-style: italic;
  margin-left: 10px;
  display: inline-block;
}
.tp-section-title-mid {
  font-size: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-section-title-mid {
    font-size: 35px;
  }
  .tp-section-title-mid br {
    display: none;
  }
}
@media (max-width: 574.98px) {
  .tp-section-title-mid {
    font-size: 33px;
  }
  .tp-section-title-mid br {
    display: none;
  }
}
.tp-section-title-mid-2 {
  font-size: 60px;
  line-height: 1.1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-section-title-mid-2 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-section-title-mid-2 {
    font-size: 40px;
  }
  .tp-section-title-mid-2 br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-section-title-mid-2 {
    font-size: 35px;
  }
  .tp-section-title-mid-2 br {
    display: none;
  }
}
.tp-section-title-larg {
  font-size: 100px;
  letter-spacing: -0.03em;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-section-title-larg {
    font-size: 85px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-section-title-larg {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-section-title-larg {
    font-size: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-section-title-larg {
    font-size: 50px;
  }
}

/*----------------------------------------*/
/*  2.4 Pagination Css Here
/*----------------------------------------*/
.tp-pagination ul {
  display: flex;
  align-items: center;
  grid-gap: 6px;
}
.tp-pagination ul li {
  list-style: none;
}
.tp-pagination ul li a {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-weight: 500;
  height: 44px;
  min-width: 44px;
  padding: 13px 17px;
  line-height: 1;
  text-align: center;
}
.tp-pagination ul li a svg {
  margin-left: 5px;
}
.tp-pagination ul li a:hover, .tp-pagination ul li a.active {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  border-color: transparent;
}
.tp-pagination ul li:first-child > a svg {
  margin-left: 0;
  margin-right: 5px;
}

/*----------------------------------------*/
/*  2.5 Offcanvas Css Here
/*----------------------------------------*/
.tp-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 400px;
  height: 100%;
  background: #fff;
  padding: 50px 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 0s;
  z-index: 999;
}
@media only screen and (max-width: 400px) {
  .tp-offcanvas {
    width: 100%;
    padding: 35px 30px;
  }
}
.tp-offcanvas-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 0.3s;
}
.tp-offcanvas-button-close i {
  font-size: 30px;
  transition: 0.5s;
  font-weight: 500;
}
.tp-offcanvas-button-close i:hover {
  color: var(--tp-secoundery-color);
  transform: rotate(-90deg);
}
.tp-offcanvas-title {
  font-size: 25px;
}
.tp-offcanvas-cta-title {
  font-size: 30px;
}
.tp-offcanvas-cta li {
  list-style: none;
}
.tp-offcanvas-cta li span {
  font-size: 17px;
  color: #10365b;
}
.tp-offcanvas-cta li span i {
  margin-right: 6px;
}
.tp-offcanvas-cta li a:hover {
  color: var(--tp-secoundery-color);
}
.tp-offcanvas-social a {
  font-size: 20px;
  margin-right: 15px;
}
.tp-offcanvas-header {
  padding: 0;
}
.tp-offcanvas-overlay {
  position: fixed;
  background-color: #10365b;
  width: 0;
  opacity: 0;
  height: 100%;
  z-index: 99;
  top: 0;
  right: 0;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 0.3s;
}
.tp-offcanvas-overlay-open {
  opacity: 0.5;
  visibility: visible;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 0s;
}
.tp-offcanvas-contect-social {
  z-index: 1;
  position: relative;
}
.tp-offcanvas-contect-social ul {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tp-offcanvas-contect-social ul li {
  list-style: none;
}
.tp-offcanvas-contect-social ul li a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--tp-secoundery-color);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-theme-color);
}
.tp-offcanvas-contect-social ul li a:hover {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}
.tp-offcanvas-gallery {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto auto;
}
.tp-offcanvas-gallery a img {
  border-radius: 5px;
}

.header-sidebar-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
  border-radius: 50px;
  background-color: var(--tp-secoundery-color);
}
.header-sidebar-btn:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}
.header-sidebar-btn:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.header-sidebar-btn span {
  background: #10365b;
  width: 13px;
  margin: 0 0 0 auto;
  border-radius: 20px;
  height: 2px;
  display: inline-block;
}
.header-sidebar-btn span:nth-child(2) {
  width: 20px;
}
.header-sidebar-btn-bg {
  width: 36px;
  height: 36px;
  background: #10365b;
  border-radius: 50px;
  justify-content: center;
  padding-right: 9px;
}
.header-sidebar-btn-bg span {
  background: #fff;
}
.header-sidebar-btn-bg span:nth-child(2) {
  width: 18px;
}
.header-sidebar-btn-bg-white {
  background: #fff;
}
.header-sidebar-btn-bg-white span {
  background: #10365b;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-sidebar-btn {
    margin-left: 20px;
  }
}

@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.6 Breadcrumb Css Here
/*----------------------------------------*/
.tp-breadcrumb {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-breadcrumb {
    min-height: 430px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-breadcrumb {
    min-height: 350px;
  }
}
.tp-breadcrumb-menu {
  position: relative;
  grid-gap: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-breadcrumb-menu {
    padding-top: 20px;
    margin-bottom: 5px;
  }
}
.tp-breadcrumb-menu span {
  font-size: 17px;
  font-weight: 500;
  color: var(--tp-white-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-breadcrumb-menu span {
    font-size: 15px;
  }
}
.tp-breadcrumb-menu span a:hover {
  color: var(--tp-secoundery-color);
}
.tp-breadcrumb-menu::before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.25);
  width: 1720px;
  height: 1px;
  top: 0;
  left: -208px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px) {
  .tp-breadcrumb-menu::before {
    width: 1600px;
    left: -163px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-breadcrumb-menu::before {
    width: 1500px;
    left: -85px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-breadcrumb-menu::before {
    width: 100%;
    left: 0;
  }
}
.tp-breadcrumb-title {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-breadcrumb-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-breadcrumb-title {
    font-size: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-breadcrumb-title {
    font-size: 50px;
  }
}
.tp-breadcrumb-shape {
  left: 0;
  bottom: 0;
  mix-blend-mode: color-burn;
  z-index: -1;
  height: 100%;
}
.tp-breadcrumb-shape img {
  height: 100%;
}

.pulse-animation, .pulse-animation-white {
  position: relative;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.pulse-animation::after, .pulse-animation-white::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  animation: borderExpand 2.5s infinite;
}

.pulse-animation-white::after {
  border-color: rgba(255, 255, 255, 0.5);
}

@keyframes borderExpand {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.pulse-animation-3 {
  position: relative;
}
.pulse-animation-3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  animation: borderExpand2 2.5s infinite;
}

@keyframes borderExpand2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
    @media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
      transform: scale(2);
    }
  }
}
@keyframes tpshake {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
/*----------------------------------------*/
/*  2.7 Nice Select
/*----------------------------------------*/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: var(--tp-theme-font);
  outline: none;
  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;
  color: var(--tp-body-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 58px;
  line-height: 56px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 58px;
  padding: 0 30px;
}
.nice-select:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
  border-color: rgba(0, 0, 0, 0.1);
}
.nice-select::after {
  position: absolute;
  content: "\f078";
  top: 50%;
  right: 30px;
  font-family: "Font Awesome 6 Pro";
  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;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.nice-select.open::after {
  -moz-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -webkit-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: var(--tp-white-color);
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 5px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0px;
  -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;
  color: var(--tp-theme-color);
  font-weight: 500;
  width: 100%;
  padding: 10px 3px;
  height: auto;
}
.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  list-style: none;
  line-height: 35px;
  min-height: 35px;
  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.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;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
@media (max-width: 574.98px) {
  .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;
  border-radius: 50%;
  color: var(--tp-theme-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  background: var(--tp-secoundery-color);
  box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
}
.back-to-top-btn svg {
  transform: translateY(-2px);
}
.back-to-top-btn:hover {
  transform: translateY(-4px);
}

/*----------------------------------------*/
/*  2.8 Magic Cursor css start
/*----------------------------------------*/
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;
  border-radius: 50%;
  color: transparent;
  justify-content: center;
  mix-blend-mode: difference;
  background-color: var(--tp-theme-color);
}

/* Ball view 
============= */
#ball .ball-view {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  padding: 0 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transform: scale(0);
  font-family: var(--tp-white-font);
  color: var(--tp-theme-color);
}

/* Ball drag 
============= */
#ball .ball-drag {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: all 0.3s;
  font-family: var(--tp-theme-font);
  color: var(--tp-theme-color);
}

#ball .ball-drag::before,
#ball .ball-drag::after {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  font-size: 19px;
  height: 10px;
  line-height: 10px;
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  color: var(--tp-theme-color);
  font-family: "Font Awesome 6 Pro";
  -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;
  line-height: 1;
  text-align: center;
  color: var(--tp-theme-color);
}

.tp-magnetic-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-white-bg #ball {
  background-color: var(--tp-theme-color) !important;
}
.cursor-white-bg #ball .ball-view {
  color: var(--tp-theme-color);
}

.cursor-black-bg #ball {
  background-color: var(--tp-theme-color) !important;
}
.cursor-black-bg #ball .ball-view {
  color: var(--tp-white-color);
}

.cursor-secoundery-bg #ball {
  background-color: var(--tp-secoundery-color) !important;
}
.cursor-secoundery-bg #ball .ball-view {
  color: var(--tp-theme-color);
}

.cursor-orange-bg #ball {
  background-color: var(--tp-orange-color) !important;
}
.cursor-orange-bg #ball .ball-view {
  color: var(--tp-white-color);
}

/*----------------------------------------*/
/*  2.9 Preloader Css Here
/*----------------------------------------*/
#loading {
  background-color: var(--tp-theme-color);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
}

#loading-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl-wrap {
  position: relative;
  width: clamp(200px, 28vw, 360px);
}

.pl-logo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: plFloat 5s ease-in-out 2.4s infinite alternate;
}

.pl-logo .pl-wave,
.pl-logo .pl-tower,
.pl-logo .pl-letter {
  fill: #FFF;
}
.pl-logo .pl-bar,
.pl-logo .pl-tag {
  fill: var(--tp-secoundery-color);
}
.pl-logo .pl-wave,
.pl-logo .pl-tower,
.pl-logo .pl-letter,
.pl-logo .pl-bar,
.pl-logo .pl-tag {
  transform-box: fill-box;
}

/* waves roll in from the left, then sway forever */
.pl-logo .pl-wave {
  animation-name: plWaveIn, plWaveSway;
  animation-duration: 0.9s, 3.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: both, none;
}
.pl-logo .pl-w1 {
  animation-delay: 0.1s, 2.1s;
}
.pl-logo .pl-w2 {
  animation-delay: 0.25s, 2.4s;
}
.pl-logo .pl-w3 {
  animation-delay: 0.4s, 2.7s;
}

/* the tower rises out of the water */
.pl-logo .pl-tower {
  animation: plRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* floors build bottom-up, extending from the right */
.pl-logo .pl-bar {
  transform-origin: right center;
  animation: plBar 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pl-logo .pl-b1 {
  animation-delay: 0.7s;
}
.pl-logo .pl-b2 {
  animation-delay: 0.8s;
}
.pl-logo .pl-b3 {
  animation-delay: 0.9s;
}
.pl-logo .pl-b4 {
  animation-delay: 1s;
}
.pl-logo .pl-b5 {
  animation-delay: 1.1s;
}
.pl-logo .pl-b6 {
  animation-delay: 1.2s;
}
.pl-logo .pl-b7 {
  animation-delay: 1.3s;
}

/* letters surface one by one from below the waterline */
.pl-word .pl-letter {
  animation: plSurface 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pl-word .pl-letter:nth-child(1) {
  animation-delay: 1.25s;
}
.pl-word .pl-letter:nth-child(2) {
  animation-delay: 1.32s;
}
.pl-word .pl-letter:nth-child(3) {
  animation-delay: 1.39s;
}
.pl-word .pl-letter:nth-child(4) {
  animation-delay: 1.46s;
}
.pl-word .pl-letter:nth-child(5) {
  animation-delay: 1.53s;
}
.pl-word .pl-letter:nth-child(6) {
  animation-delay: 1.6s;
}
.pl-word .pl-letter:nth-child(7) {
  animation-delay: 1.67s;
}

/* tagline drifts up last */
.pl-logo .pl-tag {
  animation: plFadeUp 0.8s ease 1.75s both;
}


@keyframes plWaveIn {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes plWaveSway {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes plRise {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plBar {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes plSurface {
  0% {
    opacity: 0;
    transform: translateY(34px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plFadeUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plFloat {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #loading * {
    animation: none !important;
  }
}
/*----------------------------------------*/
/*  2.3 Button Css Here
/*----------------------------------------*/
.tp-btn {
  display: flex;
  align-items: center;
  grid-gap: 15px;
  background-color: var(--tp-secoundery-color);
  font-weight: 600;
  color: var(--tp-theme-color);
  padding: 8px 8px 8px 25px;
  line-height: 1;
  border-radius: 52px;
  width: fit-content;
  height: 52px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-btn {
    padding: 6px 6px 6px 20px;
    grid-gap: 5px;
    height: 43px;
    font-size: 15px;
  }
}
.tp-btn-icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  background-color: transparent;
  color: var(--tp-white-color);
  text-align: center;
  line-height: 34px;
  border-radius: 50px;
  position: relative;
}
.tp-btn-icon::before {
  position: absolute;
  content: "";
  background-color: var(--tp-theme-color);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-btn-icon svg {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  transition-delay: 0.1s;
}
.tp-btn-border {
  background-color: transparent;
  border: 1px solid var(--tp-theme-color);
}
.tp-btn-border-white {
  border-color: var(--tp-white-color);
  color: var(--tp-white-color);
}
.tp-btn-border-white .tp-btn-icon::before {
  background-color: var(--tp-white-color);
}
.tp-btn-border-white .tp-btn-icon svg {
  color: var(--tp-theme-color);
}
.tp-btn-border-white:hover {
  color: var(--tp-white-color);
}
.tp-btn-white {
  background-color: var(--tp-white-color);
}
.tp-btn-submit {
  background-color: var(--tp-white-color);
  line-height: 1;
  width: 100%;
  border-radius: 56px;
  padding: 19px;
  font-weight: 600;
  color: var(--tp-theme-color);
}
.tp-btn-submit:hover {
  background-color: var(--tp-secoundery-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-btn-submit {
    padding: 15px;
  }
}
.tp-btn-submit-2 {
  background: var(--tp-secoundery-color);
  width: auto;
  padding: 22px 66px;
}
.tp-btn-submit-2:hover {
  background-color: var(--tp-gray-color);
}
.tp-btn-black {
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}
.tp-btn-black .tp-btn-icon::before {
  background-color: var(--tp-white-color);
}
.tp-btn-black .tp-btn-icon svg {
  color: var(--tp-theme-color);
}
.tp-btn-orange {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
}
.tp-btn-orange .tp-btn-icon::before {
  background-color: var(--tp-white-color);
}
.tp-btn-orange .tp-btn-icon svg {
  color: var(--tp-theme-color);
}
.tp-btn-orange:hover {
  color: var(--tp-white-color);
}
.tp-btn-swiper {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 54px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-btn-swiper:hover {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}
.tp-btn-swiper-short {
  width: 40px;
  height: 40px;
  border-color: transparent;
  background-color: var(--tp-white-color);
  color: var(--tp-theme-color);
}
.tp-btn-circle {
  height: 140px;
  width: 140px;
  background: var(--tp-theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 140px;
  color: var(--tp-white-color);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-btn-circle {
    height: 110px;
    width: 110px;
  }
  .tp-btn-circle svg {
    width: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-btn-circle {
    height: 80px;
    width: 80px;
  }
  .tp-btn-circle svg {
    width: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-btn-circle {
    height: 60px;
    width: 60px;
  }
  .tp-btn-circle svg {
    width: 15px;
  }
}
.tp-btn-circle:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.tp-btn:hover {
  padding: 8px 8px 8px 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-btn:hover {
    padding: 6px 6px 6px 20px;
  }
}
.tp-btn:hover .tp-btn-icon::before {
  width: 36px;
  height: 36px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-btn:hover .tp-btn-icon::before {
    width: 25px;
    height: 25px;
  }
}
.tp-btn:hover .tp-btn-icon svg {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
  transform: translateY(0);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-btn:hover .tp-btn-icon svg {
    width: 8px;
    height: 8px;
  }
}

/*----------------------------------------*/
/*  4.1 Blog Css Here
/*----------------------------------------*/
.tpblogpost {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px) {
  .tpblogpost {
    border-color: transparent;
    background-color: var(--tp-white-color);
    height: 100%;
  }
}
.tpblogpost__meta span {
  display: inline-block;
  font-weight: 500;
  background-color: var(--tp-white-color);
  border: 1px solid transparent;
  border-radius: 30px;
  line-height: 1;
  padding: 12px 19px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpblogpost__meta span {
    padding: 7px 15px;
    font-size: 14px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__meta span {
    padding: 7px 10px;
    font-size: 14px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__author {
    margin-bottom: 15px;
  }
}
.tpblogpost__author-title {
  font-size: 18px;
  margin-bottom: 2px;
}
.tpblogpost__author-title a:hover {
  color: var(--tp-orange-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__author-title {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__author-thumb {
    margin-right: 10px;
  }
}
.tpblogpost__author-thumb img {
  width: 60px;
  height: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__author-thumb img {
    width: 40px;
    height: 40px;
  }
}
.tpblogpost__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tpblogpost__title a:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpblogpost__title {
    font-size: 25px;
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px) {
  .tpblogpost__title br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__content {
    padding-top: 10px;
  }
}
.tpblogpost__button {
  margin-right: 23px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpblogpost__button {
    margin-right: 0;
    margin-left: -10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__button {
    justify-content: start;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__button {
    transform: translateY(-8px);
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpblogpost__thumb {
    margin-bottom: 20px;
  }
}
.tpblogpost__thumb img {
  width: 100%;
  border-radius: 15px;
}
.tpblogpost:hover {
  border-color: transparent;
  background-color: var(--tp-white-color);
  height: 100%;
}
.tpblogpost:hover .tpblogpost__meta span {
  border-color: rgba(0, 0, 0, 0.15);
  background-color: transparent;
}
.tpblogpost:hover .tpblogpost__button .tp-btn.tp-btn-border {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}

.tp-blog-spacing {
  margin-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-blog-spacing {
    padding: 120px 0;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-blog-spacing {
    padding: 100px 0;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-blog-spacing {
    padding: 70px 0;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-blog-heading {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-blog-heading {
    margin-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-blog-heading {
    margin-bottom: 35px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-blog-area {
    border-radius: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-blog-pagination {
    padding-top: 0;
    padding-bottom: 30px;
  }
}
.tp-blog-pagination ul li a {
  border-radius: 44px;
}

.tp-postbox-item:hover .tp-postbox-thumb img {
  transform: scale(1.1);
}
.tp-postbox-spacing {
  padding-top: 150px;
  padding-bottom: 115px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-spacing {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-spacing {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.tp-postbox-badge {
  width: 60px;
  height: 60px;
  background-color: var(--tp-secoundery-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  position: absolute;
  top: 30px;
  left: 30px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-badge {
    width: 50px;
    height: 50px;
    top: 20px;
    left: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-badge-title {
    font-size: 20px;
  }
}
.tp-postbox-badge span {
  letter-spacing: -0.02em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-badge span {
    font-size: 15px;
  }
}
.tp-postbox-categories {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  grid-gap: 6px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-categories {
    right: 20px;
    bottom: 20px;
  }
}
.tp-postbox-categories a {
  color: #1D2132;
  font-weight: 500;
  display: inline-block;
  background: var(--tp-white-color);
  line-height: 1;
  border-radius: 30px;
  padding: 6px 13px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-categories a {
    padding: 5px 10px;
    font-size: 15px;
  }
}
.tp-postbox-categories a:hover {
  background-color: var(--tp-secoundery-color);
}
.tp-postbox-title {
  font-size: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-title {
    font-size: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-title {
    font-size: 25px;
  }
}
.tp-postbox-title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tp-postbox-title a:hover {
  background-size: 100% 1px;
}
.tp-postbox-details-title {
  font-size: 36px;
  padding-right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-title {
    font-size: 30px;
    padding-right: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-title {
    font-size: 25px;
    padding-right: 0;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-title-spacing {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-title-spacing {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-thumb {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-thumb {
    margin-bottom: 13px;
  }
}
.tp-postbox-details-thumb p {
  font-size: 14px;
}
.tp-postbox-details-thumb p a {
  color: var(--tp-body-color);
  font-weight: 400;
}
.tp-postbox-details-thumb p a:hover {
  text-decoration: underline;
}
.tp-postbox-details-thumb-wrap {
  grid-gap: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-thumb-wrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-thumb img {
    height: 320px;
    object-fit: cover;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-thumb-inner {
    margin-bottom: 0;
  }
  .tp-postbox-details-thumb-inner p {
    padding-top: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-content p:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-content p:not(:last-child) {
    margin-bottom: 5px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-item {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-item {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-info {
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-info {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-main {
    padding-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-main {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-details-inner-deg {
    padding-top: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-details-inner-deg {
    padding-top: 15px;
  }
}
.tp-postbox-quote {
  grid-gap: 30px;
  padding: 40px;
  padding-bottom: 45px;
}
@media (max-width: 574.98px) {
  .tp-postbox-quote {
    padding: 20px;
    grid-gap: 20px;
  }
}
.tp-postbox-quote-content span {
  display: flex;
  align-items: center;
  grid-gap: 7px;
  color: var(--tp-secoundery-color);
}
.tp-postbox-quote-content span::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 1px;
  background-color: var(--tp-secoundery-color);
  border-radius: 12px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-quote-deg {
    font-size: 20px;
    margin-bottom: 7px;
  }
}
.tp-postbox-comments ul li {
  list-style: none;
}
.tp-postbox-comments ul li ul.children {
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-postbox-comments ul li ul.children {
    padding-left: 0;
  }
}
.tp-postbox-comments-item {
  grid-gap: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-comments-item {
    grid-gap: 20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-item {
    grid-gap: 15px;
    margin-bottom: 30px;
  }
}
.tp-postbox-comments-author {
  flex: 0 0 auto;
}
.tp-postbox-comments-author img {
  object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-comments-author img {
    width: 70px;
    height: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-author img {
    width: 60px;
    height: 60px;
  }
}
.tp-postbox-comments-author-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.tp-postbox-comments-author-title span {
  font-weight: 400;
  color: var(--tp-body-color);
  font-size: 14px;
}
.tp-postbox-comments-content p {
  font-size: 15px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-link {
    padding-top: 10px;
  }
}
.tp-postbox-comments-link a {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  width: fit-content;
  line-height: 1;
  grid-gap: 6px;
  padding: 6px 17px;
  color: var(--tp-theme-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-link a {
    padding-top: 5px 13px;
    font-size: 15px;
  }
}
.tp-postbox-comments-link a:hover {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
  border-color: transparent;
}
.tp-postbox-comments-title {
  font-size: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-comments-title {
    font-size: 35px;
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-title {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
.tp-postbox-comments-input input, .tp-postbox-comments-input textarea {
  height: 60px;
  margin-bottom: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-input input, .tp-postbox-comments-input textarea {
    height: 54px;
  }
}
.tp-postbox-comments-input textarea {
  height: 120px;
  border-radius: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-input textarea {
    height: 100px;
  }
}
.tp-postbox-comments-input button {
  display: block;
  background-color: var(--tp-secoundery-color);
  width: 100%;
  font-weight: 600;
  color: var(--tp-theme-color);
  border-radius: 60px;
  padding: 16px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-input button {
    padding: 13px;
    font-size: 15px;
  }
}
.tp-postbox-comments-input button svg {
  margin-left: 5px;
}
.tp-postbox-comments-input button:hover {
  background-color: var(--tp-gray-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-comments-wrap {
    padding-top: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-wrap {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-comments-form-wrap {
    padding-top: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-comments-form-wrap {
    padding-top: 10px;
    margin-bottom: 30px;
  }
}
.tp-postbox-check {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 16px;
  height: 16px;
  outline: none;
  flex: 0 0 auto;
  padding: 0;
  background: linear-gradient(313.73deg, #F7F7F7 12.5%, rgba(254, 254, 254, 0) 82.85%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.tp-postbox-check:checked {
  position: relative;
  background: var(--tp-orange-color);
  border-color: transparent;
  border-radius: 20px;
}
.tp-postbox-check:checked::after {
  position: absolute;
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  font-size: 9px;
  color: var(--tp-white-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tp-postbox-check:hover {
  cursor: pointer;
}
.tp-postbox-check-wrap {
  grid-gap: 8px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-check-wrap {
    margin-bottom: 20px;
  }
}
.tp-postbox-check-wrap label {
  font-size: 14px;
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-postbox-wrap {
    padding-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-item {
    margin-bottom: 30px;
  }
}
.tp-postbox-thumb {
  overflow: hidden;
  border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-postbox-thumb {
    margin-bottom: 15px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-postbox-thumb {
    margin-bottom: 25px;
  }
}
.tp-postbox-thumb img {
  transition: all 0.9s ease-in-out;
}
@media (max-width: 574.98px) {
  .tp-postbox-thumb img {
    height: 320px;
    object-fit: cover;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-postbox-link {
    padding-top: 10px;
  }
}

.tppostbox {
  overflow: hidden;
}
.tppostbox__shape {
  background-color: #fff;
  border-radius: 0 0 20px 0;
  padding: 0 10px 10px 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.tppostbox__shape::before {
  background-color: transparent;
  border-top-left-radius: 20px;
  bottom: -40px;
  box-shadow: 0 -18px #fff;
  content: "";
  height: 40px;
  position: absolute;
  left: 0;
  width: 20px;
}
.tppostbox__shape::after {
  background-color: transparent;
  border-top-right-radius: 20px;
  bottom: 12px;
  box-shadow: 0 -18px #fff;
  content: "";
  height: 40px;
  position: absolute;
  right: -30px;
  width: 20px;
  transform-origin: center;
  transform: rotate(275deg);
}
.tppostbox__title {
  font-size: 24px;
  padding-top: 25px;
}
.tppostbox__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tppostbox__title a:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tppostbox__title {
    padding-top: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tppostbox__title {
    padding-top: 15px;
  }
}
.tppostbox__meta {
  display: inline-block;
  background: var(--tp-gray-color);
  border-radius: 30px;
  padding: 8px 15px;
  font-weight: 500;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.tppostbox__thumb {
  overflow: hidden;
}
.tppostbox__thumb img {
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tppostbox__thumb img {
    width: 100%;
  }
}
.tppostbox__btn {
  bottom: 50%;
  z-index: 9;
}
.tppostbox:hover .tppostbox__btn {
  bottom: 50%;
  opacity: 1;
  visibility: visible;
}
.tppostbox:hover .tppostbox__thumb img {
  transform: scale(1.1);
}

.tppostbox2 {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tppostbox2__meta {
  display: inline-block;
  color: var(--tp-theme-color);
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 30px;
  border-radius: 30px;
  line-height: 1;
  padding: 5px 14px;
}
.tppostbox2__content {
  display: flex;
  align-items: end;
  justify-content: space-between;
  grid-gap: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tppostbox2__content {
    grid-gap: 10px;
  }
}
.tppostbox2__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tppostbox2__title a:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tppostbox2__title {
    font-size: 22px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tppostbox2__title {
    font-size: 20px;
  }
  .tppostbox2__title br {
    display: none;
  }
}
.tppostbox2__link a {
  width: 60px;
  height: 70px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-theme-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tppostbox2__link a {
    width: 40px;
    height: 50px;
  }
  .tppostbox2__link a svg {
    width: 13px;
  }
}
.tppostbox2__link a:hover {
  background-color: var(--tp-secoundery-color);
}
.tppostbox2__thumb {
  overflow: hidden;
}
.tppostbox2__thumb img {
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.tppostbox2::before {
  position: absolute;
  content: "";
  background-color: var(--tp-orange-color);
  width: 0%;
  height: 1px;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tppostbox2:hover {
  border-color: transparent;
}
.tppostbox2:hover::before {
  width: 100%;
}
.tppostbox2:hover .tppostbox2__link a {
  background-color: var(--tp-secoundery-color);
}
.tppostbox2:hover .tppostbox2__thumb img {
  transform: scale(1.1) rotate(-2deg);
}

/*----------------------------------------*/
/*  4.2 Sidebar Css Here
/*----------------------------------------*/
.tp-sidebar-search {
  position: relative;
}
.tp-sidebar-search input {
  height: 60px;
  padding-right: 70px;
  border-color: transparent;
  background-color: var(--tp-gray-color);
}
.tp-sidebar-search input:focus {
  background-color: transparent;
  border-color: var(--tp-black-color);
}
.tp-sidebar-search button {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.tp-sidebar-author {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.tp-sidebar-author-avatar img {
  border-radius: 50%;
}
.tp-sidebar-author-status {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--tp-secoundery-color);
  border-radius: 20px;
  border: 3px solid var(--tp-gray-color);
  position: absolute;
  right: 4px;
  top: 3px;
}
.tp-sidebar-author-title {
  font-size: 18px;
}
.tp-sidebar-author-title a:hover {
  color: var(--tp-secoundery-color);
}
.tp-sidebar-author-content span {
  font-size: 14px;
}
.tp-sidebar-author-socials {
  grid-gap: 17px;
}
.tp-sidebar-author-socials a {
  color: var(--tp-theme-color);
}
.tp-sidebar-author-socials a:hover {
  color: var(--tp-secoundery-color);
}
.tp-sidebar-author-info {
  background-color: var(--tp-gray-color);
  border-radius: 20px 20px 30px 30px;
  padding: 40px;
  padding-bottom: 29px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-author-info {
    padding: 20px;
  }
}
.tp-sidebar-author-cta {
  padding: 35px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-author-cta {
    padding: 20px 25px;
  }
}
.tp-sidebar-author-cta a {
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.tp-sidebar-author-cta a:hover {
  color: var(--tp-secoundery-color);
}
.tp-sidebar-category ul li {
  list-style: none;
  margin-bottom: 8px;
}
.tp-sidebar-category ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 100px;
  padding: 17px 25px;
  font-weight: 600;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-category ul li a {
    padding: 10px 15px;
    font-size: 15px;
  }
}
.tp-sidebar-category ul li a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  border-color: transparent;
}
.tp-sidebar-category-bg {
  background-color: var(--tp-gray-color);
  border-radius: 20px;
  padding: 35px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-sidebar-category-bg {
    padding: 20px 25px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-category-bg {
    padding: 20px;
  }
}
.tp-sidebar-category-black ul li a:hover {
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}
.tp-sidebar-cta {
  padding: 20px;
  padding-top: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-cta {
    padding-top: 30px;
  }
}
.tp-sidebar-cta-link a {
  display: block;
  background: var(--tp-secoundery-color);
  font-weight: 600;
  color: var(--tp-theme-color);
  line-height: 1;
  border-radius: 10px;
  padding: 18px;
}
.tp-sidebar-cta-link a:hover {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
}
.tp-sidebar-cta-shape {
  left: 0;
  top: 0;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-cta-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-cta-img {
    padding-top: 15px;
  }
}
.tp-sidebar-cta-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-search {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-sidebar-widget {
    margin-bottom: 30px;
  }
}
.tp-sidebar-title {
  font-size: 24px;
}

.tprecentpost {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 12px;
}
.tprecentpost:hover .tprecentpost__thumb img {
  transform: scale(1.1);
}
.tprecentpost__title {
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 500;
}
.tprecentpost__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tprecentpost__title a:hover {
  background-size: 100% 1px;
}
.tprecentpost__meta {
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 1;
  grid-gap: 5px;
}
.tprecentpost__thumb {
  overflow: hidden;
  border-radius: 10px;
}
.tprecentpost__thumb img {
  transition: all 0.9s ease-in-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tagcloud {
    padding-right: 0;
  }
}
.tagcloud a {
  display: inline-block;
  font-weight: 500;
  color: var(--tp-theme-color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  line-height: 1;
  padding: 7px 15px;
}
.tagcloud a:not(:last-child) {
  margin-right: 5px;
  margin-bottom: 8px;
}
.tagcloud a:hover {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}

/*----------------------------------------*/
/*  5.1 Footer Css Here
/*----------------------------------------*/
.tp-footer-top {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tp-footer-top-spacing {
  padding: 125px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-top-spacing {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-top-spacing {
    padding-bottom: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-top-spacing {
    padding: 70px 0;
    padding-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-top-content {
    padding-top: 20px;
  }
  .tp-footer-top-content p {
    margin-bottom: 20px;
  }
}
.tp-footer-widgets-title {
  font-size: 16px;
  letter-spacing: 0;
  color: var(--tp-body-color);
  text-transform: uppercase;
}
.tp-footer-widgets ul {
  margin-right: -10px;
}
.tp-footer-widgets ul li {
  list-style: none;
  margin-bottom: 18px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-widgets ul li {
    margin-bottom: 8px;
  }
}
.tp-footer-widgets ul li a {
  color: var(--tp-white-color);
  font-size: 17px;
  font-weight: 600;
}
.tp-footer-widgets ul li a:hover {
  color: var(--tp-secoundery-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-widgets ul li a {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-widgets-spacing {
    padding-left: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-widgets-spacing {
    padding-left: 0;
  }
}
.tp-footer-widgets-black ul li {
  margin-bottom: 10px;
}
.tp-footer-widgets-black ul li a {
  color: var(--tp-theme-color);
}
.tp-footer-widgets-white .tp-footer-widgets-title {
  color: rgba(255, 255, 255, 0.65);
}
.tp-footer-widgets-white ul li {
  margin-bottom: 11px;
}
.tp-footer-cta ul li {
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-cta ul li {
    margin-bottom: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-cta ul li {
    margin-bottom: 0;
  }
}
.tp-footer-cta ul li a {
  font-size: 36px;
  font-weight: 500;
  font-family: var(--tp-poppins-font);
  color: var(--tp-white-color);
  letter-spacing: -0.03em;
}
.tp-footer-cta ul li a:hover {
  color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-cta ul li a {
    font-size: 25px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-cta ul li a {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-newsletter {
    padding-top: 30px;
  }
}
.tp-footer-newsletter-deg {
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.3;
}
.tp-footer-newsletter form input {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  height: 40px;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.65);
  padding-left: 0;
}
.tp-footer-newsletter form input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.tp-footer-newsletter form input:focus {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.tp-footer-shape {
  bottom: -85%;
  left: 0;
}
.tp-footer-bottom {
  padding: 70px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-bottom {
    padding: 50px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px) {
  .tp-footer-bottom {
    padding: 40px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-bottom {
    padding: 30px 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-bottom-logo img {
    max-width: 85%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-bottom-logo img {
    max-width: 65%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-bottom-logo img {
    max-width: 70%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-main {
    padding-top: 20px;
    padding-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-main {
    padding-top: 40px;
    padding-bottom: 60px;
  }
}
.tp-footer-margin {
  margin: 0 30px 30px 30px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-footer-margin {
    margin: 0 20px 20px 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-footer-margin {
    margin: 0;
    border-radius: 20px 20px 0 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-margin {
    border-radius: 0;
  }
}
.tp-footer-info-title {
  font-size: 40px;
  font-weight: 500;
  font-family: var(--tp-poppins-font);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-info-title {
    font-size: 30px;
    margin-bottom: 10px;
  }
}
.tp-footer-info-deg {
  font-size: 24px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-info-deg {
    font-size: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-info-deg {
    font-size: 18px;
  }
}
.tp-footer-info-deg a {
  text-decoration: underline;
}
.tp-footer-info-deg a:hover {
  color: var(--tp-secoundery-color);
}
.tp-footer-social ul {
  margin: 0;
  display: flex;
  align-items: center;
  grid-gap: 5px;
}
.tp-footer-social ul li {
  display: inline-block;
  margin: 0;
}
.tp-footer-social ul li a {
  display: inline-block;
  color: var(--tp-theme-color);
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-footer-social ul li a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  border-color: transparent;
}
.tp-footer-social-white ul li a {
  border-color: var(--tp-white-color);
  color: var(--tp-white-color);
}
.tp-footer-copyright-text p {
  color: var(--tp-theme-color);
}
@media (max-width: 574.98px) {
  .tp-footer-copyright-text p {
    margin-bottom: 10px;
  }
}
.tp-footer-copyright-text p a {
  font-weight: 500;
}
.tp-footer-copyright-text p a:hover {
  text-decoration: underline;
  color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-copyright-text p br {
    display: none;
  }
}
.tp-footer-spacing {
  padding-top: 115px;
  padding-bottom: 40px;
}
@media (max-width: 574.98px) {
  .tp-footer-spacing {
    padding-top: 60px;
  }
}
.tp-footer-spacing-2 {
  padding-bottom: 60px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-spacing-2 {
    padding-bottom: 20px;
  }
}
.tp-footer-spacing-3 {
  padding-top: 140px;
  padding-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-spacing-3 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-spacing-3 {
    padding-top: 70px;
    border-radius: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-content {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-wrap {
    padding-bottom: 40px;
  }
}
@media (max-width: 574.98px) {
  .tp-footer-logo {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-logo {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
}
.tp-footer-title {
  font-size: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-title {
    font-size: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-title {
    font-size: 45px;
    margin-bottom: 30px;
  }
}
.tp-footer-badge a {
  width: 200px;
  height: 200px;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.tp-footer-badge a:hover {
  background-color: var(--tp-white-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-badge a {
    width: 160px;
    height: 160px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-badge a {
    width: 120px;
    height: 120px;
    font-size: 17px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-heading {
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-heading {
    padding-bottom: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-heading {
    flex-wrap: wrap;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-heading {
    flex-wrap: nowrap;
  }
}
.tp-footer-contect {
  max-width: 1600px;
  background: #fff;
  margin: 0 auto;
  border-radius: 20px;
  padding: 90px 90px 0 90px;
  padding-bottom: 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-footer-contect {
    max-width: 1450px;
    padding: 60px 60px 0 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-footer-contect {
    max-width: 1300px;
    padding: 40px 40px 0 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-footer-contect {
    max-width: 1117px;
    padding: 40px 40px 0 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-contect {
    max-width: 930px;
    padding: 30px 30px 0 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-contect {
    max-width: 700px;
    padding: 20px 20px 0 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-footer-contect {
    padding: 20px 0 0 0;
  }
}
.tp-footer-contect-info {
  display: flex;
  justify-content: space-between;
  padding-right: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-contect-info {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-contect-info {
    flex-wrap: wrap;
  }
}
.tp-footer-contect-info-des {
  font-weight: 400;
  color: var(--tp-body-color);
  font-family: var(--tp-poppins-font);
  display: flex;
  align-items: center;
  grid-gap: 8px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-footer-contect-info-des {
    font-size: 27px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-contect-info-des {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-info-des {
    font-size: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
}
.tp-footer-contect-info-des b {
  color: var(--tp-theme-color);
  font-weight: 500;
}
.tp-footer-contect-info-des a {
  color: var(--tp-orange-color);
  display: inline-block;
  text-decoration: underline;
}
.tp-footer-contect-info-des a:hover {
  text-decoration: none;
}
.tp-footer-contect-info-des span {
  display: inline-block;
  width: 100px;
  height: 1px;
  background-color: var(--tp-orange-color);
  margin: 0 45px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-contect-info-des span {
    margin: 0 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-info-des span {
    margin: 0 10px;
    width: 50px;
  }
}
.tp-footer-contect-info-title {
  font-size: 18px;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-info-title {
    margin-bottom: 10px;
  }
}
.tp-footer-contect-info p a:hover {
  text-decoration: underline;
  color: var(--tp-orange-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-info-deg p br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-contect-info-wrap {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-contect-info-main {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-info-main {
    padding-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-contect-info-item {
    margin-bottom: 15px;
  }
}
.tp-footer-contect-cta a {
  display: inline-block;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-cta a {
    display: block;
  }
}
.tp-footer-contect-cta a:hover {
  text-decoration: underline;
  color: var(--tp-orange-color);
}
.tp-footer-contect-right {
  flex-direction: column;
  text-align: end;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-contect-right {
    text-align: start;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-right {
    flex-direction: row;
    grid-gap: 20px;
    justify-content: start;
    align-items: center;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-contect-menu ul {
    text-align: center;
  }
}
.tp-footer-contect-menu ul li {
  display: inline-block;
  margin-right: 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-contect-menu ul li {
    margin-right: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-footer-contect-menu ul li {
    margin-right: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-footer-contect-menu ul li {
    margin-right: 20px;
  }
}
.tp-footer-contect-menu ul li:last-child {
  margin-right: 0;
}
.tp-footer-contect-menu ul li a {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
}
.tp-footer-contect-menu ul li a:hover {
  color: var(--tp-orange-color);
}
.tp-footer-contect-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 22px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-bottom {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-footer-contect-logo {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-footer-contect-logo {
    margin-bottom: 0;
  }
}

/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
.tp-header-wrap {
  padding: 0 70px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-header-wrap {
    padding: 0 45px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-header-wrap {
    padding: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-header-wrap {
    padding: 0 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-header-wrap {
    padding: 0 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-header-wrap {
    padding: 0 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-wrap {
    padding: 0 25px;
  }
}
.tp-header-menu {
  border-radius: 60px;
  padding: 0px 10px;
  display: inline-block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-header-menu {
    transform: translateX(0);
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-header-menu {
    transform: translateX(-10px);
  }
}
.tp-header-menu ul li {
  list-style: none;
  display: inline-block;
  margin: 0 19px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-header-menu ul li {
    margin: 0 13px;
  }
}
.tp-header-menu ul li a {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: var(--tp-theme-color);
  padding: 17.5px 0;
  line-height: 1.5;
  position: relative;
  line-height: 1;
  transform: translateY(-2px);
}
.tp-header-menu ul li a::before {
  position: absolute;
  content: "";
  background-color: var(--tp-secoundery-color);
  width: 0;
  height: 1.5px;
  border-radius: 10px;
  bottom: 12px;
  left: auto;
  right: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-header-menu ul li .sub-menu {
  position: absolute;
  width: 280px;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s ease;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  background-color: var(--tp-white-color);
  padding: 22px 0;
  border-radius: 20px;
  left: -32px;
  opacity: 0;
  visibility: hidden;
  top: 110%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-header-menu ul li .sub-menu li {
  margin: 0;
  display: block;
  text-align: start;
}
.tp-header-menu ul li .sub-menu li a {
  padding: 11px 37px;
  position: relative;
  display: block;
}
.tp-header-menu ul li .sub-menu li a::before {
  display: none;
}
.tp-header-menu ul li .sub-menu li a span {
  display: inline-block;
  position: relative;
}
.tp-header-menu ul li .sub-menu li a span::before {
  position: absolute;
  content: "";
  background-color: var(--tp-secoundery-color);
  width: 0;
  height: 1.5px;
  border-radius: 10px;
  bottom: -4px;
  left: auto;
  right: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-header-menu ul li .sub-menu li:hover > a span::before {
  width: 100%;
  left: 0;
  right: auto;
}
.tp-header-menu ul li .sub-menu li .sub-menu {
  left: 101%;
  top: 50%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.tp-header-menu ul li .sub-menu li:hover .sub-menu {
  top: 0;
  opacity: 1;
  visibility: visible;
}
.tp-header-menu ul li:hover > a::before {
  width: 100%;
  left: 0;
  right: auto;
}
.tp-header-menu ul li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  top: 105%;
}
.tp-header-menu-grey {
  background-color: var(--tp-gray-color);
}
.tp-header-menu-white ul li a {
  color: var(--tp-white-color);
}
.tp-header-menu-white ul li .sub-menu li a {
  color: var(--tp-theme-color);
}
.tp-header-menu-border {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}
.tp-header-border-gray {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tp-header-border-white {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-header-cta {
    margin-left: -30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-header-cta {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-header-cta {
    margin-left: -50px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-header-cta-phone {
    margin-right: 20px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-header-cta-phone {
    margin-right: 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-header-cta-phone {
    margin-right: 20px;
  }
}
@media only screen and (min-width: 1801px) {
  .tp-header-area.container-wide, .tp-header-area .container-wide {
    padding: 0 70px;
  }
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px), only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-header-area.container-wide, .tp-header-area .container-wide {
    padding: 0 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-header-area.container-wide, .tp-header-area .container-wide {
    padding: 0 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-header-area.container-wide, .tp-header-area .container-wide {
    padding: 0 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-header-area.container-wide, .tp-header-area .container-wide {
    padding: 0 30px;
  }
}
.tp-header-area.tp-header-spacing-3 {
  padding-top: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-area.tp-header-spacing-3 {
    padding-top: 0;
  }
}
.tp-header-spacing {
  padding: 28px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-header-spacing {
    padding: 20px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-spacing {
    padding: 15px 0;
  }
}
.tp-header-spacing-2 {
  padding: 19px 0;
}
.tp-header-spacing-4 {
  padding: 20px 0;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-spacing-4 {
    padding: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-logo img {
    max-width: 120px;
  }
}
.tp-header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.tp-header-top {
  padding: 4px 30px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding-bottom: 7px;
  z-index: 2;
  position: relative;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-top {
    padding: 5px;
    margin: 0 10px;
  }
}
.tp-header-top-cta {
  grid-gap: 40px;
}
@media (max-width: 574.98px) {
  .tp-header-top-cta {
    display: block;
    text-align: center;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-top-cta {
    justify-content: center;
  }
}
.tp-header-top-cta a {
  display: inline-block;
  font-size: 14px;
  color: var(--tp-theme-color);
  line-height: 1;
}
.tp-header-top-cta a:hover {
  color: var(--tp-orange-color);
}
.tp-header-top-cta a span {
  color: var(--tp-body-color);
  transform: translateY(-1px);
  margin-right: 3px;
}
.tp-header-social {
  display: flex;
  grid-gap: 10px;
}
.tp-header-social a:hover {
  color: var(--tp-orange-color);
}
.tp-header-social-wrap {
  grid-gap: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-header-social-wrap {
    justify-content: center;
  }
}

.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  z-index: 10;
  visibility: visible;
  background: var(--tp-white-color);
  box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.08);
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
}
.header-sticky .tp-header-border-white, .header-sticky .tp-header-border-gray {
  border-color: transparent;
}
.header-sticky.tp-bg-gray {
  background-color: var(--tp-gray-color);
}
.header-sticky.sticky-black {
  background-color: rgb(19, 19, 22);
}
.header-sticky.sticky-black .tp-header-border-white {
  border-color: transparent;
}
.header-sticky.sticky-black .tp-header-menu ul li .sub-menu {
  background-color: var(--tp-theme-color);
}
.header-sticky.sticky-black .tp-header-menu ul li .sub-menu li a {
  color: var(--tp-white-color);
}
.header-sticky .tp-header-spacing {
  padding: 12px 0;
}
.header-sticky.media {
  padding: 12px 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .header-sticky.media {
    padding: 12px 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .header-sticky.media {
    padding: 12px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-sticky.media {
    padding: 12px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .header-sticky.media {
    padding: 12px 10px;
  }
}

/*----------------------------------------*/
/*  3.2 Mobile Menu Css Here
/*----------------------------------------*/
.tp-header-nav {
  justify-content: end;
}

.tp-offcanvas-menu {
  margin-bottom: 30px;
}
@media (max-width: 574.98px) {
  .tp-offcanvas-menu {
    width: 100%;
  }
}
.tp-offcanvas-menu ul li {
  position: relative;
  border-bottom: 1px solid var(--tp-secoundery-color);
  padding: 5px 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  list-style: none;
}
.tp-offcanvas-menu ul li .sub-menu {
  display: none;
}
.tp-offcanvas-menu ul li .sub-menu li {
  padding-left: 20px;
}
.tp-offcanvas-menu ul li .sub-menu li:last-child {
  border: 0;
  padding-bottom: 0;
}
.tp-offcanvas-menu ul li .sub-menu li a {
  transition: 0.4s;
}
.tp-offcanvas-menu ul li .sub-menu li a:hover {
  color: var(--tp-theme-color);
}
.tp-offcanvas-menu ul li .sub-menu li a i {
  display: none;
}
.tp-offcanvas-menu ul li .mega-menu {
  display: none;
}
.tp-offcanvas-menu ul li .mega-menu li {
  padding-left: 20px;
}
.tp-offcanvas-menu ul li .mega-menu li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.tp-offcanvas-menu ul li.active {
  transition: 0.3s;
}
.tp-offcanvas-menu ul li.active > a {
  color: var(--tp-secoundery-color);
}
.tp-offcanvas-menu ul li.active > .tp-menu-close > i {
  transform: rotate(90deg);
}
.tp-offcanvas-menu ul li.active button {
  background-color: var(--tp-secoundery-color);
}
.tp-offcanvas-menu ul li a {
  display: block;
  color: var(--tp-theme-color);
  font-weight: 600;
}
.tp-offcanvas-menu ul li a svg {
  display: none;
}

.tp-menu-close {
  position: absolute;
  right: 0;
  top: 3px;
  border: 1px solid var(--tp-secoundery-color);
  height: 30px;
  width: 30px;
  transition: 0.3s;
}
.tp-menu-close i {
  font-size: 15px;
  transition: 0.3s;
}

/*----------------------------------------*/
/*  7.1 Hero Css Here
/*----------------------------------------*/
.tp-hero-video {
  box-shadow: 0px 15px 30px -8px rgba(0, 0, 0, 0.45);
  border-radius: 20px;
  background: var(--tp-theme-color);
  width: 100%;
  height: 190px;
  overflow: hidden;
  padding: 5px 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-video {
    height: 145px;
  }
}
.tp-hero-video video {
  width: 100%;
  overflow: hidden;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-position: center center;
  border-radius: 16px;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-video-heading {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-video-button {
    margin-bottom: 25px;
  }
}
.tp-hero-video-spacing {
  padding-top: 160px;
}
.tp-hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.tp-hero-area {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-bg {
    border-radius: 0;
  }
}
.tp-hero-bg-shape {
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
}
.tp-hero-bg-shape img {
  height: 100%;
}
.tp-hero-spacing {
  padding-top: 640px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-spacing {
    padding-top: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-spacing {
    padding-top: 200px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing {
    padding-top: 100px;
  }
}
.tp-hero-spacing-2 {
  padding-top: 235px;
  padding-bottom: 245px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-spacing-2 {
    padding-bottom: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-spacing-2 {
    padding-top: 200px;
    padding-bottom: 120px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing-2 {
    padding-top: 130px;
    padding-bottom: 70px;
  }
}
.tp-hero-spacing-3 {
  min-height: 930px;
  padding-top: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-spacing-3 {
    min-height: 800px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-spacing-3 {
    min-height: 650px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing-3 {
    min-height: 500px;
    padding-top: 50px;
    border-radius: 0;
  }
}
.tp-hero-spacing-3-short {
  min-height: 900px;
  padding-top: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-spacing-3-short {
    min-height: 760px;
    padding-top: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing-3-short {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing-3-short {
    min-height: 600px;
  }
}
.tp-hero-spacing-4 {
  min-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 200px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-spacing-4 {
    min-height: 970px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-spacing-4 {
    min-height: 950px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-spacing-4 {
    min-height: 900px;
    padding-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing-4 {
    min-height: 850px;
    padding-top: 120px;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-spacing-4 {
    min-height: 730px;
  }
}
.tp-hero-spacing-5 {
  min-height: 960px;
  padding-top: 160px;
}
.tp-hero-back-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #C6E4FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 500px;
  letter-spacing: -0.06em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-hero-back-text {
    font-size: 430px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-back-text {
    font-size: 350px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-back-text {
    font-size: 275px;
  }
}
.tp-hero-back-text-position {
  position: absolute;
  top: -30px;
  left: 13.5%;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-hero-back-text-position {
    top: 40px;
    left: 19.5%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-back-text-position {
    top: 72px;
    left: 28.5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-back-text-position {
    top: 90px;
    left: 27%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-back-text-position {
    top: 160px;
  }
}
.tp-hero-title {
  letter-spacing: -0.06em;
  font-size: 320px;
  line-height: 133px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-title {
    font-size: 270px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-title {
    font-size: 220px;
    line-height: 90px;
    padding-top: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-title {
    font-size: 230px;
    line-height: 90px;
    padding-top: 28px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-title {
    font-size: 140px;
    line-height: 60px;
    padding-top: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-title {
    font-size: 180px;
  }
}
.tp-hero-title span {
  font-size: 160px;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-title span {
    font-size: 140px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-title span {
    font-size: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-title span {
    font-size: 70px;
  }
}
.tp-hero-title-mid {
  line-height: 0.9;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-title-mid {
    margin-bottom: 15px;
  }
}
.tp-hero-deg {
  font-size: 24px;
  line-height: 1.4;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-deg br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-deg {
    font-size: 22px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-deg {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
.tp-hero-badge {
  position: absolute;
  right: 150px;
  bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-badge {
    right: 70px;
    bottom: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-badge {
    right: 20px;
    bottom: 20px;
  }
}
.tp-hero-badge a:hover {
  background-color: var(--tp-white-color);
}
.tp-hero-banner-title {
  font-size: 160px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 140px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-banner-title {
    font-size: 135px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-banner-title {
    font-size: 100px;
    line-height: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-banner-title {
    font-size: 75px;
    text-align: start;
    line-height: 1;
    padding-top: 20px;
    margin-bottom: 10px;
  }
}
.tp-hero-banner-heading {
  margin-top: -10px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-banner-main {
    padding-bottom: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-banner-main {
    padding-bottom: 20px;
  }
}
.tp-hero-banner-area {
  padding-top: 170px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-banner-area {
    padding-top: 140px;
    padding-bottom: 40px;
  }
}
.tp-hero-agents-img {
  display: flex;
  align-items: center;
}
.tp-hero-agents-img img {
  border-radius: 30px;
  border: 3px solid var(--tp-gray-color);
  flex: 0 0 auto;
  margin: 0 -5px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-agents-img-larg {
    margin-right: 15px;
  }
}
.tp-hero-agents-img-larg span, .tp-hero-agents-img-larg img {
  width: 60px;
  height: 60px;
  background: var(--tp-orange-color);
  color: var(--tp-white-color);
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  border: 3px solid #fff;
  margin: 0 -13px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-agents-img-larg span, .tp-hero-agents-img-larg img {
    width: 40px;
    height: 40px;
    margin: 0 -8px;
    font-size: 12px;
  }
}
.tp-hero-agents-title {
  font-size: 18px;
}
.tp-hero-agents-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  min-width: 570px;
  padding-top: 40px;
  padding-left: 35px;
  border-radius: 50px 0 0 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-hero-agents-2 {
    min-width: 500px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-hero-agents-2 {
    min-width: 450px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-agents-2 {
    min-width: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-agents-2 {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-agents-2 {
    min-width: 380px;
    padding-top: 10px;
  }
}
@media (max-width: 574.98px) {
  .tp-hero-agents-2 {
    min-width: 100%;
    padding-top: 10px;
    padding-left: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-agents-2 {
    min-width: 320px;
    padding-top: 15px;
    padding-left: 15px;
  }
}
.tp-hero-agents-2::before {
  content: "";
  clip-path: path("M0 0 Q1,50 80,50 L 0 50 Z");
  background-color: #fff;
  width: 60px;
  height: 80px;
  position: absolute;
  left: -36px;
  transform: rotate(-91deg);
  bottom: -12px;
  transform-origin: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-agents-2::before {
    transform: rotate(-83deg);
    bottom: -15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-agents-2::before {
    width: 38px;
    height: 48px;
    left: -37px;
    bottom: -10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-agents-2::before {
    display: none;
  }
}
.tp-hero-agents-2-title {
  letter-spacing: -0.03em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-agents-2-title {
    font-size: 24px;
  }
}
.tp-hero-slider-main {
  min-height: 960px;
  padding-top: 255px;
  padding-bottom: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-slider-main {
    min-height: 700px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-slider-main {
    min-height: 600px;
    padding-top: 130px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-slider-main {
    min-height: 570px;
    padding-top: 130px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-slider-main {
    padding-bottom: 0;
  }
}
.tp-hero-slider-title {
  font-weight: 700;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-slider-title {
    font-size: 45px;
  }
}
.tp-hero-slider-title b {
  font-weight: 400;
}
.tp-hero-slider-title span {
  font-weight: 100;
  font-style: italic;
}
.tp-hero-slider-bottom {
  grid-gap: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-slider-bottom {
    grid-gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-slider-bottom {
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-slider-bottom {
    display: inline-block;
    margin-bottom: 43px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-slider-bottom {
    margin-bottom: 10px;
  }
}
.tp-hero-slider-shape {
  bottom: 0;
  right: 0;
  mix-blend-mode: color-burn;
  z-index: -1;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-slider-shape {
    display: none;
  }
}
.tp-hero-slider-btn {
  grid-gap: 30px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-slider-btn {
    display: inline-block;
    padding-top: 20px;
  }
}
.tp-hero-slider-btn p {
  font-size: 20px;
  letter-spacing: -0.02em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-slider-btn p {
    padding-top: 20px;
    font-size: 18px;
  }
}
.tp-hero-slider-des {
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-slider-des {
    font-size: 20px;
  }
}
.tp-hero-slider-dvdr {
  background-color: rgba(255, 255, 255, 0.35);
  width: 406px;
  height: 1px;
  display: inline-block;
  transform: translateY(3px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-slider-dvdr {
    width: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-slider-dvdr {
    width: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-hero-slider-dvdr {
    display: none;
  }
}
.tp-hero-slider-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  opacity: 1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-hero-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: transparent;
  background-color: var(--tp-orange-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-slider-des {
    font-size: 20px;
  }
}
.tp-hero-solid-fact {
  grid-gap: 30px;
  position: absolute;
  right: 70px;
  bottom: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-solid-fact {
    bottom: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-solid-fact {
    flex-wrap: wrap;
    right: auto;
    left: 0;
    grid-gap: 10px;
    bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-solid-btn {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-solid-content p {
    padding-top: 10px;
  }
}
.tp-hero-solid-2 {
  padding-top: 160px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-solid-2 {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-solid-2 {
    padding-top: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-solid-2 {
    padding-top: 80px;
  }
}
.tp-hero-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 15px;
  flex-wrap: wrap;
}
.tp-hero-shape-transparent-1 {
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-hero-shape-transparent-2 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.tp-hero-gallery-slider {
  width: 100%;
}
.tp-hero-gallery-slider .swiper-wrapper {
  padding-top: 30px;
  padding-bottom: 30px;
}
.tp-hero-gallery-slider .swiper-wrapper .swiper-slide {
  width: 100rem;
  height: 30rem;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-hero-gallery-slider .swiper-wrapper .swiper-slide {
    height: 24rem;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-gallery-slider .swiper-wrapper .swiper-slide {
    height: 22rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-hero-gallery-slider .swiper-wrapper .swiper-slide {
    height: 20rem;
  }
}
@media (max-width: 574.98px) {
  .tp-hero-gallery-slider .swiper-wrapper .swiper-slide {
    height: 15rem;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-hero-gallery-slider .swiper-wrapper .swiper-slide {
    height: 18rem;
  }
}
.tp-hero-gallery-slider-item {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 100%;
  height: 100%;
}
.tp-hero-gallery-slider-item img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
}

.tp-hero-slider-active .tp-hero-slider-content .tp-hero-slider-title {
  transform: translateY(50px);
  opacity: 0;
  transition: 1s;
  transition-delay: 0.5s;
}
.tp-hero-slider-active .tp-hero-slider-content .tp-hero-slider-btn {
  transform: translateY(50px);
  opacity: 0;
  transition: 1s;
  transition-delay: 0.7s;
}
.tp-hero-slider-active .tp-hero-slider-shape {
  transform: translateX(100px);
  opacity: 0;
  transition: 1s;
  transition-delay: 0.6s;
}
.tp-hero-slider-active .tp-hero-slider-bottom {
  transform: translateY(40px);
  opacity: 0;
  transition: 1s;
  transition-delay: 0.9s;
}
.tp-hero-slider-active .swiper-slide-active .tp-hero-slider-content .tp-hero-slider-title {
  transform: translateY(0);
  opacity: 1;
}
.tp-hero-slider-active .swiper-slide-active .tp-hero-slider-content .tp-hero-slider-btn {
  transform: translateY(0);
  opacity: 1;
}
.tp-hero-slider-active .swiper-slide-active .tp-hero-slider-shape {
  transform: translateX(0);
  opacity: 1;
}
.tp-hero-slider-active .swiper-slide-active .tp-hero-slider-bottom {
  transform: translateY(0);
  opacity: 1;
}

.tp-hero-slider-active > .tp-hero-slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: auto;
  left: auto;
  top: 0;
  width: auto;
  position: absolute;
  z-index: 1;
  right: 100px;
  display: flex;
  flex-direction: column;
  grid-gap: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-hero-slider-active > .tp-hero-slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    right: 30px;
  }
}

/*----------------------------------------*/
/*  7.2 Abou Css Here
/*----------------------------------------*/
.tp-about-badge {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-badge {
    width: 150px;
    height: 150px;
  }
}
.tp-about-badge span {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-about-badge span span {
  padding-top: 7px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px) {
  .tp-about-badge span {
    font-size: 20px;
  }
}
.tp-about-badge-title {
  font-size: 36px;
  letter-spacing: -0.03em;
  margin-bottom: 0;
  padding-top: 4px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-badge-title {
    font-size: 30px;
  }
}
.tp-about-badge-content {
  transform: translateY(-2px);
}
.tp-about-badge-right {
  margin-right: -55px;
  position: relative;
  z-index: 2;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-about-badge-opacity {
  opacity: 0.8;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-badge-wrap {
    justify-content: start;
  }
}
.tp-about-badge-wrap:hover .tp-about-badge:first-child {
  background-color: var(--tp-gray-color);
  opacity: 0.8;
  margin-right: -180px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-badge-wrap:hover .tp-about-badge:first-child {
    margin-right: -150px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-badge-wrap:hover .tp-about-badge:first-child {
    margin-right: -80px;
  }
}
.tp-about-badge-wrap:hover .tp-about-badge:first-child .tp-about-badge-content span {
  color: var(--tp-theme-color);
}
.tp-about-badge-wrap:hover .tp-about-badge:first-child .tp-about-badge-content .tp-about-badge-title {
  color: var(--tp-theme-color);
}
.tp-about-badge-wrap:hover .tp-about-badge:first-child.tp-about-badge-right {
  z-index: -1;
}
.tp-about-badge-wrap:hover .tp-about-badge:last-child {
  background-color: var(--tp-orange-color);
  opacity: 1;
  position: relative;
  transform: translateX(-120px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-badge-wrap:hover .tp-about-badge:last-child {
    transform: translateX(-80px);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-badge-wrap:hover .tp-about-badge:last-child {
    transform: translateX(-65px);
  }
}
.tp-about-badge-wrap:hover .tp-about-badge:last-child .tp-about-badge-content span {
  color: var(--tp-white-color);
}
.tp-about-badge-wrap:hover .tp-about-badge:last-child .tp-about-badge-content .tp-about-badge-title {
  color: var(--tp-white-color);
}
.tp-about-video {
  margin-left: -270px;
  background-color: var(--tp-gray-color);
  border-radius: 10px;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-video {
    margin-left: -350px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-video {
    margin-left: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px) {
  .tp-about-video {
    flex-direction: column;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-video-main {
    padding: 30px 0;
    padding-bottom: 15px;
  }
}
.tp-about-video-black {
  background-color: var(--tp-theme-color);
}
.tp-about-play {
  width: 80px;
  height: 80px;
  background-color: var(--tp-white-color);
  box-shadow: 0px 0px 25px -10px rgba(0, 0, 0, 0.15);
  display: inline-block;
  border-radius: 80px;
  line-height: 78px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-about-play:hover {
  background-color: var(--tp-secoundery-color);
}
.tp-about-play-title {
  font-size: 26px;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-play-title {
    font-size: 20px;
    padding-top: 25px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-play-title {
    font-size: 20px;
    padding-top: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-play {
    width: 60px;
    height: 60px;
    line-height: 57px;
  }
}
.tp-about-border-text {
  font-size: 16px;
  letter-spacing: 0;
  display: inline-block;
}
.tp-about-border-text::before {
  position: absolute;
  content: "";
  background-color: var(--tp-secoundery-color);
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 2px;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-deg {
    padding-bottom: 30px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-deg {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-deg p {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-deg p {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-deg p {
    margin-bottom: 10px;
  }
}
.tp-about-deg-border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-about-deg-2 {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.tp-about-cta-deg {
  margin: 0;
  line-height: 26px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-cta-deg {
    margin-bottom: 15px;
  }
}
.tp-about-spacing {
  padding-top: 135px;
  padding-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-spacing {
    padding-top: 100px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-spacing {
    padding-top: 100px;
    padding-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-spacing {
    padding: 70px 0;
    padding-bottom: 20px;
    border-radius: 0;
  }
}
.tp-about-spacing-2 {
  padding: 145px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-spacing-2 {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-spacing-2 {
    padding: 80px 0;
    border-radius: 0;
  }
}
.tp-about-spacing-3 {
  padding: 145px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-spacing-3 {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-spacing-3 {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-spacing-3 {
    padding: 80px 0;
    border-radius: 0;
  }
}
.tp-about-content {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-content {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-content {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-content {
    padding: 0;
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-content-2 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-heading {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-heading {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-btn {
    padding-top: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-btn-2 {
    padding-top: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-thumb {
    flex: inherit;
  }
}
.tp-about-shape {
  bottom: 150px;
  right: 0;
}
.tp-about-shape-parson {
  right: 0;
  bottom: -50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-shape-parson {
    max-width: 66%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-shape-parson {
    bottom: -18px;
    width: 60%;
  }
}
.tp-about-shape-line {
  left: 0;
  bottom: 0;
}
.tp-about-shape-home {
  right: 0;
  bottom: 0;
  z-index: -1;
}
.tp-about-exprience {
  width: 220px;
  height: 220px;
  background: var(--tp-gray-color);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0px -4px 0px #E6641C;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px) {
  .tp-about-exprience {
    height: 165px;
    width: auto;
  }
}
.tp-about-exprience-content span {
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-block;
  margin-bottom: 3px;
  line-height: 1.1;
}
.tp-about-exprience-num {
  font-size: 160px;
  color: var(--tp-orange-color);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px) {
  .tp-about-exprience-num {
    font-size: 80px;
    line-height: 1;
  }
}
.tp-about-exprience-shape {
  bottom: 0;
  left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-exprience-wrap {
    margin-right: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-exprience-wrap {
    justify-content: start;
    padding-top: 20px;
  }
}
.tp-about-exprience-2 {
  position: absolute;
  left: 30px;
  bottom: -39px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-about-exprience-2 {
    bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), (max-width: 574.98px) {
  .tp-about-exprience-2 {
    bottom: 30px;
  }
}
.tp-about-exprience-2-title {
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-exprience-2-title {
    font-size: 45px;
    margin-bottom: 0;
  }
}
.tp-about-exprience-2 span {
  font-size: 24px;
  color: var(--tp-theme-color);
  font-weight: 600;
  letter-spacing: -0.02em;
  display: inline-block;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-exprience-2 span {
    font-size: 20px;
  }
}
.tp-about-growth {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  font-weight: 500;
  color: var(--tp-theme-color);
  background: var(--tp-white-color);
  width: fit-content;
  line-height: 1;
  border-radius: 38px;
  padding: 10px 19px;
}
.tp-about-growth-main {
  position: absolute;
  top: 68px;
  right: -22px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-growth-main {
    right: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-growth-wrap {
    text-align: start;
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px) {
  .tp-about-fect {
    margin-bottom: 30px;
  }
}
.tp-about-fect-num {
  font-size: 160px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 15px;
}
.tp-about-fect-num.odometer {
  line-height: 129px;
  font-weight: 800;
  display: block;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-fect-num.odometer {
    line-height: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-fect-num.odometer {
    line-height: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-about-fect-num {
    font-size: 140px;
    line-height: 110px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-fect-num {
    font-size: 120px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-fect-num {
    font-size: 100px;
    margin-bottom: 0;
  }
}
.tp-about-fect-deg {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-fect-deg {
    font-size: 20px;
  }
}
.tp-about-fect-wrap {
  padding-top: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-fect-wrap {
    padding-top: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-fect-wrap {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
    grid-gap: 20px;
  }
}
.tp-about-fect-short .tpfunfect2__num {
  color: var(--tp-secoundery-color);
  justify-content: center;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-fect-short .tpfunfect2__num {
    font-size: 60px;
  }
}
.tp-about-fect-short .tpfunfect2__num-div {
  color: var(--tp-white-color);
}
.tp-about-fect-short .tpfunfect2__num .odometer {
  line-height: 78px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-fect-short .tpfunfect2__num .odometer {
    line-height: 60px;
  }
}
.tp-about-fect-short-deg {
  color: var(--tp-white-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-fect-short-deg {
    font-size: 19px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-fect-short-deg {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-about-fect-short {
    margin-bottom: 20px;
  }
}
.tp-about-fect-2 {
  padding-top: 100px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-fect-2 {
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-image {
    height: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-about-image {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-image img {
    height: 100%;
    object-fit: cover;
  }
}
.tp-about-image img:nth-child(1) {
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-subtitle {
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-about-top {
    padding-bottom: 60px;
  }
}

.tp-solid-bg {
  min-height: 930px;
  width: auto;
  margin-bottom: 30px;
  background-attachment: fixed;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px), only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-solid-bg {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-solid-bg {
    margin-bottom: 30px;
    min-height: 700px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-solid-bg {
    margin-bottom: 30px;
    min-height: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-solid-bg {
    min-height: 500px;
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-solid-bg {
    border-radius: 0;
    min-height: 350px;
  }
}
.tp-solid-bg-wrap {
  padding: 0 30px;
}
.tp-solid-bg-wrap .tp-solid-bg {
  margin-bottom: 0;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px), only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-solid-bg-wrap .tp-solid-bg {
    margin-bottom: 0;
  }
}
.tp-solid-bg .jarallax-container {
  border-radius: 20px;
}
.tp-solid-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.odometer {
  font-variant-numeric: tabular-nums;
}

/*----------------------------------------*/
/*  7.3 Floting Css Here
/*----------------------------------------*/
.tp-floting-card-title {
  font-size: 180px;
  letter-spacing: -0.04em;
  font-weight: 800;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-floting-card-title {
    font-size: 120px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-floting-card-title {
    font-size: 100px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-floting-card-title {
    font-size: 70px;
    margin-bottom: 10px;
  }
}
.tp-floting-card-content p {
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  width: 50%;
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-floting-card-content p {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-floting-card-content p {
    font-size: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-floting-card-content p {
    font-size: 18px;
  }
  .tp-floting-card-content p br {
    display: none;
  }
}
.tp-floting-card-main {
  min-height: 1080px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-floting-card-main {
    min-height: 850px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-floting-card-main {
    min-height: 550px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-floting-card-main {
    min-height: 680px;
  }
}
.tp-floting-card-img-placeholder {
  font-size: 18px;
}
.tp-floting-card-img-item-1 {
  left: 0;
  bottom: 50px;
}
.tp-floting-card-img-item-2 {
  bottom: 270px;
  left: 26%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-floting-card-img-item-2 {
    top: 450px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-floting-card-img-item-2 {
    bottom: 40%;
    left: 42%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-floting-card-img-item-2 {
    bottom: 0;
    left: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-floting-card-img-item-2 {
    bottom: 220px;
    left: 0;
  }
}
.tp-floting-card-img-item-3 {
  top: 18%;
  right: 300px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-floting-card-img-item-3 {
    top: 33%;
    right: 240px;
  }
}
.tp-floting-card-img-item-4 {
  top: 24%;
  right: 0;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-floting-card-img-item-4 {
    top: auto;
    right: 0;
    bottom: 0;
  }
}
.tp-floting-card-img-item-5 {
  right: 0;
  bottom: 0;
}
.tp-floting-card-area {
  padding-top: 215px;
  padding-bottom: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-floting-card-area {
    padding-top: 150px;
    padding-bottom: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-floting-card-area {
    padding-top: 50px;
    padding-bottom: 70px;
  }
}

/*----------------------------------------*/
/*  7.4 Contact Css Here
/*----------------------------------------*/
.tp-contect-input textarea {
  height: 140px;
  border-radius: 20px;
  resize: none;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-contect-input textarea {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-input p br {
    display: none;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-input p {
    margin-bottom: 10px;
  }
  .tp-contect-input p br {
    display: none;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-input {
    justify-content: start;
  }
}
.tp-contect-spacing {
  padding-top: 150px;
  padding-bottom: 300px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px), only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-contect-spacing {
    margin: 0 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-contect-spacing {
    margin: 0 15px;
    padding-top: 100px;
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-spacing {
    margin: 0 10px;
    padding-top: 50px;
    padding-bottom: 150px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-spacing {
    padding: 70px 0;
  }
}
.tp-contect-spacing-2 {
  padding: 145px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-contect-spacing-2 {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-spacing-2 {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-spacing-2 {
    padding: 70px 0;
    border-radius: 0;
  }
}
.tp-contect-shape {
  left: 0;
  bottom: 0;
}
.tp-contect-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-contect-shape-inner {
  left: 0;
  top: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-heading {
    margin-bottom: 45px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-heading {
    margin-bottom: 30px;
  }
}
.tp-contect-main {
  padding: 60px 10px;
}
@media (max-width: 574.98px) {
  .tp-contect-main {
    padding: 40px 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-main {
    padding: 50px 30px;
  }
}
.tp-contect-box {
  padding: 55px 60px;
  border-radius: 20px;
  background-color: var(--tp-white-color);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-contect-box {
    padding-inline: 40px 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-contect-box {
    padding: 40px 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-box {
    padding: 30px 20px;
  }
}
.tp-contect-box-input input, .tp-contect-box-input textarea {
  border-color: transparent;
  background-color: var(--tp-gray-color);
  height: 54px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-box-input input, .tp-contect-box-input textarea {
    height: 45px;
  }
}
.tp-contect-box-input input:focus, .tp-contect-box-input textarea:focus {
  background-color: transparent;
  border-color: var(--tp-black-color);
}
.tp-contect-box-input textarea {
  resize: none;
  overflow-y: hidden;
}
.tp-contect-box-input label {
  font-weight: 500;
  margin-bottom: 5px;
}
.tp-contect-box-input button {
  background-color: var(--tp-secoundery-color);
}
.tp-contect-box-input button:hover {
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}
.tp-contect-box-input p {
  font-size: 15px;
}
.tp-contect-box-content a:hover {
  text-decoration: underline;
}
.tp-contect-box-inner {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.tp-contect-title {
  font-weight: 500;
  font-size: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-title {
    font-size: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-title {
    font-size: 40px;
  }
}
.tp-contect-deg {
  font-size: 30px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-deg {
    font-size: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-deg {
    font-size: 18px;
  }
}
.tp-contect-deg b {
  font-weight: 500;
  color: var(--tp-white-color);
}
.tp-contect-step-heading {
  padding-bottom: 73px;
  margin-bottom: 75px;
  border-bottom: 1px solid #D9D9D9;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-step-heading {
    padding-bottom: 47px;
    margin-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-step-heading {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.tp-contect-step-wrap {
  display: flex;
  grid-gap: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-contect-step-wrap {
    grid-gap: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-step-wrap {
    grid-gap: 40px;
  }
}
@media (max-width: 574.98px) {
  .tp-contect-step-wrap {
    grid-gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-step-title {
    margin-bottom: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-step-title {
    margin-bottom: 5px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-contect-step p br {
    display: none;
  }
}
.tp-contect-author {
  background: linear-gradient(239.18deg, rgba(255, 255, 255, 0.26) 17.93%, rgba(255, 255, 255, 0.065) 81.51%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  display: flex;
  align-items: center;
  grid-gap: 40px;
  max-width: 442px;
  padding: 15px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-author {
    grid-gap: 10px;
    padding: 10px;
  }
}
.tp-contect-author-thumb {
  flex: 0 0 auto;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-author-thumb {
    flex: inherit;
  }
}
.tp-contect-author-subtitle {
  font-size: 16px;
  color: var(--tp-white-color);
  letter-spacing: 0;
  line-height: 1.3;
}
.tp-contect-author-subtitle span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}
.tp-contect-author-subtitle span a:hover {
  text-decoration: underline;
}
.tp-contect-author-title {
  font-size: 18px;
  letter-spacing: 0;
  color: var(--tp-white-color);
}
.tp-contect-author-link a {
  display: inline-block;
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
  font-weight: 500;
  line-height: 1;
  border-radius: 30px;
  padding: 8px 20px;
}
.tp-contect-author-link a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-right {
    padding-top: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-right {
    padding-top: 30px;
  }
}
.tp-contect-cta-icon {
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-contect-cta-info span {
  font-size: 14px;
}
.tp-contect-cta-title {
  font-size: 16px;
}
.tp-contect-cta-title a:hover {
  color: var(--tp-orange-color);
}
.tp-contect-cta-item {
  grid-gap: 15px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-cta-item {
    grid-gap: 10px;
    margin-bottom: 15px;
  }
}
.tp-contect-slider-main {
  min-height: 635px;
  align-items: end;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-slider-main {
    min-height: 500px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-slider-main {
    min-height: 350px;
  }
}
.tp-contect-slider-info {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 1s ease;
  will-change: transform, opacity;
}
.tp-contect-slider-info p {
  font-size: 14px;
  color: var(--tp-secoundery-color);
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-slider-info-wrap {
    padding-left: 20px;
    padding-bottom: 30px;
  }
}
.tp-contect-slider-mail {
  display: flex;
  align-items: center;
  grid-gap: 75px;
  padding: 14px;
  padding-right: 42px;
  padding-left: 20px;
  width: fit-content;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 1s ease;
  will-change: transform, opacity;
}
.tp-contect-slider-mail a {
  font-size: 14px;
  color: var(--tp-white-color);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
}
.tp-contect-slider-mail a:not(:last-child)::after {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.3);
  width: 1px;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
  right: -19px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-slider-title {
    font-size: 25px;
  }
}
.tp-contect-slider-active {
  border-radius: 20px;
  overflow: hidden;
}
.tp-contect-slider-active .swiper-slide-active .tp-contect-slider-info {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.tp-contect-slider-active .swiper-slide-active .tp-contect-slider-mail {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
.tp-contect-button button {
  border-color: transparent;
  background-color: var(--tp-white-color);
  width: 60px;
  height: 60px;
}
.tp-contect-button-wrap {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  position: absolute;
  bottom: 60px;
  left: 60px;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-contect-map {
    padding-top: 20px;
  }
}
.tp-contect-map iframe {
  max-height: 419px;
  border-radius: 20px;
  mix-blend-mode: luminosity;
  width: 100%;
}
.tp-contect-map-main {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-contect-map-main {
    padding-top: 90px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-map-main {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-contect-map-wrap {
    margin-right: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-tabs-main {
    margin-bottom: 15px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-contect-top {
    margin-bottom: 10px;
  }
}

/*----------------------------------------*/
/*  7.5 Cta Css Here
/*----------------------------------------*/
.tp-cta-phone a {
  color: var(--tp-theme-color);
  font-weight: 600;
}
.tp-cta-phone a:hover samp {
  text-decoration: underline;
}
.tp-cta-phone-icon {
  width: 52px;
  height: 52px;
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
  text-align: center;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-cta-phone-icon-mid {
  width: 38px;
  height: 38px;
}
.tp-cta-phone-icon-border {
  background-color: transparent;
  border: 1px solid #FFFFFF;
}
.tp-cta-phone-icon-white {
  background-color: var(--tp-white-color);
  color: var(--tp-theme-color);
}
.tp-cta-phone-mid a:hover {
  text-decoration: underline;
}
.tp-cta-spacing {
  min-height: 820px;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-cta-spacing {
    min-height: 650px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-cta-spacing {
    min-height: 550px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-spacing {
    min-height: 500px;
    border-radius: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-spacing {
    min-height: 400px;
  }
}
.tp-cta-title {
  font-size: 80px;
  letter-spacing: -0.03em;
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-cta-title {
    font-size: 65px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-title {
    font-size: 45px;
  }
  .tp-cta-title img {
    max-width: 28%;
  }
}
.tp-cta-heading {
  display: inline-block;
  padding-bottom: 33px;
  margin-bottom: 48px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-heading {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.tp-cta-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
.tp-cta-content {
  display: flex;
  grid-gap: 80px;
  align-items: center;
}
@media (max-width: 574.98px) {
  .tp-cta-content {
    display: block;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-content p {
    margin-bottom: 20px;
  }
  .tp-cta-content p br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-content p {
    margin-bottom: 0;
  }
}
.tp-cta-shape {
  left: 0;
  top: 0;
}
.tp-cta-shape img {
  mix-blend-mode: color-burn;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-cta-button {
    flex: 0 0 auto;
  }
}

/*----------------------------------------*/
/*  7.6 Fact Css Here
/*----------------------------------------*/
.tp-fact-spacing {
  min-height: 720px;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-fact-spacing {
    min-height: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-fact-spacing {
    min-height: 500px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-fact-spacing {
    min-height: auto;
    height: 100%;
    padding: 50px 0;
    border-radius: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-fact-wrap {
    flex-wrap: wrap;
  }
}

.tpfact {
  border: 1px solid rgba(255, 255, 255, 0.25);
  height: 360px;
  width: 360px;
  border-radius: 280px;
  text-align: center;
  margin: 0 -30px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpfact {
    width: 300px;
    height: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpfact {
    width: 250px;
    height: 250px;
    margin: 0 -5px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpfact {
    margin: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfact {
    width: 50%;
    height: 250px;
    margin: 0;
  }
}
@media (max-width: 574.98px) {
  .tpfact {
    width: 100%;
    height: 250px;
    margin: 0;
  }
}
.tpfact__title {
  font-size: 80px;
  font-weight: 800;
  color: var(--tp-white-color);
  letter-spacing: -0.04em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpfact__title {
    font-size: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfact__title {
    font-size: 50px;
  }
}
.tpfact__title-div {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-secoundery-color);
  position: absolute;
  top: 8px;
  right: -18px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfact__title-div {
    top: 0;
  }
}
.tpfact__title-text {
  line-height: 65px;
  transform: translateY(-3px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfact__title-text {
    transform: translateY(-1px);
    line-height: 40px;
  }
}
.tpfact__title .odometer {
  line-height: 65px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfact__title .odometer {
    line-height: 40px;
  }
}
.tpfact__content p {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tp-white-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfact__content p {
    font-size: 15px;
  }
}
.tpfact:hover {
  background: linear-gradient(239.18deg, rgba(255, 255, 255, 0.06) 17.93%, rgba(255, 255, 255, 0.0375) 81.51%);
  backdrop-filter: blur(20px);
  border-color: transparent;
}

.tp-funfact-main {
  min-height: 680px;
  border-radius: 20px;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 25px 17px;
  z-index: 1;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-funfact-main {
    min-height: 550px;
    margin-top: -250px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-funfact-main {
    min-height: 500px;
    margin-top: -250px;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-funfact-main-2 {
    margin-top: 0;
  }
}
.tp-funfact-up {
  margin-top: -334px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-funfact-up {
    margin-top: -250px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-funfact-up {
    margin-top: -250px;
  }
}

.tpfunfect {
  background: linear-gradient(239.18deg, rgba(255, 255, 255, 0.06) 17.93%, rgba(255, 255, 255, 0.015) 81.51%);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  padding: 22px 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpfunfect {
    padding: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpfunfect {
    margin-bottom: 30px;
    padding: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfunfect {
    margin-bottom: 10px;
  }
}
.tpfunfect__num {
  font-size: 60px;
  letter-spacing: -0.03em;
  margin: 0;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfunfect__num {
    font-size: 45px;
  }
}
.tpfunfect__num-div {
  color: var(--tp-secoundery-color);
}
.tpfunfect__num .odometer {
  line-height: 53px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpfunfect__num .odometer {
    line-height: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfunfect__num .odometer {
    line-height: 40px;
  }
}
@media (max-width: 574.98px) {
  .tpfunfect p {
    text-align: start;
  }
}

.tpfunfect2 {
  padding: 31px 40px;
  min-width: 308px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 574.98px) {
  .tpfunfect2 {
    min-width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfunfect2 {
    min-width: 270px;
  }
}
.tpfunfect2__num {
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -0.04em;
  display: flex;
  margin-bottom: 3px;
}
.tpfunfect2__num-div {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-secoundery-color);
  line-height: 32px;
}
.tpfunfect2__num .odometer {
  line-height: 60px;
}

/*----------------------------------------*/
/*  7.7 Portfolio Css Here
/*----------------------------------------*/
.tpportfolio {
  background: var(--tp-white-color);
  box-shadow: 0px 0px 60px -10px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpportfolio {
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio {
    margin-bottom: 20px;
  }
}
.tpportfolio__thumb {
  border-radius: 15px;
  overflow: hidden;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__thumb {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpportfolio__thumb {
    width: 100%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__thumb {
    margin-bottom: 20px;
  }
}
.tpportfolio__thumb img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpportfolio__thumb img {
    width: 100%;
  }
}
.tpportfolio__mr {
  margin-right: 82px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__mr {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__mr {
    margin-right: 0;
  }
}
.tpportfolio__ml {
  margin-left: 82px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__ml {
    margin-left: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__ml {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__title {
    font-size: 25px;
  }
}
@media (max-width: 574.98px) {
  .tpportfolio__title {
    font-size: 20px;
    margin-bottom: 2px;
  }
}
.tpportfolio__title a:hover {
  color: var(--tp-orange-color);
}
.tpportfolio__year {
  font-weight: 500;
  display: inline-block;
  background-color: var(--tp-gray-color);
  border-radius: 42px;
  line-height: 1;
  padding: 13px 25px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  transition-delay: 0.1s;
}
@media (max-width: 574.98px) {
  .tpportfolio__year {
    padding: 8px 15px;
    font-size: 15px;
  }
}
.tpportfolio__button {
  bottom: 47%;
  left: 50%;
  transform: translate(-50%, 50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpportfolio__button a {
  height: 100px;
  width: 100px;
  background: var(--tp-secoundery-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__button a {
    width: 80px;
    height: 80px;
  }
  .tpportfolio__button a svg {
    width: 15px;
    height: 15px;
  }
}
@media (max-width: 574.98px) {
  .tpportfolio__button a {
    width: 60px;
    height: 60px;
  }
  .tpportfolio__button a svg {
    width: 15px;
    height: 15px;
  }
}
.tpportfolio:hover .tpportfolio__thumb img {
  transform: scale(1.1);
}
.tpportfolio:hover .tpportfolio__thumb .tpportfolio__button {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
}
.tpportfolio:hover .tpportfolio__year {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.tpportfolio__transform {
  transform: translateY(280px);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__transform {
    transform: translateY(175px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__transform {
    transform: translateY(0);
  }
}
.tpportfolio__transform-down {
  transform: translateY(400px);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__transform-down {
    transform: translateY(260px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__transform-down {
    transform: translateY(0);
  }
}
.tpportfolio__transform-short {
  transform: translateY(130px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__transform-short {
    transform: translateY(0);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpportfolio__content {
    margin: 0 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportfolio__content {
    margin: 0 10px;
    margin-bottom: 0;
  }
}

.tp-portfolio-back-text {
  font-size: 180px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #10365b;
  position: absolute;
  top: 20%;
  z-index: -1;
  left: 7%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-portfolio-back-text {
    font-size: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-portfolio-back-text {
    font-size: 100px;
    top: 38%;
    left: 17%;
  }
}
.tp-portfolio-spacing {
  padding-top: 145px;
  padding-bottom: 560px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-portfolio-spacing {
    padding-top: 120px;
    padding-bottom: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-spacing {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-spacing {
    padding: 70px 0;
    padding-bottom: 50px;
  }
}
.tp-portfolio-spacing-2 {
  padding-bottom: 540px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-portfolio-spacing-2 {
    padding-bottom: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-spacing-2 {
    padding-bottom: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-spacing-2 {
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-spacing-3 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-portfolio-spacing-3 {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-portfolio-spacing-4 {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-spacing-4 {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-spacing-4 {
    padding: 70px 0;
    border-radius: 0;
  }
}
.tp-portfolio-link {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.tp-portfolio-link a:hover {
  background-color: var(--tp-white-color);
}
.tp-portfolio-long {
  padding: 0 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-portfolio-long {
    padding: 0;
  }
}
.tp-portfolio-long-bg {
  min-height: 680px;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-portfolio-long-bg {
    min-height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-long-bg {
    min-height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-portfolio-long-bg {
    min-height: 300px;
    margin-bottom: 10px;
  }
}
.tp-portfolio-long-item {
  padding: 35px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: -1px;
  background-color: #FFFFFF;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-portfolio-long-item {
    padding: 20px 0;
    margin-bottom: 20px;
  }
}
.tp-portfolio-long-deg p span {
  color: var(--tp-theme-color);
  margin-right: 35px;
}
@media (max-width: 574.98px) {
  .tp-portfolio-long-deg p span {
    margin-right: 5px;
  }
}
.tp-portfolio-long-title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tp-portfolio-long-title a:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-long-title {
    font-size: 25px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-long-title {
    margin-bottom: 15px;
    font-size: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-long-heading {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-portfolio-long-meta {
    display: inline-block;
  }
}
.tp-portfolio-long:hover .tp-portfolio-link {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
.tp-portfolio-post-wrap {
  padding-top: 45px;
  border-top: 1px solid var(--tp-theme-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-post-wrap {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-portfolio-post-btn {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-portfolio-post-btn {
    padding-top: 150px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-post-btn {
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-portfolio-heading {
    margin-bottom: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-portfolio-heading {
    margin-bottom: 40px;
  }
}

.tp-badge {
  width: 110px;
  height: 110px;
  background-color: var(--tp-secoundery-color);
  text-align: center;
  border-radius: 50%;
  color: var(--tp-theme-color);
  font-weight: 600;
  line-height: 1.2;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-badge {
    width: 90px;
    height: 90px;
    font-size: 15px;
  }
}
.tp-badge-white {
  background-color: var(--tp-white-color);
  width: 120px;
  height: 120px;
}

.tpportpost {
  display: flex;
  justify-content: space-between;
  padding: 6px;
  background-color: #fff;
  border-radius: 15px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportpost {
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
}
.tpportpost__thumb {
  flex: 0 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportpost__thumb {
    flex: auto;
  }
}
.tpportpost__thumb img {
  border-radius: 15px;
  height: 100%;
  object-fit: cover;
}
.tpportpost__info {
  width: 100%;
  background-color: var(--tp-gray-color);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px;
  padding-right: 123px;
  margin-right: 6px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpportpost__info {
    padding: 30px;
    padding-right: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportpost__info {
    padding: 30px;
    margin-right: 0;
  }
}
.tpportpost__meta span {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 7px;
  margin-bottom: 15px;
}
.tpportpost__link {
  position: absolute;
  bottom: 50px;
  left: 60px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpportpost__link a {
  font-weight: 600;
  color: var(--tp-white-color);
  background-color: var(--tp-orange-color);
  display: inline-block;
  line-height: 1;
  padding: 10px 15px;
  border-radius: 100px;
}
.tpportpost__title {
  font-size: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpportpost__title {
    font-size: 25px;
  }
}
.tpportpost__title a:hover {
  color: var(--tp-orange-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportpost__title {
    font-size: 24px;
    margin-bottom: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpportpost__content {
    margin-bottom: 20px;
  }
}
.tpportpost:hover .tpportpost__info {
  background-color: var(--tp-secoundery-color);
}
.tpportpost:hover .tpportpost__link {
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}

.portfolio-text {
  will-change: transform, opacity;
}

/*----------------------------------------*/
/*  7.8 Service Css Here
/*----------------------------------------*/
.tp-services-spacing {
  padding: 145px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-services-spacing {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-spacing {
    padding: 100px 0;
    padding-bottom: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-spacing {
    padding: 70px 0;
  }
}
.tp-services-spacing-2 {
  padding-top: 145px;
  padding-bottom: 510px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-spacing-2 {
    padding-top: 100px;
    padding-bottom: 350px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-services-spacing-2 {
    padding-top: 70px;
    padding-bottom: 300px;
  }
}
.tp-services-spacing-3 {
  padding-bottom: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-spacing-3 {
    padding: 100px 0;
    padding-bottom: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-spacing-3 {
    padding-bottom: 70px;
  }
}
.tp-services-spacing-4 {
  padding-top: 145px;
  padding-bottom: 115px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-services-spacing-4 {
    padding-top: 120px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-spacing-4 {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-spacing-4 {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-area {
    border-radius: 0;
  }
}
.tp-services-num {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-num {
    font-size: 20px;
  }
}
.tp-services-num-larg {
  font-size: 50px;
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-num-larg {
    font-size: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-num-larg {
    margin-bottom: 15px;
  }
}
.tp-services-title {
  letter-spacing: -0.03px;
  margin-bottom: 0;
}
@media (max-width: 574.98px) {
  .tp-services-title {
    font-size: 18px;
  }
}
.tp-services-title-larg {
  font-size: 42px;
  margin-bottom: 18px;
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tp-services-title-larg:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-services-title-larg {
    font-size: 35px;
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-title-larg {
    font-size: 27px;
    margin-bottom: 5px;
  }
}
.tp-services-title-wrap svg {
  margin-top: 20px;
  flex: 0 0 auto;
}
.tp-services-body {
  background-color: var(--tp-secoundery-color);
  padding: 40px;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-services-body {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px) {
  .tp-services-body {
    padding: 20px;
  }
}
.tp-services-meta span {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 30px;
  line-height: 1;
  color: var(--tp-theme-color);
  font-weight: 500;
  padding: 5px 14px;
  margin-right: 6px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px) {
  .tp-services-meta span {
    font-size: 15px;
    padding: 4px 9px;
    margin-bottom: 5px;
  }
}
.tp-services-meta span:hover {
  background-color: var(--tp-white-color);
  border-color: transparent;
}
.tp-services-content {
  margin-bottom: 104px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-services-content {
    margin-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-content {
    margin-bottom: 42px;
  }
}
@media (max-width: 574.98px) {
  .tp-services-content {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-content {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-content p {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-content p br {
    display: none;
  }
}
.tp-services-item:last-child .tp-services-button {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.tp-services-item:last-child .tp-services-button-black {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tp-services-item.active .tp-services-button, .tp-services-item.active.tp-services-button-black {
  border-top: 0;
}
.tp-services-button {
  margin-bottom: -100px;
  opacity: 0;
  visibility: hidden;
  padding: 34px 40px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-button {
    margin-bottom: -71px;
    padding: 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-services-button {
    margin-bottom: -79px;
    padding: 20px;
  }
}
.tp-services-button.collapsed {
  margin-bottom: 0;
  opacity: 1;
  visibility: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.tp-services-button-black.collapsed {
  border-color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-btn {
    justify-content: start;
    padding-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-btn-2 {
    padding-top: 20px;
    padding-bottom: 40px;
  }
}
@media (max-width: 574.98px) {
  .tp-services-heading {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-heading {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-heading .row {
    justify-content: center;
  }
}
.tp-services-info {
  margin-left: -135px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-services-info {
    margin-left: -70px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-services-info {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-info-wrap {
    margin-bottom: 33px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-services-info-wrap {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-services-info-wrap .tp-section-title br {
    display: none;
  }
  .tp-services-info-wrap p br {
    display: none;
  }
}
.tp-services-shape-1 {
  right: 0;
  top: 25%;
}
.tp-services-shape-2 {
  left: -200px;
  bottom: -20px;
}
.tp-services-margin {
  margin-top: 30px;
  margin-bottom: 30px;
}
.tp-services-details-deg {
  font-size: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-deg {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
.tp-services-details-faq-title {
  font-size: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-details-faq-title {
    font-size: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-faq-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-services-details-wrap {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-wrap {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-img {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-img {
    height: 300px;
    object-fit: cover;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-top {
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-details-top p:not(:last-child) {
    margin-bottom: 10px;
  }
}
.tp-services-support {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 22px 25px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-support {
    padding: 15px;
  }
}
.tp-services-support-icon {
  width: 60px;
  height: 60px;
  background-color: var(--tp-gray-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-orange-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-services-support-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.tp-services-support-title-larg {
  font-size: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-support-title-larg {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
.tp-services-support-content p {
  line-height: 24px;
}
.tp-services-support:hover {
  background-color: var(--tp-gray-color);
  border-color: transparent;
}
.tp-services-support:hover .tp-services-support-icon {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
}

.tpservices {
  min-height: 500px;
  padding: 50px 59px;
  transition: 0.4s;
  box-shadow: transparent;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpservices {
    min-height: 430px;
    padding: 25px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservices {
    min-height: 430px;
    padding: 30px 35px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpservices {
    min-height: 400px;
    padding: 30px;
    margin-bottom: 20px;
  }
}
.tpservices__btn {
  font-weight: 600;
  line-height: 1;
}
.tpservices__btn span, .tpservices__btn svg {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpservices__title {
  font-size: 30px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpservices__title {
    font-size: 25px;
  }
}
.tpservices__back-text {
  letter-spacing: -0.06em;
  font-size: 140px;
  color: rgba(0, 0, 0, 0.1);
  transform: rotate(-90deg);
  position: absolute;
  line-height: 1;
  top: 174px;
  right: -151px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpservices__img {
  bottom: 0;
  right: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpservices__img img {
  width: 100%;
}
.tpservices__main > .col-lg-4:first-child .tpservices .tpservices__btn {
  color: var(--tp-white-color);
}
.tpservices__main > .col-lg-4:first-child .tpservices .tpservices__img {
  right: auto;
  left: 0;
  width: 100%;
}
.tpservices:hover .tpservices__img {
  transform: scale(1.1);
}
.tpservices:hover .tpservices__back-text {
  right: -135px;
}

.tpservices2 {
  padding: 10px;
  border-radius: 20px;
  background-color: var(--tp-gray-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2 {
    margin-bottom: 20px;
  }
}
.tpservices2__icon {
  color: var(--tp-orange-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2__icon {
    margin-bottom: 15px;
  }
}
.tpservices2__main {
  padding: 0 30px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2__main {
    padding: 0 20px;
  }
}
.tpservices2__btn {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tp-gray-color);
  border-radius: 60px;
}
.tpservices2__link {
  position: absolute;
  bottom: 0px;
  right: 0;
  right: -1px;
  height: 72px;
  width: 74px;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  background: #fff;
  z-index: 2;
  border-radius: 40px 0px 0 0;
}
.tpservices2__link::before, .tpservices2__link::after {
  content: "";
  clip-path: path("M0 0 Q0,30 30,30 L 0 30 Z");
  background-color: #fff;
  width: 32px;
  height: 42px;
  position: absolute;
  left: -23px;
  transform: rotate(-90deg);
  bottom: -6px;
  transform-origin: center;
}
.tpservices2__link::after {
  left: auto;
  bottom: auto;
  top: -36px;
  right: -7px;
  transform: rotate(266deg);
}
.tpservices2__up {
  margin-top: -10px;
}
.tpservices2__right-wrap {
  transform: translateY(-100px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2__right-wrap {
    transform: translateY(0);
  }
}
.tpservices2__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tpservices2__title a:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2__title {
    font-size: 20px;
  }
}
.tpservices2__thumb {
  overflow: hidden;
  border-radius: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpservices2__thumb {
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2__thumb {
    margin-bottom: 20px;
  }
}
.tpservices2__thumb img {
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpservices2__thumb img {
    width: 100%;
    object-fit: cover;
  }
}
.tpservices2__content p {
  padding-right: 25px;
}
@media (max-width: 574.98px) {
  .tpservices2__content p {
    padding-right: 40px;
  }
}
.tpservices2:hover {
  background-color: var(--tp-secoundery-color);
}
.tpservices2:hover .tpservices2__btn {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
}
.tpservices2:hover .tpservices2__thumb img {
  transform: scale(1.1);
}

.tpserv {
  background-color: var(--tp-white-color);
  padding: 20px;
  border-radius: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpserv__icon {
  width: 90px;
  height: 90px;
  background-color: var(--tp-gray-color);
  border-radius: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpserv__icon {
    width: 45px;
    height: 45px;
  }
  .tpserv__icon svg {
    width: 20px;
  }
}
@media (max-width: 574.98px) {
  .tpserv__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  .tpserv__icon svg {
    width: 17px;
  }
}
.tpserv__title {
  font-size: 26px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpserv__title {
    font-size: 20px;
  }
}
@media (max-width: 574.98px) {
  .tpserv__title {
    margin-bottom: 15px;
  }
}
.tpserv__btn {
  padding-left: 80px;
  opacity: 0;
  visibility: hidden;
  flex: 0 0 auto;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px) {
  .tpserv__btn {
    padding-inline: 0;
  }
}
.tpserv__btn a {
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  border-radius: 30px;
  line-height: 1;
  background: var(--tp-white-color);
  color: var(--tp-theme-color);
  padding: 8px 16px;
}
.tpserv__btn a:hover {
  background-color: var(--tp-secoundery-color);
}
.tpserv__main {
  grid-gap: 22px;
}
@media (max-width: 574.98px) {
  .tpserv__main {
    display: inline-block;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpserv__main {
    display: flex;
  }
}
.tpserv__shape {
  right: 0;
  top: 0;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpserv__shape {
    top: auto;
    bottom: 0;
  }
}
.tpserv__shape img {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  transform: scale(1);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpserv__wrap {
    padding-top: 30px;
  }
}
.tpserv:hover {
  background-color: var(--tp-theme-color);
}
.tpserv:hover .tpserv__icon {
  background-color: var(--tp-secoundery-color);
}
.tpserv:hover .tpserv__title {
  color: var(--tp-white-color);
}
.tpserv:hover .tpserv__btn {
  opacity: 1;
  visibility: visible;
}
.tpserv:hover .tpserv__shape img {
  transform: scale(1.1);
}
.tpserv__card {
  padding: 55px 60px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--tp-white-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpserv__card {
    padding: 55px 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpserv__card {
    padding: 30px 20px;
    min-height: 350px;
  }
}
.tpserv__card-title a:hover {
  color: var(--tp-secoundery-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpserv__card-title {
    font-size: 20px;
  }
}
.tpserv__card-link a {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  display: block;
  line-height: 1;
  background-color: transparent;
  font-weight: 600;
  color: var(--tp-theme-color);
  padding: 15px;
}
.tpserv__card-link a:hover {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}
.tpserv__card-icon svg {
  transition: 0.3s;
}
.tpserv__card:hover {
  box-shadow: 0px 15px 35px -10px rgba(0, 0, 0, 0.15);
}
.tpserv__card:hover .tpserv__card-link a {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}

.tpwork {
  max-width: 533px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpwork {
    max-width: 50%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpwork {
    max-width: 48%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpwork {
    max-width: 100%;
  }
}
.tpwork__num {
  font-size: 120px;
  font-weight: 800;
  color: var(--tp-white-color);
  letter-spacing: -0.04em;
  position: absolute;
  bottom: -45px;
  left: 40px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpwork__num {
    font-size: 75px;
    bottom: -30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpwork__num {
    font-size: 60px;
    bottom: -24px;
    left: 15px;
  }
}
.tpwork__thumb img {
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.tpwork__list span {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 10px;
}
.tpwork__list span::before {
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--tp-body-color);
  border-radius: 50%;
}
.tpwork__list span:last-child {
  margin-bottom: 0;
}
.tpwork__content {
  background-color: var(--tp-white-color);
  padding: 29px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpwork__content {
    padding: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpwork__content {
    padding: 15px;
  }
}
.tpwork__title a:hover {
  text-decoration: underline;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpwork__title {
    font-size: 20px;
  }
}
.tpwork:nth-child(2) {
  margin-left: -140px;
  transform: translateY(112px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpwork:nth-child(2) {
    margin-left: 0;
    transform: translateY(0);
  }
}
.tpwork:nth-child(2) .tpwork__content {
  background-color: var(--tp-orange-color);
}
.tpwork:nth-child(2) .tpwork__title {
  color: var(--tp-white-color);
}
.tpwork:nth-child(2) .tpwork__list span {
  color: var(--tp-white-color);
}
.tpwork:nth-child(2) .tpwork__list span::before {
  background-color: var(--tp-white-color);
}
.tpwork:nth-child(3) {
  margin-left: -140px;
  transform: translateY(300px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpwork:nth-child(3) {
    margin-left: 0;
    transform: translateY(0);
  }
}
.tpwork:nth-child(3) .tpwork__content {
  background-color: var(--tp-secoundery-color);
}
.tpwork:hover .tpwork__thumb img {
  transform: scale(1.1);
}
.tpwork:hover .tpwork__num {
  bottom: -28px;
}

.tp-work-main {
  min-height: 1144px;
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-work-main {
    min-height: 950px;
    padding-top: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-work-main {
    min-height: 1085px;
    padding-top: 70px;
    border-radius: 0;
  }
}
.tp-work-wrap {
  display: flex;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-work-wrap {
    flex-wrap: wrap;
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-work-wrap {
    flex-direction: column;
    grid-gap: 20px;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-work-heading {
    margin-bottom: 40px;
  }
}

.tpservshow {
  position: relative;
  overflow: hidden;
  width: 308px;
  padding: 40px;
  background: var(--tp-gray-color);
  border-radius: 20px;
  min-height: 398px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpservshow {
    min-height: 350px;
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservshow {
    padding: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpservshow {
    min-height: 350px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservshow {
    width: 260px;
    min-height: 300px;
  }
}
@media (max-width: 574.98px) {
  .tpservshow {
    min-height: 330px;
    padding: 30px;
    margin-bottom: 20px;
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpservshow {
    min-height: 330px;
  }
}
.tpservshow__thumb {
  position: absolute;
  transition: 0.3s;
  right: -237px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  text-align: end;
}
@media (max-width: 574.98px) {
  .tpservshow__thumb {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpservshow__thumb img {
    max-width: 90%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpservshow__thumb img {
    max-width: 60%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservshow__thumb img {
    max-width: 50%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpservshow__thumb img {
    max-width: 75%;
  }
}
.tpservshow__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-right: 0;
}
.tpservshow__title {
  font-size: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservshow__title {
    font-size: 18px;
  }
}
.tpservshow__title a:hover {
  color: var(--tp-orange-color);
}
.tpservshow__link a {
  display: inline-block;
  background-color: transparent;
  color: var(--tp-theme-color);
  font-weight: 600;
  line-height: 1;
  padding: 12px 25px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpservshow__link a {
    font-size: 15px;
    padding: 10px 15px;
  }
}
.tpservshow.active {
  width: 645px;
  background: var(--tp-secoundery-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservshow.active {
    width: 410px;
  }
}
.tpservshow.active .tpservshow__thumb {
  opacity: 1;
  visibility: visible;
  right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpservshow.active .tpservshow__thumb {
    right: 15px;
  }
}
.tpservshow.active .tpservshow__link a {
  border-color: transparent;
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}

.tp-services-showcase {
  display: flex;
  align-items: center;
  grid-gap: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-services-showcase {
    flex-wrap: wrap;
    grid-gap: 20px;
    padding-bottom: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-showcase {
    flex-wrap: wrap;
    grid-gap: 0;
    padding-bottom: 20px;
  }
}
.tp-services-showcase-bottom p {
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  grid-gap: 10px;
  width: fit-content;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  padding: 6px;
  padding-left: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-services-showcase-bottom p {
    display: inline-block;
  }
  .tp-services-showcase-bottom p span {
    margin-left: 5px;
  }
}
.tp-services-showcase-bottom p span {
  display: inline-block;
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
  line-height: 1;
  padding: 6px 10px;
  border-radius: 30px;
}

/*----------------------------------------*/
/*  7.9 Team Css Here
/*----------------------------------------*/
.tp-team-spacing {
  padding: 150px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-team-spacing {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-spacing {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-spacing {
    padding: 70px 0;
    border-radius: 0;
  }
}
.tp-team-spacing-2 {
  margin-top: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-team-spacing-3 {
    padding-top: 80px;
    padding-bottom: 100px;
  }
}
.tp-team-spacing-4 {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-spacing-4 {
    padding-bottom: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-spacing-4 {
    padding-bottom: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-button {
    justify-content: start;
    padding-top: 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-team-heading {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-team-active-2 {
    padding-bottom: 40px;
  }
}
.tp-team-info {
  padding-top: 45px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-info {
    padding-top: 20px;
  }
}
.tp-team-info-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-info-wrap {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-info-content {
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-team-cta {
    padding-top: 10px;
  }
}
.tp-team-cta a {
  color: var(--tp-white-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  grid-gap: 20px;
}
.tp-team-cta a:hover {
  text-decoration: underline;
}
.tp-team-cta-icon {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-team-cta-icon svg {
  transform: translateX(-2px);
}
.tp-team-cta-wrap {
  grid-gap: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-cta-wrap {
    flex-wrap: wrap;
    grid-gap: 10px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-team-author {
    padding-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-author {
    padding-right: 0;
  }
}
.tp-team-author-socials {
  grid-gap: 5px;
}
.tp-team-author-socials a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.tp-team-author-socials a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  border-color: transparent;
}
.tp-team-author-link a {
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  line-height: 1;
  background-color: var(--tp-gray-color);
  padding: 10px 20px;
  border-radius: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-author-link a {
    padding: 10px 15px;
  }
}
.tp-team-author-link a svg {
  transform: translateY(-1px);
  margin-right: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-author-link a svg {
    margin-right: 4px;
  }
}
.tp-team-author-link a:not(:last-child) {
  margin-right: 6px;
}
.tp-team-author-link a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-author-link-wrap {
    flex-wrap: wrap;
    grid-gap: 5px;
    margin-bottom: 25px;
  }
}
.tp-team-author-info-item {
  padding: 7px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-author-info-item {
    padding: 4px 0;
  }
}
.tp-team-author-info-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tp-team-author-info-item span {
  display: inline-block;
  font-weight: 500;
  color: var(--tp-theme-color);
}
.tp-team-author-info-item span a:hover {
  color: var(--tp-orange-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-author-thumb {
    margin-bottom: 20px;
  }
}
.tp-team-author-thumb img {
  width: 100%;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-details-list {
    margin-bottom: 30px;
  }
}
.tp-team-details-list-title {
  font-size: 20px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-details-list-title {
    margin-bottom: 15px;
  }
}
.tp-team-details-list ul li {
  list-style: none;
  line-height: 1;
  font-weight: 500;
}
.tp-team-details-list ul li:not(:last-child) {
  margin-bottom: 14px;
}
.tp-team-details-list ul li::before {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--tp-theme-color);
  border-radius: 50%;
  transform: translateY(-2px);
  margin-right: 7px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-team-details-deg {
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-details-heading {
    margin-bottom: 20px;
  }
}
.tp-team-active {
  min-height: 600px;
  display: flex;
  align-items: center;
  padding-right: 168px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-team-active {
    min-height: 500px;
    padding-right: 149px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-team-active {
    min-height: 410px;
    padding-right: 173px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-active {
    padding-right: 220px;
    min-height: 410px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-active {
    padding-right: 0;
    min-height: auto;
  }
}
.tp-team-active .swiper-slide-active {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-team-active .swiper-slide-active .tpteam {
  max-width: 520px;
  height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-team-active .swiper-slide-active .tpteam {
    max-width: 420px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-team-active .swiper-slide-active .tpteam {
    max-width: 375px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-team-active .swiper-slide-active .tpteam {
    width: 100%;
  }
}
.tp-team-active .swiper-slide-active .tpteam__thumb::before {
  opacity: 1;
  visibility: visible;
}
.tp-team-active .swiper-slide-active .tpteam__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-team-active .swiper-slide-active .tpteam .tpteam__info {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}

.tpteam {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  max-width: 360px;
  height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpteam {
    max-width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpteam {
    max-width: 240px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpteam {
    max-width: inherit;
  }
}
.tpteam__title {
  font-size: 26px;
  margin-bottom: 3px;
}
@media (max-width: 574.98px) {
  .tpteam__title {
    font-size: 20px;
    margin-bottom: 0;
  }
}
.tpteam__title a:hover {
  color: var(--tp-secoundery-color);
}
.tpteam__content span {
  display: inline-block;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 574.98px) {
  .tpteam__content span {
    font-size: 15px;
  }
}
.tpteam__icon {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  text-align: center;
  line-height: 56px;
  color: var(--tp-secoundery-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpteam__icon {
    width: 45px;
    height: 45px;
    line-height: 40px;
  }
  .tpteam__icon svg {
    width: 17px;
  }
}
.tpteam__icon:hover {
  background-color: var(--tp-white-color);
}
.tpteam__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  padding: 50px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpteam__info {
    padding: 30px;
  }
}
@media (max-width: 574.98px) {
  .tpteam__info {
    padding: 30px;
  }
}
.tpteam__thumb::before {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45.02%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpteam__thumb img {
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpteam__circle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpteam__circle-title {
  font-size: 26px;
  margin-bottom: 5px;
}
.tpteam__circle-title a:hover {
  color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpteam__circle-title {
    font-size: 20px;
  }
}
.tpteam__circle--content {
  width: 248px;
  height: 248px;
  background: linear-gradient(239.18deg, rgba(0, 0, 0, 0.18) 17.93%, rgba(0, 0, 0, 0.1125) 81.51%);
  backdrop-filter: blur(20px);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 48%;
  left: 50%;
  transform: translate(-50%, 50%);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpteam__circle--content {
    width: 180px;
    height: 180px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpteam__circle--content {
    width: 200px;
    height: 200px;
  }
}
.tpteam__circle--content {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpteam__circle--content-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpteam__circle--content-wrap span {
    font-size: 15px;
    margin-bottom: 20px;
  }
}
.tpteam__circle-btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: var(--tp-white-color);
  text-align: center;
  border-radius: 30px;
}
.tpteam__circle-btn:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.tpteam__circle-btn-wrap {
  grid-gap: 5px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpteam__circle-btn-wrap {
    flex-wrap: wrap-reverse;
    justify-content: center;
  }
}
.tpteam__circle-thumb {
  background: #D9D9D9;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpteam__circle-thumb img {
  mix-blend-mode: luminosity;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border-radius: 50%;
}
.tpteam__circle:hover .tpteam__circle--content {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
}
.tpteam__circle:hover .tpteam__circle-thumb {
  background-color: transparent;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpteam__circle-pagination {
    padding: 15px 0;
  }
}
.tpteam__circle-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background-color: var(--tp-white-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpteam__circle-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--tp-orange-color);
  border-color: transparent;
}

.tpexperts {
  background-color: var(--tp-secoundery-color);
  padding: 30px;
  transition: 0.7s;
  transform: rotateY(0);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpexperts {
    padding: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpexperts {
    margin-bottom: 20px;
    padding: 20px;
  }
}
.tpexperts__social {
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.tpexperts__social a {
  color: var(--tp-theme-color);
}
.tpexperts__content p {
  line-height: 26px;
}
.tpexperts__content-wrap {
  padding: 0 10px;
  padding-bottom: 5px;
  transition: 0.4s;
  transform: rotateY(-180deg);
}
.tpexperts__shape {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.tpexperts__shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpexperts__shape-2 {
  z-index: 2;
}
.tpexperts__btn {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: var(--tp-theme-color);
  border-radius: 50%;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpexperts__btn {
    width: 40px;
    height: 40px;
  }
}
.tpexperts__btn-2 {
  right: 40px;
  bottom: 40px;
  position: absolute;
  z-index: 1;
}
.tpexperts__btn::before, .tpexperts__btn::after {
  position: absolute;
  content: "+";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  color: #FFFFFF;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.tpexperts__thumb {
  width: 206px;
  height: 240px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpexperts__thumb {
    width: 180px;
    height: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpexperts__thumb {
    width: 160px;
    height: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpexperts__thumb {
    width: 150px;
    height: 170px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpexperts__thumb {
    width: 150px;
    height: 160px;
  }
}
.tpexperts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpexperts__thumb-wrap {
  transition: 0.4s;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpexperts__thumb-wrap {
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpexperts__thumb-wrap {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpexperts__content p br {
    display: none;
  }
}
.tpexperts__2 {
  min-height: 480px;
  padding: 55px 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpexperts__2 {
    padding: 30px;
    min-height: 350px;
  }
}
.tpexperts__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tpexperts__title a:hover {
  background-size: 100% 1px;
}
.tpexperts.active {
  transform: rotateY(180deg);
}
.tpexperts.active .tpexperts__btn::before {
  content: "";
}
.tpexperts.active .tpexperts__btn::after {
  content: "\f068";
}
.tpexperts.active .tpexperts__btn.tpexperts__btn-2::before {
  content: "+";
}
.tpexperts.active .tpexperts__shape {
  opacity: 0;
  visibility: hidden;
}
.tpexperts.active .tpexperts__thumb {
  opacity: 1;
  visibility: visible;
}
.tpexperts.active .tpexperts__thumb-wrap {
  transform: rotateY(-180deg);
}

.tp-team-active-2 .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  width: auto;
}

.tpteamcard {
  overflow: hidden;
  background: transparent;
  backdrop-filter: inherit;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpteamcard {
    margin-bottom: 20px;
  }
}
.tpteamcard::before, .tpteamcard::after {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpteamcard__title {
  position: absolute;
  bottom: 30px;
  left: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpteamcard__title {
    font-size: 20px;
  }
}
.tpteamcard__link {
  position: absolute;
  top: 30px;
  right: 30px;
}
.tpteamcard__link a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tp-white-color);
  border-radius: 50%;
}
.tpteamcard__thumb img {
  width: 100%;
}
.tpteamcard:hover::after {
  background: linear-gradient(239.18deg, rgba(255, 255, 255, 0.04) 17.93%, rgba(255, 255, 255, 0.01) 81.51%);
  backdrop-filter: blur(20px);
}
.tpteamcard:hover .tpteamcard__link a {
  width: 60px;
  height: 60px;
  background-color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpteamcard:hover .tpteamcard__link a {
    width: 40px;
    height: 40px;
  }
}

.tp-details-subtitle {
  font-weight: 500;
  color: var(--tp-theme-color);
  display: inline-block;
  background: var(--tp-secoundery-color);
  line-height: 1;
  border-radius: 30px;
  padding: 6px 14px;
}
.tp-details-subtitle-orange {
  background-color: var(--tp-orange-color);
  color: var(--tp-white-color);
  padding: 9px 21px;
}
.tp-details-subtitle-orange svg {
  margin-right: 5px;
}
.tp-details-title {
  font-size: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-details-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-details-title {
    font-size: 35px;
  }
}

/*----------------------------------------*/
/*  8.0 Testimonial Css Here
/*----------------------------------------*/
.tp-testimonail-spacing {
  padding-top: 150px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-testimonail-spacing {
    padding-top: 120px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testimonail-spacing {
    padding-top: 100px;
    padding-bottom: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testimonail-spacing {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
.tp-testimonail-spacing-2 {
  padding-top: 145px;
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testimonail-spacing-2 {
    padding-top: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testimonail-spacing-2 {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-testimonail-heading {
    margin-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testimonail-heading {
    margin-bottom: 35px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testimonail-area {
    border-radius: 0;
  }
}
.tp-testimonail-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-testimonail-pagination {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testimonail-pagination {
    padding-top: 25px;
  }
}
.tp-testimonail-pagination span {
  color: var(--tp-theme-color);
  letter-spacing: -0.01em;
  display: inline-block;
  line-height: 1;
}
.tp-testimonail-dvdr {
  width: 200px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 15px;
}
@media (max-width: 574.98px) {
  .tp-testimonail-dvdr {
    width: 100px;
  }
}
.tp-testimonail-progress {
  position: relative;
}
.tp-testimonail-progress::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: var(--progress, 0%);
  background: var(--tp-secoundery-color);
  transition: width 0.4s ease;
}
.tp-testimonail-button-prev, .tp-testimonail-button-next {
  position: absolute;
  top: 52px;
  left: 0;
}
.tp-testimonail-button-next {
  left: auto;
  right: 0;
}
.tp-testimonail-button-prev.swiper-button-disabled, .tp-testimonail-button-next.swiper-button-disabled {
  opacity: 0.4;
}
.tp-testimonail-title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-testimonail-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testimonail-title {
    font-size: 25px;
  }
  .tp-testimonail-title br {
    display: none;
  }
}

.tptesti {
  background-color: var(--tp-white-color);
  border-radius: 20px;
  padding: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tptesti {
    margin-bottom: 20px;
  }
}
.tptesti__content {
  padding: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tptesti__content {
    padding: 20px 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tptesti__content {
    padding: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tptesti__content {
    padding: 30px;
    padding-bottom: 15px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tptesti__content {
    padding: 15px;
  }
}
.tptesti__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tptesti__title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tptesti__title {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tptesti__title {
    font-size: 17px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tptesti__title {
    margin-bottom: 15px;
  }
}
.tptesti__address {
  display: inline-block;
  line-height: 1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tptesti__address::before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 1px;
  background-color: var(--tp-body-color);
  transform: translateY(-6px);
  margin-right: 8px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tptesti__thumb {
  margin-top: -140px;
  margin-bottom: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tptesti__thumb {
    margin-top: -100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tptesti__thumb {
    margin-top: -112px;
  }
}
@media (max-width: 574.98px) {
  .tptesti__thumb {
    margin-top: -101px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tptesti__thumb {
    margin-top: -100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tptesti__thumb img {
    width: 100%;
    height: 90px;
    object-fit: cover;
  }
}
.tptesti__quote {
  bottom: -10px;
  right: 30px;
}
.tptesti__quote svg {
  color: rgba(0, 0, 0, 0.06);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tptesti:hover, .tptesti.active {
  background-color: var(--tp-theme-color);
}
.tptesti:hover .tptesti__thumb, .tptesti.active .tptesti__thumb {
  margin-top: 0;
  margin-bottom: 0;
}
.tptesti:hover .tptesti__title, .tptesti.active .tptesti__title {
  color: var(--tp-white-color);
}
.tptesti:hover .tptesti__address, .tptesti.active .tptesti__address {
  color: var(--tp-white-color);
}
.tptesti:hover .tptesti__address::before, .tptesti.active .tptesti__address::before {
  background-color: var(--tp-white-color);
}
.tptesti:hover .tptesti__quote svg, .tptesti.active .tptesti__quote svg {
  color: rgba(255, 255, 255, 0.2);
}

.tp-testi-card {
  min-width: 1057px;
  min-height: 600px;
  background-color: var(--tp-secoundery-color);
  display: flex;
  padding: 100px 60px;
  border-radius: 20px;
  position: absolute;
  right: 0;
  bottom: -120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testi-card {
    min-width: 100%;
    min-height: 500px;
    padding: 60px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testi-card {
    padding: 40px 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-card {
    position: unset;
    min-width: 100%;
    flex-wrap: wrap;
    padding: 40px 20px;
    border-radius: 0;
  }
}
.tp-testi-card-awards {
  display: flex;
  align-items: center;
  grid-gap: 25px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-card-awards {
    margin-bottom: 15px;
  }
}
.tp-testi-card-awards img {
  flex: 0 0 auto;
}
.tp-testi-card-content p {
  line-height: 26px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-card-content p br {
    display: none;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-card-review {
    padding-top: 20px;
  }
}
.tp-testi-card-review img {
  display: block;
}
.tp-testi-card-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 60px;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testi-card-left {
    padding-right: 35px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-card-left {
    padding-right: 0;
    margin-bottom: 30px;
  }
}
.tp-testi-card-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testi-card-right {
    padding-left: 35px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-card-right {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-testi-card-title {
    font-size: 25px;
  }
}
.tp-testi-fact-num {
  font-size: 140px;
  letter-spacing: -0.06em;
  line-height: 120px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testi-fact-num {
    font-size: 100px;
    line-height: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-fact-num {
    font-size: 80px;
    line-height: 60px;
  }
}
.tp-testi-fact-num .odometer {
  line-height: 103px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-testi-fact-num .odometer {
    line-height: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-fact-num .odometer {
    line-height: 60px;
  }
}
.tp-testi-fact p {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-testi-fact p {
    font-size: 18px;
  }
}

/*----------------------------------------*/
/*  8.1 Video Css Here
/*----------------------------------------*/
.tp-video-title {
  font-size: 50px;
}
.tp-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 10px;
  width: 140px;
  height: 140px;
  background-color: var(--tp-gray-color);
  border-radius: 50%;
  color: var(--tp-theme-color);
}
.tp-video-play:hover {
  background-color: var(--tp-secoundery-color);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-video-play {
    width: 100px;
    height: 100px;
    grid-gap: 5px;
  }
}
.tp-video-play-spacing {
  padding: 195px 0;
  padding-left: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-video-play-spacing {
    padding-top: 100px;
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-video-play-spacing {
    padding: 70px 0;
    display: flex;
    justify-content: center;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-video-spacing {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-video-spacing {
    padding-bottom: 0;
    padding-top: 70px;
  }
}
.tp-video-shape-1 {
  top: 44%;
  left: 0;
}
.tp-video-shape-2 {
  top: 110px;
  left: 225px;
}
.tp-video-shape-3 {
  top: 0;
  right: 225px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-video-shape-3 {
    top: -60px;
    right: 73px;
  }
}
.tp-video-shape-4 {
  right: 0;
  bottom: 128px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-video-shape-4 {
    bottom: auto;
    top: 0;
  }
}
.tp-video-shape-5 {
  bottom: 0;
  right: 35%;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-video-shape-5 {
    bottom: -40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-video-shape-5 {
    bottom: -57px;
    right: 11%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-video-heading {
    text-align: center;
  }
}

/*----------------------------------------*/
/*  8.2 Faq Css Here
/*----------------------------------------*/
.tp-faq {
  background: #F5F5F5;
  border-radius: 20px;
  padding: 10px;
}
.tp-faq-item {
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: var(--tp-white-color);
}
.tp-faq-item:last-child {
  margin-bottom: 0;
}
.tp-faq-body {
  padding: 32px 30px;
  padding-top: 0;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-faq-body {
    padding: 10px 15px;
    padding-top: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-faq-body p {
    font-size: 15px;
    line-height: 1.5;
  }
}
.tp-faq-arrow {
  border-color: transparent;
  height: 30px;
  width: 30px;
  flex: 0 0 auto;
  display: inline-block;
  border-radius: 30px;
  position: relative;
  background-color: var(--tp-orange-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-faq-arrow::before {
  position: absolute;
  content: "\f068";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--tp-theme-color);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 15px;
  color: var(--tp-white-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-faq-button {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  width: 100%;
  text-align: start;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-faq-button {
    font-size: 16px;
    padding: 10px 15px;
  }
}
.tp-faq-button.collapsed .tp-faq-arrow {
  border: 1px solid #10365b;
  background-color: transparent;
}
.tp-faq-button.collapsed .tp-faq-arrow::before {
  content: "+";
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-faq-spacing {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-faq-spacing {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-faq-heading {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-faq-btn {
    padding-top: 25px;
  }
}

/*----------------------------------------*/
/*  8.3 Brand Css Here
/*----------------------------------------*/
.tp-brand {
  padding: 20px 72px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-brand {
    padding: 15px 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-brand {
    padding: 10px 35px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand {
    padding: 10px;
  }
}
.tp-brand-item {
  height: 140px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border-radius: 15px;
  margin: 0 10px;
}
.tp-brand-item:hover {
  background-color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-brand-item {
    height: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-item {
    height: 90px;
  }
}
.tp-brand-border {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tp-brand-shape {
  left: 0;
  bottom: 0;
}
.tp-brand-black .tp-brand-item {
  color: var(--tp-theme-color);
}
.tp-brand-black .tp-brand-item:hover {
  background-color: var(--tp-theme-color);
  color: #fff;
}
.tp-brand-secoundery .tp-brand-item {
  color: var(--tp-theme-color);
}
.tp-brand-text-title {
  font-weight: 800;
  font-size: 160px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px #d9d9d9;
  transition: 0.5s;
  margin-bottom: 0;
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-brand-text-title {
    font-size: 120px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-text-title {
    font-size: 80px;
  }
}
.tp-brand-text-title:hover {
  -webkit-text-stroke: 2px transparent;
  opacity: 0.5;
  color: var(--tp-theme-color);
}
.tp-brand-text-wrapper {
  display: flex;
  width: max-content;
  grid-gap: 70px;
  margin-bottom: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-brand-text-wrapper {
    margin-bottom: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-text-wrapper {
    margin-bottom: 40px;
    grid-gap: 30px;
  }
}
.tp-brand-spacing {
  padding-top: 80px;
}
.tp-brand-spacing-2 {
  padding-top: 100px;
  padding-bottom: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-brand-spacing-2 {
    padding-bottom: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-spacing-2 {
    padding: 70px 0;
  }
}
.tp-brand-spacing-3 {
  padding-bottom: 135px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-brand-spacing-3 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-brand-spacing-3 {
    padding-bottom: 70px;
  }
}
.tp-brand-badge {
  background: #FFFFFF;
  box-shadow: 0px 20px 40px rgba(25, 25, 25, 0.1);
  border-radius: 100px;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 32%;
  z-index: 2;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-badge {
    height: 140px;
    width: 140px;
  }
}
.tp-brand-badge-shape {
  top: 16px;
  left: 15px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-badge-shape {
    top: 10px;
    left: 8px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-badge-shape img {
    max-width: 95%;
  }
}
.tp-brand-badge span {
  width: 80px;
  height: 80px;
  background: var(--tp-secoundery-color);
  display: inline-block;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-badge span {
    height: 50px;
    width: 50px;
  }
}
.tp-brand-badge span img {
  transform: translateX(-2px);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-badge span img {
    max-width: 25%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-brand-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-brand-text {
    padding-bottom: 20px;
  }
}

.tpbrand__text {
  min-height: 180px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpbrand__text {
    min-height: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpbrand__text {
    min-height: 100px;
  }
}
.tpbrand__text-title {
  font-size: 180px;
  display: flex;
  align-items: center;
  grid-gap: 50px;
  transition: 0.4s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpbrand__text-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpbrand__text-title {
    font-size: 100px;
  }
}
.tpbrand__text-title:hover {
  opacity: 1;
}
.tpbrand__text-item {
  font-size: 180px;
  display: flex;
  align-items: center;
  grid-gap: 50px;
}
.tpbrand__text-wrap {
  display: flex;
  align-items: center;
  grid-gap: 50px;
}

/*----------------------------------------*/
/*  8.4 Project Css Here
/*----------------------------------------*/
.tp-project {
  border-radius: 60px;
  max-height: 930px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project {
    margin-bottom: 20px;
    border-radius: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project {
    margin-bottom: 20px;
    border-radius: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-slider-wrap {
    padding: 0 10px;
  }
}
.tp-project-title {
  font-size: 80px;
  letter-spacing: -0.03em;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-project-title {
    font-size: 65px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-title {
    font-size: 60px;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-title {
    font-size: 55px;
    margin-bottom: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-title {
    font-size: 35px;
    margin-bottom: 10px;
  }
}
.tp-project-title-short {
  font-size: 60px;
}
.tp-project-title-short a:hover {
  color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-title-short {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-title-short {
    font-size: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-title-short {
    font-size: 35px;
  }
}
.tp-project-main {
  min-height: 930px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 110px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-main {
    min-height: 500px;
    padding: 60px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-main {
    min-height: 450px;
    padding: 30px 0;
  }
}
.tp-project-content p {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tp-theme-color);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-content p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-content p {
    font-size: 18px;
  }
}
@media (max-width: 574.98px) {
  .tp-project-content p br {
    display: none;
  }
}
.tp-project-meta span, .tp-project-meta a {
  line-height: 1;
  display: inline-block;
  font-weight: 500;
  color: var(--tp-theme-color);
  padding: 9px 15px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 30px;
  margin-right: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-meta span, .tp-project-meta a {
    font-size: 15px;
    padding: 5px 10px;
    margin-bottom: 5px;
  }
}
.tp-project-meta span:hover, .tp-project-meta a:hover {
  background-color: var(--tp-secoundery-color);
  border-color: transparent;
}
.tp-project-meta-2 {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-wrap: wrap;
}
.tp-project-meta-2 span {
  background-color: var(--tp-white-color);
  border-color: transparent;
}
.tp-project-meta-2 span:hover {
  background-color: var(--tp-secoundery-color);
}
.tp-project-back-text {
  font-weight: 800;
  font-size: 180px;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.1);
  left: 0;
  top: 50px;
  right: 0;
  text-align: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-project-back-text {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-back-text {
    font-size: 100px;
    z-index: -1;
    top: -33px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-back-text {
    font-size: 50px;
    z-index: -1;
  }
}
.tp-project-spacing {
  padding-top: 145px;
  padding-bottom: 85px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-spacing {
    padding: 100px 0;
    padding-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-spacing {
    padding-top: 70px;
    padding-bottom: 35px;
    border-radius: 0;
  }
}
.tp-project-spacing-2 {
  padding-top: 100px;
  padding-bottom: 50px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-project-spacing-2 {
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-project-spacing-2 {
    padding-bottom: 300px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-project-spacing-2 {
    padding-bottom: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-spacing-2 {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-spacing-2 {
    padding-top: 70px;
    padding-bottom: 0;
  }
}
.tp-project-spacing-3 {
  padding: 145px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-project-spacing-3 {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-spacing-3 {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-project-spacing-3 {
    padding: 70px 0;
  }
}
.tp-project-btn {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-btn-2 {
    padding-top: 20px;
    justify-content: start;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-project-heading {
    margin-bottom: 40px;
  }
}
.tp-project-wrap {
  grid-gap: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-wrap {
    flex-wrap: wrap;
    grid-gap: 15px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-wrap {
    flex-wrap: wrap;
  }
}
.tp-project-short {
  min-height: 930px;
  padding: 75px;
  padding-right: 60px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-project-short {
    min-height: 700px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-short {
    min-height: 550px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-short {
    min-height: 450px;
    padding: 50px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-short {
    min-height: 350px;
    padding: 20px;
    margin-bottom: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-short-heading {
    margin-bottom: 35px;
  }
}
.tp-project-tabs {
  z-index: 9;
  padding: 10px;
  border-radius: 80px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-tabs {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-project-tabs {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-tabs {
    border-radius: 40px;
  }
}
.tp-project-tabs .nice-select {
  height: 60px;
  border-color: transparent;
  background: var(--tp-gray-color);
  padding: 0 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-tabs .nice-select {
    padding: 0 20px;
  }
  .tp-project-tabs .nice-select::after {
    right: 20px;
  }
}
.tp-project-tabs form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 13px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-tabs form {
    flex-wrap: wrap;
  }
}
.tp-project-details-info {
  padding-top: 180px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-details-info {
    margin-bottom: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-info {
    padding-top: 100px;
    margin-bottom: 20px;
  }
}
.tp-project-details-info-icon {
  width: 60px;
  height: 60px;
  background-color: var(--tp-secoundery-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-theme-color);
  border: 1px solid transparent;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-info-icon {
    margin-right: 10px;
  }
}
.tp-project-details-info-content span {
  font-size: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-info-content span {
    font-size: 16px;
  }
}
.tp-project-details-info-title {
  font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-info-title {
    font-size: 18px;
  }
}
.tp-project-details-info-box {
  padding: 60px;
  border-radius: 20px 0 0 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-details-info-box {
    padding: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-info-box {
    padding: 20px;
    margin-left: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-info-item {
    padding-bottom: 10px;
  }
}
.tp-project-details-info-item:hover .tp-project-details-info-icon {
  border-color: var(--tp-secoundery-color);
  background-color: transparent;
}
.tp-project-details-list ul li {
  color: var(--tp-theme-color);
}
.tp-project-details-title {
  font-size: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-title {
    margin-bottom: 30px;
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-details-heading {
    margin-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-details-heading {
    margin-bottom: 35px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-about {
    margin-bottom: 10px;
  }
}
.tp-project-about-main {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-about-main {
    padding-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-about-main {
    padding-bottom: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-about-wrap {
    flex-wrap: wrap;
  }
}
.tp-project:hover .tp-project-btn {
  opacity: 1;
  visibility: visible;
  top: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-feature {
    padding-top: 50px;
  }
}
.tp-project-feature-icon {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-feature-icon {
    width: 70px;
    height: 70px;
  }
  .tp-project-feature-icon svg {
    width: 35px;
  }
}
.tp-project-feature-item {
  min-width: 219px;
  padding: 60px 30px;
  padding-top: 54px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-project-feature-item {
    min-width: 155px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-feature-item {
    padding: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-feature-item {
    padding: 25px;
    min-width: inherit;
    width: 50%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-feature-item {
    width: 33.33%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-feature-item {
    min-width: 170px;
  }
}
.tp-project-feature-item:not(:last-child) {
  border-right: 1px solid var(--tp-white-color);
}
.tp-project-feature-item span {
  font-size: 18px;
  font-weight: 600;
}
.tp-project-feature-item:hover .tp-project-feature-icon {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  border-color: transparent;
}
.tp-project-feature-wrap:not(:last-child) {
  border-bottom: 1px solid var(--tp-white-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-feature-wrap {
    flex-wrap: wrap;
  }
}
.tp-project-feature-dot {
  width: 20px;
  height: 20px;
  background-color: var(--tp-gray-color);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  bottom: -10px;
  right: -10px;
  z-index: 1;
}
.tp-project-gallery-active {
  margin: 0 -130px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-gallery-active {
    margin: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-gallery-tabs li {
    margin-bottom: 5px;
  }
}
.tp-project-gallery-tabs li:not(:last-child) {
  margin-right: 10px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-gallery-tabs li:not(:last-child) {
    margin-right: 5px;
  }
}
.tp-project-gallery-tabs li button {
  color: #1D2132;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 30px;
  line-height: 1;
  padding: 5px 9px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-project-gallery-tabs li button.active {
  border-color: transparent;
  background-color: var(--tp-secoundery-color);
}
.tp-project-gallery-tabs.tp-contect-tabs li button {
  color: var(--tp-theme-color);
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 7px 16px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-gallery-tab {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-des-main {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-location {
    padding-top: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-project-location {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-project-location-des {
    padding-bottom: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpproject {
    margin-bottom: 40px;
  }
}
.tpproject__title {
  font-size: 20px;
}
.tpproject__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tpproject__title a:hover {
  background-size: 100% 1px;
}
.tpproject__content {
  background: var(--tp-white-color);
  border-radius: 20px;
  padding: 16px 28px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tpproject__content::before {
  position: absolute;
  content: "";
  background-color: var(--tp-secoundery-color);
  height: 0%;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpproject__meta {
  background: linear-gradient(239.18deg, rgba(0, 0, 0, 0.06) 17.93%, rgba(0, 0, 0, 0.015) 81.51%);
  backdrop-filter: blur(20px);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  padding: 50px;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpproject__meta {
    padding: 30px;
  }
}
@media (max-width: 574.98px) {
  .tpproject__meta {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpproject__meta {
    flex-direction: row;
    justify-content: center;
  }
}
.tpproject__meta {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpproject__meta a {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--tp-white-color);
}
.tpproject__meta a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.tpproject:hover .tpproject__meta, .tpproject.active .tpproject__meta {
  opacity: 1;
  visibility: visible;
}
.tpproject:hover .tpproject__content::before, .tpproject.active .tpproject__content::before {
  height: 100%;
}

.tpproject2 {
  width: 308px;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 27px;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpproject2 {
    min-height: 400px;
    width: 100%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpproject2 {
    min-height: 350px;
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
  }
}
.tpproject2__title {
  font-size: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpproject2__title br {
    display: none;
  }
}
.tpproject2__title-larg {
  font-size: 40px;
  position: absolute;
  bottom: 40px;
  left: 40px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
  transform: translateY(10px);
}
.tpproject2__title-larg a:hover {
  color: var(--tp-secoundery-color);
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpproject2__title-larg {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpproject2__title-larg {
    font-size: 25px;
    left: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpproject2__title-larg {
    font-size: 20px;
  }
}
.tpproject2__date {
  margin-bottom: 7px;
}
.tpproject2__img-short {
  border-radius: 10px;
  margin-left: -17px;
  margin-top: -17px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpproject2__img-short {
    margin: 0;
    max-width: 70%;
  }
}
.tpproject2__img-hover {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  height: 100%;
  object-fit: cover;
  width: 100%;
  left: 0;
  top: 0;
  transition-duration: 1s;
  transition: all 0.3s;
}
.tpproject2__icon a {
  width: 30px;
  height: 30px;
  background: var(--tp-theme-color);
  color: var(--tp-white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  z-index: 1;
  position: relative;
}
.tpproject2.active {
  width: 645px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpproject2.active {
    width: 100%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpproject2.active {
    width: 100%;
  }
}
.tpproject2.active .tpproject2__img-hover {
  opacity: 1;
  visibility: visible;
}
.tpproject2.active .tpproject2__icon a {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.tpproject2.active .tpproject2__content {
  opacity: 0;
  visibility: hidden;
}
.tpproject2.active .tpproject2__title-larg {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*----------------------------------------*/
/*  8.5 Error Css Here
/*----------------------------------------*/
.tp-error {
  max-width: 705px;
  padding: 60px;
  padding-top: 54px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-error {
    padding: 30px;
    padding-top: 5px;
    transform: translateY(10px);
  }
}
.tp-error-gap {
  margin: 30px 0;
}
.tp-error-main {
  min-height: 930px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-error-main {
    min-height: 800px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-error-main {
    min-height: 550px;
  }
}
.tp-error-title {
  font-size: 240px;
  line-height: 180px;
  letter-spacing: -0.04em;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-error-title {
    font-size: 150px;
    line-height: 1;
    margin-bottom: 0;
  }
}
.tp-error p {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 24px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-error p {
    font-size: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-error-link {
    padding-top: 10px;
  }
}
.tp-error-link a {
  display: block;
  background: var(--tp-orange-color);
  line-height: 1;
  color: var(--tp-white-color);
  font-weight: 600;
  border-radius: 60px;
  padding: 22px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-error-link a {
    padding: 15px;
    font-size: 15px;
  }
}
.tp-error-link a:hover {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.tp-error-shape {
  right: 0;
  bottom: 0;
  z-index: -1;
  mix-blend-mode: color-burn;
  height: 100%;
}
.tp-error-shape img {
  height: 100%;
}

/*----------------------------------------*/
/*  8.6 Feature Css Here
/*----------------------------------------*/
.tpfeature {
  padding: 25px;
  border-radius: 20px;
  overflow: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpfeature {
    padding: 18px;
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfeature {
    padding: 18px;
    margin-bottom: 20px;
  }
}
.tpfeature__num {
  display: inline-block;
  background: var(--tp-theme-color);
  color: var(--tp-white-color);
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 600;
  padding: 0 11px;
  border-radius: 20px;
  height: 30px;
}
.tpfeature__num-2 {
  background-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpfeature__title {
  margin-bottom: 13px;
  line-height: 1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpfeature__title {
    font-size: 20px;
    margin-bottom: 5px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpfeature__title {
    font-size: 18px;
  }
}
.tpfeature__deg {
  opacity: 0;
  margin-bottom: -100px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpfeature__deg {
    margin-bottom: -125px;
  }
}
@media (max-width: 574.98px) {
  .tpfeature__deg {
    margin-bottom: -130px;
  }
}
.tpfeature__wrap {
  display: flex;
  grid-gap: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpfeature__wrap {
    grid-gap: 10px;
  }
}
.tpfeature__content {
  transform: translateY(3px);
}
.tpfeature:hover, .tpfeature.active {
  background-color: var(--tp-secoundery-color);
}
.tpfeature:hover.tpfeature__white, .tpfeature.active.tpfeature__white {
  background-color: var(--tp-white-color);
}
.tpfeature:hover .tpfeature__num-2, .tpfeature.active .tpfeature__num-2 {
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}
.tpfeature:hover .tpfeature__title, .tpfeature.active .tpfeature__title {
  color: var(--tp-theme-color);
}
.tpfeature:hover .tpfeature__deg, .tpfeature.active .tpfeature__deg {
  opacity: 1;
  margin-bottom: 0;
}
.tpfeature:hover .tpfeature__content, .tpfeature.active .tpfeature__content {
  transform: translateY(3px);
}

.tp-feature-end {
  align-items: flex-end;
}
.tp-feature-spacing {
  padding-top: 180px;
  padding-bottom: 130px;
}
.tp-feature-bg::after {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 26.92%, #F5F5F5 60%);
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
}
.tp-feature-bg-shape {
  top: 80px;
  right: 0;
  z-index: -1;
}

/*----------------------------------------*/
/*  8.7 Misson Css Here
/*----------------------------------------*/
.tp-misson-spacing {
  padding-top: 350px;
  padding-bottom: 460px;
  margin-bottom: 170px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-misson-spacing {
    padding-bottom: 400px;
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-misson-spacing {
    padding-top: 260px;
    padding-bottom: 350px;
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-spacing {
    padding: 200px 0;
    margin-bottom: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-misson-spacing {
    padding: 70px 0;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-misson-shape img {
    max-width: 85%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-shape img {
    max-width: 20%;
  }
}
.tp-misson-shape-1 {
  top: 110px;
  left: -223px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-misson-shape-1 {
    top: 73px;
    left: -127px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-misson-shape-1 {
    top: 70px;
    left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-misson-shape-1 {
    left: -31px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-shape-1 {
    left: 0;
    top: 0;
  }
}
.tp-misson-shape-2 {
  top: 0;
  right: 29%;
}
.tp-misson-shape-3 {
  top: 41%;
  right: -230px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-misson-shape-3 {
    top: 48%;
    right: -125px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .tp-misson-shape-3 {
    top: 50%;
    right: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-misson-shape-3 {
    right: -31px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-shape-3 {
    right: 0;
    top: 65px;
  }
}
.tp-misson-shape-4 {
  bottom: 0;
  right: 21%;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-misson-shape-4 {
    bottom: 55px;
    right: 34%;
  }
}
.tp-misson-shape-5 {
  left: 0;
  bottom: 170px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-misson-shape-5 {
    bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-shape-5 {
    bottom: 20px;
  }
}
.tp-misson-shape-back {
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  top: 64px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-misson-shape-back {
    max-width: 70%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-misson-shape-back {
    max-width: 60%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-shape-back {
    top: 25%;
    max-width: 55%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-misson-title {
    font-size: 75px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-misson-title {
    font-size: 55px;
  }
}
@media (max-width: 574.98px) {
  .tp-misson-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-misson-title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-misson-heading {
    margin-left: 0;
  }
}

/*----------------------------------------*/
/*  8.8 Choose Css Here
/*----------------------------------------*/
.tp-choose-area {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tp-choose-bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tp-choose-spacing {
  height: 100vh;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-spacing {
    height: 65vh;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-choose-spacing {
    height: 85vh;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-spacing-2 {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-choose-spacing-2 {
    padding: 70px 0;
  }
}
.tp-choose-spacing-3 {
  padding: 145px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-choose-spacing-3 {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-spacing-3 {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-choose-spacing-3 {
    padding: 70px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-choose-area {
    border-radius: 0;
  }
}
.tp-choose-thumb {
  grid-gap: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-thumb {
    margin-bottom: 40px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-choose-thumb {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
  }
}
.tp-choose-rating {
  background-color: var(--tp-secoundery-color);
  border-radius: 20px;
  padding: 20px;
}
.tp-choose-rating-num {
  font-size: 50px;
  letter-spacing: -0.06em;
  line-height: 1;
}
.tp-choose-rating p {
  letter-spacing: -0.015em;
}
.tp-choose-rating-icons {
  line-height: 1;
  padding: 5px 0;
  padding-top: 13px;
}
.tp-choose-feature-wrap:first-child .tpchofeat {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-heading {
    transform: translateY(-210px);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-choose-heading {
    transform: translateY(0px);
    margin-top: 0px;
  }
}
.tp-choose-2 {
  position: relative;
}
.tp-choose-2::before, .tp-choose-2::after {
  position: absolute;
  content: "";
  background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  height: 300px;
  bottom: 0;
  left: 0;
}
.tp-choose-2::after {
  top: 0;
  background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  transform: matrix(1, 0, 0, -1, 0, 0);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-choose-2-heading {
    margin-bottom: 40px;
  }
}
.tp-choose-2-spacing {
  min-height: 930px;
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-2-spacing {
    min-height: 750px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-choose-2-spacing {
    min-height: auto;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-choose-wrap {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-choose-wrap {
    flex-direction: row;
    grid-gap: 10px;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-choose-wrap-spacing {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
  }
}
@media (max-width: 574.98px) {
  .tp-choose-button {
    justify-content: start;
    padding-top: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-choose-slide-item {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-choose-slide-item {
    padding-bottom: 0;
  }
}

.tpchoose {
  padding: 40px;
  padding-bottom: 25px;
  border-radius: 20px;
  max-width: 308px;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpchoose {
    padding: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpchoose {
    max-width: 250px;
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose {
    max-width: 100%;
    padding: 20px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpchoose {
    position: inherit;
    max-width: 100%;
    padding: 20px;
    padding-bottom: 5px;
    margin-bottom: 20px;
  }
}
.tpchoose__icon svg {
  color: var(--tp-theme-color);
}
.tpchoose__icon-white svg {
  color: var(--tp-white-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__icon {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpchoose__icon {
    margin-bottom: 40px;
  }
}
.tpchoose__bluer-bg {
  background: linear-gradient(239.18deg, rgba(0, 0, 0, 0.2) 17.93%, rgba(0, 0, 0, 0.05) 81.51%);
  backdrop-filter: blur(20px);
}
.tpchoose__title a:hover {
  text-decoration: underline;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tpchoose__title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpchoose__title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__title {
    font-size: 20px;
    margin-bottom: 5px;
  }
}
@media (max-width: 574.98px) {
  .tpchoose__title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
.tpchoose__2 {
  max-width: 308px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__2 {
    max-width: 250px;
  }
}
@media (max-width: 574.98px) {
  .tpchoose__2 {
    max-width: 100%;
  }
}
.tpchoose__2--item-1 {
  top: 26px;
  left: 0;
}
.tpchoose__2--item-2 {
  bottom: 0;
  left: 114px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__2--item-2 {
    left: 0;
  }
}
@media (max-width: 574.98px) {
  .tpchoose__2--item-2 {
    left: 0;
  }
}
.tpchoose__2--item-3 {
  bottom: 145px;
  left: 28%;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__2--item-3 {
    bottom: 38px;
    left: 30%;
  }
}
.tpchoose__2--item-4 {
  top: 275px;
  right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__2--item-4 {
    top: 112px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpchoose__2--item-4 {
    top: 340px;
  }
}
.tpchoose__2--item-5 {
  right: 168px;
  bottom: 180px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpchoose__2--item-5 {
    right: 58px;
    bottom: 110px;
  }
}
.tpchoose__item-2 {
  transform: translateY(50px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpchoose__item-2 {
    transform: translateY(0);
  }
}
.tpchoose__item-3 {
  margin-right: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpchoose__item-3 {
    margin-right: 0;
  }
}
.tpchoose__item-4 {
  margin-left: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpchoose__item-4 {
    margin-right: 0;
  }
}

.tpchofeat {
  display: flex;
  grid-gap: 30px;
  padding: 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpchofeat {
    padding: 15px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpchofeat {
    grid-gap: 20px;
    padding: 20px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpchofeat__title {
    font-size: 20px;
  }
}

/*----------------------------------------*/
/*  8.9 Value Css Here
/*----------------------------------------*/
.tp-value-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tp-secoundery-color);
  border-radius: 100px;
  color: var(--tp-theme-color);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tp-value-icon-wrap p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 500;
}
.tp-value-item {
  width: 100%;
  height: 100%;
  padding: 60px 45px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 45px;
  margin-left: -1px;
  margin-bottom: -1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-value-item {
    padding: 30px;
  }
}
@media (max-width: 574.98px) {
  .tp-value-item {
    padding: 20px;
  }
}
.tp-value-item:hover .tp-value-icon {
  background-color: var(--tp-white-color);
}
.tp-value-item:hover .tp-value-icon-wrap p {
  color: var(--tp-white-color);
}
.tp-value-title {
  font-size: 20px;
  margin-bottom: 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-value-title {
    font-size: 18px;
  }
}
.tp-value-content p {
  color: rgba(255, 255, 255, 0.6);
}
.tp-value-left-border {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-value-left-border > .col-xl-6:first-child .tp-value-item {
  padding-top: 145px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-value-left-border > .col-xl-6:first-child .tp-value-item {
    padding-top: 60px;
  }
}
.tp-value-left-border > .col-xl-6:last-child .tp-value-item {
  padding-bottom: 145px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-value-left-border > .col-xl-6:last-child .tp-value-item {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 1700px) and (max-width: 1800.98px), only screen and (min-width: 1600px) and (max-width: 1700.98px) {
  .tp-value-spacing {
    margin: 0 20px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-value-spacing {
    margin: 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-value-spacing {
    padding: 0 12px;
    padding-top: 70px;
    border-radius: 0;
  }
}
.tp-value-spacing-2 {
  padding-top: 150px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-value-spacing-2 {
    padding-top: 120px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-value-spacing-2 {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-value-spacing-2 {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.tp-value-heading {
  padding-top: 150px;
  padding-left: 125px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599.98px), only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-value-heading {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-value-heading {
    padding-top: 100px;
    padding-left: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-value-heading {
    padding-top: 0;
    padding-left: 0;
  }
}

.tpvalue {
  background: var(--tp-white-color);
  padding: 45px 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpvalue {
    padding: 30px;
  }
}
.tpvalue__title a {
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, var(--tp-theme-color) 0%, var(--tp-theme-color) 100%);
  background-position: 0 calc(100% - 0em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  background-repeat: no-repeat;
  text-decoration: none;
}
.tpvalue__title a:hover {
  background-size: 100% 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tpvalue__title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpvalue__title {
    font-size: 20px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpvalue__icon {
    margin-bottom: 30px;
  }
  .tpvalue__icon img {
    width: 90px;
    height: 90px;
  }
}
.tpvalue:hover .tpvalue__icon img {
  animation-name: tpshake;
  animation-timing-function: ease-in-out;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
}

/*----------------------------------------*/
/*  9.0 Award Css Here
/*----------------------------------------*/
.tp-awards-badge {
  width: 308px;
  height: 308px;
  border-radius: 100%;
  text-align: center;
  padding-top: 107px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-awards-badge {
    width: 250px;
    height: 250px;
    padding-top: 75px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-badge {
    width: 200px;
    height: 200px;
    padding-top: 60px;
  }
}
.tp-awards-badge-deg {
  font-size: 18px;
  display: inline-block;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.tp-awards-badge-up {
  margin-top: -178px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-awards-badge-up {
    margin-top: -120px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-badge-up {
    margin-top: -75px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-badge-wrap {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
  }
}
.tp-awards-num {
  font-size: 120px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}
.tp-awards-num.odometer {
  display: block;
  line-height: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-awards-num.odometer {
    line-height: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-awards-num.odometer {
    line-height: 60px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-num.odometer {
    line-height: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-awards-num {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-awards-num {
    font-size: 80px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-num {
    font-size: 60px;
  }
}
.tp-awards-shape {
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-awards-spacing {
    padding: 100px 0;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-spacing {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-awards-spacing-2 {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-awards-spacing-2 {
    padding-top: 100px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-awards-spacing-2 {
    padding-top: 70px;
  }
}

.tpawards {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 25px 27px;
}
.tpawards__title {
  width: 55%;
  font-size: 20px;
  transform: translateY(-2px);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawards__title {
    margin-bottom: 10px;
    width: 100%;
  }
}
.tpawards__arrow {
  width: 12%;
  text-align: end;
  transform: translateY(-1px);
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawards__arrow {
    text-align: start;
  }
}
.tpawards__year {
  width: 18%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpawards__year {
    width: 12%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawards__year {
    margin-bottom: 10px;
    width: 100%;
  }
}
.tpawards__shape {
  top: -48px;
  right: 23%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpawards__shape {
    right: 5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawards__shape img {
    width: 70%;
  }
}
.tpawards__content {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  justify-content: start;
  flex-wrap: wrap;
}
.tpawards__content p {
  width: 15%;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpawards__content p {
    width: 21%;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawards__content p {
    width: 100%;
    margin-bottom: 10px;
  }
}
.tpawards:hover .tpawards__content .tpawards__year, .tpawards:hover .tpawards__content .tpawards__title, .tpawards:hover .tpawards__content .tpawards__arrow, .tpawards:hover .tpawards__content p {
  color: var(--tp-orange-color);
}
.tpawards:hover .tpawards__shape {
  top: -58px;
  opacity: 1;
  visibility: visible;
}
.tpawards__wrap > .tpawards:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hover-reveal-img .tpawards__shape {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  -webkit-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);
  -moz-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);
  -ms-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);
  -o-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);
  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);
  transform: scale(0.4);
  visibility: visible;
}

.tpawpost {
  background-color: var(--tp-gray-color);
}
.tpawpost__icon {
  width: 120px;
  height: 120px;
  background-color: var(--tp-white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 19px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawpost__icon {
    width: 90px;
    height: 90px;
    bottom: 10px;
  }
  .tpawpost__icon svg {
    width: 50px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpawpost__thumb {
    padding-bottom: 30px;
  }
}
.tpawpost__title a {
  position: relative;
}
.tpawpost__title a::before {
  position: absolute;
  content: "";
  background-color: var(--tp-theme-color);
  width: 0%;
  height: 1px;
  left: 0;
  bottom: 2px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.tpawpost__title a:hover::before {
  width: 100%;
}
.tpawpost:hover .tpawpost__icon {
  background-color: var(--tp-secoundery-color);
}

/*----------------------------------------*/
/*  9.1 Career Css Here
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-heading {
    margin-bottom: 35px;
  }
}
.tp-career-card {
  padding: 37px 40px;
  min-height: 300px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-career-card {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-card {
    min-height: auto;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-card {
    padding: 25px;
  }
}
.tp-career-card-deg {
  font-size: 18px;
  line-height: 1.3;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-card-main {
    padding-bottom: 10px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-card-authors {
    margin-bottom: 10px;
  }
  .tp-career-card-authors img {
    max-width: 60%;
  }
}
.tp-career-slider {
  padding: 55px 60px;
  padding-bottom: 63px;
  position: relative;
  z-index: 1;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-slider {
    padding: 25px;
  }
}
.tp-career-slider::before {
  position: absolute;
  content: "";
  background-color: #E6641C;
  mix-blend-mode: darken;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-slider-author {
    padding-top: 10px;
  }
}
.tp-career-slider-author-img img {
  border-radius: 50%;
}
.tp-career-slider-author-info p {
  font-size: 14px;
}
.tp-career-slider-nav {
  bottom: 50px;
  right: 50px;
  grid-gap: 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-slider-wrap p br {
    display: none;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-slider-icons {
    margin-bottom: 15px;
  }
}
.tp-career-box-icon {
  width: 80px;
  height: 80px;
  background-color: var(--tp-gray-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-box-icon {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .tp-career-box-icon svg {
    width: 25px;
  }
}
.tp-career-box-link {
  letter-spacing: -0.02em;
}
.tp-career-box-link:hover {
  color: var(--tp-orange-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-career-box-title {
    font-size: 22px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-box-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-box-info p {
    margin-bottom: 0;
  }
}
.tp-career-spacing {
  padding-top: 145px;
  padding-bottom: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-career-spacing {
    padding-top: 120px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-career-spacing {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-spacing {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-career-spacing-2 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-career-spacing-2 {
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-spacing-2 {
    padding-bottom: 40px;
  }
}
.tp-career-apply-form input, .tp-career-apply-form textarea {
  height: 64px;
  border-radius: 10px;
  background: var(--tp-white-color);
  border-color: transparent;
  margin-bottom: 10px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-apply-form input, .tp-career-apply-form textarea {
    height: 60px;
  }
}
.tp-career-apply-form input:focus, .tp-career-apply-form textarea:focus {
  border-color: var(--tp-black-color);
}
.tp-career-apply-form input::placeholder, .tp-career-apply-form textarea::placeholder {
  font-weight: 400;
}
.tp-career-apply-form input::-moz-placeholder, .tp-career-apply-form textarea::-moz-placeholder {
  font-weight: 400;
}
.tp-career-apply-form textarea {
  height: 140px;
}
.tp-career-apply-form button {
  font-weight: 500;
  letter-spacing: -0.02em;
  background: var(--tp-theme-color);
  color: var(--tp-white-color);
  display: block;
  width: 100%;
  border-radius: 10px;
  padding: 18px;
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-apply-form button {
    padding: 16px;
  }
}
.tp-career-apply-form button svg {
  margin-left: 5px;
}
.tp-career-apply-box {
  padding: 40px;
  padding-top: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), (max-width: 574.98px) {
  .tp-career-apply-box {
    padding: 20px;
    padding-top: 12px;
  }
}
.tp-career-apply-shape {
  right: 0;
  bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tp-career-details-list {
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-details-list {
    margin-bottom: 20px;
  }
}
.tp-career-details-list-title {
  font-size: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-details-list-title {
    font-size: 30px;
    margin-bottom: 10px;
  }
}
.tp-career-details-list ul li {
  list-style: none;
}
.tp-career-details-list ul li svg {
  margin-right: 5px;
}
.tp-career-details-list ul li:not(:last-child) {
  margin-bottom: 5px;
}
.tp-career-details-list ul li span {
  font-weight: 500;
  color: var(--tp-theme-color);
}
.tp-career-details-nav a {
  font-weight: 500;
  color: var(--tp-theme-color);
  background-color: var(--tp-gray-color);
  border-radius: 44px;
  display: flex;
  align-items: center;
  grid-gap: 6px;
  width: fit-content;
  padding: 14px 21px;
  line-height: 1;
}
.tp-career-details-nav a:hover {
  background-color: var(--tp-theme-color);
  color: var(--tp-white-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-career-details-wrap {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tp-career-details-wrap {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-career-details-heading {
    margin-bottom: 30px;
  }
}
@media (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tp-career-details-heading {
    margin-bottom: 20px;
  }
}

.tpcarjob {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 47px 50px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpcarjob {
    padding: 20px;
  }
}
.tpcarjob__title {
  font-size: 36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .tpcarjob__title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpcarjob__title {
    font-size: 25px;
  }
}
.tpcarjob__title a:hover {
  color: var(--tp-orange-color);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpcarjob__cta {
    margin-bottom: 15px;
  }
}
.tpcarjob__cta span {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--tp-theme-color);
  font-size: 17px;
  grid-gap: 10px;
}
.tpcarjob__cta span svg {
  color: var(--tp-orange-color);
}
.tpcarjob__link a {
  display: inline-block;
  line-height: 1;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  width: fit-content;
  color: var(--tp-theme-color);
  background: var(--tp-gray-color);
  border-radius: 30px;
  padding: 15px 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpcarjob__link a {
    font-size: 15px;
    padding: 12px 18px;
  }
}
.tpcarjob__link a svg {
  margin-left: 5px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 574.98px) {
  .tpcarjob__link a svg {
    width: 6px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .tpcarjob__main {
    flex-wrap: wrap;
    padding-top: 0;
  }
}
.tpcarjob:hover {
  background-color: var(--tp-gray-color);
  border-color: transparent;
}
.tpcarjob:hover .tpcarjob__link a {
  background-color: var(--tp-secoundery-color);
}

/*----------------------------------------*/
/*  Sea Gate footer
/*----------------------------------------*/
.sg-ft {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 90% at 88% 0%, #17497c 0%, rgba(23, 73, 124, 0) 55%),
    linear-gradient(180deg, #10365b 0%, #0b2540 100%);
}
.sg-ft-inner {
  position: relative;
  z-index: 2;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 70px);
}

/* ---- three column info row ---- */
.sg-ft-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, 0.72fr);
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(50px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
}
.sg-ft-logo {
  display: block;
  width: clamp(170px, 17vw, 220px);
  height: auto;
  margin-bottom: 22px;
}
.sg-ft-blurb {
  margin: 0;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.95;
}
.sg-ft-soc { display: flex; gap: 10px; margin-top: 22px; }
.sg-ft-soc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.sg-ft-soc a:hover { background: var(--tp-secoundery-color); border-color: var(--tp-secoundery-color); color: var(--tp-theme-color); }
.sg-ft-soc svg { width: 16px; height: 16px; }

.sg-ft-cell { display: flex; flex-direction: column; align-items: flex-start; }
.sg-ft-k {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-secoundery-color);
}
.sg-ft-big {
  color: #fff;
  font-size: clamp(20px, 2.2vw, 31px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  transition: color 0.3s ease;
}
.sg-ft-big:hover { color: var(--tp-secoundery-color); }
/* the address is far longer than a phone number, so it gets its own step down
   to stay on one line like the phone does */
.sg-ft-big[href^="mailto:"] { font-size: clamp(14px, 1.3vw, 18px); letter-spacing: -0.005em; }
@media only screen and (min-width: 992px) {
  .sg-ft-big[href^="mailto:"] { white-space: nowrap; }
}
.sg-ft-sub {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.7;
}

/* ---- divider ---- */
.sg-ft-rule {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

/* ---- bottom bar ---- */
.sg-ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 30px;
  padding: clamp(20px, 2.4vw, 30px) 0 clamp(24px, 2.8vw, 36px);
}
.sg-ft-rights { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; }
/* sits opposite the copyright, pushed right by the bar's space-between */
.ac-footer__credit { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; text-align: right; }
.ac-footer__credit a {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  transition: color 0.3s ease;
}
.ac-footer__credit a:hover { color: var(--tp-secoundery-color); }

@media only screen and (max-width: 991.98px) {
  .sg-ft-top { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .sg-ft-brand { grid-column: 1 / -1; }
}
@media only screen and (max-width: 575.98px) {
  .sg-ft-top { grid-template-columns: 1fr; }
  .sg-ft-bottom { justify-content: center; text-align: center; }
  .ac-footer__credit { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-ft-soc a, .sg-ft-big, .ac-footer__credit a { transition: none; }
}



/*----------------------------------------*/
/*  Header language dropdown (EN / AR)
/*----------------------------------------*/
.tp-header-lang {
  display: inline-flex;
  align-items: center;
  /* the bootstrap d-md-inline-block on this wrapper wins over inline-flex, so
     zero the line box or the control rides above the Contact Us button */
  line-height: 0;
}
.sg-lang {
  position: relative;
  display: inline-block;
  text-align: left;
}
.sg-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* matches the height of the Contact Us button beside it */
  height: 52px;
  padding: 0 16px;
  border-radius: 52px;
  border: 1px solid rgba(16, 54, 91, 0.16);
  background: #fff;
  color: var(--tp-theme-color);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.sg-lang-toggle:hover { border-color: rgba(16, 54, 91, 0.35); }
.sg-lang-toggle:focus-visible {
  outline: 2px solid var(--tp-secoundery-color);
  outline-offset: 3px;
}
.sg-lang-flag,
.sg-lang-opt img {
  display: block;
  width: 26px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.sg-lang-code { letter-spacing: 0.04em; }
.sg-lang-caret {
  width: 11px;
  height: 11px;
  color: #8492a0;
  transition: transform 0.3s ease;
}
.sg-lang.is-open .sg-lang-caret { transform: rotate(180deg); }

.sg-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 208px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  border: 1px solid rgba(16, 54, 91, 0.12);
  background: #fff;
  box-shadow: 0 20px 45px rgba(16, 54, 91, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.sg-lang.is-open .sg-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sg-lang-menu li { line-height: 1; }
.sg-lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--tp-theme-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.sg-lang-opt:hover { background: var(--tp-gray-color); }
.sg-lang-opt:focus-visible {
  outline: 2px solid var(--tp-secoundery-color);
  outline-offset: -2px;
}
.sg-lang-opt.is-active { background: rgba(225, 136, 37, 0.12); }
.sg-lang-name { flex: 1 1 auto; }
.sg-lang-abbr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8492a0;
}
.sg-lang-opt.is-active .sg-lang-abbr { color: var(--tp-secoundery-color); }
@media (prefers-reduced-motion: reduce) {
  .sg-lang-menu,
  .sg-lang-caret { transition: none; }
}

/* home header right-side: keep phone & contact button on one line */
.tp-header-cta .tp-cta-phone samp {
  white-space: nowrap;
}
.tp-header-cta-button .tp-btn-text {
  white-space: nowrap;
}




/*----------------------------------------*/
/*  Sea Gate video section — "The Reel" (home)
/*----------------------------------------*/
@property --sg-reel-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.sg-reel {
  position: relative;
  background-color: var(--tp-gray-color);
  padding: clamp(60px, 8vw, 130px) 0;
  overflow: hidden;
}
.sg-reel-glow {
  position: absolute;
  top: -180px;
  right: -160px;
  width: min(560px, 60vw);
  height: min(560px, 60vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 136, 37, 0.16) 0%, rgba(225, 136, 37, 0) 68%);
  pointer-events: none;
}
.sg-reel-container {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}
.sg-reel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.5vw, 52px);
}
.sg-reel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tp-secoundery-color);
  margin-bottom: 14px;
}
.sg-reel-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tp-secoundery-color);
  box-shadow: 0 0 0 4px rgba(225, 136, 37, 0.18);
  animation: sgReelBlink 2.2s ease-in-out infinite;
}
@keyframes sgReelBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sg-reel-heading {
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.08;
  font-weight: 600;
  color: var(--tp-theme-color);
  margin: 0;
}
.sg-reel-heading em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--tp-secoundery-color);
}
.sg-reel-channel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  background-color: var(--tp-theme-color);
  color: #fff;
  font-weight: 600;
  font-size: clamp(13px, 1.3vw, 15px);
  white-space: nowrap;
  transition: background-color 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.sg-reel-channel-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.sg-reel-channel-ic svg { width: 20px; height: 20px; }
.sg-reel-channel:hover { background-color: var(--tp-secoundery-color); color: var(--tp-theme-color); transform: translateY(-2px); }
.sg-reel-channel:hover .sg-reel-channel-ic { background: rgba(16, 54, 91, 0.16); color: var(--tp-theme-color); }

.sg-reel-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  background-color: var(--tp-theme-color);
  background-image: radial-gradient(circle at 12% -12%, rgba(225, 136, 37, 0.18) 0%, rgba(225, 136, 37, 0) 46%);
  border-radius: clamp(18px, 2vw, 30px);
  padding: clamp(12px, 1.8vw, 26px);
  box-shadow: 0 44px 100px -55px rgba(16, 54, 91, 0.75);
}

/* featured stage with rotating glow ring */
.sg-reel-stage {
  position: relative;
  min-width: 0;
  border-radius: clamp(14px, 1.6vw, 20px);
}
.sg-reel-stage::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sg-reel-angle), rgba(225, 136, 37, 0) 0deg, var(--tp-secoundery-color) 70deg, rgba(225, 136, 37, 0) 150deg, rgba(225, 136, 37, 0) 210deg, var(--tp-secoundery-color) 290deg, rgba(225, 136, 37, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sgReelSpin 7s linear infinite;
  pointer-events: none;
  opacity: 0.9;
}
@keyframes sgReelSpin { to { --sg-reel-angle: 360deg; } }
.sg-reel-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: inherit;
  overflow: hidden;
  background: #05121f;
  cursor: pointer;
}
.sg-reel-frame .sg-video-poster,
.sg-reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}
.sg-reel-frame iframe { animation: sgReelFade 0.5s ease; }
@keyframes sgReelFade { from { opacity: 0; } to { opacity: 1; } }
.sg-reel-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 18, 31, 0.15) 0%, rgba(5, 18, 31, 0) 30%, rgba(5, 18, 31, 0.4) 62%, rgba(5, 18, 31, 0.92) 100%);
  transition: opacity 0.35s ease;
}
.sg-reel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 2.6vw, 34px);
  transition: opacity 0.35s ease;
}
.sg-reel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 15px 5px 11px;
  border-radius: 999px;
  background: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  font-size: clamp(10px, 1.1vw, 11px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1.4vw, 16px);
}
.sg-reel-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.sg-reel-eq i {
  width: 2.5px;
  background: currentColor;
  border-radius: 2px;
  animation: sgReelEq 0.9s ease-in-out infinite;
}
.sg-reel-eq i:nth-child(1) { height: 45%; animation-delay: -0.2s; }
.sg-reel-eq i:nth-child(2) { height: 100%; animation-delay: -0.5s; }
.sg-reel-eq i:nth-child(3) { height: 65%; animation-delay: -0.35s; }
@keyframes sgReelEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.sg-reel-title {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.35;
  max-width: 780px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}
.sg-reel-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: clamp(8px, 1.2vw, 14px);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.sg-reel-count b { color: var(--tp-secoundery-color); font-size: 1.5em; font-weight: 700; }
.sg-reel-count i { font-style: normal; margin: 0 3px; }
.sg-reel-frame.is-playing .sg-reel-scrim,
.sg-reel-frame.is-playing .sg-reel-caption { opacity: 0; pointer-events: none; }
.sg-reel-play {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 6vw, 94px);
  height: clamp(58px, 6vw, 94px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  z-index: 2;
}
.sg-reel-play svg { width: 34%; height: 34%; margin-left: 8%; }
.sg-reel-play-ring,
.sg-reel-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--tp-secoundery-color);
  animation: sgReelRipple 2.6s ease-out infinite;
}
.sg-reel-play::after { animation-delay: 1.3s; }
.sg-reel-frame:hover .sg-reel-play { transform: translate(-50%, -50%) scale(1.09); }
.sg-reel-frame.is-playing .sg-reel-play { display: none; }
@keyframes sgReelRipple { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }

/* side playlist (right) */
.sg-reel-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-reel-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.sg-reel-side-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--tp-secoundery-color);
  letter-spacing: 0.04em;
}
.sg-reel-list-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
.sg-reel-list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.sg-reel-list::-webkit-scrollbar { width: 6px; }
.sg-reel-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; }
.sg-reel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sg-reel-item:hover { background: rgba(255, 255, 255, 0.09); transform: translateX(3px); }
.sg-reel-item.is-active {
  background: linear-gradient(90deg, rgba(225, 136, 37, 0.2) 0%, rgba(225, 136, 37, 0.05) 100%);
  border-color: rgba(225, 136, 37, 0.55);
}
.sg-reel-item-media {
  position: relative;
  flex-shrink: 0;
  width: 116px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #05121f;
}
.sg-reel-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.sg-reel-item:hover .sg-reel-item-media img { transform: scale(1.08); }
.sg-reel-item-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.sg-reel-item-play svg { width: 13px; height: 13px; margin-left: 2px; }
.sg-reel-item:hover .sg-reel-item-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sg-reel-item-eq {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
  color: var(--tp-secoundery-color);
}
.sg-reel-item-eq i {
  width: 2.5px;
  background: currentColor;
  border-radius: 2px;
  animation: sgReelEq 0.9s ease-in-out infinite;
}
.sg-reel-item-eq i:nth-child(1) { height: 45%; animation-delay: -0.2s; }
.sg-reel-item-eq i:nth-child(2) { height: 100%; animation-delay: -0.5s; }
.sg-reel-item-eq i:nth-child(3) { height: 65%; animation-delay: -0.35s; }
.sg-reel-item.is-active .sg-reel-item-eq { display: inline-flex; }
.sg-reel-item.is-active .sg-reel-item-play { opacity: 0; }
.sg-reel-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sg-reel-item-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.sg-reel-item.is-active .sg-reel-item-num { color: var(--tp-secoundery-color); }
.sg-reel-item-title {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-reel-item.is-active .sg-reel-item-title { color: #fff; }

@media only screen and (max-width: 991.98px) {
  .sg-reel-card { grid-template-columns: 1fr; }
  .sg-reel-list-wrap { position: static; max-height: 380px; }
  .sg-reel-list { position: static; }
}
@media only screen and (max-width: 575.98px) {
  .sg-reel-channel span:last-child { display: none; }
  .sg-reel-channel { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-reel-stage::before, .sg-reel-play-ring, .sg-reel-play::after,
  .sg-reel-eq i, .sg-reel-item-eq i, .sg-reel-kicker-dot { animation: none; }
}


/*----------------------------------------*/
/*  Sea Gate project cards (home portfolio)
/*----------------------------------------*/
.sg-projects {
  position: relative;
  background-color: #fff;
  padding: clamp(60px, 8vw, 130px) 0 !important;
  overflow: hidden;
}
.sg-projects-glow {
  position: absolute;
  top: 8%;
  left: -180px;
  width: min(520px, 55vw);
  height: min(520px, 55vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 136, 37, 0.12) 0%, rgba(225, 136, 37, 0) 68%);
  pointer-events: none;
}
.sg-projects-container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}
.sg-projects-head {
  text-align: center;
  margin-bottom: clamp(34px, 4.5vw, 64px);
}
.sg-projects-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tp-secoundery-color);
  margin-bottom: 14px;
}
.sg-projects-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tp-secoundery-color);
  box-shadow: 0 0 0 4px rgba(225, 136, 37, 0.18);
}
.sg-projects-title {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--tp-theme-color);
  margin: 0;
}
.sg-projects-title em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--tp-secoundery-color);
}
/* carousel: 3 cards visible, autoplay + arrows/dots */
.sg-projects-slider {
  /* padded so the hover lift + shadow are not clipped by swiper's overflow */
  padding-top: 14px;
  padding-bottom: 20px;
  margin-top: -14px;
  margin-bottom: -20px;
}
.sg-projects-list {
  align-items: stretch;
}
.sg-project.swiper-slide {
  height: auto;
}
.sg-projects-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 46px);
}
.sg-projects-nav {
  position: relative;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(16, 54, 91, 0.16);
  background: #fff;
  color: var(--tp-theme-color);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sg-projects-nav svg { width: 16px; height: 16px; }
.sg-projects-nav:hover {
  background: var(--tp-secoundery-color);
  border-color: var(--tp-secoundery-color);
  transform: translateY(-2px);
}
.sg-projects-nav.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* countdown ring around the next arrow, driven by swiper's autoplayTimeLeft */
.sg-projects-next::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--tp-secoundery-color) calc(var(--sg-ap, 0) * 360deg), rgba(16, 54, 91, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.sg-projects-controls.is-paused .sg-projects-next::before { opacity: 0.3; }
.sg-projects-nav:focus-visible {
  outline: 2px solid var(--tp-secoundery-color);
  outline-offset: 3px;
}
.sg-project-link:focus-visible {
  outline: 2px solid var(--tp-secoundery-color);
  outline-offset: -3px;
}
.sg-projects-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
.sg-projects-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgba(16, 54, 91, 0.22);
  opacity: 1;
  transition: width 0.35s ease, background-color 0.35s ease;
}
.sg-projects-dots .swiper-pagination-bullet-active {
  width: 28px;
  background: var(--tp-secoundery-color);
}

.sg-project {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(16, 54, 91, 0.1);
  border-radius: clamp(18px, 1.6vw, 24px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 54, 91, 0.05);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.sg-project:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 136, 37, 0.45);
  box-shadow: 0 26px 55px rgba(16, 54, 91, 0.14);
}

/* media */
.sg-project-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--tp-gray-color);
}
.sg-project-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease, filter 0.5s ease;
}
.sg-project:hover .sg-project-media img { transform: scale(1.07); }
.sg-project.is-sold .sg-project-media img { filter: grayscale(0.5) brightness(0.94); }
/* warm brand wash on hover */
.sg-project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(225, 136, 37, 0) 45%, rgba(225, 136, 37, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.sg-project:hover .sg-project-media::after { opacity: 1; }
.sg-project-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 54, 91, 0.5) 0%, rgba(16, 54, 91, 0) 40%, rgba(16, 54, 91, 0.05) 58%, rgba(16, 54, 91, 0.62) 100%);
  pointer-events: none;
}
.sg-project-index {
  position: absolute;
  top: clamp(10px, 1.2vw, 16px);
  left: clamp(14px, 1.5vw, 22px);
  z-index: 2;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(16, 54, 91, 0.4);
}
.sg-project-tag {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(14px, 1.5vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tp-theme-color);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.sg-project-tag svg { width: 15px; height: 15px; }
.sg-project-state {
  position: absolute;
  bottom: clamp(12px, 1.4vw, 18px);
  right: clamp(14px, 1.5vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.sg-project-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.25);
}
.sg-project-state--sold {
  background: rgba(200, 30, 44, 0.92);
  border-color: rgba(255, 255, 255, 0.25);
}
.sg-project-state--sold::before {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

/* body */
.sg-project-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: left;
  padding: clamp(20px, 2.2vw, 32px);
}
.sg-project-name {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--tp-theme-color);
  margin: 0 0 10px;
  line-height: 1.15;
  transition: color 0.35s ease;
}
.sg-project:hover .sg-project-name { color: var(--tp-secoundery-color); }
.sg-project-desc {
  color: #5a6a78;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-project-facts {
  /* keeps the facts row bottom-aligned across a row of cards */
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: clamp(14px, 1.5vw, 18px);
  border-top: 1px solid rgba(16, 54, 91, 0.1);
}
.sg-project-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sg-project-fact + .sg-project-fact {
  padding-left: 14px;
  border-left: 1px solid rgba(16, 54, 91, 0.1);
}
.sg-project-fact-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #8492a0;
}
.sg-project-fact-label svg {
  width: 15px;
  height: 15px;
  color: var(--tp-secoundery-color);
  flex-shrink: 0;
}
.sg-project-fact-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tp-theme-color);
  line-height: 1.5;
  /* reserves the taller of one price line or two wrapped area lines, so the
     hairline above the facts sits at the same height on every card */
  min-height: max(calc(clamp(19px, 1.9vw, 24px) * 1.5), 45px);
}
.sg-project-price-val {
  font-size: clamp(19px, 1.9vw, 24px);
  font-variant-numeric: tabular-nums;
}
.sg-project-price-val small {
  font-size: 0.6em;
  font-weight: 600;
  color: rgba(16, 54, 91, 0.55);
}
/* matches the price size so sold-out cards keep the same fact-row height */
.sg-project-soldout {
  color: #c81e2c;
  font-size: clamp(17px, 1.6vw, 21px);
}

/* invisible overlay: the whole card links to the project */
.sg-project-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

@media only screen and (max-width: 767.98px) {
  .sg-project-media { aspect-ratio: 16 / 10; }
  .sg-projects-nav { width: 46px; height: 46px; }
}
@media only screen and (max-width: 479.98px) {
  .sg-project-facts { grid-template-columns: 1fr; }
  .sg-project-fact + .sg-project-fact {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(16, 54, 91, 0.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sg-project,
  .sg-project-name,
  .sg-project-media img,
  .sg-project-media::after { transition: none; }
  .sg-project:hover { transform: none; }
  .sg-project:hover .sg-project-media img { transform: none; }
}


/*----------------------------------------*/
/*  Sea Gate home hero (ported from index-6)
/*----------------------------------------*/
/* still image in place of the stock hero video */
.tp-hero-video-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* drops the photo below tp-linear-bg-5's ::before scrim (z-index -1), which
   otherwise paints behind it and leaves the headline sitting on bare image */
.sg-hero .tp-hero-video-bg img {
  z-index: -2;
}
/* smaller type than the stock hero (h1 was 100px, counters 80px) */
.sg-hero .tp-hero-slider-title {
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
}
.sg-hero .tp-hero-solid-content p {
  font-size: 15px;
  line-height: 26px;
}
.sg-hero .tpfunfect2__num {
  font-size: clamp(34px, 3.3vw, 48px);
}
.sg-hero .tpfunfect2__num .odometer {
  line-height: 1.1;
}
.sg-hero .tpfunfect2__num-div {
  font-size: 0.42em;
  line-height: 1.2;
}
.sg-hero .tpfunfect2 p {
  font-size: 14px;
  line-height: 22px;
}
.sg-hero .tp-btn .tp-btn-text {
  font-size: 15px;
}

/* shorter than the stock hero: ~1060px -> 700px at desktop */
.sg-hero.tp-hero-solid-2 {
  /* exactly the overlaid header height, so the hero sits flush beneath it */
  padding-top: 133px;
}
.sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
  min-height: 580px;
  padding-top: 90px;
}
/* wide screens keep the stock overlay placement; the copy is capped so it can
   never run under the pinned counters */
.sg-hero .tp-hero-solid-fact {
  right: 50px;
  bottom: 50px;
}
@media only screen and (min-width: 1200px) {
  /* only the paragraph reaches the counters' band; the headline sits above it
     and keeps the full column so it does not break onto a third line */
  .sg-hero .tp-hero-solid-content p { max-width: 620px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .sg-hero.tp-hero-solid-2 { padding-top: 117px; } /* flush with the header */
  .sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
    min-height: 500px;
    padding-top: 75px;
    padding-bottom: 45px;
  }
  .sg-hero .tp-hero-solid-fact { margin-right: 45px; margin-top: 28px; }
}
/* below 1200px the counter block (640px wide) leaves no room beside the copy,
   so stack it under the content instead of pinning it over the top */
@media only screen and (max-width: 1199.98px) {
  .sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sg-hero .tp-hero-solid-fact {
    position: static;
    align-self: flex-end;
    margin-top: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sg-hero.tp-hero-solid-2 { padding-top: 117px; } /* flush with the header */
  .sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
    min-height: 440px;
    padding-top: 70px;
    padding-bottom: 40px;
  }
  .sg-hero .tp-hero-solid-fact { margin-right: 40px; }
}
@media (max-width: 767.98px) {
  .sg-hero.tp-hero-solid-2 { padding-top: 71px; } /* flush with the header */
  .sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
    min-height: 400px;
    padding-top: 60px;
    padding-bottom: 30px;
  }
  /* stock styling makes each counter full-width on phones, which stacks them and
     makes the hero taller than the one it replaced - keep them side by side */
  .sg-hero .tp-hero-solid-fact {
    align-self: stretch;
    margin-top: 26px;
    padding: 0 12px;
    flex-wrap: nowrap;
    grid-gap: 10px;
  }
  .sg-hero .tpfunfect2 {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 18px;
  }
  .sg-hero .tpfunfect2__num { font-size: 44px; }
  .sg-hero .tpfunfect2__num .odometer { line-height: 46px; }
  .sg-hero .tpfunfect2__num-div { font-size: 20px; line-height: 22px; }
  .sg-hero .tpfunfect2 p { font-size: 13px; }
}


/*----------------------------------------*/
/*  Sea Gate project detail pages
/*----------------------------------------*/
.sg-pd-container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}
.sg-pd-section {
  padding: clamp(48px, 6vw, 96px) 0;
  background: #fff;
}
.sg-pd-section--gray { background: var(--tp-gray-color); }
.sg-pd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-secoundery-color);
  margin-bottom: 12px;
}
.sg-pd-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tp-secoundery-color);
  box-shadow: 0 0 0 4px rgba(225, 136, 37, 0.18);
}
.sg-pd-h2 {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tp-theme-color);
  margin: 0;
}
.sg-pd-h3 {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  color: var(--tp-theme-color);
  margin: clamp(28px, 3vw, 40px) 0 16px;
}
.sg-pd-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* hero */
.sg-pd-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 46vw, 560px);
  padding: 150px clamp(16px, 4vw, 70px) clamp(60px, 6vw, 90px);
  overflow: hidden;
  background: var(--tp-theme-color);
}
.sg-pd-hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sg-pd-hero.is-sold .sg-pd-hero-img { filter: grayscale(0.45) brightness(0.9); }
.sg-pd-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 54, 91, 0.72) 0%, rgba(16, 54, 91, 0.25) 40%, rgba(16, 54, 91, 0.85) 100%);
}
.sg-pd-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}
.sg-pd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.sg-pd-back svg { width: 14px; height: 14px; }
.sg-pd-back:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.sg-pd-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.sg-pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tp-theme-color);
  font-size: 12px;
  font-weight: 700;
}
.sg-pd-chip svg { width: 15px; height: 15px; }
.sg-pd-chip--state {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}
.sg-pd-chip--state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.25);
}
.sg-pd-chip--state.is-sold {
  background: rgba(200, 30, 44, 0.92);
  border-color: rgba(255, 255, 255, 0.25);
}
.sg-pd-chip--state.is-sold::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); }
.sg-pd-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0 0 10px;
  color: #fff;
}
.sg-pd-title-en {
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.sg-pd-title-ar {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  color: var(--tp-secoundery-color);
}
.sg-pd-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 500;
}
.sg-pd-loc svg { width: 18px; height: 18px; color: var(--tp-secoundery-color); flex-shrink: 0; }

/* key facts strip */
.sg-pd-facts {
  position: relative;
  z-index: 3;
  margin-top: clamp(-70px, -5vw, -50px);
  padding-bottom: clamp(10px, 2vw, 20px);
}
.sg-pd-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(16, 54, 91, 0.1);
  border: 1px solid rgba(16, 54, 91, 0.1);
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(16, 54, 91, 0.12);
}
.sg-pd-fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 28px);
  background: #fff;
  text-align: left;
}
.sg-pd-fact-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #8492a0;
}
.sg-pd-fact-label svg { width: 15px; height: 15px; color: var(--tp-secoundery-color); flex-shrink: 0; }
.sg-pd-fact-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tp-theme-color);
  line-height: 1.5;
}
.sg-pd-price {
  font-size: clamp(19px, 1.9vw, 24px);
  font-variant-numeric: tabular-nums;
}
.sg-pd-price small {
  font-size: 0.6em;
  font-weight: 600;
  color: rgba(16, 54, 91, 0.55);
}
.sg-pd-sold { color: #c81e2c; }

/* overview + sidebar */
.sg-pd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.sg-pd-content { text-align: left; }
.sg-pd-lead {
  color: #5a6a78;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2;
  margin: 0;
}
.sg-pd-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-pd-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--tp-theme-color);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}
.sg-pd-features svg {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: var(--tp-secoundery-color);
  flex-shrink: 0;
}
.sg-pd-aside { position: sticky; top: 110px; }
.sg-pd-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  background: linear-gradient(180deg, #fff 0%, var(--tp-gray-color) 100%);
  box-shadow: 0 18px 40px rgba(16, 54, 91, 0.07);
  text-align: left;
}
.sg-pd-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-secoundery-color);
  margin-bottom: 6px;
}
.sg-pd-card-price {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--tp-theme-color);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sg-pd-card-price small {
  font-size: 0.55em;
  font-weight: 600;
  color: rgba(16, 54, 91, 0.55);
}
.sg-pd-card-note {
  margin: 14px 0 22px;
  color: #5a6a78;
  font-size: 14px;
  line-height: 1.9;
}
.sg-pd-cta {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.35s ease, color 0.35s ease, gap 0.35s ease;
}
.sg-pd-cta svg { width: 15px; height: 15px; }
.sg-pd-cta:hover {
  background: var(--tp-theme-color);
  color: #fff;
  gap: 14px;
}
.sg-pd-cta--ghost {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(16, 54, 91, 0.18);
  color: var(--tp-theme-color);
}
.sg-pd-cta--ghost:hover { background: var(--tp-theme-color); color: #fff; }

/* image grids */
.sg-pd-grid {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}
.sg-pd-grid--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-pd-grid--models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-pd-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 18px);
  background: rgba(16, 54, 91, 0.06);
  aspect-ratio: 4 / 3;
}
.sg-pd-grid--models .sg-pd-shot {
  background: #fff;
  border: 1px solid rgba(16, 54, 91, 0.1);
}
.sg-pd-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.sg-pd-grid--models .sg-pd-shot img { object-fit: contain; padding: 10px; }
.sg-pd-shot:hover img { transform: scale(1.06); }
.sg-pd-grid--models .sg-pd-shot:hover img { transform: scale(1.03); }
.sg-pd-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(225, 136, 37, 0) 55%, rgba(225, 136, 37, 0.32) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sg-pd-shot:hover::after { opacity: 1; }

/* map */
.sg-pd-map {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  aspect-ratio: 21 / 9;
  background: var(--tp-gray-color);
}
.sg-pd-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* other projects */
.sg-pd-others {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.sg-pd-other {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 20px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  background: #fff;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.sg-pd-other:hover {
  transform: translateY(-5px);
  border-color: rgba(225, 136, 37, 0.45);
  box-shadow: 0 22px 45px rgba(16, 54, 91, 0.12);
}
.sg-pd-other-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.sg-pd-other-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.sg-pd-other:hover .sg-pd-other-media img { transform: scale(1.06); }
.sg-pd-other-body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px clamp(16px, 1.8vw, 22px) 20px;
}
.sg-pd-other-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--tp-secoundery-color);
  font-variant-numeric: tabular-nums;
}
.sg-pd-other-name {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  color: var(--tp-theme-color);
}
.sg-pd-other-ar {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: #8492a0;
}

@media only screen and (max-width: 1199.98px) {
  .sg-pd-cols { grid-template-columns: 1fr; }
  .sg-pd-aside { position: static; }
  .sg-pd-card { max-width: 520px; }
}
@media only screen and (max-width: 991.98px) {
  .sg-pd-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-pd-grid--photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-pd-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-pd-map { aspect-ratio: 16 / 9; }
}
@media only screen and (max-width: 767.98px) {
  .sg-pd-hero { padding-top: 120px; min-height: 340px; }
  .sg-pd-facts { margin-top: -40px; }
  .sg-pd-features { grid-template-columns: 1fr; }
  .sg-pd-grid--models { grid-template-columns: 1fr; }
  .sg-pd-others { grid-template-columns: 1fr; }
  .sg-pd-card { max-width: none; }
}
@media only screen and (max-width: 575.98px) {
  .sg-pd-facts-grid { grid-template-columns: 1fr; }
  .sg-pd-grid--photos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-pd-shot img,
  .sg-pd-other,
  .sg-pd-other-media img { transition: none; }
  .sg-pd-shot:hover img,
  .sg-pd-other:hover .sg-pd-other-media img { transform: none; }
  .sg-pd-other:hover { transform: none; }
}


/*----------------------------------------*/
/*  Sea Gate inner pages (about / contact)
/*----------------------------------------*/
.sg-ph {
  position: relative;
  padding: 150px clamp(16px, 4vw, 70px) clamp(50px, 5vw, 80px);
  background: linear-gradient(135deg, #0c2b49 0%, var(--tp-theme-color) 55%, #16487a 100%);
  overflow: hidden;
}
.sg-ph::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: min(520px, 55vw);
  height: min(520px, 55vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 136, 37, 0.28) 0%, rgba(225, 136, 37, 0) 68%);
  pointer-events: none;
}
.sg-ph-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
}
.sg-ph-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-secoundery-color);
  margin-bottom: 14px;
}
.sg-ph-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tp-secoundery-color);
  box-shadow: 0 0 0 4px rgba(225, 136, 37, 0.22);
}
.sg-ph-title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 700;
  line-height: 1.1;
}
.sg-ph-title em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--tp-secoundery-color);
}
.sg-ph-lead {
  max-width: 680px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.9;
}

/* about: intro + stats */
.sg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 3.4vw, 60px);
  align-items: start;
}
.sg-intro-body p {
  color: #5a6a78;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2;
  margin: 0 0 18px;
}
.sg-intro-body p:last-child { margin-bottom: 0; }
.sg-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(28px, 3vw, 44px);
}
.sg-stat {
  padding: clamp(18px, 2vw, 26px);
  border-radius: clamp(14px, 1.4vw, 20px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  background: #fff;
}
.sg-stat-num {
  display: block;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tp-theme-color);
  font-variant-numeric: tabular-nums;
}
.sg-stat-num span { color: var(--tp-secoundery-color); }
.sg-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #8492a0;
}

/* about: values */
.sg-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.sg-value {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  background: #fff;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.sg-value:hover {
  transform: translateY(-5px);
  border-color: rgba(225, 136, 37, 0.45);
  box-shadow: 0 22px 45px rgba(16, 54, 91, 0.1);
}
.sg-value-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(225, 136, 37, 0.12);
  color: var(--tp-secoundery-color);
}
.sg-value-ic svg { width: 24px; height: 24px; }
.sg-value-num {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: rgba(16, 54, 91, 0.07);
  font-variant-numeric: tabular-nums;
}
.sg-value h3 {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--tp-theme-color);
}
.sg-value p {
  margin: 0;
  color: #5a6a78;
  font-size: 15px;
  line-height: 1.95;
}

/* contact */
.sg-ct-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.sg-ct-methods {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
}
.sg-ct-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: clamp(14px, 1.4vw, 18px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  background: #fff;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
a.sg-ct-card:hover {
  border-color: rgba(225, 136, 37, 0.5);
  transform: translateY(-3px);
}
.sg-ct-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(225, 136, 37, 0.12);
  color: var(--tp-secoundery-color);
}
.sg-ct-ic svg { width: 21px; height: 21px; }
.sg-ct-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sg-ct-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8492a0;
}
.sg-ct-val {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--tp-theme-color);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.sg-ct-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.sg-ct-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(16, 54, 91, 0.14);
  color: var(--tp-theme-color);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sg-ct-social a:hover {
  background: var(--tp-secoundery-color);
  border-color: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
}
.sg-ct-social svg { width: 17px; height: 17px; }

/* form */
.sg-form {
  padding: clamp(24px, 2.8vw, 40px);
  border-radius: clamp(16px, 1.6vw, 24px);
  border: 1px solid rgba(16, 54, 91, 0.1);
  background: linear-gradient(180deg, #fff 0%, var(--tp-gray-color) 100%);
  box-shadow: 0 18px 44px rgba(16, 54, 91, 0.07);
}
.sg-form-row { margin-bottom: 18px; }
.sg-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-theme-color);
}
.sg-form label span { color: #c81e2c; }
.sg-form input,
.sg-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(16, 54, 91, 0.16);
  background: #fff;
  color: var(--tp-theme-color);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.sg-form textarea { min-height: 132px; resize: vertical; }
.sg-form input:focus,
.sg-form textarea:focus {
  outline: 0;
  border-color: var(--tp-secoundery-color);
  box-shadow: 0 0 0 3px rgba(225, 136, 37, 0.16);
}
.sg-form input.has-error,
.sg-form textarea.has-error { border-color: #c81e2c; }
.sg-form-err {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c81e2c;
}
.sg-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--tp-secoundery-color);
  color: var(--tp-theme-color);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, gap 0.35s ease;
}
.sg-form-submit svg { width: 16px; height: 16px; }
.sg-form-submit:hover {
  background: var(--tp-theme-color);
  color: #fff;
  gap: 14px;
}
.sg-form-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #8492a0;
}
.sg-form-alert {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(200, 30, 44, 0.08);
  border: 1px solid rgba(200, 30, 44, 0.25);
  color: #c81e2c;
  font-size: 14px;
  font-weight: 600;
}

@media only screen and (max-width: 991.98px) {
  .sg-intro,
  .sg-ct-cols { grid-template-columns: 1fr; }
  .sg-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 767.98px) {
  .sg-ph { padding-top: 120px; }
  .sg-values { grid-template-columns: 1fr; }
  .sg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 479.98px) {
  .sg-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-value,
  a.sg-ct-card { transition: none; }
  .sg-value:hover,
  a.sg-ct-card:hover { transform: none; }
}


/*----------------------------------------*/
/*  Arabic typeface — matches seagatedevelopments.com
/*  ("arabic-rania", self-hosted there via the Use Any Font plugin)
/*----------------------------------------*/
@font-face {
  font-family: "arabic-rania";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* limited to Arabic codepoints, so Latin text still resolves to Manrope */
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}

/* put the Arabic face first in every stack; Latin falls through to the theme font */
:root {
  --tp-theme-font: "arabic-rania", "Manrope", sans-serif;
  --tp-playfair-font: "arabic-rania", "Playfair Display", serif;
}

/* the decorative serif accents set their own stack, so add the Arabic face there too */
.sg-projects-title em,
.sg-ph-title em,
.sg-f-headline em,
.sg-reel-heading em {
  font-family: "arabic-rania", Georgia, "Times New Roman", serif;
}

/* arabic-rania sits a little small next to Manrope at the same px size */
html[lang="ar"] body {
  font-size: 17px;
}
html[lang="ar"] .sg-project-desc,
html[lang="ar"] .sg-pd-lead,
html[lang="ar"] .sg-intro-body p,
html[lang="ar"] .sg-value p {
  font-size: 16px;
}


/*========================================*/
/*  Sea Gate — redesigned inner pages
/*  about · contact · project detail · blog
/*========================================*/
:root {
  --sg-ink: #10365b;
  --sg-ink-2: #0b2540;
  --sg-amber: #e18825;
  --sg-mute: #5a6a78;
  --sg-line: rgba(16, 54, 91, 0.1);
  --sg-radius: clamp(18px, 1.8vw, 28px);
}

.sg-wrap {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}
.sg-sec { padding: clamp(56px, 7vw, 120px) 0; background: #fff; }
.sg-sec--tight { padding: clamp(40px, 4.5vw, 72px) 0; }
.sg-sec--gray { background: var(--tp-gray-color); }
.sg-sec--ink { background: var(--sg-ink); color: #fff; }

.sg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* floor raised from 10px: it was unreadably small on phones */
  font-size: clamp(11.5px, 1.05vw, 12px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sg-amber);
  margin-bottom: 14px;
}
.sg-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--sg-amber);
}
.sg-h2 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
}
/* .sg-band is a dark block that can sit inside a light section, so its heading
   and lede need the inverted colours too */
.sg-sec--ink .sg-h2,
.sg-band .sg-h2 { color: #fff; }
.sg-band .sg-lede { color: rgba(255, 255, 255, 0.75); }
.sg-h2 em {
  font-style: italic;
  font-family: "arabic-rania", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--sg-amber);
}
.sg-lede {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--sg-mute);
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.95;
}
.sg-sec--ink .sg-lede { color: rgba(255, 255, 255, 0.75); }

/* ---------- editorial page masthead ---------- */
.sg-mast {
  position: relative;
  padding: clamp(130px, 13vw, 190px) 0 clamp(48px, 5vw, 84px);
  background: radial-gradient(120% 140% at 12% 0%, #16487a 0%, var(--sg-ink) 42%, var(--sg-ink-2) 100%);
  overflow: hidden;
}
.sg-mast::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}
.sg-mast::after {
  content: "";
  position: absolute;
  right: -160px;
  top: -120px;
  width: min(560px, 60vw);
  height: min(560px, 60vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 136, 37, 0.3) 0%, rgba(225, 136, 37, 0) 68%);
  pointer-events: none;
}
.sg-mast-inner { position: relative; z-index: 2; }
/* breadcrumb: a light chip rather than a bare grey line */
.sg-mast-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}
.sg-mast-crumb a {
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.25s ease;
}
.sg-mast-crumb a:hover { color: var(--sg-amber); }
.sg-mast-crumb > span { color: #fff; }
/* the chevrons were as tall as the text; make them small dim separators */
.sg-mast-crumb svg {
  width: 8px;
  height: 8px;
  opacity: 0.4;
  flex-shrink: 0;
}
.sg-mast-title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.sg-mast-title em {
  font-style: italic;
  font-family: "arabic-rania", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--sg-amber);
}
.sg-mast-lede {
  max-width: 60ch;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.85;
}
.sg-mast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 28px;
}
.sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.sg-pill svg { width: 15px; height: 15px; color: var(--sg-amber); }
.sg-pill--amber {
  background: var(--sg-amber);
  border-color: var(--sg-amber);
  color: var(--sg-ink);
}
.sg-pill--sold { background: #c81e2c; border-color: #c81e2c; color: #fff; }
.sg-pill--sold svg { color: #fff; }

/* ---------- editorial two-column ---------- */
.sg-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 76px);
  align-items: start;
}
.sg-split-stick { position: sticky; top: 120px; }
.sg-prose p {
  margin: 0 0 20px;
  color: var(--sg-mute);
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 2.05;
}
.sg-prose p:last-child { margin-bottom: 0; }
.sg-prose p strong, .sg-prose b { color: var(--sg-ink); font-weight: 700; }

/* oversized figure numbers */
.sg-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(30px, 3.4vw, 48px);
}
.sg-figure {
  padding-top: 18px;
  border-top: 2px solid var(--sg-ink);
}
.sg-figure-n {
  display: block;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sg-ink);
  font-variant-numeric: tabular-nums;
}
.sg-figure-n i { font-style: normal; color: var(--sg-amber); }
.sg-figure-l {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #8492a0;
}

/* ---------- dark value block (borrowed from index-5 team band) ---------- */
.sg-band {
  border-radius: var(--sg-radius);
  background: radial-gradient(110% 130% at 88% 0%, #16487a 0%, var(--sg-ink) 45%, var(--sg-ink-2) 100%);
  padding: clamp(34px, 4.5vw, 78px) clamp(20px, 3vw, 60px);
  overflow: hidden;
}
.sg-band-head { margin-bottom: clamp(28px, 3.4vw, 52px); }
.sg-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
.sg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: calc(var(--sg-radius) * 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.sg-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(225, 136, 37, 0.55);
}
.sg-card-n {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--sg-amber);
  margin-bottom: 20px;
}
.sg-card h3 {
  margin: 0 0 14px;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.sg-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.72);
}

.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--sg-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.35s ease, gap 0.35s ease, color 0.35s ease;
}
.sg-btn svg { width: 15px; height: 15px; }
.sg-btn:hover { background: #fff; color: var(--sg-ink); gap: 14px; }
.sg-btn--ghost {
  background: transparent;
  border: 1px solid var(--sg-line);
  color: var(--sg-ink);
}
.sg-btn--ghost:hover { background: var(--sg-ink); color: #fff; }
.sg-btn--amber { background: var(--sg-amber); color: var(--sg-ink); }
.sg-btn--amber:hover { background: var(--sg-ink); color: #fff; }

/* ---------- contact ---------- */
.sg-ct {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.sg-ct-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 46px);
  border-radius: var(--sg-radius);
  background: radial-gradient(120% 120% at 10% 0%, #16487a 0%, var(--sg-ink) 50%, var(--sg-ink-2) 100%);
  color: #fff;
}
.sg-ct-panel .sg-h2 { color: #fff; }
.sg-ct-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: clamp(24px, 2.6vw, 36px) 0 0;
}
.sg-ct-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
a.sg-ct-row:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(225, 136, 37, 0.6);
  color: #fff;
  transform: translateX(4px);
}
.sg-ct-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(225, 136, 37, 0.18);
  color: var(--sg-amber);
}
.sg-ct-ico svg { width: 20px; height: 20px; }
.sg-ct-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-ct-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
.sg-ct-v {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.sg-ct-soc { display: flex; gap: 10px; margin-top: auto; padding-top: clamp(22px, 2.4vw, 34px); }
.sg-ct-soc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sg-ct-soc a:hover { background: var(--sg-amber); border-color: var(--sg-amber); color: var(--sg-ink); }
.sg-ct-soc svg { width: 17px; height: 17px; }

.sg-formbox {
  padding: clamp(26px, 3vw, 46px);
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 54, 91, 0.08);
}
.sg-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sg-fgrid .sg-f-full { grid-column: 1 / -1; }
.sg-f { display: flex; flex-direction: column; gap: 8px; }
.sg-f label { font-size: 13px; font-weight: 700; color: var(--sg-ink); }
.sg-f label i { font-style: normal; color: #c81e2c; }
.sg-f input,
.sg-f textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(16, 54, 91, 0.16);
  border-radius: 12px;
  background: var(--tp-gray-color);
  color: var(--sg-ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.sg-f textarea { min-height: 138px; resize: vertical; }
.sg-f input:focus,
.sg-f textarea:focus {
  outline: 0;
  background: #fff;
  border-color: var(--sg-amber);
  box-shadow: 0 0 0 3px rgba(225, 136, 37, 0.16);
}
.sg-f input.is-bad, .sg-f textarea.is-bad { border-color: #c81e2c; background: rgba(200, 30, 44, 0.04); }
.sg-alert {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(200, 30, 44, 0.08);
  border: 1px solid rgba(200, 30, 44, 0.25);
  color: #c81e2c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.sg-fnote { margin: 14px 0 0; font-size: 13px; line-height: 1.75; color: #8492a0; }

/* ---------- project detail v2 ---------- */
.sg-pj-hero {
  position: relative;
  min-height: clamp(420px, 52vw, 620px);
  display: flex;
  align-items: flex-end;
  padding: clamp(130px, 13vw, 180px) 0 clamp(36px, 4vw, 60px);
  overflow: hidden;
  background: var(--sg-ink);
}
.sg-pj-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sg-pj-hero.is-sold .sg-pj-hero-img { filter: grayscale(0.5) brightness(0.9); }
.sg-pj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 37, 64, 0.78) 0%, rgba(11, 37, 64, 0.15) 38%, rgba(11, 37, 64, 0.9) 100%);
}
.sg-pj-hero .sg-wrap { position: relative; z-index: 2; }
.sg-pj-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 14px 0 12px;
  color: #fff;
  font-size: clamp(34px, 5.6vw, 82px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sg-pj-title small {
  font-size: clamp(16px, 1.9vw, 26px);
  font-weight: 600;
  color: var(--sg-amber);
}

/* sticky spec rail */
.sg-pj-rail {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sg-line);
}
.sg-pj-rail-in {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 0;
}
.sg-pj-rail-in::-webkit-scrollbar { display: none; }
.sg-pj-rail a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--sg-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.sg-pj-rail a:hover { background: var(--tp-gray-color); }
.sg-pj-rail a.is-on { background: var(--sg-ink); color: #fff; }

/* key numbers */
.sg-pj-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
.sg-pj-spec {
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: calc(var(--sg-radius) * 0.7);
  background: var(--tp-gray-color);
  border: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.sg-pj-spec:hover { background: #fff; border-color: rgba(225, 136, 37, 0.4); }
.sg-pj-spec-k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8492a0;
}
.sg-pj-spec-k svg { width: 15px; height: 15px; color: var(--sg-amber); }
.sg-pj-spec-v {
  display: block;
  margin-top: 12px;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sg-ink);
}
.sg-pj-spec-v.is-price { font-size: clamp(20px, 2.2vw, 30px); font-variant-numeric: tabular-nums; }
.sg-pj-spec-v.is-price small { font-size: 0.55em; color: rgba(16, 54, 91, 0.55); }
.sg-pj-spec-v.is-sold { color: #c81e2c; }

/* feature list */
.sg-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; margin: 0; padding: 0; list-style: none; }
.sg-feats li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sg-line);
  color: var(--sg-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}
.sg-feats svg { width: 17px; height: 17px; margin-top: 4px; flex-shrink: 0; color: var(--sg-amber); }

/* mosaic gallery */
.sg-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.sg-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--sg-radius) * 0.6);
  background: rgba(16, 54, 91, 0.06);
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}
.sg-shot:nth-child(6n + 1) { grid-column: span 4; aspect-ratio: 16 / 9; }
.sg-shot:nth-child(6n + 4) { grid-column: span 4; aspect-ratio: 16 / 9; }
.sg-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sg-shot:hover img { transform: scale(1.07); }
.sg-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(225, 136, 37, 0) 50%, rgba(225, 136, 37, 0.35) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sg-shot:hover::after { opacity: 1; }
.sg-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.sg-plan {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--sg-radius) * 0.6);
  border: 1px solid var(--sg-line);
  background: #fff;
  aspect-ratio: 4 / 3;
}
.sg-plan img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.5s ease; }
.sg-plan:hover img { transform: scale(1.04); }

.sg-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  aspect-ratio: 21 / 9;
  background: var(--tp-gray-color);
}
.sg-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* project cross-links */
.sg-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.sg-more-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--sg-radius);
  aspect-ratio: 4 / 3;
  background: var(--sg-ink);
}
.sg-more-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sg-more-card:hover img { transform: scale(1.07); }
.sg-more-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 37, 64, 0) 40%, rgba(11, 37, 64, 0.85) 100%);
}
.sg-more-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(16px, 1.8vw, 24px);
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}
.sg-more-n { font-size: 13px; font-weight: 800; color: var(--sg-amber); }
.sg-more-name { font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; }
.sg-more-sub { margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, 0.7); }

/* ---------- blog ---------- */
.sg-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.sg-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  background: #fff;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.sg-post:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 136, 37, 0.5);
  box-shadow: 0 26px 55px rgba(16, 54, 91, 0.13);
}
.sg-post-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sg-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sg-post:hover .sg-post-media img { transform: scale(1.06); }
.sg-post-date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sg-ink);
  font-size: 12px;
  font-weight: 700;
}
.sg-post-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 2vw, 26px); }
.sg-post-title {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--sg-ink);
  transition: color 0.3s ease;
}
.sg-post:hover .sg-post-title { color: var(--sg-amber); }
.sg-post-ex {
  margin: 0 0 20px;
  color: var(--sg-mute);
  font-size: 15px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-post-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sg-ink);
}
.sg-post-more svg { width: 14px; height: 14px; color: var(--sg-amber); transition: transform 0.3s ease; }
.sg-post:hover .sg-post-more svg { transform: translateX(4px); }

.sg-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 4vw, 70px); align-items: start; }
.sg-article-fig { margin: 0 0 clamp(26px, 3vw, 42px); border-radius: var(--sg-radius); overflow: hidden; }
.sg-article-fig img { width: 100%; height: auto; display: block; }
.sg-article-body p {
  margin: 0 0 22px;
  color: var(--sg-mute);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2.1;
}
.sg-article-body h2 {
  margin: clamp(30px, 3.4vw, 44px) 0 16px;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 700;
  color: var(--sg-ink);
  line-height: 1.4;
}
.sg-article-body ol, .sg-article-body ul { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: sgli; }
.sg-article-body li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 46px;
  color: var(--sg-mute);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2;
}
.sg-article-body ol li::before {
  counter-increment: sgli;
  content: counter(sgli);
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(225, 136, 37, 0.14);
  color: var(--sg-amber);
  font-size: 14px;
  font-weight: 800;
}
.sg-article-body ul li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sg-amber);
}
.sg-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.sg-aside-box {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  background: var(--tp-gray-color);
}
.sg-aside-box h4 { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--sg-ink); }
.sg-aside-list { display: flex; flex-direction: column; gap: 14px; }
.sg-aside-item { display: flex; gap: 12px; align-items: center; }
.sg-aside-item img { width: 62px; height: 52px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.sg-aside-item span { font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--sg-ink); }
.sg-aside-item:hover span { color: var(--sg-amber); }

/* ---------- responsive ---------- */
@media only screen and (max-width: 1199.98px) {
  .sg-split { grid-template-columns: 1fr; }
  .sg-split-stick { position: static; }
  .sg-pj-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-article { grid-template-columns: 1fr; }
  .sg-aside { position: static; }
}
@media only screen and (max-width: 991.98px) {
  .sg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-ct { grid-template-columns: 1fr; }
  .sg-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-map { aspect-ratio: 16 / 9; }
  .sg-mosaic { grid-template-columns: repeat(4, 1fr); }
  .sg-shot { grid-column: span 2; }
  .sg-shot:nth-child(6n + 1),
  .sg-shot:nth-child(6n + 4) { grid-column: span 4; }
}
@media only screen and (max-width: 767.98px) {
  .sg-mast { padding-top: 118px; }
  .sg-pj-hero { padding-top: 112px; min-height: 380px; }
  .sg-cards { grid-template-columns: 1fr; }
  .sg-posts { grid-template-columns: 1fr; }
  .sg-more { grid-template-columns: 1fr; }
  .sg-plans { grid-template-columns: 1fr; }
  .sg-feats { grid-template-columns: 1fr; }
  .sg-fgrid { grid-template-columns: 1fr; }
  .sg-mosaic { grid-template-columns: repeat(2, 1fr); }
  .sg-shot,
  .sg-shot:nth-child(6n + 1),
  .sg-shot:nth-child(6n + 4) { grid-column: span 2; aspect-ratio: 4 / 3; }
  .sg-btn { width: 100%; }
}
@media only screen and (max-width: 575.98px) {
  .sg-pj-specs { grid-template-columns: 1fr; }
  .sg-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-card, .sg-post, .sg-shot img, .sg-more-card img, .sg-post-media img, a.sg-ct-row { transition: none; }
  .sg-card:hover, .sg-post:hover, a.sg-ct-row:hover { transform: none; }
  .sg-shot:hover img, .sg-more-card:hover img, .sg-post:hover .sg-post-media img { transform: none; }
}

/*----------------------------------------*/
/*  Home hero: show the artwork in true colour
/*----------------------------------------*/
/* tp-linear-bg-5 paints a black gradient wash over the hero image; the artwork
   from the live site is meant to read as-is, so drop it on this section only */
.sg-hero .tp-hero-spacing-3.tp-linear-bg-5::before {
  background: none;
}

/*----------------------------------------*/
/*  Home hero brand lockup
/*----------------------------------------*/
.sg-hero-lockup {
  display: inline-block;
  width: 100%;
  max-width: min(600px, 100%);
}
.sg-hero-logo {
  display: block;
  width: 100%;
  height: auto;
}
.sg-hero-claim {
  position: relative;
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  padding-top: clamp(12px, 1.6vw, 22px);
  color: var(--tp-secoundery-color);
  font-size: clamp(26px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
/* the amber rule under the wordmark, as a bar so it can draw itself out */
.sg-hero-claim::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tp-secoundery-color);
}
html[lang="ar"] .sg-hero-claim { text-align: right; }

/* ---- staged entrance ---- */
.sg-hero-logo {
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  animation: sgLockupIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}
.sg-hero-claim::before {
  transform: scaleX(0);
  /* draws from the side the script reads from */
  transform-origin: left center;
  animation: sgRuleIn 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards;
}
html[lang="ar"] .sg-hero-claim::before { transform-origin: right center; }
/* each line rides up from behind its own mask */
.sg-hero-line {
  display: block;
  overflow: hidden;
}
.sg-hero-line i {
  display: block;
  font-style: normal;
  transform: translateY(112%);
  animation: sgLineIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.sg-hero-line:nth-child(1) i { animation-delay: 0.72s; }
.sg-hero-line:nth-child(2) i { animation-delay: 0.86s; }

@keyframes sgLockupIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sgRuleIn {
  to { transform: scaleX(1); }
}
@keyframes sgLineIn {
  to { transform: translateY(0); }
}

@media only screen and (max-width: 991.98px) {
  .sg-hero-lockup { max-width: min(460px, 100%); }
}
@media only screen and (max-width: 575.98px) {
  .sg-hero-lockup { max-width: 100%; }
  .sg-hero-claim::before { height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-hero-logo,
  .sg-hero-claim::before,
  .sg-hero-line i {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sg-hero-claim::before { transform: scaleX(1); }
}

/*----------------------------------------*/
/*  Contact page — channels + offices
/*----------------------------------------*/
.sg-chans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.sg-chan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.8vw, 38px);
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  background: #fff;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.sg-chan::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(225, 136, 37, 0.08);
  transition: transform 0.5s ease;
}
.sg-chan:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 136, 37, 0.45);
  box-shadow: 0 26px 55px rgba(16, 54, 91, 0.12);
}
.sg-chan:hover::after { transform: scale(1.5); }
.sg-chan-ic {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--sg-ink);
  color: var(--sg-amber);
}
.sg-chan-ic svg { width: 23px; height: 23px; }
.sg-chan-k {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8492a0;
}
.sg-chan-v {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  color: var(--sg-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  transition: color 0.3s ease;
}
.sg-chan:hover .sg-chan-v { color: var(--sg-amber); }

/* offices */
.sg-offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.sg-office {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--sg-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.sg-office:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(225, 136, 37, 0.55);
}
.sg-office-n {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--sg-amber);
  margin-bottom: 18px;
}
.sg-office-city {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  color: #fff;
}
.sg-office-city svg { width: 19px; height: 19px; color: var(--sg-amber); flex-shrink: 0; }
.sg-office-addr {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.95;
}
.sg-office-dir {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.3s ease, gap 0.3s ease;
}
.sg-office-dir svg { width: 14px; height: 14px; color: var(--sg-amber); }
.sg-office:hover .sg-office-dir { color: var(--sg-amber); gap: 13px; }

@media only screen and (max-width: 991.98px) {
  .sg-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 767.98px) {
  .sg-chans,
  .sg-offices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-chan, .sg-office, .sg-chan::after { transition: none; }
  .sg-chan:hover, .sg-office:hover { transform: none; }
  .sg-chan:hover::after { transform: none; }
}

/*----------------------------------------*/
/*  Contact page — compact rail beside the form
/*----------------------------------------*/
.sg-ct2 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 3.2vw, 54px);
  align-items: start;
}
.sg-rail { display: flex; flex-direction: column; gap: 10px; }
.sg-rail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid var(--sg-line);
  background: #fff;
  color: var(--sg-ink);
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
a.sg-rail-row:hover {
  border-color: rgba(225, 136, 37, 0.55);
  background: rgba(225, 136, 37, 0.05);
  color: var(--sg-ink);
  transform: translateX(4px);
}
.sg-rail-ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(225, 136, 37, 0.12);
  border: 1px solid rgba(225, 136, 37, 0.3);
  color: var(--sg-amber);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
a.sg-rail-row:hover .sg-rail-ic {
  background: var(--sg-amber);
  border-color: var(--sg-amber);
  color: #fff;
}
.sg-rail-ic svg { width: 20px; height: 20px; }
/* filled brand glyphs read heavier than the outlined ones at the same size */
.sg-rail-ic.is-solid svg { width: 18px; height: 18px; }
.sg-rail-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-rail-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8492a0;
}
.sg-rail-v {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  line-height: 1.4;
}
.sg-rail-v.is-mail { font-size: 13.5px; }
.sg-rail-soc { display: flex; gap: 9px; margin-top: 6px; }
.sg-rail-soc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--sg-line);
  color: var(--sg-ink);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.sg-rail-soc a:hover {
  background: var(--sg-ink);
  border-color: var(--sg-ink);
  color: #fff;
}
.sg-rail-soc svg { width: 17px; height: 17px; }
@media only screen and (max-width: 991.98px) {
  .sg-ct2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  a.sg-rail-row { transition: none; }
  a.sg-rail-row:hover { transform: none; }
}


/*----------------------------------------*/
/*  Project page v3 (sg-pv)
/*----------------------------------------*/
.sg-pv-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(560px, 94vh, 920px);
  padding-top: 150px;
  overflow: hidden;
  background: var(--sg-ink-2);
}
.sg-pv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sg-pv-hero.is-sold .sg-pv-hero-img { filter: grayscale(0.5) brightness(0.9); }
.sg-pv-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 37, 64, 0.6) 0%, rgba(11, 37, 64, 0.16) 34%, rgba(11, 37, 64, 0.9) 100%);
}
.sg-pv-ghost {
  position: absolute;
  right: clamp(6px, 3vw, 54px);
  top: clamp(130px, 16vh, 200px);
  z-index: 1;
  font-size: clamp(110px, 24vw, 340px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.07);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}
.sg-pv-hero-in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(24px, 3vw, 46px); }
.sg-pv-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin: 16px 0;
  color: #fff;
  font-size: clamp(32px, 4.8vw, 68px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.sg-pv-name small { font-size: clamp(15px, 1.6vw, 22px); font-weight: 600; color: var(--sg-amber); }

.sg-pv-specs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.sg-pv-spec {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(16px, 2vw, 28px) clamp(16px, 2.4vw, 40px);
  background: rgba(11, 37, 64, 0.58);
  backdrop-filter: blur(12px);
}
.sg-pv-spec-k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sg-pv-spec-k svg { width: 15px; height: 15px; color: var(--sg-amber); flex-shrink: 0; }
.sg-pv-spec-v { color: #fff; font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; line-height: 1.45; }
.sg-pv-spec-v.is-price { font-size: clamp(19px, 2vw, 26px); font-variant-numeric: tabular-nums; }
.sg-pv-spec-v.is-price small { font-size: 0.55em; color: rgba(255, 255, 255, 0.55); }
.sg-pv-spec-v.is-sold { color: #ff8d97; }

.sg-pv-rail {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sg-line);
}
.sg-pv-rail-in { display: flex; align-items: center; gap: 6px; padding: 11px 0; overflow-x: auto; scrollbar-width: none; }
.sg-pv-rail-in::-webkit-scrollbar { display: none; }
.sg-pv-rail-in a {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--sg-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.sg-pv-rail-in a:hover { background: var(--tp-gray-color); }
.sg-pv-rail-in a.is-on { background: var(--sg-ink); color: #fff; }
.sg-pv-rail-cta { margin-left: auto; background: var(--sg-amber); font-weight: 700; }
.sg-pv-rail-in a.sg-pv-rail-cta:hover { background: var(--sg-ink); color: #fff; }
#overview, #features, #gallery, #plans, #map { scroll-margin-top: 84px; }

.sg-pv-story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}
.sg-pv-lead { margin: 0; color: var(--sg-ink); font-size: clamp(16px, 1.55vw, 20px); font-weight: 500; line-height: 2; }
.sg-pv-lead::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--sg-amber);
  margin-bottom: clamp(18px, 2vw, 28px);
}

.sg-pv-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 4vw, 70px); }
.sg-pv-feat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(15px, 1.7vw, 22px) 0;
  border-bottom: 1px solid var(--sg-line);
}
.sg-pv-feat-n {
  min-width: 30px;
  padding-top: 3px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--sg-amber);
  font-variant-numeric: tabular-nums;
}
.sg-pv-feat span:last-child { color: var(--sg-ink); font-size: 15.5px; font-weight: 500; line-height: 1.9; }

.sg-pv-galhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
.sg-gal-ui { display: inline-flex; align-items: center; gap: 12px; }
.sg-gal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(16, 54, 91, 0.18);
  background: #fff;
  color: var(--sg-ink);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.sg-gal-btn svg { width: 15px; height: 15px; }
.sg-gal-btn:hover { background: var(--sg-amber); border-color: var(--sg-amber); }
.sg-gal-btn.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
.sg-gal-count { min-width: 52px; text-align: center; font-size: 14px; font-weight: 700; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-gal { overflow: hidden; border-radius: calc(var(--sg-radius) * 0.6); }
.sg-gal-slide { width: clamp(300px, 62vw, 820px); }
.sg-gal-slide a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--sg-radius) * 0.6);
  background: rgba(16, 54, 91, 0.06);
}
.sg-gal-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sg-gal-slide a:hover img { transform: scale(1.05); }

.sg-pv-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  aspect-ratio: 21 / 8;
  min-height: 340px;
  background: var(--tp-gray-color);
}
.sg-pv-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sg-pv-map-card {
  position: absolute;
  left: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: min(430px, calc(100% - 28px));
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(16, 54, 91, 0.22);
}
.sg-pv-map-card svg { width: 20px; height: 20px; margin-top: 2px; color: var(--sg-amber); flex-shrink: 0; }
.sg-pv-map-card b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--sg-ink); }
.sg-pv-map-card span { font-size: 13.5px; line-height: 1.7; color: var(--sg-mute); }

.sg-pv-next {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--sg-radius);
  min-height: clamp(230px, 32vw, 400px);
  background: var(--sg-ink);
}
.sg-pv-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.sg-pv-next:hover img { transform: scale(1.05); }
.sg-pv-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 37, 64, 0.9) 0%, rgba(11, 37, 64, 0.55) 46%, rgba(11, 37, 64, 0.15) 100%);
}
.sg-pv-next-in {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: clamp(22px, 4vw, 64px);
  padding-right: clamp(90px, 14vw, 190px);
}
.sg-pv-next-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  color: #fff;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.sg-pv-next-name small { font-size: clamp(13px, 1.3vw, 17px); font-weight: 600; color: var(--sg-amber); }
.sg-pv-next-arrow {
  position: absolute;
  right: clamp(18px, 4vw, 60px);
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6vw, 82px);
  height: clamp(52px, 6vw, 82px);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.sg-pv-next-arrow svg { width: 20px; height: 20px; }
.sg-pv-next:hover .sg-pv-next-arrow { background: var(--sg-amber); border-color: var(--sg-amber); color: var(--sg-ink); }

.sg-pv-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(11, 37, 64, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sg-pv-bar.is-on { transform: translateY(0); }
.sg-pv-bar-in {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 11px clamp(16px, 4vw, 70px);
}
.sg-pv-bar-name { color: #fff; font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; letter-spacing: -0.01em; }
.sg-pv-bar-price { color: var(--sg-amber); font-size: clamp(15px, 1.6vw, 20px); font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-pv-bar-price small { font-size: 0.6em; color: rgba(255, 255, 255, 0.6); }
.sg-pv-bar-price.is-sold { color: #ff8d97; font-size: 14px; }
.sg-pv-bar-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.sg-pv-bar-wa svg { width: 16px; height: 16px; }
.sg-pv-bar-wa:hover { background: #1fbf59; border-color: #1fbf59; color: #fff; }
.sg-pv-bar .sg-pv-bar-cta { padding: 11px 22px; font-size: 14px; }

@media only screen and (max-width: 991.98px) {
  .sg-pv-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-pv-story { grid-template-columns: 1fr; }
  .sg-pv-feats { grid-template-columns: 1fr; }
  .sg-gal-slide { width: min(86vw, 640px); }
  .sg-pv-map { aspect-ratio: 16 / 9; }
}
@media only screen and (max-width: 767.98px) {
  .sg-pv-hero { padding-top: 96px; min-height: clamp(480px, 88vh, 680px); }
  .sg-pv-ghost { top: 96px; }
  .sg-pv-rail-cta { display: none; }
  .sg-pv-bar-name { display: none; }
  .sg-pv-next-in { padding-right: clamp(70px, 20vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-pv-bar, .sg-pv-next img, .sg-gal-slide img, .sg-pv-next-arrow, .sg-gal-btn { transition: none; }
  .sg-pv-next:hover img, .sg-gal-slide a:hover img { transform: none; }
}


/*----------------------------------------*/
/*  Hero lockup: hold the entrance until the preloader lifts
/*  (the preloader covers the page for >=3s; unpaused, the whole
/*   sequence would finish behind it and never be seen)
/*----------------------------------------*/
.sg-hero-logo,
.sg-hero-claim::before,
.sg-hero-line i {
  animation-play-state: paused;
}
html.sg-anim .sg-hero-logo,
html.sg-anim .sg-hero-claim::before,
html.sg-anim .sg-hero-line i {
  animation-play-state: running;
}


/*----------------------------------------*/
/*  Hero lockup v2: the logo constructs itself
/*  bars stack like floors, tower rises, waves roll in,
/*  letters pop, tagline types, rule draws, claim swings up,
/*  then a light sweep glints across the finished mark
/*----------------------------------------*/
/* retire the v1 whole-block animation */
.sg-hero-logo { opacity: 1; transform: none; animation: none; }
.sg-hero-claim::before { animation: none; }
.sg-hero-line i { animation: none; }

/* the inlined svg keeps its export classes; scope their fills here */
.sg-hero-logo .cls-1 { fill: var(--tp-secoundery-color); }
.sg-hero-logo .cls-2 { fill: #fff; }

/* pre-reveal states */
.sgl-tower, .sgl-bar, .sgl-ltr, .sgl-wave, .sg-hero-logo .sgl-tag {
  transform-box: fill-box;
}
.sgl-tower { opacity: 0; transform: translateY(24px); }
.sgl-bar { opacity: 0; transform: scaleX(0); transform-origin: left center; }
.sgl-wave { opacity: 0; transform: translateX(-28px); }
.sgl-ltr { opacity: 0; transform: translateY(16px) scale(0.7); transform-origin: center bottom; }
.sg-hero-logo .sgl-tag { opacity: 0; transform: translateY(6px); }
.sg-hero-line i { transform: translateY(115%) rotate(5deg); transform-origin: left bottom; }
html[lang="ar"] .sg-hero-line i { transform-origin: right bottom; }
.sg-hero-lockup { position: relative; overflow: hidden; }
.sg-hero-lockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}

/* choreography - released by the preloader watcher via html.sg-anim */
html.sg-anim .sgl-tower { animation: sglRise 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; }
html.sg-anim .sgl-bar { animation: sglBeam 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.2s + var(--i, 0) * 0.07s) both; }
html.sg-anim .sgl-wave {
  animation:
    sglWave 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.15s + var(--i, 0) * 0.14s) both,
    sglBob 5s ease-in-out calc(3s + var(--i, 0) * 0.7s) infinite alternate;
}
html.sg-anim .sgl-ltr { animation: sglPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--i, 0) * 0.06s) both; }
html.sg-anim .sg-hero-logo .sgl-tag { animation: sglType 0.35s ease-out calc(1s + var(--i, 0) * 0.022s) both; }
html.sg-anim .sg-hero-claim::before { animation: sgRuleIn 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1.35s both; }
html.sg-anim .sg-hero-line:nth-child(1) i { animation: sglLine 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s both; }
html.sg-anim .sg-hero-line:nth-child(2) i { animation: sglLine 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 1.66s both; }
html.sg-anim .sg-hero-lockup::after { animation: sglSweep 0.9s ease-in-out 2.3s both; }
/* the hero photo settles from a slow zoom while the mark builds */
html.sg-anim .sg-hero .tp-hero-video-bg img { animation: sglKen 6.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes sglRise { to { opacity: 1; transform: translateY(0); } }
@keyframes sglBeam { to { opacity: 1; transform: scaleX(1); } }
@keyframes sglWave { to { opacity: 1; transform: translateX(0); } }
@keyframes sglBob { from { transform: translateX(0); } to { transform: translateX(5px); } }
@keyframes sglPop { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sglType { to { opacity: 1; transform: translateY(0); } }
@keyframes sglLine { to { transform: translateY(0) rotate(0deg); } }
@keyframes sglSweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes sglKen { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .sgl-tower, .sgl-bar, .sgl-wave, .sgl-ltr, .sg-hero-logo .sgl-tag {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .sg-hero-line i { transform: none; animation: none !important; }
  .sg-hero-claim::before { transform: scaleX(1); animation: none !important; }
  .sg-hero-lockup::after { display: none; }
  html.sg-anim .sg-hero .tp-hero-video-bg img { animation: none; }
}


/*----------------------------------------*/
/*  Scroll reveal system (sg-rv)
/*  JS tags targets with .sg-rv + a direction variant and a
/*  per-group stagger delay (--d); an IntersectionObserver adds
/*  .is-in as each enters the viewport. Without JS nothing is
/*  tagged, so content stays visible.
/*----------------------------------------*/
.sg-rv {
  transition:
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    clip-path 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
  transition-delay: var(--d, 0s);
  will-change: transform, clip-path;
}
.sg-rv.is-in { transform: none; clip-path: inset(0 -20% -20% -20%); opacity: 1; }

/* wipe — text grows up past a baseline, no fade */
.sg-rv--wipe {
  clip-path: inset(0 0 108% 0);
  transform: translateY(18px);
}
/* unveil — media revealed by a curtain sweeping across, settling out of a zoom */
.sg-rv--unveil {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
}
.sg-rv--unveil.is-in { clip-path: inset(0 0 0 0); }
/* split — panel opens from its centre line outward */
.sg-rv--split {
  clip-path: inset(0 50% 0 50%);
  transform: translateY(12px);
}
.sg-rv--split.is-in { clip-path: inset(0 0 0 0); }
/* swing — card hinges up into place on its bottom edge */
.sg-rv--swing {
  transform: perspective(1100px) rotateX(-22deg) translateY(38px);
  transform-origin: 50% 100%;
  opacity: 0;
}
/* shear — row slides in skewed, then straightens */
.sg-rv--shear {
  clip-path: inset(0 0 100% 0);
  transform: translateY(26px) skewY(2.6deg);
}
/* rise — plain lift for anything that must not be clipped */
.sg-rv--rise { transform: translateY(38px); opacity: 0; }

@media only screen and (max-width: 767.98px) {
  /* flatten the 3d hinge on small screens, it reads as a wobble at this width */
  .sg-rv--swing { transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-rv {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/*----------------------------------------*/
/*  Projects listing page (sg-pl)
/*----------------------------------------*/
.sg-pl { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 36px); }
.sg-pl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: clamp(320px, 34vw, 460px);
  border-radius: var(--sg-radius);
  overflow: hidden;
  border: 1px solid var(--sg-line);
  background: #fff;
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.sg-pl-row:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 136, 37, 0.5);
  box-shadow: 0 28px 60px rgba(16, 54, 91, 0.14);
}
.sg-pl-row.is-flip .sg-pl-media { order: 2; }
.sg-pl-row.is-flip .sg-pl-body { order: 1; }
.sg-pl-media { position: relative; overflow: hidden; min-height: 260px; background: var(--tp-gray-color); }
.sg-pl-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.sg-pl-row:hover .sg-pl-media img { transform: scale(1.06); }
.sg-pl-row.is-sold .sg-pl-media img { filter: grayscale(0.5) brightness(0.94); }
.sg-pl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 37, 64, 0.35) 0%, rgba(11, 37, 64, 0) 40%, rgba(11, 37, 64, 0.45) 100%);
  pointer-events: none;
}
.sg-pl-num {
  position: absolute;
  left: clamp(14px, 1.6vw, 24px);
  bottom: clamp(10px, 1.4vw, 18px);
  z-index: 2;
  font-size: clamp(44px, 5vw, 84px);
  font-weight: 800;
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}
.sg-pl-media .sg-pill { position: absolute; top: 14px; right: 14px; z-index: 2; }
.sg-pl-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 52px);
}
.sg-pl-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  color: var(--sg-ink);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sg-pl-name small { font-size: clamp(14px, 1.5vw, 19px); font-weight: 600; color: var(--sg-amber); }
.sg-pl-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--sg-mute);
  font-size: 14px;
  font-weight: 600;
}
.sg-pl-loc svg { width: 16px; height: 16px; color: var(--sg-amber); flex-shrink: 0; }
.sg-pl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(16px, 1.8vw, 24px) 0; }
.sg-pl-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--tp-gray-color);
}
.sg-pl-chip i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8492a0;
}
.sg-pl-chip b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sg-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.sg-pl-chip.is-sold b { color: #c81e2c; }
.sg-pl-blurb {
  margin: 0 0 clamp(18px, 2vw, 26px);
  color: var(--sg-mute);
  font-size: 15px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-pl-btn { pointer-events: none; }
.sg-pl-row:hover .sg-pl-btn { background: var(--sg-ink); color: #fff; gap: 14px; }
@media only screen and (max-width: 991.98px) {
  .sg-pl-row { grid-template-columns: 1fr; min-height: 0; }
  .sg-pl-row.is-flip .sg-pl-media { order: 0; }
  .sg-pl-row.is-flip .sg-pl-body { order: 0; }
  .sg-pl-media { min-height: clamp(220px, 44vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-pl-row, .sg-pl-media img { transition: none; }
  .sg-pl-row:hover { transform: none; }
  .sg-pl-row:hover .sg-pl-media img { transform: none; }
}


/* on narrow screens a sideways pre-reveal offset can push a full-width block
   past the viewport edge, so reveal everything vertically instead */
@media only screen and (max-width: 767.98px) {
  .sg-rv--left,
  .sg-rv--right { transform: translateY(32px); }
}
/* the active language is not a destination - keep it inert */
.sg-lang-opt[aria-current="true"] { pointer-events: none; }
/* arabic-rania renders smaller than the latin face, so small labels need a bump */
html[lang="ar"] .sg-eyebrow { font-size: clamp(12.5px, 1.15vw, 13.5px); letter-spacing: 0.12em; }
html[lang="ar"] .sg-rail-k,
html[lang="ar"] .sg-pv-spec-k,
html[lang="ar"] .sg-pl-chip i,
html[lang="ar"] .sg-ft-k { font-size: 12.5px; letter-spacing: 0.06em; }

/* ============================================================================
   Sold-out projects
   A half-grey photo and a small corner pill were too easy to miss in the
   carousel. The card now reads as unavailable before you read a word of it:
   the photo drains, the whole card cools down, and the status becomes a solid
   band across the foot of the image rather than a pill in the corner.
   ========================================================================== */

/* the card itself steps back */
.sg-project.is-sold {
  background: #f4f6f8;
  border-color: rgba(16, 54, 91, 0.14);
  box-shadow: 0 6px 20px rgba(16, 54, 91, 0.04);
}
.sg-project.is-sold:hover {
  border-color: rgba(16, 54, 91, 0.22);
  box-shadow: 0 18px 40px rgba(16, 54, 91, 0.1);
}

/* photo drains and darkens; no zoom or warm wash, those read as "come in" */
.sg-project.is-sold .sg-project-media img {
  filter: grayscale(1) brightness(0.78) contrast(1.06);
}
.sg-project.is-sold:hover .sg-project-media img { transform: none; }
.sg-project.is-sold:hover .sg-project-media::after { opacity: 0; }
.sg-project.is-sold .sg-project-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(16, 54, 91, 0.3);
  pointer-events: none;
}
/* the number and the type pill stop competing with the band */
.sg-project.is-sold .sg-project-index { color: rgba(255, 255, 255, 0.62); }
.sg-project.is-sold .sg-project-tag { background: rgba(255, 255, 255, 0.8); opacity: 0.85; }

/* the status pill becomes a band across the foot of the photo */
.sg-project.is-sold .sg-project-state {
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: #c81e2c;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.11) 0 10px,
    rgba(0, 0, 0, 0) 10px 20px
  );
  backdrop-filter: none;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 -8px 22px rgba(200, 30, 44, 0.28);
}
.sg-project.is-sold .sg-project-state::before {
  width: 9px;
  height: 9px;
  background: #fff;
  box-shadow: none;
  flex-shrink: 0;
}

/* name and body cool down so available cards lead the eye */
.sg-project.is-sold .sg-project-name { color: #64748b; }
.sg-project.is-sold:hover .sg-project-name { color: #475569; }
.sg-project.is-sold .sg-project-desc { color: #7b8794; }
.sg-project.is-sold .sg-project-soldout {
  color: #c81e2c;
  font-weight: 800;
}

/* same treatment on the projects listing so the two pages agree */
.sg-pl-row.is-sold { opacity: 0.94; }
.sg-pl-row.is-sold .sg-pl-media img {
  filter: grayscale(1) brightness(0.8) contrast(1.05);
}
.sg-pl-row.is-sold .sg-pl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 54, 91, 0.26);
  pointer-events: none;
}
.sg-pl-row.is-sold .sg-pill--sold {
  background: #c81e2c;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.11) 0 9px,
    rgba(0, 0, 0, 0) 9px 18px
  );
  color: #fff;
  border-color: transparent;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(200, 30, 44, 0.3);
}
.sg-pl-row.is-sold .sg-pl-name { color: #64748b; }

@media (prefers-reduced-motion: reduce) {
  .sg-project.is-sold .sg-project-media img { transition: none; }
}
/* ── Home "about": picture without the video panel ─────────────────────────── */
/* The block used to hold the photo beside a play button, and was pulled 270px
   left so the pair spanned wider than the column. With the video gone the photo
   stands on its own, so the pull goes too and the picture fills its half. */
.tp-about-video {
  margin-left: 0;
  background-color: transparent;
}
.tp-about-thumb {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.tp-about-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tp-about-video { margin-left: 0; }
}

/*----------------------------------------*/
/*  Hero enquiry card + floating contact   */
/*----------------------------------------*/
/* The hero is now two columns: the lockup and counters on one side, a short
   enquiry form on the other. Below 992px it stacks, form last, so the headline
   still leads on a phone. */
.sg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .sg-hero-grid {
    /* The lockup leads; the form is the supporting element, so it takes the
       smaller share rather than an even split. */
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
    gap: clamp(36px, 4.5vw, 80px);
  }
}
.sg-hero-main { min-width: 0; }

/* Counters sit in the flow under the headline as compact glass chips rather
   than the theme's large boxed cards, so the headline keeps the weight. */
.sg-hero-stats {
  display: flex;
  /* nowrap on purpose: with wrapping enabled flexbox breaks the pair onto a
     second line before it ever shrinks them, so the counters stacked on every
     laptop width. Held on one line here and allowed to compress instead. */
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 34px);
}
@media only screen and (max-width: 767.98px) {
  /* Still one line on phones, but the pair now shares the width evenly rather
     than holding a 300px basis it has no room for. */
  .sg-hero-stats { gap: 10px; }
  .sg-hero .sg-hero-stats .tpfunfect2 { flex: 1 1 0; padding: 12px 14px; }
  .sg-hero .sg-hero-stats .tpfunfect2 p { font-size: 11.5px; }
}
.sg-hero .sg-hero-stats .tpfunfect2 {
  /* The theme floors these at min-width:308px, which makes the pair wrap to a
     second row as soon as the column narrows (anything under ~1400px). Aim for
     the same generous width but allow shrinking, so they stay on one line all
     the way down instead of stacking. */
  flex: 0 1 300px;
  min-width: 0;
  padding: 13px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sg-hero .sg-hero-stats .tpfunfect2__num {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  /* Figures always read left-to-right. Without this the Arabic page inherits
     rtl into the counter and prints 40 as 04. */
  direction: ltr;
}
.sg-hero .sg-hero-stats .tpfunfect2__num-div { font-size: 0.55em; line-height: 1; }
.sg-hero .sg-hero-stats .tpfunfect2 p {
  margin-top: 5px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  opacity: 0.88;
}

/* ── The card ────────────────────────────────────────────────────────────── */
.sg-hf { min-width: 0; }
.sg-hf-card {
  position: relative;
  padding: clamp(20px, 1.9vw, 26px);
  border-radius: clamp(18px, 1.8vw, 26px);
  /* Frosted glass: a light, heavily blurred and saturated pane rather than a
     near-solid panel, so the photograph still reads through it. The hairline
     top highlight is what gives the edge its lit look. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 20px 50px -20px rgba(8, 28, 48, 0.42),
    0 2px 10px rgba(8, 28, 48, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
/* Browsers without backdrop-filter would show the text on bare photograph, so
   they get a solid panel instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sg-hf-card { background: rgba(255, 255, 255, 0.93); }
}
.sg-hf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #b96d14;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sg-hf-eyebrow svg { width: 14px; height: 14px; }
.sg-hf-title {
  margin: 0 0 clamp(12px, 1.4vw, 17px);
  color: var(--sg-ink);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.sg-hf-title em { font-style: normal; color: var(--sg-amber); }

.sg-hf-f { margin-bottom: 10px; }
.sg-hf-f label {
  display: block;
  margin-bottom: 5px;
  /* Darker than the body muted tone: on a translucent pane over a bright sky
     the old grey lost too much contrast. */
  color: #3d5063;
  font-size: 12.5px;
  font-weight: 600;
}
.sg-hf-f label i { color: var(--sg-amber); font-style: normal; }
.sg-hf-f input,
.sg-hf-f textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(16, 54, 91, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--sg-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.sg-hf-f textarea { resize: vertical; min-height: 54px; }
.sg-hf-f input::placeholder,
.sg-hf-f textarea::placeholder { color: rgba(16, 54, 91, 0.38); }
.sg-hf-f input:hover,
.sg-hf-f textarea:hover { background: rgba(255, 255, 255, 0.85); }
.sg-hf-f input:focus,
.sg-hf-f textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--sg-amber);
  box-shadow: 0 0 0 3px rgba(225, 136, 37, 0.18);
}
.sg-hf-f input.is-bad,
.sg-hf-f textarea.is-bad { border-color: #d0342c; box-shadow: 0 0 0 3px rgba(208, 52, 44, 0.12); }

.sg-hf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 12px 18px;
  border: 0;
  border-radius: 11px;
  background: var(--sg-amber);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  /* Flat by intent: the hover is a colour change, not a lift and a glow. */
  transition: background-color 0.18s ease, color 0.18s ease;
}
.sg-hf-submit svg { width: 18px; height: 18px; }
.sg-hf-submit:hover,
.sg-hf-submit:focus-visible { background: var(--sg-ink); color: #fff; }
.sg-hf-submit:focus-visible { outline: 2px solid var(--sg-amber); outline-offset: 2px; }
.sg-hf-note {
  margin: 9px 0 0;
  color: #52627256;
  color: rgba(61, 80, 99, 0.78);
  font-size: 11.5px;
  line-height: 1.55;
}
.sg-hf-alert {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(208, 52, 44, 0.1);
  border: 1px solid rgba(208, 52, 44, 0.24);
  color: #a52820;
  font-size: 13px;
  line-height: 1.5;
}

/* The hero needs more height now that it holds a form. */
.sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
  min-height: 660px;
  padding-top: clamp(60px, 6vw, 96px);
  padding-bottom: clamp(48px, 5vw, 76px);
}
@media only screen and (max-width: 991px) {
  .sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short { min-height: 0; padding-bottom: 44px; }
}

/* ── Floating contact buttons ────────────────────────────────────────────── */
/* Fixed bottom-right on every page, in both reading directions - a call
   affordance is a physical convention here, not a directional one. */
.sg-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-fab a {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  /* No background or border-radius here: each icon supplies its own shape and
     colour, and the WhatsApp mark is a bubble with a tail rather than a disc.
     drop-shadow follows the artwork's alpha, so it hugs the real outline where
     a box-shadow would draw a circle behind it. */
  filter: drop-shadow(0 8px 16px rgba(8, 28, 48, 0.34));
  transition: transform 0.16s ease, filter 0.16s ease;
}
.sg-fab a img { width: 100%; height: 100%; display: block; }
.sg-fab a:hover {
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 12px 22px rgba(8, 28, 48, 0.44));
}
.sg-fab a:active { transform: translateY(-1px) scale(1.02); }
.sg-fab a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
.sg-fab a::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(12, 32, 52, 0.92);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.sg-fab a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
/* The tooltip flips to the other side of the button in Arabic. */
[dir="rtl"] .sg-fab a::after {
  right: auto;
  left: calc(100% + 10px);
  transform: translateY(-50%) translateX(-6px);
}
[dir="rtl"] .sg-fab a:hover::after { transform: translateY(-50%) translateX(0); }

@media only screen and (max-width: 767px) {
  .sg-fab { right: 14px; bottom: 14px; gap: 10px; }
  .sg-fab a { width: 50px; height: 50px; }
  /* No hover on touch, so the labels only take up room. */
  .sg-fab a::after { display: none; }
}

/* Keep the back-to-top button clear of the floating pair. */
.back-to-top-wrapper { right: 92px; }
@media only screen and (max-width: 767px) {
  .back-to-top-wrapper { right: 74px; }
}

/*----------------------------------------*/
/*  Testimonials (home)                    */
/*----------------------------------------*/
/* Deep navy between the white projects section and the grey video reel, so
   the three read as distinct bands rather than one long scroll. */
.sg-tm {
  position: relative;
  padding: clamp(60px, 8vw, 130px) 0;
  background: var(--sg-ink-2);
  overflow: hidden;
}
.sg-tm-glow {
  position: absolute;
  top: -20%;
  right: -160px;
  width: min(560px, 60vw);
  height: min(560px, 60vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 136, 37, 0.18), transparent 68%);
  pointer-events: none;
}
.sg-tm-container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}
.sg-tm-head { text-align: center; margin-bottom: clamp(34px, 4.5vw, 64px); }
.sg-tm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sg-tm-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sg-amber);
  box-shadow: 0 0 0 4px rgba(225, 136, 37, 0.18);
}
.sg-tm-heading {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
}
.sg-tm-heading em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--sg-amber);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.sg-tm-slider { overflow: hidden; }
.sg-tm-list { align-items: stretch; }
.sg-tm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  margin: 0;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.sg-tm-card:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(225, 136, 37, 0.4);
  transform: translateY(-4px);
}
/* Oversized closing quote, sunk behind the text. */
.sg-tm-mark {
  position: absolute;
  top: clamp(6px, 1vw, 14px);
  right: clamp(18px, 2vw, 30px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(72px, 8vw, 118px);
  line-height: 1;
  color: rgba(225, 136, 37, 0.16);
  pointer-events: none;
  user-select: none;
}
.sg-tm-stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--sg-amber); }
.sg-tm-stars svg { width: 16px; height: 16px; }
.sg-tm-quote {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.85;
}
.sg-tm-by {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sg-tm-av {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sg-amber), #c9741d);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.sg-tm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-tm-id { display: flex; flex-direction: column; min-width: 0; }
.sg-tm-name { color: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.sg-tm-role { margin-top: 2px; color: rgba(255, 255, 255, 0.5); font-size: 12.5px; line-height: 1.4; }

/* ── Controls ────────────────────────────────────────────────────────────── */
.sg-tm-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(28px, 3.5vw, 46px);
}
.sg-tm-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.sg-tm-nav svg { width: 17px; height: 17px; }
.sg-tm-nav:hover {
  background: var(--sg-amber);
  border-color: var(--sg-amber);
  transform: translateY(-2px);
}
.sg-tm-dots { display: flex; align-items: center; gap: 8px; }
.sg-tm-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
  margin: 0 !important;
  transition: width 0.22s ease, background 0.22s ease;
}
.sg-tm-dots .swiper-pagination-bullet-active { width: 26px; background: var(--sg-amber); }

@media only screen and (max-width: 575px) {
  .sg-tm-card { padding: 24px 20px; }
  .sg-tm-quote { font-size: 15px; line-height: 1.8; }
}

/* When every quote already fits on screen Swiper marks the controls "lock".
   Hide them rather than leaving a dead arrow pair and a single inert dot. */
.sg-tm-nav.swiper-button-lock,
.sg-tm-dots.swiper-pagination-lock { display: none; }
.sg-tm-controls:has(> .swiper-button-lock) { display: none; }

/* ── Short viewports ─────────────────────────────────────────────────────── */
/* The hero was sized against width only, so on a laptop panel (1366x768 and
   friends) it ran past the fold and cut the send button off the enquiry card.
   Below ~860px tall everything tightens just enough for the whole card, the
   counters and the headline to sit on the first screen. */
@media only screen and (min-width: 992px) and (max-height: 860px) {
  .sg-hero .tp-hero-spacing-3.tp-hero-spacing-3-short {
    min-height: 0;
    padding-top: clamp(38px, 5vh, 68px);
    padding-bottom: clamp(30px, 4.5vh, 60px);
  }
  .sg-hero-grid { gap: clamp(28px, 3.5vw, 56px); }
  .sg-hero-claim { font-size: clamp(24px, 3vw, 42px); }
  .sg-hero-stats { margin-top: clamp(16px, 2vh, 24px); }
  .sg-hero .sg-hero-stats .tpfunfect2 { padding: 10px 18px; }
  .sg-hero .sg-hero-stats .tpfunfect2__num { font-size: clamp(23px, 2vw, 29px); }

  .sg-hf-card { padding: clamp(18px, 1.8vw, 24px); }
  .sg-hf-title { margin-bottom: 12px; font-size: clamp(19px, 1.7vw, 23px); }
  .sg-hf-eyebrow { margin-bottom: 6px; }
  .sg-hf-f { margin-bottom: 9px; }
  .sg-hf-f input, .sg-hf-f textarea { padding: 9px 13px; font-size: 14px; }
  .sg-hf-f textarea { min-height: 44px; }
  .sg-hf-submit { padding: 11px 18px; }
  .sg-hf-note { margin-top: 7px; }
}
/* Very short panels (720p laptops) shed the logo lockup's scale as well. */
@media only screen and (min-width: 992px) and (max-height: 740px) {
  .sg-hero-lockup { max-width: min(500px, 100%); }
  .sg-hero-claim { font-size: clamp(22px, 2.6vw, 36px); }
}

/*----------------------------------------*/
/*  Header nav — rolling text hover        */
/*----------------------------------------*/
/* Ported verbatim from the TOURvex template (assets/css/style.css, "rolling
   text"). The label is split into per-letter spans and duplicated; on hover
   both copies slide up by one line, so the duplicate rolls into the window.
   Only the delay chain and the two colour hooks below are site-specific. */
.rolling-text {
  display: inline-block;
  overflow: hidden;
  line-height: 50px;
  height: 50px;
}
.rolling-text.butn { padding: 0 35px; }
.social-text .rolling-text { line-height: 30px; height: 30px; }
.rolling-text:hover .letter,
.rolling-text.play .letter {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
.rolling-text .letter {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
/* Stagger: 0.015s per letter, exactly as the template ships it. Scoped to
   .rolling-text rather than left bare, so a stray .letter elsewhere is safe. */
.rolling-text .letter:nth-child(1)  { transition-delay: 0s; }
.rolling-text .letter:nth-child(2)  { transition-delay: 0.015s; }
.rolling-text .letter:nth-child(3)  { transition-delay: 0.03s; }
.rolling-text .letter:nth-child(4)  { transition-delay: 0.045s; }
.rolling-text .letter:nth-child(5)  { transition-delay: 0.06s; }
.rolling-text .letter:nth-child(6)  { transition-delay: 0.075s; }
.rolling-text .letter:nth-child(7)  { transition-delay: 0.09s; }
.rolling-text .letter:nth-child(8)  { transition-delay: 0.105s; }
.rolling-text .letter:nth-child(9)  { transition-delay: 0.12s; }
.rolling-text .letter:nth-child(10) { transition-delay: 0.135s; }
.rolling-text .letter:nth-child(11) { transition-delay: 0.15s; }
.rolling-text .letter:nth-child(12) { transition-delay: 0.165s; }
.rolling-text .letter:nth-child(13) { transition-delay: 0.18s; }
.rolling-text .letter:nth-child(14) { transition-delay: 0.195s; }
.rolling-text .letter:nth-child(15) { transition-delay: 0.21s; }
.rolling-text .letter:nth-child(16) { transition-delay: 0.225s; }
.rolling-text .letter:nth-child(17) { transition-delay: 0.24s; }
.rolling-text .letter:nth-child(18) { transition-delay: 0.255s; }
.rolling-text .letter:nth-child(19) { transition-delay: 0.27s; }
.rolling-text .letter:nth-child(20) { transition-delay: 0.285s; }
.rolling-text .letter:nth-child(21) { transition-delay: 0.3s; }

/* The template sizes the nav copy of the effect down to a 30px window. */
.tp-header-menu ul li a .rolling-text {
  height: 30px;
  line-height: 30px;
}
/* The roll replaces the underline sweep this theme used to draw on hover. */
.tp-header-menu ul li > a::before { display: none; }
.tp-header-menu ul li > a:hover { color: var(--tp-secoundery-color); }

/*----------------------------------------*/
/*  About 2 (home) — ported from TOURvex   */
/*----------------------------------------*/
/* Rules copied from the template's assets/css/style.css: "About2 style", plus
   the section/customers/butn-arrow/rotate/background-text pieces the block
   depends on. Geometry, timings and easings are unchanged.

   The template's colour roles map onto this site's palette as follows, so the
   section reads as Sea Gate rather than as the travel demo:
     --clr-primary  #2095AE (teal)   ->  var(--sg-amber)  #e18825
     --clr-heading  #0f2454 (navy)   ->  var(--sg-ink)    #10365b
     --clr-bg-light #f4f5f8          ->  var(--tp-gray-color)
   Everything else is verbatim. */
.about2-scope,
.about2 {
  --a2-primary: var(--sg-amber);
  --a2-heading: var(--sg-ink);
  --a2-bg-light: var(--tp-gray-color);
  --a2-white: #fff;
}

.about2 {
  position: relative;
  z-index: 1;
}
.about2 .container { z-index: 2; }
.about2 .about2-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.about2 .about2-img .main-img {
  width: 100%;
  height: 450px !important;
  overflow: hidden;
  border-radius: 40px;
}
.about2 .about2-img .main-img:nth-child(1) { margin-top: 90px; }
.about2 .listo {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 15px 0;
  padding-left: 0;
  list-style: none;
}
.about2 .listo li {
  font-size: 17px;
  font-weight: 500;
  color: var(--a2-heading);
  display: flex;
  align-items: center;
  gap: 15px;
}
.about2 .listo li i {
  width: 45px;
  height: 45px;
  background: var(--a2-bg-light);
  display: inline-flex;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--a2-primary);
  flex: 0 0 auto;
  transition: 600ms ease;
}
.about2 .listo li:hover i { transform: rotate(360deg) scale(1.3); }
.about2 .img-cover img,
.img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .about2 .about2-img { grid-template-columns: 1fr; }
  .about2 .about2-img .main-img { height: 300px !important; }
  .about2 .about2-img .main-img:nth-child(1) { margin-top: 0; }
  .about2 .listo { grid-template-columns: 1fr; }
}
.about2 .about2-img { margin-bottom: 10px; }
.about2 .main-img {
  overflow: hidden;
  border-radius: 40px;
  margin-top: 20px;
}

/* ── Section furniture the block uses ─────────────────────────────────────── */
.about2.section-padding { padding: 120px 0; }
.about2.bg-white { background: var(--a2-white); }
.about2 .section-subtitle {
  position: relative;
  margin-bottom: 0;
  color: var(--a2-primary);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.about2 .section-title {
  font-size: 60px;
  line-height: 1em;
  font-weight: 500;
  color: var(--a2-heading);
  margin-bottom: 15px;
  letter-spacing: -2px;
}
.about2 .section-title span:not(.rotate-text),
.about2 .section-title i {
  color: var(--a2-primary);
  font-style: normal;
}
.about2 .section-title .rotate-text { display: block; }
.about2 p {
  margin-bottom: 30px;
  line-height: 1.75;
}

/* ── Customers strip ──────────────────────────────────────────────────────── */
.about2 .customers { gap: 30px; flex-wrap: wrap; }
.about2 .customers .c-img { gap: 10px; }
.about2 .customers .c-img ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.about2 .customers .c-img li {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin-left: -28px;
  border-radius: 100%;
  border: 6px solid var(--a2-white);
  -webkit-box-shadow: 0px 9px 18px 0px rgba(24, 16, 16, 0.0509803922);
          box-shadow: 0px 9px 18px 0px rgba(24, 16, 16, 0.0509803922);
}
.about2 .customers .c-img li:first-child { margin-left: 0; }
.about2 .customers .c-img li img { width: 100%; height: 100%; object-fit: cover; }
.about2 .customers .c-text h3 {
  font-size: 40px;
  font-weight: 400;
  color: var(--a2-primary);
  margin-bottom: 0;
  line-height: 30px;
  margin-top: 2px;
  /* Arabic pages are RTL, but "2860+" is a number and reads left to right. */
  direction: ltr;
}
.about2 .customers .c-text span {
  color: var(--a2-heading);
  font-size: 14px;
}

/* ── Arrow button ─────────────────────────────────────────────────────────── */
.about2 .butn-arrow,
.about2 .butn-arrow * { box-sizing: border-box; }
.about2 .butn-arrow {
  height: 55px;
  padding: 0 10px 0 25px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--a2-primary);
  border-radius: 50px;
  text-decoration: none;
  transition: background .3s ease;
}
.about2 .butn-arrow span.btn-text {
  font-size: 17px;
  font-weight: 400;
  color: var(--a2-white) !important;
  line-height: 1;
  white-space: nowrap;
}
.about2 .butn-arrow .arrow-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.about2 .butn-arrow .arrow-wrap .arrow-inner { position: absolute; inset: 0; }
.about2 .butn-arrow .arrow-wrap .arrow-inner i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--a2-heading);
  transition: transform .35s ease;
}
.about2 .butn-arrow .arrow-wrap .arrow-inner i:first-child { transform: translateY(-100%); }
.about2 .butn-arrow .arrow-wrap .arrow-inner i:last-child { transform: translateY(0); }
.about2 .butn-arrow:hover .arrow-wrap { background: var(--a2-bg-light); }
.about2 .butn-arrow:hover .arrow-wrap .arrow-inner i { color: var(--a2-heading) !important; }
.about2 .butn-arrow:hover .arrow-inner i:first-child { transform: translateY(0); }
.about2 .butn-arrow:hover .arrow-inner i:last-child { transform: translateY(100%); }

/* ── Oversized brand word behind the block ────────────────────────────────── */
.about2 .bg-text-style {
  position: absolute;
  right: 0px;
  bottom: 50px;
  display: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 275px !important;
  line-height: 1;
  background: linear-gradient(to bottom, rgba(16, 54, 91, 0.075) 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: -1;
  pointer-events: none;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .about2 .bg-text-style { display: inline-block; font-size: 180px !important; }
}
@media (min-width: 992px) {
  .about2 .bg-text-style { font-size: 120px !important; }
}

/* ── Title reveal ─────────────────────────────────────────────────────────── */
.about2 .section-title { perspective: 1000px; }
/* The heading is visible by default and only hidden once the script has
   opted in. Starting it at opacity 0 in the stylesheet meant that if the
   reveal never ran - script blocked, observer never firing - the section
   heading simply never appeared. */
.about2.is-reveal .section-title .rotate-text {
  transform-style: preserve-3d;
  transition: all 0.8s;
  transition-delay: 0.5s;
  transform-origin: 50% 0%;
  transform: translate3d(0px, 50px, -50px) rotateX(-45deg) scale(0.95);
  opacity: 0;
}
.about2.is-reveal .section-title.animated .rotate-text {
  transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1);
  opacity: 1;
}
/* Never leave the headline invisible if the reveal script does not run. */
@media (prefers-reduced-motion: reduce) {
  .about2.is-reveal .section-title .rotate-text { transform: none; opacity: 1; transition: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .about2 .section-title { font-size: 46px; }
}
@media (max-width: 991.98px) {
  .about2.section-padding { padding: 80px 0; }
  .about2 .about2-img { margin-bottom: 40px; }
  .about2 .about2-img .main-img { height: 340px !important; }
  .about2 .about2-img .main-img:nth-child(1) { margin-top: 40px; }
}
@media (max-width: 767.98px) {
  .about2.section-padding { padding: 60px 0; }
  .about2 .section-title { font-size: 35px; letter-spacing: -1px; }
  .about2 .customers { gap: 20px; }
}

/*----------------------------------------*/
/*  About 2 — RTL mirror                   */
/*----------------------------------------*/
/* Everything the template writes with a physical side. The template's own RTL
   build leaves these alone, so they are authored here. */
[dir="rtl"] .about2 .listo { padding-left: 0; padding-right: 0; }
[dir="rtl"] .about2 .section-subtitle { letter-spacing: 0; }
[dir="rtl"] .about2 .section-title { letter-spacing: 0; }
[dir="rtl"] .about2 .customers .c-img ul { padding-right: 0; }
[dir="rtl"] .about2 .customers .c-img li { margin-left: 0; margin-right: -28px; }
[dir="rtl"] .about2 .customers .c-img li:first-child { margin-right: 0; }
[dir="rtl"] .about2 .butn-arrow { padding: 0 25px 0 10px; }
[dir="rtl"] .about2 .butn-arrow .arrow-inner i { transform: translateY(-100%) rotate(180deg); }
[dir="rtl"] .about2 .butn-arrow .arrow-inner i:last-child { transform: translateY(0) rotate(180deg); }
[dir="rtl"] .about2 .butn-arrow:hover .arrow-inner i:first-child { transform: translateY(0) rotate(180deg); }
[dir="rtl"] .about2 .butn-arrow:hover .arrow-inner i:last-child { transform: translateY(100%) rotate(180deg); }
[dir="rtl"] .about2 .bg-text-style { right: auto; left: 0; }

/* ── About 2: two corrections to the ported rules ─────────────────────────── */
/* The template drops .listo to one column at 767px, but Bootstrap's col-md
   narrows the copy column at 768px — so between those two widths the two-column
   grid has ~136px per row and the labels spill out. Drop to one column earlier. */
@media (max-width: 991.98px) {
  .about2 .listo { grid-template-columns: 1fr; }
}
/* The template's 60px headline is sized for a short statement. This site's
   headline is around three times that length, so at 60px it ran to six lines and
   left the picture column half empty. 60px stays the ceiling. */
.about2 .section-title { font-size: clamp(24px, 2.55vw, 45px); }
/* Bootstrap keeps col-md side by side from 768px, which leaves this block with a
   ~270px copy column against a full-height picture pair. Stack below 992 instead. */
@media (max-width: 991.98px) {
  .about2 .col-md-6,
  .about2 .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .about2 .offset-md-1 { margin-left: 0; }
}

/*----------------------------------------*/
/*  Pointer                                */
/*----------------------------------------*/
/* Copied from the TOURvex template (assets/css/style.css §cursor). A small dot
   in difference blend mode that swells to 8x and fades over anything clickable. */
.cursor {
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.4s ease, -webkit-transform 0.3s ease;
  z-index: 99999;
}
.cursor-active {
  -webkit-transform: translate(-50%, -50%) scale(8);
      -ms-transform: translate(-50%, -50%) scale(8);
          transform: translate(-50%, -50%) scale(8);
  opacity: .1;
}
/* The template leaves the dot parked at the top-left corner on touch devices,
   where there is no pointer to move it. Hide it there. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/*----------------------------------------*/
/*  Video reel (home)                      */
/*----------------------------------------*/
/* Player with the playlist alongside it, so the block stays roughly the height
   of one 16:9 frame instead of a frame plus a strip underneath. */
.sg-rl {
  position: relative;
  background-color: var(--tp-gray-color);
  padding: clamp(48px, 5.5vw, 88px) 0;
  overflow: hidden;
}
.sg-rl-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}

/* ── Head ─────────────────────────────────────────────────────────────────── */
.sg-rl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.sg-rl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sg-mute);
}
.sg-rl-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sg-amber);
  box-shadow: 0 0 0 4px rgba(225, 136, 37, 0.18);
}
.sg-rl-heading {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.12;
  font-weight: 600;
  color: var(--sg-ink);
}
.sg-rl-heading em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--sg-amber);
}
html[lang="ar"] .sg-rl-heading em {
  font-family: "arabic-rania", Georgia, "Times New Roman", serif;
}
.sg-rl-channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 16px 9px 10px;
  border: 1px solid rgba(16, 54, 91, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--sg-ink);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.25s ease, color 0.25s ease;
}
[dir="rtl"] .sg-rl-channel { padding: 9px 10px 9px 16px; }
.sg-rl-channel:hover { border-color: var(--sg-amber); color: var(--sg-amber); }
.sg-rl-channel-ic {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff0000;
  color: #fff;
}
.sg-rl-channel-ic svg { width: 14px; height: 14px; }

/* ── Stage: player + list ─────────────────────────────────────────────────── */
.sg-rl-stage {
  display: grid;
  gap: clamp(12px, 1.4vw, 22px);
}
@media (min-width: 992px) {
  .sg-rl-stage { grid-template-columns: minmax(0, 1fr) clamp(290px, 25vw, 360px); }
}

.sg-rl-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 1.4vw, 20px);
  overflow: hidden;
  background: var(--sg-ink-2);
  cursor: pointer;
}
.sg-rl-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sg-rl-frame:hover .sg-rl-poster { transform: scale(1.03); }
.sg-rl-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 37, 64, 0.8) 0%, rgba(11, 37, 64, 0.15) 45%, transparent 70%);
  pointer-events: none;
}
.sg-rl-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Once the iframe is in, nothing may sit above it or eat its clicks. */
.sg-rl-frame.is-playing .sg-rl-veil,
.sg-rl-frame.is-playing .sg-rl-play,
.sg-rl-frame.is-playing .sg-rl-cap { display: none; }

.sg-rl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.sg-rl-play-dot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sg-rl-play-dot svg {
  width: 32%;
  height: 32%;
  /* the glyph's mass sits left of centre inside its own box */
  margin-inline-start: 7%;
}
.sg-rl-frame:hover .sg-rl-play-dot,
.sg-rl-play:focus-visible .sg-rl-play-dot {
  background: var(--sg-amber);
  border-color: var(--sg-amber);
  transform: scale(1.05);
}
.sg-rl-cap {
  position: absolute;
  inset-inline: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 1.6vw, 22px);
  z-index: 2;
  pointer-events: none;
}
.sg-rl-title {
  margin: 0;
  max-width: 32ch;
  color: #fff;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 0 2px 16px rgba(11, 37, 64, 0.55);
}

/* ── Playlist ─────────────────────────────────────────────────────────────── */
.sg-rl-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sg-rl-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-ink);
}
.sg-rl-side-n {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--sg-mute);
}
.sg-rl-track {
  /* min-height:0 lets this shrink inside the grid row so it can scroll rather
     than stretching the section to fit every video. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 54, 91, 0.26) transparent;
  overscroll-behavior: contain;
}
.sg-rl-track::-webkit-scrollbar { width: 5px; }
.sg-rl-track::-webkit-scrollbar-thumb { background: rgba(16, 54, 91, 0.24); border-radius: 99px; }

.sg-rl-thumb {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: start;
  cursor: pointer;
  transition: background 0.22s ease;
}
.sg-rl-thumb:hover { background: rgba(16, 54, 91, 0.05); }
.sg-rl-thumb.is-active { background: #fff; }
/* Amber rule marks the one playing. */
.sg-rl-thumb.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--sg-amber);
}
.sg-rl-thumb-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: var(--sg-ink-2);
}
.sg-rl-thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sg-rl-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(11, 37, 64, 0.34);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.sg-rl-thumb-play svg { width: 15px; height: 15px; margin-inline-start: 2px; }
.sg-rl-thumb:hover .sg-rl-thumb-play { opacity: 1; }
.sg-rl-thumb.is-active .sg-rl-thumb-play { opacity: 0; }
.sg-rl-thumb-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sg-ink);
  transition: color 0.2s ease;
}
.sg-rl-thumb:hover .sg-rl-thumb-title,
.sg-rl-thumb.is-active .sg-rl-thumb-title { color: var(--sg-amber); }

/* ── Narrow: list turns into a row under the player ───────────────────────── */
@media (max-width: 991.98px) {
  .sg-rl-track {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .sg-rl-thumb {
    flex: 0 0 auto;
    width: 250px;
    scroll-snap-align: start;
  }
  .sg-rl-thumb.is-active { background: #fff; }
}
@media (max-width: 575.98px) {
  .sg-rl-thumb { width: 210px; grid-template-columns: 84px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-rl-frame:hover .sg-rl-poster { transform: none; }
}

/* ── Testimonials: photographic background ───────────────────────────────── */
/* The photo sits under a navy scrim heavy enough to keep the glass cards and
   the white type readable; .sg-tm keeps its solid navy as the fallback. */
.sg-tm-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sg-tm-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 37, 64, 0.72) 0%, rgba(11, 37, 64, 0.52) 45%, rgba(11, 37, 64, 0.72) 100%),
    radial-gradient(95% 75% at 50% 40%, rgba(11, 37, 64, 0.05) 0%, rgba(11, 37, 64, 0.3) 100%);
}
/* The glow used to sit on flat navy; over a photo it needs to be gentler. */
.sg-tm-glow { z-index: 1; opacity: 0.75; }


/*----------------------------------------*/
/*  Tajawal (self-hosted)                  */
/*----------------------------------------*/
/* Downloaded from Google Fonts and served from this site, the way every other
   font here is. Nothing on the front end calls out to an external host. */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/tajawal-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/tajawal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-800-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Only the Arabic About paragraph on the home page uses it. Tajawal runs a
   little smaller than the site face at the same px size, so it is nudged up. */
html[lang="ar"] .about2 p {
  font-family: "Tajawal", "arabic-rania", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}
/* The tick list uses the same face as the paragraph, at bold. */
html[lang="ar"] .about2 .listo li {
  font-family: "Tajawal", "arabic-rania", sans-serif;
  font-size: 16px;
  font-weight: 800;
}


/*----------------------------------------*/
/*  Founder's word (home)                  */
/*----------------------------------------*/
/* A short band between the About block and the projects. Deliberately compact:
   one card, one portrait, a few lines. */
.sg-fw {
  position: relative;
  padding: clamp(44px, 5vw, 78px) 0;
  background: var(--tp-gray-color);
}
.sg-fw-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 70px);
}
.sg-fw-card {
  display: grid;
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
  margin: 0;
  padding: clamp(22px, 2.6vw, 40px);
  border-radius: var(--sg-radius);
  background: #fff;
  box-shadow: 0 26px 60px -44px rgba(11, 37, 64, 0.45);
}
@media (min-width: 768px) {
  .sg-fw-card { grid-template-columns: clamp(190px, 20vw, 250px) minmax(0, 1fr); }
}

/* ── Portrait ─────────────────────────────────────────────────────────────── */
/* The source is a cut-out on transparency, so the figure stands on the disc
   rather than being boxed in a frame. */
.sg-fw-portrait {
  position: relative;
  align-self: end;
  aspect-ratio: 1 / 1;
}
.sg-fw-disc {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sg-ink) 0%, var(--sg-ink-2) 100%);
}
/* thin amber arc, picked up from the brand accent; outside the clip */
.sg-fw-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--sg-amber);
  opacity: 0.5;
  pointer-events: none;
}
.sg-fw-disc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* ── Words ────────────────────────────────────────────────────────────────── */
.sg-fw-body { position: relative; min-width: 0; }
.sg-fw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sg-amber);
}
.sg-fw-kicker-rule {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.sg-fw-mark {
  position: absolute;
  top: -18px;
  inset-inline-end: 0;
  font-size: clamp(80px, 8vw, 128px);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--sg-amber);
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}
.sg-fw-quote { margin: 0; }
.sg-fw-quote p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.75;
  font-weight: 500;
  color: var(--sg-ink);
}
html[lang="ar"] .sg-fw-quote p {
  font-family: "Tajawal", "arabic-rania", sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.9;
}
.sg-fw-by {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: clamp(16px, 1.8vw, 24px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid rgba(16, 54, 91, 0.12);
}
.sg-fw-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--sg-ink);
}
html[lang="ar"] .sg-fw-name { font-family: "Tajawal", "arabic-rania", sans-serif; }
.sg-fw-role {
  font-size: 13px;
  color: var(--sg-mute);
}

@media (max-width: 767.98px) {
  /* An explicit width, not max-width + auto margins: the disc inside is
     absolutely positioned, so with auto margins the item resolves to
     fit-content, which is zero, and the portrait disappears. */
  .sg-fw-portrait { width: min(190px, 55vw); margin-inline: auto; }
  .sg-fw-mark { display: none; }
}

/*----------------------------------------*/
/*  Project gallery — mosaic               */
/*----------------------------------------*/
/* One large frame beside a two-by-two block, the way a property listing shows
   its photos. Replaces the carousel that used to sit here. */
.sg-mos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  aspect-ratio: 16 / 6.4;
  border-radius: var(--sg-radius);
  overflow: hidden;
}
.sg-mos-t {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sg-ink-2);
}
.sg-mos-lead { grid-row: span 2; }
.sg-mos-t img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sg-mos-t:hover img { transform: scale(1.045); }
/* The overflow photos stay in the document for the lightbox, out of the grid. */
.sg-mos-rest { display: none; }

/* "Show all" sits on the last visible tile and opens the same lightbox. */
.sg-mos-more {
  position: absolute;
  inset-inline-end: clamp(10px, 1.2vw, 18px);
  bottom: clamp(10px, 1.2vw, 18px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--sg-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(11, 37, 64, 0.2);
  transition: background 0.25s ease, color 0.25s ease;
}
.sg-mos-more svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sg-mos-t:hover .sg-mos-more { background: var(--sg-amber); color: #fff; }

@media (max-width: 899.98px) {
  .sg-mos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .sg-mos-lead { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .sg-mos-t:not(.sg-mos-lead) { aspect-ratio: 4 / 3; }
}
@media (max-width: 479.98px) {
  .sg-mos { gap: 7px; }
  .sg-mos-more { padding: 8px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-mos-t:hover img { transform: none; }
}
/* A project with fewer than five photos would leave a hole in the five-cell
   mosaic, so the grid adapts to how many there actually are. */
.sg-mos[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 8; }
.sg-mos[data-n="1"] .sg-mos-lead { grid-row: auto; }
.sg-mos[data-n="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 6; }
.sg-mos[data-n="2"] .sg-mos-lead { grid-row: auto; }
.sg-mos[data-n="3"] { grid-template-columns: 2fr 1fr; }
.sg-mos[data-n="4"] { grid-template-columns: 1.7fr 1fr 1.15fr; }
.sg-mos[data-n="4"] .sg-mos-t:nth-child(4) { grid-row: span 2; }
@media (max-width: 899.98px) {
  .sg-mos[data-n="1"],
  .sg-mos[data-n="2"],
  .sg-mos[data-n="3"],
  .sg-mos[data-n="4"] { grid-template-columns: 1fr 1fr; aspect-ratio: auto; }
  .sg-mos[data-n="4"] .sg-mos-t:nth-child(4) { grid-row: auto; }
  .sg-mos[data-n="1"] .sg-mos-lead,
  .sg-mos[data-n="2"] .sg-mos-lead { grid-column: span 2; aspect-ratio: 16 / 9; }
}
/* .sg-pd-shot (shared with the plans grid) pins every tile to 4:3 and rounds it.
   In the mosaic the grid rows decide the height, and the block is rounded as a
   whole, so both are turned off here. */
.sg-mos .sg-mos-t {
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--sg-ink-2);
}
/* Four photos: placed explicitly. Left to auto-placement the last tile spans
   into a third row and the whole mosaic loses its proportions. */
.sg-mos[data-n="4"] .sg-mos-t:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.sg-mos[data-n="4"] .sg-mos-t:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.sg-mos[data-n="4"] .sg-mos-t:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
.sg-mos[data-n="4"] .sg-mos-t:nth-child(4) { grid-area: 1 / 3 / 3 / 4; }
@media (max-width: 899.98px) {
  .sg-mos .sg-mos-lead { aspect-ratio: 16 / 9; }
  .sg-mos .sg-mos-t:not(.sg-mos-lead) { aspect-ratio: 4 / 3; }
  .sg-mos[data-n="4"] .sg-mos-t:nth-child(1),
  .sg-mos[data-n="4"] .sg-mos-t:nth-child(2),
  .sg-mos[data-n="4"] .sg-mos-t:nth-child(3),
  .sg-mos[data-n="4"] .sg-mos-t:nth-child(4) { grid-area: auto; }
  .sg-mos[data-n="4"] .sg-mos-t:nth-child(1) { grid-column: span 2; }
}