/*===========================
Project Name: Matrik - Factory & Industry Website Template.
Author: Egens Lab --> (https://www.egenslab.com/)
Support: https://www.account.egenslab.com/
Developer: Abid Hossain Chowdhury --> hello@egenslab.com
Version: 1.0

01. COMMON CSS 
02. Mixins Css
03. Header CSS
04. Home1 Banner Section CSS
05. Home1 About Section CSS
06. Home1 Service Section CSS
07. Home1 Feature Section CSS
08. Home1 Project Section CSS
09. Home1 Team Section CSS
10. Home1 Team Section CSS
11. Home1 Process Section CSS
12. Home1 Testimonial Section CSS
13. Home1 Faq Section CSS
14. Home1 Map Section CSS
15. Home1 Blog Section CSS
16. Home1 Footer Top Section CSS
17. Home1 Footer Section CSS
18. Home2 Banner Section CSS
19. Home2 Service Section CSS
20. Home2 Benefit Section CSS
21. Home2 About Section CSS
22. Home2 Project Section CSS
23. Home2 Process Section CSS
24. Home2 Why Choose Us Section CSS
25. Home2 Team Section CSS
26. Home2 Video Banner Section CSS
27. Home2 Contact Section CSS
28. Home2 Testimonial Section CSS
29. Home2 Certification Section CSS
30. Home3 Banner Section CSS
31. Home3 Scroll Text Section CSS
32. Home3 About Section CSS
33. Home3 Industry Location Section CSS
34. Home3 Process Section CSS
35. Home3 Video Section CSS
36. Home3 Company Info Section CSS
37. Home3 Team Section CSS
38. Home3 Blog Section CSS
39. Home3 Testimonial Section CSS
40. Home3 Career Opportunity Section CSS
41. Home4 Container Section CSS
42. Home4 Banner Section CSS
43. Home4 About Section CSS
44. Home4 Service Section CSS
45. Home4 Project Section CSS
46. Home4 Process Section CSS
47. Home4 Testimonial Section CSS
48. Home4 Career Section CSS
49. Home4 Counter Section CSS
50. Home4 Product Section CSS
51. Home4 Contact Section CSS
52. Home4 Blog Section CSS
53. Home5 Banner Section CSS
54. Home5 Service Section CSS
55. Home5 About Section CSS
56. Home5 Project Section CSS
57. Home5 Video Section CSS
58. Home5 Product Section CSS
59. Home5 Process Section CSS
60. Home5 Blog Section CSS
61. Home5 Testimonial Section CSS
62. Home5 Contact Section CSS
63. Home5 Footer Section CSS
64. Home6 Banner Section CSS
65. Home6 About Section CSS
66. Home6 Service Section CSS
67. Home6 Project Section CSS
68. Home6 Feature Section CSS
69. Home6 Team Section CSS
70. Home6 Faq Section CSS
71. Home6 Tesimonial Section CSS
72. Home6 Contact Section CSS
73. Home6 Blog Section CSS
74. Home6 Blog Section CSS
75. Breadcrumb Section CSS
76. Blog Page CSS
77. Blog Details Page CSS
78. Inner Contact Section CSS
79. Error Page CSS
80. Product Page CSS
81. Project Horizontal Page CSS
82. Project InfoFlow Page CSS
83. Project Text Down Page CSS
84. Project Details Page CSS
85. Our Client Page CSS
86. Our Process Page CSS
87. Career Page CSS
88. Contact Page CSS
89. Service Page CSS
90. Service Details Page CSS
91. Product Details Page CSS
92. Project Single Slider Page CSS
93. Shop Page CSS
94. Shop Details Page CSS
95. Cart Page CSS
96. Checkout Page CSS
97. Career Details Page CSS
98. Project Metro Page CSS

/*===========================
  THERMOTEC BRAND VARIABLES & COMPONENTS
  Added for Thermotec.com.tr conversion
===========================*/

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

:root {
  /* Thermotec Brand Colors */
  --color-primary:       #005C8F;
  --color-primary-dark:  #003B5C;
  --color-primary-soft:  #DFF3FB;
  --color-accent:        #00A6D6;
  --color-accent-dark:   #007EA7;
  --color-accent-soft:   #E8F8FC;
  --color-white:         #FFFFFF;
  --color-light:         #F7FAFC;
  --color-light-blue:    #F0F8FC;
  --color-section:       #EEF5F9;
  --color-text:          #102A43;
  --color-heading:       #0B2239;
  --color-muted:         #64748B;
  --color-border:        #D6E4EA;
  --color-border-soft:   #E6EEF2;
  --color-success:       #2EAD6B;
  --color-warning:       #F59E0B;
  --color-danger:        #D64545;
  --shadow-soft:         0 10px 30px rgba(16,42,67,0.08);
  --shadow-card:         0 6px 20px rgba(16,42,67,0.06);
  /* Typography */
  --font-primary:        'Inter', 'Montserrat', Arial, sans-serif;
  --radius-card:         12px;
  --radius-btn:          6px;
  --transition:          all 0.3s ease;
}

/*===========================
  01.COMMON CSS 
===========================*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap");

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

::-moz-selection {
  background-color: var(--primary-color1);
  color: var(--white-color);
}

::selection {
  background-color: var(--primary-color1);
  color: var(--white-color);
}

:root {
  --font-manrope: "Manrope", sans-serif;
  --font-dmsans: "DM Sans", sans-serif;
  --white-color: #fff;
  --black-color: #000000;
  --black-color-opc: 0, 0, 0;
  --dark-title-color: #1C1A1E;
  --title-color: #000000;
  --title-color-opc: 0, 0, 0;
  --title-color2: #234F40;
  --title-color2-opc: 35, 79, 64;
  --text-color: #00000099;
  --primary-color1: #CB0000;
  --primary-color1-opc: 203, 0, 0;
  --primary-color2: #FB521E;
  --primary-color2-opc: 251, 82, 30;
  --primary-color3: #8ABC46;
  --primary-color3-opc: 138, 188, 70;
  --primary-color4: #234F40;
  --primary-color4-opc: 35, 79, 64;
  --primary-color5: #233AFF;
  --primary-color5-opc: 35, 58, 255;
  --borders-color: #eee;
}

/*================================================
02. Mixins Css
=================================================*/
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-manrope);
  color: var(--title-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-manrope);
  font-weight: 600;
  line-height: 1.4;
  color: var(--title-color);
}

input {
  border: none;
  outline: none;
}

button {
  outline: none;
  border: none;
}

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

a {
  text-decoration: none;
}

p {
  font-family: var(--font-dmsans);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

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

@media (min-width: 992px) and (max-width: 1199px) {
  .pt-120 {
    padding-top: 100px;
  }
}

@media (max-width: 991px) {
  .pt-120 {
    padding-top: 90px;
  }
}

@media (max-width: 767px) {
  .pt-120 {
    padding-top: 70px;
  }
}

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

@media (min-width: 992px) and (max-width: 1199px) {
  .mb-120 {
    margin-bottom: 100px;
  }
}

@media (max-width: 991px) {
  .mb-120 {
    margin-bottom: 90px;
  }
}

@media (max-width: 767px) {
  .mb-120 {
    margin-bottom: 70px;
  }
}

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

@media (max-width: 576px) {
  .mb-45 {
    margin-bottom: 35px;
  }
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .mt-60 {
    margin-top: 40px;
  }
}

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

body.tt-magic-cursor #magic-cursor {
  display: block;
}

#ball {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  pointer-events: none;
  border-style: solid;
  border-radius: 50%;
  border-color: var(--primary-color1);
  background-color: var(--primary-color1);
  /* Note: border width handled through JS */
}

/* Ball view
============= */
#ball.ball-view {
  background-image: linear-gradient(112.83deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 110.84%);
  background-color: rgba(var(--primary-color1-opc), 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
  font-family: var(--font-dmsans);
  line-height: 1.4;
  text-align: center;
}

#ball .ball-view-inner {
  padding: 0 5px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}

#ball .ball-view-inner i {
  font-size: 24px;
}

/* Ball drag
============= */

#ball.magnetic-active {
  background-image: linear-gradient(112.83deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 110.84%);
  background-color: rgba(var(--primary-color1-opc), 0.5);
  -webkit-backdrop-filter: blur(1.1px);
  backdrop-filter: blur(1.1px);
  border-color: transparent !important;
}

/* Ball close
============== */

.progress-wrap {
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--borders-color);
  background-color: transparent;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 200ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap svg {
  fill: none;
  transition: 0.5s;
}

.progress-wrap svg.progress-circle {
  stroke: var(--primary-color1);
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear;
}

.progress-wrap .arrow {
  fill: var(--primary-color1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}

.progress-wrap:hover {
  background-color: var(--primary-color1);
}

.progress-wrap:hover .arrow {
  fill: var(--white-color);
}

.primary-btn6 {
  background-color: var(--black-color);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 13px;
  color: var(--white-color);
  letter-spacing: 0.48px;
  line-height: 1;
  padding: 15px 6px 15px 28px;
  text-transform: uppercase;
  text-decoration: underline;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 100px;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .primary-btn6 {
    padding: 12px 6px 12px 24px;
  }
}

.primary-btn6 svg {
  fill: rgba(255, 255, 255, 0.15);
  transition: 0.5s;
}

.primary-btn6::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  background-color: var(--primary-color5);
  transform-origin: right center;
  transform: scaleX(0);
  z-index: -1;
  border-radius: 30px;
  transition: transform 0.7s;
}

.primary-btn6:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.primary-btn6.transparent {
  background-color: transparent;
  border: 1px solid rgba(var(--primary-color5-opc), 0.35);
  color: var(--primary-color5);
  padding: 14px 5px 14px 27px;
}

.primary-btn6.transparent svg {
  fill: rgba(var(--primary-color5-opc), 0.2);
}

.primary-btn6.transparent:hover {
  color: var(--white-color);
}

.primary-btn6.transparent:hover svg {
  fill: rgba(255, 255, 255, 0.15);
}

.select {
  margin-bottom: 25px;
}

.section-title>span {
  color: var(--primary-color1);
  font-family: var(--font-dmsans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
}

@media (max-width: 576px) {
  .section-title>span {
    font-size: 13px;
  }
}

.section-title>span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -41px;
  width: 35px;
  height: 1px;
  background-color: var(--primary-color1);
}

.section-title h2 {
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0;
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .section-title h2 {
    font-size: 56px;
  }
}

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

@media (max-width: 1199px) {
  .section-title h2 {
    font-size: 48px;
  }
}

@media (max-width: 991px) {
  .section-title h2 {
    font-size: 42px;
  }
}

@media (max-width: 767px) {
  .section-title h2 {
    font-size: 38px;
    line-height: 1.2;
  }
}

@media (max-width: 576px) {
  .section-title h2 {
    font-size: 34px;
    line-height: 1.3;
  }
}

.section-title p {
  color: var(--text-color);
  font-family: var(--font-dmsans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 0;
  padding-top: 20px;
}

@media (max-width: 576px) {
  .section-title p {
    padding-top: 15px;
    font-size: 15px;
  }
}

.section-title.white h2 {
  color: var(--white-color);
}

.section-title.white p {
  color: rgba(255, 255, 255, 0.6);
}

.section-title.three h2 {
  font-size: 50px;
  font-weight: 600;
}

@media (max-width: 1399px) {
  .section-title.three h2 {
    font-size: 46px;
  }
}

@media (max-width: 1199px) {
  .section-title.three h2 {
    font-size: 42px;
  }
}

@media (max-width: 991px) {
  .section-title.three h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .section-title.three h2 {
    font-size: 38px;
  }
}

@media (max-width: 576px) {
  .section-title.three h2 {
    font-size: 32px;
  }
}

.section-title.five>span {
  color: var(--primary-color5);
  padding-left: 41px;
}

.section-title.five>span::after {
  right: unset;
  left: 0;
  background-color: var(--primary-color5);
}

@media (max-width: 576px) {
  .section-title.five h2 {
    font-size: 30px;
    line-height: 1.4;
  }
}

.section-title.five h2 span {
  color: rgba(var(--title-color-opc), 0.5);
  font-weight: 400;
}

.section-title.five p {
  max-width: 670px;
  width: 100%;
}

@media (max-width: 576px) {
  .section-title.five p {
    font-size: 14px;
  }
}

.section-title.five.text-center p {
  margin: 0 auto;
}

/*=====================================
  03. Header CSS
========================================*/
@keyframes fade-down {
  0% {
    opacity: 0;
    transform: scaleY(0);
    visibility: hidden;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
  }
}

@keyframes zoom-In-effect {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes smooth-header {
  0% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes qode-draw {

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

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

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

@keyframes qode-draw {

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

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

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

@keyframes qode-draw {

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

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

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

@keyframes qode-draw {

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

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

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

@keyframes qode-draw {

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

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

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

@keyframes qode-draw {

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

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

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

.right-sidebar-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.right-sidebar-menu.show-right-menu {
  opacity: 1;
  visibility: visible;
  z-index: 99999;
}

.right-sidebar-menu .right-sidebar-close-btn {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 1px solid #3F444B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.35s;
}

.right-sidebar-menu .right-sidebar-close-btn i {
  font-size: 26px;
  line-height: 1;
  margin-top: 2px;
  color: #3F444B;
  transition: 0.35s;
}

.right-sidebar-menu .right-sidebar-close-btn:hover {
  background-color: var(--title-color);
}

.right-sidebar-menu .right-sidebar-close-btn:hover i {
  color: var(--white-color);
}

.sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0px 0 70px;
  z-index: 9992;
  overflow-y: auto;
  transition: all 0.3s;
  background-color: var(--white-color);
  height: 100%;
  transform-origin: left;
  transform: translateX(-120%);
  transition: transform 0.6s ease-in;
}

@media (max-width: 991px) {
  .sidebar-menu {
    transform-origin: top;
    transform: translateY(-120%);
  }

  .sidebar-menu.active {
    transform: translateY(0);
  }
}

.sidebar-menu.active {
  transform: translateX(0);
}

@media (max-width: 1399px) {
  .sidebar-menu {
    padding: 0px 0 70px;
  }
}

/*=====================================
  04. Home1 Banner Section CSS
========================================*/
@keyframes textRotation {
  to {
    transform: rotate(360deg);
  }
}

/*=====================================
  05. Home1 About Section CSS
========================================*/

/*=====================================
  06. Home1 Service Section CSS
========================================*/
@keyframes qodef-animate-image-out {
  0% {
    transform: scale(1) translateZ(0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  100% {
    transform: scale(1);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes qodef-animate-image-in {
  0% {
    transform: scale(1) translateZ(0);
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  100% {
    transform: scale(1);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

/*=====================================
  07. Home1 Feature Section CSS
========================================*/

/*=====================================
  08. Home1 Project Section CSS
========================================*/

/*=====================================
  09. Home1 Team Section CSS
========================================*/

/*=====================================
  10. Home1 Team Section CSS
========================================*/

/*=====================================
  11. Home1 Process Section CSS
========================================*/

/*=====================================
  12. Home1 Testimonial Section CSS
========================================*/

/*=====================================
  13. Home1 Faq Section CSS
========================================*/
.faq-wrap .accordion .accordion-item {
  border: none;
  background-color: transparent;
}

.faq-wrap .accordion .accordion-item:first-child .accordion-header .accordion-button {
  padding-top: 0;
}

.faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
  border: none;
  border-radius: unset;
  box-shadow: none;
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: capitalize;
  padding: 0;
  padding-bottom: 20px;
  padding-top: 35px;
  background-color: transparent;
  border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 1199px) {
  .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    padding-top: 25px;
    padding-bottom: 15px;
  }
}

.faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after {
  width: unset;
  height: unset;
  content: url(../img/home1/icon/faq-accordion-arrow-down.svg);
  font-family: bootstrap-icons;
  background-image: none;
  font-weight: 800;
  font-size: 17px;
}

.faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: unset;
}

.faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  content: url(../img/home1/icon/faq-accordion-arrow-up.svg);
  transform: unset;
}

@media (max-width: 576px) {
  .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    font-size: 15px;
  }
}

.faq-wrap .accordion .accordion-item .accordion-body {
  padding: 20px;
  padding-bottom: 10px;
  color: var(--text-color);
  font-family: var(--font-dmsans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

@media (max-width: 576px) {
  .faq-wrap .accordion .accordion-item .accordion-body {
    font-size: 15px;
    padding: 15px;
    padding-bottom: 5px;
  }
}

/*=====================================
  14. Home1 Map Section CSS
========================================*/

/*=====================================
  15. Home1 Blog Section CSS
========================================*/

/*=====================================
  16. Home1 Footer Top Section CSS
========================================*/

/*=====================================
  17. Home1 Footer Section CSS
========================================*/

/*=====================================
  18. Home2 Banner Section CSS
========================================*/

/*=====================================
  19. Home2 Service Section CSS
========================================*/

/*=====================================
  20. Home2 Benefit Section CSS
========================================*/

/*=====================================
  21. Home2 About Section CSS
========================================*/

/*=====================================
  22. Home2 Project Section CSS
========================================*/

/*=====================================
  23. Home2 Process Section CSS
========================================*/

/*=====================================
  24. Home2 Why Choose Us Section CSS
========================================*/

/*=====================================
  25. Home2 Team Section CSS
========================================*/

/*=====================================
  26. Home2 Video Banner Section CSS
========================================*/

@keyframes scroll-x {
  from {
    transform: translateX(0);
  }

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

/*=====================================
  27. Home2 Contact Section CSS
========================================*/

/*=====================================
  28. Home2 Testimonial Section CSS
========================================*/

/*=====================================
  29. Home2 Certification Section CSS
========================================*/

/*=====================================
  30. Home3 Banner Section CSS
========================================*/

/*=====================================
  31. Home3 Scroll Text Section CSS
========================================*/

@keyframes scroll-x {
  from {
    transform: translateX(0);
  }

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

/*=====================================
  32. Home3 About Section CSS
========================================*/

/*=====================================
  33. Home3 Industry Location Section CSS
========================================*/

@keyframes waves {
  0% {
    transform: scale(0.2, 0.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  50% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  }

  100% {
    transform: scale(0.9, 0.9);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

/*=====================================
  34. Home3 Process Section CSS
========================================*/

/*=====================================
  35. Home3 Video Section CSS
========================================*/

/*=====================================
  36. Home3 Company Info Section CSS
========================================*/

/*=====================================
  37. Home3 Team Section CSS
========================================*/

/*=====================================
  38. Home3 Blog Section CSS
========================================*/

/*=====================================
  39. Home3 Testimonial Section CSS
========================================*/

/*=====================================
  40. Home3 Career Opportunity Section CSS
========================================*/

/*=====================================
  41. Home4 Container Section CSS
========================================*/

/*=====================================
  42. Home4 Banner Section CSS
========================================*/

/*=====================================
  43. Home4 About Section CSS
========================================*/

/*=====================================
  44. Home4 Service Section CSS
========================================*/

/*=====================================
  45. Home4 Project Section CSS
========================================*/

/*=====================================
  46. Home4 Process Section CSS
========================================*/

/*=====================================
  47. Home4 Testimonial Section CSS
========================================*/

/*=====================================
  48. Home4 Career Section CSS
========================================*/

/*=====================================
  49. Home4 Counter Section CSS
========================================*/

/*=====================================
  50. Home4 Product Section CSS
========================================*/

/*=====================================
  51. Home4 Contact Section CSS
========================================*/

/*=====================================
  52. Home4 Blog Section CSS
========================================*/

/*=====================================
  53. Home5 Banner Section CSS
========================================*/

.home5-feature-section {
  position: relative;
}

@media (max-width: 991px) {
  .home5-feature-section {
    padding: 0 30px;
  }
}

@media (max-width: 767px) {
  .home5-feature-section {
    padding: 0 20px;
  }
}

@media (max-width: 576px) {
  .home5-feature-section {
    padding: 0 10px;
  }
}

.home5-feature-section .feature-wrapper {
  transform-origin: center center;
}

.home5-feature-section .circular-text {
  position: absolute;
  top: -10px;
  right: 14%;
  min-width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
  border: 1px solid rgba(var(--primary-color4-opc), 0.2);
}

@media (max-width: 1199px) {
  .home5-feature-section .circular-text {
    right: 12%;
  }
}

@media (max-width: 991px) {
  .home5-feature-section .circular-text {
    top: -60px;
    right: 8%;
  }
}

@media (max-width: 767px) {
  .home5-feature-section .circular-text {
    display: none;
  }
}

.home5-feature-section .circular-text .text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: textRotation 8s linear infinite;
}

.home5-feature-section .circular-text .text span {
  position: absolute;
  left: 50%;
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-size: 13px;
  font-weight: 700;
  transform-origin: 0 60px;
}

/*=====================================
  54. Home5 Service Section CSS
========================================*/

/*=====================================
  55. Home5 About Section CSS
========================================*/

/*=====================================
  56. Home5 Project Section CSS
========================================*/

/*=====================================
  57. Home5 Video Section CSS
========================================*/

/*=====================================
  58. Home5 Product Section CSS
========================================*/

/*=====================================
  59. Home5 Process Section CSS
========================================*/

/*=====================================
  60. Home5 Blog Section CSS
========================================*/

/*=====================================
  61. Home5 Testimonial Section CSS
========================================*/

/*=====================================
  62. Home5 Contact Section CSS
========================================*/

/*=====================================
  63. Home5 Footer Section CSS
========================================*/

/*=====================================
  64. Home6 Banner Section CSS
========================================*/

.home6-banner-bottom-area {
  padding: 0 150px;
  margin-top: -210px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1699px) {
  .home6-banner-bottom-area {
    padding: 0px 80px;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .home6-banner-bottom-area {
    margin-top: -245px;
  }
}

@media (max-width: 1399px) {
  .home6-banner-bottom-area {
    padding: 0px 60px;
  }
}

@media (max-width: 1199px) {
  .home6-banner-bottom-area {
    padding: 0px 40px;
    margin-top: -170px;
  }
}

@media (max-width: 991px) {
  .home6-banner-bottom-area {
    margin-top: 0;
  }
}

@media (max-width: 576px) {
  .home6-banner-bottom-area {
    padding: 0 10px;
  }
}

.home6-banner-bottom-area .banner-bottom-img-wrapper {
  position: relative;
  z-index: 1;
  transform-origin: center center;
}

.home6-banner-bottom-area .banner-bottom-img-wrapper img {
  border-radius: 30px;
}

@media (max-width: 991px) {
  .home6-banner-bottom-area .banner-bottom-img-wrapper img {
    min-height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

@media (max-width: 576px) {
  .home6-banner-bottom-area .banner-bottom-img-wrapper img {
    min-height: 350px;
    border-radius: 15px;
  }
}

.home6-banner-bottom-area .banner-bottom-img-wrapper::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.home6-banner-bottom-area .circular-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 80px;
  min-width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
  border: 1px solid rgba(var(--primary-color5-opc), 0.2);
  z-index: 9;
}

@media (max-width: 1199px) {
  .home6-banner-bottom-area .circular-text {
    right: 20px;
  }
}

@media (max-width: 576px) {
  .home6-banner-bottom-area .circular-text {
    display: none;
  }
}

.home6-banner-bottom-area .circular-text .text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: textRotation 8s linear infinite;
}

.home6-banner-bottom-area .circular-text .text span {
  position: absolute;
  left: 50%;
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-size: 13px;
  font-weight: 700;
  transform-origin: 0 60px;
}

/*=====================================
  65. Home6 About Section CSS
========================================*/

@keyframes gradientMove {
  0% {
    background-position: center 0%;
  }

  100% {
    background-position: center 100%;
  }
}

/*=====================================
  66. Home6 Service Section CSS
========================================*/

/*=====================================
  67. Home6 Project Section CSS
========================================*/

/*=====================================
  68. Home6 Feature Section CSS
========================================*/

/*=====================================
  69. Home6 Team Section CSS
========================================*/

/*=====================================
  70. Home6 Faq Section CSS
========================================*/
.home6-faq-section .nav-pills {
  justify-content: center;
  gap: 30px;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .home6-faq-section .nav-pills {
    margin-bottom: 55px;
  }
}

@media (max-width: 576px) {
  .home6-faq-section .nav-pills {
    gap: 15px;
    margin-bottom: 45px;
  }
}

.home6-faq-section .nav-pills .nav-item .nav-link {
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 10px 40px;
  background-color: transparent;
  border: 1px solid rgba(var(--black-color-opc), 0.15);
  border-radius: 100px;
}

.home6-faq-section .nav-pills .nav-item .nav-link.active {
  background-color: rgba(var(--primary-color5-opc), 0.15);
  border-color: transparent;
  color: var(--primary-color5);
}

/*=====================================
  71. Home6 Tesimonial Section CSS
========================================*/

/*=====================================
  72. Home6 Contact Section CSS
========================================*/

/*=====================================
  73. Home6 Blog Section CSS
========================================*/

/*=====================================
  74. Home6 Blog Section CSS
========================================*/

/*=====================================
  75. Breadcrumb Section CSS
========================================*/
.breadcrumb-section {
  background-color: #FFFBF5;
}

.breadcrumb-section .breadcrumb-content-wrap {
  position: relative;
  z-index: 1;
}

.breadcrumb-section .breadcrumb-content-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 1px;
  height: 100%;
  background-color: rgba(var(--black-color-opc), 0.08);
  z-index: -1;
}

@media (max-width: 1799px) {
  .breadcrumb-section .breadcrumb-content-wrap::before {
    left: 10%;
  }
}

@media (max-width: 1699px) {
  .breadcrumb-section .breadcrumb-content-wrap::before {
    left: 8%;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb-section .breadcrumb-content-wrap::before {
    left: 3%;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-section .breadcrumb-content-wrap::before {
    left: 3%;
  }
}

.breadcrumb-section .breadcrumb-content-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 33.2%;
  width: 1px;
  height: 100%;
  background-color: rgba(var(--black-color-opc), 0.08);
  z-index: -1;
}

.breadcrumb-section .breadcrumb-content-wrap .vector {
  position: absolute;
  bottom: 75px;
  left: 0;
}

.breadcrumb-section .breadcrumb-content-wrap .circular-text {
  position: absolute;
  right: 13%;
  bottom: 0;
  min-width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-color);
  border: 1px solid rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 1399px) {
  .breadcrumb-section .breadcrumb-content-wrap .circular-text {
    right: 10%;
  }
}

@media (max-width: 1199px) {
  .breadcrumb-section .breadcrumb-content-wrap .circular-text {
    right: 5%;
  }
}

@media (max-width: 991px) {
  .breadcrumb-section .breadcrumb-content-wrap .circular-text {
    display: none;
  }
}

.breadcrumb-section .breadcrumb-content-wrap .circular-text .text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: textRotation 8s linear infinite;
}

.breadcrumb-section .breadcrumb-content-wrap .circular-text .text span {
  position: absolute;
  left: 50%;
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-size: 13px;
  font-weight: 700;
  transform-origin: 0 60px;
}

.breadcrumb-section .breadcrumb-content-wrap .circular-text::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 200px;
  background-color: rgba(var(--black-color-opc), 0.08);
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content {
  padding: 160px 0 70px;
}

@media (max-width: 991px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content {
    padding: 140px 0 50px;
  }
}

@media (max-width: 576px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content {
    padding: 130px 0 40px;
  }
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li {
  color: rgba(var(--title-color-opc), 0.5);
  font-family: var(--font-dmsans);
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  padding-left: 20px;
}

@media (max-width: 576px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li {
    font-size: 13px;
  }
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li::before {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 50%;
  background-color: rgba(var(--title-color-opc), 0.5);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li:first-child {
  padding-left: 0;
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li:first-child::before {
  display: none;
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li a {
  color: rgba(var(--title-color-opc), 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.5s;
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li a svg {
  fill: rgba(var(--title-color-opc), 0.5);
  transition: 0.5s;
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li a:hover {
  color: var(--primary-color1);
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content .breadcrumb-list li a:hover svg {
  fill: var(--primary-color1);
}

.breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content h1 {
  color: var(--title-color);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.2;
  margin-bottom: 0;
}

@media (max-width: 1399px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content h1 {
    font-size: 57px;
  }
}

@media (max-width: 1199px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content h1 {
    font-size: 53px;
  }
}

@media (max-width: 991px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content h1 {
    font-size: 46px;
    line-height: 1.3;
  }
}

@media (max-width: 767px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content h1 {
    font-size: 35px;
  }
}

@media (max-width: 576px) {
  .breadcrumb-section .breadcrumb-content-wrap .breadcrumb-content h1 {
    font-size: 32px;
  }
}

.breadcrumb-section .breadcrumb-img {
  -webkit-mask-image: url(../img/innerpages/breadcrumb-img-bg.png);
  mask-image: url(../img/innerpages/breadcrumb-img-bg.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 1199px) {
  .breadcrumb-section .breadcrumb-img {
    -webkit-mask-position: 67%;
    mask-position: 67%;
  }
}

.breadcrumb-section .breadcrumb-img img {
  min-height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (max-width: 576px) {
  .breadcrumb-section .breadcrumb-img img {
    min-height: 280px;
  }
}

/*=====================================
  76. Blog Page CSS
========================================*/

/*=====================================
  77. Blog Details Page CSS
========================================*/

/*=====================================
  78. Inner Contact Section CSS
========================================*/

/*=====================================
  79. Error Page CSS
========================================*/

/*=====================================
  80. Product Page CSS
========================================*/

/*=====================================
  81. Project Horizontal Page CSS
========================================*/

/*=====================================
  82. Project InfoFlow Page CSS
========================================*/

/*=====================================
  83. Project Text Down Page CSS
========================================*/

/*=====================================
  84. Project Details Page CSS
========================================*/

/*=====================================
  85. Our Client Page CSS
========================================*/

/*=====================================
  86. Our Process Page CSS
========================================*/

/*=====================================
  87. Career Page CSS
========================================*/

/*=====================================
  88. Contact Page CSS
========================================*/

/*=====================================
  89. Service Page CSS
========================================*/

/*=====================================
  90. Service Details Page CSS
========================================*/

/*=====================================
  91. Product Details Page CSS
========================================*/

/*=====================================
  92. Project Single Slider Page CSS
========================================*/

/*=====================================
  93. Shop Page CSS
========================================*/

/*=====================================
  94. Shop Details Page CSS
========================================*/

/*=====================================
  95. Cart Page CSS
========================================*/

/*=====================================
  96. Checkout Page CSS
========================================*/

/*=====================================
  97. Career Details Page CSS
========================================*/

/*=====================================
  98. Project Metro Page CSS
========================================*/

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

/* =============================================================
   FOOTER — Custom Layout (friojet)
   ============================================================= */

/* Left brand column — left-aligned */

/* US Brand badge */

/* Right column — flex row, pushed right */

/* Responsive */


/* ============================================================
   THERMOTEC COMPONENT STYLES
   Tasks 2.4 – 2.13 | thermotec.com.tr
   ============================================================ */

/* ---------------------------
   Buttons
---------------------------- */
.btn-thermotec-primary {
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.btn-thermotec-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}
.btn-thermotec-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.btn-thermotec-outline:hover {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------
   Section Utilities
---------------------------- */
.tt-section        { padding: 80px 0; }
.tt-section-sm     { padding: 50px 0; }
.tt-section-light  { background: var(--color-light); }
.tt-section-white  { background: var(--color-white); }

.tt-section-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 16px;
  line-height: 1.2;
}
.tt-section-subtitle {
  font-size: 17px;
  color: var(--color-muted);
  margin-bottom: 48px;
  line-height: 1.6;
}
.tt-divider {
  width: 60px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  margin: 0 auto 20px;
}
.tt-divider.left { margin: 0 0 20px; }

/* ---------------------------
   Product Cards
---------------------------- */
.tt-product-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tt-product-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

/* ---------------------------
   Category Cards
---------------------------- */
.tt-cat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tt-cat-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}
.tt-cat-card .cat-icon {
  font-size: 36px;
  color: var(--color-accent);
  margin-bottom: 16px;
  display: block;
}
.tt-cat-card .cat-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 10px;
  line-height: 1.3;
}
.tt-cat-card .cat-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

/* ---------------------------
   Application Cards
---------------------------- */
.tt-app-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  transition: var(--transition);
  height: 100%;
}
.tt-app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

/* ---------------------------
   Technical Specs Table
---------------------------- */

/* ---------------------------
   Downloads
---------------------------- */
.tt-download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  margin-bottom: 10px;
  transition: var(--transition);
  gap: 16px;
}
.tt-download-item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}
.tt-download-item .dl-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.tt-download-item .dl-icon { font-size: 24px; color: var(--color-primary); flex-shrink: 0; }
.tt-download-item .dl-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------
   Hero Section
---------------------------- */
.tt-hero {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-accent-dark) 100%);
  min-height: 600px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tt-hero .container { position: relative; z-index: 1; }
.tt-hero h1 {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
}
.tt-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
@media (max-width: 768px) {
  .tt-hero { min-height: 420px; }
  .tt-hero h1 { font-size: 30px; }
  .tt-hero-trust { gap: 14px; }
}

/* Inner Page Hero (breadcrumb pages) */

/* ---------------------------
   Header
---------------------------- */
.tt-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border-soft);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(16,42,67,0.06);
}
.tt-topbar {
  background: var(--color-primary-dark);
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.tt-topbar a { color: rgba(255,255,255,0.8); text-decoration: none; transition: var(--transition); }
.tt-topbar a:hover { color: #fff; }
.tt-header .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text) !important;
  padding: 8px 14px !important;
  transition: var(--transition);
  position: relative;
}
.tt-header .nav-link:hover,
.tt-header .nav-link.active { color: var(--color-primary) !important; }
.tt-header .dropdown-menu {
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  padding: 8px 0;
  min-width: 220px;
}
.tt-header .dropdown-item {
  font-size: 13px;
  color: var(--color-text);
  padding: 8px 20px;
  transition: var(--transition);
}
.tt-header .dropdown-item:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ---------------------------
   Footer
---------------------------- */
.tt-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  padding: 64px 0 0;
}
.tt-footer h5 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 20px;
}
.tt-footer ul { list-style: none; padding: 0; margin: 0; }
.tt-footer ul li { margin-bottom: 10px; }
.tt-footer ul li a {
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  text-decoration: none;
  transition: var(--transition);
}
.tt-footer ul li a:hover { color: var(--color-accent); }
.tt-footer p { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.7; }
.tt-footer-bottom {
  background: rgba(0,0,0,0.25);
  padding: 16px 0;
  margin-top: 48px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.tt-footer-cta-band {
  background: var(--color-accent);
  padding: 50px 0;
}
.tt-footer-cta-band h3 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 8px;
}
.tt-footer-cta-band p {
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* Social icons in footer */
.social-area {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.social-area li a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  text-decoration: none;
  transition: var(--transition);
}
.social-area li a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ---------------------------
   Why Choose / Feature Cards
---------------------------- */

/* ---------------------------
   Stats / Counters Row
---------------------------- */

/* ---------------------------
   Info / Contact Cards
---------------------------- */

/* ---------------------------
   Filter Buttons (Downloads / Products)
---------------------------- */

/* ---------------------------
   Single Product Page
---------------------------- */
.tt-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 20px;
}
@media (max-width: 767px) {
  .tt-options-list {
    columns: 1;
  }
}

/* ---------------------------
   Responsive Utilities
---------------------------- */
@media (max-width: 991px) {
  .tt-section { padding: 60px 0; }
  .tt-section-title { font-size: 28px; }
  .tt-section-subtitle { font-size: 16px; margin-bottom: 32px; }
  .tt-hero h1 { font-size: 34px; }
}
@media (max-width: 767px) {
  .tt-section { padding: 48px 0; }
  .tt-section-title { font-size: 24px; }
  .tt-hero h1 { font-size: 26px; }
  .tt-footer { padding: 48px 0 0; }
  .tt-download-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   END THERMOTEC COMPONENT STYLES
   ============================================================ */